结合组件化和Libraries功能对视觉设计流程的优化

产品视觉设计大致是由80%产品界面和20%运营设计组成。80%的产品设计,属于理性,有规律的部分;而20%运营设计,属于感性,表达创意的部分。本文想讨论的就是这80%理性的产品设计。面对产品不断迭代,产品框架和结构不断复杂化,视觉设计师如何对工作流程反思和优化,从而实现干得更少,做得更多的目的,做一个「高效」但偷懒的设计师。


 

设计语言不统一,组件运用不规范等情况,大部分互联网产品都存在,原因种种。而作为产品视觉设计师,观其表更应审其内。了解产品逻辑,理解交互思维,将视觉相似、功能相近(或其他可界定维度)模块整合,统一标准。如此既能保证产品功能的完整,又能保证控件统一,视觉可控。


 

借着起点读书 APP 改版的契机,我们重新梳理了全局 UI 控件,以及设计师之间,设计和开发之间的合作方式。通过几个月的实践,有了一些收获和心得,沉淀总结出来以供分享和交流。


 

关键词:组件化 Libraries 功能。


 

所谓组件化是将产品设计中重复出现的控件整理归类,究其共性,以最小颗粒重组,通过整齐排布,并最终以准确易懂的语言来命名;使用过程中既可准确定位,又方便维护和修改,这就是组件化。而 Libraries 功能是 Sketch 中的多人协作的组件管理系统了解了这两个概念,开启本文正篇。因为产品视觉设计师工作性质问题,此流程优化涉及到两个角色,设计师与开发。


 

一、设计师与设计师


 

以往设计稿维护


 

以往设计师各自独立维护设计稿,每个人的习惯各不相同,大致两类:

1. 独立维护好几份设计文件(按版本或板块分割文件),没有完整的组件库。

2. 拥有一份文件,各个板块与不同版本堆积在此文件中,拥有独立的组件库。


 

以往合作流程

结合组件化和Libraries功能对视觉设计流程的优化

请随我们一起走一遍以往的合作流程:


1. 设计师甲对视觉稿A的某个共用元素进行改动
2. 口头或源文件传播形式告知设计师乙
3. 设计师乙根据最新改动手动刷一遍设计稿B
4. 设计改动是频繁的,设计师乙也有改动影响到设计师甲
5. 按照1、2、3的流程再走一遍,如此反反复复

 

这样的合作模式既浪费时间,也在消磨设计师追求完美的意识。我们也尝试过用很多流程、工具来优化这个合作的工作流,包括一些 Sketch 插件,但结果不甚理想。而如果设计师在这种损耗中放弃抵抗,最后的结果就是每个人负责的板块视觉风格迥异,甚至连基本组件也不统一。


 

现在设计稿维护

结合组件化和Libraries功能对视觉设计流程的优化

Sketch 的 Libraries 功能为这个问题带来了转机,这个功能,我们将设计稿与组件库分开,组件库单独存放在云端,设计稿存放云端或本地;设计稿的所有控件调用都从组件库抓取、同步,也可以不断向下细分多稿并存并相互影响。


 

现在合作流程


 

1. 更改组件的操作

 

a. 设计师甲更改了组件库中的某个组件
b. 组件库保存改动,并实时将改动自动同步到云端
c. 设计师乙的设计稿收到云端同步的提示,并根据提示点击同步,乙的文件即完成同步

结合组件化和Libraries功能对视觉设计流程的优化

2. 添加组件的操作

 

a. 设计师甲在组件库中添加了部分组件
b. 组件库保存改动,并实时将改动自动同步到云端
c. 设计师乙需要用到甲新建的控件时去云端拉取即可,不产生重复劳动


 

3. 自动化规范的生成

 

因为个人习惯,通常项目都会维护一套规范文件,不过是在项目定稿阶段,但是随着项目周期的拉长,以及不断的调整变动,规范文件会版本过低失去其本身价值。组件库的应用对这一现状有了极大的改观。具体步骤如下:

 



本文标题:结合组件化和Libraries功能对视觉设计流程的优化
本文链接:https://www.zjnewsw.cn/zbsj/0211X42019884.html