首頁

132022-4

UI設(shè)計(jì)師交互設(shè)計(jì)-知識(shí)圖譜的信息可視化設(shè)計(jì)方法

知識(shí)圖譜作為語義網(wǎng)絡(luò)，其技術(shù)算法研究被廣泛應(yīng)用在人工智能和大數(shù)據(jù)等領(lǐng)域。通常，知識(shí)圖譜的運(yùn)轉(zhuǎn)過程是由數(shù)據(jù)模型完成，用戶可見的只是計(jì)算后的結(jié)果，其數(shù)據(jù)的可視化也僅停留在對(duì)結(jié)果的可讀性展示上。但其實(shí)，圖譜之間的關(guān)系、數(shù)據(jù)計(jì)算的過程，也具備分析價(jià)值和潛在的機(jī)會(huì)信息。將知識(shí)圖譜轉(zhuǎn)化為可視化信息圖，能幫助用戶更好的理解和利用數(shù)據(jù)及其關(guān)系，但對(duì)于沒有技術(shù)背景的界面設(shè)計(jì)師來講，從技術(shù)架構(gòu)、計(jì)算函數(shù)等技術(shù)視角去理解知識(shí)圖譜概念和應(yīng)用相對(duì)困難。本文分享一種設(shè)計(jì)思路，幫助大家在實(shí)際工作中，完成知識(shí)圖譜向可視化交互界面的轉(zhuǎn)化。

評(píng)論(0) 瀏覽(2900)

132022-4

UI設(shè)計(jì)師交互設(shè)計(jì)-注重產(chǎn)品細(xì)節(jié)的使用體驗(yàn)

周周

前言

在使用產(chǎn)品的過程中，你是否看到了一些有趣的細(xì)節(jié)，而這些細(xì)節(jié)提升了你的使用體驗(yàn)？這些產(chǎn)品細(xì)節(jié)，便是產(chǎn)品設(shè)計(jì)師需要留意的，因?yàn)檫@些產(chǎn)品細(xì)節(jié)在某種程度上提升了用戶的留存與轉(zhuǎn)化。本文我就對(duì)一些產(chǎn)品細(xì)節(jié)進(jìn)行了拆解，一起來看一下。

一.【夸克瀏覽器】節(jié)日彩蛋-特定場景下輸入關(guān)鍵詞觸發(fā)彩蛋效果

二.【酷狗音樂】播放Tab-多交互操作，應(yīng)對(duì)多場景使用

三.【騰訊新聞】左滑熱點(diǎn)榜單-用戶關(guān)注的熱點(diǎn)放在路徑短的位置

四.【荔枝博客】品牌傳播-產(chǎn)品情感漏出，與用戶產(chǎn)生共鳴

五.【百度網(wǎng)盤】自定義倍數(shù)-給用戶更多可控操作，精細(xì)化觀影感受

六.【網(wǎng)易云音樂】情感彩蛋-給你夢幻的魔法，帶你重拾記憶

七.【即刻】頭像彩蛋-趣味互動(dòng)回彈，把喜歡強(qiáng)烈表現(xiàn)出來

八.【荔枝】錄聲音-輕擬物動(dòng)態(tài)圖，使用中的及時(shí)反饋

九.【微博】點(diǎn)贊反饋-情緒最大化宣泄，盡情釋放情緒

十.【36氪】隱藏的浮窗-深挖用戶操作，快切與停頓的奧秘

一、【夸克瀏覽器】節(jié)日彩蛋-特定場景下輸入關(guān)鍵詞觸發(fā)彩蛋效果

1. 使用場景

在圣誕節(jié)日來臨之際，用戶使用搜索引擎輸入關(guān)鍵詞的頻率會(huì)增加，在此增加彩蛋給用戶營造節(jié)日氛圍

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：增加關(guān)鍵詞趣味彩蛋雨，提高產(chǎn)品趣味體驗(yàn)，提高用戶搜索頻次。

設(shè)計(jì)方案：在節(jié)日來臨前，用戶通過搜索節(jié)日特定關(guān)鍵詞，會(huì)在搜索結(jié)果頁中以彩蛋雨的形式墜落下來，圖案貼合節(jié)日物品，給用戶營造出節(jié)日氛圍，給予用戶節(jié)日的浪漫。用戶在使用時(shí)并不是一個(gè)冰冷的產(chǎn)品，而是有情感共鳴有情緒的產(chǎn)品。

二、【酷狗音樂】播放Tab-多交互操作，應(yīng)對(duì)多場景使用

1. 使用場景

想要提高屏效，一屏顯示更多內(nèi)容。在瀏覽操作時(shí)會(huì)因?yàn)楣δ馨粹o外漏造成誤操作情況。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升屏幕顯示內(nèi)容面積，給予TAB播放更多交互形式，增加趣味性提升產(chǎn)品記憶點(diǎn)。

設(shè)計(jì)方案：在TAB播放中給予「長按」「雙擊」兩種交互操作，長按中包含雙擊的播放暫停，因?yàn)榇瞬僮?，使用率較高，提供多入口能有效提高易用性。長按時(shí)，激活更多常用功能，包含移動(dòng)進(jìn)度條、收藏、下一首等操作，配合特有的交互展示形式，給用戶形成產(chǎn)品記憶點(diǎn)，同時(shí)在瀏覽不同頻道時(shí)，功能的隱藏大大降低誤操作以及視覺干擾的情況。

三、【騰訊新聞】左滑熱點(diǎn)榜單-用戶關(guān)注的熱點(diǎn)放在路徑短的位置

1. 使用場景

如今的新聞產(chǎn)品都提供熱點(diǎn)時(shí)事新聞，給用戶提供更多豐富內(nèi)容聚集。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提高用戶使用率，不影響主框架的情況下給用戶最短路徑查看熱點(diǎn)新聞的入口，提高用戶瀏覽時(shí)長。

設(shè)計(jì)方案：首屏以及導(dǎo)航模塊更多還是以新聞資訊等內(nèi)容為主，關(guān)注熱點(diǎn)更多是娛樂熱門等內(nèi)容，瀏覽率都高的情況下，把熱點(diǎn)模塊放到左滑頁面中，在不影響首頁框架情況下，增加新的板塊，給用戶更多瀏覽選擇，豐富產(chǎn)品多元化內(nèi)容。

四、【荔枝博客】品牌傳播-產(chǎn)品情感漏出，與用戶產(chǎn)生共鳴

1. 使用場景

如今的產(chǎn)品趨于同質(zhì)化，由原來只注重功能轉(zhuǎn)變?yōu)楫a(chǎn)品情感表達(dá)，給用戶產(chǎn)生情感互動(dòng)，從功能付費(fèi)變?yōu)榍楦袃r(jià)值觀付費(fèi)。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：傳播產(chǎn)品價(jià)值觀，給予用戶引導(dǎo)，產(chǎn)生產(chǎn)品正向記憶，從而提高粘性。

設(shè)計(jì)方案：上幾期產(chǎn)品分析中有說到頂部logo外漏的設(shè)計(jì)描述，有的植入隱藏功能，有的表示刷新功能等，歸根結(jié)底都是給予靜態(tài)標(biāo)志功能屬性，提高屏幕利用率同時(shí)提升用戶探索欲望。

荔枝博客本身產(chǎn)品內(nèi)容相對(duì)聚焦，想要做出差異化就要往品牌情感入手，當(dāng)用戶點(diǎn)擊左上角「荔枝博客」標(biāo)志時(shí)，會(huì)彈出產(chǎn)品的由來以及做博客的初衷，讓用戶思考產(chǎn)品深層意思時(shí)無形中把產(chǎn)品植入到用戶記憶中，給用戶情感綁定，提升用戶使用粘性。

五、【百度網(wǎng)盤】自定義倍數(shù)-給用戶更多可控操作，精細(xì)化觀影感受

1. 使用場景

市場上的視頻倍速參差不齊，0.25、0.5、1倍三種遞增邏輯，用戶在觀影時(shí)會(huì)存在沒有想要選擇著倍速，只能使用平臺(tái)提供的選擇使用，操作受限制。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：解決倍速不是用戶想要的，提供自定義倍速，給用戶更多可操作性，提升觀影感受。

設(shè)計(jì)方案：在百度網(wǎng)盤中觀看視頻時(shí)，點(diǎn)擊調(diào)節(jié)倍速在提供默認(rèn)常規(guī)5種倍速下提供自定義倍速，以0.1的速度逐漸遞增，用戶可以在0.5-3倍之間任意選擇，根據(jù)視頻類型、觀影習(xí)慣選擇合適的速度，同時(shí)把市面上不同倍速問題給用戶造成的觀影困擾也同步解決，提高視頻觀影體驗(yàn)。

六、【網(wǎng)易云音樂】情感彩蛋-給你夢幻的魔法，帶你重拾記憶

1. 使用場景

音樂無國界，每首音樂背后都有一段很長的故事，在我聽哈利波特主題曲時(shí)，瀏覽評(píng)論發(fā)現(xiàn)特定特定位置點(diǎn)擊會(huì)有彩蛋，嘗試了一下果然如此。網(wǎng)易云音樂評(píng)論區(qū)的強(qiáng)大之處展示之一。獨(dú)有的彩蛋。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升評(píng)論活躍度，強(qiáng)化廣告的表現(xiàn)形式，增加用戶對(duì)產(chǎn)品的探索欲望提高使用粘性。

設(shè)計(jì)方案：哈利波特音樂中，在評(píng)論區(qū)第九和第十條中間分割線處，點(diǎn)擊兩下！觸發(fā)魔法視頻，把用戶帶入情境之中，勾起滿滿的回憶，配合音樂聲音，真可謂視覺聽覺雙重享受。

對(duì)于開發(fā)來說，只需要在特定歌曲評(píng)論中寫一個(gè)位置判定以及觸發(fā)條件，當(dāng)用戶觸發(fā)條件后，播放特定視頻，觸發(fā) 用戶情感共識(shí)，提升使用粘性。同時(shí)如果做為廣告植入也是比較好的呈現(xiàn)方式，但要注意視頻質(zhì)量，盡量弱化廣告中的產(chǎn)品，可以把品牌情感揉入視頻中與用戶產(chǎn)生情感關(guān)聯(lián)。

七、【即刻】頭像彩蛋-趣味互動(dòng)回彈，把喜歡強(qiáng)烈表現(xiàn)出來

1. 使用場景

在看關(guān)注人主頁時(shí)，想要強(qiáng)烈的表達(dá)出情感給予對(duì)方，釋放自己心中的喜歡時(shí)如何表現(xiàn)出來。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升趣味玩法，增強(qiáng)用戶操作感受，豐富產(chǎn)品玩法體驗(yàn)，提升使用粘性。

設(shè)計(jì)方案：在個(gè)人主頁，通過拖拽用戶頭像放手回彈，頭像以拉距來彈射回原有位置并且迸發(fā)出愛心動(dòng)畫，讓用戶產(chǎn)生更貼近的情感傳達(dá)，反復(fù)操作達(dá)到一定數(shù)量會(huì)有文字提醒，文案的趣味描述也讓彩帶功能增加了一份趣味。

八、【荔枝】錄聲音-輕擬物動(dòng)態(tài)圖，使用中的及時(shí)反饋

1. 使用場景

在使用錄音功能時(shí)，單純靠進(jìn)度條記憶靜態(tài)按鈕顯示很難產(chǎn)生強(qiáng)提醒，除非做大做突出，荔枝在錄音中是如何表現(xiàn)的。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：解決錄音功能頁面元素單一用戶進(jìn)行中與暫停感知淺的問題，結(jié)合動(dòng)態(tài)插圖給用戶及時(shí)反饋，同時(shí)貼合線下使用場景，給用戶注入產(chǎn)品記憶點(diǎn)。

設(shè)計(jì)方案：在我的-進(jìn)入錄聲音模塊中，頭圖展示一個(gè)錄音磁帶機(jī)，當(dāng)開啟錄音功能時(shí)，磁帶機(jī)會(huì)進(jìn)行旋轉(zhuǎn)播放，左慢右快的展示形式符合真實(shí)機(jī)器的運(yùn)動(dòng)規(guī)律，給用戶強(qiáng)提醒告知用戶此時(shí)正在錄音中，當(dāng)暫停時(shí)，磁帶機(jī)及時(shí)停止，和按鈕形成觸發(fā)綁定，提高產(chǎn)品使用體驗(yàn)。

九、【微博】點(diǎn)贊反饋-情緒最大化宣泄，盡情釋放情緒

1. 使用場景

單一的贊有時(shí)無法滿足用戶的愛意，用戶希望更強(qiáng)烈的表達(dá)情感，來滿足自己反饋欲。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：提升贊的強(qiáng)烈感知，釋放用戶內(nèi)在情緒，提高產(chǎn)品趣味體驗(yàn)，從而增加使用粘性。

設(shè)計(jì)方案：在微博單條動(dòng)態(tài)頁面中，對(duì)“贊”進(jìn)行點(diǎn)擊一次操作是普通點(diǎn)贊反饋；長按觸發(fā)連贊機(jī)制，會(huì)帶來多彩多圖標(biāo)的更強(qiáng)的視覺感受，帶來強(qiáng)烈的情感反饋，讓用戶盡情的釋放情緒，得到內(nèi)在解壓。

十、【36氪】隱藏的浮窗-深挖用戶操作，快切與停頓的奧秘

1. 使用場景

新聞資訊產(chǎn)品，文章之間來回切換閱讀，時(shí)有發(fā)生，或者手頭有事忙完再回過頭看。

2. 設(shè)計(jì)思考

設(shè)計(jì)目標(biāo)：解決閱讀中斷導(dǎo)致回看路徑長，影響閱讀效率的問題。

設(shè)計(jì)方案：瀏覽文章時(shí)，屏幕側(cè)邊從左向右劃動(dòng)是返回上一級(jí)的交互手勢，當(dāng)用戶在滑動(dòng)中停留一下就會(huì)激活浮窗功能，隨著手勢操作移動(dòng)到黑圈內(nèi)顏色會(huì)顯示藍(lán)色，表示移入成功，這時(shí)放手返回首頁，右下角會(huì)顯示一個(gè)圓形浮窗，可快速查看浮窗內(nèi)的文章。

