蘋果iSO系統(tǒng)和谷歌安卓系統(tǒng)的用戶界面都非常簡潔漂亮，但風(fēng)格還有所不同。就我個人而言，單單就設(shè)計(jì)風(fēng)格來說，大部分時間里，我似乎更偏愛谷歌的安卓系統(tǒng)，雖然我現(xiàn)在用的是3GS，也許這正是原因所在，再好的設(shè)計(jì)看久了多少也會有些審美疲勞。

閑話少敘，這篇文章里我會將iOS和安卓的相同功能界面截取出來，共有五個部分，分別是：鎖屏界面、撥號界面、瀏覽器界面、鍵盤界面以及其它元素。我會一一將它們從設(shè)計(jì)風(fēng)格上做一對比，提取其中大家可能會關(guān)心的實(shí)現(xiàn)技術(shù)，讓大家從設(shè)計(jì)思想和技術(shù)兩方面了解它們之間的差異，通過這種對比分析提高我們自身的設(shè)計(jì)水平。另外我將自己搜集到的蘋果iphone和ipad的iOS系統(tǒng)以及谷歌安卓系統(tǒng)界面完整的設(shè)計(jì)PSD文件放在這里，供大家下載研究。

PS：由于wordpress上傳文件大小限制問題未解決，所以文件暫時放在飛魚的聲納交流群里。待問題解決，我會及時上傳。群號碼：168083758

下面我們開始。

一、鎖屏界面

可以觀察到，iphone的鎖屏界面在時間和解鎖部分有著透明強(qiáng)高光風(fēng)格的背景，高光部分有非常明顯的界限，邊緣部分1像素的高光也是非常醒目的，整體感覺整個表面非常光滑，如同玻璃般的質(zhì)感。透明的使用讓整個界面不被硬生生的劃分為三個部分，而是讓桌面圖片從后面透過來，擴(kuò)大了視線的范圍，讓整個界面感覺更加透氣?；瑒影粹o使用了灰色的漸變，但是依然延續(xù)了這種風(fēng)格，你可以清晰的看到高光和陰影部分的分界線。在整體的顏色上選擇了不同層次的灰色，便于搭配各種桌面圖片。

這里我們主要來了解一下透明的高光背景所使用的技術(shù)。通過查看源文件我們可以發(fā)現(xiàn)，其中最主要的部分實(shí)際上是技巧性的應(yīng)用了圖層樣式中的漸變疊加。上半部分的高光應(yīng)用了從頂部到底部由淺至深的灰色漸變，而下半部分只是單純的黑色。下面圖片顯示了具體的顏色值，當(dāng)然，這并不是唯一的數(shù)值，只是讓大家做一個參考。完成漸變疊加后，再將漸變疊加的不透明度降低到55%，然后在圖層面板中將圖層的填充不透明度降低至0%就可以了。

這是我按照上面的方法做出來的效果，你也可以自己動手試一試。

相較于iphone的界面，安卓的看上去就要柔和一些，那是因?yàn)樵乇砻鏇]有高光和陰影的顯著差別，但是注意觀察安卓各元素的陰影部分，卻要比iphone強(qiáng)烈許多。如果說iOS的設(shè)計(jì)師偏好于運(yùn)用高光的話，安卓的設(shè)計(jì)師可能更鐘情于陰影的巧妙運(yùn)用?？梢钥吹皆跁r間文字部分、解鎖按鈕以及背景部分、音量按鈕以及背景部分都使用了非常顯著的陰影效果。另外，不像iOS整體偏灰色的設(shè)計(jì)，安卓的界面在灰色中使用了飽和度和亮度較高的偏黃色的綠色，讓使用這個色彩的元素非常醒目。

這里我們來重點(diǎn)學(xué)習(xí)安卓系統(tǒng)解鎖按鍵的創(chuàng)建方法，音量按鍵創(chuàng)建方法完全相同只是顏色不同而已。這些效果全都是運(yùn)用圖層樣式來實(shí)現(xiàn)的。先來看灰色的背景部分，其中的陰影是用外發(fā)光樣式來實(shí)現(xiàn)的，元素表面是一個深灰色至深灰色的微弱的漸變，斜面和浮雕樣式勾勒出頂部的高光和底部的陰影，最后將圖層不透明度降低到85%。綠色的解鎖按鍵使用內(nèi)陰影做高光，由上到下從黑至白，混合模式為正片疊底的漸變完成的內(nèi)陰影，也就是凹陷效果。具體的參數(shù)設(shè)置你可以通過查看PSD文件了解。

二、撥號界面

iphone的撥號界面整體使用了藍(lán)色，只是在亮度和飽和度上有些差別，這樣就顯得層次豐富而又和諧統(tǒng)一。網(wǎng)頁設(shè)計(jì)中也是如此，雖然我們可能用的顏色并不多，但是讓他們在飽和度和亮度上有所區(qū)別的話，不僅不會有單調(diào)的感覺，反而會覺得層次很豐富。唯一在顏色上區(qū)別較大的部分是綠色的撥出按鍵，你可以考慮一下為什么單單這里使用了和其它部分色相不同的顏色？對，就是要讓它跳出，因?yàn)樗诠δ苌系闹匾裕越o了它另外的顏色。這也正是為什么網(wǎng)頁上那些”登錄”、”注冊”、”下載”、”購買”之類的按鍵做的又大又醒目的原因了。另外，你還可以在界面中的上下部分看到這種玻璃般質(zhì)感的高光和陰影。這種風(fēng)格貫穿于iphone界面的整個設(shè)計(jì)當(dāng)中。

和上面透明高光背景的創(chuàng)建方法一樣，綠的撥號按鈕上的玻璃質(zhì)感也是用漸變疊加來實(shí)現(xiàn)。下面是具體參數(shù)設(shè)置，你可以再次了解這種玻璃質(zhì)感按鈕創(chuàng)建方法的技巧在哪里。

安卓的整個界面以黑色為背景，上下部分使用了灰色，重要的地方用飽和度較高的亮黃綠色來跳出?？梢杂^察到，在撥號鍵1的綠色背景中，同樣應(yīng)用了內(nèi)發(fā)光的圖層樣式給按鍵添加了內(nèi)陰影，保持了風(fēng)格上的統(tǒng)一。

三、瀏覽器界面

iphone瀏覽器的整個色調(diào)依舊延續(xù)了飽和度較低的藍(lán)色，低調(diào)而柔和。文字輸入框添加了內(nèi)陰影的圖層樣式，這樣會產(chǎn)生凹陷的視覺效果。你依舊可以在瀏覽器下方的操控按鈕背景處看到玻璃質(zhì)感的風(fēng)格運(yùn)用。正是因?yàn)樘幪幎加羞@樣重復(fù)存在，才會讓整個設(shè)計(jì)看起來是統(tǒng)一的。

安卓使用了淺灰色作為主打色，并且在地址欄和讀取條使用了橙色高亮顯示重要信息。仍舊也是延續(xù)了之前的風(fēng)格。橙色和前面的偏黃的綠色由于其中都含有黃色，所以作為相近色會感覺非常和諧。這也正是我們在網(wǎng)頁設(shè)計(jì)的色彩使用中值得注意的地方。

四、鍵盤

和瀏覽器一樣，iphone鍵盤也使用了這種飽和度較低的藍(lán)色，看上去不會那么刺眼。由于背景顏色較淺，所以你可以清晰的看到每個字母矩形背景下清晰的陰影效果。字母文字的黑色相較于其它功能鍵的顏色來講更為醒目一些，這也正是功能重要性在視覺設(shè)計(jì)上的表現(xiàn)方式。每個字母的矩形背景都添加了細(xì)微的漸變，優(yōu)秀設(shè)計(jì)總是在細(xì)節(jié)上都毫不松懈，這正是我們要學(xué)習(xí)的地方。

安卓的鍵盤在黑色的背景上使用了深灰色作為主色調(diào)，由于整個鍵盤的顏色較深，所以這里給字母應(yīng)用了和深灰色反差較大的白色，每個字母還添加了淡淡的陰影。字母背景的矩形使用了較小的圓角半徑，看上去只有2個像素大小，所以整個鍵盤給人的感覺相較于iphone的鍵盤來說更為方正一些。

五、其他元素

雖然iOS的設(shè)計(jì)以藍(lán)色為主，但是并不是說完全不允許其它色彩出現(xiàn)。相反，使用小范圍的飽和度較高的顏色更能讓相關(guān)的設(shè)計(jì)在整個的設(shè)計(jì)中脫穎而出。當(dāng)然，不能喧賓奪主，這是一定要注意的地方。就像前面提到的綠色的電話撥出鍵一樣，這些綠色、紅色、紫色的按鈕和圖標(biāo)在整個的藍(lán)色調(diào)中辨識度非常高，而且，仔細(xì)觀察這些元素的質(zhì)感，你還能找到玻璃感的設(shè)計(jì)。這些元素在技術(shù)創(chuàng)建方面沒有任何的難度，稍微懂一點(diǎn)Photoshop技巧，都能動手實(shí)現(xiàn)。關(guān)鍵點(diǎn)在于在整個的設(shè)計(jì)之前，你能不能想到要按照這樣的風(fēng)格來做設(shè)計(jì)？而且為什么要這樣來做而不是換為其它的一種風(fēng)格？這恐怕是我們都值得深思的問題。

安卓的元素樣式也一樣，照葫蘆畫瓢，誰都能完成。但是我要說”我要一種簡潔、低調(diào)、柔和的設(shè)計(jì)風(fēng)格！”，你能作出這種感覺的設(shè)計(jì)作品來嗎？這時候你恐怕要考慮的問題就多了?！币线@種設(shè)計(jì)，我該用什么顏色？””漸變的過度應(yīng)該強(qiáng)烈還是緩和一些？””這里應(yīng)不應(yīng)該用描邊？陰影呢？””是用直角還是圓角？圓角用2個像素夠不夠？”所以，臨摹已經(jīng)完成的設(shè)計(jì)和從零開始的設(shè)計(jì)是完完全全不同的，從零開始你要作出一個又一個的選擇，就像前面提到的哪些問題，都是要經(jīng)過仔細(xì)的思考完成的。每一個好的選擇加起來就是好的作品，完全沒思考或者一個個不好的選擇疊加，那結(jié)果就可想而知了。

來源：http://startwmlife.com/apple-ios-and-google-android-user-interface-style-analysis-and-technical-summary/