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

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

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

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

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

通過可視的表達來增強用戶處理數據的效率。

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

    · 靈感需要迸發，更需要積累

    · 從零到一設計驅動

    · 設計度量

一、靈感需要迸發，更需要積累

1.1  數字時代下，99%的問題都是舊問題

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

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

1.2  明確目標，知道自己想要找什么

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

1.3  建立關鍵詞詞庫

確定目標后，就要細化關鍵詞了。怎么建立關鍵詞詞庫呢？

關鍵詞詞庫由3部分組成：終端、設計類型、業務類型。

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

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

    · 業務類型：智慧城市、生物醫療、監控部署等等。

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

1.4  除了常用的設計網站，還有哪里可以看？

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

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

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

1.6  興趣推送

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

1.7  定期清理，更新迭代

最后一點，這個也是好多設計師的通病，收藏即學到。

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

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

二、從零到一  設計驅動

講完第一部分，我們開始搭建產品。

我負責從零到一的項目大大小小的得有10來個了，我認為在產品整個產品周期中設計師的話語權最高的時候就是項目初期，是可以做到設計驅動的。既然設計可以有足夠的的話語權，你就得規劃好未來的設計走向。

產品初期，經常會有幾個爭議比較大的問題，我們來聊一下。

2.1  設計先行還是調研先行？

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

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

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

2.2  設計先行還是規范先行？

這個問題在現在看來相對比較統一，但有的同學還是有疑惑，所以我拿出來再跟大家聊一下。

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

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

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

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

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

2.4  把復雜變得清晰簡單而且美

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

2.5  轉換視角，建立共鳴

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

2.6  產品架構可以不那么復雜

把復雜的業務/功能簡單化、傻瓜化，最大的降低學習成本，能幫用戶操作的絕不讓用戶親自去操作。你要讓用戶在1分鐘之內了解你的產品是做什么的、有什么功能，你就成功了。

2.7  大膽隱藏冗余內容

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

2.8  尊重用戶習慣

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

2.9  選用合適的圖表

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

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

三、設計度量

產品設計的好與壞我們需要去驗證、去度量。我們怎么去驗證可視化的好與壞呢？

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

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

    · 阿里云：UES

    · 螞蟻金服：PTECH與易用度

    · 1688：五度模型

    · 優酷：DES

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

    · 易用性：易操作性、易學性、易見性 ...

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

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

    · 性能：首屏渲染時間、API 請求響應時間、頁面請求響應時間 ...

    · 滿意度：產品滿意度 ...

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

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

上面是度量產品的模型，接下來針對我們 B 端設計師，我們也要有一些指標來度量自己是否合格。

3.1  設計效率

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

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

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

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

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

3.2  增長設計

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

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

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

3.3  為業務賦能

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

3.4  體驗創新

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

現在到了互聯網下半場，拼的不僅是功能，用戶體驗的重視程度已經被提升了上來，在工作中的占比也越來越重。

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

3.5  善用工具

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

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

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

總結

最后送給大家一句話：

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

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

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

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

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

    你：好嘞~（叮叮當當咚咚當當）

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

    你：給您改（叮叮當當咚咚當當）

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

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

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

FUI：

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

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

1.商務科技風：

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

     應用：

    車載UI；金融UI;各種科技工具類產品的登錄注冊或官網Banner；商務海報等

    特征：

    1.商務科技配色較為嚴肅，低調。背景以深藍色，深灰色背景居多。

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

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

