如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
最近设计群里经常有人问起小程序设计规范的问题，虽然官方有提供样式库的下载，但是停留在 16 年版，不是的。而设计经验这部分网络上也没有比较全面的分享，这促使我停下手上的计划，加快输出本篇文章。正好近期刚结束几个小程序项目，总结下经验，并结合微信小程序的官方设计指南，一起分享给大家，希望帮助大家更快速地上手。
随着 2018 年小程序的迅猛发展，小程序现已被各大企业广泛采用，「触手可及、用完即走」的用户体验备受青睐，随之小程序设计也成为设计师的必备技能，那在进行小程序界面设计时，应该如何快速做设计？过程中又要注意哪些问题呢？
对于已经开发了 App 的产品，在进行小程序设计时需遵守小程序的规范，同时要保持小程序界面设计与 App 的风格统一性。
小程序的「所有页面」右上角位置，都固定放置了小程序的菜单，在设计界面时需预留出该区域空间。
1. 小程序菜单固定样式
微信提供了深浅两种配色样式，以便更好地融合到各种风格的页面中，需注意保持小程序菜单清晰的辨识度。
线上案例：
2. 交互注意事项
如果要在小程序菜单附近放置交互元素，要考虑是否有交互冲突，应尽量避免误触的可能。
建议开发者设计的自有导航样式与微信官方小程序菜单样式保持一定差异，以便区分。
如上图，小红书的自有导航样式个人不推崇，理由如下：
微信读书既有微信线条外框的 DNA，又区别于官方样式，是不错的综合。以上仅限个人观点，还需用户数据来客观验证。
3. 搜索框常见的几种表现形式
1. 小程序设计规范
顶部标签分页栏颜色可自定义，一般会沿用 App 的设计风格，以保证两个平台的视觉统一性。
2. 常见的几种表现形式
1. 小程序设计规范
微信有提供小程序的底部标签样式，建议标签数量在 2-4 个适宜。
也可根据产品需要选择或者去掉底部标签栏功能。
2. 常见的几种表现形式
启动页除品牌 Logo 外，其他元素都由微信统一提供，且不能更改，设计师仅需提供 2 倍和 3 倍尺寸的 Logo 即可。
1. 小程序设计规范
全局加载是小程序名称左侧的加载图标。模态的加载样式将覆盖整个页面，由于无法明确告知具体加载的位置或内容，可能会引起用户的焦虑感，建议谨慎使用。
2. 常用的加载样式
需告知用户具体加载的位置形状，减轻用户焦虑情绪。
对于没有开发App来说，可依据官方推出的《微信小程序设计指南》来设计，以确保快速设计出符合规范的小程序。
小程序设计应遵循友好、、一致的设计原则，每个页面都应有明确的重点，清晰明确地告知用户身在何处，又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路。
最后，推荐几个常用的平台设计网站。
1. BAT各平台小程序设计规范网站
微信小程序设计指南：https://developers.weixin.qq.com/miniprogram/design/
支付宝小程序设计规范：https://docs.alipay.com/mini/design
百度-智能小程序设计规范：
https://smartprogram.baidu.com/docs/design/overview/introduction/
2. 其他常用的设计规范网站
苹果-人机界面指南：https://developer.apple.com/design/human-interface-guidelines/
详细介绍了 iOS 设计规范，同时还提供了 UI 设计资源下载。
安卓-MD设计指南：https://material.io/design/
蚂蚁设计：https://design.alipay.com/#ds
提供移动和 Web 端的设计组件，还有设计案例和心得的文章供学习。
微信样式库：https://weui.io/
提供微信内的网页和小程序设计规范。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
简介说明1. 理论表述
对于许多事件，大约 80％ 的影响来自 20％ 的原因。
2. 理论背景
1896 年，意大利经济学家帕累托出版了《经济政治学课程》（Cours d’economie Politique），其中描述了他所观察到的一些现象，比如意大利 80% 的土地掌握在 20% 的人手中；比如花园里 20% 的豌豆荚产出了 80% 的豌豆。
上世纪 40 年代，美国一位管理顾问 Joseph M Juran 观察到一个在商业以及生活中普遍存在的现象：在某一过程中，80% 的影响来自于 20% 的投入。他将这一现象以帕累托为名，称为「帕累托原则」。
80/20 虽然只是一个相当不的数字，在很多具体情况之下，这个数字会有细微的波动，但这个数字背后所蕴含的思想或是规律却是不变的：更集中的投入将产出大于预期的结果。
一般来说，一个 APP 大多拥有几十上百个页面，但是这些页面并不是用户都能用到的，有时候大多数用户只会常用那么几个页面，所以将有限的时间和精力投入到这些页面将给你带来更大的收益。
案例1：网易云音乐的 UI 迭代
最近网易云音乐和虾米音乐都迎来了大版本更新，UI 也几乎重新设计了一遍，但我们所看到的重设计，只局限在那些关键的页面上，一些次要的页面基本没改。比如网易云音乐，首页这种重中之重的页面不仅风格、排版大改，连产品逻辑都改了（比如快速入口由四个变为五个，改变了私人 FM 的位置等），但是等级页这种无关紧要的页面，除了头部的全局性改动外，其他地方一点没变。
那我换个角度想，如果我们的应用已经存在了这么多需要花费时间和精力的页面，现在产品经理希望增加另一项需求量小但确实存在的功能，我们应该怎么办？奥卡姆剃刀指出「如无必要，勿增实体」，这是我们对此欲增加的功能的终极评判标准。
要知道，页面中每增加一个元素，对于用户体验的影响是巨大的，这意味用户着需要花费额外的时间去理解新增加的元素是什么；在所有元素中寻找特定的一项又多了一些备选；浏览页面时的视觉噪声又多了一些。
所以到底要不要增加这个功能，关键在于能否很好地控制上述的用户体验成本，以及后续的迭代成本。从帕累托原则的语境来看，小众但是确实存在的需求大概率不足以产生能够克服用户体验损失的收益，哪怕我们投入了一定的精力去做，日常依然无法给它百分之二十以上的关注去修改，去完善，去迭代，所以这个功能也大概率不需要增加。
说起帕累托原则就不得不提到长尾模型，长尾模型的分布曲线与帕累托长得很像，但是结论却完全相反，长尾模型提醒我们无法忽略那条长长的尾巴的影响，虽然它收益低，但架不住数量多，比例高。所以我们可以看到「尾巴」所占据的面积几乎和「大头」相当。
04 年长尾模型被提出来的时候，很多人认为长尾模型是对帕累托原则的颠覆，诸多例子都侧面佐证了长尾模型的正确性，比如 Google 目前约有一半的生意来自小网站，比如亚马逊图书的总盈利中少数畅销书占一半，绝大多数的冷门书占另一半。
听起来好像很有道理，长尾模型好似在控诉着开发者不去关注那些小众而众多的琐碎需求。事实真的如此吗？
长尾模型本身隐藏了两点不可或缺的前置条件，一是尾巴真的要足够长（小众需求真的有这么多），二是这么长的尾巴能被用户发现。无论哪一点，都建立在海量的用户资源之上，所以中小型 APP 大多望尘莫及。能够有余力去关注长尾模型的大多是用户量达到一定规模的产品，比如之前例子中所举的 Google、亚马逊，国内的微信、QQ、淘宝、支付宝、京东，这些产品的用户量足够多，用户类型足够广，尾巴足够长，哪怕再隐蔽的功能入口也能拥有不错的曝光度（总会有用户发现它），所以才能发挥长尾模型的作用。
所以在用户量达到 QQ、淘宝的级别之前，长尾模型看看就好，帕累托依然是主要的指导原则。
注意点1：不得不做的需求
虽然我们要将精力放在重要的事情上，但有些功能和标识即使对于用户意义不大，和产品的增长也没有实际联系，但我们也依旧需要花费大量精力投入。最常见的就属于法律规定和平台规则相关的需求了。
比如 18 年的大事件，欧盟推行《一般数据保护条例》俗称「GDPR」，所有国际版的应用都需要针对这个条例对注册流程做出大改，比如这篇文章介绍的：《GDPR合规下的 App 产品设计——启动页面和账号注册》。
注意点2：最重要的「少数人」
满足大多数用户的需求是一个必要条件，但不代表在任何情况下少数人就是可以被忽略的群体。对于工具化的应用而言，真正为应用带来收入和传播的，恰恰是占比较低的付费用户，可能连 20% 都不到。
在这类应用开发的周期中，前期完成了满足大多数用户的基础功能，之后更多的精力会被分配在满足少数付费用户的需求上。产品的方向和目标都可能随着不同的时期发生变化，帕累托原则是一个决策工具，但决策方向是需要经过我们充分思考以后得到的，切勿盲目地服从一个指标。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一位高管在餐巾纸上画了一个新的主页原型来演示她使用和喜欢的网站。一个开发人员晚上在公司呆到很晚，并添加了一个他认为很酷的新功能。或者产品经理坚持采用与竞争对手相同的设计模式。
如果这些故事听起来很熟悉，那么你并不孤单。大多数设计师都会收到这种“帮助”。
你的第一直觉可能是以平淡无奇的方式回应“不”。但是，一个用户体验建议是否来自一个关键的利益相关者或项目周边的人，应该仔细处理。在您做出反应之前，请考虑以下步骤：
你的第一反应可能是利索地对对方说“不”。但是，无论UX建议是来自关键的利益相关者还是项目的外围人员，都应该仔细地处理它。在你做出回应之前，考虑以下步骤:
第一步是将消除自己的主观意识；你可能拥有丰富的设计经验，但不排除会有更好的想法。不要仅仅因为它是在PowerPoint文件而不是Photoshop原型中呈现，所以不要认为一个想法是坏的。
观点的多样性可以更有效的构思：即使提出建议的人缺乏设计知识，他们可能会有不同的专业知识或经验，并且可能会为您正在尝试解决的问题带来宝贵的不同视角。
你如果像设计的上帝一样扼杀了他人的创造力，最终会导致更糟糕的结果。
不加考虑就无情地否定别人的想法会阻碍人们在未来提出其他（有价值的）想法。即使一个想法对你来说显然是错误的，但请记住，这个人也试图让设计变得更好，尽管他可能对“更好”的含义有不同的看法。通过允许他们：
您可能会发现，虽然提出的解决方案并不合适，但需要解决的问题很重要。
问问这个人他的设计理念想要达到什么目标。他在考虑不同的用户群或业务需求吗？继续问“什么？”和“为什么？”（可能以不同的方式），直到你明白他考虑的问题及思考方式是什么。
确定建议和问题和好处。即使是一个坏主意也有一些好处。
例如，在大屏幕版本的网站上使用汉堡包菜单不利于用户轻松找到导航。这是不使用它的一个非常重要的原因。然而，桌面上的汉堡也有一个视觉上吸引人、整洁的标题。确认想法的成本和收益，以便更准确地评估权衡，可以通过不同的方法牺牲或实现哪些目标。
考虑举行设计原型会议（一个设计原型会议是短，会议期间，团队成员迅速协作和草图设计，以探索和分享的设计思路广阔的多样性），一起观看用户研究视频，或举办其他类型的用户体验工作坊，以便这个想法的支持者可以继续为这项想法解释。
解释一下，现在做一个设计决定意味着跳过构思、研究和用户反馈。在理想的情况下，转向设计思维过程，为所解决的问题找到正确的解决方案。
根据您对目标用户及其任务的了解程度，确定一个想法的优缺点可能需要:
论证该想法的成本可能会由于潜在的用户混淆，而导致的用户体验问题，以及诸如可能延迟发布其他更重要功能的开发计划中断等后勤问题。要评估大量想法，请使用对其进行优先级排序。
如果您评估确定不应该实施该想法，您可以以积极的方式拒绝。
承认其贡献
你不必着急全盘否定，但不要愚蠢的全去试一遍。找到您相信的有关他们建议的真实或有效的内容，并将其标注出来。这可能是这样的：
由于这些短语之后都会出现“but”，因此请确保您在所提出的观点中是真实的。否则，说它们根本不值得。
分享您的评估理由
当人们投入足够的时间来提出建议时，就是帮助他们学习更多关于用户体验的知识，并在整个团队中传播更多用户体验知识的理想时机。利用这些时间，交流你评估的理由，而不是仅仅告诉他们一个“不”。
1. “这种设计对于[persona type]用户可能有意义，因为他们需要[此功能]。但是我们的主要角色可能会有这个问题，因为[原因]。“
2. “听起来你想要解决与重要用户任务相关的[特定客户投诉]。确定信息的优先顺序可能会有所帮助，但要使其更大，颜色不同可能会导致横幅失明。我想在第二天做一些调查，并提出一些替代解决方案的原型。“
考虑提供原型，案列，设计原则，模式或研究发现，以帮助他们理解为什么一个设计可能会导致问题，以及为什么不同的设计会更好地工作。把每一次互动都看作是灌输贡献者设计理念的机会——这是对未来的一种投资。
当客户或强大的同事发出特定请求（或要求）时，即使您给出了解释，也很难说“不”。但这并不意味着你应该放弃自己的观点并同意有害的建议。相反，与他们讨论如何将想法背后的目标和资源结合在一起，而不必直接实施。
合气道是一种试图和平解决冲突的武术，它依靠转弯和枢轴等动作来融合对立的能量。同样的原则可以应用于处理围绕设计的冲突：与其直接拒绝一个想法，不如同意继续探索这个建议，而不是明确地承诺实现它。
建议召开一次工作会议，在会上你可以提出既能获得同样好处又能避免成本的选择。例如，你可以说:
比优雅地转移坏主意更好的方法是主动引导合作进入更有效的轨道。您可以通过在结构化的、战略性的时间（例如预定的研讨会）寻求输入，最大限度地利用每个人的贡献。这种主动的方法减少了在无法有效评估或合并意外更改请求时感到意外的可能性。
每个人都对设计都自己的看法，这使得UX设计师的工作充满挑战。有些人总喜欢在界面中添加一些令人困惑的元素，比如原型、这会影响产品开发进度（可能包含UX迭代），以及那些喜欢设计（甚至认为自己是设计师）但缺乏任何真正的UX设计专业知识的人。
但是，如果您与您的合作者进行深入交流，向他们灌输设计理念并引导他们发挥自己的长处，这种“设计帮助”的多样性将是一种宝贵的资产。
最有成效的用户体验设计师在设计过程中会和许多人合作。他们与各种团队成员和主要利益相关者讨论业务目标，发展机会和约束，优先级，要求和设计理念。这些人来自许多职能团体；具有不同的UX专业知识，想法和思考。
要想成为一名优秀的用户体验设计师并创作出优秀的设计作品，培养必要的沟通技巧来利用这些信息来源和输入是必不可少的。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
是能点还是不能点呢？”这是当用户在面对一些操作按钮时，大脑中所迟疑的问题。
按钮越多，做决定的时间就越长。用户必须仔细看每个按钮，才能确定哪个是他们需要的。对于按钮的任何不确定性，都可能会导致他们不敢操作或误操作。
设计师可以把按钮的优先级设计的更加直观以减少这样的情况发生。当用户注意到哪个按钮与他们的任务目标更契合时，就能帮助他们快速做出决定。这篇文章就是介绍一些这样的设计技巧，通过简单的调整使得按钮变得更加直观有效。
在App中，一个常见错误就是按钮的排列顺序偏离了用户的阅读习惯。他们将优先级最高的按钮放在最前面，期望用户能首先注意到它。但其实只要按钮足够突出，视觉分量够重，用户就会注意到它，而无视它的排列顺序。
按钮顺序不是为了提供可视性，而是为了要提率。在最前面放高优先级的按钮会导致用户自上而下的阅读习惯被打断，看到按钮后还会继续阅读下面的文字，然后再回过头来找前面的按钮进行操作。
不要让用户返回再次检查按钮，而是让他们以自然的阅读习惯看完所有的内容后，按视觉比重快速进行选择。
通过将优先级高的按钮放在底部，让它处于视觉阻力最小的路径上，这使得这个按钮可以更有效率的被点击。此外，底部位置是手指最容易达到的区域，这进一步提高了效率。
App上的另一个错误是只使用文字来表示按钮。设计师使用文字按钮来表示优先级较低的操作。但是对于用户来说，这是一个糟糕的选择，因为纯文本没有一个按钮的外观，这可能导致用户会忽略了这些操作。
纯文本按钮会让用户迟疑到底是按钮还是内容，从而造成混淆。这种不确定性可能会导致他们直接跳过这些按钮。
纯文本按钮不仅让人感到疑惑，在操作上也不容易点击。将文本内容放在按钮框中，可以使得按钮更容易被点击和注意到。
与纯文本相比，描边形式的按钮是降低优先级的更好方法。它们使每个选项都易于识别，以便用户能选择他们所期望的目标。
高优先级的按钮应该是最容易被识别到的，它是直接指向用户最需要的目标操作。如果不确定优先级，请考虑哪些操作会使得用户朝着目标前进，哪些操作会使得用户回退。
在这个例子中，”付款”具有更高的优先级，因为它顺应着用户的目标流程。但不大清楚”查看购物车”还是”继续购买”的优先级是如何。
“查看购物车”操作让用户查看已经在购物车的商品，然后继续结账。”继续购物”操作将用户带回到远离结账的产品页面。
通过思考这些操作，可以清楚的看到”查看购物车”具有中等优先级，而”继续购物”具有较低的优先级。判断的理由是哪些操作使用户朝着他们的目标前进，哪些操作使他们远离目标。
前进的操作总是会比回退的操作优先级更高，因此，它们应该被设计地有更强的视觉重量和更高的颜色对比度。
颜色是一种增加按钮权重的有效方法，因为它从文本颜色中脱颖而出，吸引了用户的注意力。当按钮的颜色与文本的颜色相同时，提示性就没有那么强了。为优先级更高的按钮使用不同的颜色来辅助用户进行快速决策。
如果对每个不同优先级按钮使用相同的颜色，用户将不知道哪个优先级更高。而使用不同的颜色只会让用户更加困惑，不知道这些颜色到底意味着什么。不仅如此，每个按钮使用不同颜色，还会让视觉权重重新变得一样。
秘诀就在于使用相同的色相颜色，但改变饱和度和亮度就能改变这个按钮的优先级了，使得它比高优先级的按钮更轻。现在按钮的视觉比重有了区分，一下子就变得清晰了很多。
为了增加对比度，可以使用反色。在主按钮的深色背景上使用浅色文本，而在中等优先级按钮上使用浅色文本。这样就使得高优先级的按钮具有最亮的文本和最强的对比度。
用之前说的几个方法，已经足以区分优先级，但还可以做的更好。每个按钮设计的越直观，让用户的思考就越少。
在每个按钮文本上使用相同的粗细以表示相同的重量，最好根据优先级不同去强调不同的文本。尝试改变文本的粗细，优先级越高的按钮使用最粗体，而优先级的文本则不加粗，这样，按钮文本也有了不同的优先级，用户在阅读这些文字内容的时候就能感知到。
在这个例子中，我把”付款”这个按钮文字使用了粗体，使它变得更加醒目和明亮。”查看购物车”使用了半粗体，”继续购物”使用了中等。所以，按钮文本此时也有了一定的视觉权重。”查看购物车”中的”3项”没有加粗，因为它是补充信息，不代表具体的操作。
最后一个技巧是一种更加全面的思考，它将使按钮可供盲人使用。色盲的人是无法通过颜色来区分按钮的视觉重量的，他们还需要清晰的视觉符号。
给高优先级的按钮加上一个图标能够起到强调作用而与其他按钮区分开。当用户浏览时，他们往往更关注视觉元素而不是文本。使用图标按钮的方式能够确保引起用户足够的注意力而快速选择到高优先级的按钮。
如果删除了颜色和外框，用户仍然能够识别付款按钮，图标与文本一样，也能够起到说明的作用。
如果用户要花很长时间在操作按钮上，或者按钮的点击率很低，那就可能是按钮设计的不够直观。如果遇到了这样的情况，请尝试使用文中所说的这些技巧来优化操作按钮，或许你将会在前后版本中看到非常大的差异。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
理论表述
当存在多个相似的物体时，与众不同的那个更容易被记住。
理论背景
冯·雷斯托夫效应（Von Restorff Effect），也称为隔离效应（Isolation Effect）。1933 年，德国精神病学家、儿科医生 Hedwig Von Restorff 在研究中发现，对被测试者提供一系列相似的项，而只有一项显得特别、孤立、与众不同的时候，这一项往往更容易被记住。
在此之后，对冯·雷斯托夫效应的研究也有进一步的进展，比如从生理学上，大脑对特异点有着更加明显的 ERP（事件相关电位），这或许可以解释特异点更容易回忆的原因；再比如冯·雷斯托夫效应与年龄有着密不可分的联系，老年人对特异点的记忆就没那么深刻。
不管如何，我们还是在频繁地应用着冯·雷斯托夫效应，并能够看到它在视觉设计中卓著的效果。
冯·雷斯托夫效应可以应用的场景分成两种：环境差异和经验差异。环境差异是指在空间尺度上做出的差异（同一平面内），而经验差异是指在时间尺度上做出的差异（不同时间点的同一平面），我们来详细聊一聊这两个尺度。
环境差异──获取视觉焦点
也有的文章中会表达为「背景差异」或「情景差异」，这不重要，我们只需要知道这个差异产生的原因：即在相似的周围环境中出现差异。参考百度百科我们来进行一个简单易懂的小实验。
案例1：环境差异小实验
请试图去记住上面那几串字符串。好吧，我放弃了，但如果努力一下，我们就会发现最容易记住的是与周围环境最不一样的那个。第一行是数字「5」，第二行是星号，第三行是红色的字母「F」。
这就是环境差异所带来的识别度与记忆度的提升，也是我们经常能在 UI 设计中所看到的一种有效吸引用户点击的手段。
案例2：起点、大众点评
比如起点希望用户在个人页时去点击「版本测试」按钮，比如大众点评希望强化「订单」按钮的视觉特征以便用户能够更快速地找到，所以在列表中这两者都会长得不太一样。这种区别于环境中的其余功能按钮，为了吸引或暗示用户点击的按钮有一个专门的名字，叫做「Call-to-Action 按钮」（CTA 按钮/行为召唤按钮）。一般来说，CTA 按钮大多会利用冯·雷斯托夫效应的环境差异来达到 Call to action 的目的。
经验差异──强化时间特征
与用户过往的经验或记忆做出差异，叫做经验差异。这种差异可以放大时间点的特征，使用户对差异所在的时间点记忆更深。
案例3：google doodles
我们都知道 google 会在一些比较特殊的日子改变 logo 的设计，给 logo 加上一些非常有趣的涂鸦，与平时的 logo 做出差异，就是为了利用经验差异使用户在记忆中强化时间特征，更好地记住这个时间点。
记住时间点有什么好处呢？比如 Google 可能是为了传播世界上那么多有意义的节日，也带给公司一种具备着人文关怀的气质。再比如淘宝、京东和 Steam，在「双11」、「618」、「圣诞特卖」一定会改变主页的设计，就是为了让用户记住这几个被创造出来的节日，好让大家每年这个时候都心甘情愿地剁手。
注意点1：所有都不一样 = 所有都一样
页面中的特异点终归只能属于少数，如果整个页面所有元素都想做得不一样，都想突出，那不仅没办法突出任何一项，页面的整体视觉都将崩溃。
反面案例1：新手常常会陷入什么都想突出，但什么都不能突出的境地
注意点2：把差异放在该放的地方
当用户被特异的那一个点吸引的时候，对其他的注意力就将下降，这是冯·雷斯托夫效应天然的副作用。我们能做的就是把特异点放在最关键的地方，而不是次要的地方，这样副作用就不会太过影响体验。
反面案例2：闲鱼、虎课的退出登录按钮
前几年我们经常能看到这样的退出登录按钮，使用高饱和红色的背景，成为了这一页最亮的那个按钮。之前我们基于「警示用户谨慎按下」的理由，将退出登录按钮做成最具警示意义的红色，但是你看，一旦我们这么做了，这个按钮就成了页面中最不一样的那个，强势地拿下「Call to action」的大旗，时时刻刻都在散发着快来按我的气息，这显然与我们「不希望用户随意退出登录」的意愿相违背。所以，我们现在去看微信、QQ 这些巨头应用，都已经把退出登录按钮的差异做到最小，甚至没有差异，就是基于上述的考量。
理论表述
人们对未完成任务的记忆比已完成的更深刻。
理论背景
Bluma Wulfovna Zeigarnik，前苏联心理学家和精神病理学家。她的导师首先注意到了餐厅服务员能够很好地记住未付账单，但是却无法记住已付账单的更多细节，针对这种现象，她进行了更加深入的研究。在研究中，她发现了人存在一种天生的，做事有始有终的驱动力，这种驱动力使得人们对还没有完成的任务念念不忘，而对已经做完的任务印象不深。
蔡格尼克效应被用于证明格式塔现象不仅在感知中普遍存在，在认知中也是如此。勒温的场论给出了一种解释：一项任务被启动之后人会形成一种处于紧张状态的场，这会增强对所有与该任务相关信息的认知；任务完成后紧张的状态就会得到缓解。
注：勒温的场论（Lewin’s Field Theory）是格式塔心理学的一条分支，该理论受现代物理学场论的影响颇深，认为人在认知过程中大脑会形成一种场，这个场影响着人的感官信息的处理。
对未显示完全的信息设置「悬念」
在文字较多的组件中我们时常能看到这样的一个符号出现：「…」，这个符号用于表示文字信息未显示完全，点开可以看到完整的信息。
案例1：新草、bilibili
就是这个小小的符号，时刻提醒着我们当前所显示的信息并不完整，吸引着我们点开它继续看下去，旁边还伴随着「全部」、「展开」等词都是为了强化这一特征。
当然，不止如此，Web 端也会出现文章显示不完全的情况。
案例2：知乎、简书 web 版
通过这种方式，激发用户继续往后看，产生把文章完整看结束的驱动力。
提醒用户任务还未完成
如果一个任务存在多个步骤，那么在任务结束之前应该用某种形式（比如进度条）提醒用户任务还没完成，这能够激发用户完成任务的欲望。
案例3：多邻国
在选择和测试过程中，顶部都会出现一条进度条清晰地表达着目前任务还没完成，进行到了哪一步。在这样的提示之下，用户会有更大的动力去完成整个任务流程。
有效的任务激励
越来越多的应用（尤其是技能学习类应用）开始对学习进程进行更细致的任务分解，然后利用蔡格尼克效应的影响对用户的学习进程进行激励。
案例4：Drops
在任务进行中始终展示任务的完成进度，任务完成之后会有对应的完成提示，并且可以获得勋章/成就之类的小物件儿。也包括很多番茄类应用、习惯养成类应用，都会有类似的设计，比如 Eggzy、Forest、美妙激励等等，都是通过这种方式激励用户完成自己的目标的。我们可以从中看到蔡格尼克记忆效应发挥着不可或缺的作用，正是我们追求有始有终的驱动力，在进度条的提醒下才能一步步完成目标任务。
注意点1：任务已完成同样需要提醒
另一方面，已完成的任务同样需要给予用户相应的提示，不然用户会感到压力，会困惑自己到底有没有做完这件事，这样紧张的情绪将会一直存在，而紧张过后就是不安和不信任。
反面案例1：起点任务结束没有反馈
起点的新手任务是我最近遇到的一件特糟心的事儿。我明明已经完成了「添加一部作品到书架」的操作却没有任何完成的提示，甚至我不知道自己究竟有没有完成。明明做完了，却依然显示着「去完成」，是还有隐藏条件没做到？还是我加的那本书不算？还是必须要两个任务一起做完才算完成？还是我没氪金不让我完成？还是纯粹的 bug？我不知道，用户不知道，或许只有产品团队的人才知道。
所以，如果已完成的任务没有给予用户合理的提示或者反馈，这样的体验是很差的。
注意点2：避免过分强迫
过长的进度条会给人形成压迫，进度极其缓慢的任务，或者长时间完不成一项任务会让用户产生挫败感，对完成整个任务来说尤为不利。
反面案例2：百词斩让人绝望的进度条
192/6270，相信这个进度不仅仅是让我，让所有看到的人都感到窒息和绝望。我并不是在为我的拖延症找借口。我想表达的是，这种超长的进度条和超缓慢的任务进度，每天 50 个单词也就是进度条每天推进 0.8%，不足 1%，对用户形成的压力是巨大的，过长的任务周期也会让用户快速失去信心。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
为了和大家分享关于设计趋势的见解，ISUX 研究了 2019 年至 2020 年的设计趋势。没有必要去遵循年度设计趋势报告，但是否意识到这一趋势，对设计师来讲却非常重要。首先，我们总结了平面设计的总体趋势，同时也研究了从 Zepeto app 和 Memoji 开始的，最近扩展出来的 IP 形象设计和角色设计趋势。在本文中，我们想分享 ISUX 设计趋势报告的第一部分「图形设计趋势」。在这一部分里，我们展示了当下各种品牌和动态图形的案例，总结了 12 个值得注意的平面设计趋势。
排版一直是设计的重要元素，也是传达品牌强烈信息的手段。从去年开始，粗大的无衬线字体和强有力的排版被应用到许多品牌设计当中，这使得它成为平面设计趋势的一部分。此外，也有越来越多的品牌采用动态和反映了 3D 趋势的三维字体版式设计。
1. 动力学排版海报
这张动态排版海报不是简单地放置图形和文字，而是将移动的 3D 文字放在固定的图形上，传达新的视觉印象。这些图形主要通过 SNS 以短循环视频的形式共享。
2. Uber 品牌识别
Uber 开发了一种无衬线字体用于品牌 logo 的再设计，并将其贯穿于整个品牌系统。采用了这些品牌字体的动态海报，更为有力地传达出 Uber 的品牌信息。
3. Squarespace 品牌识别
Dia studio 常将动态文字应⽤于品牌项⽬，「Squarespace」是其代表作品之一。
4. FAD 视觉图形
以 3D 形态传递活动信息的版面设计，就像礼品包装一样。这种循环的 GIF 图也作为品牌主图形被运用。
5. 韩国女性耐克运动广告
韩国艺人支持女性主观活动的耐克运动广告，也采用了大胆的哥特式字体。这些由 Guteform 设计工作室设计的字体有基本的延展形式，同时有一个系统能延展成更为宽大的形式以适配媒体的比例。这种动态化的强烈的排版传递了活动信息，和其他设计元素的互动，最大限度地发挥了图形效果。
随着 Instagram 用彩色渐变作为品牌色，渐变趋势已经持续好几年。最近品牌，UI 和包装的图形设计都采用明亮而强烈的对比色，这种趋势不仅应用于设计，也应用于摄影。强烈的色彩组合，梦幻的色调和彩色渐变有望应用于 2019 年的整体设计。
1. APP 图标设计
△ 越来越多的手机 APP 图标使用渐变色
最近，许多移动应用程序在其图标设计上应用了彩色渐变。
2. 欧洲体育 – 2018 平昌冬奥会品牌识别
欧洲体育台 2018 年平昌冬奥会的转播也将强对比和渐变色运用于多数场景中，包括标志、图形和摄影。荧光图形和深⾊背景的对比，尤为深刻地凸显了冬季运动的感觉。
3. 篮球永远品牌识别
△ @Notreal
NBA 新闻广播公司品牌重塑项目所使用的，诸如彩色渐变和大胆排版的设计方法，也反映了的趋势。他们创作了一个系统，通过各种颜色，字体和布局的应用，可以产生各种图形输出。
4. 明日之子品牌识别
△ @Plus X
腾讯视频和哇唧唧哇联合出品的选秀节目明日之子，用多种渐变色圆形表达不同选手的才华。随着节目的进行，图形主题也会随选手的变化而变化。
与过去基于固定网格系统的布局相比，最近越来越趋于使用仅显示图像一部分的非对称布局。虽然好像只显示整个图像的一部分，设计师却可以在大系统中无限延展每个图形。你可以认为平衡被打破了，设计师却可以更加自由地应用图形元素，呈现更强烈的视觉印象，还可以有很酷的图形组成。
1. 平面海报设计
设计了各种各样图形的 Vasjen Katro，不断尝试的形状，颜色和布局也反映了的趋势，特别是不对称和开放式布局。
2. Easy Peasy 品牌识别
△ @CFC
Easy Peasy 是韩国著名化妆品公司 Amore 推出的独立化妆品品牌，以品牌关键词轻松、活跃、有趣和大胆为基础，尝试给用户更加简单和亲切的感觉。品牌用看似自由的手绘波浪线贯穿于整个图形设计，打造不对称之美，展现了自由和亲近的形象。
移动图标已成为趋势很多年了，现在应用交互元素的品牌案例也很多。比起强而有力，灵活而简单，能随内容做出响应和更改的交互图标俨然已成为一种新的趋势。
1. 国际光影艺术节品牌识别
这是交互图标的其中一个案例，用简单的方形作为基础，延展出各种各样的形状和图案。这些基本元素保持了简单和最大化的交互式图像效果。
2. SM 娱乐品牌识别
△ @CFC
韩国最大娱乐公司之⼀，SM 娱乐开发了一种新的品牌标识来反映其不断扩展的业务。它将基本圆形改变成了不同形状与小号和中号产生关联。灵活的符号和各种颜色的圆形图案是 SM 娱乐视觉识别的核心。
3. 第 59 届塞萨洛尼基国际电影节品牌识别
这是电影节一个有趣的识别案例，用卷轴缠绕的图像代替寻常的电影节标志。它不是固定的，而是复杂紊乱的，以复杂的方式排列各种不同的颜⾊和图形，表达了电影节的目的──通过电影传达多种多样的故事和情感。
4. 第 6 届广州三年展品牌识别
传递展览核心信息，反复复制到三维空间的基本矩形，显示了展览的特征。在整个展厅中，你可以看到它以多种变动的形态被应用，同时也以不同的形状被运用到各式各样的场景中。
3D 趋势如此流行，以至于在平面设计趋势中也不得不讨论它。当下有很多的 3D 图像尝试用复杂的纹理给大众展示生动逼真和新鲜感十足的印象。通过在三维几何形态中，添加逼真的纹理，创造在现实中不可能存在的图形，人们正在定义一种新的现实主义。
1. 3D 插画
George Stoyanov 通过组合各种几何形态来表达形状之美。这种视觉尝试很有意思，因为它很难在现实中制作。
2. Adobe Think Tank 视觉图形
这张图像由不同形状，纹理和颜色的几何物体设计而成，表达了 Adobe Think Tank 包含各种主题论坛的品牌特征。
3. 现代「超级消费者」品牌视频
将各种各样的材料和颜色运用到人类行走的形状当中，传递出一种非现实和新鲜感十足的视觉印象。
4. 耐克PG3「舒适体验」广告
△ @GRIF
用柔软的毛皮材料营造耐克的主要感觉──舒适感，非现实的图形里有着生动的质感，让人耳目一新。
使用有机图形并不是一种新的潮流，但我们发现今年也有大量的图形使用水和油等液体来表达效果。它有时被用作品牌的主图形，你可以在 3D 短动态图形中明显地感受到这种倾向。这种具有强烈色彩和渐变的有机形状，传达出一种精致而梦幻的感觉。
1. 有机形态的 3D 视频
△ @cmttat
有机形态通常以 3D 形式被应用，并且广泛应用于 SNS 共享的短视频作品中。今年尤其有很多透明质感的案例，这些透明材质运用各种颜色，使色彩搭配产生变化，营造出神秘的气氛。
2. 孔雀学会 2018 品牌识别
△ @Irradie
将明亮多彩的渐变色应用于有机形态，这些图像表达了巴黎电子音乐节的特征。
各式各样的平面插画曾经退出过潮流，但现在已经成为一种强烈的设计趋势。很多品牌都通过聘请知名插画家的方式，用平面插画给大众新的印象。去年以来，除了 2D，3D 角色插画也成为一种趋势被应用到越来越多的品牌设计当中。
1. Uber 品牌插画
运用于尤伯杯品牌新形象的插画，是其简洁有序品牌系统中有趣的一部分。
2. Spotify「音乐与你同在」插画
△ @Circus
这是 Spotify 运用了 2D 插画的品牌视频。手绘质感，色彩简单，人形的四肢都很大是最近的插画趋势。
3. Belif 品牌插图
这是基于三维角色的 2D 图案设计示例，运用于包装设计和品牌视频。
等距设计是一种将二维图形绘制成三维的方法，最近已成为一种趋势，在图形和动画视频中被广泛应用。许多设计师通过运用这种技术，在一个框架中显示整个图形，创造有趣和独特的氛围，呈现出一种全新的视觉印象。和去年一样，等距设计在今年似乎也会越来越流行。
1. 等距插画
经常使用等距技术和彩色渐变的插画家 Mohamed Samir 设计了一系列富有趣味性的海报。
2. 等距视频
△ @Matthieu BRACCINI、@Panic Studio
将大物体变成微小模型的等距设计方法能给人留下印象，最近可以看到很多运用了这种方法后，屏幕变得更加特别和有趣的案例。
结合不同媒介的各种图形，创建有趣的效果是过去常见的一种方式。最近，结合大胆色彩，逼真照片和 3D 图像给大众新鲜感受的案例也很多。含有扁平化元素的真实图片和视频是 2019 的主要趋势之一。
1. 3D视频+2D图形
△ @Sergio Fuego、@giantantstagram
当 2D 和 3D 图像组合在一起，立体效果可以更加独特和突出。这是使用了此方法的优秀视频案例。
2. 真人实拍视频+2D插画
△ @+CRUZ
匡威活动视频是一个很好地混合了拍摄视频和 2D 图形的案例。
3. 真人实拍视频+发光涂鸦动画
在真人视频中添加发光的涂鸦动画，可以使视频更具动态性和趣味性。当下，SNS 平台上越来越多舞者和歌手的视频都使用这种效果。
4. 运动 3D 的 2D 插画视频
有很多作品很难知道它是 2D 还是 3D。用 3D 表达物体运动，而不是简单地使用 2D 图形，这种视频能传达一种新的视觉感受。
当通过 SNS 共享图形图像变得非常普遍时，短小和重复的动态图形也变得很易见。logo、2D 插画、3D 图像和各种各样的图形都以短循环动画的形式共享。
1. 2D 短动画
这些短视频通过在简单的扁平插画里重复使用短动作，传达了一种独特而有趣的形象。
2. 3D 短视频
由于 3D 是主要趋势，小而重复的 3D 图像也值得注意。添加 3D 真实纹理和效果，可以带来独特的视觉感受。
AR 和 VR 技术的发展，对平面和多媒体的设计趋势产生了很大的影响。这些新技术使人们对品牌有更加立体的体验。
1. Le Graphisme Augmente 图形海报
尽管是印刷海报，它也允许人们通过印刷材料使得 3D、AR 技术获得交互式体验。印刷海报只包含简单的几何图形和极小的信息，但当你通过手机查看时，将获得更多的信息和看到立体的形状。
2. Apple Music x Memoji 广告
△ @Apple
Apple 使用基于 AR 技术的 memoji 来推广 Apple 音乐。著名艺术家如 Ariana Grande 推出了他们的歌曲，通过这支广告，Apple 一起宣传了 Apple Music 和 memoji。
3. Nike：上海 Never Done 运动店铺网站
△ @AKQA
上海耐克通过 AR 技术实现 360° 网上零售的项目，可以让消费者根据运动的出汗量来进行购买和体验服务。
4. 奥迪 Quattro Coaster 广告
△ @POL
这是奥迪利用 AR 技术的项目，它能让消费者将汽车从银幕上带到自己的位置，从而积极体验开车的感觉。
5. 2018 年英雄联盟全球总决赛开幕式
2018 年英雄联盟的开幕舞台利用 AR 技术，使演唱 POP/Stars 的真人歌手和游戏里 K/DA 角色一起同台演出。这些被实时跟踪的角色，在实际舞台上带来了真实的表演效果。
新复古，用现代感觉诠释复古，已成为一种新趋势。新复古是一个结合了「新」和「复古」的词，是对过去怀旧的现代诠释，不仅是设计，在时尚、建筑、流行文化等各领域都是一种新趋势。
1. 复古风格视频
流行于 80 年代和 90 年代的电子游戏，和好莱坞电影的复古图像与视频，被重新诠释后，再一次流行起来。
2. Fritz Coffee Company 公司品牌识别
韩国著名咖啡品牌，Firtz Coffee 创造了的，具有复古 logo 和图形的品牌标识。
趋势不会朝一个方向发展，它可以扩展成各种各样的方式，就像我们看到的反映了趋势的 3D，AR/VR 技术也包含了复古风格一样。我们希望这些不同的趋势能以新的方式被应用，从而创造出新颖而有趣的设计。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
简介说明1. 原理表述
系统需要在 400ms 内对使用者的操作做出响应，这样才能够让使用者保持专注，并提高生产效率。
2. 实验背景
上世纪 70 年代后期，计算机研究人员依然认为计算机可以花费两秒的时间对使用者的操作做出反馈，因为他们认为人们大概正好需要两秒时间来决定下一步的操作，所以 2s（2000ms）一度成为了当年计算机响应时间的标准值。直到 1979 年计算机的算力开始大幅提升，也有了足够的能力在 2000ms 内做出响应，这时 IBM 的研究员 Walter Doherty 进行了一系列研究来评估算力的增长对生产力的影响。
研究结果表明，计算机的响应速度直接影响了使用者做出下一个决定所要花费的时间（这个时间被称为用户响应时间），换句话说，计算机相应的时间越长，用户就要花费越多的时间来思考和决定下一步的操作。
上面这张表格充分说明了这一观点，横纵坐标分别为用户响应时间和系统响应时间，我们可以看到系统响应时间如果从之前的 2000ms 降低到 300ms ，使用者作出下一步指令所需要的时间就能够缩短 5s 以上。Doherty 认为人们会将工作需要的一系列操作步骤存储在短时记忆之内，如果系统响应时间太长，就会打断人们的短时记忆，换句话说，思路都不连贯了。
不仅如此，Doherty 还认为响应速度低于 400ms 的系统或者程序，会让人上瘾。放在当下的环境来看，这当然只是一句比较夸张的话，但是结论是需要我们重视的，程序的响应时间，务必在 400ms 之内。
要说「多尔蒂门槛」带给我们的启示，上一节最后一句已经表达得足够清楚：系统或程序的响应时间小于 400ms 。为了让读者有更加直观得感受，我们先来一组小动画感受一下高响应延迟有多让人抓狂，快速响应又多么让人舒服：
应用案例 1：模拟延迟效果
注：请务必挨个观察，不要看整体，看单个的效果。
从动画中可以感受到，50ms、200ms 还算可以让人接受，当响应时间达到 600ms 时已经让人有些不耐烦，而达到 1000ms 时会让人不自觉多点几下，2000ms 时我手机已经被我砸了。
在如今的计算机算力之下，响应时间轻轻松松便能够达到多尔蒂门槛的阈值，甚至能够远比 400ms 更小，但是这就够了吗？「多尔蒂门槛」说到底只是给出了响应时间的上限，400ms 的响应时间或许在多尔蒂那个时代确实能够大幅提升操作员的操作效率从而产出更大的经济效益（比如银行系统），但是现在互联网已经越发成熟，不少公司的用户体验研究者都已经意识到，系统响应时间已然不是影响用户响应时间的唯一因素了，另一个因素是过渡动画的持续时间。
就像谷歌在 Material Design 中明确规定了过渡动画的 Speed 这一项，这是为什么呢？用户体验是一门关于情感和逻辑的学问，而不仅仅是一个统计数字就能解释的，让程序对某一操作的反馈时间（包括响应+动画）符合用户对该操作的预期才是让用户「上瘾」的关键。
应用案例 2：iOS 中的动画
所以，哪怕我们的手机、电脑已经可以做到在 100ms 之内做出响应，快到完全有能力在用户反应不过来的情况下给出反馈和结果，但是这样是不够的，我们依然需要「合适时长的」动画作为计算机反馈和大脑反应之间的润滑剂，而不至于让程序使用起来太「干涩」，也不至于让大脑一直处于应激反应的阶段而感到疲劳。
在真实世界中我们使用应用时会发现，有时候响应速度没办法做到如此迅捷快速，比如 APP 启动时；还有时候即便系统可以响应，网络却不行。网络并不能在用户操作的一瞬间就把所有需要的资源都下载好，用户必须等待几秒的时间，那么这时候就需要考虑如何减少用户等待的焦灼感，优化等待的体验。
比如有趣的加载动画、闪屏页等，都算是解决办法。
应用案例 3：Netflix 的启动动画以及新草的加载动画
动画的持续时间应当在适当的区间中取到最短，而不能太突然或太缓慢。
反面案例 1：过快或过慢的动画
在现实的上线 APP 中，也会有故意把动画做得很慢的例子，这比较影响操作的流畅性。
反面案例 2：Eggzy
左右滑动的时候动画效果在实际体验中非常慢，对于想要进行连续滑动操作的用户（即便这样的使用场景不多），已经慢得无法忍受，有一种「不跟手」的感觉，这么慢的动画已经很轻易就能让用户感受到自己在等它了。
仔细浏览 Material Design 中给出的案例便可以发现，动画的持续时间大致可以参照以下几条规律去尝试：
蓝蓝设计的小编 http://www.lanlanwork.com
