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

B端列表頁(yè)設(shè)計(jì)總結(jié)

2022-7-28    ui設(shè)計(jì)分享達(dá)人

列表頁(yè)腦圖



左側(cè)導(dǎo)航欄

全局導(dǎo)航

1、導(dǎo)航欄可折疊收起菜單。

2、收起時(shí),鼠標(biāo)懸浮在圖標(biāo)上同時(shí)右側(cè)彈出菜單欄,然后觸發(fā)菜單文字。



頂部導(dǎo)航欄

  • Tab擺放位置(什么時(shí)候在上,什么時(shí)候在下?)

1、根據(jù)tab的層級(jí)來(lái)確定位置,最高層級(jí)在上,不同流程層級(jí)在下。

Tab在上:用戶(hù)明確自己想要查找的目標(biāo)在哪個(gè)tab并且需要一眼看到所有概況(想要查找數(shù)據(jù)時(shí),直接到對(duì)應(yīng)的tab下查找)。

Tab在下:需要看到查詢(xún)的結(jié)果在各tab下的分布情況。



篩選/搜索區(qū)

1、篩選區(qū)包括搜索項(xiàng)、查詢(xún)、清除查詢(xún);如果搜索項(xiàng)超過(guò)一行時(shí),需要「展開(kāi)、收起」按鈕。

2、折疊展開(kāi)設(shè)計(jì):默認(rèn)顯示一行將使用頻率高、覆蓋面廣的1-3個(gè)顯示出來(lái)其他的隱藏。(用戶(hù)頻繁使用的篩選條件能一眼找到)。

3、按鈕固定在最右側(cè)不變,搜索項(xiàng)可進(jìn)行自適應(yīng)。

4、篩選條件:

  • 交叉篩選:選擇篩選條件后,需點(diǎn)擊「查詢(xún)」按鈕才能觸發(fā)篩選條件。
  • 實(shí)時(shí)篩選:篩選條件不存在交叉,可以實(shí)時(shí)篩選。像“流程狀態(tài)”此類(lèi)固定選項(xiàng)類(lèi),要不要提供“勾選即執(zhí)行搜索”功能?用戶(hù)可能還需要綜合其他搜索條件一起查詢(xún),如果執(zhí)行搜索可能會(huì)打斷用戶(hù)剛才的輸入。
  • 時(shí)間篩選:根據(jù)真實(shí)場(chǎng)景來(lái)提供快捷選項(xiàng),比如:昨天、最近7天、最近30天...



全局操作

1、功能性按鈕和批量操作(比如新增、導(dǎo)入、導(dǎo)出...)

2、根據(jù)使用頻率進(jìn)行排列新增>導(dǎo)入>導(dǎo)出;使用頻率高的操作采用高亮顯示。

3、如果按鈕太多可進(jìn)行操作項(xiàng)分類(lèi)。



表格欄

表頭

1、在能夠概括的情況下,盡量簡(jiǎn)練、準(zhǔn)確,一般可根據(jù)上下文關(guān)系進(jìn)行簡(jiǎn)化,以達(dá)到節(jié)省表格頭部空間和減輕視覺(jué)壓力的作用,讓用戶(hù)注意力聚焦在數(shù)據(jù)本身。

2、對(duì)于比較復(fù)雜的表頭,可以跟一個(gè)釋義標(biāo)識(shí),鼠標(biāo)懸停時(shí)出現(xiàn)該字段的詳細(xì)解釋。

3、表頭篩選、排序功能

  • 表頭字段太多怎么辦?

提供表頭篩選功能,依據(jù)用戶(hù)關(guān)注度最高的字段進(jìn)行排列。

  • 哪些字段需要排序功能?

需結(jié)合業(yè)務(wù)場(chǎng)景具體分析,一般來(lái)說(shuō),編號(hào)、時(shí)間、價(jià)格字段,提供正序、倒序功能。

  • 默認(rèn)排序

