|
5年前，我毕业进入一家业内知名的设计外包公司，正式开启了UI设计师的生涯。 在这段经历中，给我的最大感悟就是：千万不能在整个过程中只是被动地画图，然后将成品丢给甲方/程序员就觉得万事大吉。后续的“设计交付 + 走查”缺位，极易造成还原度崩盘。设计稿和成品巨大的反差会加重需求方的不满意，最终导致项目夭折和回款困难。
之后的几年，我又陆续经历了数家中型互联网公司的磨炼后，最终加入了某“福报”大厂。期间我也更看清了高阶设计师贡献输出的主要方式，即：顶级的设计产出 + 无懈可击的交付过程。 很多新人设计师初期会只关注行业趋势和手活的提升，而忽略更偏向团队赋能的“设计交付”（Handoff）环节，但后者其实更能甄别设计师的业务深度。毕竟美上天际的设计图，落地性无法保证，也只是镜花水月，完全无法转化为商业价值。 在下面的部分，我根据自己的经验列出了一些值得关注的交付细节，供各位设计师参考。 产品背景和逻辑交付 很多UI设计师在交付时没有“解说”的概念，认为这属于交互和产品写文档时负责的部分，其实不然。尤其对于一些中小型互联网公司，如果没有配齐产品和交互人员，或者缺乏相应的产品/交互说明产出，UI设计师需要适度补足这些缺失的部分。
具体说来，就是在高保真设计稿中加入少量的说明解释类页面，用最简洁的语句和配图快速传达任务的背景和目标，以便开发人员快速进入状态，准确理解需求，降低在开发过程中掉链子的几率。 部分云交付平台（如摹客、Overflow等）支持上传后快速连接出流程图，在实际工作中非常实用。花上几分钟时间连接好页面间跳转关系并配上说明，开发同学理解起来就舒服多了。
设计稿及图片素材交付 首先，直接说结论：用云平台交付设计稿，别发什么压缩包！ 很多Ps时代的设计师都经历过手动标注的过程，之后又逐渐转为了使用插件（如Sketch Measure）导出的HTML交付包的方式。但：类似Sketch Measure这样的插件大多是个人作品，兼容性和可靠度完全没有保障；此外，导出压缩包的方式面对改稿时的痛苦指数是非常高的。以国外行业轨迹来看，云交付一定是大势所趋。 针对国内设计行业现状，云平台大致有图中的3种选择： 具体使用方式上都大同小异，下载针对自己设计软件的对应插件，然后选择所需的内容上传。成功后直接将链接发给开发工程师即可，但切记还要确认： 设计稿上传时选择了正确的设计倍率（尤其是对于移动端设计）； 所有的素材都已经标记好切图，并能正确地在云平台显示和下载。重要项目最好下载所有素材逐个检查，尤其注意图片质量、文件大小和分辨率； 界面细节是否有重点信息遗漏，可以借助平台自带的一些标尺、卡片、图钉等工具补充说明； 如有复杂交互或动效，考虑补充GIF / 视频供开发人员理解和参考。
“设计倍率”对于很多经验较浅的设计师是个难点，如果没有十足把握可以选择摹客这种自带全平台切换算法的云平台，这样即使选择错误也可以在云平台二次修改。素材检查也是很多设计师都会忽略的点，很多时候就是这一步把关不严，导致最终界面还原度不足。 图标交付 图标具有一定特殊性，交付方式往往不局限于传统图片格式交付，还有SVG雪碧图、字体图标库等等特殊方式可以使用。 传统图片格式（PNG、Webp等）交付时，注意内容四周透明区域大小的正确，同时还要准备hover / disable 等不同状态下的版本； SVG雪碧图的方式一般需要特定的插件导出资源包。这种方式导出后可以上传到云平台的网盘中，并和开发沟通好。 字体图标库（iconfont）的方式需要先转换好svg，并保存在字体图标网站上，最后通过网站打包。最后同样需要上传好 + 沟通好。
设计规范及组件交付 部分云交付平台拥有全面的设计规范管理功能，开发交付时，除了能提供必备的图层信息和CSS样式代码外，还能提供变量名称（Variables）、组件代码（Snippet），样式表（Stylesheet）等更多专业的开发信息。
动效交付 最后简单提一下动效的推荐交付方式： 一般场景：视频（Mp4）或动图（Gif、Apng、Webp）格式是最推荐的，效果可控度高。不同方式主要是帧率、质量、兼容性方面有区别，具体差异不赘述，可自行检索。 Lottie / JSON 方式必须要借助AE插件导出，同时对动画内容有一定要求，比如不支持表达式和Alpha通道等，使用前需要做好规划。 SVGA的方案对内容本身限制较少，但是需要在代码中载入一个微型的播放器，建议提前和开发人员商量。 动效说明书的方式只适合复杂度不太高、且必须100%由前端实现的场景。
总结 总体来说，选择一款足够好的云交付平台是事半功倍的关键。近年一些自带交付功能的在线设计工具（如Figma）崛起，但从访问速度、易用性和功能丰富性的角度来说，依然和专业的云交付平台有着不小的差距，所以我依然建议使用独立的交付平台来保证交付品质。 最后要说的是，再完美的设计交付流程也不能代替设计走查，后续的持续检查依然是必不可少的。至于“如何做好设计走查”就是另一篇文章的内容了，敬请各位期待。
| 
发表于 2021-7-19 10:28:56
