為什么說是撕開 B 端封印呢？沒接觸過 B 端的同學(xué)，很大一部分都認為 B 端不就是簡單的列表和圖形嗎？拿開源組件拼拼湊湊就可以了，有什么可設(shè)計的？

其實這個想法完全錯了，你如果接觸后就會發(fā)現(xiàn)，B 端所需要的掌握的產(chǎn)品知識、思維邏輯、規(guī)范意識等等太多了。

而且近幾年 B 端這個詞出現(xiàn)的頻率越來越高了，因為前幾年大家都在爭 C 端市場，純 C 端的流量爭奪已經(jīng)進入了尾聲，B 端產(chǎn)品反而帶來了新的機會點，同時也被慢慢的重視起來，比起以往 B 端設(shè)計師，現(xiàn)在需要掌握的技能也越來越多。你可以查閱一下一些招聘網(wǎng)站，現(xiàn)在 B 端可視化方面的崗位是非常火爆，與 C 端相比，人才缺口更大，未來幾年 B 端也會更加火爆，有機會接觸 B 端的話就不要錯過機會。我們團隊平均招聘一個合適的設(shè)計師基本要兩個月的時間。

說了這么多，我們開始今天的主題吧！

首先在座的可能有部分設(shè)計師沒有接觸過數(shù)據(jù)可視化的設(shè)計，那么第一個問題來了，什么是可視化？大家想一想。給大家三秒鐘~

通過可視的表達來增強用戶處理數(shù)據(jù)的效率。

接下來我會從三個方面來講解如何構(gòu)建可視化：

    · 靈感需要迸發(fā)，更需要積累

    · 從零到一設(shè)計驅(qū)動

    · 設(shè)計度量

一、靈感需要迸發(fā)，更需要積累

1.1  數(shù)字時代下，99%的問題都是舊問題

數(shù)字時代下仍有信息不對稱的情況，尤其是關(guān)鍵技術(shù)和設(shè)計上的問題，但是如果你用心尋找，就會發(fā)現(xiàn)你的新問題則是別人很久之前的舊問題了。所以要做個有心人。

但是問題又來了，有時候真的不知道該怎么找、去哪找？這是個很常見的問題。因為可視化不比插畫、平面等這些成熟的領(lǐng)域，他是比較小眾的，所以靈感以及素材的搜尋是一個令新手設(shè)計師頭疼的事情，再加上對關(guān)鍵詞的熟悉程度不夠，導(dǎo)致很多設(shè)計師只停留在【可視化】這個關(guān)鍵詞里，最后感覺搜來搜去都是見過的圖，沒有新意。

1.2  明確目標(biāo)，知道自己想要找什么

互聯(lián)網(wǎng)信息太多了，漫無目的的找靈感，只會浪費時間，一會看到這張圖好看，一會看到那張圖好看。不知不覺幾個小時就過去了。

1.3  建立關(guān)鍵詞詞庫

確定目標(biāo)后，就要細化關(guān)鍵詞了。怎么建立關(guān)鍵詞詞庫呢？

關(guān)鍵詞詞庫由3部分組成：終端、設(shè)計類型、業(yè)務(wù)類型。

    · 終端：大屏、移動端、web 等等。

    · 設(shè)計類型：每個細分的數(shù)據(jù)可視化類別都是有一些專有名詞的，比如最近比較熱門的車載HMI系統(tǒng)，那他的類型關(guān)鍵詞就是 HMI。通過這些關(guān)鍵詞，你會搜到更精準(zhǔn)的結(jié)果。設(shè)計類型關(guān)鍵詞比如：AR/VR、HUD、HMI、FUI等等，你要了解你們公司相關(guān)類型的關(guān)鍵詞，記錄下來。以及跟你們有關(guān)聯(lián)的，都記下來，補充自己的詞庫。

    · 業(yè)務(wù)類型：智慧城市、生物醫(yī)療、監(jiān)控部署等等。

這三類單獨或組合進行搜索，就會看到更多可視化產(chǎn)品了。把關(guān)鍵詞詞庫建立起來后，就可以去常用的網(wǎng)站上搜索了，最好用的還是 behance 和 Pinterest。

1.4  除了常用的設(shè)計網(wǎng)站，還有哪里可以看？

企業(yè)官網(wǎng)：很多做數(shù)據(jù)可視化的公司，會在官網(wǎng)展示一些能體現(xiàn)自己業(yè)務(wù)特點、業(yè)務(wù)實力的案例，而這些案例就是這些企業(yè)最好的數(shù)據(jù)可視化設(shè)計作品了， 所以但凡有案例展示的官網(wǎng)，案列基本都是最典型最好的設(shè)計，所以從這些案例中找靈感，也是一個有意思且有效的方法和途徑。

1.5  你看到了別人看不到的，設(shè)計才能有所不同

總結(jié)一句話：你看到了別人看不到的，設(shè)計才能有所不同。如果你和別人看到的是一樣的，你怎么比別人做的更優(yōu)秀？

1.6  興趣推送

經(jīng)常刷短視頻/新聞網(wǎng)站的應(yīng)該知道，系統(tǒng)會根據(jù)你的點贊、收藏、瀏覽等數(shù)據(jù)來給你安排后面的內(nèi)容推送，以保證給你推送更精準(zhǔn)的內(nèi)容。設(shè)計網(wǎng)站亦是如此，behance 等網(wǎng)站上也都是千人千面，它會根據(jù)你的點贊收藏等來讀取你的喜好，進而推送更精準(zhǔn)的作品。所以假設(shè)你是一個B端數(shù)據(jù)可視化方向的，你就經(jīng)常搜、點贊收藏相關(guān)作品，之后你的首頁出現(xiàn)相關(guān)內(nèi)容的幾率也會變大。

1.7  定期清理，更新迭代

最后一點，這個也是好多設(shè)計師的通病，收藏即學(xué)到。

靈感庫要求精而不是多，每隔一段時間，回來翻一翻自己之前收藏的作品，會發(fā)現(xiàn)有些作品自己已經(jīng)看不上了，因為在做靈感收集的過程中，我們的審美會自然有所提高，當(dāng)輸入的作品樣本越來越多，我們對作品評價的維度也會更多，之前那些覺得好的作品，現(xiàn)在看來也就會有缺陷和不滿，這是一個很正向的結(jié)果，成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品，添加更符合自己當(dāng)前審美的作品到靈感庫里。

這樣慢慢完善你的地基，才能更高的向上走。

二、從零到一  設(shè)計驅(qū)動

講完第一部分，我們開始搭建產(chǎn)品。

我負責(zé)從零到一的項目大大小小的得有10來個了，我認為在產(chǎn)品整個產(chǎn)品周期中設(shè)計師的話語權(quán)最高的時候就是項目初期，是可以做到設(shè)計驅(qū)動的。既然設(shè)計可以有足夠的的話語權(quán)，你就得規(guī)劃好未來的設(shè)計走向。

產(chǎn)品初期，經(jīng)常會有幾個爭議比較大的問題，我們來聊一下。

2.1  設(shè)計先行還是調(diào)研先行？

這是新項目必須要做的選擇題，再講之前你先想一下，如果是你，你會如何選擇？

我的觀點是設(shè)計先行。（當(dāng)然設(shè)計先行是建立在你至少對這個項目的行業(yè)有個簡單的了解之后，先設(shè)計再用戶調(diào)研），為什么呢？因為如果用戶調(diào)研先行的話，用戶只會反饋當(dāng)下最想要的東西，從而有可能給你帶來誤導(dǎo)。就比如我們經(jīng)常舉的一個例子：汽車出來之前，人們只想要一匹更快的馬。

我們要解決的不是用戶當(dāng)下想要的東西，而是痛點背后用戶真正需要的東西是什么。在 0-1 的這種創(chuàng)造性的項目，往往設(shè)計者才是當(dāng)下最懂產(chǎn)品的人，你把決策權(quán)交給一些不懂產(chǎn)品的人，做到最后只能是迷失了方向，鍋還是設(shè)計來背。所以一開始設(shè)計師要把決策權(quán)拿在手中，掌握航向。

2.2  設(shè)計先行還是規(guī)范先行？

