| 分享如何设计企业级的UI组件库 | |
| 【返回本版】 【发表帖子】 【回复帖子】 | 浏览量 1161 回帖数 0 |
 |
lanlan123 等级 ☆ 楼主 发表于 2019/12/11 11:39:32 编 辑 |
|
|
我将用前段时间参与的「FishDesign企业级UI组件库」项目为例，通过在网易七鱼产品中的应用，来介绍一个企业级 UI 组件库的设计原则，内容构成包含哪些类型和元素，每种组件类型在分类和设计过程中是如何考量的。本文侧重讲述构建一个组件库所涵盖的内容，而不是某组件类别本身的设计方法。 顾名思义，「企业级」意味着 FishDesign 所服务的业务都是具备一定体量的，可能是服务一个包含了多个独立子业务系统的大型复杂产品，比如网易七鱼；也可能是同时服务多款产品，比如网易七鱼和网易定位等。 组件库是帮助设计者及前端工程师快速构建业务系统的工具，除了最重要的组件内容，还需要设计原则、配色方案及布局规范来指导具体业务产品的设计有效落地。 1. 设计原则 基于 FishDesign 目前主要是帮助搭建 B 端企业级产品，而 B 端业务的产品目的决定了它所才采取的设计模式，所以我们将用以下四点作为塑造组件库的设计原则： 简洁：如无必要，勿增实体，慎重筛选客户当前需要信息内容。 直接：提供用户操作后的直接反馈，保证用户的操作结果符合预期。 优雅：设计方案追求优雅，给使用者有质感的操作感受。 适应性：设计方案需提供可扩展能力及适应性，以适应不同模式的企业使用。 2. 颜色 产品会根据自身的产品目标和受众群体去选定产品的配色方案。前文提到，一个有效的组件库需满足通用性、灵活性、复用性，像配色方案就应该能被灵活自定义来应对多样化的诉求。以网易七鱼为例（下文均以网易七鱼为例），设置了 1 种主色，4 种辅助色和 6 种中性色来搭建一致的外观感受。 主色：选择蓝色系来传达智能服务、信任可靠、技术创新的品牌形象。 辅助色：除了品牌主色调蓝色，在辅助色中也存在一样的蓝色，那是因为蓝色是相对泛用性较广的色系，用于产品中的主操作按钮、文字按钮或 icon 等。红色唤起注意并昭示危险，所以一般用于谨慎操作及错误提示。黄色则常用于警示信息，提示用户操作可能带来的风险及后果。绿色能传递安全和健康的情绪感受，用于正向反馈提示或成功操作的引导。 中性色：一般采取黑灰色调来展示产品的文本信息、背景和边框色，用来表现层次结构。 3. 布局规范 为处理多业务中网页设计区域内的信息收纳问题，我们用规则的网格阵列来指导和规范版面布局以及信息分布，即栅格系统和页面布局。FishDesign 在 12 栅格系统的基础上，将整个设计区域按照 24 等分的原则进行划分，来增加页面的相似度，我们通过基本的配色及布局规范解决了产品风格及信息区块框架的设计，那组件库中重要的组件部分，是如何作用于产品搭建的？Brad Frost 提出的「原子化设计理论」可以帮助我们更好的理解，原子化设计的灵感来自于现实世界当中的分子结构，UI 中颗粒度最小的元素，即「原子」，组成了颗粒度较大的元件，即「分子」；而诸多分子又组成了更加复杂的组件与模块，即「有机体」提升用户体验。 组件库构建之初无法一应俱全，是需要后续不断的维护与迭代的。如何在最初海量组件中圈定适合的组件范围呢？最合适的切入点就是从身边的业务场景出发，从最基本、最简单、最小的元素入手。 4. 组件分类 我们根据当下已有的业务场景和对往后一段时期的业务发展方向进行规划，将组件库的组件类型分为通用组件和业务组件。一般业务组件库是不对外的（毕竟使用场景特殊也有限，放出来参考意义不大），所以在 FishDesign 官网只能看到通用组件部分。 通用组件：指适用范围广、复用频次高，可复用于多个业务且不包含业务逻辑。比如导航栏、按钮、toast、弹窗等。 业务组件：这类组件对比通用组件而言，最大的特点就是包含了较多业务属性，跟产品功能有较强的关联性，所以影响到适用范围可能仅限于 1~2 个业务系统或特殊场景，且复用频次不高。比如网易七鱼的在线和呼叫系统中的咨询分类组件。 一个大型复杂的业务产品通常有不止一位设计师或前端工程师参与设计，需要在多种处理方式中选择合适的设计模式来解决不同的场景问题，这要求根据组件属性的差异，需对通用组件做细分，那么如何确定通用组件中的子分类呢？ 竞品学习与研究，穷举该部分产品类型中的组件类型。 遍历自己所负责产品内已有的业务场景，提取并整理业务场景中所用到的组件。 将整理好的两部分组件进行筛选去重，保留高频通用的部分。比如同样是下拉筛选组件，由于缺少统一规范和组件，可能导致的后果就是在同一产品不同业务系统的相同场景下，使用的组件从样式到交互方式都不一致。我们要做的就是对这部分在类似业务场景中使用了多种表达形式的组件做合并去重，然后通过设计组内审来圈定最后通用组件的范围。 基于组件的属性和使用场景，对圈定的组件范围进行归类。 由上述步骤，我们将通用组件继续细分为五个子类别：基础组件、导航、数据录入、数据展示、操作反馈。 基础组件：即按钮、图标等，相较于其他组件的使用场景更通用，或其他组件在实现时依赖了这些组件来实现的组件类别。 导航：即导航菜单、标签、面包屑等，可以帮助用户产品系统内快速找到所在页面层级或位置的组件类别。 数据录入：即输入框、选择器、表单等，支持用户将数据信息录入到系统的组件类别。 数据展示：即图表、表格、气泡卡片等，将录入到系统的数据信息多样化展示出来的组件类别。 操作反馈：即对话框、警告提示（Alert）、全局提示（Toast）等，在用户操作前后，使系统状态得以合理反馈的组件类别。组件库最大的价值在于提升整个团队的产研效率，使设计质量得以保障的同时，提升产品整体的用户体验。关于竞品分析，设计师会转载或原创一篇自己欣赏的文章，更多文章就在蓝蓝设计每日一贴。您可以直接联系优秀的软件ui设计提供者北京蓝蓝设计,北京蓝蓝设计为您提供最好的设计服务。 欢迎访问,开始愉快的合作! 网站：www.lanlanwork.com 全国统一客服热线：400-608-6026 公司邮箱:weibaobei@163.com |
||
| 1 |