亚洲免费一级高潮_欧美极品白嫩视频在线_中国AV片在线播放_欧美亚洲日韩欧洲在线看

您現(xiàn)在所在的位置:首頁 >關(guān)于奇酷 > 行業(yè)動(dòng)態(tài) > 奇酷UI培訓(xùn):用戶體驗(yàn)動(dòng)效的12大原則(下)

奇酷UI培訓(xùn):用戶體驗(yàn)動(dòng)效的12大原則(下)

來源:奇酷教育 發(fā)表于:

作為一個(gè)UX、UI設(shè)計(jì)師,我們需要知道如何通過動(dòng)效來提高用戶體驗(yàn)?,F(xiàn)在奇酷UI培訓(xùn)老師為大家詳細(xì)講解用戶體驗(yàn)動(dòng)效的12大原則,想了

        作為一個(gè)UX、UI設(shè)計(jì)師,我們需要知道如何通過動(dòng)效來提高用戶體驗(yàn)?,F(xiàn)在奇酷UI培訓(xùn)老師為大家詳細(xì)講解“用戶體驗(yàn)動(dòng)效的12大原則”,想了解更多技術(shù)干貨請(qǐng)聯(lián)系我們或收藏奇酷教育官網(wǎng)www.diabetesworldflight.com
  原則6. 遮罩
  當(dāng)元素在顯示與遮擋之間切換時(shí),變化過程要保持連續(xù)性。
  遮罩原則就是蒙版的概念,形狀改變與功能改變之間的關(guān)系。雖然設(shè)計(jì)師對(duì)靜態(tài)的“遮罩”有所了解,但我們應(yīng)該意識(shí)到,遮罩動(dòng)效是隨著時(shí)間而發(fā)生變?cè)挼囊环N動(dòng)態(tài)行為,而不是一種精致的狀態(tài)。一瞬間改變遮罩區(qū)域,將內(nèi)容順暢的顯示或隱藏起來的效果,也具有敘事的作用。
  在上面例中,頂部圖片通過形狀和位置的改變成為了唱片。在不改變?cè)貎?nèi)容的情況下,通過遮罩來改變?cè)乇旧恚且粋€(gè)相當(dāng)不錯(cuò)的手法。這個(gè)例子屬于非實(shí)時(shí)交互,是用戶操作之后才發(fā)生的。
  記住,界面動(dòng)畫的原理與時(shí)間緊密相關(guān),通過連續(xù)性、敘述性、關(guān)聯(lián)性與可預(yù)期性這四種方式來成為提神用戶體驗(yàn)的支柱。上述的例子中,盡管元素的內(nèi)容前后保持不變,但是外輪廓和位置的變化,能讓用戶很明晰那的看出來它是什么。
  原則7. 疊加
  在做界面設(shè)計(jì)的時(shí)候,都會(huì)有圖層的概念。在做動(dòng)效的時(shí)候用疊加的效果,會(huì)讓層次更加明顯。
  當(dāng)界面中存在多個(gè)頁面元素時(shí),可通過疊加排序來彌補(bǔ)扁平空間缺乏層次的問題,以此提高體驗(yàn)可用性。也就是在一個(gè)非三維的平面空間里,通過元素之間的上下關(guān)系來傳遞它們的相對(duì)位置。
  上圖一的案例中,前景元素(人名信息)向右滑動(dòng),可顯示出收藏等其他信息;上圖二的案例中,整個(gè)界面向下滑動(dòng),可顯示出其下方圖層的其他內(nèi)容(下方內(nèi)容同時(shí)使用“偏移”與“延遲”原則來表述元素之間的獨(dú)立關(guān)系)疊加原則是設(shè)計(jì)師通過縱深關(guān)系定位圖層層級(jí),向用戶展示更多信息、更多的空間內(nèi)容。
  原則8.克隆
  當(dāng)元素從主體分裂離開時(shí),可闡述二者之間的連續(xù)性關(guān)系。
  在當(dāng)前的元素或場景中分裂出新元素時(shí),對(duì)形態(tài)變化的描述顯得十分重要。用簡單的不透明度變化是不足以描述分裂的狀態(tài)。
  在以上三個(gè)實(shí)例中,當(dāng)用戶注意力集中在主元素時(shí),新元素在主元素的基礎(chǔ)上被分離開,這種雙重動(dòng)作具有清晰的敘事性:“X”創(chuàng)建了子對(duì)象“Y”。
  原則9:景深
  讓用戶看到非主視覺元素的對(duì)象或場景,打造空間感。
  與遮罩原則類似,景深原則既可以是靜止?fàn)顟B(tài)的,也可以是具有時(shí)效性的。景深的靜止?fàn)顟B(tài)還比較好理解,它的“時(shí)效性”可能會(huì)給設(shè)計(jì)師帶來疑惑?,F(xiàn)在我們將“景深”視為遮蔽的一種行為動(dòng)作,而不是靜止的狀態(tài)。當(dāng)行為發(fā)生時(shí),非主視覺元素變模糊,達(dá)到突出主視覺并產(chǎn)生空間景深的效果。
  景深原則看起來像是次要元素被模糊虛化或被透明圖層覆蓋,這也是一種設(shè)計(jì)多個(gè)元素互動(dòng)時(shí)的實(shí)時(shí)交互。景深原則經(jīng)常利用模糊與疊加透明度的手法,讓用戶感受到主元素與次要元素在空間上的層次關(guān)系。
  原則10. 視差
  當(dāng)用戶移動(dòng)界面時(shí),在平面創(chuàng)造出空間層次。
  “視差”在用戶體驗(yàn)動(dòng)效中體現(xiàn)的是,不同的元素以不同的速度進(jìn)行運(yùn)動(dòng)。在保持原本設(shè)計(jì)的完整性的前提下,視差可以讓用戶聚焦于主要操作的內(nèi)容。在視差效果下,用戶對(duì)背景元素的感知會(huì)被弱化。設(shè)計(jì)師可以通過這一原則將即時(shí)性的內(nèi)容從環(huán)境中分離出來。
  主要用了蒙版、放大縮小的屬性來實(shí)現(xiàn)視差的效果。視差原則是讓用戶在操作時(shí),明確各元素之間的關(guān)系。用戶會(huì)感覺到,放大的前景元素距離自己很近,而縮小的圖片距離自己越來越遠(yuǎn)。
  設(shè)計(jì)師通過設(shè)置元素的快慢速度、大小,便能讓用戶感知到元素的層級(jí)。因此,將背景或沒有互動(dòng)的元素放慢或縮小,讓它們“遠(yuǎn)離用戶”是有道理的。
  這樣的視覺效果,不僅會(huì)讓用戶對(duì)界面的感知超出平面的層次,也有利于將用戶把更多的關(guān)注下意識(shí)的引導(dǎo)至要呈現(xiàn)的主元素上,對(duì)用戶的引導(dǎo)是非常有效且實(shí)用的。
  原則11. 空間維度
  用翻轉(zhuǎn)的方式,打造元素入場與離場的空間感。
  翻轉(zhuǎn)可有效的改善平面化和非邏輯性的用戶體驗(yàn)。人們很擅長利用空間感來體驗(yàn)現(xiàn)實(shí)和虛擬的世界。因此具有空間感的入場或離場是能增加用戶的心理預(yù)期。另外,空間維度可改善平面視覺無法分層的情況,它可以讓同一平面的元素產(chǎn)生前后疊加的感覺??臻g維度常以三種方式呈現(xiàn):折紙翻轉(zhuǎn)、懸浮翻轉(zhuǎn)、整體翻轉(zhuǎn)。其中折紙翻轉(zhuǎn)可被理解為三維中的折疊和旋轉(zhuǎn)。
  上圖所示,在多個(gè)元素組合成的折紙結(jié)構(gòu)中,被隱藏的部分是看不見的,但它們?cè)?ldquo;空間上”仍是存在的。平面化被包裝成連續(xù)的空間體驗(yàn),用戶在對(duì)界面或某元素進(jìn)行交互操作時(shí)即可感受到。懸浮翻轉(zhuǎn)為界面元素的入場與離場,提供更直觀的展現(xiàn)方式。
  整體翻轉(zhuǎn)可讓對(duì)象整體更具有真是空間的形態(tài)。
     旋轉(zhuǎn)是通過3D卡片的效果來實(shí)現(xiàn)的整體翻轉(zhuǎn)。這樣的結(jié)構(gòu)增強(qiáng)了視覺設(shè)計(jì)與敘述事件上的表現(xiàn)力,可通過翻轉(zhuǎn)卡片來查看更多內(nèi)容。
  原則12. 移動(dòng)變焦 
  用連續(xù)的空間描述來引導(dǎo)界面元素和空間。
  移動(dòng)變焦是一個(gè)電影概念,通過移動(dòng)相機(jī)或物體的距離來控制影像的遠(yuǎn)近。但是在某些情況下。無法判斷是對(duì)象在同一平面縮放,還是3D空間中攝像機(jī)在超固定對(duì)象的方向移動(dòng),或者是3D空間中對(duì)象在朝著固定的攝像機(jī)方向移動(dòng)。
  由于這里涉及到元素變化與場景的轉(zhuǎn)換,因此下面會(huì)將“相機(jī)移動(dòng)”與“變焦”分開來講,并說明它們是如何提高用戶體驗(yàn)的可用性。
  變焦
  相機(jī)移動(dòng)(Dolly)是一個(gè)電影術(shù)語,含義是相機(jī)朝向或遠(yuǎn)離主體的移動(dòng)而造成的縮放效果。
  在用戶體驗(yàn)中,空間的運(yùn)動(dòng)可以引發(fā)用戶的視角變化,或當(dāng)對(duì)象變化時(shí)保持視角的靜止。相機(jī)移動(dòng)結(jié)合翻轉(zhuǎn)原則,可以打造更多、更好、更深入的空間體驗(yàn)。變焦是指相機(jī)與元素不做空間移動(dòng),而是對(duì)元素本身進(jìn)行的縮放(或者說我們的視角減小,導(dǎo)致元素放大)。這使觀看者感受到視角內(nèi)的內(nèi)容是在更多元素或更大的場景之內(nèi)。
         奇酷教育官網(wǎng)上每天都會(huì)更新大量UI培訓(xùn)資源,目的是為了適合不同的人群來學(xué)習(xí)。想了解更多或不懂的地方可以在線咨詢。