這個問題在現(xiàn)在看來相對比較統(tǒng)一，但有的同學(xué)還是有疑惑，所以我拿出來再跟大家聊一下。

首先我的觀點是設(shè)計先行，在設(shè)計之前就定好規(guī)范的基本都是自己YY的，返工率極高。等你在做具體設(shè)計的時候就知道之前做的規(guī)范都是白費力氣了。一般都會選用在項目完成之后或者主風(fēng)格及主要頁面完成后再輸出規(guī)范，這樣既可以減少規(guī)范的改動，也可以保證后面功能延用規(guī)范，一舉兩得。

當(dāng)然了，設(shè)計規(guī)范不是所有項目都要有的，它是為了減少工作而不是增加工作，如果是一次性項目，就不需要再額外花費精力去輸出規(guī)范了，浪費資源~

2.3  完成和完美那個更重要？

現(xiàn)在都是爭分奪秒的時代，任務(wù)是無止境的，沒有做完的時候。造成這個局面的無非就是一個問題：時間不夠用。通常的做法就是先完成再迭代，做產(chǎn)品久了你就會發(fā)現(xiàn)，完成比完美更重要，不完美你還可以再迭代，完不成就有可能錯過一個風(fēng)口，從而失去了變完美的可能~

聊完這三個問題，我們在設(shè)計的時候也要有一些注意項，真正的做到設(shè)計驅(qū)動。

2.4  把復(fù)雜變得清晰簡單而且美

對于設(shè)計師來說，我們的任務(wù)就是把復(fù)雜問題變得清晰簡單而且美，所以我們應(yīng)該成為企業(yè)和客戶之間溝通的“架橋人”。通過設(shè)計的方法，把無形的、復(fù)雜的技術(shù)，通過有形的、可視化的方式展示出來，讓客戶更直觀、清晰的感受到產(chǎn)品的功能，看得懂其在業(yè)務(wù)場景中產(chǎn)生的價值。

2.5  轉(zhuǎn)換視角，建立共鳴

站在客戶視角，聚焦客戶關(guān)注的核心問題，通過情景把內(nèi)容有序組織起來，快速與客戶建立共鳴，有效降低內(nèi)容理解難度。

2.6  產(chǎn)品架構(gòu)可以不那么復(fù)雜

把復(fù)雜的業(yè)務(wù)/功能簡單化、傻瓜化，最大的降低學(xué)習(xí)成本，能幫用戶操作的絕不讓用戶親自去操作。你要讓用戶在1分鐘之內(nèi)了解你的產(chǎn)品是做什么的、有什么功能，你就成功了。

2.7  大膽隱藏冗余內(nèi)容

B 端項目中內(nèi)容量是巨大的，面對龐雜的信息，去粗取精，提煉各場景的核心內(nèi)容，避免冗余信息阻礙內(nèi)容有效傳達。話術(shù)語言不單要簡單易懂，還要嚴格控制文字長度，保證內(nèi)容可以被快速掃描和理解。

2.8  尊重用戶習(xí)慣

不要妄想改變用戶養(yǎng)成的慣性思維，你要記住慣性思維大于設(shè)計思維，他的閱讀習(xí)慣、操作習(xí)慣都是不易改變的，不要為了個性化而嘗試去改變，大部分情況下結(jié)果不會是那么的理想，除非你有極大的把握。

2.9  選用合適的圖表

這個是常提到的，我就在這里簡單給大家提個醒。比如做數(shù)據(jù)對比，柱狀圖更能清晰表達出用戶想要的結(jié)果，你卻非要放個酷炫的雷達圖，他的本質(zhì)目的都沒達到，要美觀有何用？

每個圖表都適合哪些場景使用，像 antv、hicharts 等都有介紹，我就不一一贅述了，我之前也寫過一篇關(guān)于如何合理利用圖表的文章，大家有興趣的可以去看一下。

三、設(shè)計度量

產(chǎn)品設(shè)計的好與壞我們需要去驗證、去度量。我們怎么去驗證可視化的好與壞呢？

美與丑也是主觀的，沒有絕對的美，也沒有絕對的丑。一個產(chǎn)品，總會有人喜歡有人不喜歡，但是我們要迎合大多數(shù)人的審美。

所以就需要一個方法論來驗證產(chǎn)品的好與壞，現(xiàn)在各大廠都在做自己的一套產(chǎn)品驗證的方法論，阿里在這方便算是國內(nèi)做的不錯的，我舉幾個常用的度量模型。

    · 阿里云：UES

    · 螞蟻金服：PTECH與易用度

    · 1688：五度模型

    · 優(yōu)酷：DES

UES 目前是國內(nèi)最好的，在 5 月份的阿里設(shè)計周上也正式對外講解了 UES 模型。我拿阿里云的 UES 簡單講一下吧，這么多度量模型，無論他的方法、維度有所不同，但他們的目的是相同的：通過模型來度量設(shè)計成果。

    · 易用性：易操作性、易學(xué)性、易見性 ...

    · 一致性：整體樣式、通用框架、常用場景及組件 ...

    · 任務(wù)效率：任務(wù)完成率、任務(wù)完成時間、功能使用率 ...

    · 性能：首屏渲染時間、API 請求響應(yīng)時間、頁面請求響應(yīng)時間 ...

    · 滿意度：產(chǎn)品滿意度 ...

UES 分為 5 個模塊，這 5 項是整個產(chǎn)品生命周期需要驗證的。

關(guān)于 UES 我就介紹到這里吧，UES 模型要是展開講的話，半天都講不完，感興趣的話可以去阿里云官方發(fā)布的 UES 模型的相關(guān)資料中深度研究一下，看看適不適合自己的產(chǎn)品。

上面是度量產(chǎn)品的模型，接下來針對我們 B 端設(shè)計師，我們也要有一些指標(biāo)來度量自己是否合格。

3.1  設(shè)計效率

現(xiàn)在內(nèi)卷盛行的時代，各大廠都在講人效，畢竟時間才是最珍貴的，所以現(xiàn)在都在想方設(shè)法的提高人效。而且 B 端相對 C 端來說，可以有更多自動化的工具。

舉個我公司的例子，我剛?cè)サ臅r候基本沒有自動化工具，每個設(shè)計師每天也都在忙碌，誰也沒偷懶閑著。但是我發(fā)現(xiàn)有很多重復(fù)性的體力勞動是不需要多少思考就能完成的，但是卻耗費了將近 1/3 的時間。所以我就在想如何提高人效，把一些體力勞動用一些工具來代替，這樣就能釋放設(shè)計資產(chǎn)，去做更重要的事情。

當(dāng)時就做了第一個自動化的工具：設(shè)計系統(tǒng)，現(xiàn)在大家對這個詞應(yīng)該不陌生，但是我們剛開始做的時候比較早，還沒有一些比較完善的設(shè)計系統(tǒng)供我們參考，所以我們也算是前幾批摸索設(shè)計系統(tǒng)的團隊。設(shè)計系統(tǒng)做好后是可以把這1/3 的設(shè)計時間節(jié)省了下來，而且團隊的規(guī)范性更加統(tǒng)一。

后面的話我們也是做了一些其他的自動化工具，比如結(jié)合一些插件做到 icon、組件等發(fā)布的自動化，并且與研發(fā)同學(xué)打通，有相應(yīng)的自動化提醒工具，這樣也節(jié)省了與研發(fā)的溝通成本。

在工作中，流程上能減少一步就是成功，慢慢來，萬里長征就是一步一步走出來的。

3.2  增長設(shè)計

增長這個詞來源于【增長黑客】這本書，顧名思義這個詞的就是通過設(shè)計來促進產(chǎn)品增長。

這個詞用在 C 端上比較多，因為 C 端可驗證的方法比較多，見效快，所以我們常見的一些增長設(shè)計的案例都是關(guān)于 C 端的，而 B 端的話，受限制的因素較多，設(shè)計只是影響增長的一部分，而且見效慢。

但是雖說影響因素多、見效慢，我們還是可以抓住機會、多去嘗試一些方法來做到設(shè)計增長。我這個方法不行，我就換一種嘗試。大家都是在摸索中過河~

3.3  為業(yè)務(wù)賦能

