Content：

?step 1：確定頁面的任務目的
?step 2：信息元素的組織分類
?step 3：對組塊進行排版布局
?step 4：權衡平臺規(guī)范和用戶的使用習慣
?step 5：頁面排版的設計驗證

step 1：確定頁面的任務目的

“明確當前頁面用戶的任務和目的，以及產品的需求?！?/p>

• 判斷一個頁面的優(yōu)劣
  有用：最重要的衡量標準，滿足用戶和產品的需求；
  易用：架構清晰、流程清晰、不需要思考
  好用：友好和充滿情感化

• 案例 Case：網易嚴選詳情頁
  用戶需求：
  ?1、查看心意的產品詳情：價格、規(guī)格，然后進行購買；
  ?2、查看用戶評價，幫助最初判斷；
  ?3、先收藏起來，稍后購買；
  產品需求：
  ?1、用戶購買轉化率：進入頁面就能夠進行購買；
  ?2、將商品信息分享給其他人；

step 2：信息元素的組織分類

卡片分類：讓用戶自己對功能進行分類；

• 卡片分類的應用場景：
  ?信息架構、導航設計、頁面設計

• 案例 Case：網易嚴選詳情頁
  用戶需求——>功能：
  ?1、商品詳情（包含各種詳細的信息）
  ?2、商品簡介（名字、圖片）
  ?3、商品價格、運費、銷量、規(guī)格（尺寸、顏色等）、數量
  ?4、用戶評價
  ?5、購買、收藏
  產品需求——>功能：
  ?1、分享；
  ?2、喜歡；
  ?3、購買；
  使用卡片分類法：
  

  商品詳情頁

備注：如果有成熟、已經形成習慣的分類，直接用已經有的；

step 3：對組塊進行排版布局

設計原則（非全部）

一、清晰的視覺引導

1、用戶固有的閱讀習慣
用戶通常有從左往右閱讀的習慣

視覺熱點圖

2、對角線法則
用戶的視覺中心往往是從頁面的左上角開始，終止于右下角；

對角線法則

二、顯示

清晰的頁面邏輯關系，突出主要任務流程

格式塔關于邏輯關系的應用：點（距離）、線（就是線）、面（塊）

點線面區(qū)分邏輯關系

三、弱化

一些功能優(yōu)先級較低，不需要用戶第一時間能夠區(qū)分出來，減少認知壓力

1、視覺區(qū)分
button樣式、顏色區(qū)分...

微信登錄頁

2、增加操作步驟
除了視覺上的區(qū)分外，也可以通過增加操作步驟，來有意增加么某些任務難度

易信 VS 微信

四、刪除

刪除不必要的功能；

• 必要的功能:
  1）關系到用戶日常使用體驗功能的功能
  2）能消除他們挫折感的功能
  其他的不必要的功能都能有針對性的刪除

  
  
  刪除二次驗證密碼功能

五、隱藏

有些信息并非主要任務流程中必須存在的，但是卻又不能刪除的“雞肋”。

除了可以隱藏一些“雞肋”功能外，一些高階功能，普通用戶比較少會用到，只有高級用戶才會用到

六、影響因素：操作頻率

右手為例

七、距離和面積（- -）

費次定律：用戶使用字典設備到達一個目標的時間同以下兩個因素有關：距離（D）和目標大?。⊿）
?1、距離越長，所用時間越長
?2、目標越大，所用時間約短

八、情感化設計（好用）

情感設計例子

九、動效

動效不在于酷炫，而是在體驗的一部分

案例 Case：網易嚴選詳情頁

主要任務：

購買到心儀的產品

設計主線：

吧雜亂無章的功能點根據用戶的期望及目標以正確的次序組織起來

次要任務：

瀏覽、選擇、對比、收藏、加入購物車、充值等等

設計支線：

次要行為流是否能對用戶完成主要行為流產生必要的幫助

設計策略

1、幫助用戶快速獲取商品信息
2、較為高效易用的購買流程
3、最有能夠提供友好的用戶體驗

線框圖

尺寸：360*640，較通用

step 4：權衡平臺規(guī)范和用戶使用習慣

• 問題：
  1、實際設計中，針對不同平臺，我們需要設計幾套方案？
  2、如果我們人力有限，能否只設計一套方案？這一套方案該怎么提供？
  3、如何以最低成本來誰家兩套（安卓 & iOS）方案？
  4、除了兩套方案外，有沒有更好的解決辦法？

step 5、頁面排版的設計驗證

你的設計方案能夠同時滿足用戶和產品需求？
——實踐是檢驗真理的唯一標準

• 關于借鑒與設計的三個階段
  1、為了借鑒而借鑒
  2、為了避免借鑒，而差異化設計
  3、為了用戶習慣而設計

• 交互設計師工作中最常用到快速驗證方法：
  ×標準用戶測試
  × 線上用戶反饋
  × 數據表現
  √ “交互”專家評估
  √ “粗暴”的用戶測試

• 專家評估是一種專家評審法，由幾個評價者根據通用的可用性原則和經驗來發(fā)現系統(tǒng)潛在的可用性問題
  ?1、邀請可用性評估專家
  ?2、每一個評估人員進行1—2小時的使用系統(tǒng)
  ?3、以可用性啟發(fā)為基礎，讓評估人員對用戶界面進行系統(tǒng)性的檢查，找出存在的可用性問題
  ?4、之后提供一份獨立的報告，在報告中應包括可用性問題的描述，問題的嚴重性以及改進的建議
  ?5、構建一個隊系統(tǒng)的評價并嘗試找出解決方案

• “交互”專家評估
  1、邀請交互專家
  2、系統(tǒng)評估
  3、需求交互&可用性問題
  4、整理結果
  5、修改及排期

• “粗暴”的用戶測試
  1、不拘泥與形式的原型
  2、有針對性抓取同時進行測試
  3、可以任務走查，也可是AB測試
  4、獲取測試結果后快速優(yōu)化

End.