產(chǎn)品設(shè)計(jì)中關(guān)于表格設(shè)計(jì)的一些經(jīng)驗(yàn)分享
由于長時(shí)間主導(dǎo)后臺(tái)產(chǎn)品的設(shè)計(jì)服務(wù),表格的大量應(yīng)用,總結(jié)了些許經(jīng)驗(yàn),通過半個(gè)月的斷斷續(xù)續(xù)的整理歸納,希望對(duì)你有所幫助,歡迎閱讀!
表格應(yīng)用
表格,是一種常見的信息組織整理手段,常用于信息收集(展示)、數(shù)據(jù)分析、歸納整理等活動(dòng)中,在互聯(lián)網(wǎng)產(chǎn)品應(yīng)用中,非常適合于:
1.需要組織和展示大量信息數(shù)據(jù)
表格結(jié)構(gòu)簡單,分隔歸納明確,特別適合組織和展示大量的信息內(nèi)容,且易于用戶瀏覽和信息獲取。
2.當(dāng)信息數(shù)據(jù)需要進(jìn)行多種復(fù)雜操作時(shí)
需要對(duì)信息進(jìn)行排序、搜索、篩選、分頁、自定義選項(xiàng)等操作。
3.信息上下間的對(duì)比
表格的歸納與分類,使信息之間易于對(duì)比,便于用戶快速查詢其中的差異與變化、關(guān)聯(lián)和區(qū)別。
表格組成要素
表格的基本組成:標(biāo)題+表頭+單元格
標(biāo)題:表格信息內(nèi)容的整體概括;
表頭:表格信息的屬性分類或基本概括;
單元格:具體信息內(nèi)容的填充區(qū)域。
優(yōu)秀表格設(shè)計(jì)技巧
1.行與列
表格的組成,就是行與列的組合,行與列的變化,賦予了表格多樣性的特點(diǎn)。
行與列構(gòu)成了單元格的長與高,不同的長高會(huì)有疏密之分,充實(shí)與透氣之感。
根據(jù)目的及信息主體的不同,可通過行與列的顯隱變化,來更好的滿足信息的傳達(dá)。
隱藏了縱向的線,更加強(qiáng)調(diào)行的特性,使橫向信息更加連續(xù)通暢,則不強(qiáng)調(diào)縱向上下信息之間的對(duì)比;
顯現(xiàn)縱向的線,使上下行之間的信息增加了對(duì)比性。
2.對(duì)齊,高效的信息獲取方式
表格內(nèi)的信息通過對(duì)齊,會(huì)更加規(guī)范易理解,給用戶視覺上的統(tǒng)一感,且視線流動(dòng)順暢,能夠讓人快速的捕捉到所要的內(nèi)容。
文本信息左對(duì)齊,因?yàn)楝F(xiàn)代人的閱讀方式習(xí)慣從左到右,符合正常的心智;
數(shù)據(jù)信息右對(duì)齊,更加方便數(shù)字大小的直觀對(duì)比;
固定內(nèi)容居中對(duì)齊,更好的信息呈現(xiàn)及表格空間的節(jié)??;
表頭與信息內(nèi)容對(duì)齊方式一致,一致性以達(dá)到簡化,降低視覺噪音。
3.減少視覺噪音,有效傳達(dá)為本
信息內(nèi)容的有效傳達(dá)是表格的服務(wù)本質(zhì),就表格本身而言應(yīng)該是隱型的,減少用戶注意力,在保證整體結(jié)構(gòu)的基礎(chǔ)上,盡量減少或削弱所謂的視覺裝飾。
4.精簡表頭
表頭在能夠概括的情況下,盡量簡煉、準(zhǔn)確,一般可根據(jù)上下文關(guān)系來進(jìn)行減短簡化,以達(dá)到節(jié)省表格頭部空間和減輕視覺壓力的作用。
5.減少計(jì)算,為用戶多想一步
根據(jù)當(dāng)前數(shù)據(jù),并在歷史數(shù)據(jù)的基礎(chǔ)上給出差值、總計(jì)等處理性的結(jié)果,可以直達(dá)用戶所需即獲取信息的目標(biāo),從而減少用戶心算或者線下處理的麻煩。一般在數(shù)據(jù)對(duì)比中較常用到,通過當(dāng)前數(shù)據(jù)和歷史數(shù)據(jù)進(jìn)行比較,來獲得更多的直觀信息,例如股票的數(shù)據(jù)變化、音樂排行榜排名變化等。
6.空白數(shù)據(jù),由“-”填充
表格中經(jīng)常會(huì)出現(xiàn)空數(shù)據(jù)或無數(shù)據(jù)的情況,留白處理會(huì)給用戶造成一定的困惑和誤解,是系統(tǒng)沒有加載出來嗎?明智的做法,是用“-”來填充顯示。
7.視覺層級(jí)
可通過背景、放大、顏色等處理,icon圖標(biāo)的應(yīng)用,可使重要信息突出,不同功能模塊區(qū)分(例如:表頭與信息內(nèi)容)、活躍表格氛圍,增加視覺層次感等效果。
表格的操作交互
1.操作
對(duì)表格操作大體可分為顯性操作和隱形操作。顯性操作,指操作選項(xiàng)顯示在行內(nèi),直觀明顯;
隱形操作,當(dāng)鼠標(biāo)懸停時(shí)或勾選才顯示操作選項(xiàng),使界面簡潔明快,可減輕空間壓力,減少干擾。
2.排序,讓信息有序起來
可以讓無序信息內(nèi)容進(jìn)行有序排列,排序分為升序和降序,一般用在數(shù)據(jù)、時(shí)間、數(shù)量上。
3.搜索和篩選,查找更方便
在大量的表格信息中,一一查找猶如大海撈針,但通過關(guān)鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內(nèi)容。
4.固定表頭,一目了然
當(dāng)閱讀豐富且繁多的表格時(shí),由于屏幕有限,用戶不得不拖動(dòng)橫向或縱向滾動(dòng)條來閱讀信息,固定表頭,能過讓用戶明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思,固定表頭,也是一種界面友好性的體現(xiàn)。
5.分頁固定
若表格是分頁處理的,分頁會(huì)放在上部、下部或上下部均有,分頁固定省去了用戶需要翻到頂部或底部進(jìn)行操作的麻煩。
6.全選操作,效率加倍
若表格是分頁,在某些情況下全選則需要考慮分為單頁全選和整表全選,瀑布流式的加載則就不需要做區(qū)分了。
7.操作即反饋
當(dāng)鼠標(biāo)指針懸停在表格列或行時(shí),給予變化提示,特別在信息列數(shù)較多的情況下更為重要,能夠讓人捕捉到所在的位置,而不至于視覺上的錯(cuò)行,能夠降低人的心里壓力和增加掌控感。
8.根據(jù)所需提供相應(yīng)的自定義和設(shè)置
服務(wù)于企業(yè)應(yīng)用的數(shù)據(jù)表格,本身信息項(xiàng)目繁多,且需要滿足不同行業(yè)不同角色的需求,默認(rèn)表格一般會(huì)提供通用的字段指標(biāo),然后用戶可根據(jù)自身所需添加或調(diào)整系統(tǒng)所提供的其它字段指標(biāo)或進(jìn)行自定義操作,讓表格具有了彈性化的特征,以滿足個(gè)性需求。
總結(jié)
任何優(yōu)秀的表格,本質(zhì)上都是以用戶所需的角度去設(shè)計(jì)服務(wù),并有效的傳達(dá)信息內(nèi)容。
本文為作者@Wing Hu原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
表格-設(shè)計(jì)完全手冊,最新的版本發(fā)布在公眾號(hào):產(chǎn)品D,歡迎大家關(guān)注
表格-設(shè)計(jì)完全手冊,最新的版本發(fā)布在公眾號(hào):Int-PD,歡迎大家關(guān)注
請(qǐng)教一下,如果數(shù)據(jù)量很大,用分頁展示,這時(shí)候再排序是只排當(dāng)前頁的,還是排序所有內(nèi)容?
我現(xiàn)在接觸到的都是整個(gè)數(shù)據(jù)的重新排序,單頁排序的場景沒有碰到過,具體要結(jié)合你的業(yè)務(wù)和用戶排序的訴求
O(∩_∩)O謝謝
感謝分享,學(xué)習(xí)啦
麻煩問一下
如果涉及到多個(gè)數(shù)據(jù)都需要在表頭進(jìn)行排序,如金額和日期需要進(jìn)行排序,則這兩個(gè)數(shù)據(jù)的排序是獨(dú)立排序還是相互有影響的排序
獨(dú)立的,規(guī)則是:只執(zhí)行操作的那個(gè)
感謝分享,很受用!感謝!
干貨滿滿,這么詳細(xì)的匯總,特別實(shí)用。謝謝!
謝謝,很實(shí)用。 ??
實(shí)用的分享,最近在做面向企業(yè)的產(chǎn)品設(shè)計(jì),很有幫助
總結(jié)的很詳細(xì)! ??