抖音系企业应用设计系统 Semi Design 开源啦

近日，抖音团队正式开源其企业应用设计系统Semi Design。

Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代企业级应用 UI 解决方案，从字节跳动各业务线的复杂场景提炼而来，支撑近千平台产品，服务内外部 10 万+ 用户。

经过近两年的迭代，在各类不同形态的业务落地验证后，Semi Design 已成为跨部门级的基础设施，并围绕组件库形成丰富的工具链和生态。为了让日趋成熟的设计系统服务更多用户，进一步挖掘使用场景，我们决定将 Semi 开源，借助社区的力量不断完善，扩展能力边界。

Semi 多用于前缀或词组中，表示「一半」 —— 正如同一个完整的企业应用，通常由业务逻辑与前端界面构成，Semi Design 希望成为这不可或缺的一半，为企业应用前端提供坚实且优质的基础。

我们相信，设计系统的真正价值在于降低前端的搭建成本，同时提供优秀的设计和工程化标准，充分解放设计师与开发者的生产力，从而不断孵化明星产品。

亮点
设计 —— 不变与多变

近年来，越来越多的 SaaS 产品如 Slack，Notion，Figma，开始依靠优秀的用户体验来推动增长。对产品的评判标准，已从采购方逐渐转移到终端用户；一个产品体验的好与坏，将直接影响用户是否继续使用，B 端产品的体验设计也变得愈发重要。

Semi Design 始终致力于提升企业应用的体验。通过提炼简洁轻量，现代化的设计风格，细致打磨原子组件的交互，并在字节跳动的海量业务场景下进行迭代，沉淀了一套优质的默认基础 —— 它将保证 Semi 打造的企业应用产品，天生拥有连贯一致的「语言」，和明显优于陈旧系统的质量基线。

此外，一个好的设计系统必须是「活的」，它需要能跟随业务的增长而发展、更新。因此，Semi 从未尝试约束用户，固化所谓的「统一规范」，而是在默认基础上，充分进行模块化解耦，并开放自定义能力，方便用户进行二次裁剪与定制，搭建适用于不同形态产品的前端资产。

坚守优质且稳定的默认基础(不变)，并在需要时充分开放自定义的灵活度(多变)，这是 Semi Design 独特的，并将一直遵循的设计原则。

主题化 —— 品牌一键定制

Semi 是如何在连贯统一的基础上，做到灵活多变的？答案是强大的主题化方案。

通过对数千个设计变量 (Design Token) 的分层和梳理，设计师和开发者可在全局、乃至组件级别，对表现层进行深度定制 —— 即使你不了解 CSS，也可以通过主题编辑器(DSM)，打造符合业务和品牌多样化视觉需求的风格。开发者则可通过 npm 包一键发布并替换，轻松定制，易于管理。

在今年内，我们还将实现主题从线上到设计工具的实时同步 —— 在提升效率的同时，进一步保证设计和研发的持续对齐，降低产研间的沟通成本。

深色模式

为了兼容更多用户群体在不同生产环境下的使用偏好，作为浅色模式的补充，Semi Design 的任意主题均自动支持深色模式，并能在应用运行时动态切换。

不仅如此，Semi 并且允许用户在应用内局部区域开启深色模式，以兼容 SDK 或插件型产品的使用场景。通过进阶设置，用户也可以实现应用和系统主题自动保持一致。

同时，为了进一步提升开发体验，我们也提供了将未规范化的存量旧工程一键兼容到 Semi 暗色模式的 cli 工具，通过自动化的方式规避迁移成本。

国际化 —— 多元兼容

在字节跳动全球化业务实践下，Semi Design 经过 30+ 版本迭代，已具备完善的国际化特性 —— 覆盖简/繁体中文，英语、日语、韩语、葡萄牙语等 10+ 语言，日期时间组件提供全球时区支持，全部组件可自动适配阿拉伯文 RTL 布局。

同时，随业务的拓展，也不断有海外地区的开发者开始使用 Semi 构建应用。为了更好地支持这部分用户的诉求，我们也对站点和文档进行了双语适配，以保证开发无障碍。

架构

Semi Design 采用了一套跨前端框架技术方案，F/A 分层设计，将每个组件的 JavaScript 拆分为两部分：Foundation 和 Adapter，这使得我们可以通过仅重新实现适配器来跨框架重用 Foundation 代码，例如 React、Vue、Angular、Svelte 或者 WebComponent，快速打造不同平台上的通用组件库。

Foundation

Foundation 包含最能代表 Semi Design 组件交互的业务逻辑，不实际引用任何 DOM 元素。Foundation 为任何需要 DOM 操作的逻辑委派 Adapter 方法。

Adapter

Adapter 是一个接口，具有 Foundation 实现 Semi Design 业务逻辑所需的所有方法，并负责具体渲染的 HTML 层。适配器可以有许多实现，允许与不同框架的互操作性。

目前，我们实现了 Adapter 的 React 版本，你可以直接通过引入 semi-ui 来使用我们的React组件。

应用

平台应用层面，Semi Design 在支持字节跳动多个核心业务的平台引擎，部分已达万级 DAU；对外，同样已有多款经内部验证的产品，通过飞书、火山引擎实现商业化。

产品形态层面，随着业务高速发展，Semi 所支持的品类也愈发多元。除了常规的 CMS/ERP 系统，也出现了云计算，音视频，设计工具及插件，消息 IM 等垂类；并且，在此基础上孵化了直播中台，客服平台等高质量、具有显著业务特性的的分支组件库。

抖音创作服务平台

抖音官方面向创作者的一站式服务平台。集发布作品、管理帐号、分析数据、舆情监控等功能为一体，协助各类创作者/机构/自媒体/大 V 进行便捷高效的内容管理，并提供更多的创作可能性。

Bytedesk 智能客服

支撑字节跳动全体系多产品线的客服中台，正在高速成长为提供极致体验的全场景客服系统。目前，已接入抖音、今日头条、西瓜视频等多业务，覆盖内容、交易、医疗、广告等多场景，为业务方提供低成本、高效率、智能化的服务解决方案，致力于打造属于字节的服务品牌。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

发表于 2021-10-29 09:27
阅读 ( 407 )
分类：行业资讯

抖音系企业应用设计系统 Semi Design 开源啦

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »