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

在日常的用戶交互過程中，交互動效的存在是不可忽視的因素，而合理的交互動效，更是可以幫助用戶理解，為用戶提供更加流暢的功能體驗，又或者是傳遞產品調性。那么，如何才能做好交互動效？本文作者從三方面進行了解讀，一起來看。

前言

當我們提及“動效設計”這一詞，第一印象往往是那一類炫酷的極具視覺表現力的動效，而有一類動效，它們如春風細雨般融入了用戶交互過程的點滴之中，為打造符合用戶心智的流暢體驗默默做著貢獻，它們就是「交互動效」。

本文將從以下三個方面展開介紹——「什么是交互動效」「為什么要重視交互動效」「交互動效的設計流程和方法」，帶領大家了解交互動效的基礎概念，以及具體的設計流程方法，希望大家看完后能夠對交互動效有更加清晰的認知。

一、什么是交互動效？

交互動效指的是那些用于引導和響應用戶交互行為的動效，它們與用戶的交互行為密切相關，起到幫助用戶理解、提供操作反饋、提升感知流暢性的作用。

與視覺動效不同的地方在于，交互動效主要作用于產品的基礎體驗和功能體驗層面，為用戶營造更加自然流暢的體驗。而視覺動效除了在功能體驗層面能幫助用戶降低理解成本之外，更多作用于情感體驗，增加產品趣味性、傳遞產品調性，目的是引起用戶的情感共鳴，調動用戶的正面情緒。

圖片▲交互動效&視覺動效示例

圖片▲交互動效與視覺動效的影響范圍差異

二、為什么要重視交互動效？

在實際的項目中，交互設計師往往會先處理任務流程和頁面信息設計。在設計工作量大、時間緊張的時候，很可能遺漏掉需要增加交互動效的細節，到點檢驗收的時候才發現這些問題，這種情況在新人設計師中較為常見。

在驗收階段，由于項目排期時間緊，開發有別的bug要改，可能沒有時間去處理動效方面的優化，從而導致了線上出現體驗問題。

圖片▲驗收階段才發現動效問題的尷尬

必要的場景缺失動效直接上線，可能會產生以下的體驗問題：

1. 不符合預期，產生理解困難：交互動效用于傳達頁面變化過程，如果過程缺失，可能會導致變化不符合用戶預期，使得用戶產生理解困難。
2. 感知卡頓：缺失必要的手勢動效會導致用戶操作的不流暢，缺失必要的轉場動效則會影響視覺觀感的流暢性。

圖片▲動效缺失產生體驗問題例子

總的來說，不注重交互動效將會給產品體驗埋下各種體驗問題隱患，加上進入互聯網下半場后，互聯網產品將會更加注重設計上的精致精細度。由此來看，掌握系統化的動效設計方法，已然成為設計師們的必修課。

三、交互動效的設計流程和方法

1. 動效評估

在設計之前，我們需要先判斷是否真的需要做動效？不能為了做動效而去做動效。

1）場景聚焦

首先，我們需要知道，什么樣的場景適合做交互動效？可以總結為以下三類場景：

圖片▲三種適合做交互動效的場景

「場的變化」指的是用戶需要從產品中的一個「場」到另一個「場」，發生在頁面間的轉場、或頁面內的轉場。

圖片▲「場的變化」相關例子

「內容的新增或減少」指的是由于用戶的交互行為，導致頁面中的內容（模塊、組件、元素等）產生新增或減少。

圖片▲「內容新增/減少」相關例子

「元素的屬性變化」指的是由于用戶的交互行為，導致頁面中的元素屬性產生變化，例如位置改變、狀態變化、值變化等。

圖片▲「元素屬性變化」相關例子

2）優先級評估

篩選出適合添加交互動效的場景后，我們需要評估在這個場景中做動效的優先級。判斷做動效的必要性，可以從以下四個維度從高到低的維度去進行優先級評估：

「一致性」——如果某個場景已經有定義好的動效規范，原則上需要遵循規范進行適配，以確保全局動效體驗的一致性。這一個維度對于那些存在動效語言的產品是非常重要的，一致性是為整體產品調性和品牌所服務。例如iOS在全局都保持了高度統一的動效體驗，如果某一個組件缺失了用戶習以為常的動效，很容易被用戶感知到且產生對品牌的負面評價。

「幫助用戶理解」——不加動效是否會影響用戶對當前頁面變化的理解？如果因為缺失動效，在元素關系、頁面層級、狀態變化上造成用戶較大的困惑，影響了用戶體驗，那么在該場景下添加動效的必要性是較大的。

「提升流暢度」——不加動效是否會影響視覺層面和操作層面的流暢度？即視覺上是否會產生閃跳、突變等卡頓感，操作上是否實時反饋、符合用戶預期。

