一、前言
開發者在產品上同時覆蓋iOS平台和Android平台時,則會遇到同一個功能在不同平台中界面和交互如何展現的問題。
了解兩個平台間的控件對應關系和異同點,對同時面向兩個平台的產品和交互設計是有幫助的。
此部分就兩個平台的控件進行對應,並輔以一定的描述,更詳細的控件說明和適用的場合請直接參閱參考資料中的相關文檔。
說明:Android中的系統控件會根據不同的ROM和操作系統版本有所變化,本文中Android控件以《Android Design》為主要參考。
二、目的
本文期望表達的含義,集中於如下三個方面:
√ iOS和Android的的控件在目標上是趨同的,但形式則有較大區別,因此Android產品符合Android本身的風格,不建議直接沿用iOS風格。
√ 了解iOS和Android控件的對應關系,有助於在產品設計時,既能利用現有的思路,又能符合相應平台的風格
√ Android因為各設備商自定義ROM、不同系統版本之間的不同、設備物理屬性的多樣化等原因,造成Android本身的風格有多種,設計優秀的Android應用,是一件不容易的事情。
三、功能欄
3.1 狀態欄(Status Bar)
iPhone的狀態欄系統提供了3種樣式,分別為淺色、深色、深色半透,高度固定。
Android的狀態欄根據各個手機廠商自定義的ROM不同,會有多種樣式,在MIUI中還可以根據主題不同也會變化。
![clip_image002[4] clip_image002[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMDI0X3RodW1iLmdpZg==.png)
3.2導航欄(Navigation Bar)
iPhone的導航欄高度固定,放置在界面頂部,導航欄中部一般放置標題,但也可以被用來放置其他內容,左側一般放置導航或者其他按鈕,右側一般放置按鈕。
Android的導航欄會根據情況不同而承擔導航、操作欄(Acton Bar)、情景操作欄(Contextual Action Bars)的功能。
當承擔導航功能時,出現的元素包含標題,左箭頭(代表上一級),這些元素聯合界面、系統返回鍵(硬返回鍵或軟返回鍵)一起構成了導航。
當其承擔操作欄功能是,出現的元素有操作圖標(有時候是平面的純文字,包括更多圖標)、Spinners下拉菜單、選項卡等,如果操作欄圖標過多,會在界面最下方提供另外一條操作欄。
情景操作欄的出現場景包括文本選擇、內容的選擇等,一般是通過對當前內容長按出現。此控件是Android 4.0,用來一定程度上代替長按的彈出菜單。
![clip_image004[4] clip_image004[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMDQ0X3RodW1iLmdpZg==.png)
3.3工具欄(Tool Bar) vs 操作欄(Action Bar)
iPhone的工具欄高度固定,放置在界面底部,界面上一般放置圖標或者按鈕。
Android的當頂部操作欄空間不夠無法放置更多按鈕時,會出現在底部,但在有菜單鍵的手機上,會通過菜單彈出放不下的操作欄按鈕。
另外,底部操作欄是在Android 4.0中引入的。
![clip_image006[4] clip_image006[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMDY0X3RodW1iLmdpZg==.png)
3.4標簽欄
iPhone的標簽欄放置在底部,樣式固定。
Android的標簽欄包括位置可變和固定的兩種,在Android 2.x的系統中,還有圖文並排的標簽,在Google自身的應用中,就有多種標簽風格。
在Android 4.0中的標簽,基本上都是可以左右拖動切換標簽的,也可以直接點擊切換。
![clip_image008[4] clip_image008[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMDg0X3RodW1iLmdpZg==.png)
四、 列表
4.1列表
iOS的列表包括普通的表格、帶索引的表格、分組的表格。
Android的列表則也普通的表格、帶分組的表格,有橫線占滿和不占滿的區別,不占滿的和iOS的分組表格比較類似。
![clip_image010[4] clip_image010[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMTA0X3RodW1iLmdpZg==.png)
![clip_image012[4] clip_image012[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMTI0X3RodW1iLmdpZg==.png)
4.2 表格控件
在這些iOS的表格控件中:
ü Android的單選多選通過右側的復選框和Radio Box來實現;
ü Android無展開指示符;
ü 其他的“詳情指示按鈕、添加、刪除”等操作,可以以下方類似Spinners的標記點擊后通彈出操作列表來完成。
Android因為本身沒有提供這樣的表格控件,但因為有類似有需要的場合,所以即使是google官方的應用,也擴展出不少非標准的控件,比如表格空間中Google Doc右側的按鈕、Google Music右側的Spinners等等。
![clip_image014[4] clip_image014[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMTQ0X3RodW1iLmdpZg==.png)
4.1 開關
iPhone中的開關只有一種樣式。
Android 則提供了類似iOS的開關、復選、單選 等開關。
![clip_image016[4] clip_image016[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMTY0X3RodW1iLmdpZg==.png)
五、對話框、動作列表
5.1 對話框
這點主要是風格不同,作用比較類似。
另外Android 4.0之前,確定一般在左側,Android 4.0中,確定變到了右側。
![clip_image018[4] clip_image018[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMTg0X3RodW1iLmdpZg==.png)
5.2 帶文本輸入框的對話框
![clip_image020[4] clip_image020[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMjA0X3RodW1iLmdpZg==.png)
5.3 動作列表
iOS上的動作列表,Android中沒有直接對應的元素,但有類似的元素
![clip_image022[4] clip_image022[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMjI0X3RodW1iLmdpZg==.png)
六、其他系統控件
6.1 選擇器
iPhone和Android分別提供了不同樣式的選擇器。
Android中的選擇器不同ROM和不同系統版本風格不同。
![clip_image024[4] clip_image024[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMjQ0X3RodW1iLmdpZg==.png)
6.2頁面指示器
iPhone頁面指示器在應用和主界面一致。
Android的頁面指示器主要用於桌面頁面的切換, 不同ROM和不同系統版本風格不同。
![clip_image026[4] clip_image026[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMjY0X3RodW1iLmdpZg==.png)
6.3滑塊
iOS滑塊一種風格,Android不同ROM和不同系統版本風格不同。
![clip_image028[4] clip_image028[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMjg0X3RodW1iLmdpZg==.png)
6.4進度條
Android的進度條依然因為不同ROM和不同系統版本風格不同
![clip_image030[4] clip_image030[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMzA0X3RodW1iLmdpZg==.png)
6.5單選和復選
iOS的單選和復選都可以通過列表中的“對號”來處理,也有類似右圖的樣式。
Android的基本上是Radio Box和Checkbox的風格,當然,風格一如既往的和ROM以及系統版本號有關系。
![clip_image032[4] clip_image032[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMzI0X3RodW1iLmdpZg==.png)
七、特有控件
7.1 Android特有的控件
此處只列出了部分Android特有的控件。
左側是Spinners,在iOS中沒有直接原生對應的,但會有應用會嘗試使用類似的,比如新浪微博的客戶端有類似用法。
右側是toast,會顯示幾秒鍾消失,常用來做某些沒有重要到直接通過對話框來程度的提示,此控件在iOS中也沒有原生對應的,但一樣會有應用嘗試使用,比如不少應用的網絡錯誤提示。
,
7.2 iOS特有的控件
分段控制器,是在Android中缺失的控件。
分段控制器在Android中沒有太好的替代選擇,google原生應用中會用標簽欄或九宮格來一定程度上達到分段控制的作用。
![clip_image036[4] clip_image036[4]](/image/aHR0cDovL3d3dy5wZW5kZHkuY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDEyLzA1L2NsaXBfaW1hZ2UwMzY0X3RodW1iLmdpZg==.png)