网站用户体验整合设计

网站用户体验整合设计http://www.zhangmeigong.cn/张明工作室RainbowSoft Studio Z-Blog 1.8 Spirit Build 80605zh-CNCopyright zhangming WebSite. Some Rights Reserved.Wed, 21 Jul 2010 13:27:56 +0800基本的 HTML 标签 a@b.com (张美工)http://www.zhangmeigong.cn/post/212.htmlMon, 05 Jul 2010 10:27:26 +0800http://www.zhangmeigong.cn/post/212.html

标签描述
<html>	定义 HTML 文档。
<body>	定义文档的主体。
<h1> to <h6>	定义标题 1 至标题 6。
<p>	定义段落。
<br>	插入折行。
<hr>	定义水平线。
<!-->	定义注释。

标题

标题使用 <h1> 至 <h6> 标签进行定义。<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

HTML 会自动在标题前后添加一个额外的折行。

段落

段落使用 <p> 标签进行定义。

<p>This is a paragraph</p>

<p>This is another paragraph</p>

HTML 会自动在段落前后添加一个额外的空行。

换行符

当你打算结束一行，而又不想开始一个新段落时，<br> 标签就派上用场了。无论你将它置于何处，<br> 标签都会产生一个强制的换行。

<p>This <br> is a para<br>graph with line breaks</p>

<br> 标签是空白标签，由于关闭标签没有任何意义，因此它没有类似 </br> 的终止标签。

<br> 还是 <br />

您会越来越多地发现 <br> 与 <br /> 很相似。

由于 <br> 没有结束标签，它也就违反了未来的 HTML 的规则之一，即所有的元素都必须关闭。

把这个标签写为 <br /> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。

HTML 注释

注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。您可以使用注释对您的代码进行解释，这么做在以后的日子里会对您的代码编辑产生帮助。

注意：左括号后需要写一个惊叹号，右括号前就不需要了。

锚标签和 Href 属性

HTML 使用 <a> （锚）标签来创建连接另一个文档的链接。

锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。

创建锚的语法：

<a href="url">Text to be displayed</a>

<a> 用来创建锚。href 属性用于定位需要链接的文档，锚的开始标签和结束标签之间的文字被作为超级链接来显示。

这个锚定义了指向 Dosite 的链接：

<a href="http://www.Dosite.cn/">Visit Dosite!</a>

Target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="http://www.Dosite.cn/" target="_blank">Visit Dosite!</a>

锚标签和 Name 属性

Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。

以下是命名锚的语法：

<a name="label">Text to be displayed</a>

name 属性用于创建命名锚。锚的名称可以是任何你喜欢的名字。

下面这行定义了命名锚：

<a name="tips">Useful Tips Section</a>

你会注意到，命名锚会以特殊的方式来显示。

将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个节，就像这样：

<a href="http://www.Dosite.cn/html_links.asp#tips"> Jump to the Useful Tips Section </a>

框架结构标签（<frameset>）

框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

编者注：frameset 标签也被某些文章和书籍译为框架集。

框架标签（Frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：

<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

表格的表头

表格的表头使用 <th> 标签进行定义。

<table border="1">

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

表格中的空单元格

在大多数浏览器中，没有内容的表格单元显示得不太好。

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td></td>

</tr>

</table>

HTML 列表

HTML 支持有序、无序和定义列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

浏览器显示如下：

Coffee Black hot drink Milk White cold drink

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

]]>css+divhttp://www.zhangmeigong.cn/post/212.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=212http://www.zhangmeigong.cn/cmd.asp?act=tb&id=212&key=616cfa19Web前端工程师技能列表a@b.com (张美工)http://www.zhangmeigong.cn/post/211.htmlTue, 08 Jun 2010 10:32:40 +0800http://www.zhangmeigong.cn/post/211.html 要打造一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的”网页套接”是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下：

通过许多实际项目，个人认为一个完备的前端产品开发团队，必须拥有如下的人才配备，也希望大家补充：

团队全体成员达到所有技能中的a级标准
团队全体成员必须掌握两项技能中的b级标准，并保证所有的b级标准在该团队中有50%以上成员能达到
团队全体成员必须掌握一项技能中的c级标准，并保证所有的c级标准在该团队中有25%以上成员能达到

具体技能描述：

【必备】UserInterface
1. PhotoShop/Fireworks Design
  a - 配合美工将草图形成具体的符合WebPage的设计
  b - 有快速制作分层高品质PSD、PNG的能力
  c - 能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码
