“今天吃什么??？”

“不知道啊，看看大眾點(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)用戶購(gòu)買目標(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)我們決定購(gòu)買什么東西或去哪家消費(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è)備購(gòu)物方面的權(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站等看到各種測(cè)試自己隱藏能力或性格的小程序，人們對(duì)于這類活動(dòng)的空前熱情其實(shí)是因?yàn)槿祟惓诵枰畔⒌拇_認(rèn)外，還需要清楚自身在大數(shù)據(jù)下的自我確認(rèn)，通過各種各樣自我測(cè)試類榜單，判斷自身的能力、情緒、價(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ā)“忠誠(chéng)、紀(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ò)的長(zhǎng)輩或老師，對(duì)當(dāng)時(shí)剛來到這個(gè)世界的我們來說就是權(quán)威的化身。長(zhǎng)大后我們對(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)過長(zhǎng)時(shí)間的廝殺各自在用戶心中建立了某一領(lǐng)域的權(quán)威性，形成品牌號(hào)召力，推動(dòng)著用戶做出需求決策。另一方面排行榜中也會(huì)說明數(shù)據(jù)來源，比如京東會(huì)在排行榜頁(yè)面有明確的榜單說明，豆瓣根據(jù)平臺(tái)數(shù)據(jù)更新，汽車之家依靠外部的權(quán)威數(shù)據(jù)等等方式力證自己榜單的公正、透明，減少用戶做出決定中的思考、猜測(cè)，獲得用戶的信任，增強(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的競(jìng)價(jià)排名等，現(xiàn)在大部分應(yīng)用會(huì)使用明顯的方式告知用戶，防止平臺(tái)建立品牌權(quán)威性。比如微博熱搜第3、4位廣告位的“薦”，淘寶、小紅書推薦猜你喜歡的“廣告”。

上榜主體作為整個(gè)排行榜的內(nèi)容中心，由于排行榜自帶的競(jìng)爭(zhēng)機(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ì)不同的用戶人群及使用場(chǎng)景排行榜的入口表現(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.頁(yè)面tab

在首頁(yè)底部或頂部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è)頁(yè)面的1/3處展示部分“頭條熱榜”，點(diǎn)擊“查看更多”后，展開“頭條熱榜”及“今日關(guān)注”“北京熱榜”，整個(gè)交互形式類似微博熱搜。

2.圖標(biāo)入口

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

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

3.商品詳情頁(yè)榜單入口

用戶查看商品詳情時(shí)，可能會(huì)希望能夠橫向?qū)Ρ韧惿唐?，才能最終決定購(gòu)買那件商品。常見于電商類應(yīng)用，比如：京東、拼多多、得物等。點(diǎn)擊后進(jìn)入不同的榜單頁(yè)面，獲取更多產(chǎn)品信息進(jìn)行篩選。（淘寶的商品詳情頁(yè)沒有排行榜，但在首頁(yè)卻存在隱形排行榜，在隱形排行榜模塊會(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í)長(zhǎng)及購(gòu)買的可能性，各大應(yīng)用平臺(tái)適用性強(qiáng)，一般出現(xiàn)在首頁(yè)部分。

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é)等等，以香港電影偏多，是我早年的電影信息資料庫(kù)?，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ù)場(chǎng)景又有不同。豆瓣、微博因榜單效應(yīng)根據(jù)榜單第一位的變化更換底圖及文案；馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標(biāo)簽設(shè)計(jì)形式，通過更換文案底圖達(dá)到適用不同主題；京東就相對(duì)比較簡(jiǎn)單，只是更換標(biāo)題的文案達(dá)到多主題適配。

排行榜上榜主體由于不同的場(chǎng)景業(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)等用戶視覺場(chǎng)景都是豎版構(gòu)圖，因此沿用至線上使用的也是豎版圖片形式；而京東、大眾點(diǎn)評(píng)、馬蜂窩則使用方版的圖片形式，大概是因?yàn)楫a(chǎn)品的多樣性需要考慮多種圖片的適配問題。（視頻、游戲類由于使用場(chǎng)景大部分采用橫版圖片形式；但由于游戲封面、宣傳海報(bào)也會(huì)有豎版的形式，比如：游民星空、小黑盒）。

• 左文右圖VS左圖右文

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

人類對(duì)畫面的閱讀及掃描方式通常為三種布局方式，包括：古騰堡圖（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中產(chǎn)品列表頁(yè)中最常使用的就是F型布局模式，F型布局是雅各布·尼爾森（Jacob Nielsen）在公司進(jìn)行眼動(dòng)追蹤研究后首次提出的。與其他模式相同的是，眼睛從上/左，水平移動(dòng)到上/右，然后回到左邊緣再此進(jìn)行水平掃描。但在F型布局第二次掃頻后，向右掃動(dòng)的次數(shù)會(huì)越來越少，并且會(huì)隨著向下移動(dòng)，眼球會(huì)緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個(gè)頁(yè)面，即自左向右自上而下的閱讀模式，越向下信息獲取效率會(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名，另一方面排行榜的競(jìng)爭(zhēng)關(guān)系從單一爭(zhēng)爭(zhēng)奪一名變成前三名的競(jìng)爭(zhēng)關(guān)系，增加了第一名的高度。（目前這種形式我只在微博的明星勢(shì)力榜及抖音的直播總榜中有看到）

榜單規(guī)則是排行榜規(guī)則的描述，是平臺(tái)權(quán)威性的體現(xiàn)。榜單規(guī)則有些平臺(tái)本身具有數(shù)據(jù)庫(kù)，會(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)品功能，滿足用戶需求。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(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ì)公司，為期望卓越的國(guó)內(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ù)

背景

在 B 端設(shè)計(jì)領(lǐng)域中，不管是內(nèi)部用戶、產(chǎn)品、設(shè)計(jì)師、開發(fā)，還是外部產(chǎn)品、設(shè)計(jì)師等，總能聽到關(guān)于界面「屏效」方面的訴求或吐槽。

「屏效」狹義理解是「界面過度留白」；廣義理解，「屏效」源自諧音“坪效”，指的是每坪的面積可以產(chǎn)出多少營(yíng)業(yè)額(營(yíng)業(yè)額/專柜所占總坪數(shù)）。而「屏效」對(duì)于界面而言可以指屏幕單位時(shí)間、單位面積內(nèi)的信息可以帶來多少商業(yè)效益/效率提升。

為了探索在 B 端產(chǎn)品中用戶為何對(duì)「界面過度留白」或「屏效」問題如此敏感，于是我們展開了「屏效」專題的設(shè)計(jì)探索與實(shí)踐?！钙列А箤ｎ}探索主要以「探索」與「實(shí)踐」相結(jié)合的方式展開，將實(shí)踐過程中反復(fù)驗(yàn)證有效的設(shè)計(jì)策略沉淀成設(shè)計(jì)手冊(cè)，同步將部分功能進(jìn)行工程化，確?？梢蚤_箱即用。

探索階段-為誰在何時(shí)何地設(shè)計(jì)

用戶聲音｜不同的故事相似的訴求

面向內(nèi)部設(shè)計(jì)師和終端用戶投放的《高屏效訴求》《中后臺(tái)產(chǎn)品滿意度調(diào)研》問卷中認(rèn)為提高屏效能極大提升用戶體驗(yàn)的設(shè)計(jì)師占 58.14%；認(rèn)為提升屏效對(duì)體驗(yàn)有提升的終端用戶占 50.6%。

外部知乎上針對(duì)《Ant Design 4.0 設(shè)計(jì)價(jià)值觀》的 13 條反饋里，其中就有 2 點(diǎn)提到關(guān)鍵字「效率」。

通過了解不同用戶和產(chǎn)品類型發(fā)現(xiàn)，不同的用戶在工作場(chǎng)景的產(chǎn)品使用中有著相似的特征：

案例收集｜發(fā)現(xiàn)問題，大膽假設(shè)

縱觀 B 端產(chǎn)品界面，發(fā)現(xiàn)普遍問題和收錄在解決屏效問題上實(shí)踐得比較好的案例，為了逐步突破問題，選擇以數(shù)據(jù)產(chǎn)品中覆蓋率極高的表格為設(shè)計(jì)切入點(diǎn)，通過線上跨產(chǎn)品多端地毯式的體驗(yàn)走查，發(fā)現(xiàn)表格三個(gè)層次的問題：

視覺、交互層在無需理解業(yè)務(wù)場(chǎng)景和用戶目標(biāo)的情況下，都較容易發(fā)現(xiàn)，屬基礎(chǔ)問題，但很多「過度留白」的屏效問題往往是信息被組織方式的差異導(dǎo)致的「過度留白」。

綜上我們提出假設(shè)：為提高屏效，可從視覺、交互、信息三個(gè)層次解決

視覺層為提高信息查閱速度，可以通過提高信息密度；交互層為提高操作速度，可以縮短當(dāng)前手勢(shì)到目標(biāo)之間的距離；信息層為提高信息被理解的速度，可以通過重組織等方式。

基于假設(shè)，我們進(jìn)行了進(jìn)一步的桌面研究，查閱論文等書籍，尋找設(shè)計(jì)理論的驗(yàn)證和指導(dǎo)。

競(jìng)品分析｜尋找實(shí)踐證據(jù)，謹(jǐn)慎驗(yàn)證

我們知道視覺上界面留白過多（過疏會(huì)增加滾屏成本，過密因易串行而影響閱讀效率），以表格「行高」為例，探索各表格在字號(hào)、字高和行高的關(guān)系，因?yàn)椴煌煮w的同字號(hào)實(shí)際像素高度會(huì)有差異，因此選擇的是字高（即文字垂直高度的視覺大?。┒亲痔?hào)或字行高，決定留白的兩個(gè)重要因子是字高和表格行高，以次推演，界面元素和元素間距的留白關(guān)系，探究在視覺層怎樣的留白率能保證甚至提升屏效。

以數(shù)據(jù)產(chǎn)品中的表格為例，通過直接和間接競(jìng)對(duì)的方式，分別從數(shù)據(jù)的查閱（視覺）、分析（交互）維度進(jìn)行功能點(diǎn)和設(shè)計(jì)細(xì)節(jié)上的比對(duì)，來看看優(yōu)秀產(chǎn)品是如何解決屏效問題。

直接競(jìng)對(duì)：內(nèi)部用戶口碑較好的產(chǎn)品 A、B外界競(jìng)對(duì)：同領(lǐng)域的 Tableau、網(wǎng)易有數(shù)、金山、微軟表格；間接競(jìng)對(duì)：谷歌郵箱、AntD 等的緊湊主題的常規(guī)列表（一維表格）

通過競(jìng)品分析可以發(fā)現(xiàn)，數(shù)據(jù)分析領(lǐng)域的表格留白率普遍較低（信息密度高），尤其是金山和微軟的電子表格，其次是同類面向數(shù)據(jù)用戶的 Tableau、網(wǎng)易有數(shù)，而谷歌郵箱等工作臺(tái)常用的常規(guī)列表緊湊版本中，留白率和數(shù)據(jù)領(lǐng)域的電子表格不相上下。

緊湊版的使用場(chǎng)景也常常是面對(duì)數(shù)據(jù)量巨大的信息呈現(xiàn)，通過切換緊湊主題，提升信息的快速瀏覽，而這也非常適合數(shù)據(jù)分析場(chǎng)景中巨大的數(shù)據(jù)量呈現(xiàn)。因此我們的產(chǎn)品在留白率的提升空間極大，而在實(shí)際案例實(shí)踐中，也已經(jīng)將表格行高優(yōu)化至 30px，克制的使用留白。

除此外，競(jìng)品其他層次的設(shè)計(jì)也做了比對(duì)，總結(jié)來看整體設(shè)計(jì)做法：高密度、少屏數(shù)、少留白等。

文字陷阱：中英文字高不等于字號(hào)

舉個(gè)容易犯錯(cuò)的競(jìng)品參考是，谷歌在緊湊版主題下字號(hào) 12px，列表行高是 28px，但在 AntD Table 中同樣的 12px 和列表行高 28px 就會(huì)發(fā)現(xiàn)非常擁擠，缺乏呼吸感。

原因在于谷歌的 12px 是英文字體，實(shí)際字高只有 10px，而 AntD Table 的語境是中文字偏多，實(shí)際字高有 12px，所以留白的差異在于一個(gè)是 18px（28-10），一個(gè)是 16px（28-12），這也是為什么決定決定留白的兩個(gè)重要因子是「字高」和表格行高，而非「字號(hào)」和表格行高，進(jìn)一步推演，決定界面留白的是「元素視覺高度」和「元素間距」。

論文查閱｜尋找理論證據(jù)，謹(jǐn)慎驗(yàn)證

研究表明，低密度認(rèn)知負(fù)荷低，但高密度任務(wù)完成率高，用戶更喜好

參考資料：論文《基于眼動(dòng)的網(wǎng)頁(yè)對(duì)稱性和復(fù)雜度對(duì)用戶認(rèn)知的影響的研究》

