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

閱讀時(shí)長約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ì)體系呢?今天創(chuàng)新互聯(lián)編者就來分享整個(gè)體系規(guī)劃，這是一個(gè)非常龐大的系統(tǒng)，目前我也正在按照這個(gè)系統(tǒng)來逐一總結(jié)，當(dāng)然這需要一段十分漫長的過程才能完成，但是只要我們有了清晰的規(guī)劃，至少這份規(guī)劃可以讓我們清楚自己處在什么階段，避免發(fā)生自我迷茫的情況。

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

大綱如下(哪里不會(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è)人素材、資源庫

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

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

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

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

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

3.配色

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

(1)顏色的基本認(rèn)知：

• 網(wǎng)頁色彩搭配教程：三個(gè)實(shí)用方法搞定網(wǎng)頁配色設(shè)計(jì)

• 網(wǎng)頁設(shè)計(jì)配色系列之『紅色 藍(lán)色』篇

• 網(wǎng)站如何配色及網(wǎng)站配色方案

點(diǎn)擊可直接預(yù)覽。

(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é)過，大家可以選擇性查看：MBE風(fēng)格圖標(biāo)設(shè)計(jì)，這里我就不多說了。

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

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

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

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

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

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

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

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

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)品的邏輯，他們要比我們思考的更加全面、透徹。如果你覺得視覺設(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é)。

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)的交易額卻不見增長，那我們就應(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)理解清楚就足夠用了，近期會(huì)分享一篇關(guān)于產(chǎn)品定位的總結(jié)，敬請(qǐng)期待。

15. 用研常識(shí)

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

創(chuàng)新互聯(lián)提供更多設(shè)計(jì)資訊，關(guān)于APP界面設(shè)計(jì)資訊，點(diǎn)擊可這直接閱覽。

本文題目：網(wǎng)頁UI設(shè)計(jì)新人的知識(shí)體系指南
URL鏈接：http://m.kartarina.com/news40/163940.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站排名、App開發(fā)、網(wǎng)站營銷、網(wǎng)站策劃、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)