小伙伴們畫好視覺稿后，是不是頁面的交互/視覺規約經常丟三落四，常常在設計宣講時被開發測試提問？自己表面鎮定，內心慌的一筆：這個...我沒想到，那個...我沒想到...

要想在宣講時能夠從容應對各種問題，就需要在設計稿完成后，把設計規約提前想好，那么設計規約要從哪些方面寫起呢？往往B端產品的頁面更加復雜，要補充的交互規約更多，小Zi就從實際工作中總結一些，供大家參考～

先來看個列子：

頁面

交互規約如下

一個頁面，交互和標注規則很長很長，很多同學反饋說不知道交互規約從何寫起，看了上面的列子，大概從以下幾個方面來書寫規約：

大方面我習慣于分成【整體】和【具體內容】來寫。

整體

一、頁面自適應規則

首先從整體來考慮，首先要考慮頁面是如何布局的，是自適應？還是定寬？常用的網頁布局有：靜態布局、百分比布局、響應式布局；頁面的整體布局方式，也決定了頁面具體內容規約的撰寫；

參考文章《3種常用網頁布局與設計注意點》：https://www.zcool.com.cn/article/ZMTIwMjYxNg==.html

二、滾動條/滾動區域

1.頁面整體滾動區域

滾動區域是從哪里開始？是頁面級滾動嗎？

2.滾動條的樣式

需要給出滾動條的視覺和交互

舉例：

三、初始狀態/空狀態

頁面“加載”是做設計時常常忽視掉的，因為大家肯定是重點考慮有內容的情況，并且頁面數據是否需要加載、加載時長等等需要根據前后端接口返回情況確定。

1.補充初始狀態的頁面；初始頁面是骨架圖還是保持不變，是否添加頁面引導？等都是需要考慮的；

2.補充頁面數據為空的樣式；

舉例：

四、加載樣式

頁面級加載的樣式是什么樣的？也需要補充到設計稿中；

舉例：

五、其他特殊情況的處理

比如“無權限查看”“記錄已被刪除”“已被拉黑”等等情況；

舉例：

具體內容

當補充完頁面整體上的規則之后，就可以著手補充頁面具體內容的規約了。具體內容的規則其實和整體規則從大方向是差不多的，也是那幾個方面，只是更細節：

一、考慮是否自適應，自適應的規則

如果頁面整體是定寬的，那么內容也是定寬的，就不需要考慮內容隨著頁面拉伸或縮小帶來的變化；如果頁面整體是自適應的，那么具體模塊可以根據功能需要來設置哪些區域自適應，自適應的規則是什么；

舉例：

二、考慮內容過多時的樣式

B端產品設計場景更復雜，內容更加不可控，再加上電腦屏幕大小適配，頁面寬度可自由拉伸，種種因素都要我們更加仔細的考慮頁面的各種極限值情況，如何寫全面設計規約是難點。相信在設計評審會上開發和測試最常問到的一個問題也是：這里內容過多怎么展示？雖然我們在設計的時候是按照80%的場景去考慮，但是剩下20%的極限場景也需要我們給出設計規則。

內容過多，具體劃分還可以分成以下幾類：文字過多、選項過多、彈窗內容過多、按鈕/標簽過多、表格內容過多、功能過多等等情況，每種情況下有哪些解決方式呢，可以參考文章《B端交互設計之內容太多怎么辦》：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html

舉例：

三、考慮極限情況下的提示/反饋

用戶反饋，頁面中肯定不少，我們畫頁面時也會畫出大部分提示，但是缺少提示/反饋依然是設計師常忽略的內容，主要是提示的場景非常非常的多，而且有很多細分情況：

1.數據處理慢的提示

問題舉例:操作的數據過多時，后臺數據處理慢是否有提示？

2.操作后的提示

成功、失敗、進行中等，還有部分成功，部分失敗的情況

問題舉例:啟用失敗時如何提示？

3.無權限、禁用等的提示

問題舉例:項目列表-階段沒有權限時，需要添加tips提示；

4.缺少二次確認提示

問題舉例:新建頁面點擊取消是否需要二次確認提示?

四、考慮校驗的時機和樣式

1.校驗的時機：是失焦后還是提交按鈕時，還是實時的

問題舉例:表單的必填校驗，是失焦實時校驗，還是在提交時校驗？

 “實時校驗”是在用戶瀏覽表單時實時檢查用戶輸入的有效性，而不是在用戶提交表單時一次性檢查全部輸入：

驗證消息顯示在靠近輸入的區域，并一起顯示；

2.校驗的樣式：是在下方出提示，還是全局提示，還是什么的；

舉例：

五、考慮是否缺少滾動條的樣式

不僅要考慮頁面整體的滾動區域，有些模塊也是單獨需要滾動的；

滾動區域是哪里？包不包括表頭？標題？有沒有內容需要鎖定？滾動條的樣式？這些問題都要給出規則。

問題舉例:信息內容過多時，容器內展示不下怎么辦？--答：展示不下時容器內出現滾動條，滾動區域是整個內容區；

六、數字方面的問題

1.數字輸入超長的顯示

問題舉例：極限數字如何顯示，比如篩選結果超過三位數：999+

2.數值是0時，是否有特殊的規則

問題舉例：數值為0時，是否顯示此模塊？

3.是否有輸入限制，比如，限制正整數、小數，小數精確到幾位等等；

七、點擊熱區的范圍

我們一般默認熱區就是觸發控件的區域，但是有時可能視覺上圖標需要小一點的，但是熱區需要更大一點，就要特殊標注出來?？傊?，方便用戶操作為上。

舉例

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

什么是體驗可視化地圖

它們是一種體驗洞察和形成參考材料的工具，能夠幫助業務人員探討決策使用，它們都是結合真實用戶反饋形成的。另外這些地圖本身并不能直接提供答案，而是用于促進對話或作為決策導向，它能跨部門讓人們聚在一起討論業務目標，指出潛在的機會或達成一致的價值觀與目標，使解決方案更可行。即促進共同參與、共同思考、共同目標、共同發力。像心智模型、空間地圖、服務藍圖、用戶體驗地圖、客戶旅程地圖都屬于體驗可視化地圖，也有稱為對齊圖。

用戶畫像&用戶體驗地圖介紹

用戶畫像 本身可以反映出服務對象的特征，便于改進業務服務，幫助研究用戶需求或產品痛點，因此在一些體驗可視化地圖中會配合使用。并且可以幫助設計師指導產品功能、導航、交互、甚至視覺設計方面的決策，是一種聯系用戶訴求與設計方向的有效工具，總之它能讓你知道產品是給什么人用的，他們有什么特征或訴求。

用戶體驗地圖 以個體在某個產品或領域中的體驗經歷為主，關注產品是如何契合個體用戶體驗的，通過用戶個體的行為觸點與視角來洞察商業機會。是一種比較視覺化、有助于引發共鳴和聚焦用戶體驗的工具，比較貼合情感化設計的理念，適用于洞察用戶視角下與產品系統交互的可視化地圖。

所以在作品集里經?？匆娺@些體驗地圖就能夠理解了，一方面是作為戰略層的研究報告說明，用于佐證設計或決策的依據。另一方面是為了其他讀者達成共識，便于共情設計目標。當然豐富和美化作品集也是一方面，更多的則是希望不要濫用起來，形同虛設，成了一個沒有深入作用的裝飾工具。

兩者工具的差異與特性

用戶畫像的因素

用戶體驗地圖的因素

如何打通用戶畫像與用戶體驗地圖

方便直觀易懂的去解釋用戶畫像與用戶體驗地圖之間的關系作用，這里我通過流程、相互作用來解釋一下；

從流程上看

體驗地圖是基于用戶研究開展的，所以要考慮研究誰，研究什么問題，在什么場景或領域進行，因此就需要借助用戶畫像去界定范圍，以及形成用戶材料，再去考慮用何種體驗可視化地圖展現，而用戶畫像也將一直貫穿始終提供可參考的用戶信息；

相互作用上看

用戶體驗地圖一般都是聚焦于既定范圍的目標群體，一份完整的用戶體驗地圖應該包含用戶畫像信息，應交代清楚目標用戶的背景、場景、需求、痛點等關聯信息，方便讀者了解，以便于代入用戶視角深入到用戶體驗地圖的討論中。

而用戶畫像盡管提供了由外而內的視角或部分設計見解，但并不能滿足項目多樣化視角的需求，且不足以形成一系列的設計見解洞察，所以用戶畫像始終需要與心智、情景、體驗地圖或研究報告等結合使用。也就是說用戶畫像需要與用戶體驗地圖配合輸出，兩者誰也替代不了誰。

體驗可視化工具的一般流程簡述

一個正式且有效的體驗可視化地圖一般必須經過四個階段才能完成，最后再得出結論達成一致；

一、項目啟動；通過內部識別或收集用戶反饋找到需求點，計劃研究目的，制定目標。

二、開始調研；通過研究手段向用戶收集優化資料或數據，為創造體驗可視化地圖提供可靠的數據。

三、闡述分析；選擇闡述方式，通過體驗可視化地圖將研究結果與核心價值進行呈現，為后面探討做準備。

四、達成一致；使相關業務人員共同參與研討，結合地圖報告進一步的思考，指出潛在機會或達成一致的觀點。

五、展望未來；根據研討結果設計解決方案，提出價值主張，進一步跟進和實施起來。

