泛泛而谈界面中的斑马纹设计(2)

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

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

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

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

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

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

图13 Ipad app浅色界面的斑马纹颜色

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

图14 Ipad app灰色界面的斑马纹颜色

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

图15 斑马纹延伸应运的颜色差异

Iphone上的两个特殊斑马纹的应用，在此不做比较，仅作参考。受限于单个底色的渐变形式，势必会出现两个内容之间的线条分割，左图每一行内容比较统一，两者颜色仅为明度变化相差8%。右图的内容和每一行高度并不是绝对的统一，两者颜色比较平缓，纯度相差3%，明度相差4%。(图16)将上述的结果进行总结用一个图标的形式来表达这个概念：

图16 斑马纹使用参考表格

根据图表中的描述：基本上的界面斑马纹深浅的间隔落在了差别适中的区域(绿色)，但也有落在差别弱化区域和差别增强区域(当然适中区域中的点也是有分布倾向的)，如果界面面积越大，每一行的内容越多，且越不统一，同时每一行的高度的不一致也更强，每一行的列数也越多，同时又不借助其他的辅助元素，他们界面斑马纹的颜色间隔就越大。反之亦然。

在此复述：斑马纹的作用是将列表中每一行的内容进行区分，起到一种规整的作用。根据上述界面的分析，在一般情况下，仅使用颜色的“适中”间隔能满足这一需求，但在实际情况中根据界面的面积，每一行内容的复杂和统一程度，每一行的高度是否一致，每一行之间的留空多少，是否具有多列情况等诸多条件对这个“适中”进行倾向的调整。同时界面的诸多条件不可能同时作用，存在相互增强和相互抵消的情况，需要通过设计师自身能力和界面本身的实际情况进行判断。

斑马 斑马 牵出来遛遛

最终把斑马牵出来，对斑马深浅的颜色做了一个分析，两者间隔的点落在了差别适中的区域，同时靠近弱化区域的边际。(图17)

图17 微博客户端的斑马纹在参考表格中的位置

同时再来看看界面的实际情况，微博客户端的界面应该是一个中等面积的界面，每一行的内容较多，虽然只有单列，但内容非常的不一致，同时导致了每一行的高度非常的不统一。按照先前得出的结论，这样的斑马纹的颜色间隔显然是有点太弱了，间隔的点应该落在适中靠近增强边际的区域。

再回过头来看看用户的反馈，惊叹啊，惊叹啊，群众的眼睛果然是雪亮的。其实对斑马纹的间隔增加3%我想就应该能解决大家的问题，斑马纹也能起到他应有的作用，同时不会干扰到信息被顺利的获取。

好吧，斑马，咱拉回去调一调，调一调。

讨论：http://www.missyuan.com/viewthread.php?tid=477404