如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

文疊文

該技巧操作起來很簡單，就是在標題或內(nèi)文下面，增加相關(guān)的英文單詞或阿拉伯數(shù)字就可以了。不過在處理下面的文字時要注意：

• 顏色要比上面的文字淡，以免影響其識別性；
• 字體要用粗體，且字號要比上面的文字大；
• 要與上面的文字錯位排版。

之所以這么處理是為了增加版面的層次、對比，以及豐富元素。

給標題增加小色塊

這是增強標題設(shè)計感的另一種處理方式，單純的文字標題難免顯得單調(diào)，我們可以通過增加輔助元素使它變得更豐富一點，比如在文字的基礎(chǔ)上加小色塊。

色塊的高度最好大于筆畫厚度，小于文字的高度，加上去的方式可以是疊加于文字之上，或是置于文字底部，創(chuàng)造出文字的一部分在色塊內(nèi)一部分在色塊外的對比效果。還有，色塊的顏色最好來源于版面中的其他元素。

用斜線或點填充空白

在做設(shè)計的時候常常會遇到這兩種情況，一是版面中會多出一些影響版面平衡的空白，但已經(jīng)沒有合適的內(nèi)容可以填充了，如果硬塞一些裝飾文字或者圖案，很可能會弄巧成拙；二是有的區(qū)域小元素小信息比較多、比較散。怎么辦呢？

這兩種情況都可以通過該方法解決。把斜線或點重復排列成一個矩形，然后把它填充在空白處就可以平衡版面，且不會造成突兀的感覺，如下圖案例：

要點：線條不宜太粗，點也不宜太大，而且此方法只適合填補小空白，不適合填補大面積的空白。

在比較散的元素下方排一組斜線，可以把各個分散的元素聯(lián)系起來，使其成為一個整體。如下圖：

把背景分成兩個斜切的色塊

背景能很大程度地影響版面的設(shè)計感，這一點應該都有體會，常規(guī)的處理方式是把背景作為一整個色塊，而如果把背景分割成兩個幾何色塊時，設(shè)計感立馬就會增加不少。

分割的方式好比用一把刀在背景的黃金分割處，劃一條傾斜的直線貫穿版面，使整個背景一分為二，而這兩個色塊的顏色對比要比較強烈。另外，在橫版中用左右分割，豎版中用上下分割效果會比較好。

給圖片加圓形色塊

增加對比關(guān)系是加強設(shè)計感的最有效技巧，我們也可以用此方式來優(yōu)化圖片。如果版面中的配圖是沒有背景的產(chǎn)品或人物，那么在這些圖片上加一個圓形的色塊，創(chuàng)造出虛與實的對比，通常也能得到不錯的效果。

要點：

• 色塊可以置于圖片底部，也可以采用正片疊底壓在圖片上方；
• 圓形色塊的邊長至少要超出圖片寬或高；
• 圖片與色塊要錯位排列。

給每行文字都加一個色塊

該手法在畫冊和海報設(shè)計中比較多見，與直接在一段文字下方加一個大色塊不同，而是要根據(jù)每行文字不同長度，單獨加一個相應長短的色塊，所以這些文字每一行的長短最好是不一樣的。

這種處理方式可以使整段文字看起來更整體，增加文字視覺沖擊力，而且還能使文字與背景區(qū)隔開，加強文字的識別性。

要點：

• 段落文字行數(shù)太多或太少效果都不會很好，3-10行左右為最佳。
• 各個小色塊可以相互連起來，也可以相互隔開，以實際效果為準。

用飄帶裝飾包裝上的文字

如果你看過的食品包裝夠多，你應該能發(fā)現(xiàn)，很多包裝上的產(chǎn)品名稱、廣告語或者賣點等信息，都會擺放在一條飄帶上。這么處理的效果通常不錯，因為飄帶具有禮品、贈送的寓意，用在哪里都不會太唐突，而且飄帶的形式簡單、有細節(jié)、變化豐富，很適合用作裝飾元素。

還有一點也很重要，飄帶的形式一般都是柔軟的曲線，這與版面中其他直線元素可以形成鮮明的對比，加強版面的靈活性。

結(jié)語

以上的七個小妙招是不是既簡單又實用，你們在做設(shè)計的時候記得拿出來試試。不過這些也確實只是小技巧而已，只能優(yōu)化局部，不要指望用上這幾招就能做出很好的設(shè)計，而且它們也不一定適合所有情形，在實際操作中一定要具體問題具體分析，靈活運用。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

1.字號的設(shè)置

2.根據(jù)需求隨意組合 

3.英文的行高

4.英文的行間距

5.中文的行高

6.中文的行間距

7.行高的禁忌

8.標題行高

9.正文行高

10.混合編排

11.字體選擇

1.字號的設(shè)置

字號就是字體的大小，文字從大標題H1-H7、小標題、正文、注釋都要配置相對應的字號。頁面的字號我是以4為基數(shù)進行遞增的，最好采用偶數(shù)。像14號字的正文和13號字的注釋，這種比較小的字可以不以4為基數(shù)來做。不管設(shè)計師怎么去定義字號，只要視覺上美觀大方并具有關(guān)聯(lián)性，采用哪種規(guī)則去約束它都可以。

另外所有的字體都要調(diào)試出深色和淺色兩種配色，并分別應用在白色底色和黑色底色當中。黑色底色展示效果不好就不做展示了。

2.根據(jù)需求隨意組合

當我們定義好字號，標題和正文就可以根據(jù)實際項目需求進行自由搭配了。在給標題和正文選擇字號時要注意它們之間的對比關(guān)系，字號差異越大它們的層級關(guān)系就越明顯，但它們之間的差異又不能太大，差異過大會影響整體的視覺平衡性，給人一種不和諧不自然的感覺。

例如：標題字號20px搭配正文字號12px；標題字號24px搭配正文字號16px。選用哪種標題搭配哪種正文也是由設(shè)計師的美感決定的。

3.英文的行高

在設(shè)置文本行高的之前，需要理解一下“行高”與“行間距”的差別。前端DIV+CSS和設(shè)計Affinity Designer等繪圖軟件都是以“行高”來進行定義的。在CSS-Style line-height屬性是行高，值分別以百分比、數(shù)值和像素來表示。例如：h1.test {line-height:112px}，那標題h1的行高就是112像素了；繪圖軟件中控制行上下距離的也是行高。好的言歸正傳，中文的行高與英文行高會有一些差異，英文的行高指的是一行英文的基線與下一行英文的基線之間的距離，如下圖所示。

基線是英文字體結(jié)構(gòu)中的概念，先簡單了解一下它吧，以后講到字體的時候再講它吧。我們在繪圖軟件填寫行高的數(shù)值時，改變的就是上圖所示的這段距離。

