UI 设计中的渐变

简评: 渐变是通过两种或多种不同的色彩来绘制一个元素,同时在颜色的交界处进行衰减变化的一种设计。从拟物到扁平再到渐变,人们慢慢发现它能创造出从未有过的一种色彩感觉 —— 独特、现代和清爽。(本文译者@Aceyclee)
很长一段时间以来,设计界都不怎么待见「渐变」,这还得拜 90 年代的 PowerPoint 所赐,毕竟那时候的渐变是这样的:

然而时过境迁,今天你打开 Dribbble 或者 Behance,可能会看到不少使用渐变的设计。本文将会分享如何在设计中使用「渐变」的实用技巧。
▎为什么我们突然爱上了渐变?
想回答这个问题,我们需要重返 2014。
2014 年是扁平设计流行的元年。这一年,Google 发布了 Material Design,Apple 也用扁平 UI 更新了 macOS。那年的扁平设计让人感到兴奋,特别是和拟物设计对比的时候。
但是扁平设计的局限性也是显而易见的,其中最大的一个局限是 —— 设计师能够使用的颜色和样式大大减少,几乎不到 15 种颜色可用于扁平设计。
由此,设计师们开始尝试「渐变」:
- 它给设计师带来了更大的创作自由。扁平设计中单一的颜色扼杀了设计的潜力,而渐变为无限可能打开了大门。通过混合颜色的手段,设计师们可以创造出更丰富的视觉样式。
- 渐变还给设计引入了深度和维度,解决了扁平设计中一切都「太平」了的问题。
▎渐变让人惊喜
比如说,渐变能做出更大胆的表达。
渐变创造出了一种意想不到的效果,即使像应用图标这样微小的元素,也别有一番风味:

又或者,渐变能突出某些元素。
一个好的用户体验,往往能引导用户完成产品流程,而精心的设计有助于让用户下意识地进行下一步。比方说让页面某些部分视觉效果更强烈,从而让用户更关注这部分。
UI 设计中的渐变的更多相关文章
- 浅谈UI设计中妙用无穷的深色系背景
英文:medium 译者:优设网 - 陈子木 链接:http://www.uisdc.com/ui-benefits-of-dark-background# --------------------- ...
- shape和selector是Android UI设计中经常用到的
shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和 ...
- 【配色指南】UI设计中使用明亮色彩的利与弊,你知多少?
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师.随着扁平化设计和Materia ...
- UI设计中的48dp定律【转】
有朋友建议我偶尔写写技术类的文章,所以我打算开始穿插性的写一些偏技术方面的科普文章,尽量往小白能看懂的方向写,今天我来讲讲UI设计中的48dp定律. 那么先说说什么是dp ?其实对于一个非技术人员要把 ...
- 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) 声明:本文由入驻搜狐公众 ...
- UI 设计中的视觉无障碍设计
我给博客改了主题色,从 这样的 改成了 这样的:然而我问小伙伴看看效果他却并没有发现改变. 红绿色盲在亚洲人中占比,男性约 5%,女性则小得多.也就是说,就算仅考虑为国内用户开发应用,这也是很大的一部 ...
- UI设计中蕴涵着系统重要的数据结构与功能设计
UI设计中蕴涵着系统重要的数据结构与功能设计 UI设计中的用户需求,事件(用例)驱动
- UI设计中颜色的前进色与后退色
暖色调的颜色属于前进色.膨胀色可以使物体的视觉效果变大,而收缩色可以使物体的视觉效果变小. 颜色的另外一种效果.有的颜色看起来向上凸出,而有的颜色看起来向下凹陷,其中显得凸出的颜色被称为前进色,而 ...
- UI设计中的软件知识
最近挺想学学UI的,因为我们公司没有UI,所以做页面都是全靠摸索,老是被领导说没有审美[捂脸] 学习UI所需要的软件 PS AI Sketch XD Sketch是MAC才能安装的软件 作者:彼岸舞 ...
随机推荐
- TNS:could not resolve the connect identifier specified解决办法
添加环境变量解决:TNS_ADMIN ->> D:\OracleDB\product\11.2.0\dbhome_1\NETWORK\ADMIN
- ad2014注册出现:注册 - 激活错误 (0015.111)
将安装包内的(adlmact.dll & adlmact_libFNP.dll)这两个文件取出并覆盖即可.安装包内文件具体位置:在安装包内搜索“adlmact”出现的两个文件“adlmact_ ...
- kotlin之字符类型
kotlin语言中,字符类型用Char表示,与java区别在于,kotlin中字符不能直接看成数字,如下: java中: void check (char c){ if(c==97){ } } kot ...
- elasticsearch-6.2.3单机搭建
1.这里说明下,elasticsearch为了保证安全性需要创建新的用户名,需要在新的用户名下运行,本人用的是elasticsearch-6.2.3,centos7.3 2.切换目录到:cd usr/ ...
- c++ 函数后面有个 const
非静态成员函数后面加const,类似如下函数: class testClass{ public: void testClass() const{ /*...*/} private: /*...*/ } ...
- Day01:API文档 / 字符串基本操作
JDK API 什么是JDK API? JDK中包含大量的API类库,所谓AP就是一些写好的,可提供直接调用的功能(在Java语言中,这些功能以类的形式封装). JDK API包含的类库功能强大,经常 ...
- python学习道路即将结束
其实今天算是失眠了,所以打算整理一下自己的学习内容了! 今天是我看视频学习的第六天,已经学习到定义类和对象了,有时候回想python这门语言真的很入门吧,各种语法比较简易能懂. 入门首选 print( ...
- 【ABAP系列】SAP ABAP 动态指针
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 动态指针 ...
- LeetCode.997-找到镇法官(Find the Town Judge)
这是悦乐书的第373次更新,第400篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第234题(顺位题号是997).在一个城镇,有N个人从1到N标记.有传言说其中一个人是秘 ...
- 【LeetCode】309、最佳买卖股票时机含冷冻期
Best Time to Buy and Sell Stock with Cooldown 题目等级:Medium 题目描述: Say you have an array for which the ...