偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

Material Design之有意義的轉(zhuǎn)場動畫和打動用戶的細節(jié)

移動開發(fā) Android
對于普通用戶來說,是關(guān)注一個應(yīng)用本身、還是更關(guān)注這個應(yīng)用的元素從A點到B點轉(zhuǎn)變的過程,這種選擇往往有些難。謹慎編排的動畫可以在有多步操作的 過程中有效地引導(dǎo)用戶的注意力;在版面變化或元素重組時避免造成困惑;提高用戶體驗的整體美感。動畫設(shè)計不僅應(yīng)當(dāng)優(yōu)美,更應(yīng)當(dāng)服務(wù)于功能。

對于普通用戶來說,是關(guān)注一個應(yīng)用本身、還是更關(guān)注這個應(yīng)用的元素從A點到B點轉(zhuǎn)變的過程,這種選擇往往有些難。謹慎編排的動畫可以在有多步操作的 過程中有效地引導(dǎo)用戶的注意力;在版面變化或元素重組時避免造成困惑;提高用戶體驗的整體美感。動畫設(shè)計不僅應(yīng)當(dāng)優(yōu)美,更應(yīng)當(dāng)服務(wù)于功能。

視覺連貫性

在兩個視覺效果不同的頁面之間的轉(zhuǎn)場應(yīng)該平滑、輕快,更重要的是使用戶感覺清晰而非困惑。一個好的轉(zhuǎn)場可以四兩撥千斤,讓用戶清楚地了解他們應(yīng)該關(guān)注哪里。每一個轉(zhuǎn)場應(yīng)該包含以下三類元素:

  • 新入元素(Incoming elements): 完全新的元素需要有新手引導(dǎo),從已有場景中轉(zhuǎn)變而來的元素需要重新被識別
  • 淡出元素(Outgoing elements):與當(dāng)前場景不相關(guān)的元素應(yīng)當(dāng)以恰當(dāng)?shù)姆绞奖灰瞥?/li>
  • 通用元素(Shared elements):指那些從轉(zhuǎn)場開始到結(jié)束都沒有發(fā)生變化的元素??梢允羌毼⒅羻蝹€圖標(biāo),也可以是顯著到占據(jù)屏幕的圖片展示

思考點

在設(shè)計動畫的時候,可以從以下幾點開始考慮:

  • 用戶的注意力應(yīng)該被如何引導(dǎo)?什么元素和動畫能輔助實現(xiàn)這個目標(biāo)?新入元素、淡出元素和通用元素在這個轉(zhuǎn)場中應(yīng)該怎樣被強調(diào)或弱化?
  • 在設(shè)計場景時考慮到轉(zhuǎn)場,并且盡量通過色彩和通用元素在不同場景轉(zhuǎn)化間建立視覺聯(lián)系
  • 審慎地添加動畫,思考如何移動一個特定的元素,從而使這個轉(zhuǎn)場更明晰并使人愉悅

恰當(dāng)?shù)臅r候使用紙片疊加方式。一般情況下,新入的紙片元素應(yīng)當(dāng)滑入視線。但字體元素(ink element)除外,他們應(yīng)該以淡入的方式出現(xiàn)。不提倡全屏的淡入淡出,但也比瞬間切屏要好。

避免瞬間切屏(hard cut)。瞬間切屏過于突兀,并且會導(dǎo)致用戶很難理解這個轉(zhuǎn)場。

有層次的時序

在建立轉(zhuǎn)場的時候,對于元素移動的順序和時機都要詳加考慮。要確保這個動畫能使信息的展示具有層次感。也就是說,它能引導(dǎo)用戶的關(guān)注力,將最重要的內(nèi)容傳遞給用戶。

然而,這并不是說最重要的東西先動,最不重要的東西就后動。元素轉(zhuǎn)場的時序要平滑并且避免脫節(jié)的感覺。

用遞次的動畫引導(dǎo)用戶注意力。

