﻿<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:xg="http://ucdchina.com/schemas/rss">	
 		<channel>
 			<title>最新文章 - UCD大社区</title>
 			<link>http://ucdchina.com/rss/posts</link>
 			<description>最新文章 - UCD大社区</description>
 			<webMaster>qingping.hu@gmail.com</webMaster>
			<pubDate>2010-07-31 17:34:53</pubDate>			<item>
				<title>易车网用户体验部群聊之用户研究</title>
				<link>http://ucdchina.com/snap/7505</link>
				<description>&lt;p&gt;&lt;span style=&quot;font-size: ;&quot;&gt;&lt;br /&gt; &lt;/span&gt;&lt;span style=&quot;font-family: arial,sans-serif; color: #000000;&quot;&gt;&lt;span style=&quot;font-size: 13px; border-collapse: collapse;&quot;&gt;&lt;span&gt;&lt;span style=&quot;font-size: ;&quot;&gt;子条：我们总结讨论下最近半年用过的用户研究（测试）的方法吧，我记得有线上的用户调研、竞品分析什么的。。。&lt;br /&gt; &lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-size: ;&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;font-family: arial,sans-serif; color: #000000;&quot;&gt;&lt;span style=&quot;font-size: 13px; border-collapse: collapse;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size: ;&quot;&gt;prothink：用户访谈、问卷调查、用户模型。&lt;br /&gt;&lt;br /&gt;子条：用户访谈、问卷调查、可用性测试，卡片分类，故事版，数据研究，用户模型。用户模型还没更新利用上。。我们已经做过很多这方面的工作了啊。&lt;br /&gt;&lt;br /&gt;lio：我觉得需要探索一下用户模型的使用方法。&lt;br /&gt;&lt;br /&gt;鱼纹慧：调查问卷_现场（10人）、调查问卷_网络（10000+）、用户访谈（6人）、可用性测试（25人+）、焦点小组（2-3人）、卡片分类、用户模型+路径+场景、心情地图（ing）、启发式评估、产品概念图。用户模型的使用方法感觉哪都没有用好的，仅仅是个沟通工具。&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;lio：所以要寻找答案。&lt;br /&gt; &lt;/span&gt;&lt;/span&gt;&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;/span&gt;子条：&lt;/span&gt;谁来认真看看about face 3里面建模：任务角色和目标，鱼来看吧，然后给组内分享。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 你们焦点小组怎么做的，怎么没看到过报告呢。心情地图（ing）、启发式评估。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 得有空整理介绍下。&lt;br /&gt; &lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;prothink：我刚来的时候还没这块内容恩，所以我们发展了。&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;鱼纹慧：&lt;/span&gt;启发式评估在之前用户模型的报告里有。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 心情地图是结合这次改版的用户模型和路径，真摸索呢，&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 因为我一直苦恼于把用户模型真正用于产品。&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;子条：&lt;/span&gt;还有，刚刚我看到一个卡片分类的方法，和我以前理解的卡片分类方法不一样。不知道是冲突，还是互补。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 1、卡片分类：让用户去分类；&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 2、设计师根据用户提供的内容，对关键词进行分类。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 你们觉得哪一个才是正确的？&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;鱼纹慧：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;卡片分类包括（开放式、封闭式）&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 你说那种应该属于：1、开放式 2、封闭式。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 让用户直接去分类就应该属于开放式分类法；&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 之前车展竞品分析做卡片分类时，和lio简单的做过这种。&lt;br /&gt; &lt;/span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;龙：如果是咱们有了类，让用户将内容放入各个分类中，应该叫封闭式吧。&lt;br /&gt; &lt;/span&gt;&lt;br /&gt; &lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;鱼纹慧：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;对呀，没错呀～先开放，后封闭。封闭作为开放的检验；开放为了了解用户的分类逻辑。封闭为了验证用户的逻辑是否统一。&lt;br /&gt; &lt;/span&gt;&lt;/span&gt;&lt;br /&gt; &lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;lio：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;让用户去分类的&amp;ldquo;卡片分类&amp;rdquo;应该属于信息架构学科。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 咱们自己分类的&amp;ldquo;卡片分类&amp;rdquo;应该属于统计学科&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;子条：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;说得很抽象。但很正确。心情地图你是从哪里看来的？以前没听说过。&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;鱼纹慧：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;对用户模型场景的辅助性做法。但是学时候，师常说的mood map。找个例子：&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;br /&gt; &lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;img src=&quot;http://johnnyholland.org/wp-content/uploads/ethnorgraphy.png&quot; alt=&quot;&quot; /&gt;&lt;br /&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt; 淘宝抄过后的：&lt;br /&gt; &lt;/span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;img src=&quot;http://hiphotos.baidu.com/ui88/pic/item/c153c4d3e20db29ea9ec9a8a.jpg&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;&lt;br /&gt; &lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;/span&gt;子条：原来它就是心情地图。&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;lio：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;啊！我也做过这个。原来有名字...我还以为是我原创的...&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;鱼纹慧：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;用户模型有了，场景有了，路径有了，自然就该有地图了吧。只是上课我听过一耳朵，比如老师说#￥%#&amp;hellip;&amp;hellip;￥mood map@#￥@#%@然后我只听懂了mood map......&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;子条：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;我们得总结着去考虑另外一个问题：&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 这些工作的目的是什么，取得了什么样的效果，还能取得什么样的效果，大家填一下。例如：&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  调查问卷_现场（10人）----&amp;gt;定性研究，让问卷更合理，建立合理的用户模型&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  调查问卷_网络（10000+）；----&amp;gt;定量研究，建立合理的用户模型&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  用户访谈（现场6人+3人）；----&amp;gt;定性研究；？&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  可用性测试（现场26人）；----&amp;gt;定性研究；优化现有产品的结构、流程&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  焦点小组（2-3人）；&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  卡片分类；---&amp;gt;帮助架构合理的信息&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  卡片分类（如经销商反馈）；----&amp;gt;统计作用&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  用户模型+路径+场景（故事版）；----&amp;gt;&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  心情地图（ing）；&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  启发式评估；&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  产品概念图；&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 数据研究--&amp;gt;定量研究；建立合理的用户模型、发现流程是否有断裂、实现数据推送&lt;br /&gt; &lt;br /&gt; &lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;lio：产品概念图：从产品设计的角度出发，重新考量一个产品的用户体验。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 用户模型：解决&amp;ldquo;用户是谁&amp;rdquo;的问题。&lt;br /&gt; &lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;子条：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;我觉得 用户访谈+问卷调查--（建立）--&amp;gt;用户模型--（模拟+数据）-&amp;gt;路径-（模拟）--&amp;gt;场景-（模拟）--&amp;gt;心情地图---&amp;gt;科学的优化产品。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  这样的结合，非常好。但做新产品，感觉还有点难。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  用户模型：解决&amp;ldquo;用户是谁&amp;rdquo;的问题。我之前也这么理解，但现在我觉得还得加深一步理解。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  用户模型：解决&amp;ldquo;用户是谁&amp;rdquo;以及&amp;ldquo;用户习惯（心理模型）&amp;rdquo;的问题。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 我感觉应该是这样。心理模型=心智模型=用户习惯=用户群习惯。&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;lio：我一直都是把用户心智模型放在场景这个层面考虑的。&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;子条：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;应该是 了解用户---了解用户的习惯----了解用户为什么要这样去做----了解用户的逻辑后，利用他的逻辑----to do我们自己的产品。所以场景应该是利用他的逻辑to do了，在know之后。&lt;br /&gt; &lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;lio：恩，是这样的。&lt;br /&gt; &lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;prothink：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;用户模型也变相的确定了产品定位，目标用户群。&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;子条：这&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;涉及到另外一个问题，目标用户群和实际用户群很可能不一样。&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;prothink：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;目标用户和实际用户，一方面是准星，一方面是靶标，需要相互修正。&lt;br /&gt; &lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;鱼纹慧：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;产品设计前期：（总的目的是发觉用户需求+建立产品架构）&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  调查问卷_现场（10人）----&amp;gt;定性研究，建立合理的用户模型&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  调查问卷_网络（10000+）；----&amp;gt;定量研究，建立合理的用户模型&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  用户访谈（现场6人+3人）；----&amp;gt;定性研究，建立合理的用户模型&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  焦点小组（2-3人）；----&amp;gt;定性研究，建立合理的用户模型&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  卡片分类；---&amp;gt;帮助架构合理的信息&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  卡片分类（如经销商反馈）；--&amp;gt;统计作用&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  用户模型+路径+场景（故事版）；----&amp;gt;制定、优化用户需求及产品结构方案&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  心情地图（ing）；----&amp;gt;制定、优化用户需求及产品结构方案&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  产品概念图； ----&amp;gt;制定产品功能&lt;br /&gt; &lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  产品设计中后期（总的目的：检验低保真、高保真原型的可用性）&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;  启发式评估；----&amp;gt;改善产品现状、专家角度评估检验产品现状；&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 可用性测试（现场26人）；----&amp;gt;改善产品现状、用户角度评估检验产品现状；&lt;br /&gt; &lt;br /&gt; &lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;lio：就目前来说，我觉得见效最快的应该是可用性测试。可以立即得到结果，且成本不高。&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;子条：恩，可用性测试最好用。最容易发现问题。&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;lio：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;但是不容易发现深层的重要的问题。&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;prothink：&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;能解决目前的战术问题，解决不了战略问题&lt;br /&gt; &lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;龙：&lt;/span&gt;对，产品需求方面的问题太难以发现。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 我觉得通过用户模型，可以明确用户产品需求，也能发掘用户出产品需求，&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 在这一块，用户模型在这方面有些浪费了~~&lt;br /&gt; &lt;br /&gt; &lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;鱼纹慧：可用性好用是在产品的中后期。我觉资讯类门户网站用任务的方法不好解决。&lt;br /&gt; &lt;br /&gt; &lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;lio：对!&lt;br /&gt; &lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;鱼纹慧：应该更偏重信息架构，因为更多时候都在&amp;ldquo;码&amp;rdquo;信息。&lt;br /&gt; &lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;lio：对!&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;任务是可用性测试的根本，但也束缚了可用性测试。&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 被测人在&amp;ldquo;任务&amp;rdquo;的带领下，所做出的判断跟他平时有不少偏差。&lt;br /&gt; &lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;/span&gt;子条：恩，确实如此。有一本书叫做&amp;ldquo;信息架构&amp;rdquo;，文慧去网上买一本回来，我们好好研究一下。&lt;br /&gt; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;鱼纹慧：我买了....&lt;br /&gt; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;子条：好看吗？&lt;br /&gt; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size:  ;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;鱼纹慧：现在我桌上就有...翻译奇差...很容易看着看着就着了....&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://hi.baidu.com/ui88/blog/item/33d8ae22c3a7b3fed6cae226.html&quot; target=&quot;_blank&quot;&gt;http://hi.baidu.com/ui88/blog/item/33d8ae22c3a7b3fed6cae226.html&lt;/a&gt;&lt;/p&gt;</description>
				<author>子条</author>
				<pubdate>2010-07-30 13:20:17</pubdate>
			</item>			<item>
				<title>重构</title>
				<link>http://ucdchina.com/snap/7490</link>
				<description>&lt;p&gt;吾生也有涯，而知也无涯。&lt;/p&gt;
 
&lt;p&gt;人在其一生中总是在不断地进步不断地前进，而每个阶段的认识也是随着知识、眼界、经验的增长而相应地增长。这时候再回头来看你之前的许多决定，就有
 
了很大的修正余地。只可惜人生的过去无法再修正，但产品却可以。你可能没认识到以前用户的需求，或者因为以前思考的缺陷而造成的产品短视，你还有机会去重
 构你的产品。&lt;/p&gt;
 
&lt;p&gt;重构，是否定自己，如果你有勇气否定你曾经得意的产品，那证明你成熟了，成长了，这些时间内你在不断地往前走。如果许多年后看 
自己曾经做的产品仍然挑不出毛病的话，那只能说你在这几年内毫无进步。经历过项目做做改改，改改做做，然后各部门就会抱怨当时不确定，当初怎么没想这样 
做，只要是牵涉人的项目，一定会有主观性，也一定会有缺陷，我们不担心的是缺陷，而是担心面对缺陷的勇气。明知道一个有缺陷的产品，是做上线了再进行修
改，还是延长工期，修改了再上线。看过一个新浪微博离职技术员写的一篇文章，大意是抱怨新浪微博的产品经理经常变需求，让技术没法来重构整个产品的架构，
还有就是他自己提的需求经常不被重视，上头不理睬。需求给常变是常事，也是好事，不变才会可怕。我赞成技术修整需求，完善需求，甚至提出需求，但对提出需
求不抱有太大的希望，技术的需求一般都是从曾经做的项目和以往的经验得来的，很难能有时间和精力去分析用户在想什么，在需要什么。&lt;/p&gt;
 
&lt;p&gt;曾经的一个产品，经常去做客服，去了解用户在哪些问题上卡住了，在哪个环节上进行不下去了。后来发现，其实这个产品面对的用户群是不习惯互联网的那
一类，不能算网民，最多算个Q民，对网站的操作很陌生，平时就上个QQ，弄个空间，然后就下线了。被问过一个问题，关于网银支付的，从如何安装网银，这是
银行的事，但我们也做了，一直到如何支付都解说了一遍，结果操作还是失败，找了半天原因是对方没有插银行的U盾。面对这样的一群用户，整个流程要做的相当
SB才行，要不然会挡住70%的用户，但很遗憾，当时流程做的并不SB，是普通的支付流程，连文字说明都没有。后来提出修改方案后，还被技术鄙视了一把，
说白痴都会用这个流程，而且大家都在用，没必要改这么傻。一直僵持不下，后来想了个办法，让技术去做了几天的客服，之后改动相当顺利，之后不停地听他嘀
咕，中国的网民怎么会处在这个层次上呢。&lt;/p&gt;
 
&lt;p&gt;重构另一个重要的基因，就是不断地使产品更符合用户的使用习惯，不断地满足用户的需求。这可以是产品开发前，当然是最好的方案，也可以是产品开发
中，产品上线后的重构是很正常的事，即所谓的改版。但产品开发中的需求修改一般不被认可，往往因为要赶工期，带来的技术层面的重构代价要大，这时候修改需
求又要保证工期的话，往往会加重技术开发的负担。但即使加重，我想也是值得的。&lt;/p&gt;
 
&lt;p&gt;正经历的一个网站，正在不断地修改开发中的需求，但是个人觉得仍然修改的不够，埋下的一个隐患如果现在不解决的话，一旦网站上线推广的好，会是一个
很大的鸡肋，上线后再改版，代价应该会比现阶段的修改来得更大。做为产品设计人员，在一开始没有想到这点，觉得非常内疚，甚至有时候开始怀疑自己。但庆幸
的是，在网站未上线已经发现了，即使现在不改，心里也会明白设计的缺陷在哪里，在二期，甚至改版的时候可以更加清晰。&lt;/p&gt;
 
&lt;p&gt;重构你的产品，再多想一点，在多想的基础上再多想一点，让产品更加臻于完美，至少在现有的知识结构背景下做到极致，这属于个人能力问题，但你可以在
你的能力范围内把产品发挥到最佳，别想偷懒。如果一些时间后因为你的思维，知识面的拓展，而有了新东西，可以考虑增加功能点甚至完全改版，这又是另外一种
情况了。&lt;/p&gt;
 
&lt;p&gt;上次看到的一个数据，中国大约4亿网民中，有3亿是Q民，都说互联网改变生活，可这3亿的Q民不属于这之列，他们无法享受高科技带来的生活改变，不
是智力问题，是产品问题。产品的艰涩难用，有意无意地把这些Q民挡在了数字化生活之外。比如我曾经花了2个小时没弄明白foursquare.com的基
于位置服务的sns如何操作。国内有了一批foursquare的追随者，大众点评也上了类似的功能，但我当时仍然没有弄明白一个顺畅的操作流程。&lt;/p&gt;
 
&lt;p&gt;有勇气重构，有勇气面对，有勇气承认失败，但你也得有勇气提出一个更完善的方案。没有100%的完美，我们只能做到趋向于完美。这就是产品设计。&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://www.thismyway.com/?p=239&quot; target=&quot;_blank&quot;&gt;http://www.thismyway.com/?p=239&lt;/a&gt;&lt;/p&gt;</description>
				<author>江南阴雨</author>
				<pubdate>2010-07-29 13:51:01</pubdate>
			</item>			<item>
				<title>弹出窗口与切换页面的对比总结</title>
				<link>http://ucdchina.com/snap/7487</link>
				<description>&lt;p&gt;分享较早前的一个小总结，关于在选择弹出窗口还是选择切换页面来承载信息时，可用用来判断的几个角度，合适初学者来读。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;strong&gt;1.&lt;/strong&gt;&lt;strong&gt;弹出窗口与切换页面的区别&lt;/strong&gt;&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;1） &lt;strong&gt;操作的连贯性&lt;/strong&gt; 弹出窗口的速度会比打开一个页面的速度要快，响应更及时一些，点击后可以比较快的得到操作的反馈，而切换页面则经常会让用户等待一段时间。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;实例一：个人中心中，查看好友照片的操作：&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/f0d87221b48db298ca2303065a92944f.jpeg&quot; alt=&quot;&quot; width=&quot;536&quot; height=&quot;302&quot; /&gt;&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;之前查看照片的操作页面会跳转到该好友的空间&amp;ldquo;相册&amp;rdquo;页面，而现在则更改进为弹出窗口，能够很快看到照片的放大图，关掉窗口后，又可以继续浏览其他好友的信息了。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;/p&gt;
&lt;p align=&quot;left&quot;&gt;2）&lt;strong&gt;操作的延续性&lt;/strong&gt; 弹出窗口可以保留原页面上的内容，不至于页面被刷新掉；切换页面很有可能刷新，在以下两种情况下是尤其要避免的：用户在原界面上有输入的内容，用户需要根据原有界面的内容，来选择或判断新界面的内容。在这两种情况下最好首选弹出窗口。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;实例一：Qzone写日志中插入图片：&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/bc85eecf687ee87684db00bb151d831c.jpeg&quot; alt=&quot;&quot; width=&quot;541&quot; height=&quot;276&quot; /&gt;&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;用户在写日志的时候插入一张照片，如果这时候插入照片的界面是切换一个页面，用户可能就会担心之前的输入是否还在，而弹出窗口则可以在保留原页面已编辑的文字，在此之上出现一个小型的界面，显示可以插入的照片。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;实例二，秀世界中我的储物箱，用户需要看到房间中的效果，来决定从&amp;ldquo;我的储物箱&amp;rdquo;中选择哪个物品放入房间里，用弹出窗口可以比较方便的解决这个问题:&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/5fd7d435cff03e0dcad03b86bdcc7a88.jpeg&quot; alt=&quot;&quot; width=&quot;538&quot; height=&quot;295&quot; /&gt;&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;/p&gt;
&lt;p align=&quot;left&quot;&gt;实例三：一个相反的例子，欢乐卡片的应用，制从&amp;ldquo;我的首页&amp;rdquo;页面当中，制作卡片的时候需要哪些卡面是在&amp;ldquo;卡片全攻略&amp;rdquo;页面来说明的，因此用户在制作卡片的时候需要不断切换到&amp;ldquo;卡片全攻略&amp;rdquo;页面来查看需要合成的卡片，因此，在这样的情形下，采用弹出窗口的形式来表现卡片合成向导应该更合适一些。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/b5509d2542397d3a710c9753510a5d20.jpeg&quot; alt=&quot;&quot; width=&quot;543&quot; height=&quot;285&quot; /&gt;&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;/p&gt;
&lt;p align=&quot;left&quot;&gt;&lt;/p&gt;
&lt;p align=&quot;left&quot;&gt;3） &lt;strong&gt;操作的自然过度&lt;/strong&gt; 弹出窗口不容易让人迷路，知道自己身处何处；而页面切换了以后用户有时候会产生一下子不知道在哪里的迷惑；弹出窗口页面的内容往往只和当前的操作有关，而且是浮在原有页面上的，用户可以很自然的延续上一操作的结果而继续操作或是浏览下去，而切换的新页面中往往会包含新内容之外的信息： banner、导航、一些固定的栏目等等，用户不能立刻定位到自己想要关注的内容上，因此切换页面的设计应更加关注一致性和承前启后的关联性。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;实例一：网吧达人的首页页面1中点击&amp;ldquo;常去的网吧&amp;rdquo;，进入页面2，因为两个页面的结构有所不同，很容易让用户觉得不知身处何处。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;页面1：&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/87909b0ff9c2c0e7cef61b29f86bc685.jpeg&quot; alt=&quot;&quot; width=&quot;536&quot; height=&quot;243&quot; /&gt;&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;/p&gt;
&lt;p align=&quot;left&quot;&gt;页面2：&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/066e32bb1be804079f993aa5a38a3042.jpeg&quot; alt=&quot;&quot; width=&quot;544&quot; height=&quot;255&quot; /&gt;&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;/p&gt;
&lt;p align=&quot;left&quot;&gt;4） &lt;strong&gt;承载的信息量&lt;/strong&gt; 弹出窗口可承载的信息量有限，操作流程不宜过多。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;/p&gt;
&lt;p align=&quot;left&quot;&gt;5） &lt;strong&gt;内容的推广&lt;/strong&gt; 弹出窗口没有独立的连接地址，在页面推广上有所限制。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;实例一：在做信用卡频道的活动列表时，最初的设计是点击活动信息的标题后，用弹出窗口来展示活动详情，然而因为活动页面需要在推广时有独立的地址便于用户能够从其他途径直接访问到活动详情页，因此改为采用切换页面的方式。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/50fa218ba76e55e5381b16077a2fbcac.jpeg&quot; alt=&quot;&quot; width=&quot;516&quot; height=&quot;237&quot; /&gt;&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;strong&gt;2. &lt;/strong&gt;&lt;strong&gt;弹出窗口与页面内展开的区别？&lt;/strong&gt;&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;1）页面内展开能够即时的反馈用户的操作；容易给用户带来自然过度的体验；适合于对主要内容的扩充，更详细的、更近一步的内容，当用户没有看到这些内容并不会影响使用，而打开这些内容，用户可以看到更多、或是得到更丰富的功能。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;实例一：个人中心的展开操作，通过页面内展开的形式显示评论信息，它并不是该好友动态的主要内容，因此作为附加信息收在了&amp;ldquo;详情&amp;rdquo;当中。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/d8e8d57cdfad002f13fd2d00f445ef59.jpeg&quot; alt=&quot;&quot; width=&quot;543&quot; height=&quot;337&quot; /&gt;&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;/p&gt;
&lt;p align=&quot;left&quot;&gt;2）弹出窗口是用户点击按钮后，在页面上浮出一个层来显示进一步的内容，与页面内展开的形式不同的是，弹出层更适用于区域内的内容较为重要的时候使用，比如弹出层内包含一些操作、或重要提示。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;实例二：编辑导航的界面中更改选择，下面的预览界面中会直接看到效果。&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/c552c093c6fe5c9770be5e8cdbe36601.jpeg&quot; alt=&quot;&quot; width=&quot;544&quot; height=&quot;389&quot; /&gt;&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;/p&gt;
&lt;p align=&quot;left&quot;&gt;&lt;/p&gt;
&lt;p align=&quot;left&quot;&gt;实例三：二次确认的提示应当采用弹出窗口：&lt;/p&gt;
 
