Android與iPhone應(yīng)用程序界面布局對比.doc

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