这篇文章将以我个人的wordpress主题设计经验为引子，简略介绍我对设计者自身定位以及设计功能的看法。

谁来完成功能？

在这一点上，我几乎肯定的认同“插件来完成功能”的看法。插件同主题比较而言，用户具有更大更灵活的选择权利，当然，每一个用户有权决定他需要什么样的功能，然而，这样的设计原则会引致无法判断和控制的设计效果，这是设计者和用户都不想看到的后果。

MVC架构给出了答案，当然这并不是完美的答案：

• 筋（控制器Controller）- 负责转发请求，对请求进行处理。
• 表皮（视图View） – 界面设计人员进行图形界面设计。
• 骨架（模型Model） – 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。

谈到具体的开发例子，素说在为sunfeelings主题编码的时候遇到过这样的一个问题。使用第三方插件调用日志缩略图无疑将更有效和更灵活，但问题在于，第三方插件提供的DOM元素输出并不符合JQuery插件s3slider要求的格式。

<div class="xxx" id="xxxx">
<p style="....."><img src="..." /></p>
</div>
<!-- 这是缩略图插件输出的DOM结构 -->
<div id="xxx">
<ul id="..."><li class="..."><img src="..." /></li><ul>
</div>
<!-- 这是Jquery插件要求的标准DOM结构 -->

编码者不一定了解插件形成原理和输出结构语句（很多情况下这是web开发者的工作），如果希望坚持使用jquery插件提供的图片切换效果，必须要手动改变wordpress插件内部输出的代码结构，我认为这当然是违反设计原则的，因为我需要在发布这一主题的同时发布一组定制的插件。看起来确实不太方便？但国内的设计者确实有这么做的，我曾使用过一个中文wordpress主题，在不使用相关插件的情况下，页面几乎无法呈现。

在这个问题上，我们最终使用jquery改变了页面最终结构。这是我们当前认为最符合原则并且实用的兼容方法。

回到我们所谈论的耦合问题。在这个例子中，最好的方法莫过于wordpress设计者提供一组清除输出DOM元素的解决方案，或者允许用户在高级选项中自定义输出DOM元素，当然，这大大增加了插件设计者的工作量，更何况在大多数非深度定制的情况下，这个功能几乎没可能用到。

总的来说，插件应当负责完成功能，仅仅如此而已。

重构样式与DOM结构

重新回想一下以前的设计作品，在观察这些代码规律的时候我发现，有一段时间我几乎把所有样式写在一个id或者class中，例如：

#header {
width:500px;
height:200px;
background:#fff url(...) no-repeat left center;
float:left;
clear:both;
}

这也可以被看作是耦合的一种，并非所有的样式都应当组合在一个id或者class里边，按应当按照功能分类组合在不同的子样式表或者子样式中，以便于后期维护和再次开发。较好的写法可能是如下:

<div id="header" class="floatl clear">... </div>
#header {
width:500px;
height:200px;
background:#fff url(...) no-repeat left center;
}
.floatl {
float:left;
}
.clear {
clear:both;
}

同样的，组合不同分类的样式表，可以极大的加快开发效率和提供代码质量，例如使用@import 语句在主样式表中引入分样式表。BTW 这种方法配合css框架的使用会极大减少编码工作量。

最简化设计

如果使用较少的代码可以完成复杂的代码实现的功能，那么何乐而不为呢？这是JQuery流行的原因，也是python流行的原因。简洁总是可以突出最为重要的东西，关于web设计的最简化原则，之前我翻译了smash的一篇文章，也许这些案例可以帮助你理解最简化设计的内核。

最简化设计可以尽量避免耦合的产生，加快访问速度和解析速度。作为一个web设计师，如果你还没尝试手写html，我建议你试试看

本文作者：TuringOU

转载请注明转载自素说设计工作室

查看更多图片@疯狂的设计

理解 CSS 盒子模型

如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码，透彻地理解 CSS 盒子模型是首要事情，CSS 盒子模型并不难，且基本支持所有浏览器，除了某些特定条件下的 IE 浏览器。

CSS 盒子模型负责处理以下事情:

• 一个 blcok （区块）级对象占据多大的空间
• 该对象的边界，留白
• 盒子的尺寸
• 盒子与页面其它元素的相对位置

CSS 盒子模型有以下准则:

• Block （区块）对象都是矩形 （事实上所有对象都如此）
• 其尺寸由 width, height, padding, borders, 以及 margins 决定
• 如果不设置高度，该盒子的高度将自动适应其包含的内容，加上留白等（除非使用了 float）
• 如果不设置宽度，一个非 float 型盒子水平上将充满其父容器（扣除父容器的留白）

处理 block 级对象时，必须注意以下事项:

• 如果一个盒子的宽度设置为 100%，它就不能再设置 margins, padding, 和 borders，否则会撑破其父容器
• 垂直毗邻的 margin 会引起复杂的坍塌问题，导致布局问题（比如两个垂直毗邻的 Block 对象，上面的对象的 bottom-margin 为 40，下面的对象的 top-margin 为 20，则两个对象的间距将是 40，而不是 60 – 译者）
• 拥有相对位置和绝对位置的对象，拥有不同的行为

在 Firefox 的 Firebug 中显示的盒子模型

理解 block 级和 inline 级 对象的区别

这个看似简单的问题事如果能透彻地理解，会受益匪浅。

下图讲解了 block 级对象和 inline 级对象的区别:

下面是 block 级对象和 inline 级对象的基本区别:

• Block 级对象会自然地水平充满其父容器，因此没有必要为之设置 100% 宽度属性
• Block 级对象的起始摆放位置是其父容器的左上边界，并顺排在其前面的兄弟 Block 对象的下方（除非设置 float 或绝对位置）
• Inline 级对象会忽略其宽度和高度设置
• Inline 级对象会随着文字排版，并受排版属性的影响（如 white-space, font-size, letter-spacing）
• Inline 级对象可以使用 vertical-align 属性控制其垂直对齐，block 级对象不可以
• Inline 级对象的下方会保留一些自然的空间，以适应字母 g 一类的会向下探出的笔画
• 一个设置为 float 的 inline 对象将变成 block 对象

理解 Floating 和 Clearing 属性

实现多栏排版的最好方法是使用 float 属性，float 也是一个将使你受益匪浅的属性。一个 float 对象可以居左或居右，一个设置为 float 的对象，将根据设置的方向，左移或右移到其父容器的边界，或其前面的 float 对象的边界，而紧随其后的非 float 对象或内容，则包围在其相反的方向。

以下是使用 float 和 clear 属性的一些重要准则:

• 一个 float 对象，将从其置身的 block 级非 float 内容流中跳出，换句话说，如果你要将一个 box 向左边 float，它后面的 block 级非 float 对象会显示到下方，inline 级内容会在旁边包围
• 要让一段内容从一侧包围一个 float 对象，这段内容必须要么是 inline 级的，要么也设置为相同方向的 float
• 一个 float 对象，如果没有设置宽度，则会自动缩成其包含的内容的宽度，因此最好为 float 对象明确设置宽度
• 如果一个 block 对象包含 float 子对象，会出现本文中阐述的问题。
• 一个设置了 clear 属性的对象，将不会包围其前面的 float 对象
• 一个既设置了 clear 又设置了 float 属性的对象，只有 clear:left 属性生效，clear:right 不起作用

首先使用 IE 进行测试

虽然我们都痛恨 IE6 和 IE7，但当你开始一个新项目的时候，最好还是首先针对这两种浏览器进行测试，否则，如果你在设计在后期才想起针对 IE6 和 IE7 进行测试，将出现以下问题：

• 你将不得不使用一些奇巧淫技，甚至使用独立的 IE6/7 CSS，导致 CSS 文件臃肿。
• 某些地方的布局将不得不重新设计
• 会增加测试的时间
• 你的布局在 IE/6/7 中和其它浏览器中不一样

如果你设计的是个人项目，Web 程序等，则不建议你针对旧版本 IE 做太多工作，而对一些公司类站点，它的用户群中有大量 IE 用户，这些技巧会让你避免大量的头痛。如果将 IE 的问题归类为 IE 的 BUG 而不去处理，会带来很多负面的影响，和 IE 和平共处是 Web 开发与设计者不可逃避的现实。