2. Flash Design
  a - 基本动画效果
  b - 复杂的交互体系设计，了解第三方swf辅助设计软件
  c - 复杂的交互体系设计以及较强的对各类外埠资源（PNG、JPG、MP3、WAV等）的整合能力。精通部分第三方辅助设计软件（AE、SwishMax、Swift3D等）
【必备】Browser-side (Web Application)
1. XHTML/CSS
  a - 基本的layout实现
  b - 严格跨平台的layout实现以
  c - 优雅的HTML code，尽可能符合标准并有SEO的考虑因素。在任何平台、浏览器下基本保持一致。不要求了解各种CSS的hacks，但要求知道遇到问题应该如何查阅资料以在第一时间内解决。能够为JavaScript开发人员提供最好操作的DOM结构，让JS开发人员在开发的时候认为”一切都已经准备就绪了”，而不是”捉襟见肘”。
2. JavaScript/Ajax/DOM
  a - 基本的DOM操作，了解AJAX，可以实现数据通信
  b - 基本的DOM操作，能写高效率的OOP代码，以降低维护成本
  c - 基于需求，进行不同的开发，选择合适的框架，做到代码效率最高，用户体验最好，代码下载量最小，并且可以在单独甚至更多产品线中最大限度重用代码
3. Flash Developement
  a - 基于Timeline的ActionScript操作，能实现简单交互
  b - 掌握a外，能实现数据层通信（与服务器以及本地SharedObject）
  c - 精通AS1-3，能根据需求进行各类RIA开发。无论是要求支持FlashPlayer8的，还是FlashPlayer9的，都能做到开发效率最高、灵活性最大（比如对HTML层的接口设计，等等）。
【必备】Client-side (Desktop Application)
1. Apollo
  a - 产品级的封装，基本技术了解（如何打包、如何加入HTML和JavaScript等）
  b - 掌握a的同时，能利用Apollo的API独立设计、开发OS的文件I/O功能。
  c - 掌握基本技能的同时，对”3D概念体系”有所认知。这里”3D”即：Design（设计）、Development（开发）、Deploy（产品部署）。能用Apollo
2. Windows Presentation Foundation、WPF/E（Silverlight）
  （待定，欢迎补充）
【增补】Server-side（修改：经考虑，这个技能不参与评级）
本来列举了”1、Server端简单的技术、脚本”和”2、MediaServer（Red5）接口”作为”Web前端工程师技能列表“的一种（服务器、数据逻辑层技能的）评判标准。但似乎很多朋友对于前端工程师是否应该掌握Server端技能的必要性表示怀疑。确实，要掌握好上述的展现层技能不是意见容易的事情，而且前端工程师的确非常辛苦。但是，站在另一方面来说，辛苦的原因是什么，我不知道在你日夜奋战div+CSS的时候思考过没有。就我的经验，前端的辛苦在于以下几个方面：

重复劳动多，大量的div+css都是重复的，即便可以复制粘贴，但几千行的div海洋中去寻找一个入口恐怕都非常痛苦
需求变更多，往往你折腾几个小时终于把跨平台问题解决好了，而且在IE6、7和Firefox下面都能显示同样的效果了，甚至连JavaScript交互都已经快搞定了。突然上面说需求要变。这无疑是莫大的痛苦。

也许表面上看，这跟Server端技能无关，但我觉得有好的Server端的意识，一定会有所帮助（当然不可能解决所有的问题）。毕竟信息结构和数据库是密切相关的，而Server是连接数据库的唯一渠道（至少大多数B/S应用是如此）。掌握Server端的基本技能，对于同逻辑层开发人员设计接口是非常重要的。而且HTML表现层在开发时与数据的分离，也与Server端的各种模板技术有关。例如PHP中的Smarty模板（我曾经用的）、jsp的model2概念等等。HTML结构如何设计，如何让HTML重用，甚至在HTML层进行OOP的开发（我现在在新产品线中设计的前端开发流程），都需要Server端的支持。最起码，你要告诉php程序员你需要什么。如果你完全对PHP一无所知的话，那也无从谈起了。
此外，对于创业团队，往往人手非常有限。为了让运营成本降到最低，所有的技术人员都有义务对Server端技术有所了解。如果为了修改一个网页的标题还要跑去喊PHP程序员连接Remote Server的话，那实在是增加了整个公司的运营成本。
总结：我认为，可以不了解技术细节，但应该知道原理，最好能掌握一两套设计思想（毕竟数据逻辑都在这里走，光看HTML和JavaScript，对人的见识还是有局限的，这种局限限制了我自己很久的时间），那将是一比宝贵的财富。