所有的設(shè)計都是要為業(yè)務(wù)賦能、為商業(yè)買單。我們設(shè)計的本質(zhì)就是為用戶解決問題，讓用戶以最直觀的方式理解產(chǎn)品。不要為了所謂“我認為很美”而與業(yè)務(wù)背道而馳。

3.4  體驗創(chuàng)新

用戶體驗設(shè)計師會越來越重要，近兩年逐步被重視，而且未來幾年會越來越重視。行業(yè)內(nèi)需要更多動腦的人而不是僅僅會動手的人。

現(xiàn)在到了互聯(lián)網(wǎng)下半場，拼的不僅是功能，用戶體驗的重視程度已經(jīng)被提升了上來，在工作中的占比也越來越重。

再加上現(xiàn)在這個超級內(nèi)卷的時代，你不提升，你的競爭對手就把你干掉了。而且你如果只是一成不變的維護老版本，你去下家面試的時候都沒有拿得出手的產(chǎn)品。

3.5  善用工具

現(xiàn)在各種辦公類工具、軟件層出不窮，而且很多工具是比較類似的，有的設(shè)計師再選工具的時候就很糾結(jié)，我認為完全沒必要糾結(jié)，首先你要明確我想要達到什么目的，只要某個軟件滿足著你的需求就可以用。

工具是為人服務(wù)的，我們的設(shè)計軟件從 PS – Sketch – Figma，無論怎么變化總要圍繞一個目的：更高效的完成工作。

尤其是一些自動化工具，現(xiàn)在人工智能升級很快，要多關(guān)注設(shè)計自動化方面的工具，讓他來解放我們的雙手。

總結(jié)

最后送給大家一句話：

這時代唯一不變的，就是變化。

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

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

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

老板：給我來一套科技風(fēng)，要炫酷，要眼前一亮的感覺

    你：好嘞~（叮叮當(dāng)當(dāng)咚咚當(dāng)當(dāng)）

    老板：哎呀，我要的不是這種太花了，不夠高端

    你：給您改（叮叮當(dāng)當(dāng)咚咚當(dāng)當(dāng)）

    老板：哎呀，也不是這種太素了

    你：行，改....（我刀呢）

    沒做過科技風(fēng)格的新人缺乏對常見科技風(fēng)格的了解，很容易根據(jù)甲方模糊的描述及要求，主觀性的設(shè)計，還會在甲方要改的情況下十分委屈，我做的就是你描述的炫酷科技風(fēng)啊?？萍硷L(fēng)格大類本身特征就是炫酷，眼前一亮的感覺，甲方?jīng)]有了解只能粗略的表述。設(shè)計師主動了解市面常見的科技風(fēng)格細分及其使用場景。就能夠問出甲方爸爸更細化的需求，更客觀的根據(jù)使用場景選擇恰當(dāng)?shù)募毞挚萍硷L(fēng)，減少不斷重改的成本。

FUI：

    FUI 就是 Fictional User Interfaces (Fictional GUI)，就是 Fantasy User Interfaces，就是 Fake User Interfaces，就是 Futuristic User Interfaces，這些用戶界面它們是科幻的，是未來派的，是奇幻的，是虛假的.觀賞性大于實用性。

    并不是所有風(fēng)格的FUI都適合應(yīng)用于現(xiàn)實中，比如——半透明介質(zhì)且信息復(fù)雜的的UI，只適合出現(xiàn)在影視作品里面（和一些視頻游戲當(dāng)中）。它們的表現(xiàn)性強，看起來復(fù)雜精密，但對于信息展示功能很弱。其存在的目的是更好的配合場景，不會遮擋演員的臉部。想想看主角對復(fù)雜的數(shù)據(jù)一頓操作猛如虎，讓觀眾眼花繚亂，對主角更加崇拜。

1.商務(wù)科技風(fēng)：

     精致、高端、輕質(zhì)感；簡約干凈、形體線條精細；功能感強

     應(yīng)用：

    車載UI；金融UI;各種科技工具類產(chǎn)品的登錄注冊或官網(wǎng)Banner；商務(wù)海報等

    特征：

    1.商務(wù)科技配色較為嚴肅，低調(diào)。背景以深藍色，深灰色背景居多。

    2.元素的形狀并不復(fù)雜、外輪廓整體規(guī)則，周圍的細碎裝飾較少。

    3.強調(diào)品質(zhì)感，會模擬一些較為細膩玻璃、金屬或啞光的微質(zhì)感。對于光的使用較為克制，較少大范圍的使用輝光，多在邊緣使用較細的流光，看起來更加的犀利精致。

