如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
为什么要构建 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在设计的时候，各种视觉要素以有序的方式排列，设计师需要通过对各部分空间的精妙设置来实现这一点。通常而言，我们的目光总会被最引人注目的部分吸引——无论它是视觉主体还是负空间。视觉主体和负空间，两者都很重要，尤其当你需要平和地呈现一个和谐、连贯、天衣无缝的设计。那么在一个网页设计作品中，设计师到底利用空间传达出怎样的一个故事呢？这就牵涉到我们今天要聊的主题了，格式塔原理。人类的大脑天生就能把规律性的散点连接起来，并对目之所及的事物赋予意义。设计是一个创造性的领域，是形式和空间的相互融合，并随之创造各种各样的体验。无论我们接触到什么样的设计作品，我们的大脑都会本能地将作品解构为更简单的各个组件，这些组件由基本的形状和不同的形态组成，而这些形状和形态则与空间息息相关。过往丰富的体验与经历，使得我们的脑海中充满了各种各样的记忆，于是我们很容易就能识别出这些特定的设计形式。
正空间，或者说显著的设计主体，构成了设计的「肉体」，它是你看到形状、颜色、图案等部分。相反，负空间多数情况下是指背景或大量留白。
文森特·梵高（Vincent Van Gogh）的这幅广受欢迎的作品，是一个以正负空间之间有着强对比的经典设计案例。
就像正空间似乎支配着负空间一样，两者都被用来平衡地传达一个和谐、连贯的设计理念。
在平衡的构图中，设计的正负空间都是相互配合、相互补充的，形成一个无缝、美观的整体。相反，不平衡的构图会让观众感到不适，传达出一个不完整的、扭曲的故事。
网页设计的好坏很大程度上取决于它的实用性和可用性。如果你的设计技巧很差，那么网页设计的整体效果和表现都会受到影响。但从另一个角度来看，在「内容为王」的时代，如果空间布局使用不当，内容将对您的网站产生显著的负面影响。
如果你认为你的开发技能很棒，但你的设计技能可能需要更多的改进，那这篇文章对你就太合适了。在本文中，我们将讨论：
我们还将讨论一些真实的网页设计实例，探讨每个案例如何体现格式塔原理，以及它对空间的创造性使用。
话不多说，一起开始学习吧。
空间由两个主要维度组成：正空间和负空间。正空间是可被直接感知到的视觉元素，负空间则为元素以外的留白和间隙。如前所述，正的是物体，负的是物体后面可以通常被忽略的留白区域。一个是焦点，另一个是背景。在前者产生活动和刺激时，后者则保持静止和模糊。一个是月亮，另一个是环绕着它的暗夜。
在网页设计中，正负空间相互作用，共同形成构图，传达理念。只有当正负空间通过对比来区分，同时又向更大的区域延伸时，才会产生视觉层次（脑补一下阴阳太极图吧）。
正负空间的交汇之处就是信息的交汇点。负空间拱卫着正空间元素，让后者更加突出和显著。
通常而言，正空间在绝大多数时候起主导作用，实际上负空间同样重要。负空间的优点在于:
设计中的负空间相反并不是负面的。当正负空间比例平衡得当时，两者在视觉上会显得非常舒适。而当其中一个占据主导地位，并给人一种「过于拥挤」或「空洞无物」的印象时，混乱才会发生。在这两种情况下，受众都无法处理如此复杂的信息，因此，而这样的空间设计是不符合网页设计的基本原则和设计动机的。
这是一个网页模板，它展现了何为「内容错位」和「空间混乱」:
△ 布局混乱
△ 空间失衡
△ 适当的布局调整
△ 网页设计中空间的合理运用
有意思的是，当谈到空间的概念和布局出现时，质疑声也随之而起。
类似的问题只能在理解基本概念后再来作答。黄金经验法则告诉我们——简单是最好的策略。
在文章开头，我曾提到在设计网页的时候，尽量创建简单的用户界面，这是一举两得的举措，既可以造福你自己，也可以惠及用户。或从表面上看，网页设计的重点在于增加网站的视觉吸引力，使用户操作更为简便。
我们的大脑总是在扮演侦探的角色，试图寻找隐藏的线索和空间之间缺失的联系。因此它会将当前的视觉信息与之前的经验进行比对。为了成为一名的网页设计师，你必须先了解大脑是如何感知周围环境的。它可以帮助你选择特定的视觉元素，利用它们来影响观众的感知。
伟大的设计师明白心理学在视觉感知中所扮演的强大角色。当某人的目光与你的设计作品相遇时会发生什么？他们对你的文章所传达的信息有何反应？——劳拉·布什，Autodesk 品牌内容策略师
作为设计师，你必须清楚地了解视觉设计和心理学是如何相互联系、相互影响的。换句话说，开发以用户为中心的简单界面，借助正负空间进行设计主要依靠格式塔原理，它可以帮助你理解和控制视觉和心理的联系。
格式塔在德语中是「形式」的意思。它更多的是一个概念而不是一个单纯的词汇，它最基本的概念是：
整体大于各个部分的总和。——库尔特·考夫卡（美籍德裔心理学家，格式塔心理学的代表人物之一）
当单个部分的集合以某种方式统一时，它们在我们的感知当中就是一组。我们把元素看作一个整体，这一概念或理论基本适用于所有的设计媒介：我们不把文本、颜色和形状看作单独的元素，而是把整个网页看作一个整体。同样的道理也适用于森林：我们看到的不仅仅是一堆树，就像我们在看海洋时看不到水滴一样。
格式塔原则描述了当特定的条件出现时，人类大脑是如何感知视觉成分的。它帮助大脑创造视觉图像。因此，格式塔原理通常会应到下面六个主要类别：
1. 图像和背景
「图形」是直观地、明显地与背景分离的物体。
目前最经典的例子是圣杯——两个镜面对称轮廓构成了花瓶。当你第一次看到这张照片的时候，你的眼睛会立即被吸引到画面上看起来最聚焦的视觉主体上，可能是相互对立的面孔，也可能是花瓶。当你的大脑在调整你的焦点时，背景或花瓶被模糊了，在那一刻，你的大脑直觉地在图像中感知到背景。
过了一会儿，你会注意到背景中的花瓶，并意识到它本来就在那里。尽管图形和基本原则看起来模棱两可，设计师常常创造视觉上吸引人的超现实和虚幻艺术，并将之运用于网页设计。
有时，图形与背景之间的关系是稳定的，而这种稳固的视觉关系使得两者之间，产生区别。这种关系有的时候又是不稳定的，这意味着图形和背景是无法清晰区分的。由于这种关系的模糊性，用户会很自然地开始困惑。
为了让大家直观地感受到图形和背景之间的关系，让我们详细的拿几个案例来进行讨论。这些例子都集中在图形-背景关系中的三个主要方面：对比度、Box 区块和阴影。这三方面涉及到诸多属性，包括颜色、尺寸和信息量，它们关系到内容的区分和视觉的纵深。
在下面的第一个例子中，Trellis 使用了一个全屏大图背景，并且搭配上清晰的 CTA 元素，图形-背景关系明确，该关系清楚地展示出了细节、色彩和尺寸上的差异。
页面中的文字是位于中央的手写风格字体，与背景中的图像相比显得很突出。和灰色背景图片构成对比的白色文本是吸引用户注意力的焦点，这使得文本在画面中是高度可见的。从另一个角度来看，背景图片是模糊的，所以清晰的文本会非常醒目。这些都表明，这里的文本被优先考虑为图形或正空间，而模糊的图像被用作背景或负空间，从而强烈地暗示了图形和背景之间的关系。
下一个案例是下图方框里的内容。 Ocean Health Index 巧妙地利用了框内区域的内容将图片与背景分离开来。这是你在浏览他们的网站时看到的：
当你第一次浏览这个页面时，哪个部分会吸引你的注意力？你会发现，它的主要文本为白色和蓝色背景构成对比，而更加醒目的是是两个与文字对比鲜明的 Box 区块。前者借助了深色背景和文本色彩上的差异，构造对比度。而 Box 区块本身的色彩和背景色构成对比的同时，还和更靠前的文本构成色彩对比。
背景使用了微妙的色调，使数字得以鲜明地展现，并突出细节。方框的运用使它们在页面上清晰可见。
一些网站还通过添加阴影来表现物与背景的关系，产生一种图象被置于背景之上的感觉。以下截图来自于 serious unsweet.com：
Seriously Unsweetened 的着陆页使用了不止一种方法来保持图形与背景的平衡关系。明亮颜色和阴影的配合；背景是纯粹的白色，使得前景元素更容易从中出来。背景之上的元素都是「正空间」，图中的物体呈现在背景的映衬下，有一种被置于「顶部」的错觉。而阴影并没有直接用在图片和文本上，而是应用在图片的内部，这让我们注意到在主要图像内部还有另一层视觉元素，这意味着里面还有一层图片-背景关系——这是一个非常智慧的设计。
2. 接近性原理
接近性是指页面中元素之间的接近程度。网页中的不同元素可以组合在一起，不同的接近程度会带来不同的关联属性。除了视觉特征上的接近性之外，这些元素与其他页面元素之间的距离接近度也会自动地在观众的脑海中产生关联感。
从图像到文本、导航栏到网页表单，这种接近性原则在网页设计中适用范围非常广。将类似的内容组合在一起时，它将在元素之间创建关联，为观者提供更好的视觉体验。
以下是 Mashable 网站导航显示的运用接近度的案例：
在上方的截图中，我们可以清楚地看到如何将相同类别的元素放在一起，以显示它们与主菜单的关系。由于颜色和文本大小的选择，使观者的目光自动被吸引到主标题下的子栏目上。
除了导航栏外，基于网格的内容也符合黄金比例的接近性。亚马逊的产品列表就是最好的例子：
这个案例体现的是接近性还是相似性还有待讨论。如你所见，具备视觉接近性的同类产品使用狭窄的留白进行分组和分隔。这种接近性会指示用户在类似的产品列表中，对其目标产品基于购买偏好进行排序。此外，封闭性原则也在类似项目的清单中发挥了作用。
现在，我们来仔细看看 Basecamp 的网页表单设计，它在网页设计中显示了另一种接近性的理想情况：
可以看到上图中的表单是被划分为两个主要部分的：个人信息和 ID 生成两个部分。第一部分被暗示为最重要的字段，第二部分则是一个次要的需求。这两个部分的标题都因颜色和字体大小的不同而产生区别。在这个网页表单中，接近度是一个重要指标，它将网页中呈现的信息按优先级排列。
3. 对称和秩序
对称是指两个元素呈现出镜像关系。它可以被看作是把一个物体一分为二的平衡。真实的对称图形包括等边三角形、圆形和正方形等几何图像。
人类的大脑会本能地渴望在面孔中找寻「平衡」和「对称」，这在美学上是令人愉悦的。大脑也倾向于在其他物体中找到对称，因为对称创造和谐，让观者在观看图像时感到舒适。
下面是 HvD Fonts 在网页设计中体现对称性的一个很好的案例：
这个页面不仅显示了典型的图形-背景关系，而且强调了对称性原则的运用。页面被分成四等份，字体大小和颜色相似。四个部分中的每个部分的背景都具有相同的主题色和灰度效果。你也可以注意到负空间不一定是白色的，黑色甚至其他的颜色也可以以图像作为背景。
对称性原则还可以衍生出了另一个概念：在网页设计中，不对称会使观感不佳，必须谨慎使用。许多网站使用不对称作为平衡间距的元素——非常规的正空间元素与中性的背景相互平衡，反之亦然。而 Xplode 的营销理念是不对称，Xplode 以独特的美观悦目的方式引发不对称。
这个网页利用视觉错觉和不对称，抓住了观者的眼球。作为正空间的物体被放置在一个不对称的布局之下，在负空间中创造了强烈的视觉吸引力。色彩是两个空间和谐的主要因素，并为观者创造了一种自然的联系。左边的图形也有很强的平衡性，而右边的则是带来更强的视觉吸引力。你觉得这个设计如何呢？
4. 相似性原理
相似性与接近性原理密切相关的原因，是相似分组对象之间共享属性的质量。无论是颜色、形状、形态、大小、方向或任何其他属性，当这些属性中的一个或多个在邻近对象中共享时，相似性将占上风。
即使正空间的元素看起来没有明显的联系，由于相似性原理，它们也会与负空间元素区分开。
看看这些 UrbanDecay 的商品列表：
虽然上面的商品各不相同，但在位置、色彩、产品布局、表现方式等方面却有一定的相似性。唯一不同的是左上角的眼影广告，在同类产品中独树一帜。这显然是一种营销策略，目的是在不损害页面整体对称和美观的情况下吸引注意力。这里要考虑的另一点是，尺寸上的相似性使其他图像与相似的产品类别区分开来。
除了产品展示之外，正空间可以与相似度结合使用，也可以与负空间结合使用。
让我们来看看 influenster 的着陆页：
上面例子中对齐的边框也运用了相似性原理。虽然每个正空间元素是不同的，但是相似的感觉是通过整个页面中一致的文本字段来传达的。风格、布局和主题都是相似的，因此带来了统一的视觉效果。
5. 封闭性原理
你是否曾经遇到过这样一幅画面，看上去是闭合的，但实际上是开放的？这是由于它采用封闭性原理。我们的大脑倾向于「脑补」不完整物体的空白，并利用我们的视觉感知来使图形完整化。
正空间和负空间一起构成一个整体。最好的案例就是负空间中隐藏的形状和形式，这要求对正空间中要传达的信息进行评估。在封闭空间创造性地使用着正负空间，可以产生有趣但简单的设计。
下面是 Magu Kambucha 的设计图：
在这个案例中，可以看到封闭性和图形-背景关系的平衡。瓶子和后面的粗体文字构成对比，背景则是和两者都构成对比的柔粉色。封闭性体现在哪里？看到瓶子后面的文字了吗？虽然你不能完全看到它，但仍然知道它是「Kambucha」。除了第一个「K」和最后一个「A」，其他字母都是半隐藏的，这些字母都是凭观者的直觉自动完成的，整个形式开始成形，意义也随之成形。
下面是 Cult 的截图：
即使文本没有写得很清楚，我们的头脑可以很容易地读到 CULT 这个词。即使单词不完整，文本的排列和对齐也可以使其易于辨认。
6. 连续性原理
最后，根据一般格式塔原则，连续性遵循模式，即引导实现遵循一致的路径，建立从一个对象到另一个对象的线性模式。
在上面的图片中，尽管圆形色块的颜色变淡了，但是观者更倾向于将中间的间隙其看作一条直线。这使我们相信连续性的原理比色彩的力量更能引导用户的视觉感知。当我们借助负空间在视觉元素中画出路径，我们的眼睛倾向于优先感知正负空间之间的界限。
脑补出来的这条连续的线条是我们在设计中更应该引入的视觉线索。
让我们来看看 Crypton Trading 网站中的视觉线索设计：
看到页面右半部分设计的完美延续了吗？不管背景的明暗色调如何变化，图案在页面上的变化都非常显著。当你向下滚动时，你会看到图案和颜色是如何以连续和无缝的运动变化的。在这里，色调的变化是可以忽略的，我们所看到的是一个连续的线和点的模式。
另一个很好的例子是 OscilloScope 网站：
该网站借用连续性法则，将网站用户引入到工作室的 360 度视角中，他们可以在导航中选择所需的子栏目。
影片《Cargo》的着陆页也使用了连续性法则：滚动式的导航，以线性运动的方式让文本漂浮在网站上。由于 LOGO 是垂直展现的，所以用户必须向下滚动才能看到它的全貌。当页面向下滚动时，静态 LOGO 开始与并行的文本块一起浮动。导航引导用户经历不同层次的体验，而不会干扰隐藏在下面的内容。
由于我们的眼睛通常遵循最平滑的路径，设计师可以使用这样的方式来创建引导路径。
在这篇文章中，我们讨论了格式塔原则与网站 UI 的正负空间之间的关系。通过一些真实的案例，让大家清楚地知道如何运用简单有效的方法来改变设计的观感。关键是使用这些原理来设计的时候，可以达到 1 + 1 > 2 的效果。
人类是根据感知来思考的——主要是基于视觉。根据格式塔原理，我们倾向于看到更大的整体性图景，而不是第一眼看到的某一单个元素。
正负空间帮助我们区分、回忆、感知并识别理解。在格式塔原理的引导下，我们能够更好地在网页设计中利用不同元素来创造吸引人的作品。因为空间对于任何设计师来说都是一件复杂的事情，所以最好的方法就是保持格式塔原则的完整性。只有这样才能真正认识到空间在设计中的重要性、有效性，继而使自己成为网页设计领域的佼佼者。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
作为交互设计师，天天画的就是交互稿了。而对于很多新手交互设计师以及想转行做交互的同学们来说，一定都非常想知道大厂的交互设计师画出来的交互稿具体是什么样子的。但和视觉稿不同，交互稿里面体现了太多产品本身的逻辑，难免涉及到一些敏感内容，所以具体的交互稿不太适合直接分享，这就是比较尴尬的问题了。
不过，这不妨碍我为你们做一份交互稿模板。一来我自己也在用，二来可以帮助大家，何乐而不为。
但我必须重点强调一句话：框架是死的，人是活的，不一定要拘泥于某种形式，你可以根据自己的需要自由修改。
第一个是 PPT 型的分页交互稿，这个样式最早是从腾讯 CDC 团队流传下来的，我在第二家公司的时候就从他们的博客中看到过，当时还用 InDesign 做过一个模板。而我现在所在的团队用的也是这个，因此我过来后就自己重新用 Sketch 做了一版，方便以后使用。
1. 封面
封面很简单，就是文档标题和作者，顶部有一个通用的文档标题栏，上面的内容包括：
我在 Sketch 中为这个模板中需要改动的内容都定义了 Symbol，比如这个标题栏，你只要选中之后，就可以在右边的属性面板中自定义里面的内容。
2. 修订记录
修订记录这页，记录了从文档建立开始，每次更新的主要内容，以及相关人员，方便后期交接的时候给对应的产品经理、游戏策划和设计师查看。有时候交互稿更新一次只是修改一小处地方，如果不备注对方就会很难找到，可能以后你自己都会遗忘。
这一块我也定义了 Symbol 元件，你可以直接复制一行，然后修改里面的内容，「更新内容」的文本支持多行输入。
3. 目录
这种分页型的文档一定要有目录，备注好每个模块对应的页码，否则十几页看下来都晕了，每次想找到对应的界面还得重新翻一遍。
4. 内容页面
具体的内容页面才是交互稿的核心，一般会用小气泡和箭头进行标注，然后在右侧用对应的数字和它们对应，写下详细的交互说明。
结构可以有很多种，比如上面这种竖屏的界面可以是左右结构，如果是横屏界面还可以是上下结构等等，根据情况自由调整。文字段落的样式我已经定义好了，直接修改套用就行。
其中最重要的气泡我也做了元件，选中之后直接在右边修改数字即可。
5. 导出方式
使用这套模板做好交互稿后，使用 Sketch 的 File -> Export Artboards to PDF 即可将交互稿导出成 PDF 文档。我很喜欢这个格式，与 PPT 相比，PDF 在任何平台都可以通用，包括手机、Mac，不用特地装什么软件都能很好地打开。
另一种是更常见的交互稿形式，这也是我这几年进腾讯后一直使用的格式。
如果你曾经用过上文介绍的 PPT 型模板，你一定会发现：它的好处是 PDF 分页格式非常整齐，比较适合一次性做一个大产品的交互功能介绍，而不适合小功能的频繁修改。
今天介绍的这第二种，则是更加轻便快捷的类型。
这种长图型的交互稿，优点很明显：
来看一张基本样例：
它的结构分为：
交互稿标题、日期
按照项目、模块和功能的方式命名（如：电脑管家 V12 -清理垃圾-深度清理图标化改版），可以地规范交互稿名称，让其他人很容易理解交互稿涉及的是什么内容。
相关负责人
对应的产品经理，交互稿的作者，方便评审时或者交接后找人。
需求背景
简单介绍为什么要做这次设计，出发点是什么，遇到了什么问题。
主要界面
这次设计中，涉及到的所有主要界面，先陈列出来方便大家快速评审和讨论，视觉接手后可以根据这些来进行风格设计。
流程说明
有了主要界面后，我们还可能需要对一些操作流程进行说明，比如怎样发送一条语音消息，怎样删除一条会话等等。
异常状态
最后还要记得检查一下，每个界面在没有内容时的空状态、断网时的异常状态，弹出各种通知的位置等等，千万不要等到开发同学找你的时候才想起来。
上面所说的，就是一份交互稿的常见内容模块了。
该模板是专门给 Mac 平台的 Sketch 用的。
下载后（下载方式见文末），打开你会看到这个界面：
里面的每个模块我都做了 Symbol 元件，你只要选中就可以在右侧更改内容了。
比如下面的文档基本信息：
我还把可能会用到的各种字体大小、颜色、对齐方式都做成了文字样式：
选中文字后，在右侧下拉框中选择你要的样式就好。
交互稿用的都是黑白灰，还有蓝色作为标注。
我一直用的这几种，足够用。
是不是很心动？别着急，先把这个 Sketch 文件保存成 Template（模板）。
然后，你就可以在新建文件时，选择从模板处新建，直接用这个模板开始画稿。
下载链接：https://pan.baidu.com/s/1Jrv7-JDyf2j2SDvvg0-wrA
提取码：npq2
备用链接：https://pan.baidu.com/s/1yIMSWw7pJuHF4H3BgoyrPA
作者：WingST（寇敬），男，33岁，腾讯高级交互设计师、腾讯学院认证讲师，9 年工作经验的资深互联网人，曾任 MIG 桌面安全产品部轩辕设计组组长，目前在腾讯游戏 NEXT Studios 工作室负责《乐高无限》创造型沙盒游戏的用户体验设计。
负责过的产品有腾讯电脑管家 V11.0、加速小火箭 V2.0、腾讯手游助手、腾讯网游助手等。曾在 OPPO 手机、金蝶软件等企业工作，有着 PC、Web、移动端等多平台的丰富设计经验。
感谢大家的阅读，末尾做个小广告，我的新书《交互思维：详解交互设计师技能树》马上就要上市了，这是我自己九年多来做交互设计师的经验总结，也是市面上第一本详细介绍交互设计师所应该掌握的职业技能的书，适合所有希望了解交互、学习交互的设计师和产品经理。同时书中也有我进腾讯的成长故事，以及一些个人工作和学习方法的分享，绝对物超所值 → https://item.jd.com/12576242.html
这是我所总结的「交互设计师技能树」。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
今天分享一款运维相关的B端产品，主要阐述自身的设计思路及产品的优化过程。B端产品功能聚焦、讲究效能，对产品链路有着高流畅度与率的诉求。设计师在做B端产品的的时候要有全链路和小白用户视角，以体验及效率为先，我们需要协调全局一致性，遵循产品链路，在视觉上减少对于用户的负担和干扰，避免打断用户的使用流程，确保流畅、优质的用户体验。
在产品优化上，我们在每个版本迭代后，会对用户进行访谈及收集意见反馈，建议设计师可以制定一套自有的用户调研方式去了解用户的想法和自己产品的不足之处，这样的好处是可以让用户帮助你优化产品。
在产品的细节上我们可以深度地去挖掘和尝试更好更优的设计方式，对设计师来说打磨和优化每一个细节正是B端产品的魅力所在。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
互联网让全世界都无线互联，大家可以无视距离随时浏览世界另外一头的设计师所上传的设计作品。无论是 Dribbble、Behance、Pinterest 还是国内的各大社交媒体，想浏览别人作品获取灵感，几乎是0成本的事情。那么这样做对于做设计、激发灵感进行创造，真的有好处吗？它所引发的抄袭的问题，其实是最现实可见的，对此，昨天所发布的文章《如何界定借鉴和抄袭？看这7位设计大咖怎么说！》里，7位来自世界各地的设计师，已经对此发表了看法，而今天的文章里，99U 邀请了三位顶尖的创意人，阐述他们如何看待这种设计师中的「时代病」。不断上网浏览别人的作品这种「灵感时代病」对于做设计激发创意而言，到底有哪些利弊？在的设计辩论中，Nadine Kolodziey、Thomas Kronbichler 和 Polina Joffe 对无休止的灵感素材的视觉进行了权衡分析。
过于关注在线设计灵感类素材，会让设计思路趋于千篇一律，扼杀创意。这就是为什么我们必须明智地管理我们的个人信息流。——插画师 Nadine Kolodziey
我们每时每刻都在上网，这意味着我们将会不断地接触到各种各样的视觉刺激。
如果你总是在公交车上或休息时关注别人的设计作品，那么你就会不自觉地把它融入到自己的作品中。很快你就会意识到：「糟了，我刚刚做了一些看起来和其他人完全一样的东西。」你会发现，你在不断地复制和重复别人的东西，尽管可能一开始是下意识的，但最终你会成为潮流的一部分。你忽略了你个人独特的视角，别人的作品开始影响你的判断和直觉。
而属于你自己的那部分最独特的东西，才是最有力道的。
我完全理解为什么人们想成为潮流的一部分。客户可能想要一些入时的东西——在特定的圈子里以特定的方式行事，这样做是有所帮助的。但最终这种做法所带来的同质化，对双方的发展都会有所制约。插画师在他们的作品中没有个性，所有的客户都在购买类似的风格——这意味着他们的品牌缺乏独特性。
如果你想获得灵感，看其他的创意作品并不是最好的选择。
看看其他的设计作品固然重要，这可以让你紧跟行业发展步伐，但是要适度。如果你想获得灵感，看其他的创意作品并不是最好的选择。当我在网上关注其他插画家的作品时，我个人很难受到启发。我已经使用 Instagram 两年半了。起初我总是看其他插画家的作品，这是我的本职工作，我热爱插画。但后来我发现，这阻碍了我的创作潜力。
我开始注意到我的配色方案与其他人的相似。我注意到，看其他的作品降低了自己尝试新事物所需的勇气。当我看到另一位插画家的作品时，我不可能洞悉他的创作潜力。当我在模仿他人的时候，我不可能有属于自己的独特创造力。
但是这个问题并非是无解的。解决之道就在于有选择地关注。看同事的作品和看一般的图片是有区别的。我对线上的灵感素材很感兴趣，但是我更多地将这些素材视作为一个个「小贴士」，因此我注重于管理我的社交媒体所关注的账号。我不再关注 Instagram 上的其他插画家，而是关注那些在审美上吸引人的内容。例如，我将关注那些收集不同寻常的石头的人，或者为摆放得精美的和风食物拍照的人。
我特别喜欢「I’m Google」这个账号，它不是按主题而是按视觉来排列图片。当我看到这样的图片时，尤其是当我开始着手准备新项目的时候，它们会立即在我的脑海中激发出新的概念和全新的思路。这些资源成为我的灵感来源：当我滚动鼠标时，我将看到来自外太空的岩石图像，它的形状将启发我如何安排构图。
线上灵感素材固然可以鼓励国际交流和对话，但问题出现在这些图像在传播的时候脱离了相关语境。——Thomas Kronbichler Mut工作室的创始人 创意总监
在 Mut 工作室，我们是当之无愧的互联网拥簇，我们从不害怕灵感素材过载这种问题。我们是阿尔卑斯山脉中部一个叫做海蒂·兰德小镇上的一个小工作室，互联网不仅为我们提供了来自世界各地令人叹服的灵感，而且提供了一个展示自己作品的平台，这在10年前是不可想象的。
正是因为图片可以在网上广泛地传播，我们才能让欧洲和美国的用户看到我们的作品。由于有了在线订阅和社交媒体，平面设计社区现才有了如今繁荣的模样。当然，这也有负面影响，很多人说如今平面设计在审美上变得太相似了。但积极的一面是，现在有更多的平面设计作品涌现出来。任何地方的人都可以进入这个行业而不再受到地域的限制，平面设计行业变得更具包容性。例如，欧洲各地的小镇上都会有人在尝试更疯狂的创作，我们能透过网络在不同的地方跟进观察，支持彼此。丰富的网络灵感图片的流通，最终有利于平面设计作为一种艺术形式而广泛存在。
我并不是受到某张特定的图片启发，而是在听设计师讲述设计思路的过程中获益良多。
问题是对此互联网并没有过多关注。一些博客和自媒体上并没有关于图片来源的解释。为朋友设计的项目和为大公司做的项目都在同一个空间中流通，这很有趣，但同时也弱化了应有的差异化和环境。
作品背后的故事，以及设计过程中各种问题的解决过程，才是真正重要的内容。我并不会受到某张特定图片的启发，而是在听设计师讲述设计思路的过程中获益良多。了解设计师的独特理念，则更有可能启发我，我对设计师处理客户关系的部分也很感兴趣。当然，这一切是不能用一张简单的图像来进行概括的。
我已经不再浏览 Tumblr 和 Pinterest，因为我最感兴趣的点，是了解一个问题是如何解决的。最终，我在设计师会议上发言的视频实录中获得了最多的灵感。听设计师们讲述作品诞生的过程是最令人振奋的。我从一个人如何构建一个项目，以及如何实现它的过程中学到了很多。我喜欢听他们谈论客户关系，讲述他们遇到的困难以及如何克服它们。确切地说，更能鼓舞人心的是设计态度和思维方式。
在阿尔卑斯山的工作室中足不出户，我就可以看 Michael 所有的视频。
例如，就在上周，我狂看了所有 Michael Bierut 在线演讲的视频。我喜欢他展示作品的方式，喜欢他大方地和别人分享成果，我钦佩的是他的工作态度。在阿尔卑斯山的工作室中足不出户，我就可以看遍迈克尔所有的演讲视频，这简直太棒了。
对正在发生的事情有所知觉是非常重要的，而上网获取灵感会简化这个过程。——Polina Joffe，艺术总监和平面设计师
如果你知道别人在做什么，你可以选择参与其中，也可以选择拒绝。而形成自己的观点并做出明智决策的前提是你足够了解。
我一直在关注其他人在网上会做什么，我也会在博客和社交媒体上上传一些实用的干货。当涉及到具体的项目时，我会做具体的项目研究。我们会从互联网上获得大量的灵感，这使得研究阶段变得非常简单和。我经常会想起设计师们以前在社交媒体上使用过的概念和想法，然后我会把这些想法和我自己的想法进行重新转化，组合并且更新，这样它们就可以运用在我的设计大纲中了。
浏览在线灵感素材，然后它们会形成属于我自己的一个巨大的视觉词典，里面有我脑海中所有的概念和方法，每当我开始一项新的任务时，我都可以沉浸其中。
我们经常谈论来自内心的创造力，但我不确信我是否真的要相信这一点。万物皆有源头。
我最近为泰特伦敦美术馆的教育团队做了一个项目。这个项目是针对年轻人的。首先，如果你的目标受众是年轻人，了解年轻人都在做什么是很重要的事情了，因为这些信息很有参考价值。你需要运用观众能够理解的视觉语言。在项目的研究阶段，我看了其他设计师是如何处理和学习这些属于年轻人的理念的。最初我想用笔记本和活页夹做点什么。然后我想起了我在网上看到的那些用活页夹或记事本纸做的项目，然后我回去重新又看了一遍，看了其他人如何处理类似的主题，由此激发了我的新想法。
我们经常谈论来自内心的创造力，但我不确信我是否真的要相信这一点。万物皆有源头。我认为创造力通常是学习前人如何混搭各种想法，然后自己进行特定的调整组合，二次创造。
诚然，视觉交流的发展是一部复制、更新、转移的历史。但重复别人已经做了太多遍的东西，并使用类似的元素来直接窃取它们是有危险的。当你在做研究获取灵感时，你必须通过多种方式参考海量的资源。如果我们能妥善地使用现有的大量图像，就能鼓励创新，跟上时代发展的步伐。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
质感是什么？如何让画面拥有更高端的质感？本文由质感的原理出发，深入分析质感表现所需要的要素，并通过实例来讲解如何在作品中表现高端质感。很多同学在设计完成后，总是会发现页面很单薄，导致整体看起来很粗糙、不耐看。究其原因，大多数是因为页面缺乏质感。
质感，对于设计作品来说，是一个非常重要的视觉元素。它能够提升作品的层次，让整个作品更高端、更有品质。
质感，基本释义为所表现的物体呈现出的物质真实感和细腻的品质感。这是一种视觉的综合感受，会触动你的某种本能的综合感官，让你感觉非常舒服、非常爽。
我找了几张比较富有质感的图片，大家可以感受一下这种感觉。
观察完这些图片后，你发现有什么共同点了吗？我们可以试着来分析一下。
首先，物体本身的型是好看舒服的，并且细节足够精致。
其次，在光的影响下，物体的表面呈现出细腻的光泽变化，以及通透而舒服的阴影，展现了丰富的层级关系。正是光的作用，让这些视觉元素得以表达，让我们没有触摸便能感知到这种质感。
我们再来看一些优秀的拟物作品。大家对照一下，是否都遵循相同的要素。
观察这些优秀的拟物作品，为什么会觉得有质感呢？首先图标很精致，它的形具有一定的美感。但是这不足以让它富有质感，关键是它也符合了上面所说的几个质感要素。
最后，我们可以总结一下，质感产生的要素：
所以除了作品本身足够精美以外，整个作品的光感需要和谐统一。每个元素表现的色彩变化规律（渐变色）、投影大小和投影间的相互影响，都需要与光感严谨的统一。
这就要求你在绘制所有元素时，需要去假定一个统一的光源，这样才能让物体拥有更真实的质感。
我们已经了解了质感产生的原理，下面就开始实际案例。每一个步骤我都会讲解思考的过程和原因，方便大家理解。
1. 整体背景和主体框架绘制
建立画布（1200 x 900）。用矩形工具绘制背景和主体框架（1100 x 700），图层样式为渐变叠加，光线方向统一。
渐变是为了模拟背景的质感和在光线下的变化，两层光线方向需要统一。背景颜色稍浅且饱和度低，符合远近的视觉规律。
2. 绘制投影和主体背景
复制矩形作为投影层，颜色调整为黑色，转为智能对象后，加入高斯模糊效果。调整矩形图层的模糊度和透明度，移到适当位置。具体参数对照图中。投影的位置根据假定光源位置而定，使其符合视觉原理（详见光线分析图）。
绘制主体深色背景（1070 x 670），添加渐变叠加模式，渐变方向与前面保持一致。渐变的颜色对于质感非常重要，恰当且高级的渐变色，能够在本质上提升画面质感。而渐变方向则需要根据假定光源进行判定。
为什么要这么绘制渐变与投影的位置呢？我绘制了一张光线分析图，大家可以从图中看出假定光源的位置，以此来确定渐变的方向以及投影的位置。
只有整体光感的统一，整个画面才能表现出强烈的质感。大家在绘制这一步时，需要用心体会假定光感的这个过程。
3. 将人物融入背景，提升发丝层次和质感
放入人物图片，图层模式改为正片叠底。调整图层透明度，添加蒙版使人物下半部分渐隐，与背景融合。
复制人物层，取消图层模式和透明度。用选择颜色命令提取发丝高光，添加蒙版抹去不需要的高光，图层模式改为变亮模式，调整透明度使其融合进人物。
为什么要做这一步呢？单纯的人物在画面中显得太平了，所以需要丰富细节、增加层次。
4. 主体字体和投影绘制
输入主体文字，图层模式调整为渐变叠加，根据光源调整颜色渐变。案例中的英文字体为「Monotype Corsiva Regular」。这一步需要反复的尝试，大家可以换一些字体尝试一下。
复制一层作为投影，文本颜色改为黑色，图层样式设置为正片叠底，转智能对象后模糊对象，调整图层的透明度和大小，放在字体后面。字体的立体感依靠的仍然是统一的光源，需要想象字体在假定光源下的阴影关系。
投影能够模拟真实感，需要若有若无的感觉，让文字悬浮在图层上面，丰富画面层次。
5. 主体文字细节刻画
根据字体的结构，用形状工具绘制出字体的立体关系。每一个形状图层绘制后需要两层蒙版，一层为了限制字体范围，一层为渐变蒙版。让充满立体感的文字悬浮于画面中央，提升视觉中心的细节品质。
6. 穿插细文与投影绘制
输入细文，并复制一层作为阴影。不过因为字体较小，距离拉远后投影肯定是看不清细节的，所以已经模糊的若有若无，但还是需要有的。
表现文字穿插关系，让「is an」悬浮于「L」上，并留下近距离投影。让「attitude」穿过「e」字，遮挡部分文字。丰富的穿插和相互投影，进一步增加主体文字的细节和层次，让画面细节丰富且更加耐看。
7. 绘制辅助图形，增强画面流动感
为了丰富画面细节，增强画面流动感，可以适当加一些飘零的辅助元素。
绘制时需要注意的是，你需要明确整体视觉中心与运动的方向。辅助图形沿着整体画面，水平中心向右运动，你可以想象图形散开后的画面，并反复调整元素的合理位置。
如果没有一定的规律，所有图形就不像一个整体，就会看起来很乱。大家可以根据这点来判断辅助元素是否需要进一步调整。
8. 收尾工作，大功告成
最后，根据页面需要，搭配上合适的元素，让画面更完整。
需要注意的一个细节是，由于所处的位置不同，这些元素在光照中呈现的颜色也会出现深浅变化，所以左边的元素较浅，而右边的元素会深一些。
怎么样，是不是看起来并不难？
希望大家可以抽空认真地跟着教程去尝试一遍。只要你能够理解每个步骤的目的，耐心地绘制每一个细节，相信你也能够做出这种非常高端的质感。
如果你能在制作时，用心思考和体会整个过程。就能在以后的作品中举一反三，让这个技能成为你自己的技能了。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
筛选是资源聚合类APP中不可缺少的功能，可帮用户快速、精准地找到需要内容信息，根据资源分类形式的不同有多种筛选类型，并且不同的筛选类型还可以进行自由组合，让复杂的内容信息更容易被筛选出来。
1. 横向tab式筛选
2. 标签筛选
3. 下拉筛选
4. 底部筛选
5. 抽屉式筛选
这是最常见的筛选样式，属于一级筛选。通常出现在导航栏或者是导航栏目的下方，根据分类层级的多少有4种展现形式。
一个层级
分类2~5个：所有类目都可以直接在tab栏目上展示出来，用户可快速地在各个分类之间进行切换；
分类大于5个：所有类目以相同的间距进行横向排布，引入横滑操作，方便用户浏览被隐藏的分类信息；有些产品也会在栏目右侧增加下拉操作，点击后下拉展示所有的分类，用户可对所有分类进行直观的浏览；
两个层级分类
Tab 栏目上只展示推荐分类或者用户自己选择的分类
当内容分类有两个层级且分类比较多的时候，产品会根据用户的喜好推荐几种分类在tab上进行展示；右侧有筛选操作，点击后在一个页面里展示所有的分类。用户可以在这个页面自主选择增减展示在tab上的分类，并且可以调整展示的顺序。
交互细节
用户在不同的类目间进行切换的时候，筛选内容在当前页面刷新展示；
不同的tab分类可以通过横滑进行切换；
位于内容信息的上方，对下方的列表内容进行控制；
当触发筛选条件时，筛选栏目直接定位到导航栏下方。
是一种辅助筛选样式，通常位于某一分类标题下方，或者跟tab筛选和下拉筛选搭配使用，有4种表现形式
① 内容分类标签，充当内容入口。产品设定的内容分类，分类层级较高，且内容之间无交集，当触发操作的时候，会跳转页面进行内容展示。
② 大分类下的子筛选条件，分类层级比较低，当用户触发操作时，内容在当前页面进行展示。
③ 筛选页面，多维度的筛选条件以列表的形式进行排布，标签是单一维度下的多种分类，可横滑操作，这种方式可以帮助用户快速进行多维度的内容筛选。筛选的结果直接展示在筛选条件下方，最常出现在视频类APP内做电影、电视筛选；马蜂窝游记中也使用了这种分类形式。
通常是在一个大的分类下做具体选择的时候使用，这种筛选样式可以承载1~3级分类层级。
单一层级
分类以列表的形式展示在页面中，当分类字段少且分类较多的时候也可以排2~3列进行展示。
两个层级
有三种排布方式
①直接以栏目标题加列表内容的形式排列。适用于两个层级分类都较少，或需要用户进行操作（比较输入框、滑块）的场景使用。
②左侧为一级分类信息展示区，右侧为二级分类信息展示区，可以通过左侧的一级分类控制右侧的二级分类。适用于两个层级分类都比较多的情况使用。
③上面为tab式的一级分类，下面是二级分类内容的展示。适用于一级分类较少，二级分类较多的场景使用。
三个层级
一级分类为tab形式展示在最上面，二三级为左右排布形式。
交互细节
放在内容信息的上面，对下方内容进行控制；
当触发筛选条件时，筛选栏目直接定位在导航栏下方；
有2~3种信息层级的筛选，结果通常取得是不同信息之间的交集，所以需要在筛选中向用户展示筛选结果数量，帮助用户判断是否调整筛选条件 ；如图左
我们也可以选择在筛选结果页展示筛选标签，用户可以在当前页面删除部分标签，以查看更多的内容信息；如下图
备注：下拉筛选通常是多维度组合在一个栏目上展示，通常应用在电商、外卖等内容分类层级比较多，且层级内的分类也比较多的场景里
某一具体内容需要通过多个筛选维度辅助筛选时使用，比如XX-XX的火车票展示列表、马蜂窝的地图酒店筛选。这种筛选通常能承载1~2级的筛选层级，每种层级下的分类目都不能过多，是一种比较简单轻便的筛选过程
单一筛选层级
① 与下拉筛选筛选一样都是以列表的形式展示在筛选内容
两个筛选层级
① 直接以栏目标题加列表内容的形式排列。
② 左侧为一级分类信息展示区，右侧为二级分类信息展示区
交互细节
处于页面的底部导航栏的位置
当用户出发操作的时候，内容从下往上弹出展示。
电商平台应用较多的分类形式，通常是有两个分类层级，一、二级的分类类目都比较多，默认情况下，如果分类特别多时可以只展示第一层级信息，用展开收起辅助用户浏览二级类目信息。
交互细节
因为筛选的分类比较多，且通过展开收起会将已选择的内容遮挡上，所以我们需要以一种方式将已筛选的条件展示出来，方便用户及时调整。eg.马蜂窝将所有用户选择的内容都放置在最前面，而京东选择在栏目上方展示出来。
显示有多少个符合筛选条件的内容，帮助用户决策筛选条件是否合理。
本文主要讲述了5种内容筛选种类：tab筛选、标签筛选、下拉筛选、底部筛选和抽屉式筛选，选择何种筛选类型跟内容分类层级和分类数量相关，所以设计之前要先了解产品的分类及数量，有助于选择更适合用户使用的筛选样式。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
程峰，滴滴出行高级设计总监，具备互联网和广告行业工作双重经验，同时拥有用户体验思维跟创意思维的他，对互联网设计和创意设计都有着自己的独到见解。
如今互联网设计圈，方法论大行其道，很多设计师为了走捷径过分依赖方法论，但他一直保持着初心，不骄不躁，他认为：方法可以被总结创造，但设计功夫与思维是更可贵的东西，功夫+思维>方法论。
本次访谈，程峰分享了自己的观点，包括设计师如何融合创意和用户体验，在遭遇灵感枯竭的时候如何理性的找灵感等干货内容。不仅如此，他还偷偷告诉湖湖他在招聘设计人才时最看重的特质。
△ 程峰，滴滴出行高级设计总监
滴滴出行高级设计总监；曾就职于搜狐、百度、Ogilvyone、Cheil鹏泰等知名互联网公司及 Digital Agency；资深创意人、设计师，获奖众多，对创意、设计有深入的了解。
蓝湖：
介绍一下你自己，另外，可以跟大家详细讲讲您的工作成长经历吗？
程峰：
Hello，大家好，我是程峰。
我毕业后的第一份工作在是一家正版音乐公司担任 GUI设计师，当时正版音乐行业的市场土壤还没有形成，所以公司没能发展下去，一年后，公司成为了行业「先烈」，我也只能选择离开，那是我第一次接触 UI设计。
在05年的时候，产品用户体验设计在国内开始萌芽，我出于对这个行业的喜欢和好奇，加入搜狐从事体验设计的工作，07年的时候，加入百度做交互/UI，在这个阶段，体验设计思维方式深深扎根在我的脑海。
后来，因为当时国内的用户体验设计还不够成熟，同时出于对广告视觉表达有极大的兴趣，在互联网用户体验行业呆了几年之后，我投身广告行业，将本土、4A Digital、媒介型公司都体验了一把，我在这个阶段形成了创意思维思考方式。
体验设计思维跟创意思维，对我来说都有非常大的价值，可以让我更灵活面对不同的任务。这两种思维方式的区别在于：一个是解决产品体验问题；一个是解决沟通问题。我认为现在的设计师/创意者需要同时具备这两种思维。
几年之后，我又回到了互联网，来到了滴滴。
总体上我的经历跟大部分设计师朋友一样，其中不同的可能是我接触过的领域比较多，在音乐、游戏、搜索引擎、交通、广告等行业都有过职业经历，我个人也比较喜欢跨界。
蓝湖：
您同时拥有互联网公司（甲方）及广告公司（乙方）的工作背景，甲乙方最大的区别是什么？这种经历对您在工作中分析、解决问题会有什么帮助和优势？关于这种交叉背景带来的优势，您可否深入和我们分享一下？
程峰：
设计师在一般的互联网公司工作跟乙方公司工作相比还是有区别的。
在乙方，由于接触到的行业领域比较多，所以适合产出跨领域的通用方法论，思考方式更加横向，更重视规律，从而能够解决不同行业的共性化、模块化问题，但也有可能因信息不够及时对等，跟进不够持续，可能导致对问题的理解片面，无法深入。
而在互联网公司，设计是服务于单一企业产品和业务的，比较单一，但更专注，会对具体行业的具体问题理解更加深入，具备持续性，更重视对变化的即时响应，但同时也容易陷入视角局限，导致脱离规律，无法全局思考。
对我个人来说，甲乙方的双重经历使我更加灵活，看待问题具备了更多视角，更容易保持客观，可以快速切入找到符合规律的问题本质，同时还可以深入并持续性地解决。
蓝湖：
创意&设计是服务于品牌和产品的，您是否可以举一个实例来详细讲讲，好的创意&设计是如何服务于产品和品牌的？
程峰：
以滴滴为例，首先，滴滴CDX 很重视不同专业之间的打通与整合，聚沙成塔、汇点成线，这对于创意&设计产生好的效果尤为重要。
2017年，我们曾经在 CDX 内部构建了一个需求关联池，把产品、品牌、运营三块设计需求主动整合，并关联思考，跨专业团队协作，输出了司机端App 5.0升级+司机故事+司机教育等相关项目设计，提升了司机师傅们对平台的认同感，最终达成了1+1+1>3的效果。
设计师要具备敏锐的全局观和主动性，任何一个体系组织都不可能做到彻底扁平化，信息只要在流通，多少会出现一定程度的不对等和信息失真，各职能都不可能对所有信息细节彻底掌握到位，大多数时候需要主动接触，主动思考，以建立项目间的共性联系，而不是坐等被告知，不能过度理想主义。
△ 滴滴「司机故事」创意设计
△ 滴滴「司机故事」创意设计
△ 滴滴「司机端」5.0配色标准
△ 滴滴「司机端」5.0启动页面
△ 滴滴「司机端」5.0导航设计
△ 滴滴「司机端」测试环节
蓝湖：
创意和用户体验是设计师必须思考深入的两个点，要更好地融合创意和用户体验，设计师应该怎么做？举一个例子？
程峰：
这两种思维方式虽然一个偏产品，一个偏传播，但最终都会回归到一个点上，也就是以用户为中心，站在用户的角度思考，基于这个点衍生出来，站在产品层面叫做痛点，站在创意层面叫做洞察。
举个通俗的例子：一个人早上很难起床，需要借助外力才能被叫醒，这是痛点；一个人早上很难起床，但如果第二天早上有重要的事情要赶飞机，他按时起床的可能性就会变大，这是洞察。
再举个例子：小朋友容易把衣服弄脏，妈妈洗起来很累。用某品牌洗衣液，针对小朋友衣服常见污渍进行洗涤，省时省力，这是基于用户妈妈的痛点想出的产品解决方案。小朋友容易把衣服弄脏，但妈妈总是会在第一时间，像变魔术般把干净如初的衣服放在他的床边，这是基于妈妈勤劳，母爱的洞察表达。
痛点与洞察交融在一起，可以使设计师在思考的时候更周全，在进行产品体验设计思考的时候更具备情感引导性，在进行创意思考的时候不至于忽略功能性。
蓝湖：
设计类工作需要创造力的支撑，您是否可以跟我们分享一下，如何科学、系统地提高自己的创造力？
程峰：
不得不说，创造力很大程度上是天生的，可以理解为直觉。但洞察力是创造力的前提，是创造力被激发的基础，洞察力是可以被后天锻炼的。我个人并没有总结过科学系统的方法，但我相信一话：「观察和经验和谐地应用到生活上就是智慧。」
如果一定要说方法的话，就是把自我提升需求转换为习惯，养成针对性定期阅读并定期总结的习惯。这里的关键词是：定期、针对性。说得再直白点，就是多看多想并持续下去，任何事情的通用诀窍都是持之以恒。
提到这点，想多说几句，近几年看到了太多设计师过度重视方法，期望通过方法论找到解决问题的捷径，我认为这是浮躁的。对于创意&设计，我个人并不否定方法论的价值，但设计本质上还是功夫活，思维的跨越也是从量变到质变积累的过程。在这个阶段，我更想跟大家说的是：功夫+思维>方法论。
尤其是希望很多年轻设计师，多下点苦功，多思考，不要把希望都寄托在方法论上。方法可以被总结创造，但设计功夫与思维是更可贵的东西，是设计师真正的能力壁垒。
蓝湖：
在滴滴拥有众多产品，设计师持续提出服务于产品和品牌的好创意和设计似乎并不容易，在设计师们遇到瓶颈时，您会给他们什么建议？在灵感枯竭的情况下，您有什么快速找灵感的好方法吗？
程峰：
滴滴虽然产品众多，但好在都是在解决出行问题，所以很多产品之间是具备共性的。
作为设计师，不该局限于自己的产品，应该横向多看，找到不同产品之间的关联，多加以借鉴，找到可持续的复用性的解决方案，这是避免陷入到困境的好办法。
在灵感枯竭的瓶颈期，设计师应该明确一点：任何灵感都来源于对事物、信息的重新组合，当把不同的元素组合应用在不同场景中的时候，会有意想不到的收获。
脑洞是不能随意大开的，我认为，找灵感、开脑洞需要两个前提：第一是持续关注，日常积累，只有一定量的持续积累才能让大脑里的数据库足够大，才能确保可以在需要的时候，第一时间任意调取信息并进行重组。第二是逻辑性的结构化思考，可以确保将信息进行有条理、有效、有价值的组合。
蓝湖：
面试的时候，您会比较关注候选人的哪些特质？是否具备优秀的创造力，可以通过面试得出结论吗？您有什么能在短暂的面试时间内找到更适合的人选的秘诀吗？
程峰：
坦白讲，我认为在面试的有限时间空间环境下，很难做到全方位的考察，我个人也无法做到，这也是为什么会有多次面试的原因。
但是关于面试设计师，我还是有一些心得的。首先，设计师的专业能力是根本，除此之外，最重要的是心理成熟度的考察。就设计师的发展来看，很多时候遇到的问题都不是技术问题，大多是心理问题。创造力也同样重要，虽然个人是否具备创造力可以在沟通中发现一些，但最好的办法还是设置笔试题来考察。
除此之外，恒心、雄心、好奇心，分别体现了一个人达成目标的能力，自我提升的可能性，以及对专业探索的热情，优秀的设计师，这三个特质缺一不可。
蓝湖：
在提拔设计人员成为设计管理者时，您会重点考察候选人的哪些方面？
程峰：
如果将设计团队比喻成一支球队的话，我对团队内设计管理者的要求是从明星球员变成主教练。
最简单的考察标准：
蓝湖：
滴滴CDX 内部是如何分工协作的？设计有时会是一个比较主观的，容易出现分歧的工作内容，如果团队内部的意见出现分歧，您是如何做决策的？
程峰：
CDX 专业分为两侧：体验设计+创意设计。既解决产品的体验设计问题，同时也关注业务运营效率及品牌创意设计问题。
我想目前的分工是阶段性的，未来的趋势应该是设计师职能更加融合，最终合并成只有「设计」这个职能。
在面对专业分歧的时候，最的解决办法依然是沟通。事实上大部分的分歧都是因为目标不一致导致的，所以在遇到分歧时，要保持让产品、品牌更好的端正、开放的心态，就会被更有道理的观点说服。
△ 滴滴「CDX」部门成员合照
蓝湖：
您作为设计管理者，对于提升产品设计效率，有什么经验分享给大家吗？
程峰：
首先，推进设计师成为更「复合」型的人才，设计细分专业之间的融合，能够降低理解成本。
其次，要继续推进产品组件化的建设和组件使用率。
最后，针对性使用设计工具，比如使用蓝湖完成自动标注和切图，通过工具规范标准化流程，避免无效沟通和重复劳动。
这些都是提升设计效率的办法。
蓝湖：
对于相对年轻的设计师，您有怎样的职业发展建议？
程峰：
保持初心，永远记得你为什么踏上设计这一行，并且时刻具备长远规划。
坚信设计的价值，任何职能都不可能解决全世界的问题，专注设计能解决的领域，设计自然更有价值。
保持思考，不仅是对专业的思考，更是对业务的思考，甚至生活和世界的思考。
我也是这样要求自己的，希望对各位也有帮助。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
