大家好，我叫斑馬紋

　　列表中使用兩種相同的樣式但顏色不同的背景，來間隔顯示的內(nèi)容。
　　當(dāng)然這個(gè)釋義我是借鑒《designing interfaces》來的，略有不同。我肯定承認(rèn)這是一本神作，不過看了當(dāng)下很多界面以及自身平時(shí)的設(shè)計(jì)之后，發(fā)現(xiàn)實(shí)際情況中使用的斑馬紋在原來基礎(chǔ)上通過視覺的處理有了擴(kuò)展，不僅僅是一深一淺單純顏色的配合使用。

圖一：最正宗的斑馬紋應(yīng)用

圖二：斑馬紋的延伸 – 內(nèi)容高度不一致的應(yīng)用

圖三：斑馬紋的延伸 – 增加線條的分割

圖四：斑馬紋的延伸 – 僅使用分割線

圖五：斑馬紋的延伸 – 單行顏色漸變形成的錯(cuò)落分割

圖六：斑馬紋的延伸 – 僅僅使用留空來分割（有一種神交的感覺）

什么時(shí)候你該披上我：

　　斑馬紋的使用是當(dāng)在列表中，各行的內(nèi)容（每一行中又有多行內(nèi)容）甚至有多列數(shù)據(jù)在視覺上很難區(qū)分，起到一種規(guī)整的作用。從而使用戶在閱讀每一行的單個(gè)甚至多列內(nèi)容時(shí)形成聯(lián)系。

　　有時(shí)候在帶有標(biāo)題的內(nèi)容時(shí)同樣使用深淺顏色作為區(qū)分，形成斑馬紋的效果。比如picasa的內(nèi)容區(qū)設(shè)計(jì)。當(dāng)然這是一種特例，但細(xì)心留意，卻也在被流行開來。

圖七：picasa的斑馬紋特殊用法

斑馬得皮膚病了

　　為什么會(huì)去嘗試對斑馬紋做個(gè)了解，其實(shí)是最近會(huì)收到這樣的反饋：“斑馬紋搞得我文字看不清?。。?！”“啊，這里原來還有顏色啊”“太不舒服了”……我對我的行為深深的陷入了自責(zé)，因?yàn)樵O(shè)計(jì)的結(jié)果把大家給激動(dòng)壞了（當(dāng)然我的出發(fā)點(diǎn)絕不是這樣的）。好吧，那怎么辦，調(diào)一調(diào)，調(diào)一調(diào)。我相信調(diào)節(jié)結(jié)果會(huì)有另一部分的人出來說“啊，好深啊，”“啊，好亂啊，看不清內(nèi)容啦?！睂τ诿恳晃挥脩舻囊庖姸际菓?yīng)該尊重的，當(dāng)然通過一定的方式大家就不會(huì)對這個(gè)結(jié)果有太大的異議，也許是習(xí)慣，也許是淡忘，也許是出現(xiàn)更加激動(dòng)的東西，也許還有其他什么我不知道的原因，但作為一名有良心的設(shè)計(jì)師，我決定對斑馬紋的設(shè)計(jì)做一個(gè)泛泛的了解。

斑馬你長的好奇怪啊。

　　我是個(gè)務(wù)實(shí)的人，問題的關(guān)鍵點(diǎn)在于斑馬紋的兩個(gè)顏色之間的色值差異。所以文章也僅僅是對這做一分析。

　　不同斑馬紋從內(nèi)容表達(dá)上都有他自身特定的含義。而從規(guī)整每一行的視覺角度出發(fā)，斑馬紋和線條的分割是一個(gè)不錯(cuò)的選擇，如果兩者同時(shí)使用，未嘗不可，但兩個(gè)拳頭同時(shí)發(fā)力，總是看的費(fèi)力，用的也比較復(fù)雜。除非線條被用的很輕，好比兩拳同時(shí)出擊，其中一個(gè)虛晃一槍，僅為迷惑用，也其當(dāng)好處。但在一行之中又有多列的情況，線條形式的缺點(diǎn)就會(huì)暴露無遺，顯的條條框框局促不安，尤其在某些界面全屏的時(shí)候，內(nèi)容卻被用戶舍不得用去幾行，中國人省吃儉用的一面可見一斑。因此從視覺的簡潔上看來斑馬紋的深淺搭配是一種首選。