【增补】Mobile-side（不参与评级）
1. Flashlite
  （待定，欢迎补充）
2. Java？
  （待定，欢迎补充）

看到很多朋友留言说前端工程师没前途，我在想，同时掌握移动设备的技能是否也是拓展前途的一个必要性？这里再多说几句，关于技术人员的前途，目前在国内确实得用”惨淡”来形容。浮躁的氛围让技术人才往往过早放弃了自己的技术生涯，而尔虞我诈的整体道德水平也让单纯的技术人员痛不欲生（我身边太多了，恩，不说具体细节了，呵呵）。

作为一个技术人员，开发人员，在保持纯粹地敬业心态（这是前提，这么没有，啥也别谈）外，更要学会如何保护自己，如何壮大自身，社会不会同情你，只有你自己才能保护你自己。

http://www.awflasher.com/blog/archives/906

]]>用户体验http://www.zhangmeigong.cn/post/211.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=211http://www.zhangmeigong.cn/cmd.asp?act=tb&id=211&key=f7faf1f5前端开发与网页制作:一直被混淆从未被厘清a@b.com (张美工)http://www.zhangmeigong.cn/post/210.htmlThu, 03 Jun 2010 17:12:53 +0800http://www.zhangmeigong.cn/post/210.html 技术为王的年代，追逐领先技术已经不再是大学生等高学历群体的专利。就业难的当下，3G行业依然保持其旺盛的发展潜力，给经济危机笼罩的当下增添了喜色。一些在就业市场边缘徘徊的大专生甚至高中生也跃跃欲试，希冀踏上3G的跳板摆脱学历带来的桎梏。

大专生和高中生的理论基础和实践经验相对来说都比较薄弱，他们将目标瞄向要求比较低的网页制作。殊不知当年的网页制作如今已经进化为前端开发，由于前端开发这个名词相对比较陌生，很大一部分人将网页制作和前端开发混为一谈，所以当博看文思前端开发培训中心开设前端开发课程的时候，光解释这两个名词就费了一大番周折。

如果用一句话来解释前端开发与网页制作人员的区别，那就是前端开发解决的是一整套网站视觉优化方案，而网页制作人员解决的仅仅是网站视觉的部分实现。如今的现实是，大部分前端开发人员都是从网页制作人员发展而来，所以当前端开发工程师的职位出现后，很多网页制作人员也纷纷打起了前端开发工程师的旗号，其实两者之间的差别是巨大的。

前端开发属于人机交互的一部分，处理的是人与计算机、人与手机之间传递、交换信息的媒介和对话接口的设计开发，通过严格的手写代码规范，以某种元素去实现用户想达到的任何界面效果。与网页设计相比，前端开发要求知识面广，对技术理解相对较深，在具体的工作中具有总揽全局的能力。能力总是和待遇成正比的，前端开发与网页设计的差距自然反应在工作待遇上也是天壤之别。

前端开发的兴起也让不少大专生和高中生纷纷放弃了网页设计，投奔到前端开发的门下。随着网络、计算机硬件设施的不断提升，我们正在朝着客户端的方向前进。以用户为中心的设计，都离不开前端开发。在我国，前端开发工程师是一个新兴名词，2005年国内才首次出现前端开发工程师这个职位。

前端开发工程师在我国的地位慢慢受到重视，但国内与国外的差距依然非常大。美国等技术先进国家前后端人员的比例为1：1，而在我国国内目前依旧在1：3以下。3G时代的到来，各行业领域的网站几乎都要移植到移动互联网上，可以预料未来几年国内对前端部分将会有大量的人才需求。而前端开发工程师也会日益受到重视，前端开发工程师的地位也会越来越高。

前端开发工程师职位炙手可热，催活了前端开发培训市场。在3G培训机构中，很多都开始设置前端开发课程。然而前端开发与网页制作概念界定的模糊，也让不少培训机构钻了空子。打着前端开发的旗号，讲的却是网页制作的课程。

“这些培训机构并非不愿意讲前端开发课程，而是没有能力讲前端开发”，智联招聘的某资深前端开发工程师说。原来，学好前端开发课程，需要的不仅仅是理论知识，更需要大量的项目研发经验。而让普通的前端开发培训机构为学员提供实际项目，实属是强人所难。

然而，能够为学生提供实训项目的前端开发培训机构也并非没有。据网友爆料，博看文思前端开发培训中心就能够为实习生提供大量的项目开发实践，博看文思的实习生就曾为Discovery Channel、法国电信、Mozes、美国商会等知名企业提供一站式的前端解决方案。看来要诚心找，能够真正学会前端开发的地方还是有的。

对于大专生、高中生等低学历群体，曾经因为一纸文凭被挡在就业的大门之外。前端开发课程的设置，拉近了大专生、高中生与3G开发殿堂的距离。难料半路杀出网页设置，真假李逵难辨，参加前端开发培训的学员走进了迷宫。还是真诚提醒想要参加前端开发的学员，凡事认真辨别，莫误打误撞耽误了前程。

]]>用户体验http://www.zhangmeigong.cn/post/210.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=210http://www.zhangmeigong.cn/cmd.asp?act=tb&id=210&key=c436fa81网页设计心理学a@b.com (张美工)http://www.zhangmeigong.cn/post/209.htmlThu, 03 Jun 2010 15:51:32 +0800http://www.zhangmeigong.cn/post/209.html大部分设计师没有花时间去学习基本的心理学原则是怎么样影响他们网站用户的体验。心理学原则很多时候被认为是可有可无，或者过于复杂的。但事实是，这些想法都不对。并没那么多的概念与基本设计心理学相关，而且大多数是相对简单的，很容易学习。设计心理学还是比较容易实现的，虽然有些相对来说需要用多一点细心和规划。

基于心理学设计的目的

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

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

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

建立信任关系

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

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

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

熟悉和识别模式

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

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

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

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

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

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

品牌统一

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

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

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

心理激发

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

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

图像强化概念

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

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

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

颜色心理学

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

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

红色

火热和激情，可以代表都爱和愤怒。

橙色

具有红色和黄色的属性。可以与能源和温暖相关。它比红色更冷静，更愉快。

黄色

温暖，愉快，幸福的颜色。它可以表示喜悦或胆怯。

绿色

自然，成长，和新生的标志。按照同样的道理，绿色，有时代表很嫩经验不足。在另一面，绿色，有时候是因为羡慕或嫉妒。

蓝色

平静的，冷静的，但使用太多可以令人感到消沉。往往与企业形象关联。

紫色/紫罗兰

与贵族和财富的关系渊源流长，也是一种与精神相关的颜色，可以有创造性的表意。

黑色

像变色龙，它可以是保守或前卫，传统或现代的，它还可以神秘和性感或常规和安全，这取决于怎么使用以及周围环境。

白色

代表着纯洁与清白，十分容易与其他颜色搭配。

灰色

中性的，平衡的。灰色是保守的和复杂的，但也可以看作是变化无常的。

棕色

一个健康和务实的颜色，表示的稳定性和可靠性。

阅读模式

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

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

每页有焦点

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

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

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

喘息机会

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

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

整合设计心理学的步骤

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

圈出你的目标用户群

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

约见用户

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

建立网站地图

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

整合品牌元素

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

A/B测试

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

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

来源：webdesignerdepot

]]>用户体验http://www.zhangmeigong.cn/post/209.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=209http://www.zhangmeigong.cn/cmd.asp?act=tb&id=209&key=5574e2e3被政府刑讯逼供的犯人，都曾经是他们的衣食父母。农民犯人交过公粮，工人犯人交过税！！怒~~~a@b.com (张美工)http://www.zhangmeigong.cn/post/208.htmlFri, 28 May 2010 15:51:11 +0800http://www.zhangmeigong.cn/post/208.html被政府刑讯逼供的犯人，都曾经是他们的衣食父母。农民犯人交过公粮，工人犯人交过税！！怒~~~

