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

人類(lèi)總是在繁榮中沉溺而自我滿足，無(wú)法意識(shí)到甚至抗拒可能會(huì)出現(xiàn)的問(wèn)題。職業(yè)也一樣，設(shè)計(jì)師這種個(gè)人風(fēng)格濃郁，個(gè)性支配力強(qiáng)的職業(yè)更是如此，我們沉迷、從眾、自嗨、盲目，自以為是，投身于潮流浪潮，卻不自知在裸泳。

前言

寫(xiě)這篇文章的起因是前段時(shí)間在Meidum上讀到的一篇駁斥dribbble發(fā)展現(xiàn)狀的文章。文章發(fā)表在16年，其中提到：“我不認(rèn)為dribbble解決了什么問(wèn)題，你期望在400*300px的矩形中解決多少現(xiàn)實(shí)中的問(wèn)題解決方案？dribbble一直沒(méi)有變化，但你可以有所變化，如果你更關(guān)心其他事情而不是新的UI趨勢(shì)”。當(dāng)然，他也提到，如果正在從事創(chuàng)意設(shè)計(jì)等領(lǐng)域的工作，他會(huì)很認(rèn)可dribbble能為他帶來(lái)的靈感庫(kù)的價(jià)值。

我來(lái)解釋下，作者Tobias van Schneider在這里是以一名（UI/UX）體驗(yàn)設(shè)計(jì)師的從業(yè)者身份發(fā)表的觀點(diǎn)，即dribbble流行的UI趨勢(shì)實(shí)則并不能解決用戶體驗(yàn)相關(guān)的一些問(wèn)題。我們回顧歷史以來(lái)比較重要的體驗(yàn)交互領(lǐng)域的重大革新，實(shí)際上都是跟隨硬件革新，由平臺(tái)級(jí)團(tuán)隊(duì)研究并普及開(kāi)來(lái)，而不是dribbble之類(lèi)的設(shè)計(jì)分享交流平臺(tái)。

作為體驗(yàn)向UI設(shè)計(jì)師，我們應(yīng)當(dāng)花費(fèi)更多精力在交互體驗(yàn)相關(guān)的技能構(gòu)建上，而不是對(duì)于流行趨勢(shì)的盲目跟隨崇拜。趨勢(shì)不能解決問(wèn)題，用心研究探索解決方案才能解決你產(chǎn)品面臨的問(wèn)題。甚至很多人都不明白自己產(chǎn)品所面臨的問(wèn)題，更別提解決。確保自己有主見(jiàn)，能獨(dú)立思考，然后再去看待目前的趨勢(shì)及自身的職業(yè)生涯與當(dāng)下的行業(yè)現(xiàn)狀。

這個(gè)思考同時(shí)讓我想起了近年來(lái)流行起來(lái)的產(chǎn)品設(shè)計(jì)師、全鏈路設(shè)計(jì)師的觀念，在阿里BBC UED總監(jiān)汪方進(jìn)口中的UED轉(zhuǎn)UXD，目的是解決阿里及各個(gè)公司內(nèi)部存在的職能分工問(wèn)題，實(shí)現(xiàn)設(shè)計(jì)師從產(chǎn)品修飾者到產(chǎn)品區(qū)分者乃至產(chǎn)品驅(qū)動(dòng)者的轉(zhuǎn)變，放大設(shè)計(jì)師的價(jià)值，且使設(shè)計(jì)工作成果可驗(yàn)證。

其愿景是好的，在阿里內(nèi)部實(shí)施的成果應(yīng)該也不錯(cuò)，但無(wú)數(shù)人趨之若鶩，跟隨這股潮流卻是錯(cuò)的，更多的人只看到了它的好。就像股票，聽(tīng)說(shuō)能賺錢(qián)，就瘋狂投入。殊不知，阿里UXD是從P7開(kāi)始培養(yǎng)的。于是一批本該集中精力鍛煉與沉淀自己核心競(jìng)爭(zhēng)力的設(shè)計(jì)師，拖慢了自己的成長(zhǎng)步伐，無(wú)形中反而削弱了個(gè)人競(jìng)爭(zhēng)力。另一方面，這一觀點(diǎn)的提出又給各大培訓(xùn)機(jī)構(gòu)切入點(diǎn)，又是一波割韭菜。

問(wèn)題在哪里？問(wèn)題在于，你不是在BAT工作，你的產(chǎn)品主導(dǎo)者仍然是老板是產(chǎn)品經(jīng)理，你認(rèn)為你的戰(zhàn)略思想拼得過(guò)老板？交互能力拼得過(guò)交互設(shè)計(jì)師？

