推薦語(yǔ)：這篇文章可以看作是對(duì)應(yīng)用Android Clock的快速診斷，看看外國(guó)大牛市如何診斷一款產(chǎn)品的！

這是一篇翻譯的文章，原文請(qǐng)查看The Android Clock App Clinic

最近因?yàn)楣雀栝_(kāi)發(fā)日的緣故，我被邀請(qǐng)到土耳其，安卡拉。我作了主題為“深入發(fā)掘Anddroid狀態(tài)保存”的主題演講，并在那渡過(guò)了一段愉快的時(shí)間。為了參加這個(gè)會(huì)議，顯然我在旅行上花費(fèi)了大量的時(shí)間。除了了通常的交通事項(xiàng)外（火車(chē)取消，航班延遲等），這趟旅行給了我大量時(shí)間來(lái)變得煩躁。因?yàn)槟承┚壒?，我開(kāi)始把玩起來(lái)Android Clock，并且注意到了幾個(gè)問(wèn)題和可能的改進(jìn)。

這篇文章可以看作是對(duì)應(yīng)用Android Clock的快速診斷。應(yīng)用診斷通常為第三方應(yīng)用專(zhuān)用，但是畢竟沒(méi)有絕對(duì)理由認(rèn)為這不能在Google應(yīng)用上執(zhí)行。而且，我認(rèn)為，對(duì)一些本可以做得更好的細(xì)節(jié)進(jìn)行展示和解釋?zhuān)旧砭褪且环N學(xué)習(xí)和提高的良好方式。使用好的和壞的例子來(lái)說(shuō)明UI/UX指南，是大多數(shù)人類(lèi)交互指南的基礎(chǔ)。材料設(shè)計(jì)指南大量使用了這種方式。而且要牢記于心的是，指南和復(fù)查并非絕對(duì)的規(guī)則，而是，顧名思義，是服從于大家的討論結(jié)果的。

在討論我列的有關(guān)Clock應(yīng)用的問(wèn)題項(xiàng)之前，我認(rèn)為指出應(yīng)用的修訂版本非常重要。包管理器給出的版本是3.0.3。就我所能告訴你污染，這是當(dāng)前可用的最新版本。

縱觀Clock應(yīng)用，很顯然它是經(jīng)過(guò)精心打磨的。它并不崩潰，動(dòng)畫(huà)運(yùn)行順滑，以漂亮的材料設(shè)計(jì)為特色，有一些不錯(cuò)的，獨(dú)特的細(xì)節(jié)（標(biāo)簽變化時(shí)的動(dòng)畫(huà)圖標(biāo)，基于背景顏色的時(shí)間）等。下面所列的大多數(shù)注意項(xiàng)事實(shí)上都只能看作極小的細(xì)節(jié)。但是，細(xì)節(jié)無(wú)大小。細(xì)節(jié)成就產(chǎn)品。它們是設(shè)計(jì)的一部分，給予應(yīng)用以生機(jī)。理解和修復(fù)這些小細(xì)節(jié)，既有助于應(yīng)用使用起來(lái)更愉快，又有益于應(yīng)用在Google?Play?Store上面脫穎而出。

細(xì)節(jié)無(wú)大小。細(xì)節(jié)成就產(chǎn)品。它們是設(shè)計(jì)的一部分，給予應(yīng)用以生機(jī)。

使用舒服的可點(diǎn)擊區(qū)域

移動(dòng)設(shè)備的交互主要基于觸摸屏。由于觸摸屏是用戶手指和應(yīng)用之間的唯一的存在，你需要確保動(dòng)作被正確地?cái)r截。對(duì)于用戶而言，越小的觸摸目標(biāo)顯然比更大的觸摸目標(biāo)更難點(diǎn)擊。問(wèn)題要使得你的可觸摸區(qū)域足夠大，使得該區(qū)域可以被輕易地點(diǎn)擊。

通常認(rèn)為，觸摸目標(biāo)應(yīng)該至少48X48dp。盡管這些要求在多數(shù)場(chǎng)景下講得通，但這并不意味著你不能使得觸摸區(qū)域更大。在任何可能的情況下，使用大的觸摸目標(biāo)甚至應(yīng)該是受到鼓勵(lì)的。在Clock應(yīng)用的“計(jì)時(shí)器”區(qū)域，“刪除”和“添加”計(jì)時(shí)器按鈕顯然缺乏足夠的可觸摸寬度，以至潛在的無(wú)操作點(diǎn)擊事件。增大可觸摸區(qū)域增加了按鈕的可訪問(wèn)性，與此同時(shí)，也保衛(wèi)了屏幕當(dāng)前的布局和設(shè)計(jì)。

大的觸摸目標(biāo)有助于輕易快速的交互

小尺寸的可觸摸區(qū)域?qū)е聼o(wú)效的無(wú)操作點(diǎn)擊事件

在任何必要的時(shí)候展示反饋