刑讯逼供是指司法工作人员采用肉刑或变相肉刑折磨被讯问人的肉体或精神，以获取其供述的一种极恶劣的审讯方法。中国刑事诉讼法第43条、最高人民法院关于执行《中华人民共和国刑事诉讼法》若干问题的解释中第61条、人民检察院刑事诉讼规则第140条等法律条文均有明确规定禁止刑讯逼供，但在司法实践中，刑讯逼供仍普遍存在。这是与建设社会主义法治社会的目标背道而驰的。

]]>时事动态http://www.zhangmeigong.cn/post/208.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=208http://www.zhangmeigong.cn/cmd.asp?act=tb&id=208&key=32d261c7张美工点评 “新捷达”广告a@b.com (张美工)http://www.zhangmeigong.cn/post/207.htmlMon, 24 May 2010 11:04:41 +0800http://www.zhangmeigong.cn/post/207.html 捷达车以“皮实耐用”早已在国人心目中树立起其经典形象，如今，捷达又要进行“第三次”改款，可能不大关心车市或者不关于这个车型的人都不会在意，但张美工提醒一下，可能大家一定有所印象：“甜蜜蜜，你笑得甜蜜蜜，好象花儿开在春风里….”一进入耳朵的是邓丽君温婉而甜的歌声，几句之后伴随着节奏一阵清脆的口哨声，说到这里大家一定有所顿悟：

“哎！别说还真有点儿印象”

“嗯，是，有这么一个片段，好像是捷达的广告”

“具体什么广告没太留意，不过这个歌儿倒是有印象”

…

在这里张美工不是为捷达做广告，而是来说说这个广告的创意：

画面一、广告一出来是副黄旧的片段，漂亮的妈妈哼着温婉的甜蜜蜜小调，小孩带着快乐的笑容小脸向车外望，这个时候的街道上多得是自行、三轮车，老捷达鹤立鸡群…----（在中国早期发展中捷达已经在为百姓服务了。）

画面二、甜蜜蜜的哼曲接成为清脆的口哨，并伴随着欢快的自行车铃声，时光在穿梭，当年的小孩已经成为高校学生，并有着甜蜜的爱恋，骑在小路上… ----（因为有爱，有信赖，所以才能连接彼此）

画面三、当年一对恋人骑车的小路上已经有崭新的变化，这里从小路的那端驶来一辆全新的捷达，而甜蜜蜜清脆的口哨已经接为捷达车音响的CD播放，车里坐着的正是当年一对小恋人… ----（年轻人通过一番努力有了自己的发展，同时捷达也有自己的创新。）

画面四、温馨的一家三口在全新的捷达里享受着甜蜜蜜… ----（时代在发展，捷达在也不断提升品质）

》这则广告中将两代人开着的新、旧捷达放在画面中，而且又恰到好处地将新捷达新特征、新功能做了车内、车外的特写，更多的表达是这款车已经成为家庭的成长，时代前进的见证，做了很深的用户体验。

》广告给人更多的温馨，更紧的扣在百姓心上，他们更深地将车与人与家庭温情结合起来。甜蜜蜜的歌曲从哼唱到口哨到车音响的播放，衔接完美贯彻始终，向天天在钢筋水泥里高速运转的人们吹来了一丝丝的温情。张美工就是在结束了一天的紧张工作后在电视旁想创意时，这则广告飘了进来，顿时每一个神经都放松了。
》而且这则广告也有激励年轻人奋进的情节，生活很美好，我们可以通过自己的努力来创造自己更美好的生活，张美工在想现在正在奋斗的小恋人、小夫妻看到这则广告也一定会有心的鼓舞，他们一定会指着画面中小两口骑自行车过去又开着新捷达车回来的片段，说：“老公，我们也要像他们一样，努力奋斗成为有车有房的人....”（设计旁白）

]]>用户体验http://www.zhangmeigong.cn/post/207.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=207http://www.zhangmeigong.cn/cmd.asp?act=tb&id=207&key=140f5bf7良心建站a@b.com (张美工)http://www.zhangmeigong.cn/post/206.htmlMon, 14 Dec 2009 14:48:47 +0800http://www.zhangmeigong.cn/post/206.html 相信全世界万千网站的站长，在建站之初都或多或少有一些需求。而一个站可以解决或暂缓这份需求。例如：张美工的网站用户体验站。建站初就是因为一直都对网站的友好性充满好奇，经常摆弄着一些小小的道具：

如果这个搜索的小按钮放大一个PX是不是会更能引起浏览者的注意；

这个BUT在最下面放一个是不是更方便用户使用；

这一段文字会不会太多影响用户阅读的心情啊？我是不是应该给出重点与次重？

这个项目里有好几处的方法是几经琢磨的，要做好备录，可是放在哪里又不会掉，又方便我用呢？这个时候一草根英雄提醒说：“建个站啊，所有问题迎刃而解。” 茅塞顿开！

