当前课程知识点：界面设计导论 > 第二章：GUI设计心法 > （3）视觉优化原理 > 视觉优化原理
再来说一说设计准则
设计很难有什么一致的标准
不像做数学题
1+1等于2
对就是对错就是错
那么对于设计呢
并不存在什么硬性的标准
所谓仁者见仁智者见智
一些人认为好的东西
另外一些人却未必喜欢
那么照这么说
设计准则的存在到底有没有什么用呢
答案当然是肯定的
如果你在网上搜一下
我们可以看到很多著名的设计准则
尽管他的表述不一
但都有一些相似之处
它们不是一个人随意杜撰的
那么这些准则大都是基于
认知心理学的研究成果
对提高界面的易用性
和对界面的评价十分的有帮助
在实践中
我们怎样运用这些设计准则
来思考设计问题呢
生搬硬套的做法肯定是行不通的
一些设计准则有时候还会自相矛盾
比如说输入银行的密码
这类对安全性要求比较高的输入
就不能太便捷
甚至为了防止被他人偷窥
还要变换数字位置
通过增加输入的难度
来提高它的安全性
因此呢要想用好设计准则
首先呢要理解
为什么会提出这些设计准则
遵循这些设计准则
对使用者会有哪些好处
当你理解后在具体运用的时候呢
就能进行有效的权衡和判断利弊
GUA图形用户界面的设计呢
可以说是新瓶装旧酒
那么许多视觉设计的原理和原则呢
是来源于传统的平面设计
界面设计和平面设计不同的地方呢
它是界面设计更强调
对交互和易用性的考虑
而不仅仅是对视觉信息的传达
和画面的美感
我们来讲一讲格式塔
视觉优化的原理
格式塔视觉优化原理呢
是为视觉设计提供了心理学的维度
那么这里讲的七条原理呢
是其中最常用的
第一条是接近性原则
那么它说的是人们感知图形的时候呢
会把距离相近的图形看成是一类
之所以这样呢是因为
人在感知复杂的世界的时候呢
会倾向于将它们进行简化
比如说这个图形
我们不会首先识别出
这是12个方块
而会认为这是三行
再细看呢
我们知道每一行是四个方块
再进一步3乘4等于12
我们会知道这有12个方块
所以这种感知上的简化机制呢
是能够帮助人们对外界
作出快速的反应
再看看这组图形
由于接近性原则在起作用
我们马上感知到
这是三组一样的图形
前面算过每组12个方块
因此呢我们可以做出推算
3乘以12等于36
这里一共有36个方块
那么这个原理在界面设计上呢
是经常使用到的
当许多信息聚在一起的时候
那么我们会感觉到混乱和复杂
而当文字呢
是以图形这种方式排列的时候呢
我们就会感觉到简洁和美观
相似性和接近性原则是相似的
这张图中所有图形距离都是一样的
只是形状不一样
那么我们就会把相同或者相似形状的图形
识别为一类
或者相同或接近的颜色
我们也会把它看成是一组
这两个原则呢还可以结合起来使用
让这种感知得到加强
在界面中通过搭配和调整色彩
形状 大小和距离等等这些元素呢
可以让界面显得更有层次
也更加美观
这就是接近性原则和相似性原则
共同起作用的结果
连续性呢是人们的一种本能的感知能力
人眼会把多个看到的对象呢
连接起来进行识别
这个连接呢可能是想象的
也可以是通过提示得到的
比如说这个IBM的标志
尽管被分割成很多线条
但仍然能够被我们识别出来
还有星座
人们会把分散的点呢
连成想象中的线来进行识别
在这组图中呢我们看到了
一个由蓝色方块组成的矩形
这幅图中我们看到了一条黄线
从蓝色圆点后面穿过
而不是被这个圆分成了两段
这是一个利用连续性原理的设计案例
广告牌上的标题呢是对抗艾滋病
分秒必争
牌子上仔细看是一个个小小的时钟
它们指示着不同的时间
那随着时钟的转动
它们的指针每天有两次
可以被拼成图示的这个文字
其余的时间呢则是一片混乱
文字的内容翻译过来就是
在非洲每隔12个小时
有超过2000名艾滋病患者
因为缺乏照料而死去
这个设计好就好在它是动态的
而且它的动态设计
是和时间以及希望传达的意义
之间有十分巧妙的联系
它比用静态文字对人们更有冲击力
也更能引发人们的同理心
界面设计中
运用连续性原理的设计有很多
比如这个首页设计
左侧的人像只有下半身
传达的信息却已经足够了
因为这个界面的主体是椅子
椅子对应的是人的下半身
这个不完整的人
既传达了坐的概念
又结合了人们想象的空间
并且把注意力呢
引向旁边的这把椅子
也更加贴切了网站的宣传语
这个宣传语就是
为了对办公女性提供良好的支持
这样的一种含义
构思是非常巧妙的
这是封闭性原则
我们可以看到左边的图中
有一个白色的三角形
而右边的这张图
我们可以看到
苹果上有一片白色的叶子
那这两个图的共同特点是
图形它是由敞开而分散的元素组成的
但是我们的视觉会倾向于
把它们感知为一个整体
而不是离散的碎片
那这条原理呢和连续性原理很相像
像这张图
照片后面的图我们尽管看不到
但是呢我们会识别为
被上面的图遮盖的完整的图片
那么看起来
像是多张图片堆叠的感觉
再看看这个例子
这个网站是英国某公司开发的
能源数字可视化网站
这棵树呢是由不同大小
不同颜色的圆组成的
圆的色彩代表了不同的能源
圆的大小显示了能源消耗的比例
它们围聚起来合成了一棵大树
可以直观地看到
不同能源使用的对比
还可以切换不同的年份
直观的看到不同年代
能源使用情况的变化
那么这个设计呢是采用了树的形象
把不同的年代
能源数据之间的关系都反映出来了
圆点的聚合给人们带来了对树的感知
又和绿色环保这个含义呼应
这一切的实现
正是利用了人的视觉感知特点
我们在观察对象的时候呢
倾向于把复杂的对象简单化
解析视觉图形时候
在多种的可能性当中呢
我们会倾向于把它识别为对称图形
比如这个例子
我们会识别为两个菱形上下重叠
而不是像中间那样
两个L形形状的拼接
或者是向右侧的那样
由两个L型和中间菱形的组合
在这几种可能性中
对称的两个菱形组合是最简洁的
这条原理呢可以解释为
为什么我们会将这样的二维图形
识别为三维图形
能以平面的方式来表达空间感
和立体感
那么就是这个原理在起作用
在重叠的对象中
我们的视觉倾向于把面积大的
视为背景
而面积小的视为主体
那么主体呢更吸引人们的注意
但是背景也会对我们的认知
施加一些影响
在界面设计中使用适当的背景
可以强化氛围或者是品牌
为不同的界面呢增加一致性
这个是某个品牌的手表营销网站
在产品的展示页
用深色的有透视感的照片做背景
为主体烘托了气氛
强调了怀旧的品牌格调
具有空间代入感
画面也更加透气
这个原理用在界面中
一些具有相同动作
比如说改变状态改变颜色
或者相似的操作行为
例如鼠标滑过时候
改变大小和颜色等等
我们都会认为对这些对象的操作
具有相同或相似的结果
例如我们在选择照片的时候
被选中的照片都会有相同的状态
这个时候我们执行的所有操作
我们会理解为
它是针对这些被选中的所有对象的
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