4.英文的行間距

英文的行間距就沒有行高那么復雜，也不用畫基線。英文的行間距跟中文相同，指的是一行英文的底部線與下一行英文的頂部線之間的距離。其實也可以簡單的理解為“行與行之間的距離”并稱之為行間距。另外英文底部和頂部都有對應的專有名詞的，在英文字體結(jié)構(gòu)中最頂部/最底部隱性的兩條線稱為“上沿線/上限線”和“下沿線/下限線”。這塊的知識先了解一下就行，以后在字體結(jié)構(gòu)中會講到。

5.中文的行高

接下來理解下中文的行高。上面講到說英文的行高是由基線決定的，但中文字體與英文字體結(jié)構(gòu)不一樣，中文里沒有基線的概念，那該怎么定義行高呢。中文的結(jié)構(gòu)屬于方塊字沒有基線，所以中文的行高指的是一行中文的最底部與下一行中文最底部之間的距離。中文字體結(jié)構(gòu)中沒有上沿線/上限線和下沿線/下限線的概念，它們只存在于英文字體結(jié)構(gòu)中。

6.中文的行間距

中文的行間距就比較好理解了，跟英文的行間距的道理相同。是指一行中文的最底部與下一行中文的最頂部之間的距離。也可以理解為行與行之間的距離。

雖然說行高與行間距的差別不太好區(qū)分，而且還有些繞，但理解它們還是很有必要的。

7.行高的禁忌

不管是標題、正文還是注釋，他們的行高都不宜過高，行高過高會導致內(nèi)容不易閱讀，文字之間的整體性也會被打散。標題的字號越大行高應該越小，正文的字號越小行高應該越大。當然這些規(guī)則都是相對的，行高大小要合理把控，不能太大或過小。那要如何合理設(shè)置行高呢，往下看。

8.標題行高

標題的行高由字號決定的。平面設(shè)計中有時候可以把行高設(shè)置與字號相同，例如120pt的字號設(shè)置120pt的行高是沒有問題的。在頁面中行高是這么計算的，字號x倍數(shù)=行高。例如下圖所示，大標題H3設(shè)置的字號是48px（12a），那行高就是62.4，即48x1.3倍=62.4。字號與行高的倍數(shù)是一點點測的，因為字號與行高的比例不會小于1.0（1倍），我就根據(jù)自身審美進行測試，從1.0/1.1/1.2/1.3....開始測，直到測出自己滿意的行高。如下圖所示，帶顏色數(shù)字的是倍數(shù)。

最終的行高還是由設(shè)計師直觀判斷決定的。所以做設(shè)計要理性中夾雜感性，規(guī)則與創(chuàng)意并存才是一個優(yōu)秀設(shè)計師需要兼?zhèn)涞钠焚|(zhì)。那我就拿中文字號36px和英文字號24px來舉個例子，這樣大家好理解一些。如下圖所示：

從測試結(jié)果中找到自己滿意的行高就可以了。字號x倍數(shù)=行高，這里也不怕倍數(shù)小數(shù)位太多的問題。在繪圖軟件中是以像素為單位，但有時候前端代碼會用父繼承單位“em”。例如：大標題H3的字號是48px，行高是62.4px（48x1.3倍），62.4px=1.2816667em，那轉(zhuǎn)換為前端代碼就是h3.test{line-height: 1.3em}，直接做約等于就行了，差一點點看不出來的。

9.正文行高

來接著往下講。正文行高與標題行高相同，差異就字號的不同選擇的行高也不同。標題行高倍數(shù)大概1.0-1.6不等，正文行高倍數(shù)大概1.6-2.4不等，這也沒有一定的標準，還是得根據(jù)項目情況與實際效果綜合來看。如下圖所示，帶顏色的數(shù)字是行高的倍數(shù)。

說到這里，經(jīng)常有人問我正文的行高的值應該怎么設(shè)置，大家在做設(shè)計時都會采用1.5/2倍關(guān)系，但這不是絕對的，行高的倍數(shù)也是受字號大小影響的。像新浪新聞的正文，字號是18px，行高設(shè)的是32px，即字號（18px）x1.777（倍數(shù)）=32px（行高），如果行高倍數(shù)設(shè)置2倍以上，字與字之間的距離變大，就不太好閱讀了。

10.混合編排

好的，完全理解上述所有知識就可以把標題、正文和注釋進行混合編排了。大標題字號40px、正文字號20px、正文行高40px、注釋字號18px、注釋行高32px、標題與正文的間距88px、正文與注釋的間距64px。

11.字體選擇

選擇字體就沒有什么技術(shù)含量了。做頁面常用字體就只有那幾種，微軟雅黑、宋體、Verdana、arial、Times New Roman，就不舉例說明了。中文網(wǎng)站最常用的就是微軟雅黑+Arial，瀏覽器兼容性也最好。讀到這里有人可能就會問了，載入其他字體也可以啊，是的做企業(yè)網(wǎng)站可以載入其他字體，但像做功能頁面啊、后臺頁面啊，載入其他字體幾乎就不可能了。所以還是要估計實際項目需求/品牌需求來選擇與其相符的字體樣式。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

類似這種「矛盾」的設(shè)計原則還有好幾對，接下來蔥爺要把它們一一理清，讓這些理論知識能真正指導設(shè)計實踐。

對齊與變化

對齊是版式設(shè)計最基礎(chǔ)的原則之一，具體指版面中的字與字、字與圖、圖與圖要對齊，常用的對齊方式有左對齊、右對齊、上對齊、下對齊、居中對齊、兩端對齊等。對齊的目的是為了使版面更整潔，更便于閱讀，比如下面這些作品都用到了大量的對齊關(guān)系。

我們來舉個實例，假設(shè)你現(xiàn)在要設(shè)計一則手機banner圖，目的是宣傳某款手機的拍照功能，文案如下：

這種圖不難做，你打算直接用一部手機和幾張攝影作品作為畫面的主視覺，于是去圖片網(wǎng)站找了幾張能體現(xiàn)該手機拍照功能好的圖片：

圖片找好后，你把其中一張圖片填充到手機里作為屏幕背景，其余圖片分散在手機周圍，然后你把整個視覺主體放在了版面中央，文字則按主次排在了兩側(cè)，大致效果如下：

你盯著畫面，正琢磨著還要加點什么的時候，總監(jiān)不知何時出現(xiàn)在了你身后，他面無表情地盯著你的電腦，嘴里慢吞吞地吐出幾個字：「太亂了，好LOW」，之后就消失了。你很聰明，立刻明白了總監(jiān)是想要自己排得更整潔、更有序一點。

