2017-1-4 濤濤
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
就移動(dòng)用戶(hù)體驗(yàn)設(shè)計(jì)而言，不斷地實(shí)踐是檢驗(yàn)其好壞的一條必經(jīng)之路。在這篇文章中我們聚焦于基礎(chǔ)。我們需要去解決的是如何避免打斷用戶(hù)或者強(qiáng)迫用戶(hù)思考的問(wèn)題。
我們一開(kāi)始為什么去安裝應(yīng)用程序？是為了使我們的生活更方便。但當(dāng)一個(gè)應(yīng)用無(wú)法滿(mǎn)足這一要求時(shí)，用戶(hù)肯定就會(huì)離它而去。一個(gè)應(yīng)用的成功是受多種因素影響的，其中整體移動(dòng)用戶(hù)體驗(yàn)是最重要的影響因素。絕佳的用戶(hù)體驗(yàn)是一個(gè)應(yīng)用程序成功的關(guān)鍵。
界面是能使應(yīng)用的用戶(hù)體驗(yàn)脫穎而出的一個(gè)重要的因素。大多數(shù)的開(kāi)發(fā)人員都希望在不同終端上發(fā)布他們的應(yīng)用。當(dāng)你為多平臺(tái)規(guī)劃應(yīng)用時(shí)，請(qǐng)記住每個(gè)平臺(tái)都有自己規(guī)范和特質(zhì)。適用于一個(gè)平臺(tái)的完美設(shè)計(jì)決策可能會(huì)在另一個(gè)平臺(tái)上顯得格格不入。
當(dāng)你在安卓或ios平臺(tái)上創(chuàng)建應(yīng)用時(shí)，不要從其他平臺(tái)上照搬有鮮明主題的UI元素，也不要模仿它們的特定行為。因?yàn)槿绻銖囊粋€(gè)平臺(tái)上復(fù)制元素到另一個(gè)平臺(tái)，就極有可能影響用戶(hù)體驗(yàn)和轉(zhuǎn)換率。
輸入框、復(fù)選框、開(kāi)關(guān)以及其他的功能控件的選擇應(yīng)該基于本平臺(tái)的特征。盡可能地使用原生控件，以便讓用戶(hù)知道如何使用它們。用戶(hù)在錄入敏感數(shù)據(jù)或支付細(xì)節(jié)時(shí)才會(huì)更加信任你的應(yīng)用。下面的例子是安卓和ios平臺(tái)中相同內(nèi)容的顯示差異：
圖1 安卓中的UI元素（上）和ios中的UI元素（下）
相比于Material design，ios應(yīng)用通常外觀(guān)扁平，不使用厚度和陰影。 iOS版也有一個(gè)純文本樣式的按鈕，但它與安卓的全大寫(xiě)字母不同，并且字體更纖細(xì)。
圖2 安卓的Material design（左）vs. ios（右），圖片來(lái)源：tutsplus
字體也需要遵循每個(gè)平臺(tái)的標(biāo)準(zhǔn)：安卓使用Roboto字體，iOS使用San Francisco字體系列。
圖3 根據(jù)不同字體便可以判斷你所使用的是安卓的應(yīng)用還是ios的應(yīng)用
如果你想自定義應(yīng)用中的界面元素，請(qǐng)仔細(xì)根據(jù)你的品牌來(lái)設(shè)計(jì)，而不是把另一個(gè)不同平臺(tái)的規(guī)范作為依據(jù)。
每個(gè)平臺(tái)通常都提供成套的常用功能圖標(biāo)，例如分享、新建文檔或刪除。當(dāng)你把應(yīng)用程序遷移到另一個(gè)平臺(tái)時(shí)，應(yīng)該把對(duì)應(yīng)的圖標(biāo)替換成當(dāng)前平臺(tái)的特定圖標(biāo)。
你也應(yīng)該注意到每個(gè)平臺(tái)自身獨(dú)特的風(fēng)格：安卓系統(tǒng)圖標(biāo)通常使用較粗的筆觸，而iOS樂(lè)于使用筆畫(huà)較細(xì)的線(xiàn)形圖標(biāo)。以下是幾個(gè)圖標(biāo)的對(duì)比圖：
圖4 安卓常用功能圖標(biāo)（上）ios常用功能圖標(biāo)（下）
用戶(hù)對(duì)移動(dòng)應(yīng)用的交互模式和界面元素有特殊的期待。當(dāng)網(wǎng)頁(yè)端的設(shè)計(jì)出現(xiàn)在移動(dòng)應(yīng)用時(shí)就顯得很奇怪，這并不是因?yàn)槟睦锍鲥e(cuò)了，而是用戶(hù)對(duì)于網(wǎng)頁(yè)和移動(dòng)應(yīng)用的期望是不同的。比如帶下劃線(xiàn)的鏈接，你應(yīng)該避免去使用帶下劃線(xiàn)鏈接的文字，這屬于網(wǎng)頁(yè)而不是移動(dòng)應(yīng)用（移動(dòng)應(yīng)用使用按鈕不使用鏈接）。
下面的案例是關(guān)于TD銀行ios端應(yīng)用的登錄表單。它明顯看起來(lái)像是手機(jī)網(wǎng)頁(yè)的設(shè)計(jì)而非手機(jī)應(yīng)用。結(jié)果表明，他們只是把網(wǎng)頁(yè)代碼復(fù)制上去后封裝成應(yīng)用程序：鏈接是帶下劃線(xiàn)的，甚至在界面上還有版權(quán)聲明！
圖5 TB銀行app缺乏一個(gè)應(yīng)用程序應(yīng)有的特質(zhì)
用戶(hù)體驗(yàn)設(shè)計(jì)本質(zhì)上就是在設(shè)計(jì)流程，而流程在多數(shù)情況下是用來(lái)完成用戶(hù)目標(biāo)的。你應(yīng)該避免在應(yīng)用程序出現(xiàn)死胡同，因?yàn)檫@會(huì)給用戶(hù)帶來(lái)困惑并且導(dǎo)致不必要的操作。有時(shí)候，設(shè)計(jì)師會(huì)把錯(cuò)誤消息和空狀態(tài)作為空頁(yè)面處理，但實(shí)際上這是一個(gè)提供有用信息的好機(jī)會(huì)。就拿Spotify的這種錯(cuò)誤狀態(tài)頁(yè)面舉例：
圖6 死胡同空頁(yè)面，圖片來(lái)源：Spotify
它完全沒(méi)有幫助用戶(hù)理解情況，也沒(méi)有回答用戶(hù)“我到底該做什么？”這個(gè)問(wèn)題。
空白狀態(tài)（尤其是錯(cuò)誤狀態(tài)）不應(yīng)該是一個(gè)死胡同的狀態(tài)，它應(yīng)該告訴用戶(hù)需要怎樣操作才能看到相應(yīng)內(nèi)容，從而使應(yīng)用程序正常運(yùn)行。
圖7 Azendoo的錯(cuò)誤狀態(tài)有一個(gè)簡(jiǎn)單的“如何解決問(wèn)題”的說(shuō)明
用戶(hù)在使用應(yīng)用程序時(shí)，所有操作都應(yīng)該在該應(yīng)用程序中進(jìn)行。如果應(yīng)用程序缺少某些功能和內(nèi)容，嘗試使用一些嵌入應(yīng)用的瀏覽器；但是不要調(diào)出手機(jī)的瀏覽器，這樣會(huì)導(dǎo)致用戶(hù)失去方向并無(wú)法返回原先的應(yīng)用程序。這會(huì)提高用戶(hù)拋棄應(yīng)用的概率從而轉(zhuǎn)化率會(huì)降低。
圖8 Facebook安卓版app里的“忘記密碼？”按鈕
沒(méi)有人想要被打斷，尤其是當(dāng)一些沒(méi)用的東西出現(xiàn)在顯示重要內(nèi)容的中間位置時(shí)。避免打斷用戶(hù)，讓這些最近才下載app或者只用過(guò)寥寥幾次的用戶(hù)為你的應(yīng)用程序評(píng)分。相反，等到用戶(hù)被證明是多次使用者，他們將更有可能為您的應(yīng)用程序評(píng)分并提供更有價(jià)值的反饋。
圖9 在一開(kāi)始啟動(dòng)應(yīng)用就彈出評(píng)分要求是很糟糕的時(shí)機(jī)
你可以在用戶(hù)已經(jīng)使用該應(yīng)用程序一段時(shí)間并完成一定的任務(wù)目標(biāo)后發(fā)出評(píng)分請(qǐng)求。Dan Counsell在關(guān)于征求用戶(hù)反饋的正確時(shí)機(jī)上有一些值得關(guān)注的見(jiàn)解。這是他關(guān)于Clear（一個(gè)待辦事項(xiàng)應(yīng)用）的說(shuō)法：“Clear在ios系統(tǒng)上的評(píng)分信息對(duì)話(huà)框是基于一定的條件才會(huì)彈出的。首先，用戶(hù)必須已使用該app幾個(gè)星期；其次，Clear只會(huì)在用戶(hù)已經(jīng)清掉列表上所有的提醒事項(xiàng)后才會(huì)出現(xiàn)評(píng)分請(qǐng)求。這是一個(gè)詢(xún)問(wèn)用戶(hù)反饋的極好時(shí)機(jī)，因?yàn)榇藭r(shí)他們剛剛清空了待辦事項(xiàng)列表，準(zhǔn)備退出應(yīng)用程序。”
請(qǐng)求用戶(hù)反饋并沒(méi)有錯(cuò)，但是請(qǐng)記住你要給用戶(hù)提供一個(gè)很棒的體驗(yàn)。
人們對(duì)于應(yīng)用程序有很高的期望，而且標(biāo)準(zhǔn)越來(lái)越高。因此，你需要努力去達(dá)到這些期望，并且使你的應(yīng)用程序更加令人愉悅，而不是令人厭煩。提高用戶(hù)體驗(yàn)不是一次性的任務(wù)，它是一個(gè)持續(xù)性的工作。
翻譯：Fino
譯文地址：http://babich.biz/mobile-ux-design-what-not-to-do/
原文地址：Nick Babich, Mobile UX Design: What Not To Do.
藍(lán)藍(lán)設(shè)計(jì)( www.vcbhc.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.vcbhc.cn