简评: 渐变是通过两种或多种不同的色彩来绘制一个元素,同时在颜色的交界处进行衰减变化的一种设计。从拟物到扁平再到渐变,人们慢慢发现它能创造出从未有过的一种色彩感觉 —— 独特、现代和清爽。(本文译者@Aceyclee

很长一段时间以来,设计界都不怎么待见「渐变」,这还得拜 90 年代的 PowerPoint 所赐,毕竟那时候的渐变是这样的:

然而时过境迁,今天你打开 Dribbble 或者 Behance,可能会看到不少使用渐变的设计。本文将会分享如何在设计中使用「渐变」的实用技巧。

▎为什么我们突然爱上了渐变?

想回答这个问题,我们需要重返 2014。

2014 年是扁平设计流行的元年。这一年,Google 发布了 Material Design,Apple 也用扁平 UI 更新了 macOS。那年的扁平设计让人感到兴奋,特别是和拟物设计对比的时候。

但是扁平设计的局限性也是显而易见的,其中最大的一个局限是 —— 设计师能够使用的颜色和样式大大减少,几乎不到 15 种颜色可用于扁平设计。

由此,设计师们开始尝试「渐变」:

  • 它给设计师带来了更大的创作自由。扁平设计中单一的颜色扼杀了设计的潜力,而渐变为无限可能打开了大门。通过混合颜色的手段,设计师们可以创造出更丰富的视觉样式。
  • 渐变还给设计引入了深度和维度,解决了扁平设计中一切都「太平」了的问题。

▎渐变让人惊喜

比如说,渐变能做出更大胆的表达。

渐变创造出了一种意想不到的效果,即使像应用图标这样微小的元素,也别有一番风味:

又或者,渐变能突出某些元素。

一个好的用户体验,往往能引导用户完成产品流程,而精心的设计有助于让用户下意识地进行下一步。比方说让页面某些部分视觉效果更强烈,从而让用户更关注这部分。

UI 设计中的渐变的更多相关文章

  1. 浅谈UI设计中妙用无穷的深色系背景

    英文:medium 译者:优设网 - 陈子木 链接:http://www.uisdc.com/ui-benefits-of-dark-background# --------------------- ...

  2. shape和selector是Android UI设计中经常用到的

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和 ...

  3. 【配色指南】UI设计中使用明亮色彩的利与弊,你知多少?

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师.随着扁平化设计和Materia ...

  4. UI设计中的48dp定律【转】

    有朋友建议我偶尔写写技术类的文章,所以我打算开始穿插性的写一些偏技术方面的科普文章,尽量往小白能看懂的方向写,今天我来讲讲UI设计中的48dp定律. 那么先说说什么是dp ?其实对于一个非技术人员要把 ...

  5. UI设计中px、pt、ppi、dpi、dp、sp之间的关系

    UI设计中px.pt.ppi.dpi.dp.sp之间的关系 武汉AAA数字艺术教育 2015-07-24 14:19:50 职业教育 pi px 阅读(3398) 评论(0) 声明:本文由入驻搜狐公众 ...

  6. UI 设计中的视觉无障碍设计

    我给博客改了主题色,从 这样的 改成了 这样的:然而我问小伙伴看看效果他却并没有发现改变. 红绿色盲在亚洲人中占比,男性约 5%,女性则小得多.也就是说,就算仅考虑为国内用户开发应用,这也是很大的一部 ...

  7. UI设计中蕴涵着系统重要的数据结构与功能设计

    UI设计中蕴涵着系统重要的数据结构与功能设计 UI设计中的用户需求,事件(用例)驱动

  8. UI设计中颜色的前进色与后退色

    暖色调的颜色属于前进色.膨胀色可以使物体的视觉效果变大,而收缩色可以使物体的视觉效果变小.   颜色的另外一种效果.有的颜色看起来向上凸出,而有的颜色看起来向下凹陷,其中显得凸出的颜色被称为前进色,而 ...

  9. UI设计中的软件知识

    最近挺想学学UI的,因为我们公司没有UI,所以做页面都是全靠摸索,老是被领导说没有审美[捂脸] 学习UI所需要的软件 PS  AI Sketch XD Sketch是MAC才能安装的软件 作者:彼岸舞 ...

随机推荐

  1. jquery 登录判断遇到的小问题

    1.碰到的第一个问题是: 往body上加载check,用load不管用,可以用ready试试. 2.原来jquery里获取用的val(),我一直以为是value()... 尴尬 3.两个标志位是为了判 ...

  2. P5436 【XR-2】缘分

    P5436 [XR-2]缘分 题解 很显然给出一个n,要想使缘分最大,一定要选 n 和 n-1 对吧 但是这里有一个特盘,当 n=1 时,缘分应该为1 而不是0 代码 #include<bits ...

  3. leetcode 63 不同路径II

    二维数组动态规划,还可以采用一维数组进行动态规划. class Solution { public: int uniquePathsWithObstacles(vector<vector< ...

  4. 改善EDM数据营销的关键点

    EDM数据营销有效增加潜在顾客.提升销售量,而成效得看你的邮件到达率.当点选发送后,邮件需要经过层层关卡才能够进入联络人收件箱,若是你的发送评级越好,邮件越容易进入收件箱.评级非常重要,它能够证明你是 ...

  5. 多变量线性回归时使用梯度下降(Gradient Descent)求最小值的注意事项

    梯度下降是回归问题中求cost function最小值的有效方法,对大数据量的训练集而言,其效果要 好于非迭代的normal equation方法. 在将其用于多变量回归时,有两个问题要注意,否则会导 ...

  6. Windows下搭建Docker与Kubernetes(DevOps一)

    Docker与Kubernetes (二)搭建 开通  Hyper-V 安装Docker for Windows 开通Kubernetes 3.关键概念 PodKubernetes 中的最小单元,一个 ...

  7. 页面访问过程及get/post的理解——

    Chrome查看开发者工具面板,常看的一些数据? Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈. Console:记录开发者开发过程中 ...

  8. Linux服务器重启后IP变掉的处理方式

    工作中有一台服务器为物理机,重启后IP就变掉了,影响到了使用,于是将服务器上的IP配置为静态方式,问题得以解决,具体如下: 1.登陆Linux服务器,cd /etc/sysconfig/network ...

  9. Python 的列表生成器

    列表生成器为创建列表提供了一种简洁的方式. 比如说,我们可以这样实现一个平方数列表 squares=[x**2 for x in range(10)] 或者这样迭代一个字符串来生成列表 >> ...

  10. delphi中 formclose的事件 action:=cafree form:=nil分别是什么意思?

    MDI子窗体关闭时用到的(以下摘自Delphi的帮助)caNone  The form is not allowed to close, so nothing happens.caHide  The ...