一、前言

開發(fā)者在產(chǎn)品上同時(shí)覆蓋iOS平臺(tái)和Android平臺(tái)時(shí)，則會(huì)遇到同一個(gè)功能在不同平臺(tái)中界面和交互如何展現(xiàn)的問題。

了解兩個(gè)平臺(tái)間的控件對(duì)應(yīng)關(guān)系和異同點(diǎn)，對(duì)同時(shí)面向兩個(gè)平臺(tái)的產(chǎn)品和交互設(shè)計(jì)是有幫助的。

此部分就兩個(gè)平臺(tái)的控件進(jìn)行對(duì)應(yīng)，并輔以一定的描述，更詳細(xì)的控件說明和適用的場合請(qǐng)直接參閱參考資料中的相關(guān)文檔。

說明：Android中的系統(tǒng)控件會(huì)根據(jù)不同的ROM和操作系統(tǒng)版本有所變化，本文中Android控件以《Android Design》為主要參考。

二、目的

本文期望表達(dá)的含義，集中于如下三個(gè)方面：

√ iOS和Android的的控件在目標(biāo)上是趨同的，但形式則有較大區(qū)別，因此Android產(chǎn)品符合Android本身的風(fēng)格，不建議直接沿用iOS風(fēng)格。

√ 了解iOS和Android控件的對(duì)應(yīng)關(guān)系，有助于在產(chǎn)品設(shè)計(jì)時(shí)，既能利用現(xiàn)有的思路，又能符合相應(yīng)平臺(tái)的風(fēng)格

√ Android因?yàn)楦髟O(shè)備商自定義ROM、不同系統(tǒng)版本之間的不同、設(shè)備物理屬性的多樣化等原因，造成Android本身的風(fēng)格有多種，設(shè)計(jì)優(yōu)秀的Android應(yīng)用，是一件不容易的事情。

三、功能欄

3.1 狀態(tài)欄(Status Bar)

iPhone的狀態(tài)欄系統(tǒng)提供了3種樣式，分別為淺色、深色、深色半透，高度固定。

Android的狀態(tài)欄根據(jù)各個(gè)手機(jī)廠商自定義的ROM不同，會(huì)有多種樣式，在MIUI中還可以根據(jù)主題不同也會(huì)變化。

3.2導(dǎo)航欄(Navigation Bar)

iPhone的導(dǎo)航欄高度固定，放置在界面頂部，導(dǎo)航欄中部一般放置標(biāo)題，但也可以被用來放置其他內(nèi)容，左側(cè)一般放置導(dǎo)航或者其他按鈕，右側(cè)一般放置按鈕。

Android的導(dǎo)航欄會(huì)根據(jù)情況不同而承擔(dān)導(dǎo)航、操作欄(Acton Bar)、情景操作欄(Contextual Action Bars)的功能。

當(dāng)承擔(dān)導(dǎo)航功能時(shí)，出現(xiàn)的元素包含標(biāo)題，左箭頭（代表上一級(jí)），這些元素聯(lián)合界面、系統(tǒng)返回鍵（硬返回鍵或軟返回鍵）一起構(gòu)成了導(dǎo)航。

當(dāng)其承擔(dān)操作欄功能是，出現(xiàn)的元素有操作圖標(biāo)（有時(shí)候是平面的純文字，包括更多圖標(biāo)）、Spinners下拉菜單、選項(xiàng)卡等，如果操作欄圖標(biāo)過多，會(huì)在界面最下方提供另外一條操作欄。

情景操作欄的出現(xiàn)場景包括文本選擇、內(nèi)容的選擇等，一般是通過對(duì)當(dāng)前內(nèi)容長按出現(xiàn)。此控件是Android 4.0，用來一定程度上代替長按的彈出菜單。

3.3工具欄(Tool Bar) vs 操作欄(Action Bar)

iPhone的工具欄高度固定，放置在界面底部，界面上一般放置圖標(biāo)或者按鈕。

Android的當(dāng)頂部操作欄空間不夠無法放置更多按鈕時(shí)，會(huì)出現(xiàn)在底部，但在有菜單鍵的手機(jī)上，會(huì)通過菜單彈出放不下的操作欄按鈕。

另外，底部操作欄是在Android 4.0中引入的。

3.4標(biāo)簽欄

iPhone的標(biāo)簽欄放置在底部，樣式固定。

Android的標(biāo)簽欄包括位置可變和固定的兩種，在Android 2.x的系統(tǒng)中，還有圖文并排的標(biāo)簽，在Google自身的應(yīng)用中，就有多種標(biāo)簽風(fēng)格。

