<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[傅路镔(大神)的博客 - 用户体验]]></title>
<link>http://www.wapchina.net/</link>
<description><![CDATA[在路上]]></description>
<language>zh-cn</language>
<copyright><![CDATA[Copyright 2005 PBlog3 v2.8]]></copyright>
<webMaster><![CDATA[fulubin@gmail.com(大神)]]></webMaster>
<generator>PBlog2 v2.4</generator> 
<image>
	<title>傅路镔(大神)的博客</title>
	<url>http://www.wapchina.net/images/logos.gif</url>
	<link>http://www.wapchina.net/</link>
	<description>傅路镔(大神)的博客</description>
</image>

			<item>
			<link>http://www.wapchina.net/article.asp?id=110</link>
			<title><![CDATA[从苹果的iPhone看人机交互技术]]></title>
			<author>fulubin@gmail.com(admin)</author>
			<category><![CDATA[用户体验]]></category>
			<pubDate>Sat,22 May 2010 09:18:28 +0800</pubDate>
			<guid>http://www.wapchina.net/default.asp?id=110</guid>
		<description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="font-family: Arial, Tahoma, Verdana; font-size: 13px; color: rgb(51, 51, 51); line-height: 21px; ">在2007年1月9日于美国旧金山举行的Macworld展会上，苹果公司宣布正式推出该公司的第一款同时具备移动电话、音乐播放器以及互联网信息终端功能的手持设备：iPhone。该公司首席执行官Steve Jobs 对于这款全新产品的描述是：&ldquo;iPhone是一款革命性的、不可思议的产品&rdquo;。这个只有手掌大小的产品中竟包含了超过两百项的专利技术。下面，我们就将深入分析iPhone在人机交互设计方面的一些特点。
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; ">&ldquo;信息就在指尖&rdquo;</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>或许你对于这句话并不陌生。不过现在，苹果公司给了它一个新的解释。因为这一次，你既不是敲击键盘，也不是点击鼠标，而是只需用自己的手指在一个小小的屏幕上进行触摸就可以了。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>在2007年1月9日于美国旧金山举行的Macworld展会上，苹果公司宣布正式推出该公司的第一款同时具备移动电话、音乐播放器以及互联网信息终端功能的手持设备：iPhone。该公司首席执行官Steve Jobs 对于这款全新产品的描述是：&ldquo;iPhone是一款革命性的、不可思议的产品，比市场上的其他任何移动电话整整领先了五年，手指是我们与生俱来的终极定点设备，而iPhone利用它们创造了自鼠标以来最具创新意义的用户界面&rdquo;。令人难以相像的是，这个只有手掌大小的产品中竟包含了超过两百项的专利技术。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>这样一款产品出自苹果公司并不让人感到多少惊奇，因为一直以来，该公司都是业界公认的人机交互技术的领跑者。早在二十世纪七十年代，它就通过Apple II引发了个人电脑革命。在八十年代，它又推出了Macintosh计算机，定义了至今无人能够超越的图形用户界面（GUI）。而在近些年，苹果公司则以其创新性的iPod系列音乐播放器和iTunes在线音乐商店引发了数字音乐革命。无怪乎世界上有那么多的&ldquo;苹果&rdquo;的忠实拥护者。</span></p>
<p align="center" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span><img src="http://images.photoshopcn.com/h001/h14/img200811281131190.jpg" border="0" alt="" /><br />
（图1：iPhone的功能列表画面）</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>下面，我们就将深入分析iPhone在人机交互设计方面的一些特点。由于该手机要到今年6月份才会在美国上市，因此我们在这里的分析主要依据的是苹果公司对于iPhone的官方介绍以及一个大约9分钟的视频演示。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>第一，多触点式触摸屏技术（Multi-Touch）</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>表面上看，iPhone所使用的3.5寸的触摸屏似乎和很多其它的PDA或手机的触摸屏并没有什么区别，只是它的320 X 480大小的分辨率使得屏幕显得更为细腻一些。然而，当你真正触摸它时，你就会发现它的与众不同之处了，这就是：它能够检测出屏幕上同时被触摸到的多个点的位置，即多触点触摸屏技术。相比之下，我们现在通常所使用的触摸屏只能检测到一个触摸点。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>多触点触摸屏并不是一种全新的技术，早在20多年前鼠标刚刚问世之后不久，Bill Buxton就提出了类似的多手输入技术（Multi-hand input）。而在1996年，Bruce Tognazzini 就已经在他的&ldquo;Tog on Software Design&rdquo;一书【1】中提到了和iPhone中的触摸屏几乎完全一样的输入技术（图2）。还有其它的很多研究项目都是关于类似技术的（请参看由Bill Buxton整理的一个有关这些技术的所有项目介绍：</span><a href="http://www.billbuxton.com/multitouchOverview.html" style="color: rgb(169, 27, 51); text-decoration: none; "><span>http://www.billbuxton.com/multitouchOverview.html</span></a><span>&nbsp;）。</span></p>
<p align="center" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span><img src="http://images.photoshopcn.com/h001/h14/img200811281131191.gif" border="0" alt="" /><br />
（图2：Bruce Tognazzini所设计的用手指的动作来表示某种操作）</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>相对于普通的单触点式触摸屏，多触点技术最明显的优点在于，它能支持更复杂的姿势识别（Gesture Recognition）。这里的姿势指的是触点的轨迹在时空上的综合特征。例如，你可以从上到下画一条直线，或从左到右画一条直线，或者按照顺时针的方向画个圆（实际上，有一项大家已经非常熟悉的基于姿势识别的应用，那就是联机手写体识别）。对于某些操作，基于单触点的姿势就足够了。例如，在特定的控件或窗口中，你可以将向下画直线定义为向下卷滚，这是一种很自然并且易于记忆的方式。然而，对于其它一些更为抽象和复杂的操作，单触点姿势就显得比较勉强了。现在来考虑一下如何设计一种将屏幕上显示的图片进行放大或缩小的姿势。你固然可以指定一些基于单触点的姿势，例如从上向下画直线表示放大，从下向上则表示缩小。但是，这些操作方式的随意性太强，它们同执行这些动作所要达到的效果之间没有一种自然匹配的关系，这将导致人们难以记忆这些操作方式【2】。但是，基于两个触点的姿势却有可能定义出功能更为强大但却更自然的操作方式。正如iPhone中的照片浏览软件中所展现的：当两个手指按在屏幕上并逐渐靠近时，这种姿势就被认为是缩小照片，反之当两个手指逐渐分开时，它就被认为是放大照片。这种操作方式之所以容易记忆，是因为它和人们在物理世界中所形成的经验完全吻合：即人们会将两指靠近的姿势联想为捏的动作，而将两指分开理解为拉伸的动作。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>可以想见的是，由于在硬件上具备多触点式触摸屏，会有更多的应用软件利用它来定义出更为人性化的操作方式。不过，在苹果对iPhone的演示中，我们只看到了基于两点的姿势，因此还不太清楚iPhone最多能支持对多少点的同时触摸。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>第二，基于传感器的隐式输入技术</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>2.1 方位传感器</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>iPhone中有一个内置的方位传感器（Orientation Sensor），它能够检测出用户是纵向还是横向拿着手机。有了这样的手机被摆放方向的信息，软件就可以自动地以更为适合的方式来显示信息内容。举例来说，假设你正在观看相册，并且有些照片是横着拍摄的，而有些是竖着拍摄的。如果此时手机被纵向摆放，而照片是横向拍摄的话，一般的软件就会优先将照片显示得占满屏幕的宽度，结果导致了屏幕的上下有很多的空间被浪费了，就像现在我们在4：3的电视机上观看宽银幕电影的样子。PC上的很多观看照片的软件对于这一点的解决方法是提供两个按钮，一个用于将照片顺时针旋转90度，另一个用于将照片逆时针旋转90度。这的确解决了问题，但是太麻烦了，尤其是当你有很多这样拍摄方向不一致的照片时。在iPhone上，这个问题被彻底解决了：当你看到照片需要横向观看时，你只需将手机横着摆放就可以了，系统在检测到这个摆放位置变化的信号后会自动将照片横向显示。这将是多么方便和自然呀。除了照片管理软件外，iPhone上的所有其它软件都能根据当前手机的方位相应地调整显示内容和布局。</span></p>
<p align="center" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span><img src="http://images.photoshopcn.com/h001/h14/img200811281131192.jpg" border="0" alt="" /><br />
（图3：iPhone的照片浏览软件）</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>不过，这种基于方位信息的技术也是早已应用于其它的电子产品中了。例如，在某些型号的佳能相机中（如A80），它能够根据拍摄时相机机身的方位判断出照片将来是用于横着观看还是竖着观看，从而能将照片以正确的方向存储下来，这样在其它设备上观看这些照片时就不需要再手动旋转了。其它类似的技术包括了任天堂的某些游戏机遥控器（如次世代主机&ldquo;Revolution&rdquo;）以及诺基亚某些型号的手机（如5500）上的倾斜感应器，它们都能够根据设备的倾斜状况自动获取该信息，从而使得人们可以使用一种更为自然的方式来向机器输入某种信息。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>2.2&nbsp;&nbsp; 接近性传感器和环境光线传感器</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>人们通常把计算机和人的大脑相比，因此现在主流计算机的硬件的发展就是提高运算速度，增大存贮容量等等。如果按照这个思路发展，计算机永远不可能变得像人一样智能，因为人类的生理构造不是仅仅只有一个大脑，其它很重要的部分还包括了我们的五官、皮肤和四肢等。这些器官向人的大脑不断地提供着各种各样的信息，包括视觉、听觉、嗅觉、味觉、触觉以及方位感、速度感等等。设想一下，如果没有这些信息，速度再快的大脑还有什么用呢？</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>现在大部分的计算机所缺乏的正是这些感知外界环境信息的能力。例如，我们的PC不知道现在房间里的温度是多少，不知道现在的位置是哪里，不知道房间里的光线是明还是暗。当然，就PC这种特定的设备而言，我们似乎还找不到需要这些信息的理由，或者说还没有哪些应用软件可以充分利用这些信息。不过，对于其它类型的设备，尤其是便携设备和嵌入式设备，对于环境信息的感知能力就会显得很重要了。iPhone中的两种传感器就很好地说明了这一点。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>它的接近性传感器可以检测出用户何时把iPhone拿到了耳朵附近，这样它就可以关闭屏幕，达到省电和防止屏幕被误触碰的目的。它的环境光线传感器可以感知到周围光线的强度，从而可以自动对显示屏的亮度进行调整，这样就可以更好地提高用户观看屏幕时的体验，同时在某些情况下也起到了节电的作用。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>从这个意义上看，iPhone要比其它的智能手机就更加&ldquo;智能&rdquo;了。不过，按照这个思路分析，iPhone的一个遗憾是没有内置GPS功能，即手机不知道自己在哪里，而这种位置信息对于一个会被四处移动的便携式设备来说恐怕是最重要的了。考虑到现在有大量类似于行车导航这样的基于位置信息的软件和服务，并且iPhone中还集成了Google Map软件，因而缺乏GPS就显得更加令人不可思议了。</span></p>
<p align="center" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span><img src="http://images.photoshopcn.com/h001/h14/img200811281131203.jpg" border="0" alt="" /><br />
（图4: iPhone中集成了Google Map）</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>第三，更为丰富和人性化的视觉反馈</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>在人与外界进行的任何交互中，获得反馈都是很重要的，因为只有看到自己的动作所带来的效果后，人们才能决定下一步的操作。在目前阶段的人机交互中，视觉反馈仍是最主要的方式。这是因为基于屏幕的信息显示技术是目前最为成熟的。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>在iPhone中，一个很有创意的设计是如何用视觉反馈来表示触觉反馈，它颇有些通感的意味。iPhone没有提供物理的QWERTY键盘，而是提供了一个基于屏幕显示的软键盘来让用户输入26个字母。在现有的带有触摸屏的PDA或手机上，表示用户按了某个字母键的方法是将该字母所在位置的凸起形状的图像转变为凹下的图像，并辅之以某种声音。不幸的是，这种方法不适用于iPhone，因为iPhone没有触控笔，只能用手指点击触摸屏，而软键盘上的每个字母都小于指头的大小，因此显示字母的图像会被手指遮住。为了克服这个问题，iPhone的方法是将所按下的字母部分的图像快速放大到比较醒目的大小，以便能够不被手指遮挡而让用户看清楚，然后再迅速地恢复到原来的显示大小，以使得用户可以继续察看并输入下一个字母，如图5所示。这种效果很像将一个物体投进水中后所产生的波纹。</span></p>
<p align="center" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span><img src="http://images.photoshopcn.com/h001/h14/img200811281131204.jpg" border="0" alt="" /><br />
（图5： iPhone软键盘输入时的视觉反馈）</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>在人机交互过程的反馈中，另一个重要问题是响应时间的长短。通常认为，响应时间越快越好。不过，对于人类认知心理方面的研究表明，在某些情况下，响应时间并不是越快越好。这其中的主要原因是：人类所生活的物理世界中的各种物体的存在、位置和运动都要遵守自然规律。例如，物体从静止到运动，或从运动到静止是需要一个过程的，它符合牛顿运动定律。我们通常不会看到物体突然地运动起来，或忽然从很快的速度变为静止状态。然而在软件界面设计中，到处都充满了这种情况。例如，当你关闭一个窗口时，不到一眨眼的瞬间，该窗口就消失了；当你在某个内容长度超过窗口高度的窗口中上下卷滚时，较新的内容会在极快的时间内替代原有内容并出现在窗口中，等等。计算机完成这些操作的速度是如此之快，以至于我们经常会有这样的感觉，即我刚才所做的动作真的执行完成了吗？我是不是点错位置了。对于视力不好的用户就尤其如此了，他们必须费力地仔细观看屏幕才能确认所要关闭的窗口的确是关闭了，或者窗口内容的确是滚动到了一个新的位置。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>对于这个问题的解决是利用一种类似动画效果的显示技术来将屏幕内容变化的过程表示出来，让用户可以明显地感知到这个变化的过程。通常这个过程需要100毫妙到1秒钟的时间就可以了。这个技术的好处是有助于用户形成正确的关于系统运行的模型。例如，如图6 所示，在Mac OS X中，当用户最小化窗口时，该窗口不是立刻消失并被放入任务栏中，而是以一种动画方式表示出窗口像是被一股强大的力量吸进了任务栏中，从而让用户感知到窗口是被缩小了，并且用户将会看出缩小后的窗口被放在了哪里，这样他就会知道在随后的操作中从哪里去寻找并还原这个窗口。</span></p>
<p align="center" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><a href="http://images.photoshopcn.com/h001/h14/img200811281131205.jpg" target="_blank" style="color: rgb(169, 27, 51); text-decoration: none; "><span><img src="http://images.photoshopcn.com/h001/h14/img200811281131205.jpg" border="0" alt="" width="600" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-width: initial; border-color: initial; " /></span></a><br />
<span>（图6： Mac OS X 中窗口最小化时的动画效果）</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>在&ldquo;Designing Interfaces&rdquo;一书中，Jenifer Tidwell将这种手法称之为&ldquo;animated transition&rdquo;模式，即动画式转换，它有助于保持用户在计算机虚拟空间中的方位感【3】。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>在iPhone中，类似这样的动画式响应方式是标准的界面风格，包括了窗口内容的上下卷滚、某些元素的出现和消失，以及某个区域内容的放大、缩小，改变显示方向等等。这种风格最终带给用户的体验是一种舒适、自然和流畅的感觉，而不是生硬的机器感。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>第四 超越WIMP交互风格，提供接近于虚拟现实的用户体验</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>当前主流计算机的界面风格一般被称为WIMP风格，即窗口（Window）、图标（Icon）、菜单（Menu）和指针（Pointer）。这是一种适合于固定场所计算机系统的交互风格。这些场所的特点是，计算机被摆放在固定的位置上，并有足够的空间来摆放体积较大的输入输出设备，例如大屏幕显示器、全尺寸的QWERTY键盘以及鼠标这种可以用来非常舒适地进行精确定位的指点设备。这种环境要求人去适应计算机系统，比如坐在指定的位置进行操作。而对于PDA或手机这类体积很小的便携式设备，其使用环境的特点则完全不同：人们期望能够像对待手表、眼镜等随身物品一样来使用它们，而不是像使用台式机时那样。例如，你不可能将19寸的显示器竖着摆放，但你却可以轻易地将你的手机转个方向。这种使用行为和环境的不同决定了我们不能简单地将WIMP风格复制到这些设备中。它们需要一种新的交互方式。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>iPhone的设计放弃了目前流行的触笔式指点输入方式，而是改为了手指操作。这是因为在这么小的设备上要想让人们做到精确定位是一件比较困难的事情：人们很可能没有一个平台来放置手机，无法舒适地进行各种操作。相应地，由于菜单和图标的选择也需要用指点设备精确定位，所以这些界面元素在iPhone中也很少见了，取而代之的是一些大按钮和基于姿态识别的输入方式。</span></p>
<p align="center" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span><img src="http://images.photoshopcn.com/h001/h14/img200811281131206.jpg" border="0" alt="" /><br />
（图7：　iPhone中大按钮式的输入方式）</span></p>
<p align="center" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span><img src="http://images.photoshopcn.com/h001/h14/img200811281131207.jpg" border="0" alt="" /><br />
（图8：用手指在iPhone的屏幕上进行触摸操作）</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>另一方面，尽管同触摸屏设备相比，鼠标是一种更为精确的指点设备，但它的缺点在于它是一种间接指点设备，即当你看到屏幕上显示的物体后，你无法直接在屏幕上点击它，而是需要通过移动桌面上的另一个物体（即鼠标）来控制屏幕上表示当前位置的指针。这种操作方式显得不太自然，它需要手眼的很好配合。而在使用触摸屏时，用户就可以想操作哪里，就能直接指向哪里，然后去操作它，比如拖动、旋转、放大、缩小等等。这将给人一种仿佛是真的操控屏幕上物体的感觉。这种直接指点设备的运用，同时配合以方位传感技术以及动画式响应技术，iPhone已经在一台手机上让人们体验到了一种以往只有虚拟现实技术才能带来的感觉，这一点在它的照片浏览软件中体现得淋漓尽至。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>首先设想一下我们在真实世界中是如何看一叠照片的。最基本的动作当然是看后一张或前一张，第二个常用的动作就是根据照片的拍摄方向来将它旋转到正确的方向观看。现在，iPhone的照片浏览软件已经完全可以做到这两点了。你可以通过从右向左的触摸动作来翻到下一张相片，可以通过直接将手机的方向旋转90度来从正确的方向观看，而不必点击任何按钮。在切换到不同的照片或当照片随着手机的转动而在屏幕上旋转时，动画式响应技术的运用让我们感觉到仿佛是在操作真实的照片一样自然。我们几乎感觉不到&ldquo;界面&rdquo;的存在了。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>第五 简单、简单、再简单</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>糟糕的设计是把简单的事情复杂化，平庸的设计是把复杂的事情复杂化，而优秀的设计则能够把复杂的事情简单化。在iPhone中，对于简单性的追求体现在很多方面：</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>5.1 将复杂的操作简单化，甚至彻底消除某种操作的必要性</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>汽车中的换档技术的发展是一个很好的例子。早期的汽车在换档时相当复杂，需要踩两次离合器，同时右脚还要在合适的时机控制油门踏板。到了后来，很多的汽车都增加了同步器，这使得只用踩一次离合器就可以了。再到后来，自动挡汽车的出现彻底消除了离合器踏板存在的必要性，它能够根据车速来自动在内部将档位调整到合适的位置，从而给人们带来更为简便和轻松的驾驶体验。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>在iPhone中，光线感应器使得屏幕的亮度能够自动调节，从而省去了用户手工调整的动作；方位感知器的运用使得软件能够根据用户手握设备的方位来自动调整屏幕上的显示布局和内容，从而省去了用户手工切换。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>或许我们可以这样说，界面设计的最高境界就是让用户感觉不到界面的存在。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>5.2 用简单的界面来容纳大量的功能</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>随着技术的不断进步，设计人员总是不断地向产品加入越来越多的功能，以使得产品更加具有竞争力和吸引力。然而，在功能增多的同时，如果不能很好地进行界面设计，以使得用户能够很容易地找到和使用这些功能，那么这些功能对于用户来说就好像不存在一样。现在，观察和思考一下你周围日常用到的电子设备，例如手机、电视、DVD播放器、MP3播放器等等，它们有多少功能呢？你是否知道并且会使用这些功能呢？</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>在iPhone中，为了使得用户能够一目了然地找到所有的功能，它使用了一个Home按钮，这也是机身正面唯一的一个物理按钮。它位于机身的底部，当用户在任何时候按下该按钮时，都可以来到如图1所示的初始画面，这里以矩阵的方式显示出了所有功能。每个功能都用一个较大的易于手指触摸的图标式按钮来表示，同时在图标的下方还有相应的文字说明。根据这种设计，不论你当前处在任何状态，最多只需两次按键就能开始使用任何一个功能，这极大地方便了用户找到各个功能的过程，从而使得所有的功能都能被更好地被使用。Jenifer Tidwell 在&ldquo;Designing Interfaces&rdquo;一书中将这种特点的导航方式称为&ldquo;Hub and Spoke&rdquo;模式，即以一种从中心向四周辐射的方式来组织全部功能，它有助于用户形成一种简单的对于系统的功能是如何组织的心理模型【3】。</span></p>
<p align="center" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><a href="http://images.photoshopcn.com/h001/h14/img200811281131208.jpg" target="_blank" style="color: rgb(169, 27, 51); text-decoration: none; "><span><img src="http://images.photoshopcn.com/h001/h14/img200811281131208.jpg" border="0" alt="" width="600" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-width: initial; border-color: initial; " /></span></a><br />
<span>（图9： iPhone的所有功能以辐射状结构组织）</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>值得一提的是，四个最常用的功能：打电话、收发电子邮件、上网以及音乐播放，它们都被安排在了屏幕的最底部，这主要是考虑到单手操作的方便性。因为根据一般人的握法，大拇指离屏幕下方最近，从而可以很容易地触摸到屏幕最底部的区域。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>5.3 物理外观的简单性</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>如5.2中所述，机身在正面只有一个物理按钮。另外，同大多数基于触摸屏的PDA或智能手机不同，iPhone没有提供触摸笔，因此用户不用费力地用手拿着一支很细的笔来操作，也不必担心会在某次使用后由于忘记把笔插回机身弄丢它。只要你的手指还在，你就可以使用iPhone。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>5.4 存储模型的简单性</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>iPhone没有提供对存储卡的支持，而是直接内置了大容量内存（一种型号为4G，另一种为8G）。这样一来，应用软件在保存数据时，就不必区分是保存在机身内存中，还是存储卡上。这种应用程序在实现时的简单性最终就体现到了用户界面的简单性。作为一个反面的例子，诺基亚的S60系列手机中的应用软件在存储数据时，其存储位置往往是由软件的某个设置决定的。由于机身只有6M内存，并且绝大多数软件的缺省设置都是把数据放在机身内存，这就会导致该内存会很快被用完，尽管此时你的存储卡上可能还有大量的空间。作为一般的手机用户，人们很少会发现这些存储位置是如何设置的。实际上，笔者一向自认为是手机玩家，不过也还是在使用了一台诺基亚6600手机后将近两年后才发现它有这个功能设置的。在iPhone上，你不用再为类似这样的有关存储位置的设置而烦恼了。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>iPhone带给我们的思考</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>综合以上对于iPhone的各项人机交互技术的分析不难看出，这些单项的技术其实都不是什么全新的技术，它们已经在实验室或者是其它设备上出现很长时间了。然而，当苹果公司把这许多的单项技术融合在一个只有135克的手机上时，iPhone作为一个整体就是具有创新性的了。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>这种创新并不是一种偶然现象。正如苹果的Macintosh和iPod产品一样，它源于产品设计者对于一种完美的用户体验的不断追求。这种追求体现出了以人为本的设计思想，即要让机器去适应人，而不是相反。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><span>我们周围大量的产品中不断增多的更为强大的功能并没有给我们带来更多的实际效用和便利，恰恰相反，它们在很多时候反而使得我们觉得自己更加愚蠢了。或许是到了该改变一下这种状况的时候了。</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; ">参考书籍：<br />
【1】《Tog on Software Design》 Bruce Tognazzini<br />
【2】《设计心理学》Donald A.Norman<br />
【3】《Designing Interfaces》Jenifer Tidwell</p>
</span></p>]]></description>
		</item>
		
			<item>
			<link>http://www.wapchina.net/article.asp?id=103</link>
			<title><![CDATA[iPhone应用设计趋势]]></title>
			<author>fulubin@gmail.com(admin)</author>
			<category><![CDATA[用户体验]]></category>
			<pubDate>Fri,27 Nov 2009 13:11:04 +0800</pubDate>
			<guid>http://www.wapchina.net/default.asp?id=103</guid>
		<description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="font-family: Verdana, 'Bitstream Vera Sans', Arial, sans-serif; font-size: 14px; color: rgb(51, 51, 51); ">
<h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; font-size: 24px; font-weight: 700; ">iPhone应用设计趋势</h2>
<div class="entry" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: justify; border-bottom-width: 0px; border-bottom-style: initial; border-bottom-color: initial; ">
<p style="text-align: auto;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><font class="Apple-style-span" color="#999999" size="3"><span class="Apple-style-span" style="font-size: 12px; line-height: normal;"><br />
</span></font></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">在过去的两年里，你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传，使得世界各地的设计者们都利用这个新的移动工具来一展身手。结果虽搞出了成千上万的iPhone应用，但通常不好用也不直观。然而有些设计师则是花费大量时间为创造更好用的界面而努力着（是的，这些都是好用且有创意的界面）。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">本文探究了如何让设计师利用图形元素和屏幕交互，<strong>制作出易识别又易操控的iPhone应用</strong>。目的在于揭示iPhone应用设计的普遍趋势和设计方法&mdash;&mdash;请注意，这些未必是设计和可用性中的最佳观点。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">&nbsp;</p>
<h3 style="margin-top: 15px; margin-right: 0px; margin-bottom: 0.2em; margin-left: 0px; padding-top: 1px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; font-size: 16px; font-weight: 700; ">1. 镜像iPhone原生界面元素</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">&ldquo;告诉他们你要告诉他们的，去告诉他们，然后告诉他们你告诉过他们。&rdquo;（译者：作者在表达她当时的感受吧） 在你的应用中创建一套新的OS可能很有趣，但在移动设备上处理时，人们只想简明扼要。简明扼要的意思是，设计师得遵循OS的流程，创建一个无说明的应用，给最终用户去操作。镜像出用户熟悉的布局和界面元素可以节省时间和精力。所以这看起来是设计iPhone应用时的一个便利途径啊。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Facebook" href="http://www.facebook.com/apps/application.php?id=6628568379" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Facebook</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=284882215&amp;mt=8" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes Link</a>)<br />
在新版Facebook 3.0中，你会发现这样一个栅格布局，用户可以通过左右滑动屏幕进入更多分类。因为它镜像了苹果的原生界面，所以用户根本不用再学如何使用。网页设计中存在类似方法：用户会预料到logo在左上角，导航也在上面，等等。Facebook把这它延续到了移动应用上，用大按钮可以轻松的被识别和点击。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-838" title="facebook" src="http://blog.b3inside.com/wp-content/uploads/2009/11/facebook.png" alt="facebook" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Where" href="http://www.where.com/carriers/iphone.php" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Where</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=281790044&amp;mt=8" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
Where使用了相同的概念，它允许用户通过左右滑动屏幕来获取更多信息。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-839" title="where" src="http://blog.b3inside.com/wp-content/uploads/2009/11/where.png" alt="where" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Tweetdeck" href="http://tweetdeck.com/beta/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Tweetdeck</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=318518757&amp;mt=8" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
Tweetdeck是用户界面设计中一个很好的例子。高亮显示的最近更新多吸引注意力啊。此应用能以归类或标签列表形式，在新窗口中显示更新。但不会替换掉一个已显示的对话菜单，它可以作为跳转到具体类目或清掉消息提醒的跳板。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-841" title="tweetdeck2" src="http://blog.b3inside.com/wp-content/uploads/2009/11/tweetdeck2.png" alt="tweetdeck2" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<h3 style="margin-top: 15px; margin-right: 0px; margin-bottom: 0.2em; margin-left: 0px; padding-top: 1px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; font-size: 16px; font-weight: 700; ">2. 简化界面</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">也许简化用户界面听起来像是个机械任务，但在用户界面设计背后又隐藏着什么呢？答案很简单：就是用户。用户需要什么？什么令他们感到友好和模糊？你如何提供他们所需的东西，以便不用时刻去关注那些重要的信息？</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">提到在小空间内展示大量核心功能，Facebook的第一版就做的非常到位。当然，这里指的是展示所有信息和拥有直观的界面。3.0与之相比，你会发现它使用&ldquo;跳板&rdquo;的方式来简化界面，既保持了直观又维护了功能。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/iphone-app-design-trends/facebook_animation.gif" alt="Facebook Animation in iPhone App Design Trends" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Flickr" href="http://www.flickr.com/photos/b3inside/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Flickr</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=328407587&amp;mt=8" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
Flickr 对功能、视觉设计和小屏幕移动设备显示这三者间平衡上的处理同样出色。试想之：Flickr的核心是什么？照片。它的用户或许不希望看到又大又笨的导航；他们想要的是照片。Flickr已经设法调整核心功能，去掉那些标题和该死的导航。事实上，很多导航元素已经在照片本身的交互上实现了。真是个既简单又聪明的办法。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-844" title="flickr" src="http://blog.b3inside.com/wp-content/uploads/2009/11/flickr.png" alt="flickr" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<h3 style="margin-top: 15px; margin-right: 0px; margin-bottom: 0.2em; margin-left: 0px; padding-top: 1px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; font-size: 16px; font-weight: 700; ">3. 模拟硬件界面</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">不少应用程序打破了传统iPhone界面的操作，利用它独特的手指手势进行控制。它们中一些是用户熟悉的硬件界面，光鲜亮丽的外表不禁让人回味起那种第一次点击的新鲜感。但应用程序不会因为你玩的多而变脏。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Convertbot" href="http://tapbots.com/convertbot/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Convertbot</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D308928075%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
Convertbot的轮盘让我们想起小学时候，不同的是它更具特色、更新颖、更有创意。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-845" title="convertbot" src="http://blog.b3inside.com/wp-content/uploads/2009/11/convertbot.png" alt="convertbot" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Little Snapper" href="http://www.realmacsoftware.com/littlesnapper/iphone/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Little Snapper</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D310591640%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes Link</a>)<br />
Little Snapper模拟的就是一台普通数码单反的旋钮。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-846" title="littleSnapper" src="http://blog.b3inside.com/wp-content/uploads/2009/11/littleSnapper.png" alt="littleSnapper" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="iHandy Level" href="http://www.ihandysoft.com/carpenter/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iHandy Level</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D293621500%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes Link</a>)<br />
iHandy Level的样子和功能都仿至一个真实好用的水平仪。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-medium wp-image-847" title="iHandy_level" src="http://blog.b3inside.com/wp-content/uploads/2009/11/iHandy_level-400x266.png" alt="iHandy_level" width="400" height="266" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Where To?" href="http://www.futuretap.com/home/whereto-en/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Where To?</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D314785156%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes Link</a>)<br />
这个应用看起来像是属于奔驰车的。豪华的皮革、磨砂的按钮：上乘的技术。我们可以想象，每个按钮按下去都那么结实，都那么有力道。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-849" title="where_to" src="http://blog.b3inside.com/wp-content/uploads/2009/11/where_to.png" alt="where_to" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<h3 style="margin-top: 15px; margin-right: 0px; margin-bottom: 0.2em; margin-left: 0px; padding-top: 1px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; font-size: 16px; font-weight: 700; ">4. 丰富、漂亮的列表视图</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">当你对列表设计的最新趋势感到兴奋时，你已经被确诊为一位&ldquo;geek designer&rdquo;了。人们遇到一个列表时会做些什么？当然，只是略读。那怎样把人们决定什么有趣变得更轻松？没错，更多的视觉暗示！</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">基本上，用户通过寻找下一步的快照，来决定是否需要了解更多。而<strong>又大又漂亮的按钮</strong>就是途径之一。通过色彩、图标和排版让人感觉这个大按钮背后隐藏着好多信息。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Delivery Status Touch" href="http://junecloud.com/software/iphone/delivery-status-touch.html" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Delivery Status Touch</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D290986013%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes Link</a>)<br />
看看Delivery Status是怎样通过不同颜色的大按钮来区分不同品牌的。并用良好的排版建立起信息层次。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-850" title="delivery_status" src="http://blog.b3inside.com/wp-content/uploads/2009/11/delivery_status.png" alt="delivery_status" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Be Happy Now" href="http://www.mentalworkout.com/products/iphone-applications/be-happy-now/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Be Happy Now</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D321896701%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes Link</a>)<br />
Be Happy Now的大按钮通过柔和的色彩体系与明亮清晰的字体传达&ldquo;be happy&rdquo;的主旨。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-851" title="beHappyNow" src="http://blog.b3inside.com/wp-content/uploads/2009/11/beHappyNow.png" alt="beHappyNow" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Next Read" href="http://www.squarewheelsoft.com/nextread/nextread.html" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Next Read</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D299379727%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
Next Read这个应用允许在朋友间分享图书。在这里所有书都是关于时下某一特定话题的，包括书名、封面、评分以及评论数。注意看每个导航选项的间隙和留白，它让这个区域更容易被点击。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-852" title="nextRead" src="http://blog.b3inside.com/wp-content/uploads/2009/11/nextRead.png" alt="nextRead" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Nike" href="http://www.nike.com/nikeos/p/nikewomen/language_tunnel/?" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Nike</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=301521403&amp;mt=8" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
Nike为女性开发了这个应用，精致的视觉元素和插画都很符合它的品牌。在设计上打破了传统界面的束缚，充分表达了品牌，不让用户为如何使用它而感到困惑。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-medium wp-image-853" title="nike" src="http://blog.b3inside.com/wp-content/uploads/2009/11/nike-400x300.png" alt="nike" width="400" height="300" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Borange" href="http://www.borange.com/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Borange</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D297643026%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
Borange是一款&ldquo;社交情况&rdquo;的应用，它可以帮你统筹与朋友们的约会。列表展示了很多信息：要一起出行的朋友，本地会议，并可以形象的表示哪个朋友有空。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-854" title="borange" src="http://blog.b3inside.com/wp-content/uploads/2009/11/borange.png" alt="borange" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<h3 style="margin-top: 15px; margin-right: 0px; margin-bottom: 0.2em; margin-left: 0px; padding-top: 1px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; font-size: 16px; font-weight: 700; ">5. 分层的界面</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">一些应用把界面设计成层，利用iPhone本身独有的特性让其固定，或垂直、水平滚动。这种方法有几个好处：</p>
<ol style="margin-top: 7px; margin-right: 0px; margin-bottom: 7px; margin-left: 35px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: decimal; list-style-position: initial; list-style-image: initial; ">
    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 0px; line-height: 1.4em; ">减少了必要的传统导航元素数量（即更少的按钮有助于避免界面混乱）</li>
    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 0px; line-height: 1.4em; ">为用户获取信息提供了快速通道</li>
    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 0px; line-height: 1.4em; ">有更多屏幕空间承载有用信息</li>
