免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

網(wǎng)站B端管理界面設(shè)計(jì)導(dǎo)航布局形式

2020-11-26    分類: 網(wǎng)站建設(shè)

工作中會(huì)接觸到很多的B端管理界面的設(shè)計(jì)。一般的情況都是直接用組件,不光是設(shè)計(jì)時(shí)復(fù)用快捷,前端實(shí)現(xiàn)起來(lái)也很方便。但是最近做一個(gè)新的系統(tǒng),領(lǐng)導(dǎo)不希望跟之前的管理系統(tǒng)長(zhǎng)的差不多。于是我就去搜集一些大廠的線上案例,看看管理界面都有什么樣的布局形式。拋開數(shù)據(jù)可視化類,雖然也真的都差不多,但是也各有千秋。本文我將從框架布局和內(nèi)容區(qū)布局兩個(gè)點(diǎn)切入分析~

框架布局

B端產(chǎn)品的核心需求是提升用戶的效率,要高效清晰的展示數(shù)據(jù),降低認(rèn)知成本。在做B端產(chǎn)品時(shí)就要重心偏向功能,必要時(shí)可以犧牲美觀,讓功能更直觀。因此他的框架布局也多根據(jù)功能來(lái)決定。管理界面的框架大致可以分為導(dǎo)航區(qū)域與內(nèi)容區(qū)域,框架布局形式主要可以分為側(cè)邊導(dǎo)航形式、和頂部導(dǎo)航形式兩種。

網(wǎng)站界面導(dǎo)航設(shè)計(jì)

1、側(cè)邊導(dǎo)航形式

側(cè)邊欄導(dǎo)航就是將導(dǎo)航固定在左側(cè),多用于工具型或管理型數(shù)據(jù)量比較大的管理界面中。它的優(yōu)勢(shì)是導(dǎo)航展示更加清晰,方便頁(yè)面之間切換。

這種展開形式更加直觀,但是會(huì)降低頁(yè)面利用率。在頁(yè)面數(shù)據(jù)內(nèi)容較多的時(shí)候,可以考慮將其收起來(lái),鼠標(biāo)懸浮或者點(diǎn)擊時(shí)展開。但是這樣做時(shí)盡量不要設(shè)置過多的層級(jí),要降低用戶的認(rèn)知成本。比如所有層級(jí)的菜單可以一鍵展開,用戶可以直接預(yù)覽所有菜單,避免為了尋找某一功能入口反復(fù)操作。

左側(cè)導(dǎo)航布局設(shè)計(jì)

2、頂部導(dǎo)航形式

頂部導(dǎo)航是將導(dǎo)航置于頂部,一般在菜單數(shù)量較少的時(shí)候采用這種形式,通常不超過7個(gè)。鼠標(biāo)點(diǎn)擊或者懸浮可展示二級(jí)菜單。或者是功能比較簡(jiǎn)單的導(dǎo)航,點(diǎn)擊直接跳轉(zhuǎn)相關(guān)界面。

這種形式適用于數(shù)據(jù)量較少,邏輯簡(jiǎn)單的管理頁(yè)面。當(dāng)然也有個(gè)別復(fù)雜的管理界面,會(huì)將菜單收于頂部導(dǎo)航中,需要時(shí)全部展開。

網(wǎng)站B端界面設(shè)計(jì),頂部導(dǎo)航設(shè)計(jì)

內(nèi)容區(qū)布局

框架確定之后,就要考慮內(nèi)容區(qū)域的布局,怎樣才能規(guī)律、整潔地將數(shù)據(jù)展示出來(lái)。通常內(nèi)容區(qū)域的布局分為卡片布局和平鋪布局兩種。

1、卡片布局

卡片布局能夠很好地組織內(nèi)容,可以幫助用戶快速掃描頁(yè)面,易于擴(kuò)展且非常靈活。卡片將內(nèi)容整合模塊化,使頁(yè)面清晰,且有層次感。因此不管是從視覺上、還是個(gè)性化體驗(yàn)上都是一種很好的表現(xiàn)方式,也是目前設(shè)計(jì)師普遍熱衷的一種設(shè)計(jì)方式。

管理界面設(shè)計(jì),卡片布局管理界面

在做卡片布局時(shí),要注意所有的卡片要統(tǒng)一,大小可以根據(jù)內(nèi)容變化,但是圓角、間距、邊距等都要嚴(yán)格統(tǒng)一。

第二是要考慮到卡片投影,如果有需要加投影的情況,要提前和開發(fā)那邊溝通,涉及到投影重疊的部分會(huì)不會(huì)增加開發(fā)的成本以及實(shí)現(xiàn)的效果。

第三要控制卡片的數(shù)量。盡量不要分較多的卡片,因?yàn)楣芾斫缑嫱ǔ?shù)據(jù)較多,卡片過多會(huì)大大降低頁(yè)面利用率,也容易使界面看起來(lái)凌亂。

2、平鋪布局

平鋪布局是所有的內(nèi)容在同一層上平鋪展示。這樣做的好處是能夠更大程度提高頁(yè)面利用率,在有限的界面展示更多的數(shù)據(jù)。當(dāng)頁(yè)面中沒有多個(gè)模塊,或者是內(nèi)容過于瑣碎時(shí)通常使用這種形式。

平鋪布局界面設(shè)計(jì)

例如案例中這個(gè)界面,就把內(nèi)容區(qū)域作為一整個(gè)模塊平鋪于頁(yè)面中。這樣布局要注意的是,要做好界面中內(nèi)容之間的分割,避免混亂。且要注意層級(jí)關(guān)系,雖然是平鋪但也要使界面具有層次感。

劃重點(diǎn)

B端管理頁(yè)面的功能目的就是清晰展示數(shù)據(jù),保證工作效率。因此功能體驗(yàn)大于視覺美觀。以上主要寬泛地分析了框架布局,以及內(nèi)容區(qū)域展現(xiàn)形式。

作者:山竹屁

文章題目:網(wǎng)站B端管理界面設(shè)計(jì)導(dǎo)航布局形式
文章地址:http://m.newbst.com/news/91243.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站品牌網(wǎng)站設(shè)計(jì)App設(shè)計(jì)手機(jī)網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)