Android 和 iPhone 界面布局示例
下圖是根據Android和iPhone這兩個平臺的“生產內容型的應用程序”整理出來的界面布局示例。所對比的4個點,均是兩大平臺的應用程序常規界面元素。
狀態欄:
Android和iPhone的狀態欄均在屏幕頂端的位置,原因無外乎是人的視覺流程是從上到下的。Android的狀態欄,具有notification的功用,當應用程序有新的通知,在狀態欄左側顯示通知圖標,向下滑動即可打開查看通知詳情。
iPhone的狀態欄,包含了活動狀態的顯示,比如某進程正在運行,會有個轉動的動畫在這里,但是你不能對這個動畫有任何操作。另外,當你在瀏覽時,輕擊iPhone狀態欄,也能起到快速至頂的作用。
個人認為,Android通知系統做得很不錯,貌似后來的Windows Phone7也效仿了此設計。
標題欄:
Android是純粹的界面標題欄,這里一般無操作響應。而iPhone的標題欄,承擔更多的作用是導航,你能在這里快速后退(Android使用實體按鍵來后退),或是針對此界面進行一些操作。
標簽欄:
Android的標簽欄位于界面標題之下,一般最多5項,在原生的平臺界面,視覺效果也較丑。而iPhone的標簽欄是明確在屏幕下方的,也是最多5頂。
相比于Android,iPhone對狀態欄的處理顯得很智能。所有顯示圖標和文字的標簽都是相同的寬度并且顯示黑色背景。當標簽被選中后,它的背 景淡化并且標簽中的圖片變亮。如果應用程序的標簽欄包含5個以上的標簽,iPhone OS會顯示其中的4個并在第5個自動顯示為“更多標簽”。
我曾經思考過,為什么同是標簽,Android在上,iPhone在下的問題。
到目前,我也只能猜測:
Android的設計師認為,標簽應該先被看到,并且不能讓menu鍵的菜單項擋到。iPhone的設計師認為,標簽是用于切換當前應用程序不同視 圖的,應該更容易被按到,所以選擇在屏幕下方。也因此,我已經完全不糾結所謂的“單手持機”的情境設計,因為以上兩平臺均無法很好地支持。
工具欄:
Android的工具欄一般居于屏幕下方,一般是3個按鈕。考慮到可點擊域的有效性,一般最多也不建議超過5個。
而iPhone的工具欄,是與標簽欄在同一位置的,即標簽欄與工具欄不共存,在屏幕下方,要么是工具欄,要么就是標簽欄。