公主的腿间舌奴们np肉_国产在热线精品视频99公交_公主车上荫蒂添的好舒服_公侵犯人妻中文字慕一区二区_公么大龟弄得我好舒服秀_公交车+多人+高cH文章推荐_日本熟妇另类视频在线播放

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

2022-3-8    純純

一、為什么動(dòng)?

首先,為什么要?jiǎng)??可能你?huì)想到以下幾條理由:

  1. 這讓我的作品看起來(lái)很炫酷,碉堡了!
  2. 動(dòng)效會(huì)帶來(lái)流量,助我完成KPI!
  3. 別人都這么做了,我也得做!
  4. 編輯讓我這么干的!

呵呵,你要這么想就完了。

那么該如何衡量一個(gè)動(dòng)效是否應(yīng)該出現(xiàn)呢,我們認(rèn)為有幾個(gè)考核標(biāo)準(zhǔn):

1. 這個(gè)動(dòng)效是否會(huì)影響性能?

首先,這個(gè)動(dòng)效是否會(huì)影響性能?這個(gè)是最重要的,添加任何動(dòng)效前都要考慮是否會(huì)影響產(chǎn)品的性能,如果一個(gè)很酷炫的動(dòng)效會(huì)拖累性能,使體驗(yàn)變得卡頓不流暢,那么必須毫不猶豫的砍掉或簡(jiǎn)化。

例子:化身間諜

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

比如這個(gè)例子,這是一個(gè)穿越情景的過(guò)場(chǎng)動(dòng)畫(huà),隨著年份的倒轉(zhuǎn)背景出現(xiàn)各個(gè)歷史大事件,給人以歷歷在目的感覺(jué),設(shè)計(jì)師考慮到了多張圖片會(huì)出現(xiàn)卡頓的可能性,所以特意降低了每張圖的清晰度,因?yàn)閮?nèi)容本身就是老照片的風(fēng)格,所以這種降低畫(huà)質(zhì)的手法反而增強(qiáng)了畫(huà)面的真實(shí)感。

2. 這個(gè)動(dòng)效是否會(huì)提高產(chǎn)品的可用性?

任何動(dòng)效的出現(xiàn)都必須帶有明確的目的性,能夠解決用戶在使用過(guò)程中的困惑,而不是炫技。單純的炫技只會(huì)分散用戶的注意力,弱化內(nèi)容,變得適得其反。

例子:翻頁(yè)提示

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

比如這個(gè)上滑提示。不用解釋,用戶一看知道該做什么。動(dòng)效增加了產(chǎn)品的可用性,所以這樣的動(dòng)效是非常有意義的!

3. 這個(gè)動(dòng)效是否會(huì)給你的產(chǎn)品帶來(lái)獨(dú)特氣質(zhì)?

這里所說(shuō)的氣質(zhì)是動(dòng)效本身會(huì)有助于增強(qiáng)用戶對(duì)于產(chǎn)品的認(rèn)知和情緒帶入。一個(gè)相得益彰的動(dòng)效會(huì)為你的產(chǎn)品錦上添花,深化你的主題和功能,注意,一定是與主題相關(guān)的,牽強(qiáng)的搭配只會(huì)叫人覺(jué)得莫名其妙,毫無(wú)意義。

例子:人生四時(shí)

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

再看這個(gè)例子,人生四時(shí),四根火柴依次燃燒,慢慢燃盡,這種油盡燈枯的感覺(jué)很切合的體現(xiàn)了產(chǎn)品生老病死的主題。

4. 重新審視第一條,看你的動(dòng)效是否影響性能

所以,合理的動(dòng)效不應(yīng)是花拳繡腿,而應(yīng)該是解決問(wèn)題的手段。

二、哪里動(dòng)?

好,我們?cè)倏纯茨睦镄枰獎(jiǎng)有?,這里舉幾個(gè)例子:

1. 加載

首先是出現(xiàn)在加載環(huán)境,不管是網(wǎng)頁(yè)還是H5都不可避免的會(huì)出現(xiàn)讓用戶等待的情況,在等待的過(guò)程中為了讓用戶知道他的手機(jī)沒(méi)有死機(jī)以及網(wǎng)絡(luò)是通暢的,我們應(yīng)該在這個(gè)時(shí)候加入一些與主題相關(guān)的動(dòng)效來(lái)提醒他內(nèi)容正在加載中。

例子:化身間諜H5 loading

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

這是一個(gè)穿越類的H5,所以設(shè)計(jì)師在設(shè)計(jì)loading的時(shí)候選用了蟲(chóng)洞的理念,與內(nèi)容本身緊密貼合。

2. 轉(zhuǎn)場(chǎng)

第二個(gè)情景是轉(zhuǎn)場(chǎng)。具有意義的轉(zhuǎn)場(chǎng)會(huì)降低產(chǎn)品割裂感,我們看兩個(gè)例子就明白了。

例子:QQ會(huì)員觀影特權(quán)

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

這個(gè)例子里元素在默認(rèn)狀態(tài)下會(huì)做上下浮動(dòng)的效果,當(dāng)我們滑動(dòng)時(shí)候,元素很自然的做了一個(gè)出場(chǎng)入場(chǎng)的效果。很自然,沒(méi)有割裂感。對(duì)吧?

3. 頁(yè)面元素的互動(dòng)