在目前的版面中雖然個別元素之間有對齊關(guān)系，但是缺乏整體的對齊，且圖片采用了自由式排版，所以會顯得混亂。于是你嘗試把圖片對齊排列，文字則以圖片為基準進行對齊。

△ 左邊的文字部分與右邊的圖片部分保持上下對齊，標題與內(nèi)文為左右兩端對齊，icon 與文字則是左對齊。

上圖很「完美」地執(zhí)行了對齊原則，整個版面干凈、整潔了許多，視覺流程也更簡單了。這下總可以了吧，然而事情并沒你想的簡單。因為總監(jiān)不知何時又出現(xiàn)在了你的身后，他癟著嘴一臉嫌棄地說道：「太呆板了，有點變化好不好？」

變化？難道又要調(diào)回改之前那種狀態(tài)??？當然不是，你其實是要在現(xiàn)有的基礎(chǔ)上做一些變化。排版的難點和精妙之處就在這里，既要對齊，又不能機械地對齊；既要整潔有序也要靈活有變化。如何做到這一點呢？我的理解是：要在對齊中制造一點變化，在變化中找到對齊關(guān)系。比如下面這些作品：

現(xiàn)在你知道了，上面的方案之所以死板主要是因為文字部分與圖片部分對得太整齊，所以需要改變其中一個版塊。該版面的視覺主體是圖片，所以調(diào)整圖片更合適。由于文字是呈水平排列的，那么圖片部分是不是可以傾斜擺放形成一定的反差呢？這樣既可以制造變化還能加強版面的空間感。

△ 除了把圖片傾斜之外，LOGO也與內(nèi)文錯開移到了左上角，最下邊的直線也可以延伸到了版面之外。

我們現(xiàn)在再回過頭來看看這件作品是否符合前面我說的，「要在對齊中制造一點變化，在變化中找到對齊關(guān)系」這一要素。

從上圖中可以看出，圖片雖然做了傾斜，卻是在對齊的基礎(chǔ)上做的變形扭曲。版面中的元素雖然不是都對齊了某條直線，但是沒有哪一個元素是孤立的，每一個元素都與版面中的其他元素有對齊關(guān)系。更重要的是，左邊文字版塊的視覺重心與右邊圖片版塊的視覺重心也是呈水平對齊的，所以整個畫面才得以平衡。

統(tǒng)一與對比

雖然設(shè)計的構(gòu)成要素只有文字、圖片、色彩，但是每一個要素都有無數(shù)種表現(xiàn)形式，不同的字體、字號、色值、質(zhì)感、風格、圖片、方向等等。如果在一個版面內(nèi)含有太多不同的東西，會顯得很雜亂，從而讓人心生厭煩，所以，需要通過某種方式把這些「不同」統(tǒng)一起來，以達到舒適、協(xié)調(diào)的效果。

以一則運動品牌的輪播圖設(shè)計為例，文案如下：

這類設(shè)計以運動員作為主體最容易出效果，所以我們需要找一個正在奔跑的人物圖片。

△ 這個人的姿勢不錯，就他了。

運動品牌最重要的是要設(shè)計出動感和時尚感，所以我把背景分割成一紅一藍兩個傾斜的色塊，然后把人物放在畫面中央，文字分布在左右兩邊，以制造出強烈的視覺沖擊。

由于有一個動感十足的模特和背景，所以整體看來還是比較符合運動海報的調(diào)性，但視覺上有點亂，因為有很多細節(jié)沒有統(tǒng)一，比如人物傾斜的角度和背景色塊、標題傾斜的角度不一樣，主要文字的字體風格不一樣（NIKE和JUST DO IT的字體比較硬朗，而蓄勢待發(fā)的字體相對較柔），元素的風格也不統(tǒng)一（圓角的了解更多按鈕與整體風格不搭），還有各元素的顏色也缺少聯(lián)系等等。

那該怎么辦呢？這里就需要用到統(tǒng)一的原則了，我們可以試著把上面提到的不統(tǒng)一的地方都統(tǒng)一起來，如下圖：

△ 調(diào)整后的方案二，字體都是簡潔有力的黑體字，而且把左右兩邊的字體進行了水平對齊、背景色改為單一的漸變色、人物和文字的傾斜角度也統(tǒng)一了，「了解更多」的按鈕也改成了平行四邊形色塊、顏色更是被縮減到了三種。

調(diào)整之后確實不亂了，但是也有了新的問題，因為各元素太過統(tǒng)一使得畫面缺乏層次和對比，該突出的信息也沒有得到突出。這時候就需要用到與統(tǒng)一對立的另一個原則——對比。

對比，是把具有明顯差異、矛盾和對立的雙方安排在一起，進行對照比較的表現(xiàn)手法，目的是為了使設(shè)計更有層次、增加視覺沖擊力。設(shè)計中常見的對比有大小對比、字體對比、色彩對比、空間對比、方向?qū)Ρ?、長短對比、粗細對比、曲直對比、輪廓對比、虛實對比等等。

想要處理好統(tǒng)一與對比的關(guān)系，需要記住兩個要領(lǐng)：

• 各元素的調(diào)性要統(tǒng)一、元素的呈現(xiàn)方式要有對比。
• 要保證畫面中的對比關(guān)系不會破壞整體的協(xié)調(diào)性。

順著這樣的思路，我們來給上圖增加一些對比關(guān)系，例如方案二的標題傾斜角度太大，不美觀，所以我干脆把它的傾斜方向改為垂直傾斜，既保留了動感也增強了對比，更加美觀。在文字的字號上，我選擇突出品牌名縮小廣告語，加強了大小對比，并且還恢復了之前把背景一分為二的做法，只是增加了一點空間感，并把人物服裝的顏色與背景色做了統(tǒng)一。調(diào)整后的效果如下：

我們可以觀察一下，方案三確實比方案一更協(xié)調(diào)，比方案二更有層次和視覺沖擊力，且整體調(diào)性依然年輕、時尚、有動感，這里就是運用了統(tǒng)一與對比的原則。

簡單與豐富

簡單應該是大家聽得最多的設(shè)計原則，簡約、極簡風格的設(shè)計也非常受歡迎，但是我們也很困擾，因為自己做的所謂極簡設(shè)計經(jīng)常會被人說太單調(diào)、不夠豐富；而那些自我感覺很豐富的設(shè)計又會被說成是雜亂。為什么會這樣呢？我們先來正確地認識一下簡單與豐富。

簡單并不是指做設(shè)計要用最少的元素、不做任何修飾，而是指設(shè)計主旨要簡單，視覺流程要清晰，視覺要聚焦，主次要分明。

△ 上圖的設(shè)計雖然元素和色彩都很多，但整體給人的感覺也還是簡單的。

