天天看點

開發移動應用,你應該注意這些小細節

<b>本文講的是開發移動應用,你應該注意這些小細節,</b>

<b></b>

你的 app 的成功涉及很多因素,但最重要的是總體使用者體驗。市場上脫穎而出的 app 都提供了很棒的 UX。具體到設計移動 UX,遵從最佳實踐是一個好方法,但是建構藍圖的時候,往往容易忽略一些錦上添花的設計元素。而“不錯的體驗”和“非凡的體驗”之間,通常取決于我們設計這些小細節的用心程度。

通過本文你可以看到這些 小中見大的細節 和設計中那些更明顯的元素同樣重要,以及它們如何決定 app 的成功。

當使用者打開 app 時,最不能做的事情就是讓他們等待。但是如果 app 的初始設定非常耗時,又 不可能 優化該怎麼辦?你 不得不 讓使用者等。如果他們願意等,你得知道如何 吸引他們。啟動頁解決了等待的問題,讓你有一個簡潔有力的視窗來吸引使用者。

開發移動應用,你應該注意這些小細節

圖檔來源: mobile-patterns

這裡有一些小貼士,在設計啟動頁的時候記得注意:

開發移動應用,你應該注意這些小細節

圖檔來源: Cuberto

開發移動應用,你應該注意這些小細節

通過使用進度條讓加載過程更自然. 圖檔來源: de_martin

我們通常會設計一個豐滿的界面,布局中的所有元素都完美的放置,看上去很美。但是如果界面正在等待使用者操作,該怎麼設計?我要說的就是空狀态。設計空狀态是非常重要的,因為即使它是一個臨時狀态,它也會是 app 中的一份子, 并且對使用者有用。

空狀态的意義不僅是一個裝飾。除了向使用者提示界面上将要展現的内容,它還可以作為一種 導引 (介紹 app,展示為使用者做的事情),或者 助手 (出錯時的螢幕)。這兩種情況下,你都希望使用者能做點什麼事情,是以,螢幕不會立即變為空狀态。

開發移動應用,你應該注意這些小細節

圖檔來源: inspired-ui

下面是一些設計空狀态時的小技巧:

給新手使用者設計空狀态。記住新使用者的體驗很 重要。給他們設計空狀态的時候要盡量簡單。重點放在使用者的主要目标,設計互動性最大化:清晰的資訊,合适的圖像,一個按鈕,這就夠了。

開發移動應用,你應該注意這些小細節

Khaylo Workout 是一個關于空狀态設計的很好例子。這個空狀态告訴使用者為什麼會看到目前界面(因為他們還沒有挑戰任何朋友)以及如何操作(點選 + 圖示). 圖像來源: emptystat.es

錯誤狀态。如果空狀态時由于系統或使用者錯誤,你必須在友好度和幫助度之間尋找一個平衡。一點小幽默通常可以抹平出錯的沮喪,但是更重要的是你要清楚的說明解決問題的步驟。

開發移動應用,你應該注意這些小細節

迷失方向,孤立無援,就像在一個荒島上?遵從 Azendoo 的建議,保持冷靜,點個火,然後繼續重新整理。圖檔來源: emptystat.es

我們通常不考慮内容的不同加載速度——我們一直認為都是立馬加載(或者至少非常快)。是以我們通常沒有為使用者需要等待加載的場合設計。

但是網速不是總是有保障的,它可能比預期的要慢。尤其是下載下傳比較大的内容時(比如圖檔)。如果你不能縮短時間,至少要讓使用者等待得舒服一點。你可以用 臨時資訊容器 來保持使用者的注意,比如架構界面和圖檔占位符。比起轉圈的加載提示,架構界面能建立對内容的預期,減少認知的負擔。

幾點建議:

架構界面不必很搶眼。隻需要凸顯必要的資訊,比如段落結構。Facebook 的灰色占位符就是個好例子——它加載時使用了元素模闆,讓使用者熟悉正在加載的内容的整體結構。注意架構界面中的圖檔和線框并沒有很大差別。

開發移動應用,你應該注意這些小細節

對正在加載的圖檔,可以用圖檔中的主色填充一個占位符。 Medium 有一個很棒的圖檔加載效果。首先載入一個小的模糊圖檔,然後慢慢轉變成大圖。

開發移動應用,你應該注意這些小細節

真正的圖檔出現之前,你可以看到模糊圖檔填充的占位符。圖檔來源: jmperezperez

好的互動設計會提供回報。在現實世界,像按鈕這樣的物體會對我們的互動做出回報。人們會對 app 中的元素有同樣水準的期望。可視的回報讓人們有 掌控感:

它會告知互動的結果,讓結果可見并可以了解。

它給使用者一個信号,這個對象(或者 app )執行一個任務成功或者失敗。

動畫回報通過即時的資訊溝通來節約時間,并且不能讓使用者厭煩或者分心。最基礎的動畫回報就是 轉場:

開發移動應用,你應該注意這些小細節

當使用者看的點選/觸摸操作引發的一個動畫回報,他們馬上知道這個操作被接受了。圖檔來源: Ryan Duffy

開發移動應用,你應該注意這些小細節

當使用者點選勾選任務已完成, 包括這個任務的區域就縮小并且變成了綠色。圖檔來源: Vitaly Rubtsov

動畫回報必須經久不衰。第一次看着新鮮的東西,100 次之後可能就煩了。

開發移動應用,你應該注意這些小細節

圖檔來源: Rachel Nabors

動畫可以讓使用者分心,讓他們忽略加載的時間。

<a href="https://camo.githubusercontent.com/2fc2875c45d80d4d81250ddd785d33ea0b840bf7/687474703a2f2f6261626963682e62697a2f636f6e74656e742f696d616765732f323031362f30382f312d4a7a45677a67536a4a4b56377a78574b506442416a672e676966" target="_blank"></a>

圖檔來源: xjw

動畫可以讓使用者體驗打動人心,刻骨銘心。

<a href="https://camo.githubusercontent.com/4f4cf580fb8919ef4c993e9dc6ea95892beed405/687474703a2f2f6261626963682e62697a2f636f6e74656e742f696d616765732f323031362f30382f312d6c3241486352636d324b6e6b792d49704430685034672e676966" target="_blank"></a>

圖檔來源: Tubik

用心設計。app 的 UI 裡面,每個微小的細節都值得密切注意,因為 UX 就是讓所有細節協調的總和。是以,請從一而終,持之以恒的打磨你的 UI,創造真正無與倫比的使用者體驗。

謝謝!

<b>原文釋出時間為:2016年09月12日</b>

<b>本文來自雲栖社群合作夥伴掘金,了解相關資訊可以關注掘金網站。</b>

繼續閱讀