巧用渐变色打造精致移动端APP

渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩,充满变幻无穷的神秘浪漫气息的颜色。在扁平化设计刚刚兴起时,渐变是设计师们避之不及的设计手法。然而自从Instagram把经典的宝丽来相机logo更改为色彩鲜亮的扁平化图标以来,渐变色逐渐回归到了人们的视野之中,也逐渐成为了近年来移动APP设计的主要风潮之一。

渐变色兴起的原因在于扁平化风格极其容易造成同质性,设计师如果需要追求视觉丰富度的设计语言,多数会运用插画设计和动效设计让自己的设计脱颖而出,但是这些技巧短时间内难以快速掌握。

而渐变色在实际的设计中简单实用,可以高效率地提高设计的格调;更具视觉冲击的特点能够牢牢抓住用户眼球;简洁的图形和高饱和度的渐变色又能够较好兼顾设计的便利度和视觉的分量感。在渐变色设计风潮回归的背景下,我们一起来看看渐变色在移动APP中常见的表现手法。

一、线性渐变

线性渐变是渐变设计中基础的表现手法之一,也是最常见的创作手法之一。一般来说,渐变的方式按照方向分为三种:横向渐变、纵向渐变和对角渐变。下面我们来看看实例分析。

横向渐变:

这是一款在线购物APP的概念设计,包括设置,自定义和优惠券界面,设计师以卡片的形式呈现了用户既有的优惠券信息,每张卡片都使用了统一的双色横向渐变色,突出了卡片上的信息,整体界面极简而高雅。

纵向渐变:

天气类APP的界面设计怎样才能脱颖而出?看看下面这款设计。设计师巧妙地运用双色纵向渐变,配合APP的时间线,打造了精致的傍晚的天空渐变背景,在按照滑动查看温度变化时,能够获得视觉上的时间流动观感,主题和功能相互呼应,相得益彰。

对角渐变:

这款设计是用快速原型工具Mockplus打造的音乐APP启动页。在功能上,当你打开APP时,系统会自动询问用户的当前心情状态,来自动筛选符合当前心情的音乐,实现智能推送。设计师巧妙地运用了对角的渐变色作为背景,暖色调的渐变背景使界面变得更加友好和亲切,对角的手法使界面更加活泼动感富有层次,带给用户柔和人性化的AI产品体验。

二、图片上的渐变色叠加

作为一种设计趋势,在图片上叠加色彩已经流行了相当长的一段时间。而从图片上的单色色彩叠加,到渐变色的叠加,是一个相当自然的“推导”过程。

在页面的背景、头图中加入渐变的色彩叠加,可以让它们的整体感更强,从而让用户注意到其他的更加重要、关键的元素,强化页面的可读性。这种设计对于大图的作用尤其明显。此外画面整体也会更加神秘、优雅并且富有吸引力。

使用过程中也要注意对背景图的挑选,图片的内容和色调需要保持一致,使用半透明往往能让画面更加细腻,但是再相互叠加后需要强化页面信息的可读性,不能为了装饰而装饰。

三、多角度多层次叠加

对于Instagram图标和UI的变化,团队成员这样说到:如果镜头是进入一个更大胆、更简洁设计的桥梁,那彩虹就是带你进入彩色渐变设计的联结者。色彩一直就是 Instagram 最重要的一个组成部分,你能在经典的 App 图标、过滤器和整个社群中的照片与视频中见到各种不同的颜色。当我们开始重新想象彩虹,我们更多地关注那些简约的设计,但最终我们还是需要更多的温度和能量来填充我们的图形设计。

Instagram抓住了原有logo的核心元素:彩虹、镜头和取景器,背景上用多角度多层次的叠加打造出了简约而缤纷的彩虹意象。具体来看,这枚icon主要用了一组线性对角渐变,加两组球形径向渐变叠加组成,成为了渐变色运用的最惊艳的案例。

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

渐变色的运用也不限制于单一的背景装饰,也可以具备一些功能性。设计师会采用相同色、同类色、近似色、对比色、补色来将每个菜单项清晰区分开,让界面平衡在一个频率上,这样的画面多姿多彩,也更富有节奏感和舒适性。

了解了渐变色在移动APP中的基本表现方式后,对于设计师来说,想要用好渐变色,需要在色感和色彩搭配上多下功夫。这里为大家推荐一些常用的渐变色设计工具。

uiGradients

这款网站贴心地为每一种颜色搭配取了相应的名字,点击左上角即可浏览所有颜色,还可以从上面导航栏中选择一种颜色,从而呈现出这个色系对应的所有渐变色搭配方案,挑选到合适的后,点击上面显示的色值即可复制。

网址:https://uigradients.com/

CoolHue

CoolHue是一个相当实用的渐层背景网站,提供大约 30 种不同配色的渐层背景,可以免费下载为图片格式或产生 CSS3 语法。只要把它加入网站样式表,就能在任何区域套用渐层色彩。

网址:https://webkul.github.io/coolhue/

小结

移动APP高速发展的背景下,渐变色也是人们审美水平不断提高的产物。在UI中渐变常常配合投影和外发光使用,以增强其立体效果。虽然渐变是目前设计风潮中的热点,但是其独到的表现方式还是要根据APP本身的需求而来,不能对功能和可读性产生负面影响。​​​​

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏VRPinea

为使VR更逼真,Disney Research推程序语言动画新方法

33140
来自专栏通信云团队

透过镜头看杯酒人生

第一次认识李诞是在吐槽大会,第二次看到李诞是在奇葩说,第三次是在腾讯视频新推出的节目《奇遇人生》中重新认识他。他在微博中发的开心点,人间不值得总会被奇葩说的辩手...

16220
来自专栏视频咖

透过镜头看杯酒人生

第一次认识李诞是在吐槽大会,第二次看到李诞是在奇葩说,第三次是在腾讯视频新推出的节目《奇遇人生》中重新认识他。他在微博中发的开心点,人间不值得总会被奇葩说的辩...

9420
来自专栏程序员叨叨叨

1.4 本书主要内容和结构

本书旨在引导初级 GPU 学习者步入 GPU 编程的大堂,并普及一些在国内资料中较少见到的 GPU 算法,例如光照渲染中的 bank BRDF,以及体绘制中的光...

10420
来自专栏新智元

【计算机图形学生成完美笑容】科学家根据时空轨迹生成“成功的微笑”

【新智元导读】面部表情是社会性互动中非语言沟通的重要形式,美国明尼苏达大学的一项新研究使用3D计算机模拟生成微笑表情,并对其进行评价,发现“成功的微笑”所具有的...

42870
来自专栏PPV课数据科学社区

当禅师遇到一位理科生,后来禅师疯了!!知识无极限!!

老禅师忙着给各种年轻人指导人生,总是用一些模凌两可的语句,想着想着你自己似乎就想透了。但当满口心灵鸡汤的老禅师遇上理科生……于是有了下面的对话↓↓↓ 1、青...

43830
来自专栏玉树芝兰

白话本科毕业论文写作

老师把写论文的基本方法告诉了学生,指点他到哪里查资料、读论文。满以为他可以从这些核心期刊上的优秀论文里不仅获取到研究主题、内容与资料,而且还可以学习前辈们写文章...

11420
来自专栏企鹅号快讯

谷歌分享注视点渲染技术的新研究成果

显示器分辨率在不断提高,但图形处理能力并没有以同样的速度提升。注视点渲染技术通常被认为是下一代头显必备的能力,该技术能够让头显降低对显卡渲染的要求,显卡会集中渲...

24800
来自专栏顶级程序员

Python自动生成表情包

源 / 创业智库 文 / 唐一 作为一个数据分析师,应该信奉一句话----"一图胜千言"。不过这里要说的并不是数据可视化,而是一款全民向的产品形态----表情...

53080
来自专栏媒矿工厂

AI如何用于现场直播场景

与许多产业一样,通过软件和算法辅助,电视与视频制作很可能被人工智能和机器学习所改造,而当前这些制作任务都是由人来执行。随着现场直播报道涉及的范围越来越广,而相关...

44230

扫码关注云+社区

领取腾讯云代金券