移動(dòng)應(yīng)用是人們獲取內(nèi)容和服務(wù)的主流方式。但是，根據(jù)《財(cái)富》雜志，超過(guò)75％的用戶(hù)只需要打開(kāi)一次應(yīng)用程序，然后再不再需要它。今天，移動(dòng)用戶(hù)期望更高的應(yīng)用程序——加載速度更快，使用方便，并具有愉快的互動(dòng)體驗(yàn)。在最小化交互級(jí)別（限制完成任務(wù)所需的步驟）的同時(shí)適應(yīng)場(chǎng)景很快成為許多應(yīng)用程序的標(biāo)準(zhǔn)。

究竟什么才能被視為“良好體驗(yàn)”？讓我們探討移動(dòng)應(yīng)用程序設(shè)計(jì)的基本原理。

首先，減少認(rèn)知負(fù)擔(dān)

用戶(hù)與應(yīng)用程序交互時(shí)的阻力和混淆程度越低，應(yīng)用程序繼續(xù)使用的可能性就越大。

其次，優(yōu)化交互過(guò)程

了解用戶(hù)與應(yīng)用程序交互的方式是優(yōu)化的必要條件。作為設(shè)計(jì)人員和開(kāi)發(fā)人員，我們應(yīng)該在整個(gè)交互過(guò)程中了解用戶(hù)的目標(biāo)。這將有助于我們確定任務(wù)完成期間最常見(jiàn)的問(wèn)題。

以下是一些優(yōu)化交互過(guò)程的常用方法：

1.拆分任務(wù)

如果客戶(hù)端上的任務(wù)包含許多步驟和操作，則最好將任務(wù)拆分為多個(gè)子任務(wù)。這方面的一個(gè)很好的例子是電子商務(wù)購(gòu)物應(yīng)用程序中的漸進(jìn)式結(jié)帳流程，您可以在其中查看從拆分步驟開(kāi)始的每一步。

△通過(guò)限制客戶(hù)端所需的操作次數(shù)，可以提高用戶(hù)對(duì)過(guò)程的理解。圖片來(lái)源：Dribbble

2.充分利用您已經(jīng)知道的用戶(hù)信息

在下面的示例中，您可以看到點(diǎn)——優(yōu)步申請(qǐng)考慮。應(yīng)用程序不會(huì)詢(xún)問(wèn)用戶(hù)的位置，可以根據(jù)數(shù)據(jù)自動(dòng)定位。使用此功能，用戶(hù)只需選擇乘車(chē)的位置即可呼叫汽車(chē)。

3.讓每一步都是自然的

當(dāng)任務(wù)要求用戶(hù)完成許多步驟時(shí)，請(qǐng)通過(guò)清楚地顯示下一步來(lái)幫助用戶(hù)。

△此界面通過(guò)在每次用戶(hù)操作后提供下一步來(lái)引導(dǎo)用戶(hù)。圖片來(lái)源：Dribbble

4.每個(gè)屏幕優(yōu)先于主要功能

通過(guò)遵循這個(gè)簡(jiǎn)單的規(guī)則，可以使界面更容易學(xué)習(xí)和使用。使用視覺(jué)權(quán)重來(lái)優(yōu)化重要元素（例如增加核心按鈕的對(duì)比度）。

△Airbnb突出顯示帶有顏色的核心按鈕

第三，減少混亂

良好的UI設(shè)計(jì)僅顯示相關(guān)信息（信號(hào)）并避免不需要的信息（噪聲）。

填充界面時(shí)，會(huì)給用戶(hù)帶來(lái)很大的壓力。每次添加按鈕，圖片或圖標(biāo)時(shí)，界面都會(huì)更復(fù)雜。桌面上的混亂是可怕的，但在移動(dòng)設(shè)備上更糟糕，因?yàn)槲覀儧](méi)有足夠的屏幕空間供用戶(hù)操作。

△透明標(biāo)簽欄（右）看起來(lái)比凌亂（左）更舒適。圖片來(lái)源：Apple