對(duì)于信息，用戶需要需要閱讀（視覺），思考和理解（認(rèn)知），需要點(diǎn)擊按鈕、操作鼠標(biāo)和打字（行動(dòng)），在人機(jī)工程學(xué)中，統(tǒng)稱為負(fù)荷。即認(rèn)知（記憶）負(fù)荷、視覺負(fù)荷、動(dòng)作負(fù)荷，即分別對(duì)應(yīng)用戶體驗(yàn)設(shè)計(jì)的三個(gè)層級(jí)，信息/視覺/交互。而負(fù)荷所花費(fèi)資源從多到少依次為：認(rèn)知 > 視覺 > 行動(dòng)。

認(rèn)知負(fù)荷，舉個(gè)例子，看了但不一定懂了。你是否有這么一種體驗(yàn)——刷抖音，雖然很多（信息密度小，輸出效率低），但可以一直刷下去并且刷很久；而看一門 C4D 教學(xué)視頻，即使就短短十來分鐘（信息密度大，輸出效率高），但是卻要看上半天。因?yàn)樗⒍桃曨l時(shí)，你的輸入效率遠(yuǎn)高于作者的輸出效率，而看一門 C4D 教學(xué)視頻時(shí)，你的輸入效率遠(yuǎn)低于作者的輸出效率?？墒?，輸出效率是客觀的，輸入效率是主觀的。如果輸出效率很高，你可以通過提高自己的輸入效率（比如讓自己成為 C4D 專家）來跟上作者，從而變強(qiáng)；否則輸出效率很低（信息質(zhì)量低），你的輸入效率很高（很專業(yè)），信息于你而言都是無效的。

假設(shè)負(fù)荷總量不變的情況下，那么以上三類場(chǎng)景界面需要對(duì)用戶負(fù)擔(dān)分配大致如下，官網(wǎng)品宣類需要低認(rèn)知成本，低視覺負(fù)擔(dān)，視覺要求高，用戶才會(huì)被吸引過來閱讀，甚至酷炫的交互更能增加互動(dòng)體驗(yàn)而帶來的趣味感，比如蘋果官網(wǎng)，信息量極少、圖版率高帶來極具藝術(shù)的視覺體驗(yàn)、進(jìn)而吸引用戶愿意跟隨屏幕滾動(dòng)漸進(jìn)式接受信息，而 B 端應(yīng)用因?yàn)槭菍I(yè)使用，首先認(rèn)知方面隨著員工的專業(yè)度提高而降低，因此可以通過提高視覺負(fù)擔(dān)，來降低行動(dòng)負(fù)擔(dān)，進(jìn)而減少操作用時(shí)，當(dāng)然最佳情況是三個(gè)維度能整體降低負(fù)擔(dān)，讓總負(fù)擔(dān)降低，就需要更多設(shè)計(jì)巧思了。

面向內(nèi)部設(shè)計(jì)師和終端用戶投放的《高屏效訴求調(diào)研》預(yù)設(shè)解決方案中，設(shè)計(jì)師常用的 Top 3 做法為：【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點(diǎn)擊跳轉(zhuǎn)。

實(shí)踐階段-如何設(shè)計(jì)

通過以上的探索，我們可以確定的是，B 端產(chǎn)品面向?qū)I(yè)人員的工作界面設(shè)計(jì)中，提高屏效可從視覺、交互、信息三個(gè)層次進(jìn)行，視覺層-高密度，即提高屏幕信息密度；交互層-低跳轉(zhuǎn)，通過減少頁(yè)面跳轉(zhuǎn)、手勢(shì)與常用操作的距離等；信息層-有效性，通過重組織或輔助信息幫助用戶理解，甚至提供幫助手冊(cè)等以提高用戶專業(yè)能力。

基于以上的總結(jié)，對(duì)產(chǎn)品進(jìn)行優(yōu)化。下面以一個(gè)簡(jiǎn)單案例進(jìn)行設(shè)計(jì)策略的解讀。一位運(yùn)營(yíng)同學(xué)想對(duì)比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，尋找運(yùn)營(yíng)機(jī)會(huì)點(diǎn)。

如下表格經(jīng)過高屏效策略優(yōu)化前后對(duì)比圖，優(yōu)化前相同維度下不同人群數(shù)量的對(duì)比需要視線來回跳動(dòng)比對(duì)，而優(yōu)化后的表格內(nèi)容，更符合用戶看差異場(chǎng)景下分析目的數(shù)據(jù)查閱，視線鎖定相同維度，即可快速比對(duì)數(shù)值大小。

下面以視覺、交互、信息三個(gè)層次解剖設(shè)計(jì)過程背后的思考。

視覺層｜高密度-克制的留白

眼動(dòng)理論：研究表明，人眼最小可視視角 0.3 度，水平最大眼動(dòng)舒適轉(zhuǎn)動(dòng)區(qū) 30度，垂直最大眼動(dòng)舒適轉(zhuǎn)動(dòng)區(qū) 55度?？傻贸鋈搜圩钚∽R(shí)別范圍 12px，水平視野舒適眼動(dòng)寬 1200px，垂直視野舒適眼動(dòng)高 2200px。參考資料：論文《基于眼動(dòng)交互的用戶界面設(shè)計(jì)與研究》

如圖，縮小表格行高的同時(shí)，目標(biāo)信息之間的眼動(dòng)距離隨之縮短，在眼動(dòng)舒適區(qū)內(nèi)看到更多信息，便于信息的高效獲取。

交互層｜低跳轉(zhuǎn)-高頻信息前置

理論基礎(chǔ)：菲茨定律是用來預(yù)測(cè)從任意一點(diǎn)到目標(biāo)位置所需時(shí)間的數(shù)學(xué)模型，它由保羅·菲茨在1954年首先提出。這個(gè)模型考慮了用戶定位點(diǎn)的初始位置與目標(biāo)的相對(duì)距離、目標(biāo)的大小、移動(dòng)的最短時(shí)間。三者之間關(guān)系公式為：T=a+blog2(D/W+1)，W為其中目標(biāo)的大??；D為到目標(biāo)的距離；T為移動(dòng)到目標(biāo)所用最短時(shí)間。參考資料：菲茲定律

表格單元格借助交互狀態(tài)，增加懸浮出現(xiàn)的信息組件，前置顯示目標(biāo)單元格明細(xì)信息，同時(shí)通過交互出現(xiàn)的指示器輔助行列信息的獲取，高頻操作考慮手勢(shì)位置放置，縮短與操作目標(biāo)的距離，以提高整體操作效率。

信息層｜有效性-信息重組織

理論基礎(chǔ)：交互設(shè)計(jì)四大策略「組織、刪除、隱藏、轉(zhuǎn)移」參考資料：《簡(jiǎn)約至上》

用戶為了對(duì)比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，但內(nèi)容的重組織方式讓兩數(shù)據(jù)行需要頻繁點(diǎn)擊滾動(dòng)條來查看，根據(jù)用戶目標(biāo)，將關(guān)聯(lián)性大的數(shù)據(jù)放置相鄰列（即將要對(duì)比的人群放置列頭），即可快速查閱，減少眼跳距離。

結(jié)語

設(shè)計(jì)趨勢(shì)中常見的大字體大留白界面，但在 B 端場(chǎng)景中，面對(duì)緊張的工作節(jié)奏，時(shí)間和注意力變得尤為可貴，相對(duì)而言，基于復(fù)雜度守恒定律， B 端信息量大且高頻訪問的產(chǎn)品中，「用得快」要比「看得美」更重要，「高密度」「低跳轉(zhuǎn)」詮釋的即是「空間換時(shí)間」，少一次點(diǎn)擊，少一次跳轉(zhuǎn)，少一份等待，就多一份時(shí)間和效率。

免責(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ì)公司，為期望卓越的國(guó)內(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ù)

搜索動(dòng)作在App中依靠搜索框來完成，好用的搜索框很大程度上決定了產(chǎn)品的搜索體驗(yàn)如何。大多數(shù)搜索框存在相似性，但真正好的搜索框會(huì)在細(xì)節(jié)上為用戶帶來差異化的反饋，帶來很暖很貼心的感覺。

1、搜索框結(jié)構(gòu)分析 

從體驗(yàn)層面上看，一個(gè)良好的用戶體驗(yàn)需要具備完整的流程。搜索框的使用流程可以簡(jiǎn)單劃分為：

使用前-找到搜索框入口；使用中-點(diǎn)擊輸入內(nèi)容；使用后-展示搜索結(jié)果。

其中使用中會(huì)涉及到跳轉(zhuǎn)和輸入兩種不同的狀態(tài)，在下面的文章里我會(huì)展開來分析。

2、搜索框的常見類型 

回想常用App的搜索框，好像它們的樣式看起來差別并不是很大，但其實(shí)每個(gè)搜索框的細(xì)節(jié)都是經(jīng)過精心設(shè)計(jì)的，下面總結(jié)了幾種常見的搜索框類型。

搜索圖標(biāo)

頁(yè)面上只提供一個(gè)放大鏡圖標(biāo)，通常需要用戶點(diǎn)擊圖標(biāo)后才能跳轉(zhuǎn)到搜索頁(yè)面，例如小紅書就將搜索圖標(biāo)放置在頁(yè)面右上角。

基本搜索框

基本的搜索框組成包括放大鏡圖標(biāo)、文字提示、輸入框三部分。微信主頁(yè)的搜索框采用了這種基本形式，文字提示為搜索，簡(jiǎn)潔清晰。

文字提示類搜索框

和基本搜索框的唯一不同的地方在于，這類搜索框中的文字提示部分不再是搜索兩個(gè)字，而是根據(jù)產(chǎn)品需求支持預(yù)置多組文字提示并在搜索框內(nèi)循環(huán)展示。

▲ 在大眾點(diǎn)評(píng)的頂部搜索框中，文字提示部分循環(huán)展示了三組不同的內(nèi)容，引導(dǎo)用戶快速檢索到好吃和好玩的。

功能類搜索框

之所以叫做功能類搜索框，是在文字提示類搜索框的基礎(chǔ)上根據(jù)產(chǎn)品功能的需要額外添加了常用的功能性圖標(biāo)，如掃碼圖標(biāo)、拍照?qǐng)D標(biāo)、語音圖標(biāo)等，賦予搜索框更多的功能屬性。

▲ 經(jīng)常使用豆瓣看書評(píng)的同學(xué)可能會(huì)注意到豆瓣主頁(yè)的搜索框中有一個(gè)掃碼圖標(biāo)，點(diǎn)擊之后可以快速掃描圖書條碼或二維碼，快速識(shí)別書的內(nèi)容，省去檢索的麻煩。

▲ 淘寶搜索框的組成更復(fù)雜，除了支持掃碼外還有相機(jī)圖標(biāo)，方便用戶拍照識(shí)別商品。 

3、搜索框設(shè)計(jì)狀態(tài)分析 

使用搜索框搜索的過程總體可以分為四部分：搜索前、點(diǎn)擊搜索框、輸入中、搜索后。設(shè)計(jì)分析過程中我們要先理清整體的搜索流程，再考慮每個(gè)狀態(tài)對(duì)應(yīng)的交互細(xì)節(jié)及反饋，這樣才能保持邏輯清晰。

搜索前-默認(rèn)狀態(tài)

位置

大多數(shù)搜索框出現(xiàn)在頁(yè)面頂部，作為一個(gè)大的觸摸目標(biāo)更符合用戶的認(rèn)知習(xí)慣，更容易被用戶發(fā)現(xiàn)和使用。

▲ 在蘋果自帶的地圖應(yīng)用中，搜索框放在頁(yè)面中部偏下的位置，相比于頂部搜索框，這樣的位置分布更方便用戶單手操作。

樣式

搜索前的狀態(tài)除了前面講的幾種常見的搜索框樣式外，有些產(chǎn)品會(huì)直接在搜索框增加“搜索”按鈕。

▲ 阿里系產(chǎn)品包括淘寶、支付寶、閑魚等主頁(yè)搜索框都額外添加了“搜索”按鈕，相比于點(diǎn)擊搜索框再點(diǎn)擊鍵盤搜索內(nèi)容推薦，直接點(diǎn)擊按鈕簡(jiǎn)化了搜索流程。

點(diǎn)擊后-獲取焦點(diǎn)

搜索框

點(diǎn)擊搜索框后，框內(nèi)的放大鏡圖標(biāo)會(huì)消失，出現(xiàn)閃爍的光標(biāo)引導(dǎo)用戶輸入，搜索框右側(cè)會(huì)出現(xiàn)“取消”按鈕。

▲ 點(diǎn)擊大眾點(diǎn)評(píng)的搜索框后，搜索頁(yè)會(huì)出現(xiàn)三個(gè)選項(xiàng)，點(diǎn)擊每一個(gè)選項(xiàng)，搜索框內(nèi)的文字提示都會(huì)改變，有效幫助用戶提升搜索準(zhǔn)確度，雖然是很小的點(diǎn)但做的很用心。

鍵盤

