交互设计要点&配色趋势

色彩在任何一种设计中都起着很重要的作用,相差不多的色彩却能渲染出截然不同的情感效果。因此,好好利用色彩与生俱来的魅力,就能让你的网页设计更特别。

1Metro和柔和鲜嫩的色彩

Odam Luiran的网站是Metro风格,这种风格尤其适合一些比较鲜嫩柔和的颜色,扁平化网页设计在2014年中的流行让柔和色彩的用途变得越来越广泛。这样的色彩基调将在2015年得到进一步的延续,马卡龙色系也许会常常出现在网页设计中。

332181407

2偏灰的冷色系粉彩

偏灰的冷色系色彩是一种看起来比较百搭的颜色,但是实际上,要将这类颜色使用的恰如其分却并不是一件容易的事情。这类色彩表现的比较中性,所以搭配任何颜色都不会显得突兀,但也不算出挑,而要让色彩之间真正融合,应该选择清淡的粉彩系透明色,让网页看起来清新脱俗。

309612351

3根据图片搭配背景色

网页设计需要看整体,而不能针对性的看局部。网页中显示的图片往往是表达网站思想和意图的一部分,属于网站元素中比较重要的环节,所以让背景色来适应图片的颜色是情理之中。如下案例所示,蓝色系的图片搭配蓝灰色的背景,整体表现的十分融洽。

309615239

4只有一个重点色

一谈到色彩搭配,常常有人会说一个比较保守的搭配方法:一个区域范围里不能超过三种颜色。这句话并不算完全正确,更深层的含义是,只能有一个重点色。

621713753

5以简单灰作为网页基调

用灰色作为网站的主基调是一种比较保守的做法。灰色属于所有色彩中最简单的颜色之一,所以设计师有充分的理由去选择使用灰色,以此来衬托出网页中内容的可读性,减少用户的阅读干扰。

499799853

6低透明度色彩

透明度低的色彩也很有可能成为2015年网页设计的主要色彩趋势。如今的设计越来越追求用户的交互体验,因此低透明度的色块能让用户更加容易发现并且阅读。

621754175

7用高亮色体现用户交互

一大片高亮色设计一定会造成用户的视觉疲劳,令人很反感,但小部分的高亮色设计却能起到突出重点的作用,既能将内容有效的区分开来,又能保证与整体色调保持一致。

621757376

8不轻易减少亮度中的黑色

下面这个案例中很简单的使用了黑色和橙色。橙色作为很亮眼的一种颜色有时会给人带来一种比较刺眼的感觉,但案例中的橙色却令我们的视觉感觉很舒适。原因在于设计师在原本亮丽的颜色中加入了一些黑色,既能让颜色之间形成对比,又不会显得很招摇。

12026335

9蓝色是网站的“基本款”

蓝色在网页设计中属于不会出错的颜色,当你举棋不定或是在色彩上产生困惑的时候,你可以用蓝色尝试一下,也许能顺利化解你的问题。

347049079

10单色网页

单色网页设计看起来似乎不会存在色彩搭配方面的问题,但这里说的单色网页更应该理解为单色系网页。所以,要打造一个色彩统一的网页,设计师可以以一个基本色调来扩张色相、饱和度和亮度等条件。

499856113

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

(0)
iouedioued
上一篇 2015-12-08
下一篇 2015-12-09

相关推荐

  • 当交互设计遇到用户体验

    【交互设计原则】 *符合用户使用需求 *基于用户的心理模型设计 *一致性 *及时有效的反馈和解释 *形式追随功能 *单一任务、渐次呈现 1.符合用户使用需求 设计一个产品,最基础的原则就是要符合用户的使用需求。确定…

    2015-09-20
  • 搞定老板第一步!如何准确描述自己的设计?

    @姑娘贩子 (手机淘宝设计师):如何准确描述自己的设计,这个问题困扰了我很久。这篇文章希望通过回溯淘小铺2.1项目的整个设计过程,从另一个角度,尝试解答这个问题。 这篇文章原本的标题是“小铺2.1用户分层引导…

    2015-11-24
  • 【笔记】设计师与产品经理该如何高效地进行团队协作?

    2017年5月14日,UXRen北京分舵在北辰泰岳大厦主办了《设计师与产品经理该如何高效地进行团队协作》的分享活动,本文基于分享嘉宾朱峰现场分享整理而成。   分享嘉宾: 朱峰(现任 “蓝湖”产品负责人&联合创始人…

    交互专题 2017-08-07
  • 体验不仅是界面——百度UE大讲堂笔记整理

    一、从注册页面看移动端交互设计 不知道你有没有过这样的经历,碰到一个好奇的软件,或者为了下载某个资源需要注册,当看到繁琐的注册页面时,或者是一看到页面就觉得令人心累的注册过程,你就立马放弃了使用这款软…

    2016-03-02
  • 交互设计

    产品设计流程和方法产品设计4大原则交互设计及基本原理(简约4策略)交互设计的作用【未完,待续~~~】

    2018-01-31
  • 为长文进行排版设计,有哪些讲究?

    长内容的可以让你的网站拥有超越视觉美感的吸引力,给用户的愉悦感就不仅仅源自于眼睛。

    2017-05-14
  • 真相:到底什么是交互设计

    数十万互联网从业者的共同关注!作者:Mr汤进,微信公共号ID:chuangshe_space作者原创并投稿早读课,转载请联系作者。一、前话5月1日在我和小伙伴们一起维护的原创微信公共号“创设空间”:chuangshe_space中向关注的…

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

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

    2018-04-17
  • PC端产品的三种姿态

    这篇依旧是读书笔记,只不过记录的不是整本书,而是《About face 3交互设计精髓》中的一个知识点,这个知识点非常重要,重要到需要单独提出来记录一篇。 在《About face 3交互设计精髓》一书中,将PC端应用分为了3…

    2016-06-01
  • 国家地理:创新设计世界地图APP-炫酷、叼、高度还原设计方案。

    本文首发在iamue.com(我是UE网) 头条号同步发布 来看一看别人家的UEUi 国家地理做了一个世界地图app,动效狂拽酷炫叼炸天。关键是app线上高度还原了设计的动画效果,而且非常流畅。一起来欣赏一下吧 然后默默的收…

    2015-06-25