盤點(diǎn)：Android應(yīng)用中十大常見(jiàn)UX錯(cuò)誤

盤點(diǎn)：Android應(yīng)用中十大常見(jiàn)UX錯(cuò)誤

作為一個(gè)長(zhǎng)期使用Android的用戶，我在使用Android應(yīng)用的時(shí)候經(jīng)常遇到各種各樣的交互上的問(wèn)題，并且早就想整理它們寫一篇文章了。但是由于懶惰和拖延，這篇文章一直處于草稿的狀態(tài)。正巧，這期ADiA中，Android開(kāi)發(fā)團(tuán)隊(duì)為我們著重強(qiáng)調(diào)了當(dāng)下Android應(yīng)用中很常見(jiàn)的，應(yīng)該避免的錯(cuò)誤。Android開(kāi)發(fā)者關(guān)系團(tuán)隊(duì)每天都會(huì)試用無(wú)數(shù)的App或者受到無(wú)數(shù)的開(kāi)發(fā)者發(fā)來(lái)的，請(qǐng)求評(píng)測(cè)的App。在評(píng)測(cè)如此之多的應(yīng)用之后，他們總結(jié)出了一些最常見(jiàn)的錯(cuò)誤，并且在這期節(jié)目中為大家呈現(xiàn)出來(lái)。在正式介紹這些錯(cuò)誤之前，我想稍微提一句。這些錯(cuò)誤是非常具有普遍意義的錯(cuò)誤，也就是說(shuō)，你用十個(gè)應(yīng)用可能就會(huì)碰見(jiàn)這十個(gè)錯(cuò)誤，甚至你會(huì)在一個(gè)應(yīng)用中碰見(jiàn)全部十個(gè)錯(cuò)誤。這種情況在天朝顯得更加嚴(yán)峻。所以，希望這篇文章能讓大家擺脫摸著石頭過(guò)河的窘境，直接的避免一些常見(jiàn)的錯(cuò)誤。十大用戶體驗(yàn)”反模式”，Android開(kāi)發(fā)者聯(lián)系團(tuán)隊(duì)為你用心呈現(xiàn)，每個(gè)典型錯(cuò)誤都有個(gè)有趣的小標(biāo)題，希望大家看(乖)得(乖)開(kāi)(中)心(槍)。第十：你必須加載完這些東西……否則！這里的加載實(shí)際上指的是左圖中的那種，一個(gè)圈圈轉(zhuǎn)啊轉(zhuǎn)的對(duì)話框。這種對(duì)話框的出現(xiàn)是應(yīng)該要避免的，另外，比起這么一個(gè)對(duì)話框，那些不響應(yīng)Back操作的對(duì)話框?qū)嵲谔缓侠?。解決方案其實(shí)也很簡(jiǎn)單，采用嵌入式的載入指示即可。當(dāng)然如果你能做到實(shí)現(xiàn)在后臺(tái)加載好數(shù)據(jù)那就更棒了。第九：你摸我不到！首當(dāng)其沖的問(wèn)題是過(guò)小的觸摸區(qū)域。AndroidDesign中專門強(qiáng)調(diào)過(guò)，所有可觸摸的對(duì)象都應(yīng)該有至少32dp高，理想的大小是48dp，除非你的目標(biāo)用戶是嬰兒等手特小的人。另一個(gè)很糟糕的錯(cuò)誤是沒(méi)有觸摸反饋。有些開(kāi)發(fā)者不想使用標(biāo)準(zhǔn)的按鈕控件，但是標(biāo)準(zhǔn)按鈕的好處就是它有提供觸摸反饋的視覺(jué)效果。對(duì)于用戶而言，摸到?jīng)]有反饋的按鈕會(huì)讓他們認(rèn)為你的應(yīng)用(比它本身的速度)慢。對(duì)于用戶而言，感知速度是他們能體會(huì)到的，而真正的載入速度和運(yùn)行速度反而沒(méi)有感知速度那么容易被用戶體會(huì)到。另外，亮起的觸摸反饋還能指示出實(shí)際的觸摸區(qū)域。比如說(shuō)一個(gè)列表，當(dāng)用戶按下某一列表項(xiàng)的時(shí)候，這一項(xiàng)所處的一整行都會(huì)亮起，但是兩邊會(huì)留有16dp的空白，這樣便相當(dāng)于告訴用戶，這個(gè)列表項(xiàng)最靠近屏幕邊緣的16dp不是觸摸區(qū)域。第八：設(shè)計(jì)≠Photoshop首先，同學(xué)們不要學(xué)習(xí)右邊小圖上的那個(gè)變態(tài)。我知道大家都對(duì)PS能實(shí)現(xiàn)的各種各樣的效果很在行/感興趣，但是不當(dāng)?shù)?過(guò)度的使用這些效果只會(huì)讓你的應(yīng)用看起來(lái)顯得很過(guò)時(shí)或者更糟糕——很業(yè)余。當(dāng)你設(shè)計(jì)你的應(yīng)用的時(shí)候，請(qǐng)務(wù)必將注意力優(yōu)先放在內(nèi)容而不是那些高光上。用戶裝了你的應(yīng)用并不是為了看閃閃發(fā)光的按鈕，所有的這些視覺(jué)設(shè)計(jì)到最后都應(yīng)該是為了內(nèi)容服務(wù)，而不是為了裝飾而裝飾。另外，請(qǐng)務(wù)必保證應(yīng)用內(nèi)視覺(jué)風(fēng)格的一致性。沒(méi)用用戶會(huì)希望看到一個(gè)一半Holo一半草泥馬的應(yīng)用。點(diǎn)名批評(píng)一下Feedly這種外表光鮮亮麗，設(shè)置卻像是侏羅紀(jì)時(shí)代的應(yīng)用。另外，一個(gè)應(yīng)用中不應(yīng)該有太多的按鈕/選框/對(duì)話框樣式，一個(gè)就夠了——直接調(diào)用Android風(fēng)格的控件是個(gè)簡(jiǎn)單有效的辦法。還有一些開(kāi)發(fā)者，對(duì)于細(xì)節(jié)的忽視實(shí)在是到了令人發(fā)指的地步，比如說(shuō)不一致的度量，錯(cuò)誤的間距，鬼畜的用色(如我之前的微信Redesign?)，喪病的字體選擇……這些都是會(huì)令用戶感到不爽的細(xì)節(jié)，作為開(kāi)發(fā)者沒(méi)有理由忽視他們。第七：侏羅紀(jì)來(lái)客如果你的應(yīng)用是2009年的時(shí)候做的，那么你的用戶可就要遭殃了……這里最先要提到的問(wèn)題就是Menu鍵，或者說(shuō)，菜單按鈕的恥辱。我們現(xiàn)在已經(jīng)有了ActionBar來(lái)取代侏羅紀(jì)時(shí)代的菜單鍵了不是嗎？需要向下兼容也不是個(gè)借口，因?yàn)槿绻阍O(shè)置了適當(dāng)?shù)膮?shù)，那么Overflow按鈕就不會(huì)在有實(shí)體菜單鍵的機(jī)器上出現(xiàn)。當(dāng)然，你也可以讓有實(shí)體菜單鍵的機(jī)器強(qiáng)行顯示ActionOverflow來(lái)增加它的可見(jiàn)性。但是，無(wú)論怎么樣，都不要讓菜單鍵只能通過(guò)實(shí)體Menu鍵(在只有虛擬鍵的機(jī)器上就會(huì)變成NavBar右側(cè)的三個(gè)小點(diǎn))呼出。雖然說(shuō)現(xiàn)在Android最新的API已經(jīng)到了Lv18，但是你并不一定要設(shè)置targetSdkVersion大到18，只要是16以上就行了。如果你把API設(shè)置到Lv14甚至更低，你的應(yīng)用就會(huì)強(qiáng)制在NavBar上顯示三個(gè)小點(diǎn)，這對(duì)于某些設(shè)備比如HTCOne的用戶而言實(shí)在是一件不能更痛苦的事情了。還有一種情況就是繼續(xù)沿用Android2.3甚至更古早的視覺(jué)風(fēng)格。這種App有時(shí)候看起來(lái)還算挺Holo的，但是當(dāng)你按下按鈕或者列表項(xiàng)的時(shí)候，Android2.3樣式的橙色的視覺(jué)反饋出現(xiàn)了(如MIUI)，或者卷動(dòng)的時(shí)候看到了2.3樣式的滾動(dòng)條，或者載入的時(shí)候看到2.3樣式的圈圈等等。這絕對(duì)不是用戶想要的。說(shuō)道載入時(shí)的圈圈，RomanNurik稍微強(qiáng)調(diào)了一下，Holo樣式的載入環(huán)其實(shí)是兩個(gè)圈以不同的速度反向同時(shí)旋轉(zhuǎn)，能夠制造出比起單圈更為順滑的動(dòng)畫。第六：純血的雜種Android這里的原則性問(wèn)題是：不要違背“純血Android”的規(guī)約。就和標(biāo)題一樣，這一章的內(nèi)容是在說(shuō)，不要從別的平臺(tái)上搬運(yùn)元素到Android上。這個(gè)問(wèn)題我在往期的文章里也提到過(guò)很多次，這里就不展開(kāi)說(shuō)了。幾個(gè)特別要注意也是常見(jiàn)的錯(cuò)誤：-右箭頭：次級(jí)導(dǎo)航在Android上是沒(méi)有水平方向的映射的。換句話說(shuō)，次級(jí)導(dǎo)航和橫向?qū)Ш绞莾纱a事-底部標(biāo)簽欄：對(duì)于Android而言，頂部才是屬于標(biāo)簽欄的位置-從其他平臺(tái)”借鑒”視覺(jué)樣式：Android用戶想要的是Android應(yīng)用第五：導(dǎo)航就是我的品牌不要試著重新發(fā)明輪子。應(yīng)用中導(dǎo)航在Android中已經(jīng)有了成熟的定義，把應(yīng)用名稱放在ActionBar中間，或者用iOS樣式的TopBar都是很愚蠢的行為。請(qǐng)直接用ActionBarCompat，如果有需要在更早的版本上實(shí)現(xiàn)ActionBar，那么ActionBarSherlock也不失為一個(gè)好的選擇。另外Drawer是用來(lái)放主要的導(dǎo)航元素的，像搜索和設(shè)置之類的東西放進(jìn)Overflow就行了。此外，屏幕內(nèi)容滑動(dòng)露出Drawer這種方式也是不建議的(具體請(qǐng)?jiān)斠?jiàn)之前的介紹文章AndroidDesign趨勢(shì)——NavigationDrawer)。既然這篇文章講的是誤區(qū)，那么這里就尤其要強(qiáng)調(diào)一下不應(yīng)該放進(jìn)Drawer的東西。首先最上面的主頁(yè)探索購(gòu)物和個(gè)人資料是完全沒(méi)問(wèn)題的。中間的搜索應(yīng)該放進(jìn)ActionBar，因?yàn)檫@是一個(gè)很常見(jiàn)的”動(dòng)作“，而且不是一個(gè)”導(dǎo)航元素”。設(shè)置，幫助，關(guān)于和反饋都是應(yīng)該放進(jìn)ActionOverflow的東西另外，廣告什么的絕對(duì)不要有。也沒(méi)有必要在Drawer中推廣自己的App，這些東西放進(jìn)”關(guān)于”里倒是可以的。至于”我姐妹的朋友有個(gè)網(wǎng)站我保證它很有意思請(qǐng)務(wù)必去看看”這種東西，趁早刪了為妙。第四：自制的非Android風(fēng)格的分享首先注意一下，這里提供的三個(gè)截圖都是正面的例子。實(shí)際上，強(qiáng)大的應(yīng)用間分享一直是Android的強(qiáng)項(xiàng)。Android系統(tǒng)也提供了很方便的分享功能(ACTION_SEND)。開(kāi)發(fā)者完全沒(méi)必要也不應(yīng)該人為的把分享的目標(biāo)限定在某幾個(gè)應(yīng)用上。另外，自制的符合AndroidDesign的分享功能也是不錯(cuò)的選擇，比如右圖的Timely，還有沒(méi)出現(xiàn)在圖片中的Pocket，它們針對(duì)分享的內(nèi)容(文章和應(yīng)用)默認(rèn)列出了幾個(gè)比較推薦的分享方式，同時(shí)也允許用戶點(diǎn)擊More來(lái)選擇其它的應(yīng)用，免得用戶面對(duì)一長(zhǎng)條的列表不知所措。第三：利用WebView來(lái)模仿原生應(yīng)用如果你上過(guò)YouTube的話應(yīng)該不難看出，左邊的應(yīng)用整個(gè)就是源自YouTube網(wǎng)頁(yè)版的ADiA播放列表，只不過(guò)加了個(gè)ActionBar罷了。而右邊則是一個(gè)很不錯(cuò)的例子，一個(gè)第三方的ADiA應(yīng)用。它采用了響應(yīng)式設(shè)計(jì)和原生界面，繼承了Google+的評(píng)論和話題功能，提供每期ADiA幻燈片的查看功能，還有節(jié)目提醒，是一個(gè)非常棒的應(yīng)用。利用WebView來(lái)模擬原生應(yīng)用并不是個(gè)聰明的選擇，因?yàn)閷?shí)際上他的性質(zhì)是欺騙用戶。如果你試圖用WebView來(lái)呈現(xiàn)Android的核心UI控件，效果不會(huì)很好。而且，這么做也會(huì)造成運(yùn)行效率的降低，于用戶而言就是不順滑，反應(yīng)慢。不要僅僅是為了”登陸Android平臺(tái)”而把一個(gè)webapp打包成APK發(fā)布，WebApp就讓它以webApp的形態(tài)存在吧，Android歡迎webApps。用戶可以把webApps以書(shū)簽的形式固定在桌面，完全沒(méi)必要專門發(fā)布一個(gè)偽裝成本地應(yīng)用的webApp。實(shí)際上，用戶使用瀏覽器的時(shí)間越來(lái)越多了，瀏覽器的平均性能也在不斷提升，你并不會(huì)因?yàn)闆](méi)有發(fā)布本地應(yīng)用就流失用戶。所以完全不必要為此擔(dān)心。當(dāng)然，并不是說(shuō)完全的禁止使用WebView。舉個(gè)例子，GMail就采用了HTML來(lái)渲染郵件內(nèi)容并且效果很棒，四次元之前也一直是采用WebView來(lái)進(jìn)行圖片瀏覽。第二：貧弱的首屏交互無(wú)論對(duì)于什么樣的應(yīng)用，首屏的重要性都是不言而喻的。開(kāi)門見(jiàn)山的要用戶注冊(cè)，使用啟動(dòng)畫面都是很糟糕的。用戶更希望應(yīng)用能直接給它帶來(lái)內(nèi)容，而登錄和注冊(cè)都最好留到萬(wàn)不得已的時(shí)候再做(微博這樣的東西除外)。另外，先讓用戶明白你的應(yīng)用到底是干嘛的然后再要求注冊(cè)，是比較合理的。而正確的做法則是應(yīng)該整合流行的社交網(wǎng)絡(luò)登錄選項(xiàng)，并且檢測(cè)用戶是否已經(jīng)安裝了它們的客戶端，如果有，就可以直接通過(guò)客戶端驗(yàn)證登錄，能夠大大減少輸入用戶名和密碼的麻煩。實(shí)際上，你可以做盡可能多的事情幫助用戶快速通過(guò)注冊(cè)和登錄，而不是讓他們感到煩躁。在這方面，整合G+登錄的應(yīng)用的體驗(yàn)就是極好的，我只需要按下登錄按鈕，選擇賬戶，許可權(quán)限就行了，比起國(guó)內(nèi)各種應(yīng)用的輸入用戶名/郵箱/密碼要便捷太多。另外，你也可以采用展示動(dòng)畫/圖片幻燈來(lái)告訴用戶你的應(yīng)用是干什么的。這方面做得很好的是NextBrowser。第一：Android≠豎屏手機(jī)Androi設(shè)備千千萬(wàn)，并不是只有豎屏的手機(jī)。糟糕的平板支持或者橫屏支持只會(huì)給你的品牌帶來(lái)負(fù)面的影響(如MIUI自帶應(yīng)用都還沒(méi)有支持橫屏)。有很多人確實(shí)是會(huì)橫著用手機(jī)的，比如說(shuō)那些用車載底座/充電底座的用戶。橫屏支持的方式有很多，請(qǐng)?zhí)暨x最合適的方案。而且這里的重點(diǎn)其實(shí)是，不要強(qiáng)迫用戶只使用某個(gè)方