2020-2-21 資深UI設(shè)計者
在B端的UI設(shè)計過程中經(jīng)常要接觸到大量的表單設(shè)計，且要展示海量數(shù)據(jù)，因此如何展示更清晰且讓用戶使用起來更便捷是設(shè)計師主要需要考慮的。結(jié)合自己在實際工作中遇到的列表類型總結(jié)了 web 表格設(shè)計的常用基礎(chǔ)列表模式，并進行匯總以便后續(xù)使用。
一、基礎(chǔ)型列表
web列表中的基礎(chǔ)表格樣式，通常用于橫向表格的縱列數(shù)據(jù)較少時，使頁面不需要滑動條也可以展示完全。操作項一般置于頁面最右側(cè)，便于用戶瀏覽完全后進行操作。
二、 帶有進度條的列表
用于查看數(shù)據(jù)完成進度，通常與網(wǎng)格型列表搭配使用，方便數(shù)據(jù)的直觀對比，進度條用不同顏色進行區(qū)分，降低用戶認知負荷。
三、可進行選擇、排序、篩選、表頭分組且?guī)в袃鼋Y(jié)列的復(fù)合型表格
由于業(yè)務(wù)場景的復(fù)雜性，在B端系統(tǒng)中通常一個表格會涉及到大量復(fù)雜的操作，這就需要將多種樣式疊加應(yīng)用提高使用效率，防止用戶產(chǎn)生疑惑。此圖中用戶既會進行單選或者批量選擇，也有可能會對數(shù)據(jù)進行排序、篩選查看，對于專業(yè)術(shù)語或用戶不常見的名詞應(yīng)給予一定的幫助說明。另外由于指標(biāo)列選項過多，屏幕無法展示完全，還需要將重要列凍結(jié)，其他列增加滑動條來展示。
四、用于小計及總計的表格
小計行可能會出現(xiàn)一頁多行的情況，用特殊顏色隔開，方便用戶快速識別不同部分；總計行一般出現(xiàn)于頁面最末端，通常只有一行，文字加粗顯示。
五、行凍結(jié)、帶有角標(biāo)的可編輯表格
點擊帶有角標(biāo)的表格可直接進行編輯更改數(shù)值；
整行凍結(jié)：當(dāng)用戶向上滾動查看或者翻頁時，凍結(jié)的行依然懸浮顯示于頁面頂部。
六、主從型列表-可展開表格
表格默認收起狀態(tài)，因為 B 端產(chǎn)品的業(yè)務(wù)數(shù)據(jù)量通常較大，默認展開多個主從關(guān)系表格對服務(wù)器的性能損耗較大。因此設(shè)定只有當(dāng)用戶點擊下轉(zhuǎn)箭頭，此表格單獨展開。
七、雙排文字表格
適用于一屏以內(nèi)文字內(nèi)容較多且不需要完全展示時的解決方案。
我們都遇到過這樣頭痛的問題，當(dāng)列表字段太多，一屏無法完全展示，這時應(yīng)該怎么做？當(dāng)用戶需要鼠標(biāo)頻繁去滑動橫向滾動條查看一屏以外的信息時，易導(dǎo)致操作成本和對屏幕展示信息的記憶成本提高，而產(chǎn)品的易用性降低。因此提供了除增加滾動條外的另一條解決方案，使用雙排文字表格，可節(jié)省列表空間，部分內(nèi)容省略表示，鼠標(biāo)hover時展示全部內(nèi)容。
總結(jié)：
1.關(guān)于對齊方式：隨著工作范圍的深入展開，發(fā)現(xiàn)之前做表格時對對齊方式并未做過多深入研究，導(dǎo)致不同項目的對齊方式并不一致，因此總結(jié)出一套方法：文本信息左對齊，因為現(xiàn)代人的閱讀方式習(xí)慣從左到右，符合正常的心智；數(shù)據(jù)信息右對齊，更加方便數(shù)字大小的直觀對比；內(nèi)容一樣居中對齊，視覺上更均衡；表頭與信息內(nèi)容對齊方式一致，給用戶視覺上的統(tǒng)一感，降低視覺噪音。
2.當(dāng)設(shè)計師把設(shè)計稿交給開發(fā)時，雖然已經(jīng)標(biāo)好注、切好圖同時也包括交互注釋，但是不代表開發(fā)能把界面表達的跟設(shè)計稿完全一樣，甚至?xí)泻艽笃?。我們在設(shè)計的時候會考慮到字體大小、是否加粗、對齊方式等設(shè)計層級，但前端在開發(fā)時可能并不會注意到這些細節(jié)，因此需要保持與前端的良好溝通，包括出具走查文檔及當(dāng)面溝通，更能提高工作的質(zhì)量和效率。
3.由于B端系統(tǒng)的復(fù)雜性，常需要不同的表單樣式結(jié)合使用，因此還需設(shè)計時根據(jù)業(yè)務(wù)場景靈活運用。
文章來源：站酷 作者：小魔女4376
藍藍設(shè)計的小編 http://bouu.cn