這才是你要學的！手把手教你包裝一份高大上的設計稿

編者按：接了一個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