组件设计这个流程，你真的了解吗？

在交互和原型设计的工作中，组件绝对是常用的一种方式，可以显着提高工作效率。 在这篇文章中，笔者从两个案例出发，为我们分析了组件设计的流程，相信对大家的工作会有很大的帮助。

组件是设计师常用的、基础的知识点。 随着软件设计和开发越来越成熟，它们已经扩展到很多类型。 能否正确合理地使用它们也是衡量交互设计水平的一个标准。

文章中理论知识比较少，所以我想说点比较实际的，以解大家的疑惑。 因此，我不会过多阐述基本控件/组件类型的基础知识。 理论与实践相辅相成。 你可以去优秀的平台学习和吸收理论知识，但实践需要更多的思考。

1. 区分控件和组件

控件可以理解为平台系统定义的某种形式。 严格来说，控件的专业名称是“原生控件”，但大家习惯于随便说“控件”，这样就更简单了。

组件的字面意思是组装。 从技术层面来说，代码需要封装。 封装在一起就可以组成组件，并且可以自定义内容、名称等。

与组件相比，本机控件具有更细的粒度。 一个组件可以包含多个控件，单个控件也可以作为一个组件。 可以用一个简单的例子来说明它们的关系。 对照就像是药材，处方可以理解为成分。 如果还是看不懂，可以用更具体的案例来说明；

下图是用户登录过程中的一个交互组件。 该组件由两个原生控件、一个输入框和一个按钮组成。 该组合形成“账户输入”组件；

如下图所示，一个单独的输入框控件也可以成为一个独立的“账户输入”组件；

上面的两个例子说明了组件可以由单个或多个控件类型组成。

如何定义组件的组成实际上需要结合具体的设计需求。 上面的第一个组件添加了一个用于帐户修改的按钮控件，允许用户通过按钮清除所有字段，允许用户直接、手动和通过按钮重新输入。 修改账户有两种操作方式，第二个组件仅支持手动输入修改。 通过添加明确的交互方法，组件的构成就会有不同的设计方法。

2. 让我们更深入地讨论一下组件

每个平台基本上都有自己独立的设计系统，有自己定义的组件和组件库。 学习组件时，需要了解组件分为两种：基础组件和业务/高级组件。

基础组件是低级组件，例如输入框、按钮、单选按钮； 特点是相对独立单一、通用性强、适应多种业务场景；

业务组件是一个大组件，是基本组件的集合。 也可以称为高级组件。 是一个复合块组件，主要是为了解决业务问题；

下面的截图是flomo Notes使用的网页版，以其首页为例； 页面按照左右结构类型进行划分，可以定义为两个大的业务组件，由浅入深，还可以进一步细分，获得更多的定义。 业务组成：

这里，我通过《 Notes》的组件来详细说明它是如何组成来解决业务问题的。

首先我们拆解组件：文本内容、工具按钮（三种：添加标签和图片、文本编辑、快速参考等）、发布按钮。

用户发布笔记的行为主要是文字输入-内容编辑-发布； 结合用户行为和组件设计，解决用户输入文字内容、总结笔记、添加图片、修改文字样式、快速引用、最后发布的问题。 在产品的迭代过程中，我们会发现更多的需求，业务组件会通过重新优化帮助用户解决实际问题。

3.学会做组件管理

结合自己的学习和设计经验，我将组件相关的内容和知识定义为组件管理，包括组件样式定义、组件及组件库的设计、构建、沉淀优化，都应该算是它的组件。

对于组件和组件库的功能和基本概念我就不做过多的描述了（毕竟市面上已经有很多了）。 我想从小事做起，深入思考，讲一些有用的东西，呈现给大家。

组件和组件库首先要遵循并围绕设计的原则、概念和目标来构思，比如苹果《人机交互指南》中提到的三大主题（清晰性、合规性和层次性）和系统设计的六大原则》（完整性、一致性、直接性、反馈感、隐喻、控制感），系统《 1、2》中提到的三个原则（材质是隐喻、大胆、生动、有意向、运动提供意义） 。 还有Ant，国内B端最权威的蚂蚁设计系统，将设计原则从设计价值观延伸到对设计模式的思考。

这里可以总结一下，平台在制定设计标准的时候，思考的方向会有所不同。 因此，系统应该遵循什么没有统一的模型。 而且这些术语本身就非常抽象，这就需要设计者思考平台系统应该设计成什么样子。 。 这确实依赖和考验设计者各方面的综合能力，所以组件设计和构建不是一个人的责任，而是整个团队的任务。

在设计和构建组件和组件库的过程中，需要了解系统平台，无论是Apple、还是Web。 不同的系统设计有很大不同，我们必须熟练掌握系统相应的控制类型。

