「文末附彩蛋」移動UI界面設計,你千萬不能忽略的設計要點

易用性

不論你是想提高流量還是轉換率,UI界面設計都起到關鍵性的作用。我們所需要的就是為我們用戶提供最直觀,最流暢的體驗。例如我們可以選擇使用觸摸手勢的UI元素來代替手動選擇操作。

「文末附彩蛋」移動UI界面設計,你千萬不能忽略的設計要點

可讀性設計

小型設備的可讀性非常棘手。所以我們在設計UI界面時應該注重對比度,字體大小和行高,通過提升對比度,增加行高或字母間距來提高易讀性,不要讓文本重疊,而且最好是在白色的背景上填充黑色的字體。

「文末附彩蛋」移動UI界面設計,你千萬不能忽略的設計要點

「文末附彩蛋」移動UI界面設計,你千萬不能忽略的設計要點

啟動頁面

眾所周知,第一印象十分重要,而啟動頁面就是你的用戶看到的第一個圖像,UI界面設計的啟動頁面直接影響用戶對你整個app 的看法。啟動頁面通常比較簡約,並伴隨產品的名稱,標誌或口號的展示。它的目的只是為了增強應用程序的視覺感知,每個應用程序都應當提供啟動頁面。建議將頁面設置為4-8秒,儘量控制頁面大小來減少加載時間。像國產原型設計工具Mockplus中的定時器功能,就可幫助設計師快速且高效的實現屏幕轉場功能。

「文末附彩蛋」移動UI界面設計,你千萬不能忽略的設計要點

登錄頁面

「文末附彩蛋」移動UI界面設計,你千萬不能忽略的設計要點

直觀的導航

在用戶體驗設計方面,導航的概念是設定可用性的基本概念之一。導航對於任何類型的應用程序都非常重要。用戶的時間和耐心都是有限的,如果你的用戶不能很快找到他們想要的東西,他們很快就會退出你的應用或者網站,所以我們需要提供給用戶最直觀的導航欄。

搜索框

在眾多手機界面設計中,搜索功能是非常必要的。因為搜索功能會提高用戶使用你產品的效率,並且用戶對於搜索功能的依賴性也比較大,所以設計好搜索功能將會很大程度上提高用戶體驗。最原始的方式就是文字的錄入,現在我們能看到比較新穎的錄入方式就是語音和圖片的錄入。以淘寶和QQ音樂為例。

空狀態

第一次使用界面的體驗至關重要,但設計師經常會忽略它。空狀態是指當用戶第一次下載你的app,他們不會看到任何數據,也不會有歷史記錄之類的東西,這被稱為空白狀態或零數據狀態。此時你需要給用戶一些提示並指導他們如何來使用你的app。否則,他們會感到不知所措,從而卸載你的軟件。

添加分享按鈕

分享是任何移動應用程序的重要功能,用戶可隨時隨地的傳播和分享有關你的產品的信息。通過添加分享圖標按鈕,讓用戶可以輕鬆的分享你的內容和信息。

快速的原型設計工具

如果你仔細看看大多數擁有精美華麗UI界面的應用程序或網站,你會發現大多數都利用了快速而且高效的原型製作工具。這為你的程序開發和網站建設的快速迭代奠定了堅實的基礎。如今,像Mockplus,Principle和Sketch等都成為產品經理職場技能的必備工具了。就拿國產中口碑最好的原型設計工具Mockplus來說,最突出的優勢就是簡單,快速,超低的學習成本,直接上手,這也是為什麼它成為小白產品經理的最愛。

1.定時器轉場:利用它可以方便地實現延時自動頁面跳轉、延遲自動交互的效果,我們以美團為例。

Step 1:在首頁設置一個定時器,並將它和內容頁設置交互。

「文末附彩蛋」移動UI界面設計,你千萬不能忽略的設計要點

Step 2:設置定時器的默認延遲時間為1000ms,根據自己的需求進行更改

「文末附彩蛋」移動UI界面設計,你千萬不能忽略的設計要點

在線演示地址:https://run.mockplus.cn/SWvMx9leKxkbDnBo/index.html

2.日期選擇器

Step 1: 拖出一個滾動區,利用多行文本填充好自己想要的數字,比如說年月日,並放入滾動區中。

Step 2:利用2個形狀組件,設置好背景色並調整透明度,覆蓋在不顯示區域。

Step 3:縮小滾動區即可,是不是很簡單呢?

「文末附彩蛋」移動UI界面設計,你千萬不能忽略的設計要點

在線演示地址:https://run.mockplus.cn/6F59PgCY7z089FJF/index.html

總結

關於UI界面設計,每位設計師都應該考慮很多因素。用戶界面經常會說以用戶為中心(User Centered Design),簡單說就是要滿足用戶的需求,你的界面要讓用戶有賓至如歸的感覺。總的來說,優秀的用戶界面設計的本質就是幫助用戶儘可能簡單,高效地完成任務。


分享到:


相關文章: