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

<channel>
	<title>优涩控 &#187; 交互设计</title>
	<atom:link href="http://www.userkon.com/category/interaction/feed" rel="self" type="application/rss+xml" />
	<link>http://www.userkon.com</link>
	<description>一群对用户脑残的家伙</description>
	<lastBuildDate>Tue, 11 Oct 2011 13:49:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.1</generator>
		<item>
		<title>优秀Android应用的旁门左道</title>
		<link>http://www.userkon.com/tolyer/tips_for_android_app_design.html</link>
		<comments>http://www.userkon.com/tolyer/tips_for_android_app_design.html#comments</comments>
		<pubDate>Tue, 11 Oct 2011 13:46:24 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[android]]></category>

		<guid isPermaLink="false">http://www.userkon.com/?p=417</guid>
		<description><![CDATA[上篇说到几大Android土鳖设计，这篇接下来说如何利用Android系统本身的一些旁门左道，打造优秀自然的应用。 1.支持自动同步 虽然iOS5已经在新版本中提供了无线同步的功能，但这是完全不能与Android的同步功能相比的，只需手机连上wifi网络，打开同步开关，Android就可自动在后台实时的同步信息，如邮件，通讯录，任务表，或者是你的应用需要同步的信息。 这极度契合了用户的一个常用的移动使用场景：即时获取内容，离线使用，同步上传。如下图所示： Google官方的应用大多支持同步，如Gmail，Docs，Reader，Blogger，Calendar等。如果你的产品允许用户在多平台多设备上编辑数据，为何不支持这个功能呢？ PS，目前网易手机邮是我见过的Android同步最全面且快速的应用，如果你不习惯Gmail的国际化，不妨尝试一下。 2.Shortcuts&#38;Widget 我一直觉得iOS的桌面不能叫做桌面，因为它只能放置应用或者浏览器书签，不过他的优势就是管理应用更加方便直接。但对于信息的直接处理，却是Android的优势，Android的桌面并不仅仅放置应用，他可以放一些额外的Shortcuts，Widgets，以及组织他们的Floder。 这样的话，桌面就真的如桌面了，你可以放置任何的东西： 想方便的播放豆瓣电台，Widget加到桌面，直接加星，扔垃圾桶； 常给女朋友电话，拖到桌面来，点击就可打电话； 爱看Reader里订的冷笑话，放到桌面，点击可读。 Shortcuts&#38;Widget是Android中提供给用户使用应用的另外一种入口，在某些场景中，反而能够高效的满足用户一些边缘需求。作为开发者的你，考虑一下如何设置你的Shortcuts吧，说实话我还很期待微博客户端能有一个拍照发微博的Shortcuts。 3.支持系统集成搜索 搜索是Google的看家本领，同样，他们也把这个本领带到了Android系统中，亲儿子Nexus系列手机始终包含一个搜索硬体键，同时，也提供一个集成搜索功能，用以响应此按钮。 与iOS不同的是，Android系统除了能够搜索应用之外，还能搜索指定应用内的内容。在搜索时，特别的方便实用。 也许在不久的将来，你可以直接在这个界面中搜索你的微博好友，并直接点击给他发私信。 4.支持双向分享的接口 分享功能属于Android的一大特色，只需两个客户端支持，用户即可在任意两个本地的客户端中进行信息的分享，如把微博保存到本地的Evernote应用中，在图库中挑选一张图片通过WhatsApp发送给朋友。 支持双向分享的接口，意味着用户可以把你应用内的内容分享出去，也可以很方便的接收其他应用分享过来的内容。 5.定时服务 Andorid的多任务设计虽然引起系统速度变慢，并且会消耗过多的电池容量，但通过常驻系统的Service，他能够提供比iOS更好的定时服务功能。最简单的例子如豆瓣电台的定时闹钟：在您指定的时间内播放豆瓣电台。 与iOS只能做到定时提醒所不同的是，Android可以实现定时做任何的工作，想想定时拍一张照片，定时发送一条短信，定时播放一首歌曲，这是否会让你的生活增添一份乐趣。而作为开发者的你，这是否会给你的应用增加一丝特色？比如，网易阅读备受好评的离线下载功能，则有可能在Android上提供定时下载功能，而iOS平台下则无法支持。 总结 我喜欢Android系统，正如我喜欢iOS，就这么简单，在不抄袭的iOS的情况下，Android的应用依然可以做得非常的出色，如果你热爱Android，就应该好好利用他的特色。]]></description>
			<content:encoded><![CDATA[<p>上篇说到几大Android土鳖设计，这篇接下来说如何利用Android系统本身的一些旁门左道，打造优秀自然的应用。</p>
<h3>1.支持自动同步</h3>
<p>虽然iOS5已经在新版本中提供了无线同步的功能，但这是完全不能与Android的同步功能相比的，只需手机连上wifi网络，打开同步开关，Android就可自动在后台实时的同步信息，如邮件，通讯录，任务表，或者是你的应用需要同步的信息。</p>
<p><a title="Untitled-1 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5879914558/"><img src="http://farm7.static.flickr.com/6006/5879914558_d6f64f6726_z.jpg" alt="Untitled-1" width="640" height="274" /></a></p>
<p><span id="more-417"></span>这极度契合了用户的一个常用的移动使用场景：即时获取内容，离线使用，同步上传。如下图所示：</p>
<p><a title="同步 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5877076035/"><img src="http://98.136.170.121/5304/5877076035_b7577b4d9e_z.jpg" alt="同步" width="640" height="208" /></a></p>
<p>Google官方的应用大多支持同步，如Gmail，Docs，Reader，Blogger，Calendar等。如果你的产品允许用户在多平台多设备上编辑数据，为何不支持这个功能呢？</p>
<p><a title="evernote by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5877636714/"><img src="http://farm7.static.flickr.com/6002/5877636714_dd7dd5e9f0_z.jpg" alt="evernote" width="640" height="128" /></a></p>
<p>PS，目前<a href="https://market.android.com/details?id=com.netease.rpmms">网易手机邮</a>是我见过的Android同步最全面且快速的应用，如果你不习惯Gmail的国际化，不妨尝试一下。</p>
<p>2.Shortcuts&amp;Widget</p>
<p>我一直觉得iOS的桌面不能叫做桌面，因为它只能放置应用或者浏览器书签，不过他的优势就是管理应用更加方便直接。但对于信息的直接处理，却是Android的优势，Android的桌面并不仅仅放置应用，他可以放一些额外的Shortcuts，Widgets，以及组织他们的Floder。</p>
<p><a title="Shortcuts&amp;widget by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5881402278/"><img src="http://98.136.170.121/5062/5881402278_af80fdee9e_z.jpg" alt="Shortcuts&amp;widget" width="640" height="265" /></a></p>
<p>这样的话，桌面就真的如桌面了，你可以放置任何的东西：</p>
<p>想方便的播放豆瓣电台，Widget加到桌面，直接加星，扔垃圾桶；</p>
<p>常给女朋友电话，拖到桌面来，点击就可打电话；</p>
<p>爱看Reader里订的冷笑话，放到桌面，点击可读。</p>
<p>Shortcuts&amp;Widget是Android中提供给用户使用应用的另外一种入口，在某些场景中，反而能够高效的满足用户一些边缘需求。作为开发者的你，考虑一下如何设置你的Shortcuts吧，说实话我还很期待微博客户端能有一个拍照发微博的Shortcuts。</p>
<p><a title="Shortcuts&amp;widget案例 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5881402574/"><img src="http://98.136.170.121/5061/5881402574_fdd5e889ea_z.jpg" alt="Shortcuts&amp;widget案例" width="640" height="265" /></a></p>
<h3>3.支持系统集成搜索</h3>
<p>搜索是Google的看家本领，同样，他们也把这个本领带到了Android系统中，亲儿子Nexus系列手机始终包含一个搜索硬体键，同时，也提供一个集成搜索功能，用以响应此按钮。</p>
<p>与iOS不同的是，Android系统除了能够搜索应用之外，还能搜索指定应用内的内容。在搜索时，特别的方便实用。</p>
<p>也许在不久的将来，你可以直接在这个界面中搜索你的微博好友，并直接点击给他发私信。</p>
<p><a title="Android系统的集成搜索 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/6234258106/"><img src="http://farm7.static.flickr.com/6091/6234258106_206285f787_z.jpg" alt="Android系统的集成搜索" width="640" height="363" /></a></p>
<h3>4.支持双向分享的接口</h3>
<p>分享功能属于Android的一大特色，只需两个客户端支持，用户即可在任意两个本地的客户端中进行信息的分享，如把微博保存到本地的Evernote应用中，在图库中挑选一张图片通过WhatsApp发送给朋友。</p>
<p><a title="双向分享命令 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/6234434342/"><img src="http://farm7.static.flickr.com/6227/6234434342_df722be270_z.jpg" alt="双向分享命令" width="640" height="363" /></a></p>
<p>支持双向分享的接口，意味着用户可以把你应用内的内容分享出去，也可以很方便的接收其他应用分享过来的内容。</p>
<h3>5.定时服务</h3>
<p>Andorid的多任务设计虽然引起系统速度变慢，并且会消耗过多的电池容量，但通过常驻系统的Service，他能够提供比iOS更好的定时服务功能。最简单的例子如豆瓣电台的定时闹钟：在您指定的时间内播放豆瓣电台。</p>
<p><a title="Android定时服务 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/6233954633/"><img src="http://farm7.static.flickr.com/6237/6233954633_3a9c68945a_z.jpg" alt="Android定时服务" width="640" height="363" /></a></p>
<p>与iOS只能做到定时提醒所不同的是，Android可以实现定时做任何的工作，想想定时拍一张照片，定时发送一条短信，定时播放一首歌曲，这是否会让你的生活增添一份乐趣。而作为开发者的你，这是否会给你的应用增加一丝特色？比如，<a href="http://yuedu.163.com/client#android" target="_blank">网易阅读</a>备受好评的离线下载功能，则有可能在Android上提供定时下载功能，而iOS平台下则无法支持。</p>
<h3>总结</h3>
<p>我喜欢Android系统，正如我喜欢iOS，就这么简单，在不抄袭的iOS的情况下，Android的应用依然可以做得非常的出色，如果你热爱Android，就应该好好利用他的特色。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/tips_for_android_app_design.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>八大Android土鳖设计</title>
		<link>http://www.userkon.com/tolyer/eight_bad_design_in_android.html</link>
		<comments>http://www.userkon.com/tolyer/eight_bad_design_in_android.html#comments</comments>
		<pubDate>Sun, 26 Jun 2011 14:50:13 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[android]]></category>

		<guid isPermaLink="false">http://www.userkon.com/tolyer/%e5%85%ab%e5%a4%a7android%e5%9c%9f%e9%b3%96%e8%ae%be%e8%ae%a1.html</guid>
		<description><![CDATA[从Android诞生的那天起，这个可爱的小机器人凭借的开源的力量，硬是把iOS挤下市场占有率第一的宝座。虽然数字占优，但大众的心理中，iOS始终才是最佳体验的移动平台。 诚然，iOS成功的将界面做到了所见即所得的精简化，极致地把手机硬体键减少到一个，从而将用户可操作的范围项，控制在一个很小的空间内，有效降低了用户的学习成本。但是，既然飘在外向出手三分诺维斯基依然可以与邓肯一样定义为这个世界上最优秀的大前锋，Android为什么不可以与iOS一样定义为这个世界上最优秀的移动平台系统呢？ Android虽然存在多种硬体键设计，在可操作范围项，他控制得没有iOS那么精简，比如他可以在不同的界面中使用不同的Menu选项进行操作，比如一个应用可以同时跑多个进程和多个服务。但是，如果你能好好利用他，Android同样可以提供另外一种优秀的体验。 阿智写了一篇文章叫做《与其盲目抄袭，不如先研究彻底》，说的是国内缺乏对Android的研究，导致国产的Android应用整体质量不高。设计师们在Android上面大量的山寨了其他平台上的UI元素和设计方法，最终导致Android成为山寨大集合，用户体验的黑洞。这其中，不妨某些我们耳熟能详的产品。 这里所收集的，就是一些缺乏对Android深刻研究，照搬其他平台的UI元素，或者是土鳖的强奸用户的一些设计方法，写出这些的本意不是进行指责，而是希望让大家警醒。毕竟，山寨是我们都不想去做的事情。 1.返回在左上角 在手机界面中有两种返回：返回上一个界面，返回上一层级的界面。Android应用里，界面上并不出现返回的按钮，而是统一通过硬体Back键完成。因此无论怎样，在Android界面上出现任何的返回按钮（当然也包括生搬硬套iOS的返回按钮在左上角的这种形式），都是不正确且不合理的。 当然，也是存在例外的，比如在一个设置向导（Wizard）内。 2.常驻通知栏 在Android系统里，通知栏包含两类信息，Ongoing与Notifications（某些还包括快捷功能开关和程序运行的列表Rom不在此讨论范围内）。他们的差异是，Notifications属于各种应用的新信息的通知，如新短信，新邮件等。他可以直接被清除，Ongoing则表示当前正在运行的一些程序或者功能，且不可以直接被清除。 但是我们得留意的是，Ongoing上显示的应该是那些用户必须了解，且可能给用户使用手机带来影响的程序和功能，如正在播放音乐，正在通话中，正在上传下载等。若你的应用无论是退出还是运行状态，对用户并不存在什么影响。那就完全不用通过常驻通知栏的方式告知用户，交给系统管理你的应用的进程（Process）即好。 3.退出需要确认 首先我们得理解Android界面的堆栈机制，如图所示，用户的每次操作活动（activity）都会保存起来，当使用Back键时，如系统会自动杀死之前的活动。 但若当前已经是在应用的根界面了，使用Back键，这个应用的进程的所有自动被挂起，后台服务除外。它并不消耗CPU资源，但会占一些内存。Android与Java类似，系统有一个规则来回收内存，进行内存调度有个阀值，只有低于这个值系统才会从一个列表中，从后向前彻底关闭应用的进程。这样设计的好处是，他能够方便用户在多任务切换时，最大限度的提高速度，因为进程只是被挂起而已。 从系统设计的角度上看，退出需要确认甚至说是一个流氓的行为。而从防止用户误操作的角度上看，这也是一个谬论。因为按Back键时，进程会被挂起，用户并不存在信息损失等风险，即使是误操作，按照Android的堆栈机制，用户也可以非常轻松地恢复应用。你一定没见过iOS按Home键之后，给你来个确认退出框吧？ 4.检查更新设置 我深刻理解开发者这么做的原因：Android系统中应用更新都由Market进行推送，而使用Market的前提是，手机绑定了Google帐号。问题的关键在于，某些厂家的Android手机并不要求用户绑定Google帐号，他们自己甚至也推出应用商场，想分一杯羹。 这可苦了Android应用开发者，为了能够让不同的用户即时获取更新信息，他们不得不在自己的应用内增加检查更新功能，随即，就产生了检查更新的设置。 但是请各位开发者思考一下，您真的有必要给用户这个设置吗？你的应用真的可能每日都会更新吗？也许你只要设定一个默认的某周检查一次更新即好。 5.没有分享 分享功能属于Android的一大特色，只需两个客户端支持，用户即可在任意两个本地的客户端中进行信息的分享，如把微博保存到本地的Evernote应用中，在图库中挑选一张图片通过WhatsApp发送给朋友。 Android的分享功能，能够任意地本地两个客户端，他能够更加高效的满足用户不同的任务流程。比如拍照分享，Android可以使用Camera 360拍照后设置各种滤镜，直接起本地任意微博客户端发送至微博。先拍照，再分享，也符合用户的操作习惯。 对比起来iOS则比较麻烦，要么开发者麻烦地把滤镜功能做到微博客户端中，要么用户麻烦地先拍照设置滤镜保存至图库，然后在发微博界面从图库中进行挑选。 Android的分享机制，反而能够有效的避免客户端功能膨胀，帮助开发者节省工作量的同时，也切合和用户多种使用场景。真正的实现了，让一个应用只解决用户一个问题的理念，这不得不说是iOS的笑话。 6.没有焦点状态 某些Android手机带有轨迹球等输入设备，用户可以滚动轨迹球定焦于界面的某个控件上。这能有效帮助某些触摸障碍的用户。更加重要的是，随着Android@Home的发布，Android系统将有可能出现在冰箱，洗衣机等家电设备上，并且是通过有五维导航键的方式进行控制，这就显得焦点状态变得额外重要了。 更加可以预见的一点是，Android目前还没有像iOS上的Voice Over那样，提供无障碍访问的解决方案，假设一旦提供了，轨迹球就能够给更多盲人用户带来更好的移动设备体验。 7.大量缓存图片 Android没有像iOS那样，彻底去除了文件的概念，所以，如果你的应用如果没有处理好缓存文件的话如图片，这些图片就大量的积压在系统的Gallery中，严重拖慢速度。对于这种问题，只需要把缓存图片改为Gallery无法识别的类型即好。 8.没有Move to SDcard 如果你的应用大小超过5M，如果不提供Move to SDcard功能就实在过意不去，因为毕竟还有大量的用户只有250M以下的机身内存空间。当然，Google的地图应用一直都还是霸占着多大12M的机身内存。 无论如何，Android是一个优秀的手机平台，我也像热爱iOS那样热爱着这个手机系统。我也时刻相信，虽然Android的开发成本过大，但只要正确理解其系统设计理念，Android的应用依然可以非常优秀。]]></description>
			<content:encoded><![CDATA[<p>从Android诞生的那天起，这个可爱的小机器人凭借的开源的力量，硬是把iOS挤下市场占有率第一的宝座。虽然数字占优，但大众的心理中，iOS始终才是最佳体验的移动平台。</p>
<p>诚然，iOS成功的将界面做到了所见即所得的精简化，极致地把手机硬体键减少到一个，从而将用户可操作的范围项，控制在一个很小的空间内，有效降低了用户的学习成本。但是，既然飘在外向出手三分诺维斯基依然可以与邓肯一样定义为这个世界上最优秀的大前锋，Android为什么不可以与iOS一样定义为这个世界上最优秀的移动平台系统呢？</p>
<p>Android虽然存在多种硬体键设计，在可操作范围项，他控制得没有iOS那么精简，比如他可以在不同的界面中使用不同的Menu选项进行操作，比如一个应用可以同时跑多个进程和多个服务。但是，如果你能好好利用他，Android同样可以提供另外一种优秀的体验。</p>
<p>阿智写了一篇文章叫做《<a href="http://azero.tsang.blog.163.com/blog/static/470052011516348755/">与其盲目抄袭，不如先研究彻底</a>》，说的是国内缺乏对Android的研究，导致国产的Android应用整体质量不高。设计师们在Android上面大量的山寨了其他平台上的UI元素和设计方法，最终导致Android成为山寨大集合，用户体验的黑洞。这其中，不妨某些我们耳熟能详的产品。</p>
<p>这里所收集的，就是一些缺乏对Android深刻研究，照搬其他平台的UI元素，或者是土鳖的强奸用户的一些设计方法，写出这些的本意不是进行指责，而是希望让大家警醒。毕竟，山寨是我们都不想去做的事情。</p>
<p><span id="more-414"></span></p>
<h4>1.返回在左上角</h4>
<p><a title="新浪微博，返回在左上角" href="http://www.flickr.com/photos/userkon/5873136354/"><img src="http://98.136.170.121/5080/5873136354_8fc1034cb9.jpg" alt="新浪微博，返回在左上角" width="217" height="447" /></a></p>
<p>在手机界面中有两种返回：返回上一个界面，返回上一层级的界面。Android应用里，界面上并不出现返回的按钮，而是统一通过硬体Back键完成。因此无论怎样，在Android界面上出现任何的返回按钮（当然也包括生搬硬套iOS的返回按钮在左上角的这种形式），都是不正确且不合理的。</p>
<p>当然，也是存在例外的，比如在一个设置向导（Wizard）内。</p>
<p><a title="向导中的返回出现在屏幕左下角" href="http://www.flickr.com/photos/userkon/5873158286/"><img src="http://98.136.170.121/5304/5873158286_11b4f64ae7.jpg" alt="向导中的返回出现在屏幕左下角" width="217" height="447" /></a></p>
<h4>2.常驻通知栏</h4>
<p><a title="3G网络状态时刻常驻通知栏" href="http://www.flickr.com/photos/userkon/5872578809/"><img src="http://farm7.static.flickr.com/6001/5872578809_068940af94.jpg" alt="3G网络状态时刻常驻通知栏" width="217" height="447" /></a></p>
<p>在Android系统里，通知栏包含两类信息，Ongoing与Notifications（某些还包括快捷功能开关和程序运行的列表Rom不在此讨论范围内）。他们的差异是，Notifications属于各种应用的新信息的通知，如新短信，新邮件等。他可以直接被清除，Ongoing则表示当前正在运行的一些程序或者功能，且不可以直接被清除。</p>
<p>但是我们得留意的是，Ongoing上显示的应该是那些用户必须了解，且可能给用户使用手机带来影响的程序和功能，如正在播放音乐，正在通话中，正在上传下载等。若你的应用无论是退出还是运行状态，对用户并不存在什么影响。那就完全不用通过常驻通知栏的方式告知用户，交给系统管理你的应用的进程（Process）即好。</p>
<h4>3.退出需要确认</h4>
<p><a title="新浪微博，退出需要确认" href="http://www.flickr.com/photos/userkon/5873136500/"><img src="http://67.195.19.66/3047/5873136500_d471ea3f7e.jpg" alt="新浪微博，退出需要确认" width="217" height="447" /></a></p>
<p>首先我们得理解Android界面的堆栈机制，如图所示，用户的每次操作活动（activity）都会保存起来，当使用Back键时，如系统会自动杀死之前的活动。</p>
<p><a title="diagram_backstack by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5872579563/"><img src="http://98.136.170.121/5267/5872579563_fa078e716e_z.jpg" alt="diagram_backstack" width="640" height="274" /></a></p>
<p>但若当前已经是在应用的根界面了，使用Back键，这个应用的进程的所有自动被挂起，后台服务除外。它并不消耗CPU资源，但会占一些内存。Android与Java类似，系统有一个规则来回收内存，进行内存调度有个阀值，只有低于这个值系统才会从一个列表中，从后向前彻底关闭应用的进程。这样设计的好处是，他能够方便用户在多任务切换时，最大限度的提高速度，因为进程只是被挂起而已。</p>
<p>从系统设计的角度上看，退出需要确认甚至说是一个流氓的行为。而从防止用户误操作的角度上看，这也是一个谬论。因为按Back键时，进程会被挂起，用户并不存在信息损失等风险，即使是误操作，按照Android的堆栈机制，用户也可以非常轻松地恢复应用。你一定没见过iOS按Home键之后，给你来个确认退出框吧？</p>
<h4>4.检查更新设置</h4>
<p><a title="版本更新设置" href="http://www.flickr.com/photos/userkon/5872578965/"><img src="http://98.136.170.121/5150/5872578965_94cfb55af2.jpg" alt="版本更新设置" width="217" height="447" /></a></p>
<p>我深刻理解开发者这么做的原因：Android系统中应用更新都由Market进行推送，而使用Market的前提是，手机绑定了Google帐号。问题的关键在于，某些厂家的Android手机并不要求用户绑定Google帐号，他们自己甚至也推出应用商场，想分一杯羹。</p>
<p>这可苦了Android应用开发者，为了能够让不同的用户即时获取更新信息，他们不得不在自己的应用内增加检查更新功能，随即，就产生了检查更新的设置。</p>
<p>但是请各位开发者思考一下，您真的有必要给用户这个设置吗？你的应用真的可能每日都会更新吗？也许你只要设定一个默认的某周检查一次更新即好。</p>
<h4>5.没有分享</h4>
<p><a title="找不到微信实在太可惜了" href="http://www.flickr.com/photos/userkon/5872579085/"><img src="http://98.136.170.121/5143/5872579085_79e99afe15.jpg" alt="找不到微信实在太可惜了" width="217" height="447" /></a></p>
<p>分享功能属于Android的一大特色，只需两个客户端支持，用户即可在任意两个本地的客户端中进行信息的分享，如把微博保存到本地的Evernote应用中，在图库中挑选一张图片通过WhatsApp发送给朋友。</p>
<p>Android的分享功能，能够任意地本地两个客户端，他能够更加高效的满足用户不同的任务流程。比如拍照分享，Android可以使用Camera 360拍照后设置各种滤镜，直接起本地任意微博客户端发送至微博。先拍照，再分享，也符合用户的操作习惯。</p>
<p>对比起来iOS则比较麻烦，要么开发者麻烦地把滤镜功能做到微博客户端中，要么用户麻烦地先拍照设置滤镜保存至图库，然后在发微博界面从图库中进行挑选。</p>
<p>Android的分享机制，反而能够有效的避免客户端功能膨胀，帮助开发者节省工作量的同时，也切合和用户多种使用场景。真正的实现了，让一个应用只解决用户一个问题的理念，这不得不说是iOS的笑话。</p>
<h4>6.没有焦点状态</h4>
<p><a title="官方Gallery内的焦点状态" href="http://www.flickr.com/photos/userkon/5872579249/"><img src="http://98.136.170.121/5074/5872579249_e52862f006.jpg" alt="官方Gallery内的焦点状态" width="217" height="447" /></a></p>
<p>某些Android手机带有轨迹球等输入设备，用户可以滚动轨迹球定焦于界面的某个控件上。这能有效帮助某些触摸障碍的用户。更加重要的是，随着<a href="mailto:Android@Home">Android@Home</a>的发布，Android系统将有可能出现在冰箱，洗衣机等家电设备上，并且是通过有五维导航键的方式进行控制，这就显得焦点状态变得额外重要了。</p>
<p>更加可以预见的一点是，Android目前还没有像iOS上的Voice Over那样，提供无障碍访问的解决方案，假设一旦提供了，轨迹球就能够给更多盲人用户带来更好的移动设备体验。</p>
<p>7.大量缓存图片</p>
<p><a title="由某个应用在Gallery内产生的大量缓存图片" href="http://www.flickr.com/photos/userkon/5873136908/"><img src="http://farm7.static.flickr.com/6017/5873136908_e7306eb73b.jpg" alt="由某个应用在Gallery内产生的大量缓存图片" width="217" height="447" /></a></p>
<p>Android没有像iOS那样，彻底去除了文件的概念，所以，如果你的应用如果没有处理好缓存文件的话如图片，这些图片就大量的积压在系统的Gallery中，严重拖慢速度。对于这种问题，只需要把缓存图片改为Gallery无法识别的类型即好。</p>
<p>8.没有Move to SDcard</p>
<p><a title="坑爹的Google Maps现在还不支持Move to SDcard" href="http://www.flickr.com/photos/userkon/5873137066/"><img src="http://67.195.19.66/3109/5873137066_7d0275b13e.jpg" alt="坑爹的Google Maps现在还不支持Move to SDcard" width="217" height="447" /></a></p>
<p>如果你的应用大小超过5M，如果不提供Move to SDcard功能就实在过意不去，因为毕竟还有大量的用户只有250M以下的机身内存空间。当然，Google的地图应用一直都还是霸占着多大12M的机身内存。</p>
<p>无论如何，Android是一个优秀的手机平台，我也像热爱iOS那样热爱着这个手机系统。我也时刻相信，虽然Android的开发成本过大，但只要正确理解其系统设计理念，Android的应用依然可以非常优秀。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/eight_bad_design_in_android.html/feed</wfw:commentRss>
		<slash:comments>79</slash:comments>
		</item>
		<item>
		<title>移动界面隐喻设计</title>
		<link>http://www.userkon.com/tolyer/metaphors_design_on_mobile_device.html</link>
		<comments>http://www.userkon.com/tolyer/metaphors_design_on_mobile_device.html#comments</comments>
		<pubDate>Sun, 22 May 2011 17:14:34 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[iOS]]></category>
		<category><![CDATA[Metaphors]]></category>

		<guid isPermaLink="false">http://www.userkon.com/?p=407</guid>
		<description><![CDATA[界面是什么？ 是的，有些时候，我就在想这个简单的问题，而那时我的答案还是：界面是对软件应用解决方案的显性，使用图形化符号，向使用者解释它的功能与任务。 但最近一些认知却让我对这个问题有了新的回答：界面就是软件应用它本身。它不是一份对软件应用功能的图形化说明书，不是对软件应用功能与任务的图形化翻译，它就是软件应用本身，并且与之浑然天成。 一个简单的问题，仅仅从展开的iPad文件夹时界面的呈现，你觉得，有多少种方法，可以收缩起这个文件夹？ 方法其实有三种：点击（Tap）文件夹图标或者点击其他区域；向上拖动（Flick）界面；双指在两侧向内滑动（pin close）。 第一种也许你早就知道，但后面两种，你也许会将信将疑地去尝试，相信我的说法。 所以，从我的角度上而言，这也许是人家常说iOS操作简单易懂的原因。在你点击文件夹后，文件夹展开的的这个动画，以及最终他的视觉样式，已经告诉你了，他应该怎么去关闭，你会不由自主的，就学会这些操作。 而这就是隐喻。《iOS Human Interface Guidelines》里面是这样解释隐喻对体验的影响的：当你应用中的可视化对象和操作按照现实世界中的对象与操作仿造，用户就能快速领会如何使用它。（When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app.） 对我而言，iOS的文件夹更多的像一个抽屉的隐喻，并且，它的顶部还是玻璃材质的。从拉开的动画当中，他建立了一个类似抽屉的空间，你一看就明白了。 界面与界面之间，并不是简单的线性关系 我们不得不否认的一点是，界面与界面之间其实是应该纯在联系的，我指的这种联系是说，空间感。存在相互之间的层级和逻辑关系的，而且这种关系，越符合现实的，越好。越容易让别人理解，越来越不用让别人学习。 &#8230; <a href="http://www.userkon.com/tolyer/metaphors_design_on_mobile_device.html">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<h3>界面是什么？</h3>
<p>是的，有些时候，我就在想这个简单的问题，而那时我的答案还是：界面是对软件应用解决方案的显性，使用图形化符号，向使用者解释它的功能与任务。</p>
<p>但最近一些认知却让我对这个问题有了新的回答：界面就是软件应用它本身。它不是一份对软件应用功能的图形化说明书，不是对软件应用功能与任务的图形化翻译，它就是软件应用本身，并且与之浑然天成。</p>
<p>一个简单的问题，仅仅从展开的iPad文件夹时界面的呈现，你觉得，有多少种方法，可以收缩起这个文件夹？</p>
<p><a title="Picture1 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5706757467/"><img alt="Picture1" src="http://67.195.19.66/3481/5706757467_dcd6f96dd2_z.jpg" width="640" height="480" /></a></p>
<p>方法其实有三种：点击（Tap）文件夹图标或者点击其他区域；向上拖动（Flick）界面；双指在两侧向内滑动（pin close）。</p>
<p>第一种也许你早就知道，但后面两种，你也许会将信将疑地去尝试，相信我的说法。</p>
<p>所以，从我的角度上而言，这也许是人家常说iOS操作简单易懂的原因。在你点击文件夹后，文件夹展开的的这个动画，以及最终他的视觉样式，已经告诉你了，他应该怎么去关闭，你会不由自主的，就学会这些操作。</p>
<p><span id="more-407"></span>
<p>而这就是隐喻。《<a title="iOS Human Interface Guidelines-Human Interface Principles-Metaphors" href="http://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Principles/Principles.html#//apple_ref/doc/uid/TP40006556-CH5-SW2">iOS Human Interface Guidelines</a>》里面是这样解释隐喻对体验的影响的：当你应用中的可视化对象和操作按照现实世界中的对象与操作仿造，用户就能快速领会如何使用它。（When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app.） </p>
<p><a title="抽屉的映射 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5706927981/"><img alt="抽屉的隐喻" src="http://69.147.90.215/2161/5706927981_744b2f6b23_z.jpg" width="640" height="290" /></a></p>
<p>对我而言，iOS的文件夹更多的像一个抽屉的隐喻，并且，它的顶部还是玻璃材质的。从拉开的动画当中，他建立了一个类似抽屉的空间，你一看就明白了。</p>
<h3>界面与界面之间，并不是简单的线性关系</h3>
<p>我们不得不否认的一点是，界面与界面之间其实是应该纯在联系的，我指的这种联系是说，空间感。存在相互之间的层级和逻辑关系的，而且这种关系，越符合现实的，越好。越容易让别人理解，越来越不用让别人学习。</p>
<p>这就是我们需要做隐喻，我们需要通过它，去表现界面之间的关系。</p>
<p><a title="界面环境 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5707537670/"><img alt="界面环境" src="http://69.147.90.215/2406/5707537670_f7643123c6_z.jpg" width="640" height="267" /></a></p>
<p>隐喻给人以可预测性，用户能够轻易的理解你设计的软件应用。这是一种掌握的感觉，是一种控制的感觉。当用户操作时，他们知道下一步即将出现什么、怎么回去——即使是在第一次操作。</p>
<h3>为什么需要在移动界面中注意隐喻设计？</h3>
<h4>1.导航缺失</h4>
<p>一个触摸屏手机的物理尺寸在3.7寸左右，与一张信用卡相当。在这么狭窄的空间内，我们则不能秉着PC客户端“<strong>在一个主界面内完成大部分的任务</strong>”的思想，去设计移动客户端。我们必须把界面分拆。</p>
<p>与之而来的问题是，分拆后的界面是有逻辑的，但我们并不能照搬PC客户端中的方法：使用任务栏，层叠的模态对话框去表现这种逻辑。</p>
<p><a title="Transform Mail from Mac to iPhone by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5717764069/"><img alt="Transform Mail from Mac to iPhone" src="http://69.147.90.215/2058/5717764069_cb0268d017_z.jpg" width="640" height="394" /></a></p>
<p>因为我们根本就没有空间，所以我们得另辟蹊径。</p>
<p>所以，我们把界面拆分得更多独立化，让界面变成卡片式，一个界面只完成一项任务，保证界面之间联系的单一化，避免界面之间逻辑，或者跳转的混乱。</p>
<h4>2.缺乏物理力学反馈</h4>
<p>传统的手机上，用户使用键盘，去操作屏幕上的视觉对象，键盘在这个阶段中，扮演的其实是用户操作行为的翻译器。而iPhone的出现砍掉了这种操作行为的翻译，变成直接触摸，这是一项伟大的进步。</p>
<p><a title="操作与反馈对比 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5710061011/"><img alt="操作与反馈对比" src="http://69.147.90.215/2752/5710061011_109647e0e7_z.jpg" width="640" height="177" /></a></p>
<p>iPhone虽然缩短了操作行为的执行阶段，但却给操作行为的反馈阶段带来了麻烦：<strong>只有视觉反馈，手指触摸的物理力学反馈消失了。</strong></p>
<p>你的手指不再能够感受到键盘按下的物理力学压力，甚至，假设你手指粗壮一点，你就几乎没法看见按钮是否被按下。而在输入时，这种情况尤甚，键盘手机上有着悠久历史的高效的“盲打”输入方式只能进入历史的存档中。</p>
<p>因此，我们更多的需要利用用户的视觉和听觉，去提供反馈。</p>
<h3>隐喻设计内容</h3>
<p>对于一个产品来说，隐喻设计不仅仅是动画，各种即时状态细节的设计，更多情况下，我们需要按步骤的去完成整个隐喻的系统性与结构化设计。他包含以下几项内容：</p>
<h4>1.拟物化视觉外观与听觉反馈</h4>
<p>隐喻设计的第一步，从应用的外观着手，如果可以的话，你应该考虑应用的外观表现出真实物理的肌理材质，以及合理的光影效果，并且，得正确的显示界面的元素的相互之间的空间层次感。</p>
<p><a title="拟物化外观 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5730145623/"><img alt="拟物化外观" src="http://98.136.170.121/5142/5730145623_114fdf1e6c_z.jpg" width="640" height="522" /></a></p>
<p><a title="Untitled-3 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5731765385/"><img alt="Untitled-3" src="http://98.136.170.121/5301/5731765385_67b358261f_z.jpg" width="625" height="562" /></a></p>
<p>另外我们不能忽视的一种拟物化设计：<strong>音效</strong>。它不仅是对缺乏物理力学反馈的一种弥补的手段，在某些情况下，也是一种有效的反馈机制，如当屏幕处于关闭状态下时（这是经常的事情），拟物化的音效更能让用户了解当前用户的状态。iOS解锁屏幕的声音你还记得吗？还有敲击键盘的声音，以及照片拍摄的声音。这都很好的拟物化音效。</p>
<p>拟物化的外观很大程度上降低了用户的认知成本，无需阅读额外的文字，用户只要看到软件的样子，就知道它的用途。</p>
<h4>2.即时反馈</h4>
<p>假设，你在触摸屏的设备上，使用手势执行某项操作，但界面上没有任何的反馈。你就不得不去猜测一下，你遇到的是下面的那种情况：</p>
<ol>
<li>你的操作手势有误，软件无法响应 </li>
<li>程序当机了，暂时没有响应 </li>
</ol>
<p>对于情况二，很抱歉，我们也许实在无能为力。但是对于情况一，我们得有必要讨论一下，如果反馈用户操作手势有误，并指引或者帮助用户到正确的操作中了。</p>
<p><a title="坑爹的错误反馈 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5742254455/"><img alt="坑爹的错误反馈" src="http://69.147.90.215/2457/5742254455_da95c8573e_z.jpg" width="640" height="257" /></a></p>
<p>由此看来，传统网页上使用的反馈方式，移植到触摸屏设备上，实在是水土不服。移动设备最好的错误反馈，应该是即时跟随用户的手势操作的。</p>
<p><a title="Google Map for iPad by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5741955267/"><img alt="Google Map for iPad" src="http://67.195.19.66/3494/5741955267_e273c548c0_z.jpg" width="640" height="414" /></a></p>
<p>如上图示意，这才是一个触摸屏上，应该具备的一种反馈，它即时响应了用户的手势动作(即使可能是错误的)，而当用户释放操作时，又自动回归到正确的操作结果中来。</p>
<p>对于任何一个软件应用来说，他都是有学习成本的。有的成本高到离谱，比如Office，Photoshop之类的生产力软件，但也有低成本的，如计算器，记事本等。当软件应用而行拟物化设计之后，其实这已经降低了一些学习的成本。但如何继续降低学习成本？<strong>让用户犯错，并从错误中学习。</strong></p>
<p>即时反馈缩减了操作与反馈之间的距离，有效降低了用户纠正错误的修复成本，也提高了用户学习的效率。</p>
<h4>3.流动式动画</h4>
<p>传统的软件界面之间的切换表现得较为粗暴，大部分情况下，他只显示命令执行前和执行后两个界面，而忽略了他们之间的那段过程。而在真实世界中，倘若没有这个过程，你甚至很难理解过程两端的界面，是如何联系起来的。</p>
<p><a title="向上推的界面组合 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5746283962/"><img alt="向上推的界面组合" src="http://67.195.19.66/3272/5746283962_ab32d07e35_z.jpg" width="640" height="321" /></a></p>
<p>动画有一种无法比拟的表现力，它是与用户的最有效的沟通方式，一个精致，微细的动画，能够友好的衔接两个界面之间的切换，同时他还有以下的作用：</p>
<ol>
<li>表现软件当前状态 </li>
<li>提供对用户有用的反馈信息 </li>
<li>加强用户直接操作的控制感 </li>
<li>通过视觉表现用户的操作的结果 </li>
</ol>
<p>流动式的动画贯穿在整个iPhone操作系统中，也包括在非沉浸式应用程序中。但作为隐喻设计的一种手段，我们需要留意的是：动画只是常用于提高用户体验，它本身并不是用户体验的焦点。</p>
<h3>隐喻设计的评判标准</h3>
<h4>1.符合现实逻辑的界面空间</h4>
<p>流动式的动画成为隐喻设计的最后一块拼图，但是我们仅仅把拼图拼起来是不够的，我们还需要检验，这样的拼图是否符合真实世界的逻辑。</p>
<p><a title="杂志式的界面空间 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5746443980/"><img alt="Picture1" src="http://98.136.170.121/5226/5746443980_3da07f4d35_z.jpg" width="640" height="448" /></a></p>
<p>Flipboard始终如一地采用翻页的动画效果，无论是从首页进入，抑或是从某个订阅源中返回。他甚至还精细的制作了三种翻页动画效果：只翻动一页，翻动两页，翻动三页和以上；他给以用户这样一种感觉：</p>
<ul>
<li>我订阅的所有内容，是一本杂志 </li>
<li>任何页面都没有互相从属的关系，只有先后秩序的关系 </li>
<li>在首页上的方块型的东西，等于杂志的目录 </li>
</ul>
<p><a title="杂客的界面空间 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5746754762/"><img alt="杂客的界面空间" src="http://98.136.170.121/5105/5746754762_37119ab8d9_z.jpg" width="640" height="438" /></a></p>
<p>而国内的同类产品杂客，他所呈现的界面空间却稍有不同，整体上，他像是一个时刻变换封面的杂志柜。</p>
<p>但个人感觉，从杂志柜进入杂志的过程动画，有点粗暴且难以在现实生活中找到相关性。个人观点，若此过程动画能与iBooks打开书籍的动画类似或相同。也许更加符合现实逻辑。</p>
<h4>2.自圆其说</h4>
<h4>简单来说，你的界面是如何进入用户的视眼，也应该以相反的方式，从界面中消失，并且，这个过程，是能够自圆其说的，且符合真实生活的隐喻的。</h4>
<p><a title="新开网页流程 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5746509525/"><img alt="新开网页流程" src="http://67.195.19.66/3060/5746509525_7a08111719_z.jpg" width="640" height="269" /></a></p>
<p><a title="关闭网页流程 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5747058104/"><img alt="关闭网页流程" src="http://69.147.90.215/2218/5747058104_e3823b09d6_z.jpg" width="640" height="274" /></a></p>
</p>
<h4>3.响应用户的直觉手势</h4>
<p>移动设备最大的特点是：直接操作。如果你设置了你的界面是从下方推入，那用户可能会直觉性的认为，我把新界面向下拉，这个界面即可消失。</p>
<p><a title="腾讯爱看直觉性手势 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5746751051/"><img alt="腾讯爱看直觉性手势" src="http://69.147.90.215/2754/5746751051_0f4a0eae72_z.jpg" width="640" height="294" /></a></p>
<p>从图可以看到腾讯爱看成功的照顾到了用户从隐喻设计中所得到的直觉性手势，只需向下拉，用户就可以关闭此界面。</p>
<p><a title="直觉手势 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5747359654/"><img alt="直觉手势" src="http://69.147.90.215/2211/5747359654_b5747c8073_z.jpg" width="640" height="299" /></a></p>
<p>从外观上看，评论界面都处于主界面之下，而动画效果都属于主界面向下拉伸，评论界面向上推至界面顶部。但是杂客的同样响应了用户的直觉性手势，只需在正文界面中，向下拖动，即可激活评论界面，这不得不算是在twitter客户端上的一种进步和超越。</p>
<h3>总结</h3>
<p>其实理解移动界面的隐喻设计，并不是一件非常困难的事情，因为这是一个化繁为简过程后的结果。而困难的是：设计师应该跳出传统的按钮，点击等交互操作的局限中来，更多了考虑到和现实生活的逻辑结合和用户的直觉手势的响应。</p>
<p>对于移动的软件应用来说，隐喻设计的初衷是为了解决导航缺失和物理力学反馈缺失的问题，但同样，这也是移动产品的竞争力的核心体现。如何帮助用户更快的理解你的软件应用，如何帮助用户更顺畅的使用你的软件应用。这是我们每个设计师，都应该去真实生活中去寻找的答案。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/metaphors_design_on_mobile_device.html/feed</wfw:commentRss>
		<slash:comments>77</slash:comments>
		</item>
		<item>
		<title>解决方案，而不是功能</title>
		<link>http://www.userkon.com/tolyer/about_solution_no_features.html</link>
		<comments>http://www.userkon.com/tolyer/about_solution_no_features.html#comments</comments>
		<pubDate>Mon, 24 Jan 2011 02:39:40 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[feature]]></category>
		<category><![CDATA[solution]]></category>

		<guid isPermaLink="false">http://www.userkon.com/?p=387</guid>
		<description><![CDATA[扪心自问，你真正了解你卖给用户的是什么玩意么？你所认为革命性的，一定会震惊世界的功能、特色，用户真的买单么？ 我的意思是，我们总是习惯性的忘记一个事实：我们并不是向用户出售一款产品或者服务；我们是向用户出售一个能够搞掂问题的解决方案，它能够为用户创造价值，并让用户为这个问题少操心一点。 举个简单的例子：当你认为你在卖钻子的时候，其实用户想买的是洞。 It’s about solution, not features 作为产品的设计者，你应该关注在产品所能给用户解决的问题，而不是把焦点集中在具体功能之上。 经常性地，某个功能被你的用户或你的同事提出时，而且这个功能听起来是那么的激动人心，并且你的竞争对手还没做，你得先冷静的思考一下：它们属于哪种问题的解决方案，有没有更好的？ 往往你所认为的一个好功能，放在你的产品内，也许是个很糟糕的解决方案。 QQmail，Gmail，网易邮箱，都有一个邮件置顶的功能，且设计方法各有不同，可作为It’s about solution,not features这个课题的标准案例演示。 所谓邮件置顶，就是在邮件的列表页面中，能让某些用户认为重要的邮件始终出现在顶端。减少用户查阅的时间。 QQmail自动把用户标记的待办邮件的前三封置顶显示 (目前此功能已被取消，截图来源) GMail通过新增一个智能判断的Important标签和Priority Inbox的组合方式，让用户的邮件自动置顶 网易邮箱直接新增了”标记为置顶”的功能 稍微思考一下，为什么有用户说需要邮件置顶？我个人认为的原因是：他们希望重要的邮件能够自然的出现在显眼的位置，省去他们搜索的时间。他们并不是真正的想要邮件置顶这个功能。 从这种角度而言，QQmail与Gmail通过原有功能的再组合，用最小的代价，完成了这个解决方案，并且避免了产品复杂度的提高。而网易邮箱处理得则过于粗暴直接。 别马上相信你的用户 如果我听从了顾客的想法，那我该给他们一匹更快的马。 ——Henry Ford 别马上相信你的用户，用户会习惯性的把期望描述成为具体的某个功能（Features），让你误以为这个功能是他极度需要的。而且用户容易异想天开，缺乏逻辑，稍微不注意，你就可以为少数几个用户的要求而毁了你产品。 用户也是容易局限于现实的，他们容易在现实中寻找简单的线性对比，而拒绝创新性的思考。如针对手机电池不给力，用户会希望手机电池容量越来越大，却不会希望通过走路，骑车等方式保持手机电力。 但无论何时，你都应该保持对用户意见的即时倾听，仔细分析，询问，找出他背后的真实期望。并斟酌满足他。 为用户创造价值，不打扰 Apps Store上有个最贵最没用的应用I’m Rich，除了能在你的iPhone屏幕上显示一张宝石的照片之外则不能干任何事情了，且售价999美元。八个无聊的人士买了之后，这东西就被苹果官方下架了。 举这个例子，我想说的就是，你的产品得真正的能够为用户创造实质性的，可直接看得见的价值，别整什么虚的，用户心理面对于这个可精明着呢。不然，无论多优秀伟大的产品，都有可能步Google Wave的后尘而去。 而通常创造的价值最有效的方法是：节省时间。这是所有互联网，手机产品的解决方案，也是用户使用他们的根本原因。 因为大体而言，在现实生活中，他们都可以找到替代方案，只是更慢而已。 用户理想的解决方案就是：用户只需付出成本，然后可以撒手不管，安心等待你创造价值即好。这和每个人都期待，只需把钱存到银行他就能够自动快速无限增值一样。 我们所要做的最基本的就是，尽量减少无用的打扰，因为这是损害用户价值的最要命的方式。 &#8230; <a href="http://www.userkon.com/tolyer/about_solution_no_features.html">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>扪心自问，你真正了解你卖给用户的是什么玩意么？你所认为革命性的，一定会震惊世界的功能、特色，用户真的买单么？</p>
<p>我的意思是，我们总是习惯性的忘记一个事实：我们并不是向用户出售一款产品或者服务；我们是向用户出售一个能够搞掂问题的<strong>解决方案</strong>，它能够为用户<strong>创造价值</strong>，并让用户为这个问题<strong>少操心</strong>一点。</p>
<p>举个简单的例子：当你认为你在卖钻子的时候，其实用户想买的是洞。</p>
<h3>It’s about solution, not features</h3>
<p>作为产品的设计者，你应该关注在产品所能给用户解决的问题，而不是把焦点集中在具体功能之上。</p>
<p>经常性地，某个功能被你的用户或你的同事提出时，而且这个功能听起来是那么的激动人心，并且你的竞争对手还没做，你得先冷静的思考一下：它们属于哪种问题的解决方案，有没有更好的？</p>
<p>往往你所认为的一个好功能，放在你的产品内，也许是个很糟糕的解决方案。</p>
<p><span id="more-387"></span></p>
<p>QQmail，Gmail，网易邮箱，都有一个邮件置顶的功能，且设计方法各有不同，可作为It’s about solution,not features这个课题的标准案例演示。</p>
<blockquote><p>所谓邮件置顶，就是在邮件的列表页面中，能让某些用户认为重要的邮件始终出现在顶端。减少用户查阅的时间。</p></blockquote>
<p><a title="qqmailtopmail" href="http://www.flickr.com/photos/41128764@N02/5380394135/"><img src="http://98.136.170.121/5163/5380394135_1d0ba71dab.jpg" border="0" alt="qqmailtopmail" hspace="0" vspace="0" /></a></p>
<p><span style="color: #808080; font-size: x-small;">QQmail自动把用户标记的待办邮件的前三封置顶显示<br />
(目前此功能已被取消，<a title="QQ邮箱更新日记－2009年10月28日" href="http://service.mail.qq.com/cgi-bin/help?subtype=1&amp;amp;&amp;amp;no=455&amp;amp;&amp;amp;id=36">截图来源</a>)</span></p>
<p><a title="Gmailpriorityinbox" href="http://www.flickr.com/photos/41128764@N02/5380995276/"><img src="http://98.136.170.121/5209/5380995276_ec20551b07.jpg" border="0" alt="Gmailpriorityinbox" hspace="0" vspace="0" /></a></p>
<p><span style="color: #808080; font-size: x-small;">GMail通过新增一个智能判断的Important标签和Priority Inbox的组合方式，让用户的邮件自动置顶</span></p>
<p><a title="网易邮箱邮件置顶功能" href="http://www.flickr.com/photos/41128764@N02/5380412059/"><img src="http://98.136.170.121/5288/5380412059_c87a12f299.jpg" border="0" alt="网易邮箱邮件置顶功能" hspace="0" vspace="0" /></a></p>
<p><span style="color: #808080; font-size: x-small;">网易邮箱直接新增了”标记为置顶”的功能</span></p>
<p>稍微思考一下，为什么有用户说需要邮件置顶？我<strong>个人认为</strong>的原因是：他们希望重要的邮件能够自然的出现在显眼的位置，省去他们搜索的时间。<strong>他们并不是真正的想要邮件置顶这个功能。</strong></p>
<p>从这种角度而言，QQmail与Gmail通过原有功能的再组合，用最小的代价，完成了这个解决方案，并且避免了产品复杂度的提高。而网易邮箱处理得则过于粗暴直接。</p>
<h3>别马上相信你的用户</h3>
<blockquote><p>如果我听从了顾客的想法，那我该给他们一匹更快的马。</p>
<p>——<a title="亨利·福特，福特汽车建立者。点击可查看其维基百科条目。" href="http://zh.wikipedia.org/zh/%E4%BA%A8%E5%88%A9%C2%B7%E7%A6%8F%E7%89%B9">Henry Ford</a></p></blockquote>
<p>别马上相信你的用户，用户会习惯性的把期望描述成为具体的某个功能（Features），让你误以为这个功能是他极度需要的。而且用户容易异想天开，缺乏逻辑，稍微不注意，你就可以为少数几个用户的要求而毁了你产品。</p>
<p>用户也是容易局限于现实的，他们容易在现实中寻找简单的线性对比，而拒绝创新性的思考。如针对手机电池不给力，用户会希望手机电池容量越来越大，却不会希望通过走路，骑车等方式保持手机电力。</p>
<p>但无论何时，你都应该保持对用户意见的即时倾听，仔细分析，询问，找出他背后的真实期望。并斟酌满足他。</p>
<h3>为用户创造价值，不打扰</h3>
<p>Apps Store上有个最贵最没用的应用<a href="http://itunes.apple.com/us/app/im-rich/id352152229?mt=8">I’m Rich</a>，除了能在你的iPhone屏幕上显示一张宝石的照片之外则不能干任何事情了，且售价999美元。八个无聊的人士买了之后，这东西就被苹果官方<a title="微软用户比较穷 WP7版I Am Rich仅售499美元" href="http://www.evolife.cn/html/2010/57229.html">下架</a>了。</p>
<p>举这个例子，我想说的就是，你的产品得真正的能够为用户创造<strong>实质性的，可直接看得见</strong>的价值，别整什么虚的，用户心理面对于这个可精明着呢。不然，无论多优秀伟大的产品，都有可能步Google Wave的后尘而去。</p>
<p>而通常创造的价值最有效的方法是：<strong>节省时间</strong>。这是所有互联网，手机产品的解决方案，也是用户使用他们的根本原因。</p>
<p>因为大体而言，在现实生活中，他们都可以找到替代方案，只是更慢而已。</p>
<p>用户理想的解决方案就是：用户只需付出成本，然后可以撒手不管，安心等待你创造价值即好。这和每个人都期待，只需把钱存到银行他就能够自动快速无限增值一样。</p>
<p>我们所要做的最基本的就是，尽量减少无用的打扰，因为这是损害用户价值的最要命的方式。</p>
<p><a title="txmicroblogexitalert.png" href="http://www.flickr.com/photos/41128764@N02/5382651473/"><img src="http://98.136.170.121/5127/5382651473_4c004ea1e5.jpg" border="0" alt="txmicroblogexitalert.png" hspace="0" vspace="0" /></a></p>
<p><span style="color: #808080; font-size: x-small;">手机应用的这种提示属于对用户价值的最大损害</span></p>
<p>最后，引用iOS HIG中关于产品定义说明的句子，描述如何通过确认解决方案来筛选出你产品的功能列表。虽然这属于移动产品的指导性文字，但是我相信对PC端产品来说，这些思想是相通的。</p>
<p>Before you begin designing your application, it’s essential to define precisely what your application does. A good way to do this is to craft a <strong>product definition statement</strong>—a concise declaration of your application’s main purpose and its intended audience. Creating a product definition statement isn’t merely an exercise. On the contrary, it’s one of the best ways to <strong>turn a list of features into a coherent product</strong>.</p>
<p>在你开始设计自己的应用程序之前，必不可少的是精确定义你的应用程序是做什么的。一个比较好的方式是用心撰写一份<strong>产品定义说明</strong>——份简洁描述你的应用程序的主要目的与目标用户的文档。创建产品定义声明并不仅仅是个练习，相反的是，这是<strong>将一大串功能特征转化为一个连贯性产品</strong>的最佳方式。</p>
<p>(<a title="Create a Product Definition Statement——创建产品定义说明" href="http://www.uxguide.net/wiki/iphone:Create-a-product-definition-statement">引用来源</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/about_solution_no_features.html/feed</wfw:commentRss>
		<slash:comments>51</slash:comments>
		</item>
		<item>
		<title>那些工作教会我的事情（1）：关于交互设计</title>
		<link>http://www.userkon.com/tolyer/taught_me_by_work_1_about_interaction_design.html</link>
		<comments>http://www.userkon.com/tolyer/taught_me_by_work_1_about_interaction_design.html#comments</comments>
		<pubDate>Wed, 12 Jan 2011 15:27:27 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[设计之外]]></category>

		<guid isPermaLink="false">http://www.userkon.com/?p=380</guid>
		<description><![CDATA[自从被知道成为交互设计师的那一天起，邮箱或IM上，间歇性地，会收到很多师弟师妹的信息，让我说说这个职位，谈谈感想，说说见解，给他们指明一条平坦的道路。（可惜我一路走来颇为争扎。）这快2年的时间，搪塞了不少没法回答的问题，也忽悠了一些不靠谱的人。但总体而言，写这篇文章除了给师弟师妹们一个解答之外。也是给自己的一种总结：让自己的知识显性化，有所积淀，有所运用与传承。 什么是交互设计？ 交互设计，又称互动设计，(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the &#8220;interaction&#8221;,即人工制品在特定场景下的反应方式)相关的界面。 ——维基百科 相比用学术的语句描述，我更喜欢通过它要达到的目的来解释交互设计：帮助用户高效的完成产品所设想的任务，同时在这个过程中，能让用户感觉到愉悦和不受打扰。 KFC快餐店实景——注意观察凳子和礼物 我将使用常见的KFC，麦当劳等快餐店的真实案例，去解释我自己的定义，我觉得这是最直观的： 高效：经常性的，你能点的就是那几个套餐，省去了你自己配餐选择迟疑的麻烦。从点餐到拿到食物，至多需要3分钟。即使需要你等，也会出示牌号给你，稍后给你送去。快，准，方便。 产品所设想的任务：只要你一进门，服务员就会提示你点餐，餐桌布局狭小紧凑，凳子不可移动，故意让你坐得不舒服。使用暖色的灯光，播放快节奏的歌曲，扩充你的食欲。他们所设想的任务是什么？让你赶紧吃完走人。（其实你也是抱着这个目的而来的）而不是让你慢悠悠的享受这顿美食。 愉悦：从装修布局上，快餐店都非常的干净整洁，颜色明亮鲜艳。服务员总是那么热心，礼貌；点餐说不定还能收获个礼物。你说，你能不高兴么？ 不受打扰：不管你是等人，蹭厕所还是真的吃饭，服务员都不会主动打扰你（除非你主动呼叫），除了点餐时你需要说点什么之外，你无需再说点什么即可吃完走人。 为什么需要交互设计？ 那么结论就很清晰直白了：交互设计能使用取巧，聪明的方法，让用户不发觉地、无需思考、无需学习，完成你所想，并且也是他所需的目的，同时，不会引起用户的反感和愤怒。甚至他还会反过来赞赏你的产品。 就像快餐店那样，能够高效的让顾客达到填饱肚子的目的，并且也能导向性地让顾客赶紧吃完走人，还不会觉得自己是被催着离开，不被打扰。 而另外一个需要交互设计的理由是：这个世界上，满足上述目的产品太少了，甚至可以说是屈指可数，用户花费了太多的时间在寻找一个合适的好的产品。 这是为什么呢？李笑来曾在自己的文章“为什么要格外努力？”这样说道： 这世界有很多的事情之间不是简单的线性关系。 有个残酷的例子可供参考。让我们看看所谓的“剩女”是怎样剩下的呢？大抵上，她们都觉得自己的要求并不高：受教育程度不能太低吧？人长得不能太难看吧？个头不能太矮吧？岁数不能太大吧？怎么也得有点钱吧？人怎么也得有点幽默感吧？……确实，每个条件看起来都不高，基本上都只是中上等水平而已……可问题在于，每次都是三个人里只有一个人能够满足条件的话，前后已经六个条件，那么分子是1，分母是3的6次方，即，1/729，也就是说，从纯粹概率的角度出发，她要能够接触到729个男人才可能遇到1个所有条件都满足的…… 那么，同时满足“有饭+有肉+有青菜+食物新鲜无毒+价格公道+点餐方便+口味适中+店面干净整洁+有厕所+有空调与暖气+服务员态度好+不用走太远”这些看起来都是吃饭的普通需求的中式快餐店，又有多少呢？ 真功夫快餐店没有厕所，成为很多人拒绝真功夫的理由。 因此，为了让你的产品得到用户的满意和忠诚；为了你的产品得到更多的盈利，你需要交互设计让你的产品出类拔萃。并且，你无需担心有人走在你前头，无需担心你的竞争对手多如牛毛，你应该专注于满足用户需求，用交互设计的方法，让你后来居上。 交互设计师在团队中的位置？ 伴随着工业技术的发展，个人平均能接触到的日用品也越来越多，人们不停的因为难用的工业产品而浪费时间，影响情绪，于是，以用户为中心等理论也相应的产生了。它的来源是业设计和人机工程学，简单地说：设计师应该使产品适合于人使用，而不是让人习惯产品。 工业设计师（如汽车，家电）谨记这个优良传统，软件设计师，网页设计师们却抛之脑后，几十年来，他们使软件和网页能够在电脑上正常使用与显示，但用户却没法使用他们完成任务。 而在国内，大家所常讨论的交互设计师，一般指的是互联网产品设计团队当中的交互设计师。 一个普通的互联网产品设计流程 罗马不是一天建成的，好的产品也不是单靠设计师能搞掂的。所以，一般开发队伍中，是包含几个单独的小组共同合作。如下： 产品小组：主要负责产品需求定义，策略，运营，推广等工作。代表角色是产品经理。 设计小组：主要负责产品界面的交互性，视觉外观，以及网页前端的相关的工作，如有必要，还有负责可用性测试和用户研究的工作。代表角色是交互设计师。 程序员小组：他们大部分工作在于做着设计师的所难以理解的敲代码的工作，但是他们是开发队伍的核心。代表角色是项目经理。 测试小组：主要是测试产品的逻辑上或者是极限状态下的bug和不足。提供给程序员小组或者设计小组修改。 那么，我们看到，交互设计师实际上已经成为开发队伍中不可或缺且始终贯穿开发进度的核心角色： 在需求定义时，交互设计师需要需要借助用研的力量参与进来，确保这个产品是能够满足具体用户某种特定期望的。 在设计阶段，交互设计师需要通过制作原型的方式，让产品的样子显性化，让产品能够高效的完成任务。同时，你必须向视觉设计的同事提出视觉设计的需求，你还得与前端的同事讨论原型实现的可行性。并且，你还得让你的原型通过可用性测试。 &#8230; <a href="http://www.userkon.com/tolyer/taught_me_by_work_1_about_interaction_design.html">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>自从被知道成为交互设计师的那一天起，邮箱或IM上，间歇性地，会收到很多师弟师妹的信息，让我说说这个职位，谈谈感想，说说见解，给他们指明一条平坦的道路。（可惜我一路走来颇为争扎。）这快2年的时间，搪塞了不少没法回答的问题，也忽悠了一些不靠谱的人。但总体而言，写这篇文章除了给师弟师妹们一个解答之外。也是给自己的一种总结：让自己的知识显性化，有所积淀，有所运用与传承。</p>
<h3>什么是交互设计？</h3>
<blockquote><p>交互设计，又称互动设计，(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the &#8220;interaction&#8221;,即人工制品在特定场景下的反应方式)相关的界面。</p>
<p><span style="color: #808080;">——维基百科</span></p></blockquote>
<p>相比用学术的语句描述，我更喜欢通过它要达到的目的来解释交互设计：帮助用户<strong>高效</strong>的完成产品所<strong>设想的任务</strong>，同时在这个过程中，能让用户感觉到<strong>愉悦</strong>和<strong>不受打扰</strong>。</p>
<p><a title="快餐店的交互设计 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5342746453/"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" src="http://98.136.170.121/5206/5342746453_5ba74e53fe.jpg" alt="快餐店的交互设计" width="500" height="336" /></a></p>
<p style="text-align: center;"><span style="color: #808080; font-size: x-small;">KFC快餐店实景——注意观察凳子和礼物</span></p>
<p>我将使用常见的KFC，麦当劳等快餐店的真实案例，去解释我自己的定义，我觉得这是最直观的：</p>
<p><span id="more-380"></span></p>
<p><strong>高效：</strong>经常性的，你能点的就是那几个套餐，省去了你自己配餐选择迟疑的麻烦。从点餐到拿到食物，至多需要3分钟。即使需要你等，也会出示牌号给你，稍后给你送去。快，准，方便。</p>
<p><strong>产品所设想的任务：</strong>只要你一进门，服务员就会提示你点餐，餐桌布局狭小紧凑，凳子不可移动，故意让你坐得不舒服。使用暖色的灯光，播放快节奏的歌曲，扩充你的食欲。他们所设想的任务是什么？让你赶紧吃完走人。（其实你也是抱着这个目的而来的）而不是让你慢悠悠的享受这顿美食。</p>
<p><strong>愉悦：</strong>从装修布局上，快餐店都非常的干净整洁，颜色明亮鲜艳。服务员总是那么热心，礼貌；点餐说不定还能收获个礼物。你说，你能不高兴么？</p>
<p><strong>不受打扰：</strong>不管你是等人，蹭厕所还是真的吃饭，服务员都不会主动打扰你（除非你主动呼叫），除了点餐时你需要说点什么之外，你无需再说点什么即可吃完走人。</p>
<h3>为什么需要交互设计？</h3>
<p>那么结论就很清晰直白了：交互设计能使用取巧，聪明的方法，让用户不发觉地、无需思考、无需学习，完成你所想，并且也是他所需的目的，同时，不会引起用户的反感和愤怒。甚至他还会反过来赞赏你的产品。</p>
<p>就像快餐店那样，能够高效的让顾客达到填饱肚子的目的，并且也能导向性地让顾客赶紧吃完走人，还不会觉得自己是被催着离开，不被打扰。</p>
<p>而另外一个需要交互设计的理由是：这个世界上，满足上述目的产品<strong>太少了，甚至可以说是屈指可数</strong>，用户花费了太多的时间在寻找一个合适的好的产品。</p>
<p>这是为什么呢？李笑来曾在自己的文章“<a href="http://www.lixiaolai.com/index.php/archives/10056.html">为什么要格外努力？</a>”这样说道：</p>
<blockquote><p>这世界有很多的事情之间不是简单的线性关系。</p>
<p>有个残酷的例子可供参考。让我们看看所谓的“剩女”是怎样剩下的呢？大抵上，她们都觉得自己的要求并不高：受教育程度不能太低吧？人长得不能太难看吧？个头不能太矮吧？岁数不能太大吧？怎么也得有点钱吧？人怎么也得有点幽默感吧？……确实，每个条件看起来都不高，基本上都只是中上等水平而已……可问题在于，每次都是三个人里只有一个人能够满足条件的话，前后已经六个条件，那么分子是1，分母是3的6次方，即，1/729，也就是说，从纯粹概率的角度出发，她要能够接触到729个男人才可能遇到1个所有条件都满足的……</p></blockquote>
<p>那么，同时满足“<strong>有饭+有肉+有青菜+食物新鲜无毒+价格公道+点餐方便+口味适中+店面干净整洁+有厕所+有空调与暖气+服务员态度好+不用走太远</strong>”这些看起来都是吃饭的普通需求的中式快餐店，又有多少呢？</p>
<p><a title="真功夫" href="http://www.flickr.com/photos/41128764@N02/5346171808/"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" src="http://98.136.170.121/5241/5346171808_1b884b001a.jpg" border="0" alt="真功夫" hspace="0" /></a></p>
<p style="text-align: center;"><span style="color: #808080; font-size: x-small;">真功夫快餐店没有厕所，成为很多人拒绝真功夫的理由。</span></p>
<p>因此，为了让你的产品得到用户的满意和忠诚；为了你的产品得到更多的盈利，你需要交互设计让你的产品出类拔萃。并且，你无需担心有人走在你前头，无需担心你的竞争对手多如牛毛，你应该专注于满足用户需求，用交互设计的方法，让你后来居上。</p>
<h3>交互设计师在团队中的位置？</h3>
<p>伴随着工业技术的发展，个人平均能接触到的日用品也越来越多，人们不停的因为难用的工业产品而浪费时间，影响情绪，于是，以用户为中心等理论也相应的产生了。它的来源是业设计和人机工程学，简单地说：设计师应该使产品适合于人使用，而不是让人习惯产品。</p>
<p>工业设计师（如汽车，家电）谨记这个优良传统，软件设计师，网页设计师们却抛之脑后，几十年来，他们使软件和网页能够在电脑上正常使用与显示，但用户却没法使用他们完成任务。</p>
<p>而在国内，大家所常讨论的交互设计师，一般指的是互联网产品设计团队当中的交互设计师。</p>
<p><a title="一个普通的设计流程" href="http://www.flickr.com/photos/41128764@N02/5348594809/"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" src="http://98.136.170.121/5207/5348594809_bd262106d9.jpg" border="0" alt="一个普通的设计流程" hspace="0" /></a></p>
<p style="text-align: center;"><span style="color: #808080; font-size: x-small;">一个普通的互联网产品设计流程</span></p>
<p>罗马不是一天建成的，好的产品也不是单靠设计师能搞掂的。所以，一般开发队伍中，是包含几个单独的小组共同合作。如下：</p>
<ul>
<li><strong>产品小组：</strong>主要负责产品需求定义，策略，运营，推广等工作。代表角色是产品经理。</li>
<li><strong>设计小组：</strong>主要负责产品界面的交互性，视觉外观，以及网页前端的相关的工作，如有必要，还有负责可用性测试和用户研究的工作。代表角色是交互设计师。</li>
<li><strong>程序员小组：</strong>他们大部分工作在于做着设计师的所难以理解的敲代码的工作，但是他们是开发队伍的核心。代表角色是项目经理。</li>
<li><strong>测试小组：</strong>主要是测试产品的逻辑上或者是极限状态下的bug和不足。提供给程序员小组或者设计小组修改。</li>
</ul>
<p>那么，我们看到，交互设计师实际上已经成为开发队伍中不可或缺且始终贯穿开发进度的核心角色：</p>
<ol>
<li>在需求定义时，交互设计师需要需要借助用研的力量参与进来，确保这个产品是能够满足具体用户某种特定期望的。</li>
<li>在设计阶段，交互设计师需要通过制作原型的方式，让产品的样子显性化，让产品能够高效的完成任务。同时，你必须向视觉设计的同事提出视觉设计的需求，你还得与前端的同事讨论原型实现的可行性。并且，你还得让你的原型通过可用性测试。</li>
<li>在程序开发阶段，虽然可以暂时歇口气，但这阶段往往会出现一些影响用户高效完成任务的开发上的问题需要你参与做决策，在开发效率和体验上取得平衡。</li>
<li>在最后的测试的阶段，你得接收测试报告，并筛选出设计上的问题着手进行解决。</li>
</ol>
<p><a title="交互设计师的角色说明" href="http://www.flickr.com/photos/41128764@N02/5348685831/"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" src="http://98.136.170.121/5167/5348685831_6442f187ca.jpg" border="0" alt="交互设计师的角色说明" hspace="0" /></a></p>
<p style="text-align: center;"><span style="color: #808080; font-size: x-small;">多个阶段下交互设计时的角色说明（点击可看大图）</span></p>
<h3>交互设计师应该具备的能力？</h3>
<p>如果你仔细观察过类似的招聘启事会发觉，其实那都是描述交互设计师所应该具备的能力。尽管说得各有不同，但有几项核心能力是需要你掌握的，至于其他，只是加分点，而且加分点则各有差异。</p>
<h4>一.丰富的互联网产品体验经验，敏锐的观察力。</h4>
<p>如果你要做一个浏览器，你必须得成为浏览器的体验专家，你得没日没夜的去了解每个浏览器的操作交互性差异，他们的功能更新进度。而且，你最好类似<a href="http://www.flickr.com/groups/due/">这样</a>，做好总结和截图。这有利于你快速确定你要做的浏览器的差异化和竞争力所在。</p>
<h4>二.深刻理解各种平台下的交互和界面规范</h4>
<p>交互设计中有个必须达到的核心要求：<strong>标准化与一致性</strong>。当你具备这些知识，能确保你在设计之初，就站在巨人的肩膀上，你的设计稿表现得有章法和准则。</p>
<p>通过这些规范的运用，也能够帮助你创新的，建立自己的设计规范。</p>
<h4>三.打不死的小强精神以及强大的沟通能力</h4>
<p>你需要在开发过程中，不断像整个队伍广播你的设计理念，不断的回答同事或BOSS的质疑。你还必须具备持续的沟通精神说服产品经理更加照顾用户需求，说服别人认可你的设计方案。如果没有这些能力，无论你的设计稿如何优秀，最后产品的成型极有可能是一个低档货色。</p>
<h4>四.剩下的加分点</h4>
<p>有视觉能力、文档写得好、懂得时间管理、和设计进度管理与跟踪、具有程序员背景……这些都是能让你加分的地方。但是，仅仅是加分而已，并不能决定你就是一个优秀的交互设计师。</p>
<h3>这个职业的生存如何？</h3>
<p>交互设计师通常遇到的一个问题是：如何与产品经理相处？并且，网上这样的讨论还不少。如：<a href="http://www.zhangyq.com/ambiguous-relationship-between-the-product-manager-and-interaction-designer/">关系暧昧的“交互设计师”与“产品经理”</a>。</p>
<p>某些公司为了省去他们两者相互扯蛋麻烦，所以就省去产品经理，只有产品设计师而已。从目前看，这或许是个不错的方法。</p>
<p>但从长远看，随着设计工作日益负责，更多的设计分工的职业将会出现。如：用户体验工程师。</p>
<p>从很多人认为的晋升空间上看，随着你工作的日益熟练。在职业转型时，你存在产品经理，设计经理，视觉设计，甚至是用户研究工程师多种方向。</p>
<p>所以总得而言：交互设计师目前仍然是一个钱多，人少，速来的职业。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/taught_me_by_work_1_about_interaction_design.html/feed</wfw:commentRss>
		<slash:comments>802</slash:comments>
		</item>
		<item>
		<title>产品之高峰体验</title>
		<link>http://www.userkon.com/tolyer/peak_experience.html</link>
		<comments>http://www.userkon.com/tolyer/peak_experience.html#comments</comments>
		<pubDate>Sat, 11 Dec 2010 09:54:05 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[高峰体验]]></category>

		<guid isPermaLink="false">http://www.userkon.com/tolyer/peak_experience.html</guid>
		<description><![CDATA[这是学生时代写的一篇旧文，最近突然对此有了新的理解，决定重新所以又拿出来炒一次冷饭，顺便也增加一些新的体会。 高峰体验 ，这是在《情感化设计》中提到的一个名词，Norman并没有明确说他所认为的高峰体验，我个人的理解是：“用户使用产品心理上达到高度愉悦的满足感。 ”但是他说出了高峰体验所具备的条件： 没有分心的事物。 一个节奏恰好匹配你的活动,并且略微在你能力之上。 难度水平在能力的边缘上。 在之前的时间段我认为，高峰体验也许只会在游戏中出现，因此我还特地分析了Dota这个游戏针对不同水平的用户都有对应的高峰体验设计。 新手玩家——补刀；装备；保命；升级； 中级玩家——快捷键；地图；神符；英雄； 高级玩家:——策略；合作；反应；&#160; 但我却从未认为，高峰体验可以在其他产品中出现，因为肯定没有产品设计师想让自己的产品“难度水平在能力边缘”。 但依然我也依然困扰着，为什么依然有一些产品的体验与高峰体验类似相同，能够得到用户的口碑赞扬和高度的忠诚度。但是下面这个笑话释疑了我。 少妇报案：“我把钱放在胸衣内，在拥挤的地铁内被一帅哥偷走了…”警察纳闷：“这么敏感的地方你就没觉察到？”少妇红着脸答：“谁能想到他是摸钱呢？”—— 让客户的钱在愉快体验中不知不觉地被摸走，是商业模式的最高境界，苹果公司做到了！ 我意识到，高峰体验的关键并不是强调难度在能力边缘。而是，让用户觉得物超所值。让用户觉得，他投入的成本“操作成本，金钱成本，时间成本”，与他最后所获得的愉悦感相比，是超值的。所以，这也解释了下面这张图。 那么如何让用户做得超值？你可以这么吆喝“奇妙与革命性的产品，令人难以致信的价格。”或者是真真正正的让你的产品达到物超所值的的状态。这可从俩方面入手：降低成本，或提高为用户创造的价值。 那么以下则是我个人认为的关于高峰体验的观点，仅供参考。 1.先考虑你能给用户带来的价值，然后打个一折，算做你向用户要求的成本 这是一种高峰体验的最粗暴最直接，也是最简单，最有效的方法。因为每个人都知道，一分钱一分货。若用户的一分钱能够实质的在你这里购买到更好的服务和商品，无疑用户是满意的。因为，这是在减少用户的操作和金钱成本。 所谓的秒杀，限时抢购，团购，基本上也就是使用这种伎俩。或者说，用户同样的付出，你能提供更多的容量，更快达到期望的速度，让用户少点几次鼠标，少安装点插件，那么你也做到了高峰体验。 2.先只做一件事情，一定得是一件事，并且要做好，一定要做好 任何产品都应该专注于它的主任务，并且主任务必须只有一个，且主任务是可以用一句话清晰的描述的。相比其他成本而言，用户的时间成本是最宝贵的，过多的分支任务会让用户花费过多的时间理解他们，并且在执行主任务的时候，容易迷失。 如果你的主任务，做得高效，那么这也是减少时间成本的一种途径。 3.可以把门槛定得很高很高，但是不能唠唠叨叨或者调胃口 也许有些功能加上去，有可能会让你的产品很酷，但是你不能保证很多人喜欢他。在你犹豫之时，或许你会考虑，多给用户增加一个选项，把选择权交给用户。 但实际上我得建议您别这么做，当你开车在高速路上，你会喜欢被拦住询问“旁边的那条路更加快哦？要不要试试”吗？当然不是。 这个问题的含义是，如果有自信，你可以把门槛定得很高很高，但是，一旦用户爬上了这个门槛，你应该尽量避免向用户索要任何的成本，即使这个成本最后可能换来巨大的价值。 高峰体验，我想一直都属于许多产品设计师对自己产品的一种要求。但实际上要达到这种效果，任重而道远。不是因为你要付出很多去增加功能，而是因为你要付出很多去拒绝增加功能。 总的来说，作为任何一个产品，满足前面两点要求。才算是一个基本的合格的体验产品。]]></description>
			<content:encoded><![CDATA[<p>这是学生时代写的一篇旧文，最近突然对此有了新的理解，决定重新所以又拿出来炒一次冷饭，顺便也增加一些新的体会。</p>
<p><a href="http://baike.baidu.com/view/36539.htm">高峰体验</a> ，这是在《情感化设计》中提到的一个名词，Norman并没有明确说他所认为的高峰体验，我个人的理解是：“<strong>用户使用产品心理上达到高度愉悦的满足感。</strong> ”但是他说出了高峰体验所具备的条件：</p>
<ol>
<li>没有分心的事物。 </li>
<li>一个节奏恰好匹配你的活动,并且略微在你能力之上。 </li>
<li>难度水平在能力的边缘上。 </li>
</ol>
<p>在之前的时间段我认为，高峰体验也许只会在游戏中出现，因此我还特地分析了Dota这个游戏针对不同水平的用户都有对应的高峰体验设计。</p>
<ol>
<li>新手玩家——补刀；装备；保命；升级； </li>
<li>中级玩家——快捷键；地图；神符；英雄； </li>
<li>高级玩家:——策略；合作；反应；&#160; </li>
</ol>
<p>但我却从未认为，高峰体验可以在其他产品中出现，因为肯定没有产品设计师想让自己的产品“<strong>难度水平在能力边缘</strong>”。</p>
<p> <span id="more-360"></span>
<p>但依然我也依然困扰着，为什么依然有一些产品的体验与高峰体验类似相同，能够得到用户的口碑赞扬和高度的忠诚度。但是下面这个笑话释疑了我。</p>
<blockquote><p>少妇报案：“我把钱放在胸衣内，在拥挤的地铁内被一帅哥偷走了…”警察纳闷：“这么敏感的地方你就没觉察到？”少妇红着脸答：“谁能想到他是摸钱呢？”—— 让客户的钱在愉快体验中不知不觉地被摸走，是商业模式的最高境界，苹果公司做到了！</p>
</blockquote>
<p>我意识到，高峰体验的关键并不是强调难度在能力边缘。而是，让用户觉得物超所值。让用户觉得，他投入的成本“操作成本，金钱成本，时间成本”，与他最后所获得的愉悦感相比，是超值的。所以，这也解释了下面这张图。</p>
<p><a title="全世界最烧钱的按钮" href="http://www.flickr.com/photos/41128764@N02/5250378671/"><img border="0" hspace="0" alt="全世界最烧钱的按钮" src="http://98.136.170.121/5284/5250378671_6c9a45bac7.jpg" /></a></p>
<p>那么如何让用户做得超值？你可以这么吆喝“<a href="http://www.apple.com.cn/ipad/">奇妙与革命性的产品，令人难以致信的价格。</a>”或者是真真正正的让你的产品达到物超所值的的状态。这可从俩方面入手：降低成本，或提高为用户创造的价值。</p>
<p>那么以下则是我个人认为的关于高峰体验的观点，仅供参考。</p>
<h4>1.先考虑你能给用户带来的价值，然后打个一折，算做你向用户要求的成本</h4>
<p>这是一种高峰体验的最粗暴最直接，也是最简单，最有效的方法。因为每个人都知道，一分钱一分货。若用户的一分钱能够实质的在你这里购买到更好的服务和商品，无疑用户是满意的。因为，这是在减少用户的操作和金钱成本。</p>
<p>所谓的秒杀，限时抢购，团购，基本上也就是使用这种伎俩。或者说，用户同样的付出，你能提供更多的容量，更快达到期望的速度，让用户少点几次鼠标，少安装点插件，那么你也做到了高峰体验。</p>
<h4>2.先只做一件事情，一定得是一件事，并且要做好，一定要做好</h4>
<p>任何产品都应该专注于它的主任务，并且主任务必须只有一个，且主任务是可以用一句话清晰的描述的。相比其他成本而言，用户的时间成本是最宝贵的，过多的分支任务会让用户花费过多的时间理解他们，并且在执行主任务的时候，容易迷失。</p>
<p>如果你的主任务，做得高效，那么这也是减少时间成本的一种途径。</p>
<h4>3.可以把门槛定得很高很高，但是不能唠唠叨叨或者调胃口</h4>
<p>也许有些功能加上去，有可能会让你的产品很酷，但是你不能保证很多人喜欢他。在你犹豫之时，或许你会考虑，多给用户增加一个选项，把选择权交给用户。</p>
<p>但实际上我得建议您别这么做，当你开车在高速路上，你会喜欢被拦住询问“旁边的那条路更加快哦？要不要试试”吗？当然不是。</p>
<p>这个问题的含义是，如果有自信，你可以把门槛定得很高很高，但是，一旦用户爬上了这个门槛，你应该尽量避免向用户索要任何的成本，即使这个成本最后可能换来巨大的价值。</p>
<p>高峰体验，我想一直都属于许多产品设计师对自己产品的一种要求。但实际上要达到这种效果，任重而道远。不是因为你要付出很多去增加功能，而是因为你要付出很多去拒绝增加功能。</p>
<p>总的来说，作为任何一个产品，满足前面两点要求。才算是一个基本的合格的体验产品。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/peak_experience.html/feed</wfw:commentRss>
		<slash:comments>68</slash:comments>
		</item>
		<item>
		<title>在线应用窗口一致化分析</title>
		<link>http://www.userkon.com/tolyer/make_online_app_windows_standard.html</link>
		<comments>http://www.userkon.com/tolyer/make_online_app_windows_standard.html#comments</comments>
		<pubDate>Tue, 07 Sep 2010 15:12:34 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[dailog]]></category>
		<category><![CDATA[moudel]]></category>

		<guid isPermaLink="false">http://www.userkon.com/tolyer/%e5%9c%a8%e7%ba%bf%e5%ba%94%e7%94%a8%e7%aa%97%e5%8f%a3%e4%b8%80%e8%87%b4%e5%8c%96%e5%88%86%e6%9e%90.html</guid>
		<description><![CDATA[虽说互联网的革命总觉得势不可挡，大家都期待着，某一天，只需要一个浏览器，就可以完成平常用客户端才能完成的任务。虽然，HTML5与Chrome一度让我们看到浏览器代替操作系统的希望（via 1，2，3，4，5），但目前来看，用户同时保持两种平台的使用的状况，要持续很长一段时间。 想让用户无缝地从客户端应用转移到在线应用，我们还面临很多问题。 从逻辑上说，在线应用属于操作系统中浏览器客户端应用内运行的一套程序，很多交互上依然还是要依赖上层应用（浏览器客户端），这就如同在Mac OS内跑一个Windows的虚拟机的那种差别。 这样的环境，就给在线应用带来一个很严重且无法避免的问题：体验不一致。在线应用没法提供和客户端应用一样的体验环境，用户如果如果想好好使用在线应用，得需要重新学一次，成本过高。尤其是对于那些生产力应用，而这种不一致，无疑是致命的打击。 生产力应用指的是可以完成那些对具体信息的组织与处理的任务。用户通过生产力应用可以创造并处理信息。比如Outlook，Photoshop，Word，AutoCAD。 这些体验的不一致在UI上的表现主要包括以下几点： 键盘快捷键 ——只有少部分在线应用支持快捷键，这些快捷键难以发现且不支持复杂的组合。 鼠标右键 —— 只有少部分在线应用支持，而且无法和浏览器右键菜单并存。（新版Flickr的交叉显示做法不错。） 信息交换 —— 把本地照片拖进Photoshop内即可打开，把Flickr照片能拖进Photoshop.com内编辑吗？ 如有其他，欢迎补充。但我个人认为，最大的不一致，是在于页面的渐进变化，窗口深度变化以及模态化转变。因为这种不一致，用户很容易就在一个在线应用中迷失而困惑，因此，“首页”链接成为点击最高，最救火的链接。 观察一：多样的对话 在浏览器中，用户一共会遇到4种类型的对话窗口，分别是： 浏览器对话框——由浏览器驱动的对话框窗口，模态对话框（相对于浏览器，Opera除外。）如下图左上角，删除对话框。 内建对话框——由在线应用提供的对话框窗口，如下图左下角，为QQ邮箱写信提示，模态（只相对于当前浏览器标签页内。） 小弹窗——非模态的小浏览器窗口，用于完成一些在线应用的子任务。如下图中部，为Gmail添加其他邮箱帐号的小弹窗。 通用对话框——由操作系统所提供的模态窗口，如上传文件，保存文件，指定文件夹等对话框。 了解更多对话框的分类，请参考Windows user Experience Interaction Guildelines &#62; windows 观察二：页面的流动差异化 同样的页面，即使他们的功能与内容相同，但在客户端与在线应用，也存在着较大的差异。 客户端中，使用窗口的模态叠加，给予用户导航，同时，Windows平台还提供了任务栏，帮助用户管理自己的窗口。对于用户而言，后退至上一步，只需关闭当前窗口，返回操作流程的原点，清除掉任务栏的窗口的占位即好。 在在线应用内，由于窗口的模态叠加存在实现难度，而且效果也不佳。同时，也不会有任务栏这样的控件去管理用户在网页端内的窗口（Firefox Panorama也不过是对浏览器的标签管理提供了解决方案而已），即使存在面包屑与导航，也难以避免导航迷失，用户难以在页面中快速找到准确的后退路径，不得不直接选择“回到首页”的方式，快速逃离。 窗口和页面流动 上图看起来比较复杂，但通过窗口的叠加，有效的记录到了用户的整个操作流程。用户在回退时，都可以采用点击窗口的X，或者Cancel退回上一步。 而对于在线应用，虽然有面包屑，但是他表现的不是用户操作流程，而是信息的分类。 页面模态的差异化 同样的内容（设置），在客户端内，使用模态的对话框，并且会新开一个窗口；而在线应用中，这就变成非模态了，且不会新开窗口。 &#8230; <a href="http://www.userkon.com/tolyer/make_online_app_windows_standard.html">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>虽说互联网的革命总觉得势不可挡，大家都期待着，某一天，只需要一个浏览器，就可以完成平常用客户端才能完成的任务。虽然，HTML5与Chrome一度让我们看到浏览器代替操作系统的希望（via <a title="几个炫丽又强大HTML 5应用" href="http://imtx.cn/archives/1422.html">1</a>，<a title="Windows 版 Chromium 已经可以试用 Chrome OS 的 app launcher" href="http://www.google.org.cn/posts/play-with-the-google-chrome-os-app-launcher-on-latest-windows-chromium-builds.html">2</a>，<a title="Chrome OS 的终极打印解决方案——云打印" href="http://www.google.org.cn/posts/googles-plan-to-give-chrome-os-universal-printer-support.html">3</a>，<a title="开发中的 Chrome OS 小窥" href="http://www.google.org.cn/posts/chrome-os-adding-polish-june-2010.html">4</a>，<a title="Google 开放 Chrome 桌面提醒 API" href="http://www.google.org.cn/posts/desktop-notifications-now-available-to-extensions-in-chrome.html">5</a>），但目前来看，用户同时保持两种平台的使用的状况，要持续很长一段时间。</p>
<p>想让用户无缝地从客户端应用转移到在线应用，我们还面临很多问题。</p>
<p>从逻辑上说，在线应用属于操作系统中浏览器客户端应用内运行的一套程序，很多交互上依然还是要依赖上层应用（浏览器客户端），这就如同在Mac OS内跑一个Windows的虚拟机的那种差别。</p>
<p>这样的环境，就给在线应用带来一个很严重且无法避免的问题：<strong>体验不一致。</strong>在线应用没法提供和客户端应用一样的体验环境，用户如果如果想好好使用在线应用，得需要重新学一次，成本过高。尤其是对于那些生产力应用，而这种不一致，无疑是致命的打击。</p>
<blockquote><p>生产力应用指的是可以完成那些对具体信息的组织与处理的任务。用户通过生产力应用可以创造并处理信息。比如Outlook，Photoshop，Word，AutoCAD。</p>
</blockquote>
<p>这些体验的不一致在UI上的表现主要包括以下几点：</p>
<ol>
<li><strong>键盘快捷键 ——</strong>只有少部分在线应用支持快捷键，这些快捷键难以发现且不支持复杂的组合。 </li>
<li><strong>鼠标右键 —— </strong>只有少部分在线应用支持，而且无法和浏览器右键菜单并存。（新版Flickr的交叉显示做法不错。） </li>
<li><strong>信息交换 —— </strong>把本地照片拖进Photoshop内即可打开，把Flickr照片能拖进Photoshop.com内编辑吗？ </li>
</ol>
<p> <span id="more-354"></span>
<p>如有其他，欢迎补充。但我个人认为，最大的不一致，是在于页面的渐进变化，窗口深度变化以及模态化转变。因为这种不一致，用户很容易就在一个在线应用中迷失而困惑，因此，“首页”链接成为点击最高，最救火的链接。</p>
<h3>观察一：多样的对话</h3>
<p>在浏览器中，用户一共会遇到4种类型的对话窗口，分别是：</p>
<ol>
<li><strong>浏览器对话框</strong>——由浏览器驱动的对话框窗口，模态对话框（相对于浏览器，Opera除外。）如下图左上角，删除对话框。 </li>
<li><strong>内建对话框</strong>——由在线应用提供的对话框窗口，如下图左下角，为QQ邮箱写信提示，模态（只相对于当前浏览器标签页内。） </li>
<li><strong>小弹窗</strong>——非模态的小浏览器窗口，用于完成一些在线应用的子任务。如下图中部，为Gmail添加其他邮箱帐号的小弹窗。 </li>
<li><strong>通用对话框</strong>——由操作系统所提供的模态窗口，如上传文件，保存文件，指定文件夹等对话框。 </li>
</ol>
<p>了解更多对话框的分类，请参考<a href="http://msdn.microsoft.com/en-us/library/aa511258.aspx">Windows user Experience Interaction Guildelines</a> &gt; <a href="http://www.google.org.cn/posts/long-lived-new-windows.html">windows</a></p>
<p><a title="四种对话框 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4907660378/"><img style="display: block; float: none; margin-left: auto; margin-right: auto" alt="四种对话框" src="http://67.195.19.74/4143/4907660378_ab1bdef5de.jpg" width="500" height="118" /></a></p>
<h3>观察二：页面的流动差异化</h3>
<p>同样的页面，即使他们的功能与内容相同，但在客户端与在线应用，也存在着较大的差异。</p>
<p>客户端中，使用窗口的模态叠加，给予用户导航，同时，Windows平台还<strong>提供了任务栏，帮助用户管理自己的窗口</strong>。对于用户而言，后退至上一步，只需关闭当前窗口，返回操作流程的原点，清除掉任务栏的窗口的占位即好。</p>
<p>在在线应用内，由于窗口的模态叠加存在实现难度，而且效果也不佳。同时，也不会有任务栏这样的控件去管理用户在网页端内的窗口（<a title="[youtube,请翻墙]Firefox Panorama" href="http://www.youtube.com/watch?v=5r0TQJ-gGi0">Firefox Panorama</a>也不过是对浏览器的标签管理提供了解决方案而已），即使存在面包屑与导航，也难以避免导航迷失，用户难以在页面中快速找到准确的后退路径，不得不直接选择“回到首页”的方式，快速逃离。</p>
<h4>窗口和页面流动</h4>
<p><a title="客户端通过窗口的叠加记录用户操作流程 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4957631338/"><img style="display: block; float: none; margin-left: auto; margin-right: auto" alt="客户端通过窗口的叠加记录用户操作流程" src="http://67.195.19.74/4143/4957631338_e65398fe42.jpg" width="500" height="373" /></a></p>
<p>上图看起来比较复杂，但通过窗口的叠加，有效的记录到了用户的整个操作流程。用户在回退时，都可以采用点击窗口的X，或者Cancel退回上一步。</p>
<p><a title="面包屑只表现站点分类逻辑 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4957282016/"><img style="display: block; float: none; margin-left: auto; margin-right: auto" alt="面包屑只表现站点分类逻辑" src="http://67.195.19.74/4100/4957282016_072547cac3.jpg" width="471" height="115" /></a></p>
<p>而对于在线应用，虽然有面包屑，但是他表现的不是用户操作流程，而是信息的分类。</p>
<h4>页面模态的差异化</h4>
<p><a title="客户端与网页端窗口模态化对比 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4957616492/"><img style="display: block; float: none; margin-left: auto; margin-right: auto" alt="客户端与网页端窗口模态化对比" src="http://67.195.19.74/4109/4957616492_6ab7311a66.jpg" width="500" height="500" /></a></p>
<p>同样的内容（设置），在客户端内，使用模态的对话框，并且会新开一个窗口；而在线应用中，这就变成非模态了，且不会新开窗口。</p>
<h4>网页端后退操作行为过多<a title="淘宝导航 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4957057375/"><img style="display: block; float: none; margin-left: auto; margin-right: auto" title="其实点击这些上面的链接，都是在新窗口打开内容" alt="其实点击这些上面的链接，都是在新窗口打开内容" src="http://67.195.19.74/4089/4957057375_efa662898c.jpg" width="500" height="39" /></a></h4>
<p>网页上的元素五花八门，在未点击之前，你根本不知道下一步会怎样，也许是新开窗口，也许是一个内建对话框，也许是一个小弹窗，也许是一个浏览器对话框。而且，存在与一些容易误导用户的视觉元素：如上图，虽然看起来是选项卡的外观，让我很容易以为点击之后，我将继续保留在这个页面内，而事实上我都会<strong>跳到一个新窗口</strong>。</p>
<p>并且在线应用内，你可以通过多种的方式后退，关闭内建对话框，关闭小弹窗，关闭新标签窗口，点击浏览器后退导航按钮。</p>
<p>在客户端，永远只有一种，点击X按钮。</p>
<h3>网页端体验案例讨论</h3>
<p>10大可用性准则中，其中就包括的两点：<strong>给予用户控制权</strong>；<strong>一致性与标准化</strong>。但在线应用中，很多时候，却不得不面临两难的情况。</p>
<p>我将对比在相同的功能中，网易邮箱与QQ邮箱的设计对比，来表现这个问题。</p>
<p>在QQ邮箱内，如果需要彻底删除一封邮件，将有对话框让用户进行再确认。这是一个浏览器对话框。</p>
<p><a title="QQ邮箱彻底删除邮件对话框 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4964067316/"><img style="display: block; float: none; margin-left: auto; margin-right: auto" alt="QQ邮箱彻底删除邮件对话框" src="http://67.195.19.74/4092/4964067316_f50f4b6a11.jpg" width="381" height="139" /></a></p>
<p><a title="QQ邮箱删除对话框 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4967124136/"><img style="display: block; float: none; margin-left: auto; margin-right: auto" alt="QQ邮箱删除对话框" src="http://67.195.19.74/4151/4967124136_b33b00f6a2.jpg" width="500" height="214" /></a></p>
<p>问题出现了，虽然这个对话框只是针对当前标签页，可它相对于浏览器而言，是模态的，你无法切换到浏览器其他标签内。<strong>限制了用户的控制权</strong>，且它的外观，难以和邮箱内建对话框取得统一，如果是MAC系统的话，OK按钮在还会出现在对话框最右下角的位置。操作体验不一致。</p>
<p><a title="网易邮箱删除邮件对话框 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4964170706/"><img style="display: block; float: none; margin-left: auto; margin-right: auto" alt="网易邮箱删除邮件对话框" src="http://67.195.19.74/4132/4964170706_480fe83dda.jpg" width="460" height="164" /></a></p>
<p>网易邮箱则使用了内建对话框，看似是解决了问题，但实际上并未：</p>
<p><a title="网易邮箱对话框 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4964278286/"><img style="display: block; float: none; margin-left: auto; margin-right: auto" alt="网易邮箱对话框" src="http://67.195.19.74/4131/4964278286_a7d07dcbcf.jpg" width="491" height="401" /></a></p>
<p><a title="QQ邮箱对话框 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4963676965/"><img style="display: block; float: none; margin-left: auto; margin-right: auto" alt="QQ邮箱对话框" src="http://67.195.19.74/4129/4963676965_bc9ee7408d.jpg" width="500" height="372" /></a></p>
<p>在面临当前页面已经存在内建对话框的状况下，当需要再确认的时候，网易邮箱和QQ邮箱同样采用了模态的浏览器对话框。显然，网易邮箱违背了原来的对话框视觉规范。</p>
<p>但这是一个无奈之举，如果同样使用内建对话框，用户在视觉外观上，很难对两个对话框的从属关系作出即时的判断。</p>
<p>由于目前，在网页端，虽然在前端代码内有HTML5的规范启用，但在设计上，却没有类似<a title="Windows User Experience Interaction Guidelines" href="http://msdn.microsoft.com/en-us/library/aa511258.aspx">Windows User Experience Interaction Guidelines</a> 或者是<a title="Apple Human Interface Guidelines" href="http://developer.apple.com/mac/library/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIntro/XHIGIntro.html">Apple Human Interaction Guildlines</a> 这样的规范给设计师提供标榜和准则。这就直接导致，在线应用的窗口设计上，一致性是一个难以解决的问题，用户就会遇到很多奇奇怪怪的体验。</p>
<h3>探讨解决办法 </h3>
<p>虽然在线应用从长期看来，将最终在用户界面方面，将完美替代软件客户端。但是目前我们依然还处在，在线应用与客户端并行的状况。但是，我们也欣喜的看到，一些在线应用的设计，已经能够解决这些问题了。或许，他们将引领，在线应用的下一代的窗口设计：</p>
<p><a title="select sync folder in Windows Live Sync by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4967208897/"><img style="display: block; float: none; margin-left: auto; margin-right: auto" alt="select sync folder in Windows Live Sync" src="http://67.195.19.74/4129/4967208897_af0c2828f3.jpg" width="500" height="350" /></a></p>
<p>如果用户安装了silverlight，那么，在Live Sync中，用户即可直接在当前网页内，选择用户本地计算机的文件夹，取代了传统的弹出一个模态对话框的方式。不打扰用户切换至其他浏览器标签页。</p>
<p><a title="Gmail Feedback by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4967825016/"><img style="display: block; float: none; margin-left: auto; margin-right: auto" alt="Gmail Feedback" src="http://67.195.19.74/4151/4967825016_244db21fe2.jpg" width="500" height="106" /></a></p>
<p>Gmail同样使用了非常具有特色的设计方法，Gmail已经完全避免了使用模态的浏览器对话框，取而代之的是，Gmail不再确认用户的危险操作，但是提供后退入口。</p>
<p>另外Gmail还提供了<a href="http://www.google.org.cn/posts/long-lived-new-windows.html">“多线程”的体验</a>，取消了窗口的模态关系。</p>
<h3>小结</h3>
<p>从这些案例我们可以大致看出以后在线应用的窗口设计的一些趋势：</p>
<ol>
<li><strong>模态化的对话框将减少</strong> <font color="#808080">—— 因为他阻碍用户的控制权，且影响一致性。</font> </li>
<li><strong>窗口结构将变得扁平化</strong> <font color="#808080">—— 在线应用的不会像客户端那样，窗口相互之间有严谨的从属关系，整体数量多。在线应用会只有一个核心的页面，这些页面涵括了在线应用的大部分的操作界面。</font> </li>
<li><strong>即地化的反馈和操作成为主流</strong> <font color="#808080">—— 客户端中原有的，编辑内容-》保存-》查看结果的流程，在网页端将会变得更加精简与方便，因为在线应用可以方便的即时变化当前页面，给予用户反馈。</font> </li>
</ol>
<p>无论如何，在线应用已经距离我们越来越近了，也许我们真的只需要一个浏览器，就可以完成很多的任务。不论如何，在目前在线应用设计中无通用规范与合理的解决方案中，上诉说法只是做简单的研究与分析，无法得出具体解决方案。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/make_online_app_windows_standard.html/feed</wfw:commentRss>
		<slash:comments>686</slash:comments>
		</item>
		<item>
		<title>何处安放的Loading</title>
		<link>http://www.userkon.com/tolyer/about_loading.html</link>
		<comments>http://www.userkon.com/tolyer/about_loading.html#comments</comments>
		<pubDate>Sat, 15 May 2010 16:40:00 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[Loading]]></category>

		<guid isPermaLink="false">http://www.userkon.com/tolyer/about_loading.html</guid>
		<description><![CDATA[可用性研究表明，当响应时间超过一秒钟时，用户便能够有所察觉。 虽然在反馈系统中，当用户需要等待时，更好的解决方案的是应该采用确定性的进度条。但对于一些耗时短，且用户的带宽为主要影响要素时，却使用Loading这种低成本实现的反馈。 Loading图标的历史来源已经无法考究(据传是苹果最先使用)，但是，它的动态效果，在视觉上刚好是一个重复循环的“风火轮”。非常适合做不确定等待时间的进度反馈。 Loading的主要作用，在于提供反馈给用户表示当前状态，并且让用户的命令的执行和完成过渡得更加平滑。从这种角度上说，它和很多流动式反馈没有多大区别，如MAC系统中窗口最小化的渐进动画。 Loading的图标仅仅在web应用当中产生，而在客户端中，则较少使用，因为鼠标手型能够代替它的工作。 但是对比客户端，web端的Loading反馈可控性更好，创意也更加。如以下几种： 那么在设计中，如何放置Loading图标，也应该有所章法。但是无论如何放置，都有一个规则：确保用户可以注意到。 1.靠近点击区域 靠近点击区域，能够让你的Loading反馈得到最直接的呈现，也最利于被注意到。如果能配合按钮的Enabled与Disabled状态的切换，这是很好的反馈。 2.位于内容刷新区域上层 当用户选择刷新页面内某块区域内内容时，其视觉焦点也将聚焦于此，如果此时让Loading反馈不适合放置在点击区域，那么将其放在内容刷新区域上层，也是一个很直观的反馈。如QQ邮箱广播的评论展开区域： 但是需要注意的是，勿将Loading反馈采用模态形式，模态形式将导致用户只能等待Loading完成而无法进行其他操作，而且还有可能给用户带来损失。 如上图，如果这个Loading反馈是模态形式，当它出现时，您就无法点击页面内其他地方，万一不走运，这个时候你网络断线，这辛苦写的日志，你就可能再也找不回来了。（注：图为Qzone发表日志截图，其Loading反馈为非模态形式） 3.固定区域 固定区域呈现，最好应该是固定在浏览器窗口某位置（要确保用户能很方便的注意到），而不是固定在页面某位置。如同Gmail一样，Loading反馈始终位于浏览器窗口顶端位置。 但也需切记，别把Loading反馈放置得离视觉焦点太远。这样很难注意到。 Loading反馈虽然是一个小部件，但其能够给用户的，却是系统可见性的有效提高，在平常的设计中，需对Loading反馈设计有所留意。 但Loading反馈不足的地方是，无法明确告知用户具体等待时间。就像拨打客服电话中被告知的“稍等片刻”一样。即使这样我们依然能做得更好，像Gmail那样。 当用户Loading了约10秒后，如果系统还在运转，那么Gmail会自动将Loading标签修改为Still Working，明确告知用户，可能还需等待一段时间。 Loading反馈在实际设计中不容忽视，尤其是在用户提交表单时，Loading反馈和各控件的连锁状态变化场景当中。忽视它的后果，将给用户带来严重的等待的焦灼感，给用户带来损失。 所以，请好好设计你们产品的Loading反馈。]]></description>
			<content:encoded><![CDATA[<p>可用性研究表明，当响应时间超过一秒钟时，用户便能够有所察觉。    <br />虽然在反馈系统中，当用户需要等待时，更好的解决方案的是应该采用确定性的进度条。但对于一些耗时短，且用户的带宽为主要影响要素时，却使用Loading这种低成本实现的反馈。</p>
<p>Loading图标的历史来源已经无法考究(据传是苹果最先使用)，但是，它的动态效果，在视觉上刚好是一个重复循环的“风火轮”。非常适合做不确定等待时间的进度反馈。</p>
<p>Loading的主要作用，在于提供反馈给用户表示当前状态，并且让用户的命令的执行和完成过渡得更加平滑。从这种角度上说，它和很多流动式反馈没有多大区别，如MAC系统中窗口最小化的渐进动画。</p>
<p>Loading的图标仅仅在web应用当中产生，而在客户端中，则较少使用，因为鼠标手型能够代替它的工作。</p>
<p>但是对比客户端，web端的Loading反馈可控性更好，创意也更加。如以下几种：</p>
<p><a href="http://www.flickr.com/photos/userkon/4614594660/" title="四种种经典Loading图标 by 优涩控, on Flickr"><img src="http://67.195.19.74/4066/4614594660_ddaea0c521_o.png" width="500" height="226" alt="四种种经典Loading图标" /></a></p>
<p>那么在设计中，如何放置Loading图标，也应该有所章法。但是无论如何放置，都有一个规则：<strong>确保用户可以注意到。</strong></p>
<p> <span id="more-321"></span><br />
<h3>1.靠近点击区域</h3>
<p>靠近点击区域，能够让你的Loading反馈得到最直接的呈现，也最利于被注意到。如果能配合按钮的Enabled与Disabled状态的切换，这是很好的反馈。</p>
<p><a title="Loading与按钮标签的结合 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4609035340/"><img height="115" alt="Loading与按钮标签的结合" src="http://69.147.90.159/1325/4609035340_d4342f0d2c_o.png" width="476" /></a></p>
<h3>2.位于内容刷新区域上层</h3>
<p>当用户选择刷新页面内某块区域内内容时，其视觉焦点也将聚焦于此，如果此时让Loading反馈不适合放置在点击区域，那么将其放在内容刷新区域上层，也是一个很直观的反馈。如QQ邮箱广播的评论展开区域：</p>
<p><a title="QQ广播中的Loading by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4608462097/"><img height="171" alt="QQ广播中的Loading" src="http://69.147.90.159/1110/4608462097_776a983343.jpg" width="500" /></a></p>
<p>但是需要注意的是，勿将Loading反馈采用模态形式，模态形式将导致用户只能等待Loading完成而无法进行其他操作，而且还有可能给用户带来损失。</p>
<p><a title="Qzone发表日志 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4609090690/"><img height="398" alt="Qzone发表日志" src="http://69.147.90.159/1365/4609090690_8662f1cb18_o.png" width="500" /></a></p>
<p>如上图，如果这个Loading反馈是模态形式，当它出现时，您就无法点击页面内其他地方，万一不走运，这个时候你网络断线，这辛苦写的日志，你就可能再也找不回来了<font color="#808080">。（注：图为Qzone发表日志截图，其Loading反馈为非模态形式） </font></p>
<h3>3.固定区域</h3>
<p>固定区域呈现，最好应该是固定在浏览器窗口某位置（要确保用户能很方便的注意到），而不是固定在页面某位置。如同Gmail一样，Loading反馈始终位于浏览器窗口顶端位置。</p>
<p><a title="Gmail中的Loading by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4608675587/"><img height="143" alt="Gmail中的Loading" src="http://67.195.19.66/3586/4608675587_d8eb713f45.jpg" width="500" /></a></p>
<p>但也需切记，别把Loading反馈放置得离视觉焦点太远。这样很难注意到。</p>
<p><a title="容易被漠视的Loading by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4609035320/"><img height="299" alt="容易被漠视的Loading" src="http://69.147.90.159/1354/4609035320_f306bf538d_o.png" width="499" /></a></p>
<p>Loading反馈虽然是一个小部件，但其能够给用户的，却是系统可见性的有效提高，在平常的设计中，需对Loading反馈设计有所留意。</p>
<p>但Loading反馈不足的地方是，无法明确告知用户具体等待时间。就像拨打客服电话中被告知的“稍等片刻”一样。即使这样我们依然能做得更好，像Gmail那样。</p>
<blockquote><p>当用户Loading了约10秒后，如果系统还在运转，那么Gmail会自动将Loading标签修改为Still Working，明确告知用户，可能还需等待一段时间。</p>
</blockquote>
<p>Loading反馈在实际设计中不容忽视，尤其是在用户提交表单时，Loading反馈和各控件的连锁状态变化场景当中。忽视它的后果，将给用户带来严重的等待的焦灼感，给用户带来损失。</p>
<p>所以，请好好设计你们产品的Loading反馈。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/about_loading.html/feed</wfw:commentRss>
		<slash:comments>627</slash:comments>
		</item>
		<item>
		<title>安慰你的用户</title>
		<link>http://www.userkon.com/tolyer/comfort_user.html</link>
		<comments>http://www.userkon.com/tolyer/comfort_user.html#comments</comments>
		<pubDate>Fri, 12 Mar 2010 13:32:04 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[情感化设计]]></category>

		<guid isPermaLink="false">http://www.userkon.com/tolyer/comfort_user.html</guid>
		<description><![CDATA[在煎蛋上看到一个比较有意思的文章，顺便也看看下面的回复，突然想起很多有意思的东西，关于情感化设计。我开始思考，是不是在很多时候，在考虑界面精简的同时，我们也需提供一点毫无意义的东西给予用户安慰的效果？ 这篇文章叫做：一切都是假象：按钮的安慰效果，截取其中的一段： 安慰剂按钮 Placebo buttons ：是指一种放置在公共场合假装有效，但实际已经停止工作的按钮。 你有没有猛按电梯关门键的经验。纽约客一篇文章曾提到，在90年代初，当地的电梯都还没有关门键，这都是后来添加上的，但实际上这并没有太大的用处，只是为给人们造成‘猛击此次，关闭电梯’一个假象，同时也能缓解人们在等待电梯下楼时的烦闷。 如果细致观察你的生活，想必你也有以下常见的习惯： 热得不行回家马上把空调调到16°C。——但事实上气温不可能马上下降到16°C 电脑卡的时候狂点击鼠标右键内的“刷新”命令。——事实上，“刷新”并不能解决卡的问题。 BT下载的时候让任务暂停后马上继续，希望速度能加快。——好吧，从我个人角度来说，我发觉这好像有点效果。 &#8230;&#8230; 从精简的角度而言,很多的设计是过度的 现在邮箱的界面内为什么需要“收信”按钮？这是一个曾经在部门内部激烈讨论的问题，因为邮箱早已经实现了同步收取，邮件一发，对方无需点击收信按钮，即可收到邮件并看到提示。 从精简的角度上说，“收信”按钮是软件端的产物，因为本地邮件与网络端邮件无法实时同步，才需要一个“收信”按钮。那么对于网页端来说，这个按钮就显得多余了，因为网页能够做到实时的同步了。（所以Gmail与Hotmail就去掉收信的按钮） 古老的win98系统有个“我的公文包”功能，他主要用于同步更新文件，每次更新时，你都得点击一次“更新”才可让文件更新。可是，Dropbox把这个功能也省了。 精简化的设计原则强调于，尽量的减少用户的操作成本，帮用户多做一步。因此，“收信”按钮其实大可不必， 那么它存在理由，我只能从情感化上去理解它了。 从用户的需求来说,这些设计能够让用户发泄焦灼等待的情绪 记得你唤起因睡眠而黑屏的电脑时，疯狂过晃动手中的鼠标吗？ 记得你因为赶时间，等不及电脑提示就直接拔掉U盘闪人吗？ 人对时间无法有准确的主观感知，人们对较长的时间间隔，往往估计不足；而对较短的时间间隔，则估计偏高。 心理学家发现，用计时器测量出的时间与估计的时间不完全一致。人的时间知觉与活动内容、情绪、动机、态度有关。内容丰富而有趣的情境，使人觉得时间过得很快，而内容贫乏枯燥的事物，使人觉得时间过得很慢；积极的情绪使人觉得时间短，消极的情绪使人觉得时间长；期待的态度会使人觉得时间过得慢。一般来说，对持续时间越注意，就越觉得时间长；对于预期性的估计要比追溯性的估计时间显得长些。来源 对于信息高速传递的网络来说，用户对于一秒的等待速度都是难以接受的。但用户处于焦灼的状态时，则会不由自主的找到一种最直接方式去缓解这种情绪。 对于设计师而言，就要提供像“鼠标”这样一个最直接的缓解方式。去安慰你的用户。 如何去安慰用户 安慰用户的关键，即在于如何提供一个内容丰富而有趣的情境给用户。我个人觉得我们应该以下三个方面着手。 1、降低挫败感,尤其是多次尝试的挫败感 设计时，让机器的出错反馈风趣而又具有人性化，表现出对用户的关怀，自然就容易被用户接受。 采用的方法一般为：拟人化（如豆瓣开小差了），幽默（如煎蛋超载鸡，版本二），小游戏等。 但需注意的是，对于用户的多次尝试失败，应该给予更加具有关怀性的反馈，对于用户而言，这种反馈是能够让其“内牛满面”的。如QQ邮箱的中，多次点击收信按钮的温馨提示。 2、让等待变得缓慢化且可以打发 我很喜欢Ghost版的系统，他不仅让安装系统变得更加快，更加重要的是，安装的时候，他还能提供空当接龙，扫雷这样的游戏给我打发时间。 同时，基于等待需时的长短，提供的进度反馈也不一样。短时间的采用简单的loading图标，鼠标的忙碌状态；中长时间采用的是进度条，但同时，应尽量避免采用非确定性进度条。可参考windows交互体验规范 最后，还需注意，如果所需的时间越长，进度条也应越长，这样用户能够较为轻易的感知到进度的变换而不误会进度停止。 3、给予惊喜 喜新厌旧是人固有的习惯，即使是再美艳的界面，再风趣的句子，也有厌倦的时候，对于网络尤甚，今天流行的句子，明天就凹凸了。这种行为表现得最突出的，就在网络产品的皮肤上。用户似乎总是没有100%满意的皮肤。 所以，在设计上，应该有一些随机的，易于被用户发现的变化。通过这种变化，用户可以获得愉悦感，同时也可获得发现这种变化的成就感，这就是两种积极的情感因素。 比较鲜明的例子就是Google Doodle，还有就是各种软件中的小彩蛋，以及游戏中的隐藏关卡和作弊码等。]]></description>
			<content:encoded><![CDATA[<p>在<a href="http://jandan.net/" target="_blank">煎蛋</a>上看到一个比较有意思的文章，顺便也看看下面的回复，突然想起很多有意思的东西，关于情感化设计。我开始思考，是不是在很多时候，在考虑界面精简的同时，我们也需提供一点毫无意义的东西给予用户安慰的效果？</p>
<p>这篇文章叫做：<a title="一切都是假象：按钮的安慰效果" href="http://jandan.net/2010/02/10/placebo-buttons.html" target="_blank">一切都是假象：按钮的安慰效果</a>，截取其中的一段：</p>
<blockquote><p>安慰剂按钮 Placebo buttons ：是指一种放置在公共场合假装有效，但实际已经停止工作的按钮。</p>
<p>你有没有猛按电梯关门键的经验。纽约客一篇文章曾提到，在90年代初，当地的电梯都还没有关门键，这都是后来添加上的，但实际上这并没有太大的用处，只是为给人们造成‘猛击此次，关闭电梯’一个假象，同时也能缓解人们在等待电梯下楼时的烦闷。</p>
</blockquote>
<p>如果细致观察你的生活，想必你也有以下常见的习惯：</p>
<ul>
<li>热得不行回家马上把空调调到16°C。<font color="#c0c0c0">——但事实上气温不可能马上下降到16°C</font> </li>
<li>电脑卡的时候狂点击鼠标右键内的“刷新”命令。<font color="#c0c0c0">——事实上，“刷新”并不能解决卡的问题。 </font></li>
<li>BT下载的时候让任务暂停后马上继续，希望速度能加快。<font color="#c0c0c0">——好吧，从我个人角度来说，我发觉这好像有点效果。 </font>      <br />&#8230;&#8230; </li>
</ul>
<p>  <span id="more-313"></span><br />
<h3>从精简的角度而言,很多的设计是过度的</h3>
<p>现在邮箱的界面内为什么需要“收信”按钮？这是一个曾经在部门内部激烈讨论的问题，因为邮箱早已经实现了同步收取，邮件一发，对方无需点击收信按钮，即可收到邮件并看到提示。</p>
<p><a title="Get mail button by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4424934986/"><img alt="Get mail button" src="http://67.195.19.74/4014/4424934986_02b37e931e_o.png" width="580" height="101" /></a></p>
<p>从精简的角度上说，“收信”按钮是软件端的产物，因为本地邮件与网络端邮件无法实时同步，才需要一个“收信”按钮。那么对于网页端来说，这个按钮就显得多余了，因为网页能够做到实时的同步了。（所以Gmail与Hotmail就去掉收信的按钮）</p>
<p>古老的win98系统有个“我的公文包”功能，他主要用于同步更新文件，每次更新时，你都<a href="http://tech.sina.com.cn/c/2002-12-12/17007.html" target="_blank">得点击一次“更新”才可让文件更新</a>。可是，Dropbox把这个功能也省了。</p>
<p>精简化的设计原则强调于，尽量的减少用户的操作成本，帮用户多做一步。因此，“收信”按钮其实大可不必，</p>
<p>那么它存在理由，我只能从情感化上去理解它了。</p>
<h3>从用户的需求来说,这些设计能够让用户发泄焦灼等待的情绪</h3>
<p>记得你唤起因睡眠而黑屏的电脑时，疯狂过晃动手中的鼠标吗？</p>
<p>记得你因为赶时间，等不及电脑提示就直接拔掉U盘闪人吗？</p>
<p>人对时间无法有准确的主观感知，人们对较长的时间间隔，往往估计不足；而对较短的时间间隔，则估计偏高。</p>
<blockquote><p>心理学家发现，用计时器测量出的时间与估计的时间不完全一致。人的时间知觉与活动内容、情绪、动机、态度有关。内容丰富而有趣的情境，使人觉得时间过得很快，而内容贫乏枯燥的事物，使人觉得时间过得很慢；积极的情绪使人觉得时间短，消极的情绪使人觉得时间长；期待的态度会使人觉得时间过得慢。一般来说，对持续时间越注意，就越觉得时间长；对于预期性的估计要比追溯性的估计时间显得长些。<a title="时间知觉" href="http://hi.baidu.com/123803275/blog/item/5178b7c261552753b319a8de.html">来源</a></p>
</blockquote>
<p>对于信息高速传递的网络来说，用户对于一秒的等待速度都是难以接受的。但用户处于焦灼的状态时，则会不由自主的找到一种最直接方式去缓解这种情绪。</p>
<p>对于设计师而言，就要提供像“鼠标”这样一个最直接的缓解方式。去安慰你的用户。</p>
<h3>如何去安慰用户</h3>
<p>安慰用户的关键，即在于如何提供一个内容丰富而有趣的情境给用户。我个人觉得我们应该以下三个方面着手。</p>
<h4>1、降低挫败感,尤其是多次尝试的挫败感</h4>
<p>设计时，让机器的出错反馈风趣而又具有人性化，表现出对用户的关怀，自然就容易被用户接受。</p>
<p>采用的方法一般为：拟人化（如<a href="http://images.google.cn/imglanding?q=%E8%B1%86%E7%93%A3%20%E5%BC%80%E5%B0%8F%E5%B7%AE%E4%BA%86&amp;imgurl=http://i3.6.cn/cvbnm/94/53/11/203199e4d14aef5ed03e2c2c6ec517b6.jpg&amp;imgrefurl=http://bbs.geekaa.com/topic/view/4162.html&amp;usg=__N9fnDLuv5GapoMygS8gs_Asj-34=&amp;h=343&amp;w=510&amp;sz=20&amp;hl=zh-CN&amp;um=1&amp;itbs=1&amp;tbnid=sCESPyoYsz46OM:&amp;tbnh=88&amp;tbnw=131&amp;prev=/images%3Fq%3D%25E8%25B1%2586%25E7%2593%25A3%2B%25E5%25BC%2580%25E5%25B0%258F%25E5%25B7%25AE%25E4%25BA%2586%26um%3D1%26hl%3Dzh-CN%26newwindow%3D1%26sa%3DG%26tbs%3Disch:1&amp;um=1&amp;newwindow=1&amp;sa=G&amp;tbs=isch:1&amp;start=0#tbnid=sCESPyoYsz46OM&amp;start=0">豆瓣开小差了</a>），幽默（如<a href="http://www.bababian.com/phoinfo/1EA65DC960C2015ACC2A596E720019C5DT">煎蛋超载鸡</a>，<a href="http://www.bababian.com/phoinfo/443143CCE3BF3BDB37419625C300B81FDT">版本二</a>），小游戏等。</p>
<p><a title="很抱歉" href="http://www.flickr.com/photos/41128764@N02/4426396059/"><img border="0" hspace="0" alt="很抱歉" src="http://67.195.19.74/4030/4426396059_64def18be4.jpg" /></a></p>
<p>但需注意的是，对于用户的多次尝试失败，应该给予更加具有关怀性的反馈，对于用户而言，这种反馈是能够让其“内牛满面”的。如QQ邮箱的中，多次点击收信按钮的温馨提示。</p>
</p>
<p><a title="是不是有邮件没有收到啊" href="http://www.flickr.com/photos/41128764@N02/4426405933/"><img border="0" hspace="0" alt="是不是有邮件没有收到啊" src="http://67.195.19.74/4014/4426405933_1823c985da.jpg" /></a></p>
</p>
<h4>2、让等待变得缓慢化且可以打发</h4>
<p>我很喜欢Ghost版的系统，他不仅让安装系统变得更加快，更加重要的是，安装的时候，他还能提供空当接龙，扫雷这样的游戏给我打发时间。</p>
<p>同时，基于等待需时的长短，提供的进度反馈也不一样。短时间的采用简单的loading图标，鼠标的忙碌状态；中长时间采用的是进度条，但同时，应尽量避免采用非确定性进度条。可参考<a href="http://www.uxguide.net/wiki/windows:Controls/progress-bars">windows交互体验规范</a></p>
<p>最后，还需注意，如果所需的时间越长，进度条也应越长，这样用户能够较为轻易的感知到进度的变换而不误会进度停止。</p>
<h4>3、给予惊喜</h4>
<p>喜新厌旧是人固有的习惯，即使是再美艳的界面，再风趣的句子，也有厌倦的时候，对于网络尤甚，今天流行的句子，明天就凹凸了。这种行为表现得最突出的，就在网络产品的皮肤上。用户似乎总是没有100%满意的皮肤。</p>
<p>所以，在设计上，应该有一些随机的，易于被用户发现的变化。通过这种变化，用户可以获得愉悦感，同时也可获得发现这种变化的成就感，这就是两种积极的情感因素。</p>
<p>比较鲜明的例子就是Google Doodle，还有就是各种软件中的小彩蛋，以及游戏中的隐藏关卡和作弊码等。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/comfort_user.html/feed</wfw:commentRss>
		<slash:comments>74</slash:comments>
		</item>
		<item>
		<title>榨干Chrome UI</title>
		<link>http://www.userkon.com/tolyer/analizing_chrome_ui.html</link>
		<comments>http://www.userkon.com/tolyer/analizing_chrome_ui.html#comments</comments>
		<pubDate>Sun, 07 Feb 2010 14:40:57 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://www.userkon.com/?p=301</guid>
		<description><![CDATA[目前的我，已经成为Chrome的严重依赖用户，甚至U盘内也随身装着Chrome便携版。对我而言，它有着其他浏览器无法代替的杀手级优势：快速，稳定，完美支持Google所有在线服务；简洁到一塌糊涂的界面。 而其他浏览器，他们只在一些特殊需求中才会使用，如Firefox的AutoProxy翻墙，IE插件下的网银支付，Opera的turbo加速等。 用过Chrome的的人都有个习惯：就是都不好意思说Chrome不好用。当然这是玩笑话，Chrome 3.0版本之前功能也一直较为简单，但并不妨碍它的用户对其赞不绝口。究其根本，还是出在其独具一格的UI体验上。 只用一句话来评价：Chrome 才是浏览器，其他的只是软件。 戈达尔曾经为证明斯皮尔伯格是一个平庸的导演而愤怒地说过：“如果你真想知道他为什么（平庸），我会在放映室里一个镜头一个镜头地讲给你听！” 现在我要做一件类似的事情，不过目的是为了证明Chrome是一款多么优秀的浏览器。 目标导向设计 Chrome刚推出的时候，所有人都大吃一惊：界面简单得以至于菜单栏都砍掉了。这么多的菜单栏命令去哪里了呢？被重新组合了。 示例问题：猜猜，“清除历史浏览记录”的功能分别在哪个菜单项里面？ 当你还在思考此命令在Firefox中的“History”还是“Tools”时；我想你应该早已确定这个功能位于chrome的“控制谷歌浏览器”的菜单内。 看，这是多大的差别！什么叫做符合用户第一直觉，这就是。 作为一个M粉，我个人的臆想是，Chrome是向Ribbon的致敬与学习： 1.基于用户的目标，对浏览器的命令进行再分类。 这使得Chrome只有两个菜单项：控制当前页，控制谷歌浏览器。这有效的降低用户对命令的记忆要求。（可用性原则之一：依赖识别而不是记忆。） M粉牢骚：这与Ribbon的的分类有异曲同工之妙。 2.先将命令砍掉一半，剩下的再砍掉一半。 Chrome对于命令的精简可谓大刀阔斧，把一些用户目标之外的功能都通通剔除，避免陷入了功能主义，打造一个纯粹的、100%的浏览器。（当然，这其中也有Google的产品战略原因） 看上图你就能看到Chrome是如何砍命令项的，命令虽然精简了，但实际使用上，Chrome的右键菜单并不会让我有功能缺失感。Chrome并不是为了精简而精简，他们的精简是有理有据的，由用户的目标而来。 而对比菜单项命令，以及对话框的命令。Chrome将“历史记录”“下载记录”“扩展记录”这些功能都采用独立标签页呈现。一些常用对话框呈现的命令修改为浮层呈现。如“设为默认浏览器”，“保存密码”，”添加至收藏夹“。 这些做法的好处就是：让Chrome的命令项始终保持在“浅并且窄”的结构内（可参阅《设计心理学》），遵循用户从外到内的认知规则，确保用户有较好的控制感（Sense of Control）： 大部分右键菜单项在10个以内。 没有三层或更深的菜单项或者窗口叠加。 少用模态的控件打断用户焦点，让其保持在标签页内。 M粉的我再次牢骚：Ribbon的设计的目的之一就是提高用户的控制感。BTW，如果数一下每个浏览器的工具栏命令数，Chrome再次证明它是最“纯”的。 最佳响应性与操控感 相对于其他浏览器，Chrome做了以下的变化： 砍掉了菜单栏以及窗口标题栏。 将地址栏与搜索栏整合。 动态的状态栏。 界面简单了，命令也少了。给Chrome的带来的第一优势就是：同等屏幕尺寸下，Chrome拥有最佳的最大的的显示区域。但在响应性上，Chrome却反而领先其他浏览器。Chrome的优秀反馈，让用户只需较少的注意力就能了解系统的状态，从而专注于自己的本身的任务与信息。 让我们从标签栏说起。这是Chrome最具魅力的地方。 1.向左转，向右转 注意到加载网页时，标签栏左侧的进度图标反馈吗？ Chrome精细的用三种相对的信息（方向，颜色，速度）来向用户传达浏览器的状态：正在连接服务器；已连接服务器，正在加载网站。 大部分情况他们只是一闪而过，但出现问题时，他有助与你了解情况：假如您访问一个不存在的网站，如twitter.com，那么你就只能看到逆时针的进度图标了。 2.向左走，向右走 &#8230; <a href="http://www.userkon.com/tolyer/analizing_chrome_ui.html">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>目前的我，已经成为Chrome的严重依赖用户，甚至U盘内也随身装着Chrome便携版。对我而言，它有着其他浏览器无法代替的杀手级优势：快速，稳定，完美支持Google所有在线服务；简洁到一塌糊涂的界面。</p>
<p>而其他浏览器，他们只在一些特殊需求中才会使用，如Firefox的AutoProxy翻墙，IE插件下的网银支付，Opera的turbo加速等。</p>
<p>用过Chrome的的人都有个习惯：就是都不好意思说Chrome不好用。当然这是玩笑话，Chrome 3.0版本之前功能也一直较为简单，但并不妨碍它的用户对其赞不绝口。究其根本，还是出在其独具一格的UI体验上。</p>
<p>只用一句话来评价：<strong>Chrome 才是浏览器，其他的只是软件。</strong></p>
<p>戈达尔曾经为证明斯皮尔伯格是一个平庸的导演而愤怒地说过：“如果你真想知道他为什么（平庸），我会在放映室里一个镜头一个镜头地讲给你听！”</p>
<p>现在我要做一件类似的事情，不过目的是为了证明Chrome是一款多么优秀的浏览器。</p>
<p><span id="more-301"></span></p>
<h3>目标导向设计</h3>
<p>Chrome刚推出的时候，所有人都大吃一惊：<strong>界面简单得以至于菜单栏都砍掉了</strong>。这么多的菜单栏命令去哪里了呢？<strong>被重新组合了</strong>。</p>
<p><strong>示例问题：猜猜，“清除历史浏览记录”的功能分别在哪个菜单项里面？</strong></p>
<p><a title="menu_bar by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4317971055/"><span style="color: #0044aa; background-color: #ffffff;"> </span><img title="firefox与Chrome菜单项对比" src="http://67.195.19.74/4060/4317971055_11a8dbb844.jpg" alt="firefox与Chrome菜单项对比" width="500" height="191" /></a></p>
<p>当你还在思考此命令在Firefox中的“History”还是“Tools”时；我想你应该早已确定这个功能位于chrome的“控制谷歌浏览器”的菜单内。</p>
<p>看，这是多大的差别！什么叫做符合用户第一直觉，这就是。</p>
<p>作为一个M粉，我个人的臆想是，Chrome是向Ribbon的致敬与学习：</p>
<p><strong>1.基于用户的目标，对浏览器的命令进行再分类。</strong></p>
<p>这使得Chrome只有两个菜单项：<strong>控制当前页</strong>，<strong>控制谷歌浏览器</strong>。这有效的降低用户对命令的记忆要求。（可用性原则之一：依赖识别而不是记忆。）</p>
<p>M粉牢骚：这与Ribbon的的分类有异曲同工之妙。</p>
<p><a title="Tab in 2007 and Menu in 2003 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4280737271/"><img title="Ribbon UI中的命令精简与分类对比" src="http://67.195.19.74/4028/4280737271_51dcfa3008_o.jpg" alt="Ribbon UI中的命令精简与分类对比" width="543" height="85" /></a></p>
<p><strong>2.先将命令砍掉一半，剩下的再砍掉一半。</strong></p>
<p>Chrome对于命令的精简可谓大刀阔斧，把一些用户目标之外的功能都通通剔除，避免陷入了功能主义，打造一个纯粹的、100%的浏览器。（当然，这其中也有Google的产品战略原因）</p>
<p><a title="right_menu by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4318059199/"><img title="很明显吧，左边三个家伙都没Chrome纯" src="http://67.195.19.74/4052/4318059199_cbc80b122c.jpg" alt="很明显吧，左边三个家伙都没Chrome纯" width="500" height="282" /></a></p>
<p>看上图你就能看到Chrome是如何砍命令项的，命令虽然精简了，但实际使用上，Chrome的右键菜单并不会让我有功能缺失感。Chrome并不是为了精简而精简，他们的精简是有理有据的，由用户的目标而来。</p>
<p>而对比菜单项命令，以及对话框的命令。Chrome将“历史记录”“下载记录”“扩展记录”这些功能都采用独立标签页呈现。一些常用对话框呈现的命令修改为浮层呈现。如“设为默认浏览器”，“保存密码”，”添加至收藏夹“。</p>
<p>这些做法的好处就是：让Chrome的命令项始终保持在“<strong>浅并且窄</strong>”的结构内（可参阅《<a title="去豆瓣看看这本书吧!" href="http://www.douban.com/subject/1288844/">设计心理学</a>》），遵循用户<a title="作为交互的8项基本原则，在GUI设计禁忌2.0中有明确提到。用户对于产品的理解是从外到内的，而设计师的顺序则是从内至外，认知顺序的冲突，是设计师需要慎重考虑的。" href="http://www.douban.com/subject/3263946/">从外到内</a>的认知规则，确保用户有较好的控制感（<strong>Sense of Control</strong>）：</p>
<ul>
<li>大部分右键菜单项在10个以内。</li>
<li>没有三层或更深的菜单项或者窗口叠加。</li>
<li>少用模态的控件打断用户焦点，让其保持在标签页内。</li>
</ul>
<p>M粉的我再次牢骚：Ribbon的设计的目的之一就是提高用户的控制感。BTW，如果数一下每个浏览器的工具栏命令数，Chrome再次证明它是最“<strong>纯</strong>”的。</p>
<h3>最佳响应性与操控感</h3>
<p>相对于其他浏览器，Chrome做了以下的变化：</p>
<ul>
<li>砍掉了菜单栏以及窗口标题栏。</li>
<li>将地址栏与搜索栏整合。</li>
<li>动态的状态栏。</li>
</ul>
<p>界面简单了，命令也少了。给Chrome的带来的第一优势就是：同等屏幕尺寸下，Chrome拥有最佳的最大的的显示区域。但在响应性上，Chrome却反而领先其他浏览器。Chrome的优秀反馈，让用户只需较少的注意力就能了解系统的状态，从而专注于自己的本身的任务与信息。</p>
<p>让我们从标签栏说起。这是Chrome最具魅力的地方。</p>
<h4>1.向左转，向右转</h4>
<p><a title="tab-bar-at-Chrome by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4334722206/"><span style="color: #ffffff; background-color: #303536;"> </span><img src="http://67.195.19.74/4028/4334722206_8126026dc8_o.png" alt="tab-bar-at-Chrome" width="500" height="97" /></a></p>
<p>注意到加载网页时，标签栏左侧的进度图标反馈吗？</p>
<p>Chrome精细的用三种相对的信息（方向，颜色，速度）来向用户传达浏览器的状态：正在连接服务器；已连接服务器，正在加载网站。</p>
<p>大部分情况他们只是一闪而过，但出现问题时，他有助与你了解情况：假如您访问一个不存在的网站，如twitter.com，那么你就只能看到逆时针的进度图标了。</p>
<h4>2.向左走，向右走</h4>
<p>Chrome的标签栏操作上始终保持着缓冲式的过渡动画，对于反馈而言，他提供了<strong>隐喻</strong>，符合用户的操作期望。</p>
<p>于是乎，当一个新标签打开时，看起来就像一个新的标签从左侧向右滑出（这里顺带说一下，Mac下是从下自上滑出，有点意思吧。）。当关闭一个标签时，看起来就像标签向左边缩进去一样。Chrome始终用一种与现实生活相符合的预期动画，去呈现用户的操作，而这种动画，是最高效最生动而又最小化的反馈。</p>
<h4>3.最小的操作需求</h4>
<p>无论什么样的用户，大都想不劳而获，都不喜欢软件向他索取过多的东西。用户不仅仅是讨厌输入，讨厌按键盘，用户甚至讨厌去过多的移动他的鼠标。尤其是面对多次的重复操作时，想想当你需求遍历多页网页时，网页那糟糕的，到处跳动的翻页导航是多么的让你愤怒，你就大概能了解为什么了。</p>
<p>Chrome的最小操作需求，是关闭标签栏，当你存在多个标签时，你可以不移动鼠标就能关闭多个，这种设计操控感非常的强烈。谷奥上已经有<a title="从关闭标签页的动作细节看 Chrome 和 Safari" href="http://www.google.org.cn/posts/closing-tab-in-chrome-and-safari.html" target="_blank">详细的分析</a>了。在此就不多说。</p>
<h4>4.一个顶俩</h4>
<p><a title="One box by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4318073655/"><img src="http://67.195.19.74/4021/4318073655_bbe0234416.jpg" alt="One box" width="500" height="279" /></a></p>
<p>我说的一个顶俩指的是Chrome的地址栏。网上有云：真正好的用户界面都只有一个按钮，比如iPhone，比如抽水马桶。说起来还真有那么一点道理。</p>
<p>地址栏的作用就是带我们去到想去的地方。这么说，一定需要把地址栏与搜索栏区分吗？</p>
<p>难道的士司机会和你说：hey，你说的这个地方我无法识别，你问问我旁边的这个家伙，他能搜索？</p>
<p>Chrome的一条地址栏减少了用户的思考。但地址栏的自动完成反馈反而让用户更直白了解浏览器接下来将带领去去到何处。可以看到，Chrome在这里进行了有效分类，不至于让用户迷失和困惑。</p>
<p><a title="onebox by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4336401603/"><img src="http://67.195.19.74/4045/4336401603_ed80a0a35e.jpg" alt="onebox" width="500" height="152" /></a></p>
<p>另外其的可学性也不差，你无需帮助即可了解Ctrl+Enter的快捷操作。<a title="onebox2 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4337146480/"><img src="http://67.195.19.74/4026/4337146480_fc76c04c5a_o.png" alt="onebox2" width="498" height="228" /></a></p>
<p>Chrome的地址栏设计方法，我个人的看法而言，有点像我之前所讨论过的<a title="高度认知与低度认知" href="http://www.userkon.com/highly_cognitive_and_minuent_cognitive.html" target="_blank">低度认知</a>设计：将任务的开始点压迫得极度精简（只保留一条地址栏），提高任务的深度（输入后的可选路径浮层），反而能帮助用户做更多的工作。渐进式的操作结构，在满足低级用户的默认需求时，能够给高级用户带来更高的满意度。</p>
<p>但是，一条地址栏的缺陷在于：如果用户的第一目的是搜索，怎么解决？</p>
<p>在Windows的体验规范中，就有这么一条：在任何界面内ctrl+E，将使焦点定位在搜索框内。看看Chrome是怎么解决的？你可自行尝试。尝试之后记得说“Chrome牛X”。</p>
<p>这里还有一个<a title="Browser Speed Test 2 4 searches in 15 seconds" href="http://v.youku.com/v_show/id_XMTQxODM2MjIw.html" target="_blank">视频</a>，15秒Chrome能完成四次搜索。这才叫一个顶俩。</p>
<h4>4.最“有用”</h4>
<p>Windows用户体验规范中谈及状态栏时是这么说的：</p>
<blockquote><p>状态栏通常使用文本和图标来描述状态，但它也可以包含进度指示器，以及包含与状态相关的命令菜单与选项。确保状态栏中的信息对用户来说<strong>有用且有实际意义</strong>，但也<strong>并非至关重要</strong>。——<a title="Windows 用户体验交互设计规范——状态栏" href="http://www.uxguide.net/wiki/windows:Controls/status-bars" target="_blank">来源</a></p></blockquote>
<p><a title="statusbar by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4336459563/"><img src="http://69.147.90.215/2749/4336459563_a3b32b7dbc_o.png" alt="statusbar" width="500" height="115" /></a></p>
<p>那我们来仔细对比一下，状态栏中的进度条到底对用户有用吗？没用，因为大部分网站在完全载入之前都无法正常使用。而且一个网页的载入如果还需要进度条来反馈，那么这个网页本来就存在问题。用户也不会对载入超过10秒并且还需浏览器来提供进度反馈的网站有任何的耐心。</p>
<p>OK，进度条是没用的，应该去掉，那么类似IE右侧的状态信息有用吗？对于一个没有过多附属功能的Chrome来说，他确实没用。（但我个人认为，Chrome扩展开放之后，应该在此开拓扩展栏，与状态栏整合。）</p>
<p>什么是有用的且有实际意义的信息？看图:</p>
<p><a title="upload-status by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4337246446/"><img src="http://69.147.90.215/2681/4337246446_9160de9831_o.png" alt="upload-status" width="499" height="346" /></a></p>
<p>在一个较为古老的上传交互模型上，系统本身没有提供任何有效的反馈，Chrome通过状态栏秒杀了其他一切浏览器：他提供了进度的反馈。同时，他的标签栏采用逆时针方向，表示正在和服务器进行数据交换。</p>
<p>让我们回到标题的最开始，叫做最佳响应性：Chrome不是功能最多的浏览器，但响应性是最佳的。这也就不难理解同样功能简单，而且还是MAC系统默认浏览器的safari，占有率<a title="Google Chrome成為全球第三大瀏覽器" href="http://www.techbang.com.tw/?p=30716" target="_blank">转眼就被超越</a>。</p>
<p>响应性给用户带来何种好处：无语伦比的操控感；那种感觉，就像在极品飞车内遇到一款傻瓜式的操控豪华跑车一样，爽。</p>
<h3>暗藏的OS野心</h3>
<p>最后说一点题外话，对于Chrome OS，我们在Chrome内多少能看到其一点雏形，如Chrome的菜单内已经没有打开本地文件的命令，但其最重要的创意在于“创建应用程序快捷方式&#8230;”</p>
<p><a title="chrome mail163 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4337648424/"><img src="http://69.147.90.215/2679/4337648424_66e5832874.jpg" alt="chrome mail163" width="500" height="312" /></a></p>
<p>在上图中，这个界面已经具有很强的软件外观了，并且其在于本地的东西，只是一个只有1K大小的快捷方式。</p>
<p>因此看来，我们还需要安装一大堆的东西在本地的硬盘，然后去启动吗？不用，一切可变得简单，也许有天你点击桌面的某个快捷方式，你就可以直接使用使用Photoshop，真正的免安装，且不限平台。</p>
<p>当然，目前而言，Chrome OS还有一大推的问题需要解决，比如如何定义模态对话框与非模态对话框的实现，网络应用如何避免过渡的单页呈现。但从长远来看，这种趋势是不可逆转的。</p>
<p>其实一开始听到Chrome OS我是拒绝的，因为你不能说这是OS，我就认为这是OS，第一我要试一下，因为我不愿意试了之后用一些蛊惑人心的话去赞美它，很好很强大很快。这样其他M粉一定会鄙视我，根本没有这么方便的OS，就证明上面那个是假的。后来我也证实Chrome 确实有OS雏形，我使用了它“创建应用程序&#8230;”大概一个月左右,感觉就像使用本地软件一样，后来我介绍给同事的时候，也没有吹牛，因为我让他们知道，我是这么使用的，很爽，你们用得时候很会这么爽。</p>
<h3>最后的话</h3>
<p>Chrome是我最爱的一个浏览器，同时它也是优秀的。Chrome的优秀在于它树立了浏览器新的未来方向，浏览器的任务不仅仅是网页的呈现，浏览器也不应该是传统意义上的软件，它应该是一个彻底脱离用户本地电脑的东西，它应该被赋予更多的用户目标与期望，利用云端的海量信息和即时技术让用户的目标更快更容易实现。</p>
<p>本文标题虽为榨干Chrome UI，其实只是力求榨干。我相信，每多使用一次Chrome，你就会多一次惊喜，多一份满意。最后附送几段关于Chrome的视频:</p>
<ul>
<li><a href="http://www.google.org.cn/posts/chrome-video-by-google-uk.html">非常有创意的 Chrome 新广告</a></li>
<li><a href="http://briian.com/?p=6282">19個有趣的Google Chrome廣告影片</a>(需翻墙)</li>
<li><a href="http://www.google.org.cn/posts/what-chrome-can-do-in-15-seconds.html">15秒种时间，Chrome 可以完成什么工作？</a></li>
</ul>
<p>最后，假设您能坚持看到这个，提前祝您虎年快乐，哥让我和你说：“爱老虎邮。”</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/analizing_chrome_ui.html/feed</wfw:commentRss>
		<slash:comments>419</slash:comments>
		</item>
		<item>
		<title>为中文而设计的文本框</title>
		<link>http://www.userkon.com/tolyer/design_input_for_chinese.html</link>
		<comments>http://www.userkon.com/tolyer/design_input_for_chinese.html#comments</comments>
		<pubDate>Fri, 04 Dec 2009 13:32:31 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[文本框]]></category>
		<category><![CDATA[本土化设计]]></category>

		<guid isPermaLink="false">http://www.userkon.com/tolyer/design_input_for_chinese.html</guid>
		<description><![CDATA[我一直觉得，文本框的这个东西，在有输入法的国家，是我们这些懒人的杯具，文本框的自动完成功能，在配合输入法下，简直是个鸡肋。一次次的切换Ctrl+Space，是否有让你崩溃想敲烂键盘呢？ 上面的那张图已经很明显的让我们感觉到了三个问题： 输入法把自动完成遮挡住了，我看不见。 使用键盘↑↓键只能切换输入法内的选字，无法选择自动完成内的选项。想用却用不到。 当你懊恼的打算用鼠标去点自动完成列表内的文字时，杯具发生了，你发觉，你点了，事实上什么效果都没有。你的文本框变成一遍空白。（在Chrome下多种中文搜索引擎有此问题，杯具啊。） 备注：经过笔者测试多种搜索引擎在不同浏览器的呈现效果，这三个问题出现的几率各不相同，但在chrome下这三个问题非常明显。（Chrome渲染有问题？） 关于问题一 在Chrome下似乎没有解决方案，所有的搜索引擎表现都如文章开头的图片的效果。 IE下，大部分的搜索引擎都采用了一种笨可是最有效的方法：只有文字被完全输入到文本框内后，自动完成才出现，这样就避免了遮挡的问题了。 在FF下，大部分搜索引擎也是采用与IE内的做法，隐藏自动完成。当然，也有笨家伙：百度和有道，在FF下依然还是遮挡住了。 关于问题二 因为在IE与FF下大部分搜索引擎采用了上诉的的方法避免了出现输入法与自动完成，所以这个问题主要是出现在Chrome内。从实际的测试中发现，国外的搜索引擎表现更佳。 在Chrome的Google与bing搜索，如果使用↑↓键，是可以选中自动完成的，当然，你的输入法选字也同时切换了。 当然，也有笨家伙：Chrome下的所有中文搜索引擎，以及FF下的百度和有道，依然还是无法使用↑↓键选择自动完成。 关于问题三 好了，我就直接说笨家伙吧，这次上榜的还是百度与有道。但是百度这次可以欣慰了：有道垫底了。有道在FF与Chrome下鼠标点击自动完成后，文本框都会自动消失。百度只在Chrome下出现此问题。 说明这些问题并不是表示我强烈的鄙视中文搜索引擎，相反我更爱好他们。但我们需要考虑的问题是：在设计文本框的时候，是否应该更加考虑到一个现实：所有的中文用户都在用输入法输入文本框。我们的操作比英文用户更复杂。 在输入的时候，中文用户多了一个翻译的步骤，把键盘上的字母翻译为中文汉字。这也是中文用户偏爱鼠标操作的原因，因为输入的工作太复杂了，虽然我们的输入法在近几年有着超越的发展，但对于用户而言，这种门槛还是存在的。——至少我的爸妈想使用电脑打字，他们就不得不去学拼音。 那么，为了使用户少按一次ctrl+space，让用户操作更流畅，在文本框的设计上，我们必须更加细致与谨慎。我个人总结有以下几个方法。 禁用输入法 如果某些文本框只允许用户输入字母符号以及数字（如登陆界面的“用户名”），那就禁用输入法吧。 网易邮箱的登陆界面就采用了这种方法，Web界面的实现手段很简单，只需在CSS代码内加上：ime-mode:disabled; 当然，目前很多产品的登陆界面都进行了相同的处理，不妨挖掘下更多产品内部的文本框吧。如验证码输入框。 用户输入之后才提供响应 只有用户把文字输入到文本框内才提供响应，这是主要是针对一些自动完成和即时搜索（输入后自动搜索）功能的。 windows7的资源管理器的搜索框为即时搜索，但文字还在输入法内时，它并不启动搜索。这样的设计能让界面更简洁且让用户容易理解。 提供正确的键盘反馈 如前面Chrome的下的Google，还是支持↑↓键选择自动完成的，这样至少保证了，在使用输入法的时候，用户的一些按键还是有效的。 当然，我也见过一种很白痴的界面，他对Enter键的感知错误（Enter键在输入法内常用作用是输入英文字母），截图我无法找到，但大致是这样。 注：下图是我PS用以说明问题案例（因为暂时找不到真实案例），并不代表其真实情况如图所示。 按下Enter之后，系统自动响应了默认的“登录”按钮，但事实上我只是想把邮件地址输入文本框而已。明显的键盘反馈错误。 用户输入之后才提供响应 只有用户把文字输入到文本框内才提供响应，这是主要是针对一些自动完成和即时搜索（输入后自动搜索）功能的。 windows7的资源管理器的搜索框为即时搜索，但文字还在输入法内时，它并不启动搜索。这样的设计能让界面更简洁且让用户容易理解。 尝试使用拼音识别 毫无疑问，拼音识别能够有效帮助中文用户，就算他没有使用输入法，同时也有可能帮他纠正一些汉字输入错误。 史上最佳中文文本框？ 我把这个讲颁给QQ邮箱的写信页面收件人文本框，原因有三个：禁止输入法，块状结构，拼音识别。如果你把联系人都加了中文名字（火星文就没办法了），试试输入10个人的邮箱地址，你的速度有多快？告诉你，我只需要25秒。 从图中可以查出，这个文本框是支持拼音识别的，同时，他采用了块状结构，邮件地址是整块被删除或增加的。 无疑QQ的设计值得学习。 &#8230; <a href="http://www.userkon.com/tolyer/design_input_for_chinese.html">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a title="搜索自动完成.png" href="http://www.flickr.com/photos/41128764@N02/4157081337/"><img border="0" hspace="0" alt="搜索自动完成.png" src="http://69.147.90.215/2489/4157081337_ee7516391d.jpg" /></a></p>
<p>我一直觉得，文本框的这个东西，在有输入法的国家，是我们这些懒人的杯具，文本框的自动完成功能，在配合输入法下，简直是个鸡肋。一次次的切换Ctrl+Space，是否有让你崩溃想敲烂键盘呢？</p>
<p>上面的那张图已经很明显的让我们感觉到了<strong>三个问题</strong>：</p>
<ol>
<li>输入法把自动完成遮挡住了，我看不见。 </li>
<li>使用键盘↑↓键只能切换输入法内的选字，无法选择自动完成内的选项。想用却用不到。 </li>
<li>当你懊恼的打算用鼠标去点自动完成列表内的文字时，杯具发生了，你发觉，你点了，事实上什么效果都没有。你的文本框变成一遍空白。（在Chrome下多种中文搜索引擎有此问题，杯具啊。） </li>
</ol>
<blockquote><p>备注：经过笔者测试多种搜索引擎在不同浏览器的呈现效果，这三个问题出现的几率各不相同，但在chrome下这三个问题非常明显。（Chrome渲染有问题？）</p>
</blockquote>
<p> <span id="more-225"></span><br />
<h3>关于问题一</h3>
<p>在Chrome下似乎没有解决方案，所有的搜索引擎表现都如文章开头的图片的效果。</p>
<p>IE下，大部分的搜索引擎都采用了一种笨可是最有效的方法：只有文字被完全输入到文本框内后，自动完成才出现，这样就避免了遮挡的问题了。</p>
<p><a title="image_20091204195515.png" href="http://www.flickr.com/photos/41128764@N02/4157114043/"><img border="0" hspace="0" alt="image_20091204195515.png" src="http://69.147.90.215/2515/4157114043_fa0dd0b485.jpg" /></a></p>
<p>在FF下，大部分搜索引擎也是采用与IE内的做法，隐藏自动完成。<strong>当然，也有笨家伙：百度和有道，在FF下依然还是遮挡住了。</strong></p>
<h3>关于问题二</h3>
<p>因为在IE与FF下大部分搜索引擎采用了上诉的的方法避免了出现输入法与自动完成，所以这个问题主要是出现在Chrome内。从实际的测试中发现，国外的搜索引擎表现更佳。</p>
<p>在Chrome的Google与bing搜索，如果使用↑↓键，是可以选中自动完成的，当然，你的输入法选字也同时切换了。</p>
<p><a title="google.png" href="http://www.flickr.com/photos/41128764@N02/4157882236/"><img border="0" hspace="0" alt="google.png" src="http://69.147.90.215/2499/4157882236_d1e2b5128e.jpg" /></a></p>
<p><strong>当然，也有笨家伙：Chrome下的所有中文搜索引擎，以及FF下的百度和有道，依然还是无法使用↑↓键选择自动完成。</strong></p>
<h3>关于问题三</h3>
<p><strong>好了，我就直接说笨家伙吧，这次上榜的还是百度与有道。但是百度这次可以欣慰了：有道垫底了。有道在FF与Chrome下鼠标点击自动完成后，文本框都会自动消失。百度只在Chrome下出现此问题。</strong></p>
<p>说明这些问题并不是表示我强烈的鄙视中文搜索引擎，相反我更爱好他们。但我们需要考虑的问题是：在设计文本框的时候，是否应该更加考虑到一个现实：所有的中文用户都在用输入法输入文本框。我们的操作比英文用户更复杂。</p>
<p>在输入的时候，中文用户多了一个翻译的步骤，把键盘上的字母翻译为中文汉字。这也是中文用户偏爱鼠标操作的原因，因为输入的工作太复杂了，虽然我们的输入法在近几年有着超越的发展，但对于用户而言，这种门槛还是存在的。——至少我的爸妈想使用电脑打字，他们就不得不去学拼音。</p>
<p><a title="输入差异.png" href="http://www.flickr.com/photos/41128764@N02/4157906504/"><img border="0" hspace="0" alt="输入差异.png" src="http://69.147.90.215/2721/4157906504_2564315f82.jpg" /></a></p>
<p>那么，为了使用户少按一次ctrl+space，让用户操作更流畅，在文本框的设计上，我们必须更加细致与谨慎。我个人总结有以下几个方法。</p>
<h3>禁用输入法</h3>
<p>如果某些文本框只允许用户输入字母符号以及数字（如登陆界面的“用户名”），那就禁用输入法吧。</p>
<p><a title="网易邮箱.png" href="http://www.flickr.com/photos/41128764@N02/4157163001/"><img border="0" hspace="0" alt="网易邮箱.png" src="http://69.147.90.215/2515/4157163001_738749f1fe.jpg" /></a></p>
<p>网易邮箱的登陆界面就采用了这种方法，Web界面的实现手段很简单，只需在CSS代码内加上：ime-mode:disabled;</p>
<p>当然，目前很多产品的登陆界面都进行了相同的处理，不妨挖掘下更多产品内部的文本框吧。如验证码输入框。</p>
<h3>用户输入之后才提供响应</h3>
<p>只有用户把文字输入到文本框内才提供响应，这是主要是针对一些自动完成和即时搜索（输入后自动搜索）功能的。</p>
<p><a title="2009-12-04 20 48 45.png" href="http://www.flickr.com/photos/41128764@N02/4157941952/"><img border="0" hspace="0" alt="2009-12-04 20 48 45.png" src="http://69.147.90.215/2717/4157941952_28c80050ca.jpg" /></a></p>
<p>windows7的资源管理器的搜索框为即时搜索，但文字还在输入法内时，它并不启动搜索。这样的设计能让界面更简洁且让用户容易理解。</p>
<h3>提供正确的键盘反馈</h3>
<p>如前面Chrome的下的Google，还是支持↑↓键选择自动完成的，这样至少保证了，在使用输入法的时候，用户的一些按键还是有效的。</p>
<p>当然，我也见过一种很白痴的界面，他对Enter键的感知错误（Enter键在输入法内常用作用是输入英文字母），截图我无法找到，但大致是这样。</p>
<p><font color="#ff0000"><strong>注：下图是我PS用以说明问题案例（因为暂时找不到真实案例），并不代表其真实情况如图所示。</strong></font><img border="0" hspace="0" alt="image_20091204205935.png" src="http://69.147.90.215/2526/4157195589_407deff5b1.jpg" /></p>
<p>按下Enter之后，系统自动响应了默认的“登录”按钮，但事实上我只是想把邮件地址输入文本框而已。明显的键盘反馈错误。</p>
<h3>用户输入之后才提供响应</h3>
<p>只有用户把文字输入到文本框内才提供响应，这是主要是针对一些自动完成和即时搜索（输入后自动搜索）功能的。</p>
<p><a title="2009-12-04 20 48 45.png" href="http://www.flickr.com/photos/41128764@N02/4157941952/"><img border="0" hspace="0" alt="2009-12-04 20 48 45.png" src="http://69.147.90.215/2717/4157941952_28c80050ca.jpg" /></a></p>
<p>windows7的资源管理器的搜索框为即时搜索，但文字还在输入法内时，它并不启动搜索。这样的设计能让界面更简洁且让用户容易理解。</p>
<h3>尝试使用拼音识别</h3>
<p>毫无疑问，拼音识别能够有效帮助中文用户，就算他没有使用输入法，同时也有可能帮他纠正一些汉字输入错误。</p>
<p><a title="pinyshibie.png" href="http://www.flickr.com/photos/41128764@N02/4157967200/"><img border="0" hspace="0" alt="pinyshibie.png" src="http://69.147.90.215/2592/4157967200_f02cbc965b.jpg" /></a></p>
<h3>史上最佳中文文本框？</h3>
<p>我把这个讲颁给QQ邮箱的写信页面收件人文本框，原因有三个：禁止输入法，块状结构，拼音识别。如果你把联系人都加了中文名字（火星文就没办法了），试试输入10个人的邮箱地址，你的速度有多快？告诉你，我只需要25秒。</p>
<p><a title="2009-12-04 21 13 59.png" href="http://www.flickr.com/photos/41128764@N02/4157976682/"><img border="0" hspace="0" alt="2009-12-04 21 13 59.png" src="http://67.195.19.74/4039/4157976682_ecb13992cb.jpg" /></a></p>
<p><a title="2009-12-04 21 15 18.png" href="http://www.flickr.com/photos/41128764@N02/4157976852/"><img border="0" hspace="0" alt="2009-12-04 21 15 18.png" src="http://69.147.90.215/2527/4157976852_3b59e7a112.jpg" /></a></p>
<p>从图中可以查出，这个文本框是支持拼音识别的，同时，他采用了块状结构，邮件地址是整块被删除或增加的。</p>
<p>无疑QQ的设计值得学习。</p>
<h3>史上最差中文文本框？</h3>
<p>我要把这个奖颁给新浪微博的登陆框，当然，他们最近改进了这个设计，不过，这个反例，值得我们吸取教训。（来自<a title="新浪围脖垃圾登录界面" href="新浪围脖垃圾登录界面" target="_blank">Fenng</a>）</p>
<p><a title="4072174204_ee79fa081c_o.png" href="http://www.flickr.com/photos/41128764@N02/4157991106/"><img border="0" hspace="0" alt="4072174204_ee79fa081c_o.png" src="http://69.147.90.215/2693/4157991106_ff9b87db97.jpg" /></a></p>
<p>如果在这个图内还存在输入法的输入框呢?够杯具了吧,OK,我想这个图已经算是文本框设计的经典反例了,欢迎大家膜拜学习。</p>
<h3>写在最后</h3>
<p>文本框是一个很细节的东西，因为他属于一个用户信息收集的有效控件。而我们的中文用户，值得拥有它们自己的特色文本框。</p>
<p>在设计的同时，我们更应该考虑到用户的输入法状态。</p>
<blockquote><p>文中的测试皆采用搜狗拼音输入法测试，如有不正确的，还请指正。</p>
</blockquote>
<h3>备注补充</h3>
<p>关于搜索引擎的文本框反映的上诉问题，根据留言者 jane的意见。我也认同，或许，这个可以通过输入法来进行整合。</p>
<p>有没有那种可能，输入法能够读取到搜索框的自动完成列表，那么这样，我们只需输入的时候按一个切换键，就能很直观的使用自动完成功能了。</p>
<p>以下是我发明的CCAV搜索品牌</p>
<p><a href="http://www.flickr.com/photos/userkon/4164772043/" title="Flickr 上 优涩控 的 ccav搜索"><img src="http://69.147.90.215/2494/4164772043_816c1dafed_o.png" width="530" height="426" alt="ccav搜索" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/design_input_for_chinese.html/feed</wfw:commentRss>
		<slash:comments>697</slash:comments>
		</item>
		<item>
		<title>让你的产品更具响应性</title>
		<link>http://www.userkon.com/tolyer/make_product_responsive.html</link>
		<comments>http://www.userkon.com/tolyer/make_product_responsive.html#comments</comments>
		<pubDate>Sun, 22 Nov 2009 15:11:00 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[响应性]]></category>
		<category><![CDATA[性能]]></category>

		<guid isPermaLink="false">http://www.userkon.com/tolyer/make_product_responsive.html</guid>
		<description><![CDATA[在最开始，有两个问题？ 既然人脑是世界上最智能的东西，为啥我们还需要电脑？ 为啥如今web技术发展理论上已经能够实现所有的客户端功能，为什么我们还需要客户端？ 原因都很简单，因为后者比前者更快，响应更迅速。 什么是响应性？ 过去的几十年当中累积的大量证据表明，响应性（即软件应用程序跟上用户、不让他们等待的能力）是确定用户满意度的最重要因素。相比安全性，稳定性，易用性，响应性无疑是最容易最方便被用户所感知的。在使用计算机或者手持设备的时候，用户对于等待的憎恶比对其他任何事情的喜爱程度都要深。 然而，用户对于响应性的感知其实包括两个因素的： 速度：指的是机器自身的计算能力，机器性能越强，速度越快。 流畅感：使用时系统的反馈能否满足用户的时间支配需求。 如何提高速度？ Google是一间非常注意速度的公司，他们对自身产品的10条要求中，就包括Fast，在他们的用户体验规范中，是这么写道的： Nothing is more valuable than people&#8217;s time. Speed is a boon to users. It is also a competitive advantage that Google doesn&#8217;t sacrifice without good reason. 没有什么比用户的时间更珍贵了，高速是对用户的礼物。他也是我们的竞争优势，除非有很好的理由，google绝不牺牲速度。 那么如何提高应用的速度呢，方法其实非常的简单，主要为以下三点： 让你的应用更小更轻便 &#8230; <a href="http://www.userkon.com/tolyer/make_product_responsive.html">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>在最开始，有两个问题？</p>
<blockquote><ol>
<li>既然人脑是世界上最智能的东西，为啥我们还需要电脑？ </li>
<li>为啥如今web技术发展理论上已经能够实现所有的客户端功能，为什么我们还需要客户端？ </li>
</ol>
</blockquote>
<p>原因都很简单，因为后者比前者更快，响应更迅速。</p>
<h3>什么是响应性？</h3>
<p>过去的几十年当中累积的大量证据表明，响应性（即软件应用程序跟上用户、不让他们等待的能力）是确定用户满意度的最重要因素。相比安全性，稳定性，易用性，响应性无疑是最容易最方便被用户所感知的。在使用计算机或者手持设备的时候，用户对于等待的憎恶比对其他任何事情的喜爱程度都要深。</p>
<p>然而，用户对于响应性的感知其实包括两个因素的：</p>
<ol>
<li><strong>速度：</strong>指的是机器自身的计算能力，机器性能越强，速度越快。 </li>
<li><strong>流畅感：</strong>使用时系统的反馈能否满足用户的时间支配需求。 </li>
</ol>
<p> <span id="more-207"></span></p>
<h3>如何提高速度？</h3>
<p>Google是一间非常注意速度的公司，他们对自身产品的10条要求中，就包括Fast，在他们的<a title="Google User Experience" href="http://www.google.com/corporate/ux.html#fast" target="_blank">用户体验规范</a>中，是这么写道的：</p>
<blockquote><p>Nothing is more valuable than people&#8217;s time.      <br />Speed is a boon to users. It is also a competitive advantage that Google doesn&#8217;t sacrifice without good reason. </p>
<p>没有什么比用户的时间更珍贵了，高速是对用户的礼物。他也是我们的竞争优势，除非有很好的理由，google绝不牺牲速度。</p>
</blockquote>
<p>那么如何提高应用的速度呢，方法其实非常的简单，主要为以下三点：</p>
<ul>
<li><strong>让你的应用更小更轻便</strong>
<p>在一开始，你就要放弃你对于技术与功能的崇拜，因为那只能够满足你内心的小小的骄傲感而已。用户不会关心你是否采用了Ajax，是否能够让其同时做8个任务，他们只关心多久能完成任务。</p>
<p>而这样的例子在一些注重用户体验的产品上比比皆是:<a title="Google 正在测试新版主页，简洁的一塌糊涂" href="http://www.google.org.cn/posts/googles-experimental-homepage-fades-to-a-single-word.html" target="_blank">Google把首页精简到光秃秃</a>；IE6下Gmail的很多高级功能被取消了（这些功能并不是无法实现）；<a title="Google展示Chrome OS操作系统 启动时间仅7秒" href="http://it.sohu.com/20091120/n268344204.shtml" target="_blank">Chromium OS启动只需要7秒钟</a>，我们的网速变得越来越快，<a title="QQv影音1.4———完全安装后exe文件从6M减小到2M以下" href="http://www.cnbeta.com/articles/90333.htm" target="_blank">有些产品的安装包却越来越小</a>。</p>
</li>
<li><strong>延迟非关键性的任务</strong>
<p>我们把一些非时间关键的任务降低其优先级，分配后后台进程去做，把更多的资源用于响应用户，把那些漫长的，无需马上反馈的任务放在一边。如杀毒软件的文件监控，QQ文件中转站上传窗口支持最小化。</p>
</li>
<li><strong>提供更好的硬件设备</strong>
<p>更好的设备，无疑能从最根本上提升应用的速度，<a href="http://zhangwenjie.net/archives/97.html" target="_blank">Google就畅享拥有1000万台服务器</a>，为其搜索提速；网易抢得魔兽世界代理权，丁磊还为魔兽<a title="丁磊：《魔兽世界》服务器已经到位" href="http://game.zol.com.cn/134/1343696.html" target="_blank">买了全新服务器</a>。</p>
</li>
</ul>
<h3>如何提高用户使用的流畅感？</h3>
<p>用户的流畅感，主要来源于系统的反馈。即使在软件运行速度很慢的情况下，仍然可以提供给用户流畅感，就比如即使你进入一家几乎爆满的餐厅，即使上菜需要等很久，但你也可很容易从服务员那里得知什么时候能上菜。</p>
<p>在相同配置的一台电脑上，<a title="真的比XP快？Windows 7激斗上网本" href="http://www.ce.cn/cysc/tech/sm/pc/200902/12/t20090212_18181412.shtml" target="_blank">统计时windows7速度比xp慢</a>，但感觉起来，<a title="Windows 7比 XP快,绝对!" href="http://bbs.ruanmei.com/viewthread.php?tid=173871" target="_blank">他又比xp要快</a>。原因是什么？windows7的反馈更好了。</p>
<p>windows7与Mac OS X都是伟大的系统，他们如何做到更好的反馈呢，也许他们的一些设计原则能够带给我们一些启发。</p>
<ul>
<li><strong>让动画的移动变得流畅清晰</strong>
<p>如果说在使用XP时你看到的是一帧一帧的画面，那么使用windows7你看到的就是一部流畅的电影。</p>
<p>windows独特的aero效果提供轻量级的视觉体验，能够让用户更专注其操作的具体。同时提供类似Mac OS动态缓冲式的窗口切换动画，让窗口的切换不再那些机械突兀，给用户流动的感觉。在这里的2秒钟，用户感觉只有1秒钟。</p>
<p>同样的设计也出现在iPhone上，iPhone的软件启动，有效的减低用户的等待感。<a title="看细节3——手起刀落，弦响鸟坠？ 这种快意，在 iPhone 的桌面点个图标就能体会。" href="http://www.ifanr.com/5280" target="_blank">已有人说了</a>，就不细说。</p>
</li>
<li><strong>N秒原则</strong>
<p>如果一项任务时间超过2秒就必须提供反馈。</p>
<p>如果一项任务时间超过10秒必须提供能够取消的反馈。</p>
<p>这样的反馈有效的提高了用户对系统的了解，即使有可能等待很久，但他也会感觉较为流畅，他甚至可以利用起这段时间做点其他的事情，降低他对等待的憎恶感。</p>
</li>
<li><strong>有效沟通节省不必要的工作</strong>
<p>在很多时候，用户很多的请求是试探性的，一旦他发现这个命令对其毫无意义时就会马上取消它。如：</p>
<blockquote><p>我想要开通QQ黄钻用户！</p>
<p>你确定吗？开通黄钻用户每月将从你手机话费中扣除10元？</p>
<p>啊？不是免费的啊，那我不开通了。</p>
</blockquote>
<p>从以上的范例能得知，有效的沟通避免了用户等待错误命令的执行时间，从另一方面提供了操作的流畅感，并且降低了出错率。</p>
</li>
</ul>
<h3>为什么要提高响应性，它在设计中的比重到底有多少？</h3>
<p>似乎很多人都无法放下心中对技术的贪婪以及对外观的崇拜，响应性往往被其所牺牲，然而，看看我们的用户，他们对速度的的追求，是多么的强烈啊！</p>
<ol>
<li>我们喜欢新窗口看内容，为什么？因为中国网络慢，如果同时开多个窗口，这样我就能在看一篇文章的同时加载另外一篇文章，提高速度。 </li>
<li>我们喜欢用迅雷。迅雷曾推出过英文版<a title="Gigaget" href="http://www.gigaget.com/" target="_blank">Gigaget</a>，可事实上外国人对此并不感冒：高速的网络让他们不需依赖下载加速工具，但迅雷在中国确凭借其P2P技术，成为中国网民下载工具的首选。 </li>
<li>iPhone中程序使用内存超过20M，就随时可能被系统强制终止。苹果宁愿禁止所有第三方程序的后台功能，也不愿意冒风险损害敏捷的响应。由此，iPhone成为这个世界上最快，最被尊崇的手机。（来自<a href="http://www.ifanr.com/5280" target="_blank">iFanr</a>） </li>
</ol>
<p>让我们回到最初的两个问题，其实答案已经呼之欲出，在不久的将来，我们可以预见的是，高响应性将成为所有产品的一致追求，而且这也将成为最有效的竞争优势，互联网时代，以快制胜。</p>
<p>最后引用小马哥的一段话结尾：</p>
<blockquote><p>要做大，你首先要考虑的就是如何让人家想到也追不上。这么多年在IDC(互联网数据中心)上的积累我们不能浪费，高速上传、城域网中转站，支持高速地上传；很快可能又会发现新的问题，如果不是邮件，在IM(即时通讯软件)上又该怎么实现。我们的目的是要让用户感到<strong>超快</strong>、<strong>飞快</strong>，让<strong>用户体验非常好</strong>，这些都需要大量技术和后台来配合。</p>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/make_product_responsive.html/feed</wfw:commentRss>
		<slash:comments>605</slash:comments>
		</item>
		<item>
		<title>使用信息提示提高系统的功能可见性</title>
		<link>http://www.userkon.com/tolyer/improve_visibility_by_infotips.html</link>
		<comments>http://www.userkon.com/tolyer/improve_visibility_by_infotips.html#comments</comments>
		<pubDate>Tue, 17 Nov 2009 02:43:20 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[信息提示]]></category>
		<category><![CDATA[可见性]]></category>

		<guid isPermaLink="false">http://www.userkon.com/?p=400</guid>
		<description><![CDATA[什么是信息提示（Infotips）? 信息提示，用于对一些较为隐性的页面上的元素进行补充说明。通过鼠标悬停来表现。 在这个示例中，用信息提示对链接进行说明 在各种提示当中，信息提示是最有效且实现成本最低的一种提示：他的干扰性很小，容易实现，并且不存在平台或者浏览器兼容问题，实在是居家旅行杀人放火必备提示。 有效的利用信息提示，能够快速提高系统的反馈机制，同时，他还能有效的增强一下系统功能的可见性。 在Gmail与QQmail当中，信息提示得到了非常高的使用频率，尤其是QQmail，他在系统内采用了大量的信息提示来提示用户的操作。 以下是一些截图的示范： 怎么使用信息提示？ 为一些隐性的操作提供说明（如解释什么是抄送） 为图标提供说明（这很重要，因为他能够提高功能的可见性） 其实“设为已读”的文字是否更妥善呢，因为这个图标其实一个按钮。 在页面宽度有限的情况下使信息完整呈现 不要对那些已经很清晰的东西进行信息提示，那样存在沟通过度的行为。 不要重复显示其来源文字，信息提示必须是有效的，不能是信息的重复呈现。 这个信息提示毫无意义，不仅没有帮到用户，还干扰了用户 将信息提示与链接的状态以及鼠标指针进行搭配,是非常完美的一种提示辅助 如下图. 正常情况下鼠标滑过显示邮件标题 滑过时鼠标指针不变化 提示没有上一封邮件]]></description>
			<content:encoded><![CDATA[<h3>什么是信息提示（Infotips）?</h3>
<p>信息提示，用于对一些较为隐性的页面上的元素进行补充说明。通过鼠标悬停来表现。</p>
<p><a title="在这个示例中，用信息提示对链接进行说明 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5578660340/"><img src="http://98.136.170.121/5109/5578660340_1069d41819.jpg" alt="在这个示例中，用信息提示对链接进行说明" width="345" height="98" /></a></p>
<p>在这个示例中，用信息提示对链接进行说明</p>
<p>在各种提示当中，信息提示是最有效且实现成本最低的一种提示：他的干扰性很小，容易实现，并且不存在平台或者浏览器兼容问题，实在是居家旅行杀人放火必备提示。</p>
<p>有效的利用信息提示，能够快速提高系统的反馈机制，同时，他还能有效的增强一下系统功能的可见性。</p>
<p><span id="more-400"></span></p>
<p>在Gmail与QQmail当中，信息提示得到了非常高的使用频率，尤其是QQmail，他在系统内采用了大量的信息提示来提示用户的操作。</p>
<p>以下是一些截图的示范：</p>
<p><a title="Untitled-1 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5578660168/"><img src="http://98.136.170.121/5223/5578660168_9c1be46f1a.jpg" alt="Untitled-1" width="500" height="333" /></a></p>
<h3>怎么使用信息提示？</h3>
<h4>为一些隐性的操作提供说明（如解释什么是抄送）</h4>
<h4>为图标提供说明（这很重要，因为他能够提高功能的可见性）</h4>
<p><a title="a by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5578076217/"><img src="http://98.136.170.121/5096/5578076217_f5daeda280.jpg" alt="a" width="442" height="55" /></a></p>
<p>其实“设为已读”的文字是否更妥善呢，因为这个图标其实一个按钮。</p>
<h4>在页面宽度有限的情况下使信息完整呈现</h4>
<p><a title="b by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5578660578/"><img src="http://98.136.170.121/5262/5578660578_7f1a44739e.jpg" alt="b" width="252" height="92" /></a></p>
<h4>不要对那些已经很清晰的东西进行信息提示，那样存在沟通过度的行为。</h4>
<p><a title="c by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5578076575/"><img src="http://98.136.170.121/5264/5578076575_48fdf2da8d_t.jpg" alt="c" width="97" height="77" /></a></p>
<h4>不要重复显示其来源文字，信息提示必须是有效的，不能是信息的重复呈现。</h4>
<p><a title="d by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5578076699/"><img src="http://98.136.170.121/5309/5578076699_57c383cd6a_m.jpg" alt="d" width="179" height="64" /></a></p>
<p>这个信息提示毫无意义，不仅没有帮到用户，还干扰了用户</p>
<h4>将信息提示与链接的状态以及鼠标指针进行搭配,是非常完美的一种提示辅助</h4>
<p>如下图. 正常情况下鼠标滑过显示邮件标题 滑过时鼠标指针不变化 提示没有上一封邮件</p>
<p><a title="Untitled-2 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/5578103581/"><img src="http://98.136.170.121/5024/5578103581_c2f51a020f.jpg" alt="Untitled-2" width="500" height="327" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/improve_visibility_by_infotips.html/feed</wfw:commentRss>
		<slash:comments>46</slash:comments>
		</item>
		<item>
		<title>高度认知与低度认知</title>
		<link>http://www.userkon.com/tolyer/highly_cognitive_and_minuent_cognitive.html</link>
		<comments>http://www.userkon.com/tolyer/highly_cognitive_and_minuent_cognitive.html#comments</comments>
		<pubDate>Fri, 13 Nov 2009 12:22:00 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[低度认知]]></category>
		<category><![CDATA[就这么简单]]></category>
		<category><![CDATA[高度认知]]></category>

		<guid isPermaLink="false">http://www.userkon.com/?p=197</guid>
		<description><![CDATA[这是爱情公寓的注册页面，看到这幅图片您一定会乐了，因为两个按钮上的文字；但我们所关注的并不是其情感化的贴心语句，而是其所包含的对于高度认知与低度认知的差异化设计。 高度认知与低度认知是对用户的分类的一种维度，他对按照熟练度区分而出来的新手用户与专家用户既有相同性但也存在差异。高度认知与低度认知的差异的原因更多是文化以及生活习惯的沉淀，他们之间的相互转化也比较困难。在设计上，有必要考虑对两种用户的差异化而进行设计。 什么是高度认知与低度认知？ 有些人对于大部分信息都了然于胸，在操作的时候，更加依赖自己的经验或者习惯，因此，他们对于信息的需求量非常的少，有时候他们只需要很少的信息就能了解系统的状态。但有时候他们也容易过渡遵循自己的习惯于经验，即使出错也会一次次的重复操作下去。 低度认知则刚好相反，他们在操作的时候总是小心翼翼，生怕错过了重要的信息。他们需要阅读大量的信息，不然他们就难以确定是否要驱动其操作。他们不是“笨蛋”，也不是“新手”，他们只是更加注意细节。 在《就这么简单》这本书内，作者有提到： 中国用户大多为高度认知，因为中国人偏好自由与广泛的信息流通，不管是搜集信息还是处理货传递信息，彼此之间的寻求与机遇都非常的频繁，属于高度的信息共享。（想想大家是怎么分享电影，音乐的） 而在德国等低度认知的区域，信息相当的零散与片面，信息通常也不会共享，而且通常经过筛选。（经研究统计，他们使用搜索引擎的频率非常的高）这些地区的人在处理事物时，总是习惯要对该事物有全盘的了解才肯信任它。 抛开其用户分类方式，我们可以考虑从用户习惯中来尝试佐证这一分类。中国用户偏好使用短信，QQ，等一些简短的信息进行沟通，对比而言德国用户则偏向使用邮件，电话或者面谈来进行沟通。这是否可以确定此分类呢？ 如何给这种两种用户提供信息？ 虽然说高度认知的用户需要的信息量很少，但他们的阅读方式通常都是跳跃式的，意味着他们很容易就忽略了你为他提供的信息，他们也不会很老实的照着你设计的那样去浏览与实用，他们喜欢多任务处理，去挑战你设计的系统的极限。 存在的问题是，设计师无法预估这些用户对于信息的忽略的选择，可为保证系统功能的可见性，又不得不把所有的信息量展现出来。这真是矛盾的所在。 对于低度认知的用户而言，他们的操作偏向于单线程，他们对于信息会较为细心的阅读，同时他们也更具有耐心，愿意去学习，愿意努力去尝试或者去挖掘一些高级功能。 从总的上来说，高度认知的用户的操作会偏向宽而浅，同时处理的进程较多，但不够深入。低度认知用户则窄而深，他们能够将一个进程挖掘到底，他们会更多的去尝试高级功能。 如何设计？ 对于高度认知用户，我们应尽量的保证不打断其操作：在反馈的提示上，尽量简练明显。而对于信息的呈现，则应全盘呈现，把控制权与选择权更多交予用户。 在另外一方面，高度认知用户缺乏挖掘的耐心，所以，尽量的让功能可见并且一步到位。 对于低度认知用户而言，设计师们面临着更大的挑战，虽然他们愿意学习，有耐心，这就代表着系统必须有很强的导向性以及可学性。同时能够有更多的高级功能。 注意：无论对于那种设计而言，其在布局以及视觉的导向性与隐喻都是一致的。一个清晰的布局和架构是任何设计都必须的。 回到最初的图片，可以预见，完整注册属于一种低度认知设计，而快速注册则属于高度认知用户。当然，我们也可以用下面的两张图片进行举例对比。 在两个邮箱内，我们分别点击导航上的另外一个链接，两个邮箱都同时提供了“Loading”的反馈。有所不同的是：在点击另外一个链接时，Gmail是先在浮层内提示Loading，然后再呈现左侧导航的选中状态变化，以及右侧邮件列表的变化。AOLmail则先展现导航的选中状态变化，并在右侧显示Loading，然后再在右侧显示邮件列表的变化。 也许只是短暂的不到一秒的情况，发觉不了差异，但我们不妨做个假设，这个Loading需要的时间是1分钟。你能感觉出设计的差异化吗？ 高度认知设计提倡用户多任务处理，无论用户行为怎么样，并不直接打断用户的操作，让用户来处理这些事情（有可能这是很严重的问题）。有点像CPU多核概念。 低度认知则尽可能的让用户专注于当前的任务，帮助他更好的处理好当前的任务，而对于其他，他们并不关心。 也许你还不甚明白，那么可以再看看下面的这个例子。 同样的表格填写错误，高度认知设计不建议打断用户的操作，而低度认知则强调了这种打断，因为他可能是必须且重要的。 总结 当然，高度认知与低度认知只是对于用户习惯一种维度的区分，在设计上其实是可以达到并存的。此文只对其进行一些行为上的区分。 而在具体的一些设计当中，会根据功能的重要级与其属性，采用不同的设计方案，灵活多用。高度认知与低度认知的设计差异只是有助于理解设计的出发点，对于设计的指导性并不强烈。]]></description>
			<content:encoded><![CDATA[<p><a title="点击查看大图" href="http://farm3.static.flickr.com/2463/3964791356_f85fed1e57_o.jpg"><img src="http://69.147.90.215/2463/3964791356_4c11aafdbf.jpg" alt="点击查看大图" width="500" height="261" /></a></p>
<p>这是爱情公寓的注册页面，看到这幅图片您一定会乐了，因为两个按钮上的文字；但我们所关注的并不是其情感化的贴心语句，而是其所包含的对于高度认知与低度认知的差异化设计。</p>
<blockquote><p>高度认知与低度认知是对用户的分类的一种维度，他对按照熟练度区分而出来的新手用户与专家用户既有相同性但也存在差异。高度认知与低度认知的差异的原因更多是文化以及生活习惯的沉淀，他们之间的相互转化也比较困难。在设计上，有必要考虑对两种用户的差异化而进行设计。</p></blockquote>
<h3>什么是高度认知与低度认知？</h3>
<p>有些人对于大部分信息都了然于胸，在操作的时候，更加依赖自己的经验或者习惯，因此，他们对于信息的需求量非常的少，有时候他们只需要很少的信息就能了解系统的状态。但有时候他们也容易过渡遵循自己的习惯于经验，即使出错也会一次次的重复操作下去。</p>
<p><span id="more-197"></span></p>
<p>低度认知则刚好相反，他们在操作的时候总是小心翼翼，生怕错过了重要的信息。他们需要阅读大量的信息，不然他们就难以确定是否要驱动其操作。他们不是“笨蛋”，也不是“新手”，他们只是更加注意细节。</p>
<p>在<a href="http://www.douban.com/subject/3118374/" target="_blank">《就这么简单》</a>这本书内，作者有提到：</p>
<blockquote><p>中国用户大多为高度认知，因为中国人偏好自由与广泛的信息流通，不管是搜集信息还是处理货传递信息，彼此之间的寻求与机遇都非常的频繁，属于高度的信息共享。（想想大家是怎么分享电影，音乐的）</p>
<p>而在德国等低度认知的区域，信息相当的零散与片面，信息通常也不会共享，而且通常经过筛选。（经研究统计，他们使用搜索引擎的频率非常的高）这些地区的人在处理事物时，总是习惯要对该事物有全盘的了解才肯信任它。</p></blockquote>
<p>抛开其用户分类方式，我们可以考虑从用户习惯中来尝试佐证这一分类。中国用户偏好使用短信，QQ，等一些简短的信息进行沟通，对比而言德国用户则偏向使用邮件，电话或者面谈来进行沟通。这是否可以确定此分类呢？</p>
<h3>如何给这种两种用户提供信息？</h3>
<p>虽然说高度认知的用户需要的信息量很少，但他们的阅读方式通常都是跳跃式的，意味着他们很容易就忽略了你为他提供的信息，他们也不会很老实的照着你设计的那样去浏览与实用，他们喜欢多任务处理，去挑战你设计的系统的极限。</p>
<p>存在的问题是，设计师无法预估这些用户对于信息的忽略的选择，可为保证系统功能的可见性，又不得不把所有的信息量展现出来。这真是矛盾的所在。</p>
<p>对于低度认知的用户而言，他们的操作偏向于单线程，他们对于信息会较为细心的阅读，同时他们也更具有耐心，愿意去学习，愿意努力去尝试或者去挖掘一些高级功能。</p>
<p>从总的上来说，高度认知的用户的操作会偏向宽而浅，同时处理的进程较多，但不够深入。低度认知用户则窄而深，他们能够将一个进程挖掘到底，他们会更多的去尝试高级功能。</p>
<h3>如何设计？</h3>
<ol>
<li>对于高度认知用户，我们应尽量的保证不打断其操作：在反馈的提示上，尽量简练明显。而对于信息的呈现，则应全盘呈现，把控制权与选择权更多交予用户。
<p>在另外一方面，高度认知用户缺乏挖掘的耐心，所以，尽量的让功能可见并且一步到位。</li>
<li>对于低度认知用户而言，设计师们面临着更大的挑战，虽然他们愿意学习，有耐心，这就代表着系统必须有很强的导向性以及可学性。同时能够有更多的高级功能。</li>
<li><strong>注意：</strong>无论对于那种设计而言，其在布局以及视觉的导向性与隐喻都是一致的。一个清晰的布局和架构是任何设计都必须的。</li>
</ol>
<p>回到最初的图片，可以预见，完整注册属于一种低度认知设计，而快速注册则属于高度认知用户。当然，我们也可以用下面的两张图片进行举例对比。</p>
<p><a title="高度认知-Gmail.png" href="http://www.flickr.com/photos/41128764@N02/4108164069/"><img src="http://69.147.90.215/2654/4108164069_df5aae13fc.jpg" border="0" alt="高度认知-Gmail.png" hspace="0" /></a></p>
<p><a title="低度认知-aol.png" href="http://www.flickr.com/photos/41128764@N02/4108163857/"><img src="http://69.147.90.215/2764/4108163857_3050c7f22b.jpg" border="0" alt="低度认知-aol.png" hspace="0" /></a></p>
<p>在两个邮箱内，我们分别点击导航上的另外一个链接，两个邮箱都同时提供了“Loading”的反馈。有所不同的是：在点击另外一个链接时，Gmail是先在浮层内提示Loading，然后再呈现左侧导航的选中状态变化，以及右侧邮件列表的变化。AOLmail则先展现导航的选中状态变化，并在右侧显示Loading，然后再在右侧显示邮件列表的变化。</p>
<p>也许只是短暂的不到一秒的情况，发觉不了差异，但我们不妨做个假设，这个Loading需要的时间是1分钟。你能感觉出设计的差异化吗？</p>
<p>高度认知设计提倡用户多任务处理，无论用户行为怎么样，并不直接打断用户的操作，让用户来处理这些事情（有可能这是很严重的问题）。有点像CPU多核概念。</p>
<p>低度认知则尽可能的让用户专注于当前的任务，帮助他更好的处理好当前的任务，而对于其他，他们并不关心。</p>
<p>也许你还不甚明白，那么可以再看看下面的这个例子。</p>
<p><a title="高度认知-填表.png" href="http://www.flickr.com/photos/41128764@N02/4108182687/"><img src="http://69.147.90.215/2581/4108182687_5902e6fb4d.jpg" border="0" alt="高度认知-填表.png" hspace="0" /></a></p>
<p><a title="低度认知-填表.png" href="http://www.flickr.com/photos/41128764@N02/4108182569/"><img src="http://69.147.90.215/2630/4108182569_88d53d0211.jpg" border="0" alt="低度认知-填表.png" hspace="0" /></a></p>
<p>同样的表格填写错误，高度认知设计不建议打断用户的操作，而低度认知则强调了这种打断，因为他可能是必须且重要的。</p>
<h3>总结</h3>
<p>当然，高度认知与低度认知只是对于用户习惯一种维度的区分，在设计上其实是可以达到并存的。此文只对其进行一些行为上的区分。</p>
<p>而在具体的一些设计当中，会根据功能的重要级与其属性，采用不同的设计方案，灵活多用。高度认知与低度认知的设计差异只是有助于理解设计的出发点，对于设计的指导性并不强烈。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/highly_cognitive_and_minuent_cognitive.html/feed</wfw:commentRss>
		<slash:comments>71</slash:comments>
		</item>
		<item>
		<title>设计中的本土化</title>
		<link>http://www.userkon.com/tolyer/design_to_localize.html</link>
		<comments>http://www.userkon.com/tolyer/design_to_localize.html#comments</comments>
		<pubDate>Wed, 04 Nov 2009 03:14:44 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[本土化]]></category>

		<guid isPermaLink="false">http://www.userkon.com/?p=171</guid>
		<description><![CDATA[看幻灯片不说话。刚进公司的时候的第一份PPT。恶搞了一下。 看不见的同学点这里传送门。]]></description>
			<content:encoded><![CDATA[<p>看幻灯片不说话。刚进公司的时候的第一份PPT。恶搞了一下。<br />
看不见的同学点这里<a title="设计中的本土化" href="http://docs.google.com/present/view?id=ddt965j4_0fv2xv2fv&amp;interval=5" target="_self">传送门</a>。</p>
<p><iframe src="http://docs.google.com/present/embed?id=ddt965j4_0fv2xv2fv&#038;interval=5&#038;size=m" frameborder="0" width="555" height="451"></iframe></p>
<p><span id="more-171"></span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/design_to_localize.html/feed</wfw:commentRss>
		<slash:comments>71</slash:comments>
		</item>
		<item>
		<title>WEB应用中导航的思考</title>
		<link>http://www.userkon.com/tolyer/about_web_app_navigation.html</link>
		<comments>http://www.userkon.com/tolyer/about_web_app_navigation.html#comments</comments>
		<pubDate>Thu, 22 Oct 2009 11:23:41 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[三次点击原则]]></category>
		<category><![CDATA[导航]]></category>
		<category><![CDATA[结构树]]></category>

		<guid isPermaLink="false">http://www.userkon.com/tolyer/web%e5%ba%94%e7%94%a8%e4%b8%ad%e5%af%bc%e8%88%aa%e7%9a%84%e6%80%9d%e8%80%83.html</guid>
		<description><![CDATA[导航与站点结构树的关系？ 从信息结构上来讲，按照严谨的分类，每个网站结构都可以用一个结构树来表示。 在进行卡片分类等研究过程中，往往会建立一种极其严谨的从属关系；简而言之，卡片分类是让逻辑清晰，但是这个结构树可能非常的宽而且深。在这种情况下，如果导航依然保持与结构树的对应显示，显然会与其浅度要求产生冲突。 一个直白明了的导航可能会打破逻辑关系，采用自然语言能够理解的结构。 事实上无论横排导航还是纵列导航，假如入屏幕足够宽或足够长，那么只需要一级导航就可以。这种好处是用户更快找到自己想要的内容，但也打破了导航的结构树体现。 无论从那种角度上来说，用户并不需要了解网站具体的结构树，导航也不必完全照着结构树来体现，以下是各种交互组件对结构树的体现度的排列。从左到右依次降低。 对于信息分类体现度的示意图 导航与面包屑的区别？ 导航是告诉用户可以去哪，面包屑是告诉用户现在在哪。 面包屑比导航更注重信息的分类以及从属关系，面包屑可以告诉用户当前页面的父级元素以及进入路径，导航则不可以。导航只能大致体现用户的当前位置。 全局导航和局部导航在大部分情况下依然还是遵从站点结构树，因此，不少站点选择了将到会与面包屑结合的方式呈现。这是值得推崇的。那在具体使用时需考虑实际情况。 导航与面包屑如何结合？ 导航与面包屑的最有效结合就如Vista内路径条一样。但是所有的这些结合，都是建立在信息架构足够清晰、足够稳固同时又足够灵活的基础之上的。 Vista系统的路径条 如果网站信息太丰富、太复杂，有些内容不能明确划分到某个类别中，面包屑就会变成鸡肋，导航与面包屑的集合也变得毫无作用；这方面的典型就是门户网站。 如果你的网站结构够清晰，内容也够稳定，那么极有可能是企业或个人网站，对于这种站点，这种结合则显得非常的高效和优秀。 导航与其他相关元素的结合于区别？ § 实用工具（Utility） 实用工具是到达网站中不属于内容层次的重要元素的链接。他在页面上一般为这些元素：用户登录，帮助信息，关于我们等。实用工具能够有效的帮助我们怎么使用站点；通常，全局导航附近会出现4-5个实用工具。 § 网站标志（Logo） 网站标志，导航，面包屑都能够告诉用户当前在什么位置，仅仅只是详细的区别。通常，网站标志与全局导航共同存在，并且会出现在其右侧。网站标志同样提供一个和全局导航相同的路径：回到首页。但这不意味着，导航可以取消此路径。 § 搜索栏（search Bar） 海量的信息将会使导航不堪重负，搜索似乎是现有的最佳解决办法。对于超大型站点而言，导航很大程度上已经失去作用，搜索成为最重要的路径提供工具。导航仅仅只会按照信息的物理属性而对其进行辅助。 搜索栏与导航同样都告诉用户可以去哪里，为用户提供进入站点路径；搜索栏因此会出现在导航附近区域。如，全局导航右侧。 如何导航用户生产的信息？ Web应用当中，对于用户生产出来的信息，除了提供简单的默认分类之外，大部分应用是提供用户自定义分类的。当用户选择自定义分类时，导航条则不属于这种应用场景。更多的采用的是标签云（Tags Cloud），树状图（Tree）或者链接列表（link list）样式。 如何看待“三次点击“原则? 谓的“三次点击”原则，是站内的链接的一个指导原则，让网站“链接结构”扁平化。从首页开始，网站内的内容经3次点击即可到达。 如企业站：首页 -&#62; 产品列表 -&#62; 产品页(2次) 如资讯站：首页 &#8230; <a href="http://www.userkon.com/tolyer/about_web_app_navigation.html">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<h3>导航与站点结构树的关系？</h3>
<p>从信息结构上来讲，按照严谨的分类，每个网站结构都可以用一个结构树来表示。</p>
<p>在进行卡片分类等研究过程中，往往会建立一种极其严谨的从属关系；简而言之，卡片分类是让逻辑清晰，但是这个结构树可能非常的宽而且深。在这种情况下，如果导航依然保持与结构树的对应显示，显然会与其浅度要求产生冲突。</p>
<p>一个直白明了的导航可能会打破逻辑关系，采用自然语言能够理解的结构。</p>
<p>事实上无论横排导航还是纵列导航，假如入屏幕足够宽或足够长，那么只需要一级导航就可以。这种好处是用户更快找到自己想要的内容，但也打破了导航的结构树体现。</p>
<p>无论从那种角度上来说，用户并不需要了解网站具体的结构树，导航也不必完全照着结构树来体现，以下是各种交互组件对结构树的体现度的排列。从左到右依次降低。</p>
<p><a title="对于信息分类体现度的示意图.png" href="http://www.flickr.com/photos/41128764@N02/4033861047/"><img src="http://69.147.90.215/2477/4033861047_2cd18c1751.jpg" border="0" alt="对于信息分类体现度的示意图.png" hspace="0" /></a></p>
<p><strong>对于信息分类体现度的示意图</strong><br />
<span id="more-124"></span></p>
<h3>导航与面包屑的区别？</h3>
<p>导航是告诉用户可以去哪，面包屑是告诉用户现在在哪。</p>
<p>面包屑比导航更注重信息的分类以及从属关系，面包屑可以告诉用户当前页面的父级元素以及进入路径，导航则不可以。导航只能大致体现用户的当前位置。</p>
<p>全局导航和局部导航在大部分情况下依然还是遵从站点结构树，因此，不少站点选择了将到会与面包屑结合的方式呈现。这是值得推崇的。那在具体使用时需考虑实际情况。</p>
<h3>导航与面包屑如何结合？</h3>
<p>导航与面包屑的最有效结合就如Vista内路径条一样。但是所有的这些结合，都是建立在信息架构足够清晰、足够稳固同时又足够灵活的基础之上的。</p>
<p><a title="Vista系统的路径条.png" href="http://www.flickr.com/photos/41128764@N02/4034614620/"><img src="http://69.147.90.215/2509/4034614620_56b19ea7a6.jpg" border="0" alt="Vista系统的路径条.png" hspace="0" /></a></p>
<p><strong>Vista</strong><strong>系统的路径条</strong></p>
<p>如果网站信息太丰富、太复杂，有些内容不能明确划分到某个类别中，面包屑就会变成鸡肋，导航与面包屑的集合也变得毫无作用；这方面的典型就是门户网站。</p>
<p>如果你的网站结构够清晰，内容也够稳定，那么极有可能是企业或个人网站，对于这种站点，这种结合则显得非常的高效和优秀。</p>
<h3>导航与其他相关元素的结合于区别？</h3>
<p>§ <strong>实用工具（Utility</strong><strong>）</strong></p>
<p>实用工具是到达网站中不属于内容层次的重要元素的链接。他在页面上一般为这些元素：用户登录，帮助信息，关于我们等。实用工具能够有效的帮助我们怎么使用站点；通常，全局导航附近会出现4-5个实用工具。</p>
<p>§ <strong>网站标志（Logo</strong><strong>）</strong></p>
<p>网站标志，导航，面包屑都能够告诉用户当前在什么位置，仅仅只是详细的区别。通常，网站标志与全局导航共同存在，并且会出现在其右侧。网站标志同样提供一个和全局导航相同的路径：回到首页。但这不意味着，导航可以取消此路径。</p>
<p>§ <strong>搜索栏（search Bar</strong><strong>）</strong></p>
<p>海量的信息将会使导航不堪重负，搜索似乎是现有的最佳解决办法。对于超大型站点而言，导航很大程度上已经失去作用，搜索成为最重要的路径提供工具。导航仅仅只会按照信息的物理属性而对其进行辅助。</p>
<p>搜索栏与导航同样都告诉用户可以去哪里，为用户提供进入站点路径；搜索栏因此会出现在导航附近区域。如，全局导航右侧。</p>
<h3>如何导航用户生产的信息？</h3>
<p>Web应用当中，对于用户生产出来的信息，除了提供简单的默认分类之外，大部分应用是提供用户自定义分类的。当用户选择自定义分类时，导航条则不属于这种应用场景<a name="_ftnref1_1930"></a>。更多的采用的是标签云（Tags Cloud），树状图（Tree）或者链接列表（link list）样式。</p>
<h3>如何看待“三次点击“原则?</h3>
<p>谓的“三次点击”原则，是站内的链接的一个指导原则，让网站“链接结构”扁平化。从首页开始，网站内的内容经3次点击即可到达。</p>
<p>如企业站：首页 -&gt; 产品列表 -&gt; 产品页(2次)</p>
<p>如资讯站：首页 -&gt; 频道 -&gt; 栏目 -&gt; 内容 (3次)</p>
<p>“三次点击”原则要求必须将信息架构尽量压扁，当遇到海量信息，问题出现了：扁平的信息架构造成了冗长的内容列表，对于导航而言，这有可能导致链接列表项目非常的多，反而不利于用户检索信息。</p>
<p>我们可以看到，“三次点击”原则提供了网站设计的一个重要的参照规范，他的不适用只限于超大型信息站点（如163.com），如果恪守原则的话，用户往往需要进行“内容-列表-内容-列表-”的拨浪鼓式操作。要缩短浏览路径，就必须要建立“内容-内容”的信息关联，建立信息闭环<a name="_ftnref2_1930"></a>。</p>
<p>查看关于导航的所有规范,请进入<a href="http://www.userkon.com/labs/web_widget_guildline">优涩控实验室</a></p>
<hr size="1" /><a name="_ftn1_1930"></a> 对于系统默认的分类依然可以使用导航条。</p>
<p><a name="_ftn2_1930"></a> 可参考http://www.hozin.com/Point/200908/Information-Closed-Loop.html</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/about_web_app_navigation.html/feed</wfw:commentRss>
		<slash:comments>54</slash:comments>
		</item>
		<item>
		<title>WEB应用对话框思考</title>
		<link>http://www.userkon.com/tolyer/about_web_app_daillog_box.html</link>
		<comments>http://www.userkon.com/tolyer/about_web_app_daillog_box.html#comments</comments>
		<pubDate>Thu, 22 Oct 2009 11:16:31 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互设计]]></category>
		<category><![CDATA[对话框]]></category>
		<category><![CDATA[窗口]]></category>

		<guid isPermaLink="false">http://www.userkon.com/tolyer/web%e5%ba%94%e7%94%a8%e5%af%b9%e8%af%9d%e6%80%9d%e8%80%83.html</guid>
		<description><![CDATA[浏览器窗口的中国特色？ 浏览器对话框与通用对话框皆为模式对话框。但因为其被用于一些恶意行为（如添加收藏夹，设为首页，无限确认）一些国内的浏览器已经开始屏蔽其独占性。 这些浏览器包括，傲游，世界之窗，搜狗浏览器，360安全浏览器。而主流的IE，FF，Chrome，Oprea，Safari都未进行屏蔽。 同样，弹出窗（Popup Windows）因为常被用于广告，大部分浏览器也存在了对其屏蔽了功能。导致在国内的web应用中极少出现此类窗口，大多数处理方式是直接在框架内嵌入。 但随着国内互联网的成熟，以及弹出窗在Miscrosoft Vista以上系统的轻量级呈现和其本身的良好体验，可以考虑提供弹出窗（Popup Windows）。 关于Web中窗口的深度及其搭配？ 理论上，web应用上的所有窗口都可以采用内建对话框的形式。 Web应用缺乏像Windows系统那样一个提供窗口管理以及切换的任务栏，且因为开发难度的问题，web应用也无法向Windows那样提供窗口与窗口的纵深感。 因此，当需要对窗口进行纵深感的呈现时，通常会采用不同类型的对话窗口在进行区分。而常用的做法就是将内建对话框作为其他对话框的父级窗口。 举个例子，大附件面板（这里采用QQ邮箱为例） 当添加文件时，窗口的搭配是这样的。通用对话框在内建对话框前端显示，且为模式对话框。 通用对话框层叠内建对话框 当对高危操作进行二次确认的时候，他们的搭配是这样的。浏览器的对话框位于内建对话框前端。且为模式对话框。 浏览器对话框层叠内建对话框 从中我们可以看到，当出现内建对话框时，为了对窗口进行区分，不得不采用浏览器对话框来对高危操作进行二次确认，同时，为了保持系统内部的一致性，所以也建议，所有的高危操作的二次确认都采用浏览器对话框来呈现。如清空回收站，彻底删除某邮件。 “确定、取消”还是“是、否”？ 对话框，意思就是，看起来就像对话一样，在需要用户作出判断的时候，主标题说明与按钮的标题能够被认为是一段对话。 注意对话模型 相反，像这样的对话框就有点令人难以琢磨。 主标题说明与按钮无法达成对话 QQ邮箱的对话框问答则较为合理。 QQ较好的对话模型 到底是“确定、取消”还是“是、否”？一般而言，确定用于对一个已经执行的命令进行下一步的确定，而“是”“否”则用于是否开始一个命令或进入某个页面和流程。 具体来说没有这么复杂，用户对对话框的扫描一般只是主标题说明的前几个字而已，因此我们只需要记住这样的对话模型就好了。 “您确定……？” 确定，取消 “您是否要……？” 是，否，取消（可考虑增加） 当然，我们还有更好的解决方案，更直接的回答。如： 用“立即插入”代替确定，更加明白 提示：不修改“取消”标题，免得让用户误解。 除此之外，我们依然还需要留意按钮标题的达意。如下图： “关闭”明白表示其操作 最后，我们需要关注标题，按钮标题，与内建对话框的的文字的呼应以及相关性。]]></description>
			<content:encoded><![CDATA[<h3>浏览器窗口的中国特色？</h3>
<p>浏览器对话框与通用对话框皆为模式对话框。但因为其被用于一些恶意行为（如添加收藏夹，设为首页，无限确认）一些国内的浏览器已经开始屏蔽其独占性。</p>
<p>这些浏览器包括，傲游，世界之窗，搜狗浏览器，360安全浏览器。而主流的IE，FF，Chrome，Oprea，Safari都未进行屏蔽。</p>
<p>同样，弹出窗（Popup Windows）因为常被用于广告，大部分浏览器也存在了对其屏蔽了功能。导致在国内的web应用中极少出现此类窗口，大多数处理方式是直接在框架内嵌入。</p>
<p>但随着国内互联网的成熟，以及弹出窗在Miscrosoft Vista以上系统的轻量级呈现和其本身的良好体验，可以考虑提供弹出窗（Popup Windows）。</p>
<h3>关于Web中窗口的深度及其搭配？</h3>
<p>理论上，web应用上的所有窗口都可以采用内建对话框的形式。</p>
<p>Web应用缺乏像Windows系统那样一个提供窗口管理以及切换的任务栏，且因为开发难度的问题，web应用也无法向Windows那样提供窗口与窗口的纵深感。</p>
<p>因此，当需要对窗口进行纵深感的呈现时，通常会采用不同类型的对话窗口在进行区分。而常用的做法就是将内建对话框作为其他对话框的父级窗口。</p>
<p>举个例子，大附件面板（这里采用QQ邮箱为例）</p>
<p>当添加文件时，窗口的搭配是这样的。通用对话框在内建对话框前端显示，且为模式对话框。<br />
<span id="more-122"></span><br />
<a title="通用对话框层叠内建对话框.png" href="http://www.flickr.com/photos/41128764@N02/4033841805/"><img src="http://69.147.90.215/2735/4033841805_c8d5c1cfa2.jpg" border="0" alt="通用对话框层叠内建对话框.png" hspace="0" /></a></p>
<p><strong>通用对话框层叠内建对话框</strong></p>
<p>当对高危操作进行二次确认的时候，他们的搭配是这样的。浏览器的对话框位于内建对话框前端。且为模式对话框。</p>
<p><strong> </strong></p>
<p><a title="浏览器对话框层叠内建对话框.png" href="http://www.flickr.com/photos/41128764@N02/4033841665/"><img src="http://69.147.90.215/2787/4033841665_3a8cfdeeec.jpg" border="0" alt="浏览器对话框层叠内建对话框.png" hspace="0" /></a></p>
<p><strong>浏览器对话框层叠内建对话框</strong></p>
<p>从中我们可以看到，当出现内建对话框时，为了对窗口进行区分，不得不采用浏览器对话框来对高危操作进行二次确认，同时，为了保持系统内部的一致性，所以也建议，所有的高危操作的二次确认都采用浏览器对话框来呈现。如清空回收站，彻底删除某邮件。</p>
<h3>“确定、取消”还是“是、否”？</h3>
<p>对话框，意思就是，看起来就像对话一样，在需要用户作出判断的时候，主标题说明与按钮的标题能够被认为是一段对话。</p>
<p><a title="注意对话模型.png" href="http://www.flickr.com/photos/41128764@N02/4034596360/"><img src="http://69.147.90.215/2503/4034596360_28a524e099.jpg" border="0" alt="注意对话模型.png" hspace="0" /></a></p>
<p><strong>注意对话模型</strong></p>
<p>相反，像这样的对话框就有点令人难以琢磨。</p>
<p><a title="主标题说明与按钮无法达成对话.png" href="http://www.flickr.com/photos/41128764@N02/4034596118/"><img src="http://69.147.90.215/2761/4034596118_94028d7464.jpg" border="0" alt="主标题说明与按钮无法达成对话.png" hspace="0" /></a></p>
<p><strong>主标题说明与按钮无法达成对话</strong></p>
<p>QQ邮箱的对话框问答则较为合理。</p>
<p><a title="QQ较好的对话模型.png" href="http://www.flickr.com/photos/41128764@N02/4033841531/"><img src="http://69.147.90.215/2533/4033841531_82f7b2aefd.jpg" border="0" alt="QQ较好的对话模型.png" hspace="0" /></a></p>
<p><strong>QQ</strong><strong>较好的对话模型</strong></p>
<p>到底是“确定、取消”还是“是、否”？一般而言，确定用于对一个已经执行的命令进行下一步的确定，而“是”“否”则用于是否开始一个命令或进入某个页面和流程。</p>
<p>具体来说没有这么复杂，用户对对话框的扫描一般只是主标题说明的前几个字而已，因此我们只需要记住这样的对话模型就好了。</p>
<p><strong>“您确定……？”</strong></p>
<p><strong>确定，取消</strong></p>
<p><strong>“您是否要……？”</strong></p>
<p><strong>是，否，取消（可考虑增加）</strong></p>
<p>当然，我们还有更好的解决方案，更直接的回答。如：</p>
<p><a title="用“立即插入”代替确定，更加明白.png" href="http://www.flickr.com/photos/41128764@N02/4034596038/"><img src="http://69.147.90.215/2775/4034596038_9389baf8a3.jpg" border="0" alt="用“立即插入”代替确定，更加明白.png" hspace="0" /></a></p>
<p><strong>用“立即插入”代替确定，更加明白</strong></p>
<p><strong>提示：</strong>不修改“取消”标题，免得让用户误解。</p>
<p>除此之外，我们依然还需要留意按钮标题的达意。如下图：</p>
<p><a title="“关闭”明白表示其操作.png" href="http://www.flickr.com/photos/41128764@N02/4033841413/"><img src="http://69.147.90.215/2638/4033841413_0c038e514d.jpg" border="0" alt="“关闭”明白表示其操作.png" hspace="0" /></a></p>
<p><strong>“关闭”明白表示其操作</strong></p>
<p>最后，我们需要关注标题，按钮标题，与内建对话框的的文字的呼应以及相关性。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/about_web_app_daillog_box.html/feed</wfw:commentRss>
		<slash:comments>78</slash:comments>
		</item>
	</channel>
</rss>

