Android與iPhone界面布局對比
2011-08-26 文章來源: 深達設(shè)計
Tags:
Android,iPhone,界面,布局,對比
上圖是我根據(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)，向下滑動即可打開查看通知詳情。
Android和iPhone的狀態(tài)欄均在屏幕頂端的位置，原因無外乎是人的視覺流程是從上到下的。
Android的狀態(tài)欄，具有notification的功用，當(dāng)應(yīng)用程序有新的通知，在狀態(tài)欄左側(cè)顯示通知圖標(biāo)，向下滑動即可打開查看通知詳情。
iPhone的狀態(tài)欄，很純粹，就是狀態(tài)而已。包含了活動狀態(tài)的顯示，比如某進程正在運行，將有個轉(zhuǎn)動的動畫在這里。但是你不能對狀態(tài)欄有任何操作。
個人認(rèn)為，Android通知系統(tǒng)做得很不錯，貌似后來的Windows Phone7也效仿了此設(shè)計。
個人認(rèn)為，Android通知系統(tǒng)做得很不錯，貌似后來的Windows Phone7也效仿了此設(shè)計。
標(biāo)題欄：
Android是純粹的界面標(biāo)題欄，這里一般無操作響應(yīng)。
而iPhone的標(biāo)題欄，承擔(dān)更多的作用是導(dǎo)航，你能在這里快速后退（Android使用實體按鍵來后退），或是針對此界面進行一些操作。另外，當(dāng)你使用iPhone向下瀏覽界面內(nèi)容時，雙擊標(biāo)題，還起到快速至頂?shù)淖饔谩?br /> 標(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)簽”。
Android是純粹的界面標(biāo)題欄，這里一般無操作響應(yīng)。
而iPhone的標(biāo)題欄，承擔(dān)更多的作用是導(dǎo)航，你能在這里快速后退（Android使用實體按鍵來后退），或是針對此界面進行一些操作。另外，當(dāng)你使用iPhone向下瀏覽界面內(nèi)容時，雙擊標(biāo)題，還起到快速至頂?shù)淖饔谩?br /> 標(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)簽欄。
到目前，我也只能猜測：
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)用程序界面對上述四點進行“創(chuàng)新”。
老實說，我現(xiàn)在并沒有在設(shè)計新的手機平臺，我們公司也不會去折騰新的“某某phone”。因此鑒于我目前站立的只是這個高度，我沒有理由去為我的應(yīng)用程序界面對上述四點進行“創(chuàng)新”。
這個對比對于我來說，顯得有些無聊。
不過，我總是能發(fā)現(xiàn)一些“A mix B” 的應(yīng)用程序界面設(shè)計，讓我覺得更加無聊。
不過，我總是能發(fā)現(xiàn)一些“A mix B” 的應(yīng)用程序界面設(shè)計，讓我覺得更加無聊。
也許你和我一樣，在設(shè)計時總能聽到“XX也是這樣的”。
言外之意是抄過來吧。
于是，糟糕的事情越來越多。
于是，糟糕的事情越來越多。
真是汗顏。
無論是哪一個平臺的應(yīng)用程序設(shè)計，我個人始終堅持的觀點是：遵循OS的設(shè)計規(guī)范，熟知平臺特性，最好與平臺自帶的應(yīng)用程序保持一致的使用體驗。不需要驚喜。
你的創(chuàng)新，應(yīng)當(dāng)用在正確的地方。
深圳網(wǎng)站建設(shè)設(shè)計公司－深達設(shè)計(ttlfr.cn)，擁有專業(yè)設(shè)計團隊為企業(yè)提供網(wǎng)站建設(shè),網(wǎng)站設(shè)計,網(wǎng)站制作,FLASH網(wǎng)站建設(shè)設(shè)計,Flash互動設(shè)計,網(wǎng)頁制作,品牌設(shè)計.
