<?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>紫枫印象 &#187; 用户体验设计(UED)</title>
	<atom:link href="http://www.86ue.com/archives/category/ued/feed" rel="self" type="application/rss+xml" />
	<link>http://www.86ue.com</link>
	<description>UED web2.0 前端技术 用户体验 SEO 80后</description>
	<lastBuildDate>Sun, 14 Mar 2010 14:02:08 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>UI在中国</title>
		<link>http://www.86ue.com/archives/771</link>
		<comments>http://www.86ue.com/archives/771#comments</comments>
		<pubDate>Tue, 09 Feb 2010 07:02:25 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[用户体验设计(UED)]]></category>
		<category><![CDATA[设计杂谈]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[用户界面]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=771</guid>
		<description><![CDATA[UI全称User Interface，中文叫“用户界面”。


2000年传入国内，国内最早专业从事UI的公司还是我们的民族软件——金山，据说在2000年已成立人机界面组，虽然只有2个人。金山软件的UI 团队是业内名副其实的黄埔军校，培养了如今江湖上整整一代的设计领袖，并且他们出的作品也深远影响了国产软件的用户体验整体水准。也许早期的金山软件用户们还记得，随后WPS和金山毒霸的界面设计在整个大环境内首屈一指。

 

2001年2月出版的《软件创新之路》中文版，在技术专著角度强调了交互与界面的重要性，为UI概念被广泛认可做好了铺垫。作者叫Alan Cooper，眼熟吧？没错，这本书就是后来2006年3月出版的《交互设计之路》的前辈版本。

 

2001年到2003年之间，国内大小公司相继设立UI职位，同期，不少平面设计和网页设计从业者也开始尝试转行做UI。因为当时从事web design非常不景气，整体水平低下，市场环境糟糕。

 

2003年随着ChinaUI论坛的上线，此概念开始在数字设计领域声名鹊起。如同ChinaUI网站最早的title“欢迎来到中国第一个UI设计网站”，但什么是UI？我估计当时没几个人清楚。同年5月，由金山转会腾讯的唐沐主导了QQ发展史上革命性的界面升级。耳目一新的QQ界面给粉丝们带来了极大惊喜，在外观和人性化方面做了较大改善。
]]></description>
			<content:encoded><![CDATA[<p>UI全称User Interface，中文叫“用户界面”。</p>
<p>2000年传入国内，国内最早专业从事UI的公司还是我们的民族软件——金山，据说在2000年已成立人机界面组，虽然只有2个人。金山软件的UI 团队是业内名副其实的黄埔军校，培养了如今江湖上整整一代的设计领袖，并且他们出的作品也深远影响了国产软件的用户体验整体水准。也许早期的金山软件用户们还记得，随后WPS和金山毒霸的界面设计在整个大环境内首屈一指。</p>
<p>2001年2月出版的《软件创新之路》中文版，在技术专著角度强调了交互与界面的重要性，为UI概念被广泛认可做好了铺垫。作者叫Alan Cooper，眼熟吧？没错，这本书就是后来2006年3月出版的《交互设计之路》的前辈版本。</p>
<p>2001年到2003年之间，国内大小公司相继设立UI职位，同期，不少平面设计和网页设计从业者也开始尝试转行做UI。因为当时从事web design非常不景气，整体水平低下，市场环境糟糕。</p>
<p>2003年随着ChinaUI论坛的上线，此概念开始在数字设计领域声名鹊起。如同ChinaUI网站最早的title“欢迎来到中国第一个UI设计网站”，但什么是UI？我估计当时没几个人清楚。同年5月，由金山转会腾讯的唐沐主导了QQ发展史上革命性的界面升级。耳目一新的QQ界面给粉丝们带来了极大惊喜，在外观和人性化方面做了较大改善。</p>
<p>此后，以UI为主题的设计类网站层出不穷。我当时对UI其实并不太感兴趣，认为与我从事的是两个路子，但每天看到、听到的讨论又不得不去了解相关知识。从概念角度推敲，当时所有软件UI从业者所做的，都应该是Graphical user interface，简称GUI，仅仅只是UI的一个分支。所以，我后来特纳闷，为什么没有Web user interface？也可以简称WUI。</p>
<p><a href="http://en.wikipedia.org/wiki/Graphical_user_interface">http://en.wikipedia.org/wiki/Graphical_user_interface</a></p>
<p>A graphical user interface or GUI is a type of user interface item that allows people to interact with programs in more ways than typing such as computers; hand-held devices such as MP3 Players, Portable Media Players or Gaming devices; household appliances and office equipment with images rather than text commands.</p>
<p>首先要肯定概念推广对业界整体实力的推动作用，但因对概念理解的不清晰，甚至误导，绝大多数同行认为“UI等于网页设计”，更有人认为“UI是专业的网页设计”。很大程度上影响了当时的web design主流审美，当时所谓好的“网页”设计，要么是一幅全由图片拼接的平面大作，要么就是由各种华丽的UI控件堆砌而成软件皮肤，丝毫看不到任何 web design的技巧和内涵。</p>
<p>注意，软件的UI设计与网页的UI设计完全是两套知识体系。对于软件UI来说，设计师能够操作到的仅仅是视觉的表现层，所以从事软件UI的基本都是视觉设计师；而网站UI在表现原理上有很大区别，不是视觉设计师天马行空想象就能做，也不是所见即所得做出来的样子马上就可以用在页面上。关键网页表现层还有个Front-End的概念，所有界面控件表现都通过代码来落实，这是web最终用户体验的质量总控。</p>
<p>针对互联网产品而言，当时有同行认为真正的UI专业流程，应该是用户研究、需求分析、架构设计、交互设计、可用性测试整个过程。我认为错的很离谱，因为对概念层级理解的模糊，导致对整个体系的认识存在缺陷。以点盖面，以偏盖全，后来的“交互设计”也走入此误区。</p>
<p><a href="http://mashable.com/2009/01/09/user-experience-design/">http://mashable.com/2009/01/09/user-experience-design/</a></p>
<p>It’s not uncommon to confuse “user experience” with “user interface” — after all it’s a big part of what users interact with while experiencing digital products and services. But the UI is just one piece of the puzzle.</p>
<p>就我目前的实践经验来看，比较认同《用户体验的要素》作者的总结——界面设计只是框架层的一部分，与信息设计、导航设计并列组成用户真正能够看到和使用的原型。Web设计中典型的Web UI是表单，几乎每个系统、平台都有，也是处理用户交互行为最容易出问题的难点。</p>
<p>GUI背景设计师做网站，有很显著的GUI风格，我观察中外很多设计师作品得出的结论。因为他们对web构建原理的认识不够，还有本身产出技能上的习惯差异所致。当然，也有个中高手，能够融洽的处理两者差异。总体上来看，因为GUI与WUI各专业体系纵深发展的日趋分化，顶尖GUI高手一般只专注于 GUI领域。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/771/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>视觉注意力—解剖设计的根源</title>
		<link>http://www.86ue.com/archives/744</link>
		<comments>http://www.86ue.com/archives/744#comments</comments>
		<pubDate>Sat, 23 Jan 2010 15:39:34 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[用户体验设计(UED)]]></category>
		<category><![CDATA[视觉设计]]></category>
		<category><![CDATA[视觉注意力]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=744</guid>
		<description><![CDATA[<a href="http://www.86ue.com/wp-content/uploads/2010/01/KBXYcfdz9G8YcDs.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/KBXYcfdz9G8YcDs-e1264260894859.jpg" alt="" title="KBXYcfdz9G8YcDs" width="509" height="248" class="aligncenter size-full wp-image-748" /></a>

物质世界客观存在，而人的“视觉成像”是对当前世界的“唯心”重建。这种重建基于个人“经验”、“感知”和“集体意识”。最初科学家认为人类通过视觉被动获取周围世界的全部图像信息而建立个人的视觉资料库，近10年来的研究表明捕获“全部图像信息”只是个传说，其中由心理学家Daniel T. Levin 和Daniel J. Simons建立的实验“真实世界”客观说明一个事实：大脑利用眼球1/10秒的速度获取重要信息，而这些信息将服务于正在进行的核心任务。举个例子，你的大脑向眼球发出指令阅读这段文字，而让你忽略了文章右侧导航的其他信息。

<a href="http://www.86ue.com/wp-content/uploads/2010/01/SuhA55WrD6vcwqK.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/SuhA55WrD6vcwqK-e1264260944184.jpg" alt="" title="SuhA55WrD6vcwqK" width="509" height="248" class="aligncenter size-full wp-image-749" /></a>

左图为相机拍摄效果，右图为人类视觉关注效果

正因为有如此特性，研究“视觉注意力”变得尤为重要。如何让用户更容易发现我们的产品？如何让商家更有效的广告？如何让我们的网页和软件更容易触动用户，更有萌点？… 在深入问题之前先简单了解三个概念。]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/KBXYcfdz9G8YcDs.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/KBXYcfdz9G8YcDs-e1264260894859.jpg" alt="" title="KBXYcfdz9G8YcDs" width="509" height="248" class="aligncenter size-full wp-image-748" /></a></p>
<p>物质世界客观存在，而人的“视觉成像”是对当前世界的“唯心”重建。这种重建基于个人“经验”、“感知”和“集体意识”。最初科学家认为人类通过视觉被动获取周围世界的全部图像信息而建立个人的视觉资料库，近10年来的研究表明捕获“全部图像信息”只是个传说，其中由心理学家Daniel T. Levin 和Daniel J. Simons建立的实验“真实世界”客观说明一个事实：大脑利用眼球1/10秒的速度获取重要信息，而这些信息将服务于正在进行的核心任务。举个例子，你的大脑向眼球发出指令阅读这段文字，而让你忽略了文章右侧导航的其他信息。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/SuhA55WrD6vcwqK.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/SuhA55WrD6vcwqK-e1264260944184.jpg" alt="" title="SuhA55WrD6vcwqK" width="509" height="248" class="aligncenter size-full wp-image-749" /></a></p>
<p>左图为相机拍摄效果，右图为人类视觉关注效果</p>
<p>正因为有如此特性，研究“视觉注意力”变得尤为重要。如何让用户更容易发现我们的产品？如何让商家更有效的广告？如何让我们的网页和软件更容易触动用户，更有萌点？… 在深入问题之前先简单了解三个概念。</p>
<p>　　视觉信息处理流程</p>
<p>　　人脑皮质有140亿-160亿个神经元，其中常用的不到1/10，而五感瓜分到的神经元则更少，所以在睁开眼睛，有大量视觉信息输入的时候做有机筛选变得非常有必要，这也是漫长进化的优化结果。某些医学著作提到，视觉信息处理需经24个以上流程，Colin Ware又将其归纳为三个阶段，大致是： 一、基本信息提取，并行处理多个特征； 二、根据目的需要，筛选关注内容； 三、保存关键目标，联想相关描述。（详细见《Visual Thinking For Design》）</p>
<p>　　被动关注和主动关注</p>
<p>　　“被动关注”又称“刺激引发”，按照Colin Ware归纳的三阶模型可以理解为：最基本的视觉元素，颜色、位置、顺序、轮廓等交织形成 -> 过滤多余信息，有序构建复杂图像、塑造三维模型等 -> 确认信息对象，并从“经验”获取更多其他信息来描述对象。可参考示意图：</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/1DSp71VJUaPXfs1.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/1DSp71VJUaPXfs1-e1264261027116.jpg" alt="" title="1DSp71VJUaPXfs1" width="509" height="248" class="aligncenter size-full wp-image-745" /></a></p>
<p>例如网页右下角的弹出广告，我们眼睛先是看到右下角一个框，很多颜色在跳动，然后看清楚是一个人在跳舞，最后才是确认出原来是**公司的广告。视觉信息是一种生物电流脉冲信号，眼球神经被动感知事件传送到大脑，大脑主动确认事件后回馈，形成一个循环过程。但是“关注”事件并不一定由眼球发起，那种由大脑发起的“主动关注”也称“概念引发”。比如打开下载网页，我们去寻找“下载按钮”，就是“主动关注”的典型例子。</p>
<p>　　此类概念还有很多，有兴趣研究的朋友可以找几本医学著作或视觉理论自己研读，我这里也不班门弄斧了。下面回归正题，如何让设计更容易吸引人？或者说影响视觉注意力促成视觉干扰的因素有哪些？</p>
<p>　　我们来看一下刚刚总结的三个阶段：“最基本的视觉元素、颜色、位置、顺序、轮廓等交织形成 -> 过滤多余信息，有序构建复杂图像、塑造三维模型等 -> 确认信息对象，并从‘经验’获取更多其他信息来描述对象”（主动关注则反行之）。可以发现一个问题，当第一阶段获取信息越少时，第二阶段的过滤和构建事件则越快，到达第三阶段形成“概念”的速度也更快，假设以1/10秒的速度获取一次信息，则在一秒钟时间里可重复10次，这样意味着可以对获取目标有更深刻的印象。我举两个例子。MUJI的设计崇尚简约实用、质朴又充满创意，统一的视觉标准和无装饰反而让用户更容易记住这个品牌。公车站灯箱广告也是如此，从公车进站到离开往往不过几十秒，在车上的我根本没有时间看完所有信息，这时简洁的设计更具优势。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/3t9MopPHPnbiHMe.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/3t9MopPHPnbiHMe-e1264261073275.jpg" alt="" title="3t9MopPHPnbiHMe" width="511" height="248" class="aligncenter size-full wp-image-746" /></a></p>
<p>MUJI设计（图片来自MUJI网站）</p>
<p>那么，如果第一阶段必须有比较多的信息怎么办？目前我们的设计确实遇到这样的问题，有大量的信息需要集中在一小张图片上，这时无序堆砌信息是致命的。我们来看一下这种图片：</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/IBsJiaBxgPoiuJv.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/IBsJiaBxgPoiuJv-e1264261137757.jpg" alt="" title="IBsJiaBxgPoiuJv" width="509" height="299" class="aligncenter size-full wp-image-747" /></a></p>
<p>APPLE设计（图片来自apple网站）</p>
<p>同样是非常多的信息，但是没有杂乱，可以快速找到我所关注的内容，非关键元素并没有过分分散我的注意力。怎么做到的？请重新阅读那个梯形图。</p>
<p>　　是的，大脑从一开始就会对基础元素进行挑选，所以优化设计无非有两种方式：一、减少基础元素信息；二、帮“用户”大脑先整理一次基础元素信息。当信息量过多的时候，“被动关注”的用户往往会有“逃跑”心理（实在看不完-_-），这时候被“设计”过的基础信息会吸引用户继续关注或引导用户重点关注特定信息，以期达到商家推广或者我们希望用户进一步操作的目的。再说得浅显一点，出现大量信息的时候，可以通过色彩、构图、光线明暗、闪动、符号导向、增强大小对比等方式强调重点信息（详细做法可以参考一下CDC其他同事的文章）。也许你还会问：“主动关注”的用户是否就不存在注意力分散问题？？非也！回想一下大学上课的场景，我们在“主动关注”老师分享的知识时，心里是不是还常惦记着隔壁班的那个她（他）… 实际情况就是“主动关注”的用户比“被动关注”的用户更难伺候。具体分析得等以后有时间再续写了。</p>
<p>　　最后感谢Colin Ware，他的《Visual Thinking For Design》触发了我写本文的动机。也感谢大家耐着性子坚持看完这篇文章，希望在视觉理论基础上对大家有所帮助。</p>
<p>感谢：cdc.tencent.com 分享！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/744/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>交互设计-避免迷路</title>
		<link>http://www.86ue.com/archives/736</link>
		<comments>http://www.86ue.com/archives/736#comments</comments>
		<pubDate>Sat, 23 Jan 2010 15:14:18 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[用户体验设计(UED)]]></category>
		<category><![CDATA[避免迷路]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=736</guid>
		<description><![CDATA[<strong>任何位置都能明确“我在哪里？这里有什么？从这里能去哪里？” </strong>

小时候，童话故事都告诉我们，迷路可不是一件好事。那会伴随着困惑、沮丧、愤怒和恐惧。为了避免迷失方向，我们发明了各种导航工具，大到卫星定位系统，小到指南针，人类在这一事情上，极具创意。

在网站上迷失方向，虽然不是什么生死攸关的事，但会带来许多负面影响，如：用户体验下降、任务不能完成，用户流失等。我们可以通过良好的导航系统来避免这个情况发生。好的导航系统可以帮助人们找到在网站中的位置，并帮助他们制定更好的查询策略，增进对内容的理解。

 在制定解决方案前，先了解他们为什么会迷路：

1、  当人们不能理解信息时，会产生迷惑

2、  人们在查询过程中迷失，不知道下一步该做什么

3、  人们可能会在网站中失去方向感，无法回到以前的页面，甚至是首页

<a href="http://www.86ue.com/wp-content/uploads/2010/01/e09d0edeaba0227ad8a80b3f1a0a284f.jpeg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/e09d0edeaba0227ad8a80b3f1a0a284f-e1264259344968.jpeg" alt="" title="e09d0edeaba0227ad8a80b3f1a0a284f" width="510" height="685" class="aligncenter size-full wp-image-738" /></a>
图1

比如在图1的这个网站中游走，你容易陷入进退两难的境地。上图中，两个点击打开的页面，都没有导航信息，甚至没有任何离开当前页面的出口。 

4、  人们在在信息系统中偏离了方向，分散了注意力。人们因众多的、喧宾夺主的信息而偏离了主要任务。关于这一点，可以参考交互指南之<a href="http://www.86ue.com/archives/624">《突出重点，一目了然》</a>]]></description>
			<content:encoded><![CDATA[<p><strong>任何位置都能明确“我在哪里？这里有什么？从这里能去哪里？” </strong></p>
<p>小时候，童话故事都告诉我们，迷路可不是一件好事。那会伴随着困惑、沮丧、愤怒和恐惧。为了避免迷失方向，我们发明了各种导航工具，大到卫星定位系统，小到指南针，人类在这一事情上，极具创意。</p>
<p>在网站上迷失方向，虽然不是什么生死攸关的事，但会带来许多负面影响，如：用户体验下降、任务不能完成，用户流失等。我们可以通过良好的导航系统来避免这个情况发生。好的导航系统可以帮助人们找到在网站中的位置，并帮助他们制定更好的查询策略，增进对内容的理解。</p>
<p> 在制定解决方案前，先了解他们为什么会迷路：</p>
<p>1、  当人们不能理解信息时，会产生迷惑</p>
<p>2、  人们在查询过程中迷失，不知道下一步该做什么</p>
<p>3、  人们可能会在网站中失去方向感，无法回到以前的页面，甚至是首页</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/e09d0edeaba0227ad8a80b3f1a0a284f.jpeg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/e09d0edeaba0227ad8a80b3f1a0a284f-e1264259344968.jpeg" alt="" title="e09d0edeaba0227ad8a80b3f1a0a284f" width="510" height="685" class="aligncenter size-full wp-image-738" /></a><br />
图1</p>
<p>比如在图1的这个网站中游走，你容易陷入进退两难的境地。上图中，两个点击打开的页面，都没有导航信息，甚至没有任何离开当前页面的出口。 </p>
<p>4、  人们在在信息系统中偏离了方向，分散了注意力。人们因众多的、喧宾夺主的信息而偏离了主要任务。关于这一点，可以参考交互指南之<a href="http://www.86ue.com/archives/624">《突出重点，一目了然》</a></p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/6586e49e36ee7024b0002a6190c4d464.jpeg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/6586e49e36ee7024b0002a6190c4d464-e1264259504798.jpeg" alt="" title="6586e49e36ee7024b0002a6190c4d464" width="510" height="487" class="aligncenter size-full wp-image-740" /></a></p>
<p>图2</p>
<p>图2中的登录页面，可谓琳琅满目，信息的丰富程度毫不逊色于首页，难道设计者的目的，是希望用户放弃登录这个主要任务，去往“更重要”的地方吗？ </p>
<p>你也许会想，让用户不要迷路，不是非常简单的事情吗，我只要在所有页面中放入全局导航，使他们能在网站的核心内容之间移动。然后放入面包屑，让他们了解自己所处的位置，一切不就完事大吉了。 </p>
<p>但事实上果真如此吗？全局导航也许能帮助用户了解你网站的核心内容，但在具体的任务中，比如图3中的淘宝全局导航，如果放入在挑选商品或支付的页面中，恐怕非但不能指引用户，还会干扰到任务的完成。 </p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/f0bb8e0657b5429a9c7cd0a9bed1b750.jpeg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/f0bb8e0657b5429a9c7cd0a9bed1b750-e1264259569209.jpeg" alt="" title="f0bb8e0657b5429a9c7cd0a9bed1b750" width="508" height="130" class="aligncenter size-full wp-image-739" /></a></p>
<p>小心，别让自己陷入导航系统的过度设计中去。我们所要做的，是使用人物角色和场景作为参考，确定人物角色会选择的到达内容的最佳路线，而不是提供所有线路，更不需要将网站的全部结构复制到每个页面当中，造成页面信息负担。好的导航系统让人们感知不到它的存在。就好象在观看体育比赛时，裁判会做出许多正确的判定，而我们往往忽略他的存在，但一旦裁判员做出了一个错误的判决，就会引来场上观众的一片唏嘘。 </p>
<p>那么，我们应该怎样做，才能保证用户不在网站中迷失呢？ </p>
<p><strong>首先，我们要帮助用户定向，也就是确定“当前位置”。</strong></p>
<p>即便GPS卫星定位系统如此强大，它都必须随时在地图上标明我们的“当前位置”，才能真正为我们导航。而与现实世界不同的是，在网络世界中没有南北之分，也没有地理位置，我们必须利用导航系统的各种因素，来为用户创造可以判断当前位置的情景： </p>
<p>1、  重视网站的品牌信息</p>
<p>用户应该一直知道自己在浏览什么网站，将组织的名称、标识、和身份识别图放进网站的所有页面中，是达到此目的最显著的方法。 </p>
<p>2、  细节创建情景</p>
<p>我们可以通过页面内标题、页面文字，向用户传递当前位置的信息。浏览器标题和URL也是用户进行判断的依据。当前导航选项的高亮状态，也是常用的方式。 </p>
<p>3、  面包屑</p>
<p>“面包屑”也是标明当前网站位置的好工具。此外，面包屑还能传递网站结构信息，以及记录用户的访问足迹。 </p>
<p>4、  逃生舱模式</p>
<p>逃生舱模式也是帮助用户确定当前位置的一张底牌。也就是在网站的所有页面上设置统一的出口，无论什么时候，点击这里，都可以回到首页。大部分网站都把逃生舱设置在网站LOGO上，已经成为惯例了。 </p>
<p><strong>其次，根据用户需求，确定导航模式。</strong></p>
<p>用户的需求决定了我们应当放置何种导航链接。在不同类型的页面，用户所产生的问题不尽相同。我们需要预测这些问题，然后在设计导航的时候，也问自己同样的问题。 </p>
<p>一般情况下，用户会问：“我在哪里？”“我在这里能做什么？”“我还可以去哪里”；在电子商务网站，他们也许会问，我该如何找到想要的产品信息；具体在某一产品，他们也许会问：“我该如何联系客服人员？”“我到哪里可以找到相关产品”。 </p>
<p>我们所要做的，并不是想出所有可能发生的问题，相应的，我们也不可能把所有问题的答案都放入页面当中。这个时候，人物角色和场景，将发挥很重要的作用。对于不同的页面，弄清楚每个用户角色要去哪里，放置他们最需要的导航。比如：你的人物角色需要随时从一个栏目跳转到另一个栏目吗？如果是的话，请保证顶级栏目的链接一直可用。 </p>
<p>一旦确定了用户想要到达的内容，就要思考达到这一目标所需要的最简单、最容易的方案。比如在图4中，也许你的人物角色需要的，只是一个“下一组”链接。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/dad1d0faeeb7a1b54b24c733acb92266.jpeg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/dad1d0faeeb7a1b54b24c733acb92266-e1264259616957.jpeg" alt="" title="dad1d0faeeb7a1b54b24c733acb92266" width="510" height="531" class="aligncenter size-full wp-image-737" /></a></p>
<p>图4</p>
<p><strong> 最后，通过压力测试检验页面的导航能力。</strong></p>
<p>怎么样测试这个页面的导航能力呢?</p>
<p>（1） 随机从你的网站上选择一个页面；<br />
（2） 把这个页面打印成黑白的，并把页面头部的浏览器地址栏和下面的版权及公司信息部份去掉；<br />
（3） 假装你是第一次进入这个网站，并试图回答下面的问题(详见下列问题列表)；<br />
（4） 在一张纸上写下你所想的和答案；</p>
<p>问题列表:</p>
<p>1、这个页面是写什么内容的？ 在页面的标题处画一个方形或在纸上写清楚；</p>
<p>2、这是个什么样的网站? 把网站的名字用圈圈起来，或者自己写在纸上；</p>
<p>3、这个网站主要的版块是什么? 用x标识；</p>
<p>4、这个页面中主要的版块是什么？ 用三角形围着x来标识；</p>
<p>5、我怎么样到达这个网站的首页？ 用H标识；</p>
<p>6、我怎么样才能到达网站的顶部呢? T来标识；</p>
<p>7、每一组链接分别代表什么? 把页面上的主要链接圈出来，并写下标识；</p>
<p>D:用来标识更多，详细介绍及这个版块的子页面等；</p>
<p>N:在同一版块的其它相邻页面；</p>
<p>S:在同一网站上但不相邻的页面；</p>
<p>O:离开这个网站的页面；</p>
<p>8、你是通过怎么样的路径到达这个页面的呢？ 请写出你到达这个页面的路径，选择1>选择2>选择3…</p>
<p>让你们团队的其它成员或熟悉你网站的朋友也与你做同一试验，大家象跳伞一样的进入网站中的任意一个页面，然后把回答记在纸上，你就可以看出导航存在的问题。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/736/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>交互设计–标签明晰、有效</title>
		<link>http://www.86ue.com/archives/731</link>
		<comments>http://www.86ue.com/archives/731#comments</comments>
		<pubDate>Tue, 19 Jan 2010 16:50:34 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[用户体验设计(UED)]]></category>
		<category><![CDATA[标签]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=731</guid>
		<description><![CDATA[<a href="http://www.86ue.com/wp-content/uploads/2010/01/LePtDj0MsQwPTL9.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/LePtDj0MsQwPTL9-e1263973195462.jpg" alt="" title="LePtDj0MsQwPTL9" width="517" height="745" class="aligncenter size-full wp-image-734" /></a>

导航标签其实就是一种文字表达形式，我们用标签来代表网站上的各种分类信息。比如“联系我们”这个标签，代表的内容通常会包括公司名称、电话、地址、邮箱等信息。它可以是文字，也可以是图片。在英文里被称作“Label”，并不同于我们常说的“tag”标签云图。

说简单一点，我们就是要为网站的信息做分类，并为它们起一个通俗易懂的名字。这其实是任何人都可以做的一件事情，所以在导航设计流程中，它的重要性也常常被忽略。在设计产品时，常会听到这样的话：“这个栏目该叫什么名字？恩。。。先别管吧，把更重要的工作做了再说。”

然而，站在用户的角度，导航标签代表的是整个网站的内容、产品的结构，他们必须依靠标签的内容和组织方式来寻找网站中的信息。 

标签是访客行为的触发词，好的标签能吸引访客注意力，引导他们准确地找到信息。导航标签是访客预测目标页内容的重要依据，紧跟着它的就是导航中的关键点，网页的过渡，所以尤为重要，有歧义的标签逼人猜测它的意图，甚至让用户走错路或迷失方向。

比如这个网站的标签：

<a href="http://www.86ue.com/wp-content/uploads/2010/01/d2tWdfTi4vcNiKy.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/d2tWdfTi4vcNiKy-e1263973240897.jpg" alt="" title="d2tWdfTi4vcNiKy" width="510" height="163" class="aligncenter size-full wp-image-733" /></a>

这个网站的导航标签比较极端，首先标签之间的互斥性差，“淘宝潮流榜”、“爱物秀场”、“败家俱乐部”等，含义和实际内容都非常接近；其次是一致性差，标签的粒度不同、长度不同、语气不同，甚至还有英文出现，可谓五花八门；最糟糕的是，在标签的选择上，用了很多自作聪明的词语，如“爱骚谈资”，用户很难预测到链接背后是什么内容。

设计标签的过程，实际上就是对信息分类的过程，我们应当坚持MECE原则，也就是彼此独立、完全穷尽（Mutally Exclusive,Collectively Exhaustive）。这是一种客观的角度。你也可以站在主观的角度进行分类，但必须做到标准清晰、在目标群体中能获得充分共识。]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/LePtDj0MsQwPTL9.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/LePtDj0MsQwPTL9-e1263973195462.jpg" alt="" title="LePtDj0MsQwPTL9" width="517" height="745" class="aligncenter size-full wp-image-734" /></a></p>
<p>导航标签其实就是一种文字表达形式，我们用标签来代表网站上的各种分类信息。比如“联系我们”这个标签，代表的内容通常会包括公司名称、电话、地址、邮箱等信息。它可以是文字，也可以是图片。在英文里被称作“Label”，并不同于我们常说的“tag”标签云图。</p>
<p>说简单一点，我们就是要为网站的信息做分类，并为它们起一个通俗易懂的名字。这其实是任何人都可以做的一件事情，所以在导航设计流程中，它的重要性也常常被忽略。在设计产品时，常会听到这样的话：“这个栏目该叫什么名字？恩。。。先别管吧，把更重要的工作做了再说。”</p>
<p>然而，站在用户的角度，导航标签代表的是整个网站的内容、产品的结构，他们必须依靠标签的内容和组织方式来寻找网站中的信息。 </p>
<p>标签是访客行为的触发词，好的标签能吸引访客注意力，引导他们准确地找到信息。导航标签是访客预测目标页内容的重要依据，紧跟着它的就是导航中的关键点，网页的过渡，所以尤为重要，有歧义的标签逼人猜测它的意图，甚至让用户走错路或迷失方向。</p>
<p>比如这个网站的标签：</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/d2tWdfTi4vcNiKy.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/d2tWdfTi4vcNiKy-e1263973240897.jpg" alt="" title="d2tWdfTi4vcNiKy" width="510" height="163" class="aligncenter size-full wp-image-733" /></a></p>
<p>这个网站的导航标签比较极端，首先标签之间的互斥性差，“淘宝潮流榜”、“爱物秀场”、“败家俱乐部”等，含义和实际内容都非常接近；其次是一致性差，标签的粒度不同、长度不同、语气不同，甚至还有英文出现，可谓五花八门；最糟糕的是，在标签的选择上，用了很多自作聪明的词语，如“爱骚谈资”，用户很难预测到链接背后是什么内容。</p>
<p>设计标签的过程，实际上就是对信息分类的过程，我们应当坚持MECE原则，也就是彼此独立、完全穷尽（Mutally Exclusive,Collectively Exhaustive）。这是一种客观的角度。你也可以站在主观的角度进行分类，但必须做到标准清晰、在目标群体中能获得充分共识。</p>
<p>怎样的标签才能称作好的标签？它应该满足这几个方面：</p>
<p>1、好的标签，应该使用客户的语言，避免使用术语、行话、缩写词等用户难以理解的词语；</p>
<p>2、采用描述性的标签，避免使用“信息”、“细节”等过于宽泛的词语，尽量以某种方式加以限定,如：“给买家的信息”、“交易细节”。</p>
<p>3、标签之间的互斥性要强，尽可能地寻找差异化；</p>
<p>4、使用聚焦地标签，如，能把猫、狗、仓鼠等归纳为“宠物”，就不要用“动物”。</p>
<p>5、在粒度、语法、展现、用法等方面保持标签的一致性；</p>
<p>6、较长的标签往往比短标签更好，但并非越长越好，请尽量控制在12个字以内（这不是一个硬性规定）。</p>
<p>那我们设计标签时的词汇从何而来呢？是凭空想象出来的吗？当然不是啦，你可以从以下几个方面获得词汇：</p>
<p>1、你自己的网站或产品</p>
<p>你的网站和产品，在前期建设中，已经积累了很多标签。我们要做的，就是遍走整个网站，尽可能收集所有标签，然后用表格进行整理。</p>
<p>比如,我们在淘江湖改版时，对现有标签系统进行了一次整理，在表格的帮助下，比较容易看出现有标签系统存在的问题。</p>
<p>2、类似网站或竞争对手网站</p>
<p>如果你还没有网站和产品，那就要去同类型网站或竞争对手网站去收集标签了。相信这一做法，在互联网上，几乎是无师自通的。你可以通过对同类型网站标签系统的观察和比较，得到一些行业类比较通用的词汇，降低用户的理解成本。</p>
<p>你可以用同样的方式，收集同类型或竞争对手网站的标签，以供参考：</p>
<p>3、受控词表或叙词表</p>
<p>这是由图书馆员和特定领域的专家所建立的资源，这些词汇都是专家们付出很多努力的成果，表达方式精确且一致，而且这些资源通常是公开的。其实信息架构的很多理论，都来源于图书馆管理。</p>
<p>在完全没有依据的情况下，我们必须设计新的标签系统时，应该怎么办呢？</p>
<p>你可以对通过对内容进行分析、要求内容的产生者提供、或者象专家或你的直接用户求助。卡片分类法也是比较流行的一种做法。</p>
<p>卡片分类大概有4个步骤：</p>
<p>1、招募志愿者，大部分项目适当的卡片分类志愿者人数是 15 人，大型项目可以达到 30 人。个人觉得如果只是想对自己想法进行验证的话，5-10 人即可。</p>
<p>2、  准备卡片，写上你预先设定好的标签（这些标签必须是你们内部讨论或请教过专家的结果）。</p>
<p>3、  让用户进行分类，你可以观察用户的分类过程，以及对标签的理解。</p>
<p>4、  对卡片分类的结果进行分析，如果数据庞大，你可以借用软件进行分析，推荐工具有 IBM EZSort、CardZort、WebSort 等。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/731/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>如何精简用户界面</title>
		<link>http://www.86ue.com/archives/697</link>
		<comments>http://www.86ue.com/archives/697#comments</comments>
		<pubDate>Mon, 18 Jan 2010 09:01:51 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[用户体验设计(UED)]]></category>
		<category><![CDATA[用户界面]]></category>
		<category><![CDATA[精简]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=697</guid>
		<description><![CDATA[简洁、易用、友好、直观。这些词语经常被提及，但在执行过程中经常被遗忘。这是因为软件功能的复杂性所导致的。如何处理好软件的复杂功能往就可以决定它的命运。一个复杂的界面会让用户不知如何操作。如果，减少复杂的操作过程并精简操作界面，那该软件的用户体验就大大的提升了。


<strong>去除无用的功能</strong>

研究发现：80%的用户仅仅使用软件20%的功能。而那些没用的功能不仅浪费开发时间，也使得软件更加难以使用（这些功能对用户的阻碍作用大于有用价值）。软件试图尽力可以把任何事都做好。而一个成功的软件应是简练精干的，可单独智能化的解决单个问题。
精简的软件可通过削减功能得到。通过默认去除的方法判断一个功能是否有必要保留。将软件所有的功能进行真正的筛选。如果该功能不能帮助大多数用户完成日常的任务，那么可以将其排除在外。删除功能是艰难的，当整理完毕后看到用户顺畅的使用软件。你就会知道多么值得去做这件事情了。

<strong>隐藏复杂部分</strong>

如果实在无法去除某个复杂功能，那么就将其隐藏。通常情况下，不常使用的功能要比经常使用的功能占据更多的屏幕**。而优秀的界面应该确保最常用的功能在最显著的位置，将不常用的功能隐藏。

当我们重新设计CMS系统时，我们无法去除一个复杂的功能：批量编辑功能。在之前的版本里，在主屏幕上有一整排的批量编辑按钮。约占据了屏幕30%的区域，但我们发觉很少有人会用到此功能。我们的解决方法是，放置一个小图标并在旁边显示数值以示下拉列表里有几个选项。点击图标或数字则显示下拉列表。通过这种方式节省了大量的**，也不会干扰用户使用那些最基本的功能。

<a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1.png" alt="" title="minimizing-complexity-in-user-interfaces_1" width="260" height="173" class="aligncenter size-full wp-image-703" /></a>

<a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1_.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1_.png" alt="" title="minimizing-complexity-in-user-interfaces_1_" width="260" height="173" class="aligncenter size-full wp-image-704" /></a>

最小化视觉干扰我们已经讨论了通过去除与隐藏的方式降低界面复杂性的方法。但减少“视觉感知”的复杂性也是很重要的。最小化视觉干扰将使得界面看上去易于使用。减少视觉干扰的两个方法是：空白与对比。]]></description>
			<content:encoded><![CDATA[<p>简洁、易用、友好、直观。这些词语经常被提及，但在执行过程中经常被遗忘。这是因为软件功能的复杂性所导致的。如何处理好软件的复杂功能往就可以决定它的命运。一个复杂的界面会让用户不知如何操作。如果，减少复杂的操作过程并精简操作界面，那该软件的用户体验就大大的提升了。</p>
<p><strong>去除无用的功能</strong></p>
<p>研究发现：80%的用户仅仅使用软件20%的功能。而那些没用的功能不仅浪费开发时间，也使得软件更加难以使用（这些功能对用户的阻碍作用大于有用价值）。软件试图尽力可以把任何事都做好。而一个成功的软件应是简练精干的，可单独智能化的解决单个问题。<br />
精简的软件可通过削减功能得到。通过默认去除的方法判断一个功能是否有必要保留。将软件所有的功能进行真正的筛选。如果该功能不能帮助大多数用户完成日常的任务，那么可以将其排除在外。删除功能是艰难的，当整理完毕后看到用户顺畅的使用软件。你就会知道多么值得去做这件事情了。</p>
<p><strong>隐藏复杂部分</strong></p>
<p>如果实在无法去除某个复杂功能，那么就将其隐藏。通常情况下，不常使用的功能要比经常使用的功能占据更多的屏幕**。而优秀的界面应该确保最常用的功能在最显著的位置，将不常用的功能隐藏。</p>
<p>当我们重新设计CMS系统时，我们无法去除一个复杂的功能：批量编辑功能。在之前的版本里，在主屏幕上有一整排的批量编辑按钮。约占据了屏幕30%的区域，但我们发觉很少有人会用到此功能。我们的解决方法是，放置一个小图标并在旁边显示数值以示下拉列表里有几个选项。点击图标或数字则显示下拉列表。通过这种方式节省了大量的**，也不会干扰用户使用那些最基本的功能。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1.png" alt="" title="minimizing-complexity-in-user-interfaces_1" width="260" height="173" class="aligncenter size-full wp-image-703" /></a></p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1_.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_1_.png" alt="" title="minimizing-complexity-in-user-interfaces_1_" width="260" height="173" class="aligncenter size-full wp-image-704" /></a></p>
<p>最小化视觉干扰我们已经讨论了通过去除与隐藏的方式降低界面复杂性的方法。但减少“视觉感知”的复杂性也是很重要的。最小化视觉干扰将使得界面看上去易于使用。减少视觉干扰的两个方法是：空白与对比。</p>
<p>空白，是指介于各个元素之间的间隙。它应是你默认的布局工具。经典法则之一：如果可以使用空白就不要放置其他设计元素。如果用这种方式布局，你会很惊讶调整界面的空白就可以完成布局了。</p>
<p>虽然使用空白多多益善，但也要尽可能的保证有对比感。设计理论家说：设计师应使用最小的视觉变化来表达想法。事实上这就是意味着元素之间要有主次感。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_2.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_2-e1263706322124.png" alt="" title="minimizing-complexity-in-user-interfaces_2" width="513" height="175" class="aligncenter size-full wp-image-705" /></a></p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/typekit_modified.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/typekit_modified-e1263804890609.png" alt="" title="typekit_modified" width="513" height="174" class="aligncenter size-full wp-image-718" /></a></p>
<p>你可以看到修改过的版本有很重的黑线，与之前的边框不同。那个版本视觉干扰更小呢？（当然是原来的更好）大量的空白区域减少视觉干扰并让人觉得更舒适。</p>
<p>做减法、重复使用，循环利用当软件成形后，问题经常发生在程序的各个结合部分。存在的问题往往可以通过相同方法加以解决。界面中应使用相同的组件。使用相同组件的两个好处：减少开发所需时间；给人一致的使用体验，如果用户学会使用一个操作，他们就可以把相同的操作行为运用到进行其他操作中去。</p>
<p>在设计CMS过程中，我们在表单验证上花费了大量的时间。我们用红色框出无效的区域，甚至增加红色的提示框来说明每个填写表单的环节有多少错误。</p>
<p>在之后的开发过程中，我们在需求列表中增加了版本比较的功能。与其创建全新的框架，不如使用在已有的框架上进行改进。我们用蓝框标出已修改的表单，并使用蓝色提示框标注该区域。通过这种方法我们快速部署到用户已经熟悉的界面上。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_3.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_3-e1263804965979.png" alt="" title="minimizing-complexity-in-user-interfaces_3" width="521" height="264" class="aligncenter size-full wp-image-706" /></a></p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_4.png"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_4-e1263805022766.png" alt="" title="minimizing-complexity-in-user-interfaces_4" width="521" height="263" class="aligncenter size-full wp-image-707" /></a></p>
<p>重复使用元素是另一种可以减少界面复杂的方法，因为用户可以迅速的熟悉软件。</p>
<p>空白状态不应空白空白状态是指界面无数据时的样子，如用户初次使用软件。作为设计师，我们花费大部分精力用来设计如何最好的展示内容，但时常忘记如何展示无数据的样子。</p>
<p>如何建立合理的默认值是很重要的。软件的空白状态通常是给用户的第一印象，用户通过第一印象来考虑是否来使用软件。好的空白状态可有助于用户学习使用软件的途径，帮助用户学会初次使用软件的基础操作。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_5.gif"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_5.gif" alt="" title="minimizing-complexity-in-user-interfaces_5" width="498" height="452" class="aligncenter size-full wp-image-708" /></a></p>
<p>Versions的mac版本显然在程序的空白状态投入了很多心思。在首次运行的时候，程序突出了两大人们可能会用得到的功能。</p>
<p>再次重复：不要忘记空白状态！</p>
<p>相关展示我们已经见过大量界面混乱，复杂的软件。然而，有效的减少程序的复杂性有点难度。</p>
<p>Invoice Machine 的界面十分的简约。示例显示它非常节约扩展部分并注重细节。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_6.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_6.jpg" alt="" title="minimizing-complexity-in-user-interfaces_6" width="435" height="290" class="aligncenter size-full wp-image-709" /></a></p>
<p>Freckle只是确保你可以跟踪自己的时间。简洁的界面闪现活力，将例行任务变得有趣。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_7.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_7.jpg" alt="" title="minimizing-complexity-in-user-interfaces_7" width="435" height="290" class="aligncenter size-full wp-image-710" /></a></p>
<p>Image Spark黑白色的渐变。界面几乎没视觉干扰，易于使用。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_8.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_8.jpg" alt="" title="minimizing-complexity-in-user-interfaces_8" width="435" height="290" class="aligncenter size-full wp-image-711" /></a></p>
<p>Ballpark有简洁的界面，用色不跳。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_9.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_9.jpg" alt="" title="minimizing-complexity-in-user-interfaces_9" width="435" height="290" class="aligncenter size-full wp-image-712" /></a></p>
<p>Krop，其核心就两个表单：地址与关键词。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_10.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_10.jpg" alt="" title="minimizing-complexity-in-user-interfaces_10" width="435" height="290" class="aligncenter size-full wp-image-713" /></a></p>
<p>Fever网站的整个目的就是减少你与感兴趣博客之间的距离。它通过非常简单独特的方式来实现。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_11.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_11.jpg" alt="" title="minimizing-complexity-in-user-interfaces_11" width="435" height="290" class="aligncenter size-full wp-image-714" /></a></p>
<p>Screenr 是个惊人的简单截屏并发布到Twitter的软件。值得注意的是没有的功能它有，但其他类似软件有的功能它都没有。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_12.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_12.jpg" alt="" title="minimizing-complexity-in-user-interfaces_12" width="435" height="290" class="aligncenter size-full wp-image-715" /></a></p>
<p>Squarespace 在隐藏复杂功能方面做得很好。虽然它是网络的发布平台，它把功能隐藏在一个简洁的界面中。</p>
<p><a href="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_13.jpg"><img src="http://www.86ue.com/wp-content/uploads/2010/01/minimizing-complexity-in-user-interfaces_13.jpg" alt="" title="minimizing-complexity-in-user-interfaces_13" width="435" height="290" class="aligncenter size-full wp-image-716" /></a></p>
<p>总结</p>
<p>    * 减掉不必要的功能；<br />
    * 然后隐藏那些不能减掉的功能；<br />
    * 减少视觉噪音并重复利用元素；<br />
    * 使用空白帮助用户；</p>
<p>(翻译略有删减)<br />
英文地址：<a href="http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/">http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/</a><br />
原文地址：<a href="http://blog.uxredesign.com/interactive-design/minimizing-complexity-in-user-interfaces/">http://blog.uxredesign.com/interactive-design/minimizing-complexity-in-user-interfaces/</a></p>
<p>来源：<a href="http://forum.chinaui.com/viewthread.php?tid=67424&#038;extra=page%3D1">http://forum.chinaui.com/viewthread.php?tid=67424&#038;extra=page%3D1</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/697/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>交互设计-有效性”之“简洁清晰，自然易懂”</title>
		<link>http://www.86ue.com/archives/688</link>
		<comments>http://www.86ue.com/archives/688#comments</comments>
		<pubDate>Thu, 14 Jan 2010 17:35:27 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[用户体验设计(UED)]]></category>
		<category><![CDATA[使用指南]]></category>
		<category><![CDATA[有效性]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=688</guid>
		<description><![CDATA[<img src="http://www.86ue.com/wp-content/uploads/2010/01/T1ewVrXaVuXXXXXXXX-550-350-e1263490173633.jpg" alt="" title="T1ewVrXaVuXXXXXXXX-550-350" width="510" height="349" class="aligncenter size-full wp-image-694" />

我们生活在信息繁杂的社会，尤其是在互联网时代，人们开始通过网络开始接触越来越多的信息，那么，如何获取/传递有效而准确的信息将非常重要。在网页交互设计中，我们提出：信息获取和传达的过程必须是简洁清晰，自然易懂。这样用户才能够有效的获取这些信息，并迅速作出决定。

<strong>1.什么是“简洁自然，清晰易懂”？</strong>

简洁清晰：使信息最简化
“少即是多”。提倡使用最少的元素来表达最多的信息。如果信息繁杂，将使用户承担大量的信息负担，造成信息过载，影响效率，不能帮助用户解决问题。]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/T1ewVrXaVuXXXXXXXX-550-350-e1263490173633.jpg" alt="" title="T1ewVrXaVuXXXXXXXX-550-350" width="510" height="349" class="aligncenter size-full wp-image-694" /></p>
<p>我们生活在信息繁杂的社会，尤其是在互联网时代，人们开始通过网络开始接触越来越多的信息，那么，如何获取/传递有效而准确的信息将非常重要。在网页交互设计中，我们提出：信息获取和传达的过程必须是简洁清晰，自然易懂。这样用户才能够有效的获取这些信息，并迅速作出决定。</p>
<p><strong>1.什么是“简洁自然，清晰易懂”？</strong></p>
<p>简洁清晰：使信息最简化<br />
“少即是多”。提倡使用最少的元素来表达最多的信息。如果信息繁杂，将使用户承担大量的信息负担，造成信息过载，影响效率，不能帮助用户解决问题。</p>
<p>自然易懂：使用用户语言<br />
用户获取信息的方式多样，并且对信息的理解程度也各有不同，所以使用用户平时使用和理解的表达方式去传递信息，更可以被用户所接受。</p>
<p><strong>2.信息表述的种类与设计原则</strong></p>
<p>在网页交互设计中，用于传达给用户以有效信息的方式有多种，其中包括：页面布局，交互文本，界面色彩，图像与图标，声音等。</p>
<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/dgwhjt9x_8cpdth3fd_b-e1263490266646.jpg" alt="" title="dgwhjt9x_8cpdth3fd_b" width="510" height="346" class="aligncenter size-full wp-image-689" /></p>
<p><strong>1）页面布局</strong></p>
<p>界面中的信息布局，会直接影响用户获取信息的效率。所以，一般界面的布局因功能不同考虑的侧重点不同，并且会让用户有一种“区块感”，方便用户对信息的扫描性浏览。</p>
<p>①界面布局尽量有秩序，排列整齐，防止过紧或过松，有明显的“区块感”。切忌混乱。<br />
②布局要充分表现其功能性，对于每个区域所代表的功能应有所区别。如：标题区，工作区，提示/帮助区等<br />
③页面中最重要的信息所在的模块将是在屏幕中最明显的位置上。并且，应该是最大的。<br />
④布局中的信息需要有明显的标志和简单介绍，比如标题栏和标题等。<br />
⑤信息的位置保证一致性，让用户可以无需重新建立对页面信息分布的理解。</p>
<p><strong>2）交互文本</strong></p>
<p>交互文本指产品界面涉及交互操作中需要用户理解并反馈的所有的文字：包括标题、按钮文字、链接文字，对话框提示、各种提示信息、帮助等。这些文字直接影响用户在交互过程中对预期的理解，好的交互文本设计，可以提高用户完成任务的效率。</p>
<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/dgwhjt9x_9hfxvnxgk_b-e1263490334952.jpg" alt="" title="dgwhjt9x_9hfxvnxgk_b" width="510" height="346" class="aligncenter size-full wp-image-690" /></p>
<p>①表述的信息尽量口语化，不用或少用专业术语；<br />
②表述语气柔和、礼貌，避免使用被动语态，否定句等；<br />
③简洁、清楚的表达，文字较多要适当断句，尽量避免左右滚屏，折行。<br />
④对于同种操作的交互文本，操作行文字保持统一性。<br />
⑤字体使用默认/标准的字体，大小以用户的视觉清晰分辨为主；</p>
<p><strong>3）界面色彩</strong></p>
<p>人眼一共约能区分一千万种颜色，所以用户与界面中颜色的关注度非常的高，有效的使用色彩区分信息的级别，分类等，有助于用户对信息和操作产生关联，有效减少用户的记忆负担。</p>
<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/dgwhjt9x_10gx2xr4dt_b-e1263490390411.jpg" alt="" title="dgwhjt9x_10gx2xr4dt_b" width="510" height="345" class="aligncenter size-full wp-image-691" /></p>
<p>①根据不同的产品使用“场景”，选择其合适的颜色。如，管理界面经常使用蓝色。<br />
②考虑颜色对用户的心理和文化的影响。比如，黄色代表警告，绿色代表成功等。<br />
③避免界面中同时出现3种以上的颜色。<br />
④颜色的对比度明显，如在深色的背景中使用浅色的文字。<br />
⑤使用颜色指导用户关注到到最重要的信息。</p>
<p><strong>4）图像图标</strong></p>
<p>相对于单纯的文本，图像以及符号化的图标更加符合用户的认识习惯。往往表述一种信息，一张图片或者一个标识更能让不同用户理解与接受。适当的使用图片与符号化的图标，会让用户很自然的建立起认知习惯。</p>
<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/dgwhjt9x_11hpjqpbg7_b-e1263490460390.jpg" alt="" title="dgwhjt9x_11hpjqpbg7_b" width="510" height="346" class="aligncenter size-full wp-image-692" /></p>
<p>①表意清晰，明确，有高度的概括性与指向性，让用户能够快速的联想到对应的功能和操作。<br />
②同类或同一纬度的信息，在形式和色彩风格上尽量保持一致性；<br />
③仅在突出重要信息，用户可能产生理解偏差的情况下使用。避免滥用。<br />
④尽量与交互文本结合使用。</p>
<p><strong>5）声音</strong></p>
<p>在网页的交互设计中，用于声音的信息表述方式相对与视觉来说不是很多。一般应用于提示，提醒，帮助等信息的表述。此类信息表述让用户通过听觉获取反馈，更加的直接与有效。</p>
<p>①表述清晰，语气亲切，不生硬，有礼貌。<br />
②使用符合用户认知习惯的声音。如，使用敲门声提示好友来访信息等。<br />
③使用不让用户反感（如：恐怖，恶心，烦躁）的声音。<br />
④在用户可预知的情况下发出声音。</p>
<p><strong>4.小结</strong></p>
<p>对于不同的信息表述方式，我们都要求设计师在表达信息的时候做到简洁清晰，自然易懂，尽量让用户觉得这是自然而然，而且又是清晰明了的信息。就像小溪流水一样自然，就像军人命令一样明确。这样才会让用户快速，准确的完成任务。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/688/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>用户体验量化方法研究</title>
		<link>http://www.86ue.com/archives/679</link>
		<comments>http://www.86ue.com/archives/679#comments</comments>
		<pubDate>Wed, 13 Jan 2010 11:05:12 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[用户体验设计(UED)]]></category>
		<category><![CDATA[方法研究]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[量化]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=679</guid>
		<description><![CDATA[以用户体验层次模型为基础，我们提出了三种用户体验量化方法：以任务为中心、以体验为中心以及以行为为中心的量化方法。三种方法中有不同的要素组成，各要素间存在着不同的关系。

<strong>用户体验量化方法研究的提出</strong>

        近年来，用户体验一词铺天盖地的出现在网络上、书本中。而在众多的用户体验相关描述中，认知度较高的包括：（1）用户体验是用户在使用产品的过程中所感受到的、所获得的全部内容的总和；（2）用户体验是衡量产品质量的一个重要标准，是一种与交互相关的集合。与此同时，无论是用户体验的相关工作人员，还是众多企业的高管，都意识到好的用户体验不仅能够满足用户的需求，同时能够提高企业的经济效益。]]></description>
			<content:encoded><![CDATA[<p>以用户体验层次模型为基础，我们提出了三种用户体验量化方法：以任务为中心、以体验为中心以及以行为为中心的量化方法。三种方法中有不同的要素组成，各要素间存在着不同的关系。</p>
<p><strong>用户体验量化方法研究的提出</strong></p>
<p>        近年来，用户体验一词铺天盖地的出现在网络上、书本中。而在众多的用户体验相关描述中，认知度较高的包括：（1）用户体验是用户在使用产品的过程中所感受到的、所获得的全部内容的总和；（2）用户体验是衡量产品质量的一个重要标准，是一种与交互相关的集合。与此同时，无论是用户体验的相关工作人员，还是众多企业的高管，都意识到好的用户体验不仅能够满足用户的需求，同时能够提高企业的经济效益。</p>
<p>        而此时，用户体验的相关工作人员所面临的问题是如何评测产品给用户带来的体验呢？这就需要我们通过一定的方法对用户体验进行量化。在诺曼、Robert等学者所作研究的基础上，我们在用户体验量化方法上进行了大胆的尝试。在用户体验量化方法的研究过程中，我们首先通过分析用户体验的流程来建立用户体验的层次；其次，以该层次为基础来寻找每个层次的组成要素以及要素间的相互关系，并依照层次的划分提出用户体验量化的方法；再者通过案例详细阐述用户体验量化方法的运用。 </p>
<p>   在这里，我将分三次向大家展示整个方法的研究，今天要和大家分享的是用户体验层次模型的建立。 </p>
<p><strong>用户体验层次模型的构建</strong></p>
<p>        为了研究用户体验量化方法，我们首先需要明确用户体验是如何产生的。这就需要我们建立一个囊括全部要素在内并能表明各要素间相互关系的用户体验层次结构。诺曼认为用户体验是一种与交互相关的集合，这为用户体验层次结构的构建提供了依据。于是我们结合诺曼的理论从用户体验的流程出发对用户体验进行模糊的层次划分，之所以称之为模糊的层次是因为对于不同的操作者以及不同的产品，甚至是不同的任务来说，各个层次中各要素的划分不尽相同，这一点会在其他的研究中涉猎，但在《用户体验量化方法研究》的系列中将不再详细陈述。用户体验模糊层次模型如图1所示。</p>
<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/pic13.jpg" alt="" title="pic13" width="474" height="179" class="aligncenter size-full wp-image-684" /></p>
<p>图1展示了用户体验的产生流程，元素处于整个用户体验模糊层次的最底层，包括产品层面要素和行为层面要素。以手机为例，产品层面的要素包括手机所发出的声音、光，手机所呈现的图片、视频等；而行为层面的要素包括按、长按、单击、双击等。行为交互层是指使用户与产品进行交互的单元，不难发现，用户与产品间的交互都可以通过图1中所示的最小单元来形成；若干个行为交互形成了用户的体验行为；用户的若干个体验行为形成了用户体验。将图1的内容按照发生的先后顺序进行重新构建，我们可以得到用户体验的逻辑层次，并称它们为目标层、行为层、体验层，如图2所示。这三个层次与诺曼所提出的本能层、行为层、反思层的理论相吻合。</p>
<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/pic23.jpg" alt="" title="pic23" width="514" height="434" class="aligncenter size-full wp-image-686" /></p>
<p>在目标层上，需要用户对自己的目标进行识别，得到为完成实践目标所需要的信息与操作方式从而进入行为层；在行为层中，用户完成若干个行为交互，最后进入体验层；在体验层中用户会产生不同的主观感受，这需要通过问卷方法对用户的主观感受进行度量。三个层次间相互关联、互相影响，是用户体验形成的必然组成要素。用户在体验层形成最终的主观感受，而目标层、行为层即是用户主观感受的原因，又是用户主观感受的客观记录，通过对目标层、行为层的分析，可以获取用户相应的主观感受。这一点在后面所提出的用户体验方法中有明显的体现。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/679/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>当视觉设计师遇上产品经理、开发工程师</title>
		<link>http://www.86ue.com/archives/667</link>
		<comments>http://www.86ue.com/archives/667#comments</comments>
		<pubDate>Tue, 12 Jan 2010 13:52:29 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[用户体验设计(UED)]]></category>
		<category><![CDATA[视觉设计]]></category>
		<category><![CDATA[产品经理]]></category>
		<category><![CDATA[产品设计]]></category>
		<category><![CDATA[开发工程师]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=667</guid>
		<description><![CDATA[<img src="http://www.86ue.com/wp-content/uploads/2010/01/kVPV3r5JM4GnbjK-e1263304143613.jpg" alt="" title="kVPV3r5JM4GnbjK" width="509" height="248" class="aligncenter size-full wp-image-671" />

我是一个初入互联网的视觉设计师，和以往做设计感受最大的不同就是：一个设计的最终定稿会受到多方面的挑战，有来自产品经理的，来自开发的，来自测试的…等等。那如何在其他团队成员的面前不卑不亢，游刃有余地应对呢？下面这篇文章给了我很大的启发，特别分享给大家。

　　产品经理、开发工程师和市场策划专员等产品利益关系人认为——视觉设计师在整个团队中没有突出的地位。难道这个论断是正确的吗？我们还能用哪些实例来向这些利益关系人证明视觉视觉设计的重要性呢？

　　尽管，视觉设计师在他的职业生涯中或者是在某个产品开发进程中会面临不同的阻碍，以下3点是会被经常提及的：

　　● 视觉设计就是怎样把东西做得更漂亮
　　● 做流行的东西就可以提高视觉设计的品质
　　● 我们从单个元素出发来评价视觉设计的效果
 
　　视觉设计就是怎样把东西做得更漂亮

　　尽管现在只有很少的一部分人依旧坚持着这个观点，但认为视觉设计只是蛋糕上的奶油这个观念已存在很久。这就好比把最后一步的视觉设计比喻成产品包装上的一个吸引人注意的蝴蝶结。

　　这个观点也许源于工业时代。在当时，工业产品才开始出现不同以往的外观设计，而且像雷蒙·罗维（Raymond Loeway，1889-1988，法国）这样的现代工业设计师开始大张旗鼓地宣扬自己的产品美学。]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/kVPV3r5JM4GnbjK-e1263304143613.jpg" alt="" title="kVPV3r5JM4GnbjK" width="509" height="248" class="aligncenter size-full wp-image-671" /></p>
<p>我是一个初入互联网的视觉设计师，和以往做设计感受最大的不同就是：一个设计的最终定稿会受到多方面的挑战，有来自产品经理的，来自开发的，来自测试的…等等。那如何在其他团队成员的面前不卑不亢，游刃有余地应对呢？下面这篇文章给了我很大的启发，特别分享给大家。</p>
<p>　　产品经理、开发工程师和市场策划专员等产品利益关系人认为——视觉设计师在整个团队中没有突出的地位。难道这个论断是正确的吗？我们还能用哪些实例来向这些利益关系人证明视觉视觉设计的重要性呢？</p>
<p>　　尽管，视觉设计师在他的职业生涯中或者是在某个产品开发进程中会面临不同的阻碍，以下3点是会被经常提及的：</p>
<p>　　● 视觉设计就是怎样把东西做得更漂亮<br />
　　● 做流行的东西就可以提高视觉设计的品质<br />
　　● 我们从单个元素出发来评价视觉设计的效果</p>
<p>　　视觉设计就是怎样把东西做得更漂亮</p>
<p>　　尽管现在只有很少的一部分人依旧坚持着这个观点，但认为视觉设计只是蛋糕上的奶油这个观念已存在很久。这就好比把最后一步的视觉设计比喻成产品包装上的一个吸引人注意的蝴蝶结。</p>
<p>　　这个观点也许源于工业时代。在当时，工业产品才开始出现不同以往的外观设计，而且像雷蒙·罗维（Raymond Loeway，1889-1988，法国）这样的现代工业设计师开始大张旗鼓地宣扬自己的产品美学。</p>
<p>　　显而易见的，视觉设计确实可以改善产品的表征，但是它可以传递给用户的信息其实更多。通过对不同元素的排列布局，视觉设计师也在向用户传递着产品的核心价值：</p>
<p>　　● 这是什么？<br />
　　● 我怎么使用？<br />
　　● 为什么我只使用它？</p>
<p>　　上述3个问题在交互式产品的设计上尤其显得至关重要。下面我们通过一个实例来说明。</p>
<p>　　图1到图3呈现的是同一个网站的不同视觉排列，基于相同的视觉元素——字体、颜色、渐变和图片。不同的布局直接影响着主要功能点的不同。</p>
<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/OTUdDCeihVLqwLd.jpg" alt="" title="OTUdDCeihVLqwLd" width="458" height="183" class="aligncenter size-full wp-image-673" /></p>
<p>上图中，我们可以清晰地看出页面的主要功能是查看客户联系信息。然后则是用户可以编辑、删除或者为联系信息写备注。在图2中，页面的重点放在了客户和公司的交流上，然后是用户可以浏览、编辑和删除客户信息。</p>
<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/BzUhuDKrsDKLrcP.jpg" alt="" title="BzUhuDKrsDKLrcP" width="447" height="253" class="aligncenter size-full wp-image-670" /></p>
<p>最后，图3的设计重点是用户信息的可编辑性。查看和实时跟踪客户信息的功能被弱化了。</p>
<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/2o3ucxuibr7YhB6.jpg" alt="" title="2o3ucxuibr7YhB6" width="447" height="203" class="aligncenter size-full wp-image-668" /></p>
<p>这3种不同的视觉呈现方案告诉了我们用户的3个主要任务：查看客户联系信息、管理和更新这些信息以及保留客户的记录。在每个方案中，视觉设计的基本元素是相同的：颜色、字体、渐变和图片。</p>
<p>　　视觉设计可以做到的远比美化界面多得多。它还肩负着传递产品核心功能的作用。“这是什么？”“怎么使用这些功能？”“怎样更高效地使用？”</p>
<p><strong>做流行的东西就可以提高视觉设计的品质</strong></p>
<p>　　就像现在很流行的网站“make my logo bigger”所为客户做的事一样，产品经理经常会要求视觉设计师更多地关注排版中的某个细节。这些意见在帮助我们更容易抓住设计重点的同时，也暴露了对于视觉设计的另一个误解：“为了改进这个网站的视觉效果，你要把这个做得大一下，这个字体用粗体，变成红色！”</p>
<p>　　然而，页面中任何元素的重要性如何是取决于它周围环境的。比如，在一个页面中放入一个大红色的圆，它会很引人注目。如果把同一个圆放在10个粉色的圆边上，它就不会那么醒目了。因此，决定某个元素的重要性要从设计的整体出发。我们不应该只关注于某个元素来改进设计。如果这样做的话，页面的整体平衡就会被破坏，也会混淆页面功能的层次关系。</p>
<p>　　如果你答应每个利益关系人去逐个调整页面的不同细节，你每次的调整都要在用户需求和产品需求之间做抉择，然而，大多数情况下，两种需求是无法同时得到满足。图4和图5是两个不同下载页面的比较。火狐的页面中有一个醒目的下载按钮来触发这个行为。而页面中其他的元素，比如产品特性等就不会那么明显。</p>
<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/P4dN2wyrKDXDuwl.jpg" alt="" title="P4dN2wyrKDXDuwl" width="445" height="550" class="aligncenter size-full wp-image-674" /></p>
<p>图5是Flock的下载页面，有4个地方可被点击来触发下载的行为：页面的右上角、左边菜单的底部、新闻板块的右上角和页脚的位置。如果不是因为每个下载细节都被强化的话，Flock可能就会像火狐一样——只有一个下载的按钮。</p>
<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/8RhIsLosKdVKmz5.jpg" alt="" title="8RhIsLosKdVKmz5" width="446" height="450" class="aligncenter size-full wp-image-669" /></p>
<p><strong>我们从单个元素出发来评价视觉设计的效果</strong></p>
<p>　　如果我们把关注的重点单单落在某个元素上而不是整体页面的话，也会让局部的调整很困难。“你能把logo做得大一些吗？”“你能把标题的颜色变一下吗？”“我们能在这里换一张图片吗？”…</p>
<p>　　这些零散的建议确实可以帮助我们更了解客户的意图，但客户很少会关注到这对整体页面设计的影响。换一个颜色可能需要重新定义页面的色调，设计师还需确保新的色调不会影响到用户关注主要任务。换一张图片可能意味着也要同时调整它周围的元素，因为原先图片制造的视觉焦点可能不复存在…等等。</p>
<p>　　一个最终的视觉设计稿应该是建立在平衡和调整各个元素相互关系上的——同时传递产品的核心价值。所以，当设计师在调整了一个元素后，他还必须重新考虑页面的布局以不破坏原有的平衡。孤立地完成一个个小设计，合在一起后并不能说这就是一个完整的设计。</p>
<p>　　互联网产品的页面元素尤其容易被独立开来进行评估。因为它也许是分一个个单独的模块做测试的，团队里的一个成员也可能认为我只要把自己的那部分给做好了，整体的项目也就做好了。图6就表明了独立设计可能造成的结果。</p>
<p>　　当我们单独看页面头部ebay的logo、paypal提供安全保障的提示和正中照相机的促销广告是，都会觉得不错。事实上，当这三者同时出现在一个页面上时，他们更像在互相竞争，都过于抢眼了。</p>
<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/mgTS1D9QQ5qUs2c.jpg" alt="" title="mgTS1D9QQ5qUs2c" width="445" height="396" class="aligncenter size-full wp-image-672" /></p>
<p>但愿以上这些实例已经证明了视觉设计师在团队中的价值。但要让更多的团队成员认同视觉设计不仅仅关乎到样式、流行等，视觉设计师还需多提升自我经验，在项目初期就表明视觉设计对于整个项目的重要性。</p>
<p>　<br />
《Common Visual Design Misconceptions》<br />
By Luke Wroblewski<br />
原文链接：<a href="http://www.uxmatters.com/mt/archives/2008/11/common-visual-design-misconceptions.php">http://www.uxmatters.com/mt/archives/2008/11/common-visual-design-misconceptions.php</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/667/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>浅谈体验如何设计？</title>
		<link>http://www.86ue.com/archives/663</link>
		<comments>http://www.86ue.com/archives/663#comments</comments>
		<pubDate>Tue, 12 Jan 2010 13:19:14 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[用户体验设计(UED)]]></category>
		<category><![CDATA[体验]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=663</guid>
		<description><![CDATA[<img src="http://www.86ue.com/wp-content/uploads/2010/01/WKxZdyIdIrp0rZX-e1263302297121.jpg" alt="" title="WKxZdyIdIrp0rZX" width="509" height="99" class="aligncenter size-full wp-image-664" />
虽然我们摇旗呐喊了好久，连媒体都开始春心荡漾的鼓吹起“用户体验的竞争力”，各种设计类的工作招聘过程堂而皇之的走上了电视节目。实际上，我们的各个行业中对于“用户体验”的认识还是不够准确的，以下对话为真实经历，但不作为现象推广：

客户：“听说现在要做产品都要重视用户体验呢~~”
某人：“恩~~”
客户：“我们的产品现在好像挺缺用户体验的。”
某人：“哦？”
客户：“请你帮我们设计一个体验吧！”
某人：“这~~~~”

这个话题引起了我的注意，用户体验从逻辑上来说是一种用户端的反馈，进而造成的价值挖掘和再设计，那么在没有任何用户参与之初，我们是否也能设计出一种体验来满足“即将来到”或“正在关注”它的用户？这可能有点困难，比如：你开了一家理发店（现在一般叫XXX造型机构），用户来洗头，来的用户是个老鸟，洗头过程中发现店里没有准备热毛巾，他内心对你的店的评分就会降低，很多时候这种“内心的评分”构成了用户体验的绝大部分内容 — 实际情况是，如果你的店只收费10元，那么可能用户对于该项的评分就会忽略，因为他这时的定价尺度和评价标准因为价格的限制有所降低。

显而易见，用户体验即使是在同等维度的基础上，得到的结果和反馈仍然是动态的，所以体验的事情不是一个单一的决策过程，而是动态的设计过程，那么我们究竟能不能设计出一种体验？我想技术上是可行的，但收效得根据实施阶段的动态调整来决定。

<strong>1. 提出一种体验的目标</strong>

这个目标其实相当于你的产品的定位和策略，很多公司把“公司的定位”和“产品的定位”混为一谈，就造成了产品的本质空虚和弱化，因为我天朝大部分公司的定位都是空虚的，弱化的，比如：一个造拖鞋卖拖鞋的公司的定位是“国际化”，因为公司所在地和成本优势导致了外贸经营的便利性，顺道的它自然认为自己的产品应该“国际化”，不过说到底，卖拖鞋的怎么国际化？于是公司派出设计师参观一些XXX拖鞋设计展后，拍照留念 – 复制生产 – 低价倾销。]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.86ue.com/wp-content/uploads/2010/01/WKxZdyIdIrp0rZX-e1263302297121.jpg" alt="" title="WKxZdyIdIrp0rZX" width="509" height="99" class="aligncenter size-full wp-image-664" /><br />
虽然我们摇旗呐喊了好久，连媒体都开始春心荡漾的鼓吹起“用户体验的竞争力”，各种设计类的工作招聘过程堂而皇之的走上了电视节目。实际上，我们的各个行业中对于“用户体验”的认识还是不够准确的，以下对话为真实经历，但不作为现象推广：</p>
<p>客户：“听说现在要做产品都要重视用户体验呢~~”<br />
某人：“恩~~”<br />
客户：“我们的产品现在好像挺缺用户体验的。”<br />
某人：“哦？”<br />
客户：“请你帮我们设计一个体验吧！”<br />
某人：“这~~~~”</p>
<p>这个话题引起了我的注意，用户体验从逻辑上来说是一种用户端的反馈，进而造成的价值挖掘和再设计，那么在没有任何用户参与之初，我们是否也能设计出一种体验来满足“即将来到”或“正在关注”它的用户？这可能有点困难，比如：你开了一家理发店（现在一般叫XXX造型机构），用户来洗头，来的用户是个老鸟，洗头过程中发现店里没有准备热毛巾，他内心对你的店的评分就会降低，很多时候这种“内心的评分”构成了用户体验的绝大部分内容 — 实际情况是，如果你的店只收费10元，那么可能用户对于该项的评分就会忽略，因为他这时的定价尺度和评价标准因为价格的限制有所降低。</p>
<p>显而易见，用户体验即使是在同等维度的基础上，得到的结果和反馈仍然是动态的，所以体验的事情不是一个单一的决策过程，而是动态的设计过程，那么我们究竟能不能设计出一种体验？我想技术上是可行的，但收效得根据实施阶段的动态调整来决定。</p>
<p><strong>1. 提出一种体验的目标</strong></p>
<p>这个目标其实相当于你的产品的定位和策略，很多公司把“公司的定位”和“产品的定位”混为一谈，就造成了产品的本质空虚和弱化，因为我天朝大部分公司的定位都是空虚的，弱化的，比如：一个造拖鞋卖拖鞋的公司的定位是“国际化”，因为公司所在地和成本优势导致了外贸经营的便利性，顺道的它自然认为自己的产品应该“国际化”，不过说到底，卖拖鞋的怎么国际化？于是公司派出设计师参观一些XXX拖鞋设计展后，拍照留念 – 复制生产 – 低价倾销。</p>
<p>产品的定位绝对是和用户联系在一起的，而且这个目标应该是使用这个产品的用户迫切需要解决的问题或待满足的生理心理的感受，比方你是一个做按摩椅的，你需要提出一个唯一的、精确的目标，现在有两个选择：减压和舒适。产品的初期你可能只有满足某一个特点的成本投入，那找什么点？我认为首先是舒适，因为舒适易于感受到，且可以通过人体工学等科学手段进行数据化，可以指导设计，从心理上讲如果一个按摩椅坐上去都不够舒适的话，我相信不会有用户相信它能减压，更有甚者，把按摩椅设计得像一个刑具一样。</p>
<p>因此，提出准确的、简单的体验目标，是所有产品被接受的第一步，也是用户建立心理预期的第一步。</p>
<p><strong>2. 选定检验目标的工具</strong></p>
<p>我们发现大量的产品在使用过程中和电视广告上宣传的内容有所出入甚至完全不同，除了那些恶意的虚假广告外，我相信每个产品的生产商都是希望它的产品符合承诺的，因为这种商业诚信能够带来利润。但实际上又真的很少有人能够做到，这就是因为在提出一个产品目标的时候，却没有合理的检验工具来控制。</p>
<p>所以，我们发现现代企业中，质量监管和品质监控成为了重要的核心部门，那么产品规格上的东西容易检验，产品在投资回报率的数据上能够计算，产品的风险可以预估 — 用户体验呢？如何切实有效的检验用户体验？</p>
<p>首先你需要一个进行用户体验工作的部门，人数根据公司规模来安排，一般用户体验部门从属于研发体系（按现在的发展来看，我觉得应该是每个产品职能部门都应该安排1-2个用户体验的研究人员，然后他/她们共同组成“用户体验中心”），这些拥有热情和专业知识的人才可以帮助产品在初期避免绝大多数的无效体验；</p>
<p>其次，需要一个用户体验的闭环检查流程，日本人在日本本土做手机时对品质的要求是这样的：“我们争取不制造出一件废品”，而到中国本土后变成了：“我们争取不让一件废品流出工厂”，你仔细看看，是否找到了我们的差距？其实一种精益化生产的态度也是重视用户体验的优秀体现；</p>
<p>最后，所谓工具不是写报告，写检查，拿着扫描棒盯着上下班的员工，而是一种发现问题的机制。通常我们检验体验是否被设计完善，有这么几个渠道：品质管理，设计师的主动检查，节点的严格控制，产品阶段总结会议，测试阶段的迭代设计。</p>
<p><strong>3. 收集用户体验的反馈</strong></p>
<p>我们现在很多做用户体验研究的从业者，其实大部分时间都在做这个事情，收集反馈，形成数据，发现问题，提出问题。收集反馈很重要，无论是设计问卷调查，开展随时随地的访谈，还是分析客户投诉，电话拜访，甚至现场测试，得出的数据可以反映绝大多数的产品问题，但用户的反馈就是一切吗？</p>
<p>对于设计来说，有时候就应该是以设计师为主的，因为用户没有专业知识，他们很难告诉你真正需要的“新产品”是什么，如果你的公司是一个跟随型的公司，别人做什么我们就做得比他好一点，那么收集到的用户数据可以直接进行迭代处理；但如果你的公司在行业中的竞争优势已经处于饱和状态，可能这些数据对于你制定下一步产品策略就没什么用处了，而是在于对“体验的挖掘”，从收集的用户反馈中找到还没有被开发的体验。</p>
<p>任何的调查得到的结果在用户体验不足的方面几乎都是相交的，类似的，而缺乏相交的部分正是我们可以找到机会的部分。就好像我们从小听到的狼和羊的故事都是基于社会生存的寓意以及和负面的人性纠缠在一起的，我不知道《喜羊羊和灰太狼》的创作团队之前有没有系统研究过他们的用户（该动画的受众）的行为和心理感受，但是如果真的没有任何一个用户提到“我喜欢看到狼和羊在一起的娱乐故事”的话，那么这个就是可以产生创意的部分。</p>
<p>要知道1960年的时候，东欧的伦布兰特公司在制作《猫和老鼠》的时候并不受到欢迎，那为什么返回好莱坞制作后又影响了整整两代人的生活呢？</p>
<p><strong>4. 随时优化体验的细节</strong></p>
<p>由于产品一旦摆上柜台，那么所有的设计师几乎都难以控制它的下场，这个环节主要是给零售环节和售后服务环节聊的。用户接触到产品的第一阶段有：媒体（逛网站，看电视发现广告和软文）、朋友口述（聚会聊天等谈起）、朋友借用（看到对方在用，感觉不错拿来把玩一下）、随意性浏览（逛街过程中的偶遇）、柜台咨询（上述过程中刺激了购买欲望后的结果）。</p>
<p>这些不同的情况都会引发体验的焦虑，而恰恰是这些我们不太容易注意，我们认为理所当然做好的环节出了问题，最后导致问题的引爆。最著名的营销缺陷就是，柜台上的营业员因为购买者的衣着，眼中闪现一些鄙夷的目光，仅这一点就可以摧毁你每年25%的销售机会 – 这可不是我编的，我奇怪的是，为什么我们的营销行业报告，从来不做这方面的研究。</p>
<p>如何优化？首先要控制精英人群，他们具备产品的先锋性，在每个小的生活圈子中有一定的话语权和影响力，产品第一要素是考虑他们的状态，给予积极的精英用户一些奖励和优惠，并吸取他们的建议和意见，解决首先由他们发现的问题；其实，制造产品的良好售后通路，从上至下给予政策的宣导，只解决问题，不寻找借口，国内手机品牌厂商来看，目前魅族做得不错，联想尤其糟糕 – 但无稽的是，由于换机政策，魅族的财务出现了一些问题；再次，做好人性的关怀，特别是对于销售渠道比较复杂的商品来说，而定价越高的产品，出现的体验问题越容易引发用户的愤怒。</p>
<p><strong>5. 不用考虑质疑者的体验</strong></p>
<p>每个学过经济学的人都懂，80%的利润是由20%的客户带来的，那么我们为什么非要去争80%的用户呢？因为中国是一个复杂的市场经济体，我们的各行业的红海都太多了，而蓝海基本上我们也没那创意来攻击，因此只能头破血流。那么同质化的产品究竟有没有蓝海？我认为大部分产品的蓝海都在用户体验上。</p>
<p>既然是要对用户体验做出设计和优化，自然先要确定谁才是我们真正的用户，关于这个问题，已经有大量的著作和文章描述过，方法不一而足，都很实用。我这里要说的是，既然我们时间有限，能力有限，投入有限，我们就必须有所取舍，而对于那些质疑者的体验，我们是不用考虑的。</p>
<p>什么是质疑者？雇佣的枪手（各大网站的评测水稿编写人），恶意的竞争对手，批评家用户（任何产品他在没有使用时，都会先抱怀疑态度），售后服务额外需求未得到满足的用户（你按三包协议修理后，用户认为你应该再送他一块电池作为补偿），占便宜的摇摆者（任何产品只要免费赠送，他就会支持）。</p>
<p><strong>哪些是我们应该关注的杀手级用户？</strong></p>
<p>a. 妇女，老人和儿童：无论你做什么产品，你都应该保证这三类人应该轻松安全的使用（当然，小孩是不能开车的，但是他们必须得安全舒适的乘坐），并在颜色和外型上不让他们觉得讨厌；</p>
<p>b. 民间专家：那种能够比较出6家超市不同的巧克力价格的，使用过超过30部手机并且知道最新奇的应用的，本地同类菜色饭馆中装修最好，打折最多的人群，是一些顶级的用户，他们的意见甚至能成为产品创新的动力；</p>
<p>c. 销售人员：他们对于利润的敏感，导致了他们往往最熟悉“普通的用户”的真实想法，并且善于察言观色的本领也是我们设计师应该学习的重要技能。</p>
<p>最后，用户体验不是裤子破了打补丁，而是把补丁变成一种设计，一种超越用户期望的价值表现。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/663/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>网站体验营销的76个用户体验点</title>
		<link>http://www.86ue.com/archives/661</link>
		<comments>http://www.86ue.com/archives/661#comments</comments>
		<pubDate>Tue, 12 Jan 2010 06:22:32 +0000</pubDate>
		<dc:creator>紫枫印象</dc:creator>
				<category><![CDATA[用户体验设计(UED)]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[网站体验]]></category>
		<category><![CDATA[网站营销]]></category>

		<guid isPermaLink="false">http://www.86ue.com/?p=661</guid>
		<description><![CDATA[<strong>一、感官体验：呈现给用户视听上的体验，强调舒适性。</strong>

1. 设计风格：符合目标客户的审美习惯，并具有一定的引导性。
网站在设计之前，必须明确目标客户群体，并针对目标客户的审美喜好，进行分析，从而确定网站的总体设计风格。
2. 网站LOGO：确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间。
3. 页面速度：正常情况下,尽量确保页面在5秒内打开。如果是大 型门户网站，必须考虑南北互通问题，进行必要的压力测试。
4. 页面布局：重点突出，主次分明，图文并茂。与企业的营销目标相结合，将目标客户最感兴趣的，最具有销售力的信息放置在最重要的位置。
5. 页面色彩：与品牌整体形象相统一，主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。
6. 动画效果：与主画面相协调，打开速度快，动画效果节奏适中，不干扰主画面浏览。
7. 页面导航：导航条清晰明了、突出，层级分明。
8. 页面大小：适合多数浏览器浏览（以15寸及17寸显示器为主）。
9. 图片展示：比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远。
10. 图标使用：简洁、明了、易懂、准确，与页面整体风格统一。
11. 广告位：避免干扰视线，广告图片符合整体风格，避免喧宾夺主。
12. 背景音乐：与整体网站主题统一，文件要小，不能干扰阅读。要设置开关按钮及音量控制按钮。

<strong>二、交互体验：呈现给用户操作上的体验，强调易用/可用性。</strong>

13. 会员申请：介绍清晰的会员权责，并提示用户确认已阅读条款。
14. 会员注册：流程清晰、简洁。待会员注册成功后，再详细完善资料。
15. 表单填写：尽量采用下拉选择，需填写部分需注明要填写内容，并对必填字段作出限制。（如手机位数、邮编等等，避免无效信息）
16. 表单提交：表单填写后需输入验证码，防止注水。提交成功后，应显示感谢提示。
17. 按钮设置：对于交互性的按钮必须清晰突出，以确保用户可以清楚地点击。
18. 点击提示：点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读。
19. 错误提示：若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作。
20. 在线问答：用户提问后后台要及时反馈，后台显示有新提问以确保回复及时。
21. 意见反馈：当用户在使用中发生任何问题，都可随时提供反馈意见。
22. 在线调查：为用户关注的问题设置调查，并显示调查结果，提高用户的参与度。
23. 在线搜索：搜索提交后，显示清晰列表，并对该搜索结果中的相关字符以不同颜色加以区分。
24. 页面刷新：尽量采用无刷新（AJAX)技术，以减少页面的刷新率。
Ajax是新兴的网络开发技术的象征。它将JavaScript和XML技术结合在一起，用户每次调用新数据时，无需反复向服务器发出请求，而是在浏览器的缓存区预先获取下次可能用到的数据，界面的响应速度因此得到了显著提升。
25. 新开窗口：尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口的关闭功能。
26. 资料安全：确保资料的安全保密，对于客户密码和资料进行加密保存。
27. 显示路径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。]]></description>
			<content:encoded><![CDATA[<p><strong>一、感官体验：呈现给用户视听上的体验，强调舒适性。</strong></p>
<p>1. 设计风格：符合目标客户的审美习惯，并具有一定的引导性。<br />
网站在设计之前，必须明确目标客户群体，并针对目标客户的审美喜好，进行分析，从而确定网站的总体设计风格。<br />
2. 网站LOGO：确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间。<br />
3. 页面速度：正常情况下,尽量确保页面在5秒内打开。如果是大 型门户网站，必须考虑南北互通问题，进行必要的压力测试。<br />
4. 页面布局：重点突出，主次分明，图文并茂。与企业的营销目标相结合，将目标客户最感兴趣的，最具有销售力的信息放置在最重要的位置。<br />
5. 页面色彩：与品牌整体形象相统一，主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。<br />
6. 动画效果：与主画面相协调，打开速度快，动画效果节奏适中，不干扰主画面浏览。<br />
7. 页面导航：导航条清晰明了、突出，层级分明。<br />
8. 页面大小：适合多数浏览器浏览（以15寸及17寸显示器为主）。<br />
9. 图片展示：比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远。<br />
10. 图标使用：简洁、明了、易懂、准确，与页面整体风格统一。<br />
11. 广告位：避免干扰视线，广告图片符合整体风格，避免喧宾夺主。<br />
12. 背景音乐：与整体网站主题统一，文件要小，不能干扰阅读。要设置开关按钮及音量控制按钮。</p>
<p><strong>二、交互体验：呈现给用户操作上的体验，强调易用/可用性。</strong></p>
<p>13. 会员申请：介绍清晰的会员权责，并提示用户确认已阅读条款。<br />
14. 会员注册：流程清晰、简洁。待会员注册成功后，再详细完善资料。<br />
15. 表单填写：尽量采用下拉选择，需填写部分需注明要填写内容，并对必填字段作出限制。（如手机位数、邮编等等，避免无效信息）<br />
16. 表单提交：表单填写后需输入验证码，防止注水。提交成功后，应显示感谢提示。<br />
17. 按钮设置：对于交互性的按钮必须清晰突出，以确保用户可以清楚地点击。<br />
18. 点击提示：点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读。<br />
19. 错误提示：若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作。<br />
20. 在线问答：用户提问后后台要及时反馈，后台显示有新提问以确保回复及时。<br />
21. 意见反馈：当用户在使用中发生任何问题，都可随时提供反馈意见。<br />
22. 在线调查：为用户关注的问题设置调查，并显示调查结果，提高用户的参与度。<br />
23. 在线搜索：搜索提交后，显示清晰列表，并对该搜索结果中的相关字符以不同颜色加以区分。<br />
24. 页面刷新：尽量采用无刷新（AJAX)技术，以减少页面的刷新率。<br />
Ajax是新兴的网络开发技术的象征。它将JavaScript和XML技术结合在一起，用户每次调用新数据时，无需反复向服务器发出请求，而是在浏览器的缓存区预先获取下次可能用到的数据，界面的响应速度因此得到了显著提升。<br />
25. 新开窗口：尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口的关闭功能。<br />
26. 资料安全：确保资料的安全保密，对于客户密码和资料进行加密保存。<br />
27. 显示路径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。</p>
<p><strong>三、浏览体验：呈现给用户浏览上的体验，强调吸引性。</strong></p>
<p>28. 栏目的命名：与栏目内容准确相关，简洁清晰，不宜过于深奥。<br />
29. 栏目的层级：最多不超过三层，导航清晰，运用JAVAscrip等技术使得层级之间伸缩便利。<br />
30. 内容的分类：同一栏目下，不同分类区隔清晰，不要互相包含或混淆。<br />
31. 内容的丰富性：每一个栏目应确保足够的信息量，避免栏目无内容情况出现。<br />
32. 内容的原创性：尽量多采用原创性内容，以确保内容的可读性。<br />
33. 信息的更新频率：确保稳定的更新频率，以吸引浏览者经常浏览。<br />
34. 信息的编写方式：段落标题加粗，以区别于内文。采用倒金字塔结构。<br />
35. 新文章的标记：为新文章提供不同标识（如new），吸引浏览者查看。<br />
36. 文章导读：为重要内容在首页设立导读，使得浏览者可以了解到所需信息。文字截取字数准确，避免断章取义。<br />
37. 精彩内容的推荐：在频道首页或文章左右侧，提供精彩内容推荐，吸引浏览者浏览。<br />
38. 相关内容的推荐：在用户浏览文章的左右侧或下部，提供相关内容推荐，吸引浏览者浏览。<br />
39. 收藏夹的设置：为会员设置收藏夹，对于喜爱的产品或信息，可进行收藏。<br />
40. 栏目的订阅：提供Rss或邮件订阅功能<br />
41. 信息的搜索：在页面的醒目位置，提供信息搜索框，便于查找到所需内容。<br />
42. 页面打印：允许用户打印该页资料，以便于保存。<br />
43. 文字排列：标题与正文明显区隔，段落清晰。<br />
44. 文字字体：采用易于阅读的字体，避免文字过小或过密造成的阅读障碍。可对字体进行大中小设置，以满足不同的浏览习惯。<br />
45. 页面底色：不能干扰主体页面的阅读。<br />
46. 页面的长度：设置一定的页面长度，避免页面过长而影响阅读。<br />
47. 分页浏览：对于长篇文章 进行分页浏览。<br />
48. 语言版本：为面向不同国家的客户提供不同的浏览版本。<br />
49. 快速通道：为有明确目的的用户提供快速入口。</p>
<p><strong>四、情感体验：呈现给用户心理上的体验，强调友好性。</strong></p>
<p>50. 客户分类：将不同的浏览者进行划分（如消费者、经销商、内部员工），为客户提供不同的服务。<br />
51. 友好提示：对于每一个操作进行友好提示，以增加浏览者的亲和度。<br />
52. 会员交流：提供便利的会员交流功能（如论坛），增进会员感情。<br />
53. 售后反馈：定期进行售后的反馈跟踪，提高客户满意度。<br />
54. 会员优惠：定期举办会员优惠活动，让会员感觉到实实在在的利益。<br />
55. 会员推荐：根据会员资料及购买习惯，为其推荐适合的产品或服务。<br />
56. 鼓励用户参与：提供用户评论、投票等功能，让会员更多地参与进来。<br />
57. 会员活动：定期举办网上会员活动，提供会员网下交流机会。<br />
58. 专家答疑：为用户提出的疑问进行专业解答。<br />
59. 邮件/短信问候：针对不同客户，为客户定期提供邮件/短信问候，增进与客户间感情。<br />
60. 好友推荐：提供邮件推荐功能。<br />
61. 网站地图：为用户提供清晰的网站指引。</p>
<p><strong>五、信任体验：呈现给用户的信任体验，强调可靠性。</strong></p>
<p>62. 搜索引擎：查找相关内容可以显示在搜索引擎前列。<br />
63. 公司介绍：真实可靠的信息发布，包括公司规模、发展状况、公司资质等。<br />
64. 投资者关系：上市公司需为股民提供真实准确的年报，财务信息等。<br />
65. 服务保障：将公司的服务保障清晰列出，增强客户信任。<br />
66. 页面标题：准确地描述公司名称及相关内容。<br />
67. 文章来源：为摘引的文章标注摘引来源，避免版权纠纷。<br />
68. 文章编辑作者：为原创性文章注明编辑或作者，以提高文章的可信度。<br />
69. 联系方式：准确有效的地址、电话等联系方式，便于查找。<br />
70. 服务热线：将公司的服务热线列在醒目的地方，便于客户查找。<br />
71. 有效的投诉途径：为客户提供投诉或建议邮箱或在线反馈。<br />
72. 安全及隐私条款：对于交互式网站，注明安全及隐私条款可以减少客户顾虑，避免纠纷。<br />
73. 法律声明：对于网站法律条款的声明可以避免企业陷入不必要的纠纷中。<br />
74. 网站备案：让浏览者确认网站的合法性。<br />
75. 相关链接：对于集团企业及相关企业的链接，应该具有相关性。<br />
76. 帮助中心：对于流程较复杂的服务，必须具备帮助中心进行服务介绍。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.86ue.com/archives/661/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
