萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 不簡單的啟動畫面

不簡單的啟動畫面

分享到: 新浪 花瓣網 添加到收藏夾

不簡單的啟動畫面  三聯教程

  需要點擊圖標,等待應用程序啟動。在這個簡單的過程中,啟動畫面會呈現在我們眼前。有時候它讓我們眼前一亮,有時候它會讓我們感到困惑,有時候它會讓我們感到厭倦……

  小小的啟動畫面到底有什麼學問,它對產品用戶體驗都有哪些影響?本篇文章做了一些分析和總結,希望對你有幫助。

  什麼是啟動畫面

  當用戶啟動一個操作系統、軟件或者應用程序的時候,首先出現的承載產品標識及相關信息的圖形界面。例如,Office軟件程序的啟動畫面,上面有產品的標識,發行公司以及一些可能的操作。

啟動畫面不簡單

  為什麼需要啟動畫面

  按照體驗設計法則——讓用戶快速的開始任務,啟動畫面貌似是用戶開始任務前的障礙。其實不然,實際情況是程序的啟動是需要一點時間的,有時這個時間會比較長,比如操作系統的啟動、大型制圖或者辦公軟件的啟動等等。而在這段時間裡,如果顯示黑屏顯然不恰當,如果顯示一段段正在運行的程序代碼又過於機械(早期的DOS操作系統大家應該有所印象)。

啟動畫面不簡單

  啟動需要時間,所以帶來了一些用戶體驗的問題:

  1.用戶不知道機器在做什麼,會懷疑機器遲鈍、效率低下

  2.用戶等待會有厭煩情緒,直接影響對機器的情感

  為了解決這些體驗問題,人們使用一個畫面來代替後台正在運行的代碼,換來人們對機器的好感。為了做到這一點,很多公司都用心良苦,動畫越來越細膩,形式也越來越多。這裡不贅述舉例,主要談談移動應用客戶端的啟動畫面(以iOS平台為例)。

  移動應用程序的啟動畫面存在的環境

  移動應用程序存在的環境是惡劣的,這是相對PC來說。即使產品設計支出對功能做了很多減法,即使工程師日日夜夜在做性能優化,應用程序的啟動還是需要一些時間。啟動畫面在移動客戶端產品存在的必要性不得而知。

  移動應用程序啟動畫面的設計法則一 ——避免顯示無關內容,包括一個漂亮的圖,要盡力讓啟動畫面變得有意義。對於用戶來說,他們希望立即體驗你的應用程序而不是欣賞一些無用信息。

  如何理解這個法則,如何使用這個法則,下面的例子說明了一切,你也可以下載並體驗這些應用,了解更多有關啟動畫面的秘密,歡迎隨時交流。

  場景一 品牌含義的延伸

  如果啟動時間不是一兩秒那麼短的時間,我們可以利用這個時間展示應用程序的品牌。但是不要只是展示品牌,最好能夠結合應用程序所提供的服務,將品牌的含義延伸到畫面中,帶給用戶一種親切感,或者讓用戶了解到產品的文化,或者其他你想讓用戶了解的故事。

  案例一 只是標識的設計。很多應用都是這樣設計的。將自己的標識往中間一放,告訴用戶我就是我。然後沒有任何情感的進入了內容界面。有的時候,標識本身擁有質感,讓畫面還能充滿視覺的期待,如果像bing這樣,有點……

啟動畫面不簡單

  案例二 平面設計還是很贊的。比如新浪新聞應用,讓這種科技感和品質感體現出來了。一個地球也符合人們對新聞國際化和時效性的理解。Adobe Photoshop的啟動畫面,將其對色彩和光的專業洞察力體現了出來,它一定會喚起adobe粉絲對其技術的共鳴。(缺少了人情味,不過科技感增強了。)

啟動畫面不簡單

  案例三 講個故事吧。利用啟動畫面可以為標識講一個故事。也許是章魚保羅的月亮之旅也可以是大眼睛過大年。總之,不僅僅是標識,還有讓你欣喜的故事。當然這種畫面如果不經常更新,也會讓你的應用程序過於偏向某個事件或某類人群,容易引起部分用戶的反感。