點(diǎn)擊搜索框后會(huì)彈起鍵盤，在不輸入內(nèi)容的情況下，點(diǎn)擊鍵盤自帶的“搜索”按鈕能查詢搜索框中推薦的內(nèi)容。

搜索頁(yè)

搜索頁(yè)的內(nèi)容通常包括歷史搜索、搜索發(fā)現(xiàn)、熱門推薦等版塊，記錄用戶的搜索行為，推薦目標(biāo)商品或服務(wù)，提高轉(zhuǎn)化率。

▲ 豆瓣將最熱門的內(nèi)容都展現(xiàn)在搜索頁(yè)中，包括實(shí)時(shí)更新的熱門書影音榜單、熱門小組、熱門話題等，為用戶提供有效的引導(dǎo)。

關(guān)于歷史搜索我們還可以繼續(xù)深入分析，思考這些記錄怎么排序、最多顯示幾條記錄……

▲ 網(wǎng)易云音樂的歷史搜索最多可以保留10條，采用橫向滑動(dòng)的手勢(shì)交互可以節(jié)省屏幕空間。根據(jù)內(nèi)容長(zhǎng)短一屏一次可以顯示2-3條記錄，這會(huì)導(dǎo)致排在后面的歷史記錄不容易被用戶快速發(fā)現(xiàn)。

▲ 淘寶的歷史搜索可以容納更多的數(shù)量，當(dāng)搜索記錄超過兩行時(shí)會(huì)有一個(gè)小的展開按鈕，點(diǎn)擊按鈕可以查看早期的記錄，這樣既能節(jié)省屏幕空間也能最大化容納歷史記錄。

搜索中-輸入內(nèi)容

刪除/取消

當(dāng)開始輸入內(nèi)容時(shí)，在搜索框的右側(cè)會(huì)出現(xiàn)刪除圖標(biāo)，方便用戶一鍵刪除輸入的內(nèi)容，這里要注意區(qū)分刪除和取消的區(qū)別。

▲ 在淘寶中點(diǎn)擊“刪除”圖標(biāo)，頁(yè)面會(huì)返回到上一級(jí)也就是搜索頁(yè)；

▲ 點(diǎn)擊“取消”按鈕，頁(yè)面會(huì)直接返回到主頁(yè)也就是搜索前的狀態(tài)。

搜索提示

在用戶輸入內(nèi)容時(shí)，產(chǎn)品會(huì)根據(jù)用戶輸入的內(nèi)容提供相對(duì)應(yīng)的搜索推薦，這是搜索框的必備的交互反饋。

通過合理的詞條推薦能極大降低用戶的思考時(shí)間，提高搜索效率，同時(shí)省去再次點(diǎn)擊搜索按鈕的流程，降低用戶的操作步驟。

字?jǐn)?shù)限制

目前我所知道的大多數(shù)App在搜索時(shí)都沒有字?jǐn)?shù)限制問題。

回顧一下搜索使用場(chǎng)景會(huì)發(fā)現(xiàn)用戶在搜索框內(nèi)輸入任何內(nèi)容都是有可能的，盡量不要約束用戶的輸入內(nèi)容。無論用戶輸入多少內(nèi)容，點(diǎn)擊都可以完成基本的搜索操作，這樣整個(gè)流程才完整。

▲ 在百度中輸入過多字符時(shí)，會(huì)提示查詢限制在38個(gè)漢字以內(nèi)，多的字符會(huì)被忽略，雖然給出了提示但并未打斷用戶的操作流程，可以讓用戶繼續(xù)完成搜索。

搜索后-展示結(jié)果

符合預(yù)期

搜索的理想狀態(tài)是搜索到的結(jié)果符合用戶的預(yù)期，滿足用戶的搜索需求，并把最吻合的搜索結(jié)果排在前面，為用戶帶來清晰的結(jié)果展示。

智能提示

智能提示是對(duì)用戶輸入內(nèi)容上的一種提示或糾正，如果用戶輸入的內(nèi)容有問題或不夠標(biāo)準(zhǔn)，在搜索結(jié)果中會(huì)能給最貼切的搜索結(jié)果。

▲ 在淘寶中輸入“shouji”或“souji”，淘寶會(huì)根據(jù)拼音給出“手機(jī)”的搜索結(jié)果，但仍保留原標(biāo)簽，方便用戶再次點(diǎn)擊搜索；輸入“手ji”時(shí)，會(huì)直接給出“手機(jī)”標(biāo)簽，這種差異化的反饋能更好的為用戶服務(wù)。

無結(jié)果提示

如果沒有搜索到用戶輸入的內(nèi)容，搜索頁(yè)會(huì)顯示一個(gè)空狀態(tài)，提示用戶沒有搜索結(jié)果。關(guān)于空狀態(tài)如何設(shè)計(jì)可以看我之前寫的一篇文章——如何做好「空狀態(tài)」設(shè)計(jì)？來看資深設(shè)計(jì)師的總結(jié)！詳細(xì)分析了空狀態(tài)的設(shè)計(jì)方法。

▲ 相比于直接顯示搜索無結(jié)果的狀態(tài)，拼多多的搜索結(jié)果首先會(huì)標(biāo)明相關(guān)商品較少，然后將搜索內(nèi)容拆分成不同的標(biāo)簽進(jìn)一步引導(dǎo)用戶來發(fā)現(xiàn)內(nèi)容。

免責(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ì)公司，為期望卓越的國(guó)內(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ù)

信息架構(gòu)這篇是本人在現(xiàn)階段覺得較難學(xué)習(xí)與闡述的知識(shí)點(diǎn)，網(wǎng)上關(guān)于信息架構(gòu)的知識(shí)內(nèi)容也是參差不齊。在學(xué)習(xí)與探究的過程中查閱了很多資料，反復(fù)修改多次，盡量用直白的語言結(jié)合實(shí)例來闡述信息架構(gòu)。目錄如下：

大家可以根據(jù)上述目錄來進(jìn)行選擇性閱讀，當(dāng)然全文閱讀也是極好的～

1.1 前言

這篇文章的起源，來源于最近看到的話題“B端設(shè)計(jì)師會(huì)被組件庫(kù)取代嗎？”。從表面上看，在組件庫(kù)越來越完善的時(shí)代，很多頁(yè)面設(shè)計(jì)依靠組件庫(kù)就能夠快速搭建。

那么在這種情況下，B端設(shè)計(jì)師存在的意義和價(jià)值到底體現(xiàn)在哪里呢？其實(shí)B端設(shè)計(jì)的重點(diǎn)并不在頁(yè)面的視覺上，視覺只是作為設(shè)計(jì)師最終輸出成果的一小部分。個(gè)人認(rèn)為B端設(shè)計(jì)師工作重心體現(xiàn)在做「正確的設(shè)計(jì)」，比如以下幾個(gè)方面：

1.這個(gè)設(shè)計(jì)能否完成對(duì)應(yīng)的商業(yè)目標(biāo)和產(chǎn)品目標(biāo)；

2.我們的信息呈現(xiàn)是否合理以及能否解決當(dāng)前需求；

3.用戶能否在頁(yè)面上快速找到想要的信息；

而想要弄清楚并解決上述這些問題，在眾多的話題闡述之下，我發(fā)現(xiàn)其論述本質(zhì)上都逃離不了「信息架構(gòu)」這個(gè)概念。因此我認(rèn)為設(shè)計(jì)師都需要對(duì)這個(gè)概念有充分的認(rèn)知，這能夠幫助我們做出正確且出色的設(shè)計(jì)。

1.2信息架構(gòu)概念

關(guān)于信息架構(gòu)的概念，在百科上面的定義大部分都比較晦澀難懂，比如維基百科和百度百科的解釋：

相信大部分人都很難明白其中描述的意思。在這里換種思路，將信息架構(gòu)拆分為信息與架構(gòu)去理解。

信息指的是內(nèi)容的載體，常見的文字、圖像等都是信息；架構(gòu)的含義則形容對(duì)應(yīng)的組織和結(jié)構(gòu)。那么信息架構(gòu)就是將信息通過一定的形式組織起來，然后呈現(xiàn)出來。其本質(zhì)就是研究信息的表達(dá)與傳遞。

通俗點(diǎn)講，信息架構(gòu)就是讓用戶可以更容易的理解我們的產(chǎn)品，讓用戶在使用我們的產(chǎn)品時(shí)可以更順利、更自然。因此信息架構(gòu)沒有一個(gè)具體的呈現(xiàn)形式，它更多的是體現(xiàn)在產(chǎn)品設(shè)計(jì)的各方面。具體主要表現(xiàn)為組織系統(tǒng)、標(biāo)簽系統(tǒng)、導(dǎo)航系統(tǒng)和搜索系統(tǒng)。

為什么需要信息架構(gòu)？我們都知道B端產(chǎn)品設(shè)計(jì)的核心是「降本提效」，在設(shè)計(jì)這一側(cè)的可以將其理解為降低認(rèn)知成本，提升使用效率。

降低認(rèn)知成本需要我們更好的表達(dá)信息，讓用戶能看明白我們的產(chǎn)品能夠做什么，如何用；提升使用效率需要提升信息的傳遞效率，讓用戶能夠很容易的找到需要的功能；

而信息架構(gòu)從本質(zhì)上來講也正是研究信息的表達(dá)和傳遞。因此我們需要通過它來幫助我們更好的完成B端產(chǎn)品設(shè)計(jì)。如果沒有信息架構(gòu)來作底層支撐，那么我們?cè)陧?yè)面上看到的可能就只有功能的堆疊，讓產(chǎn)品陷入難以上手或者不知道怎么用的尷尬境地。

一個(gè)強(qiáng)大信息架構(gòu)是產(chǎn)品質(zhì)量的保證，是作為設(shè)計(jì)支撐點(diǎn)的骨架，它會(huì)減少可用性問題，提升整體導(dǎo)航行，創(chuàng)造對(duì)用戶友好的體驗(yàn)。比如舉一個(gè)工具層面的例子：

PS的工具欄堆疊在界面各個(gè)部分，而Figma的工具欄則集中在右側(cè)且只出現(xiàn)當(dāng)前需要的功能。很明顯Figma在信息架構(gòu)中的信息組織部分做得更為友好，PS則會(huì)顯得遜色一些。這也是我們?cè)趯W(xué)習(xí)PS的時(shí)候會(huì)顯得比較吃力的原因之一。

可以說良好的信息架構(gòu)是高效用戶體驗(yàn)的基礎(chǔ)。視覺元素，功能，交互和導(dǎo)航都是在信息架構(gòu)的基礎(chǔ)上構(gòu)建的。因此想要做出體驗(yàn)好且合理的頁(yè)面設(shè)計(jì)，我們就需要參與到信息架構(gòu)這個(gè)過程中來，和產(chǎn)品一起完成對(duì)應(yīng)架構(gòu)的梳理。而不是只完成從原型到頁(yè)面這個(gè)部分。

如果想要搭建一個(gè)好的建筑，我們需要知道其建造的目的，是按照什么樣的結(jié)構(gòu)搭建，內(nèi)部有哪些系統(tǒng)，以及最后呈現(xiàn)的模樣。

那么信息架構(gòu)也同理，我們首先需要知道信息是為了什么目標(biāo)服務(wù)，然后我們通過怎樣的結(jié)構(gòu)來組織這些信息，以及過程中會(huì)用到的信息元素，最后如何呈現(xiàn)它們。這都是我們?cè)诖罱ㄐ畔⒓軜?gòu)中需要進(jìn)行的必要步驟。如果某些環(huán)節(jié)沒有做好或者沒有了解透徹，那么在輸出信息架構(gòu)時(shí)往往會(huì)出現(xiàn)方向或者策略上的問題。接下來我們看看這些步驟是如何具體呈現(xiàn)的。

3.1 信息獲取：先理解業(yè)務(wù)，再談架構(gòu)

B端行業(yè)對(duì)于業(yè)務(wù)理解的要求是比較高的，只有在理解業(yè)務(wù)的基礎(chǔ)上，將業(yè)務(wù)需求轉(zhuǎn)化為對(duì)應(yīng)的設(shè)計(jì)目標(biāo)，我們才能夠輸出合理的信息架構(gòu)方案。

個(gè)人認(rèn)為理解業(yè)務(wù)的基礎(chǔ)，就是能夠用一句話講清楚當(dāng)前設(shè)計(jì)的產(chǎn)品。這句話可以描述為：誰在什么地方想要完成什么目標(biāo)。比如「用戶想要不出門就能夠吃到東西」，這就是外賣軟件提供的產(chǎn)品服務(wù)。

雖然看上去這句話很簡(jiǎn)單，但其中包括了三個(gè)要素：用戶、場(chǎng)景和目標(biāo)。因此我們?cè)诜治龊褪崂順I(yè)務(wù)的過程中首先要弄清楚的就是這三個(gè)要素。

3.1.1用戶：分清購(gòu)買者與使用者

