视觉设计:四大基本原则与配色知识

本文梳理了视觉设计上的四大基本原则(对比、重复、对齐、亲密性),以及颜色的一些基本知识。
(文中图片来自站酷)

对比

不要让页面上的元素太过相似,如果两个元素不同,那就让它们看起来差异更大些。

  • 要么一样,要么不同。相似而不同的元素会制造冲突。
  • 制造对比可以创造出精美的设计,营造强烈的视觉冲击感。
  • 颜色、字体、线宽、形状、空间都可以用来形成对比。

重复

颜色、形状、材质、空间关系、字体等,尽量重复使用,可以增加设计的条理性和统一性。

  • 通过重复使用元素,增强页面的趣味性和条理性。
  • 重复元素不一定完全相同,只是存在明确的关联。
  • 避免过多重复。

对齐

任何元素的位置都不应该是随意的,应该与另一个元素存在视觉联系,便于建立清爽和精巧的外观。

  • 不管是左对齐、居中还是右对齐,元素之间通过不可见的基线对齐,可以增加条理感。
  • 只使用一种对齐方式,一个页面上不要既存在左对齐又存在居中对齐或者右对齐。
  • 对齐规则可以被打破,但是需要是深思熟虑的设计。

亲密性

对应于格式塔原理中的接近性原理,应该让相关的元素拥有更近的距离,能让元素被识别为一组,可以建立页面的清晰结构。

  • 将页面中的元素尽量成组排布,组块明确的话也让用户更容易在页面上看到重点。
  • 相联系的要素用位置关系明确地标示出来。
  • 避免一个页面上有太多的孤立元素,会让页面显得杂乱。

色彩

色轮的基础是红、黄、蓝三原色。将三原色两两等量混合,就可以得到三间色。再对相邻色彩混合就可以得到第三色。于是形成一个有12种颜色的色轮。


  • 以上色轮的颜色是“色调”,也就是纯色。在色调上增加黑色可以形成一个暗色,增加白色可以形成一个亮色。
  • 颜色还可以分冷暖,包含红色或者黄色的为暖色,包含蓝色的为冷色。
  • RGB以红绿蓝为三原色,与自然光线的三原色不同的是,RGB用于描述显示器上的颜色,这些颜色显示器直接发光而不是由物体反射得来的。而印刷品一般使用CMYK颜色模型。

下面是一些常用的配色方案:

  • 色轮中相对立的颜色是互补色,可以分别作为主色与强调色,是较有活力的配色。
  • 三色组是色轮中彼此等距的三种颜色,一般会让人感到愉悦和协调。
  • 色轮上彼此相邻的颜色成为类似色,可以是两种或者三种,产生沉稳感。
  • 用一种色调及其相应的多种亮色和暗色,可以组成单色。
  • 冷色适合做背景色,暖色更有冲击力。如果搭配使用,暖色不宜用太多。
  • 可以以季节、官方主题色等为基准选择与之搭配的颜色。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • 本书讲了什么 复杂的设计原理在本书中凝炼为亲密性、对齐、重复和对比这4个基本原则。作者以简洁明快的风格,将设计所必...
    少穻阅读 2,088评论 0 14
  • 今日话题 在人数众多的社群里,你更倾向于帮助什么样的人 目前阶段,由于自认为个人含量金太低,所以一直处于向其他群友...
    礼小礼er阅读 126评论 0 0
  • 文/宁采儿 夜漫漫,星闪闪, 勾起我的相思索。 你是夜空中的一颗明星, 光彩而且耀眼; 虽然已别多年, 却依然对你...
    宁采儿阅读 266评论 2 1
  • 我开始明白有时候,有些东西你等也等不来。 奢望还抱着一线希望,残留着幻想空间的余地。 只是结果不要是粉碎的干干净净...
    握手言和做不到阅读 378评论 0 0