N多應(yīng)用都忽略了的蘋果人機界面指南細節(jié)
今天我們想分享一些在創(chuàng)建FreeTime時的發(fā)現(xiàn),F(xiàn)reeTime是一款日歷應(yīng)用,在隨后的正文中我們會多次提到它。
為什么蘋果不喜歡你應(yīng)用的啟動圖片
從App Store創(chuàng)建伊始,蘋果就一直在推廣一個觀念:應(yīng)用的啟動圖片(你打開應(yīng)用***眼看到的)應(yīng)該僅僅是一個中間屏幕,僅此而已。引用蘋果的人機界面指南如下:
“一個啟動文件或啟動圖片的作用是,當(dāng)應(yīng)用啟動時提供給iOS系統(tǒng)的一個簡單的圖片占位符。這個圖片占位符給用戶一個印象:你的應(yīng)用是快速的、有反應(yīng)的,因為一點開應(yīng)用它會立即展現(xiàn),且很快被應(yīng)用的***屏替換。”
問題是,相當(dāng)多的人(包括我自己)忽略了這條準(zhǔn)則。如果你對此感到好奇,可以看看上面的封面圖,或者把所有運行在后臺的應(yīng)用關(guān)了再啟動看看。我敢打賭你會發(fā)現(xiàn)有一大部分沒有遵循蘋果的準(zhǔn)則。
更糟的是,大多數(shù)應(yīng)用開發(fā)者也許同意蘋果的建議(畢竟誰不希望“給用戶留下應(yīng)用是快速有反應(yīng)的這樣的印象”呢),但在開發(fā)中太容易為了取悅初次使用的用戶,去展現(xiàn)一個高大上啟動圖片以及有趣的初始動畫,結(jié)果忽略了這個準(zhǔn)測。甚至在我的咨詢工作中,啟動圖片是一個品牌推廣***的輸出機會,我們的客戶很喜歡這個。
有些應(yīng)用開發(fā)者(又包括了我自己)在應(yīng)用的登場體驗上更進一步,用到了動畫和視頻?;叵?010年,我給我的日歷應(yīng)用FreeTime的***版做了這個啟動動畫序列,當(dāng)時我們?yōu)榇诉€相當(dāng)?shù)靡狻?/p>
在這個視頻中,你會看到一段優(yōu)美的引導(dǎo)動畫,很多人***眼看的時候就被深深迷住了。但你沒看到的是,今后你每次打開應(yīng)用時,它都要先秀一段白云飄飄,然后才轉(zhuǎn)入到應(yīng)用的主界面----一開始很有趣,但很快它的吸引力就消失殆盡。
品牌植入型的啟動圖片和動畫只會擋道,浪費時間。
蘋果是對的,我們不應(yīng)該忽略他們的準(zhǔn)則,因為這些品牌植入的啟動圖片說好聽點是***眼很可愛很有趣,多看幾眼就膩了,說難聽點它消耗了使用我們軟件的人的大量時間。
這不僅是2010年時的應(yīng)用所為,這仍然發(fā)生在2015年的今天。比如說,F(xiàn)ood Network最近一次的應(yīng)用更新就是如此(他們幾周前剛上蘋果的精品推薦,所以對他們挑剔一點也是公平的)。
這段視頻每次每次啟動應(yīng)用時都要出現(xiàn)(而且大約有5秒鐘那么長)。
隨便用了一會之后,我甚至開始覺得這個應(yīng)用真是極其的慢,但其實我心里知道這是一個制作精良的應(yīng)用(實際是由Bottle Rocket的大牛們做的)。App Store評分也反映了這一點(上次我看時大約4.5星),但是使用過程中浪費掉的時間實在是太多了。
不如我們做個趣味思維練習(xí):每次啟動花5.5秒,每周約啟動3次,然后有100萬活躍用戶,接下來一年里人類就要損失超過8億2千萬秒。
Food Network的應(yīng)用在接下來12個月里會干掉整整26年的人生。
給品牌植入型啟動屏幕找條出路
這些年來我不怎么關(guān)注蘋果的啟動圖片準(zhǔn)則,但現(xiàn)在我注意到了,因為我發(fā)現(xiàn)一個簡單有趣的方法實現(xiàn)雙贏。一方面是品牌推廣還是能夠做,另一方面蘋果也能保有乏味的啟動圖片(是的他們知道這是乏味的):
“要是你覺得遵循這些準(zhǔn)則會導(dǎo)致一個平凡、乏味的啟動圖片,你是對的。請記住,啟動圖片不是給你提供做藝術(shù)展現(xiàn)的機會的。它僅僅用來加強用戶一些感知,感知你的應(yīng)用啟動很快且馬上就能使用。”
這是我們開發(fā)的一個啟動動畫。我們的目標(biāo)相當(dāng)明確:
獲取應(yīng)用所需權(quán)限(日歷訪問權(quán)限和通知)
退場(有的登場體驗堪稱拖拉)
取悅初次使用的用戶,但還是得讓著“蘋果用戶體驗”爸爸,遵守規(guī)矩。
經(jīng)過許多迭代之后最終我們做成了這樣:
UI設(shè)計的扁平化趨勢使得應(yīng)用更容易用啟動界面做初始品牌推廣,即使在遵循了人機界面指南的前提下。
在早先版本的iOS中,大量的漸變使得這樣做很困難,但現(xiàn)在扁平化的導(dǎo)航欄能很容易地擴展成兩倍大小,變成用作應(yīng)用登場效果的畫布。使用動畫導(dǎo)航欄和分頁欄能很容易的向外擴展,占據(jù)整個屏幕,隨后給應(yīng)用實際用途讓路。
更贊的是,這還不會讓人感覺到笨拙或別扭,完全自然而然。
下面這張圖展示了用戶***次啟動FreeTime時所看到的,以及后續(xù)每次啟動時看到的。
于是解決辦法來了----只需做以下四步:
如果你的應(yīng)用有頂部導(dǎo)航欄或者tab bar(下面以頂部導(dǎo)航欄為例),使用單一顏色,與此同時創(chuàng)建一張遵循蘋果規(guī)則的普通啟動圖片.
在***次啟動時,動畫擴展導(dǎo)航欄,向下擴展到視圖中成為“登場效果畫布”。
插入有趣的品牌推廣(關(guān)鍵要有趣),詢問權(quán)限許可,歡迎一下,然后馬上退場。
動畫使畫布回到導(dǎo)航欄,漸隱現(xiàn)出你的應(yīng)用主界面。
你的用戶初次看到動畫會很高興,然后在后續(xù)啟動中,他們不會再看到有關(guān)登場動畫的任何東西,但是他們也許會細微的覺察到你的應(yīng)用啟動真是快,即開即用。
雙贏。