真實應用中不用急著畫圖準備填充，先明確目標再從用戶研究或資料收集開始。如果沒辦法找到目標用戶進行訪談或測試研究，那么至少找到一線的人員進行訪談或測試，不要依賴自己的見解或認知套用，這些地圖的精髓在于打破內部視角建立起一場具有包容性的對話，不同部門的參與者多多益善，所以這些地圖只是研討中心的參考物。

如何正確Get用戶原型與畫像

構建和使用畫像時大致可以分為兩類；

1. 根據用戶研究建立正式的用戶畫像

2. 建立人物角色原型

具體取決于用途與條件情況等，制作任何一組用戶畫像都非依托想象力，都是基于事實或用戶研究的。并且不只是簡單的人口數據或個人信息描述，如果一組不能達到共情效果的用戶畫像也就失去了核心價值《如何有效快速共情-點擊查看》，就像一份簡歷，沒能體現出個人能力與專業素養一樣。

人物角色原型

制作一個正式的用戶畫像是一個漫長的過程，還需要開展用戶研究，如果你沒有現成的調研對象或調研條件，你就可以采用人物角色原型，該方法是由《Lean UX》的作者Jeff Gothelf提出的，他描述到；

“人物角色原型是一個正式人物角色的變式，其最大不同在于人物角色原型不是用戶研究的結果，而是更多的源于頭腦風暴的結果。公司成員會從公司理念出發，基于自身領域的專業性和直覺，來明確誰是公司產品或服務的目標用戶，用戶的動機和需求是什么。”引：Jeff Gothelf."Using Proto-Personas for Executive Alignment,"UX Magazine(May 2012)

這類角色原型不用花費大量時間去做用戶調研，它們是基于已知的特征情況或預期的目標用戶，適合臨時性使用，便于開展前期工作或達成一致的見解，但是人物角色原型并不能代替基于可靠數據的用戶畫像。

構建人物角色原型的方法

就是跨部門集體參與貢獻觀點與數據來構建。前線相關業務人員是必備的，人數控制在5-8個人就行，要有主持人把控節奏和參與度，盡可能收集到不同業務視角下的問題反饋，討論開始前可以提出一兩個角色原型來激發討論，然后充實起來，盡管最后可能形成了多個角色甚至有些看起來有沖突，不過沒關系，重點是讓這些人物角色清晰明確下來，不一致的地方可以進一步的討論。

人物角色原型的構成內容

一般人物角色原型在一頁的篇幅內就可以顯示完，主要五個板塊。值得注意的是，一定不要脫離了產品主題的范圍；

一、角色基本資料：角色頭像、姓名、頭銜、單位或一些可用的輔助資料。

二、人口統計特征：一般包含性別、年齡、職業、收入等與主題相關的人口統計指標（類似簡歷中的個人信息）。

三、心理統計特征：與主題相關聯的因素，主要指不可輕易觀察的心理活動、態度、信仰、動機、觀念的個人特征。

四、產品相關行為：指與產品體驗有主要關系的行為或是行動，包括興趣愛好、個人習慣、專業活動等。

五、需求與痛點：用戶有哪些與主題相關的需求或痛點，你的設計可以滿足用戶那些需求和痛點緩解。

用戶畫像

用戶畫像本身可以幫助發現問題或進行決策，同時也反應出了對用戶或用戶視角的共同理解，并且可以在日常研發工作中持續使用，例如一些材料歸檔、分享、更新、輔助其他可視化地圖等，以發揮出更多的余熱。

如何打造可用的用戶畫像

定性還是定量類型

根據產品需求選擇定性還是定量分析，亦或者結合，一般定性適用于用戶需求深挖或業務創新等情況，講究的是“為什么”，而定量更像是通過數據驗證“有多少”，常用于數據分析、趨勢分析、數據驗證、做精細化運營和用戶精準投放。  

定量需要足夠的數據支撐，如果項目需要畫像且企業不穩定、用戶量級不夠不能滿足數據需求，則可以借助市場數據報告、白皮書、第三方數據服務平臺、調研服務公司等來參考，這些數據也都是可靠的。大數據殺熟就是數據畫像的反面引用，通過畫像對用戶進行分層，再挑出用戶中的軟柿子或老實人欺負。

識別用戶群體優先級

對目標群體要有認知，要根據特征劃分層級或類型，例如典型用戶、潛力用戶、專家用戶。這些用戶的界定范圍需要業務相關人員去制定，類似一份簡歷我們可以根據能力對標級別，一般我們可以通過4個比較有影響力的指標進行劃分，至于權重我們可以采用常見的四象限或卡諾模型；

在制作用戶畫像前可以合理的根據人物角色原型的特征過濾目標用戶群體，但不要過分依賴，你只是需要找到符合的目標群體，而不是根據原型找到理想的那個人。

最終調研對象的關系表呈現；

定性類畫像不用邀請很多用戶參與研究，一般在5人左右，只有研究資源充沛時才會考慮邀請更多研究對象，一方面是研究發現5人左右就能反映出絕大多數問題了，另一方面是出于時間精力和預算情況考慮。

定性類用戶畫像要做什么

一、確認研究對象的優先級，根據需求背景或目標確認重點跟次要群體來挖掘不同用戶視角下的問題；

二、通過線上招募(APP內或相關平臺發布有償邀請，亦或者尋求第三方服務公司幫助)、客戶群(相關的用戶答疑群邀請)、論壇社區(發布招募帖子等)、專家咨詢、產品線上推送等方式，尋找目標群體并建立聯系；

三、選擇線上訪談、可用性測試、問卷調查、焦點小組等有效的用戶洞察方式，并設計好相關問題或材料準備與用戶進行深入研究(主要圍繞已知問題或新的設計方案驗證，再就是新的業務需求洞察為主)；

四、整理用戶資料，圍繞研究主題建立用戶畫像信息，完成主要信息模塊，可以根據業務需要，將用戶技術特征、職業特征、環境因素進行補充(需要考慮是否與業務有一定關聯或影響，否則無意義)；

五、完善用戶畫像的細節，將價值信息同步到畫像中，并對有效信息的細節進行補充，增加可信度還原真實性；

用戶畫像并沒有一個模版標準，具體還是要看業務需求，而且網上的模版挺多的，自己甄別吧。另外在用戶洞察的過程中，我們可以結合可用性測試、繪制故事板（這兩種研究方法有興趣可以查閱資料，一兩句講不清楚，有機會展開講）等方式一同進行，而不只是把目的停留在建立用戶畫像上，這樣反而獲取的有效信息受限了。

定量類用戶畫像要做什么

一、數據采集

通過有效途徑將用戶產生的數據集中，不論是產品數據庫、數據埋點、第三方數據統計或是定量調研的結果，這些數據都是重要構成部分，同時也決定了信息的范圍，比如你拿不到用戶的出行數據，那么就根本沒辦法構建相關標簽或指標。

二、數據定義

對數據進行清洗整理，識別出用戶行為數據、用戶偏好、生命周期等數據，并進行標簽化分類整理，這些標簽或指標可以體現出某些維度的趨勢或用戶行為預測。不過值得注意的是，在構建這些標簽或指標時盡量結合業務流程或生命周期來梳理，考慮畫像建成目的與業務場景同時，也要思考標簽的權重問題，標簽不等于越多越好。 

三、構建畫像

根據產品階段或業務需要，把相關業務標簽結合用戶群特征信息整合成用戶畫像，一般的業務標簽類型有增長策略、用戶偏好、用戶價值、營銷觸點等，這類畫像可以包攬多個維度信息，還能對周期數據可視化顯現趨勢變化，但是在用戶痛點或需求上，可能不會很直觀，需要進一步的結合用戶場景帶入思考。

通?；ヂ摼W產品前期，沒有構建標簽或數字畫像的經驗，可以考慮讓團隊引入相關第三方數據畫像服務，它們可以更便捷的接入到你的產品中并幫助你打標簽做統計；

以下截圖來自第三方大數據畫像工具(神策)

*第三方數據分析輔助產品也不少，這里只做交流使用

如何讓畫像角色更生動

畫像中的角色應該更加生動，能夠讓我們感受到真實的存在，只有這樣才能產生共鳴，賦予畫像價值，為此我們可以通過控制以下六點來做的更好。

一、不要特殊化

特殊能加深印象，但是特殊化并不代表產品的典型群體，同時在實際應用時容易擾亂共情或分散注意力，例如用戶群體是普通青年，就不要描述成一個帥氣的學霸，也不要為用戶添加一些奇怪的癖好，這些不相干的信息并不能讓畫像更加生動；

二、合理應用頭像

通常作品集中的頭像都比較美觀個性，這沒事兒。但實際畫像應用中，頭像也是很重要的一部分，會馬上映入眼簾，這些頭像不要使知名人群的，且貼合真實用戶標簽，不用暴露性感或是丑陋異樣的，也不要使用插畫、卡通、3D形象，不要有奇怪或不自然的行為動作。

三、充實細節

以一款線上教育產品作為背景，舉例原本我們的用戶信息寫到：

那么即可根據產品屬性結合實際情況進行豐富補充，例如調整為以下描述；

雖然沒有過大的變化，但是已經將貼合教育產品的地域信息、課程階段、收入情況進行了完善刻畫；

接著再例如，虞溪女士的需求寫到；

簡單來看確實是透出了線上教育產品的需求，但是需求并不深刻，也沒有刻畫出虞溪女士的核心訴求，為此我們可以結合創造情景故事的方法，融合角色、場景、行動、事件、評價、情節這些元素去深度刻畫描述，例如以下調整；

結合創造情景故事的辦法是為了刻畫出更多細節，不僅可以讓瀏覽者更好的沉浸在角色視角，也能在完善的過程中深挖出更多有價值的思考；

四、創造情景故事

情景故事不會很枯燥會更抓人心，能夠傳達更多信息的同時，將產品信息與真實情景交融在一起，方便團隊記憶理解以及更好的促進討論。創造情景故事的元素通常有：角色、場景、行動、事件、評價、情節。看起來就像是在描述“我與xx產品的一天”。

1. 角色：故事的主人翁或是參與者，不可缺少的重要部分；

2. 場景：故事發生的時間地點物理環境，例如早上八點半我在擁擠的地鐵上搶到了座椅，并打開了手機；

1. 行動：能夠觀察到且與主題有影響的行為動作，例如我被這個問題難住了，解鎖手機并打開了這個APP；

2. 事件：發生了什么事兒，角色間做出了什么反應產生了何種結果；

1. 評論：角色怎樣評估并作出決策，有了怎樣的目標，并如何進行下一步。其中任務目標是驅動的核心；

2. 情節：一系列行為與事件的演變過程再到結果，從問題的發生到角色推進目標到結局。例如經典的戲劇結構：

*創造情景故事是要花費時間精力的，如果時間充裕你可以慢慢將相關描述進行轉換，時間有限責挑取重點轉化；

五、不要孤立使用畫像

在前文就有描述到畫像需要配合其他體驗可視化地圖一起才能更好的發揮效用，畫像通常始終保持著個體視角，而且沒有辦法傳達一系列完整的體驗報告，所以為了更好的滿足項目多樣化視角的需求，盡量不要孤立的使用畫像。

六、定期更新

產品發展中，會經歷不同的階段與市場變化，用戶群體自然會變。如果說產品在研發新的功能去開拓年輕化的市場，那同樣意味著目標群體趨向年輕群體，這種時候就需要變更或新增用戶畫像，就不要使用舊的畫像起步了。

基本上做好以上細節，你的用戶畫像就大功告成了，這就像是結合STAR法則優化項目經歷一樣。最簡單的標準就是業務人員能夠去理解這些角色并代入角色視角思考，可以有效共情或決策。

如何用好用戶體驗地圖

首先我們回顧一下用戶體驗地圖的關鍵詞：既定的用戶群體、應用場景或領域，用戶以某個持續性目標驅動與你的產品或服務發生交互，并且涉及多個階段來實現目標，地圖會通過由外而內的視角洞察產品服務是否契合用戶的體驗。

由此可見在與用戶研討時，我們的問題或測試任務應該覆蓋相關階段或重要的任務流程，以此來獲取體驗地圖的相關重點信息。另外很多產品比較龐大，服務頗多，因此控制好體驗的階段范圍也很重要，不僅會拉長工期也會使得焦點分散。

用戶體驗地圖的構成簡述

用戶體驗地圖主要包含三個層面的內容，一、用戶目標階段，二、用戶與產品服務交互，三、痛點機會洞察；

其實礙于不同產品和服務類型，體驗地圖的構成元素也有差異，不過在漫長的應用發展中也逐步趨于穩定。

常見的構成元素：

一、用戶需求或目標：
在體驗地圖中，用戶以需求或目標驅動與產品發生交互，需求或目標既定了要做什么，應該需要什么服務。

二、行為階段：

行為階段是界定場景的重要部分，以目標任務階段的生命周期或者關鍵節點展開，不一定所有階段托盤而出，階段太多則不聚焦，細分太多則費時間也不一定快速見效。

三、采取的行為觸點或步驟：

用戶使用產品或服務展開的行為或接觸的設備、泛功能應用等。

四、想法與問題：

在體驗服務的過程中出現的問題或是一些真實的想法感受。

五、情緒波動與精神狀態：

情緒和精神狀態通常是反映服務好壞或用戶滿意度的重要因素，但同時也難以觀察或量化，通常會根據用戶對問題的描述來共情情緒，亦或者向用戶提供情緒表情標簽。

六、痛點或機會揭示：

結合上層階段行為與用戶的反饋信息向下垂直洞察產品服務的痛點或機會。

七、設備或其他圖例補充：

例如跨端跨設備或包含特殊標簽信息的補充說明。

*示例模版

用戶情緒板怎么用才對

表情包早已成為網友互動和情緒表達的重要部分，但是在實際的可用性測試或訪談中，用戶會相對拘束一些，也不會把各種各樣的表情掛在臉上，所以才說用戶情緒很難研究和洞察，更別說量化執行了。有些人可以進行表情管理，情緒更是難以琢磨；

那么體驗地圖中的情緒板怎么搞定呢？

就用戶體驗地圖中的情緒塊來講，通常一定不只是表情icon來做表達，這樣費解還缺乏實際價值，所以一定會加上相關描述來揭示用戶情緒與觀點。心智模型中用戶情緒感受便是靠的文本描述來傳達。

早期Pieter·Desmet在其《Designing Emotions》一書中提出了如何衡量情緒的研發方法，他開發了一款叫做產品情緒度量儀的工具，其原理就是為用戶提供各種表情表達的卡通形象，用戶在體驗過程中根據自己情緒選出最匹配的那個卡通形象來示意自己情緒。這個工具經過不斷迭代并豐富聲音后已授權到：https://www.premotool.com/，我們可以在度量用戶情緒或其他體驗可視化地圖中配合使用。 

另外在使用表情標簽應用時，并不大推薦常見的微信表情、QQ表情等，這些表情在長時間的使用中，用戶都會形成一些偏好，這會影響使用決策

在服務體驗的過程中，很多時候情緒變化并非是單一線型上起伏變，例如：

我在觀看電影高潮的部分突然網絡異常，那么我的情緒應該是多樣化的，一邊是代入高潮部分的激動，另一方面是網絡帶來的失落感，同時還有等待網絡恢復的焦急。

為此我們通常有兩種方法來傳遞情緒變化；

1、將喜、怒、哀、樂、悲、恐、驚或需要的情緒標簽化，每種情緒用一個顏色表示，然后使用同軸的趨勢圖結合用戶行為階段來表示；

2、即使一次展示多種情緒，也難免有積極情緒與消極情緒同時出現的情況，這種時候可以圍繞一條分界線劃分兩類情緒區間，使用情緒曲線結合關鍵因素描述來顯示更加全面而復雜的情緒心理，對應每個關鍵情緒節點可以使用不同表情圖標細化輔助，使得情緒起伏的信息更充實有價值；

怎樣完善用戶體驗地圖

1、建立正確的項目目標是第一步，用戶體驗地圖的優勢與作用都有在前面講過(如果忘了可以在“兩者工具的差異與特性”中開始回顧)，使用用戶體驗地圖是有目的性地，它不是優化體驗的萬金油，通常都是收集用戶反饋知道某一些階段或環節存在問題，而建立優化目標開展的工作；

2、鎖定存在問題的階段，建立用戶問卷、焦點小組或用戶測試進行聚焦研究，嘗試收集用戶的意見或優化方案；

3、通過白板或線上協作工具建立簡易的用戶體驗地圖框架，并將研究用戶的畫像信息與碎片信息填入地圖。白板共創的辦法其實就是根據用戶體驗地圖的框架，結合用戶視角將自己的觀點寫到便簽貼到對應的區域，避免你一句我一句難以記載和整理；

4、關注每個階段的過渡，通常問題很容易出現在這些地方，例如付費前到付費后階段，如何進入后者階段就成了關鍵點，另外沒啥優化空間或體驗良好的階段可以折疊起來留出更多空間關注核心；

5、用戶體驗地圖的畫龍點睛之處在于跨部門協作完成，而不是閉門造車，邀請一兩個其他部門的人說明要求和完善地圖并不是什么難事，只有這樣最后的結果才能達成戰略一致，而不是自己繪制完后要求其他人被動接受結果；

檢驗用戶體驗地圖的標準

一、首先看你是否與用戶建立聯系，用戶體驗地圖的個體對象是用戶不是你自己，盡可能的獲取真實的用戶的信息。

二、一個產品運作是需要多個部門協作的，所以至少要有三個不同部門的人員參與進來。

三、協作完成用戶體驗地圖和達成共識后，你會驚奇的發現問題如何解決，各個部門該怎么配合實現都清晰明朗了。

前一陣子跟UXren社區主理人寶珠老哥討論過，就如截圖所示，更重要的是將企業各部門協同在一起，達成一致的戰略目標，共同參與探討出解決方向為業務賦能，這才是體驗地圖的精髓所在。

什么是觸點模版工具

用戶體驗地圖通常包含了一系列階段，而每一個階段都會由多個觸點編排成一段微型體驗，而觸點模板工具將會很好的為你建立和打開一片微型的體驗模型，這種模型是由羅伯特·羅斯曼(j·Robert·Rossman)[美]與馬修·迪尤爾登(Mathew D·Duerden)[美]在《最佳體驗》中提出的一種體驗洞察工具，它可以很好的結合體驗地圖去進一步的深挖某段流程或階段里需要優化的體驗，它們之間的關系就像一條路線圖與一份詳細的指引說明。當你完成某個觸點模版時，你會對該觸點上的體驗設計有清晰的認識，并且會形成一份書面報告與執行團隊共享和交流，觸點模板可以很好的解釋體驗是如何設計的，并且將相關執行團隊的角色聯系在一起，這不是噱頭，你可以根據后文指引進行嘗試。

體驗類型的框架

