您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

超周全的 APP?動(dòng)效設(shè)計(jì)必備知識(shí)總結(jié)

現(xiàn)在雄厚精致的 App 動(dòng)效遍布移動(dòng)端良好應(yīng)用界面中,為用戶提供了優(yōu)秀的動(dòng)態(tài)沉浸式體驗(yàn),動(dòng)效設(shè)計(jì)在產(chǎn)品研發(fā)過(guò)程中也越來(lái)越被認(rèn)可和正視。

通過(guò)本文,你將輕松了解到關(guān)于動(dòng)效設(shè)計(jì)的一些必備知識(shí):

  • 究竟為什么要設(shè)計(jì)動(dòng)效?它的意義和價(jià)值是什么?
  • App 動(dòng)效情勢(shì)多種多樣,如何將它們區(qū)分和歸類?
  • 良好的動(dòng)效有哪些實(shí)用性的引導(dǎo)原則供我們參考?
  • 動(dòng)效軟件紛繁浩繁,如何遴選出最合適的那一款?(文末附有下載鏈接)

一、動(dòng)效設(shè)計(jì)的需要性

1. 提拔用戶體驗(yàn)

設(shè)計(jì)師若只尋求靜態(tài)像素的完善呈現(xiàn),而忽略動(dòng)態(tài)過(guò)程的合理表達(dá),會(huì)導(dǎo)致用戶不能在視覺(jué)上覺(jué)察元素的延續(xù)轉(zhuǎn)變,進(jìn)而很難對(duì)新舊狀況的更替有清晰的感知。

迪士尼動(dòng)畫大師乃特維克說(shuō)過(guò)一句話:動(dòng)畫的統(tǒng)統(tǒng)皆在于時(shí)間點(diǎn)和空間幅度。

通過(guò)「時(shí)間點(diǎn)」和「空間幅度」的設(shè)計(jì)為用戶建立運(yùn)動(dòng)的可信度,即視覺(jué)上的真實(shí)感,當(dāng)用戶意識(shí)到這個(gè)動(dòng)作是合理的,才能更加清晰愉悅地使用產(chǎn)品。

2. 增加產(chǎn)品氣質(zhì)

未添加動(dòng)效的產(chǎn)品,會(huì)帶給人一種死氣沉沉的感覺(jué),所有內(nèi)容平鋪直敘、毫無(wú)生機(jī),即使界面設(shè)計(jì)的很美觀,也會(huì)缺乏一種靈動(dòng)精致的氣質(zhì)。

假如把產(chǎn)品比作成美女,那么界面視覺(jué)就是美女的顏值,交互動(dòng)效就是美女的肢體語(yǔ)言。合理的動(dòng)效能將更立體、更富有關(guān)聯(lián)性的信息傳遞出去,進(jìn)步產(chǎn)品的「表達(dá)能力」,增長(zhǎng)親和力和趣味性,也利于品牌的建立。

3. 創(chuàng)造設(shè)計(jì)師上風(fēng)

  • 降低溝通成本:設(shè)計(jì)師通過(guò)制作高保真動(dòng)效 Demo 展示設(shè)計(jì)思路和創(chuàng)意,大大進(jìn)步設(shè)計(jì)提案交接率,降低了設(shè)計(jì)師與開發(fā)的溝通成本,進(jìn)步了動(dòng)效的還原度,表現(xiàn)專業(yè)性。
  • 打造核心競(jìng)爭(zhēng)力:在 UI 設(shè)計(jì)行業(yè)已經(jīng)趨于飽和,并且產(chǎn)品設(shè)計(jì)流程漸漸實(shí)現(xiàn)系統(tǒng)化和模塊化的今天,設(shè)計(jì)師假如只會(huì)行使組件重復(fù)性地「拼湊」網(wǎng)頁(yè)而無(wú)更多的價(jià)值產(chǎn)出,被替換的可能性將會(huì)增大。在日常工作之余,若要為公司和團(tuán)隊(duì)輸出更多的價(jià)值,動(dòng)效設(shè)計(jì)能力便是交互/視覺(jué)設(shè)計(jì)師的必備技能與核心競(jìng)爭(zhēng)力之一。

二、動(dòng)效設(shè)計(jì)的類型

界面動(dòng)效種類紛繁多樣,根據(jù) App 動(dòng)效的作用,可以大體分為如下6個(gè)類型:

1. 轉(zhuǎn)場(chǎng)過(guò)渡

