2018年移動端app設計的六個實踐性指南

移動APP的開發(fā)變得越來越主流,APP能為用戶提供更直接的內(nèi)容和服務。所以很多公司都想開發(fā)自己的APP獲取用戶。

但是,根據(jù)“財富”雜志的報道,超過75%的用戶第一次打開APP后就再也不打開了。用戶希望從APP獲得更好快速的內(nèi)容,更好的操作和更好的體驗。所以,我們開發(fā)的APP應該適應使用的環(huán)境,做到盡可能的易用,讓用戶有更好的體驗。

那么,如何才能成為良好的用戶體驗呢?25學堂跟大家一起來探討移動端app設計的六個指南。

 

一、最小化認知負荷

讓用戶第一次接觸到app時的交互(例如認知負荷)困擾越小,app能夠保留在用戶手機里的機會就越大。

 

1、優(yōu)化用戶流程

優(yōu)化流程首先要了解用戶是如何與app進行交互的。作為設計人員和開發(fā)人員,我們應該在整個用戶流程的背景下理解用戶的目標。這些知識將幫助我們確定任務完成期間最常見的摩擦點。

這里有幾個實用的優(yōu)化用戶流程的方法:

a、將大任務分成若干個子任務。如果任務包含用戶方所需的大量步驟和操作,則最好將此任務劃分為多個子任務。電子商務APP中的漸進式結(jié)帳流程就是一個很好的例子。您可以將結(jié)帳過程分為多個步驟,每個步驟都需要用戶操作。

 

b、使用可以獲取到的用戶信息。您可能已經(jīng)有很多關于用戶的信息 - 那請正確使用此信息。我們來舉打車軟件“優(yōu)步”的例子。優(yōu)步不會詢問用戶的位置,優(yōu)步會根據(jù)地理位置數(shù)據(jù)自動讀取當前用戶的位置。此時,用戶只需要選擇目的地就可以了。

 

c、自然的展示下一個操作內(nèi)容。當任務需要用戶完成若干步驟時,通過清楚地顯示下一步的情況,可以讓用戶操作時心中有數(shù),不會厭煩,然后順利完成剩下的任務。

 

d、標示每個頁面的最主要操作按鈕。按照這個簡單的原則,您可以讓界面更易于學習和使用。使用視覺上的突出展示來優(yōu)先考慮重要元素(例如主要號召性用語按鈕的高對比顏色)。

 

2、去掉干擾

良好的用戶界面設計主要是能夠提供相關信息并避免不相關的干擾信息。

頁面上每增加一個按鈕,圖像,圖標都會使頁面變得更加復雜和難以理解。電腦上的干擾已經(jīng)夠煩人了,而在移動設備上,因為屏幕更小,所以沒有足夠的空間放置很多信息,一切從簡。

提示:如果要減少某一用戶流程頁面上的干擾 - 那么只需要顯示流程當前步驟中需要的內(nèi)容。例如,當用戶做出選擇時,顯示足夠的信息幫助他們進行選擇,然后在下一個頁面上顯示更多選擇內(nèi)容。

 

3、讓導航出現(xiàn)在顯眼的地方

所有酷炫的功能和引人入勝的內(nèi)容如果不被人找到,那么這些功能或內(nèi)容是沒有意義的。

以下是一些關于導航的規(guī)則:

a,不要隱藏導航。避免隱藏導航,如手勢驅(qū)動,因為大多數(shù)用戶很難找到它。

b,一致的導航。開發(fā)人員經(jīng)常在單個頁面上隱藏菜單,不要這樣設計,因為它可能讓你的用戶混淆和迷失。

c,標示當前位置。未能指出當前位置是許多APP的常見問題?;卮鹩脩簟拔以谀睦??”是好的導航最基本的內(nèi)容之一。

提示:最好使用標準規(guī)范的導航模式 - 比如標簽欄(適用于iOS)和導航抽屜(適用于Android)。大多數(shù)用戶都熟悉這兩種導航模式。

 

二、優(yōu)化媒介的交互

手機不是臺式機的小版本 - 它們有自己的細微差別和限制。

 

1、元素應該設計的顯而易見

移動用戶界面的設計需要清楚地表達哪些元素是可互動的,哪些元素是靜態(tài)的。

