Date 2026-01-08 22:10:24
在日常生活中，我们通过眼睛、鼻子、嘴巴和其他器官接受信息的传递，然后通过大脑反馈信息理解。例如，如果我们每天通过眼睛看手机新闻，那么手机屏幕作为载体，只是通过眼睛传递信息，这就是传递信息。当眼睛把看到的信息传递给大脑时，大脑处理信息，这就是理解信息。这两个动作传递信息和信息理解是今天的主题：视觉交互。
本片文章通过 long 哥哥分享后，我总结整理出来。
信息的传递主要通过身体器官接触到信息，并通过神经系统传递给大脑。本文主要关注视觉交互，所以我们主要关注眼睛信息传递的领域。
这是京东 Web 端首页，模糊处理后，用户第一眼看到哪里？(想想)
第一眼被中间的黑色大图片所吸引，然后被左下角的红色卡片所吸引，然后看下面的一排图片。
刚才我们的浏览顺序是视觉动线。
为什么我们的视觉动线是这样的？
视觉动线 1 这一块，颜色，形状特别突出，和周围很不一样，所以我们刚打开网站就被它吸引了，然后我们看到了左下角的红卡，因为红色太亮，太突出，所以我们忽略了 1 右侧的模块直接转向 2 这个模块，然后向右看许多图片，就有了视觉动线 3 这个动作。
然后我们总结了吸引我们视觉动线模块的特点:色彩鲜艳，形状突出，与周围不同。
在移动端 app 在产品中，为了吸引用户的注意力，一些产品也会使用其他方法来改变用户最初的视觉移动线，并吸引用户点击。
比如左边淘宝首页金刚区的位置，因为“芭芭农场” icon 它是动态的，总是在变化，所以它会很快吸引用户。这就是为什么产品在促进活动时会添加一些动态效果，使动态效果比静态图片更有吸引力，用户可以很快被过去吸引。
右边这是 ins 明星的截图只是一些图片的简单安排。我相信每个人的视觉移动线都会根据不同的原因，如图片颜色和构图，产品会有不同的视觉移动线。这就是为什么他们总是喜欢在一些产品的广告中放一些美丽的图片来提高点击率。
通过以上两个小例子，我们也可以总结“动态效果”、改变视觉动线的两种方法是“信息敏感”。总结一下影响我们视觉动线的方法 5 原因：颜色鲜艳，形状突出，与周围环境不同，动态效果和信息敏感。然而，在日常产品设计中，由于各种原因，我们显然显示了一些信息，但用户就是看不见。其背后的原因是我们的视觉动态线不清晰，这使得用户忽略了一些信息。
例如：以前的 Airbnb 网站。根据我以前的认知，我学到了 Airbnb 是预订民宿的产品。那么我什么时候才能打开它呢？ Airbnb 预定民宿？周末旅游、亲子旅游、家庭旅游场景是否打开？ Airbnb 为什么我打开它的机会更大？ Airbnb 预定民宿？因为 Airbnb 这种高品质的B&B向用户传达了一种家庭的感觉，让用户在旅行时感受到家的温暖，所以在 Airbnb 在最早的网站上，为了向用户传达一个家的概念，产品在主页上使用了一张全家吃饭场景的大图片。左侧粉色的 Airbnb 爱彼迎，和家人一起，在旅途中迎接新年，这些都是在 Airbnb 中文名称确定后，向用户传达爱彼迎中文品牌感，整个头部 banner 它的组合是为了向用户传达一种我们称之为爱彼迎的方式，全家旅行可以找我们预订高质量的B&B。然而，随着人们对爱彼迎品牌的了解，一些用户报告说他们找不到预订B&B的入口。这是因为一些用户只关注美丽的大图片和文学文案信息，而忽略了预订模块随着视觉动态的变化。
现在我们再打开 Airbnb 官网会发现 Airbnb 在传递产品调性的同时，更注重预订B&B模块。
通过主页的第一张图片，我们可以分析：从左到右，为了向用户传达一种春天，我们应该出去玩，加上“趁花开 “去野外”是一种更具艺术色彩的文案信息，不仅突出了高质量的产品色调，而且向用户传达了一种外出游玩的信息。然后让我们来看看视觉移动线。
从视觉动线可以看出，用户的视觉随故事线而变化。
①春天来了，快出来玩吧；②你看外面的花都开了，很漂亮；③去哪里玩？如果用户需要准确的地点，可以直接搜索；④当用户没有准确搜索时，现在有了B&B的特价。来看看环境有多好。随着故事线的完全变化，用户的视觉动线突出了产品和交互设计的能力，既传达了产品理念，又抓住了用户的视觉动线。
Airbnb 上面的网站 banner 它是固定的，不可变的，但在日常产品中，banner 位置通常是轮播图。此时，如何既传达了产品调性，又突出了搜索需求？
这是万豪酒店的首页，在首页 banner 预订酒店模块用一张突出的卡片显示在下面，既传达了当前产品的优惠信息，又保持了用户预订酒店的入口需求。
以上是信息的传输，主要引导用户通过视觉移动线浏览信息。当用户找不到他们想要的信息时，我们通过改变视觉移动线和比较来突出用户想要的信息。
一般的视觉动线是通过眼动仪测试的，但由于某些条件的限制，我们无法进行眼动测试。这时，我们可以眯着眼睛，用它 1 在几秒钟内浏览网站，并记录眼睛经过的地方。这条路线是视觉移动线。感兴趣的学生可以尝试分析 vipkid 官网视觉动线。
我们通过视觉移动线将内容传递给眼睛，眼睛将内容传递给大脑，大脑进行处理，所以这是视觉交互的第二步：理解信息。
以上路径主要介绍了信息理解的步骤，以下是支付宝主页上的一个例子。
由于支付宝主页顶部的蓝色块，我们视觉移动线的第一个起点是顶部工具 icon，然后我们看到了金刚区的入口 icon，然后我们看到了 banner 在信息区，然后我看到了补贴。我对这个补贴很感兴趣。我想点进去看看。这时，我找到了视觉焦点，然后我理解了文案信息。“补贴”很好。我理解视觉焦点的信息，我能理解它们，我更感兴趣。然后我看了右边的补贴券插图。它很好，很好，然后我点击进去看了看。那么这条路就是我理解信息的路。
如何让用户在抓住视觉焦点后感兴趣？文案应该简单易懂。满足场景的需要，熟悉，有个人情感。
比如拼多多总是用抢红包提现微信，让用户不断分享裂变，拉动活跃用户。支付宝每年年底都有支付宝账单活动。为什么这种活动会吸引这么多用户点击？首先，信息很简单。你一眼就知道这是支付宝账单信息。此外，在年底，公司的财务部门正在总结。作为个人，我们是否也应该总结财务部门？最后，我有很强的个人感情。我今年花了多少钱？钱花在哪里？这些特点是支付宝账单活动特别成功的部分原因。
让我们看看下面两个 banner。
例如这两个 banner，左侧只强调备战双重准备 11.右边字太多，用户懒得看。每双 11 各大电商都在做促销，看谁便宜，但这个 banner 只是传达了双 11 这个信息没有突出用户感兴趣的点:折扣多，价格便宜。右边的对比好多了，直接突出了 19.9 元，直接向用户传达最简单的信息。
为什么我们在左边？ banner 点击不是很好吗？我们不理解，也不感兴趣，总结主要是：文本太多；内容太混乱；关键标记错误。
让我们分析一下支付宝 banner。
这个 banner 很简单，左橙色粗字体，右边简单的插图，为什么支付宝会有这样的插图？ banner？首先，我们不能否认支付宝的设计师能力。他们可以做出非常漂亮和花哨的设计。这里只是因为用户使用支付宝作为金融工具。当他们买早餐和去便利店时，他们需要付款。我打开支付宝，我可以收集能量。我打开支付宝，直接收集能量。用户每次打开都有准确的目的，用完就走。在如此短的视觉焦点时间内，设计师需要尽快向用户传达他们想要传达的信息，让用户在最短的时间内了解我们想要传达的信息，并对此信息感兴趣，消除干扰，直接泄露用户感兴趣的兴趣点，快速理解并点击。
再看一遍 Airbnb 显示文案信息。
对比左右两个，我只是在花和野之间打了个逗号。读右边文案信息的时候，有没有一些挫折感？先了解花，再了解“野”？因此，在文案的信息显示中，我们应该着重思考如何让用户快速理解和感兴趣。我们应该清楚地考虑标点符号的使用。我用标点符号的时候有分裂感吗？用户更好理解吗？
通过以上，我们了解到视觉交互主要分为两类：信息传递；信息理解。
信息传递主要通过视觉动线传递理解。优化视觉动线的主要方法是 5 种类，主要是：颜色鲜艳，形状突出，与周围不同；动态效果；信息敏感。在眼睛将信息传递给大脑后，大脑处理信息，这就是信息理解。
大脑如何快速处理信息？主要方法是 3 文案要简单易懂；满足场景的需要；熟悉，有个人情感。