人腦灰質(zhì)會(huì)對(duì)動(dòng)態(tài)事物(如:移動(dòng)、形變、色變等)保持敏感。在界面中加入一些平滑舒適的過(guò)渡結(jié)果,不僅能讓界面顯得生動(dòng),更能幫助用戶理解界面前后轉(zhuǎn)變的邏輯關(guān)系。

2. 層級(jí)展示

實(shí)際空間里,物體存在近大遠(yuǎn)小原則,運(yùn)動(dòng)則會(huì)近快遠(yuǎn)慢。當(dāng)界面中的元素存在不同層級(jí)時(shí),恰當(dāng)?shù)膭?dòng)效可以幫助用戶理清前后位置關(guān)系,以動(dòng)效來(lái)表現(xiàn)整個(gè)體系的空間感。

3. 空間擴(kuò)展

在移動(dòng)端界面設(shè)計(jì)中,因?yàn)橛邢薜钠聊豢臻g難以承載大量的信息內(nèi)容,可以通過(guò)折疊、翻轉(zhuǎn)、縮放等情勢(shì)拓展附加內(nèi)容的存儲(chǔ)空間,以漸進(jìn)展示的體例來(lái)減輕用戶的認(rèn)知負(fù)擔(dān)。

4. 聚焦關(guān)注

聚焦關(guān)注是通過(guò)元素的動(dòng)作轉(zhuǎn)變,提示用戶關(guān)注特點(diǎn)的內(nèi)容信息。這種提示體例不僅可以降低視覺(jué)元素的干擾,使界面更清爽簡(jiǎn)潔,還能在用戶使用過(guò)程中,輕盈天然地吸引用戶細(xì)致力。

5. 內(nèi)容呈現(xiàn)

界面內(nèi)容元素按照肯定的秩序規(guī)律逐級(jí)呈現(xiàn),指導(dǎo)用戶視覺(jué)焦點(diǎn)走向,幫助用戶更好地感知網(wǎng)頁(yè)布局、層級(jí)結(jié)構(gòu)和重點(diǎn)內(nèi)容,同時(shí)也能讓整個(gè)流程更加雄厚流暢,增加了界面的活力。

6. 操作反饋

無(wú)論是點(diǎn)擊、長(zhǎng)按、拖拽、滑動(dòng)等交互舉動(dòng),都應(yīng)該得到體系的即時(shí)反饋,將其以視覺(jué)或動(dòng)效的體例顯現(xiàn),幫助用戶了解當(dāng)前體系對(duì)交互過(guò)程的相應(yīng)情況,為用戶帶來(lái)安全感。

三、動(dòng)效設(shè)計(jì)的原則

這是一位在五年時(shí)間內(nèi)為四十多個(gè)國(guó)家和上百個(gè)頂尖機(jī)構(gòu)提供咨詢服務(wù)的動(dòng)效設(shè)計(jì)師,總結(jié)出來(lái)的實(shí)用性動(dòng)效設(shè)計(jì)原則,為提拔產(chǎn)品體驗(yàn)與可用性提供幫助。

1. 緩入緩出

時(shí)效事件發(fā)生時(shí),元素的動(dòng)作應(yīng)顯得天然,與用戶預(yù)期符合。

2. 偏移與耽誤

加入新的界面元素或場(chǎng)景時(shí),可用于表達(dá)元素之間的關(guān)系。

3. 父子關(guān)系

當(dāng)界面元素較多時(shí),可以行使時(shí)空差異創(chuàng)造出可以感知到的父子繼續(xù)關(guān)系。

4. 形變

用連貫的狀況描繪表達(dá)元素功能的改變。

5. 值變

當(dāng)元素的值發(fā)生轉(zhuǎn)變時(shí),用延續(xù)動(dòng)態(tài)的體例表達(dá)前后之間的關(guān)聯(lián)。

6. 遮罩

假如一個(gè)界面元素的不同的展示體例對(duì)應(yīng)不同的功能,那么讓展示體例的轉(zhuǎn)變過(guò)程具有延續(xù)性。

7. 覆蓋

用堆疊元素的相對(duì)位置來(lái)描述它們的扁平空間關(guān)系。

8. 復(fù)制

當(dāng)新的元素從已有元素復(fù)制出來(lái)時(shí),用連貫的體例描述其關(guān)聯(lián)關(guān)系。

9. 景深

許可用戶瞥得到非重要元素或場(chǎng)景。

10. 視差

當(dāng)用戶滾動(dòng)界面時(shí),在平面創(chuàng)造出空間條理。

11. 翻轉(zhuǎn)

通過(guò)具有空間架構(gòu)的描述體例來(lái)體現(xiàn)新元素的產(chǎn)生與離場(chǎng)。