(偏商務(wù)科技風(fēng)格例子-圖片來源于網(wǎng)絡(luò)）

2.扁平科技風(fēng)：

    整體風(fēng)格偏向機械、直觀，其扁平特征是元素扁平純色塊或漸變，弱化圖表空間感及體積感。多組扁平的數(shù)據(jù)可    視化圖表，在空間層次的表現(xiàn)上更多是在同一平面上。

    非常適合多數(shù)據(jù)后臺數(shù)據(jù)展示，強調(diào)信息數(shù)據(jù)的清晰展示，較多使用純色面元素作為底板，減少了環(huán)境的背景外擾因素。且數(shù)據(jù)分組展示，功能分區(qū)明顯。

    設(shè)計成本及實現(xiàn)成本較低，為目前大多數(shù)數(shù)據(jù)可視化大屏展示所選擇。

(偏扁平科技風(fēng)格例-圖片來源于網(wǎng)絡(luò)）

3.HUD（儀表盤）科技風(fēng)：

    視覺多使用單色，點線元素?？梢耘c現(xiàn)實背景結(jié)合度高。

    應(yīng)用：

    電影(漫威系列FUI)、游戲、企業(yè)產(chǎn)品宣傳視頻、AR等展示型為主

    特征：

    1.顏色使用上單色居多，尤其多亮色白，亮色藍，同色相多透明梯度變化。無質(zhì)感或毛玻璃質(zhì)感。

    2.簡潔而不簡單，層次豐富，典型風(fēng)格HUD。空間層次感豐富，使用半透的結(jié)構(gòu)線3D模型或晶格模型，顯得輕        巧而精致，用戶能夠透過信息層看到場景層，

    3.極簡科技風(fēng)需要設(shè)計師把控好細碎元素的體量和數(shù)量，對信息不會進行過多的視覺干擾。

    ps:

   極簡科技風(fēng)數(shù)據(jù)的展示容量大于扁平科技風(fēng)，看起來很復(fù)雜高端但通常實用性差。如果使用過多的數(shù)據(jù)，則顯示    相似類型的圖表展示相似的數(shù)據(jù)集在視覺上可能會缺乏新鮮感，但更易于理解和理解。具有不同的圖表在視覺上是令人興奮的，但用戶需要花費更多時間閱讀。

(偏極簡科技風(fēng)格例-圖片來源于網(wǎng)絡(luò)）

4.賽博炫酷科技風(fēng)：

    賽博朋克又稱數(shù)字朋克、網(wǎng)絡(luò)朋克。

    應(yīng)用：游戲、H5、運營banner配圖等需要強視覺氛圍的運營。代表電影如：攻殼機動隊、頭號玩家、銀翼殺手等

    特征：

    1.張揚奇幻的娛樂感，技能風(fēng)、故障風(fēng)、視覺沖擊強烈。常見元素：全息投影、義體、立體城市、高達機械元素  等。

    2.人造光是賽博朋克在視覺上最大的特征，背景暗色，常用熒光黃、紫、藍、粉 、綠燈內(nèi)外發(fā)光，模擬霓虹燈管自發(fā)光效果,重點元素高亮輝光。

    3.色彩冷暖撞色對比強烈，如：紅藍對比青紫對比黃橙對比等。

    4.數(shù)碼屏幕與全息投影是霓虹燈的一種延伸，既能體現(xiàn)未來世界的高科技的感，也能體現(xiàn)出人造和虛擬的概念。部分元素前后疊影色彩錯位，有頻次的閃動，模擬電子科技的偶發(fā)故障。機械化IP形象和字體設(shè)計常見金屬感和拼接感。

（偏賽博科技風(fēng)格例-圖片來源于網(wǎng)絡(luò)）

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

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

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

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

近來對用戶心理比較感興趣，去看相關(guān)設(shè)計資料的時候發(fā)現(xiàn)相關(guān)內(nèi)容重復(fù)性較高，多方搜集資料結(jié)合自己的一些分析總結(jié)出一篇補充。

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

最后想說，設(shè)計師的價值不僅僅在視覺，好的設(shè)計必是好用好看好懂用戶的?？珙I(lǐng)域?qū)W習(xí)補充自己的視野，多思多想，掌握鑰匙，開啟用戶不同的心門。

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

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

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

“今天吃什么??？”

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

“一會去看什么電影？”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 影響用戶的決策方向

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

• 平臺自帶話題性

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

• 輸出口優(yōu)化

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

• 平臺盈利

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

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

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

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

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

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

排行榜資源的建立

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

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

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

• 自建用戶體系

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

• 偽造

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

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

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

1.頁面tab

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

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

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

2.圖標(biāo)入口

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

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

3.商品詳情頁榜單入口

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

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

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

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

1.編輯推薦/小編推薦

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

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

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

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

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

4.TOP排行榜

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

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

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

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

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

1.唯一性榜單頭部

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

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

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

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

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

1.純文字形式

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

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

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

• 圖片形式

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

• 左文右圖VS左圖右文

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

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

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

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

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

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

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

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

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

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

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

如何選擇合適的B端設(shè)計風(fēng)格？

1.B端后臺分類：

根據(jù)服務(wù)對象劃分：

一類支持有C端前臺，支持前臺產(chǎn)品管理各種資源。第二類服務(wù)企業(yè)，提高企業(yè)工作效率和營收。

根據(jù)后臺功能：

1.監(jiān)控運營：時效性強，旨在實時反饋異常情況，快速判斷下達命令，回復(fù)信息、多用于數(shù)據(jù)控制中心。

2.數(shù)據(jù)分析：數(shù)據(jù)結(jié)果的對比和分析趨勢，時效性要求并不高，了解整體和各部分數(shù)據(jù)水平，助力決策。

3.記錄管理類：主要用于人員、設(shè)備、資產(chǎn)等增刪改查，文本信息容量大，頻繁便捷的操作。

4.系統(tǒng)配置：權(quán)限配置、設(shè)備功能配置，操作為主。

2.后臺深淺兩大風(fēng)格分類：

淺色：適合文本信息多密集的表單列表類后臺，淺色更符合人眼白底黑字的閱讀習(xí)慣，瀏覽速度更快，信息獲取效率更高。

深色：圖像信息密集的后臺適合圖片、數(shù)據(jù)可視化圖表等；深色對彩色的圖像信息襯托更強。信息獲取速度較慢，長時間可能視疲勞。

3.作者常向產(chǎn)品方提供的風(fēng)格參考

較常見

1. 經(jīng)典商務(wù)風(fēng)（導(dǎo)航深、內(nèi)容淺）——專業(yè)、高效、成熟、可信賴（對照深色西裝人物形象）

   優(yōu)點：市面最常見的風(fēng)格，普世性高，大多數(shù)用戶可快速接受，層次分明

   缺點：視覺缺乏記憶點

 2.輕量科技感（導(dǎo)航淺、內(nèi)容淺）——簡潔、明快、輕量、年輕（對照白襯衫打領(lǐng)帶男性）

      優(yōu)點：視覺清新明快更年輕化更輕量，對其他文本及圖形展示包容性高，就像A4白紙一樣容器存在感弱

      缺點：純白色導(dǎo)航+頁面層次略曖昧。

 3.藍色科技風(fēng)（導(dǎo)航中、內(nèi)容中）

      適合：適合科技屬性強的產(chǎn)品界面，圖像圖形展示

      缺點：對其他色彩信息有干擾，持續(xù)性長時間觀看易視覺疲勞

 4.暗黑科技風(fēng)（導(dǎo)航深、內(nèi)容深）

      優(yōu)點：對色彩表現(xiàn)力強

      缺點：密集文本信息獲取速度會下降，持續(xù)性長時間觀看易視覺疲勞

4.精準(zhǔn)選擇風(fēng)格時可以進一步的考慮：

1.整體行業(yè)風(fēng)格

比如美妝和科技行業(yè)的整體設(shè)計基調(diào)就不太相同。

2.產(chǎn)品想要傳達的氣質(zhì)：

理性可靠 or  簡潔輕松輕量 or 關(guān)懷普世 or 酷炫吸睛….這個可以和相關(guān)產(chǎn)品經(jīng)理、銷售共同商討

3.目標(biāo)用戶的群體特點及喜好。

根據(jù)目標(biāo)用戶的性別、年齡層、受教育水平，審美水平考量（可能包含多種角色，選取1.2個核心角色為參考）帶入目標(biāo)用戶工作場景及愛用物常用物品味，去判斷基調(diào)。

如主要用戶群：40+男性用戶，本科以上受教育水平，使用windows電腦進行專業(yè)管理操作，審美傾向明確內(nèi)斂。

如主要用戶群：20-40歲，男女比例約6：4；大專；操作水平參差

4.使用場景及高頻的操作。

例如：最常使用數(shù)據(jù)分析管理，需要快速閱覽多條數(shù)據(jù)，對數(shù)據(jù)進行比對，更適合淺色風(fēng)格展示表單數(shù)據(jù)。

5.判斷獨立的平臺是否為獨立開發(fā)

獨立開發(fā)的，可以采取更獨特設(shè)計。若平臺很大需要不同外包公司的合作屬于整合類平臺則更注重設(shè)計的包容性。

5.如何讓后臺設(shè)計更具特色：

1. 
   

   重點色的使用

   
   

“731配色比例”70%的面板色，30%的導(dǎo)航面板色，10%的強調(diào)色。（這里的用色比例可以根據(jù)內(nèi)容具體再去調(diào)節(jié)只是大概比例）品牌色或重點色：強調(diào)行動關(guān)鍵點、重要信息高亮、圖形化說明等。強調(diào)色用就要用的像蛋糕上的櫻桃。起到畫龍點睛作用即可。

2.圖標(biāo)的優(yōu)化

后臺高頻出現(xiàn)的圖標(biāo)，值得我們花時間去統(tǒng)一設(shè)計打磨，調(diào)整圓角粗細疏密，符合整體界面氣質(zhì)。從圖標(biāo)庫里拖出的圖標(biāo)很多在線條粗細上是不統(tǒng)一的，好的設(shè)計在細節(jié)處也要動人。

B端工具類圖標(biāo)識別性第一，美觀性第二。B端導(dǎo)航圖標(biāo)更多是在基礎(chǔ)造型上打磨，不需要加花里胡哨的漸變、投影，導(dǎo)航圖標(biāo)一般在24px-16px大小，太復(fù)雜反而看不清。在區(qū)分狀態(tài)的時候可以考慮加點品牌色

3.空狀態(tài)小插畫

空狀態(tài)插畫是B端設(shè)計師少有能發(fā)揮自己繪畫天賦小巧思的地方。

圖形化狀態(tài)語言，輔助用戶理解內(nèi)容?？梢詫a(chǎn)品機械蒼白的文案設(shè)計表現(xiàn)的更加具有溫度，具有引導(dǎo)性。讓乏味的工作出現(xiàn)一些共情小彩蛋，有趣的插圖動畫可以緩解等待的焦慮。

4.登錄注冊頁

純色背景卡片式：簡單大方更聚焦登錄操作

插畫背景：場景化展示產(chǎn)品的功能及亮點，讓用戶更有心理預(yù)期

幾何圖形背景：最后和品牌圖形相關(guān)，加深用戶對產(chǎn)品的品牌印象。

照片背景：相關(guān)場景或產(chǎn)品類型，具象圖片信息更直觀

5.圓角的大小

不同大小的圓角傳達產(chǎn)品不同的氣質(zhì)，大圓角親和、小圓角精致、中等圓角大眾中庸。

6.優(yōu)化信息層級

優(yōu)化信息層級，區(qū)分信息主次可以使閱讀更快，操作更快，界面更有節(jié)奏感。

這時候你就是那個考前畫重點的老師

判斷一個頁面里最重要的是那些信息或操作，強化它！并弱化輔助信息；

判斷一個模塊里那些是重要信息，強化它！

6.新人需要避免的雷點：

1. 追求炫酷的視覺效果舍棄操作效率。比如追波風(fēng)滿屏花里胡哨的卡片及面板，滿屏大投影及高飽和色彩。對于B端界面來說信息噪音太多，反而干擾信息獲取效率。

   
   

2.反常規(guī)用戶習(xí)慣的操作。尊重用戶習(xí)慣，不要為了個性化去嘗試改變，不要妄圖改變用戶的操作和認知的慣性。慣性思維大于設(shè)計思維，曾經(jīng)遇到過產(chǎn)品因為右手操作所以要把導(dǎo)航放在右邊的離譜例子。

3.數(shù)量多，動靜大的夸張的動效。B端與C端不同的地方在于希望操作者沉浸式工作，遵循非必要不打擾。之前看過一個反面例子后臺，在每一步操作后都出現(xiàn)大的場景動效鼓勵完成，如果作為一個長期使用的工作者，我會覺得每次完成任務(wù)都需要等待動畫完成可能只需要2-3s也很浪費我的時間。

4.新人建議多看Antdesign和Element等成熟的組件，創(chuàng)新類組件樣式，最好和和開發(fā)商量是否能夠?qū)崿F(xiàn)。

5.在確定主要風(fēng)格及2-5張主要頁面后，就應(yīng)該著手基礎(chǔ)規(guī)范（色彩字體等，不然后面越做越亂）。

6.一段時間一個審美，同一界面中的元素風(fēng)格不統(tǒng)一。

7.避免大面積使用高飽和高明度的色彩，及曖昧含糊的臨近色彩。長時間使用眼睛會累，產(chǎn)生不耐煩焦躁的負面情緒。

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

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

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

前言：

隨著科技的發(fā)展從家庭到辦公室，協(xié)作機器人(cobots)正在逐漸出現(xiàn)在我們的視野，汽車車載虛擬形象也越來越多地涌現(xiàn)，例如：蔚來的NOMI，理想的ONE，奔騰的YOMI。虛擬語音助手的形象也越來越符合大眾口味。虛擬語音助手形象通過改善用戶體驗和培養(yǎng)情感聯(lián)系來增加汽車的價值。但是我們在使用的過程中不難發(fā)現(xiàn)，機器人的設(shè)計很容易出錯，從而讓我們感到無聊、生氣，甚至更糟糕的情緒——害怕。

那么，汽車公司如何設(shè)計虛擬語音助手，才能創(chuàng)造更安全、更高效、更有回報的駕駛體驗?zāi)?