自此，网站用户体验屹立于众网站之林，在谷歌和百度排名一路遥遥领先，PR也与日俱增。这个时候好多朋友奇怪的问题：“张美工，你的站PR 流量都不错，各大引擎收录的也很好，为什么不放广告呢？”这个问题问的好，打开如星星多般的网站有如星星般多的放了“非”广告。我不是自清高，建站长亦凡夫俗子，吃住也！但取之要有道。无论如何不能在我的网站用户体验站上放“非”广告，我管不了其它人但我可以维持自己的一片净土。现在社会上青少年犯罪率日益增长，他们是违犯了社会的法律，但也只有他们受牢狱之灾。凭什么？？那么引导他们走向歪路的“人”呢？他们为什么却只受道德的谴责。不公平！大大的不公平！！青少年是祖国的花朵是未来的栋梁。我们应该力所能及的对于青少年于以保护才是。

我相信UE的研究是神洁的，它为我们技术的道路启了很大我推动，我们不能变质它。希望有更多的站长维持出一片净土，让我们的网络空间更加的洁净，让我们的后辈们有更好的学习和研究环境。张美工希望更多的站长都能发动起来，网络扫黄！网络扫非！

]]>用户体验http://www.zhangmeigong.cn/post/206.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=206http://www.zhangmeigong.cn/cmd.asp?act=tb&id=206&key=89145712前端开发工程师的定义a@b.com (张美工)http://www.zhangmeigong.cn/post/205.htmlThu, 12 Nov 2009 16:33:01 +0800http://www.zhangmeigong.cn/post/205.html献给默默努力着的前端开发工程师们，他们有“名分”了！

    web2.0思想的日益普及，让企业都慢慢认识到前端的重要性。前端开发人员的地位也日益提高，相应的技术要求要是越来越高，这对前端开发人员来说确实是一个天大的好事。
    究竟什么是前端开发工程师？好像这个词已经被用过好长时间，但是一直都没有一个明确而又权威的定义，在第三届D2前端技术论坛上，淘宝的UED圆心给了前端开发工程师这样的一个定义：
        1：与交互设计师、视觉设计师协作，根据设计图完成页面制作。|
        2：维护及优化网站前端性能。同时他还定义了高级前端开发工程师：
                1. 使用JavaScript|ActionScript编写封装良好的前端交互组件。
                2. 对Web项目的前端实现方案提供专业指导及监督。
                3. 对新人及相关开发人员进行前端技能培训。
                4. 设计并实施全网前端优化。

淘宝UED的定义可以说是少有的比较完备的定义了，通过要干什么工作来对这个职位进行了定义。（虽然有一个“2：维护及优化网站的前端性能”应该是“维护及优化前端的性能”，因为毕竟还是有大量的B/S前端开发人员存在的。）

在同一届论坛上，土豆的前端开发人员李戎，列出了土豆的工作流程图：

大部分公司的工作流程都应该是类似的，这个李戎十分让我佩服，他用这个图来表明前端的定义和职责。谁也不能挑出不对的地方。图片比文字更能清楚的表达意思。由此也可见一斑。

合理的公司架构，前后端应该是对立的两个部分，而不是单纯的页面制作，前端开发也应该要了解整个项目的架构，在用户体验的设计方面比后台更有发言权。对于网站前端来说，SEO等技能更是必不可少。而不是要专门的SEO人员，一个连DIV+CSS都不精的单纯SEO在我看来完全是扯淡。ps的使用也是前端开发人员必备的技能之一，一个视觉设计人员，一个美工，不可能有很好的页面制作思想。很多图片的切图并不是最好的；更重要的背景图片的合并直接跟CSS的使用及标签的层叠嵌套相关，跟页面的实现思想相关。只有这几个技术都熟练到一定的程度，才可能出来代码最精简、最美观，页面loading最快的页面。