輸入反饋是UX設(shè)計(jì)中極端重要的一部分。它基本上包含用戶的輸入/活動(dòng)/任何被應(yīng)用追蹤和處理的東東。就像物理世界的任何力都有反作用一樣，UI止的任何活動(dòng)都必須有反饋。當(dāng)按鈕被按壓的時(shí)候，它的外觀發(fā)生變化以反映按壓狀態(tài)。當(dāng)列表被下拉刷新的時(shí)候，虛擬指示器會(huì)出來(lái)，以通知用戶正在加載。當(dāng)屏幕的頂部邊緣被點(diǎn)擊的時(shí)候，通知盤(pán)迅速下滑以顯示出來(lái)。

就像物理世界的任何力都有反作用一樣，UI上的任何活動(dòng)都必須有反饋

嚴(yán)格地從邏輯上來(lái)講，只有在對(duì)口活動(dòng)將被應(yīng)用執(zhí)行的時(shí)候，反饋才講得通。對(duì)用戶輸入有反映但確不做任何回應(yīng)會(huì)增加用戶的，減少了UI的可理解性。換句話說(shuō)，，如果該區(qū)域是不可交互的話，UI對(duì)用戶輸入應(yīng)該是完全透明的。

“擴(kuò)展”按鈕缺少可理解的反饋

沒(méi)有相應(yīng)活動(dòng)的反饋會(huì)對(duì)UI產(chǎn)生誤導(dǎo)

用標(biāo)題清晰地指示屏幕的目的/上下文

大多數(shù)移動(dòng)應(yīng)用由多個(gè)屏幕構(gòu)成。由于導(dǎo)航模式的存在，這些屏幕能夠顯示出來(lái)，與此同時(shí)，導(dǎo)航模式導(dǎo)致了復(fù)雜的屏幕層級(jí)結(jié)構(gòu)。當(dāng)應(yīng)用要展示大量?jī)?nèi)容的時(shí)候，這個(gè)問(wèn)題顯得尤其突出。為了在屏幕切換的時(shí)候不損失用戶，顯示每一個(gè)屏幕的目的顯得非常重要。在UI/UX設(shè)計(jì)的時(shí)候有一個(gè)關(guān)鍵點(diǎn)：通過(guò)給每一個(gè)屏幕添加標(biāo)題來(lái)解決這個(gè)問(wèn)題。在一些情況下，使用屏幕標(biāo)題也許可以幫助用戶更好地理解應(yīng)用的完整導(dǎo)航模式。

保存每一個(gè)應(yīng)用的上下文很重要，也很難辦。的確，移動(dòng)屏幕通常很小，并沒(méi)有留下足夠的空間添加標(biāo)題。默認(rèn)情況下，Toolbar(或者ActionBar)是放置標(biāo)題的完美地方。如果你想在屏幕上保存盡可能多的空間，要毫不猶豫地使用智能滾動(dòng)技術(shù)在內(nèi)容被滾動(dòng)的時(shí)候隱藏Toolbar（例如Google?Play?Store）。

多虧了它的標(biāo)題，屏幕的目的一目了然

這個(gè)屏幕是干嘛的？

關(guān)于屏幕當(dāng)前狀態(tài)的信息

正如早前描述的一樣，在執(zhí)行與UI的直接交互時(shí)，反饋是很明顯的。然而，很顯然并不僅限于此。你能夠?qū)崿F(xiàn)的另外的良好反饋是“狀態(tài)反饋”。盡管表達(dá)看起來(lái)很抽象，它僅僅包含：通知用戶當(dāng)前應(yīng)用或屏幕氣息的狀態(tài)。常用的狀態(tài)有：“有內(nèi)容”，“正在加載”，“加載出錯(cuò)”或“無(wú)內(nèi)容”。

有許多方法來(lái)可視化地展示狀態(tài)反饋。當(dāng)內(nèi)容本應(yīng)該正常展示卻沒(méi)有展示時(shí)，“無(wú)內(nèi)容”狀態(tài)通常會(huì)展示出來(lái)?！凹虞d出錯(cuò)”狀態(tài)可能展示在布局文件中，也可能使用諸如Toast或snackbar等控件來(lái)展示。最后，“正在加載”狀態(tài)通常展示在內(nèi)容的外側(cè)，當(dāng)然也可能同時(shí)發(fā)生。當(dāng)然，加載狀態(tài)非“有內(nèi)容”狀態(tài)所獨(dú)有：應(yīng)用可能既要從本地?cái)?shù)據(jù)庫(kù)展示內(nèi)容，也要從網(wǎng)絡(luò)上加載數(shù)據(jù)。

文本和圖標(biāo)清晰地展示出沒(méi)有設(shè)置鬧鐘

簡(jiǎn)單的搜索無(wú)結(jié)果反饋

擁抱系統(tǒng)可視化語(yǔ)言和導(dǎo)航模式

“應(yīng)用即平臺(tái)”的觀點(diǎn)經(jīng)常在社交網(wǎng)絡(luò)上討論。我個(gè)人確信：應(yīng)用絕不應(yīng)該創(chuàng)建自己的可視化語(yǔ)言，而應(yīng)該擴(kuò)展應(yīng)用運(yùn)行所在平臺(tái)的平臺(tái)語(yǔ)言。這個(gè)方法主要包括在起始時(shí)使用平臺(tái)可視化語(yǔ)言，并在此基礎(chǔ)上構(gòu)建自己的品牌。