所有元素同時變動的話會使得重要的內(nèi)容無法突出展示。如果所有元素都同樣重要(你確定會發(fā)生這種情況的話),可以考慮采用更高層級的動畫,使這些元素成組的顯示。

連貫的編排

由于轉(zhuǎn)場元素在整屏范圍里移動,他們需要以協(xié)調(diào)的方式運動。起到引導(dǎo)視覺焦點作用的元素,其整個移動過程都要有意義、有秩序。隨機的動畫會分散注意 力。一個編排好的應(yīng)用也能夠給用戶提供學(xué)習(xí)的時機。如果轉(zhuǎn)場的所有元素都很好的協(xié)調(diào),用戶對于這個應(yīng)用的理解也會增強。他們「理解」這個應(yīng)用, 不會因為動畫而無所適從。

***實踐

  • 除非這個動畫是被限制在某一個軸上或者是與其它元素一起從/往某個點協(xié)調(diào)的移動,否則盡量避免線性路徑
  • 確保元素移動的方向在整個轉(zhuǎn)場過程中都是協(xié)調(diào)一致的。避免沖突的動作和重疊的運動路徑
  • 思考更深層的含義:是什么在什么的下方運動,為什么會這樣?
  • 如果所有運動的元素都在屏幕上按路徑移動,看起來是否優(yōu)美整齊? 這是否能讓用戶清楚地知道應(yīng)該看哪里?
  • 通過新舊元素的連貫性的動畫來表現(xiàn)空間上的關(guān)系
  • 通過和諧一致的動畫引導(dǎo)用戶的注意力
  • 避免混亂不連貫的動畫,元素以隨機方向離開或進入等會造成用戶的困惑

打動用戶的細節(jié)

 

動畫可以存在于應(yīng)用程序的所有組件和擴展中,從細小的圖標(biāo)到核心的場景轉(zhuǎn)換和動作,所有元素共同構(gòu)建出一個擁有無縫體驗、美觀且功能強大的應(yīng)用。

動畫最基本的使用場景是過度效果,但哪怕是最基本的動畫,只要恰到好處并足夠出色,同樣能打動用戶。例如一個菜單圖標(biāo)變成一個箭頭或者是播放控制按鈕,這種服務(wù)間的無縫切換不僅僅能讓用戶感知,更是讓***的細節(jié)和精湛的設(shè)計充滿你的應(yīng)用。用戶真的會感受到這些小細節(jié)。

原文:Meaningful Transitions 翻譯:Jingsha 校對:阿九(Siton)

責(zé)任編輯:閆佳明 來源: design.1sters
相關(guān)推薦

2013-11-06 11:29:29

用戶體驗傅盛

2017-02-14 13:35:15

AndroidMaterial De動畫

2021-02-19 09:45:50

Python面向?qū)ο?/a>代碼

2021-03-04 13:25:22

Python面向?qū)ο?/a>代碼

2021-04-06 11:21:50

Python面向?qū)ο?/a>代碼

2023-01-30 07:55:44

代碼過度設(shè)計

2019-01-24 10:23:58

Web前端密碼加密

2015-04-23 16:21:23

2011-09-09 10:31:40

Xen虛擬化linux內(nèi)核

2022-02-28 22:52:56

混合云工具技術(shù)

2020-06-04 08:05:06

物聯(lián)網(wǎng)客戶見解IOT

2011-08-23 09:00:47

可用性五個九

2016-02-17 09:06:42

代碼注釋代碼規(guī)范

2022-09-30 09:24:10

思維辦公IT

2021-10-28 15:02:16

OpenHarmony微納衛(wèi)星

2016-04-13 10:52:12

2020-11-03 10:50:09

代碼

2021-05-21 10:33:37

數(shù)據(jù)中心數(shù)據(jù)存儲

2023-08-30 08:04:03

架構(gòu)前端應(yīng)用程序

2014-01-02 14:59:52

中顧保鏢私人定制
點贊
收藏

51CTO技術(shù)棧公眾號