组件和组件库首要一定是遵从和围绕着规划的准则、理念、目标去构思

这儿，我以“发布笔记”的组件详细阐明下，它是怎么组成来处理事务问题的。

首要咱们拆解下组成部分：文本内容，东西按钮（添加标签和图片、文本修改、快速引证等三种类型），发布按钮。

用户发布笔记的行为主要为文字输入-内容修改-发布完成；结合用户行为和组件规划，处理了用户输入文本内容，给笔记归纳，添加图片，修改文本款式，快速引证，终究进行发布的问题。产品在迭代过程中，咱们会发现更多的需求，事务组件就要经过再优化帮用户处理实践问题。

三、学做组件办理

结合自己的学习和规划经历，我把组件相关的内容和知识整理界说为组件办理，包含组件的款式界说、组件和组件库规划、建立、沉淀优化应该都算是它的组成部分。

组件和组件库效果，和基本概念我就不做过多描绘了（毕竟市面上关于这些内容已经有很多了），我想从小的点去做深度考虑，讲点有用的东西，呈现给我们。

组件和组件库首要一定是遵从和围绕着规划的准则、理念、目标去构思，如苹果的《人机交互指南》里边提到的体系规划三大宗旨（清晰、遵从、层次）和六大准则（完整性、一致性、直接性，反馈感、隐喻性、操控感），安卓体系《资料规划1，2》中提到的三大准则（资料就是隐喻、大胆，生动，有意、运动供给意义）。还有国内b端最权威的蚂蚁规划体系Ant design，从规划价值观延伸规划准则，从而考虑规划形式。

这儿能够总结，渠道在创造规划标准时，考虑的方向都会不一样，所以体系遵从什么，没有一致的形式，何况这些名词自身就很抽象，这需求规划师们去考虑应该把渠道体系规划成什么样。这的确很依赖和检测规划师各方面的综合能力，所以组件规划和建立，它并不是某一个人的事，而是整个团队的任务。

组件和组件库的规划和建立过程中，需求了解体系渠道，是苹果端仍是安卓、web端，不同的体系规划的差异性很大，对应体系的控件类型咱们也要很娴熟的把握。

例如安卓一直保存的原生的底部导航栏的操作控件（返回、主页、菜单），反观苹果最早出现在底部的HOME键，跟着硬件规划的晋级，物理按钮的效果已经完全被交互手势操作代替，依据规划准则，能够先规划出确认的初版组件款式，然后规划师们要熟悉项目事务，深挖每个功用中的不同事务场景，并规划出对应的事务组件；这样规划师终究关于当时组件进行整合分类，做出版别的组件库。

组件和组件库是规划和开发相结合的，规划师呈现页面上的模块是直观的，但都是技术人员进行底层代码拼接的再封装而成的，有规模的公司一般都会做成开源的组件库。去提高项目人员之间的协作效率，复用率高，节省成本。如下图是Ant design里边的部分按钮组件的款式和代码演示，作为国内独一档的免费学习的规划体系网站。如果我们能够从头到尾研究一遍，相信对你构建组件和组件库有十分大的帮助。

最终组件和组件库的优化迭代是贯穿整个产品规划的生命周期的，从收集组件需求、考虑组件优化、规划组件优化计划、检验更新组件和组件库；

收集组件需求

项目角度：规划师开发过程中遗失的、新的事务场景中发现的组件问题，规划和开发者评定讨论出来的包含影响协作效率的，不合理的问题；用户体验：产品中的用户反馈的功用体验欠好，使用时体验差的模块；外部借鉴：团队人员从优秀的组成事例中发现的可借鉴的需求；

考虑组件优化

考虑方向1：规划师能够查阅资料，研究优秀的组件渠道，从老练的产品中检查同类的组件规划事例；或许和开发者、规划师进行深度交流，得到有用的主张；

考虑方向2：结合事务场景，最好能够将使用场景穷举梳理出来，详细到某个的功用，考虑该功用里存在的每一个场景中，组件需求有什么样的状态和变化；

规划组件优化计划

规划师依据以上步骤完成组件优化的剖析之后，能够相对应的规划组件优化计划，安排开发人员一同屡次的评定，我们一同去讨论完善，终究技术人员再进行组件代码的开发和封装；组件规划优化，规划师要注意在既定的规划准则下合理优化，要保存剖析资料和考虑过程，进行有理有据的评定论证；

检验更新组件和组件库

当开发人员将组件款式经过代码落地之后，优化中的组件计划需求带入到实践功用场景中进行测试检查，验证组成优化的是否契合预期，在优化过程中，能够用一张《组成优化表》进行记载，能够便利项目人员追踪和检查。

四、组件规划的使用和考虑

组件的规划本质上也是为了处理某种特定场景的问题。例如提示弹窗，为了让用户在操作过程中有反馈提示，提示中又能够经过处理某种场景问题，挑选让用户进行操作或许不操作，所以渠道规划出这种弹窗组件，即模态和非模态弹窗类型。下面经过两个例子，结合功用和场景详细剖析产品应该如何做组件规划。