“1+6+2”公式:App動畫及動態(tài)效果之基本原則
和WWDC相比,AltWWDC也非常有趣——這是一個由蘋果開發(fā)者自發(fā)形成的活動,一群產(chǎn)品開發(fā)者、設(shè)計(jì)師、創(chuàng)業(yè)者在WWDC期間聚在一起觀看直播視頻,隨后一些去到現(xiàn)場的開發(fā)者也會加入進(jìn)來。在接下去幾天里,他們一起討論新的開發(fā)趨勢、針對蘋果發(fā)布的新功能、新產(chǎn)品的應(yīng)對策略和給開發(fā)工作帶來的變化等。
在AltWWDC上,我有幸和Raizlabs的產(chǎn)品工程師Ben Johnson聊了聊,他從動畫及動態(tài)效果的角度上給出了對iOS 7另一種的解讀。
他告訴PingWest:“蘋果提供了很好的開發(fā)者工具,所以在iOS上開發(fā)程序和添加動畫效果,要比Andriod上簡單。因此你會發(fā)現(xiàn),不少設(shè)計(jì)感和交互體驗(yàn)很棒的軟件,最初是從iOS平臺上火起來的。但我認(rèn)為,iOS 7發(fā)布后會有一些新的影響,你可以看到他們簡化了很多東西——比如,半透明的控制中心面板使得原先應(yīng)用程序間切換的效果變得多余了?!?/p>
不過Ben Johnson同時也提出,在iOS 7之后的App開發(fā)中,動畫及動態(tài)效果還是有它的用武之地的。“1個單元的歡迎動畫+6個單元的向?qū)赢?1-2個單元讓人愉悅的細(xì)節(jié)性動畫”是Ben Johnson在AltWWDC上給出的應(yīng)用程序內(nèi)動畫的基本公式。
1)一個單元的歡迎動畫(Welcoming Animation)
歡迎動畫是用來告知用戶他正在打開的產(chǎn)品是什么樣、可以實(shí)現(xiàn)什么效果的。有時這部分動畫會增加一些煽情的效果——比如當(dāng)你的生活和這款產(chǎn)品結(jié)合后,結(jié)果會是怎樣的。
而另一個重要作用則是增加趣味,保持用戶的耐心。很多程序打開時的歡迎動畫實(shí)際上是讓用戶不要輕易退出或關(guān)閉程序,讓他們知道這款程序是可以打開的,而不是死機(jī)了,從而給予程序加載的時間,比如加載進(jìn)度條(Loading Bar)就是我們習(xí)以為常的一種歡迎動畫。Johnson強(qiáng)調(diào)說:“一個好的歡迎動畫在增加互動性體驗(yàn)上效果很大,它能提高用戶的預(yù)期,使得人們更樂于探索程序。”(我們前幾天寫過的Any.Do.Cal就類似這種。)
2)六個單元的告知性動畫(Informative Animation)
有些程序選擇播放一段視頻,而有些開發(fā)者采用幻燈片,不管哪一種方式,重要的是教會用戶如何使用你的程序。Ben Johnson說:“了解使用方法的用戶力量是最強(qiáng)大?!?但超過六個頁面的使用指導(dǎo)則會讓用戶覺得“嗯……你的程序看起來有些難用啊”。
而另一些告知性動畫,則是為了讓動作效果更加直觀,暗示動作的結(jié)果。比如郵件軟件中的刪除動作,郵件會向垃圾桶所在方向收卷起來。這一動作模擬現(xiàn)實(shí)中揉紙團(tuán)和扔垃圾的動作,其實(shí)是在告知用戶——“你清楚地知道這些郵件會被怎么樣的吧”。
好的告知性動畫在讓用戶覺得有趣,增加使用產(chǎn)品的動力——不知有多少人用Passbook后看到碎紙效果會覺得十分痛快?像這種動作所產(chǎn)生的心理效果在GTD軟件中會非常有效。
而且這種效果產(chǎn)生的用戶心理也同樣適用于購物類應(yīng)用程序。用戶會因?yàn)槠诖@種動畫效果而增加購買。Ben給出的例子是Zappos.com的移動客戶端軟件,在這款程序中添加物品進(jìn)購物車時,物品會以動畫效果掉入下方購物車,“這很有趣,像游戲一樣,讓我想再玩一次?!?/p>
3)一到兩個讓人愉悅的小細(xì)節(jié)(Delightful Animation)
不論你是否會遵循“1+6+2”公式,開發(fā)者需要知道的是,不管是頁面到頁面還是按鈕和按鈕之間,用戶都不會滿足簡單的從A點(diǎn)到B點(diǎn)的、直愣愣的體驗(yàn)。通常這些細(xì)節(jié)動畫是為了讓過渡和轉(zhuǎn)換的過程更加無縫和平滑,增加程序內(nèi)設(shè)計(jì)的統(tǒng)一感。
比如Path中點(diǎn)擊其他用戶頭像,用戶信息卡片會從上方以重力加速方式掉落下來——如果放慢這個過程,可以看到卡片有一個彈跳過程,當(dāng)不需要訪問對方頁面選擇后退時,卡片也是在彈跳后退出界面的。這個輕微的彈跳和點(diǎn)擊Path主頁面左下角(+)按鈕后菜單彈跳出來的體驗(yàn)是一致的。
另外細(xì)節(jié)性的動畫效果有時也可以把用戶的注意力吸引到你希望他關(guān)注的區(qū)域去。Path的主頁(+)按鈕是一個例子,另一個例子是Jetsetter,一款訂酒店和度假屋的軟件。當(dāng)進(jìn)入下一個頁面時,左上角的方向按鈕會有動畫的翻轉(zhuǎn)效果。比起靜態(tài)的變化,這個動畫吸引了注意,重點(diǎn)提示你——“嘿,這里有些什么不同了”——現(xiàn)在,這是一個回到主菜單的按鈕了。
4)千萬別過頭
盡管并沒有什么動畫效果是在“禁用列表”之中的,但添加動畫的原則是,動畫效果是輔助相關(guān)動作的,不會阻礙到用戶,并且動畫不能導(dǎo)致用戶反而要做一些多余的動作——彈出式廣告動畫需要用戶點(diǎn)擊×去關(guān)閉它就是一個典型的錯誤。
和動作結(jié)合的動態(tài)效果最重要的一點(diǎn)是簡潔干凈,像是原先iPhone鎖屏?xí)r,用戶向上滑動、畫面的彈跳效果(apple bounce)就是最好的例子——你甚至可以看到一些人無聊時反復(fù)在手機(jī)上做那個動作,因?yàn)樗啙嵉腥?。再者?strong>任何和動作結(jié)合的動畫效果都不要超過0.5-1秒。
最后Ben還有個小細(xì)節(jié)上的提醒:注意動作的同步性。比如當(dāng)頁面切換時,標(biāo)題欄文字、導(dǎo)航欄內(nèi)容等也是會以同樣的速度跟著主要內(nèi)容移動的。
來自:pingwest.com
- 目前還沒評論,等你發(fā)揮!