(译者注：在 IE6/7 仍有大量用户基础的国内（感谢中行，建行，农行，工行，以及各级政府网站），忽视这两种浏览器是极不明智的，首先针对 IE6/7 进行设计是一种很好的方法，一般来说，在IE6/7 通过测试的站点，在 Firefox，Chrome，Safari，Opera 等标准浏览器面前基本不会出现问题，前提是，你的 CSS 设计是基于 W3C 标准的。)

IE 浏览器最常见的问题

• IE6 中不可滥用 float，否则会带来内容消失以及文字重复等稀奇古怪的问题
• IE6 中，float 对象，在 float 方向的那边，会出现双倍 margin，将 display 设置为 inline 会解决这个问题
• IE6/7 中，一个没有直接或间接设置 hasLayout 的对象，会发生各种稀奇古怪的问题 （译者注：对这类问题，zoom 这个 css 属性可以帮很大的忙，将 zoom 设置为除了 normal 之外的其它值，可以迫使一个对象 hasLayout 同时不影响这个对象的任何视觉外观）
• IE6 不支持 min-width, max-width, min-height, max-height 一类的属性
• IE6 不支持固定位置背景图
• IE6/7 不支持很多 display 属性值（如 inline-table, table-cell, table-row）
• IE6 中，只有 a 这个对象才可以使用 :hover 这个伪类
• IE 的某些版本对某些 CSS 选择器支持很少（如属性选择器，子对象选择器）
• IE6~8 对 CSS3 的支持很有限 (不过有一些变通方法)

永远不要指望在所有浏览器中都一模一样
在不同浏览器实现相同的体验个功能是可能的，实现近似像素级的一致外观也是可能的，但永远不要指望一模一样。
Form 控件在不同浏览器显示总是不同

以下是 Facebook 首页中的 select 控件，在5种不同浏览器的显示差异（基于 Adobe’s Browserlab 截图）

某些 Form 控件，如果要求必须跨浏览器一致，可以找到变通办法，如，可以使用图片 替代 submit 按钮，但有一些控件，比如 radio，select， textarea，文件选择框，是永远都不可能一模一样的。
字体的表现都有差异

先不谈有的字体在有的系统中根本不存在，即时存在，它们在不同系统的渲染效果也不完全一样，比如，Windows ClearType 支持 IE7，但不支持 IE6，导致同一个字体在 IE7 和 IE6 有不同的样子。

A List Apart’s 文章字体在 IE6 and IE7 中的区别

使用 CSS 清零

使用 CSS 清零（CSS Reset）是实现跨浏览器兼容的灵丹妙药，CSS 清零可以消除不同浏览器对 margin，padding 这些属性的默认表现，你可以更容易控制诸如对齐，间隙等等问题。推荐使用 Eric Meyer’s CSS 清零代码。

参考 SitePoint’s CSS 兼容表

SitePoint CSS Reference 是一个非常好的资源（下载离线版），可以用来检查某些 CSS 属性的跨浏览器兼容问题

结语

跨浏览器兼容是个永恒的话题，本文介绍的跨浏览器兼容 CSS 准则只是帮助 Web 开发设计者尽可能实现这一目标，除了这些，基于 CSS3 的渐进式增强设计也是一种趋势，Web 开发与设计者可以针对某些浏览器提供增强功能，而在不支持这些增强功能的浏览器中降级使用基本功能。

延伸阅读

• 跨浏览器测试资源大全
• 跨浏览器兼容测试8大利器
• 关于跨浏览器测试那点事

本文国际来源：Smashing Magazine The Principles Of Cross-Browser CSS Coding

原文作者：Louis Lazaris

中文编译来源：锐商企业CMS 网站内容管理系统 官方网站

Louis Lazaris 是一位自由职业 Web 开发者，住在多伦多，他创办了 Impressive Webs, 以及 Interviews by Design，后者主要是一些著名 Web 设计师访谈，他的 Twitter 地址是http://twitter.com/ImpressiveWebs。