值得學(xué)習(xí)的是，左滑浮窗圖形隨著手勢上下位置進(jìn)行移動(dòng)，路徑更短更快的進(jìn)行操作，提高用戶使用體驗(yàn)。因?yàn)殡[藏式的交互有一定學(xué)習(xí)成本，產(chǎn)品充分考慮到這點(diǎn)，在文章右上角更多按鈕中放置加入浮窗功能，兩個(gè)激活入口，兼容新老用戶使用，提高產(chǎn)品易用性。

十一、結(jié)語

設(shè)計(jì)師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺，還有好的體驗(yàn)流程。不要讓用戶思考，這是每個(gè)設(shè)計(jì)師所追求的。認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。

文章來源：站酷作者：碳水sir

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(2001)

132022-4

UI設(shè)計(jì)師交互設(shè)計(jì)-教你在UX輕松創(chuàng)建文案

周周

在了解了人物性格語氣的重要性以及在大廠中的應(yīng)用場景之后，大家一定很關(guān)心，要如何在自己的業(yè)務(wù)中從0開始創(chuàng)建文案的人物性格語氣呢？下面會(huì)結(jié)合在酷家樂云設(shè)計(jì)工具的實(shí)踐，針對(duì)這部分內(nèi)容做詳細(xì)介紹?？峒覙吩圃O(shè)計(jì)工具主要是針對(duì)內(nèi)裝設(shè)計(jì)師的設(shè)計(jì)工具。整個(gè)過程大致分為 5 個(gè)階段：資料研究、小組研討、確定人物性格關(guān)鍵詞、豐富人物性格、繪制畫像。

<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__25" 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_darkmode26" 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;">性格描述的詞匯里，我們進(jìn)一步聚合細(xì)分，總共歸為 3 類。靈活友好、隨和的、善解人意為一類，理性為一類，直接坦率為一類。非性格描述的詞匯里，我們主要看這些描述是否和前面的性格相關(guān)聯(lián)，是否出現(xiàn)一些詞匯，是前面的性格類詞匯涵蓋不了的，進(jìn)而對(duì)性格類詞匯進(jìn)行一個(gè)校準(zhǔn)。比如，專業(yè)、品質(zhì)化、值得信賴等描述主要表示我們的產(chǎn)品是專業(yè)資深，有一定有話語權(quán)，這和性格描述的理性關(guān)聯(lián)性很大。我們認(rèn)為一個(gè)靠譜的、沉穩(wěn)的、理性的人，他的能力一定是足夠?qū)I(yè)，表現(xiàn)出的特質(zhì)一定是自信的，值得大家信賴，有一定權(quán)威性的。再比如，我們認(rèn)為崇尚科技、科技感的東西在某種程度上和理性、冷靜這種氣質(zhì)是相吻合的。依此類推，經(jīng)過所有的分析后，我們發(fā)現(xiàn)性格描述下的3類詞匯基本和非性格描述下的詞匯是相關(guān)聯(lián)的，滿足這3類性格的人物是符合公司和品牌整體調(diào)性的。所以這3類性格將作為我們?nèi)宋镄愿竦目紤]范圍。最后我們將每一類性格進(jìn)行一個(gè)關(guān)鍵詞的總結(jié)，得出了善解人意、理性、直率三個(gè)關(guān)鍵詞。

<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_darkmode__29" 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 FOUR「豐富人物性格」

<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_darkmode31" 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;">-細(xì)化性格關(guān)鍵詞，讓人物更好理解

<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_darkmode32" 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;">基于每種性格，為了更好的理解，我們詳細(xì)描述這個(gè)人物是什么樣的，不是什么樣的，并給到一些例子描述。

<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__33" 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_darkmode34" 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;">善解人意

能夠理解用戶當(dāng)下的心理狀態(tài)，知道別人的需求是什么，然后說相應(yīng)的話
能夠理解用戶的困難，并幫助他們克服
懂得聆聽用戶，給到用戶反饋渠道，關(guān)心用戶的反饋
提供新的或更好的方法，幫助用戶實(shí)現(xiàn)目標(biāo)

                                    <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:&quot;">
                                        <br />
                                    </p>

置身事外，只是客觀的描述事實(shí)，沒有體諒用戶的心情
給人以壓迫感或距離感

                                        <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:&quot;">
                                            <br />
                                        </p>

發(fā)生問題時(shí)，應(yīng)告訴用戶可行的解決方案，或產(chǎn)品為用戶做了哪些挽救措施
從用戶視角描述價(jià)值
多給用戶支持和鼓勵(lì)，不要命令、強(qiáng)迫用戶，不要責(zé)怪用戶
使用貼近用戶的用語，不使用過于專業(yè)、用戶難以理解的表述，也盡量不創(chuàng)造新的概念或詞匯

能夠聚焦關(guān)鍵信息，精煉表達(dá)
能夠控制情緒，克制表達(dá)
邏輯清晰，表達(dá)嚴(yán)謹(jǐn)，前后一致

                                    <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:&quot;">
                                        <br />
                                    </p>

說話沒有重點(diǎn)，所有細(xì)節(jié)都面面俱到
采用情感化的表達(dá)方式強(qiáng)調(diào)或放大情緒

                                        <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:&quot;">
                                            <br />
                                        </p>

提供幫助用戶實(shí)現(xiàn)目標(biāo)的關(guān)鍵信息，不用把前因后果都解釋一遍
慎用“啦”、“哦”、“吧”、“嗎”等矯飾的語氣詞，以及“！”、“？”等語氣標(biāo)點(diǎn)
不說“可能”、“不確定”、“也許”這類似是而非的詞，也不能說過于絕對(duì)的話，會(huì)影響嚴(yán)謹(jǐn)性

不卑不亢，平等地和用戶對(duì)話
表達(dá)簡單清晰，不繞彎子
追求效率，為用戶提供解決問題的最短路徑

                                    <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:&quot;">
                                        <br />
                                    </p>

過度的關(guān)懷和討好
過于官方，沒有提供有效幫助
掩蓋問題

                                        <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:&quot;">
                                            <br />
                                        </p>

說話平等直接，避免用”您“這類詞，而是用你、我來進(jìn)行對(duì)話
在出現(xiàn)問題時(shí)，及時(shí)通知用戶，無需遮遮掩掩
在用戶遇到問題時(shí)，坦誠客觀描述事實(shí)，無需過多表達(dá)歉意

                                    <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:&quot;">
                                        <br />
                                    </p>

                                                <p style="margin-top:0px;margin-bottom:0px;white-space:normal;caret-color:#282828;color:#666666;font-family:&quot;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:&quot;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:&quot;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.yvirxh.cn/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">藍(lán)藍(lán)設(shè)計(jì)</a>(&nbsp;<a href="http://www.yvirxh.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.yvirxh.cn&nbsp;</a>)是一家專注而深入的<a href="http://www.yvirxh.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;">界面設(shè)計(jì)公司</a>，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、<a href="http://www.yvirxh.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界面設(shè)計(jì)&nbsp;</a>、&nbsp;<a href="http://www.yvirxh.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界面設(shè)計(jì)&nbsp;</a>、&nbsp;<a href="http://www.yvirxh.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界面設(shè)計(jì)</a><a href="http://www.yvirxh.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;">&nbsp;</a>、&nbsp;<a href="http://www.yvirxh.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;">包裝設(shè)計(jì)&nbsp;</a>、&nbsp;<a href="http://www.yvirxh.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;">圖標(biāo)定制&nbsp;</a>、&nbsp;<a href="http://www.yvirxh.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;">用戶體驗(yàn) 、交互設(shè)計(jì)、&nbsp;</a><a href="http://www.yvirxh.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;">網(wǎng)站建設(shè)</a><a href="http://www.yvirxh.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;">&nbsp;</a>、<a href="http://www.yvirxh.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;">平面設(shè)計(jì)服務(wù)</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:&quot;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 />

評(píng)論(0) 瀏覽(2054)

122022-4

交互設(shè)計(jì)中排行榜設(shè)計(jì)詳解

博博

排行榜設(shè)計(jì)有幾種展示方式？排行榜入口引導(dǎo)怎么做？視覺表現(xiàn)有那些？看這一篇，帶你全面了解排行榜的背后思考及做法！

“今天吃什么??？”

“不知道啊，看看大眾點(diǎn)評(píng)，哪家店比較靠前”

“一會(huì)去看什么電影？”

“我看豆瓣上，這部片子評(píng)分特別高，我們?nèi)タ催@個(gè)吧”

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

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

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

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

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

選擇性排行榜在備選集建立完成后，利用沉錨效應(yīng)在用戶心理建立潛意識(shí)的目標(biāo)參照，幫助用戶完成擇優(yōu)決策，降低用戶的選擇成本。（另一方面平臺(tái)在幫助用戶降低選擇成本的同時(shí)，也影響著用戶的最終選擇，在接下來的平臺(tái)側(cè)方面會(huì)有詳細(xì)的分析）。

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

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

在馬斯洛需求中，當(dāng)個(gè)人的生理需求和安全需求被滿足時(shí)，與他人建立情感聯(lián)系或關(guān)系成為人們最強(qiáng)烈的需求，即社交需求。社交又分為：為達(dá)到某種目的產(chǎn)生的功利社交或?yàn)楂@得情感連接及體驗(yàn)的共情社交需求。例如：QQ音樂新增的撲通社區(qū)、微博的明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對(duì)于共情社交的需求。

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

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

3.分享類排行榜-自我確認(rèn)需求

過年期間各家app紛紛都推出了自己的用戶年度報(bào)告總結(jié)榜，不知道你有沒有參與到其中，并把這些報(bào)告的截圖分享到自己的朋友圈！在我們的日常生活中也會(huì)在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序，人們對(duì)于這類活動(dòng)的空前熱情其實(shí)是因?yàn)槿祟惓诵枰畔⒌拇_認(rèn)外，還需要清楚自身在大數(shù)據(jù)下的自我確認(rèn)，通過各種各樣自我測試類榜單，判斷自身的能力、情緒、價(jià)值等等，來達(dá)到自我認(rèn)同，否則就會(huì)感到焦慮不安。

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

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

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

對(duì)于用戶來說排行榜是為了滿足用戶對(duì)于數(shù)據(jù)參數(shù)、社交信息、自我個(gè)人的確定性，選擇成本是品牌經(jīng)濟(jì)學(xué)的核心，而用戶對(duì)于排行的信任首先要建立在平臺(tái)品牌的權(quán)威性下的結(jié)果。

1.平臺(tái)權(quán)威性—用戶側(cè)

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

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

2.平臺(tái)權(quán)威性—平臺(tái)側(cè)

影響用戶的決策方向

平臺(tái)權(quán)威性對(duì)用戶來說意味著說服力和影響力，在減輕用戶的決策壓力的同時(shí)，也影響著用戶做出平臺(tái)所需的決策方向；

平臺(tái)自帶話題性

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

輸出口優(yōu)化

排行榜作為內(nèi)容輸出口，在平臺(tái)權(quán)威性的背書下，產(chǎn)品優(yōu)化自身的價(jià)值，而平臺(tái)也可以通過排行榜優(yōu)化自身平臺(tái)價(jià)值。

平臺(tái)盈利

平臺(tái)權(quán)威性下，可以通過多種方式達(dá)到盈利，比如蘋果app store應(yīng)用商店內(nèi)的付費(fèi)應(yīng)用，百度的鳳巢系統(tǒng)、微博熱搜的第3、4位排名等。

3.平臺(tái)權(quán)威性—廣告告知

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

上榜主體作為整個(gè)排行榜的內(nèi)容中心，由于排行榜自帶的競爭機(jī)制、篩選機(jī)制，使得上榜用戶會(huì)很樂于分享出去，比如游戲類應(yīng)用王者榮耀的勝利者排位、微信運(yùn)動(dòng)排行榜。

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

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

排行榜資源的建立

排行榜設(shè)計(jì)要達(dá)到用戶攀比的效果，很重要的充分條件就是相同需求的好友基數(shù)足夠大，這樣才能構(gòu)成排行榜設(shè)計(jì)成功的必要條件。

同系同門資源導(dǎo)流

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

自建用戶體系

不斷推送已關(guān)注好友的信息流，當(dāng)通訊錄好友開始使用頭條都要發(fā)送系統(tǒng)推送。比如全年年低火爆全網(wǎng)的cloubhouse就是利用的熟人社交，你要先有這個(gè)人聯(lián)系方式才能要求好友，關(guān)注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等，不斷社區(qū)建設(shè)推送動(dòng)態(tài)信息流和好友卡片推薦。

偽造

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

面對(duì)不同的用戶人群及使用場景排行榜的入口表現(xiàn)形式也會(huì)千變?nèi)f化，根據(jù)表現(xiàn)形式大體可分為“顯性排行榜”和“隱形排行榜”。

在界面有明顯的榜單名稱、排序、評(píng)判規(guī)則、上榜主體、賣點(diǎn)信息等。排序和內(nèi)容主體是這個(gè)排行榜的基本構(gòu)成，其他則根據(jù)不同產(chǎn)品類型及產(chǎn)品需求決定是否展示。

1.頁面tab

在首頁底部或頂部tab形式出現(xiàn)，多出現(xiàn)在以UGC或文字信息為核心的產(chǎn)品，以內(nèi)容信息為主，常見以信息熱度為主要功能的資訊、新聞?lì)悜?yīng)用。比如：知乎、今日頭條、36氪。

知乎熱榜內(nèi)容完全展開；36氪分為話題榜、人氣榜，話題榜僅展示前5條，人氣榜展示10條，僅在前5條有名次圖標(biāo)，在36氪熱榜的中部還會(huì)出現(xiàn)收藏榜，綜合榜。

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

2.圖標(biāo)入口

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

其中豆瓣、網(wǎng)易云音樂由于各種類型的排行榜很多，在圖標(biāo)點(diǎn)擊開后，在當(dāng)前頁面平鋪不同維度榜單類型，用戶進(jìn)行點(diǎn)擊跳轉(zhuǎn)；騰訊動(dòng)漫相對(duì)榜單類型較少，在左邊側(cè)邊欄切換不同的榜單。

3.商品詳情頁榜單入口

用戶查看商品詳情時(shí)，可能會(huì)希望能夠橫向?qū)Ρ韧惿唐罚拍茏罱K決定購買那件商品。常見于電商類應(yīng)用，比如：京東、拼多多、得物等。點(diǎn)擊后進(jìn)入不同的榜單頁面，獲取更多產(chǎn)品信息進(jìn)行篩選。（淘寶的商品詳情頁沒有排行榜，但在首頁卻存在隱形排行榜，在隱形排行榜模塊會(huì)有詳細(xì)說明）。

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

當(dāng)用戶沒有明確搜索目的時(shí)，搜索框的下方，平臺(tái)會(huì)推薦沒有明確指向性但有熱度的產(chǎn)品信息。衡量的標(biāo)準(zhǔn)一般為搜索熱度或信息本身的熱度。利用榜單效應(yīng)留住用戶，比如：微博熱搜、淘寶熱賣、抖音熱榜等。

沒有明顯排名及規(guī)則，但經(jīng)過大數(shù)據(jù)、平臺(tái)或榜單制作者篩選后呈現(xiàn)在平臺(tái)用戶的面前，位置越靠前，在用戶心目中的默認(rèn)位置越靠前，比如淘寶的“有好貨”、編輯精選等。

