视觉设计的基本原则

导言：

首先感谢大家点进这个文章，本篇文章主要用于总结观看《用户体验设计100入门课》的学习成果，发上来的意义在于希望更多人了解到UX，为UX初学者和感兴趣的读者提供服务。本文将通过举例方式帮助大家理解UX的五大视觉原则。

一.基本概念

1. 用户体验

用户体验是指在用户使用产品的过程中建立起来的主观感受，即用户通过产品建立 起的主观心理感受。因此产品的用户体验好坏很大程度上是由用户的主观感受决定的。产品为用户所构建的用户体验，这种心理感觉不是短暂的，而是贯穿于产品生产到售后的始末的。

2. 用户体验设计

知道了用户感受和用户体验的定义后，我们来讲讲用户体验设计的概念。用户体验设计是指以用户为中心的一种设计手段，以用户需求为目标而进行的设计。用户体验设计是利用用户能接受或是较为喜爱的方式来进行互动，从而设计出真正符合用户需求的产品，产品口碑的好坏也与用户的心里感受息息相关。产品体验设计过程同样注重以用户为中心，因此用户体验的概念从产品开发的最早期就开始进入整个流程，并贯穿始终。

3. 感官体验

感官是感受外界事物刺激的器官，包括 眼 、 耳 、鼻、 舌 、 身 等。 大脑 是一切感官的 中枢 。眼睛是 视觉 ，耳朵是 听觉 ，鼻子是 嗅觉 ，舌头是 味觉 ，身体各个部位是 触觉 。人体的五大感官为人的生活提供了很多便利，除了熟知的五大感官外，还有另外的感觉系统在发挥着作用，比如保持身体的平衡，饥饿的感觉等，有约20多种感觉系统。用户的感官感受是用户体验的最直接的呈现方式，感官体验无时无刻不地发生在我们身上。而感官体验就是感官感受并经过大脑加工形成的心理感受。

二.五大视觉原则

1. 视觉重量（远近对比与大小对比）

视觉重量指同一图像不同位置给视觉带来的冲击重点不同，通常面积体积越大，越靠近视线或者占据视线面积越大的图形，越有“重量”，这种视觉重量主要用来突出重点，吸引用户的注意力，让用户关注你想让他们关注的东西。需要注意的一点是，视觉重量是相对的，所有的视觉原则都是将一个设计元素与它周边的元素进行对比而得到的。

那么如何增加视觉重量？方法大致有两种：远近和大小。先从远近来说，越靠近视线的东西越能抓人眼球，现实生活中，我们会注意离我们近的事物，忽略离我们远的事物。因此UX设计必须注重远近关系，将要突出的东西放在近处，这样做的好处不仅是能够突出重点，还能够使设计更加“立体”，更有“层次”，更加“真实”。如下图。

2. 颜色

选择适合的颜色是重要的视觉原则之一。任何产品在设计的过程中都离不开一个关键的造型要素，那就是色彩。产品的色彩在人机交互的过程中扮演着重要的角色，是提升产品用户体验最直观的手段之一。比如下图白纸上的黑点，即使它的面积没有白色面积大，但是你一眼就会看到它，这就是颜色带来的效果：强调突出主体，当然这也是其他视觉原则的共同功能。除了强调作用外，对于企业和品牌而言，产品的颜色选择和配色设计绝对不是盲目的，也并非当下“流行的”，而是“合适的”。为什么是“合适的”？因为颜色有亮色和暗色、深色和浅色、冷色和暖色的区分，想要达到宣传目的必须谨慎选择。以可口可乐为例子，如下图，大家一看到这个图估计都会跟可口可乐联想起来，因为红瓶可乐是可口可乐的标志，红色代表着可口可乐经典、活力、积极的品牌形象。因此，在用户心中塑造产品品牌形象也是颜色带来的视觉体验效果。

3. 重复与模式突破

