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

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

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

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

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

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

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

2、隱形的UI

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

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

3、呼吸的空間

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

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

“留白常常被認(rèn)為是一個(gè)活躍的元素，而非被動存在的間隙和背景。”—— Jan Tschichold

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

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

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

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

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

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

5、單手操作

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

iPhone 6和 6p 的發(fā)布標(biāo)志著移動端設(shè)備徹底進(jìn)入了大屏?xí)r代。

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

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

拇指的操作區(qū)域

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

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

6、讓APP運(yùn)行快速

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

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

Instagram 邀請用戶在上傳圖片的時(shí)候添加標(biāo)簽，當(dāng)用戶準(zhǔn)備按下分享按鈕的時(shí)候，上傳基本就完成了，接下來用戶就可以輕松的分享照片了。

7、善用推送通知

在推送信息之前請三思。

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

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

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

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

結(jié)語

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

【Nick Babich 的用戶體驗(yàn)設(shè)計(jì)經(jīng)驗(yàn)之談】

1. 輸入框設(shè)計(jì)：《講真，你真的懂得文本輸入框設(shè)計(jì)的那些潛規(guī)則么？》
2. 表單設(shè)計(jì)：《摳細(xì)節(jié)！設(shè)計(jì)高效好用表單的10個(gè)技巧》
3. 極簡APP UI：《超贊！幫你打造極簡風(fēng)APP UI 的實(shí)用設(shè)計(jì)技巧》
4. 前端開發(fā)：《有法可依！幫你衡量一個(gè)動效是否合格的六個(gè)核心因素》
5. 面包屑：《并不簡單！網(wǎng)頁中為你指路的面包屑到底應(yīng)當(dāng)怎么使用？》
6. 移動端頁面：《跟著建議走！這樣的移動端網(wǎng)站設(shè)計(jì)才對頭》

原文地址：uxplanet
原文作者：Nick Babich
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com