首页 > 网页教程 > 设计分享 > APP界面设计教程:让人眼前一亮的渐变设计手法

APP界面设计教程:让人眼前一亮的渐变设计手法

时间:2015-04-30    来源:UI中国

本文整理了一些在移动界面设计中使用渐变的优秀的例子,大家在看的同时可以思考自己如何用渐变增加亮点。

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.

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

移动界面设计 移动界面 渐变设计

相关推荐
APP浏览体验设计的思考:如何理解用户的眼?
20个创意漂亮的手机应用程序登陆页面设计欣赏
iOS7用户界面设计的10个准则分享
交互设计上常见的界面切换动画如何优化
Windows Phone 8 UI设计指南分享
APP设计经典:Pinterest的交互细节
对症下药!如何设计受欢迎的应用引导页?
搞定APP着陆页优化的超实用原则(附工具)
APP界面设计:移动缺省页如何设计才会内容“丰富友好”?
产品设计:FEEDLY创始人再聊改版实战经验
写给初学者:移动站点app开发尺寸基础知识
扁平化设计与Material Design区别在哪里?
APP导航设计:不要在移动端菜单设计犯这些错误
交互设计基础!四个移动界面常见的动效类型
国外UI设计师:UI界面设计作品精选
APP设计!6个方法助你设计出优秀的APP
APP设计零基础教程:5步让你设计出漂亮的APP界面
15个值得学习的APP交互体验设计细节
手机APP设计规范:图标和按钮视觉设计规范
APP界面设计之页面布局的22条基本原则
APP设计!教你怎样才能把APP引导页设计的高大上
经典案例分析:10个戳中痛点的APP更新欢迎页文案
2015最流行的APP设计是啥?比如 Facebook那样的
前方高能!别让这10个设计误区毁了你的APP
十五个用户体验设计(UI/UX)案例剖析
腾讯CDC分享QQ登录界面的banner设计过程点滴
移动终端全新界面设计语言“Metro”简析
20个精致漂亮的视频播放器界面设计欣赏及点评
浅谈界面设计中的结构设计
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
分享:360安全桌面主题设计过程及思路总结
移动应用设计的横竖屏切换中的界面设计与体验提升
国外精彩网页界面设计案例赏析
成功的视觉设计需要给用户传达四个要点
富有灵感和创意的web布局及交互设计赏析

分类导航

教程推荐

热门特效

热门教程