比如一直保留着原生的底部导航栏操作控件（返回、主页、菜单）。 另一方面，苹果的HOME按钮首先出现在底部。 随着硬件设计的升级，物理按键的作用已经完全被交互式手势操作所取代。 根据设计指南，可以先设计出第一版的组件样式，然后设计人员熟悉项目业务，深入挖掘每个功能中不同的业务场景，设计对应的业务组件； 这样，设计者最终将对当前的组件进行彻底的审查。 集成类别并创建版本化的组件库。

组件和组件库是设计和开发的结合。 设计者呈现的页面上的模块很直观，但都是技术人员对底层代码进行拼接和重新封装而成的。 大型公司通常会制造开源组件。 图书馆。 提高项目人员之间的协作效率，复用率高，节省成本。 下图是Ant中部分按钮组件的样式和代码演示，Ant是国内唯一的免费学习设计系统网站。 如果你能从头到尾学习一下，相信对你构建组件和组件库会有很大的帮助。

最后，组件和组件库的优化迭代贯穿整个产品设计生命周期，从收集组件需求、思考组件优化、设计组件优化方案、验收和更新组件和组件库；

收集组件需求

项目视角：开发过程中被设计者遗漏、新业务场景中发现的组件问题。 设计和开发评审时讨论的不合理问题包括影响协作效率的问题； 用户体验：用户在使用时反馈产品中体验不佳、体验不佳的功能模块； 外部参考：团队成员从优秀的施工案例中发现了可供借鉴的需求；

思考组件优化

思维方向一：设计者可以查阅资料、研究优秀的组件平台、从成熟的产品中查看类似的组件设计案例； 或者与开发者、设计师进行深入讨论，获得有用的建议；

思考方向2：结合业务场景，最好将应用场景进行详尽的梳理，具体到某个功能，并考虑该功能中存在的每个场景中组件需要有什么状态和变化；

设计组件优化方案

设计人员按照上述步骤完成组件优化分析后，可以据此设计组件优化方案，并与开发人员组织多次评审，共同讨论和改进。 最后，技术人员进行组件代码的开发和封装； 构件设计优化，设计者应注重在既定设计原则下的合理优化，保留分析材料和思维过程，并进行理性回顾和论证；

接受更新的组件和组件库

开发人员通过代码实现组件风格后，需要将优化后的组件方案带入实际功能场景中进行测试和检查，以验证组件优化是否达到预期。 在优化过程中，可以使用“组件优化表”进行记录，方便项目人员跟踪查看。

4. 组件设计的应用与思考

组件的设计本质上是为了解决特定场景的问题。 比如提示弹窗，为了让用户在操作过程中有反馈提示，提示还可以通过解决某些场景问题来选择允许用户操作或不操作，所以平台设计了这种弹窗组件，分别是modal和弹窗类型。 下面通过两个例子来分析产品应该如何从组件角度结合功能和场景进行设计。

案例一：支付宝“商户转账功能”组件设计

当我们去商店买东西，使用支付宝付款时，我们可以扫描商家的二维码进行转账交易。 转账支付流程主要包括输入金额、选择支付方式、确认支付； 因为每个流程的组成部分都非常复杂。 ，我们只拿其中一个流程来对用户操作流程中涉及到的组件进行拆解讲解； 输入金额和添加备注的过程：页面的组件主要是用户信息文本、输入框、备注组件、键盘控件、弹出组件； 该流程包括2个行为事件和4个大的业务场景；

行为事件1：用户扫描店内商户二维码，分别两次向商户转账2万、人民币

业务场景1：用户没有输入任何金额

业务场景2：用户输入的转账金额不超过限额

业务场景3：用户输入的转账金额超过最大限额

业务场景123主要应用金额输入框组件。 输入框组件会根据用户的操作行为有不同的设计。 如果用户不进行任何操作，输入框会有默认的复制提示“输入付款金额”。 用户输入金额后，计算单位如果超过“百”，则数字金额上方会有单位提示，同时显示删除按钮交互项目拆解流程表格图，支持删除和重新输入。 业务场景2中，根据金额输入范围定义产品业务规则，然后细分为三个场景。 金额，可以采用相应的组件设计来解决转账确认的问题；

（1）当输入金额范围为1-50000时，进入新页面，点击按钮组件确认转账

（2）当输入金额范围为50000-99999时，使用当前页面的模态弹框组件确认转账

（3）当输入金额范围为-时，进入新页面，在输入框中重新输入转账金额，并确认。 如果两个金额不一致，会出现弹窗提示用户操作。

当输入的金额超过限额时，弹框组件配合限额的吐司提示。

通过对行为事件1的拆解，我们细分为三个业务场景。 通过输入框、键盘、Toast弹窗，相互关联，解决输入金额带来的各种问题；

