如何從平面設(shè)計(jì)轉(zhuǎn)型到UI設(shè)計(jì)？平面設(shè)計(jì)主要做的是視覺(jué)設(shè)計(jì)，和UI設(shè)計(jì)有很多相似之處，所以平面設(shè)計(jì)轉(zhuǎn)UI設(shè)計(jì)相對(duì)快的多，但是還要補(bǔ)充一些UI設(shè)計(jì)的思維規(guī)范。第一階段 工具的掌握平面主要運(yùn)用的設(shè)計(jì)軟件是P

如何從平面設(shè)計(jì)轉(zhuǎn)型到UI設(shè)計(jì)？

平面設(shè)計(jì)主要做的是視覺(jué)設(shè)計(jì)，和UI設(shè)計(jì)有很多相似之處，所以平面設(shè)計(jì)轉(zhuǎn)UI設(shè)計(jì)相對(duì)快的多，但是還要補(bǔ)充一些UI設(shè)計(jì)的思維規(guī)范。

第一階段 工具的掌握

平面主要運(yùn)用的設(shè)計(jì)軟件是PS、AI、CDR，但是UI設(shè)計(jì)不僅需要掌握這些基礎(chǔ)工具，到了項(xiàng)目后期，UI設(shè)計(jì)師還需進(jìn)行交互設(shè)計(jì)，以及動(dòng)效設(shè)計(jì)，所以還要具備做交互設(shè)計(jì)的Axure和做動(dòng)效設(shè)計(jì)的AE。

第二階段 學(xué)習(xí)UI設(shè)計(jì)規(guī)范

平面設(shè)計(jì)、美工不強(qiáng)調(diào)規(guī)范，而UI設(shè)計(jì)非常強(qiáng)調(diào)規(guī)范。每個(gè)像素都要精確，以像素單位來(lái)研究視覺(jué)效果。一般UI設(shè)計(jì)是基于安卓和IOS系統(tǒng)運(yùn)行的，這兩個(gè)系統(tǒng)都有其官方的設(shè)計(jì)規(guī)范，不同機(jī)型也有不同的規(guī)范。建立設(shè)計(jì)規(guī)范能更好的統(tǒng)一管理設(shè)計(jì)進(jìn)度，產(chǎn)品的定位、文化、特點(diǎn)。

第三階段 進(jìn)行大量的臨摹

每個(gè)偉大的設(shè)計(jì)師都是從臨摹開(kāi)始的，沒(méi)有人天生就會(huì)設(shè)計(jì)。平時(shí)多去站酷、UI中國(guó)、花瓣等設(shè)計(jì)網(wǎng)站看好的作品并進(jìn)行臨摹，逼自己注意細(xì)節(jié)。大量的臨摹能使自己的設(shè)計(jì)水平快速提升，設(shè)計(jì)審美也不斷提升。

第四階段 參與項(xiàng)目

熟悉UI設(shè)計(jì)的工作流程：產(chǎn)品定位與市場(chǎng)分析、用戶研究與分析、原型設(shè)計(jì)、界面設(shè)計(jì)、完善工作。每個(gè)環(huán)節(jié)，設(shè)計(jì)師都應(yīng)該參與其中。一個(gè)項(xiàng)目可能由許多不同部門共同參與完成，UI設(shè)計(jì)師如何與團(tuán)隊(duì)配合并發(fā)揮自己的價(jià)值非常重要。一名合格的設(shè)計(jì)師，應(yīng)該能貫穿整個(gè)UI流程工作，而并非單純的圖形界面設(shè)計(jì)。

學(xué)識(shí)才淺，如有不妥觀點(diǎn)，請(qǐng)加以扶正。

我是小新，歡迎點(diǎn)贊和關(guān)注！

如有其它問(wèn)題請(qǐng)?jiān)谠u(píng)論區(qū)留言。

ui設(shè)計(jì)需要學(xué)什么？

UI是User interface的簡(jiǎn)稱，即用戶界面設(shè)計(jì)。

1，最根本的元素是興趣，濃厚的興趣可以激發(fā)出來(lái)設(shè)計(jì)者潛在的能量和創(chuàng)造力。

2，審美觀。美術(shù)功底培養(yǎng)是學(xué)習(xí)的第二元素，給人帶來(lái)視覺(jué)上的沖擊力和震撼，你就是一個(gè)人物了。

3，軟件方面。AI設(shè)計(jì)是許多軟件設(shè)計(jì)的綜合，通常是PS AI AE Fireworks，coreldraw.輔助設(shè)計(jì)軟件cutterman切圖插件，Mark man，PPT、Word，flash等等。沒(méi)有這么多軟件作為強(qiáng)大的支持，根本不可能成為一個(gè)合格的設(shè)計(jì)師，妄想一蹴而就，一鳴驚人是徒勞的。

4，設(shè)計(jì)方向。研究人，工具及人與工具的關(guān)系。

5，設(shè)計(jì)細(xì)節(jié)。

1）模擬現(xiàn)實(shí)，不斷調(diào)整。

2）界面簡(jiǎn)潔流暢自然。

3）通用圖標(biāo)和創(chuàng)新圖標(biāo)結(jié)合起來(lái)。圖標(biāo)不能太復(fù)雜，讓用戶費(fèi)解是大忌。

4）色彩搭配盡量不要超過(guò)三個(gè)，黑白灰優(yōu)先。

5）語(yǔ)言使用一致性和準(zhǔn)確性，通俗性，關(guān)懷性。

CSS3的動(dòng)畫的意義何在？

1、在性能上會(huì)稍微好一些，CSS3使用GPU，瀏覽器還會(huì)對(duì)CSS3的動(dòng)畫做一些優(yōu)化（比如專門新建一個(gè)圖層用來(lái)跑動(dòng)畫）。

2、代碼相對(duì)簡(jiǎn)單，在現(xiàn)代 PC 瀏覽器上，CSS3 Animation 和 Transition 好寫好用，流暢絲滑，而且動(dòng)畫過(guò)程0 GC。

3、CSS3 比 jQuery animate() 更流暢，更快，更效率。

4、CSS3 更傾向于實(shí)現(xiàn)交互效果和界面建設(shè)。

但其缺點(diǎn)也很明顯：

1、在動(dòng)畫控制上不夠靈活。

2、兼容性不好。

3、部分動(dòng)畫功能無(wú)法實(shí)現(xiàn)。

所以，在實(shí)現(xiàn)一些小的交互動(dòng)效的時(shí)候，就多考慮考慮CSS吧。 而在需要兼容性很好并且有復(fù)雜的事件響應(yīng)的情況下使用jQuery中的animate()函數(shù)。