&lt;p align=&quot;left&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/c552c093c6fe5c9770be5e8cdbe36601.jpeg&quot; alt=&quot;&quot; width=&quot;544&quot; height=&quot;389&quot; /&gt;&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://isd.tencent.com/?p=2116&quot; target=&quot;_blank&quot;&gt;http://isd.tencent.com/?p=2116&lt;/a&gt;&lt;/p&gt;</description>
				<author>丽君</author>
				<pubdate>2010-07-28 22:26:35</pubdate>
			</item>			<item>
				<title>需求是如何变成产品原型的</title>
				<link>http://ucdchina.com/snap/7484</link>
				<description>&lt;p&gt;&lt;img class=&quot;alignnone size-full wp-image-309&quot; title=&quot;20100728&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/b7e200e9910858d120248b1f7969170a.jpeg&quot; alt=&quot;20100728&quot; width=&quot;620&quot; height=&quot;260&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;在一个互联网公司的工作流程中，产品经理（主要指偏向产品设计的产品人员）和交互设计师是这个流水线上最起点的环节，也是关系最暧昧的两个环节。说
其暧昧，是因为在很多互联网公司里面，这两个环节所做的事情是有重合的，这就意味着，他们或许也是整个流程中合作最紧密的两个环节。&lt;/p&gt;
 
&lt;p&gt;相对比之下，产品经理更关注的是产品的内部逻辑、操作流程、策略等；而交互设计师更关注的是产品的易用性、流畅度和操作感受。总的来看，似乎可以认
为，产品经理是从一个更加宏观的角度去设计产品，而交互设计师，则是从更多的细节出发，去提升用户体验。这两种不同的视角决定了只有产品经理和交互设计师
密切配合，深入沟通，才能够最高效最合理的将产品策略转化为产品原型，从而为流水线的后面环节提供精确的参考资料。&lt;/p&gt;
 
&lt;p&gt;下面以人人网广告平台的一些产品和交互细节为例，使用对话的形式来分享一下我个人在做交互设计过程中的一些体会和想法。入门级文章，高手请绕行。&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;在广告平台其中一个投放系统中，有一个产品需求，是要根据广告受众所在的地区做广告的定向投放。也就是说，可以控制广告只展示给固定地域的受众。这就意味着，需要设计一个「区域选择器」，供用户选择区域。产品经理的原始需求是这样的：&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;我们这次的投放系统需要设计一个区域选择器，就是让用户选择广告定向投放的区域的。可以精确到城市，可以多选。另外，&amp;lsquo;区域&amp;rsquo;作为一个投放广告的限制条件，如果用户没有选择任何选项，那就代表用户忽略该条件，则该广告会面向全国投放。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;哦。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;嗯，我能够想到的这个东西的原型，可以提供两个下拉框，让用户分别选择省和城市。当用户在第一个下拉框里面选定了省以后，第二个下拉框中会显示该省下面的地级市。我做了一个简单的框图，大家看一下。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://fed.renren.com/wp-content/uploads/2010/07/adi1.jpg&quot;&gt;&lt;img class=&quot;alignnone size-full wp-image-299&quot; title=&quot;adi1&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/f615a1ccb0f077de55c2b97fbc0d0ad2.jpeg&quot; alt=&quot;adi1&quot; width=&quot;394&quot; height=&quot;104&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;大概就是这个样子。每选定一个城市，点击后面的添加按钮，可以将该城市添加到下面的列表中。同时，如果点击已经添加的城市名称后面的「删除」链接，则会将该城市从已选列表抹去。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;等一下，我有一个问题。按照产品的策略，如果用户一个城市都不选，那么就会默认投放全国。但是这个概念很难表达给用户，比如说，如果在「区域选择器」旁边放提示，估计没有多少人会注意到。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;一个都没选，就是等于忽略条件啊。因为这些都是限制条件。&amp;rdquo;&lt;/span&gt;&lt;br /&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&lt;br /&gt; 交互设计师：&amp;ldquo;问题是用户很难意识到是这样。在中国人的观念中，大家都是觉得，选上的，是我要的。但是大家没有「不选就等于全要」这种思维习惯。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;我觉得可以这样。我们在现在的「区域选择器」上面放两
个单选按钮。一个叫「全国」，另一个叫做「指定」。打开页面时，默认选中「全国」项，并隐藏「区域选择器」。只有用户选择「指定」项时，区域选择器才会出
现。这样表达就很明确了，你不是「全国」就是「指定」。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;哦~听起来不错。试试。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;于是得到了下面这个版本的原型图：&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://fed.renren.com/wp-content/uploads/2010/07/adi2.jpg&quot;&gt;&lt;img class=&quot;alignnone size-full wp-image-300&quot; title=&quot;adi2&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/0340fb67e15dd57ac54bf18be3851e7a.jpeg&quot; alt=&quot;adi2&quot; width=&quot;388&quot; height=&quot;228&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;嗯，我想，现在这个版本已经基本上从界面的层面解决了全国投放的选项问题，我想，用户应该不会因为不知道怎么选而卡在这里了。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;我看下一步，需要对一些关键的元素做一定的视觉设计，以便于引导用户操作。比如「添加」按钮，应该更明显些。我觉得可以请UI设计师出一个简单版本的UI了。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;稍等一下，我看咱们还是把细节再讨论清楚一些再去找UI吧。比如，字的颜色啊什么的都没定呢。而且，我觉得选中的区域中，每个城市名称后面都跟着一个删除链接，很奇怪。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;嗯。的确。我的想法是这样，字的颜色，就用黑色吧，或
者是深一些的灰色也行。虽然从视觉设计的角度来看，视觉设计师觉得稍浅一些的灰色比较养眼，可能黑色太&amp;lsquo;抢&amp;rsquo;。但是咱们的系统毕竟是给人用的，灰色的话，
可能会让人误认为这些选项是不可操作的。你看如何？&amp;rdquo;&lt;br /&gt; &lt;/span&gt;&lt;br /&gt; &lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;同意。&amp;rdquo;&lt;/span&gt;&lt;br /&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&lt;br /&gt; 交互设计师：&amp;ldquo;关于已经选中的区域列表。我看可以把「删除」链接换成&amp;times;，事实上，用户对于&amp;times;这种符号比汉字更敏感。你看，大家不论是用Windows还是
Mac，关闭窗口的时候都是&amp;times;，早就习惯了。另外，为了让所选定的城市名称看起来是一个整体，并且跟其他城市名称区分开。我看，可以给每一个城市加上背景
色，每个城市一个色块，这样也一目了然。&amp;rdquo;&lt;br /&gt; &lt;/span&gt;&lt;br /&gt; &lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;颜色呢？&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;蓝色吧，人人网都是蓝色的风格。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;ok&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;于是，配合UI设计师，得到了下面的界面：&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://fed.renren.com/wp-content/uploads/2010/07/adi3.jpg&quot;&gt;&lt;img class=&quot;alignnone size-full wp-image-301&quot; title=&quot;adi3&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/1f86e5c441fdb52b798532820e852dd9.jpeg&quot; alt=&quot;adi3&quot; width=&quot;614&quot; height=&quot;405&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;我看现在这个地方已经基本上成型了。咱们也已经讨论很很久了。该问问别人的意见。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&amp;mdash;&amp;mdash;&amp;mdash;-时间分割线&amp;mdash;&amp;mdash;&amp;mdash;-&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;Hi~ 各位。我收集了一些内部测试的意见。有用户提出，搞不太清楚两个下拉菜单和「添加」按钮之间的关系。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;什么意思？&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;就是说，有人意识不到选完了省，选完了城市以后，还得点「添加」。他们觉得，选完了就完事了。&amp;rdquo;&lt;/span&gt;&lt;br /&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&lt;br /&gt; 交互设计师：&amp;ldquo;晕。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;可能是已选列表框在空着的时候长得太秀气了，大家没意识到它是用来装东西的。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;好吧，我有两个方案。1、把「添加」按钮上面加一个向下的箭头。指向已选列表框。2、在已选列表空着的时候，添加一条提示语，来提示用户他并没有完成区域选择操作。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;提示语那个，你的意思是说，当用户添加了城市以后，会自动消失是吧？&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;是的。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;我觉得加提示吧。感觉放箭头有点儿傻。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;嗯，而且，可能放了箭头以后，用户依然不知所云。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;那提示语怎么说呢？您尚未添加任何区域，请选定城市后，点击上面的「添加」按钮，该城市会被添加到&amp;hellip;&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;停！太长了，大部分人不会认真看完的。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;的确&amp;hellip;&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;我看就一句话就可以。写&amp;lsquo;您尚未添加任何区域。&amp;rsquo;&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;你看。下拉列表后面的按钮叫「添加」。提示中又明确的传达出了尚未「添加」的状态。这样既说明了这个框框是用来放东西的，又可以告诉用户，这个东西是可以选多个的。因为「添加」的概念就是一个一个往里面放。如果只能放一个，那应该叫「选择」。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;顶。&amp;rdquo;&lt;/span&gt;&lt;br /&gt; &lt;span style=&quot;color: #008000;&quot;&gt;&lt;br /&gt; 交互设计师：&amp;ldquo;而且，我觉得这个控件最初的原型你设计的不错。嗯，用户只要成功的进行一次操作，以后就可以非常高效的进行操作了。这个东西的学习成本和认知成本都比较低。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;oh,yeah~&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;那么，现在的UI是这样的：&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://fed.renren.com/wp-content/uploads/2010/07/adi4.jpg&quot;&gt;&lt;img class=&quot;alignnone size-full wp-image-302&quot; title=&quot;adi4&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/8cdaf6684561d4a612af7d6983ab581b.jpeg&quot; alt=&quot;adi4&quot; width=&quot;617&quot; height=&quot;112&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;哎，对了。话说，我最开始的策略是，用户如果不选，相当于全选，要全国投放的。你说如果用户选了「指定」，但是并没有添加具体的城市，直接提交表单，怎么办？系统是应该直接把用户的广告设置成全国投放，还是报错，阻止用户继续？&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;我看啊，报错吧。因为现在「全国」和「指定」这两项，
已经明确的把整体和局部给分开了。我觉得你那个策略没必要再应用了，因为现在这种已经达到了你最初的目的，而且还好理解。再有就是，咱们的平台是涉及到钱
的，是要让用户花钱的，如果让用户不明不白花了冤枉钱，本来想投北京的投了全国，那我们会被用户骂死的。虽然感觉上报错会让用户有挫败感，但是在这种细节
上，还是用户利益应该放在第一位，用户体验，可以稍微往后放一放了。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;好吧。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #008000;&quot;&gt;交互设计师：&amp;ldquo;呵呵，你看，这个故事告诉我们，不能每件事情都听产品的。产品提的只是需求，但是如何实现需求，还是得从多个角度来讨论。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #0000ff;&quot;&gt;产品经理：&amp;ldquo;好吧。那么，技术兄弟们，下面的工作就拜托你们了。&amp;rdquo;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;个人观点：&lt;/p&gt;
 
&lt;p&gt;1、产品经理和交互设计师需要时刻密切配合，深入沟通。&lt;/p&gt;
 
&lt;p&gt;2、有时候，产品策略和用户体验会发生冲突，这时应该从多种角度去考虑和探讨最终解决方案，不应该有谁一定比谁重要的说法。&lt;/p&gt;
 
&lt;p&gt;3、优秀的产品经理，相当于半个交互。同样，优秀的交互设计师，相当于半个产品。二者虽然职位不同，但是应该在一定程度上考虑对方的工作内容。&lt;/p&gt;
 
&lt;p&gt;4、产品提出的只是策略和需求，并不是一定要按照产品人员所描述的细节去设计具体的产品细节。交互设计师以及团队中其他所有成员，有义务有权利对产品需求提出自己的见解和更好的设计方案。有不同意见可以讨论，但是最终决定权，应该依然属于产品经理。&lt;/p&gt;
 
&lt;p&gt;5、产品经理之所以叫经理，是因为，他们除了设计产品，还需要时刻把握整个流程。比如，当细节没讨论清楚的时候，不要去找UI做设计。&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://fed.renren.com/2010/07/298&quot; target=&quot;_blank&quot;&gt;http://fed.renren.com/2010/07/298&lt;/a&gt;&lt;/p&gt;</description>
				<author>Henry</author>
				<pubdate>2010-07-28 18:03:59</pubdate>
			</item>			<item>
				<title>Android与iPhone界面布局对比</title>
				<link>http://ucdchina.com/snap/7480</link>
				<description>&lt;div class=&quot;bct fc05 fc11 nbw-blog ztag js-fs2&quot;&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;&lt;img style=&quot;margin: 0px 10px 0px 0px;&quot; title=&quot;Android与iPhone界面布局对比 - azero - azero :)&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/81c4836caf00a157f04e033bb2cd4df8.gif&quot; alt=&quot;Android与iPhone界面布局对比 - azero - azero :)&quot; /&gt;&lt;/div&gt;
&amp;nbsp;&lt;/div&gt;
&amp;nbsp;&lt;/div&gt;
 
&lt;p&gt;上图是我根据Android和iPhone这两个平台的&amp;ldquo;生产内容型的应用程序&amp;rdquo;整理出来的界面布局示例。&lt;br /&gt;所对比的4个点，均是两大平台的应用程序常规界面元素。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;状态栏：&lt;/strong&gt;&lt;br /&gt;Android和iPhone的状态栏均在屏幕顶端的位置，原因无外乎是人的视觉流程是从上到下的。&lt;br /&gt;Android的状态栏，具有notification的功用，当应用程序有新的通知，在状态栏左侧显示通知图标，向下滑动即可打开查看通知详情。&lt;br /&gt;iPhone的状态栏，很纯粹，就是状态而已。包含了活动状态的显示，比如某进程正在运行，将有个转动的动画在这里。但是你不能对状态栏有任何操作。&lt;br /&gt;个人认为，Android通知系统做得很不错，貌似后来的Windows Phone7也效仿了此设计。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;标题栏：&lt;br /&gt;&lt;/strong&gt;Android是纯粹的界面标题栏，这里一般无操作响应。&lt;br /&gt;而iPhone的标题栏，承担更多的作用是导航，你能在这里快速后退（Android使用实体按键来后退），或是针对此界面进行一些操作。另外，当你使用iPhone向下浏览界面内容时，双击标题，还起到快速至顶的作用。&lt;/p&gt;
 
&lt;p&gt;&lt;br /&gt;&lt;strong&gt;标签栏：&lt;/strong&gt;&lt;br /&gt;Android的标签栏位于界面标题之下，一般最多5项，在原生的平台界面，视觉效果也较丑。&lt;br /&gt;而iPhone的标签栏是明确在屏幕下方的，也是最多5顶。相比于Android，iPhone对状态栏的处理显得很智能。所有显示图标和文字的标签都是相同的宽度并且显示黑色背景。当标签被选中后，它的背景淡化并且标签中的图片变亮。&lt;br /&gt;如果应用程序的标签栏包含5个以上的标签，iPhone OS会显示其中的4个并在第5个自动显示为&amp;ldquo;更多标签&amp;rdquo;。&lt;/p&gt;
 
&lt;p&gt;我曾经思考过，为什么同是标签，Android在上，iPhone在下的问题。&lt;br /&gt;到目前，我也只能猜测：&lt;br /&gt;Android的设计师认为，标签应该先被看到，并且不能让menu键的菜单项挡到。&lt;br /&gt;iPhone的设计师认为，标签是用于切换当前应用程序不同视图的，应该更容易被按到，所以选择在屏幕下方。&lt;br /&gt;也因此，我已经完全不纠结所谓的&amp;ldquo;单手持机&amp;rdquo;的情境设计，因为以上两平台均无法很好地支持。&lt;/p&gt;
 
&lt;p&gt;&lt;br /&gt;&lt;strong&gt;工具栏：&lt;/strong&gt;&lt;br /&gt;Android的工具栏一般居于屏幕下方，一般是3个按钮。考虑到可点击域的有效性，一般最多也不建议超过5个。&lt;br /&gt;而iPhone的工具栏，是与标签栏在同一位置的，即标签栏与工具栏不共存，在屏幕下方，要么是工具栏，要么就是标签栏。&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;好了，对比结束。&lt;br /&gt;&lt;span style=&quot;color: #ff0000;&quot;&gt;老实说，我现在并没有在设计新的手机平台，我们公司也不会去折腾新的&amp;ldquo;某某phone&amp;rdquo;。因此鉴于我目前站立的只是这个高度，我没有理由去为我的应用程序界面对上述四点进行&amp;ldquo;创新&amp;rdquo;。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;这个对比对于我来说，显得有些无聊。&lt;/p&gt;
 
&lt;p&gt;&lt;br /&gt;不过，我总是能发现一些&amp;ldquo;&lt;strong&gt;A&amp;nbsp;mix B&lt;/strong&gt;&amp;rdquo; 的应用程序界面设计，让我觉得更加无聊。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;div&gt;
&lt;div&gt;&lt;img style=&quot;margin: 0px 10px 0px 0px;&quot; title=&quot;Android与iPhone界面布局对比 - azero - azero :)&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/262d3b6fb01896d92a8282a7d9bdfc82.gif&quot; alt=&quot;Android与iPhone界面布局对比 - azero - azero :)&quot; /&gt;&lt;img style=&quot;margin: 0px 10px 0px 0px;&quot; title=&quot;Android与iPhone界面布局对比 - azero - azero :)&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/2084c803cc38835b256bd89487ce4d79.gif&quot; alt=&quot;Android与iPhone界面布局对比 - azero - azero :)&quot; /&gt;&lt;img style=&quot;margin: 0px 10px 0px 0px;&quot; title=&quot;Android与iPhone界面布局对比 - azero - azero :)&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/1c8a5bdbb948c2cf1a8714b6c26f3a48.gif&quot; alt=&quot;Android与iPhone界面布局对比 - azero - azero :)&quot; /&gt;&lt;/div&gt;
 
&lt;div&gt;
&lt;div&gt;&lt;img style=&quot;margin: 0px 10px 0px 0px;&quot; title=&quot;Android与iPhone界面布局对比 - azero - azero :)&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/3cad9e6c285bd589a34b59d6a3ba8001.gif&quot; alt=&quot;Android与iPhone界面布局对比 - azero - azero :)&quot; /&gt;&lt;img style=&quot;margin: 0px 10px 0px 0px;&quot; title=&quot;Android与iPhone界面布局对比 - azero - azero :)&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/aad6ab2d746d4ca8b3cefb63d782b035.gif&quot; alt=&quot;Android与iPhone界面布局对比 - azero - azero :)&quot; /&gt;&amp;nbsp;&lt;/div&gt;
&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;
 
&lt;p&gt;也许你和我一样，在设计时总能听到&amp;ldquo;XX也是这样的&amp;rdquo;。&lt;/p&gt;
 
&lt;p&gt;言外之意是抄过来吧。&lt;br /&gt;于是，糟糕的事情越来越多。&lt;/p&gt;
 
&lt;p&gt;真是汗颜。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;无论是哪一个平台的应用程序设计，我个人始终坚持的观点是：&lt;span style=&quot;color: #ff0000;&quot;&gt;遵循OS的设计规范，熟知平台特性，最好与平台自带的应用程序保持一致的使用体验。不需要惊喜。&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;你的创新，应当用在正确的地方。&lt;/p&gt;
&lt;/div&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/322&quot; target=&quot;_blank&quot;&gt;移动设备的交互和设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://azero.tsang.blog.163.com/blog/static/4700520106275197904/&quot; target=&quot;_blank&quot;&gt;http://azero.tsang.blog.163.com/blog/static/4700520106275197904/&lt;/a&gt;&lt;/p&gt;</description>
				<author>azero</author>
				<pubdate>2010-07-27 23:05:44</pubdate>
			</item>			<item>
				<title>理解标签中的“极点”</title>
				<link>http://ucdchina.com/snap/7479</link>
				<description>&lt;div&gt;前言：本文翻译自《打标签》一书的第三章第二节。本节英语原文是&amp;ldquo;Understanding tagging&amp;rsquo;s tension points&amp;rdquo;，书名是《Tagging》。&lt;/div&gt;
 
&lt;p&gt;社会化书签网站 delicious.com 在2003年最先广泛地引入了协作标签系统。随着该网站&amp;mdash;&amp;mdash;和它的标签&amp;mdash;&amp;mdash;愈发流行，也看得出三个学科间存在着矛盾。&lt;/p&gt;
 
&lt;p&gt;信息架构师最先发现，delicious正在生成的是控制了词汇的标签，而这些词汇源自网站本身。这些（他们自称的）平民分类称不上专业，但着实歪打正着地让这些自己打标签、自己使用标签的人受益。&lt;/p&gt;
 
&lt;p&gt;很多做社会化软件的人士把此等低成本、由大众推出的元数据视为一种创造实践，以期带来更专业、更有价值的元数据。不论怎样，谷歌&amp;mdash;&amp;mdash;网络中，玩转链接来构建更好搜索引擎的高手&amp;mdash;&amp;mdash;给出了一个积极的榜样。&lt;/p&gt;
 
&lt;p&gt;低成本，所以，打标签貌似让分类进程平民化起来。它让分类远离了（诸如图书管理员和信息架构师的）权力中心，把它还给了民众。&lt;/p&gt;
 
&lt;p&gt;信息架构师路&amp;middot;荣瑟夫德发现，打标签对架构信息来说，也并不总是那么好。打个比方，&amp;ldquo;客服搜索和其他类似的浏览等&amp;hellip;&amp;hellip;被专业人员控制了词汇。&amp;rdquo;另外一方面，比如社会软件专家克莱&amp;middot;谢基就认为，实际上，打标签是一种低成本、少专制偏见的分类系统。&lt;/p&gt;
 
&lt;h2&gt;四个极点&lt;/h2&gt;
 
&lt;p&gt;上文矛盾的结果是，在支持者和反对者中，出现了一连串有趣的、有时甚至是过热的争论。（第四章里会有深度讨论）&lt;/p&gt;
 
&lt;p&gt;这些争论看似是对标签是什么、标签的好处的一个根本性反对。但深入来看，实际上是不同目的、不同经济地位、不同价值观的人对打标签进行不同层面的透视。&lt;/p&gt;
 
