寫給不懂設計的你—設計的法則

五大元素

一個視覺設計師的培訓是需要很長一段時間，尤其是美感的訓練，更是需要時間累積。一個好的設計師並不是只會用軟體而已，而是懂的設計的法則、色彩的搭配，並且透過不斷的繪圖、實作累積，最後才能訓練一個厲害的視覺設計師，但這樣設計師真的很少見，大部分的設計師大概就是學會了軟體怎麼用之後，就開始接案，很多設計師在色彩搭配上、排版上，都很容易給人髒或亂的概念，雖然我自己也沒有經過正統設計學習與培養的過程，也不是什麼厲害的設計師，但這些年來我總算抓到了一些大概，提供給完全不懂設計但工作上還是得接觸的你。

當你攤開廣告DM或網頁等等的設計品之後，你可以將畫面分為五大類：文字、圖片或影音素材、排版、色彩、閱讀動線。所以如何學好設計？掌握這五大類元素就是非常重要的事。不管你在看任何東西，基本上只要與視覺設計有關，通常都免不了遇到這五大類的元素，就算你今天做的是黑白印刷，也會有黑色深淺問題，所以想掌握設計的法則，這五大類是基本功。

設計的法則：第一條 文字

當我們提到文字的時候，不光是字的本身，還包含字跟字的間距、行與行的行距，這些跟文字有關事都可以歸類在文字這個項目裡。基本的文字法則就是從字體本身開始，字體有分襯線體、非襯線體兩種，以中文字來舉例就是有勾勒的書法字體是襯線體，而像黑體、圓體這種比較圓滑的就是非襯線體，以英文來說就是Serif襯線體與San-Serift非襯線體。字體又有分基線、大寫高度線，與小寫高度線，這個部分在方正的中文字比較難看出來，但在英文上就非常的明顯，每個字與字的間距我們稱為字距，行與行的距離稱為行距，字距與行距會影響你閱讀一篇文章的舒適度。如果你在做閱讀性高的內容網站，這些微小的字距與行距都會直接影響網友的頁面停留時間，所以千萬不要忽略。

設計的法則：第二條 圖片或影音素材

「A picture is worth a thousand words.」的意思是一張圖勝過一千個字，中文也有詩中有畫、畫中有詩這樣的句子，為什麼會把圖片說得這麼重要？原因是圖片通常都是彩色的，可以讓人富有想像力，可以讓人不自覺得去聯想，這是與視覺的互動，如果你又可以用上影片或聲音，製造聽覺、視覺的互動，那就算你的頁面內容很少，也可以營造出令人深刻的氛圍，也因為如此，圖片與影音的運用就佔得非常重要的地位，妥善安排這些素材可以讓你較為平面的文字瞬間立體起來，就像你的設計稿有魔法一般！

設計的法則：第三條 排版

排版到底是指什麼？其實排版是指所謂的格線系統（Grid System），主要是協助設計師可以讓看似沒有條理的內容變得更整齊，在雜誌內容上你很容易看出雜誌的排版是有一個邏輯在的，甚至你可以依據文字段落的兩邊畫出現來，這些線就是所謂得格線系統（Grid System），在網頁上也有這樣的東西，常用得格線系統有12欄格線系統或16欄、24欄格線系統，以12欄格線系統舉例，就是把你當前的畫面（如果是印刷就是紙張的寬度，如果是網頁就是螢幕解析度），均分成12等份，每個等份中間都會有一至的間距，依據這樣劃分出來的欄位就是所謂的12欄格線系統，當然除了直線（以寬度做基準）的格線系統以外，也有橫線（高度做基準或直接把寬度的橫線基準轉90度），如此一來，你的畫面就會出現類似棋盤的格狀，而這些就是要把文字、圖片等元素擺放進去的格子，並且透過這些格線做對齊的動作，當設計師完稿後就會把格線刪除（大部分是隱藏）讓印刷或輸出成設計稿的時候不會印出這些格線來。簡單來說，排版就是運用格線系統將所有的東西都「對齊」，這就是排版的秘密。

設計的法則：第四條 色彩

色彩學是一門非常深的學問，大部分都會從伊登十二色相環開始，甚至會開始要求畫色票之類的動作，除了我們常見的彩虹七色外，每一個顏色都還會有明亮度與彩度的區別，甚至還會有透明度的運用，對於配色有障礙的人來說，最簡單的方式就上網找配色網站，裡面已經有幫你配好顏色了，你可以照著色票上的顏色才做搭配，但如果你想要進階一點，我可以教你我被訓練配色這件事的作法。這是當初我的大學設計老師教我的，一直到現在如果時間允許，我還是加減做練習，而且練習的方式非常簡單，你只要拿起你的智慧型手機，開啟拍照模式就可以了，想當初我為了做這個練習還買了一台數位相機，畫素超低只有200萬，對於窮學生來說還算負擔得起，於是我就每天不斷地拍照，不斷地拍照，漸漸的從傻瓜數位相機拍到的單眼入門款，漸漸的從一天一千張照片挑不出十張好看得，到最後我每兩張就有一張我覺得不錯的照片。攝影除了可以訓練配色以外，也可以順便訓練美感，是個很棒的訓練，如果你對設計有興趣，建議你可以開始隨手拍照，累積久了你就會發現這些照片對你的影響了。
如果你不喜歡直接找配色網站，覺得看配色網站那些配色沒有意義，你可以找網路上你覺得顏色不錯的照片，然後從這張照片裡挑選出你喜歡的顏色，久而久之你就會發現，其實我們每天看的世界，每個物品的配色，都是比照大自然或日常生活而定，當一些顏色放在不適合的東西時，你就會開始覺得亂了。

設計的法則 第五條 ：閱讀動線

順序，在設計上是非常重要的一件事，如果你是在畫演唱會或電影海報，你不會把時間、地點、出演人等等的文字訊息東一塊、西一塊，絕大部分都會擺放在一起，原因是這樣閱讀起來才不會跳來跳去，看的人也比較容易知道你想傳達的訊息。大部分的書籍、網頁、海報的閱讀動線都是由左至右、由上到下，所以在文字內容、圖片等元素的安排上，就必須要怎麼妥善安排才不會影響閱讀動線，又可以讓段落清晰、明確，不會讓閱讀的人覺得壓力大，保留舒服的閱讀動線，如此一來你才能將想傳達的訊息完整傳遞出去。

以上對於一個想了解設計的人來說已經非常夠用，如果你還想再進階一點，那我有一個建議要給你，假設你想提升你在網頁設計上的設計力，那我會建議你去找一張你覺得不錯的設計，然後開始模仿，透過仿效的方式將別的設計師的功力，透過實作練習而內化成自己的能力，再透過大量的練習加深自己的能力，這樣有目標性的模仿學習，會比不知道在往哪裡前進還來的有目標，也能確保你是在跟大師學習他們的設計力，但請記住，這些練習因為都是模仿，千萬不要拿去當作品，每個厲害的設計師其實有一堆被打槍的飛機稿（就是已經設計完成卻被客戶退貨而最後只能放在硬碟裡被遺忘在數位化的角落），這些檔案就是設計師累積出來的設計力，更何況你累積出來是模仿大師的設計稿，你所累積的設計力肯定會更扎實、可靠！