新年自學計劃！寫給UI設計新人的知識體系指南

導讀：一名視覺設計師到底應該有怎樣的設計體系呢？今天菜心分享一下自己的整個體系規劃，這是一個非常龐大的系統，但只要有了清晰的方向，就能讓我們清楚自己處在什么階段，也就不會迷茫了。

閱讀時長約10分鐘，內附大量教程，建議馬克這篇，以后按圖索驥即可

此文主要適讀人群：夢想成為“全棧設計師”的你（偏向移動端產品）！

當然設計都是相通的，即使你的職位是產品設計、交互設計、網頁設計、平面設計也都不妨一看，相信你也可以有所收獲！

之前我就說過關于高級設計師的必經之路就是建立自己的設計體系，那作為一名視覺設計師到底應該有怎樣的設計體系呢？今天菜心就來分享一下自己的整個體系規劃，這是一個非常龐大的系統，目前我也正在按照這個系統來逐一總結，當然這需要一段十分漫長的過程才能完成，但是只要我們有了清晰的規劃，至少這份規劃可以讓我們清楚自己處在什么階段，避免發生自我迷茫的情況。

這個體系只是我本人擬定的一份粗略規劃（僅供參考），有一些點之前總結過，還有很多暫時沒有總結，以后會陸續推出，希望大家持續關注！

大綱如下（哪里不會補哪里吧）：

1. 對App 基礎控件的認知
2. 字體
3. 配色
4. 圖標設計
5. 標注與切圖規范
6. 排版的基礎原則
7. 簡單的動效設計
8. 走查規范
9. 交互常識
10. 項目文件管理
11. 個人素材、資源庫
12. 開發常識
13. 數據分析能力
14. 產品常識
15. 用研常識

1. 對App 基礎控件的認知

作為移動端產品的視覺設計師，我們首先要對app內的一些基礎控件有所了解，比如說：按鈕、導航、彈窗、浮層、表單等等，當然這里的每一項其實都有各自的一套體系，完全可以單獨拿出來講解，之前我有系統的總結過關于彈窗的分類，大家有興趣的可以查看：http://www.czdes.cn/advanced-ui-designer-design-system，之后也會陸續更新其他部分的內容。

這里需要強調一點，如果有精力的同學可以看看蘋果和安卓的系統控件，對我們深入了解app規范會有很大的幫助。

對于控件如何分類，其實想有一個十分精準的定位與分類其實是非常困難的，尤其是在現在雙系統（蘋果和安卓）趨于同質化的今天，我們更難單維度的去將所有控件精準無誤的分類，但我們可以參考業界的規范，針對自己的平臺屬性去進行梳理與分類，還是那句老話，只要有理論依據并且對實際工作有指導意義，那就是正確的。

2. 字體

對于字體，我們需要了解各個系統使用的默認字體，還需要知道一些常用場景下的字體大小，比如說：導航欄一般使用32、34、36px的字體大小，底部標簽欄的字體大小一般為20px等等，這些內容在網上有很多資料，大家可以自行查閱。

當然對于平面運營類的設計，字體還有另外一套說法，我們會將字體分為以下幾種類型：襯線體、非襯線體、手寫體、書法體，當然還可以自己去設計字體，如果平時經常會接到運營類的需求，不防對每一種字體的特點和使用場景都好好總結一番。

溫馨提示：電腦里的字體不用太多，每一種類別的字體裝一兩個即可，關鍵是將其用好。

相關推薦：《騰訊設計師總結的那些百用不厭的明星字體》

3.配色

對于顏色，至少我們要學會以下兩點

（1）顏色的基本認知：設計師配色寶典！教你從零開始學配色

（這一篇文章還不錯，推薦一看）

（2）實際項目中，我們應該如何選取顏色、如何制定顏色規范，這也是我后期準備總結的內容。

4. 圖標設計

關于圖標設計，之前我有簡單總結過，大家可以選擇性查看：《從零基礎到合格，我總結了這5個圖標設計實戰方法》，這里我就不多說了。

5. 標注與切圖規范

以前在用PS 做界面設計時，標注切圖是個很麻煩的事情，不過現在隨著sketch 的普及，標注和切圖都已經趨于自動化，越來越便利，但是對我們的設計稿規范要求也越來越高。

關于切圖的命名規則之前菜心有總結過：《寫給UI設計新手的切圖命名規則手冊》

后期會對標注以及如何切圖進行更深入的總結。

6. 排版的基礎原則

這里提兩個比較基礎的知識點

（1）排版的要素：構圖（視角）、顏色、字體、點綴。

（2）排版的原則：對齊、對比、親密性、重復。

建議大家可以買一本《寫給大家看的設計書》，寫的非常棒，對于沒有排版經驗的小伙伴很有幫助。

如果不想買書的話，也可以在網上找找相關的資料與教程，或者等我以后總結。

編者注：這3個教程都能幫你在實戰中學會排版。