用戶永遠(yuǎn)是排在第一位的，也是我們首先需要弄清楚的。在B端設(shè)計(jì)中，本質(zhì)上可以分為兩類角色：客戶和用戶。比如我們常用的釘釘或企業(yè)微信，購(gòu)買客戶是企業(yè)，實(shí)際用戶是員工。

對(duì)于企業(yè)：「我想要有一款軟件可以更好的管理員工」

對(duì)于員工：「我想要這款軟件能夠更好地提高工作效率」

客戶決定了我們產(chǎn)品的購(gòu)買（部分情況下也兼顧使用），而用戶則決定了后續(xù)產(chǎn)品的復(fù)購(gòu)率。因此在業(yè)務(wù)理解中，我們需要弄清楚當(dāng)前產(chǎn)品所處的服務(wù)階段，比如初期為了打開市場(chǎng)肯定更傾向于客戶，而中后期為了提高產(chǎn)品的使用體驗(yàn)又會(huì)偏向于用戶。

因此我們首先需要弄清楚的就是當(dāng)前產(chǎn)品是為哪些「目標(biāo)用戶」服務(wù)，這也就決定了我們?cè)谠O(shè)計(jì)信息架構(gòu)時(shí)對(duì)應(yīng)的不同側(cè)重點(diǎn)。

3.1.2場(chǎng)景：需求源于場(chǎng)景

場(chǎng)景是指需求產(chǎn)生的某種條件，這個(gè)條件包括但不限于環(huán)境、時(shí)間、地點(diǎn)、空間等，只有上述條件滿足，這個(gè)需求才能成立。這里可以把場(chǎng)景理解為產(chǎn)生該問題的原因。

比如當(dāng)用戶提出「她需要一件衣服」，那么我們就需要弄清楚用戶為什么需要添加衣服，是她感冒了自身覺得冷還是因?yàn)橥饨绛h(huán)境冷。這兩種場(chǎng)景涉及到的解決方案是完全不一樣的。

在平日的工作中我們可以通過以下兩種方式來更好的了解業(yè)務(wù)場(chǎng)景：

1.通過業(yè)務(wù)方文檔進(jìn)行業(yè)務(wù)背景的初步理解。業(yè)務(wù)文檔中一般都會(huì)包括需求背景，我們可以通過文檔進(jìn)行初步了解。

2.通過業(yè)務(wù)溝通進(jìn)一步加深業(yè)務(wù)背景的理解。由于很多B端業(yè)務(wù)離設(shè)計(jì)師本身的生活比較遠(yuǎn)。因此對(duì)于需求背景中不理解或者比較模糊的部分，我們可以通過與業(yè)務(wù)方或產(chǎn)品多次溝通來挖掘最底層的背景。

畢竟需求背景是理解業(yè)務(wù)的重要步驟，我們只有知道需求產(chǎn)生的原因，才能夠針對(duì)性的給出解決方案。

3.1.3目標(biāo)：業(yè)務(wù)目標(biāo)和設(shè)計(jì)目標(biāo)

目標(biāo)決定了我們的產(chǎn)品最終的方向。我們首先接觸到的一般都是業(yè)務(wù)目標(biāo)，而我們要做的就是將業(yè)務(wù)目標(biāo)轉(zhuǎn)化為我們此次的設(shè)計(jì)目標(biāo)。

A.業(yè)務(wù)目標(biāo)

業(yè)務(wù)目標(biāo)就是此次業(yè)務(wù)想要解決的實(shí)際問題，它通常是一個(gè)宏觀上的描述。比如打車軟件的業(yè)務(wù)目標(biāo)簡(jiǎn)單概括來講就是讓用戶能夠更快速地打到車，減少等待焦慮。我們一般通過文檔或者溝通來了解該目標(biāo)。

B.設(shè)計(jì)目標(biāo)

設(shè)計(jì)目標(biāo)是我們基于業(yè)務(wù)目標(biāo)而給出的設(shè)計(jì)策略，是一種更具體的實(shí)現(xiàn)方式。比如我們要讓用戶快速的打到車，那么這個(gè)時(shí)候我們的設(shè)計(jì)目標(biāo)就是通過將用戶位置和司機(jī)位置進(jìn)行快速匹配，并通過超時(shí)補(bǔ)貼紅包的方案來降低用戶焦慮。從而實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。而這一過程涉及到的信息點(diǎn)就有：司機(jī)位置、乘客位置、等車時(shí)間、補(bǔ)貼金額等元素，并需要思考它們之間的關(guān)系和呈現(xiàn)方式。

可以發(fā)現(xiàn)從業(yè)務(wù)目標(biāo)轉(zhuǎn)化到設(shè)計(jì)目標(biāo)這個(gè)過程，實(shí)際上就是在確定功能和信息點(diǎn)的過程。這樣才能讓我們更好地設(shè)計(jì)信息架構(gòu)。

3.2信息架構(gòu)核心：信息組織

從前文可以看出我們會(huì)在整體設(shè)計(jì)過程中出現(xiàn)很多的信息元素。如果不經(jīng)過對(duì)應(yīng)的組織和處理，直接堆疊在一起，那么信息含義會(huì)比較亂且難以調(diào)用。比如下方：

而右側(cè)圖片信息的組織過程可以理解為通過將零散的數(shù)據(jù)信息進(jìn)行分類，再以某種結(jié)構(gòu)化的形式將它們重新組合排布的過程，直白一點(diǎn)就是先分類，再結(jié)構(gòu)化呈現(xiàn)。我用一張圖來表明這個(gè)過程：

那么這個(gè)過程中「信息組織」和「結(jié)構(gòu)呈現(xiàn)」到底應(yīng)該怎么做，也就是接下來要講的組織方式和結(jié)構(gòu)類型。

3.2.1組織方式：模糊分類和精確分類

組織方式可以分為精確分類和模糊分類。精確分類就是我們會(huì)利用物體本身物理屬性來進(jìn)行分類，比如位置、字母表、時(shí)間、類別、層級(jí)等方式進(jìn)行組織。一些工具類應(yīng)用例如滴答清單內(nèi)容信息都是按照時(shí)間來進(jìn)行組織的：

而模糊分類則是按照更為主觀的邏輯對(duì)信息進(jìn)行分類, 如主題、任務(wù)、用戶、隱喻等來進(jìn)行歸類，比如我們常用的APP商城是按照不同的主題類別來進(jìn)行區(qū)分的。

但在很多時(shí)候，產(chǎn)品傾向于將兩種組織方式結(jié)合起來形成復(fù)合型組織方式，從而能夠使我們的整體組織形式更符合用戶的使用習(xí)慣。比如藍(lán)湖的信息組織，其中既包含了模糊分類（按使用類型等分類），也包含了精確分類（按上傳文件時(shí)間等）。

其實(shí)在大部分B端產(chǎn)品中，大都按照模糊分類來進(jìn)行處理，比如按照任務(wù)、流程等方式。而精確分類更多用于在頁(yè)面內(nèi)的局部信息模塊，比如創(chuàng)建時(shí)間和文件大小等。

歸根結(jié)底，我們分類方式的選擇需要結(jié)合我們前面提到的用戶、場(chǎng)景和目標(biāo)，這樣才能讓我們的分類更具說服力。

3.2.2組織結(jié)構(gòu)：選擇合適的結(jié)構(gòu)類型

當(dāng)信息按照分類維度組織后，我們接下來就是把整體信息進(jìn)行結(jié)構(gòu)化，這樣才可以將信息整體連接起來并呈現(xiàn)出來。一般分為以下四種組織方式：

A.層級(jí)結(jié)構(gòu)（最重要的結(jié)構(gòu)）

這是信息架構(gòu)中最為常見的結(jié)構(gòu)，也是比較符合用戶認(rèn)知的結(jié)構(gòu)。有時(shí)也稱為「樹狀結(jié)構(gòu)」。以子父節(jié)點(diǎn)的形式一層一層延展。

層級(jí)結(jié)構(gòu)的優(yōu)勢(shì)就在于可以承載復(fù)雜的多層級(jí)內(nèi)容，通過層級(jí)遞進(jìn)的方式將復(fù)雜的多層級(jí)拆解得更簡(jiǎn)潔。

但我們需要把控好內(nèi)容的廣度和深度，廣度指的是在層級(jí)結(jié)構(gòu)中每一層的數(shù)目，最好控制在7個(gè)以內(nèi)。如果廣度太寬意味著每個(gè)頁(yè)面會(huì)給用戶展示太多的信息，增加尋找內(nèi)容的負(fù)擔(dān)。深度為縱向結(jié)構(gòu)，建議一般3層，最多不超過5層。過深的層級(jí)會(huì)讓用戶點(diǎn)擊很多次，且不容易被用戶發(fā)現(xiàn)。比如飛書的基本信息架構(gòu)也是主要以層級(jí)結(jié)構(gòu)來進(jìn)行的。

B.矩陣結(jié)構(gòu)（多維度結(jié)構(gòu)）

矩陣結(jié)構(gòu)是各個(gè)節(jié)點(diǎn)都相互連接的一種信息架構(gòu)方式，通俗來講就是用戶既可以通過多個(gè)維度去觸達(dá)同一信息，也可以從單個(gè)維度連接多種信息。

這種結(jié)構(gòu)其實(shí)就更類似于我們?cè)谧鱿嚓P(guān)功能時(shí)：比如當(dāng)你進(jìn)入電影全屏?xí)r想要退出時(shí)，既可以通過點(diǎn)擊按鈕退出，還可以通過鍵盤的Esc返回到，通過多點(diǎn)觸達(dá)同一操作。

又比如我們的聯(lián)系人功能，我們既可以通過輸入數(shù)字撥打電話，也可以查找聯(lián)系人進(jìn)行撥打，還可以查詢電話記錄進(jìn)行回?fù)堋?

矩陣結(jié)構(gòu)最重要的意義在于給用戶提供多種路徑，使用戶能夠在不同路徑中尋找各自想要的東西。

C.自然結(jié)構(gòu)（隨機(jī)性）

自然結(jié)構(gòu)不遵循任何一致的模式，節(jié)點(diǎn)都是被逐一連接起來的。

自然結(jié)構(gòu)一般都具有隨機(jī)性和不確定性。這種更傾向于泛娛樂化的C端應(yīng)用。比如我們常見視頻網(wǎng)站的在推薦流都是應(yīng)用的自然結(jié)構(gòu)。比如打開B站等視頻平臺(tái)，你很難猜到剛進(jìn)入看到的是什么。

但一般自然結(jié)構(gòu)不會(huì)單獨(dú)存在，比如B站在自然結(jié)構(gòu)中也綁定了層級(jí)結(jié)構(gòu)來進(jìn)行層級(jí)上的劃分。

D.線性結(jié)構(gòu)（單一性）

線性結(jié)構(gòu)是非常單一的一個(gè)結(jié)構(gòu)，整體是一層一層向下遞進(jìn)。比較強(qiáng)調(diào)先后順序的一種結(jié)構(gòu)。

這種結(jié)構(gòu)通常用于我們常見的軟件安裝程序等，也可以用于部分功能結(jié)構(gòu)，比如網(wǎng)站的視頻發(fā)布，一般都是經(jīng)過上傳-編輯-發(fā)布這三個(gè)步驟來依次進(jìn)行。

大家可以發(fā)現(xiàn)在進(jìn)行信息架構(gòu)時(shí)，我們?cè)诤芏嗲闆r下可能會(huì)運(yùn)用多種組織結(jié)構(gòu)方式，我們需要根據(jù)對(duì)應(yīng)的用戶決策場(chǎng)景來考慮讓最適合的幾種方式相結(jié)合。但最終目的都是為了讓用戶能夠更快速的獲取信息。

3.2.3注意事項(xiàng)：關(guān)注用戶心智模型

在信息的組織過程中，我們需要注意用戶的心智模型。比如當(dāng)我們看到紅點(diǎn)就知道有新信息通知，看到下拉箭頭就知道可以展開。這是互聯(lián)網(wǎng)產(chǎn)品在無形中給用戶建立的底層習(xí)慣認(rèn)知。用戶目前對(duì)于普遍產(chǎn)品的一些基礎(chǔ)布局、功能名稱和交互邏輯都形成了一定的習(xí)慣，這都屬于用戶的心智模型的內(nèi)容。

因此我們?cè)诮M織信息時(shí)盡可能不要去打破用戶常見的心智模型，否則必然會(huì)導(dǎo)致用戶的不習(xí)慣。我們常見的「掃一掃」功能，微信、支付寶和QQ會(huì)隱藏在「+」號(hào)里面。而微博和抖音卻分別放置在了「我的」和「搜索」里面。

這樣會(huì)導(dǎo)致用戶難以發(fā)現(xiàn)該功能。因?yàn)橛脩艚佑|新的信息時(shí)，會(huì)以最初接觸的局部信息為依據(jù)展開并形成初步認(rèn)知，而用戶認(rèn)知中的信息組織邏輯和實(shí)際信息的吻合度越高, 他在進(jìn)一步查看或?qū)ふ倚畔⒌倪^程中體驗(yàn)會(huì)更順暢, 反之, 若一開始形成的認(rèn)知與實(shí)際信息的差異過大, 在后期的信息搜尋過程中則容易遇到困難。而這個(gè)吻合程度其實(shí)就是用戶心智模型。

