B端設(shè)計實戰(zhàn)秘籍:優(yōu)化表格設(shè)計的必備技巧與經(jīng)驗分享

2024-10-30    藍藍小助手 B端ui設(shè)計文章及欣賞

哈嘍 大家好呀 今天帶來了工作中對于表格的小的沉淀 梳理一些表格的常見問題 歡迎大家一起交流

在B端界面中,通常大量使用表格來展示結(jié)構(gòu)化的數(shù)據(jù),合理的設(shè)計表格,能給用戶帶來高效的信息獲取率,我們一起來瞧瞧普通但不平凡的表格有哪些設(shè)計要點。

 

 

 

 

 

 

 

 

 

表格常用于信息收集(展示)、數(shù)據(jù)分析、歸納整理、等活動中,在互聯(lián)網(wǎng)產(chǎn)品應(yīng)用中,非常適合于:

 

1. 需要組織和展示大量數(shù)據(jù)信息

表格結(jié)構(gòu)簡單,分隔歸納明確,特別適合組織和展示大量的信息內(nèi)容,且易于用戶瀏覽和獲取信息。

 

2. 當(dāng)數(shù)據(jù)信息需要進行多種復(fù)雜操作時

需要對信息進行排序、搜索、篩選、分頁、自定義選項等操作。

 

3. 信息上下間的對比

表格的歸納與分類,使信息之間易于對比,便于用戶快速查詢其中的差異與變化、關(guān)聯(lián)和區(qū)別。比如:金額 百分比 數(shù)據(jù)升降展示

 

 

 

 

 

 

 

 

 

首先我們了解下表格的構(gòu)成:頂欄、表格主體、底欄

 

 

 

 

 

 

·頂欄標(biāo)題

 

頂欄標(biāo)題不僅是起到內(nèi)容的總覽作用,也是區(qū)分不同模塊內(nèi)容的標(biāo)識,通過對標(biāo)題層級的凸顯,讓用戶感知到模塊內(nèi)容已切換。

 

在設(shè)計的時候會有兩種情況:

(1)包含在卡片內(nèi),作為最高層級凸顯。在功能模塊較多時采用居多,強調(diào)不同的模塊內(nèi)容

(2)標(biāo)題在卡片外,作為內(nèi)容的描述。在功能單一時靠呼吸感區(qū)分,主要是凸顯內(nèi)容側(cè)

 

 

 

 

·主體

 

表頭一般指列標(biāo)簽,這里也指首列行標(biāo)簽,是對所屬行或列信息的描述。

表體—表格的主體,承載著內(nèi)容信息數(shù)據(jù),由單元格組成。

 

 

 

 

 

 

·分頁

 

「迷你型」展示:當(dāng)數(shù)據(jù)當(dāng)分頁數(shù)量較少時,在7頁以內(nèi)時,可采用。


「精簡型」展示:當(dāng)「頁面空間不足」或降低分頁的「視覺影響」時,可采用該類型。

「完整型」展示:當(dāng)表格數(shù)據(jù)較多,為滿足各種功能需求,可采用該類型。

 

 

 

 

·表格中的字體/行高

 

常用的文字大?。罕眍^14PX,列文字:13PX

 

在具體設(shè)定表格行高時,表格中以文字信息為主,可以參考文字排版的常用做法,將整個表格的行高分成文字行高、文字與分割線間距離,即上下間距兩部分來考慮。文字行高可以設(shè)定為字號的1.2~1.8倍,文字與分割線間距離可以設(shè)定為字號的1~1.5倍。分為這樣的兩部分也比較符合開發(fā)同學(xué)寫代碼時的習(xí)慣(多行行高同理去設(shè)定)。

 

 

 

 

 

 

 

 

·對齊方式

 

表格中的對齊一直是讓人比較糾結(jié)的事情,不同的類別對應(yīng)不用的對齊方式,常見的對齊樣式有如下幾種

 

數(shù)字信息右對齊, 包含金額、長寬高等需要關(guān)聯(lián)比較的字段,這是因為我們在對比數(shù)字時,首先看個位,然后十位、百位等。

 

文字信息左對齊,符合正常的心智模型,一般人們的閱讀方式是從左往右,從上往下。

 

固定字段居中對齊 ,比如日期(2020-11-11),狀態(tài)文字(未審核、已收款等)或者存在布爾關(guān)系的文本(是/否、男/女等),這能更好的信息呈現(xiàn)及表格空間的節(jié)省。

 

表頭與數(shù)據(jù)信息對齊, 這能保持表格豎直方向整潔,營造一致性和上下文環(huán)境。

 

 

 

 

 

 

·數(shù)據(jù)多層級

 

