網(wǎng)站制作

Website development

為什么你的動(dòng)效特別酷炫，但一直不能落地？

發(fā)布時(shí)間：2017-03-09 10:28:35

動(dòng)效酷炫一直沒(méi)有落地.jpg

今年很多設(shè)計(jì)師開(kāi)始玩動(dòng)效，不過(guò)想讓你的動(dòng)效設(shè)計(jì)落地，遠(yuǎn)不是會(huì)AE 就能解決的。本文總結(jié)了讓動(dòng)效落地的整體解決思路，附動(dòng)效軟件推薦，建議閱讀。

國(guó)際慣例，在開(kāi)始之前，還是先來(lái)聊一聊我們?cè)O(shè)計(jì)中心在人機(jī)交互中對(duì)于動(dòng)效的一些經(jīng)驗(yàn)和想法。

動(dòng)效，一直都存在于這個(gè)物理世界中。隨著技術(shù)的不斷進(jìn)步和設(shè)備性能的不斷提高，以及帶有動(dòng)效行為設(shè)計(jì)的不斷優(yōu)化，改變了我們?cè)谌藱C(jī)交互過(guò)程中原本復(fù)雜而無(wú)聊的交流過(guò)程，暫且不考慮它的作用，直觀的就是用戶已經(jīng)習(xí)慣了在電腦中體驗(yàn)絲般順滑的動(dòng)畫效果（流暢性）。

手機(jī)終端也是如此。在扁平化設(shè)計(jì)的時(shí)代中，一個(gè)落地的手機(jī)界面的動(dòng)態(tài)效果可以幫我們提升用戶體驗(yàn)，使產(chǎn)品顯得更加鮮活和統(tǒng)一的同時(shí)，也提升用戶感知度并且進(jìn)一步提升了產(chǎn)品的易用性。優(yōu)秀的動(dòng)效設(shè)計(jì)更能讓用戶從中感到驚喜，讓用戶感受到產(chǎn)品的溫度和調(diào)性。

△ 越來(lái)越多設(shè)計(jì)師設(shè)計(jì)動(dòng)效作品

優(yōu)秀的動(dòng)效是克制的產(chǎn)品表達(dá)

在UI領(lǐng)域中，優(yōu)秀的動(dòng)效是一種克制的產(chǎn)品表達(dá)。許多設(shè)計(jì)師在設(shè)計(jì)過(guò)程中都會(huì)遇到一個(gè)問(wèn)題，如何設(shè)計(jì)動(dòng)效才算是輸出了一個(gè)優(yōu)秀并且有價(jià)值的方案呢？

我們考慮的方向是，優(yōu)秀的動(dòng)效設(shè)計(jì)不僅僅賦予了產(chǎn)品本身的調(diào)性和趣味，其次還要充分體現(xiàn)產(chǎn)品的定位和特點(diǎn)。它的發(fā)生并非是讓用戶去在意動(dòng)效的本身，而是旨在讓用戶感知到它原本就是你產(chǎn)品的一部分，從而體現(xiàn)品牌的價(jià)值。

作為每天都得和產(chǎn)品打交道的設(shè)計(jì)師，我們不僅僅在讓產(chǎn)品和用戶建立聯(lián)系，更需要在這種聯(lián)系的場(chǎng)景中讓用戶保持著簡(jiǎn)單愉快的任務(wù)體驗(yàn)。作為身經(jīng)百戰(zhàn)的設(shè)計(jì)師，我們很清楚用戶在有明確需求的場(chǎng)景下并不會(huì)馬上去分辨一個(gè)產(chǎn)品的美與否，而是直接希望快速達(dá)成任務(wù)，就像是「好無(wú)聊，聽(tīng)首歌兒吧！」或「好餓，點(diǎn)個(gè)外賣吧！」然后就會(huì)直接打開(kāi)一個(gè)APP去完成任務(wù)了。這些行為都有著十分明確的目的，可以看出用戶思維就是簡(jiǎn)單的思維。所以不以真正的用戶體驗(yàn)（場(chǎng)景）為基礎(chǔ)來(lái)設(shè)計(jì)的產(chǎn)品，可能對(duì)于用戶來(lái)說(shuō)都是耍流氓。

所以一個(gè)優(yōu)秀的動(dòng)效起的作用應(yīng)該是基于用戶的交互行為（功能）作出恰當(dāng)?shù)姆答?，從而讓用戶更明確感知到發(fā)生了什么，并把用戶的注意力吸引到正確的位置，讓用戶在不經(jīng)意間快速養(yǎng)成對(duì)產(chǎn)品的使用習(xí)慣。當(dāng)設(shè)計(jì)師不斷思考并優(yōu)化各種體驗(yàn)的同時(shí)，產(chǎn)品的粘性也大大增強(qiáng)了。