　　其實(shí)包括很多設(shè)計(jì)師在設(shè)計(jì)斑馬紋的時(shí)候，基本是自身的感覺，這個(gè)感覺是對整體色調(diào)和相關(guān)元素色調(diào)的分析后的主觀感受（包括我）。同時(shí)斑馬紋的兩種顏色基本是兩個(gè)調(diào)性一致，顏色相似的兩個(gè)顏色。但我認(rèn)為不管是何種顏色的為基點(diǎn)調(diào)節(jié)的斑馬紋，他們之間的明暗值都會(huì)在一定范圍值之間。范圍值小了，則斑馬紋模糊不清起不到應(yīng)有的作用，范圍值大了，則跨越太大從而干擾到用戶對內(nèi)容的閱讀。

如何把唐僧的白馬畫成斑馬

　　尋找斑馬紋界面比較費(fèi)神，首先想尋找各個(gè)系統(tǒng)中的界面，其次尋找具有代表性的產(chǎn)品，因?yàn)樗麄兙哂邢鄬^高素質(zhì)的設(shè)計(jì)師，相對成熟的設(shè)計(jì)觀念，及相對完善的設(shè)計(jì)規(guī)范。

　　發(fā)現(xiàn)微軟的產(chǎn)品是基本不使用斑馬紋的，一般通過感覺和用戶進(jìn)行神交。而win系統(tǒng)中的一些其他軟件的斑馬紋設(shè)計(jì)基本來源于對蘋果的參考，但是否遵循一定的原則，就不得而知了。而蘋果的界面一旦出現(xiàn)列表時(shí)就肯定使用分割，但表現(xiàn)的方式略有差異，大界面基本使用雙色斑馬紋，小屏幕基本使用線條分割，這和google設(shè)計(jì)的產(chǎn)品思路如出一轍。因此搜尋的案例基本集中在蘋果系統(tǒng)下的大屏幕界面。

　　斑馬紋的深淺兩種顏色根據(jù)整體色調(diào)和界面色彩搭配的習(xí)慣性給出一個(gè)使用的建議：

　　1．當(dāng)界面的主色調(diào)為淺色的時(shí)候，斑馬紋的淺色基本使用白色，斑馬紋的深色以界面主色調(diào)為基準(zhǔn)點(diǎn)保證色調(diào)的一致并進(jìn)行調(diào)整。（圖八左）

　　2．當(dāng)界面的主色調(diào)為深色的時(shí)候，斑馬紋的深色基本使用主色調(diào)一致的顏色，斑馬紋的深色以界面主色調(diào)為基準(zhǔn)點(diǎn)保持色調(diào)的一致并進(jìn)行調(diào)整。（圖八右）

圖八：界面主色調(diào)影響下的斑馬紋色彩基本樣式

　　那我們來分析下界面斑馬紋深淺兩種顏色的范圍值：

圖九：mac系統(tǒng)界面的斑馬紋顏色

　　Mac系統(tǒng)中本身的界面都采用此種深淺顏色的搭配，無論內(nèi)容是否復(fù)雜，無論高度是否一致，在白色為基準(zhǔn)下，兩者之間的僅作純度的變化，相差7%的間隔。同時(shí)每一行的高度和內(nèi)容相對比較統(tǒng)一，但每一行有多列的現(xiàn)象。

圖十：mac系統(tǒng)軟件淺色界面的斑馬紋顏色一

　　Mac系統(tǒng)中例如itunes的界面的斑馬紋，兩者顏色的差異小于系統(tǒng)自身的界面，純度相差3%，明度相差2%，兩者同時(shí)混合作用。同時(shí)每一行的高度和內(nèi)容相對比較統(tǒng)一，但每一行也有多列的現(xiàn)象。

圖十一：mac系統(tǒng)軟件淺色界面的斑馬紋顏色二

　　Mac系統(tǒng)中的其他軟件界面中出現(xiàn)的斑馬紋分割，兩者都是小界面，皆是明度的變化，左圖顏色值的明度相差6%，且一行有多列現(xiàn)象，但列數(shù)相對大界面要少。中圖顏色值的明度相差2%，只有單列，每一行內(nèi)容相對集中。右圖顏色值明度相差7%，純度相差1%，每一行內(nèi)容比較內(nèi)容相對統(tǒng)一。

圖十二：mac系統(tǒng)軟件深色界面的斑馬紋顏色二

　　Mac系統(tǒng)中斑馬紋在深色界面中的表現(xiàn)，為imover與itunes為系統(tǒng)中的同類軟件。兩者的間隔顏色的差異小于系統(tǒng)自身的界面，純度相差3%，明度相差2%，他們的間隔方式和itunes一模一樣。每一行比較規(guī)整同樣有多列現(xiàn)象。

