如何設計頁面布局

回顧：

如何設計信息架構：如何成為一個合格的交互設計師（五）

如何設計任務流和頁面流：如何成為一個合格的交互設計師（六）

假如覺得有所受益，歡迎關注我的專欄《成為一個交互設計師》

完成了信息架構設計、任務流/頁面流設計後，便要開始設計頁面排版布局，在開始學習方法論之前，我們需要先了解一個概念——交互優先順序

交互優先順序

交互優先順序有以下7個需要考慮的維度：

①靈活度與複雜度

靈活度與複雜度成反比關係，產品功能越靈活，意味著複雜度越高，用戶的學習成本和操作成本相應增加。例：PS等專業處理軟體和美圖秀秀

②效率

效率分兩方面：

1）步驟（即點擊次數）

對於互聯網產品來講，都遵從漏斗模型，每一次點擊和跳轉，都意味著流失一部分用戶。那是不是意味著步驟越少越好？例：下圖的軟體中的所有功能都展示出來，可以一步到位，但好用嗎？

顯然，步驟的數量並不是絕對的衡量標準，核心是用戶的認知成本和決策成本。

2）距離與大小

費茨定律：移動到目標的時間與目標大小成反比，與目標距離成正比。

增大與主要任務相關的元素，減小相關性操作的元素距離，提高優先順序，可以幫助用戶認知和決策。

錨定作用：位於屏幕邊緣的元素，用戶更容易點擊到。

操作舒適區：

③頻率

任務有高頻和低頻之分，為高頻任務儘可能提供快的支持；低頻任務考慮需要隱藏和弱化，但要做到易學易記。例：iOS的控制中心，低頻，但用戶需要時可以隨時提供；iOS的設置，位置固定，幫助用戶記憶冗雜的選項：

④轉化率

交互優先順序提現在數據上，就是每一步驟的轉化率。做到高頻任務的每一步驟也是高轉化。

⑤引導使用

對於主推的功能，可以通過提高交互優先順序引導用戶使用。

⑥習慣

需要從用戶習慣和行業慣例這兩個維度看。

例：支付寶推出社交列表時，被用戶吐槽抄襲微信。但在當時這是最好的方案，微信已經培養了中國幾乎所有移動互聯網用戶的使用習慣，這種方案不一定是最好的，但是最合適的，極大地降低了用戶的學習成本。

當想要顛覆用戶習慣和行業習慣時，回答三個問題：

1）衡量不遵循用戶習慣的改變所帶來的好處是否能夠cover掉學習的成本。（包括改變的實際成本和心理成本）

2）衡量新老用戶的比例。違背用戶習慣但正確的改動造福了新用戶，影響了老用戶。

3）衡量產品在行業內的影響力。如office2007改RibbonUI，如微信在社交領域的地位。

4）衡量行業標準和慣例。如鍵盤，儘管不是最符合人體使用習慣的方案，但延續至今，已然成為一種絕對的標準，除非出現里程碑式的創新，不然顛覆的成本無法承擔。

⑦階段

交互優先順序具有階段性，短期和長期的重點不同。

例：淘寶起步時，重點在於獲取更多的賣家和消費者；而現在的重點在於完善生態。

設計主線與支線

每個頁面都承載著用戶目標、產品目標和商業目標的矛盾，需要設計師去權衡，做出最優的方案。通常，我們將用戶目標作為主線任務，產品目標和商業目標作為支線任務。

定義：大多數場景下，用戶和產品的目標很明確和單一，往往集中在一條主線上，為了用戶體驗，應該盡量減少支線和噪音。可現實是我們總會覺得有太多好東西希望用戶發現，太多好功能希望用戶使用（產品目標），還要考慮盈利（商業目標），於是會存在很多支線。

噪音：與主線任務無關的元素。噪音越多，用戶越不容易找到滿足需求的功能和內容。

核心問題：控制合適的信噪比。

難點在於：1. 主線需要篩選和過濾出來；2.克制提供更多選擇的誘惑。

目標：合理規劃用戶在產品中的線路，引導和幫助用戶在主線上完成任務，同時在某些場景下適當地提供支線，以完成產品目標和商業目標。

優秀案例：

1. Kindle和閱讀類應用。閱讀時只呈現內容，營造沉浸式的閱讀體驗，需要其他功能時點擊屏幕，喚起導航和工具面板。
2. 商場規劃路徑。用戶熟悉後可以直奔目標，每隔一段時間會重新調整，在用戶尋找目標的過程中來滿足商業目標，刺激消費。
3. 與主線場景相結合的廣告或推廣。使用圖片處理應用處理完圖片後，推薦圖片分享社區的產品，非常自然且符合場景，轉化率會更高。

方法論

梳理好交互優先順序的7個維度和頁面的主支線後，頁面排版布局的設計工作已經完成了一半。接下來，只需要按照既定的方法完成：

1. 確定頁面的主線與支線
2. 使用卡片分類法確定頁面信息元素的分類
3. 根據主線與支線，使用各類技巧(下文講解)對組塊進行排版布局
4. 頁面排版的設計驗證

頁面排版布局的技巧

• 利用視覺引導：根據大量的眼動研究，人的閱讀視線軌跡呈F型，重要的東西要放在左上角。

• 對角線法則

• 弱化或隱藏

• 刪除不必要的信息

設計驗證

交互設計階段，無法通過灰度測試、嚴格控制變數的線上A/B等正規的測試方法驗證原型。那麼是否必須等到上線後才能驗證？顯然不是。隨著項目的推進，走到視覺、開發等步驟，修改成本會隨之增大。能夠在交互設計階段提前暴露問題，節省試錯成本，對項目的成功意義巨大。

粗暴的用戶測試

1. 不拘泥於形勢的原型

2. 有針對性抓取同事或朋友進行測試

3. 可以任務走查，也可A/B測試

4. 獲取測試結果後快速優化

可以使用以下方式進行驗證：

• 紙上原型：如果覺得紙面原型難以直觀表達交互效果，可以使用POP - Prototyping on Paper 這款app，將紙面原型拍下來，放到應用中，可以選取特定區域添加手勢和鏈接。如此，設計師便不用費勁解釋頁面之間的邏輯關係了。

• 墨刀（MockingBot）：墨刀具有非常強大的控制項庫和鏈接功能，現已支持導入Sketch文件，非常便利。

• 甚至拿著沒有任何鏈接說明的紙上原型，拉到一個人就可以做用戶訪談，往往會有意外的收穫。

這裡，就紙面原型稍微展開聊聊。

紙面原型的目的不是為了交付，而是為了溝通、測試，儘快解決那些不確定的問題。

紙面原型可以看做是最終設計方案的雛形，最需要關注的是框架、流程、基本功能和內容，切不可過早陷入設計細節的糾結中去。在前面的專欄文章中，已經對需求、任務、信息架構、操作等都有了分析，紙面原型的目的就是把這些內容串聯起來並準確無誤地表達出來。

如果想表達出交互效果，可以用便簽貼和小卡片，可以當做提示氣泡、彈出層、模態窗口等。

回顧

今天我們講述了如何設計頁面排版布局：

1. 了解了交互優先順序的概念和7個維度（靈活度與複雜度，效率，頻率，轉化率，引導使用，階段，習慣）

2. 如何設計主支線

3. 設計頁面排版布局的方法論

4. 頁面排版布局的技巧

5. 如何進行原型的設計驗證，其中特別推崇運用紙面原型，儘早測試設計效果

假如覺得有所受益，歡迎關注我的專欄《成為一個交互設計師》

推薦閱讀：