作者:河北华信智原 
2018-04-13 09:52:18

在今天,渐变色几乎就是时尚的代名词。从微妙而优雅的渐变,到多彩失真的复古效果,渐变所带来的视觉吸引力,从视觉到交互上都有不错的提升。

如果你对于渐变无感,那么今天的文章,会给你10个让你无法拒绝的使用渐变的理由。

1、让背景具备视觉吸引力

渐变的背景能够帮助用户更好地感知和理解设计。当眼睛感知到屏幕上的色调和明暗变化的时候,会有意识地注意到特定的色彩和视觉焦点。

渐变是非常有有用的吸引人的视觉工具,为很多设计项目增色不少。虽然使用渐变的方法很多,但是最流行的依然是将图片和文本放置在有渐变色彩的背景上。

下面的案例就是这么做的。柔和的色彩让视线更容易找到被安放的地方,空旷的背景因为渐变而显得富有高级感,前景元素拥有不错的可读性,底部的“发现更多”也更容易被人注意到。

2、在文本字体中营造焦点

渐变可以在背景中使用,而前景元素同样可以使用渐变。如果将高饱和度的渐变色彩叠加在字体当中,能够创造出颇为抓人眼球的设计感。不过值得注意的是,在色彩的选取上,一定要有意识地控制对比度,这样才能保证可读性。

3、渐变色叠加能够让平淡的图片更加出彩

色彩是有情绪的,将色彩叠加到图片上,能够赋予图片以情感和情绪。渐变色叠加在图片上的时候,即使图片本身的素质和形式感并不强,色彩的加持同样能够让整个场景更加时尚。

渐变色彩的诶额加能够强化品牌,为网站赋予个性。明亮的色彩和柔和的色彩所带来的效果是截然不同的。

不过考虑到渐变和色彩叠加的使用频率已经很高了,在设计的时候一定要注意就加入一些独特、有个性的元素。

4、引导视线

好的渐变设计,能够起到引导视线的作用。绝大多数的用户在获取信息的时候,都是从上到下,从左到右来看的,我们常说的F式的阅读方式就是这样。

你可以使用渐变色彩的明暗变化来强化这种阅读习惯,比如从用户的阅读起点(左上角的LOGO或者顶部的导航),色彩逐步渐变到底部的CTA按钮上,眼睛会先注意到明亮的部分,然后逐步移动到较暗的部位。

5、令人难忘的色彩搭配

虽然渐变越来越流行,但是每种不同的配色方案所带来的体验其实是截然不同的。一些杀手级的配色非常值得长期使用,品牌化的配色也可以让用户更容易记住品牌的视觉特征。

渐变能够让色彩之间产生关联,甚至渐变能够让这几种色彩组成的渐变如同一种全新的色彩一样使用。尤其当这几种色彩和你的配色方案相互匹配的时候,这种视觉上的关联就显得非常强大了。

6、强化品牌

如果你的品牌配色适合制作成渐变的时候,一定要试试。在自己的网站和平面设计作品中使用这样的渐变色彩,能够更好地同用户产生联系。

想想如何让相同的渐变在不同的场合发挥作用吧。在网站中,在广告里,在海报中,在门店的装修中,在社交媒体上,当这种渐变出现在各种各样的地方的时候,用户对于品牌的认知会越来越强。

下面的案例是一个银行的网站,他们的这种渐变颇为有趣,他们不仅在网站中这样设计,而且在其他的地方也使用了类似的配色,这样就从配色上强化了品牌的概念。

7、渐变还是非常容易创建的

创建渐变色还是非常简单的,只需要选取2到3种不同的颜色,然后选择色彩变化的形状,色彩的起始的位置,以及叠加的位置。

就形状而言,色彩渐变是有方向性的,从左到右,从上到下,又或者基于一点发散出来的,千变万化。在设计渐变的时候,可以包含一种甚至多种渐变的类型。

选择渐变的色彩可能是最麻烦的步骤,你可以在色轮上选取对比色或者近似色来制作渐变。当然,很多时候你并不一定非得自己去设计配色,而是可以使用下列现成的工具来制作:

WebGradients:内置180种预先设计好的渐变,可以生成CSS、PNG和Sketch、PS的版本。

Gradient Buttons:可以生成带有不同悬停状态的CSS按钮

Gradient Wave Generator:可以使用你自定义的色彩来制作很炫酷的渐变效果,你还可以控制起始的位置。

8、色彩渐变会感觉更加自然

虽然渐变不会是你的首要的想法,但是通常渐变会给人以更加自然的感觉,尤其是当渐变配色符合自然特征的时候。自然界中绝大多数的物体都不是单一色彩。

渐变本身就是自然的选择,所以,当你不知道选取什么样的色彩的时候,可以从自然的照片中选取合适的色彩。下面的插画就是一个很典型的例子,傍晚天空的色彩会自然地从橙色过渡到蓝色。

9、帮你构建独特的主视觉

当你的整个设计并没有那么个性化的特征的时候,一个好的渐变效果能够帮你创造出有效且有趣的视觉。跳脱的明亮的色彩或者品牌色能够让你的网站设计非常有特色。

色彩的变化本身是非常有趣的,它们即使单独用作设计元素,都可以创造足够优秀的设计,让页面充满情感吸引力,帮助用户找到对的感觉。

10、渐变是设计趋势

渐变是一种简约且高度可用的元素,它可以创造出一些时尚的氛围,但是又不会有信息过载的担忧。这使得渐变成为一种富有感染力又非常实用的设计解决方案。

渐变之所以每隔几年就会成为设计流行趋势,很大程度上得益于它自然的特征和普遍的吸引力。

这10个理由告诉你,为什么要在设计中使用渐变相关推荐

  1. 10大理由告诉你为什么要学习Python

    Python 是当今非常流行的编程语言,在互联网上经常可以看到他的身影.它应用非常广泛,例如编程.Web 开发.机器学习和数据科学等.在最新的tiobe排行中 Python 甚至超越了 Java 成为 ...

  2. 插图设计正流行,10大理由告诉你如何靠它增强用户体验

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 过去的几年中,用户界面中加入插图一直是最受欢迎也最稳固的设计趋势之一.今天,摹客的小伙伴将带领大家一起讨 ...

  3. 10个理由告诉你为何要学Java编程?

    为什么要学习Java编程语言?这个只要学习Java的小伙伴都会有答案,比如它的易学.面向对象,开源工具和库等.在Java中获得经验可以确保有一个收入丰厚的工作岗位.有一长串的编程语言仍然存在它们的优点 ...

  4. 程序员为什么一定要有一个属于自己的博客网站?10大理由告诉你

    原文地址:https://www.yundashi168.com/358.html 前不久,网易博客发布公告,宣布将从2018年11月30日00:00起正式停止网易博客的运营.届时将关闭服务器,用户将 ...

  5. android平板iso,告诉你android平板比iPad好的10个理由

    告诉你android平板比iPad好的10个理由 作者: SC日期: 2011-08-25文章属性: 导购 第1页: [IT168 导购]人类已经无法阻止iPad了,没错,优秀的操作体验,爽滑的手感, ...

  6. 许昌网络企业网站建设的10个理由

    如果您是一个企业的老板或营销管理着,如果您对于自己的企业是否上网.建站犹豫不决,那么,下面这篇文章你不应错过,因为它给出了企业上网.建站的10个理由 网络营销是开拓国内外市场的有效武器 1.巨大的消费 ...

  7. 企业WAP建站的10个理由

    1. 面对1亿多用户 中国现在有5.5亿手机用户,其中手机上网用户已超过1亿,与现在的互联网用户人数相当,你同样会注意到,身边越来越多的年轻人用手机访问WAP站点,进行图片下载信息浏览.就近期而言,2 ...

  8. 为什么学习大数据,大数据专家写给大数据分析学习者的10个理由

    因为大数据爆发,因此出现了大数据开发.大数据分析这两大主流的工作方向,目前这两个方向是很热门,不少人已经在开始转型往这两个方向发展,相较而言,转向大数据分析的人才更多一点,而同时也有不少人在观望中,这 ...

  9. 和程序员约会的10个理由

    ** 前两天我正在头脑风暴一些极客(geek)想法的时候,我的老婆突然跟我讲,你应该写一篇文章,讲讲和程序员约会的10个理由.我愣了一下,"这个应该你告诉我才对啊!" 我和老婆结婚 ...

最新文章

  1. druid.io 海量实时OLAP数据仓库 (翻译+总结) (1)——分析框架如hive或者redshift(MPPDB)、ES等...
  2. 【机器学习算法-python实现】Adaboost的实现(1)-单层决策树(decision stump)
  3. python没有菜单栏怎么搞mac_Mac 下 sublime 怎么调出顶端菜单栏
  4. mysql服务启动失败 Starting MySQL. ERROR! The server quit without updating PID file
  5. 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
  6. python和java哪个好-Python和JAVA的就业前景哪个好点?
  7. [转载] gamma函数stiriling公式_数学笔记|特殊函数(1):Gamma函数
  8. 谷歌Chrome浏览器开发者工具教程—JS调试篇
  9. 《UNIX编程艺术》--读书笔记
  10. 将excel表数据顺序与linux,Excel中表格数据进行颠倒顺序的设置方法
  11. 一阶高通滤波+二阶Mahony滤波的四元数姿态解算
  12. 是配置在计算机硬件上的最基本的系统软件,试题库
  13. css 对checkbox样式进行修改
  14. html5实践报告总结,社会实践总结报告500字
  15. 如何将图片验证码转换为文字,图片识别。
  16. 互动媒体尝试之P5创意绘图板
  17. 360影视php视频系统源码,全新360影视2.0完整源码 双端APP+三级分销 附视频搭建教程...
  18. vite+vue3+ts+Threejs 实现web3D车展,并可切换颜色
  19. 尝试使用OPENMV识别装甲板
  20. 一款简单易用的GIS地图数据浏览器

热门文章

  1. Opencv-python摄像头录制视屏,拍照
  2. 传智黑马java基础学习——day22(File、递归)
  3. 用linux如何用vi编写c程序,linux中VI编写C程序。。。
  4. Hadoop学习之路(二)Hadoop发展背景
  5. linux切换用户sudo命令
  6. python 机器人工具——Sympybotics
  7. html 人物介绍 轮播,jQuery卡通人物介绍卡牌轮播切换代码
  8. 熟悉Access2013的基本操作(*如何设置两个主键)
  9. python 抢券_抢券抢不到生气了,准备写一个自动抢券的东东,时间成本最低的 web 方案是什么?...
  10. 内储说下六微第三十一