视觉设计原则中有一条是：要创建各种模式，将用户的视线转移到重要的事物上——并尝试突破。从模式来说，视觉模式有很多种，比如将圆点围成圆圈，列成直线，这样直线和圆圈给人的感觉就完全不同了，这不仅更容易让人注意到，而且对于用户看得人来说，得知的信息也完全不一样，这就是模式。再从模式突破来说，还是比如有一条直线，直线的末端出现波浪，大家更会去关注波浪，原本对直线的认识可能从“硬”变“软”，因为波浪线更像绸带般柔软，这就是一种模式突破。

4. 线张力和角张力

    视觉张力指视觉作品在与受众的目光相触后，被其构图、色彩的美感所吸引，使受众有种不舍得将视线移开的感觉，心理自然将作品所传递的信息全部接受。与视觉冲击力相比，好似中国功夫中的内力与外力，在平面设计作品中，不同程度地作用于视觉而产生或延续、或收缩、或膨胀、或外射、或旋转之感觉。这种感觉来自于形内部与外部力的作用。我们视觉感知到的仅仅是形状中潜在的一种向某些方向上的聚集、散发或倾斜的力，它不是物理的力，而是视觉心理的力，是视觉活动不可缺少的内容之一。前面我们讲了色彩的美感，这里我们来讲讲构图的美感，主要包括线张力和角张力。先来讲线张力，线张力是指对根本不存在的一条线或一条“路径”的感知，我们的视线会跟随这条路径的走向，引导用户的视线，比如下图，我们就会更关注直线间的空缺处。再说说角张力，我们之前一直在说一条直线，而角张力是多条线组成的“形状”，如下图，很多个房子曲线排列而形成了旋涡状。

5. 排列方式与接近性

先从排列方式来说，不同的排列方式给用户的感觉不同，排列有序让人觉得规整，无序让人感觉凌乱，紧凑让人觉得关系紧密，疏散让人觉得疏离。最简单的例子就是头发，梳了跟没梳给人的感觉非常不同。但是过度的紧凑过着疏散也是不可取的，会让人觉得情绪紧张和空旷无物因此，我们在UX设计中不仅要注重排列选择，还必须注重排列的度。

再从接近性来说，两个事物之间的距离相近或者疏远会使人们感觉这两个事物相关或无关，这样的距离被称为“接近性”。通常我们让相关的元素离得近一些，无关的元素离得远一些，例如与同一个行为相关的标题、文本区域和按钮通常是设计在一起的，这样用户无需阅读任何东西就知道它们是相关的。

三.结语

到这里已经完成五大视觉原则的解释，五大视觉原则并不是彼此分离的，它们彼此促进，彼此补充，彼此完善。希望通过这篇文章可以让大家了解到UX的魅力之处。

（本文章部分，个人观点仅供参考）

参考文献：

[1] 通感在体验设计中的应用，孙宁娜、樊尚冰

[2] 基于感官体验的餐饮行业可设计服务触点的开发，徐小宁 （山东工艺美术学院，济南 250014）

[3] 基于用户体验的产品色彩定向设计方法，林晨晔 （上海第二工业大学，上海 201209）

视觉设计是针对眼睛功能的主观形式的表现手段和结果。与视觉传达设计的异同，视觉传达设计属于视觉设计的一部分，主要针对被传达对象即观众而有所表现，缺少对设计者自身视觉需求因素的诉求。视觉传达既传达给视觉观众也传达给设计者本人，因此深入的视觉传达研究已经关注到视觉的方方面面感受，称其为视觉设计更加贴切。

主要课程：广告设计、包装设计、标志设计、企业形象设计（CIS）、书籍装帧设计、网页设计、展示设计、二维动画、三维动画、三维造型、视频编辑、广告心理学、消费心理学、市场营销、工艺美术史、平面构成、色彩构成、立体构成、版面构成等。

对于视觉传达设计来说，一个成功的视觉流程设计，应能引导观者的视线按照设计者的意图，以合理的顺序、快捷的途径、有效的感知方式，去获取最佳信息。为此，它的设计原则应是：

1. 视觉流程的科学性。一个成功的视觉流程设计，应该符合人们认识过程的心理顺序和思维发展的逻辑顺序。

