蘋果iOS和Google安卓使用者介面風格對比及技術總結

來源:互聯網
上載者:User

  蘋果iSO系統和Google安卓系統的使用者介面都非常簡潔漂亮,但風格還有所不同。就我個人而言,單單就設計風格來說,大部分時間裡,我似乎更偏愛Google的安卓系統,雖然我現在用的是3GS,也許這正是原因所在,再好的設計看久了多少也會有些審美疲勞。

  閑話少敘,這篇文章裡我會將iOS和安卓的相同功能介面截取出來,共有五個部分,分別是:鎖定畫面、撥號介面、瀏覽器介面、鍵盤介面以及其它元素。我會一一將它們從設計風格上做一對比,提取其中大家可能會關心的實現技術,讓大家從設計思想和技術兩方面瞭解它們之間的差異,通過這種對比分析提高我們自身的設計水平。另外我將自己搜集到的蘋果iphone和ipad的iOS系統以及Google安卓系統介面完整的設計PSD檔案放在這裡,供大家下載研究。

  下面我們開始。

  一、鎖定畫面

  可以觀察到,iphone的鎖定畫面在時間和解鎖部分有著透明強高光風格的背景,高光部分有非常明顯的界限,邊緣部分1像素的高光也是非常醒目的,整體感覺整個表面非常光滑,如同玻璃般的質感。透明的使用讓整個介面不被硬生生的劃分為三個部分,而是讓案頭圖片從後面透過來,擴大了視線的範圍,讓整個介面感覺更加透氣。滑動按鈕使用了灰色的漸層,但是依然延續了這種風格,你可以清晰的看到高光和陰影部分的分界線。在整體的顏色上選擇了不同層次的灰色,便於搭配各種案頭圖片。

  這裡我們主要來瞭解一下透明的高光背景所使用的技術。通過查看源檔案我們可以發現,其中最主要的部分實際上是技巧性的應用了圖層樣式中的漸層疊加。上半部分的高光應用了從頂部到底部由淺至深的灰色漸層,而下半部分只是單純的黑色。下面圖片顯示了具體的顏色值,當然,這並不是唯一的數值,只是讓大家做一個參考。完成漸層疊加後,再將漸層疊加的不透明度降低到55%,然後在圖層面板中將圖層的填充不透明度降低至0%就可以了。

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

  相較於iphone的介面,安卓的看上去就要柔和一些,那是因為元素表面沒有高光和陰影的顯著差別,但是注意觀察安卓各元素的陰影部分,卻要比 iphone強烈許多。如果說iOS的設計師偏好於運用高光的話,安卓的設計師可能更鐘情於陰影的巧妙運用。可以看到在時間文字部分、解鎖按鈕以及背景部分、音量按鈕以及背景部分都使用了非常顯著的陰影製作效果。另外,不像iOS整體偏灰色的設計,安卓的介面在灰色中使用了飽和度和亮度較高的偏黃色的綠色,讓使用這個色彩的元素非常醒目。

  這裡我們來重點學習安卓系統解鎖按鍵的建立方法,音量按鍵建立方法完全相同只是顏色不同而已。這些效果全都是運用圖層樣式來實現的。先來看灰色的背景部分,其中的陰影是用外光暈樣式來實現的,元素表面是一個深灰色至深灰色的微弱的漸層,斜面和浮雕樣式勾勒出頂部的高光和底部的陰影,最後將圖層不透明度降低到85%。綠色的解鎖按鍵使用內陰影做高光,由上到下從黑至白,混合模式為正片疊底的漸層完成的內陰影,也就是凹陷效果。具體的參數設定你可以通過查看PSD檔案瞭解。

  二、撥號介面

  iphone的撥號介面整體使用了藍色,只是在亮度和飽和度上有些差別,這樣就顯得層次豐富而又和諧統一。網頁設計中也是如此,雖然我們可能用的顏色並不多,但是讓他們在飽和度和亮度上有所區別的話,不僅不會有單調的感覺,反而會覺得層次很豐富。唯一在顏色上區別較大的部分是綠色的撥出按鍵,你可以考慮一下為什麼單單這裡使用了和其它部分色相不同的顏色?對,就是要讓它跳出,因為它在功能上的重要性,所以給了它另外的顏色。這也正是為什麼網頁上那些”登入”、”註冊”、”下載”、”購買”之類的按鍵做的又大又醒目的原因了。另外,你還可以在介面中的上下部分看到這種玻璃般質感的高光和陰影。這種風格貫穿於iphone介面的整個設計當中。

  和上面透明高光背景的建立方法一樣,綠的撥號按鈕上的玻璃質感也是用漸層疊加來實現。下面是具體參數設定,你可以再次瞭解這種玻璃質感按鈕建立方法的技巧在哪裡。

  安卓的整個介面以黑色為背景,上下部分使用了灰色,重要的地方用飽和度較高的亮黃綠色來跳出。可以觀察到,在撥號鍵1的綠色背景中,同樣應用了內發光的圖層樣式給按鍵添加了內陰影,保持了風格上的統一。

  三、瀏覽器介面

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。