不存在的，職能并沒(méi)有下放，你還是僅僅在做UI設(shè)計(jì)，你沒(méi)有能力主導(dǎo)產(chǎn)品線，驅(qū)動(dòng)產(chǎn)品也難。因此，趨勢(shì)的產(chǎn)生有其自生長(zhǎng)的土壤，并不適合移植到所有地方，這一點(diǎn)所有人都應(yīng)該謹(jǐn)記，在跟隨潮流趨勢(shì)時(shí)，反省一下這樣做對(duì)我日常工作真的會(huì)起到幫助嗎？

它使我開(kāi)始辯證的看待我們當(dāng)下的各種流行趨勢(shì)，及這些新潮和看似繁榮的設(shè)計(jì)發(fā)展背后所呈現(xiàn)的一些較隱晦的問(wèn)題。人類(lèi)總是在繁榮中沉溺而自我滿足，無(wú)法意識(shí)到甚至抗拒可能會(huì)出現(xiàn)的問(wèn)題。

職業(yè)也一樣，設(shè)計(jì)師這種個(gè)人風(fēng)格濃郁，個(gè)性支配力強(qiáng)的職業(yè)更是如此，我們沉迷、從眾、自嗨、盲目，自以為是，投身于潮流浪潮，卻不自知在裸泳。

這次我要講的是關(guān)于流行動(dòng)效的問(wèn)題，對(duì)就是我們每天在dribbble瀏覽的精致動(dòng)效。這會(huì)是一篇純干貨，包括：

• 對(duì)當(dāng)前動(dòng)效趨勢(shì)的思考，存在什么問(wèn)題？
• 我們應(yīng)當(dāng)如何正確認(rèn)識(shí)當(dāng)下的流行動(dòng)效？
• 如何做出更實(shí)用優(yōu)質(zhì)的動(dòng)效？

一、關(guān)于當(dāng)下流行動(dòng)效的問(wèn)題

你是否會(huì)經(jīng)常驚嘆那些復(fù)雜炫酷的UI動(dòng)效，優(yōu)雅的轉(zhuǎn)場(chǎng)，精致的交互細(xì)節(jié)，動(dòng)感的節(jié)奏。很正常，我也會(huì)，以前我甚至?xí)@樣瀏覽一個(gè)小時(shí)，下載下來(lái)仔細(xì)研究臨摹，當(dāng)復(fù)原了這樣一個(gè)高復(fù)雜度的動(dòng)效，我也會(huì)有成就感。甚至到后面，當(dāng)我上傳自己產(chǎn)出的一些UI作品時(shí)，我會(huì)刻意使用一些dribbble上流行的動(dòng)效樣式，并自得其樂(lè)。

我相信很多人和我一樣，但我們做出來(lái)美觀的，酷炫的動(dòng)效設(shè)計(jì)，它們真的是好設(shè)計(jì)嗎？還是單純的設(shè)計(jì)師自嗨型設(shè)計(jì)。

我們來(lái)看下面這兩個(gè)案例，作為創(chuàng)意設(shè)計(jì)，或者說(shuō)單純看視覺(jué)效果，這兩個(gè)作品無(wú)疑極為優(yōu)秀。但他們其實(shí)應(yīng)當(dāng)歸屬于UI/UX體驗(yàn)設(shè)計(jì)，從這個(gè)角度來(lái)看，問(wèn)題就有點(diǎn)多了。

下面我將指出目前以dribbble平臺(tái)為主的作品分享中曝露出的較典型問(wèn)題：

1. 太過(guò)強(qiáng)調(diào)展示，而忽略了核心內(nèi)容

以UI為主的作品其重點(diǎn)展示點(diǎn)在于用戶界面的視覺(jué)、交互等細(xì)節(jié)，但當(dāng)下流行出一種通過(guò)過(guò)度豐富乃至復(fù)雜的背景、裝飾元素，來(lái)提高整個(gè)作品圖的設(shè)計(jì)感，參考上面第一個(gè)作品。因此，在本質(zhì)上將一個(gè)體驗(yàn)類(lèi)產(chǎn)品設(shè)計(jì)呈現(xiàn)成了平面創(chuàng)意類(lèi)設(shè)計(jì)。

所以，設(shè)計(jì)師想要傳達(dá)什么呢？平面還是UI？瀏覽者從中學(xué)習(xí)了什么？對(duì)行業(yè)有什么影響有什么推動(dòng)作用？

作為UI/UX的我們總是在強(qiáng)調(diào)體驗(yàn)，但我們并沒(méi)有真正將其融入所有的設(shè)計(jì)產(chǎn)出，在做出這樣一個(gè)重視覺(jué)呈現(xiàn)而忽略了體驗(yàn)設(shè)計(jì)的本質(zhì)的作品時(shí)，設(shè)計(jì)師對(duì)自我的職能是一個(gè)自我否定的狀態(tài)，只有同為設(shè)計(jì)師的我們沉迷其中，自嗨而不自知。這個(gè)設(shè)計(jì)是服務(wù)誰(shuí)的？解決了一個(gè)什么關(guān)鍵問(wèn)題？這才是我們應(yīng)當(dāng)思考，且呈現(xiàn)出來(lái)有利于同行進(jìn)步的關(guān)鍵點(diǎn)。