「引導注意力」——頁面中的元素是否需要通過動效來引導用戶的注意力？會不會對用戶造成不必要的打擾？有時候產品會出于業務訴求希望通過動效的手段來引導用戶注意力，達到業務的目標，但是我們需要站在用戶的角度去思考用戶的注意力是否應該被引導，不讓動效成為對用戶的干擾。

圖片▲動效優先級評估

2. 動效設計

1）動效原則

設計原則用于指導我們設計動效的方向，確保不偏離正確的方向。結合行業內的各類動效規范的設計原則，我們總結出以下六個通用性較高的設計原則：

1. 舒適：動效需要符合現實世界的物理屬性，貼近用戶的心智認知，感知上舒適、同時兼具視覺美感。
2. 高效：高效響應并減少過長的位移和時間，使動效觸達不拖沓。
3. 流暢：不卡、不閃、不跳，幀率穩定、響應及時、跟手操作是動效流暢體驗的基礎要求
4. 統一：同個產品內的動效體驗感知統一，體現在相同的控件動效保持一致、相似的動效編排一致。
5. 簡單清晰：界面元素運動盡可能少且簡潔，減少路徑及不必要的元素，確保動效過程清晰、重點突出。
6. 克制有度：控制出現頻率，不增加額外操作，不干擾用戶，確保動效有意義。

圖片▲交互動效設計原則

2）動效屬性

① 變化

一個完整的動效是由不同元素的不同變化組成的，常見的變化類型有：位移、透明度、大小、旋轉、3D旋轉…

圖片▲動效常用變化類型

② 時長

小于200ms的動效不易被感知，多于1000ms（1s）則讓用戶感到緩慢，交互動效時長一般在200ms-500ms之間，我們在設計時長時，可以從以下幾個因素進行考慮：

i）復雜程度：復雜的動畫比簡單的動畫需要更多的時間來表達。

圖片▲動效復雜程度對時長的影響

ii）區域范圍：動效運動在一定的范圍內進行，小范圍內比大范圍的運動所用的時間相對更短。

圖片▲動效區域范圍對時長的影響

iii）入場/退場：一般來說，退場的動效時長要比入場短，讓用戶更把注意力放在后續的內容中。

圖片▲動效入場/退場對時長的影響

③ 曲線

曲線與時長相互配合產?運動的韻律感。調整曲線能使物體實現加速和減速，?不是以恒定的速率運動。在自然定律下，物體不會突然開始或停止移動，它們需要一定的時間來加速和減速。以下是三種常用的曲線類型：

i）加速曲線：適用原本在視線中的物體，需要消失或退場，逐漸加速符合退場行為特征，例如彈窗/浮層退出、卡片刪除等。

圖片▲加速曲線示意

ii）減速曲線：適用原本在視線外的物體，需要出現或進場，逐漸減速符合進場行為特征，例如彈窗/浮層出現、頁面進入等。

圖片▲減速曲線示意

iii）緩入緩出曲線：先加速后減速，適用于運動前后始終在用戶視線范圍內的物體，符合物體啟動和停止的真實規律，例如圖片縮放、tab切換、開關等。

圖片▲緩入緩出曲線示意

3）動效編排

動效屬性是針對單個元素進行設置的，那么如何對多個元素進行動效組合和編排？下面提供一些動效編排的技巧：

① 淡入淡出

淡入淡出是通過透明度變化來實現過渡轉場，也是最簡潔實用、最常見的一種類型。其分為「單向淡入淡出」、「交叉淡入淡出」和「錯開淡入淡出」。

i）單向淡入淡出：在前后層疊的場景中，只有前景元素進行淡入或淡出動作，下方元素無變化。

圖片▲單向淡入淡出示意

ii）交叉淡入淡出：存在退場元素與進場元素的場景下，一個淡入視野，另一個淡出。在整個過程中，會存在兩個元素和它們后面的內容同時可見的時候。

圖片▲交叉淡入淡出示意

如果退場元素和入場元素在視覺樣式或者布局結構上差異較大，交叉淡入淡出可能會帶來視覺上的混亂，這時候可適當錯開出場元素淡出和進場元素淡入的時機。

圖片▲可通過錯開元素進出場時機避免帶來視覺混亂

iii）錯開淡入淡出：在入場元素淡入之前，將退場元素完全淡出。這種方式可以規避視覺上出現重疊元素，但是可能會造成有一瞬間出現容器內容為空的情況。

圖片▲錯開淡入淡出示意

② 一鏡到底

一鏡到底是通過共享元素、容器和動勢來進行轉場過渡的一種編排方式，有助于提升用戶操作任務的效率，增強視覺的流暢感，是轉場設計中重點推薦的編排方法。

