其实包括很多设计师在设计斑马纹的时候，基本是自身的感觉，这个感觉是对整体色调和相关元素色调的分析后的主观感受（包括我）。

同时斑马纹的两种颜色基本是两个调性一致，颜色相似的两个颜色。但我认为不管是何种颜色的为基点调节的斑马纹，他们之间的明暗值都会在一定范围值之间。范围值小了，则斑马纹模糊不清起不到应有的作用，范围值大了，则跨越太大从而干扰到用户对内容的阅读。

如何把唐僧的白马画成斑马

寻找斑马纹界面比较费神，首先想寻找各个系统中的界面，其次寻找具有代表性的产品，因为他们具有相对较高素质的设计师，相对成熟的设计观念，及相对完善的设计规范。

发现微软的产品是基本不使用斑马纹的，一般通过感觉和用户进行神交。而win系统中的一些其他软件的斑马纹设计基本来源于对苹果的参考，但是否遵循一定的原则，就不得而知了。而苹果的界面一旦出现列表时就肯定使用分割，但表现的方式略有差异，大界面基本使用双色斑马纹，小屏幕基本使用线条分割，这和google设计的产品思路如出一辙。因此搜寻的案例基本集中在苹果系统下的大屏幕界面。

斑马纹的深浅两种颜色根据整体色调和界面色彩搭配的习惯性给出一个使用的建议：

1．当界面的主色调为浅色的时候，斑马纹的浅色基本使用白色，斑马纹的深色以界面主色调为基准点保证色调的一致并进行调整。（图八左）

2．当界面的主色调为深色的时候，斑马纹的深色基本使用主色调一致的颜色，斑马纹的深色以界面主色调为基准点保持色调的一致并进行调整。（图八右）

图八：界面主色调影响下的斑马纹色彩基本样式

那我们来分析下界面斑马纹深浅两种颜色的范围值：

图九：mac系统界面的斑马纹颜色

Mac系统中本身的界面都采用此种深浅颜色的搭配，无论内容是否复杂，无论高度是否一致，在白色为基准下，两者之间的仅作纯度的变化，相差7%的间隔。同时每一行的高度和内容相对比较统一，但每一行有多列的现象。

出处：Tencent CDC Blog
责任编辑：bluehearts

上一页 泛泛而谈界面中的斑马纹设计 [2] 下一页 泛泛而谈界面中的斑马纹设计 [4]