編輯導讀：框架層位于用戶體驗第四層，包含界面設計、導航設計、信息設計三部分?？蚣軐有枰O計每個元素的位置、顏色、交互等信息，組合后一起向用戶傳達產品特色。本文作者以消息中心為例，對框架層設計展開分析，希望對你有幫助。

用戶在日常使用產品時可以進入消息中心查閱消息，一旦用戶長久未查閱或短時間內頻繁使用，便容易積攢大量未讀消息，無論消息列表預覽內容過多或過少都會影響用戶查閱。

1. 消息列表僅有發信人名稱卻無法預覽具體內容，用戶必須依次點開每條消息查看無法按輕重緩急順序處理，增加用戶消息清理時長且可能導致錯過重要消息時效。
2. 每條消息上擠滿用戶身份號碼聯系電話頭像簽名等次要信息又無明顯間隔，以至于重要信息都只能放在省略號里或跳轉查看，不僅增加信息獲取步數，且增加了字段辨認難度，使用戶閱讀變得吃力和提高了看錯信息的概率。

這兩種情況的出現，均是因為設計框架層時未將信息擺放在適合的位置，如果將門修在房頂，每次進出都得架著梯子，不僅費事而且危險。如上述兩例子都會讓消息中心變得難以使用，為了讓用戶使用舒適，須在設計階段做好規劃。

什么是框架層？

框架層位于用戶體驗第四層，包含界面設計、導航設計、信息設計三部分。建筑師設計一棟建筑時，通過將外形、門窗、內部裝潢等各個獨立元素組合一起，來表現整棟建筑所要傳達的情感。游樂場大多五彩斑斕，醫院則偏向潔凈，弄反了可能會讓客戶懷疑進錯建筑?？蚣軐右彩侨绱?，需要設計每個元素的位置、顏色、交互等信息，組合后一起向用戶傳達產品特色。

一、界面設計

界面設計是選擇合適的元素為用戶提供做成某些事的能力。常用的元素有按鈕、標記、輸入框等，具體可依場景而定。

日常生活中若遇到界面混亂的情況，例如相同元素大小不一，方向各異；每個元素各自獨立毫無關聯；顏色眾多無法看出重點等，會給人一種雜亂無章的感受。

假設某棟公寓一排房門寬窄有別，高低各異，一眼望去參差不齊，容易讓用戶產生這是家不專業建造商的聯想。

這恰恰與設計目的相悖，大多情況下希望向用戶傳達正面信息。那么該如何有效避免頁面混亂呢？可遵循以下三點：

1.1 突出重點

對比強烈、醒目的內容有助于用戶加深印象并減少其他信息干擾。生活中人們會使用劃線或圖形標注文章重點，甚者會用彩筆做記號，亦是為了下次翻閱時能一眼看出重點。

將消息主題加大加粗，用戶便可以一眼了解消息內容，不必花費時間讀完通篇才發現重點只在第一句。

1.2 界面簡潔

界面簡潔要求元素擺放有序且精簡。人們一次能夠把握和處理的信息數量在七加減二之間，過多元素同時堆放在視線中并不能增強用戶信息接收并發能力，只會徒增搜尋真正目標的耗時。

井然有序的界面利于用戶加深記憶，減少誤操作概率，也有助于突出重點內容。

當一個貨架上只擺放5、6個商品時人們很容易記住，但如果擺放成堆商品時用戶只會記住自己所渴望之物。

當消息尾部只有收藏按鈕時用戶可以快速找到該功能所在位置且不會錯按其他按鈕；如果位于 七八個按鈕中間時，每次多半得瞧一眼以免錯點成刪除。

1.3 方便易用

不設置復雜交互且符合大部分用戶使用習慣的擺放方式即算的上方便易用。

例如飛機復雜的操作面板讓大多數人望而卻步，而手機憑借為數不多的按鍵讓用戶迅速上手。

如果你的消息列表自上而下排列，則將全部已讀功能放在右下角是個不錯的注意。用戶瀏覽時視線會自上而下移動，看完最后條消息后視線依照慣性再往下一格即可點擊全部已讀。這樣設計的是基于在處理完所有重要消息后可以立刻清空面板的考慮。如果不希望用戶經常點全部已讀或經常因此遺漏信息，可將其置與閱讀軌跡相反方向，如右上方。

二、導航設計

導航設計既是向用戶提供去某處的能力，如返回上一頁，切換標簽頁，跳轉詳情頁等均為常見導航方式。

超市會將同類型商品堆放在一起，方便用戶尋找。

消息中心可能含系統公告、社交私信、業務通知，當然也可能要區分收藏、歷史消息，當有眾多類別消息混合在一起時，可使用標簽頁等形式進行聚合，幫助用戶快速查找定位。善加利用標簽歸類可以讓界面更規整。

而使用上下文導航可以避免內容過載?？梢詫⒄恼s短為一行標題甚至僅用一個“詳情”按鈕作為頁面入口即可，不必將所有消息全文展示。

三、 信息設計

信息設計依托于界面設計和導航設計幫助我們更清晰地向用戶傳達內容。比如界面上將標題、摘要等元素歸并以告知用戶這是一條完整的消息。

設計中有四個簡單實用的基本準則，運用得當便可完成大部分信息傳遞，分別為：

3.1 對比

對比用于突出不同組元素區別。例如交通指示牌上標識和底色差異明顯，正常行人一眼便看出交通規定。

產品上可將消息標題加大加黑加粗以突出與摘要的區別，用戶一眼即可看到重點內容。

3.2 重復

重復是將相同設計語言復制到類似元素上，即使在不同位置，不同頁面，但有著相同大小、顏色、粗細的元素很容易被歸類為一體。宛若穿著整齊校服的學生，一眼便知是校友。

3.3 對齊

將內容在界面上依照某條線對齊而列，可向用戶傳達出內容屬于同組元素的觀念。這條線可以是實線、虛線甚至透明的，只要能在視覺上明顯區分即可。線既能歸類相同內容，又能區分不同，有助于界面整潔有序。

比如路旁兩排樹木雖未相互連接，但視線會自動將其按順序相連，并規劃出一條彎曲道路。

3.4 親密性

親密性強調元素間距離，同組元素間距離更近。例如可適當縮小主題與摘要間距，增大不同條消息間距，或用橫線分割每條消息，將同組元素凝結一起。

當小朋友與大人手牽手時大多數情況下可以判斷他們是親屬關系，如果與每個人都距離較遠便難以判斷和誰具有親屬關系了。

四、總結

消息中心為用戶聚集大量消息，整潔易讀十分重要。通過界面設計篩選元素，使消息中心保持簡潔；使用導航設計提供內容查閱的通道，方便用戶查找；利用信息設計將前兩者結合，向用戶傳達每處設計用意，成為為用戶提供能做什么、能去哪兒的說明書。

作者：貓無；公眾號：黑暗料理店

本文由 @貓無 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議