他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

B端-表格設(shè)計(jì)

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

在B端產(chǎn)品中,數(shù)據(jù)主要通過表格的形式展現(xiàn)。本文是我從實(shí)際工作出發(fā),結(jié)合項(xiàng)目和過去經(jīng)驗(yàn)對于復(fù)雜業(yè)務(wù)類的表格設(shè)計(jì)的一次總結(jié)。



1、表格的介紹


1.1表格的定義


表格(Table),又稱為表,是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它既是一種可視化交流模式,又是一種組織整理數(shù)據(jù)的手段。


1.2表格的構(gòu)成元素


通常表格的組成元素以及相關(guān)元素會有多個(gè)部分,筆者根據(jù)自己設(shè)計(jì)表格的工作經(jīng)驗(yàn)將表格概括為容器、篩選區(qū)、功能性按鈕、表頭、表體以及底欄等六個(gè)部分,其各個(gè)部分包含的相關(guān)元素如圖所示。



容器:包含表格的所有內(nèi)容。

篩選區(qū):包括搜索和條件篩選方便用戶快速查詢定位數(shù)據(jù),一般位于表格上方。

功能性按鈕:比如常見的[新增]按鈕和各種批量操作按鈕。

表頭:說明數(shù)據(jù)的內(nèi)容,可以包含篩選、排序等功能。

表體:包含行和列數(shù)據(jù),按列可以分為多選列、數(shù)據(jù)列、操作列。(多選列=多選框;數(shù)據(jù)列=呈現(xiàn)業(yè)務(wù)展現(xiàn)需要的信息;操作列=針對單行數(shù)據(jù)的操作按鈕,比如管理、編輯信息等。)

底欄:包含數(shù)據(jù)量、單頁條目、總條目、分頁等,底欄數(shù)據(jù)也可以放置在表格頂部。


1.3表格的樣式


1)幾種常見的風(fēng)格樣式


a.網(wǎng)格型:表格有均勻而明顯的分割線,邊框單元格比較明顯。

b.水平線型:僅顯示水平線可減少整個(gè)網(wǎng)格的視覺噪聲。

c.斑馬條紋型:隔行交替使用不同底色來區(qū)分?jǐn)?shù)據(jù)。

d.自由形式:移除所有分割線,通過盡可能減少視覺噪聲來創(chuàng)建極簡外觀。



2)關(guān)于樣式的選取技巧


網(wǎng)格型:對于數(shù)據(jù)之間的關(guān)系緊密(列信息較多而沒有足夠空間用留白來分割信息)且有對比關(guān)系的。


水平線型:它能顯著減輕表格在垂直方向的視覺重量,提升用戶進(jìn)行大量數(shù)據(jù)對比時(shí)的速度。因此對于所有數(shù)據(jù)集大小,此樣式都是最常見的。


斑馬條紋型:每行交替使用不同的顏色背景是幫助用戶在閱讀時(shí)保持其位置的另一種好方法。對于較大的數(shù)據(jù)集,建議使用此樣式,在較大的數(shù)據(jù)集中,交替模式將很清晰,并且不會引起特定行突出顯示的混亂。


自由形式:對于小型數(shù)據(jù)集,如果用戶在閱讀時(shí)不需要幫助就可以保持位置,則建議使用此樣式。


信息內(nèi)容的有效傳達(dá)是表格設(shè)計(jì)的本質(zhì),就表格本身而言應(yīng)該是隱型的,應(yīng)該讓用戶注意力聚焦在核心內(nèi)容上。所以,邊框的顏色應(yīng)非常淡,不能妨礙快速瀏覽。


2、表格的設(shè)計(jì)技巧


表格是為可讀性而生的,一個(gè)結(jié)構(gòu)清晰的布局能大大提升用戶對信息的接收速度和理解程度。因此,設(shè)計(jì)易讀,易掃視,易比較,易操作的表格結(jié)構(gòu)是表格設(shè)計(jì)的首要目標(biāo)。


下面我將以公司財(cái)務(wù)中臺的表格改版為例,逐步說明表格中每個(gè)結(jié)構(gòu)的設(shè)計(jì)。


這是改版前后樣式對比圖:



2.1篩選區(qū)設(shè)計(jì)


篩選區(qū)可以看作表格的導(dǎo)航,由搜索和篩選這兩部分組成。一般搜索和篩選會同時(shí)出現(xiàn),但是兩者一般很少同時(shí)使用來對數(shù)據(jù)進(jìn)行定位。搜索更多的是對單一或者包含某個(gè)字段的的數(shù)據(jù)來進(jìn)行定位;篩選則是用來查詢一類數(shù)據(jù)

