阅读之前，温馨提示下，文中提到的 UI设计方式不一定有对错，如果使用得当，它们都有很大的可能性。
也许你会知道这种感觉，当你打开一个新的网页，阅读到一半时，突然被一个巨大的浮层打断，要求填写电子邮箱。大多数人第一反应是关闭弹窗或关闭整个网页。
这么多网站都会使用这种方式，其用意显而易见。然而，这种方式对用户产生了非常负面的影响——中断了用户正在做的事（对用户来说重要的事）并将注意力集中在另一件事情上（对网站来说重要的事）。在你试图要求获取用户信息之前，最好等用户完成当前的事情（例如，阅读并熟悉内容）。让他们有机会选择是否做某件事情，而不是强迫他们去做。
无限滚动是指用户可以通过无限地向下滚动浏览页面大量内容。当您向下滚动页面时，它可以一直刷出新的内容。虽然听起来很好，但这种方式并不适用于所有网站，也不是 APP 的通用解决方案。
△ 图片来源：Geo Law
这种方式的缺点也是它的优势——它是没有终点的。用户访问到网页的某一个位置，他们无法记录当前浏览位置以便于稍后回到同一位置。当用户离开了网站，他们将失去之前访问的所有进度，不得不再次向下滚动页面返回到同一位置。这种方式无法确定用户的滚动位置，不仅会对用户造成烦扰或混淆，而且还会使整体用户体验变差。
2012年，Etsy 花了很多时间实现电商网站的无限滚动界面，但是却发现新界面的体验不如翻页。虽然购买数量没有什么变化，但用户参与度却下降了（人们有目的地使用搜索的次数下降）。
正如 Dmitry Fadeyev 指出：
人们会想回到搜索结果列表中查看刚才看到的内容，并与他们在列表中发现的其他内容进行比较。无限滚动不仅打破了这种对比，也使列表上下移动变得困难，尤其是当你下次回到页面，发现自己又回到了顶部，需要再次向下滚动列表并等待内容加载。在这种情况下，无限滚动界面就比翻页慢多了。
设计师在设计中加入无限滚动之前，应该权衡它的优缺点。选择取决于场景以及内容的传递方式。一般来说，无限滚动适用于像 Twitter、Instagram 这样的产品，用户在消耗无穷无尽的数据流时不会特别寻找特定的内容。
译者注：作者在《UX: Infinite Scrolling vs. Pagination》中提到无限滚动的优缺点：
1. 无限滚动的优点
用户停留的时间更长，提升用户参与度。当用户没有特定寻找的内容时，可以通过浏览海量信息找到自己喜欢的内容（如Pinterest、Facebook）。
滚动比点击操作更快更容易，分页展示每次内容更新都需要额外点击等待加载。无限滚动对于移动设备很友好，移动设备的手势控制让滚动更自然。
2. 无限滚动的缺点
影响页面性能，加载速度慢，用户无限的向下滚动，加载更多的内容，页面的性能会越来越低。
无法定位到上一次浏览的位置，需要重新不断下拉回到同一位置。
网站右侧的滚动条变得无关紧要，反映不出数据量，当你以为快要接近底部，引诱你继续向下滚动，结果更多的内容又呈现出来。
缺少页脚，用户有时候需要查看某些信息，去页脚查看发现没有。这些信息可以展示在别的地方，或者加上「加载更多」的按钮来响应用户对更多内容的需求。
结论：无限滚动适用于用户没有特定目的的原创内容网站（Twitter，Facebook）或者视觉（Pinterest，Instagram）的网站和 app，分页则适用于用户在寻找特定信息的搜索结果列表，以及用户浏览位置重要的地方。谷歌的图片用了无限滚动，相对于文本搜索，用户可以更快地浏览和操作图片，文本搜索则需要花费更长的时间。
3. 使用无限滚动的建议
您是否注意过每天从各种应用收到的通知和提醒消息的数量？其中您真正关心的通知有多少？
每天用户都会被没用的推送轰炸，分散日常活动的注意力，并感到恼火。
恼人的推送通知是人们卸载移动应用程序的首要原因（根据调查受访者的比例为71％）。
当用户开始使用 APP 时，如果推送内容足以让用户「愿意被打断」，他们就不会那么在意收到推送消息，换句话说，这意味着推送消息必须让用户觉得足够有用和有趣。因此，为用户推送有感染力并使之愉悦的定制化内容才是关键。
推送通知是一项特权，因为用户信任你，才允许你直接向他们发送消息，你不能滥用这个特权。
为用户设计有用，相关和及时的通知非常重要。推送通知可以成为企业直接与用户沟通的强大工具，并在适当的时间和地点传递正确的信息，以促进互动。
译者注：作者在《Mobile UX Design: What Makes a Good Notification?》、《How to create effective push notifications》中提到推送通知需要注意几点：
适当的时间。尊重当地的时间，不要在用户睡眠的时候发送通知，比如国际化的 APP 针对不同的地区调整推送时间。Andrew Chen 收集了一些数据显示推送打开率在下午6点后更高，当用户参与度最高的时候，在下午6-8点时发送推送通知。
△ 图片来源：Andrew Chen和 Leanplum
限制次数。设置一个合理的推送次数，一些 APP 只要触发了与你相关的信息就会提醒你，过多的推送可能会引起用户的不适。
个性化定制不同的推送内容给不同的用户，推送对用户有价值的内容。比如根据用户的浏览历史做相关用户感兴趣的推送。
发送消息之前应该确定好目标，跟踪数据，确认推送是否达到了效果。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本文介绍在设计表单体验时，决定这两个控件之间的指导性原则和案例分享。表单提供了几个可以更轻松收集用户输入的控件。设计表单时，在正确的位置使用正确的控件是一项挑战。
复选框控件有三种状态：unselected（非勾选态）、selected（勾选态）和indeterminate（未确定态）。最后一个状态代表子选项列表在父选项下分组且子选项处于勾选态和未勾选态之间的情况。
切换开关代表允许用户打开或关闭物体的物理开关，如灯的开关。
点击切换开关需要两个操作步骤：选择和执行，但复选框只有一个选项，其执行通常需要另一个控件。
在选中复选框和切换开关控件之间时，最好关注使用的环境而不是其功能。
下面是一些在设计表单体验时决定这两个控件之间的指导性原则和案例分享。
案例1：即时回复
使用切换开关时，
1. 应用设置的立即响应是无需明确操作的。
2. 设置需要打开/关闭或显示/隐藏功能才能显示结果。
3. 用户需要执行不需要审核或确认的即时操作。
如果需要即时响应的选项最好选择使用切换开关
案例2：设置确认
使用复选框时，
1. 应用设置需要在提交之前由用户确认和审核。
2. 在显示结果前，设置定义需要执行提交、确定、下一步、等应用操作。
3. 用户必须执行其他步骤才能使更改生效。
如果需要显式操作来应用设置，则首选复选框
案例3：多项选择
使用复选框时，
1. 有多个选项可供使用，用户必须从中选择一个或多个选项。
2. 逐个单击多个切换开关，每次单击后等待查看结果是需要额外的时间。
在列表中选择多个选项，复选框能提供更好的体验
案例4：不确定状态
使用复选框时，
1. 当多个子选项在父选项下分组时，需要中间选择状态。中间状态表示在列表中选择了多个子选项（但不是全部）。
使用复选框最好地显示不确定状态
案例5：清晰的视觉状态
使用复选框时，
1. 有可能与切换开关的开/关状态混淆。有时很难理解开关是显示状态还是动作。
2. 需要提供明确的勾选状态或未勾选状态。
有时切换开关不能清晰地显示它是状态还是动作
案例6：相关项目
使用复选框时，
1. 用户必须从相关项目列表中选择选项。
用复选框显示要选择列表中的相关项
使用时切换开关时，
1. 用户切换独立的功能或行为。
独立项目可使用切换开关进行选择
案例7：单选项
使用复选框时，
1. 提供单个二进制是/否选择。
2. 只有选择或取消选择一个显而易见的选项。
单个是/否选项更适用于复选框
使用切换开关时，
1. 需要单一选择，并且您希望为开/关类型的决策提供两个选项。
使用切换开关可以最好地理解单个开/关决定
结论
重要的是在表格中的正确位置提供正确的控件使其更加用户友好。由于表单有很多很长的选项，若用户必须进行额外点击才能填写信息，对用户来说会变得枯燥乏味。提供的案例和指南会帮助你决定在表单中添加控件时选择复选框还是切换开关。
参考文献
1. Control and Patterns《控制和模式》
2. When to Use a Switch or Checkbox《何时使用开关或复选框》
3. Selection Controls《选择控制》
4. UX Design: Checkbox and Toggle in Forms《UX设计：表单中的复选框和切换》
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
前几天带大家学习了《牢记这9个排版设计要点，领导都无话可说了…》，今天给大家带来排版设计要点第二弹。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
最近《创造101》让 pick 一词大火，大家都在讨论自己 pick 了哪位小姐姐，pick 到一定地步的人被称为铁粉，极端失去理智的叫「脑残粉」，pick 让我想到了上瘾这个词。上瘾一词在我们生活中一直属于一个稍带贬义且指责的词，儿时妈妈会指责你吃糖上瘾，玩游戏上瘾，长大后小姐姐们会被说购物上瘾，甚至研究表明整容也会上瘾。最近拜读了美国斯坦福大学任教的尼尔·埃亚尔写的《上瘾》一书，感触非常深。如果从服务提供者角度看，上瘾的指责是不是也说明你的产品解决了用户的痛点，你为用户带来了情感满足呢？目录：
尼尔·埃亚尔写的《上瘾》中提出「上瘾模型」的概念，其中分为四大步骤：触发-行动-多变的犒赏-投入。
这四个步骤是一个循环的过程，当用户越沉迷于这个循环，那说明你的产品对用户的吸引力越强，反之当用户中断了这个循环，作为产品设计师就需要考虑我们在哪一步出现了问题，用户为何抛弃了你的产品，或者说用户是怎么「戒掉」你的产品。这其中的原因可能会很多样，比如用户找到了更好的撩动自己情感的产品，又或者你没有达到用户的预期。
那么怎么样才能让用户在有多个选择时，选择 pick 你呢？我试着把「上瘾模型」结合认知心理学中的「心智模型」，系统性的提出<锁定目标用户-触发用户-抓住动机-付出行动-情感撩动-情感满足-持续投入-pick> pick模型。
空间小游戏平台是国内领先的 H5 游戏平台，通过接入外部优质 H5 游戏开发商来提供角色扮演、休闲、策略、剧情、棋牌、双人pk 等六大类别的轻量小游戏来满足用户碎片化时间娱乐的需求。
平台分为4个 Tab，每个 Tab 都满足了用户相应的需求。
以下我想通过空间小游戏为案列，讲解 pick模型在实际运用中的指导意义。
触发分为内部触发和外部触发，触发要显而易见，行为要易于实施。
1. 外部触发
空间小游戏作为依附于手Q空间的一个入口级平台，我们可以很好的利用好友关系链的传播性，这也就是触发模型中的外部触发——人际型触发。由于平台的关系链属性，所以我们会把人际型触发当做外部触发的核心触发方式，因为好友之间的触发是相对其他触发方式更加稳固值得信赖的，当然付费推广型触发也是在产品冷启动时期常用的方式。人际型触发我们细分为自主型和被动型，自主的主要是用户通过分享游戏或者邀请好友的方式，被动的就是平台通过用户在游戏内的信息触发给他的好友。
人际型触发（主动型&被动型）是外部触发的核心触发方式。
自主型人际触发-邀请好友来平台玩游戏，通过展示游戏特点吸引用户点击进入，这就是典型的自主型人际触发方式，也是最容易形成病毒传播的方式。
被动型人际触发-在不透露隐私的前提下，通过好友在游戏内的信息吸引用户的关注进行触发，这种触发一般会使用在广告位和推荐位模块上，这样能尽可能的提高用户的安全感和认可度。
2. 内部触发
也就是用户自主的触发，情绪触发是主要的内部触发方式，尤其是负面情绪，当人厌倦，孤独，沮丧或者游离不定的时候会让我们体会到轻微的痛楚和愤怒，我们在内部触发这里需要抓住用户孤独，无聊的情绪波动。当用户无聊的时候，如果产品能快速的出现到用户眼前，并能消除用户的负面情绪，那么这就能让用户产生记忆点，每当这种情绪袭来的时候，用户总能想到你。
通过展示游戏的热度信息来吸引用户关注，在用户无目的性刷空间的时候，通过推荐热门游戏相关数据，然后与用户的孤独情绪产生碰撞。
总结：触发是让产品卖出去的第一步，而有效的触发才是成败的关键点。有时候内部触发和外部触发并不是独立存在的，在不同的场景下两种方式是可以做到相互结合的。触发方式千万种，最适合自己产品的触发方式才是最好的。
人在做出行为时有两个基本动因，一个是该行为简单易行，二是行为主体有这个主观意愿。
上一步我们已经通过各种方式触发了用户，这个时候就需要用户能做出行动。在我们空间小游戏这个案例里，用户点击游戏 logo 时，我们有过一个很大分歧，那就是用户在平台或者广告位上看到游戏 logo 点击后，是直接进入游戏还是需要一个游戏详情页去介绍游戏。
两种方式都有各自的优势，即点即玩能快速的让用户进入游戏，能提高转化率，游戏详情页能让用户更好的了解游戏内容，再进一步确认是否去玩这个游戏。
针对这两个方案，我们最终选择前者-即点即玩，因为我们考虑到 H5 游戏都是属于比较轻量的游戏，所以我们希望用户能形成一种认知，平台内所有游戏是轻量的，便捷的。所以在面临方案选择时，回头看看产品的调性与特点，可能能帮助我们做抉择。
而针对已经玩过平台内游戏的老用户，我们必须能让用户在下次想开启游戏时快速的找到玩过的游戏。根据后台数据我们的用户平均在玩的游戏数量是2.9个左右。最后我们选择在小游戏首页顶部位置设立一个最近在玩模块，首屏展示三个，可滑动和查看更多，希望能让用户快速的找到玩过的游戏。
所以触发是有分新用户和老用户的区别的，针对新用户我们更多的是需要拿内容去吸引他们，而老用户则需要能让他们快速的找到自己已经玩过的游戏。所以触发要简单易行，主观意愿是需要我们去引导和吸引的。
优秀的游戏总是能持续的撩动用户的情感，让人在游戏中得到满足感，成就感。我们平台所有游戏都是第三方公司提供，我们没有权限对游戏内容进行过度的参与，我们只能尽可能的把最优质的游戏筛选进来，所以在情感撩动和满足上我们不能完全依赖开发商的游戏质量和设定。所以必须在我们平台的体验上给用户一些噱头，一些小目标，让用户在平台上也能得到情感满足。只有这样，用户才能对平台产生记忆点和依赖，这才是我们想要达到的目标。
从平台的角度我们希望通过<社交属性，奖励机制>两个方向去撩动用户的情感，用户可以在社交里面找到荣誉感（晒自己的游戏等级和战绩）,也可以在多变的奖励机制里面不停的完成一个又一个的任务而获取相应的奖励。
1. 社交属性
游戏社区，让充值玩家可以有地方炫耀自己获得成就感（名称附带游戏等级和荣誉），让普通玩家也能通过社区了解更多游戏攻略，甚至可以在这里与陌生人交友（点击头像可跳转手Q资料卡）。
2. 奖励机制
总结：多变的福利奖赏会使大脑中的伏隔核更加活跃，并且会提升神经传递多巴胺的含量，促使我们情感产生起伏，然后一旦情感被满足，我们将会持续的投入下去，比如更多的时间，更多的金钱。
人为什么会进行投入，投入行为背后的大思路是利用用户的认知，就是用户会认为投入越多，服务越好，得到的情感满足越丰富。当然事实也的确是这样的，投入的阶段我们需要让用户对未来的奖赏（心理，福利）抱有强烈的期待，这样才能让用户持续的投入。
比如我们在设计 VIP 体系时，随着 VIP 等级的提升，用户所拥有的特权就会不断增加，通过特权的吸引，当用户在游戏体验中发现了比较困难的任务时，我们就会提醒用户是否去升级 VIP，让通关更轻松，用户将很难抵挡这种特权满足。
又比如我们设定每周三为积分翻倍日，用户可以得到更多的积分，我们不断丰富积分商城的兑换物品，持续吸引用户的注意，让用户不断去期待新奖励。
我理解的 pick 是一种充满信任感的选择，这种选择会让用户去把产品分享给自己的好友，会在社交平台上讨论产品。但是能让用户 pick 你，并不是一件简单的事情，就好比你 pick 创造101小姐姐时，你可能会关注小姐姐的样貌、才艺、背景、人设，这些都是影响你产生认同感重要的因素。
我们做产品何尝不是这样呢，如果你的产品没有解决用户的痛点，没有让他产生愉悦的情绪，你就会被「淘汰」。用户的投票都是在符合自己心智模型的基础上做出的选择，pick 模型的设计目的就是将用户遇到的问题（情感需求）和我们作为设计者的解决方案频繁的联系到一起。
让用户对产品产生习惯，是我们的终极目标。而如何让用户产生使用习惯，不是一朝一夕能达成的，这需要产品不断的迭代优化，让你的产品不断的解决用户变化多端的需求，那么忠诚就随之而来了。我们回顾一下 pick 理论，从更简单理解的角度来看，可以分为<触发-持续解决问题-养成习惯>，这里的难点属于第二步，当你的产品能不断解决用户的问题，养成习惯只是水到渠成的结果罢了。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
《名侦探柯南》中总是提到福尔摩斯的一段话：「When you have eliminated the impossible, whatever remains, however improbable, must be the truth.（排除一切不可能的，剩下的即使再不可能，那也是真相。）」这句话用干扰效应来解释最好不过，本期我们来聊聊。
想看更多设计法则，这个专题里全都有：设计法则专题
干扰效应：一种现象，同时思考两件或两件以上的事情时，思考的过程会变得比较慢，也不准确。
有两种或两种以上的知觉或认知过程发生冲突时，就会产生干扰效应。
人们的知觉和认知的不同与心智模型有关，这些模式会独立分析、处理收到的相关信息，处理后会传送到工作记忆区，并作出诠释。当输出资料一致，诠释过程会又快又好。当输出资料不一致，就会产生干扰，需要一些其他的处理，以便更好地解决。解决这些问题需要浪费很多时间，对性能也会产生不好的影响。
1. 斯特鲁普干扰
斯特鲁普干扰（Stroop Interference）：刺激物不相干的一面引发了思考过程，因而干扰了刺激物相关方面的思考。
图标协同文字可以准确的向用户传递所要表达的内容，二手在常用的 App 中截出了一些图标，却发现现在很多的图标在信息传达方面有所欠缺。
举四个例子：
下面这组图标，「地方菜系、美食、晚餐、大牌简餐」几个图标没有表达出所要传达的信息，还有几个图标要借助文字才能表达出其含义。即使图标设计的非常精美，但是图标功能却存在缺失，而且这几个图标不能刺激用户对信息的理解，反倒是让用户更加迷惑。设计师也注意到了这个情况，所以最近改版后，信息传达变的更加直接，减少了干扰。
接下来的这组图标也存在同样的问题，这组图标想借助图标上产品本身的含义来传达给用户要表达的信息，但是这需要用户对这些产品本身的定位非常明确，如果不明确的话只能干扰用户的行为，例如，用户需要知道「吕」是个韩国洗发水之后才能拐弯抹角的联想到「全球超市」，再例如：中间「轻奢」图标，用的是劳力士绿水鬼，一款70000+还要靠等才能买到的奢华手表，二手认为跟轻奢的定义有矛盾，除非这并不是劳力士。
米家这套图标二手认为可以准确传达所描述的信息，因为米家有种类繁多的 loT 产品，有时候一款产品更是分为不同的版本，如果用户只是根据名称选择的话不仅繁琐而且十分耗时，所以在选择产品时，米家把所有产品外形准确刻画成图标，用户可以先根据自己产品的外形大致选择型号，再根据文字提示准确的选择自己产品的版本。
△ 米家App图标
滴滴这套图标表达也很准确，不同的服务通过不同的图标可以准确传达。
△ 滴滴图标
2. 加纳干扰
加纳干扰（Garner Interference）：刺激物一个无关的变化，引发了思考过程，干扰到跟刺激物相关的思考过程。
举个例子：如下图，指出单独一排的形状，比指出两排其中一排的形状要简单。两排形状紧靠在一起，激发了想说出旁边形状的思考程序，造成干扰。
根据上面这个案例，二手联想到了「个人中心」页面，大部分「个人中心」页面都选择了竖排列表布局。列表布局就是以列表的形式展示具体内容，并且能够根据数据的长度自适应显示，Material Design 建议列表是「可快速扫描」，适合显示类似的重复的内容。列表布局也是最快速的 app 布局方式。这种排列在某方面上就是降低了干扰。相比于列表布局，宫格导航是将主要入口全部聚合在页面，让用户做出选择。这样的组织方式无法让用户在第一时间看到内容，选择压力较大，采用这种导航的应用已经越来越少，往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。
△ 列表布局和宫格导航
3. 前向干扰
前向干扰（Proactive Interference）：现存记忆干扰了学习。
举个例子：手淘的最近改版中，店铺首页顶部导航和底部自定义菜单结构化调整，但是有一个细节的变化让二手不断的犯错——返回按钮改成了关闭按钮，二手习惯点击左上角返回按钮来返回上一级菜单，改版后依旧习惯点击左上角，但是打开的是店铺印象，仅仅是图标左右位置简单的调换，已经让二手在使用的过程中挫败感强烈。这就是现在的使用记忆已经严重干扰了学习。所以产品在改版迭代的时候，尽量不要干扰用户已经熟悉的路径或是破坏用户使用习惯。
△ 手淘的店铺首页改版
4. 后向干扰
后向干扰（Retrosctive Interference）：学习干扰了现存记忆。
这个正好跟上面相反，二手不断培养现在的使用习惯，渐渐的就忘记了上一版的路径。
要想预防干扰，就要避免输出思考过程中相互冲突的设计。知觉的干扰效应，通常是因为信息的传达过程中有歧义，或是因为把互相干扰的元素结合在一起。要把干扰效应降到，首先要求设计师用准确的设计语言传达信息，如果这样还是无法让用户很好的理解，其次可以考虑利用文字或者引导来告知用户。
人人都是产品经理 2018-08-10 15:41:33
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
注册模块是每个产品必不可少的一部分，也是大部分产品经理着手设计一个产品时遇到的基础部分，在这里通过这个教程分享如何使用Axure中的动态面板实现获取验证码倒计时功能。
在开始前我们需要把梳理下思路，简单的把任务流程理出来，帮助我们理解制作过程中的原理。
先来看看效果：
下图中左边为使用倒计时功能时的任务流程，右边为流程对应的四大部分，每部分有具体的小步骤，接下来会根据每个小步骤进行具体的描述。
从元件库中拖入一个主要按钮放入画布空白处，命名为“获取按钮”（可以随意命名）
然后再拖入一个动态面板放入画布中，命名为“循环面板”，并且双击该动态面板，添加一个状态2“State2”，这里就可以看成‘初始’和‘结束’的“容器”。
接下来创建一个全局变量对该“容器”进行记录。
为“获取按钮”这个元件添加一个交互样式，该按钮「禁用」时，填充颜色为灰色。
为“获取按钮”元件添加用例，当「鼠标单击时」，设置动作为「设置面板状态」在动态面板“循环面板”上，选择状态「Next」，勾选「向后循环」，「循环间隔」为‘1000’毫秒，取消勾选「首个状态延时延时1000毫秒切换」。
添加第二个动作「禁用」，选择“当前元件”。
为动态面板“循环面板”的「状态改变时」添加第一个用例，并给该用例添加条件，条件设置为「变量值」，「TimeValue」“>”「1」。
继续添加全局变量中的「设置变量值」，勾选「TimeValue」，更改值为[[TimeValue-1]]。
添加第三个动作「设置文本」，勾选“获取按钮”，更改值为[[TimeValue]]秒后可重新获取。
为「改变状态时」添加第二个用例，设置当不满足第一个用例所设定条件时执行的动作。此处有4个动作，分别是：
第1个动作是「设置文本」为“获取按钮”的文字值是“重新发送验证码”。
第2个动作是设置全局变量中的「设置变量值」，勾选「TimeValue」，更改值为“60”。
第3个动作「启用」，勾选“获取按钮”。
第4个动作为「设置面板状态」与动态面板，勾选“循环面板”，选择「停止循环」。
以上就是所有的制作步骤，最终的效果就像文章开头中所示的样子，在这个过程中，我们其实已掌握了两个重要的知识点：一个是动态面板的循环实现方式，第二个是通过全局变量来设定时间值。
这两个点在其它地方也会经常用到，掌握后能够更加灵活运用在其它地方。
希望大家能够尝试多练习几次，几次尝试后就会理解其中的关键点，也希望大家能够养成一种习惯，在进行练习前对任务流程进行梳理，这样对理解逻辑更有帮助。
本文由 @ 杰森 原创发布于人人都是产品经理。未经许可，禁止转载
人人都是产品经理 2018-08-09 16:42:43
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
如何推广产品，提升销量的“套路”，我们能在互联网上翻到很多，而这其中的底层逻辑，始终是依据消费者行为和心理来做调整。本文总结了15个消费心理学的理论，希望对你有帮助~
同志们，好久不见！一个好的产品，加上强大的市场策略，等于“BOOM”！
如何推广产品，提升销量的“套路”，我们能在互联网上翻到很多，而这其中的底层逻辑，始终是依据消费者行为和心理来做调整。在消费者做出购物决策的时候，一定会存在“认知偏见”，太客观的事情不会很多。
1.模糊效应（Ambiguity effect）：人们倾向于避免选择未知的选项，似乎每个人都喜欢确定的选项。比如，一个用户不明白你的产品，或者某个特定的功能，他将不会选择它。
2.沉锚效应（Anchoring effect）：人们在对某物/人做判断的时候，容易受第一印象，或第一次获得的信息支配，就像沉入海底的锚一样，把人们的思想固定在某处。比如，某消费者第一次看到某产品的价格，那么这个第一印象的价格，将对该消费者产生巨大的影响。
假如，第一次的价格显示为90元，第二次再见是45元，那么这个45元的价格对该消费者来说，是特别便宜的，他很有可能购买，相反，如果价格一直是45元，那么该消费者并不会感到便宜实惠。
前段时间，我看到一家青年公寓的海报上写着“······房间天天特价！”这是“沉锚效应”的错误应用，这时候的“天天特价”实际上在消费者心里变成了“并不是很特价”，因为对比起来，天天都是一样的价格，似乎今天也没有特别优惠。
可怜的是，这张海报估计已展示数月。
3.注意力偏见（Attentional bias）：我们的看法，受我们重复的认识所影响。所以我们常常有这个结论，一个消费者越频繁地看见你的广告、消息，他越有可能从你这里产生购买。比如，我们使用“访客找回”技术在互联网上投广告；让CTA按钮贯穿整个引导页面；在线上线下特定区域内，轰炸广告。
4.可利用性法则（Availability heuristic）：在很多时候，人们只是简单地根据事情已有的信息，包括回忆、简单的计算、简单的总结来确定事情发生的可能性。
比如，由于1929年股市大崩盘的痛苦记忆，许多投资者在灾后一直不敢入市，担心再次蒙受巨损，从而高估股价下跌的概率，等到股价上窜的时候，觉得“这股价虚高，还会跌的”，接着，股价仍然上窜并到高位，投资者们心乱了。
比如，路边上的“江南皮革厂倒了，老板跟小姨子跑了········”，3折甩卖皮具，想买真皮具的消费者并不会围观上去，因为他们很容易简单地推测出来，这是假的。而上去围铺的人多是大妈，只是想买一个便宜包，并不真觉得“皮包如此便宜”。
5.可利用性叠加（Availability cascade）：在一个群体中，如果大部分人主动或者被动相信一个信念、事情，那么这个信念、事情就会变得越来越合理。一句话说就是，只要长时间重复一件事，这件事就会变成事实。
当我们的网站、品牌、产品反复地被讨论，我们就成功一半了，即便有存在消极的声音，也是无害的。三个人，有两个人赞美，一个人贬损，那么结果等于赞美；三个人，有两个人贬损，一个人赞美，结果等于贬损。
6.逆火效应（Backfire effect）：当一个错误的信息被更正后，如果正确的信息与原本的看法相违背，它反而会加深人们对原本错误信息的信任，最终导致，把自己的看法认为成理所当然。当大脑接受一个信息后，便会本能的捍卫它不被其他与之相斥的信息侵犯。
7.基础概率谬论（Base rate fallacy）：人们要么总是忽略事物的基础信息，要么总是忽略事物的特别信息。推广产品，一定不要仅仅展示一堆无聊的信息（型号、数据、功能等），还要展示你的产品在特定的情况下是如何特别工作的，运用案例说明也好，运用用户评论也好。
8.偏见盲点（Bias blind spot）：人们总是认为自己比别人会更少地受到偏见的影响，或者有能力识别认知偏见。面对自己的愚蠢，人们总是不易察觉。
9.啦啦队效应（Cheerleader effect）：“群体”“大量”总是对人们更有吸引力，展示产品的时候，尽量多堆数量，堆积如山的产品给消费者的感觉是很好的，且更容易激起购买欲。
10.支持选择偏误（Choice-supportive bias）：人们倾向于对自己已作出的决定持积极的态度，哪怕这个决定并不是多优秀。
如果你的消费者作出了一个选择，鼓励他，然后他们将会长时间地认为他们做了一个优秀的选择。在消费者购买产品以后，总是发短信/邮件表示祝贺购买。
11.聚类错觉（Clustering illusion）：人们倾向于将随机事件中不可避免的小样本归结为某种有意义的规律。
比如，棋牌中的连续胜利，我们归结为“这是运气”，连续输归结为“这是手背”，实际上，连续一段时间的输/赢，在长时间赌博中是必然存在的，没有运气与手背之言。
如果你想说服你的用户，请将你的信息、数据放在大数据、大背景、大趋势之下，这样，用户会很容易相信你的陈词。我们会认为人工智能产品是未来的主流产品，而不会认为低科技含量的产品是未来的主流产品。
12.诱饵效应（decoy effect）：它是在消费品的选择中被发现的，现在已经被证明是相当普遍的现象。消费者在作出决策时，很少不做对比而直接购买，这时候，商家为了消费者更好更快地做出购买决策，往往会为目标产品提供一个“诱饵”，以促使消费者购买。
比如1，在《经济学人》杂志的销售广告上：
电子版订阅的价格是59元/期；
印刷版订阅的价格是125元/期。
是的，这都是很正常的价格，接下来的操作，运用了“诱饵效应”，电子版订阅+印刷版订阅，你猜多少钱？
依然125元/期。
比如2，前段时间我去逛ME&CITY，大家知道，一般同一时间在同一家服装店，很难同时卖给一个顾客两件商品，尤其是对于男顾客，所以ME&CITY店做了一个活动：
“购买任意一件衣服，再加一元，可获得纯棉袜子一双！”
这是“诱饵效应”的运用，衣服是目标销售产品，“1元钱购袜子”是诱饵。类似的操作还有，卖场里的帽子和毛衣是摆放在一起的，标签上标出的价格分别是：帽子49元，毛衣299元。但是，值得思索的是最后一行字：帽子+毛衣=299元。
13.曝光效应（The exposure theory ）：它是一种心理现象，指我们会偏好自己熟悉的事物，我们把这种只要经常出现就能增加喜欢程度的现象叫做曝光效应。
扎荣茨（Zajonc）曾经做过一个有趣的实验。他让一群人观看某校的毕业纪念册，并且肯定受试者不认识毕业纪念册里出现的任何一个人。
看完毕业纪念册之后再请他们看一些人的相片，有些照片出现了二十几次，有的出现十几次，而有的则只出现了一两次。之后，请看照片的人评价他们对照片的喜爱程度。
结果发现，在毕业纪念册里出现次数愈高的人，被喜欢的程度也就愈高；他们更喜欢那些看过二十几次的熟悉照片，而不是只看过几次的新鲜照片。
也就是说，看的次数增加了喜欢的程度。ps. 对方实在太丑的情况除外。
14.框架效应（Framing effects）：指同一个问题通过两种不同的表达，会导致不同的决策判断。
一项相关研究，面向同一群人提出问题：现在，美国正准备对付一种罕见的亚洲疾病，但因为资源有限，所以只能救治一部分人，现有两种拯救方案可供选择。
（1）200人将被救治。
（2）600个人中，只有1/3的人能被救治。
问，你愿意选择方案1还是方案2？结果大部分人倾向选择方案1，因为方案1给人的感觉是“拯救机会”；方案2给人的感觉是“舍弃”。“舍弃”意味着死亡的风险，面对风险，人们是厌恶的。
因此，在日常文案中，我们即使不能给予用户“获得感”，也不要展示出“风险感”给用户。
15.The Adrenaline effect：（ps. 抱歉呀，这个理论我不知道怎么翻译成中文）大概意思指，用户对某产品有意图，但并不一定会想购买，只有当用户的肾上腺素被激发时，短时间内，迫使用户做出购买决策。
在销售中创造出紧迫性，是非常有必要的，创造紧迫性就等于在限定时间内激起用户的肾上腺素。
该理论建议，在营销过后的销售环节，要创造出紧迫性，促使用户下单，比如，限时折扣、限时抢购、定时开团、倒计时拼单等。
最后，说了这个么多个理论，是不是感觉有点凌乱了，Guys！
通常情况下，消费者在作购买决策的时候，都需要经过3大层面的思考。是的，这是最后一段提纲挈领的话了。
朱小磊，微信公众号“非主流朱（ID：feizhuliupig）”，人人都是产品经理专栏作家，营销顾问，曾17岁独立策划了一个游戏平台，月盈利近20万。擅长以青年消费者为目标群体的市场营销分析策划。目前已服务过多个企业，涉及教育产品、营养品、快消品等。
本文原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自Unsplash，基于CC0协议
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
做产品，绕不开「需求」二字。很多产品从0到1需要团队付出很多努力，但如果在把握用户需求的时候出了错误，再好的团队、再牛的执行力、再牛逼的技术也阻止不了项目的失败，所以，分辨用户需求就成了产品的关键。
需求有「真需求」，也有「伪需求」，「真需求」可以实现用户的强关联，从而实现产品的稳定增长，而「伪需求」要么无法获得用户，要么昙花一现。比如魔漫相机，超级课程表这类曾经的「现象级」产品，在短暂的疯狂后迅速被用户抛弃，其实都是因为没有正确识别用户需求。
那么，如何找到买家真正的需求呢？
「黄金圈法则」是西蒙·斯涅克在《从为什么开始》中提出的一种思维方法。
他用三个同心圆来描述人的思维模式，黄金圈从外到内依次是：做什么（what）、怎么做（how）以及为什么（why）。
黄金圈思维可以让人们穿破事物的现象，看到事物的本质，从而做出最佳决策。
它不仅可以用于自我激励和成长，同时也可以应用于营销、管理与沟通等领域，而我们今天要重点讨论如何用它来识别真需求及伪需求。
what（用户反馈）、how（用户行为）、why（真正的需求）：
通过这三个层面，我们可以发现需求、验证需求，进一步挖掘需求，最终识别出用户真正的消费动机，从而找到有效的解决方案。这三个步骤形成了一个「需求验证漏斗」：
what层面是用户评价和用户痛点，它让你「发现可能的机会」，但这个机会不一定会形成需求。
比如你要做零售产品创新，那就可以直接去淘宝，看同类产品的买家评价。尤其是差评，就是等待你解决的「痛点」。
身边的朋友都抱怨淘宝上买东西经常要找好半天，找不到自己喜欢的，那么「产品多、筛选难」就是个待解决的「痛点」。
隔壁养金毛狗的女孩经常抱怨狗粮太重快递又不送上楼，减肥成功的男士原来的衣服都不合身了，这些我们平时很容易发现的抱怨类的信息，就是用户使用产品过程中的痛点，也都有可能成为新产品的机会。
发现机会，并不代表我们要立刻开始寻求解决方案，因为需求可能只是伪需求，或者根本就不具备任何可行性。
1. 需求本身是「伪需求」，用户对问题表述「错误」或者缺乏对解决方案的「想象力」。
就像乔布斯说的那样：「不要问客户他需要什么，因为他们根本不知道。」在平板电脑出来之前，用户并不知道自己需要一台完全没有键盘的电脑。
2. 项目不具备可行性
比如消费人群不够大，对这类「硬造性场景」感兴趣的都是小众，无法落实到真实的大众生活里去，产品无法扎根；就像现在的O2O上门服务，大多都是伪需求，上门洗车、上门美容都属于这一类，消费频次太低，而且家对于多数人来说是个非常私密的地方，并不希望陌生人到访。
What层面会呈现出的「需求」，我们并不能马上开始基于这个层面去寻求解决方案，而是要通过「how」来进行进一步验证。
「how」就是「用户行为」。用户反馈可以说谎，但行动不会。
一个女生说我选老公的标准是：这个人要孝顺，帅气，结果她选择了一个有钱人；
一个男生说我选择老婆的标准是：要善良，结果他选择了一个漂亮身材好的人；
小岛居民经常说他们讨厌穿鞋子，因为鞋子会经常进沙子，但实际上他们依然在穿鞋。
也就是说，用户经常「说一套、做一套」。
比如你问用户喜欢什么颜色，十个人中可能有五个告诉你他喜欢绿色，但如果你真的生产一堆绿帽子然后就没有然后了。
还有我们一开始提到的「魔漫相机」，你如果采访用户的话，十个人可能有八个告诉你他非常喜欢这个应用，但实际上他们玩一次之后就把它抛弃了，因为「烂大街」了，用户只是在跟风，他本身根本没有这个需求。
因此，判断需求不能只是听用户怎么说（what），一定要通过看他怎么做（how）来验证。
那如果验证了之后发现用户「言行不一」，是不是需求就不存在了呢？也不是，我们要跳出用户的思维，从主动的角度，也就是「why」这个角度去挖掘用户的真正需求，开发解决方案。
Why是用户反馈及用户行动背后的原因，找到这个原因，才能最终验证需求是否是真需求，也决定了用户最后是否会为你的解决方案买单。
我们先拿「小岛居民的鞋子」来举例：
小岛居民鞋子很容易进沙子，这就是一个痛点，也就是what层面的需求。
如果要解决这一痛点，是不是就提倡大家不穿鞋呢？这要从how这个层面来判断，也就是用户如何表现，结果发现虽然鞋里经常进沙子，大家依然在穿鞋。
最后经过调查我们发现，沙滩里面有很多碎贝壳，不穿鞋会划伤脚，所以，「不能划伤脚」比起「进沙子」的需求显然是更为迫切，因此，用户的真实需求是「舒适地行走在沙滩上」，那么解决方案不是提倡大家「不穿鞋」，而是提供一双舒适的、不会积沙的鞋子。
再说一个我身边一位朋友创业的真实案例：
朋友安妮是个喜欢喝奶茶的女孩子，她几乎每天都要喝上一杯。在某天和同事讨论奶茶的时候，她们开始吐槽奶茶的各种不好，尤其是「不健康」，奶茶的主要成分是植脂末和茶粉、淀粉，不仅不健康，而且容易长胖。安妮上网搜索了一下相关信息，发现很多买家都对奶茶的不健康有所担心。
于是，安妮决定开个店铺，专门做「健康的奶茶」。
但实际上她的店铺开张后生意却非常冷清，除了一开始有些熟人会过去捧场，大多数时间店里都是门可罗雀。
安妮的奶茶确实做到了健康，完全用纯牛奶和新鲜的茶叶冲泡，糖都是用的上等的果糖。
但为什么大家现在反而不喝呢？
因为「需求」把握错误。
消费者在抱怨奶茶不健康的时候，他不是想要健康的奶茶，而是想要口味不变、价格不变、包装漂亮、环境舒适的情况下，更为健康的奶茶。
我们如果再向why层面进行探索，就会发现问题的实质：
为什么大家要喝奶茶，如果想要追求健康，为什么不是果汁、酸奶、牛奶、咖啡？
因为奶茶好喝，口感丰富、有层次、有趣味，这是其他饮品无法比拟的。
到此为止，我们会发现，用户的真实需求其实是「好喝而有趣的饮料」。
对于大多数饮食类产品，口味绝对是第一位的，牺牲口味而满足用户的其他需求一概是伪需求。
在「七宗罪」中有一条是「贪食」，喜欢美味的食物是人的天性，大多数人只有在真的生病之后才会在乎健康，在这之前，他愿意为了绝妙的口感冒第二天中风的危险。
由此可见，由发现需求到验证需求，是要经历「how」层面直接的验证，同时追索到「why」层面进行分析才能最终确认。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在工作中，有时会遇到这样的一个现象：自以为是最优的设计方案，用户却并不会按照预期的方式使用。每每发生这样的事情都会让我很困惑，用户为什么不听话呢？
试想这样一个场景：假设有电话打进来，你却没有接，试想一下可能有哪些原因导致了「没接电话」 的这个行为呢？
问题可能出现在三个方面：
通过上述的例子不难发现，用户的行为是受多种因素影响的，我们姑且将这些影响分为三类：动机、能力、触发。
现在试着用这三个要素来分析一个身边的案例：虽然我知道这样不好，但是我依然热衷于打王者荣耀，这是为什么呢？
1. 动机
王者荣耀作为一款游戏，自带着「好玩」 的属性，可以让玩家在其中获取快乐，抵御痛苦；另外，来自朋友的邀请、因为玩游戏游戏而带来的谈资、通过提升段位获得的群体认同感等等都可能成为强有力的游戏动机。
2. 能力
王者荣耀成功的将 DOTA、LOL 等 MOBA 游戏从 PC 端迁到移动端，只要拥有一部智能手机和一个稳定的网络环境，随时随地都可以拿出手机玩上一局王者荣耀，MOBA 类游戏的设备门槛从未被如此降低；另外，游戏的操作、套路等等也被极度简化，没有了 PC 端 MOBA 游戏极高的学习门槛，让更多人可以具备加入这款游戏的能力。
3. 触发
来自朋友的邀请通常无法拒绝，这就是依托于社交的病毒式传播所具有的巨大威力，当茶余饭后，朋友喊你一起开黑时，一次有效的触发就已经达成了。除此之外还有来自官方的 push 消息、微信中的每周战报等等，这些都在不停地触发用户，让玩家不断强化对于游戏的印象。直到有一天，当你闲来无事的时候不由自主的想到拿起手机打一局王者荣耀，这时它就已经达成了来自玩家内部的触发，成为了你的一个习惯。
拥有强烈的游戏动机、具备参与游戏的能力、再加上合理的触发机制，这些因素共同造就了玩家热衷于打王者荣耀的行为。
由上述案例可以看出，动机、能力及触发这三个因素对于用户的行为有着十分重要的影响，而且如果你仔细思考会发现，这三个因素不仅仅适用于上述的案例，而是可以用来解释绝大多数场景下用户行为产生的原因，所以接下来我们展开分析这三个影响用户行为的关键因素。
1. 行为动机的根源
用户的行为动机大致可以分为三种：
追求快乐、逃避痛苦：用户更加喜欢能够快速带来快乐的产品，例如微视等短视频产品，让用户通过快速消费几秒钟的短视频就可以马上获取快乐，这也是越来越多的用户沉迷其中的重要原因之一。
追求希望、逃避恐惧：用户也会为了追求希望/逃避恐惧做出许多下意识的行为。例如我曾经观察到，很多人在点击保存文件时会连续点击多次工具栏中的保存按钮，或者多次在键盘上按下「Ctrl+S」 的快捷键，这样的行为大概是害怕不小心丢掉自己的劳动成果。这种下意识的多次点击保存的行为，就是「追求希望、逃避恐惧」 的一个具体表征。
追求认同、逃避排斥：人是具有社会属性的，我们都会追求他人的认同，避免被他人排斥。因此在社交网站上的点赞、评论、转发等互动往往会给作者提供源源不断的创作动力，其本质上是人类追求他人认同的心理成为了强有力的驱动力。
2. 能力限制
用户的能力限制来自六个方面：时间、金钱、体力、脑力、社会偏差、非常规性。
前四种能力限制比较容易理解，在此不做赘述。
社会偏差，是指他人对该项活动的接受程度。例如曾经在社交平台中随处可见的「不转不是中国人」 、「为了家人转起来」 之类的绑架式传播，现在已经很少见了，因为大家都不喜欢这样的东西，所以当用户遇到类似的内容时，也不太容易选择转发了。
非常规性，是指该项行为与常规活动的匹配程度或者矛盾程度。例如大型超市会在用户的常规的行动路线上放置一些小商品，这样用户就很可能会产生计划外的购买行为，如果放置小商品的位置与用户常规的行动路线不匹配，甚至互相矛盾，显然就达不到引导用户产生额外购买行为的目的。
3. 触发方式
触发大致可以分为外部触发和内部触发两种。
外部触发可以理解为产品为了触达用户而做的事情，又可细分为四种：
付费型触发：通过付费的形式进行推广，最常见的就是广告，商家花钱做广告，使其产品让更多人知道。
回馈型触发：通过正向反馈获取的曝光，例如产品在应用商店的排行榜中位于榜首，自然会获得更多的触达用户的机会。
人际型触发：通过口口相传的方式触达用户。
自主型触发：产品自主产生的触达行为，例如新闻APP 每天在固定时间 PUSH 的新闻给用户，久而久之，即使一个不怎么经常看新闻的用户也会知道有这样的一个 APP 可以查看新闻。
相较于外部触发，内部触发则显得更加有价值。内部触发是指用户的内在情绪/情感等驱动而触发的用户行为，这是所有产品的最终目标。例如用户发现通过玩某款游戏可以治疗「无聊」 的情绪时，一旦其产生无聊的情绪，就会自然而然的想到玩这款游戏。这样产品就与用户建立了一个内在的良性联系。
外部触发往往是昙花一现，而内部触发才能真正让用户产生习惯。
总结起来，用户的行为规律是有迹可循的，总体上符合这样的一个模型：
行为（Behaviour） = 动机（Motivation） + 能力（Ability） + 触发（Trigger）
如果一个产品/功能使用起来比较难，则需要用户有较高的动机，再加上合理的触发，才能让用户的行为触发成功；反之，如果用户的动机较低，则必须让产品/功能非常易于使用，再加上合理的触发，才能让用户的行为触发成功。动机、能力、触发三者共同制约着用户的行为，缺一不可。
因此，如果再遇到「用户不听话」 的情况，不妨用这个模型来检验自己的产品/功能是否存在问题：用户的使用动机是否较低？使用难度是否太大？是否合理的触达了用户？相信这样一轮检视下来，总会有一些收获的！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
之前一直觉得色彩，图形，字体是 UI设计的三大构成，任何设计都是从这三大元素开始的，所有的 UI设计都是由这些构成的，但是却忽略了界面中空间的运用，也就是我们常说的间距。今天我想分享下几年前从 Google 的 Material Design 以及 8 pt grid 中学到的关于间距相关的教程，这篇分享有助于我们处理好界面间距一致性问题，让设计更加统一，同时定义规范里面的原子设计方法，能完美融合。
间距无处不在，界面中的边距，距离上边，左边，右边，顶部等各种属性。因此作为一名设计师，我们需要很好的掌握各种间距规律，通过间距规律很好的组织好内容。
是否大家和其他设计师在合作过程中，经常打开一个设计师源文件时候，发现各种间距大小，各种不一致地方，明明同一个页面，已经定义好规范，但是每个人使用的间距大小不一致。可能你们规范已经定义好了，最小单位是5，按照5的倍数去做设计，但是还是会出现各种奇葩的间距，10，12，18等等。或者说有的设计师是按照5来说的，间距会出现10，15，20，25，30，很难解释清楚哪种场景下用什么样间距规则。
不止是设计师，估计研发打开我们标注稿都是崩溃的。所以我们需要去统一间距规则，它的优点是能很好的让设计师之间合理的了解我们间距系统规则，同时开发在做设计开发时候，不需要每次都重复开发不同间距，导致整个 APP 风格混乱，那么我们如何去做呢？
对于设计师：效率上，减少决策和思考，当我做一个需求时候，我不需要考虑到底用多大间距，同时能保持元素之间的节奏。
对于团队：设计师和开发之间沟通更加简单，开发人员能很好的按照最小单位按照增量递增去写间距，而不必每次都进行测量。
对于用户：他们信任的品牌有一致性的美感，在设备上没有模糊的像素偏移等，就和微信一样，说不出哪里好，但就是最好的。
△ Material Design 在他的布局中有讲过，他们的间距，所有间距规则都是在8的倍数上进行递增，而且并不是毫无头绪的递增，只定义了几种增量关系，克制的有序的间距弹性，最小的是8，16，24，32，48，56，72。
△ 同样在 iPad端，间距规则也是有序的，克制的间距弹性，而不会出现我们日常设计中经常间距随意任选的使用，毫无规则乱用。
△ 在 Airbnb 的规范中，PC 和无线所有设计间距规范原则只定义了5种，8，16，24，48，64让规则更加简单，更好的统一了整个风格的一致性。
这些原则除了在元素和元素中运用，其实在按钮中，在按钮里面文字和上下左右的距离，都是有序的，我特别喜欢一句话，设计语言只有在有序的遵循和重复使用下才有用。
1. 定最小原子单位
这个最小间距规则可以是3的倍数，像蘑菇街、豆瓣一样，如果你希望产品留白比较多，也可以是5的倍数，例如 pinterest、亚马逊等，这个没有绝对的，一切根据你们产品内容丰富程度决定。
△ 亚马逊和 AliExpress 都是按照5为倍数来做间距增量
2. 确认间距弹性
大家都买过衣服或者鞋子，一般鞋子尺码，只会有固定几个（36，37，38，39，40，41，42，43）如果你需要的鞋子特别大，可能需要订制，包括衣服也是同样（XS,S.M.L.XL）。
在定义间距上同理，以往做设计规范的经验，在上一步定义好最小单位就完啦，然后设计师按照增量去设计就 ok，这样只是完成一半，如果按照4的增量（4，8，12，16，20，24，28，32，36，40….）这种带来问题就是任何间距都不可预测，提供的选择过于接近了，在什么情况下使用24，什么情况下使用28，我们很难去决策，如何去做。
之前在团队做过一个调研，我们问了设计师，也看了很多设计源文件，包括国外也有一个类似调查，就是在用4作为设计原子间距做设计时候，设计师使用最多的间距有哪些？结果很有意思，使用16的占一半，8和32的占一半，所以定义太多间距其实毫无意义，只会带来设计时候的不确定元素。
3. 根据业务场景，定义间距
正如前面所说，过多间距规则，只会带来设计师困惑，徒增界面复杂性，对开发，对设计师都是一种负担，所以我们在定义间距时候，一定要少，要让我们间距原则覆盖到绝大多数场景。可以从 XS，S，M，L，XL 为参考，小，中，大为纬度。
△ Airbnb 的间距规则 XS，S，M，L，XL 是最小为8，常用8，16，24，48，64，Airbnb 则更加克制，给设计师选择更少，反而更能保持设计次序。
△ quickbooks 的间距规则 XS，S，M，L，XL 是最小为4，常用8，16，20，40，60能很好满足各种业务场景，包括各种的间距场景都是在此基础上去拓展。
△ 那么界面中所有的间距地方，全部运用8，16，20，40，60这几个原则来做设计，保证页面统一性。
△ 包括页面中的元素高度，比如 banner 高度也是按照间距增量去设计高度，那么整个页面就更加有系统性和科学性。
△ 这也是我们在做系统设计时候经常用到的，通过增量来做设计。
△ 同理，在国外很多优秀产品中，我们不难发现这种规律的使用，更好的提升了设计效率。
统一简化间距规则，通过这些规则，构建一致性界面，所有边距，元素空间都遵循规则时候，对于视觉设计和开发人员来说，都能很好解决一致性和效率问题。
在我们刚开始设计时候，可能会觉得没有真正的好处，但是当项目越来越复杂时候，团队规模越来越大，每天处理各种设计原子和设计分子时候，你会发现，当你使用固定的间距，它会比之前随意的间距规则有更好的效果。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com