凹凸技术揭秘 · 夸克设计资产 · 打造全矩阵优质物料

凹凸技术揭秘 · 夸克设计资产 · 打造全矩阵优质物料

1、诞生背景

近几年围绕业务中台化的场景,涌现了很多中台,有面向开发者的,有面向产品的,有面向运营团队的,但是却缺少一个可以提供给设计师协作的中台,设计师与开发、交互的协作仍处于源文件交换的原始刀耕火种时代。

上下游之间的合作成本高,没有统一的规范性。往往一个视觉稿会经历反反复复的改版,文件的传输只能使用网盘管理,没有一个统一存储和管理的平台。项目团队的设计规范落地效果不佳,公共的设计素材共享不便,同时各个团队的设计资产无法共享流通,资源无法进行整合,甚至存在重复设计等问题。

我们通过分析当前的痛点,参照现有的协作流程以及未来的发展趋势,是否可以有一套供各个角色都能使用的设计物料平台呢?按照这个思路,我们开发出了一套京东自己的设计资产管理平台,命名它为「夸克」。夸克在物理学上是构成物质的基本粒子,夸克相互结合组成万物,我们是用夸克来比喻那些构成组件、模块、页面、网站的所有物料,是我们星辰大海中的重要基石。

2、平台介绍

夸克平台是数字化设计资产管理平台,集物料收集、拓展、外接与输出能力于一身,内容涵盖组件、模板、图标、字体、动效、图片、素材、VI等。

平台介绍

夸克平台目前提供 Sketch 插件、WEB 端和 CLI 端三种形式进行物料收集与共享,覆盖产品、设计、研发、运营和商家等用户人群。

夸克平台为每个项目设立物料管理空间,各个团队持续丰富夸克平台各类型设计资产,统一在线管理和协作,最大化提升业务整体设计效率,从而达到增效降本的目标。

3、平台能力 3.1 DSM能力

近几年设计系统作为重要的设计资产及解决方案,其被重视的程度与日俱增。由于原始的设计方法已经无法满足爆发式增长的设计需求,设计师开始寻求工程化的解决方案。于是引入原子设计理论(Atomic Design)解决问题,即使用一种有条理创建模式库的方法,结合软件开发的组件化思想,从最原始的原子出发,逐层构筑更高级别的组织,很好地解决了模块化和规模化的问题,这就是设计系统的前身。

DSM能力

3.1.1 什么是设计系统

设计系统是由设计语言和模式库构成,在设计原则的指导下,通过统一的协作语言和科学的管理方法组织起来,并创建体验一致的用户界面的系统。

设计语言: 设计系统的基础,与品牌识别和情感相关,包含颜色、字体、图标等基础设计原子;

模式库: 一系列由设计原子组成的可复用的组件,模板等。

设计系统

3.1.2 DSM 资产库

在设计系统中,设计语言和模式库就好比「原子设计理论」中的原子、分子、组织、模板、页面,他们是保证团队协作一致性的基础,而设计规范更像是一份说明文档,指导设计师在设计过程中遵循一定的规则。

夸克作为数字化的设计资产平台,需要解决设计系统数字化的问题。

那设计系统中,有哪些可被数字化存储的物料资产呢?结合目前流行的 Sketch 设计软件来看,我们可以给设计语言和模板库做个映射,看看 Sketch 原生支持哪些设计系统中的原子物料。

Sketch 之所以能打败 PhotoShop 成为最流行的 UI 设计工具之一,是因为软件大量运用了「复用」的工程化思想解决设计问题,如 Symbols, TextStyle, LayerStyle, SharedStyles 等

Symbol:类似于工程中的代码组件,并提供组件嵌套、实例化等开发流程中常见的操作;

Color:在 Sketch 中不单单是颜色的色值,还包含渐变色及图片填充;

TextStyle:针对文本图层的共享样式,类似于 CSS 中的公共 SCSS Font Mixins;

LayerStyle:针对容器图层的共享样式,包含 Background、BoxShadow、BorderRadius 信息。

3.1.3 如何沉淀 DSM 数字化资产

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfgsf.html