赞助商
立即赞助

如何设计企业级的UI组件库?用网易实战案例教会你!

UI设计3年前 (2021)发布 流光
3.6K 0 0

编者按:本文网易设计师用「FishDesign企业级UI组件库」项目为例,过在网易七鱼品应用,来介绍个企业级 UI 组件库设计原则。

品:这需求很简单,比上期有段和操作项异,把上稿子接复制下应该不用很多时吧?

交互:上次你是是做过级筛组合?我这期需求要到,你把那分稿子发给我。

研发:这个组件在其模块过已有式,这次为什用不一的?不然要重复开发呀,能不能统一一下。

视觉:同一按钮不同的模块颜色不一样诶,这次哪模块一致啊?

……

通以上对不难看出,最常出现在需求沟通与研程中,由缺少统一的规范和标准化系,导致施节各方沟通成高,造成设计成果与现有一定差距,影响用户验;通用组件和业务组件混用,导致设计模式和代码复用率低。尤其是当业务展到一定量时,对复产品的大量重复且类似的需求场,果没有一种高效的工具和规范来协同工,将大大影响团的生产及沟通效率。

问题

  • 认知:产品、研发、计对于同一需求都有理解的解决方案,缺少统一规范的约束,难以达成共识。
  • 效率:设效率低,交互原型的维护本及下游团队的沟通本高,易造不专业的印象。
  • 品质:认和效率的局,最终导致施落地的产品质量和用户验难以得到障。

解决

大家应该都知道高(LEGO)积木,它是一种可以互相嵌套组的塑料积木,形状共有 1300 多种,每种形状都有 12 种不同的颜色,可以拼插出多种造型。其实组件库的工作方式就像高,通过件的互相嵌套来产生多种组件或模块,多种组件模块结生成页面结构。先来梳理一个概念,组件库是什?

如何设计企业级的UI组件库?用网易实战案例教会你!

组件库是计系统的一部,是在常规界面计过程中可以直用来制作交互图例和搭建页面的组件集,它可以作为个组件独立存在,也可以通过多个组件组而成的结构或模式来解决类似景的计问题。组件库是在约束条件下去构建解决方案的过程,所以组件的使用也需遵循一定的规范,按照一套标准化的体系复用于多个业景。

一效的组件库,可以帮设师研发提高作效率,提升设专业度的同时让产品本身的体验加一致、可学,品牌感强,它所具备的基本特征一通用的、灵活的、复用的。

  • 通用性:味着足够基础和常见且不带业属性,参计环节的每个人都应该知道这个组件的功能及目的,同备一定扩展性。
  • 灵活性:求元件的组合需灵活,可以不同场景下通过互相组合速搭建交互框架原型图,并根据不同页面结构的演变应新的业务需求。
  • 复用:指的是适用个业务或产品,在设计程和研程中以高频复用。

那么用组件库这种标准化体系完设方案时,到底能怎样的价?

组件库的价值

保证产品体验的一致性:对于一含多业务系统的型复杂产品,每独立的业务系统虽然功能一区别,但整体的用户体验需满足基本的一致性。比如,当我使用同一产品中的业务系统 A 业务系统 B 时,我能通过类似的页面结构、组件及样式的一致性、操作反馈乃至提示文案结构的一致性,感知到我使用的A、B业务系统隶属于同一产品。

提升设计师的效率:在需求量巨大且需求来自不同的业务时,需要逐一绘页面及组件,造成大量重复劳动,并且在评审及需求沟通节还能存在不断地细节优。所以对设计师而言,组件的高频复用能大大提升设计效率,使设计师更的将精力聚焦理和决用户的际问题。

提升研团队效率:用场景及普需求接按规范进设计和研发,减少上下游页及组件使用不理解而生多余沟成本。

利于沉淀设计规范:组件本身的设计和使方式就可直接作为交互和视觉规范的一分,按照统一的设计规范来确定需要使的题色、组件样式、组合方式及页面结构,可快速搭建一个或多个产的交互框架。

构建「FishDesign」企业级UI组件库

那么如何构建一个企级 UI 组件库?

将用前段间参的「FishDesign企业UI组件库」项目为例,通过在网易鱼产品中的应用,来介绍一个企业 UI 组件库的计则,内容构成包含哪些类型和素,每种组件类型在类和计过程中是如何考量的。本文侧重讲述构建一个组件库所涵盖的内容,而不是某组件类别本身的计方法。

