中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

優(yōu)秀的動(dòng)效設(shè)計(jì)更能讓用戶從中感到驚喜，讓用戶感受到產(chǎn)品的溫度和調(diào)性。

國(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à)值。

示例來(lái)自網(wǎng)絡(luò)

作為每天都得和產(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)知和情緒的帶入。

示例來(lái)自網(wǎng)絡(luò)

２、適度

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á)。

Material Motion

３、性能優(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í)間和成本。

示例來(lái)自網(wǎng)絡(luò)

５、意外的驚喜

巧妙的動(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)該在意的。

隨著設(shè)備性能和網(wǎng)絡(luò)帶寬的發(fā)展，用戶對(duì)視頻消費(fèi)越來(lái)越多，對(duì)設(shè)計(jì)師動(dòng)畫能力也要求越來(lái)越高，未來(lái)我們還會(huì)持續(xù)更新有關(guān)動(dòng)效的知識(shí)～

作者：圓早

來(lái)源：優(yōu)酷土豆用戶體驗(yàn)設(shè)計(jì)中心