根據(jù)MECE分析法,篩選區(qū)可以有以下的表現(xiàn)形式:


  • 常用搜索少用篩選,若篩選項(xiàng)多,可以選擇隱藏篩選項(xiàng),篩選少可以展示出來;

  • 搜索和篩選都常用,可以將搜索和篩選都展示出來;

  • 常用篩選少用搜索,篩選和搜索同時(shí)展示;

  • 篩選和搜索都不常用,展示搜索隱藏篩選。


1)搜索


在樣式上,搜索可以分為簡單搜索、標(biāo)簽搜索、高級搜索等三類。


  • 簡單搜索:由一個(gè)搜索框和一個(gè)按鈕組成??梢暂斎胍粋€(gè)或多個(gè)條件進(jìn)行搜索。

  • 標(biāo)簽搜索:在簡單搜索的基礎(chǔ)上加上標(biāo)簽,即先選標(biāo)簽,在輸入搜索內(nèi)容。

  • 高級搜索:即點(diǎn)擊更多展開其他搜索條件,減少了更多條件對用戶的干擾,但降低了易發(fā)現(xiàn)性。



2)篩選


根據(jù)篩選的位置,可以分為標(biāo)簽篩選、表頭篩選兩類。



3)案例小講堂


對于數(shù)據(jù)集較大的B端系統(tǒng)來說,往往篩選條件比較多,都將其展示出來會導(dǎo)致空間占比過大,影響了用戶對表格信息的獲取。下面以我公司的財(cái)務(wù)中臺為例,講講如何優(yōu)化篩選區(qū),希望對大家有所啟示。


3.2.3 版本中篩選區(qū)樣式



篩選條件全部展開,目的是讓用戶對信息進(jìn)行快速的查詢、過濾,以快速準(zhǔn)確完成目標(biāo)任務(wù)。但業(yè)務(wù)復(fù)雜,數(shù)據(jù)集過多少,篩選條件也相應(yīng)增加(空間占比大),看起來非常冗余,不利于快速定位目標(biāo)。為了平衡掃描、查詢、過濾、分析等這些操作,復(fù)雜業(yè)務(wù)的表格區(qū)篩選需要進(jìn)行一定的優(yōu)化處理,這樣才能滿足滿足業(yè)務(wù)需求同時(shí),又符合用戶心智模型。


方案A  整齊劃一


整合篩選項(xiàng),采用表頭篩選+標(biāo)簽篩選的樣式,縮減篩選區(qū)的頁面空間占比。



討論結(jié)果:雖然這個(gè)方案使篩選區(qū)的空間占比縮小,整體頁面也看似整潔不少。但表頭篩選在復(fù)雜的業(yè)務(wù)系統(tǒng)中存在幾個(gè)弊端:


a.數(shù)據(jù)集往往很龐大,表格不能展示所有字段,往往采用列固定的形式來呈現(xiàn)數(shù)據(jù)的完整性。以財(cái)務(wù)中臺為例,高頻篩選功能已被遮擋(如上圖),篩選前需先對表格進(jìn)行橫向滾動(dòng),無端增加操作;


b.應(yīng)無法展示全部字段,用戶無法清晰的感知到篩選了哪些內(nèi)容,增加認(rèn)知學(xué)習(xí)成本;


c.表頭中的屬性并不是都可以進(jìn)行篩選,用戶不可感知哪些可以篩選,需要滑動(dòng)表格檢索。


方案B 強(qiáng)調(diào)主次關(guān)系


采用展開式的標(biāo)簽篩選樣式,對不常用的篩選項(xiàng)做隱藏處理。但因業(yè)務(wù)場景的復(fù)雜度,高頻篩選功能還是很多,沒有解決本質(zhì)的問題,如下圖:



方案C 分狀態(tài)展示(逐漸呈現(xiàn))


在方案B的基礎(chǔ)上進(jìn)行了優(yōu)化。提煉與流程相關(guān)的狀態(tài),按步驟顯示,每一步只顯示當(dāng)前需要關(guān)注的內(nèi)容,如圖:



狀態(tài)的提煉過程


1)整理每個(gè)單據(jù)的狀態(tài),理清關(guān)系



結(jié)合業(yè)務(wù)流程可以很明顯的注意到,單據(jù)只有通過了審核才能收款,只有收款才能進(jìn)行核銷。狀態(tài)是一種遞進(jìn)關(guān)系(審核 ?? 收款 ?? 核銷)。


2)結(jié)合財(cái)務(wù)人員的工作流,提煉出單據(jù)的以下幾種狀態(tài),之前存在到問題(表格中單行數(shù)據(jù)的操作不一致),也得到了完美的解決。如圖:



2.2功能區(qū)按鈕設(shè)計(jì)


1)按鈕的表現(xiàn)形式


建議在復(fù)雜系統(tǒng)設(shè)計(jì)中使用圓角矩形的按鈕樣式。


理由如下:

a.人眼處理圓角更容易(認(rèn)知負(fù)荷說)


Jürg N?nni(Visual Perception的作者)表示,視網(wǎng)膜中區(qū)處理正圓形的時(shí)候是最快速的,而處理邊邊角角的時(shí)候則比較費(fèi)力,大腦處理的速度也較慢。于是,長得圓潤的圓角矩形相較于一般矩形,對于使用者來說就容易接納許多。


Barrow Neurological Institute (巴羅神經(jīng)病學(xué)研究)的研究也顯示,一個(gè)物體的顯著度與邊角的角度呈線性變化,銳角相較于鈍角要顯得更明顯突出。換句話說,角度越尖銳,物體就看起來越明亮;而越明亮的物體就越難以直視。



如上圖所示角度越尖銳,看起來越顯眼,在視覺上也比較令人感到明亮,不適,大腦的認(rèn)知符合也越高。


b.使相似的內(nèi)容更容易被區(qū)別


舉個(gè)例子,如下圖所示,即便間距相同,B 排的圓角矩形辨識度還是明顯比A 排的矩形高。



這是為什么呢?

首先,第一眼看過去的時(shí)候,A 排的矩形整體是連在一起的,中間找不到斷點(diǎn)。而B 排矩形,因?yàn)橛袌A角的關(guān)系,所以斷點(diǎn)很明顯。



其次,兩種矩形的視覺聚焦:A 排由于直角的關(guān)系,視覺聚焦向外推,整體的效果比較發(fā)散。這會使得第一眼看過去的時(shí)候,容易分不清楚哪一條邊框?qū)儆谀囊粔K矩形。反之B 排因?yàn)閳A角收攏的關(guān)系,視覺聚焦向中心推,區(qū)塊就比較容易區(qū)別開來。



綜上所示,圓角矩形是非常有效率的容器,在復(fù)雜場景業(yè)務(wù)中(存在很多種功能型按鈕),按鈕采用圓角矩形樣式最提效。


這里要注意,圓角不是越大越好


在相同面積中,按鈕的可操作區(qū)域隨著圓角的增大而遞減,因此在同等尺寸下的按鈕中,小圓角的按鈕明顯比大圓角的按鈕更容易操作。


同時(shí)在實(shí)際業(yè)務(wù)中,按鈕常常被當(dāng)作原子與下拉框聯(lián)動(dòng)組成下拉菜單控件。如若使用半圓按鈕則無疑增加了下拉框的設(shè)計(jì)難度并且匹配起來也會略顯突兀。



2)批量操作按鈕的位置思考


來看個(gè)舉個(gè)例子(針對財(cái)務(wù)中臺批量操作的優(yōu)化方案)


現(xiàn)存問題




方案A  信息前置


批量操作按鈕全部展開不做折疊處理,信息前置來降低認(rèn)知成本,方便用戶記憶。



討論結(jié)果:對于復(fù)雜業(yè)務(wù)來說,會有很多批量操作功能,按鈕很多,造成頁面擁擠,進(jìn)而影響用戶操作體驗(yàn);一個(gè)位置出現(xiàn)2個(gè)主按鈕樣式,不推薦。


方案B 沉浸式操作體驗(yàn)


對于一開始不可用的批量操作按鈕進(jìn)行隱藏,勾選激活狀態(tài),顯示在篩選區(qū)。



討論結(jié)果:方案B的阻斷性強(qiáng) — 無法兼顧批量操作和數(shù)據(jù)篩選功能,無法滿足復(fù)雜系統(tǒng)的場景操作。


方案C 上內(nèi)容下操作,前2個(gè)方案的優(yōu)化 


不做隱藏,類灰布置于底部。勾選觸發(fā)操作條件,未做勾選時(shí),用戶點(diǎn)擊時(shí)給出引導(dǎo)操作提示



為什么選擇方案C?理由如下:


首先,根據(jù)古騰堡原則,用戶的在做表格操作的時(shí)候,視覺流是左做到右,從上到下,方案A和方案B的視覺落腳點(diǎn)在表格的上方,顯然是不符合眼動(dòng)規(guī)律的。



其次,批量操作的功能屬于財(cái)務(wù)中臺的核心功能點(diǎn),隱藏不是第一選擇,而是類置灰的特除處理(在按鈕旁給提示信息)