本文將通過以下幾點進行闡述，讓虛擬語音助手的設(shè)計創(chuàng)造更好的汽車體驗。

1.利用UX（用戶體驗）來驅(qū)散對人工智能的恐懼

如果在文化的進程中，高科技在其中扮演過一個壞人的角色，那么在設(shè)計時一定要謹慎。例如，在美國，小說作家史蒂芬·金寫過一本關(guān)于殺人汽車的恐怖小說，這會讓用戶在使用汽車的時候產(chǎn)生聯(lián)想。

谷歌公司也深知這一點，這就是為什么早在10年前，它將其早期的自動駕駛汽車Waymo設(shè)計得如此可愛，目的是為了幫助人們更適應(yīng)自動駕駛這一遙遠的概念。

史蒂芬·金恐怖小說《克里斯汀》                                 谷歌第一輛無人駕駛汽車waymo

從另一個角度來說，創(chuàng)建一個可愛的，溫柔的，虛擬形象是為了給用戶一種優(yōu)越感，從而消除恐懼。

外形的設(shè)計固然重要，但是行為比外觀更應(yīng)該受到重視，美國時間2016年6月27日，Anki發(fā)布的玩具機器人Cozmo的產(chǎn)品，它的面部是一塊發(fā)光顯示屏（OLED），眼睛則是隨心情變化的方塊。因為外形相似，Cozmo被認為是皮克斯動漫《機器人總動員》中瓦力（WALL-E）的現(xiàn)實版?？雌饋肀容^呆萌，給人一種畜類無害的感受。并且通過笨拙的行為，展現(xiàn)出它呆萌的性格，大大降低了人們得戒備心理。

呆萌的機器人Cozmo

以黑綠色代表邪惡的斯萊特林學(xué)院                                黑綠色的Cozmo

因此即使用了一些比較可怕的顏色，例如，黑綠色。你也不會產(chǎn)生恐懼的心里。由此可見，行為遠比外觀給用戶帶來的感受更具有說服力，也更加直觀。

當(dāng)我們在設(shè)計語音虛擬助手時也是一樣，無論是作為一個合作機器人，還是車輛本身，要問問自己，我想展現(xiàn)的AI是什么樣子的，這樣你就可以在它跨屏幕遷移時設(shè)計一個有凝聚力的體驗。

總結(jié)：虛擬語音助手的形象要降低用戶的恐懼感，適當(dāng)?shù)臑橛脩粼黾觾?yōu)越感。

2.不要越界

Jibo是一款設(shè)計來幫助你在家工作的合作機器人，由 MIT 科學(xué)家 Cynthia Breazeal 制造。它高約28cm，重約六鎊，無法自由移動，擁有電子眼睛、耳朵和聲音，頭部可以 360 度旋轉(zhuǎn)并進行聲音定位，能夠講故事、聊天和提供安慰，也可以拍照和做日程提醒。但可惜的是它失敗了，因為它承諾太多，更注重情感而不是功能，比如語音和人臉識別上存在一定的誤差，并沒有宣傳視頻里演示的那么生動；智能家居中控方面，因為要通過第三方平臺實現(xiàn)控制，實際體驗并不流暢；又比如，因為起初內(nèi)容缺乏、功能未得到完善，Jibo 無法看視頻、玩游戲和視頻通話，除了擠眉弄眼之外，屏幕成了擺設(shè)。

簡單來說就是它能做的事兒和它899美元的售價不匹配，自然就沒有用戶愿意為他買單。

 經(jīng)營失敗而倒閉的機器人JIBO

Qoobo是一款帶尾巴的靠墊，可以通過擺動尾巴來安慰用戶，雖然看起來也沒有特別智能，但它之所以能夠成功的原因是因為它的功能和價格合理。在滿足基本需求時，“搖尾巴”的功能可謂是“錦上添花”。

深受用戶喜愛的坐墊機器人Qoobo

在車載中也是如此，比如蔚來的NOMI,經(jīng)常有用戶反饋，nomi有的時候所問非所答，要喊出指定的關(guān)鍵詞才可以做出相應(yīng)的應(yīng)答，但是它能夠成功的原因是，它們能增加真正的價值，并在受控的環(huán)境中運營，在那里人工智能可以成為“領(lǐng)域的老板”。同樣的在設(shè)計虛擬語音助手形象時，需要有一個明確的目的，那就是它能做什么，不能做什么。換句話說就是：在不影響我駕駛的前提下，幫助我完成一些額外的工作。

總結(jié)：要使虛擬語音助手成為功能清晰的服務(wù)生態(tài)系統(tǒng)的一部分，滿足用戶的基本需求。

3.展現(xiàn)它作為助手功能性的一面。

恐怖谷理論是一個關(guān)于人類對機器人和非人類物體的感覺的假設(shè)，它在1970年由日本機器人專家森昌弘提出，虛擬形象或機器人的仿真度越高人們越有好感，但在相似度臨近100%前，這種好感度會突然降低，因為你無法分辨某物是否是人類，這會讓用戶產(chǎn)生不安的心理。雖然車內(nèi)人工智能顯然不是人，但我們確實要避免這個令人毛骨悚然的情況發(fā)生。在贏得用戶的信任并建立聯(lián)系的同時，也需要讓用戶知道你的界限，并對數(shù)據(jù)的收集和使用保持透明。

恐怖谷理論

令人恐懼的設(shè)計                                                                   看完就喊媽媽的動畫

還要注意的是在設(shè)計的過程中，要區(qū)別人和人的交流以及人和虛擬語音助手的交流的交流。

機器人再說話時會說：請，你好等禮貌用語，這樣父母在使用語音助手的同時，不會擔(dān)心孩子學(xué)到一些粗魯?shù)挠谜Z

