原创： 贺红阳
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
原文链接：https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
原作者：Adam Wathan & Steve Schoger
译：贺红阳
用设计战术代替天赋，提高我们的设计能力。
在我们设计开发过程中都不可避免的遇到需要做出视觉决策的情况，除了
专业资深高级设计师外，其他非专业设计师外不管喜欢与否，又或者我们的
公司没有全职设计师，需要我们自己为新的产品实现UI。
有时候我们正在攻克一个新项目，并希望它看上去比之前的另一个网站更好。对于我们（技术人员或者非专业设计师来说）难为的说“我永远也无法让这幅画好看，因为我不是艺术家。”但事实证明，有很多技巧可以提高我们的工作水平，而不需要有平面设计背景。
这里有7个简单的方法，大家可以使用来改进我们的设计工作。
1使用字体颜色（color）和字体重量（weight）来代替字体大小（size）创建视觉结构层次
当我们设计UI，样式文本化的时候，常见的错误是过于以来字体的大小，也就是字体的字号来控制层次结构。
“这文字重要吗？那我们就让它大点儿。”
“这是次层级文字吗？那我们就让它小点儿。”
不要把所有的重担都放在字体的大小上，试着使用字体颜色和重量来完成同样的工作要求。
“这文字重要吗？那就选用一个字重大些的字体，让它变得粗些。”
“这是次层级文字吗？那我们就用一个明度高些的字体颜色。”
试着并坚持使用2-3种颜色：
用深色而不是黑做主要内容，就像一篇文章的标题。
灰色用做次层级文字内容，像一篇文章的出版日期信息。
更浅的灰用作辅助次次要内容，也许是页脚的版权声明信息。
同样的道理，对于UI工作来说两种字重通常就足够了：
就英文字体来说，对于大部分的文本，普通字重（400—500），如果想要强调的文本可以是（600—700）；就中文来讲，主要内容字体一般在常规30-34，标题和想要强调的文本中黑36-42
在ui工作中，英文字体远离字重在400以下的字体，中文字体远离16像素以下的字体。如果你考虑使用更轻的字体重量来淡化一些文字，那就使用一个更浅的颜色或者更小的字体大小代替。
关于字体重量（font weight）字体粗细的值：
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 继承值
font-weight的属性值有3种指定方法：第1种是关键字法，关键字包括“normal”和“bold”两个；也是我们常见的；第2种是相对粗细值法，相对粗细也是由关键字定义，但是它的粗细是相对于上级元素的继承值而言的，包括“bolder”和“lighter”两个；第3种为数字法，包括从“100”到“900”的9个数字序列（注意，只能是100、200之类的整百数）。这些数字序列代表从最细（100）到最粗（900）的字体粗细程度。每一个数字定义的粗细都要比上一个等级稍微粗一些。
字体的粗和细这种描述方法本身就是一种相对描述，所谓粗和细也必须要有一个参照体。例如，在上面介绍的3类属性值之间需要有一个相互对照匹配的过程，这是一个很难界定的过程。关键字“normal”相当于“400”，“bold”相当于“700”。除了“normal”和“bold”以外的其他关键字常常会令浏览器产生误解，无法直接和数值相匹配，此时字体的粗细程度通常取决于字体本身的设置。
另外，有的字体看上去比较粗，但是它们的字体描述却是“Regular、Roman、Book（常规）”、“Medium、Semi-（半）”或者“DemiBold、Bold、Black（黑体）”等字样，这主要取决于该字体本身“normal”表示的粗细程度。
2不要在彩色背景板上使用灰色文字
在白色背景下将文本设置成浅灰色是淡化内容重要性的一个好方法。但是在彩色背景此效果就不那么好了。这是因为我们在白色上看灰色是弱化了对比关系。让文本颜色更接近背景颜色，实际上创建了信息层次结构，而不是使用更亮的灰。
在彩色背景下有两种方法降低对比度：
1减少白色文本的透明度
使用白色白色文本，降低不透明度。让背景颜色稍微渗透些，以与背景不冲突的方式淡化文本
2.基于背景，选一个颜色
当你的背景是图片或是图案；或者当降低文字的透明度太枯燥或是文字降低透明度被冲淡时，这种方法都优于降低透明度的方法。
选择一个和背景相似的颜色，调整它的饱和度和亮度直到你觉得合适为止。
3.偏移卡片的投影
不要使用大的模糊和扩展值，这样会使得卡片的阴影更明显，所以添加一个垂直偏移量。它会看上去更自然，因为它模拟了一个从上往下发光的光源，就像我们真实世界中经常看到的那样。
这种内嵌式阴影可以很好的用在输入表单上
如果你有兴趣学习更多关于阴影设计的知识， Material Design是很好的设计指南（https://material.io/design/environment/elevation.html）
4尽可能少使用分割线和描边
当你需要在两个元素之间创建分割时，试着不使用分割线。
虽然分割线是区分两个元素的好方法，但它并不是唯一的方法，使用太多分割线会让你的设计感觉很杂乱。
下次当你发现自己想要使用分割线的时候，试试下面的方法：
1使用卡片投影
卡片投影是一个非常好的区分元素的轮廓方式，就像边框分割线一样，完成同样的目标但它更巧妙而不分散注意力
2使用两种不同背景颜色
为相邻的元素添加稍微不同的背景颜色通常是在他们之间创建区别的好方法。如果你已经使用了不同的背景颜色，又使用了边框，那请试着把边框删掉，你可能不需要它。
3添加额外的空间，也就是留白。
除了简单地增加距离之外，还有什么更好的方法在元素之间创建分离呢?在空间上加大更多的距离（更多的留白）是一种好的方法，在不引入任何新的UI组件元素时来区分元素
5.不要放大本来应该很小的图标
如果你正在设计一个可以使用一些大图标的页面，像一些登录页面的“特色”部分，你可能本能的使用免费图标库里的图标，然后放大它们的尺寸直到符合你的需要。
两个超棒的免费图标库分享给大家：
1FONT AWESOME (https://fontawesome.com/icons?d=gallery)
2 Zondicons(http://www.zondicons.com/)
“它们毕竟是矢量图，所以如果你放大尺寸质量是不会受到影响的对吧？”
虽然我们增大矢量图片的尺寸它们的质量是不会下降的，但是当我们把它们放大到3倍或者4倍的时候，那些原来用16-24px绘制的图标永远不会看起来非常的专业。因为它们缺少细节，并且总是感觉不成比例的矮胖矮胖的。
如果你只有小图标，试着把它放在另一个图形里，并且给这个图形一个背景色：
这可以让你的图标尺寸更接近原始图标尺寸，同时仍就充满大的空间。如果你有足够的预算，你也可以使用高级优质图标集做设计，在大的尺寸上使用大的图标，付费图标库如Heroicons和Iconic。
1 Heroicons （http://www.heroicons.com/）
2 Iconic（https://useiconic.com/）
6.在平淡的设计中使用超重的彩色的边框
如果你不是一名平面设计师，相比其他作品里的漂亮摄影照片或者颜色丰富的插图作品，你如何在你的uI设计中添加少许的视觉天赋。
有一个简单的技巧可以让你的界面有一点不同，那就是添加超重的彩色边框在你的部分界面里，它会使得你的界面不同于其他平淡的设计。
例如，沿着警告信息的侧边加一个超重的彩色边框：
又或者是高亮显示激活的导航栏项目
甚至是在横穿整个布局的顶部：
它不需要任何的设计天赋增加一个彩色的矩形在你的UI作品里，并且它可以让你的网站像你期望的那样更具设计感。
选颜色很困难？试着从有限的颜色板中选取颜色，例如dribbble的颜色搜索，以避免被传统颜色选择器带来的无尽的可能性。
7不是每一个button按钮都需要一个背景颜色
当用户在一个页面上有多个可操作路径时，很容易陷入基于纯语义设计行为陷阱。
如Bootstrap这样的框架式网站鼓励你这样做，当你添加一个新按钮时，它会给你一个语义样式菜单供你选择。
“这是一个正面的行为吗？是，那就使用绿色。”
“这是删除数据的操作吗？如果是，那就使用红色按钮。”
语义是按钮设计的重要部分，但还有一个常常被忘记的重要的维度，那就是等级／层次结构（hierarchy）
页面上的每个按钮放在哪都基于重要性金字塔的某个位置。大部分页面仅有一个主操作按钮（primary action），几个不重要的次级操作（secondary actions），和几个很少使用的三级操作（tertiary actions）
当设计这些操作按钮时，最重要的是考虑它们在层次结构中的位置。
主要操作按钮应该是显而易见的，实心纯色的，与背景颜色是高亮度对比。
次要操作按钮应该是明确清晰但不突出。轮廓风格或者是与背景颜色低对比是很好的选择。
三级操作路径应该是可发现但不显眼。将这些操作路径设置成链接样式通常是最好的方法。
“那破坏性的行为呢，难道不应该是红色的吗？”
不一定！如果破坏性操作不是页面上的主要操作路径，那么最好对其样式按照二级或者三级按钮的形式处理。
保存大的，红色的并且加粗的设计样式，以便于当界面的主要操作路径是负面的操作路径时使用，比如在确认的对话框中：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
原创： 云锋金融
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
傲慢（Prejudice）、嫉妒（Envy）、懒惰（Sloth）、愤怒（Wrath）、贪婪（Greed）、暴食（Gluttony）和淫欲（Lust）
——这就是天主教教义所说的人类七宗罪。
七宗罪，源于人的底层操作系统。根植于基因深处，人性的种种弱点是所有人都逃不开的囚牢。
海底捞，这个起身于蜀地简阳、得名于麻将桌的火锅品牌，用了24年做到家喻户晓，距离上市仅差临门一脚，如参考香港上市的呷哺呷哺30倍PE，则估值将超300亿元。
做餐饮的那么多，做火锅的那么多，但有且只有一家海底捞。
为什么？
海底捞的故事，正是对人性的把握在商业运营中的卓越体现。我们且从这七宗罪一一道来。
愤怒 Wrath
现代人出去聚餐，吃的那叫薛定谔的饭：在进店里前永远不知道出来时会是一个开心的你还是一个愤怒的你。毕竟“吃饭十分钟，等位一小时“这种事情太常见不过，而遇上傲娇服务员或者低效的服务，令人一顿饭不爽也是常有的事儿。
但在海底捞的店，我们很难看到一个愤怒的客人。
在这里，你不会气愤自己把有限的生命花在了无限的排队上。
海底捞的服务是从排队就开始的：客人刚一入座就有小零食和茶水，等位桌上有跳棋和充电宝，实在无聊还可以在店内做个指甲，擦个皮鞋。等餐桌布置好了，带着愉悦的心情落座，甚好。
落座后，戏很多的扯面小哥、点多了菜时的善意提醒、提供给女士的头绳、热毛巾和手机塑料套，又会让你觉得贴心又舒适。
在海底捞，消费者不仅远离愤怒，甚至会得到一丝生人间难得的温情。
“您是自己来吃火锅吗？”
“是的。”
“好的，请跟我来。”
一上桌，坐在对面的小羊正在微笑看着我，它面前还有一杯水。
图片来源：海底捞招股说明书
傲慢Prejudice
而海底捞“顺着顾客毛捋”的背后，是对顾客心理的巧妙把握。这份把握，来自它让员工们放下了“傲慢”。
服务行业的从业人员很难，餐饮服务行业的从业人员更难。高强度的工作、难缠的客户和较低的薪资待遇，很难让这个需要“笑脸迎人”的行业工作人员开心起来。“拜高踩低”、“势利眼”、“傲慢”，随便搜搜各类评价，总能或多或少看到顾客这样的抱怨。
海底捞有着大量餐厅一线员工：在它共计50299名的员工中，餐厅员工达49162人。
但在海底捞，几乎看不到傲慢的服务人员。
人性的傲慢，是如何被化解的？这离不开两个关键词：与顾客满意度挂钩的评价制度和服务自主化。
如何去衡量一个餐厅的好坏？它的装修、氛围、服务、菜品、卫生......，无论是细化KPI还是看翻台率，想要制定一个完善的硬性考核指标，困难重重而且容易被规避。最后，海底捞诉诸一个简单的规则：顾客满意度。
海底捞引入了独特的“神秘人”制度。除了顾客的评价会被纳入员工的薪酬评定之外，国内约1600名第三方神秘嘉宾会定期进行“暗访“。“暗访”是对餐厅质量和客户体验的综合评估，共有三个等级：
A级餐厅代表最高的工作质量，其员工在新店任命店长时将会得到优先选择的机会；
B级餐厅则意味着有待改进，无功无过；
C级餐厅将需要接受重新培训，且其店长将失去开设新餐厅的机会，并面临革除职位的风险。
做好了是荣誉和奖励，做不好是惩罚甚至羞辱。店长们不仅不会“傲慢”，还会卯足了劲，去服务好客户，并激励员工去服务客户。
怎么激励呢？能够提供最优质服务的员工才能赚最多的钱，得到最快的晋升。为此，海底捞做到了充分的放权。
“我们并无规定服务员服务步骤的固定服务。实际上，我们鼓励服务员自行主动判断如何为顾客提供最佳服务。”
——海底捞招股书
要不要给顾客提供免费的菜品、如何根据客人的口味提供建议、甚至包括赠送指甲油这样的小细节都可以由员工自己把握，而不超过3万元的审批也可以让店里自行决定。
比起坐在办公室里的决策层，员工既是服务的提供者，也是效果的第一反馈者。他们更能切身明白进店的消费者需要什么，也更有动力去这么做。因为客户的满意，最终都会变成他们的年终绩效。而海底捞的放权，更让他们觉得自己并不单单只是在给别人打工，工作也可以自己做主。
有了实际有效的激励和为自己工作的自由感，员工才会更有动力提供服务，彻底放下“傲慢”。
而这一方式确实是有效的。根据沙利文报告，按照营业收入计算，2017年海底捞国际在全球（包括中国）的中式餐饮市场中排名第一。2016年至2017年，海底捞收入增长率为36.2% ，而根据中国餐饮报告2018，2017年中国餐饮行业同比增长仅为10.7%。在海底捞的招股说明书中，其明确将就餐体验列为其品牌发展基础。
根据对海底捞员工的调查表明，85.1%的受访员工对海底捞的工作环境感到满意，超过80%的员工认为海底捞提供的待遇和管理架构激励了工作。
的确，海底捞的员工成本增长很快。它的平均员工成本是6.2万元，差不多是呷哺呷哺3.9万元的的1.6倍。然而，海底捞的人力成本占收入比仍在30%以下，在餐饮企业中这一比率处于中游。这恰恰说明了：放下傲慢而充分得到激励的员工，为海底捞创造了更多的价值。
海底捞近年用人成本一览
图片来源：海底捞招股说明书，云锋金融整理
嫉妒Envy
嫉妒，是人性中一个难以启齿的弱点。
做好一家火锅店不算难，难的是保证每一家都能提供同样高质量的服务。海底捞自主化和个性化的背面，是复制和规模化的难题；传承和发扬，面临着严重的激励问题。
即便家族餐饮企业，也可能陷入纠纷：例如“九头鸟”、分裂成到“九头鹰”、“九头凤”，这家湖北菜馆经历了内讧和争端，止步于区域连锁。
那么，海底捞如何激励店长师傅倾囊相授，培养出比自己更强的人、开出更赚钱的店，从而形成全国连锁呢？
答案在于师徒制。师徒制的本质，是正视人性中的嫉妒，并用机制去克服它，使得师傅从自己的利益出发，乐于传授徒弟。
每年，作为师傅的门店店长将获得以下两种选项中的较高者作为薪酬（除基本薪金）的部分。可以看出来，如果徒弟徒孙干得好，店长可能会获得比自己店经营更好的效益。老店在培养新店时，自然也会更加卖力。高质量可规模化的服务水平也将在此推动下持续下去。
|
选项A |
其管理餐厅利润的2.8% |
|
选项B |
其管理餐厅利润的0.4% |
|
其徒弟管理餐厅利润的3.1% |
|
|
其徒孙管理餐厅利润的1.5% |
资料来源：海底捞招股说明书，云锋金融整理
海底捞利用师徒关系的绑定，一方面增强了员工与店长的纽带，一方面，极大节省了培训的开支，帮助新店从老店汲取经验从而复制其增长。
图片来源：海底捞招股说明书
在海底捞，有个很特别的员工管理形式叫做“抱团小组”，通常是由一个区域内5至18家存在师徒关系的门店为主，餐厅间互帮互助，老店帮助新店进行拓展与经营，落后门店也能从中得到指导。
强店带弱店，师傅带徒弟，无形间就降低了总部的培训成本，形成稳定良好的关系。
目前，海底捞共有37个抱团小组，覆盖超过300间餐厅。在海底捞，并不存在教会徒弟，饿死师傅，反而是，教会徒弟，富了师傅。
懒惰Sloth
说罢员工管理，我们来看看海底捞是怎样抓住客户需求的。
有句话说得好，世界是由懒人推动进步的。面对日益懒惰的消费者，海底捞有两件事做得非常到位，一是会员制，二是火锅外卖。
据悉，海底捞是最早使用平板电脑为客人点餐的餐厅之一。而海底捞做这个可不是为了“时髦”，而是另有大用。
通过电子点餐注册会员的消费者，在下次进店点餐时，只要登陆，就可以根据自己上次的点餐习惯，快速选择菜品。不单单是烦恼吃什么的时间被消减，就连从牛羊肉划动到蔬菜的时间都会被省去。
通过大数据，海底捞帮助消费者节省思考和点单的力气，不光在想偷懒的顾客端讨了巧，同时也无形减少了每单顾客的用餐时间。
据招股说明书披露，2017年海底捞的翻台率达到了每天5次。比起别的火锅店在菜单上勾选讨论，海底捞的不少顾客都能发现自己原来是个“有效率”的人。
而外卖，则更是我们的懒人福音。外卖并不新鲜，然而海底捞的火锅外卖，的确发挥出了想象力，抓住了消费者的懒惰，受到了全国人民的喜爱。
懒得洗头、懒得化妆、懒得换衣服、懒得出门，高节奏高压的生活，让现代人格外珍惜自己的休闲时光。即使海底捞的等位服务再有趣，想着要浪费几十分钟排队还是让人觉得不太值当。
一个电话，快递小哥送来了整整齐齐的超大纸箱：食材和小料分门别类码放整齐，附赠超长火锅筷子和一次性餐具，甚至还有衣服除味剂。——海底捞的外卖，一如海底捞的堂食，以令人惊喜为目的。
2010年，海底捞正式开展火锅外卖服务。至今，它已经在超过40个城市有自己的外卖业务，外卖占比从2015年的1.3%提升至2.1%。
海底捞外卖业务三年营收一览
图片来源：海底捞招股说明书，云锋金融整理
海底捞通过把握人类的懒惰，布局了外卖市场这一快速增长的市场。
据统计，2017年中国外卖市场总收入达2091亿元人民币，13年至17年复合增长率45.6%。根据中国餐饮市场报告，预计2022年中国外卖市场总收入将至4770亿人民币，占中国餐饮市场的7.6%，各线城市全面开花的局面有望持续。
2017年外卖市场规模同比增长情况
图片来源：中国餐饮报告2018，云锋金融整理
当下，我国外卖业务覆盖1600个城市，马太效应明显的外卖江湖(1/4的订单来自知名品牌商家) 未来仍旧有广阔的增长空间。
海底捞2017年外卖业务增长50%，无疑是在火锅界再拔头筹。它利用人类的懒惰早早占据了先机，未来怕是还要走得更远。
贪婪 Greed
贪婪，也可以指永不满足。作为一个主打火锅的公司，海底捞在商业战略方面充分发挥想象力，将“贪婪”的特质发挥的淋漓尽致。
在过去3年，海底捞新增门店数量已超越之前20年的门店总数。2016年的176家扩张到2017年273家。甚至，海底捞计划在2018年新增180-220家门店，即每两天就要开设一家新店。
在境内开店风生水起之际，海底捞迅速扩张、走向海外。
资料来源：海底捞招股书
海底捞成立的二十余年间，在北上广等57个城市有190家直营餐厅。此外，已有台湾2家、新加坡4家、美国洛杉矶1家、韩国首尔3家和日本东京1家直营餐厅。
如果说新开分店是扩张的自然需要，整合上下游则充分显示了海底捞的“野心”和想象力。
海底捞集团业务版图
图片来源：海底捞招股书，云锋金融整理
业务线上，近几年，百亿营收的海底捞加速扩张。根据其招股说明书，募集资金的60%用于业务扩张，20%将用于技术开发，15%用于偿还贷款，而剩下的5%用于营运资金及一般用途。
短短几年，它的业务遍布上中下游，甚至包括了不搭界的装修和管理咨询。可以说，触手所及都深度扩展，把有可能变现的业务部门都拎到了大众视野里。
2016年7月，海底捞系中专攻火锅底料、蘸料的颐海国际在港交所挂牌上市。
2017年4月，冒菜品牌优鼎优在新三板上市。
对比将内部服务能力对外输出并独立上市的打法，如果海底捞仅作为餐饮门店存在，其价值会大打折扣。事实证明，海底捞帝国里，各业务板块都在业界建立了各自的知名度，不再是海底捞餐饮的附属品。例如颐海国际直接来自关联方（主要是海底捞）的收入仅占53.8%，其余来自第三方；来自第三方的收入增速惊人，经销商、电商业务等渠道，均录得100-400%的增速。
贪得无厌并不是海底捞的作风。基于对每一个环节的严格把控，如新店装修的速度、充足的储备店长，海底捞开店后通常1-3个月即可实现盈亏平衡。
海底捞的贪婪，贪而有道。
暴食Gluttony
大盘鸡、回锅肉、辣子鸡、烤鸭……，
中国人也许天生就格外喜好美食，给了餐饮市场肥沃的土壤。据统计，2017年中国餐饮行业收入超过3.9万亿元，到2020年，餐饮市场很可能有超过5万亿元规模。
中国餐饮市场规模
图片来源：中国餐饮报告2018，云锋金融整理
民以食为天的中国，并不缺乏好味道，可当今中国这个4万亿的餐饮市场，还没有出现一个麦当劳、肯德基式的千亿级别的公司。在这个讲究烹饪技法的国度，对厨师和食材的依存极高，一家餐馆可以做到远近闻名，可掌厨大师无暇顾及多家店，以至于规模化很难实现。
在这种环境下，最火热的品类正是最不讲究烹饪技术、相对可以标准化的火锅。根据中国餐饮报告2017数据，火锅占餐饮业总营业额22%，位列榜首，超过排名第二的自助餐近一倍。在“坐拥四万亿市场的中国餐饮行业，为什么出不了一家千亿龙头”一文我们提过，标准化是规模化的一个重要的前提。
我国饮食文化博大精深，即便是火锅也有诸多口味和类别，从小肥羊、澳门豆捞、重庆麻辣到老北京涮锅、潮汕牛肉等等各领风骚。
各类火锅占比
数据图片：2018中国火锅产业餐饮大数据研究
仅靠标准化，海底捞能否一招鲜吃遍天？恐怕也没有这么简单。在招股书中，海底捞也提到了，会根据地域差异对火锅口味进行调整，例如引入椰子鸡锅底等。这种差异化，对海底捞的管理，提出了更高的挑战。
挑战虽然在前，但民以食为天、且我国还在外出就餐增加的大趋势当中。这个趋势将伴随头部公司的集中。目前看来，海底捞是离千亿市值目标最近的中国餐饮公司。
淫欲Lust
在现代商业环境，lust可以引申为社交属性。脸书（facebook）的雏形，就是一个给大学女生评颜值的网站。最近风口浪尖上的滴滴，其顺风车产品意图打造的，也是社交属性。
目前，还没有看到海底捞在这方面的动作。否则，已经把握了人性如此多弱点的海底捞，岂不是让竞争者更加没有活路了？
结语
人性恐怕是这个世上最经不起考验，最脆弱的东西。
它被当作每个人的弱点、原罪，被大批特批，被试图摒弃。但同时，它也蕴藏着巨大的宝藏：任何成功的商业模式，背后都是对人性的洞悉。
那天，张勇走进一间会议室，里面坐满金融精英。他说："在座的各位想必都是世界名校毕业的吧。今天大家会坐在下面听我讲，肯定是我想过什么你们没想过的东西。是什么呢？人性。"
最好的商业模式，都是针对人性的。而海底捞的每个细节，都在体现对人性的把握。
这就是为什么，海底捞你学不会。
阅读之前，温馨提示下，文中提到的 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个动作为「设置面板状态」与动态面板，勾选“循环面板”，选择「停止循环」。
以上就是所有的制作步骤，最终的效果就像文章开头中所示的样子，在这个过程中，我们其实已掌握了两个重要的知识点：一个是动态面板的循环实现方式，第二个是通过全局变量来设定时间值。
这两个点在其它地方也会经常用到，掌握后能够更加灵活运用在其它地方。
希望大家能够尝试多练习几次，几次尝试后就会理解其中的关键点，也希望大家能够养成一种习惯，在进行练习前对任务流程进行梳理，这样对理解逻辑更有帮助。
本文由 @ 杰森 原创发布于人人都是产品经理。未经许可，禁止转载
蓝蓝设计的小编 http://www.lanlanwork.com