顾思义,「企业级」意 FishDesign 所服务的业务都具备一体的,可能服务一包含了多独立子业务系统的型复杂产品,比如网易七鱼;也可能同时服务多款产品,比如网易七鱼网易。

组件库是帮助设计者及前端工程师快速构建业务系统的工具,除最重要的组件内容,还需要设计原则、方案及局规范来指导具业务产品的设计有效落地。

1. 设计原则

基 FishDesign 目前主要是帮助搭建 B 端企业级产品,而 B 端业务的产品目的决定它所才采取的设计模式,所以我们将用以下四点为塑造组件库的设计原则:

如何设计企业级的UI组件库?用网易实战案例教会你!

  • 简洁:如无必要,勿增实体,慎重筛选户当前需要息内容。
  • 直接:提供用户操作后的直接反馈,保证用户的操作结果符合预。
  • 优雅:设计方案追求优雅,给使用者有质感的操感受。
  • 适应性:设计案需提供可扩展能力及适应性,以适应不模企业使用。

2. 颜色

产品会根据自身的产品目标受众群体去选产品的配色方案。文提到,一效的组件库需满足通用性、灵活性、复用性,配色方案就应该能被灵活自义应对多样化的诉求。以网易七鱼例(下文均以网易七鱼例),设置了 1 种主色,4 种辅色 6 种中性色搭建一致的外观感受。

  • 主色:选择蓝色系来传达智能服、任可靠、术创新的品牌形象。
  • 辅色:除了品牌主色调蓝色,辅色中也存一样的蓝色,那因蓝色相对泛用性较广的色系,用于产品中的主操作按钮、文字按钮或 icon 。色唤起注意并昭示危险,所以一般用于谨慎操作及错误提示。黄色则常用于警示信息,提示用户操作可能的风险及后果。绿色能传递安全健康的绪感受,用于向反馈提示或功操作的引导。
  • 中:一般采取黑灰来展示产品的文信息、背和边框,用来表现次结构。

如何设计企业级的UI组件库?用网易实战案例教会你!

3. 布规范

为处多务中页设计区域的信息收纳问题,我们规则的格阵列来指导和规范版面布及信息分布,即栅格系统和页面布。FishDesign 在 12 栅格系统的基础上,将整个设计区域按照 24 等分的原则进行划分,来增页面的相似,升户体验。

如何设计企业级的UI组件库?用网易实战案例教会你!

我们通过基本的配色及布规范解决了产格及信息区框架的设计,那组件库中重要的组件分,是如何作于产搭建的?Brad Frost 的「原子设计论」可帮助我们更好的解,原子设计的灵感来自于现实世界当中的分子结构,UI 中颗粒最小的元素,即「原子」,组成了颗粒较大的元件,即「分子」;而诸多分子又组成了更复杂的组件与模,即「有机体」。

如何设计企业级的UI组件库?用网易实战案例教会你!

组件库构建之初无法一应俱全,是需要后续断的维护与迭代的。如何在最初海量组件中圈定适合的组件范围呢?最合适的切入点就是从身边的务场景发,从最基本、最简单、最小的元素入手。

4. 组件分类

我们根据当已有的务场景和对往后一时期的务发展方向进行规划,将组件库的组件类分为通组件和务组件。一般务组件库是对外的(毕竟使场景特殊有限,放来参考意义大),在 FishDesign 官只看到通组件分。

  • 用组件:指适用范围广、复用频高,可复用于多个业务不含业务逻辑。比如导航栏、按钮、toast、弹窗等。
  • 务组件:这类组件对通组件而言,最大的特点就是包含了较多务属性,跟产功有较强的联性,影响到适范围可仅限于 1~2 个务系统或特殊场景,且复频次。如易七鱼的在线和呼叫系统中的咨询分类组件。

个大型复杂业务品常有不止位设计师或前端工程师参与设计,需要在多处理选择合适设计模来解决不场景问题,这要求根据组件属性异,需用组件做细分,那么如何确定用组件子分类呢?

如何设计企业级的UI组件库?用网易实战案例教会你!

  • 竞品学习与研究,穷举该部分产品类型中的组件类型。
  • 遍历自己所负责产品内已有的业务场,提取并整理业务场中所用到的组件。
  • 将理好两部分组件进筛选去,保留高频用部分。比如样是下筛选组件,由于缺少统规范和组件,可能导致后是在品不业务系统相场景下,使用组件从样到交互都不致。我们要做是这部分在类似业务场景使用了多表形组件做合并去,然后过设计组内审来圈定最后用组件范围。
  • 基于组件的属性和使场景,对圈定的组件范围进行归类。

由上述步骤,我们将用组件继续细分为五个子类:基础组件、导航、数据录入、数据展示、操作反馈。

如何设计企业级的UI组件库?用网易实战案例教会你!

  • 基础组件:即按钮、图标,相较于其他组件的使用场景通用,或其他组件实时依赖了这些组件实的组件类别。
  • 导航:即导航菜单、标签、面包屑等,以帮助用户产品系统内快速找到所在页面级或位置的组件类别。
  • 数据录入:即输入框、选择、表单等,支持用户将数据信息录入到系统组件类。
  • 数据展示:即图表、表格、气泡卡片等,将录入到系统的数据信息多样展示来的组件类别。
  • 操作反馈:即对话框、警告提示(Alert)、全局提示(Toast)等,在用户操作前后,使系统状得以理反馈的组件类别。

用组件库设计「网易七鱼」示例

以网易七鱼为例,看下有组件库参与搭设计示例,以下页所用组件均出自 FishDesign 组件库。

「导航组件」使示例:

如何设计企业级的UI组件库?用网易实战案例教会你!

「表格组件」使示例:

如何设计企业级的UI组件库?用网易实战案例教会你!

「弹组件」使示例:

如何设计企业级的UI组件库?用网易实战案例教会你!

「步骤组件」使示例:

如何设计企业级的UI组件库?用网易实战案例教会你!

总结

组件库最大价值在于提升个团队研效率,使设计质量以保障时,提升品体用户体验。

我们对构建企级 UI 组件库的步骤及要素做个简单顾:

  • 首先,明确组件库所需解决问题及存在价值,这决定组件库体量和服务范围是什么,以及构时是否合适。
  • 次,通过竞分析并结合身边最熟悉或深耕的务入手,通过产目的来择设计模式,从最小元素开始逐步整,包括产配色方案和栅格系统等布规范。
  • 第三,需要对组件库的重要组成部「组件」,进行圈定及理类。这需要注的是,组件范围的圈定,尤其在组件库搭建的初阶段并不是越多越好,而是需要有效的覆盖那些经过规划的业景即可。
  • 后,组件库并不构建完就结束了,需后续项目中逐维护与新的积累过程。

任何组件库的构建都离不开一个优秀的队在整个计过程中的高效协同,十谢参的计前端工程。上文仅是个人参过程中的一些经验总结,还不够全面,同篇幅有限,关于组件的体计考量无法一次详尽,欢迎一起讨论组件库及标准化计体系相关的更多内容。

欢迎关注作者「网易UEDC」的公众号:

如何设计企业级的UI组件库?用网易实战案例教会你!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

在接触设计之初就曾阅读过一本关于整理的书籍,佐藤可士和的“超级整理术”,书中的内容对我深受启发,在往后的工作中我也一直...
B端设计
偶然间发现了一本3年前买入的书《侘(cha第四声)寂》,心里打着哪怕是看上10分钟至少也是没荒废这个假期的念头,读了起来; ...
产品设计
今天,咱们还是来聊找工作必备物品——作品集。这一篇文章将从整体角度上分享整理作品集时应该遵循的三个基础原则,分别是美观...
作品集
风筝KK:看了本章内容,你将能快速明确什么情况采用哪种列表展示方式。 参考文章: 《通用设计法则》留白恐惧 128...
产品设计
近年来,互联网进入下半场,C 端流量红利逐渐消退,很多企业转向了 B 端服务,随之而来的是产品设计者的转型,现在越来越多的...
B端产品
由于B端产品的特殊性,也由于各类React组件盛行,设计发挥的空间没有C端那么直接,更多隐藏在使用体验的过程中。面对改版,我...
B端产品
有的时候,我们设计产品就是不断地找问题。遇到问题解决问题,这样就能设计出好的产品了吗? 真实经验告诉我,并不是这样!...
交互设计
你或许听过118名UI设计师竞争一个岗位,它出自拉勾《2019互联网行业招聘白皮书》。但你可能不知道2020年实际情况是:每天有60...
ui设计