这才是你要学的！手把手教你包裝一份高大上的设计稿

编者按：接了一个200万的单，最后给甲方几张PNG？当然不行，学会包装设计稿是一个设计师最基础的技能，让甲方看懂你的设计，体验你的用心，才不会无休止地改改改，过稿率也能迅速提高。今天@庫倪Qoli 做了一份详尽的教程，从设计理念到色彩、细节、展示都有方法，学起来！

作为一个主要以接项目的设计师，包装一个项目是很重要的。

我们分几个内容来说明一下吧。

目录

1. 为什么需要包装？
2. 设计如何包装？
3. 举个例子，以我最近的一个项目；
   1. 说明设计理念；
   2. 色彩运用；
   3. 细节说明；
   4. 界面展示。

为什么需要包装

在生活中，我们无时无刻不在面对包装。

例如，超市的洗发精、饮料；外卖食品；新的电子产品。

我们会因为这些包装而购买，也会因为这些包装而不想购买。

这是我看到包装就忍不住购买的洗发精。

面对设计元素，也同样道理。我们也需要包装我们的设计产品。你试想一下，你作为甲方，支付了 5 万元的一个项目，拿到只是一堆 PNG 格式的图片，这种心情，是什么样子无奈。

甲方收到的一堆 PNG

设计如何包装

设计如何包装，这是我们的问题。

在我习惯上，我习惯了为甲方提供一份包含 PDF 说明档案的档案包。

应该提供的档案包。

「档案包」的档案夹结构

• 请先阅读
  • PDF 说明档案（由 Keynote 自动生成，以免甲方在 Windows 下无法打开）；
  • Keynote 档案
• 预览图形
  • 所有界面屏幕所组成的大型预览 PNG 档案；
• 所有屏幕
  • 每一个界面的单独 PNG 输出。

PDF（Keynote）说明档案

这是「包装」中的重中之重，我会使用 Keynote 制作，加上合适的幻灯片切换动画以及部份构件的进入动画，说明一下设计理念、色彩运用、界面细节等之类的东西。

若面对面时候，则用我的 Macbook Air 来展示（Keynote 使用 1080P 分辨率），若邮件传送，则输出为 PDF，以保证一致的显示质量。

以例子来一起学习一下

XX（为防同学们误认为软文，此处皆替换为XX，见谅）是我最近的一个设计元素，我为他们提供了界面、交互以及少量产品上的专业支持。它是一个 Wechat 智能娱乐助手，能够推荐你附近好玩、好吃的地方。

XX，一个微信智能娱乐助手（我的例子项目）

主要设计理念

既然，XX是一个关于「娱乐」的项目。我第一个的想法就是，要多姿多彩、色彩丰富、不应该单调在一个颜色上。接着，对于整体来说，却又应该简洁明了，恬静舒适，以保持整体控制在色彩丰富但是又不会觉得隆重，凌乱的感觉。

恬静、舒适是XX的真实追求。

色彩运用

上文以及提及到了，我们应该「色彩丰富」。所以，我确定一个鲜艳的「Carnation」作为高亮色调，接着，其他饱和度相对低的，作为辅助色彩。

（一般来说，如果是单色调项目时候，应担搭配上灰度色调）

XX：色彩运用的方面

FMS：色彩运用的照片档案

界面细节

我们讨论完，主概念、色彩，是时候来说一下「界面细节」了。

界面细节，在包装中，更习惯使用一个一个的描述线来说明。这个看看例子就马上明白了。

XX：主界面细节说明

XX：设定界面细节说明

细节说明这个，你可以多做 4 ~ 5 个页面，来把一些你值得注意的地方，放大说明。或者这个 icon 你很用心去绘制，更要放大说明。千万不要把你的心思，埋没在一堆 PNG 之中。

界面展示

完成了理念、色彩、细节，我们做一个大 PNG 来一个 Happy END 就可以了。

不过由于 PPT 一般放不入长条的大型 PNG 组合界面显示，往往我会放一个好看的说明图，来告诉「甲方」应该打开哪个档案来浏览。

XX：主要界面组合显示

XX：长条形界面的单独组合

享受

或许花了 30 分钟，你把自己的 Keynote 制作出来了。不要心急给甲方发过去，先自己 Enjoy 一下，检查检查一下有没有错字、写得不够好的地方。自己给自己多播放几次，感受一下自己要演讲一样的样子。

感觉一切没问题，就给他们发过去把。

结语

其实，我一开始做外包时候，也和大家一样，就交一堆 PNG 给甲方，就这样完事了。但是，那个时候，往往甲方会不理解，不明白，老是要我修改这里，修改哪里。我就需要很用力地，解释为什么这些是这样做的，为什么那里不能修改。

经过一次看那些什么文章「你看看别人是怎么拿到 200 万的设计」，我突然感受所悟。

自此之后，我每次的设计工作，无论项目还是版本递进修改，都会产生一份说明的 Keynote 档案，并且输出一份 PDF。

同时也因为这样，甲方的过稿率就大大提高了。我要乱来修改的项目也减少了不少。因此，我认为，好的包装，是实力的证明。

这篇看完，还有一篇魅族设计师的：《DUANG！如何让你的设计稿特技加特技？》

【人气超高的Photoshop冷知识教程系列】

冷知识系列第一期：《那些你不知道的PHOTOSHOP冷知识》
冷知识系列第二期：《第二弹！那些你不知道的PHOTOSHOP冷知识之乾坤大挪移》
冷知识系列第三期：《最终完结篇！那些你不知道的PHOTOSHOP冷知识》
冷知识系列完结篇：《最终完结篇特制版！那些你不知道的PHOTOSHOP冷知识（四）》

原文地址：zhuanlan.zhihu
作者：@庫倪Qoli

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量102万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com