而豐富也不是指畫面中一定要有很多元素或疊加一堆的效果，而是指有細節(jié)、有層次、有品質(zhì)感。

△ 上圖的設(shè)計雖然整體看來很簡單，但是并不會顯得單調(diào)。

為了方便理解，我們還是來舉個例子：一款農(nóng)產(chǎn)品冊子的封面設(shè)計。該封面的必要元素很簡單，只有一個 Logo 和一句文案，因此，我們很容易想到做個極簡風格的設(shè)計。白色背景加一個 Logo 和一行文字，再配一款特種紙，做點工藝，就可以顯得很高大上，很多大品牌也是這么做的。

這也是一種還過得去的解決方案，但表現(xiàn)手法確實太過簡單，既體現(xiàn)不出設(shè)計師的設(shè)計功底，也沒有體現(xiàn)出農(nóng)業(yè)品牌的調(diào)性和特色，且缺乏吸引力，所以我們需要做加法，讓其變得更加豐富。

怎么豐富呢？最直接的辦法就是引入圖片和色塊，由于品類為農(nóng)產(chǎn)品，且文案重在強調(diào)健康和安全，所以我們可以找一張綠色、生態(tài)的圖片。

為了與狹長的版面保持統(tǒng)一，我把圖片也裁剪成了豎版的矩形，并與一個同樣大小的綠色色塊結(jié)合在一起，組成版面的主視覺，logo放在圖片左側(cè)，如下圖：

這么做還是有些設(shè)計感的，也增加了品類屬性，不過缺少細節(jié)、不耐看，所以還需要加點東西。當然，新增加的元素只能作為輔助，不能太過搶眼，圖片方面我很快想到了葉脈，葉脈與圖片中的葉子元素也能產(chǎn)生關(guān)聯(lián)，且適合做底紋，于是我又找來了一張葉脈的圖片。

把葉脈圖片放在圖層最底部作為背景處理，這里會遇到三種情況，一是如果把葉脈紋完全平鋪的話，整個版面就沒有留白了，所以會顯得壓抑；二是把整片葉子都顯示出來，但這么處理會顯得很小氣。所以我只用葉脈紋覆蓋了一半左右的版面，與圖片部分形成呼應，這樣的效果看起來是比較舒服的。

圖片部分得到了改善，但現(xiàn)在畫面中還缺少一點小的裝飾元素，增加一點文案是個不錯的思路，所以我把文案和品牌名的英文加了進來。

做完加法后整個畫面變得豐富了不少，層次也拉開了，而且給人的感覺依然比較簡單，既不雜亂也不壓抑，因為各元素主次分明，既有聯(lián)系又沒形成干擾。不過做加法的時候也要把握度，例如下圖就有點堆砌過度了，看起來很繁雜、不精致。

想要處理好簡單與豐富的關(guān)系，需要注意兩點：

• 要保證主體單一且足夠精致；
• 要保證有簡單的裝飾元素與主體形成互補。

規(guī)范與打破

規(guī)范與打破是存在于版式設(shè)計中的一對矛盾原則，規(guī)范是指把版面中的元素要按某種規(guī)律，或是在特定的范圍內(nèi)設(shè)計布局，目的是為了讓畫面更有條理和秩序，也更像一個整體。

△ 上圖的主要元素都規(guī)范在一個矩形中，然后各個小矩形又組合成一個大矩形，看起來很整體，很有設(shè)計感。

與規(guī)范對立的是打破，指打破規(guī)范、打破束縛、打破平靜，目的是為了使畫面看起來更靈活、更有動感、更具視覺沖擊。

△ 用色塊或圖片來創(chuàng)造束縛感，然后把部分元素沖出色塊，是規(guī)范與打破的一個經(jīng)典組合形式。

可以說經(jīng)過了嚴格規(guī)范而變得很好看的優(yōu)秀設(shè)計很多，而有些設(shè)計卻選擇了打破規(guī)范，也得到了很驚艷的效果。那什么時候該嚴格遵守規(guī)范？什么時候應該打破規(guī)范呢？其實在一件完整的設(shè)計中最好兩者都要有，而平衡這兩者的要領(lǐng)就是：先規(guī)范后打破，即在規(guī)范好的基礎(chǔ)上選擇一些局部來打破。

蔥爺還是以一個畫冊的封面設(shè)計來作為講解案例。這是一本中國移動云服務(wù)平臺方案介紹的冊子，文案如下：

很明顯該封面的視覺調(diào)性應該要有科技感，要能體現(xiàn)互聯(lián)網(wǎng)、信息、大數(shù)據(jù)這些關(guān)鍵詞，所以我找了一張看起來很有科技感的圖片。

這類畫冊的版式通常應該偏向簡潔、規(guī)矩，所以我決定用網(wǎng)格系統(tǒng)來輔助排版。以圖片作為封面的主視覺，除了Logo，所有元素都排列在矩形圖片內(nèi)，并且所有文字都按照網(wǎng)格的設(shè)定保持左對齊，所有元素的高度、寬度，以及各元素之間的間距，都嚴格按照網(wǎng)格來排版。

△ 經(jīng)過規(guī)范的版面整體看起來十分嚴謹。

不過這么做也造成了版面缺少變化、太過規(guī)矩等問題，所以我們可以嘗試在此基礎(chǔ)上做一些「打破」。

比如原本的 LOGO 與圖片靠得太近，顯得很壓抑，這里就不必完全按照網(wǎng)格來排版，我們可以根據(jù)自己的感覺將 LOGO 與圖片分得更開一些；中文標題、短線、英文標題這三者也太擁擠了，可以挪開一點；文字部分不一定全部都在圖片范圍內(nèi)，所以我給英文標題加了一個藍色塊，并把色塊移出了圖片區(qū)域；以及把最下面的公司名稱排在了圖片下方等。調(diào)整后的效果如下：

△ 調(diào)整后的方案，構(gòu)圖也相應發(fā)生了變化，之前為上下構(gòu)圖，現(xiàn)在變成了對角構(gòu)圖。

在規(guī)范的基礎(chǔ)上做了打破之后，我們可以看到，版面的整潔性依然在，整體的調(diào)性也依然簡潔、嚴肅，但相比調(diào)整之前顯得更靈活、更有設(shè)計感。

結(jié)語

設(shè)計不是簡單的加減法，也不是只要做到對齊、統(tǒng)一這些很簡單，方向很明確的原則就可以了，因為根本不存在什么原則可以讓我們直接通向設(shè)計的終點，但是我們的目標是明確的，就是要做有效的設(shè)計，所有的設(shè)計原則、設(shè)計手段都要為這個目標服務(wù)。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

