网页设计 & 灵感 » 2020-2021 好看的UI色彩趋势总结

2020-2021 好看的UI色彩趋势总结

发表于: 网页设计 & 灵感. 评论
Sponsor

2020年设计界看到一系列设计领域的新色彩趋势,它们包括:霓虹渐变、轻量渐变、高饱和度色系、梦幻色/幻彩色系,为了更深入的了解和应用,本文将结合案例来介绍这些色彩的特点、应用场景。也希望在充分理解之后动手尝试这些好看的配色,做出更优秀的作品。

2020-2021 好看的UI色彩趋势总结

一、霓虹渐变

Part1 什么是霓虹渐变?

宝赢彩票导航XIANSHISHENGHUOZHONG,XUANCAIDUOMUDENIHONGDENGXIAOGUOCHANGBEIYINGYONGYUGUANGGAOPAI、DENGXIANGDEZHANSHIZHONG,ZAIANYEDEHONGTUOXIA,NIHONGDENGZHANXIANCHUGUANGYINGLULIDEGUANGYINGXIAOGUO,XIYINZHERENMENDEYANQIU,LIUXIAQIANGLIEDESHIJUECHONGJI。RUTUSUOSHI,ANYEZHONGDENIHONGDENGXIAOGUO,WEINIHONGJIANBIANDEXIANSHILINGGANLAIYUAN。

2020-2021 好看的UI色彩趋势总结

YESEXIADENIHONGDENG

关键词

2020-2021 好看的UI色彩趋势总结
霓虹色特点总结

宝赢彩票导航1、YIZISE、LANSE、YANGHONGWEIZHUDELENGNUANSEDAPEI;ZHENGTIYANSEDUIBIDUGAO;

宝赢彩票导航2、YILENGSEDIAOWEIZHU,JUBUNUANSEDIAO,DAPEINIHONGGUANGGANDUIBISEDIANZHUI;

3、BEIJINGYONGANSEDIAOGENGNENGTUXIANNIHONGXIAOGUO;

宝赢彩票导航4、GENJUNIHONGDENGDELINGGAN,CAIYONGLENIHONGDENGFAGUANGDEXIAOGUO。

Part2 霓虹渐变好在哪里?

宝赢彩票导航JINNIANLAI,QIANGSHIJUECHONGJIDEJIANBIANSEBEIGUANGFANYINGYONGZAIGEGELINGYU,BAOKUOXUANCHUANHAIBAO、ZONGYIJIEMU、YOUXIDENGDENG,QIZHONGZUIWEIZHUMUDESHINIHONGJIANBIAN,SHEJISHITONGGUOJIANGZHEIZHONGGAOBAOHEDUDEJIANBIANSEYUANSEDIAOBEIJINGJIEHE,XINGCHENGQIANGLIEDESHIJUECHONGJI,TUCHUZHUTI,XUANRANFENWEI,SHIZHENGGEHUAMIANDESEDIAOGENGJIAHUOLIHUA、NIANQINGHUA。

01 娱乐案例

最近较火的综艺节目“这就是街舞”,其宣传海报通过高饱和度的霓虹色渐变,与人物及背景形成强明暗对比,结合对人物本身的光影细节刻画,突出人物主体,增强画面视觉冲击力

2020-2021 好看的UI色彩趋势总结

02 游戏案例

2020年7月,由Veewo Games发布的一款游戏「霓虹深渊」,画面以紫色、蓝色、洋红的冷暖色搭配为主基调,通过明暗色的对比,以及大面积的紫色光影渲染氛围,营造出极强的未来科技感宝赢彩票导航,而霓虹光感的使用以及涂鸦风格的融入,使得游戏更加时尚、自由。

2020-2021 好看的UI色彩趋势总结

Part3、霓虹渐变在UI中的应用

01 专题页

页面整体以紫色,蓝色,洋红为主,冷暖色搭配,营造出层次感,活泼生动且年轻化;偏暗色调的霓虹渐变色背景烘托出专题页的内容主体,使得页面运营氛围更好、更强;同时在一些重要的、需要用户操作点击的部分使用了暖色调的霓虹色渐变宝赢彩票导航,使得内容主体在冷色调的环境下更为突出,提高了用户体验。

2020-2021 好看的UI色彩趋势总结

02 App