提示：如果要在用戶(hù)操作期間減少其中一個(gè)接口遇到的混淆，則僅顯示當(dāng)前步驟中所需的內(nèi)容。例如，當(dāng)用戶(hù)進(jìn)行選擇時(shí)，他們只需要顯示當(dāng)前用戶(hù)需要的選項(xiàng)，然后在下一個(gè)界面中顯示詳細(xì)信息。

△上圖是一款名為Duolingo的iOS應(yīng)用程序，一步一步的界面（逐步顯示更多信息）

第四，明確導(dǎo)航

如果用戶(hù)發(fā)現(xiàn)很難找到他想要的東西，即使界面美觀且內(nèi)容豐富，它也變得毫無(wú)意義。

一些導(dǎo)航規(guī)則：

別隱藏。避免隱藏導(dǎo)航，例如手勢(shì)，因?yàn)榇蠖鄶?shù)用戶(hù)發(fā)現(xiàn)很難找到。

一致性。開(kāi)發(fā)人員經(jīng)常隱藏單個(gè)頁(yè)面上的菜單。不要這樣做，因?yàn)樗赡軙?huì)使您的用戶(hù)感到困惑。

顯示當(dāng)前位置。沒(méi)有告訴用戶(hù)當(dāng)前位置是許多應(yīng)用程序的常見(jiàn)問(wèn)題。 “我在哪里？”這是應(yīng)用程序需要通知用戶(hù)的最基本問(wèn)題之一。

提示：最好使用標(biāo)準(zhǔn)導(dǎo)航模式。如標(biāo)簽欄（iOS）和抽屜導(dǎo)航（Android）。大多數(shù)用戶(hù)都熟悉這兩種導(dǎo)航模式。如果一個(gè)簡(jiǎn)單的解決方案有效，您就不需要獨(dú)立。

△圖片來(lái)源：谷歌設(shè)計(jì)

五，結(jié)合手機(jī)本身的特點(diǎn)

手機(jī)不是桌面的縮小版，它們有自己的細(xì)微差別和局限性。

第六，視覺(jué)指導(dǎo)應(yīng)準(zhǔn)確

UI界面元素需要清楚地表達(dá)哪些元素是交互的，哪些元素不是。

與桌面不同，用戶(hù)可以使用鼠標(biāo)懸停效果來(lái)確定元素是否可操作，而移動(dòng)用戶(hù)只能單擊元素以確定哪些元素可操作。一個(gè)好的設(shè)計(jì)應(yīng)該允許用戶(hù)正確預(yù)測(cè)。

七，操作區(qū)域應(yīng)該友好

在移動(dòng)界面中設(shè)計(jì)操作元素時(shí)，為了方便用戶(hù)點(diǎn)擊，關(guān)鍵點(diǎn)是將點(diǎn)擊目標(biāo)設(shè)計(jì)得足夠大。根據(jù)經(jīng)驗(yàn)，一般有效的觸摸區(qū)域是7-10毫米。此區(qū)域允許用戶(hù)在單擊目標(biāo)時(shí)查看目標(biāo)的邊緣。用戶(hù)可以知道他們是否準(zhǔn)確地點(diǎn)擊了目標(biāo)。

另外，請(qǐng)確保元素之間的位置不要太近。應(yīng)在點(diǎn)擊目標(biāo)之間設(shè)置適當(dāng)?shù)拈g距，以防止意外接觸。

△圖片來(lái)源：Apple

八，考慮拇指空間

設(shè)計(jì)拇指不僅要設(shè)計(jì)足夠大的目標(biāo)區(qū)域，還要考慮設(shè)備的保持方式。

盡管拇指可以在屏幕的大部分區(qū)域中操作，但只有三分之一的屏幕是一個(gè)真正輕松的區(qū)域，稱(chēng)為拇指舒適區(qū)。其他區(qū)域需要手指拉伸，甚至更換手柄才能操作。根據(jù)手持式（左手，右手或雙手），您可以看到移動(dòng)設(shè)備中的安全區(qū)域（如下圖中的綠色區(qū)域）。

△圖像來(lái)源：粉碎雜志

屏幕越大，操作越不容易。

△根據(jù)Scott Hurff的研究，右手拇指區(qū)域

為移動(dòng)應(yīng)用程序設(shè)計(jì)需要考慮所有不同的領(lǐng)域：

綠色區(qū)域是導(dǎo)航選項(xiàng)或頻繁交互（如操作指南按鈕）的最佳選擇。

△“共享”按鈕位于綠色拇指區(qū)域。

紅色區(qū)域是潛在危險(xiǎn)選項(xiàng)（如刪除或刪除）的最佳位置。用戶(hù)不太可能弄錯(cuò)。

△在難以觸及的紅色區(qū)域放置破壞性操作（如刪除和刪除），因?yàn)槟幌Ｍ脩?hù)被觸摸。

九，中斷設(shè)計(jì)

我們生活在一個(gè)充滿(mǎn)混亂的世界。有些事情總是試圖分散我們的注意力并將注意力轉(zhuǎn)移到其他地方。

例如，用戶(hù)可以在等待火車(chē)時(shí)使用應(yīng)用程序。考慮移動(dòng)應(yīng)用場(chǎng)景至關(guān)重要。允許應(yīng)用在用戶(hù)中斷使用后輕松恢復(fù)到之前的狀態(tài)。

Twitter是中斷設(shè)計(jì)的一個(gè)很好的例子。應(yīng)用程序的通知列表顯示所有最近的通知。只要用戶(hù)停留在此頁(yè)面上，該應(yīng)用程序就不會(huì)自動(dòng)更新列表——它只是在列表頂部顯示狀態(tài)“X新通知”。這允許用戶(hù)在一段時(shí)間之后重新使用應(yīng)用程序而不會(huì)丟失當(dāng)前位置。

十，努力創(chuàng)造多終端一致性體驗(yàn)

移動(dòng)應(yīng)用程序不存在于真空中。

例如，用戶(hù)通常在移動(dòng)端瀏覽購(gòu)物網(wǎng)站，然后切換到桌面進(jìn)行購(gòu)買(mǎi)。用戶(hù)無(wú)法察覺(jué)經(jīng)驗(yàn)的變化。

△Spotify可實(shí)現(xiàn)無(wú)縫的多終端體驗(yàn)。您可以在Mac上設(shè)置播放列表，并立即在iPhone上使用。當(dāng)您在設(shè)備之間切換時(shí)，應(yīng)用程序會(huì)記住您要停止的位置。

十一。直觀的手勢(shì)

僅在您的應(yīng)用中使用最自然的手勢(shì)。為什么？因?yàn)槭謩?shì)是隱藏的控件。

正如Thomas Joos在他的文章《超越按鈕：擁抱手勢(shì)操作》中指出的那樣，在用戶(hù)界面中使用手勢(shì)的最大缺點(diǎn)是學(xué)習(xí)曲線(xiàn)。每次使用手勢(shì)而不是可見(jiàn)控件時(shí)，應(yīng)用的學(xué)習(xí)曲線(xiàn)都會(huì)上升。這是因?yàn)槭謩?shì)具有較低的可發(fā)現(xiàn)性——它們總是被隱藏起來(lái)，人們需要首先識(shí)別這些選項(xiàng)。這就是為什么您只使用廣泛接受的用戶(hù)想要在您的應(yīng)用中使用的手勢(shì)。

良好手勢(shì)的一個(gè)示例是刷新源流應(yīng)用程序。

△圖像來(lái)源：Ramotion

十二，使用框架界面使應(yīng)用程序能夠快速顯示

應(yīng)用程序應(yīng)該快速敏感地響應(yīng)，但不可避免地會(huì)遇到一些特殊情況。

