啓動頁、空狀态、動畫反饋、框架界面… 今天提到(dào)的(de)這4種狀态，都(dōu)是容易被忽視，而又(yòu)能(néng)讓移動App脫穎而出的(de)細節。鑫冠軟件(jiàn)教您如(rú)何做好這4個(gè)細節的(de)用(yòng)戶體驗設計(jì)：

　　一、 啓動頁

　　當用(yòng)戶打開(kāi)APP軟件(jiàn)時，不能(néng)做的(de)事情就是讓他(tā)們等待。但(dàn)是如(rú)果app的(de)初始設置非常耗時，又(yòu)不可(kě)能(néng)優化該怎麽辦?你(nǐ)不得不讓用(yòng)戶等。如(rú)果他(tā)們願意等，你(nǐ)得知道如(rú)何吸引他(tā)們。啓動頁解決了等待的(de)問題，讓你(nǐ)有(yǒu)一個(gè)簡潔有(yǒu)力的(de)窗口來吸引用(yòng)戶。

　　這裏有(yǒu)一些小(xiǎo)貼士，在設計(jì)啓動頁的(de)時候記得注意：

　　Google和(hé)Apple都(dōu)建議用(yòng)啓動頁模拟更快的(de)加載來提高(gāo)用(yòng)戶體驗。啓動頁給到(dào)用(yòng)戶即時反饋，表示app已經啓動并正在加載。爲了保證人(rén)們等待的(de)時候不厭倦，給他(tā)們一些娛樂(yuè)：有(yǒu)意思的(de)，意想不到(dào)的(de)，或者任何可(kě)以抓住用(yòng)戶注意力的(de)東西(xī)，時間長到(dào)夠app啓動就好。

　　如(rú)果APP的(de)初始設置超過10秒鍾，考慮使用(yòng)進度條來表示正在加載。記住，不确定時間的(de)等待給人(rén)的(de)感覺要比确定時間的(de)等待更加漫長。所以，你(nǐ)要給用(yòng)戶一個(gè)清晰的(de)标識，他(tā)們需要等多長時間。

　　二、空狀态

　　我們通常會(huì)設計(jì)一個(gè)較好的(de)界面，布局中的(de)所有(yǒu)元素都(dōu)完美(měi)的(de)放(fàng)置，看上(shàng)去很美(měi)。但(dàn)是如(rú)果界面正在等待用(yòng)戶操作，該怎麽設計(jì)?我要說的(de)就是空狀态。設計(jì)空狀态是非常重要的(de)，因爲即使它是一個(gè)臨時狀态，它也(yě)會(huì)是APP軟件(jiàn)中的(de)一份子，并且對用(yòng)戶有(yǒu)用(yòng)。

　　空狀态的(de)意義不僅是一個(gè)裝飾。除了向用(yòng)戶提示界面上(shàng)将要展現的(de)内容，它還可(kě)以作爲一種導引(介紹APP軟件(jiàn)，展示爲用(yòng)戶做的(de)事情)，或者助手(出錯時的(de)屏幕)。這兩種情況下，你(nǐ)都(dōu)希望用(yòng)戶能(néng)做點什(shén)麽事情，所以，屏幕不會(huì)立即變爲空狀态。

　　下面是一些設計(jì)空狀态時的(de)小(xiǎo)技巧：

　　給新手用(yòng)戶設計(jì)空狀态。記住新用(yòng)戶的(de)體驗很重要。給他(tā)們設計(jì)空狀态的(de)時候要盡量簡單。重點放(fàng)在用(yòng)戶的(de)主要目标，設計(jì)互動性最大(dà)化：清晰的(de)信息，合适的(de)圖像，一個(gè)按鈕，這就夠了。

　　Khaylo Workout是一個(gè)關于空狀态設計(jì)的(de)很好例子。這個(gè)空狀态告訴用(yòng)戶爲什(shén)麽會(huì)看到(dào)當前界面(因爲他(tā)們還沒有(yǒu)挑戰任何朋友(yǒu))以及如(rú)何操作(點擊+圖标)

　　錯誤狀态。如(rú)果空狀态時由于系統或用(yòng)戶錯誤，你(nǐ)必須在友(yǒu)好度和(hé)幫助度之間尋找一個(gè)平衡。一點小(xiǎo)幽默通常可(kě)以抹平出錯的(de)沮喪，但(dàn)是更重要的(de)是你(nǐ)要清楚的(de)說明(míng)解決問題的(de)步驟。

