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

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

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

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

什么是框架層？

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

一、界面設(shè)計

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

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

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

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

1.1 突出重點

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

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

1.2 界面簡潔

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

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

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

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

1.3 方便易用

不設(shè)置復(fù)雜交互且符合大部分用戶使用習(xí)慣的擺放方式即算的上方便易用。

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

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

二、導(dǎo)航設(shè)計

導(dǎo)航設(shè)計既是向用戶提供去某處的能力，如返回上一頁，切換標(biāo)簽頁，跳轉(zhuǎn)詳情頁等均為常見導(dǎo)航方式。

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

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

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

三、 信息設(shè)計

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

設(shè)計中有四個簡單實用的基本準(zhǔn)則，運用得當(dāng)便可完成大部分信息傳遞，分別為：

3.1 對比

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

產(chǎn)品上可將消息標(biāo)題加大加黑加粗以突出與摘要的區(qū)別，用戶一眼即可看到重點內(nèi)容。

3.2 重復(fù)

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

3.3 對齊

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

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

3.4 親密性

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

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

四、總結(jié)

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

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

本文由 @貓無 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議