2021-3-24 ui設(shè)計分享達人
運動對數(shù)字產(chǎn)品的用戶體驗產(chǎn)生了深遠的影響，但是，如果界面元素沒有表現(xiàn)出基本的運動設(shè)計原理，則可用性會受到損害。在用戶界面的上下文中，動作不僅僅是視覺裝飾。它是一種強大的力量，可增強產(chǎn)品參與度并擴展設(shè)計交流的范圍。
我們的世界是運動之一。即使在靜止的瞬間，葉子也會發(fā)抖，肺部也會擴張。在數(shù)字產(chǎn)品設(shè)計領(lǐng)域，運動似乎是第二自然，這是對日常工作的擴展，可以毫不費力地加以利用。
從理論上講，使UI元素移動很容易。在預(yù)定路徑上定義點，然后軟件對間隙進行補間。實際上，它不是那樣工作的。工具和技術(shù)是必不可少的，但它們是從原理中獲取力量的。如果要提高數(shù)字產(chǎn)品的可用性，就必須以適用于無數(shù)用例的不變行為規(guī)則為基礎(chǔ)。
運動設(shè)計的起源
運動設(shè)計與UX的結(jié)合相對較新，但其根源是迪士尼。迪斯尼原理是為了講故事而提煉出身體運動的基本定律。它們使繪制的角色能夠移動和表情，但不能充分滿足現(xiàn)代用戶界面對交互運動的需求。
當(dāng)代設(shè)計師試圖彌合這一差距。更具說明性的示例之一是動畫設(shè)計的十項原則，這是迪士尼動畫專家Jorge R. Canedo Estrada的改編作品。
在建立運動中用戶體驗的原則時，可以從以下幾點入手
A. 從UI動畫中區(qū)分運動設(shè)計
B. 闡明運動如何幫助可用性
C. 解開核心運動行為的內(nèi)部運作方式
運動不僅僅是裝飾
動作設(shè)計不是UI動畫的代名詞。這一點很關(guān)鍵，因為UI動畫幾乎總是被當(dāng)作一種經(jīng)過深思熟慮的外觀，而與UX沒有任何關(guān)系（除了增加魅力）。動作不是裝飾，而是行為，行為只能幫助或阻礙用戶體驗。
兩種互動類型：實時與非實時
運動設(shè)計涉及兩個基本交互：實時和非實時。
當(dāng)用戶在屏幕上操作UI元素時，實時交互可提供即時反饋。換句話說，動作行為會立即響應(yīng)用戶輸入。
用戶輸入后會發(fā)生非實時交互，這意味著用戶必須短暫暫停并觀察所產(chǎn)生的運動行為，然后才能繼續(xù)。
實時交互：運動行為會立即響應(yīng)用戶輸入。
非實時交互：交互后，用戶必須短暫等待并觀察動作行為。
運動支持可用性
運動設(shè)計必須以四種不同的方式支持可用性。
A. 期望：當(dāng)用戶與UI元素交互時，他們期望看到哪些運動行為？運動是否符合預(yù)期或引起混亂？
B. 連續(xù)性：交互是否在整個用戶體驗中產(chǎn)生一致的運動行為？
C. 敘述：交互及其觸發(fā)的動作行為是否與滿足用戶意圖的事件的邏輯進程相關(guān)聯(lián)？
D. 關(guān)系： UI元素的空間，美學(xué)和層次屬性如何相互關(guān)聯(lián)并影響用戶的決策？運動如何影響存在的各種元素關(guān)系？
數(shù)字產(chǎn)品的12種運動設(shè)計原理
1.緩和
緩和模仿現(xiàn)實對象隨時間加速和減速的方式。它適用于所有顯示運動的UI元素。
放松的反面是線性運動。顯示線性運動的UI元素立即從固定速度變?yōu)槿伲瑥娜僮優(yōu)楣潭?。這種行為在物理世界中不存在，并且對于用戶而言似乎停滯不前。
UI卡和相應(yīng)的椅子移動很快，但是由于緩和，它們可以平穩(wěn)且受控地停下來。
2.偏移和延遲
當(dāng)多個UI元素同時且快速移動時，用戶傾向于將它們組合在一起，而忽略了每個元素可能具有其自身功能的可能性。
偏移和延遲會在同時移動的UI元素之間創(chuàng)建層次結(jié)構(gòu)，并傳達它們是相關(guān)的但又不同的信息。元素的時序，速度和間距不是完全同步，而是交錯排列，從而產(chǎn)生微妙的“一個接一個”的效果。
當(dāng)用戶在屏幕之間漫游時，偏移和延遲表明存在多個交互選項。
這個加密貨幣應(yīng)用程序一次引入了多個UI元素。它們的到來有些交錯，以通知用戶這些元素是相關(guān)的，但又是截然不同的。
3.父子元素關(guān)聯(lián)
父子元素關(guān)聯(lián)將一個UI元素的屬性鏈接到其他UI元素的屬性。當(dāng)父元素中的屬性更改時，子元素的鏈接屬性也會更改。所有元素屬性可以相互鏈接。
例如，父元素的位置可以綁定到子元素的比例。當(dāng)父元素移動時，子元素的大小會增加或減小。
父子元素關(guān)聯(lián)會在UI元素之間創(chuàng)建關(guān)系，建立層次結(jié)構(gòu)，并允許多個元素立即與用戶進行通信。因此，關(guān)聯(lián)在實時交互中使用時影響最大。
藍色滑塊的位置控制背景遮罩的不透明度，燈泡周圍的發(fā)光效果的散布以及光強度標度的數(shù)值。
4.轉(zhuǎn)型
當(dāng)一個UI元素變成另一個UI元素時，將發(fā)生轉(zhuǎn)換。例如，下載按鈕將轉(zhuǎn)換為進度條，該進度條將轉(zhuǎn)換為完成圖標。
從UX的角度來看，轉(zhuǎn)換是一種向用戶顯示其相對于目標的狀態(tài)（系統(tǒng)狀態(tài)的可見性）的有效方法。當(dāng)UI元素之間的進度鏈接到帶有開始和結(jié)束的過程（例如，下載文件）時，這特別有用。
轉(zhuǎn)換表示下載的開始，中間和完成。
5.數(shù)據(jù)變化
在數(shù)字界面中，數(shù)據(jù)表示（數(shù)字，基于文本或圖形的表示）豐富，出現(xiàn)在從銀行應(yīng)用程序到個人日歷到電子商務(wù)站點的產(chǎn)品中。由于這些表示形式與實際存在的數(shù)據(jù)集相關(guān)聯(lián)，因此它們可能會發(fā)生變化。
值的變化傳達了數(shù)據(jù)表示的動態(tài)性質(zhì)，并告知用戶數(shù)據(jù)是交互式的，并且可能會受到一定程度的影響。當(dāng)沒有動靜地引入值時，用戶參與數(shù)據(jù)的意愿降低。
動態(tài)引入值以向用戶顯示他們有能力影響數(shù)據(jù)。
6.遮罩
遮罩是UI元素各部分的戰(zhàn)略性揭示和隱藏。通過更改元素外圍的形狀和比例，遮罩會發(fā)出信號，表示實用性發(fā)生了變化，同時允許元素本身保持可識別性。因此，理想的選擇是諸如照片和插圖之類的詳細視覺效果。
從可用性的角度來看，設(shè)計人員可以實施屏蔽以向用戶顯示他們正在通過一系列交互進行中。
遮罩用于從圖像捕獲到上傳到在線店面中的過渡。
7.疊加
在2D空間中，沒有深度，UI元素只能沿X軸或Y軸移動。疊加會在UI的2D空間中產(chǎn)生前景色/背景色的錯覺。通過模擬深度，覆蓋可以根據(jù)用戶需要隱藏和顯示元素。
使用重疊時，信息層次結(jié)構(gòu)是一個重要的考慮因素。例如，用戶在做筆記應(yīng)用程序中應(yīng)該首先看到的是他們的筆記列表。然后，可以使用滑動來公開每個消息的輔助選項，例如刪除或存檔。
重疊式運動可讓用戶快速歸檔或刪除此記事應(yīng)用中的條目。
8.克隆
克隆是一種運動行為，其中一個UI元素拆分為其他元素。這是突出顯示重要信息或交互選項的聰明方法。
當(dāng)UI元素在界面中實現(xiàn)時，它們需要一個清晰的起點來鏈接到屏幕上已經(jīng)存在的元素。如果元素只是無處不在而突然爆發(fā)或消失，則用戶將缺乏進行自信交互所需要的上下文。
用戶可以放心地單擊彩色圓圈，因為它們顯然源自“添加注釋”圖標。
9.模糊
想象磨砂玻璃門。它需要交互才能打開，但是可以（在某種程度上）辨別另一端正在等待什么。
它為用戶提供了一個界面，該界面要求進行交互，同時顯示要跟隨的屏幕提示。導(dǎo)航菜單，密碼屏幕和文件夾/文件窗口是常見的示例。
模糊處理為用戶提供了重要的互動方式，同時讓他們保持產(chǎn)品敘事的方向。
10.視差
當(dāng)兩個（或多個）UI元素同時移動但速度不同時，將顯示視差。在此，目的是建立層次結(jié)構(gòu)。
A. 交互式元素移動速度更快，并顯示在前景中。
B. 非交互式元素的移動速度變慢并退回到背景。
視差引導(dǎo)用戶使用交互式UI元素，同時允許非交互式元素保留在屏幕上并保持設(shè)計統(tǒng)一性。
使用視差時，最重要的交互式元素移動最快，而非交互式元素移動較慢并退回到背景。
11.維度
維度使UI元素似乎具有多個交互方面，就像物理世界中的對象一樣。通過使元素看起來像是可折疊的，可翻轉(zhuǎn)的，浮動的或具有逼真的深度屬性而實現(xiàn)的。
作為一種敘事設(shè)備，維度意味著UI元素的不同側(cè)面被鏈接在一起，并實現(xiàn)了無縫的屏幕過渡。
維度意味著2D UI元素具有多個交互方面，就像物理世界中的對象一樣。
12.變焦
滾動和縮放允許用戶在空間上“遍歷” UI元素或增加其比例以顯示更多細節(jié)。
A. 滾動：滾動視角發(fā)生在用戶的角度更接近（或遠離）UI元素時。想象一下，一個拿著照相機的人走到一朵花前要近距離拍攝。
B. 縮放：使用縮放時，用戶的視點和UI元素保持固定，但是該元素在用戶屏幕內(nèi)的大小增加（或減小）?，F(xiàn)在，假設(shè)該人保持姿勢并使用相機的變焦功能使花朵顯得更大。
滾動：用戶的視點似乎越來越接近背景圖像。
縮放：用戶的視角不會更接近圖像。而是圖像的比例會增加。
運動就是溝通
互動體驗的需求運動在其所有的輕快和微妙的形式。當(dāng)堅持運動設(shè)計原則時，即使最基本的UI元素也成為人類交流的復(fù)雜媒介。當(dāng)這些原理被忽略時，運動就體現(xiàn)了自然界所沒有的特征。
運動設(shè)計與數(shù)字產(chǎn)品UX之間的關(guān)系正在迅速成熟。原則上的運動方法可以防止過度依賴趨勢，工具和技術(shù)的短暫使用。更好的是，它跨越了2D屏幕上元素的抽象運動與3D世界中運動感知之間的鴻溝。
文章來源：站酷 作者：DuiaDesign
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.teruid.com