盤點：Android應(yīng)用中十大常見UX錯誤

盤點：Android應(yīng)用中十大常見UX錯誤

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