苹果iOS和谷歌安卓用户界面风格对比及技术总结

2014-10-20  来源:本站原创  分类:产品  人气:0 

苹果iSO系统和谷歌安卓系统的用户界面都非常简洁漂亮,但风格还有所不同。就我个人而言,单单就设计风格来说,大部分时间里,我似乎更偏爱谷歌的安卓系统,虽然我现在用的是3GS,也许这正是原因所在,再好的设计看久了多少也会有些审美疲劳。

闲话少叙,这篇文章里我会将iOS和安卓的相同功能界面截取出来,共有五个部分,分别是:锁屏界面、拨号界面、浏览器界面、键盘界面以及其它元素。我会一一将它们从设计风格上做一对比,提取其中大家可能会关心的实现技术,让大家从设计思想和技术两方面了解它们之间的差异,通过这种对比分析提高我们自身的设计水平。另外我将自己搜集到的苹果iphone和ipad的iOS系统以及谷歌安卓系统界面完整的设计PSD文件放在这里,供大家下载研究。

PS:由于wordpress上传文件大小限制问题未解决,所以文件暂时放在飞鱼的声纳交流群里。待问题解决,我会及时上传。群号码:168083758

下面我们开始。

一、锁屏界面

苹果iOS和谷歌安卓用户界面风格对比及技术总结

可以观察到,iphone的锁屏界面在时间和解锁部分有着透明强高光风格的背景,高光部分有非常明显的界限,边缘部分1像素的高光也是非常醒目的,整体感觉整个表面非常光滑,如同玻璃般的质感。透明的使用让整个界面不被硬生生的划分为三个部分,而是让桌面图片从后面透过来,扩大了视线的范围,让整个界面感觉更加透气。滑动按钮使用了灰色的渐变,但是依然延续了这种风格,你可以清晰的看到高光和阴影部分的分界线。在整体的颜色上选择了不同层次的灰色,便于搭配各种桌面图片。

这里我们主要来了解一下透明的高光背景所使用的技术。通过查看源文件我们可以发现,其中最主要的部分实际上是技巧性的应用了图层样式中的渐变叠加。上半部分的高光应用了从顶部到底部由浅至深的灰色渐变,而下半部分只是单纯的黑色。下面图片显示了具体的颜色值,当然,这并不是唯一的数值,只是让大家做一个参考。完成渐变叠加后,再将渐变叠加的不透明度降低到55%,然后在图层面板中将图层的填充不透明度降低至0%就可以了。

苹果iOS和谷歌安卓用户界面风格对比及技术总结

这是我按照上面的方法做出来的效果,你也可以自己动手试一试。

苹果iOS和谷歌安卓用户界面风格对比及技术总结

苹果iOS和谷歌安卓用户界面风格对比及技术总结

相较于iphone的界面,安卓的看上去就要柔和一些,那是因为元素表面没有高光和阴影的显著差别,但是注意观察安卓各元素的阴影部分,却要比iphone强烈许多。如果说iOS的设计师偏好于运用高光的话,安卓的设计师可能更钟情于阴影的巧妙运用。可以看到在时间文字部分、解锁按钮以及背景部分、音量按钮以及背景部分都使用了非常显著的阴影效果。另外,不像iOS整体偏灰色的设计,安卓的界面在灰色中使用了饱和度和亮度较高的偏黄色的绿色,让使用这个色彩的元素非常醒目。

苹果iOS和谷歌安卓用户界面风格对比及技术总结

这里我们来重点学习安卓系统解锁按键的创建方法,音量按键创建方法完全相同只是颜色不同而已。这些效果全都是运用图层样式来实现的。先来看灰色的背景部分,其中的阴影是用外发光样式来实现的,元素表面是一个深灰色至深灰色的微弱的渐变,斜面和浮雕样式勾勒出顶部的高光和底部的阴影,最后将图层不透明度降低到85%。绿色的解锁按键使用内阴影做高光,由上到下从黑至白,混合模式为正片叠底的渐变完成的内阴影,也就是凹陷效果。具体的参数设置你可以通过查看PSD文件了解。

二、拨号界面

苹果iOS和谷歌安卓用户界面风格对比及技术总结

iphone的拨号界面整体使用了蓝色,只是在亮度和饱和度上有些差别,这样就显得层次丰富而又和谐统一。网页设计中也是如此,虽然我们可能用的颜色并不多,但是让他们在饱和度和亮度上有所区别的话,不仅不会有单调的感觉,反而会觉得层次很丰富。唯一在颜色上区别较大的部分是绿色的拨出按键,你可以考虑一下为什么单单这里使用了和其它部分色相不同的颜色?对,就是要让它跳出,因为它在功能上的重要性,所以给了它另外的颜色。这也正是为什么网页上那些”登录”、”注册”、”下载”、”购买”之类的按键做的又大又醒目的原因了。另外,你还可以在界面中的上下部分看到这种玻璃般质感的高光和阴影。这种风格贯穿于iphone界面的整个设计当中。

和上面透明高光背景的创建方法一样,绿的拨号按钮上的玻璃质感也是用渐变叠加来实现。下面是具体参数设置,你可以再次了解这种玻璃质感按钮创建方法的技巧在哪里。

苹果iOS和谷歌安卓用户界面风格对比及技术总结

安卓的整个界面以黑色为背景,上下部分使用了灰色,重要的地方用饱和度较高的亮黄绿色来跳出。可以观察到,在拨号键1的绿色背景中,同样应用了内发光的图层样式给按键添加了内阴影,保持了风格上的统一。

苹果iOS和谷歌安卓用户界面风格对比及技术总结

三、浏览器界面

苹果iOS和谷歌安卓用户界面风格对比及技术总结

iphone浏览器的整个色调依旧延续了饱和度较低的蓝色,低调而柔和。文字输入框添加了内阴影的图层样式,这样会产生凹陷的视觉效果。你依旧可以在浏览器下方的操控按钮背景处看到玻璃质感的风格运用。正是因为处处都有这样重复存在,才会让整个设计看起来是统一的。

苹果iOS和谷歌安卓用户界面风格对比及技术总结

安卓使用了浅灰色作为主打色,并且在地址栏和读取条使用了橙色高亮显示重要信息。仍旧也是延续了之前的风格。橙色和前面的偏黄的绿色由于其中都含有黄色,所以作为相近色会感觉非常和谐。这也正是我们在网页设计的色彩使用中值得注意的地方。

四、键盘

苹果iOS和谷歌安卓用户界面风格对比及技术总结

和浏览器一样,iphone键盘也使用了这种饱和度较低的蓝色,看上去不会那么刺眼。由于背景颜色较浅,所以你可以清晰的看到每个字母矩形背景下清晰的阴影效果。字母文字的黑色相较于其它功能键的颜色来讲更为醒目一些,这也正是功能重要性在视觉设计上的表现方式。每个字母的矩形背景都添加了细微的渐变,优秀设计总是在细节上都毫不松懈,这正是我们要学习的地方。

苹果iOS和谷歌安卓用户界面风格对比及技术总结

安卓的键盘在黑色的背景上使用了深灰色作为主色调,由于整个键盘的颜色较深,所以这里给字母应用了和深灰色反差较大的白色,每个字母还添加了淡淡的阴影。字母背景的矩形使用了较小的圆角半径,看上去只有2个像素大小,所以整个键盘给人的感觉相较于iphone的键盘来说更为方正一些。

五、其他元素

苹果iOS和谷歌安卓用户界面风格对比及技术总结

