作为人类，我们无法总是理性地看到事物的本质。社会心理学告知我们，人类的感知与决策，在一定程度上，会带有偏差。而作为设计师，我们可以主动利用这些偏差，设计更好的产品。
本文介绍了三条曲线，它们都将认知偏差做了可视化的表达，前两个来自日常收集整理，后面一个由笔者总结工作经验得出，下面开始吧。
1984 年，经济学家 Mazur 提出模型：我们的大脑难以处理冗长的信息，因为不确定性随着信息的增加而增加。随着时间推移，我们对收益的感知下降。
决策中，我们倾向于把长期的权重调低：无论是收益还是成本，只要时间够长，我们都倾向认为它不够重要。
举例来看：各大银行如何吸引潜在用户办理信用卡？可以承诺在后期，提供专业的优质服务与购物优惠，也可以信用卡办理完成的当下，让用户领取诸如行李箱、厨具套装之类的礼品。虽然两种方式都有可能吸引来用户，但原本办卡意愿相对低的用户，大部分是被当下的礼品所吸引。换言之，这部分用户是「额外的」。
各大互联网产品都深谙此道，比如购买会员的页面，首月打折/首月免费/一年后付费都是惯用的手法，就在当下，给用户利益，促进转化。
技巧总结：比起稍后的利益，我们更倾向当下给用户一些甜头，哪怕甜头很小。
峰终定律由诺贝尔奖得主 DanielKahneman 提出：人们对于一段体验的评价，取决于这段时间内最好的体验，与结尾的体验。我们的大脑最擅长「以偏概全」，它不会无差别收录所有内容，只会去记录离自己最近、让自己印象最深的点。
宜家是峰终定律最好的践行者。顾客的购物流程中，差强人意的体验不在少数。比如店员很少，难以及时获得帮助，比如购物路线很长，对于有明确购物目的的顾客不太友好，比如永远要排的结账长队等等。
但是宜家把握了它的「峰&终」。「峰」是过程中的小惊喜，比如随时可以坐下体验的沙发躺椅，比如偶尔出现的极便宜的家居用品，比如贴心的铅笔与尺子；「终」就是结账出口外，抚平顾客排队焦躁的冰淇淋与热狗。
而这些产品宜家本可以提高售价，但却没有。因为用一个美味便宜的冰激淋结束购物之旅，糟糕体验被抛到脑后，人们回想起宜家时，会选择性地认为整个流程都非常棒。
游戏产品也非常善于遵循峰终定律让玩家玩得更尽兴。比如疫情之后大热的 Switch 健身环大冒险。
运动时，系统会一直强力夸夸为玩家打气，完成动作都会有及时的鼓励给到，创造一个接一个的体验「峰」值。每一次通过关卡，还会让玩家站直并高抬双手，将健身环举过头顶坚持几秒，画面里的「终」是非常有仪式感的 ending 动作，让玩家成就感满满。
技巧总结：在满足了用户的常规体验之后，用心打造一些带有巧思的设计，安排在流程的中间与结尾处，给用户创造峰值体验。这不仅有可能让普通用户转化转化成忠诚用户，还能极大提高产品满意度还能带来口碑效应。
租房产品中，用户在 APP 内挑选几套心仪的房源，再约房东/经纪人去实地看房，是很典型租房用户场景。我们发起「看房路线」这一功能的设计。使用看房路线，用户能够在选好x套房源后，根据智能规划的看房顺序与路线，辅以时间提示与导航，有条不紊地去实地看房，妥妥贴心功能。
我们大费周章产出了设计方案，上线后的效果，无论是使用频率与使用深度，都不理想。调研后发现，实地看房的场景，其实存在极大的不确定性。用户在看房中途，可能做出决策租赁某一套，也可能被经纪人带领去看别的房源，从而中断原本的计划。
用户是完全自由的，他们会寻求最熟悉、最好用、最稳妥的途径去解决自己的非娱乐性问题。至于导航，用户平时使用什么同类产品呢？高德地图、百度地图这类很成熟的地图类应用。
用户不会因为场景不在专业的地图APP内，就原谅打折扣的导航体验。用户预期远高于实际产品开发程度，这种认知偏差，需要产品人来买单。
总结这个功能的问题出现在哪里？其一，设计缺失，没有将线下流程的旁枝侧节考虑全面；其二，设计过度，但没有成本去满足用户的高阶需求。如何调整用户的预期到合理的区间，我们做设计时的「度」怎样把握，徒劳曲线应运而生。
横轴是设计投入程度，纵轴是用户满意度，随着设计投入程度的加大，用户的满意度呈递增态势，但到了一定程度，满意度会断崖式下跌至谷底，这个阶段的设计投入便是徒劳。当设计投入快到达极限时，满意度又陡然到了一个新的高度。
我们要将自己的设计置于一个合理的区间，并将用户的期望调整同步。当有足够成本支持（无论可观支持抑或主观争取）时，把握机会，为用户创造体验。
技巧总结：要引导用户在使用产品的时候，对功能有合理的预期——如果不能提供完善的服务，就用朴素的设计方案满足用户的基本诉求，而非好高骛远。在用户有更加合理选择的时候，给与用户便利，尊重用户的自由。这样不太功利的思考与设计，很可能带给你的产品带来更快的迭代，与更多的用户。
双曲贴现、峰终定理、徒劳曲线，三条曲线尝试将人们的思维偏差暴露出来，利用得当，事半功倍。希望能带给你一点启发。
文章来源：优设 作者：58UXD
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
满足用户的懒是用户体验的本质，利用用户的懒是探索人性的设计！
用户有多懒？
人有七宗罪，其中就有懒惰，懒是人的天性，是刻在骨子里的基因。
现在互联网产品几乎都是在满足人的懒，买菜不用去超市、饿了可以叫外卖、不想看书读给你听、不想打字有语言功能等等，互联网的发展把人惯得越来越懒，也正因如此，才成就了许许多多的产品。
为用户多想一步，就是思考用户的行为目的是什么，然后在设计上为用户提供快捷的操作方式，这样就能提高产品的使用体验。
设计产品时不能总以自己惯有的思维方式去设计，要能把自己变成当下产品的用户，站在用户的角度去寻找答案解决问题。
我们从更高一个层面去思考这个问题，是哪些人创造了互联网盛世，又是哪些人推动了社会进步，绝对不是懒的学习、懒的改变自己的人，而是那些善于思考想要改变“懒”的人。
文章来源：站酷-吴星辰
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“我们不设计页面，我们设计构成元素的系统。”——Stephen Hay
原子设计理论并不是什么高大上的规则。
随着网页设计的持续发展，我们认识到开发设计系统（design system）的重要性，它最早就是为了让网页设计师更容易理解网页的构成，后来才延伸到UI设计当中。
简单来说，当公司的业务产品逐渐扩大时，我们需要制定一套完整的设计系统，提升设计和开发的协作效率，统一所有设计师的输出物。 开始设计系统的制定时，大部分设计师可能都会先去网上找到大厂现成的设计系统，当拿到他们的成品的时候，会把自己的产品进行拆解和借鉴，这的确能快速解决问题，但是如果不理解其中的组织规则和逻辑，只是借鉴他们现成的设计系统，只能了解个大概，知其然而不知其所以然。因此，原子设计理论的出现就是为了帮助我们去搭建设计系统，这套理论已经逐渐被国外一些大厂应用于创建统一和富有层次的设计系统。
原子是所有事物的基本构成物质。每一个化学元素都具有不同的性质，并且它们一旦被分解就会失去其意义。
分子是由两个或两个以上的原子通过化学键结合在一起的。这些原子的组合具有自己独特的性质，并且相较于原子来说，更具实际意义和可操作性。
有机体是由分子有机地组合在一起的。这些相对复杂的结构可以从单细胞生物一直到像人类这样难以置信的复杂生物体。
宇宙中的物质都可以被分解成为原子元素。
碰巧的是，我们的界面就是由一些基本的元素组成的。Josh Duck的“HTML元素周期表”完美阐述了我们所有的网站、APP、企业内部网、hoobadyboops等等是如何由相同的HTML元素组成的。
△Josh Duck的“HTML元素周期表”
接下来和大家细聊一下什么是原子设计；原子设计到底好在哪里；为什么要有设计系统；以及该如何利用原子理论创建自己的项目组件库。
原子设计（Atomic Design）理念最早是由国外网页设计师Brad Frost提出的，他从化学元素周期表中得到启发，发现原子结合在一起，可以形成分子，进一步形成组织，从科学的角度来讲，在宇宙中的所有事物都是由一组有序的原子组成。
Brad将这个概念应用到界面设计中，仔细观察后我们不难发现，界面其实就是由一些基本的元素组成，文字，颜色和图标等都是一个个原子。
通过原子设计，我们可以把界面看作是一个连贯的整体，同时也是一些元素的集合，每个元素都不尽相同，互相结合产生更多层次和结构，模块之间相互统一。说到底，原子设计其实是一种设计方法论，它由原子、分子、组织、模块和页面共同协作，由此创作出统一和富有层次的设计系统。
简单来说：原子结合在一起，形成分子，进一步结合形成的生物体。原子理论意味着在已知宇宙中的所有事物都可以分解为一组有限的原子元素。
原子设计是一种方法，由五个不同的阶段一起工作，以更慎重和更具层次的方式创建界面设计系统。从而创造出更有效的用户界面系统的一种设计方法。
它的五个不同阶段是：
原子(Atoms)：为页面构成的基本元素，例如标签、输入框、文字、颜色等；
分子(Molecules)：由原子构成的简单UI元素，例如按钮；
组织(Organisms)：相对分子而言，较为复杂的构成物，由原子及分子所组成；
模板(Templates)：以页面为基础的架构，将以上元素进行排版；
页面(Pages)：将实际内容（图片、文章等）放置在特定模板内；
原子设计不是一个线性的过程， 它更像是一个心理模型，来帮助我们把用户界面看作是一个连贯的整体，同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面，让我们更深入的了解每一个阶段哦～
原子
如果原子是物质的基础组成部分，那么我们用户界面的“原子”就是那些构成我们用户界面的基本构件了 。在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线等。
在团队开始新项目时，为了保证各个页面具有统一的设计风格，我们会制定一套简易的视觉规范，在关键的设计元素上，各个设计师达成一致，这样就能很大程度保证不同页面的风格统一，并在这个基础上去探索更有创新意义的设计方案。
在模式库中，原子一目了然地展示了所有的基本样式，当你回来继续开发和维护你的设计系统时，这是一份很有用的设计参考指南。
分子
分子是原子组合建立的元素，两个原子即可组成一个分子。
在界面中，分子就像是一个由UI元素组成的相对简单的组织。例如，搜索框里的文字和图标共同打造一了个搜索表单分子。
以按钮为例，它的组成元素包含了文字、色块、图标和栅格。合并后，这些抽象的原子从毫无关联到又一个共同的目的，图标和文字互相配合传达意义，颜色定义了按钮的特性，栅格为按钮定义了一个尺寸和规范。
将单个元素组装为简单的功能组是我们一直以来构建用户界面的方式，可帮助UI设计人员和开发人员坚持单一职责原则，这种方式简单且复用性高，可以保证界面具有良好的可用性。
以界面设计中的表单为例，表单是一个非常常见的设计元素，一个表单分子是由文字、图标和线条原子组成。这些原子合并后，得到的是一个可以应用在任何信息展示或者功能入口的组合。
组织
组织是由分子或原子或其它有机体组成的相对复杂的UI部分 。这些组织组成了界面的不同部分。
通过结合分子和原子，我们可以构建更复杂和可扩展性的模块，这个称之为组织，其实也可以称之为组件，这些组件组成了界面的不同部分。同样以表单为例，一个表单我们可以通过数量的组合，以及间距的调整，元素的增减，在界面中表达不同的场景和含义。从建立分子到建立更精细的组件，这为设计师和开发人员提供了重要的内容构建思路。
组件在解放设计师生产力方面有着重要的作用，我们可以把界面中常见的组件进行分类整理，如搜索、表单、图片和卡片等，这些常用组件基本能满足日常的设计需求。以Aribnb为例，他们主要分为3类：卡片、表单和内容。每个标签内容的设计形式尽量都保持统一，因此负责不同内容模块的设计师只要选择同一个组件就能完成页面的设计。在短时间内就可以完成页面超多的复杂项目，极大的提升了团队的设计效率。
在网页端最典型的例子就是网站导航，搜索表单，我们几乎访问的每个网站都会看到这些类型的组件。
模板
原子，分子和组织的这种语言有助于我们有意识地构造设计系统的组件。但是，最终我们必须采用一个更适合描述我们最终产出的语言，这样才好汇报给老板、客户和同事，简单来说就是说人话。
模版的本质就是线框图，在这一步我们基本可以看到一个产品的形态。我们可以不断调整组件和分子组合在一起的效果来尝试不同的方案，找到一个相对合适的方案。模版的意义就在于可以专注于页面的内容结构布局，而不是页面的最终内容，此时模版内容是随时可以调整的，尝试不同的方案，在多个模版中进行对比，在这个阶段改动和沟通保证了成本。因此，模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。
模板是页面级别的对象，它将组件放置在布局中，并显示设计的底层内容结构。在设计一个有效的设计系统时，必须在布局的环境中展示组件的外观和功能，以证明这些部件组成了一个功能良好的整体。
模板的另一个重要特征是它们专注于页面的底层内容结构，而不是页面的最终内容。设计系统必须考虑内容的动态性质，因此，把例如标题和文字段落的图像大小和字符长度此类组件的重要属性说清楚是很有帮助的。
页面
页面是模板的具体实例，填充了真实的内容（图片、文字等）后形成页面，也就是常说的「视觉稿」，将占位符替换为有代表性的真是内容，使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的视觉方案。
页面阶段是原子设计中最具体的阶段，由于一些众所周知的原因这个阶段非常重要。别忘了，这可是用户在访问你的界面时会实际看到和交互的内容。
除了演示用户所看到的最终界面之外， 页面对于测试底层设计系统的有效性是必不可少的 。在页面阶段，我们可以看到当将真实内容应用于设计系统时，所有这些模式如何运作。所有的一切看起来都很棒吗？如果答案是否定的，那么我们可以回过头去修改我们的分子、生物体和模板，以更好地满足我们内容的需求。
页面还提供了一个表达模板变量的地方，这对建立强大而可靠的设计系统至关重要。以下是模板变量的几个例子：
用户在其购物车中有一个商品，另一个用户在其购物车中有十个商品。
网页APP的仪表板通常显示最近的活动，但是该部分对于首次使用的用户是禁用的。
一篇文章标题可能是40个字符长，而另一篇文章标题可能是100个字符长
在所有这些例子中，底层的模板是相同的，但用户界面将会随着内容的动态性质而改变。这些变化直接影响了底层分子，有机体和模板的构建方式。因此，创建解释这些变量的页面有助于我们建立更具弹性的设计系统。
这就是原子设计！这五个不同的阶段同时协同工作，以产生有效的用户界面设计系统。
原子是最基础的UI元素，并且是可以用作界面的元素构建块；
分子是用于形成相对简单的UI组件的原子集合；
组织是形成界面各个部分的相对复杂的部件；
模板将组件放置在布局中，并演示设计的底层内容结构；
页面将真实内容应用于模板，设计出视觉稿，并最终成为开发落地的依据；
原子设计为制作设计系统提供了清晰的方法。客户和团队成员通过实际的设计流程与步骤，能更好的去理解设计系统的概念。原子设计使我们能够从抽象的设计中过渡到具体的设计中来，因此我们可以对一个设计系统进行一致性和可伸缩性等类似特性的控制。
通过模块化的设计系统调动组件，可以使我们开发新的产品时，从开始就可以对产品进行严格的把控与一定程度上的控制，进而规避了事后风险。开发之前不确定好系统模块化，毫无逻辑的去开发，开发到一半发现功能与需求对不上等问题逐渐产生，会导致产品的延期、人员成本的浪费、资金成本的增加，产品的迭代率的下降、进而影响市场先机与市场占有率。
原子化设计与原来的样式库设计思路不一样，原子化设计从抽象到具象，从元素到组件，让设计师从底层开始思考，对整个设计会有更清晰的理解。同时也能让设计更加统一，在新增组件的时候更谨慎。
原子设计的原理可以保证任何一个设计组件的构成与开发构建组件一一对应。同时应用原子设计的设计软件（e.g., Sketch, Figma)可以给新设计师足够的自由满足需求变通，并且可以保证同一个设计组件的更新会覆盖到任何一个使用这个组件的设计中。
原子设计为我们提供了一些关键的见解，帮助我们创建更有效、更深思熟虑的UI设计系统。
那么、
如果产品规模小只需要1，2个设计师，大概率是前期不需要大费周章搞一个需要开发配合的设计系统。可以只利用Sketch或者Figma做一个像贴纸一样的设计组件库。但是功能多了怎么办，公司来新人了，当新设计师产出后就会发现与原设计师设计的风格不一样，慢慢发现整体设计风格不统一了，只靠一个简单的组件库很难能满足新功能需求，新功能贴纸上没有设计或者设计需要变通，又或者是新设计师忙着交工忘记检查自己新组件和已有组件的异同。
这时候就会需要一个设计师领头去重新整理设计系统，走查发现同一个正文所用的十几个不同字号，又或者是十几个透明度不同的灰黑色字体，所有组件跟现有上线产品对比整理好后一并交给开发，开发再一一整理代码库。
设计系统（Design Systems）对于很多年轻设计师可能十个新名词，但是设计规范和组件等我们应该还是有一定认知的。在设计的过程中，我们会被其影响。在我们日常所使用的App产品中，如Apple、Google、Airbnb、Uber、滴滴等，他们的产品体验非常流畅，用户使用产品时能够地满足需求，在其良好的体验背后都有着一套强大的设计系统做支撑。
为什么需要设计系统
1、团队协作，体验一致。以滴滴为例，虽然只是一个简单的打车应用，但是其旗下的业务却很多，快出、出租车、顺风车等，每个业务都由不同的团队和设计师负责。可以想象如果没有设计系统，任由各模块设计师自由发挥，风格各异，出来的结果可想而知。而有了设计系统的帮助，就会感觉界面风格非常统一，感觉是出自同一个设计师之手，可见其设计系统的功劳不小。
2、系统的管理多样性。在设计过程中，我们会发现过程中，我们会发现每个业务的形态都是基于不同的场景，因为场景的多样性，在表现上就会催生出不同的样式。如果每个业务都用一种样式表达，久而久之当业务增长过快时，我们现有的设计模式就会难以满足。Airbnb的设计方式就是非常值得参考的一个案例，从最开始是提供民宿，到后来新增的餐馆服务，你会发现房源和餐馆都用了同一套图文信息结构，只是在内容的细节上有一些不同。这样可以降低设计的难度。设计师不用为每个场景思考一个设计模式而烦恼。同时，用户在浏览不同场景的内同时，在相互切换中也不会产生为违和感，一切都是很自然的操作。
3、帮助产品成长，避免一次性设计。互联网产品的成长模式是一种渐进式迭代，在产品初期的主要诉求是快速上线，等到产品上线获取一定的用户，证明它可以活下去时再逐步完善，增加更多的功能。每一次的迭代都是站在我们之前的思考之上，每一次的优化都会让我们的设计更进一步，这是我们期望达到的结果。
以Uber为例，新版本继承了黑色按钮的设计，并和地图进行了结合，地图的配色和旧版本相比也变得生动了，这种改变并不是一蹴而就，而是建立在原有版本之上。
一致性（Consistency）：由于分解界面成单一元素，不论在哪一个页面，UI元素的互动性是相同的，例如颜色变化、字体的排序、以及反馈。不但让使用者体验相同，在视觉上更为和谐。
效率（Efficiency）：由于建立了组件库，一旦要更改某一个元素，可以马上施行、应用。
跨部门的共通语言（Collaboration）：不仅方便设计师思考页面的和谐性，也可以让工程师、测试检验清楚页面的逻辑架构及变化，减少不必要的来回沟通
在此，顺便浅谈下设计系统。
通常，设计系统包含的内容由设计原则、设计语言和组件库，这是一个整体的概念。
设计原则
设计原则是一个产品的核心设计理念，设计的本质就是解决问题，在制定设计原则时要建立在这个中心思想之上。这些问题也许是一个业务形态，例如打车的场景，也许是一个设计形式，如表单。设计形式又很多，我们应该如何选择呢？相对合理的方法就是建立一个规则，所有的问题和形式都想这个规则靠拢，减少不确定性，这就是设计原则的出发点。因此我们可以理解为，设计原则就是一系列的规则，是我们设计过程中要遵循的中心思想。
例如：苹果把审美作为第一要素存在于设计原则中，它的产品往往也是品味的代名词，看看它的设计原则就知道了：
审美的完整性
一致性
直接操作
即使的反馈
隐喻
用户可控
△ 官网：https://developer.apple.com/design/
再来看看Material Design，Google对其定义是一个完整统一的系统，结合了理论、资源和工具的数字体验产品，相比而言它的设计原则就是更加独特，这是它的设计原则：
材料是一种隐喻
大胆/图形/强调/
运动赋予意义
灵活的基础
跨平台
△ 官网：https://material.io/design
由此可以看出，和iOS相比，Material Design的设计原则更加的抽象，因为他拥有一个独特的设计世界观，用还原的方法和物理方法呈现出它的本质，通过抽象的视觉卡片传递出设计的目的和原则。
设计语言
在建立设计原则后，下一步就是制定一套设计语言规范，设计规范是设计系统的表现层，面向的对象是团队设计师和开发者，他能帮助设计师的设计输出保持风格统一。同样也能帮助开发者高度还原设计。非常有利于设计师和开发者的协作。这套规范包含的有：字体、颜色、图标和栅格。
组件化设计
组件化设计主要作用有两点，一是保证多人协作效率，组件化设计可以快速完成一个简单页面的设计，提升设计效率；二是保持产品体验的统一性。同时，组件化设计环节在设计系统中是一个相对重要的工作，需要有一个全局观，要有较强的设计水平和沟通协作能力，这样，组件化的落地才会得到很好的推进。
在多屏时代，我们时时刻刻都在设计产品界面，需适配多系统，其中很重要的一点是如何在多系统之间保持体验一致性，很多人想到的就是规范，要想做一套严谨逻辑好，灵活的设计规范，那么原子设计可以帮助我们来很好的实现它，它在构建设计系统中算是比较科学的一种方法，国外很多设计团队都在使用这样的设计方法。比如以下这几个团队：
1、Airbnb
Airbnb设计副总裁Alex Schleifer在IXDC2017国际体验设计大会上分享了这一创新React Sketch app 管理设计系统， 这是为Airbnb的设计系统而设计的，其实就是个实时更新的代码数据库，可以实时查询sketch数据、代码，也可以下载图标、设计模块，所有工程师、设计师都可以免费下载。
△ 官网：https://airbnb.design/events/when-we-use-systems/
2、Frames
Frames 使用了精致的组件和先进技术，并结合 Sketch 构建了强大的 Web 设计系统，同样能满足修改原子，全局同步更新的功能，支持响应式布局。提供了近百个网页模板，可以非常迅速地完成效果图制作。
△ 官网：http://framesforsketch.com
3、Nested Symbols
这是一套免费的设计系统，它将按钮、输入框、下拉菜单、通知等控件，都制作成了嵌套符号，方便自定义和编辑。
△ 官网：https://www.janlosert.com/
原子设计理论最大的价值，就是为设计体系/组件库的构建提供思路和方法，如果你不满足于市场上现有的设计系统，我们还可以自己创建。因此我们首先要为产品设计出一个独特的视觉语言作为起点。这个视觉语言一定要有力度、易于扩展，必须能在所有地方奏效！
接下来就以 Sketch Library 功能来实现组件库的创建。
第一步：定义颜色（color）
将颜色添加 Main、Text、Status 等一级分类，例如：Color/Status；再添加二级分类，例如：Color/Status/Success 等，命名需使用「 / 」 符号区分层级结构。定义好颜色和命名后，将每个颜色转换成 Symbol，便可统一调用。
第二步：定义字体（font）
根据设计规范，将不同字号的文字样式罗列出来，例如：Title 1、Body、Body2 等，按照「样式名称/颜色/对齐方式」的层级结构，将文字赋予 Text Style，整理出所有的字体样式。
第三步：定义图标（icon）
将图标放置在 24*24px 大小画板内，从定义好的颜色系统中选择合适的 Symbol，这样替换图标颜色时直接选定义好的颜色就可以了。在属性面板中锁定尺寸（size）大小，并把调整尺寸（Resizing） 设为上下左右同时吸附，以确保图标在使用时可以等比缩放。
第四步：加入其他元素（Elements）
根据以上对原子的定义和命名方式，依次完成对其他原子、分子和组织的定义，例如：按钮、表单、空状态等，整个过程都是通过 Symbol 的不断嵌套，最终实现组件库的创建。
第五步：加入组件库
使用快捷键「cmd+, 」打开 Preferences 面板，选择「Libraries」（组件库）标签，点击「Add Library」（添加组件库）按钮添加刚才的 Sketch 文件，完成后就可以从其他的 Sketch 文件中，对此库里的元素进行调用了。
写在最后，原子设计是一套具有科学严谨的创建设计系统的方法论，是一个构建UI系统的心理模型。
原子设计使我们可以将我们的界面UI细分为原子元素，并通过这些元素组合在一起形成最终的界面。
原子作为整个理论最基础的元素，当我们改变其中的原子时，整个体系都会发生变化。原子的设计概念和sketch中的“符号”有异曲同工之妙，当我们改变其中一个元素时，其他所有包含这个元素的页面都会发生变化，可以保证整个系统的一致性和层次感。原子设计为界面元素提供了应用规则和组织原理，这套方法论对于设计系统建立、团队协作、产品迭代都具有非常重要的指导意义。
经常有同学问ios设计规范，安卓设计规范在哪看这类问题，最后，来推荐一些大平台的设计网站，上文出现过的下面就不重复了。我们耳熟能详的优秀设计都是来自于这些世界互联网公司，说真的，审美这东西还真是人家说了算～
反正看看又不要钱，都去康康呗～
Google Design
谷歌设计中心，它非常全面的展示了谷歌的设计工作和概念。包括Material Design在内的所有关于设计、体验、产品等互联网领域的探索。
△ 网址：https://design.google/
Fluent Design
微软基于Windows10的设计语言，包括人机界面布局、控件、样式及资源下载。
△ 网址：https://www.microsoft.com/design/fluent/#/
IBM Design Language
IBM设计语言是伟大设计的代名词，他将人们的需求转化成精心打造的产品。在这里可以学习IBM设计团队一用户为中心设计的新思维方式。
△ 网址：https://www.ibm.com/design/
Facebook Design
脸书设计官网，在国内，我们常常看到脸书的设计文章被翻成中文为中国设计师所学习
△ 网址：https://facebook.design/
Uber Design
作为全球第一家即时打车应用，优步其超前的设计理念和优秀的用户体验成为同类产品竞相模仿的对象。
△ 网址：https://www.uber.deign.com/
Ant Design
蚂蚁金服设计平台是阿里旗下子公司，基于蚂蚁金服生态系统的跨设计与开发的体验解决方案。
△ 网址：https://design.alipay.com/
参考资料
《原子设计》官网
Airbnb 设计规范
Apple 设计规范
Material Design设计规范
Google及其他
文章来源：tob.design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
所谓的“左右横滑”交互英文名叫做“Horizontal Scrolling Lists”，最早可能起源于 Windows Phone 的横向内容滑动设计。用于在同一个页面的 X 轴方向拓展内容空间，“左右横滑”的交互方式被广泛应用于各类 App 中。
横向滑动作为手势交互的一个拓展，目的初衷是提升信息“内容和操作”的拓展性。
1. “内容”拓展性：
移动端的任何类型页面内容都可能无法在一个界面呈现完整，因此滑动去呈现更多的内容，常见的当然是纵向滑动。但它无法承载所有类型内容呈现的问题，这个时候就需要横向滑动来解决。
2. “操作”拓展性：
当一个页面的内容已经是固定完整的，这时候需要用户进行一些行为操作，如常见的下载、删除、添加、管理…,而这些行为如果直接呈现在界面上必然导致混乱，因此需要配合一些横向滑动激发这些行为，从而保证界面的流畅体验。
横向滑动从移动端手势出现到现在十几年的时间已经有了非常典型的使用场景，接下来我们就来列举一下有哪些常见的类型：以下从「清晰度、效果」两个纬度进行分解
解决内容拓展问题
这类场景通常是用户最熟悉的，不论从认知清晰度、效果角度都是不错的，主要原因是场景曝光度非常高、频次非常高；比如Android\ios首页横滑切换app入口每天上百次的操作频次；
解决内容拓展问题
这类切换方式适合内容相对聚焦和单一的产品，比如垂直类电商：wish、唯品会，所有内容仅仅是通过类目来区分的产品；微视：内容统一为小视频…;百度地图：横滑查看更大范围地图…;由于内容的高度统一和整合，因此切换难度低，但在认知的初期会稍有一定的门槛，原因是大部分app都是纵向滑动feeds流，而且用户记忆是海马记忆，不会特别清楚记得app的操作，所以新打开app和新用户会有一个认知过程，但门槛不高。
解决操作拓展问题（管理列表、IM列表、通讯录list…）
解决操作问题
在所有类型中的横滑，只有这种方式不是浏览型手势而是操作型，通常这类功能隐藏在列表中，为了保证列表信息的有效性和美观度，选择隐藏操作功能，由于是低频操作，所以初期需要用户发现并成功使用该功能；不过目前很多list页面都采用这种通用的交互手势，因此用户并不难发现。
最复杂也是最容易出现问题的
解决内容拓展问题
这是最容易出错的一种场景，就是在整个界面中只有一个模块采用横向滑动，而其它内容又是纵向feeds流滑动；由于移动端内容的路径多、入口多，因此用户的核心操作流是：找入口——看信息——做任务；在这个过程中任何一个隐晦的、不常见的交互都很容易被用户忽略，比如说：饿了么品质优选、唯品会二级类目、去哪儿旅游推荐…，这些案例其实是为了横向空间拓展更多的内容而做此选择，但通常情况下隐藏内容点击率会骤降，很少有用户耐心的横滑浏览完成，因此设计师要严格把控数量以及内容的质量；在这里还有一种情况是很严重的，就是模块级的横滑内容与纵向列表之间有叠加交互，就会导致用户反复在2中操作中完成任务，这一点非常不建议使用此手势，当然以下案例并没有这种情况。
1. 几乎能够100%适配到所有设备，保持了一致性
2. 为二级信息提供了展示空间，并且不占用页面空间。
比如在图片画廊里的图片，横向滑动可以让用户预览内容，可以划过或者点击查看。
3. 横向滑动节约了纵向屏幕空间。
而不是将所有内容都展示在一个很长的页面。纵向布局让所有的信息都成小块展示。但是横向滑动更加灵活。现在，内容可以在横向和纵向两个方向同时展示。
4. 横向滑动可以让用户预知分类里的内容，通过往一边滑、向下滑，差不不同类别的内容。
两个维度让用户可以在同一个界面中看到更多的类别和选择。
5. 横向滑动的内容需要保持高质量和持续吸引力才能提升点击转化。
1. 挑选合适的使用场景
单页多维度的信息结构是“左右横滑”最适合的应用场景。传统的 List 适合纵向无限呈现单一属性的内容（比如朋友圈或知乎的回答），而对于 App 首页等多种信息聚合的页面，就适合横向开拓内容维度。
2. 显眼并适宜的主题展示
3. 引导左右滑动（可见性）
4. 控制数量并避免极限情况
5. 低效率和错误的优先级
设计师们都喜欢“左右横滑”的设计，不仅因为信息密度大，页面层次好梳理，更多也是因为操作方式“酷”。但有经验的设计师会尽可能拒绝“左右横滑”，因为它的效率还是太低。而效率低，体现在两个方面：
首先，就像上面说过的，更多的小白用户对左右滑动的预期并不强，还是更加适应纵向滑动的传统交互方式。违反了“Don’t Make Me Think”的基本原则。
其次，纵向和横向优先级常常导致预期错误。以下图 App Store 为例，所谓的内容都是 App，泳道只是用不同的维度把 App 组织起来。
如果你要购买其中一个资源位，你要更高优先级“泳道”中的第二屏位置，还是低优先级“泳道”中的第一屏位置呢？
文章来源：优设 作者：Jingwhale Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本篇文章将分享Web端表单体验优化等相关内容，分析设计师在设计B端类产品时如何让用户愉悦并的填写表单。
表单作为基础通用组件，也是在各个企业级中台中出现频率最高的元素之一。在用户界面中表单无处不在，比如：用户注册登陆页、支付页、用户反馈、共享信息数据录入等不同类型的表单。当我们使用/设计表单页面时看似是按钮、输入框等表单组件进行组合搭配使用，看似简单，但是在实际业务使用中却有着无数可推敲的细节冒出来，常常给设计师造成较多的困扰。
那么在实际工作中哪些内容会给设计造成困扰呢？举几个例子：在实际的业务中很多产品因为业务导向需要入海（非中国区方向），所以就存在表单标签对齐方式问题，如果右对齐可能在中文的情况下表单标签预设宽度正好合适，但是当用户切换到多语言时因为语言差异会导致折行严重等一些列问题，相当影响体验；设计师常常疑惑表单标签是顶部对齐、右对齐还是左对齐，他们的差异点在哪呢？必填与非必填项以什么形式告诉用户会更加合理呢？表单按钮放在页面哪个位置体验会更佳呢？
所以我们不能忽视这些设计细节，往往一些好的设计细节提升总会给用户带来不一样的用户体验。针对以上这些举重若轻的问题我们一一明确、抛出并与大家一起来进行由浅至深的探讨「如何提升表单体验」。
重点概览
一、表单分析
二、体验与优化
三、排列与布局
四、写在最后
表单分析
1.1 表单的重要性
在上面的前言中也提到了表单作为基础通用组件，也是在各个企业级中台中出现频率最高的元素之一。并且在《Web Form Design》一书中 Luke Wroblewsk 也提到了“表单决定了最关键的界面中交互的成败”，当用户使用网站时会有一个特定目标，如果设计得好，网站将实现有效性。效率、用户主观满意度以及特定用户在特定使用环境下所达到的特定目标，也是设计师想要达成的最终目标。表单往往是目标用户和整个产品的一所桥梁。因为，尽管人机交互的发展进步，表单仍然是用户在网络中进行交互的主要方式。所以表单是被认为完成目标的最终，也是最重要的阶段。
我们以淘宝来举个典型的例子，淘宝属于国民电商平台也是亚洲较大的网上交易平台，提供各类优质商品。从平台的特性来讲，它以用户下单并成交作为最终目标。其中支付表单起着一个关键的作用，用户从购买到支付完成以分步形式进行，第一步填写基本信息并提交订单，第二步选择商品并选择支付货款至第三方，第三步买方确认收货并自动打款给商家，第四步完成订单并评价。在填写表单时中间没任何阻断，用户能很顺利的按步骤完成订单。淘宝支付表单属于比较典型的分步表单。
1.2 拆分表单
我们简单提一下表单组成（网上有很多详细的相关文章），一个完整较复杂的表单是由7个基本组成部分，表单类别、表单标签、表单基本组件、占位提示、帮助信息、按钮、校验。表单可以包含以上组成部分，但不是一定都要有，比如：移动端填写验证码时为了减少用户操作，当用户填写完成之后直接提交表单验证。
表单类别：第一时间告诉用户此段落的表单大致内容，减少用户理解并承担着概括内容的作用；
表单组件：包含了输入框、下拉框、日期选择器、时间选择器、开关、上传等十几种类型，是形成表单的核心内容；
表单标签：表单标签承担着对输入项或设置项的解释作用，所以表单标签需要合理设置，核心点是帮助用户快速理解每一项字段的作用；
占位提示：使用通用的认知提示并且以较弱的方式呈现给用户，用户填完信息即消失。注意：占位提示不能替代标签，因为消失的占位提示会拉长用户的短期记忆，如果没有表单标签用户将无法在提交表单前检查他们填写的所有信息。文章下面会详细分析。
帮助信息：当表单标签不足以对输入项准确说明时，这时候需要使用文本提示用户。它不仅能让用户提前感知输入后的样式，还能够有效的告诉用户该如何输入以及表单提交后达到的目的。
按钮：当用户完成信息录入时，按钮能够对表单内容进行校验或提交。
校验：对用户信息录入内容进行校验并给出对应的错误提示。如：内容是否为空、类型格式是否正确、是否符合业务逻辑等等。校验时有两种规则，分别是使用即时校验（失焦即校验）和点击提交按钮以后的最终校验。状态分别为错误、警示、成功。
1.3 表单类型
基础表单
较为简单的一类表单，把所有表单字段平铺在页面中，字段内容较少。当用户输入少量信息即可完成一个简单快速的任务。例如：此类型表单常常用在简单的登录注册中。
分步表单
较为复杂的一类表单，把一个相对复杂的表单字段拆解为多个步骤进行。根据业务属性进行步骤分组利用步骤条告诉用户所完成的流程和进度，当用户每次填写都意味着一次节点完成，整个流程结束给予明确的结果反馈，并以提交成功为最终。分布表单有利于减轻用户由于表单大而复杂的造成的填写负担，并且能减少用户表单填写出错率。
分组表单
将一个复杂表单拆解归类分组。分组表单与分布表单特点较为相似，都可以减轻用户因为表单大而复杂的造成填写的负担，并且能减少用户表单填写出错率
体验与优化
1.1 必填项or可选项
在设计表单时大多数设计师都习惯性的使用星号表示必填字段。但那么问题来了，针对必填项和可选项用那种形式才是最科学的呢？我们简单分析一下。
当表单中的必填信息多于非必填信息时，如果使用红色星号表示必填项，那么大量红色星号导致增加用户的认知负担，使得用户无法快速识别哪些是必须填写的，哪些是不必须填写。并且使用红色星号会带给用户一些恐惧感，它增加了出错的风险并降低了表单填写率。因此在表单设计中，当必填项多于非必填项时，隐藏红色星号标记，通过暗提示标记可选项的形式来帮助用户识别。
红色星号对于不同用户也会存在不同的认知差异。对比较有经验的用户可能表意较为明显，但不代表所有用户都能理解，比如一些非中国区用户使用国际化产品时存在不同认知，因为每个国家本地化差异较大导致认知差异。
还有一点是表单中视觉噪声越少可读性越强，因此当必填项多于非必填用非必填字段提示用户会更好。
1.2 单列布局or多列布局
多列表单字段会导致用户视觉路径变长，因为如果表单中有水平相邻的字段，则用户必须以Z样式进行视线扫描，整体的效率和工作量都更大，使清晰的路径变得模糊并加长用户阅读时间。多列表单可能会存在用户跳过他们实际要输入的必填字段，将数据输入到错误字段中。而最终校验信息时用户得反复检查错误项导致用户放弃填写。
如果表单使用单列，则完成的路径是页面垂直向下的一条直线，单列布局能够给用户呈现一条清晰的视觉路。因此，表单较为简单时尽量避免将表单分成多列，在业务场景允许的情况尽量使用单列（部分业务诉求和一些特定场景要求，多列布局会更节省垂直空间，但是多列布局需要考虑字段之间的关联性，这里不强求一定只能使用单列布局）。
1.3 将复杂的表单分为几个简单的步骤
在设计师设计表单时可能业务场景复杂、字段较多，即使设计师把很多不必要的字段都删除也解决不了根本问题。所以，这时候设计师需要将大型任务分解为一系列较小的任务，使得表单更加的简洁。这种方式的好处是能将步骤以视觉的方式传达给用户数量、名称、说明等信息，更加提高用户满意度并且能激励继续填写。
但是设计师需要注意的是不要太过于细化步骤以及在小型弹出窗出现过多的步骤，过多的步骤不利与用户填写和记忆，反而增加用户负担。
1.4 按钮的位置
按钮放在页面左下角比较好还是放右下角比较好？这是设计师在设计表单时常常纠结的一个问题。其实在14世纪西方活字印刷术的发明人约翰·古腾堡提出一个概念古腾堡法则（Gutenberg Diagram），又称对角线平衡法则。它指出用户在浏览页面或一些布局时，视线往往趋向于从左上角到右下角进行扫描。左上角是第一视觉落点区（主视区），而右下角是最终视觉落点区（终点区）。与之相对，右上角和左下角则是视觉盲点。用户的视觉移动端规则是从上到下，从左到右。
所以，界面中的左上和右下是用户视觉最为重点关注的位置。遵循古腾堡法则，设计师应该把界面的关键元素放在主视区，终点区可以放按钮、强提示，盲点区可以用来放一些相对次要的内容，如辅助图形、文字信息。
同理，表单中会出现组合按钮，比如：取消与确认、提现与充值。根据古腾堡法则，用户使用界面时从第一视觉落点区是主视觉区(Primary Optical Area)，最终停留在结尾的终点区(Terminal Area)。
如下图是一个弹窗类型的表单，如果根据业务诉求确认操作重要程度强于取消操作，那么确认按钮应该放在取消按钮的右边。因为确认按钮放在右侧(终点区) 用户关注度会更强。
1.5 占位提示避免代替表单标签
常规的占位提示作用是使用通用的认知提示并且以较弱的方式呈现给用户，当在字段中填入内容这些提示通常会消失。
设计师常常遇到表单字段较多并且页面空间有限的情况，为了减少横向节省空间设计师常常的做法是将表单标签删除，使用占位提示文本作为信息提示。但是设计师必须有意识知道到这种方式适合使用在较为简单的表单中，比如：表格中点击修改名称操作，弹出气泡并且气泡中只存在一个字段。或者是在用户非常熟知的登录注册等较为简单的表单填写时使用。但是当用户需要填写大量字段信息时不建议使用占位提示代替表单标签的方式。原因有两点：1. 当用户选中文本框填写时，占位内容即消失，这时候用户无法检查并确认其所写的内容是否符合预期。2. 当用户看到文本框中已经回填内容了，误认为占位提示是默认回显内容，造成内容已经填完不需要再操作的错觉。
针对上面问题也不是没有解决方案，在Material Design中有提供针对上面的问题的解决方案，我们这边暂时称其为“浮动标签”，默认情况下输入框内显示占位文本，当用户输入内容以后占位文本浮动到内容上方与内容左对齐。
1.6 校验反馈及时并准确
设计师通常认为用户在填写表单时能够很顺利的完成表单录入，但事实相反。在实际的使用场景中，特别是在一些业务较为复杂的表单中用户极易发生错误，这时候需要需要明确的校验信息、准确的校验时机、输入的限制提示。
错误提示校验
错误校验提示一般存在于错误率较高情况下出现，如：在登录注册时，要求用户填写手机号，如果用户输入的手机号码不符合特定的输入格式，那么这时候需要明确标记错误原因，准确的帮助用户找到问题并解决，避免错误提示描述模糊不清误导用户。错误提示一般会采用“双重视觉强调”来显示错误，除了输入框突出显示外，同时需要在输入框下方加入红色指导文字。如下图所示为西瓜视频登录注册场景下的截图：
限制与格式提示
在表单中如果出现特定格式时务必要提前告知用户。可以在输入框中显示概括回答的方式引导用户，如：请输入日期，eg：mm/dd/yy。这样便于帮助用户提前感知，减少表单填写错误率。
校验时机
为了避免用户在提交时表单时出现大面积的报错问题，设计师可以使用实时校验的交互形式。如：在用户输入完成之后鼠标失焦后进行信息校验，但是需要注意的是在实时校验时避免用户还没有输入完成即出现校验误导用户，所以需要准确判断鼠标是否失焦。如下图所示为西瓜视频登录注册场景下的截图：
1.7 字段长度与输入预期成正比
在实际业务中，设计师常常习惯把每个表单字段都设置成相同的宽度，在视觉效果上看感觉会比较统一，但是这种做法实际上体验欠佳。字段的宽度应该向用户暗示所需输入内容的长度从而减轻判断负担。在Ant Design 4.0 系列分享的文章《整齐划一？不如错落有致》中分析到错落有致的排版表现似乎比整齐划一的左图更舒适，因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体。但左图过度的对齐导致暗示隐性的截断，我们惯性视觉会产生表单字段右侧空间缺了一大块的错觉。
文章总结到“表单宽度的处理方式核心旨在解决两个问题：1. 暗示填写内容长度；2. 表单项布局排列效果，我们通过设置合理的默认宽度尺寸和描述关系，就可以让设计师们跳过部分繁琐磨人的细节思考，快速搭建表单宽度合理且舒适的页面。”如下图所示：
排列与布局
1.1 定宽or自适应？
表单做定宽还是做自适应？哪个“更好”的这个问题时常困恼着我们。其中Button、Radio、CheckBox等本身是定宽组件还好，它根据内容自适应即可，但是当遇到Select、DataPicker、Cascader等类型时就会开始纠结这个问题。在实际的业务中不论是做理想中的定宽还是自适应，很多情况下浏览器窗口大小不一可能导致在一些极限情况下都会产生不尽人意的情况。脑补一下，比如：在笔记本的小屏幕下左对齐并定宽效果还不错，但是当你把页面呈现在较大显示器下，这时候页面右侧又会呈现出大面积的空白。参考AntDesign提供的典型页面以下三种样式是都会造成不同的反面效果。
所以在实际业务场景中如果没有明确自适应和特定自定义宽度的需求时可以通过以下几种方式处理。
将关联性强的字段分组
如果页面横向宽度足够大时，可以将一个区域中字段较多、并具有关联性字段进行分组，这样不仅有利于空间布局上的利用，还可以通过字段之间关联性暗提示帮助用户更好理解。格式塔心理学中有多种分组原则，可以使字段之间具有相关性：接近度，相似度，连续性，闭合性和连通性。将非结构化字段分组为几个机构化的集合提高表单的可用性。
设置字段宽度梯度
可以给字段设置几档宽度梯度的尺寸，我们可以站在AntDesign这个巨人的肩膀汲取一些相关经验，其中4.0系列分享的文章中总结到其经过对十几个业务线梳理，将组件宽度定义了5中高频的空间尺寸，分别是： XS（80~160px）、S （160~280）、M（280~360px）、L （360px~480px）、XL （480~560px）。根据原理，我们可以假设原子宽度XS为100，那么通过尺寸的倍数+间距的方式来计算其他的四种尺寸（间距暂定8px情况下得到：S=208px、M=316px、L=424px、XL=532px），通过此计算方式也是用来解决视觉对齐规则，如下图所示：
1.2 表单标签顶部对齐or右对齐or左对齐
在设计表单时到底是左对齐、右对齐还是顶部对齐呢？这个问题也是在实际业务中设计师发问频率较高的一个棘手问题。其实，不论是哪种方式都有相对的利弊，需要根据实际业务场景提供不同的解决方案。在Matteo Penzo《Label Placement in Forms》文章中有分享过关于表单标签放置的研究，下图是Matteo Penzo研究总结得到的浏览时间表：
表单字段顶部对齐
将表单标签放置在其对应输入字段的正上方，并垂直左对齐排列，用户只需依次向下浏览即可看到标签与输入字段两个元素。其优势是横向屏幕空间足够，能够比较友好的适配多语言适合非中国区业务表单使用。并且根据上面Matteo Penzo的时间表上看，顶部对齐的浏览和填写的效率也是3种常规的对齐方式中较高的一种。不足点是会占用较多的纵向垂直屏幕空间，此外应当注意每组表单标签和输入字段与其他字段组的间距，以免层级区分度不够的问题。
表单字段右对齐
将表单标签放置在其对应的输入字段的左边，标签右对齐。其优点减少了占用屏幕的高度，并且表单标签与输入字段关系较近，所以用户在填写表单时效率较高。不足点是由于表单标签的字数不可控（特别是针对非中国区业务时，多语言切换可能会出现超长的文案，甚至出现折行的情况），可能会造成左侧参差不齐的问题，导致可读性不高用户在查看表单时比较费劲，并且不太适合非中国区业务。
表单字段左对齐
将表单标签放置在其对应的输入字段的左边，标签左对齐。表单标签和输入字段距离较远，用户从左至右浏览时间变长，并且根据上面Matteo Penzo的时间表上看，左对齐的浏览和填写的效率是3种常规的对齐方式中最慢的一种。但是，如果业务需要用户对表单放慢速度并谨慎填写（复杂表单或者表单中含有大量高级设置的陌生数据时），左对齐的方式会减少部分用户的出错率。但不太适合非中国区业务。
1.3 表单布局类型
常规布局（简单）
在实际业务中当表单字段较为简单时可使用，表单字段至上而下单列排列布局，用户只需纵向阅读填写，填写完成率较高。
多列布局（较复杂）
垂直空间有限并且表单含有较多填写字段的复杂表单时，可将具有相关联字段放在一个卡片区域中进行归类，将多个字段组合在一行，形成多列排布的暗提示帮助用户更好理解。
区域分组布局（复杂）
表单含有较多填写字段的复杂表单，可将具有相关联字段进行分类并以标题区分的形式进行字段分组，并且表单字段都在一个卡片区域内。
卡片分组布局（高复杂）
卡片分组布局一般用来处理高复杂类型表单。当业务中希望页面承载众多表单字段时，可将信息相关性弱的字段拆分为多个部分，并通过多个卡片分组承载不同类型字段，每个卡片都需有个卡片类别标题。
写在最后
本篇文章从分析表单在产品中为何如此的重要，总结了在日常工作中设计师常常遇到的表单类型和布局，设计师可通过文章中的建议和案例进而合理的选择并灵活应用。以及在实际的业务应用场景中设计师如何规避和注意一些设计细节进而提升表单的体验。文章通过一些案例进行分析，希望大家能够通过此篇文章更多的是受到启发（而不是限制），能够在日常工作中灵活应用并举一反三。这里需要强调的是作为产品设计师不论是表单设计还是全局的页面设计，都需要有理解业务本质的能力和全局的业务思考能力，不然常常会被称之为“喂，那个画图的设计”。
文章来源：tob.design