超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

表格的UI交互模式指南

2011-11-21    藍(lán)藍(lán)設(shè)計的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計( m.miumiuwan.com )是一家專注而深入的設(shè)計機構(gòu) ,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 cs界面設(shè)計 、 ipad界面設(shè)計 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

許多人都認(rèn)同這樣一個現(xiàn)象:表格雖然是用戶界面設(shè)計中的一個重要部分,但是它們卻經(jīng)常會被忽視。表格應(yīng)該顯示讓用戶更易讀,更易掃視,更易比較的結(jié)構(gòu)化數(shù)據(jù),但在很多情況下,表格數(shù)據(jù)卻顯得模糊不清。這就是很多人不喜歡表格的原因。

用戶的日常工作經(jīng)常使用表格,但是誰會需要讓他們崩潰的東西呢。要改變這樣的現(xiàn)狀,下面給出一些使表格易用的指南。


行交替樣式Alternating rows styling

這是很明顯的,但是事實如此嗎?看看今天的WEB應(yīng)用,你就會發(fā)現(xiàn)很多并不適用。因此,行交替樣式并不明顯,這就是把他列為第一個來闡述的原因。

在數(shù)據(jù)較多的多行多列表格里用不同樣式交替顯示不同的行,這會提高用戶區(qū)分?jǐn)?shù)據(jù)的能力??梢圆捎帽尘吧蛘弑尘皥D片,如果采用背景色,背景顏色應(yīng)該比頁面顏色淺或者深一點。圖像背景應(yīng)該選擇和符合整體配色方案的圖片。也可以把背景色和背景圖組合應(yīng)用于表格邊框。表格的header和footer部分應(yīng)該易于識別,可以采用比表格行深或者淺的顏色。

 

BlinkCampaign的表格行采用了淺一點的亮綠色,header采用了稍微暗一點的綠色。

 點擊查看原圖

整行選擇Full row selection

如果需要對某一行的局部做操作,讓整行都可被單擊選中。這種做法增大了點擊區(qū)域減少了界面的混亂。一個應(yīng)用的實例是,每一行只有“查看詳情”可操作,鼠標(biāo)懸停到這一行的時候整行樣式都應(yīng)該不同。有好幾種方法可以實現(xiàn)這個效果,推薦jQuery插件的RowSelect 。

點擊查看原圖

CrazyEgg應(yīng)用了整行選擇的方法展開當(dāng)前選中行的詳情(稍后我們會談及該模式),鼠標(biāo)懸停的行會高亮顯示。我很喜歡他們對這塊區(qū)域以及其他的應(yīng)用的設(shè)計。


表格組節(jié)Table sections

當(dāng)你想把相關(guān)的行組合在一起的時候可以考慮使用表格組節(jié),組節(jié)把相關(guān)數(shù)據(jù)組合在一起,是表格的一部分。所有組節(jié)應(yīng)用同樣的列設(shè)置。舉個例子,在一個顯示國家列表的表格里,地區(qū)就是行組合的自然方式。所有的表格組節(jié)樣式要有差別,并且能夠收縮和展開。如果有需要,在每個組節(jié)里可以顯示數(shù)據(jù)概要。

點擊查看原圖
PulseApp用表格組節(jié)顯示一級和二級的收支詳情,每一級都可以再展開。


排序Sorting

如果不知道關(guān)鍵字,用戶需要從大數(shù)據(jù)量的表格里查詢某行時會很困難。用戶在比較相近信息的時候通常會對表格列進(jìn)行升降序排列。

對表格排序常用的是讓表格標(biāo)題可點擊。排序的列應(yīng)該有標(biāo)記,通常是在列標(biāo)題文字邊放置一個三角箭頭,指明當(dāng)前列的順序(升序或降序)。每次單擊順序會相反。

排序的列和不排序的列應(yīng)該有明顯區(qū)分。對某個重要列進(jìn)行默認(rèn)的排序。

TableSorter是個簡單易用的插件。該插件可以對多種類型數(shù)據(jù)進(jìn)行分類,你也可以自定義。該插件還支持多列排序,不過我對此不是很感冒。

點擊查看原圖

OneHub應(yīng)用清晰地標(biāo)明了排序的列和順序。我喜歡這個設(shè)計的原因是,即使是在如此小的區(qū)域,細(xì)節(jié)部分也做得很具體。

 


過濾 Filtering

當(dāng)有大量數(shù)據(jù)要處理的時候過濾就很有用。使用下拉列表,單選按鈕或者復(fù)選框進(jìn)行過濾選擇。 在下面的例子里, builditwith.me使用下拉列表來對用戶的職業(yè)興趣和當(dāng)前狀態(tài)進(jìn)行過濾。

然而這種過濾只能事先定義好過濾值。例如,你可以對工作類型按全職/兼職,設(shè)計/開發(fā)分類,你就不能按照姓/名來分類,因為這個值有無限多。在這種情況下可以應(yīng)用關(guān)鍵字對數(shù)據(jù)進(jìn)行過濾。輸入任意關(guān)鍵字會得到按照關(guān)鍵字進(jìn)行過濾的結(jié)果。

點擊查看原圖
Builditwith.me提供了好幾種過濾方式,每一種過濾方式有對應(yīng)的列表顯示。

 

分頁顯示Pagination

表格有大量數(shù)據(jù)的時候應(yīng)該采用分頁顯示。分頁很常見,但有時候效果并不好。分頁適用于搜索引擎,但是并不意味著在任何情況下都適用。

