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é)出了10個(gè)最常見(jiàn)的錯(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ū)嵲谔缓侠怼?/p>
解決方案其實(shí)也很簡(jiǎn)單，采用嵌入式的載入指示即可。當(dāng)然如果你能做到實(shí)現(xiàn)在后臺(tái)加載好數(shù)據(jù)那就更棒了。
第九：你摸我不到！
首當(dāng)其沖的問(wèn)題是過(guò)小的觸摸區(qū)域。Android Design 中專(zhuān)門(mén)強(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)有了 Action Bar 來(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)行顯示 Action Overflow 來(lái)增加它的可見(jiàn)性。但是，無(wú)論怎么樣，都不要讓菜單鍵只能通過(guò)實(shí)體 Menu 鍵 (在只有虛擬鍵的機(jī)器上就會(huì)變成 Nav Bar 右側(cè)的三個(gè)小點(diǎn)) 呼出。
雖然說(shuō)現(xiàn)在 Android 最新的 API 已經(jīng)到了 Lv 18，但是你并不一定要設(shè)置 targetSdkVersion 大到 18，只要是 16 以上就行了。如果你把 API 設(shè)置到 Lv 14 甚至更低，你的應(yīng)用就會(huì)強(qiáng)制在 Nav Bar 上顯示三個(gè)小點(diǎn)，這對(duì)于某些設(shè)備比如 HTC One 的用戶而言實(shí)在是一件不能更痛苦的事情了。
還有一種情況就是繼續(xù)沿用 Android 2.3 甚至更古早的視覺(jué)風(fēng)格。這種 App 有時(shí)候看起來(lái)還算挺 Holo 的，但是當(dāng)你按下按鈕或者列表項(xiàng)的時(shí)候，Android 2.3 樣式的橙色的視覺(jué)反饋出現(xiàn)了（如 MIUI），或者卷動(dòng)的時(shí)候看到了 2.3 樣式的滾動(dòng)條，或者載入的時(shí)候看到 2.3 樣式的圈圈等等。這絕對(duì)不是用戶想要的。說(shuō)道載入時(shí)的圈圈，Roman Nurik 稍微強(qiáng)調(diào)了一下，Holo 樣式的載入環(huán)其實(shí)是兩個(gè)圈以不同的速度反向同時(shí)旋轉(zhuǎn)，能夠制造出比起單圈更為順滑的動(dòng)畫(huà)。
第六：純血的雜種 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)用名稱(chēng)放在 Action Bar 中間，或者用 iOS 樣式的 Top Bar 都是很愚蠢的行為。請(qǐng)直接用 ActionBarCompat，如果有需要在更早的版本上實(shí)現(xiàn) Action Bar，那么 Action Bar Sherlock 也不失為一個(gè)好的選擇。
另外 Drawer 是用來(lái)放主要的導(dǎo)航元素的，像搜索和設(shè)置之類(lèi)的東西放進(jìn) Overflow 就行了。此外，屏幕內(nèi)容滑動(dòng)露出 Drawer 這種方式也是不建議的（具體請(qǐng)?jiān)斠?jiàn)之前的介紹文章 Android Design 趨勢(shì)——Navigation Drawer）。
既然這篇文章講的是誤區(qū)，那么這里就尤其要強(qiáng)調(diào)一下不應(yīng)該放進(jìn) Drawer 的東西。首先最上面的主頁(yè)探索購(gòu)物和個(gè)人資料是完全沒(méi)問(wèn)題的。中間的搜索應(yīng)該放進(jìn) Action Bar，因?yàn)檫@是一個(gè)很常見(jiàn)的”動(dòng)作“，而且不是一個(gè)”導(dǎo)航元素” 。設(shè)置，幫助，關(guān)于和反饋都是應(yīng)該放進(jìn) Action Overflow 的東西另外，廣告什么的絕對(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)用上。另外，自制的符合 Android Design 的分享功能也是不錯(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è) Action Bar 罷了。而右邊則是一個(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è) web app 打包成 APK 發(fā)布，Web App 就讓它以 web App 的形態(tài)存在吧，Android 歡迎 web Apps。用戶可以把 web Apps 以書(shū)簽的形式固定在桌面，完全沒(méi)必要專(zhuān)門(mén)發(fā)布一個(gè)偽裝成本地應(yīng)用的 web App。實(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)門(mén)見(jiàn)山的要用戶注冊(cè)，使用啟動(dòng)畫(huà)面都是很糟糕的。用戶更希望應(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)畫(huà)/圖片幻燈來(lái)告訴用戶你的應(yīng)用是干什么的。這方面做得很好的是 Next Browser。
第一：Android ≠ 豎屏手機(jī)
Android 設(shè)備千千萬(wàn)，并不是只有豎屏的手機(jī)。糟糕的平板支持或者橫屏支持只會(huì)給你的品牌帶來(lái)負(fù)面的影響（如 MIUI 自帶應(yīng)用都還沒(méi)有支持橫屏）。
有很多人確實(shí)是會(huì)橫著用手機(jī)的，比如說(shuō)那些用車(chē)載底座/充電底座的用戶。橫屏支持的方式有很多，請(qǐng)?zhí)暨x最合適的方案。而且這里的重點(diǎn)其實(shí)是，不要強(qiáng)迫用戶只使用某個(gè)方向的設(shè)備。
另外，Android 平板的占有率也在不斷變多，雖然手機(jī)和平板間的界限越來(lái)越模糊，但這可不是不提供平板支持/優(yōu)化的接口。Android 設(shè)備幾乎囊括了從 3″ 到 10″ 間的所有尺寸，所以合理的利用響應(yīng)式設(shè)計(jì)吧，它能提供更為合理的多屏支持。仔細(xì)考慮留白，布局和其他設(shè)計(jì)，不要忽視那些平板用戶。 只要一兩個(gè)小時(shí)的 XML 工作就能讓你做到很多東西。
到這里，十大常見(jiàn)錯(cuò)誤就都說(shuō)完了。如果你覺(jué)得還有什么常見(jiàn)的錯(cuò)誤，請(qǐng)?jiān)谠u(píng)論或者微博評(píng)論中告訴我。