移动界面设计中的渐变

   iOS7采用了色彩新鲜的渐变效果,老实说,每个设计师都应该掌握这种最简单的装饰技巧。而且渐变效果千变万化,好的渐变效果能够成就一款设计,而糟糕的渐变效果会毁了一款设计。渐变效果的好坏取决于“色彩调整”以及“整个主题的搭配度”。除此之外,渐变效果还可以根据“流行色”来进行适度的调配。现在流行使用霓虹灯色彩般的渐变,让人感觉光鲜可鉴,再加上纤细简约的字体,线条简练的图标,整个界面将变得非常极简且高雅。

  今天我们要探讨的可不是渐变,要探讨的是移动界面设计中的渐变。我们来一起学习、感受一下现今移动界面设计中最流行的渐变吧。

  一、渐变作为界面的背景

  iOS7 Lockscreen by Michael Shanks

  神秘、优雅、颇具吸引力、简单、只包含必要信息,半透明的解锁条让我们感受到细腻的质感。


  Sense by Tommy Borgen.

  同样大道至简。整个渐变的色彩搭配很讲究,中心略微模糊的圆圈中包含了清新的字体,流动的背景,纯净的像梦一般。


  Personal Site Idea v1.1 by Ross Popoff-Walker.

  借用了黎明时分的天空渐变色彩。白色元素巧妙的从背景中脱颖而出。大量的留白,灰色的页顶和页底——用来导航——所有的一切完美搭配,形成了这款迷人的界面。


  Screens by Yasser Achachi

  令人震撼,令人目不转睛!很值得称道的色彩!白而亮的字体,像素细腻的图标和多姿多彩的背景良好结合,再加上透明的条纹,打造出惊人的界面。


  Coloring Clock by Kyung Min Kim

  焰火色彩的渐变,字体运用的很好,有机的色调让这款界面很突出。


  Instasave iPhone App by chirag dave – uijunction

  放射渐变,纯色菜单,设计师利用背景来衬托导航元素,图标很干净、纤细。


  Beam Day (concept clock) by Vladimir.

  背景为突出组建。极度纤细的轮廓和字体与整体搭配的很协调。


  Aero Weather by Alex Patrascu.

  明亮的渐变令人眼前一亮,用户会更注意到天气预报中的细节,得出能帮助日常生活的信息。


  iOS 7 Shortcuts Menu by Gaétan Pautler.

  设计师独出心裁,使用了令人眼前一亮的渐变手段,模糊的背景图像,令人一见倾心,蓝色到桃色的优雅。


  二、具有功能性的渐变效果

  这部分的界面设计,渐变不再是“背景”,而具备一些功能性。

  IndiaNIC App by Keyuri Bosmia

  可爱的彩虹条,设计师很有技巧的利用渐变的色彩来进行不同选项的区分。整体效果多姿多彩,令人振奋。


  SunFun App by Andrus Valulis.

  这个界面比上面那款柔和多了,既然应用主题是日落,便采用了日落的渐变色彩。


  Flat Style Color Wheel by Frantisek Krivda.

  这款界面使用了冷色调渐变,配合中立的白色,让人感觉颇具科技感、犀利。


  Haze Rays theme by Franz (Taptanium)

  同样色冷色渐变,让人感到冷静,放射渐变效果能够很自然的吸引用户注意,以便阅读信息。


  Waygo App V2 by Carrie Phillips.

  暖色渐变,同时区分选项,橙色让人感受到这款应用的动感和活力。


  Bird app GIF by Rustem Ramadanov

  很好的布局,可读性极好,渐变功不可没。


  Brisk by Eddie Lobanovskiy.

  这款应用的功能和渐变联系紧密,使用不同的色彩来代表温度。背景的渐变除了装饰性外,更注重功能性。


  Goo App by Nick Murphy

  今年流行色是什么?祖母绿!配以柔和的色调,唯一美中不足的是,单个界面中选项有点过多。


  “Giftboard” by Maria Bratchikova.

  设计师通过色彩的不同来区分功能


  Weather app UI by Amine Mounazil

  这个渐变效果不是很好,为何?上面的可读性稍差一点。


  结论

  对装饰性效果保持开发和挖掘,你便会有新的发现。渐变便是如此,本来是背景装饰,但是到了高明的设计师手里,变成了与功能相结合的元素。渐变能提供更加流畅的体验,让人感觉不突兀。

  要记得,渐变,不单单是装饰。

时间: 2024-10-24 01:49:10

移动界面设计中的渐变的相关文章

深聊界面设计中的动画原理

  这篇文章是关于变速过渡效果的,看似简单,但真正想让动画自然流畅,还需要深入了解动画的基本原理.今天我们将会逐步学习:基本概念.探讨加速减速,拆解缓冲曲线,最终学会运用到界面设计中. 你认为这两个球在做什么? 绿球弹跳很明显,但是红球在怎样运动?当然,它像绿球一样上下运动,落下和弹起所用的时间和绿球一样.然而,红球感觉很机械,而绿球让人感觉它确实在弹跳.为什么我们会有这种感受上的差异呢? 答案是变速过渡效果(Easing). 1. 时间和空间位移 (Timing and Spacing) 首先

设计参考:网页设计中的渐变文字应用实例

使用色彩渐变作为一种处理类型是在网站设计中制作迷人的文字的一种非常流行的技术.它们用于多种情况:网站logo.介绍性文字.视觉元素等等.但是请特别小心:造成时尚或俗气的只是在Photoshop设置里面的一些小错误,一点细微的差别就可能适得其反. 如果你正好在寻找网页设计中的渐变文字类的实例和灵感,这里是一些很不错的例子.希望能为你的设计提供些参考. 虽然用Photoshop/Fireworks等制图软件可以很容易的创建漂亮的文字渐变效果,但是我们同样也可以用CSS创建漂亮的文字渐变效果,而用CS

圆形元素在界面设计中的运用

  圆形元素在界面设计中被广泛运用,从常见的圆形图标到圆形的头像,又或是圆形的轮廓形状.圆形是一种特殊的形状,它能够在众多几何形状中被我们快速地注意到.也正因为如此,在使用圆形元素设计界面时会有一些注意事项. 一.圆形头像 放眼望去,圆形头像已然占领了我们的手机.不妨看看下面举的这些例子,如下图所示. 从左到右依次是搜狗地图.QQ.Instagram.当然,还有很多其它的例子,就不一一列举啦.此刻,肯定有同学已经按耐不住要跳出来反驳了,微信和Facebook就不是圆形头像,不信你看下面两张图.

界面设计中的那些版式-图版篇

  这篇主要说一下版面和图形使用,对高手来说可能有些老生常谈,但对移动端界面设计或许会有点参考价值,用几分钟看看吧. 界面美不美,除了构图之外,另一个重要手段的就是如何处理留白,也可以理解成版率.留白就是为了凸显层次.突出内容. 手持设备屏幕较小,决定了信息显示是有限的.用户有效接受信息并不与界面内提供的信息量成正比,有的时候提供的越多,用户反而真正接受的越少.妄想满屏都是信息是不可能的.用户越来越受不了满屏的信息了. 让用户接受该接受的有效信息,是关键. 在设计界面的时候,因为内容和页面都比较

网站界面设计中应该避免的六个错误

网站的界面设计是否精美决定着你的网站是不是足够吸引客户?很多设计师很迷茫,到底网站该重功能还是重设计,无法去满足所有用户的需求.下面小编为你总结了在网站界面设计中应该避免的六大错误,教你怎么留住客户. 避免程序太过复杂:必须使你的客户从打开网站到完成交易的整个过程都非常简单.安格瓦斯基表示,评估网站设计优劣时首先要站在顾客和浏览者的角度思考.从用户的角度出发,是作为一个网站最先应该考虑的.要让客户买得舒心才是最终目标. 避免全而不精:一个网站不可能面面俱到.仔细挑选要放上网的内容,精心组织,做到

对称性交互—界面设计中的重点

对于界面设计,很多人都很好奇,实际上,在界面设计中,对称性的信息呈现方式非常普遍,信息等价并且均匀分布在规则的几何图形周边能带来和谐的比例与平衡.在交互设计过程中,让用户的操作流也以对称性的方式完成,我们称之为对称性交互(Symmetry of Interaction).比如iPhone手机的开关机过程,都是以如下流程进行: 开关机作为手机常用的一套相关操作,其设计思路也采纳了对称性交互原则,让两者遵循同样的流程进行,很容易理解和学习.事实上,大部分手机的开关机都是通过同一套流程或者同一个按键控

ios开发中storyboard界面设计中的约束功能

首先约束的设置菜单在打开storyboard界面的[Editor -> pin -> ...]菜单中,这里面有几个功能: 设置宽度,高度: 这个作用不明显 设置两个view之间横向和丛向的距离: 设置view到superview的上下左右的间距: 设置两个view等宽,等高: 我觉的第三个功能拿来做不同尺寸自适应非常好. 看一下设置的例子,例子中我们做了两个元素等高额的约束,但是发现1处有个红点剪头,而且2处结束线是橘色,说明这个约束没有设置完毕呢,设置完毕应该是蓝色的线条.那我们点击处的剪头

网页界面设计中的明暗

现实生活中无时无处不存在着光照和阴影.你看到的每样东西都是通过光影反射形成它的形象.视觉上,光影帮助我们辨别事物,认知他们的材质.尺度和透视. 所以如果要让我们的网页设计更加自然.有动感且真实直观,正确理解光影效果就变得非常重要.以下是助你更好利用光影的五个技巧,好好运用它们,能让你的设计更加精致,从众多的页面中脱颖而出. 光照与阴影的原理快速剖析 下图中,光源来自左方.高光是光照最强的部分,阴影位于距离光源最远的地方.光影的存在帮助我们感知有关物体表面材质的大量信息. 不过你可能要问,这和网页

界面设计中的结构

构建界面视觉层级的元素有颜色的显著程度,图片.文字的尺寸大小,还有最基础的,内容的组织结构. 结构设计是指对界面内容进行分组,对界面中的信息.数据进行设计使之结构化呈现的过程. 好的结构设计能使界面信息传达更加清晰.快捷.那么,如果进行结构设计呢? 结构设计---内容的分组使用线.框.背景色来分组 这是最常见的分组方式,在UI设计中历史悠久. 使用线来分组 使用框来分组 使用背景色分组 不管是线.框,还是背景色,都是可见的边界,本来引入这些可见边界的目的就是为了使信息的呈现更加清晰,但是这些视觉