最近,Douyin团队正式开放其企业应用程序设计系统半设计。
半设计系统是由Douyin的前端团队设计,开发和维护的设计系统。作为全面,易于使用和高质量的现代企业 - 级别应用程序UI解决方案,它将从复杂的场景中进行完善在各种业务线路中,可以为近1,000个平台产品提供服务,并为内部和外部提供100,000多种用户。
经过将近两年的迭代,经过各种不同类型的业务实施验证,半设计已成为跨部门的基础架构,并在组件库周围形成了丰富的工具链和生态。为更多的用户提供服务,并进一步利用使用情况,我们决定以社区的力量不断提高和扩大容量界限。
SEMI主要用于前缀或短语中,表明“半” - 就像完整的企业应用程序一样,通常由业务逻辑和前端接口组成。半设计希望成为这一必不可少的一半,为企业应用程序应用程序的前端提供坚实和高质量的质量。
我们认为,设计系统的真正价值是降低前端的施工成本,同时提供出色的设计和工程标准,以完全释放设计师和开发人员的生产率,从而不断孵化星星产品。
近年来,越来越多的SaaS产品(例如Slack,Intion,Figma)开始依靠出色的用户体验来促进增长。判断该产品的标准已逐渐从购买者转移到最终用户;产品体验的好与坏将直接影响用户是否继续使用,并且B端产品的体验设计变得越来越重要。
半设计始终致力于改善企业应用程序的体验。通过精炼简单,轻巧,现代的设计风格,细致地抛光原子组件的相互作用,并在大量的字节击败业务场景中进行迭代,它促成了高高的 -质量默认基础 - 它将确保保证半色的企业应用程序产品,其出生具有连贯的“语言”,并且显然比旧系统更好的质量基线。
此外,良好的设计系统必须“活着”,并且需要随着业务的增长而开发和更新。因此,Semi从未尝试过限制用户,巩固SO所标记的“统一标准”,而是在默认情况下进行限制。基础,完全执行模块解决方案,并打开自定义功能,以促进用户进行次要削减和自定义。形态产品的外国资产。
遵守高质量和稳定默认值的默认基础(不变),并在需要时完全打开灵活性(可变)。这是独特的半设计,将始终遵循设计原则。
半决赛如何在连贯的统一基础上进行灵活和变化?答案是一个有力的主题计划。
通过对数千个设计变量(设计令牌)进行分层和梳理,设计师和开发人员可以在全球甚至组件级别上深入自定义性能层 - 即使您不了解CSS,也可以通过主题使用主题编辑器编辑(DSM)创建一种满足业务和品牌视觉多样性需求的样式。开发人员可以通过一个按钮NPM软件包发布和替换,易于自定义且易于管理。
您可以在不同的品牌场景(例如不同品牌场景中的杜林,庇护,飞行和火山发动机)等不同品牌场景中查看官方示例主题。
在今年,我们还将意识到主题从在线到设计工具的真实时间同步 - 虽然提高效率,但我们将进一步确保设计和研发的持续保持一致,并降低生产和研究中的沟通成本。
为了在不同的生产环境中组成更多用户组的使用,作为浅色模式的补充,半设计的任意主题会自动支持黑暗模式,并且可以在应用程序运行时动态切换。
不仅如此,SEMI还允许用户在应用程序中的局部区域打开一个暗模式,以与SDK或插件兼容。通过高级设置,用户还可以自动一致的应用程序和系统主题。
同时,为了进一步增强开发体验,我们还提供了一个CLI工具,该工具将令人难以置信的旧项目与半暗模式进行比较,以避免通过自动化方式迁移成本。
在击败全球业务的字节的实践下,半设计通过30多个版本进行了迭代,该版本具有完整的国际特征 - 覆盖简单/传统的中文,10多种语言,例如英语,日语,韩语,葡萄牙语等。提供提供的global时区支持,所有组件都可以自动适应阿拉伯RTL布局。
同时,随着业务的扩大,海外地区的开发人员继续使用半构建应用程序。为了更好地支持用户的需求,我们还对网站和文档进行了双语适应性,以确保无障碍的发展。
半设计使用一组跨端框架技术解决方案。f/a旨在将每个组件的JavaScript分为两个部分:基础和适配器,例如React,Vue,Angular,Svelte或WebComponent在不同平台上快速创建一个通用组件库。
基金会包含最能代表半设计组件相互作用的业务逻辑,并且实际上并未引用任何DOM元素。Foundation为任何需要DOM操作的逻辑任命适配器方法。
适配器是一个接口,具有实现半设计业务逻辑所需的所有方法,并且负责特定的渲染HTML层。该适配器可以具有许多实现,从而可以与不同的框架进行互操作性。
目前,我们已经实施了适配器的React版本。您可以通过引入semi-ui直接使用我们的React组件。如果您对Semi的体系结构感兴趣,则可以进一步咨询本文bytedance.feishu.cn/docs/doccnt ...
在平台应用程序级别,半设计是一种平台引擎,支持字节击败多个核心业务,其中一些已达到10,000个DAU。在外面,还有许多内部经过验证的产品通过飞行书籍和火山引擎实现商业化。
在产品表格级别,随着业务的迅速发展,由半级支持的类别变得越来越多样化。除了传统的CMS/ERP系统外,还有诸如云计算,音频和视频之类的垂直类别,设计工具和插件以及消息IM;在此基础上,分支组件库。
Douyin官员是创建者的一个站点平台。它可以帮助各种创建者/机构/机构/自我媒体/BIG V来方便,有效的内容管理,并提供更具创造力的可能性。
支持字节击败所有多产品线的客户服务正在以高速增长,以提供提供最终体验的完整尺度客户服务系统。目前,它已连接到Douyin,当今的头条新闻,WaterMelon Videosos以及其他业务,涵盖了多种情况,例如内容,交易,医疗保健,广告等,以为业务提供低成本,高效率和智能服务解决方案。
由字节活动建立的基石,依靠高效和专业站的建筑工具以及灵活而丰富的营销游戏,在整个营销活动的完整链接系统中构建产品能力,并致力于建立全球影响力营销自动化平台。
BYTE内10,000个角色量表项目的管理实践,并有效地驱动了1亿级用户产品。通过支持高度配置,差异化的管理流程和标准,自动化机制,驱动不同的结构团队来执行完整的结构团队过程跟踪产品的管理。
视频创建产业链中的所有参与者都提供诸如材料共享,合作和交换以及商业货币化之类的服务。该平台构建了材料库(模板,道具,声音效果,花卉特征,特殊效果等),并在同一时间为企业/广告商提供了多元化的广告内容表格,并具有更丰富的商业场景。
实时广播机构进入杜林和西瓜的唯一渠道可以帮助创建者和机构成长,并建立一个实时广播生态学以互助。数据分析有助于机构的精致运营;机构1V1独家操作对接和其他实时创建服务。
开源是促进科学和技术行业发展的主要动机。在实施半设计的过程中,我们可以通过一系列开源工具库来开发。在设计技术解决方案时,我们将继续从开源社区的各种出色实践中吸收灵感。
在过去的两年中,我们投入了大量精力来优化内部设计师和开发人员中内部设计师和开发人员的体验,不断改进和抛光半决赛,并继续获得积极的反馈。我们相信,与其他竞争性产品相比,,Semi Design逐渐在提高产品质量和开发效率方面逐渐形成了优势 - 我们希望将这些优势带给行业,为更多用户提供服务,挖掘更多使用场景,进一步扩大Semi's Whate Whate Whate Whate边界。
开源的半决赛收益,并希望回馈开源。我们希望通过社区的力量继续改善它。
非常欢迎社区开发人员参加CO -sonstruction。有关详细信息,请参阅半设计施工指南:github.com/douyinfe/se ...
在明年,半设计团队将继续改善和优化质量,并将为包括无限的社区用户开放更多的内部工具链和资源:
在过去的一年中,字节内部各种业务线团队的用户具有独立设计和开发的UI材料,包括表格,多媒体,用户指导,消息通知,图表,图表和其他类型的UI材料,围绕Semi的基本组件,并在材料市场上发布.Semi用户可以根据产品需求找到材料和重用,从而大大节省了开发成本。同时,还积累和传播了高质量的UI资源。
材料社区将很快与您会面。在那个时候,我们将共同开放高质量材料的来源,并为发布材料发布材料发布过程提供开发准则。
长期以来,半团队一直试图通过各种自动化方法,帮助团队设计师和研发改进,甚至重新定义传统的工作方法。最终页面还原“有时间 - 耗费和高沟通成本,这一直是我们注意力的重点。
目前,我们已经意识到了一个简单的静态页面设计手稿翻译,并在场景和其他场景中有效验证 - 实际上,Semi.design的官方网站是在此解决方案的帮助下开发和恢复的。
将来,对代码方案的设计将通过代码扫描完成组件级别的识别和翻译。在同一时间,结合团队从大量业务场景设置的页面模板,用户将能够快速完成前端页面的克隆和结构恢复的成本非常低。
半总是关注Web可访问性。目前,我们可以从语义标签,颜色磁盘算法和文本感知中获得一部分无障碍支持,但我们认为仍然有很大的改进空间。我们将继续关注并提高可操作性以及对组件的感知。它为基于鼠标的操作的操作提供了更方便的键盘交互,并提供了更完整的WAI-RIA支持。
高可伸缩性用作半半的核心设计原理,并且通过半符合粉底/适配器架构设计和样式文件的分层,代码架构设计,API设计和样式层抽象,SEMI非常容易在2.0版中迁移到其他前端框架。我们希望在多帧移民适应过程中,我们仍然可以拥有良好的发展经验和质量保证。
基础层也是基于MIT协议的开源。我们将始终在将来的迭代迭代中维护其代码实施的框架。如果您希望将半设计带入更多平台框架,我们欢迎您直接重复使用它。
我们的团队专注于当前阶段的React系统,但是WebComponent也是我们关注的方向之一。未来的时机是适当的,我们将进行更多尝试,因此请继续关注。
我们是Douyin Front -End的技术团队,为Douyin和Byte提供服务,以击败多个产品线,专注于构建前端基础架构,并积极探索Community Technology.douyinfe.com/
MED属于Byte Beating互操作性社区。它致力于为公司的多个平台引擎设计简单,严格且可扩展的用户体验。解决问题并改善业务。
作品:dribbble.com/metaenterpr
加入我们(北京):job.toutiao.com/s/dw28neb
加入我们(深圳):job.toutiao.com/s/dw28neb
官方网站:Semi.Design
github仓库:github.com/douyinfe/se ...
figma uikit:www.figma.com/@semi