一份全面系统的渐变色自学指南

踏入新创科技业以来,总是听见许多设计师/工程师朋友们在抱怨设计师与工程师之间的合作有多么的…不融洽(糟糕),要码是设计师常常抱怨工程师没有 美感,不重视设计细节,或是连Guideline都不读完就来跟我讲该怎样设计( → 强烈建议iOS/Android 工程师不管未来是否会接触接口设计都花些时间把iOS的Human Interface Guideline跟Material Design Guideline给看完,这是基本啊!!基本啊!!在线已经有满坑满谷的翻译文章啰,所以别再拿看不懂英文当借口啰);另一方面就是工程师也常常会抱怨 设计师总是把写动画当作小画家,把写程序当成写国字(Framer会红的原因?!)或是总是有着过于天马行空的设计想法。

踏入新创科技业以来,总是听见许多设计师/工程师朋友们在抱怨设计师与工程师之间的合作有多么的…不融洽(糟糕),要码是设计师常常抱怨工程师没有 美感,不重视设计细节,或是连Guideline都不读完就来跟我讲该怎样设计( → 强烈建议iOS/Android 工程师不管未来是否会接触接口设计都花些时间把iOS的Human Interface Guideline跟Material Design Guideline给看完,这是基本啊!!基本啊!!在线已经有满坑满谷的翻译文章啰,所以别再拿看不懂英文当借口啰);另一方面就是工程师也常常会抱怨 设计师总是把写动画当作小画家,把写程序当成写国字(Framer会红的原因?!)或是总是有着过于天马行空的设计想法。

很幸运的是这个状况几乎不曾发生在小弟迄今的工作经验当中,主要是因为一起工作的前辈们就是一群神级的工程师或是神级的工程师+设计师,即使是学生 时期合作的设计师们也都是相当优秀的伙伴。但考虑到80%..90%的工程师们都会有过这么一段与设计奋斗的辛酸史,在这边希望能藉由一连串的基础概念, 以及小弟日常工作运用到的知识来帮助广大的非设计师职场伙伴来多了解一些设计的眉眉角角。

当然,(设计师+工程师联机)与PM的战争又是另外一个故事了。

小弟我既不是本科系(设计相关)出身,也不是资工相关出身,但有幸接受几位厉害前辈(HammerSophyFran) 的指导,目前是一位对设计与使用者体验具有相当热忱,但却是个设计做不好,拍照拍不好的iOS工程师。因为不具本科系背景这样的先天性优势(劣势)?!太 艰涩的理论就…期许各领域的前辈们在阅读之余能给予一些指教啰。这边首先针对渐层的主题写了一篇(上),来聊聊常常使用的渐层类型,该如何快速有效的运用 这些渐层类型,以及分享一些在线设计师们优秀的作品。

在一切开始之前,首先推荐一个网站uiGradient,无聊没事的时候可以上去晃晃找点渐层配色的灵感。
这系列文章主要会介绍四个主题:

  1. 色彩学
  2. 类似色渐层(Linear Gradient)
  3. 对比色渐层(Linear Gradient)
  4. 金属色渐层

色彩学

底下这就是传说中的伊登色相环,The end。

一份全面系统的渐变色自学指南

蛤?为什么没有介绍一下色彩学,因为…其实在这里还不需要太了解啊,好麻那我们稍微来说一下什么是色相环好了:

基础的十二色环由瑞士设计师约翰·伊登所提出,其结构为:

等边三角形内的三原色─红、黄、蓝作为第一次色,将三原色两两相加可调出橙、绿、紫等第二次色,如果再将这六种颜色中两相邻的颜色等量互调,得到该两色的中间色(第三次色),便产生了十二色色环。

是不是已经看不下去了?这种太理论的东西对于非专业的我们稍微有些太遥远啰,当然并不是说这些设计的理论不重要,只是对于刚入门的伙伴们我们可以稍 稍缓一些,在建立了相关基础之后我们再来更进一步聊聊这些色彩学应用的理论。这篇文章所应用到的渐层运用方法其实只要简单理解一下伊登色相环,相近色,对 比色以及色相明度彩度等等的基础概念就够啰。

一份全面系统的渐变色自学指南

类似色渐层

灰阶渐层:首先我们先从配色的基础的开始,白 → 灰的渐层可以说是大自然中光影变化最基本的一种类型,这样子的渐层搭配也是最建议初学者拿来练功用的喔(再运用白 → 灰的渐层时并不需要考虑到检测器上各渐层区段的差异,这些差异只要一用不好就很容易导致颜色灰阶过高(脏掉)或是饱和度(彩度)不均匀的问题)。以下图范 例而言,左侧上浅下灰的渐层,在搭配内光晕后能够轻易的让图形浮凸于纸面;右侧上灰下浅搭的渐层,则可以搭配内阴影来呈现凹陷于纸面的效果。

一份全面系统的渐变色自学指南

上浅下深(左)上深下浅(右)

上面两种是基本中的基本,如果想要做出中间凹陷,但是凹陷的部分是浮凸出来的感觉,除了上灰下浅的基本技巧之外还要稍微运用一点放射状渐层来分别调整上部以及底部的光影,下一篇会提到更多这样的观念喔。

一份全面系统的渐变色自学指南

是不是有一种凸出来的感觉呢?

当然,上图几个示范的三维效果其实还不够完整,但以现在Flat Design盛行的状况,对于光于影的变化有一些基础的了解对于取悦团队中的设计师妹妹肯定是相当有帮助的(笑)。有了基本的视觉雏形,我们可以再进一步 的进行渐层(渐层角度,渐层区段,内外光晕)的微调,同时考虑到光影的变化以及阴影的角度位置,就可以轻易的作出如下图范例的效果啰!(下图除了白 → 浅灰的渐层之外,为了做出凹陷的平面,同时也运用了浅黑 → 深黑的渐层变化)

一份全面系统的渐变色自学指南

Designed by by Paco for Smartisan

那么究竟该如何制作一个简单的灰阶渐层呢?其实做起来就跟下面这张图一样容易 →

一份全面系统的渐变色自学指南

主要的调整就只在检色器的最最最最最左侧上下移动即可,如果希望带点淡淡的色泽可以往右边稍微移动一点点,这样的效果有时候会运用在物体本身是白色 但周围是有色背景时,物体因为背景产生的反光影响到白色物品的表面色泽。如果希望整体给使用者的印象是清爽干净的,渐层中搭配的灰色就不应该太重,如示意 图从白色往下调整一点点即可,若是选用深灰色来做搭配,产生的则是另一种沈稳的效果。

该如何简单实作上面的时钟icon呢?

Step 1. 绘制一个上浅下深(颜色相近)的圆角矩形作为icon背景(光源在上)。

一份全面系统的渐变色自学指南

Step 2. 为图形加上内阴影(底部)与外阴影来凸显出立体感。

一份全面系统的渐变色自学指南

Step 3. 绘制中间的钟面部分,运用浅黑 → 深黑的渐层来制作凹陷的平面,同时搭配椭圆形状+高斯模糊来制作简单的光影效果以进一步模拟圆弧凸面的效果。

一份全面系统的渐变色自学指南

Step 4. 最后在绘制指针时要稍微注意一下渐层拉的角度喔!!在绘制时请务必随时记着光照射的方向 → 在这里因为指针的边缘较细,指针尖端边缘的部分会因为反光而较为明亮,因此我拉的渐层既不是正0度或是90度而是顺着指针方向的25度左右。后续的部分较 简单我们就先不多谈啦(其实是懒惰)XD

一份全面系统的渐变色自学指南

高彩度色系渐层

讲完了灰阶的基础渐层搭配,我们来看一下其他色系的搭配。单纯在同一个颜色当中进行明度彩度的调整如下图跟灰阶的部分相当类似就不再赘述啰。

一份全面系统的渐变色自学指南

这边只补充一个小重点,同色系的渐层选色请记得往检色器的右下角移动,右下角移动,右下角移动,很重要所以说三次。这样子的移动方式主要是为了避免 调整色阶的同时灰调的增加过快,渐层也比较不容易脏掉或是造成颜色差异过大喔。除此之外,对于初学者在渐层的角度配置调整上面,当所有物体处于相同平面时 应该尽量让整体角度效果一致(毕竟光主要会从同一个地方来麻?)。

一份全面系统的渐变色自学指南

接下来我们来看看稍微进阶一点点的 → 选配渐层对于跟我一样的初学者而言遇到的几个问题不外乎是 1.搭配的渐层色感觉不对(不自然) 2.搭配的渐层色好像有点暗沉(脏)。那该怎么样避免这些问题来做出漂亮的渐层呢?

一份全面系统的渐变色自学指南

