2016-11-11 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
@董弈 :列表算是一個(gè)非?;A(chǔ)的設(shè)計(jì)元素,無非是一排一排的數(shù)據(jù)內(nèi)容,加上一些基本的操作。最近連續(xù)設(shè)計(jì)了一個(gè)禮拜的列表后,最直觀的感受是:再簡(jiǎn)單的東西,也有很多的細(xì)節(jié)需要思考。尤其對(duì)于很多數(shù)據(jù)產(chǎn)品和工具型產(chǎn)品,列表是非常重要的一部分,例如電子郵箱,文件系統(tǒng)(Google drive, dropbox)。一個(gè)信息結(jié)構(gòu)合理,操作明確表格、列表設(shè)計(jì),能夠幫助用戶減輕很多的閱讀負(fù)擔(dān)。這篇文章會(huì)分享一些列表設(shè)計(jì)中的基本思路。
大多數(shù)情況下,列表中的每一排是一個(gè)item,每一個(gè)item都會(huì)有一些基本的操作,例如刪除,編輯,查看詳情。網(wǎng)上有各種各樣的設(shè)計(jì)列表樣稿,但是總體來說,有以下幾種比較典型的操作設(shè)計(jì)方案。在真實(shí)的產(chǎn)品設(shè)計(jì)中,也常會(huì)有以下幾種方案的結(jié)合體出現(xiàn)。
這種方案一般比較適合各種各樣比較簡(jiǎn)單直觀的操作設(shè)計(jì),支持各種用戶不需要查看item detail,直接就可以根據(jù)列表上的信息做出快速的判斷并且高頻發(fā)生的操作。
Pros
Cons
這種方案將操作隱藏起來,比較適用于一些操作比較risk較高,操作非常多而導(dǎo)致無法再列表上完全顯示,或者操作不常發(fā)生的情況。
Pros
Cons
這種方案適用于用戶經(jīng)常需要多個(gè)文件進(jìn)行同時(shí)管理的情況。
Pros
Cons
目前google drive的列表, gmail, dropbox都是采用這樣的設(shè)計(jì),用戶可以對(duì)多個(gè)項(xiàng)目進(jìn)行批量操作。其中唯一的不同是,gmail需要用戶專門點(diǎn)擊checkbox,來選中某一行,而google drive和dropbox是直接點(diǎn)擊這一行就可以選中。我猜這樣的設(shè)計(jì)主要是因?yàn)閷?duì)于email來說,更多的use case是用戶查看詳細(xì)內(nèi)容,所以把最簡(jiǎn)單的操作(也就是點(diǎn)擊一整行)留給了這個(gè)行為,而點(diǎn)擊checkbox才可以選中這封郵件;然而對(duì)于文件管理系統(tǒng)來說,用戶更多的操作是對(duì)文章進(jìn)行管理,所以點(diǎn)擊行就可以選中整個(gè)文件。
列表的信息設(shè)計(jì),也就是table header的確定,在明白了用戶在這個(gè)頁(yè)面的主要目的之外,我會(huì)主要明確三點(diǎn):1)為了幫助用戶identify這個(gè)item必須要放的信息 2)可以方便用戶直接從列表頁(yè)面去的各個(gè)二級(jí)頁(yè)面的信息 3)其他需要強(qiáng)調(diào)的信息。把這些列出來之后,再根據(jù)真正的用戶需求進(jìn)行刪減。大部分的信息呈現(xiàn)都比較straightforward,其中有一點(diǎn)值得討論的是關(guān)于item status的展示。很多列表都會(huì)有各種各樣的status顯示:例如Gmail用字體粗細(xì)來顯示已讀和未讀,也有一些dashboard用tag+文字或者改變整行背景來直接表示不同的狀態(tài),有的會(huì)把status放在列表第一列,也有會(huì)把status放到中間。有的會(huì)把status抽象成icon,也有的是直接用文字呈現(xiàn)status。
不同的使用場(chǎng)景和用戶需求會(huì)對(duì)Status呈現(xiàn)有不同的需求。對(duì)于我而言,我一般會(huì)問自己三個(gè)問題:用戶來這個(gè)列表,對(duì)于status的glancibility有多強(qiáng)的需求,他們是否特別需要知道整個(gè)列表的overall performance?列表中有多少Status,是否都有well associated icon可以對(duì)接,還是需要自創(chuàng)icon去表示特定的狀態(tài)?用戶是否會(huì)在意某個(gè)特定的status,例如突然某個(gè)server down了,或者某個(gè)信息沒有發(fā)送成功?
一般來說,顏色可以解決glancibility的問題。給一整行增加背景顏視覺表達(dá)上,又強(qiáng)于單個(gè)status的顏色,可用于強(qiáng)調(diào)某個(gè)特定的狀態(tài)。(這樣的設(shè)計(jì),需要使用得非常謹(jǐn)慎,因?yàn)檫@個(gè)特殊狀態(tài)基本在第一時(shí)間吸引了用戶全部的注意力)
如果狀態(tài)比較少并且較為常規(guī)時(shí)(例如‘成功’和‘失敗’),可以直接用icon來表達(dá)。如果status比較特殊的話,用文字可以表達(dá)得更加清晰明確。
如果用戶在列表頁(yè)面更多的是做列表管理,那把狀態(tài)欄放在第一列是比較可行的。如果用戶主要是為了尋找某個(gè)特定的item,則可以把status放到中間,而把item name放在第一列。
Pagination:分頁(yè)來展現(xiàn)全部的列表項(xiàng)目。
Pros
Cons
Endless scroll:用戶觸底之后,頁(yè)面自動(dòng)顯示load more,然后呈現(xiàn)出更多信息。
總體來說,endless scroll在列表上適用的情況較少(至少我還沒想到~),因?yàn)榱斜硪话愣愿訌?qiáng)調(diào)邏輯性,并且需要定位具體的項(xiàng)目。
Pros
Cons
最近關(guān)于列表設(shè)計(jì)的思考就是這些。當(dāng)然還有很多其他的沒有涉及到,例如在列表中是否需要以及如何做in-table edit,列表和數(shù)據(jù)可視化的互動(dòng),如何區(qū)分列表的filter, search以及sort的功能。
下次有機(jī)會(huì)深入設(shè)計(jì)到這些的時(shí)候再來補(bǔ)充吧~
原文地址:zhuanlan.zhihu
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com