B端頁(yè)面設(shè)計(jì)有感

時(shí)間：2023-08-10 00:33:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-08-10 00:33:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

B端頁(yè)面設(shè)計(jì)有感：在工作中，一般圖文并茂的C端界面相對(duì)容易做得出彩，也較容易找到同類型的參考。但枯燥的B端頁(yè)面則會(huì)感覺(jué)無(wú)從下手；在最近一年的工作中接觸到很多B端的頁(yè)面設(shè)計(jì)需求， 過(guò)程中遇到過(guò)很多坑，也有些自己在視覺(jué)層面的思考和總結(jié)，所以打算寫(xiě)下來(lái)分享；


原因

頁(yè)面干巴巴的原因一般為：頁(yè)面元素幾乎都是文本信息和操作按鈕。

而這種情況又是業(yè)務(wù)性質(zhì)決定的，或者沒(méi)有交互設(shè)計(jì)介入，什么信息都要展示，塞得密密麻麻，這就導(dǎo)致了本身信息難以處理；C端界面要做得出彩很大程度要靠精致的圖標(biāo)、banner之類的圖像類表現(xiàn)；而在B端界面則沒(méi)有那么多圖像類的元素給設(shè)計(jì)師發(fā)揮，很難發(fā)揮；


B 端頁(yè)面設(shè)計(jì)思考

在多個(gè)項(xiàng)目以及多個(gè)產(chǎn)品經(jīng)理的折磨下，尤其做完一個(gè)商家后臺(tái)系統(tǒng)后，逐漸明白到設(shè)計(jì)其實(shí)與cooking 類似，我們不可能做到每道菜都色、香、味俱全，不同口味不同目標(biāo)做出來(lái)的菜也不一樣；B端頁(yè)面就類似健身餐，功能優(yōu)先，味道其次； 我們不能為了好吃而在健身餐里面加各種糖份、醬料，這是違背初衷的；但我們可以在可用的食材里面在做不同的搭配，做到味道層次、色彩豐富；

扯遠(yuǎn)了……回到界面設(shè)計(jì)，B端的界面設(shè)計(jì)同樣都是要以功能優(yōu)先，滿足信息層級(jí)的表達(dá)之后才到界面好看這個(gè)次要的需求，功能>美觀；不過(guò)我在很久后才明白，這兩者其實(shí)不沖突的，也不是前后關(guān)系；其實(shí)處理信息層級(jí)和美化界面是可以同步思考的，只需要確保功能>美觀的優(yōu)先級(jí)（不要為了好看而弱化功能），但設(shè)計(jì)步驟不需要分開(kāi)；


OK，下面說(shuō)在一些具體的設(shè)計(jì)方法


交互層面

如果沒(méi)有專業(yè)的交互設(shè)計(jì)介入，那么請(qǐng)了解好需求背景以及頁(yè)面邏輯。因?yàn)楫a(chǎn)品經(jīng)理不是全能的，他們?cè)诋?huà)原型圖的時(shí)候更多的是思考業(yè)務(wù)邏輯，很容易忽略界面交互不合理的地方，例如密密麻麻的信息、不合理的分組、甚至相互沖突的操作……

了解頁(yè)面邏輯會(huì)讓你了解每個(gè)界面元素存在的理由，以及它們之間的關(guān)系；在了解的前提下，對(duì)界面的設(shè)計(jì)自然就會(huì)更加的從容，而不僅僅是給原型圖上個(gè)色；

例如步驟非常繁瑣的頁(yè)面，我們可以嘗試在交互邏輯上做減法，將多個(gè)操作按照先后順序分解到不同的頁(yè)面處理。

信息密密麻麻的頁(yè)面就將信息層級(jí)梳理清楚，根據(jù)優(yōu)先級(jí)將信息做重要次要展示，折疊，二級(jí)頁(yè)面或刪除。




視覺(jué)層面

• 提煉圖像元素

一般有兩種，圖標(biāo)與輔助畫(huà)面；當(dāng)然增加圖像類的前提是功能優(yōu)先，不要為了美觀而顛倒優(yōu)先級(jí)；

適當(dāng)?shù)靥砑訄D標(biāo)會(huì)達(dá)到很好的視覺(jué)引導(dǎo)效果，以及點(diǎn)綴畫(huà)面的作用；比如多個(gè)不同的信息分組里面，圖標(biāo)會(huì)起到視覺(jué)引導(dǎo)的作用，讓用戶很清晰地知道信息的分組，以及降低閱讀文字的疲倦感；

