2020-1-13 资深UI设计者
很多时候，当你的设计遇到了挑战，你无法客观地回答为什么，甚至在和业务方沟通的过程中表现得很被动。
通常根据人们的习惯，我们将核心行动操作都放置在右侧，例如下图核心的行为召唤按钮都放置在右侧，那为什么都要放在右侧呢？
我们可以用古腾堡图表来解释一下。古腾堡——西方活字印刷术的发明人，顺便看一下他发明的图表，啥意思呢？就是当我们在浏览一个不熟悉页面的时候，我们通常浏览的路径是一个对称的，从左上到右下的一个路径，最终的视觉落点通常就会在这条线上。
所以我们很多的信息和操作按钮，都是在右侧。然而我们发现有些对话框却把行动按钮放在左侧，我们来分析一下原因，像下方的对话框：
左侧的是我们常规看到的一个模态弹框，弹框内右侧的行动按钮可以是确定，也是可以删除，但是右侧的弹框基于我们的猜测是希望用户在高风险操作下，再次确认要进行的操作，所以当用户视线移动到右边的行动按钮时发现它并不是想要的操作，这时用户会对左侧信息进行一次再浏览，确认后再选择，很多时候用户在进行操作的时候会下意识地进行右侧点击，所以这样的处理方法可以避免用户对高风险行为的误操作。
但是话又说回来，这样的设计其实违背了用户的习惯和预期，所以还是要慎重考虑。
我们再来看一下高德地图的案例， 点击「退出」后展开两个选项，「退出导航」在左侧高亮，取消放在了右侧。
那这算不算违反用户的习惯和预期呢？我们换一种解释，这里运用到的是「菲兹定律」，目标按钮的大小、和手指间的距离影响用户操作的效率
如果退出导航放在右侧可以吗？在别的场景下没问题，但是在行车驾驶的场景中，任何的操作都需要快速。可以再想一下场景，什么时候会退出导航：1.目的地已到 2.开到一半认识路了 3.导错目的地了 4.要换交通工具了…..所以高德作为一个工具型产品，是一个核心的准则。
菲兹定律深入解读：
现在随着大数据和人工智能的科技进步，人们日常生活也变得越来越便利，或者说人也变得越来越懒。我们不用再费尽心机寻找我们想要的，所有的内容都会跟我们的习惯、行为被智能推送，产品也越来越人性化。所以我们今天的十万个为什么就来聊一聊个性化设计！
1. 内容个性化
个性化内容需要通过发现偏好-帮助过滤-使用 3 个步骤来看。首先内容个性化可以分为用户偏好个性化以及用户设置个性化，比如抖音、淘宝等应用，会根据用户对内容的搜索、浏览等行为习惯的偏好进行不同的算法推送，比如抖音我最近看鉴宝和篮球比较多，所以针对这些视频，我的完播率、播放数、点赞评论数据有变化之后，推送给我视频内容的权重就发生了变化。
其实很多用户不太理解，在电商应用，我已经购买过一件商品后，却依然还是给我推送同样类型的商品。
而用户设置个性化比如在使用 bilibili、漫画等应用时会在正式浏览前让用户设置自己的偏好和基础信息帮助用户进行更精准的推荐。
但这里有一个问题是，我们给用户设置的选项和用户实际本身不符，比如让用户选择他的年龄，很多用户可能觉得自己会更年轻，所以选择年龄和实际不符，那么推送的内容是他需要的吗？所以这里就需要根据用户真实行为数据来进行再次的过滤。
但是如果我们就这样把用户所选的内容都推送给他，那效率一定很低下，所以我们会从时间、热度和用户自身行为权重进行排序计算，当然这些内容也并不是都用 feed 流来承载，形式可以多样化，也包括进行分类，就像微信阅读会推荐 3 本书，你也可以选择点击换一换，甚至还把推荐来源给写出来了。
2. 场景个性化
最近看到两个不同的界面，实属有趣。某天我下了地铁用支付宝扫码出站后，页面提示我是否要进行打车，我觉得还是挺贴心的，虽然我不需要打车但是这个场景让我有了更加方便的选择。
同时发现在群里有另一个小伙伴也截了这个页面，他的界面却是提醒他是否要租一辆共享单车！这简直是赤裸裸的「歧视」呀。当然这个也就是和下面要讲的用户行为有关了，如果你经常骑车，他就会在这里给你推荐共享单车。
还比如高德地图在导航的时候如果即将进入收费站，在页面明显的位置也会出现支付宝入口的图标。（图片找不到了）
3. 行为个性化
这个应该正确的说是行为导致的功能个性化，比如知乎，从之前的上下切换话题到左右切换，再演变成上下切换话题。大家用过知乎的同学知道，现在上下切换话题其实还是有些不方便的，但是知乎为了让更多金主爸爸的广告能露出，不得已出此「下策」。
我们在设计的过程中也有一个原则「避免功能即按钮」的设计，在业务的背景下也被选择性忽略，所以他做了一个悬浮可动的切换按钮，其实在可动之前，他是固定的，是由于用户频繁误操作的行为，让知乎的设计师将它变成了可动吸附的按钮了。这个就是行为导致的功能个性化。
再比如腾讯视频、爱奇艺里的「只看 TA」这个功能。通过数据和用户行为路径的分析，发现很多用户会在一个视频里频繁观看某一个演员的片段，可能是自己喜欢的演员，可能是被其他平台吸引过来看某个片段的用户，这样大量的行为让我们发现用户的这个高频需求。
4. 目标个性化
最近也在体验了一款游戏，完美世界的笑傲江湖。其实现在很多的手游都会有这样的功能，就是会让用户选择如何体验游戏，由于玩游戏用户时间、职业的不同，所需要体验游戏的内容也是有区别的。
时间多的用户更想要体验所有内容，快速提高战力。而女性用户可能更想边看风景边玩，看唯美的画面。如果是时间少的上班族，那么更希望能做一些性价比高的任务，不至于脱离大部队的节奏。所以当用户有不同目标时，产品也有相应的策略让用户更好地体验产品。
很多设计师在进行信息设计的时候，通常靠着感觉和曾经尝试过的经验进行信息美化。但是当我们遇到需要对信息设计进行解释的时候，理由通常很苍白。
你无法说出为什么用户能够快速地浏览信息，只是觉得又大、又粗、又鲜艳的信息能够被识别。所以今天我们就要来聊一聊，为什么。
首先给大家介绍一些经过研究之后的数据结论：
人类视野的空间分辨率从中央向边缘减少。我们人类每只眼睛具有 700 万左右的视锥细胞，它们在人眼中的分布是越靠近中央凹的区域越密集。而另外一个研究表明，边界视觉的信息在被传递到大脑之前是经过压缩的，而中央凹的视觉则不会。大概就是下 2 图这个意思。
然后有同学会问，既然我们的边界视觉那么差，当用户在浏览界面信息的时候，为什么给用户 3 秒钟时间看界面他还是能够记住页面中的一些信息呢，或者会说为什么我们在浏览的时候，它不像下图那样只有一小圈是高清，而边上的文字是模糊的呢。
这其实是因为大脑通过一个比较粗犷的方式，基于我们的预期，给视野进行填充，大脑也会命令你的眼睛对边上的信息进行细节采样。所以这是一个很快速的过程。
为什么有的人能够一目十行就是，他的大脑能帮他补充得更多，或者说他的中央凹面积大。
但是有一个实验是，我们通过眼动测试，当用户的中央凹停留在一篇文章中的一个地方时，这个文字显示的是正确的，但是随着中央凹的移动，他周围的文字会进行随机的变化，他虽然能够成功地完成阅读，但是速度大幅下降。
比如大家看一下这个页面的区域：
当我们扫完这个页面也就 2-3 秒，但是如果你没有把中央凹停留在一个信息上的时候，其实都是靠大脑对我们的预期进行的补充。而真实的情况是，你们并没有发现页面中错误的地方。
言归正传，为什么你的信息用户总是看不见呢。我们又要讲到边界视觉。我们的设计如果不考虑边界视觉，那么就会影响到能够被识别的信息。那么边界视觉到底有什么用呢？
1. 引导中央凹
我们刚才说了中央凹的重要性，那么我们在什么时候会把中央凹放到我们要看的信息上呢？其实就是依靠我们的边界视觉。
边界视觉引导中央凹，它帮助中央凹捕捉关键信息。我举个例子，大家在查看一个食品包装的生产日期的时候是怎么寻找的呢，大家的眼睛不断地在搜索，而边界视觉是提供了低分辨率的线索，帮助大脑，控制眼睛以线索的发现顺序进行移动。
2. 捕捉运动元素
边界视觉可以非常快速的捕捉到运动的物体，所以在界面设计中，无法放置在核心位置的元素但又需要用户去注意到的时候，通常就会使用动效。
1. 将信息尽量放在中央凹或者中央凹边上能够被预期的位置
在小红书很早的一个版本中，当用户进行点赞操作后，反馈消息在顶部显示，让用户无法察觉和关注到。因为边界视觉都无法捕捉。所以当用户在进行操作时，如果需要将状态、文字告知用户，就需要显示在用户能预期以及能被边界视觉捕捉到的位置。
2. 使用图标、图片的形式标记出关键信息
比如在一大段的文本中，用户无法快速的查看内容标题，我们就可以在标题前使用图标、图片的形式进行标记，让边界视觉获取到信息之后在大脑中产生预期模型。
3. 使用动态效果吸引用户注意
动态效果能够快速被捕捉，甚至引导用户的视线。比如马蜂窝在底部进行点赞后通过动效引导用户，告知用户该点赞是为用户而赞，同时让用户的视线又回到了顶部，可能增加用户的停留时间。
4. 使用高亮的颜色来吸引用户的边界视觉进行捕捉
由于边界视觉的搜索是线性的，所以我们必须将重点的信息进行高亮显示，比如警告的红色，可点击的蓝色等。
在这里再补充一个我总结出来的规律，不一定对。
大家可以看到，下方的知乎话题界面，一进入界面我们的边界视觉立马给我们进行信息捕捉，所以首先被关注到的是呈现蓝色的文字、图片、图标等。
这里大家发现一个问题没有
为什么在这个界面中上方的两个按钮不用色块的形式做呢？
例如右边这样，很多同学在这里第一反应是这个按钮太重了！很突兀！为什么很突兀？
既然要引导用户为什么不做得重一点呢？那有同学又会说这样设计会干扰用户对其他信息的浏览，那么为什么会干扰对其他信息的浏览呢？
我猜测人眼的中央凹视锥细胞会根据界面中信息的重要程度进行调整，也就是说不同程度的强化会让边界视觉的捕捉能力下降。
像右侧的色块按钮让中央凹的视觉细胞更加聚集，而导致边界视觉的范围也大幅缩小，所以你们看左边界面觉得信息优先级很清晰，但是右侧的就会觉得我只看到了两个大按钮，而其他的信息都没有被捕捉到。
那继续思考一下，什么时候能用大色块的按钮呢？很多电商平台的购物都是大按钮，这个难道不会让用户的边界视觉受影响吗？
大家发现一个规律没有，有大按钮的页面基本上图片、图标都很多，而一般都是文字的页面，通常都不会出现大按钮，因为出现了就会被喷太突兀了！！
这就是因为大按钮在没有其他更高层级信息的配合下让边界视觉捕捉范围降低了，如果都是高层级的信息，那么边界视觉的捕捉范围就会「一视同仁」。
所以，为了让一个界面的按钮不突兀，一种方法是用和它相似级别的元素进行辅助展示，另一种方法就是降低该按钮的视觉引导层级。
不知道大家是否曾经或者现在使用过某个产品，当我们在完成某一个任务或者在某个场景中时，自己的操作行为特别自然流畅，注意力也非常集中，这种感觉让你非常的愉悦、舒适。
所以契克森米哈提出了心流的概念：个体完全投入某种活动的整体感觉，当个体处于心流体验的过程中，会对周边干扰视而不见，过程非常愉快且会觉得时间过得很快。
所以当我们在做交互设计时，我们追求的就是一种自然、能让用户进入心流的交互体验。但是大家不要误会了心流的概念，有些同学觉得我们在刷抖音、微博、微信就是一种心流的状态，那就错了。
心流并不是一种简单的沉浸的状态，当我们在娱乐时不过是被内容吸引了，让你觉得沉浸只不过是你的行为操作形成了习惯，不是心流状态。
今天我就来和大家分享一下如何通过一些方法，作出让用户进入心流状态的设计，这些都是有迹可循的。
开过车的同学都知道，左侧刹车右侧油门，档在右手边，在国内所有车都是这样，所以我们不会搞错。在经过一段时间的驾驶后我们更能够清楚的了解汽车的动力、刹车等性能，所以我们会觉得这辆车的操控感觉很好。原因是他的设计符合了用户的预期。直觉的预期、位置的预期、功能的预期以及结果的预期。举个例子，当我给你一个任务，希望你能够快速的进入 xxapp 进行个人头像的设置，在这个前提条件下我们来看一下刚才说的几个预期：
直觉预期
每个人的直觉都不同，这来源于他生活中的环境影响和习惯影响所以对于我个人的直觉来说，要完成这个任务首先必须找到最初的入口，我的直觉告诉我这个功能大概率可能出现的位置会在底部标签中的个人中心板块中。
位置预期
个人中心板块的位置可能会根据信息架构而出现变动，比如抽屉导航中会出现个人中心的入口，例如滴滴。当我们进入之后会看到头像、名字、箭头等信息，特别是箭头，这个图标给人的预期是你可以继续进入进行下一步操作，那么用户对下一步操作的预期基本上就是会点击箭头或者头像，这个也是比较明确的。或者直接来一个编辑的按钮也是可行的，这样就不需要用户去猜了，但编辑的功能比较垂直了，所以到底用哪种形式，要根据内容来。
如果没有这个箭头，用户一定会产生试探性的行为操作，此时内心已经有疑惑且不自信了。所以在心流交互中，明确的功能引导非常重要。
功能预期
用户预期通过他的操作能够达成目的，那么最基本的就是在这条路径上的功能不能缺失以及减少其他的干扰。可以发现微信的个人中心最底部板块有两个热区，并不是一块直接进入个人中心的热区，如果点击名字这一整行，则会下拉引导你拍摄一段视频。所以有时候想替换头像以为点击这一块都可以进入二级，却发现这并不是我要的功能。
结果的预期
最后当用户进入编辑头像页面之后，需要关注其场景，这边微信做的就挺好：
很多时候交互流程已经做的非常自然了，但是当用户正在他的心流体验中，突然一个模态弹框跳出打断了用户，令人啼笑皆非的是这个弹窗只是告诉你一个不痛不痒的信息，这就比较难受了。
而我们来看马蜂窝当用户在 app 中完成某些特定任务后，不会出现模态弹窗的强制干扰，而是在顶部出现一个通知 bar，这样原本在进行任务中间阶段的用户不会受太大的干扰，可以继续任务行为。
再例如美团外卖和饿了么，用户在点餐时对优惠优惠的关注是特别强烈的，而是否能够让用户认真的挑选菜品，我们也尽可能做到影响的打扰，就像满减去凑单的交互形式，点击后不跳转，仅在当前页面以文字形式让用户明白并行动，但这里去凑单很容易和去结算有误操作。
例如马蜂窝自定义旅程，进行多标签选项，当用户在当前页面选择完该页面的选项后自动帮助用户定位到选择日期的功能模块中。这样减少了用户不必要的下滑操作，像这样单一场景中对用户的行为预期是比较好判断的。
之前玩过很多款手游，即便是一些常用的套路，每家都能玩的不一样，例如宝石合成、英雄装备获取，有些游戏能够做到让用户在一个场景中不脱离。
比如宝石合成这个功能。宝石从哪里来？是否能在合成合成路径中穿插购买的分支并再链接回合成场景？在包裹中进行合成和在装备界面进行合成是否流程一样；然而有些游戏当用户购买完宝石后需要重新自己再打开合成界面，非常繁琐，同时也导致了用户消费路径的断裂。
再比如装备副本获取这个功能，这里我们看一下权利的游戏这款游戏，当我一件装备的零部件不足需要进行扫荡获取，这里有两种场景，一种是我刚好只需要这 4 个件合成 1 件，另一个是我需要更多的零部件，不仅仅这一个，所以对前者来说我达成了目的就可以返回去合成界面，而后者我可能需要更多数量的零件，但不管如何我一定还是需要返回合成界面的，然而不管是哪个场景，都必须点击两下关闭按钮才能返回合成界面，所以在这个地方缺少了一个快速拉回用户状态的按钮，叫做「去合成」。
当我已经完成了我的需求后，能够让我快速的返回合成界面，因为合成装备才是我的最终目的，而不是刷更多的碎片。
下方的案例再解释一下第 3 点，当用户点击合成之后，不要提示告知用户数量不够，因为你已经显示了数量未达标，用户想点击的目的是让你告诉他未达标改怎么办，所以这里最好的处理方式就是把获取该装备的方法告诉用户。
我们希望一个产品使用起来很自然，除了操作成习惯之后流畅外，一些帮助用户潜意识的连贯的微交互也显得非常重要。不需要有华丽的动画，有时候仅仅只是一个晃动，一个速度曲线就足以合理的表达功能的语言。
文章来源：优设