&lt;p&gt;这样的透视即极点&amp;mdash;&amp;mdash;往两个对立方面延伸&amp;mdash;&amp;mdash;又统一存在于标签系统当中。极点体现在社会性、个性、控制力度与专业性四个方面。通过它，我们可以和标签进行一次对话。&lt;/p&gt;
 
&lt;p&gt;有关极点的设计选择和取舍讨论贯穿全书，你将一个个认识到它们。&lt;/p&gt;
 
&lt;h2&gt;极点体现于&amp;hellip;&amp;hellip;&lt;/h2&gt;
 
&lt;h3&gt;个人&amp;larr;&amp;rarr;社会&lt;/h3&gt;
 
&lt;p&gt;人们打标签时主要是为他们自己着想，还是在设计标签、分享信息的时候，会考虑到一个小组？又或是被认知程度和其他社会因素所影响？&lt;/p&gt;
 
&lt;h3&gt;个性&amp;larr;&amp;rarr;标准&lt;/h3&gt;
 
&lt;p&gt;标签是否是专属与个性的？不然，应该被标准化好便于浏览、搜索和使用？&lt;/p&gt;
 
&lt;h3&gt;自由&amp;larr;&amp;rarr;约束&lt;/h3&gt;
 
&lt;p&gt;标签系统给与用户完全的自由吗？会影响或控制他们的标签吗（比如给出建议）？&lt;/p&gt;
 
&lt;h3&gt;业余&amp;larr;&amp;rarr;专业&lt;/h3&gt;
 
&lt;p&gt;人们打标签的质量如何？标签是由业余人士生成呢，还是专业人员？当他们意见相悖时，如何协调矛盾？&lt;/p&gt;
 
&lt;p&gt;通常来说，社会化标签系统包含了不止一个极点。请看：&lt;/p&gt;
 
&lt;p&gt;■ Gmail中的标签是完全个人和个性的，因为他们用不着分享标签。&lt;/p&gt;
 
&lt;p&gt;■ delicious允许我们打自己的标签，但由于其社会化属性&amp;mdash;&amp;mdash;标签有可能用于发现其他书签和用户&amp;mdash;&amp;mdash;人们倾向于使用相同的标签。&lt;/p&gt;
 
&lt;p&gt;■ amazon.com 的标签界面将用户向热门标签引导，并限制标签的选择。&lt;/p&gt;
 
&lt;p&gt;■ LibraryThing.com 可以打个性标签，但会移除个人标签，因为它是图书服务。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/164&quot; target=&quot;_blank&quot;&gt;标签(tag)和分类&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://cuikai-wh.com/archives/572&quot; target=&quot;_blank&quot;&gt;http://cuikai-wh.com/archives/572&lt;/a&gt;&lt;/p&gt;</description>
				<author>崔凯（小轰）</author>
				<pubdate>2010-07-27 18:36:57</pubdate>
			</item>			<item>
				<title>中国式产品经理</title>
				<link>http://ucdchina.com/snap/7477</link>
				<description>&lt;p&gt;继续探讨产品经理的话题，我看了很多回复，基本反馈的问题可以归结为两类：&lt;/p&gt;
 &lt;ol&gt; 
&lt;li&gt;老板才是真正意义上的产品经理，而&amp;ldquo;产品经理&amp;rdquo;们只是协调和执行者；&lt;/li&gt;
 
&lt;li&gt;只有在&amp;ldquo;产品经理&amp;rdquo;位置上才能做产品设计，不然所谓设计可能只是部分交互设计。&lt;/li&gt;
 &lt;/ol&gt; 
&lt;p&gt;产品初期，尤其创业团队做的那种小产品，老板就是产品经理的现象很普遍。而且根据&amp;ldquo;产品经理应该是对产品理解最深刻的人&amp;rdquo;的定义，我认为创业团队的产品经理非老板莫属，就得是创意和模式的发起人。&lt;/p&gt;
 
&lt;p&gt;产品还没有上线，或者规模和影响力也足够小。所以老板有空闲有必要事必躬亲，甚至陪着创业团队封闭开发，主导产品的市场定位以及发展策略。但当产品发展到一定规模，需要扩展产品群的时候，此时老板的时间和精力必然会受影响。包括各种行业聚会、公关合作和圈钱座谈，也包括黑白两道来收保护费，都免不了大把时间吃饭喝茶。终于有一天，老板们开始觉得力不从心，最好能有个对产品理解与自己相当的家伙来代行产品经理职责。&lt;/p&gt;
 
&lt;p&gt;挖产品经理通常是不太现实的，专业能力是一方面，忠诚度是另一方面。产品是公司的命脉，而产品经理则是产品成败的关键。比较靠谱的办法是培养产品经理，也就是在公司做产品所有职能的小弟小妹里精挑细选认真比对，能入法眼者用心培养并委以重任久经考验，最后光荣上岗。&lt;/p&gt;
 
&lt;p&gt;原则上实行一位产品经理带一个产品的&amp;ldquo;终身制&amp;rdquo;，有两种情况可能需要调整。产品横向发展，在产品规模拆分扩大形成产品群的时候，需要更多产品经理加盟（大公司经常可见）。产品纵深发展，原有产品经理发现对此项业务的理解已经跟不上产品发展的脚本了，此时需要对此道更精通的产品经理来把控（小公司经常可见）。&lt;/p&gt;
 
&lt;p&gt;以上基本就是&amp;ldquo;产品经理&amp;rdquo;在大小公司的发展状况。另外，我一直在试图把&amp;ldquo;产品经理&amp;rdquo;和&amp;ldquo;产品设计师&amp;rdquo;这两类职业给割裂开，不是完全断绝，起码各自的核心竞争力得清楚。观察国内早期小公司最普遍的产品线组织架构如下：&lt;/p&gt;
 
&lt;p&gt;老板&amp;mdash;&amp;mdash;实际在从事&amp;ldquo;产品经理&amp;rdquo;职能，提目标和策略。&lt;br /&gt; 产品经理&amp;mdash;&amp;mdash;实际在从事&amp;ldquo;信息架构、交互设计&amp;rdquo;职能，做规划和方案。&lt;br /&gt; 设计师&amp;mdash;&amp;mdash;实际在从事&amp;ldquo;界面设计、视觉设计&amp;rdquo;职能，美化页面。&lt;/p&gt;
 
&lt;p&gt;这套方案在中国互联网碌碌无为的执行了很多年，直到某年某月，一群设计师高呼&amp;ldquo;以用户为中心&amp;rdquo;试图赶走牛鬼蛇神的时候，顺带想把做&amp;ldquo;规划和方案&amp;rdquo;的权利也霸占。产品经理们才猛然发现他们不可能触及&amp;ldquo;目标和策略&amp;rdquo;，于是气急败坏的冲设计师们喊&amp;ldquo;那还要我们干嘛？&amp;rdquo;问题的焦点汇聚到&amp;ldquo;到底谁做产品更专业&amp;rdquo;这个问题上，产品经理们认为&amp;ldquo;年轻的设计师没有太多互联网经验&amp;rdquo;，设计师们则认为&amp;ldquo;自大的产品经理们过于自信并忽略了用户感受&amp;rdquo;。&lt;/p&gt;
 
&lt;p&gt;在权利和体制范围之内，每个层级的人都在试图把自己拔高，这类现象在国内司空见惯。社会上流行&amp;ldquo;产品经理&amp;rdquo;，于是某些人认为自己也&amp;ldquo;应该&amp;rdquo;是产品经理，先有目标再谈能力，先有理想再谈兴趣。还有些现象我觉得简直就是冷笑话，比如某公司&amp;ldquo;产品总监&amp;rdquo;下边管着一个人（姑且认为是为了名片好看吧）。记住，故意而为之往往都没有好结果，包括某些创业小公司也贴大字报招聘&amp;ldquo;交互设计&amp;rdquo;职位（此规模不需要细分设计职能）。&lt;/p&gt;
 
&lt;p&gt;归根结底，还是大家对&lt;a title=&quot;做设计还是做产品&quot; href=&quot;http://blog.rexsong.com/?p=6113&quot; target=&quot;_blank&quot;&gt;&amp;ldquo;做产品&amp;rdquo;和&amp;ldquo;做设计&amp;rdquo;&lt;/a&gt;认识的狭隘和理解不一致。绝大多数互联网从业者，早些年认为设计约等于美工，无非美化一下页面而已。这些年逐渐接受了新思想革命，认为设计还约等于交互，可以优化一下流程，仅此，但总算又进步了一点点。&lt;/p&gt;
 
&lt;p&gt;这个问题我思考了很久，觉得不应该单独考虑提高设计师们的专业水准，而是得从上往下贯彻思想，让产品经理们对自己有个清醒认识。套用革命领袖的话，坚持&amp;ldquo;两手抓，两手都要硬。&amp;rdquo;&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://blog.rexsong.com/?p=9639&quot; target=&quot;_blank&quot;&gt;http://blog.rexsong.com/?p=9639&lt;/a&gt;&lt;/p&gt;</description>
				<author>千鸟</author>
				<pubdate>2010-07-27 18:24:46</pubdate>
			</item>			<item>
				<title>数据与理论结合，让交互设计更专业</title>
				<link>http://ucdchina.com/snap/7476</link>
				<description>&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;Pay.taobao.com是淘宝卖家订购增值服务的平台，但该平台的可用性和操作体验欠佳，导致客服部门收到非常多来自卖家的订购服务咨询，压力很大，需要在系统层面解决此问题。因此发起了订购流程体验优化项目，对pay.taobao.com进行前后台改版。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image001.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/2b9913e417a9d7edf5287f74d5f4d9ab.png&quot; alt=&quot;图1：优化前的软件服务订购页面&quot; width=&quot;300&quot; height=&quot;247&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;span&gt;&lt;/span&gt;图1：优化前的软件服务订购页面&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image002.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/a0dcdd2cda08bf609a8e4ecee9769351.png&quot; alt=&quot;图2：优化后的软件订购中心首页（原来无首页）&quot; width=&quot;300&quot; height=&quot;256&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;图2：优化后的软件订购中心首页（原来无首页）&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image003.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/f0539f84d186ab298052cdee69b5555d.png&quot; alt=&quot;图3：优化后产品列表页&quot; width=&quot;300&quot; height=&quot;297&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;图3：优化后产品列表页&lt;/p&gt;
 
&lt;p&gt;优化之后，客服部门反馈数据显示，卖家咨询量由40%下降到7%。为此，与大家分享项目的两点经验：&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;1. &lt;/strong&gt;&lt;strong&gt;如何利用数据指导交互设计&lt;/strong&gt;&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;前期数据采集&lt;/li&gt;
 
&lt;li&gt;上线后数据分析&lt;/li&gt;
 
&lt;li&gt;用户反馈数据分析&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;2&lt;/strong&gt;&lt;strong&gt;．良好的团队协作，提升UED&lt;/strong&gt;&lt;strong&gt;话语权&lt;/strong&gt;&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;与非UED同事协作&lt;/li&gt;
 
&lt;li&gt; 与UED同事协作&lt;/li&gt;
 
&lt;/ul&gt;
&lt;h2&gt;1.如何利用数据指导交互设计&lt;/h2&gt;
 
&lt;h3&gt;1.1前期数据&lt;/h3&gt;
 
&lt;p&gt;知己知彼，百战不殆。常说为中间用户设计，只有熟悉数据，了解数据，才知道谁是我们设计的中间用户。通常，公司内部都会有数据部门，也会有后台系统。作为交互设计师，&lt;strong&gt;你应该有不少于业务线产品经理（&lt;/strong&gt;&lt;strong&gt;PD&lt;/strong&gt;&lt;strong&gt;）的内部权限，&lt;/strong&gt;这样才能为设计和决策提供各种数据作为支持。&lt;/p&gt;
 
&lt;p&gt;在制作软件服务订购中心时，我采集了以下几种数据&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;基础数据&lt;/strong&gt;&lt;br /&gt; 包括原软件服务订购页面的PV、UV，订购的交易转换率，订购的成功率、失败率等数据。&lt;/li&gt;
 
&lt;li&gt;&lt;strong&gt;业务数据&lt;br /&gt; &lt;/strong&gt;项目在规划好时，PD会事先知会交互设计师。然后PD会写PRD（需求文档），交互设计师在此时应开始准备调取部分相关数据，在本例中，调取数据如图4所示。此份定量数据非常重要，对于后期用研的介入、设计的参考都起了很大的作用。&lt;/li&gt;
 
&lt;/ul&gt;
&lt;div style=&quot;width: 310px;&quot;&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image004.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/5c77d613b1fec37a395a949494a85c2b.png&quot; alt=&quot;图4 软件服务订购用户数据&quot; width=&quot;300&quot; height=&quot;231&quot; /&gt;&lt;/a&gt;
&lt;p&gt;图4 软件服务订购用户数据&lt;/p&gt;
&lt;/div&gt;
 
&lt;div style=&quot;width: 285px;&quot;&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image005.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/e09ccddefb664ee79d81e10a2857d799.png&quot; alt=&quot;服务订购量的人群分布&quot; width=&quot;275&quot; height=&quot;300&quot; /&gt;&lt;/a&gt;
&lt;p&gt;服务订购量的人群分布&lt;/p&gt;
&lt;/div&gt;
 
&lt;p&gt;不难看出&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;软件服务订购主要由拥有X个&lt;em&gt;（由于保密性，该数据不能透露）&lt;/em&gt;服务的会员所购买，核心消费人群为拥有X个服务的会员。&lt;/li&gt;
 
&lt;li&gt;大多数会员拥有的软件服务数为X。&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;以上数据为前期设计提供了可靠的依据。访问量的多少、用户使用此页面的目标决定了页面的最后设计结果，以及设计该页面时投入的成本。同时，这些数据对于可用性测试的目标用户筛选，提供了明确的指导。&lt;/p&gt;
 
&lt;h3&gt;1.2上线后数据&lt;/h3&gt;
 
&lt;p&gt;&lt;em&gt;&amp;ldquo;任务可被完成&amp;nbsp; 任务在无外界影响下可以被完成。&amp;rdquo;&lt;/em&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: right;&quot;&gt;&lt;em&gt;《交互设计食用指南》使用指南总则&amp;nbsp; by 青云&lt;/em&gt;&lt;/p&gt;
 
&lt;p style=&quot;text-align: left;&quot;&gt;要知道我们的用户任务是否可完成，就得监控关键页面：订购成功与订购失败页面。软件服务订购中心的一个重要指标是充值的成功率和失败率。&lt;/p&gt;
 
&lt;div style=&quot;width: 310px;&quot;&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image006.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/8f80cb004f25ae8055a325c96c73fd6f.png&quot; alt=&quot;http://pay.taobao.com/account/payError.htm&quot; width=&quot;300&quot; height=&quot;150&quot; /&gt;&lt;/a&gt;
&lt;p&gt;充值失败页面&lt;/p&gt;
&lt;/div&gt;
 
&lt;p&gt;我们来看一下上线初始的1个多月来，出错页面的访问量：&lt;/p&gt;
 
&lt;div style=&quot;width: 179px;&quot;&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image007.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/16a12bd17f4a3f252a5c1e1af5f5b998.png&quot; alt=&quot;上线初始出错页面访问量&quot; width=&quot;169&quot; height=&quot;236&quot; /&gt;&lt;/a&gt;
&lt;p&gt;上线初始出错页面访问量&lt;/p&gt;
&lt;/div&gt;
 
&lt;p&gt;可以看到，在上线初期，用户支付的失败率非常高，我们来分析一下当时的页面流程。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;第一步：&lt;/strong&gt;输入金额，弹出浮出层&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image008.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/ec763a459b7768c67747c00d43b89caa.png&quot; alt=&quot;第一步：输入金额，弹出浮出层&quot; width=&quot;300&quot; height=&quot;196&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;第二步：&lt;/strong&gt;点击去支付宝付款&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image009.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/3a3b261ae8bf368e1f34334f6e8c43f1.png&quot; alt=&quot;第二步：点击去支付宝付款&quot; width=&quot;300&quot; height=&quot;201&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;第三步：&lt;/strong&gt;弹出支付宝页面，付款完成后在旧有页面点击任意按钮，判断支付状态。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image010.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/cc55ed87d6cb8d2adbc7bff87abd845b.png&quot; alt=&quot;第三步：弹出支付宝页面，付款完成后在旧有页面点击任意按钮，判断支付状态。&quot; width=&quot;300&quot; height=&quot;182&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;看过此流程，大家不难发现，第二步有点多余，为什么不直接进入第三步呢？其实第二步的增加是为了解决支付失败率高。直觉反应应该是弹出层的问题，经过分析，一些浏览器会阻挡非用户主动激发的弹出页面，故用户点击充值后并未弹出支付宝页面，用户就疑惑了，并随意点击一个按钮，从而导致出错页面访问量高。&lt;/p&gt;
 
&lt;p&gt;此处优化以后，错误页面的访问量有非常明显的下降。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image011.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/3e9f9858dd05eccdc06c68dc31cb1b33.png&quot; alt=&quot;优化后访问数据&quot; width=&quot;300&quot; height=&quot;136&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;h3&gt;1.3用户反馈数据&lt;/h3&gt;
 
&lt;p&gt;&lt;strong&gt;与用户对话，了解你的用户是咋想的，并逐渐的改进产品。&lt;/strong&gt;与开发、PD、PM共同协商问卷想采集的数据后，再与用研同学合作，他们会整理出合适的题目。特别是一些设计中担心的小点，如页面载入速度、CDN速度等、信息架构等。这份在线问卷的入口放置在订购中心首页左侧。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image012-e1280155792382.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/3a687ab393f28fb8a8350436faa8cfd6.png&quot; alt=&quot;问卷访问入口&quot; width=&quot;35&quot; height=&quot;166&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;打开后，是一份半开放、半封闭式的问卷。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image013.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/7e8625285e3ef2bff9936795c8caebb7.png&quot; alt=&quot;问卷详情&quot; width=&quot;300&quot; height=&quot;250&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;用研同学会将这些数据整理好，并出具报告。内容包括定量与定性统计两部分。来自用户的一手反馈能证明团队的工作，还能为后续优化指明方向。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image014.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/322efb58a2eb892004f84978470de30d.png&quot; alt=&quot;用研报告&quot; width=&quot;300&quot; height=&quot;194&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;用户反馈文字很小&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image015.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/1d15e6ad4f325c9c017b8233142fd5fe.png&quot; alt=&quot;用户反馈文字很小&quot; width=&quot;300&quot; height=&quot;62&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;收到用户反馈字体很小。查看页面数据，发现软件订购中心的访问者中，大分辨率的用户是1024X768用户的2倍以上！于是他们做了专门的界面优化。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image016.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/e24af4e92d561380b65025b29445a1d7.png&quot; alt=&quot;访问者显示器分辨率分布图&quot; width=&quot;300&quot; height=&quot;144&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;h2&gt;2.良好的团队协作，提升UED话语权&lt;/h2&gt;
 
&lt;h3&gt;2.1从非UED的角度去分析问题（与非UED同事协作）&lt;/h3&gt;
 
&lt;p&gt;记得一位朋友讲过，要是两情侣吵架，闹得不可开交那种。你重复她的话，她来重复你的话，两人会觉得很搞笑，自然矛盾也就和解了。&lt;/p&gt;
 
&lt;p&gt;生活如是，工作上也如是。运营、PD、前端、测试、开发要求的东西，你换位思考一下，也自然理解为什么了，也不会去瞎闹腾了。如果你没有这些职位的经验，多和PD、运营交流，类似行业的变身还是很容易。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;掌握与PD\PM\开发测试人员沟通的语言&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;为了与PD、PM、开发、架构师更好地沟通需求，笔者在完成交互设计任务之外，还专门去了解了后台复杂的计费模型、产品定义模型，这样才能更好地了解什么功能能做到，什么功能不能做到，时，其他项目组成员才不会认为你是一个啥都不知道、只会空谈体验的傻逼。&lt;/p&gt;
 
&lt;p&gt;这些底层知识，在原型设计时发挥了相当大的作用。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;例如，通过了解预付费模型、后付费模型。&lt;/strong&gt;在设计计费详单、续费详单时会更加清晰，能更清楚的向用户展现整个收费过程。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;站在架构师的角度讨论体验&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;旧版的订购列表页面将所有服务罗列出来，操作中的订购按钮无论订购与否、一直有效。用户点击订购按钮后，根据用户权限判断进入订购页面或者错误页面。用户可能多次点击均返回错误页面，体验十分糟糕。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image017.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/3a48fa1073aa44819e8def7c3e7343d5.png&quot; alt=&quot;旧版订购体验&quot; width=&quot;300&quot; height=&quot;220&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;为了减少用户的不必要操作，在新版的订购中心，用户在浏览增值产品列表页时，订购与否的逻辑判断移动到该页面（进入产品详情页前），如果你没有购买权限，会在最开始就提示不能购买原因。同时，根据是否可续费显示续费按钮状态；根据是否可升级显示升级状态，并提示用户原因。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image018.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/acb67843c04cf83ff911246e25f5b4b6.png&quot; alt=&quot;新版订购列表操作栏&quot; width=&quot;300&quot; height=&quot;198&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;正是这样，提高了订购流程了满意度。减少订购中的咨询而增加了订购前的咨询。但页面需要根据每个用户的订购情况来分析应该显示的效果，架构师提出页面展现性能的担忧。该担忧是必要的。与前端交流后提出以下方案，并结合线上数据做分析：&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;方案1：页面通过后台计算好之后再返回。&lt;/strong&gt;前端工程师无需任何工作，缺点是用户看到的页面时间会增加。列表页面是否针对每个用户做出独立计算，将其所有的服务状态读取出来。我们可以参考之前采集的页面PV数据得到以下分析：&lt;/p&gt;
 
&lt;p&gt;请求量：?,000,000*1*40 = ?,000,000；不考虑网速的情况下，页面响应相比另一种方案增加200+ms。另外根据页面PV、UV数据，服务器完全可承受该压力。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;方案2：页面渲染与服务订购状态异步渲染。&lt;/strong&gt;即用户会首先看到整体界面，个性化软件服务状态在1S以内会根据用户具体情况调整。异步获取数据在淘宝的商品详情页面有使用，适用于页面量大，用户逐步接受数据页面。缺点是前端工程师需要增加额外工作。再者，如根据是否绑定手机来判断是否开放短信订购入口这些情况，计费系统本身无法判断，需要调取外部接口，开发成本异常高。故决定只枚举计费系统情况，覆盖了80%以上的权限情况。&lt;/p&gt;
 