也可以為網(wǎng)頁(yè)元素增加一些必要的動(dòng)效。

例子:好聲音第四季首頁(yè):

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

看下好聲音的專題頁(yè)面,在網(wǎng)頁(yè)上的能夠點(diǎn)擊的按鈕或者文字鏈,在鼠標(biāo)經(jīng)過(guò)時(shí)都有點(diǎn)變化,這個(gè)十分必要。因?yàn)楸砻嫔系淖兓瘯?huì)給用戶一種心理暗示,那就是點(diǎn)擊后也會(huì)有變化。

4. 心理需要

這里所說(shuō)的心理需求是指氣氛和情景的營(yíng)造,例如節(jié)日,游戲活動(dòng)等產(chǎn)品,是需要一些動(dòng)效去滿足用戶心理需求的。大家都知道在微信里輸入“生日快樂(lè)”是會(huì)掉下生日蛋糕的,這個(gè)動(dòng)效就比干巴巴的文字有趣多了。

例子:一封家書(shū)

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

一封家書(shū),注意看,背景有飄落的雪花,漫天大雪勾起思鄉(xiāng)情,對(duì)吧,合情合理,有情有義!

三、怎么動(dòng)?

好,說(shuō)完哪里動(dòng),我們現(xiàn)在看看怎么動(dòng)。

1. 基于真實(shí)形態(tài)的模擬

基于真實(shí)的動(dòng)畫(huà)會(huì)叫人看起來(lái)自然流暢,符合規(guī)律,比如物體運(yùn)動(dòng)時(shí)的加速度現(xiàn)象。

例子:Look

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

注意看這個(gè)筆畫(huà)的動(dòng)勢(shì),是有快有慢的,模擬了寫(xiě)字時(shí)起筆收筆的那種節(jié)奏感,所以看起來(lái)是自然真實(shí)的。

2. 人物動(dòng)作夸張化

在H5的設(shè)計(jì)中,經(jīng)常會(huì)出現(xiàn)各種各樣的人物形象,夸張的人物動(dòng)作會(huì)生動(dòng)你的形象,增加趣味性,給用戶以驚喜。

例子:巴菲特這一年

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

巴菲特老爺爺,動(dòng)作很親切。

3. 給元素賦予彈性

有彈性的物體會(huì)叫用戶覺(jué)得具有生命感和真實(shí)性,彈的程度取決于你對(duì)元素軟硬度的設(shè)定。

例子:拍個(gè)大頭鬼

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

三個(gè)小鬼一跳一跳,彈性賦予了他們頑強(qiáng)的生命力。

4. 蒙太奇

這是一種類似蒙太奇的手法,通過(guò)快速切換的畫(huà)面來(lái)形成一種奇妙后現(xiàn)代感覺(jué)。

例子:傳奇硬箱

不為動(dòng)而動(dòng)!聊聊動(dòng)態(tài)效果在體驗(yàn)設(shè)計(jì)中的應(yīng)用

炫酷了,節(jié)奏很快,提氣!

好,以上只是一些基本的動(dòng)效手法,在實(shí)際的應(yīng)用中其實(shí)有很多手段,在這里我建議大家可以去看看迪士尼和皮克斯的動(dòng)畫(huà),應(yīng)為動(dòng)畫(huà)本身是一種對(duì)于動(dòng)作行為高度概括的手段。雖然這些都是電影,但是他們使用的手段和遵循的理念是非常值得我們?nèi)W(xué)習(xí)和借鑒的。注意觀察這些大牛們的作品,你會(huì)發(fā)現(xiàn)他們的作品中充滿了走心的細(xì)節(jié)。

四、結(jié)語(yǔ):

簡(jiǎn)單來(lái)說(shuō),當(dāng)用戶打開(kāi)一個(gè)界面,注意力首先會(huì)被動(dòng)態(tài)的物體吸引,然后才會(huì)把注意力轉(zhuǎn)向顏色對(duì)比強(qiáng)的部分,最后才是形狀。這一過(guò)程是人在進(jìn)化過(guò)程中形成的本能反應(yīng),基本適用所有用戶。同時(shí)一個(gè)非常重要且容易被忽略的原則:用戶的注意力是有限的,而且越來(lái)越少。很可能在用戶注意到一段動(dòng)效之后,注意力和耐心已經(jīng)用盡,無(wú)法看到其他內(nèi)容就著急去下一個(gè)界面了。

所以,對(duì)于動(dòng)效這樣一個(gè)非常強(qiáng)勢(shì)的工具,一定要用在希望用戶注意的部分,并且認(rèn)真打磨。真正做到“不為動(dòng)而動(dòng)”。



文章來(lái)源:優(yōu)設(shè)   作者:程遠(yuǎn)


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔

黑山县| 沂水县| 黔东| 平塘县| 上饶市| 泸州市| 来安县| 肥乡县| 当阳市| 黔南| 五大连池市| 富裕县| 贡嘎县| 四子王旗| 天等县| 抚远县| 中方县| 武威市| 东台市| 湘潭县| 南投市| 尼勒克县| 德江县| 太保市| 田林县| 贡觉县| 阿克陶县| 阳山县| 黄平县| 黄石市| 阿坝县| 汉中市| 克什克腾旗| 沽源县| 卢龙县| 河东区| 威宁| 龙山县| 建瓯市| 土默特左旗| 安塞县|