1.編輯推薦/小編推薦

在平臺(tái)建立初期沒有特別的內(nèi)容供平臺(tái)呈現(xiàn)，這時(shí)候就需要平臺(tái)人工有目的的推薦一些內(nèi)容，不同于“猜你喜歡”建立在用戶的行為數(shù)據(jù)下，編輯推薦更多的平臺(tái)希望用戶看到的內(nèi)容，一方面作為平臺(tái)內(nèi)容的輸出口引導(dǎo)用戶，另一方面內(nèi)容是平臺(tái)自己發(fā)布內(nèi)容，也可以保證內(nèi)容的高質(zhì)量。

2.猜你喜歡/相關(guān)推薦

平臺(tái)根據(jù)用戶之前的瀏覽量、收藏量、轉(zhuǎn)發(fā)、搜索等用戶行為數(shù)據(jù)推薦給用戶相關(guān)內(nèi)容。這個(gè)時(shí)候的應(yīng)用基本已度過最初的獲客期，并且存在大量的平臺(tái)用戶使用數(shù)據(jù)，“猜你喜歡或相關(guān)推薦”模塊用來增加用戶的瀏覽時(shí)長及購買的可能性，各大應(yīng)用平臺(tái)適用性強(qiáng)，一般出現(xiàn)在首頁部分。

3.年度總結(jié)排行榜

朋友圈每年年底都會(huì)曬出的各種各樣的生活、音樂、消費(fèi)的排行榜，這些其實(shí)是用戶自己確定了解自己，且喜歡他人了解自己的一種方式。用戶通過網(wǎng)絡(luò)數(shù)據(jù)折射出自我的輪廓，清楚的認(rèn)識(shí)自己。

4.TOP排行榜

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

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

相比其他排行榜，篩選后的內(nèi)容已經(jīng)體現(xiàn)了用戶的具體需求，高效明確的給用戶提供選項(xiàng)，引導(dǎo)用戶快速選擇。

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

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

1.唯一性榜單頭部

當(dāng)排行榜在整個(gè)應(yīng)用中有且只有一個(gè)時(shí)，通常會(huì)對(duì)榜單頭部的背景及榜單名稱進(jìn)行個(gè)性化、品牌化設(shè)計(jì)。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點(diǎn)評(píng)的大眾點(diǎn)評(píng)榜單等。其中微博、頭條、大眾點(diǎn)評(píng)都在名稱上有做品牌漏出，增加平臺(tái)的品牌權(quán)威性。

2.可復(fù)用性榜單頭部

有些應(yīng)用平臺(tái)會(huì)存在內(nèi)容需要多種不同緯度的排行榜展示的情況，為了平臺(tái)的統(tǒng)一性、降低后期的維護(hù)成本，一般會(huì)使用可復(fù)用的榜單頭部，如豆瓣、京東、QQ音樂等。

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

排行榜上榜主體由于不同的場景業(yè)務(wù)需求，一般有純文字形式、圖文結(jié)合形式、橫排+列表結(jié)構(gòu)3種表現(xiàn)形式，其中主體信息及排序為排行榜必須信息，而推薦理由、排名變化、熱度信息、評(píng)分等等非必須信息則根據(jù)用戶關(guān)注信息點(diǎn)選擇漏出。

1.純文字形式

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

2.圖文結(jié)合形式

相對(duì)于純文字形式，圖文結(jié)合的排行榜因?yàn)閳D片信息的增加，使整個(gè)榜單主體占居更多的空間也可以展示更多的產(chǎn)品信息，輔助用戶進(jìn)行選擇。

圖片形式

上榜主體圖片尺寸一般會(huì)有橫版、方版、豎版3種形式。頭條、知乎等資訊類應(yīng)用都采用傳統(tǒng)的橫版圖片形式，延續(xù)了用戶閱讀新聞?lì)愘Y訊的習(xí)慣；而豆瓣、騰訊動(dòng)漫等由于現(xiàn)實(shí)中書籍封面、電影海報(bào)等用戶視覺場景都是豎版構(gòu)圖，因此沿用至線上使用的也是豎版圖片形式；而京東、大眾點(diǎn)評(píng)、馬蜂窩則使用方版的圖片形式，大概是因?yàn)楫a(chǎn)品的多樣性需要考慮多種圖片的適配問題。（視頻、游戲類由于使用場景大部分采用橫版圖片形式；但由于游戲封面、宣傳海報(bào)也會(huì)有豎版的形式，比如：游民星空、小黑盒）。

左文右圖VS左圖右文

每當(dāng)設(shè)計(jì)圖文結(jié)合的部分，首先要考慮到底是采用左圖右文還是左文右圖的形式呢？可能很多人會(huì)說這兩種形式?jīng)]有什么大的區(qū)別啊，有什么可糾結(jié)的！或者認(rèn)為由于視頻、圖片、文字對(duì)人類的吸引力是呈遞減形式的，因此應(yīng)該選擇左圖右文的形式。但實(shí)際上這跟我們長久以來的閱讀習(xí)慣以及應(yīng)用希望觸達(dá)的用戶類型有很大的關(guān)系。

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

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

3.橫排+列表表現(xiàn)形式

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

榜單規(guī)則是排行榜規(guī)則的描述，是平臺(tái)權(quán)威性的體現(xiàn)。榜單規(guī)則有些平臺(tái)本身具有數(shù)據(jù)庫，會(huì)有相關(guān)的平臺(tái)數(shù)據(jù)支持如京東；而汽車之家則依靠“汽車工業(yè)協(xié)會(huì)”外部的數(shù)據(jù)支持，增加平臺(tái)的權(quán)威性及榜單的可信度；

信息更新一般存在在榜單頭部和上榜主體的中間，有些是固定時(shí)間更新，也有類似微博熱搜是實(shí)時(shí)更新的模式，而騰訊動(dòng)漫的更新作為用戶的痛點(diǎn)會(huì)在延續(xù)企鵝形象的側(cè)邊欄頭部標(biāo)明榜單更新周期。

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

資料來源：

社交的本質(zhì)
社會(huì)心理學(xué)對(duì)用戶體驗(yàn)的影響系列：權(quán)威性原則
3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
交互分析：排行榜應(yīng)該如何設(shè)計(jì)？
如何利用好排行榜產(chǎn)生榜單效應(yīng)？
萬字長文深度分析：產(chǎn)品排行榜的設(shè)計(jì)和玩法
關(guān)于排行榜的設(shè)計(jì)，這有一份7000字干貨手把手教你做！
淘寶“有好貨”競品分析：淘寶為何要把排行榜藏起來？
我們曬網(wǎng)易、支付寶年度榜單，其實(shí)只是在曬自己？

評(píng)論(0) 瀏覽(4633)

082022-4

UI設(shè)計(jì)師交互設(shè)計(jì)-如何寫好產(chǎn)品體驗(yàn)文檔

周周

文章將分為6部分

1、撰寫文檔的目的

2、什么樣的產(chǎn)品值得體驗(yàn)

3、產(chǎn)品體驗(yàn)類型

4、產(chǎn)品體驗(yàn)文檔應(yīng)該包含的內(nèi)容

5、文檔質(zhì)量的評(píng)判標(biāo)準(zhǔn)

6、體驗(yàn)文檔和競品文檔的異同

一、撰寫目的

首先要理清楚，我們?yōu)槭裁匆獙懏a(chǎn)品體驗(yàn)文檔， 是工作需要？還是興趣使然？

明確寫作目的才不會(huì)迷失方向，不知道自己在寫什么，應(yīng)該寫什么。

其次，要 明確文檔的受眾是誰。

好的文檔，是寫別人想看的內(nèi)容，你要明白受眾想要看什么內(nèi)容。

二、什么樣的產(chǎn)品值得體驗(yàn)

1、與你工作相關(guān)的

如果你是做平臺(tái)型電商，那么淘寶、京東這些你就得去體驗(yàn)體驗(yàn)。

2、上熱搜、應(yīng)用商店登榜

例如之前大火的啫喱，一度在APP Store的熱度超過微信、抖音，作為產(chǎn)品經(jīng)理就很有必要下載體驗(yàn)一番，琢磨一下它爆火的原因，提升自己的產(chǎn)品感覺。

3、新穎的商業(yè)模式

例如之前QQ音樂，在聽歌過程中給用戶插入廣告播放，雖然極度惡心，但確實(shí)是一個(gè)比較新穎的商業(yè)模式。。。

4、新穎的交互模式

例如現(xiàn)在有很多APP的開屏廣告，直接使用手機(jī)的重力感應(yīng)器，用戶稍微搖動(dòng)手機(jī)就會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的廣告頁，不需要用戶去點(diǎn)擊。

雖然我覺得這種交互方式挺惡心的，但在不同的場景下，其實(shí)也有可借鑒之處。

5、新穎的解決方案

例如之前房產(chǎn)平臺(tái)推出的3D實(shí)景看房，用新的方式更好地滿足，用戶想直觀了解房屋布局的需求。

三、產(chǎn)品體驗(yàn)類型

1、深度體驗(yàn)

特點(diǎn)： 多角度、深挖產(chǎn)品細(xì)節(jié)。

這意味著，我們需要投入大量的時(shí)間和精力，持續(xù)做很多案頭工作。

哪些產(chǎn)品適合我們?nèi)プ錾疃润w驗(yàn)?zāi)兀?nbsp;

個(gè)人建議是：經(jīng)久不衰、行業(yè)TOP 10、與你工作比較相關(guān)的產(chǎn)品。

全面體驗(yàn)這些產(chǎn)品，可以在很多方面帶給我們靈感。

例如從0到1它是怎么做出來的？1到100的推廣它是怎么完成的？100到正無窮的行業(yè)壁壘它是怎么形成的？......

相信我，花一段時(shí)間去持續(xù)研究這些產(chǎn)品，一定收獲滿滿。

2、快速體驗(yàn)

「快餐式」體驗(yàn)，特點(diǎn)： 短平快。

當(dāng)我們想了解一些產(chǎn)品有趣的表現(xiàn)層、交互層設(shè)計(jì)時(shí)，就可以用這種方式，花個(gè)1-2小時(shí)把玩，記錄你覺得特有意思的點(diǎn)。

四、文檔應(yīng)該包含的內(nèi)容

接下來，阿G將通過分析「善診」這款A(yù)PP，和大家分享一下，好的產(chǎn)品體驗(yàn)文檔應(yīng)該包含的7部分內(nèi)容。

注意： 我們不是為了寫文檔而寫文檔。

1、體驗(yàn)環(huán)境

1）產(chǎn)品信息，通常會(huì)包含

產(chǎn)品名稱

產(chǎn)品logo
產(chǎn)品版本

2）體驗(yàn)信息，通常會(huì)包含

體驗(yàn)人
體驗(yàn)?zāi)康?nbsp;

體驗(yàn)時(shí)間

3）系統(tǒng)信息，通常會(huì)包含

體驗(yàn)系統(tǒng)
體驗(yàn)設(shè)備

撰寫體驗(yàn)環(huán)境的 3個(gè)注意事項(xiàng)：

1、產(chǎn)品版本

不同環(huán)境，版本可能不一樣，導(dǎo)致功能、界面等差異。

例如善診，截止文章發(fā)出前，蘋果最新的版本是2.7.0，小米最新的版本是2.6.0，華為最新版本是2.6.9，所以寫的時(shí)候最好備注一下。

2、體驗(yàn)時(shí)間

可以是持續(xù)一段時(shí)間，特別是深度體驗(yàn)時(shí)。

3、寫體驗(yàn)環(huán)境的目的

為了讓讀者（包括自己）清楚了解所體驗(yàn)產(chǎn)品的基礎(chǔ)信息，方便（日后）翻閱。

特別是體驗(yàn)?zāi)康模?nbsp;要 很清晰地讓讀者知道， 為什么要體驗(yàn)這款產(chǎn)品，體驗(yàn)這款產(chǎn)品能收獲什么。

2、產(chǎn)品概述

1）產(chǎn)品類型

寫清楚產(chǎn)品的類型和形態(tài)，例如善診是一個(gè)中老年健康醫(yī)療服務(wù)平臺(tái)，專注在移動(dòng)端。

2）Slogan

一個(gè)產(chǎn)品向外界傳遞的產(chǎn)品理念，例如「父母健康找善診」。

3）產(chǎn)品介紹

通過體驗(yàn)產(chǎn)品和查閱公司/產(chǎn)品的資料，為讀者提煉產(chǎn)品特點(diǎn)，介紹產(chǎn)品的主要用途。

4）產(chǎn)品歷程

按時(shí)間線，介紹產(chǎn)品一些重大事件。

以上信息獲取渠道：

1、公司官網(wǎng)（特別是B端產(chǎn)品，官網(wǎng)會(huì)給你安排得明明白白）

2、應(yīng)用商城相關(guān)的產(chǎn)品介紹（注意靈活使用搜索引擎，哈哈）

3、用戶分析

1）用戶畫像

一般會(huì)從人口學(xué)、社會(huì)學(xué)角度，放一些用戶的年齡分布、地域分布、學(xué)歷、性別占比等數(shù)據(jù)。

具體還是要以體驗(yàn)的產(chǎn)品類型、所處行業(yè)為準(zhǔn)，把需要呈現(xiàn)給讀者的重點(diǎn)信息放出來就好，不用貪多。

2）用戶需求

3）使用場景

通過行業(yè)信息、產(chǎn)品功能、用戶畫像，結(jié)合自己的思考，提煉重點(diǎn)用戶需求和使用場景。

很多時(shí)候，我們不熟悉體驗(yàn)產(chǎn)品所處的行業(yè)，不要緊，可以猜，然后通過和他人交流、查閱資料，修正內(nèi)容。

以上信息獲取渠道：

1、用戶畫像：百度指數(shù)、頭條指數(shù)，或者行業(yè)報(bào)告

2、需求和場景：行業(yè)報(bào)告 + 體驗(yàn)產(chǎn)品（當(dāng)然如果你身處于行業(yè)之中，就可以依據(jù)經(jīng)驗(yàn)來做一些總結(jié)）

4、商業(yè)模式

1）模式概述

詳細(xì)描述一下公司/產(chǎn)品的變現(xiàn)方式，最好可以圖文 + 數(shù)據(jù)。

2）模式優(yōu)勢

每一個(gè)產(chǎn)品能活下來，都有能夠形成閉環(huán)、具備一定優(yōu)勢的商業(yè)模式。利用搜索引擎查閱相關(guān)資料，再加上對(duì)產(chǎn)品的體驗(yàn)思考，剖析、學(xué)習(xí)其商業(yè)模式，有助于培養(yǎng)我們的商業(yè)嗅覺。

以上信息獲取渠道：