其次，我們在與功能性動物交流時，不會用人類的用語，更傾向于使用專門的動物用語。例如，在東北趕集的人，不會對馬或者驢說，往前走，不要走了。而是會說：“駕”  “屢” 等擬聲詞來代替，一方面是為了快速的下達指令，另一方面就是區(qū)分人類用語言。

你可能會經(jīng)?？吹竭@樣的新聞：某演員入戲太深，走不出自己的角色，導(dǎo)致發(fā)生抑郁，帶來糟糕的結(jié)果。這就是用戶對角色情感的過度投入，導(dǎo)致無法區(qū)分現(xiàn)實世界和角色世界。因此語言另一個用處就是：防止用戶入戲太深。

總結(jié)：保持和突出語音助手該有的特征，這樣可以讓用戶更加容易走出和進入使用場景。

4.扮演它該有的角色

paro這是一個海豹幼崽的形象，這種機器人有助于癡呆癥患者的護理。通過肢體接觸，可以喚醒癡呆癥患者過去養(yǎng)育子女、飼養(yǎng)寵物的記憶。它的感光裝置能分辨白天和黑夜，它的位置感受裝置可以判斷自己是處于被抱著，還是處于跟主人相對的狀態(tài)。它在充電時用一個奶瓶，這和他“被扶養(yǎng)”的定位相吻合。

代替動物為老人治療的Paro

正在充電的Paro

寵物機器人Lovot，當(dāng)你決定要收養(yǎng)它們時，也要意識到它們每天半個小時鬧騰，還有那被“關(guān)愛”需求，真的也許會讓你累覺不愛卻又割舍不了，感嘆自己為什么要“養(yǎng)”這兩個小鬼。讓我們感受到，這些機器人就像人一樣，它也有嬰兒期，需要我們耐心教導(dǎo)。

寵物機器人Lovot

再比如馬里奧在最早的出道作品《大金剛》中，馬里奧被設(shè)定為一名普通的美籍意大利人，從他的口音(或是從他的配音演員Charles Martinet的所配的口音)來看，他的英文確確實實帶有一定的意大利口音，而且從服裝上也是典型的美國公民裝扮。

因此，無論是外形還是功能上都要有一定的隱喻和暗示。

總結(jié)：為所有情況尋找隱喻，這可以讓用戶有一個連貫的想法。無論在哪中場景，都要暗示和產(chǎn)品相關(guān)的特性，這樣用戶對虛擬語音助手的角色定位才會一直保持統(tǒng)一。

5.讓互動更有價值

在設(shè)計過程中，始終要貫穿的思維就是如何使虛擬形象對用戶的情感做出反饋。通過設(shè)計引起用戶情緒價值與情感體驗。比如，通過簡單應(yīng)答，或者簡單的肢體動作來達到目的。建立一個專屬于用戶的體驗設(shè)計。比如引導(dǎo)用戶給虛擬形象命名等。

總結(jié)：培養(yǎng)感情紐帶，讓用戶與虛擬語音助手建立長期關(guān)系，讓用戶對合作機器人更加滿意。

在未來幾年內(nèi)，我們預(yù)計語音人工智能的個性、年齡和性別將會多樣化，車內(nèi)語音助手將繼續(xù)被采用，尤其是隨著更多的自動駕駛功能進入市場。對于一些原始設(shè)備制造商來說，將合作機器人設(shè)計成技術(shù)的實體表現(xiàn)形式，以幫助贏得用戶的信任，這是有意義的，當(dāng)然還有其他制造商將在人機界面(HMI)中以圖形方式展示人工智能，就像Siri一樣，以較為抽象的方式表現(xiàn)出來。無論哪種形式所遵從的原則是不變的，期待大家更好的設(shè)計！

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

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

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

在靈籠中，白月奎開著奧迪在滿是噬極獸的世界馳騁。小伙伴們也驚呼連連。其實，這是一款名為AI trail的奧迪概念車已經(jīng)被生產(chǎn)，預(yù)計2030年上市，那現(xiàn)實中是什么樣的呢？接下來，就從奧迪開始，為大家盤點未來感的汽車是什么樣子的吧。

1.奧迪AI trail 

這也是一輛純粹的SUV。它有四個電動馬達，每個軸距上有一個，這使它具有四輪驅(qū)動能力，它在公路上的最高速度為每小時81英里，越野范圍為155英里。它的輪胎壓力可以根據(jù)地形，在移動中調(diào)整。

奧迪 AI trail外觀

當(dāng)你坐在里面，它會給出一個令人難以置信的寬廣的觀察范圍，她甚至可以讓你看到輪胎。因為里面有足夠的空間，甚至沒有任何多余的顯示器，它是完全由你的手機進行控制的。

把手機作為屏幕，從而達到更廣闊的視野

你可能已經(jīng)注意到?jīng)]有大燈，但這是因為它用于照明的燈被安裝在自主的無人機上，這些無人機會在前面飛行，為你照亮道路。當(dāng)你在光線不好的環(huán)境野營時，你可以通過折疊無人機，手電筒等照明設(shè)備。

無人機搭載照明燈

充當(dāng)照明設(shè)備的無人機

2.雷諾EZ-Go 

雷諾在2018年發(fā)布了他們的電子出租車概念車easy go，同樣計劃在2030年面世。其設(shè)計理念是：在未來，汽車的所有權(quán)已經(jīng)不在是一種趨勢，當(dāng)我們需要旅行時，我們只需預(yù)約一輛自動駕駛的汽車。雷諾高層表示，網(wǎng)約車和共享移動服務(wù)將會是雷諾的主要發(fā)展方向。當(dāng)你來到一個陌生的場景，你可以透過360的窗戶來欣賞沿途的風(fēng)景。進入內(nèi)部，內(nèi)部空間可容納六名乘客，呈U型排列車頂從前面打開，提供存儲空間。并且它還有四輪轉(zhuǎn)向功能，意味著它可以在城市間輕松穿梭。當(dāng)然，作為更明顯的旅途用車，它的車速最高限制在50m/h。對于行動不方便的乘客，它有一個可伸縮的斜坡，當(dāng)你需要下車是，將自動伸向路邊，讓乘客可以更加方便的進出。

在城市穿梭的ES-Go

通過顯示器可以看到基本信息

汽車內(nèi)飾

方便進出的設(shè)計

3.terrafugia tf-x

相信小伙伴們多少在科幻電影當(dāng)中看到“會飛的汽車”，我在小的時候看過一個電影《第五元素》，依稀記得家里的七大姑八大姨，嗑著瓜子，坐在炕頭，討論著“我們有沒有機會坐上這樣的汽車”。這部這款汽車可能在不久的將來將會滿足大家的遠景。

電影《第五元素》

如果你正在尋找未來的汽車是什么樣子的，那么 terrafugia tf-x就是我們我們理想的設(shè)計。這款汽車售價 28 萬美元起，折合人民幣約為190萬左右。它擁有一雙可折疊的螺旋槳，隱藏在車機兩側(cè)。

TF-X外觀                                                                              展開雙翼的TF-X

這款汽車很快就由波士頓的設(shè)計公司開發(fā)出來了，這款概念車比它最初看起來的空間要大得多，它是插電式混合動力，能夠?qū)崿F(xiàn)全自動飛行，在緊急狀態(tài)下可以手控或者遙控。在動力系統(tǒng)上采用插電式混合動力傳動系統(tǒng)，有兩個600制動馬力的電機和一個33制動馬力的燃料發(fā)動機，電腦自動控制，擁有有四個座位，可垂直起降空中續(xù)航可達640 公里，最高時速為 185 公里/小時，但是它在路上的最高速度或它的范圍還沒有被公司宣布，即它可以飛到可伸縮的翅膀上折疊出一個連接的螺旋槳的事實。

與此同時，各國的航空當(dāng)局也在討論和協(xié)商制定管理這一新興交通業(yè)的政策和安全標(biāo)準(zhǔn)。如果未來將會普及飛行汽車，那么開上飛行汽車是否需要飛行駕照？人們是否會花費超過100萬RMB來購買？

正在倒車的Terrafugia TF-X

飛行中的Terrafugia TF-X

4.雪鐵龍19_19

雪鐵龍1919確實是一款具有未來設(shè)計感的汽車，它的目的是要做到其舒適性已優(yōu)先于其他每一個元素，它的設(shè)計理念是未來航空工業(yè)。結(jié)合前擋風(fēng)和立體化的玻璃覆蓋，上半部分更像一個漂浮的太空艙。