體驗是復雜的，在用戶觸點模版工具中，體驗被劃分為平淡的、專心的、難忘的、有意義、革新性五種類型，并且它們具有連續性，是通過關鍵特征與關鍵屬性定義出來的，它們結合了心理學理論基礎，目的是方便更好的理解體驗，并在設計實踐中起到指引作用促進交流，因此我們在設計時也應該對用戶體驗結果有意向性的去設計，框架如圖；

*關于參與感的兩種系統思維是兩種不同的思維狀態，系統1更像是慣性思維，憑借認知或經驗更加快速和自動化的思考，而系統2就會開始更主動的更深入的進行思考，參與階段越高思維越深思。

而三個階段分別是；

一、接受：個體意識到和接受體驗過程中正在發生的事情。

二、思考->處理->計劃：個體開始積極的思考體驗，并對正在進行中的事物做出處理與反應，同時可能開始計劃各種應對方案。

三、行動：深入的參與到體驗中并引入新的觸點和元素來維持互動，從而共同創造體驗，例如《魷魚游戲》上映后，影片中的“扣糖餅”又帶火了糖餅。

當新的事物被第三階段引入后，又會重新開始接受并循環，不過這并不代表所有的體驗都能夠完整經歷這三個階段。

觸點模板框架

觸點是用戶進行交互的重要部分，其周期可長可短，會產生不同感受，而一系列的心理感受會促成最終階段或完整的體驗。觸點模版由11個部分組成，它們互相作用指導和揭示體驗設計的方向與細節，并把設計結果引向預期的體驗方向。

抬頭信息

• 編號：對應到體驗地圖的階段編號或是觸點編號，隨著觸點設計逐步完善，對應的位置可能會發生轉移。

• 標題：對應該觸點模版主題的標題或是任務觸點的名字。

• 體驗類型：觸點的體驗類型或整體的體驗目標，從平淡的到革新性的五個體驗類型。

• 期望的反應：我們把期望的反應視為觸點預期結果的北極星指標，它可以是多個。我們通過用戶反應逐步提煉出預期的結果供予用戶體驗，例如期望的反應是笑容，那么我就可以提煉出“講個笑話、開黑游戲”等可以促成反應的體驗結果，同時期待的反應應該盡可能的傳遞用戶價值。

核心組成部分

• 期望的結果：根據期望的反應，我們要提供給用戶哪些體驗來實現。同時期望的結果應該跟類型相匹配。一般我們可以根據 “1. 產生積極情緒、2. 吸引注意力、3. 幫助發展和加強關系、4. 從更宏大的視角給人來帶意義、5. 提升能力、6. 孤立自由選擇” 這些類型內容作為起點，并根據體驗項目的情況細化，例如“心情低落想要刷刷手機產生積極情緒”Change“在App上刷會兒短視頻，看點有趣搞笑的段子來緩解下低落的情緒”。

• 體驗場景元素：觸點模板工具沒有特定的行業或業務模式，因此這些元素根據需要完善即可。而實際的元素應用中也會有不同的權重，注意重點元素的設計應用。

• 互動設計：可以是人與人互動、人機交互或更為復雜的互動，就是有意向性的將元素進行編排與用戶產生互動獲取必要的信息或傳遞。

• 貢獻者：整個體驗階段中，可見的幕前服務人員與后臺的服務員，他們是組成完整體驗的重要部分，例如餐飲店的服務員與傳菜員就是可見的幕前服務貢獻者，而廚師們就是幕后的貢獻者。

• 共同創造：共同創造和可供性是促進用戶參與的兩個重要的方法，并且參與度有高有低。好的體驗更多是與用戶共同創造的，建立合適的觸點與用戶共同創造體驗是重要的！以微信的“拍一拍”來看就是個很好的例子，拍一拍功能本身是加強了微信聊天的可供性，給用戶提供了更多的互動可能，同時用戶可以自己編輯被拍以后的文本，加強了體驗的趣味性，這便是共同創造的過程?？晒┬詾橛脩籼峁└嗷芋w驗的可能，而共同創造為用戶提供DIY的空間。

• 優化：對觸點進一步的優化，加深體驗感受。一般分成了兩大類型，一類是技術優化、一類是藝術優化。例如讓一個App加載短視頻更快更流暢，這就是技術型優化，如果為一個服務器未響應的404界面配上緩解焦慮的插圖，這便是藝術型優化。

• 過渡：觸點與觸點之間的過渡可能波動、異常、緩慢、復雜等，如何引導用戶正常的過渡到下一個觸點也是重要的一部分，它可以是自動化的隱式過渡也可以是引導性的顯式過渡，就像是安全通道的指示燈一樣將用戶從一個地點帶往另一個地點。

*觸點模版（可直接下載原圖進行打印使用）

如何構建一個觸點模版

通過一段音頻聊天室互動體驗之旅來揭示觸點模版用法與效果，音頻聊天室大家應該都熟悉了，這里就不聚焦用戶畫像與用戶體驗地圖了，觸點發生在用戶第一次進入歌廳音頻房間，那么應該怎么設計體驗來為用戶留下好印象呢？

觸點是發生在注冊后的第二個階段，即首頁房間列表(編號A02)，完成注冊階段后見到的第一個界面。標題則暫定為“一次非凡的音頻互動之旅”，我們希望新用戶在選擇好一個房間進入后能夠有一次愉悅難忘的體驗經歷，而相應的期待反應則是“有人帶我玩真棒！這個聲音我好喜歡，下次還來找Ta們”。體驗類型則希望是從平淡的體驗類型升華到難忘的。

其中體驗場景除了設備自身與軟件環境，更多真實的環境因素碰撞我們無法預測和控制，因此僅鎖定軟件自身的場景元素?；釉O計則是關鍵，軟件本身更多是工具支持，我們需要利用好運營資源跟用戶產生互動來促成體驗結果，這里我們會根據技術可行性優先考慮能為用戶提供的體驗結果，再到互動設計部分。其次就是過渡部分，預期的過渡觸點實際上會有多個方向，我們優先以充值消費作為一個觸點(轉化)、私信關注為另一個觸點(形成互動聯系方式)，完善后的觸點模版如圖；

在該觸點模版中，主要揭示了如何為用戶打造理想的體驗之旅，不僅涉及到運營方法也包含了軟件的重點優化部分，它很好的展示了如何通過角色之間在軟件中的互動來促成體驗與商業價值，當你把這份資料在團隊里分享后，完全可以清晰的對體驗設想進行解釋，以促進團隊內的深入討論與細節推進。至于相關功能的細節推敲同樣可以采用觸點模版繼續深入。

接著A02觸點模版中提到的標簽體系優化，我們再一次的結合觸點模版進行標簽的體驗設計，編號設定為“A03”，這是一個泛觸點，它涉及到用戶注冊進入時、房間互動、系統消息、消費與充值、裝扮標簽的著落頁，但歸根還是在應用內。標題為“讓標簽為用戶賦能意想不到的體驗”，在這段泛觸點中我們期望圍繞標簽為用戶打造難忘的體驗，讓標簽產生更多的價值與業務轉換，經過初步的體驗設計后，新的觸點模版如下；

在這個觸點模版上我們對標簽的作用價值進行了定義，并對功能及業務流程上進行了設想，已經初步的形成了標簽體驗的設計，接下來只要將裝扮標簽的著陸頁與房間內的應用進行完善設計，在輔以條件判斷與消息通知打通閉環就算是完成主要工作了，再此后的內容你是繼續用觸點模版還是設計交互原型都是可以的，至少目標是明確的。相信寫到這里，觸點模版的應用與功效你已經一目了然了。

觸點模版小結

觸點模版的板塊跟信息維度較多，但是考慮到觸點或項目的實際情況，模板內的信息填充不用完整。并且它的確可以很好的將體驗設計的思路整理出來并形成材料分享，對于多個觸點只需要根據體驗地圖上的順序打上編號后，即可將多個觸點模版的關系連接起來，你可以將打印填充后的模版依次排列或張貼在白板上的體驗地圖上。

觸點模版就像是一份交互自檢表，它從多個維度去考慮和解釋了觸點體驗的設計，盡管沒有勾畫出詳細的設計細節，但是體驗設計思路與執行團隊的任務已經很明確了。

另外完成觸點模版時，并非是要按照模版里的板塊順序作業，比如有時候我們是根據體驗結果考慮運用哪些體驗場景，如果有固定的場景，那么你就可以根據場景情況開始考慮，一般更傾向于先設定體驗結果進行倒推。再就前面啰嗦過的，我們根據項目情況完善需要的模塊即可。

服務藍圖介紹

更完整的服務流程可視化工具，可以結合用戶體驗地圖對服務流程進行優化或調整，相比傳統的業務流程圖，它在用戶角色關系與前后端分離上有明顯優勢。是一種服務可視化的工具，利于讓產品保持精益（識別價值點、優化流程）

多角色的引入，雖然使得藍圖更加復雜，但是能夠反映出更多角色的交互與流程關系。

服務藍圖的因素：

服務藍圖的構建元素：

結語

客觀來講，這些體驗地圖時常保持爭議，特別是逐步大范圍在業內曝光后，形式化、假把式、濫用等標簽也愈發明顯吶，這些體驗洞察工具并不總是能夠在項目中發揮預期作用，它們也需要區分使用場景跟項目需求情況，如果你沒有嘗試過，可以積極引用，當你熟悉應用后你會發現收獲更多的是一種體驗設計的思維，一旦需求或痛點擺到面前時不再像一只無頭蒼蠅。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

寫在前面

今年的“雙十一”，朋友圈異常安靜，沒有了以前電商活動的氛圍，沒有漂亮的數據，沒有曬圖，有人說是用戶消費疲軟了？數據不會騙人，今年”雙十一”一天的GMV還是比去年高了將近500億，而且一大波尾款人在11月1日就已經結束。再加上直播電商，用戶購買渠道變多了。李佳琦直播帶貨一晚就超100億的GMV，說明用戶的消費意愿和消費力還是很強的。算一下，50個李佳琦直播一晚上就能抵上“雙十一”一整天的GMV，有點厲害。中國偉大復興的道路還在繼續，隨著人民生活水平的提高，文化素養提高，互聯網普及，消費力只會增不會減，只是戰場在變化。

前些日子發了PP微助手的優化作品，本篇將結合改版思路和最近對互聯網設計行業的思考進行一些分享，希望對大家有一定的幫助，歡迎大家來指正吐槽~

點擊可以查看   PP微助手改版優化

流量變“留量”

互聯網產品最重要的就是流量，沒有流量，就算產品設計的再好，早晚也會運營不下去。縱觀這些年移動互聯網的發展，市場已經被分割的差不多了，各個行業都有龍頭企業（社交：微信、購物：京東淘寶、出行：滴滴哈羅、外賣：餓了么美團、旅游：攜程等等），各大互聯網公司業務也趨于穩定，紅利期已經過去，流量市場已經變成了“留量”市場。就像淘寶這種大流量的產品，也在吃流量老本。

回歸到設計，在互聯網公司做設計，一直在強調需要有產品思維、用戶思維，然而在“留量”的時代，更需要我們具有運營思維，同行業的業務趨同、需求趨同，可挖掘的需求少之又少，可以打開同一行業的各類app一看，就知道產品形態大同小異。所以只能在“留量”里下功夫，既要減少存量用戶的流失，還要在這基礎上讓存量用戶創造更大的價值。必然，我們在做設計改版的時候就需要結合一些運營知識。

曝光

“曝光”一詞相信大家都聽過，在拍照時，“曝光”時間越長，照片細節就越豐富，當然過度“曝光”，也會讓照片失真。在運營一個互聯網產品時，也需要用到“曝光”，這里的“曝光”是指產品內容的“曝光”。

用戶在進入某款產品的時候，都是帶有一定目的性，通常情況都會經歷三步操作，從看見內容，到與產品互動，最后得到想要的結果。

這里的“看見”，就要說到產品承載信息的曝光，合理的信息曝光才能更精準快速的觸達用戶。同時，運營同學最關心的數據和流量，也是需要安排合理的信息曝光才能有有效的數據和流量。在手機這么一小塊屏幕想把所有內容都曝光出來，是不太現實的，就算能，也不合理。把過多的信息一下子全部曝光給用戶，效果反而會很差。通常做法就是對頁面進行樓層的分割，流量進行合理的分發。大流量的產品，每個樓層都需要單獨部門去運營的，這樣就會出現業務主次和優先級，不然各部門就會為了爭奪"屏幕地盤"，無限撕逼。

作為設計師，就需要和運營部門做好以下確認：

1、樓層怎么分割，哪些樓層是產品部門控制，哪些樓層是運營部門控制，每個樓層顯示哪些內容，設計師需要根據每個樓層的重要性，去定義屏占比

2、哪些模塊需要首屏曝光，哪些是需要第二屏曝光，依此類推，這個至關重要，設計師就要考慮各類機型適配問題，比如iPhoneX一屏能顯示下的內容，在其他手機未必能顯出來，這樣會直接影響曝光，導致數據不好（等著背鍋吧～），嚴格來講要根據實際用戶使用機型占比去定義首屏顯示的內容。

3、每個模塊內容的信息層級，明確信息優先級才能結果為導向去做交互布局和視覺呈現，這時候就是你發揮的時候，對比、親密關系、留白等等，都可以上了。

這里結合PP微助手的一些改版優化（非全套），分享一些改版思路。

PP微助手改版思路解析

項目背景：PP微助手是取代電視遙控器一部分功能開發的一款小程序，核心需求有幾點

1、賬號統一，PPTV時代的用戶，大多都是使用的PPTV的賬號，為了方便管理蘇寧易購賬號體系，會引流把PPTV尚未升級的賬戶統一升級合并至蘇寧易購賬號。

2、投屏功能，看影片終端還是以電視機為主，所以只做投屏，不做在線播放功能

3、智能語音，結合蘇寧小biu智能語音系統，可以和電視機語音互動，實現交互功能

4、會員業務，移動端開通會員比電視端更方便，同時可以用一些運營手段促進用戶開通會員

5、推送活動，電視機打開頻次不如移動端，推送活動給用戶，移動端可以實時看到

電商行業通常會把用戶分成“大明”、“笨笨”、“小閑”三大類用戶，在視頻類產品，絕大多數用戶都是“小閑”用戶，來平臺都是找樂子打發時間的。

思路一：架構改變（產品思維）：

PP微助手本來就是輔助電視機的，用戶覺得用遙控器操作麻煩才會選擇用小程序操作。在設計的時候，把用戶當成是一個并不想動腦子并且很懶的傻子，產品設計越簡單越好，否則用戶干嘛要用小程序，遙控器挺好的，遙控器的大多交互都已經習慣，也沒啥學習成本。

從用戶角度分析，進入小程序無非就是找片源、看片以及看片過程中的一些基礎控制操作（播放、暫停、快進等等），所以簡化了產品整體框架，從原來底部5個tab（首頁、片庫、遙控、搜索、我的），改為3個tab（首頁、遙控、我的）。產品呈現給用戶的樣貌更加簡單直觀，也相應的培養了用戶心智，讓用戶對PP微助手這款小程序有個基本定位。

思路二：樓層分割（運營思維）：

首頁改版前，按照iPhoneX的尺寸，首頁第一屏也就曝光了3個分類，而且下滑到底總共也就幾個分類，片源的曝光度不高，banner呈現也相對普通，就是那種正常電商類頭部banner。同時交互成本也高，要點擊“更多”才能看該分類影片的全部列表，要知道多一步操作就會多損失一部分用戶轉化。

改版后，針對第一樓層推薦影片采用電影宣傳時的大海報樣式，視覺焦點更強烈，同時曝光也更強烈一些，你去電影院的時候，看到的電影宣傳海報，大多都是這類豎版的，用戶已經有一定的心智模型，所以在這里采用豎版更為好一些。這些推薦影片在這里也作為“hook”，后面會講。當然像電商類產品，首頁需要考慮嚴謹的屏占比，這類尺寸肯定不合適。

第二樓層是影片的分類，采用文字tab左右滑動的方式，這種分類方式雖然沒啥設計感，也普普通通，但是在一個分類眾多的產品里，這種處理方法相當不錯。減小了樓層的沖突，也提高了內容的曝光。像騰訊視頻、愛奇藝、優酷，分類tab都是吸頂固定的，很直觀的傳達給用戶影片信息。下拉的時候，這里采用feed流，用戶在交互習慣上，連續操作時，對同一種交互會有慣性和依賴，上滑時查看更多影片，能滿足用戶的預期，也不會因為調整新的交互（上述的點擊跳轉查看更多）方式讓用戶反感。在視覺形式上，采用了橫版的樣式，是為了和第一樓層形成對比，也是為了節省屏幕空間，能曝光更多的內容。二樓的影片內容也可以分布一些“hook”

搜索也是一種用戶找片源的方式，后面再講，這里要考慮到流量分發的情況。

思路三：引導用戶（運維思維）

按照福格模型B=MAT，完成行為的三要素：動機、能力和觸發器。

用戶進了影片詳情，說明已經有動機了，這時候需要抓住機會，按照產品需求可以完成兩個行為目的，一個是讓PPTV賬號升級成蘇寧易購賬號，二是轉化成會員用戶。

這里要看一下進入詳情的數據，是“hook”進來的用戶多還是非“hook”進來的用戶多。如果是“hook”進來的多，說明用戶主觀意愿不是很強，這部分用戶可能會流失，如果是非“hook”或者搜索進來的更多，說明平臺用戶主觀意愿更強，有較高的粘性，更容易促進會員的轉化。

對平臺來說，希望用戶進來完成兩條路徑：

1、未登錄的用戶，點“推送”和“開通會員”按鈕，進入下一步登錄或者升級賬號流程。當然這一步會流失用戶，部分用戶會反感登錄這種操作。

2、已登錄的用戶，可以快速推送影片，完成自己的看片目的，如果是會員影片，這里就需要用戶先開通會員，當然只是引導，還會有一部分用戶不想開通會員，選擇離開。

防止用戶過多的流失，就需要平臺一定的干涉，加強登錄或者開通會員的意愿，可以從以下幾點入手：

1、沉浸式體驗，進入詳情，頭部區域自動播放影片花絮或者預告，快速讓抓取用戶眼球，增加下一步操作的意愿。

2、醒目的豆瓣評分，“hook”影片選擇一些評分高的，用戶針對豆瓣評分已經有一定的認知，評分優質的影片，用戶更有意愿觀看，更容易促進下一步動作，提高會員的轉化率。

3、各類標簽，比如：首播、獨家、會員免費、會員半價、4K高清等等，能清晰定位影片，捕捉各類用戶看片心智。

4、會員相關信息展示，未登錄的提示“登錄領券、限時活動等”，非會員提示“會員權益、開通會員的利益點等”刺激用戶。

思路四：優惠券吸引用戶（運維思維）