2. 视觉元素的可视性。为保障视觉运动的畅通、顺利，设计中的各种视觉元素应是目力所极，在知觉容量限度内的，视觉客体必须是可视的，要有一定强度的诉及力。视觉语言必须是易读的，各种信息的意义必须易于为人所理解，并具备相应的视觉环境。

说明文字的处理，特别要注意其可读性。字体、字型、大小比例、横竖位置、字距间都要认真推敲。字行的长短、段落的分配、段间段首的留空、标题的强调、篇章的安排、版面的划定，都要妥善计划。

3. 设计构成的策略性。根据不同的设计要求，视觉传达设计中的科学性、可视性、策略性应贯穿于视觉流程的始终，形成不同特点的构成形式。

资料来源：视觉流程设计(高等教育自学考试艺术设计专业通用教材)，作者：方新普,陆峰,孟梅林 著，合肥工业大学出版社

以上是 爱尚龙井 为你解答！ 祝大家考试顺利！

一、对比原则

1．大小的对比

大小关系是界面布局中最受重视的一项。一个界面中有许多区域，包括文字区、图像区、控制区等，它们之间的大小关系决定了用户对系统的最基本的印象。

2．明暗的对比

阴与阳、正与反、昼与夜等等的对比可使人感觉到日常生活中的明暗关系。明暗是色感中最基本的要素。利用这一对比可以通过将界面背景设计得暗一些，把最重要的菜单选项或图形设计得亮一些，来突出它的地位。明暗逆转时，背景与前景的关系就会互相变换。

3．粗细的对比

细字如果份量增多，粗字就应该减少，这样的搭配看起来比较明快。重要的信息常用粗体大字、甚至立体形式表现在画面上，这样再搭配激荡的音乐，就会使用户产生一种气魄感；而比较柔情的词汇，则选择纤细的斜体或倒影字体出现。

4．曲线和直线的对比

曲线富有柔和感、缓和感，直线则富坚硬感、锐利感。自然界中的线条皆由这两者协调搭配而成，故如果要加深用户对曲线的意识，就以一些直线来对比，也就是说，少量的直线会使曲线更引人注目。

5．水平线和垂直线

水平线给人以稳定和平静的感受，垂直线正好和水平线相反。垂直线表示向上伸展的活动力，具有坚硬和理智的意象，使界面显得冷静又鲜明。如果不合理地强调垂直性，界面就会变得冷漠僵硬，使人难以接近。将垂直线和水平线作对比处理，可以使两者的表现更生动，不但使画面产生紧凑感，还能避免冷漠僵硬的情况产生。

6．质感的对比

在艺术上，质感是很重要的形象要素，譬如弛感、平滑感、湿润感、凸凹感等等。质感不仅表现出情感，而且与这种情感融为一体。画面上的元素之间，可以采用质感的方式加强对比.

7．位置的对比

通过位置的不同或变化可以产生对比。例如在画面两侧放置某种物体，不但可以表示强调，同时也可产生对比。画面的上下左右和对角线上的四隅皆有力点存在，而在此力点处配置照片、大标题或标识记号等，便可显出隐藏的力量。因此在对立关系位置上，放置鲜明的造型要素，可显出对比关系，并使画面具有紧凑感。

8．多重比对

将上述各种对比方法，如曲线与直线、垂直与水平、锐角与钝角等，交叉或混合使用，进行组合搭配，就能制作出富有变化的画面。

二、协调原则

1．主与从

界面设计和舞台设计有类似的地方，主角和配角的表现关系就是其中一个方面。在画面上明确表示出主从关系是很正统的界面构成方法。如果两者的关系模糊，便会令人无所适从；相反，主角过强就会失去

动感，变成庸俗画面。

2．动与静

一座庭院中，有假山、池水、草木、瀑布等的配合，同样，在设计上也有动态部分和静态部分的配合。动态部分包括动态的画面和事物的发展过程，静态部分则常指界面上的按钮、文字解说、菜单等。在周边留出适当的空白以强调各自的独立性.

