Android應用UI設計模式

《Android應用UI設計模式》

圖書特色：

58個重要交互設計模式將扁平化設計理念發揮到極致，Android應用設計難題各個擊破
集各家操作系統（iOS、Windows Phone）之所長，將其絕妙理念融入Android交互設計
多個試驗模式和反模式幫助探索Android設計的前沿部分，避開設計誤區，打破設計僵局

內容簡介：

本書介紹了58種必不可少的交互設計模式，幫助你處理Android應用程序設計最具挑戰性的方方面面，以及同樣重要的12種反模式，描述了在追求客戶完善、愉悅和享受的過程中的常見錯誤，非常適合各層次的Android應用開發者、UI設計師閱讀、參考。

作者簡介：

Greg Nudelman是DesignCaffeine公司CEO兼移動體驗策略師，具有15年的移動體驗從業經驗，曾為eBay、WebEx、Wells Fargo、PayPal、Safeway、Cisco、IBM、美聯社和Groupon等財富500強企業，以及非盈利性組織和創業公司實現跨平臺的數字體驗，受到數百萬客戶的好評。Greg還是很多著名用戶體驗設計圖書的作者，其中包括Designing Search: UX Strategies for eCommerce Success。

試讀第二章：

Android的特色

自面世以來，Android始終像荷爾蒙過剩的少年，成長速度十分迅猛，變化全面而深遠。Ice Cream Sandwich發布后，相應的UI標準和設計元素發生了巨變，而這個平臺本身也更成熟穩定。盡管如此，Android的反叛精神并未泯滅，仍然具有其他移動操作系統沒有的一些特色。

亞馬遜購買地址：《Android應用UI設計模式》

?2.1 這里是平面國

如果將Android應用和iOS應用進行比較，你首先可能注意到的是前者是一個平面國：按鈕是平的，內容區域是平的，所有工具欄和控件也都是平的。就像Rudy Rucker的短篇小說Message Found in a Copy of Flatland中的平面國國民，Android“看到”的一切都是二維的。另外，Android不做任何裝扮，完全是純人工數字制品：通過想象創造出來的東西，非實物。Android就是一款運行在硬件上的軟件，而不是相反。在我看來，這是件天大的好事。為什么呢？因為不需要讓界面看起來“真實”、“漂亮”，那么內容便顯得更重要，有助于向用戶提供最基本的數字體驗。Windows Modern UI是另一款與iOS形成鮮明對比的移動操作系統，從很多方面說，它和Android 4.0采用的平面數字視覺方案很像。

下面來比較一下Android和iOS的“信息”應用，如圖2-1所示。

圖2-1 iOS和Android 4.0的“信息”應用

首先印入眼簾的是信息密度：在Android版中，屏幕上羅列的內容要多很多。原因之一是iOS使用“氣泡”來表示短信，而Android只在表格中簡單地列出短信。是不是很乏味？在有些人看來也許如此。然而，Android未做任何裝飾，整個“信息”應用就是一部簡單純粹而又強大的短信機器。整個視覺方案顯得保守，幾乎到了刻板的程度。另外，請注意工具欄：iOS規定工具欄元素必須是三維的，讓它們看起來就想要從屏幕中跳出來。這是使用漸變實現的，讓工具欄等數字對象看起來栩栩如生。相反，Android工具欄（乃至整個頁面）完全是二維的，一點也不像實物。Android毅然決然地擁抱“平面國”，“遠離三維世界”，這為創建半透明菜單（見圖2-2）、全身心地踐行“內容至上”理念打開了大門。第13章將更詳細地介紹各種菜單樣式。

圖2-2 谷歌Earth應用Android 4.0版中半透明的菜單欄與iOS版中模擬實物的菜單

整個Android屏幕呈現灰色調，只使用了剛剛夠的顏色讓工具欄較暗，而內容區域幾乎保持了屏幕的亮度。在色彩方面，Windows Modern UI等眾多移動操作系統都與Android Ice Cream Sandwich操作系統形成了鮮明對比。雖然這兩種設計語言都秉承“平面國”理念，但Windows Modern UI在色彩和交互性方面其實非常突出：通過巧妙的變換和色彩對比，每個元素都像在振動、翻轉和滑動，這種動感讓主屏幕幾乎“呼之欲出”。而常見的Android屏幕簡潔、嚴肅、一本正經，只提供必不可少的元素，就像典型的線框。更有趣的是，這種“平面國”理念也體現在按鈕和輕按目標上。Android按鈕也未使用漸變，這將在下一節討論。