啟動畫面不簡單

  案例四有的放矢的標識補充。能夠做到即能體現應用對用戶的作用,又不花哨。下面的例子是值得學習的。周末畫報,就是喝著咖啡來看報,有情調的共鳴。網盤就是大堆的文件、圖片、媒體信息的倉庫。

啟動畫面不簡單

  場景二 直接進入應用程序主界面

  iphone上的某些應用程序采用了默認界面框架作為啟動畫面。用戶會感覺應用程序響應很快——這一點在移動端非常有用,大多數應用程序沒有這麼做。如果加載時間過長,用戶會認為是網絡問題或者程序死機。利用界面框架作為啟動界面,可以緩解用戶對應用程序響應延遲的厭倦感。(一般這個界面是一張圖,而不是真的控件組成的。)

  案例一 谷歌應用程序在啟動後,展現了一張簡略的界面,有導航欄和標簽欄。幾秒後,搜索框出現,告訴你可以使用該應用了。值得注意的是,由於是一張假的圖,所以不要將可用的功能或者可操作的模塊做在這張啟動畫面上,誤導用戶程序已經可以使用。

啟動畫面不簡單

  案例二 Facebook應用程序啟動的時候需要判斷是否聯網以及帳號綁定情況。首先呈現的是一張假圖,只有導航欄。如果沒有綁定帳號則顯示登錄界面;如果綁定了帳號則進入信息中心界面。

啟動畫面不簡單

  案例三 Google Earth應用程序是從一個地球的全景開始的。所以啟動畫面就是一個靜幀的地球,這與應用程序啟動以後的畫面幾乎一致,可以讓用戶感覺到非常快速的情境反饋。

啟動畫面不簡單

  iphone內置的應用程序大都采用了這種啟動畫面的做法(通訊錄、短信、iTunes、AppStore設置、天氣等等),讓用戶無需有等待的感覺,直接與操作界面見面。當然這要求應用程序本身無需太多時間啟動。

  也許有人認為沒有品牌logo的啟動畫面感覺沒有把品牌得到宣傳。用蘋果官方的解釋,用戶下載和打開你的應用的時候,就已經知道你的品牌了。你的品牌是否能夠給用戶留下好的印象,在於後續任務的用戶體驗,其中包括讓用戶立即享用你的服務而不需要任何等待。

  場景三 過渡到有用的模塊

  如果你的應用程序需要用戶在使用之前有必要的操作,你可以將之與啟動畫面結合起來,而不需要單獨顯示。這也是提升效率的一種做法。

  案例一 將登錄注冊環節結合進來。當應用程序確定聯網了以後,需要用戶登錄,則啟動畫面自動過渡到登錄環節。Yahoo messenger、MSN做得都非常自然。這回讓你的用戶感覺到非常細心的設計品質,提升用戶對應用程序的好感。(一般這類應用程序在用戶第一次使用——未綁定帳號的情況下,會出現登錄窗口,如果已經綁定帳號,並默認登錄,啟動畫面會采取場景二中的方案。)

啟動畫面不簡單
啟動畫面不簡單

  案例二 局部聯網刷新出有用的信息

  Twitter官方客戶端在首次啟動會直接打開“搜索模塊”界面,只是在界面頂部導航欄下方切出一個區域給注冊按鈕。此時界面下方內容區開始刷新,展現出即時簡約的信息。

啟動畫面不簡單

  場景四 適當的動畫

  使用適當的動畫,可以讓應用程序的啟動更加震撼。務必要做到適當,用戶不是每次都想在啟動應用程序的時候欣賞一段短片,除非相當精彩而且有必要。

  案例一 攝影畫報應用程序在啟動的時候,是一圈逐漸清晰的圖片。隨著圖片一張張呈現,程序啟動完成,進入內容列表界面。這種將應用內容作為啟動元素的方案,讓用戶能夠從啟動那一刻開始,欣賞應用程序提供的服務。

copyright © 萬盛學電腦網 all rights reserved