2.3表頭設(shè)計(jì)


表頭在能夠概括的情況下,盡量簡練、準(zhǔn)確,一般可根據(jù)上下文關(guān)系來進(jìn)行減短簡化,以達(dá)到節(jié)省表格頭部空間和減輕視覺壓力的作用,讓用戶注意力聚焦在數(shù)據(jù)本身。如果精簡后的生僻字段難以自我解釋,可以跟一個(gè)釋義標(biāo)識,鼠標(biāo)懸停時(shí)出現(xiàn)該字段的詳細(xì)解釋,同時(shí)滿足新手用戶、普通用戶以及專家用戶的需求。



2.4表體設(shè)計(jì)


1)數(shù)據(jù)對齊方式


在數(shù)據(jù)的對齊方式上,有以下3個(gè)建議:

a.文本左對齊

b.數(shù)字右對齊

c.表頭與信息內(nèi)容對齊方式一致


文本左對齊,符合正常的心智模型(閱讀習(xí)慣從左到右);表頭與內(nèi)容對齊一致,則是為了簡化和降低視覺噪音,以便更好的獲取數(shù)據(jù)信息。數(shù)字右對齊,有利于數(shù)據(jù)間的對比。


要注意的一個(gè)細(xì)節(jié),例如,當(dāng)列數(shù)=2的時(shí)候,由于列與列直接的間距過大,導(dǎo)致兩者的關(guān)聯(lián)性較弱,如圖:



這時(shí)又該如何處理?

為了增強(qiáng)列與列之間的相關(guān)性,當(dāng)鼠標(biāo)hover在行的時(shí)候,產(chǎn)生高亮。這種方式可能不是最優(yōu)的,但目前只能想到這種方法,如果讀者有更好的想法歡迎留言。



2)數(shù)字的字體選擇


建議選用:Helvetica Neue、Helvetica、Arial、sans-serif.


蘋方在數(shù)字字符上,不同數(shù)字寬度不一致,導(dǎo)致千位分隔符不在一條線上。而Helvetica Neue數(shù)字等寬,千位分隔符有序的排列在一條線上。所以,選擇Helvetica Neue作為數(shù)字字體的首選字體。數(shù)值上下對比的時(shí)候,相同位置的數(shù)字在同一條豎線上,更加容易對比。



3)對操作項(xiàng)進(jìn)行“解耦”處理


在財(cái)務(wù)中臺系統(tǒng)中,常常由于權(quán)限的不同或者單據(jù)狀態(tài)不同這兩種原因,使得每行的數(shù)據(jù)擁有不同的操作項(xiàng),如下圖所示:



存在的問題:


  • 當(dāng)信息過載,操作項(xiàng)這個(gè)list非常長的話,頁面將會非常擁擠;

  • 文字按鈕因?yàn)橐曈X特征比較明顯,造成了不必要的分散注意力;

  • 誤操作率相對較高,同樣因?yàn)楸砀窨臻g有限,當(dāng)操作區(qū)非??拷?,很容易一不小心就點(diǎn)錯(cuò)了。


針對這個(gè)問題所出的解決方案,如下:


方案A 下拉框樣式



討論結(jié)果:下拉框中可能存在不同操作,同樣避免不了誤操作這個(gè)問題。


方案B 錯(cuò)位顯示




討論結(jié)果:首先,這樣的設(shè)計(jì)浪費(fèi)大量的屏幕空間;其次,浪費(fèi)開發(fā)工作量!因?yàn)樵诹斜碇袑?shí)現(xiàn)一系列權(quán)限判斷和操作,在詳情界面中往往還需要再開發(fā)一次相同的權(quán)限判斷和操作;再次,不同單據(jù)可能存在操作順序不一樣,上下移動(dòng)鼠標(biāo)會存在不同操作,用戶代價(jià)非常高。


方案C  以不變應(yīng)萬變


回歸『一個(gè)界面一個(gè)用戶任務(wù)』的原則,列表中的單行數(shù)據(jù)只保留[查看]或[管理]操作,所有其它的單獨(dú)操作都去往該單據(jù)的詳情界面完成。





討論結(jié)果:從開發(fā)的角度上看,此方案界面高度解耦,功能迭代方便,節(jié)約開發(fā)工作量;從認(rèn)知成本上看,列表界面操作高度一致性,利于養(yǎng)成用戶習(xí)慣;從操作效率上看,在詳情頁用戶會明顯確認(rèn)目標(biāo)單據(jù),幾乎不會誤操作; 同時(shí)此方案節(jié)約了大量屏幕空間,更有利于用戶對信息的獲取;


