三种方法,使用鲜艳的配色来制作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

相关推荐

  • 【笔记】北美大公司里做UX Designer是啥体验?(附视频)

      UXRen北美社区成立至今,旨在聚集华人UX设计师群体,为提供大家一个交流的平台。此外,我们希望大家也能够能线下碰面、聊天、互相认识,分享彼此的UX设计宝贵经验。   本期撰文/Leecy 会议记录/陈若涵 整理/Leecy…

    交互专题 2017-08-07
  • 十二条动效体验原则

    如果你想要了解更多背景信息,建议先阅读我的前一篇译文《动效的基本常识》,其中介绍了动画与动效的差异、即时与非即时的定义、动效提升可用性的四种方式(可预期、连续性、表述性、关联性)、以及理论、手段、属性与值之间的关系。

    2017-04-28
  • 被忽视的重彩-交互设计验证

    每次评审,都是一场高效的讨(si)论(bi)大会...届时,需求、设计、开发也会上演争霸对决。作为身经百战的设计师该如何从评审会中顺利脱身,逃离这场没有硝烟的战役呢?小子很高兴地告诉你:你是绝对跑不掉的!定性、定量挖掘数据我们知道产品都有一定的周期性,开发期-成长期-成熟期-衰退期。在不同的产品周期中用户也会随着时间的推移,对产品的使用深度和理解广度有了深浅的层次变化,而不同的时期设计师采用的定性定量研究方法也是不一样的,如:访谈、问卷...

    2018-04-18
  • 部落窝教育微课首批年卡,每天一元钱,全年课程随意看

    部落窝教育微课直播间自年初上线到今天,短短三个月时间,我们精心打磨了25个专栏课程,受到了大家的广泛关注和喜爱。课程受欢迎程度可以从数字上得以体现:直播间共282.64万+人气,单次课程最高学员数达到了18536人学习。应铁粉们要求,“部落窝教育微课直播间” VIP年卡现已正式开通,更好的满足大家学习多个软件技能需求。1VIP年卡能学什么?VIP年卡有啥福利?A:部落窝微课现开通25个付费专栏,涉及到的软件视频课程有:Excel、Wor...

    2018-04-08
  • 『APP交互设计趋势』2015年移动应用的开发趋势,交互设计师需要了解到是设计趋势!

    硬件性能的提升,新技术的出现都是影响移动应用发展的重要因素,而最近几年里,这两个方面都有着不小的进步。从不断增加的屏幕分辨率,64位处理器,到支持所有平台开发的HTML5技术逐步成熟,每个方面都不容小觑。不…

    2015-02-05
  • 交互设计之对象属性文档

    对象属性文档是描述一个产品的多个角色的文档,通过这些文档后台程序员可以更好、更方便的设计你制定的规则,例如:字段的限制、状态和权限、展示顺序...一.对象属性文档需要写明什么:1.字段的限制:字段是构成后台的最基础单位,他可以表示一个人的name、也可以是一大段文本。我们在设计字段时,绝大部分时候会涉及到限制,一般构成限制的是:字段长度、字段个数、字段构成(例如:金额--货币数量+美元)、字段来源(例如:外来接口、用户上传)、重要程度、...

    2018-03-27
  • 全面了解iOS 11

    作者:沄海   UI得以迅速发展,苹果公司功不可没,他开启了移动化浪潮,拥有了世界各地超过十亿的设备,有潜力使任何想法或设计成为主流。这一次,苹果对之前对设计风格做了较大变动。 今天分析的两个版本分别是 iO…

    交互专题 2023-03-03
  • iOS 9 人机界面指南(五):图标与图形设计

    文章索引译者注:本章是iOS Human Interface Guideline的最后一章,文末附上全文PDF下载地址。译文如有任何疏漏之处,或任何意见或建议,请不吝指出,翻译组感谢大家长久以来的关注和支持!

    2017-05-26
  • 9个关于设计的关键要素,帮你设计出更加优秀的作品

    之所以把设计和Jalebi放在一起说,就是因为设计本身其实和制作Jalebi如出一辙,设计师的经验和对设计投入的思考才是核心所在,而两者结合之下则往往能产生一些颇有价值的指导思想。Above examples are of apps with the same domain and you can judge which one is looking better.A good example visual typo hierarchy in the above graphic .

    ——Source: SuperDryCleartrip is a very good example of what I am talking about……

    2017-05-17
  • 以文本框为例,了解交互设计师在工作中的逻辑思考方法

    文本框是设计工作中常见的组件之一,无论是PC还是无线,大多仅是样式上的不同,它们的交互行为上是可以相互参照的。本文想从这一简单的组件出发,让大家看到交互设计师在工作中的逻辑思考方法,从而达到见微知著的直观感受。

    2017-05-17