2.2 輕按任何地方

很久以前，我在使用大型機工作站時第一次見到“按任意鍵繼續”的提示，它讓我一時間有點不知所措。編程是一門精確的學科，想不到按任意鍵都行！但按哪個鍵最合適呢？有沒有好壞之分？當然沒有。我很快就學會了享受自由，想都不用想，就隨便按一個鍵（但大多數情況下，我都用拇指按下空格鍵）。

Android把按鈕的概念擴大化了。iOS可謂煞費苦心，用帶斜面的立體按鈕標出可輕按的元素，而Android一切就簡，假定屏幕上的任何元素都可以輕按，通常也不提供額外的線索。就拿“信息”應用中的短信行來說吧，iOS提供了包含在圓圈內且帶斜面的“>”按鈕，而Android幾乎沒有提供對應的任何線索，如圖2-3所示。

圖2-3 Android 4.0與iOS中的表行

在Android 4.0中，用戶必須知道，要獲取更詳細的信息，可輕按元素（即表行）的任何地方。剛開始，這是個不小的認知障礙，使用過iOS或以前Android版本的用戶尤其如此。然而，大多數用戶很快就能認識到這樣一點：要獲取某個元素的更詳細信息，通常可以輕按它，即便它沒有提示。Android在向用戶灌輸“按任意鍵繼續”的理念。

Android將典型按鈕設計為“值得輕按的區域”（tap-worthy area，出自移動設計專家兼技術作家Josh Clark之口的妙語，見http://globalmoxie.com），將“輕按任何地方”的視覺設計原則展示得淋漓盡致。iOS則煞費苦心，使用了顯眼的斜面、陰影和漸變，確保按鈕看起來是可輕按的，如圖2-4所示。

圖2-4 Android“值得輕按的區域”與iOS的立體按鈕

相反，Android不遺余力地遵循“輕按任何地方”的原則，使用區域而不是按鈕，其中唯一的線索是垂直分隔條。這突顯了Android的基調：不將輕按目標限定在固定邊框內，也不讓輕按目標周圍有空白區域。這種基調意義深遠，因為如果它得到嚴格遵守，觸摸屏上的一切都將是輕按目標。對設計人員來說，這既是挑戰也是機會。之所以說是挑戰，是因為在沒有主要或次要輕按目標的情況下，用戶很可能感到迷惑：既然可以輕按任何地方，那么按哪個區域最合適？對設計和開發人員來說，無論用戶輕按什么地方，都應做出直觀的響應。如何在遵循這種設計原則的同時，不忘用戶的主要目標同時兼顧開發預算呢？第10章和第11章我們再討論。

“輕按任何地方”也提供了眾多有待挖掘的機會，讓我們能夠通過加速手勢、多點觸控手勢及“隱藏”菜單，提供內容至上的設計和沉浸式數字體驗。第13章將進一步探討各種激動人心的可能性。

2.3 適合各種設備

簡單地移植蘋果菜單不可行，這一點在Android早期版本中就顯而易見。其中一個原因是運行Android的設備種類繁多，有HTC Hero手機，有7英寸和10英寸的平板電腦，還有Android滑雪鏡、智能住宅和車用觸控面板，因此Android界面受制于眾多空間約束。還記得第1章的案例AutoTrader嗎？它采用Android 2.3及更早版本的做法，將所有功能都放在屏幕底部的導航欄菜單中。這不是好辦法，因為即便設備屏幕空間足夠，也會隱藏重要的功能。另外，提供的上下文操作難以超過三個或四個，如圖2-5所示。

圖2-5 AutoTrader應用表明，Android 2.3及更早版本的硬件菜單隱藏了重要功能

為解決這個問題，Android 4.0設計人員采用了一種貨真價實的移動解決方案：溢出菜單。要明白如何針對Android 4.0和Android 4.1進行設計，必須了解這種菜單的工作原理。功能放在一個或多個被稱為操作欄的菜單中。將功能放在多個操作欄中時，第二個操作欄被稱為次級操作欄。圖2-6所示的應用包含兩個操作欄。

圖2-6 Gmail應用包含位于頂部的主操作欄和位于底部的次級操作欄

不管有多少個操作欄（通常是一到兩個：頂部的主操作欄和底部的次級操作欄），菜單都猶如手風琴，可根據屏幕空間的大小展開或折疊。屏幕較小時，只顯示幾個重要的功能；屏幕較大時（如在平板電腦上），顯示整個菜單且通常只有一個操作欄。操作欄容納不下的功能放在溢出菜單中，這為屏幕有限的問題提供了一種可高度擴展的絕妙解決方案。圖2-7比較了平板電腦和手機中的菜單。

圖2-7 屏幕較小時，Gmail將容納不下的功能移到溢出菜單中

通常，操作欄只使用圖標，而溢出菜單只使用文本，這與iOS菜單及以前的Android菜單大相徑庭。在Android 4.0中，仍可同時使用圖標和文本，例如Google Plus的取消和確定按鈕及抽屜式菜單項，如圖2-8所示。

圖2-8 Google Plus應用在抽屜式菜單中同時使用圖標和文本

通過同時使用操作欄和溢出菜單，Android界面通常能夠適應不同的屏幕尺寸和設備朝向。然而，從人體工學的角度說，最終的UI并非都令人滿意。下一章將詳細討論設備約束。第13章將討論如何使用“瑞士軍刀導航”模式在屏幕角落放置“隱藏的”菜單，以最大限度地節省空間。第8章將介紹使用菜單處理重要功能（如搜索）的各種方式。有關如何為7英寸和10英寸平板電腦設計有效的UI，請參閱第14章。

2.4 擺脫空間限制

“輕按任何地方”和“適合各種設備”的理念帶來了一個重要變化，即可以毫不留情地將各種容器從界面中刪除！這與通常大量使用圓角容器的iOS形成了鮮明對比，如圖2-9所示。

圖2-9 “設置”應用表明，iOS倚重于UI容器

提到Windows Modern UI最鮮明的特征，不同顏色的方形容器（也叫貼片，tile）、全景視圖（Panorama）控件的統一背景和大標題（更詳細的信息請參閱第13章）是很多開發人員的共識，如圖2-10所示。

圖2-10 Windows Modern UI“設置”應用在全景視圖控件中使用統一背景和大標題

相比iOS和Windows Modern UI，Android 4.0的一個鮮明特征是，標題簡單且完全拋棄了容器。需要分隔UI的不同部分時，Android 4.0不使用容器，而使用不同顏色的標題，將其字體設置為Roboto并全部大寫，同時在下方添加水平分隔線，如圖2-11所示。

圖2-11 Android 4.0“設置”應用使用簡單標題而非容器，改善了頁面的流動性

不用容器提高了頁面的流動性，可將更多屏幕空間用于顯示內容，還讓UI更能適應不同的設備，不管其屏幕的高度和寬度如何。

如果使用容器，那么容器必須小于屏幕尺寸（即屏幕可顯示多個容器），才能確保其行為正常。因此，設備處于橫向模式時，iOS容器常常會讓人覺得很怪異。這是Android考慮的一個重要因素，因為正如前面討論過的，“適合各種設備”意味著界面必須能夠適應各種屏幕，而不管它多小、長寬比有多怪（當然得在合理范圍內）。在界面中使用容器的效果不佳，因為不能動態地調整容器，以適應不同的情形。相反，如果不對內容進行約束，讓它們能夠自由地流動，它們就能根據屏幕大小相應地調整大小。

可惜，移動設計中的一切都是要付出代價的，不用容器也不例外。不用容器雖然提高了頁面的流動性，但也要求我們增大垂直間距，以便將不同元素分隔開來。屏幕較小時，垂直間距可能很難將元素分隔開，導致整個頁面中的元素都連在一起，難以分辨。另一個問題是極簡的種顏色搭配。在前面的“設置”屏幕中，標題為淡灰色，與鏈接的顏色接近。在“日歷”等其他原生應用中，標題的顏色與活動元素相同，都是淡藍色。這兩種顏色方案都可能令人困惑，用戶難以分清哪個是可輕按的活動元素，哪個是標題。一種值得推薦的做法，是為標題、活動鏈接和活動元素設置不同的顏色，以消除困惑。

2.5 大局著眼，小處著手