&lt;p&gt;综合考虑前端、开发成本，由当前页面PV等情况，最终选择了方案1。通过后续用户反馈入口收集到的数据：只有少量用户反馈访问速度慢。这次改进是有效的。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;与运营合作&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;设计界面时，就想到营销手段。做产品列表页面时，想想运营的同事如何在这个列表上完成他们的营销目标？其实很简单，是大家也都能想到的，在超市里面看到特别需要促销的商品会贴上折扣的信息，于是利用UED的技能，为运营提供一些促销技巧。这不是特牛的事，但表达了UED的态度。大家合作也就非常愉快！&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image019.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/c39b4a1d321a6c86986e7d5ce343c8bc.png&quot; alt=&quot;促销图标&quot; width=&quot;300&quot; height=&quot;145&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image020.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/e99842413dd30cd4937eb19f2dab2a26.png&quot; alt=&quot;促销图标线上效果&quot; width=&quot;300&quot; height=&quot;214&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;h3&gt;2.2与UED同事协作&lt;/h3&gt;
 
&lt;p&gt;作为一个平台，当其他服务接入时，我们通常希望其他交互设计师、视觉设计师能做出符合要求的图标。当该产品转交到其他人手里时，让他们理解你的思想，就CODING时候的注释一样，写在里面。方便他人，尊重他人，是为了自己得到尊重。因此，在我的原型里，除了页面，还加入了大量的注释。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image021.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/39133c2ce0f721135847fd909f8ff7bd.png&quot; alt=&quot;AXURE目录树&quot; width=&quot;285&quot; height=&quot;243&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image022.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/d0f66681edd2c9e8576c41cc0d6cb079.png&quot; alt=&quot;文案说明，统一平台的介绍语言。&quot; width=&quot;300&quot; height=&quot;154&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;文案说明，统一平台的介绍语言。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image023.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/92a12af67465a36f6cdce073f65c96cd.png&quot; alt=&quot;图标接入说明，为接入其他软件服务时视觉统一做准备。&quot; width=&quot;300&quot; height=&quot;170&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;图标接入说明，为接入其他软件服务时视觉统一做准备。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://ued.taobao.com/blog/wp-content/uploads/2010/07/image024.png&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/b01ec9dd519f3f8a1fa9546cc8cf8702.png&quot; alt=&quot;模块规范，前端有了这个，思考全局组件时更轻松。&quot; width=&quot;300&quot; height=&quot;142&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;模块规范，前端有了这个，思考全局组件时更轻松。&lt;/p&gt;
 
&lt;h2&gt;3.总结&amp;hellip;&amp;hellip;&lt;/h2&gt;
 
&lt;p&gt;通过前期数据采集、上线后数据分析、用户反馈数据分析等方法指导交互设计，在与UED、非UED同事的良好的团队协作，最终提升了UED话语权。让交互设计师走向&lt;strong&gt;专业、品质、协同&lt;/strong&gt;！&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://ued.taobao.com/blog/2010/07/26/data-for-interaction-design/&quot; target=&quot;_blank&quot;&gt;http://ued.taobao.com/blog/2010/07/26/data-for-interaction-design/&lt;/a&gt;&lt;/p&gt;</description>
				<author>老三</author>
				<pubdate>2010-07-27 18:18:38</pubdate>
			</item>			<item>
				<title>[生活中的设计] 地铁出站口</title>
				<link>http://ucdchina.com/snap/7475</link>
				<description>&lt;p&gt;上周六在地铁出站口看到前面一个人一边打电话一边要出站，他在左手边的机器划了卡，想从机器右边的旋转门出去，结果被卡住了。因为左手边的机器管的是左边的旋转门。&lt;/p&gt;
&lt;pre class=&quot;note&quot;&gt;&lt;span class=&quot;cc&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/8bf1d2f240545ec7a073c20d19dd3c14.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/span&gt;&lt;/pre&gt;
&lt;p&gt;&lt;br /&gt;设计者大概是考虑用右手划卡身体自然就在机器左边，正好从左边的旋转门出去。&lt;/p&gt;
&lt;pre class=&quot;note&quot;&gt;&lt;span class=&quot;cc&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/93e55295eadd1deeab9d424204ae615c.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/span&gt;&lt;/pre&gt;
&lt;p&gt;&lt;br /&gt;&lt;br /&gt;然而实际生活中，如果右手拿了东西（比如打电话那位）或者本身是左撇子，很可能就会用左手去划卡。我认为用右手划卡并不是一个普遍的行为，因此不能作为设计的出发点。&lt;br /&gt;&lt;br /&gt;这里的问题在于，机器和转门之间没有明显的联系，用户不能很快的将它们一一对应起来。&lt;br /&gt;&lt;br /&gt;一个想法是，用颜色将它们联系起来。&lt;/p&gt;
&lt;pre class=&quot;note&quot;&gt;&lt;span class=&quot;cc&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/8d50a5d3d8db36806ae15030e32de82f.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/span&gt;&lt;/pre&gt;
&lt;p&gt;&lt;br /&gt;&lt;br /&gt;欢迎补充。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/26&quot; target=&quot;_blank&quot;&gt;生活中的体验&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://www.douban.com/note/80396391/&quot; target=&quot;_blank&quot;&gt;http://www.douban.com/note/80396391/&lt;/a&gt;&lt;/p&gt;</description>
				<author>小明</author>
				<pubdate>2010-07-27 16:58:40</pubdate>
			</item>			<item>
				<title>Web表单设计之注册表单</title>
				<link>http://ucdchina.com/snap/7472</link>
				<description>&lt;p&gt;必须面对的问题有：用户不喜欢提交表单。然我们的目的是让用户愿意提交表单。&lt;/p&gt;
 
&lt;p&gt;下面是一个关于web表单设计的调查报告，这个结果来源于&lt;a href=&quot;http://www.biaodianfu.com/web-form-design-patterns.html&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;100个令人瞩目的网站&lt;/span&gt;&lt;/a&gt;。&lt;/p&gt;
 
&lt;p&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;注册表单设计调查&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
 
&lt;p&gt;1.表单的安置&lt;/p&gt;
 
&lt;p&gt;1.1注册表单链接的标题是怎么样的？&lt;/p&gt;
 
&lt;p&gt;当用户想要加入某个时，他们会试图寻找&amp;ldquo;sign-up&amp;rdquo;，&amp;ldquo;register&amp;rdquo;，&amp;ldquo;join&amp;rdquo;，&amp;ldquo;join&amp;rdquo;，&amp;ldquo;become a member&amp;rdquo;或者&amp;ldquo;creat an account&amp;rdquo;等这样的短语。用户期望可以通过这些链到注册表单。不幸的是，情况不一定是这样的。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;link-title&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/11142e004aaf70e7c00d21dcc68f718c.gif&quot; alt=&quot;&quot; width=&quot;504&quot; height=&quot;397&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;从图表可见，最受欢迎的标题是&amp;ldquo;Sign up&amp;rdquo;（40%），接着是&amp;ldquo;Join&amp;rdquo;（18%），&amp;ldquo;Register&amp;rdquo;（18%）以及&amp;ldquo;Creat account&amp;rdquo;（17%），极少数是按钮超大，又闪亮，并且写着&amp;ldquo;start here&amp;rdquo;的字样。设计师与其设计并强调服务的功能性还不如试图去表达信息。&lt;/p&gt;
 
&lt;p&gt;1.2注册表单的链接放在哪儿？&lt;/p&gt;
 
&lt;p&gt;当用户第一次访问某个网站，他们会试图找出单独布局块代表的意思。他们的眼睛运动是跳跃的，并且用户试图了解哪个区域是更重要的，他们想要的内容可能被放在什么地方。为了满足用户体验，设计师需要帮助用户直观地知道哪些是在开始使用服务前所需要做的事。&lt;/p&gt;
 
&lt;p&gt;如果用户找不到通往注册表单的链接，他可就不会注册你的服务。因此让链接尽可能地显而易见是最关键的。那么设计师应该把&amp;ldquo;注册&amp;rdquo;的链接放在什么地方？根据调查，这个注册链接&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;59%的网站是放在网站的顶部（其中76%是被放在右上角）&lt;/li&gt;
 
&lt;li&gt;21%的网站是放在首页的突出位置（链接或者表单自己被放在首页上）&lt;/li&gt;
 
&lt;li&gt;9%是被隐藏在顶部&amp;ldquo;登陆&amp;rdquo;链接之后（例如：&lt;a href=&quot;http://www.craigslist.org/about/sites.html&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Craigslist&lt;/span&gt;&lt;/a&gt;）&lt;/li&gt;
 
&lt;li&gt;很少注册链接会被放在侧边栏上（7%-&lt;a href=&quot;http://www.propeller.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Propeller&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.xing.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Xing&lt;/span&gt;&lt;/a&gt;），但是4%的站点为用户直接提供服务，只有在用户需要保存设置的时候才需要用户进行注册。&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;2.表单的设计&lt;/p&gt;
 
&lt;p&gt;2.1需要简化注册表单的样式吗？&lt;/p&gt;
 
&lt;p&gt;当用户点击了注册链接之后，他很有可能想要注册你提供的服务。更重要的是，他并没有点击那些探索更深导航操作的链接或者具有吸引力的广告链接。&lt;/p&gt;
 
&lt;p&gt;因此，设计师尝试去掉所有没必要的详细资料以及不能帮助用户完成表单的描述。常常只是呈现一个logo和表单自身，没有任何的导航操作和附加信息。用户必须尽可能地关注在他要去完成的任务上。任何会分散用户注意力的因素不应该被保留。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;page-layout-minimized&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/59b961a3762dacb8b42b249df28651ea.jpeg&quot; alt=&quot;&quot; width=&quot;499&quot; height=&quot;359&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;设计师经常使用&amp;ldquo;最小化&amp;rdquo;的布局来构建注册表单。根据调查，61%的web表单和普遍的页面相比更简单（例如：&lt;a href=&quot;http://www.movabletype.org/cgi-bin/mtcs/mt-cp.fcgi?__mode=register&amp;amp;blog_id=2&amp;amp;return_to=http%3A%2F%2Fwww.movabletype.org%2F&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;MovableType&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;https://www.livejournal.com/create.bml&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Livejournal&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.amazon.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Amazon&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://passport.yandex.ru/passport?mode=register&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Yandex.ru&lt;/span&gt;&lt;/a&gt;）&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;yahoo&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/82a11bf13a78aca3521233e72976a23c.jpeg&quot; alt=&quot;&quot; width=&quot;494&quot; height=&quot;443&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;从&lt;a href=&quot;https://edit.yahoo.com/registration?.intl=us&amp;amp;new=1&amp;amp;.done=http%3A//mail.yahoo.com&amp;amp;.src=ym&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;雅虎&lt;/span&gt;&lt;/a&gt;的注册表单可以看出，访问者只需要填写账户信息即可，没有别的干扰因素去分散用户的注意力。注意表单中的语气和语义都是吸引人的对话式，这既简单又友好。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;flixster&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/3a3f44651e7855ab794802670f0cae9c.jpeg&quot; alt=&quot;&quot; width=&quot;450&quot; height=&quot;419&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;flixster2&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/e7d95ca71e2e17a7c02ffc8590b788ab.jpeg&quot; alt=&quot;&quot; width=&quot;450&quot; height=&quot;167&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.flixster.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Flixster&lt;/span&gt;&lt;/a&gt;是个典型的反面例子，它把表单页面塞得满满的，一点也不尊重它的访问者。注册页面上提供了每种可能的操作导航，并且登陆页面上右边的广告比登陆表单还要突出。&lt;a href=&quot;http://photobucket.com/register/?ref=headerregister&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Photobucket&lt;/span&gt;&lt;/a&gt;应该是我们见过的第二拥挤的表单。&lt;/p&gt;
 
&lt;p&gt;2.2需要提供任何附加信息吗？&lt;/p&gt;
 
&lt;p&gt;许多设计师试图通过类似于帮助、信息内容要求甚至是版权申明的附加信息来鼓励访问者主动填写表格。但是它不同于点对点，在大部分例子中注册的好处依然是通过表单来体现。&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;41%的表单告诉用户注册的好处（&lt;a href=&quot;http://signups.myspace.com/index.cfm?fuseaction=signup&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;MySpace&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;https://secure.del.icio.us/register&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Del.icio.us&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;https://www.last.fm/join/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Last.fm&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;https://www.linkedin.com/secure/register?trk=hb_join&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;LinkedIn&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://digg.com/register/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Digg&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.mister-wong.com/register/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Mister Wong&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://my.break.com/Member/Authentication/Registration.aspx&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Break.com&lt;/span&gt;&lt;/a&gt;）&lt;/li&gt;
 
&lt;li&gt;28%仅仅是单纯的注册页面，没有任何附加信息（&lt;a href=&quot;http://pownce.com/signup/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Pownce&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.deviantart.com/join/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;DeviantArt&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.dailymotion.com/register&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Dailymotion&lt;/span&gt;&lt;/a&gt;）&lt;/li&gt;
 
&lt;li&gt;11%告诉用户需要多久时间来填写（&lt;a href=&quot;http://www.threadless.com/join&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Threadless&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;https://www.newsvine.com/_tools/new/user&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Newsvine&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://wordpress.com/signup/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Wordpress&lt;/span&gt;&lt;/a&gt;)&lt;/li&gt;
 
&lt;li&gt;很少一部分（6%）网站提到注册过程中所需要填写的信息。一些步骤中会提供一些警告（8%）和示意（6%，例如&lt;a href=&quot;https://signup.37signals.com/basecamp/Basic/signup/new?source=37s%2520home&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;37signals&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.bloglines.com/register&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Bloglines&lt;/span&gt;&lt;/a&gt;）&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;2.3单页表单VS多页表单&lt;/p&gt;
 
&lt;p&gt;调查结果中，93%的表单是单页表单。设计师试图帮助用户尽可能快速和无痛地完成注册流程。只有一些网站利用多页表单把探索用户参数选择结合在注册过程中。&lt;/p&gt;
 
&lt;p&gt;比如，&lt;a href=&quot;http://www.meebo.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Meebo&lt;/span&gt;&lt;/a&gt;把一个完整的注册过程整合在一张注册表单中，并且通过一个弹出框的形式为用户提供注册向导。这个表单由6个页面组成，用户通过一些附加信息的选择从而进行他们账户的设置。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;meebo&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/19579bef01024f900ee67a070fdb4fbc.gif&quot; alt=&quot;&quot; width=&quot;450&quot; height=&quot;290&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;2.4输入框标附加信题需要突出吗？&lt;/p&gt;
 
&lt;p&gt;62%的注册表单用&lt;strong&gt;粗体&lt;/strong&gt;的方式去突出输入框的标题。还有的使用&lt;em&gt;斜体&lt;/em&gt;去达到同样的效果。为了让标签能够更加可见，20%的注册表单用色彩，18%的用纯文本。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;labels-small&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/00aad6889a19ccf758ae9716c145a640.jpeg&quot; alt=&quot;&quot; width=&quot;317&quot; height=&quot;496&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;2.5标签对齐&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;41%的网站使用标签右对齐 （&lt;a href=&quot;http://www.youtube.com/signup?next=/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;YouTube&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://de.facebook.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Facebook&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.metacafe.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Metacafe&lt;/span&gt;&lt;/a&gt;）&lt;/li&gt;
 
&lt;li&gt;30%的注册表单使用顶端对齐（&lt;a href=&quot;http://www.behance.net/Sign_Up&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Behance.net&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;https://secure.wufoo.com/signup/1/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Wufoo&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.tickspot.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Tickspot&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;https://www.mixx.com/register&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Mixx&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.dzone.com/links/users/register.html&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;DZone&lt;/span&gt;&lt;/a&gt;）&lt;/li&gt;
 