排版就是要將版面中必要的元素進行有序組織、擺放，在空空如也的畫板里把一堆雜亂無章的東西排得好看并不容易，簡單的對齊排列？結(jié)果可能是既單調(diào)又呆板，如果全憑感覺加些幾何大色塊，又覺得太大眾，且跟自己的品牌和主題沒有直接的關(guān)聯(lián)，怎么辦？今天蔥爺給大家分享一個實用的排版方法：圖形排版法。

什么是圖形排版法？說白了其實就是用圖形來承載文字或者圖片。

圖形排版好處

1、更易排版：在圖形里排版，可選擇性更少，所以更容易。

2、更有趣：用與內(nèi)容或品牌相關(guān)的圖形排版，本身就是個有趣的創(chuàng)意。

3、更整體：把設(shè)計元素聚集于圖形內(nèi)排列，自然顯得更整體。

4、更有助于：信息傳達圖形本身也可以傳達出一部分信息。

常用于電商設(shè)計和海報設(shè)計中：

▲用電視機圖形排列主播頭像和介紹文字

▲用膠片圖形排列圖片和文字

▲用展示架圖形排列游戲裝備和文字

▲用紅包和單據(jù)圖形排列促銷信息

▲用房屋的形式排列信息

▲用購物券的形式排列促銷文字

▲用蒸籠圖形排列圖文

▲用廣告牌的形式排列文字和圖標

那么，像上面這種采用圖形排版法的設(shè)計是怎么操作的呢？可以簡單分為四步：

一、觀察

觀察版面上需要排列元素的多少與形式。舉個例子，以下是一本農(nóng)產(chǎn)品小冊子其中1P的文案，冊子的成品尺寸為w110x200mm。

客戶只提供了這些文字，從上圖可以看到，字數(shù)并不少，且都是關(guān)于企業(yè)介紹的段落文字，顯然這些文字要集中排版，不過如果只是像上圖那樣簡單的對齊，未免有點單調(diào)，最好引入圖片或者圖形加以豐富，由于沒有合適的圖片，所以我決定采用圖形排版法。

二、思考

用什么樣的圖形才能把現(xiàn)有的元素組合起來呢？圖形的提取和選擇有三個方向：

1.根據(jù)文字的屬性來選擇圖形，比如下圖需要排版的內(nèi)文是一些優(yōu)惠信息，所以設(shè)計師選擇用優(yōu)惠券的圖形來承載文字。

2.根據(jù)圖片來選擇圖形，比如下圖需要排列的元素中有很多產(chǎn)品，所以設(shè)計師用盒子與展示臺的圖形來承載它們。

3.根據(jù)設(shè)計（品牌）調(diào)性來選擇圖形，下圖是一個春節(jié)期間的電商側(cè)欄，所以設(shè)計師用燈籠圖形來作為排版的載體。

現(xiàn)在，我們再回過頭來看看前面說的這個畫冊設(shè)計例子，這里需要排版的元素并無圖片，而企業(yè)簡介類的文字也提取不出合適的圖形，所以依據(jù)品牌調(diào)性來選擇圖形是最靠譜的，哪些圖形可以使用呢？

由于這是一個主打天然、健康的農(nóng)產(chǎn)品品牌，所以很容易想到太陽、山、白云、樹、葉子、花等圖形，在這些圖形中，哪一個最合適呢？

我們可以根據(jù)以下幾條標準來選擇：

1.圖形與品牌調(diào)性要相符；

2.圖形的造型要盡量簡單；

3.圖形要美觀；

4.要適合承載內(nèi)容；

5.圖形的形態(tài)要適合版面尺寸。

由此可見，葉子圖形是最合適的。因為其造型最簡單比較好承載文字信息，不會影響到閱讀性，并且也更便于在狹長版面中運用。

三、設(shè)計與排版

即使確定了采用什么圖形來排版也還有很多要注意的地方，比如同樣一個元素，可以設(shè)計成很多不同的圖形，它們所產(chǎn)生的效果也會有很大差別。一般來說，抽象的、幾何化的圖形會比具像化的圖形更合適，因為前者更簡潔、更適合排版、更有設(shè)計感，下圖是樹葉圖形的兩個不同設(shè)計方向。

顯然右邊簡化后的效果比左圖效果更合適。圖形設(shè)計好后當然就要把文字排上去了，文字排版的方式有兩種，一種是沿著圖形的內(nèi)輪廓繞排（如左圖），一種是在圖形輪廓內(nèi)自由排版（如右圖）。

使用第一種排版方式能使文字與圖形結(jié)合得更自然，適合字數(shù)比較多且呈段式的文字；使用第二種排版方式的優(yōu)點是不需要完全受限于輪廓，更靈活，適合字數(shù)比較少的文案，很顯然，在本例中更適合采用輪廓繞排。

提示：在AI中，把文字工具移動到圖形的路徑處，當出現(xiàn)如下圖標時，單擊鼠標左鍵便可以輸入文字了，而且每一行文字的起始都會沿著圖形的內(nèi)輪廓排列。

在菜單欄文字選項中點擊區(qū)域文字選項，即可調(diào)出參數(shù)框，如下圖：

四、補充與優(yōu)化

當然，如過版面中只是光禿禿的一個圖形加上其中的文字，還是會有些單調(diào)，所以需要再加以補充、優(yōu)化，首先要在輪廓之外也放一些文字，比如頁碼和標題等，然后背景也可以與圖形呼應，比如這里用了與葉子呼應的森林圖片（背景做了高斯模糊處理）。

現(xiàn)在我們可以看到，版面的右上角明顯有點空，而且整體上還缺少一些對比關(guān)系，于是我把葉子的圖形復制出兩片，分別排列在主體右上角和左下角作為點綴，到這里這個小頁面的設(shè)計就完成了。

總結(jié)

圖形排版法可以使版面變得更有趣、更有創(chuàng)意，但是用不好也容易造成呆板、生硬的感覺，所以，最好不要把所有文字都限制在圖形范圍內(nèi)，上面的例子雖然簡單，但基本上回答了運用圖形排版會遇到的主要問題。最后請大家記住，版面中沒有哪一個元素是獨立的，要始終站在整體的角度來設(shè)計每一個局部。

藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

圖片相較于純文字具備更強的視覺性，所以選擇合適的好圖片就至關(guān)重要，下面為大家介紹三種思路。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

不懂手繪，但又想做插畫風格的Banner？那就必須看看今天分享給大家的 humaaans 人物插畫素材庫，它由 Pablo Stanley 設(shè)計師設(shè)計，是一套符合現(xiàn)代扁平化設(shè)計風格插畫素材，而它最大的特色是組件化繪制，用戶可通過素材庫的元素自行 DIY 成不同形象的插畫，適用于網(wǎng)頁、移動UI、以及 PPT 等用途。