以暗色调背景作为烘托,搭配紫色、蓝色、洋红为主的冷暖色,是霓虹色渐变经典的应用方式。在暗色背景下运用霓虹色渐变,通过明暗的强对比突出页面关键元素,对用户进行视觉引导,同时丰富页面层次,增强页面的视觉冲击力及艺术感染力

2020-2021 好看的UI色彩趋势总结

03 Web

暗色的背景与撞色霓虹搭配的插画手法使得界面看起来更加的酷炫和高科技,整体页面在霓虹色渐变的使用下更富层次性。通过主体与环境色的呼应、冷暖明暗的对比,展现出主体光源对空间层级的变化效果。此组合用来作为web头部页面,冲击感十足,科技感也非常的棒。

2020-2021 好看的UI色彩趋势总结

04 Icon

通过高饱和度的霓虹渐变色彩,结合外发光、叠加、模糊等多种技法,塑造出更加丰富的光影效果,不仅增强图标视觉表现力及空间感,更凸显了图标的风格化与趣味性。宝赢彩票导航暗色调背景的烘托,使霓虹色渐变图标更加有质感,更加突显。

2020-2021 好看的UI色彩趋势总结

05 插画

通过大面积的霓虹色渐变结合迷彩渐变的绘制手法,构建不同色彩鲜明的矩形图案,暗色调的背景烘托与颜色用冷色为主暖色为辅、点缀,画面感极强,极具视觉冲击力。

2020-2021 好看的UI色彩趋势总结

Part4 总结

宝赢彩票导航NIHONGSEJIANBIANZAIANSEDIAODEBEIJINGHONGTUOXIA,ZHUANGSEDECHONGJIGANSHIDEHUAMIANGENGJIAJUYOUKEJIGAN、CHAOLIUGAN;DUIYUNIHONGSEJIANBIANSHIYONGBIJIAOPINFANDESAIBOPENGKEFENG、GUZHANGFENG,YESHIXIANXIAJIAOWEILIUXINGDEFENGGE,TONGGUOFENGFUXIANMINGDESECAIYUBEIJINGZUOQIANGDUIBI,YINGZAOCHUJIJUSHIJUECHONGJILIDEHUAMIANXIAOGUO;TONGSHINIHONGJIANBIANSEYEBEIGUANGFANDESHIYONGYUapp、web、CHAHUADENGLINGYU,SUIRANTACHUXIANYIJIU,DANQIDADAN、QIANGLIEDEPEISEFENGGEJIHUAMIANDAILAIDECHONGJIGANYIJICHAOLIU、ZIYOUGAN,SHIDETARENGRANCHENGWEIDANGXIAYIZHONGBIJIAOLIUXINGDESECAIQUSHI。

二、轻量渐变

通过对2021年色彩趋势分析发现,渐变色的运用仍然非常流行。相较之前运用较多的强视觉冲击类——对比色渐变,轻量渐变在色彩运用上变得更加理性与克制。主要特征为轻量、柔和、层次递进,营造一种舒缓、治愈的沉浸感。

2020-2021 好看的UI色彩趋势总结

Part1 什么是轻量渐变?

色彩上的渐变是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩,充满变幻无穷的神秘浪漫气息的颜色。根据强弱程度分类,渐变主要分为强渐变和弱渐变,轻量渐变属于弱渐变范畴。在过渡的过程中,轻量渐变特点为渐变色彩邻近,幅度轻柔,节奏缓慢,融合感和细腻感较强

关键词

2020-2021 好看的UI色彩趋势总结

轻量渐变特点总结

轻量渐变是一种简约且高度可用的元素,它可以创造出一些时尚的氛围,但是又不会有信息过载的担忧,这使得轻量渐变成为一种富有感染力又非常实用的设计解决方案。轻量渐变特点之一为明度高、饱和度低,色彩轻量而透气。在轻量渐变的使用过程中,同色系、邻近色系较多,其过渡自然柔和。

Part2 轻量渐变好在哪里?

01 毛玻璃案例

透过今年各大设计网站上的作品不难发现,较多的视觉设计师将轻量渐变的色彩趋势与毛玻璃的质感趋势结合,运用在界面中。下图画面中,轻量渐变的柔和属性搭配上毛玻璃的朦胧感,营造一种视觉感官的舒适感与呼吸感,已成为2021年UI界面设计趋势之一。

2020-2021 好看的UI色彩趋势总结

02 3D案例