而DIV+CSS+JS/AS,应该是前端开发的看家本领了。

]]>css+divhttp://www.zhangmeigong.cn/post/205.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=205http://www.zhangmeigong.cn/cmd.asp?act=tb&id=205&key=a08ac060交通理解用户体验a@b.com (张美工)http://www.zhangmeigong.cn/post/204.htmlThu, 05 Nov 2009 14:22:42 +0800http://www.zhangmeigong.cn/post/204.html        整个世界面积除去海洋，就剩陆地，而这陆地上住房和耕地之外就是路了，路，大大小小的、宽宽窄窄的，所有的人为了生计来回地奔波在路上。随着车辆的激增，随着时代步伐的加剧，催促着人们大大的加快了自己的步子，在这前行的过程，人们在路上付出，人们在路上回报，路在创造人的财富的同时也会给人带来警示。政府为了充当公仆，在路旁树立了大大小小的牌子，上面都是这样写着：“禁止疲劳驾驶”、“禁止酒后开车”、“禁止...”人都是很贱的高级动物，越是不让做的越想做，越劝阻他还越反感。接着，大大小小的媒体、报纸、网络新闻就会日复一日地公布着：“某某路段，发生了严重的交通事故，经警方调查，某方司机血液中的酒精含量严重超标....或某司机在此事故之前已经连续驾驭竟达N个小时....”
        这个时候，交通秩序严重紊乱，人民财富严重损失，出事家属“头上”天塌地陷...
        在经过N多年N多次的血的教训之后，政府放下“将军”的身份，以极大亲和力来宣传：“司机一滴酒，亲人两行泪”、“三双筷子三只碗，爱妻娇儿盼团圆”。人们虽然在骨子深藏着叛逆，但看这样样的话，眼前呈现的亲爱的父母，妻子、可爱的儿女，亲切的脸庞、急盼的眼神，内心一定是深深打动。不自觉地放慢了步子。

        这个时候我们明白了，将军的命令没有带有亲和力的话作用大。这就叫理解。理解内心想要是什么，采取向其缺渴的方向前进就会取得很好很大的效果。用咱们网站上官面的话来说这种方法就是“UE--用户体验”! 理解用户所想的所要的。以用户的身份去做我们的工作，这样的结果必定是最适合用户需要的、也会有很好的收益!这是我们创意之初、制作之本！

]]>用户体验http://www.zhangmeigong.cn/post/204.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=204http://www.zhangmeigong.cn/cmd.asp?act=tb&id=204&key=b3ee1974关于右对齐在各种定位下的写法a@b.com (张美工)http://www.zhangmeigong.cn/post/203.htmlThu, 05 Nov 2009 10:35:28 +0800http://www.zhangmeigong.cn/post/203.html问题：想要将元素和它的内容与其父元素或定位最近的祖先元素右对齐。
解决方案：此设计模式在每一个步骤上都与左对齐模式对称。

--·要将内容右对齐，则把text-align:right赋给包含的块状元素。

--·要创建一个右对齐的设定尺寸的元素，可以使用width:+value来设定它的尺寸。
         可以使用marign-right:0将它右对齐，用margin-left:auto阻止它左对齐。
         对于一个绝对定位元素，也可以使用right:0来使元素右对齐，用left:auto来阻止它左对齐。

   --·要创建一个右对齐的拉伸的元素，
         可以使用width:auto、margin-left:0和margin-right:0来拉伸它的宽度至容器的左右端。
         对于一个绝对定位元素，也可以使用left:0和right:0来拉伸它至左右两侧。

   --· 要创建一个右对齐的包裹的元素，
          可以使用width:auto、left:auto和margin-left:auto来设定包裹宽度。
          可以使用right:0和margin-right:0将它右对齐。

模式：
      对设定尺寸的静态块状元素右对齐
      block-selector {
                position:static;
                text-align:right;
                width:+value;
                margin-left:auto;
                margin-right:0;
        }
      对拉伸的静态块状元素右对齐
      block-selector {
                position:static;
                 text-align:right;
                width:auto;
                margin-left:0;
                margin-right:0;
        }
      对设定尺寸的绝对定位元素右对齐
      selector {
                position:abslute;
                text-align:right;
                width:+value;
                left:0;
                margin-left:auto;
                right:0;
                margin-right:0;
        }
      对包裹的绝对定位元素右对齐
      selector {
                position:absolute;
                text-align:right;
                width:auto;
                left:auto;
                margin-left:auto;
                right:0;
                margin-right:0;
        }
      对拉伸的绝对定位元素右对齐
      selector {
                position:absolute;
                text-align:right;
                width:auto;
                left:0;
                margin-left:0;
                right:0;
                margin-right:0;
        }
适用范围：此模式适用于所有元素。

局限：被拉伸的绝对定位模式不适用于IE6，但适用于IE7。

]]>css+divhttp://www.zhangmeigong.cn/post/203.html#commenthttp://www.zhangmeigong.cn/http://www.zhangmeigong.cn/feed.asp?cmt=203http://www.zhangmeigong.cn/cmd.asp?act=tb&id=203&key=7ea818c8