1. 《設計易容術！如何設計一張高品位高水準的海報？》
2. 《設計易容術！如何設計一張高品位高水準的海報（二）》
3. 《設計易容術！如何設計一張高品位高水準的海報？（三）》

7. 簡單的動效設計

會做點動效會給我們加分不少，尤其是做一些加載動畫，這是我們經常會遇到的需求，關于加載動畫的場景分類之前有總結過，不了解的可以自行查看：《交互/視覺都需要掌握的App加載動畫知識體系》

至于使用的工具，其實很多軟件都是可以的，我一般會用ps做一些動態表情，用AE做一些加載動畫，而頁面之間的交互動效大家可以使用flinto、principle之類的軟件。

編者注：工具推薦可以看看這篇：《新人手冊！動效設計幾乎都是這10個軟件做的（內附教程）》

8. 走查規范

關于走查，不同的團隊有不同的規范與形式，目的是為了檢查我們設計稿的還原程度，是視覺設計師必須要經歷的工作環節，小公司的話可以直接和開發進行溝通并修改，但是在大公司一定要將問題點梳理清楚后發郵件給項目組與開發哥哥，有些不清楚的地方也需要當面進行闡述。

基本的做法就是將手機上現實稿截屏與原版設計稿進行對比，列清楚所有問題點，并告知如何修改，至于用什么軟件，可根據自己團隊的需求統一規定。

9. 交互常識

交互和視覺有很多交集的地方，比如控件的分類與定義、頁面信息的布局方式等等，但是交互有很多值得視覺學習的地方，其中最重要的一點就是思維邏輯，對于產品的邏輯，他們要比我們思考的更加全面、透徹。至于他們如何思考，之前我也總結過一篇文章，大家可以選擇性的查閱：《做交互方案時，請注意檢查這4個點》

如果你覺得視覺設計是你的重心，以后也不想往交互方向發展，那就點到為止，了解一些基礎即可，一定要把握好自己的方向，千萬不要忘記主次。

10. 項目文件管理

這里就是告訴大家，每個項目的文件自己都要管理好，不然后期隨著文件的增加、版本的迭代，如果沒有一個分類規則，找文件時非常麻煩。至少我們在做項目之前，需要建幾個最重要的分類文件，如下圖：

至于里面怎么細分，以后再找機會詳細的講解。

11. 個人素材、資源庫

定期要對自己的資源進行整理與分類，比如說你的網站資源，下面的這張圖是我的資源管理分類，大家可以參考：

后期我會再詳細的整理一下，和大家分享一些我收藏的資源。

編者注：也可以參考這篇人氣好文丨《15G的素材怎么管？手把手教你打造一個低管理成本的素材庫》

12. 開發常識

作為視覺設計師，經常會和開發對接溝通，如果我們能了解一些關于開發的基礎知識和他們的思維邏輯，一定可以避免很多不必要的時間浪費。在上次制作規范時，由于對很多開發邏輯的不清楚，導致執行過程中遇到很多問題，后來進行了梳理總結，參見《進階必讀！UI 設計規范的制作思路+常見問題總結》

大家可以選擇性查閱。

13. 數據分析能力

對于數據分析能力，對我們要求不高，但至少我們需要知道網站流量統計指標大致可以分為三類：IP、PV、UV（現在IP已經很少用了）。

至于這三個概念是什么意思，百度一下，網上有很多。

我們還需要通過這三類數據的變化，簡單分析出產品可能存在的問題及解決方案。舉個簡單的例子，如果進入支付頁面的點擊率有很顯著的增加，但是平臺的交易額卻不見增長，那我們就應該很快分析出，一定是支付環節的設計或程序發生了故障，要么有程序有bug，要么體驗有漏洞等等。

這就是一個最簡單的數據分析。

編者注：優設數據分析指南丨http://www.czdes.cn/data-measure-starter-guideline

14. 產品常識

關于產品常識，對我們的要求也不高，短期內把需求分析、產品定位等等這些基礎的知識點理解清楚就足夠用了，近期會分享一篇關于產品定位的總結，敬請期待。

15. 用研常識

用研常識也一樣，也是一些基礎的知識點，短期內了解即可，比如用戶旅程圖、情感圖譜、問卷調查等等，不要過于深究，以免本末倒置。

編者注：優設用研學習指南丨《想學習用戶體驗設計研究，這篇新手完全入門指南可以幫你》

以上就是菜心目前的設計體系規劃，可能還不夠全面，后面會慢慢查缺補漏。

我們為什么會經常迷茫，其實就是因我們不清楚自己的方向，不清楚自己的規劃，不清楚自己所處的位置，這也是我做這份規劃的原因，希望能給大家一點思路上的啟發。

最后菜心還是想說：看的再多那也都是別人的，你的總結才是自己真正沉淀下來的，在這么一個信息爆炸的時代，我們缺少的不是信息與資源，而是一份專注與沉淀。2017，我們一起加油！

歡迎關注作者的微信公眾號：「菜心設計鋪」

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

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