大家好我是雨成，很榮幸本次能在烏魚(yú)說(shuō)和大家聊聊設(shè)計(jì)，聊聊藝術(shù)。很多人都知道我是一枚專(zhuān)科生且有過(guò)些大廠經(jīng)歷，借此機(jī)會(huì)和大家聊聊在設(shè)計(jì)藝術(shù)上的一些思考，涉及到動(dòng)效邏輯和目標(biāo)驅(qū)動(dòng)立、自我規(guī)劃等一些問(wèn)題分享，下面直接開(kāi)始吧！
分享大綱
1.專(zhuān)科生獨(dú)自遠(yuǎn)征
個(gè)人經(jīng)歷描述
用目標(biāo)驅(qū)動(dòng)成長(zhǎng)
2.經(jīng)典作品案例分析
經(jīng)典案例作品分析（創(chuàng)意到視覺(jué)）
3.如何提升動(dòng)效的思維邏輯
用邏輯思維創(chuàng)造好的體驗(yàn)動(dòng)效
4.堅(jiān)持不懈、大步向前
UI自學(xué)練習(xí)提升的方法
談?wù)勎矣龅降目雍陀腥さ氖?/p>
UI設(shè)計(jì)師未來(lái)的自我規(guī)劃
1.專(zhuān)科生獨(dú)自遠(yuǎn)征
我是雨成，是一名騰訊視覺(jué)設(shè)計(jì)師，就讀于深圳技師學(xué)院互聯(lián)網(wǎng)專(zhuān)業(yè)。
最早，也就是三年前，實(shí)際上我是一直在學(xué)習(xí)代碼的過(guò)程中，在前端后臺(tái)各類(lèi)代碼中度過(guò)了我大一的生活。到了二年級(jí)開(kāi)始加入到了學(xué)院的工作室（校企合作實(shí)際是外包）擔(dān)任視覺(jué)設(shè)計(jì)師之后，才開(kāi)始了自己慢慢的對(duì)設(shè)計(jì)的理解和熱愛(ài)，其實(shí)早年我是一直在寫(xiě)代碼的，不過(guò)那段時(shí)間并沒(méi)有浪費(fèi)，它某種意義上提高了我對(duì)某些東西的認(rèn)知以及思維邏輯的轉(zhuǎn)變。
在校期間，每天自我驅(qū)動(dòng)學(xué)習(xí)的時(shí)間高達(dá)12小時(shí)，還參與了大量的創(chuàng)業(yè)類(lèi)的比賽項(xiàng)目，比如創(chuàng)業(yè)計(jì)劃書(shū)編寫(xiě)、創(chuàng)業(yè)大賽、設(shè)計(jì)大賽等等。因?yàn)閷W(xué)院工作室實(shí)際上每位同學(xué)都有相應(yīng)的崗位以及目標(biāo)指標(biāo)，你們覺(jué)得在校期間僅僅在工作室待著就能快速成長(zhǎng)了嗎？
并不然，每個(gè)同學(xué)成長(zhǎng)時(shí)間都是一致的，每天都是8小時(shí)固定，我們拿什么超過(guò)別人？其實(shí)是休息時(shí)間、周六日等！每天我都會(huì)完成學(xué)院課程同時(shí)，騰出來(lái)幾個(gè)鐘做自己的項(xiàng)目和練習(xí)，每個(gè)月能比別人超出100小時(shí)的學(xué)習(xí)時(shí)間，一年后你也可以發(fā)生蛻變～
圖三是電腦的一些文件規(guī)整，從15年開(kāi)始每年都會(huì)有很多不同類(lèi)別的學(xué)習(xí)突破計(jì)劃，保證每年每個(gè)月都在學(xué)習(xí)成長(zhǎng)中。如果你也是一位在校大學(xué)生或者想要轉(zhuǎn)行的同學(xué)，我可以給你們幾個(gè)很好的建議：
1.不要害怕學(xué)歷比別人低，能力最關(guān)鍵。
2.不要覺(jué)得學(xué)院有些課程枯燥乏味，多參加各類(lèi)比賽對(duì)你有幫助。
3.不要沉迷游戲，每天保持學(xué)習(xí)的熱情最少兩小時(shí)(甚至周末)。
1.1用目標(biāo)來(lái)驅(qū)動(dòng)成長(zhǎng)
這一章開(kāi)始進(jìn)行干貨環(huán)節(jié)。首先先講講在設(shè)計(jì)藝術(shù)成長(zhǎng)中，目標(biāo)驅(qū)動(dòng)成長(zhǎng)的一些心得和方法！
記得早些年我自學(xué)的時(shí)候，每天會(huì)陷入一種死循環(huán)，那就是無(wú)意義和目的性的去臨摹或者創(chuàng)作到頭來(lái)發(fā)現(xiàn)成長(zhǎng)緩慢，甚至沒(méi)有效果。直到后來(lái)開(kāi)始用目標(biāo)驅(qū)動(dòng)的原則來(lái)執(zhí)行，它需要有一個(gè)最終的目標(biāo)愿景，以及多個(gè)最小時(shí)間節(jié)點(diǎn)完成，期間會(huì)有很多場(chǎng)景的融入，接下來(lái)好好聊聊～
目標(biāo)驅(qū)動(dòng)就好像我們?cè)谂囊徊侩娪埃镞厱?huì)有很多的鏡頭和場(chǎng)景，我們要做的就是寫(xiě)出中期要達(dá)成的目標(biāo)，可以細(xì)化到生活當(dāng)中去，比如達(dá)成之后我會(huì)獲得成就感或者什么獎(jiǎng)勵(lì)等等...
首先你要想想，未來(lái)你三年來(lái)要成為什么樣的人，到達(dá)什么樣的高度等等
比如想成為站酷推薦設(shè)計(jì)師、或者想加入某個(gè)心儀的大公司修煉、又或者想創(chuàng)業(yè)開(kāi)一間工作室來(lái)實(shí)現(xiàn)更多目標(biāo)，也可以是吧自己的英語(yǔ)學(xué)好之類(lèi)的，其實(shí)不僅是設(shè)計(jì)，都是通用的！
第一步：未來(lái)的目標(biāo)或者成為的角色
這一步是開(kāi)頭的一步，但是我希望它是實(shí)事求是的符合你們目前的情況的，我會(huì)按照我自身的的經(jīng)驗(yàn)做一個(gè)參照，我是17歲的時(shí)候開(kāi)始設(shè)想未來(lái)角色以及目標(biāo)，比如我設(shè)定的是 兩年內(nèi)能加入騰訊工作。
第二步：我需要滿(mǎn)足什么條件？
如果人人想著能成功，那世界上都是偉人。第一步如果我們制定好了，接下來(lái)越來(lái)越關(guān)鍵，比如我的愿景是 兩年內(nèi)加入騰訊工作，那么我需要制定我滿(mǎn)足什么條件才能完成這個(gè)愿景。
首先我會(huì)吧滿(mǎn)足的條件列舉出來(lái)：
1.成為站酷推薦設(shè)計(jì)師（知名度活躍度的體現(xiàn)）
2.有UI、插畫(huà)、圖標(biāo)、動(dòng)效等方面的作品集。
3.有至少一套個(gè)人風(fēng)格作品產(chǎn)出。
4.一家背景很好的公司背景。
5. ……..
當(dāng)我們把這一步履清楚，我們就會(huì)把目標(biāo)拆分細(xì)化了，從【我如何兩年內(nèi)能加入騰訊工作】變成【我兩年內(nèi)加入騰訊需要滿(mǎn)足什么條件】這一個(gè)思維轉(zhuǎn)換了。接下來(lái)就是把條件量化成時(shí)間！
第三步：量化時(shí)間
有了上述的四點(diǎn)條件需求，我就可以開(kāi)始量化自己的時(shí)間安排了，時(shí)間會(huì)證明你的努力成果。首先繼續(xù)學(xué)會(huì)拆分，比如第一點(diǎn)：我要成為站酷推薦設(shè)計(jì)師，那么最低的標(biāo)準(zhǔn)就是有三個(gè)首頁(yè)推薦的視覺(jué)作品，活躍度高。當(dāng)你了解這一個(gè)需求難度之后，就可以開(kāi)始量化了！
比如我一年內(nèi)要上三次站酷首頁(yè)，每90天努力出一套作品或者風(fēng)格等等……
那么優(yōu)化之后，這一點(diǎn)就變成，我第一個(gè)90天需要畫(huà)30張插畫(huà)(平均3天一張)，或者一套app視覺(jué)作品等等，那么目標(biāo)顯而易見(jiàn)就很清晰了，剩下幾點(diǎn)繼續(xù)拆分，你就會(huì)發(fā)現(xiàn)其實(shí)你有很多的事情還沒(méi)有達(dá)成，需要更努力！
這是我的一個(gè)中長(zhǎng)期的計(jì)劃目標(biāo)，雖然現(xiàn)實(shí)會(huì)有很多的外在因素，但是只需要我們努力，隨時(shí)警惕心中的目標(biāo)，時(shí)間會(huì)給我們答案！
總結(jié)：目標(biāo)驅(qū)動(dòng)的案例做法
做法大致就是上面列舉的方法，由于太長(zhǎng)太細(xì)致化我就不一一列舉，大家可以通讀幾遍，跟著進(jìn)行，找到你的中期目標(biāo)，并付出努力！
2.經(jīng)典作品案例分享
剝離炫酷的外表，追尋產(chǎn)品設(shè)計(jì)自身的使用，在實(shí)用中刻畫(huà)細(xì)節(jié)，讓界面融入簡(jiǎn)約而不簡(jiǎn)單的美，是我們商業(yè)設(shè)計(jì)的較高境界。
很多同學(xué)剛?cè)胄械臅r(shí)候，會(huì)優(yōu)先考慮視覺(jué)的沖擊力去做設(shè)計(jì)，但是UI設(shè)計(jì)并不是讓你去做的多酷炫，而是應(yīng)該符合產(chǎn)品調(diào)性以及用戶(hù)需求的，如下圖，它是我早幾年設(shè)計(jì)的一款待辦事項(xiàng)應(yīng)用，你們覺(jué)得有什么問(wèn)題呢？
這樣一看視覺(jué)非常的酷炫，色彩搭配協(xié)調(diào)，但是真的是用戶(hù)需要的嘛？用戶(hù)第一反應(yīng)會(huì)被顏色所擾亂想法，甚至降低了閱讀的成本，另外右側(cè)的內(nèi)容確定是最重要的嘛，交互上是否存在問(wèn)題呢？等等一些列問(wèn)題，那么如何去做簡(jiǎn)約而不簡(jiǎn)單的設(shè)計(jì)呢？
下面會(huì)運(yùn)用兩個(gè)案例作為分享，分別是高高手項(xiàng)目、以及todo產(chǎn)品！
會(huì)涉及到一下幾個(gè)點(diǎn)的分享：
1.我們要如何打造用戶(hù)體驗(yàn)好的產(chǎn)品？
2.工作中如何建立組件化的規(guī)范？
案例一
Todo是一款待辦事項(xiàng)的產(chǎn)品，也是我畢設(shè)構(gòu)想的一個(gè)部分內(nèi)容，那么我們要如何打造一款有創(chuàng)意并且符合主流的用戶(hù)體驗(yàn)的產(chǎn)品呢？
首先我們明確了我們產(chǎn)品的出發(fā)點(diǎn)，就是解決用戶(hù)快速新增事項(xiàng)、完成時(shí)把事項(xiàng)關(guān)閉的基礎(chǔ)功能。其次才是其他的輔助功能，比如如何設(shè)置事項(xiàng)的提醒時(shí)間，最后提醒時(shí)間等。下面是一個(gè)我最開(kāi)始的首頁(yè)原型圖：
首先，我會(huì)繪制一個(gè)最小原型圖，他基本包含了產(chǎn)品最基本的功能，但是體驗(yàn)比較差。我們分析會(huì)發(fā)現(xiàn)缺少了編輯事項(xiàng)提醒時(shí)間的入口、看不出這是哪一天的事項(xiàng)、一些數(shù)據(jù)規(guī)整功能，添加今日事項(xiàng)的交互未知等等。
根據(jù)上邊分析之后，我們會(huì)明確最小原型上出現(xiàn)的問(wèn)題，我們?cè)谥鹨凰伎純?yōu)化進(jìn)去，最終成為一個(gè)可使用的優(yōu)化原型圖方案
得到了優(yōu)化之后的最終原型圖，我們就可以視覺(jué)介入了。先確定好整體的風(fēng)格方向和主色調(diào)以及圖標(biāo)風(fēng)格，就可以開(kāi)始第一期的視覺(jué)方案設(shè)計(jì)。
案例二
高高手是站酷旗下教育品牌，是一款線(xiàn)上直播互動(dòng)教學(xué)的產(chǎn)品。工作中，我們?cè)谝曈X(jué)介入階段
一般都會(huì)拿到類(lèi)似這樣的原型圖：
一般見(jiàn)到這種需求，你如果盲目開(kāi)工視覺(jué)介入很容易出問(wèn)題，因?yàn)槟氵€未了解產(chǎn)品的用戶(hù)需求到底是什么，以及哪些區(qū)域應(yīng)該做可視化等。一名合格的UI設(shè)計(jì)師，并不是色彩填充師，我們也要在開(kāi)始做之前，吧疑問(wèn)拋出來(lái)，來(lái)驗(yàn)證我們的想法！
我們先要了解清楚產(chǎn)品受眾的用戶(hù)是誰(shuí)，用戶(hù)的使用場(chǎng)景是哪里等等一些用戶(hù)旅程分析等等。以下是一些早之前收集的用戶(hù)反饋數(shù)據(jù)：
1.需要快速找到想要的課程，或者在不了解目的的情況快速給我一些感興趣的內(nèi)容。
2.我是伸手黨，我需要快速看到免費(fèi)的課程……
3.我是高端用戶(hù)，請(qǐng)給我最好的直播課程。
4.我需要快速看到我學(xué)習(xí)的進(jìn)度…..等等
很明顯，目前的原型圖還缺少了篩選的入口，信息層級(jí)歸類(lèi)不清晰，無(wú)法判斷是否直播等等問(wèn)題存在。
當(dāng)我們充分了解了用戶(hù)的需求，我們就明確了我們?cè)O(shè)計(jì)的目標(biāo)是什么：
1.要把快速篩選的模塊提出來(lái)，不能做隱藏，減少一步操作。
2.要有篩選的入口滿(mǎn)足我們這種伸手黨的需求。
3.要做信息層級(jí)的拆分，直播類(lèi)標(biāo)簽需要提取出來(lái)。
4.等等等
很多時(shí)候，設(shè)計(jì)師是解決用戶(hù)問(wèn)題存在的，他不應(yīng)該是為了美觀而美觀，應(yīng)該是在解決了用戶(hù)最基本需求體驗(yàn)的情況下。另外信息重組也是很關(guān)鍵的一個(gè)點(diǎn)，需要合理的吧重點(diǎn)信息排放出來(lái)呈現(xiàn)給用戶(hù)，減少理解成本。
其次就是，在做新產(chǎn)品或者練習(xí)的之前，我們都需要明確幾個(gè)點(diǎn)就是，1.我的產(chǎn)品性格關(guān)鍵字是什么？（比如穩(wěn)重的、活力的、簡(jiǎn)約的）2.我的產(chǎn)品主色調(diào)是什么 3.我的產(chǎn)品風(fēng)格是什么(卡片的，擬物的，通欄的) 4.我的產(chǎn)品圖標(biāo)風(fēng)格是什么…..等等之類(lèi)的問(wèn)題。
當(dāng)我們搞清楚了這幾個(gè)問(wèn)題，就會(huì)對(duì)我們接下來(lái)的工作減少很多的時(shí)間，也會(huì)減少改稿的次數(shù)，比如高高手的性格關(guān)鍵字是：簡(jiǎn)約、設(shè)計(jì)感、簡(jiǎn)約的，顏色是品牌色等等等。在設(shè)計(jì)過(guò)程中就開(kāi)始不斷的把品牌規(guī)范制定好，后續(xù)的沿用就會(huì)減少大量時(shí)間以及說(shuō)服力。
接下來(lái)是設(shè)計(jì)師的另外一項(xiàng)需要 突破的方法。就是要學(xué)會(huì)做模塊化規(guī)范，這會(huì)大大減少你接下來(lái)的修改時(shí)間，以及讓整套視覺(jué)看起來(lái)更合理。
比如圖上是一個(gè)示意圖，你在設(shè)計(jì)一款產(chǎn)品的時(shí)候，你就要有意識(shí)的為后續(xù)的界面做風(fēng)格延續(xù)規(guī)范制定，比如左右兩邊間距的規(guī)范制定、模塊之間上下的間距、文案主副標(biāo)題的字號(hào)、正文的字號(hào)規(guī)范等等
比如，產(chǎn)品會(huì)有有非常多圖標(biāo)，你可以經(jīng)過(guò)分析，找到符合產(chǎn)品調(diào)性或者基因的圖標(biāo)風(fēng)格，先設(shè)計(jì)一個(gè)，然后把它組建模塊化風(fēng)格延續(xù)，讓后續(xù)的圖標(biāo)看起來(lái)都是一個(gè)產(chǎn)品的。那么總結(jié)起來(lái)在工作中的幾個(gè)工作原則就是：
1.充分了解原型圖以及用戶(hù)心理需求
2.明確產(chǎn)品性格、調(diào)性、風(fēng)格、主色調(diào)等等
3.制定模塊化的標(biāo)準(zhǔn)，比如間距，字號(hào)規(guī)范，圖標(biāo)風(fēng)格等等
4.制定產(chǎn)品設(shè)計(jì)規(guī)范模版
3.在工作和練習(xí)中如何做出好的動(dòng)效
可能有人會(huì)問(wèn)我們?yōu)槭裁匆鰟?dòng)效設(shè)計(jì)？
動(dòng)效作為一個(gè)更高效更靈活的信息載體，可以在有限的時(shí)間內(nèi)呈現(xiàn)更好的視覺(jué)效果，也是目前高質(zhì)量APP不可缺少的信息載體之一，2、能為靜態(tài)頁(yè)面提供更清晰的信息關(guān)聯(lián)形式。3、我們能通過(guò)動(dòng)效設(shè)計(jì)產(chǎn)生和用戶(hù)之間的互動(dòng)，產(chǎn)生共鳴！
一款好的產(chǎn)品，一定多多少少會(huì)有動(dòng)效的介入，接下來(lái)會(huì)對(duì)以下幾點(diǎn)進(jìn)行一個(gè)講解：
1.如何在平淡界面中融入動(dòng)效
2.如何鍛煉自己動(dòng)效的邏輯思維
3.如何和開(kāi)發(fā)哥哥對(duì)接動(dòng)畫(huà)
在開(kāi)始之前，我們先看看市面上優(yōu)秀的一些商業(yè)動(dòng)效案例！
圖上是國(guó)外設(shè)計(jì)團(tuán)隊(duì)Ramotion的設(shè)計(jì)作品，非常合理的在資金管理網(wǎng)站融入了動(dòng)效，看起來(lái)既時(shí)尚又提升產(chǎn)品調(diào)性！
3.1 如何在平淡界面中融入動(dòng)效
這是年前的一款產(chǎn)品頁(yè)面，看起來(lái)中規(guī)中矩但是卻少了亮點(diǎn)！如何打破這個(gè)格局呢，那就是融入動(dòng)效來(lái)輔助產(chǎn)品。首先帶大家分析一下，我的設(shè)計(jì)初衷是什么。首先首圖我融入了左上右下兩個(gè)圓圈，是為了做循環(huán)動(dòng)畫(huà)而設(shè)計(jì)的。那么還有什么地方可以融入呢？
接下來(lái)我們做一個(gè)拆分的步驟給你們看看！
大家不妨仔細(xì)看幾分鐘，分析一下我當(dāng)時(shí)的想法。實(shí)際上在這個(gè)平淡頁(yè)面上我融入了3種動(dòng)畫(huà)第一：onepage的兩個(gè)圓圈循環(huán)動(dòng)畫(huà)。第二：重點(diǎn)文案逐個(gè)進(jìn)場(chǎng)，吸引用戶(hù)多次閱讀 。 第三：第二模塊的四個(gè)圖標(biāo)隱藏在手機(jī)底下，滑動(dòng)的時(shí)候出來(lái)。
實(shí)際上在平淡頁(yè)面中融入更好的動(dòng)畫(huà)，需要不斷的思考，你在做設(shè)計(jì)的同時(shí)就要考慮動(dòng)畫(huà)的存在，不管最終能不能實(shí)現(xiàn)，實(shí)際上我在設(shè)計(jì)這個(gè)網(wǎng)站的同時(shí)，就是基于動(dòng)畫(huà)的存在來(lái)實(shí)現(xiàn)的布局和結(jié)構(gòu)，總結(jié)幾點(diǎn)就是：
1.動(dòng)畫(huà)基本模式：不透明度改變、位置改變、縮放改變、旋轉(zhuǎn)改變（可同時(shí)疊加）
3.2 如何鍛煉自己的動(dòng)效邏輯思維
在平時(shí)日常工作和練習(xí)中，動(dòng)效都是能提高品質(zhì)感以及體現(xiàn)設(shè)計(jì)表現(xiàn)力的比較基礎(chǔ)的方式，下面我們聊聊如何鍛煉自己的動(dòng)效邏輯思維！
首先和大家說(shuō)的是，這件事并沒(méi)有捷徑，需要通過(guò)不斷的分析，和練習(xí)來(lái)提高，那么怎么去執(zhí)行我會(huì)和大家細(xì)細(xì)聊一下！
1.學(xué)會(huì)分析別人的動(dòng)效作品
2.自己主動(dòng)練習(xí)
3.21 如何分析別人的動(dòng)效作品
我們先看一組我年前的案例！
我用了以下三張圖做一個(gè)示意，首先我在構(gòu)思的時(shí)候，是希望用戶(hù)滑動(dòng)進(jìn)來(lái)的時(shí)候，是由一臺(tái)大型的汽車(chē)，向上的縮小，把左右可切換的車(chē)做一個(gè)大小比例關(guān)系，通過(guò)左右切換的時(shí)候汽車(chē)之間做一個(gè)大小變化和文字的變化。
這是分析別人動(dòng)效的方法，其實(shí)就是多次觀看反復(fù)觀看和思考的過(guò)程，并且記錄到腦海里，下面推薦一些常用到的動(dòng)效學(xué)習(xí)靈感網(wǎng)站。
Dribbble就不用多介紹了，是全球最大的設(shè)計(jì)靈感聚集地，我一般會(huì)在上邊建立很多的文件夾，比如loading動(dòng)畫(huà)、轉(zhuǎn)場(chǎng)動(dòng)畫(huà)、翻頁(yè)動(dòng)畫(huà)等等，整理的越清晰，后期參考的意義就越大。另外就是要多去觀看安卓還有ios的動(dòng)效官方案例，學(xué)習(xí)巨人的動(dòng)效方法，對(duì)商業(yè)案例很有幫助。
3.22 自己主動(dòng)練習(xí)
萬(wàn)事只有自己主動(dòng)練習(xí)掌握了才有作用！平時(shí)可以多做一些概念性的嘗試，比如我要做一個(gè)藝術(shù)類(lèi)的網(wǎng)站，如何融入動(dòng)效呢？
圖上是我們一個(gè)粗糙的原型圖，那么你們認(rèn)為可以融入什么動(dòng)畫(huà)呢？
首先可以考慮在文字上做動(dòng)畫(huà)，比如右側(cè)的圖片上下滑動(dòng)切換的時(shí)候，左邊的文章模塊有一個(gè)淡入淡出的動(dòng)畫(huà)、又或者有一個(gè)向上浮動(dòng)消失切換的動(dòng)畫(huà)、又或者右側(cè)圖片上下滑動(dòng)的時(shí)候有一個(gè)淡入淡出的動(dòng)畫(huà)，怎么做，要靠自己多去思考和嘗試！還有更多的細(xì)節(jié)，可以仔細(xì)觀看，分析我的思路！
3.3 如何和開(kāi)發(fā)哥哥對(duì)接動(dòng)畫(huà)
工作中有四種常見(jiàn)的動(dòng)效交接方式，接下來(lái)會(huì)給大家了解到：
方式一：使用png序列
png序列是比較常見(jiàn)的一種動(dòng)效落地方案，兼容性高，但是png序列會(huì)占用較大的空間，一旦動(dòng)畫(huà)多起來(lái)，對(duì)產(chǎn)品整體流暢性有挑戰(zhàn)。優(yōu)點(diǎn)是可以把動(dòng)畫(huà)高度還原！
方式二：使用gif
gif是dribbble常見(jiàn)的動(dòng)畫(huà)文件格式，很多新手可能誤認(rèn)為動(dòng)圖就是gif格式的，但是安卓設(shè)備沒(méi)有提供原生 gif 的 api 支持，且同樣占用較大的空間，清晰度不太理想，在這里不是特別推薦這種方式！
方式三：使用Bodymovie插件導(dǎo)出json文件
可能很多小伙伴都了解過(guò)Bodymovie插件了，它配合的軟件是after effct，我們用這個(gè)插件可以吧動(dòng)畫(huà)導(dǎo)出json文件，直接和開(kāi)發(fā)對(duì)接，支持渲染svg/canvans/html。并且開(kāi)發(fā)可以控制動(dòng)畫(huà)的暫停與播放，這意味著B(niǎo)odymovie導(dǎo)出的json文件是非常便捷且可編輯的一種方式，在這里推薦大家作為首選，具體插件安裝可以自行百度下！
方式四：手動(dòng)標(biāo)注
目前還是有很多的產(chǎn)品需求，需要用到手動(dòng)標(biāo)注這個(gè)比較枯燥的工作，但是也是必不可少的，一般情況是以轉(zhuǎn)場(chǎng)動(dòng)畫(huà)、元素模塊進(jìn)場(chǎng)等用的比較多。我們一般要在文檔寫(xiě)出元素名稱(chēng)、元素貝塞爾曲值、變化的屬性（縮放、位移等等）我們下面進(jìn)行一個(gè)案例講解！
這個(gè)案例，我們需要給到開(kāi)發(fā)的文檔是什么呢？首先分析一下，運(yùn)動(dòng)元素是 汽車(chē)，變化屬性是縮放和位移，貝塞爾值是多少具體看你們ae調(diào)節(jié)的曲線(xiàn)了，運(yùn)動(dòng)了250ms。然后等汽車(chē)縮放位移之后，對(duì)應(yīng)文字從不透明度0變?yōu)?，那么怎么寫(xiě)這個(gè)文檔呢？
實(shí)際上會(huì)更復(fù)雜，這里就不一一舉例，大家可以參考我的方案來(lái)研究研究，來(lái)完善運(yùn)用到你們的商業(yè)項(xiàng)目當(dāng)中去，祝大家動(dòng)效做的越來(lái)越好！
4.1 堅(jiān)持不懈大步向前、UI自學(xué)提升的方法
自學(xué)其實(shí)是最快能提升的方法，它能鍛煉你的思維和解決事物的能力，下面推薦幾個(gè)方式：
方式一：制定晝夜學(xué)習(xí)目標(biāo)
方式二：自己給主題需求練習(xí)
方式三：改版上線(xiàn)的優(yōu)質(zhì)產(chǎn)品，鍛煉交互和視覺(jué)能力
其實(shí)我這三個(gè)方式是一個(gè)循環(huán)漸進(jìn)的方式，大家可以自由配合安排，下面一一講解：
方式一：制定晝夜學(xué)習(xí)計(jì)劃
我們常說(shuō)：“站在岸上學(xué)不會(huì)游泳”，設(shè)計(jì)修行之路也正是這樣，不動(dòng)手永遠(yuǎn)不知道自己的水平糾結(jié)到了什么地步，差距在哪里，所以這一步就要講講如何制定可行性提升計(jì)劃。
很多朋友問(wèn)我，關(guān)于一些四晝夜計(jì)劃的內(nèi)容，我就在這里說(shuō)一下吧。
首先，四晝夜計(jì)劃僅僅是我起的一個(gè)計(jì)劃命名，一個(gè)晝夜分為28天，一個(gè)晝夜會(huì)有一個(gè)核心學(xué)習(xí)領(lǐng)域和目標(biāo)。四個(gè)晝夜為一個(gè)季度。
比如，我當(dāng)初認(rèn)為自己的圖標(biāo)設(shè)計(jì)非常的欠缺，我就會(huì)提取出這個(gè)元素，作為一晝夜的核心學(xué)習(xí)主題，也就是這樣：
一晝夜計(jì)劃核心：圖標(biāo)綜合訓(xùn)練
訓(xùn)練包含：線(xiàn)性ICON繪制（200個(gè)）、填充形ICON繪制（200個(gè)）、主題型ICON繪制（100個(gè)）、扁平微擬物ICON繪制（100個(gè)）
有了這四項(xiàng)綜合訓(xùn)練之后，我們就可以清晰知道自己的一晝夜28天要達(dá)成什么目標(biāo)，四項(xiàng)直接劃分為7天一周期，也就是第一周提升任務(wù)為：線(xiàn)性ICON繪制...以此類(lèi)推，直到一晝夜達(dá)成，過(guò)程辛苦，大家都懂得，過(guò)后你會(huì)感謝曾經(jīng)努力的那個(gè)自己。
我一般達(dá)成一期晝夜計(jì)劃會(huì)小小的獎(jiǎng)勵(lì)一下自己，比如給自己買(mǎi)件新衣服，買(mǎi)一款喜歡很久的手表，何嘗不可。當(dāng)你完成四晝夜之后，何嘗不可以獎(jiǎng)勵(lì)自己休息幾天去旅旅游呢？所以，我認(rèn)為，只要努力夠了，你想怎么放松都是值得的，你會(huì)為自己感到自豪，加油吧！
看到這里，計(jì)劃部分就算完結(jié)了，但是你的計(jì)劃必須切合實(shí)際，看看目前哪一項(xiàng)技能最弱，最需要提升，好了，快動(dòng)起手來(lái)吧
方式二：自己給主題練習(xí)
我早前也非常喜歡在dribbble發(fā)作品，那么很多朋友問(wèn)，你哪來(lái)那么多需求？其實(shí)很多是自己給自己的需求，比如我之前給自己定 說(shuō)要做一個(gè)旅游分享照片的app產(chǎn)品，那么我就會(huì)先用紙筆繪制交互草圖，然后制定主色調(diào)，然后輸出視覺(jué)，達(dá)到一個(gè)鍛煉思維和視覺(jué)的一次練習(xí)。
大家可以根據(jù)自己的練習(xí)目標(biāo)，自由發(fā)揮，比如畫(huà)30張插畫(huà)，每一張主題是什么？比如做30個(gè)UI動(dòng)效，那么每個(gè)主題是什么？等等，堅(jiān)持即可，時(shí)間會(huì)給你答案。
方式三：改版上線(xiàn)的優(yōu)質(zhì)產(chǎn)品
這一步，我建議是有了大量的練習(xí)經(jīng)驗(yàn)和工作經(jīng)驗(yàn)再去進(jìn)行，因?yàn)檫@時(shí)候你對(duì)交互和視覺(jué)的判斷會(huì)更準(zhǔn)確。一般改版的過(guò)程是先反復(fù)使用同類(lèi)產(chǎn)品，找出產(chǎn)品的不足，吧交互方案羅列出來(lái)優(yōu)化，之后對(duì)視覺(jué)不足也做一個(gè)判斷，從交互層到視覺(jué)層做一個(gè)分析。
這一步可以參考上述的幾個(gè)步驟，拆分找出競(jìng)品的交互問(wèn)題，視覺(jué)問(wèn)題，圖標(biāo)可視化的問(wèn)題在一一去優(yōu)化，改版是一個(gè)很龐大的過(guò)程，建議多費(fèi)些時(shí)間和心思！
4.2 聊聊我遇到的坑和有趣的事
這些年遇到過(guò)很多的坑，吃了不少虧，其中不一定是設(shè)計(jì)上的吃虧，有些更是心態(tài)上，接下來(lái)想和你們一個(gè)小故事～
浮躁的社會(huì)
到了結(jié)尾，我想和你們聊聊心態(tài)的問(wèn)題，這是很多年輕人都會(huì)經(jīng)歷的一個(gè)時(shí)間節(jié)點(diǎn)，重點(diǎn)在于你怎么去看待它和跨過(guò)它。
社會(huì)的壓力和躺下?lián)Q來(lái)的安逸感是在給每一個(gè)人放松的理由，以及現(xiàn)在便捷的通訊系統(tǒng)在很短的時(shí)間讓我們獲取了大量的信息，會(huì)使人陷入浮躁的狀態(tài)。
一年前，我非常的浮躁，浮躁到什么程度呢？我會(huì)想著一個(gè)月學(xué)好c4d，一個(gè)月學(xué)好插畫(huà)視覺(jué)，總是想著一步登天，沒(méi)想到卻是越走越遠(yuǎn)！以前我也發(fā)布過(guò)很多的站酷作品，獲得編輯推薦但是后來(lái)我仔細(xì)想想，到底是為了什么再發(fā)這些東西，是內(nèi)心的虛榮心嗎？因?yàn)楸举|(zhì)上我覺(jué)得以前的東西確實(shí)經(jīng)不起時(shí)間的考驗(yàn)。
那我為何不能吧之前想著的一個(gè)月學(xué)好c4d發(fā)作品的思想，轉(zhuǎn)變?yōu)榛?年時(shí)間學(xué)呢？因?yàn)檫@個(gè)行業(yè)入行門(mén)檻低，沉淀成本太高，導(dǎo)致大家都想著速成，去獲得知名度和虛榮心。但當(dāng)我走了那么多彎路后會(huì)發(fā)現(xiàn)，你沉淀下來(lái)之后，做的東西會(huì)特別的成熟，而且經(jīng)得起考驗(yàn)，這可能才是我們應(yīng)該去做的點(diǎn)，不能因?yàn)楦≡甓胫呓輳?，時(shí)間終究會(huì)給我們答案。
所以，希望大家都能吧浮躁的心放下來(lái)，好好做事，認(rèn)真多一件事！
4.3 UI設(shè)計(jì)師未來(lái)規(guī)劃
全球智能化趨勢(shì)下，很多崗位或行業(yè)可能被顛覆，設(shè)計(jì)師需要時(shí)刻保持警醒，著眼于未來(lái)的設(shè)計(jì)之路。
如果你是有較強(qiáng)設(shè)計(jì)技法能力的視覺(jué)設(shè)計(jì)師，如插畫(huà)、品牌，那么建議你可以繼續(xù)深入做好這個(gè)方向成為專(zhuān)家；如果你是執(zhí)行層面的視覺(jué)界面或交互設(shè)計(jì)師，那么接下來(lái)幾年你的職業(yè)生涯發(fā)展很可能受限。很有可能幾年后部分界面或交互設(shè)計(jì)師崗位會(huì)被智能化機(jī)器或系統(tǒng)替代。
企業(yè)最需要的人才是能夠?yàn)闃I(yè)務(wù)提供解決方案的設(shè)計(jì)師，而不是只會(huì)執(zhí)行設(shè)計(jì)師。那些長(zhǎng)時(shí)間只停留在執(zhí)行層面的設(shè)計(jì)師發(fā)展前景堪憂(yōu)了。試想，如果設(shè)計(jì)師用戶(hù)研究交互視覺(jué)都能搞定，還需要視覺(jué)設(shè)計(jì)師么？
我接觸過(guò)的很多設(shè)計(jì)師都遇到這樣的發(fā)展瓶頸，他們會(huì)比較迷茫。我建議設(shè)計(jì)師首先進(jìn)行自我分析，確定自己的職業(yè)發(fā)展目標(biāo)，然后去有計(jì)劃的規(guī)劃自己的職業(yè)發(fā)展方向。如果你不想每天畫(huà)插畫(huà)、不想每天做品牌運(yùn)營(yíng)設(shè)計(jì)，如果你想做產(chǎn)品界面設(shè)計(jì)方向，建議你首先去多維度去深入了解業(yè)務(wù)，提高看問(wèn)題的視角，學(xué)會(huì)發(fā)現(xiàn)業(yè)務(wù)問(wèn)題，學(xué)習(xí)并運(yùn)用設(shè)計(jì)思維和方法去全鏈路提升產(chǎn)品用戶(hù)體驗(yàn)，幫助企業(yè)的業(yè)務(wù)去提供解決方案，嘗試用設(shè)計(jì)去驅(qū)動(dòng)產(chǎn)品創(chuàng)新。
用戶(hù)體驗(yàn)設(shè)計(jì)領(lǐng)域的設(shè)計(jì)師進(jìn)化史，在我看來(lái)是這樣：美化制作工－界面視覺(jué)交互設(shè)計(jì)師－高級(jí)界面視覺(jué)交互設(shè)計(jì)師－資深視覺(jué)交互界面設(shè)計(jì)師/專(zhuān)家－全棧設(shè)計(jì)師，前四個(gè)階段是專(zhuān)業(yè)層面的階段，全棧設(shè)計(jì)師是設(shè)計(jì)師發(fā)展的方向，這個(gè)方向的設(shè)計(jì)師需要具備跨專(zhuān)業(yè)跨學(xué)科的知識(shí)，僅僅本科或者研究生學(xué)習(xí)的那些知識(shí)或不足以支撐，需要積累知識(shí)、經(jīng)驗(yàn)后，用發(fā)現(xiàn)問(wèn)題的視角去抓住一切可能的機(jī)會(huì)，自我修煉才可以達(dá)成的。
