此文主要適讀人群：夢(mèng)想成為“全棧設(shè)計(jì)師”的你（偏向移動(dòng)端產(chǎn)品）！
閱讀時(shí)長(zhǎng)約10分鐘冰蘑，內(nèi)附大量教程，建議馬克這篇村缸，以后按圖索驥即可祠肥！
作為一名視覺(jué)設(shè)計(jì)師到底應(yīng)該有怎樣的設(shè)計(jì)體系呢？今天我就來(lái)分享一下自己的整個(gè)體系規(guī)劃梯皿，這是一個(gè)非常龐大的系統(tǒng)仇箱，目前我也正在按照這個(gè)系統(tǒng)來(lái)逐一總結(jié)，當(dāng)然這需要一段十分漫長(zhǎng)的過(guò)程才能完成东羹，但是只要我們有了清晰的規(guī)劃剂桥，至少這份規(guī)劃可以讓我們清楚自己處在什么階段，避免發(fā)生自我迷茫的情況属提。
大綱如下（哪里不會(huì)補(bǔ)哪里吧）：
對(duì)App 基礎(chǔ)控件的認(rèn)知
字體
配色
圖標(biāo)設(shè)計(jì)
標(biāo)注與切圖規(guī)范
排版的基礎(chǔ)原則
簡(jiǎn)單的動(dòng)效設(shè)計(jì)
走查規(guī)范
交互常識(shí)
項(xiàng)目文件管理
個(gè)人素材权逗、資源庫(kù)
開(kāi)發(fā)常識(shí)
數(shù)據(jù)分析能力
產(chǎn)品常識(shí)
用研常識(shí)
1. 對(duì)App 基礎(chǔ)控件的認(rèn)知
作為移動(dòng)端產(chǎn)品的視覺(jué)設(shè)計(jì)師，我們首先要對(duì)app內(nèi)的一些基礎(chǔ)控件有所了解冤议，比如說(shuō)：按鈕斟薇、導(dǎo)航、彈窗恕酸、浮層堪滨、表單等等，當(dāng)然這里的每一項(xiàng)其實(shí)都有各自的一套體系蕊温，完全可以單獨(dú)拿出來(lái)講解袱箱，之前我有系統(tǒng)的總結(jié)過(guò)關(guān)于彈窗的分類遏乔，大家有興趣的可以查看：http://www.uisdc.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)無(wú)誤的分類铺罢，但我們可以參考業(yè)界的規(guī)范，針對(duì)自己的平臺(tái)屬性去進(jìn)行梳理與分類残炮，還是那句老話韭赘，只要有理論依據(jù)并且對(duì)實(shí)際工作有指導(dǎo)意義，那就是正確的势就。
2. 字體
對(duì)于字體泉瞻，我們需要了解各個(gè)系統(tǒng)使用的默認(rèn)字體，還需要知道一些常用場(chǎng)景下的字體大小苞冯，比如說(shuō)：導(dǎo)航欄一般使用32袖牙、34、36px的字體大小舅锄，底部標(biāo)簽欄的字體大小一般為20px等等鞭达，這些內(nèi)容在網(wǎng)上有很多資料，大家可以自行查閱皇忿。
當(dāng)然對(duì)于平面運(yùn)營(yíng)類的設(shè)計(jì)畴蹭，字體還有另外一套說(shuō)法，我們會(huì)將字體分為以下幾種類型：襯線體鳍烁、非襯線體叨襟、手寫(xiě)體、書(shū)法體幔荒，當(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ì)師配色寶典！教你從零開(kāi)始學(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é)過(guò)，大家可以選擇性查看：《從零基礎(chǔ)到合格啦粹，我總結(jié)了這5個(gè)圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)方法》偿荷，這里我就不多說(shuō)了。
5. 標(biāo)注與切圖規(guī)范
以前在用PS 做界面設(shè)計(jì)時(shí)唠椭，標(biāo)注切圖是個(gè)很麻煩的事情跳纳，不過(guò)現(xiàn)在隨著sketch 的普及，標(biāo)注和切圖都已經(jīng)趨于自動(dòng)化贪嫂，越來(lái)越便利，但是對(duì)我們的設(shè)計(jì)稿規(guī)范要求也越來(lái)越高力崇。
關(guān)于切圖的命名規(guī)則之前菜心有總結(jié)過(guò)：《寫(xiě)給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ù)雏婶。
建議大家可以買一本《寫(xiě)給大家看的設(shè)計(jì)書(shū)》，寫(xiě)的非常棒白指，對(duì)于沒(méi)有排版經(jīng)驗(yàn)的小伙伴很有幫助留晚。
7. 簡(jiǎn)單的動(dòng)效設(shè)計(jì)
會(huì)做點(diǎn)動(dòng)效會(huì)給我們加分不少，尤其是做一些加載動(dòng)畫(huà)告嘲，這是我們經(jīng)常會(huì)遇到的需求错维，關(guān)于加載動(dòng)畫(huà)的場(chǎng)景分類之前有總結(jié)過(guò)奖地，不了解的可以自行查看：《交互/視覺(jué)都需要掌握的App加載動(dòng)畫(huà)知識(shí)體系》
至于使用的工具，其實(shí)很多軟件都是可以的赋焕，我一般會(huì)用ps做一些動(dòng)態(tài)表情参歹，用AE做一些加載動(dòng)畫(huà)，而頁(yè)面之間的交互動(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ì)稿的還原程度，是視覺(jué)設(shè)計(jì)師必須要經(jīng)歷的工作環(huán)節(jié)飒炎，小公司的話可以直接和開(kāi)發(fā)進(jìn)行溝通并修改埋哟，但是在大公司一定要將問(wèn)題點(diǎn)梳理清楚后發(fā)郵件給項(xiàng)目組與開(kāi)發(fā)哥哥，有些不清楚的地方也需要當(dāng)面進(jìn)行闡述郎汪。
基本的做法就是將手機(jī)上現(xiàn)實(shí)稿截屏與原版設(shè)計(jì)稿進(jìn)行對(duì)比赤赊，列清楚所有問(wèn)題點(diǎn)，并告知如何修改煞赢，至于用什么軟件抛计，可根據(jù)自己團(tuán)隊(duì)的需求統(tǒng)一規(guī)定。
9. 交互常識(shí)
交互和視覺(jué)有很多交集的地方照筑，比如控件的分類與定義吹截、頁(yè)面信息的布局方式等等，但是交互有很多值得視覺(jué)學(xué)習(xí)的地方凝危，其中最重要的一點(diǎn)就是思維邏輯波俄，對(duì)于產(chǎn)品的邏輯，他們要比我們思考的更加全面蛾默、透徹懦铺。至于他們?nèi)绾嗡伎迹拔乙部偨Y(jié)過(guò)一篇文章支鸡，大家可以選擇性的查閱：《做交互方案時(shí)冬念，請(qǐng)注意檢查這4個(gè)點(diǎn)》
如果你覺(jué)得視覺(jué)設(shè)計(jì)是你的重心，以后也不想往交互方向發(fā)展牧挣，那就點(diǎn)到為止急前，了解一些基礎(chǔ)即可，一定要把握好自己的方向瀑构，千萬(wàn)不要忘記主次裆针。
10. 項(xiàng)目文件管理
這里就是告訴大家，每個(gè)項(xiàng)目的文件自己都要管理好，不然后期隨著文件的增加据块、版本的迭代码邻，如果沒(méi)有一個(gè)分類規(guī)則，找文件時(shí)非常麻煩另假。至少我們?cè)谧鲰?xiàng)目之前像屋，需要建幾個(gè)最重要的分類文件，如下圖：
至于里面怎么細(xì)分边篮，以后再找機(jī)會(huì)詳細(xì)的講解己莺。
11. 個(gè)人素材、資源庫(kù)
定期要對(duì)自己的資源進(jìn)行整理與分類戈轿，比如說(shuō)你的網(wǎng)站資源凌受，下面的這張圖是我的資源管理分類，大家可以參考：
后期我會(huì)再詳細(xì)的整理一下思杯，和大家分享一些我收藏的資源胜蛉。
也可以參考這篇人氣好文丨《15G的素材怎么管？手把手教你打造一個(gè)低管理成本的素材庫(kù)》
12. 開(kāi)發(fā)常識(shí)
作為視覺(jué)設(shè)計(jì)師色乾，經(jīng)常會(huì)和開(kāi)發(fā)對(duì)接溝通誊册，如果我們能了解一些關(guān)于開(kāi)發(fā)的基礎(chǔ)知識(shí)和他們的思維邏輯，一定可以避免很多不必要的時(shí)間浪費(fèi)暖璧。在上次制作規(guī)范時(shí)案怯，由于對(duì)很多開(kāi)發(fā)邏輯的不清楚，導(dǎo)致執(zhí)行過(guò)程中遇到很多問(wèn)題澎办，后來(lái)進(jìn)行了梳理總結(jié)嘲碱，參見(jiàn)《進(jìn)階必讀！UI 設(shè)計(jì)規(guī)范的制作思路+常見(jiàn)問(wèn)題總結(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)上有很多昆著。
我們還需要通過(guò)這三類數(shù)據(jù)的變化县貌，簡(jiǎn)單分析出產(chǎn)品可能存在的問(wèn)題及解決方案。舉個(gè)簡(jiǎn)單的例子凑懂，如果進(jìn)入支付頁(yè)面的點(diǎn)擊率有很顯著的增加煤痕，但是平臺(tái)的交易額卻不見(jiàn)增長(zhǎng)，那我們就應(yīng)該很快分析出，一定是支付環(huán)節(jié)的設(shè)計(jì)或程序發(fā)生了故障摆碉，要么有程序有bug塘匣，要么體驗(yàn)有漏洞等等。
這就是一個(gè)最簡(jiǎn)單的數(shù)據(jù)分析巷帝。
14. 產(chǎn)品常識(shí)
關(guān)于產(chǎn)品常識(shí)忌卤，對(duì)我們的要求也不高，短期內(nèi)把需求分析楞泼、產(chǎn)品定位等等這些基礎(chǔ)的知識(shí)點(diǎn)理解清楚就足夠用了驰徊。
15. 用研常識(shí)
用研常識(shí)也一樣，也是一些基礎(chǔ)的知識(shí)點(diǎn)堕阔，短期內(nèi)了解即可棍厂，比如用戶旅程圖、情感圖譜超陆、問(wèn)卷調(diào)查等等牺弹，不要過(guò)于深究，以免本末倒置时呀。
也可以參考這篇好文《想學(xué)習(xí)用戶體驗(yàn)設(shè)計(jì)研究张漂，這篇新手完全入門指南可以幫你》
注：本文來(lái)源自優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)，版權(quán)歸原作者所有
原文鏈接：http://www.uisdc.com/ui-design-starter-knowledge-system
