好的App之所以受用戶青睞，除了產(chǎn)品本身的功能之外，產(chǎn)品設(shè)計也是起著關(guān)鍵因素的原因之一。

懶人目錄：

一、注冊及登錄

二、首次體驗

三、日常用戶體驗

四、通知

五、賬戶設(shè)置

六、信息呈現(xiàn)

七、應(yīng)用內(nèi)搜索

八、應(yīng)用商店

圖片來源：MD RUBEL RANA/Dribbble

三、日常用戶體驗

7. 允許請求界面

當(dāng)用戶首次使用一款A(yù)pp時，他們最不想看到的就是各種彈出來的允許請求通知。比如：

• “App名稱”想給您發(fā)送通知
• “App名稱”想獲取你的通訊錄
• 是否允許“App名稱”啟用相機或麥克風(fēng)訪問權(quán)限

類似的允許請求彈出框，會讓用戶體驗大打折扣，甚至還會造成用戶最終棄用App的可能。因此，建議選擇在用戶交互過程中的上下文環(huán)境中彈出，最好就不要在用戶打開App時就立即彈出類似允許請求。

允許通知彈出框設(shè)計。圖片來源：Anton Tkachuk

8. 用戶界面交互元素的各種狀態(tài)

在移動應(yīng)用端，通常情況下，界面中的按鈕和其它交互元素都會以多種狀態(tài)呈現(xiàn)出來。因此，值得注意的是，針對移動界面上的每個交互元素在默認(rèn)情況、用戶選擇或按下的情況以及取消等情況下，彼此間的設(shè)計應(yīng)該存在明顯差別。

同一個按鈕的三種不同顯示狀態(tài)。

材料設(shè)計按鈕。圖片來源：Vadim Gromov

9. 圖標(biāo)系統(tǒng)

如果界面中的所有圖標(biāo)都采用相同的設(shè)計風(fēng)格的話，那就更容易在視覺上做到整體統(tǒng)一，并保持一定的美感。

Twitter的iOS客戶端中的菜單欄圖標(biāo)

針對界面圖標(biāo)的設(shè)計，有如下四個建議：

1. 容易識別。不要選擇大家都不認(rèn)識的框線圖標(biāo)，否則可能會造成用戶識別困難。
2. 視覺怡人。盡量減少不必要的平面細(xì)節(jié)元素，同時還可以借助動畫效果增加互動和趣味。
3. 尺寸合適。在移動客戶端，建議目標(biāo)圖標(biāo)的大小尺寸控制在7至10毫米的范圍內(nèi)。
4. 整體統(tǒng)一。從設(shè)計角度而言，整體統(tǒng)一是非常重要的一個設(shè)計原則。除了保持各圖標(biāo)整體設(shè)計風(fēng)格的統(tǒng)一，還要保證其在不同客戶端平臺之間的統(tǒng)一。

10. 錯誤狀態(tài)

最好的錯誤信息，就是永遠(yuǎn)都不會彈出的信息。

通常，最好能第一時間正確地引導(dǎo)用戶正確地與產(chǎn)品交互，從而提前避免各種錯誤的出現(xiàn)。然而，當(dāng)錯誤實在無法避免的時候，設(shè)計友好的錯誤信息，不僅可以引導(dǎo)用戶如何正確地“走上正軌”，而且還能防止用戶產(chǎn)生自己不受重視的心理。

圖片來源：Dwinawan

錯誤信息提示。在點擊“繼續(xù)”按鈕后，申請人方框中出現(xiàn)了紅色提示，提醒用戶需要填入有關(guān)信息。

針對錯誤狀態(tài)提示的設(shè)計，你應(yīng)該注意以下三種情況的設(shè)計：

• 無網(wǎng)絡(luò)連接。
• 用戶輸入錯誤信息或漏填入有關(guān)信息。
• 系統(tǒng)錯誤。

11. 加載界面

雖然說，能夠保證用戶與App的及時迅速交互是最理想的狀態(tài)，然而，有時候App的加載速度等有關(guān)表現(xiàn)卻并不盡如人意。

比如，網(wǎng)絡(luò)連接問題都可能導(dǎo)致系統(tǒng)反應(yīng)速度變慢的問題，或者導(dǎo)致有關(guān)操作反應(yīng)時間變長。在這些情況下，為了減少用戶的煩躁程度，你需要做到的是，用戶能夠感受和了解系統(tǒng)正在處理他們的操作請求。

如果無法做到這樣，用戶也無法了解其某個操作請求背后可能需要一定的加載時間，從而可能會導(dǎo)致用戶單方面地認(rèn)為App出了故障。有些情況下，用戶甚至還會不停的重復(fù)操作，而這番操作只會讓系統(tǒng)反應(yīng)更加不靈敏。

因此，在加載界面中，可以向用戶展示系統(tǒng)正在加載的動畫進(jìn)度條指示，則是通常所見的解決方案之一。

笑臉式動畫加載界面。圖片來源：Gleb Kuznetsov?

12. 成功狀態(tài)

所謂成功狀態(tài)，即向用戶展示某個操作或交互過程已經(jīng)成功完成的界面。

在設(shè)計成功狀態(tài)時，設(shè)計師應(yīng)該考慮以下兩個方面的內(nèi)容：

