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.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.88yangsc.com