激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

場景UI交互動效設(shè)計(jì)法則與12種常見設(shè)計(jì)

發(fā)布時間：2024-03-08 17:13:51 瀏覽量：255次

場景UI 交互動效的首要目標(biāo)應(yīng)是支持和增強(qiáng)用戶在狀態(tài)間的轉(zhuǎn)化，在進(jìn)行場景UI 交互動效設(shè)計(jì)時，通常遵循著6個目的、4項(xiàng)作用以及5大應(yīng)用法則：

動效存在的6個目的：

1、吸引用戶注意力在指定區(qū)域

2、表現(xiàn)對象和用戶操作間的關(guān)系

3、維持多窗口或多狀態(tài)的上下文關(guān)系

4、提供持續(xù)性事件的認(rèn)知感

5、創(chuàng)造虛擬空間引導(dǎo)用戶在狀態(tài)和功能間轉(zhuǎn)化

6、創(chuàng)造沉浸感和趣味性


場景UI 的4項(xiàng)作用：

1、支持微交互

2、顯示運(yùn)動過程

3、解釋

4、裝飾

動效具備描述空間關(guān)系，功能，富有美感和流動性的目標(biāo)。動效顯示了 APP 是如何組織的，動效時刻在提示、引導(dǎo)用戶：


1、引導(dǎo)窗口切換

2、提示用戶接下來發(fā)生的事

3、對象間的層級感和空間感

4、減緩用戶對等待事件的認(rèn)知

5、美感和個性化


在進(jìn)行產(chǎn)品設(shè)計(jì)時，動效設(shè)計(jì)應(yīng)遵循5大法則：


1.State

告訴用戶對象和窗口的狀態(tài)是如何變化的



當(dāng)界面中對象狀態(tài)需要發(fā)生變化時，可以用動效展示變化的過程，讓用戶更清楚的感知到該變化。相應(yīng)的，當(dāng)窗口發(fā)生變化時，可以用動效更清楚展示窗口是如何從一個狀態(tài)轉(zhuǎn)變到另一個狀態(tài)的。

2. Attention

吸引用戶注意力，告訴用戶做什么



當(dāng)你想讓用戶關(guān)注某一個區(qū)域，或執(zhí)行某一個操作時，可以通過動效吸引他們的注意力。當(dāng)用戶需要執(zhí)行操作時，注意 UI 和動效的結(jié)合要能告知用戶需要進(jìn)行的操作。

3. Feedback

告訴用戶操作和對象間的關(guān)系



當(dāng)用戶執(zhí)行了某一操作后，動效是一個非常好用的反饋機(jī)制。通過動效的適當(dāng)運(yùn)用，用戶可以清晰感知到自己操作的反饋，讓用戶知道自己做了什么。

4. Relief

緩解用戶對應(yīng)用處理速度的感知


當(dāng)應(yīng)用執(zhí)行一個長時間操作時，可以用動效緩解用戶對時間的感知，甚至創(chuàng)建一個假的動效效果（其實(shí)應(yīng)用并不用處理這么長時間）。當(dāng)下許多 APP 下拉時的加載動效運(yùn)用的便是該原理。對于用戶，他們關(guān)注的是感受到的速度，而不是應(yīng)用實(shí)際消耗的速度。

5. Individuation

讓產(chǎn)品更有趣和個性


為了讓產(chǎn)品更有趣味性，可以在某些場合適當(dāng)運(yùn)用動效創(chuàng)造一些讓人愉悅的動畫效果。兩點(diǎn)是筆者覺得需要注意的，一是動效時間要足夠短，二是動效要足夠流暢。

動效能夠有效描述物體之間的邏輯關(guān)系，同時通過視覺效果，可視化的描述用戶操作時候當(dāng)前的狀態(tài)，用戶可以很清晰的感受到物體與物體之間的位置或者層級關(guān)系。


在常見的動效設(shè)計(jì)案例中，有12種經(jīng)典動效設(shè)計(jì)：

1.滑動

信息列表會跟隨著用戶的交互手勢而動，然后卡片到相應(yīng)的位置上，保持整齊感，它屬于指向型動畫，物體的滑動取決于用戶是用那種手勢滑動的。它的作用就是通過指向型轉(zhuǎn)場，有效幫助用戶清理頁面層級的排列情況。


2.擴(kuò)大

頁面中的卡片會從縮略圖轉(zhuǎn)化為全屏視圖（一般這個卡片的中心點(diǎn)也會跟隨移動到屏幕的中央）。反向動效就是卡片從全屏視圖轉(zhuǎn)換為縮略圖。它的優(yōu)點(diǎn)是能清楚的告訴用戶點(diǎn)擊的地方被放大了。




3.最小化

頁面元素點(diǎn)擊之后縮小，然后移動到屏幕上相應(yīng)的位置，相反的動效就是擴(kuò)大，從縮略圖重新變?yōu)槿痢?/span>這樣做的好處是能夠清楚的告訴用戶，最小化的元素可以在哪里被找到，如果沒有動效引導(dǎo)，可能用戶需要花時間去尋找。


4.切換對象

當(dāng)前頁面移動到后面，新的頁面移動到前面，這樣能夠清楚解釋頁面之間是進(jìn)行切換的，不會顯得轉(zhuǎn)換的太突兀和莫名其妙。



5.展開推疊

堆疊在一起的元素被展開。能夠清楚的告訴用戶每個元素的排列情況，從哪里來到哪里去，也顯得更加有趣。


6.翻頁

當(dāng)用戶實(shí)施滑動手勢的時候，出現(xiàn)像現(xiàn)實(shí)生活中翻頁一般的效果。真正動效轉(zhuǎn)場也能夠清晰的展現(xiàn)列表層級的信息架構(gòu)，并且模仿現(xiàn)實(shí)生活中的動效更加富有情感。



7.添加到列表

新的元素加入到原有的列表中，舊的元素被推開而不是替換，從而有現(xiàn)實(shí)中騰出位置的感覺，這種轉(zhuǎn)場效果能夠清楚的展現(xiàn)列表重新排列的過程，讓用戶知道新舊信息的位置，不會產(chǎn)生迷惑。

8.導(dǎo)航標(biāo)簽轉(zhuǎn)換

根據(jù)內(nèi)容的轉(zhuǎn)換，按鈕相應(yīng)的在視覺上做出改變，而標(biāo)題是隨著內(nèi)容移動而改變的，這樣能夠清晰的展示標(biāo)簽和內(nèi)容之間的從屬關(guān)系，讓用戶能夠清晰理解頁面之間的架構(gòu)。


9.融合

元素會根據(jù)用戶的點(diǎn)擊交互而分離或者是結(jié)合，用戶可以感受到元素與元素之間的關(guān)聯(lián)，比起直接切換，顯然用融合動畫更加有趣。



10.滾動

根據(jù)用戶的手勢進(jìn)行滾動操作，非常使用與列表信息的查看。這個交互方式是我們用的最頻繁的，我們也可以加入一些動效使這個交互更加的有趣和豐富。


11.平移

當(dāng)一張圖片在我們有限的屏幕里沒有辦法看完的時候，會使用這樣的效果。除了放大效果，這樣的平移還可以加上動效配合一些功能使用。




12.保存指示器

用戶一旦進(jìn)行保存、下載某個物體，物體會復(fù)制一份，同時縮小、移動到保存指示器中。這樣可以提示用戶下載或者是收藏的內(nèi)容在哪里可以找到，能夠告訴用戶對象已經(jīng)被添加。

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定