2023-1-5 濤濤
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)品里。
品牌圖標(biāo)演化出多種圓形內(nèi)容,內(nèi)容還會(huì)不斷變化切換,最后又融合成品牌圖標(biāo),簡(jiǎn)單明了直觀告訴用戶(hù)這個(gè)功能可以解決用戶(hù)哪些問(wèn)題。
開(kāi)篇在淺黃色背景上告訴用戶(hù)智能家居應(yīng)用被重新設(shè)計(jì),隨后不斷加深的黃色房屋造型逐漸由大變小疊加起來(lái)組成了Home app的圖標(biāo),引出介紹內(nèi)容;通過(guò)放大品牌情感溫度從而向用戶(hù)傳達(dá)品牌理念。
為了讓更多的人使用Apple Pay,蘋(píng)果向用戶(hù)展示了真實(shí)的使用過(guò)程,降低認(rèn)知成本,讓用戶(hù)更容易接受并使用。
用全屏視頻內(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è)按鍵的功能。
蘋(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ù)去使用。
賣(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)化究竟有多大。
產(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ù)它是防水的。
漆黑的背景寫(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)品宣傳。
開(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)容。
多臺(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ù)的閱讀視線。
產(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)。
產(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)者更加肯定它的輕薄。
看了蘋(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ì)的小編 http://m.sdgs6788.com