DIY插畫介紹

目前該素材包含有人物及場景元素，但最多的是以人物為主，包含有不同的頭像、服飾、襪子，讓用戶能自由 DIY，就像下面演示圖一樣：

如果你是 Sketch 的用戶，還可能利用 Sketch Symol 功能來款式，更加方便。

沒有 Sketch 軟件也不用擔心，設(shè)計師將每個元素導出成 PNG/SVG 格式以及@2X大小版本，SVG 也是矢量格式，所以用 Photoshop 或 Ai 去自己 DIY 就行。

注：如果 Sketch 版打不開，通常是因為你的版本過低造成的，只要更新新版本就可以了。

還有幾個場景可以切換：

humaaans 的設(shè)計元素包含男女生頭像和服飾，個個都是年輕貌美啊，穿著都非常時尚呢……

這素材能用在什么地方？

網(wǎng)頁 Banner：

這么漂亮的時尚的插畫，不用在網(wǎng)頁上就是浪費啊，但不建議直接使用，要要學會怎么去 DIY，通過設(shè)置大小、比例、旋轉(zhuǎn)以及更改成和你界面一致的配色，讓 UI 統(tǒng)一這樣才算完美哦。

APP 啟動界面：

做移動端的引導頁也很好看。

插畫海報：

做一個這樣的賀卡、海報是不是也很 Nice?

藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

插畫一方面富于靈活表現(xiàn)，可根據(jù)設(shè)計師思維和想法進行各類創(chuàng)意，適用于各類視覺主題，另一方面又與嚴選簡約、精致的品牌形象契合度較高，因而是嚴選專題設(shè)計的一個主要表達方向，經(jīng)常在嚴選各類專題設(shè)計中得到應用，受到廣大用戶的喜愛與推崇。

許多剛?cè)胄械囊曈X設(shè)計師認為插畫風格專題設(shè)計需要非常專業(yè)的插畫功底才能完成，因而盡管覺得插畫風格專題唯美、形象卻敬而遠之不敢輕易嘗試，今天個人從以下五個步驟去解構(gòu)插畫風格專題設(shè)計，通過相對簡單易學的基本操作，讓沒接觸過插畫風格的設(shè)計師也能輕松駕馭與運用。

嚴選插畫風格設(shè)計五部曲

整體構(gòu)思

和所有風格的視覺設(shè)計一樣，插畫風格設(shè)計首先也需要進行整體的需求分析，主要進行以下方面工作。

1. 分析受眾與目標

首先需要對專題的受眾進行簡單的社會化分析，通過分析大體了解受眾的年齡層次、收入水平、審美品味、興趣愛好等，根據(jù)社會化特征信息建立用戶畫像，有利于設(shè)計方向與基調(diào)的確定。比如嚴選的目標用戶定位于20-35歲，具有穩(wěn)定的工作與收入，追求高品質(zhì)生活的都市白領(lǐng)。

其次需要深入分析專題所需要表達的目標和信息，通過色調(diào)、版式、字體、元素等設(shè)計手法準確傳達信息內(nèi)容的同時，帶給用戶更多美的感受，升華主題思想，強化品牌概念與服務(wù)。

2. 確定情感關(guān)鍵詞

所謂情感關(guān)鍵詞，就是我們產(chǎn)品的視覺所要表達的情感感受，比如情人節(jié)專題確定的「浪漫」、「溫馨」、「甜蜜」，新年專題的「喜慶」、「歡快」、「熱烈」，父親節(jié)的「責任」、「擔當」、「感恩」等等。確定好專題活動的關(guān)鍵詞后，將有助于我們進行整體風格的把握與塑造。

3. 整體意境構(gòu)思

確定好專題的方向后，接下來就可以構(gòu)思整體的意境以及挑選合適的素材，如新年專題我們會想到用大面積紅色作為主色調(diào)的布局，結(jié)合鞭炮、春聯(lián)、燈籠、年畫等中國傳統(tǒng)元素，通過合理的組織和編排，加上中國風的字體設(shè)計與適當?shù)募毠?jié)完善，共同勾勒營造一派喜慶祥和的氣象。

提取輪廓

基于前一步驟的構(gòu)思的整體意境，我們需要對挑選的現(xiàn)實素材進行插畫化改造。通常我們通過鼠標勾選的形式，將素材的輪廓勾勒出來并填充相應的顏色，使寫實的風格形象化、概括化和扁平化。

簡化圖形

插畫風格相對實物風格，去掉了大量的寫實細節(jié)，只保留主要的特征信息因而顯得扁平簡約但不失形象生動。因此在這個步驟我們需要將勾勒好的圖形進行簡化操作，以簡單圖形代替寫實描繪、多以面和色塊去代替原有的細節(jié)，簡化后的圖形具有高度的概括性。

完善細節(jié)

除了保證插畫的形象性與直觀性外，我們需要進一步對素材進行細節(jié)上的完善，以滿足進一步的審美性與趣味性，同時賦予元素一些創(chuàng)造性，可以嘗試通過以下方法進一步完善。

1. 移花接木

移花接木指將現(xiàn)實中不同時間和空間各類元素進行解構(gòu)和重組，創(chuàng)造出一些妙趣橫生的新事物，增加插畫內(nèi)容的趣味性。

2. 區(qū)分主次

將重要的、核心的元素進行強調(diào)刻畫、次要的元素進行弱化處理，從而拉開主次元素的層次關(guān)系，使畫面更加具有層次感和空間感。

3. 突破現(xiàn)實

通過調(diào)整元素間的比例關(guān)系，夸張的創(chuàng)造現(xiàn)實中并不存在的事物，更加容易吸引用戶的目光焦點。

優(yōu)化整體

經(jīng)過以上的步驟，我們的素材基本已完成插畫風格的改造，但插畫素材在整體專題界面中并非孤立的存在，而是和整體色調(diào)風格、版式、字體設(shè)計形成一套有機和諧的整體，共同去呈現(xiàn)專題需要表達的信息與目標。

案例分析

1. 千萬和春住專題

整體構(gòu)思

情感關(guān)鍵詞：清新、唯美

整體意境構(gòu)思：以嫩綠色作為主色調(diào)，結(jié)合桃花、陽光、汽車、風箏營造輕松出游踏青的歡快意境。

提取輪廓

從田野、桃花等幾張現(xiàn)實圖片中將頁面需求的主體元素進行提取，作為背影進行主體頁面的大面積輔色，將整體的色調(diào)感覺搭建出來。

簡化圖形

初步提取的輪廓由于過于具象，與唯美的主題風格不太協(xié)調(diào)，在這一步我們將主體元素進行簡化處理，用圓潤、可愛的幾何圖形加上明快的色塊去代替樹木，整體更加扁平、卡通化，營造更加輕松、自由的氛圍。