那么，設(shè)計(jì)師在設(shè)計(jì)過(guò)程中如何輸出一個(gè)更落地的動(dòng)效呢？下面講述一些設(shè)計(jì)思路：

落地的UI動(dòng)效原則

一、有效

有效的動(dòng)效提升操作感受并提供良好的視覺(jué)效果，提升產(chǎn)品界面的靈動(dòng)性、和帶入感，增強(qiáng)用戶對(duì)產(chǎn)品的認(rèn)知和情緒的帶入。

二、適度

Ios10 和 Material motion 帶來(lái)很多優(yōu)秀的動(dòng)效，越來(lái)越多設(shè)計(jì)師熱衷于設(shè)計(jì)眾多的動(dòng)畫效果，很多動(dòng)效由于本身的復(fù)雜性和冗長(zhǎng)的時(shí)間產(chǎn)生的拖沓，使得用戶產(chǎn)生不適，并失去產(chǎn)品的焦點(diǎn)。所以設(shè)計(jì)師在設(shè)計(jì)動(dòng)效時(shí)，應(yīng)該更克制，做到短高效，輕快流暢的交互表達(dá)。

三、性能優(yōu)先

所有動(dòng)效都不應(yīng)犧牲產(chǎn)品本身的性能和響應(yīng)時(shí)間，不僅起不了效果更影響用戶體驗(yàn)，如果沒(méi)有找到更加簡(jiǎn)明輕快的解決方案，那么我們更建議不要輕易加入動(dòng)畫效果。

四、開(kāi)發(fā)效率

開(kāi)發(fā)是真正的動(dòng)效“設(shè)計(jì)師”。越復(fù)雜的動(dòng)效，開(kāi)發(fā)難度越大。沒(méi)有誰(shuí)能阻止設(shè)計(jì)師天馬行空，但是要推動(dòng)項(xiàng)目的進(jìn)行，一定要考慮開(kāi)發(fā)效率。對(duì)于終實(shí)現(xiàn)的效果和完成的時(shí)間，這兩者一定要做好權(quán)衡。我們建議設(shè)計(jì)師在開(kāi)始動(dòng)手設(shè)計(jì)之前，可以先和開(kāi)發(fā)蜀黍們?cè)u(píng)估一下開(kāi)發(fā)的時(shí)間和成本。

五、意外的驚喜

巧妙的動(dòng)效設(shè)計(jì)，不僅能夠提升產(chǎn)品體驗(yàn)，增加趣味性，甚至對(duì)完成產(chǎn)品目標(biāo)和業(yè)務(wù)目標(biāo)也有著事半功倍的效果。挖掘用戶的興趣點(diǎn)，提供超出用戶預(yù)期的愉悅體驗(yàn)，是設(shè)計(jì)動(dòng)效時(shí)需要思考的其中一個(gè)方向。比較有代表性的一個(gè)案例是Twitter的點(diǎn)贊效果。

△ Twitter的點(diǎn)贊效果

動(dòng)效輸出規(guī)范

終于，一個(gè)好的idea有了，萬(wàn)事俱備，只欠開(kāi)發(fā)了。我們正在努力建立一套高效的動(dòng)效輸出規(guī)范，讓動(dòng)效更有效地進(jìn)入開(kāi)發(fā)環(huán)節(jié)。

如何把設(shè)計(jì)師的想法更準(zhǔn)確的表達(dá)出來(lái)、并且工程師能準(zhǔn)確理解，終快速實(shí)現(xiàn)效果，這樣高效的流程才是我們想要的結(jié)果。

我們總結(jié)出一套專用的動(dòng)效組件庫(kù)以及動(dòng)效的輸出規(guī)范以供于內(nèi)部設(shè)計(jì)人員使用，也希望未來(lái)能有機(jī)會(huì)公開(kāi)這個(gè)庫(kù)供更多外部設(shè)計(jì)師使用。

△ KUDC動(dòng)效庫(kù)部分截圖

下面我將著重講述動(dòng)效的輸出規(guī)范。舉一個(gè)非常簡(jiǎn)單的例子：

△ Twitter

一、關(guān)鍵幀圖例

對(duì)于一些相對(duì)簡(jiǎn)單的交互效果，我們可以用關(guān)鍵幀圖例說(shuō)明，主要表現(xiàn)在動(dòng)效的三個(gè)狀態(tài)，分別為操作前、操作時(shí)、操作后。這樣開(kāi)發(fā)能清楚每個(gè)狀態(tài)下展現(xiàn)的效果及終效果。

△ 關(guān)鍵幀圖例

二、運(yùn)動(dòng)參數(shù)

運(yùn)動(dòng)參數(shù)主要包括動(dòng)態(tài)元素運(yùn)動(dòng)的時(shí)間，元素出現(xiàn)或者消失的先后順序的時(shí)間點(diǎn)。參數(shù)的準(zhǔn)確性決定了整個(gè)動(dòng)畫的還原度。

