熟妇九九区视频,aaaav在线,午夜福利三区,日韩无码第四页,午夜天堂精品久久久,一区二区三区美女福利,日日夜夜爽这里有精品,久久久久久久久999,一区二区三区久久久

表格-設計完全手冊

用戶頭像
杭州/產(chǎn)品設計師/9年前/7841瀏覽
表格-設計完全手冊

由于長時間主導后臺產(chǎn)品的設計服務,表格的大量應用,總結了些許經(jīng)驗,通過半個月的斷斷續(xù)續(xù)的整理歸納,希望對你有所幫助,歡迎閱讀!


表格應用

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


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

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


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

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


3.信息上下間的對比

表格的歸納與分類,使信息之間易于對比,便于用戶快速查詢其中的差異與變化、關聯(lián)和區(qū)別。


表格組成要素

表格的基本組成:標題+表頭+單元格


fd3457ecfaeea84a0d304f5077f4.jpg


標題:表格信息內(nèi)容的整體概括;

表頭:表格信息的屬性分類或基本概括;

單元格:具體信息內(nèi)容的填充區(qū)域。


優(yōu)秀表格設計技巧

1.行與列

表格的組成,就是行與列的組合,行與列的變化,賦予了表格多樣性的特點。
行與列構成了單元格的長與高,不同的長高會有疏密之分,充實與透氣之感。
根據(jù)目的及信息主體的不同,可通過行與列的顯隱變化,來更好的滿足信息的傳達。
隱藏了縱向的線,更加強調(diào)行的特性,使橫向信息更加連續(xù)通暢,則不強調(diào)縱向上下信息之間的對比;


ab2c57ecf723a84a0d304fd2e7f5.jpg


顯現(xiàn)縱向的線,使上下行之間的信息增加了對比性。


a34857ecf731a84a0e282b262791.jpg


2.對齊,高效的信息獲取方式
表格內(nèi)的信息通過對齊,會更加規(guī)范易理解,給用戶視覺上的統(tǒng)一感,且視線流動順暢,能夠讓人快速的捕捉到所要的內(nèi)容。
文本信息左對齊,因為現(xiàn)代人的閱讀方式習慣從左到右,符合正常的心智;
數(shù)據(jù)信息右對齊,更加方便數(shù)字大小的直觀對比;
固定內(nèi)容居中對齊,更好的信息呈現(xiàn)及表格空間的節(jié)?。?br>表頭與信息內(nèi)容對齊方式一致,一致性以達到簡化,降低視覺噪音。


ef1757ecf774a84a0e282bfb7e89.jpg


3.減少視覺噪音,有效傳達為本
信息內(nèi)容的有效傳達是表格的服務本質(zhì),就表格本身而言應該是隱型的,減少用戶注意力,在保證整體結構的基礎上,盡量減少或削弱所謂的視覺裝飾。


07e057ecf794a84a0d304fb655cd.jpg


4.精簡表頭
表頭在能夠概括的情況下,盡量簡煉、準確,一般可根據(jù)上下文關系來進行減短簡化,以達到節(jié)省表格頭部空間和減輕視覺壓力的作用。


354d57ecfbafa84a0d304f34e090.jpg


5.減少計算,為用戶多想一步

根據(jù)當前數(shù)據(jù),并在歷史數(shù)據(jù)的基礎上給出差值、總計等處理性的結果,可以直達用戶所需即獲取信息的目標,從而減少用戶心算或者線下處理的麻煩。一般在數(shù)據(jù)對比中較常用到,通過當前數(shù)據(jù)和歷史數(shù)據(jù)進行比較,來獲得更多的直觀信息,例如股票的數(shù)據(jù)變化、音樂排行榜排名變化等。


46d357ecf7e2a84a0d304f4325bf.jpg


6.空白數(shù)據(jù),由“-”填充

表格中經(jīng)常會出現(xiàn)空數(shù)據(jù)或無數(shù)據(jù)的情況,留白處理會給用戶造成一定的困惑和誤解,是系統(tǒng)沒有加載出來嗎?明智的做法,是用“-”來填充顯示。


692857ecf7fda84a0d304ff2385c.jpg


