<?xml version="1.0" encoding="UTF-8"?>
  <feed xmlns="http://www.w3.org/2005/Atom">
  <title type="html"><![CDATA[大连网页设计,大连网站建设-柠檬设计|博客]]></title>
  <subtitle type="html"><![CDATA[]]></subtitle>
  <id>http://www.dlweb.cn/blog/</id>
  <link rel="alternate" type="text/html" href="http://www.dlweb.cn/blog/" /> 
  <link rel="self" type="application/atom+xml" href="http://www.dlweb.cn/blog/atom.asp" /> 
  <generator uri="http://www.pjhome.net/" version="2.8">PJBlog3</generator> 
  <updated>2012-01-09T10:01:37+08:00</updated>

  <entry>
	  <title type="html"><![CDATA[用户界面设计中“状态”和“动作”的表达]]></title>
	  <author>
		 <name>lemon</name>
		 <uri>http://www.dlweb.cn/blog/</uri>
		 <email>lemon@dlweb.cn</email>
	  </author>
	  <category term="" scheme="http://www.dlweb.cn/blog/default.asp?cateID=10" label="技术笔记" /> 
	  <updated>2012-01-09T10:01:37+08:00</updated>
	  <published>2012-01-09T10:01:37+08:00</published>
		  <summary type="html"><![CDATA[<p><strong>一、问题引发思考</strong></p>
<p><span>前阵子与同事探讨一个小需求时又遇到了按钮表示&ldquo;动作&rdquo;和表示&ldquo;状态&rdquo;间矛盾问题。想想这个问题多年前已经开始讨论了，所以在此整理一下思路，与大家共享。<br />
</span></p>
<p><img height="210" width="600" alt="taobao1" src="http://www.aliued.cn/wp-content/uploads/2010/11/taobao1.png" class="alignnone size-full wp-image-3242" /></p>
<p><span>怎样能够清晰的表达两者的差异，减少用户的误解呢？我们首先要从&ldquo;动作&rdquo;、&ldquo;状态&rdquo;的定义和两者的关系入手。</span></p>
<p>&nbsp;</p>
<p><strong>二、什么是动作，什么是状态</strong></p>
<p><span><strong>动作</strong>是指具有一定动机和目的并指向一定对象的运动。<br />
</span><strong>状态</strong>指人或事物表现出来的形态。<br />
结合来讲，动作是促使人或事物改变某一状态的运动，而状态是动作造成的结果表现。因此两者经常是紧密关联的，有时甚至是互为条件的。</p>
<p><span>比如&ldquo;操作收音机&rdquo;这件事，我需要扭动旋钮或按键等&ldquo;打开&rdquo;的动作来打开收音机，当动作完成后收音机的状态是&ldquo;打开的&rdquo;。而&ldquo;关闭&rdquo;收音机这个动作的前提，是一个&ldquo;打开的&rdquo;状态的收音机。<br />
</span>&rdquo;听起来好复杂阿！&ldquo;很多人都会这么认为。为什么我们在生活中天天面对类似的事却很少有这样的感觉呢？</p>
<p>&nbsp;</p>
<p><span>下面来看看生活中的例子我们或许就能理解了。</span></p>
<p><strong>三、生活中的例子</strong></p>
<p><span>1、电灯开关</span></p>
<p>&nbsp;</p>
<p><img alt="kaiguan1" src="http://www.aliued.cn/wp-content/uploads/2010/11/kaiguan1.png" class="alignnone size-full wp-image-3243" /></p>
<p><span>「图2」</span></p>
<p><span>单控开关，我们最常见的开关之一，设计极其简单，按下一边是开，另一边是关。至于到底那边是开那边是关，没有几个人会特别关心。因为我尝试两次总会作对操作，几乎没有什么成本。人们不会感觉什么不爽。</span></p>
<p><span>当然，现在还有更好的设计。</span></p>
<p>&nbsp;</p>
<p><img alt="kaiguan2" src="http://www.aliued.cn/wp-content/uploads/2010/11/kaiguan2.png" class="alignnone size-full wp-image-3244" /></p>
<p><span>「图2」</span></p>
<p>&nbsp;</p>
<p><span>2、Ipod HOLD</span></p>
<p>&nbsp;</p>
<p><img alt="hold" src="http://www.aliued.cn/wp-content/uploads/2010/11/hold.png" class="alignnone size-full wp-image-3245" /></p>
<p><span>「图3」</span></p>
<p><span>苹果的Ipod播放器的按键锁定功能&ldquo;HOLD&rdquo;。当开关拨动到&ldquo;HOLD&rdquo;字样一边时，左侧便会露出红色。而拨动到另一边是没有颜色的。巧妙的运用了色彩对人们心里特征的影响区分出了hold的状态。</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span>3、显示器</span></p>
<p>&nbsp;</p>
<p><img alt="kaiguan3" src="http://www.aliued.cn/wp-content/uploads/2010/11/kaiguan3.png" class="alignnone size-full wp-image-3246" /></p>
<p><span>「图4」</span></p>
<p><span>显示器电源开关，又一个&ldquo;动作&rdquo;和&ldquo;状态&rdquo;结合的应用。使用按钮突出的形态，和开关的图形表现来表示可执行的动作（这里按下去是用来开关的），使用背景灯的暗与亮来表示开关状态（灯亮表示现在是开的状态）。</span></p>
<p><span>类似的应用非常多，我们可以看到其中具有的特点是：1、可以触摸、按动（拨动）的按钮 2、色彩的区分 3、有的还有明显的位置差异以及标识。</span></p>
<p>&nbsp;</p>
<p><strong>四、软件以及网站中的例子</strong></p>
<p><span>软件或网站界面显然不具备可触摸的特点，不过我们的设计师也尽量会模拟出类似现实中物品的可以操作的形状和质感。</span></p>
<p>&nbsp;</p>
<p><img alt="play1" src="http://www.aliued.cn/wp-content/uploads/2010/11/play1.png" class="alignnone size-full wp-image-3247" /></p>
<p><span>「图5」</span></p>
<p><span>播放器常用的UI。点击中间的&ldquo;播放&rdquo;与&ldquo;暂停&rdquo;键即可切换操作。可以看出，这里忽略了状态的表现，我无法直观的看到现在是播放还是暂停的状态。原因很简单，就像开关电灯一样，影片的打开与关闭是可以直接感知到的，不需要专门的状态提示。</span></p>
<p>&nbsp;</p>
<p><img alt="taobao2" src="http://www.aliued.cn/wp-content/uploads/2010/11/taobao2.png" class="alignnone size-full wp-image-3248" /></p>
<p><span>「图6」</span></p>
<p><span>再来看列表的视图切换。图上箭头所示&ldquo;切换到大图&rdquo;功能也是此类应用，忽略了状态的表现。因为&ldquo;切换到大图&rdquo;动作执行后，界面的状态会明显的改变（大图模式），不需要专门的状态来标识。</span></p>
<p>&nbsp;</p>
<p><span>再看另一种情况</span></p>
<p>&nbsp;</p>
<p><img alt="play" src="http://www.aliued.cn/wp-content/uploads/2010/11/play.png" class="alignnone size-full wp-image-3249" /></p>
<p><span>「图7」</span></p>
<p><span>音乐播放器中的随机播放。因为&ldquo;随机&rdquo;与&ldquo;按顺序&rdquo;播放并不容易直观察觉，因此状态需要明确标识。而动作本身由于并不是核心功能被弱化了，仅仅依赖界面功能区块划分来表示此处的可操作性。</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img alt="play3" src="http://www.aliued.cn/wp-content/uploads/2010/11/play3.png" class="alignnone size-full wp-image-3250" /></p>
<p><span>「图8」</span></p>
<p><span>还是音乐播放器，这次不同的是线性的状态表示。音量的大小并不只是&ldquo;开、关&rdquo;两个状态那么简单，而是由小到大线性变化的。上面那个UI 通过左右两个喇叭的形状很好的表达了音量大小的两端，中间的圆钮既是动作的操纵杆又是音量大小的刻度标识。因为它和左侧很好的连接在一起形成水槽效果，填 满部分的长短再一次反映了音量的大小，非常巧妙。而下面那个UI只在左侧放了音量大小标识，虽然不同因量大小时左侧图标也会相应改变，但相比之下初次使用 会难理解很多。</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img alt="list" src="http://www.aliued.cn/wp-content/uploads/2010/11/list.png" class="alignnone size-full wp-image-3251" /></p>
<p><span>「图9」</span></p>
<p><span>上面是某帐户管理的UI，将状态和操作（动作）明显的分两列标识，虽然显得有些啰唆，但也清楚的表达出了应有的含义。</span></p>
<p>&nbsp;</p>
<p><span>最后我们来看一个手机界面的应用。</span></p>
<p>&nbsp;</p>
<p><img alt="iphone" src="http://www.aliued.cn/wp-content/uploads/2010/11/iphone.png" class="alignnone size-full wp-image-3252" /></p>
<p><span>「图10」</span></p>
<p><span>仿照物理拨动开关的质感与色彩表达，很好的&rdquo;动作&ldquo;与&rdquo;状态&ldquo;结合的例子。这样的设计你还会犯错么？</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>五、小结</strong></p>
<p><span>前面作了很多应用的举例，那么到底怎样才能做好&rdquo;动作&ldquo;与&rdquo;状态&ldquo;结合的设计呢？</span></p>
<p><span>1、分离状态与动作的表示（如图9）。最直接，产生歧义的可能最小，但可能会占用大量空间，以及造成信息冗余。<br />
</span>2、忽略状态，突出动作（如图6）。当状态无需标识也能直观识别时适用。<br />
3、忽略动作，突出状态（如图7）。当动作操作已经被划分指定区域，可以预期其可操作性时适用。<br />
4、具象与仿生（如图10）。当与现实物品建立感官联系时，人们的学习成本会大大降低。此类运用不好定义其适用范围，留给大家探讨吧。</p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.dlweb.cn/blog/article/study/381.html" /> 
	  <id>http://www.dlweb.cn/blog/default.asp?id=381</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[如何实现网页设计的价值]]></title>
	  <author>
		 <name>lemon</name>
		 <uri>http://www.dlweb.cn/blog/</uri>
		 <email>lemon@dlweb.cn</email>
	  </author>
	  <category term="" scheme="http://www.dlweb.cn/blog/default.asp?cateID=10" label="技术笔记" /> 
	  <updated>2011-12-09T09:07:36+08:00</updated>
	  <published>2011-12-09T09:07:36+08:00</published>
		  <summary type="html"><![CDATA[<img src="http://www.dlweb.cn/blog/attachments/month_1112/r20111299433.jpg" border="0" alt=""/><br/><br/><br/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.dlweb.cn/blog/article/study/380.html" /> 
	  <id>http://www.dlweb.cn/blog/default.asp?id=380</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[盘起工业（punch）]]></title>
	  <author>
		 <name>lemon</name>
		 <uri>http://www.dlweb.cn/blog/</uri>
		 <email>lemon@dlweb.cn</email>
	  </author>
	  <category term="" scheme="http://www.dlweb.cn/blog/default.asp?cateID=6" label="我的设计" /> 
	  <updated>2011-12-07T11:59:58+08:00</updated>
	  <published>2011-12-07T11:59:58+08:00</published>
		  <summary type="html"><![CDATA[　　盘起工业（大连）有限公司是日本盘起工业株式会社，在中国大连开发区投资设立的外商独资企业，是国内最大的模具标准件生产厂家，产品应用于精密的塑料模具、冲压模具、半导体模具、压铸模具以及其他精密工装夹具等诸多领域。产品主要销往日本、欧美和中国沿海等地，因其精度高、质量好、品种多、规格全、交货期短等特点，已赢得了国内外用户的广泛赞誉和信任。<br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/62011127115919.jpg" border="0" alt=""/><br/><br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/62011127115933.jpg" border="0" alt=""/><br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/52011127115938.jpg" border="0" alt=""/><br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/j2011127115946.jpg" border="0" alt=""/><br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/n2011127115956.jpg" border="0" alt=""/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.dlweb.cn/blog/article/work/punch.html" /> 
	  <id>http://www.dlweb.cn/blog/default.asp?id=379</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[雪龙集团]]></title>
	  <author>
		 <name>lemon</name>
		 <uri>http://www.dlweb.cn/blog/</uri>
		 <email>lemon@dlweb.cn</email>
	  </author>
	  <category term="" scheme="http://www.dlweb.cn/blog/default.asp?cateID=6" label="我的设计" /> 
	  <updated>2011-12-07T11:57:32+08:00</updated>
	  <published>2011-12-07T11:57:32+08:00</published>
		  <summary type="html"><![CDATA[　　大连雪龙产业集团有限公司成立于2002年7月， 按照产业化、生态化要求，雪龙集团已形成了独具特色的以肉牛繁育、养殖、饲料加工、粪肥处理、屠宰、销售为一条龙的产业化经营格局，并且成为农业产业化龙头企业、高新技术企业。雪龙牧场目前雪龙黑牛存栏规模已达到10000头以上，成为我国高档肉牛养殖规模最大、现代化程度最高、科技含量亦最高的集约化养殖基地。国家发改委批准立项的&#34;雪龙肉牛生物育种高技术产业化专项&#34;的正式启动，将促使我国早日培育出拥有自主知识产权的高档肉牛品种。<br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/52011127115633.jpg" border="0" alt=""/><br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/l2011127115654.jpg" border="0" alt=""/><br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/p201112711575.jpg" border="0" alt=""/><br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/x2011127115718.jpg" border="0" alt=""/><br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/02011127115726.jpg" border="0" alt=""/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.dlweb.cn/blog/article/work/xuelongniurou.html" /> 
	  <id>http://www.dlweb.cn/blog/default.asp?id=378</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[洪家鸡蛋]]></title>
	  <author>
		 <name>lemon</name>
		 <uri>http://www.dlweb.cn/blog/</uri>
		 <email>lemon@dlweb.cn</email>
	  </author>
	  <category term="" scheme="http://www.dlweb.cn/blog/default.asp?cateID=6" label="我的设计" /> 
	  <updated>2011-12-07T11:52:18+08:00</updated>
	  <published>2011-12-07T11:52:18+08:00</published>
		  <summary type="html"><![CDATA[　　洪家鸡蛋有员工480人（其中销售人员212人），实行饲料加工，蛋鸡饲养，产品销售三位一体的经营模式。存栏蛋鸡60万只，年产鲜蛋9600吨，产品销售额1.3亿元。是国家“无公害鸡蛋”、“绿色鸡蛋”、“供港鲜蛋”生产基地和“全国食品安全示范单位”，省级农业产业化重点龙头企业。 <br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/a2011127115153.jpg" border="0" alt=""/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.dlweb.cn/blog/article/work/hongjiajidan.html" /> 
	  <id>http://www.dlweb.cn/blog/default.asp?id=377</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[泡崖乡人民政府]]></title>
	  <author>
		 <name>lemon</name>
		 <uri>http://www.dlweb.cn/blog/</uri>
		 <email>lemon@dlweb.cn</email>
	  </author>
	  <category term="" scheme="http://www.dlweb.cn/blog/default.asp?cateID=6" label="我的设计" /> 
	  <updated>2011-12-07T11:47:52+08:00</updated>
	  <published>2011-12-07T11:47:52+08:00</published>
		  <summary type="html"><![CDATA[　　泡崖乡位于瓦房店市西南部，东经129°31′，北纬39°30′，东与九龙办事处接壤，南与复州湾镇、炮台镇相连，西与谢屯镇毗邻，北与杨家乡、三台乡相连，总面积151.03平方公里。瓦交公路东西贯境，乡政府驻地距瓦房店市35公里，距沈大高速公路15公里，202国道12公里。全乡总人口数18574人，其中农业人口数15864人，非农业人口数2710人。<br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/v2011127114748.jpg" border="0" alt=""/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.dlweb.cn/blog/article/work/376.html" /> 
	  <id>http://www.dlweb.cn/blog/default.asp?id=376</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[益群海参]]></title>
	  <author>
		 <name>lemon</name>
		 <uri>http://www.dlweb.cn/blog/</uri>
		 <email>lemon@dlweb.cn</email>
	  </author>
	  <category term="" scheme="http://www.dlweb.cn/blog/default.asp?cateID=6" label="我的设计" /> 
	  <updated>2011-12-07T11:45:36+08:00</updated>
	  <published>2011-12-07T11:45:36+08:00</published>
		  <summary type="html"><![CDATA[　　大连益群食品有限公司成立于2001年，是一家集专业绿色海洋生物制品生产营销为一体的诚信企业。注册资金500万元，员工126人。公司先后引进国际领先的生产设备和GMP标准的流水生产线。以大连海域天然野生长海海刺参、鲍鱼为原材料，秉承绿色健康的主导思想，开发系列的海洋生物制品，并获得干渍、盐渍及水产深加工的QS批准资格认证，拥有国家商标。<br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/m2011127114533.jpg" border="0" alt=""/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.dlweb.cn/blog/article/work/yiqunhaishen.html" /> 
	  <id>http://www.dlweb.cn/blog/default.asp?id=375</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[得利电梯]]></title>
	  <author>
		 <name>lemon</name>
		 <uri>http://www.dlweb.cn/blog/</uri>
		 <email>lemon@dlweb.cn</email>
	  </author>
	  <category term="" scheme="http://www.dlweb.cn/blog/default.asp?cateID=6" label="我的设计" /> 
	  <updated>2011-12-07T11:37:29+08:00</updated>
	  <published>2011-12-07T11:37:29+08:00</published>
		  <summary type="html"><![CDATA[　　大连得利电梯制造有限公司是国家建筑部定点生产电梯的专业厂家，产品品种有乘客电梯、住宅电梯、医用电梯、载货电梯、SC系列施工升降机、杂物电梯等。几年来，吸取采用了国内外先进的工艺、技术和先进的质量管理体系。取长补短，形成了自身风格。<br/><br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/p2011127113624.jpg" border="0" alt=""/><br/><br/><img src="http://www.dlweb.cn/blog/attachments/month_1112/82011127113633.jpg" border="0" alt=""/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.dlweb.cn/blog/article/work/delidianti.html" /> 
	  <id>http://www.dlweb.cn/blog/default.asp?id=374</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[Печальный ангел -- 悲伤的天使]]></title>
	  <author>
		 <name>lemon</name>
		 <uri>http://www.dlweb.cn/blog/</uri>
		 <email>lemon@dlweb.cn</email>
	  </author>
	  <category term="" scheme="http://www.dlweb.cn/blog/default.asp?cateID=4" label="聆听音符" /> 
	  <updated>2011-10-19T09:05:26+08:00</updated>
	  <published>2011-10-19T09:05:26+08:00</published>
		  <summary type="html"><![CDATA[<div class="UBBPanel"><div class="UBBTitle"><img src="http://www.dlweb.cn/blog/images/flash.gif" alt="" style="margin:0px 2px -3px 0px" border="0"/>Flash动画</div><div class="UBBContent"><a id="temp48460_href" href="http://www.dlweb.cn/blog/javascript:MediaShow('swf','temp48460','http://player.youku.com/player.php/sid/XMzA5NTIxMjI4/v.swf','480','400')"><img name="temp48460_img" src="http://www.dlweb.cn/blog/images/mm_snd.gif" style="margin:0px 3px -2px 0px" border="0" alt=""/><span id="temp48460_text">在线播放</span></a><div id="temp48460"></div></div></div><br/><br/>　　生活是一种连续的影响，每个小人物都有小人物的伟大故事。从开头的情侣，到美丽的丝带，从清洁老伯到卖气球的小贩，从摩登女郎到路上抢匪，那个失意的女孩和表演的女孩，从微笑到最后定格的鲜花，不得不说MV把曲子表达的淋漓尽致。作者以旁人的角度看生活这场剧，看到形形色色的人过着不同的生活，当我们静下心来注意身边的风景时，也会用不一样的方式表达同样的心情。悲伤来临的时候，我们的内心都住着天使，用最干净的眸子看世界，看待命运。生活仍在继续，我们就应该抱着积极的心态去面对生活。 感谢这个曲子，在我人生最矛盾徘徊的时候，给了我如此多的启示。<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/> 　　腰，弯曲，以90度捡起来<br/> 　　他转过身,绝望而又艳羡<br/> 　　原来，是一位年纪相仿的外婆牵着一条拉布拉多犬<br/> 　　路过的痕迹洒下了温暖的气息<br/> 　　小女孩笑了<br/> 　　旁边大打小小的气球在摇曳<br/> 　　灿烂的几许<br/> 　　而所有的只缩为一个焦点<br/> 　　性感十足的妙曼女郎走过<br/> 　　眼睛齐齐地被她勾了去<br/> 　　她的每一步，都充满了诱惑的气息<br/> 　　然而，偶尔也会有例外的时候<br/> 　　普通的男子，擦肩而过<br/> 　　她笑意的嘴角上扬，更为性感。<br/> 　　西装革履的男子边走边接着电话<br/> 　　他手里黑色的包<br/> 　　吸引了另一男子的注意<br/> 　　悄悄地跟着他<br/> 　　趁他转过身的那一刹，迅速地提起包就跑<br/> 　　他终究还是回过头了<br/> 　　里面是有很重要的文件的，不能随意丢失<br/> 　　急急地挂掉电话，去追]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.dlweb.cn/blog/article/music/371.htm" /> 
	  <id>http://www.dlweb.cn/blog/default.asp?id=371</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[移动设备手势设计]]></title>
	  <author>
		 <name>lemon</name>
		 <uri>http://www.dlweb.cn/blog/</uri>
		 <email>lemon@dlweb.cn</email>
	  </author>
	  <category term="" scheme="http://www.dlweb.cn/blog/default.asp?cateID=10" label="技术笔记" /> 
	  <updated>2011-09-21T12:17:59+08:00</updated>
	  <published>2011-09-21T12:17:59+08:00</published>
		  <summary type="html"><![CDATA[<p>　　移动设备大行其道的今天，手势是一个流行词汇，那手势是什么呢？手，是人类各种创造性活动的天然工具，人们天生就会使用手的动作去表达情感，比如人们会使用握手来表示友好，聋哑人使用一套用手语来代替语言交流，这些都是手势在生活中的应用。可见自古以来手势就是一套特定的语言系统，在人的交流中发挥重要的作用。从交互上看，手势实际上是一种输入模式。我们现在在直观意义上理解的人机交互是指人与机器之间的互动方式，这种互动方式经历了鼠标、物理硬件、屏幕触控、远距离的体感操作的逐步发展的过程。</p>
<p>　　然而交互设计领域，大家普遍探讨的手势概念，是区别于传统的键盘操作和鼠标操作的。后面会着重研究移动设备的手势操作，主要从手势存在的问题、应用场景以及设计时应注意什么说起。</p>
<p><a rel="attachment wp-att-4245" href="http://cdc.tencent.com/?attachment_id=4245"><img class="aligncenter size-full wp-image-4245" border="0" alt="" width="720" height="25" src="http://cdc.tencent.com/wp-content/uploads/2011/09/02.png" /></a><br />
1. 利用鼠标、光标的轨迹模拟手势<br />
&nbsp;</p>
<p>　　网站www.kakarod.com，采用了大量的屏幕模拟手势交互，点击、拖拽等动作，生动活泼让人眼前一亮。</p>
<p>2. 在物理硬件上的手势</p>
<p><a rel="attachment wp-att-4229" href="http://cdc.tencent.com/?attachment_id=4229"><img class="aligncenter size-full wp-image-4229" border="0" alt="" width="720" height="350" src="http://cdc.tencent.com/wp-content/uploads/2011/09/2.png" /></a></p>
<p>　　苹果Magic Mouse鼠标, 。macbook触摸板均支持单指多指滑动等多种手势。</p>
<p>3. 在触摸屏上的手势</p>
<p><a rel="attachment wp-att-4230" href="http://cdc.tencent.com/?attachment_id=4230"><img class="aligncenter size-full wp-image-4230" border="0" alt="" width="720" height="350" src="http://cdc.tencent.com/wp-content/uploads/2011/09/3.png" /></a></p>
<p>　　主要有长按、轻触、滑动、拖动、旋转、缩放、摇动这八种手势。</p>
<p>4. 远距离体感</p>
<p><a rel="attachment wp-att-4231" href="http://cdc.tencent.com/?attachment_id=4231"><img class="aligncenter size-full wp-image-4231" border="0" alt="" width="720" height="350" src="http://cdc.tencent.com/wp-content/uploads/2011/09/4.png" /></a></p>
<p>　　通过摄像头，传感器等捕捉手甚至整个身体的姿势，来进行控制。</p>
<p>5. 未来的手势</p>
<p><a rel="attachment wp-att-4232" href="http://cdc.tencent.com/?attachment_id=4232"><img class="aligncenter size-full wp-image-4232" border="0" alt="" width="720" height="350" src="http://cdc.tencent.com/wp-content/uploads/2011/09/5.png" /></a></p>
<p>　　利用全息投影以及传感器，在空间或者投影上直接操作，这个已经应用在某些领域，相信不久的将来一定会广泛服务于我们的生活。PS：在苹果最新申请的专利中就提到了&ldquo;投影手势操作&rdquo;的技术，乔帮主这次又会带来什么革命性的产品就让我们拭目以待吧。</p>
<p><a rel="attachment wp-att-4233" href="http://cdc.tencent.com/?attachment_id=4233"><img class="aligncenter size-full wp-image-4233" border="0" alt="" width="720" height="345" src="http://cdc.tencent.com/wp-content/uploads/2011/09/6.png" /></a></p>
<p>　　当然在生活中也还有其他的手势操作，这里就不再赘述。本文主要研究的是目前爆发式增长的移动设备上的触摸屏手势操作，以ios，android系统为主。触屏上的手势是指，将一系列多点触摸事件综合为一个单独事件。分析触摸屏上的手势使用现状，发现相对于传统鼠标键盘，手势交互操作一些明显的特点。下图是从时间和空间两个维度总结出的手势概览。为读者在手势设计时提供参考。</p>
<p><a rel="attachment wp-att-4234" href="http://cdc.tencent.com/?attachment_id=4234"><img class="aligncenter size-full wp-image-4234" border="0" alt="" width="720" height="458" src="http://cdc.tencent.com/wp-content/uploads/2011/09/7.png" /></a></p>
<p>&nbsp;</p>
<p><a rel="attachment wp-att-4248" href="http://cdc.tencent.com/?attachment_id=4248"><img class="aligncenter size-full wp-image-4248" border="0" alt="" width="720" height="25" src="http://cdc.tencent.com/wp-content/uploads/2011/09/031.png" /></a><br />
　　可用性研究的专家Don Norma在最新一期的《Interaction》杂志中也对手势交互界面进行了质疑和抨击，认为新的手势交互界面有很多地方没有遵循已经建立好的交互设计原则，使得经过良好测试和业内已被理解的交互设计标准正在被推翻、忽略和违背。　</p>
<p>　　笔者通过分析现有的app 应用，以及多产品的设计经验，发现此质疑不无道理，主要有以下几个问题：</p>
<p>1.精确性降低<br />
　　以 ios为例，相比光标1像素的精度，手势的精确性要低很多。适合手指点击区域需要做到44*44px（iphone4以下设备），配合手势的轻重有0~20px的偏差，所以触屏界面需要使用更大尺寸的控件响应面积。iPhone 3GS、iPad和iPhone4屏幕分辨率密度分别为163 ppi 、132 ppi和326ppi，可以看到3GS和iPad的控件响应像素接近，单边应达到44px的标准，而iPhone4则需要再扩大几倍。</p>
<p>2.缺乏可见性和一致性<br />
　　以iPad Pages这个App为例，比如文稿中有2个对象，你想要使它大小一样，有以下两个方法：你可以通过双指拖拽利用边缘参考线让它们大小一样，当然这种放大缩小的方式在很多App中都很常见，因此很容易想到。另外你也可以这样做，用一只手指拖拽其中一个对象的同时，用另一直手指触碰你想要与之相同的对象，当出现符合大小提示时先抬起第一个手指再抬起第二个手指，那么这两个对象的尺寸就完全一样了（这两种方式在app中没有任何帮助和说明）。那么很显然，没有人会轻易发现第二种手势方式。即使发现了也不会很快知道如何使用。再比如android的长按操作也是如此。</p>
<p><a rel="attachment wp-att-4235" href="http://cdc.tencent.com/?attachment_id=4235"><img class="aligncenter size-full wp-image-4235" border="0" alt="" width="720" height="543" src="http://cdc.tencent.com/wp-content/uploads/2011/09/8.png" /></a><br />
　　造成这个问题的重要原因是手势界面通常没有代表动作的可视元素，手势即动作。若是通用自然的手势就没问题，若是罕见的组合手势那用户就很难发现它，并有可能带来可用性问题。</p>
<p>3.增加操作成本以及误操作<br />
　　<span style="color: #00ccff">在位移上</span><br />
　　手势操作相比于呆板的鼠标点击的确生动有趣了许多，但一些操作，比如放大缩小和下拉却增加了操作成本，在鼠标上滚轮就能完成的事，触屏上就需要手指上下拖动许多下。<br />
　<span style="color: #00ccff">　</span><span style="color: #00ccff">在力度上</span><br />
　　手势操作没有鼠标按下的物理反馈，因为力度也难以掌握，有时糟糕的设计会让用户误以为是自己操作的问题，从而反复尝试。<br />
　　<span style="color: #00ccff">在灵敏度上</span><br />
　　ios的触屏都很灵敏，轻触和长按的操作界限很模糊，并且除了固定的Button，很多操作的响应区都很大，不受Button大小限制。因此常常会不小心碰到使某个操作响应，例如在通话记录播出一个号码以及备忘录的右滑的删除。</p>
<p>4.受限于物理因素<br />
　　<span style="color: #00ccff">物理按键</span><br />
　　带来真实的触感和一定的操作中断感，后期的手机逐渐弱化物理按键，手势与屏幕结合的更紧凑。Android用硬件按钮触发菜单，意味着你无法预知什么程序以及在什么情况下会有菜单选项。因为硬件按钮始终在那里，无论程序是否需要它。</p>
<p><a rel="attachment wp-att-4236" href="http://cdc.tencent.com/?attachment_id=4236"><img class="aligncenter size-full wp-image-4236" border="0" alt="" width="720" height="350" src="http://cdc.tencent.com/wp-content/uploads/2011/09/9.png" /></a></p>
<p><span style="color: #808080">上图从左往右依次是Plam pre、palm pre2、palm pre3，返回按钮与手机屏幕融合得越来越紧凑</span><br />
　<span style="color: #00ccff">　横竖方向</span><br />
　　直接受限于物理按键，android设备的物理按键位置不统一，横竖屏切换时不便于快速辨认，手势的连贯操作会受到比较大的影响。如果app支持水平方向，考虑将返回按钮和常用的菜单直接显示在软件界面上。因此app应考虑直接提供&ldquo;返回&rdquo;按钮。</p>
<p><a rel="attachment wp-att-4237" href="http://cdc.tencent.com/?attachment_id=4237"><img class="aligncenter size-full wp-image-4237" border="0" alt="" width="720" height="350" src="http://cdc.tencent.com/wp-content/uploads/2011/09/10.png" /></a><br />
&nbsp;<br />
　　<span style="color: #00ccff">设备尺寸</span><br />
　　大屏幕的Pad支持更多的多指复杂手势，手机大多单指操作。<br />
　　<span style="color: #00ccff">控件形态</span><br />
　　按钮的大小控制（不同分辨率下大小的转换）、拖动时的反馈提示、滑动选择与点击的转化。</p>
<p><a rel="attachment wp-att-4238" href="http://cdc.tencent.com/?attachment_id=4238"><img class="aligncenter size-full wp-image-4238" border="0" alt="" width="720" height="467" src="http://cdc.tencent.com/wp-content/uploads/2011/09/11.png" /></a></p>
<p><a rel="attachment wp-att-4239" href="http://cdc.tencent.com/?attachment_id=4239"><img class="aligncenter size-full wp-image-4239" border="0" alt="" width="720" height="477" src="http://cdc.tencent.com/wp-content/uploads/2011/09/12.png" /></a></p>
<p><a rel="attachment wp-att-4241" href="http://cdc.tencent.com/?attachment_id=4241"><img class="aligncenter size-full wp-image-4241" border="0" alt="" width="720" height="464" src="http://cdc.tencent.com/wp-content/uploads/2011/09/131.png" /></a></p>
<p>&nbsp;</p>
<p><a rel="attachment wp-att-4249" href="http://cdc.tencent.com/?attachment_id=4249"><img class="aligncenter size-full wp-image-4249" border="0" alt="" width="720" height="25" src="http://cdc.tencent.com/wp-content/uploads/2011/09/04.png" /></a><br />
　　基于上述可用性问题，总结出手势操作设计时应该注意以下几点：<br />
1.操作引导<br />
　　这里可以是详细的帮助界面也可以是隐喻图形化的引导（隐喻要符合用户的心智模型），例如分页的圆点标识，或者切换页面露出一部分内容，可长按的系统icon，翻起的页脚升，甚至动画等等。这里的提示程度自己拿捏，效率型应用，尽量做到清晰可见，即看即点。沉浸型应用可以适当预留探索的空间，让用户自己去发现，带来预期之外的惊喜。比如QQLiveHD首页拉绳的晃动。但是，要注意的是隐藏手势和快捷手势不能影响主操作流程，可以作为辅助手势来使用。</p>
<p><a rel="attachment wp-att-4242" href="http://cdc.tencent.com/?attachment_id=4242"><img class="aligncenter size-full wp-image-4242" border="0" alt="" width="720" height="350" src="http://cdc.tencent.com/wp-content/uploads/2011/09/14.png" /></a></p>
<p>2.操作反馈<br />
　　手势操作快速轻便，但没有鼠标按下时didadida声的安全感，也十分受限于设备屏幕的灵敏度，所以操作反馈的作用至关重要。例如icon按下时的响应，这里除了没有mouse over的效果，其他三态和PC端是一致的，缺一不可。除此之外还要考虑的是操作区太小被手指遮挡住的情况，反馈一定要明显，并呈现在可视范围内。比如QQ通讯录的姓名检索操作。除了视觉反馈声音也是一种有效的反馈方式，比如iPhone发送SMS发送成功的声音。新浪微博的feed拉取，tweetbot等，都巧妙的运用了声音反馈。</p>
<p><a rel="attachment wp-att-4243" href="http://cdc.tencent.com/?attachment_id=4243"><img class="aligncenter size-full wp-image-4243" border="0" alt="" width="720" height="350" src="http://cdc.tencent.com/wp-content/uploads/2011/09/15.png" /></a></p>
<p>3.误操作<br />
　　手势操作相比鼠标更灵活，如果你的程序非常复杂，承载的信息很多，大部分区域都是响应区，那么发生误操作的几率也会大大增加。因此要让用户可以及时撤销操作，时刻知道现在发生了什么，而不是仅仅当发生后给出一个警告。常用于较重要或隐晦的手势，例如删除，一键清除，长按等等，二次确认操作就显得至关重要。</p>
<p>&nbsp;</p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.dlweb.cn/blog/article/study/369.htm" /> 
	  <id>http://www.dlweb.cn/blog/default.asp?id=369</id>
  </entry>	
		
</feed>