圖十三：Ipad app淺色界面的斑馬紋顏色

　　Ipad上itunes播放器的界面，除了深淺顏色的分割，還增加了分割線的使用，兩者的間隔顏色所以比較的適中，純度相差1%，明度相差4%。每一行很內(nèi)容統(tǒng)一，且有多列形式，同時(shí)每一行之間的底圖空隙比較大。

圖十四：Ipad app灰色界面的斑馬紋顏色

　　Ipad上nytimes的界面，除了深淺顏色的分割，同樣增加了分割線的形式，兩者的顏色相差也很適中，純度相差2%，明度相差2%。單行，每一行內(nèi)容很多，但內(nèi)容分布比較統(tǒng)一。

圖十五：斑馬紋延伸應(yīng)運(yùn)的顏色差異

　　Iphone上的兩個(gè)特殊斑馬紋的應(yīng)用，在此不做比較，僅作參考。受限于單個(gè)底色的漸變形式，勢必會(huì)出現(xiàn)兩個(gè)內(nèi)容之間的線條分割，左圖每一行內(nèi)容比較統(tǒng)一，兩者顏色僅為明度變化相差8%。右圖的內(nèi)容和每一行高度并不是絕對的統(tǒng)一，兩者顏色比較平緩，純度相差3%，明度相差4%。

將上述的結(jié)果進(jìn)行總結(jié)用一個(gè)圖標(biāo)的形式來表達(dá)這個(gè)概念：

圖十六：斑馬紋使用參考表格

　　根據(jù)圖表中的描述：基本上的界面斑馬紋深淺的間隔落在了差別適中的區(qū)域（綠色），但也有落在差別弱化區(qū)域和差別增強(qiáng)區(qū)域（當(dāng)然適中區(qū)域中的點(diǎn)也是有分布傾向的），如果界面面積越大，每一行的內(nèi)容越多，且越不統(tǒng)一，同時(shí)每一行的高度的不一致也更強(qiáng)，每一行的列數(shù)也越多，同時(shí)又不借助其他的輔助元素，他們界面斑馬紋的顏色間隔就越大。反之亦然。

　　在此復(fù)述：斑馬紋的作用是將列表中每一行的內(nèi)容進(jìn)行區(qū)分，起到一種規(guī)整的作用。根據(jù)上述界面的分析，在一般情況下，僅使用顏色的“適中”間隔能滿足這一需求，但在實(shí)際情況中根據(jù)界面的面積，每一行內(nèi)容的復(fù)雜和統(tǒng)一程度，每一行的高度是否一致，每一行之間的留空多少，是否具有多列情況等諸多條件對這個(gè)“適中”進(jìn)行傾向的調(diào)整。同時(shí)界面的諸多條件不可能同時(shí)作用，存在相互增強(qiáng)和相互抵消的情況，需要通過設(shè)計(jì)師自身能力和界面本身的實(shí)際情況進(jìn)行判斷。

斑馬 斑馬 牽出來遛遛

　　最終把斑馬牽出來，對斑馬深淺的顏色做了一個(gè)分析，兩者間隔的點(diǎn)落在了差別適中的區(qū)域，同時(shí)靠近弱化區(qū)域的邊際。

圖十七：微薄客戶端的斑馬紋在參考表格中的位置

　　同時(shí)再來看看界面的實(shí)際情況，微博客戶端的界面應(yīng)該是一個(gè)中等面積的界面，每一行的內(nèi)容較多，雖然只有單列，但內(nèi)容非常的不一致，同時(shí)導(dǎo)致了每一行的高度非常的不統(tǒng)一。按照先前得出的結(jié)論，這樣的斑馬紋的顏色間隔顯然是有點(diǎn)太弱了，間隔的點(diǎn)應(yīng)該落在適中靠近增強(qiáng)邊際的區(qū)域。

　　再回過頭來看看用戶的反饋，驚嘆啊，驚嘆啊，群眾的眼睛果然是雪亮的。其實(shí)對斑馬紋的間隔增加3%我想就應(yīng)該能解決大家的問題，斑馬紋也能起到他應(yīng)有的作用，同時(shí)不會(huì)干擾到信息被順利的獲取。

　　好吧，斑馬，咱拉回去調(diào)一調(diào)，調(diào)一調(diào)。

原文：http://cdc.tencent.com/?p=2757