Android與iPhone界面布局對(duì)比
2011-08-26 文章來(lái)源: 深達(dá)設(shè)計(jì)
Tags:
Android,iPhone,界面,布局,對(duì)比
想起09年7月末那場(chǎng)日全食,廣東沒(méi)有明顯的感覺(jué)。我說(shuō),從未想過(guò)白天竟然能懂得夜的黑。寧說(shuō)在杭州一棟大廈看著天慢慢暗下來(lái)和人們因?yàn)槿杠S而綻放的煙花,除了家里分開(kāi)的兩位大人,心里滿滿都是他。5百年,我們要輪回多少次,相遇多少次。而每一次是否都會(huì)在風(fēng)起云涌時(shí)毅然牽起彼此的手。死亡。寒冷的死亡不僅僅只是帶走這個(gè)人,而是連同他的所有都消散了。
上圖是我根據(jù)Android和iPhone這兩個(gè)平臺(tái)的“生產(chǎn)內(nèi)容型的應(yīng)用程序”整理出來(lái)的界面布局示例。所對(duì)比的4個(gè)點(diǎn),均是兩大平臺(tái)的應(yīng)用程序常規(guī)界面元素。
狀態(tài)欄:
Android和iPhone的狀態(tài)欄均在屏幕頂端的位置,原因無(wú)外乎是人的視覺(jué)流程是從上到下的。
Android的狀態(tài)欄,具有notification的功用,當(dāng)應(yīng)用程序有新的通知,在狀態(tài)欄左側(cè)顯示通知圖標(biāo),向下滑動(dòng)即可打開(kāi)查看通知詳情。
Android和iPhone的狀態(tài)欄均在屏幕頂端的位置,原因無(wú)外乎是人的視覺(jué)流程是從上到下的。
Android的狀態(tài)欄,具有notification的功用,當(dāng)應(yīng)用程序有新的通知,在狀態(tài)欄左側(cè)顯示通知圖標(biāo),向下滑動(dòng)即可打開(kāi)查看通知詳情。
iPhone的狀態(tài)欄,很純粹,就是狀態(tài)而已。包含了活動(dòng)狀態(tài)的顯示,比如某進(jìn)程正在運(yùn)行,將有個(gè)轉(zhuǎn)動(dòng)的動(dòng)畫在這里。但是你不能對(duì)狀態(tài)欄有任何操作。
個(gè)人認(rèn)為,Android通知系統(tǒng)做得很不錯(cuò),貌似后來(lái)的Windows Phone7也效仿了此設(shè)計(jì)。
個(gè)人認(rèn)為,Android通知系統(tǒng)做得很不錯(cuò),貌似后來(lái)的Windows Phone7也效仿了此設(shè)計(jì)。
標(biāo)題欄:
Android是純粹的界面標(biāo)題欄,這里一般無(wú)操作響應(yīng)。
而iPhone的標(biāo)題欄,承擔(dān)更多的作用是導(dǎo)航,你能在這里快速后退(Android使用實(shí)體按鍵來(lái)后退),或是針對(duì)此界面進(jìn)行一些操作。另外,當(dāng)你使用iPhone向下瀏覽界面內(nèi)容時(shí),雙擊標(biāo)題,還起到快速至頂?shù)淖饔谩?br /> 標(biāo)簽欄:
Android的標(biāo)簽欄位于界面標(biāo)題之下,一般最多5項(xiàng),在原生的平臺(tái)界面,視覺(jué)效果也較丑。
而iPhone的標(biāo)簽欄是明確在屏幕下方的,也是最多5頂。相比于Android,iPhone對(duì)狀態(tài)欄的處理顯得很智能。所有顯示圖標(biāo)和文字的標(biāo)簽都是相同的寬度并且顯示黑色背景。當(dāng)標(biāo)簽被選中后,它的背景淡化并且標(biāo)簽中的圖片變亮。
如果應(yīng)用程序的標(biāo)簽欄包含5個(gè)以上的標(biāo)簽,iPhone OS會(huì)顯示其中的4個(gè)并在第5個(gè)自動(dòng)顯示為“更多標(biāo)簽”。
Android是純粹的界面標(biāo)題欄,這里一般無(wú)操作響應(yīng)。
而iPhone的標(biāo)題欄,承擔(dān)更多的作用是導(dǎo)航,你能在這里快速后退(Android使用實(shí)體按鍵來(lái)后退),或是針對(duì)此界面進(jìn)行一些操作。另外,當(dāng)你使用iPhone向下瀏覽界面內(nèi)容時(shí),雙擊標(biāo)題,還起到快速至頂?shù)淖饔谩?br /> 標(biāo)簽欄:
Android的標(biāo)簽欄位于界面標(biāo)題之下,一般最多5項(xiàng),在原生的平臺(tái)界面,視覺(jué)效果也較丑。
而iPhone的標(biāo)簽欄是明確在屏幕下方的,也是最多5頂。相比于Android,iPhone對(duì)狀態(tài)欄的處理顯得很智能。所有顯示圖標(biāo)和文字的標(biāo)簽都是相同的寬度并且顯示黑色背景。當(dāng)標(biāo)簽被選中后,它的背景淡化并且標(biāo)簽中的圖片變亮。
如果應(yīng)用程序的標(biāo)簽欄包含5個(gè)以上的標(biāo)簽,iPhone OS會(huì)顯示其中的4個(gè)并在第5個(gè)自動(dòng)顯示為“更多標(biāo)簽”。
我曾經(jīng)思考過(guò),為什么同是標(biāo)簽,Android在上,iPhone在下的問(wèn)題。
到目前,我也只能猜測(cè):
Android的設(shè)計(jì)師認(rèn)為,標(biāo)簽應(yīng)該先被看到,并且不能讓menu鍵的菜單項(xiàng)擋到。
iPhone的設(shè)計(jì)師認(rèn)為,標(biāo)簽是用于切換當(dāng)前應(yīng)用程序不同視圖的,應(yīng)該更容易被按到,所以選擇在屏幕下方。
也因此,我已經(jīng)完全不糾結(jié)所謂的“單手持機(jī)”的情境設(shè)計(jì),因?yàn)橐陨蟽善脚_(tái)均無(wú)法很好地支持。
工具欄:
Android的工具欄一般居于屏幕下方,一般是3個(gè)按鈕??紤]到可點(diǎn)擊域的有效性,一般最多也不建議超過(guò)5個(gè)。
而iPhone的工具欄,是與標(biāo)簽欄在同一位置的,即標(biāo)簽欄與工具欄不共存,在屏幕下方,要么是工具欄,要么就是標(biāo)簽欄。
到目前,我也只能猜測(cè):
Android的設(shè)計(jì)師認(rèn)為,標(biāo)簽應(yīng)該先被看到,并且不能讓menu鍵的菜單項(xiàng)擋到。
iPhone的設(shè)計(jì)師認(rèn)為,標(biāo)簽是用于切換當(dāng)前應(yīng)用程序不同視圖的,應(yīng)該更容易被按到,所以選擇在屏幕下方。
也因此,我已經(jīng)完全不糾結(jié)所謂的“單手持機(jī)”的情境設(shè)計(jì),因?yàn)橐陨蟽善脚_(tái)均無(wú)法很好地支持。
工具欄:
Android的工具欄一般居于屏幕下方,一般是3個(gè)按鈕??紤]到可點(diǎn)擊域的有效性,一般最多也不建議超過(guò)5個(gè)。
而iPhone的工具欄,是與標(biāo)簽欄在同一位置的,即標(biāo)簽欄與工具欄不共存,在屏幕下方,要么是工具欄,要么就是標(biāo)簽欄。
好了,對(duì)比結(jié)束。
老實(shí)說(shuō),我現(xiàn)在并沒(méi)有在設(shè)計(jì)新的手機(jī)平臺(tái),我們公司也不會(huì)去折騰新的“某某phone”。因此鑒于我目前站立的只是這個(gè)高度,我沒(méi)有理由去為我的應(yīng)用程序界面對(duì)上述四點(diǎn)進(jìn)行“創(chuàng)新”。
老實(shí)說(shuō),我現(xiàn)在并沒(méi)有在設(shè)計(jì)新的手機(jī)平臺(tái),我們公司也不會(huì)去折騰新的“某某phone”。因此鑒于我目前站立的只是這個(gè)高度,我沒(méi)有理由去為我的應(yīng)用程序界面對(duì)上述四點(diǎn)進(jìn)行“創(chuàng)新”。
這個(gè)對(duì)比對(duì)于我來(lái)說(shuō),顯得有些無(wú)聊。
不過(guò),我總是能發(fā)現(xiàn)一些“A mix B” 的應(yīng)用程序界面設(shè)計(jì),讓我覺(jué)得更加無(wú)聊。
不過(guò),我總是能發(fā)現(xiàn)一些“A mix B” 的應(yīng)用程序界面設(shè)計(jì),讓我覺(jué)得更加無(wú)聊。
也許你和我一樣,在設(shè)計(jì)時(shí)總能聽(tīng)到“XX也是這樣的”。
言外之意是抄過(guò)來(lái)吧。
于是,糟糕的事情越來(lái)越多。
于是,糟糕的事情越來(lái)越多。
真是汗顏。
無(wú)論是哪一個(gè)平臺(tái)的應(yīng)用程序設(shè)計(jì),我個(gè)人始終堅(jiān)持的觀點(diǎn)是:遵循OS的設(shè)計(jì)規(guī)范,熟知平臺(tái)特性,最好與平臺(tái)自帶的應(yīng)用程序保持一致的使用體驗(yàn)。不需要驚喜。
你的創(chuàng)新,應(yīng)當(dāng)用在正確的地方。
深圳網(wǎng)站建設(shè)設(shè)計(jì)公司-深達(dá)設(shè)計(jì)(ttlfr.cn),擁有專業(yè)設(shè)計(jì)團(tuán)隊(duì)為企業(yè)提供網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),網(wǎng)站制作,FLASH網(wǎng)站建設(shè)設(shè)計(jì),Flash互動(dòng)設(shè)計(jì),網(wǎng)頁(yè)制作,品牌設(shè)計(jì).