网页用户界面设计中斑马纹的应用(2)

斑马得皮肤病了

为什么会去尝试对斑马纹做个了解，其实是最近会收到这样的反馈：“斑马纹搞得我文字看不清啊！！！”“啊，这里原来还有颜色啊”“太不舒服了”……我对我的行为深深的陷入了自责，因为设计的结果把大家给激动坏了（当然我的出发点绝不是这样的）。好吧，那怎么办，调一调，调一调。我相信调节结果会有另一部分的人出来说“啊，好深啊，”“啊，好乱啊，看不清内容啦。”对于每一位用户的意见都是应该尊重的，当然通过一定的方式大家就不会对这个结果有太大的异议，也许是习惯，也许是淡忘，也许是出现更加激动的东西，也许还有其他什么我不知道的原因，但作为一名有良心的设计师，我决定对斑马纹的设计做一个泛泛的了解。

斑马你长的好奇怪啊。

我是个务实的人，问题的关键点在于斑马纹的两个颜色之间的色值差异。所以文章也仅仅是对这做一分析。

不同斑马纹从内容表达上都有他自身特定的含义。而从规整每一行的视觉角度出发，斑马纹和线条的分割是一个不错的选择，如果两者同时使用，未尝不可，但两个拳头同时发力，总是看的费力，用的也比较复杂。除非线条被用的很轻，好比两拳同时出击，其中一个虚晃一枪，仅为迷惑用，也其当好处。但在一行之中又有多列的情况，线条形式的缺点就会暴露无遗，显的条条框框局促不安，尤其在某些界面全屏的时候，内容却被用户舍不得用去几行，中国人省吃俭用的一面可见一斑。因此从视觉的简洁上看来斑马纹的深浅搭配是一种首选。

其实包括很多设计师在设计斑马纹的时候，基本是自身的感觉，这个感觉是对整体色调和相关元素色调的分析后的主观感受（包括我）。同时斑马纹的两种颜色基本是两个调性一致，颜色相似的两个颜色。但我认为不管是何种颜色的为基点调节的斑马纹，他们之间的明暗值都会在一定范围值之间。范围值小了，则斑马纹模糊不清起不到应有的作用，范围值大了，则跨越太大从而干扰到用户对内容的阅读。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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