行業(yè)報(bào)告 + 新聞報(bào)道

做產(chǎn)品，可不僅僅是為了情懷，首先你要考慮的是，如何活下去。

5、市場表現(xiàn)

1）市場/用戶規(guī)模

產(chǎn)品在所處市場的占比，或者用戶規(guī)模，可以側(cè)面驗(yàn)證它是不是一個(gè)好產(chǎn)品。

這里的「好」不僅是用戶體驗(yàn)好，更是真正解決了一些行業(yè)/用戶的需求。

2）融資情況

資本是最敏感的，一個(gè)產(chǎn)品有沒有前景，融資情況會(huì)很坦白地告訴你，哈哈。

以上信息獲取渠道：

1、市場/用戶規(guī)模

上市公司，可以看一下財(cái)報(bào)，里面真的啥都有......
非上市公司，那只能去官網(wǎng)瞅瞅，或者通過搜索引擎，看看對(duì)應(yīng)的小道新聞或者行業(yè)報(bào)告

2、融資情況：企查查

6、運(yùn)營體系

1）版本迭代

為什么要看產(chǎn)品的版本迭代？

任何產(chǎn)品的迭代，都是基于內(nèi)外部環(huán)境變化引起的策略調(diào)整，我們可以通過觀察某個(gè)產(chǎn)品的迭代情況，培養(yǎng)我們對(duì)市場環(huán)境變化的敏銳度。

同時(shí)可以通過歷史版本迭代，思考產(chǎn)品的迭代邏輯和規(guī)律，看看是否有可借鑒之處。

2）增長轉(zhuǎn)化策略

結(jié)合時(shí)間線和版本迭代記錄，思考體驗(yàn)產(chǎn)品的運(yùn)營策略是如何完成其用戶/銷量的增長轉(zhuǎn)化。

以上信息獲取渠道：

版本迭代：七麥數(shù)據(jù)、App Annie（付費(fèi)）

7、功能體驗(yàn)

1）核心流程圖

通過把玩產(chǎn)品，梳理出最核心的業(yè)務(wù)流程圖。

2）信息架構(gòu)圖

信息架構(gòu)圖，簡而言之就是把產(chǎn)品主要對(duì)象的屬性列出來，與頁面、交互都無關(guān)。（后面可以再單獨(dú)出一篇和大家聊聊信息架構(gòu)圖應(yīng)該怎么畫）

3）特色功能

可以找一些你覺得最有意思，最特別的功能，并做簡單介紹。

4）產(chǎn)品建議

在體驗(yàn)產(chǎn)品過程中，覺得哪些地方可以改進(jìn)，具體說一下問題點(diǎn)，分析問題點(diǎn)可能產(chǎn)生原因，再提出有效的改進(jìn)建議。

8、總結(jié)反思

對(duì)比自身

思考一下體驗(yàn)產(chǎn)品上某個(gè)亮點(diǎn)，如何能和自己負(fù)責(zé)的產(chǎn)品進(jìn)行有效結(jié)合，站在巨人的肩膀上看世界。

上面說的7部分內(nèi)容，是不是每次寫體驗(yàn)文檔的時(shí)候，都應(yīng)該有？

當(dāng)然不是，我們應(yīng)該根據(jù)體驗(yàn)?zāi)康?、體驗(yàn)類型、產(chǎn)品類型，適當(dāng)?shù)刈鲆恍┎眉簟?nbsp;

五、文檔質(zhì)量的評(píng)判標(biāo)準(zhǔn)

圍繞著體驗(yàn)?zāi)康暮妥x者感受，可以把產(chǎn)品體驗(yàn)文檔的質(zhì)量評(píng)判標(biāo)準(zhǔn)做一個(gè)總結(jié)。

1、通用（兩種體驗(yàn)類型都應(yīng)該有）

1）體現(xiàn)產(chǎn)品核心價(jià)值

2）抓住產(chǎn)品重點(diǎn)

3）體現(xiàn)產(chǎn)品特色

4）結(jié)構(gòu)清晰

5）格式美觀

6）思考總結(jié)

2、深度體驗(yàn)可以有

1）詳細(xì)數(shù)據(jù)支持

2）商業(yè)模式分析

六、體驗(yàn)報(bào)告和競品報(bào)告的異同

很多小伙伴會(huì)把產(chǎn)品體驗(yàn)報(bào)告和競品分析報(bào)告搞混：都是對(duì)產(chǎn)品進(jìn)行體驗(yàn)和分析，除了名字之外，到底有啥區(qū)別？

我們從「異同」兩個(gè)方面來分析，看看它們究竟有啥區(qū)別。

1、異

1）目的不同

競品分析文檔是對(duì)競品做分析，常用SWOT模型，將自己和競品做對(duì)比分析，學(xué)習(xí)借鑒。而產(chǎn)品體驗(yàn)，不一定是競品，可能只是你個(gè)人感興趣而已。

2）范圍不同

競品分析文檔，一般僅限于輸出競品的思考總結(jié)，而產(chǎn)品體驗(yàn)的范圍更廣。

3）深度不同

產(chǎn)品體驗(yàn)可以淺嘗輒止，但競品分析不行，競品分析需要透過現(xiàn)象看到本質(zhì)，觀察競品的一舉一動(dòng)，配合市場動(dòng)態(tài)，不斷調(diào)整我們自身產(chǎn)品方向，甚至是公司戰(zhàn)略定位。

2、同

產(chǎn)品分析報(bào)告和競品分析報(bào)告，除了都是對(duì)產(chǎn)品進(jìn)行分析之外，還有一個(gè)共同點(diǎn)：我們要 做自己。

不管體驗(yàn)的產(chǎn)品多厲害，不管競品多無敵，我們都是抱著學(xué)習(xí)、借鑒的心態(tài)去分析，去思考問題。

每個(gè)團(tuán)隊(duì)、每個(gè)產(chǎn)品誕生的環(huán)境都不盡相同，縱然其他產(chǎn)品做的再好，我們也不能「全盤皆抄」，要時(shí)刻保持初心，做自己。

好了，產(chǎn)品體驗(yàn)文檔如何撰寫，阿G就先聊到這里。

其實(shí)產(chǎn)品體驗(yàn)的整個(gè)過程，最重要是以下幾點(diǎn)思考：

1、如果你是這個(gè)產(chǎn)品的產(chǎn)品經(jīng)理，你會(huì)用什么方案去解決重點(diǎn)用戶的需求？

2、你的方案和現(xiàn)在產(chǎn)品方案的差異點(diǎn)在哪里？

3、為什么會(huì)有這些差異點(diǎn)？

4、方案對(duì)比的優(yōu)缺點(diǎn)各有哪些？

不管是C端還是B端，不斷思考這幾個(gè)問題，相信慢慢就提升自己的產(chǎn)品Sense。

多體驗(yàn)、多思考、做自己、少糾結(jié)模板

文章來源：站酷作者：阿G聊產(chǎn)品

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

評(píng)論(0) 瀏覽(1797)

052022-4

淺析用戶體驗(yàn)四維度

純純

用戶體驗(yàn)四維度的概念、價(jià)值以及相互之間的關(guān)系

用戶體驗(yàn)，是用戶在使用產(chǎn)品過程中建立起來的一種純主觀感受。

解讀用戶體驗(yàn)，可以有很多視角。本文提供一個(gè)以人為本的視角：用戶體驗(yàn)四維度。具體如下。

HI X：Human Interface Experience，人與界面的交互體驗(yàn)。

HC X：Human Content Experience，人與內(nèi)容的交互體驗(yàn)。

HH X：Human Human Experience，人與人的交互體驗(yàn)。

HB X：Human Brand Experience，人與品牌的交互體驗(yàn)。

用戶體驗(yàn)四維度

01 四維度的概念

怎樣判斷一款產(chǎn)品有幾個(gè)維度？這就要從四維度的概念說起。

1. HI X（人與界面的交互體驗(yàn)）

HI X 是指用戶在瀏覽、閱讀、操作界面過程中產(chǎn)生的主觀感受。

HI X 既受信息架構(gòu)、交互設(shè)計(jì)和UI設(shè)計(jì)的影響，也受根需求和功能架構(gòu)的影響。主要依托手機(jī)和電腦的互聯(lián)網(wǎng)產(chǎn)品，天然存在界面。所以，HI X 屬于基礎(chǔ)屬性，所有產(chǎn)品都有。

2. HC X（人與內(nèi)容的交互體驗(yàn)）

HC X 是指用戶在消費(fèi)內(nèi)容時(shí)，內(nèi)容本身帶給用戶的主觀感受。

這里的內(nèi)容，既包括衣服、鞋子等實(shí)體商品，也包括文章、圖片、視頻等虛擬內(nèi)容。諸如淘寶、網(wǎng)易嚴(yán)選等電商產(chǎn)品，以及公眾號(hào)、Instagram、抖音等 UGC 產(chǎn)品，都具備 HC X 屬性。

3. HH X（人與人的交互體驗(yàn)）

HH X 是指用戶與其他用戶、產(chǎn)品工作人員溝通交流時(shí)產(chǎn)生的主觀感受，或產(chǎn)品的社區(qū)氛圍、溝通氛圍帶給用戶的主觀感受。

所以 HH X 有兩層含義。第一層發(fā)生在用戶與用戶之間，是指當(dāng)用戶扎堆或溝通交流時(shí)，交流氛圍、交流內(nèi)容帶給用戶的主觀感受。第二層發(fā)生在用戶與產(chǎn)品工作人員之間，是指當(dāng)產(chǎn)品依靠人力向用戶提供咨詢、售后、配送等服務(wù)時(shí)，產(chǎn)品工作人員的服務(wù)行為帶給用戶的主觀感受。

關(guān)于第一層含義，不管是更強(qiáng)調(diào)社區(qū)屬性的產(chǎn)品，比如天涯社區(qū)、豆瓣小組、百度貼吧，還是更強(qiáng)調(diào)內(nèi)容屬性的產(chǎn)品，比如公眾號(hào)、微博、小紅書的筆記，都具備 HH X 屬性。

關(guān)于第二層含義，常見的 HH X 由客服人員提供。如果是電商產(chǎn)品，提供人員還包括快遞員和售后人員等。

4. HB X（人與品牌的交互體驗(yàn)）

HB X 是指當(dāng)用戶想起、談?wù)撈鹌放?，或使用品牌的產(chǎn)品、體驗(yàn)品牌的服務(wù)時(shí)，品牌帶給用戶的主觀感受。

只要一款產(chǎn)品做成了品牌，它就有 HB X 屬性。

HB X 會(huì)直接影響到我們是否信任、喜歡一個(gè)品牌，以及是否會(huì)使用它的產(chǎn)品和服務(wù)。所以，我們對(duì) HB X 往往會(huì)有一個(gè)抓重點(diǎn)的綜合評(píng)價(jià)。就像一個(gè)外向活潑的女生，雖然在外向程度方面和一個(gè)內(nèi)向安靜的男生不一致，但雙方也可能會(huì)選擇在一起，因?yàn)閮?nèi)向、外向并非雙方關(guān)注的重點(diǎn)。

因?yàn)?HB X 牽涉到對(duì)品牌的綜合評(píng)價(jià)，所以就像工作都有一段試用期、戀愛都有一段了解期一樣，HB X 的形成往往也需要較長時(shí)間，通常至少要 3~5 年。

02 四維度的價(jià)值

每一個(gè)維度，各有什么價(jià)值？

1. HI X（人與界面的交互體驗(yàn)）

作為基礎(chǔ)屬性，HI X 的價(jià)值主要體現(xiàn)在以下兩方面。

如果是一款只具有 HI X 屬性的工具型產(chǎn)品，比如視頻會(huì)議產(chǎn)品 Zoom，那于這款產(chǎn)品而言，HI X 就是一切，這款產(chǎn)品的成敗也幾乎完全取決于 HI X。

如果是一款同時(shí)具有 HC X、HH X 屬性的內(nèi)容型社區(qū)型產(chǎn)品，比如 B 站、快手這些視頻類產(chǎn)品，那此時(shí)的 HI X 就會(huì)扮演一個(gè)類似交通出行（基礎(chǔ)設(shè)施）的角色。如果 HI X 比較差，這個(gè)“出行”過程就會(huì)像出去玩時(shí)的塞車一樣，讓人難受；如果 HI X 很優(yōu)秀，這個(gè)“出行”過程就會(huì)像準(zhǔn)點(diǎn)的高鐵、飛機(jī)一樣，又快又爽。

2. HC X（人與內(nèi)容的交互體驗(yàn)）

HC X 主要從內(nèi)容層面影響用戶滿意度。

如果 HC X 比較好，用戶消費(fèi)時(shí)的決策時(shí)間就會(huì)被大大縮減，同時(shí)用戶滿意度也會(huì)比較高。比如淘寶上就有一些原創(chuàng)設(shè)計(jì)、質(zhì)量不錯(cuò)、價(jià)格不貴的精品小店，很受歡迎。我們?nèi)ゾW(wǎng)易嚴(yán)選、優(yōu)衣庫天貓旗艦店這些質(zhì)量不錯(cuò)、設(shè)計(jì)不錯(cuò)、價(jià)格適中的店鋪買東西時(shí)，也會(huì)很快很省心。

以上說的是電商產(chǎn)品，對(duì)于 UGC 類的內(nèi)容產(chǎn)品，也是類似的道理。比如站酷上的首頁推薦和編輯推薦，相對(duì)而言，HC X 比較不錯(cuò)，所以看這些內(nèi)容的用戶也會(huì)比較多。

3. HH X（人與人的交互體驗(yàn)）

HH X 是用戶情緒的最大影響因素，在情感方面對(duì)用戶具有最大吸引力。物以類聚，人以群分。HH X 良好的產(chǎn)品，會(huì)像一場談笑風(fēng)生、其樂融融的聚會(huì)，吸引用戶去扎堆。

良好的 HH X 往往意味著良好的氛圍，它不僅能帶給我們諸如輕松、愉快等積極情緒，還能在一定程度上帶給我們一種歸屬感。最終的結(jié)果，就是我們喜歡用這款產(chǎn)品。比如 B 站的 HH X 就比較好，具體而言就是彈幕氛圍比較歡樂友好，這樣的氛圍帶給用戶的感覺是比較好的，用戶也喜歡在 B 站就著彈幕看視頻。

4. HB X（人與品牌的交互體驗(yàn)）

HB X 事關(guān)品牌能不能以正面形象住進(jìn)用戶心里。

良好的 HB X，往往意味著良好的品牌美譽(yù)度和忠誠度。HB X 良好的產(chǎn)品，就像你信任和喜歡的男/女朋友一樣，他/她會(huì)在你心里占據(jù)一定的分量和地位，讓你樂意介紹給家人和朋友認(rèn)識(shí)。比如蘋果的 Mac，就有很高的品牌美譽(yù)度和忠誠度，用戶也很樂意把 Mac 推薦給身邊的朋友。

03 四維度的關(guān)系

四維度之間存在怎樣的關(guān)系?

1. HI X 是另外三個(gè)維度的基礎(chǔ)

HI X 作為基本維度，相當(dāng)于“水之源，木之本”。如果把用戶體驗(yàn)四維度比作一個(gè)金字塔的話，塔底的基石一定是 HI X，塔尖則是 HB X。

2. HC X 通常是 HH X 的基礎(chǔ)

HH X 的產(chǎn)生，通常離不開 HC X。也就是說，通常得有一個(gè)合適的“內(nèi)容”或“主題”，才能把人聚攏過來。比如結(jié)婚的時(shí)候，你可以邀請(qǐng)到很多親朋好友來參加婚禮，但在平時(shí)，你很難邀請(qǐng)到這么多人。我們在 B 站看視頻的時(shí)候，彈幕通常比較歡樂友好，氛圍不錯(cuò)，但如果沒有這些視頻，也就不會(huì)有這些彈幕，以及不錯(cuò)的社區(qū)氛圍。

3. HI X、HC X 和 HH X 共同構(gòu)成了 HB X 的基礎(chǔ)

HC X、HH X 和 HI X 一樣，都可以成就 HB X。

以早期 Keep 為例，剛開始只有課程這個(gè)功能，也就是說只有 HI X 和 HC X 這兩個(gè)屬性。其中，HI X 還可以，HC X 比較優(yōu)秀。在此基礎(chǔ)上，慢慢發(fā)展出了社區(qū)功能（HH X 屬性），而且做得不錯(cuò)。再往后，有了“自律給我自由”的品牌精神。在課程、社區(qū)、品牌精神等因素的助力下，Keep 有了不錯(cuò)的品牌美譽(yù)度和忠誠度。也就是說，HC X、HH X 和品牌精神等因素，一起成就了良好的 HB X。

4. HB X 也可以僅有 HI X 這一個(gè)基礎(chǔ)

有些產(chǎn)品并不具有 HC X 和 HH X 這兩個(gè)屬性，而是僅有 HI X 這一個(gè)屬性。單憑一個(gè)良好的 HI X，也可以成就良好的 HB X。

比如 Zoom，作為一款開視頻會(huì)議的工具應(yīng)用，它最初只有 HI X 這一個(gè)屬性。但是因?yàn)楹芎糜茫琀I X 很優(yōu)秀，所以如今的 Zoom 即便沒有內(nèi)容（HC X）和社區(qū)（HH X）屬性，依然成了一個(gè)在全球都很受歡迎的品牌，擁有了不錯(cuò)的 HB X。

總的來說，在四維度的金字塔里面，它們的關(guān)系如下圖所示。

文章來源：站酷作者：SnowDesign

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

評(píng)論(0) 瀏覽(2007)

052022-4

產(chǎn)品用戶體驗(yàn)案例分析

純純

1.百度網(wǎng)盤：會(huì)員標(biāo)識(shí)

2.當(dāng)當(dāng)：搜索記錄隱藏

3.當(dāng)當(dāng)：分享動(dòng)效 ? 一鍵制作朋友圈分享海報(bào)

4.抖音：點(diǎn)擊復(fù)制 ID

5.飛書：效率工作—語言自動(dòng)轉(zhuǎn)化

6.美團(tuán)：優(yōu)惠卷新到提示

7.墨跡天氣：一鍵登錄（大部分應(yīng)用已上線該功能，部分應(yīng)用仍未上線）

8.起點(diǎn)讀書：長按可進(jìn)行互動(dòng)

9.騰訊視頻：亮度調(diào)節(jié)的動(dòng)效設(shè)計(jì)

10.微博：點(diǎn)贊動(dòng)效設(shè)計(jì)

11.知乎：刪除搜索記錄

12. QQ：可隱藏會(huì)話

13. QQ 音樂：搜索入口的聽歌識(shí)曲

14. QQ 閱讀：長按復(fù)制的放大設(shè)計(jì)

一、百度網(wǎng)盤：會(huì)員標(biāo)識(shí)別

在開通會(huì)員后百度網(wǎng)盤會(huì)進(jìn)行對(duì)于應(yīng)用圖標(biāo)的更換，使得應(yīng)用圖標(biāo)更加高級(jí)，在分享鏈接時(shí)也會(huì)加入會(huì)員分享的標(biāo)識(shí)。

屬于用戶激勵(lì)體系中的一個(gè)板塊，增強(qiáng)用戶的標(biāo)識(shí)和身份。

二、當(dāng)當(dāng)搜索記錄隱藏

搜索隱藏功能設(shè)定。

我們在使用各大應(yīng)該的搜索功能時(shí)總會(huì)遇到過這樣的場景，當(dāng)你要某人或者在某種場景下需要進(jìn)行搜索時(shí)，來不及刪除自己的搜索記錄出現(xiàn)社死的情況。

而當(dāng)當(dāng)?shù)乃阉麟[藏就可以完美的解決這個(gè)問題，退一步講我們可以思考一下為什么別的成熟型應(yīng)用，沒有采用這樣的方式。大部分是沒有這個(gè)功能，其余則是在搜索這一個(gè)功能上已經(jīng)添加了其余用戶體驗(yàn)的設(shè)計(jì)。所以在這一塊就沒法加入這個(gè)設(shè)計(jì)。

三、當(dāng)當(dāng)：分享動(dòng)效 ? 一鍵制作朋友圈分享海報(bào)

在當(dāng)當(dāng)應(yīng)用中點(diǎn)擊分享進(jìn)入頁面后不同于傳統(tǒng)的分享頁面，而是把分享到微信和分享到朋友圈進(jìn)行了動(dòng)態(tài)設(shè)計(jì)。并且在分享到朋友圈的右上角加上了海報(bào)的標(biāo)識(shí)。我們點(diǎn)擊會(huì)自動(dòng)跳轉(zhuǎn)生成海報(bào)。

這樣的設(shè)計(jì)可以更加吸引用戶的眼球并且自動(dòng)生成海報(bào)可以激發(fā)用戶在朋友圈轉(zhuǎn)發(fā)的次數(shù)。

動(dòng)效展示

四、抖音：點(diǎn)擊復(fù)制 ID

主頁 ID 點(diǎn)擊可進(jìn)行復(fù)制很多應(yīng)用都有 ID 。但是當(dāng)我們要進(jìn)行 ID 搜索的時(shí)候，我們便需要一遍一遍的反復(fù)查看或者記住這個(gè) ID 然后再進(jìn)行搜索。

目前部分的應(yīng)用也上線了類似的功能,讓用戶點(diǎn)擊 ID 區(qū)域可進(jìn)行復(fù)制。對(duì)于用戶體驗(yàn)的提升有著很顯著的效果。

五、飛書：效率工作語言自動(dòng)轉(zhuǎn)化

飛書屬于一款協(xié)同辦公類的應(yīng)用

在飛書的設(shè)置用有語音直接轉(zhuǎn)換文字的說明，飛書本身便是一款協(xié)同辦公類的產(chǎn)品。此產(chǎn)品效率便是產(chǎn)品關(guān)鍵詞之一，所以加入這樣的設(shè)置可極大的提升用戶的體驗(yàn)。

六、美團(tuán)：優(yōu)惠卷新到提示

有提示用戶新到多少張優(yōu)惠卷的提示

可以促進(jìn)用戶消費(fèi)的同時(shí)能幫助和提醒用戶去使用消費(fèi)卷不僅提高了商家的銷量還使得用戶在消費(fèi)中發(fā)現(xiàn)自己的優(yōu)惠卷及時(shí)使用

七、墨跡天氣：一鍵登錄（大部分應(yīng)用已上線該功能，部分應(yīng)用仍然未上線）

一鍵登錄

應(yīng)用登陸中目前主流為（1.第三方登錄，登陸之后需要再次綁定手機(jī)號(hào)。2.手機(jī)號(hào)注冊登陸，登陸之后可選擇是否綁定第三方。3.一鍵登錄，登陸之后可以選擇是否綁定第三方）在設(shè)計(jì)流程中，設(shè)計(jì)開發(fā)者需要盡可能的減少對(duì)流程的復(fù)雜化。

一鍵登錄在為看來是最喜歡的一種登陸方式。導(dǎo)致現(xiàn)在如果需要各種注冊綁定，除非必要的情況下，我會(huì)直接放棄這款應(yīng)用。

八、起點(diǎn)讀書：長按可以進(jìn)行互動(dòng)

長按頁面可以框選當(dāng)前的段落，并且出現(xiàn)互動(dòng)選項(xiàng)。

增加用戶和用戶之間，用戶和作者之間的互動(dòng)。使得用戶在讀書的同時(shí)有著較強(qiáng)的參與感。

九、騰訊視頻：亮度調(diào)節(jié)的動(dòng)效設(shè)計(jì)

滑動(dòng)可調(diào)節(jié)亮度

左邊的小動(dòng)效的設(shè)計(jì)加上右邊的漸變進(jìn)度條，使用戶可以更加明確的知道自己所處于一個(gè)什么樣的觀看環(huán)境，并且加入了漸隱漸現(xiàn)的出場和入場。

用一個(gè)小巧的動(dòng)效設(shè)計(jì)幫助用戶確定自己的亮度屬性，

動(dòng)效展示

十、微博：點(diǎn)贊動(dòng)效設(shè)計(jì)

點(diǎn)擊點(diǎn)贊會(huì)出現(xiàn)彩色的波浪并且不斷擴(kuò)散的同時(shí)有小表情彈出。

增加趣味性和互動(dòng)性。

動(dòng)效展示

十一、知乎：刪除搜索記錄

清空時(shí)會(huì)在進(jìn)行確認(rèn)，再次點(diǎn)擊全部刪除方可刪除。

在下方列表中可逐一刪除，上面清空中不是點(diǎn)擊后就全部清空。而是再次出現(xiàn)，起強(qiáng)調(diào)和確認(rèn)的作用。

增加用戶體驗(yàn)，幫助用戶進(jìn)行二次確認(rèn)和防止用戶誤觸。作為一款咨訊類應(yīng)用用戶的搜索記錄也是比較重要的。

十二、QQ：可隱藏會(huì)話

前幾天發(fā)現(xiàn)的一個(gè)神級(jí)功能（雖然我已經(jīng)不用 QQ 進(jìn)行社交了），當(dāng)時(shí)我外甥和我講述了這個(gè)功能他么00后戲稱為養(yǎng)魚神器。

在好友的設(shè)置中可隱藏會(huì)話，開啟隱藏會(huì)話以后。此聯(lián)系人發(fā)來的消息不會(huì)顯示在聯(lián)系人列表。需要自己手動(dòng)去設(shè)置隱藏會(huì)話列表去尋找。

應(yīng)用的功能更加多樣化滿足多種不同的需求。

十三、QQ 音樂：搜索入口的聽歌識(shí)曲

在搜索入口加入了聽歌識(shí)曲且進(jìn)入界面后可進(jìn)行聽歌識(shí)曲和哼唱識(shí)別的切換

搜索歌曲界面的使用場景為：1.用戶得知該歌曲的名稱或者歌詞進(jìn)行搜索。2.用戶聽到了某一首很好聽的歌曲想進(jìn)行搜索。此時(shí)在場景二的情況下，正好可以進(jìn)行聽歌識(shí)曲。聽歌識(shí)曲此功能在比較舊的版本屬于主頁中的一個(gè)模塊，把聽歌識(shí)曲放到搜索入口處更加符合用戶場景。

對(duì)用戶場景進(jìn)行細(xì)致的研究，增加了用戶體驗(yàn)。

十四、QQ 閱讀：長按復(fù)制的放大設(shè)計(jì)

長按復(fù)制會(huì)有放大鏡設(shè)計(jì)

當(dāng)用戶處于復(fù)制文案的場景下時(shí)，由于復(fù)制需要拖動(dòng)，在拖動(dòng)的過程中會(huì)按壓住自己所處于的復(fù)制內(nèi)容位置。所以在用戶進(jìn)行復(fù)制時(shí)加入放大鏡的設(shè)計(jì)會(huì)使得用戶清楚的明白自己復(fù)制到哪里，不需要后續(xù)用戶在進(jìn)行刪減。

極大的加強(qiáng)了此場景下的用戶體驗(yàn)

動(dòng)效展示

文章來源：站酷作者：張陽光Designer

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

評(píng)論(0) 瀏覽(3346)

052022-4

交互設(shè)計(jì)之探索GUI和VUI

純純

一、GUI和VUI的定義：

1.1GUI

GUI（Graphical UserInterface）圖形界面，市面上最常見的交互方式。點(diǎn)觸，滑動(dòng)，作為主要輸入方式。圖像顯示作為主要輸出方式。

1.2VUI

VUI（Voice User Interface）語音界面，常見沒有屏幕的智能音箱/耳機(jī)，靠語言輸入和交流，如我們常見的小艾同學(xué)，天貓精靈等。

二、GUI和VUI的發(fā)展歷程：

2.1GUI的發(fā)展歷程

1973年第一個(gè)可視化操作的Alto電腦在施樂帕洛阿爾托研究中心（Xerox PARC）完成。Alto是第一個(gè)把計(jì)算機(jī)所有元素結(jié)合到一起的圖形界面操作系統(tǒng)。它使用3鍵鼠標(biāo)、位運(yùn)算顯示器、圖形窗口、以太網(wǎng)絡(luò)連接。

1981年施樂公司推出了Alto的繼承者Star，Alto曾首次使用了窗口設(shè)計(jì)。

1983年蘋果電腦公司推出Apple Lisa個(gè)人電腦，是全球第一款搭載圖形用戶界面（GUI）的個(gè)人電腦。

1984年蘋果電腦公司推出Macintosh。

1986年首款用于Unix的窗口系統(tǒng)X Window System發(fā)布。

1988年IBM發(fā)布OS/2 1.10標(biāo)準(zhǔn)版演示管理器（Presentation Manager），這是第一種支持Intel計(jì)算機(jī)的穩(wěn)定的圖形界面。

1992年微軟公司發(fā)布Windows 3.1，增加了多媒體支持。

1995年微軟的Windows 95發(fā)布，其窗口操作系統(tǒng)的外觀基本定型。

1996年微軟發(fā)布Microsoft Bob，此軟件具有動(dòng)畫助手和有趣的圖片。

1996年IBM發(fā)布OS/2 Warp 4，它的交互界面得到顯著改善，至今仍有不少ATM機(jī)運(yùn)行這樣的系統(tǒng)。

1997年KDE和GNOME兩大開源桌面項(xiàng)目啟動(dòng)。

1997年蘋果電腦公司發(fā)布Mac OS 8，這個(gè)系統(tǒng)具有三維外觀并提供了SpringLoaded Folder功能。

2000年蘋果電腦公司推出Mac OS X系統(tǒng)的默認(rèn)外觀Aqua。

2001年微軟發(fā)布Windows XP，實(shí)現(xiàn)了主題支持。

2003年Mac OS X v10.3提供了一鍵單擊訪問任何已打開窗口的功能。

2003年Sun公司的Java桌面系統(tǒng)為GNOME桌面添加了和Mac類似的效果。

2006年微軟發(fā)布Windows Vista，對(duì)此前其視窗操作系統(tǒng)的外觀作了較大的修改，實(shí)現(xiàn)了Aero功能。

2.2VUI的發(fā)展歷程

20世紀(jì)90年代，誕生了第一個(gè)可行的、非特定的（每個(gè)人都可以對(duì)他說話）的語音識(shí)別系統(tǒng)，交互式語音應(yīng)答（Interactive Voice Response，IVR）系統(tǒng)的出現(xiàn)代表了VUI的第一個(gè)重要時(shí)期。人通過電話線路進(jìn)行交互并執(zhí)行任務(wù)，如機(jī)票預(yù)訂、銀行轉(zhuǎn)帳、業(yè)務(wù)查詢等。

目前很多像siri、Google這類集成了視覺和語音信息的APP，以及Amazon Echo這類純語音的設(shè)計(jì)產(chǎn)品，逐步發(fā)展并成為主流。隨著語音識(shí)別技術(shù)、AI技術(shù)、互聯(lián)網(wǎng)技術(shù)的發(fā)展，我們已經(jīng)可以在手機(jī)設(shè)備中用語音處理很多事情，但還有很多事情目前無法通過語音完成，需要我們探索。

三、GUI和VUI的設(shè)計(jì)要領(lǐng)：

3.1GUI

交互的多樣性：

不同于PC機(jī)通過鼠標(biāo)來點(diǎn)擊，在觸控設(shè)備上通過手指點(diǎn)按，由于手指的精確度相對(duì)于鼠標(biāo)指針差很多，所以子啊移動(dòng)頁面設(shè)計(jì)當(dāng)中的交互元素一定得辨識(shí)作用，手機(jī)并沒有懸停操作所以圖標(biāo)如果特征不明顯時(shí)一定要加文字識(shí)別，設(shè)計(jì)時(shí)也應(yīng)注意圖標(biāo)和菜單元素的尺寸。

拖拽和移動(dòng)是很相似的交互工作，被拖拽的元素始終跟隨著緊貼屏幕的指尖

除了使用單指之外，還可以用兩個(gè)手指放大，縮小圖片，如果設(shè)計(jì)了一些新的多指交互一定要給用戶提示和指導(dǎo)。

3.2VUI

3.3VUI的適用場景

智能家居

在智能家居領(lǐng)域VUI應(yīng)用越來越廣泛，相信在不久的將來我們一定能夠享受到更多的VUI所帶給我們的便利。

輔助駕駛

車載語音交互系統(tǒng)使得我們可以在開車的同時(shí)接聽電話、聽廣播等。

企業(yè)應(yīng)用

未來大型企業(yè)中將會(huì)多領(lǐng)域應(yīng)用VUI，用于書寫、記錄等工作。

醫(yī)療教育

智能記錄病例、管理病例的出入。

四、VUI的語言設(shè)計(jì)注意事項(xiàng)

過多的聲音干擾，不但會(huì)增加用戶的心智負(fù)擔(dān)，將會(huì)引起用戶感到厭煩，尤其是，語音在資訊的負(fù)荷量上又比單純的聲音來的更多，考量是否存在存在的必要性就放在格外重要。而言，可以尋找替代的方式，透過震動(dòng)和燈光甚至狀態(tài)變化來提示，減少使用者的認(rèn)知負(fù)荷，并確保聲音只會(huì)在特定的時(shí)間點(diǎn)出現(xiàn)，并提供使用者自行設(shè)定關(guān)閉聲音的功能

除了聲音本身的設(shè)計(jì)外，還要考慮整體環(huán)境的影響因素，可能周遭受非常的吵雜。換句話說，在KTV的包廂，吵雜的環(huán)境，會(huì)使用者無法聽到消防警鈴響，而容易造成危險(xiǎn)事件的產(chǎn)生。也因?yàn)槿绱?，消防警鈴的聲音頻率設(shè)計(jì)就應(yīng)該介于2kM到4kM，因?yàn)檠芯恐赋鋈祟惖亩鋵?duì)于這個(gè)范圍的聲音最敏感

