“ 当用户打开一个新站点时，他的焦点很宽泛；当用户专注一项任务时，他的焦点就会聚焦。《简约至上》”

作为一名UI，深刻的意识到交互的东西是辅助UI的一个利器。当你知道他存在的价值以及目的，就知道他应该存在在哪个位置，不是哪好看就放在那里。充电中~本篇就对我了解到的交互和UI的东西做个总结，分享给大家。

01

—

让功能容易找到

现实中的一些例子，很好的验证了上述《简约至上》里面的论点。下图是大家比较熟悉的一些例子。当我们对某步操作出现困惑的时候，就会想去寻求解决办法，好的交互是站在用户的前面替用户考虑问题。出现了问题，让用户第一时间知道错在哪怎么修改，只有看到了问题才有可能被改正。

当操作出现问题的时候，用户会过于关注屏幕上的问题区域，首先要做到的就是让用户看到你提供的解决方案的入口，形式有icon、文字、文字+icon等等。不难理解，当操作失误时会有Tips提示，比如“您的账号输入有误”等等，这些tips一定都是存在该问题的周围（上面、下面、右边，有的还会直接滚动到该问题出现的位置）；当然也有反面例子，大家在平常操作有没有遇到过明明都填写好了一切，点击下一步的时候一直不跳转页面，多次点击后才发现格式输入有误，原因可能是你在中间操作没有关注到沉在底部一闪而过而且带有透明度的toast提示！（此处注意不是所有的toast都不允许放在底部，也是要根据情况来，例如邮箱的状态提醒就在下面）

还要注意克制和隐藏，不能通篇都是提供解决方案的入口，这样会影响用户的操作。一个典型的例子，在网页上搜索一篇文章，假想一下，如果在通篇出现英文的地方都出现icon提示，这就是一个过度设计的界面。首先文章的内容肯定是第一位的，设计者目的就是想让用户通篇无障碍的阅读文章，帮用户直接翻译好这个交互算是一个加分项。

但是用错的话还不如不用，假如通篇都是提示帮助的icon，不仅会影响到用户的阅读，反而还增加了阅读的难度。当出现一个不认识的单词，操作顺序一定是先复制-然后再粘贴搜索-返回文章，所谓站在用户前面去考虑问题，当用户在进行第一步复制的时候就替用户考虑好后续的解决方案，预先猜想用户遇到可能出现的问题，比如这个单词的出现，在文中未做任何标记，只有在复制的时候才会出现帮助提醒，毕竟不是所有人都需要这个提醒，这样做不仅不会打扰到用户还巧妙的做了用户分类，如下图大家可以去体验一下，目前市面上的浏览器基本都实现了该操作。

02

—

常用的部分定律总结

定律部分参考
https://www.zcool.com.cn/article/ZMTA0NDU3Mg==.html（站酷h梓暄）

1.费茨定律

从一个任意位置移动到一个目标位置所需要的时间与两个位置的距离和目标大小有关。离目标位置距离越远时间越长，反之亦然；目标面积越大，我们定位到目标所花费的时间就越短，反之亦然。在我们页面设计中，目标大小的设置要在合适的范围之内，越大越容易点击，越小则容易误操作和点击无效；比如一些小的文字链接，在跟开发小哥哥对接的时候需要注明热区的大小范围，适当性的放大焦点可点击的范围。

目的：提高产品可用性中的效率指标，帮助用户更快的完成某项任务；

应用：例如CTA按钮的位置、一些决策性按钮等等~

思考：是不是所有的按钮都要离内容区域距离越近越好呢？当然不是，在部分的操作页面中不难发现，有一些按钮就永久性的固定出现在一些边角旮旯的地方，这当然不是设计师的失误，是有意而为之，有意识的将一些操作放在相对不容易碰到，距离比较远，不容易感知的地方，就是为了延长用户的感知时间，感知时间越长，操作成本越高，用户在做决策之前心里就有了一个默认答案，从而降低了误操作的可能性。

2.希克法则

人们对于每个选项认知处理的时间约是0.155秒，选择越多，做出选择所花的时间就越多。

如果是有5个选项，反应时间则大约需要2.36秒。这个跟后续的米勒定律和奥卡姆剃刀原理都有关系。

3.奥卡姆剃刀原理

