图十：mac系统软件浅色界面的斑马纹颜色一

Mac系统中例如itunes的界面的斑马纹，两者颜色的差异小于系统自身的界面，纯度相差3%，明度相差2%，两者同时混合作用。同时每一行的高度和内容相对比较统一，但每一行也有多列的现象。

图十一：mac系统软件浅色界面的斑马纹颜色二

Mac系统中的其他软件界面中出现的斑马纹分割，两者都是小界面，皆是明度的变化，左图颜色值的明度相差6%，且一行有多列现象，但列数相对大界面要少。中图颜色值的明度相差2%，只有单列，每一行内容相对集中。右图颜色值明度相差7%，纯度相差1%，每一行内容比较内容相对统一。

图十二：mac系统软件深色界面的斑马纹颜色二

Mac系统中斑马纹在深色界面中的表现，为imover与itunes为系统中的同类软件。两者的间隔颜色的差异小于系统自身的界面，纯度相差3%，明度相差2%，他们的间隔方式和itunes一模一样。每一行比较规整同样有多列现象。

图十三：Ipad app浅色界面的斑马纹颜色

Ipad上itunes播放器的界面，除了深浅颜色的分割，还增加了分割线的使用，两者的间隔颜色所以比较的适中，纯度相差1%，明度相差4%。每一行很内容统一，且有多列形式，同时每一行之间的底图空隙比较大。

图十四：Ipad app灰色界面的斑马纹颜色

Ipad上nytimes的界面，除了深浅颜色的分割，同样增加了分割线的形式，两者的颜色相差也很适中，纯度相差2%，明度相差2%。单行，每一行内容很多，但内容分布比较统一。

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

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