在参与了「美餐客户端」这条产品线一段时间后, 我和设计师同事在既有设计工作流程中发现一些问题, 通过大家的合作, 我们对既有设计工作流进行了设计以使其更适应当前「美餐客户端」产品开发的现状.
问题和目标
我们通过对之前工作的总结分析得出目前「美餐客户端」的设计要面对的客观条件:
来自间接相关方需求的实施优先级高于直接相关方需求
会出现对客户端结构, 界面, 功能设计造成较大影响的要求(内容和频率可能无法预料)
要同时对 iOS,Android,web 三端进行体验较为统一的设计
产品体量和复杂度随着迭代进行不断增大
根据以上分析, 结合目前「美餐客户端」产品线的既有设计流程现状, 我们面临以下问题(和具体体现):
设计的可扩展性弱(在设计中对已有功能, 结构进行扩展或修改的工作量大且复杂)
设计稿管理混乱(设计搞文件混乱冗余, 同步性差)
设计师责任分工混乱(协同工作效率低, 设计来源不易追溯)
设计交付的质量不佳(向下游传达设计意图不清, 规范性差)
设计师冗余劳动多(工作过程中重复劳动, 低效机械操作多)
为了解决上述问题, 我和同事从以下几方面对设计工作流程进行了优化设计.
构建设计模式
对一个系统进行设计, 主要工作就都是构建各种形式的模式. 这些模式, 将整个系统分解为各个层级关系的单元, 对这些单元进行设计和组合又扩展了整个系统. 具体到「美餐客户端」, 我和其他设计同事一起建立了组件系统.
采用组件系统, 我们达到了如下好处:
在设计表现层面有利于达成产品 (内部, 外部) 的视觉, 交互, 概念的一致性
直接对组件系统进行修改和更新来实现需求, 使得对已有设计的扩展变得容易且高效;
依据组件系统来设计新功能, 界面, 有效避免重复劳动的同时也保证了设计质量的下限;
组件系统文件保持及时更新和唯一性(使用 SketchLibrary 功能), 被所有设计稿的引用, 减少了设计稿的冗余;
组件作为规范化的可复用元素, 提高了设计交付开发的沟通效率和质量;
设计师有更多精力关注于产品结构, 多端差异等方面, 而非重复设计不重要的细节元素;
这样就使问题 1,2,4,5 得到了部分解决.
在迭代中管理设计稿
针对设计稿管理混乱, 设计师责任分工混乱的问题. 我和开发同事合作, 在所在团队中推广使用 Git 对设计稿进行版本管理, 其中包括管理设计师内部共享的设计稿源文件和管理设计交付物.
经过实际使用, 其具有以下优点:
能够准确记录每次更新对各设计稿的修改, 方便所有人在需要的时候获取到指定版本的指定设计稿;
主干分枝功能可以在频繁的迭代中有效地管理每次设计决策对应的修改, 并且始终保持每个成员可接触的设计稿都处在最新状态, 做到信息源的唯一性;
设计师被要求提交设计稿修改时附带更新说明, 这样做一方面帮助设计师和开发同事快速了解每次设计稿更新的内容, 降低了产生遗漏或误解的几率; 另一方面也使设计师对设计稿的责任划分更明确.
改进工具: 自动化
在工作中我发现设计师们都会有很多的重复劳动和低效机械性操作. 重复劳动如对已有元素的重复设计可通过组件系统来解决, 低效机械性操作则适合通过工具的自动化来解决.
根据美餐采用的设计流程, 我们设计师需要经常在 Sketch 中绘制较多的界面流程图, 但是 Sketch 本身逻辑导致相关操作比较繁琐. 因此我自己开发了一款插件 (Get out https://duanjun.net/side/getout ) 来自动化繁琐操作以提升效率, 其他设计同事使用后也表示了喜爱.
设计交付及测试
针对设计交付质量不高的问题, 我们通过规范设计交付方式和设计文档来解决. 设计产出物交付的重点是将设计意图准确传达给下游开发同事, 美餐客户端的设计交付主要传达以下 4 个层面的内容:
交付说明: 当次交付的基本信息 (日期, 版本, 对象等) 和内容概述(增删改)
使用流程层面: 页面之间的关系, 流程的各种情况, 分支, 背后逻辑等(通过设计文档 + 流程图 + 交互原型)
页面层面: 页面的组成, 页面所含组件或元素之间的关系, 页面的各种状态, 背后逻辑等(通过设计文档 + 交互原型)
组件层面: 各个组件的视觉样式, 状态, 交互, 背后逻辑等(通过组件系统 + 设计稿)
设计交付后还需要确保开发能准确地实现设计稿, 所以我们规定在开发完成之后设计师应参与测试逐项检验设计的实现程度. 而此时组件系统的一大优点就出现了, 复用的组件的视觉, 基本交互等规范内容一般不需要花费太多精力去检查和返工, 因此工作效率得以提高.
总结
对「美餐客户端」设计工作流的优化设计, 我们通过分析发现问题, 目的导向利用可用资源解决了问题. 不过现在反思, 有些问题在当时条件下提出的解决方案目前已有了更成熟的替代者(如设计稿的版本管理有了 abstract 这种现成的服务). 不过也说明我们解决的思路是可取的.
来源: https://juejin.im/post/5c9ba5e8f265da61246d7307