從音量的角度來看，耳朵對(duì)不同頻率的音量有不同的感知程度，有些聲音聽起來很響亮，有些則是很沉悶因人而異，但比較客觀的量化體驗(yàn)指標(biāo)就是分貝（decibel，dB），在尺度上超過70分貝以上，會(huì)讓人產(chǎn)生憂慮不安，并引發(fā)各種癥狀，因此要盡量避免尺寸大小過大的設(shè)計(jì)，，，降低主動(dòng)的侵入性?；谶@些因素總和來說，還要考量到用戶和產(chǎn)品間的距離，與產(chǎn)品愈近，對(duì)于體積的需求量較大，反之為然

在聲音體驗(yàn)設(shè)計(jì)（Amber Case，2018）一書指出，當(dāng)警告或提示音出現(xiàn)的頻率愈高，就應(yīng)該設(shè)計(jì)成愈短，但不足就是，如果把聲音設(shè)計(jì)成短而急促，從而使用者需要集中相反地，事件發(fā)生時(shí)間間隔長且久，則聲音提示更需要明顯且激烈的聲音來提醒用戶，例如手機(jī)鈴聲響時(shí)，需要告知用戶

文章來源：站酷作者：張陽光Designer

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

評(píng)論(0) 瀏覽(2465)

052022-4

交互設(shè)計(jì)九大定律

純純

先舉個(gè)例子來理解一下：我要點(diǎn)擊手機(jī)上的確認(rèn)按鈕所需要的時(shí)間，和 手與按鈕的距離（D） 按鈕的大小（S）有關(guān)。當(dāng)距離越長，所需要的時(shí)間越長。當(dāng)按鈕越大，所需要的時(shí)間越短。

undefined

自我理解：我們將日?？吹降慕缑嬖剡M(jìn)行去色彩和去信息化，把這些控件/元素等都變成灰色色塊，其實(shí)也就變成了最簡單的原型圖。這些灰色色塊拋開了視覺上的屬性，其實(shí)有兩大最基本的屬性，即色塊的位置和大小。菲茲定律告訴我們，要通過控制色塊或者說界面元素的大小和位置（絕對(duì)距離和相對(duì)距離）來進(jìn)行界面布局，進(jìn)而控制交互時(shí)間，達(dá)到我們設(shè)計(jì)或者業(yè)務(wù)層面的目的。

a 合理的自身大小

這里是說合理的大小。一般來講越大用戶越容易到達(dá)，但是屏幕的大小是一定的，某一按鈕/目標(biāo)越大就會(huì)降低其他按鈕/目標(biāo)的大小。所以大小是相對(duì)制衡的，要根據(jù)具體情景和需求制定合理的大?。òㄈ庋鄞笮『蛯?shí)際熱區(qū)大小）。但是關(guān)于手指點(diǎn)擊的最小熱區(qū)有規(guī)定是44x44px，一般的圖形的熱區(qū)大小都要高于這個(gè)大小，才能便于點(diǎn)擊。其他大小要根據(jù)功能需求進(jìn)行制定。

undefined

b 控制合理的相對(duì)距離

相對(duì)距離指的是界面內(nèi)部各個(gè)元素與控件之間的距離。一般通過研究 整個(gè)流程 的交互動(dòng)作，相互關(guān)聯(lián)的操作元素/操作手勢距離會(huì)相對(duì)比較近，這樣能有效減少操作的時(shí)間。

undefined

c 特殊的絕對(duì)位置：屏幕邊界

屏幕邊界是可以確定的（鼠標(biāo)向某一方向一直移動(dòng)終會(huì)停留在屏幕邊界），但是屏幕中央確是較難確定的（四個(gè)方向鼠標(biāo)均能延展出去）。一些重要和主要的操作放在屏幕的邊界，可以方便用戶快速到達(dá)，也是菲茨定律的普遍應(yīng)用。

undefined

d 反向設(shè)計(jì)：增加時(shí)間來達(dá)成業(yè)務(wù)目標(biāo)

業(yè)務(wù)目標(biāo)有時(shí)候是與用戶目的是相違背的，也需要根據(jù)具體場景來判斷菲茨定律的使用走向。在特殊情境下也會(huì)通過距離和自身大小來反向增加使用時(shí)間來完成目的。

undefined

自我理解：席克定律也在研究交互時(shí)間。我們需要通過控制席克定律所總結(jié)的兩大因素：數(shù)目和復(fù)雜程度進(jìn)而去左右界面布局的形式，從而縮短交互時(shí)間，達(dá)成良好的體驗(yàn)。

a 精簡選擇的余地

選擇增加也就意味著事情可以發(fā)展的方向更加多元化，用戶就需要權(quán)衡事情該往哪個(gè)方向發(fā)展，而這就需要時(shí)間。不要讓你的用戶思考太多，所以一般給出的選項(xiàng)在滿足需求的情況下要盡可能的少。（這里注意：一般情況下要少但也不能太少，強(qiáng)迫用戶也是不可取。）

undefined

b 減少事情的復(fù)雜程度

事情越復(fù)雜，越難處理。盡可能的將復(fù)雜的事件通過交互或者版式等手段進(jìn)行簡化，讓用戶覺得容易把握，而不是大量事物/流程/元素的堆砌。

undefined

自我理解：米勒定律對(duì)人的記憶數(shù)目進(jìn)行了定量的研究，即 5-9 個(gè)是人腦接受起來比較合適的，多了就容易混亂。

a 控制選項(xiàng)的數(shù)量

同一類型或者同一層級(jí)的元素出現(xiàn)，數(shù)目一般控制在5-9個(gè)。

undefined

b 將多信息進(jìn)行分段處理，便于理解記憶

面對(duì)有大量信息的時(shí)候（數(shù)字/文字/段落）將其分割到5-9個(gè)等大腦容易記住的數(shù)量。

undefined

c 順應(yīng)時(shí)代的取舍

看到了有一些設(shè)計(jì)并沒有按照米勒定律去執(zhí)行，因?yàn)殡S著時(shí)代的發(fā)展，有一些定律并不是萬能適用的。定律不可照搬，要根據(jù)具體情境去做取舍，以最終效果為導(dǎo)向。

undefined

自我理解：和四大基本原則的親密性原則類似，即在界面布局的時(shí)候性質(zhì)相同的事物要相接近，不相同的要遠(yuǎn)離，這樣更符合人們的既定認(rèn)知。

a 將相近的功能的分為一組

在面臨很多復(fù)雜功能時(shí)，簡單的堆砌顯得啰嗦，需求又不能隨意刪減。這時(shí)候就可以將相類似的功能放在同一個(gè)組別里面進(jìn)行收納整理，這與席克定律也相接近。

undefined

b 按照事物性質(zhì)和關(guān)聯(lián)程度嚴(yán)格把握布局的間距

這里與視覺設(shè)計(jì)也有很多重疊，即落實(shí)到頁面的高保真的細(xì)節(jié)。保證內(nèi)容想接近的元素間距要小，內(nèi)容有區(qū)分的間距要大。

undefined

自我理解：任何事物都有其復(fù)雜性，不可避免。某些事物一旦失去其復(fù)雜性，其作用本質(zhì)就可能失去效果。不要抱怨某些流程和工作，他們的復(fù)雜性是其發(fā)揮作用所必然帶來的。所以才需要你來優(yōu)化和簡化。

a 把復(fù)雜性降到最低點(diǎn)

事物的復(fù)雜性是固定，但是要思考你所面對(duì)的是最簡程度的復(fù)雜性么。首先優(yōu)化內(nèi)部系統(tǒng)的整個(gè)流程和不必要的步驟能夠有效降低系統(tǒng)本身的復(fù)雜性。

undefined

b 把復(fù)雜性進(jìn)行轉(zhuǎn)移組合隱藏

再把復(fù)雜性降低到最低程度之后，事物/流程仍然表現(xiàn)出一定復(fù)雜性時(shí)。就要考慮造成復(fù)雜的元素是什么，是否要將造成復(fù)雜的元素進(jìn)行收納組合，甚至隱藏。

undefined

自我理解：在相同前提下我們選擇最簡單有效的。單純的炫技是可恥的。

a 給用戶清晰的引導(dǎo)

想清楚這張界面的主要目的是什么，順著這個(gè)目標(biāo)去引導(dǎo)用戶，其他元素的視覺層級(jí)要讓步，來讓用戶抓住重點(diǎn)。

b 少即是多

少代表流程/步驟/界面元素的減少，多意味著用戶量的增加體驗(yàn)感的增強(qiáng)。

undefined

c 衡量產(chǎn)品功能的取舍

產(chǎn)品在功能迭代改版上，會(huì)出現(xiàn)大量不同的聲音和方向。但功能不是越多越好，用戶的時(shí)間是確定的，在某一功能上消耗的時(shí)間長，在其他功能上就短了。奧卡姆剃刀就要求我們找到主功能點(diǎn)，其他功能點(diǎn)要做出讓步妥協(xié)甚至砍掉。

自我理解：關(guān)于防錯(cuò)定律和我的上一篇文章入門（一）的放錯(cuò)和容錯(cuò)原則基本近似，只是分類的更細(xì)致一些，分解到了操作的前中后階段來防止錯(cuò)誤。上一篇有更多解釋。

a 操作前禁止操作或者預(yù)告結(jié)果

有一些功能在你操作之前就禁止操作，避免了錯(cuò)誤的發(fā)生?；蛘咄ㄟ^告知操作之后會(huì)產(chǎn)生的不良后果

undefined

b 操作中提醒用戶

在操作過程中，進(jìn)行錯(cuò)誤提醒，有效避免錯(cuò)誤的進(jìn)行

c 操作后給用戶彌補(bǔ)錯(cuò)誤的機(jī)會(huì)

用戶在使用app的過程進(jìn)入錯(cuò)誤的路線，需要給用戶彌補(bǔ)的機(jī)會(huì)

自我理解：這一點(diǎn)主要體現(xiàn)在產(chǎn)品設(shè)計(jì)上，通過對(duì)未完成任務(wù)的提醒，來去博得用戶的注意力，進(jìn)而達(dá)到商業(yè)目的。

a 倒計(jì)時(shí)/讀條等交互反饋