虽然iOS的设计以蓝色为主,但是并不是说完全不允许其它色彩出现。相反,使用小范围的饱和度较高的颜色更能让相关的设计在整个的设计中脱颖而出。当然,不能喧宾夺主,这是一定要注意的地方。就像前面提到的绿色的电话拨出键一样,这些绿色、红色、紫色的按钮和图标在整个的蓝色调中辨识度非常高,而且,仔细观察这些元素的质感,你还能找到玻璃感的设计。这些元素在技术创建方面没有任何的难度,稍微懂一点Photoshop技巧,都能动手实现。关键点在于在整个的设计之前,你能不能想到要按照这样的风格来做设计?而且为什么要这样来做而不是换为其它的一种风格?这恐怕是我们都值得深思的问题。

苹果iOS和谷歌安卓用户界面风格对比及技术总结

安卓的元素样式也一样,照葫芦画瓢,谁都能完成。但是我要说”我要一种简洁、低调、柔和的设计风格!”,你能作出这种感觉的设计作品来吗?这时候你恐怕要考虑的问题就多了。”要符合这种设计,我该用什么颜色?”"渐变的过度应该强烈还是缓和一些?”"这里应不应该用描边?阴影呢?”"是用直角还是圆角?圆角用2个像素够不够?”所以,临摹已经完成的设计和从零开始的设计是完完全全不同的,从零开始你要作出一个又一个的选择,就像前面提到的哪些问题,都是要经过仔细的思考完成的。每一个好的选择加起来就是好的作品,完全没思考或者一个个不好的选择叠加,那结果就可想而知了。

相关文章
  • 苹果iOS和谷歌安卓用户界面风格对比及技术总结 2014-10-20

    苹果iSO系统和谷歌安卓系统的用户界面都非常简洁漂亮,但风格还有所不同.就我个人而言,单单就设计风格来说,大部分时间里,我似乎更偏爱谷歌的安卓系统,虽然我现在用的是3GS,也许这正是原因所在,再好的设计看久了多少也会有些审美疲劳. 闲话少叙,这篇文章里我会将iOS和安卓的相同功能界面截取出来,共有五个部分,分别是:锁屏界面.拨号界面.浏览器界面.键盘界面以及其它元素.我会一一将它们从设计风格上做一对比,提取其中大家可能会关心的实现技术,让大家从设计思想和技术两方面了解它们之间的差异,通过这种对比

  • 苹果iOS 6悄然启用新型精准广告追踪技术 2013-10-31

    北京时间10月12日下午消息,据美国科技博客BusinessInsider报道,在今年9月推出iOS 6后,苹果开始通过一项名为IFA或IDFA的新技术追踪用户,发布精准广告. 在此之前,广告主原本可以借助UDID识别码追踪iPhone用户,但苹果后来禁用了这一技术.但多名移动广告行业高管透露,通过IFA技术,iOS 6对用户的追踪效果将会加强. IFA是"identifier for advertisers"(广告主识别码)的简写,会随机将匿名号码分配给用户及他们的设备.但与cook

  • 三国战记,微软Windows phone,谷歌android,苹果iOS,手机云计算云服务三国混战 2012-03-09

    北京时间2011年6月7日凌晨一点,万众期待的苹果开发者峰会WWDC在美国召开,来自全球的苹果开发者共同参与了此次盛会.此次发布会上苹果正式对外展示了应用于Mac电脑的Lion系统,应用于苹果iPhone/iPod/iPad的iOS 5系统,以及全新的iCloud云服务.而此次苹果方面也是将云服务作为最为重要的一环进行了介绍,相信大家从我们的文章当中了解到了iCloud的一些具体情况,那么下面我们就一起来看目前智能手机操作系统当中云服务都有哪些. 2011WWDC大会 目前市面上最受消费者认可的

  • 苹果iOS欧洲市场份额45% 三倍于谷歌Android 2014-02-19

    欧洲智能手机市场各系统份额 英国智能手机市场各系统份额 网站流量统计服务商StatCounter周一发布的最新统计数据显示,苹果手机操作系统iOS过去一年在英国乃至整个欧洲市场都占据着主导地位,市场份额大概是谷歌操作系统Android的三倍.这表明,欧洲人远不像美国人那么喜欢Android系统. 令人感兴趣的是,这些数据完全以欧洲为主,全球销量往往会掩盖地区趋势的真实状况,而提供给美国的其他最常用的数据集让人很难对欧洲市场有全面的认识.从整体上讲,欧洲人更青睐于苹果iOS--从2010年1月至2

  • 苹果iOS发展史:抛弃谷歌 淡化第三方应用品牌 2014-12-29

    导语:苹果iOS 6将谷歌地图和YouTube应用拒之门外,引发业界一片哗然.国外专家撰文指出,从iOS 1到iOS 6,苹果一直没有停止"去谷歌化"的脚步.并且,对新接纳的大多数第三方应用,苹果也一直采取淡化品牌的策略.苹果此举目的只有一个:掌握控制权. 以下为文章全文: 苹果在今年的WWDC大会上推出iOS操作系统的最新版本iOS 6,宣布放弃合作伙伴谷歌的地图服务,转而使用自家的地图应用.这一改变引发了人们的广泛讨论. 从多方面来看,苹果的这一做法并不令人感到吃惊.近年来,随着苹

  • 苹果iOS系统生态链底线:维护自身布局产品 2013-12-30

    10月2日,苹果再次改变了App Store条款,限制应用推荐服务.新的条例将会对推荐类应用产生影响.致使一些应用被苹果商店下架. 在苹果发布的新一代系统IOS6里,苹果史无前例的对中国用户做出了重大调整.无论是推出中文Siri,还是内置的百度搜索.新浪微博.优酷土豆视频分享等功能,无不让中国用户感受到了苹果对中国市场的日益重视. 但是,苹果选择性地抛弃了一些应用,比如讯飞语点.谷歌地图等.苹果宣布面向中国推中文Siri后,讯飞语点就一直没有通过苹果App Store的审核.科大讯飞副董事长徐景

  • 近5年来苹果公司市值的增长及相关对比 2015-02-18

    编者按:国外科技博客pingdom近日撰文指出苹果现在的市值相比2006年已经增长了5倍,比谷歌也多出近2倍.以下是全文: 5年前,苹果凭借它的iPod和Mac系列电脑成为了一家成功企业.但是那时候iPhone和iPad都还没有上市,苹果的年利润为24亿美元.到了2010年时,这个数字已经飙升到了166亿美元.在2011年第一季度,苹果已经获得了60亿美元的利润,正在朝着完全压倒前几年的方向大步迈进.可以说,苹果现在已经成为一个提款机器. 苹果正站在不断成功的浪潮之上,也博得了股市完全的青睐.它

  • 苹果首席设计师谈iOS7扁平风格,对设计的理解非常的有高度 2013-08-09

    苹果首席设计师谈iOS7选择扁平风格的原因 keuomorphism(软件界面设计模仿实物纹理被称为Skeuomorphism的概念) 乔布斯说过的一句名言:设计"不只是看上去的样子和感觉,设计的关键在于它如何发挥作用." iOS 最初的skeuomorphism用户界面教会了世界人民如何使用触摸屏移动设备. Skeuomorphism是一种教学方法,使本来模棱两可的东西变得一清二楚,而且也让未来主义者们感觉很面熟. 艾维说skeuomorphic界面常常"经不起时间考验&q

  • 施密特:苹果弃用谷歌地图是个错误 2013-11-08

    北京时间10月11日上午消息,谷歌执行董事长埃里克·施密特(Eric Schmidt)周三在接受媒体采访时表示,谷歌与苹果在移动设备市场上的竞争对消费者而言是个好消息,但因竞争引发的专利战则是毁灭性的.他还称,苹果弃用谷歌地图是一个错误. 施密特在采访中说:"Android与苹果的平台之争对当今科技行业具有决定性意义.我们从未看到如此规模的平台竞争.受益者是你们这些人(即消费者).价格正迅速下滑.这是一个绝妙的价值命题." 谷歌执行董事长埃里克·施密特(Eric Schmidt) 至于

  • 苹果iOS 4多任务功能遇尴尬:多数应用不支持 2013-11-25

    导读:美国IT网站PC World今天撰文称,虽然苹果iOS 4操作系统附带了用户期待已久的多任务功能,但是由于没有足够的应用支持,而且苹果没有明确标明哪些应用支持多任务,因此这项功能仍然会面临挑战. 以下为文章概要: 多任务是iOS 4最受期待的功能之一.但是从实际情况来看,这一功能只对苹果自己的核心应用支持较好,对第三方应用的支持则比较有限,这与该功能的最初目的背道而驰. 苹果的多任务界面很方便易用,对单手操作者尤其如此.只要双击Home键即可启动多任务栏,其他内容则会被移到屏幕上方,并且被

  • 苹果仍允许谷歌通过iPhone发布精准广告 2014-06-27

    据国外媒体报道,虽然几周以来,一直有人担心苹果会禁止谷歌等公司继续在iPhone和iPad上销售精准广告,但事实证明,苹果似乎并未封杀这些公司. 禁令引发忧虑 很多软件开发者表示,尽管他们仍然计划通过谷歌Mobile AdSense和AdMob等第三方服务来发布广告,但他们的新版或升级版应用已经获得的苹果批准. 苹果和谷歌均拒绝对此置评. 业内人士此前认为,苹果试图在iPhone和iPad等设备上排挤其他广告网络.该公司本周四发布了自家移动广告服务iAd,帮助各大品牌在应用内发布互动广告.如果要

  • 分析称苹果将批准谷歌地图本土应用 2014-07-29

    北京时间11月6日凌晨消息,据CNET报道,业界人士指出,苹果将会批准iOS版谷歌地图本地应用.该报道主要针对英国<卫报>周一援引消息人士的报道称,iOS版谷歌地图本地应用将"很难通过苹果的批准". 英国<卫报>的报道称:"谷歌内部熟知其地图计划的消息人士透露,他们对苹果将批准iOS版谷歌地图本地应用感到'不乐观'.虽然有报道称这个应用正在开发中,而且应该已经做好了在年底以前发布的准备,但消息人士称,谷歌是抱着'不太可能发生的情况'的心态进行这项计划的

  • 苹果为何放弃谷歌地图:无法使用语音导航 2014-09-04

    北京时间9月27日上午消息,谷歌董事长埃里克·施密特(Eric Schmidt)称,苹果本应在iOS操作系统中继续使用谷歌地图应用,而不是改用自己开发的表现不佳的替代品. 从苹果地图应用糟糕的被认同度来看,或许施密特是正确的.不过,多名熟知苹果想法的消息人士透露,该公司觉得自己除了用自己开发的地图应用来取代谷歌地图以外别无选择,原因是双方在一个关键特性上无法达成一致,那就是语音逐向导航技术. 谷歌Android移动操作系统从几年前就已开始免费提供语言逐向导航服务,但iOS版谷歌地图服务从未提供这

  • 传谷歌将在圣诞节前推iOS 6谷歌地图应用 2014-11-28

    北京时间9月21日早间消息,苹果iOS 6系统中的新地图应用已备受诟病.消息人士称,谷歌计划在今年圣诞节前在苹果App Store中推出独立的谷歌地图应用. 苹果在iOS 6中以自主地图服务取代了谷歌地图,然而苹果地图中来自OSM和TomTom的地图数据未能达到用户期望.一些人认为,iOS版谷歌地图是用户唯一的希望. 有业内人士认为,谷歌不会很快推出iOS版谷歌地图,从而利用地图服务的优势促使用户转向Android平台.不过根据消息人士的说法,谷歌将iOS 6视作一个"危机中的机会",

  • Android广告印象份额连续第四次超越苹果iOS 2014-01-15

    移动广告网络公司Millenial Media最新数据显示,根据其广告印象市场份额计算,谷歌Android系统今年3月连续第四次超越苹果iOS,成为最受欢迎的智能手机操作系统. Millenial Media数据显示,今年3月Android系统的广告印象份额接近50%,而2月份时为51%.去年12月,Android系统的广告印象份额为46%,首次超越苹果iOS市场份额.在接下来的1月和2月,Android依旧领先于iOS. 尽管在广告印象方面输给了谷歌,但苹果保持着Millenial Media

  • Gartner:苹果iOS将继续主宰媒体平板市场 2014-05-15

    市场调研公司Gartner周一发布报告称,苹果iPad未来3年还将继续统治迅速兴起的平板电脑市场,谷歌则将迎头赶上. Gartner称,今年媒体平板电脑销量预计将达到7000万台,这一数字明年还将增长到1.08亿台,而2010年的平板电脑销量才只有1760万台. 到2015年时,苹果在平板电脑市场的份额将从现在的60%逐步降低到47%,而谷歌的份额将从现在的20%增加到39%.RIM基于QNX系统平台的Playbook今年将占据平板电脑市场第三的位置,份额5.6%,到2015年时其份额将增长到1

  • Android超苹果iOS成英国最大智能手机平台 2014-02-10

    Android超苹果iOS成英国最大智能手机平台 在线调研机构YouGov for Intelligent Environments周一公布的一项调查结果显示,Android已经超越苹果iOS成为英国最大的智能手机平台. 该调查结果显示,英国28%的智能手机用户使用Android系统,26%使用苹果iOS系统,14%使用RIM黑莓系统,6%使用诺基亚Symbian系统,5%使用微软Windows Phone系统. 调查还发现,18%的iPhone用户每天使用手机至少4个小时,而Android和黑

  • IDC:2015年WP7市场份额将超越苹果iOS 2014-02-21

    美国市场研究公司IDC预计,微软Windows Phone 7操作系统的智能手机市场份额将于2015年超越苹果iOS. IDC在报告中预测,到2015年,Windows Phone 7将占据全球智能手机市场20.9%的份额,而苹果iOS届时仅略高于15%,与iPhone当前的份额持平. 该报告显然非常看好微软与诺基亚的联姻.IDC预计,诺基亚Symbian的市场份额将从今年的21%降到2015年的0.2%. IDC还预计,Android的市场份额将从今年的40%增长到2015年的45%,RIM同

  • 分析称苹果iOS应用商店三分之二为僵尸应用 2014-03-07

    北京时间8月1日凌晨消息,据移动分析和广告公司Adeven利用其Apptrace工具进行追踪后所得出的结果显示,苹果iOS应用商店中的大多数应用都未被下载.未被评价而且在很大程度上难以被发现. Adeven将这些应用称为"僵尸应用",预计苹果iOS应用商店中共有约40万个此类应用.Adeven CEO克里斯蒂安·亨舍尔(Christian Henschel)在接受美国科技博客Gigaom采访时称,他认为对规模较小的独立应用开发者来说,它们在当前的苹果iOS应用商店结构中很难被发现.他指

  • 苹果iOS应用程序商店下载量突破100亿 2014-11-08

    苹果官网庆祝下载量超过100亿次 苹果iOS应用程序商店下载量于北京时间1月22日18:20分左右突破100亿,苹果此前宣布第100亿应用程序的下载者,将获得价值1万美元的iTunes礼品卡一张. App Store于2008年7月正式上线.上周,苹果宣布App Store的应用下载量即将达到100亿次,并承诺向第100亿个下载者提供价值1万美元的iTunes礼品卡.截至发稿时苹果官方还尚未公布获奖者姓名. 市场研究公司Asymco的分析师预计,苹果已向应用商店App Store的第三方应用开发