△ 每個(gè)元素的運(yùn)動(dòng)時(shí)間和透明度變化

三、緩動(dòng)曲線

元素運(yùn)動(dòng)的加速度曲線，專業(yè)稱為貝塞爾運(yùn)動(dòng)曲線（Bezier）。建議設(shè)計(jì)師們每實(shí)現(xiàn)一次效果，都能沉淀一些通用的曲線，方便開(kāi)發(fā)蜀黍下次直接套用。

△ 常用緩動(dòng)曲線

標(biāo)準(zhǔn)緩動(dòng)曲線查詢網(wǎng)址：http://easings.net/zh-cn

緩動(dòng)曲線中，需要注意的一點(diǎn)是，如何準(zhǔn)確去描述出你設(shè)置好的運(yùn)動(dòng)曲線參數(shù)。通常在交互工具和AE當(dāng)中，在調(diào)整曲線的時(shí)候會(huì)有四個(gè)值如下圖：

△ 貝塞爾參數(shù)值

和開(kāi)發(fā)溝通時(shí)，我們提供以上兩個(gè)軸的x、y參數(shù)值即可，稱貝塞爾參數(shù)值。

如圖，即cubic-bezier(0.25,0.1,0.25,0.1)

貝塞爾曲線預(yù)覽：

http://cubic-bezier.com/

四、高保真交互demo

借助強(qiáng)大的交互工具，制作帶交互的demo。

有了高保真參考，再也不用擔(dān)心說(shuō)不清楚了

五、png序列

適用于一些比較復(fù)雜的動(dòng)畫，例如加載動(dòng)畫，特殊的控件動(dòng)畫，啟動(dòng)動(dòng)畫。如果開(kāi)發(fā)寫起來(lái)特別麻煩的，可以先用ae實(shí)現(xiàn)好效果，然后導(dǎo)出png序列直接給開(kāi)發(fā)使用。具體過(guò)程和方法小編在這里不再贅述了，網(wǎng)上有許多相關(guān)教程可以參考。

常用的動(dòng)效交互工具推薦

以下推薦工具，網(wǎng)上教程也很豐富，具體操作這里不展開(kāi)來(lái)說(shuō)了。

一、Principle

是一款非常簡(jiǎn)單上手的交互原型工具，即使它已經(jīng)很久沒(méi)有大版本迭代。具體到透明度變化，XY軸旋轉(zhuǎn)，XY軸位移，運(yùn)動(dòng)曲線調(diào)整，都能輕易做到，并且動(dòng)畫的參數(shù)也非常具有參考意義。并且能和sketch直接配合，關(guān)聯(lián)到設(shè)計(jì)稿，實(shí)時(shí)改動(dòng)設(shè)計(jì)圖。

二、Flinto

比Principle稍微難一丟丟，但是多了很多能變化的參數(shù)，除了基礎(chǔ)效果之外，還加入Z軸的旋轉(zhuǎn)，以及單個(gè)元素behavior的獨(dú)立調(diào)整，都比較方便。Flinto也能和sketch直接配合，關(guān)聯(lián)到設(shè)計(jì)稿，實(shí)時(shí)改動(dòng)設(shè)計(jì)圖，非常方便。

三、Framer

更接近工程師思維的一款交互工具，交互效果也接近原生效果，但是會(huì)涉及一些基礎(chǔ)代碼，不過(guò)新版本已經(jīng)支持自動(dòng)生成代碼功能，有余力的設(shè)計(jì)師可以嘗試一下。

四、Hype3

雖然放在推薦模塊，但是他并沒(méi)有上面介紹的工具那么簡(jiǎn)單和方便，但是他的強(qiáng)大之處在于，做完了直接可以生成html文件，接入服務(wù)器就可以直接上線了，做h5的一大利器。

五、After Effects

無(wú)所不能的AE，就不多說(shuō)了，動(dòng)畫能力強(qiáng)，對(duì)于比較復(fù)雜的動(dòng)畫，可以用ae來(lái)完成，如果只是基本的交互動(dòng)畫，建議還是用上面所推薦的工具更快出效果。

PS:用工具就像買汽車一樣，每年都有新車型，每年都有改款和新配置，不可能年年換的。許多設(shè)計(jì)師一開(kāi)始都過(guò)度糾結(jié)于日新月異的工具，但其實(shí)在設(shè)計(jì)過(guò)程中，怎樣把自己的想法通過(guò)工具更準(zhǔn)確的表達(dá)出來(lái)才是我們應(yīng)該在意的。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,7167,0.html

上一篇：好的網(wǎng)站設(shè)計(jì)的技巧和想法

下一篇：SEO文案技巧，讓搜索引擎和讀者

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁(yè)面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠(chéng)之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問(wèn)題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問(wèn)題可以再里面提出，人員分工到位，解決問(wèn)題很及時(shí)。

張經(jīng)理