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

閱讀時(shí)長(zhǎng)約10分鐘，內(nèi)附大量教程，建議馬克這篇，以后按圖索驥即可

此文主要適讀人群：夢(mèng)想成為“全棧設(shè)計(jì)師”的你（偏向移動(dòng)端產(chǎn)品）！

當(dāng)然設(shè)計(jì)都是相通的，即使你的職位是產(chǎn)品設(shè)計(jì)、交互設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、平面設(shè)計(jì)也都不妨一看，相信你也可以有所收獲！

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

這個(gè)體系只是我本人擬定的一份粗略規(guī)劃（僅供參考），有一些點(diǎn)之前總結(jié)過，還有很多暫時(shí)沒有總結(jié)，以后會(huì)陸續(xù)推出，希望大家持續(xù)關(guān)注！

大綱如下（哪里不會(huì)補(bǔ)哪里吧）：

1. 對(duì)App 基礎(chǔ)控件的認(rèn)知
2. 字體
3. 配色
4. 圖標(biāo)設(shè)計(jì)
5. 標(biāo)注與切圖規(guī)范
6. 排版的基礎(chǔ)原則
7. 簡(jiǎn)單的動(dòng)效設(shè)計(jì)
8. 走查規(guī)范
9. 交互常識(shí)
10. 項(xiàng)目文件管理
11. 個(gè)人素材、資源庫
12. 開發(fā)常識(shí)
13. 數(shù)據(jù)分析能力
14. 產(chǎn)品常識(shí)
15. 用研常識(shí)

1. 對(duì)App 基礎(chǔ)控件的認(rèn)知

作為移動(dòng)端產(chǎn)品的視覺設(shè)計(jì)師，我們首先要對(duì)app內(nèi)的一些基礎(chǔ)控件有所了解，比如說：按鈕、導(dǎo)航、彈窗、浮層、表單等等，當(dāng)然這里的每一項(xiàng)其實(shí)都有各自的一套體系，完全可以單獨(dú)拿出來講解，之前我有系統(tǒng)的總結(jié)過關(guān)于彈窗的分類，大家有興趣的可以查看：http://www.hx168888.com/advanced-ui-designer-design-system，之后也會(huì)陸續(xù)更新其他部分的內(nèi)容。

這里需要強(qiáng)調(diào)一點(diǎn)，如果有精力的同學(xué)可以看看蘋果和安卓的系統(tǒng)控件，對(duì)我們深入了解app規(guī)范會(huì)有很大的幫助。

對(duì)于控件如何分類，其實(shí)想有一個(gè)十分精準(zhǔn)的定位與分類其實(shí)是非常困難的，尤其是在現(xiàn)在雙系統(tǒng)（蘋果和安卓）趨于同質(zhì)化的今天，我們更難單維度的去將所有控件精準(zhǔn)無誤的分類，但我們可以參考業(yè)界的規(guī)范，針對(duì)自己的平臺(tái)屬性去進(jìn)行梳理與分類，還是那句老話，只要有理論依據(jù)并且對(duì)實(shí)際工作有指導(dǎo)意義，那就是正確的。

2. 字體

對(duì)于字體，我們需要了解各個(gè)系統(tǒng)使用的默認(rèn)字體，還需要知道一些常用場(chǎng)景下的字體大小，比如說：導(dǎo)航欄一般使用32、34、36px的字體大小，底部標(biāo)簽欄的字體大小一般為20px等等，這些內(nèi)容在網(wǎng)上有很多資料，大家可以自行查閱。

當(dāng)然對(duì)于平面運(yùn)營(yíng)類的設(shè)計(jì)，字體還有另外一套說法，我們會(huì)將字體分為以下幾種類型：襯線體、非襯線體、手寫體、書法體，當(dāng)然還可以自己去設(shè)計(jì)字體，如果平時(shí)經(jīng)常會(huì)接到運(yùn)營(yíng)類的需求，不防對(duì)每一種字體的特點(diǎn)和使用場(chǎng)景都好好總結(jié)一番。

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

相關(guān)推薦：《騰訊設(shè)計(jì)師總結(jié)的那些百用不厭的明星字體》

3.配色

對(duì)于顏色，至少我們要學(xué)會(huì)以下兩點(diǎn)

（1）顏色的基本認(rèn)知：設(shè)計(jì)師配色寶典！教你從零開始學(xué)配色

（這一篇文章還不錯(cuò)，推薦一看）

