創(chuàng)新互聯(lián)與大家分享《APP界面動(dòng)效設(shè)計(jì)優(yōu)點(diǎn)》

一、APP界面動(dòng)效設(shè)計(jì)優(yōu)點(diǎn)

1.1 提升用戶體驗(yàn)

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

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

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

1.2 增添產(chǎn)品氣質(zhì)

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

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

1.3 創(chuàng)造設(shè)計(jì)師優(yōu)勢(shì)

1.3.1 降低溝通成本

設(shè)計(jì)師通過(guò)制作高保真動(dòng)效 Demo 展示設(shè)計(jì)思路和創(chuàng)意，大大提高設(shè)計(jì)提案交接率，降低了設(shè)計(jì)師與開發(fā)的溝通成本，提高了動(dòng)效的還原度，體現(xiàn)專業(yè)性。

1.3.2 打造核心競(jìng)爭(zhēng)力

在 UI 設(shè)計(jì)行業(yè)已經(jīng)趨于飽和、并且產(chǎn)品設(shè)計(jì)流程逐漸實(shí)現(xiàn)體系化和模塊化的今天，設(shè)計(jì)師如果只會(huì)利用組件重復(fù)性地“拼湊”頁(yè)面而無(wú)更多的價(jià)值產(chǎn)出，被替代的可能性將會(huì)增大。

在日常工作之余，若要為公司和團(tuán)隊(duì)輸出更多的價(jià)值，動(dòng)效設(shè)計(jì)能力便是交互/視覺(jué)設(shè)計(jì)師的必備技能與核心競(jìng)爭(zhēng)力之一。

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

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

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

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

2.2 層級(jí)展示

現(xiàn)實(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è)系統(tǒng)的空間感。

2.3 空間擴(kuò)展

在移動(dòng)端界面設(shè)計(jì)中，由于有限的屏幕空間難以承載大量的信息內(nèi)容，可以通過(guò)折疊、翻轉(zhuǎn)、縮放等形式拓展附加內(nèi)容的存儲(chǔ)空間，以漸進(jìn)展示的方式來(lái)減輕用戶的認(rèn)知負(fù)擔(dān)。

2.4 聚焦關(guān)注

聚焦關(guān)注是通過(guò)元素的動(dòng)作變化，提醒用戶關(guān)注特點(diǎn)的內(nèi)容信息。這種提醒方式不僅可以降低視覺(jué)元素的干擾，使界面更清爽簡(jiǎn)潔，還能在用戶使用過(guò)程中，輕盈自然地吸引用戶注意力。

2.5 內(nèi)容呈現(xiàn)

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

2.6 操作反饋

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

三、APP界面動(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)與可用性提供幫助。[譯者 Z Yuhan 注] 原英文鏈接

3.1 緩入緩出

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

3.2 偏移與延遲

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

3.3 父子關(guān)系

當(dāng)APP軟件開發(fā)中界面元素較多時(shí)，可以利用時(shí)空差異創(chuàng)造出可以感知到的父子繼承關(guān)系。

3.4 形變

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

3.5 值變

當(dāng)元素的值發(fā)生變化時(shí)，用連續(xù)動(dòng)態(tài)的方式表達(dá)前后之間的關(guān)聯(lián)。

3.6 遮罩

如果一個(gè)界面元素的不同的展示方式對(duì)應(yīng)不同的功能，那么讓展示方式的變化過(guò)程具有連續(xù)性。

3.7 覆蓋

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

3.8 復(fù)制

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

3.9 景深

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

3.10 視差

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

3.11 翻轉(zhuǎn)

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

3.12 滑動(dòng)變焦

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

四、APP界面動(dòng)效軟件選擇

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

4.1 After Effects

AE 這款軟件知名度很高，學(xué)過(guò)設(shè)計(jì)的應(yīng)該都知道，它的優(yōu)點(diǎn)就是強(qiáng)大，可以實(shí)現(xiàn)超高精度的動(dòng)效，一般 UI 動(dòng)效制作只用到了 AE 很小的一部分功能。缺點(diǎn)是門檻高，上手較困難，不能做實(shí)時(shí)交互動(dòng)效。

4.2 Hype

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

4.3 Principle

Principle 功能強(qiáng)大，界面和 Sketch 類似，被譽(yù)為 Sketch 的好拍檔。它主要是做少量頁(yè)面間的過(guò)渡轉(zhuǎn)場(chǎng)、單元素動(dòng)畫等細(xì)節(jié)動(dòng)效。優(yōu)點(diǎn)很明顯，上手快、效率高、質(zhì)感好，缺點(diǎn)就是不易做整套交互流程。

4.4 Flinto

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

4.5 Framer

Framer 是一個(gè)基于 Javas cript 的原型工具，能快速導(dǎo)入 Photoshop、Sketch 中的圖像并模擬圖層分層，支持手勢(shì)，動(dòng)畫精細(xì)度高，可在手機(jī)或平板中預(yù)覽效果。缺點(diǎn)是需要有一定的編程基礎(chǔ)，上手難度較高。

4.6 ProtoPie

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

小結(jié)

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

綜上所述，APP開發(fā)公司——?jiǎng)?chuàng)新互聯(lián)為你分享的《APP界面動(dòng)效設(shè)計(jì)優(yōu)點(diǎn)》全部?jī)?nèi)容。

當(dāng)前題目：APP界面動(dòng)效設(shè)計(jì)優(yōu)點(diǎn)
標(biāo)題URL：http://www.rwnh.cn/news/163072.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、做網(wǎng)站、定制網(wǎng)站、Google、網(wǎng)站收錄、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)