與桌面不同的是,用戶可以使用懸停效果來了解某些內(nèi)容是否具有互動性,但移動用戶只能通過點擊某個元素來檢查交互性。用戶應該只要看到某個元素就能夠正確預測界面元素的行為方式。

 

2、為手指操作的友好設計

當您在移動界面中設計可操作的元素時,制定足夠大的目標非常重要,以便用戶輕松點按。作為一個經(jīng)驗法則,控件的觸摸面積至少為7-10毫米時,用戶才可以用手指準確敲擊。這種尺寸的控件使用戶觸摸它時,邊緣仍然可見,用戶將能夠了解他們是否準確地擊中目標。

此外,請確保兩個元素之間的位置不要太接近 - 控件之間應有適當?shù)拈g距以防止錯誤輸入。

 

3、考慮拇指的操作區(qū)域

為操作的大拇指設計不僅考慮被點擊的目標足夠大,還要考慮我們握設備時的方式。

盡管拇指可以操作大部分屏幕,但只有三分之一的屏幕是真正毫不費力的可操作區(qū)域。這個區(qū)域被稱為自然拇指區(qū)。其他區(qū)域需要伸展手指,甚至需要改變握移動設備的方式才能夠著。根據(jù)手部位置(左側(cè),右側(cè)或重疊部分),我們可以看到移動設備的安全區(qū)如下圖中的綠色區(qū)域。

屏幕越大,越難操作。

在為手機設計時考慮所有不同的區(qū)域:

綠色區(qū)域是導航選項或頻繁交互操作的最佳區(qū)域(如CTA(號召性用語按鈕))。

紅色區(qū)域是潛在危險選項的最佳位置(如刪除或擦除)。用戶不太可能意外觸發(fā)此選項。

 

4、中斷設計

我們生活在一個經(jīng)常被打斷的世界。有些東西總是試圖分散我們的注意力,并將我們的注意力引向別處。

例如,用戶可能在等待火車時使用您的app。設計移動思維至關重要。讓用戶在中斷后返回時更容易重新與應用進行互動。

Twitter是中斷設計的一個很好的例子。APP的通知屏幕顯示所有最近的通知。只要用戶停留在此屏幕上,應用程序不會自動更新列表 - 它只是在列表頂部顯示狀態(tài)“X條新通知”。這允許用戶在一段時間后重新與應用程序互動時不會失去目前的位置。

 

4、多屏幕體驗

移動應用不是只存在移動互聯(lián)網(wǎng)中。

例如,移動用戶通常在移動設備上瀏覽電子商務網(wǎng)站,然后切換到桌面進行購買。這種操作需要無縫切換。

Spotify是一個不錯的案例。您可以在Mac上設置播放列表,并立即在iPhone上使用。當您在設備之間切換時,Spotify會記住您停止的位置。

 

5、直觀的手勢操作

使用您的應用所在類別中最適合該應用的手勢操作。

為什么?因為手勢是隱藏的控件。

正如Thomas Joos 在他的文章“超越按鈕:擁抱手勢驅(qū)動界面”中指出的那樣,在用戶界面中使用手勢的最大缺點是學習曲線。每次用手勢替換可見控件時,應用程序的學習曲線都會上升。發(fā)生這種情況是因為手勢具有較低的可發(fā)現(xiàn)性 - 它們總是隱藏起來的,人們需要先能夠識別這些選項。這就是為什么使用已被廣泛接受的手勢至關重要。例如:用于Feed媒體流的應用程序的下拉刷新。

6、使用加載占位圖

您的應用程序本應該并且快速響應 - 但是用戶的網(wǎng)絡情況并不總是穩(wěn)定快速。

互聯(lián)網(wǎng)連接可能太慢,如果你不能縮減等待的時間,至少應該盡量讓等待的時間變得更加友好愉悅。這時候可以采用占位圖加載。

占位圖是逐漸加載信息的頁面的空白方式。與關注數(shù)據(jù)加載進度的動畫加載旋鈕不同,加載占位圖將用戶注意力集中在真實進度而不是旋轉(zhuǎn)等待時間。

 

 

三、專注于第一次體驗

 

就像人一樣,你的移動應用沒有第二次機會給別人第一印象。

1、良好的用戶引導頁很重要

也許創(chuàng)建用戶引導頁的規(guī)則是:它不應該是通用的,它應該是有利于使用者使用的原則。

