首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 校园文章 > 正文

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

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

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

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

    下面我们开始。

    一、锁屏界面

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

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

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

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

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

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

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

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

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

    二、拨号界面

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

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

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

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

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

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

    三、浏览器界面

    苹果iOS和谷歌安卓用户界面风格对比及技术总结9
    • 苹果iOS和谷歌安卓用户界面风格对比及技术总结_系统用户界面 华为 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文苹果iOS和谷歌安卓用户界面风格对比及技术总结_系统用户界面 华为由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.