当轻量渐变与3D碰撞时,则会产生更加趣味的视觉化学反应。画面中使用的3D效果可以最大限度还原现实世界的材质与光效,呈现极具脑洞的“超现实”效果,为用户呈现不可思议的异度空间,吸引用户眼球。画面中的背景使用了轻量渐变来创建出多彩的模糊背景,为3D素材创造出另类维度的空间感,增加了画面深度,使设计更具真实感。

2020-2021 好看的UI色彩趋势总结

Part3 轻量渐变在ui中的应用

01 宝赢彩票导航Icon

自如app最新的宝赢彩票导航风格采用轻量渐变+毛玻璃效果,金刚区应用最为明显。图标的色彩选用低饱和邻近色,遵循3色系原则,使得整体色彩统一且不失丰富。从单个图标看,色块部分采用单色渐变,通过easing gradient插件工具调整渐变值,以达到最佳效果。毛玻璃特有的通透感宝赢彩票导航,会将渐变色块透映出来,故制作毛玻璃效果时,需添加环境色使其融合。

2020-2021 好看的UI色彩趋势总结

02 启动页

两个启动页中均采用高明度、低饱和度外加一些毛玻璃微透质感的表现手法。第一个界面主要传达安全、简洁、可靠的情感,第二个界面则表现的是活动主题的梦幻感。这两个页面虽目的不同,但却均体现了柔和、细腻、轻量感宝赢彩票导航的视觉感。设计师发现,使用者在经历过传统大色块、大面积、较强冲击力渐变的视觉后往往更加想追寻视觉上的宁静,所以视觉负担相对较小、相对轻量的微渐变色彩和可以利用微透质感减弱色彩冲击力的毛玻璃相结合的视觉效果越来越多地被运用。

2020-2021 好看的UI色彩趋势总结

03 界面背景

在界面背景中,使用少量的邻近色渐变来做通栏背景,使整体氛围更加柔和、富于层次感宝赢彩票导航,同时起到强调头部的作用。卡片处采用透明毛玻璃效果,利用毛玻璃特有的通透感,透映出底部渐变,使卡片兼具质感与美感。

2020-2021 好看的UI色彩趋势总结

04 彩色化卡片

卡片中采用同色系的轻量渐变效果,营造融合、舒适的视觉观感。卡片的颜色根据色彩情绪进行选取,增加辨识度,进而增加点击率。

2020-2021 好看的UI色彩趋势总结

Part4 总结

JIANBIANZHISUOYIMEIGEJINIANJIUHUICHENGWEISHEJILIUXINGQUSHI,HENDACHENGDUSHANGDEYIYUTAZIRANDETEZHENGHEPUBIANDEXIYINLI。JINNIANSHENGXINGDEQINGLIANGJIANBIAN,GENGDUOCONGYONGHUDEJIAODUCHUFA:JIANQINGJIEMIANJIYONGHUDAILAIDESHIJUEFUDAN,WEIQITIGONGGENGQINGYINGDESHIJUETIYAN。ZAIYINGYONGDEGUOCHENGZHONG,QINGLIANGJIANBIANYUMAOBOLI、3DDENGLIUXINGBIAOXIANXINGSHIXIANGJIEHE,KECHUANGZAOCHUQUANXINDE、YOUQUDESHIJUETIYAN,BUJINZAIWAIGUANSHANGQIDAOMEIHUADEZUOYONG,ZAIGONGNENGSHANGYEDADAOLEQIANGDIAO、XINGMUDEZUOYONG。

三、高饱和度色系

Part1 什么是高饱度色系?

在过去的两年中,高饱和度色系的应用已经是重要的趋势之一。年轻人作为移动互联网的主力军,他们青春,活力,有朝气,因此,代表年轻活力群体的鲜艳,高饱和度色彩成为视觉主流趋势之一。宝赢彩票导航偏高饱和度色彩更易吸引注意力,烘托主体,影响用户情绪,提高品牌的识别性,增强品牌影响力。

关键词

2020-2021 好看的UI色彩趋势总结

高饱和度色系特点总结

1、YANSEBAOHEDUGAO,YANLI;

2、SECAIFENGFUDUOYANG;

3、SHIJUECHONGJILIQIANG;