当没有金额输入时，输入框可以给用户提示，这是比较常见的输入框组件设计，提示文字是预设的；

输入量不超过限制，输入框中会包含计量单位，这就是组件设计的精妙之处。

转账金额是与自身财产相关的行为操作，需谨慎。 因此，在用户输入过程中也会出现计量单位，给用户以提示，而无意中断操作。

出现的时机非常合适，输入的文字和数字足够醒目，能够足够准确地提示用户输入。 如果不添加这个字段，确实不会影响用户操作，但是这种双重测量的方式会潜意识里让你在打字时更有信心，不用担心出错； 这就是组件设计给用户带来的惊喜感。

金额超出限额后，Toast组件提示“支付金额超出限额”。 第一提示框组件限制键盘的数字输入，避免用户无效输入； 第二个吐司提示框是为了触发定时而设计的。 这里的解决方案是，如果输入金额超过一百万，按数字键盘时会给出提示，而不是等用户输入完再按确认键提示金额超出限制。

行为事件二：用户点击备注按钮添加转账信息。

业务场景4：确认输入金额后，给商户添加备注信息，20字以内；

输入转账金额后，文字键盘上方会出现备注按钮。 单击 ，弹出备注信息弹窗，在弹出窗口的输入框中写入备注信息。

其实要添加注释，可以使用页面上的文本框，但为什么要使用弹窗添加输入框并确认后才显示在页面上呢？

从输入金额和添加备注的优先级来看，备注信息应该比较低，信息显示的重要性也应该比较低。 首先，如果使用文本框和输入框的组件层级在同一层级，用户的注意力会受到干扰，所以使用不突出的文本按钮组件来区分。 另外，请注意，文本按钮的触发条件也是由于输入金额的动作。 ，所以笔记的信息展示在产品设计上非常薄弱。 而且，弹窗输入框还提示备注信息应在20字以内。 有了这样的信息规则，弹窗组件比文本框更适合短文本信息输入，从而可以与金额输入框组件区分开来。

转账是涉及财产安全的业务，因此组件的设计不仅要解决不同场景下的用户体验问题（及时反馈、合理提示、增加惊喜、操作便捷），还要处理核心业务问题（保障用户财产问题） 。

案例2：“高清体验引导用户付费”的组件设计

最近在做一个智能电视项目时，产品经理在播放器页面提出了“非会员用户也能体验高清视频”的需求。 主要目的是引导用户体验高清，提高用户会员充值率。

这里我们分析一下如何通过组件设计来解决这个问题；

首先我们将以下两点与业务规则结合起来：

(1)：视频内容资源是付费试用还是免费？

(2)：高清体验时间、单内容高清体验时间、总累计高清体验时间

考虑到用户需要在全屏播放器中尽量减少对用户观看的干扰，在设计时，利用提示框的组件，根据不同的场景状态对组件进行优化设计。

用户观看付费视频由于预览提示是通过按键操作，因此高清体验提示以提示文案引导，避免按键操作冲突。 组件设计如下图所示；

在体验过程中，单次高清体验期间玩家的状态会发生变化，即体验-即将结束-结束。 组件设计如下：

总体验时间结束后，再次进入播放器，组件设计发生变化，提醒用户影片清晰度很高。 组件设计如下：

用户观看免费电影。 由于电影来源免费，所以其他场景不存在关键冲突。 因此，高清体验的提示是通过“复制+按钮”提示来引导的。 组件设计如下图所示；

体验过程中，玩家单次高清体验时间也有状态变化，即体验结束——组件设计如下：

累计体验时间结束后，再次进入播放器，组件设计发生变化，提示用户影片清晰度高，可以点击操作。 组件设计如下：

在提示组件的整个设计过程中，必须不断维护用户会员状态、视频资源付费类型、高清体验时长等因素，以保证用户能够访问会员充值页面，所以在不同的情况下，始终保留遥控器上的按钮，可以操作引导他们进行支付。 虽然频繁的提示可能会得罪用户，但最终功能上线后，还是取得了一定的效果。 提示组件的设计大大提高了用户的支付充值率。

五、总结

组件设计的分析到这里就结束了。

我来回顾一下文章的内容。 主要有四点。 第一点通过例子解释了控件和组件之间的区别。 第二点介绍基础组件和业务组件。 第三点解释如何管理组件。 第四点通过两个具体案例，阐述了组件设计在实际产品中的应用以及我的一些想法； 总结以上几点，组件设计一定不能脱离用户场景和产品业务。 只有在这个基准下思考组件设计交互项目拆解流程表格图，才会有最优的解决方案。

专栏作家

Q十物，公众号：谈体验设计，人人都是产品经理专栏作家。 2022优秀作者，低调内敛的交互设计师。