在實際的app設計中，要考慮資訊優先順序和各種佈局方式的契合度，採用最合適的佈局設計方案，來提高移動產品的易用性和互動體驗。

今天25學堂的小編給大家分享的8種常見移動端的基礎佈局方案，算是給大家溫故而知新吧！

 

常見的APP佈局乾貨：

1、 APP細節考量的四個方面：導航、字型、佈局和配色

2、四種常見的APP分類介面佈局設計案例學習

3、APP設計進階教程：善用圖示風格設計宮格佈局

 

 

1、 list 列表佈局

 

優點

list列表縱向長度沒有限制，上下滑動可以檢視無限內容；

list列表在視覺上整齊美觀，使用者接受度很高；

list列表可以展示內容長和次級文字的標題。

缺點

頁面跳轉後總是從頭開始；

一頁展示內容過多，使用者疲勞度增加；

頁面重點內容不突出。

場景

常用於並列元素的展示，包括目錄、分類、內容等。

 

 

2、網格佈局，在移動app上主要是講宮格佈局

 

優點

各入口展示清晰，方便快速查詢。

缺點

擴充套件性不如list列表；

標題不易過長。

場景

適合展示較多入口，且各模組相對獨立。

 

 

3、儀表佈局,也是一種資料展示結構佈局

 

優點

展示更加直觀。

缺點

資訊展示量少，過於單一。

場景

適合表現趨勢走向的展示。

 

4、卡片佈局

 

優點

每個卡片資訊承載量大，轉化率高；

每張卡片的操作互相獨立，互不干擾。

缺點

每個卡片頁面空間的消耗大，一屏可展示資訊少，使用者操作負荷高。

 

場景

適合以圖片為主單一內容瀏覽型的展示。

 

 

5、 gallery佈局

 

優點

單頁面內容整體性強，聚焦度高；

線性的瀏覽方式有順暢感、方向感。

缺點

可顯示的數量有限，需要使用者探索；

不具有指向性檢視頁面，必須按順序檢視頁面。

場景

適合數量少，聚焦度高，視覺衝擊力強的圖片展示。

 

 

6. 瀑布流佈局

 

優點

瀑布流圖片展現具有吸引力；

瀑布流裡的載入模式能獲得更多的內容，容易沉浸其中；

瀑布流錯落有致的設計巧妙利用視覺層級，同時視線任意流動緩解視覺疲勞。

缺點

頁面跳轉後需要從頭開始，載入量不固定，理論上是無限延展；

使用者返回查詢資訊困難很大。

場景

適用於實時內容頻繁更新的情況。

 

 

7. 手風琴佈局

 

優點

兩級結構可承載較多資訊，同時保持介面簡潔；

減少介面跳轉，提高操作效率高。

缺點

同時開啟多個手風琴選單，分類標題不易尋找，且容易將頁面佈局打亂。

場景

適用於兩級結構的內容，並且二級結構可以隱藏。

 

8. 多面板佈局

 

優點

減少介面跳轉；

分類一目瞭然。

缺點

兩欄設計使介面比較擁擠；

分類很多時，左側滑動區域過窄，且不利於單手操作。

場景

適合分類多並且內容需要同時展示。