日韩 亚洲一区二_久久vs国产综合色大全_国产精品福利在线_欧美在线一级A片免费观看欧美在线_女同性毛片60分钟

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

奇酷UI培訓(xùn)：用戶(hù)體驗(yàn)動(dòng)效的12大原則（上）

來(lái)源：奇酷教育 發(fā)表於：

作為一個(gè)UX、UI設(shè)計(jì)師，我們需要知道如何通過(guò)動(dòng)效來(lái)提高用戶(hù)體驗(yàn)。現(xiàn)在奇酷UI培訓(xùn)老師為大家詳細(xì)講解「用戶(hù)體驗(yàn)動(dòng)效的12大原則」，想了解更多技術(shù)乾貨請聯(lián)繫我們或收藏奇酷教育官網(wǎng)www qikuedu com。

　　作為一個(gè)UX、UI設(shè)計(jì)師，我們需要知道如何通過(guò)動(dòng)效來(lái)提高用戶(hù)體驗(yàn)。現(xiàn)在奇酷UI培訓(xùn)老師為大家詳細(xì)講解“用戶(hù)體驗(yàn)動(dòng)效的12大原則”，想了解更多技術(shù)乾貨請聯(lián)繫我們或收藏奇酷教育官網(wǎng)www.qikuedu.com。
　　我們從五個(gè)部分來(lái)具體講述用戶(hù)體驗(yàn)動(dòng)效的12大原則：
　　1. UI動(dòng)效不等於用戶(hù)體驗(yàn)動(dòng)效
　　2. 實(shí)時(shí)與非實(shí)時(shí)交互的區(qū)別
　　2. 4種提升動(dòng)效可用性的方式
　　4. 原則，技術(shù)，屬性和價(jià)值觀(guān)
　　5. 用戶(hù)體驗(yàn)的12大原則
　　UI動(dòng)效不等於用戶(hù)體驗(yàn)動(dòng)效
　　在界面設(shè)計(jì)中，大部分動(dòng)效被設(shè)計(jì)者理解為UI動(dòng)效， 其實(shí)不然。 在正式介紹12大原則之前，我們要先介紹下兩(liǎng)者的不同。
　　UI動(dòng)效通常被設(shè)計(jì)師認(rèn)為是讓用戶(hù)體驗(yàn)更加愉悅的東西，但實(shí)際並沒有增加太多價(jià)值。在本文中，我將說(shuō)明UI動(dòng)效必須以用戶(hù)體驗(yàn)12大原則為基礎(chǔ)，那才能為可用性加分。
　　就好比，UI動(dòng)效是建築的施工，用戶(hù)體驗(yàn)的12大原則是基礎(chǔ)的施工圖，施工需要在施工圖的引導(dǎo )下才能做到正確無(wú)誤。12大原則為設(shè)計(jì)師提供了強(qiáng)有力的理論支持。
　　實(shí)時(shí)與非實(shí)時(shí)交互的區(qū)別
　　在設(shè)計(jì)動(dòng)效前，區(qū)分“狀態(tài)”和“行為”是很重要的。用戶(hù)體驗(yàn)中的狀態(tài)元素基本上是靜態(tài)的，行為是暫時(shí)的，他們基於交互動(dòng)作。當(dāng)一些元素處於被掩蓋或遮擋的狀態(tài)未顯示出來(lái)時(shí)，用戶(hù)需要進(jìn)行短暫的行為動(dòng)作與界面進(jìn)行交互。
　　此外，交互在時(shí)間的維度上都可以被認(rèn)為是實(shí)時(shí)或非實(shí)時(shí)發(fā)生的。實(shí)時(shí)意味著用戶(hù)直接與用戶(hù)界面中的對(duì)象進(jìn)行交互。非實(shí)時(shí)意味著對(duì)象行為是後交互式的：它發(fā)生在用戶(hù)操作之後，並且是過(guò)渡性的。這是一個(gè)重要的區(qū)別。因此，實(shí)時(shí)交互也可以被認(rèn)為是“直接操縱”，用戶(hù)行為與界面交互是同時(shí)進(jìn)行的。非實(shí)時(shí)交互僅在用戶(hù)行為發(fā)生後，並且直到狀態(tài)改變結(jié)束後用戶(hù)才可繼續(xù)使用。
　　區(qū)分二者的差別，將幫助我們更好的領(lǐng)會(huì)用戶(hù)體驗(yàn)動(dòng)效的十二項(xiàng)原則。
　　四種提升動(dòng)效可用性的方式
　　以下四種方式，是提升用戶(hù)體驗(yàn)動(dòng)效可用性的核心：
　　可預期性
　　可預期性分為兩(liǎng)個(gè)方面 ，用戶(hù)如何看待對(duì)象是什麼，以及它是如何體現(xiàn)的。另一種說(shuō)法是，作為設(shè)計(jì)師，我們希望最大限度地縮小用戶(hù)期望與他們實(shí)際體驗(yàn)之間的差距。
　　連續(xù)性
　　連續(xù)性是指用戶(hù)流程的順暢與用戶(hù)體驗(yàn)的流暢要一致。連續(xù)性包括場(chǎng)景/頁(yè)面內(nèi)、場(chǎng)景/頁(yè)面之間的連續(xù)與流暢。
　　敘述性
　　敘述性是用戶(hù)體驗(yàn)中事件的線(xiàn )性進(jìn)展，導(dǎo )致時(shí)間/空間框架。這可以被認(rèn)為是在整個(gè)用戶(hù)體驗(yàn)中連接在一起的一系列謹(jǐn)慎的時(shí)刻和事件。
　　關(guān)聯(lián)性
　　關(guān)係是指界面對(duì)象之間的空間、時(shí)間的層次表示，指導(dǎo )用戶(hù)理解和決策。
　　原理，風(fēng)格，屬性和價(jià)值觀(guān)
　　我們可以想像一個(gè)層級(jí)結(jié)構(gòu )，頂部是原理，中間是風(fēng)格，下面是屬性，底部是值。
　　原理是一切動(dòng)效的前提和規(guī)則，通過(guò)原理能產(chǎn)生許多不同的風(fēng)格。風(fēng)格可以被認(rèn)為是原理之間的組合。屬性是要創(chuàng)建動(dòng)效對(duì)象的特定參數(shù)。包括位置、不透明度、比例、旋轉(zhuǎn)、錨點(diǎn)、顏色、形狀等。值是時(shí)間軸上的實(shí)際數(shù)字屬性值，用於實(shí)現(xiàn)動(dòng)效的關(guān)鍵因素。
　　用戶(hù)體驗(yàn)的12條原理
　　時(shí)機(jī)控制：緩動(dòng)和偏移與延遲
　　對(duì)象關(guān)係：驅動(dòng)關(guān)聯(lián)
　　對(duì)象連續(xù)性：轉(zhuǎn)型、數(shù)值變化、遮罩、疊加、克隆
　　時(shí)間軸：視差
　　空間的連續(xù)性：景深、空間維度、移動(dòng)變焦
　　原則1：緩動(dòng)
　　當(dāng)交互事件發(fā)生時(shí)，對(duì)象行為需與用戶(hù)期望一致。
　　所有具有時(shí)間行為的運(yùn)動(dòng)都需要緩動(dòng)（無(wú)論是實(shí)時(shí)還是非實(shí)時(shí)的交互）。緩動(dòng)可以讓運(yùn)動(dòng)更自然，並且使動(dòng)效有更強(qiáng)的連續(xù)性，更能滿(mǎn)足用戶(hù)的期望。
　　動(dòng)效運(yùn)動(dòng)時(shí)接近於勻速運(yùn)動(dòng)的，這種動(dòng)畫顯的機(jī)械且不真實(shí)。圖二是模擬了橡皮筋、小球落地的運(yùn)動(dòng)，這個(gè)動(dòng)效的特點(diǎn)是有彈性，也叫彈性運(yùn)動(dòng)。作為設(shè)計(jì)師，除了美學(xué)之外，我們還需要關(guān)注可用性，哪個(gè)例子更能支持你的動(dòng)效作品？
　　緩動(dòng)是存在在自然界中的，假設(shè)把緩動(dòng)的程度想像成一個(gè)“階梯”，那麼其中超出用戶(hù)預期的緩動(dòng)效果體驗(yàn)較差，是不可用的。將用戶(hù)體驗(yàn)動(dòng)效與用戶(hù)行為無(wú)縫連接，這才是一件合理可用的事情，因為它不會(huì)影響用戶(hù)的注意力。線(xiàn )性運(yùn)動(dòng)顯然是過(guò)於明顯的，感覺像是不完整的效果，容易分散用戶(hù)的注意力。在考慮動(dòng)效的緩動(dòng)時(shí)，要先想想它在現(xiàn)實(shí)世界中的運(yùn)動(dòng)規(guī)律。
　　動(dòng)效與用戶(hù)行為完全無(wú)縫連接才是最好的效果麼？這邊舉一個(gè)相矛盾的例子，它與用戶(hù)行為也不是無(wú)縫的，但它是經(jīng)過(guò)設(shè)計(jì)過(guò)的。用戶(hù)可以注意到運(yùn)動(dòng)對(duì)象是彈跳的進(jìn)入的，這也是超出用戶(hù)的預期，但比線(xiàn )性動(dòng)效要好多了。
　　緩動(dòng)會(huì)對(duì)可用性造成糟糕的影響嗎？答案是肯定的。我們要避免出現(xiàn)以下的情況：時(shí)間太慢或太快，會(huì)打破用戶(hù)的預期，造成注意力的分散；同樣如果緩動(dòng)效果與整體的體驗(yàn)不一致，也會(huì)產(chǎn)生負(fù)面的影響。這裡所展示的只是很小一部分，設(shè)計(jì)師可以在項(xiàng)目中創(chuàng)建無(wú)數(shù)的“緩動(dòng)”效果，不同場(chǎng)景的緩動(dòng)都會(huì)帶來(lái)不同的視覺效果，給用戶(hù)帶來(lái)的體驗(yàn)也是不同的。切記，在任何時(shí)候，都不要忘記緩動(dòng)的作用！
　　原則2：偏移與延遲
　　頁(yè)面加入新元素或新場(chǎng)景進(jìn)入時(shí)的層級(jí)關(guān)係
　　這個(gè)原理它可以很明確的告訴用戶(hù)界面中元素的關(guān)係。頂部的兩(liǎng)個(gè)矩形是組合在一起的，與最下面的矩形是分開(kāi)的。我們可以把上面的組理解成標(biāo)題和副標(biāo)題，下面的是正文。這種方式同樣也適用於其他的頁(yè)面。在用戶(hù)接觸這些對(duì)象之前，設(shè)計(jì)師已經(jīng)用偏移與延遲的設(shè)計(jì)原則，將信息規(guī)類(lèi)好，便於用戶(hù)有效的識別。
　　在這個(gè)案例中，上面的按鈕和文字是一起出現(xiàn)的，相當(dāng)於一個(gè)組合。他們出現(xiàn)的速度比下面兩(liǎng)個(gè)小圖標(biāo)要快一些。最後一頁(yè)，文字和按鈕是一個(gè)整體，出現(xiàn)的速度比圖標(biāo)要慢一些。用這種方式就能拉開(kāi)了信息層級(jí)，讓動(dòng)效更加豐富。
　　原則3:驅動(dòng)關(guān)聯(lián)
　　多個(gè)對(duì)象交互運(yùn)動(dòng)時(shí)的空間關(guān)係。
　　驅動(dòng)關(guān)聯(lián)是非常重要的原則。上圖中，頂部元素與底部的元素在“比例”與“位置”的屬性上是關(guān)聯(lián)在一起，這種關(guān)聯(lián)與繼承關(guān)係，可以增強(qiáng)動(dòng)效的可用性。界面中元素的屬性包括：比例、不透明度、位置、旋轉(zhuǎn)、形狀、顏色等，這些屬性中的任何屬性都可以相互關(guān)聯(lián)，為用戶(hù)提供更好的交互體驗(yàn)。
　　圖片向左滑動(dòng)和向右滑動(dòng)是不同的效果，同時(shí)滑動(dòng)後背景也是跟著變的。驅動(dòng)關(guān)聯(lián)原理在做即時(shí)交互時(shí)能發(fā)揮出最好的效果。因為用戶(hù)通過(guò)驅動(dòng)關(guān)聯(lián)能感受到界面元素的直接變化，設(shè)計(jì)師可以通過(guò)動(dòng)效即時(shí)告訴用戶(hù)元素之間的關(guān)聯(lián)。
　　驅動(dòng)關(guān)聯(lián)的動(dòng)效分為3種形式，上面兩(liǎng)種屬於“直接繼承”，除此之外還有“延遲繼承和“逆向繼承”
　　原則4. 轉(zhuǎn)型
　　當(dāng)對(duì)象發(fā)生變化時(shí)，創(chuàng)建連續(xù)的敘事流程。
　　形態(tài)變化是很容易被識別的效果。如下圖用戶(hù)可以輕易的注意到“確認(rèn)提交”的按鈕形態(tài)轉(zhuǎn)變成成圓形的進(jìn)度條，隨後在最終狀態(tài)變換(huàn)成確認(rèn)的圖標(biāo)。這種形態(tài)變換(huàn)非常容易吸引到用戶(hù)到注意力，並且可以描繪出一個(gè)完整的流程。
　　這種變換(huàn)是將用戶(hù)體驗(yàn)的不同狀態(tài)（“按鈕-進(jìn)度條-成功”三種狀態(tài)）無(wú)縫的銜接，最終產(chǎn)生用戶(hù)所期待的結(jié)果。用戶(hù)通過(guò)這些變換(huàn)可直觀(guān)的看到三種功能狀態(tài)，並最終達(dá)到目的。變換(huàn)原則可以將用戶(hù)體驗(yàn)中不同時(shí)刻的信息分解成節(jié)點(diǎn)，並且在幾個(gè)變換(huàn)的形態(tài)中無(wú)縫連接，完成一個(gè)完整的事件流程的傳遞。這樣連貫性的效果更容易被用戶(hù)的認(rèn)知所接受。
　　原則5. 數(shù)值變化
　　當(dāng)價(jià)值主體發(fā)生變化時(shí)，創(chuàng)造一種動(dòng)態(tài)和連續(xù)的敘事關(guān)係。
　　數(shù)字及文本這些元素本身的值是可以改變的，這一點(diǎn)概念相對(duì)而言沒有那麼顯而易見(jiàn)。因為，數(shù)字和文本的值變實(shí)在是太普遍了，以至於我們常常意識不到，也很少正確地評(píng)估他們對(duì)提升用戶(hù)體驗(yàn)的幫助。
　　那麼值變時(shí)的體驗(yàn)是怎樣的？如果說(shuō)文本的十二條動(dòng)效體驗(yàn)原則的核心是體驗(yàn)提升的機(jī)會(huì)點(diǎn)，那麼此處有3個(gè)機(jī)會(huì)點(diǎn)：向用戶(hù)表達(dá)數(shù)字背後的現(xiàn)實(shí)含義、溝通介質(zhì)以及值的動(dòng)態(tài)變化。
　　如果在畫面加載動(dòng)效中，數(shù)字/文本沒有發(fā)生變化時(shí)，用戶(hù)會(huì)認(rèn)為整個(gè)元素看起來(lái)是靜止的狀態(tài)，它們看起來(lái)與“限速55km/h”的標(biāo)識牌的效果是一樣的　　
    很多數(shù)字/文本要反應(yīng)現(xiàn)實(shí)發(fā)生的事件，比如時(shí)間、收入、遊戲成績(jī)、商業(yè)指標(biāo)、健身數(shù)據(jù)等。如果我們通過(guò)動(dòng)態(tài)方式來(lái)表示這些內(nèi)容，可以更直接感受到這些變化的信息。如果用靜態(tài)的方式來(lái)處理變化的數(shù)據(jù)，則會(huì)失去深層次體驗(yàn)的機(jī)會(huì)。
　　動(dòng)態(tài)變化的數(shù)值/文本，可以給到用戶(hù)強(qiáng)有力的反饋，讓用戶(hù)更直接的感受到內(nèi)容的變化。然而當(dāng)數(shù)值/文本是靜態(tài)的時(shí)候，數(shù)值變化的關(guān)聯(lián)就會(huì)減少，用戶(hù)也很難感受到內(nèi)容背後的變量。
　　數(shù)值/文本變化原則，在實(shí)時(shí)與非實(shí)時(shí)的事件中都適用。在實(shí)時(shí)事件中，用戶(hù)可以通過(guò)對(duì)界面的交互改變數(shù)值/文本的內(nèi)容；在非實(shí)事件中，比如加載或轉(zhuǎn)換(huàn)，這些數(shù)值在沒有用戶(hù)參與的情況下發(fā)生改變。
         奇酷教育官網(wǎng)上每天都會(huì)更新大量UI培訓(xùn)技術(shù)資源，目的是為了適合不同的人群來(lái)學(xué)習(xí)。想了解更多或不懂的地方可以在線(xiàn )諮詢。