成人黃色A片免费看三更小说,精品人妻av区波多野结衣,亚洲第一极品精品无码,欧美综合区自拍亚洲综合,久久99青青精品免费观看,中文字幕在线中字日韩 ,亚洲国产精品18久久久久久,黄色在线免费观看

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

2022-8-17 seo達(dá)人

一、上下結(jié)構(gòu)

這種頁面結(jié)構(gòu)將頁面劃分為「頂部導(dǎo)航」和「內(nèi)容區(qū)」上下兩層。常見于一些企業(yè)官網(wǎng)、信息資訊網(wǎng)站中，更偏向于信息展示。例如阿里云官網(wǎng)、新浪、知乎等信息網(wǎng)站。

一般包含系統(tǒng)logo、功能菜單、輔助功能、個(gè)人中心等。功能菜單通常按照業(yè)務(wù)板塊進(jìn)行設(shè)置，并且會限制菜單數(shù)量，一般為4-6個(gè)左右。

根據(jù)業(yè)務(wù)需要，功能菜單也可以進(jìn)行級聯(lián)擴(kuò)展，允許出現(xiàn)2級甚至3級菜單。方便用戶更深層地了解系統(tǒng)功能，同時(shí)提高用戶的操作效率，實(shí)現(xiàn)深層頁面的快速直達(dá)。

我個(gè)人認(rèn)為，頂部導(dǎo)航的優(yōu)勢并不是不占用頁面橫向空間。因?yàn)樾畔⒄故绢惖木W(wǎng)站對橫向空間要求并不高，有些網(wǎng)站為了避免用戶視覺橫向跨度過大，采用的是版心定寬設(shè)計(jì)。企業(yè)官網(wǎng)產(chǎn)品則采用響應(yīng)式布局，讓界面可以適應(yīng)不同的屏幕寬度。

頂部導(dǎo)航的優(yōu)勢在于面積小，對頁面的分割比較弱，不會對內(nèi)容產(chǎn)生太大的影響。另外橫向排布更符合用戶的視覺習(xí)慣。

在展示形式上，頂部導(dǎo)航更加靈活，可以將菜單形成獨(dú)立的信息空間。例如百度官網(wǎng)的頂部導(dǎo)航，與Banner形成強(qiáng)烈對比，內(nèi)容清晰可見。

頂部導(dǎo)航也可以與頁面內(nèi)容融為一體，減少對內(nèi)容的干擾。例如巨量引擎的官網(wǎng)中，將頂部導(dǎo)航與Banner信息混合，更加強(qiáng)調(diào)內(nèi)容信息的傳遞。

在交互操作方面，頁面向下滾動時(shí)，頂部導(dǎo)航可以自動隱藏，從而為內(nèi)容提供更大的可視面積；頁面向上滾動時(shí)自動展示，方便用戶的快速切換到其他菜單。

二、左右結(jié)構(gòu)

對于簡單或者復(fù)雜的業(yè)務(wù)系統(tǒng)，頂部導(dǎo)航數(shù)量會面臨過少或者過多的問題，于是就出現(xiàn)了左右結(jié)構(gòu)布局。

面對簡單的業(yè)務(wù)系統(tǒng)，左側(cè)導(dǎo)航的形式不會產(chǎn)生大量的頁面空白。例如百度網(wǎng)盤網(wǎng)頁版，Teambition都是采用的這種界面框架，將一級菜單簡化，與二級菜單并列展示，視覺關(guān)聯(lián)性也更加緊密。

面對復(fù)雜的業(yè)務(wù)系統(tǒng)，左側(cè)導(dǎo)航可以承載較多的菜單量，并且樹形結(jié)構(gòu)配合展開收起面板功能，具有很好的延展性。例如有贊個(gè)人店鋪?zhàn)髠?cè)導(dǎo)航承載了10+個(gè)的業(yè)務(wù)功能。

不過左側(cè)導(dǎo)航的缺陷也比較明顯，主要有以下幾個(gè)方面：

尺寸空間大

為了盡可能地減少擠占內(nèi)容區(qū)信息空間，通常會增加「收起」功能；

限制多

為了控制導(dǎo)航寬度，菜單名稱的長度需要做出限制，避免出現(xiàn)無法完全展示的情況；對系統(tǒng)logo和名稱也會有要求，不太適用于名稱較長的系統(tǒng)；