例如，互聯(lián)網(wǎng)速度非常慢。如果你不能縮短加載時(shí)間，至少讓等待更少無(wú)聊?？梢允紫燃虞d信息的幀結(jié)構(gòu)（即，臨時(shí)信息容器）。

框架接口是頁(yè)面的空白版本，其中信息逐漸加載。與加載動(dòng)畫(huà)不同，用戶(hù)的注意力集中在數(shù)據(jù)加載本身，框架界面將用戶(hù)的注意力集中在進(jìn)度而不是等待時(shí)間上。

△Slack應(yīng)用框架接口

十三，注意第一次使用體驗(yàn)

就像一個(gè)人一樣，該應(yīng)用程序?qū)](méi)有第二次機(jī)會(huì)給用戶(hù)留下良好的第一印象。如果你沒(méi)有留下第一印象，我打賭（概率為80％），用戶(hù)不會(huì)再次使用它。

十四，必要的指導(dǎo)

對(duì)于指導(dǎo)規(guī)則，它不應(yīng)該是多功能的，但應(yīng)該幫助人們?nèi)绾问褂迷搼?yīng)用程序。

設(shè)計(jì)師應(yīng)該以指導(dǎo)為契機(jī)，為新手用戶(hù)開(kāi)辟綠色通道。另一點(diǎn)，指南應(yīng)該只在首次使用時(shí)出現(xiàn)。

十五，空頁(yè)設(shè)計(jì)

空狀態(tài)（或零狀態(tài)）是沒(méi)有任何反應(yīng)的狀態(tài)。這個(gè)狀態(tài)不應(yīng)該是一個(gè)空白的界面（或者像許多設(shè)計(jì)師所說(shuō)的那樣死了），并且應(yīng)該能夠?yàn)橛脩?hù)提供下一步操作的指導(dǎo)。

以Spotify的錯(cuò)誤狀態(tài)頁(yè)面為例。它無(wú)助于用戶(hù)了解正在發(fā)生的事情，并且無(wú)法幫助用戶(hù)找到解決方案：“我該怎么辦？”

△申請(qǐng)中應(yīng)該沒(méi)有死胡同

比較NFL Fantasy的空狀態(tài)。其空狀態(tài)顯示簡(jiǎn)單且有用的錯(cuò)誤消息。簡(jiǎn)單，有禮貌，有啟發(fā)性：

出了什么問(wèn)題，可能的原因是什么。

用戶(hù)需要做些什么來(lái)解決這個(gè)問(wèn)題。

△NFL Fantasy解釋了為什么用戶(hù)看不到任何東西并告訴用戶(hù)該做什么。圖像來(lái)源：Emptystates

十五，使用功能動(dòng)畫(huà)來(lái)改善互動(dòng)體驗(yàn)

動(dòng)畫(huà)解決了界面中的許多功能問(wèn)題，同時(shí)使界面更加動(dòng)態(tài)和敏感。

16.顯示系統(tǒng)狀態(tài)

當(dāng)應(yīng)用程序忙于處理操作時(shí)，應(yīng)該讓用戶(hù)知道當(dāng)前狀態(tài)而不是卡住。視覺(jué)變化為用戶(hù)提供了對(duì)應(yīng)用程序的控制感。

△此應(yīng)用程序通知用戶(hù)正在通過(guò)動(dòng)畫(huà)加載內(nèi)容。圖片來(lái)源：Ramotion

十七，導(dǎo)航過(guò)渡

動(dòng)畫(huà)是描述狀態(tài)轉(zhuǎn)換的最佳工具。它可以幫助用戶(hù)了解頁(yè)面布局更改，點(diǎn)擊后更改以及在需要時(shí)如何開(kāi)始此類(lèi)更改。

△功能動(dòng)畫(huà)可以有效地引導(dǎo)用戶(hù)，使復(fù)雜的跳躍易于理解。圖像來(lái)源：Jae-seong，Jeong

十八，視覺(jué)反饋

在現(xiàn)實(shí)世界中，對(duì)象響應(yīng)我們的交互。在UI控件中，人們也期待類(lèi)似的響應(yīng)。