2. 為了展示而展示，違背基礎(chǔ)原則

我們遇到的很多酷炫的動(dòng)效，為什么酷炫，為什么有那么多細(xì)節(jié)可以被感知到？

因?yàn)樵O(shè)計(jì)者想要被你看到。而事實(shí)上，動(dòng)效應(yīng)當(dāng)不被清晰感知到，它只應(yīng)該起到過(guò)渡作用，而不應(yīng)該干擾用戶的注意力。然而在dribbble上百分之80的作品都在刻意減緩轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的速度，延長(zhǎng)動(dòng)效的整體時(shí)長(zhǎng)，以展示更多的設(shè)計(jì)細(xì)節(jié)。

那么設(shè)計(jì)師需要自己?jiǎn)栕约?，這些細(xì)節(jié)的展示，是否有必要，是否有意義？

答案顯而易見(jiàn)，如果你熟讀谷歌動(dòng)效規(guī)范，你會(huì)記得開(kāi)篇第一句話是，動(dòng)效使UI富有表現(xiàn)力且易于使用，表現(xiàn)力是錦上添花，而易于使用，體驗(yàn)度才是核心。

3. 發(fā)表作品的錯(cuò)誤出發(fā)點(diǎn)

最后一點(diǎn)，但是最典型的一點(diǎn)，那就是設(shè)計(jì)師盲目沉迷于圈子內(nèi)的消極心態(tài)，這一點(diǎn)真的相當(dāng)?shù)湫颓矣泻τ谛袠I(yè)和個(gè)人的發(fā)展。

我們口口聲聲都在講用戶，用戶體驗(yàn)，以用戶為中心。然而事實(shí)上呢？我們上傳的作品，是為了呈現(xiàn)給誰(shuí)？

沒(méi)錯(cuò)，是為了給同行看的。然而產(chǎn)品的使用者是誰(shuí)？是用戶而不是設(shè)計(jì)師，設(shè)計(jì)師自嗨、從眾、盲目信奉趨勢(shì)，群體無(wú)意識(shí)的沉溺于這個(gè)狀態(tài)，這真的是很恐怖的現(xiàn)狀。我們發(fā)表的UX/UI類(lèi)作品是為了取悅設(shè)計(jì)師群體，而不是為用戶解決問(wèn)題，這就是起點(diǎn)的錯(cuò)誤，是原罪。

而如果一個(gè)設(shè)計(jì)師在作品中呈現(xiàn)他用一種獨(dú)特的交互方式解決了一個(gè)什么問(wèn)題，那社區(qū)氛圍就是另一個(gè)樣子。我們不否認(rèn)通過(guò)更豐富的視覺(jué)效果來(lái)博眼球，但是一切都應(yīng)當(dāng)圍繞著設(shè)計(jì)性質(zhì)的核心來(lái)進(jìn)行，而不是將一個(gè)體驗(yàn)設(shè)計(jì)豐富成一個(gè)平面設(shè)計(jì)。

問(wèn)題大概就說(shuō)這么多，我們應(yīng)該意識(shí)到一些問(wèn)題，對(duì)自己對(duì)行業(yè)有清晰的認(rèn)知是未來(lái)能夠變得更好的前提，但我們也應(yīng)該理智的應(yīng)對(duì)現(xiàn)狀，即很多事情已經(jīng)無(wú)法改變的現(xiàn)狀。

設(shè)計(jì)師已經(jīng)習(xí)慣了發(fā)表更加博眼球的作品來(lái)吸引關(guān)注，或者是為了創(chuàng)造更多私單和升職機(jī)會(huì)，這無(wú)可厚非。視覺(jué)上創(chuàng)造與升華明顯易于一套優(yōu)秀的用戶體驗(yàn)的構(gòu)建，然而構(gòu)建體驗(yàn)解決問(wèn)題卻是我們職業(yè)生涯中更關(guān)鍵部分，也是職能價(jià)值得以體現(xiàn)的部分。

因此，我的看法是，我們應(yīng)當(dāng)認(rèn)清現(xiàn)狀，盡量去選擇正確的方向去提升成長(zhǎng)，不要盲目被潮流趨勢(shì)帶偏。

二、正確認(rèn)識(shí)當(dāng)下的動(dòng)效設(shè)計(jì)

UI動(dòng)畫(huà)通常被認(rèn)為能提升用戶體驗(yàn)愉悅度，但事實(shí)上并沒(méi)有增加太大價(jià)值，設(shè)計(jì)師應(yīng)當(dāng)避免代入職能偏好而導(dǎo)致做出錯(cuò)誤的判斷。