这个就可以宽泛的理解为极简原理，不管是从实体、视觉或者认知上，不必要的元素会降低设计的效率，剔除设计中的多余元素，让设计更加严谨和纯粹。在这里作者想到一个设计中经常出现的词语--信噪比(相关信息和无关信息的比例）。

4.米勒定律

人短时间的记忆模块广度为7-2~7+2之间，记忆信息超出了该范围就很容易出错。大脑短时间的记忆容量约为7，接受新鲜事物的记忆容量最多不会超过9。（悄咪咪的BB~我目前短时间的记忆能力在3~5个，哈哈哈，极限了！）

目的：降低记忆成本，减少用户的认知负荷，提高信息的易读性。

思考：APP中底部标签栏的个数就是一个很好的例子，为什么只放几个，为什么不放一排然后左右滑动呢？最常见的个数一般都在3~5个，很少见有7个的例子，PC端导航一般不超过9个，超过的都可以用所谓的“聚会按钮”或者“更多”。（下面纯属我猜想，胡说八道昂）米勒定律的提出时间也是上个世纪的1956年，那个时候没有这么多的电子辐射，人们不通宵打游戏，不吃外卖，可能脱发也没有那么快吧……，总之就是记忆力会很好的感觉，咳咳~调查了几个身边的小伙伴，没错，我们的记忆广度3-2~3+2之间……)

应用：把一大串数字断开的设计，输入电话号码3-4-4的断点设计、钱数金额3位一断、银行卡号4位一断，目的就是为了降低记忆成本，提高信息的易读性，从而达到视觉防错的作用。

5.席克定律

用户面临选择的数量越多，用户做出选择所花费的时间就越长。选项与选项之间一定存在某种联系，没有必要把全部的选项都展示出来，可以进行同类分组或者多层级分布，这样效率会更高一些。大家可以做一些优质的问卷调查体验下选项之间的联系和关系。

应用：默认值的设置，方便用户选择；多层级的菜单导航等等。

思考：大家有没有也同样疑惑过这个问题，一个登陆页面，输入手机号和验证码是分开的两个页面，这样不是增加了页面的数量，不是更繁琐了吗？

这个原理就是秉承“一个页面只做一件事的原则”，虽然分页展示但是在用户体验上是不是感觉相对轻松，而且更容易将用户的注意力集中到该步骤来，排除了其他信息带来的干扰。

包含一些隐藏的页面，都是为了减轻用户在感知和视觉上的压力。在做问卷调查的时候最容易出现这个交互，当我们打开某个问卷调查，大概一看只有几个选项，大部分情况下我们都会选择做，但是里面暗含玄机，在快做完的时候，触发到某个选项，下面又是一堆题目。

所以说席克定律不仅仅是要求数量少，最重要的是要让用户感觉他是少的，容易的，他们才会聚焦去做这件事情，所以在设计的时候我们会选择分页，按步骤操作等等，都是为了让用户感觉它是少的，想必没有人会喜欢一股脑填写一堆堆数据文字吧，输入的成本更高，后台还要考虑容错性，开放的输入条件也不利于一些数据的统计。

首因效应：相对于中间位置，我们往往会对开头的事物记忆犹新。

新近效应：相对于中间位置，我们更容易记住末尾的物体。二者综合可以理解为我们的大脑更加容易记住开头和结尾的东西(与旧脑效应也有关系）。

举例：大家可以回忆一下淘宝的详情页，开头一般都是产品展示；中间部分都是尺寸规格；最后一般都是价格说明和购买说明。

信噪比：相关信息和无关信息的比例

MVP原则：它可以理解为一个产品的更新迭代过程，不同阶段MVP的特点有所不同，关注的目标也不同。

新旧脑效应:新脑=理性脑,主要用来思考和处理理性数据；旧脑（也称为“爬行脑”，是因为这样的脑形态依然存在于今天的爬行动物中) 用来做决策,直接或间距的接受来自脑和其他神经的输入,并触发决策。旧脑喜欢开头和结尾的东西，通常会忽略中间的内容；我们的视觉神经直接与旧脑相连，所以旧脑对视觉刺激会在1毫秒左右做出反应。

大家不妨来看个例子：

大家会不会也有这样的疑惑：为什么“挑选服务”会放在中间？“查看物流”反而没有和之前的功能一样放在中间？这样不就违反了一致性？是失误吗？

答案揭晓：（作者的一些推论和思考哈，不是官方数据）

1.是利用人们的行为习惯，也就是“旧脑”给出的决策，当我们在查看订单的时候，大多数情况下是查看物流，三个按钮中，中间这个按钮的转换率是大概率超过其他两个的，当我们买了很多东西，一路就这么顺着点过来，到鞋子这块你不由得点错，有时候已经看到他是“挑选服务”了，查看物流在左，这个手还是不由自主的点了中间这个按钮，表示已经多次干过这种事情~（哈哈哈，我可能是个顺拐~）

