视觉优化原理在线视频

再来说一说设计准则

设计很难有什么一致的标准

不像做数学题

1+1等于2

对就是对错就是错

那么对于设计呢

并不存在什么硬性的标准

所谓仁者见仁智者见智

一些人认为好的东西

另外一些人却未必喜欢

那么照这么说

设计准则的存在到底有没有什么用呢

答案当然是肯定的

如果你在网上搜一下

我们可以看到很多著名的设计准则

尽管他的表述不一

但都有一些相似之处

它们不是一个人随意杜撰的

那么这些准则大都是基于

认知心理学的研究成果

对提高界面的易用性

和对界面的评价十分的有帮助

在实践中

我们怎样运用这些设计准则

来思考设计问题呢

生搬硬套的做法肯定是行不通的

一些设计准则有时候还会自相矛盾

比如说输入银行的密码

这类对安全性要求比较高的输入

就不能太便捷

甚至为了防止被他人偷窥

还要变换数字位置

通过增加输入的难度

来提高它的安全性

因此呢要想用好设计准则

首先呢要理解

为什么会提出这些设计准则

遵循这些设计准则

对使用者会有哪些好处

当你理解后在具体运用的时候呢

就能进行有效的权衡和判断利弊

GUA图形用户界面的设计呢

可以说是新瓶装旧酒

那么许多视觉设计的原理和原则呢

是来源于传统的平面设计

界面设计和平面设计不同的地方呢

它是界面设计更强调

对交互和易用性的考虑

而不仅仅是对视觉信息的传达

和画面的美感

我们来讲一讲格式塔

视觉优化的原理

格式塔视觉优化原理呢

是为视觉设计提供了心理学的维度

那么这里讲的七条原理呢

是其中最常用的

第一条是接近性原则

那么它说的是人们感知图形的时候呢

会把距离相近的图形看成是一类

之所以这样呢是因为

人在感知复杂的世界的时候呢

会倾向于将它们进行简化

比如说这个图形

我们不会首先识别出

这是12个方块

而会认为这是三行

再细看呢

我们知道每一行是四个方块

再进一步3乘4等于12

我们会知道这有12个方块

所以这种感知上的简化机制呢

是能够帮助人们对外界

作出快速的反应

再看看这组图形

由于接近性原则在起作用

我们马上感知到

这是三组一样的图形

前面算过每组12个方块

因此呢我们可以做出推算

3乘以12等于36

这里一共有36个方块

那么这个原理在界面设计上呢

是经常使用到的

当许多信息聚在一起的时候

那么我们会感觉到混乱和复杂

而当文字呢

是以图形这种方式排列的时候呢

我们就会感觉到简洁和美观

相似性和接近性原则是相似的

这张图中所有图形距离都是一样的

只是形状不一样

那么我们就会把相同或者相似形状的图形

识别为一类

或者相同或接近的颜色

我们也会把它看成是一组

这两个原则呢还可以结合起来使用

让这种感知得到加强

在界面中通过搭配和调整色彩

形状 大小和距离等等这些元素呢

可以让界面显得更有层次

也更加美观

这就是接近性原则和相似性原则

共同起作用的结果

连续性呢是人们的一种本能的感知能力

人眼会把多个看到的对象呢

连接起来进行识别

这个连接呢可能是想象的

也可以是通过提示得到的

比如说这个IBM的标志

尽管被分割成很多线条

但仍然能够被我们识别出来

还有星座

人们会把分散的点呢

连成想象中的线来进行识别

在这组图中呢我们看到了

一个由蓝色方块组成的矩形

这幅图中我们看到了一条黄线

从蓝色圆点后面穿过

而不是被这个圆分成了两段

这是一个利用连续性原理的设计案例

广告牌上的标题呢是对抗艾滋病

分秒必争

牌子上仔细看是一个个小小的时钟

它们指示着不同的时间

那随着时钟的转动

它们的指针每天有两次

可以被拼成图示的这个文字

其余的时间呢则是一片混乱

文字的内容翻译过来就是

在非洲每隔12个小时

有超过2000名艾滋病患者

因为缺乏照料而死去

这个设计好就好在它是动态的

而且它的动态设计

是和时间以及希望传达的意义

之间有十分巧妙的联系

它比用静态文字对人们更有冲击力

也更能引发人们的同理心

界面设计中

运用连续性原理的设计有很多

比如这个首页设计

左侧的人像只有下半身

传达的信息却已经足够了

因为这个界面的主体是椅子

椅子对应的是人的下半身

这个不完整的人

既传达了坐的概念

又结合了人们想象的空间

并且把注意力呢

引向旁边的这把椅子

也更加贴切了网站的宣传语

这个宣传语就是

为了对办公女性提供良好的支持

这样的一种含义

构思是非常巧妙的

这是封闭性原则

我们可以看到左边的图中

有一个白色的三角形

而右边的这张图

我们可以看到

苹果上有一片白色的叶子

那这两个图的共同特点是

图形它是由敞开而分散的元素组成的

但是我们的视觉会倾向于

把它们感知为一个整体

而不是离散的碎片

那这条原理呢和连续性原理很相像

像这张图

照片后面的图我们尽管看不到

但是呢我们会识别为

被上面的图遮盖的完整的图片

那么看起来

像是多张图片堆叠的感觉

再看看这个例子

这个网站是英国某公司开发的

能源数字可视化网站

这棵树呢是由不同大小

不同颜色的圆组成的

圆的色彩代表了不同的能源

圆的大小显示了能源消耗的比例

它们围聚起来合成了一棵大树

可以直观地看到

不同能源使用的对比

还可以切换不同的年份

直观的看到不同年代

能源使用情况的变化

那么这个设计呢是采用了树的形象

把不同的年代

能源数据之间的关系都反映出来了

圆点的聚合给人们带来了对树的感知

又和绿色环保这个含义呼应

这一切的实现

正是利用了人的视觉感知特点

我们在观察对象的时候呢

倾向于把复杂的对象简单化

解析视觉图形时候

在多种的可能性当中呢

我们会倾向于把它识别为对称图形

比如这个例子

我们会识别为两个菱形上下重叠

而不是像中间那样

两个L形形状的拼接

或者是向右侧的那样

由两个L型和中间菱形的组合

在这几种可能性中

对称的两个菱形组合是最简洁的

这条原理呢可以解释为

为什么我们会将这样的二维图形

识别为三维图形

能以平面的方式来表达空间感

和立体感

那么就是这个原理在起作用

在重叠的对象中

我们的视觉倾向于把面积大的

视为背景

而面积小的视为主体

那么主体呢更吸引人们的注意

但是背景也会对我们的认知

施加一些影响

在界面设计中使用适当的背景

可以强化氛围或者是品牌

为不同的界面呢增加一致性

这个是某个品牌的手表营销网站

在产品的展示页

用深色的有透视感的照片做背景

为主体烘托了气氛

强调了怀旧的品牌格调

具有空间代入感

画面也更加透气

这个原理用在界面中

一些具有相同动作

比如说改变状态改变颜色

或者相似的操作行为

例如鼠标滑过时候

改变大小和颜色等等

我们都会认为对这些对象的操作

具有相同或相似的结果

例如我们在选择照片的时候

被选中的照片都会有相同的状态

这个时候我们执行的所有操作

我们会理解为

它是针对这些被选中的所有对象的