4)關(guān)于表格中套表格的解決方案


場景:在財(cái)務(wù)中臺中,有這樣一種用戶,需要對表格內(nèi)的數(shù)據(jù)進(jìn)行對比并編輯。

來看看之前的頁面:



這樣處理的不足點(diǎn):


  • 1.在查看和編輯信息時(shí),無效的信息太多。降低了獲取信息的效率;

  • 2.切換單條數(shù)據(jù)時(shí),頁面出現(xiàn)跳動(dòng),無法快速檢索到相對應(yīng)的信息;


對此,在3.3.2版本中,我們對其做了相應(yīng)的優(yōu)化。運(yùn)用側(cè)視圖(快速視圖)的方式來呈現(xiàn)信息。一旦選擇一個(gè)單據(jù),它就會從側(cè)面彈出的。



這個(gè)方案,它可以保持上下文,易于使用,即使是在垂直滾動(dòng)視圖中顯示大量字段的情況下也效果良好。同時(shí)信息呈現(xiàn)的地方是固定的,利于檢索,查找。


5)行高的制定方法


開始之前首先明確一下開發(fā)是怎么實(shí)現(xiàn)行高的。



從上圖可以看出,開發(fā)在實(shí)現(xiàn)設(shè)計(jì)稿時(shí),通常是按照行高來寫的。


因此,表格行高=文字行高+上下間距。其中,文字行高可以設(shè)定為字號的1.2~1.8倍,上下間距可以設(shè)定為字號的1~1.5倍。


行高影響每行信息的易讀性。除了上述的做法外,還有以下2種做法,來保證各場景下獲取信息的效率與易讀性。


做法1:不同分辨率使用不同行高


設(shè)計(jì)兩套不同的行高,在大分辨率下顯示較高的行高,給數(shù)據(jù)間提供更多呼吸的空間;在小分辨率下顯示較小的行高,使一屏內(nèi)可以看到更多的行高。Gmail就是這樣設(shè)計(jì)的,如下圖所示:



做法2:自定義行高


自定義行高為興奮需求,可以提高用戶的用戶體驗(yàn)。所以我們可以視表格的具體情況來設(shè)計(jì)設(shè)置行高的形式,可以放置在設(shè)置按鈕里,也可以在外部按鈕較少的情況下展示出來。



2.5底欄設(shè)計(jì)


最后是表格的底欄,底欄也是不可缺少的一部分,承載的作用主要是告訴用戶數(shù)據(jù)條數(shù)以及當(dāng)前位置。分頁的設(shè)計(jì)是根據(jù)不同的場景進(jìn)行選擇最優(yōu)的設(shè)計(jì)方案。在不需要定點(diǎn)跳轉(zhuǎn)的場景,建議建議刪除跳頁,刪除多于的功能,使頁面簡潔、清爽。

                          

3、其他設(shè)計(jì)細(xì)節(jié)


3.1 空白單元格的處理


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

 

3.2減少圖形元素的使用


盡量減少視覺符號的使用,因?yàn)橐曈X符號可能會使你的用戶界面復(fù)雜,產(chǎn)生難以理解的內(nèi)容。去除不必要的視覺干擾,例如不必要的圖標(biāo)、無規(guī)律的色彩等。



3.3省略 (氣泡展示位置)


當(dāng)列表中數(shù)據(jù)過長時(shí),我們需要根據(jù)屏幕寬度調(diào)整列表展示方式,超過列表默認(rèn)寬度的內(nèi)容可以省略,通常用...表示,鼠標(biāo)移入后出現(xiàn)氣泡展示全部內(nèi)容。


位置:建議展示在上方,因?yàn)槲覀兊拈喿x順序是從上到下,鼠標(biāo)向下移動(dòng)時(shí)不會被上面的氣泡遮擋住。氣泡面積不宜過大,根據(jù)屏幕尺寸控制在一定比例,一版不超過內(nèi)容區(qū)的四分之一,展示不下的內(nèi)容可以在氣泡中增加滾動(dòng)條。




4、后記


感謝閱讀!本文結(jié)合了實(shí)際項(xiàng)目經(jīng)驗(yàn)對表格設(shè)計(jì)做了一次總結(jié),在具體項(xiàng)目中,你可能需要根據(jù)產(chǎn)品特性和用戶需求進(jìn)行調(diào)整。如果你還有什么好的想法和建議,可以在評論里留言討論。

文章來源:站酷     作者:Hi_Nick 

藍(lán)藍(lán)設(shè)計(jì)ssll180.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ù)

日歷

鏈接

個(gè)人資料

存檔