手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

設(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è)置,并且會(huì)限制菜單數(shù)量,一般為4-6個(gè)左右。

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

圖片

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

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

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

圖片

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

圖片

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

 

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

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

圖片

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

圖片

面對(duì)復(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ū)信息空間,通常會(huì)增加「收起」功能;
  • 限制多

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

  • 操作效率不高

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

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

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

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

圖片

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

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

圖片

3)雙列布局

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

圖片

4)查看全部

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

圖片

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

圖片

在形式感上,左右結(jié)構(gòu)的布局會(huì)對(duì)系統(tǒng)logo 和名稱進(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)用較少。

通過上面的案例,我們可以看到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)去選擇對(duì)應(yīng)的功能。同時(shí)也減少了左側(cè)導(dǎo)航的信息承載量和層級(jí),方便用戶操作。

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

圖片

在這種模式下,每個(gè)獨(dú)立的產(chǎn)品或服務(wù)則形成了子系統(tǒng)空間,采用統(tǒng)一的混合布局方式,讓原本復(fù)雜的業(yè)務(wù)系統(tǒng)變得簡單。

圖片

另外還有一個(gè)小細(xì)節(jié)。

左側(cè)導(dǎo)航菜單帶給用戶的心理暗示是「切換」,用來控制右側(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ì)原則:

1、符合產(chǎn)品的定位和業(yè)務(wù)需要

產(chǎn)品界面框架要能夠承載產(chǎn)品的整個(gè)業(yè)務(wù)體系,并且具備足夠的延展性,需要考慮到產(chǎn)品未來升級(jí)和發(fā)展。

2、保證用戶的操作效率

導(dǎo)航的形式會(huì)影響到用戶的操作效率,因此在層級(jí)設(shè)定上需要謹(jǐn)慎,避免層級(jí)太深影響用戶的操作效率,目前主流的左側(cè)導(dǎo)航以2層為主。

3、全局視角

導(dǎo)航是用戶了解產(chǎn)品功能的第一渠道,在設(shè)計(jì)時(shí)既要考慮到用戶用起來的感受,也要能夠讓用戶更直觀的了解系統(tǒng)全局。


作者:子牧先生

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》設(shè)計(jì)基礎(chǔ)(9):拆解B端產(chǎn)品,總結(jié)界面框架設(shè)計(jì)的3原則

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加藍(lán)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




分享本文至:

日歷

鏈接

個(gè)人資料

存檔