图十五：斑马纹延伸应运的颜色差异

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

将上述的结果进行总结用一个图标的形式来表达这个概念：

图十六：斑马纹使用参考表格

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

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

斑马 斑马 牵出来遛遛

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

图十七：微薄客户端的斑马纹在参考表格中的位置

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

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

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

转载：http://cdc.tencent.com/?p=2757

本文链接：http://www.blueidea.com/design/doc/2010/7888.asp　

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

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