設(shè)計(jì)師習(xí)慣于自動(dòng)代入設(shè)計(jì)這一個(gè)崗位的特殊性，對(duì)動(dòng)效有更敏感的感知，因過(guò)分關(guān)注從而易于產(chǎn)生動(dòng)效有利于用戶體驗(yàn)這樣的錯(cuò)覺(jué)，但事實(shí)上用戶處于非實(shí)時(shí)交互時(shí)核心訴求在于迅速完成界面的切換與過(guò)度，而不是欣賞你的動(dòng)效細(xì)節(jié)。而當(dāng)用戶處于實(shí)時(shí)交互時(shí)，用戶關(guān)注的也不是你的反饋的美觀度，而是反饋的速度，這都是從用戶使用產(chǎn)品的本質(zhì)訴求為出發(fā)點(diǎn)的判斷。

1. 動(dòng)效的不同階段

動(dòng)效大致可以按照實(shí)時(shí)交互和非實(shí)時(shí)交互劃分不同階段。

• 實(shí)時(shí)交互階段：即正在執(zhí)行的交互操作與動(dòng)效同時(shí)進(jìn)行，如按下按鈕時(shí)的狀態(tài)變化，此類(lèi)動(dòng)效是與操作同時(shí)完成的。
• 非實(shí)時(shí)交互階段：則是用戶完成操作后緊跟著的轉(zhuǎn)場(chǎng)或狀態(tài)變化，如點(diǎn)擊新的tab后的跳轉(zhuǎn)轉(zhuǎn)場(chǎng)，是由右側(cè)進(jìn)入或者底部劃出。再例如一些加載效果，都是非實(shí)時(shí)進(jìn)行的，它們與操作并不同時(shí)完成。

2. 動(dòng)效的目的及意義

動(dòng)效設(shè)計(jì)的目的和意義是什么？大致可以概括為以下幾個(gè)方面：

（1）反應(yīng)元素界面的層級(jí)關(guān)系

通過(guò)動(dòng)效，用戶更易于理解界面的轉(zhuǎn)場(chǎng)，能更輕松的定位到當(dāng)前正在進(jìn)行的工作，此類(lèi)動(dòng)效給用戶傳達(dá)出任務(wù)層級(jí)，及界面中各相關(guān)元素的關(guān)系，減少困擾從而提升體驗(yàn)。

下面看一組案例：

（2）提供交互反饋和狀態(tài)

動(dòng)效能夠提供及時(shí)的反饋和交互狀態(tài)。當(dāng)用戶完成具體的操作行為時(shí)，產(chǎn)品應(yīng)當(dāng)且必須給予用戶反饋，以告知該操作是否生效，若無(wú)任何反饋則會(huì)導(dǎo)致用戶對(duì)自己和產(chǎn)品產(chǎn)生懷疑，甚至挫敗感。沒(méi)有反饋用戶也無(wú)法清楚產(chǎn)品是否還在工作。除此之外，動(dòng)效也是表達(dá)狀態(tài)的主要語(yǔ)言，如加載狀態(tài)、選中狀態(tài)等等。

（3）引導(dǎo)用戶

動(dòng)效是進(jìn)行用戶教育的有力工具，大家最熟悉的莫過(guò)于蘋(píng)果解鎖屏幕的滑動(dòng)手勢(shì)引導(dǎo)。我們也會(huì)在一些需要新用戶引導(dǎo)的場(chǎng)景下，見(jiàn)到各種手勢(shì)引導(dǎo)操作引導(dǎo)。使用動(dòng)畫(huà)進(jìn)行引導(dǎo)的形式具有高效真實(shí)，易于交互的特性，用戶可以瞬間心領(lǐng)神會(huì)，大大降低學(xué)習(xí)成本。

如下圖兩個(gè)MD官方案例，手勢(shì)解鎖引導(dǎo)(左圖)及加入購(gòu)物車(chē)的便捷操作引導(dǎo)（右圖）：

（4）個(gè)性化與情感化因素

個(gè)性化與情感化動(dòng)效設(shè)計(jì)并不適用于所有場(chǎng)景，因?yàn)槠鋭?dòng)效復(fù)雜度和豐富度實(shí)際上與動(dòng)效追求簡(jiǎn)潔的基本原則相違背，但在某些特殊場(chǎng)景，卻往往能發(fā)揮奇效。例如：加載頁(yè)面來(lái)緩解用戶疲勞感與等待焦慮（右圖），強(qiáng)化品牌logo相關(guān)內(nèi)容來(lái)達(dá)到占領(lǐng)用戶心智的目的（左圖）。由此也可以看出，規(guī)則是嚴(yán)謹(jǐn)?shù)牡皇峭昝?，理論存在盲區(qū)，可以適當(dāng)打破。

