如何基于心理学设计的目的来制作受用户欢迎的网页

2010-06-01 11:11:33   作者:不详   来源:互联网

颜色心理学

颜色心理学是设计心理学里面最复杂的主题,在这里我们不会深入探讨。不过你在网站上使用的颜色对你的访客来说有很大的影响,务必确保你所使用的颜色可以 加强你的信息和你图片所要表示的意义。

下面列出颜色和它们的基本含义清单。当然了,颜色的组合搭配以及与正确使用阴影、色调、或色阶也会强化它们的意义。

  • 红色:火 热和激情,可以代表都爱和愤怒。
  • 橙色:具有红色和黄色的属性。可以与能源和温暖相关。它比红色更冷静,更愉快。
  • 黄色:温暖,愉快,幸福的颜色。它可以表示喜悦或胆怯。
  • 绿色:自然,成长,和新生的标 志。按照同样的道理,绿色,有时代表很嫩经验不足。在另一面,绿色,有时候是因为羡慕或嫉妒。
  • 蓝色:平静的,冷静 的,但使用太多可以令人感到消沉。往往与企业形象关联。
  • 紫色/紫罗兰:与贵族和财富的关系渊源流长,也是一种与精神 相关的颜色,可以有创造性的表意。
  • 黑色:像变色龙,它可以是保守或前卫,传统或现代的,它还可以神秘和性感或常规和 安全,这取决于怎么使用以及周围环境。
  • 白色:代表着纯洁与清白,十分容易与其他颜色搭配。
  • 灰色:中性的,平衡的。灰色是保守的和复杂的,但也可以看作是变化无常的。
  • 棕色:一个健康和务实的颜色,表示的稳 定性和可靠性。

阅读模式

人们趋与按照“Z”字形浏览一个网站的模 式,从顶部开始往左,最后到达屏幕右下角。作为一个设计师,你应该努力地在此阅读模式下拿捏好那些最重要的内容放哪里最好。大多数网站都把Logo放到左 上角,道理就在于此。

在此阅读区放置一些不相关的信息,访客离开之前还没有找到他想要的信息,他可能会认为这不是他要找的网站。

每页有焦点

网站上的每个页面都应该有一个焦点,这是访问这个页面的目的,且不管这个页面是展示产品, 还是介绍公司,还是最新的资讯。

设计的时候需要把每个页面重点内容进行强调。每一页的重点也应立即显现出来,让访客知道他们在看什 么。除了网页本身的内容,还应该通过在导航线索或通标题来强化。

一个不成熟的网站最大特点就是总是在每一页上放太多的信息。其实不要 害怕在网页上的留空白, 每个页面上有明确的突出的重点并没什么好担心的。

喘息机会

这给我们带来的留白和喘息机会的概念。如果访客看到一个页面充满内容,他们会感到不知所措或压抑。这可能是网页让人感到过于随意和混乱。访客感到好像他们 不知道从哪里开始,这意味着他们可能会跳出你网站到其他地方喘口气。

网站上的合理留些空白空间,引导你的访客注意他们要找的信息。通过结合留白和适当比例的风格和元素,你可以暗示鼓励你的访客关注特定的东西,并可能有所 行动。

整合设计心理学的步骤

现在你应该明白设计心理学对网站设计的意义。你很想知道怎么去操作,应该怎么将这些融入你的设计流程。以下是一些对你有用的技巧:

圈出你的目标用户群

了解你的访客是什么样的人,这是设计网站至关重要的第一步。如果你的访客是精通技术的互联网老油条,必须先把他们 从那些上网只为了看看孙女儿照片的人群区分出来。分出你的目标用户,然后针对性的给他们制定一些情绪激烈策略。

约见用户

如果你不是很明确你的用户想要什么,尝试和他们见面沟通。找些现在的或以前的客户问下他们愿不愿意回答对你网站相关的问题, 根据你自己的特别目的制定一些基于网站的有意义的问卷调查。不过很重要的一点,要积极采取他们的建议。很多公司只是不停的跟用户沟通,调查,但是却从没有 去根据调查结果改变什么,这样的例子太多了。

建立网站地图

网站上的每个页面都应该有导航信息,这样可以确保每个页 面都只有一个重点。首先列出你网站上需要显示的东西,然后标出哪些页面需要显示哪些项目(合理情况下,应该是每个页面一个项目,除非这信息非常,非常密切 的相关)。

整合品牌元素

做个文件列出用于表现你品牌的常用的元素。这包括Logo,企业用色表,还有可能是一种特 别的字体。然后找出把它们布置到网站的哪里更合适。

A/B测试

即使你做的测试相当有限,但是找出你网站哪个元素最 有效还是很重要的。如果你不确定你访客更喜欢某一个特定的页面,那么做两个版本测试就知道结果了。

设计心理学值得每一个设计师努力学习并运用于自己的工作流程。它可以是你设计表现效果以及你的客户乐意程度的最大单独因素。它不会花费你太多时间,也不是特别难,所以你实在没籍口不去采取至少一些基本的原则并付诸实用。

来源:http://www.webdesignerdepot.com/2010/05/the-psychology-of-web-design/


栏目搜索>>分类导航
Flash幻灯 jQuery幻灯 JS幻灯 Flash相册 jQuery相册 图片特效 导航菜单 广告代码 在线客服 表单按钮 其它特效

HTML CSS JavaScript Dreamweaver Fireworks 设计分享

建站教程 网站运营 实用工具 网页模板 网页素材
CSS酷站 网上购物 设计团队 设计博客


教程排行榜
30个基于jQuery框架的幻灯滑块特效设计的网站实例
30个基于jQuery滑动门技术的网站欣赏
10个优美精致简约风格的导航菜单欣赏及点评
38款网页设计应用的JS拉洋片幻灯效果欣赏
最新收集的50多个专业设计公司网站欣赏
40+设计独特超漂亮的水平导航网站欣赏
全球65个设计出众的设计师个人博客欣赏
35套精美绚丽的创意酷站设计欣赏
国外颇具特色的电子商务网站设计欣赏(上)
国外颇具特色的电子商务网站设计欣赏(下)
21个精美漂亮的网页幻灯片应用案例欣赏
20个设计精致漂亮的Photoshop网页设计教程
网页UI之Banner广告条设计案例赏析
2011年网站设计的新趋势
手绘风格的15款超级漂亮网站欣赏
24个很漂亮用CSS3实现的文本效果演示及教程推荐
下载排行榜
jQuery图片特效代码 带缩略图和文字标题简...
仿淘宝商城天猫首页jQuery多格焦点幻灯图特...
仿QQ商城焦点图jquery幻灯特效代码
宽屏flash+xml焦点幻灯图特效代码
效果媲美flash的jQuery幻灯代码支持多种切换效果
3D立体效果的flash+xml照片墙相册展示代码
带标题和数字导航的JS焦点幻灯特效代码
31款简单实用的CSS+JS下拉菜单脚本
漂亮的jquery+Lightbox灯箱效果图片展示特效代码
基于mootools有7种效果的Gallery(画廊)幻灯相册代码
超酷HTML5图片特效代码支持全屏显示
漂亮的jquery画廊相册特效支持缩略图和键盘...
可自动展开和折叠收起的QQ在线客服代码
半透明立体质感的宽屏flash+xml焦点幻灯代码
基于jQuery的首页自动收缩全屏广告代码
超酷3D摩天轮flash+xml幻灯相册特效源码