除了常規(guī)的表格樣式之外還會出現(xiàn)特殊的表格樣式,在復(fù)雜的表格中,由于數(shù)據(jù)量較多,并且數(shù)據(jù)有層級關(guān)系,所以會對數(shù)據(jù)表格進行分層處理,優(yōu)先展示第一層級的數(shù)據(jù)內(nèi)容,將二三層級的數(shù)據(jù)隱藏起來,用戶點擊后再展示。

 

 

 

 

 

 

·數(shù)據(jù)修改

 

表格的編輯通常有兩種,一種是在彈窗或者新頁面進行內(nèi)容編輯。常用在數(shù)據(jù)較多、內(nèi)容較復(fù)雜的情況。

另外一種是當(dāng)前表格編輯,表格編輯又分:帶單元格編輯功能的表格、帶行編輯功能的表格。常用在表格數(shù)據(jù)較少,沒有更多詳情,表格已經(jīng)展示全部內(nèi)容。當(dāng)前表格編輯,比較方便用戶操作,讓用戶能直觀的查看編輯單元格。

 

 

 

 

 

·數(shù)據(jù)操作

 

數(shù)據(jù)操作主要是針對表格數(shù)據(jù)的增、刪、改,從控制范圍可分為:單行操作、批量操作、全局操作;

單行操作也稱行內(nèi)操作,常見的顯性與隱性兩種方式。顯性操作,操作項顯示在行內(nèi),直觀明了;隱性操作,鼠標(biāo)懸停時才顯示操作項,界面簡潔,留更多的空間給需要查看的數(shù)據(jù)內(nèi)容,減輕空間壓力,減少干擾;

顯性操作,文字按鈕操作項一般不多于三個,圖標(biāo)按鈕不多于四個時,操作項跟在行條目后面;當(dāng)超過時,建議將相對低頻操作選項折疊收起,點擊"更多"或“...”下拉顯示。操作按鈕致灰時,鼠標(biāo)選中可顯示原因。

 

 

 

 

 

在日常的工作環(huán)境中會遇到很多情況,這時候就需要用到一些方法來處理數(shù)據(jù)

 

·關(guān)于分割線

 

表格行列的分割方式有:

 

網(wǎng)格式:類似excel,這樣的方式很好的所有行和列進行分割,但是網(wǎng)格很容易給人造成視覺疲勞。

水平線:僅對行進行分割,通過間距與對齊的方式對列進行視覺上的分割,這樣的方式可以很好的對數(shù)據(jù)進行劃分,便于閱讀。

斑馬條紋:通過低飽和度的顏色交替的對 行 進行分割,同樣很好的對數(shù)據(jù)進行劃分,便于閱讀。

留白,不分割:直接留白,通過間距來劃分,不建議使用這樣的方式,因為數(shù)據(jù)較多的時候,用戶十分容易將行對應(yīng)錯,容易造成混亂。

 

關(guān)于空數(shù)據(jù)

 

表格中經(jīng)常會出現(xiàn)空數(shù)據(jù)或無數(shù)據(jù)的情況,留白處理會給用戶造成一定的困惑和誤解,是系統(tǒng)沒有加載出來嗎或誤以為出現(xiàn)了bug?明智的做法,是無數(shù)據(jù)時用「-」來填充顯示,數(shù)據(jù)為零時與上下數(shù)據(jù)單位、小數(shù)點相同的0來顯示。

 

 

 

 

 

表格無內(nèi)容且沒有創(chuàng)建訴求的,數(shù)據(jù)是系統(tǒng)產(chǎn)生的,不是由用戶創(chuàng)建的,直接告之暫無數(shù)據(jù)

 

 

用戶有創(chuàng)建訴求,數(shù)據(jù)是由用戶或系統(tǒng)產(chǎn)生的則直接示意用戶創(chuàng)建數(shù)據(jù)

 

表格篇的總結(jié)到此結(jié)束啦~ 設(shè)計師在具體的項目中根據(jù)用戶和產(chǎn)品的需求進行調(diào)整,合理使用表格,表格能承載更多的內(nèi)容信息,圖片,文本,文件等格式都能在表格中被包容,此次分享暫時只分享到了文字類的表格內(nèi)容,謝謝觀看

作者:舒萱呀
鏈接:https://www.zcool.com.cn/article/ZMTQ5ODEwNA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

image.png

藍藍設(shè)計(yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計交互設(shè)計、UI咨詢高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。

image.png

關(guān)鍵詞:UI咨詢、UI設(shè)計服務(wù)公司軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)軟件wpf開發(fā)、軟件vue開發(fā)

 

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://yvirxh.cn

存檔