我們聊聊UI
作者:華清遠(yuǎn)見(jiàn)講師
1、UI相關(guān)概念
1、 UI即User Interface(用戶界面)的簡(jiǎn)稱。
用戶界面指人和機(jī)器互動(dòng)過(guò)程中的界面,以手機(jī)為例,手機(jī)上的界面都屬于用戶界面,我們通過(guò)對(duì)這個(gè)界面向手機(jī)發(fā)出指令,手機(jī)根據(jù)指令產(chǎn)生相應(yīng)的反饋。設(shè)計(jì)這套界面是覺(jué)得人就稱為UI設(shè)計(jì)師。
在設(shè)計(jì)師領(lǐng)域,在PC端從事網(wǎng)頁(yè)設(shè)計(jì)的人我們成為WUI(Web User Interface)設(shè)計(jì)師或者網(wǎng)頁(yè)設(shè)計(jì)師。在移動(dòng)端從事移動(dòng)設(shè)計(jì)的人,我們稱為GUI(Graphics User Interface)。一般情況下,小企業(yè)不會(huì)分那么清楚,都統(tǒng)一稱呼UI設(shè)計(jì)師,反正產(chǎn)出的都是界面,都需要對(duì)產(chǎn)品的界面視覺(jué)負(fù)責(zé)。
2、UE即User Experience(用戶體驗(yàn))
UED即User Experience Design(用戶體驗(yàn)設(shè)計(jì))
用戶體驗(yàn)設(shè)計(jì)就不光是對(duì)前期的用戶體驗(yàn)方面做打算,他們需要用自己的知識(shí)、經(jīng)驗(yàn)、設(shè)計(jì)能力拿出設(shè)計(jì)方案,自從2006年淘寶把設(shè)計(jì)部門稱為UED之后,國(guó)內(nèi)很多企業(yè)跟風(fēng)把設(shè)計(jì)部分也改為UED。但是很多UED團(tuán)隊(duì)名不符實(shí),團(tuán)隊(duì)中甚至沒(méi)有獨(dú)立設(shè)置用戶體驗(yàn)研究的職位,這個(gè)職位可能就是產(chǎn)品人員或者界面設(shè)計(jì)師承擔(dān)了。
到產(chǎn)品層面上,用戶體驗(yàn)包含以下幾點(diǎn):
1、產(chǎn)品性能:產(chǎn)品是否夠快、是否穩(wěn)定、是否占很多的系統(tǒng)資源等。
2、產(chǎn)品內(nèi)容:產(chǎn)品的內(nèi)容是否可以為用戶解決一定的問(wèn)題,是否達(dá)到了用戶需求,解決了用戶的癢點(diǎn)。
3、產(chǎn)品交互:交互是否流暢,用戶是否能快速準(zhǔn)確的找到自己想要的功能。
4、產(chǎn)品界面:界面的風(fēng)格是否統(tǒng)一、整齊、給用戶帶來(lái)高質(zhì)量的感覺(jué)。
二、UI的學(xué)習(xí)方法
很多想學(xué)UI的北鼻們,一開始都會(huì)問(wèn)一個(gè)問(wèn)題“不會(huì)畫畫還能不能學(xué)UI?”其實(shí)學(xué)習(xí)UI不需要你一定有美術(shù)基礎(chǔ)的,當(dāng)然你有美術(shù)基礎(chǔ)更好。但是如果你沒(méi)有但是你又想從事這個(gè)職業(yè),那必須有審美,有色彩感。可以多看一些基礎(chǔ)類知識(shí),知識(shí)應(yīng)該了解物體的透視、光照射的角度、在對(duì)應(yīng)的形狀中表現(xiàn)出怎樣的明暗分布等。
1、圖形基礎(chǔ)
美術(shù)生基礎(chǔ)課就是三門:
素描、速寫、色彩
2、軟件的應(yīng)用
*Adobe Photoshop,簡(jiǎn)稱“PS”,一款老牌像素處理軟件,各個(gè)設(shè)計(jì)行業(yè)圖形處理都會(huì)用到,可以滿足UI界面設(shè)計(jì)的日常需要。
*Adobe illustrator,簡(jiǎn)稱“AI”,是矢量軟件,在處理一些復(fù)雜的圖形路徑時(shí),可以考慮使用。一般在AI中繪制圖標(biāo)然后潛入PS中。
*Adobe After Effects,簡(jiǎn)稱“AE”,現(xiàn)在扁平化設(shè)計(jì)成為主流,所以動(dòng)效也就比較流行。
*Ps Play,是一個(gè)通過(guò)Wi-Fi網(wǎng)絡(luò),實(shí)時(shí)在終端設(shè)備上預(yù)覽電腦上Photoshop的設(shè)計(jì)稿,可同步調(diào)試及截圖保存到移動(dòng)終端,并可以通過(guò)Email、微信等工具即時(shí)分享的跨終端應(yīng)用。
*MarkMan,是一款標(biāo)注軟件,在移動(dòng)設(shè)計(jì)中設(shè)計(jì)師要對(duì)自己設(shè)計(jì)的圖進(jìn)行標(biāo)注切圖。
3、設(shè)計(jì)規(guī)范
一般設(shè)計(jì)的應(yīng)用是基于IOS系統(tǒng)和Android系統(tǒng)運(yùn)行。這兩個(gè)系統(tǒng)都有其官方的系統(tǒng)規(guī)范,這些規(guī)范都羅列了詳細(xì)的通用型設(shè)計(jì)框架。如各自系統(tǒng)狀態(tài)欄、各個(gè)系統(tǒng)下的尺寸、導(dǎo)航欄和標(biāo)簽欄的高度是多少、手機(jī)屏上最適字號(hào)是多大等。當(dāng)然還有web網(wǎng)頁(yè)設(shè)計(jì)端的規(guī)范,這個(gè)部分我們?cè)谝院蟮牟┪闹羞M(jìn)行闡述。
4、臨摹學(xué)習(xí)
現(xiàn)在有很多設(shè)計(jì)網(wǎng)站,要多利用業(yè)余時(shí)間去臨摹。比如站酷、UI中國(guó)、dribbble、behance等等,設(shè)計(jì)的東西和風(fēng)格每天都在發(fā)生著變化,每天去看最新的設(shè)計(jì)師作品,才能跟上設(shè)計(jì)潮流。
5、參與項(xiàng)目
經(jīng)歷一套完整的設(shè)計(jì)流程是最好的學(xué)習(xí)鍛煉方式。從一開始的討論原型圖到出設(shè)計(jì)效果圖,再到標(biāo)注切圖給開發(fā)者。效果圖不斷導(dǎo)出到手機(jī)上預(yù)覽,核對(duì)電腦的設(shè)計(jì)稿和手機(jī)上預(yù)覽的差距,你會(huì)從實(shí)踐中不斷提高。也可以通過(guò)假設(shè)的設(shè)計(jì)項(xiàng)目,也就是Redesign(再設(shè)計(jì)),比現(xiàn)有比較火的app重新構(gòu)造做設(shè)計(jì)稿,同時(shí)能把自己設(shè)計(jì)思路完整展現(xiàn)說(shuō)明出來(lái)。之前有過(guò)這樣的案例,某設(shè)計(jì)師不滿意Facebook的界面,按自己的想法重新設(shè)計(jì)了界面,并在設(shè)計(jì)網(wǎng)站上展示,由于二次設(shè)計(jì)的效果出色,還吸引了Facebook的注意,最終收到了Facebook的Offer。