和WWDC相比，AltWWDC也非常有趣——這是一個(gè)由蘋果開發(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)用程序間切換的效果變得多余了。”
不過Ben Johnson同時(shí)也提出，在iOS 7之后的App開發(fā)中，動畫及動態(tài)效果還是有它的用武之地的。“1個(gè)單元的歡迎動畫+6個(gè)單元的向?qū)赢?1-2個(gè)單元讓人愉悅的細(xì)節(jié)性動畫”是Ben Johnson在AltWWDC上給出的應(yīng)用程序內(nèi)動畫的基本公式。
1）一個(gè)單元的歡迎動畫（Welcoming Animation）
歡迎動畫是用來告知用戶他正在打開的產(chǎn)品是什么樣、可以實(shí)現(xiàn)什么效果的。有時(shí)這部分動畫會增加一些煽情的效果——比如當(dāng)你的生活和這款產(chǎn)品結(jié)合后，結(jié)果會是怎樣的。
而另一個(gè)重要作用則是增加趣味，保持用戶的耐心。很多程序打開時(shí)的歡迎動畫實(shí)際上是讓用戶不要輕易退出或關(guān)閉程序，讓他們知道這款程序是可以打開的，而不是死機(jī)了，從而給予程序加載的時(shí)間，比如加載進(jìn)度條（Loading Bar）就是我們習(xí)以為常的一種歡迎動畫。Johnson強(qiáng)調(diào)說：“一個(gè)好的歡迎動畫在增加互動性體驗(yàn)上效果很大，它能提高用戶的預(yù)期，使得人們更樂于探索程序。”（我們前幾天寫過的Any.Do.Cal就類似這種。）
2）六個(gè)單元的告知性動畫（Informative Animation）
有些程序選擇播放一段視頻，而有些開發(fā)者采用幻燈片，不管哪一種方式，重要的是教會用戶如何使用你的程序。Ben Johnson說：“了解使用方法的用戶力量是最強(qiáng)大。” 但超過六個(gè)頁面的使用指導(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)購物車時(shí)，物品會以動畫效果掉入下方購物車，“這很有趣，像游戲一樣，讓我想再玩一次。”
3）一到兩個(gè)讓人愉悅的小細(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)擊其他用戶頭像，用戶信息卡片會從上方以重力加速方式掉落下來——如果放慢這個(gè)過程，可以看到卡片有一個(gè)彈跳過程，當(dāng)不需要訪問對方頁面選擇后退時(shí)，卡片也是在彈跳后退出界面的。這個(gè)輕微的彈跳和點(diǎn)擊Path主頁面左下角(+)按鈕后菜單彈跳出來的體驗(yàn)是一致的。
另外細(xì)節(jié)性的動畫效果有時(shí)也可以把用戶的注意力吸引到你希望他關(guān)注的區(qū)域去。Path的主頁(+)按鈕是一個(gè)例子，另一個(gè)例子是Jetsetter，一款訂酒店和度假屋的軟件。當(dāng)進(jìn)入下一個(gè)頁面時(shí)，左上角的方向按鈕會有動畫的翻轉(zhuǎn)效果。比起靜態(tài)的變化，這個(gè)動畫吸引了注意，重點(diǎn)提示你——“嘿，這里有些什么不同了”——現(xiàn)在，這是一個(gè)回到主菜單的按鈕了。
4）千萬別過頭
盡管并沒有什么動畫效果是在“禁用列表”之中的，但添加動畫的原則是，動畫效果是輔助相關(guān)動作的，不會阻礙到用戶，并且動畫不能導(dǎo)致用戶反而要做一些多余的動作——彈出式廣告動畫需要用戶點(diǎn)擊×去關(guān)閉它就是一個(gè)典型的錯誤。
和動作結(jié)合的動態(tài)效果最重要的一點(diǎn)是簡潔干凈，像是原先iPhone鎖屏?xí)r，用戶向上滑動、畫面的彈跳效果(apple bounce)就是最好的例子——你甚至可以看到一些人無聊時(shí)反復(fù)在手機(jī)上做那個(gè)動作，因?yàn)樗啙嵉腥�。再者，任何和動作結(jié)合的動畫效果都不要超過0.5-1秒。
最后Ben還有個(gè)小細(xì)節(jié)上的提醒：注意動作的同步性。比如當(dāng)頁面切換時(shí)，標(biāo)題欄文字、導(dǎo)航欄內(nèi)容等也是會以同樣的速度跟著主要內(nèi)容移動的。