知識圖譜作為語義網絡，其技術算法研究被廣泛應用在人工智能和大數據等領域。通常，知識圖譜的運轉過程是由數據模型完成，用戶可見的只是計算后的結果，其數據的可視化也僅停留在對結果的可讀性展示上。但其實，圖譜之間的關系、數據計算的過程，也具備分析價值和潛在的機會信息。將知識圖譜轉化為可視化信息圖，能幫助用戶更好的理解和利用數據及其關系，但對于沒有技術背景的界面設計師來講，從技術架構、計算函數等技術視角去理解知識圖譜概念和應用相對困難。本文分享一種設計思路，幫助大家在實際工作中，完成知識圖譜向可視化交互界面的轉化。
在使用產品的過程中，你是否看到了一些有趣的細節，而這些細節提升了你的使用體驗？這些產品細節，便是產品設計師需要留意的，因為這些產品細節在某種程度上提升了用戶的留存與轉化。本文我就對一些產品細節進行了拆解，一起來看一下。
一.【夸克瀏覽器】節日彩蛋-特定場景下輸入關鍵詞觸發彩蛋效果
二.【酷狗音樂】播放Tab-多交互操作，應對多場景使用
三.【騰訊新聞】左滑熱點榜單-用戶關注的熱點放在路徑短的位置
四.【荔枝博客】品牌傳播-產品情感漏出，與用戶產生共鳴
五.【百度網盤】自定義倍數-給用戶更多可控操作，精細化觀影感受
六.【網易云音樂】情感彩蛋-給你夢幻的魔法，帶你重拾記憶
七.【即刻】頭像彩蛋-趣味互動回彈，把喜歡強烈表現出來
八.【荔枝】錄聲音-輕擬物動態圖，使用中的及時反饋
九.【微博】點贊反饋-情緒最大化宣泄，盡情釋放情緒
十.【36氪】隱藏的浮窗-深挖用戶操作，快切與停頓的奧秘
在圣誕節日來臨之際，用戶使用搜索引擎輸入關鍵詞的頻率會增加，在此增加彩蛋給用戶營造節日氛圍
設計目標：增加關鍵詞趣味彩蛋雨，提高產品趣味體驗，提高用戶搜索頻次。
設計方案：在節日來臨前，用戶通過搜索節日特定關鍵詞，會在搜索結果頁中以彩蛋雨的形式墜落下來，圖案貼合節日物品，給用戶營造出節日氛圍，給予用戶節日的浪漫。用戶在使用時并不是一個冰冷的產品，而是有情感共鳴有情緒的產品。
想要提高屏效，一屏顯示更多內容。在瀏覽操作時會因為功能按鈕外漏造成誤操作情況。
設計目標：提升屏幕顯示內容面積，給予TAB播放更多交互形式，增加趣味性提升產品記憶點。
設計方案：在TAB播放中給予「長按」「雙擊」兩種交互操作，長按中包含雙擊的播放暫停，因為此操作，使用率較高，提供多入口能有效提高易用性。長按時，激活更多常用功能，包含移動進度條、收藏、下一首等操作，配合特有的交互展示形式，給用戶形成產品記憶點，同時在瀏覽不同頻道時，功能的隱藏大大降低誤操作以及視覺干擾的情況。
如今的新聞產品都提供熱點時事新聞，給用戶提供更多豐富內容聚集。
設計目標：提高用戶使用率，不影響主框架的情況下給用戶最短路徑查看熱點新聞的入口，提高用戶瀏覽時長。
設計方案：首屏以及導航模塊更多還是以新聞資訊等內容為主，關注熱點更多是娛樂熱門等內容，瀏覽率都高的情況下，把熱點模塊放到左滑頁面中，在不影響首頁框架情況下，增加新的板塊，給用戶更多瀏覽選擇，豐富產品多元化內容。
如今的產品趨于同質化，由原來只注重功能轉變為產品情感表達，給用戶產生情感互動，從功能付費變為情感價值觀付費。
設計目標：傳播產品價值觀，給予用戶引導，產生產品正向記憶，從而提高粘性。
設計方案：上幾期產品分析中有說到頂部logo外漏的設計描述，有的植入隱藏功能，有的表示刷新功能等，歸根結底都是給予靜態標志功能屬性，提高屏幕利用率同時提升用戶探索欲望。
荔枝博客本身產品內容相對聚焦，想要做出差異化就要往品牌情感入手，當用戶點擊左上角「荔枝博客」標志時，會彈出產品的由來以及做博客的初衷，讓用戶思考產品深層意思時無形中把產品植入到用戶記憶中，給用戶情感綁定，提升用戶使用粘性。
市場上的視頻倍速參差不齊，0.25、0.5、1倍三種遞增邏輯，用戶在觀影時會存在沒有想要選擇著倍速，只能使用平臺提供的選擇使用，操作受限制。
設計目標：解決倍速不是用戶想要的，提供自定義倍速，給用戶更多可操作性，提升觀影感受。
設計方案：在百度網盤中觀看視頻時，點擊調節倍速在提供默認常規5種倍速下提供自定義倍速，以0.1的速度逐漸遞增，用戶可以在0.5-3倍之間任意選擇，根據視頻類型、觀影習慣選擇合適的速度，同時把市面上不同倍速問題給用戶造成的觀影困擾也同步解決，提高視頻觀影體驗。
音樂無國界，每首音樂背后都有一段很長的故事，在我聽哈利波特主題曲時，瀏覽評論發現特定特定位置點擊會有彩蛋，嘗試了一下果然如此。網易云音樂評論區的強大之處展示之一。獨有的彩蛋。
設計目標：提升評論活躍度，強化廣告的表現形式，增加用戶對產品的探索欲望提高使用粘性。
設計方案：哈利波特音樂中，在評論區第九和第十條中間分割線處，點擊兩下！觸發魔法視頻，把用戶帶入情境之中，勾起滿滿的回憶，配合音樂聲音，真可謂視覺聽覺雙重享受。
對于開發來說，只需要在特定歌曲評論中寫一個位置判定以及觸發條件，當用戶觸發條件后，播放特定視頻，觸發 用戶情感共識，提升使用粘性。同時如果做為廣告植入也是比較好的呈現方式，但要注意視頻質量，盡量弱化廣告中的產品，可以把品牌情感揉入視頻中與用戶產生情感關聯。
在看關注人主頁時，想要強烈的表達出情感給予對方，釋放自己心中的喜歡時如何表現出來。
設計目標：提升趣味玩法，增強用戶操作感受，豐富產品玩法體驗，提升使用粘性。
設計方案：在個人主頁，通過拖拽用戶頭像放手回彈，頭像以拉距來彈射回原有位置并且迸發出愛心動畫，讓用戶產生更貼近的情感傳達，反復操作達到一定數量會有文字提醒，文案的趣味描述也讓彩帶功能增加了一份趣味。
在使用錄音功能時，單純靠進度條記憶靜態按鈕顯示很難產生強提醒，除非做大做突出，荔枝在錄音中是如何表現的。
設計目標：解決錄音功能頁面元素單一用戶進行中與暫停感知淺的問題，結合動態插圖給用戶及時反饋，同時貼合線下使用場景，給用戶注入產品記憶點。
設計方案：在我的-進入錄聲音模塊中，頭圖展示一個錄音磁帶機，當開啟錄音功能時，磁帶機會進行旋轉播放，左慢右快的展示形式符合真實機器的運動規律，給用戶強提醒告知用戶此時正在錄音中，當暫停時，磁帶機及時停止，和按鈕形成觸發綁定，提高產品使用體驗。
單一的贊有時無法滿足用戶的愛意，用戶希望更強烈的表達情感，來滿足自己反饋欲。
設計目標：提升贊的強烈感知，釋放用戶內在情緒，提高產品趣味體驗，從而增加使用粘性。
設計方案：在微博單條動態頁面中，對“贊”進行點擊一次操作是普通點贊反饋；長按觸發連贊機制，會帶來多彩多圖標的更強的視覺感受，帶來強烈的情感反饋，讓用戶盡情的釋放情緒，得到內在解壓。
新聞資訊產品，文章之間來回切換閱讀，時有發生，或者手頭有事忙完再回過頭看。
設計目標：解決閱讀中斷導致回看路徑長，影響閱讀效率的問題。
設計方案：瀏覽文章時，屏幕側邊從左向右劃動是返回上一級的交互手勢，當用戶在滑動中停留一下就會激活浮窗功能，隨著手勢操作移動到黑圈內顏色會顯示藍色，表示移入成功，這時放手返回首頁，右下角會顯示一個圓形浮窗，可快速查看浮窗內的文章。
值得學習的是，左滑浮窗圖形隨著手勢上下位置進行移動，路徑更短更快的進行操作，提高用戶使用體驗。因為隱藏式的交互有一定學習成本，產品充分考慮到這點，在文章右上角更多按鈕中放置加入浮窗功能，兩個激活入口，兼容新老用戶使用，提高產品易用性。
設計師要有發現美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設計師所追求的。認真記錄產品細節，了解背后的思考，也是不斷提升自己邏輯思維和表達能力的一種方式。
文章來源：站酷 作者：碳水sir
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在了解了人物性格語氣的重要性以及在大廠中的應用場景之后，大家一定很關心，要如何在自己的業務中從0開始創建文案的人物性格語氣呢？下面會結合在酷家樂云設計工具的實踐，針對這部分內容做詳細介紹。酷家樂云設計工具主要是針對內裝設計師的設計工具。整個過程大致分為 5 個階段：資料研究、小組研討、確定人物性格關鍵詞、豐富人物性格、繪制畫像。
<h1 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode5" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">Chapter ONE 「資料研究」
<h4 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__7" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; font-size: 14px;">-研究內部資料，了解基調和方向
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode8" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">工具產品文案的人物性格和語氣一定是符合公司的戰略定位、品牌形象和設計原則的，因此我們首先對公司現有的內部資料進行收集和研究，為工具產品文案的人物性格與語氣確定一個基調和方向。研究的資料包括但不限于以下內容，包括公司戰略書、品牌白皮書、設計價值觀、設計原則、用戶畫像等等。
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__10" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">閱讀相關資料，分析資料中的關鍵詞，在公司資料傳遞出的氣質和價值觀中，提取與人物性格語氣相關的內容。在我們的資料研究中，有一些詞是被反復提到的，且能反映一定人物性格的。比如權威、專業、引領、靈活友好、高效專注、冷靜、秩序、簡潔等等。
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode11" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode18" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode24" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">首先，我們將這些詞匯分為兩大類。一類是描述性格的，比如善解人意、隨和的、理性的、直接的等等。另一類則不是描述性格的，比如關注用戶，更多的是一個人的表現，而非性格。再比如專業有經驗，是指一個人的能力，而不是性格。
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode28" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__36" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">不是什么？
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__37" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">具體表現：
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__39" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">理性
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__41" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">不是什么？
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__42" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">具體表現：
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__44" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">直率
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__46" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">不是什么？
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__47" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">具體表現：
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><h1 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode49" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">Chapter Five「繪制畫像」
<h4 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__51" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; font-size: 14px;">-將性格形象化，讓人物更立體
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode52" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">為了讓大家更直觀的理解我們的人物，方便在與各職能角色溝通時快速達成共識。我們收集了符合我們人物性格的一些畫像打印出來，通過討論投票的形式，選出最符合我們產品的人物畫像。
<p style="margin-top:0px;margin-bottom:0px;white-space:normal;caret-color:#282828;color:#666666;font-family:"font-size:16px;outline:0px;padding:0px;line-height:32px;text-align:justify;">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><br />
文章來源：站酷 作者：酷家樂UED
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
<p style="margin-top:0px;margin-bottom:1rem;white-space:normal;caret-color:#282828;box-sizing:border-box;font-size:16px;background-color:#FFFFFF;color:rgba(0, 0, 0, 0.843);font-family:"letter-spacing:0.1px;text-align:justify;">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:"font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height1111111111111111111111111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><a href="http://www.syprn.cn/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">藍藍設計</a>( <a href="http://www.syprn.cn/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;padding:0px;margin:0px;text-indent:34px;background-position:0px -60px;">www.syprn.cn </a>)是一家專注而深入的<a href="http://www.syprn.cn/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">界面設計公司</a>，為期望卓越的國內外企業提供卓越的UI界面設計、<a href="http://www.syprn.cn/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">BS界面設計 </a>、 <a href="http://www.syprn.cn/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">cs界面設計 </a>、 <a href="http://www.syprn.cn/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">ipad界面設計</a><a href="http://www.syprn.cn/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;"> </a>、 <a href="http://www.syprn.cn/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">包裝設計 </a>、 <a href="http://www.syprn.cn/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">圖標定制 </a>、 <a href="http://www.syprn.cn/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">用戶體驗 、交互設計、 </a><a href="http://www.syprn.cn/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">網站建設</a><a href="http://www.syprn.cn/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;"> </a>、<a href="http://www.syprn.cn/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">平面設計服務</a></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong></strong></strong>
</p>
<div>
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:"font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height1111111111111111111111111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><br />
“今天吃什么??？”
“不知道啊，看看大眾點評，哪家店比較靠前”
“一會去看什么電影？”
“我看豆瓣上，這部片子評分特別高，我們去看這個吧”
當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時，會發現當你面對的選擇越多時卻越不知道該如何做決定，或者當下做了決定后會一直思考做的這個決定是不是最好的，這恰恰是當代絕大部分用戶在實際生活中面臨的問題-選擇困難。面對用戶的選擇需求各大平臺都有自己的方式，幫助用戶做決定的同時，引導用戶購買目標產品，極大的降低了用戶的選擇成本，其中排行榜就是平臺的常用套路。用戶的選擇成本是什么？排行榜為什么能夠幫助用戶降低選擇成本？如果排行榜僅僅是用來降低用戶的選擇成本，為什么所有商家都對排行榜趨之若鶩？下面帶你了解為什么人人都愛排行榜，及我們生活無處不在的“顯性”“非顯性”排行榜。你可能不知道是我們的生活正在被各種排行榜所支配！
排行榜的本質是一個沒有感情的信息篩選機制，將所有相關的同類事物之間通過比較，從而反映出同類事物的客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可，比如我們買衣服會首選淘寶，電子類產品會首選京東，看電影會看豆瓣評分，這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選，由于錨定效應使得用戶降低自己的選擇成本，可以準確快速的做出選擇。同時由于用戶的從眾心理或者羊群效應，也會對上榜主體產生強烈的品牌認可，為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量以及平臺背書標簽，比如：B站的百大up主，各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名，那么這一切背后的原理是什么？
一個完整的排行榜是由平臺、上榜主體、用戶三大組成部分，俗話說屁股決定腦袋，不同的定位決定了排行對三大組成部分不同的作用，當然背后的原理也不盡相同。
在沒有各種應用前，當我們決定購買什么東西或去哪家消費時，前期需要花費大量的人力、物力去搜集相關的信息進行整理集合，對比集合信息后才能做出決定，也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后，做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本（前兩個階段發生的成本是交易費用，而不是選擇成本）。在備選集的建立過程中，包含的選擇越多，用戶選擇的難度就越大，選擇成本就會越高。
選擇性排行榜在備選集建立完成后，利用沉錨效應在用戶心理建立潛意識的目標參照，幫助用戶完成擇優決策，降低用戶的選擇成本。（另一方面平臺在幫助用戶降低選擇成本的同時，也影響著用戶的最終選擇，在接下來的平臺側方面會有詳細的分析）。
比如說：當我需要買個耳機時，如果在沒有各大應用的前提下，我需要通過找到我身邊的耳機發燒友或數碼電子方面方面的內行人對耳機進行了解，收集信息建立備選集，但由于京東在電子設備購物方面的權威性，我會優先查看京東的耳機類排行榜，也就是說京東幫助我完成了前期對于信息的搜集及備選集的建立，而用戶出于對平臺權威性的信任，根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息，最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找，以及用戶對信息確定性的尋找過程。
在馬斯洛需求中，當個人的生理需求和安全需求被滿足時，與他人建立情感聯系或關系成為人們最強烈的需求，即社交需求。社交又分為：為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如：QQ音樂新增的撲通社區、微博的明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。
無論是“功利社交”還是“共情社交”首先需要的是溝通，溝通的本質則是信息的流通，但當雙方都沒有可以溝通的信息時則社交不成立，而類似：微博熱搜、今日頭條、澎湃新聞等信息類排行榜，則給有社交需求的用戶提供了可以展開話題相通的談資。
在選擇類排行榜中，提到的從眾心理（又稱羊群效應），是指人類由于對信息壓力及規范壓力，會希望融入到群體中尋求安全感的特性，即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感，會熱衷于瀏覽此類排行榜來獲取實時信息，融入群體生活。每天早上，在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件，在上班電梯或工作間隙討論各自掌握的信息，及對事件的見解，甚至在與他人有相同的見解或之后，會對對方產生莫名的親近感等等，這些都是在滿足大眾自己的社交需求。
過年期間各家app紛紛都推出了自己的用戶年度報告總結榜，不知道你有沒有參與到其中，并把這些報告的截圖分享到自己的朋友圈！在我們的日常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序，人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外，還需要清楚自身在大數據下的自我確認，通過各種各樣自我測試類榜單，判斷自身的能力、情緒、價值等等，來達到自我認同，否則就會感到焦慮不安。
加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解是“社會是舞臺，人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程，我們想要呈現給觀眾怎樣的形象，需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己，為了維持自身的平衡防止崩潰，人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己，讓用戶更加清楚的認知自己，同時通過分享，滿足自我確認以及他人確認的需求。
我目前只總結出這三種類型的排行榜，如果有小伙伴想到其他類型歡迎在評論區提出，大家一起參與討論。
無論哪種排行榜，用戶信任的基礎都來自對平臺的信任，那么用戶為什么信任平臺？排行榜對平臺意味著什么？背后原理是什么？下面我們來討論排行中平臺的影響及背后的原因。
對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性，選擇成本是品牌經濟學的核心，而用戶對于排行的信任首先要建立在平臺品牌的權威性下的結果。
從我們記事起，我們對世界的認識來自我們的父母或老師，而這些教導我們什么是對、什么是錯的長輩或老師，對當時剛來到這個世界的我們來說就是權威的化身。長大后我們對于權威的認可則更傾向于某一領域的專家，比如：醫生、律師、教授等，認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠，可以幫助普通用戶節省研究這一領域問題的工作，做出更輕松的決定，雖然不一定是正確的。
搜索我們會第一時間想到百度，需要觀看影視、書籍會想到豆瓣，想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性，形成品牌號召力，推動著用戶做出需求決策。另一方面排行榜中也會說明數據來源，比如京東會在排行榜頁面有明確的榜單說明，豆瓣根據平臺數據更新，汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明，減少用戶做出決定中的思考、猜測，獲得用戶的信任，增強平臺的權威性。那對于平臺來說權威性的建立意味著什么？
影響用戶的決策方向
平臺權威性對用戶來說意味著說服力和影響力，在減輕用戶的決策壓力的同時，也影響著用戶做出平臺所需的決策方向；
平臺自帶話題性
平臺本身的權威性也會為平臺承載的內容帶來討論的話題度，加大平臺承載內容的傳播范圍。比如，每年蘋果發布會都會帶來范圍極大的熱度討論，而app store內的熱門推薦自帶話題度和討論熱度。
輸出口優化
排行榜作為內容輸出口，在平臺權威性的背書下，產品優化自身的價值，而平臺也可以通過排行榜優化自身平臺價值。
平臺盈利
平臺權威性下，可以通過多種方式達到盈利，比如蘋果app store應用商店內的付費應用，百度的鳳巢系統、微博熱搜的第3、4位排名等。
在平臺完成建立權威性后，部分平臺開始利用排行榜進行商業變現，比如百度、58的競價排名等，現在大部分應用會使用明顯的方式告知用戶，防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”，淘寶、小紅書推薦猜你喜歡的“廣告”。
上榜主體作為整個排行榜的內容中心，由于排行榜自帶的競爭機制、篩選機制，使得上榜用戶會很樂于分享出去，比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。
由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度，以及各種潛在資源，比如：流量、資源、人脈、某一領域影響力、平臺背書等等，這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感，比如bilibili不同粉絲量級會送出相對應的粉絲牌。
而平臺方也利用上榜主體挖掘潛在的用戶，為平臺帶來更多的新用戶，加強平臺權威性，形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量，帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站，簽約西瓜視頻”，各大平臺也時不時會出現搶占流量up主的情況。
排行榜設計要達到用戶攀比的效果，很重要的充分條件就是相同需求的好友基數足夠大，這樣才能構成排行榜設計成功的必要條件。
同系同門資源導流
對于已有成功產品的公司，可以借助平臺相互間的導流完成初試資源的搭建，比如：微信初期借助QQ好友流量，帶來好友初期的爆發；抖音最初的活躍借助今日頭條的流量輸入。
自建用戶體系
不斷推送已關注好友的信息流，當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交，你要先有這個人聯系方式才能要求好友，關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等，不斷社區建設推送動態信息流和好友卡片推薦。
偽造
當應用建立初期，沒有很多的資源和內容時，需要平臺自行填充內容，使得排行榜信息量大，增加用戶活躍，才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等，或是平臺pgc發布推送的內容。
面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化，根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。
在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成，其他則根據不同產品類型及產品需求決定是否展示。
在首頁底部或頂部tab形式出現，多出現在以UGC或文字信息為核心的產品，以內容信息為主，常見以信息熱度為主要功能的資訊、新聞類應用。比如：知乎、今日頭條、36氪。
知乎熱榜內容完全展開；36氪分為話題榜、人氣榜，話題榜僅展示前5條，人氣榜展示10條，僅在前5條有名次圖標，在36氪熱榜的中部還會出現收藏榜，綜合榜。
而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”，點擊“查看更多”后，展開“頭條熱榜”及“今日關注”“北京熱榜”，整個交互形式類似微博熱搜。
首頁功能入口處明顯排行榜圖標，優先級較高，常見自帶推薦屬性，能夠幫助用戶快速選擇，減少選擇成本，比較依賴榜單的應用。比如：豆瓣、音樂類、騰訊動漫等應用。
其中豆瓣、網易云音樂由于各種類型的排行榜很多，在圖標點擊開后，在當前頁面平鋪不同維度榜單類型，用戶進行點擊跳轉；騰訊動漫相對榜單類型較少，在左邊側邊欄切換不同的榜單。
用戶查看商品詳情時，可能會希望能夠橫向對比同類商品，才能最終決定購買那件商品。常見于電商類應用，比如：京東、拼多多、得物等。點擊后進入不同的榜單頁面，獲取更多產品信息進行篩選。（淘寶的商品詳情頁沒有排行榜，但在首頁卻存在隱形排行榜，在隱形排行榜模塊會有詳細說明）。
當用戶沒有明確搜索目的時，搜索框的下方，平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶，比如：微博熱搜、淘寶熱賣、抖音熱榜等。
沒有明顯排名及規則，但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前，位置越靠前，在用戶心目中的默認位置越靠前，比如淘寶的“有好貨”、編輯精選等。
在平臺建立初期沒有特別的內容供平臺呈現，這時候就需要平臺人工有目的的推薦一些內容，不同于“猜你喜歡”建立在用戶的行為數據下，編輯推薦更多的平臺希望用戶看到的內容，一方面作為平臺內容的輸出口引導用戶，另一方面內容是平臺自己發布內容，也可以保證內容的高質量。
平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期，并且存在大量的平臺用戶使用數據，“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性，各大應用平臺適用性強，一般出現在首頁部分。
朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜，這些其實是用戶自己確定了解自己，且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓，清楚的認識自己。
不知道大家小時候看沒看過《第10放映室》，那是我最早關于排行榜的印象，里面會有各種最佳動作片總結、最佳男配角總結等等，以香港電影偏多，是我早年的電影信息資料庫。現在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦，這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜，從眾多選擇中選擇出部分答案，給出理由，而用戶只需在已被篩選過的內容中進行決定，節省選擇成本，比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定，但可以迎合用戶對確定性需求的各種盤點性質的排行榜，比如抖音的TOP榜哥就是盤點各種內容，人物。
相比其他排行榜，篩選后的內容已經體現了用戶的具體需求，高效明確的給用戶提供選項，引導用戶快速選擇。
排行榜一般由必需的榜單頭部、上榜主體，及非必需的榜單規則、更新信息構成；而上榜主體由必需的主體信息、排序，以及非必需的推薦理由、排名變化、熱度信息構成。
好的榜單能夠快速吸引用戶快速找到自己的需求點，引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、可復用性榜單頭部。
當排行榜在整個應用中有且只有一個時，通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出，增加平臺的品牌權威性。
有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況，為了平臺的統一性、降低后期的維護成本，一般會使用可復用的榜單頭部，如豆瓣、京東、QQ音樂等。
得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配，但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案；馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式，通過更換文案底圖達到適用不同主題；京東就相對比較簡單，只是更換標題的文案達到多主題適配。
排行榜上榜主體由于不同的場景業務需求，一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式，其中主體信息及排序為排行榜必須信息，而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。
純文字的排行榜一般是以內容（或標題）加排名的形式出現，常見以信息為主的排行榜，比如微博、知乎、今日頭條等以信息為主要關注點的應用，或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準，因此會在標題及排位外，增加各種突出熱度信息的表現形式，如關注熱度人數，或是“熱”“新”“爆”等等表示熱度的標簽，如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化。
相對于純文字形式，圖文結合的排行榜因為圖片信息的增加，使整個榜單主體占居更多的空間也可以展示更多的產品信息，輔助用戶進行選擇。
圖片形式
上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式，延續了用戶閱讀新聞類資訊的習慣；而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖，因此沿用至線上使用的也是豎版圖片形式；而京東、大眾點評、馬蜂窩則使用方版的圖片形式，大概是因為產品的多樣性需要考慮多種圖片的適配問題。（視頻、游戲類由于使用場景大部分采用橫版圖片形式；但由于游戲封面、宣傳海報也會有豎版的形式，比如：游民星空、小黑盒）。
左文右圖VS左圖右文
每當設計圖文結合的部分，首先要考慮到底是采用左圖右文還是左文右圖的形式呢？可能很多人會說這兩種形式沒有什么大的區別啊，有什么可糾結的！或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的，因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。
人類對畫面的閱讀及掃描方式通常為三種布局方式，包括：古騰堡圖（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中產品列表頁中最常使用的就是F型布局模式，F型布局是雅各布·尼爾森（Jacob Nielsen）在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是，眼睛從上/左，水平移動到上/右，然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后，向右掃動的次數會越來越少，并且會隨著向下移動，眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面，即自左向右自上而下的閱讀模式，越向下信息獲取效率會越低。
因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式，比如：騰訊動漫、愛奇藝、得物等等。
說到排行榜我們一般第一個會想到領獎臺，很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜，平臺用戶的注意力大部分集中在第一名，而領獎臺的形式模仿現實生活中的獎勵形式和儀式感，將整個排行榜的關注范圍從第一名擴展至3名，另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系，增加了第一名的高度。（目前這種形式我只在微博的明星勢力榜及抖音的直播總榜中有看到）
榜單規則是排行榜規則的描述，是平臺權威性的體現。榜單規則有些平臺本身具有數據庫，會有相關的平臺數據支持如京東；而汽車之家則依靠“汽車工業協會”外部的數據支持，增加平臺的權威性及榜單的可信度；
信息更新一般存在在榜單頭部和上榜主體的中間，有些是固定時間更新，也有類似微博熱搜是實時更新的模式，而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。
排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案，但歸根到底因為人們對于不確定性的懼怕，無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式，結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同，排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯，以及用戶操作行為背后的思考及心理效應，提出合理的設計，幫助用戶了解產品功能，滿足用戶需求。
社交的本質
社會心理學對用戶體驗的影響系列：權威性原則
3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
交互分析：排行榜應該如何設計？
如何利用好排行榜產生榜單效應？
萬字長文深度分析：產品排行榜的設計和玩法
關于排行榜的設計，這有一份7000字干貨手把手教你做！
淘寶“有好貨”競品分析：淘寶為何要把排行榜藏起來？
我們曬網易、支付寶年度榜單，其實只是在曬自己？
文章將分為6部分
1、撰寫文檔的目的
2、什么樣的產品值得體驗
3、產品體驗類型
4、產品體驗文檔應該包含的內容
5、文檔質量的評判標準
6、體驗文檔和競品文檔的異同
如果你是做平臺型電商，那么淘寶、京東這些你就得去體驗體驗。
以上信息獲取渠道：
圍繞著體驗目的和讀者感受，可以把產品體驗文檔的質量評判標準做一個總結。
1）體現產品核心價值
2）抓住產品重點
3）體現產品特色
4）結構清晰
5）格式美觀
6）思考總結
1）詳細數據支持
2）商業模式分析
很多小伙伴會把產品體驗報告和競品分析報告搞混：都是對產品進行體驗和分析，除了名字之外，到底有啥區別？
我們從「異同」兩個方面來分析，看看它們究竟有啥區別。
競品分析文檔是對競品做分析，常用SWOT模型，將自己和競品做對比分析，學習借鑒。而產品體驗，不一定是競品，可能只是你個人感興趣而已。
競品分析文檔，一般僅限于輸出競品的思考總結，而產品體驗的范圍更廣。
產品體驗可以淺嘗輒止，但競品分析不行，競品分析需要透過現象看到本質，觀察競品的一舉一動，配合市場動態，不斷調整我們自身產品方向，甚至是公司戰略定位。
4、方案對比的優缺點各有哪些？
多體驗、多思考、做自己、少糾結模板
文章來源：站酷 作者：阿G聊產品
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶體驗四維度的概念、價值以及相互之間的關系
用戶體驗，是用戶在使用產品過程中建立起來的一種純主觀感受。
解讀用戶體驗，可以有很多視角。本文提供一個以人為本的視角：用戶體驗四維度。具體如下。
HI X：Human Interface Experience，人與界面的交互體驗。
HC X：Human Content Experience，人與內容的交互體驗。
HH X：Human Human Experience，人與人的交互體驗。
HB X：Human Brand Experience，人與品牌的交互體驗。
用戶體驗四維度
01 四維度的概念
怎樣判斷一款產品有幾個維度？這就要從四維度的概念說起。
1. HI X（人與界面的交互體驗）
HI X 是指用戶在瀏覽、閱讀、操作界面過程中產生的主觀感受。
HI X 既受信息架構、交互設計和UI設計的影響，也受根需求和功能架構的影響。主要依托手機和電腦的互聯網產品，天然存在界面。所以，HI X 屬于基礎屬性，所有產品都有。
2. HC X（人與內容的交互體驗）
HC X 是指用戶在消費內容時，內容本身帶給用戶的主觀感受。
這里的內容，既包括衣服、鞋子等實體商品，也包括文章、圖片、視頻等虛擬內容。諸如淘寶、網易嚴選等電商產品，以及公眾號、Instagram、抖音等 UGC 產品，都具備 HC X 屬性。
3. HH X（人與人的交互體驗）
HH X 是指用戶與其他用戶、產品工作人員溝通交流時產生的主觀感受，或產品的社區氛圍、溝通氛圍帶給用戶的主觀感受。
所以 HH X 有兩層含義。第一層發生在用戶與用戶之間，是指當用戶扎堆或溝通交流時，交流氛圍、交流內容帶給用戶的主觀感受。第二層發生在用戶與產品工作人員之間，是指當產品依靠人力向用戶提供咨詢、售后、配送等服務時，產品工作人員的服務行為帶給用戶的主觀感受。
關于第一層含義，不管是更強調社區屬性的產品，比如天涯社區、豆瓣小組、百度貼吧，還是更強調內容屬性的產品，比如公眾號、微博、小紅書的筆記，都具備 HH X 屬性。
關于第二層含義，常見的 HH X 由客服人員提供。如果是電商產品，提供人員還包括快遞員和售后人員等。
4. HB X（人與品牌的交互體驗）
HB X 是指當用戶想起、談論起品牌，或使用品牌的產品、體驗品牌的服務時，品牌帶給用戶的主觀感受。
只要一款產品做成了品牌，它就有 HB X 屬性。
HB X 會直接影響到我們是否信任、喜歡一個品牌，以及是否會使用它的產品和服務。所以，我們對 HB X 往往會有一個抓重點的綜合評價。就像一個外向活潑的女生，雖然在外向程度方面和一個內向安靜的男生不一致，但雙方也可能會選擇在一起，因為內向、外向并非雙方關注的重點。
因為 HB X 牽涉到對品牌的綜合評價，所以就像工作都有一段試用期、戀愛都有一段了解期一樣，HB X 的形成往往也需要較長時間，通常至少要 3~5 年。
02 四維度的價值
每一個維度，各有什么價值？
1. HI X（人與界面的交互體驗）
作為基礎屬性，HI X 的價值主要體現在以下兩方面。
如果是一款只具有 HI X 屬性的工具型產品，比如視頻會議產品 Zoom，那于這款產品而言，HI X 就是一切，這款產品的成敗也幾乎完全取決于 HI X。
如果是一款同時具有 HC X、HH X 屬性的內容型社區型產品，比如 B 站、快手這些視頻類產品，那此時的 HI X 就會扮演一個類似交通出行（基礎設施）的角色。如果 HI X 比較差，這個“出行”過程就會像出去玩時的塞車一樣，讓人難受；如果 HI X 很優秀，這個“出行”過程就會像準點的高鐵、飛機一樣，又快又爽。
2. HC X（人與內容的交互體驗）
HC X 主要從內容層面影響用戶滿意度。
如果 HC X 比較好，用戶消費時的決策時間就會被大大縮減，同時用戶滿意度也會比較高。比如淘寶上就有一些原創設計、質量不錯、價格不貴的精品小店，很受歡迎。我們去網易嚴選、優衣庫天貓旗艦店這些質量不錯、設計不錯、價格適中的店鋪買 東西時，也會很快很省心。
以上說的是電商產品，對于 UGC 類的內容產品，也是類似的道理。比如站酷上的首頁推薦和編輯推薦，相對而言，HC X 比較不錯，所以看這些內容的用戶也會比較多。
3. HH X（人與人的交互體驗）
HH X 是用戶情緒的最大影響因素，在情感方面對用戶具有最大吸引力。物以類聚，人以群分。HH X 良好的產品，會像一場談笑風生、其樂融融的聚會，吸引用戶去扎堆。
良好的 HH X 往往意味著良好的氛圍，它不僅能帶給我們諸如輕松、愉快等積極情緒，還能在一定程度上帶給我們一種歸屬感。最終的結果，就是我們喜歡用這款產品。比如 B 站的 HH X 就比較好，具體而言就是彈幕氛圍比較歡樂友好，這樣的氛圍帶給用戶的感覺是比較好的，用戶也喜歡在 B 站就著彈幕看視頻。
4. HB X（人與品牌的交互體驗）
HB X 事關品牌能不能以正面形象住進用戶心里。
良好的 HB X，往往意味著良好的品牌美譽度和忠誠度。HB X 良好的產品，就像你信任和喜歡的男/女朋友一樣，他/她會在你心里占據一定的分量和地位，讓你樂意介紹給家人和朋友認識。比如蘋果的 Mac，就有很高的品牌美譽度和忠誠度，用戶也很樂意把 Mac 推薦給身邊的朋友。
03 四維度的關系
四維度之間存在怎樣的關系?
1. HI X 是另外三個維度的基礎
HI X 作為基本維度，相當于“水之源，木之本”。如果把用戶體驗四維度比作一個金字塔的話，塔底的基石一定是 HI X，塔尖則是 HB X。
2. HC X 通常是 HH X 的基礎
HH X 的產生，通常離不開 HC X。也就是說，通常得有一個合適的“內容”或“主題”，才能把人聚攏過來。比如結婚的時候，你可以邀請到很多親朋好友來參加婚禮，但在平時，你很難邀請到這么多人。我們在 B 站看視頻的時候，彈幕通常比較歡樂友好，氛圍不錯，但如果沒有這些視頻，也就不會有這些彈幕，以及不錯的社區氛圍。
3. HI X、HC X 和 HH X 共同構成了 HB X 的基礎
HC X、HH X 和 HI X 一樣，都可以成就 HB X。
以早期 Keep 為例，剛開始只有課程這個功能，也就是說只有 HI X 和 HC X 這兩個屬性。其中，HI X 還可以，HC X 比較優秀。在此基礎上，慢慢發展出了社區功能（HH X 屬性），而且做得不錯。再往后，有了“自律給我自由”的品牌精神。在課程、社區、品牌精神等因素的助力下，Keep 有了不錯的品牌美譽度和忠誠度。也就是說，HC X、HH X 和品牌精神等因素，一起成就了良好的 HB X。
4. HB X 也可以僅有 HI X 這一個基礎
有些產品并不具有 HC X 和 HH X 這兩個屬性，而是僅有 HI X 這一個屬性。單憑一個良好的 HI X，也可以成就良好的 HB X。
比如 Zoom，作為一款開視頻會議的工具應用，它最初只有 HI X 這一個屬性。但是因為很好用，HI X 很優秀，所以如今的 Zoom 即便沒有內容（HC X）和社區（HH X）屬性，依然成了一個在全球都很受歡迎的品牌，擁有了不錯的 HB X。
總的來說，在四維度的金字塔里面，它們的關系如下圖所示。
文章來源：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
目錄
1.百度網盤 ：會員標識
2.當當：搜索記錄隱藏
3.當當：分享動效 ? 一鍵制作朋友圈分享海報
4.抖音：點擊復制 ID
5.飛書：效率工作—語言自動轉化
6.美團：優惠卷新到提示
7.墨跡天氣：一鍵登錄（大部分應用已上線該功能，部分應用仍未上線）
8.起點讀書：長按可進行互動
9.騰訊視頻：亮度調節的動效設計
10.微博：點贊動效設計
11.知乎：刪除搜索記錄
12. QQ：可隱藏會話
13. QQ 音樂：搜索入口的聽歌識曲
14. QQ 閱讀：長按復制的放大設計
在開通會員后百度網盤會進行對于應用圖標的更換，使得應用圖標更加高級，在分享鏈接時也會加入會員分享的標識。
屬于用戶激勵體系中的一個板塊，增強用戶的標識和身份。
搜索隱藏功能設定。
我們在使用各大應該的搜索功能時總會遇到過這樣的場景，當你要某人或者在某種場景下需要進行搜索時，來不及刪除自己的搜索記錄出現社死的情況。
而當當的搜索隱藏就可以完美的解決這個問題，退一步講我們可以思考一下為什么別的成熟型應用，沒有采用這樣的方式。大部分是沒有這個功能，其余則是在搜索這一個功能上已經添加了其余用戶體驗的設計。所以在這一塊就沒法加入這個設計。
在當當應用中點擊分享進入頁面后不同于傳統的分享頁面，而是把分享到微信和分享到朋友圈進行了動態設計。并且在分享到朋友圈的右上角加上了海報的標識。我們點擊會自動跳轉生成海報。
這樣的設計可以更加吸引用戶的眼球并且自動生成海報可以激發用戶在朋友圈轉發的次數。
主頁 ID 點擊可進行復制 很多應用都有 ID 。但是當我們要進行 ID 搜索的時候，我們便需要一遍一遍的反復查看或者記住這個 ID 然后再進行搜索。
目前部分的應用也上線了類似的功能,讓用戶點擊 ID 區域可進行復制。對于用戶體驗的提升有著很顯著的效果。
飛書屬于一款協同辦公類的應用
在飛書的設置用有語音直接轉換文字的說明，飛書本身便是一款協同辦公類的產品。此產品效率便是產品關鍵詞之一，所以加入這樣的設置可極大的提升用戶的體驗。
有提示用戶新到多少張優惠卷的提示
可以促進用戶消費的同時能幫助和提醒用戶去使用消費卷不僅提高了商家的銷量還使得用戶在消費中發現自己的優惠卷及時使用
一鍵登錄
應用登陸中目前主流為（1.第三方登錄，登陸之后需要再次綁定手機號。2.手機號注冊登陸，登陸之后可選擇是否綁定第三方。3.一鍵登錄，登陸之后可以選擇是否綁定第三方）在設計流程中，設計開發者需要盡可能的減少對流程的復雜化。
一鍵登錄在為看來是最喜歡的一種登陸方式。導致現在如果需要各種注冊綁定，除非必要的情況下，我會直接放棄這款應用。
長按頁面可以框選當前的段落，并且出現互動選項。
增加用戶和用戶之間，用戶和作者之間的互動。使得用戶在讀書的同時有著較強的參與感。
滑動可調節亮度
左邊的小動效的設計加上右邊的漸變進度條，使用戶可以更加明確的知道自己所處于一個什么樣的觀看環境，并且加入了漸隱漸現的出場和入場。
用一個小巧的動效設計幫助用戶確定自己的亮度屬性，
點擊點贊會出現彩色的波浪并且不斷擴散的同時有小表情彈出。
增加趣味性和互動性。
清空時會在進行確認，再次點擊全部刪除方可刪除。
在下方列表中可逐一刪除，上面清空中不是點擊后就全部清空。而是再次出現，起強調和確認的作用。
增加用戶體驗，幫助用戶進行二次確認和防止用戶誤觸。作為一款咨訊類應用用戶的搜索記錄也是比較重要的。
前幾天發現的一個神級功能（雖然我已經不用 QQ 進行社交了），當時我外甥和我講述了這個功能他么00后戲稱為養魚神器。
在好友的設置中可隱藏會話，開啟隱藏會話以后。此聯系人發來的消息不會顯示在聯系人列表。需要自己手動去設置隱藏會話列表去尋找。
應用的功能更加多樣化滿足多種不同的需求。
在搜索入口加入了聽歌識曲且進入界面后可進行聽歌識曲和哼唱識別的切換
搜索歌曲界面的使用場景為：1.用戶得知該歌曲的名稱或者歌詞進行搜索。2.用戶聽到了某一首很好聽的歌曲想進行搜索。此時在場景二的情況下，正好可以進行聽歌識曲。聽歌識曲此功能在比較舊的版本屬于主頁中的一個模塊，把聽歌識曲放到搜索入口處更加符合用戶場景。
對用戶場景進行細致的研究，增加了用戶體驗。
長按復制會有放大鏡設計
當用戶處于復制文案的場景下時，由于復制需要拖動，在拖動的過程中會按壓住自己所處于的復制內容位置。所以在用戶進行復制時加入放大鏡的設計會使得用戶清楚的明白自己復制到哪里，不需要后續用戶在進行刪減。
極大的加強了此場景下的用戶體驗
文章來源：站酷 作者：張陽光Designer
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
GUI（Graphical UserInterface）圖形界面，市面上最常見的交互方式。點觸，滑動，作為主要輸入方式。圖像顯示作為主要輸出方式。
VUI（Voice User Interface）語音界面，常見沒有屏幕的智能音箱/耳機，靠語言輸入和交流，如我們常見的小艾同學，天貓精靈等。
1973年第一個可視化操作的Alto電腦在施樂帕洛阿爾托研究中心（Xerox PARC）完成。Alto是第一個把計算機所有元素結合到一起的圖形界面操作系統。它使用3鍵鼠標、位運算顯示器、圖形窗口、以太網絡連接。
1981年施樂公司推出了Alto的繼承者Star，Alto曾首次使用了窗口設計。
1983年蘋果電腦公司推出Apple Lisa個人電腦，是全球第一款搭載圖形用戶界面（GUI）的個人電腦。
1984年蘋果電腦公司推出Macintosh。
1986年首款用于Unix的窗口系統X Window System發布。
1988年IBM發布OS/2 1.10標準版演示管理器（Presentation Manager），這是第一種支持Intel計算機的穩定的圖形界面。
1992年微軟公司發布Windows 3.1，增加了多媒體支持。
1995年微軟的Windows 95發布，其窗口操作系統的外觀基本定型。
1996年微軟發布Microsoft Bob，此軟件具有動畫助手和有趣的圖片。
1996年IBM發布OS/2 Warp 4，它的交互界面得到顯著改善，至今仍有不少ATM機運行這樣的系統。
1997年KDE和GNOME兩大開源桌面項目啟動。
1997年蘋果電腦公司發布Mac OS 8，這個系統具有三維外觀并提供了SpringLoaded Folder功能。
2000年蘋果電腦公司推出Mac OS X系統的默認外觀Aqua。
2001年微軟發布Windows XP，實現了主題支持。
2003年Mac OS X v10.3提供了一鍵單擊訪問任何已打開窗口的功能。
2003年Sun公司的Java桌面系統為GNOME桌面添加了和Mac類似的效果。
2006年微軟發布Windows Vista，對此前其視窗操作系統的外觀作了較大的修改，實現了Aero功能。
20世紀90年代，誕生了第一個可行的、非特定的（每個人都可以對他說話）的語音識別系統，交互式語音應答（Interactive Voice Response，IVR）系統的出現代表了VUI的第一個重要時期。人通過電話線路進行交互并執行任務，如機票預訂、銀行轉帳、業務查詢等。
目前很多像siri、Google這類集成了視覺和語音信息的APP，以及Amazon Echo這類純語音的設計產品，逐步發展并成為主流。隨著語音識別技術、AI技術、互聯網技術的發展，我們已經可以在手機設備中用語音處理很多事情，但還有很多事情目前無法通過語音完成，需要我們探索。
交互的多樣性：
不同于PC機通過鼠標來點擊，在觸控設備上通過手指點按，由于手指的精確度相對于鼠標指針差很多，所以子啊移動頁面設計當中的交互元素一定得辨識作用，手機并沒有懸停操作所以圖標如果特征不明顯時一定要加文字識別，設計時也應注意圖標和菜單元素的尺寸。
拖拽和移動是很相似的交互工作，被拖拽的元素始終跟隨著緊貼屏幕的指尖
除了使用單指之外，還可以用兩個手指放大，縮小圖片，如果設計了一些新的多指交互一定要給用戶提示和指導。
智能家居
在智能家居領域VUI應用越來越廣泛，相信在不久的將來我們一定能夠享受到更多的VUI所帶給我們的便利。
輔助駕駛
車載語音交互系統使得我們可以在開車的同時接聽電話、聽廣播等。
企業應用
未來大型企業中將會多領域應用VUI，用于書寫、記錄等工作。
醫療教育
智能記錄病例、管理病例的出入。
過多的聲音干擾，不但會增加用戶的心智負擔，將會引起用戶感到厭煩，尤其是，語音在資訊的負荷量上又比單純的聲音來的更多，考量是否存在存在的必要性就放在格外重要。而言，可以尋找替代的方式，透過震動和燈光甚至狀態變化來提示，減少使用者的認知負荷，并確保聲音只會在特定的時間點出現，并提供使用者自行設定關閉聲音的功能
除了聲音本身的設計外，還要考慮整體環境的影響因素，可能周遭受非常的吵雜。換句話說，在KTV的包廂，吵雜的環境，會使用者無法聽到消防警鈴響，而容易造成危險事件的產生。也因為如此，消防警鈴的聲音頻率設計就應該介于2kM到4kM，因為研究指出人類的耳朵對于這個范圍的聲音最敏感
從音量的角度來看，耳朵對不同頻率的音量有不同的感知程度，有些聲音聽起來很響亮，有些則是很沉悶因人而異，但比較客觀的量化體驗指標就是分貝（decibel，dB） ，在尺度上超過70分貝以上，會讓人產生憂慮不安，并引發各種癥狀，因此要盡量避免尺寸大小過大的設計， ，，降低主動的侵入性?；谶@些因素總和來說，還要考量到用戶和產品間的距離，與產品愈近，對于體積的需求量較大，反之為然
在聲音體驗設計（Amber Case，2018）一書指出，當警告或提示音出現的頻率愈高，就應該設計成愈短，但不足就是，如果把聲音設計成短而急促，從而使用者需要集中相反地，事件發生時間間隔長且久，則聲音提示更需要明顯且激烈的聲音來提醒用戶，例如手機鈴聲響時，需要告知用戶
文章來源：站酷 作者：張陽光Designer
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
先舉個例子來理解一下：我要點擊手機上的確認按鈕所需要的時間，和 手與按鈕的距離（D） 按鈕的大小（S）有關。 當距離越長，所需要的時間越長。當按鈕越大，所需要的時間越短。
這里是說合理的大小。一般來講越大用戶越容易到達，但是屏幕的大小是一定的，某一按鈕/目標越大就會降低其他按鈕/目標的大小。所以大小是相對制衡的，要根據具體情景和需求制定合理的大小（包括肉眼大小和實際熱區大?。５顷P于手指點擊的最小熱區有規定是44x44px，一般的圖形的熱區大小都要高于這個大小，才能便于點擊。其他大小要根據功能需求進行制定。
相對距離指的是界面內部各個元素與控件之間的距離。一般通過研究 整個流程 的交互動作，相互關聯的操作元素/操作手勢 距離會相對比較近，這樣能有效減少操作的時間。
屏幕邊界是可以確定的（鼠標向某一方向一直移動終會停留在屏幕邊界），但是屏幕中央確是較難確定的（四個方向鼠標均能延展出去）。一些重要和主要的操作放在屏幕的邊界，可以方便用戶快速到達，也是菲茨定律的普遍應用。
業務目標有時候是與用戶目的是相違背的，也需要根據具體場景來判斷菲茨定律的使用走向。在特殊情境下也會通過距離和自身大小來反向增加使用時間來完成目的。
選擇增加也就意味著事情可以發展的方向更加多元化，用戶就需要權衡事情該往哪個方向發展，而這就需要時間。不要讓你的用戶思考太多，所以一般給出的選項在滿足需求的情況下要盡可能的少。（這里注意：一般情況下要少但也不能太少，強迫用戶也是不可取。）
事情越復雜，越難處理。盡可能的將復雜的事件通過交互或者版式等手段進行簡化，讓用戶覺得容易把握，而不是大量事物/流程/元素的堆砌。
同一類型或者同一層級的元素出現，數目一般控制在5-9個。
面對有大量信息的時候（數字/文字/段落）將其分割到5-9個等大腦容易記住的數量。
看到了有一些設計并沒有按照米勒定律去執行，因為隨著時代的發展，有一些定律并不是萬能適用的。定律不可照搬，要根據具體情境去做取舍，以最終效果為導向。
在面臨很多復雜功能時，簡單的堆砌顯得啰嗦，需求又不能隨意刪減。這時候就可以將相類似的功能放在同一個組別里面進行收納整理，這與席克定律也相接近。
這里與視覺設計也有很多重疊，即落實到頁面的高保真的細節。保證內容想接近的元素間距要小，內容有區分的間距要大。
事物的復雜性是固定，但是要思考你所面對的是最簡程度的復雜性么。首先優化內部系統的整個流程和不必要的步驟能夠有效降低系統本身的復雜性。
再把復雜性降低到最低程度之后，事物/流程仍然表現出一定復雜性時。就要考慮造成復雜的元素是什么，是否要將造成復雜的元素進行收納組合，甚至隱藏。
想清楚這張界面的主要目的是什么，順著這個目標去引導用戶，其他元素的視覺層級要讓步，來讓用戶抓住重點。
少代表流程/步驟/界面元素的減少，多意味著用戶量的增加 體驗感的增強。
產品在功能迭代改版上，會出現大量不同的聲音和方向。但功能不是越多越好，用戶的時間是確定的，在某一功能上消耗的時間長，在其他功能上就短了。奧卡姆剃刀就要求我們找到主功能點，其他功能點要做出讓步妥協甚至砍掉。
有一些功能在你操作之前就禁止操作，避免了錯誤的發生?；蛘咄ㄟ^告知操作之后會產生的不良后果
在操作過程中，進行錯誤提醒，有效避免錯誤的進行
用戶在使用app的過程進入錯誤的路線，需要給用戶彌補的機會
倒計時會給人一種緊促感，逼迫用戶去注意，無形之中給用戶規定了任務，這個任務也就是咋們的業務目標。倒計時 讀條等交互方式也應該謹慎恰當使用，因為不是每一個任務場景都需要給用戶緊迫感。
這一點也是利用未完成任務的相關信息反饋達到讓用戶去完成任務的業務目的。
創新意味著改變，改變的不僅僅是你的界面還有用戶習慣和長久以來的認知模型。破壞習慣重建習慣是有很大風險的。
其實能看到很多Dribble頁面很有特點，也不是完全沒有落地性，但是實際國內產品并沒有看到這樣的設計，原因就是不符合雅各布定律。
這一點好像和上一點有點相悖。但是其實也不違背，有很多分寸的拿捏往往不是理論能完全決定的。微信后來居上絕不是因為照搬qq，如果新的創新帶來的優勢能夠彌補不相同所帶來的不足，也是可以嘗試的。
文章來源：站酷 作者：花城丶
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
保持好奇，巧妙融合，追求卓越，自然而然
文章來源：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn