Android與iPhone應用程序界面布局對比.doc

Android與iPhone應用程序界面布局對比 azero | 時間: 2010-07-30 交互設計 下圖是我根據Android和iPhone這兩個平臺的“生產內容型的應用程序”整理出來的界面布局示例。所對比的4個點，均是兩大平臺的應用程序常規(guī)界面元素。狀態(tài)欄：Android和iPhone的狀態(tài)欄均在屏幕頂端的位置，原因無外乎是人的視覺流程是從上到下的。Android的狀態(tài)欄，具有notification的功用，當應用程序有新的通知，在狀態(tài)欄左側顯示通知圖標，向下滑動即可打開查看通知詳情。iPhone的狀態(tài)欄，包含了活動狀態(tài)的顯示，比如某進程正在運行，會有個轉動的動畫在這里，但是你不能對這個動畫有任何操作。另外，當你在瀏覽時，輕擊iPhone狀態(tài)欄，也能起到快速至頂的作用。個人認為，Android通知系統做得很不錯，貌似后來的Windows Phone7也效仿了此設計。標題欄：Android是純粹的界面標題欄，這里一般無操作響應。而iPhone的標題欄，承擔更多的作用是導航，你能在這里快速后退（Android使用實體按鍵來后退），或是針對此界面進行一些操作。另外，當你使用iPhone向下瀏覽界面內容時，雙擊標題，還起到快速至頂的作用。標簽欄：Android的標簽欄位于界面標題之下，一般最多5項，在原生的平臺界面，視覺效果也較丑。而iPhone的標簽欄是明確在屏幕下方的，也是最多5頂。相比于Android，iPhone對狀態(tài)欄的處理顯得很智能。所有顯示圖標和文字的標簽都是相同的寬度并且顯示黑色背景。當標簽被選中后，它的背景淡化并且標簽中的圖片變亮。如果應用程序的標簽欄包含5個以上的標簽，iPhone OS會顯示其中的4個并在第5個自動顯示為“更多標簽”。我曾經思考過，為什么同是標簽，Android在上，iPhone在下的問題。到目前，我也只能猜測：Android的設計師認為，標簽應該先被看到，并且不能讓menu鍵的菜單項擋到。iPhone的設計師認為，標簽是用于切換當前應用程序不同視圖的，應該更容易被按到，所以選擇在屏幕下方。也因此，我已經完全不糾結所謂的“單手持機”的情境設計，因為以上兩平臺均無法很好地支持。工具欄：Android的工具欄一般居于屏幕下方，一般是3個按鈕。考慮到可點擊域的有效性，一般最多也不建議超過5個。而iPhone的工具欄，是與標簽欄在同一位置的，即標簽欄與工具欄不共存，在屏幕下方，要么是工具欄，要么就是標簽欄。好了，對比結束。老實說，我現在并沒有在設計新的手機平臺，我們公司也不會去折騰新的“某某phone”。因此鑒于我目前站立的只是這個高度，我沒有理由去為我的應用程序界面對上述四點進行“創(chuàng)新”。這個對比對于我來說，顯得有些無聊。不過，我總是能發(fā)現一些“Amix B” 的應用程序界面設計，讓我覺得更加無聊。也許你和我一樣，在設計時總能聽到“XX也是這樣的”。言外之意是抄過來吧。于是，糟糕的事情越來越多。真是汗顏。無論是哪一個平臺的應用程序設計，我個人始終堅持的觀點是：遵循OS的設計規(guī)范，熟知平臺特性，最好與平臺自帶的應用程序保持一致的使用體驗。不需要驚喜。你的創(chuàng)新，應當用在正確的地方。分享到： 上一篇 | 該文章有10條評論1.georgexsh 2010-07-30 23:31 如果大拇指夠長 大約還是可以單手的2.不空 2010-08-04 11:21 “XX也是這樣的” -_-| ，聽了多少次，再聽到也還是汗3.宇義 2010-08-04 11:26 比較認同最后一句話。界面創(chuàng)新帶給用戶的反而是熟悉操作的成本，沒有太大必要。4.htc.cc 2010-08-04 13:46 分析的很好。5.上網本資訊 2010-08-04 15:55 轉載走了，網易不也有微博？干嘛寫騰訊的6.Harry 2010-08-04 22:41 這個問題糾結過很長時間，首先我說明下我的觀點：在界面使用OS的原生控件和布局是制作應用軟件最完美的實現方法。這點和您的看法是一致的，因為新界面和控件的用戶的學習成本非常之大。另外我的一點想法補充下：雖然使用系統原生控件和布局能夠減小用戶的學習成本并提高軟件的親和力。但這些是建立在OS本身的設計基礎之上，因為使用OS的設計會將軟件的學習成本轉嫁到OS的學習成本之上。iPhone的用戶體驗設計已經非常好，所以按照iPhone模式開發(fā)的應用，也能夠很快被用戶所接受。但這點在Android上并不相同，因為Android本身的界面和導航設計非?；靵y。單就簡單網絡應用而言，使用ListView進行列表展示，以及您所畫的Android應用程序試圖來展示獨立的item頁面，這是沒有問題的。但是對復雜一點的應用程序而言，我們會需要Tab來進行分頁，在每頁下方提供常用操作的工具欄（工具欄的按鈕最好不要超過2個，因為多了會顯得比較混亂）。另外，您還忽略了Android程序中其實非常重要的Menu菜單，如果有多余的功能項，可能還必須塞進Menu里面。這一切加上程序本身“應用程序視圖”的內容，就已經讓一切變得混亂無比。這也是所有第三方Android程序都想盡一切辦法優(yōu)化程序流程的原因。另外個人的一點實際經驗貢獻下：在默認的桌面，雖然看起來非常簡潔，但用戶需要 1）上拉AppDrawer打開程序列表；2）點擊Menu找一些比較常用的功能；3）長按桌面來彈出菜單進行更換背景以及添加Widget/Icon到桌面的操作；4)拉下Notification來查看系統的新消息；5）左滑和右滑來切換到其他桌面；6）長按圖標進行拖拽；7）在AppDrawer打開的情況下，長按里面的程序圖標來將圖標放置在桌面上；8）點擊圖標來打開這個應用程序。仔細考慮下，其實這個桌面應用已經是一個變形金剛級別的怪獸了（上滑，下滑，左滑，右滑，各個界面的短按，長按，拖拽）。對比下iPhone的桌面設計，就能看出其中的差距。從文中的圖片看出來，您確實花了很大精力來進行分析并完成這篇文章，因此我也盡可能的將我的一些想法寫了出來，希望能夠互相討論，共同進步。PS，Android的默認Tab控件是我見過最丑的Tab了，HTC的SenseUI將Tab改到屏幕下面的那個設計非常不錯，不過滑動的操作有點惡心。7.azero 2010-08-05 10:26 回復Harry：如你所言，Android目前的界面設計確實令我們感到難堪。這一點，主要是因為它目前為止仍然沒有一份官方的、正式的界面設計指南。（那個developers提到的幾點UI Guidelines，就算了吧-_-/）我曾經和同事花了一些時間去分析Android原生應用程序的界面設計，結果當然是能發(fā)現一些“規(guī)律”的?？墒钦f，Android OS的設計師似乎達成了某些一致的觀點去做這些界面規(guī)劃，盡管它沒有被寫出來，盡管我也不是那么認同某些設計。說起硬件，我討厭它的menu，因為我們總是無法預知什么時候需要它。并且有的界面menu是不響應的。另外，各個品牌，甚至同一品牌不同型號的Android手機，這些實體按鈕還不一致。在這種環(huán)境之下，于是各個Android第三方應用程序的設計者都按照自己的想法或根據iPhone作為參考，將界面移植過來。有的，我認為是合理的。而有的，是多此一舉的，甚至是極不合理的。這邊有另外一張圖，相信你看了也會有想法：/8j_QVCmCG3-xrPYkqzTiMg=/1494069176382061827.png話外，我絲毫不反對我極為喜歡iPhone的界面設計，簡潔高效的同時，設計中也蘊含了許多“計”，是讓我佩服得五體投地的。文章本意并不是批判誰，如果舉例不當，歡迎各位指正。更多的是一些期望，我期望我們清楚地知道我們到底是給用戶設計OS，還是APP，這點很重要。最后，非常感謝你的回復 :-)我非常愿意我們一起多些討論共同進步。歡迎加我，Gtalk/MSN/QQ/Email同號：8.Harry 2010-08-06 04:30 回復 azero:確實，目前的Android最缺乏的就是一部大家公認的真正意義上的UI Guideline。Google總是這樣，首先按自己的想法做出一套成品，運行無誤后丟到市場上進行檢驗，然后根據反饋的信息來進行改進。打個比方，Android 1.1和1.5的系統控件（比如按鈕）的樣式是不一樣的，所有的圖片都進行了重新繪制。目前的系統內置程序都是完完全全的Google風格界面簡單，功能實用。他們也確實有將功能簡化的本領，至少這些程序的基本功能用起來都是得心應手。如果要做界面分析的話，我感覺Android 1.6以上版本的Market應該算是里面做得最好的，且最值得學習的，我感覺這款程序包含了所有的Android界面設計精髓，包括里面的界面設計，流程，功能，導航等所有方面。蘋果公司的iOS系統可以說是藝術品，這點在iPad上體現的淋漓盡致（我只是用手隨便點擊了幾下，就被吸引住并且毫不猶豫的買了一臺）。深入使用后，更是發(fā)現iOS設計的優(yōu)秀你甚至于不需要進行界面設計，都可以通過基礎頁面框架來完成一個“看起來還不錯”的程序因為iOS的頁面布局和基本控件直接使用是一點問題都沒有的。在Android里面就無法做到這些了，因為整體界面采用類似于網頁CSS的XML布局，在基本框架完成后，你就得需要設計師來完成一些界面的效果圖除非你希望全黑或全白的界面。最起碼，在文章中的“Android界面布局”的工具欄背景，是需要設計師來提供背景圖片的。（Market中Install/Uninstall的那條工具欄的灰色背景使用的是程序內置的圖片；標題欄也是，Android默認界面并沒有這種較高的大標題欄，這里使用的其實是Market自定義的一塊布局。）從這點來說，如果你想制作一款“看起來還不錯”的Android程序，你會需要至少一名設計師?？紤]到設計師的加入，看到目前Android程序的界面我們也能大概的理解了吧，畢竟他們是最有創(chuàng)造力的。:)幾乎我所認識的所有Android人都對MENU按鍵毫無好感，目前看來，它的責任實際上是多樣并且重復的。MENU主要有2個功能：1）全局功能導航；2）當前界面的附加功能。2者雜合在一起，不僅用戶使用起來非常頭大，程序在設計時也會雜亂無章。因為你不知道這個功能是對當前界面產生影響還是會把你帶到別的什么地方。為了避免這個問題，幾乎所有的Android程序都會在界面上安置所有的功能。至少我是這么做的，而且我完全拋棄了MENU的使用。我的這種做法在使用流程上也沒有什么問題，因為全局功能導航可以通過BACK和HOME2個按鍵實現，而我在界面上已經放置了所有的功能選項。如果功能太多怎么辦？很簡單，cut掉優(yōu)先級較低的功能。Android并不適合大型的應用，如果2個功能都很重要，制作2款獨立應用可能會比1款巨無霸更好。另外，在美國有非常多的用戶不會去點擊MENU來使用菜單的高級功能。（沒有詳細的統計數據，但是這個問題確實是進行客服問答的時候問的頻率非常高的一個問題）。另外一個有趣的數據是90%的用戶（比較老的數據了）不知道Notification可以滑下來。有時間的話，我們可以討論下HOME和BACK的設計辦法，畢竟他們兩個都可以完成將用戶從程序帶到桌面的功能。BACK按鍵可能需要你多按幾下，但是從Android本身的機制看來，可能這樣做是比較好的。（實際上以前很多用戶問過如何加快手機的運行速度，我就提過這個建議，因為這樣退回到桌面會將程序完全關閉）。既然是從程序回到桌面，我們也可以考慮到另外一種可能性：在程序的主界面加入退出按鈕來實現退出功能。這些可能在iOS中都不需要考慮，因為iOS將一切都進行了完整定義：唯一的硬體按鍵將用戶從程序中帶回桌面，通過標題行的導航按鈕來實現返回上一個頁面的功能；而且iOS還禁止了一個程序對另一個程序的調用。這些無疑讓整個程序設計變得非常簡單，雖然有時候使用起來可能感覺不太好，比如程序跳轉到瀏覽器打開一個網頁后，你必須退回到桌面，再進入這個程序。Android比較鼓勵軟件間的互相跳轉（至少他的機制讓我看起來就是如此）,并且提供了簡單的調用方法，這讓我們變得非常自由，也非?；靵y。最初使用的時候可能會感覺很棒，但它至少會有讓手機變慢以及讓用戶迷失在手機的無盡導航中的問題?？偠灾?，Android本身就是一個大雜燴，他融入了人們對開源的理念（盡可能讓一切功能都變成可能，你撿想用的功能拿去用就得了），因此，它的重復功能很多。所以我們只能挑我們能用的和想用的，慢慢整理成一部可行的UI Guideline。Google目前也在探索，說不定哪天他們就發(fā)布UI Guildline的Beta版本了，哈哈。已經加你QQ了，有時間詳聊。9.azero 2010-08-06 10:14 精華回復啊我們都期待Android UI GuidelinesPS.我是根據Android2.1的原生界面進行分析的。10.ranwa 2010-08-06 14:03 借Azero的寶地跟Harry唱個“反調”Android原生界面有很多無序的界面組織，不過在某種類型的界面，原生和外來軟件在布局規(guī)范上倒是有部分的默契。把功能和設計cut掉是Iphone擅長的做法，這是基于其一貫的思路和其硬鍵條件。Iphone隨便丟個小應用就會有人follow，會忽視其實用價值而沉浸其中（僅從很多人買了Iphone卻沒裝過幾款軟件這點就可見一斑），我們又如何保證？應該說Menu和Back這兩個鍵對于功能稍強的軟件來說是個福音，解放了界面中放置他們兩個所占用的空間，尤其是Menu，如果菜單項放到界面中，那將是相當壯觀和怪異的景象（有些針對單條內容有些針對全部內容有些又和內容沒有直接關系）。只是現在Android機型屏幕巨大導致體型巨大，單手持握并操作有些難度（大拇指按到下面硬鍵的時候很難受）。我倒是認為改變這兩個硬鍵的物理位置反而更重要一些。Menu鍵用的好會是個寶，不一定要cut掉。完全脫離Menu的設計，單獨來看是沒有什么問題，不過放棄Menu帶來的主要變化就是上述說的需要cut掉一些功能或操作，這就引出了問題在當前界面中，展示出了很少