當(dāng)然，在做與情感化相關(guān)的動(dòng)效設(shè)計(jì)時(shí)（UI體驗(yàn)設(shè)計(jì)領(lǐng)域而不是品牌設(shè)計(jì)領(lǐng)域），設(shè)計(jì)師最先要考慮的還是設(shè)計(jì)的目的、出發(fā)點(diǎn)，即我為什么要做這個(gè)設(shè)計(jì)，從體驗(yàn)角度還是從戰(zhàn)略角度？為了提升等待期間的體驗(yàn)或者為了深化品牌影響力占領(lǐng)用戶心智，又或者單純?yōu)榱丝犰牛?/p>

3. 動(dòng)效應(yīng)該遵循的通用原則

（1）動(dòng)效應(yīng)當(dāng)具有闡釋性

動(dòng)效應(yīng)當(dāng)具有解釋交互的能力，如元素的空間層次關(guān)系，傳達(dá)操作的可用性和預(yù)期結(jié)果。

（2）動(dòng)效應(yīng)當(dāng)聚焦重點(diǎn)

動(dòng)效在產(chǎn)品界面中位于層級(jí)的最高點(diǎn)，因?yàn)橐苿?dòng)的事物天然更加聚焦注意力，我們應(yīng)當(dāng)正確的理解這一點(diǎn)及利用這一點(diǎn)，而不能濫用。動(dòng)效只應(yīng)當(dāng)發(fā)生在用戶發(fā)生交互，或用戶視線聚焦的地點(diǎn)。即動(dòng)效的展示應(yīng)當(dāng)與用戶注意力關(guān)聯(lián)，不應(yīng)當(dāng)產(chǎn)生干擾用戶完成任務(wù)的情況，更不應(yīng)該出現(xiàn)無(wú)意義的轉(zhuǎn)移注意力性質(zhì)的設(shè)計(jì)，關(guān)乎體驗(yàn)。

但如果是商業(yè)化驅(qū)動(dòng)的產(chǎn)品，這一規(guī)則可以無(wú)視，此類(lèi)產(chǎn)品通常犧牲體驗(yàn)換取商業(yè)上的成功。

（3）動(dòng)效簡(jiǎn)潔程度與產(chǎn)品易用性成正相關(guān)

真正優(yōu)秀的動(dòng)效是不易被感知的，因其自然而簡(jiǎn)單。我們可以在一些重量級(jí)產(chǎn)品上驗(yàn)證這一點(diǎn)，微信、QQ、支付寶等等。簡(jiǎn)潔再簡(jiǎn)潔，最短的時(shí)間，最簡(jiǎn)單的過(guò)渡，快速響應(yīng)，直達(dá)用戶的目的地。近期QQ體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)發(fā)表的一篇設(shè)計(jì)總結(jié)中，對(duì)于動(dòng)效的把握我認(rèn)為可以作為一個(gè)典型案例，在本文后面會(huì)有展示。

（4）動(dòng)效應(yīng)該有細(xì)節(jié)從而使過(guò)度自然

我們追求簡(jiǎn)短簡(jiǎn)潔的動(dòng)效是為了追求響應(yīng)速度，提高用戶使用效率及避免干擾，但這并不意味著動(dòng)效應(yīng)當(dāng)簡(jiǎn)陋。恰當(dāng)?shù)氖褂镁弰?dòng)曲線，關(guān)注不同場(chǎng)景下的動(dòng)效過(guò)度時(shí)間、空間變化、及透明度和大小比例等細(xì)節(jié)元素。

從設(shè)計(jì)和開(kāi)發(fā)實(shí)現(xiàn)的角度，動(dòng)效應(yīng)當(dāng)是復(fù)雜的，因?yàn)橐C合各種變化，考慮各種細(xì)節(jié)。從用戶使用和感知的角度，動(dòng)效應(yīng)該是簡(jiǎn)單的，用戶不會(huì)發(fā)覺(jué)的動(dòng)效才是過(guò)渡自然的動(dòng)效。

（5）動(dòng)效的選取應(yīng)當(dāng)遵循一致性原則

同一個(gè)產(chǎn)品中相同性質(zhì)的操作或者說(shuō)交互應(yīng)當(dāng)呈現(xiàn)出一致的視覺(jué)體驗(yàn)，如跳轉(zhuǎn)下一層及為從右往左淡入頁(yè)面，返回上一級(jí)從左往右淡入界面。遵循一致性原則能使UI作品中的視覺(jué)呈現(xiàn)更統(tǒng)一，而那些太過(guò)花哨的動(dòng)效作品往往并不遵循這一原則。具有一致性的動(dòng)效設(shè)計(jì)也是商業(yè)產(chǎn)品（上線產(chǎn)品）的基礎(chǔ)要求。