</ol>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Tweetie" href="http://www.atebits.com/tweetie-iphone/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Tweetie</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D296415944%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes Link</a>)<br />
Tweetie利用层把具体信息传递给你每位Twitter好友。你看，所有信息都装在这一个屏幕里！</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-855" title="tweetie" src="http://blog.b3inside.com/wp-content/uploads/2009/11/tweetie.png" alt="tweetie" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Barnes &amp; Noble" href="http://www.barnesandnoble.com/iphone/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Barnes &amp; Noble</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=320214162&amp;mt=8" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
Barnes &amp; Noble让你可以快速的通过上面的层进入新商品，通过下面的层切换到更多分类。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-856" title="barnesandnoble" src="http://blog.b3inside.com/wp-content/uploads/2009/11/barnesandnoble.png" alt="barnesandnoble" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="USA Today" href="http://www.usatoday.com/iphone/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">USA Today</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewArtist?id=300669006" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
USA Today在它的图片一栏中对层做了细微改变：利用滑动面板显示信息区块。尽管第一眼看上去很乱，但能很容易跳过它。最有趣的部分在于，在每个面板里，都可以通过左右滑动来查看更多图片。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-857" title="usaToday1" src="http://blog.b3inside.com/wp-content/uploads/2009/11/usaToday1.png" alt="usaToday1" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="myPantone" href="http://www.pantone.com/pages/pantone/index.aspx" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">myPantone</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D329515634%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
我们何尝不希望色卡少一点？上面的拾色器就是一个层，你可以通过色彩范围、类别来取色，也可以通过滚动打开/关闭细节窗口。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-858" title="pantone" src="http://blog.b3inside.com/wp-content/uploads/2009/11/pantone.png" alt="pantone" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<h3 style="margin-top: 15px; margin-right: 0px; margin-bottom: 0.2em; margin-left: 0px; padding-top: 1px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; font-size: 16px; font-weight: 700; ">6. 在列表中使用图标</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">在小屏幕上，图标可给应用的可用性和导航性带来巨大提升。让我们通过几个应用的例子看看它的优势。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="iStudiez" href="http://www.istudiez.com/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iStudiez</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D310636441%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes Link</a>)<br />
这个应用利用各种不同的教学用具图标，清晰地表达了应用的目的。通过这些具象的暗示，学生瞄一眼就知道今天发生了什么。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-860" title="istudiesz" src="http://blog.b3inside.com/wp-content/uploads/2009/11/istudiesz.png" alt="istudiesz" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Top Floor" href="http://www.taptapmobile.com/en/topfloor" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Top Floor</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D293259732%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes Link</a>)<br />
Top Floor利用简单易识别的图标，快速引导用户进入他们选择的类别。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-861" title="topFloor" src="http://blog.b3inside.com/wp-content/uploads/2009/11/topFloor.png" alt="topFloor" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="New York Times" href="http://www.nytimes.com/services/mobile/iphone.html" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">New York Times</a><br />
应用可以让你想做什么就做什么，是不是很不可思议哦？对于一个像纽约时报样的应用，用户必然有他喜欢的章节。你猜怎么着？纽约时报这样做：它让你自定义标签栏，把你喜欢的章节都加进来。拖动一个图标到标签栏即可。不过这样做也不是十全十美，在视觉呈现上打了折扣。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-862" title="wallStJournal" src="http://blog.b3inside.com/wp-content/uploads/2009/11/wallStJournal.png" alt="wallStJournal" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Filemaker" href="http://www.filemaker.com/products/bento/iphone.html" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Filemaker</a>(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D314638461%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
另一个漂亮图片的案例，说它好是因为图标的使用上不混乱、不混淆。设计师永远不要为了使用图标而使用图标。作为设计师，我们希望图标能够尽可能的反应出用户所选的内容。Filemaker，干的漂亮。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-863" title="filemaker" src="http://blog.b3inside.com/wp-content/uploads/2009/11/filemaker.png" alt="filemaker" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<h3 style="margin-top: 15px; margin-right: 0px; margin-bottom: 0.2em; margin-left: 0px; padding-top: 1px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; font-size: 16px; font-weight: 700; ">7. 插图的使用</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">依赖图形的应用程序越来越受欢迎，因为开发者试图让她们的应用与众不同。偶尔奏效，但不经常。越是传统的设计就越可能存在可用性问题。在推出一个&ldquo;有创意&rdquo;界面的产品前一定要进行可用性测试。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Magnetic Personalities" href="http://www.peopleoperatingtechnology.com/our-apps/magnetic-personalities/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Magnetic Personalities</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D321601898%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
这是个非常好的例子，看看如何让按钮变得不像标准按钮那么普通。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-864" title="magneticPersonalities" src="http://blog.b3inside.com/wp-content/uploads/2009/11/magneticPersonalities.png" alt="magneticPersonalities" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="SugarSync" href="http://www.sugarsync.com/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">SugarSync</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=288491637&amp;mt=8" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
这个界面可以轻松地走遵循传统列表视图的路线。但设计师没有这么做，而是通过一个漩涡将视觉连接在一起来传达这个应用。这很不寻常，同时需要花点时间来适应它。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-865" title="sugarsync" src="http://blog.b3inside.com/wp-content/uploads/2009/11/sugarsync.png" alt="sugarsync" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Mom Maps" href="http://www.mommaps.com/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Mom Maps</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D309570382%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
另一个使用插图取得成功的例子，它将很多概念都融入了这个应用。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-866" title="momMaps" src="http://blog.b3inside.com/wp-content/uploads/2009/11/momMaps.png" alt="momMaps" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<h3 style="margin-top: 15px; margin-right: 0px; margin-bottom: 0.2em; margin-left: 0px; padding-top: 1px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; font-size: 16px; font-weight: 700; ">8. 使用手势</h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; ">经典的线性导航看上去很枯燥：一个按钮连一个按钮，来表现一堆东西的列表，或表现这样那样的交互。事实并非如此壮观，只是比喻一下。在公共事业的应用上使用有创意的交互可能性很大。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="Mover" href="http://infinite-labs.net/mover/?_coming_from=mover-plus-its" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">Mover</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D320907954%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
Mover列举了如何使用手势来分享联系方式、照片和书签。打开两个设备，把文件从这个共享到那个里。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-867" title="mover" src="http://blog.b3inside.com/wp-content/uploads/2009/11/mover.png" alt="mover" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="ABC Animals" href="http://www.criticalmatter.com/abc_animals/" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">ABC Animals</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D292402752%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
这个应用寓教于乐。用手指在屏幕上书写字母是另一个通过触摸iPhone控制的例子。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-868" title="abcanimals" src="http://blog.b3inside.com/wp-content/uploads/2009/11/abcanimals.png" alt="abcanimals" width="318" height="478" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><a title="All Recipes" href="http://allrecipes.com/features/more/iphone.aspx" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">All Recipes</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=299515267&amp;mt=8" style="text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; color: rgb(0, 102, 204); ">iTunes link</a>)<br />
此应用可以让你通过手势来混合众多元素，作为你的美餐。</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; word-break: break-all; word-wrap: break-word; line-height: 1.4em; "><img class="alignnone size-full wp-image-869" title="allRecipies" src="http://blog.b3inside.com/wp-content/uploads/2009/11/allRecipies.png" alt="allRecipies" width="320" height="460" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(212, 212, 212); border-right-color: rgb(212, 212, 212); border-bottom-color: rgb(212, 212, 212); border-left-color: rgb(212, 212, 212); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " /></p>
</div>
</span></p>
<p>&nbsp;</p>]]></description>
		</item>
		
			<item>
			<link>http://www.wapchina.net/article.asp?id=98</link>
			<title><![CDATA[文案是网站的性格 ]]></title>
			<author>fulubin@gmail.com(admin)</author>
			<category><![CDATA[用户体验]]></category>
			<pubDate>Wed,18 Nov 2009 14:03:29 +0800</pubDate>
			<guid>http://www.wapchina.net/default.asp?id=98</guid>
		<description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="color: rgb(66, 66, 66); font-family: simSun, arial, Helvetica, sans-serif; font-size: 14px; ">
