自然选择:自然界的颜色与界面设计[译]
作者:JunChen 来源:Coolface's设计空间 发布时间:2009-09-19 17:17:00
互联网充斥着枯燥的设计,惠普、IBM、戴尔、微软,以及其他数不尽的网站(相似的布局,相似的配色)。可能有人会说通过这样一种标准化的界面可以使浏览更方便,而事实上这些网站带给用户一种很世俗的体验,并不能与访客产生一种积极的联系。
面对这种单调的设计,有一种解决方法,就是使用颜色。可能没有其他设计元素能像颜色一样能影响人们对世界(比如网站,比如家居装潢)的感受。颜色可以瞬间改变我们的情绪和意见。颜色会让我们感觉到舒适、敬畏,或者激动。在界面设计中,自然界的颜色组合对设计非常有用。从复杂的 Web 应用程序到很多信息类 brochure-ware 网站,自然界的颜色可以区分设计(让用户更加难忘)、引导用户(使用户专注于交互)、吸引用户(使页面布局更舒适,更有魅力),并且带来灵感(给设计师配色上的灵感)。
区分设计
在生活中,我们很容易忘记日常的事。我们趋向于记住那些有独特体验的或者有情感参与的事件。在网络上也是如此。当所有网站看上去一样,我们可能会产生这个就是那个的幻觉。而且当在网站之间跳转越来越快,这样的幻觉也越容易产生。
所以一旦有机会可以让网站更独特,就不能放弃。如果你的网站很“跳”,那么用户可能会花更多时间浏览并且想是从哪里访问过来的,他们有可能记住这个网站并且下次再访问。可能没有比颜色更好的元素可以达到这样的效果了。人们会马上对颜色产生感觉:激动、高兴或者枯燥乏味。
自然界的颜色搭配可以马上让你跳出互联网的颜色(Fig 1),并且设计一个更容易让人记住的网站。举个例子,通过 Fig 2 中自然界的颜色组合设计的网站原型(Fig 3)完全区别于“标准”版本的同一个网站(Fig 4)。用柔和的颜色作为背景,足以突出页面上 4 块主要的信息区域。
但是在用“牧场的颜色”到你的设计上之前,必须知道颜色选择也必须和设计主题一致。因为颜色与用户的交流非常的直接高效,用正确的颜色也很重要。
引导用户
“功能决定形式——这是错误的理解。形式和功能应该是一体的,在精神上融合。” —— Frank Lloyd Wright
自然界中的颜色通常具备较低的饱和度,对比“人造的数字颜色”,眼睛看上去更加舒服。这样可以让用户更加专注于交互,不会被其他亮色调打扰。当你试图在一个充满饱和色调的页面上(Fig 4)浏览信息时,你的眼睛会不断地返回那些亮的颜色(比如页面顶部的蓝色)。相反地,Fig 3 中使用的蓝色和黄色,创造了一种平衡,从而突出了图片、导航和内容。(这对信息量大的页面尤其有效。)最强的视觉元素是最重要的:导航和 4 块内容区域,而不是背景色。这可能就是因为自然颜色组合带来的效果,我们对这些颜色很亲切熟悉。我们趋向于忘记那些深蓝、黄色和灰色,因为每天都看到。
在那些用户需要长时间在线使用的 Web 应用程序中,注意这一点尤为重要。不是很强烈的配色可以使用户专注于工作和接收重要信息。当然完美的 Web 体验不能仅仅依靠颜色,结构、交互、布局等方面也必须协同工作,来创建可用、易用的网站和应用程序。但是颜色是平衡中的重要部分,不能忽略。
吸引用户
“自然颜色非常亲切并且具有很高的接受度。” —— Edward Tufte, 1989
自然界的颜色组合对另外一种设计思考也很有帮助,那就是情感反馈。可用性(Usability)让用户很方便的从 A 点到 B 点,但是有时降低了有趣的体验,那些人们想重复体验的或者与人分享的。
考虑一下下图中两个版本的事务表单。其中一种(Fig 5)使用了寒冷和具有胁迫性的配色。另外一种使用了暖和和更有魅力的颜色,自然,使得表单更有亲和力。现在假设有一个书记必须重复性的填写这个表单,那么较少胁迫性的表单可以吸引他在这个舒适的框架下完成工作。
带来灵感
自然界的颜色蕴含的另外一个财富就是可以带来灵感。丰富多彩的自然界,给我们持续不断的带来新的想法,包括颜色的选择。举个实例,为了促进都柏林的旅游业,设计师并没有使用橙色、绿色和白色(爱尔兰国旗的颜色),而是采用了爱尔兰海岸的一种颜色组合。这种组合非常生动和吸引人,是都柏林看起来很有游玩的乐趣,并且广阔、豪华。非常可惜的是这个配色并没有被带到都柏林的网站上,少了很多生动和魅力。
当然所有上面谈到的,自然界的颜色组合并不就是一把尚方宝剑。有时候你可能想给你的访客带来一种“震惊惧怕”的感觉,你最好的赌注就是那些从来不在自然界中一起出现过的颜色组合(所以看上去不舒服)。有时候你的访客想要的,或许就是你最喜欢的那种企业蓝。但是在复杂的交互和需要创意的时候,自然界的颜色组合肯定会是你很重要的一件武器。
原作者:Luke Wroblewski
原文地址:http://www.boxesandarrows.com/view/natural_selections_colors_found
_in_nature_and_interface_design
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- //方法1:$ip = $_SERVER["REMOTE_ADDR"];echo $ip;//方法2:$user_IP
- 一、系统资源使用限制的必要性探讨对于一个脚本,最基础的限制是要限制单进程实例以保证了不会存在多个进程实例、在运行程序主体逻辑前检测系统资源剩
- 0. 前言无论在工作中,还是学习中,都会出现这样子的需求,对某张表进行了排序(按时间排序也好,其他字段排序也罢),然后获取前x行的数据,由于
- 前言Python可以操作Excel的模块不止一种,我习惯使用的写入模块是xlwt(一般都是读写模块分开的)python中使用xlwt操作ex
- 前言前段时间我有个朋友看到一些小姐姐的照片,想全部下载下来,叫我帮个忙。于是花费了半天给他全部下载了下来。引入库import timeimp
- 什么是插槽?我们知道在Vue中 Child 组件的标签 的中间是不可以包着什么的 。可是往往在很多时候我们在使用组件的时候总想在组件间外面自
- 人脸磨皮是最基础的人脸美颜效果。主要分为祛斑,祛痘,淡化黑眼圈等步骤。通过前面的学习相信大家一眼都看得出来我们需要干什么才能识别人脸磨皮效果
- SQLPlus是进行Oracle操作的主要前台工具,用户名和密码分别为用户名和密码,连接ORACLE数据库可见,显示的比较混乱,可以通过以下
- 本文实例讲述了Python实现matplotlib显示中文的方法。分享给大家供大家参考,具体如下:【注意】可能与本文主题无关,不过我还是想指
- 一.运行效果先说两句,之前我在网上找的相关文章标题上写的是处理多连接,尼玛,全是假的。网上那些,根本不能异步处理多连接,不能主动给客户端发消
- 高性能异步爬虫目的:在爬虫中使用异步实现高性能的数据爬取操作异步爬虫的方式:- 多线程、多进程(不建议):好处:可以为相关阻塞的操作单独开启
- 这篇文章主要介绍了python字符串替换re.sub()实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
- 问题:用pycharm每次修改代码后第一次运行还是原来的结果,运行第二次的时候才是修改后代码的结果解决:每次修改代码后保存一下即可解决补充:
- 本文实例讲述了php字符串函数 str类常见用法。分享给大家供大家参考,具体如下:str_split(string, leg);//将一个字
- 这篇文章主要介绍了python实现windows桌面截图代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
- 引言借由本篇文章来探讨下在Mysql数据库中数值类型tinyint(1)和tinyint(4) 有啥区别呢?什么是tinyint(
- 前面简单介绍了Python元组基本操作,这里再来简单讲述一下Python字典相关操作>>> dir(dict) #查看字段
- HTTP格式HTTP GET请求的格式:GET /path HTTP/1.1Header1: Value1Header2: Value2He
- 最近,正好发生了一件大事,就是 GitLab 的运维同学不小心删除了生产的数据,虽然 GitLab 已经骇人听闻的准备了五种备份机制,但是,
- 用于制作自动化微信聊天图片,通过图片生成段子视频根据一个txt文档input.txtL 一路走过来好热啊