三种方法,使用鲜艳的配色来制作WEB/APP界面

无论是Web还是APP,鲜艳的配色已开始逐渐具有人气。为了将人们的注意力集中于要素之上,让设计能给用户带来深刻的印象,就让我们来使用鲜艳的配色吧。


无论是Web还是APP,鲜艳的配色已开始逐渐具有人气。为了将人们的注意力集中于要素之上,让设计能给用户带来深刻的印象,就让我们来使用鲜艳的配色吧。

三种方法,使用鲜艳的配色来制作WEB/APP界面

配色,对设计师来说是非常有帮助的工具之一。他不仅可以用来吸引注意、为作品添加氛围,还可以影响用户的感知与行为。

无论是Web还是APP,鲜艳的配色已开始逐渐具有人气。为了将人们的注意力集中于要素之上,让设计能给用户带来深刻的印象,就让我们来使用鲜艳的配色吧。

这一次为大家介绍的是:使用鲜艳的配色来进行设计的实用技术。

使用单色

在鲜艳配色的使用中,最常见的就是利用单色。单色色板是指:利用同一种颜色不同深浅的饱和度相互组合构成,带来视觉冲击,提升作品的魅力。与具有很强吸引力的印刷风格相组合,单色色板更容易给读者带来具有深刻印象的感官体验。

三种方法,使用鲜艳的配色来制作WEB/APP界面

要点

使用黑白设计的效果与单色相互组合使用,也是一种将用户的注意力集中在小画面上不错的方法。

三种方法,使用鲜艳的配色来制作WEB/APP界面

使用双色

双色调指的是将一副单色原画通过改变屏幕的角度将它变成由两枚负片组成的效果。这是突出中间色和再现重点的方法。在以前是印刷上常用的技术,如今在网络上焕发出了新的活力。双色调看起来很有趣,也非常容易实现。通过使用Adobe Photoshop的双色渐变,就能够达到效果。

三种方法,使用鲜艳的配色来制作WEB/APP界面

虽然双色调效果适用于大尺寸的屏幕,你也可以将他运用在手机屏幕上。

三种方法,使用鲜艳的配色来制作WEB/APP界面

要点  

1、利用双色调效果,制作引人注意的效果吧。选择具有高质量的图像,让主题变得显眼。就算是乱七八糟的照片,我们也可以通过模糊细节来使用它。

三种方法,使用鲜艳的配色来制作WEB/APP界面

(2)选择能反映出照片氛围的配色。要时刻记得,你可以通过不同的色彩来表现出不同的情感氛围。

(3)在制作网页的时候,进行设计时不需要对现有的图像进行加工,也能够实现双色调效果。通过Colorfilter.css,只用CSS代码也能够使用这效果。

重叠效果

使用配色来传递信息的另一种方式,就是在设计上利用重叠效果。让我们在图像或动画上重叠半透明的效果吧。与材料设计的鲜艳配色相组合,表现出更加现代的氛围。

三种方法,使用鲜艳的配色来制作WEB/APP界面

尝试着在卡片式布局和视频内容上使用重叠效果,不断的去调整让内容更加有吸引力吧。

三种方法,使用鲜艳的配色来制作WEB/APP界面

要点  

在单色上使用叠加效果时,色彩与滤色透明度的调整是非常重要的。

  1. 使用灰暗的、透明度低的颜色作为滤色器,将用户的注意力集中到颜色而不是背景图像上。
  2. 与之相反利用明亮的、透明度高的颜色作为滤色器,可以将用户的注意力集中在图像上。

最后

事实上使用颜色来发现乐趣的技术的确是一件困难的事,但利用配色的效果却能为你的设计增添不少风采。不断的去尝试各种配色,发现最合适的那一种方法吧。不管是喜欢使用明亮鲜艳的颜色也好,还是喜欢简单的黑白单色也好,请记住,颜色是不会有错的。最重要的事,就是如何去使用那些颜色。

 

原文地址:http://photoshopvip.net/97186

译者: 丧心病狂的翻译站

译文地址:微信公众号【丧心病狂的翻译站】

本文由 @丧心病狂的翻译站 授权发布于人人都是产品经理,未经作者许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-09
下一篇 2017-05-09

相关推荐

  • 设计神器Figma出马!Sketch、PS有些慌了,因为...

    这年头真的是“长江后浪推前浪,一浪更比一浪强”,许多新产品、新工具纷纷冒出头来,就拿我们设计师的设计工具来说吧,Photoshop 算是一名老将了,它也是我们走上设计不归路的第一个敲门砖(当然还有 CDR);被 PS 折磨的要死要活的时候 Sketch 和 Affinity 杀了出来,一个是专攻用户界面的矢量设计,另一个则像是加强版的 PS 和 AI;Sketch 和 Affinity 还没用熟又冒出个 Figma:说出来你可能不相信,...

    2018-04-17
  • 【UX设计】如何成为一名更加贴心的用户体验设计师?

    我曾见过一个简单却贴心的设计,是个仅170 像素的笑脸。那是非常疲惫的一天,下班后我想要清理一下Email 收件箱,放松一下心情。以前我都是用苹果自带的邮件应用,但这次我打开刚下载的Gmail 应用,筛选了收件箱里…

    交互设计 2015-09-13
  • 百度高级UI设计师:规范、方法、一致性,真有那么重要?

    本文来自百度用户体验部高级UI设计师大牙的佳作,此文是她对自身工作的一种思考:一个遵从设计规范,按照所谓的系统设计方法,步步推导而来的解决方案,是否真的就是一个好的设计?你的答案是怎样?不妨一起来看看大牙的吧~

    2017-05-02
  • UED新刊 | 承——中国院方案组二十周年

    📌编辑| F.我觉得记录或者回忆方案组这件事……如果说有意义的话,它不应该仅仅是哥几个的一段往事,而是可能还带有某种其他的价值,可以为我们的同行展现中国建筑发展当中的一个小的片段。——崔    愷《城市·环境·设计》UED108期“承——中国院方案组二十周年”专辑现已发售更多互动福利详见文末扫描文末二维码即可购买新刊导读1997 年,当时还是建设部建筑设计研究院(下称建设部院)的中国建筑设计院(下称中国院),由时任总建筑师和副院长的崔愷...

    2018-02-07
  • 人工智能对交互设计的影响

    人工智能(Artificial Intelligence),英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能的本质,是数据+算法。人工智能的概念其实已经提出来了60年,中间也经历过很多次虚假的黎明期,为什么说现在人工智能时代真正的黎明呢?这里面有三个原因:首先是大数据和云计算。在数据上,移动互联网的发展,已经把我们生活中的各种信息不断数字化,这些数据储存在云上,就可以被利...

    2018-03-28
  • 观点解读|四两拨千斤的交互设计方法

    最近读了一本书,叫做《细节,如何轻松影响他人》,里面给出了52条意见,每一条意见都是经过大量实验得出来的,有一定的科学依据,而且这些意见也反应了人们的普遍心理,强力推荐销售人员看看。这本书的主旨就是:只需改变一点点,就可以达到四两拨千斤的显著效果。虽然有52条之多,但是我会抽取一些和交互关系比较大的观点进行解读。

    2017-05-02
  • 经验总结|交互设计文档该怎么写?

    交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员有一致的工作目标,而有良好体验的交互稿,还能够便于各方理解,提高后期开发对设计的还原度,提高各方工作效率。

    2017-04-29
  • App收银台交互设计思考

    数十万互联网从业者的共同关注!作者:柒0。作者授权早读课转载。来源:简书编辑:Juvae最近完成了“app收银台设计重构”的需求(一期为“账户充值”),作为一个刚毕业的交互新人,踩了一些坑,总结了这次思考的过程与…

    2017-08-01
  • 译文|Facebook将推"dislike"按钮

    Facebook users will soon be able to 'dislike' posts and pictures on their feeds. Facebook用户很快就可以“dislike”订阅内容里别人发的帖子和图片了。 The social networking site's founder Mark Zuckerberg r…

    交互设计 2015-09-18
  • 交互设计的门类 & 英国综合类院校及艺术院校在如何定义交互设计?

    艺麸大大带你了解英国交互类TOP院校要知道你离名校并不遥远别走神,好好看完哦~随着科技日新月异的发展,让交互设计一时成了“网红专业”,很多学平面设计或视觉传达的童鞋们纷纷转专业到交互设计大本营。然而各大顶尖院校对于交互设计的专业命名也是“五花八门”,如,服务设计、交互设计、用户体验设计等。交互本来就是一个艺术与科技的完美结合,国内很多院校都不能将其做的很突出和优秀,这就导致了出国学习交互设计成为许多人的想法。那么你有多了解交互设计呢?我...

    2018-04-19