四種常見的APP分類界面布局設計案例學習


相信各位對於APP設計,已經很熟練啦。如何在熟練的基礎上提高我們界面的優美度,或者是進行APP界面的迭代設計。

重構APP設計布局是我們必須要經歷的一個過程。

在之前,學習UI設計的時候,經常要接觸到頁面的布局,布局的方式會直接影響一個APP的視覺效果,好的布局方式,往往能帶來舒服的視覺效果,更能得到用戶的接受與好評。

今天,25學堂跟大家來看下四種常見的APP分類界面布局

 

 

第一種APP分類界面布局:宮格式分類界面布局

宮格式布局也算是移動APP上最常見的布局方式,也是用戶體驗最佳的一種方式。不然錘子手機的界面就是宮格的布局。

%e5%88%86%e7%b1%bb%e7%95%8c%e9%9d%a2%e5%ae%ab%e6%a0%bc%e5%bc%8f%e5%b8%83%e5%b1%80

APP宮格設計 貼圖

上面這個分類界面的設計的圖標非常漂亮、精致。有點MBE風格的味道。

 

 

第二種APP分類界面布局:左右對稱平等分的分類布局

這類分類界面設計的公式:左邊是分類名稱 + 分類說明 +分類圖片

這類布局方式在電商、旅游、新聞等APP分類界面當中最常見。也適合分類特別多的APP布局。

%e7%94%b5%e5%95%86%e5%88%86%e7%b1%bb%e7%95%8c%e9%9d%a2%e5%8f%82%e8%80%83%e5%ad%a6%e4%b9%a0

這類對設計的要求比較高,需要設計師把握好設計的尺度。比如左邊和大小和右邊實物圖的比例要是黃金比例才行。

 

 

第三種APP分類界面布局:列表式分類界面布局設計

這類最簡單,也是最經典的分類界面設計,但是可以融合一些宮格式布局來搭配。比如下面的分類界面設計非常不錯。

%e5%88%97%e8%a1%a8%e5%bc%8f%e7%9a%84%e5%88%86%e7%b1%bb%e7%95%8c%e9%9d%a2%e8%ae%be%e8%ae%a1

 

列表式布局的優點:這種方式的在APP用戶體驗改進了很多,尤其在連續切換時其操作方式的連續性比較強,主體頁面的過渡也更加平滑,會產生更加流暢的體驗。

列表式布局的缺點:不適合類別分類目錄過多的界面。而且這樣連續性的滑動容易導致定位不准。或者容易觸發別的欄目的類目。

 

 

第四種APP分類界面布局:分模塊布局設計

這類的布局設計,適合分類種類比較多,而且擴展性強。同時也可以給設計師提供更廣的設計空間。

比如下圖這樣的設計:

%e5%88%86%e6%a8%a1%e5%9d%97%e5%8c%96%e7%9a%84%e5%88%86%e7%b1%bb%e7%95%8c%e9%9d%a2%e5%b8%83%e5%b1%80

分模塊的分類界面設計布局的優點就是非常清晰明了。

缺點:操作點擊區域多了,對於有選擇困難症的人來說,就會出現不舒服的現象。所以,對於設計師來說,就要對留白技巧掌握非常准確。通過色塊和留白消除這樣的現象。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM