UI设计经验：泛泛而谈界面中的斑马纹设计.docx

UI设计经验：泛泛而谈界面中的斑马纹设计 INCLUDEPICTURE \d /uploads/allimg/160425/1442233B9-0.jpg \* MERGEFORMATINET  大家好，我叫斑马纹 列表中使用两种相同的样式但颜色不同的背景，来间隔显示的内容。 当然这个释义我是借鉴《designing interfaces》来的，略有不同。我肯定承认这是一本神作，不过看了当下很多界面以及自身平时的 HYPERLINK /ui/ \t /ui/jichu/_blank  HYPERLINK /ui/ \t /ui/jichu/_blank UI设计之后，发现实际情况中使用的斑马纹在原来基础上通过视觉的处理有了扩展，不仅仅是一深一浅单纯颜色的配合使用。 INCLUDEPICTURE \d /uploads/allimg/160425/1442232T3-1.jpg \* MERGEFORMATINET  图一：最正宗的斑马纹应用 INCLUDEPICTURE \d /uploads/allimg/160425/1442234B7-2.jpg \* MERGEFORMATINET  图二：斑马纹的延伸 – 内容高度不一致的应用 INCLUDEPICTURE \d /uploads/allimg/160425/1442232002-3.jpg \* MERGEFORMATINET  图三：斑马纹的延伸 – 增加线条的分割 INCLUDEPICTURE \d /uploads/allimg/160425/1442232H0-4.jpg \* MERGEFORMATINET  图四：斑马纹的延伸 – 仅使用分割线 INCLUDEPICTURE \d /uploads/allimg/160425/1442235I6-5.jpg \* MERGEFORMATINET  图五：斑马纹的延伸 – 单行颜色渐变形成的错落分割 INCLUDEPICTURE \d /uploads/allimg/160425/1442233P7-6.jpg \* MERGEFORMATINET  图六：斑马纹的延伸 – 仅仅使用留空来分割(有一种神交的感觉) 什么时候你该披上我： 斑马纹的使用是当在列表中，各行的内容(每一行中又有多行内容)甚至有多列数据在视觉上很难区分，起到一种规整的作用。从而使用户在阅读每一行的单个甚至多列内容时形成联系。 有时候在带有标题的内容时同样使用深浅颜色作为区分，形成斑马纹的效果。比如picasa的内容区设计。当然这是一种特例，但细心留意，却也在被流行开来。 INCLUDEPICTURE \d /uploads/allimg/160425/1442231F0-7.jpg \* MERGEFORMATINET  图七：picasa的斑马纹特殊用法 斑马得皮肤病了 为什么会去尝试对斑马纹做个了解，其实是最近会收到这样的反馈：“斑马纹搞得我文字看不清啊!!!”“啊，这里原来还有颜色啊”“太不舒服了”……我对我的行为深深的陷入了自责，因为设计的结果把大家给激动坏了(当然我的出发点绝不是这样的)。好吧，那怎么办，调一调，调一调。我相信调节结果会有另一部分的人出来说“啊，好深啊，”“啊，好乱啊，看不清内容啦。”对于每一位用户的意见都是应该尊重的，当然通过一定的方式大家就不会对这个结果有太大的异议，也许是习惯，也许是淡忘，也许是出现更加激动的东西，也许还有其他什么我不知道的原因，但作为一名有良心的设计师，我决定对斑马纹的设计做一个泛泛的了解。 斑马你长的好奇怪啊。 我是个务实的人，问题的关键点在于斑马纹的两个颜色之间的色值差异。所以文章也仅仅是对这做一 HYPERLINK /ui/ \t /ui/jichu/_blank UI设计分析。 不同斑马纹从内容表达上都有他自身特定的含义。而从规整每一行的视觉角度出发，斑马纹和线条的分割是一个不错的选择，如果两者同时使用，未尝不可，但两个拳头同时发力，总是看的费力，用的也比较复杂。除非线条被用的很轻，好比两拳同时出击，其中一个虚晃一枪，仅为迷惑用，也其当好处。但在一行之中又有多列的情况，线条形式的缺点就会暴露无遗，显的条条框框局促不安，尤其在某些界面全屏的时候，内容却被用户舍不得用去几行，中国人省吃俭用的一面可见一斑。因此从视觉的简洁上看来斑马纹的深浅搭配是一种首选。 其实包括很多设计师在设计斑马纹的时候，基本是自身的感觉，这个感觉是对整体色调和相关元素色调的分析后的主观感受(包括我)。同时斑马纹的两种颜色基本是两个调性一致，颜色相似的两个颜色。但我认为不管是何种颜色的为基点调节的斑马纹，他们之间的明暗值都会在一定范围值之间。范围