超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

網(wǎng)站動畫怎么做?

2023-1-5    資深UI設(shè)計者

本文主要通過研究分析蘋果產(chǎn)品官網(wǎng)的動效案例,從而提升設(shè)計師在網(wǎng)站動畫設(shè)計中的能力。

Apple One



Apple One里面有6款不同類型的應(yīng)用捆綁在一起,頁面開篇這6款應(yīng)用圖標(biāo)橫向平鋪,隨后依次翻轉(zhuǎn),接著Apple One也翻轉(zhuǎn)出來,向用戶強調(diào)它們被包含在該產(chǎn)品里。

iCloud


品牌圖標(biāo)演化出多種圓形內(nèi)容,內(nèi)容還會不斷變化切換,最后又融合成品牌圖標(biāo),簡單明了直觀告訴用戶這個功能可以解決用戶哪些問題。

Home app



開篇在淺黃色背景上告訴用戶智能家居應(yīng)用被重新設(shè)計,隨后不斷加深的黃色房屋造型逐漸由大變小疊加起來組成了Home app的圖標(biāo),引出介紹內(nèi)容;通過放大品牌情感溫度從而向用戶傳達(dá)品牌理念。

Apple Pay



為了讓更多的人使用Apple Pay,蘋果向用戶展示了真實的使用過程,降低認(rèn)知成本,讓用戶更容易接受并使用。

Apple TV



用全屏視頻內(nèi)容刺激用戶感官,然后內(nèi)容逐漸縮放到電視內(nèi),一開始就把試聽體驗注入到了用戶腦海中。


背景顏色及內(nèi)容伴隨電視中的視頻一同切換,讓用戶明確感知產(chǎn)品能做哪些內(nèi)容。



特寫展示遙控器,隨著遙控器角度變化,內(nèi)容也跟著變化,就像有位銷售拿著產(chǎn)品在你面前,詳細(xì)為你講解每一個按鍵的功能。

Apple Wallet



蘋果錢包圖標(biāo)及文字逐漸放大向下移動,并將文字頂出屏幕以外;整體接著放大,錢包底子繼續(xù)下移消失,只留下錢包內(nèi)的彩色卡片,說明文字上升出現(xiàn)。



隨著頁面往下,藍(lán)色卡片向上移動,卡片內(nèi)文字漸顯,頁面整體變成藍(lán)色,蘋果巧妙的將圖標(biāo)元素與賣點內(nèi)容結(jié)合,并通過不同顏色來區(qū)分不同內(nèi)容。



滑到頁面最底部,四張彩色卡片又逐漸插到錢包里,最后再強調(diào)用戶去使用。

iPhone14

賣點先后出現(xiàn),層層遞進,隨后產(chǎn)品被新功能及核心特點彈開, 將產(chǎn)品大、有多大、續(xù)航強以及新功能先后映射到了消費者腦海里。

產(chǎn)品用廣角的視角依次出現(xiàn),一方面展示產(chǎn)品顏色規(guī)格、另一方面暗示產(chǎn)品屏幕大。

Plus和電池一同進行充電動畫,僅僅一個關(guān)鍵詞和一個圖標(biāo),就形象的描述了電池容量大的事實,緊接著更加具體的參數(shù)逐一顯示,強化究竟有多大。

iPhoneSE

產(chǎn)品旋轉(zhuǎn)運動最后合并成一個由大變小,最后出現(xiàn)價格,強調(diào)改產(chǎn)品很實惠。

手機旋轉(zhuǎn)放大,原來的桌面壁紙變成了產(chǎn)品賣點的背景,將產(chǎn)品和賣點順滑的聯(lián)系在一起。

電池圖標(biāo)與賣點一起進行充電動畫,將賣點順其自然的表達(dá)出來。

讓每一句文案絲滑的連接出現(xiàn),讓用戶能夠感知出產(chǎn)品低延遲的優(yōu)點,接著產(chǎn)品側(cè)影出現(xiàn)將之前內(nèi)容擦除,引出處理器的強大。

就如賣點所說,產(chǎn)品很貼心的前后為你旋轉(zhuǎn)展示它的面板,讓用戶看的真真切切。

水花下落被手機彈開,直觀的告訴用戶它是防水的。

iPhone14Pro

漆黑的背景寫著14Pro的標(biāo)題,隨后標(biāo)題消失,同時產(chǎn)品從無限大縮小,看完這個動畫才發(fā)現(xiàn),原來之前漆黑背景是新款產(chǎn)品的靈動島,隨后靈動島展示了在不同場景下的狀態(tài),吸引了用戶注意。

產(chǎn)品說明內(nèi)容使用新款手機墻紙進行漸變顯示,加強了用戶對新款產(chǎn)品的感知。

運用視差,營造空間感,手機和里面的內(nèi)容先是很大,并且展示第一段說明內(nèi)容;隨著鼠標(biāo)往下滑,手機縮小屏幕內(nèi)容變化,營造了一個真實的場景畫面,來強化新功能的賣點。

標(biāo)題不斷放大,文字中間的圓逐漸演變成一個圓角矩形,隨后帶出靈動島功能動畫,用戶從頭到尾都沉浸在蘋果編排的情節(jié)中,用戶喜歡了解新功能也就順理成章了。

內(nèi)容往下看,箭頭按鈕從左向右滑動,顯示查看詳細(xì)內(nèi)容的入口,引導(dǎo)用戶點擊查看,這樣做沒有哪位用戶會拒絕自己的好奇心點進去看看。

