@設(shè)計(jì)便利店 ：在開(kāi)始設(shè)計(jì)前，如果不事先理清楚設(shè)計(jì)目的和使用的場(chǎng)景，就一頭栽進(jìn)去亂做，這樣是不行的。一開(kāi)始隨心所欲的進(jìn)行，到最后只會(huì)出現(xiàn)結(jié)果與需求不符，一改再改。

尚未習(xí)慣之前，你會(huì)覺(jué)得這樣很麻煩，但還是建議按照流程做幾遍，會(huì)大幅度提高效率。設(shè)計(jì)流程總共分八個(gè)步驟：

△ 設(shè)計(jì)流程圖

一. 整理內(nèi)容+溝通需求

不要邊做邊想，先溝通和整理出必要的內(nèi)容，列好重點(diǎn)內(nèi)容的層級(jí)關(guān)系，再在開(kāi)始設(shè)計(jì)。例如：

△ 相同內(nèi)容會(huì)因?yàn)槟康牟煌淖冊(cè)O(shè)計(jì)

在我的設(shè)計(jì)經(jīng)驗(yàn)中，這部分其實(shí)是最重要的，它占了整體時(shí)間的60%以上。原則就是：需求不清晰，絕不動(dòng)手，不然，只有改改改。

開(kāi)始設(shè)計(jì)前，要和客戶仔仔細(xì)細(xì)溝通好設(shè)計(jì)需求，例如：為什么要做這張海報(bào)？目的是什么？想要傳達(dá)什么內(nèi)容？想要達(dá)到什么效果？等等，以此來(lái)明確我們的設(shè)計(jì)方向。接著再假設(shè)看到這份設(shè)計(jì)的人會(huì)在什么時(shí)候？什么地點(diǎn)？在做什么？等，加以整理內(nèi)容優(yōu)先級(jí)處理。

好，那現(xiàn)在我們先來(lái)個(gè)完整示例：先看看我們有什么素材可以用。

拿到設(shè)計(jì)內(nèi)容了，那就先整理信息，然后排列優(yōu)先級(jí)

例如示例中，是店鋪開(kāi)張的宣傳單，那重點(diǎn)信息就是“店面開(kāi)張”和“開(kāi)張促銷”，就可以像這樣列出設(shè)計(jì)的內(nèi)容，加以整理，同時(shí)也決定優(yōu)先順序。這就是設(shè)計(jì)的第一步。

二. 排版1：設(shè)定版心與邊界

整理完內(nèi)容后，就是設(shè)定版心和邊界。不同版心的設(shè)定，會(huì)大幅改變整體視覺(jué)效果。

擺放文字資訊、圖片等內(nèi)容的區(qū)域稱為「版心」，其他區(qū)域則稱為「邊界」。

△ 示例中是將上下左右的邊界設(shè)定為8mm，保證足夠空間來(lái)擺放

三. 排版2：設(shè)定網(wǎng)格

決定好版心和邊界后，即可開(kāi)始編排內(nèi)容要素。在這個(gè)階段，「網(wǎng)格」是最有力的輔助工具。

網(wǎng)格的設(shè)定方法有很多，可以參考下面的鏈接。一旦網(wǎng)格設(shè)定好之后，即可沿著網(wǎng)格線編排要素，輕松能完成一副規(guī)整的設(shè)計(jì)。

專業(yè)科班：《專業(yè)科班方法！幫你學(xué)會(huì)網(wǎng)格工具這個(gè)理性的排版利器》

平面高手：《網(wǎng)格系統(tǒng)的入門(mén)基礎(chǔ)知識(shí)+案例演示》

△ 示例中設(shè)定了豎10格 × 橫7格的網(wǎng)格

四. 排版3：安排優(yōu)先順序

這里要開(kāi)始使用前三步的準(zhǔn)備工作，「安排優(yōu)先順序」是指思考要將內(nèi)容配置在版面的哪個(gè)位置，不是重要的則低調(diào)，按照內(nèi)容的重要性在版面上編排。

另外，安排優(yōu)先順序時(shí)的重點(diǎn)，是將內(nèi)容相似的資訊相鄰配置，關(guān)聯(lián)性弱的內(nèi)容則分開(kāi)排放。這樣的做法能幫助閱讀者快速理解內(nèi)容。

