<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 網(wǎng)站動(dòng)畫(huà)怎么做?

          2023-1-5    濤濤

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

          Apple One



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

          iCloud


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

          Home app



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

          Apple Pay



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

          Apple TV



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


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



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

          Apple Wallet



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



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



          滑到頁(yè)面最底部,四張彩色卡片又逐漸插到錢(qián)包里,最后再?gòu)?qiáng)調(diào)用戶(hù)去使用。

          iPhone14

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

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

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

          iPhoneSE

          產(chǎn)品旋轉(zhuǎn)運(yùn)動(dòng)最后合并成一個(gè)由大變小,最后出現(xiàn)價(jià)格,強(qiáng)調(diào)改產(chǎn)品很實(shí)惠。

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

          電池圖標(biāo)與賣(mài)點(diǎn)一起進(jìn)行充電動(dòng)畫(huà),將賣(mài)點(diǎn)順其自然的表達(dá)出來(lái)。

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

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

          水花下落被手機(jī)彈開(kāi),直觀的告訴用戶(hù)它是防水的。

          iPhone14Pro

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

          產(chǎn)品說(shuō)明內(nèi)容使用新款手機(jī)墻紙進(jìn)行漸變顯示,加強(qiáng)了用戶(hù)對(duì)新款產(chǎn)品的感知。

          運(yùn)用視差,營(yíng)造空間感,手機(jī)和里面的內(nèi)容先是很大,并且展示第一段說(shuō)明內(nèi)容;隨著鼠標(biāo)往下滑,手機(jī)縮小屏幕內(nèi)容變化,營(yíng)造了一個(gè)真實(shí)的場(chǎng)景畫(huà)面,來(lái)強(qiáng)化新功能的賣(mài)點(diǎn)。

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

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

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

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

          MacbookPro

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

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

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

          Imac

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

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

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

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

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

          Mac Studio

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

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

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

          MacbookAir

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

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

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

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

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

          總結(jié):

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

          具體方法如下:

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

          2、讓產(chǎn)品自己說(shuō)話,善于利用產(chǎn)品的不同角度、運(yùn)動(dòng)方式強(qiáng)化產(chǎn)品功能特征

          3、不做無(wú)用動(dòng)畫(huà),讓每一個(gè)動(dòng)畫(huà)表達(dá)明確的意圖,不要讓用戶(hù)覺(jué)得它只是在動(dòng)

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

          思考:

          最后我們?cè)囅胍幌拢绻W(wǎng)站中的動(dòng)畫(huà)內(nèi)容全部變成靜態(tài),那會(huì)帶來(lái)什么樣的后果

          1、內(nèi)容會(huì)變得枯燥,賣(mài)點(diǎn)得不到強(qiáng)化,用戶(hù)購(gòu)買(mǎi)欲下降

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

          3、內(nèi)容太多占空,原本一個(gè)動(dòng)畫(huà)就能說(shuō)明的內(nèi)容,非要寫(xiě)大篇文字


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

          作者:360uxc    來(lái)源:站酷


          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(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ì)m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)
          UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司   藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
          希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。 

          作者:土木君    來(lái)源:站酷


          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(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ì)m.sdgs6788.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)
          UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司   著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。                           

          日歷

          鏈接

          個(gè)人資料

          存檔

          亚洲美日韩Av中文字幕无码久久久妻妇| 久久精品国产99久久丝袜| 久久久精品人妻无码专区不卡| 久久丝袜精品中文字幕| 伊人久久五月天| 久久久久久久亚洲Av无码| 一本久久久久久久| 国内精品久久久久久久久电影网| 丰满少妇人妻久久久久久4| 久久精品无码一区二区三区免费 | 国内精品久久久久久久涩爱| 久久笫一福利免费导航 | AV无码久久久久不卡蜜桃| 99久久婷婷国产一区二区| 久久强奷乱码老熟女网站| 精品熟女少妇aⅴ免费久久| 久久久久久久久久久| 香蕉久久夜色精品国产小说| 亚洲国产精品无码久久久不卡| 亚洲午夜久久影院| 精品999久久久久久中文字幕| 午夜久久久久久禁播电影| 国产综合精品久久亚洲| 久久精品国产亚洲综合色| 久久99国产精品尤物| 亚洲综合日韩久久成人AV| 亚洲综合久久久| 亚洲欧美另类日本久久国产真实乱对白 | 欧美粉嫩小泬久久久久久久| 中文字幕成人精品久久不卡| 性色欲网站人妻丰满中文久久不卡| 久久综合亚洲色HEZYO社区| 久久国产成人| 久久伊人精品一区二区三区| 国产aⅴ激情无码久久| 久久亚洲精品无码aⅴ大香| 亚洲综合伊人久久大杳蕉| 少妇高潮惨叫久久久久久| 亚洲国产精品无码久久久秋霞2| 国产精品久久久久蜜芽| 看久久久久久a级毛片|