完善細節(jié)

為了更好的體現(xiàn)春天外出郊游的意境，我們對細節(jié)進行完善，增加了汽車、風箏等小元素，將桃花進行樹枝刻畫、太陽光芒的刻畫等處理，同時將遠處山景進行虛化，形成層巒疊障的連綿山脈，拉開了畫面的層次空間。

優(yōu)化整體

最后我們根據(jù)主題進行專題的字體設(shè)計，將常規(guī)的宋體進行變形處理，部分筆劃好似春風輕撫而飄逸，又加上了象征春天生機勃勃的嫩芽，富有生活趣味。通過一片桃花作為主體分別呈放若遇到新歡、若重拾舊愛的對應專題好禮，使頁面整體和諧統(tǒng)一。

2. 愛戀物語專題

目標：呈現(xiàn)出情人節(jié)情侶間的愛情的甜蜜與浪漫。

情感關(guān)鍵詞：浪漫、甜蜜

整體意境構(gòu)思：以甜美暖色作為主色調(diào)，通過主體元素禮物盒與情侶間夸張的比例關(guān)系抓住用戶眼球，浪漫甜美同時不失趣味性。

3. 新春集市新年專題

目標：呈現(xiàn)出春節(jié)喜慶熱鬧與琳瑯滿目的商品。

情感關(guān)鍵詞：喜慶、熱鬧

整體意境構(gòu)思：以中國傳統(tǒng)舞獅、牌樓、鞭炮等作為主體元素，谷倉作為次要元素，前后對比主次分明、空間感強，呈現(xiàn)了新春集市的縱深與五谷豐登的產(chǎn)品，整體氛圍熱烈喜慶，激發(fā)用戶的購買欲望。

總結(jié)

插畫風格的表達，既遵循著藝術(shù)設(shè)計的通用規(guī)則，又具備自身獨特的審核特征，需要設(shè)計師更多去發(fā)現(xiàn)生活中的美，通過以上五部曲將生活中各類元素進行不斷的重組、創(chuàng)造，在專題中進行特有的形象性、生動性、趣味性、創(chuàng)造性的藝術(shù)表達，從而豐富專題內(nèi)容，更好傳達專題思想。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

但殊不知其實我們每個人的色感，正是在兒童時期形成的，因為兒童時期的認知更加純粹，對于色彩的想象力以及受到的限制要比成人少得多，所以賦予色彩的深度和廣度也就比成年人更加豐富。

這也是為什么很多人看到小朋友的繪畫，會覺得他們很有配色天賦了。

所以我們要做的就是打破對色彩的固有認知，讓自己回歸到一種單純的狀態(tài)，來重新認識色彩。

比如現(xiàn)在給你一個蘋果，可能我們的第一反應就是直接把它吃了，事后要你回憶對蘋果這個物體的印象，也許你體會的并不深刻。

而如果我們改變條件，假設(shè)你從未見過蘋果，這一次你不僅要吃掉蘋果，還要說出你的感受。

根據(jù)你的五官對其進行認知，這時你對蘋果的體會將和前一次大不相同。

比如通過視覺我們可以看到綠色，通過嗅覺可以聞到果香，通過觸覺可以感受到堅硬，通過味覺可以品嘗到酸甜，通過聽覺可以聽到清脆聲。

而重新認識色彩也是同樣的道理，就像我們從未見過蘋果一樣去體驗一個假設(shè)我們從未見過的色彩，然后通過不同的角度去對色彩進行拆解，最后組合在一起形成屬于我們自己的配色體系。

賦予色彩名稱

創(chuàng)建個人色彩體系的第一步，就是為色彩命名。

比如我們隨便找一個顏色，就拿這個黃色來舉例。

根據(jù)自己對這個色彩的感覺來命名，可以隨意發(fā)揮，你想到什么就可以說什么，沒有限制。

比如從最基本的色相角度出發(fā)，我們可以叫它鮮黃色。

根據(jù)這個顏色我們可以聯(lián)想到向日葵，所以也可以命名為向日葵。

我們還可以聯(lián)想到月亮，所以也可以起名叫月亮黃。

那我們還可以聯(lián)想到《變形金剛》里的大黃蜂，所以也可以給這個顏色起名叫做大黃蜂。

還能聯(lián)想到麥當勞的陽光橙，所以也可以命名為陽光橙?？傊斈憧吹竭@個顏色時，腦海中能夠聯(lián)想到的詞匯都可以使用，哪怕是跟這個顏色相差很多也沒關(guān)系，最重要的是你自己的感受。

對色彩進行理性分析

對色彩進行命名之后，第二步要做的就是對色彩進行理性分析。

我們還是拿這個顏色來進行練習，先來找出它的色相、明度和飽和度。

首先根據(jù)色相環(huán)的大致位置，確定這個色彩的色相。

然后通過純度和明度的調(diào)整來找到與右側(cè)顏色相符的色值，這里我們得到了一個數(shù)值。

然后用吸管工具吸取右側(cè)的黃色，得到的結(jié)果和我們猜測的做比較，只要結(jié)果不是相差很大都是可以的，如果相差很多那就說明你對色彩的敏感度還有欠缺。

HSB色值猜想完之后我們再來看看它的RGB色值。

根據(jù)RGB原理很明顯黃色是由紅色和綠色混合得到的。

但是我們對比來看很明顯這兩個黃色還是有差別的，所以還需要進一步分析。

我們調(diào)出RGB色相環(huán)，我們看采樣的這個黃色是偏向紅色多一些還是偏向綠色多一些，很明顯是偏紅一些，因為它比較偏橙色。

所以我們就可以適當?shù)臏p少綠色的成分。

我們來看一下對比，已經(jīng)接近了。

最后我們通過RGB色值來對照一下，雖然紅色和綠色的色值相差不多，但是我們采樣的顏色中還有少部分藍色，肉眼其實很難看出來，但是我們可以自己去模擬一下。

這三個成分的三原色混合之后，得到的就是我們采樣的顏色了。

△ http://www.rgbchallenge.com/

如果想提升對RGB的敏感度，可以通過這個小游戲來練習一下。

玩法很簡單，根據(jù)畫面中給出的RGB色值來選擇你認為相對應的顏色，選對了繼續(xù)下一關(guān)，選錯了GAME OVER重來。

接下來我們來看CMYK色值。

黃色是CMY其中的一個原色，所以首先黃色肯定是最多的。

對比來看一下，很明顯采樣的黃色中還有其他顏色成分。

我們調(diào)出CMYK色相環(huán)，同樣也是看采樣的黃色偏向哪個方向，也是偏紅色多一些。