雖然建議在一定程度上遵循用戶心智，但并不是說絕對(duì)遵循。對(duì)于用戶不熟知的場(chǎng)景或者某些專業(yè)術(shù)語，我們需要通過靈活有效的提示（比如標(biāo)記注釋等）來引導(dǎo)用戶就可以了。比如我們剛才提出的抖音掃一掃，它的應(yīng)用場(chǎng)景其實(shí)是用于抖音官網(wǎng)后臺(tái)登錄，且在后臺(tái)登錄時(shí)已經(jīng)給出了對(duì)應(yīng)提示，那么這樣的設(shè)計(jì)也是合理的。

3.3信息架構(gòu)支撐：標(biāo)簽、導(dǎo)航和搜索

當(dāng)經(jīng)過上面的信息組織，其實(shí)我們已經(jīng)能夠歸納出一個(gè)大體的信息架構(gòu)框架。但在信息組織之外，我們還需要關(guān)注以下三點(diǎn)：標(biāo)簽、導(dǎo)航和搜索。這對(duì)于信息架構(gòu)的完整性也有非常重要的意義。

3.3.1 標(biāo)簽系統(tǒng)：讓信息識(shí)別更通用

標(biāo)簽系統(tǒng)，通俗來講就是要我們對(duì)當(dāng)前整個(gè)系統(tǒng)信息節(jié)點(diǎn)的命名，從而讓信息的呈現(xiàn)更容易識(shí)別。拿個(gè)最簡(jiǎn)單的例子來進(jìn)行說明：

可以看到左側(cè)和右側(cè)關(guān)于衛(wèi)生間的信息標(biāo)示，可能左邊你能一眼區(qū)分，右邊可能就需要反應(yīng)半天才能猜出到底代表什么含義了。

這其實(shí)就是關(guān)于我們的信息命名是否能夠被大多數(shù)用戶所接受的場(chǎng)景，也就是我們標(biāo)簽作用所起的作用。標(biāo)簽可以分為圖片和文字標(biāo)簽，都需要考慮用戶對(duì)該信息命名的認(rèn)知程度，也就是前面提到的心智模型。那么如何能夠更好的去定義標(biāo)簽名稱呢，這里需要注意2個(gè)方面：

A.優(yōu)先選用被行業(yè)廣泛接受的詞或圖標(biāo)

在進(jìn)行標(biāo)簽定義的時(shí)候，盡量選擇已經(jīng)被用戶所熟知的詞語，比如「工作臺(tái)」「通訊錄」等已經(jīng)被運(yùn)用得非常熟練，對(duì)于類似功能就直接以該形式命名，比如我們的設(shè)計(jì)軟件中，很多圖標(biāo)和功能名稱都是通用的：

這樣做能夠很大程度減少用戶的學(xué)習(xí)成本。因此在B端設(shè)計(jì)中我們也需要注意到我們所在的行業(yè)，哪些名詞已經(jīng)達(dá)成了共識(shí)，就無需再造新名詞。

B.不確定的詞語可以參考競(jìng)品或調(diào)研來決策

當(dāng)某類功能或場(chǎng)景的標(biāo)簽難以確定時(shí)，我們就可以嘗試去找一下競(jìng)品是否有類似功能，或者找該行業(yè)的領(lǐng)頭羊（比如聊天工具的巨頭微信），那么在進(jìn)行標(biāo)簽定義的時(shí)候，可以參考它的命名體系。因?yàn)樗呀?jīng)替我們教育了一部分用戶，會(huì)間接降低學(xué)習(xí)成本。

如果某些標(biāo)簽在上述過程中還是無法確定，那么我們結(jié)合自己經(jīng)驗(yàn)或者與咨詢業(yè)務(wù)相關(guān)人員來進(jìn)行討論，在必要時(shí)候可以在標(biāo)簽旁邊添加注釋來進(jìn)一步說明。

3.3.2 導(dǎo)航系統(tǒng)：讓用戶不迷路

導(dǎo)航系統(tǒng)其實(shí)應(yīng)該是大家比較熟知的一個(gè)系統(tǒng)了。就像使用導(dǎo)航系統(tǒng)來規(guī)劃行程一樣，導(dǎo)航系統(tǒng)都會(huì)存在于每個(gè)網(wǎng)站中。比如我們常見的側(cè)邊導(dǎo)航、頂部導(dǎo)航等。

因?yàn)榫W(wǎng)上關(guān)于導(dǎo)航系統(tǒng)已經(jīng)有很多資料的講解了，在這里闡述下四類導(dǎo)航的含義：

1.全局導(dǎo)航：位于頁(yè)面最上層的導(dǎo)航，用戶幾乎在頁(yè)面的每個(gè)地方都可以看見，是最高層級(jí)的導(dǎo)航系統(tǒng)；

2.局部導(dǎo)航：位于最高導(dǎo)航的下級(jí)子類導(dǎo)航，子類導(dǎo)航并不是必須的導(dǎo)航，根據(jù)場(chǎng)景進(jìn)行取舍；

3.情景式導(dǎo)航：通過點(diǎn)擊文字鏈接進(jìn)行跳轉(zhuǎn)的導(dǎo)航，比如在個(gè)人資料里面植入其它網(wǎng)站的鏈接地址；

4.輔助導(dǎo)航：這里包括網(wǎng)站地圖，網(wǎng)站索引，網(wǎng)站指南等輔助類型的導(dǎo)航。

輔助導(dǎo)航的網(wǎng)站指南包括新手引導(dǎo)和演示教程等?，F(xiàn)階段更巧妙的功能引導(dǎo)，是當(dāng)用戶在進(jìn)行某些功能的操作時(shí)及時(shí)進(jìn)行提示，這樣不僅達(dá)到了為用戶引導(dǎo)的效果，還減少了一連串的新手引導(dǎo)對(duì)于用戶的打擾。比如figma在進(jìn)行組件更新后，只有當(dāng)你調(diào)用組件功能時(shí)，才會(huì)及時(shí)進(jìn)行提醒。

3.3.3 搜索系統(tǒng)：讓用戶輕松找信息

搜索，是我們平日最常用的查找信息的功能，它能夠幫助我們快速進(jìn)行信息的檢索。雖然搜索功能非常重要，但并不是每個(gè)系統(tǒng)每個(gè)頁(yè)面都需要搜索。我們決策是否添加搜索時(shí)需要考慮下列三點(diǎn)：

1:內(nèi)容復(fù)雜度：當(dāng)前頁(yè)面承載的內(nèi)容復(fù)雜度如果較少，對(duì)于簡(jiǎn)單內(nèi)容頁(yè)面往往不需要搜索；

2:內(nèi)容性質(zhì)：當(dāng)前頁(yè)面的性質(zhì)是偏向于用戶瀏覽還是查找，根據(jù)用戶行為來決定是否需要搜索；

3.搜索場(chǎng)景：如果搜索場(chǎng)景很簡(jiǎn)單，考慮是否只用篩選或分類就能夠解決問題；反之如果搜索內(nèi)容很復(fù)雜，我們還可以搜索結(jié)合篩選來更好的查找信息；

上述3點(diǎn)決定了我們是否需要考慮搜索功能。而關(guān)于搜索的其他細(xì)節(jié)點(diǎn)，比如搜索規(guī)則和搜索結(jié)果等，在這里不做進(jìn)一步的闡述。在這篇文章中更重要的是弄清楚我們何時(shí)需要搜索功能。

3.4信息架構(gòu)表達(dá)：視覺化你的架構(gòu)

我們通過上述方法已經(jīng)知道如何梳理信息架構(gòu)了，那么我們應(yīng)該如何呈現(xiàn)它呢。這部分其實(shí)也是很多資料中比較模糊的點(diǎn)。

在學(xué)習(xí)的過程中，發(fā)現(xiàn)部分資料認(rèn)為信息架構(gòu)就是單純的指思維導(dǎo)圖，但實(shí)際上信息架構(gòu)并不能單純只用思維導(dǎo)圖就能夠完全表示。

因?yàn)樾畔⒓軜?gòu)包含了很多部分的內(nèi)容。只能說思維導(dǎo)圖可以是信息架構(gòu)的一種表現(xiàn)形式，其可以幫助我們?cè)谒伎茧A段梳理整體產(chǎn)品的信息構(gòu)成。

這里拋出一個(gè)很有意思的觀點(diǎn)，那就是「功能結(jié)構(gòu)圖」和「信息架構(gòu)圖」到底什么關(guān)系，這里用兩張圖示例：

可以看到，功能結(jié)構(gòu)圖更多體現(xiàn)的形式是功能闡述，一般形式為名詞+動(dòng)詞，比如頭像設(shè)置；而信息架構(gòu)圖重點(diǎn)呈現(xiàn)的應(yīng)該都為信息元素，一般為名詞，比如頭像圖片。

但在大多數(shù)時(shí)候我們看到的產(chǎn)品架構(gòu)圖，其實(shí)更偏向于功能結(jié)構(gòu)圖和信息架構(gòu)圖的結(jié)合。因?yàn)樵诤芏鄷r(shí)候闡述信息構(gòu)成時(shí)需要依賴功能進(jìn)行輔助說明。

因此這篇文章講述的信息架構(gòu)更偏向于基于產(chǎn)品的整體架構(gòu)。其實(shí)信息架構(gòu)對(duì)于呈現(xiàn)形式并沒有特別的限制，只要能夠幫助你清晰表達(dá)產(chǎn)品整體結(jié)構(gòu)就行?！缎畔⒓軜?gòu)：超越web設(shè)計(jì)》第4版中其實(shí)也并沒有對(duì)表現(xiàn)形式這一塊進(jìn)行嚴(yán)苛的定義，其用「顯示信息元素間的關(guān)系——站點(diǎn)地圖」的說法概括了信息架構(gòu)的呈現(xiàn)形式，其表達(dá)如下：

可以看到其表達(dá)形式包括思維導(dǎo)圖和流程圖等形式：思維導(dǎo)圖的優(yōu)勢(shì)是能夠總覽全局信息，查看信息的深度和廣度，而流程圖的優(yōu)勢(shì)則更能夠表達(dá)整體的邏輯關(guān)系。

因此信息架構(gòu)的呈現(xiàn)需要根據(jù)你的產(chǎn)品場(chǎng)景選擇合適的視覺框架表達(dá)。不必讓形式限制了我們的發(fā)揮，而是應(yīng)該形式追隨于我們的架構(gòu)表達(dá)。其只是一個(gè)信息梳理結(jié)構(gòu)的說明結(jié)果（類似于中間態(tài)），我們需要借助它來更好的闡述思路與溝通想法。

3.5信息架構(gòu)之后：讓信息具像化

在輸出信息架構(gòu)之后，其實(shí)這里想聊一聊頁(yè)面的呈現(xiàn)。因?yàn)楫?dāng)梳理好大的框架后，剩余的頁(yè)面細(xì)節(jié)其實(shí)都需要通過原型圖來進(jìn)行體現(xiàn)。這個(gè)過程是從框架到頁(yè)面的階段，其實(shí)對(duì)于設(shè)計(jì)師來說也是很重要的部分。在這里根據(jù)自己的理解列出了以下幾方面的注意點(diǎn)：

A.頁(yè)面能夠讓用戶看懂

這其實(shí)就是涉及到我們的信息組織和標(biāo)簽系統(tǒng)。如果當(dāng)我們的某個(gè)頁(yè)面不能讓用戶第一時(shí)間獲取到該頁(yè)面表達(dá)的信息，反思一下是在哪個(gè)方面做得不好。是標(biāo)簽系統(tǒng)含義模糊呢，還是信息的組織分類方式不對(duì)。從頁(yè)面呈現(xiàn)倒推信息架構(gòu)。

綜合來說就是設(shè)計(jì)時(shí)的排列要考慮用戶的心智模型（比如網(wǎng)頁(yè)的常規(guī)排版和通用名詞定義等），對(duì)于某些難以理解的地方給予用戶幫助和解釋。雖然B端產(chǎn)品想要完全避免學(xué)習(xí)成本是不可能的，但我們可以盡量減少其學(xué)習(xí)成本。

B.考慮用戶的視覺動(dòng)線

當(dāng)我們?cè)谶M(jìn)行信息排列時(shí)，這時(shí)需要思考的就是用戶的視覺動(dòng)線，也就是我們常說的視覺瀏覽「F模型」和「Z模型」。對(duì)于不同的信息流來說，采用不同的動(dòng)線模型能夠讓用戶更好地查找信息。

F模型和Z模型的使用區(qū)分其實(shí)就是在使用場(chǎng)景上，對(duì)于內(nèi)容頁(yè)面來說F模型會(huì)更為合適（比如文章或者搜索結(jié)果），適合文本類的內(nèi)容。但對(duì)于非文本的頁(yè)面，則更適合用Z模型，Z型模式的設(shè)計(jì)跟蹤了人眼掃描頁(yè)面時(shí)的路線——從左到右，從上到下，能夠更好引導(dǎo)用戶的視線。

