欢迎进入UG环球官网(环球UG)!

usdt不用实名买入卖出(www.caibao.it):一起领会构建设计系统的历程

admin2个月前65

USDT官网

菜宝钱包(caibao.it)是使用TRC-20协议的Usdt第三方支付平台,Usdt收款平台、Usdt自动充提平台、usdt跑分平台。免费提供入金通道、Usdt钱包支付接口、Usdt自动充值接口、Usdt无需实名寄售回收。菜宝Usdt钱包一键生成Usdt钱包、一键调用API接口、一键无实名出售Usdt。

原题目:一起领会构建设计系统的历程

编辑导语:设计师们经常会用种种优质的设计案例举行参考,以是许多设计师最先专注于构建一个统一的设计系统,希望将可以将种种设计群集在一起,打造更完整的系统;本文作者拆解了 Bit 团队构建设计系统的历程,我们一起来领会一下。

在本篇文章中,我将泛起并拆解 Bit 团队构建设计系统的历程;为了帮人人更好明白,每个步骤内的真实案例将展示给人人。

设计系统的确立,是为领会决一定泛起的无序状态,它带来了秩序。在 1976 年,NASA(美国国家航空航天局)推出了第一个设计系统。

到现在,险些所有的大型组织(如 Uber,Pinterest,Airbnb 或 Shopify)都拥有一个这样的设计系统;这个系统能保持他们产物自身的连续性,且辅助更多杂乱的产物与团队确立秩序。

在 Bit,我们为跨越 15 万名有组件使用场景的开发者提供解决方案;平台辅助开发者构建、分享和使用组件,来加速和优化 Web 产物的研发历程。

我们享受构建一个 以组件为驱动方式的设计系统在已往的两年里,我们先“折腾”自身平台来构建出一个设计系统,然后再将其转变为一个由共享模式化组件组成的活跃生态系统。

这套系统提供的价值,远远不止保持了界面体验的一致性,它极大地加速与扩大了开发规模,且提高了产物质量,同时还改善了开发者与设计师及其他人的事情方式。

通过让所有成员介入互助,配合确立和共享组件,可以让这套设计系统得以更快更普遍的应用。

本文我将偏重从开发层面举行形貌,并与列位分享我们的设计目的、设计历程 和设计效果。

目录:

  1. 组件共享
  2. 文档与组件的可发现性
  3. 增量升级
  4. 依赖项的涟漪式更改
  5. 项目更新
  6. 团队相同
  7. 设计 – 研发的协作方式
一、视觉语言

审阅已有,然后界说我们确立视觉语言的历程;与大多设计系统文章内形貌的有所差别,那些是大型企业持有的特权,而这种方式对创业公司通常是奢侈选项。

作为一个生长期的创业公司,我们没有时间叫停,并将设计系统转换为大型庞大项目;取而代之的是——我们必须审阅现有的视觉语言,然后将其组织成一个有秩序的系统。

这个项目由 Bit 的设计卖力人 Amir Shalev 向导,项目分为两个部门:

Bit.dev 的面板规范和色彩规范

视觉一致意味着为色彩、文字、尺寸、位置及其他视觉语言确立一个统一的样式尺度指南;而字体、排版,主色与辅色等方面,则可以作为设计系统的一部门。

我们还需要确立一系列的 UI 元素,这些元素需要在未来能够使用现代的前端框架(例如 React 框架)实现为组件。

按钮、头像及其他基础组件

为了使系统中的元素在真实场景里具备可用性,必须保证元素除了包罗像按钮或头像等基本 UI 组件外,更应包罗组件的组成方式或组件的详细用法,这些是保证元素具备功效性的最基础方式。

将组件组合,可以确立出更多具象的、有进阶功效的复合组件

设计系统必须沉淀以下资产,才算准备就绪:

  • 样式指南(Style – Guide):用于界说 UI 样式和实现方式。表现形式通常是一个相当长的文档,带有许多的解说和排版。
  • 复用的系列视觉元素(Reusable Visual Elements):它们通过组件将视觉(UI 方面)和功效(UX 方面)连系在一起,来保持一致性;表现形式通常是一个大型源文件,其元素在 Figma 或 Sketch 等软件上绘制。
二、组件共享

构建组件的生态系统有些人的做法是宣布一个带所有组件的版本包,仅此而已,我们却更喜欢确立一个共享组件生态系统。

1. 我们的流程

