美文网首页设计原则
设计原则 IV - Contrast 对比

设计原则 IV - Contrast 对比

作者: qihuiyu | 来源:发表于2019-05-05 22:38 被阅读0次

    对比原则指的是,页面上的不同元素之间要有对比效果,而且对比必须强烈。如果两个项不完全相同,就应该使之截然不同。

    对比不但可以用来吸引眼球,还可以用来组织信息,清晰层级,在页面上指引读者,而且制造焦点。

    可以采用多种方式产生对比:比如大字体和小字体的对比,典雅的旧式体和加粗的无衬线现代体产生对比:细线与粗线的对比,冷色与暖色的对比,平滑材质和粗糙材质的对比,水平元素(如很长的一行文本)和垂直元素(如又高又窄的一列文本)的对比;间隔很宽的文本行与紧凑在一起的文本行形成对比;小图片与大图片的对比,等等。

    例子 4-1 新闻简报

    设计A 一份简介明快的新闻简报,但是对比过弱。 设计B 标题和子标题使用了一种更突出、更粗的字体。黑色条纹增强了对比。

    对比对于信息的组织至关重要,读者一眼看到文档就能立即理解文档的内容。

    例子 4-2 简历信

    设计A 平淡无奇的简历,对齐还有错误 设计B 红色强调了头像,标题

    字体对比是最容易实现的对比。此外,还可以利用线,颜色,元素之间的间隔,材质等形成对比。

    例子 4-3 字体对比

    在下图的改进设计中,标题与正文的对比更加强烈。 利用粗线进行另一种对比的方法。

    例子 4-4 新闻简报

    这个设计中除了字体对比外,水平方向的长题目与又高又窄的垂直列之间也存在一种对比

    例子 4-5 海报

    设计A 文字太长,看起来非常费劲 设计B 通过视觉元素的组合,对齐和重复标题原则重新安排了页面。标题和正文用不同的字体及粗细表示体现了对比

    例子 4-6 小张宣传单

    设计A 干净、简洁的设计 设计B 增大了标题字体,反色效果对比非常强烈

    例子 4-7 广告

    设计A 比较乏味的设计 设计B 标题的粗条纹强调,截取的一句话与其他形成了对比,同时重复性呼应标题。

    例子 4-8 名片

    设计A 对比有点不够 设计B 取消了淡紫色背景,增强了标题

    例子 4-9 海报

    设计A 彩带框强调了副标题,紫色色块强调了标题,灰绿色色块强调了联系方式,这些元素之间的对比能够让读者轻松地看出信息的结构 设计B 质朴的设计。小而优雅的字体和大面积空白之间的对比

    对比小结

    1)对比的根本目的一是增强页面的效果,二是有助于信息的组织。

    2)要实现有效的对比,两个元素不能类似,必须截然不同。

    3)可以通过:字体选择,线宽,颜色,形状,大小,空间等增加对比。对比是增加视觉效果最有意思也是最让人满意的方法。

    参考资料

    [1]Robin Williams, The Non-Designer's design book (4th Edition), Chapter 5. Contrast Principle.

    相关文章

      网友评论

        本文标题:设计原则 IV - Contrast 对比

        本文链接:https://www.haomeiwen.com/subject/jkvkoqtx.html