關(guān)于作者本人,大學(xué)時(shí)曾經(jīng)兼職某培訓機構PS講師,對設計培訓行業(yè)了解一二。自己是非科班出身純自學(xué)無(wú)培訓經(jīng)歷工作三年的每個(gè)月還完信用卡就感覺(jué)身體被掏空的普通UI設計師。
好了言歸正傳:
一、你為什么想要學(xué)UI?
用戶(hù)界面(User Interface)是指一切可供用戶(hù)和系統進(jìn)行交互操作的介質(zhì)的綜合。
在當下這個(gè)時(shí)間點(diǎn),一提到UI,大家其實(shí)會(huì )不由自主的指向移動(dòng)端app設計而忽略UI的其他形式。網(wǎng)頁(yè)、手機 app、pad app、車(chē)載系統,智能冰箱的控制窗口、智能電視的操作系統界面等等等等,其實(shí)都是UI的范疇。
各位現在勵志想學(xué)UI的同學(xué)們,不妨捫心自問(wèn)一下,你為什么想學(xué)UI?
我綜合分析了幾個(gè)周?chē)笥押退叫盼业耐瑢W(xué)的真實(shí)案例,答案無(wú)非只有以下幾種:
1.UI設計工資相對較高。
2.UI設計入門(mén)相對容易。
3.自我感覺(jué)UI設計還挺有趣的。
郭德綱有個(gè)段子說(shuō)得好,一個(gè)人賣(mài)盆,結果賣(mài)了兩個(gè)月發(fā)現不掙錢(qián),然后就去賣(mài)豬肉了,從此以后再也沒(méi)有賣(mài)過(guò)盆,這是正常人的擇優(yōu)手段。但是還有一個(gè)人賣(mài)盆,結果賣(mài)了兩個(gè)月發(fā)現不掙錢(qián),于是就去賣(mài)肉了,然后用業(yè)余時(shí)間繼續賣(mài)盆,那這個(gè)人是真的喜歡賣(mài)盆,他對賣(mài)盆這個(gè)事情有著(zhù)天然的興趣。
這樣吧不然,為了檢驗你是不是真的喜歡設計,我這里先推薦諾曼的那四本《設計心理學(xué)》,這是相對來(lái)說(shuō)不那么枯燥乏味的設計方面專(zhuān)業(yè)書(shū)了,算是一種科普性質(zhì)的,什么行業(yè)看了都沒(méi)錯。你先去啃下來(lái),如果中途沒(méi)有打瞌睡并且能夠看個(gè)大致明白并且覺(jué)得還挺有意思的,那說(shuō)明你可以具備一定的自驅力,可以去開(kāi)始著(zhù)手學(xué)UI。
自驅力是最重要的一點(diǎn),為什么今年有一些三年工作經(jīng)驗以上的UI一下子就被淘汰了找不到工作?因為一個(gè)人的價(jià)值是和你的不可替代性成正比的,自驅力來(lái)源于興趣,本身不是喜歡這個(gè)行業(yè)的設計不求上進(jìn)兩三年拿不出與工作經(jīng)驗相襯的作品,勢必要被淘汰。
二、UI設計師掙得多么?
每個(gè)行業(yè)都有掙得很多的頂尖人才,還是那句話(huà),一個(gè)人的價(jià)值是和你的不可替代性成正比的,但是普遍來(lái)說(shuō)中國的互聯(lián)網(wǎng)行業(yè)薪資構成一定是產(chǎn)品≈技術(shù)>設計的,但是相對來(lái)說(shuō)技術(shù)的行業(yè)門(mén)檻比較高,產(chǎn)品暫時(shí)拋開(kāi)不論(手動(dòng)微笑),而且在絕大多數非技術(shù)崗位互聯(lián)網(wǎng)從業(yè)者的心目中設計這件事情是一個(gè)純主觀(guān)的事情,很多人甚至到今天還在說(shuō)哎呀XXX今天更新好丑,他們公司的UI簡(jiǎn)直就是一坨屎這樣的言論背景下,在前幾年UI培訓確實(shí)是如火如荼的進(jìn)行。
UI設計師到底掙得多么?答案是:“收入可觀(guān)”。
從騰訊CDC《2016用戶(hù)體驗行業(yè)調查報告》中能夠可以看出:
調查結果顯示:
用戶(hù)體驗行業(yè)從業(yè)者稅前薪資年收入主要在 5 ~ 15 萬(wàn);
管理類(lèi)薪資較高,集中在 10 ~ 25 萬(wàn);
視覺(jué)設計、 交互設計、品牌設計的薪資相對較低,偏向 5-10 萬(wàn);
用戶(hù)研究,產(chǎn)品類(lèi)的薪資居中,傾向于 10-15w。
從圖上可以得知,如果是一個(gè)下定決心打算進(jìn)入UI設計/視覺(jué)設計行業(yè)的萌新,那請你做好一開(kāi)始“不到5W一年”和“不到10W一年”的準備。
結論:從數據上來(lái)說(shuō),培訓出來(lái)月薪過(guò)萬(wàn)這樣的例子我承認一定有,但是不多。更多的設計科班出身或者培訓行業(yè)出身的設計在工作的第一年,工資都不太喜人(一線(xiàn)大城市可能會(huì )相對稍微歡喜一些)。
結合上面那個(gè)賣(mài)盆的段子,不到五萬(wàn)一年,你還想學(xué)UI么?(手動(dòng)微笑+1)
三、學(xué)UI,應該選擇培訓機構么?
我的答案是分兩頭看,如果你是設計科班出身,并且對互聯(lián)網(wǎng)UI/視覺(jué)設計師的職責有清晰的認知,了解工作流程,那么我的回答是不需要。但如果你是一個(gè)學(xué)法律的學(xué)中文的,對互聯(lián)網(wǎng)公司和設計本身一竅不通的想學(xué)UI有志好青年,并且周?chē)鷰缀鯖](méi)有互聯(lián)網(wǎng)從業(yè)者圈子,那么,我的回答是需要的。
因為你要明白,市面上絕大多數培訓機構能夠給予你的是:
0.了解互聯(lián)網(wǎng)大環(huán)境和app產(chǎn)品開(kāi)發(fā)UI/視覺(jué)設計師的作用及工作流程。
1.一到多項工具的使用。(一般是Photoshop、AI、Sketch、Axure等等)
2.一到多次虛擬互聯(lián)網(wǎng)項目經(jīng)驗。(包括從但不限定為從無(wú)到有、模擬迭代等)
至于推薦就業(yè)之類(lèi)的,你愛(ài)信信,反正我不信。
我大二的時(shí)候因為PS技術(shù)比較好,所以兼職在某培訓機構教PS,先后帶過(guò)三個(gè)班,一個(gè)是攝影后期那個(gè)就不說(shuō)了,其余兩個(gè)都是UI的基礎班,只不過(guò)一個(gè)側重移動(dòng)端app,一個(gè)側重網(wǎng)頁(yè)設計而已(12年那時(shí)候還沒(méi)sketch)。
我可以拍著(zhù)胸脯保證我教授的PS知識能夠完成市面上所有的app和網(wǎng)頁(yè)設計,這個(gè)按鈕是怎么實(shí)現的,漸變怎么拉,字行距間距怎么設置,布爾運算怎么操作這些你從我這里一學(xué)就會(huì ),包學(xué)包會(huì ),然而這并沒(méi)有什么卵用。這就好比一個(gè)你去學(xué)習素描,老師告訴你鉛筆分為幾種,每一種黑度不一樣,你手要怎么拿鉛筆,排線(xiàn)要怎么練,面是由線(xiàn)構成的,好了,你畫(huà)吧。你能畫(huà)的出來(lái)才怪。
很多想入行UI的小白最大的誤區在于:我只要PS/sketch用得好,我就是個(gè)設計師了。
拜托你們醒醒好吧,你要明白PS也好sketch只是一款工具而已,它本質(zhì)上和屠夫手里的刀,獵人手里的弓箭,雕塑家手里的釘錘沒(méi)有任何區別。我現在把羅丹的工具從博物館偷出來(lái)給你再給你一塊質(zhì)地幾乎一樣的石頭,你敲一個(gè)思想者出來(lái)我看看?
四、Sketch和PS必須熟練掌握一款
好了書(shū)歸正傳,雖然學(xué)會(huì )軟件并不等于可以勝任UI設計的工作,但是學(xué)會(huì )一門(mén)軟件是很基礎的入門(mén)級的事情,市面上能用于UI設計的工具現在幾乎淘汰到了只剩三款,PS/Ai/sketch,而其中Ai由于是基于對象的矢量繪制軟件,在位圖設計當中有著(zhù)天然的劣勢(當然也有很多人用,但是我個(gè)人是直接排除的,才不會(huì )告訴你我還見(jiàn)過(guò)firework流的UI呢)。
在Ps和sketch中,目前在UI設計工作中,我基本上完全會(huì )用sketch,Sketch實(shí)現不了的功能,偶爾會(huì )用PS輔助一下,Sketch實(shí)現不了什么功能呢,比如你現在想做一個(gè)彌散陰影(自行百度),sketch就實(shí)現不了,十分想吐槽sketch沒(méi)有類(lèi)似于PS圖層“圖層樣式”的功能,不然基本上做UI就可以完全不打開(kāi)PS了。
目前我的觀(guān)點(diǎn)是Sketch可以作為UI設計主打軟件,適合新手使用,入門(mén)簡(jiǎn)單,學(xué)習成本極低,插件豐富,功能足夠強大,唯一美中不足就是只支持蘋(píng)果系統,但是我認為如果你是決心入行的話(huà),rmbp還是買(mǎi)一個(gè)吧。Sketch/PS的教程視頻網(wǎng)上一搜一大把,這里我就不贅述了。學(xué)習一款軟件,最重要的是持之以恒,一兩個(gè)月絕對可以掌握,這部分外功沒(méi)啥好說(shuō)的。
五、UI設計師的自我提升
好,從下文開(kāi)始,我假設你已經(jīng)是一個(gè)經(jīng)過(guò)三個(gè)月努力,熟練掌握設計工具的萌新了。那這時(shí)候你該如何修煉自己的內功呢?
UI設計師的自我提升step 1:看(Look)
“看是一個(gè)浸淫的過(guò)程,也是提高審美和觀(guān)察力的過(guò)程?!蔽覐拇蠖_(kāi)始,給自己的任務(wù)是每天睡前看一小時(shí):
我舉個(gè)例子:(以下舉例圖片全部來(lái)自Pinterest - my board)
比如晚上睡覺(jué)的時(shí)候,無(wú)聊翻Pinterest,然后看到這張圖,作為新手來(lái)說(shuō),心路歷程大概應該是類(lèi)似這樣的
知道一張設計稿里面每個(gè)元素是怎么繪制的,這是最初級的階段。
其次看什么呢?嘗試每看一張圖的時(shí)候不要像刷朋友圈一樣一晃而過(guò),看的時(shí)候強行試著(zhù)分析一下這張圖的優(yōu)點(diǎn)和缺點(diǎn),同樣舉個(gè)例子:
比如這個(gè)UI界面,作為一個(gè)新手,自己嘗試分析一下這個(gè)頁(yè)面的優(yōu)缺點(diǎn),比如:
優(yōu)點(diǎn):
1.這個(gè)頁(yè)面給人一種性冷淡風(fēng)干凈清爽的感覺(jué)(然后你去baidu/google"性冷淡風(fēng)",得到關(guān)鍵詞“Normcore”,然后再繼續dig deep,去詳細了解這種設計風(fēng)格。)
2.信息展現清楚,交互按鈕Add和Message也是清晰直接
3.圖一上面,用了一些漸變小紋理特別贊。
4.這種斜著(zhù)切一刀帶來(lái)的設計形式感特別贊,要學(xué)~~~
缺點(diǎn):
1.這個(gè)界面偏概念,隱藏了navigation bar和Status bar,在一般工作中這樣設計需要謹慎
2.雖然美觀(guān),頁(yè)面展現信息較少,在工作中一定是不適用了。比如圖一,一屏信息只展現了人名+人簡(jiǎn)介+Add和Message按鈕以及下面兩個(gè)人物列表。圖二更屌,只顯示了這個(gè)人的這么一點(diǎn)信息,換句話(huà)說(shuō),這個(gè)頁(yè)面所有呈現的信息約等于微博四分之一頁(yè)面信息,除非這個(gè)app功能特別少,只強調美感,不然應該不太會(huì )這么設
分析是UI設計的基本功,不管是瀏覽設計網(wǎng)站看設計作品還是日常使用app和電腦瀏覽網(wǎng)站,都可以抱著(zhù)這種分析設計的心態(tài)。如果你能根據你的設計分析寫(xiě)一個(gè)學(xué)習筆記什么的,相信我你會(huì )進(jìn)步得更快。
再然后看什么?嘗試找出這張圖第一時(shí)間吸引你眼球的元素。
如上圖的例子,那種斜著(zhù)切一刀的感覺(jué)是不是顯得特別利落?
比如這兩張圖:
同樣是方形構圖元素,第一張吸引我的是一種“品質(zhì)感”,第二張吸引我的是顏色。
包括第一張MARKET IT下面一條線(xiàn)的形式感設計和第二張最下面鞋上的VANS AQUA SHOES的形式感設計,都是可以學(xué)習和借鑒的。
總之,“看”是設計師每天都應該做的事情,長(cháng)期堅持多看多分析有助于設計感的培養,在熟練掌握軟件的前提下,眼高手就不會(huì )低。
UI設計師的自我提升step 2:臨?。–opy)
提到copy,大家可能會(huì )想到那句俗話(huà)說(shuō) Good designers copy. Great designers steal.
有的人說(shuō)臨摹不就是抄么?咳咳,咱們讀書(shū)人的事情能叫抄么?叫借鑒。。
其實(shí)不太對,大家想這樣一句話(huà),我說(shuō)讓你抄同桌的作業(yè)和臨摹同桌的作業(yè),區別在哪兒?
臨摹的意思是,盡自己所能,做到每一個(gè)像素分毫不差。
我給大家舉個(gè)例子,左面這張我自己作品里的一張圖,之前還沒(méi)有Sketch的時(shí)候用PS做的,后來(lái)學(xué)習Sketch的時(shí)候我又用Sketch臨摹了一遍,放在右邊:
其實(shí)仔細看是能看出區別的啦,但是臨摹,起碼要做到這種效果,每當你去臨摹一張設計稿的時(shí)候,可能要花大量時(shí)間,但是收獲巨大。 因為首先臨摹第一步是需要測量,測量和臨摹一個(gè)UI作品給我的幫助太大了,強烈建議每一位新手好好的,臨摹一兩款市面上很火的app,不管是什么,只要是你覺(jué)得界面還可以用著(zhù)夠方便,微信微博也好,美團網(wǎng)易云音樂(lè )也好什么都好,找一款app嘗試測量和臨摹,你會(huì )看到很多更深層次很有趣的東西。甚至可以了解這個(gè)產(chǎn)品UI當時(shí)的心路歷程,總之臨摹這件事你試試就知道了這方面我就不展開(kāi)了,以后有機會(huì )另起一文。 總之,不斷臨摹優(yōu)秀作品是我認為UI開(kāi)發(fā)設計新手成長(cháng)最捷徑的辦法(我認為沒(méi)有之一),因為很多時(shí)候光看是不夠的,有些時(shí)候你自認為很好實(shí)現的效果,到你手上實(shí)際去做的時(shí)候會(huì )發(fā)現根本就不是這樣的,不信的話(huà),下面這九個(gè)圖標,你們可以選一兩個(gè)去臨摹一下試試:
臨摹,是將“別人的”轉化為“自己的”最優(yōu)秀的辦法。第一步先做到盡量一模一樣,然后再去求變和思辨,往這個(gè)方向努力一段時(shí)間,回過(guò)頭,你會(huì )發(fā)現自己的進(jìn)步,除此之外,你還會(huì )發(fā)現,咦這些個(gè)app這種設計形式我都曾經(jīng)見(jiàn)過(guò)。。。
UI設計師的自我修養step 3: 嘗試分析 (Attempt to analysis)
嘗試分析一款app,基本上是從app的信息架構入手的,這是一個(gè)UI偏UE和產(chǎn)品的工作,但是對UI設計師來(lái)說(shuō)挺重要的,app的信息架構怎么做,說(shuō)白了就是花時(shí)間把整個(gè)app點(diǎn)一遍,然后分析app的信息層級,一般我用Xmaind7去做信息架構圖,比如我是一個(gè)dota2玩家,所以我曾經(jīng)做過(guò)max+的產(chǎn)品架構,放在下面給大家看:
做信息架構的時(shí)候不光光是點(diǎn)完記錄下來(lái)就結束了,要帶著(zhù)自己的想法去做,比如我圖上標綠色的地方是這個(gè)app的重點(diǎn)功能模塊,黃色的小問(wèn)號是我初次做信息架構覺(jué)得信息展現有問(wèn)題的地方。
做信息架構能給我們帶來(lái)什么?
第一,能夠讓UI設計師迅速了解一款產(chǎn)品。如果說(shuō)你剛入職一個(gè)新公司,那不妨入職第一天先從你公司信息架構入手~
第二,能夠讓UI設計師在橫向對比兩款或者多款APP產(chǎn)品交互的時(shí)候提供必要依據。這點(diǎn)不展開(kāi)了,推薦大家上手做網(wǎng)易云音樂(lè )和QQ音樂(lè )的信息架構,做了你就知道我在說(shuō)什么。
第三:方便UI設計師了解行業(yè)產(chǎn)品形態(tài)。比如你之前是一個(gè)旅行類(lèi)app的UI設計師,現在你即將跳槽去一個(gè)互聯(lián)網(wǎng)金融p2p的創(chuàng )業(yè)型新公司,如何入手設計一款新的p2p類(lèi)app呢?你只需要選擇市面上最火的兩三款p2p類(lèi)app做一下信息架構,你就會(huì )明白一個(gè)大致的方向,因為行業(yè)里大家都是這么做的,你就把好的地方繼承,不好的地方創(chuàng )新就是了。(心里話(huà):說(shuō)起來(lái)容易,做起來(lái)可完全不是這么一回事啊喂!Orz...)
第四:方便設計師做redesign。很多UI設計師都喜歡做作品集,那自己沒(méi)這么多線(xiàn)上作品怎么辦?于是就做redesign,站酷上UI中國上到處都是各種產(chǎn)品的redesign,有一些做得確實(shí)很好,在分析一款產(chǎn)品的信息架構之后其實(shí)是很容易找出產(chǎn)品一些易用性問(wèn)題的,那針對這樣的易用性問(wèn)題進(jìn)行優(yōu)化的redesign思維一定是有益的。
我在這里提供第二種制作信息架構的方法,這種方法更偏交互,我把他稱(chēng)之為點(diǎn)擊類(lèi)信息架構:
具體這是一張特別大的圖,我就不給大家展示全了,這里我著(zhù)重想說(shuō)的是這是另一種偏交互類(lèi)的信息架構方法,圖上那個(gè)S0,S1,S2是我自己編的詞,S1代表的是一次點(diǎn)擊就可以達到的頁(yè)面,S2表示的是兩次點(diǎn)擊可以達到的頁(yè)面,S3表示三次點(diǎn)擊可以達到的頁(yè)面,然后我把S1,S2,S3對齊排列,這樣就可以知道這個(gè)app的每個(gè)功能深度(深度的意思是指你需要通過(guò)幾次點(diǎn)擊才能達到,點(diǎn)擊次數越多當然就越深)。
比如分析的時(shí)候看到一個(gè)特別重要的功能被埋藏得比較深,那就說(shuō)明這個(gè)app是有問(wèn)題的,下次改版時(shí)候從UI方面著(zhù)手看看能不能把他提前之類(lèi)的。這當然是產(chǎn)品做的工作,但是UI設計師掌握這個(gè)沒(méi)啥不好。
UI設計師的自我修養step 4:回顧與總結(Review and summary)
看完一本書(shū),聽(tīng)完一個(gè)故事,一個(gè)項目結束之后,一個(gè)版本迭代完成之后,一份工作離職之后,都是需要總結的??偨Y開(kāi)發(fā)中出現的問(wèn)題。比如APP開(kāi)發(fā)和設計稿不一致,是不是設計這邊造成的,如果是,那我是怎么造成的,如果不是,那我有沒(méi)有挽回的余地??偨Y設計中出現的問(wèn)題,這些地方是不是還有優(yōu)化的空間??偨Y溝通中出現的問(wèn)題,是不是不該罵產(chǎn)品罵的這么狠。(我承認,我經(jīng)常和產(chǎn)品撕得天昏地暗2333333 Orz...)
總之,總結是特別重要的一點(diǎn),尤其是看完一本書(shū)之后的總結和踩到坑之后的總結,多和開(kāi)發(fā)成為朋友,他們會(huì )教會(huì )你很多。(不然我特么作為一個(gè)設計怎么知道滑動(dòng)切換瞬間navigationbar不能變色。。。
來(lái)源:UI中國