主流浏览器中的太阳系

亲自体验下，我只用了 CSS 和 HTML 就完成了太阳系的简单模拟。

要获得最佳体验请使用 Safari 浏览，chrome 中动画有点卡。

细节

轨道和行星都是通过 border-radius 生成的，而动画是通过 –webkit animation 动画属性和变换功能实现的。以下是所用代码的示例：

圆角边框

ul.solarsystem li.sun {
width: 40px;
height: 40px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

动画 与变换

ul.solarsystem li {
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:orbit;
}
ul.solarsystem li.earth span {
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:moon;
}
ul.solarsystem li.mercury {-webkit-animation-duration:5s;}
ul.solarsystem li.venus {-webkit-animation-duration:8s;}
ul.solarsystem li.earth {-webkit-animation-duration:12s;}
ul.solarsystem li.earth span {-webkit-animation-duration:2s;}
ul.solarsystem li.mars {-webkit-animation-duration:20s;}
ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;}
ul.solarsystem li.jupiter {-webkit-animation-duration:30s;}
ul.solarsystem li.saturn {-webkit-animation-duration:60s;}
ul.solarsystem li.uranus {-webkit-animation-duration:70s;}
ul.solarsystem li.neptune {-webkit-animation-duration:100s;}
ul.solarsystem li.pluto {-webkit-animation-duration:120s;}

@-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) } }
动画和变换功能目前只在 –webkit 浏览器中有效，其他主流浏览器——当然 IE 除外——只显示通过 border-radius 渲染的静态版本太阳系。

本文转载自：CSS3实现太阳系模拟CnBeta.com

关于Google和苹果Logo的设计价格，博主称死活也找不着具体数据，不过按这里说的苹果Logo是低价甚至免费的，另有读者给博主的留言者也提到，Google那个也是免费的。

Cen @ Rologo 编译自 Logo Design Blog

这里有5个使用CSS3实现的常见效果，你可以马上动手试试看。

1. CSS3按钮

你可以创建一些大小、颜色不同的元素（如按钮）,而不用每次都准备一个背景图片。 ZURB上有教你创建CSS3按钮的详细文章，有兴趣可以去看看。利用RGBA做出的阴影效果真的很棒！

2.CSS3柱形图

Ben Lister选列了很多实用的CSS3技巧，包括这个看起来相当不错 的3D柱形图。使用-webkit-transform或-moz-transform以及指定的偏移，你可以用CSS做出和图片一样令人印象深 刻的效果。

3. CSS3下拉菜单

WebDesignerWall的Nick La展示了如何创建一个漂亮的CSS3弹出式下拉菜单，他展示了使用渐变图片和CSS创建的两个版本的菜单。

4. CSS3引用气泡

这些由Nicolas Gallagher创建的纯CSS引用气泡看起来很棒，你可以稍加修改作为你网页上的blockquote元素。

去Gallagher的demo页面看看效果

尤其注意那个twitter的气泡，比twitter官方使用嵌入的方法好。

5. CSS3相册

苹果刚刚推出了一些展示HTML5网页效果的页面（HTML5和CSS3往往被联系在一起）。虽然这个使用CSS3创建的 Polaroid-style相册有些过渡和3D效果无法在所有的浏览器中运行，不过这真的是一个很酷的CSS3过渡效果的示例。

想看更多CSS3和HTML5的demo，请点击这里。

英文来源：mashable

译者 程序猿

这里有一些很漂亮的演示

关于这项技术，一个叫 Simon Willison 的程序员，在他的博客中做了很好 的剖析：

SmokeScreen 完全在浏览器中运行，读取 SWF 二进制文件，解压缩（而且使用本地 JavaScript 解压缩！），从中抽取图像与内嵌的音频，将它们转换为 Base64 编码的数据，接着，将其中的矢量图形转换为 SVG 动画。在 Chrome 中打开 Web Inspector，在演示进行当中，你会看到 SVG 的实时运行。SmokeScreen 甚至设计了自己的 ActionScript 解释器。

