對谷歌自帶鬧鐘應(yīng)用中材料設(shè)計的吹毛求疵

0 評論 9871 瀏覽 1 收藏 15 分鐘

推薦語:這篇文章可以看作是對應(yīng)用Android Clock的快速診斷,看看外國大牛市如何診斷一款產(chǎn)品的!

這是一篇翻譯的文章,原文請查看The Android Clock App Clinic

最近因為谷歌開發(fā)日的緣故,我被邀請到土耳其,安卡拉。我作了主題為“深入發(fā)掘Anddroid狀態(tài)保存”的主題演講,并在那渡過了一段愉快的時間。為了參加這個會議,顯然我在旅行上花費了大量的時間。除了了通常的交通事項外(火車取消,航班延遲等),這趟旅行給了我大量時間來變得煩躁。因為某些緣故,我開始把玩起來Android Clock,并且注意到了幾個問題和可能的改進(jìn)。

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

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

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

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

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

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

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

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

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

在任何必要的時候展示反饋

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

就像物理世界的任何力都有反作用一樣,UI上的任何活動都必須有反饋

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

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

沒有相應(yīng)活動的反饋會對UI產(chǎn)生誤導(dǎo)

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

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

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

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

這個屏幕是干嘛的?

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

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

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

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

簡單的搜索無結(jié)果反饋

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

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

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

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

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

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

我們先前已經(jīng)解釋了反饋是多么地重要。在展示反饋的時候要遵循的其它的重要規(guī)則是:在確保反饋以合乎邏輯的方式展示。基本而言就是你必須確保反饋要在正確的時間(如同步于用戶的手勢)正確的地點(如交互的位置)完成。這樣做強(qiáng)化了用戶對應(yīng)用響應(yīng)速度和準(zhǔn)確性的印象。

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

可以看到,反饋限制于浮動動作按鈕

漣漪反饋并沒有與可點擊圖標(biāo)對齊

反饋在整個可點擊項上完成

過度反饋縮減了用戶交互的可讀性

保存屏幕之間的一致性

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

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

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

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

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

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

作者:?博客園

來源:推酷

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!