在Android 4.0中的標(biāo)簽，基本上都是可以左右拖動(dòng)切換標(biāo)簽的，也可以直接點(diǎn)擊切換。

四、 列表

4.1列表

iOS的列表包括普通的表格、帶索引的表格、分組的表格。

Android的列表則也普通的表格、帶分組的表格，有橫線占滿和不占滿的區(qū)別，不占滿的和iOS的分組表格比較類似。

4.2 表格控件

在這些iOS的表格控件中:

ü Android的單選多選通過右側(cè)的復(fù)選框和Radio Box來實(shí)現(xiàn);

ü Android無展開指示符;

ü 其他的“詳情指示按鈕、添加、刪除”等操作，可以以下方類似Spinners的標(biāo)記點(diǎn)擊后通彈出操作列表來完成。

Android因?yàn)楸旧頉]有提供這樣的表格控件，但因?yàn)橛蓄愃朴行枰膱龊?，所以即使是google官方的應(yīng)用，也擴(kuò)展出不少非標(biāo)準(zhǔn)的控件，比如表格空間中Google Doc右側(cè)的按鈕、Google Music右側(cè)的Spinners等等。

4.1 開關(guān)

iPhone中的開關(guān)只有一種樣式。

Android 則提供了類似iOS的開關(guān)、復(fù)選、單選 等開關(guān)。

五、對(duì)話框、動(dòng)作列表

5.1 對(duì)話框

這點(diǎn)主要是風(fēng)格不同，作用比較類似。

另外Android 4.0之前，確定一般在左側(cè)，Android 4.0中，確定變到了右側(cè)。

5.2 帶文本輸入框的對(duì)話框

5.3 動(dòng)作列表

iOS上的動(dòng)作列表，Android中沒有直接對(duì)應(yīng)的元素，但有類似的元素

六、其他系統(tǒng)控件

6.1 選擇器

iPhone和Android分別提供了不同樣式的選擇器。

Android中的選擇器不同ROM和不同系統(tǒng)版本風(fēng)格不同。

6.2頁面指示器

iPhone頁面指示器在應(yīng)用和主界面一致。

Android的頁面指示器主要用于桌面頁面的切換， 不同ROM和不同系統(tǒng)版本風(fēng)格不同。

6.3滑塊

iOS滑塊一種風(fēng)格，Android不同ROM和不同系統(tǒng)版本風(fēng)格不同。

6.4進(jìn)度條

Android的進(jìn)度條依然因?yàn)椴煌琑OM和不同系統(tǒng)版本風(fēng)格不同

6.5單選和復(fù)選

iOS的單選和復(fù)選都可以通過列表中的“對(duì)號(hào)”來處理，也有類似右圖的樣式。

Android的基本上是Radio Box和Checkbox的風(fēng)格，當(dāng)然，風(fēng)格一如既往的和ROM以及系統(tǒng)版本號(hào)有關(guān)系。

七、特有控件

7.1 Android特有的控件

此處只列出了部分Android特有的控件。

左側(cè)是Spinners，在iOS中沒有直接原生對(duì)應(yīng)的，但會(huì)有應(yīng)用會(huì)嘗試使用類似的，比如新浪微博的客戶端有類似用法。

右側(cè)是toast，會(huì)顯示幾秒鐘消失，常用來做某些沒有重要到直接通過對(duì)話框來程度的提示，此控件在iOS中也沒有原生對(duì)應(yīng)的，但一樣會(huì)有應(yīng)用嘗試使用，比如不少應(yīng)用的網(wǎng)絡(luò)錯(cuò)誤提示。

，

7.2 iOS特有的控件

分段控制器，是在Android中缺失的控件。

分段控制器在Android中沒有太好的替代選擇，google原生應(yīng)用中會(huì)用標(biāo)簽欄或九宮格來一定程度上達(dá)到分段控制的作用。

（完）

版權(quán)聲明：轉(zhuǎn)載時(shí)請(qǐng)以超鏈接形式標(biāo)明文章原始出處和作者信息
本文鏈接：http://www.penddy.com/%e6%b5%85%e8%b0%88ios%e5%92%8candroid%e7%9a%84%e4%ba%a7%e5%93%81%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1%e4%b8%89iphone%e5%92%8candroid%e7%9a%84%e6%8e%a7%e4%bb%b6%e5%af%b9%e6%af%94.html