SUIRANGAOBAOHESECAISHIJUECHONGJILIQIANG、GENGRONGYICHUANDIQINGXU,DANZAISHIYONGSHIRENGXUKEZHISHIYONG。YUANYINZAIYU:1.GUOGAODEBAOHEDU,RONGYICHANSHENGSHIJUEPILAO;2.GAOBAOHEDUDEYANSEBINGBUSHIHESUOYOUDEYONGHUQUNTI。

2020-2021 好看的UI色彩趋势总结

ZHEILISHUODEGAOBAOHEDUDEYANSE,BINGBUSHIYIWEIZHUIQIUGAOBAOHECIJIXINGYANSE,WOMENZAISHIYONGSHIHOU,RENGXUDUIYANSEDEMINGDU,BAOHEDUJINXINGHELISHEZHI,ZHEIYANGCAINENGBAOZHENGWOMENSHIJUESHANGDESHUSHIXING。

Part2 高饱和度色系好在哪里?

综艺海报案例

在综艺海报中,高饱和度的半插画+实物的表现形式,让画面极具趣味性和视觉吸引力,获取了大批流量。

2020-2021 好看的UI色彩趋势总结

Part3 高饱和度色系ui中的应用

01 产品品牌色

宝赢彩票导航PIANGAOBAOHEDUDESECAI,ZAIUISHEJIYINGYONGZHONG,WANGWANGGENGRONGYITUOYINGERCHU。ERYIXIEPINPAIDEPINPAISEWANGWANGJIUSHIPIANGAOBAOHEDUDEYANSE,BIRUUISHEJIZHONGPINPAISEDEYUNYONG,ZAIYIDINGCHENGDUSHANGKEYIJIANGPINPAIYINGXIANGLIKUODAHUA,PINPAIYINGXIANGLI,YEHUIRANGYONGHUZENGJIAXINRENGAN。

宝赢彩票导航LIRU,WEIXINDELVSE,ELEMEDELANSE,MEITUANDEHUANGSE,TAOBAODECHENGSE……DENGDENGZHEIXIEPINPAISE,DOUSHENRURENXIN。

2020-2021 好看的UI色彩趋势总结

GAOBAOHEDUPINPAISE

02 运营色

活动营销类弹窗,以及运营类的H5,运营专题,促销类的BANNER中经常运用高饱和色的视觉刺激以达到强调、引流的作用。

2020-2021 好看的UI色彩趋势总结

Part4 总结

GAOBAOHEDUSEXIYIQIXUANLI、QIANGSHIJUECHONGJILIDENGTEDIAN,ZAIUISHEJIZHONGYIZHIBEIGUANGFANDEYINGYONG。TAKEYIGENGHAODEYINGZAOFENWEI、CHUANDIQINGXU、ZENGQIANGSHIJUECENGCIJIEGOU、TIGAOPINPAIDEKESHIBIEXING。ZHUANGSE、CHAHUA+BANSHIWU、SHOUHUIDENGGEZHONGXINSHILIUXINGDEBIAOXIANSHOUFASHIDEGAOBAOHESEDEYUNYONGSHANGGENGJIAFENGFUDUOYANG。

四、梦幻色/幻彩色

Part1 什么是梦幻色/幻彩色

XIANRENSHENGFENGFUDUOZIDESECAICHENGZHIWEI“MENGHUANSECAI”,XIANGPAOMO、XIANGTIANSHI、 XIANGMENGJING、XIANGTANGGUO…

关键词

2020-2021 好看的UI色彩趋势总结

梦幻色/幻彩色特点总结

MENGHUANSEZAIYANSEMIANBANZHONGCHUYUZHONGJIANPIANSHANGBUFEN,JITEDIANWEIZHONGCHUNDU、GAOMINGDU。

PEISEFANGMIANHEXIE,SHIJUEXIAOGUOXIANGDUIWENNUANROUHE。CHANGYIJIANDAN、GANJINGDEBEIJINGWEICHENTUO,HONGTUOZHUTIWUYIJIZHUSEDIAO。SECAICHANGJINGPIANXIANGHUANXIANG、TIANMAXINGKONGDEZIYOUSHIJIE,JIRENYILANGMANDESECAIGANSHOU,RONGYILINGRENCHENJINZAIHUAMIANDEWENNUANFENWEIZHONG。

2020-2021 好看的UI色彩趋势总结

宝赢彩票导航XIANJIN,SECAIZUOWEIZHONGYAODESHIJUEYUYANERBEIYUELAIYUEDUODESHEJISHISUOGUANZHU,ERZAISHIJISHEJIZUOPINSHUCHUDANGZHONG,YANSEYEBANYANZHEJIANGCHANPINLINIANCHUANDIJIYONGHUDEMEIJIE⻆SE。KEJIAN,WANZHENGDESHEJIZUOPINSHILIBUKAISECAIDEBIAOXIANDE,NEIMELEJIESECAIQUSHIJIUHUIXIANDEYOUWEIZHONGYAO。ERZAIZHONGDUOYANSEZHONGDEMENGHUANSE,GENGSHIJIJUQIANYANXINGHETUCHUGANDESECAI。

糖果色插画案例

色彩倾向明快轻量,采用颜色烘托主题的表达方式,较能抓住用户眼球。塑造了色彩多变的视觉风格,适用于多种品牌调性,给用户温暖、轻松且焕然一新的感觉。

2020-2021 好看的UI色彩趋势总结

绚丽配色案例

在下图插画案例2-绚丽配色中,能发现绚丽配色类插画通过光的运用,让画面呈现出细节更丰富的视觉效果。 一些光晕的重叠使用,使得画面变得朦胧,更显梦幻特点。另外,梦幻色还可以营造神秘的氛围,在网站宝赢彩票导航使用的梦幻色彩,搭配引人入胜的画面,神秘感的体现更加突出。吸引用户的点击,从⽽提升⽹站的浏览量,实现流量变现。

2020-2021 好看的UI色彩趋势总结

材质案例

在材质-塑料质感中,大面积的梦幻色彩渐变,形成很强的视觉冲击。塑料的质感配合灯光与彩色渐变,显得非常梦幻;透明的气泡材质,整体质感给⼈轻盈、透亮。这种流动的色彩呈现出了源源不断、生命不息的美好愿景,带给观者美好的想象。

2020-2021 好看的UI色彩趋势总结

part3 梦幻色/幻彩色在ui中的应用

01 3D物体

MENGHUANSEYINGYONGYU3DWUTIZHONG,ZHENGGEHUAMIANGENGJIAFENGFUDUOCAI,WENNUAN、QINGSONGFENWEIXIADEWUTIFANGFOJIANGCONGPINGMUDESHUFUZHONGZHENGTUOCHULAI,LAJINLEHUAMIANYUGUANZHEZHIJIANDEJULI。

2020-2021 好看的UI色彩趋势总结

02 手绘插画

这是一组描绘田野间的手绘插画,为观者提供感观上的愉悦。一切事物在自然中的蓬勃生长以及梦幻色下烘托出的神秘感,使得整体画面有种超脱现实、游离人生宝赢彩票导航的美感。形成了以自然景观为主导的唯美风格。

2020-2021 好看的UI色彩趋势总结

03 App

2020-2021 好看的UI色彩趋势总结

2020-2021 好看的UI色彩趋势总结

part2 总结

宝赢彩票导航SUIRANMENGHUANSEMEIYOUTEBIEJINGLIDUOMUDESECAITEDIAN,DANZAIMENGHUANSEDESHIYONGZHONGSUOHONGTUOCHUDETEDINGFENWEI,BUDANTUCHULEBUTONGCHANPINDETEDIAN,YEGENGJIAMANZULEYONGHUDEQINGGANXUQIU。SECAIQUSHIBIRANYUSHIDAICHAOLIUYIJIYONGHUXIHAOJINMIJIEHE,ZUOWEISHEJISHIDEWOMENXUYAOLEJIE,BINGNENGYUWOMENDESHEJICHANCHUJINXINGJIEHE。

结语

SECAIQUSHIBUDUANDEGENGXINBIANHUA,SHEJISHIXUYAOYOUMINRUIDEXINQUBUZHUOLINGGAN,YUNYONGDAOZUOPINDANGZHONG。QUSHISHIYIZHONGFANGXIANG,KEYITIGONGLINGGAN,DANSHISHEJIZHONGYEBUYINGMANGMUZHUISUI,YAOJIEHEZIJIDESHIJIANLIJINXINGDIAOZHENGHESHIYONG。WENZHANGDEMUDEYESHIWEILEJIDAJIATIGONGLINGGAN!ERBUSHIZHAOBANE。

作者 | 贰元
来源 | 站酷(zcool.com.cn/u/22117822)

推荐:查看最受欢迎的 301 个设计网站 →
交流:结交更多有才华的设计师?请加入,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }