photoshop-fabulous-design-sketch-1

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

點贊
收藏 3

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