若是前往 Bit.dev 的首页,你将发现一些很酷的器械;当鼠标悬停在一个组件上时,将触发高亮,提醒该组件的名称、版本和父级局限。

Bit.dev首页 —一个展示共享组件的作品

你看到的页面,是由共享组件组成的;然而,这些自力组件是由差别团队开发且持有的,泉源也是差别的项目,它们是夹杂后集成在一起的。

在 Bit,存在不止一个设计系统,我们有差别的团队在UI 组件生态系统中构建和共享他们的组件。

若是鼠标悬停在诸如「链接」(Link)或「段落」(Paragraph)之类的组件上,单击这些元素,你将看到相链页面显示这些组件是 “base-ui” 局限的一部门;这是我们设计系统最基础的部门,由我们的设计系统团队在自主的 GitHub repo 中开发,然后宣布到 Bit.dev 供所有人使用。

“base-ui”—我们设计系统的基础组件

然而,市场部成员需要更具象的组件,例如与营销相关的“题目”(Heading)组件或“行动按钮”(Action – button)组件;这些不是 “base-ui” 设计系统的一部门,而是另一个称为“布道者”(Evangelist)的组件局限。

基于此靠山,在 GitHub repo 中,这些组件自动归属于市场营销团队;但由于这些营业组件使用 “base-ui” 的组件搭建,因此它们的升级由 “base-ui” 团队卖力。

“布道者”(Evangelist) — 市场营销组件

“布道者” 只是由 “base-ui” 组成和扩展的众多组件之一。事实上,每个企业团队都 介入了构建自己营业局限的组件,并与他人共享自己的功效。

与其为组件宣布一个统一的软件包,我们选择了确立一个让所有人协同事情但自力宣布版本的生态系统;设计系统的角色应是促进 和规范,而不是阻止或强制执行。

这个生态系统获得了伟大的乐成,我们既减少了约 75% 新营销页面的搭建时间,还保持了设计气概的一致。

2. 用自主研发的工具事情

Bit 的 “折腾” 意味着我们以辅助别人的方式来建设自己的设计系统,而且从 2017 年最先,已经这样举行了好几年。

以下为要点:

  • 我们使用Bit OSS 事情平台来开发、治理和宣布来自差别团队差别代码库所拥有的解耦组件。
  • 我们通过Bit 云平台,辅助所有团队顺遂地相互公然、共享和集成组件。
  • 我们设计系统团队提供组件系统内的基本组件,并卖力更新与调整,保证基本组件的尺度和一致性。
3. 选择 React 框架

2017 年,基于种种缘故原由,我们选择使用 React 框架,而且对这一选择感应异常满足;自从 React 16 引入 Hooks 和 Context API 后,它就最先变得异常壮大;例如,即使是在状态治理方面,也能将多个组件相互星散。

然而,我们正看到许多团队选择将 Bit 用于 Vue 或 Angular 甚至是 Stencil Web 组件。实在我们一直在与 Angular 团队互助,为 Angular 的 Bit 库提供支持;但在思量了所有因素后,我们以为 React 是现在 Bit 团队的最佳解决方案。

4. 自力组件

Bit 事情平台辅助你确立模块项目的同时,享受简朴而周全的开发体验;每个组件都是自力开发、构建、测试、纪录、宣布并集成到新应用程序中的,所有的组件都是协调组合与治理的。

5. 确立开发流程尺度

另一个实现设计一致性的好方式,是尺度化组件的开发流程;Bit 通过种种特有功效助力宣布历程的尺度化,好比尺度组件开发环境、提供可复用的文档模板,甚至是提供具备扩展性和复用性的开发纪录管道图。

具有拓展性、复用性且可自界说设置的管道图

三、文档与组件的可发现性

使用 Bit 的另一个优势是——我们不需要为组件确立或维护分外的文档网站。

1. 内陆开发

当我们编写组件时,Bit 的 UI 将显示一个涵盖内陆开发环境中所有组件的文档;该文档支持隔离泛起各个组件的概述、使用示例和组成组合。

你可以确立可自界说和复用的文档模板,以便所有组件都可以根据相同的尺度和设计举行文档化。

文档是内陆开发的一部门

2. 云端文档

文档只是每个 Bit 组件的一部门,当组件被导入云端时,组件的文档将显示在首页,供所有人查看;文档在组件的纪录位置是一样的,利便查看与预览;若是你在内陆安装或导入了组件,也支持在内陆更新文档。

