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

閱讀時長約10分鐘，內附大量教程，建議馬上看著這篇，以后按圖索驥即可。此文主要適讀人群：夢想成為“全棧設計師”的你(偏向移動端產品)!當然設計都是相通的，即使你的職位是產品設計、交互設計、網頁設計、平面設計也都不妨一看，相信你也可以有所收獲!

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

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

大綱如下(哪里不會補哪里吧)：

對App 基礎控件的認知

字體

配色

圖標設計

標注與切圖規范

排版的基礎原則

簡單的動效設計

走查規范

交互常識

項目文件管理

個人素材、資源庫

開發常識

數據分析能力

產品常識

用研常識

1. 對App 基礎控件的認知

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

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

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

2. 字體

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

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

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

3.配色

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

(1)顏色的基本認知：

• 網頁色彩搭配教程：三個實用方法搞定網頁配色設計

• 網頁設計配色系列之『紅色 藍色』篇

• 網站如何配色及網站配色方案

點擊可直接預覽。

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

4. 圖標設計

關于圖標設計，之前我有簡單總結過，大家可以選擇性查看：MBE風格圖標設計，這里我就不多說了。

5. 標注與切圖規范

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

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

6. 排版的基礎原則

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

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

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

7. 簡單的動效設計

會做點動效會給我們加分不少，尤其是做一些加載動畫，這是我們經常會遇到的需求，關于加載動畫的場景分類之前有總結過，不了解的可以自行查看：《app界面加載動畫設計知識》至于使用的工具，其實很多軟件都是可以的，我一般會用ps做一些動態表情，用AE做一些加載動畫，而頁面之間的交互動效大家可以使用flinto、principle之類的軟件。

8. 走查規范

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

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

9. 交互常識

交互和視覺有很多交集的地方，比如控件的分類與定義、頁面信息的布局方式等等，但是交互有很多值得視覺學習的地方，其中最重要的一點就是思維邏輯，對于產品的邏輯，他們要比我們思考的更加全面、透徹。如果你覺得視覺設計是你的重心，以后也不想往交互方向發展，那就點到為止，了解一些基礎即可，一定要把握好自己的方向，千萬不要忘記主次。

10. 項目文件管理

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

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

11. 個人素材、資源庫

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

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

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

12. 開發常識

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

13. 數據分析能力

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

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

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

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

14. 產品常識

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

15. 用研常識

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

創新互聯提供更多設計資訊，關于APP界面設計資訊，點擊可這直接閱覽。

本文題目：網頁UI設計新人的知識體系指南
URL鏈接：http://m.newbst.com/news40/163940.html

成都網站建設公司_創新互聯，為您提供標簽優化、網站排名、App開發、網站營銷、網站策劃、域名注冊

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