考慮用戶(hù)第一次進(jìn)入列表頁(yè)的初始化狀態(tài),保證用戶(hù)進(jìn)入頁(yè)面時(shí)大概率能直接看到自己想要的東西。

表體

包含多選列、數(shù)據(jù)列、操作列

  • 哪些字段可以前置?

特殊處理操作的按鈕、字段優(yōu)先級(jí)、狀態(tài)可以前置,方便一目了然。

  • 表格字段太長(zhǎng)該如何處理?

1、全部展示(缺點(diǎn):利用滾軸滑動(dòng)次數(shù)太多用戶(hù)視覺(jué)容易疲憊)。

2、較長(zhǎng)字段用“…”展示,防止字段重復(fù),對(duì)重要字段進(jìn)行快速區(qū)分、對(duì)比(優(yōu)點(diǎn):每行可顯示較多的信息 缺點(diǎn):想要看全信息,只能鼠標(biāo)移入字段出現(xiàn)氣泡顯示完整信息)。

3、換行,保持行高不變,改變文字距單元格的上下間距,最好不要超過(guò)3行,多余字段用”…”顯示(優(yōu)點(diǎn):盡可能顯示全部?jī)?nèi)容 缺點(diǎn):同2)。

4、字段優(yōu)先級(jí)分類(lèi),做折疊展開(kāi)設(shè)計(jì)(篩選信息層級(jí)較高的字段放在表格欄,次要信息放入二級(jí)表格)。

5、數(shù)據(jù)庫(kù)中沒(méi)有該字段,用“-”,數(shù)量用“0”后邊有小數(shù)點(diǎn)、后位數(shù)保持上下單位一致。

  • 表格設(shè)計(jì)如何降噪

1、讓用戶(hù)將注意力放在數(shù)據(jù)信息上,而不是表格底色、邊框

2、不使用斑馬線設(shè)計(jì)、分割線樣式輕盈、去掉不必要的裝飾和顏色

  • 單行操作項(xiàng)位置如何處理?

基于業(yè)務(wù)、基于場(chǎng)景

比如用戶(hù)以處理訂單為主,操作項(xiàng)建議放在第一列,方便用戶(hù)操作。

如果用戶(hù)以查看信息為主,操作項(xiàng)一般放在最后一列。

  • 如何處理由于用戶(hù)權(quán)限不同或者狀態(tài)不同這兩種原因,使得每行的數(shù)據(jù)擁有不同的操作項(xiàng)?

可以采用下拉框設(shè)計(jì)

  • 行高



1、行高=文字行高+上下間距

2、文字行高可以設(shè)定為字號(hào)的1.2~1.8倍,上下間距可以設(shè)定為字號(hào)的1~1.5倍;行高影響每行信息的易讀性。

3、一般行高為32-56px












  • 列間距、列數(shù)、對(duì)齊方式

1、采用8px網(wǎng)格作為基礎(chǔ)單位,來(lái)定義各組件和模塊間距,因?yàn)槟壳爸髁髯烂嬖O(shè)備屏幕分辨率在垂直和水平方向基本都可以被8整除,使用8px比較普適。






2、最好列數(shù)在7±2

3、對(duì)齊方式:文本采用左對(duì)齊,金額及跟金額相關(guān)的百分比、操作項(xiàng)采用右對(duì)齊

  • 分頁(yè)器
  • 一頁(yè)展示多少條合適?

一頁(yè)最好能在一屏展示,避免用戶(hù)來(lái)回上下滾動(dòng),比如固定為展示10條。

用戶(hù)特殊使用需求,不適用以上規(guī)則,一頁(yè)可能展示10條/20條,都可以。





















視覺(jué)稿







作者:YOgire  來(lái)源:站酷

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

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

藍(lán)藍(lán)設(shè)計(jì)www.88yangsc.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(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咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司

分享本文至:

日歷

鏈接

個(gè)人資料

存檔