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

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

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

說(shuō)了這么多，我們開(kāi)始今天的主題吧！

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

通過(guò)可視的表達(dá)來(lái)增強(qiáng)用戶處理數(shù)據(jù)的效率。

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

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

    · 從零到一設(shè)計(jì)驅(qū)動(dòng)

    · 設(shè)計(jì)度量

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

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

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

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

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

互聯(lián)網(wǎng)信息太多了，漫無(wú)目的的找靈感，只會(huì)浪費(fèi)時(shí)間，一會(huì)看到這張圖好看，一會(huì)看到那張圖好看。不知不覺(jué)幾個(gè)小時(shí)就過(guò)去了。

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

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

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

    · 終端：大屏、移動(dòng)端、web 等等。

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

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

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

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

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

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

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

1.6  興趣推送

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

1.7  定期清理，更新迭代

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

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

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

二、從零到一  設(shè)計(jì)驅(qū)動(dòng)

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

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

產(chǎn)品初期，經(jīng)常會(huì)有幾個(gè)爭(zhēng)議比較大的問(wèn)題，我們來(lái)聊一下。

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

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

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

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

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

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

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

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

2.3  完成和完美那個(gè)更重要？

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

聊完這三個(gè)問(wèn)題，我們?cè)谠O(shè)計(jì)的時(shí)候也要有一些注意項(xiàng)，真正的做到設(shè)計(jì)驅(qū)動(dòng)。

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

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

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

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

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

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

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

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

2.8  尊重用戶習(xí)慣

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

2.9  選用合適的圖表

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

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

三、設(shè)計(jì)度量

產(chǎn)品設(shè)計(jì)的好與壞我們需要去驗(yàn)證、去度量。我們?cè)趺慈ヲ?yàn)證可視化的好與壞呢？

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

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

    · 阿里云：UES

    · 螞蟻金服：PTECH與易用度

    · 1688：五度模型

    · 優(yōu)酷：DES

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

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

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

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

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

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

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

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

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

3.1  設(shè)計(jì)效率

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

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

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

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

在工作中，流程上能減少一步就是成功，慢慢來(lái)，萬(wàn)里長(zhǎng)征就是一步一步走出來(lái)的。

3.2  增長(zhǎng)設(shè)計(jì)

增長(zhǎng)這個(gè)詞來(lái)源于【增長(zhǎng)黑客】這本書(shū)，顧名思義這個(gè)詞的就是通過(guò)設(shè)計(jì)來(lái)促進(jìn)產(chǎn)品增長(zhǎng)。

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

但是雖說(shuō)影響因素多、見(jiàn)效慢，我們還是可以抓住機(jī)會(huì)、多去嘗試一些方法來(lái)做到設(shè)計(jì)增長(zhǎng)。我這個(gè)方法不行，我就換一種嘗試。大家都是在摸索中過(guò)河~

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

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

3.4  體驗(yàn)創(chuàng)新

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

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

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

3.5  善用工具

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

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

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

總結(jié)

最后送給大家一句話：

這時(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.b186.net )是一家專注而深入的界面設(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ù)