淺談動(dòng)效設(shè)計(jì)，幫你掌握視覺都需要的動(dòng)效知識(shí)

《淺談動(dòng)效設(shè)計(jì)，幫你掌握視覺都需要的動(dòng)效知識(shí)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、淺談動(dòng)效設(shè)計(jì)，幫你掌握視覺都需要的動(dòng)效知識(shí)　　精細(xì)而恰當(dāng)?shù)膭?dòng)畫效果可以傳達(dá)狀態(tài)，增強(qiáng)用戶對(duì)于直接操縱的感知，通過視覺化的方式向用戶呈現(xiàn)操作結(jié)果?！　　　∫?、什么是動(dòng)效及作用？　　動(dòng)效是物體空間關(guān)系與功能有意識(shí)的流動(dòng)之美，它讓用戶更了解交互?！　≡贗OS7官方guideline中，給動(dòng)效賦予了一個(gè)新的定義：精細(xì)而恰當(dāng)?shù)膭?dòng)畫效果可以傳達(dá)狀態(tài)，增強(qiáng)用戶對(duì)于直接操縱的感知，通過視覺化的方式向用戶呈現(xiàn)操作結(jié)果?！　槭裁船F(xiàn)在的產(chǎn)品越來越注重動(dòng)效了那？我們先從人對(duì)于產(chǎn)品元素的感知?！　№樞騺砜?？不難看出人們對(duì)動(dòng)態(tài)的信息感知是最強(qiáng)的?！　　?/p>

2、　那么動(dòng)效能給給產(chǎn)品設(shè)計(jì)帶來什么好處那？讓體驗(yàn)更連貫：幫助用戶理解界面之間的關(guān)系，縮短用戶和界面之間的鴻溝。消除屏幕傷的跳變。告訴用戶元素從哪來到哪去。消化引導(dǎo)流程，降低學(xué)習(xí)成本：在最恰當(dāng)?shù)臅r(shí)機(jī)給用戶有意義的引導(dǎo)。減輕認(rèn)知負(fù)擔(dān)，讓體驗(yàn)更愉快?？臻g擴(kuò)展：讓當(dāng)下用戶不需要的信息隱藏，適當(dāng)?shù)臅r(shí)機(jī)出現(xiàn)。賦予設(shè)計(jì)趣味和活力：讓錯(cuò)誤不那么沮喪，讓等待不那么無聊，讓你的產(chǎn)品看起來更具活力?！　《?、動(dòng)效是不是越多越酷炫越好那？　　在平時(shí)項(xiàng)目中，我們有些設(shè)計(jì)師經(jīng)常為了追求酷炫，生硬的在產(chǎn)品中展現(xiàn)。一個(gè)好的動(dòng)效應(yīng)該是自然，舒適，錦上添花絕對(duì)不是為

3、了僅僅去吸引眼球，生拉硬套。所以要把握好動(dòng)效的輕與重，先考慮用戶使用的場(chǎng)景、頻繁程度來確定動(dòng)效的注目程度，其次重視整體性的編排?！　∠旅嫖覀儊砜匆幌陆?jīng)常在APP里面使用動(dòng)效的場(chǎng)景：　　1.開機(jī)啟動(dòng)圖　　強(qiáng)化產(chǎn)品品牌，動(dòng)畫短小。僅為簡(jiǎn)單變形，旨在突出產(chǎn)品logo。因?yàn)殚_啟啟動(dòng)圖時(shí)間非常短，復(fù)雜的動(dòng)畫延遲了界面的過渡。　　　　2.poplayer動(dòng)畫　　強(qiáng)調(diào)驚喜，有創(chuàng)意的，有互動(dòng)性的動(dòng)（手淘的雙十一活動(dòng)）　　　　3.界面之間切換跳轉(zhuǎn)　　幫助用戶理解界面剛發(fā)生的變化，讓用戶知道自己在哪。例如頁面之間的轉(zhuǎn)場(chǎng)，彈出等?！　　　?.擴(kuò)展空

4、間場(chǎng)景　　強(qiáng)調(diào)關(guān)聯(lián)性的場(chǎng)景，展開，放大縮小，翻轉(zhuǎn)等。　　　　5.強(qiáng)調(diào)狀態(tài)　　抓住用戶注意力，也可以說是分散用戶注意力，例如加載時(shí)，出錯(cuò)時(shí)等?！　　　?.聚合入口　　　　7.突出元素，增加情趣（播放器播放暫停案件）　　　　三、我們?cè)陧?xiàng)目中是怎么推進(jìn)動(dòng)效落地的？　　我什么我們覺得超酷超美的UI動(dòng)效，似乎很少在真實(shí)的App上看到它們被實(shí)現(xiàn)。技術(shù)門檻降低了這些UI動(dòng)效的可行性也許是最大的一個(gè)原因；除此之外，設(shè)計(jì)師們?cè)谔岢鲞@些UI動(dòng)效時(shí)，往往都缺乏使用情境。切記為了漂亮而漂亮?！　〕Ｓ玫囊恍┬〖记桑毫_列全局動(dòng)效改進(jìn)點(diǎn)列表提出概念方案，向

5、團(tuán)隊(duì)推介不同情況下的原型復(fù)雜程度取舍，簡(jiǎn)單可以直接拿樣品和技術(shù)溝通，標(biāo)志性動(dòng)效細(xì)膩還原。有些動(dòng)效可能比較簡(jiǎn)單，如果我們能用線上的例子說明你所需的動(dòng)效效果，可以節(jié)省你做demo的時(shí)間，把重點(diǎn)放在重點(diǎn)細(xì)膩動(dòng)效上。視覺和交互的通力合作　　我們?cè)黾觿?dòng)效是為了更好的闡述產(chǎn)品邏輯，它與交互緊密相關(guān)，所以跟你團(tuán)隊(duì)一起推進(jìn)動(dòng)效的產(chǎn)出事半功倍?！　∥?、動(dòng)效的工具　　雖然身為設(shè)計(jì)師，可以定義非?？犰诺膭?dòng)效，但是由于技術(shù)成本限制可能被摒棄。所以作為設(shè)計(jì)師同樣需要理解技術(shù)實(shí)現(xiàn)的基本原理。下面為大家介紹以下工具：　　1.交互性動(dòng)效　　如果你做了案例，動(dòng)

6、效只是為了說明你的設(shè)計(jì)，闡述你的交互邏輯，那么下面四款都可以滿足的你的基本需求。Principle和Flinto都可以直接置入你的sketch設(shè)計(jì)稿，跟你的設(shè)計(jì)產(chǎn)生聯(lián)動(dòng)。頁面也很簡(jiǎn)單，完成轉(zhuǎn)場(chǎng)的交互極其便捷，另外還可以做一些基本時(shí)間軸動(dòng)畫，調(diào)節(jié)單個(gè)元素的曲線變量等。Hype3實(shí)現(xiàn)的效果可能不那么精致，但是可以直接導(dǎo)出對(duì)應(yīng)的代碼。　　Pixate除了一些基礎(chǔ)的控件供你使用，特殊的動(dòng)效可能需要一定的代碼才能完成，可能對(duì)于沒有語言基礎(chǔ)的設(shè)計(jì)而言效果過于簡(jiǎn)單。　　　　　　　　　　2.復(fù)合型動(dòng)效　　Origami是一款基于QuartzC

7、omposer的插件，它提供了很多自定義的控件。但界面相對(duì)設(shè)計(jì)師而言不夠友好?！　　　?.創(chuàng)意性動(dòng)效工具　　如果你要做一個(gè)很酷的開機(jī)動(dòng)畫，那么你可以選擇AE或者C4D。你可以專注在你的創(chuàng)意上而不被代碼表達(dá)式干擾?！　　　『芏嘈率謺?huì)問，哪個(gè)軟件是最好的？其實(shí)并沒有完全的類比，在恰當(dāng)?shù)男枨笙逻x擇恰當(dāng)?shù)能浖?，用最低的成本完成你的需求就好。你可能?huì)用AE去做一個(gè)復(fù)雜的開機(jī)動(dòng)效，用flinto展現(xiàn)了交互邏輯都是ok的?！　∽詈?，推薦一些值得參考的站：CapptivateUIanimationLitterBigDetail