又到一年求職季，很多應(yīng)屆畢業(yè)的學(xué)生準(zhǔn)備進入互聯(lián)網(wǎng)行業(yè)，最近有不少朋友向我咨詢零基礎(chǔ)入門學(xué)習(xí) UI 設(shè)計的問題孵滞，其中有一些朋友已經(jīng)開始自學(xué)，但是準(zhǔn)備方向明顯存在偏差鸯匹，針對大家存在的問題坊饶，我整理了一下統(tǒng)一做出回答，希望對大家有所幫助殴蓬。
在大家考慮入行時請先了解以下問題：
一幼东、UI膏燃、UE瓦胎、UX矾利、GUI、ID?有什么區(qū)別糟秘？
二、好設(shè)計的?4?個標(biāo)準(zhǔn)
三球散、UI?設(shè)計師必須掌握的?5?項能力
四尿赚、UI?設(shè)計師能力模型如何掌握？
五蕉堰、UI?設(shè)計學(xué)習(xí)的?5?個階段
下面請看詳細介紹：
一凌净、UI、UE屋讶、UX冰寻、GUI、ID 有什么區(qū)別皿渗？
用戶界面設(shè)計“USER INTERFACE DESIGN”斩芭，就是我們平時所說的UI轻腺。大家常常混淆幾個概念：UE划乖、UX贬养、UI?、GUI琴庵、ID误算，我們一起看看他們之間的關(guān)系和區(qū)別：
二贪庙、好設(shè)計的四個標(biāo)準(zhǔn)
1.好的設(shè)計首先是實用的
優(yōu)秀的界面視覺設(shè)計蜘犁，一定是便于用戶使用的。利于使用止邮，是設(shè)計的根本需求这橙。
設(shè)計師未必是好的藝術(shù)家，好的藝術(shù)家也未必是好設(shè)計師
我們遇到不少初學(xué)UI設(shè)計的同學(xué)在問：“學(xué)設(shè)計要從學(xué)手繪開始嗎导披？”
有這樣的疑問屈扎，其實是沒有區(qū)分開設(shè)計和藝術(shù)的不同。
設(shè)計和藝術(shù)是不一樣的：設(shè)計本身是服務(wù)于產(chǎn)品撩匕，是在一定規(guī)范下完成信息的傳達鹰晨，而藝術(shù)品純粹重在表達。
UI設(shè)計師是用自己的設(shè)計服務(wù)于產(chǎn)品止毕，在視覺規(guī)范下完成信息的視覺傳達和表現(xiàn)模蜡，最終滿足用戶的需求。
以用戶為中心的設(shè)計
視覺設(shè)計本身也同樣以用戶為中心扁凛，圍繞著用戶的需求以及目標(biāo)用戶的心理概念模型展開忍疾。
比如：小時候過年，你領(lǐng)到壓歲錢以后谨朝，是不是基本都“上交”給了爸媽卤妒？你爸媽說要給你存起來，這都過去二三十年了字币，你知道你的壓歲錢去哪兒了嗎则披？如果當(dāng)時就有支付寶，你可以把壓歲錢存進余額寶漲利息洗出，是不是就有機會自行支配資產(chǎn)了士复？
現(xiàn)在的孩子就比你幸福多了，支付寶最近出了一個【小錢袋】功能翩活，主要是幫助小朋友存儲和管理自己的資產(chǎn)判没，比如壓歲錢和零花錢蜓萄。
這個功能的推出，就符合小朋友們（據(jù)說00后可有錢了呢）的需求澄峰，也便于父母單獨管理孩子的自有資產(chǎn)嫉沽，減少親子之間因為壓歲錢產(chǎn)生的小矛盾。
每一個視覺元素均有意義
在一頁用戶界面中俏竞，每一個視覺元素都有它要實現(xiàn)的目標(biāo)绸硕，而不是單純出現(xiàn)的裝飾性元素。
比如：知群需要設(shè)計一張封面圖魂毁。先說一下設(shè)計的業(yè)務(wù)背景和需求：設(shè)計師需要為【知群產(chǎn)品設(shè)計訓(xùn)練營】設(shè)計一張封面圖玻佩，需求是視覺上符合審美，重點是突出訓(xùn)練營席楚，讓用戶看到封面圖咬崔，即能理解訓(xùn)練營的價值和作用，更愿意點擊烦秩。
大家可以對比一下優(yōu)化前后的方案垮斯，哪里發(fā)生了變化？
設(shè)計方案V2.0相對V1.0版本只祠，增加了一個“小旗子”的視覺元素兜蠕，這個“小旗子”可不是隨便加上的，因為這個“小旗子”的存在抛寝，在第二張圖里熊杨，我們的閱讀順序就非常連貫。
一個UI設(shè)計初學(xué)者盗舰，以產(chǎn)品設(shè)計訓(xùn)練營為起點開始入門晶府，循序漸進地掌握了軟件能力、造型能力钻趋、色彩能力郊霎、界面排版能力之后，再經(jīng)過名企項目實戰(zhàn)積累經(jīng)驗爷绘，最終產(chǎn)出作品集。
經(jīng)歷過這樣完整的過程后进倍，才有足夠的專業(yè)實力和信心土至，證明自己掌握了UI設(shè)計的核心競爭力。
這個“小旗子”視覺元素的增加猾昆，其實是從視覺上突出了訓(xùn)練營對于UI設(shè)計初學(xué)者可以起到入門的作用陶因，也讓用戶理解到從入門到掌握核心競爭力需要經(jīng)歷的完整過程，用設(shè)計引導(dǎo)用戶的視覺閱讀順序垂蜗，從而增加對封面圖的點擊楷扬。
2解幽、容易讓用戶快速學(xué)會使用
在尼爾森可用性標(biāo)準(zhǔn)中，有一個易學(xué)性原則烘苹。遵循這個原則躲株，在保持美觀性基礎(chǔ)上,更重要的是能夠準(zhǔn)確、快速镣衡、有效地傳達信息霜定，讓用戶更容易學(xué)會使用。
- 微信“搖一搖”的圖標(biāo)廊鸥，就能夠讓用戶快速學(xué)會如何使用這個功能望浩。
- 搜索界面、語音圖標(biāo)惰说，能夠引導(dǎo)用戶快速使用語音功能磨德。
- 微信會話界面輸入控件旁的笑臉，能夠讓用戶快速學(xué)會發(fā)表情吆视。就算是爺爺奶奶看見這個笑臉典挑，也更容易理解這里可以發(fā)表情給你吧。
3揩环、產(chǎn)品中的設(shè)計元素都是統(tǒng)一的
設(shè)計師如何能讓用戶快速搔弄、有效、容易地使用產(chǎn)品丰滑？那就需要設(shè)計師保持在產(chǎn)品中的設(shè)計元素的統(tǒng)一性顾犹。
建立統(tǒng)一的標(biāo)準(zhǔn)
這里提到的統(tǒng)一，指的是在同一套標(biāo)準(zhǔn)下褒墨，設(shè)計上面的統(tǒng)一炫刷，即同樣的功能保持一致。設(shè)計師需要建立和維護視覺設(shè)計規(guī)范郁妈，來保持設(shè)計的統(tǒng)一性浑玛。大廠名企的設(shè)計團隊都有自己的設(shè)計規(guī)范，比如：Ant Design噩咪。
我們知群的老師在課程內(nèi)也會通過大廠的設(shè)計規(guī)范顾彰，讓同學(xué)們學(xué)會如何建立和維護視覺設(shè)計規(guī)范，便于保持設(shè)計元素的統(tǒng)一性胃碾。
相同功能保持一致
針對相同的功能涨享，在視覺呈現(xiàn)上保持一致，達到統(tǒng)一的效果仆百。
統(tǒng)一是降低學(xué)習(xí)成本的關(guān)鍵
統(tǒng)一的界面設(shè)計厕隧，可以降低用戶的學(xué)習(xí)成本，能夠提高產(chǎn)品使用效率。
4吁讨、好的設(shè)計必須是美學(xué)的體現(xiàn)
好的設(shè)計在視覺上必須是美的體現(xiàn)髓迎，這里有一個關(guān)鍵點：對于目標(biāo)用戶來說，設(shè)計要好看建丧。
這里的的關(guān)鍵點就是“目標(biāo)用戶”認為的好看排龄。設(shè)計并不是設(shè)計師主觀上的好看，而是需要深入了解和考慮目標(biāo)用戶的審美喜好茶鹃，做出他們覺得好看的設(shè)計涣雕。
比如：你作為設(shè)計師，要為3-6歲的兒童設(shè)計一個界面闭翩，那么你就需要深入了解這個年齡段的孩子認為什么樣的美的挣郭。或許作為成年人的我們認為“性冷淡”風(fēng)更顯高級疗韵，但是對于孩子來說兑障，“紅配綠”或許是他們最愛的。
三蕉汪、UI 設(shè)計師必須掌握的 5 項能力?
UI設(shè)計入門需要掌握 5 項能力:
1. 圖形造型能力
比如你要畫一個星星圖標(biāo)流译，不僅需要畫出一個“星星”的形態(tài)，還要符合造型審美者疤。
2. 圖形表現(xiàn)能力
你畫的這個星星不僅有“星星”的造型福澡，還要有質(zhì)感，比如毛茸茸的質(zhì)感驹马、大理石的質(zhì)感革砸。
3. 色彩表現(xiàn)能力
你怎么為“星星”進行色彩配色，比如說用漸變鄰近色糯累，還是選擇對比色配接起來配色算利。
4. 終端規(guī)范能力
你把這個“星星”做好之后，放在界面里面泳姐，需要注意哪些效拭，比如界面最小可點擊范圍是48px * 48px，那么就要注意這個“星星”圖標(biāo)尺寸不要小于這個尺寸胖秒。
5. 終端界面能力
當(dāng)圖標(biāo)這種小元素做完之后缎患，放在整個界面里，要注意優(yōu)先級排序阎肝，以及界面與界面之間的邏輯關(guān)系挤渔。
這 5 個能力之間什么關(guān)系呢？這些能力又應(yīng)該從哪里入手掌握呢盗痒？
我們分別來看一下：
終端界面能力和終端規(guī)范能力屬于設(shè)計專項能力，主要表現(xiàn)為做界面設(shè)計。
圖形表現(xiàn)能力俯邓、圖形造型能力骡楼、色彩能力屬于設(shè)計底層能力，是做各種設(shè)計的基礎(chǔ)稽鞭，不僅可以做界面設(shè)計鸟整，還能做插畫設(shè)計、運營設(shè)計朦蕴、品牌設(shè)計篮条。
界面設(shè)計
比如常見的 APP 或網(wǎng)頁的界面設(shè)計。
插畫設(shè)計
比如在做APP開屏廣告時吩抓，就可以用豐富造型涉茧、大膽配色的插畫風(fēng)格，吸人眼球疹娶，提升廣告頁面的觀看時間伴栓。
運營設(shè)計
比如淘寶、京東等電商首頁Banner雨饺，或者得到APP的課程詳情頁钳垮。
品牌設(shè)計
設(shè)計品牌的LOGO、VI視覺等
四额港、UI 設(shè)計師能力模型如何掌握
入門UI設(shè)計師饺窿，這 5 項能力通過短時間學(xué)習(xí)（比如4個月），需要掌握到什么程度移斩？
做產(chǎn)品肚医、設(shè)計需要考慮優(yōu)先級，其實掌握技能也需要分清優(yōu)先級叹哭，先抓重點忍宋，各個擊破。
在入門學(xué)習(xí)UI設(shè)計的時候风罩，要分清熟練掌握和基本掌握的技能糠排，在有限的時間里重點突破：
1.?熟練掌握：終端界面能力和終端規(guī)范能力
這 2 項能力可以通過短時間學(xué)習(xí)，快速掌握和上手超升。這兩項能力的掌握也有大量的參考資料和前人經(jīng)驗值得學(xué)習(xí)參考入宦。
2.?基本掌握：圖形造型能力、圖形表現(xiàn)能力室琢、色彩能力
因為這 3 項能力很難在短時間內(nèi)速成乾闰，而是需要長時間的刻意練習(xí)和積累。
我們知群 UI 設(shè)計 TOP 班的課程盈滴，就是這樣為同學(xué)們規(guī)劃了 4 個月的學(xué)習(xí)計劃和時間涯肩，按照初級UI設(shè)計師需要掌握的 5 項能力轿钠，主次分明，循序漸進地學(xué)習(xí)病苗，在短時間內(nèi)讓同學(xué)們具備底層設(shè)計思維疗垛，同時掌握核心設(shè)計能力，成為專業(yè)的初級UI設(shè)計師硫朦。
如果你想自學(xué)UI設(shè)計贷腕，也需要給自己設(shè)計適合的難度梯度學(xué)習(xí)路徑，幫助自己在有效時間內(nèi)入門UI設(shè)計咬展。
五泽裳、UI 設(shè)計學(xué)習(xí)的5個階段
學(xué)習(xí)任何技能，一口吃不了胖子破婆，都需要循序漸進涮总，先打基礎(chǔ)再提升。UI設(shè)計的學(xué)習(xí)也是這樣荠割。
我們以圖標(biāo)造型能力為例妹卿，看一下怎樣由淺入深地掌握 5 項能力？
知群 UI 設(shè)計 TOP 班的課程蔑鹦，是根據(jù)以下學(xué)習(xí)曲線夺克，幫助同學(xué)們由淺入深地掌握初級UI設(shè)計師的 5項能力。如果你想自學(xué)UI嚎朽，也適合你根據(jù)這個學(xué)習(xí)曲線铺纽，規(guī)劃自己的學(xué)習(xí)階段）
所以，掌握一個技能或知識點哟忍，需要經(jīng)過以下這 5 個階段：
1狡门、了解概念
扁平和擬物是兩個大的圖標(biāo)分類。當(dāng)你了解了基礎(chǔ)的圖標(biāo)概念锅很，再通過臨摹學(xué)習(xí)加深對基礎(chǔ)概念的理解其馏。
2、臨摹學(xué)習(xí)
知群教研組老師們之所以選擇了通過Android圖標(biāo)的講解爆安，來讓同學(xué)們臨摹練習(xí)叛复，是因為Android圖標(biāo)的設(shè)計過程是開放的，有豐富的學(xué)習(xí)資料扔仓，便于同學(xué)們參考借鑒褐奥。
3、舉一反三
在同學(xué)們掌握了Android圖標(biāo)的臨摹之后翘簇，老師會讓他們通過練習(xí)扁平圖標(biāo)撬码，來達到舉一反三的效果。因為扁平圖標(biāo)相對復(fù)雜版保，因為涉及到圖形和組合呜笑、點線面的組合夫否，這對同學(xué)們來說，難度有升級叫胁，但是同學(xué)們又能在挑戰(zhàn)中獲得成就感慷吊。
4、應(yīng)用實踐
知群的老師會教給同學(xué)們圖形組合和創(chuàng)意的方法曹抬，幫助同學(xué)們最終能做出屬于自己的一套圖標(biāo)。這樣完整的圖標(biāo)急鳄，也可以放在作品集中谤民，成為面試中凸顯自己設(shè)計細節(jié)感的亮點。
5疾宏、最終掌握該能力
在經(jīng)歷了了解概念张足、臨摹學(xué)習(xí)、舉一反三坎藐、應(yīng)用實踐的完整流程后为牍，才算是真的掌握了圖標(biāo)造型能力。
怎么算是真正掌握一項能力呢岩馍？就是你不僅會設(shè)計一套適合品牌調(diào)性的圖標(biāo)碉咆，還能舉一反三，在產(chǎn)品接觸用戶全流程的各個觸點蛀恩，都用帶有品牌意義的圖形造型疫铜，將產(chǎn)品和品牌的價值傳遞給用戶，做到真正的應(yīng)用双谆。
想學(xué)習(xí)更多關(guān)于 UI 設(shè)計壳咕、UX 設(shè)計、產(chǎn)品經(jīng)理的相關(guān)教程顽馋，歡迎關(guān)注我們谓厘。