• 令人愉悅的狀態(tài)（首次成功）。用戶首次完成某項重要交互任務(wù)的這個時候，往往是創(chuàng)造其與產(chǎn)品之間友好情感聯(lián)結(jié)的機會。建議讓用戶了解其交互進(jìn)展，讓他們知道其交互過程非常順利，并且與用戶共同分享這個成功的時刻。
• 確認(rèn)界面。對于電子商務(wù)應(yīng)用來說，最終的確認(rèn)界面是必不可缺的。當(dāng)用戶成功下單并完成支付后，需要向其展示其訂單有關(guān)重要細(xì)節(jié)的確認(rèn)界面。

全球酒店在線預(yù)定應(yīng)用Booking.com的確認(rèn)界面。

13. 自動填入

就設(shè)計師而言，應(yīng)該始終保持減少用戶在交互過程中的不必要操作，從而減少用戶的交互成本?！白詣犹钊搿惫δ埽涂梢酝ㄟ^減少用戶輸入的信息量，從而簡化用戶的交互過程和體驗。

自動填入示例。圖片來源：Louise Chang

14.?撤銷操作

在使用數(shù)字產(chǎn)品的過程中，誰都有可能一不小心而出現(xiàn)操作錯誤。但值得一提的是，在涉及用戶體驗時，一定要提供有關(guān)操作選項，讓用戶可以撤銷并恢復(fù)其原有的重要數(shù)據(jù)信息。

撤銷已刪除項目。圖片來源：Sashoto Seeam

撤回已發(fā)送郵件。圖片來源：Tyler Beauchamp

15.?本地化及國際化

由于許多產(chǎn)品團隊最終都有讓產(chǎn)品走向全球的宏偉規(guī)劃，因此，在設(shè)計過程中，就必須重視本地化及國際化等方面的設(shè)計。

在產(chǎn)品界面中，各界面元素的視覺特性（比如尺寸）都需要考慮本地化及國際化等方面的因素。比如，同一個操作按鈕，其文本在不同的語種中，文字長度可能就存在差別，其按鈕設(shè)計就需要根據(jù)實際情況進(jìn)行相應(yīng)調(diào)整。

不同語言版本的“贊”。圖片來源：Chier Hu

16. 幫助文檔

當(dāng)用戶在使用產(chǎn)品過程中遇到問題時，他們的第一反應(yīng)自然是去在App里面尋找有關(guān)解決方案。因此，建議在App中向用戶提供一個幫助文檔或者問答頁面的鏈接。

幫助及反饋頁面。圖片來源：Alex Muench

17. 可訪問性

所謂可訪問性，實際上它就代表著用戶能夠正常去認(rèn)識、理解并且與產(chǎn)品交互。

針對可訪問性的設(shè)計，主要有以下四個方面的建議：

• 為靈活性而設(shè)計。結(jié)合我們的手指尺寸，建議在移動端的界面元素至少保留9*9毫米的尺寸，同時在該元素周圍留出一小部分不會被激活交互的空間。為了防止意外點擊或觸碰，應(yīng)當(dāng)只有在手指離開屏幕后，才激活某個操作。此外，為了適應(yīng)大拇指的移動范圍，最常用的界面元素應(yīng)該放置于大拇指的移動范圍內(nèi)，當(dāng)然也要留意用戶到底是左撇子還是右撇子等特定條件。
• 為聽覺而設(shè)計。毋庸置疑的是，使用產(chǎn)品的用戶中，可能存在一部分的聽覺障礙人士。因此，在設(shè)計音頻內(nèi)容部分時，最好可以讓用戶選擇以文本形式呈現(xiàn)某些這些內(nèi)容；而對于視頻內(nèi)容，相關(guān)非言語的元素也應(yīng)該通過文字或字幕來輔助說明。
• 為視覺而設(shè)計。而針對視覺障礙的用戶，設(shè)計師一定要注意界面的對比色和整體信息架構(gòu)。界面設(shè)計一定要重視視覺清晰度和對比度。所選用的色彩必須要符合有關(guān)標(biāo)準(zhǔn)，而文字在放大2倍以后也應(yīng)該具備可讀性。
• 為我們認(rèn)知和理解信息的方式而設(shè)計。對于有認(rèn)知障礙的人士而言，整體信息架構(gòu)的設(shè)計與呈現(xiàn)也至關(guān)重要。首先，可以按照“重要相關(guān)信息占大幅”的原則來設(shè)計，讓用戶在最少的交互中認(rèn)知最多的內(nèi)容。當(dāng)然，保持頁面整體統(tǒng)一性，也有助于用戶的認(rèn)知和理解。其次，可以借助語言來輔助理解和使用。設(shè)計師要做到整體內(nèi)容在移動端的可讀性和理解性。就英語而言，設(shè)計黃金法則之一，就是盡量使用不超過五至七年級教育水平的相關(guān)詞匯，從而保證整體的可讀性。

作者：Nick Babich

原標(biāo)題：30 Things We Often Forget When Designing Mobile Apps

譯者：俊一，神譯局是36氪旗下編譯團隊，關(guān)注科技、商業(yè)、職場、生活等領(lǐng)域，重點介紹國外的新技術(shù)、新觀點、新風(fēng)向。

來源：https://36kr.com/p/5268562

本文由 @36氪 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議