7.視覺層級
可通過背景、放大、顏色等處理,icon圖標的應用,可使重要信息突出,不同功能模塊區(qū)分(例如:表頭與信息內(nèi)容)、活躍表格氛圍,增加視覺層次感等效果。


47f257ecf81aa84a0d304f34d8cb.jpg


表格的操作交互

1.操作
對表格操作大體可分為顯性操作和隱形操作。顯性操作,指操作選項顯示在行內(nèi),直觀明顯;


3f4557ecf852a84a0e282b507992.jpg


隱形操作,當鼠標懸停時或勾選才顯示操作選項,使界面簡潔明快,可減輕空間壓力,減少干擾。


1ad657ecf897a84a0e282b80e3c7.jpg


dc0157ecf878a84a0d304f6f3795.jpg


2.排序,讓信息有序起來
可以讓無序信息內(nèi)容進行有序排列,排序分為升序和降序,一般用在數(shù)據(jù)、時間、數(shù)量上。


36ac57ecf8b1a84a0e282b4a2fd9.jpg


3.搜索和篩選,查找更方便
在大量的表格信息中,一一查找猶如大海撈針,但通過關鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內(nèi)容。


b98c57ecf8cca84a0d304f4575e8.jpg


4.固定表頭,一目了然
當閱讀豐富且繁多的表格時,由于屏幕有限,用戶不得不拖動橫向或縱向滾動條來閱讀信息,固定表頭,能過讓用戶明白當前單元格內(nèi)信息的屬性而不至于不知道該信息的意思,固定表頭,也是一種界面友好性的體現(xiàn)。


9f6157ecf8e2a84a0d304f99dcdd.jpg


5.分頁固定
若表格是分頁處理的,分頁會放在上部、下部或上下部均有,分頁固定省去了用戶需要翻到頂部或底部進行操作的麻煩。


ed5257ecf8fba84a0e282b483fa3.jpg


6.全選操作,效率加倍
若表格是分頁,在某些情況下全選則需要考慮分為單頁全選和整表全選,瀑布流式的加載則就不需要做區(qū)分了。


a1ca57ecf916a84a0e282b2f36e3.jpg


7.操作即反饋
當鼠標指針懸停在表格列或行時,給予變化提示,特別在信息列數(shù)較多的情況下更為重要,能夠讓人捕捉到所在的位置,而不至于視覺上的錯行,能夠降低人的心里壓力和增加掌控感。


0f8657ecf935a84a0e282b0bcc72.jpg


8.根據(jù)所需提供相應的自定義和設置
服務于企業(yè)應用的數(shù)據(jù)表格,本身信息項目繁多,且需要滿足不同行業(yè)不同角色的需求,默認表格一般會提供通用的字段指標,然后用戶可根據(jù)自身所需添加或調(diào)整系統(tǒng)所提供的其它字段指標或進行自定義操作,讓表格具有了彈性化的特征,以滿足個性需求。


338457ecf949a84a0e282b015b90.jpg



總結

任何優(yōu)秀的表格,本質(zhì)上都是以用戶所需的角度去設計服務,并有效的傳達信息內(nèi)容。



歡迎關注微信公共號:int-PD


9a7b57ecf97aa84a0e282b689129.jpg

63
舉報
|
134
分享
評論
用戶頭像
評論你的想法~
表情
喜歡TA的作品嗎?喜歡就快來夸夸TA吧!
推薦素材
你可能喜歡
大家都在看
登錄注冊
佛冈县| 深州市| 集安市| 工布江达县| 鹿邑县| 枞阳县| 闻喜县| 武宣县| 漠河县| 行唐县| 万盛区| 英超| 新田县| 体育| 繁昌县| 荆门市| 旬邑县| 通辽市| 庆云县| 霍山县| 霍邱县| 苏尼特左旗| 通州市| 垦利县| 鄂托克前旗| 东丰县| 陕西省| 洞口县| 东光县| 内黄县| 呼图壁县| 石渠县| 东港市| 长葛市| 蓝田县| 阳曲县| 南开区| 临潭县| 成都市| 黔江区| 拜泉县|