Designer Talk ——为了给大家带来更多设计实践分享，我们邀请了活跃在不同设计领域设计师来为大家做更具针对性的专题分享，希望可以带来更多思考和收获。

今天特邀前京东UX设计师、目前就职于新势力造车的UX设计师@七帅，和大家聊聊如何更好地了解用户的眼动轨迹以及如何抓住用户对界面视觉信息的获取。

日常生活中，我们通过眼睛，鼻子，嘴巴等器官接受信息的传递，然后经过通过大脑把信息理解反馈出去。

例如：日常我们通过眼睛看手机新闻，那么手机屏幕作为一个载体只是把信息通过眼睛传递了出来，这就是传递信息。

当眼睛把看到的信息传递到大脑，大脑对信息加工处理，这就是理解信息。

这两个动作传递信息、信息理解就是今天的主题：视觉交互。 

Deliver Information 

#传递信息

信息的传递主要通过身体的器官接触到信息后，通过神经系统传递给大脑。今天的主题是视觉交互，那么这里的传递信息我们就主要讲通过眼睛观看信息传递这个领域。

这是京东 Web 端的首页，模糊处理以后，用户第一眼看哪里？（思考一下）

第一眼被中间黑色的大图片所吸引，接着被左下角的红色卡片吸引，接着看到下面一排图片。

刚才这个我们的浏览顺序就是接下来讲的视觉动线。

为什么我们的视觉动线是这样的？

视觉动线1这块，颜色、形状都特别突出，和周边的差异很大，所以我们刚打开网站就被它给吸引了。

接下来我们又看到了左下角红色的卡片，由于红色颜色过于亮丽、突出，所以我们忽略了 1 右边的模块，直接转向了 2 这个模块，接着往右看很多图片，就有了视觉动线3这个动作。

那么我们总结出吸引我们视觉动线模块的特点：

1 颜色鲜艳 

2 形状突出 

3 与周边有差异 

在移动端 app 产品中，有些产品为了吸引用户的眼光，也会运用其他的手法来改变用户本来的视觉动线，吸引用户点击，

例如：左边淘宝的首页金刚区位置，由于“芭芭农场”这个 icon 是动态的，总是不断地在变化，所以就会很快把用户吸引过去。这就是为什么产品在活动大促的时候，会加一些动态的效果，这样动态的效果对比静态的图片更加吸引人，用户也就能很快的被吸引过去。

右边这是 ins 上某位明星截图，只是一些图片的简单排列，相信大家的视觉动线会随着图片颜色、构图等不同原因而产品不同的视觉动线，这就是为什么在某些产品的广告中总是喜欢放一些美女的图片，提高点击率。

通过上面两个小例子我们也可以总结出“动态效果”、“信息敏感”这两个方法来提高改变视觉动线。

通过刚才的几个小例子，总结一下影响我们视觉动线的 5 种原因。

1 颜色鲜艳 

2 形状突出 

3 与周边有差异 

4 动态效果 

5 信息敏感 

但是，在日常的产品设计中，由于各种原因，我们明明展示了某些信息，但是用户就是看不到，其背后的原因就是我们的视觉动线不太明确，让用户忽略了一些信息。

例如：之前的 Airbnb 网站。根据我以往的认知了解到 Airbnb 这种高品质民宿更多给用户传达了一种家庭的感觉，让用户在外出旅游的同时也能感受到家的温馨，所以在 Airbnb 最早的网站中，产品为了给用户传达一种家的概念，首页用了一张全家吃饭场景的大图。

但是随着大家对爱彼迎这个品牌的认知，有些用户反馈到找不到预定民宿的入口，这就是因为有些用户只顾着看美丽的大图和文艺的文案信息，随着视觉动态的变化把预定这个模块给忽略掉了。

现在我们再打开Airbnb 的官网就会发现 Airbnb 在传递产品调性的同时也更多的强调预定民宿模块。

通过首页的头图我们可以分析出：从左到右看，左侧的文案信息为了给用户传达一种春天到了，我们该出去玩了，再加上“趁花开  去撒野”这种比较有文艺调的文案信息，既凸显了高品质的产品调性，又给用户传递了一种外出游玩的信息。接着我们看一下视觉动线。

通过视觉动线可以看出，用户的视觉随着故事线而变化。

①春天了，快出来玩吧！

②你看外面的花都开了，很美！

③去哪玩呢？如果有精准地点需求可以直接搜索。

④用户没有精准搜索的时候，现在有民宿特价哦，快来看看吧，你看环境多好。

用户的视觉动线完整的随着故事线变化，这就凸显了产品和交互设计的能力，既传达了产品思想，也抓住了用户的视觉动线。

以上就是信息的传递，主要通过视觉动线引导用户去浏览信息，当用户找不到自己的想要的信息的时候，我们通过改变视觉动线、对比等方法凸显用户想要的信息。

Get Information 

#理解信息

我们通过视觉动线把内容传递给了眼睛，眼睛又把内容传递给了大脑，大脑进行加工处理，那么这就是视觉交互的第二步：理解信息。

上图路径主要介绍了信息理解的步骤，下面通过一个支付宝首页的例子来分析一下信息理解的路径。

因为支付宝首页顶部的蓝色色块，所以我们的视觉动线的第一出发点为顶部工具 icon，接着我们看到了金刚区入口 icon，再接着我们看到了 banner 信息区，然后我看到了补贴。

对这个补贴很感兴趣啊，我想点进去看看。这时就找到了视觉焦点，然后我对文案信息进行理解，“补贴”这事不错啊，我理解了视觉焦点的信息，也能看懂，还比较感兴趣。

紧接着我看看右边的补贴券插画，挺好的，很不错，然后点进去看了看。那么这个路径就是我对信息理解的路径。

那么怎么才能让用户抓到视觉焦点后还能感兴趣呢？

1 文案要简单、容易理解 

2 符合场景的需要 

3 熟悉、有个人的情感 

我们再来看下面两个 banner。

例如这两个 banner，左侧只是强调了备战双11，banner右边字太多了，用户懒得看。每到双 11 各大电商都在做促销，看谁家便宜，但是这个 banner 只是传达了双 11 这个信息，没有突出用户感兴趣的点：打折多、便宜。

右侧这个恰好对比要好很多，直接突出 19.9 元，直接给用户传达了最简单的信息。

为什么我们左侧的 banner 点击不太好？我们没看懂也没有兴趣，总结下来主要是：

1 文字太多了 

2 内容太乱了 

3 重点标错了 

我们再来看一下 Airbnb 的文案信息展示。上下两张对比，我只是在下面那张图的文案“趁花开和去撒野”之间加了个逗号，读下图文案信息的时候，是不是徒增了一些顿挫感。

先理解一下趁花开，再去理解“去撒野”？所以文案的信息展示，我们要着重思考一下，怎么写才能让用户快速理解，而且感兴趣，标点符号的运用都要考虑清楚，我用了标点符号是不是有分裂感？用户反而变得不好理解了？

Sum it Up 

#汇总一下

通过以上我们理解了视觉交互主要分类两大类：信息传递和信息理解。

信息传递主要通过视觉动线进行传达理解，优化视觉动线的主要方法有 5 种：颜色鲜艳、形状突出、与周边有差异、动态效果和信息敏感。

眼睛把信息传递给大脑以后，大脑对信息加工处理，这就是信息理解。

怎么才能让大脑快速的对信息进行加工呢？主要方法有3种，分别是文案要简单、容易理解；符合场景的需要；熟悉、有个人的情感。

📖

  读书时间  

最新出版了关于界面设计的两本新书，除了生动有趣的视觉交互，还有更多设计技能和方法讲解。

从入门技法到设计进阶，从设计方法到背后的商业逻辑，都能够帮助你在原有的基础上进行提升。两本新书都已在优设平台上架，欢迎关注！

添加图书管理员（bookuisdc）进读书群，参与读书打卡，免费拿书！还有设计图书的超值优惠券。添加管理员记得备注所购图书的名称哦！

本文来自微信公众号“优秀网页设计”（ID：youshege）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。