&lt;li&gt;29%使用的是左对齐（(&lt;a href=&quot;http://digg.com/register/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Digg&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.ning.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Ning&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.wykop.pl/rejestracja&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Wykop.pl&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.43things.com/xs?create=1&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;43things&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.studivz.net/Registration/Step1&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;StudiVZ&lt;/span&gt;&lt;/a&gt;）&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;&lt;img title=&quot;alignment&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/8772a5f30afba8d07e3ab23d084c2207.gif&quot; alt=&quot;&quot; width=&quot;514&quot; height=&quot;541&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;根据&amp;ldquo;Matteo Penzo的标签放置研究结果（&lt;a href=&quot;http://www.uxmatters.com/MT/archives/000107.php&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Matteo Penzo&amp;rsquo;s label placement research&lt;/span&gt;&lt;/a&gt;）&amp;rdquo;（1996）和&amp;ldquo;Luke Wroblewski的发现（&lt;a href=&quot;http://www.lukew.com/resources/articles/web_forms.html&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Luke Wroblewski&amp;rsquo;s findings&lt;/span&gt;&lt;/a&gt;）&amp;rdquo;（&lt;a href=&quot;http://www.lukew.com/resources/articles/WebForms_LukeW.pdf&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;PDF&lt;/span&gt;&lt;/a&gt;），右对齐由于几乎不需要眼睛的注视，能最大的减少完成的时间。如果你想要达到相同的目的但是只有一块受实际区域制约的垂直屏幕，标签顶端对齐则会更好一些。如果你想让用户了解标签的内容，左对齐则是最好的。&lt;/p&gt;
 
&lt;p&gt;2.6有多少必填区域？&lt;/p&gt;
 
&lt;p&gt;当进行一个调查时，我们已经注意到表单中的必填项越来越少了。几年前，设计师要求访问者填写他们的姓名、地址、城市和个人兴趣，但现在仅仅只需要登录名、密码和确认密码。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;mandatory&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/7f5d4bae65b102b2228bf8f66b4b6e41.jpeg&quot; alt=&quot;&quot; width=&quot;554&quot; height=&quot;214&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;我们发现54%的表单要求用户最多填写5个输入框（其中6%的网站在使用服务前根本不需要注册）。34%的表单使用6-8个输入框，然而有12%的网站顶着用户的忍耐度让他们完成超过9个的必填项。&lt;/p&gt;
 
&lt;p&gt;2.7有多少可选项？&lt;/p&gt;
 
&lt;p&gt;和上面发现的类似，我们注意到大多数网站避免可选项并且要求用户在完成注册流程之后补全可选项。其中62%的表单根本就没有可选项，还有98%的表单有少于5个的可选项。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;optional&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/8e8a0e08b281f2dc91878c0aab07cefe.jpeg&quot; alt=&quot;&quot; width=&quot;563&quot; height=&quot;213&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;2.8垂直或者水平的安排区域&lt;/p&gt;
 
&lt;p&gt;在这个方面，垂直无阻碍延伸的垂直布局区域是注册表单表现出强大趋势。86%的网站把输入框垂直布局。除此以外，15%的布局更强调利用漂亮且吸引人的视觉设计来让访问者在填写表单时感到更舒适。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;box&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/86041627256e13e6d4bcf5d00ea5b37f.jpeg&quot; alt=&quot;&quot; width=&quot;355&quot; height=&quot;385&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://box.net/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Box.net&lt;/span&gt;&lt;/a&gt;提供了一个简单的垂直布局的输入区域。当用户输入数据的时候，他们的眼睛固定在纵轴输入框左侧的交叉点上。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;mint&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/0e7a370ed0ae7248b981d020b46ae4e5.jpeg&quot; alt=&quot;&quot; width=&quot;411&quot; height=&quot;307&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.haveamint.com/account/create&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Mint&lt;/span&gt;&lt;/a&gt;是一个横向布局的注册表单。当用户输入数据的时候，他们的眼睛需要跳来跳出。&lt;/p&gt;
 
&lt;p&gt;3、表单的功能性&lt;/p&gt;
 
&lt;p&gt;3.1.Hover,active,focus &amp;ndash; 使用中的效果?&lt;/p&gt;
 
&lt;p&gt;为了提高表单的完成率，设计师试图避免各种各样的分散因素，并且提供一个清晰明确并且简单的web表单。这就是为什么任何视觉效果需要非常适当地使用的原因。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;hover&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/3ea349f937ee89afdf35a81a27677643.jpeg&quot; alt=&quot;&quot; width=&quot;488&quot; height=&quot;376&quot; /&gt;&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;84%的web表单没有任何种类的hover、active或者focus的效果&lt;/li&gt;
 
&lt;li&gt;16%使用非常细微的鼠标上移的效果&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;3.2. 帮助，支持，工具技巧：静态还是动态的？&lt;/p&gt;
 
&lt;p&gt;有时候，输入区域的标签不够明确，但是用户却需要足够理解才能提供这些信息。用户名适用哪些字符格式？密码的字符数限制是多少？提供的Email地址会不会自动变成登录名使用？&lt;/p&gt;
 
&lt;p&gt;用户通过建议和技巧的帮助最小化地减少输入框重新考虑的次数。而且，没有比虽然输入的内容看上去完全正确，但是输入框却不接受的情况更恼怒的了。为了避免这个问题，设计师（通常）使用不引人注目但清晰的建议提示。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;help-support&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/96b50e46f1132a07049d873ad5d88d64.jpeg&quot; alt=&quot;&quot; width=&quot;507&quot; height=&quot;367&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;调查报告中57%的web表单只有 &amp;ldquo;静态&amp;rdquo;的帮助提示，这些帮助提示只是之前假定好的一些和用户有关的提示信息；这些提示被明显地放在输入框的旁边。10%的操作提示通常是在一些帮助图标被点击之后或者用户输入信息时才会出现的。&lt;/p&gt;
 
&lt;p&gt;3.3．帮助，支持，操作提示：应该放在什么位置？&lt;/p&gt;
 
&lt;p&gt;当在为用户提供帮助时，一定要确定帮助是简单地提示，并且可以方便地被找到和理解。这是确保用户通过帮助提示不犯错误地完成表单的决定性因素。为了达到这个目标，你需要知道用户希望这些帮助在什么地方出现。所以，这些帮助和提示通常被放在表单的什么位置呢？&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;help&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/b3a7db8f1069dcefbaa26b8692c6cee0.jpeg&quot; alt=&quot;&quot; width=&quot;540&quot; height=&quot;608&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;如果帮助提示出现的话，它们会出现在&amp;hellip;&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;在输入区域下面（57%）&lt;/li&gt;
 
&lt;li&gt;在输入区域的右侧（26%）&lt;/li&gt;
 
&lt;li&gt;在输入区域的上方（13%）&lt;/li&gt;
 
&lt;li&gt;在输入区域的左侧（4%）&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;我们注意到提示信息直接放在输入框下方是一个强烈的趋势。通常这类帮助提示会有稍微不同的色彩，大部分情况比主要内容要浅一些。&lt;/p&gt;
 
&lt;p&gt;3.4.输入确认：静态的还是Ajax动态？&lt;/p&gt;
 
&lt;p&gt;去年一整年，很多网站为了和用户进行互动，看上去似乎确实充满了Ajax的应用，但Ajax在流行网站服务中仍然还没有设法达到临界点。令人惊讶的是，我们不能认清Ajax的趋势。用户在输入完所有信息点击提交按钮的&amp;ldquo;经典&amp;rdquo;确认技术依然比Javascript的实时确认要来的流行。&lt;/p&gt;
 
&lt;p&gt;根据研究：&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;30%的表单只在表单顶部显示一条错误信息。（没有提示哪个输入框有问题）&lt;/li&gt;
 
&lt;li&gt;29%的表单会在输入框旁边提示相应的操作帮助（顶部没有提供错误信息）&lt;/li&gt;
 
&lt;li&gt;25%的表单同时使用错误信息和输入框提示。&lt;/li&gt;
 
&lt;li&gt;22%的表单利用Ajax的实时确认来进行提示。&lt;/li&gt;
 
&lt;li&gt;14%利用Javascript的错误提醒。&lt;/li&gt;
 
&lt;li&gt;1%的表单是用系统信息提醒，并且给出&amp;ldquo;后退&amp;rdquo;链接。&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;3.5．错误信息的设计&lt;/p&gt;
 
&lt;p&gt;正如你所看到的，我们已经识别出6种不同类型的错误提示。显而易见，14%的表单仍旧使用Javascript错误窗口来传达问题（例如，&lt;a href=&quot;http://www.yousendit.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;YouSendIt&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.mail.ru/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Mail.ru&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.newsvine.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Newsvine&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.clipmarks.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Clipmarks&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://passport.yandex.ru/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Yandex&lt;/span&gt;&lt;/a&gt;，看下面的截图），然而只有22%使用Ajax确认（通常用来确认用户名的有效性）。当然也显然的是没有一个网站是没有任何确认的。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;newsvine&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/7640469d5cdfe0f63faf137871969107.jpeg&quot; alt=&quot;&quot; width=&quot;483&quot; height=&quot;228&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.newsvine.com/&quot; target=&quot;_blank&quot;&gt;&lt;em&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Newsvine&lt;/span&gt;&lt;/em&gt;&lt;/a&gt;&lt;em&gt;使用Javascript错误窗口来传达问题。&lt;/em&gt;&lt;/p&gt;
 
&lt;p&gt;通常设计师试图报告错误的使用方法。a、在点击提交按钮之后显示错误信息；b、在视觉上高光&amp;ldquo;不正确&amp;rdquo;的输入框。第一种错误情况通常会作为一条信息在页面的顶部（表单之前）显示出来。第二种情况通常是把错误的输入框的边框色彩和输入的标签进行高光（大部分情况是红色的字体以及红色的背景色）。&lt;/p&gt;
 
&lt;p&gt;有时候设计师合并两种技术并且利用输入区域高光错误信息的方法。例如，看一下&lt;a href=&quot;http://www.ning.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Ning&lt;/span&gt;&lt;/a&gt;结合两种技术的注册表单&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;ning-3&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/d559f9a24d98fe072d03fe93c3155ff5.jpeg&quot; alt=&quot;&quot; width=&quot;513&quot; height=&quot;548&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;通常，红色被用于标示错误；但是在这种情况下就没有必要了。当表单完成时，&lt;a href=&quot;http://www.tickspot.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Tickspot&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.mixx.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Mixx.com&lt;/span&gt;&lt;/a&gt;和&lt;a href=&quot;http://www.furl.net/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Furl&lt;/span&gt;&lt;/a&gt;使用黄色来表示遇到的问题。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;tick4&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/60ff03dde2c671ea3b047f2b58143133.gif&quot; alt=&quot;&quot; width=&quot;512&quot; height=&quot;214&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;不过，如果有任意一种色彩来表示注册成功的话，它应该就是绿色，97%的网站表示成功的视觉就是用绿色的。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;tick5&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/f14c19bd0e52881e5f57bd69dc95c279.gif&quot; alt=&quot;&quot; width=&quot;441&quot; height=&quot;118&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;3.6有必要确认Email吗？&lt;/p&gt;
 
&lt;p&gt;只有18%的网站需要确认Email（例如，&lt;a href=&quot;http://www.odeo.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Odeo&lt;/span&gt;&lt;/a&gt;, &lt;a href=&quot;http://www.ning.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Ning&lt;/span&gt;&lt;/a&gt;）。我们实在没有任何理由让用户重复输入email地址，毕竟用户能够看到他们输的是什么，因为email地址的区域不像是密码区域那样是以星状显示。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;re-type-email&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/0b49dbb55aaaadbef7a49250bc2f566a.jpeg&quot; alt=&quot;&quot; width=&quot;487&quot; height=&quot;368&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;3.7有必要去确认密码吗？&lt;/p&gt;
 
&lt;p&gt;当用户看不到自己所输的内容（他们看到的是以星号代替的）时让他们确认输入感觉上是有理由的。但是很多网站为了缩短完成注册表单的时间而去掉二次确认的步骤。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;re-type-pass&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/1d5a43c1acc3a32a3b87316f8ad353fb.jpeg&quot; alt=&quot;&quot; width=&quot;487&quot; height=&quot;368&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;72%的情况是有必要确认密码的，但是许多例如Facebook，Friendster，LinkedIn, Stumbleupon, Pownce 和 Twitter的网站都不要求确认密码。&lt;/p&gt;
 
&lt;p&gt;3.8. 需要使用校验码吗？&lt;/p&gt;
 
&lt;p&gt;如果校验码去掉的话用户肯定很开心，但是实际上校验码却是必要的，因为网站需要防止垃圾注册软件创建很多垃圾帐户，不然他们需要不停地在数据库中过滤掉这些账户。&lt;/p&gt;
 
&lt;p&gt;根据我们的调查：&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;52%的网站没有使用校验码。&lt;/li&gt;
 
&lt;li&gt;39%的网站是不能在不刷新页面的情况下实时刷新校验码的，这个实在是在可用性上非常的糟糕的一件事。&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;但是我们还是不能看清注册表单是否需要校验码的趋势。任何情况下，如果你使用校验码，请确定它是易可读的，或者在不可读的情况用户可以实时刷新校验码的。一些网站没有提供实时刷新校验码的功能，除了Digg，AOL, Slashdot, Google等。Fm倒是能够让校验码变成可以听的，当它很难被识别的时候。&lt;/p&gt;
 
&lt;p&gt;3.9.需要使用取消按钮吗？&lt;/p&gt;
 
&lt;p&gt;当我们在思考设计表单时一些认为会碰到的问题时，我们期望注册表单没有取消按钮，因为毕竟所有选项都已经填写好了，对于用户来讲就没有太大的意义去退出这个表单。然而我们在一定程度上错了。&lt;/p&gt;
 
&lt;p&gt;只有8%的情况使用了取消按钮，这些情况中的一些取消按钮正好出现在&amp;ldquo;条款和协议&amp;rdquo;的下面（例如，&lt;a href=&quot;http://writer.zoho.com/jsp/home.jsp?serviceurl=%2Findex.do&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Zoho Writer&lt;/span&gt;&lt;/a&gt;）。所以如果用户不同意服务条款，他们会退出这个流程。另一方面，一些服务在注册之前给出了一个支付方案（例如，&lt;a href=&quot;http://www.crazyegg.com/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Crazyegg&lt;/span&gt;&lt;/a&gt;）。在这种情况下用户选择错了支付方案时他们需要利用取消按钮返回并重新选择另外更好的支付方案。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;dzone&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/b32d83185aa7ee7aa6f5cf66ae3f5d1a.gif&quot; alt=&quot;&quot; width=&quot;421&quot; height=&quot;305&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;除此以外：我们还是不明白为什么&lt;a href=&quot;http://www.dzone.com/links/users/register.html&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;Dzone&lt;/span&gt;&lt;/a&gt;要把取消按钮放在注册表单的左侧。&lt;/p&gt;
 
&lt;p&gt;如果使用取消按钮的话，有4%的情况是放在提交按钮的右侧。在这些网站中观察发现，取消和提交按钮没有非常强烈的视觉区别，而且还被挨在一起。从可用性观点上去看，把主要动作和次要动作用视觉区分开来并且用明确的空隙去区别它们是更有意义的。&lt;/p&gt;
 
&lt;p&gt;3.10. 提交按钮的对齐方式&lt;/p&gt;
 
&lt;p&gt;考虑到表单的样式，把提交按钮左对齐、右对齐或者放在中间是有实际意义的。有56%的设计师把提交按钮左对齐，第二位是26%的把按钮居中对齐。&lt;/p&gt;
 
&lt;p&gt;&lt;img title=&quot;submit-alignment&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/f10753a33316600b0d66029d7283a731.jpeg&quot; alt=&quot;&quot; width=&quot;551&quot; height=&quot;212&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;右对齐的提交按钮依然比较流行（17%），但是一般都是起到需要进行下一步操作时的指示作用。在这些情况中提交按钮经常是以&amp;ldquo;继续&amp;rdquo;或者&amp;ldquo;下一步&amp;rdquo;为标题的。理由是：通常桌面软件中的&amp;ldquo;下一步&amp;rdquo;按钮就是放在右侧的。&lt;/p&gt;
 
&lt;p&gt;3.11. 感谢信息&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;几年前，大多数服务在成功注册之后会提供一个简单，基础的感谢信息（通常还带有一个登录的链接），现在大多数站点都试图去激发用户立刻探索一下他们的服务。&lt;/li&gt;
 
&lt;li&gt;45%的网站要求用户在完成注册之后提供更多的信息，在他们的网站上找到自己的朋友，或者邀请用户的朋友来使用他们的网站。&lt;/li&gt;
 
&lt;li&gt;33%的表单会用友好并具有吸引力的语气指出 &amp;ldquo;接下来要去地方&amp;rdquo;（网站功能的探索）。&lt;/li&gt;
 
&lt;li&gt;4%的网站提供了一个基础的&amp;ldquo;谢谢你&amp;rdquo;的消息。&lt;/li&gt;
 
&lt;li&gt;2%是直接跳转到首页。&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;更多的发现&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;18%的注册表单旁边都会有登录表单或者登录连接。（例如, YouTube, Reddit, Digg, Lulu, Metacafe）&lt;/li&gt;
 
&lt;li&gt;78%的注册表单没有用星号或者高光去表示必选框；大多数情况无论星号或者其他形式的高光都不会被使用。&lt;/li&gt;
 
&lt;li&gt;9%的注册表单用流程指示来告诉用户他们进行到哪一步了，并且告诉他们哪些步骤是完成注册的必填项。&lt;/li&gt;
 
&lt;li&gt;85%的站点更喜欢用尽可能简单的web表单。&lt;/li&gt;
 
&lt;li&gt;区域通常都是用空白区来群组和拆分的，有时边框的用途也和空白区一样（22%），还有9%的情况是利用不同的背景色来区分。&lt;/li&gt;
 
&lt;li&gt;99%的案例中都是用到标签索引（除了Habrahabr）&lt;/li&gt;
 
&lt;li&gt;24%的表单使用谈话式的语气，试图通过标示的对话达到用户所需。在这种环境中通常使用类似&amp;ldquo;你叫什么？&amp;rdquo;，&amp;ldquo;你的Email请告诉我一下？&amp;rdquo;或者&amp;ldquo;我想要&amp;hellip;&amp;hellip;&amp;rdquo;等非正式的语句。&lt;/li&gt;
 
&lt;li&gt;38%的网站宁可毅然选择正式商务的语气，友好地让用户填写所需的信息。（例如，&amp;ldquo;您的用户名&amp;rdquo;，&amp;ldquo;确认密码&amp;rdquo;等等）&lt;/li&gt;
 
&lt;li&gt;38%的网站使用系统语言，用户被要求&amp;ldquo;登录&amp;rdquo;，&amp;ldquo;用户密码&amp;rdquo;，&amp;ldquo;地址&amp;rdquo;等等。&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;总结&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;注册链接的标题大多数是&amp;ldquo;sign up&amp;rdquo;（40%）并且被放在右上角。&lt;/li&gt;
 
&lt;li&gt;注册表单为了避免分散用户的注意力而使用简单的样式。&lt;/li&gt;
 
&lt;li&gt;93%的注册表单是单页表单。&lt;/li&gt;
 
&lt;li&gt;41%的注册表单通过解释注册的优势来吸引用户注册。&lt;/li&gt;
 
&lt;li&gt;62%的输入框标题是通过加粗高亮的。&lt;/li&gt;
 
&lt;li&gt;标签不是都排成一条直线的。&lt;/li&gt;
 
&lt;li&gt;设计师试图不用必填项和可选项。&lt;/li&gt;
 
&lt;li&gt;86%的注册表单更喜欢用垂直布局的表单。&lt;/li&gt;
 
&lt;li&gt;注册表单没有任何hover,active或者focus的特效（84%）。&lt;/li&gt;
 
&lt;li&gt;提示和帮助不管是静态（57%）或者动态（33%）都是出现在输入框下方（57%）或者右侧(26%)。&lt;/li&gt;
 
&lt;li&gt;状态确认和动态确认一样流行。当然Ajax不是趋势&lt;/li&gt;
 
&lt;li&gt;82%不需要email确认&lt;/li&gt;
 
&lt;li&gt;72%需要密码确认&lt;/li&gt;
 
&lt;li&gt;校验码可用（48%）可不用（52%）&lt;/li&gt;
 
&lt;li&gt;92%不用取消按钮&lt;/li&gt;
 
&lt;li&gt;提交按钮是左对齐（56%）或者居中对齐（26%）&lt;/li&gt;
 
&lt;li&gt;感谢信息激发用户继续探索网站的服务（45%）&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;&lt;span style=&quot;clear: both;&quot;&gt;&lt;img style=&quot;width: 0px; border-style: none; height: 0px;&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/f248d2f8ab1019a2b0f3f1ae3b6fa106.gif&quot; alt=&quot;&quot; width=&quot;0&quot; height=&quot;0&quot; /&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;clear: both;&quot;&gt; 
&lt;p&gt;原文地址：&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/&quot; target=&quot;_blank&quot;&gt;&lt;span style=&quot;color: #33707e;&quot;&gt;http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
 &lt;/span&gt; &lt;a href=&quot;http://hi.baidu.com/yumcn/blog/item/7c868bef5d6413e2cf1b3e23.html#comment&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/28&quot; target=&quot;_blank&quot;&gt;登录、注册的表单&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://hi.baidu.com/yumcn/blog/item/7c868bef5d6413e2cf1b3e23.html&quot; target=&quot;_blank&quot;&gt;http://hi.baidu.com/yumcn/blog/item/7c868bef5d6413e2cf1b3e23.html&lt;/a&gt;&lt;/p&gt;</description>
				<author>djjian2008</author>
				<pubdate>2010-07-26 23:15:33</pubdate>
			</item>			<item>
				<title>如何做得Banner通情达意</title>
				<link>http://ucdchina.com/snap/7471</link>
				<description>&lt;h3&gt;&lt;a rel=&quot;attachment wp-att-2054&quot; href=&quot;http://uedc.163.com/2044.html/jw_009&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a rel=&quot;attachment wp-att-2062&quot; href=&quot;http://uedc.163.com/2044.html/%e5%8f%a3%e8%bf%b0%e5%8f%b2%e4%bd%9c%e5%ae%b63&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a rel=&quot;attachment wp-att-2067&quot; href=&quot;http://uedc.163.com/2044.html/jw_015&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a rel=&quot;attachment wp-att-2069&quot; href=&quot;http://uedc.163.com/2044.html/jw_012&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a rel=&quot;attachment wp-att-2072&quot; href=&quot;http://uedc.163.com/2044.html/1-11&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a rel=&quot;attachment wp-att-2073&quot; href=&quot;http://uedc.163.com/2044.html/2-10&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;a rel=&quot;attachment wp-att-2074&quot; href=&quot;http://uedc.163.com/2044.html/3-10&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/7c816b713c44ce70bdc3d5d49982f16a.jpeg&quot; alt=&quot;&quot; width=&quot;625&quot; height=&quot;200&quot; /&gt;&amp;nbsp;&lt;/h3&gt;
 
&lt;h1&gt;写在前面的话&lt;/h1&gt;
 
&lt;p&gt;有人觉得做个banner放2张图，排几个字的事，一点技术含量都没有，像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的，其实一个banner可以研究的东西还是很多的，而且做一个banner是不难，难得是在短时间内做一个出彩的banner。门户的专题一般是编辑套模板拼成的，比较重要的专题，banner部分是由设计师来完成，一个banner的品质上去了，整个专题的质量感就上来了，所以这部分交给设计师来做也是重视品质的表现，这个毋庸置疑。但banner毕竟不比大型项目，从设计成本上说不可能给太多的时间给设计师，于是乎，设计师有时候是靠经验积累，有时候妙手偶得，质量也是时好时坏，更害怕的是当没有经验没头绪没有心情时，胸中无物，不知道如何下手，于是越急越乱，越乱越急，最后匆匆了事，这种状态下估计也出不了好的东西。在排除技术手段的前提下，如何通过一些经验的思考，让banner达到通情达意效果，也是我下面要说的，个人经验之谈，供大家参考。&lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;h2&gt;&lt;span style=&quot;color: #3366ff;&quot;&gt;一 思考专题定位&lt;/span&gt;&lt;/h2&gt;
 
&lt;h3&gt;&amp;middot;顾及需求方的频道定位&lt;/h3&gt;
 
&lt;p&gt;因为包含内容不同，门户网站各个频道有着不同的风格，所以设计师们做设计的时候也要考虑到如体育频道的运动感，财经频道的国际和高端等。&lt;/p&gt;
 &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2048&quot; href=&quot;http://uedc.163.com/2044.html/jw_010-2&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/e12e75b1ac34a99a02ebeaa3463a77d3.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图1&lt;br /&gt; /女人频道的定位是知性 ，所以这个banner设计风格也是很贴切的。&lt;br /&gt; /banner 赞助&amp;nbsp; 夏小萌&lt;/address&gt; &lt;address&gt;&amp;nbsp;&lt;/address&gt; &lt;address&gt;&amp;nbsp;&lt;a rel=&quot;attachment wp-att-2049&quot; href=&quot;http://uedc.163.com/2044.html/jw_000&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/f797e4ef142ff7fdb963b9dde7d235f7.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 图2&lt;br /&gt; /历史频道的专题，做出厚重沧桑的历史感还是很切题的。&lt;br /&gt; /banner 赞助&amp;nbsp; 10&lt;/address&gt; 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h3&gt;&amp;middot;顾及此专题的定位&lt;/h3&gt;
 
&lt;p&gt;专题的定位有时候和频道的定位偶尔是有冲突的，如女人频道一贯的知性理性的大风格下，有时候会来一些可爱小女人，有时候有做温馨浪漫，在这种有风格冲突的情况下，我们还是以贴合专题的定位为主，当然也尽量做到不能背离频道风格太远。&lt;/p&gt;
 &lt;address&gt;&amp;nbsp;&lt;a rel=&quot;attachment wp-att-2051&quot; href=&quot;http://uedc.163.com/2044.html/jw_001-2&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/40ac3c7a978fe9b5c9229104bd27e46c.png&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图3&lt;br /&gt; /女人频道下的一个怀旧感的专题，所以画面做出了一些怀旧的感觉。&lt;br /&gt; /banner 赞助&amp;nbsp; 璇&lt;/address&gt; 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2052&quot; href=&quot;http://uedc.163.com/2044.html/jw_011&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/a9dd8d02491d2a4bfd20cb7293753a48.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图4&lt;br /&gt; /数码频道的一个和某手机赞助商的活动，所以banner也表露出一定的商业感&lt;/address&gt; 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h2&gt;&lt;span style=&quot;color: #3366ff;&quot;&gt;二 明白文字在Banner中占主导地位&lt;/span&gt;&lt;/h2&gt;
 
&lt;p&gt;从构成上讲，一个banner分为2个部分，一为文字，二为辅助图。辅助图虽然占据大多数的面积，但是不加以文字的说明，很难让用户知道这个banner要说明什么。要读一个人的喜怒哀乐，只要读其五官即可。在一个banner里面，标题文字起着五官一样的作用，所以个人觉得文字才是整个banner的主角。所以对于文字的处理，显得尤为重要，在文字处理时有几个小技巧，与大家分享。&lt;/p&gt;
 &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2053&quot; href=&quot;http://uedc.163.com/2044.html/jw_006&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/c6b9960b64d97e179cf810287f6315c3.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图5&lt;br /&gt; /banner文字阐述专题主题，是绝对的主角。&lt;br /&gt; /banner 赞助&amp;nbsp; 淑华&lt;/address&gt; 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h3&gt;&amp;middot;分清主标和副标，从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满，比较集中。&lt;/h3&gt;
 &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2054&quot; href=&quot;http://uedc.163.com/2044.html/jw_009&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/31487181d8549c60e598a9a45a39d32d.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图6&lt;br /&gt; /对主标题的断词比较巧妙，文字集中，主次明显，且文字与辅助图案相互呼应，统一感很好。&lt;br /&gt; /banner 赞助&amp;nbsp; 淑华&lt;/address&gt; 
&lt;h3&gt;&amp;middot;如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化&amp;lsquo;的&amp;rsquo;、&amp;lsquo;之&amp;rsquo;、&amp;lsquo;和&amp;rsquo;&amp;lsquo;年&amp;rsquo;&amp;lsquo;第X届&amp;rsquo;这种信息量不大的词。&lt;/h3&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2055&quot; href=&quot;http://uedc.163.com/2044.html/jw_003&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/392143f1efffb4d539a67057fa96ed55.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图7&lt;br /&gt; /长标题的时候，如果把&amp;lsquo;征集各种端午风俗&amp;rsquo;排成一行，就会显得没有主次，也很有吸引力。我这里把&amp;lsquo;端午&amp;rsquo;这个最重要的信息提出来，让用户很容易进入环境，然后让他们继续了解更多的信息。这里还要说一个小技巧，我这里&amp;lsquo;征集各种&amp;rsquo;、&amp;lsquo;端午&amp;rsquo;、&amp;lsquo;风俗&amp;rsquo;这三个词虽然分别用了3种字体，但还是能读出&amp;lsquo;征集各种端午风俗&amp;rsquo;这是一断话，因为同一个红色起到了很大的作用。&lt;/address&gt; 
&lt;h3&gt;&amp;middot;如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，频道名等。&lt;/h3&gt;
 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2056&quot; href=&quot;http://uedc.163.com/2044.html/jw_002&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/05b82d111ddfe1ac978a3c6c63b78347.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图8&lt;br /&gt; /这个banner附加了一些英文来丰富画面，让画面充满丰富的同时，充满生气。&lt;br /&gt; /banner 赞助&amp;nbsp; LV&lt;/address&gt; 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h2&gt;&lt;span style=&quot;color: #3366ff;&quot;&gt;三 构建辅助视觉&lt;/span&gt;&lt;/h2&gt;
 
&lt;p&gt;一个banner最主要的是标题，但辅助视觉起着烘托标题文字的作用，然而这也是最有难度的一个活，设计师的个人风格和变现力在这里能够淋漓表现。文字和辅助视觉的关系，我这里列举了3个常见搭配方式，这几种方式搭配分别有不同的效果，从而产生不同感觉。&lt;/p&gt;
 
&lt;p&gt;3种文字和辅助视觉常见的搭配方式：&lt;/p&gt;
 
&lt;h3&gt;1，&amp;nbsp;&amp;nbsp; 文字+背景陪衬两段式。特点突出文字，视觉集中文字，报道感强。&lt;/h3&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-2072&quot; href=&quot;http://uedc.163.com/2044.html/1-11&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/8435ef0f3f73b9e81fdef558cf3315ca.jpeg&quot; alt=&quot;&quot; width=&quot;400&quot; height=&quot;184&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-2057&quot; href=&quot;http://uedc.163.com/2044.html/jw_008&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/171d73beca8b7ef06e20e88790dd38c4.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 图9&lt;br /&gt; /banner 赞助 胡子&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-2058&quot; href=&quot;http://uedc.163.com/2044.html/jw_020&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/b3ed2c06f6edca7fdf56d3b85c5fcc94.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 图10&lt;/p&gt;
 
&lt;h3&gt;2，&amp;nbsp;&amp;nbsp; 文字+主体物的两段式，文字图案相辅相成，起到文字言事图案帮助理解的效果。这样的banner适合做介绍类或者产品类。&lt;/h3&gt;
 
&lt;p&gt;&amp;nbsp;&lt;a rel=&quot;attachment wp-att-2073&quot; href=&quot;http://uedc.163.com/2044.html/2-10&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/52b286a871494068c7cf5f8d60fa3f8a.jpeg&quot; alt=&quot;&quot; width=&quot;400&quot; height=&quot;184&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2059&quot; href=&quot;http://uedc.163.com/2044.html/jw_004&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/d79493ddf83bc99ba72e021804b830f2.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 图11&lt;br /&gt; /banner 赞助 淑华&lt;a rel=&quot;attachment wp-att-2060&quot; href=&quot;http://uedc.163.com/2044.html/jw_019&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/f0bea8842efe3a96d32ecdfa59a3e574.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图12&lt;/address&gt; 
&lt;h3&gt;3，&amp;nbsp;&amp;nbsp; 主体物+背景+文字的三段式，特点虚实结合，主次关系明显，也是效果最好，用的最广泛的一种形式。&lt;/h3&gt;
 
&lt;p&gt;&amp;nbsp;&lt;a rel=&quot;attachment wp-att-2074&quot; href=&quot;http://uedc.163.com/2044.html/3-10&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/4a43adc10394f014d27ae273c4a6568e.jpeg&quot; alt=&quot;&quot; width=&quot;400&quot; height=&quot;184&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2061&quot; href=&quot;http://uedc.163.com/2044.html/jw_018&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/e18466d7296ed06ee9cd6b0105a35f8a.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 图13&lt;/address&gt; &lt;address&gt;&amp;nbsp;&lt;/address&gt; &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2062&quot; href=&quot;http://uedc.163.com/2044.html/%e5%8f%a3%e8%bf%b0%e5%8f%b2%e4%bd%9c%e5%ae%b63&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/d6ffda2eec7a0dafe251e80a1ebc8c4e.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图14&lt;/address&gt; &lt;address&gt;&amp;nbsp;&lt;/address&gt; &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2063&quot; href=&quot;http://uedc.163.com/2044.html/jw_005&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/8790e08c070e551e28481beffd9758ed.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图15&lt;br /&gt; /banner 赞助 淑华&lt;/address&gt; 
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
 
&lt;h2&gt;&lt;span style=&quot;color: #3366ff;&quot;&gt;四，创造力对主题的艺术化表现&lt;/span&gt;&lt;/h2&gt;
 
&lt;h3&gt;1，严肃话题也能做出新感觉&lt;/h3&gt;
 
&lt;p&gt;做新闻报道的时候，遇到严肃话题，一般的设计师，都会比较拘谨，不敢也不愿去做视觉上的创新。所以配到这种话题，画面效果一般都会比较模式化，信息量弱，感染力不足。这时候，设计师如果敢解放思想，去动脑子做一些创新，其实严肃话题做上新感觉，能够达到意想不到的效果。&lt;/p&gt;
 &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2064&quot; href=&quot;http://uedc.163.com/2044.html/jw_014&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/212a067d497dd972dd13124a0ff35db4.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 图16&lt;br /&gt; /主题文字埋没在洪流之中，让其有一种融入感。洪流、闪电、阴暗的天空、淹没的城市，画面灾难感很强，角落处的武警官兵抗洪，让整体灾难中透出希望，哀而不伤。设计师有时候不仅仅应拥有对画面掌控力，对专题主题的把握，也是作为一个设计师应该具备的素质。&lt;/address&gt; &lt;address&gt;&amp;nbsp;&lt;/address&gt; &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2065&quot; href=&quot;http://uedc.163.com/2044.html/jw_017&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/9daa35a45a0001d2f6f7ff1bd3f20cdd.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图17&lt;br /&gt; /因为是做夏季高温的专题，所以在处理画面的色彩时候我对比度做的比较弱，就如同烈日下看东西的感觉。&lt;/address&gt; &lt;address&gt;&amp;nbsp;&lt;/address&gt; &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2066&quot; href=&quot;http://uedc.163.com/2044.html/jw_013&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/49d6fa37a42127a933f4644abe413cc8.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图18&lt;br /&gt; /这是春运的专题，我在处理画面用了很多斜的构成，因为斜的东西学构成的时候表达那种不安感是比较贴切的。拥挤的人群、阴霾的天空，不安中带着希望，当一张小小的火车票就能映出当回家的曙光时候，我想，或许这就是很多人对于春运的感觉吧。回头看看其他门户的专题，光艳无比，一股社会主义的优越感油然而生的感觉，不知孰对孰错，再想时，我已迷失。&lt;/address&gt; 
&lt;h3&gt;2，轻松话题可以做出幽默感&lt;/h3&gt;
 
&lt;p&gt;有时候也会做到一些轻松感娱乐感的专题，在做这些专题的时候，设计师们就能更加放开了。&lt;/p&gt;
 &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2067&quot; href=&quot;http://uedc.163.com/2044.html/jw_015&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/42ecbefa837c06644188856d6487de40.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 图19&lt;br /&gt; /这个专题banner，做的很轻松很幽默。编辑说他的频道群里发，整个频道的人都笑翻了。&lt;/address&gt; &lt;address&gt;&amp;nbsp;&lt;/address&gt; &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2068&quot; href=&quot;http://uedc.163.com/2044.html/jw_016&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/dbd490fcc49703ce114287368dac5c64.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图20&lt;/address&gt; 
&lt;h3&gt;3，作品也能带点小情调&lt;/h3&gt;
 
&lt;p&gt;有时候来一些小的创意也会让banner增色不少。&lt;/p&gt;
 &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2070&quot; href=&quot;http://uedc.163.com/2044.html/jw_007&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/edaa0b5c7fe291137fdd9dd2faf8096e.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;135&quot; /&gt;&lt;/a&gt;&lt;br /&gt; 图21&lt;br /&gt; /摇滚的不是乐器，还是文字&lt;br /&gt; /banner 赞助 竆&lt;/address&gt; &lt;address&gt;&amp;nbsp;&lt;/address&gt; &lt;address&gt;&lt;a rel=&quot;attachment wp-att-2069&quot; href=&quot;http://uedc.163.com/2044.html/jw_012&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/a28cdaf8e5c0b4a05173e49411032b9b.jpeg&quot; alt=&quot;&quot; width=&quot;650&quot; height=&quot;119&quot; /&gt;&lt;/a&gt;&lt;/address&gt; &lt;address&gt;图22&lt;br /&gt; /冰雪也的不仅仅是车，还是文字&lt;/address&gt; 
&lt;h1&gt;&amp;nbsp;后面的话&lt;/h1&gt;
 
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; 有时候我觉得做一个banner，如做一篇文字，文字可以是小说，可以是诗歌，也可以是散文，形式多样；可以用比喻、也可以拟人，也可以排比，手法也是多样。做一个banner，有时候需要字斟句酌，有时候则要点到即止；有时候该放，有时候该收；有时候可以如苏东坡般登高望远、举首长歌，有时候又可如柳永般娓娓道来、触动心灵。你可以用不同形式和手法来表现，但相同处，通情达意，揭露主旨。本文主要从定位、文字、辅助图和艺术性上表达了我对于做一个通情达意banner的一些见解，让大家能从我的理解中对做banner有新的看法，当然，水平有限，不足处，欢迎指正。&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/337&quot; target=&quot;_blank&quot;&gt;网站Banner的设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://uedc.163.com/2044.html&quot; target=&quot;_blank&quot;&gt;http://uedc.163.com/2044.html&lt;/a&gt;&lt;/p&gt;</description>
				<author>wei</author>
				<pubdate>2010-07-26 23:01:50</pubdate>
			</item>			<item>
				<title>让网络，更简单！</title>
				<link>http://ucdchina.com/snap/7466</link>
				<description>&lt;p&gt;&lt;img style=&quot;float: right; height: 160px; margin-left: 1em; margin-right: 0px; width: 240px;&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/6cb9675e7845b786c4f16efa49be7ec2.jpeg&quot; alt=&quot;&quot; /&gt;个性化，是解决信息过载问题的终极途径，但绝不是终南捷径，这条道路上的第一站应该是：信息过滤器。&lt;/p&gt;
 
&lt;p&gt;2009 年，美国电影与中国电影的总产量超过了 1000 部，刨去滥竽充数混水摸鱼的，怎么也还得有两三百部要挑一挑。在《疯狂的赛车》上映之前，一个电影达人朋友向我大肆鼓吹，我去看了，结果发现也就那么回事儿。大家是不是也经常遇到类似的状况？我想答案一定是肯定的。要给出高满意度的有效推荐，是很复杂的一件事情，这你懂的。但如果我们换一个角度，朋友告诉我，《谍海风云》是一颗雷，你千万不要踩，我通常就绝对不会再自找没趣了，这很有效。&lt;/p&gt;
 
&lt;p&gt;因此，我非常同意 &lt;a title=&quot;Web 2.0 Expo NY: Clay Shirky (shirky.com) It's Not Information Overload. It's Filter Failure.&quot; href=&quot;http://web2expo.blip.tv/file/1277460/&quot; target=&quot;_blank&quot;&gt;Clay Shirky&lt;/a&gt; 的提法，&amp;ldquo;不是信息太多了，是过滤失效了&amp;rdquo;。&lt;/p&gt;
 
&lt;p&gt;互联网从根本上改变了信息流动的方式，使得围绕信息展开的互动更加具有效率。它从本质上是鼓励分享的，也就必然会引发信息生产的暴增。可以有很多角度解读互联网的发展历程，但依信息获取延展开的这条线路上，诞生了诸多伟大的公司，绝对不容忽视。起初是以 Yahoo 为代表的导航及门户，然后发展到以 Google 为代表的搜索引擎，再到目前最火热的以 Twitter 与 Facebook 为代表的社会化网络，互联网不断地在拓宽我们接触信息的视野，改变我们获取信息的方式。信息选择权向用户方转移，信息传递链条更趋直接，是这条线路的精髓。&lt;/p&gt;
 
&lt;p&gt;有一种观点认为，Twitter 引领的&amp;ldquo;&lt;strong&gt;关注/Follow&lt;/strong&gt;&amp;rdquo;模型，帮助用户撇开了多余的羁绊，将核心直抵感兴趣的信息。这种设置，将信息选择权交给了用户，用户能看到哪些信息，完全取决于他关注了哪些人，或者抽象些讲就是，关注了哪些信息源。但是，这种方式也有明显的不足，新用户需要从一穷二白开始，手工的一个个筛选出他需要关注的对象，这个过程很杯具。即使对老用户而言，要扩展到一个新的兴趣领域，或者是寻找新的关注对象，也是相当费时费力的。&lt;/p&gt;
 
&lt;p&gt;在 Twitter 之前，RSS 也曾经被赋予厚望。Google Reader 确实做得很好了，但我作为一个重度用户，每天打开那个始终标着 1000+ 的列表，飞快地扫过标题，试图以最小的代价拣出那些我有兴趣阅读的条目，同时又忐忑不安地担心会漏掉点儿什么。这很崩溃，这绝对不是消费信息的正确体验。&lt;/p&gt;
 
&lt;p&gt;无论是 Twitter 的关注，还是 RSS 的订阅，一个共同的问题是信息组织的粒度太过粗旷。我虽然是个足球迷，但我是在李大眼停写中国足球之后，才订阅了他的博客和微博，如果他日后再又絮叨起中国足球这项名字虽然叫足球但却完全和足球没有一毛钱关系的令人闹心的运动，我立刻就会退掉他。&lt;/p&gt;
 
&lt;p&gt;截止目前，搜索引擎是获取信息最直接的工具，然而它仅是数据层面的一种组织，用 &lt;a title=&quot;Tim Berners-Lee&quot; href=&quot;http://www.w3.org/People/Berners-Lee/&quot; target=&quot;_blank&quot;&gt;Tim Berners-Lee&lt;/a&gt; 的&lt;a title=&quot;Levels of Abstraction: Net, Web, Graph&quot; href=&quot;http://www.w3.org/DesignIssues/Abstractions.html&quot; target=&quot;_blank&quot;&gt;定义&lt;/a&gt;来讲就是&amp;ldquo;it links documents&amp;rdquo;，用户要，它才给，并且还无法知道给的&amp;ldquo;是什么&amp;rdquo;。下一代的信息处理引擎，必须具备理解语义的能力，&amp;ldquo;It&amp;rsquo;s not the documents &amp;mdash; It&amp;rsquo;s the things&amp;rdquo;！这里的 things，针对的就是信息层面。我是基因方法的拥护者，比如 Pandora 的&lt;a title=&quot;Music Genome Project&quot; href=&quot;http://www.pandora.com/mgp.shtml&quot; target=&quot;_blank&quot;&gt;音乐基因工程&lt;/a&gt;，比如 Jinni 的&lt;a title=&quot;Movie Genome Project&quot; href=&quot;http://www.jinni.com/movie-genome.html&quot; target=&quot;_blank&quot;&gt;电影基因工程&lt;/a&gt;。信息同样是具有基因的，核心基因是，&amp;ldquo;主题&amp;mdash;&amp;mdash;在讲什么&amp;rdquo;。基因方法有诸多好处，像稳定性、可衍生性以及良好的可解释性，但我最看重的，它是一种令人激动的探险，尝试着让机器以模拟人类的方式去理解信息。这非常有挑战。&lt;/p&gt;
 
&lt;p&gt;根本需要，是兴趣。我不感兴趣的，就不要来纠缠我。我们希望有这样一种方式：你只需要表明自己的兴趣，然后通过群体智慧与机器运算，让信息找到你。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://www.guwendong.com/post/2010/cutt.html&quot; target=&quot;_blank&quot;&gt;http://www.guwendong.com/post/2010/cutt.html&lt;/a&gt;&lt;/p&gt;</description>
				<author>guwendong</author>
				<pubdate>2010-07-26 17:04:37</pubdate>
			</item>			<item>
				<title>BANNER中的字体结构分析</title>
				<link>http://ucdchina.com/snap/7461</link>
				<description>&lt;p&gt;&lt;strong&gt;&lt;a rel=&quot;attachment wp-att-2008&quot; href=&quot;http://uedc.163.com/2006.html/banner_02&quot; target=&quot;_blank&quot;&gt;&lt;/a&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/23bf44b3eec4dd9f108975c12ef0440d.jpeg&quot; alt=&quot;&quot; width=&quot;625&quot; height=&quot;200&quot; /&gt;&amp;nbsp;&lt;/strong&gt;&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;本来想写&amp;ldquo;Advertisemen中的字体结构分析&amp;rdquo;，后来发现这个标题写得有点大，偏离了在目前工作中的针对性，因此缩小到banner的范围，以下内容仅个人在目前工作中对banner设计上的一点浅见，仅起抛砖引玉的作用。&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #6e9200;&quot;&gt;&lt;strong&gt;Banner&lt;/strong&gt;&lt;strong&gt;的传达方式 [TOPIC]&lt;br /&gt; &lt;/strong&gt;&lt;/span&gt;针对网站中的banner&lt;/p&gt;
 
&lt;p&gt;Banner的本身形状：形状决定了其固定的构成方式，一般为矩形，横幅，左右结构和居中；&lt;br /&gt; Banner的文字特点：主题式，一般分为主标题和副标题，文字较多；设计的时候还需要考虑应用到网站各种尺寸推广图的可读延伸性。&lt;br /&gt; Banner的图像特点：辅助主题，增加文字的渲染力。&lt;br /&gt; Banner的传达行为方式：载体为电脑屏幕，IE浏览器的第一屏位置，用户眼睛焦点停留时间约3秒以上。&lt;br /&gt; &lt;span&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;strong&gt;&lt;a rel=&quot;attachment wp-att-2008&quot; href=&quot;http://uedc.163.com/2006.html/banner_02&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/ebd1b18492bb2df5b7c6e9444e0444c2.jpeg&quot; alt=&quot;&quot; width=&quot;625&quot; height=&quot;247&quot; /&gt;&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;[由于banner一般用于专题类网站，在门户网站的二级页面，用户进来之前，在首页已经对主题有一定的了解和认识，所以banner的作用是在二级页面中起到包装页面的同时增加内容的趣味度和内容方向引导；所以这也是和传统广告中普遍要求第一感官视觉冲击力来强奸眼球所不同的地方。]&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;color: #6e9200;&quot;&gt;文字在banner中的重要性&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;对于文字，我们常常听到需求方提出：&amp;ldquo;字要大！&amp;rdquo;&lt;br /&gt; &amp;ldquo;啊？还要大？已经很大了！&amp;ldquo;&amp;nbsp; 然后很无奈的拉大一点，其实我们都知道大那么几个像素没有意义；&lt;br /&gt; 但细心想想，需求方要的真的只是那么一丁点的追求么？毕竟他们不是设计师，不懂得如何表达自己的想法，而唯一可以让们觉得显眼的方式只有大小的区别而已，或许是因为，字不够显眼，字的处理太普通，背景太抢眼之类的，或许，我们应该理解为：&amp;ldquo;字要显眼一点&amp;ldquo;，而&amp;rdquo;显眼&amp;ldquo;的方式却有很多种。&lt;/p&gt;
 
&lt;p&gt;&lt;span style=&quot;color: #6e9200;&quot;&gt;&amp;nbsp;&lt;strong&gt;Banner=文字+图像[辅助]&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;
 
&lt;p&gt;Banner上的文字一般都占据了整个banner的70%的区域，而实际图像只占不到30%，往往很多的设计师更专注于那30%的图像设计，忽视了最重要的70%文字区域，最后只用系统字草草拼凑了之，试问这样的一个banner的设计合理么？&lt;/p&gt;
 
&lt;p&gt;尤其当主题被延伸应用到小尺寸推广图的时候，只剩下放文字的区域时，这个推广图算是彻底完蛋了。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-2009&quot; href=&quot;http://uedc.163.com/2006.html/banner_04&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/d490e7ce04b33d31348529197b5c4296.jpeg&quot; alt=&quot;&quot; width=&quot;625&quot; height=&quot;259&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;color: #6e9200;&quot;&gt;中文字和英文字母的属性区别&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;中文字与英文字母的区别，字母是一种纯粹发音符号，每个字母本身并没有意义，单词的意义来自于这些字母之间的横向串式组合，而汉字的组字方式是以象形为原始基础，也就是每个字都具有特别的意义，一个简单的字在远古时代就代表了一个复杂的生活场景，因而它也是世界上最形象的文字。两者之间的阅读方式和解读方式都有本质的不同，因此，汉字的编排不能照搬英文的编排方式，它们两者之间在编排上有一些客观的区别。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-2010&quot; href=&quot;http://uedc.163.com/2006.html/banner_06&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/65f6ad48615b15cc6b41bf7dab1c1781.jpeg&quot; alt=&quot;&quot; width=&quot;625&quot; height=&quot;203&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;color: #6e9200;&quot;&gt;中英文字体的结构分析&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;a. 同样字号的实际大小不同，英文因为都是字母，字母的构成结构非常简单，屏幕最小可视像素为6px[代表字体：04字体]，中文则结构复杂。屏幕最小可视像素为10px[MS明朝/MS UI Gothic]和11px[新细明体/ PMingLiU]&amp;nbsp;&lt;/p&gt;
 
&lt;p&gt;b. 英文的整体编排容易成段、成篇，视觉效果比较自由活泼，有更强的不连续的线条感，容易产生节奏和韵律感。&lt;br /&gt; 中文整体编排容易成句、成行，视觉效果更接近一个个规则的几何点和条块，不容易产生动感的最主要的原因是因为整个结构是闭合的，笔划张力的总和趋于零。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;a rel=&quot;attachment wp-att-2011&quot; href=&quot;http://uedc.163.com/2006.html/banner_09&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/ec6f61ac8fecbc9db5ec4eee374946ee.jpeg&quot; alt=&quot;&quot; width=&quot;625&quot; height=&quot;142&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;c. 英文的篇幅普遍比相同意义的汉字的篇幅要多，在设计时，英文本身更容易成为一个设计主体，而且因为英文单词的字母数量不一样，在编排时，对齐左边那么右边都会产生自然的不规则的错落，这在中文编排时不太可能出现的，中文编排每个段是一个完整的&amp;rdquo;块&amp;rdquo;，很难产生这种错落感。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;a rel=&quot;attachment wp-att-2012&quot; href=&quot;http://uedc.163.com/2006.html/banner_08&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/862994a5f6f0abbbe744fcf5a40edaf6.jpeg&quot; alt=&quot;&quot; width=&quot;625&quot; height=&quot;200&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;d. 英文的结构有大小不同的形状，在字形设计上不可能排列在同一条直线上，如gjpqy等字母齐下方的沉降线，而bdfhkl字母上齐顶线，其它字母才齐上中线和下脚线。然而，英文编排时自然产生的错落其实并不是西方设计师所期望的，他们在细排文字对齐上花大量的时间来调整字距、词距、行距、段前距、段后距等，使得段落更趋向于几何形态。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;a rel=&quot;attachment wp-att-2013&quot; href=&quot;http://uedc.163.com/2006.html/banner_07&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/a26d880fa9d5e22c44f33178314ebb8a.jpeg&quot; alt=&quot;&quot; width=&quot;625&quot; height=&quot;299&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;color: #6e9200;&quot;&gt;如何处理banner中文字的构成问题&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;关键字：理解-分解-重构&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;&lt;strong&gt;理解.&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;在进行文字的编排之前，首先要理解文字的内容。见过很多设计师只注重版式美现而不关注文字内容，文字一拿到手就开始编排，从不考虑文字在说什么，他们的原则是文字一定要服从于版式需要。这是不正确的设计方法，对于一条标题，如果我们不去理解标题所表述内容，就很容易本末倒置。这也是设计师需要和需求方重点沟通的问题，并从中获取需求方的关键字。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;&lt;strong&gt;分解.&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;根据主题关键字所传达情感，分析字体本身的性格属性，综合画面，对其分解；笔划粗细与结构、留白、重心之间的关系，这是活字设计中的一个综合问题，并非一朝一夕就能掌握的，它不但对字的个性要有深刻的理解，而且还要具有非常敏锐的观察力。尤其对于字体本身所设定出来的一个形象，或这种字体通常会在什么地方出现？见到这种字体会想到什么？这是视觉传达中需要长期积累的。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;&lt;strong&gt;重构&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;字体的设计需要考虑到标题整体组合在画面的均衡性，在不破坏字体的基本识别前提下进行再设计，使文字图形化，字体类别中的衬线字体和无衬线字体（serif vs sans-serif），在组合的时候，不建议把无衬线类字体和有衬线类字体直接组合。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;a rel=&quot;attachment wp-att-2014&quot; href=&quot;http://uedc.163.com/2006.html/banner_12&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/f56cc395eb5999a01d78c7487dbde9b0.jpeg&quot; alt=&quot;&quot; width=&quot;625&quot; height=&quot;422&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;从心理模型可以看出，常规的组合排列中，无衬线字体比衬线字体的常规组合性更好一些，但处理的不好反而会呆板。&lt;/p&gt;
 
&lt;p&gt;书法字体，因为书法字体经过历代书法家对字体的追求，使其结构更加牢固，多一点少一点都会影响其本身的字型美感，且气场较强，不适合太小的版式和过长的句子大量使用；学过书法的同学，或许深有体会，在中国书法里是十分讲究&amp;ldquo;精&amp;rdquo;&amp;ldquo;气&amp;rdquo;&amp;ldquo;神&amp;rdquo;，用语言无法表达情绪的时候，书法的字里行间却能透露出来的气场，也就是所谓字的性格。&lt;/p&gt;
 
&lt;p&gt;&amp;nbsp;&lt;a rel=&quot;attachment wp-att-2015&quot; href=&quot;http://uedc.163.com/2006.html/banner_11&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/2c05ca86a55677468a2a81f5225b6157.jpeg&quot; alt=&quot;&quot; width=&quot;625&quot; height=&quot;375&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;以上是书法类字体在特定主题情绪表达上的一些处理方式；文字并没有做特别的变形，而是切合主题的做了一些效果。&lt;/p&gt;
 
&lt;p&gt;ps. 记得来网易面试时，HR曾经问过我一个问题：&amp;ldquo;对于视觉设计师这个职位里，你觉得设计师是什么？你能做什么？&amp;rdquo;&lt;br /&gt; 我说：&amp;ldquo;设计师在这里，往往更多的是担任着翻译师的角色，把讯息更快速准确的诠释给所有受众。&amp;rdquo;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/337&quot; target=&quot;_blank&quot;&gt;网站Banner的设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://uedc.163.com/2006.html&quot; target=&quot;_blank&quot;&gt;http://uedc.163.com/2006.html&lt;/a&gt;&lt;/p&gt;</description>
				<author>K.C</author>
				<pubdate>2010-07-26 15:07:42</pubdate>
			</item>			<item>
				<title>限制的意义</title>
				<link>http://ucdchina.com/snap/7460</link>
				<description>&lt;p&gt;&lt;img title=&quot;限制的意义&amp;mdash;&amp;mdash;NO.1工作记忆&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/ae5db7649785d7e7792c0eaecb975553.jpeg&quot; alt=&quot;&quot; width=&quot;730&quot; height=&quot;250&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;重读《人因工程学导论》，发现许多基础心理学的研究结果，并没有被很好的应用在设计中，这里摘录出工作记忆的限制原则，和由此阐发的设计原则，与大家share。&lt;br /&gt; &lt;span&gt;&lt;/span&gt;&lt;br /&gt; 工作记忆，也称短时记忆，是一种相对短暂的，存储少量有限信息记忆方式。工作记忆作为临时存储器，在我们使用时会一直处于激活状态。&lt;/p&gt;
 
&lt;p&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;工作记忆的限制&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;容量&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;众所周知，工作记忆的上限大约为7&amp;plusmn;2个组块（Miller，1956）。&lt;br /&gt; 组块（chunk）是工作记忆空间中的存储单元，我们的工作记忆也可以容纳7&amp;plusmn;2个不相关的字母或数字，也可以容纳7&amp;plusmn;2个词汇或者熟悉的日期。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;时间&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;工作记忆中信息的强度会随时间的延长而消退，除非这些信息能够不断地被激活或者使用。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;混淆和相似性&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;这样顺序的一组字母E G B D V C 比E N W R U J 更不可能从工作记忆中准确地提取出来，因为前者在听觉特征上有很大的混淆性，这一点常常被忽略，因为人们熟知视觉编码而忽视语音编码。&lt;br /&gt; 重复也导致混淆：&amp;ldquo;8553&amp;rdquo;更为可能被错误地回忆为&amp;ldquo;8533&amp;rdquo;。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;注意和相似性&lt;/strong&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;工作记忆是受资源限制的，更多地依赖于我们所提供的有效的注意资源。如果这类资源完全分给另一个同时进行的任务，消退会更加迅速。&lt;br /&gt; 注意的分心并不是一定是有意地干扰工作记忆的结果。根据Baddeley 的工作记忆模型，视空间记忆模板更容易受到空间任务的干扰，如指向任务或跟踪任务，语音环更容易受到其他语言的或者以语言为主的任务的干扰，如听说任务（Wickens 等，1983；Wickens,2002）.&lt;/p&gt;
 
&lt;p&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;工作记忆的限制为人因设计提供了一些主要原则：&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;最小化工作记忆的负荷&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;在完成任务过程中，必须使工作记忆中的时间和字母数字项目的个数都维持在一个最小的数量上。总体上说，设计者应该努力避免人们使用较长的任意数字或者数字串的编码（Peacock&amp;amp;Peacock-Goebel,2002）。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;提供视觉反馈。&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;不管在哪里使用合成语音来传递语言信息，都需要信息的视觉形式（打印文字）相互配合，这样，人类使用材料时的工作记忆不会很快消退。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;提供序列任务的位置空间&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;一些任务的操作可能在形式或者反馈上是相似的，需要很多的步骤。如果能够提供已经完成了哪些步骤的可视化体系，那么对于这些任务的完成就很有好处。因此，那些容易分心的操作者就不需要因为忘记做过了什么而重新返回到任务当中，也不需要重新开始（Gray，2000）。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;利用组块&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;我们已经知道组块是怎样增加保持在工作记忆中材料的数量。以及如何促进信息转化到长时记忆的。因此，任何能够利用组块的方法都是有益的。下面是几个创建组块时需要考虑的因素。&lt;/p&gt;
 
&lt;p&gt;■ 物理组块大小。呈现任意的字母串、数字串，或者两者都有，最好的组块大小事每个组块包含3到4个数字或字母（Bailey，1989；Peacock&amp;amp;Peacock-Goebel,2002；Wickelgren,1964）.&lt;br /&gt; ■ 有意义的序列。比如555、4321或者一个便宜的名字这样的信息等这样一些有意义的序列。&lt;br /&gt; ■ 字母先于数字。通常情况下，因为字母更有含义，所以它比数字更容易形成组块。广告就是利用这一原则把含有8个组块的数字串1-800-663-5900，转化为仅有3个组块的，这样能够大大提高工作记忆的容量。&lt;br /&gt; ■ 保持数字和字母分离。例如，一块机器铭牌上含有1个数字组块和1个字母组块，如458 GST, 就比数字和字母组合在一起，如4G58ST或4G58 ST，更容易保持在工作记忆中。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;把混淆最小化&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;可以利用删除可能产生混淆的共同元素，例如，3和2之间混淆的可能性就比A5433和A5423之间混淆的。&lt;br /&gt; 空间的分离也能够减少混淆的可能（Hess,Detweiler,Ellis,1999）。用四个不同的窗口分别显示四个不同的数量就比仅使用一个窗口循环显示四个数量更容易记住。因为空间的位置能够表示一种静态的，区别性的线索，它能减少项目之间混淆的可能性。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;在指示语中要考虑顺序，避免&amp;ldquo;否定&amp;rdquo;&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;当指示语用来支持紧急程序时，就不能有出错的可能性。我们在理解句子时，句子中的大多数词汇都需要保持在工作记忆中，一直到整个句子的意思都理解了。因此，较长的句子更容易出现问题。&lt;br /&gt; 如下面程序指示语的例子：&amp;ldquo;在做X和Y之前，做A。&amp;rdquo;&lt;br /&gt; 这里，一直到A出现之前都必须记住X和Y。&lt;br /&gt; 较好的表达方式是下面的顺序：&amp;ldquo;做A。然后做X和Y。&amp;rdquo;&lt;/p&gt;
 
&lt;p&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;否定&lt;/strong&gt;在工作记忆中增加了组块。即使&amp;ldquo;否定&amp;rdquo;能够被知觉到，但可能会在工作记忆中发生遗忘。因此用户可能会做出与指示语相反的事情。&lt;/p&gt;
 
&lt;hr /&gt;
&lt;p&gt;版权所有 &amp;copy; 2008 - 2010&lt;br /&gt; 您看到的文章来自 &lt;a href=&quot;http://cdc.tencent.com&quot; target=&quot;_blank&quot;&gt;腾讯CDC博客 http://cdc.tencent.com&lt;/a&gt; ，原文链接为 &lt;a href=&quot;http://cdc.tencent.com/?p=2797&quot; target=&quot;_blank&quot;&gt;http://cdc.tencent.com/?p=2797&lt;/a&gt; ，转载时请注明出处。&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://cdc.tencent.com/?p=2797&quot; target=&quot;_blank&quot;&gt;http://cdc.tencent.com/?p=2797&lt;/a&gt;&lt;/p&gt;</description>
				<author>熊猫</author>
				<pubdate>2010-07-26 14:56:26</pubdate>
			</item>			<item>
				<title>让评论更有价值</title>
				<link>http://ucdchina.com/snap/7453</link>
				<description>&lt;p&gt;一直觉得&lt;a title=&quot;豆瓣&quot; href=&quot;http://www.douban.com/&quot; target=&quot;_blank&quot;&gt;豆瓣&lt;/a&gt;的影评和书评有些缺陷，评分不高的电影我可能会觉得挺不错，有些评分很高的书我会觉得不太好。&lt;br /&gt;&lt;br /&gt;最近一段时间通过看书，买东西，自己体会到了原因所在：&lt;strong&gt;很多东西（书，商品）不分好坏，只分是否适合！&lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;书评&lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;周五在同事那里借了一本书：&lt;a href=&quot;http://book.douban.com/subject/4833367/&quot; target=&quot;_blank&quot;&gt;《点亮社群》&lt;/a&gt;打算在地铁上看，看了一个多小时就发现，这本书太烂~1句从业者都知道的理论+99句废话+一个案例。&lt;br /&gt;&lt;br /&gt;后来回头想想，如果是学生时代看到这本书，也许我会激动好几天，因为这本书对于非从业者还是比较新鲜，比较激励人的。但是对于从业者看来可能没有太大意义。&lt;br /&gt;&lt;br /&gt;所以，同样的一本书，不同的人评价，结果会有很大差距。问题不在于书本身，更多的在于读者的个人情况。&lt;br /&gt;&lt;strong&gt;&lt;br /&gt;商品评论&lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;相比书，商品（特别是衣服）对买家的个人特性（身高，体重，三维）要求更高。之前通过一次不好的网购经历，自己也给卖家提了一个建议：在评论中鼓励买家自报身高体重，所购买的尺码，是否合身。来给后面的买家提供更有效的参考。详细建议可以看我的另一篇博文&amp;mdash;&amp;mdash;&lt;a href=&quot;http://xiaoqiang.me/?p=1025&quot; target=&quot;_blank&quot;&gt;给淘宝卖家的一点建议&lt;/a&gt;。&lt;br /&gt;&lt;br /&gt;&lt;strong&gt;总而言之：&lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;1.现阶段，我经常看到的评论方式（豆瓣，淘宝）都只是单方面对产品本身做评价，没有对使用者/购买者定性。导致对不同类型的人参考价值不一致。&lt;br /&gt;&lt;br /&gt;2.如果想让评价更有参考价值，更精准。应该首先对使用者/购买者定性，然后再让此类使用者/购买者对商品作评价。这样就不会存在一个很好的入门级读物，被一群专业人士或自以为很专业的人士评价的不堪入门了。&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://xiaoqiang.me/?p=1036&quot; target=&quot;_blank&quot;&gt;http://xiaoqiang.me/?p=1036&lt;/a&gt;&lt;/p&gt;</description>
				<author>小强</author>
				<pubdate>2010-07-25 14:48:41</pubdate>
			</item>			<item>
				<title>信息架构：3×n</title>
				<link>http://ucdchina.com/snap/7441</link>
				<description>&lt;p&gt;一个网站/软件到底需要多少张页面，我觉得是&amp;ldquo;3&amp;times;n&amp;rdquo;张。&lt;/p&gt;
 
&lt;h4&gt;3个基本页面&lt;/h4&gt;
 
&lt;p&gt;信息架构从某种程度上讲，是对这三种页面的排列组合。&lt;/p&gt;
 
&lt;p&gt;1、着陆/导航页&lt;/p&gt;
 
&lt;p&gt;通常一个网站的首页承担了这一作用。下图截自&amp;ldquo;hao123&amp;rdquo;，因为他们全站几乎只有一个导航的作用，很典型。&lt;/p&gt;
 
&lt;p&gt;&lt;a href=&quot;http://blog.chenjz.com/wp-content/uploads/2010/07/20100721_184102.jpg&quot; target=&quot;_blank&quot;&gt;&lt;img style=&quot;display: inline; border: 0px none;&quot; title=&quot;2010-07-21_184102&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/4bb1c7fcfec94759b05e2859fbba38eb.jpeg&quot; border=&quot;0&quot; alt=&quot;2010-07-21_184102&quot; width=&quot;394&quot; height=&quot;284&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;2、消费页&lt;/p&gt;
 
&lt;p&gt;这是用户浏览我们网站的目的地。我之前更喜欢管它叫&amp;ldquo;内容页&amp;rdquo;，但是通常用户都需要在这个停留相对较长的时间，在我看来，这个页面&amp;ldquo;消费&amp;rdquo;了我们的时间。web2.0的豆瓣也不例外,我们找到了一半理想的书籍,会细细阅读相关的介绍.&lt;/p&gt;
 
&lt;p&gt;&lt;img style=&quot;display: inline; border: 0px none;&quot; title=&quot;2010-07-21_184646&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/5f2c969417ca700dbc2d78571d3d4516.jpeg&quot; border=&quot;0&quot; alt=&quot;2010-07-21_184646&quot; width=&quot;402&quot; height=&quot;355&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;3、交互页&lt;/p&gt;
 
&lt;p&gt;交互页是交互设计师的重头戏,全依赖他们,才能把复杂的流程变得简单。&lt;/p&gt;
 
&lt;p&gt;&lt;img style=&quot;display: inline; border: 0px none;&quot; title=&quot;图片1&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/f506545cfad08d489972b2d0661bfa41.jpeg&quot; border=&quot;0&quot; alt=&quot;图片1&quot; width=&quot;400&quot; height=&quot;333&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;当然，信息架构的工作不是就这样简单。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;复杂的是，这些页面通常情况下不会简单的排列组合，而是互相融合。&lt;/strong&gt;&lt;/p&gt;
 
&lt;h4&gt;消费页+ 着陆/导航页 是最常见的情况&lt;/h4&gt;
 
&lt;p&gt;自从有了Google等伟大的搜索技术，我们浏览网页的方式有了极大的改变，我可能直接就会找到我感兴趣的内容。比如下图，第一条搜索结果就是刚刚豆瓣的那个网页，这样点击一次就可以到达。所以，每个消费页都可能是着陆页。&lt;/p&gt;
 
&lt;p&gt;&lt;img style=&quot;display: inline; border: 0px none;&quot; title=&quot;2010-07-21_185406&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/65d29f69109542f9e1fc3629d0fc02bf.jpeg&quot; border=&quot;0&quot; alt=&quot;2010-07-21_185406&quot; width=&quot;466&quot; height=&quot;184&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;于是，消费页也需要加入导航。仔细看下刚刚豆瓣的页面，果然可以找到导航。&lt;/p&gt;
 
&lt;p&gt;&lt;img style=&quot;display: inline; border: 0px none;&quot; title=&quot;2010-07-21_185649&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/ec44a7de5a4c8706db8c30f511a80a0f.jpeg&quot; border=&quot;0&quot; alt=&quot;2010-07-21_185649&quot; width=&quot;430&quot; height=&quot;154&quot; /&gt;&lt;/p&gt;
 
&lt;h4&gt;交互页尽量不要与消费页和导航页结合&lt;/h4&gt;
 
&lt;p&gt;来自apple的这个例子。购物之后交费页面仅提供主导航做为&amp;ldquo;紧急出口&amp;rdquo;，让用户可以终止这个购物流程。同时提供了帮助页，对这个流程进行支持。再就是少量的付款需要参考的信息。&lt;/p&gt;
 
&lt;p&gt;&lt;img style=&quot;display: inline; border: 0px none;&quot; title=&quot;2010-07-21_190558&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/5a5880510314b6149eba7267d8de7f6d.jpeg&quot; border=&quot;0&quot; alt=&quot;2010-07-21_190558&quot; width=&quot;470&quot; height=&quot;343&quot; /&gt;&lt;/p&gt;
 
&lt;p&gt;注册页面和登录页面更要完全抛弃导航。登录or注册，不可以有其他的选择。&lt;/p&gt;
 
&lt;p&gt;&lt;img style=&quot;display: inline; border: 0px none;&quot; title=&quot;2010-07-21_191020&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/d34e79ab326f7e836e963e22308eb2e7.jpeg&quot; border=&quot;0&quot; alt=&quot;2010-07-21_191020&quot; width=&quot;429&quot; height=&quot;211&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/f91ee808ffb8ce4d5ee3e003f609404a.gif&quot; border=&quot;0&quot; alt=&quot;&quot; width=&quot;0&quot; height=&quot;0&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www1.feedsky.com/r/l/feedsky/chenjz/394284738/art01.html&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.ucdchina.com/upload/snap/2010-07/a215dd297b4d464a014338050cb8983e.gif&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://blog.chenjz.com/?p=561&quot; target=&quot;_blank&quot;&gt;http://blog.chenjz.com/?p=561&lt;/a&gt;&lt;/p&gt;</description>
				<author>chenjz</author>
				<pubdate>2010-07-23 11:16:08</pubdate>
			</item>			<item>
				<title>非悬停</title>
				<link>http://ucdchina.com/snap/7439</link>
				<description>&lt;p&gt;&lt;span style=&quot;text-decoration: underline;&quot;&gt;本文提供了一个有趣的观点：在触屏设备愈加普及的未来，鼠标悬停将以附加功能的身姿出现。我相信作者，特别当看到苹果的上季度财报中，iPad 用 3 个月时间就达到了麦金塔一半的收入，我更信了。&lt;/span&gt;&lt;/p&gt;
&lt;div style=&quot;margin: 0pt; padding: 5px 0pt;&quot;&gt;
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4616&quot; href=&quot;http://apple4.us/2010/07/non-hover.html/screen-shot-2010-07-23-at-1-20-23-am&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;Screen shot 2010-07-23 at 1.20.23 AM&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/11a6d1769ed453a0a91fcd03cffe3408.png&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;322&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;完全依赖鼠标移动、鼠标悬停、鼠标移出或 CSS 伪类 :hover 的网页元素，在 iPad 或 iPhone 等触屏设备上的行为可能会和设想的不同。&lt;/p&gt;
 
&lt;p&gt;在史蒂夫&amp;middot;乔布斯宣布 iPad 发售的几天后，我注意到苹果的参考库中有这样的一句话：「为 iPad 做好准备，请开始了解多点触控对交互设计的重大影响。」悬停状态前途未卜，也许还可能遭遇严重的可用性问题。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;触摸屏热潮&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;如果你认为多点触控尚未普及，悬停问题可以因此挂之脑后，看看这组数据：到 2010 年 6 月 22 日为止，苹果在 80 天内售出 300 万台 iPad，这个世界上每天售出 103 万台触摸屏手机，还有，像戴尔和惠普这样的公司，研发和销售可触平板和笔记本电脑已经有一段相当长的时间了。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;悬停依赖&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;悬停状态无处不在。我都不记得我写过的样式表或者设计过的网站，有哪个没有花大量的心思考虑悬停的工作方式。作为用户，我们早已习惯悬停，比如超级链接的色彩改变，显示活动项目，以及访问多层下拉菜单。移动鼠标寻找隐藏的按钮已经成为浏览网页的必备技能。作为设计师，我们用悬停状态容纳额外的内容，或改善视觉效果。不管喜欢与否，这样的日子已经结束，我们得靠自己了。&lt;/p&gt;
 
&lt;p&gt;我相信在大多数情况下，最好的解决办法不是追寻替代品，例如多点触控的悬停技术。试着适应无悬停设计，或者把网站转换成 iPad/iPhone 上的应用程序。与其费工费时添加脚本，排除错误，不如把精力集中在设计简易和可靠的用户体验上。按照卢克&amp;middot;罗布卢斯基（Luke Wroblewski）的说法，我们应该从移动版开始设计。我认为，最好得从多点触控的版本做起，然后再做其他版本，悬停状态只能算增强型的功能。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;尽量避免&lt;/strong&gt;：&lt;/p&gt;
 
&lt;ul&gt;
&lt;li&gt;不明显的超链接。&lt;/li&gt;
 
&lt;li&gt;显示重要信息或元数据的 Javascript tooltip。&lt;/li&gt;
 
&lt;li&gt;悬停后才显示的选项，例如编辑或删除操作。&lt;/li&gt;
 
&lt;li&gt;悬停切换图片，例如悬停后显示某张半透明或黑白相片的全彩版本。&lt;/li&gt;
 
&lt;li&gt;下拉菜单。虽然有些可以通过点击和轻击激活，但请确保让用户知道如何这么做。&lt;/li&gt;
 
&lt;li&gt;太过专注依赖悬停的 CSS3。我知道这有些令人伤感，但是因为悬停已被视作增强功能，接受这个现实吧，多点触控设备的用户看到不到我们设计的转换效果。&lt;/li&gt;
 
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;我们如何适应？&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;通常，做出调整不是一件简单和快速的过程。网站的交互层越多，解决可用性问题所需的工作就越多。我注意到，我最喜欢的一些网站已经采取各种措施，修补了一些问题。&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;显示所有内容&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;内容优先，如果你在悬停状态后隐藏了一些东西，那么将它们显示出来。WordPress 后台的文章列表是很好的例子。通常，编辑选项只在悬停后可见，但如果使用触摸设备登陆后台，通往这些操作的链接就会一直显示。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4617&quot; href=&quot;http://apple4.us/2010/07/non-hover.html/wordpress&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;wordpress&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/a90e20275e91058a3451d668333f72f1.jpeg&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;208&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;利用轻击（Tap）显示悬停状态&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;根据不同情况，这么做可能导致风险。亚马逊使用这种办法制作的购物导航很是不错，橙色箭头和面板式列表的点击感强烈。另一个例子是 Basecamp 中待办事项、里程碑和文件的编辑和删除控制。当你悬停在三者中任意一个之上，编辑选项出现。而对于触摸屏，他们写了一个 Javascript 弹出菜单，一旦用户知道如何激活，体验就会很好。问题是，在 Basecamp 的例子中，网页没有提示用户哪里可以点击，所以我觉得类似 WordPress 的解决方法更好。尽管如此，我仍愿意每个月多花一点钱用上 Basecamp 的移动版。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4618&quot; href=&quot;http://apple4.us/2010/07/non-hover.html/basecamp&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;basecamp&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/3a94d05d3fc1c4c344b963e9fe800d24.jpeg&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;208&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;为触摸屏设备度身定制&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;并利用设备原生的控制、手势和弹出界面。Twitter 和 Gowalla 的成功，触摸屏客户端功不可没，也许，这些客户端的使用量比网站还多。我常用 Netflix for iPad，但经常感觉，它像某种依赖悬停的网站进入了 iPad 的地盘。当我想把影片加入队列的时候，现在需要三次点击，而用悬停，移动并点击即可。如果你准备为触摸优化，就一定要贯彻到底。&lt;/p&gt;
 
&lt;p&gt;&lt;a rel=&quot;attachment wp-att-4619&quot; href=&quot;http://apple4.us/2010/07/non-hover.html/netflix&quot; target=&quot;_blank&quot;&gt;&lt;img title=&quot;netflix&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/e4b7286701326bb1d0f5776cdf9cea5d.jpeg&quot; alt=&quot;&quot; width=&quot;500&quot; height=&quot;208&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
 
&lt;p&gt;&lt;strong&gt;等待触摸悬停技术&lt;/strong&gt;&lt;/p&gt;
 
&lt;p&gt;我不相信这么做对任何人都没有好处。也许 Cypress 会让我们惊喜，而且苹果已经申请了近程感应触摸屏的专利，不过这也困扰着我 &amp;mdash; 我讨厌回到旧的方式，而且还要牺牲用户体验，就只是因为技术实现了。而且，这会让我们看上去很傻，因为不敢随意触碰屏幕了。不过从好的方面来看，菲尔&amp;middot;敦菲（Phil Dunphy）会喜欢的！&lt;/p&gt;
 
&lt;p&gt;我们会好起来。&lt;/p&gt;
 
&lt;p&gt;最后，我认为悬停的退场会让 Web 变得更好。不会有比简洁的内容、清晰的互动和简单的设计更好的东西了。如果在开发中专注于提高浏览体验，不管用户怎么使用，我们的网站都将正常运转。&lt;/p&gt;
 
&lt;p&gt;[&lt;a href=&quot;http://trentwalton.com/2010/07/05/non-hover/&quot; target=&quot;_blank&quot;&gt;原文链接&lt;/a&gt;；作者：Trent Walton]&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;相关话题：&lt;a href=&quot;http://ucdchina.com/topic/322&quot; target=&quot;_blank&quot;&gt;移动设备的交互和设计&lt;/a&gt;&amp;nbsp;源地址：&lt;a href=&quot;http://apple4.us/2010/07/non-hover.html&quot; target=&quot;_blank&quot;&gt;http://apple4.us/2010/07/non-hover.html&lt;/a&gt;&lt;/p&gt;</description>
				<author>Apple4.us</author>
				<pubdate>2010-07-23 10:36:31</pubdate>
			</item>			<item>
				<title>我不是产品经理！</title>
				<link>http://ucdchina.com/snap/7438</link>
				<description>&lt;p&gt;这个问题我说了N的平方那么多次，还是有很多人坚持肯定的褒奖我为&amp;ldquo;久经考验的产品经理&amp;rdquo;。最近有人找我去讲课，关于&amp;ldquo;互联网新的、发展前景的优势产品等&amp;rdquo;，我一听就头大，这不明摆着所谓产品经理们&amp;ldquo;战略咨询顾问&amp;rdquo;角色忽悠的事情么。他们想要什么我很清楚，我的成功也可以复制&amp;mdash;&amp;mdash;类似的&amp;ldquo;实用主义&amp;rdquo;路数。&lt;/p&gt;
 
&lt;p&gt;&amp;ldquo;但是无法粘贴。&amp;rdquo;有网友补了这么一句话，我认为用来描述中国互联网现状再贴切不过了。2008年1月我写&lt;a href=&quot;http://blog.rexsong.com/?p=1057&quot; target=&quot;_blank&quot;&gt;产品经理的责任&lt;/a&gt;的时候，号称做&amp;ldquo;产品经理&amp;rdquo;的人远远超过做&amp;ldquo;产品设计师&amp;rdquo;，近两年应该在逐渐持平，但实际上还是不正常，真的需要这么多产品经理么？一个团队里产品经理与产品设计师的比例应该多少？&lt;/p&gt;
 
&lt;p&gt;在我看来，国内超过80%的产品经理其实多少都在从事产品设计职能。我之所以强调自己是&amp;ldquo;产品设计师&amp;rdquo;，是因为我意识到产品设计质量对产品最终用户体验的影响被大大低估，并且将来是拼专业技术的时代。创意一流，设计九流的例子比比皆是，抄别人都抄不好难道还不值得所有人反思么？我希望国内所有从业者都看到老外同行们深厚的技术积累，而不仅仅风光的创意想法。&lt;/p&gt;
 
&lt;p&gt;从职能上区分，产品经理的核心竞争力是对业务远景的把握，可以理解成商业规划能力，重点关心做什么？不做什么？先做什么？后做什么？产品设计师的核心竞争力是对最终实现的把握，可以理解成专业技术能力，重点关心怎么做？做成什么效果？做到什么程度？我坚持认为，搞不清楚产品经理和产品设计师的区别，意味着团队成员责权不分，在某个问题上很可能都认为自己最专业。这些状况在小团队里不明显，因为小团队可以依靠热情、感情来迅速推动，但在大公司大团队则容易形成普遍的&amp;ldquo;消极抗战&amp;rdquo;心态，以及谁拿钱多谁说了算的&amp;ldquo;官僚主义&amp;rdquo;思想。&lt;/p&gt;
 
&lt;p&gt;为了更好的说明问题，把话题扩大到互联网产品团队，谈谈对团队的看法。我见识过很多创业产品初期只有两个人，设计师和工程师的孵化角色。产品到了一定规模，必然需要长期发展规划和短期监督执行，此时我也认为只需要四类人就可以：产品经理、设计师、项目经理、工程师。&lt;/p&gt;
 
&lt;p&gt;注意是四类人，不是四个人，所谓四类人就是有可能成为四群人。其中产品经理和项目经理走M路线，设计师和工程师走P路线。走M路线的群体根据发展团队规模再扩张，比如产品经理往上可以设立产品总监，项目经理往上可以设立项目总监。走P路线的群体根据所需专业程度再细分，比如设计师可以细分信息架构、交互设计、界面设计、视觉设计等职能，工程师可以细分前端开发、应用开发、数据库开发等职能。&lt;/p&gt;
 
&lt;p&gt;项目最终失败的原因多半是产品本身（而非运营、销售）没做好，而没做好的原因主要有四个。其一产品经理不及格，症状为产品没有市场竞争力；其二设计师不及格，症状为产品不能持续吸引用户；其三项目经理不及格，症状为产品总是不能按时上线；其四工程师不及格，症状为产品问题太多效率太低等。&lt;/p&gt;
 
&lt;p&gt;归根结底，认为自己是不是&amp;ldquo;产品经理&amp;rdquo;不重要，关键我们所做的工作有没有对产品成功起到相应的推动作用，这是值得所有从业者扪心自问的问题。真正有效的发展必然有适应节奏，而不是拔苗助长式的去抄袭别人所谓的&amp;ldquo;成功&amp;rdquo;体系或者体制。&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://blog.rexsong.com/?p=9339&quot; target=&quot;_blank&quot;&gt;http://blog.rexsong.com/?p=9339&lt;/a&gt;&lt;/p&gt;</description>
				<author>千鸟</author>
				<pubdate>2010-07-23 10:13:43</pubdate>
			</item>			<item>
				<title>MVC开发模式下网站策划/产品经理的角色定位</title>
				<link>http://ucdchina.com/snap/7437</link>
				<description>&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: 'trebuchet ms', arial, sans-serif; font-size: medium; &quot;&gt;
&lt;p style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 10pt; color: #333333; &quot;&gt;当前国内的主流建站程序都是采用了MVC三层架构来开发，对于网站的后期维护与应用过程，都有很大的裨益。由于MVC开发模式将前端设计、程序开发进行了明确的定义与分工，但是并没有对网站策划进行过多的定义与着墨，在这里，本文主要探讨在&lt;strong style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; &quot;&gt;MVC开发模式&lt;/strong&gt;下，网站策划（or产品经理）的角色定位问题。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 10pt; color: #333333; &quot;&gt;首先，我们来认识一下什么是&lt;strong style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; &quot;&gt;&lt;a style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #727248; text-decoration: none; &quot; href=&quot;http://www.mamcn.com/?p=449&quot;&gt;MVC开发模式&lt;/a&gt;&lt;/strong&gt;。MVC开发模式又称&lt;strong style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; &quot;&gt;&lt;span style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #993300; &quot;&gt;筋骨皮模式&lt;/span&gt;&lt;/strong&gt;，具体的组成与相互关系见下图：&lt;/p&gt;
&lt;div id=&quot;attachment_452&quot; class=&quot;wp-caption aligncenter&quot; style=&quot;margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; padding-top: 4px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: block; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #dddddd; border-right-color: #dddddd; border-bottom-color: #dddddd; border-left-color: #dddddd; text-align: center; background-color: #f3f3f3; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; width: 332px; &quot;&gt;&lt;a style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #727248; text-decoration: none; &quot; href=&quot;http://www.mamcn.com/wp-content/uploads/2010/07/1.png&quot;&gt;&lt;img class=&quot;size-full wp-image-452 &quot; style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-color: initial; &quot; title=&quot;MVC开发模式关系图&quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/f3b4fed4e7e9a9f85f44fd2baf31f490.png&quot; alt=&quot;MVC开发模式关系图&quot; width=&quot;322&quot; height=&quot;152&quot; /&gt;&lt;/a&gt;
&lt;p class=&quot;wp-caption-text&quot; style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; font-size: 10pt; color: #333333; line-height: 17px; &quot;&gt;MVC开发模式关系图&lt;/p&gt;
&lt;/div&gt;
&lt;p style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 10pt; color: #333333; text-align: left; &quot;&gt;图注：&lt;/p&gt;
&lt;ol style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 35px; text-align: left; &quot;&gt;
&lt;li style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 10pt; color: #333333; &quot;&gt;筋（控制器Controller）- 负责转发请求，对请求进行处理。&lt;/li&gt;
&lt;li style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 10pt; color: #333333; &quot;&gt;表皮（视图View） &amp;ndash; 界面设计人员进行图形界面设计。&lt;/li&gt;
&lt;li style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 10pt; color: #333333; text-align: left; &quot;&gt;骨架（模型Model） &amp;ndash; 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。&lt;/li&gt;
&lt;/ol&gt;
&lt;p style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 10pt; color: #333333; &quot;&gt;&lt;span style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #800000; &quot;&gt;概念起源：&lt;/span&gt;&lt;strong style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; &quot;&gt;&lt;a style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #727248; text-decoration: none; &quot; href=&quot;http://www.mamcn.com/?p=449&quot;&gt;筋骨皮模式&lt;/a&gt;&lt;/strong&gt;最早由Trygve Reenskaug在1974年提出，是施乐帕罗奥多研究中心（Xerox PARC）在20世纪80年代为程序语言Smalltalk发明的一种软件设计模式。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 10pt; color: #333333; &quot;&gt;熟悉了解了MVC开发模式后，站在网站策划的角度，我们发现，看起来在每个环节都可以看到网站策划（or产品经理）的身影，又似乎每个环节都和我们没有多大直接关系。就我个人的工作实践来看，实则不然，网站策划非常有必要在MVC开发环节与过程中积极参与，并发挥自己应该发挥的作用。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 10pt; color: #333333; &quot;&gt;下面，本文通过一个图表来作一下解释说明。&lt;/p&gt;
&lt;div id=&quot;attachment_454&quot; class=&quot;wp-caption aligncenter&quot; style=&quot;margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; padding-top: 4px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: block; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #dddddd; border-right-color: #dddddd; border-bottom-color: #dddddd; border-left-color: #dddddd; text-align: center; background-color: #f3f3f3; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; width: 510px; &quot;&gt;&lt;a style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #727248; text-decoration: none; &quot; href=&quot;http://www.mamcn.com/wp-content/uploads/2010/07/2.png&quot;&gt;&lt;img class=&quot;size-full wp-image-454     &quot; style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-color: initial; &quot; title=&quot;网站策划的角色定位 &quot; src=&quot;http://img.ucdchina.com/upload/snap/2010-07/9f4bf61bbf0b9d370bba3a8cdfe5cae8.png&quot; alt=&quot;网站策划的角色定位 &quot; width=&quot;500&quot; height=&quot;380&quot; /&gt;&lt;/a&gt;
&lt;p class=&quot;wp-caption-text&quot; style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; font-size: 10pt; color: #333333; line-height: 17px; &quot;&gt;网站策划的角色定位&lt;/p&gt;
&lt;/div&gt;
&lt;h4 style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; &quot;&gt;&lt;strong style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; &quot;&gt;1、模型与网站策划&lt;/strong&gt;&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 10pt; color: #333333; &quot;&gt;该模块与网站策划过程中最基础的功能需求、产品策划架构息息相关，脱离模型基础的&lt;a style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #727248; text-decoration: none; &quot; href=&quot;http://www.mamcn.com/?p=449&quot;&gt;产品策划&lt;/a&gt;，都是不可实现的，不负责任的。通过模型分解，将网站功能进行有机的分解与整合，形成一个严密、复杂的产品功能实现体系，是做一个成功网站的技术基础，也是策划基础。&lt;/p&gt;
&lt;h4 style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; &quot;&gt;&lt;strong style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; &quot;&gt;2、视图与网站策划&lt;/strong&gt;&lt;/h4&gt;
&lt;p style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 10pt; color: #333333; &quot;&gt;视图是比较容易理解的，就是网站的可视界面。对于网站的生产过程而已，网站策划是视图的前置工作，通过策划与美工设计人员紧密合作，才能完成一个完美的网站视觉效果。&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 10pt; color: #333333; &quot;&gt;&lt;strong style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; &quot;&gt;3、控制器与网站策划&lt;/strong&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 10pt; color: #333333; &quot;&gt;控制器是网站程序的灵魂，也是模型与视图模块交互的中枢神经。也是网站策划在后续工作中，多产品的交互、整合的基础性模块。网站策划必需要了解控制器的数据结构，才能够提升策划效能，做到多产品策划工作中的相互串联，使网站成为一个有机的整体。&lt;/p&gt;
&lt;/span&gt;&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://www.mamcn.com/?p=449&quot; target=&quot;_blank&quot;&gt;http://www.mamcn.com/?p=449&lt;/a&gt;&lt;/p&gt;</description>
				<author>向蓝</author>
				<pubdate>2010-07-22 23:51:55</pubdate>
			</item>			<item>
				<title>抛三个案例，共谋电商经营之道</title>
				<link>http://ucdchina.com/snap/7433</link>
				<description>&lt;p&gt;一直以来，我都觉得自己是一个不够深刻的人，对事物的认识比较容易停留在表面，这几年也一直混迹于网络推广、现在从事电子商务行当，故而也想直面内心，抛出一些己见，以便跟各位朋友一起交流探讨！有几个案例如下：&lt;/p&gt;
&lt;p&gt;&amp;nbsp;A商一名淘宝卖家，现在晋级了，已经进驻淘宝商城，且预开拓独立商城经营，其原是学美术出身，对产品的视觉呈现要求极为苛刻，每当需推出一款新产品，必定
请最好的摄影师拍出最好的视觉效果，然后再自己关起小屋子慢慢的修正调试，可谓是不眠不休，虽然冠以某知名品牌的旗舰店，但市场竞争者众，想杀出一条血路
也是困难重重，但就是这样，凭借简单的淘宝广告投放，以及对美的追求，应该在那个小圈子内，已然是翘楚！&lt;br /&gt; 按照我的分类方式，该商可称之为：广告型电商，特点有哪些呢？简单说来有如下四点：&lt;br /&gt; &lt;strong&gt;1、&amp;nbsp;视觉：&lt;/strong&gt;冲击力强，初步赢得关注&lt;br /&gt; &lt;strong&gt;2、&amp;nbsp;支持：&lt;/strong&gt;画面本身很好的表现产品的功能卖点，以便说服消费者&lt;br /&gt; &lt;strong&gt;3、&amp;nbsp;形象：&lt;/strong&gt;还原产品的真实性，符合客户心目中的一贯形象&lt;br /&gt; &lt;strong&gt;4、&amp;nbsp;亲和力：&lt;/strong&gt;画面、内容亲切而友好&lt;/p&gt;
&lt;p&gt;B商是一专事教育行业的B2C平台，网站做的中规中矩的，页面风格倾向于科技类企业网站，教育行业B2C貌似少见一点吧，不过人家也是有点家底，教育局、
教研室资源异常丰富，一口气便请了数百初高中知名教师、教学专家录制各学科的教学视频，且包装成教学产品，放到网上进行销售，在教育圈内风头一时二两，运
营了半年，IP才几百，投入如此巨资，却成了鸡肋！&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 姑且称之为：政府型电商，其特点主要有：&lt;br /&gt; &lt;strong&gt;1、&amp;nbsp;概念：&lt;/strong&gt;更倾向于概念的包装，从政府圈钱&lt;br /&gt; &lt;strong&gt;2、&amp;nbsp;执行：&lt;/strong&gt;概念很好，饼很大，但是没有相应的团队去执行项目，或者说根本不懂如何执行；&lt;br /&gt; &lt;strong&gt;3、&amp;nbsp;乌龟：&lt;/strong&gt;前期撞了南墙，但是不懂得拐弯，应变能力有限，且没有预案，或者说从未考虑最坏的结果！&lt;/p&gt;
&lt;p&gt;C商是一家保健品公司，之前在电视上大打特打广告，近期可看到在垂直门户、视频类网站均投放大量广告，广告煽动力极强，充分发掘人性中的隐性需求，有点类
似于你在路上走着，突然一个又高又帅的小伙子向你打招呼，你正琢磨你哥们是谁呢？他突然冲过来跟你说，他是原来初二三班的，原来那个又丑又矮还一嘴龅牙的
狗剩，你就奇怪了，是基因突变还是被累劈了呢，一问才知道，人家刚从&amp;ldquo;韩国&amp;rdquo;回来！回家一照镜子，这隐性需求就冒出来了！哈！&lt;br /&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 事实上人家网站也可以线上支付，也可以货到付款，不过总觉冠以电商之名，有些不妥！暂且称之为：营销型伪电商吧！它的特点主要有：&lt;br /&gt; &lt;strong&gt;1、&amp;nbsp;整合：&lt;/strong&gt;不用说，这类公司必然走整合营销的路线，线上线下资源相互呼应，互相补充，以起到广告的最优效果！&lt;br /&gt; &lt;strong&gt;2、&amp;nbsp;短平快：&lt;/strong&gt;在一段时间内，快速的进行广告投放，回笼资金，产品的高毛利支撑市场推广持续滚动，但是一般来说，会很快烟消云散！&lt;br /&gt; &lt;strong&gt;3、&amp;nbsp;高端：&lt;/strong&gt;这个高端并不是产品多高端，而是这种模式本身特质，需要高投入（明星代言，各种资质认证等），战略高，需要一个站得高看得远的领导者制定好战略方针。&lt;br /&gt; 讲了这几个案例，无非想抛出一个问题，到底消费者或者说网购人群到底想要什么？我们可以研究一下A商与C商之间的共性到底在哪里？以及B商失败的原因所在（他没有满足共性的地方）！&lt;/p&gt;
&lt;p&gt;按我的浅见，这两者的共性主要有以下几点：&lt;/p&gt;
&lt;p&gt;1、&lt;strong&gt;&amp;nbsp;找到自己的目标受众：&lt;/strong&gt;在我们的眼中，A商就像巡航导弹，立足于淘宝，精准投放，定点轰炸，效果明显，而C商则像原则弹，全方位覆盖，一颗下地，方圆五公里人畜全无！ &lt;br /&gt; 2、&lt;strong&gt;&amp;nbsp;我们的客户想要什么：&lt;/strong&gt;A主要体现真实，还原产品的形态，良好的客户体验的结果，而C主要是用催眠式的广告发掘人的需求抑或隐性需求。从B网站的风格我们可以看出，科技类版面应该更倾向年龄层次更大的人群，而不符合初中、高中生的审美标准！&lt;br /&gt; 3、&amp;nbsp;&lt;strong&gt;我们的优势在哪里：&lt;/strong&gt;A商体现在美工上，对画面的处理异常专业完美！而C商则体现在资金雄厚，战略布施井然有序，当然产品本身也具备某些特质！&lt;br /&gt; 4、&amp;nbsp;&lt;strong&gt;团队：&lt;/strong&gt;A网媒出身，了解客户消费心态，视觉团队突出！C商营销团队强悍，资金这么雄厚，不排除部分推广业务外包给知名的广告公司！&lt;br /&gt; 5、&amp;nbsp;&lt;strong&gt;顺势：&lt;/strong&gt;A商冠某品牌旗舰店，这在一定程度上减轻了推广的难度！而C商在线下推广的基础上再进一步拓展线上，这也暗合顺势之意！&lt;/p&gt;
&lt;p&gt;谈了这么些个想法，倾向于&amp;ldquo;破&amp;rdquo;而不侧重于&amp;ldquo;立&amp;rdquo;，数据分析、策略都提得少，为什么呢？因为我觉得我思考这些都关乎一个网站的&amp;ldquo;先天性&amp;rdquo;问题，亦即未来的
潜力，先天充足，通过后天努力（推广等），取得成功的概率会更高，但如果先天都不足，则容易导致举步维艰！&lt;/p&gt;&lt;p&gt;源地址：&lt;a href=&quot;http://paidai.com/displaythread.php?boardid=11&amp;topicid=29493&quot; target=&quot;_blank&quot;&gt;http://paidai.com/displaythread.php?boardid=11&amp;topicid=29493&lt;/a&gt;&lt;/p&gt;</description>
				<author>孤山红叶</author>
				<pubdate>2010-07-22 15:03:18</pubdate>
			</item></channel></rss>