改版前優惠券和體驗券在不同入口，流量分散了，券的目的就是要讓用戶去使用，需要縮短路徑，更直觀的展示給用戶，能讓用戶快速做決策。如果券種類多的話，還需要區分各種券樣式，需要讓用戶快速定位想使用的券。

其中已使用和已過期的券對用戶來說就是已經沒用的券，并不需要再用單獨的tab分類，并且弱化處理。因為PP微助手會員券相對比較少，不像電商一樣，會送很多商品券，所以用最簡單的形式展示給用戶就行。

值得注意的一點，不是說已過期的券就沒用了，如果運營把控好節奏，發券有一定規律，用戶看到過期的券會有一定的挫敗感，就會經常來關注券?！皬U券再利用”也能增加用戶的粘性。針對快過期的券，必要時候可以做二次提醒，給用戶造成緊張感，會激發用券欲望。

說服用戶下決定，一般從以下三個點去考慮：時間緊迫性、暗示稀缺性、后果恐嚇性

流量分發和流量承接

產品的流量來源有很多，除了自身用戶進入產品的流量，還有線下廣告、線上廣告、分享鏈接等等各種來源。目前主要的流量分發方式包括：搜索分發、算法分發、社交分發、人工分發、付費分發。PP微助手主要應用算法分發、搜索分發、人工分發。

先講一下“hook”，在電商里是“鉤子商品”，這里我把“hook”當做是“鉤子影片”，運營精準推薦的一些“hook”，會取到不錯的轉化效果。

用戶在產品內的行為路徑是不可控的，一大波流量進入首頁，每個用戶都有自己的目的，所以需要對用戶進行分流。一部分用戶去了搜索，這類用戶目的很明顯，知道自己想看的影片名稱，這部分就是搜索分發的流量；一部分用戶被“hook”勾走了，"hook"激發了用戶的看片動機，這部分就是人工分發的流量，需要運營去干預；一部分用戶在不停的瀏覽，在瀏覽過程中找自己的影片，產品會分析用戶行為，顯示千人千面的首頁，這部分就是算法分發的流量。

有流量分發，那必然就有流量承接，流量承接都是相對流量分發的，在電商產品里，站內的流量承接一般都在商詳，以及對應的后置鏈路（訂單確認、結算等等），從各渠道進來的流量，最終匯總在商詳。在商詳，會突出各種利益點和產品自身優勢去刺激用戶下單。至于利益點，活動時候的各種優惠信息就是典型例子，產品自身優勢，比如：淘寶的先享后付、京東有京東物流次日達等等。在PP微助手這里流量承接就是影片詳情以及后置鏈路會員套餐頁，具體可以看上面的“思路三”的分析，怎么去承接流量，怎么去促進轉化。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

一、設計和藝術的區別

藝術：

藝術是感性、天馬行空、富有創造力的，表達創造者的個人意識。

設計：

設計是理性、精密的，為了解決用戶的問題

（你看得懂嗎？你有什么見解？為什么大家見解不一樣？這就是藝術的魅力）

二、用戶體驗及用戶體驗設計

什么是用戶體驗？——————使用一個產品時的主觀感受

用戶體驗設計？———————為了提升用戶體驗而做的設計

1.用戶體驗設計

首先要解決用戶的某個實際問題--讓問題變得容易解決--最后給用戶留下深刻的印象。（視覺只是其中一部分，并不是設計的全部）

Eg：充電插座的苦惱--錯開位置

尿液四濺--廁所里放一只蒼蠅，用戶會去瞄準上廁所（設計美觀且有趣味性）

2、用戶體驗設計的特征

(1)嚴謹、理性、創意

先關注要解決的問題----其次思考有趣的創意幫助用戶得到更好的體驗。

(2)提供特定問題的解決方案

設計目標是什么，為什么人解決問題，如何解決

Eg:鋼鐵俠u盤死死按住關機鍵；樓梯是為殘疾人設計的嗎，我懵了？

(3)不讓用戶思考

用戶感到挫敗，會放棄。你的設計不要用戶一頭霧水。

(我到底怎么走?)

(4)趣味橫生

尿液四濺貼提示語效果不好，放一只蒼蠅效果很好？

因為：抓住了用戶的心理和行為習慣，同時充滿趣味，吸引用戶

Eg：path推出的商店功能，在里面買自己喜歡的貼紙，搖晃手機貼紙也搖晃，感覺很好玩吧～帶來好的體驗感

3.用戶體驗設計師遇到問題如何思考

三、各種設計師的區分

1.怎么和別人解釋用戶體驗設計師

A：“你用一個網站的時候，有沒有出現：某個功能找不到了，點擊按鈕沒有反應，填寫的信息不知道哪里錯了總是不能提交成功？”

B：我們的工作就是改善這種情況，讓你使用網站時有一個好的體驗，同時能讓用戶感到愉悅和不受打擾。

工作中：除了考慮用戶還要讓公司有利可圖

2.交互設計師

通過分析用戶心理模型、設計任務流程、運用交互知識把業務邏輯（需求/功能）以用戶能理解的方式表達給用戶，最終實現產品戰略（公司需求和用戶需求的平衡點）的過程。

即：從公司戰略角度考慮問題，在公司需求的基礎上讓用戶覺得好用、易用

交互設計師的產出物：不是原型，你不是畫圖的工具，重要的是解決問題的能力

工作內容：競品分析文檔、用戶反饋整理、流程圖、設計草圖、原型...

3.視覺設計師

原畫：設計者很強的手繪能力，作品充滿藝術表現力

平面：傳達思想，較強的感染力

推廣運營設計師：突出重點抓眼球

UI：良好的審美、具備一定的交互知識

                      (原畫)                              (平面)                                              (推廣運營)

4.用戶研究員

通過各種分析和研究，深入了解用戶特征，用戶行為習慣，為產品運營推廣提供必要的方向

工作內容：市場分析、競品分析、創建人物角色、問卷調查、焦點小組、用戶訪談、可用性測試

四、用戶體驗設計師的作用和價值

1、用戶價值商業價值

用戶通過優秀的設計快速達到目標，企業也會財源滾滾

eg：改變一個按鈕的顏色，點擊率提高35%；優化操作流程，轉化率提高50%...

2、項目價值

跟進各個環節，保證產出物質量

推進統一及標準化，提升設計效率

促使項目流程合理，有規劃

五、交互設計師的作用和價值

1.工作內容

分析重塑需求;與用研配合，了解用戶特征與行為；設計結構、流程、界面、動態效果；跟進視覺、前端、開發；及時整理上線問題，準備下次迭代...

2.品牌價值

維護和突出品牌形象，統一的設計理念

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加：ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

我們生活在一個信息大爆炸的數據化時代，隨著網絡科技的飛速發展，產品和用戶之間的互動也日趨復雜，新功能不斷涌現，帶來便利的同時也導致用戶對功能的認知摩擦日益加劇。在這種情況下，人們對交互設計的需求就越來越大，市場對交互設計師的需求也越來越多。許多公司都注意到交互設計對品牌創建、用戶滿意度以及回頭率等方面的影響。那么，什么是交互？交互設計應該做什么？希望今天這篇文章，能夠加強你對交互的理解。

交互就是與另一個人或者物進行交流互動，比如你說話或按動鼠標，對方給你反饋，這就是交互。對于設計師們來講，交互多指用戶與計算機、手機等產品進行的交互。

交互設計是一個頁面或者一個界面的內容規劃，例如哪里放圖片，哪里放按鈕，哪里出現文字；或者說是一個龐大網站以及產品的整體邏輯梳理，例如如何安排信息層級，如何讓用戶更輕松地找到自己想要了解的信息，如何讓整個網站或產品更加合理、有效地運轉。

一個城市有合理的規劃交通才會便利，城市里面的人才會覺得更加舒適，而一個合理的交互設計也直接影響著一個網站、一個產品甚至一個品牌。

視覺設計是感性的，更注重一切表象的東西，比如顏色、版式、形狀、調性等，視覺設計最終的成品是視覺的效果圖設計稿。

交互設計相對來說更加理性，交互設計更加注重用戶是誰，通過需求分析得出問題、解決問題，交互設計的最終成品是原型圖。

看過了文字解釋，再讓我們一起來看看生活中無處不在的交互設計。

疊貓貓、蓋樓、星秀貓……每年雙11，天貓都會創新活動，激發用戶對雙11購物節的期待，營造蓄勢。

今年的雙11的主題為喵糖總動員，用戶通過組隊一起做任務賺喵糖，通過擲骰子的方式獲取糖果數，占領格子，擊敗對手。獲取喵糖的過程中，營銷或引流設置無處不在。除了做每日簽到獎勵的簡單任務外，最簡單的方式就是用15秒的時間去瀏覽平臺推送給你的主會場、各大分會場、各細分品類、各個商家店鋪等頁面。通過這樣的任務設計，可以引導用戶瀏覽會場店鋪或各品類商品，最大程度地完成各個淘寶店鋪的曝光需求。

 

天貓雙11-喵糖總動員活動頁面

新冠疫情還在持續蔓延，飛豬App貼心的在行程頁面，添加了防疫工具引導欄，通過點擊按鈕，可跳轉至支付寶中行程碼、核酸預約等界面，為用戶出行提供便捷的準備工作。

用戶在滑動頁面時該導航欄會被隱藏，靜態時則顯示兩個應用，點擊展開才能查看更多。設計采用浮層式引導，提供便利的同時，且不會對用戶產生干擾。

 

飛豬App界面

一切交互設計所要達到的效果就是形成良好的用戶體驗，讓用戶在使用界面時更方便找到自己感興趣的東西。

