交互设计要点&配色趋势

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

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

相关推荐

  • 从GUI到CUI,谈谈智能时代的用户体验

    用户体验分为三个层面:有用性、易用性与美观性。有用性是用户体验的根基,美观性属于锦上添花,易用性则与用户对产品的“操作体验”直接相关。User:买一张明天去北京的机票,要国航的;五点前到达,尽量便宜。

    Bot:好的,查到CA XXXX航班,16:00到达,票价XXX元。来自携程。

    User:买了吧。

    Bot:好的。User:订一张明天去北京的机票。

    Bot:好的,还是国航五点前到的最便宜的吧?

    User:对的。

    Bot:好的,已经预定了CA XXXX,16:30到,XXX元。来自携程。

    Bot:另外这次要和上次一样预定当天的万豪酒店吗?

    User:订边上的汉庭,这次公司不报销。

    Bot:好的。User:我要去北京,定个明晚的酒店。

    Bot:好呀好呀,是否要订华贸的万豪酒店?

    User:订边上的汉庭。

    Bot:听起来好杯具,摸摸~

    Bot:话说“边上的汉庭”是什么酒店?

    User:#WTF……(关掉了应用)User:你可爱吗?

    Bot:很可爱呢~

    User:约吗?

    Bot:我们大约有20款车。(难免出现理解不到位的情况)

    User:#hhh果然很SB……User:你可爱吗?

    Bot:您好,这里是XXX汽车经销商,我可以回答你购车相关的问题。

    User:锐腾16款有些什么颜色?

    2017-08-04
  • iOS 9人机界面指南(三):iOS 技术 (中)

    文章索引译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。后续章节会陆续更新,敬请期待。

    2017-05-29
  • 微信Axure原型练习和资源分享

    “我根本没把你放在眼里。”“因为你一直在我心里。”▼这是咸冬日的第叁篇文章这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。首先需要准备基本素材,可以从我的源文件中获取。1.设置手机主页和home热键用例。2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。3.设置主页交互:1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;...

    2018-03-10
  • 交互体验大升级 云视听极光3.0最新版本体验评测

    作为腾讯视频官方的电视端应用版本——云视听极光迎来了第三个大版本的更新:云视听极光3.0。在我之前的国内4大电视端视频应用软件的对比评测中我对云视听极光的老版本在交互体验上的感受只能用一般般来形容。这次的大更新官方声称对交互界面体验上针对用户需求和建议做了较大的改进,我也立马升级了软件进行了一番体验。让我们来看看云视听极光3.0在体验上到底如何吧。UI交互体验:界面设计进入软件就可以看到3.0版本的大变化,相比老版本,3.0的频道分类栏...

    2018-01-30
  • APP游戏分发模块一级交互设计

    看看阿西如何做原型设计,阿西手把手教大家设计原型。

    交互设计 2014-09-11
  • VR交互设计

    大家好!洋仔我又来了,上篇文章群爷详细的介绍了什么是VR以及VR需要的条件,不知道大家对于VR有没有一个深刻的了解呢?此图为转载图片为了完成这篇总结性的文章,你们的洋仔我又是看了好多篇文章,因为VR这个需要有各种各样的设备支持,所以呢,我也是去尝试了几个VR类的游戏,上周去了医博展,正好群爷也是展方,趁着这个机会,让群爷又带我体验了一把AR和VR在医疗方面的用途。那VR的交互设计到底是怎样的呢?(VR切水果)此图为转载图片首先,VR交互...

    2018-04-21
  • 你天天挂嘴边的「用户体验」,到底是什么?

    用户体验到底是什么?这个每天都挂在嘴边的词,你真的懂吗?

    2017-05-02
  • 设计师保持画草图是个不错的习惯

    一名优秀的设计师的经验之谈。 我从不敢放眼将来长远的看过去若干年,也许正是这个原因才让自己对很多事情不那么在意。其实我是个很安心于能让自己安心的事物的人,只是这样的事物随着时间的推移而越来越少;自己所…

    2015-05-19
  • 7种方式玩转信息可视化中的时间线设计

    时间常常被认为是一种主观的体验,然而在可视化的表达中,时间却成为了结构化维度。时间帮助我们构建稳健而直观的框架,使我们更好地建立事件间的联系。 按照时间线的方式阐述信息已经广泛应用于企业传播、营销的各…

    交互设计 2015-08-27
  • 别让这五种错误毁了你的交互设计

    交互设计从来不易。它需要对用户行为进行深入分析的同时,还要进行细致的计划。尽管新的交互设计不断出现,但并未使它变得更容易一些。如何才能创建令用户满意的使用体验?如果你对交互设计中常见的错误有所警惕的话,无疑就会尽量避开这些错误,从而实现更完善的UX体验。

    2017-06-02