有時App吸引你的正是細節

手機 app 要成功，取決于一系列因素，其中最重要的因素當屬用戶體驗。市場上做得比較成功的 app 用戶體驗都非常好。就手機客戶端用戶體驗的設計而言，遵循最佳實踐乃穩妥之舉，但從整個設計創造大環境來講，放棄一些感覺很好但又不必要的設計元素又似不費吹灰之力。

 

然而，就設計而言，要讓用戶體驗感覺良好和讓用戶體驗驚贊不已的區別，仍在于在細小元素（小細節）設計上的細致程度。

 

讀完本文，你會明白為什么這些細小元素也蘊藏著大智慧，為什么他們和其它核心設計元素同等重要。此外，你還會明白這些細小元素如何幫助你的手機 app 取得成功的。

 

啟動頁

 

當用戶開啟 app 時，沒人愿意花時間來等待。但若初始啟動階段非常耗時，又沒辦法進行優化，那該怎么辦呢？這只能讓用戶等待。

 

假使真要讓用戶等待的話，你應該找到吸引他們的方法。啟動頁的設計就能解決這個問題，并能通過這個簡潔而重要的元素成功吸引到用戶。

 

 

以下是設計啟動頁的小竅門：

1）創造更快的加載時間 & 分散注意力

 

Google?和蘋果都建議使用啟用頁，通過創造更快的加載時間，從而提高用戶體驗。啟動頁能給用戶帶來直接反饋，告知其 app 已開啟并處于加載狀態。

 

若要保證用戶在等待過程中不會產生厭倦感，還需要在啟動頁加入一些分散注意力的元素：比如搞笑的元素，意想不到的元素，或者任何能盡可能長時間吸引用戶注意力的元素，以留足時間加載 app。

 

2）設置進度條

 

若你的 app 有超過十秒的初始啟動階段，可以考慮使用進度條來顯示加載進程。有總比沒有好，有了進度條，再有等待也不會比無限地等待長。因此，你應該讓用戶清晰地知道他們需要等待多久。

 

進度條讓加載過程更加融入和自然。圖片來源：de martin

 

空狀態

 

通常情況下，受用戶喜愛的界面設計其界面各元素都整齊排放、看起來也比較舒服。就需要用戶進一步操作的界面而言，又該如何設計呢？這里主要說的是空狀態?？諣顟B的設計非常重要，雖然空狀態僅僅是一個臨時階段，但其也是?app 中不可缺少的一部分，并且對用戶也非常有用。

 

空狀態的設計不僅僅是讓界面更好看。除了向用戶預告即將出現的界面內容外，空狀態可作為一種待登錄方式（介紹 app 并展示其可以幫助用戶做什么），也可作為用戶的幫手（特別是界面出現錯誤提示時）。

 

不論是哪種情況，你希望用戶盡快執行操作從而使界面不再停留在空狀態。

 

 

 

以下是設計空狀態的一些小竅門：

 

1）針對首次登入用戶的空狀態設計。

 

切記，一定要重視首次登錄用戶的體驗。當為他們設計空狀態時，設計越簡單越好。要重視主要用戶目標，并基于最大化交互行為來進行設計——清晰的信息、正確的圖像，以及一個操作按鈕就足矣。

 

 

Khaylo Workout 是恰當設計空狀態的一個范例。該空狀態告知用戶為什么會出現這個界面（因為他們還未向任何朋友發起挑戰），同時還告知用戶如何解決這個問題（輕擊「+」按鈕）。

2）出錯提示。

 

如果因為系統或用戶操作出錯而出現空狀態，一定要平衡好「友好性」和「有用性」之間的關系。

 

推薦加入一些短小精悍的幽默元素，從而緩解用戶因收到出錯提示而產生的沮喪感，但更重要的是要讓用戶清楚知道如何去解決出錯問題。

 

 

失聯了，正如你在一個荒島上？采納 Azendoo 的建議，保持冷靜，點燃火把，繼續刷新。

 

構架屏幕

 

通常我們不會在同一界面內容設置不同的加載速度——我們相信其一直處于加載狀態（或至少加載非?？欤Ｋ酝ǔＧ闆r下，我們并不會在設計中加入讓用戶等待內容加載的不舒服元素。

 

但沒人能保證網速，操作時間可能比預期要長，特別是加載有大量內容（比如圖片）的時候。如果沒辦法縮減內容，那至少要讓用戶舒服地等待。

 

通過使用臨時信息方框，比如構架屏幕和圖像占位符，可以很大程度上繼續留住用戶。相比一個「加載中」圖像，構架屏幕可以讓用戶預知接下來屏幕會出現的內容，同時減少其認知負荷。

 

以下是構架屏幕設計的一些小竅門：

 

1）構架屏幕并不需要奪人眼球。

 

只需要凸顯必要信息，比如某部分其架構。Facebook 的灰色占位符就是一個范例——它在加載頁面內容時使用了元素模板，讓用戶熟知待加載內容的整體架構。注意構架屏幕中用到的圖片和線框的差別并不明顯。

 

 

2）正在加載的圖片也可以使用占位符，占位符填充顏色要用待加載圖片的主色。Medium 就有非常好的圖片加載效果。首先，加載一個模糊小圖，然后再切換到清晰大圖。

 

在最終圖像成像前，你可以看見有模糊圖片填充的占位符。

 

動畫反饋

 

友好的交互設計會提供反饋。在實體世界中，像按鈕這樣的物體會對用戶交互行為作出反饋。用戶也期望從?app 元素中得到類似的反饋。視覺反饋使用戶有控制感。

 

• 它顯示了任一交互的結果，使其可視化，容易明白。
• 它向用戶提示他們（或者 app）在執行某項任務時成功或失敗了。

 

動畫反饋應該即時向用戶傳達信息從而節省時間，這樣也做到了讓用戶不再無聊或分心。使用動畫反饋最多的是在轉場中：

 

當用戶通過點擊/輕擊操作觸發動畫反饋后，他們立即知道該操作已被執行。

 

當用戶勾選方框來表明該項任務已完成時，包括該任務的卡片尺寸變小了，顏色也變成綠色了。

 

若動畫的運用不僅僅是針對普通操作，那這個 app 必定能受用戶喜愛。

 

以下是動畫反饋設計的一些小竅門：

 

動畫反饋要經得住長時間的用戶體驗。開始比較有趣的東西在第100次過后也許就讓人厭煩了。

 

動畫能分散用戶注意力，使其忽略長時間的加載。

 

動畫能真正使用戶體驗友好，流連忘返。

 

結束語

 

設計過程要細心。App 用戶界面的每一個細小元素都值得高度關注，因為用戶體驗即是讓所有細小元素共同和諧地運作。因此，從頭到尾優化用戶界面，設計出讓人驚贊不已的用戶體驗吧。

沈陽App定制開發，請信賴唯思科技！