例子中，目的是「讓潛在客戶知道本店開(kāi)張」。因此，必須將開(kāi)店的相關(guān)信息編排在足夠顯眼的位置。所挑選的照片素材，是讓圖片擔(dān)任視覺(jué)焦點(diǎn)、吸引眼球的角色。

一開(kāi)始先將版面按內(nèi)容劃分，接著以優(yōu)先順序來(lái)編排要素，這時(shí)不需要美化。

五. 排版4：設(shè)定強(qiáng)弱

接著依照各要素的優(yōu)先順序，進(jìn)一步設(shè)定強(qiáng)弱對(duì)比，為版面增添強(qiáng)弱對(duì)比后，設(shè)計(jì)的視覺(jué)感也會(huì)相對(duì)大幅度提升。

設(shè)定強(qiáng)弱的方法其實(shí)非常簡(jiǎn)單，只要把強(qiáng)調(diào)的內(nèi)容放大，其他要素縮小，可增加節(jié)奏感。

六. 配色

配色很大程度決定了設(shè)計(jì)的風(fēng)格，配色理論非常深?yuàn)W，與心理學(xué)是緊密關(guān)聯(lián)。但是，對(duì)于新手設(shè)計(jì)師來(lái)說(shuō)，建議先活用那些廣為人知的配色理論，如果有品牌色指引那就更好了。

配色理論：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》

品牌色指引：《專門(mén)收錄世界知名品牌標(biāo)準(zhǔn)色的BrandColor》

示例中，也是通過(guò)嘗試不同的顏色搭配方案，來(lái)測(cè)試最好的效果。

七. 選擇文字和字體

很多初級(jí)設(shè)計(jì)師會(huì)忽略字體的選擇，字體的風(fēng)格也是絕大程度影響畫(huà)面風(fēng)格。選擇字體的原則是「不要使用多種字體」。單一版面中使用多種字體，只會(huì)讓整體缺乏統(tǒng)一性，導(dǎo)致失去視覺(jué)焦點(diǎn)。

△ 最終版本

這次示例就算是完成了。若能正確完成以上八步，設(shè)計(jì)至少是合格線以上。這個(gè)設(shè)計(jì)的流程看似繁復(fù)，實(shí)際是提高效率的方法，一步到位，達(dá)成最終的版面設(shè)計(jì)。

最后說(shuō)一句，設(shè)計(jì)對(duì)設(shè)計(jì)師的考驗(yàn)，不僅是把畫(huà)面做的好看，更要有對(duì)信息內(nèi)容邏輯的處理能力，也是就我們說(shuō)的信息設(shè)計(jì)——以最有效的方式把內(nèi)容傳達(dá)到位。

本文資料來(lái)源：《馬上學(xué)會(huì)好設(shè)計(jì)》 坂本伸二 著, 謝爾鎂 譯，2017

歡迎關(guān)注作者的微信公眾號(hào)：「設(shè)計(jì)便利店」

「這可能是最全面的設(shè)計(jì)流程合集」

• Logo設(shè)計(jì) |?《網(wǎng)易資深設(shè)計(jì)師：我用這7個(gè)流程做LOGO設(shè)計(jì)》
• UI 設(shè)計(jì)丨《超贊干貨！一個(gè)完整的UI設(shè)計(jì)流程是怎樣的？》
• 品牌設(shè)計(jì)丨《用騰訊企鵝電競(jìng)的案例告訴你完整的品牌設(shè)計(jì)該怎么做》
• 交互設(shè)計(jì)丨《夠?qū)I(yè)！一個(gè)完整的交互設(shè)計(jì)流程是怎樣的？》
• 圖標(biāo)設(shè)計(jì)丨《超實(shí)用！聊聊圖標(biāo)設(shè)計(jì)流程及小技巧》
• 產(chǎn)品設(shè)計(jì) | 《58U享會(huì)：小米生態(tài)鏈那么多產(chǎn)品，設(shè)計(jì)流程應(yīng)該是怎樣的？》
• UED 團(tuán)隊(duì)設(shè)計(jì)丨《接地氣！國(guó)內(nèi)知名UED團(tuán)隊(duì)的設(shè)計(jì)流程是怎樣的？》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com?是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com