配出上图这样的渐层其实非常容易,除了前面所提到的一些小技巧之外只要注意两个基本原则就可以啰,对于浅色系的渐层,如同浅色系渐层范例,明度的调 整区间不宜太大(1/10)。在检色器上面我们可以改变彩度,色相来配出喜爱的渐层变化,但是上下移动的幅度就要保守一点,否则配出来的渐层就很容易产生 脏脏的视觉效果。

一份全面系统的渐变色自学指南

△ 浅色系渐层范例

至于暗色系的渐层,明度的变化就可以大一点,但记得除非渐层一开始的选色就是相当深的暗色系,否则调整的幅度也请尽可能确保在明度的变化在1/4–1/5的区间来避免过脏或是颜色落差过大的问题。

一份全面系统的渐变色自学指南

△ 暗色系渐层范例

补上一个类似色搭配图形(透明度)变化的范例,蓝绿,绿色渐层的使用相当的普遍,当这类型颜色的明度及彩度较高时往往可以带给使用者一种活泼明亮的视觉印象。

一份全面系统的渐变色自学指南

高明度色系渐层

上面几组渐层的搭配彩度较高,现在我们来看一下该如何处理明度较高的渐层配色模式。基础的高明度渐层处理起来相对容易,确保选择的颜色都保持在检色器的上方1/5内,同时不要让彩度变化过大都可以情松达到如下图的效果。

一份全面系统的渐变色自学指南

莫名其妙好像写了一堆东西,我们利用一个范例来练习一下这些渐层的变化,这个范例是由设计师Adrian Fernandez运用渐层做出来的瀑布效果。

Step1.首先,我们将工作区块分割成三个区块,运用类似色选择相近的颜色填满色块,这边选择的蓝 → 蓝绿色跟作者使用的相同,练习时建议尝试不同的颜色。搭配白色透明度色块就可以快速的做出简单的渐层以及三维效果,注意喔,这边还没有使用到任何的渐层。

一份全面系统的渐变色自学指南

Step2.分别在三个区块中运用上浅下深的概念由上往下来做出渐层,拉出画面的层次感。

一份全面系统的渐变色自学指南

Step3.使用不同宽度的矩形(颜色选择高明度低彩度的蓝 → 蓝绿色,搭配透明度50%-100%不等的透明度)模拟出瀑布的水流。

一份全面系统的渐变色自学指南

Step4.为瀑度水流加上透明度渐层(<除了明度彩度的变化之外再加上透明度的调整),让画面整体更具质感。

一份全面系统的渐变色自学指南

Step5. 作者实际的成品在这,有兴趣的朋友建议自行临摹完成练习,对于渐层的运用肯定会更加的得心应手。当然,从作者的成品当中可以发现离Step4还有不少的细节需要调整,因为渐层中颜色细微的变化,以及每个设计者对颜色的喜好,敏锐程度,即便是临摹的作品常常做到最后也会发现感觉完全不一样呢。

一份全面系统的渐变色自学指南

对比色渐层

什么是对比色?

在色相环当中,相对成180度,也就是直线两端的颜色,即为对比色〈又称为补色〉。基本上制作渐层的原则都是相当类似的,但是在运用对比色搭配渐层使用时,有几个小技巧是我会特别注意的:

  1. 对比选色的彩度差异不要太大。
  2. 在选色上不一定要拘泥于刚刚好180度,基本上160–200度这个区间都可以达到相当不错的效果。
  3. 建议画面的配置上一个做为主色一个作为副色。
  4. 请根据类似色渐层章节中的概念来制作渐层。
  5. 对比色渐层范例

相信大家应该也发现近年来渐层在接口设计/简报上面的运用其实都相当的普遍,像是我相当喜爱的一位泰国设计师Tintins跟美国的设计工作室Awesomed在 作品中都使用了相当多的渐层元素。除此之外,我们也可以发现渐层常常可以莫名其妙地带出一些好像很厉害的感觉,有一种把光影融入设计里面的Feel。对于 初学者而言,利用渐层做出干净易用的接口是相对难的,日后会多拿一些工作上的使用与经验和大家分享。底下几组是我利用上面提到的各种技巧拉出来的对比色渐 层界面:

一份全面系统的渐变色自学指南 一份全面系统的渐变色自学指南 一份全面系统的渐变色自学指南

下一篇会跟大家聊聊金属渐层该如何使用,有时间会再谈谈放射状的渐层可以产生怎么样的视觉效果啰。

 

原文地址:medium

作者Angela Tsou 的推特:@mini_cu;高玉璁脸书:www.facebook.com

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29023/

(0)
CatherineCatherine
上一篇 2017-05-22 21:31
下一篇 2017-05-23 00:13

相关推荐

  • 解析「交互设计七大定律」在设计中的应用(上篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,本文将分为上下两篇来发~一费茨定律(Fitts’ Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. ...

    2018-02-03
  • 以一个实际项目为例|从0到1的产品中,交互设计师如何避免踩坑

    除了自身执行力上对设计师专业能力的要求,对产品体验的敏感度,也要适当关注一下产品思维的提升,减少在设计过程中踩着“坑”艰难前行。

    2017-05-16
  • UI设计实例:如何将功能性动画完美融入设计以提升用户体验

    来Nick大神关于功能性动画的一篇文章,翻译过来与大家分享一下。

    2017-05-10
  • O2O产品的用户评价思考

    为什么产生这样的思考? 可能因为我在一家做 O2O 产品的公司,碰巧我做过 UGC 评价相关的交互设计,然而更重要的是前不久我在线下真实的场景中希望使用自家产品的评价帮助我作决策时,发现我的一些需求并没有得到很…

    2016-03-02
  • 【设计竞赛】第二届“衲田杯”等你来挑战!

    📌编辑 | Cassi.W编者按:第二届“衲田杯”可持续设计国际竞赛报名正式启动!中国城市规划设计研究院院长、全国工程勘察设计大师杨保军担任本次竞赛评委会主席。别犹豫啦,招呼你和你的小伙伴,快来报名参赛吧!不知大家是否记得宿迁那片迷人的多彩衲田花海?又是否还记得2017年这些在衲田花海绽放的一大波创意?▼▼▼点击图片了解更多 ↑↑↑没错!就是2017年国际设计竞赛的一匹黑马:“衲田杯”可持续设计国际竞赛第一届“衲田杯”可持续设计国际竞赛...

    2018-03-22
  • 内容为王的时代,阿里设计师用实战案例解读内容化设计!

    作者:阿里设计师   编者按:什么是内容化设计?设计师为什么要关注内容?如何通过设计的手段提高内容体验?阿里设计师用一个手淘的实战案例,帮你掌握内容化设计的精髓!   前言 如果说好的产品是运营出来的,那么…

    交互专题 2017-08-07
  • 用户所说,非其所做

    当用户反馈问题时,这真的是他们遇到的问题吗?当用户讲述需求时,这真的是他们的实际需求吗?可能未必真实。例如,一家公司曾做过一个研究,他们通过调查问卷询问用户对手机颜色的偏好,当询问用户是否愿意购买一个红色的手机时,许多用户都回答愿意;然而在问卷调查之后,研究者告诉用户,“你可以在一个红色和一个黑色的手机中选择一个作为礼物带走。”结果却发现,大多数用户仍然选择了黑色的手机作为礼物,即便是那些回答更愿意购买红色的用户也是如此。

    2017-05-26
  • Axure RP软件安装教程

    Axure RP各种版本软件安装教程及下载地址:链接:https://pan.baidu.com/s/1AUHDQmeQejc9OMg7t2gmzQ密码:n29o

    2018-04-29
  • 现阶段用户体验最完美的混合动力 试驾新款比亚迪唐100

    以上汽车你体验过开一天车只花4元么?你体验过地板油加速无声无息么?你体验过用车供电吃电火锅开Party么?你体验过下大雨没带伞直接把车遥控过来么?你体验过车外雾霾爆表你却淡定自若么?你体验过下坡行驶续航里程却越来越多么?你体验过开个三月车却用不到100元油费么?今天这个车让我们知道到了答案!话说以前以上君并没有太关注过新能源车型,总感觉没有乐趣,但是真正开上贴近生活以后才发现插电混动是真的实用。YishangAuto第一眼看到唐100就...

    2018-04-07
  • 让人最不喜欢的交互设计错误列表,来看看你中枪了没!

    好的交互设计可以区分开有质量的网站和其他普通网站。然而,如果有明显的设计错误,它只会给予你本来想打动的用户以刺激和挫败感。下面是Speckyboy上总结的让人最不喜欢的交互设计错误列表,来看看你中枪了没!1缺…

    2017-08-02