<?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; 网站体验</title>
	<atom:link href="http://ucd123.cn/Categories/web_experience/feed/" rel="self" type="application/rss+xml" />
	<link>http://ucd123.cn</link>
	<description>以用户为中心，抓住细节才能抓住用户</description>
	<lastBuildDate>Sat, 03 Jul 2010 07:55:23 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>设计中的色彩：热情的红色</title>
		<link>http://ucd123.cn/2010-04-shejizhongdesecaireqingdehongse/</link>
		<comments>http://ucd123.cn/2010-04-shejizhongdesecaireqingdehongse/#comments</comments>
		<pubDate>Thu, 22 Apr 2010 06:35:46 +0000</pubDate>
		<dc:creator>岸边</dc:creator>
				<category><![CDATA[网站体验]]></category>
		<category><![CDATA[设计细节]]></category>
		<category><![CDATA[设计，红色，热情，]]></category>

		<guid isPermaLink="false">http://ucd123.cn/?p=854</guid>
		<description><![CDATA[译自：The Passionate Color Red 中文原文：设计中的色彩：热情的红色 原作者：Jennifer Farley 请尊重版权，转载请注明来源！ 今天是一个新的系列文章的开始，我们将讨论设计中的单个色彩，包括一个简要的色彩心理学理论和大量可见的实例。色彩是设计中的一个很重要的元素。它被用于影响我们的心情，影响购物选择，以及作为情感的象征。那么让我们从最富有感情的色彩(也是本人最喜欢的)&#8212;&#8212;红色开始吧。 对色彩的看法可能比较主观，但是有一个普遍的认识就是，暖色调聚集在色谱中红色的区域(红色、橙色、黄色)，而冷色调则一蓝色为中心(蓝色、绿色、紫色)。红色产生温暖与舒适的情感，还有敌对和愤怒。世界上绝大部分的交通灯，红色代表&#8220;停&#8221;。色疗或者光疗法研究显示红色可以增加血压和呼吸的频率。在远东地区的新娘常常穿红色的衣服；红色在南非却是丧服的颜色；在印度代表正直；而曾经在苏联红色代表共产主义，在俄国人推翻了沙皇的统治之后，开始使用红色的旗帜。红色在中国也有特色的意义，新人结婚的时候会在家里贴上大大的红色的&#8220;囍&#8221;字，新年的时候各家各户也会贴上红色的对联和门画，代表喜庆和幸福。红色的汽车最容易被盗。 我们在日常用语中使用红色描述一些事情：我们会大怒(see red)、有大喜之日(red letter day)、坐上红眼航班(red eye flight)、扑上红地毯(red carpet)然后狂欢作乐(paint the town red)。还有红娘、戴红帽、红颜知己等。毫无疑问，红色对很多人以为着很多事情。 设计中的红色 当提到设计，红色会吸引注意。它不是个低调的背景颜色，它会在页面中&#8221;叫喊&#8221;，它会从照片中跳出来。你可以很大胆地在整个设计中广泛使用，就算是一点点也会起到很大的作用。看一下下面的这两个电影海报。它们定位于两类完全不同的观众却都用了红色来抓取我们的注意。&#8220;Burn After Reading&#8221; (该设计是对Saul Bass的一种尊敬)使用一种大红色背景和大号亮色字体。它看起来乐观。 &#8220;The Dark Knight(蝙蝠侠6：黑暗骑士)&#8221;的海报通过红色的看起来像血的字体给人一种比较邪恶的感觉 红色在logo设计中相当流行，毫无疑问这是因为它吸引注意力的能力。这里是一些可能你已熟知的使用红色的logo设计： 当要在网页设计中使用红色，一些设计师选择了大胆，用红色作为主色调。这的确需要勇气，因为它可能会非常的势不可挡从而突然打断用户。这里是一些&#8220;闪亮的&#8221;红色设计。 Too Much Tweet Jon Wallace Godmother Youth Against Sudoko Tuesday 其它很多设计则使用一点或者少许的红色以凸显整体的色盘: Pama Liqueur Upload Pie glazbenaskolakrizevci Levilive 红色的寓意:爱、丘比特、愤怒、地狱、魔鬼、激情、停止、高能量、血、危险。 源地址：http://www.qianduan.net/design-colors-passion-red.html 随机日志2010年01月27日 -- 脆弱的用户体验 (1)2009年11月12日 -- [...]]]></description>
		<wfw:commentRss>http://ucd123.cn/2010-04-shejizhongdesecaireqingdehongse/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>象素画の初体验</title>
		<link>http://ucd123.cn/2010-01-xiangsuhuachutiyan/</link>
		<comments>http://ucd123.cn/2010-01-xiangsuhuachutiyan/#comments</comments>
		<pubDate>Wed, 06 Jan 2010 06:09:42 +0000</pubDate>
		<dc:creator>岸边</dc:creator>
				<category><![CDATA[关注细节]]></category>
		<category><![CDATA[网站体验]]></category>
		<category><![CDATA[设计细节]]></category>
		<category><![CDATA[2010]]></category>
		<category><![CDATA[LOGO]]></category>
		<category><![CDATA[New Year]]></category>
		<category><![CDATA[Taobao]]></category>
		<category><![CDATA[UED]]></category>
		<category><![CDATA[の初体验]]></category>
		<category><![CDATA[淘宝]]></category>
		<category><![CDATA[象素画]]></category>

		<guid isPermaLink="false">http://ucd123.cn/?p=588</guid>
		<description><![CDATA[Pixel art is a form of digital art, created through the use of raster graphics software, where images are edited on the pixel level. Graphics in most old (or relatively limited) computer and video games, graphing calculator games, and many mobile phone games are mostly pixel art. 以上是wikipedia对pixel art的解释，本人读书少，翻译得不好…In sum,无外乎就是说pixel是计算机图形处理能力低下的时代，一种数字艺术形式，在一些比较老式的游戏中被大量使用云云。Pixel上升为art的形式就要归功于eboy了。很多人说，eboy的作品和风格是pixel art的巅峰，后人都跳不出他们的框框，我想，eboy最利害的其实不是他们的作品有多么精细，因为pixel画得好的大有人在，而是他们天马行空的想象力，只有两者结合在一起才能成为master piece…相对于想象力、技法太容易被模仿。Anyway，我有机会师从书安尝试一下这种“古老”的数字艺术形式。 整张画采用像素画中最常用的26.6度俯视角度（ps.也有很多人认为是22.6度）。首先当然要从淘宝LOGO和UED LOGO画起。淘宝网LOGO是先画了侧立面，然后再画纵深，但发现这样非常麻烦，背景与标准侧面常常无法对齐，之后画UED LOGO时改变了一下，先用黑色线框把结构描好，然后画不同面的过渡色，最后画高光，速度快一点，当然也可能是已经熟悉了的缘故。整个淘宝的工作桌几乎都是一样的，所以只要画好一张，copy [...]]]></description>
		<wfw:commentRss>http://ucd123.cn/2010-01-xiangsuhuachutiyan/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>轻设计，让网站灵敏轻便的6个技巧</title>
		<link>http://ucd123.cn/2009-12-qingshejirangwangzhanlingminqingbiande6gejiqiao/</link>
		<comments>http://ucd123.cn/2009-12-qingshejirangwangzhanlingminqingbiande6gejiqiao/#comments</comments>
		<pubDate>Mon, 14 Dec 2009 03:31:40 +0000</pubDate>
		<dc:creator>岸边</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[网站体验]]></category>
		<category><![CDATA[6个技巧]]></category>
		<category><![CDATA[LOGO]]></category>
		<category><![CDATA[网站灵敏]]></category>
		<category><![CDATA[网站轻便]]></category>
		<category><![CDATA[轻设计]]></category>

		<guid isPermaLink="false">http://ucd123.cn/?p=450</guid>
		<description><![CDATA[在网站或软件的策划和设计过程中，我们经常听到这样的讨论：“这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热的话题，也是方兴未艾的Web2.0大浪下设计师们的最爱（看看那些在全世界遍地开花的SNS网站，无论是视觉元素还是交互流程均能轻则轻）。本文主要从实践和总结的角度出发，提出了让设计变得更轻的6个技巧。 何为轻设计： 在开始之前先需要明确下何为轻设计。这里并不想给轻设计下一个专业的定义，只是归纳了大家对轻设计所应具有的特性的理解。 具有灵敏的可交互元素：页面上的链接、文本框、按钮等可交互元素能灵敏地响应操作并即时反馈。 轻便的流程和提示，不打断用户的当前任务：一项任务尽量用少而清晰的步骤去完成，提示和临时任务尽量不中断用户主任务，不要让用户做不必要的确认和操作。 不干扰用户的注意力：用户是来使用产品和服务的，而不是来欣赏精美的设计，如果使用过程中会因为设计元素分散注意力那么可能是设计太重了。试着少用些无用的装饰和细节。 轻设计的6个技巧： 1. 灵活的logo响应区 点击网站的logo通常能将我们带回到首页。从这个角度看，Logo不仅起着品牌标识的作用，还承担了重要的导航功能。就连普通的链接当在鼠标划过时都有下划线或者变色提示，那么logo作为一个更为重要的可交互元素，是否也应该在鼠标划过时提供适当的反馈呢？ 下面列举了几个logo区灵活响应鼠标例子，在使用过程中发现，小小的变化不仅提升了可用性，还让网站显得灵敏而有生气。 2. 灵敏的可交互元素 导航对于网站的重要性不言而喻，导航元素要即时响应鼠标操作。 重要的操作和引导按钮应该设计得更加细致些，包括按钮的三态（常态，hover，active）甚至四态（增加一个禁用态）。这么做也是为了使重要的可交互元素对不同的操作及时给出反馈，使其显得灵敏高效。 文本框的状态也是一个容易被忽略的细节，主要是获取焦点后无提示或者提示不够明显。 另外对于一些响应时间稍长的操作，应该给出进度反馈。似乎是显而易见的道理，但是设计中往往也容易忽视。 3. 清晰且温和的提示 提示通常都是提供辅助性信息的，既然是辅助性的，就不宜喧宾夺主过分强化。除非必要，也最好不要给用户带来额外的操作（比如需要用户主动关闭，确认等）。提示的内容也是为了带来帮助或者提供反馈，因此言简意赅最重要。 twitter中更换个性化主题时的提示，从页面顶部柔和出现，停留片刻后自动消失。 meme中的follow提示，在操作处出现。 4. 隐藏或弱化不常用的操作 不常用的操作可以弱化，或者隐藏起来，当鼠标经过的时候再出现。这个是基于上文提到的不干扰用户注意力角度出发的。 Twitter中将每条微博条目的操作隐藏了起来，减小了对阅读的干扰。而且在鼠标经过条目响应区和操作时，都有相应的变化以作为反馈。 flickr中针对照片的操作也使用淡灰色，尽可能弱化和减少对照片浏览的干扰。 5. 引导和强化推荐操作 强而明晰的引导是十分必要的，研究表明用户在浏览页面的时候是跳跃性、非线性的，用户并不喜欢在诸多的操作中选择和寻找最佳选项。所以清晰的引导就显得更加重要了。重要和常用操作还可以特异处理，以便于寻找和点击。 大而易用的表单和注册按钮 箭头和红色的按钮一起提供了明晰的视觉路径指引。 常用操作的特异处理。某些浏览器的后退操作也有类似处理。 6. 轻便处理临时任务 如果在看一部精彩电影的时候想喝水了，是希望走到厨房间倒水呢还是希望手边就有一个杯子和水壶？显然人们都不太愿意中断主任务和注意力去处理临时任务，页面设计也是如此，能在当前页面完成就尽量在当前页面完成。模态窗口、跳转页面、付出层等都不是让用户觉得舒服的做法。除非确实必要，少使用这样的做法。 flickr中对相片名字的即时编辑，当页完成，非常轻巧。 Delicious中对收藏条目的删除确认，同样在当页完成，轻巧且很好地降低了骚扰。 小结： 本文从可用性角度提出了轻设计的几个技巧： 1. 灵活的logo响应区； 2. 灵敏的可交互元素； 3. 清晰且温和的提示； 4. 隐藏或弱化不常用的操作； 5. 引导和强化推荐操作； 6. 轻便处理临时任务 以上仅是个人的实践和经验总结，欢迎大家指出不足之处并提供更多轻设计方面的建议。 源地址：http://www.kevinzhong.com/index.php/2009/6-tips-for-creating-sensitive-website/ 网友还看了相关的2010年01月6日 [...]]]></description>
		<wfw:commentRss>http://ucd123.cn/2009-12-qingshejirangwangzhanlingminqingbiande6gejiqiao/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>浅析Banner构成与创意设计</title>
		<link>http://ucd123.cn/2009-12-qianxibannergouchengyuchuangyisheji/</link>
		<comments>http://ucd123.cn/2009-12-qianxibannergouchengyuchuangyisheji/#comments</comments>
		<pubDate>Fri, 11 Dec 2009 06:47:42 +0000</pubDate>
		<dc:creator>岸边</dc:creator>
				<category><![CDATA[关注细节]]></category>
		<category><![CDATA[网站体验]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[Banner]]></category>
		<category><![CDATA[cult-f]]></category>
		<category><![CDATA[dongfeng-nissan]]></category>
		<category><![CDATA[icondock]]></category>
		<category><![CDATA[oypro]]></category>
		<category><![CDATA[peminoz]]></category>
		<category><![CDATA[prville2009]]></category>
		<category><![CDATA[rareformbranding]]></category>
		<category><![CDATA[创意设计]]></category>
		<category><![CDATA[构成]]></category>

		<guid isPermaLink="false">http://ucd123.cn/?p=452</guid>
		<description><![CDATA[当用户访问一个网站的时候，第一屏的信息展示是非常重要的，很大程度上影响了用户是否决定停留，然而光靠文字大面积的堆积，很难直观而迅速的告诉用户来到这里会得到什么有用的信息，因此网页Banner设计在这里起到了至关重要的展示作用，特别是对于首页Banner，有效的信息传达让用户和文字之间的互动变得生动而有趣，下面就让我们通过大量优秀的设计案例走进Banner设计，走进设计师们的灵感挥洒空间。 一.Banner的构成与设计形态分解 自然界的万物形态构成都离不开点、线、面。它们是视觉构成的基本元素，具有不同的情感特征，因此要善于采用不同的组合去体现不同Banner的情感诉求。 a.点的聚合 点的排列所引起的视觉流动，引入了时间的因素,利用点的大小、形状与距离的变化，可以设计出富于节奏韵律的画面。点的连续排列构成线，点与点之间的距离越近，线的特性就越显著。点的密集排列构成面，同样，点的距离越近，面的特性就越显著。 http://www.peminoz.com/ http://icondock.com/ 无数图形的点聚合在一起，增强画面的韵律感 http://www.apple.com/ b.线的流动 线分为四类：直线、曲线、折线以及三者的混合。直线又有水平线、垂直线、斜线三种形式。其中，水平线给人平静、开阔、安逸的感受；垂直线给人崇高、挺拔、严肃的感受；曲、折、弧线具有强烈的动感，更容易引起视线的前进、后退或摆动。 http://oypro.com/ http://www.dongfeng-nissan.com.cn/3Ddrive/ 严谨的线条，使页面稳重富有理性 c.面的分割 面在设计中的概念，可以理解为点的放大，点的密集或线的重复。Banner元素在不同大小色块元素的风格对比下，能获得清晰、条理的秩序，同时在整体上也显得和谐统一 http://rareformbranding.com/ 清晰突出的图片所产生的第一视觉点 http://www.cult-f.net/ 色块与线条间不同比例的分隔画面，使页面具有形式美感 http://www.prville2009.com/ 二.Banner设计的形式美法则 在banner设计中采用特殊的形式结构，会使网页变得个性十足并很好的区别于同类产品，让人记忆深刻。 a.有机形的柔和与美 有机形是由一定数量的曲线组合而成，是自然物外力与内力相抗衡而形成的形态。有机形富有内在的张力，给人以纯朴、温暖而富有生命力的感觉。 曲线与个性化的插图形成强烈的对比。 http://www.wildaboutgardening.org/ b.偶然形的独特魅力 偶然形是力的作用下随机形成的图形，它具有天然成趣的效果，利用偶然因素提炼美的方法，让Banner设计更加与众不同。 偶然形使页面产生趣味性 三.有效的设计创意方法 a.预留大面积的Banner空间创作 Banner设计占用很大的空间，且占用的空间是重要而有价值的面积，那么你需要万分小心的去处理，但是如果处理的好的话，它将会事倍功半，而且信息传达非常有效。 http://tearoundapp.com/ http://digitalmash.com/ b.有效的措辞与行为导向按钮 在banner设计中通过真实产品的展示，并配以鼓动人心的措辞口号及醒目的可以直接诱导用户点击的行为导向按钮，让网页获得更多的用户点击和关注目光。 http://www.guifx.com/ http://www.campaignmonitor.com/ c.插图及清新手绘让页面倍感亲切 http://srburns.es/ http://www.mailchimp.com/ http://www.hdlive09.co.uk/ d.引入肢体语言让画面变得生动 http://www.kompakt.cz/ http://www.ronniesan.com/ http://www.tolingo.com/ http://www.kinoz.com/ e.丰富的产品展示组合效果 用堆积这种效布局特效来展示不同的作品示例，并附上一条介绍性质的口号，网页变得更有说服力，丰富而富有层次感。 http://www.htc.com/asia/ http://www.darrenhoyt.com/ http://deaxon.com/ http://digitalmash.com/journal/articles/dynamic-columns/ http://www.shopify.com/ [...]]]></description>
		<wfw:commentRss>http://ucd123.cn/2009-12-qianxibannergouchengyuchuangyisheji/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>社会化软件 – 又一个影响社会的应用</title>
		<link>http://ucd123.cn/2009-11-shehuihuaruanjianeeyouyigeyingxiangshehuideyingyong/</link>
		<comments>http://ucd123.cn/2009-11-shehuihuaruanjianeeyouyigeyingxiangshehuideyingyong/#comments</comments>
		<pubDate>Tue, 17 Nov 2009 01:21:29 +0000</pubDate>
		<dc:creator>岸边</dc:creator>
				<category><![CDATA[网站体验]]></category>
		<category><![CDATA[SnS]]></category>
		<category><![CDATA[影响]]></category>
		<category><![CDATA[社会化]]></category>
		<category><![CDATA[软件]]></category>

		<guid isPermaLink="false">http://ucd123.cn/?p=392</guid>
		<description><![CDATA[by core jr From Core77 Xiao Ni，Matrining 译，转载请注明 ifanr.com 译文链接。 T-shirt by Simon Crowley 根据个人视角，你可能会觉得社会化软件很火爆或很过时，你知道这些东西： Facebook, MySpace, Twitter, YouTube, Flickr, Foursquare…现在一谈及网络，就不可避免会提到这些应用，显然，社会化软件正在迅速成为我们日常生活的一部分。 这种趋势不仅仅发生在个人用户身上，同样的，公司和大型组织也在试图从社会化网络以及脱胎换骨的协作工具上获利。它们希望能够按照 facebook 的方式 组织自己的内部网络。它们想要利用这些工具来影响员工的看法（注：所谓的 crowdsourcing，这个奇怪的词来自 outsourcing，意思是集 中不相干个体的群体智慧来完成某个任务。），同时它们也在使用 Wiki（注：个人以为 Wiki 是把双刃剑，对于企业来说，维护一个庞大的Wiki，保证其 内容的准确和真实是个沉重的负担。），让用户社区来负担部分产品支持的任务。它们同样想要使用 Twitter 来发布信息（不管做没做，至少它们有这个意 愿。） 在工业和交互设计中，以人为本的设计思想长久以来一直集中注意力研究人类的行为，通过这种研究来创建正确且恰当的设计。但是社会化交互设计师不能仅仅关注人、环境和已存在的工具，他同样需要考虑到某些并不易见的东西，比如社会关系、权力的交替以及文化限制。 因此现在有大量发展中的社会化软件，同样还有大量创意未被开发。但是，相对于如此多的新闻和吹捧而言，绝大多数的社会软件，在处理社会关系上相当笨拙。举一个例子来说，我们用一出英式喜剧：Idiots of Ants 来调侃一下 Facebook，Idiots of Ants （你只有在用英音说这几个词的时候才会有调侃效果）将 Facebook 的社会化行为发挥到了极致，但是 Facebook 却不是它唯一的选择。 Twitter， 另一个取得巨大成功的社交工具，刚开始的时候仅仅在朋友之间尝试简短的信息问候，但是它却逐渐演变成了被广泛使用的实时交流工具。虽然 Twitter 对于 及时性交流和名人追逐方面有着独特的优势，但是它众人皆同的设计方式对于追求差别的社会化软件来说显得那么单调乏味。 一种截然不同的开发方式 公平的说，我们目前还处于社会化软件的初级阶段。打个比方，Facebook [...]]]></description>
		<wfw:commentRss>http://ucd123.cn/2009-11-shehuihuaruanjianeeyouyigeyingxiangshehuideyingyong/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>《Web信息架构》-导航系统</title>
		<link>http://ucd123.cn/2009-11-webxinxijiagou-daohangxitong/</link>
		<comments>http://ucd123.cn/2009-11-webxinxijiagou-daohangxitong/#comments</comments>
		<pubDate>Mon, 16 Nov 2009 00:41:26 +0000</pubDate>
		<dc:creator>岸边</dc:creator>
				<category><![CDATA[网站体验]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[web信息架构]]></category>
		<category><![CDATA[信息架构]]></category>
		<category><![CDATA[导航系统]]></category>
		<category><![CDATA[社会化]]></category>

		<guid isPermaLink="false">http://ucd123.cn/?p=370</guid>
		<description><![CDATA[导航系统的作用：告诉你在哪里，可以去哪里，这里有什么，附近有什么，指引你下一步的行为。 导航系统的分类：全站、区域、情境式、辅助性导航。 浏览器的导航特点 考虑浏览器环境，其实浏览器上已经有后退、前进、收藏、设为首页等功能，但有时候在页面本身的浏览情境当中也最好要放这些功能，比如在浏览一篇文章，到了结尾能看到[收藏]、[关闭]、[返回]等功能可以方便不少用户看完后其它意图的操作。还有就是区分有无链接的文字样式，区分是否浏览过文字的样式（这些其实是编写CSS样式范围内的）。 建立情境 最典型的例子用户随便从Google搜索到一张网页，当点击进入页面后，就算是进入了一个情境中。情境中应该告诉用户这是在哪里？（我在什么位置，这是什么网站），这里有什么（页内标题），用户下一步能做什么（能看，能下载，能购买），还能去哪里（栏目，本栏页内导航），以上几点类似于《Don&#8217;t make me think》中内页的6点基本要素：1.站点ID、2.页面名称、3.栏目下一级栏目、4.页面导航、5.“你在这里”指示器、6.搜索。 改善灵活性 网站中各栏目之间的内容可能保持垂直的排列方式，但用户在访问内容时要考虑Ta们可以会随时跳转到其它栏目的二级、三级页面中，保持横向和纵向的导航，注意不要导航辅助功能的设置。提供增加的情境和灵活性，弥补等级式系统的不足之处。 全站导航系统 全站导航系统就是要在网站上的每一页都会展示的导航系统，可直接连向重要的区域和功能，无论用户在哪个层次中。全站导航保持一致性，以密集且重复来访的用户为中心，进行设计和测试。 值得一提：具有情境式的全局导航系统，这类导航不仅告诉你这里有什么内容，还告诉用户正在哪块内容中。（图1） 图1 区域导航系统 当用户进行某个栏目中后，可能该栏目还会分很多小栏目，把这些小栏目列出来，方便用户可以立刻浏览那些内容，有些网站会把全站导航和区域导航整合成一致且统一的系统，如下拉菜单。和全站导航一样，在同一个站点中他们的表现形式最好一致且统一的。 情境式导航 进入目的页面后，会有一些内容指向特定的网页、文件、对象。比如网站上的“相关文章”，“喜欢这个商品的用户也会喜欢”，“同类TOP10”，要注意[情境式全局导航系统]主要是说明所处的位置，[情境式导航]是说明在这张页面内容的情境下，有什么相关内容可以告诉并提供链接给用户（称外部情境式导航链接，玩概念：）。比如你在Joyo买《精通CSS》这本书，在介绍这本书的页面中，总会有一些链接是指向与CSS类的其它书籍。还有一种是在文章叙述的文字中放链接（称内联情境式导航链接，玩概念：）。 实践嵌入式导航 认识到全站、区域和情境区导航元素都在大多数网页上同时共存，如何在网站中整合好。不过这个问题可能涉及到：网站栏目多少、页面结构复杂度、实现一些效果的JS程序、交互过程相关这些。 辅助性导航系统 包括网站地图、索引、指南。确保大型网站可用性和可寻性的关键。 网站地图：1.强化信息层次，使得用户熟悉对内容的组织方式。2.对了解网站用途的用户，则便利其快速、直接访问内容。3.避免让用户承担太多信息，协助用户。网站地图强化层次感，探索感。网站地图有一个很实在的好处,当你在搜索引擎中找到某个网站，它可以直接把你带到相关的栏目中。（图2） 图2 网站索引：就是将网站的内容以关键词、词汇、标签按一定顺序(字母，笔划)排列而成。内容之间可以没有等级关系。方便已知条目的寻找，比如歌星中找“曾轶可&#8221;，只要有找首字首拼音“Z”就可以。 对小型网站可以利用你对内容了解的知识来决定要引入哪些链接，来创建索引。 对大型网站首先用户从索引中选择术语，再从以该术语为索引的文件清单中选出想要的。 指南:网站的新手指南。设计指南原则1.指南要短。2.无论何时，用户都能离开指南。3.允许用户在指南中，前进，后退的自由移动。4.指南的设计目的是回答问题的。5.截图应该明确，具有把重点功能放大的效果。6.如果指南有好几页，要目录。 向导和配置器：主要是协助用户选择配置产品细节（图3） 图3 高级导航方法 个性化和定制化：个性化(猜测用户想要什么。在特定环境中会运行的很好，但在用户体验时，就会失败)就是针对个人的行为、需求、喜好提供剪裁后的网页给用户。如网上买书时，会有“推荐同类书籍”，可能有些推荐的书你已经买过并看过了。定制化(用户告诉我们想要什么。但有时候用户自己都不知道他们要需要什么)是给用户直接控制权，可以针对展现格式、导航和内容选项的组合做调整。如Google　Reader。 可视化：让用户可能采用可视化的方式浏览GROXIS。(在网上浏览博物馆网站时就像逛现实生活中的博物馆一样身临其境的感觉，想了想谷歌音乐的[挑歌]栏目可能比较类似这种概念) 社会化导航：用户上网的需求点、兴趣点可以从观察其它用户行为中推论出来的基础上。比如说一些人上论坛，微博时就是看最近有什么网络话题，关注一些热门的标签，标题；而这类标签，话题主要是通过搜索日志、使用量统计数据、顾客数据库等站长统计软件中获得。（其实这也是情境式导航，只不过作者用这类导航的产生方式来归纳：这类导航的内容是通过用户的行为统计产生的，就成了[社会化导航]了）（完） 相关话题：《web信息架构》 源地址：http://www.08show.com/blog/article.asp?id=326 网友还看了相关的2010年01月9日 -- 展望：2010 Web 设计应用趋势观察 (0)2009年11月17日 -- 社会化软件 – 又一个影响社会的应用 (0)]]></description>
		<wfw:commentRss>http://ucd123.cn/2009-11-webxinxijiagou-daohangxitong/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>新版LinkedIn：改进导航栏，主页更简洁</title>
		<link>http://ucd123.cn/2009-11-xinbanlinkedingaijindaohanglanzhuyegengjianjie/</link>
		<comments>http://ucd123.cn/2009-11-xinbanlinkedingaijindaohanglanzhuyegengjianjie/#comments</comments>
		<pubDate>Tue, 10 Nov 2009 14:13:38 +0000</pubDate>
		<dc:creator>岸边</dc:creator>
				<category><![CDATA[网站体验]]></category>
		<category><![CDATA[Linkedin]]></category>
		<category><![CDATA[主页]]></category>
		<category><![CDATA[交友网站]]></category>
		<category><![CDATA[导航]]></category>
		<category><![CDATA[导航栏]]></category>
		<category><![CDATA[新版]]></category>
		<category><![CDATA[简洁]]></category>

		<guid isPermaLink="false">http://ucd123.cn/?p=311</guid>
		<description><![CDATA[原文作者：Sarah Perez 原文链接：LinkedIn Reveals New Look, Better Navigation 译者：pestwave 商业社交网站LinkedIn最近对网站的导航栏和用户界面进行了改版，旨在简化网站浏览，提供更加简洁紧凑的页面。但效果如何呢？   更新：导航改进，空白更多 新版LinkedIn的最大特色就是页面顶部的通用导航栏，其中包括了档案、联系人、群组、工作、收件箱、更多等链接。点击任何一个项目都会出现一个下拉式菜单，并可以提供更多选项，浏览体验更加现代化。 公司还称新界面和体验减少了页面滚动的次数。但是，在联系人和群组有更新时，页面滚动的次数和联系人数量及其活跃程度有关。还好LinkedIn不是那种需要天天登陆的网站。 此外新主页还包括可移动、可收起的侧边栏模块，可以显示谁看过你的档案，事件、工作列表等内容。 简洁的界面凸显广告 新版“简洁”网站的一个缺点就是广告更加明显，当然这对LinkedIn来说是一个优点。尽管广告位没有什么变化，但是新版界面让广告显得更加突出。现在所有内容都以黑色或蓝色文本显示在白色背景上，因而用户登录时首先映入眼帘的就是页面顶部的全彩广告。此外，导航栏下还有一个引人注目的文本广告链接，并且字体为更深的加粗字体。  LinkedIn称新版网站是在经过几年的可用性研究之后的成果，但还不是最终产品。 有待改进: LinkedIn收件箱 不幸的是收件箱还没有明显改进。虽然你可以通过现在的收件箱方便地接受、拒绝、或存档邀请，但收件箱还不支持批量操作。更糟糕的事情是，在接受或拒绝完邀请之后，消息仍然会留在你的收件箱里，你需要手动存档。   源地址：http://www.yeeyan.com/articles/view/pestwave/67488 网友还看了相关的2009年11月11日 -- 翻转页面导航 (0)2009年11月7日 -- 美国排行前25名的网站CNN.com 将彻底改版 (0)2009年11月5日 -- 亚马逊购物的用户体验分析 (2)]]></description>
		<wfw:commentRss>http://ucd123.cn/2009-11-xinbanlinkedingaijindaohanglanzhuyegengjianjie/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>守、破、离：我对sns产品理解的过程</title>
		<link>http://ucd123.cn/2009-11-shoupoliwoduisnschanpinlijiedeguocheng/</link>
		<comments>http://ucd123.cn/2009-11-shoupoliwoduisnschanpinlijiedeguocheng/#comments</comments>
		<pubDate>Mon, 09 Nov 2009 13:37:35 +0000</pubDate>
		<dc:creator>岸边</dc:creator>
				<category><![CDATA[网站体验]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[SnS]]></category>
		<category><![CDATA[产品理解]]></category>
		<category><![CDATA[工具]]></category>
		<category><![CDATA[校内]]></category>
		<category><![CDATA[沟通模式]]></category>
		<category><![CDATA[海内]]></category>
		<category><![CDATA[蚂蚁网]]></category>
		<category><![CDATA[过程]]></category>

		<guid isPermaLink="false">http://ucd123.cn/?p=276</guid>
		<description><![CDATA[最近看一个哥们msn签名，“守、破、离”，非常喜欢。这三个阶段论和王国维为学三段论，异曲同工。但日本人把从认知到创新的过程，说得更准确一些。在做蚂蚁网的过程中，我经历了这三个阶段。所以结合蚂蚁网实践，介绍一下我们对sns“守，破，离”的认知过程，供参考。此帖仅发5g，请勿转帖。谢谢。守：我犯过很多错误，其中一件愚蠢的错误发生在4年前。当时在一个关于社区的会议上，我演讲结束后，王兴过来自我介绍，说做了一个校园社区叫校内网，想听听我的意见。我当时随口就说，“域名挺好的，但这个网站没戏啊——你怎么和校园bbs竞争呢？”后来事实证明，当时我的信口开河，是多么愚蠢。但是，当时我之所以信口开河，恰恰不是我不了解校园社区，正是我相当了解南大小百合之类的网站（我在某网站，曾经参与试图收购南大小百合的项目），我才会用既有的模式去套当时来说创新的事物（SNS）。成见，就是我犯错的原因。但更进一步来看，实际上问题在于我还是不够了解大学生用户需求。我没有看到一种真正出现的变化——数码相机。这话也许现在有些人还不理解，但概括的说，SNS的兴起，最基础的原因在于数码相机的普及。正是数码相机的普及，才有MySpace开始，网友之间的interactive变得有“内容”，才慢慢形成sns。这也是为什么在MySpace之前那么多社区或交友网站都倒了的原因。但你要说王兴在当时看到了这些？他也没有。但是他非常善于“守”，非常诚恳地把facebook抄了过来。我现在认为，先“守”后“破”，这种策略是最有效的。最近陈一舟有个访谈，说的也是这个意思；但有些朋友认为陈一舟是在为“抄袭”辩解。就算是“辩解”也无所谓，先“守”后“破”确实是创业最好的途径，破：在08年3月，我们上线了改版后的蚂蚁网，这个版本的蚂蚁网就是对facebook的“守”。但不久之后，我们就发现了两个问题，逼得我们不得不创新。第一个问题就是关于“feed”和“用户空间”，到底谁是交互的着陆点？第二个问题是关于feed的算法，既如何设计算法，使得feed既全面又不产生过多信息噪声。通过思考这些问题，我们发现facebook自身也有很多问题，有些事情他们也没考虑好，没法借鉴了，只能自己琢磨。（说到这里，我说个细节：蚂蚁网的feed算法比现在discuz的uc要强。主要5g的用户基本没有长期趴蚂蚁网的，所以你们体会不到。但在这些关键的细节，我们在蚂蚁网确实下了功夫反复琢磨优化）随后，我们对facebook模式做了很多“破”的工作。其中关键都是为了解决facebook是一个面向熟人的Network结构，而我们蚂蚁网是面向生人的Networking。在这个过程中，我一直关注留意开心001的“破”，他们对facebook也是有突破。但我当时就认为，开心001的“破”是一条快速见效，但不能解决sns根本问题的途径。我现在亦如是观。但从uc也开始引入游戏组件后，尤其是开心农场火爆之后，表面上似乎中文sns就必须如此了。所以我现在只好说，蚂蚁网不是sns了。：）离：开心001的游戏sns模式，并没有让我产生困扰。真正让我困扰的是当我们对facebook模式做了很多“破”的工作后，我们依旧不能成为一个中文用户认为是“性感的”产品。我一直在思考，可以说到最近半年，才豁然开朗。无论MySpace，facebook，twitter，我都不再拘泥于他们的产品特点，不再“迷信”他们的功能设计。我现在认为，sns是一种沟通“工具”，关键不是“关系”，而是“沟通模式”（interactive）。压在我心头的“三座大山”（MySpace/fb/twitter），终于可以远离了。从不相信facebook起，到相信fb，改变fb，直到现在“忘记”fb/twitter等等网站，这就是我对sns的实践认知过程。从中我只得到一条经验：只有真正了解用户，才能心中有数；别的都不靠谱，不要听别人忽悠。 相关话题：中文SNS的现状与机遇 源地址：http://www.5gme.com/space-163-do-blog-id-83931.html 网友还看了相关的2010年02月7日 -- 信息分类是为了更好的索引 (0)2009年12月8日 -- 接着“思”“践”，为啥新浪微博在中国能火？ (0)2009年11月17日 -- 社会化软件 – 又一个影响社会的应用 (0)]]></description>
		<wfw:commentRss>http://ucd123.cn/2009-11-shoupoliwoduisnschanpinlijiedeguocheng/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Google wave初体验</title>
		<link>http://ucd123.cn/2009-11-googlewavechutiyan/</link>
		<comments>http://ucd123.cn/2009-11-googlewavechutiyan/#comments</comments>
		<pubDate>Sun, 08 Nov 2009 22:58:16 +0000</pubDate>
		<dc:creator>岸边</dc:creator>
				<category><![CDATA[网站体验]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Google Wave]]></category>
		<category><![CDATA[google.com]]></category>
		<category><![CDATA[新产品]]></category>

		<guid isPermaLink="false">http://ucd123.cn/?p=275</guid>
		<description><![CDATA[google的新产品wave邀请来了，一开始很难理解这是个啥？甚至出现了这个网站来嘲讽wave的令人费解，据说是facebook的员工建立的，但至少，经过几天的试用了，如果要让我从facebook和wave两个中做出选择，我更愿意选择wave,（虽然这个结果也包括脸书被墙了，多少有点无奈）确实，google wave不是一句话可以准确形容的产品，如果我说是沟通利器，又几乎等于什么也没说，之所以我开篇拿facebook和wave做比对，是因为他们都在关注用户联系，分享，其中涉及一个很核心的需求—人际沟通，甚至后者更加直接了当。  也许有人会说，这早不是什么新鲜的玩意，沟通有啥可做的，岂不知，人类最本能的几大类需求中，可挖掘和完善的空间几乎无以限量，比如交通，我们今天仍然在超越前人的想象，无疑，现在再谈google的野心已经没有必要了，因为它太强悍，无论是从哪个角度，技术、产品设计、系统竞争力、数据、想象力都让我们为之汗颜，抛开用户市场的差异不谈，google的所有新产品的诞生，总有让人觉得兴奋和希望的憧憬，因为它是将技术，商业以及需求结合得最好的公司，当然，中国市场例外，国内的互联网市场确实一直在各种原因下还处于简单粗暴的野蛮时代。例外，它也不需要像facebook和twitter一样急于证明自己的商业价值和存在。 一开始接触wave，的确很纳闷，全新的界面和新奇的交互，还有听上去很累赘以及庞杂的功能，变来变去的界面，的确，在产品设计上，能处理这么复杂的架构和交互，并做得游刃有余的，只有google.哪怕国内的一哥腾讯，想整个复杂点的邮箱都吃不消，学习google的这种高级路线和发挥到极致的工具性能，这点，国内的第一和硅谷的比起来确实差距不止一点。另外在简洁到极致这块的玩法，中国的互联网也难以与硅谷匹敌。 如果简单的把wave解释为电子邮件+即时通信+wiki+社交网络+在线工程项目管理、协同的简单集合，（如果这样算起来，这个东西还真是庞然大物了，比如它还包括了一个很便捷的联系人管理工具）或者说是基于互联网服务、计算和互联网协议的平台，或者说是google云计算的重大应用，甚至有人说html5的推进者，chrome os的铺垫等等，这些无疑都是wave可以拿来一提的feature。但这些恰恰不是这个产品的核心，wave关注的核心确实如他们所言的：Google Wave是一个最新的网络沟通和协作平台。 wave不是娱乐至死年代的消除寂寞的玩具，（比如twitter及其它的copyer们）和大多数google产品一样，他们都有实实在在的使用价值，这种价值可以感知，让自己的沟通更有效，让自己的日程更有计划，让自己的文档更具移动性，便携和更方便于沟通协作，如果与获取信息这个泛泛的目标相比，google不仅在继续优化它的老本行——搜索引擎，这些年来还一直在致力于解决沟通在生活、工作以、个人计划以及群体协作方面的若干细分的深入的问题，并且已经积累了足够完善的资本。不难看出，google这次是雄心勃勃的要通过它已有的资本，通过它对沟通及其沟通延伸系统的考虑和规划，来构建一个真实的高效的可靠的沟通和协作平台。这个平台一旦形成，可能不亚于一次大的社会变革，提高信息世界的生产力，前几年寄希望于facebook，希望它可以带来真正意义上的改善社会性资源在生活和工作方面的沟通价值而言，wave更具有这方面的先天优势。而facebook更像是在娱乐潮中失去了志向，为了盈利渠道疲于奔命，在各种变体的poke中打发无聊。即便，的确无聊的人很多。但无聊支撑的产业链无疑不是良性循环的生态链。 chrome os的大战略google早已确立，自然一些新的产品开发会采用大力推广支持web os的特性和技术。这些技术上的分析，已经有很多，但wave最有前景和魅力的绝对不是其技术，大家来仔细研究下google如何依据它自身的优势构筑起来的别人无法逾越的产品壁垒。googlen认为目前的沟通工具要么只是关注到一个方面，要么一个方面都关注的不够好，因此wave也通过创新突破了一些瓶颈，比如，沟通时信息的存储和记忆问题，发明了独创的沟通回放功能。但就仅凭这个数据量，国内敢继续思考下去的已经很少了，能去尝试这么去做的，可以说几乎没有。我经常在思考我们经常所说的投入产出比是不是严重的阻碍了创意的发挥，扼杀了卓越的产品产生的机会。好像貌似中国人天生就只适合做简单的，低技术含量的，低附加值的东西。虽然中国经济发展了这么多年，人力成本却依然低廉，劳动价值没有得到应有的提供，扯远了，回正题。 另外，wave也采用了类似facebook的架构，自己优先解决棘手的复杂的沟通需求，至于轻量级的、个性化的东西，都通过开源交给第三方开发使用。并且google的Gadget的资源也不少。wave是真正的一站式体验，真正有能力交付更加丰富、安全、有趣和可靠的沟通体验,web端运行，免费并且体验质量很高的产品，如果把使用一个产品的时间和收获的价值的比值作为判断标准的话，给google的产品的打分都应属于高分，wave在沟通产品上的性价比，应该是最高的。 至于wave的诸多亮点，估计统计起来数不胜数，而这些其中很多的亮点，绝不是国内产品中的噱头—说的比做的好。而是确确实实的好，界面上的有点就不说，本应该做好的一些基础性的东西，比如开放性，即时性，文档及项目管理及协作，联系人管理、信息管理等等。 好吧，写了不少，确实，最终还是去细细体验和研究吧，wave产品是第一个我很难去抽象成一句话告诉别人的产品，因为它比其他任何产品来的深刻，目前从测试的角度而言，很多功能还没开放或者还不完善，毕竟这个产品内部系统太大了以至于我扳手指头都难以确认其中包含和整合了多少款产品。相比而言，我做的那点事情，真的是很汗颜。最后我保留5个wave的邀请名额，想要的在下面留言处发表你的看法。先到先得。btw,欢迎有wave的朋友加我，一起交流切磋。 谷歌拼音输入法团队通过wave及时完整的收集和整理用户反馈。 有人将wave用于远程教育 相关话题：Google Wave 源地址：http://jary.findesign.cn/?p=3072 网友还看了相关的2009年11月3日 -- 为什么这么设计：Google Wave (1)]]></description>
		<wfw:commentRss>http://ucd123.cn/2009-11-googlewavechutiyan/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>美国排行前25名的网站CNN.com 将彻底改版</title>
		<link>http://ucd123.cn/2009-11-meiguopaixingqian25mingdewangzhancnn-comjiangchedigaiban/</link>
		<comments>http://ucd123.cn/2009-11-meiguopaixingqian25mingdewangzhancnn-comjiangchedigaiban/#comments</comments>
		<pubDate>Sat, 07 Nov 2009 18:46:53 +0000</pubDate>
		<dc:creator>岸边</dc:creator>
				<category><![CDATA[网站体验]]></category>
		<category><![CDATA[Cnn]]></category>
		<category><![CDATA[主页]]></category>
		<category><![CDATA[改版]]></category>
		<category><![CDATA[网站]]></category>
		<category><![CDATA[美国]]></category>
		<category><![CDATA[视频]]></category>

		<guid isPermaLink="false">http://ucd123.cn/?p=139</guid>
		<description><![CDATA[原文作者：Frederic Lardinois 原文链接：CNN.com Gets a Radical Redesign 译者：pestwave 在美国排行前25名的网站CNN.com今天在纽约市的新闻发布会上宣布了一个彻底改版计划。新版CNN.com主页分成三个部分：左侧强调突发新闻；中间部分显示较早的新闻以及一个“要点（highlights）”板块；右侧是可以自定义天气预报和体育比赛比分等内容的侧边栏。 再往下是一个“编辑推荐”列表，类似于纽约时报网的Inside NYTimes.com部分，新版网站将于下周一上线。   CNN.com的总经理Kenneth Estenson称，CNN.com目前每月的页面访问量约为17亿，视频浏览量一亿次。自1996年以来，首页也被访问过1200亿次。  CNN显然在这次网站改版中下足了功夫。CNN亚太地区新闻广告销售副总William Hsu称，大部分用户只访问网站主页，因此，新版主页将显示更多内容，并且网站更加方便读者浏览。 更加强调视频——包括来自TED的视频 在今天的新闻发布会上，CNN还强调称新版网站整合了更多电视产品，并且把视频和文本整合到了一起。此外CNN还与TED进行了合作。 闻脉（NewsPulse） 新主页还将突出一个叫做‘闻脉（NewsPulse）’的功能，允许用户根据记者、主题和关键词管理新闻内容。 类似CNN Go CNN最近推出了专注于亚洲市场的网站CNN Go，该网站布局更像杂志。 竞争对手 听说MSNBC很快也将进行网站改版。虽然细节尚未透露，但新版网站会加入更多NBC的附属机构的内容，并更加专注于专为MSNBC打造的互动元素。   编译：pestwave 源地址：http://www.yeeyan.com/articles/view/pestwave/64856 网友还看了相关的2009年11月10日 -- 新版LinkedIn：改进导航栏，主页更简洁 (1)2009年11月4日 -- 改版，可以让设计先行 (0)]]></description>
		<wfw:commentRss>http://ucd123.cn/2009-11-meiguopaixingqian25mingdewangzhancnn-comjiangchedigaiban/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
