海淘科技與大家分享《APP界面動效設(shè)計優(yōu)點》
1.1 提升用戶體驗
設(shè)計師若只追求靜態(tài)像素的完美呈現(xiàn)，而忽略動態(tài)過程的合理表達，會導(dǎo)致用戶不能在視覺上覺察元素的連續(xù)變化，進而很難對新舊狀態(tài)的更替有清晰的感知。
迪士尼動畫大師乃特維克說過一句話：動畫的一切皆在于時間點和空間幅度。
通過「時間點」和「空間幅度」的設(shè)計為用戶建立運動的可信度，即視覺上的真實感，當(dāng)用戶意識到這個動作是合理的，才能更加清晰愉悅地使用產(chǎn)品。
1.2 增添產(chǎn)品氣質(zhì)
未添加動效的產(chǎn)品，會帶給人一種死氣沉沉的感覺，所有內(nèi)容平鋪直敘、毫無生機，即使界面設(shè)計的很美觀，也會缺乏一種靈動細膩的氣質(zhì)。
如果把產(chǎn)品比作成美女，那么界面視覺就是美女的顏值，交互動效就是美女的肢體語言。合理的動效能將更立體、更富有關(guān)聯(lián)性的信息傳遞出去，提高產(chǎn)品的“表達能力”，增加親和力和趣味性，也利于品牌的建立。
1.3 創(chuàng)造設(shè)計師優(yōu)勢
1.3.1 降低溝通成本
設(shè)計師通過制作高保真動效 Demo 展示設(shè)計思路和創(chuàng)意，大大提高設(shè)計提案交接率，降低了設(shè)計師與開發(fā)的溝通成本，提高了動效的還原度，體現(xiàn)專業(yè)性。
1.3.2 打造核心競爭力
在 UI 設(shè)計行業(yè)已經(jīng)趨于飽和、并且產(chǎn)品設(shè)計流程逐漸實現(xiàn)體系化和模塊化的今天，設(shè)計師如果只會利用組件重復(fù)性地“拼湊”頁面而無更多的價值產(chǎn)出，被替代的可能性將會增大。
在日常工作之余，若要為公司和團隊輸出更多的價值，動效設(shè)計能力便是交互/視覺設(shè)計師的必備技能與核心競爭力之一。
界面動效種類紛繁多樣，根據(jù) App 動效的作用，可以大體分為如下 6 個類型:
2.1 轉(zhuǎn)場過渡
人腦灰質(zhì)會對動態(tài)事物(如：移動、形變、色變等)保持敏感。在界面中加入一些平滑舒適的過渡效果，不僅能讓界面顯得生動，更能幫助用戶理解界面前后變化的邏輯關(guān)系。
2.2 層級展示
現(xiàn)實空間里，物體存在近大遠小原則，運動則會近快遠慢。當(dāng)界面中的元素存在不同層級時，恰當(dāng)?shù)膭有Э梢詭椭脩衾砬迩昂笪恢藐P(guān)系，以動效來體現(xiàn)整個系統(tǒng)的空間感。
2.3 空間擴展
在移動端界面設(shè)計中，由于有限的屏幕空間難以承載大量的信息內(nèi)容，可以通過折疊、翻轉(zhuǎn)、縮放等形式拓展附加內(nèi)容的存儲空間，以漸進展示的方式來減輕用戶的認知負擔(dān)。
2.4 聚焦關(guān)注
聚焦關(guān)注是通過元素的動作變化，提醒用戶關(guān)注特點的內(nèi)容信息。這種提醒方式不僅可以降低視覺元素的干擾，使界面更清爽簡潔，還能在用戶使用過程中，輕盈自然地吸引用戶注意力。
2.5 內(nèi)容呈現(xiàn)
界面內(nèi)容元素按照一定的秩序規(guī)律逐級呈現(xiàn)，引導(dǎo)用戶視覺焦點走向，幫助用戶更好地感知頁面布局、層級結(jié)構(gòu)和重點內(nèi)容，同時也能讓整個流程更加豐富流暢，增添了界面的活力。
2.6 操作反饋
無論是點擊、長按、拖拽、滑動等交互行為，都應(yīng)該得到系統(tǒng)的即時反饋，將其以視覺或動效的方式展現(xiàn)，幫助用戶了解當(dāng)前系統(tǒng)對交互過程的響應(yīng)情況，為用戶帶來安全感。
這是一位在五年時間內(nèi)為四十多個國家和上百個頂尖機構(gòu)提供咨詢服務(wù)的動效設(shè)計師，總結(jié)出來的實用性動效設(shè)計原則，為提升產(chǎn)品體驗與可用性提供幫助。[譯者 Z Yuhan 注] 原英文鏈接
3.1 緩入緩出
時效事件發(fā)生時，元素的動作應(yīng)顯得自然，與用戶預(yù)期相符。
3.2 偏移與延遲
加入新的界面元素或場景時，可用與表達元素之間的關(guān)系。
3.3 父子關(guān)系
當(dāng)APP軟件開發(fā)中界面元素較多時，可以利用時空差異創(chuàng)造出可以感知到的父子繼承關(guān)系。
3.4 形變
用連貫的狀態(tài)描繪表達元素功能的改變。
3.5 值變
當(dāng)元素的值發(fā)生變化時，用連續(xù)動態(tài)的方式表達前后之間的關(guān)聯(lián)。
3.6 遮罩
如果一個界面元素的不同的展示方式對應(yīng)不同的功能，那么讓展示方式的變化過程具有連續(xù)性。
3.7 覆蓋
用堆疊元素的相對位置來描述它們的扁平空間關(guān)系。
3.8 復(fù)制
當(dāng)新的元素從已有元素復(fù)制出來時，用連貫的方式描述其關(guān)聯(lián)關(guān)系。
3.9 景深
允許用戶瞥得到非主要元素或場景。
3.10 視差
當(dāng)用戶滾動界面時，在平面創(chuàng)造出空間層次。
3.11 翻轉(zhuǎn)
通過具有空間架構(gòu)的描述方式來表現(xiàn)新元素的產(chǎn)生與離場。
3.12 滑動變焦
用連續(xù)的空間描述來引導(dǎo)界面元素和空間。
APP界面動效設(shè)計軟件紛繁眾多，不同軟件的側(cè)重點也各不相同，APP界面設(shè)計師可以根據(jù)項目的時間、精細度、面向?qū)ο蟮葪l件來選擇合適的軟件。下面我列舉出市面上常見的動效軟件以及各自的優(yōu)缺點，供選擇參考。
4.1 After Effects
AE 這款軟件知名度很高，學(xué)過設(shè)計的應(yīng)該都知道，它的優(yōu)點就是強大，可以實現(xiàn)超高精度的動效，一般 UI 動效制作只用到了 AE 很小的一部分功能。缺點是門檻高，上手較困難，不能做實時交互動效。
4.2 Hype
Hype 號稱無代碼動效神器，像 AE 一樣使用時間軸來設(shè)置動畫。動畫效果在 PC、Mobile、Pad 端都可以直接預(yù)覽，也可以導(dǎo)出視頻或者 GIF。3.0 版還有物理特性和彈性曲線，可以實現(xiàn)更強大的動畫效果。
4.3 Principle
Principle 功能強大，界面和 Sketch 類似，被譽為 Sketch 的最佳拍檔。它主要是做少量頁面間的過渡轉(zhuǎn)場、單元素動畫等細節(jié)動效。優(yōu)點很明顯，上手快、效率高、質(zhì)感好，缺點就是不易做整套交互流程。
4.4 Flinto
Flinto 界面跟 Sketch 也非常相似，能夠快速實現(xiàn)各種滾動、轉(zhuǎn)場、點擊反饋等效果，適合模擬多個頁面、場景復(fù)雜的交互流程，學(xué)習(xí)成本低。缺點是復(fù)雜的動效難以實現(xiàn)，價格略貴且試用期短。
4.5 Framer
Framer 是一個基于 Javas cript 的原型工具，能快速導(dǎo)入 Photoshop、Sketch 中的圖像并模擬圖層分層，支持手勢，動畫精細度高，可在手機或平板中預(yù)覽效果。缺點是需要有一定的編程基礎(chǔ)，上手難度較高。
4.6 ProtoPie
ProtoPie 是一款交互原型設(shè)計工具，支持 Mac 和 Windows 雙平臺，更加輕量級，集成的功能更吸引人，可以調(diào)用 iPhone 系統(tǒng)的陀螺儀、麥克風(fēng)、羅盤、3D Touch，多種智能傳感器等等，絕對是 Windows 用戶設(shè)計師的福利。
綜上所述，上海APP開發(fā)公司——海淘科技為你分享的《APP界面動效設(shè)計優(yōu)點》全部內(nèi)容。