最開始只有大標(biāo)題和一個科技感的芯片,隨著頁面下滑,詳細(xì)內(nèi)容顯現(xiàn),芯片伴隨著分層鏡頭元素逐漸組裝起來,展現(xiàn)出了產(chǎn)品的科技與精密。

手機背部攝像頭用特寫鏡頭伴隨機身從平視到俯視的角度變化,將用戶視線引到攝像頭上,隨后顯示說明文案強化產(chǎn)品宣傳。

MacbookPro

開篇全屏出現(xiàn)一朵具有科技感的3d花朵收攏綻放的視頻,隨后鏡頭后推,2臺產(chǎn)品旋轉(zhuǎn)展開,呈現(xiàn)出一個展翅翱翔的造型,傳達(dá)出產(chǎn)品性能強勁展翅高飛的勢能。

處于合起的筆記本漸漸被打開,里面播放著三維動畫界面,暗示用戶它正在處理三維任務(wù),隨后旋轉(zhuǎn)出2臺電腦,關(guān)于電腦的核心參數(shù)被顯示出來,告訴用戶具體哪些性能有了提升。

電腦屏幕做爆炸圖動畫處理,形象展示內(nèi)部結(jié)構(gòu),吸引用戶關(guān)注產(chǎn)品特點內(nèi)容。

Imac

多臺不同顏色的電腦旋轉(zhuǎn)排列,鏡頭不斷變換角度,最后依次排在一起用側(cè)視圖來喚出標(biāo)題,在營造出歡快的氛圍的同時,還體現(xiàn)出產(chǎn)品多彩的特點。

顏色文案內(nèi)容不斷切換,電腦變換不同組合方式輪番切換展示,接著營造歡快氛圍。

體現(xiàn)電腦薄的文案放大顯示,隨著頁面往下,文字縮小,逐漸被電腦側(cè)邊遮住,用動態(tài)對比的方式讓用戶感受到電腦的厚度很薄,再往下,屏幕微抬,搭配關(guān)于屏幕旋轉(zhuǎn)角度的賣點。

電腦切換顏色體現(xiàn)內(nèi)容發(fā)生變化,旋轉(zhuǎn)角度可以全方位看清新版插口的位置以及體現(xiàn)更方便的使用。

支持多方應(yīng)用的文案在應(yīng)用圖標(biāo)的包圍中下落,下落的過程中同步顯示的應(yīng)用可以體現(xiàn)支持的應(yīng)用多,最后和詳細(xì)介紹文案碰撞,可以很好的銜接用戶的閱讀視線。

Mac Studio

產(chǎn)品逐漸被放大,鏡頭進入內(nèi)部,里面迸發(fā)碰撞的液體體現(xiàn)產(chǎn)品內(nèi)部有著強勁動力。

承接上一個內(nèi)容,體現(xiàn)剛才那么強大的動力的源泉就在你眼前,去選一個吧,伴隨著芯片的光影運動,讓你覺得這是一個具有魔法般的嶄新器物。

深入產(chǎn)品內(nèi)部,不同顏色的光束旋轉(zhuǎn)流動,用具象的形式體現(xiàn)產(chǎn)品在散熱方面的工作原理以及性能是多么強。

MacbookAir

產(chǎn)品快速運動對文字造成拖尾效果,體現(xiàn)產(chǎn)品的輕,以及速度快。

文案內(nèi)容居于2臺電腦狹小縫隙之間,有一種壓迫感,體現(xiàn)出新產(chǎn)品的實力很強大,緊接著M2芯片由大變小出現(xiàn),交代出產(chǎn)品之所以強大得益于芯片。

屏幕里的應(yīng)用在不停的變換,體現(xiàn)電腦在進行不同的應(yīng)用操作,隨后文字出現(xiàn),強調(diào)續(xù)航能力很高。

2臺電腦屏幕旋轉(zhuǎn)變化,對比出2者間攝像頭位置做了更新。

產(chǎn)品旋轉(zhuǎn),展現(xiàn)輕薄側(cè)面,搭配攜帶更少,攜帶更多的文案,讓消費者更加肯定它的輕薄。

總結(jié):

看了蘋果公司網(wǎng)站中的動畫,不難看出,動畫的核心功能就是用關(guān)聯(lián)的方式強調(diào)、強化賣點

具體方法如下:

1、產(chǎn)品如果有多種顏色,那就盡量在畫面中一起體現(xiàn)

2、讓產(chǎn)品自己說話,善于利用產(chǎn)品的不同角度、運動方式強化產(chǎn)品功能特征

3、不做無用動畫,讓每一個動畫表達(dá)明確的意圖,不要讓用戶覺得它只是在動

4、把控文案展現(xiàn)在用戶眼前的先后順序,用故事把它們串聯(lián)在一起,從而掌控用戶閱讀節(jié)奏

思考:

最后我們試想一下,如果網(wǎng)站中的動畫內(nèi)容全部變成靜態(tài),那會帶來什么樣的后果

1、內(nèi)容會變得枯燥,賣點得不到強化,用戶購買欲下降

2、靜態(tài)內(nèi)容很難描述一些抽象的功能,例如:如何體現(xiàn)產(chǎn)品散熱很好,音質(zhì)怎么個好法

3、內(nèi)容太多占空,原本一個動畫就能說明的內(nèi)容,非要寫大篇文字


作者:木土君藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。 

作者:360uxc    來源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司   藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。 

作者:土木君    來源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司   著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。                           

分享本文至:

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.miumiuwan.com

存檔