由于不同平臺(tái)的差異，及一些產(chǎn)品追求個(gè)性化的需要，目前各平臺(tái)各產(chǎn)品的轉(zhuǎn)場(chǎng)動(dòng)效并沒(méi)有實(shí)現(xiàn)真正的一致性，但相信隨著時(shí)間的演進(jìn)，就像移動(dòng)端的交互手勢(shì)一樣，最終會(huì)完成真正的統(tǒng)一。保留那些高效易用的，舍棄那些復(fù)雜低效率的。

4. 設(shè)計(jì)師產(chǎn)出的動(dòng)效設(shè)計(jì)包括應(yīng)用型和展示型

根據(jù)當(dāng)下設(shè)計(jì)師的動(dòng)效產(chǎn)出，我將動(dòng)效設(shè)計(jì)分為應(yīng)用型和展示型。

（1）展示型動(dòng)效

我們平時(shí)在設(shè)計(jì)分享網(wǎng)站瀏覽的酷炫或精致乃至復(fù)雜的動(dòng)效都屬于展示型動(dòng)效，或者是將應(yīng)用型動(dòng)效延長(zhǎng)了幾倍展示時(shí)間，或者刻意放慢動(dòng)效速度以展示更多設(shè)計(jì)細(xì)節(jié)。該類(lèi)動(dòng)效設(shè)計(jì)的演示目標(biāo)人群是設(shè)計(jì)師，是的，你覺(jué)得這些動(dòng)效轉(zhuǎn)場(chǎng)細(xì)節(jié)能給其他行業(yè)普通用戶帶來(lái)什么審美意義？

其設(shè)計(jì)目的從好的方面講是演示設(shè)計(jì)細(xì)節(jié)，傳道受業(yè)或者展示個(gè)人設(shè)計(jì)能力以獲取一些工作或外包機(jī)會(huì)，經(jīng)營(yíng)個(gè)人設(shè)計(jì)品牌。從壞的角度講就是炫技，博眼球。也正因此，總是有人調(diào)侃敢不敢拿真正上線的作品出來(lái)看看。

當(dāng)然這種諷刺也過(guò)分偏激，總要有人仰望星空，只是要謹(jǐn)記設(shè)計(jì)目的出發(fā)點(diǎn)，如果是處于同行交流的目的來(lái)設(shè)計(jì)一些展示類(lèi)動(dòng)效，傳達(dá)一下設(shè)計(jì)技巧也是蠻不錯(cuò)的。唯一怕的是給新人錯(cuò)誤的引導(dǎo)，而失去體驗(yàn)設(shè)計(jì)的本真，一度沉溺于花哨。

（2）應(yīng)用型動(dòng)效

應(yīng)用動(dòng)效即應(yīng)用在真實(shí)商業(yè)產(chǎn)品中的動(dòng)效設(shè)計(jì)，其演示目標(biāo)人群是開(kāi)發(fā)人員和用戶。

首先動(dòng)效設(shè)計(jì)作為產(chǎn)品設(shè)計(jì)中的一部分，服務(wù)目標(biāo)肯定是用戶，以輔助用戶理解產(chǎn)品界面，理解交互流程為目的進(jìn)行動(dòng)效設(shè)計(jì)，才是真正為用戶著想。另外考慮到動(dòng)效的還原度，動(dòng)效設(shè)計(jì)需要專(zhuān)門(mén)提供一個(gè)開(kāi)發(fā)人員參考版本，涉及到預(yù)期效果演示、數(shù)值曲線演示等。

應(yīng)用型動(dòng)效是我們工作中的真實(shí)產(chǎn)出，和職能掛鉤，更應(yīng)該遵循動(dòng)效設(shè)計(jì)的簡(jiǎn)潔易用的核心原則，進(jìn)行相關(guān)設(shè)計(jì)時(shí)，應(yīng)當(dāng)查閱動(dòng)效規(guī)范、多多參考成熟上線產(chǎn)品，以不低于商業(yè)產(chǎn)品的標(biāo)準(zhǔn)為底線。

很多人抱怨一些產(chǎn)品設(shè)計(jì)風(fēng)格陳舊，不時(shí)尚不跟隨潮流，那都是為了滿足大體量用戶的審美偏好及體驗(yàn)偏好，如果一直代入設(shè)計(jì)師的審美偏好及對(duì)流行趨勢(shì)的推崇，那產(chǎn)品將很難取得成功。動(dòng)效設(shè)計(jì)也一樣，摒棄個(gè)人偏好，考慮真實(shí)用戶。

應(yīng)用型動(dòng)效應(yīng)該是不易被感知到的，當(dāng)我們?yōu)g覽到一些UI動(dòng)效，能清晰的分辨出其過(guò)度的細(xì)節(jié)，變化的手段，那它是無(wú)法被應(yīng)用于真實(shí)的線上產(chǎn)品中的。