12. 滑動(dòng)變焦

用延續(xù)的空間描述來(lái)指導(dǎo)界面元素和空間。

四、動(dòng)效軟件的選擇

動(dòng)效設(shè)計(jì)軟件紛繁浩繁,不同軟件的側(cè)重點(diǎn)也各不雷同,設(shè)計(jì)師可以根據(jù)項(xiàng)目的時(shí)間、邃密度、面向?qū)ο蟮葪l件來(lái)選擇合適的軟件。下面我列舉出市面上常見(jiàn)的動(dòng)效軟件以及各自的優(yōu)瑕玷,供選擇參考。

1. After Effects

AE 這款軟件著名度很高,學(xué)過(guò)設(shè)計(jì)的應(yīng)該都知道,它的好處就是壯大,可以實(shí)現(xiàn)超高精度的動(dòng)效,一樣平常 UI 動(dòng)效制作只用到了 AE 很小的一部分功能。瑕玷是門檻高,上手較困難,不能做實(shí)時(shí)交互動(dòng)效。

2. Hype

Hype 號(hào)稱無(wú)代碼動(dòng)效神器,像 AE 一樣使用時(shí)間軸來(lái)設(shè)置動(dòng)畫。動(dòng)畫結(jié)果在 PC、Mobile、Pad 端都可以直接預(yù)覽,也可以導(dǎo)出視頻或者 GIF。3.0版還有物理特征和彈性曲線,可以實(shí)現(xiàn)更壯大的動(dòng)畫結(jié)果。

3. Principle

Principle 功能壯大,界面和 Sketch 類似,被譽(yù)為 Sketch 的最佳拍檔。它重要是做少量網(wǎng)頁(yè)間的過(guò)渡轉(zhuǎn)場(chǎng)、單元素動(dòng)畫等細(xì)節(jié)動(dòng)效。好處很顯明,上手快、服從高、質(zhì)感好,瑕玷就是不易做整套交互流程。

4. Flinto

Flinto 界面跟 Sketch 也特別很是相似,能夠快速實(shí)現(xiàn)各種滾動(dòng)、轉(zhuǎn)場(chǎng)、點(diǎn)擊反饋等結(jié)果,適合模仿多個(gè)網(wǎng)頁(yè)、場(chǎng)景復(fù)雜的交互流程,學(xué)習(xí)成本低。瑕玷是復(fù)雜的動(dòng)效難以實(shí)現(xiàn),價(jià)格略貴且試用期短。

5. Framer

Framer 是一個(gè)基于 Javas cript 的原型工具,能快速導(dǎo)入 Photoshop、Sketch 中的圖像并模仿圖層分層,支持手勢(shì),動(dòng)畫邃密度高,可在手機(jī)或平板中預(yù)覽結(jié)果。瑕玷是必要有肯定的編程基礎(chǔ),上手難度較高。

6. ProtoPie

ProtoPie 是一款交互原型設(shè)計(jì)工具,支持 Mac 和 Windows 雙平臺(tái),更加輕量級(jí),集成的功能更吸引人,可以調(diào)用 iPhone 體系的陀螺儀、麥克風(fēng)、羅盤、3D Touch,多種智能傳感器等等,絕對(duì)是 Windows 用戶設(shè)計(jì)師的福利。

小結(jié)

  • 動(dòng)效設(shè)計(jì)可以提拔用戶體驗(yàn)、增加產(chǎn)品氣質(zhì),并為設(shè)計(jì)師創(chuàng)造上風(fēng)。
  • 6種作用的動(dòng)效類型:轉(zhuǎn)場(chǎng)過(guò)渡、層級(jí)展示、空間擴(kuò)展、聚焦關(guān)注、內(nèi)容呈現(xiàn)、操作反饋。
  • 12個(gè)實(shí)用性的動(dòng)效原則 :緩入緩出、偏移與耽誤、父子關(guān)系、形變、值變、遮罩、覆蓋、復(fù)制、景深、視差、翻轉(zhuǎn)、滑動(dòng)變焦。
  • 根據(jù)項(xiàng)目時(shí)間、邃密度、面向?qū)ο蟮葪l件,選擇合適的工具制作動(dòng)效。


[教程作者:互聯(lián)網(wǎng)]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/di3998.html
騰訊實(shí)戰(zhàn)經(jīng)驗(yàn)!如何搭建有用的設(shè)計(jì)規(guī)范?
內(nèi)部教程!超細(xì)致的付出寶設(shè)計(jì)規(guī)范之線上字體篇
圖趣網(wǎng)微信
建議反饋
×