擁抱平臺(tái)的可視化語(yǔ)言和導(dǎo)航模式……縮減認(rèn)知壓力，增強(qiáng)UI的可理解性。

擁抱平臺(tái)的可視化語(yǔ)言和導(dǎo)航模式有幾個(gè)優(yōu)勢(shì)。第一點(diǎn)，顯著地縮減了第三方應(yīng)用獲取不錯(cuò)的用戶交互所要求的工作量。第二點(diǎn)，縮減了認(rèn)知壓力，增強(qiáng)了UI的可理解性。換句話說(shuō)，因?yàn)橥庥^和行為就像你設(shè)備上的其它應(yīng)用一樣，用戶可以毫不費(fèi)勁地或者只費(fèi)一點(diǎn)勁就能理解你的應(yīng)用。

“撤銷(xiāo)”圖標(biāo)看起來(lái)不符合Lollipop主題

恰當(dāng)?shù)貓?zhí)行反饋

我們先前已經(jīng)解釋了反饋是多么地重要。在展示反饋的時(shí)候要遵循的其它的重要規(guī)則是：在確保反饋以合乎邏輯的方式展示?；径跃褪悄惚仨毚_保反饋要在正確的時(shí)間（如同步于用戶的手勢(shì)）正確的地點(diǎn)（如交互的位置）完成。這樣做強(qiáng)化了用戶對(duì)應(yīng)用響應(yīng)速度和準(zhǔn)確性的印象。

Android?Clock應(yīng)用于十分善長(zhǎng)展示有響應(yīng)的反饋。然而，有些情況下，可視化反饋出現(xiàn)在了錯(cuò)誤的地方。有時(shí)候甚至都已經(jīng)“過(guò)度反饋”了。

可以看到，反饋限制于浮動(dòng)動(dòng)作按鈕

漣漪反饋并沒(méi)有與可點(diǎn)擊圖標(biāo)對(duì)齊

反饋在整個(gè)可點(diǎn)擊項(xiàng)上完成

過(guò)度反饋縮減了用戶交互的可讀性

保存屏幕之間的一致性

當(dāng)牽涉到設(shè)計(jì)應(yīng)用的時(shí)候，一致性是非常重要地指南。當(dāng)多數(shù)代碼片段基于相同的邏輯/值/處理過(guò)程的時(shí)候，很顯然這將使得代碼更容易維護(hù)。從UI的角度來(lái)看，一致性是獲取連貫性和沉浸式UI的很好的方式。事實(shí)上，一致性重要保證了用戶并幫助它們更加深入地理解應(yīng)用品牌和風(fēng)格。

從顏色，字體大小，字體風(fēng)格，按鈕外觀等開(kāi)始，一致性有許多方面要考慮。有幾個(gè)技術(shù)保證了你的UI生成連續(xù)和完整的應(yīng)用。我個(gè)人問(wèn)題會(huì)創(chuàng)建小的基礎(chǔ)值集（顏色，空間間隔，方格大小，字體大小）和基于這些值的風(fēng)格集（文本外觀，控件風(fēng)格）。大多數(shù)的設(shè)計(jì)人員認(rèn)為技術(shù)是令人痛苦的限制因素。我也這些覺(jué)得……但是從長(zhǎng)遠(yuǎn)來(lái)看，這顯然是有意的具有積極意義的限制。畢竟，移動(dòng)擁有超出限制因素集合的有關(guān)創(chuàng)建驚艷體驗(yàn)的所有東西。

應(yīng)用內(nèi)的Dialog風(fēng)格發(fā)生變化（活動(dòng)和文本外觀，活動(dòng)布局等）

在主屏幕和設(shè)置屏幕里面的Overflow菜單外觀完全不同

設(shè)置使用了藍(lán)色口味顏色，而應(yīng)用的其余部分則使用了紫色

對(duì)于復(fù)查人員和開(kāi)發(fā)人員而言，診斷應(yīng)用是一種非常有趣的實(shí)踐。從復(fù)查人員的角度來(lái)看，這是了解應(yīng)用并快速學(xué)習(xí)UI/UX模式的良好方式。因?yàn)樵赨I/UX設(shè)計(jì)中，對(duì)于對(duì)錯(cuò)沒(méi)有明確的答案，應(yīng)用診斷常規(guī)情況下可以幫助權(quán)衡所有解決方案的利弊。從開(kāi)發(fā)人員的角度來(lái)看，應(yīng)用診斷是從應(yīng)用上已經(jīng)花費(fèi)的巨大工作量中后退一步的良好方式。多虧了外部的反饋，你可以更好地發(fā)現(xiàn)在你的代碼、UI/UX中漏掉的東西。顯然，作為應(yīng)用的維護(hù)人員，你將總是對(duì)是否要調(diào)整和修改應(yīng)用以反映復(fù)查人員提出的問(wèn)題擁有最終的決定權(quán)。

作者：?博客園

來(lái)源：推酷

原文地址：http://www.tuicool.com/articles/6rIvqe6