雪鐵龍19-19外觀

它在車頂后部安裝了激光雷達探頭，主要用于在長距離行駛時的自動化駕駛。 它的踏板和方向盤，是可以伸縮的。但當(dāng)駕駛者想自己駕駛時，踏板會降到合適的位置，方向盤會展開。當(dāng)用戶不想駕駛的時候，方向盤會自動縮回，智能音箱自動升起，幾乎像一個潛望鏡一樣，幫助用戶實時檢測駕駛情況，并且把信息顯示在擋風(fēng)玻璃上。

自動駕駛模式，信息在擋風(fēng)玻璃上顯示

5.輛豐田L(fēng)Q

豐田L(fēng)Q的設(shè)計原則是，讓司機和他們的車輛之間有更加緊密的聯(lián)系。所以通過加入最先進的先進的AI，稱為Yuyi，將人工智能打造成你在車內(nèi)最好的朋友之一。 

會眨眼睛的LQ

它是全電動的，擁有SAE  L4級自動駕駛系統(tǒng)，這意味著不需要用戶的參與，因此車廂的舒適性就顯得尤為重要。在座艙內(nèi)的乘客被不斷地監(jiān)測，AI將根據(jù)司機的情緒和警覺狀態(tài)來調(diào)整溫度，甚至是駕駛模式。并將進一步嘗試在情感上吸引司機，使他們在旅途中保持愉快的心情。車內(nèi)的每個控制都是語音激活的，這代表車內(nèi)幾乎沒有任何物理按鍵，所有的信息將會投射在擋風(fēng)玻璃上。甚至可以調(diào)整照明水平，在空氣中釋放平靜的感覺，AI也會選擇自己的音樂播放列表，喚起它認為目前最符合你情緒的音樂。

AI根據(jù)用戶心情播放相關(guān)音樂

正在自動駕駛的LQ

6.梅塞德斯-奔馳Vision AVTR

如果你想看到世界上最有未來感和最有異國情調(diào)的輕型概念車，那么你一定要看的就是這輛車。相信小伙伴們都看過《阿凡達》這個電影，無論是科幻的劇情，還是絕美的場景，都在當(dāng)時引起了不小的轟動。這輛車的靈感就是來自《阿凡達》這部電影。而且契合度可謂是非常的高。

阿凡達場景                                                                  阿凡達宣傳海報

它外觀采用了仿生設(shè)計，整體觀感十分科幻。車身兩側(cè)采用了全透明設(shè)計，意在大幅提高車內(nèi)視野，強調(diào)車內(nèi)、車外的交互。它還使用了33瓣采用了獨立的仿生襟翼，看起來像爬行動物的鱗片，可以根據(jù)不斷變化的條件來調(diào)整車輛上方的空氣流動。

《阿凡達》電影中的精靈樹

他的輪胎，借鑒了電影中，精靈樹的樣式，并且它去掉了傳統(tǒng)的圓形輪，胎取而代之的是球形輪胎，它提高了機動性，對周圍的影響較小，并且能夠扭轉(zhuǎn)30度，這意味著汽車可以以螃蟹的方式側(cè)向移動。

AVTR外觀

可以依據(jù)氣流和感應(yīng)翻轉(zhuǎn)的仿生襟翼

內(nèi)飾以流動的波浪和花朵形狀為基礎(chǔ)，這看起來是有史以來最舒適、最高效和最愉快的旅程。這輛車會與你交談，了解你想去的地方，在給它下達指示后，你需要做的就是坐下來，讓它做所有剩下的事情。值得一提的是，車內(nèi)同樣沒有任何按鍵，當(dāng)你伸出手站，并且注視手掌時，按鍵就會顯示在你的手心上，你進行移動點擊等操作。

AVTR內(nèi)飾                                                             顯示在手掌上的虛擬按鍵

通過手掌來控制方向                                                用手掌進行交互

通過對趨勢的了解和分析，相信小伙伴們對未來感汽車有了新的認識和理解。目的也是為了讓大家更好的把自己的理念和設(shè)計與未來汽車相貼合，亦或是產(chǎn)生靈感，發(fā)散思維，做出更好的創(chuàng)作。希望在不久的將來，無論在汽車造型，還是內(nèi)飾，或是儀表等，可以看到大家充滿激情的設(shè)計。

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

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

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

什么是查詢列表？

首先我們先了解下官方Ant Design對查詢列表的定義：

簡介：

查詢列表可以查看和處理大量的條目數(shù)據(jù)，常有導(dǎo)航至詳情的作用，

用戶可在列表頁對條目進行篩選、搜索、對比、新增、分析、下鉆至條目完整詳情頁等操作。

設(shè)計目標(biāo)：

幫助用戶更高效的查看、處理、查找條目。

設(shè)計原則：

易讀性：采用格式一致外觀，突出有利于對象識別的關(guān)鍵信息。利用富交互分層展示信息以減少認知負荷；

可尋性：列表以易于瀏覽的邏輯排序。提供合適的搜尋組件幫助用戶快速查找信息；

常規(guī)布局順序：

數(shù)據(jù)過濾 + 數(shù)據(jù)統(tǒng)計 + 數(shù)據(jù)列表 + 批量操作

模板頁面示例：

現(xiàn)在有了官方解答指導(dǎo)，我們就先從分析模仿開始

查詢列表有什么？

從四個維度開始一一分析：

一、數(shù)據(jù)過濾：

常規(guī)的數(shù)據(jù)過濾分為兩種類型：

1、條件篩選：

特點【結(jié)構(gòu)化+有限范圍】，篩選需求和數(shù)據(jù)都是結(jié)構(gòu)化的，

比如有一個用戶信息表，需要篩選出性別【男】+城市【北京】+年齡段【18-24歲】的用戶，就是因為信息屬性可以被量化和拆解處理，我們才能多條件組合篩選（且的關(guān)系）出來；

組件：選擇器（單選/多選）；

布局：上下結(jié)構(gòu)（常用）、左右結(jié)構(gòu)，條件多時要配合可折疊操作；

形式：區(qū)域堆疊、表頭、彈窗；

2、搜索查詢：

特點【非結(jié)構(gòu)化+模糊/精準(zhǔn)匹配】，搜索的需求是非結(jié)構(gòu)化的，

比如還是用戶信息表，需要查到一個叫【寧榮榮】的信息，你就只能去手動打字去搜索，因為姓名是開放式的信息，無法被結(jié)構(gòu)化處理。

組件：基礎(chǔ)搜索框、高級搜索框；

布局：跟隨列表，常放置其左上角或右上角；

關(guān)于具體使用，搜索不用多說，遵循系統(tǒng)統(tǒng)一性原則，選擇一處固定位置就好，

對于B段產(chǎn)品，業(yè)務(wù)本身比較復(fù)雜，篩選條件偏多，原則建議從使用高低頻入手，高頻顯性，低頻置后、折疊都可（后續(xù)可以出一片詳細的篩選篇分享下）

二、數(shù)據(jù)統(tǒng)計：

數(shù)據(jù)統(tǒng)計一般作為查詢列表的重要配角出現(xiàn)，方便用戶直觀了解到當(dāng)前頁面的統(tǒng)計信息。

就是列表數(shù)據(jù)提煉出來統(tǒng)計信息，數(shù)據(jù)名稱+數(shù)值，左右、上下布局都可，

有一點強調(diào)一下，業(yè)務(wù)的數(shù)據(jù)統(tǒng)計要求和條件篩選聯(lián)動變化，就要放在條件篩選下方，

如果統(tǒng)計數(shù)值是固定值，就放置條件篩選上方。

三、數(shù)據(jù)列表：

這里的列表主要陳述標(biāo)準(zhǔn)的【表格Table】形式，

表格被公認為是展現(xiàn)數(shù)據(jù)最為清晰、高效的形式之一。

它常和排序、搜索、篩選、分頁等其他元素一起協(xié)同，適用于信息的收集和展示，以及操作結(jié)構(gòu)化數(shù)據(jù)，

明顯優(yōu)勢就是結(jié)構(gòu)簡單，分隔歸納明確，使信息之間更易于對比，大大提升了用戶對信息的接收效率和理解程度。

