苍穹设计系统KDesign： https://kingdee.design

几年前，资深交互设计师 WingST在写《交互思维》一书的时候，提到了设计规范的意义，它最初是为了产品设计团队内统一设计标准，输出一致性很好的界面，提升效率，后来 iOS 和 Android 上线，苹果和谷歌的设计团队为了让第三方的应用开发厂商也能遵守他们的设计原则，所以推出了各自的设计规范，最出名的就是《苹果的人机交互指南》。后来，大家发现这些大公司推出的设计系统非常值得学习，开始成为了各平台设计师入行必备的第一课。

而金蝶也正式将苍穹设计系统（KDesign）开源，通过沉淀金蝶三十年的企业管理软件服务设计经验，不仅可以作为 ToB 端设计师的入门参考，其中高度成熟的设计组件、前端组件，也可以节省很多设计和开发的复用工作量，提升效率。

那么，究竟什么是苍穹设计系统KDesign？其具备哪些亮点特性？本文为你揭晓答案。

苍穹设计系统KDesign网址： https://kingdee.design

一、为 To B 而生的开源设计系统

KDesign——Kingdee Design 是一套企业级产品设计系统。源于金蝶云人人、生态、体验的产品设计理念，以角色化、一致化、高效化、愉悦化为设计原则，使用原子设计（Atomic Design）作为模块化设计理论。包括设计规范，设计资源，设计工具，前端组件库等内容。

KDesign 作为金蝶云.苍穹的有机组成部分，支撑了包括金蝶云.星瀚、金蝶云.星空、金蝶云.星辰及生态伙伴系列产品。它不仅包含了常规设计系统必备的设计原则、设计规范，提供了大量的开源设计素材资源可供下载，还包括 ToB 端常见的各类典型页面（还是 PC、移动端都有的），很适合 ToB 设计师学习借鉴二、设计原则

KDesign 的设计原则基于以下四点：基于角色、一致的、高效的、愉悦的。可以有效提升产品体验，辅助产品设计团队达成业务目标。

重点讲一下基于角色，B 端的目标用户主要分为以下四类：

• ·事务型：从事录入类的工作的一线员工。
• ·审批型：对事务型角色录入的内容进行审批。
• ·分析型：关注业务数据，一般是业务部门主管/后台运营。
• ·决策型：通过数据及时洞察市场变化和资源动态，一般是企业高管。

KDesign 的设计系统，从组件到典型页面都是为他们服务的，可以快速基于对应用户的使用场景，组合成相应的功能页面，提升设计效率。

在设计原则这里，我觉得 KDesign 有几个地方设计得挺有特色的。

1）色彩

为了解决不同企业品牌所预设的基础色彩，系统提供了 12 个产品中的常用颜色，通过 HSB 参数调整出对应的衍生色，直接开箱即用。除了上面的 12 基础色选择，你还可以自定义拓展使用，默认品牌主色为6号色，输入你的品牌色值后，系统自动会生成一套符合你产品的品牌色板，并将其应用到产品UI元素里，达到一键换色的配置功能，可谓是非常方便了

2）阴影

系统提供了低、中、高三种阴影值，来区分内容层级。低层级阴影适合强化静态元素，如卡片类。中层级阴影适合展开的浮层，如下拉浮层。高层级阴影适合相对独立的内容被弹出时，如弹窗。

3）字体

每个设计系统都会涉及到字体规范，KDesign 的字体规范我觉得做得挺标准挺好的，如果你也有类似的规范设计需求，可以参考。

文字的行高

全平台默认的最佳字体建议，包含中文和西文字体。各端默认字体建议这个表格分类就挺详细挺好的。                                                 PC 常用字体参数对照表

4）图标与插画

规范化的图标应该如何设计？

为了保证图标的精致度和平衡性，默认在 32x32px 的像素网格上进行绘制。 实际使用比例一般为正方形，可根据需要进行尺寸选择，建议尺寸为 4 的倍数。KDesign 还提供了 1500+ 的图标资源库，支持 SVG、PNG、字体格式和 React、Vue 前端代码复制，可以一键下载完整包。B 端的插画需要经常用到人物，他们把人物拆分成组件并提供了动作骨架，可以根据需要调整人物的动作和服饰，快速制作角色插画。同时也提供了 50+ 的空状态、提示类的各种提示类插画供下载。5）消息与反馈

当用户与系统交互的时候，系统需要及时地给到反馈，不同的反馈需要用不同的样式，新手交互设计师经常会分不清楚，KDesign 的这份反馈规范可以很好地提供参考。

• 场景分类：信息提示、过程反馈、结果反馈；
• 重要程度：消息或反馈信息对于用户的重要程度；
• 紧急程度：系统希望反馈信息被用户注意到或进行处理的紧急程度。

在选择反馈时，先确定场景分类，然后再结合两个量化指标（重要程度和紧急程度）选择具体的反馈方式。6）国际化

经常会遇到小伙伴在读者群里提问，要如何做好国际化的设计，有什么参考，你看这不就有了。

在字符长度、词汇分界、字体行高、阅读顺序上，各地语言文字存在较大的差异，是国际化设计主要的考量因素。

其中，中文和外文的字符长度区别是最基础、最常见的问题，拉丁文的长度平均在中文的 2 倍以上，不注意的话就会导致可用性不达标。

以英文字符为例，设计空间的时候要基于常见字符串预留好足够的空间变化。同时，KDesign 还提供了很多国际化设计策略建议，比如纵向菜单的宽度预留，需要用文字最多的那行去自适应，感兴趣的同学可以在文末扫码跳转官网参考学习。

三、组件级的设计规范

KDesign 是目前市面上唯一开放了组件级别设计规范的设计系统，并且包含了PC 端、移动端，还有专门的可视化组件，可以在这里学习到很多设计细节和案例。                                                                   可视化组件

PC端组件图表组件库

其他设计系统，基本不会介绍到组件这个级别，这里却能看到从基础组件（按钮、分页、滚动条）、导航（页签、导航菜单、下拉菜单）、表单（单选、多选、输入框、选择器）等等的细致分类和介绍，真的可以学到不少东西，设计开发在制作的时候也可以少费很多心思。

                                                            按钮组件介绍

它也是设计和前端一致的用户界面资源，设计人员可以专注于用户体验（交互和视觉），开发人员可以专注于功能模块的程序逻辑。这次的介绍就到这里，感兴趣的同学，可以收藏下面的网址，PC 端访问，也可以长按下方的二维码，访问我们的移动端官网，或者加入微信交流群，获得更多指引和帮助。

苍穹设计系统KDesign网址： https://kingdee.design欢迎扫码访问KDesign移动官网

欢迎微信扫码加入KDesign交流群

Powered by Froala Editor