教你玩转平面设计渐变色
来源：优漫教育
发布人：UMAN
时间：2023-10-25 18:44:18
平面化的风格也有不足之处，如：简洁有余，张力不足。在某些情况下，平面设计可能过于“平坦”，从而影响可用性。假如用户界面过于“平”，可操作的元素将被淹没在类似平面元素的海洋之中，那么今天新的视觉训练将帮助您解决这个问题。
一、那怎样补救平面设计带来的问题呢？
自2017年以来，UI界面色彩的应用越来越大胆。新版本的淘宝等，抛弃了以前单一的橙色，而采用了较为年轻态的渐变色，主色调，导航条图标采用暖色单色相的渐变。这种渐变通常被用来设计app内导航条图标，入口图标等等。利用单色相位渐变，淘宝APP的整个页面感觉更加通透、生动，不再有呆板和窒息的感觉。
近期的一款游戏APP——纪念碑谷2也是以单色相位的渐变为游戏背景，在让整个画面丰富的同时又不会过于抢夺主体色彩，使画面显得清新而不沉闷。
用相似颜色的不同颜色，带来强烈的视觉冲击，有一种梦幻的感觉，最早尝试这种风格的是ins,ins拟物风时期的logo一直以来都受到好评，在这个时候，logo的logo，没有简单的把logo用来做背景墙，用来装饰和装饰装饰。其简约风格的UI界面，对用户非常友好，用户只需欣赏到漂亮的图片，然后双击点赞即可。
近来苹果发布的ios11，也在平面化的基础上做了一些改进，除了使标题更加粗犷，还增加了可点击部分的颜色变化，其中不乏强烈的多色相渐变。图片颜色采用两种或两种以上的渐变手法，多色相渐变在视觉上的表现力会更强一些，给使用师更强的视觉冲击，这类配色在Web、banner设计、插图设计等方面运用较多。但是，新潮的设计师们并不满足于此，他们将渐变设计得更加花哨。而最出色的是今年改版的优酷视频APP。
这款设计还是比较复杂，不适合做更小的icon。可见，优酷后来将icon改为单色相渐变。不仅仅是图形用户界面设计，色彩的大胆运用也延伸到图形设计。这类使用多用于电商H5页面活动，能极大地调动活动所要营造的气氛，给用户最大的视觉冲击力，最终达到消费目的。
说到辣么多，那么怎么说上面的一些渐变色如何运用到实际中才能让自己的设计稿显得高大上呢？
二、直线型渐变。
本文将变色部分分为A、B、C三部分，对其取色分析。通过以上实例的取色分析可以看出，如何让自己的渐变配色不显得太脏，那么取色的亮度(B)要很高，渐变色中的色值都在90以上。所以亮度的取值非常重要！
三、垂直度渐变+球状渐变。
因为网页界面面积比较大，在渐变时采用大面积。假如仅仅使用垂直线性渐变是比较单调的，此时我们需要添加球状渐变，增加画面的丰富性。球形渐变的制作非常简单，新建一个图层，选择带有羽化边缘的笔刷样式，在画面上轻轻扫一扫，然后用蒙版盖在前面做的垂直渐变底色上。
一、那怎样补救平面设计带来的问题呢？
在设计上，近扁平的设计只是在扁平样式能够提高可用性的情况下才采用。这不会武断地认定或暗示渐变和投射有害。接近平面的设计利用微小的投影和渐变来创造出空间感、距离感、视觉层次感、视觉线索和边缘效果。所以设计师为了弥补平面化的这一缺陷，重新在色彩上寻找突破。运用渐变技术是最有利的武器之一。
自2017年以来，UI界面色彩的应用越来越大胆。新版本的淘宝等，抛弃了以前单一的橙色，而采用了较为年轻态的渐变色，主色调，导航条图标采用暖色单色相的渐变。这种渐变通常被用来设计app内导航条图标，入口图标等等。利用单色相位渐变，淘宝APP的整个页面感觉更加通透、生动，不再有呆板和窒息的感觉。
近期的一款游戏APP——纪念碑谷2也是以单色相位的渐变为游戏背景，在让整个画面丰富的同时又不会过于抢夺主体色彩，使画面显得清新而不沉闷。
用相似颜色的不同颜色，带来强烈的视觉冲击，有一种梦幻的感觉，最早尝试这种风格的是ins,ins拟物风时期的logo一直以来都受到好评，在这个时候，logo的logo，没有简单的把logo用来做背景墙，用来装饰和装饰装饰。其简约风格的UI界面，对用户非常友好，用户只需欣赏到漂亮的图片，然后双击点赞即可。
近来苹果发布的ios11，也在平面化的基础上做了一些改进，除了使标题更加粗犷，还增加了可点击部分的颜色变化，其中不乏强烈的多色相渐变。图片颜色采用两种或两种以上的渐变手法，多色相渐变在视觉上的表现力会更强一些，给使用师更强的视觉冲击，这类配色在Web、banner设计、插图设计等方面运用较多。但是，新潮的设计师们并不满足于此，他们将渐变设计得更加花哨。而最出色的是今年改版的优酷视频APP。
这款设计还是比较复杂，不适合做更小的icon。可见，优酷后来将icon改为单色相渐变。不仅仅是图形用户界面设计，色彩的大胆运用也延伸到图形设计。这类使用多用于电商H5页面活动，能极大地调动活动所要营造的气氛，给用户最大的视觉冲击力，最终达到消费目的。
说到辣么多，那么怎么说上面的一些渐变色如何运用到实际中才能让自己的设计稿显得高大上呢？
二、直线型渐变。
本文将变色部分分为A、B、C三部分，对其取色分析。通过以上实例的取色分析可以看出，如何让自己的渐变配色不显得太脏，那么取色的亮度(B)要很高，渐变色中的色值都在90以上。所以亮度的取值非常重要！
三、垂直度渐变+球状渐变。
因为网页界面面积比较大，在渐变时采用大面积。假如仅仅使用垂直线性渐变是比较单调的，此时我们需要添加球状渐变，增加画面的丰富性。球形渐变的制作非常简单，新建一个图层，选择带有羽化边缘的笔刷样式，在画面上轻轻扫一扫，然后用蒙版盖在前面做的垂直渐变底色上。
相关推荐
-
【UI培训】：关于UI设计新手常遇到的问题及解决方法
UI设计新手常遇到的问题有哪些？比如，请问UI设计师每天的工作内容是什么样的？除了做图还要干什么？还需要哪些技能？个人职业规划通常什么样？做图只是视觉设计师最基础的工作，除了视觉执行，还需要向上接入PD了解产品需求、在设计中验证交互流程，向下跟进程序开发、数据收…行业资讯发布时间：2022/03/24 查看详情 -
室内设计应体现文化元素的六大重要思维
无论是首都北京的故宫，还是西藏的布达拉宫，其精巧的室内装潢和环境艺术，都有谁能说出这并非出自顶级的专业室内设计师和艺术大师之手，中国传统室内设计文化也正是传统东方文化与古典建筑艺术的精华部分。行业资讯发布时间：2022/03/24 查看详情 -
UI设计培训中有没有学不会UI的人
UI设计培训中有没有学不会UI的人？优漫教育小编要说是真的有，就是那些根本不想学的，就像你永远叫不醒一个装睡的人。如果你对ui有强烈的学习兴趣，想在ui行业有所建树，那么不论你是高中毕业、大学毕业，不论你是有计算机基础、零基础，不论你是男生、女生，不论你是20岁、30…行业资讯发布时间：2022/04/01 查看详情