“先修改 Tokens,之后更新 React、UI Kit,再接着将这些内容的链接更新到对应文档页面,然后宣布文档。”—— Kaelig Deloumeau Prigent,Shopify 的 Polaris 开发者

所有的 Bit.dev 上的文档与我们在内陆开发时所看到的保持一致,每次宣布新版本的组件,其文档也能轻松保持同步更新;没有分外成本,没有庞大流程,没有未实时更新的文档。

内陆开发的,即云端所见的

3. 可发现性与搜索功效

由于组件越来越多,Bit.dev 使用“组件搜索”和“关联筛选项”等功效提高组件的可发现性,这些功效辅助我们快速轻松地搜索许多组件。

,

Usdt第三方支付接口

菜宝钱包(caibao.it)是使用TRC-20协议的Usdt第三方支付平台,Usdt收款平台、Usdt自动充提平台、usdt跑分平台。免费提供入金通道、Usdt钱包支付接口、Usdt自动充值接口、Usdt无需实名寄售回收。菜宝Usdt钱包一键生成Usdt钱包、一键调用API接口、一键无实名出售Usdt。

,

前往 Bit.dev 从数千个 OSS 组件中搜索想要的,或者添加自己的组件

四、增量升级

单独的组件版本控制

我们的设计系统是按组件举行版本控制的,而不是简朴发一个包。

对自力的单个或多个组件 举行版本控制比将所有组件打成单个包来控制版本要好得多;自力宣布的组件语义化版本控制,已经成为这个游戏规则的改善者。以下是 Bit 的主要优势:

  • 我们只更新用户所需的内容。
  • 我们可以轻松快速地升级单个组件。
  • 我们很容易修复或者回滚任何组件。
  • 我们支持混搭和匹配来缔造种种复合组件。

Bit 辅助用户将每个组件作为一个自力的包举行版本宣布,由于每个组件的版本都是自力的,以是可依据差别的项目对组件举行增量升级,而不是一次次集成为一个大的包。

若是前往「按钮」组件页面,你会注重到该组件当前在 1.5.0 版本上,而且初始版本是 1.0.0。

这种更新方式给了设计师和开发职员极大的自由,人人可以不断地举行产物创新和宣布升级。

例如,以下展示了已宣布的 1.5.0 版本的按钮:

“布道者” 组件/按钮@1.5.0

以下是之前 1.4.0 版本的按钮:

“布道者” 组件/按钮@1.4.0

这是更早之前 1.0.0 版本的按钮:

“布道者” 组件/按钮@1.0.0

现在若是你回到 1.5.0 版本,就会注重到按钮有一系列的使用示例,1.5.0 这个版本,支持比过往版本更多的设计示例。

这样设计师和开发职员无需等至大版本或较久的迭代版本才更新,现在便能够极端自由地研发与升级组件。

组件开发者也可以通过 sem 版本规则、查看历史纪录、查看视图更改日志的方式,控制每个组件的版本制止冲突。

而应用程序共创者也不会接收到需求以外的更新通知,每个人都很喜悦。

五、依赖项的涟漪式更改

治理所有组件关系:Bit 治理着项目中所有组件之间的依赖关系图,这意味着——当我们升级或中止一个组件时,Bit 会 “知晓” 哪些组件与其有依赖关系,然后将运行这些依赖组件的重构和测试。

效果证实,这个方式让组件之间的内部关系更容易掌握。开发同个项目里的多个组件一事变得更简朴。

“若是我们在升级时破坏了一个组件,我们不得不检查并修复所有的依赖组件。”—— Jony Cheung,Atlassian 的 Atlaskit 软件工程司理

每次更改,也会对所有关联组件运行一次 重构 和测试,并让我们确切地知道哪些组件已损坏,而哪些组件没有;若是效果一切正常,我们可以简朴粗暴地告诉 Bit 一次性迭代所有相关组件。

我们现在正在开发一种叫做 Ripple CI 的新产物。在 Ripple 平台运行的重修历程,将通过云端把更改传输到差别团队产物中的、有依赖关系的组件里。

使用者将确切地看到每个依赖组件被涟漪式影响的历程,以及它们的影响关系、影响部门;然后,这些组件将一起被修复和宣布。

六、项目更新

通过 GitHub 集成实现自动化,我们使用对外公然的集成方式将 Bit.dev 与 GitHub 平台关联起来;当组件的新版本宣布到 Bit.dev,这个版本将 “知道” 在 GitHub(或 GitLab)上的哪些项目也该被更新,然后这个历程就完全自动化了。

组件的新版本作为一个 Pull 请求,将自动发送到所有包罗该组件的项目;只需单击选择接受,便可更新。

这使得卖力设计系统的团队能够很容易地连续升级,并辅助所有产物构建者接受更新与集成更改。

而且,团队可以随时监控谁遗忘了更新内容与位置,这里必须提到就在不久前 Gilad Shoham 向导 Bit 焦点团队制止了一次重大更新事故!注重咯 Gilad,我们什么都知道了。

七、团队相同

通过 Slack 软件实现自动化:宣布新的组件版本时,所有使用此组件(与此组件有依赖关系)的团队都将通过平台和 Slack 软件获得更新通知。

因此,例如说一个版本内「购物车」中的「按钮」组件被导出时,Bit 团队会收到一个通知,其中包罗执行该操作的用户账号、操作行为(导出)以及与该特定操作相关的导出组件数。

以下是 Eden Ella 从 “布道者” 团队组件内更新「按钮」组件的纪录。

每次举行组件的导入操作时,均将泛起类似的通知模板,但带有差别源局限。

该事情流程辅助所有人保持信息同步,且更好地举行事情协同。

八、设计 – 研发的协作方式

以可视化的方式在代码上协同事情:

  • 设计系统这一观点对设计师 和开发职员 来说是两个差别的器械。
  • 设计师通常谈论画布上的元素,开发职员在他们的集成开发环境内讨论 React 组件。用户最后获得的是由代码编写的产物,而不是设计元素。

这就是为什么设计师介入 UI 开发历程这件事会发生争议。

我们用两个壮大工具来实现设计与研发之间稳固且双赢的互助关系:

第一个是使用Zeplin —— 这是一个偏重于服务设计师,让他们与开发职员友好互助的工具。我们用它将设计义务转化为开发义务,团队使用该工具的频率是天天。

第二个是使用Bit 平台 —— 这是一个偏重于服务开发职员,让他们与设计师友好互助的工具,它为设计师在 UI 组件开发历程中饰演努力的一环搭建了桥梁;此外,它还可以辅助设计职员监视代码更改行为,甚至是介入组件的新版本的更改协作。

通过可视化,设计师可以查看和实验实际效果的 React 组件

同时,我们使用 Bit 平台将所有组件宣布给设计师,保证他们的设计效果始终完善一致。

像“热重加载渲染” 和“可编辑示例” 等功效,是设计师查看组件和实验差别设计样式的好方式。

每当有组件的新版本或者新组件在 Bit.dev 宣布,设计师能通过可视化直观地看到更改内容。这样就很容易保证所有设计的一致性。

然后,在设计师的批准之后,可以将此更改作为 Pull 请求,自动发送给所有有影响关系的项目。这意味着设计职员现在直接能与开发职员配合开发组件。很酷吧?

在不久的未来,我们团队打算在 Bit.dev 平台上添加更多面向设计师的功效,例如交互式属性面板,这样设计师就可以自己举行组件更改的行为,并将更改后的组件保存为新版本。这些功效应该能在 2021 年上线。

九、结语

2020 年版本的 NASA 设计系统

确立 UI/UX 体验,并在产物的各个触点上延续体验的一致性,辅助用户在操作时不会发生混淆,能够直观地举行导航并乐成地与产物差别模块举行交互;这就是品牌效应,而你需要一个这样优异的品牌效应。

在确立设计系统的历程里,我们算是从头最先构建。我们审阅了现有设计,把它变成了一个有序系统;我们界说了视觉元素 和样式指南,这些器械无不反映了 Bit 的品牌故事。

我们依赖自主研发的云工具平台,来构建一个可共享的组件系统;在历程中,该平台将每个成员群集到此;在这个民主但受羁系的生态系统中,我们让组件驱动产物开发。

最后,这个系统获得民众快速和险些绝对的接纳。

我希望这篇文章至少辅助你领会些许我们构建设计系统的历程,以及现代人人配合构建 Web 产物的可能性。

原文:https://blog.bitsrc.io/how-we-build-our-design-system-15713a1f1833

作者:Jonathan Saring;

译者:徐曼鹭;审核:张聿彤;编辑:徐小淇

本文由 @三分设 翻译宣布于人人都是产物司理,未经作者允许,克制转载。

上一篇 下一篇

猜你喜欢

网友评论

随机文章
热门文章
热评文章
热门标签