點擊查看原圖

Product Planner 采用了標(biāo)準(zhǔn)的分頁顯示,有頁碼數(shù)字,有上一頁下一頁。但是,你能告訴我第2頁是什么? 第3頁?當(dāng)然你不能。不用擔(dān)心,標(biāo)準(zhǔn)分頁可以得到改善。如下所示,通訊錄很龐大,他們使用了數(shù)字和字母來分頁。在這個例子里顯示所有的頁和隱藏頁一樣好。你可以以此類推應(yīng)用到其他條件相似的表格。如果表格以日期來分類,你可以以日期范圍來替代傳統(tǒng)的分頁數(shù)字(如第1頁可以寫成2.10-2.12,等等)

點擊查看原圖

如果這樣的分頁鏈接太寬,那就采用標(biāo)準(zhǔn)分頁(如上一個例子),同時在鼠標(biāo)懸停的時候顯示提示信息。

 

連續(xù)滾動Continiuos scrolling

與分頁相反,連續(xù)滾動是一種新型的數(shù)據(jù)顯示方式。這種方式不需要選擇特定的數(shù)據(jù)類型,新的數(shù)據(jù)被加到列表里。在加載的時候顯示進(jìn)度,如下例所示,在dzone.com里,進(jìn)度條顯示有多少項已經(jīng)被加載。

點擊查看原圖
這種方式的易用性和可用性需要進(jìn)行測試,以證明對你的用戶是否合適。你可以在 UI Patterns 里查看更多關(guān)于連續(xù)滾動的信息。

 

這種方式有一種變異版(或者說另外一種方式)。與不間斷的滾動顯示數(shù)據(jù)不同,在列表的最后,用戶可以選擇點擊更多按鈕瀏覽數(shù)據(jù)。Twitter就是這樣的一個好范例。

點擊查看原圖


固定表頭 Fixed table header

這是一個不錯的簡單技巧,你可以用它來保持表頭始終可見。 數(shù)據(jù)列表相當(dāng)龐大而復(fù)雜的時候,使用它可以幫助用戶區(qū)分多列。 FixedHeaderTable插件是一個很好的例子。

點擊查看原圖


不需要表頭Headerless table

如果表格數(shù)據(jù)可以自我解釋,表頭就可以不需要。email表格是一個好例子,email的主題,發(fā)送者,發(fā)送日期都是不言自明不會混淆的。當(dāng)然有的情況表頭是不能去掉的,例如有兩個不明確的日期,這時候你就需要定義一個表頭。

點擊查看原圖

Rivalmap公告欄是一個沒有表頭的好案例,表格里的數(shù)據(jù)一目了然而且格式固定,這種情況就不需要表頭了。


 

展開行Expandable rows

關(guān)于這種模式我寫過一篇文章,也建了一個可以輕松實現(xiàn)的jQuery小插件。 這種模式的關(guān)鍵點就是可以給表格增加更多相關(guān)信息功能。以BuySellAds為例,展開行顯示了出版商的廣告詳細(xì)信息,同時始終顯示主行里的重要信息。

點擊查看原圖


行的操作Row actions

對于海量數(shù)據(jù)來說,表格遠(yuǎn)比一個普通的占位符所能展現(xiàn)的多。表格內(nèi)可以進(jìn)行一些特定的交互操作??梢詫δ骋恍校ɑ蚨嘈校┻M(jìn)行操作。操作在行內(nèi)顯示,以鼠標(biāo)懸?;蛘卟藛蔚男问奖憩F(xiàn)出來。

行內(nèi)操作
把操作放在每一行數(shù)據(jù)的開頭或結(jié)尾,是個簡單方法。如下所示,Mixx把操作放在了每一行的末尾,這樣很容易進(jìn)行投票的操作。

點擊查看原圖

鼠標(biāo)懸停操作
如果有多重操作,可以采取鼠標(biāo)懸停操作方式,該方式是由行內(nèi)操作引申而來。鼠標(biāo)懸停和鼠標(biāo)離開分別顯示和隱藏操作,通過這種方式可以節(jié)省界面空間。Project Estimator by Astuteo 對每一行都有編輯和刪除操作,鼠標(biāo)懸停到某一行的時候則顯示操作按鈕圖標(biāo),離開則不顯示。

點擊查看原圖

菜單操作
如果每一行里都有多種操作,可以通過鼠標(biāo)懸?;蛘邌螕粜械臅r候顯示這些操作。DropBox通過一個二級菜單展示了每個文件的多種操作,有效地使用了這種方式。

點擊查看原圖

 

多行操作Actions on multiple rows
這種方式可以很好地讓用戶批量完成多行的操作。選中每一行前面的復(fù)選框,點擊批量操作鏈接或按鈕,用戶可以選中多行進(jìn)行操作。還是以DropBox為例,用戶可以選中多條文件,點擊菜單進(jìn)行批量操作。

選項提供全選和全不選功能。

點擊查看原圖

 

結(jié)束語

本文基本包括了常見的表格形式,并且輔以實例。建議閱讀另外兩篇關(guān)于表格的文章:Big Table issue試圖為龐大的表格找到能適應(yīng)視圖的方法;15 Tips for Designing Terrific Tables揭示了表格可以應(yīng)用的不同分層。

感謝Theresa Neil,Designing Web Interfaces的作者之一,你可以從她的書里看到表格的三種模式:行內(nèi)編輯,超寬表格和按列過濾。
 

分享本文至:

日歷

鏈接

個人資料

存檔