拆解B端產(chǎn)品總結(jié)界面框架設(shè)計(jì)的3原則

1、拆解B端產(chǎn)品，總結(jié)界面框架設(shè)計(jì)的3原則B端產(chǎn)品給人的感覺(jué)總是千篇一律的，基本就是圖表、表格、詳情頁(yè)，或者業(yè)務(wù)流程，實(shí)際上也大抵如此。畢竟B端產(chǎn)品主要是工具型產(chǎn)品或者管理系統(tǒng)，面向企業(yè)用戶(hù)，解決用戶(hù)的實(shí)際需求，很少去引導(dǎo)用戶(hù)產(chǎn)生需求。在這種背景下，產(chǎn)品的性能、功能、用戶(hù)效率就成了第一位的。必要時(shí)，甚至?xí)奚欢ǖ挠脩?hù)體驗(yàn)優(yōu)先保證產(chǎn)品功能。所以B端產(chǎn)品系統(tǒng)界面不能為了“看起來(lái)新穎”而不同，更要注重用戶(hù)用起來(lái)的體驗(yàn)。本文主要討論以下內(nèi)容：界面框架的3種設(shè)計(jì)模式界面框架設(shè)計(jì)的3個(gè)原則從0開(kāi)始構(gòu)建新的產(chǎn)品，首先要確定好界面框架。B端界面框架并不復(fù)雜，主要包括頂部信息欄、左側(cè)導(dǎo)航和內(nèi)容區(qū)3大部分。通過(guò)不同

2、的組合形式，界面框架就形成了3種設(shè)計(jì)模式。一、上下結(jié)構(gòu)這種頁(yè)面結(jié)構(gòu)將頁(yè)面劃分為頂部導(dǎo)航和內(nèi)容區(qū)上下兩層。常見(jiàn)于一些企業(yè)官網(wǎng)、信息資訊網(wǎng)站中，更偏向于信息展示。例如阿里云官網(wǎng)、新浪、知乎等信息網(wǎng)站。一般包含系統(tǒng)logo、功能菜單、輔助功能、個(gè)人中心等。功能菜單通常按照業(yè)務(wù)板塊進(jìn)行設(shè)置，并且會(huì)限制菜單數(shù)量，一般為4-6個(gè)左右。根據(jù)業(yè)務(wù)需要，功能菜單也可以進(jìn)行級(jí)聯(lián)擴(kuò)展，允許出現(xiàn)2級(jí)甚至3級(jí)菜單。方便用戶(hù)更深層地了解系統(tǒng)功能，同時(shí)提高用戶(hù)的操作效率，實(shí)現(xiàn)深層頁(yè)面的快速直達(dá)。我個(gè)人認(rèn)為，頂部導(dǎo)航的優(yōu)勢(shì)并不是不占用頁(yè)面橫向空間。因?yàn)樾畔⒄故绢?lèi)的網(wǎng)站對(duì)橫向空間要求并不高，有些網(wǎng)站為了避免用戶(hù)視覺(jué)橫向跨度過(guò)大

3、，采用的是版心定寬設(shè)計(jì)。企業(yè)官網(wǎng)產(chǎn)品則采用響應(yīng)式布局，讓界面可以適應(yīng)不同的屏幕寬度。頂部導(dǎo)航的優(yōu)勢(shì)在于面積小，對(duì)頁(yè)面的分割比較弱，不會(huì)對(duì)內(nèi)容產(chǎn)生太大的影響。另外橫向排布更符合用戶(hù)的視覺(jué)習(xí)慣。在展示形式上，頂部導(dǎo)航更加靈活，可以將菜單形成獨(dú)立的信息空間。例如百度官網(wǎng)的頂部導(dǎo)航，與Banner形成強(qiáng)烈對(duì)比，內(nèi)容清晰可見(jiàn)。頂部導(dǎo)航也可以與頁(yè)面內(nèi)容融為一體，減少對(duì)內(nèi)容的干擾。例如巨量引擎的官網(wǎng)中，將頂部導(dǎo)航與Banner信息混合，更加強(qiáng)調(diào)內(nèi)容信息的傳遞。在交互操作方面，頁(yè)面向下滾動(dòng)時(shí)，頂部導(dǎo)航可以自動(dòng)隱藏，從而為內(nèi)容提供更大的可視面積；頁(yè)面向上滾動(dòng)時(shí)自動(dòng)展示，方便用戶(hù)的快速切換到其他菜單。二、左右結(jié)構(gòu)