<h2 class="post-title" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; font-style: normal; font-size: 22px; font-family: 'Microsoft YaHei', SimHei; line-height: 35px; height: 35px; color: rgb(67, 67, 67); ">文案是网站的性格</h2>
<div class="attrib" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; height: 20px; overflow-x: hidden; overflow-y: hidden; line-height: 20px; color: rgb(127, 127, 127); font-size: 12px; ">&nbsp;</div>
<div class="post-body formattext" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; text-align: justify; font-size: 14px; line-height: 1.8; ">&nbsp;&nbsp;&nbsp;&nbsp;看一个网站其实就好比品评一个美女。一看长相，我们很多时候关注的是视觉，比如老板经常会说，你做几个页面让我看看！二看身材，也有很多关注标准和seo的人会很注重页面良好的结构；三要看性格，一个人的言谈举止往往能反映一个人的性格。<br />
&nbsp;&nbsp;&nbsp;&nbsp;<u>网站文案就是网站的性格。好的文案不但能准确的的传达信息，更能让用户感受到良好的体验。</u><br />
<br />
<b><font size="4">很重要但不被重视的网站文案</font></b><br />
&nbsp;&nbsp;&nbsp;&nbsp;网站文案其实大概包括：网站导航、栏目标题、告知提醒包括实时提示、警告、状态、还有出现最多的帮助。<br />
&nbsp;&nbsp;&nbsp;&nbsp;大多数的互联网公司，我们听过有产品设计、交互设计、视觉设计、用户体验。很少听过文案设计这种职位吧？网站文案撰写的工作更多时候被设计师兼职和程序员兼职了，他们会在认为需要的地方加上自己认为合适的文案，设计师的感性提醒和程序员的接近机器语言的生硬警告这就造成一个网站，百家之言。大多数的网站文案有很多问题和需要改进的地方：<br />
<br />
<b><font size="4">网站文案应该准确、简洁、易读</font></b><br />
&nbsp;&nbsp;&nbsp;&nbsp;网站文案的目的就是要给用户传达一种信息，说明白就好。现在很多网站的文案实在是太罗嗦了，而且有的看了半天看不明白的。（难道我智商偏低？）<br />
<br />
<img onload="ResizeImage(this,600)" src="http://www.sunthink.org/upload/luosuo.gif" alt="" title="" class="lightbox" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; clear: both; float: none; " /><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;这个简洁的原则就是：<u>能不说就不说，能用图片就不用文案，能用一句就不要用一段</u>。<br />
但是要注意准确和易读。尤其是用图片的时候。<br />
罗嗦的唐僧在后期经过了&ldquo;优化&rdquo;：<br />
<br />
<img onload="ResizeImage(this,600)" src="http://www.sunthink.org/upload/jianjie.gif" alt="" title="" class="lightbox" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; clear: both; float: none; " /><br />
<br />
<b><font size="4">网站文案要具有统一性</font></b><br />
&nbsp;&nbsp;&nbsp;&nbsp;由于大多数公司没有专门负责写网站文案的，所以处在各个流程的团队成员都在兼职写文案，就造成南腔北调的文案了。例如一个登录：有人说账户有人说通行证，程序员大概会说id。类似这样的说法会让用户迷惑。<br />
&nbsp;&nbsp;&nbsp;&nbsp;我还见过一个虚拟主机的促销页，写的是150元，点击详细进去发现价格是390元！这也许就不是网站文案的范畴了。但是统一是必须的。我们不承诺放弃使用武力。哈哈。<br />
<br />
<b><font size="4">网站的文案要情感化</font></b><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;网站的文案很多时候是在提示、帮助用户完成一个使用。大多数的网站文案更像一个机器人在帮你。生硬而冰冷！反面的例子看看很多网站的帮助中心吧！<br />
&nbsp;&nbsp;&nbsp;&nbsp;1、	给用户成就感：<br />
用户在经过一些列操作而完成一个目标的时候，我们也应该为用户高兴，这时候不要吝惜的给一个：恭喜您成功。。。，现在就可以。。。之类的提示就会让用户很有成就感！<br />
&nbsp;&nbsp;&nbsp;&nbsp;2、	鼓励用户：<br />
用户不小心一个误操作（请注意这个误操作一般是我们设计的太糟糕造成的），你这时候不解人意的给出一个你出错了！会不会让人很沮丧？<br />
&nbsp;&nbsp;&nbsp;&nbsp;而好的文案一般会清楚的告诉你哪里出了问题，并鼓励你再试一次。也有的网站很体贴的在旁边提示，例如：忘记密码了？<br />
&nbsp;&nbsp;&nbsp;&nbsp;3、	适时营销一下：<br />
有的网站则很适时的提示：还不是网站用户，花几秒钟注册一个吧？（这种人真会做生意啊！）既然说到登录的问题，不妨引申一下这个话题。很多网站都是考虑了密码忘记的问题，很少考虑用户名忘记的问题。易趣的有这种设计。<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;4、	为用户着想：<br />
我们发现很多网站发布信息的时候往往会看到类似这样的提示：发布信息不完整将被删除！这岂不是典型的恐吓？<br />
<br />
<img onload="ResizeImage(this,600)" src="http://www.sunthink.org/upload/konghe.gif" alt="" title="" class="lightbox" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; clear: both; float: none; " /><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;其实我们知道信息类网站最头疼的事情之一就是虚假信息了，但是我们换个方式告诉用户，您的信息越完整，越能提高您信息的可信度！会不会更好一点？这样其实是<u>站在用户的角度是为他着想</u>的。<br />
<br />
<b><font size="4">网站的文案要出现在合适的地方</font></b><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;我们有时候去专卖店逛得时候，往往会遇到一个店员跟着你不断的给你介绍东西，虽然我理解他们的辛苦和无奈，我仍然很反感这样的，会尽快离开那里。而有时候则恰恰相反，我看中一件商品，想找个营业员询价等，却找不到了！<br />
&nbsp;&nbsp;&nbsp;&nbsp;1、	做帮助要低调，不要干扰用户：<br />
其实网站的文案也应该在合适的时候出现在合适的地方。把握好尺度的原则就是，这些文案在用户使用网站的时候不会造成干扰，这就需要我们好好考虑文案的颜色，大小等形式。以及放的位置等等。<br />
&nbsp;&nbsp;&nbsp;&nbsp;2、	适时出现，适时消失<br />
而<u>用户需要帮助的时候能很快找到，并能够帮助用户解决问题。而解决问题之后再合适的消失</u>。记得有个网站出现未登录提示后无法关闭！这不是耍流氓么？<br />
<br />
<b><font size="4">网站文案也需要交互</font></b><br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;这个交互可能更多的是说帮助文案，因为帮助很多时候是我们自己臆想的认为那些地方需要帮助的。例如微软的帮助会在最后问你，这个答案对你有帮助么？这样用户就可以跟我们交互了。<br />
&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.chinalao.com/" style="color: rgb(0, 102, 153); text-decoration: none; background-image: url(http://www.sunthink.org/themes/dazhuer/style/dazhuer/out-link.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; padding-right: 12px; background-position: 100% 0%; background-repeat: no-repeat no-repeat; ">中劳网</a>在改版的时候讨论到帮助中心的改进，我的意见是做个faq把用户常见问题列出来。方便用户快捷找到一些问题的答案。然后把原来庞大臃肿的帮助中心放到论坛里去。这样原来死板的帮助中心就具有交互性了，用户看不明白帮助就可以在下面提问，网友可以帮助回答，我们的客服人员也可以回答！而且能回答的图文并茂！这样我们等于跟每个需要帮助的用户在交流，也能帮助我们不断改进我们死板的帮助了。<br />
<br />
其实废了这么多话就是想让<u>大家重视网站文案，而网站文案要注意简洁而准确，友好而适时适度，帮助也需要交互</u>！</div>
</span></p>]]></description>
		</item>
		
			<item>
			<link>http://www.wapchina.net/article.asp?id=81</link>
			<title><![CDATA[一次关于用户体验、交互讨论的聊天记录。MSN群]]></title>
			<author>fulubin@gmail.com(admin)</author>
			<category><![CDATA[用户体验]]></category>
			<pubDate>Fri,13 Mar 2009 14:06:37 +0800</pubDate>
			<guid>http://www.wapchina.net/default.asp?id=81</guid>
		<description><![CDATA[傅路镔 说:<br/> iphone联通VS移动。结果有知道的吗？<br/>乌鸦と麻雀 说:<br/> 应该是联通的<br/>刀刀(kacifa) 说:<br/> 什么是联通的？<br/>乌鸦と麻雀 说:<br/> iphone<br/>傅路镔 说:<br/> 我顶移动。但是顶的不自信<br/>乌鸦と麻雀 说:<br/> 移动不是谈崩了么<br/>傅路镔 说:<br/> 大家还记着周慧敏吧？<br/> 新闻有时候是涮大家。或者是宣传外围环境的<br/>Wayne.™@one night in 广州 说:<br/> 移动已经谈崩了，联通现在把热脸凑上去了。<br/>乌鸦と麻雀 说:<br/> 如果iphone移动了，那水货的iphone用不了移动的3g<br/>傅路镔 说:<br/> 嗯。从现在的新闻上看，是这个样子<br/> 3G版的iphone中国人买的少<br/> 四千七<br/> 大部分还是一代。非3G版<br/> 我 是觉着。苹果把联通拉来。就是要挟移动的<br/> 毕竟移动SP资源太多了<br/> 苹果需要有人运营他的软件平台<br/>乌鸦と麻雀 说:<br/> 如果这样的话，苹果的思路倒是不错<br/> 但移动不是不愿意和苹果分成么<br/>傅路镔 说:<br/> 我知道的消费是。苹果想销售音乐。和移动营销有冲突<br/> 移动也想通过ophone销售音乐和软件<br/> 是这一块冲突最大<br/> 不过移动也太霸道了<br/>乌鸦と麻雀 说:<br/> 没办法，移动是老大啊<br/>傅路镔 说:<br/> 不过也是为咱纳税人争取利益<br/> 能中国人挣的钱，就不让美国人挣<br/>雷响 说:<br/>&nbsp;&nbsp;<br/>傅路镔 说:<br/> 苹果运营平台上线。应该会增加国内就业机会<br/>乌鸦と麻雀 说:<br/> 我倒希望他去赚美国人的钱<br/>雷响 说:<br/> 大神还有这想法。。。<br/>傅路镔 说:<br/> 会有不少人开发iphone平台的软件<br/> 我最近在用iphone 装软件实在是很方便<br/> 不过电话功能就。很一般了。转发短信。彩信功能都没有<br/>乌鸦と麻雀 说:<br/> 是啊，在国内必须要有彩信<br/> 还要有蓝牙传输<br/> 这块苹果会放么<br/>傅路镔 说:<br/> 特别移动现在终端机太少。<br/>littlefish@tencent 说:<br/> <a href="http://www.cnbeta.com/articles/79165.htm" target="_blank" rel="external">http://www.cnbeta.com/articles/79165.htm</a><br/>傅路镔 说:<br/> iphone绝对是中国人认为当中最高端的机器<br/>乌鸦と麻雀 说:<br/> 是的<br/>傅路镔 说:<br/> 所以说。移动+苹果。自取所需<br/> 联通。应该就是为了让女友吃醋的调味品吧<br/>乌鸦と麻雀 说:<br/> 。。。联通真够苦的<br/>傅路镔 说:<br/> 这是我猜的哈。不一定<br/> 如果移动能签下来，联通就起了个鲶鱼效应<br/> 如果联通签。就是移动超级失策了<br/> 最牛的就是苹果两家签<br/> 这样赢家就是苹果了<br/>乌鸦と麻雀 说:<br/> 。。。<br/> 应该不会吧<br/>傅路镔 说:<br/> 三方博弈嘛<br/>乌鸦と麻雀 说:<br/> 而且这个苹果还没有先例<br/>傅路镔 说:<br/> 苹果也没有不分成的先例呀<br/> 来了中国。不就放弃分成了<br/>乌鸦と麻雀 说:<br/> 但即使不分成，卖终端，他也会赚不少<br/> 毕竟苹果对中国国民来说，就是档次与身份的象征 <br/>傅路镔 说:<br/> 是的。苹果喜欢将产业链拉的老长<br/> 这是人家的商业策略<br/> 乔布斯。就是个商业天才<br/>蹦达@beijing 说:<br/> share一个给群里的MM。。。。<br/><a href="http://www.ylib.com/hotsale/milktea/index.htm" target="_blank" rel="external">http://www.ylib.com/hotsale/milktea/index.htm</a><br/>我老婆的最爱~估计大部分MM都喜欢~<br/>乌鸦と麻雀 说:<br/> 如果iphone、变成街机会怎么样呢？<br/>傅路镔 说:<br/> 应该不会吧<br/>乌鸦と麻雀 说:<br/> 如果呢？<br/>傅路镔 说:<br/> 那么贵。街就街吧。现在psp也街了。可没人说俗<br/>littlefish@tencent 说:<br/> 反正我也不会去用iphone的啦，街不街无所谓<br/>乌鸦と麻雀 说:<br/> 。。。<br/> 我也不用，前几天玩了下，感觉也没那么新鲜了<br/>傅路镔 说:<br/> iphone的触摸感觉。是体验这个层面很好的东西<br/> 普通人，最喜欢这种感觉<br/>乌鸦と麻雀 说:<br/> 对<br/>傅路镔 说:<br/> 咱们是觉着他功能实现麻烦<br/> 可普通人就觉着。那照片要划很爽<br/> 长的又好看。又能听歌<br/> 玩游戏也简单<br/> 用手划就行<br/>乌鸦と麻雀 说:<br/> 呵呵，是啊，要不然也不会那么多山寨<br/>傅路镔 说:<br/> iphone有了策略和触摸。游戏设计真的是很简单。玩起来<br/> 感觉也很不错。普通人很快上手<br/>班有才 说:<br/> 太贵了<br/>乌鸦と麻雀 说:<br/> 如果按用户的文化层次和收入来看，中层的用户应该是iphone的最大用户群<br/>littlefish@tencent 说:<br/> 汗，iphone我拿来玩过，实在上不了手，<br/>乌鸦と麻雀 说:<br/> 中层市场非常庞大<br/>littlefish@tencent 说:<br/> 触摸感觉很炫，但是新奇一下就过去了，跟突然看到个美女一样，<br/>乌鸦と麻雀 说:<br/> 4000多块钱，对于中层来说，还是买的起的<br/>傅路镔 说:<br/> 我一开始也晕。慢慢就了解它的真蒂了<br/> 把自己当做一个新手去用<br/>littlefish@tencent 说:<br/> 眼前一亮，但是接触一下，发现也就那么回事<br/>乌鸦と麻雀 说:<br/> 触屏手机很早就有了，只是苹果的体验做的更好<br/>傅路镔 说:<br/> 乌鸦。其它手机是用笔去触摸<br/> 苹果是用手。完全不同的概念<br/> 因为手的灵活性是最高的<br/>乌鸦と麻雀 说:<br/> 这个我知道，用手也不难实现<br/>傅路镔 说:<br/> 其实电影里，用手操作电脑的镜头很多了<br/>乌鸦と麻雀 说:<br/> 是啊<br/>傅路镔 说:<br/> 可现实。还得鼠标，键盘去和电脑交互<br/>littlefish@tencent 说:<br/> 太灵活了，经常动作超出我的预期<br/>傅路镔 说:<br/> iphone这才出多久呀。再往后三年。延着人体工学交互的思路往下走<br/> 并且苹果就做一个产品。就专注一个东西<br/>乌鸦と麻雀 说:<br/> 那希望能有全息投影的手机<br/> 不过苹果从来不做用户调研<br/>傅路镔 说:<br/> 是的。我看过一个文章。说微软天天做用户调查。产品做出来骂声一片 <br/> 苹果很少做用户调查。产品出来后，就一片惊艳<br/>乌鸦と麻雀 说:<br/> 是啊，有时候我就感觉做用户调研反而不利于产品创新<br/> 不过微软的东西，根上就不咋样，再调研，也不会有太多改善<br/>傅路镔 说:<br/> 这个问题吧。天才做事的方法和普通人是不一样的<br/> 我看只能这么解释<br/>乌鸦と麻雀 说:<br/> 。。。。唉<br/> 现在都在讲体验啊，UCD啊，这些都是基于调研的基础<br/>doris，土豆泥_静水潜流 说:<br/> 不过微软的东西，根上就不咋样<br/> 这个....<br/> xp<br/> oddice<br/>乌鸦と麻雀 说:<br/> 不过苹果自己有一份很大风格指南<br/>doris，土豆泥_静水潜流 说:<br/> office<br/> visio<br/> 都是微软的<br/>傅路镔 说:<br/> 苹果喜欢找人性最本质的东西去开发产品<br/>littlefish@tencent 说:<br/> 没有微软一统天下的差体验，哪有苹果的“惊艳”啊……<br/>乌鸦と麻雀 说:<br/> 我说的是系统<br/> 的确<br/>傅路镔 说:<br/> 之前苹果做的产品，基本没有成为主流的东西<br/>乌鸦と麻雀 说:<br/> 我看过一个关于产品的三个维度，可行 可能 期望<br/> 苹果做的是 期望<br/>littlefish@tencent 说:<br/> 也不用太神话苹果的体验了，炫，也不是微软产品的主要价值<br/>doris，土豆泥_静水潜流 说:<br/> 恩<br/>乌鸦と麻雀 说:<br/> 是的<br/>傅路镔 说:<br/> 是的。不能说微软的产品不好嘛<br/>doris，土豆泥_静水潜流 说:<br/> 苹果不实用<br/>傅路镔 说:<br/> 苹果是在用做艺术品的眼光去做产品<br/>littlefish@tencent 说:<br/> 时尚，只能是少数人的，否则，就街了<br/>乌鸦と麻雀 说:<br/> 苹果做到了叫好又叫座<br/>littlefish@tencent 说:<br/> 只能说它的用户太少<br/>乌鸦と麻雀 说:<br/> 不过苹果的mp3在美国就是街机<br/>傅路镔 说:<br/> 日用消费品，还得是老百姓普通的东西。苹果是做那种满足人精神产品的东西<br/> 音乐，游戏，娱乐。这是精神层面。容易出花<br/>乌鸦と麻雀 说:<br/> 的确很少，但苹果的用户很忠实<br/>傅路镔 说:<br/> 做东西可以很花哨<br/> office就不行了。办公的东西<br/> 商业笔记本一样。我还是喜欢 thinkpad<br/>乌鸦と麻雀 说:<br/> 这有个认知吧<br/> 毕竟提到tinkpad，就会想到稳定 运转正常<br/>傅路镔 说:<br/> 产品特性不同<br/>littlefish@tencent 说:<br/> 定位不一样，我还是佩服微软一些，骂，不一定是坏事<br/>傅路镔 说:<br/> 微软在盖茨领导下。还是相当不错的<br/>乌鸦と麻雀 说:<br/> 恩，只能说成功的方式很多<br/>傅路镔 说:<br/> XP之后，是保尔默搞的<br/>乌鸦と麻雀 说:<br/> vista确实不咋样<br/> win7的出来，也提前宣告vista的失败<br/>littlefish@tencent 说:<br/> 7是谁搞的？<br/>乌鸦と麻雀 说:<br/> vista的UI是比较绚，但是耗资源，配置高，软件不兼容<br/> 一部分新的操作习惯，也比较怪<br/>傅路镔 说:<br/> 我觉着。微软是高估了硬件水平的发展<br/>littlefish@tencent 说:<br/> 没啥吧，98到2000，也有很多问题，每一次升级换代都是痛苦的，vista虽不好用，但是不妨碍它成为新一代产品的地位<br/>傅路镔 说:<br/> 硬件销售数字下降，这是不争的事实<br/>乌鸦と麻雀 说:<br/> 恩，而且现在还有些电脑配的是xp<br/> 比如现在在国外非常火爆的SNS网站Twitter，在国内就很难做起来，因为在国内有QQ群 <br/> 刚看到一片文章<br/>傅路镔 说:<br/> QQ这个东西，改变了N多互联网公司的境遇<br/>蹦达@beijing 说:<br/> <a href="http://wwv.kaixin.com/kx2.do?iid=fdc94270-acc7-4b62-9f5b-32716b452223" target="_blank" rel="external">http://wwv.kaixin.com/kx2.do?iid=fdc94270-acc7-4b62-9f5b-32716b452223</a>&amp;rt=20<br/>doris，土豆泥_静水潜流 说:<br/> 微软做的是世界市场，不是单单一个中国市场<br/>乌鸦と麻雀 说:<br/> QQ让很多互联网公司尴尬<br/>doris，土豆泥_静水潜流 说:<br/> 不能用中国的现状评判<br/>傅路镔 说:<br/> 小鱼。腾讯曾经进入过日本市场。之后没成功<br/>乌鸦と麻雀 说:<br/> 但微软既然要做中国市场，就一定要本土化<br/>傅路镔 说:<br/> 说说这块呗<br/>乌鸦と麻雀 说:<br/> 微软的msn本土化就很糟糕<br/>littlefish@tencent 说:<br/> 日本市场？这个我不知道<br/><br/>乌鸦と麻雀 说:<br/> 日本市场很特殊<br/>双诚 说:<br/> 大家一般上的是那个开心网？<br/>Wayne.™@one night in 广州 说:<br/> 只能说，msn在中国的本土化很糟糕<br/>蹦达@beijing 说:<br/> 最近是千橡的开心<br/>乌鸦と麻雀 说:<br/> 不容易进，看看日本的手机市场，nokia已经退出了<br/>傅路镔 说:<br/> 当年日本还没有自己的互联网产品使用习惯呢<br/> 不过日本人PC上网比例很低<br/>乌鸦と麻雀 说:<br/> 对<br/> 都是手机上网<br/>littlefish@tencent 说:<br/> 我不进这个山寨开心，它总是引诱我输入msn密码……<br/>傅路镔 说:<br/> 打电话还便宜<br/> 咱们用QQ。也是电话费高给逼的<br/>双诚 说:<br/> 这个山寨开心***没有屏蔽<br/>littlefish@tencent 说:<br/> 小i还有歧视<br/>乌鸦と麻雀 说:<br/> 电话费。唉，无奈<br/> 我们承受着比发达国家高的多的电话费<br/>傅路镔 说:<br/> 咱这种讨论。要是能线下多爽<br/> 和小鱼搞个视频会议<br/>乌鸦と麻雀 说:<br/> 是啊<br/>Leon&nbsp;&nbsp;老猪 (-`00`-)&nbsp;&nbsp;&nbsp;&nbsp;说:<br/> kaixin.com<br/> 能看到不？<br/>乌鸦と麻雀 说:<br/> 能<br/>doris，土豆泥_静水潜流 说:<br/> 我们承受着比发达国家高的多的电话费<br/> 不部分费用是用来建网了<br/>乌鸦と麻雀 说:<br/> 那也很高了<br/>doris，土豆泥_静水潜流 说:<br/> 多少新网要造，成本<br/>傅路镔 说:<br/> 土豆从购买力来说，咱们的通讯费还可以<br/>littlefish@tencent 说:<br/> 大部分费用是用来发工资了好不好…… <br/>傅路镔 说:<br/> 并且咱们的手机信号。的确很牛B<br/>乌鸦と麻雀 说:<br/> 都发给老板了<br/>doris，土豆泥_静水潜流 说:<br/> 我是在重复乌鸦的话<br/>littlefish@tencent 说:<br/> 电信、移动一直是超级高工资的<br/>乌鸦と麻雀 说:<br/> 。。。<br/>doris，土豆泥_静水潜流 说:<br/> 大神(原傅路镔) 说:<br/> 土豆从购买力来说，咱们的通讯费还可以<br/>Doris，土豆泥 说:<br/> 我是在重复乌鸦的话<br/><br/>乌鸦と麻雀 说:<br/> 。。。<br/> sns会不会让博客彻底完蛋<br/>傅路镔 说:<br/> 乌鸦这个问题得看谁运营博客<br/>乌鸦と麻雀 说:<br/> 如果就整体来看呢<br/>SB团长SB团@hozin.com 说:<br/> 博客有没有让论坛完蛋呢<br/>邻家网—张杰 说:<br/> 博客还是博客网啊<br/>傅路镔 说:<br/> 如果新浪SNS呢？<br/> 博客SNS化<br/>邻家网—张杰 说:<br/> 新浪已经在SNS了<br/>傅路镔 说:<br/> 是的。已经SNS化了<br/>乌鸦と麻雀 说:<br/> sns话的博客，就不是博客了<br/>傅路镔 说:<br/> 所以说，没有谁消亡<br/>邻家网—张杰 说:<br/> 博客是啥<br/>傅路镔 说:<br/> 博客SNS化。<br/> SNS是横轴。博客是纵轴。可以矩阵<br/>邻家网—张杰 说:<br/> 博客是啥？<br/>傅路镔 说:<br/> blog<br/>邻家网—张杰 说:<br/> 干吗的<br/>乌鸦と麻雀 说:<br/> 那就是说博客只是sns中的一个功能了？<br/>邻家网—张杰 说:<br/> 干嘛用<br/>傅路镔 说:<br/> SNS&nbsp;&nbsp;电子商务&nbsp;&nbsp;这都从属于一个平级<br/> 比如论坛想电子商务化<br/>邻家网—张杰 说:<br/> 我觉得为啥要分那么清楚<br/> 很多东西都可以组合在一起<br/>傅路镔 说:<br/> 是的。<br/> 矩阵嘛<br/>Arrowlike 说:<br/> 最后都要商业化<br/><br/>邻家网—张杰 说:<br/> 博客，可以SNS<br/>双诚 说:<br/> 张杰 你去支付宝了吗？<br/>邻家网—张杰 说:<br/> 我不去<br/> 去不了<br/>双诚 说:<br/> 哦？ 咋了？<br/>班有才 说:<br/> 为啥<br/>乌鸦と麻雀 说:<br/> 我很想知道sns之后会是什么<br/>邻家网—张杰 说:<br/> 我就没投简历<br/> SNS之后<br/>班有才 说:<br/> 大家知道有啥好的记账软件吗<br/>乌鸦と麻雀 说:<br/> excel<br/>邻家网—张杰 说:<br/> 估计就是10年后的互联网是干嘛的<br/>班有才 说:<br/> 那个还要自己操作一下<br/>littlefish@tencent 说:<br/> 我用家财通<br/>傅路镔 说:<br/> SNS就是社会化嘛。再说SNS前几年很多人都在研讨<br/>littlefish@tencent 说:<br/> 挺不错的，普及版是免费的<br/>傅路镔 说:<br/> 蹦达。搞个线下论坛活动吧<br/>littlefish@tencent 说:<br/> 收费的可以跟股票、银行帐户直接联线，我不敢用<br/>乌鸦と麻雀 说:<br/> 如果把SNS的形式广义化，会怎么样<br/> 把它渗透到现实生活中<br/>傅路镔 说:<br/> SNS用白话讲就是关系<br/> 人类是通过N<br/>邻家网—张杰 说:<br/> 乌鸦说得，和我的想法很一致<br/>班有才 说:<br/> 我就是想把我的工钱和信用卡管管<br/>littlefish@tencent 说:<br/> …… sns本来就是从生活中提炼出来的啊，还需要回去么？<br/>班有才 说:<br/> 要不然我每个月都捉襟见肘<br/>邻家网—张杰 说:<br/> 不管何种形式网络。其实解决的都是相同的问题<br/>傅路镔 说:<br/> 人类是通过N个关系交织成的社会<br/>littlefish@tencent 说:<br/> 有才，我推荐你用那个，很好用，我自己坚持记账的<br/>邻家网—张杰 说:<br/> “littlefish@tencent 说:<br/>…… sns本来就是从生活中提炼出来的啊，还需要回去么？“这个就像艺术一样，来源于生活，也还原于生活<br/>乌鸦と麻雀 说:<br/> …… sns本来就是从生活中提炼出来的啊，还需要回去么？<br/>我的意思是，可以通过生活中的不同终端去链接<br/> 例如，电视 冰箱 手机等<br/>邻家网—张杰 说:<br/> 通过网站的模型去解决人们的生活才是<br/>littlefish@tencent 说:<br/> 好比某个大妈到你们家串门，又说张三长、李四短……<br/> 界就是最原始的SNS……<br/>傅路镔 说:<br/> 小鱼正解<br/>乌鸦と麻雀 说:<br/> 是的<br/> 我的意思是其他终端，不是局限在人上<br/>傅路镔 说:<br/> 乌鸦你聊细节了<br/> 一会再说细节<br/> 现在是人的关系脉络<br/> 以前好多论坛，产品。都是网友<br/>littlefish@tencent 说:<br/> 其他终端？解释一下，电视、冰箱怎么互动？SNS是人的，不是东西的<br/>傅路镔 说:<br/> 大家做产品的时候<br/> 现在，都把名称改成好友<br/> 这就是SNS化后的转变<br/>乌鸦と麻雀 说:<br/> 其他终端只是载体<br/> 网站也是个载体<br/>littlefish@tencent 说:<br/> 班有才，这个给你 <a href="http://www.mymoneymaster.com/" target="_blank" rel="external">http://www.mymoneymaster.com/</a><br/>傅路镔 说:<br/> 小鱼。手机可以支付。这也是机器间的SNS<br/> 比如手机控制空调提前开启。这也是关系 化<br/> 机器也是有个流程的<br/> 关了电视就关相应的客厅灯。接着卧室灯开<br/> 这些流程其实都是可以交互出来的<br/> 比如厕所。抽风机自动开<br/>realsky 说:<br/> SNS的s不是social么？<br/>乌鸦と麻雀 说:<br/> 恩，机器也是在形式上模拟人，因为机器要被人用<br/>傅路镔 说:<br/> 很多机器的流程自动化<br/>Leon&nbsp;&nbsp;老猪 (-`00`-)&nbsp;&nbsp;&nbsp;&nbsp;说:<br/> sns 不等于 关系 <br/>littlefish@tencent 说:<br/> 额…… 这个貌似不是，这种是固定流程，最多只能是家庭PC控制家庭各终端；<br/>doris，土豆泥_静水潜流 说:<br/> 小鱼坚持记账有神恶魔好处吗<br/>littlefish@tencent 说:<br/> 和SNS有本质的区别<br/>Leon&nbsp;&nbsp;老猪 (-`00`-)&nbsp;&nbsp;&nbsp;&nbsp;说:<br/> 而且那个只能叫机器间的关联 <br/>傅路镔 说:<br/> 六十年代SNS的定义较现在来看。比较狭隘<br/>doris，土豆泥_静水潜流 说:<br/> 小鱼坚持记账有什么好处吗<br/><br/>双诚 说:<br/> 张杰 我加你私聊一下好吗？<br/>邻家网—张杰 说:<br/> lanselioulang@hotmail.com<br/> 双诚,我的MSN<br/>乌鸦と麻雀 说:<br/> 虽然人是社会的主体，但不是自然的主体<br/>littlefish@tencent 说:<br/> 这种区别，我感觉就像无机物、有机物之间的区别一样，一种是可预测的，一种是不可预测的，SNS应该属于后者<br/> 或者计算机、人脑的区别<br/>邻家网—张杰 说:<br/> 我觉得还是人去催化其他<br/>乌鸦と麻雀 说:<br/> 是有区别，但又在相互模仿<br/>littlefish@tencent 说:<br/> 坚持记账好处多多啊，doris<br/>蹦达@beijing 说:<br/> 刚才看见阿里的一篇文章，写的如何在一年内做到皇冠的，写的相当扯淡，于是开始找评论，想回复骂两句。。。却发现。。。Y根本没提供评论的功能。日~~~~~<br/>Leon&nbsp;&nbsp;老猪 (-`00`-)&nbsp;&nbsp;&nbsp;&nbsp;说:<br/> 家电间关系是说 电视看空调特顺眼 抛两个媚眼 空调吓得一哆嗦&nbsp;&nbsp;这个算关系了 哈<br/>傅路镔 说:<br/> 我是觉着。现在的家庭智能化还需要继续。<br/>邻家网—张杰 说:<br/> 我觉得那已经到机器自动化时代<br/> 或者说机器人能思维<br/>傅路镔 说:<br/> 要流程化，比较钥匙转动进门了。<br/>邻家网—张杰 说:<br/> 跟我们区别不到了<br/> 不大了<br/>littlefish@tencent 说:<br/> 是，我同意老猪的意思，也许抛、也许不抛，这个才是关系的魅力<br/>傅路镔 说:<br/> 灯，空调之类的东西都要开启<br/>蹦达@beijing 说:<br/> 咋从交互设计升级到了工业设计了？<br/> 我错过了啥？<br/>傅路镔 说:<br/> 工业设计也要交互嘛<br/>乌鸦と麻雀 说:<br/> 抛不抛不一定是一个主管的意念<br/> 主观<br/>傅路镔 说:<br/> 以用户体验为基准<br/>乌鸦と麻雀 说:<br/> 有可能是被动的<br/>littlefish@tencent 说:<br/> 如果不是主管，根据条件限定，那就没有关系的意思了<br/> 我是个人理解哈~ 可能有点偏， <br/> 开会去了，闪人，<br/>乌鸦と麻雀 说:<br/> 没事呵呵<br/>littlefish@tencent 说:<br/> doris，管钱，其实是管自己、管家……<br/>乌鸦と麻雀 说:<br/> 举个例子，如果人饿了，就要吃饭，但是没有钱没有办法买饭。所以工作赚钱，就变成了被动的<br/>doris，土豆泥_静水潜流 说:<br/> 哦，好的e<br/>乌鸦と麻雀 说:<br/> 当然这需要环境的限定<br/>傅路镔 说:<br/> 蹦达@beijing 说:<br/> 刚才看见阿里的一篇文章，写的如何在一年内做到皇冠的，写的相当扯淡，于是开始找评论，想回复骂两句。。。却发现。。。Y根本没提供评论的功能。日~~~~~<br/> <br/> 淘宝SNS产品。现在还看不到演示是吗？<br/> 总结下。开头是移动和联通争夺iphon<br/>之后到iphone用户体验<br/>之后到苹果交互设计<br/>班有才 说:<br/> 我要闪了，两个文档，一个管理规范，一份周报，我的周末啊<br/> 88<br/>邻家网—张杰 说:<br/> 大家都一样<br/>傅路镔 说:<br/> 之后微软与苹果之间的区别<br/>之后博客与SNS之争<br/>之后SNS社会化产品的应用<br/> 再之后工业产品的交互关系设计<br/>realsky 说:<br/> <a href="http://club.pchome.net/topic_1_48_3245721___TRUE.html." target="_blank" rel="external">http://club.pchome.net/topic_1_48_3245721___TRUE.html.</a><br/>傅路镔 说:<br/> 好像延续性挺强的<br/>乌鸦と麻雀 说:<br/> 是啊<br/> 可以搞个小型论坛了<br/>傅路镔 说:<br/> 还是在用户体验的题目下讨论的<br/> 用户体验，交互<br/> 我得把这次聊天发博客上<br/>乌鸦と麻雀 说:<br/> 。。。]]></description>
		</item>
		
			<item>
			<link>http://www.wapchina.net/article.asp?id=18</link>
			<title><![CDATA[[图]闻名不如见面 Google Android 平台手机样品]]></title>
			<author>fulubin@gmail.com(admin)</author>
			<category><![CDATA[用户体验]]></category>
			<pubDate>Fri,15 Feb 2008 13:24:07 +0800</pubDate>
			<guid>http://www.wapchina.net/default.asp?id=18</guid>
		<description><![CDATA[<h3 id="news_title">[图]闻名不如见面 Google Android 平台手机样品</h3>
<p id="news_font">&nbsp;</p>
<p id="news_author"><span><a href="http://m.cnbeta.com/print.php?sid=49110" target="_blank"></a></span></p>
<script language="javascript" type="text/javascript">var ReTitle = '回复:[图]闻名不如见面 Google Android 平台手机样品';</script>
<div id="news_content"><a href="http://www.cnbeta.com/topic.php?topicid=52"><span id="sign" title="Google 谷歌" style="DISPLAY: inline-block; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.cnbeta.com/images/topics/google.png', sizingMethod='scale'); FLOAT: right; WIDTH: 100px; CURSOR: hand; HEIGHT: 47px"></span></a>
<p>去年被传的沸沸扬扬的谷歌手机一直被神秘的面纱笼罩着,网上的各种谍照和功能更是虚虚实实.直到今年英国ARM公司在西班牙巴塞罗那举行的移动通信世界大会(MWC 2008)上展出了基于Android平台的谷歌手机.据官方介绍,基于Android平台的谷歌手机将于第二季度销售.下面我们就来看下这传说中的超强手机.<br /><br /></p>
<p>&nbsp;</p>
<center><img alt="" src="http://cimg2.163.com/catchpic/D/D7/D7FB83621FCC95958D63737AC4A226FF.jpg" border="0" /></center>
<p>&nbsp;</p>
<p>&nbsp;</p>
<center><img alt="" src="http://cimg2.163.com/catchpic/2/20/204EDFAD71813376B6620656B954546D.jpg" border="0" /></center>
<p>&nbsp;</p>
<p>&nbsp;</p>
<center><img alt="" src="http://cimg2.163.com/catchpic/7/7D/7D6024759AB0DF4B22EC1C40C9E29B46.jpg" border="0" /></center>
<p>&nbsp;</p>
<p>&nbsp;</p>
<center><img alt="" src="http://cimg2.163.com/catchpic/B/B7/B7F121429A0B9A115B8AC09738F1CD08.jpg" border="0" /></center>
<p>&nbsp;</p>
<p>&nbsp;</p>
<center><img alt="" src="http://cimg2.163.com/catchpic/3/3F/3F3F67F4E99F5A809DFBA6775DA2589F.jpg" border="0" /></center>
<p>&nbsp;</p>
<p>&nbsp;</p>
<center><img alt="" src="http://cimg2.163.com/catchpic/B/B0/B0B4177B7D5F21BAC06E19056A43F3FA.jpg" border="0" /></center></div>]]></description>
		</item>
		
			<item>
			<link>http://www.wapchina.net/article.asp?id=16</link>
			<title><![CDATA[adiads阿迪达斯2008平面广告]]></title>
			<author>fulubin@gmail.com(admin)</author>
			<category><![CDATA[用户体验]]></category>
			<pubDate>Mon,04 Feb 2008 14:58:32 +0800</pubDate>
			<guid>http://www.wapchina.net/default.asp?id=16</guid>
		<description><![CDATA[<img src="http://desk.blueidea.com/DESK/QTBZ/adiads_2/adiads_2001.jpg" alt="" /><br /><br /><img src="http://desk.blueidea.com/DESK/QTBZ/adiads_2/adiads_2002.jpg" alt="" /><br /><br /><img src="http://desk.blueidea.com/DESK/QTBZ/adiads_2/adiads_2004.jpg" alt="" /><br /><br /><img src="http://desk.blueidea.com/DESK/QTBZ/adiads_2/adiads_2003.jpg" alt="" /><br /><br />adiads]]></description>
		</item>
		
			<item>
			<link>http://www.wapchina.net/article.asp?id=10</link>
			<title><![CDATA[概念设计及交付物、评估和测试]]></title>
			<author>fulubin@gmail.com(admin)</author>
			<category><![CDATA[用户体验]]></category>
			<pubDate>Fri,01 Feb 2008 18:38:19 +0800</pubDate>
			<guid>http://www.wapchina.net/default.asp?id=10</guid>
		<description><![CDATA[概念设计及交付物、评估和测试<br />2007年04月18日 上午 10:55<br />作者：JunChen | 话题：(0704a)概念设计和设计师的综合思考 <br /><img alt="" src="http://farm1.static.flickr.com/234/461312628_e09d27086f.jpg" /><br /><br />很多产品经理常会把概念设计一起写到产品需求文档 （PRD）里面去，当然 PRD 的范围和内容，以及概念设计的范围和内容，都比较灵活，可根据实际情况调整，如产品战略、人力配置等。需求到什么程度，概念设计就从什么程度开始（或许已经开始）。我在本文中提到的概念设计，是产品早期的微缩的设计过程，交付物主要是概念图（Concept Map），但在很多情况下，我们还需要针对产品需求的低保真纸面原型设计（Lo-fi Paper Prototyping）、模型等，以及根据该原型进行的评估和测试。<br /><br /><br />谁来扮演这个角色<br />谁来进行概念设计？可能是产品经理，可能是交互设计师，也可能是一个团队。但这个角色必须：<br /><br />理解用户和需求 <br />具有缜密的逻辑思维能力 <br />能够结合多方面因素综合思考 <br />具有良好的沟通能力 <br />概念设计的目的<br />面向用户，模拟（而非实现）最终产品，解决焦点问题（定位和需求） <br />面向团队，预先演示，尽量达成共识，避免在后面的产品开发和设计过程中多方面的矛盾 <br />尤其是需要把握模拟这个&quot;度&quot;，有一篇文章我推荐过不止一遍：Don't make the Demo look Done，文章大意为：非常写实的原型带来团队对于细节的更多关注，概要的原型使团队更关注大局，原型的程度必须和产品开发程度相一致。值得一读。<br /><br />关于创意：产品的创意大部分源自概念设计阶段。无论是游戏、Web，还是工业设计领域。交互层面的创意，有时候也会放到概念设计中。<br /><br />概念设计的交付物<br />根据实际情况的不同，具体交付物的内容和细致程度不同：<br /><br />概念模型（Concept Model），概念图，流程图 <br />原型（Prototype），一般是低保真纸面原型，也有淡彩上色的原型 <br />内容清单（Content Inventory），一般是简要但准确的，类似于功能列表的内容清单 <br />概念模型是概念设计最重要的交付物，它可以使整个团队对于产品有清晰和统一的认识。一定要做，无论是概念图、脑图、流程图&hellip;如果在你的公司里，概念设计由 PM 把握，那么概念设计阶段到此结束。但是，如果是设计师扮演这个角色，那么可能需要更多东西。比如原型。<br /><br />对于概念设计阶段是否需要原型，很多人持有不同意见。我的理解是，根据你的团队规模和项目规模决定，小型团队小项目的情况下，我个人觉得原型比概念模型更加实际并且效率高。也可以将这个理解为是将交互设计的一部分工作提前了。<br /><br />这几方面网上相关文章较多，这里就不再展开了 :)<br /><br />评估和测试<br />概念设计阶段的评估和测试，主要是演示和讨论为主（如果有需要也可以进行可用性测试），目的是：<br /><br />确认概念模型是否准确（定位） <br />确认该原型是否能完成功能（需求） <br />评估该原型（可能重点是创意部分）技术和市场的可行性 <br />在讨论过程中需要注意的是：<br /><br />交互设计并不在讨论范围之中，典型的比如&quot;这个不该使用下拉框&quot;&quot;这个布局不太易用吧？&quot;之类的问题 <br />视觉设计更不在讨论范围内，否则容易影响产品开发流程的推进 <br />如果需要使用本阶段的原型开展可用性测试，可以参考这篇文章。<br /><br />后记<br />本想详细谈谈纸面原型的制作，发现与 Angela 的文章有些重合。所以取消了纸面原型部分的内容，等谈到交互设计的时候再议。作为补偿，再次推荐《Paper Prototyping》和《Communicating Design》两本书 :)<br /><br />互联网没有自然增长，只有自然选择（淘汰），所以当面临时间和质量的两难境地，创业者往往选择时间。公司越大，概念设计越偏向概念这一端。这并不说明这不会诞生伟大的产品，比如日本的汽车工业。<br /><br />题图（大图）是一个 Blog 后台的部分纸面原型。<br />]]></description>
		</item>
		
			<item>
			<link>http://www.wapchina.net/article.asp?id=9</link>
			<title><![CDATA[我要如何了解&#34;她&#34;]]></title>
			<author>fulubin@gmail.com(admin)</author>
			<category><![CDATA[用户体验]]></category>
			<pubDate>Fri,01 Feb 2008 18:37:08 +0800</pubDate>
			<guid>http://www.wapchina.net/default.asp?id=9</guid>
		<description><![CDATA[我要如何了解&#34;她&#34;<br/><br/>作者：Angela | 话题：(0703b)如何了解用户和需求 <br/><img src="http://ucdchina.com/blog/wp-content/uploads/2007/03/head_pic_a.jpg" border="0" alt=""/><br/>上回我们讨论UE在团队中的作用，有一点大家已经达成共识，那就是用户是所有体验的基础，如果用户的要求没被满足，良好的体验自然也无从说起。那么，我们怎样才能了解用户需求呢？<br/><br/>大家都知道可用性测试、调查问卷之类与用户进行沟通的途径，这些方法各有各的利弊，如果逐一分析的话，恐怕至少要分成三本书来写。现在我们先把它们放在一边，从另一个角度来看看这个问题：用户的需求会通过什么途径来表达呢？<br/><br/>举个小小的例子，某位小朋友饿了，他可能会说&#34;我要吃点东西&#34;，然后你就知道应该给他找点吃的；如果他什么都不说，抓起某样食物就狂吃，这很明显——他饿了；要是他说&#34;我想吃火锅&#34;，而你没有火锅只有馒头呢？我们稍后再说明这个问题。<br/><br/>不过你至少可以看出，用户的需求通过这样三种形式来传达——目标、行为、说法。<br/><br/>在这个例子中，用户最根本的需求是饥饿（我们通常不需要了解用户最根本的需求），目标是找东西吃下去，行为显示了这个目标，他自己认为火锅能解决这个问题。我们要做的，就是根据这些资料提供给他适合的食物。这里我们提供的是馒头，小朋友看到馒头的时候，有两种可能，一种是什么也不说，抓过来就狂啃；另一种是一边狂啃一边生气。第一种情况说明，你提供给他的选择比他想象的更实用。同时说明：用户所说的其实不一定就是他们真正的需求，行为才是最真实的。第二种情况说明，你对用户的需求了解得不够，需要再收集更多的数据，比如他爱吃米饭还是面食，喜欢甜还是辣等。<br/><br/>当然大多数研究比这个例子要复杂得多，但总的说来，我们除了要知道用户有什么行为，还必须知道为什么会出现这样的行为。所以必须要将各种方法综合起来使用，然后描述出一个完整的用户形象。<br/><br/>用户需求的组成就如下面这个图形所示。为什么&#34;行为&#34;占了一半的比重呢？我个人认为，受中国文化的含蓄和中庸哲学影响，国内用户恐怕很少能真诚、准确地说出自己的想法，所以应该在行为研究上有所偏重。<br/><br/><br/> Image: <a href="http://ucdchina.com/blog/wp-content/uploads/2007/03/research-11.jpg" target="_blank" rel="external">http://ucdchina.com/blog/wp-content/uploads/2007/03/research-11.jpg</a><br/>我们先不考虑如何分析数据，现在只需要想：有哪些方法可以收集到这些数据呢？看下面这个图：<br/><br/><br/> Image: <a href="http://ucdchina.com/blog/wp-content/uploads/2007/03/research-2.jpg" target="_blank" rel="external">http://ucdchina.com/blog/wp-content/uploads/2007/03/research-2.jpg</a><br/>正如你看到的，网站流量和日志文件，以及被大家交口称赞的眼动实验用于了解用户做了什么（行为），而用户访谈和调查问卷用于了解用户为什么这么做（目标和说法），情景调查、可用性测试和CRM统计则介于目标和行为之间。<br/><br/>首先说一下用户访谈和调查问卷。<br/><br/>这两者看起来很相似，都是提出一堆问题让用户来回答。但它们之间有个关键的差异：数量。用户访谈是抽样调查，数量少（每种类型的用户不超过10个），而调查问卷则是一种大范围内的普查。数量的不同决定了两种方法的性质，一种是定性的研究方式，另一种则是定量的研究方式。不过它们用于发现用户的观点是非常有用的，你往往会在用户的答复中，发现你之前根本就没考虑过的新想法，这也许就会改变你的产品的思路。<br/><br/>两者在运作的形式上也有所差异。用户访谈的形式是一种更加随意的谈话方式，而且要注意尽量不要提&#34;是非题&#34;（即&#34;是&#34;或&#34;否&#34;的问题），让用户自由表达。你可以事先有一个大纲，但一定不要照本宣科。在时间上也要保持一定的弹性，一般你会告诉用户需要1个小时，不过要是遇上一个善谈的用户，滔滔不绝讲1个半小时也是有可能的，你要做的，就是尽量别让他跑得太远：）。调查问卷则更严谨一点，不管是在网上还是线下进行的调查，大部分都应该是量级选择题，我们通常看到的&#34;你是否同意这个说法，5分非常同意，0分完全不同意&#34;，就属于这种问题，用户可以通过点击和画勾来回答。调查问卷同样也要避免&#34;是非题&#34;，同时为了保证用户不会因为耗时太长而放弃，最好自己测试一下答题时间，一般不能超过15分钟（我回答过超过20分钟的问题，不过那是几个心理测试）。<br/><br/>这里我只想强调一点，不管哪种方法，提问的技巧和问题的顺序相当的重要。如果你在一开始就告诉用户，你们准备开发几个新功能，后面又问到用户对现有产品的想法，这就是一种典型自我否定，势必会影响到用户对后一个问题的看法。我想这就是需要心理专家发挥作用的环节。挖掘人类心底的想法，从来都是一件斗智斗勇的事。在某种程度上这种沟通过程更像是你和你身边那个女孩相处的情形。你一直想弄明白她为什么不高兴，但是又不能直接问，因为你知道，她永远不会直接回答。你唯一能做的就是长叹一声&#34;我要如何了解她？！&#34;。可能她只是因为你没有穿她送的那件衬衣而生气，但她只会说：&#34;你今天打扮得真没品味。&#34;表现出来的行为就是不跟你去任何公众场合，目标就是⋯⋯你自己分析吧。<br/><br/>网站流量统计、日志文件用于了解用户做了什么，但通常不能解释他们为什么这么做，与之相似的还有CRM数据。所以这三者最好是能和调查问卷结合起来使用。 把某个用户的点击流（clickstream）与他完成的调查问卷放到一起分析，你就能了解这个行为背后的原因。当然，前提是您可以捕获某个特定用户的日志记录，并在调查问卷中找到同一个人的回复。大部分的网页里都埋有统计程序的种子，作用和我们今天的主题一样，只管尽可能多地收集数据。而在统计背后的数据挖掘，更是一场艰苦而长期的工作。<br/><br/>可用性测试和眼动实验本质上相同的，它们的局限很明显，只能用于发现已有产品的缺陷和障碍，而这同样可以用其它途径得到。所以在国内炒得沸沸扬扬的可用性测试，我个人认为对互联网产品似乎并不能产生太大的影响。这一节就跳过。<br/><br/>情景调查很有意思，组合了用户访谈和可用性测试两者的方式。简单说就是你跑到用户那儿去，看看他们在熟悉的环境下如何进行操作的，这样你得到的数据就比在实验室要真实得多，对于某些和环境有关的产品而言，进行实地考察是非常重要的。进行情景调查你可以突然袭击（偷窥）或者提前和用户说好。不过一般来讲，在用户不知情的情况下你能看到更多的东西，虽然听起来似乎有点不够君子。调查一开始，你一边观察用户的行为，一边记下有疑问的地方，这算是改良版的可用性测试。等用户完成他的日常工作，你就可以现身出来，邀请用户进行一次简短的访问，把你刚才的疑问一一提出，这又是一次简化版的用户访谈。这个方法的风险就是用户可能不愿意，或者没有时间接受你的采访。<br/><br/>以上就是常用的一些用户研究方法，有部分例子参考了我有史以来读得最认真的一本书《The User is Always Right》（就像你的女朋友总是对的一样），而&#34;用户总是对的&#34;正是UCD（以用户为中心的设计）所倡导并坚持的。<br/>]]></description>
		</item>
		
			<item>
			<link>http://www.wapchina.net/article.asp?id=8</link>
			<title><![CDATA[贯穿整个产品生命周期的用户研究]]></title>
			<author>fulubin@gmail.com(admin)</author>
			<category><![CDATA[用户体验]]></category>
			<pubDate>Fri,01 Feb 2008 18:35:52 +0800</pubDate>
			<guid>http://www.wapchina.net/default.asp?id=8</guid>
		<description><![CDATA[贯穿整个产品生命周期的用户研究<br/>2007年03月31日 下午 21:36<br/>作者：JunChen | 话题：(0703b)如何了解用户和需求 <br/><br/><br/>首先并不是只有在开发阶段才进行用户研究，用户研究应该贯穿到整个产品生命周期中，这也是我们为什么说可用性测试应该伴随整个产品生命周期。更重要的是，在不同的阶段，用户研究有不同的重点和方法。<br/><br/><br/>定性分析和定量分析<br/>定性分析对于用户研究来说更为重要和有效，成本也较低。定量分析往往需要大量的数据，数据提炼是一个非常痛苦和漫长的过程。但是，定量分析在决策支持上面的作用，定性分析是无法取代的。在各个阶段，这两种分析方法是交叉使用的。另外，纯粹的定量分析在一些问题上无能为力，最直接的比如：用户的需求是什么？<br/><br/>开发期的用户研究<br/>也就是整个产品的最早期。首先需要知道：<br/><br/>* 谁是目标用户？<br/>* 产品将会满足他们哪方面的需求？<br/><br/>然后通过一些用户研究的方法回答以下问题：<br/><br/>* 目标用户的需求应该如何被满足？<br/><br/>这是我所理解的最重要的三点——Who、What、How。当然，在大部分情况下，设计师还应当细化和提炼目标用户来满足设计需要，通过用户访谈、参考文献和主题专家访谈来了解用户的需求，这是比较常用的三种定性分析方法。<br/><br/>另外，在这个阶段用户研究还有一个重要的工作，就是为以后的数据分析做准备（特别是网站）。需要什么数据、什么结果，这应该由设计师、市场告诉数据分析人员。<br/><br/>进入期和成长期的用户研究<br/>产品刚上线，大部分目标用户还不了解产品，除了少数前沿的、时髦的、猎奇的用户外，产品基本上没有人使用。所以进入期更多的是调整营销策略，以避免产品还没到成长期就失败了。这个时候，仍然是定性分析为主，和开发期一样，因为没有真实数据！不过放心，好的产品进入期非常的短。<br/><br/>成长期的用户研究非常重要。这个时候产品使用（购买）人数高速上涨，整个产品团队需要保证两点：<br/><br/>* 保证和提高质量<br/>* 维持高的增长率<br/><br/>这个阶段以定量分析为主。保证增长，可以对人群进行细分，然后采用一些定向的数据挖掘方法（分类、估计），往往比较高效和准确。细分人群之后，可以通过定性分析的方法获得用户对产品使用的一些反馈，从而保证产品的质量、提高竞争力。<br/><br/>比如你的用户表里面记录了用户登录的 IP 和时间，再通过访问日志进行交叉分析，马上就可以知道用户都在干什么。而更好的解决方案是根据数据挖掘的风险函数（比如浴缸型风险），重点跟踪那些流失可能性非常大的用户，分析是否产品哪方面设计的问题导致用户受到挫折？比如用户以为注册成功后就离开了，下次过来发现其实没有注册，挫折一下。<br/><br/>成熟期的用户研究<br/>成熟期看上去只是增长的不是那么快的成长期。不过在这个阶段产品已经成型，成为公司的利润来源，或者流量稳定。这个时候，用户流失会变得更明显，幸运的是，数据挖掘可以告诉你哪些用户可能会在明天离开。针对这些定量分析的结果，再通过定性分析方法，可以准确的得到为什么。<br/><br/>在这个阶段，产品必须通过不断创新来保证竞争力，延长成熟期的时间。所以在这里，再次需要定性分析来发挥威力。发挥什么威力？如下：<br/><br/>* 根据用户需求，增加新的特性，重新进入成长期<br/>* 发现新的用户群，开辟新的市场<br/><br/>比如针对用户的一些需求，Sony 不断升级 PSP 固件，增加新的特性。<br/><br/>衰退期的用户研究<br/>如果成熟期无法顺利延长或者不能再次进入成长期，那么产品会逐渐消亡。如果是网站的话，具体表现为：每天新用户数下降、老用户流失率增大。<br/><br/>战略上可能会选择淘汰这个产品，或者调整产品以适应其他用户群。如果是后者，那么又回到了&#34;开发期&#34;。<br/><br/>其他<br/>用户研究总脱离不了定性分析和定量分析，如何合理运用是关键。比如通过定性分析可以很好的区分关联规则（Association Rule）中的可操作规则（Actionable Rule）、平凡规则（Trivial Rule）和费解的规则（Inexplicable Rule）。在这点上，定性分析优势尽现。<br/><br/>]]></description>
		</item>
		
			<item>
			<link>http://www.wapchina.net/article.asp?id=7</link>
			<title><![CDATA[隐式挖掘网站用户行为]]></title>
			<author>fulubin@gmail.com(admin)</author>
			<category><![CDATA[用户体验]]></category>
			<pubDate>Fri,01 Feb 2008 18:35:10 +0800</pubDate>
			<guid>http://www.wapchina.net/default.asp?id=7</guid>
		<description><![CDATA[隐式挖掘网站用户行为<br/>作者：千鸟 | 话题：(0703b)如何了解用户和需求 <br/><br/>如何了解用户需求？根据用户是否主动参与分为显式与隐式两种挖掘模式，因为显式的动静比较大，有很大局限性，所以为了保证结果准确性以及提高用户接受度，一般都采用隐式。<br/><br/>用户的日常交互行为会产生四类关键数据：鼠标移动轨迹、链接点击分布、页面浏览流、页面停留时间。通过用户的行为能反映用户的观点，同时利用访问的网页次序可以找出网页之间的隐性关系。<br/><br/><br/>收集数据<br/><br/>Web服务器的日志（用户会话记录） <br/>Web trends或类似的第三方共享软件（客户端分析，流量分析，可用性分析） <br/>自己开发的第三方软件/插件（需求自定义） <br/>大型网站通常会把以上三种方法组合应用，大致原理就是给进入网站的用户赋予身份识别，每次产生交互动作就向服务器发回请求，通过时间和页面判断连接各个请求点并且记录下来。（算法不讨论）<br/><br/>过滤数据<br/><br/>明确目标，定义核心数据。 <br/>界定用户行为，利用多数人的行为来消除个人行为的主观性。 <br/>对用户进行归类，确定数据类别。 <br/>大型网站每天所产生的数据量是惊人的，所以常规需求一般都是定时或定量的分析。另外，额外的数据处理会减慢网站的速度，搜集的数据越多，潜在的负面影响越大。<br/><br/>习惯分析<br/><br/>对用户浏览过的页面进行内容分析，根据信息主题对页面进行聚类。 <br/>聚类过程中除了考虑页面内容相近程度，还应该考虑页面路径。 <br/>把用户浏览行为对其兴趣的作用列入聚类结果，得到综合评估模型。 <br/>用户兴趣分偶然和稳定两种情况，其中偶然可以认为是随机变化的，稳定的挖掘又有基于内容和行为两种方式，在内容上表现有重复度、相似度等，在行为上表现有停留时长、点此次数、拉动滚动条次数等。<br/><br/>实际案例<br/><br/>类似系统、浏览器、分辨率的客户端分析，常见而且简单，略过。<br/><br/>关于鼠标轨迹、点击分布的可用性例子：<br/><br/>跟踪用户在进行检索时的鼠标移动轨迹，可以获取用户操作的先后顺序、热点功能、动作曲线等一手数据，这些都是改善或简化表单的重要参考。 <br/>在重要的页面进行详细的点击分布监控统计，主要检查信息呈现的易用性，看看有没有偏离设计初衷，经常更新，找到规律。 <br/>处理特定用户行为、用户群、用户来路的任务流例子：<br/><br/>监控分布式注册流程，能够看到有多少用户填了表单、填完了表单，或者在某个步骤有异常流失。 <br/>监控不同模块入口过来的注册用户，能够统计出各模块导入的有效注册量、百分比、成功率，以便合理调配资源。 <br/>监控投放广告过来的注册量、注册成功率、转换付费用户成功率，以便明确广告的投入产出比。 <br/>监控用户的纵深浏览行为，是测试导航可用性很好的办法，也就是说用户会不会在你的网站内迷路？ <br/>结束<br/><br/>再次强调，这里的讨论仅限于后期研究的隐式挖掘，就是不去惊动用户，不让用户察觉的方法，完全通过技术手段拿到我们想知道的数据，再通过理论分析来改进产品。<br/><br/>之前在某上市公司全程参与了类似系统的开发，最艰难的部分还是在如何获取数据的基础建设阶段，但终归是一劳永逸的事情，对以后的发展有益无害。<br/><br/>转载请注明出自UCDChina.com，谢谢。<br/>]]></description>
		</item>
		
</channel>
</rss>