設計師應將用戶引導頁當作為首次使用的用戶創(chuàng)造繼續(xù)使用的機會。同時,用戶引導頁應該真正只為第一次使用的人展示。而不應該多次出現(xiàn)。

2、設計錯誤頁

空狀態(tài)(或零狀態(tài))是尚未發(fā)生任何狀態(tài)的狀態(tài)。這個狀態(tài)不應該是一個空白的頁面,它應該為啟動和運行應用程序提供方向和指導。

以Spotify的錯誤狀態(tài)屏幕為例。它不能幫助用戶理解上下文,并且不會幫助他們找到問題的答案:“我能做些什么呢?”

現(xiàn)在將它與NFL Fantasy的空白狀態(tài)進行比較。這個零狀態(tài)使錯誤消息可讀并且有用。簡明,有禮貌,有教育意義的文字或插畫告訴用戶:出了什么問題,可能是為什么。用戶應該采取什么措施來糾正錯誤。

 

四、使用功能性動畫來改善互動

 

動畫解決了界面中的許多功能問題,同時讓人們感受到活力和真正的互動。

1、顯示系統(tǒng)狀態(tài)

當應用程序忙于做某事時,您應該通過顯示系統(tǒng)狀態(tài)讓用戶知道該應用程序未被凍結(jié)。進度的視覺標志讓用戶對應用程序有一種控制感。

這個應用程序使用動畫來通知用戶現(xiàn)在正在加載內(nèi)容

 

2、導航轉(zhuǎn)換

動畫是描述狀態(tài)轉(zhuǎn)換的最佳工具。 它有助于用戶理解頁面布局的變化,引發(fā)變化的內(nèi)容,以及如何在需要時再次發(fā)起切換。

 

3、視覺反饋

在物理世界中,物體對我們的相互作用做出反應。人們希望數(shù)字用戶界面控件具有類似的響應。

良好的視覺反饋讓用戶的交互更加舒適。所有的交互元素(如按鈕)應該提供完美的視覺反饋。

 

五、人性化數(shù)字體驗

 

1、個性化

個性化是當今移動應用最關鍵的要素之一。這是一個與用戶聯(lián)系并以真實感覺的方式,提供他們所需信息的機會。

星巴克就是一個很好的例子。該應用程序使用用戶提供的信息(例如,他們通常訂購的咖啡類型)來制作特別優(yōu)惠。

2、令人愉快的動畫

與用于提高用戶界面清晰度的功能性動畫不同,令人愉快的動畫用于使界面變得人性化。這種類型的動畫清楚表明制作應用的人關心用戶。使用令人愉快的細節(jié)能夠與您的用戶建立情感上的聯(lián)系。

 

六、推送的價值

 

71%的受訪者認為,令人討厭的通知是卸載移動應用的首要原因。

不要僅僅因為可以發(fā)送推送而推送通知 - 每個通知都應該是有價值且適時的。設計推送通知時需要考慮以下幾點:

1、避免在短時間內(nèi)發(fā)送太多通知

在很短的時間內(nèi)發(fā)送太多通知可能會導致用戶無法處理信息并簡單地忽略它。嘗試將不同的消息合并在一起發(fā)送,限制通知總數(shù)。

2、推送通知的時間

不僅你想推送的話很重要,什么推送同時也很重要。不要在奇怪的時間發(fā)送推送通知(例如在深夜)。推送通知的最佳時間是移動使用高峰時段 - 從晚上6點到晚上10點。

3、使用其它渠道來傳遞你的信息

推送通知不是向用戶發(fā)送消息的唯一方式。使用電子郵件,應用內(nèi)通知和新聞源消息等都可以,根據(jù)您想要共享的緊急程度和內(nèi)容類型通知用戶有關重要事件。

 

總結(jié)

設計人員經(jīng)常說,偉大的設計是不可見的,使用它的人關注他們自己的目標,而不是界面。作為一名設計師,您應該努力創(chuàng)造無形的界面,因為這樣的界面能夠滿足用戶的需求并提供出色的用戶體驗。

就像任何其他指南一樣,上面提到的提示只是一個開始。確保將它們與您自己的想法混合并匹配,從而做出最佳的設計方案。

每天更新,
全站高品質(zhì)素材免費下載!