Smoak 表示，他会很快基于开源协议开放 SmokeScreen 的源代码，目前，他已经做了几个非常漂亮的演示，尽管还不够完美，但已经能看出基于 HTML5 的 Flash 风格的动画是个什么样。这些代码并不能支持 Flash 视频，不过，HTML5 已经有了自己的视频方案。Smoak 说，他的初衷是在 iPhone 和 iPad 一类的设备上实现 Flash 风格的广告动画，这项技术最可能应用在广告中。

经过优化，该技术还可以用于游戏，Willison 表示，新闻站点中的 infographics 也是很好用场，另外，还可以用来渲染卡通风格的动画，比如演示中的 Strongbad 系列。

不过，人们担心，SmokeScreen 是否可以很好地应用到那些速度和供电能力都十分有限的移动设备，同时，我们期待代码开源后可以得到优化。目前，只有那些最新的浏览器才可以使用该技术，包 括 Firefox 3.6, Chrome 5, Safari 4 以及移动 Safari。Opera 10.5 系列也接近支持，但不支持 IE8，不过 Smoak 表示，IE9 很有希望。

本文国际来源：webmonkey.com Smokescreen Project Promises Flash Without the Plug-in (原文作者：Michael Calore)

中文编译来源：锐商企业CMS 网站内容管理系统

到了现在，钱还没到手。由于募股市场慢慢打开了，盈利方面的压力就显示出来——特别是对于那些收到这些天价估值的公司。这个问题部分原因在于这类别的业务已经失去新奇性，现在几乎每一个网站添加社交工具，但大多数只是从来自一个公司——Facebook。 加特讷分析师Ray Valdes说：“很多网站在Facebook面前折腰。”

Mark Zuckerberg从他的大学宿舍开始创办的Facebook，很可能是少数之实现其预期的网站之一。Facebook今年应从14亿美元收入中带来预期7000万美元的利润（税前），是自谷歌之后一个最大预期之一，预计在2012年之前不会上市 。

更令社交网络创业者感到失望的， 新闻集团的（NWSA）数码媒体集团报道，MySpace在2010年第一季度1.5亿美元的亏损负有责任，默多克不得不承认，“我们犯了些大错误。” AOL的蒂姆.阿姆斯特朗计划出售或变卖Bebo，在过去一年其流量下跌52％。虽然谷歌首席执行官埃里克施密特说，他对YouTube的未来是乐观的，而分析师预测，真正的利润还需要时日。

与此同时，一系列的Web 2.0公司，如Ning, Hi5, and Digg正在更换CEO，取消免费服务，裁减员工，或转向社交游戏。就在去年夏天，Ning的市值评估上升到7.5亿美元。今年春天，任命了新CEO，人员裁减了40％，并宣布将向用户收费。新CEO Jason Rosenthal说，目的是“为最活跃的用户群提供最好的服务”而不是大多数用户，这仅仅是目标，但用户愿意付钱。这是一个转变，但像Tagged公司没有这样做，因为他们拿到的风险投资较少，在业务运行方面有更大的自主性。

即使公司自己转变，也不太可能获得早期投资者的期望。但是记忆是容易忘却的。投资者已经开始把钱砸向下一轮的创业公司 ——iPhone应用程序和社交游戏公司。随着收购传言风行和风险投资公司的投资热情，Foursquare，一个可以让用户“签到”他们到过地方的地理定位新型SNS服务，据报告仅仅基于100万用户评估价值已在1亿美元。看看吧，又来了。

原文：fortune.cnn.com

编译 ：MazingTech

基于心理学设计的目的

在设计过程中考虑到心理学会带给你一个积极意义的最终结果。如果你花时间去分析一下你的访客的需要， 他们怎么样才能满足他们需要，那么你已经在走上了设计网站的道道，这将为你的目标受众注入源源不断的心理动力。

通过访客心理分析，你 得到的结果是访客更开心乐意的做你所希望他们做的事情，比如保持与你联系，买你的产品，或者推荐给他的朋友们。

你希望访客更容易的跟 着你的意愿走，这就是设计中要运用心理学的主要原因。

建立信任关系

