網(wǎng)站設(shè)計

Website development

目錄為什么需要包裝？云智網(wǎng)站設(shè)計如何包裝？

發(fā)布時間：2015-10-21 08:49:57

TAGS：導(dǎo)航設(shè)計,產(chǎn)品設(shè)計,創(chuàng)意設(shè)計,精品網(wǎng)站設(shè)計

作為一個主要以接項目的云智互聯(lián)，包裝一個項目是很重要的。

我們分幾個內(nèi)容來說明一下吧。

目錄為什么需要包裝？設(shè)計如何包裝？舉個例子，以我近的一個項目；說明設(shè)計理念；色彩運(yùn)用；細(xì)節(jié)說明；界面展示。為什么需要包裝

在生活中，我們無時無刻不在面對包裝。

例如，超市的洗發(fā)精、飲料；外賣食品；新的電子產(chǎn)品。

我們會因為這些包裝而購買，也會因為這些包裝而不想購買。

這才是你要學(xué)的！手把手教你包裝一份高大上的設(shè)計稿

這是我看到包裝就忍不住購買的洗發(fā)精。

面對設(shè)計元素，也同樣道理。我們也需要包裝我們的設(shè)計產(chǎn)品。你試想一下，你作為甲方，支付了 5 萬元的一個項目，拿到只是一堆 PNG 格式的圖片，這種心情，是什么樣子無奈。

這才是你要學(xué)的！手把手教你包裝一份高大上的設(shè)計稿

甲方收到的一堆 PNG

設(shè)計如何包裝

設(shè)計如何包裝，這是我們的問題。

在我習(xí)慣上，我習(xí)慣了為甲方提供一份包含 PDF 說明檔案的檔案包。

應(yīng)該提供的檔案包。

「檔案包」的檔案夾結(jié)構(gòu)

請先閱讀PDF 說明檔案（由 Keynote 自動生成，以免甲方在 Windows 下無法打開）；Keynote 檔案預(yù)覽圖形所有界面屏幕所組成的大型預(yù)覽 PNG 檔案；所有屏幕每一個界面的單獨 PNG 輸出。

PDF（Keynote）說明檔案

這是「包裝」中的重中之重，我會使用 Keynote 制作，加上合適的幻燈片切換動畫以及部份構(gòu)件的進(jìn)入動畫，說明一下設(shè)計理念、色彩運(yùn)用、界面細(xì)節(jié)等之類的東西。

若面對面時候，則用我的 Macbook Air 來展示（Keynote 使用 1080P 分辨率），若郵件傳送，則輸出為 PDF，以保證一致的顯示質(zhì)量。

以例子來一起學(xué)習(xí)一下

是我近的一個設(shè)計元素，我為他們提供了界面、交互以及少量產(chǎn)品上的專業(yè)支持。它是一個 Wechat 智能娛樂助手，能夠推薦你附近好玩、好吃的地方。

這才是你要學(xué)的！手把手教你包裝一份高大上的設(shè)計稿

XX，一個微信智能娛樂助手（我的例子項目）

主要設(shè)計理念

既然，XX是一個關(guān)于「娛樂」的項目。我第一個的想法就是，要多姿多彩、色彩豐富、不應(yīng)該單調(diào)在一個顏色上。接著，對于整體來說，卻又應(yīng)該簡潔明了，恬靜舒適，以保持整體控制在色彩豐富但是又不會覺得隆重，凌亂的感覺。

這才是你要學(xué)的！手把手教你包裝一份高大上的設(shè)計稿

恬靜、舒適是娛樂的真實追求。

色彩運(yùn)用

上文以及提及到了，我們應(yīng)該「色彩豐富」。所以，我確定一個鮮艷的「Carnation」作為高亮色調(diào)，接著，其他飽和度相對低的，作為輔助色彩。

（一般來說，如果是單色調(diào)項目時候，應(yīng)擔(dān)搭配上灰度色調(diào)）

XX：色彩運(yùn)用的方面

FMS：色彩運(yùn)用的照片檔案

界面細(xì)節(jié)

我們討論完，主概念、色彩，是時候來說一下「界面細(xì)節(jié)」了。

界面細(xì)節(jié)，在包裝中，更習(xí)慣使用一個一個的描述線來說明。這個看看例子就馬上明白了。

這才是你要學(xué)的！手把手教你包裝一份高大上的設(shè)計稿

XX：主界面細(xì)節(jié)說明

這才是你要學(xué)的！手把手教你包裝一份高大上的設(shè)計稿

XX：設(shè)定界面細(xì)節(jié)說明

細(xì)節(jié)說明這個，你可以多做 4 ~ 5 個頁面，來把一些你值得注意的地方，放大說明?；蛘哌@個 icon 你很用心去繪制，更要放大說明。千萬不要把你的心思，埋沒在一堆 PNG 之中。

界面展示

完成了理念、色彩、細(xì)節(jié)，我們做一個大 PNG 來一個 Happy END 就可以了。

不過由于 PPT 一般放不入長條的大型 PNG 組合界面顯示，往往我會放一個好看的說明圖，來告訴「甲方」應(yīng)該打開哪個檔案來瀏覽。

這才是你要學(xué)的！手把手教你包裝一份高大上的設(shè)計稿

XX：主要界面組合顯示

這才是你要學(xué)的！手把手教你包裝一份高大上的設(shè)計稿

XX：長條形界面的單獨組合

享受

或許花了 30 分鐘，你把自己的 Keynote 制作出來了。不要心急給甲方發(fā)過去，先自己 Enjoy 一下，檢查檢查一下有沒有錯字、寫得不夠好的地方。自己給自己多播放幾次，感受一下自己要演講一樣的樣子。

感覺一切沒問題，就給他們發(fā)過去把。

結(jié)語

其實，我一開始做外包時候，也和大家一樣，就交一堆 PNG 給甲方，就這樣完事了。但是，那個時候，往往甲方會不理解，不明白，老是要我修改這里，修改哪里。我就需要很用力地，解釋為什么這些是這樣做的，為什么那里不能修改。

經(jīng)過一次看那些什么文章「你看看別人是怎么拿到 200 萬的設(shè)計」，我突然感受所悟。

自此之后，我每次的設(shè)計工作，無論項目還是版本遞進(jìn)修改，都會產(chǎn)生一份說明的 Keynote 檔案，并且輸出一份 PDF。

同時也因為這樣，甲方的過稿率就大大提高了。我要亂來修改的項目也減少了不少。因此，我認(rèn)為，好的包裝，是實力的證明。云智做網(wǎng)站也是一樣，網(wǎng)站的設(shè)計架構(gòu)和整體的色彩配置都給你一個滿意的回復(fù)，因為云智是在用心為客戶服務(wù)。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,6177,0.html

上一篇：企業(yè)如何高效制作網(wǎng)站

下一篇：云智主機(jī)網(wǎng)站建站搬家教程

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計
程序設(shè)
計研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評價

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺操作的簡單。技術(shù)還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點是響應(yīng)速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理