在新的Android 4.0/4.1設計方案中，最有趣、最新穎的原則之一是局部操作優先原則。市面上其他所有移動操作系統（包括Android的早期版本）在確保隨時可以訪問全局導航功能方面，都特別留心。例如，為實現這個目標，iOS使用無處不在的選項卡欄，如圖2-12所示。

圖2-12 Amazon.com應用使用iOS選項卡欄確?？呻S時訪問全局導航功能

在Ice Cream Sandwich推出之前，Android應用（如Android 4.0之前的Amazon.com）也遵循這樣的原則，如圖2-13所示。

圖2-13 較老的Android應用（如Amazon.com）在導航欄中包含一個全局菜單

然而，Android 4.0將用戶帶入了一個全新的世界：總是向用戶顯示最適合當前任務的操作。

例如，在圖2-14所示的Gmail郵件列表屏幕中，Search、New Message等重要操作包含在操作欄中，而Settings、Help和Send Feedback等較通用的操作隱藏在溢出菜單中。

圖2-14 Gmail的列表視圖顯示的是全局操作

然而，顯示特定郵件后，用戶可執行的操作截然不同。在圖2-15中，你看到的不是Search和New Message等頂級菜單項，而是Favorite和Reply（頂部操作欄中的星形和箭頭圖標）等上下文操作，以及常用操作Archive、Trash和Tag（底部操作欄中的檔案柜、垃圾桶和標簽圖標）。

圖2-15 Gmail應用的詳細視圖顯示的是上下文操作而非全局菜單

依然可通過底部的溢出菜單來訪問較通用的操作，如Settings、Help和Send Feedback，但在列表視圖中可用的全局功能沒有了。這很重要，因為根據“小處著手”原則，在郵件詳情屏幕中，不能訪問Search和New Message等全局功能?；凇靶√幹帧痹瓌t，還拓展了溢出菜單：頂部的溢出菜單包含的不是郵件功能，而是不那么常用的回復選項，如Reply All和Forward。

Android 4.0的屏幕標題也不同，這是“小處著手”的另一個必然結果。例如，在iOS中，屏幕標題指出了用戶當前所處的位置，而返回按鈕指出了輕按它將前往什么地方。在圖2-16所示的“郵件”應用中，iOS將“14 of 69”用作屏幕標題，并在返回按鈕上顯示“All Mail (41)”。

圖2-16 Android屏幕標題和返回按鈕（左）與iOS屏幕標題（右）

Android 4.0沒有指出輕按返回按鈕將前往何方，而將整個標題欄都用于顯示屏幕標題（這里是郵件的主題），即用戶當前所處的位置。這會讓人感到迷惑，對以前從事iOS設計的設計人員以及以前使用iOS的用戶來說尤其如此。在這些人看來，“箭頭+徽標+標題”的含義是，輕按箭頭將返回到標題所說的目的地，這與Android 4.0截然不同。在Android 4.0中，“箭頭+徽標+標題”意味著用戶當前處于標題所說的位置，而輕按返回按鈕將返回到上一級?？上В壳皼]有好辦法讓人順利跨過認知障礙，只能慢慢習慣。

如果將這種高度局部化的屏幕標題與Android操作系統以前版本使用的面包屑（如圖2-17所示）進行比較，將發現變化非常大。除高度局部化的信息外，其他信息Android 4.0一概不顯示。

不同于以前的移動技術，Android在每個屏幕上都只顯示局部功能，這表明Android做了這樣的假定：即便不靠全局導航來獲悉當前位置，用戶也不會迷失方向。Android 4.0遵循“大局著眼，小處著手”的原則：提供高度局部化的操作和屏幕標題，而不是始終向用戶顯示全局導航（通常位于面包屑中）。這要求Android 4.0用戶對這樣一點心知肚明：要使用全局導航功能，必須按返回按鈕一次或多次。

圖2-17 “圖庫”應用的Android 4.0操作欄（左）與Android 2.3面包屑導航欄（右）

有趣的是，對很多應用來說，這種高度局部化并不合適。很有名的例子就是Facebook，它使用“瑞士軍刀導航”模式在左上角放置一個導航按鈕，用戶隨時可單擊它來訪問全局操作。第13章將介紹一些實用設計模式，可用于解決全局和局部之間的沖突。

大致了解讓Android 4.0與眾不同的總體設計原則后，接下來該探索如何在各種支持Android的設備上貫徹這些原則了。

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量58萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：