@野子Joey ：筆者的專業是交互設計，課程框架更注重用戶研究和邏輯分析，視覺設計的課程十分有限。然如今交互設計師的崗位更希望求職者同時能勝任視覺設計的工作，為了提升自己，不被社會所淘汰，筆者最近自學了?Lynda?上的 Introduction to Graphic Design 的課程，現將課程重點整理如下，希望能對大家有所裨益。

首先，什么是視覺設計

通過對文字，符號，圖片的有意設計達到視覺上的和諧交流

什么構成好的視覺設計

1. Form: 審美層，好不好看，視覺上是否吸引，顏色是否和諧，字體是否搭配
2. Feeling: 是否傳遞了意圖信息，傳遞的信息是否統一，是否能引起用戶的情感共鳴
3. Function: 是否滿足設計目的，是否易于理解，是否可使用

第三點尤其重要，過于花哨而不實用的設計，引用教程里的一句話就是 > Form without function is just a piece of paper. – UNKNOW

優秀設計欣賞[嘗試總結好在哪里，便于自己下次使用]

下面，三種你需要的技能：

1. 排版類：將頁面中的元素進行視覺上的排列
2. 字體類：字體類型，字體設置等
3. 圖像類：攝影，插畫，繪畫，配色等

一，六個排版的基本法則

Balance：讓你畫面給人一種平衡感，介紹三個方法，對稱排列，非對稱排列，徑向對稱排列。

Proximity：將相同的元素盡量聚集在一起，不同的元素盡量分開

Alignment：盡量讓相似元素彼此對齊，讓頁面中的非對齊線條盡可能少

Repetition：重復元素用于將設計連為一個有節奏的整體

Contrast：有意對比強化反差[大小，粗細，形狀，顏色等]，突出效果

White Space：留白是一種藝術，less is more

不了解這些法則之前，可能對排版只有主觀上的美和丑。了解之后多留意身邊的設計，你會會發現世界竟是如此多嬌。

編者注：分享一些適合新手的排版教程

1. 《排版寶典！20個設計新手常犯的排版設計誤區》
2. 《關起門來漲姿勢！如何從AV封面中學習平面設計？》
3. 《關起門來漲姿勢！如何從AV封面中學習平面設計？（二）》

字體如何選擇

教程是英文的，很多內容只適合英文字體。但核心內容主要是強調字體選擇需要既區分又統一。區分是指標題和正文盡量一個采取無襯線字體，另一個采取襯線字體。

類比到中文上，一如黑體，筆畫粗細接近，轉彎處較圓滑，沒有明顯的起鋒和收鋒痕跡。

再如宋體，筆畫有明顯粗細過度，筆鋒明顯。

將二種不同類型的字體用于不同功能的文字，可讓人對文字有明顯的區分感，從形式上便可知其功能。

統一是指盡量不要用兩種不同的字體在同一功能區域，且讓所有相同功能區域的字體保持一致，不要來回變化。

如下圖，標題采用非襯線 Proxima Nova Soft 字體，正文采用襯線 PT Serif 字體。同時，增大和加粗標題，整體上就會給人一種良好的視覺感。

有時，將標題和正文的字體顛倒過來，能帶來更好的視覺效果，多選擇，多嘗試，你的眼睛會告訴你哪一種方案更美。

這里推薦一個在線查看字體的網址，Typekit. 你可在右側選擇字體的大致特征，Adobe 會在左側推薦給你相應字體，真的狂拽酷炫屌炸天。

編者注：字體教程推薦

1. 《字體的性格！未成曲調先有情》
2. 《騰訊設計師的私人筆記！幫你全方位掌握英文字體基礎》

顏色如何選擇

這需要你對顏色認知有長久的積累，最基本的暖色調和冷色調。其次要記住每一種對應什么情感（不同文化有差異），比如黃色容易讓人感到快樂，緊張。藍色容易讓人感到鎮定，沉穩，信任。綠色讓人感到舒適，和諧，緩解緊張。粉色讓人感到浪漫，興奮，刺激。

因此，大部分政府，銀行類網站會選用藍色作為主色調，想象一下12306化身為粉色小公舉的趕腳，分分鐘出戲有木有。

選取一個主色調后，如何配色讓整個頁面看上去和諧呢？主要有三個規則，互補，類似，三角。這是設計們總結出來的寶貴經驗，教程也沒有解釋為什么這么做看上去很美，可能是人天生的神奇特質吧（知道的朋友還請科普下）。

了解了三個基本法則后，Adobe 又送給了設計們一個神器，配色網站?Adobe Color CC.

選取主顏色后，可以在下拉菜單中選擇配色方案，Adobe 會自動幫你生成對應色板，并且你還有繼續自定義。保存后，可下載或同步至任何 Adobe 軟件中使用，真的是業界良心。

當你對一個主題的顏色猶豫不定時，你還可以使用它的搜索功能，比如老外想設計一個中國風的網站，他不知道該使用什么顏色。點擊 Explore Tab, 搜索 China, 亮瞎他鈦合金雙眼的中國紅分分鐘出來有沒有。

了解了入門知識，下面便可以開始試著設計了。

編者注：配色教程推薦

1. 《色彩搭配速成！3個實用方法幫你全面搞定配色》
2. 《幫你從零開始全面掌握UI設計的配色方法》

實戰時，你必備的三個基本設計軟件

1. Adobe InDesign: 排版軟件，尤其在處理段落字體排版上無出其右。
2. Adobe Photoshop：圖片處理軟件，沒有你做不到的，只有你想不到的。
3. Adobe Illustrator：矢量圖編輯軟件，Logo, Icon, 插畫的最愛。

第一次用 AI 畫的，有沒有很丑呢。

這些軟件個人覺的入門都不難，后期主要是耐心和不斷練習，抽時間多逛逛設計網站，發現一些軟件使用的技巧，逐漸積累，不斷堅持，有一天相信你也會成為這一領域的大神。

先畫草圖，再用軟件

人都有高估自己，低估他人的「自負」傾向，覺得自己付出努力的東西總比別人做的好。因此，如果當你一開始就用軟件繪制高保真草稿時，你會有很大的排斥感去修改你的作品當別人給你修改意見時。所以，教程中建議大家先在紙上進行草圖繪制，頭腦風暴，從眾多草圖中汲取精華，然后討論，修改，驗證，確定終稿思路后再進入軟件繪制。

草圖：

結合各個元素后的終稿:

這是我會繪制的草圖模板，A4大小，直接打印即可，節省自己畫方框的時間成本，下載地址。

LAST BUT NOT LEAST

多分享，多討論。任何大神都是從菜鳥一步一步成長起來，我們走過的坑他們之前全都走過，如果你認識有經驗的設計師，多問問他們的學習經驗對你會大有裨益。如果你不認識，NO PROBLEM, 在互聯網的時代，任何人你都可以「網」住。推薦?Behance?社區，PO 出你的作品，收集眾多小伙伴的反饋，進而改進，他人的關注和鼓勵是自我努力前進的極大動力。此外，還可以關注上面的大大，私人套瓷獲取設計經驗，運氣好還可以找到屬于你的那個TA哦。

作者目前在美國讀設計專業，歡迎同學們加他微信交流：

【優設人氣PS人像教程合集】

廣告最愛的牛奶潑濺效果人像！
《PS新手教程！手把手教你打造廣告級的牛奶噴濺美女人像效果》

超酷炫的文字人像效果！
《PS教程！手把手教你繪制酷炫的文字人像效果》

手繪人像效果！
《PS人氣教程！手把手教你將照片做成手繪作品（附方法大全）》

原文地址：joeyqiang.me

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量112萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com