4、對(duì)于簡(jiǎn)單或者復(fù)雜的業(yè)務(wù)系統(tǒng)，頂部導(dǎo)航數(shù)量會(huì)面臨過(guò)少或者過(guò)多的問(wèn)題，于是就出現(xiàn)了左右結(jié)構(gòu)布局。面對(duì)簡(jiǎn)單的業(yè)務(wù)系統(tǒng)，左側(cè)導(dǎo)航的形式不會(huì)產(chǎn)生大量的頁(yè)面空白。例如百度網(wǎng)盤(pán)網(wǎng)頁(yè)版，Teambition都是采用的這種界面框架，將一級(jí)菜單簡(jiǎn)化，與二級(jí)菜單并列展示，視覺(jué)關(guān)聯(lián)性也更加緊密。面對(duì)復(fù)雜的業(yè)務(wù)系統(tǒng)，左側(cè)導(dǎo)航可以承載較多的菜單量，并且樹(shù)形結(jié)構(gòu)配合展開(kāi)收起面板功能，具有很好的延展性。例如有贊個(gè)人店鋪?zhàn)髠?cè)導(dǎo)航承載了10+個(gè)的業(yè)務(wù)功能。不過(guò)左側(cè)導(dǎo)航的缺陷也比較明顯，主要有以下幾個(gè)方面：尺寸空間大。為了盡可能地減少擠占內(nèi)容區(qū)信息空間，通常會(huì)增加收起功能；限制多。為了控制導(dǎo)航寬度，菜單名稱(chēng)的長(zhǎng)度需要做出限制，避免

5、出現(xiàn)無(wú)法完全展示的情況；對(duì)系統(tǒng)logo和名稱(chēng)也會(huì)有要求，不太適用于名稱(chēng)較長(zhǎng)的系統(tǒng)；操作效率不高。默認(rèn)收起的菜單項(xiàng)中，需要展開(kāi)才能操作；如果信息層級(jí)較深，逐級(jí)漸進(jìn)展開(kāi)的方式也不方便用戶(hù)操作，因此對(duì)信息層級(jí)也需要做出限制；另外用戶(hù)無(wú)法直觀地全覽所有業(yè)務(wù)功能，尤其是對(duì)于新人用戶(hù)不友好，需要逐個(gè)點(diǎn)擊才能了解系統(tǒng)功能。所以在設(shè)計(jì)時(shí)，需要針對(duì)以上問(wèn)題進(jìn)行優(yōu)化設(shè)計(jì)。以下是部分產(chǎn)品提供的解決方案：（1）單層信息+級(jí)聯(lián)信息有贊產(chǎn)品左側(cè)導(dǎo)航，沿用了頂部導(dǎo)航的交互方式。沒(méi)有采用收起展開(kāi)的方式，而是采用級(jí)聯(lián)菜單形式，懸停即可顯示，從而方便用戶(hù)快速切換。（2）默認(rèn)全展開(kāi)菜單功能默認(rèn)全展開(kāi)，減少用戶(hù)的操作。在微信公眾號(hào)、

6、阿里云、知乎創(chuàng)作中心等平臺(tái)中，左側(cè)導(dǎo)航都是默認(rèn)展開(kāi)的，用戶(hù)不需要逐級(jí)展開(kāi)，便于用戶(hù)快速切換菜單。在后續(xù)的使用過(guò)程中，用戶(hù)根據(jù)的自己的需要，手動(dòng)收起不常用的功能就可以了。（3）雙列布局對(duì)于功能繁雜的系統(tǒng)，默認(rèn)全展開(kāi)的方式，會(huì)導(dǎo)致導(dǎo)航區(qū)過(guò)長(zhǎng)，用戶(hù)查看起來(lái)不方便。因此需要增加菜單的信息密度，減少導(dǎo)航的整體長(zhǎng)度。例如拼多多商家后臺(tái)采用雙列布局的形式，當(dāng)然這種場(chǎng)景下，會(huì)增加左側(cè)導(dǎo)航寬度，擠占內(nèi)容區(qū)的空間。（4）查看全部在門(mén)戶(hù)網(wǎng)站中，信息分類(lèi)非常多，普通用戶(hù)通常只會(huì)用到高頻信息。為了讓用戶(hù)能夠全覽網(wǎng)站所有的信息門(mén)類(lèi)，網(wǎng)站還提供了網(wǎng)站導(dǎo)航功能。在B端產(chǎn)品中，也需要考慮如何讓用戶(hù)了解平臺(tái)的全部功能清單。例如釘