2.为啥要放中间，这就是设计者的一点点小心思了，“勤鸽”是阿里旗下的一个专门提供上门取鞋洗鞋的服务，类似淘宝中连接咸鱼的接口“卖了换钱”类似，给产品更多的曝光机会，让你在惯性操作之中发现这个产品，与其放在首页的金刚区，不如放在他应该出现的位置，这样既不会打扰，反而更能被记住。

03

—

Banner样式怎么使用

作为UI,我们不仅仅只是规定一个banner的位置和大小,更要从全局的角度考虑banner的样式和交互。在众多APP中，banner样式有后面带背景的，有通栏展示的，有等宽于内容的，有大圆角的有方的…，是因为好看吗？

Why : 大家在前期做东西的时候，一定会遇到这种情况，有两种方案PlanA和PlanB，A的美观度＞B的，但是B却偏偏获选了，why? 因为在Leader的眼中 合适（利益）＞美观，他们会考虑合适的展位和大小，决定了被看见的概率，这些都是跟利益点挂钩，Leader的思维是很商业化的。这就好比明星为什么都想占C位，只有被看到才有话题度，如果该明星跟品牌气质不符，就算流量再多也不会聘用一样的道理。

Do : 在做之前，我们一定要搞清楚一个问题，本次更新Banner的意义，是为了新功能的宣传还是单纯的广告位，还是二者都有，那我们就得考虑一下，在寸土寸金的页面上，banner位是否需要增大或者减小比例，这样做是否会影响到下面内容的展示，总的来说就是衡量一下banner和下面内容的比重，谁更重要些，这也决定了banner应该怎么设计。

Eg : 1.两边留白/滑动

与下面内容区域等宽，距离屏幕两边都有留白，现在APP的流行趋势。风格简约，顶部看着会比较透气，与下面内容衔接的整体性比较好。

这种样式通常还有一种展示方案，就是多个展示。左右两边各露出一部分，让用户直接感知到这里的交互和丰富的内容。

2.去掉顶部banner，中下部分放置广告位

这得看产品的定位和盈利点或者交互等等方面综合考虑。比如说如果产品本身就是一个工具类的app,用户进来只是为了完成某项任务而进行的操作,那么banner本身的意义就不大。我们平常经常用到的钉钉,钉钉上放置一个广告位和淘宝上面放置的广告位,你更愿意看哪个?

从另一个角度看，Banner稍微往下放一些是为了更好的被看见。banner的展示刚好落在视觉中心的位置，更容易被发现。

3.通栏展示，大包大揽

这类banner是最规规矩矩的一类，割裂感比较强，但是设计感不是很强。为了给下面功能争取更大的空间，设计师一般发挥的空间就是变形，做个弧度等等。为什么说大包大揽？在这类banner上可以承载状态栏和导航栏，也可以包含搜索等功能，所以对于banner本身内容来讲，层级就比较低了。

banner在设计的时候，下面的内容模块一般不会采用卡片式的设计，多会采用色块或者间距进行分割，不然会有头重脚轻的感觉。

4.自带BGM

这种banner在电商行业应用的比较多，目的就是为了营造氛围和代入感。这类可以融合1又可以融合3的样式。背景可以随着banner的颜色更改变化，视觉上比较饱满和灵动，又能很好的压得住头部的位置，就算内容部分过于花哨也能镇得住场子。

5.作为BGM

这类banner刚好和4的展示换了个位置，毋庸置疑，它承载的功能优先级是大于banner自身的，优点就是将页面整体连接起来。

作者碎碎念：大家有没有发现，除了电商类的展位，现在banner做的越来越瘦小了，优先级越来越低了。打开APP,大家已经习惯了先点跳过再点x的操作习惯，没有人会等3S一过的banner信息，被看见也全靠缘分。代替出现了“新手引导”、“上线功能引导”、“坞窗”以及动效，目的都是变着花样的吸引用户的注意。但是Banner还是有它不可动摇的理由，Banner只有在合适的位置才能发挥它的巨大作用，所以大家在做的时候还是要多方面深层次的综合考虑再来定位它。

本次更新就结束啊，这篇写的模块相对独立一些，磨了很久，最近也在充电和总结中，会一直给大家输出的。

文章来自社区签约作者：HL.Zhang