i）共享元素

共享元素是轉場前后持續存在的界面元素，是在轉場發生后希望用戶關注到的焦點元素，它增強了轉場的連續感。

圖片▲共享元素轉場示意

ii）共享容器

當一組元素在過渡時包含明確的邊界，可使用容器來讓轉換過程有連續感。容器通過大小、高度、圓角等屬性進行補間過渡轉換，容器內的元素可通過淡入淡出或共享元素的手法進行過渡。

圖片▲共享容器轉場示意

在使用共享容器轉場時，有以下原則需要注意：

原則1——盡量減少獨立移動的元素數量。多個元素運動會爭奪并分散注意力，我們可以通過淡入淡出減少元素移動，讓注意力更聚焦。

圖片▲原則1：避免過多獨立移動的元素

原則2—— 避免焦點元素在運動過程中和其他元素重疊。焦點元素和其他元素運動軌跡重疊會產生雜亂無章的過渡，同樣地，可以用淡入淡出來簡化運動。

圖片▲原則2：避免焦點元素運動軌跡和其它元素重疊

iii） 共享動勢

無法通過補間變化來實現柔和過渡，可以提取出可用的共享轉換屬性，來實現前后的平滑過渡。常用的共享運動屬性有位移、縮放、旋轉等。

▲共享動勢效果示意

③ 其它編排技巧

i）運動路徑

如果轉場中的元素沿對角線移動，線形運動路徑具有簡單而實用的風格，而弧形運動路徑則創造了更加強調和戲劇性的風格。

圖片▲線形和弧形運動路徑差異對比

ii）振蕩

一般情況下，轉場動效在到達終點時會結束。當添加振蕩時，過渡路徑至少超過其端點一次，然后反向返回端點。振蕩可以用來表達一種更加俏皮和充滿活力的過渡風格。

圖片▲有無振蕩差異對比

iii）縱深變化

一般情況下，背景內容在容器變換過渡期間保持靜態?？梢酝ㄟ^動畫背景內容的比例來強調縱深變化。這種通過強調前景和背景內容之間的距離，使過渡看起來更加生動。

圖片▲有無縱深變化差異對比

iv）交錯

一般情況下，入場元素會打包為一個組進行處理?！附诲e」是指通過對組中的元素應用短延遲，創建一種級聯效果，將注意力非常短暫地集中在組中的每個元素或個別元素上。

圖片▲通過交錯將注意力短暫地集中在每一項上

交錯還有可以用于強調頁面元素，將需要強調的頁面核心操作或元素在其他元素入場完畢后完成入場，能夠吸引用戶注意力，完成視覺引導。

圖片▲通過交錯突出核心元素

3. 動效落地

盡管我們把動效設計得再精美，最終還是要靠開發大哥們把它還原出來。交互動效需要開發通過代碼來實現，因此動效標注如何讓開發看得懂且能理解，就尤為重要。

這里推薦大家使用參數化的表格來進行標注，轉場動效的標注文檔中需要包括以下要素：

1. 動效demo附件：方便開發直接查看整體的動效效果。
2. 觸發條件：說明動效發生的條件，即用戶通過什么行為觸發該動效。
3. 元素示意：將動效中發生變化的元素進行拆解，通過圖示清晰示意。
4. 變化屬性：元素的什么屬性發生，例如透明度、位置、大小等等。
5. 動效時間：「延遲開始時間」表示元素從觸發條件發生后延遲多長時間開始執行，「持續時長」表示該變化持續發生多長時間。
6. 變化值&貝塞爾曲線：描述屬性具體的變化值范圍，以及相應使用的貝塞爾曲線參數。

圖片▲轉場動效標注文檔示意

手勢動效的標注和轉場動效略有不同，因為手勢動效是跟手的效果，不像轉場動效是在固定的時長內完成，因此不需要描述時長相關的參數和動效曲線，取而代之的是需要描述清楚頁面元素跟手的聯動關系。

圖片▲手勢動效標注文檔示意

在動效驗收的時候，如果發現有還原問題，那么可以將沒有按照設計標注來做的地方在表格中圈出來，幫助開發快速定位問題，提高溝通效率。

圖片▲在驗收環節運用標注文檔定位問題

結語

交互動效作為提升產品精致精細度的必不可少的要素之一，也是作為設計師不可或缺的技能，本文給大家講解了從動效評估-動效設計-動效落地的全流程方法，希望能對大家了解交互動效、上手交互動效設計有一定的幫助。當我們希望給用戶帶來不一樣的驚喜和極致體驗時，不妨試一試從交互動效入手。

參考資料及部分示例圖來源：

1. material.io/design/motion
2. developer.harmonyos.com