使用 React-Sketchapp 管理你的设计资产
在制定设计规范时,尝试采用了 Airbnb 开发的 react-sketchapp 工具。这款创新性的跨界工具提出了一种全新的处理方式,并在特定场景下展现出了独特的应用价值。
一、React - SketchApp是什么
React - SketchApp 是一个开源库,为设计系统量身定制。它通过将 React 元素渲染到 Sketch 来连接设计和开发之间的鸿沟。
这个神奇的开源库给设计师们提供了一个全新的设计工作流程:在时下最流行的 React 前端框架下用代码进行设计,并实时渲染到 Sketch 中审阅设计。细思恐极,在设计圈大红大紫的 Sketch 虽说占了开源库的一半名字,但其实担当的只是一个浏览器的角色。真正留下的设计文档则成了代码。
二、为什么用起代码做设计
你一定在想,为什么好好的,突然让所有设计师用起代码做设计了?为啥又要用前段框架了?这成本对我们来说有多高?听听 Airbnb 怎么说。
一个设计系统可以让设计师复用样式、组件、图形,这可以给设计师更多的时间去进行更高层次的思考。同时,一个好的设计系统也让工程师自信地添加新功能,而不用去看密密麻麻的标注线,痛苦地和设计师来回调整像素。而同样的,一个完善的设计系统一般都是非常庞大而复杂的,想有序地构建和发展这个系统,本身就有着巨大的工作量。
三、核心优势
剔除 Airbnb,在仔细看了相关文档和项目样例后,总结出了一下这个开源工具在构建设计系统时的核心优势:
- 稳定的文档:用成熟的前端框架作为设计系统基础,可以保证整个设计系统长期的可用性。
- 数据的清晰准确:以代码为描述设计的形式,杜绝了基于图片描述设计时容易产生的数据不稳定。
- 可进行响应式设计:比起 Sketch 略显简陋的 Resizing,React 提供了功能完备的布局系统,可以在设计端进行准确完整的响应式设计。
- 版本管理:避开了基于图片设计的版本管理难点,git 等工具组织设计系统,让系统更实时、可考。
- 跨平台开发:因为和 ReactNative 采用同一套布局系统,配合 ReactNative 可以很好地进行跨平台工作。
- 引入真实数据 & API:可以和任何前端开发一样引入真实的数据和 API 实现例如、等有趣的功能。
以上这些优势,确实可以切中很多团队在构建大型设计系统时的痛点。
相比之下 React - SketchApp 在这些问题下,跳出了原有的思考方式,用超前全新的方案解决目前方案的痛点。
四、使用React-Sketchapp制作styleguide模板
说了这么多概念上的东西,大家一定很期待从实用角度看看它到底是怎么工作的,接下来就让我们对 React - SketchApp 做一个初步的体验。对它同样感兴趣的也可以根据下面步骤一起尝试。
1、code-sketch-resource 工程项目简介
使用React-Sketchapp制作调色板和文字模板,效果如下:
1)调色板
2)字体
2、调色板与文字原理
1)调色板
调色板是一组规律的16进制码。可以将色彩体系解读成两个层面:系统级色彩体系和产品级色彩体系。系统级色彩体系主要定义了中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中,基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。这里选用的是Ant Design的色彩系统。
Ant Design 的基础色板共计 120 个颜色,包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。
色板生成算法 主要代码:源代码:ant-design-colors
function main(color, index) { var isLight = index <= 6; var hsv = tinycolor(color).toHsv(); var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1; // i 为index与6的相对距离 console.log(hsv) return tinycolor({ h: getHue(hsv, i, isLight),// getHue 获取色相渐变 s: getSaturation(hsv, i, isLight),// getSaturation 获取饱和度渐变 v: getValue(hsv, i, isLight),// getValue 获取明度渐变 }).toHexString(); };
根据颜色值、色号与主色色号(6)差的绝对值、减淡/加深这三个参数获取渐变后的色值,其中 HSV 的三个值分别经过了渐变调整:
“Hue”(色相)的渐变核心代码如上,首先判断冷暖色调;
“Saturation”饱和度的渐变核心代码如上,对于减淡与加深的饱和度进行了不同的处理,其中减淡递减的值更大,说明减淡的过程中饱和度迅速下降,而由于主色的饱和度一般较高,因此加深的时候饱和度不必增张过快,尤其是最深的颜色,进行了特殊处理。
“Value”明度的渐变核心代码如上,对于减淡与加深的明度进行了不同的处理,其中加深递减的值更大,说明加深的过程中明度迅速下降,这是由于主色的明度一般较高,因此减淡的时候明度不宜增长过多。
综合来看 3.x 色板生成算法的实现可以看到,主色的选取很重要,一般主色选取饱和度较高、明度较高的颜色才能更好地匹配这个色板生成算法。
2)字体
字体是体系化界面设计中最基本的构成之一。我们的用户通过文本来理解内容和完成工作,科学的字体系统将大大提升用户的阅读体验及工作效率。Ant Design 字体方案,是基于『动态秩序』的设计原则,结合了自然对数以及音律的规则得出。 在中后台视觉体系中定义字体系统,建议从下面五个方面出发:
字体家族
主字体
字阶与行高
字重
字体颜色
3、制作原理
调用的API,在编辑器中通过React代码绘制SketchUI规范。
具体的,通过调用Ant Design 的色板生成算法ant-design-colors产生出基础色板和中性色板的颜色值,然后使用React-Sketchapp基础组件编写代码渲染到Sketch的当前页面中。字体模板亦是如此。
具体步骤如下:
1)、确保,本地安装Node,git。
2)、本地Clone code_sketch_resource 工程项目
code_sketch_resource项目依据React-Sketchapp官方项目的styleguide例子基本框架。
git clone https://github.com/jingwhale/code_sketch_resource
npm install
npm run render
4、关键代码分析
1)获取调色板色值:
首先,依赖ant-design-colors组件库
$ npm install @ant-design/colors --save
其次,获取调色板色值
import { generate, presetPalettes } from '@ant-design/colors'; // Generate color palettes by a given color const colors = generate('#1890ff'); console.log(colors); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766'] console.log(presetPalettes); /* { red: [...], volcano: [...], orange: [...], gold: [...], yellow: [...], lime: [...], green: [...], cyan: [...], blue: [...], geekblue: [...], purple: [...], magenta: [...], } */
2)调色色板UI开发
调色色板UI:父组件Palette_new.js和子组件Swatch_new.js。代码如下:
父组件Palette_new.js
// @flow import * as React from 'react'; import { View,Text} from 'react-sketchapp'; import SwatchN from './Swatch_new'; const SWATCH_WIDTH = 285; type P = { colors: any, }; const PaletteN = ({ name,colors}: P) => ( <View name={name} style={{ width: SWATCH_WIDTH, flexWrap: 'wrap', marginRight: 33, marginBottom: 64 }} > <Text style={{width:SWATCH_WIDTH,textAlign:"center",marginBottom:16}}>{name}</Text> {Object.keys(colors).map(index => ( <SwatchN color={colors[index]} index={+index+1} name={name}/> ))} </View> ); export default PaletteN;
子组件Swatch_new.js
// @flow import * as React from 'react'; import { View,Text} from 'react-sketchapp'; import type { Color } from '../processColor'; const SWATCH_WIDTH = 285; const SWATCH_HEIGHT = 56; type P = { name: string, color: Color, }; const SwatchN = ({ color ,index,name}: P) => ( <View name={name+"-"+index} style={{ width: SWATCH_WIDTH, height: SWATCH_HEIGHT, backgroundColor: color, flexDirection: 'row', }} > <Text style={{width: 128,height: "20",color:index<6?"#000":"#fff",marginLeft:"12",marginTop:"18"}}>{name+"-"+index}</Text> <Text style={{width: 128,height: "20",color:index<6?"#000":"#fff",textAlign:"right",marginTop:"18"}}>{color}</Text> </View> ); export default SwatchN;
3)react-sketchapp主要Components:
更多具体代码请参考code-sketch-resource项目库。
五、总结
1、系统设计资源不仅需要,而且非常需要使用react-sketchapp创建。用代码组织管理系统设计资源Sketch 文件,是最好的方式。系统设计资源包括设计规范,它是有规律且相对固定的思维产物,这非常适合用代码管理。
2、React-sketchapp 只是提供了一个思路,打通程序与设计后,诸如此类的工具还有非常大的空间等待挖掘。
例如:使用代码进行交互设计中页面流程图的绘制,亦或者是使用代码进行自动配色系统。
3、人工智能交互设计?
既然组件是固定的,设计原则是固定的,为什么不能让代码进行交互设计并产出交互稿呢?你只需要输入关键字,依次进行页面布局,功能设计等,偶尔手动调整局部组件位置大小即可。当然这种设想在中后台设计系统中可省去50%-90%的设计和制作原型的时间;前台设计需要更多的用户体验设计,可以先设计初稿,再加强优化用户体验的设计。
附:
https://github.com/jingwhale/code-sketch-resource