（2）實(shí)際項(xiàng)目中，我們應(yīng)該如何選取顏色、如何制定顏色規(guī)范，這也是我后期準(zhǔn)備總結(jié)的內(nèi)容。

4. 圖標(biāo)設(shè)計(jì)

關(guān)于圖標(biāo)設(shè)計(jì)，之前我有簡(jiǎn)單總結(jié)過，大家可以選擇性查看：《從零基礎(chǔ)到合格，我總結(jié)了這5個(gè)圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)方法》，這里我就不多說了。

5. 標(biāo)注與切圖規(guī)范

以前在用PS 做界面設(shè)計(jì)時(shí)，標(biāo)注切圖是個(gè)很麻煩的事情，不過現(xiàn)在隨著sketch 的普及，標(biāo)注和切圖都已經(jīng)趨于自動(dòng)化，越來越便利，但是對(duì)我們的設(shè)計(jì)稿規(guī)范要求也越來越高。

關(guān)于切圖的命名規(guī)則之前菜心有總結(jié)過：《寫給UI設(shè)計(jì)新手的切圖命名規(guī)則手冊(cè)》

后期會(huì)對(duì)標(biāo)注以及如何切圖進(jìn)行更深入的總結(jié)。

6. 排版的基礎(chǔ)原則

這里提兩個(gè)比較基礎(chǔ)的知識(shí)點(diǎn)

（1）排版的要素：構(gòu)圖（視角）、顏色、字體、點(diǎn)綴。

（2）排版的原則：對(duì)齊、對(duì)比、親密性、重復(fù)。

建議大家可以買一本《寫給大家看的設(shè)計(jì)書》，寫的非常棒，對(duì)于沒有排版經(jīng)驗(yàn)的小伙伴很有幫助。

如果不想買書的話，也可以在網(wǎng)上找找相關(guān)的資料與教程，或者等我以后總結(jié)。

編者注：這3個(gè)教程都能幫你在實(shí)戰(zhàn)中學(xué)會(huì)排版。

1. 《設(shè)計(jì)易容術(shù)！如何設(shè)計(jì)一張高品位高水準(zhǔn)的海報(bào)？》
2. 《設(shè)計(jì)易容術(shù)！如何設(shè)計(jì)一張高品位高水準(zhǔn)的海報(bào)（二）》
3. 《設(shè)計(jì)易容術(shù)！如何設(shè)計(jì)一張高品位高水準(zhǔn)的海報(bào)？（三）》

7. 簡(jiǎn)單的動(dòng)效設(shè)計(jì)

會(huì)做點(diǎn)動(dòng)效會(huì)給我們加分不少，尤其是做一些加載動(dòng)畫，這是我們經(jīng)常會(huì)遇到的需求，關(guān)于加載動(dòng)畫的場(chǎng)景分類之前有總結(jié)過，不了解的可以自行查看：《交互/視覺都需要掌握的App加載動(dòng)畫知識(shí)體系》

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

編者注：工具推薦可以看看這篇：《新人手冊(cè)！動(dòng)效設(shè)計(jì)幾乎都是這10個(gè)軟件做的（內(nèi)附教程）》

8. 走查規(guī)范

關(guān)于走查，不同的團(tuán)隊(duì)有不同的規(guī)范與形式，目的是為了檢查我們?cè)O(shè)計(jì)稿的還原程度，是視覺設(shè)計(jì)師必須要經(jīng)歷的工作環(huán)節(jié)，小公司的話可以直接和開發(fā)進(jìn)行溝通并修改，但是在大公司一定要將問題點(diǎn)梳理清楚后發(fā)郵件給項(xiàng)目組與開發(fā)哥哥，有些不清楚的地方也需要當(dāng)面進(jìn)行闡述。

基本的做法就是將手機(jī)上現(xiàn)實(shí)稿截屏與原版設(shè)計(jì)稿進(jìn)行對(duì)比，列清楚所有問題點(diǎn)，并告知如何修改，至于用什么軟件，可根據(jù)自己團(tuán)隊(duì)的需求統(tǒng)一規(guī)定。

9. 交互常識(shí)

交互和視覺有很多交集的地方，比如控件的分類與定義、頁面信息的布局方式等等，但是交互有很多值得視覺學(xué)習(xí)的地方，其中最重要的一點(diǎn)就是思維邏輯，對(duì)于產(chǎn)品的邏輯，他們要比我們思考的更加全面、透徹。至于他們?nèi)绾嗡伎迹拔乙部偨Y(jié)過一篇文章，大家可以選擇性的查閱：《做交互方案時(shí)，請(qǐng)注意檢查這4個(gè)點(diǎn)》

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