常規(guī)內(nèi)容構(gòu)成：

Header：標(biāo)題、篩選（高頻）、操作按鈕、表搜索、icon（列設(shè)置、刷新、全屏）

Table-Header：復(fù)選框、序號、列名稱、icon（排序、提示、列篩選、列搜索）

Table-Content：數(shù)據(jù)內(nèi)容、按鈕

Footer：多選數(shù)量，分頁器

四、批量處理：

批量操作是作用于整個頁面的操作，故放置與頁面最底部，當(dāng)然這個可以根據(jù)應(yīng)用場景調(diào)整位置，

常見操作有【批量刪除】【批量禁用】【批量導(dǎo)出】。

如何設(shè)計查詢列表？

筆者也是從0開始接觸B端設(shè)計，開始查閱了相關(guān)很多設(shè)計規(guī)范體系，一頓狼吞虎咽，依葫蘆畫瓢出了設(shè)計模板

下圖就是依據(jù)Ant Design設(shè)計出的第一版查詢列表模板

經(jīng)過產(chǎn)品和研發(fā)評審，這樣的布局表現(xiàn)雖說“五臟俱全”、“兼容性較好”，但是脫離了用戶實際使用場景和交互路徑，割裂感也很強，

舉個例子，你準(zhǔn)備蓋一個房子，常規(guī)講應(yīng)該有有客廳、臥室、書房、廚房和衛(wèi)生間五個空間，但你現(xiàn)在只是單純用磚塊砌了五個房間，大小一樣，毫無順序，想必你也不會這么蓋···，我們現(xiàn)在從頭開始，你是不是會考慮：

1、是不是進門應(yīng)該是客廳，是不是應(yīng)該大一點好接待客人；

2、書房是不是應(yīng)該遠離，減少噪音；

3、哪些房子需要窗戶，窗戶朝哪邊好通風(fēng)，陽光充足；

4、等等···

總結(jié)一句：我們設(shè)計出的交互操作&視覺呈現(xiàn)，要契合用戶實際使用場景和路徑，而不是自己YY。

怎么獲取你想要的答案？調(diào)研和競品分析。

調(diào)研可以向產(chǎn)品、銷售、交付人員獲取你想要的信息，

競品分析可以找同類型產(chǎn)品進行優(yōu)劣分析，取其精華。

下面列舉調(diào)研和競品分析的幾個點說明下：

調(diào)研一

問：產(chǎn)品或銷售登門拜訪客戶時，演示電腦分辨率是多少？客戶使用電腦分辨率是多少？

答：多為老式筆記本電腦且分辨率偏小，1440*900、1366*768偏多。

機會點：上圖數(shù)據(jù)來自百度統(tǒng)計-流量研究院也只能作為輔助參考，最終還是要看產(chǎn)品實際用戶設(shè)備情況，為了保證頁面內(nèi)容盡可能多的展示在屏幕上，布局得緊湊，要優(yōu)先適配小屏幕效果，所以設(shè)計稿尺寸得調(diào)整為1440*800（去除瀏覽器頂部頁簽+地址欄+Win任務(wù)欄高度，再取整）。

調(diào)研二

問：詢問客戶使用查詢列表頁面是否能高效的查看、處理、查找條目

答：查詢查看沒問題，就是一屏數(shù)據(jù)內(nèi)容展示的太少，標(biāo)題欄、篩選和數(shù)據(jù)統(tǒng)計占了太多高度，而且篩選也不常用，導(dǎo)出按鈕在底部不明顯，橫向滑動很難用，看錯行。

機會點：優(yōu)化布局，篩選考慮折疊或者表頭篩選，橫向數(shù)據(jù)堆積能否換行展示，導(dǎo)出操作是否可以放在上方？

競品分析：紛享銷客CRM

優(yōu)點：列表內(nèi)容占主要視覺面積，篩選采用表頭和自定義配置條件功能結(jié)合，列內(nèi)容可自定義隱藏/顯示/前置和列固定左側(cè)，優(yōu)先展示用戶自己想看的信息，減少橫向滾動條操作和提升小屏用戶體驗，將主動權(quán)交給用戶，列表視圖和分屏視圖也滿足了不同用戶的查看需求，以上這些都是很好的優(yōu)化方向。

競品分析：廣聯(lián)達

優(yōu)點：同樣列表內(nèi)容占主要視覺面積，高頻篩選放出來，低頻篩選采用折疊交互方式，用戶有需要則點開【更多篩選】去操作，頂部有數(shù)據(jù)統(tǒng)計支持總攬，Table內(nèi)容對于強關(guān)聯(lián)的內(nèi)容進行上下組合（節(jié)省橫向空間），所有的操作按鈕集合到右上角，方便用戶定位操作。

總結(jié)一下：

以上就是筆者在調(diào)研和競品分析上可以獲取到的主要信息，雖說第一版套用AntD模板的設(shè)計并不理想，但對于初入B端行業(yè)的筆者來說著實重要，對查詢列表的框架、功能、和交互有了基礎(chǔ)指導(dǎo)和了解，才能有后續(xù)的一些針對特定業(yè)務(wù)場景的設(shè)計優(yōu)化改版，凡事還是得現(xiàn)有基礎(chǔ)理論支持，后面的路才會走的更遠。

言歸正傳，下圖就是針對上面的總結(jié)優(yōu)化后的查詢列表，相比第一版（可上劃參考對比）變化還是挺大的，各位可以對照的優(yōu)化點細細體會下：

1、取消面包屑（系統(tǒng)深度較淺），優(yōu)化（減少）標(biāo)題欄高度；

2、增加數(shù)據(jù)統(tǒng)計，區(qū)域板塊使用分割線劃分，減少割裂感；

3、頁面操作按鈕集合放置在右上角，主按鈕統(tǒng)一在最右側(cè)；

4、高頻篩選常駐+表頭篩選結(jié)合交互（這里其實還是有問題的，對于組合篩選操作并不易用，待優(yōu)化）；

5、增加Table刷新和列設(shè)置操作（刷新和設(shè)置icon）；

6、列鎖定（鎖子icon）可以快速自定義設(shè)置優(yōu)先左側(cè)固定；

7、Table內(nèi)容根據(jù)業(yè)務(wù)內(nèi)容屬性合并上下組合展示，節(jié)省橫向面積（寧可上下滑動，也不要橫向滑動，至少減少橫向滑動的距離）；

這一版看起來整體架構(gòu)層級依然清晰明確，從視覺角度看更豐富、更有節(jié)奏感，從交互來看也更符合用戶的操作場景，新增了幾個輔助功能，讓用戶可以根據(jù)自己的業(yè)務(wù)需要自定義配置列表內(nèi)容，更有掌控感，能更高效的查看、處理、查找相關(guān)信息，這也是基本達到了查詢列表的設(shè)計目標(biāo)。

經(jīng)過和產(chǎn)品經(jīng)理溝通，此次優(yōu)化思路和方向也很準(zhǔn)確，獲得了肯定，后續(xù)的迭代還需持續(xù)進行。

調(diào)研和競品分析帶來的好處想必各位也體會到了，凡是我們不了解不精通的，就去多看看多搜搜，總會有收獲，站在巨人的肩膀上總會看的更遠。

Ending

這次的分享是自己在探索B端道路上的小經(jīng)歷，同時也體會到一些更深層次的東西，比如設(shè)計的意義在哪，什么是好的設(shè)計，怎么才能做出“好”的產(chǎn)品，在此分享給各位，希望能給大家?guī)硇┧季S上的變化，共同進步。

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

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

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

背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

競品分析｜尋找實踐證據(jù)，謹慎驗證

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

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

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

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

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

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

文字陷阱：中英文字高不等于字號

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

眼動理論：研究表明，人眼最小可視視角 0.3 度，水平最大眼動舒適轉(zhuǎn)動區(qū) 30度，垂直最大眼動舒適轉(zhuǎn)動區(qū) 55度。可得出人眼最小識別范圍 12px，水平視野舒適眼動寬 1200px，垂直視野舒適眼動高 2200px。參考資料：論文《基于眼動交互的用戶界面設(shè)計與研究》

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

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

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

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

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

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

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

結(jié)語

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

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

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