• 動(dòng)效過(guò)度時(shí)間有要求（查看谷歌文檔）；
• 較長(zhǎng)的動(dòng)畫(huà)過(guò)度產(chǎn)生加載緩慢假象；
• 能被感知的動(dòng)效說(shuō)明對(duì)用戶視覺(jué)構(gòu)成了干擾。

5. 真實(shí)產(chǎn)品中UI動(dòng)效是什么樣的？遵循哪些規(guī)則？

以qq近期的一次改版為例子：避免復(fù)雜 ；避免亢長(zhǎng)；對(duì)應(yīng)上下文的簡(jiǎn)單映射（如右入左出）

三、打造優(yōu)秀動(dòng)效必不可少的細(xì)節(jié)

1. 時(shí)間與速度的設(shè)定

（1）動(dòng)效轉(zhuǎn)換速度的設(shè)定應(yīng)該恰當(dāng)合理

動(dòng)效應(yīng)該能幫助用戶跟蹤UI的更改，即使用戶易于理解從哪里來(lái)到哪里去或者執(zhí)行了什么操作。過(guò)快會(huì)導(dǎo)致用戶無(wú)法理解其操作導(dǎo)致的結(jié)果，過(guò)慢則顯得伉余及加載緩慢等問(wèn)題。

因此轉(zhuǎn)化的速度應(yīng)該設(shè)定到在能夠輔助用戶理解其執(zhí)行的操作的最快速度，這能保證動(dòng)效產(chǎn)生高效的引導(dǎo)作用同時(shí)不會(huì)顯得多余伉長(zhǎng)。右側(cè)為正常速度，左側(cè)為過(guò)快與過(guò)慢的情況。

（2）動(dòng)效的持續(xù)時(shí)間根據(jù)動(dòng)效復(fù)雜度而變化

簡(jiǎn)單的動(dòng)畫(huà)當(dāng)然需要更短的時(shí)間就能完成，因?yàn)槠渥兓^少，可以快速完成。而復(fù)雜的動(dòng)畫(huà)強(qiáng)制使用較短的時(shí)間，則會(huì)產(chǎn)生卡頓和模糊的情況。一般涉及到簡(jiǎn)單控件元素的動(dòng)效都可以在100ms到200ms完成，特殊情況可以提高到500ms。

一般一個(gè)完整的過(guò)渡動(dòng)效可以在300ms內(nèi)完成，如果你使用principle來(lái)制作UI動(dòng)效你會(huì)發(fā)現(xiàn)它默認(rèn)的時(shí)間設(shè)定就是0.3s即300ms。而在一些過(guò)于花哨或?yàn)檎故炯?xì)節(jié)而設(shè)計(jì)的動(dòng)效中，你會(huì)發(fā)現(xiàn)轉(zhuǎn)場(chǎng)時(shí)間要遠(yuǎn)遠(yuǎn)長(zhǎng)于300ms，這實(shí)際上并不合理。

（3）退出操作的過(guò)渡動(dòng)畫(huà)可以在更短的時(shí)間來(lái)完成

關(guān)閉元素即傳出元素所用時(shí)間應(yīng)當(dāng)更少，其原因是它們比用戶的下一個(gè)任務(wù)要次要的多，因此并不需要轉(zhuǎn)移用戶過(guò)多注意力。

因此在我們?yōu)樽约耶a(chǎn)品設(shè)計(jì)動(dòng)效轉(zhuǎn)場(chǎng)時(shí)，針對(duì)關(guān)閉和返回性質(zhì)的轉(zhuǎn)場(chǎng)，可以使用更短的過(guò)度時(shí)間，如200ms、250ms等等。

（4）大面積元素的變化應(yīng)當(dāng)花費(fèi)更多的時(shí)間來(lái)完成

小面積元素的變化所花費(fèi)的時(shí)間應(yīng)該小于較大面積元素的變化，這一點(diǎn)與費(fèi)茨定律保持一致，大面積的元素要更加吸引用戶注意力，因此需要花費(fèi)更多的時(shí)間來(lái)完成過(guò)渡。

（5）合理利用easing曲線

說(shuō)曲線是動(dòng)效的靈魂都不為過(guò)，選擇恰當(dāng)?shù)那€可以使動(dòng)效過(guò)度更自然，有節(jié)奏從而產(chǎn)生美感。曲線主要分為緩入緩出和緩動(dòng)三類(lèi)，較常用的是緩動(dòng)曲線，即中間快兩頭慢，更符合現(xiàn)實(shí)中的物理原則。

2. 為過(guò)渡動(dòng)效“編舞”

