回顧：
如何設計信息架構：如何成為一個合格的交互設計師（五）
如何設計任務流和頁面流：如何成為一個合格的交互設計師（六）
假如覺得有所受益，歡迎關注我的專欄《成為一個交互設計師》
完成了信息架構設計、任務流/頁面流設計后，便要開始設計頁面排版布局，在開始學習方法論之前，我們需要先了解一個概念——交互優先級
交互優先級
交互優先級有以下7個需要考慮的維度：
①靈活度與復雜度
靈活度與復雜度成反比關系，產品功能越靈活，意味著復雜度越高，用戶的學習成本和操作成本相應增加。例：PS等專業處理軟件和美圖秀秀
PS和美圖秀秀
②效率
效率分兩方面：
1）步驟（即點擊次數）
對于互聯網產品來講，都遵從漏斗模型，每一次點擊和跳轉，都意味著流失一部分用戶。那是不是意味著步驟越少越好？例：下圖的軟件中的所有功能都展示出來，可以一步到位，但好用嗎？
顯然，步驟的數量并不是絕對的衡量標準，核心是用戶的認知成本和決策成本。
2）距離與大小
費茨定律：移動到目標的時間與目標大小成反比，與目標距離成正比。
增大與主要任務相關的元素，減小相關性操作的元素距離，提高優先級，可以幫助用戶認知和決策。
錨定作用：位于屏幕邊緣的元素，用戶更容易點擊到。
錨定作用提高了邊緣元素的點擊率
操作舒適區：
右手拇指的操作舒適區
③頻率
任務有高頻和低頻之分，為高頻任務盡可能提供快的支持；低頻任務考慮需要隱藏和弱化，但要做到易學易記。例：iOS的控制中心，低頻，但用戶需要時可以隨時提供；iOS的設置，位置固定，幫助用戶記憶冗雜的選項：
iOS的控制中心 和 設置
④轉化率
交互優先級提現在數據上，就是每一步驟的轉化率。做到高頻任務的每一步驟也是高轉化。
⑤引導使用
對于主推的功能，可以通過提高交互優先級引導用戶使用。
最近大火的知識競答，西瓜視頻將主推的功能用駝式導航提高優先級
⑥習慣
需要從用戶習慣和行業慣例這兩個維度看。
例：支付寶推出社交列表時，被用戶吐槽抄襲微信。但在當時這是最好的方案，微信已經培養了中國幾乎所有移動互聯網用戶的使用習慣，這種方案不一定是最好的，但是最合適的，極大地降低了用戶的學習成本。
當想要顛覆用戶習慣和行業習慣時，回答三個問題：
1）衡量不遵循用戶習慣的改變所帶來的好處是否能夠cover掉學習的成本。（包括改變的實際成本和心理成本）
2）衡量新老用戶的比例。違背用戶習慣但正確的改動造福了新用戶，影響了老用戶。
3）衡量產品在行業內的影響力。如改網頁布局有哪幾種，如微信在社交領域的地位。
4）衡量行業標準和慣例。如鍵盤，盡管不是最符合人體使用習慣的方案，但延續至今，已然成為一種絕對的標準，除非出現里程碑式的創新，不然顛覆的成本無法承擔。
⑦階段
交互優先級具有階段性，短期和長期的重點不同。
例：淘寶起步時，重點在于獲取更多的賣家和消費者；而現在的重點在于完善生態。
設計主線與支線
每個頁面都承載著用戶目標、產品目標和商業目標的矛盾，需要設計師去權衡，做出最優的方案。通常，我們將用戶目標作為主線任務，產品目標和商業目標作為支線任務。
定義：大多數場景下，用戶和產品的目標很明確和單一，往往集中在一條主線上，為了用戶體驗，應該盡量減少支線和噪音。可現實是我們總會覺得有太多好東西希望用戶發現，太多好功能希望用戶使用（產品目標），還要考慮盈利（商業目標），于是會存在很多支線。
噪音：與主線任務無關的元素。噪音越多，用戶越不容易找到滿足需求的功能和內容。
核心問題：控制合適的信噪比。
難點在于：1. 主線需要篩選和過濾出來；2.克制提供更多選擇的誘惑。
目標：合理規劃用戶在產品中的線路，引導和幫助用戶在主線上完成任務，同時在某些場景下適當地提供支線，以完成產品目標和商業目標。
優秀案例：
和閱讀類應用。閱讀時只呈現內容，營造沉浸式的閱讀體驗，需要其他功能時點擊屏幕，喚起導航和工具面板。商場規劃路徑。用戶熟悉后可以直奔目標，每隔一段時間會重新調整，在用戶尋找目標的過程中來滿足商業目標，刺激消費。與主線場景相結合的廣告或推廣。使用圖片處理應用處理完圖片后，推薦圖片分享社區的產品，非常自然且符合場景，轉化率會更高。
方法論
梳理好交互優先級的7個維度和頁面的主支線后，頁面排版布局的設計工作已經完成了一半。接下來，只需要按照既定的方法完成：
確定頁面的主線與支線使用卡片分類法確定頁面信息元素的分類根據主線與支線網頁布局有哪幾種，使用各類技巧(下文講解)對組塊進行排版布局頁面排版的設計驗證
頁面排版布局的技巧
眼動實驗結果
iOS人機交互指南
猴子迅速吸引視線，同時眼睛看向右下角引導用戶瀏覽，讓用戶完成右下角注冊的目標
雞肋又必須存在的信息隱藏起來
刪除二次確認密碼的選項，提供顯示明文密碼的功能，將用戶操作轉移到產品功能上
設計驗證
交互設計階段，無法通過灰度測試、嚴格控制變量的線上A/B等正規的測試方法驗證原型。那么是否必須等到上線后才能驗證？顯然不是。隨著項目的推進，走到視覺、開發等步驟，修改成本會隨之增大。能夠在交互設計階段提前暴露問題，節省試錯成本，對項目的成功意義巨大。
粗暴的用戶測試
1. 不拘泥于形勢的原型
2. 有針對性抓取同事或朋友進行測試
3. 可以任務走查，也可A/B測試
4. 獲取測試結果后快速優化
可以使用以下方式進行驗證：
原型工具-POP
原型工具-快現
原型工具 - 墨刀
這里，就紙面原型稍微展開聊聊。
紙面原型的目的不是為了交付，而是為了溝通、測試，盡快解決那些不確定的問題。
紙面原型可以看做是最終設計方案的雛形，最需要關注的是框架、流程、基本功能和內容，切不可過早陷入設計細節的糾結中去。在前面的專欄文章中，已經對需求、任務、信息架構、操作等都有了分析，紙面原型的目的就是把這些內容串聯起來并準確無誤地表達出來。
如果想表達出交互效果，可以用便簽貼和小卡片，可以當做提示氣泡、彈出層、模態窗口等。
有利于發散、創新、溝通的紙面原型
回顧
今天我們講述了如何設計頁面排版布局：
1. 了解了交互優先級的概念和7個維度（靈活度與復雜度，效率，頻率，轉化率，引導使用，階段，習慣）
2. 如何設計主支線
3. 設計頁面排版布局的方法論
4. 頁面排版布局的技巧
5. 如何進行原型的設計驗證，其中特別推崇運用紙面原型，盡早測試設計效果
假如覺得有所受益，歡迎關注我的專欄《成為一個交互設計師》