良好的視覺(jué)反饋使交互式體驗(yàn)非常舒適。所有交互式元素（如按鈕）都應(yīng)提供完美的視覺(jué)反饋。

△按鈕響應(yīng)用戶(hù)的點(diǎn)擊。圖像源：Shakuro

19.人性化的經(jīng)驗(yàn)??

個(gè)性化

個(gè)性化是當(dāng)今應(yīng)用程序中最關(guān)鍵的部分之一。這是與用戶(hù)溝通的機(jī)會(huì)，為每個(gè)用戶(hù)提供他們所需的信息，使他們感覺(jué)應(yīng)用程序是為他們量身定制的。

星巴克就是一個(gè)很好的例子。應(yīng)用程序使用用戶(hù)提供的信息（例如，他們經(jīng)常訂購(gòu)的咖啡）來(lái)提供特別優(yōu)惠。

二十，令人愉快的動(dòng)畫(huà)

與提高用戶(hù)界面清晰度的功能動(dòng)畫(huà)不同，令人愉悅的動(dòng)畫(huà)用于使界面看起來(lái)更人性化。這種類(lèi)型的動(dòng)畫(huà)允許用戶(hù)感受到設(shè)計(jì)者的意圖。一些令人愉快的小細(xì)節(jié)是應(yīng)用程序與用戶(hù)建立情感聯(lián)系的機(jī)會(huì)。

△圖像來(lái)源：Dribbble

二十一，推送的價(jià)值

惱人的通知是用戶(hù)卸載應(yīng)用程序的主要原因（71％的受訪者）。

△資料來(lái)源：Appiterate Survey

不要只是因?yàn)槟憧梢园l(fā)送推送通知——每個(gè)通知都應(yīng)該對(duì)用戶(hù)及時(shí)有價(jià)值。在設(shè)計(jì)推送通知時(shí)需要考慮以下事項(xiàng)：

1.避免在短時(shí)間內(nèi)發(fā)送過(guò)多通知

在短時(shí)間內(nèi)推送太多通知會(huì)導(dǎo)致過(guò)度殺傷 - ——用戶(hù)無(wú)法讀取有效信息，但可以直接跳過(guò)。嘗試將不同的消息組合在一起以限制通知總量。

2.通知時(shí)間

通知的內(nèi)容不僅重要，而且在何時(shí)發(fā)送通知同樣重要。不要在奇數(shù)時(shí)間（如午夜）發(fā)送通知。推送通知的最佳時(shí)間應(yīng)該是應(yīng)用程序的高峰使用率——下午6點(diǎn)到10點(diǎn)之間。

3.通過(guò)其他渠道發(fā)布信息

推送通知不是向用戶(hù)發(fā)送消息的唯一方式。使用電子郵件，應(yīng)用程序通知和新聞源，根據(jù)您要共享的內(nèi)容的緊急程度和類(lèi)型，通知用戶(hù)重要事件。

△根據(jù)緊急程度和內(nèi)容選擇適當(dāng)?shù)耐ㄖ?lèi)型。資料來(lái)源：Appboy

結(jié)論

偉大的設(shè)計(jì)應(yīng)該是無(wú)形的，使用它的人專(zhuān)注于他們的目標(biāo)而不是界面。作為設(shè)計(jì)師，您應(yīng)該嘗試設(shè)計(jì)一個(gè)不可見(jiàn)的界面，因?yàn)檫@個(gè)界面不僅滿(mǎn)足了用戶(hù)的需求，還提供了良好的用戶(hù)體驗(yàn)。

與其他指南一樣，上面的一些摘要僅僅是開(kāi)始。務(wù)必將它們與您自己的想法結(jié)合起來(lái)，以獲得最佳效果。

« 在移動(dòng)互聯(lián)網(wǎng)時(shí)代，影院如何使用場(chǎng)景營(yíng)銷(xiāo)？ | 操作是干邑的通道。 »