视觉设计原则在线视频

Luke说

所有交互产生于最终的界面

也就是说界面的最终视觉设计

对用户体验起到了决定性的作用

那视觉设计要注意哪些方面呢

我在这里列举了六个要点

首先我们说说层次

界面的布局设计呢

首先要体现的就是视觉层次

有层次的版面对视觉具有引导性

也更容易阅读

不同的视觉层次呢

能体现出作者对内容布局的思考

把重要的信息和次要的信息

在视觉上进行区分

可以形成视觉层次

这种视觉层次

又会对用户的认知产生影响

比如说这个版面的视觉层次

和上一幅图是不一样的

因为hello的颜色非常淡

形成了文字的背景

在这张图中人们首先关注的

是中等大小的文字

其次是最小的字

最后才是背景字 hello

如果把文字都变成一样的大小

内容的层次关系就差多了

缺乏层次感的信息

阅读起来比较困难

也缺乏表达力

使人抓不住重点

比如说这个网页的毛病

就是缺乏层次

很多组导航的标签在页面上

分量都差不多

好多的内容挤在一起

分不出主次

而这个由学生改版的页面就好多了

他把学堂的公告放在最醒目的位置

导航也进行了简化

强化了内容的层次感

内容按照重要性

从上到下依次排列

从大到小建立了一种秩序

看起来更赏心悦目

我们再比较一下

搜狐网站早期的页面

界面内容均等排列没有主次

而改版后的设计层次感加强了

但是相比之下呢

CNN新闻网站的页面层级关系更加鲜明

我们再来说说对比

对比是形成层次感的重要方法

对比呢包括位置的对比

面积和大小对比

色彩对比 粗细的对比

纹理对比等等因素

此外呢还有凹凸对比

字体的对比 明暗对比等等因素

如果对比不足

画面就失去了层次和活力

看起来很不舒服

如果对比不恰当

也会适得其反

比如说这张图

因为不恰当的色彩对比

产生了不舒服的观感

下面讲一下留白

留白也是非常重要的技巧

留白的意思是不要把图文信息填满画面

要在信息内容之间

留出可以呼吸的空间

不要像这样把画面填满 密不透气

这样画面也就失去了活力

适当的留白呢可以突出内容的主体

吸引视觉停留在重要的内容上

下面讲一下均衡

均衡是产生画面美感的重要因素

这个构图左上方分量太重

在视觉上产生了不稳定的感觉

那么把这个文字放到了左下方

画面同样不稳定

如果在右上角加一个黑色方块

画面就稳定了

所以呢在布局画面元素的时候

一定要注意整个画面视觉上的均衡感

比如说这个页面

如果去掉右下角

或者是左上角的圆点

画面就失去了均衡

好的视觉设计

一定是经过反复推敲的结果

画面的元素既不多也不少

对称呢也是均衡的一种表现

比如说这是一种对称的构图

对称的画面非常稳定

给人以严肃庄重的感觉

这个页面也是对称构图

下面讲一讲一致性

一致性指的是在设计界面视觉的时候

不能只考虑单一页面

要有整体观念

这里呢一致有两层的含义

第一是指界面风格

要和产品的品牌一致

比如说google旗下有很多的产品

但是它的所有的产品呢

都有相似的元素

在色彩 风格和字体上

保持了品牌的特征

这个是Facebook

它的页面 办公楼等等

也都具有企业品牌形象的特征

苹果公司的所有产品

也都具有品牌的识别特征

比如苹果公司的logo

简约的风格等等

第二呢在同一个产品

或服务的不同页面上要保持一致

这一点呢我们在前面的课中提到过

在这里呢就不重复说了

最后呢我来讲一下界面的视觉引导

界面视觉的布局

会影响人们怎么浏览信息

比如说这两张图

是通过眼动仪分别记录的

用户对不同视觉布局浏览的情况

比较一下两个视觉的轨迹

可以看到左侧这张图比右侧的图更有序

这说明呢左侧的设计

对视线的引导是有效的

而右侧的设计则是混乱和缺乏引导性的

这个呢也说明了用户

对页面内容的识别相对更困难一点

这几个不同形式的按钮

对人的视觉吸引肯定是不一样的

有些更像按钮

有些更像内容

有些更吸引我们的目光

而有些正好相反

所以我们在处理界面元素的时候呢

要善于使用不同的视觉形式

来引导用户的浏览行为

比如说在这张图中

加了阴影的ENTER

更容易引导人们的点击行为

因为它更符合人们对按钮的认知

在一幅静态图片中

动态元素会更吸引人的注意

比如说在这张图中

动态的箭头的位置和颜色都很不明显

但是因为它一直在闪动

也会引起人们的注意

引导用户点击或向下滑动页面

这个界面让人们联想到一个被俯视的桌面

同时散落四周的被遮挡的物品

又成功地吸引了人们的关注

把目光引向了

那些隐蔽在四周的可交互的元素

这些交互控件

在鼠标滑过的时候会变成小手指

引导性也是很明确的

在这个设计里面

设计者的意图并不希望你马上离开

而是希望你在界面上适当做一些探索

每个界面都是一种交流

信息的传递是双向的

一方面呢

我们要引导用户浏览你想说的内容

吸引用户呢产生进一步的交互行为

另一方面呢

也要符合用户对交互结果的预期

比如说这个界面

从视觉形式上我们可以区分出

哪些是可以点击的

哪些是不可点击的

界面的视觉设计呢

它是有目的的创造

比如这个界面的目的

是宣传自己的新产品

并且吸引用户在线注册或购买

那么在信息的层级关系上呢

宣传产品是最重要的内容

它也占据了视觉中心的位置

注册和购买分别是第二和第三重要的事

所以注册放在下面

购买放在右上方

这些处理方式

都成功地引导了用户的浏览路径

达到了预期的设计目标

想一想

在这两张图中

哪一张对用户的点击行为具有引导性呢

今天我们提到了六个设计原则

它们实际上是相互关联的

可以说层次 对比 留白 均衡

既是视觉审美的需要

又是信息交流的需要

不过前面这四个

针对的是单个页面

而一致性和引导性

则是站在全局的立场

考虑的是界面怎么样给用户整体的认知

以及如何引导用户

进行浏览可产生交互行为