UI 設(shè)計師如何從零基礎(chǔ)構(gòu)建職業(yè)技能體系

又到一年求職季,很多應(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ū)別:

UI、UE迷殿、UX儿礼、GUI、ID 的區(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ā)生了變化?

知群產(chǎn)品設(shè)計訓(xùn)練營封面圖設(shè)計?

設(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)一性

建立統(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噩咪。

螞蟻金服的設(shè)計系統(tǒng)

我們知群的老師在課程內(nèi)也會通過大廠的設(shè)計規(guī)范顾彰,讓同學(xué)們學(xué)會如何建立和維護視覺設(shè)計規(guī)范,便于保持設(shè)計元素的統(tǒng)一性胃碾。

iOS11和 Material Design 設(shè)計規(guī)范大綱?
視覺設(shè)計規(guī)范示意

相同功能保持一致

針對相同的功能涨享,在視覺呈現(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 項能力:

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è)計專項技能之間的關(guān)系

界面設(shè)計

比如常見的 APP 或網(wǎng)頁的界面設(shè)計。

插畫設(shè)計

比如在做APP開屏廣告時吩抓,就可以用豐富造型涉茧、大膽配色的插畫風(fēng)格,吸人眼球疹娶,提升廣告頁面的觀看時間伴栓。

運營設(shè)計

比如淘寶、京東等電商首頁Banner雨饺,或者得到APP的課程詳情頁钳垮。

品牌設(shè)計

設(shè)計品牌的LOGO、VI視覺等

四额港、UI 設(shè)計師能力模型如何掌握

入門UI設(shè)計師饺窿,這 5 項能力通過短時間學(xué)習(xí)(比如4個月),需要掌握到什么程度移斩?

UI 入門需要掌握的技能水平

做產(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í)階段)

圖標(biāo)造型能力學(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)注我們谓厘。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市寸谜,隨后出現(xiàn)的幾起案子竟稳,更是在濱河造成了極大的恐慌,老刑警劉巖程帕,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件住练,死亡現(xiàn)場離奇詭異,居然都是意外死亡愁拭,警方通過查閱死者的電腦和手機讲逛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來岭埠,“玉大人盏混,你說我怎么就攤上這事蔚鸥。” “怎么了许赃?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵止喷,是天一觀的道長。 經(jīng)常有香客問我混聊,道長弹谁,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任句喜,我火速辦了婚禮预愤,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘咳胃。我一直安慰自己植康,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布展懈。 她就那樣靜靜地躺著销睁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪存崖。 梳的紋絲不亂的頭發(fā)上冻记,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音来惧,去河邊找鬼檩赢。 笑死,一個胖子當(dāng)著我的面吹牛违寞,可吹牛的內(nèi)容都是我干的贞瞒。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼趁曼,長吁一口氣:“原來是場噩夢啊……” “哼军浆!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起挡闰,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤乒融,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后摄悯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體赞季,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年奢驯,在試婚紗的時候發(fā)現(xiàn)自己被綠了申钩。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡瘪阁,死狀恐怖撒遣,靈堂內(nèi)的尸體忽然破棺而出邮偎,到底是詐尸還是另有隱情,我是刑警寧澤义黎,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布禾进,位于F島的核電站,受9級特大地震影響廉涕,放射性物質(zhì)發(fā)生泄漏泻云。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一狐蜕、第九天 我趴在偏房一處隱蔽的房頂上張望壶愤。 院中可真熱鬧,春花似錦馏鹤、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至碍讨,卻和暖如春治力,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背勃黍。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工宵统, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人覆获。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓马澈,卻偏偏與公主長得像,于是被迫代替她去往敵國和親弄息。 傳聞我的和親對象是個殘疾皇子痊班,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361