首先我們應(yīng)該理解，動(dòng)效概括下來(lái)就是位移、透明度、比例的變化，萬(wàn)變不離其宗。而我們最主要研究的動(dòng)效是過(guò)渡動(dòng)效，它涵蓋了產(chǎn)品設(shè)計(jì)中最主要的動(dòng)效應(yīng)用場(chǎng)景，即我們?cè)趧?dòng)效的目的和意義那一部分中提到的第一點(diǎn)，反應(yīng)界面層級(jí)元素關(guān)系。我們希望過(guò)渡動(dòng)效能實(shí)現(xiàn)這樣的效果：使用戶高效的完成界面跳轉(zhuǎn)過(guò)渡，同時(shí)輕松地理解跳轉(zhuǎn)關(guān)系，期間沒(méi)有卡頓體驗(yàn)流暢。

而想要打造流暢的過(guò)渡動(dòng)效，需要我們?yōu)樾枰兓乃性剡M(jìn)行“編舞”，使其符合邏輯且不會(huì)出現(xiàn)視覺(jué)混亂。如下圖，是MD動(dòng)效的編舞規(guī)則，它將我們動(dòng)效過(guò)渡期間的不同元素分為三大類(lèi)：傳出元素、傳入元素、持續(xù)性元素。

傳入元素指即將進(jìn)入新的結(jié)果頁(yè)面的元素，傳出元素則是要消失為后面的元素騰出位置的元素，持續(xù)性元素則是始終存在的容器類(lèi)元素，如：bg。

整體過(guò)渡順序遵循此原則：首先傳出元素消失，然后傳入元素出現(xiàn)，在這期間持續(xù)性元素始終保持變化，且持續(xù)性元素的變化時(shí)長(zhǎng)是此過(guò)渡動(dòng)效的總時(shí)長(zhǎng)。

下圖中的橙色線框是傳入和傳出元素，紫色線框是持續(xù)性元素:

另外一個(gè)比較細(xì)節(jié)的設(shè)計(jì)點(diǎn)是峰值的連接點(diǎn)作用。持續(xù)性元素的曲線的峰值應(yīng)當(dāng)在整個(gè)動(dòng)效的30%節(jié)點(diǎn)處，即下圖中的紫色曲線的峰值，以此時(shí)間點(diǎn)（X軸）為分界，銜接傳入和傳出元素,完成整個(gè)過(guò)渡。

如果聽(tīng)不懂也沒(méi)關(guān)系，我們學(xué)會(huì)怎么使用就可以。我們需要確定整個(gè)過(guò)渡動(dòng)效的總時(shí)長(zhǎng)，然后乘以百分之30，以此為節(jié)點(diǎn)，銜接傳入元素和傳出元素。

例如：一個(gè)過(guò)渡動(dòng)效總時(shí)長(zhǎng)為300ms，300*30%是90ms，我們需要在0~90ms時(shí)讓傳出元素消失，在90~300ms時(shí)讓傳入動(dòng)效出現(xiàn)。

上面這個(gè)案例是針對(duì)較復(fù)雜的動(dòng)效，而對(duì)于一些簡(jiǎn)單動(dòng)效的轉(zhuǎn)場(chǎng)則無(wú)需太過(guò)復(fù)雜的編舞，各元素變化可以同步進(jìn)行。

如下圖：

3. 使用組或容器的形式完成過(guò)渡

在復(fù)雜的布局中，存在元素過(guò)多的情況，我們不可能讓每個(gè)元素都進(jìn)行自己的動(dòng)畫(huà)，那樣會(huì)使動(dòng)效伉長(zhǎng)復(fù)雜乃至混亂，應(yīng)當(dāng)避免過(guò)多元素爭(zhēng)搶用戶注意力的情況。因此我們需要將元素組合為單元組，以單元組的變化來(lái)呈現(xiàn)主要?jiǎng)有У囊曈X(jué)效果，針對(duì)更小的單位采用淡入淡出的處理手法，從而避免過(guò)多元素頻繁變化爭(zhēng)搶注意力的情況。

如下圖中，元素以組的形式進(jìn)行變化，使動(dòng)效過(guò)度自然的同時(shí)減少了單個(gè)元素的動(dòng)畫(huà)頻率，其中所有小元素如圖片，都采用了淡入淡出的處理手法。

再來(lái)看一下反面案例，為了追求所有元素的動(dòng)畫(huà)效果而導(dǎo)致整體臃腫復(fù)雜，適得其反：

除了成組的形式來(lái)解決這一問(wèn)題，我們還可以使用容器來(lái)承載較復(fù)雜的一系列元素。我們通過(guò)主動(dòng)定義一個(gè)明確的邊界，例如一張卡片，使內(nèi)部元素保持縱橫比例，縮放以適應(yīng)界面的大小，從而構(gòu)成縮放容器過(guò)度的效果，與iphone手機(jī)打開(kāi)APP的動(dòng)效體驗(yàn)一致。

參考內(nèi)容：

Material Design 設(shè)計(jì)規(guī)范

溝通本源 | QQ8.0有生機(jī)的設(shè)計(jì)

作者：南可，公眾號(hào)：Eason張UED（ID：EasonZhangUED）

本文由 @南可 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議