界面佈局，是通過引導用戶在頁面上的注意力來完成對含義、順序和交互發生點的傳達。佈局和導航是產品的骨架，是頁面的重要構成模式之一，是作為後續展開頁面設計的基礎，可以為產品奠定交互和視覺風格。在實際的設計中，要考慮信息優先級和各種佈局方式的契合度，採用最合適的佈局，以提高產品的易用性和交互體驗。
移動端不同於PC端，最大的區別是屏幕尺寸的限制，相同的內容顯示效率要低很多。作為交互設計師需要對信息進行優先級劃分，並且合理佈局，提升信息的傳遞效率。
常見的8種移動端界面佈局方式包括8種：
1、列表式佈局
2、宮格式佈局
3、儀表佈局
4、卡片佈局
5、瀑布流佈局
6、Gallery佈局
7、手風琴佈局
8、多面板佈局
關於這些佈局的使用規則，主要有4點：
1、牢記業務目標
2、分析信息優先級
3、分析用戶核心行為
4、 考慮瀏覽模式
下面來就來詳細的談談各種佈局及他們的特徵和使用場景：
1、列表式佈局
特徵：
1、縱向長度沒有限制，上下滑動可查看無限內容；
2、視覺上整齊美觀，用戶接受度很高；
3、可以展示全部內容和次級內容的標題。
使用場景：
常用於並列元素的展示，包括目錄、分類、內容等。
2、宮格式佈局
宮格式導航被廣泛應用於各平臺系統的中心頁面，或作為一系列工具入口的聚合；在不同的文章中可能被稱作：跳板（圖標卡片式）、磁貼式。
特徵：
1、各入口展示清晰，方便快速查找。
2、擴展性好，便於組合不同的信息類型（運營位、廣告位、內容塊、設置等）；
使用場景：適合展示較多入口，且各模塊相對獨立。
3、儀表佈局
特徵：展示更加直觀，但信息展示量少，過於單一。
使用場景: 適合表現趨勢走向的展示。
4、卡片佈局
特徵：
1、每個卡片信息承載量大，轉化率高；
2、每張卡片的操作互相獨立，互不干擾。
3、每個卡片頁面空間的消耗大，一屏可展示信息少，用戶操作負荷高。
使用場景：適合以圖片為主單一內容瀏覽型的展示。
5、瀑布流佈局
特徵：
1、瀑布流圖片展現具有吸引力；
2、瀑布流裡的加載模式能獲得更多的內容，容易沉浸其中；
3、瀑布流錯落有致的設計巧妙利用視覺層級，同時視線任意流動緩解視覺疲勞。
但頁面跳轉後需要從頭開始，加載量不固定，理論上是無限延展；且用戶返回查找信息困難很大。
使用場景：適用於實時內容頻繁更新的情況。
6、Gallery佈局
特徵：
1、單頁面內容整體性強，聚焦度高；
2、線性的瀏覽方式有順暢感、方向感。
但可顯示的數量有限，需要用戶探索；且不具有指向性查看頁面，必須按順序查看頁面。
使用場景：適合數量少，聚焦度高，視覺衝擊力強的圖片展示。
7、手風琴佈局
特徵：
1、兩級結構可承載較多信息，同時保持界面簡潔；
2、減少界面跳轉，提高操作效率高。
但如果同時打開多個手風琴菜單，分類標題不易尋找，且容易將頁面佈局打亂。
使用場景：適用於兩級結構的內容，並且二級結構可以隱藏。
8、多面板佈局
特徵：
1、減少界面跳轉；
2、分類一目瞭然。
但兩欄設計使界面比較擁擠；且分類很多時，左側滑動區域過窄，且不利於單手操作。
使用場景：適合分類多並且內容需要同時展示。
以上這些基本佈局方式，在實際的設計中，要考慮信息優先級和各種佈局方式的契合度，採用最合適的佈局，以提高產品的易用性和交互體驗。
關於這些佈局的使用規則，總的來說，主要有4點：
1. 牢記業務目標
每一個產品都有商業目標。要實現這些目標，創意團隊需要確定哪些UI元素更重要，並根據角色優先考慮。比如，電子商務網站上的所有元素都執行各種不同的任務。項目圖片是第一層級，因為它必須讓客戶去認知它。標題是解釋產品是什麼，其次是按鈕鼓勵人們去購買。根據產品的業務目標和營銷目標，設計團隊可以有效的優化視覺元素突出產品，讓人印象深刻。
2. 分析信息優先級
一級信息吸引用戶：假設用戶只會在這個頁面停留3-5秒，最能夠吸引用戶繼續瀏覽的是頁面的核心賣點，是一級信息，它必須少而精，在設計上要重點展示；
二級信息幫助理解：有了一級信息的吸引，用戶進一步瞭解內容而可能停留3-5分鐘，這時展示二級信息即提煉的精華內容，幫助用戶在儘量短時間內理解信息；
三級信息詳細瞭解：前兩類信息基本上能幫助用戶獲取足夠的信息，用戶如果繼續停留更長的時間去詳細瞭解，這類信息量會更多，在設計上視覺層級會靠後，或通過交互方式展示、提供入口跳轉。
3. 分析用戶核心行為
不同類型用戶會在不同階段產生不同的行為，我們需要判斷這些行為最終導向是什麼？有了這些分析，交互產出文檔中會給予大模塊的信息優先級和用戶行為優先級，哪些需要重要展示，哪些信息可以弱化。交互稿可以通過黑白灰來展示頁面的信息層級。
4. 考慮瀏覽模式
人們會大致的瀏覽頁面以確定是否對產品感興趣。
Z形暗示線路
一般出現在不太複雜的頁面上，或者不需要向下滾動的頁面上。人們首先從左上角開始掃描頁面頭部，搜索核心內容，然後沿著對角線向下到對角，在最底部從左到右結束。
使用暗示線路把頁面上的元素串在一起，曲線或直線都可以，這樣視線就可以順著這條線索往下閱讀。
行動召喚
把你希望用戶最先看到的文字放在行動號召上面，如果文字不重要，可以把行動號召放在空白的地方。
好了，本期關於移動端常見8種界面佈局的分析到這裡就結束了，希望對大家有所幫助。如果大家同樣對這些方面有些興趣或者看了後有些什麼想法，歡迎一起討論。
閱讀更多 北京設計小白 的文章
