幫你創(chuàng)造優(yōu)質(zhì)移動端UI的7項最佳實踐

0 評論 6417 瀏覽 49 收藏 9 分鐘

在幾年前,關(guān)于網(wǎng)頁和APP誰做主導(dǎo)的話題還很熱,但是現(xiàn)在看來,APP無疑已經(jīng)是為用戶提供內(nèi)容和服務(wù)的主流了,它是用戶最信賴的內(nèi)容和功能的呈現(xiàn)方式。于是,隨之而來的問題就是如何在競爭無比激烈的市場中,讓你的APP在諸多同類中脫穎而出,并且讓用戶留在你的APP當中。

這無疑是一個系統(tǒng)而宏大的話題,也許不是一兩本書能夠說明白的事情。不過,實例總是有說服力的,今天我們用7個APP設(shè)計的最佳實踐來為你來展現(xiàn)優(yōu)質(zhì)APP的設(shè)計之道。

1、一屏一個任務(wù)

降低用戶完成任務(wù)之時所需耗費的精力。

你為APP的每一屏都應(yīng)當承載一個對用戶有用、有價值的交互或者任務(wù),一次完成一個任務(wù),且只能有一個任務(wù),其中應(yīng)該不包含超過1次的行為召喚(CTA)。這樣的設(shè)計能讓用戶更輕松地學(xué)習,更便捷地使用,在設(shè)計上也更容易添加刪減以及構(gòu)建。

以Uber為例,Uber 清楚地知道用戶的目的是乘坐出租車,所以,應(yīng)用程序不會一次給用戶太多的信息,會根據(jù)地理信息自動檢測用戶的位置,而Uber 提供給用戶的每一個界面的交互都是單個的,用戶只需要選取位置,下單即可。

0-N0ZcpdB9h5TklGDY

2、隱形的UI

內(nèi)容即是界面。

專注于內(nèi)容,并且盡量刪除不必要的元素,這樣可以縮短用戶集中注意力的時間,用戶將會更快地被引導(dǎo)到他們正在搜尋的內(nèi)容,而內(nèi)容本身正是一個隱形的界面。最典型的就是Google 地圖。在重新設(shè)計的時候,Google 地圖刪除了所有不必要的面板和按鈕,地圖本身就是最好的界面。

1-oIya2cV908XcgRV7_B51fA

3、呼吸的空間

使用負空間讓重要的內(nèi)容吸引用戶的注意力。

留白,或者負空間,指的是頁面設(shè)計布局中的空白部分,或者空白元素,它們常常被忽略和忽視,雖然許多設(shè)計師認為這樣的設(shè)計會浪費屏幕的空間,但是留白本身就是設(shè)計的基本元素之一。

留白常常被認為是一個活躍的元素,而非被動存在的間隙和背景?!?Jan Tschichold

留白可以提升可讀性和內(nèi)容的優(yōu)先級,在頁面布局中也發(fā)揮著重要的作用。因此,它可以合理地簡化UI并提升用戶體驗。

1-q98qLifsHx3rDoa6-eqWFg

遵循“少即是多”的原則。

4、直觀的導(dǎo)航

導(dǎo)航應(yīng)該是每個APP當中優(yōu)先級最高的組成部分。移動端APP中導(dǎo)航應(yīng)當容易被發(fā)現(xiàn),可訪問的,且盡可能少的占用屏幕空間。由于小屏幕的限制以及內(nèi)容優(yōu)先級的需要,移動端導(dǎo)航的可訪問性設(shè)計一直是一個挑戰(zhàn)。

標簽欄和導(dǎo)航欄是非常適合用來展現(xiàn)較少的導(dǎo)航選項的,它們非常適合用來展示主要的導(dǎo)航選項,一個簡單的點擊就能流暢地切換到不同的頁面。

1-1nzj8VT0eZs8qAJLzn75Qw

AppStore 中的標簽導(dǎo)航。

5、單手操作

讓你的設(shè)計兼容更大的屏幕。

iPhone 6和 6p 的發(fā)布標志著移動端設(shè)備徹底進入了大屏時代。

1-g2TEl156QUZ2CZCAlwUQ-g

關(guān)于用戶如何握持手機,下面的圖為你展現(xiàn)了最常見的三種模式:

1-NyEG4cWqQEkOl__6aEszvQ

通過觀察可以發(fā)現(xiàn),85%的用戶使用單手握持他們的手機,下面的熱圖展示了從2007年一來,各種不同尺寸的iPhone 的拇指操作區(qū)域。毫無疑問,隨著屏幕尺寸的增加,拇指能夠觸及的區(qū)域的比例正在逐步降低。

1-FAtZVSOcZUfwzFXq48WVzA

拇指的操作區(qū)域

所以,移動端界面的用戶體驗設(shè)計應(yīng)當進行調(diào)整,嘗試讓你的APP 能夠在iPhone 7和 7p 上面能夠單手操作,將導(dǎo)航置于用戶的拇指可以觸及的區(qū)域之內(nèi)。

1-1KYTczsPpITcEkO4fzDdNA

這是iOS版的 Pocket APP。所有的導(dǎo)航控件都集中在頁腳,也就是手指可以輕松觸及的區(qū)域,讓你可以輕松的單手操作。

6、讓APP運行快速

不要讓用戶等待內(nèi)容呈現(xiàn)。

試圖讓程序的響應(yīng)速度提升起來。許多任務(wù)盡量在后臺跑起來,讓前臺的展現(xiàn)速度顯得很快。將一部分操作打包到后臺運行有兩個好處:讓一些等待和加載過程不再展現(xiàn)在用戶面前,并且可以讓許多操作在用戶請求之前就發(fā)生。一個很好的例子就是 Instagram 中上傳圖片,當用戶選擇要共享的圖片之時,上傳就已經(jīng)開始。

1-mYqgKMjqrtAvIBCEaCr5oA

Instagram 邀請用戶在上傳圖片的時候添加標簽,當用戶準備按下分享按鈕的時候,上傳基本就完成了,接下來用戶就可以輕松的分享照片了。

7、善用推送通知

在推送信息之前請三思。

每天用戶都會被無數(shù)無用的推送通知所轟炸,被分散注意力,這也使得通知常常會顯得頗為惱人。根據(jù)調(diào)研,超過70%的受訪者表示,令人煩躁的推送信息是促使他們卸載應(yīng)用的主要原因。

1-tRV8bhwepMNc7lsEyleZAg

所以,要做好移動端設(shè)計,需要用好每一次的信息推送。不要為了吸引用戶而推送消息,這往往會適得其反。你需要將對于用戶有價值的信息推送出去,這樣才合適。

小貼士:有效的移動端APP信息推送策略是采用多種類型的信息推送機制,推送通知,電子郵件,應(yīng)用內(nèi)通知,新聞Feed等。多樣化的信息推送通過合理的協(xié)調(diào),創(chuàng)造良好的用戶體驗。

1-BEdI6YjX0sgqXT6deQrrrw

根據(jù)內(nèi)容的緊急性和正確性來選擇通知類型。

結(jié)語

在設(shè)計移動端APP的時候,最重要的事情還是確保它有用而又直觀。如果APP對于用戶沒有實用價值,又沒有任何理由使用它,那么它的價值就相當有限了。如果它對于用戶相當有用,但是需要花費大量的時間精力來學(xué)習和完成任務(wù),那么你需要實用良好的UI和UX來解決設(shè)計問題。

 

原文作者:Nick Babich

原文地址:uxplanet

譯者:@陳子木

譯文來自:優(yōu)設(shè)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!