2023-1-5 資深UI設(shè)計者
Apple One里面有6款不同類型的應(yīng)用捆綁在一起，頁面開篇這6款應(yīng)用圖標(biāo)橫向平鋪，隨后依次翻轉(zhuǎn)，接著Apple One也翻轉(zhuǎn)出來，向用戶強(qiáng)調(diào)它們被包含在該產(chǎn)品里。
品牌圖標(biāo)演化出多種圓形內(nèi)容，內(nèi)容還會不斷變化切換，最后又融合成品牌圖標(biāo)，簡單明了直觀告訴用戶這個功能可以解決用戶哪些問題。
開篇在淺黃色背景上告訴用戶智能家居應(yīng)用被重新設(shè)計，隨后不斷加深的黃色房屋造型逐漸由大變小疊加起來組成了Home app的圖標(biāo)，引出介紹內(nèi)容；通過放大品牌情感溫度從而向用戶傳達(dá)品牌理念。
為了讓更多的人使用Apple Pay，蘋果向用戶展示了真實(shí)的使用過程，降低認(rèn)知成本，讓用戶更容易接受并使用。
用全屏視頻內(nèi)容刺激用戶感官，然后內(nèi)容逐漸縮放到電視內(nèi)，一開始就把試聽體驗(yàn)注入到了用戶腦海中。
背景顏色及內(nèi)容伴隨電視中的視頻一同切換，讓用戶明確感知產(chǎn)品能做哪些內(nèi)容。
特寫展示遙控器，隨著遙控器角度變化，內(nèi)容也跟著變化，就像有位銷售拿著產(chǎn)品在你面前，詳細(xì)為你講解每一個按鍵的功能。
蘋果錢包圖標(biāo)及文字逐漸放大向下移動，并將文字頂出屏幕以外；整體接著放大，錢包底子繼續(xù)下移消失，只留下錢包內(nèi)的彩色卡片，說明文字上升出現(xiàn)。
隨著頁面往下，藍(lán)色卡片向上移動，卡片內(nèi)文字漸顯，頁面整體變成藍(lán)色，蘋果巧妙的將圖標(biāo)元素與賣點(diǎn)內(nèi)容結(jié)合，并通過不同顏色來區(qū)分不同內(nèi)容。
滑到頁面最底部，四張彩色卡片又逐漸插到錢包里，最后再強(qiáng)調(diào)用戶去使用。
賣點(diǎn)先后出現(xiàn)，層層遞進(jìn)，隨后產(chǎn)品被新功能及核心特點(diǎn)彈開， 將產(chǎn)品大、有多大、續(xù)航強(qiáng)以及新功能先后映射到了消費(fèi)者腦海里。
產(chǎn)品用廣角的視角依次出現(xiàn)，一方面展示產(chǎn)品顏色規(guī)格、另一方面暗示產(chǎn)品屏幕大。
Plus和電池一同進(jìn)行充電動畫，僅僅一個關(guān)鍵詞和一個圖標(biāo)，就形象的描述了電池容量大的事實(shí)，緊接著更加具體的參數(shù)逐一顯示，強(qiáng)化究竟有多大。
產(chǎn)品旋轉(zhuǎn)運(yùn)動最后合并成一個由大變小，最后出現(xiàn)價格，強(qiáng)調(diào)改產(chǎn)品很實(shí)惠。
手機(jī)旋轉(zhuǎn)放大，原來的桌面壁紙變成了產(chǎn)品賣點(diǎn)的背景，將產(chǎn)品和賣點(diǎn)順滑的聯(lián)系在一起。
電池圖標(biāo)與賣點(diǎn)一起進(jìn)行充電動畫，將賣點(diǎn)順其自然的表達(dá)出來。
讓每一句文案絲滑的連接出現(xiàn)，讓用戶能夠感知出產(chǎn)品低延遲的優(yōu)點(diǎn)，接著產(chǎn)品側(cè)影出現(xiàn)將之前內(nèi)容擦除，引出處理器的強(qiáng)大。
就如賣點(diǎn)所說，產(chǎn)品很貼心的前后為你旋轉(zhuǎn)展示它的面板，讓用戶看的真真切切。
水花下落被手機(jī)彈開，直觀的告訴用戶它是防水的。
漆黑的背景寫著14Pro的標(biāo)題，隨后標(biāo)題消失，同時產(chǎn)品從無限大縮小，看完這個動畫才發(fā)現(xiàn)，原來之前漆黑背景是新款產(chǎn)品的靈動島，隨后靈動島展示了在不同場景下的狀態(tài)，吸引了用戶注意。
產(chǎn)品說明內(nèi)容使用新款手機(jī)墻紙進(jìn)行漸變顯示，加強(qiáng)了用戶對新款產(chǎn)品的感知。
運(yùn)用視差，營造空間感，手機(jī)和里面的內(nèi)容先是很大，并且展示第一段說明內(nèi)容；隨著鼠標(biāo)往下滑，手機(jī)縮小屏幕內(nèi)容變化，營造了一個真實(shí)的場景畫面，來強(qiáng)化新功能的賣點(diǎn)。
標(biāo)題不斷放大，文字中間的圓逐漸演變成一個圓角矩形，隨后帶出靈動島功能動畫，用戶從頭到尾都沉浸在蘋果編排的情節(jié)中，用戶喜歡了解新功能也就順理成章了。
內(nèi)容往下看，箭頭按鈕從左向右滑動，顯示查看詳細(xì)內(nèi)容的入口，引導(dǎo)用戶點(diǎn)擊查看，這樣做沒有哪位用戶會拒絕自己的好奇心點(diǎn)進(jìn)去看看。
最開始只有大標(biāo)題和一個科技感的芯片，隨著頁面下滑，詳細(xì)內(nèi)容顯現(xiàn)，芯片伴隨著分層鏡頭元素逐漸組裝起來，展現(xiàn)出了產(chǎn)品的科技與精密。
手機(jī)背部攝像頭用特寫鏡頭伴隨機(jī)身從平視到俯視的角度變化，將用戶視線引到攝像頭上，隨后顯示說明文案強(qiáng)化產(chǎn)品宣傳。
開篇全屏出現(xiàn)一朵具有科技感的3d花朵收攏綻放的視頻，隨后鏡頭后推，2臺產(chǎn)品旋轉(zhuǎn)展開，呈現(xiàn)出一個展翅翱翔的造型，傳達(dá)出產(chǎn)品性能強(qiáng)勁展翅高飛的勢能。
處于合起的筆記本漸漸被打開，里面播放著三維動畫界面，暗示用戶它正在處理三維任務(wù)，隨后旋轉(zhuǎn)出2臺電腦，關(guān)于電腦的核心參數(shù)被顯示出來，告訴用戶具體哪些性能有了提升。
電腦屏幕做爆炸圖動畫處理，形象展示內(nèi)部結(jié)構(gòu)，吸引用戶關(guān)注產(chǎn)品特點(diǎn)內(nèi)容。
多臺不同顏色的電腦旋轉(zhuǎn)排列，鏡頭不斷變換角度，最后依次排在一起用側(cè)視圖來喚出標(biāo)題，在營造出歡快的氛圍的同時，還體現(xiàn)出產(chǎn)品多彩的特點(diǎn)。
顏色文案內(nèi)容不斷切換，電腦變換不同組合方式輪番切換展示，接著營造歡快氛圍。
體現(xiàn)電腦薄的文案放大顯示，隨著頁面往下，文字縮小，逐漸被電腦側(cè)邊遮住，用動態(tài)對比的方式讓用戶感受到電腦的厚度很薄，再往下，屏幕微抬，搭配關(guān)于屏幕旋轉(zhuǎn)角度的賣點(diǎn)。
電腦切換顏色體現(xiàn)內(nèi)容發(fā)生變化，旋轉(zhuǎn)角度可以全方位看清新版插口的位置以及體現(xiàn)更方便的使用。
支持多方應(yīng)用的文案在應(yīng)用圖標(biāo)的包圍中下落，下落的過程中同步顯示的應(yīng)用可以體現(xiàn)支持的應(yīng)用多，最后和詳細(xì)介紹文案碰撞，可以很好的銜接用戶的閱讀視線。
產(chǎn)品逐漸被放大，鏡頭進(jìn)入內(nèi)部，里面迸發(fā)碰撞的液體體現(xiàn)產(chǎn)品內(nèi)部有著強(qiáng)勁動力。
承接上一個內(nèi)容，體現(xiàn)剛才那么強(qiáng)大的動力的源泉就在你眼前，去選一個吧，伴隨著芯片的光影運(yùn)動，讓你覺得這是一個具有魔法般的嶄新器物。
深入產(chǎn)品內(nèi)部，不同顏色的光束旋轉(zhuǎn)流動，用具象的形式體現(xiàn)產(chǎn)品在散熱方面的工作原理以及性能是多么強(qiáng)。
產(chǎn)品快速運(yùn)動對文字造成拖尾效果，體現(xiàn)產(chǎn)品的輕，以及速度快。
文案內(nèi)容居于2臺電腦狹小縫隙之間，有一種壓迫感，體現(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臺電腦屏幕旋轉(zhuǎn)變化，對比出2者間攝像頭位置做了更新。
產(chǎn)品旋轉(zhuǎn)，展現(xiàn)輕薄側(cè)面，搭配攜帶更少，攜帶更多的文案，讓消費(fèi)者更加肯定它的輕薄。
看了蘋果公司網(wǎng)站中的動畫，不難看出，動畫的核心功能就是用關(guān)聯(lián)的方式強(qiáng)調(diào)、強(qiáng)化賣點(diǎn)
具體方法如下：
1、產(chǎn)品如果有多種顏色，那就盡量在畫面中一起體現(xiàn)
2、讓產(chǎn)品自己說話，善于利用產(chǎn)品的不同角度、運(yùn)動方式強(qiáng)化產(chǎn)品功能特征
3、不做無用動畫，讓每一個動畫表達(dá)明確的意圖，不要讓用戶覺得它只是在動
4、把控文案展現(xiàn)在用戶眼前的先后順序，用故事把它們串聯(lián)在一起，從而掌控用戶閱讀節(jié)奏
最后我們試想一下，如果網(wǎng)站中的動畫內(nèi)容全部變成靜態(tài)，那會帶來什么樣的后果
1、內(nèi)容會變得枯燥，賣點(diǎn)得不到強(qiáng)化，用戶購買欲下降
2、靜態(tài)內(nèi)容很難描述一些抽象的功能，例如：如何體現(xiàn)產(chǎn)品散熱很好，音質(zhì)怎么個好法
3、內(nèi)容太多占空，原本一個動畫就能說明的內(nèi)容，非要寫大篇文字
藍(lán)藍(lán)設(shè)計的小編 http://paul-jarrel.com