如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一位高管在餐巾纸上画了一个新的主页原型来演示她使用和喜欢的网站。一个开发人员晚上在公司呆到很晚，并添加了一个他认为很酷的新功能。或者产品经理坚持采用与竞争对手相同的设计模式。
如果这些故事听起来很熟悉，那么你并不孤单。大多数设计师都会收到这种“帮助”。
你的第一直觉可能是以平淡无奇的方式回应“不”。但是，一个用户体验建议是否来自一个关键的利益相关者或项目周边的人，应该仔细处理。在您做出反应之前，请考虑以下步骤：
你的第一反应可能是利索地对对方说“不”。但是，无论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 中给出的案例便可以发现，动画的持续时间大致可以参照以下几条规律去尝试：
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
为什么要构建 MIZ Design？随着米庄 APP 用户的增长，以及 APP 不停的迭代，我们在设计上积累了越来越多的债务。越来越多的新页面，新功能，以及不同的组件，都是由不同的设计师来设计，前端也是由不同的开发来实现，这直接导致了整个 APP 越来越臃肿无序，视觉和交互体验不一致，且团队沟通成本高，重复劳动力大，输出效率低，迭代速度慢。
开发层面
场景：
设计师：涉及到这个组件的页面都改一下吧。
开发：改不了，每个页面都是单独写的，改起来非常麻烦，耗时间耗资源耗人力。
设计师：为什么同样的组件要单独写？
开发：我怎么知道，这是以前的开发写的，而且写的乱七八糟。
设计师：……
那怎么办？不改也得改呀。总不能一直留着这些大大小小的毛病，不解决问题会越来越严重。
代码混乱，遗留了非常多的开发层面代码不一致的问题，后期迭代的过程中如果不统一，也会使整个系统失去可控性。
设计师层面
场景 1：
设计师 A：这个页面是谁做的？源文件有吗？
设计师 B：不知道哎。以前的设计师做的。去库里找一下吧。
30 分钟以后，依然没有找到源文件。
场景 2：
开会：为什么这个项目的页面和以前的风格差很多？
设计师 A：现在流行的就是这个风格呀，多好看。
设计师 B：虽然设计每年都有流行趋势，但还是要和产品品牌风格相结合。
一个项目两个设计师负责，设计出来的页面控件：按钮，列表，输入框，色彩，视觉风格完全不一致。在 2 个设计师完成设计以后，还需要整合在一起重新修改，效率很低。并且每次页面中的元素，开发需要根据不同业务中的不同设计师的「创意」来进行人肉修改。
当我们开始设计新的页面，功能需求点优化的时候，这个问题变得更加严重。同时，因为没有一个统一的基础设计规范原则，设计师在设计项目的时候，在设计决策和讨论中花费了大量时间，会存在大量的重复劳动。同时由于产品的界面和交互缺乏一致性和可预测性，用户体验也受到了影响。整个产品也会在风格定位上不统一，没有确定产品风格特质的情况下越来越模糊，失去自身品牌该有的特性。
产品迭代，基本上是基于新功能的开发设计迭代，新的功能、新的页面不断的增加，对于设计师而言，有设计规范的原则做基础设计框架，更容易延续 APP 统一的设计风格，不至于被不同的需求，不同的设计趋势以及蠢蠢欲动的新的设计灵感牵着鼻子走，导致越做越乱，无章可循。
一个 APP 就像自己的孩子一样，从一个嗷嗷待哺的婴儿逐渐长大成人。设计系统就好比一个人的生物系统，是整个生物体的基础。如果对此系统不维护，那么此系统将会随着时间的增长越来越脆弱以及呈现不可逆的现象。那么如果维护好一个设计系统，骨骼会在成长中呈现规律清晰的生长模式，会随着业务的生长而生长，可控制、可更新，使生物体健康的发展然后去完成它的使命。
Design System 最开始是 Guide 演化而来，Guide 是一套可指导、可延续、可扩展、可统一的、可区分的视觉指引手册，指导相关设计结构完成统一性与对外区分性。具象层，它是一种设计方法；抽象层，它是一种思考模型。
最近几年，「Design System」这个词非常火。下面介绍红遍全球设计界的两大设计规范网红。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目标是创造一个将经典的设计原则和科技、创新相结合的设计语言，并且在不同设备上提供一致的体验底层系统，并同时支持触摸、语音、鼠标、键盘等输入方式。
一经发布就红遍了全球设计界。新颖的设计理念，清晰明确的设计原则，详细的设计规范，使之成为完美的安卓端标准设计规范。也给设计界的设计师们提供了非常好的参考，很多设计师也根据 Material Design 设计原则延展出更多的创新设计可能性，制作了各家的设计规范。
出了官方的 Sketch 组件库以后，谷歌团队还开发了基于此设计规范的延展工具：比如基于 Material Design 色板的 Sketch 源文件下载；谷歌色彩颜色获取工具；一整套的 Material Design IOCN 输出；在 2018 年 5 月份的 Google I/O 大会上，Google 设计团队开发了一款叫做 Material Theme Editor 工具，可以帮助设计师轻松且快速创建符合自身品牌又符合 Material Design 风格的应用。
设计价值观
设计原则
材质是一种隐喻：Material Design 的灵感来源于物理世界和世界中的材质，包含了材质如何接受光的影响以及所形成的光影效果，并且对纸张的质感和墨水的介质重新进行了构想。
大胆，图形，鲜明：Material Design 基于印刷设计的指导原则，字体、栅格、留白、颜色等元素都以创造层次、意义和焦点为基础来让用户沉浸在设计体验中。
动效赋予意义：微妙顺畅地反馈和过渡性的动作效果，引起用户的注意力并使之保持持续关注。当元素出现在一个界面中的时候，元素之间的互动重塑了环境。
基础灵活：Material Design 同样旨在实现品牌价值的传递。结合了基础的代码、组件和元素，可表达不同的品牌需求。
跨平台：Material Design 的 UI 组件库可在不同的平台共用，不论在安卓平台、iOS、Flutter，还是 Web 都可保持一致的组件元素。
iOS 的人机规范指南，保持了苹果一贯的风格。虽然没有 Material Design 规范那么细致全面，但是核心的设计原则在每个组件的设计说明中都有渗透。作为 iOS 系统的设计基础，建议每个设计师都需要仔细研究。
iOS 设计价值观
iOS 设计原则
Aesthetic Integrity 整体美感：整体美感不仅仅包括美观的 APP 界面，还包括流畅的交互体验，产品功能和用户行为的有效结合。比如当一款工具类 APP 主要是帮助用户完成一项任务时，设计师应关注于用户操作本身的行为路径，和产品功能相结合来帮助用户完成目标，使用户聚焦功能本身。而如果是一款游戏，那么需要提供非常有吸引力的界面，在鼓励引导用户探索的同时也有非常棒的操作体验。
Consistency 一致性：一个保持了一致性原则的 APP，通过使用标准的控件、熟悉的 icon、标准的文字规范、统一的组件俗语来实现一个拥有标准化范例的系统。这个系统提供的特性和交互行为也符合用户的心智模型和预期。
Direct Manipulation 直接操作：让用户在屏幕上直接对内容进行操作的交互行为，可以鼓励用户和系统进行交互并且更易于理解。当用户翻转屏幕或者使用手势直接与屏幕交互时，他们会感知到直接操作的行为，并且能立即得到操作结果。
Feedback 反馈：反馈能够响应操作，呈现结果，使用户获得信息。手机中内置的 iOS 应用程序为用户的每一个动作提供可感知的反馈。交互元素在点击时会凸显被高亮显示，进度指示器显示了需要长时间运行的操作进度、动效和声音，使用户能够更清晰地感知交互行为的结果并作出响应。
Metaphors 隐喻：当一个 APP 的虚拟对象和操作路径与用户本身所熟悉的心智模型一致时，不管它是来自于真实世界还是数字世界，用户都能很快上手。隐喻之所以有效果，是因为用户和屏幕存在物理上的交互。用户可以通过移动分层视图来显示手机上被遮挡的内容；拽拖并且滑动对象，切换开关，移动滑块，滚动数值选择器，用户甚至可以通过翻转手势来翻阅手机上的杂志和文章。
User Control 用户控制：在 iOS 系统中，用户是主导者，而不是 APP。APP 可以提供行动建议，给予警告提示，但是不应该替用户做选择。优秀的 APP 始终会在用户主导和用户不想要出现的结果中保持平衡。一个 APP 应该始终让用户感知到在他的掌控之中。交互的元素给用户熟悉感并且可预期；对有破坏性的操作可确认；对错误操作可取消，即使是在进行中的行为也可中断。
在 Sketch 工具中可直接下载 iOS 的组件库使用。
在 2016 年，由工程师和设计师组成的团队创建了 Airbnb 的设计语言系统 （DLS）的第一个版本，其目标是创建一致的体验和跨平台的统一。DLS 包含了一套内部和第三方工具，由共享原则和模式定义的组件的集合。这允许使用跨设计、工程和其他学科的共享词汇表进行快速迭代。DLS 的结构简单而连贯，简化了团队之间的沟通。并制定了以下几条原则来指导 DLS 的设计：
ADS 开源库
Airbnb 设计副总裁 Alex Schleifer 在 IXDC 2017 国际体验设计大会上分享了这一创新的 React Sketch APP 管理设计系统，这是为 Airbnb 的设计系统而设计的，其实就是个实时更新的代码数据库，可以实时查询 Sketch 数据和代码，也可以下载图标、设计模块，所有工程师和设计师都可以免费下载。看到这个，我想完美共享库也许并不是那么的遥远。
Airbnb 团队在设计 DLS 过程中，也是通过原子组件的方式来构建整个框架，我觉得他们对于设计系统的理解非常对：「一个统一的设计语言不应该只是一组静态的规则和原子组件构成，它应该是一个可持续发展的系统。」所以在构建好底层的设计语言之后，可持续性、可发展性，是维护并让设计系统产生价值的重点。
随着商业化的趋势，越来越多的企业级产品对拥有更好的用户体验有了进一步的要求。带着这样的一个终极目标，蚂蚁金服体验技术部经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于「确定」和「自然」的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
设计价值观
自然，让人机交互行为更自然。
自然规律运用到设计中，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。蚂蚁金服已做了部分探索，并将追求「自然」作为未来持之以恒的方向。
自然的人机交互核心：节能。既要节省身体运动的体力，更要节省大脑思考的脑力。
那么如何在设计中体现呢？
确定，保持克制、对象设计方法、模块化。
设计者需要做出更好的设计决策，给予研发团队一种高确定性、低熵值的研发状态。同时，不同设计者在充分理解业务诉求后，基于 Ant Design 体系都会有相同且符合当前业务特性的设计产出。
给予用户确定感，结合 Ant Design 的三个关键点，可以总结为边界和规则 2 个方面：
构建米庄设计系统的目标是什么？
意义
有了规范和控件库，设计师在接受需求的时候，可以减少设计成本，提高设计效率，尤其是在用于快速迭代产品的阶段，通过大量的标准化组件即可实现缩短设计周期的效果，并且设计师可以更专注于深耕体验和细节，同时能保证高质量的输出。
构建一个设计系统来支撑产品的所有业务线，解决团队协作一致性问题，产品的周期性更新问题，解决不同的设计师和工程师规范性输出 UI 的问题，最终从设计驱动商业的层面上，解决用户体验一致性，迭代开发的问题。
时间
APP 进入稳定发展阶段，也完成了基础功能的开发，在业务稳定发展的前提下，构建已有 APP 的整体框架，规范前端开发和设计流程是个好时机。在产品发展到稳定阶段、参与的人越来越多时，对整个 APP 的页面整理是非常有必要的。也为了后续快速发展的业务起到完整系统地支撑能力。
人力
相信几乎在所有的公司和团队，规范建立都是非常有价值，也非常耗费资源的一件事。你可以一天抄一套亮丽炫酷的 UI kit，但是你没法一天上线一套系统。没有上线落地的视觉规范只是耍流氓。所以项目启动的时候，团队分工必须明确，你们是一条船上的人了。势必要有劈浪前行，破釜沉舟的决心。
场景
所以在项目开始之前，便需要和整个团队统一目标意义：视觉规范的建立，除了保障统一的用户体验和认知，还能够通过工程师代码层面的组件化提高开发、设计效率。整个设计系统的开发，从设计到落地，需要产品、设计和前端的全力支持。
鸡生蛋问题
即使我们看了很多设计系统范例，甚至也下载了很多 UI KIT 的源文件来做参考。我们依然无法确定第一步需要做什么。当我们还没有组建一个 UI kits 组件库的时候是如何来搭建一个页面的呢？是先有了组件，然后创造了模块页面；还是先设计了页面，然后再来归纳总结出页面汇总的元件呢。这和先有鸡还是先有蛋的问题有所相似。
原子理论
在学习其他公司如何搭建设计系统的时候，我们了解到了 Brad Frost 的原子设计理论。他提出了原子设计原则，并且在他的文章中有一句非常出名的引用：
we’re not designing pages, we’re designing systems of components.──Stephen Hay
概念
2013 年网页设计师 Brad Frost 从化学中受到启发：原子（Atoms）结合在一起，形成分子（Molecures），进一步结合形成了生物体（Organisms）。于是提出了原子设计方法论，由原子、分子、组织、模板和页面共同协作以创造出更有效的用户界面系统的一种设计方法。
原子设计的五个阶段
原子（Atoms）：符号，为页面构成的基本元素。例如颜色、字体，或是一个图标等。
分子（Molecules）：组件，由原子构成的简单 UI 组件。例如，一个表单标签，搜索框和按钮共同打造了一个搜索表单分子。
组织（Organisms）：模块，由原子及分子组成的相对复杂的组织，在 UI 页面中可视为模块/样式层级。
模板（Templates）：原型，将以上元素进行排版，显示设计的底层内容结构，在 UI 设计中对应的是原型图层级。
页面（Pages），将实际内容（图片、文章等）套件在特定模板，页面是模板的具体实例。
特点：
从 Brad Frost 的原子设计理论得到启发，将我们 APP 产品的所有页面都整理了出来，我们归纳出了组成这些页面的常用组件。这个详尽的库帮助我们以一种更合理的方式构建了一个设计系统的底层框架。
这个理论提出来以后就产生了非常大的轰动。并且至此以后 Atomic Design（原子设计）成为了构建 Design System 的核心指导理论。
Sketch工具
Brad Frost 在 2014 年提出来：「使用 Sketch 的 Atomic Design 是产品设计的未来。」我们可以使用 Sketch Library 功能实现组件库的创建。而组件库的底层逻辑就是原子设计理论。Sketch 中的 symbols、textstyles、color styles、Layer style ，来构建组件和样式。
Text style：Text Style 用于设置文字规范，在一个系统中包含大量的文本样式，并且拥有不同的文本属性。使用字体样式来管理一个系统中的字体样式，可使之便于管理和修改，保持系统的可持续性和可用性。并且可单独输出字体样式系统进行团队之间，不同项目之间的共享。
Layer Style：可编辑元素的各种样式，比如用于制作颜色规范，涵盖填充颜色、描边颜色、内外阴影、模糊效果等内容。可使元素保持一致的图层样式。
symbols：设计系统中的任何元素都使用 symbols 来形成符号，可复用、可嵌套、可批量修改，非常灵活化、轻量化。并且将符号进行嵌套组合，可形成符号嵌套，作为模块来使用。symbols 在使用过程中如果使用「/」来命名，那么会形成符号嵌套层，作为不同符号组件的分层。同样的对于 symbols，可使用缩放工具，来灵活适配各种不同的界面需求。
Library：Library 是所有元素、文字样式、图层样式等组合的一个组件库，可通过共享形式，来使它成为团队的设计工具。轻松访问次库中的所有元素和样式，并且始终可同步接受更新，保持一致和的文件状态。
在确定了原则和工具之后，我们为设计系统项目制定了完整的项目计划，因为涉及到上线和设计两大块，所以项目也是分设计线和落地线，两条线既有关联性，又是相对独立和分离的。组件设计完成以后才可上线落地，因推动落地的过程是需要整个设计开发团队的，不管是从时间还是人力上的资源协调和配合，所以落地线需要更加灵活。
设计阶段 – 设计线
目标结果 – 设计资产
设计阶段，我们所产出的设计资产包括设计价值观，设计指导原则，以及设计模式（解决方案）。
展开实施 – 任务细分
确定了设计资产以后，我们将设计资产进行细分。整理规范的内容并对每个组件进行优先级的确定。整理规范内容的过程也是一个逐渐完善的过程，第一次整理可能并不完善，但是没有关系，先把基础框架和内容整理好，后续在设计过程中有遗漏的再进行添加。
内容整理好以后，我们会发现一套规范里内容非常多，所以需要根据项目时间来安排所有内容的优先级和分工。根据我们的设计系统的底层逻辑，所以我们将核心组件建设放在第一阶段，比如字体、颜色、icon 等。构建了基础元件以后再来搭建模块，最后再根据不同场景来确定样式。至于分工，最好整个设计团队的人员都可参与，互相分担工作量以达到工作效率最大化。
整体内容确定以后，因每个组件的整理有规范可循，所以我们针对每个组件的设计过程也确定了单个组件的设计流程。
过程跟进 – 关键节点
在设计过程中，我们也需要对关键时间节点的项目整体进程和结果输出总结。此阶段是和上线的项目节点重合的关键点，设计输出的内容会和上线过程有非常多的磨合，一个组件的落地还需要不停的和开发沟通，收集反馈意见，并且进行调整修改，记录解决问题。
执行复盘 – 结果验证
在每个组件的设计过程中，我们都会反复完善每个组件的内容，包括设计原则、交互细节以及应用场景等。反复去验证组件的可行性。并且对阶段性完成的设计结果进行复盘和分享，进一步来验证设计方案的可行性。规范需要不停地优化创新，才能让它的可持续性特性发挥至最大。
上线阶段 – 落地线
没有上线落地的视觉规范只是耍流氓。
设计师自嗨并无意义。推进的过程，最重要的还是沟通。沟通的内容包括组件输出的合理性、开发工作量、产品版本迭代需求计划等。
愿望如此之美好，现实如此之贫瘠。
设计从落地到上线的过程想必每个设计师都有大把心得。在公司中实际的推进是非常难的，因为产品需求永远都做不完，开发永远在写代码，设计永远需要将先完成业务需求设计为前提。所以如何将设计规范的内容插进项目中是个最关键的点。
存在问题，根据项目的时间安排和产品迭代安排，我们试图将不同优先级组件的内容分配到不同的产品迭代中。实际却证明这非常的理想化。在这个过程中我们遇到非常多的问题：
解决方案：
APP 在建立的时候没有规范性，所以现在想要规范所有的内容就是一个非常巨大的工程。就像没办法一口吃掉一整块蛋糕一样。
我们的核心组件在产品迭代中完成上线以后，将剩余的组件规划至开发的重构版本中进行开发。减少资源的重复使用，以及最大化降低对 APP 的影响。我们衡量了利弊之后，决定此次规范的设计对于样式的修改减少到最少，保持和线上内容的一致性。很多时候我们设计师对于设计趋势是很敏感以及非常想要去创新的，但是基于现状下保持对样式的克制完成基础体系的搭建这个核心目的，是最重要的事。
MIZ Design 的设计资产中设计价值观是贯彻整个产品的迭代发展，是产品持续迭代的指明灯。设计原则是团队成员建立设计的标准指导规范；设计资源库贯彻设计师、开发和产品，实现产品迭代。我们也非常愿意分享这个过程，希望对大家建立设计规范整个流程有所帮助。
When your values are clear to you,making decisions becomes easier.──Roy Disney
当你认清自己的价值观和行为准则后，决策就轻而易举了。价值观是指明灯，贯彻整个产品系统。我们根据米庄品牌的特性，以及业务场景的需求来定义 APP 的设计价值观，指导 MIZ Design 的设计语言的建立。
品牌特性
米庄的品牌理念在于科技金融，小额惠普，以简单可靠的价值观来驱动业务增长。
业务场景
米庄作为金融工具类产品，功能操作场景不算复杂，强调一致性的用户体验和安全规律的操作路径。这也体现了产品对于不同页面元素之间的相互关联性和一致专业性的要求。
用户调研
结合我们进行的用户调研报告，米庄产品的核心用户对我们产品的需求是赚取零花钱居多，也就是利益的获取。所以针对明确的用户目标，我们对于整个产品的设计需要以产品可操作性、性为第一原则，呈现的视觉层以安全可靠，清晰明确为风格导向。
从以上三个方向，我们概括了设计价值观核心的三点：
格式塔心理学
心理学的完形法则：相似、相近、封闭、简单。
MIZ Design 的设计原则参考了格式塔心理学，取人和万物交流的过程中，大脑最基础的一些精神反射和行为操作，格式塔心理学的理论主张研究意识和行为，强调经验和行为的整体性，这也符合了米庄的设计价值观里关于效率和自然的定义。所以我们参考此心理学来帮助团队顺畅地沟通，减少信息不对称以及学习成本，作为协作的基础。
第一性原理
埃隆·马斯克非常推崇的思维模式是 「First principle thinking」，也就是「第一性原理」。它是一种演绎法思维，自上而下来看，就是从原理出发，一步步往前推演，直到找出适合该问题的解决方法。自下而上反推，那么它的原则便是从结果出发，把事物分解成最基本的组成，看透事物的本质，从源头解决问题。这和原子设计理论也非常有相通性。巴菲特的伙伴查理·芒格也是第一性原理的积极实践者，他将此原理视为科学界和商界非常古老的一条守则。
奥卡姆剃刀原理
Entities should not be multiplied unnecessarily.
如无必要，勿增实体。
奥卡姆剃刀定律是由英国奥卡姆的威廉所提出来的。他提出「切勿浪费较多东西去做，用较少的东西同样可以做好的事情」，也叫简约法则，是一种迅速决策和判断认知行之有效的工具之一。可以简单理解为保持事物的简单性。在各个学科，各个研究领域都有发展。这个原则至少可以追溯到亚里士多德，他写到：「Nature operates in the shortest way possible」，自然作为一个稳定的，持续自我生长的系统，发展原则是尽量保持简约之道。
设计资产层面，我们输出的内容包含了以下两大部分：
MIZ UI KIT_3.0 LIBRARY：
MIZ UI KIT 说明文档：
开发层面 – 沟通，减少重复
基于 UI kit 创建的组件库，帮助他们在最终产品中保持代码的一致性和复用性。并且设计语言作为一种工具，是整个团队顺畅沟通的最重要的语言。所以我们确保我们的设计语言，是能够让开发，产品都懂，并在第一时间执行的。既然是语言，那么每个元素都会有自己的名字。每个组件，甚至每个组件中不同属性的元素我们也赋予它名字。
无名万物之始，有名万物之母。──《道德经》
我们的祖先发明语言文字的过程，其实就是一个给万事万物命名的过程。而名字是连接人和世界的渠道。名字也是主观的，因此它有情感温度，也会有文化偏见和个人信息资产的反应。所以我们需要给设计系统中的每一种组件都给予属于它的名字，才能让它成为一种专属于你们产品的特殊语言。
场景：
开发：#000和#00000000分别替换成什么颜色？
设计师：#000，替换成 black-1
开发：那#00000000呢？
设计师：一脸茫然，这 2 个不是一个颜色吗？
惯性思维，色值在设计师眼中，对应的是一种色彩，而在开发眼中只是一堆数字。将心比心，当你扔给开发一个色值的时候他们只是一个难过的问号；而当你给他们具体的一个颜色的名字，他们能马上对应到这个名字，那么就是顺畅的。
所以当我们给颜色命名以后，沟通就变成了以下这样：
设计师：#ff5600 换成 orange-2。
开发：好的。修改完成。
设计师：#ff3450 全部替换成 blue-2。
开发：好的，替换完成。
设计师：这次我们品牌升级，orange-2 的色值更改为 #ff5666。
开发：好的。全局修改完成。
虽然修改的过程比较辛苦，但是结果是好的。从此设计师掌握了话语权。当然，开发也很高兴。
不单单是色彩，我们对字体、icon 以及间距等也定义了尺寸。给抽象事物以不同的命名来赋予它意义，也能让使用者使用它产生价值。
设计层面 – 输出，快乐传承
设计师们可以更加便捷地创建、分享、定义设计界面的内容。此外，在设计传承方面，也能让我们更好地将设计原则传递给新人。
场景：
设计师 a：此次版本迭代涉及到优惠券页面的优惠，这个页面的字体和颜色有规范吗？
设计师 b：有的。请参照设计规范。
不同设计师在接到需求开始设计以后会担心：怕风格有差别，怕页面不统一。辛苦做好页面以后发现和别的设计师同时做的差别很大，也不符合产品整体品牌调性，陷入循环改稿中。此时设计规范就是迭代的明灯，天上的北斗七星，指引方向让你不偏离终点。
同步更新：设计资产的目标用户，除了团队中的前端开发，那么最大受益者其实就是设计师们。设计系统的一大优点便是修改设计系统中任何一个原子，整个系统所有这个原子都能感知到。这便是设计系统的可持续性、统一性，也是设计系统的基础。
△ 组件库中的任何修改，会同步到所有使用该库的文档中
自定义内容：组件中的内容都可自定义进行修改。
解放重复生产力
Here’s the simple truth: you can’t innovate on products without first innovating the way you build them. ──Alex Schleifer
这句话的道理和我们的设计原则中第一性原理相通，从原理出发，一步步往前推演，直到找出适合该问题的解决方法。这和在构建设计系统的时候是一个道理。学习从元认知能力开始，而组件一个系统，从元件开始。埃隆·马斯克从组成汽车的发电机开始思考，创办了特斯拉；从底层元素的创新开始，才会有产品整体性的创新。
最后补充一下结构图：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Loading动画，在现在的设计中已经是一个必须要设计的系统元素，它能减缓用户等待焦虑的心态，也能用来作为品牌透传，增加曝光。
那关于loading动画相关知识，我觉得对于设计师来说是有必要去了解的，所以我找到了这篇优秀文章，让大家能够深入了解loading动画，透过现象看本质，学以致用。
图片来源：Domaso
没有人喜欢等待
在用户心目中，优秀的应用、工具、网站都应该是制作精良且能快速响应他们需求的产品。
举一个真实的例子：最近我们新发布了一个用户评价的应用，第一个版本并不完美，loading延迟在2-3秒。
你猜怎么着？
很多人认为这3秒是一个故障。在实际开发中，你可能要面对龟速的网络，没有优化的代码，操作时间长或数据处理太多等问题。因此，App的运行速度可能没有用户预期中的那么快。虽然早期用户可能会给你的产品第二次机会，但绝大多数人会立即退出它。
除非你的产品界面对用户的行为提供了明确的即时反馈。刚才发生了什么？是操作错误还是在等待服务器的请求？用户需要等待多长时间才能正常使用这个工具或网站？用户为什么要等待呢?
让我们一起深入了解Loading动画：
1、loading动画的历史由来
2、优秀loading动画所具备的特征
3、细节可以做出精彩
4、简单处理还是精心制作
loading动画的历史由来
对于这种类型的反馈，设计师会使用进度条、loading示意图、预loading、或旋转器。它们向用户解释什么时间发生了什么或正在loading的过程，以减少用户的心理焦虑。
你觉得设计师是从什么时候开始考虑加上这种反馈的？
我很惊讶的看到关于Nielsen Norman的一篇文章，提到响应时间和loading动画是在1993年（参考1985年的资料）：
如果计算机无法提供快速响应，则应该以百分比的形式向用户提供持续反馈。【Myers 1985 论文，“计算机-人机界面百分比进度指标的重要性”】
显示进度的三个主要优点：向用户保证系统没有崩溃且正在处理他们的问题；告诉用户还需要等待多久时间，让用户能腾出时间来做其他的事而不只是干等；甚至可以向用户提供一些可以阅读和查看的内容，减少等待的焦虑。— Jakob Nielsen, on January 1, 1993
自从Web 1.0以来，几乎每个网站都有loading状态，用户可以注意到当页面内容正在loading时，这些Loading动画活跃的身影。
在2007年的时候，网站的Loading形式大概是下面这张图上的样子：
2007年时的Loading
在那个年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）这样的工具来做这些 loading动画。
到了2010年，随着CSS3的迅猛发展，出现了很多教程教大家如何做CSS3动画，也能找到大量的loading 动画预设包。设计师也可以在Ps cs5中做这种loading动画，这个在10年前是非常流行的。
在那时，Loading动画更像是web的专属问题，因为页面loading确实是一个问题。在2010年的时候，很多Flash网页都做了一些很有创意的loading动画：
30个创意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）
渐渐地，设计师们开始不满足于简单的进度条和旋转Loading，到2014年-2016年的时候，变得更加关注这块的设计。所以，你能发现更多关于loading教程，免费的Loading设计资源，插件和开源项目。
2016年出现的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)
设计趋势和方法已经发生了变化，但向用户提供有效反馈的原则依然需要遵循。
优秀loading动画所具备的特征
在一个完美的世界里，loading动画应该：
尽可能少的显示给用户
如果你的工具或网站工作的足够快，那就是非常完美的。或者至少要使得它们的速度符合用户的预期，显示好看的loading动画只是一个缓兵之计，等待太久了一样会惹恼用户。所以，首先应该是解决内容的loading问题。
给出具体时间
它可以是一条简单的文本信息，告知大致的等待时间，也可以是可视化的图形来表示。总共上传了多少文件？更新需要多少分钟？已经进行到了什么阶段？这些体验上的设计细节都可以给用户预期并减少焦虑。
宇航员数据loadingby Cream M.
告诉用户为什么需要等待
一些应用的loading过程，通常让用户不大容易理解。一个好的Loading动画，应该要告知用户等待的原因以及等待的背后软件正在做什么：
文件获取动画 by Vinoth
让我们说回我的案例，那个反馈工具软件。当我们的等待时间超过1秒时，我们决定给这段等待时间增加一段解释。动画说明应用目前正在处理截图资源，这清晰的表明，我们的工具没有崩溃，它只是正在处理请求：
好的loading动画
让等待的过程不那么让人无聊
可以放一个有趣的动画来吸引人，让用户的眼睛始终保持忙碌。
动画来源：Alex Kunchevsky
减少用户等待时间的心理感知
这与上面提到的一点非常相关，如果你在等待的过程中发现了一些能够吸引用户注意力的东西，那么感觉上时间就会过得更快。它可以是一个引人注目的色彩搭配，有趣的想法，或者是一个什么特别的东西。
蛋糕loading by Pierre Kleinhouse
透传公司品牌形象
如果用户在用你的应用或者网站时会有一段等待时间，为什么不机智的利用好这段时间呢？我不建议仅仅只是为了做loading而做一个loading动画或者去在动画里使用一些心理学技巧。我觉得最好是将品牌的声音融入整个Loading动画中，让它成为一个非常重要的设计细节：
BCG的车票应用动画 by Antonin
细节可以做出精彩
虽然有些人可能会认为Loading只是一个很小的UI细节，但它其实也有许多类型和变化。一般来说，我把loading动画分为几类，进度条，无限循环的loading图和骨架图。
进度条
当可以明确loading时间时使用，进度条可以通过数字或视觉化的形式来表现。
有数字进度的，有时也称为百分比指示符。他们可以简单直接，也可以很有创意，需要对你的用户业务表达更有效：
一个app loading页 by Nguyen Tran
你也可以找到有趣的进度条和循环动画结合的loading图。
Loading动画by Dragonlady
进度条背后的主要思想是显示一个操作将花费多长时间以及目前所处的状态。根据UI需求的不同，进度条也可以是线性的，没有百分比的形式。
想想Gmail，它没有显示进度百分比，但是用户同样可以感觉到加载的进度。下面是两个简单而又创意的例子：
Gamil loading和一个创意loading动画 by Allen Zhang
无限loading动画
当loading的时间是未知的时候来使用，它可以是默认的旋转图，也可以是一些创意动画，显示应用正在做一些事情。
计算loading图标 by Hoang Nguyen
创意性loading动画一样可以与业务紧密相关，并帮助支持品牌发声。请思考下那些应用会使用这种loading动画？
LittlePin Spinner by Daniel Sofinet
无限循环动画要求用户在上传或执行某些操作时等待，但不要求具体需要多久时间，它们可能会非常简单或非常有创意。
Loading cat by domaso. So cute!
Infinity by Eszter Balogh. 看起来非常有趣，但是你并不想他们永远不停下来。
如你所见，如今的loading动画不仅仅只是一个系统状态的UI元素。
骨架动画
骨架动画展示了loading页面的变化过程，你可以把它理解为开始是一些页面占位图，逐步加载上一些可见的图片，文本和其他内容。
这个词最早出现在Luke Wroblewski 的文章中，Luke建议使用骨架动画来获得更好的loading体验。这个想法得到了其他设计师的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用户界面中得到了应用。
举个栗子，如果你使用的是网页设计工具Figma，你会在页面顶部看到一个进度条，同时还在逐步loadingUI：首先你会看到占位符，然后才是可用数据：
Figma UI
简单处理还是精心制作
除了这篇文章中所展示的一些优秀案例和Dribbble上的设计概念，在目前大多数应用中，你可能能看到还是一个默认的Loading。
有一段时间，简单的Loading被大众所推崇，因为他们对于性能的影响最小（尤其是对于web）。使用默认的或开源的loading要容易的多，不需要设计师和开发花心思来设计和实现它。
如果你正在开发MVP或者项目的第一个版本，那么使用简单的或者开源的loading动画更符合逻辑。在这个阶段，即使把loading动画做的再怎么有创意，也并不会对你的产品有多么大的帮助，如果它不能解决真正的需求。
一些简单的loading动画案例
有趣的是，在2016-2019年，我们可以看到非常多精心的loading动画。注重细节，日益成熟的设计公司，更好的科技环境，更方便的设计工具，这些都使得loading动画变得更加富有创造性。如果你浏览Dribbble，能找到非常多超赞的Loading动画，所以这也成了展现自己设计能力的一种方式。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝 http://www.lanlanwork.com