10. 項(xiàng)目文件管理

這里就是告訴大家，每個(gè)項(xiàng)目的文件自己都要管理好，不然后期隨著文件的增加、版本的迭代，如果沒有一個(gè)分類規(guī)則，找文件時(shí)非常麻煩。至少我們?cè)谧鲰?xiàng)目之前，需要建幾個(gè)最重要的分類文件，如下圖：

至于里面怎么細(xì)分，以后再找機(jī)會(huì)詳細(xì)的講解。

11. 個(gè)人素材、資源庫

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

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

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

12. 開發(fā)常識(shí)

作為視覺設(shè)計(jì)師，經(jīng)常會(huì)和開發(fā)對(duì)接溝通，如果我們能了解一些關(guān)于開發(fā)的基礎(chǔ)知識(shí)和他們的思維邏輯，一定可以避免很多不必要的時(shí)間浪費(fèi)。在上次制作規(guī)范時(shí)，由于對(duì)很多開發(fā)邏輯的不清楚，導(dǎo)致執(zhí)行過程中遇到很多問題，后來進(jìn)行了梳理總結(jié)，參見《進(jìn)階必讀！UI 設(shè)計(jì)規(guī)范的制作思路+常見問題總結(jié)》

大家可以選擇性查閱。

13. 數(shù)據(jù)分析能力

對(duì)于數(shù)據(jù)分析能力，對(duì)我們要求不高，但至少我們需要知道網(wǎng)站流量統(tǒng)計(jì)指標(biāo)大致可以分為三類：IP、PV、UV（現(xiàn)在IP已經(jīng)很少用了）。

至于這三個(gè)概念是什么意思，百度一下，網(wǎng)上有很多。

我們還需要通過這三類數(shù)據(jù)的變化，簡(jiǎn)單分析出產(chǎn)品可能存在的問題及解決方案。舉個(gè)簡(jiǎn)單的例子，如果進(jìn)入支付頁面的點(diǎn)擊率有很顯著的增加，但是平臺(tái)的交易額卻不見增長(zhǎng)，那我們就應(yīng)該很快分析出，一定是支付環(huán)節(jié)的設(shè)計(jì)或程序發(fā)生了故障，要么有程序有bug，要么體驗(yàn)有漏洞等等。

這就是一個(gè)最簡(jiǎn)單的數(shù)據(jù)分析。

編者注：優(yōu)設(shè)數(shù)據(jù)分析指南丨http://www.hx168888.com/data-measure-starter-guideline

14. 產(chǎn)品常識(shí)

關(guān)于產(chǎn)品常識(shí)，對(duì)我們的要求也不高，短期內(nèi)把需求分析、產(chǎn)品定位等等這些基礎(chǔ)的知識(shí)點(diǎn)理解清楚就足夠用了，近期會(huì)分享一篇關(guān)于產(chǎn)品定位的總結(jié)，敬請(qǐng)期待。

15. 用研常識(shí)

用研常識(shí)也一樣，也是一些基礎(chǔ)的知識(shí)點(diǎn)，短期內(nèi)了解即可，比如用戶旅程圖、情感圖譜、問卷調(diào)查等等，不要過于深究，以免本末倒置。

編者注：優(yōu)設(shè)用研學(xué)習(xí)指南丨《想學(xué)習(xí)用戶體驗(yàn)設(shè)計(jì)研究，這篇新手完全入門指南可以幫你》

以上就是菜心目前的設(shè)計(jì)體系規(guī)劃，可能還不夠全面，后面會(huì)慢慢查缺補(bǔ)漏。

我們?yōu)槭裁磿?huì)經(jīng)常迷茫，其實(shí)就是因我們不清楚自己的方向，不清楚自己的規(guī)劃，不清楚自己所處的位置，這也是我做這份規(guī)劃的原因，希望能給大家一點(diǎn)思路上的啟發(fā)。

最后菜心還是想說：看的再多那也都是別人的，你的總結(jié)才是自己真正沉淀下來的，在這么一個(gè)信息爆炸的時(shí)代，我們?nèi)鄙俚牟皇切畔⑴c資源，而是一份專注與沉淀。2017，我們一起加油！

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com