操作效率不高

默認(rèn)收起的菜單項(xiàng)中，需要展開才能操作；如果信息層級較深，逐級漸進(jìn)展開的方式也不方便用戶操作，因此對信息層級也需要做出限制；另外用戶無法直觀地全覽所有業(yè)務(wù)功能，尤其是對于新人用戶不友好，需要逐個(gè)點(diǎn)擊才能了解系統(tǒng)功能；

所以在設(shè)計(jì)時(shí)，需要針對以上問題進(jìn)行優(yōu)化設(shè)計(jì)。以下是部分產(chǎn)品提供的解決方案：

1）單層信息+級聯(lián)信息

有贊產(chǎn)品左側(cè)導(dǎo)航，沿用了頂部導(dǎo)航的交互方式。沒有采用收起展開的方式，而是采用級聯(lián)菜單形式，懸停即可顯示，從而方便用戶快速切換。

2）默認(rèn)全展開

菜單功能默認(rèn)全展開，減少用戶的操作。在微信公眾號、阿里云、知乎創(chuàng)作中心等平臺中，左側(cè)導(dǎo)航都是默認(rèn)展開的，用戶不需要逐級展開，便于用戶快速切換菜單。在后續(xù)的使用過程中，用戶根據(jù)的自己的需要，手動收起不常用的功能就可以了。

3）雙列布局

對于功能繁雜的系統(tǒng)，默認(rèn)全展開的方式，會導(dǎo)致導(dǎo)航區(qū)過長，用戶查看起來不方便。因此需要增加菜單的信息密度，減少導(dǎo)航的整體長度。例如拼多多商家后臺采用雙列布局的形式，當(dāng)然這種場景下，會增加左側(cè)導(dǎo)航寬度，擠占內(nèi)容區(qū)的空間。

4）查看全部

在門戶網(wǎng)站中，信息分類非常多，普通用戶通常只會用到高頻信息。為了讓用戶能夠全覽網(wǎng)站所有的信息門類，網(wǎng)站還提供了「網(wǎng)站導(dǎo)航」功能。

在B端產(chǎn)品中，也需要考慮如何讓用戶了解平臺的全部功能清單。例如釘釘管理后臺在左側(cè)導(dǎo)航底部增加了「查看全部」功能，展開后用戶就可以看到全部的功能菜單。

在形式感上，左右結(jié)構(gòu)的布局會對系統(tǒng)logo 和名稱進(jìn)行壓縮，我個(gè)人認(rèn)為整體風(fēng)格不如上下結(jié)構(gòu)正式，對品牌形象表現(xiàn)力不足。因此該結(jié)構(gòu)主要用于一些工具產(chǎn)品或者輕量型的系統(tǒng)，在大型的業(yè)務(wù)平臺或者G端的項(xiàng)目應(yīng)用較少。

通過上面的案例，我們可以看到B端產(chǎn)品基本上是以「混合布局」的模式構(gòu)建界面框架。

三、混合布局

在B端產(chǎn)品中，混合布局既有貫穿的頂部區(qū)域，可以承載導(dǎo)航菜單和產(chǎn)品框架信息，又在內(nèi)容區(qū)增加左側(cè)導(dǎo)航，提升導(dǎo)航信息承載量，更好地滿足業(yè)務(wù)功能需要。

例如巨量縱橫產(chǎn)品中，采用了頂部導(dǎo)航和左側(cè)導(dǎo)航相結(jié)合的方式，將產(chǎn)品劃分為幾個(gè)獨(dú)立的業(yè)務(wù)單元，用戶可以根據(jù)自己的工作目標(biāo)去選擇對應(yīng)的功能。同時(shí)也減少了左側(cè)導(dǎo)航的信息承載量和層級，方便用戶操作。

如果系統(tǒng)功能極其復(fù)雜，傳統(tǒng)的「頂部導(dǎo)航+左側(cè)導(dǎo)航」的模式已經(jīng)無法滿足產(chǎn)品需求。例如云類產(chǎn)品都是大型的業(yè)務(wù)平臺，包含幾十項(xiàng)業(yè)務(wù)功能，于是構(gòu)建了「產(chǎn)品與服務(wù)」的中心模式，集中全量展示所有業(yè)務(wù)功能，方便用戶瀏覽查看。在一定程度上也增加了用戶探索更多功能的欲望。