3．入与出

整个界面空间因为各种力的关系而产生动感，进而支配空间。入点和出点会彼此呼应、协调。两者的距离愈大，效果愈显著，而且可以充分利用画面的两端。不过入点和出点要特别注重平衡，必须有适当的强弱变化才好，若有一方太软弱无力就不能引起共鸣。 4.统一与协调

如果过份强调对比关系、空间预留太多或加上太多造形要素，则容易使画面产生混乱。要协调这种现象，最好加上一些共同的造形要素，使画面产生共同的风格，具有整体统一和协调的感觉。反复使用同形事物，能使界面产生协调感。若把同形的事物配置在一起，便能产生连续感。两者相互配合运用，能创造出统一与协调的效果。

三、平衡原则

画面是否平衡是非常重要的，达到平衡的一种作法是将画面在高度上分为三等分，图形的中轴落在下三分之一划分线上，这样可保持空间上的平衡。中心也是平衡的一个方面。在人的感觉上，左右有微妙的差异。人的视觉对从左上到右下的流向较为自然。

四、乐趣原则

1．比例

黄金分割点，也称黄金比例，是界面设计中非常有效的一种方法。在设计物体的长度、宽度、高度及其型式和位置时，如果能参照黄金比例来处理，就能产生特有的稳定和美感。 2．强调

在单一风格的界面中，加进适当的变化，就会产生强调的效果。强调可打破界面的单调感，使界面变得有朝气.

3．凝聚与扩散

我们的注意力总会特别集中到事物的中心部分，这就构成了视觉的凝聚。

4．形态的意象

由于计算机屏幕的限制，一般的编排形式总是以四边形为标准形，其他各种形式都属于它的变形。四角皆成直角，给人以很规律、表情少的感觉，其他的变形则呈现出形形色色的感觉.

5．规律感

具有共同印象的形状反复排列时，就会产生规律感。规律感在设计一个多媒体应用系统时，可以使用户很快地熟悉系统，掌握操作方法。

6．导向

依眼睛所视或物体所指的方向，使界面产生一种引导路线，称为导向。设计者在设计界面时，常利用导向使整体画面更引人注目,建立导向的最简单方法是直接画上一支箭头，指向希望用户关注的地方。

7．空白区

界面设计的空白量问题很重要，无论排版的平衡感有多好，读者一看界面的空白量就已给它打好分数了。没有空白区，就没有界面的美。空白的多寡对界面的印象有决定性的影响。

8．屏幕上字的大小

为了视觉的舒适感，呈现在电脑屏幕上最小并且清晰的中文字型应为16×16点阵字型的仿宋体。

一、对比

对比原则能够有效地突出界面中的主要元素，设计师可以选择在视觉界面中以大小对比、字体大小、粗细对比、疏密对比、曲直对比等形式来突出和强化主题，从而有效引起用户的关注。

二、均衡

均衡的效果更有利于带给用户更加和谐的视觉效果，各元素在布局上保持视觉重量的平衡和匀称，从而使视觉界面具有平衡感和稳定性。堆成是均衡的一种极端情况，平衡感和稳定性很强。

三、律动

如果想要对用户的视觉进行一定的引导，那么设计师就可以利用律动效果，但是这种律动是需要具有一定规律性的，研究表明，画面右上角更能吸引人的关注，而左下角对人的吸引力由其小。

四、视点

视点在一定意义上相当于焦点，构图的视觉中心是界面真正重要的内容，也是必须让用户了解的内容。视觉中心常常在画面中八分之五的地方，以此为基础进行视点构图，能更突出地表现视觉主题。

关于设计视觉构图要遵循哪些原则，环球青藤小编今天就和您暂时分享到这里了。如果您对网站设计、页面排版、图像处理方面比较感兴趣，希望分享的这篇文章可以给您的学习或工作提供帮助。如若您还想了解更多关于平面设计的素材及技巧等内容，可以点击本站的其他文章进行学习。