|
圖十五：斑馬紋延伸應(yīng)運(yùn)的顏色差異
Iphone上的兩個特殊斑馬紋的應(yīng)用，在此不做比較，僅作參考。受限于單個底色的漸變形式，勢必會出現(xiàn)兩個內(nèi)容之間的線條分割，左圖每一行內(nèi)容比較統(tǒng)一，兩者顏色僅為明度變化相差8%。右圖的內(nèi)容和每一行高度并不是絕對的統(tǒng)一，兩者顏色比較平緩，純度相差3%，明度相差4%。
將上述的結(jié)果進(jìn)行總結(jié)用一個圖標(biāo)的形式來表達(dá)這個概念：
圖十六：斑馬紋使用參考表格
根據(jù)圖表中的描述：基本上的界面斑馬紋深淺的間隔落在了差別適中的區(qū)域（綠色），但也有落在差別弱化區(qū)域和差別增強(qiáng)區(qū)域（當(dāng)然適中區(qū)域中的點(diǎn)也是有分布傾向的），如果界面面積越大，每一行的內(nèi)容越多，且越不統(tǒng)一，同時每一行的高度的不一致也更強(qiáng)，每一行的列數(shù)也越多，同時又不借助其他的輔助元素，他們界面斑馬紋的顏色間隔就越大。反之亦然。
在此復(fù)述：斑馬紋的作用是將列表中每一行的內(nèi)容進(jìn)行區(qū)分，起到一種規(guī)整的作用。根據(jù)上述界面的分析，在一般情況下，僅使用顏色的“適中”間隔能滿足這一需求，但在實(shí)際情況中根據(jù)界面的面積，每一行內(nèi)容的復(fù)雜和統(tǒng)一程度，每一行的高度是否一致，每一行之間的留空多少，是否具有多列情況等諸多條件對這個“適中”進(jìn)行傾向的調(diào)整。同時界面的諸多條件不可能同時作用，存在相互增強(qiáng)和相互抵消的情況，需要通過設(shè)計(jì)師自身能力和界面本身的實(shí)際情況進(jìn)行判斷。
斑馬 斑馬 牽出來遛遛
最終把斑馬牽出來，對斑馬深淺的顏色做了一個分析，兩者間隔的點(diǎn)落在了差別適中的區(qū)域，同時靠近弱化區(qū)域的邊際。
圖十七：微薄客戶端的斑馬紋在參考表格中的位置
同時再來看看界面的實(shí)際情況，微博客戶端的界面應(yīng)該是一個中等面積的界面，每一行的內(nèi)容較多，雖然只有單列，但內(nèi)容非常的不一致，同時導(dǎo)致了每一行的高度非常的不統(tǒng)一。按照先前得出的結(jié)論，這樣的斑馬紋的顏色間隔顯然是有點(diǎn)太弱了，間隔的點(diǎn)應(yīng)該落在適中靠近增強(qiáng)邊際的區(qū)域。
再回過頭來看看用戶的反饋，驚嘆啊，驚嘆啊，群眾的眼睛果然是雪亮的。其實(shí)對斑馬紋的間隔增加3%我想就應(yīng)該能解決大家的問題，斑馬紋也能起到他應(yīng)有的作用，同時不會干擾到信息被順利的獲取。
好吧，斑馬，咱拉回去調(diào)一調(diào)，調(diào)一調(diào)。
轉(zhuǎn)載：http://cdc.tencent.com/?p=2757
本文鏈接：http://www.95time.cn/design/doc/2010/7888.asp 
出處：Tencent CDC Blog
責(zé)任編輯：bluehearts
上一頁 泛泛而談界面中的斑馬紋設(shè)計(jì) [4] 下一頁
|
第 1 頁 
第 5 頁 泛泛而談界面中的斑馬紋設(shè)計(jì) [5]