通過地圖及定位，通過氣泡及icon的區別，把附近的美食等進行排名，讓用戶更快知道自己的距離。還設置了點擊卡片展示店鋪信息同時支持查詢路線等功能。

 

美團App界面

“優秀的設計是考慮周到且不放過每個細節”。往往在那些不易被察覺的細微之處，傾注了設計師的諸多巧思與心血，嗶哩嗶哩在設計中做了以下一個有趣的小細節。

在賬號登陸頁面，當我們輸入賬號或者手機號的時候，頁面插畫中的22和33是睜大眼睛的，而當我們輸入密碼或者驗證碼的時候，他們則用手捂住了眼睛。這個有趣的設計生動地傳遞了App對用戶隱私的尊重與保護。

 

嗶哩嗶哩App界面

當你使用百度搜索物品，查看圖片時，左右滑動即可切換下一張圖片，上劃即可關閉圖片，這樣的操作手勢，更加方便快捷。

在查看物品圖片時，下方還會出現商品推薦購買鏈接，仿佛“一站式”購物的貼心服務。

 

百度App界面

交互設計的核心目的是信息的傳遞，無論如何設計交互圖、如何設計交互流程，我們要思考的核心和準則是如何把想要傳遞給用戶的信息以最簡單、最容易的方式讓客戶接收，反之用戶也能用最簡單的方式找到自己想要的信息。

這些信息包括內容、按鈕、文字、圖片等一切信息的載體。我們要明白在進行交互設計時的前提是如何去梳理信息更好地傳遞。

那么，如何才能讓信息更好地進行傳遞？我們要搞明白信息傳遞時需要營造什么樣的氛圍，哪些信息元素需要突出，目標用戶是誰，根據這些才能以一個正確的方向有邏輯地進行交互設計，而這一切的最終結果就是實現一個良好的用戶體驗。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷  作者：全速設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

本文將從理論到實踐，從軟件到插件，再到不同應用場景拆解和團隊協同的重構，一步步教你如何搭建產品KIT組件庫。也給大家帶來逆天的Anima插件教程，組件化設計的必備插件，目前國內還比較少有文章講到。手把手！嘴對嘴！堪稱全網最細保姆級教程！

01. 什么是KIT組件庫？

一個成熟的設計團隊，都會為產品制定設計規范，搭建產品KIT組件庫，組件化思維也是設計師的必備思維之一。組件庫會讓團隊協作變得高效且一致，讓團隊成員專注于深耕體驗和細節，實現設計向產品賦能。極大的節省設計和開發成本，優化用戶在界面流轉間的感知差異體驗。

02. 原子設計理論

將普遍存在的人性用戶心理規律運用于設計，增加設計的溫度。

近來對用戶心理比較感興趣，去看相關設計資料的時候發現相關內容重復性較高，多方搜集資料結合自己的一些分析總結出一篇補充。

定律是鑰匙，在遇到讓我們上癮，持續付出或獲得情感的APP，多去想一想它背后洞察了哪些人性及心理，能不能為我們的后續的設計吸收。

最后想說，設計師的價值不僅僅在視覺，好的設計必是好用好看好懂用戶的?？珙I域學習補充自己的視野，多思多想，掌握鑰匙，開啟用戶不同的心門。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

“今天吃什么??？”

“不知道啊，看看大眾點評，哪家店比較靠前”

“一會去看什么電影？”

“我看豆瓣上，這部片子評分特別高，我們去看這個吧”

當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時，會發現當你面對的選擇越多時卻越不知道該如何做決定，或者當下做了決定后會一直思考做的這個決定是不是最好的，這恰恰是當代絕大部分用戶在實際生活中面臨的問題-選擇困難。面對用戶的選擇需求各大平臺都有自己的方式，幫助用戶做決定的同時，引導用戶購買目標產品，極大的降低了用戶的選擇成本，其中排行榜就是平臺的常用套路。用戶的選擇成本是什么？排行榜為什么能夠幫助用戶降低選擇成本？如果排行榜僅僅是用來降低用戶的選擇成本，為什么所有商家都對排行榜趨之若鶩？下面帶你了解為什么人人都愛排行榜，及我們生活無處不在的“顯性”“非顯性”排行榜。你可能不知道是我們的生活正在被各種排行榜所支配！

排行榜的本質是一個沒有感情的信息篩選機制，將所有相關的同類事物之間通過比較，從而反映出同類事物的客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可，比如我們買衣服會首選淘寶，電子類產品會首選京東，看電影會看豆瓣評分，這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選，由于錨定效應使得用戶降低自己的選擇成本，可以準確快速的做出選擇。同時由于用戶的從眾心理或者羊群效應，也會對上榜主體產生強烈的品牌認可，為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量以及平臺背書標簽，比如：B站的百大up主，各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名，那么這一切背后的原理是什么？

一個完整的排行榜是由平臺、上榜主體、用戶三大組成部分，俗話說屁股決定腦袋，不同的定位決定了排行對三大組成部分不同的作用，當然背后的原理也不盡相同。

1.選擇類排行榜-降低用戶選擇成本

在沒有各種應用前，當我們決定購買什么東西或去哪家消費時，前期需要花費大量的人力、物力去搜集相關的信息進行整理集合，對比集合信息后才能做出決定，也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后，做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本（前兩個階段發生的成本是交易費用，而不是選擇成本）。在備選集的建立過程中，包含的選擇越多，用戶選擇的難度就越大，選擇成本就會越高。

選擇性排行榜在備選集建立完成后，利用沉錨效應在用戶心理建立潛意識的目標參照，幫助用戶完成擇優決策，降低用戶的選擇成本。（另一方面平臺在幫助用戶降低選擇成本的同時，也影響著用戶的最終選擇，在接下來的平臺側方面會有詳細的分析）。

比如說：當我需要買個耳機時，如果在沒有各大應用的前提下，我需要通過找到我身邊的耳機發燒友或數碼電子方面方面的內行人對耳機進行了解，收集信息建立備選集，但由于京東在電子設備購物方面的權威性，我會優先查看京東的耳機類排行榜，也就是說京東幫助我完成了前期對于信息的搜集及備選集的建立，而用戶出于對平臺權威性的信任，根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息，最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找，以及用戶對信息確定性的尋找過程。

2.信息類排行榜-滿足社交需求

在馬斯洛需求中，當個人的生理需求和安全需求被滿足時，與他人建立情感聯系或關系成為人們最強烈的需求，即社交需求。社交又分為：為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如：QQ音樂新增的撲通社區、微博的明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。

無論是“功利社交”還是“共情社交”首先需要的是溝通，溝通的本質則是信息的流通，但當雙方都沒有可以溝通的信息時則社交不成立，而類似：微博熱搜、今日頭條、澎湃新聞等信息類排行榜，則給有社交需求的用戶提供了可以展開話題相通的談資。

在選擇類排行榜中，提到的從眾心理（又稱羊群效應），是指人類由于對信息壓力及規范壓力，會希望融入到群體中尋求安全感的特性，即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感，會熱衷于瀏覽此類排行榜來獲取實時信息，融入群體生活。每天早上，在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件，在上班電梯或工作間隙討論各自掌握的信息，及對事件的見解，甚至在與他人有相同的見解或之后，會對對方產生莫名的親近感等等，這些都是在滿足大眾自己的社交需求。

3.分享類排行榜-自我確認需求

過年期間各家app紛紛都推出了自己的用戶年度報告總結榜，不知道你有沒有參與到其中，并把這些報告的截圖分享到自己的朋友圈！在我們的日常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序，人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外，還需要清楚自身在大數據下的自我確認，通過各種各樣自我測試類榜單，判斷自身的能力、情緒、價值等等，來達到自我認同，否則就會感到焦慮不安。

加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解是“社會是舞臺，人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程，我們想要呈現給觀眾怎樣的形象，需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己，為了維持自身的平衡防止崩潰，人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己，讓用戶更加清楚的認知自己，同時通過分享，滿足自我確認以及他人確認的需求。

我目前只總結出這三種類型的排行榜，如果有小伙伴想到其他類型歡迎在評論區提出，大家一起參與討論。

無論哪種排行榜，用戶信任的基礎都來自對平臺的信任，那么用戶為什么信任平臺？排行榜對平臺意味著什么？背后原理是什么？下面我們來討論排行中平臺的影響及背后的原因。

對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性，選擇成本是品牌經濟學的核心，而用戶對于排行的信任首先要建立在平臺品牌的權威性下的結果。

1.平臺權威性—用戶側

從我們記事起，我們對世界的認識來自我們的父母或老師，而這些教導我們什么是對、什么是錯的長輩或老師，對當時剛來到這個世界的我們來說就是權威的化身。長大后我們對于權威的認可則更傾向于某一領域的專家，比如：醫生、律師、教授等，認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠，可以幫助普通用戶節省研究這一領域問題的工作，做出更輕松的決定，雖然不一定是正確的。

搜索我們會第一時間想到百度，需要觀看影視、書籍會想到豆瓣，想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性，形成品牌號召力，推動著用戶做出需求決策。另一方面排行榜中也會說明數據來源，比如京東會在排行榜頁面有明確的榜單說明，豆瓣根據平臺數據更新，汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明，減少用戶做出決定中的思考、猜測，獲得用戶的信任，增強平臺的權威性。那對于平臺來說權威性的建立意味著什么？

2.平臺權威性—平臺側

• 影響用戶的決策方向