　　迷失方向，孤立無援，就像在一個(gè)荒島上(shàng)?遵從Azendoo的(de)建議，保持冷(lěng)靜，點個(gè)火(huǒ)，然後繼續刷新。

　　三、框架界面

　　我們通常不考慮内容的(de)不同加載速度——我們一直認爲都(dōu)是立馬加載(或者至少(shǎo)非常快)。所以我們通常沒有(yǒu)爲用(yòng)戶需要等待加載的(de)場(chǎng)合設計(jì)。

　　但(dàn)是網速不是總是有(yǒu)保障的(de)，它可(kě)能(néng)比預期的(de)要慢(màn)。尤其是下載比較大(dà)的(de)内容時(比如(rú)圖片)。如(rú)果你(nǐ)不能(néng)縮短時間，至少(shǎo)要讓用(yòng)戶等待得舒服一點。你(nǐ)可(kě)以用(yòng)臨時信息容器(qì)來保持用(yòng)戶的(de)注意，比如(rú)框架界面和(hé)圖片占位符。比起轉圈的(de)加載提示，框架界面能(néng)建立對内容的(de)預期，減少(shǎo)認知的(de)負擔。

　　幾點建議：

　　(1)框架界面不必很搶眼。隻需要凸顯必要的(de)信息，比如(rú)段落結構。Facebook的(de)灰色占位符就是個(gè)好例子——它加載時使用(yòng)了元素模闆，讓用(yòng)戶熟悉正在加載的(de)内容的(de)整體結構。注意框架界面中的(de)圖片和(hé)線框并沒有(yǒu)很大(dà)區别。

　　(2)對正在加載的(de)圖片，可(kě)以用(yòng)圖片中的(de)主色填充一個(gè)占位符。Medium有(yǒu)一個(gè)很棒的(de)圖片加載效果。首先載入一個(gè)小(xiǎo)的(de)模糊圖片，然後慢(màn)慢(màn)轉變成大(dà)圖。

　　四、動畫反饋

　　好的(de)交互設計(jì)會(huì)提供反饋。在現實世界，像按鈕這樣的(de)物(wù)體會(huì)對我們的(de)交互做出反饋。人(rén)們會(huì)對APP軟件(jiàn)中的(de)元素有(yǒu)同樣水(shuǐ)平的(de)期望。可(kě)視的(de)反饋讓人(rén)們有(yǒu)掌控感：

　　它會(huì)告知交互的(de)結果，讓結果可(kě)見并可(kě)以理(lǐ)解。

　　它給用(yòng)戶一個(gè)信号，這個(gè)對象(或者app)執行(xíng)一個(gè)任務成功或者失敗。

　　動畫反饋通過即時的(de)信息溝通來節約時間，并且不能(néng)讓用(yòng)戶厭煩或者分(fēn)心。基礎的(de)動畫反饋就是轉場(chǎng)：

　　當用(yòng)戶看的(de)點擊/觸摸操作引發的(de)一個(gè)動畫反饋，他(tā)們馬上(shàng)知道這個(gè)操作被接受了。

　　當用(yòng)戶點擊勾選任務已完成, 包括這個(gè)任務的(de)區域就縮小(xiǎo)并且變成了綠(lǜ)色。

　　下面是關于動畫反饋的(de)一些提示：

　　動畫反饋必須經久不衰。剛開(kāi)始看著(zhe)新鮮的(de)東西(xī)，100 次之後可(kě)能(néng)就煩了。

　　動畫可(kě)以讓用(yòng)戶分(fēn)心，讓他(tā)們忽略加載的(de)時間。

　　動畫可(kě)以讓用(yòng)戶體驗打動人(rén)心，刻骨銘心。

　　五、總結

　　用(yòng)心設計(jì)。APP的(de)UI裏面，每個(gè)微小(xiǎo)的(de)細節都(dōu)值得密切注意，因爲UX就是讓所有(yǒu)細節協調的(de)總和(hé)。所以，請從一而終，持之以恒的(de)打磨你(nǐ)的(de)UI，創造真正流暢的(de)用(yòng)戶體驗。