倒計(jì)時(shí)會(huì)給人一種緊促感，逼迫用戶去注意，無形之中給用戶規(guī)定了任務(wù)，這個(gè)任務(wù)也就是咋們的業(yè)務(wù)目標(biāo)。倒計(jì)時(shí) 讀條等交互方式也應(yīng)該謹(jǐn)慎恰當(dāng)使用，因?yàn)椴皇敲恳粋€(gè)任務(wù)場景都需要給用戶緊迫感。

undefined

b 定向反饋提醒

這一點(diǎn)也是利用未完成任務(wù)的相關(guān)信息反饋達(dá)到讓用戶去完成任務(wù)的業(yè)務(wù)目的。

undefined

自我理解：在上一篇一致性原則里面講到了和競品保持一致/和迭代版本保持一致，其實(shí)是我拓展的。這一定律是明確指出了一致的根本原因。在產(chǎn)品設(shè)計(jì)的時(shí)候，用戶的心理就是我希望你的使用方式/操作和主流一致，超出預(yù)期的就會(huì)有人群不接受，就會(huì)有用戶流失。

a 能不創(chuàng)新就不創(chuàng)新

創(chuàng)新意味著改變，改變的不僅僅是你的界面還有用戶習(xí)慣和長久以來的認(rèn)知模型。破壞習(xí)慣重建習(xí)慣是有很大風(fēng)險(xiǎn)的。

undefined

其實(shí)能看到很多Dribble頁面很有特點(diǎn)，也不是完全沒有落地性，但是實(shí)際國內(nèi)產(chǎn)品并沒有看到這樣的設(shè)計(jì)，原因就是不符合雅各布定律。

b 好的的產(chǎn)品都是創(chuàng)新的不同的

這一點(diǎn)好像和上一點(diǎn)有點(diǎn)相悖。但是其實(shí)也不違背，有很多分寸的拿捏往往不是理論能完全決定的。微信后來居上絕不是因?yàn)檎瞻醧q，如果新的創(chuàng)新帶來的優(yōu)勢能夠彌補(bǔ)不相同所帶來的不足，也是可以嘗試的。

undefined

文章來源：站酷作者：花城丶

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

評(píng)論(0) 瀏覽(2228)

052022-4

交互設(shè)計(jì)：如何做到驚喜？

純純

保持好奇，巧妙融合，追求卓越，自然而然

一家之言，未必全面，甚至未必正確。歡迎交流探討。

交互設(shè)計(jì)的驚喜，是什么？

之前的文章，有簡單定義過交互設(shè)計(jì)的“驚喜”，即為：超出用戶預(yù)期，并讓用戶開心。

具體而言有兩類，分別是：小驚喜、大驚喜。

1 小驚喜

所謂小驚喜，是指一些頗具趣味性或人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。

先說趣味性。常見的有兩類，第一類是比較好玩的動(dòng)效，第二類是一些小功能。第二類有時(shí)也會(huì)包含第一類。

動(dòng)效這塊，大家比較熟悉的，有 iPhone 上刪除應(yīng)用前圖標(biāo)的抖動(dòng)，仿佛是嚇的發(fā)抖，也可能是在搖頭求饒；還有移動(dòng)端登錄 B 站、輸入密碼時(shí)，動(dòng)畫人物的捂眼捂臉動(dòng)作。

(B 站登錄頁面)

小功能這塊，也可以分成兩類。一類是隱藏的小功能，一類是有趣的小功能。

很多隱藏功能，頭幾次用的時(shí)候，多少會(huì)有一些驚喜之感。

比如在訂閱號(hào)消息列表頁，某個(gè)公眾號(hào)你已經(jīng)幾個(gè)月沒看過，對(duì)它失去了興趣和信任。這時(shí)，嘗試長按這個(gè)公眾號(hào)的頭像或名稱，會(huì)呼出一個(gè)包含“刪除消息”和“取關(guān)”功能的彈窗。

(訂閱號(hào)消息列表)

還有些隱藏功能，既能讓用戶覺得驚喜和方便，又能引發(fā)用戶思考。這種思考，可能會(huì)讓用戶感嘆設(shè)計(jì)之妙，也可能也會(huì)給用戶一種猜對(duì)謎語的欣喜之感。

比如用墨刀的時(shí)候，嘗試按數(shù)字鍵 1，會(huì)呼出“內(nèi)置組件”這個(gè)使用頻率非常高的功能，會(huì)讓人覺得墨刀很聰明。

如果再仔細(xì)看一下，會(huì)發(fā)現(xiàn)，“內(nèi)置組件”的縮略圖標(biāo)，和其他 4 個(gè)諸如“我的組件”、“圖標(biāo)”等功能的縮略圖標(biāo)，并成一列。這 5 個(gè)縮略圖標(biāo)的排列順序（上到下），和它們快捷鍵（"、"鍵和數(shù)字鍵1、2、3、4）的排列順序（左到右），是完全一致的。不得不說，這是一個(gè)簡單又巧妙的設(shè)計(jì)。

再比如朋友圈里，某個(gè)不熟的好友每天都發(fā)集贊的小廣告，搞的我們不勝其煩。長按其頭像，會(huì)呼出設(shè)置權(quán)限（屏蔽等）的功能。

有意思的是，長按好友名字，則不會(huì)呼出這個(gè)功能。要知道點(diǎn)擊頭像或名字是都能進(jìn)入好友主頁的；另外剛才那個(gè)例子，長按公眾號(hào)頭像或名字，也都能呼出取關(guān)的彈窗。

個(gè)人的理解，生活中，我們用力長按一個(gè)人，通常是表達(dá)強(qiáng)烈不滿，比如打架時(shí)。比起長按名字，長按頭像更像是長按真人，所以也更能表達(dá)我們的不滿。

說完隱藏的小功能，再說下有趣的小功能。比如微信聊天里的扔骰子、石頭剪刀布，微信給朋友發(fā)生日快樂后漫天飄落的蛋糕，拍照軟件里的貼紙，等等。

最后說下帶有人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。常見的有如下類型：幫助弱勢、關(guān)照情緒、表達(dá)情感、保護(hù)隱私。

幫助弱勢這塊，比如 iPhone 的輔助功能，里面有針對(duì)視力障礙的放大鏡功能、有針對(duì)不識(shí)字群體的旁白功能。

關(guān)照情緒這塊，很重要的一點(diǎn)，就是避免引起用戶的負(fù)面情緒。比如微信的刪好友是單方面刪除，被刪時(shí)我們很難察覺到，而且微信也不會(huì)通知我們。個(gè)人覺得，微信之所以不通知我們，其中一點(diǎn)，就是不給我們添堵。類似的還有，微信消息沒有“已讀”功能，這就大大減輕了接收者的回復(fù)壓力。

表達(dá)情感這塊，比較為人所知的例子，5 月 20 號(hào)這天，微信紅包的限額，從 200 元升到了 520 元。還有一個(gè)例子，在微信聊天里發(fā)一個(gè)“ohh”，長按并點(diǎn)翻譯，結(jié)果也是一個(gè)驚喜。

保護(hù)隱私這塊，比如借助 iPhone 的“引導(dǎo)式訪問”功能，可以讓小朋友只能訪問你的某個(gè)視頻應(yīng)用來看動(dòng)畫片。再比如別人用你電腦的時(shí)候，如果你不想讓對(duì)方看到你的微信，就可以通過手機(jī)微信來鎖定或退出電腦版微信。

2 大驚喜

所謂大驚喜，是指那些系統(tǒng)性大創(chuàng)新，并且能夠引領(lǐng)潮流、代表未來的交互設(shè)計(jì)。通常而言，這些大驚喜，最開始給用戶的感覺，就是酷。

iPhone 就是典型例子之一。

2007 年的初代 iPhone，帶來了當(dāng)時(shí)的大屏幕：3.5 寸屏幕，以及純觸摸屏，和極為靈敏的觸控體驗(yàn)。

2011 年，Siri 同 iPhone 4S 一起問世，為我們帶來了語音交互。如今，在 100 元就能買到品牌類智能音響的情況下，依靠語音交互的智能音響也在慢慢走入尋常百姓家。

也許后喬布斯時(shí)代的 iPhone 創(chuàng)新不如以前，但不可否認(rèn)的是，時(shí)至今日，iPhone 依然在引領(lǐng)潮流，在給我們大驚喜。比如這幾年流行的手機(jī)無線充電和以 AirPods 為代表的極簡的無線耳機(jī)。

以上是比較廣為人知的交互設(shè)計(jì)，還有一些不太為人所知的設(shè)計(jì)。比如在家里網(wǎng)購一條床單，但是不知道床的尺寸，家里又沒有尺子。這時(shí)，打開 iPhone 里的測距儀這款 App，就可以量出床的尺寸，會(huì)不會(huì)覺得有點(diǎn)酷。

(測距儀 App)

微信在引領(lǐng)潮流方面也有一些建樹，比如極大的普及了二維碼和掃一掃。小程序作為一種體驗(yàn)接近原生 App、同時(shí)又不用下載的產(chǎn)品，也正在引領(lǐng)新一輪的潮流。

還有一個(gè)比較酷的功能，就是以圖搜圖。筆者最早用過百度和谷歌的相關(guān)功能，主要是在電腦上搜索相似的圖片，使用頻率極低。

假設(shè)一個(gè)場景，比如在路上看到一個(gè)陌生人的外套很好看，但又不好意思上前問，就可以拿起手機(jī)，利用淘寶的拍立淘功能，拍張照就能馬上看到相同或相似的商品。

如果淘寶上沒有搜到類似商品，還可以用微信的掃一掃識(shí)物。和拍立淘相比，區(qū)別之處有兩點(diǎn)。第一，不用拍，直接能識(shí)別，不過通常得等 1-3 秒；第二，識(shí)物結(jié)果里面，除了商品，可能還會(huì)有百科詞條和資訊。

交互設(shè)計(jì)：如何做到驚喜？

個(gè)人覺得，有 4 個(gè)要點(diǎn)：既要有好奇心，又要有卓越心；既要天馬行空，又要保持自然。

聽起來可能有點(diǎn)亂，且聽筆者一一道來。

1 保持好奇心

筆者觀察身邊讀小學(xué)的小孩，發(fā)現(xiàn)，當(dāng)大人聊天時(shí)，特別是談?wù)聲r(shí)，小孩特別喜歡坐在旁邊聽，而且聽的很認(rèn)真。小孩有時(shí)也會(huì)說兩句，或是問問題，或是發(fā)表自己的看法。

看得出來，小孩對(duì)成年人的世界，懷有極大的好奇心。實(shí)際上，不止于成年人的世界，小孩對(duì)周遭世界都有比較強(qiáng)烈的好奇心。

整體而言，成年人對(duì)周遭世界的好奇心，遠(yuǎn)不如小孩。我們互聯(lián)網(wǎng)從業(yè)者也不例外。

好奇心和交互設(shè)計(jì)，有什么關(guān)系？

交互設(shè)計(jì)，某種程度上，也是一種創(chuàng)作。好的創(chuàng)作，一定來自生活。這就需要我們?nèi)ビ^察生活。

觀察生活，非常重要的一點(diǎn)，就是好奇心，對(duì)周遭人、事、物要有足夠的好奇心。

比如上文提到的例子，在 iPhone 上刪除應(yīng)用前，應(yīng)用圖標(biāo)會(huì)抖。這種抖是一種趣味隱喻，既可以理解成嚇的發(fā)抖，也可以理解成搖頭求生。如果對(duì)生活沒有足夠的好奇心，是很難留意到這種生活細(xì)節(jié)，并把它們作為一種隱喻運(yùn)用到交互設(shè)計(jì)中的。

以上是關(guān)于好奇心，還有一種特質(zhì)，也是在小孩身上表現(xiàn)突出，同時(shí)也和本文主題有關(guān)，那就是：童趣。

還是上文的例子，在 B 站 App 上輸入登錄密碼時(shí)，動(dòng)畫人物會(huì)捂眼睛。這個(gè)設(shè)計(jì)，可能不會(huì)打動(dòng)所有用戶，但至少一部分用戶會(huì)覺得比較有趣。如果我們內(nèi)心沒有一點(diǎn)童趣，可能也會(huì)覺得，這個(gè)設(shè)計(jì)，沒啥意思。

玩是人的天性。對(duì)于比較好玩的交互設(shè)計(jì)，大部分人是比較容易產(chǎn)生共鳴的。實(shí)際上，據(jù)筆者觀察，我們大部分從業(yè)者是有童趣的。我們比較缺的，是好奇心。

那么，怎樣判斷自己是否擁有足夠的好奇心，其標(biāo)志是什么？

個(gè)人觀點(diǎn)，有兩個(gè)標(biāo)志。第一，是對(duì)與個(gè)人利益無關(guān)的生活小事的關(guān)注，遠(yuǎn)多于對(duì)個(gè)人利益本身的關(guān)注。第二，觀察和思考，遠(yuǎn)多于評(píng)價(jià)和自大；追本和溯源，遠(yuǎn)多于偏見和傲慢。

為什么會(huì)提到個(gè)人利益？

因?yàn)椋ǔ６?，個(gè)人利益，尤其是短期利益(比如少花時(shí)間設(shè)計(jì)和修改原型)，往往會(huì)和用戶體驗(yàn)存在一個(gè)此消彼長的關(guān)系。

如果過于關(guān)注個(gè)人利益，不僅很難照顧到用戶體驗(yàn)，甚至?xí)τ脩趔w驗(yàn)。至于給用戶帶來驚喜，就更無從談起了。

回到現(xiàn)實(shí)當(dāng)中。在時(shí)代洪流面前，好奇心的兩個(gè)標(biāo)志，顯得很難，該如何實(shí)現(xiàn)？

關(guān)鍵在于找到背后的源動(dòng)力。這個(gè)源動(dòng)力，在筆者看來，有兩點(diǎn)，分別是：求知若渴、淡泊寧靜。

求知若渴，可以源源不斷的驅(qū)動(dòng)我們?nèi)ビ^察、去思考萬事萬物的規(guī)律和聯(lián)系。

淡泊寧靜，正如諸葛亮在《誡子書》中所說，“非淡泊無以明志，非寧靜無以致遠(yuǎn)”。人的心力和精力終歸是有限的，如果我們沉迷名利、物欲、享樂，就難有興趣和精力去琢磨萬事萬物了。

所以，只要找回自己童年的那種求知若渴，同時(shí)修身養(yǎng)性到淡泊寧靜，這份好奇心，就會(huì)回來。

2 巧妙融合

某種程度上，很多帶給我們驚喜的交互設(shè)計(jì)，都是一種巧妙融合。

筆者把這種巧妙融合，初步分成了三類，分別是：簡單融合、直接融合、委婉融合。

