Alice

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)崛起,但从访问速度、易用性和功能丰富性的角度来说,依然和专业的云交付平台有着不小的差距,所以我依然建议使用摹客这样独立的交付平台来保证交付品质。

 

原文地址:UI中国

作者:摹客产品协作设计

转载请注明:学UI网 » 独家曝光!大厂设计师的交付细节全公开

登录收藏
 
你可能喜欢的:
详解|用户体验地图,到底该如何使用?详解|用户体验地图,到底该如何使用?
金刚区也要考虑交互,不只是画图标而已金刚区也要考虑交互,不只是画图标而已
鹅厂运营设计挺厉害,我偷学了几招鹅厂运营设计挺厉害,我偷学了几招
靠这个虚拟项目,他争取到了不错的工作!靠这个虚拟项目,他争取到了不错的工作!
渐进式披露!交互设计领域独有的设计方法论渐进式披露!交互设计领域独有的设计方法论
蛋卷基金首页改版|怎么帮助用户发现好资产?蛋卷基金首页改版|怎么帮助用户发现好资产?
最近不少人和我说,把这些小细节做好了,可以在领导那里加不少分!最近不少人和我说,把这些小细节做好了,可以在领导那里加不少分!
浅谈付费会员模式中设计机会点浅谈付费会员模式中设计机会点
如何快速胜任新工作如何快速胜任新工作
5年B端行业设计师眼中的“客户需求”与“用户需求”5年B端行业设计师眼中的“客户需求”与“用户需求”