C.掌控好適度的信息層級(jí)

B端由于在視覺的發(fā)揮空間不多，那么相對(duì)來說保持良好的信息層級(jí)能夠讓整體的體驗(yàn)變得更為良好。

不管是原型圖還是視覺，整體的視覺層級(jí)要體現(xiàn)得更為清晰。按理說最好的視覺層級(jí)控制在三級(jí)左右。如果發(fā)現(xiàn)視覺層級(jí)過多，需要考慮是不是因?yàn)樾畔⒓軜?gòu)設(shè)計(jì)時(shí)縱向?qū)蛹?jí)過深，通過調(diào)整架構(gòu)的形式來更好的呈現(xiàn)信息。以及對(duì)同頁(yè)面的信息進(jìn)行重要程度分級(jí)。

當(dāng)我們做完或者聽別人闡述對(duì)應(yīng)的信息架構(gòu)時(shí)，該如何評(píng)判呢，到底怎樣的信息架構(gòu)才算優(yōu)秀呢。個(gè)人認(rèn)為可以從3方面去進(jìn)行判斷：

業(yè)務(wù)層：

1.設(shè)計(jì)目標(biāo)合理：能平衡商業(yè)目標(biāo)和用戶的目標(biāo)，保證客戶和用戶都有較為良好的體驗(yàn)；

2.核心任務(wù)目標(biāo)：能夠讓用戶順利完成產(chǎn)品的核心任務(wù)，需要通過用戶測(cè)試來進(jìn)行驗(yàn)證

結(jié)構(gòu)層：

1.平衡廣度和深度：在進(jìn)行功能使用時(shí)不會(huì)隱藏的太深而找不到，是否有冗余步驟

2.保證拓展性：當(dāng)前信息架構(gòu)在面對(duì)未來新增或者刪減信息時(shí)能夠穩(wěn)定拓展

體驗(yàn)層：

1.保證易讀性：用戶不經(jīng)過介紹，通過頁(yè)面信息呈現(xiàn)能夠看懂該產(chǎn)品是用來做什么的

2.保證易查找性：用戶在需要某個(gè)功能時(shí)能否快捷的找到，是否有多種查找方法（比如搜索或篩選）

合理的信息架構(gòu)需要具備以上條件，我們需要在做設(shè)計(jì)呈現(xiàn)時(shí)也盡量保證以上條件。但在很多情況下其實(shí)并不能完全滿足，這個(gè)時(shí)候我們需要根據(jù)業(yè)務(wù)目標(biāo)的重要性來選擇某些點(diǎn)進(jìn)行滿足。

梳理一下整體文章的架構(gòu)，其實(shí)是按照「是什么-為什么-怎么做」的形式來進(jìn)行拆分的：

這篇文章想要表達(dá)的觀點(diǎn)，不是讓設(shè)計(jì)師獨(dú)立去梳理整體信息架構(gòu)，而是讓設(shè)計(jì)師擁有信息架構(gòu)意識(shí)，了解其是如何進(jìn)行并產(chǎn)生的。這樣你在看到整體架構(gòu)時(shí)，有足夠的理論支撐去判斷它的好壞，并通過自己的理論認(rèn)知去理解和改進(jìn)不好的地方。

當(dāng)我們對(duì)信息架構(gòu)有足夠的認(rèn)知時(shí)，我們?cè)谠O(shè)計(jì)頁(yè)面時(shí)才能有合理的思考方向，做出「正確的設(shè)計(jì)」，避免成為無情的作圖機(jī)器。信息架構(gòu)作為產(chǎn)品交互視覺最底層的支撐，只有骨架搭好，對(duì)于用戶的使用體驗(yàn)才能夠有本質(zhì)上的提升。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

免責(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ì)公司，為期望卓越的國(guó)內(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ù)

按鈕的點(diǎn)擊率低，用戶在放置按鈕的頁(yè)面上花費(fèi)了大量時(shí)間，這可能是由于按鈕不直觀和混亂。

我們將從用戶體驗(yàn)的角度詳細(xì)解釋直觀且易于用戶理解的按鈕，例如內(nèi)容中按鈕的排列、按鈕的形狀以及基于內(nèi)容的配色方案。

什么是用戶友好按鈕？

您擁有的按鈕越多，做出決定所需的時(shí)間就越長(zhǎng)。用戶使用每個(gè)按鈕以確定需要哪個(gè)按鈕來實(shí)現(xiàn)目標(biāo)。對(duì)按鈕的不確定性會(huì)導(dǎo)致對(duì)按鈕不做任何操作。

為防止出現(xiàn)這種情況，請(qǐng)直觀地確定每個(gè)操作的優(yōu)先級(jí)。用戶一旦知道哪些按鈕對(duì)其任務(wù)很重要，就可以立即采取行動(dòng)。

1. 按視覺掃描模式排列按鈕

應(yīng)用程序中最常見的錯(cuò)誤就是按與用戶自然掃描模式不同的順序排列按鈕。優(yōu)先級(jí)最高的按鈕放在最前面，以便用戶首先注意到它。然而，通過視覺加權(quán)，用戶會(huì)以任何順序注意到按鈕。

按鈕的順序不是為了提高可見度，而是為了提高效率。首先放置高優(yōu)先級(jí)按鈕會(huì)使掃描方向從上到下顛倒，從而破壞視線的自然流動(dòng)。

它不是強(qiáng)制用戶重新掃描按鈕，而是允許用戶在單向掃描中執(zhí)行高優(yōu)先級(jí)操作。這允許用戶在做出決定之前依次掃描按鈕所需的所有信息。

將最高優(yōu)先級(jí)的動(dòng)作放在底部使其成為視覺阻力最小的路徑，并且可以快速輕松地點(diǎn)擊。此外，底部位置是手指最容易觸及的位置，進(jìn)一步提高了效率。

2. 使用形狀區(qū)分按鈕和文本

應(yīng)用程序中的另一個(gè)常見錯(cuò)誤是使用文本來表示按鈕。設(shè)計(jì)師使用文本按鈕來表明它們的優(yōu)先級(jí)低于其他操作。但是，這對(duì)于操作按鈕來說是不合適的選擇。文本看起來不像按鈕。通過使用文本按鈕，用戶可以忽略操作而只看到主要操作。

文本按鈕也會(huì)使得用戶對(duì)內(nèi)容是按鈕還是信息而引起混淆。這種不確定性會(huì)導(dǎo)致這些按鈕被跳過。

文本按鈕不僅令人困惑，而且還是難以點(diǎn)擊的小目標(biāo)。將文本標(biāo)簽放置在按鈕形狀內(nèi)可以更輕松地調(diào)用操作并點(diǎn)擊它。

按鈕形狀是抑制優(yōu)先級(jí)低于文本按鈕的操作的好方法。使用戶更容易識(shí)別以他們喜歡的方式實(shí)現(xiàn)目標(biāo)的所有選項(xiàng)。

3. 為漸進(jìn)式動(dòng)作添加顏色

高優(yōu)先級(jí)操作是最容易看到的。此操作與用戶的目標(biāo)直接相關(guān)。如果您不確定其余的操作，請(qǐng)考慮哪些操作將用戶推向目標(biāo)，哪些操作正在遠(yuǎn)離目標(biāo)。

在上面的例子中，“結(jié)帳”是優(yōu)先的，這是用戶達(dá)到目標(biāo)的一個(gè)動(dòng)作。但是，尚不清楚“查看購(gòu)物車”或“繼續(xù)購(gòu)物”操作是否具有中等優(yōu)先級(jí)。

“查看購(gòu)物車”操作允許用戶查看他們添加到購(gòu)物車中的產(chǎn)品，這會(huì)促進(jìn)結(jié)帳?！袄^續(xù)購(gòu)物”操作將用戶從結(jié)賬返回到產(chǎn)品頁(yè)面。

通過查看每個(gè)操作，很明顯“查看購(gòu)物車”具有中等優(yōu)先級(jí)，而“繼續(xù)購(gòu)物”具有低優(yōu)先級(jí)。

按鈕顏色從文本顏色中脫穎而出并吸引用戶的注意力，因此它是顯示漸進(jìn)式動(dòng)作的有效方式。如果按鈕顏色與文字顏色相同，則信號(hào)不是很強(qiáng)。為漸進(jìn)式動(dòng)作添加不同的顏色意味著用戶應(yīng)該采取的動(dòng)作。

如果您為每個(gè)漸進(jìn)式動(dòng)作使用相同的顏色，則用戶無法確定哪個(gè)具有更高的優(yōu)先級(jí)。此外，為每種顏色使用不同的顏色只會(huì)使用戶感到困惑，并且不會(huì)理解不同的顏色。并且，您還會(huì)在每個(gè)按鈕上感受到相同的視覺重量。

設(shè)計(jì)的訣竅是使用相同的色調(diào)，但改變中等優(yōu)先級(jí)動(dòng)作的飽和度和亮度，使其看起來比高優(yōu)先級(jí)動(dòng)作更亮?，F(xiàn)在按鈕權(quán)重不沖突，很明顯哪個(gè)突出。

對(duì)比以增強(qiáng)對(duì)比度。主要按鈕使用深色背景上的淺色文字，次要按鈕使用淺色背景上的深色文字。這為高優(yōu)先級(jí)操作提供了更亮的文本標(biāo)簽和最佳對(duì)比度。

4. 改變標(biāo)簽上文字的粗細(xì)

到目前為止，應(yīng)用這些技術(shù)足以區(qū)分優(yōu)先級(jí)，但您還可以做更多的事情。按鈕越直觀，用戶就越不需要考慮它。

對(duì)每個(gè)標(biāo)簽上的文本使用相同的粗體可以賦予該文本相同的強(qiáng)調(diào)量。因此，建議根據(jù)優(yōu)先級(jí)分別強(qiáng)調(diào)每個(gè)標(biāo)簽的文本。更改文本的粗細(xì)，使高優(yōu)先級(jí)按鈕最厚重，低優(yōu)先級(jí)按鈕相對(duì)單薄。這樣，當(dāng)用戶閱讀文本標(biāo)簽時(shí)，文本的權(quán)重表示優(yōu)先級(jí)。

在上面的例子中，“結(jié)賬”標(biāo)簽比其他標(biāo)簽更厚更亮?！安榭促?gòu)物車”標(biāo)簽為半粗體，“繼續(xù)購(gòu)物”標(biāo)簽為中等。因此，文本標(biāo)簽反映了每個(gè)動(dòng)作的視覺權(quán)重?！安榭促?gòu)物車”標(biāo)簽上指示“3件商品”的文字沒有加粗，因?yàn)樗茄a(bǔ)充信息，并不代表所執(zhí)行的操作。

5. 為高優(yōu)先級(jí)操作提供圖標(biāo)

最后一種技術(shù)是讓色盲用戶可以訪問您的按鈕。色盲用戶無法通過顏色區(qū)分重量差異。因此，我們需要的東西是不是顏色作為一個(gè)視覺線索。

為高優(yōu)先級(jí)操作添加圖標(biāo)將進(jìn)一步強(qiáng)調(diào)它以使其脫穎而出。用戶瀏覽時(shí)，用戶通常關(guān)注視覺元素而不是文本。該圖標(biāo)將使所有用戶更加關(guān)注高優(yōu)先級(jí)操作。

用戶仍然可以通過移除顏色和標(biāo)簽來識(shí)別結(jié)賬按鈕。

總結(jié)

如果用戶在操作屏幕上花費(fèi)大量時(shí)間，或者點(diǎn)擊率較低，可能就是按鈕設(shè)計(jì)的不直觀。在這種情況下，可以使用這些技術(shù)來增強(qiáng)按鈕顯示并有利于突顯優(yōu)先級(jí)。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

免責(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ì)公司，為期望卓越的國(guó)內(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ù)

當(dāng)你在一個(gè)既定的服務(wù)領(lǐng)域工作，但想要進(jìn)行革新時(shí)

1.詳細(xì)研究當(dāng)前的用戶體驗(yàn)

分析當(dāng)前的服務(wù)體驗(yàn)，解讀用戶旅程中涉及到的行為，接觸點(diǎn)，出現(xiàn)的痛點(diǎn)。構(gòu)建現(xiàn)有的體驗(yàn)旅程圖可以捕捉到服務(wù)體驗(yàn)的全貌，立即發(fā)現(xiàn)需要重新設(shè)計(jì)的關(guān)鍵問題，促進(jìn)組織內(nèi)部的一致性。對(duì)于這種復(fù)雜的服務(wù)，根據(jù)分析結(jié)果建立服務(wù)藍(lán)圖也大有好處，可以捕捉到流程中的關(guān)鍵問題還有不同接觸點(diǎn)的關(guān)系中的重要方面。

建議：
自己進(jìn)行嘗試，能夠有效地發(fā)現(xiàn)細(xì)節(jié)，涵蓋分析中的所有步驟。

2.分析服務(wù)構(gòu)建

體驗(yàn)和過程只是服務(wù)的一部分：在分析現(xiàn)有服務(wù)時(shí)，我們也要考慮底層系統(tǒng)是如何搭建組件和動(dòng)態(tài)結(jié)構(gòu)的。只有對(duì)系統(tǒng)進(jìn)行全面理解，我們才能發(fā)現(xiàn)連接缺失，精力和資源的潛在浪費(fèi)和重復(fù)。創(chuàng)建一個(gè)系統(tǒng)地圖有助于讓團(tuán)隊(duì)成員明確這些問題，討論潛在的改善機(jī)會(huì)。

建議：
我們需要將系統(tǒng)中的所有行為者聯(lián)系在一起，全面理解系統(tǒng)過程，減少重復(fù)，彌補(bǔ)差距。

3.設(shè)定具體的目標(biāo)，指導(dǎo)設(shè)想

在開始構(gòu)思之前，花些時(shí)間來思考系統(tǒng)和體驗(yàn)的分析結(jié)果，并通過重新設(shè)計(jì)確定自己達(dá)到的關(guān)鍵目標(biāo)。目標(biāo)可以是橫向的（比如 “優(yōu)化整個(gè)旅程中的信息流”），也可以是非常具體的（比如 “入職：從填寫表格到熱情的歡迎會(huì)”）。最重要的是，我們首先要詳細(xì)了解現(xiàn)狀，才能設(shè)定目標(biāo)，制定正確的方法，同時(shí)意識(shí)到急需解決的潛在局限性和障礙。

建議：
我們也可以將期待體驗(yàn)設(shè)定為目標(biāo)旅程，為體驗(yàn)中的每一步設(shè)定一個(gè)具體目標(biāo)。

4.創(chuàng)造新點(diǎn)子和解決辦法

提出新的想法，解決旅程中所有已知痛點(diǎn)或系統(tǒng)中的差距，以及抓住有趣的機(jī)會(huì)。這些想法包括既稍微改進(jìn)一些特定功能，也可以影響整個(gè)服務(wù)模式的寬泛概念。在這個(gè)階段，不要限制自己的想法數(shù)量，更不用考慮可行性：捕捉每一個(gè)想法，與其他團(tuán)隊(duì)成員分享，并在彼此的思考之上建立一個(gè)新想法。

建議：
快速構(gòu)思是一種頭腦風(fēng)暴的練習(xí)，團(tuán)隊(duì)中的每個(gè)人都寫下他們心中的每一個(gè)想法，然后再進(jìn)行小組討論。

5.確定最有可能實(shí)現(xiàn)的概念

收集所有想法，確定下一步的行動(dòng)計(jì)劃。如果項(xiàng)目很簡(jiǎn)單，我們可以簡(jiǎn)單地將所有的想法整合成一個(gè)重新設(shè)計(jì)方案，逐步發(fā)展。在其他情況下，你可能最終得到50多個(gè)想法，對(duì)當(dāng)前的服務(wù)體驗(yàn)進(jìn)行創(chuàng)新，但顯然我們不能訴諸于每個(gè)想法，那么……從哪著手呢？我們可以建立一個(gè)評(píng)估矩陣，確定標(biāo)準(zhǔn)，分析每個(gè)概念（例如，對(duì)用戶的價(jià)值，實(shí)施成本，獨(dú)特性等），并對(duì)它們進(jìn)行相應(yīng)的評(píng)分。這樣我們就可以篩選出最有可能實(shí)現(xiàn)的想法，創(chuàng)造較大的價(jià)值（這些想法可能是最先開發(fā)的）。簡(jiǎn)略的概念可以很好地改善部分服務(wù)，但不會(huì)產(chǎn)生較大的影響（容易實(shí)現(xiàn)的目標(biāo)）；而較復(fù)雜的概念從長(zhǎng)遠(yuǎn)來看會(huì)對(duì)服務(wù)體驗(yàn)產(chǎn)生更積極影響，但需要投入大量的時(shí)間和精力。

建議：
我們需要考慮的最核心內(nèi)容是新概念給用戶和組織帶來的價(jià)值，而不是實(shí)施的可行性或復(fù)雜性-但這可以根據(jù)具體環(huán)境而改變。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

免責(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ì)公司，為期望卓越的國(guó)內(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ù)

文章定位：

好的產(chǎn)品能為用戶帶來高效的解決方案，在迭代升級(jí)中實(shí)現(xiàn)用戶價(jià)值。

以下文章主要探討設(shè)計(jì)師 如何從用戶角度出發(fā)打造產(chǎn)品體驗(yàn)，通過設(shè)計(jì)幫助產(chǎn)品帶來高溢價(jià)。

01、用戶思維

用戶思維最基本就是 圍繞用戶 去設(shè)計(jì)，幫助他們 解決實(shí)際問題。

Q：為什么要圍繞用戶做設(shè)計(jì)？

A：想將自己產(chǎn)品打造成為好產(chǎn)品，最終留住用戶。

Q：什么是好產(chǎn)品？

A：“讓產(chǎn)品自然生長(zhǎng)，不要去碰用戶，不要去打擾他們，讓他們自然形成一種互動(dòng)關(guān)系”。不要強(qiáng)塞東西給用戶，切切實(shí)實(shí)的在用戶需要的時(shí)候能快速給到他們價(jià)值，解決某個(gè)問題，或滿足他們的情感，情緒。

即：幫助用戶解決實(shí)際問題，并提供解決該問題的優(yōu)秀設(shè)計(jì)。

所以設(shè)計(jì)師產(chǎn)出設(shè)計(jì)方案前需思考的是：

1. 解決什么實(shí)際問題？

2. 應(yīng)該提供怎樣的設(shè)計(jì)？

02、確定用戶面臨的問題點(diǎn)

解決哪些實(shí)際問題是每個(gè)案子的核心，在該階段設(shè)計(jì)師常容易陷入誤區(qū)

如：我要做 一個(gè)…東西、我要怎么怎么做……下意識(shí)的就去研究怎么做，而不是首要思考具體解決什么問題，該誤區(qū)到后期往往會(huì)造成設(shè)計(jì)偏離。

為了避免該情況，首要需確定問題，并將問題清晰表述出來，表述的越清晰解決起來就越容易。

那我們應(yīng)該怎么去確定這個(gè)問題呢？

– 利用同理性圖譜構(gòu)建用戶認(rèn)知

好的設(shè)計(jì)需要與用戶心智相符合，貼合用戶當(dāng)時(shí)情境下的訴求。

為了讓優(yōu)化方案更有依據(jù)，在發(fā)現(xiàn)問題的時(shí)候，需要從用戶視角出發(fā)，結(jié)合當(dāng)前產(chǎn)品的頁(yè)面去分析是否符合當(dāng)前用戶的訴求。

——可以采用 同理心圖譜 的方式：

從 說了什么、做了什么、想了什么、感覺到什么 四個(gè)維度去勾勒用戶真實(shí)的想法感受。

以下以優(yōu)化案為例：

在實(shí)際優(yōu)化案中，可結(jié)合需改版頁(yè)面按照四個(gè)維度走一遍，可讓設(shè)計(jì)師更了解當(dāng)前頁(yè)面幫助用戶做什么，后續(xù)有哪些優(yōu)化方向。

如：QQ支付頁(yè)面整體流程優(yōu)化設(shè)計(jì)

① 用戶需給好友發(fā)紅包，在輸入完紅包金額點(diǎn)擊支付時(shí)，向上滑出了支付面板，用戶看到這個(gè)面板時(shí)候，其心理活動(dòng)可能是怎樣的呢？

② 用戶想要更換支付方式，點(diǎn)擊更換后看到下方頁(yè)面，用戶對(duì)該頁(yè)面的的感受會(huì)是怎樣的呢？

③ 用戶輸入密碼后，以為馬上就成功了，卻發(fā)現(xiàn)卡里沒錢了，這時(shí)候用戶更加迫切的是什么呢？

通過以上這樣 【移情】的方式，使我們更能了解用戶，在沒有用戶訪談的情況下對(duì)他們的 愿望、需求、訴求點(diǎn) 有個(gè)概念，當(dāng)有了這個(gè) 共鳴 在后續(xù)就可以將這個(gè)共鳴變成一個(gè)有著明確優(yōu)化方向的 問題陳述。

– 自問自答式推理逐漸確定問題

在挖掘用戶需求點(diǎn)過程中，可以采用不斷詢問不斷回答的方式，將自己腦子里想的直接寫出來，通過這樣的方式構(gòu)建自己思考的邏輯。

如：“在下單頁(yè)轉(zhuǎn)化率太低 > 在下單頁(yè)用戶無法快速驗(yàn)證信息 > 在下單頁(yè)重點(diǎn)信息不集中，其余信息太顯眼 >…..”

在這個(gè)過程其實(shí)就是刨根問底的過程，在反復(fù)的試錯(cuò)過程中也會(huì)離真相更近。

類似下面這張Julie Zhuo的自我審視圖：

03、問題陳述（POV）

– 什么是問題陳述

通過陳述句將產(chǎn)品當(dāng)前狀態(tài)（問題）和期望狀態(tài)（目標(biāo)）的差距描述出來。POV有助于我們強(qiáng)調(diào)用戶痛點(diǎn)，保證自己將重點(diǎn)始終放在用戶身上。

– 問題陳述怎么寫

那怎么陳述才能更好的將問題及規(guī)劃表達(dá)好呢？以下有兩個(gè)方式：

• 基于用戶角度來說：我看QQ群里搶紅包很熱鬧，我也想快速參與進(jìn)去，但是輪到我發(fā)的時(shí)候，我因?yàn)槲也皇欠浅Ｊ煜ふ麄€(gè)流程，導(dǎo)致我反應(yīng)慢了，這讓群里的人以為我故意這么慢才發(fā)，影響大家氛圍，這讓我有點(diǎn)沮喪。

• 基于用戶研究來說（4W）：我們的初中生因?yàn)樘貏e活躍，喜歡在群里踴躍發(fā)言參與活動(dòng)，所以一旦群里有好玩的消息總是想第一時(shí)間參與進(jìn)去。我們的解決方案應(yīng)該 為他們 提供快速能夠完成紅包發(fā)送的鏈路與方式，不掃他們的興。

以上兩種陳述方式都是針對(duì)同一個(gè)問題，只是表述方式不同。所以只要你足夠?qū)Ｗ⒂脩?，理解他們需要什么以及為什么需要，就可以快速?gòu)建你后續(xù)的設(shè)計(jì)方案。

– 問題陳述注意點(diǎn)

① 用戶與他們的需求是問題陳述的核心，避免：我們應(yīng)該怎么做、產(chǎn)品應(yīng)該…作為開頭。

② 保持陳述的寬泛性，不要過早拋出細(xì)致的解決方案、技術(shù)限制等內(nèi)容，避免團(tuán)隊(duì)發(fā)散受限。

③ 專注一點(diǎn)，不要讓用戶的需求和目標(biāo)過于寬泛，導(dǎo)致自己很難找到一個(gè)合適解決方案。所以不要視圖在一個(gè)問題陳述中解決太多用戶需求，一次解決一個(gè)就很好了。

04、如何打磨設(shè)計(jì)方案

在經(jīng)過問題陳述我們對(duì)要解決的問題了然于胸，在解決方案上，設(shè)計(jì)師需要考慮 易用性、易理解性、及著力提升用戶任務(wù)效率，給用戶一個(gè)更好的體驗(yàn)。面對(duì)不同的項(xiàng)目，可考慮以下幾點(diǎn)：

– 結(jié)構(gòu)簡(jiǎn)潔，重點(diǎn)突出

例1：

該例子非常能體現(xiàn)出 訴求 與 解決方案 的契合。

首先工作人員唯一的目的性就是 篩查 有問題的人，所以在眾多人中需 快速判斷，這個(gè)轉(zhuǎn)化到設(shè)計(jì)上解決方式：

通過大面積的 色塊直觀反饋；

通過實(shí)時(shí)的 滾動(dòng)時(shí)間+滾動(dòng)背景反饋真實(shí)性；

在結(jié)合下方核酸與疫苗輔助判斷，整體非常貼合實(shí)際訴求，重點(diǎn)突出，有節(jié)奏感。

例2：

通過體驗(yàn)核心信息，將內(nèi)容合理布局，重點(diǎn)突出，操作劃分明確，有助于信息獲取與確定。

– 管理復(fù)雜（滿足不同訴求）

人的認(rèn)知資源有限，天生不善于處理復(fù)雜信息，所以在面對(duì)復(fù)雜信息時(shí)設(shè)計(jì)師需將復(fù)雜的內(nèi)容以一定秩序邏輯管理，分而治之，減少用戶的選擇，讓正確的行為變得自然和明顯。

例1：

在58二手車頁(yè)面的改版中，可以看出在面對(duì)不同用戶訴求的情況下在 模塊化結(jié)構(gòu) 與 坪效 找到了平衡：