輔助畫(huà)面是指添加一些具象的畫(huà)面，來(lái)幫助用戶快速理解當(dāng)前頁(yè)面的功能；例如一大段描述類的文本，在開(kāi)頭添加一個(gè)具體的輔助畫(huà)面會(huì)讓畫(huà)面更加的美觀以及也能讓迅速了解當(dāng)前頁(yè)；

在平面設(shè)計(jì)里面有個(gè)概念叫做“圖版率”，當(dāng)頁(yè)面全都是文本的時(shí)候，圖版率為0%，反之100%； 如果圖版率為0，那么頁(yè)面閱讀是非常疲倦的，在這個(gè)時(shí)代已經(jīng)很少有人能夠拿起一本全是字的書(shū)來(lái)看了，何況B端頁(yè)面相當(dāng)于功能書(shū)…… 所以在保證功能優(yōu)先的前提適當(dāng)增加圖像元素吧。

• 增加畫(huà)面層級(jí)

在不適合增加圖像元素的情況下，可以考慮增加文本的層級(jí)，以及用卡片劃分信息的分組；在某種程度上，這有點(diǎn)抽象圖像化的概念（大字號(hào)、卡片都有些圖像化）；

根據(jù)內(nèi)容的優(yōu)先級(jí)合理地劃分文本的大小、顏色層級(jí)可以便于理解內(nèi)容層級(jí)，也起到分組的作用，同時(shí)頁(yè)面也會(huì)更加的美觀；但文本的字號(hào)與顏色的層級(jí)都不易過(guò)多，而且要統(tǒng)一，例如可點(diǎn)擊、置灰顏色全局統(tǒng)一;

還有卡片設(shè)計(jì)是非常適合用在B端頁(yè)面，它可以起到信息分組、界面美觀的作用；但要注意一點(diǎn)是在原生界面里面盡量少加大量重復(fù)的投影，例如一個(gè)卡片列表頁(yè)面，每個(gè)卡片都有投影的話頁(yè)面可能會(huì)出現(xiàn)卡頓情況，最好是靠顏色區(qū)分上下層級(jí)，像淘寶的個(gè)人頁(yè)面；

還有一個(gè)劃分頁(yè)面層級(jí)的方法是顏色區(qū)分，例如頁(yè)面頭部一般可以用顏色作為背景加上大標(biāo)題，這樣可以達(dá)到頁(yè)面層級(jí)劃分的目的，同樣也有些抽象圖像化，間接增加了圖版率；

• 關(guān)注視覺(jué)細(xì)節(jié)

UI與視覺(jué)有一個(gè)大區(qū)別在于：動(dòng)態(tài)與靜態(tài)；

我們?cè)谠O(shè)計(jì)海報(bào)時(shí)候更像畫(huà)畫(huà)，靜態(tài)、整體地處理整個(gè)視覺(jué)效果；但 UI 則會(huì)關(guān)注信息的優(yōu)先級(jí)，按鈕、文本不同的狀態(tài)樣式等，動(dòng)態(tài)地考慮頁(yè)面元素。以至于很容易過(guò)于關(guān)注功能層面的而忽略視覺(jué)效果；或許我們也應(yīng)該在滿足交互以及信息層級(jí)的情況下，要靜態(tài)看待頁(yè)面有哪些視覺(jué)層面的不足；

而往往我們只能在現(xiàn)有的元素上做細(xì)微調(diào)整（尤其是缺乏圖像類元素時(shí)），所以細(xì)節(jié)就尤為重要；在扁平化成為主流的今天，很多時(shí)候我們會(huì)盡量少用投影、描邊等元素，一起從簡(jiǎn)；但這些在B端頁(yè)面其實(shí)蠻重要的，這些細(xì)節(jié)可以輕易做到信息分組而又不干擾功能，不要為了簡(jiǎn)潔而簡(jiǎn)潔；




PS. 此文更多的是視覺(jué)層面的思考，非宏觀層面的B端設(shè)計(jì)，再高的設(shè)計(jì)層面應(yīng)該關(guān)注設(shè)計(jì)組件化以及驅(qū)動(dòng)業(yè)務(wù)，還在學(xué)習(xí)中，希望之后有所輸出；


End，感謝閱讀；