7、釘管理后臺(tái)在左側(cè)導(dǎo)航底部增加了查看全部功能，展開(kāi)后用戶(hù)就可以看到全部的功能菜單。在形式感上，左右結(jié)構(gòu)的布局會(huì)對(duì)系統(tǒng)logo 和名稱(chēng)進(jìn)行壓縮，我個(gè)人認(rèn)為整體風(fēng)格不如上下結(jié)構(gòu)正式，對(duì)品牌形象表現(xiàn)力不足。因此該結(jié)構(gòu)主要用于一些工具產(chǎn)品或者輕量型的系統(tǒng)，在大型的業(yè)務(wù)平臺(tái)或者G端的項(xiàng)目應(yīng)用較少。通過(guò)上面的案例，我們可以看到B端產(chǎn)品基本上是以混合布局的模式構(gòu)建界面框架。三、混合布局在B端產(chǎn)品中，混合布局既有貫穿的頂部區(qū)域，可以承載導(dǎo)航菜單和產(chǎn)品框架信息，又在內(nèi)容區(qū)增加左側(cè)導(dǎo)航，提升導(dǎo)航信息承載量，更好地滿(mǎn)足業(yè)務(wù)功能需要。例如巨量縱橫產(chǎn)品中，采用了頂部導(dǎo)航和左側(cè)導(dǎo)航相結(jié)合的方式，將產(chǎn)品劃分為幾個(gè)獨(dú)立的業(yè)務(wù)單

8、元，用戶(hù)可以根據(jù)自己的工作目標(biāo)去選擇對(duì)應(yīng)的功能。同時(shí)也減少了左側(cè)導(dǎo)航的信息承載量和層級(jí)，方便用戶(hù)操作。如果系統(tǒng)功能極其復(fù)雜，傳統(tǒng)的頂部導(dǎo)航+左側(cè)導(dǎo)航的模式已經(jīng)無(wú)法滿(mǎn)足產(chǎn)品需求。例如云類(lèi)產(chǎn)品都是大型的業(yè)務(wù)平臺(tái)，包含幾十項(xiàng)業(yè)務(wù)功能，于是構(gòu)建了產(chǎn)品與服務(wù)的中心模式，集中全量展示所有業(yè)務(wù)功能，方便用戶(hù)瀏覽查看。在一定程度上也增加了用戶(hù)探索更多功能的欲望。在這種模式下，每個(gè)獨(dú)立的產(chǎn)品或服務(wù)則形成了子系統(tǒng)空間，采用統(tǒng)一的混合布局方式，讓原本復(fù)雜的業(yè)務(wù)系統(tǒng)變得簡(jiǎn)單。另外還有一個(gè)小細(xì)節(jié)。左側(cè)導(dǎo)航菜單帶給用戶(hù)的心理暗示是切換，用來(lái)控制右側(cè)內(nèi)容區(qū)信息。當(dāng)我們?cè)谧髠?cè)導(dǎo)航中嵌入其他系統(tǒng)功能時(shí)，如果是跳轉(zhuǎn)的操作方式，需要增加指示圖標(biāo)，如下圖所示。四、總結(jié)以上就是關(guān)于B端產(chǎn)品界面框架的內(nèi)容，我們可以得到3個(gè)設(shè)計(jì)原則：符合產(chǎn)品的定位和業(yè)務(wù)需要。產(chǎn)品界面框架要能夠承載產(chǎn)品的整個(gè)業(yè)務(wù)體系，并且具備足夠的延展性，需要考慮到產(chǎn)品未來(lái)升級(jí)和發(fā)