的App类别是游戏，而健康&健身几乎没有进入前10。2020年虽是艰难的一年，但它提供了很多机会，可以为移动应用市场引入一种新的经济回报和有意义的医疗解决方案，直接影响人们的健康行为、并帮助他们生活得更轻松、更愉悦。
为此，你需要一个功能强大的App，因为如果不能运行的话他就是无用的产品。但是这种强大的功能还需要通过设计来将它呈现出来。一个优秀的医疗App设计将医药类App最重要的细节呈现出来，并引导用户使用，以及建议用户接下来如何操作，最终完成必要操作。
一个App能凭借自身成为一个的客户开发工具和公司的核心产品。对于与健康或医学相关的产品，UI/UX设计更为重要。
呼吸监测应用程序-作者: George Frigo
在这篇对设计师和公司都有帮助的文章中，我们将探讨一些医疗App设计中的最佳实践是如何发挥作用的。
医疗类应用类型
值得注意的是，“医疗保健App”是一个多方面的概念，包含了大量与健康和医学相关的数字产品。
这里有很多类型的医疗类App，包括：
医疗专业人员远程病人会诊的App（远程医疗）
电子病历App(EMR)
记录和管理患者生命体征的App
提醒患者服药、锻炼等的App
医疗计算App
提供医疗信息参考的App
健身和运动类App
健康的生活方式和健康App（每日饮水量、睡眠管理等）
这似乎是一个过于宽泛的主题（例如，将卡路里计数器app与医学教育解决方案相比较），但是也有一些通用设计经验可以使得医疗健康类App更、让人们有办法得到他们想要的。
医疗应用程序作者: Victor Nikitin
如何为医疗健康打造移动应用
即使一个App不是企业的主要产品，它也有可能产生巨大的价值。例如，如果它是一个医疗办公室的配套应用程序，它可以减轻员工的负担，为客户提供信息和服务。如果一个健康App是企业的主要产品，比如健身或冥想应用程序，那就比较危险了。有时候，健康App的缺陷是人们放弃使用这些App的原因。
为了避免这种情况，我们来看看医疗App设计中的一些最佳实践技巧，以及它们如何帮助App聚焦、直观和快速。
医疗保健: Anatoly
调研—成功的第一步
在设计原型应用程序界面之前，你需要知道谁是你的目标用户，以及他们的地理环境、社会经济背景和心理特征，毕竟没有产品可以迎合每个人。用户的兴趣和能力决定了他们如何与软件互动。所以解答以下问题将有所帮助：
谁是你的目标人群？
他们喜欢什么？
怎么样的app他们每天都会使用？
使用目的？
通常，医疗健康软件要么被患者使用，要么被医生使用（如果我们将生活服务类软件的用户也计作患者的话）。这两种用户的需求在功能和UI设计上都有不同。因此，医务人员通常需要快速获得某些数据项：EHR/EMR（电子健康档案/电子病历），药品规格标准，诊断和治疗建议，参考资料等。然而患者需要的是尽可能精简的、易于理解的信息项。因为这一群体中有相当一部分老年人或者有某种特殊障碍。
只有进行了恰当的用户调研，得出了相应的结论，设计师才能继续医疗健康软件的真实有效的设计。
Chahua的健康管理软件
细化明晰每个案例
医学对普通人来讲是复杂的学科，最好的方法反而是将医疗健康设计得相对简单，以安抚用户并让他们保持专注。
“世人总将事物搞复杂，殊不知，简单才是至理。” ——Richard Branson
想要给人留下深刻印象，将医疗UI设计得过于详细是没有意义的，最好的是界面和逻辑易于理解，即使软件是专为医务人员设计的（当然，不要居高临下）。
医疗App/档案和活跃度-作者: Igor savalev
设计医疗健康软件的UI，提供有益的新用户引导流程，使界面可直观理解。否则，用户会对糟糕的体验失望，甚至等不到进入核心功能就会退出。
所有相关方，不管是医生还是患者，都会喜欢清晰极简的软件，这样，你就不需要让用户学习如何操作软件，这对医疗机构来讲是个解决办法，他们已经习惯了这些事。
帮助用户稳定发现功能，循序渐进地给予指导。以用户引导流程开始，将app中每个动作划分成可处理块，一次提供一个操作说明。
使用恰当的颜色（更进一步）
利用被动输入和自动补齐功能限制用户必须输入的信息的数量，调整键盘，动态验证字段值。这篇文章里还有更多表单设计相关。
所有医疗信息都得由拥有一定学历和专业知识的专家提供，否则，这些内容要么不完整，要么包含错误，这在医疗健康中是不容允许的。
医务人员使用的医疗软件-作者: yurig
功能的重要性（及特色）
医疗保健应用程序的特性和功能类型取决于它的用途和目标用户。例如，医疗中心的应用程序需要一个账户，病人可以在那里查看他们的就诊、推荐和预约记录。如果没有安全加密的视频会议和通信功能，远程医疗应用程序就毫无用处。
与其他一般APP不一样的地方，“首页”是医疗类的app的主要功能的位置。先来回答一个问题: 为什么有人使用您的应用程序(或类似的医疗类App) ，如果一个人访问一个应用程序来记录或接收一些信息，联系医生，检查他们的进展等，这个功能都放在“首页”上？
呼应前面的观点，就是避免过多功能同时出现时的混乱。不可否认，这种情况在传统的医疗类App中更为常见，这些应用程序有时候会分散注意力，不断添加新的和新的功能，直到只有资深的用户才能理解并熟练使用。
根据二八定律的法则告诉过你，80%的用户倾向于使用不超过20%的功能。区分优先次序，决定哪些功能对用户最重要。
医药应用App作者: Manoj Dalvadi
导航的研究和鉴赏
清晰的导航结构是医疗应用程序用户界面设计的骨干必需组件。没有它，这个App将会不再受欢迎。导航代表和易用，因此从用户的角度来看是有价值的。一个医疗专业人士需要一个能辅助工具，因为他们已经有太多的时间花在处理EHR（电子健康记录）上了，【类似国内的病历本】。
经斯坦福医学院进行的调查发现，医生花在每个病人身上的时间中，有62%的时间花在EHR（电子健康记录）上。如果设计的导航不够，那么这个App就没有任何使用价值。就算病人目前在使用导航的频率很低，但他们也不会乐意看到混乱的导航而放弃二次使用的机会。
重要的导航信息应放在屏幕上显眼的地方，并根据要求提供详细信息。有一个“三次点击规则”说系统的设计应该使任何信息都可以在三次转换中使用。如果用户在三次点击之后找不到他们想要的东西，他们可能会感到沮丧，放弃他们原本要做的任务。
目前采用标准的应用程序导航有：
-汉堡菜单
-标签栏
-导航抽屉
医疗应用-作者: Alex Samofalov
色彩的运用方法
一般来说，应用程序的颜色选择取决于目标用户和应用程序的主题来决定。
医疗保健应用程序的设计通常是在中性色调与流行的冷色调的蓝色和绿色，白色为背景。在大多数情况下，设计师这样做是为了达到某些效果: 利用舒缓柔和的颜色与医疗保健行业的共同联系，缓解焦虑，增加可信度。所以你很少能看到明亮的红色或黄色在医疗类App的界面。
蓝色为主的医疗类App，作者Adam Sokoowski
然而，考虑到医疗软件的通用性，在颜色的选择方面没有特别的限制。要考虑到的是，应用程序的整体外观应该创造一个积极的印象，而不是引起担忧，恐惧，或其他不良情绪的感觉。
例如，下面这个健身应用程序的深色调的设计看起来很漂亮，也不过时：
深色为主的医疗类App
健康与锻炼应用程序-作者: Saepul Rohman
或者用明亮的颜色来增加一些活力：
移动健身应用-作者: Michal Parulski
追求个性
移动App的个性化设计是近年来最显著的设计趋势之一。某些功能需要适应特定的用户模式。
这样设计的目标是帮助用户更地利用App解决他们的问题。这个系统提示了一个人接下来要指示的操作，否则这些可能会被忽略。要做到这一点，必须识别和分析用户特征，并通过数据跟踪用户的行为变化。就像每个人都有自己不同的身体状态一样，他们也希望自己使用的App能根据他们的身体状态提供相应的差异化体验。即使不是医疗保健行业，也有33% 的客户会因为个性化不足而放弃某款产品。
在医疗App设计中，个性化定制选项有很多: 颜色主题、通知、交互元素、使用 AI 创建个性化推荐等等。
最大化可访问性设计
易访问性设计对于每个App设计都很重要，特别是医疗App。
医疗App的用户通常有不同程度的视力和听力，年龄，身体和心理障碍。医疗App的功能设计需要让不同的用户在使用过程中都有比较好的用户体验。考虑不同用户的局限性，并帮助他们努力克服局限性带来的负面影响非常重要。例如，晕动病患者不太喜欢过多动效。
这并不意味着在医疗App设计中只能有两种颜色，所有的字号都必须非常大，但这确实意味对于医疗App，设计师会面临更多挑战。不过这是一个额外锻炼机会，而不是负担。从WC3的网页内容无障碍指南开始，使用像这样的色盲模拟器。
App无障碍设计的例子: 把主要元素放在拇指区，不要忘记选择改变视图为水平模式，字号需要更大，等等。
色盲模拟器-作者: keithar
积极态度的力量
医学不仅复杂，而且通常让人望而生畏。比较聪明的设计手法是让你的应用看起来和医学毫无关系。这样可以消除人们对医学压力的刻板印象，让用户体验更加愉悦。
比如在用户使用的不同阶段运用积极的文案、有趣的图片、舒缓的颜色或其他元素。医疗App界面设计中的图片和图标需要能够用户调动积极、愉快的情绪，营造一种无痛感和安全感。
冠状病毒APP-作者: Mahdieh Khalili
不要将App设计成网页
在有医疗网站的情况下设计医疗App，老板甚至是设计师可能会将网页页面复制到App当中，这样通常会导致用户放弃使用App。
移动端和网页端的交互存在一定的差异性。手机的物理尺寸比电脑屏幕小。在手机上，我们的任何交互都是通过手指来完成，所以不愿意输入冗长的文案，同时期望产品运行得更快。
在大多数情况下，人们使用网站获取信息，使用App完成工作。此外，App集成了手机的功能，比如加速器和摄像头，使App的设计不同于网页。
健康医疗应用-作者: Grace Saraswati
适得其反
保持吸引力与功能平衡都很重要。医疗保健应用程序必须不能分散用户对其内容的注意力。仔细看看上面的要点，注意好分寸就行。
图形元素、包括动效，应该始终履行他们的使命，即数据输入，并说明微交互的用户与系统，而不是仅仅只为了使一个应用程序看起来很炫酷。
不要过度使用渐变和阴影，只将用户的注意力集中在主要文字信息上。只使用一种字体，你可以通过改变字体的大小和其他特征来改变它，比如斜体、粗体。
多使用简单的配色可以获得更清晰的品牌信息和导航。
健康与活动跟踪互动-作者: Dibbendo Pranto
抄还是不抄？
你可能会在某个时候想，如果觉得抄这个方案有用的话？是不是应该拿一些成功的竞争对手的应用程序复制一份。
其实，照抄其他产品是不明智的行为，因为他们的设计可能很容易就不够好。你最终可能正好抄了竞争对手的错误方案，从而阻碍未来应用程序市场运作。
另一方面，你肯定应该对其他应用程序进行分析，进行竞争对手的研究。一个应用程序应该与用户以前使用其他应用程序的经验相关。如果事实并非如此，而且你添加了太多的原创性，那么使用这个应用程序的用户就会觉得很麻烦，用户也不会容忍“一切都错了”的设计。苹果和谷歌都有人机界面指南和材质设计。
用户把大部分时间花在其他事情上 ——Jacob’s Law
有必要根据你的品牌、服务和产品的具体情况进行设计。好比如一个健身APP与一医疗APP，两者使用方向有很大的差异。所以说必须完全符合目标受众的要求、细节，以及应用程序的主题情况进行针对性设计。
药物提醒程序-作者: Martyna Zielińska
实用性测试
最后，要记住最重要的一点，每个设计师都可以认为这个决定是否合理。他们可能会对应用程序的架构和导航的一致性，深思熟虑的设计，以及最重要的实用价值深信不疑，以至于完全忘记了通过实践进行测试，设计师可以提高他们的同理心水平，更好地感受客户的需求。但事实上，这种陷阱会给应用程序带来很多负面影响。
只有在分析了与用户与应用程序界面交互相关的数据之后，才能得出结论。多进行一些测试将有助于及时地获得反馈，解决应用程序中的所有可出现陷阱一样的场景。
积极的用户参与是成功的关键。在年龄、职业、地理位置、性别、文化和宗教背景等方面，选择尽可能接近目标受众的相关测试对象。越接近越好。让他们执行你的应用程序的主要功能并收集反馈。
病历本App应用-作者: Alex Samofalov
最后
设计不单单是讨论颜色搭配和字体的运用，而是能够带来价值和解决业务问题。健康和医疗类App是一个敏感而富有挑战性的课题，需要特别关注。设计师们一直在努力平衡医疗应用程序极高的安全性和可用性要求与其界面的美学性，经过深思熟虑体验和用户界面设计成就一个很好的医疗类工具，让用户在一个简单和直观的界面的帮助下参与使用。
文章来源：花火圆桌（ID：huahuoyuanzhuo） 作者：Kate Shokurova
蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本篇文章将分享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