当前课程知识点：界面设计导论 > 第三章：界面设计元素 > （3）视觉设计原则 > 视觉设计原则
Luke说
所有交互产生于最终的界面
也就是说界面的最终视觉设计
对用户体验起到了决定性的作用
那视觉设计要注意哪些方面呢
我在这里列举了六个要点
首先我们说说层次
界面的布局设计呢
首先要体现的就是视觉层次
有层次的版面对视觉具有引导性
也更容易阅读
不同的视觉层次呢
能体现出作者对内容布局的思考
把重要的信息和次要的信息
在视觉上进行区分
可以形成视觉层次
这种视觉层次
又会对用户的认知产生影响
比如说这个版面的视觉层次
和上一幅图是不一样的
因为hello的颜色非常淡
形成了文字的背景
在这张图中人们首先关注的
是中等大小的文字
其次是最小的字
最后才是背景字 hello
如果把文字都变成一样的大小
内容的层次关系就差多了
缺乏层次感的信息
阅读起来比较困难
也缺乏表达力
使人抓不住重点
比如说这个网页的毛病
就是缺乏层次
很多组导航的标签在页面上
分量都差不多
好多的内容挤在一起
分不出主次
而这个由学生改版的页面就好多了
他把学堂的公告放在最醒目的位置
导航也进行了简化
强化了内容的层次感
内容按照重要性
从上到下依次排列
从大到小建立了一种秩序
看起来更赏心悦目
我们再比较一下
搜狐网站早期的页面
界面内容均等排列没有主次
而改版后的设计层次感加强了
但是相比之下呢
CNN新闻网站的页面层级关系更加鲜明
我们再来说说对比
对比是形成层次感的重要方法
对比呢包括位置的对比
面积和大小对比
色彩对比 粗细的对比
纹理对比等等因素
此外呢还有凹凸对比
字体的对比 明暗对比等等因素
如果对比不足
画面就失去了层次和活力
看起来很不舒服
如果对比不恰当
也会适得其反
比如说这张图
因为不恰当的色彩对比
产生了不舒服的观感
下面讲一下留白
留白也是非常重要的技巧
留白的意思是不要把图文信息填满画面
要在信息内容之间
留出可以呼吸的空间
不要像这样把画面填满 密不透气
这样画面也就失去了活力
适当的留白呢可以突出内容的主体
吸引视觉停留在重要的内容上
下面讲一下均衡
均衡是产生画面美感的重要因素
这个构图左上方分量太重
在视觉上产生了不稳定的感觉
那么把这个文字放到了左下方
画面同样不稳定
如果在右上角加一个黑色方块
画面就稳定了
所以呢在布局画面元素的时候
一定要注意整个画面视觉上的均衡感
比如说这个页面
如果去掉右下角
或者是左上角的圆点
画面就失去了均衡
好的视觉设计
一定是经过反复推敲的结果
画面的元素既不多也不少
对称呢也是均衡的一种表现
比如说这是一种对称的构图
对称的画面非常稳定
给人以严肃庄重的感觉
这个页面也是对称构图
下面讲一讲一致性
一致性指的是在设计界面视觉的时候
不能只考虑单一页面
要有整体观念
这里呢一致有两层的含义
第一是指界面风格
要和产品的品牌一致
比如说google旗下有很多的产品
但是它的所有的产品呢
都有相似的元素
在色彩 风格和字体上
保持了品牌的特征
这个是Facebook
它的页面 办公楼等等
也都具有企业品牌形象的特征
苹果公司的所有产品
也都具有品牌的识别特征
比如苹果公司的logo
简约的风格等等
第二呢在同一个产品
或服务的不同页面上要保持一致
这一点呢我们在前面的课中提到过
在这里呢就不重复说了
最后呢我来讲一下界面的视觉引导
界面视觉的布局
会影响人们怎么浏览信息
比如说这两张图
是通过眼动仪分别记录的
用户对不同视觉布局浏览的情况
比较一下两个视觉的轨迹
可以看到左侧这张图比右侧的图更有序
这说明呢左侧的设计
对视线的引导是有效的
而右侧的设计则是混乱和缺乏引导性的
这个呢也说明了用户
对页面内容的识别相对更困难一点
这几个不同形式的按钮
对人的视觉吸引肯定是不一样的
有些更像按钮
有些更像内容
有些更吸引我们的目光
而有些正好相反
所以我们在处理界面元素的时候呢
要善于使用不同的视觉形式
来引导用户的浏览行为
比如说在这张图中
加了阴影的ENTER
更容易引导人们的点击行为
因为它更符合人们对按钮的认知
在一幅静态图片中
动态元素会更吸引人的注意
比如说在这张图中
动态的箭头的位置和颜色都很不明显
但是因为它一直在闪动
也会引起人们的注意
引导用户点击或向下滑动页面
这个界面让人们联想到一个被俯视的桌面
同时散落四周的被遮挡的物品
又成功地吸引了人们的关注
把目光引向了
那些隐蔽在四周的可交互的元素
这些交互控件
在鼠标滑过的时候会变成小手指
引导性也是很明确的
在这个设计里面
设计者的意图并不希望你马上离开
而是希望你在界面上适当做一些探索
每个界面都是一种交流
信息的传递是双向的
一方面呢
我们要引导用户浏览你想说的内容
吸引用户呢产生进一步的交互行为
另一方面呢
也要符合用户对交互结果的预期
比如说这个界面
从视觉形式上我们可以区分出
哪些是可以点击的
哪些是不可点击的
界面的视觉设计呢
它是有目的的创造
比如这个界面的目的
是宣传自己的新产品
并且吸引用户在线注册或购买
那么在信息的层级关系上呢
宣传产品是最重要的内容
它也占据了视觉中心的位置
注册和购买分别是第二和第三重要的事
所以注册放在下面
购买放在右上方
这些处理方式
都成功地引导了用户的浏览路径
达到了预期的设计目标
想一想
在这两张图中
哪一张对用户的点击行为具有引导性呢
今天我们提到了六个设计原则
它们实际上是相互关联的
可以说层次 对比 留白 均衡
既是视觉审美的需要
又是信息交流的需要
不过前面这四个
针对的是单个页面
而一致性和引导性
则是站在全局的立场
考虑的是界面怎么样给用户整体的认知
以及如何引导用户
进行浏览可产生交互行为
-课程简介
--课程简介
-（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设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