平臺權威性對用戶來說意味著說服力和影響力，在減輕用戶的決策壓力的同時，也影響著用戶做出平臺所需的決策方向；

• 平臺自帶話題性

平臺本身的權威性也會為平臺承載的內容帶來討論的話題度，加大平臺承載內容的傳播范圍。比如，每年蘋果發布會都會帶來范圍極大的熱度討論，而app store內的熱門推薦自帶話題度和討論熱度。

• 輸出口優化

排行榜作為內容輸出口，在平臺權威性的背書下，產品優化自身的價值，而平臺也可以通過排行榜優化自身平臺價值。

• 平臺盈利

平臺權威性下，可以通過多種方式達到盈利，比如蘋果app store應用商店內的付費應用，百度的鳳巢系統、微博熱搜的第3、4位排名等。

3.平臺權威性—廣告告知

在平臺完成建立權威性后，部分平臺開始利用排行榜進行商業變現，比如百度、58的競價排名等，現在大部分應用會使用明顯的方式告知用戶，防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”，淘寶、小紅書推薦猜你喜歡的“廣告”。

上榜主體作為整個排行榜的內容中心，由于排行榜自帶的競爭機制、篩選機制，使得上榜用戶會很樂于分享出去，比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。

由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度，以及各種潛在資源，比如：流量、資源、人脈、某一領域影響力、平臺背書等等，這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感，比如bilibili不同粉絲量級會送出相對應的粉絲牌。

而平臺方也利用上榜主體挖掘潛在的用戶，為平臺帶來更多的新用戶，加強平臺權威性，形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量，帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站，簽約西瓜視頻”，各大平臺也時不時會出現搶占流量up主的情況。

排行榜資源的建立

排行榜設計要達到用戶攀比的效果，很重要的充分條件就是相同需求的好友基數足夠大，這樣才能構成排行榜設計成功的必要條件。

• 同系同門資源導流

對于已有成功產品的公司，可以借助平臺相互間的導流完成初試資源的搭建，比如：微信初期借助QQ好友流量，帶來好友初期的爆發；抖音最初的活躍借助今日頭條的流量輸入。

• 自建用戶體系

不斷推送已關注好友的信息流，當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交，你要先有這個人聯系方式才能要求好友，關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等，不斷社區建設推送動態信息流和好友卡片推薦。

• 偽造

當應用建立初期，沒有很多的資源和內容時，需要平臺自行填充內容，使得排行榜信息量大，增加用戶活躍，才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等，或是平臺pgc發布推送的內容。

面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化，根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。

在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成，其他則根據不同產品類型及產品需求決定是否展示。

1.頁面tab

在首頁底部或頂部tab形式出現，多出現在以UGC或文字信息為核心的產品，以內容信息為主，常見以信息熱度為主要功能的資訊、新聞類應用。比如：知乎、今日頭條、36氪。

知乎熱榜內容完全展開；36氪分為話題榜、人氣榜，話題榜僅展示前5條，人氣榜展示10條，僅在前5條有名次圖標，在36氪熱榜的中部還會出現收藏榜，綜合榜。

而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”，點擊“查看更多”后，展開“頭條熱榜”及“今日關注”“北京熱榜”，整個交互形式類似微博熱搜。

2.圖標入口

首頁功能入口處明顯排行榜圖標，優先級較高，常見自帶推薦屬性，能夠幫助用戶快速選擇，減少選擇成本，比較依賴榜單的應用。比如：豆瓣、音樂類、騰訊動漫等應用。

其中豆瓣、網易云音樂由于各種類型的排行榜很多，在圖標點擊開后，在當前頁面平鋪不同維度榜單類型，用戶進行點擊跳轉；騰訊動漫相對榜單類型較少，在左邊側邊欄切換不同的榜單。

3.商品詳情頁榜單入口

用戶查看商品詳情時，可能會希望能夠橫向對比同類商品，才能最終決定購買那件商品。常見于電商類應用，比如：京東、拼多多、得物等。點擊后進入不同的榜單頁面，獲取更多產品信息進行篩選。（淘寶的商品詳情頁沒有排行榜，但在首頁卻存在隱形排行榜，在隱形排行榜模塊會有詳細說明）。

4.搜索-篩選（無明確搜索目的）

當用戶沒有明確搜索目的時，搜索框的下方，平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶，比如：微博熱搜、淘寶熱賣、抖音熱榜等。

沒有明顯排名及規則，但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前，位置越靠前，在用戶心目中的默認位置越靠前，比如淘寶的“有好貨”、編輯精選等。

1.編輯推薦/小編推薦

在平臺建立初期沒有特別的內容供平臺呈現，這時候就需要平臺人工有目的的推薦一些內容，不同于“猜你喜歡”建立在用戶的行為數據下，編輯推薦更多的平臺希望用戶看到的內容，一方面作為平臺內容的輸出口引導用戶，另一方面內容是平臺自己發布內容，也可以保證內容的高質量。

2.猜你喜歡/相關推薦

平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期，并且存在大量的平臺用戶使用數據，“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性，各大應用平臺適用性強，一般出現在首頁部分。

3.年度總結排行榜

朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜，這些其實是用戶自己確定了解自己，且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓，清楚的認識自己。

4.TOP排行榜

不知道大家小時候看沒看過《第10放映室》，那是我最早關于排行榜的印象，里面會有各種最佳動作片總結、最佳男配角總結等等，以香港電影偏多，是我早年的電影信息資料庫?，F在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦，這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜，從眾多選擇中選擇出部分答案，給出理由，而用戶只需在已被篩選過的內容中進行決定，節省選擇成本，比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定，但可以迎合用戶對確定性需求的各種盤點性質的排行榜，比如抖音的TOP榜哥就是盤點各種內容，人物。

5.搜索-篩選（有明確搜索目的）

相比其他排行榜，篩選后的內容已經體現了用戶的具體需求，高效明確的給用戶提供選項，引導用戶快速選擇。

排行榜一般由必需的榜單頭部、上榜主體，及非必需的榜單規則、更新信息構成；而上榜主體由必需的主體信息、排序，以及非必需的推薦理由、排名變化、熱度信息構成。

好的榜單能夠快速吸引用戶快速找到自己的需求點，引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、可復用性榜單頭部。

1.唯一性榜單頭部

當排行榜在整個應用中有且只有一個時，通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出，增加平臺的品牌權威性。

2.可復用性榜單頭部

有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況，為了平臺的統一性、降低后期的維護成本，一般會使用可復用的榜單頭部，如豆瓣、京東、QQ音樂等。

得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配，但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案；馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式，通過更換文案底圖達到適用不同主題；京東就相對比較簡單，只是更換標題的文案達到多主題適配。

排行榜上榜主體由于不同的場景業務需求，一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式，其中主體信息及排序為排行榜必須信息，而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。

1.純文字形式

純文字的排行榜一般是以內容（或標題）加排名的形式出現，常見以信息為主的排行榜，比如微博、知乎、今日頭條等以信息為主要關注點的應用，或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準，因此會在標題及排位外，增加各種突出熱度信息的表現形式，如關注熱度人數，或是“熱”“新”“爆”等等表示熱度的標簽，如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化。

2.圖文結合形式

相對于純文字形式，圖文結合的排行榜因為圖片信息的增加，使整個榜單主體占居更多的空間也可以展示更多的產品信息，輔助用戶進行選擇。

• 圖片形式

上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式，延續了用戶閱讀新聞類資訊的習慣；而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖，因此沿用至線上使用的也是豎版圖片形式；而京東、大眾點評、馬蜂窩則使用方版的圖片形式，大概是因為產品的多樣性需要考慮多種圖片的適配問題。（視頻、游戲類由于使用場景大部分采用橫版圖片形式；但由于游戲封面、宣傳海報也會有豎版的形式，比如：游民星空、小黑盒）。

• 左文右圖VS左圖右文

每當設計圖文結合的部分，首先要考慮到底是采用左圖右文還是左文右圖的形式呢？可能很多人會說這兩種形式沒有什么大的區別啊，有什么可糾結的！或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的，因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。

人類對畫面的閱讀及掃描方式通常為三種布局方式，包括：古騰堡圖（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中產品列表頁中最常使用的就是F型布局模式，F型布局是雅各布·尼爾森（Jacob Nielsen）在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是，眼睛從上/左，水平移動到上/右，然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后，向右掃動的次數會越來越少，并且會隨著向下移動，眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面，即自左向右自上而下的閱讀模式，越向下信息獲取效率會越低。

因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式，比如：騰訊動漫、愛奇藝、得物等等。

3.橫排+列表表現形式

說到排行榜我們一般第一個會想到領獎臺，很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜，平臺用戶的注意力大部分集中在第一名，而領獎臺的形式模仿現實生活中的獎勵形式和儀式感，將整個排行榜的關注范圍從第一名擴展至3名，另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系，增加了第一名的高度。（目前這種形式我只在微博的明星勢力榜及抖音的直播總榜中有看到）

榜單規則是排行榜規則的描述，是平臺權威性的體現。榜單規則有些平臺本身具有數據庫，會有相關的平臺數據支持如京東；而汽車之家則依靠“汽車工業協會”外部的數據支持，增加平臺的權威性及榜單的可信度；

信息更新一般存在在榜單頭部和上榜主體的中間，有些是固定時間更新，也有類似微博熱搜是實時更新的模式，而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。

排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案，但歸根到底因為人們對于不確定性的懼怕，無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式，結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同，排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯，以及用戶操作行為背后的思考及心理效應，提出合理的設計，幫助用戶了解產品功能，滿足用戶需求。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務