(偏商務科技風格例子-圖片來源于網絡）

2.扁平科技風：

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

    非常適合多數據后臺數據展示，強調信息數據的清晰展示，較多使用純色面元素作為底板，減少了環境的背景外擾因素。且數據分組展示，功能分區明顯。

    設計成本及實現成本較低，為目前大多數數據可視化大屏展示所選擇。

(偏扁平科技風格例-圖片來源于網絡）

3.HUD（儀表盤）科技風：

    視覺多使用單色，點線元素。可以與現實背景結合度高。

    應用：

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

    特征：

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

    2.簡潔而不簡單，層次豐富，典型風格HUD?？臻g層次感豐富，使用半透的結構線3D模型或晶格模型，顯得輕        巧而精致，用戶能夠透過信息層看到場景層，

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

    ps:

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

(偏極簡科技風格例-圖片來源于網絡）

4.賽博炫酷科技風：

    賽博朋克又稱數字朋克、網絡朋克。

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

    特征：

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

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

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

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

（偏賽博科技風格例-圖片來源于網絡）

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

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

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

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

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

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

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

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

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

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

“今天吃什么啊？”

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

“一會去看什么電影？”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.平臺權威性—用戶側

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

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

2.平臺權威性—平臺側

• 影響用戶的決策方向

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

• 平臺自帶話題性

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

• 輸出口優化

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

• 平臺盈利

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

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

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

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

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

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

排行榜資源的建立

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

• 同系同門資源導流

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

• 自建用戶體系

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

• 偽造

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

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

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

1.頁面tab

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

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

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

2.圖標入口

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

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

3.商品詳情頁榜單入口

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

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

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

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

1.編輯推薦/小編推薦

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

2.猜你喜歡/相關推薦

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

3.年度總結排行榜

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

4.TOP排行榜

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

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

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

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

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

1.唯一性榜單頭部

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

2.可復用性榜單頭部

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

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

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

1.純文字形式

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

2.圖文結合形式

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

• 圖片形式

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

• 左文右圖VS左圖右文

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

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

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

3.橫排+列表表現形式

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

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

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

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

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

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

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

如何選擇合適的B端設計風格？

1.B端后臺分類：

根據服務對象劃分：

一類支持有C端前臺，支持前臺產品管理各種資源。第二類服務企業，提高企業工作效率和營收。

根據后臺功能：

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

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

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

4.系統配置：權限配置、設備功能配置，操作為主。

2.后臺深淺兩大風格分類：

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

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

3.作者常向產品方提供的風格參考

較常見

1. 經典商務風（導航深、內容淺）——專業、高效、成熟、可信賴（對照深色西裝人物形象）

   優點：市面最常見的風格，普世性高，大多數用戶可快速接受，層次分明

   缺點：視覺缺乏記憶點

 2.輕量科技感（導航淺、內容淺）——簡潔、明快、輕量、年輕（對照白襯衫打領帶男性）

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

      缺點：純白色導航+頁面層次略曖昧。

 3.藍色科技風（導航中、內容中）

      適合：適合科技屬性強的產品界面，圖像圖形展示

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

 4.暗黑科技風（導航深、內容深）

      優點：對色彩表現力強

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

4.精準選擇風格時可以進一步的考慮：

1.整體行業風格

比如美妝和科技行業的整體設計基調就不太相同。

2.產品想要傳達的氣質：

理性可靠 or  簡潔輕松輕量 or 關懷普世 or 酷炫吸睛….這個可以和相關產品經理、銷售共同商討

3.目標用戶的群體特點及喜好。

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

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

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

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

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

5.判斷獨立的平臺是否為獨立開發

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

5.如何讓后臺設計更具特色：

1. 
   

   重點色的使用

   
   

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

2.圖標的優化

后臺高頻出現的圖標，值得我們花時間去統一設計打磨，調整圓角粗細疏密，符合整體界面氣質。從圖標庫里拖出的圖標很多在線條粗細上是不統一的，好的設計在細節處也要動人。

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

3.空狀態小插畫

空狀態插畫是B端設計師少有能發揮自己繪畫天賦小巧思的地方。

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

4.登錄注冊頁

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

插畫背景：場景化展示產品的功能及亮點，讓用戶更有心理預期

幾何圖形背景：最后和品牌圖形相關，加深用戶對產品的品牌印象。

照片背景：相關場景或產品類型，具象圖片信息更直觀

5.圓角的大小

不同大小的圓角傳達產品不同的氣質，大圓角親和、小圓角精致、中等圓角大眾中庸。

6.優化信息層級

優化信息層級，區分信息主次可以使閱讀更快，操作更快，界面更有節奏感。

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

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

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

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

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

   
   

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

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

4.新人建議多看Antdesign和Element等成熟的組件，創新類組件樣式，最好和和開發商量是否能夠實現。

5.在確定主要風格及2-5張主要頁面后，就應該著手基礎規范（色彩字體等，不然后面越做越亂）。

6.一段時間一個審美，同一界面中的元素風格不統一。

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

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

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

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

前言：

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

那么，汽車公司如何設計虛擬語音助手，才能創造更安全、更高效、更有回報的駕駛體驗呢?

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

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

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

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

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

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

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

呆萌的機器人Cozmo

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

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

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

總結：虛擬語音助手的形象要降低用戶的恐懼感，適當的為用戶增加優越感。

2.不要越界

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

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

 經營失敗而倒閉的機器人JIBO

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

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

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

總結：要使虛擬語音助手成為功能清晰的服務生態系統的一部分，滿足用戶的基本需求。

3.展現它作為助手功能性的一面。

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

恐怖谷理論

令人恐懼的設計                                                                   看完就喊媽媽的動畫

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

機器人再說話時會說：請，你好等禮貌用語，這樣父母在使用語音助手的同時，不會擔心孩子學到一些粗魯的用語

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

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

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

4.扮演它該有的角色

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

代替動物為老人治療的Paro

正在充電的Paro

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

寵物機器人Lovot

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

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

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

5.讓互動更有價值

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

總結：培養感情紐帶，讓用戶與虛擬語音助手建立長期關系，讓用戶對合作機器人更加滿意。

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

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

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

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

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

1.奧迪AI trail 

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

奧迪 AI trail外觀

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

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

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

無人機搭載照明燈

充當照明設備的無人機

2.雷諾EZ-Go 

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

在城市穿梭的ES-Go

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

汽車內飾

方便進出的設計

3.terrafugia tf-x

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

電影《第五元素》

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

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

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

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

正在倒車的Terrafugia TF-X

飛行中的Terrafugia TF-X

4.雪鐵龍19_19

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

雪鐵龍19-19外觀

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

自動駕駛模式，信息在擋風玻璃上顯示

5.輛豐田LQ

豐田LQ的設計原則是，讓司機和他們的車輛之間有更加緊密的聯系。所以通過加入最先進的先進的AI，稱為Yuyi，將人工智能打造成你在車內最好的朋友之一。 

會眨眼睛的LQ

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

AI根據用戶心情播放相關音樂

正在自動駕駛的LQ

6.梅塞德斯-奔馳Vision AVTR

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

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

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

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

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

AVTR外觀

可以依據氣流和感應翻轉的仿生襟翼

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

AVTR內飾                                                             顯示在手掌上的虛擬按鍵

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

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

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

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

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

什么是查詢列表？

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

簡介：

查詢列表可以查看和處理大量的條目數據，常有導航至詳情的作用，

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

設計目標：

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

設計原則：

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

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

常規布局順序：

數據過濾 + 數據統計 + 數據列表 + 批量操作

模板頁面示例：

現在有了官方解答指導，我們就先從分析模仿開始

查詢列表有什么？

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

一、數據過濾：

常規的數據過濾分為兩種類型：

1、條件篩選：

特點【結構化+有限范圍】，篩選需求和數據都是結構化的，

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

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

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

形式：區域堆疊、表頭、彈窗；

2、搜索查詢：

特點【非結構化+模糊/精準匹配】，搜索的需求是非結構化的，

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

組件：基礎搜索框、高級搜索框；

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

關于具體使用，搜索不用多說，遵循系統統一性原則，選擇一處固定位置就好，

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

二、數據統計：

數據統計一般作為查詢列表的重要配角出現，方便用戶直觀了解到當前頁面的統計信息。

就是列表數據提煉出來統計信息，數據名稱+數值，左右、上下布局都可，

有一點強調一下，業務的數據統計要求和條件篩選聯動變化，就要放在條件篩選下方，

如果統計數值是固定值，就放置條件篩選上方。

三、數據列表：

這里的列表主要陳述標準的【表格Table】形式，

表格被公認為是展現數據最為清晰、高效的形式之一。

它常和排序、搜索、篩選、分頁等其他元素一起協同，適用于信息的收集和展示，以及操作結構化數據，

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

常規內容構成：

Header：標題、篩選（高頻）、操作按鈕、表搜索、icon（列設置、刷新、全屏）

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

Table-Content：數據內容、按鈕

Footer：多選數量，分頁器

四、批量處理：

批量操作是作用于整個頁面的操作，故放置與頁面最底部，當然這個可以根據應用場景調整位置，

常見操作有【批量刪除】【批量禁用】【批量導出】。

如何設計查詢列表？

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

下圖就是依據Ant Design設計出的第一版查詢列表模板

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

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

1、是不是進門應該是客廳，是不是應該大一點好接待客人；

2、書房是不是應該遠離，減少噪音；

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

4、等等···

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

怎么獲取你想要的答案？調研和競品分析。

調研可以向產品、銷售、交付人員獲取你想要的信息，

競品分析可以找同類型產品進行優劣分析，取其精華。

下面列舉調研和競品分析的幾個點說明下：

調研一

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

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

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

調研二

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

答：查詢查看沒問題，就是一屏數據內容展示的太少，標題欄、篩選和數據統計占了太多高度，而且篩選也不常用，導出按鈕在底部不明顯，橫向滑動很難用，看錯行。

機會點：優化布局，篩選考慮折疊或者表頭篩選，橫向數據堆積能否換行展示，導出操作是否可以放在上方？

競品分析：紛享銷客CRM

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

競品分析：廣聯達

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

總結一下：

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

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

1、取消面包屑（系統深度較淺），優化（減少）標題欄高度；

2、增加數據統計，區域板塊使用分割線劃分，減少割裂感；

3、頁面操作按鈕集合放置在右上角，主按鈕統一在最右側；

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

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

6、列鎖定（鎖子icon）可以快速自定義設置優先左側固定；

7、Table內容根據業務內容屬性合并上下組合展示，節省橫向面積（寧可上下滑動，也不要橫向滑動，至少減少橫向滑動的距離）；

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

經過和產品經理溝通，此次優化思路和方向也很準確，獲得了肯定，后續的迭代還需持續進行。

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

Ending

這次的分享是自己在探索B端道路上的小經歷，同時也體會到一些更深層次的東西，比如設計的意義在哪，什么是好的設計，怎么才能做出“好”的產品，在此分享給各位，希望能給大家帶來些思維上的變化，共同進步。

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

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

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

背景

在 B 端設計領域中，不管是內部用戶、產品、設計師、開發，還是外部產品、設計師等，總能聽到關于界面「屏效」方面的訴求或吐槽。

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

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

探索階段-為誰在何時何地設計

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

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

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

通過了解不同用戶和產品類型發現，不同的用戶在工作場景的產品使用中有著相似的特征：

案例收集｜發現問題，大膽假設

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

視覺、交互層在無需理解業務場景和用戶目標的情況下，都較容易發現，屬基礎問題，但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。

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

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

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

競品分析｜尋找實踐證據，謹慎驗證

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

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

直接競對：內部用戶口碑較好的產品 A、B外界競對：同領域的 Tableau、網易有數、金山、微軟表格；間接競對：谷歌郵箱、AntD 等的緊湊主題的常規列表（一維表格）

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

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

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

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

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

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

論文查閱｜尋找理論證據，謹慎驗證

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

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

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

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

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

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

實踐階段-如何設計

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

基于以上的總結，對產品進行優化。下面以一個簡單案例進行設計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度（白領-有信用卡）下的人數差異，尋找運營機會點。

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

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

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

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

如圖，縮小表格行高的同時，目標信息之間的眼動距離隨之縮短，在眼動舒適區內看到更多信息，便于信息的高效獲取。

交互層｜低跳轉-高頻信息前置

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

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

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

理論基礎：交互設計四大策略「組織、刪除、隱藏、轉移」參考資料：《簡約至上》

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

結語

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

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

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