要你的访客做你 所想他们做的，首先你得跟访客建立信任关系。信任关系并不容易，尤其是这个骗子横行的时代，让人讨厌的人在网络哪个角落都有一大把。那些对网络还不是太熟 悉的用户，如果谁问他们一些个人信息都会变得十分敏感，也不管这些信息对网站工作是很需要的。

作为网站类的设计师，我们往往忽略自 己已经是习惯了网上交易。但是对于我们的客户，还有他们的客户，互联网仍然是一个他们正要进入的很大很可怕的黑洞。

认识到这一点，你 再使用设计心理学，使你的网站即使一般用户看起来也觉得更值得信赖。创建一个使访客用户安心的网站，就意味着他们很可能会注册一个帐户，并且购买产品，或 者用其他方式和你做生意。这些可以通过网站设计和语言来达到。

熟悉和识别模式

当一个用户访问网站的某个页面，一 定是有某些东西他们想马上看到的，不管登录的是一个什么网站。

如果他们没有看到预期的东西，他们会觉得乱七八糟毫无意义（所以，这 网站不可靠）。

访客来到一个网站，对网站来说所期待有最重要两点，一是来访的目标内容（这可能是某些主题信息上看到在售的某个漂亮 的产品），二是要有些导航。

虽然标签可以帮助辨识的目的，设计还应该补充和加强这一消息。比方说，例如，你正在设计一个环境主题的 博客。如果你的设计看起来黑色和寂静又阴沉，并在页头一个夕阳西下的城市天际线。这样很不好，甚至没有正确的暗示一下这个网站是干什么的。

而如果一个网站看起来很干净很现代，有些绿色和自然的口号，这就给人一个深刻的印象，这是一种环境保护主题的博客。

除了一些在任何一个网站都能找到的信息元素，还应该有一些特别的东西，这些是访客在某种特定的类别或者行业的网站期望看到的。人们期待博文放在博客的首 页，期望电子商务网站的头版都放产品。对于任何网站人人都期望在超过了几个深度的页面便会提供一个搜索功能。而且在大多数情况下，人们还期望有“关于我 们”和“联系我们”的页面。

品牌统一

除了大多数访客希望看到一个网站所必备的基本要素，还应该有些东西吸引用户跟你公司联系。虽然这可能不是一单生意，或者是吃一个小生意，但这说明很多人都 在关注。

想想你设计的一些的线下的促销宣传单的颜色。这些颜色应该某种程度上融入你的网站在，即使它只是在标题图片或或者一些标识口号的颜色。

如果你在宣传资料上印有Logo，那也一样，在网站上你也要同样的呈现。这是很基本的事情，但是很多企业往往忽略了这种线上线下的一致性。

心 理激发

心理和情感激发是鼓励用户付诸行动一个的宝贵工具。激发包括像内疚和担心的这样的情绪，当然还包括吸引人的那种归属感和人的价值观念认可。

在设计中结合激励性情绪的通常做法是如果网站上的广告语言，再加入一些图形元素作为辅助支持，使用图片和图表加强激励效应。

图像强化 概念

你在网站上使用的图片会帮助也会混淆你的访客。一个精心挑选的图片可以令你访客心领神会，了解你明显不过的意图。如果选择不慎，甚至会让你的访客很抓狂， 让他们感觉到又回到了乱七八糟的黑暗时代。

抽象的图像有时也有意想不到的效果，不过请小心使用，确保放在那里有它的意义。 有时，一个抽象的图形在不同的访客那里会有不同的解读，或将会完全误解原本的含义。

这张迪斯尼世界河马照片绝对与 本文章毫无关联，放这里只会让你莫名其妙。

颜色心理学

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

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

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

阅读模式

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

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

每页有焦点

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

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

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

喘息机会

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

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

整合设计心理学的步骤

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

圈出 你的目标用户群

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

约见用户

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

建立网站地图

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

整合品牌元素

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

A/B测试

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

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

来源：webdesignerdepot

编译：MazingTech

主题截图

主题演示

前往TE本地演示站

主题下载

Doris Theme_for Typecho_23_5_2010
（转载与衍生须遵循Creative Commons署名 3.0 协议）