<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>刘钢的博客 - 我是UED &#187; 交互设计</title>
	<atom:link href="http://www.iamued.com/tag/%e4%ba%a4%e4%ba%92%e8%ae%be%e8%ae%a1/feed" rel="self" type="application/rss+xml" />
	<link>http://www.iamued.com</link>
	<description>http://www.IamUED.com</description>
	<lastBuildDate>Wed, 18 Jan 2012 02:51:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>原型设计软件Axure6：含汉化包+新增功能介绍</title>
		<link>http://www.iamued.com/interaction/1813.html</link>
		<comments>http://www.iamued.com/interaction/1813.html#comments</comments>
		<pubDate>Sat, 27 Nov 2010 13:16:37 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[axure]]></category>
		<category><![CDATA[产品原型]]></category>
		<category><![CDATA[原型]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1813</guid>
		<description><![CDATA[看了介绍 几个新功能都必要吸引人 解决了以前的一些麻烦问题 2010年11月22日，Axure公司释出了最新的Axure RP 6.0.0.2826测试版。 Axure RP 6是一次重大版本升级，全新的架构。 PC版本与Mac版本达到了风格统一。这次同时放出了它们的测试版。 PC版安装过程中会自动更新.NET Framework4.0。 Axure RP 6.0.0.2826备用下载： 英文PC版下载地址：http://u.115.com/file/f9d967ce12 汉化包下载地址：http://www.webppd.com/thread-2143-1-1.html (先安装英文原型，再把汉化包文件覆盖到axure安装目录，英文原版与汉化包的版本要对应。) 英文Mac版下载地址： http://maxure.s3.amazonaws.com/AxureRP-Pro-Beta-Setup.dmg 此次Axure RP 6 Beta版新增功能下面一一道来： 1. 可以设置页面背景图片、颜色以及相对于浏览器整体居中了。 2. 可以设置整体在线框边缘变为手绘风格的，以及是否彩色输出。 3. 因为是全新的架构，不再存在某些输入法中文无法输入的问题。 4. 可以设置文本行间距了，同时个性化字体可以输出到Html。 5. 更加易用的事件编辑器，再也不会像之前版本那样，编辑器窗口自动变大了。 6. 输出Html时可以选择用哪个浏览器打开。 7. 增加了栅格系统，自带960宽的12栅和16栅。 在菜单栏：Wireframe-Grid and Guides-Create Guides&#8230;中 8. 增加了页面和模块的搜索功能。 9. 增加了快速隐藏网格的快捷键。Ctrl+&#8217; 10. 新的测试版本不能再输出Word2000格式的文档了，只能是Word2007格式。 11. 兼容性，用Axure6可以打开以前所有版本制作的RP源文件，但是如果是Axure6制作的RP源文件，将无法使用像Axure5.6这样的低版本打开。 12. 取消了原来的状态栏，改为拖放组件时直接在右下角显示组件的位置和大小。 13. 没有了原来的收起工具面板，不知是为何考虑的。如果能有像Photoshop那样的Tab隐藏工具面板的快捷键就方便了。 14. [...]]]></description>
			<content:encoded><![CDATA[<p>看了介绍 几个新功能都必要吸引人 解决了以前的一些麻烦问题</p>
<p>2010年11月22日，Axure公司释出了最新的Axure RP 6.0.0.2826测试版。</p>
<p><img id="aimg_2082" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131639d53.jpg" alt="2010-11-23 10-13-07.jpg" width="588" /></p>
<p>Axure RP 6是一次重大版本升级，全新的架构。<br />
PC版本与Mac版本达到了风格统一。这次同时放出了它们的测试版。<br />
PC版安装过程中会自动更新.NET Framework4.0。</p>
<p><strong>Axure RP 6.0.0.2826备用下载：</strong><br />
<span style="color: #8b0000;">英文PC版下载地址</span>：<a href="http://u.115.com/file/f9d967ce12" target="_blank">http://u.115.com/file/f9d967ce12</a><br />
<span style="color: #8b0000;">汉化包下载地址</span>：<a href="http://www.webppd.com/thread-2143-1-1.html" target="_blank">http://www.webppd.com/thread-2143-1-1.html</a><br />
(先安装英文原型，再把汉化包文件覆盖到axure安装目录，<span style="color: red;">英文原版与汉化包的版本要对应</span>。)</p>
<p>英文Mac版下载地址：<br />
<a href="http://maxure.s3.amazonaws.com/AxureRP-Pro-Beta-Setup.dmg" target="_blank">http://maxure.s3.amazonaws.com/AxureRP-Pro-Beta-Setup.dmg</a></p>
<p><strong>此次Axure RP 6 Beta版新增功能下面一一道来：</strong></p>
<p>1. 可以设置页面背景图片、颜色以及相对于浏览器整体居中了。</p>
<p><img id="aimg_2083" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131655QCs.jpg" alt="2010-11-23 10-31-58.jpg" width="260" /></p>
<p>2. 可以设置整体在线框边缘变为手绘风格的，以及是否彩色输出。</p>
<p><img id="aimg_2084" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131707Kbo.jpg" alt="2010-11-23 10-37-25.jpg" width="372" /></p>
<p>3. 因为是全新的架构，不再存在某些输入法中文无法输入的问题。</p>
<p>4. 可以设置文本行间距了，同时个性化字体可以输出到Html。</p>
<p><img id="aimg_2087" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131712sa1.jpg" alt="2010-11-23 10-47-20.jpg" width="540" /></p>
<p>5. 更加易用的事件编辑器，再也不会像之前版本那样，编辑器窗口自动变大了。</p>
<p><img id="aimg_2088" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131716vk5.jpg" alt="2010-11-23 11-21-25.jpg" width="600" /></p>
<p>6. 输出Html时可以选择用哪个浏览器打开。</p>
<p><img id="aimg_2089" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131716DFE.jpg" alt="2010-11-23 11-43-33.jpg" width="413" /></p>
<p>7. 增加了栅格系统，自带960宽的12栅和16栅。<br />
在菜单栏：Wireframe-Grid and Guides-Create Guides&#8230;中</p>
<p><img id="aimg_2090" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131724o14.jpg" alt="2010-11-23 11-47-01.jpg" width="346" /></p>
<p>8. 增加了页面和模块的搜索功能。</p>
<p><img id="aimg_2091" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131726oJ7.jpg" alt="2010-11-23 11-50-16.jpg" width="531" /></p>
<p>9. 增加了快速隐藏网格的快捷键。Ctrl+&#8217;</p>
<p><img id="aimg_2092" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/1317263Ui.jpg" alt="2010-11-23 11-53-52.jpg" width="286" /></p>
<p>10. 新的测试版本不能再输出Word2000格式的文档了，只能是Word2007格式。</p>
<p>11. 兼容性，用Axure6可以打开以前所有版本制作的RP源文件，但是如果是Axure6制作的RP源文件，将无法使用像Axure5.6这样的低版本打开。</p>
<p><img id="aimg_2093" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131728fY4.jpg" alt="2010-11-23 12-39-00.jpg" width="363" /></p>
<p>12. 取消了原来的状态栏，改为拖放组件时直接在右下角显示组件的位置和大小。</p>
<p><img id="aimg_2094" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131728ZNL.jpg" alt="2010-11-23 15-08-19.jpg" width="348" /></p>
<p>13. 没有了原来的收起工具面板，不知是为何考虑的。如果能有像Photoshop那样的Tab隐藏工具面板的快捷键就方便了。</p>
<p><img id="aimg_2096" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131728BxC.jpg" alt="2010-11-23 16-33-22.jpg" width="446" /></p>
<p>14. 条件判断，判断组件或变量值时增加了包含与不包含，这下可以判断输入框是不是包含@符号，用于判断是不是邮箱地址了。同时还增加了一个不是数字或字母的判断，原来版本只有“是”数字或字母的判断。</p>
<p><img id="aimg_2156" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131729axy.jpg" alt="2010-11-24 10-59-44.jpg" width="600" /></p>
<p>15. 增加了针对变量或组件值的公式计算，貌似可以加减乘除运算了，还可以插入当前日期或页面名称。具体怎么使用还不熟悉。</p>
<p><img id="aimg_2157" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131731sHc.jpg" alt="2010-11-24 12-17-08.jpg" width="600" /></p>
<p>16. 可以创建临时中间变量，方便记录各输入组件的值，而不是设置全局变量。</p>
<p><img id="aimg_2158" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131739oNY.jpg" alt="2010-11-24 12-23-21.jpg" width="600" /></p>
<p>17. 增加了三个可用于条件判断的类型：<br />
1. text on focused widget 是判断当前光标所在的组件内容值。<br />
2. drag cursor 拖动鼠标的判断（目前我还不知道是干吗用的）。<br />
3. widget rectangle 可以判断两个矩形组件是不是叠放在了一起（不知道有何实用性）。</p>
<p><img id="aimg_2163" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131741ITo.jpg" alt="2010-11-24 14-55-07.jpg" width="600" /></p>
<p>18. 增加了一个可被赋值的类型：<br />
1. text on focused widget 给当前光标所在组件的文本赋值。</p>
<p><img id="aimg_2164" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131741kLc.jpg" alt="2010-11-24 15-02-50.jpg" width="600" /></p>
<p>19. 矩形右键多了个分配给某个组，不知干什么用的。（可能和未来拖拽有关）</p>
<p><img id="aimg_2169" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131742Gkw.jpg" alt="2010-11-24 15-34-33.jpg" width="493" /></p>
<p>20. 右键有了特殊性粘贴，但试了试并不清楚怎么用。</p>
<p><img id="aimg_2170" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/11/131742Gb2.jpg" alt="2010-11-24 15-42-25.jpg" width="501" /></p>
<p>转载自<br />
<a href="http://www.webppd.com/thread-2121-1-1.html" target="_blank">http://www.webppd.com/thread-2121-1-1.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/interaction/1813.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>交互设计的定义、目的、价值、方法、文档</title>
		<link>http://www.iamued.com/interaction/1317.html</link>
		<comments>http://www.iamued.com/interaction/1317.html#comments</comments>
		<pubDate>Thu, 18 Mar 2010 00:53:18 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[价值]]></category>
		<category><![CDATA[文档]]></category>
		<category><![CDATA[方法]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1317</guid>
		<description><![CDATA[交互设计的定义 交互设计是指设计人和产品或服务互动的一种机制, 以用户体验为基础进行的人机交互设计是要 考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使得最终 用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。交互设计可以划分为纵 向和横向（动态的和静态的） 纵向太深，用户会在一层一层挖掘后，感觉焦躁，同时也容易迷失。横向太宽，信息量多了， 用户会觉得复杂，找不到自己想要的东西。 交互设计的目的 为了产品有效易用，为了让客户对产品产生依赖，为了让客户使用产品愉悦。当客户想要设计或 者改进一个交互式系统，使用户与其交互的过程更加有效、易用，ETU 可以为其提供交互设计服 务，比如： 某个交互系统，用户通过它来进行日常的工作，通过执行一系列的步骤来完成某项任务。交互设 计可以系统变得简单易用，用户使用其工作的效率大大提高。某购物系统，流量很大，但是在生成订单的过程中，用户却大量流失。交互设计帮助该系统找到 用户流失，不能完成购买的原因，进行改进，让用户获得良好的购买体验。 某电子产品，技术先进，但其人机界面的设计可能由研发技术人员来完成，用户觉得产品的使用 方法比较费解。交互设计可以帮助其存在的可用性问题，帮助改进，让用户很容易学会使用它。 交互设计的价值 通过改进设计，使得产品的使用者可以很好的学习、快速有效的完成任务、访问到所需的信息、 购买到所需的产品，并且在使用的过程中获得独特的体验，情感上的满足。 交互设计的好坏会影响用户对产品的印象，同时也会影响用户对品牌的看法。好的交互设计会给 市场带来增值、会提高用户对品牌的忠诚度、会促进销量，从而使公司业务带来良性循环。 交互设计的开展时间 新产品研发过程中，新的用户界面的产生可以引入交互设计。 已有的产品，对产品的人机界面的交互部分需要改进，可以引入交互设计。 交互设计的方法 交互设计一般从标识需求开始，不管是新产品还是改进产品。在这之后，进行任务分析 /功能分 析, 提出满足需求的概念设计，提出候选设计方案，接着制作原型的交互式版本，并进行评估， 根据评估结果可能进行重新发掘需求、修改需求，也可能直接进入重设计。 交互设计中使用的方法包括角色设定，情景设定，故事版，认知走查，用户可用性测试，眼动仪 分析等等。 交互设计花费的时间 根据用户研究内容和项目大小作调整。 交互设计的文档 最终原型设计 UI 设计规格说明书 源地址：http://www.etucn.com/fw2.html]]></description>
			<content:encoded><![CDATA[<p><strong>交互设计的定义</strong><br />
交互设计是指设计人和产品或服务互动的一种机制, 以用户体验为基础进行的人机交互设计是要<br />
考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使得最终<br />
用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。交互设计可以划分为纵<br />
向和横向（动态的和静态的）</p>
<p><img src="http://img.ucdchina.com/upload/snap/2010-03/ce1dd6b3ecf1b0812289221a99901bc6.gif" alt="" width="415" height="324" /></p>
<p>纵向太深，用户会在一层一层挖掘后，感觉焦躁，同时也容易迷失。横向太宽，信息量多了，<br />
用户会觉得复杂，找不到自己想要的东西。</p>
<p><img src="http://img.ucdchina.com/upload/snap/2010-03/bbf67b3cc29e69a33c6c64d772cffcfe.gif" alt="" width="402" height="125" /></p>
<p><strong>交互设计的目的<br />
</strong>为了产品有效易用，为了让客户对产品产生依赖，为了让客户使用产品愉悦。当客户想要设计或<br />
者改进一个交互式系统，使用户与其交互的过程更加有效、易用，ETU 可以为其提供交互设计服<br />
务，比如：<br />
某个交互系统，用户通过它来进行日常的工作，通过执行一系列的步骤来完成某项任务。交互设<br />
计可以系统变得简单易用，用户使用其工作的效率大大提高。某购物系统，流量很大，但是在生成订单的过程中，用户却大量流失。交互设计帮助该系统找到<br />
用户流失，不能完成购买的原因，进行改进，让用户获得良好的购买体验。</p>
<p>某电子产品，技术先进，但其人机界面的设计可能由研发技术人员来完成，用户觉得产品的使用<br />
方法比较费解。交互设计可以帮助其存在的可用性问题，帮助改进，让用户很容易学会使用它。</p>
<p><strong>交互设计的价值<br />
</strong>通过改进设计，使得产品的使用者可以很好的学习、快速有效的完成任务、访问到所需的信息、<br />
购买到所需的产品，并且在使用的过程中获得独特的体验，情感上的满足。</p>
<p>交互设计的好坏会影响用户对产品的印象，同时也会影响用户对品牌的看法。好的交互设计会给<br />
市场带来增值、会提高用户对品牌的忠诚度、会促进销量，从而使公司业务带来良性循环。</p>
<p><strong>交互设计的开展时间<br />
</strong>新产品研发过程中，新的用户界面的产生可以引入交互设计。<br />
已有的产品，对产品的人机界面的交互部分需要改进，可以引入交互设计。</p>
<p><strong>交互设计的方法</strong><br />
交互设计一般从标识需求开始，不管是新产品还是改进产品。在这之后，进行任务分析 /功能分<br />
析, 提出满足需求的概念设计，提出候选设计方案，接着制作原型的交互式版本，并进行评估，<br />
根据评估结果可能进行重新发掘需求、修改需求，也可能直接进入重设计。</p>
<p>交互设计中使用的方法包括角色设定，情景设定，故事版，认知走查，用户可用性测试，眼动仪<br />
分析等等。</p>
<p><strong>交互设计花费的时间</strong><br />
根据用户研究内容和项目大小作调整。</p>
<p><strong>交互设计的文档<br />
</strong>最终原型设计<br />
UI 设计规格说明书</p>
<p>源地址：<a href="http://www.etucn.com/fw2.html">http://www.etucn.com/fw2.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/interaction/1317.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>交互设计模式——空间记忆</title>
		<link>http://www.iamued.com/interaction/792.html</link>
		<comments>http://www.iamued.com/interaction/792.html#comments</comments>
		<pubDate>Thu, 17 Dec 2009 13:34:20 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[模式]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=792</guid>
		<description><![CDATA[当人们进入一个全新环境时,他们需要对空间建立认知模型,要有个空间记忆的感觉。同样，当新用户来到全新、陌生的网站时，用户也希望有个类似站点地图的东西。但如果想让用户更加自如的使用网站，让用户毫无顾及的去尝试，不怕迷路，我们必须为用户建立起空间记忆模式。它犹如沙漠中迷途者手中的指南针与行驶在荒原上汽车装的GPS一样，那么在网站上空间记忆模式的应用有哪些表现呢？ 来自用户的抱怨 “我敢发誓，这个按钮一分钟以前还在这里。它哪里去了？”： 当人们使用东西或文档时，他们经常通过回忆它们在哪里来再次找到它们，而不是它们的名字。很多网站把它们的表单按钮——确定、取消等——放在预定的位置上，部分原因是由于它们的空间记忆依赖性。在复杂的应用系统中，下面这些元素也可以由记忆它们的相对位置找到：工具条上的工具、层级结构中的对象等。因此，你应该小心使用像响应式展开（Responsive Disclosure）这样的模式。把某个东西添加到界面上通常不会引起麻烦，但是把控件重新排列会打乱空间记忆，从而难以找到。这得看具体情况，如果你不确定的话可以做一些用户测试。空间记忆和习惯之间的关系很密切。和习惯一样，空间记忆也是一个在应用中及在应用间保持一致性会带来好处的理由。人们会期望在类似的地方找到类似的功能表现。顺便说一句，网站导航菜单列表的顶部和底部都是很特别的区域，从认知的角度说，与处于菜单中间的项目相比，顶部和底部的项目会获得用户更多的注意力，记忆也更持久。如果他们发生改变，对用户的重新建立空间记忆势必会造成影响，请慎之。 用户浏览历史 Taobao.com： 在淘宝list页面的右边栏，淘宝设置了用户最近浏览过的detail产品的历史记录。这种设计方式让用户可以轻松地追溯曾经浏览过的产品，并比较它们。 Amazon.com： 产品的显示顺序是从你最近一次(上一次)访问过的产品开始 ,而且每个项目都有一个“删除此产品”选项，类似于在购物车页面查找商品。 当一个产品被删除，页面重新加载并更新清单。如果它是用AJAX做，此功能将更为高效，但它仍然是一个实用性的提高。 在亚马逊用户浏览历史记录页的右侧栏，用户会看到一个列表是他们最近浏览的搜索条件和类别：点击“X”的每个项目旁边，在搜索条件和类别历史中,用户可以删除自己的任何项目。这是一个客户端功能，因此结果是瞬间的：当他们删除一个产品时,用户不必等待整个页面的重新加载.这些定制（或编辑）功能，确保购物体验不会给用户带来繁重的负担。如果他们收到的推荐，他们并不满意，用户可以修改它们，以改善今后的访问。 通过以上的案例，我们知道淘宝与亚马逊都尽量考虑了用户的最原始需求：对浏览历史的跟踪和追溯，并且他们都给予了创新，淘宝把它与对比产品联系在一起，亚马逊把它和可定制的历史推荐系统联系在一起。用户可以轻松找到曾经关注过的产品，也不容易迷失在复杂的网站中。并且，让用户建立空间记忆模式的同时赋予更多的可用性价值。 Undo,Redo与返回，前进 IE浏览器： 无论是软件中的撤消与重做，还是IE浏览器中的返回与前进按钮。全都是为用户能够快速返回到熟悉环境而设计。这样的空间记忆模式是如此贴心，使用网站的用户再也不用担心会迷路，即使这个网站的面包屑多么糟糕！可惜的是返回、前进是线性的循序操作，对于１到３步的返回、前进还是很方便的。但是对于４步以上就会很麻烦了。所以面包屑方式在某些时候可以跳跃方式的返回某个状态，这也许是其中为什么好多大型网站没有完全抛弃面包屑的一个小原因吧？当然还有其他原因这里不再赘述！ 其他空间记忆表现形式 搜索框历史输入记录： 面包屑： 筛选历史记录： 以上只是在空间记忆模式中，表现形式的冰山一角而已。更多的空间记忆表现，只要我们平常愿意去观察我们身边的设计，也许会发现更多有意思的空间记忆。 总结 当网站重构、首页改版需要交互设计师出Demo的时候，记得考虑下用户的空间记忆与操作习惯。在创新的同时，要兼顾老用户的操作习惯与思维方式，用户的操作环境经常处于一种“有序的混乱”状态，看起来乱糟糟的，但是用户可以很快找到他要的东西。 原文：http://alite.aliued.cn/archives/1095]]></description>
			<content:encoded><![CDATA[<p align="left">当人们进入一个全新环境时,他们需要对空间建立认知模型,要有个空间记忆的感觉。同样，当新用户来到全新、陌生的网站时，用户也希望有个类似站点地图的东西。但如果想让用户更加自如的使用网站，让用户毫无顾及的去尝试，不怕迷路，我们必须为用户建立起空间记忆模式。它犹如沙漠中迷途者手中的指南针与行驶在荒原上汽车装的GPS一样，那么在网站上空间记忆模式的应用有哪些表现呢？</p>
<p><strong>来自用户的抱怨</strong></p>
<p><strong>“我敢发誓，这个按钮一分钟以前还在这里。它哪里去了？”：</strong></p>
<p>当人们使用东西或文档时，他们经常通过回忆它们在哪里来再次找到它们，而不是它们的名字。很多网站把它们的表单按钮——确定、取消等——放在预定的位置上，部分原因是由于它们的空间记忆依赖性。在复杂的应用系统中，下面这些元素也可以由记忆它们的相对位置找到：工具条上的工具、层级结构中的对象等。因此，你应该小心使用像响应式展开（Responsive Disclosure）这样的模式。把某个东西添加到界面上通常不会引起麻烦，但是把控件重新排列会打乱空间记忆，从而难以找到。这得看具体情况，如果你不确定的话可以做一些用户测试。空间记忆和习惯之间的关系很密切。和习惯一样，空间记忆也是一个在应用中及在应用间保持一致性会带来好处的理由。人们会期望在类似的地方找到类似的功能表现。顺便说一句，网站导航菜单列表的顶部和底部都是很特别的区域，从认知的角度说，与处于菜单中间的项目相比，顶部和底部的项目会获得用户更多的注意力，记忆也更持久。如果他们发生改变，对用户的重新建立空间记忆势必会造成影响，请慎之。<br />
<span id="more-792"></span><br />
<strong>用户浏览历史</strong></p>
<p align="left"><strong>Taobao.com：</strong></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213604j0P.jpg" border="0" alt="" width="188" height="311" /></p>
<p align="left">在淘宝list页面的右边栏，淘宝设置了用户最近浏览过的detail产品的历史记录。这种设计方式让用户可以轻松地追溯曾经浏览过的产品，并比较它们。</p>
<p align="left"><strong>Amazon.com：</strong></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/2136040oO.jpg" border="0" alt="" width="510" height="415" /></p>
<p align="left">产品的显示顺序是从你最近一次(上一次)访问过的产品开始 ,而且每个项目都有一个<em>“</em><em>删除此产品”</em>选项，类似于在购物车页面查找商品。</p>
<p>当一个产品被删除，页面重新加载并更新清单。如果它是用AJAX做，此功能将更为高效，但它仍然是一个实用性的提高。</p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213605Y1I.jpg" border="0" alt="" width="510" height="500" /></p>
<p>在亚马逊用户浏览历史记录页的右侧栏，用户会看到一个列表是他们最近浏览的搜索条件和类别：点击“X”的每个项目旁边，在搜索条件和类别历史中,用户可以删除自己的任何项目。这是一个客户端功能，因此结果是瞬间的：当他们删除一个产品时,用户不必等待整个页面的重新加载.这些定制（或编辑）功能，确保购物体验不会给用户带来繁重的负担。如果他们收到的推荐，他们并不满意，用户可以修改它们，以改善今后的访问。</p>
<p>通过以上的案例，我们知道淘宝与亚马逊都尽量考虑了用户的最原始需求：对浏览历史的跟踪和追溯，并且他们都给予了创新，淘宝把它与对比产品联系在一起，亚马逊把它和可定制的历史推荐系统联系在一起。用户可以轻松找到曾经关注过的产品，也不容易迷失在复杂的网站中。并且，让用户建立空间记忆模式的同时赋予更多的可用性价值。</p>
<p><strong>Undo,Redo与返回，前进</strong></p>
<p align="left"><strong>IE</strong><strong>浏览器：</strong></p>
<p align="center"><strong><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213611j7d.jpg" border="0" alt="" width="307" height="172" /></strong></p>
<p align="left">无论是软件中的撤消与重做，还是IE浏览器中的返回与前进按钮。全都是为用户能够快速返回到熟悉环境而设计。这样的空间记忆模式是如此贴心，使用网站的用户再也不用担心会迷路，即使这个网站的面包屑多么糟糕！可惜的是返回、前进是线性的循序操作，对于１到３步的返回、前进还是很方便的。但是对于４步以上就会很麻烦了。所以面包屑方式在某些时候可以跳跃方式的返回某个状态，这也许是其中为什么好多大型网站没有完全抛弃面包屑的一个小原因吧？当然还有其他原因这里不再赘述！</p>
<p align="left"><strong>其他空间记忆表现形式</strong></p>
<p align="left"><strong>搜索框历史输入记录：</strong><strong> </strong></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213611BRh.jpg" border="0" alt="" width="445" height="231" /></p>
<p align="left"><strong>面包屑：</strong><strong> </strong></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213617quU.jpg" border="0" alt="" width="500" height="197" /></p>
<p align="left"><strong>筛选历史记录：</strong><strong> </strong></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213617eXL.jpg" border="0" alt="" width="289" height="173" /></p>
<p align="left">以上只是在空间记忆模式中，表现形式的冰山一角而已。更多的空间记忆表现，只要我们平常愿意去观察我们身边的设计，也许会发现更多有意思的空间记忆。</p>
<p align="left"><strong>总结</strong></p>
<p>当网站重构、首页改版需要交互设计师出Demo的时候，记得考虑下用户的空间记忆与操作习惯。在创新的同时，要兼顾老用户的操作习惯与思维方式，用户的操作环境经常处于一种“有序的混乱”状态，看起来乱糟糟的，但是用户可以很快找到他要的东西。</p>
<p>原文：<a href="http://alite.aliued.cn/archives/1095" target="_blank">http://alite.aliued.cn/archives/1095</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/interaction/792.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>网页栅格系统研究（3）：粒度问题</title>
		<link>http://www.iamued.com/design/655.html</link>
		<comments>http://www.iamued.com/design/655.html#comments</comments>
		<pubDate>Mon, 07 Dec 2009 13:07:34 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[视觉设计]]></category>
		<category><![CDATA[页面实现]]></category>
		<category><![CDATA[960px]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[栅格系统]]></category>
		<category><![CDATA[网页栅格]]></category>
		<category><![CDATA[视觉]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=655</guid>
		<description><![CDATA[研究（2）中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统） 淘宝的首页（截图）目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）： （图1） 纷乱的高度世界 我们来看下图1左上角。左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格（不可避免的要调整内容，比如人气宝贝中将只能放下3张图片）。来仔细看下高度方向： （图2） 高度方向的布局是：90 : 117 : 100, 第一个间隔是8, 总高度为325. 很明显，高度方向没有任何栅格化的迹象。实际上， 即便是严格遵守栅格系统的Yahoo!首页，高度方向上也没有严格栅格化。 这究竟是为何？ 一切皆有可能 我们缩小关注点： （图3） 上图中，图像的大小是70 x 70, 刚好是24列960栅格系统两列的宽度。对于右边的文字，采取了如下样式： font-size: 12px; line-height: 150%; /* 12 x 150% = 18px */ 中文字体是宋体，line-height的计算值是18px. 注意图3中文字部分可视区域的高度为65, 上下各有4px和1px的间隙。为什么会产生这么奇怪的间隙呢？我们来看下图： （图4） 从上图中我们可以得知，12px的宋体中文字，实际高度只有11px. line-height减去11多出来的高度，则“均匀”分布在上下间隙中（如果多出来的高度为偶数，则上下均分；为奇数时，上面比下面多1px）。这样，对于70px的高度来说，要布局4行文字时，假设行高多出来的上半部分为x, 下半部分为y, 在最理想的情况下，应该满足以下公式： 11 * 4 + 4 * x + 3 * y = [...]]]></description>
			<content:encoded><![CDATA[<div>
<p><a href="http://www.iamued.com/design/652.html">研究（2）</a>中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统）</p>
<p><a href="http://www.taobao.com/">淘宝的首页</a>（<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/taobao_snapshot_20081026.png" rel="lightbox[655]">截图</a>）目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）：<br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/taobao_grid_cols.png" rel="lightbox[655]"><img title="taobao_grid_cols" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/214435Mku.png" alt="" width="600" height="272" /></a><br />
（图1）<span id="more-655"></span></p>
<h4>纷乱的高度世界</h4>
<p>我们来看下图1左上角。左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格（不可避免的要调整内容，比如人气宝贝中将只能放下3张图片）。来仔细看下高度方向：<br />
<img title="taobao_grid_lt" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/214441BKe.png" alt="" width="600" height="335" /><br />
（图2）<br />
高度方向的布局是：90 : 117 : 100, 第一个间隔是8, 总高度为325. 很明显，高度方向没有任何栅格化的迹象。实际上，</p>
<p>即便是严格遵守栅格系统的Yahoo!首页，高度方向上也没有严格栅格化。</p>
<p>这究竟是为何？</p>
<h4>一切皆有可能</h4>
<p>我们缩小关注点：<br />
<img title="grid_70_h" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/214442BuJ.png" alt="" width="500" height="120" /><br />
（图3）<br />
上图中，图像的大小是70 x 70, 刚好是24列960栅格系统两列的宽度。对于右边的文字，采取了如下样式：</p>
<pre><code>font-size: 12px;
line-height: 150%; /* 12 x 150% = 18px </code>*/</pre>
<p>中文字体是宋体，<code>line-height</code>的计算值是18px. 注意图3中文字部分可视区域的高度为65, 上下各有4px和1px的间隙。为什么会产生这么奇怪的间隙呢？我们来看下图：<br />
<img title="font_12px_line" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/214442BaX.png" alt="" width="420" height="48" /><br />
（图4）<br />
从上图中我们可以得知，12px的宋体中文字，实际高度只有11px. <code>line-height</code>减去11多出来的高度，则“均匀”分布在上下间隙中（如果多出来的高度为偶数，则上下均分；为奇数时，上面比下面多1px）。这样，对于70px的高度来说，要布局4行文字时，假设行高多出来的上半部分为<code>x</code>, 下半部分为<code>y</code>, 在最理想的情况下，应该满足以下公式：</p>
<pre><code>11 * 4 + 4 * x + 3 * y = 70
x = y 或 x = y + 1</code></pre>
<p>不难推出，<code>x</code>最理想的整数解为4. 从而<code>line-height</code>为 4 + 11 + 3 = 18. 因此：</p>
<p>对于24列960栅格系统来说，如果要在高度方向上实现栅格，<code>font-size</code>为12px时，<code>line-height</code>的最佳取值是18px(150%).</p>
<p>追求完美点话，还可以将文字部分<code>margin-top: -1px</code>, 使得65上下的间隙为3和2.</p>
<p>至此，我们可以初步判断：</p>
<p>高度方向上是有可能严格栅格化的。一切皆有可能！</p>
<h4>然而，现实总那么残酷</h4>
<p><img title="announce" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/214444oVq.png" alt="" width="360" height="117" /><br />
（图5）<br />
上图中的标题高度为22, 这在24列960栅格系统中是无法对齐的。而且总高度为100, 在24列960栅格系统中也不存在（110才可以）。或许高度方向上我们可以细化行宽为20, 但依旧没法解决上面两个问题（22是明显不能解决的，而对于100px的高度，也无法通过细化行宽来解决。可选高度永远是10的奇数倍，如果进一步细化，小于10后，会变得非常繁琐，没什么实际应用价值）</p>
<h4>宽度世界里会好些吗</h4>
<p><img title="yahoo_w" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/214453tZ7.png" alt="" width="500" height="139" /><br />
（图6）<br />
上面是Yahoo!首页上的两个小模块，我都不想去标注模块里面的布局宽度了（因为一点都不符合24列960栅格系统）。宽度世界里，和高度世界一样充满希望但现实却残酷无比。</p>
<h4>银弹是不存在的</h4>
<p>栅格系统是美好的。但如果我们一味地追求将所有设计都栅格化（必须承认我曾有这个幻想），则立刻会陷入地狱一般的黑暗中。这篇文章中的艰难尝试（我分析了20多个小模块），让我突然醒悟到一个粒度问题：任何设计都有适用范围，超出最佳适用范围，强行使用只会带来无尽的烦恼。对于栅格系统（这里指所有栅格系统，包括多种栅格系统混合使用的情景）来说，我觉得以下场景非常适合：</p>
<ol>
<li>页面的总体宽度布局，比如两栏、三栏等布局</li>
<li>一些固定区块的尺寸，比如广告图片的尺寸</li>
<li>区块之间的间距，可以参考栅格系统的槽宽（Gutter）</li>
<li>一些可以栅格化的小区域，比如图3中的例子，暗合栅格往往能简化布局上的考虑</li>
</ol>
<p>除了上面这些应用场景，强行使用栅格系统，往往会束手束脚，适得其反。这篇文章的目的，就是尝试用最啰嗦最费神貌似很科学实际很无聊的分析来指出栅格系统应用时的粒度问题。在粒度问题上达成一致后，下一篇中我们将讨论栅格系统的技术实现，最后一篇则讨论栅格系统的压轴好戏：模块化开发。</p>
</div>
<div>文章转自：taobaoUED<!-- .entry-content --></div>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/design/655.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>网页栅格系统研究（2）：蛋糕的切法</title>
		<link>http://www.iamued.com/design/652.html</link>
		<comments>http://www.iamued.com/design/652.html#comments</comments>
		<pubDate>Mon, 07 Dec 2009 13:05:21 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[视觉设计]]></category>
		<category><![CDATA[页面实现]]></category>
		<category><![CDATA[960px]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[前端]]></category>
		<category><![CDATA[栅格系统]]></category>
		<category><![CDATA[网页栅格]]></category>
		<category><![CDATA[视觉]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=652</guid>
		<description><![CDATA[首先澄清一个应用场景问题。研究（1）中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受青睐。 有个很有意思的网站是Yahoo!, 看起来是固定宽度布局，实际上在CSS中只要去掉一行，就能摇身一变自适应宽度了： #page { width: 70em; } 为什么Yahoo!最后选择了定宽布局呢？这很可能是因为定宽布局比宽度自适应布局更容易控制。对于结构复杂的网站来说，可维护性和可扩展性非常重要。Yahoo!是以信息展示为主的门户型网站，960的宽度对于信息的阅读比较友善（Joe Clark写了一篇屏幕阅读时有关行长的有趣文章）。种种因素使得Yahoo!最后采用了定宽布局（Tommy Olsson总结了每种布局设计的优缺点）。 这里将只关注定宽布局，适用的场景是搭建复杂的门户型网站。对于宽度自适应布局和相应的栅格系统，暂不讨论（根据实现的技术手段不同，宽度自适应布局又分为流体布局和弹性布局。我个人蛮喜欢弹性布局，以后有时间再研究）。 好了，已经将范围缩小到定宽布局的网页栅格系统，那我们开始吧。 并不遥远的750 还记得800×600的显示器不？虽然才时隔几年，感觉却好像是上个世纪的事了。Mark Boulton做了最早的探索： 将750分割成均等的6份，这就形成了栅格系统，稍加组合划分就形成了两栏布局和三栏布局。Mark Boulton还研究了Gutter（垂直栏之间的间隙）对栅格的影响，有兴趣的可以阅读原文，或者跟着我往下看吧，下面将详细阐述。 几个术语和一个公式 一个标准的栅格系统，包括以下部分： 将Flowline的总宽度标记为W, Column的宽度标记为c, Gutter宽度标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得到以下公式： W = c * N + g * (N - 1) + 2 * m 一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为： W = c * N + g * (N - 1) + g [...]]]></description>
			<content:encoded><![CDATA[<div>
<p>首先澄清一个应用场景问题。<a href="http://www.iamued.com/design/648.html">研究（1）</a>中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。<a href="http://amazon.com/">Amazon</a>采用的是宽度自适应布局，最大限度的呈现信息。<a href="http://google.com/">Google</a>更是简简单单，主题部分就一个列表。<a href="http://ebay.com/">eBay</a>的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受青睐。</p>
<p><span id="more-652"></span>有个很有意思的网站是<a href="http://yahoo.com/">Yahoo!</a>, 看起来是固定宽度布局，实际上在CSS中只要去掉一行，就能摇身一变自适应宽度了：</p>
<pre>#page {
    <del>width: 70em;</del>
}</pre>
<p>为什么Yahoo!最后选择了定宽布局呢？这很可能是因为定宽布局比宽度自适应布局更容易控制。对于结构复杂的网站来说，可维护性和可扩展性非常重要。Yahoo!是以信息展示为主的门户型网站，960的宽度对于信息的阅读比较友善（Joe Clark写了一篇<a href="http://blog.fawny.org/2005/09/21/measures/">屏幕阅读时有关行长的有趣文章</a>）。种种因素使得Yahoo!最后采用了定宽布局（Tommy Olsson总结了<a href="http://www.autisticcuckoo.net/archive.php?id=2004/07/21/fixed-liquid-elastic">每种布局设计的优缺点</a>）。</p>
<p>这里将只关注定宽布局，适用的场景是搭建复杂的门户型网站。对于宽度自适应布局和相应的栅格系统，暂不讨论（根据实现的技术手段不同，宽度自适应布局又分为流体布局和弹性布局。我个人蛮喜欢弹性布局，以后有时间再研究）。</p>
<p>好了，已经将范围缩小到定宽布局的网页栅格系统，那我们开始吧。</p>
<h4>并不遥远的750</h4>
<p>还记得800×600的显示器不？虽然才时隔几年，感觉却好像是上个世纪的事了。Mark Boulton做了<a href="http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_4/">最早的探索</a>：<br />
<a href="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213651sZq.gif" rel="lightbox[652]"><img title="grids_4_1" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213651sZq.gif" alt="" width="490" height="368" /></a><br />
将750分割成均等的6份，这就形成了栅格系统，稍加组合划分就形成了两栏布局和三栏布局。Mark Boulton还研究了Gutter（垂直栏之间的间隙）对栅格的影响，有兴趣的可以阅读原文，或者跟着我往下看吧，下面将详细阐述。</p>
<h4>几个术语和一个公式</h4>
<p>一个标准的栅格系统，包括以下部分：<br />
<img title="grid_vocabulary" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213653PIv.png" alt="" width="646" height="384" /><br />
将Flowline的总宽度标记为W, Column的宽度标记为c, Gutter宽度标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得到以下公式：</p>
<pre><code>W = c * N + g * (N - 1) + 2 * m</code></pre>
<p>一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为：</p>
<pre><code>W = c * N + g * (N - 1) + g = (c + g) * N</code></pre>
<p>将c+g标记为C, 公式变得非常简单：</p>
<pre><code>W = C * N</code></pre>
<p>上面的公式就是栅格系统的基础，很简单吧。</p>
<h4>950的来历</h4>
<p>具体应用时，Margin其实是一个空白边，从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px, 这样Margin就是5px. 当W为960，分割成6列时，栅格如下图：<br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/grid_960_6a.png" rel="lightbox[652]"><img title="grid_960_6a" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213654oqC.png" alt="" width="300" height="119" /></a><br />
上图的处理是左右Margin各为5px. 也可以将Margin集中放在一边，比如右边：<br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/grid_960_6b.png" rel="lightbox[652]"><img title="grid_960_6b" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213657iiG.png" alt="" width="300" height="120" /></a><br />
无论Margin放在何处（这只影响技术实现，不影响设计），我们真正要关注的是去除Margin之后的部分：<br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/grid_960_6.png" rel="lightbox[652]"><img title="grid_960_6" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213658Vc1.png" alt="" width="300" height="120" /></a><br />
这就是我们要真正关注的950！将W的含义变为去除Margin的总宽度，公式变化为：</p>
<pre><code>W = N * C - g</code></pre>
<p>将上面的公式实例化一下：</p>
<pre><code>950 = 12 * 80 - 10
950 = 16 * 60 - 10
950 = 24 * 40 - 10</code></pre>
<p>这就形成了960蛋糕的三种常见切法。</p>
<p><strong>12 x 80</strong><br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/grid_960_12.png" rel="lightbox[652]"><img title="grid_960_12" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213659sgD.png" alt="" width="300" height="165" /></a></p>
<p><strong>16 x 60 </strong><br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/grid_960_16.png" rel="lightbox[652]"><img title="grid_960_16" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213701Q2D.png" alt="" width="300" height="189" /></a></p>
<p><strong>24 x 40</strong><br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/grid_960_24.png" rel="lightbox[652]"><img title="grid_960_24" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/2137027im.png" alt="" width="300" height="236" /></a></p>
<p>上面三种切法，N越大，灵活度越高。可以根据网页的实际复杂度来选用对应的切法。在<a href="http://960.gs/">960 Grid System</a>首页中，展示了12 x 80的应用：<br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/grid_960_12_example.png" rel="lightbox[652]"><img title="grid_960_12_example" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213705unC.png" alt="" width="300" height="290" /></a></p>
<p>我们来看下 <a href="http://lifesinger.org/blog/?p=375">研究（1）</a>中开头列举的网站的栅格应用情况。</p>
<p>Yahoo!是很标准的 24 x 40 栅格：<br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/yahoo_24.png" rel="lightbox[652]"><img title="yahoo_24" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213712bnQ.png" alt="" width="300" height="269" /></a></p>
<p>淘宝网目前只有商城上部分使用了栅格系统（大的两栏布局遵守了 24 x 40 的栅格化，主体部分使用的另一套740的栅格划分）：<br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/taobao_mall_24.png" rel="lightbox[652]"><img title="taobao_mall_24" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213715Y4f.png" alt="" width="300" height="268" /></a></p>
<p>网易很不错，采用的是 16 x 60 的栅格系统：<br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/nerease_16.png" rel="lightbox[652]"><img title="nerease_16" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213718AG7.png" alt="" width="300" height="265" /></a></p>
<p>研究（1）中的其它站点都没有真正严格地采用栅格系统。</p>
<h4>栅格系统的优势</h4>
<p>上面的“发现”是让人有点沮丧的。目前严格采用栅格系统的站点非常少，为什么我们还要努力的让网页栅格化呢？</p>
<p>栅格系统具有以下优势：</p>
<ol>
<li>能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。</li>
<li>基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。</li>
<li>对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。（详见《超越CSS》一书）</li>
</ol>
<p>对于大型网站来说，我相信栅格化将是一种潮流和趋势。</p>
<p>下面讨论栅格系统中的黄金分割。</p>
<h4>黄金分割</h4>
<p>黄金分割可以归结为数学问题：对于长度为1的线段，将其分成两部分 x 和 1 – x, 使得：</p>
<pre><code>x / 1 = (1 - x) / x</code></pre>
<p>化为简单的二次方程：</p>
<pre><code>x^2 + x - 1 = 0</code></pre>
<p>正数解为：</p>
<pre><code>x = (sqrt(5) - 1) / 2 ~= 0.618</code></pre>
<p>这就是黄金分割。这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域，在管理、工程设计等方面也有着不可忽视的作用。 （这是个自然界的魔数，类似的还有真空光速、普朗克常数、精细结构等等，感兴趣的Google吧）</p>
<p>在平面设计领域，黄金分割点被广泛采用。比如下面这种图：<br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/gold.png" rel="lightbox[652]"><img title="gold" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213718fah.png" alt="" width="300" height="176" /></a><br />
数一数上面有多少黄金分割？</p>
<p>对于960栅格，实际宽度是950. 两栏布局时，黄金分割为：<br />
<a href="http://lifesinger.org/blog/wp-content/uploads/2008/10/gold_2_col.png" rel="lightbox[652]"><img title="gold_2_col" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213720yBF.png" alt="" width="300" height="106" /></a></p>
<p>对于 24 x 40 的情景，最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15. 但实际使用时，因为窄栏经常用来做导航或放辅助信息，并不需要350px这么宽。因此实际情况下经常被采用的布局是：<br />
<a href="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213721s7u.png" rel="lightbox[652]"><img title="950_cols" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213721s7u.png" alt="" width="410" height="186" /></a></p>
<p>上面讲的都是宽度方向上的栅格化，下面我们看看高度方向上如何应用。</p>
<h4>高度方向上的栅格</h4>
<p>还记得研究（1）中那张红红的很刺眼的图吗？注意高度值560也是很神奇的。</p>
<pre><code>N(560) = N(2^4 * 5 * 7) = 18
560 / 960 ~= 0.583</code></pre>
<p>N(560)比较大，同时可以让高宽比接近黄金分割。针对560, 我们采用 14 x 40 栅格：<br />
<a href="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213725Pv6.png" rel="lightbox[652]"><img title="560_cols" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/213725Pv6.png" alt="" width="410" height="284" /></a><br />
这样，我们就在宽度和高度两个方向上都实现了栅格化。</p>
<p>下一篇将详细阐述960栅格系统的模块化应用。</p>
</div>
<div>文章转自：taobaoUED<!-- .entry-content --></div>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/design/652.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>交互设计师如何提高自己的能力？</title>
		<link>http://www.iamued.com/interaction/487.html</link>
		<comments>http://www.iamued.com/interaction/487.html#comments</comments>
		<pubDate>Sun, 08 Nov 2009 12:01:20 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[学习]]></category>

		<guid isPermaLink="false">http://www.iamued.com/interaction/487.html</guid>
		<description><![CDATA[转自：http://blog.uxredesign.com/interactive-design/interaction-design-job-ablities/ 2年前，去杭州某公司做交互的时候，除了自己在书上看来点的交互外其他的一概不了解。后来，在杭州那公司做久了，才知道交互设计是怎么回事。总结下自己初学交互时的坎坷，希望后来的同胞可以进步的更顺利些。 这个以户为中心的设计是近几年才逐渐流行起来的，交互设计也是个新兴的行业。和我之前做的老本行：网页设计师一样，交互设计由于其入门门槛低，也没什么考核标准。加上所用的工具乱七八糟：十八般触手可及的东西如：ppt、visio、打印的废纸背面、就连餐桌上擦嘴的纸巾都可以拿来干活。所以，网页设计师不管如何也得经过2个礼拜的photoshop上岗培训这样的门槛，交互设计师门槛更低了，只要会拿笔就ok了，因此良莠不齐的现象出现也属正常。而且，大多数交互设计师是从其他行业转过来的，因此在工作方式上亦有差异，有的偏视觉设计（可能喜欢用photoshop、illustrator干活做线框图？）、有的擅长逻辑分析（可能喜欢用代码做线框图）、也没准还有用餐巾纸做线框图的，那哥们也许是从餐饮业转行来的。 经常看到些报道：马化腾同学参与用户体验的设计、史玉柱天天打他的网游说是亲身体验游戏，以便提出更好的改进意见。这说用户体验为中心的设计越来越受到重视了。而且，由于老板的重视像病毒一样扩散到了整个团队，弄的团队里面人人都想争做用户体验的专家，而你就是那个最最专业的用户体验专家。既然要在团队里充当个非常专业的设计师自然也就需要更高的专业技能了。如果你不希望那天被你的老板或同事在你擅长的用户体验专业上被challange掉的话。 这时，不禁有人要问了，那有没有专门的交互设计培训机构呢？如果你问出这话，多少我会鄙视你的。大哥，你读了10多年的书，还不知道我们的教育体系有多烂吗？你学ps的时候参加过培训吗？那么，到底从那里学呢？其实，方法很多：有许多的交互书籍可供你阅读，当然也要分的，你可以去豆瓣看看咯。另外，从网络中也可以学习到许多的知识，例如：从我这个交互扯淡博客Uxredesing.com中你就可以学到些扯淡的技巧。 然后就是在工作中的实战技巧了，在工作中取得知识与经验是最宝贵的了。如果你已经步入交互设计师的门槛，掌握了一些基础知识，平时经验积累与交互技巧方法的总结就显得格外的重要。保持住平稳的心态，做好随时被challange的准备，用你的专业知识来证明你的专业性，用你的专业说服力告诉那些自以为是的家伙：你才是真正的专家。 做交互设计： 首先，要保持自信，相信自己。(如果表面上不够自信，请在不太臭的WC面对镜子深吸一口气，对暗暗提示。要记住，如果你没有自信自然无法说服对方采纳你的方案了) 多看，多用，多研究用户体验好的网站(别告诉我你没使用过amazon.com、yahoo.com噢，这么基本的网站都不去，作为个专业交互设计师你就不觉得缺钙了吗？)； 将之前做的设计搬出来，思考是否可以有更好的改进(反正是自己看，丢丑又何方？)； 另外，我自己整理出点技能，希望对你能有帮助： 创建人物角色能力：任务角色啦，这个都不知道就别称交互设计师了； 竞争对手分析能力：分析你网站的竞争对手； 设计流程图能力：这个也很重要的，没有流程那来的线框图； 设计线框图能力：这个就是传说中的交付物了； 提案表达能力：初稿设计好给需求方，并解释给需求方的能力，并汇总收集与讨论的结果，继续改进方案； …… Ok，我所知道的就是这些，希望能对大家有所帮助。同时我也在摸索提高能力的过程当中，欢迎与我探讨。]]></description>
			<content:encoded><![CDATA[<p>转自：http://blog.uxredesign.com/interactive-design/interaction-design-job-ablities/</p>
<p>2年前，去杭州某公司做交互的时候，除了自己在书上看来点的交互外其他的一概不了解。后来，在杭州那公司做久了，才知道交互设计是怎么回事。总结下自己初学交互时的坎坷，希望后来的同胞可以进步的更顺利些。</p>
<p>这个以户为中心的设计是近几年才逐渐流行起来的，交互设计也是个新兴的行业。和我之前做的老本行：网页设计师一样，交互设计由于其入门门槛低，也没什么考核标准。加上所用的工具乱七八糟：十八般触手可及的东西如：ppt、visio、打印的废纸背面、就连餐桌上擦嘴的纸巾都可以拿来干活。所以，网页设计师不管如何也得经过2个礼拜的photoshop上岗培训这样的门槛，交互设计师门槛更低了，只要会拿笔就ok了，因此良莠不齐的现象出现也属正常。而且，大多数交互设计师是从其他行业转过来的，因此在工作方式上亦有差异，有的偏视觉设计（可能喜欢用photoshop、illustrator干活做线框图？）、有的擅长逻辑分析（可能喜欢用代码做线框图）、也没准还有用餐巾纸做线框图的，那哥们也许是从餐饮业转行来的。<br />
<span id="more-487"></span><br />
经常看到些报道：马化腾同学参与用户体验的设计、史玉柱天天打他的网游说是亲身体验游戏，以便提出更好的改进意见。这说用户体验为中心的设计越来越受到重视了。而且，由于老板的重视像病毒一样扩散到了整个团队，弄的团队里面人人都想争做用户体验的专家，而你就是那个最最专业的用户体验专家。既然要在团队里充当个非常专业的设计师自然也就需要更高的专业技能了。如果你不希望那天被你的老板或同事在你擅长的用户体验专业上被challange掉的话。</p>
<p>这时，不禁有人要问了，那有没有专门的交互设计培训机构呢？如果你问出这话，多少我会鄙视你的。大哥，你读了10多年的书，还不知道我们的教育体系有多烂吗？你学ps的时候参加过培训吗？那么，到底从那里学呢？其实，方法很多：有许多的交互书籍可供你阅读，当然也要分的，你可以去豆瓣看看咯。另外，从网络中也可以学习到许多的知识，例如：从我这个交互扯淡博客Uxredesing.com中你就可以学到些扯淡的技巧。</p>
<p>然后就是在工作中的实战技巧了，在工作中取得知识与经验是最宝贵的了。如果你已经步入交互设计师的门槛，掌握了一些基础知识，平时经验积累与交互技巧方法的总结就显得格外的重要。保持住平稳的心态，做好随时被challange的准备，用你的专业知识来证明你的专业性，用你的专业说服力告诉那些自以为是的家伙：你才是真正的专家。</p>
<p>做交互设计：</p>
<p>首先，要保持自信，相信自己。(如果表面上不够自信，请在不太臭的WC面对镜子深吸一口气，对暗暗提示。要记住，如果你没有自信自然无法说服对方采纳你的方案了)</p>
<p>多看，多用，多研究用户体验好的网站(别告诉我你没使用过amazon.com、yahoo.com噢，这么基本的网站都不去，作为个专业交互设计师你就不觉得缺钙了吗？)；</p>
<p>将之前做的设计搬出来，思考是否可以有更好的改进(反正是自己看，丢丑又何方？)；</p>
<p>另外，我自己整理出点技能，希望对你能有帮助：</p>
<p>创建人物角色能力：任务角色啦，这个都不知道就别称交互设计师了；</p>
<p>竞争对手分析能力：分析你网站的竞争对手；</p>
<p>设计流程图能力：这个也很重要的，没有流程那来的线框图；</p>
<p>设计线框图能力：这个就是传说中的交付物了；</p>
<p>提案表达能力：初稿设计好给需求方，并解释给需求方的能力，并汇总收集与讨论的结果，继续改进方案；</p>
<p>……</p>
<p>Ok，我所知道的就是这些，希望能对大家有所帮助。同时我也在摸索提高能力的过程当中，欢迎与我探讨。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/interaction/487.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>简历中的交互设计</title>
		<link>http://www.iamued.com/interaction/465.html</link>
		<comments>http://www.iamued.com/interaction/465.html#comments</comments>
		<pubDate>Sun, 08 Nov 2009 11:26:16 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[简历]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=465</guid>
		<description><![CDATA[每年的10月和11月是各大公司校园招聘的高峰期，今天没事的时候在同事收到的一箱子简历里面翻了一会，突然意识到，其实书写求职简历的过程，就是一种典型的交互设计过程。 我们一般所说的交互设计，都是指用户通过软件等手段与机器之间的交互，这从交互设计的前身“Soft Face”这个名字中，或许就可以窥知一二。但是事实上，交互设计在生活中是无处不在的。对于人机交互来说，用户需要通过设计师所设计的用户界面(UI) 来与机器交互，UI的好坏直接影响着用户体验。同样，作为一个求职者，他们所面对的“用户”，实际上就是公司的HR，而求职简历这薄薄的两张纸，就是求职 者的UI，而这个“UI”的好还则直接决定了其是否能够得到面试机会。本文试图从交互设计的角度来探讨一下如何书写求职简历（因为校园招聘中的简历问题比较明显，本文以校园招聘为例）。   首先，在进行交互设计之前，设计师必须对于该产品所面向的用户有足够的了解，最好对于他们的行为也能够比较深刻的理解。对于“HR”这种用户来说， 他们每天要从几百几千份简历中筛选出比较靠谱的那一部分，然后通知面试官（一般是欲招人部门的相关负责人，工程师等）安排面试。上面这句话中有两个关键 点，一个是“几百几千份”，另一个是“靠谱”。由此我们可以得到此类用户的两个比较明显的行为： 1、提取信息的方式应该是scan，而非reading。 简历数量的众多决定了筛选简历的人只能够采用scan即浏览的方式来提取信息，而无法使用reading即阅读的方式。事实上大部分简历只能够在筛选者眼前展示10-20秒，部分交互做得特别差劲的简历，可能只有4秒。 2、看简历的人会努力搜索简历中符合该职位要求的关键点，然后简略查看其内容，并做判断。 HR的任务是帮助公司寻找适合于某职位的人才，他们只关心简历上能够引起他们兴趣的内容。并且，他们需要把这些内容提取出来。 到此为止，我们已经对用户有了简单的大体上的了解。 针对以上的两种主要用户行为，我们不难分析得出相应的策略： 1、我们应该把简历设计成适合快速扫描的形式。 2、对于在简历上展示的内容，我们应该做到符合招聘条件的内容详细写，与招聘条件相关的内容有选择的、简略的写，而与招聘条件无关的内容坚决不写。对方要什么，我们给什么。 3、用人单位不仅仅关心一个人做过什么，更重要的是，关心这个人在做过的项目中起到了哪些作用，为项目的成功做了哪些事情（这样才能确定此人是否适合该公司，是否“靠谱”）。所以，应该将自己在重点项目中所起到的作用明确的表达出来。 4、我们应该引导HR尽量高效、轻松的完成筛选工作。提升 “用户体验”。 那么，我们目前的产品(简历)又是什么样的情况呢？下面展示一份我看过的，真实的求职简历，并作为反面教材(里面涉及到个人信息的部分是我编的)： 这是某高校统一发放给毕业生的简历模板，打印在A4纸上共两页。这份简历中存在着诸多明显的问题，我们来一一列举： 首先，一般情况下简历第一页的前2/3部分被认为是简历的黄金区域。因为这一部分将是首先进入HR视野的部分，如果这一部分没有办法跟HR产生良好 的交互，那么可能对方根本不会去翻看第二页。而这份简历第一页的大部分空间被无用的个人信息和无聊的“主修课程”所占据。可以说，在这些部分，简历筛选者 无法获得任何有用的信息。下方是该同学的一些工作经验和实习经验，但是基本上没有做任何分类。显然，这样并不能够提高用户scan的效率。 其次，在简历的最上方印有该高校的logo，而这个学校只是北方的一所三流大学，在省内的名气并不怎么高，而且很多外省的用人单位甚至根本没听说过。但它却占据了简历中最宝贵的空间。 第三，求职意向中的三个职位的工作内容是差不多的。归纳起来，该同学想要寻求的是一份偏向于视觉的WUI设计工作。 然后，在简历的第二页基本上就看不到有用的信息。 在“计算机水平”一栏中该同学填写了“通过国二VF语言考试”，对计算机比较了解的朋友们应该知道VF是一种早已没有人在用的数据库软件，并且它与 WUI设计无关，甚至与Web无关。并且该同学想要应聘的公司主要应该是网络公司或者软件公司，这类公司在技术上一般是很强的，而“国二”这种考试，在这 样的公司里，显然是没有任何说服力的——即使是作为一个非技术人员。 然后，获奖情况中该同学列举了他在大学里获得过的全部奖项。光是奖学金就写了近一行。而这些奖项中，有多少是跟“偏向于视觉的WUI设计工作”相关的呢？ 在然后，下面的“自我评价”中的内容空洞，基本上没有传达出任何有效的，吸引人的信息。而再下方的“院系评价”和“学校毕业生就业主管部门意见”中的内容，则更少，更有官腔。甚至只有“同意推荐”这么4个字。而这两部分却占据了第二页一半的面积。 而这位同学的情况，在他所投简历的公司来看，基本上应该在应届生中处于中等偏下的水平，即非名校毕业，专业相关度较高，有一些社会实践经验和项目经验，但无“名企实习经验”。大学期间学习优良，在一些评选及比赛中取得过名次，也有一两项看起来稍微不错的奖励和项目。 “产品”分析完了，我们开始对其进行设计。 我在该同学想要应聘的公司网站上，找到了该公司对于WUI设计师职位的要求如下： 1、计算机、美术、设计类专业本科及以上学历，拥有一定的设计理论知识和优秀的用户界面设计能力，对以人为本的设计理念有深入的理解； 2、熟练使用Photoshop、Illustrator等设计软件； 3、了解网页前端技术（如CSS和HTML）者优先； 4、良好的沟通能力和团队协作精神，能承受高强度的工作压力； 5、请提供作品 以上这些要求已经比较准确的传达出了公司对于人才的需求。那么针对这些信息，我们对简历进行以下修改： 1、结构上，从该职位的要求以及该同学的实际情况出发，设置“个人信息”、“任职情况及社会实践”、“项目经验”、“相关技能”、“获奖及认证”和“教育背景”6个项目，并按先后顺序排列。 2、删除学校logo和“个人简历”四个字（不会有人不知道你的这两张纸上面印的是个人简历），以便于为“黄金地段”腾出更多的空间。 3、个人信息只写姓名和联系方式，求职意向保留，学校和专业部分移动到“教育背景”中，并放到简历最后，由于学校没什么知名度，所以此项只写一句 话，用以传达“学历达到要求”这个信息，至于民族、爱好什么的全部删除，相信一个正常的面试官不会因为某人爱好唱歌（只是爱好而已，唱得还不一定好）而将 其录取为WUI设计师。 4、主修课程全部删除。用人单位关心的是应聘者会什么、能做什么，而非“学过什么”。况且现在的“主修课程”中堆砌着诸多的与应聘职位无关的课程。要想表达“综合素质”的概念，可以在“任职情况及社会实践”中通过事实来说明，不必告诉对方自己曾经学过哲学。 5、“实践与实习”项改为“任职情况及社会实践”，挑选有代表性的，重要的经历来写。重点写自己跟WUI设计有关的经历。 6、添加“项目经验”栏目，在原“实践与实习”的多个“设计并制作XXX网站”中挑选一些有说服力的项目来进行重点叙述，不但要说明自己做过的项目名称，还要说明自己在项目中起到的作用。 7、“通过英语四级”移动到“获奖及认证”中，“外语水平”一项删除。“计算机水平”改为“相关技能”，着重叙述与WUI设计有关的技能，以及能够让自己被“优先考虑”的跟前端开发有关的技能。 8、“获奖及认证”项目简写，坚决删除类似“寝室设计大赛优秀奖”这类跟所申请职位毫无关系的项目。最好能够让HR只扫一眼就能够看清楚。 9、“自我评价”及后面的内容全部删除。这是典型的垃圾信息。 10、为了提升对HR的用户体验，将简历中的关键词，诸如“WUI”、“div+css”等加粗，不断向HR暗示自己对于该职位的适合程度。同时所有信息应以列表形式传达，并分项叙述，有利于检索。 按照以上原则修改后，我们得到了用户体验明显提升的新版本简历： [...]]]></description>
			<content:encoded><![CDATA[<p>每年的10月和11月是各大公司校园招聘的高峰期，今天没事的时候在同事收到的一箱子简历里面翻了一会，突然意识到，其实书写求职简历的过程，就是一种典型的交互设计过程。</p>
<p>我们一般所说的交互设计，都是指用户通过软件等手段与机器之间的交互，这从交互设计的前身“Soft Face”这个名字中，或许就可以窥知一二。但是事实上，交互设计在生活中是无处不在的。对于人机交互来说，用户需要通过设计师所设计的用户界面(UI) 来与机器交互，UI的好坏直接影响着用户体验。同样，作为一个求职者，他们所面对的“用户”，实际上就是公司的HR，而求职简历这薄薄的两张纸，就是求职 者的UI，而这个“UI”的好还则直接决定了其是否能够得到面试机会。本文试图从交互设计的角度来探讨一下如何书写求职简历（因为校园招聘中的简历问题比较明显，本文以校园招聘为例）。</p>
<p><img title="r3" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/11/1926183Sx.jpg" alt="r3" width="522" height="212" /></p>
<p><span id="more-167"> <span id="more-465"></span></span></p>
<p>首先，在进行交互设计之前，设计师必须对于该产品所面向的用户有足够的了解，最好对于他们的行为也能够比较深刻的理解。对于“HR”这种用户来说， 他们每天要从几百几千份简历中筛选出比较靠谱的那一部分，然后通知面试官（一般是欲招人部门的相关负责人，工程师等）安排面试。上面这句话中有两个关键 点，一个是“几百几千份”，另一个是“靠谱”。由此我们可以得到此类用户的两个比较明显的行为：</p>
<p>1、提取信息的方式应该是scan，而非reading。</p>
<p>简历数量的众多决定了筛选简历的人只能够采用scan即浏览的方式来提取信息，而无法使用reading即阅读的方式。事实上大部分简历只能够在筛选者眼前展示10-20秒，部分交互做得特别差劲的简历，可能只有4秒。</p>
<p>2、看简历的人会努力搜索简历中符合该职位要求的关键点，然后简略查看其内容，并做判断。</p>
<p>HR的任务是帮助公司寻找适合于某职位的人才，他们只关心简历上能够引起他们兴趣的内容。并且，他们需要把这些内容提取出来。</p>
<p>到此为止，我们已经对用户有了简单的大体上的了解。</p>
<p>针对以上的两种主要用户行为，我们不难分析得出相应的策略：</p>
<p>1、我们应该把简历设计成适合快速扫描的形式。</p>
<p>2、对于在简历上展示的内容，我们应该做到符合招聘条件的内容详细写，与招聘条件相关的内容有选择的、简略的写，而与招聘条件无关的内容坚决不写。对方要什么，我们给什么。</p>
<p>3、用人单位不仅仅关心一个人做过什么，更重要的是，关心这个人在做过的项目中起到了哪些作用，为项目的成功做了哪些事情（这样才能确定此人是否适合该公司，是否“靠谱”）。所以，应该将自己在重点项目中所起到的作用明确的表达出来。</p>
<p>4、我们应该引导HR尽量高效、轻松的完成筛选工作。提升 “用户体验”。</p>
<p>那么，我们目前的产品(简历)又是什么样的情况呢？下面展示一份我看过的，真实的求职简历，并作为反面教材(里面涉及到个人信息的部分是我编的)：</p>
<p><img title="r1" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/11/192626lrY.jpg" alt="r1" width="595" height="842" /></p>
<p><img title="r2" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/11/192629EjJ.jpg" alt="r2" width="595" height="842" /></p>
<p>这是某高校统一发放给毕业生的简历模板，打印在A4纸上共两页。这份简历中存在着诸多明显的问题，我们来一一列举：</p>
<p>首先，一般情况下简历第一页的前2/3部分被认为是简历的黄金区域。因为这一部分将是首先进入HR视野的部分，如果这一部分没有办法跟HR产生良好 的交互，那么可能对方根本不会去翻看第二页。而这份简历第一页的大部分空间被无用的个人信息和无聊的“主修课程”所占据。可以说，在这些部分，简历筛选者 无法获得任何有用的信息。下方是该同学的一些工作经验和实习经验，但是基本上没有做任何分类。显然，这样并不能够提高用户scan的效率。</p>
<p>其次，在简历的最上方印有该高校的logo，而这个学校只是北方的一所三流大学，在省内的名气并不怎么高，而且很多外省的用人单位甚至根本没听说过。但它却占据了简历中最宝贵的空间。</p>
<p>第三，求职意向中的三个职位的工作内容是差不多的。归纳起来，该同学想要寻求的是一份偏向于视觉的WUI设计工作。</p>
<p>然后，在简历的第二页基本上就看不到有用的信息。</p>
<p>在“计算机水平”一栏中该同学填写了“通过国二VF语言考试”，对计算机比较了解的朋友们应该知道VF是一种早已没有人在用的数据库软件，并且它与 WUI设计无关，甚至与Web无关。并且该同学想要应聘的公司主要应该是网络公司或者软件公司，这类公司在技术上一般是很强的，而“国二”这种考试，在这 样的公司里，显然是没有任何说服力的——即使是作为一个非技术人员。</p>
<p>然后，获奖情况中该同学列举了他在大学里获得过的全部奖项。光是奖学金就写了近一行。而这些奖项中，有多少是跟“偏向于视觉的WUI设计工作”相关的呢？</p>
<p>在然后，下面的“自我评价”中的内容空洞，基本上没有传达出任何有效的，吸引人的信息。而再下方的“院系评价”和“学校毕业生就业主管部门意见”中的内容，则更少，更有官腔。甚至只有“同意推荐”这么4个字。而这两部分却占据了第二页一半的面积。</p>
<p>而这位同学的情况，在他所投简历的公司来看，基本上应该在应届生中处于中等偏下的水平，即非名校毕业，专业相关度较高，有一些社会实践经验和项目经验，但无“名企实习经验”。大学期间学习优良，在一些评选及比赛中取得过名次，也有一两项看起来稍微不错的奖励和项目。</p>
<p>“产品”分析完了，我们开始对其进行设计。</p>
<p>我在该同学想要应聘的公司网站上，找到了该公司对于WUI设计师职位的要求如下：</p>
<div>
<p>1、计算机、美术、设计类专业本科及以上学历，拥有一定的设计理论知识和优秀的用户界面设计能力，对以人为本的设计理念有深入的理解；</p>
<p>2、熟练使用Photoshop、Illustrator等设计软件；</p>
<p>3、了解网页前端技术（如CSS和HTML）者优先；</p>
<p>4、良好的沟通能力和团队协作精神，能承受高强度的工作压力；</p>
<p>5、请提供作品</p></div>
<p>以上这些要求已经比较准确的传达出了公司对于人才的需求。那么针对这些信息，我们对简历进行以下修改：</p>
<p>1、结构上，从该职位的要求以及该同学的实际情况出发，设置“个人信息”、“任职情况及社会实践”、“项目经验”、“相关技能”、“获奖及认证”和“教育背景”6个项目，并按先后顺序排列。</p>
<p>2、删除学校logo和“个人简历”四个字（不会有人不知道你的这两张纸上面印的是个人简历），以便于为“黄金地段”腾出更多的空间。</p>
<p>3、个人信息只写姓名和联系方式，求职意向保留，学校和专业部分移动到“教育背景”中，并放到简历最后，由于学校没什么知名度，所以此项只写一句 话，用以传达“学历达到要求”这个信息，至于民族、爱好什么的全部删除，相信一个正常的面试官不会因为某人爱好唱歌（只是爱好而已，唱得还不一定好）而将 其录取为WUI设计师。</p>
<p>4、主修课程全部删除。用人单位关心的是应聘者会什么、能做什么，而非“学过什么”。况且现在的“主修课程”中堆砌着诸多的与应聘职位无关的课程。要想表达“综合素质”的概念，可以在“任职情况及社会实践”中通过事实来说明，不必告诉对方自己曾经学过哲学。</p>
<p>5、“实践与实习”项改为“任职情况及社会实践”，挑选有代表性的，重要的经历来写。重点写自己跟WUI设计有关的经历。</p>
<p>6、添加“项目经验”栏目，在原“实践与实习”的多个“设计并制作XXX网站”中挑选一些有说服力的项目来进行重点叙述，不但要说明自己做过的项目名称，还要说明自己在项目中起到的作用。</p>
<p>7、“通过英语四级”移动到“获奖及认证”中，“外语水平”一项删除。“计算机水平”改为“相关技能”，着重叙述与WUI设计有关的技能，以及能够让自己被“优先考虑”的跟前端开发有关的技能。</p>
<p>8、“获奖及认证”项目简写，坚决删除类似“寝室设计大赛优秀奖”这类跟所申请职位毫无关系的项目。最好能够让HR只扫一眼就能够看清楚。</p>
<p>9、“自我评价”及后面的内容全部删除。这是典型的垃圾信息。</p>
<p>10、为了提升对HR的用户体验，将简历中的关键词，诸如“WUI”、“div+css”等加粗，不断向HR暗示自己对于该职位的适合程度。同时所有信息应以列表形式传达，并分项叙述，有利于检索。</p>
<p>按照以上原则修改后，我们得到了用户体验明显提升的新版本简历：</p>
<p><img title="r4" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/11/192635hmN.jpg" alt="r4" width="595" height="842" /></p>
<p><img title="r5" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/11/192637ACF.jpg" alt="r5" width="595" height="842" /></p>
<p>从以上过程中我们不难发现，其实交互设计和用户体验这两个概念是渗透到我们生活中的方方面面的。只要认真观察和思考，生活中处处都是设计。而对于基于Web的交互设计师来说，或许很多的灵感都是源于生活的。</p>
<p>最后告诉大家一个消息，这份简历的主人，在去年的校园招聘中成功获得了包括腾讯、百度、搜狐、新浪、阿里巴巴和千橡互动在内的诸多公司的笔试和面试通知。并最终获得了其中两家公司的offer。</p>
<p>原文链接：<a href="http://www.hplus.org.cn/blog/2009/10/167">http://www.hplus.org.cn/blog/2009/10/167</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/interaction/465.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