簡單融合，最常見的就是隱藏功能。把一個(gè)較為簡單的操作動(dòng)作，比如長按、雙擊、下拉、左滑等，和一個(gè)合適的功能，融合在一起。用電腦時(shí)我們常說的快捷鍵，也屬于這一類。

通常而言，操作對(duì)應(yīng)什么功能，講究的是合適，并無固定章法束縛。比如在微信朋友圈，發(fā)表文字的功能可以靠長按（相機(jī)圖標(biāo)）喚起，設(shè)置權(quán)限的功能也可以靠長按（好友頭像）喚起。所以，簡單融合這塊，可供我們發(fā)揮的空間很大。

另外，簡單融合最常見的形式——隱藏功能，既實(shí)現(xiàn)了界面的簡潔，又帶來了一定驚喜。

簡單融合，既簡單，又實(shí)用。建議大家充分開發(fā)這一塊。

直接融合，是指將生活中的趣味性，直接搬到軟件中，搬到交互設(shè)計(jì)中。比如微信聊天中的扔骰子、石頭剪刀布，以及漂流瓶、抽獎(jiǎng)等。

這一類融合，有點(diǎn)像商場里的電玩城，雖然我們不會(huì)經(jīng)常去玩，但確實(shí)比較好玩。

委婉融合，是指用明喻或隱喻的手法，將生活中微不足道的一些細(xì)節(jié)，移植到交互設(shè)計(jì)中。

這種移植，有時(shí)是直白的。比如 Mac 上打開應(yīng)用時(shí)，其圖標(biāo)會(huì)在 dock 欄里有規(guī)律的彈跳，這會(huì)讓我們聯(lián)想到皮球的彈跳。

這種移植，有時(shí)是隱晦的。比如 iPhone 上刪除應(yīng)用前，其圖標(biāo)會(huì)抖。這種抖，是害怕還是求饒，任憑我們想象。

這種移植，有時(shí)是無聲的。比如在朋友圈，要想呼出隱藏的設(shè)置權(quán)限功能，只能長按頭像，長按名字則不行。這個(gè)設(shè)計(jì)，不乏想象空間。如果不嘗試長按名字，則不會(huì)發(fā)現(xiàn)這個(gè)細(xì)節(jié)。

委婉融合，有時(shí)會(huì)帶一些趣味性。更為重要的是，它能夠引發(fā)我們的思考和想象，所以是一種很出彩的融合。這種融合，也會(huì)賦予交互設(shè)計(jì)，一種禪的味道。

整體而言，筆者非常推薦委婉融合。

3 追求卓越

如果目標(biāo)是小驚喜，則保持好奇心、并做到巧妙融合，基本足矣。

如果目標(biāo)是大驚喜，則需要雄心壯志，需要舍我其誰，需要追求卓越。

日常工作中，可能會(huì)有這樣的對(duì)話?！斑@個(gè)動(dòng)效/功能，實(shí)現(xiàn)不了”。

大驚喜里的幾個(gè)例子，比如初代 iPhone 的觸控體驗(yàn)，iPhone 里的測距儀，微信的掃一掃識(shí)物。這種設(shè)計(jì)，意味著要修一條最好的長城，背后往往有很多技術(shù)難題要攻克，有很多臟活累活要做。

如果團(tuán)隊(duì)文化就是做出最優(yōu)秀的交互設(shè)計(jì)，那么，“實(shí)現(xiàn)不了”這句話，估計(jì)就聽不到了。取而代之的，可能是：“還在研究中”，“下個(gè)大版本能上”。

4 自然而然

提到驚喜，還有一款值得研究和學(xué)習(xí)的產(chǎn)品，那就是錘子手機(jī)的 Smartisan OS。

個(gè)人觀點(diǎn)，在小驚喜方面，Smartisan OS 頗有建樹。在大驚喜方面，Smartisan OS 也進(jìn)行了一些值得學(xué)習(xí)的探索。

先說小驚喜，比如華麗而細(xì)膩的桌面翻頁動(dòng)畫，比如四指橫劃桌面可以切換桌面背景。還有一些貼心的小功能，比如靜音可以設(shè)置時(shí)間，比如方便的長截屏。

(靜音可設(shè)置時(shí)間)

(長截屏)

再說大驚喜。2016 年 10 月發(fā)布的一步和大爆炸，是比較大比較系統(tǒng)的功能，在當(dāng)時(shí)也很新。錘子公司也一直有宣傳這兩個(gè)功能。所以相對(duì)而言，這兩個(gè)功能是 Smartisan OS 的大驚喜。

筆者的備用機(jī)是錘子手機(jī)，身邊也有朋友在用錘子手機(jī)。以一步為例，這個(gè)功能，筆者體驗(yàn)過很多次。但平常很少用，身邊朋友的情況也類似。

(一步)

根據(jù)使用情況和主觀感受，個(gè)人覺得，一步這個(gè)大驚喜，還存在進(jìn)步空間，主要有兩個(gè)方面。

第一，宏觀層面。一步作為新生事物，好比一顆新種子。種子破土而出時(shí)，是一顆嫩芽，而不是一棵大樹。新生的一步功能繁多，猶如一棵破土而出的大樹，一方面有違自然規(guī)律，另一面因?yàn)楣δ芊倍?，很多用戶無法一下子看懂，看不懂可能就不想用了。

第二，微觀層面。一步這棵新大樹，結(jié)了很多不同的果子，比如拖拽圖片到其他應(yīng)用、切換后臺(tái)應(yīng)用、展示最近圖片/文件等。這些果子，是用戶真正需要的嗎？這個(gè)是要存疑的。

比如拖拽圖片到朋友圈就能發(fā)朋友圈這個(gè)設(shè)計(jì)。通常而言，我們發(fā)到朋友圈的圖片都是精挑細(xì)選的，會(huì)占用一定量的時(shí)間，比如旅游或聚會(huì)結(jié)束后發(fā)的照片。一步解決的是效率問題。發(fā)朋友圈的時(shí)候，少點(diǎn)幾下這種效率問題，優(yōu)先級(jí)是比較靠后的，我們沒那么在乎。

還有拖拽圖片/文件這個(gè)交互動(dòng)作，大家通常在電腦上用的比較多，在手機(jī)上是沒有這個(gè)習(xí)慣的，實(shí)際上應(yīng)用場景也少。在手機(jī)上，大家一般只習(xí)慣拖拽應(yīng)用圖標(biāo)。

還有切換后臺(tái)應(yīng)用這塊，大家第一個(gè)想到的，一定是系統(tǒng)自帶的，已經(jīng)用慣了。而且喚起速度比一步快，點(diǎn)擊面積也比一步大。

總的來說，微觀層面上，比較缺讓大家能馬上想到一步的功能點(diǎn)。

最后，總結(jié)一下。對(duì)于領(lǐng)先時(shí)代、引領(lǐng)潮流的交互設(shè)計(jì)，需要做到自然。

具體而言，就是，大驚喜是一種系統(tǒng)性的大功能，好比一棵大樹。這棵大樹，最好有一個(gè)從種子到果子的生長過程，這樣最自然，生命力也會(huì)最旺盛。

因?yàn)?，從破土而出的嫩芽階段，就可以通過用戶反饋和數(shù)據(jù)來檢驗(yàn)，這種嫩芽，是不是真的對(duì)用戶有價(jià)值。如果價(jià)值不大或沒有價(jià)值，還可以再調(diào)整。如果長成大樹結(jié)滿果子，再去調(diào)整，就很難了。

結(jié)語

交互設(shè)計(jì)小細(xì)節(jié)，如果有一定的趣味性或人文屬性，則是小驚喜。

系統(tǒng)性工程的交互設(shè)計(jì)，如果最初感覺很酷，而且能引領(lǐng)潮流、代表未來，則是大驚喜。

始終保持孩童身上那種非功利的好奇心，用心觀察并思考生活中的小事；

將生活小事和交互設(shè)計(jì)巧妙融合起來；

以上兩點(diǎn)，可以幫我們做出小驚喜類的交互設(shè)計(jì)。

追求卓越，獨(dú)立思考，做最酷最好的交互設(shè)計(jì)；

酷是結(jié)果也好，是目標(biāo)也好，都不是最重要的。最重要的是，避免刻意和心切。醞釀大驚喜，猶如培養(yǎng)一個(gè)新生的孩子，需要投入極大耐心和精力，需要讓孩子自然成長。沒有家長會(huì)教半歲的孩子唱歌、把 3 歲的孩子送到高中念書。

再加上以上兩點(diǎn)，可以幫我們做出大驚喜類的交互設(shè)計(jì)。

最后，用愛因斯坦的一句話來共勉。

想象力比知識(shí)更重要。

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

評(píng)論(0) 瀏覽(1441)

« 1 ... 22 23 24 25 26 27 28 ... 97 »

日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn

首頁

前言

一、【夸克瀏覽器】節(jié)日彩蛋-特定場景下輸入關(guān)鍵詞觸發(fā)彩蛋效果

1. 使用場景

2. 設(shè)計(jì)思考

二、【酷狗音樂】播放Tab-多交互操作，應(yīng)對(duì)多場景使用

1. 使用場景

2. 設(shè)計(jì)思考

三、【騰訊新聞】左滑熱點(diǎn)榜單-用戶關(guān)注的熱點(diǎn)放在路徑短的位置

1. 使用場景

2. 設(shè)計(jì)思考

四、【荔枝博客】品牌傳播-產(chǎn)品情感漏出，與用戶產(chǎn)生共鳴

1. 使用場景

2. 設(shè)計(jì)思考

五、【百度網(wǎng)盤】自定義倍數(shù)-給用戶更多可控操作，精細(xì)化觀影感受

1. 使用場景

2. 設(shè)計(jì)思考

六、【網(wǎng)易云音樂】情感彩蛋-給你夢幻的魔法，帶你重拾記憶

1. 使用場景

2. 設(shè)計(jì)思考

七、【即刻】頭像彩蛋-趣味互動(dòng)回彈，把喜歡強(qiáng)烈表現(xiàn)出來

1. 使用場景

2. 設(shè)計(jì)思考

八、【荔枝】錄聲音-輕擬物動(dòng)態(tài)圖，使用中的及時(shí)反饋

1. 使用場景

2. 設(shè)計(jì)思考

九、【微博】點(diǎn)贊反饋-情緒最大化宣泄，盡情釋放情緒

1. 使用場景

2. 設(shè)計(jì)思考

十、【36氪】隱藏的浮窗-深挖用戶操作，快切與停頓的奧秘

1. 使用場景

2. 設(shè)計(jì)思考

十一、結(jié)語

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

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

3.分享類排行榜-自我確認(rèn)需求

1.平臺(tái)權(quán)威性—用戶側(cè)

2.平臺(tái)權(quán)威性—平臺(tái)側(cè)

3.平臺(tái)權(quán)威性—廣告告知

排行榜資源的建立

1.頁面tab

2.圖標(biāo)入口

3.商品詳情頁榜單入口

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

1.編輯推薦/小編推薦

2.猜你喜歡/相關(guān)推薦

3.年度總結(jié)排行榜

4.TOP排行榜

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

1.唯一性榜單頭部

2.可復(fù)用性榜單頭部

1.純文字形式

2.圖文結(jié)合形式

3.橫排+列表表現(xiàn)形式

資料來源：

一、撰寫目的

二、什么樣的產(chǎn)品值得體驗(yàn)

1、與你工作相關(guān)的

2、上熱搜、應(yīng)用商店登榜

3、新穎的商業(yè)模式

4、新穎的交互模式

5、新穎的解決方案

三、產(chǎn)品體驗(yàn)類型

1、深度體驗(yàn)

2、快速體驗(yàn)

四、文檔應(yīng)該包含的內(nèi)容

1、體驗(yàn)環(huán)境

1）產(chǎn)品信息，通常會(huì)包含

2）體驗(yàn)信息，通常會(huì)包含

3）系統(tǒng)信息，通常會(huì)包含

2、產(chǎn)品概述

1）產(chǎn)品類型

2）Slogan

3）產(chǎn)品介紹

4）產(chǎn)品歷程

3、用戶分析

1）用戶畫像

2）用戶需求

3）使用場景

4、商業(yè)模式

一、【夸克瀏覽器】節(jié)日彩蛋-特定場景下輸入關(guān)鍵詞觸發(fā)彩蛋效果

二、【酷狗音樂】播放Tab-多交互操作，應(yīng)對(duì)多場景使用

三、【騰訊新聞】左滑熱點(diǎn)榜單-用戶關(guān)注的熱點(diǎn)放在路徑短的位置

四、【荔枝博客】品牌傳播-產(chǎn)品情感漏出，與用戶產(chǎn)生共鳴

五、【百度網(wǎng)盤】自定義倍數(shù)-給用戶更多可控操作，精細(xì)化觀影感受

六、【網(wǎng)易云音樂】情感彩蛋-給你夢幻的魔法，帶你重拾記憶

七、【即刻】頭像彩蛋-趣味互動(dòng)回彈，把喜歡強(qiáng)烈表現(xiàn)出來

八、【荔枝】錄聲音-輕擬物動(dòng)態(tài)圖，使用中的及時(shí)反饋

九、【微博】點(diǎn)贊反饋-情緒最大化宣泄，盡情釋放情緒

十、【36氪】隱藏的浮窗-深挖用戶操作，快切與停頓的奧秘

十一、結(jié)語

一、撰寫目的

二、什么樣的產(chǎn)品值得體驗(yàn)

2、上熱搜、應(yīng)用商店登榜

2、快速體驗(yàn)

四、文檔應(yīng)該包含的內(nèi)容

1、體驗(yàn)環(huán)境

2）體驗(yàn)信息，通常會(huì)包含

2、產(chǎn)品概述

4、商業(yè)模式

5、市場表現(xiàn)

7、功能體驗(yàn)

8、總結(jié)反思

五、文檔質(zhì)量的評(píng)判標(biāo)準(zhǔn)

1、通用（兩種體驗(yàn)類型都應(yīng)該有）

六、體驗(yàn)報(bào)告和競品報(bào)告的異同

2、同

二、當(dāng)當(dāng)搜索記錄隱藏

三、當(dāng)當(dāng)：分享動(dòng)效 ? 一鍵制作朋友圈分享海報(bào)

五、飛書：效率工作語言自動(dòng)轉(zhuǎn)化

六、美團(tuán)：優(yōu)惠卷新到提示

七、墨跡天氣：一鍵登錄（大部分應(yīng)用已上線該功能，部分應(yīng)用仍然未上線）

八、起點(diǎn)讀書：長按可以進(jìn)行互動(dòng)

十、微博：點(diǎn)贊動(dòng)效設(shè)計(jì)

十一、知乎：刪除搜索記錄

二、GUI和VUI的發(fā)展歷程：

三、GUI和VUI的設(shè)計(jì)要領(lǐng)：