|
其實(shí)包括很多設(shè)計(jì)師在設(shè)計(jì)斑馬紋的時(shí)候，基本是自身的感覺，這個(gè)感覺是對(duì)整體色調(diào)和相關(guān)元素色調(diào)的分析后的主觀感受（包括我）。
同時(shí)斑馬紋的兩種顏色基本是兩個(gè)調(diào)性一致，顏色相似的兩個(gè)顏色。但我認(rèn)為不管是何種顏色的為基點(diǎn)調(diào)節(jié)的斑馬紋，他們之間的明暗值都會(huì)在一定范圍值之間。范圍值小了，則斑馬紋模糊不清起不到應(yīng)有的作用，范圍值大了，則跨越太大從而干擾到用戶對(duì)內(nèi)容的閱讀。
如何把唐僧的白馬畫成斑馬
尋找斑馬紋界面比較費(fèi)神，首先想尋找各個(gè)系統(tǒng)中的界面，其次尋找具有代表性的產(chǎn)品，因?yàn)樗麄兙哂邢鄬?duì)較高素質(zhì)的設(shè)計(jì)師，相對(duì)成熟的設(shè)計(jì)觀念，及相對(duì)完善的設(shè)計(jì)規(guī)范。
發(fā)現(xiàn)微軟的產(chǎn)品是基本不使用斑馬紋的，一般通過感覺和用戶進(jìn)行神交。而win系統(tǒng)中的一些其他軟件的斑馬紋設(shè)計(jì)基本來源于對(duì)蘋果的參考，但是否遵循一定的原則，就不得而知了。而蘋果的界面一旦出現(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)容相對(duì)比較統(tǒng)一，但每一行有多列的現(xiàn)象。
出處：Tencent CDC Blog
責(zé)任編輯：bluehearts
上一頁 泛泛而談界面中的斑馬紋設(shè)計(jì) [2] 下一頁 泛泛而談界面中的斑馬紋設(shè)計(jì) [4]
|
第 1 頁 
第 3 頁 泛泛而談界面中的斑馬紋設(shè)計(jì) [3]