頂部按鈕直接 分流 不同目的用戶；

中間模塊展示用戶 最關(guān)心的維度：價(jià)格、品牌、車類型；

下方 透出推薦內(nèi)容 吸引用戶往下逛。

– 注重情感化

情感化不一定都是很精美的插畫、動(dòng)效等表現(xiàn)層面上的，有時(shí)候 貼心的記錄、舒緩的內(nèi)容、小游戲…… 也可以起到 情緒調(diào)節(jié) 的作用，提高用戶看到復(fù)雜信息的 忍耐度。

– 場(chǎng)景化設(shè)計(jì)（預(yù)判你的預(yù)判）

多考慮用戶使用場(chǎng)景，挖掘一些場(chǎng)景是可以通過我們的設(shè)計(jì) 幫助用戶多走一步，幫他們排除障礙，減少負(fù)擔(dān)。

例1：

打車軟件在特定時(shí)間點(diǎn)自動(dòng)浮出目的地，以及截圖后立刻打開微信聊天窗，圖片自動(dòng)在對(duì)話框中浮出的方式都是通過用戶的行為預(yù)判了用戶下一步的行為，

例2：

用戶輸入密碼后下意識(shí)認(rèn)為操作成功，但卻被告知失敗，對(duì)用戶而言是一次打擊，若這時(shí)直接前置化用戶后續(xù)可能會(huì)的操作，將條路徑重新接上，可以讓整個(gè)過程更加高效。

所以在具體設(shè)計(jì)方案上，設(shè)計(jì)師需要不斷的去思考打磨設(shè)計(jì)方案，讓自己的設(shè)計(jì)：

① 顯而易見的，讓用戶體驗(yàn)后覺得「沒錯(cuò)，就應(yīng)該是這樣」；

② 有價(jià)值的，它為用戶解決實(shí)際的問題；

③ 與用戶的心理模型相符，它不意味著更多的設(shè)計(jì)。

05、驗(yàn)證體系

驗(yàn)證方式有很多，目前市場(chǎng)上有幾大比較成熟的體驗(yàn)度量體系，針對(duì)不同的關(guān)注點(diǎn)進(jìn)行 定性+定量 檢測(cè)。

除去性能表現(xiàn)外，主要都是圍繞用戶行為數(shù)據(jù)及使用感受來進(jìn)行度量

在行為數(shù)據(jù)上，主要關(guān)注：訪問頻率、留存率、頁(yè)面訪問次數(shù)…

在用戶感受上，主要關(guān)注：滿意度、用戶評(píng)價(jià)、推薦度…

– 設(shè)計(jì)師怎么確定自己設(shè)計(jì)方案的驗(yàn)證指標(biāo)

對(duì)于設(shè)計(jì)師而言，不需要做的這么全面，我們只需要針對(duì)我們 具體優(yōu)化頁(yè)面、場(chǎng)景 找到可以直接驗(yàn)證的指標(biāo)即可。

例：

在上述的發(fā)紅包支付頁(yè)面的優(yōu)化設(shè)計(jì)中，由于主要優(yōu)化的方向是為了讓用戶更聚焦，提升整體支付體驗(yàn)，所以基于這個(gè)目的，我們可以以 整體的支付成功率 來驗(yàn)證大致優(yōu)化效果；

其次，可以從 每個(gè)觸點(diǎn)的轉(zhuǎn)化漏斗、和 各頁(yè)面停留時(shí)長(zhǎng) 上分析具體頁(yè)面改版效果。

– 面向真實(shí)用戶驗(yàn)證設(shè)計(jì)

除去行為數(shù)據(jù)上的驗(yàn)證，用戶真實(shí)反饋同樣重要，我們可以采用用戶調(diào)研的方式了解用戶對(duì)產(chǎn)品體驗(yàn)的反饋，主要可以從下面三個(gè)方面執(zhí)行：

① 可用性測(cè)試：可針對(duì)核心優(yōu)化的功能點(diǎn)設(shè)定測(cè)評(píng)任務(wù)，來觀察用戶的完成情況，如：如果你余額不足，你會(huì)怎么做？

② 滿意度測(cè)試：采用界面可用性問卷調(diào)研，可以采用SUS問卷收集反饋

③ 推薦度測(cè)試：通過NPS量表來衡量，通過將分值劃分為：0~6分為貶損者，7~8分為被動(dòng)者，分值高于8分為推薦者，帶入計(jì)算公式（NPS值=推薦者% – 貶損者%）算出推薦度數(shù)值，數(shù)值越高，說明用戶滿意度越好，用戶的推薦意向越高。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

免責(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ì)公司，為期望卓越的國(guó)內(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ù)

編輯導(dǎo)讀：產(chǎn)品經(jīng)理不是在寫需求文檔，就是在寫需求文檔的路上。盡管寫需求文檔是一個(gè)基礎(chǔ)功，但是如何寫好，以及B端和C端寫需求文檔有什么區(qū)別，值得我們深究。本文作者對(duì)此進(jìn)行了分析，與你分享。

接上兩篇內(nèi)容《B端原型繪制入門》和《快速入手甲方項(xiàng)目》的最后內(nèi)容，這兩篇一個(gè)是原型一個(gè)業(yè)務(wù)，現(xiàn)在繼續(xù)說一下落地，也就是需求文檔怎么寫。昨天上午剛交付了最近負(fù)責(zé)的小程序前后端文檔，加起來快2W字，最終開發(fā)也簽字確認(rèn)了，趁著熱乎跟大家分享一下。

一、需求文檔模板到底能不能套著寫？

市面上的文檔模板太多了，直接可以搜到的，各種教學(xué)，各種視頻都在講，你一個(gè)新人怎么能不會(huì)寫文檔，所以這里面的水分，相信付過費(fèi)的才能知道。

模板是可以套的，比如說公司內(nèi)不是沒有模板，那我能不按他模板寫自己寫嗎，一般情況下不能，在寫文檔之前大家要明白一個(gè)事實(shí)，就是你現(xiàn)在到底在公司承擔(dān)的是什么角色，是團(tuán)隊(duì)的沖鋒還是后勤補(bǔ)給。這里不涉及到職位，是什么角色大家自己掂量著判斷，如果是后勤部隊(duì)，那你寫的文檔只寫了核心業(yè)務(wù)，基本跳轉(zhuǎn)，剩下的部門寫的沒那么專業(yè)，是沒問題的。至于模板上什么頁(yè)面響應(yīng)了，硬件支持了，你不寫一點(diǎn)問題沒有，刪掉就可以了。但如果你是團(tuán)隊(duì)的沖鋒，你要負(fù)責(zé)團(tuán)隊(duì)和開發(fā)部門的對(duì)接，需要向不懂網(wǎng)絡(luò)老板匯報(bào)，這時(shí)候就需要搞明白所做的東西需要哪些支持了，總不能項(xiàng)目做完，沒有環(huán)境支持，該買設(shè)備買設(shè)備，該買服務(wù)器買服務(wù)器，都要考慮到。

還要注意一點(diǎn)就是模板歸模板，不能死套，舉個(gè)例子，比如模板上讓你寫了產(chǎn)品功能，需求描述，功能介紹，沒說貼圖的事，某個(gè)頁(yè)面存在六個(gè)面包屑，每個(gè)頁(yè)面都有幾個(gè)業(yè)務(wù)，你能不貼圖像寫作文一樣描述需求嗎，是不行的，復(fù)雜的業(yè)務(wù)記著貼圖描述。

所以那些簡(jiǎn)歷造假的，找到的工作能力不配職位的，這才是他們頭疼的問題。

二、C端文檔和B端文檔的區(qū)別

先說結(jié)論：

C端重跳轉(zhuǎn)，頁(yè)面狀態(tài)，分享路徑等

B端重業(yè)務(wù)邏輯，數(shù)據(jù)的輸入輸出，約束條件等

這次正好負(fù)責(zé)了前后端的文檔撰寫，能更好根據(jù)自己這一段的經(jīng)驗(yàn)來描述，有一個(gè)很大的感受就是前后端是有很大關(guān)聯(lián)的，舉個(gè)例子，前端的用戶分為兩種，一種是VIP，一種是普通用戶，在前端我需要給VIP賬號(hào)更好的體驗(yàn)，讓他能干更多的事有更多的權(quán)利，這句話很明顯是一句沒有經(jīng)過處理的需求描述，那轉(zhuǎn)化成產(chǎn)品需求應(yīng)該是什么呢，“普通用戶擁有的權(quán)限為XX，XX，VIP用戶擁有的權(quán)限為XX,XX,XX,XX，未登錄時(shí)默認(rèn)展示全部，當(dāng)用戶登錄后，進(jìn)行展示內(nèi)容分層”，這是產(chǎn)品需求，也是經(jīng)過梳理后的業(yè)務(wù)需求，這句話需要寫在前端的文檔里，那我現(xiàn)在怎么去描述后端的這部分？大家可以做個(gè)小思考。

經(jīng)過這樣的前后端梳理，是很有趣的，而且能有一個(gè)全局的思考，不會(huì)隨便說一些奇怪的需求，見識(shí)的多了，也就理智了，這句話也適用于生活。再舉個(gè)例子，拿之前很火的一個(gè)傳統(tǒng)行業(yè)提出的需求“手機(jī)屏幕能跟隨手機(jī)殼變色”來說，如果這個(gè)人懂基本的技術(shù)實(shí)現(xiàn)方式，數(shù)據(jù)庫(kù)，一些業(yè)務(wù)邊際他就不會(huì)提出這個(gè)，當(dāng)然這個(gè)也有點(diǎn)夸張，但我相信大家還是有遇到過這樣的人。

三、具體應(yīng)該注意什么，怎么寫？

先說基本的，什么項(xiàng)目背景，角色，閱讀對(duì)象等亂七八糟的寫不寫，這取決與你們公司的流程，是產(chǎn)研一家，還是人家根本不知道你這些東西，如果不知道你就要好好寫了，如果天天在一塊探討業(yè)務(wù)，那還寫個(gè)屁，還有最后面的功能性需求，例如頁(yè)面響應(yīng)，拓展需求，易用需求等，上面說過了你要不是沖鋒陷陣的，就不用寫，你也不會(huì)寫，只需要把基本核心業(yè)務(wù)，基本流程寫清楚，原型上做好跳轉(zhuǎn)就行了，這一步也不是像我說的那么簡(jiǎn)單，是需要鍛煉和總結(jié)的，而且當(dāng)面臨大型程序時(shí)是很容易出錯(cuò)的，這就需要之前的總結(jié)了。

中間的最重要，也就是菜單/頁(yè)面描述，需求描述這些，我有個(gè)習(xí)慣，在文檔寫之前先把這部分的目錄寫好，也就是頁(yè)面結(jié)構(gòu)序號(hào)先寫上，這樣后期會(huì)比較清晰，然后就是把寫好的描述標(biāo)題，依次按頁(yè)面粘到結(jié)構(gòu)上就可以開寫了。

頁(yè)面/模塊描述不要瞎寫，該頁(yè)面/模塊主要實(shí)現(xiàn)什么業(yè)務(wù)就寫上什么，如果實(shí)在沒有，只是展示，那就寫XX信息展示，這塊優(yōu)先寫業(yè)務(wù)，其次操作。

數(shù)據(jù)排序/來源，有就寫沒有就不寫，來源不知道的就自己搞清楚，如果有來源別忘了搞清楚輸出，排序一般為倒序，特殊情況自己考慮

頁(yè)面描述，優(yōu)先寫清楚所有跳轉(zhuǎn)，跳轉(zhuǎn)涉及到的業(yè)務(wù)也清楚，判斷，業(yè)務(wù)流程，操作，按鈕，各種權(quán)限，字段都要考慮到，這就是基本的文檔撰寫，建議不知道的不要不寫，如果現(xiàn)在在團(tuán)隊(duì)里有人帶，建議都問清楚，這對(duì)后續(xù)業(yè)務(wù)理解有很大幫助

字段描述，這塊可以比作開發(fā)的基本工作手冊(cè)，這里有一個(gè)容易犯的錯(cuò)誤就是，畫原型的時(shí)候咱們會(huì)把所有文字處理好，是肯定不會(huì)換行和省略號(hào)的一般，但如果用戶就是要瞎寫，或者標(biāo)題就是特別長(zhǎng)怎么辦，再或者你花了登錄頁(yè)，什么約束都沒寫，用戶設(shè)置密碼五個(gè)1，這寫問題后續(xù)是不是很可能出現(xiàn)問題？所以文檔這塊內(nèi)容要描述清楚，文字多的一行放不下了怎么處理，上傳的地方限制的數(shù)量，大小，讓輸手機(jī)號(hào)，用戶輸一堆密碼該怎么限制，這些都是基本的，要描述清楚，就算你不懂什么格式，限制，那就寫“不允許換行，多的做適應(yīng)性處理”，那開發(fā)也可以自由發(fā)揮，就怕沒有寫到，而開發(fā)也沒有注意，那后續(xù)就很可能出現(xiàn)問題。