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

1.B端后臺(tái)分類(lèi)：

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

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

根據(jù)后臺(tái)功能：

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

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

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

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

2.后臺(tái)深淺兩大風(fēng)格分類(lèi)：

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

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

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

較常見(jiàn)

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

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

   缺點(diǎn)：視覺(jué)缺乏記憶點(diǎn)

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

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

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

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

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

      缺點(diǎn)：對(duì)其他色彩信息有干擾，持續(xù)性長(zhǎng)時(shí)間觀看易視覺(jué)疲勞

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

      優(yōu)點(diǎn)：對(duì)色彩表現(xiàn)力強(qiáng)

      缺點(diǎn)：密集文本信息獲取速度會(huì)下降，持續(xù)性長(zhǎng)時(shí)間觀看易視覺(jué)疲勞

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

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

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

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

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

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

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

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

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

4.使用場(chǎng)景及高頻的操作。

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

5.判斷獨(dú)立的平臺(tái)是否為獨(dú)立開(kāi)發(fā)

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

5.如何讓后臺(tái)設(shè)計(jì)更具特色：

1. 
   

   重點(diǎn)色的使用

   
   

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

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

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

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

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

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

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

4.登錄注冊(cè)頁(yè)

純色背景卡片式：簡(jiǎn)單大方更聚焦登錄操作

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

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

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

5.圓角的大小

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

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

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

這時(shí)候你就是那個(gè)考前畫(huà)重點(diǎn)的老師

判斷一個(gè)頁(yè)面里最重要的是那些信息或操作，強(qiáng)化它！并弱化輔助信息；

判斷一個(gè)模塊里那些是重要信息，強(qiáng)化它！

6.新人需要避免的雷點(diǎn)：

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

   
   

2.反常規(guī)用戶(hù)習(xí)慣的操作。尊重用戶(hù)習(xí)慣，不要為了個(gè)性化去嘗試改變，不要妄圖改變用戶(hù)的操作和認(rèn)知的慣性。慣性思維大于設(shè)計(jì)思維，曾經(jīng)遇到過(guò)產(chǎn)品因?yàn)橛沂植僮魉砸褜?dǎo)航放在右邊的離譜例子。

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

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(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ì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)