所以我們得到這個顏色中需要加入紅色，但是應該加多少呢？

這里我們加入了20%的紅，同時將黃色的含量降到80%，這個是根據(jù)經(jīng)驗和感覺來的。

這時將兩個顏色對比來看一下，已經(jīng)相差不多了。

最后通過數(shù)值來比對，可以說幾乎已經(jīng)很接近了。

只不過采樣的顏色中還帶有少量的青色，但是影響不大。

然后我們再來看看色調(diào)。關(guān)于色調(diào)這種老生常談的問題這里就不多講了，因為之前我專門寫過一篇關(guān)于色調(diào)的文章《高手的平面課堂！最容易上手的配色方法》，里面已經(jīng)講的很詳細了。如果你看過這篇文章，那么當你得到了一個顏色的CMYK色值時，就已經(jīng)可以判斷出是什么色調(diào)了。

如果沒看過也沒關(guān)系，我?guī)Т蠹襾韰^(qū)分一下，白色和純色之間是明色和淡色，純色和灰色之間是濁色和淡濁色，純色和黑色之間是暗色。

將這些代表性色調(diào)提取出來一比對，就可以知道這個色彩的大致色調(diào)是什么了。

很明顯我們采樣的這個顏色是介于純色調(diào)和明色調(diào)之間，你可以叫它純色也可以叫它明色。

色調(diào)看完之后我們再來看看它的色彩家族，也就是這五大色相關(guān)系。

首先我們來看看它的同類色是什么，如果大家剛開始比較困難可以偷個懶，調(diào)出色相環(huán)。

這樣找到相應的色相就非常簡單了，但是不建議大家這樣做，除非是新手或剛?cè)腴T的同學。

然后是近似色，相距45度的顏色。

然后是中差色，距離在90度左右。

接著是對比色，120度左右。

最后是互補色，對比最強烈，也就是相距180度左右的顏色。

這五大色相關(guān)系是最基本也是搭配起來最常見的，一般不太容易出問題。這里需要說明一點就是我們在對色值進行猜測的時候，不需要要求太高必須要完全一致，只要差不多就可以。并且大家在看教程的時候可能會覺得有些復雜佷麻煩，我做這些為了給大家演示看上去是花了些時間，但是當你自己在猜想的時候可能只是一瞬間的事情。

對色彩進行感性分析

下面我們再來看看第三步，對色彩的感性分析，所謂感性分析也就是說這個色彩給你什么感覺。

比如這個黃色給我們的正面意象有：陽光、輕松、幽默、開朗、熱鬧、歡樂、幼兒、開放、快樂；負面意象有吵鬧、廉價、不雅、軟弱、浮躁、輕浮、稚嫩、散漫、不安。注意在提煉感覺的時候不要約束自己，能夠聯(lián)想到的都可以記下來。

對色彩進行行業(yè)分析

然后是第四步對色彩進行行業(yè)分析，也就是說你認為這個色彩適合哪些行業(yè)或者你見過哪些行業(yè)使用過這個色彩。

比如最明顯的就是兒童、寵物、游戲、時尚、運動、促銷、餐飲、農(nóng)業(yè)、傳統(tǒng)、汽車等等。

對色彩進行設(shè)計應用

以上這些訓練做完之后就進入到了最后一步，也就是用這個色彩進行任意內(nèi)容的設(shè)計。

這是我們的文案，這里我們要設(shè)計的是關(guān)于詹姆斯十六代戰(zhàn)靴的三個Banner。

1. 案例一

首先根據(jù)尺寸創(chuàng)建版面，找到一張詹姆斯的圖片去底之后放到版面中，然后將主題信息放大并選擇一款具有力量感的字體編排到版面的中上位置，將中文標題和LOGO做重復編排。

將文字信息放置到人物下方，底部信息做描邊和變形處理為畫面增加形式感，最后將其他信息編排到空余的左側(cè)。

最后在主標題下方添加色塊來豐富一下版面，版式部分就完成了，接下來開始配色。

因為我們要用到采樣的這個黃色所以主色已經(jīng)確定了，但是這個畫面只用一個顏色顯然是不夠的，所以我們還需要其他顏色。

因為考慮到設(shè)計的內(nèi)容和風格所以我覺得配色上應該有一些對比，但是又不想使用對比很強的互補色，所以這里我選擇對比色，但是黃色的對比色有兩個應該選擇哪個呢，這里我選擇了紫色。

因為如果了解NBA的話應該知道，湖人隊的球衣本身就是黃色和紫色，也就是人們所謂的紫金戰(zhàn)袍。

但是這個紫色有些偏紅，所以我們可以調(diào)整成偏藍一些。這也是我想告訴大家的一點就是配色是靈活的，千萬不要死腦筋。

輔色確定了之后就可以為畫面填充顏色了，但是我們看填充完顏色之后人物圖片的顏色有些不協(xié)調(diào)，所以人物的顏色也需要調(diào)整。

這樣看上去就會好很多，那么第一個案例就完成了。

2. 案例二

第二個案例我們選擇鞋子來當主體，然后編排主標題。

將其余信息圍繞主體鞋子來編排，通過適當?shù)淖冃谓嵌葋頌楫嬅嬖黾屿`動。

但是兩側(cè)很明顯太空了所以可以添加色塊和文字，版式部分就完成了。

因為我們設(shè)計的這三個Banner是一個系列的，所以配色也應該是統(tǒng)一的不需要改動。

3. 案例三

我們再來看看最后一個案例，前兩個案例分別是以人物為主體和以產(chǎn)品為主體，所以第三個案例我就直接用文字編排，將文字信息進行分組給圖片留好位置。

為了增加一些形式感，下方的標題同樣進行描邊處理并進行裁剪。

那么同樣使用這組配色，將圖片放置到預先留好的位置上，這個案例也就完成了。

最后我們來看一下整體效果和效果圖。

本期教程到這里就結(jié)束了，我們從幾個不同的角度去對色彩進行拆解，大家回去之后可以自己多加練習，每天解構(gòu)一個色彩，這樣長期積累下來，你就會在不知不覺中創(chuàng)建了一套屬于你自己的配色體系。

但是我相信肯定會有人有疑問，如果照這樣做那糾錯機制在哪？因為這些都是大家自己去創(chuàng)建的很多內(nèi)容不一定對，如果你有這樣的疑問那說明你是認真學習的人，但是我這套方法并不是沒有糾錯機制，這個糾錯機制就是你自己，在漫長的時間里你的成長、歷練、感受、學習都會影響你對一個色彩的認知，可能幾個月甚至幾天之后你看待同一個色彩的感覺都是不同的。所以放心大膽的去做吧，只要你肯堅持，火候到的時候自然就會有所收獲。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。