<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom"><title type="text">博客园_stone .!</title><subtitle type="text">&#xE; good good study...</subtitle><id>http://feed.cnblogs.com/blog/u/37738/rss</id><updated>2012-05-28T12:29:13Z</updated><author><name>craig</name><uri>http://www.cnblogs.com/craig/</uri></author><generator>feed.cnblogs.com</generator><link rel="alternate" type="text/html" href="http://www.cnblogs.com/craig/"/><link rel="self" type="application/atom+xml" href="http://feed.cnblogs.com/blog/u/37738/rss"/><entry><id>http://www.cnblogs.com/craig/archive/2012/05/28/2522407.html</id><title type="text">comScore:2012年移动未来聚焦报告</title><summary type="text">comScore发布了2012年移动未来聚焦报告，该年度报告审视了移动和联网设备产业，覆盖comScore监测的几个移动市场，探视了2011年推动智能手机普及、移动媒体使用的几大领域如社会化网络、零售、移动生态变迁和多终端数字媒体消费生态。报告主要分析了美国、法国、德国、意大利、西班牙、英国、日本和加拿大市场comScore的移动高级副总裁Mark Donovan指出：2011年是移动产业突破式发展的一年，智能手机进入主流，平板电脑兴起成为第四屏，用户不断将移动行为融入他们的生活形态中。随着产业继续演进，以及越来越多的用户通过多终端和平台消费数字内容，我们预计移动和联网设备格局在2012年将继</summary><published>2012-05-28T12:29:00Z</published><updated>2012-05-28T12:29:00Z</updated><author><name>craig</name><uri>http://www.cnblogs.com/craig/</uri></author><link rel="alternate" href="http://www.cnblogs.com/craig/archive/2012/05/28/2522407.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/craig/archive/2012/05/28/2522407.html"/><content type="html">&lt;p&gt;&lt;span class="wp_keywordlink" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="comScore,comScore中文" href="http://www.199it.com/archives/tag/comscore" target="_blank"&gt;comScore&lt;/a&gt;&lt;/span&gt;发布了2012年移动未来聚焦报告，该年度报告审视了移动和联网设备产业，覆盖&lt;span class="wp_keywordlink" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="comScore,comScore中文" href="http://www.199it.com/archives/tag/comscore" target="_blank"&gt;comScore&lt;/a&gt;&lt;/span&gt;监测的几个移动市场，探视了2011年推动&lt;span class="wp_keywordlink_affiliate" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="查看 智能手机 中的全部文章" href="http://www.199it.com/archives/tag/smartphones" target="_blank"&gt;智能手机&lt;/a&gt;&lt;/span&gt;普及、&lt;span class="wp_keywordlink_affiliate" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="查看 移动媒体 中的全部文章" href="http://www.199it.com/archives/tag/%e7%a7%bb%e5%8a%a8%e5%aa%92%e4%bd%93" target="_blank"&gt;移动媒体&lt;/a&gt;&lt;/span&gt;使用的几大领域如社会化网络、零售、移动生态变迁和多终端数字媒体消费生态。报告主要分析了美国、法国、德国、意大利、西班牙、英国、日本和加拿大市场&lt;/p&gt;&lt;p&gt;&lt;span class="wp_keywordlink" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="comScore,comScore中文" href="http://www.199it.com/archives/tag/comscore" target="_blank"&gt;comScore&lt;/a&gt;&lt;/span&gt;的移动高级副总裁Mark Donovan指出：2011年是移动产业突破式发展的一年，&lt;span class="wp_keywordlink_affiliate" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="查看 智能手机 中的全部文章" href="http://www.199it.com/archives/tag/smartphones" target="_blank"&gt;智能手机&lt;/a&gt;&lt;/span&gt;进入主流，&lt;span class="wp_keywordlink_affiliate" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="查看 平板电脑 中的全部文章" href="http://www.199it.com/archives/tag/panel-computer" target="_blank"&gt;平板电脑&lt;/a&gt;&lt;/span&gt;兴起成为第四屏，用户不断将移动行为融入他们的生活形态中。随着产业继续演进，以及越来越多的用户通过多终端和平台消费数字内容，我们预计移动和联网设备格局在2012年将继续重构深化。随着移动渠道带给用户的个性、社交和无处不在的体验，广告主和发布商面临着更好的定向受众的机遇。&lt;/p&gt;&lt;p&gt;下面是该报告的关键发现：&lt;/p&gt;&lt;ul style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 15px 0px 20px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; list-style-type: none; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;li style="border-width: 0px; margin: 0px 0px 0px 30px; padding: 0px; font-size: 14px; vertical-align: baseline; list-style-type: disc; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; color: #666666; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;span class="wp_keywordlink_affiliate" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="查看 智能手机 中的全部文章" href="http://www.199it.com/archives/tag/smartphones" target="_blank"&gt;智能手机&lt;/a&gt;&lt;/span&gt;在早期大众中获得采用，促进&lt;span class="wp_keywordlink_affiliate" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="查看 移动媒体 中的全部文章" href="http://www.199it.com/archives/tag/%e7%a7%bb%e5%8a%a8%e5%aa%92%e4%bd%93" target="_blank"&gt;移动媒体&lt;/a&gt;&lt;/span&gt;消费&lt;/strong&gt; 将近42%的美国手机用户现在拥有智能手机，44%的欧洲5国（法德意西英）手机用户拥有智能手机；&lt;span class="wp_keywordlink_affiliate" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="查看 移动媒体 中的全部文章" href="http://www.199it.com/archives/tag/%e7%a7%bb%e5%8a%a8%e5%aa%92%e4%bd%93" target="_blank"&gt;移动媒体&lt;/a&gt;&lt;/span&gt;使用-如浏览移动网页，使用应用程序或下载内容因此获得高速增长，在多数市场获得超过50%的使用，这也得益于高速网络和公共wifi网络的普及&lt;/li&gt;&lt;/ul&gt;&lt;div style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 0px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" href="http://www.199it.com/wp-content/uploads/2012/02/%E6%99%BA%E8%83%BD%E6%89%8B%E6%9C%BA%E6%B8%97%E9%80%8F%E7%8E%87.png"&gt;&lt;img class="aligncenter size-full wp-image-25100" style="border-width: 0px; margin: 0px auto; padding: 0px; height: auto; clear: both; font-size: 14px; vertical-align: baseline; display: block; max-width: 640px; outline-width: 0px; background-color: transparent; border-image: initial;" title="智能手机渗透率" src="http://www.199it.com/wp-content/uploads/2012/02/%E6%99%BA%E8%83%BD%E6%89%8B%E6%9C%BA%E6%B8%97%E9%80%8F%E7%8E%87.png" alt="" width="645" height="305" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;ul style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 15px 0px 20px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; list-style-type: none; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;li style="border-width: 0px; margin: 0px 0px 0px 30px; padding: 0px; font-size: 14px; vertical-align: baseline; list-style-type: disc; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; color: #666666; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;智能手机平台大战加剧，&lt;span class="wp_keywordlink" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="Google Android,Android手机系统" href="http://www.199it.com/archives/tag/android" target="_blank"&gt;Android&lt;/a&gt;&lt;/span&gt;和苹果在多数市场占主导地位&lt;/strong&gt; 2011年Google的&lt;span class="wp_keywordlink" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="Google Android,Android手机系统" href="http://www.199it.com/archives/tag/android" target="_blank"&gt;Android&lt;/a&gt;&lt;/span&gt;和苹果的IOS智能手机平台是美国智能手机市场的领导者，&lt;span class="wp_keywordlink" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="Google Android,Android手机系统" href="http://www.199it.com/archives/tag/android" target="_blank"&gt;Android&lt;/a&gt;&lt;/span&gt;平台占了将近一半的市场，而IOS占据了近30%。在欧洲5国，&lt;span class="wp_keywordlink" style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" title="Google Android,Android手机系统" href="http://www.199it.com/archives/tag/android" target="_blank"&gt;Android&lt;/a&gt;&lt;/span&gt;的市场份额类似，取代了塞班在5个欧洲市场中3个市场地位。&lt;/li&gt;&lt;/ul&gt;&lt;div style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 0px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&amp;nbsp;&lt;/div&gt;&lt;div style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 0px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" href="http://www.199it.com/wp-content/uploads/2012/02/%E7%BE%8E%E5%9B%BD%E6%99%BA%E8%83%BD%E6%89%8B%E6%9C%BA%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E4%BB%BD%E9%A2%9D.png"&gt;&lt;img class="aligncenter size-full wp-image-25104" style="border-width: 0px; margin: 0px auto; padding: 0px; height: auto; clear: both; font-size: 14px; vertical-align: baseline; display: block; max-width: 640px; outline-width: 0px; background-color: transparent; border-image: initial;" title="美国智能手机操作系统份额" src="http://www.199it.com/wp-content/uploads/2012/02/%E7%BE%8E%E5%9B%BD%E6%99%BA%E8%83%BD%E6%89%8B%E6%9C%BA%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E4%BB%BD%E9%A2%9D.png" alt="" width="421" height="282" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;ul style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 15px 0px 20px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; list-style-type: none; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;li style="border-width: 0px; margin: 0px 0px 0px 30px; padding: 0px; font-size: 14px; vertical-align: baseline; list-style-type: disc; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; color: #666666; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;移动APP使用高速增长形成双移动浏览体验，驱动各领域增长&lt;/strong&gt; 2011年美国和欧洲5国均见证了移动APP的使用超过了移动浏览器使用的增长，导致这些市场中出现了同样高比例的同时使用app和浏览器获取移动媒体内容的用户。2011年，健康信息是美国移动媒体消费中增长最快的领域，随后是零售、和商务相关的领域如电子支付和拍卖网站。&lt;/li&gt;&lt;/ul&gt;&lt;div style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 0px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" href="http://www.199it.com/wp-content/uploads/2012/02/%E7%A7%BB%E5%8A%A8APP%E5%92%8C%E6%89%8B%E6%9C%BA%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BD%BF%E7%94%A8.png"&gt;&lt;img class="aligncenter size-full wp-image-25105" style="border-width: 0px; margin: 0px auto; padding: 0px; height: auto; clear: both; font-size: 14px; vertical-align: baseline; display: block; max-width: 640px; outline-width: 0px; background-color: transparent; border-image: initial;" title="移动APP和手机浏览器使用" src="http://www.199it.com/wp-content/uploads/2012/02/%E7%A7%BB%E5%8A%A8APP%E5%92%8C%E6%89%8B%E6%9C%BA%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BD%BF%E7%94%A8.png" alt="" width="802" height="227" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;ul style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 15px 0px 20px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; list-style-type: none; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;li style="border-width: 0px; margin: 0px 0px 0px 30px; padding: 0px; font-size: 14px; vertical-align: baseline; list-style-type: disc; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; color: #666666; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;移动零售信息引发智能手机购物行为的出现&lt;/strong&gt; 2011年，超过一半的美国智能手机用户在商店时使用智能手机进行购物研究，显示出老道的智能手机购物群体将网上的行为带到线下商铺，该趋势在其它市场也同样存在。2011年底，将近1/5的智能手机用户扫描产品二维码，将近1/8的人在商店购物时使用手机比价。&lt;/li&gt;&lt;/ul&gt;&lt;div style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 0px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" href="http://www.199it.com/wp-content/uploads/2012/02/%E6%89%8B%E6%9C%BA%E7%94%A8%E6%88%B7%E5%95%86%E5%BA%97%E8%B4%AD%E7%89%A9%E8%A1%8C%E4%B8%BA.png"&gt;&lt;img class="aligncenter size-full wp-image-25106" style="border-width: 0px; margin: 0px auto; padding: 0px; height: auto; clear: both; font-size: 14px; vertical-align: baseline; display: block; max-width: 640px; outline-width: 0px; background-color: transparent; border-image: initial;" title="手机用户商店购物行为" src="http://www.199it.com/wp-content/uploads/2012/02/%E6%89%8B%E6%9C%BA%E7%94%A8%E6%88%B7%E5%95%86%E5%BA%97%E8%B4%AD%E7%89%A9%E8%A1%8C%E4%B8%BA.png" alt="" width="802" height="366" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;ul style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 15px 0px 20px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; list-style-type: none; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;li style="border-width: 0px; margin: 0px 0px 0px 30px; padding: 0px; font-size: 14px; vertical-align: baseline; list-style-type: disc; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; color: #666666; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;移动设备引发行走中的社交网络，实时互动兴起&lt;/strong&gt; 2011年12月，6420万美国智能手机用户和4840万欧洲5国智能手机用户在手机上至少访问一次社交网站或博客。超过一半的移动社交网络用户几乎每天都使用社会化媒体。当移动社交网络用户显示出他们对好友发表的内容的阅读热情时，超过一半的美国用户和将近一半的欧洲5国用户也阅读来自品牌、组织和事件的信息。&lt;/li&gt;&lt;/ul&gt;&lt;div style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 0px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" href="http://www.199it.com/wp-content/uploads/2012/02/%E7%A7%BB%E5%8A%A8%E7%A4%BE%E4%BA%A4%E8%A1%8C%E4%B8%BA.png"&gt;&lt;img class="aligncenter size-full wp-image-25108" style="border-width: 0px; margin: 0px auto; padding: 0px; height: auto; clear: both; font-size: 14px; vertical-align: baseline; display: block; max-width: 640px; outline-width: 0px; background-color: transparent; border-image: initial;" title="移动社交行为" src="http://www.199it.com/wp-content/uploads/2012/02/%E7%A7%BB%E5%8A%A8%E7%A4%BE%E4%BA%A4%E8%A1%8C%E4%B8%BA.png" alt="" width="684" height="352" /&gt;&lt;/a&gt;&lt;/div&gt;&lt;ul style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 15px 0px 20px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; list-style-type: none; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;li style="border-width: 0px; margin: 0px 0px 0px 30px; padding: 0px; font-size: 14px; vertical-align: baseline; list-style-type: disc; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; color: #666666; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;数字多栖用户-移动连接和联网设备推动跨平台数字媒体消费&lt;/strong&gt; 2011年，平板迅速走红，不到两年在美国就有4000万用户，而智能手机需要7年才达到同等的使用规模。2011年底，将近15%的手机用户拥有平板，该趋势在其他地区也是类似。&lt;/li&gt;&lt;/ul&gt;&lt;p&gt;&lt;a style="margin: 0px; padding: 0px; color: #666666; font-size: 14px; text-decoration: none; vertical-align: baseline; background-color: transparent;" href="http://www.199it.com/wp-content/uploads/2012/02/Snap491.png"&gt;&lt;img class="aligncenter size-full wp-image-25110" style="border-width: 0px; margin: 0px auto; padding: 0px; clear: both; font-size: 14px; vertical-align: baseline; display: block; max-width: 640px; outline-width: 0px; background-color: transparent; border-image: initial;" title="Snap49" src="http://www.199it.com/wp-content/uploads/2012/02/Snap491.png" alt="" width="634" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;div class="wumii-hook" style="border-width: 0px; font: 14px/25px Tahoma, Verdana, 宋体; margin: 0px; padding: 0px; color: #434343; text-transform: none; text-indent: 28px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; outline-width: 0px; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&amp;nbsp;&lt;/div&gt;&lt;img src="http://www.cnblogs.com/craig/aggbug/2522407.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/craig/archive/2012/05/28/2522407.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/craig/archive/2012/05/28/2522394.html</id><title type="text">2012年移动应用十大设计趋势</title><summary type="text">2011年涌现出诸多优秀设计，随着操作系统的更新和硬件性能的提升，用户对移动应用的品质需求也呈现上升趋势，界面设计又被提升到一个新的高度。移动应用不再是将内容从互联网搬至移动设备，而是解决设备本身的问题，根据用户需求从视觉感受、风格趋势、操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性，为用户带来新颖的体验。本文汇总今年热门产品的界面设计，从中总结出未来一年需要重点关注的设计趋势，供大家参考。趋势一：极简主义的应用图标从App Store的国外知名产品的设计动态看， 启动软件的图标设计正在趋近极简化风格的设计。极简主义风格的设计，视觉表现的元素简约，能够让用户快速的记忆应用类产品。LBS</summary><published>2012-05-28T12:19:00Z</published><updated>2012-05-28T12:19:00Z</updated><author><name>craig</name><uri>http://www.cnblogs.com/craig/</uri></author><link rel="alternate" href="http://www.cnblogs.com/craig/archive/2012/05/28/2522394.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/craig/archive/2012/05/28/2522394.html"/><content type="html">&lt;p&gt;2011年涌现出诸多优秀设计，随着操作系统的更新和硬件性能的提升，用户对移动应用的品质需求也呈现上升趋势，界面设计又被提升到一个新的高度。移动应用不再是将内容从互联网搬至移动设备，而是解决设备本身的问题，根据用户需求从视觉感受、风格趋势、操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性，为用户带来新颖的体验。&lt;/p&gt;&lt;p&gt;本文汇总今年热门产品的界面设计，从中总结出未来一年需要重点关注的设计趋势，供大家参考。&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="border-width: 0px; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; clear: both; font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background-color: transparent; border-image: initial;"&gt;趋势一：极简主义的应用图标&lt;/strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;从App Store的国外知名产品的设计动态看， 启动软件的图标设计正在趋近极简化风格的设计。&lt;/p&gt;&lt;p&gt;极简主义风格的设计，视觉表现的元素简约，能够让用户快速的记忆应用类产品。LBS产品Gowalla ，在2010年初时候的应用图标如下图左效果，应用图标呈现为复杂的袋鼠造型和GO字母的结合体，表现元素造型复杂；经过1年多的产品升级版本迭代，此时的Gowalla的图标已经是右边效果图，典型的极简主义应用图标，简约美观。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/1.png" alt="" /&gt;&lt;/div&gt;&lt;p&gt;如下图所示的path软件的应用图标设计，由原来的立体感的设计演变为极简的、相对扁平化微渐变的设计风格。极简的应用图标设计，背景色统一，突出品牌&amp;ldquo;P&amp;rdquo;，视觉上传达给用户一种十足的品质感。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/2.png" alt="" /&gt;&lt;/div&gt;&lt;p&gt;又如入围2011最佳产品工具类排行的百度搜索，应用图标的设计也趋向极简主义设计风格。由原来的相对具象的图形表现方式向极简主义的设计风格趋近,从视觉传达的角度，提升了应用图标的整体感和品质感。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/3.png" alt="" /&gt;&lt;/div&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="border-width: 0px; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; clear: both; font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background-color: transparent; border-image: initial;"&gt;趋势二：适配多样化的分辨率&lt;/strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;回顾过去几年，从智能手机发展初始阶段的240&amp;times;320的分辨率手机，到目前主流的480&amp;times;800的分辨率手机，手机的分辨率呈现多样化并向高精度发展，目前Galaxy Nexus的分辨率甚至达到了1280&amp;times;720，所以屏幕适配性是衡量操作系统的重要指标之一。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/4.png" alt="" width="282" height="492" /&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/5.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;Android3.0之后重要的改进就是增强了适配性，平面化的图形便于横向拉伸，分辨率增大时，顶部可以由两栏合并为一栏，手机和平板可以使用同一个程序，所以应用程序将更多的考虑高分辨率的显示效果。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/6.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;试想我们在设计一款应用软件的界面时，需要同时照顾到多种分辨率手机用户，并不是一件非常容易把握的事情。密切关注移动硬件市场情况，了解适配多样化硬件分辨率的手机用户的使用习惯，分析多样化分辨率界面设计的方法，也是2012年我们设计师需要关注和研究的趋势之一。&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="border-width: 0px; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; clear: both; font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background-color: transparent; border-image: initial;"&gt;趋势三：平面化的视觉风格&lt;/strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;自WP7使用Metro风格之后，Windows8为代表的界面会将这种新兴设计风格推向主流，Metro的特点就是简洁与直观，没有过分华丽的炫目背景与精致的功能图标。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/7.jpg" alt="" /&gt;&lt;/div&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/8.png" alt="" /&gt;&lt;/div&gt;&lt;p&gt;除了windows 8的设计外，X box360等产品也在使用这种设计风格，界面风格设计也呈现平面化、格子风的设计趋势，简约而华丽的设计给用户带来了全新的视觉体验，强化Metro统一的品牌感。如下图：&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/9.png" alt="" /&gt;&lt;/div&gt;&lt;p&gt;除此之外，Android 4.0系统的视觉设计风格也整体趋向平面化、格子风趋势。android 4.0系统的视觉设计，放弃了原有的设计风格，整体正在向平面化、格子风的设计方向进化。虽然没有那么强烈的Metro设计风格，但是这足以可以体现Metro风格的影响力。如下图所示：&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/11.png" alt="" /&gt;&lt;/div&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/10.png" alt="" /&gt;&lt;/div&gt;&lt;p&gt;平面化、格子风正在流行，并正在影响着众多的移动应用的视觉设计，但未来移动应用不会严格遵从官方的标准，在此基础上将衍生出更多的创新设计，丰富这一设计风格。&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="border-width: 0px; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; clear: both; font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background-color: transparent; border-image: initial;"&gt;趋势四：越来越丰富的动效&lt;/strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;动效设计和交互视觉都息息相关，是一种动态的交互行为的用户反馈特效。优秀的动效设计，能够增加用户交互的亲和力和趣味性，提升产品的用户体验。动效会被越来越多的平台软件应用，智能手机硬件的提升，给动效体验设计带来了展示的机会，给软件产品的用户体验升级提供了更大的空间。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/12.png" alt="" /&gt;&lt;span class="Apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/13.png" alt="" /&gt;&lt;span class="Apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/14.png" alt="" /&gt;&lt;/div&gt;&lt;p&gt;如上图是韩国Naver的一款看房地图的软件，它采用了放大收缩的动效。用户点击地图后，地图本身放大，然后转入街景界面；用户关闭街景时，采用收缩的动效还原到地图界面。这一细节的动效设计，给用户一种酷炫的感觉，同时增强了界面间变化的连贯性。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/15.png" alt="" /&gt;&lt;span class="Apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/16.png" alt="" /&gt;&lt;/div&gt;&lt;p&gt;如上图的Path左下角的动效设计，这已经成为2011年代表性的设计。此软件多处用到了动效，用的恰到好处，为产品赢得了良好的用户口碑，为产品在短时间类增加了大量的用户。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/17.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;另外，在PC端的动效已经在Metro设计中广泛运用，参见苹果电脑酷炫的动效体验设计可以赢得用户的钦赖。动效设计丰富了交互，补充了视觉，恰当的运用动效能够提升产品的用户体验。&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="border-width: 0px; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; clear: both; font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background-color: transparent; border-image: initial;"&gt;趋势五：电影化的开场界面&lt;/strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;好的开场是成功的一半，越来越多的应用会采用动态的全景照片作为自己的开场界面，或者采用高保真的图片作为应用的首屏壁纸。这种斑斓艳丽的视觉效果，为应用争得了良好的第一印象，让应用变得更加的生动和迷人。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/18.jpg" alt="" /&gt;&lt;/div&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/19.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;Flipboard是一个华丽的阅读产品，最开始推出的是iPad版，目前已经推出了iPhone版，它让你在手机上也能拥有杂志一般的阅读体验。Flipboard在iPhone版本上，推出了封面故事功能，将热点的新闻和图片，直接在封面上展示。用户还可以详细定制出现在封面故事上的内容，当然你也可以关闭它。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/20.jpg" alt="" /&gt;&lt;span class="Apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/21.png" alt="" /&gt;&lt;/div&gt;&lt;p&gt;iPhone版Flickr客户端启动之后，就是一系列高精度图片的动态轮播，让你体验到艳丽多彩的视觉冲击。&lt;/p&gt;&lt;p&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/22.png" alt="" /&gt;&lt;span class="Apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/23.png" alt="" /&gt;&lt;/p&gt;&lt;p&gt;中文摄影杂志PhotoMagazine的开场，则像是一场精心炮制的剪切动画，多个镜头依次出现在屏幕上，一张张美丽的摄影照片衬托出鲜艳的人像和风景，让摄影杂志的文艺气息深入人心。电影化的启动界面，可以直接提升用户对产品的好感度但也要考虑到多张图片的大小，及动画效果加载效率的问题。&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="border-width: 0px; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; clear: both; font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background-color: transparent; border-image: initial;"&gt;趋势六：合理的用户引导&lt;/strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;由于手机界面的承载能力有限，产品功能的不断膨胀，必须要在用户打开应用之后告知他某些新奇的功能，引导他完成某些主要任务流程，让用户不至于迷失在陌生应用中不知所措。帮助用户快速掌握应用的使用方法，体验到应用的乐趣，新手引导成了一个必须考虑的设计环节。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/24.png" alt="" /&gt;&lt;span class="Apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/25.png" alt="" /&gt;&lt;/div&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;Tweebot会在程序刚启动的时候，用简短的几页介绍，告诉你应用程序的高级使用技巧，一些隐藏的功能可以让你更方便快捷的执行操作，比如双击查看详情，长按唤出操作，向右滑动查看对话历史，长按标签栏可以自定义标签内容。&lt;/div&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/26.png" alt="" /&gt;&lt;span class="Apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/27.png" alt="" width="245" height="360" /&gt;&lt;/div&gt;&lt;p&gt;Foursquare和Gowalla会在合适的时机，提醒你可以执行某个操作。某个按钮挪了位置，快速去添加好友，开始签到并与好友分享图片。通过这样一种Tips告知的形式，让用户关注到系统的状态，引导用户可以继续走向哪里，可以启动很好的帮助用户熟悉应用的作用。&lt;/p&gt;&lt;p&gt;用户引导的直接目标是帮助用户更好的使用产品，终极目标是提升用户满意度。虽然，大多数情况下，我们可以通过合理的设计，尽可能的简化功能，让用户无需引导和帮助，就可以完成必要的任务。但是实际上，手机产品的限制和对强大功能的追求，导致这个目标很难达到，因此越来越多的应用开始使用用户引导来帮助用户快速熟悉产品。&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="border-width: 0px; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; clear: both; font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background-color: transparent; border-image: initial;"&gt;趋势七：突出显示的主要功能&lt;/strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;产品的定位和核心功能决定了主界面的布局，对于不同信息架构的产品，主界面会有很大的不同，但是如何使产品从同类产品的相似界面中脱颖而出呢？答案是：专注。&lt;/p&gt;&lt;p&gt;对于秉承了&amp;ldquo;开启即用&amp;rdquo;设计策略的移动应用来说，多而全的功能点和复杂的应用结构并不适用。从主界面点击超过三次才能操作的功能被使用机率则非常低，普通用户不会乐于使用深层界面被掩藏的功能&lt;/p&gt;&lt;p&gt;同样，也有数据表明，在界面上突出某项功能的视觉特征，会提高用户使用该功能的机率；对具有&amp;ldquo;利用碎片化时间&amp;rdquo;和&amp;ldquo;显示区域较小&amp;rdquo;特征的移动应用来说，让用户在多个功能按钮中进行选择，也会成为影响用户体验的因素。&lt;/p&gt;&lt;p&gt;因此，一定要找出产品的核心功能，并在主界面上突出显示。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/28.jpg" alt="" /&gt;&lt;span class="Apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/29.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;integram是一个以图片为媒介的垂直化社交网络，对这个产品来说，图片只是作为载体的形式出现，核心价值是通过分享建立的朋友关系。所以在产品的主界面上，将&amp;ldquo;share&amp;rdquo;按钮的样式区分于其他标签，突出显示核心功能。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/30.jpg" alt="" /&gt;&lt;span class="Apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/31.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;拍照和签到类应用中，在标签栏突出主要功能，主要功能的使用率也是衡量产品交互的重要指标。&lt;/p&gt;&lt;p&gt;另一个影响视觉设计的因素是：设计的重点与单个功能的使用率。&lt;/p&gt;&lt;p&gt;在UGC模式的拍照和签到类应用中，从用户处得到内容是设计中的难点，而&amp;ldquo;拍照&amp;rdquo;则是使用率较高的功能，所以在标签栏的视觉设计上突出&amp;ldquo;拍照功能&amp;rdquo;。&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="border-width: 0px; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; clear: both; font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background-color: transparent; border-image: initial;"&gt;趋势八：隐藏的侧边栏菜单&lt;/strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;部分移动应用由于发展时间比较长，已经变得有些&amp;ldquo;臃肿&amp;rdquo;，默认的五个标签栏已经满足不了架构需求。类似Pad的侧边栏越来越多出现在手机界面设计，有助于减少界面的层级关系，充分利用显示空间，或者让目录型数据便于在较低分辨率的界面中操作。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/32.png" alt="" /&gt;&lt;span class="Apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/33.png" alt="" /&gt;&lt;/div&gt;&lt;p&gt;Facebook&amp;amp;Path&lt;/p&gt;&lt;p&gt;如果返回上一级才能跳转页面，会极大的增加用户查找信息的难度，使用侧边栏可以让应用的架构更为清晰。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/34.jpg" alt="" /&gt;&lt;span class="Apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/35.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;侧边栏可以保证视觉的稳定性，如果和界面操作不冲突的话，可以依靠左右滑动手势调出侧边栏，提示操作效率。侧边栏也可以放置操作按钮，但可能会导致界面看起来显得拥挤，更多的侧边栏样式及应用场景还需要设计师不断地进行尝试。&lt;/p&gt;&lt;p&gt;侧边栏也是手机界面架构的一种新方式，容纳更多的功能，同时要保证界面层级关系清晰。&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="border-width: 0px; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; clear: both; font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background-color: transparent; border-image: initial;"&gt;趋势九：革命性的语音交互&lt;/strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;设备硬件为取代其他终端产品和实现新颖的功能提供了技术基础，用户与设备之间的交互方式不仅局限受触摸屏，语音和拍摄在2011年的移动应用中发挥了巨大的作用，促成微信和instagram等热门产品。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/36.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;Siri被誉为革命性产品，不管其是否夸大其词，它成功将语音交互引入到移动设备中，比起语音命令更为智能，赋予它人性化的特征。语音可以用来操作界面、发起搜索和输入内容，但整个操作过程中像是与人对话，一定程度上降低的学习成本，同时让应用富有情感化。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/37.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;百度手机浏览器Android率先引入语音搜索，目的也是解放双手，提供更为自然的操作方式。语音交互比起单纯的触摸更难设计，除了要解决最基本的识别性问题，还需要交互辅助解决识别率和使用环境嘈杂等问题。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/38.jpg" alt="" /&gt;&lt;span class="Apple-converted-space"&gt;&amp;nbsp;&lt;/span&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/39.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;语聊可能是今年最火的功能，音频让用户沟通更为方便，在此基础之上还能衍生出更丰富的语音交互方式，比如语音表情、网络电话和视频电话等等。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/40.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;语音输入是语音识别的基础应用，技术基本成熟，2012年有望广泛实现在手机的输入法中，为用户的输入方式带来便利。&lt;/p&gt;&lt;p&gt;新颖的交互技术必然还会存在各种缺陷，需要交互设计发挥自身设计优势，充分利用技术的优点，尽量避免技术不成熟引发的体验问题，一定程序上也是促进技术的发展。&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="border-width: 0px; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; clear: both; font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background-color: transparent; border-image: initial;"&gt;趋势十：演变中的手势操作&lt;/strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;以N9为代表，滑动手势取代Home键，进入多任务、功能列表还是应用程序，都可以使用滑动手势操作。滑动操作将非常频繁地出现在触摸屏操作中，设计中使用滑动手势取代点击有诸多优点，比如避免点击区域导致的误操作问题、提升操作效率、隐藏控件并节约显示空间等，百度手机输入法独创的滑动输入也是早期手势操作的代表性案例。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/41.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;N9手机 取缔按键是未来手机的必然趋势，滑动手势会发挥更大的作用。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/42.jpg" alt="" /&gt;&lt;/div&gt;&lt;p&gt;iPhone版Flipboard向上滑动实现翻页，不过效果过于强烈，视觉上并不连贯，但也是滑动手势在移动应用中尝试性设计。滑动手势不但可以用来操作平级界面之间的跳转，也能用来作为进入上下级界面的操作方式。&lt;/p&gt;&lt;div style="border-width: 0px; font: 14px/21px 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;img style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; max-height: 1000px; max-width: 700px; background-color: transparent; border-image: initial;" src="http://mux.baidu.com/img/85/43.png" alt="" /&gt;&lt;/div&gt;&lt;p&gt;百度手机浏览器WP7版独创单指滑动工具栏可以缩放页面，随意控制页面比例，未来还会有更多的手势应用在常用界面中。还是浏览器利用两指滑动新建界面或者进入其他多标签页，将滑动手势定义为快捷操作，为高级用户提高了操作效率。同时注意引导用户学习特有的手势操作，有助于提升用户对于应用的使用粘度。&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;h2 style="border-width: 0px; margin: 0px; padding: 0px; color: #333333; text-transform: none; text-indent: 0px; letter-spacing: normal; clear: both; font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-style: normal; font-variant: normal; font-weight: normal; word-spacing: 0px; vertical-align: baseline; white-space: normal; orphans: 2; widows: 2; background-color: #ffffff; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-image: initial;"&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; background-color: transparent; border-image: initial;"&gt;结语&lt;/strong&gt;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;研究设计趋势是为了掌握最新的设计资讯和前沿的研究方向，从众多设计中感知规律并能灵活运用到自己的设计当中，甚至是引领设计潮流，这也是创新设计的必备要素。&lt;/p&gt;&lt;p&gt;转自&lt;a href="http://mux.baidu.com/?p=2866"&gt;http://mux.baidu.com/?p=2866&lt;/a&gt;&lt;/p&gt;&lt;img src="http://www.cnblogs.com/craig/aggbug/2522394.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/craig/archive/2012/05/28/2522394.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/craig/archive/2012/05/28/2522392.html</id><title type="text">2012年移动应用交互设计趋势</title><summary type="text">2011年涌现出诸多优秀设计，随着操作系统的更新和硬件性能的提升，交互设计又被提升到一个新的高度。不再是将内容从互联网搬至移动设备，而是解决设备本身的问题，根据用户需求从操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性，为用户带来新颖的交互体验。本文汇总今年热门产品的界面案例，希望能从中总结出未来一年需要重点关注的设计趋势。突出主要功能对于信息架构的不同，主界面也会有很大区分，以某一功能吸引用户，如拍照分享。专注是从众多相似产品中脱颖而出的产品策略。有数据表明，如果界面某项功能在视觉上最明显，那也将提高用户使用的机率，而从主界面点击超过三次才能操作的功能被使用机率则非常低。integra</summary><published>2012-05-28T12:16:00Z</published><updated>2012-05-28T12:16:00Z</updated><author><name>craig</name><uri>http://www.cnblogs.com/craig/</uri></author><link rel="alternate" href="http://www.cnblogs.com/craig/archive/2012/05/28/2522392.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/craig/archive/2012/05/28/2522392.html"/><content type="html">&lt;p&gt;&lt;span style="font-size: 14px;"&gt;2011年涌现出诸多优秀设计，随着操作系统的更新和硬件性能的提升，交互设计又被提升到一个新的高度。不再是将内容从互联网搬至移动设备，而是解决设备本身的问题，根据用户需求从操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性，为用户带来新颖的交互体验。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;本文汇总今年热门产品的界面案例，希望能从中总结出未来一年需要重点关注的设计趋势。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;strong style="margin: 0px; padding: 0px;"&gt;突出主要功能&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;对于信息架构的不同，主界面也会有很大区分，以某一功能吸引用户，如拍照分享。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;专注是从众多相似产品中脱颖而出的产品策略。有数据表明，如果界面某项功能在视觉上最明显，那也将提高用户使用的机率，而从主界面点击超过三次才能操作的功能被使用机率则非常低。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/P3ceeriAzc6F0S2oWI_FtdMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh3.googleusercontent.com/-p0NgBjjMaro/TvltaSsgcaI/AAAAAAAAAT4/UJKC_Vw9i1g/s800/mzl.hwmoxyhp.320x480-75.jpg" alt="" width="240" height="360" /&gt;&lt;/a&gt;&amp;nbsp;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/1PKuqBAe-eA3hR3vmF-oS9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-xGSTqFgwG0o/TvltaupsaoI/AAAAAAAAAT8/YLMat9jYLjQ/s800/mzl.sytjrvgf.320x480-75.jpg" alt="" width="240" height="360" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;integram在视觉上&amp;ldquo;share&amp;rdquo;按钮的样式区分去其他标签，强调分享，而不是拍照功能。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/hy7ErMiBzzXnV3RVc6FOZ9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-BSRoJx79Umo/Tvltp34f51I/AAAAAAAAAVs/YNb5iFxSgO8/s800/mzl.swgmecwz.320x480-75.jpg" alt="" width="240" height="360" /&gt;&lt;/a&gt;&amp;nbsp;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-GTROIQcCho4/Tvv_MToj6SI/AAAAAAAAAeQ/NuCpIyICPdg/s800/mzl.ouansghj.320x480-75.jpg" alt="" width="240" height="360" /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;strong style="margin: 0px; padding: 0px;"&gt;语音交互&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;设备硬件为取代其他终端产品和实现新颖的功能提供了技术基础，用户与设备之间的交互方式不仅局限受触摸屏，语音和拍摄在2011年的移动应用中发挥了巨大的作用，促成微信和Instagram等热门产品。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/gE8kK1lHkh5wvJMHWfCM-dMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh3.googleusercontent.com/-ufSIKqBrWlw/Tvl2Qsg7pYI/AAAAAAAAAZw/aVBVG9fpouc/s800/111017063650-siri-iphone-4s-woman-talks-story-top.jpg" alt="" width="480" height="274" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;Siri被誉为革命性产品，不管其是否夸大其词，它成功将语音交互引入到移动设备中，比起语音命令更为智能。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/FY0igKiJBRmAeAd58uYKDtMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-WHWqKuSUeQU/TvmAgSFxJtI/AAAAAAAAAbM/674rMW5pwnE/s800/baidu.JPG" alt="" width="480" height="200" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;百度手机浏览器Android率先引入语音搜索，解放双手，提供更为自然的操作方式，但需要交互辅助解决识别率和使用环境嘈杂等问题。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/nMBeszeZaP-AZhTwcA4hV9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="border-width: 1px; margin: 15px 0px; padding: 8px; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh5.googleusercontent.com/-gORRrdTiltc/TvlteyYATZI/AAAAAAAAAUY/4v_04SxqvJc/s800/769041-screenshot-1.jpg" alt="" width="240" height="360" /&gt;&lt;/a&gt;&amp;nbsp;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/xTFmJG1Cw3PugwDN8oiXZdMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh3.googleusercontent.com/-DP887eERKQ0/TvmTnGf10fI/AAAAAAAAAb8/5BranOBT3Uc/s800/28e1376125b6d7692af56da75d816b44_2.jpg" alt="" width="240" height="360" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;语聊可能是今年最火的功能，音频让用户沟通更为方便，在此基础之上还能衍生出更丰富的语音交互方式，比如语音表情等等。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/gu0RgObkBhrEkubvVdoqZdMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-lMgvYh8HzPs/TvmVIAm2XGI/AAAAAAAAAcE/GfH5BzlFO7E/s800/Nuance-ios5.jpg" alt="" width="320" height="211" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;语音输入是语音识别的基础应用，有望广泛实现在手机的输入法中。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;strong style="margin: 0px; padding: 0px;"&gt;摄像头交互&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/PVLEbdPxsjMWvOZqri-2ztMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh3.googleusercontent.com/-Oe1x3K8WD4g/Tvltf5IKJTI/AAAAAAAAAUk/sZeOR3JfLqY/s800/eye.png" alt="" width="600" height="146" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;摄像头的潜力同样让人兴奋，除了拍照和拍视频还有很多料想不到的功能，比如类似于kinect的操作，在屏幕上方移动手掌可以操作手机。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/SpOTP_JHO9QpV4GWZLl_B9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh5.googleusercontent.com/-0C1NmWKTuoo/TvltqA0_s4I/AAAAAAAAAV0/RuGlzqHNWjw/s800/mzl.pudtpmwe.320x480-75.jpg" alt="" width="240" height="360" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;裸眼3D利用前置摄像头探测用户和设备的相对位置，在屏幕上显示立体化的图形，不需要戴眼镜可以看到3D的效果，这项技术可能优先使用在游戏中。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;摄像头还可以捕捉眼球的位置移动，取代触摸屏操作，计算出用户的视觉注意力在屏幕哪部分区域，页面可以随着眼球的移动，当眼球的注意力集中在某个图标上2秒钟可以触发点击操作。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/U413PAjqZLDXs9DOJ3cqZ9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh3.googleusercontent.com/-jeVZKkV4hc8/Tvmv59D-wgI/AAAAAAAAAcc/I4S9ic_fQ7s/s800/Android-Face-Unlock-scanning.jpg" alt="" width="240" height="426" /&gt;&lt;/a&gt;&amp;nbsp;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-HkOrusi2DoE/Tvmv6KhOr6I/AAAAAAAAAcY/0tzHDtU0eio/s800/ics-unlock-face.jpg" alt="" width="240" height="426" /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;Galaxy Nexus的脸部识别功能，利用前置摄像头将成熟技术应用在移动端，视频通话也将在未来几年得到普及。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;strong style="margin: 0px; padding: 0px;"&gt;手势操作&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;以N9为代表，滑动手势取代Home键，滑动操作将非常频繁地出现在触摸屏操作中，设计中使用滑动手势取代点击有诸多优点，比如避免点击区域导致的误操作问题、操作流畅和隐藏控件等。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/9YvmOe5o75fL2iPUr1Ju9NMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-9-09Dy4NA2E/TvlttfUlq-I/AAAAAAAAAXE/cj3Ug-BoNl4/s800/%2525E6%25258D%252595%2525E8%25258E%2525B7.JPG" alt="" width="480" height="223" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;em style="margin: 0px; padding: 0px;"&gt;N9手机&lt;/em&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/Z1UYCSug8J4WURN8m-ZHZtMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh6.googleusercontent.com/-RRq75y5gIlE/TvltucoDXQI/AAAAAAAAAXY/OEwmWzrXvo8/s800/%2525E6%25258D%252595%2525E8%25258E%2525B72.JPG" alt="" width="470" height="281" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;uc浏览器双指滑动可以新建或者切换界面，有助于提高操作效率。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/i__w_2zBFuATu5XE155y89MTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh3.googleusercontent.com/-xeIAOue4Z8U/TvltuTVgeVI/AAAAAAAAAXc/dKtHSWPI-es/s800/%2525E6%25258D%252595%2525E8%25258E%2525B73.JPG" alt="" width="480" height="326" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;iPhone版Flipboard向上滑动实现翻页，不过效果过于强烈，视觉上并不连贯。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/zjM3Ey8MfLshy6fB85XjINMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-sLpEHgogKRs/Tvlterf4CDI/AAAAAAAAAUU/ku9hhpsZzFY/s800/72886e5b-d065-4859-bd7c-20b507a34a82.png" alt="" width="240" height="400" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;百度手机浏览器WP7版单指滑动工具栏可以缩放页面，随意控制页面比例。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;strong style="margin: 0px; padding: 0px;"&gt;动效&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;随着手机性能的提升，系统和应用程序中的动效越来越丰富，其丰富的视觉细节对于交互设计有着诸多的辅助作用，有效保证富交互的实现效果，应用形式有转场、控件交互、操作效果和提供反馈等。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/rYSl6TF4FZE8BwV7MiuHY9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-qhcUeUnQRlY/TvltbNUOm5I/AAAAAAAAAUE/q_D5gCuhzmE/s800/mzl.uzmxaetz.320x480-75.jpg" alt="" width="240" height="360" /&gt;&lt;/a&gt;&amp;nbsp;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh6.googleusercontent.com/-QQSjeLknVRs/TvmJX7VplRI/AAAAAAAAAbk/bnaS9T-WuEw/s800/mzl.htqiicoc.320x480-75.jpg" alt="" width="240" height="360" /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;翻页和点击单个元素进入新页面时，专场效果让界面看起来更为流畅。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/NTBAtucn3KyC627YrWHsGtMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-dYxDeBT3Q1k/TtbfVCMhWKI/AAAAAAAAAQo/5lzzcJrf-ZI/s800/elegent-ui-600x226.png" alt="" width="480" height="181" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;Path控件的动效成为今年流行设计元素，越来越多的应用为针对ios5增加动效。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;strong style="margin: 0px; padding: 0px;"&gt;侧边栏&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;当界面结构比较复杂，类似Pad的侧边栏有助于减少界面的层级关系，充分利用显示空间，或者让目录型数据便于操作。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/0aDOMEVfPnRzAoZmVq_RxdMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh6.googleusercontent.com/-e1mcrCkQ11Y/TvlzjJ48J3I/AAAAAAAAAYs/hw5o2UdCgMc/s800/IMG_2146.png" alt="" width="240" height="360" /&gt;&lt;/a&gt;&amp;nbsp;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/s-Kr3u6o1_ZpqiWVMWD2q9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh3.googleusercontent.com/-1wc05O7q_As/TvlzkMkpkzI/AAAAAAAAAY0/LRCHMdQiHgA/s800/IMG_2132.png" alt="" width="240" height="360" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;em style="margin: 0px; padding: 0px;"&gt;Facebook&amp;amp;Path&lt;/em&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/0HN3VQHzQk07pjX1_zHwv9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-3cOOBAFTpy8/Tvltt17bD2I/AAAAAAAAAXQ/djnESQDyu_g/s800/unnamed%252520%2525281%252529.jpg" alt="" width="240" height="400" /&gt;&lt;/a&gt;&amp;nbsp;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh5.googleusercontent.com/-zqmZ1phHkqg/Tvltsx-EOnI/AAAAAAAAAW4/huFluHsUySo/s800/unnamed.jpg" alt="" width="240" height="400" /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/FBeVqgsOPBxBkF4HNBXjb9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh6.googleusercontent.com/-Hqsp5Kj8TUs/TvltlFNow4I/AAAAAAAAAVQ/RGBIVeGv8Z0/s800/mzl.ccxuhcgh.320x480-75.jpg" alt="" width="480" height="320" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;strong style="margin: 0px; padding: 0px;"&gt;全局显示&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;移动设备的屏幕越来越大，但还是要减少不必要视觉元素干扰用户，特别是对于浏览类产品，更注重扩大主体显示区域。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/SsvhhJSwXKLW0jvz3qhgZNMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh3.googleusercontent.com/-hXT6kFMsKJk/TvltgzmyRUI/AAAAAAAAAUw/nE4BtyyW5Dk/s800/ie-callout-browser.png" alt="" width="440" height="410" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;WP7浏览器将地址栏放置底部，增加显示空间，同时让用户的操作集中在界面底部。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/EcCXdWU2DS2-CVkbQyy-UtMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh6.googleusercontent.com/-ajsCwHVKImU/Tvl3g2C1b4I/AAAAAAAAAaA/o2SaVKT6Wxs/s800/mzl.kxpbwxqo.320x480-75.jpg" alt="" width="240" height="360" /&gt;&lt;/a&gt;&amp;nbsp;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/SKI6nB2Ja2Avo1c40CfXONMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="border-width: 1px; margin: 15px 0px; padding: 8px; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh5.googleusercontent.com/-RUelknu64Ic/Tvltrde-pPI/AAAAAAAAAWM/PN9ReGa0NcY/s800/mzl.vseyvlwp.320x480-75.jpg" alt="" width="240" height="360" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;唐茶阅读尽量屏蔽了无关的视觉元素，代表 了最好的中文阅读体验。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/MQe89bgW-NnPuSwx1OWIc9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh5.googleusercontent.com/-p_MPS2n-oYk/Tvl5dyXsfWI/AAAAAAAAAao/PrnZbAli1Bk/s800/%2525E5%252585%2525A8%2525E5%2525B1%25258F.png" alt="" width="240" height="400" /&gt;&lt;/a&gt;&amp;nbsp;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh5.googleusercontent.com/-m1YWihDCztE/Tvl5d8v49AI/AAAAAAAAAak/QjGpwkK1y5E/s800/%2525E5%252585%2525A8%2525E5%2525B1%25258F3.png" alt="" width="240" height="400" /&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;百度手机浏览器WP7版单指滑动工具栏可以缩放页面，这也是动效的应用案例之一。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;strong style="margin: 0px; padding: 0px;"&gt;近距离交互&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;近距离交互是个人杜撰出来的词汇，意指实现近距离的设备与设备之间的交互，移动设备中数据可以像物品一样被随时随地的交换，包括用户的身份信息。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/wYLafo-J4LAPysOeKY_iTNMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-rC6twIdr0IE/Tvm3tMx2M9I/AAAAAAAAAeA/nxq_E7zxfRw/s800/133579154.jpg" alt="" width="480" height="396" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;摇手机换名片应用到LBS和重力感应，实现&amp;ldquo;碰撞&amp;rdquo;设备交互数据，如通讯录、照片和应用程序等等。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/2uu7_EqvrHcHrMBUITGRJ9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh5.googleusercontent.com/-M3Z51uMprxk/Tvm23gvRxdI/AAAAAAAAAds/ywhCwy68nCA/s800/mzl.mpfiwpmi.320x480-75.jpg" alt="" width="240" height="360" /&gt;&lt;/a&gt;&amp;nbsp;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/JPa-vjpxtn05Uasr44hZVNMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-OXKzOC9CieU/Tvm23kuE7WI/AAAAAAAAAdw/b-tE8UYy4RE/s800/mzl.kucbtsap.320x480-75.jpg" alt="" width="240" height="360" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;Square可以查找到周围的移动设备，发送支付清单，实现线上支付。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;&lt;a style="margin: 0px; padding: 0px; color: #21759b; text-decoration: none; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: dotted;" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://picasaweb.google.com']);" href="https://picasaweb.google.com/lh/photo/3QuYBs6ar78rvP3vdIQVzdMTjNZETYmyPJy0liipFm0?feat=embedwebsite"&gt;&lt;img style="margin: 15px 0px; padding: 8px; border: 1px solid #e9e9e9; height: auto; vertical-align: baseline; max-width: 600px; background-color: #ffffff; border-image: initial;" src="https://lh4.googleusercontent.com/-_qvTKTr3XoA/Tvmy1u6YdEI/AAAAAAAAAc4/ONdsCYISvCo/s800/google-wallet-how-it-work.jpg" alt="" width="480" height="212" /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;移动设备自带的NFC功能，包含用户各种卡类信息，从而可以取代用户的银行卡、饭卡、公交卡和门卡等等。&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;span style="font-size: 14px;"&gt;转自&lt;a href="http://daichuanqing.com/index.php/archives/3282"&gt;http://daichuanqing.com/index.php/archives/3282&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;&lt;img src="http://www.cnblogs.com/craig/aggbug/2522392.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/craig/archive/2012/05/28/2522392.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/craig/archive/2012/05/28/2522378.html</id><title type="text">Windows Phone APP的设计过程</title><summary type="text">原文http://ux.artu.tv/?p=192 译文http://www.mdong.org/?p=2232译者注： 原文的作者为Windows Phone Design Studio的设计师，虽然话语啰嗦，但是能够感受到许多Windows Phone设计完善过程中的细节。重要的一释疑是业内对Windows Phone开发环境封闭的以讹传讹，至少从app设计角度，Windows Phone的心态是开放的。并致力于提升产品创造的团队效率。思维方式不限于Windows Phone，同样适用于其它平台的产品参与者。–这里有一个我在使用的Windows Phone app的设计过程。其中许多设计</summary><published>2012-05-28T12:01:00Z</published><updated>2012-05-28T12:01:00Z</updated><author><name>craig</name><uri>http://www.cnblogs.com/craig/</uri></author><link rel="alternate" href="http://www.cnblogs.com/craig/archive/2012/05/28/2522378.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/craig/archive/2012/05/28/2522378.html"/><content type="html">&lt;p&gt;原文&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://ux.artu.tv/?p=192"&gt;http://ux.artu.tv/?p=192&lt;/a&gt; 译文&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.mdong.org/?p=2232"&gt;http://www.mdong.org/?p=2232&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; font-weight: bold; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;译者注：&lt;/strong&gt; 原文的作者为Windows Phone Design Studio的设计师，虽然话语啰嗦，但是能够感受到许多Windows Phone设计完善过程中的细节。重要的一释疑是业内对Windows Phone开发环境封闭的以讹传讹，至少从app设计角度，Windows Phone的心态是开放的。并致力于提升产品创造的团队效率。思维方式不限于Windows Phone，同样适用于其它平台的产品参与者。&lt;/p&gt;&lt;p&gt;&amp;ndash;&lt;/p&gt;&lt;p&gt;这里有一个我在使用的Windows Phone app的设计过程。其中许多设计过程阶段是传统的，我尝试从Windows Phone app特别的视角来阐释。&lt;/p&gt;&lt;p&gt;这篇文章是关于end-to-end的过程，所以会保持其高视角，并在下面的文章里详细的探索每一个步骤。比如，下周我们会从理念与概念开始，关于讲故事（storytelling）、草图（Sketching）、故事板（storyboard）与低保真原型(low fidelity prototype)。这篇文章会是系列内容的轴线。但是并不确定会不会基于反馈重新定义（refine）某些阶段，以及增加更多的示例。&lt;/p&gt;&lt;p&gt;图表自下向上读&amp;hellip;&amp;hellip;&lt;/p&gt;&lt;p&gt;&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.mdong.org/wp-content/uploads/2012/01/windows-phone-design-process-ch.png"&gt;&lt;img class="alignnone size-full wp-image-2256" style="margin: 0px 15px 18px 0px; padding: 0px; border: 5px solid #f1f1f1; height: auto; font-size: 14px; vertical-align: baseline; max-width: 100%; outline-width: 0px; background-color: transparent; border-image: initial;" title="windows-phone-design-process-ch" src="http://www.mdong.org/wp-content/uploads/2012/01/windows-phone-design-process-ch.png" alt="" width="551" height="1871" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;Windows Phone设计过程与其它的网站、移动app或任何设计没有本质不同。所有的设计师重视设计过程，用他们自有的方式调整、完善设计，并改变适用于每一个项目。没有项目是相同的，因此非常重要的是以指南（guidelines）理解设计过程而不是规则（rules）。保持灵活性（flexible）。&lt;/p&gt;&lt;p&gt;理解&amp;ldquo;设计&amp;rdquo;，设计不是按快门（one-shot）这类活动。你不能凭借一次尝试既确定设计，而是像创作雕塑作品，有一个迭代过程。艺术家拿到一组大理石，他们不会从细节开始，如眉毛、指甲或者头发。而是第一步先塑造整体的感觉，主要的体感与大块。接着第二步定义更多的特性区块，如手臂、胸、头与腿。随后有第三步、第四部与第五步。达到刻画小细节的程度需要经过许多步骤。用户体验设计同理。你不能从细节开始，最终会让你自食其果。应用程序流程（Application Flow）需要在视觉设计（Visual Design）前定义。我看到过许多类似事情的发生，他们尝试跳过一些步骤走捷径，而缺乏设计探索（design exploration）最终得到的是随后项目中的暴怒。&lt;/p&gt;&lt;p&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; font-weight: bold; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;应用主题（App Theme）&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;我们从应用主题开始。这个是第一个可能产生分歧的点。我只是知道应用主题对于创建接下来的阶段非常重要。我注意到当开始app设计过程我们通常有两个选择。1，已经有一个我们想做的、非常清晰的idea；2，我们有一个目标，基于现有的API与Web Service。但两个途径在我看来都是错的。如果你有一个清晰的idea，你知道你决定了自己与团队的解决方案，但还没有通过探索验证。如果你决定创建一个app基于现有的API或者Web Service，你会最变成另外一个Twitter、Yelp！或者Foursquare 客户端或者另一个从Yahoo获取数据的股票软件！金融或者另外一个从CNN获得内的RSS聚合器&amp;hellip;&amp;hellip;从Marketplace上搜索CNN你就知道我正在说什么。即使这些app有好的体验。相信我，他们无法突围或者为用户做出贡献。不要想APIs或者RSS Feeds。想想用户体验。所以替代的思路是&amp;rdquo;哇哦&amp;hellip;&amp;hellip;CNN的RSS Feed是可用利用的&amp;ldquo; &amp;rdquo;我们如何为用户在获得最新与关联且重要的新闻的体验做出贡献？&amp;rdquo;尽快思考这些，越早为自己与团队打开一个新世界的探索。不再是RSS阅读器，现在你有一个更高的目标，史诗般的任务来帮助用户获得更多关联且重要的新闻。因为对象是宽广的，解决方案是不具体的，这才是想要的点。你保持开放，所以你会探索并拥有革新的idea。替代基于APIs的思考，而基于体验思考，如跑步体验、进餐体验、航行体验，询问自己与团队，你如何为你的用户做出贡献提升体验。注意这并不是必要地意味着解决全部的体验&amp;hellip;&amp;hellip;它意味着只是解决X或Y部分的体验，用户趋向难以发现的地方或者你看到一个机会可以帮助用户发挥全部潜能。在随后的开发过程中，你会选择你会选择API或RSS Feed从任何源，但是起点一定不是技术解决方案。最流行的Twitter或Foursquare客户端都是成功的因为它们将体验放在第一位&amp;mdash;&amp;mdash;而不是API。&lt;/p&gt;&lt;p&gt;现在如果你已经有客户端的app服务于特定的产品服务，或你正在移植iPhone或Android app到Windows Phone，请做好准备，针对主题进行重新定义（refine）。在许多的情况下，受制于预算或委托人，你需要直接跳到信息架构（Information architecture）阶段。然而真诚地说，即便由委托人雇佣你移植一个iPhone/Android app到Windows Phone，请依然做好主题、理念与信息架构的重定义准备。事实上这不是一个坏消息，一旦你进入了信息架构与交互设计（Interation Design）阶段，会得到最好的Metro设计语言：Pivots、Panoramas、App Bar、List View、Typography、布局与动画。当从其它平台移植app，你的工作会变成：1，理解这些平台上的当前信息架构，并用Metro翻译它们到正确的屏幕、内容视图与导航。基本的事情是理解当从iPhone与Android迁移时，你不能迁移UI。你迁移的信息架构。通过思考与实践，你会预防错误的转化过程&amp;hellip;&amp;hellip;如当人们尝试从iPhone迁移返回按钮（通常是屏幕左上角的按钮）到Windows Phone&amp;hellip;&amp;hellip;你在Windows Phone上不需要一个屏幕上的返回按钮，因为我们有一个硬件的返回按钮。所以，遵循思考&amp;ldquo;迁移IA&amp;rdquo;比&amp;ldquo;迁移UI&amp;rdquo;要更合适。&lt;/p&gt;&lt;p&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; font-weight: bold; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;理念与概念（Ideation &amp;amp; Concept）&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;现在你有一个主题或者任务，到了为其产生idea的时间~理念与概念阶段非常有趣！&amp;mdash;&amp;mdash;就像是在玩游戏。头脑风暴（Brain storming）的游戏，草图游戏讲与讲故事的游戏。在这个部分有三个关键阶段：1，头脑风暴；2，探索；3，合并（Consolidation）。概况来说，在头脑风暴阶段你产生了大量的idea，在探索阶段你详细分析与研究许多idea（但不是全部），在合并阶段你决定哪些idea会继续向前变成app一部分。只有少数的idea会存活。&lt;/p&gt;&lt;p&gt;&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.mdong.org/wp-content/uploads/2012/01/ideation.png"&gt;&lt;img class="alignnone size-full wp-image-2236" style="margin: 0px 15px 18px 0px; padding: 0px; border: 5px solid #f1f1f1; height: auto; font-size: 14px; vertical-align: baseline; max-width: 100%; outline-width: 0px; background-color: transparent; border-image: initial;" title="ideation" src="http://www.mdong.org/wp-content/uploads/2012/01/ideation.png" alt="" width="551" height="194" /&gt;&lt;/a&gt; 完全自由的头脑风暴&lt;/p&gt;&lt;p&gt;这个阶段的目标是产生关联任务的大量idea，如&amp;ldquo;贡献酒店预订的体验&amp;rdquo;。想象力（Imagination）、妄想（delusion）与古怪（craziness）是在这个点上都是好的技巧。让自己有玩的心态，思路跳出思维框架。有需多具体的头脑风暴练习如Subject+Verbs+Objects与扩展思路的Alternate Worlds、Impossible Scenarios与In Other&amp;lsquo;s Shoes。我们会在下一篇文章讨论所提到的技术。这些游戏你可以与团队一起参与，如果你是独立开发者你可以跟朋友一起参与。这个阶段的目标不是强迫你疑虑&amp;ldquo;你如何build或编写这个或那个&amp;rdquo;。也不是关于这些东东长什么样。它是关于产生idea的。在接下来的几个阶段，这些idea会落地执行。后面，就像我们知道的，有百万个非常好的idea，但是只有一个或者两个会被恰当执行，并且成功。&lt;/p&gt;&lt;p&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; font-weight: bold; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;探索分析/审查/测试（Exploration Dissect/Inspect/Test Ideas）&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;在探索阶段你会得到头脑风暴中脱颖而出的idea，并需要了解更多关于这些idea的内容。你可以通过分析、审查与测试来达到目的。这个点idea刚刚出生，它们就是孩子，没有完全的发展或成熟。然而这些idea只是头脑风暴的一部分，也许许多疯狂的idea在头脑风暴过程中已经灭了&amp;mdash;&amp;mdash;但是有一些依然存在。你可以肯定会发现你或团队中其它人会坚信、接受并深深爱上这些idea&amp;mdash;&amp;mdash;他们的孩子。我冒险地说这不是好事情，但同时，你需要爱上已经确定的idea，这样你就可以把其它idea推得远远儿的。有些时候idea需要发展来完全的证明。如果你太快地放弃了一个idea，也许你会失去一个好的机会。幸运的是这个阶段我们有4个非常有用的工具，允许我们探索我们的idea并发现优秀的种子：草图、故事板、简易原型与讲故事。这些工具帮助开发人员与设计人员针对idea进行测试。&lt;/p&gt;&lt;p&gt;拥有草图能力可以帮助你维持更多的抽象概念。故事板可以帮助你像接近皮克斯或梦工厂动画师一样讲故事。你使用手绘与故事板展现idea的用户体验情景，如何通过app来提供帮助与做出贡献。这是一个可视化的方式。原型是一个全新世界可以探索，当前重心在简易原型。这里有几种方式：一个是通过纸张、便条、卡片与胶带建立模拟原型。你可以通过手动粘贴到画布上测试情景（scenarios） 来传达交互。这类简易模型需要一个向导与测试用户。这听起来像是落伍的活动。但是它真的不是&amp;hellip;&amp;hellip;它是非常严肃的。你会惊讶，你能在一张简易原型上用15~60分钟而不需要花一分钱，就可以收到许多反馈。在进一级的设计过程阶段不会使用简易原型，但在这个点，这是最佳选择。另外一个做简易原型的方式是使用Expression Blend（或者是Powerpoint或者其它的交互工具）。这个是Design Studio的Jared Potter第一次向我展示的复合数模技术。简单的说，你在纸上画草图、拍照、载入图像到Expression Blend，在头部的可点击区域增加透明按钮并关联导航栏。Done！他称这个是15分钟简易原型技术，我们会在下一篇文章中讲得更多。&lt;/p&gt;&lt;p&gt;&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.mdong.org/wp-content/uploads/2012/01/paperprototyping_compound1.jpg"&gt;&lt;img class="alignnone size-full wp-image-2244" style="margin: 0px 15px 18px 0px; padding: 0px; border: 5px solid #f1f1f1; height: auto; font-size: 14px; vertical-align: baseline; max-width: 100%; outline-width: 0px; background-color: transparent; border-image: initial;" title="paperprototyping_compound1" src="http://www.mdong.org/wp-content/uploads/2012/01/paperprototyping_compound1.jpg" alt="" width="550" height="411" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; font-weight: bold; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;整合产生决策 （Consolidation Make Decisions）&lt;/strong&gt; 从头脑风暴开始得到许多idea，经历自己与团队的探索&amp;hellip;&amp;hellip;在这里需要整合，非常好的idea会脱颖而出。这是一个决定哪一个idea会进入app的过程。有不同的练习会帮助你的团队缩减列表与基于优先级排序列表。这里的目标是移除尽可能多的不明确信息。这时，idea比起概念阶段进一步进化，并引发更多的用户情景（user scenarios）或者信息情景（information scenarios）。你需要带到下一个阶段的是一个基于优先级的情景列表。&lt;/p&gt;&lt;p&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; font-weight: bold; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;信息架构（Information Architecture）&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;信息架构阶段的目标是定义信息、任务与彼此之间的关系。用户所拥有的数字体验：信息与信息利用的潜力&amp;mdash;&amp;mdash;使用信息来帮助决策、获得关于某些事情的知识、产生信息。&lt;/p&gt;&lt;p&gt;&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://en.wikipedia.org/wiki/Information_Architecture"&gt;信息架构&lt;/a&gt;是一个完整的学科。信息架构的目标是制定信息规则。&lt;/p&gt;&lt;p&gt;在理念与概念阶段产生的用户情景包括不定型的信息，如名字、日期、价格、图像、温度范围-在信息架构阶段你会带着不定型的信息并传递为结构化的信息。一次尝试是不可能完成的，它需要经历多个过程。&lt;/p&gt;&lt;p&gt;我们有两个非常有用的工具可以帮助我们定义信息框架：应用程序流程表单（Application Flow charts）与低保真原型（Low Fidelity Prototyping）。&lt;/p&gt;&lt;p&gt;&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.mdong.org/wp-content/uploads/2012/01/ia.png"&gt;&lt;img class="alignnone size-full wp-image-2245" style="margin: 0px 15px 18px 0px; padding: 0px; border: 5px solid #f1f1f1; height: auto; font-size: 14px; vertical-align: baseline; max-width: 100%; outline-width: 0px; background-color: transparent; border-image: initial;" title="ia" src="http://www.mdong.org/wp-content/uploads/2012/01/ia.png" alt="" width="384" height="263" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;所以在信息架构进行第一次尝试，并通过创建Flow charts进行测试。这里有不同成熟度等级，主要是从任务流程到具体屏幕+内容视图+导航表单。记得经典软件工程的Flow charts吗？这就是app flow charts，它只是一个可视化术语，我们专注在用户流程（user flow）、体验（experience）与交互设计（Interaction design）。一旦你拿到一个flow chart，你就可以尝试讲述用户情景（user scenarios）的故事。你会获得反馈与idea，用来重定义信息架构，并返回完善AI文档。这时你可以反复通过创建较高仿真的flow chart进行测试。flow charts渐渐地变得详细，从简单的任务flow到屏幕展示内容视图、导航。我不称之为高端的flow charts线框图（wireframes），确切的说是低保真框架。&lt;/p&gt;&lt;p&gt;另外一个工具是低保真原型（low fidelity prototypes）。在这个点纸质原型依然有用，因为低成本。无论如何，flow charts会渐渐地更高保真。你需要打印这些app flow chart并把类似的放在一起（不再是草稿、而是打印材料）或使用Jared在Expression Blend的原型技术，用拍摄的原型图像替代，把app flow程序呈现在屏幕上。&lt;/p&gt;&lt;p&gt;在最后你会有一个独立的IA文档，包括组织化的信息、可靠的成组flow charts与基于app flow的低保真原型。&lt;/p&gt;&lt;p&gt;我注意到的一件事情是，创建Windows Phone Design Process chart后，它在IA文档接近35%的高度，占有同样高度的是Interaction Design（下一阶段）。这些chart不代表在项目中占有同样的时间，但是我要说它着实正确的思考了IA应有的时间。如果你明确IA，会更加游刃有余。&lt;/p&gt;&lt;p&gt;最近的几个星期，我们有一篇特别的文章会关于Windows Phone apps的信息框架。&lt;/p&gt;&lt;p&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; font-weight: bold; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;交互设计（Interaction Design）&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;我们已经定义了信息架构，也就是说目标用户可以使用这些信息。现在我们开始针对性制作用户界面。&lt;/p&gt;&lt;p&gt;交互设计是什么：创建一组用户界面与用户体验元素，用来验证良好的信息架构与用户完成信息关联的任务。我们希望在这个阶段达到的效果是传递信息与任务最大化的潜力发生。即使IA可能是刚刚完善，如果交互设计不能完全执行，这时信息中发生的事情就不会完全正确地在app中体现、用户也不能完成他们想要的任务。&lt;/p&gt;&lt;p&gt;依照我的观点，交互设计默认是信息与任务的过滤器（filter）。它定义的不是信息也不是任务，而是一个工具。交互设计（或用户界面）是在用户与信息之间的中间人。用其它的方式描述，用户界面（交互设计的最终形式）应该是从有罪直到证明无罪，我想这个概念关联了许多Metro法则要点：信息是展示的核心，不是用户界面。它是决定一个好（坏）设计定义的重要因素，无关用户界面层是薄、无形或者笨重。我们不谈论视觉设计，只是交互设计：用户基于现在发生的关系如何面对信息与任务交互。&lt;/p&gt;&lt;p&gt;如果我们没有一个Windows Phone Metro设计语言可用，这时我们需要从零开始弄明白交互隐喻。在未来的文章里我会谈论如何推动Metro，并给出一些idea与如何基于Metro革新，这篇文章里会重点定义交互设计与开箱即用（out-of-box）的Windows Phone Metro设计语言。&lt;/p&gt;&lt;p&gt;设计模式（Design Patterns），可靠的帮助翻译信息架构到Metro控件。信息架构与任务会赋予Pivots、Pages与Panoramas以生命。信息层与架构会赋予内容视图（Content Views）以生命。信息与信息、任务与任务、信息与任务的关系会赋予导航栏（Navigation）以生命。IA文档的所有内容会翻译到明确的Windows Phone控件中。最后不会出现歧义。&lt;/p&gt;&lt;p&gt;&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.mdong.org/wp-content/uploads/2012/01/converttaskstoscreens.png"&gt;&lt;img class="alignnone size-full wp-image-2247" style="margin: 0px 15px 18px 0px; padding: 0px; border: 5px solid #f1f1f1; height: auto; font-size: 14px; vertical-align: baseline; max-width: 100%; outline-width: 0px; background-color: transparent; border-image: initial;" title="converttaskstoscreens" src="http://www.mdong.org/wp-content/uploads/2012/01/converttaskstoscreens.png" alt="" width="461" height="475" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;让我们回顾，基于IA文档，选择Windows Phone已有的设计模式，例如：search、maps、email、playlists或people hub的Contact cards。这时，如你没有找到一个完整的设计模式，或者根本不能满足你的IA需求。那么你可以定制一个接近或者创建全新的设计模式。当定制或创建自有设计模式，你有三个好的工具：1，Windows Phone设计网格；2，不同尺寸标准的Typography来传达结构化信息；3，Metro控件。当然，这三个不是所有你可以可用的武器，但它们是最基本的。相信&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://msdn.microsoft.com/en-us/library/hh202879(v=VS.92).aspx"&gt;Windows Phone用户体验指导（UX Guidelines）&lt;/a&gt;会cover到你的安排。&lt;/p&gt;&lt;p&gt;我提议通过设计模式来设计Windows Phone app。这不是唯一的设计Windows Phone Metro app的方式。像我们前面提到的，我们会在随后的文章里谈论关于推动Metro的设计模式，但在这篇文章重心在Windows Phone Metro语言设计。如果我们明确，从我的观点，我们可以创建自有的设计模式，可能一点都不像Metro控件库只是隐喻接近（但仍然基于Metro设计法则）。&lt;/p&gt;&lt;p&gt;你可以在&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://go.microsoft.com/fwlink/?LinkId=196225"&gt;Photoshop format（ListView_PSD.psd）找到许多列表视图设计模式，全景板图（Panorama_PSD.psd）以及其它控件&lt;/a&gt;。我们会延伸更多的内容。&lt;/p&gt;&lt;p&gt;&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.mdong.org/wp-content/uploads/2012/01/panoramapatterns_thumb.png"&gt;&lt;img class="alignnone size-full wp-image-2249" style="margin: 0px 15px 18px 0px; padding: 0px; border: 5px solid #f1f1f1; height: auto; font-size: 14px; vertical-align: baseline; max-width: 100%; outline-width: 0px; background-color: transparent; border-image: initial;" title="panoramapatterns_thumb" src="http://www.mdong.org/wp-content/uploads/2012/01/panoramapatterns_thumb.png" alt="" width="550" height="110" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.mdong.org/wp-content/uploads/2012/01/selectdesignpatterns.png"&gt;&lt;img class="alignnone size-full wp-image-2250" style="margin: 0px 15px 18px 0px; padding: 0px; border: 5px solid #f1f1f1; height: auto; font-size: 14px; vertical-align: baseline; max-width: 100%; outline-width: 0px; background-color: transparent; border-image: initial;" title="selectdesignpatterns" src="http://www.mdong.org/wp-content/uploads/2012/01/selectdesignpatterns.png" alt="" width="535" height="504" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;经过选择设计模式，定制并创建设计模式，你基本上设计了app。听起来很简单！其实不是，事实上只是选择了正确的设计模式，定制了它们的工作区块。我发现Windows Phone设计工作室投入了超过2年加工与展开Windows Phone体验与UI。设计模式是非常灵活与广泛的。经过在Windows Phone Design Day回顾将近200个app，我相信它们当中90%使用已有的设计模式与定制设计模式。当我开始我在设计工作室的工作，我对Metro并不熟悉，我的印象是它很漂亮但所有app都看起来很像。现在我在这里写给你的是关于再利用（re-using）已有的设计模式设计整个app做出改变？是的！我印象里6个月前，在Windows Phone中所有的都是Pivot与Panorama时代。但是我发现经过6个月，许多Windows Phone app比仅使用一个Pivot或Panorama更丰富。所有的事情是相通的。这三种类型的屏幕依次主导了app中无限量布局的可能性。这是app之间区别的地方。定制Panorama面板的可能性、Pivot页面的无限量。Windows Phone app使用的Metro设计语言可以非常丰富与独特。像&amp;ldquo;如果背景不是黑色就不是Metro&amp;rdquo;的迷信不是真的。请查看&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://kruzeniski.com/2012/my-favorite-metro-apps/"&gt;Mike K的这篇文章&lt;/a&gt;或者&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.core77.com/blog/mobile/fast_track_to_the_mobile_app_design_challenge_winners__21317.asp"&gt;Core77的Windows Phone设计辩论&lt;/a&gt;。&lt;/p&gt;&lt;p&gt;其中一件重要的事情是以不同的格式生产大量设计模式：Photoshop、Illustrator、Expression Design与XAML。现在，市面上没有大量的设计模式，所以推荐使用手机当前的内置，同时我们这边也在大量工作更多的格式将会投入使用。&lt;/p&gt;&lt;p&gt;返回开始，设计模式的选择、定制与创造阶段会呈现在线框图（Wireframes）。线框图是灰度图。不是色彩的！没有品牌&amp;hellip;&amp;hellip;也没有panorama背景！这些线框图理想情况下是由Expression Design、Visio、Photoshop与Illustrator创建（提醒我们应该提供Visio格式的设计模式）。&lt;/p&gt;&lt;p&gt;&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.mdong.org/wp-content/uploads/2012/01/wireframes_small1.png"&gt;&lt;img class="alignnone size-full wp-image-2252" style="margin: 0px 15px 18px 0px; padding: 0px; border: 5px solid #f1f1f1; height: auto; font-size: 14px; vertical-align: baseline; max-width: 100%; outline-width: 0px; background-color: transparent; border-image: initial;" title="wireframes_small" src="http://www.mdong.org/wp-content/uploads/2012/01/wireframes_small1.png" alt="" width="550" height="243" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;我们已经准备转移到下一个交互设计阶段：定义动画风格与UI控件规格。实际上，这些概念会跟随之前选择的设计模式。最后，设计模式在这个语境（context）是交互设计模式，而不只是视觉设计模式。&lt;/p&gt;&lt;p&gt;动画风格会帮助我们基于线框图指明，会有动画出现在从A到B屏幕的转化过程（旋转风格），何时显示列表项目的详细内容（飞出飞入Continuum）。动画是Windows Phone app的重要部分，所以我们设计使用的动画风格的要点规格时会非常挑剔。与此同时，UI控件规格同样需要基于线框图，所以开发人员知道当创建一个app时，键盘类型需要基于输入的用户体验。或者当有通知（notifications），我们需要显示内容A、B、C通知消息内容的规则，通知在哪里会带你进入app。对于Loaders会发生同样的事情&amp;hellip;&amp;hellip;我们需要一个%的loader还是一个等待光标？&lt;/p&gt;&lt;p&gt;在这个阶段的最后，针对完整的app，会有可靠的一组线框图，由开箱即用的定制与自主创建的设计模式驱动。这些线框图会包括动画风格与UI控件规格。准备下一阶段：视觉设计！&lt;/p&gt;&lt;p&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; font-weight: bold; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;视觉设计（Visual Design）&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;目前为止，你会想：什么，到最后才有视觉设计？！。像我之前提到的，设计过程（任何事物）不是线性的。要是像我一样，我会开启Expression Design（你可能会使用Photoshop或Illustrator）我会把额外的事情丢一边并开始工作，我喜欢这样，用我喜欢的工具并开始app设计。没有草稿、没有线框图，只是漂亮或纯粹的视觉震撼！&amp;mdash;&amp;mdash;许多视觉设计师想的就是这个味儿（就像工程师直接跳到Visual Studio开始敲代码！）&lt;/p&gt;&lt;p&gt;我必须承认比起一个交互设计师我更是一个视觉设计师。我肯定会依靠它看起来如何引导自己，所以我在项目的初期被视觉设计所吸引，但是我必须控制自己并记住有一个设计过程如何我跳过了，我的设计最终会非常漂亮但是不能忠实地表现app如何工作的信息架构与交换设计需求。也就是说，我们知道看起来受欢迎与我们都做过在过程的早期被客户询问发送给他们app的设计。明确开始的视觉设计是徒劳无功（虽然有些客户喜欢说要的就是这个）但是更像是&amp;ldquo;售卖设计&amp;rdquo;。&lt;/p&gt;&lt;p&gt;尽管我们喜欢信息架构与交互设计，为用户、商业决策制定者或市场管理者，然而一图胜于千张AI（an image is worth a 1000 pages of IA）。一组漂亮的Windows Phone app会帮助人们购买这个app与产生更多购买，给团队boss的进度报告会看起来漂亮。其实就是这样。所以当IA没有完全确定或交互设计被定义时，视觉设计引导人们在项目早期，最好的想象并最终实现。许多次人们会想这个愿景是最终的产品。但事实不是，这只是试图展示了我们方向在哪里。问题既是团队或客户信奉这个早期的视觉设计做为方向。期望应该被规定，这样在随后项目中就不会失望，因为它后于IA与交互设计，你可以完全的认识到视觉设计。&lt;/p&gt;&lt;p&gt;所以，现在我们有IA与交互设计明确时间来做许多有趣的视觉设计活动，像定义调色板（color palette），设计自定义图标、背景、整合品牌到我们的体验与设计live tiles。&lt;/p&gt;&lt;p&gt;&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.mdong.org/wp-content/uploads/2012/01/cityescapebranding.png"&gt;&lt;img class="alignnone size-full wp-image-2253" style="margin: 0px 15px 18px 0px; padding: 0px; border: 5px solid #f1f1f1; height: auto; font-size: 14px; vertical-align: baseline; max-width: 100%; outline-width: 0px; background-color: transparent; border-image: initial;" title="cityescapebranding" src="http://www.mdong.org/wp-content/uploads/2012/01/cityescapebranding.png" alt="" width="550" height="707" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;你是否知道有一个有关设计的经典对话关于是否开发人员应该做设计？自始至终，对于这点我认为一个开发人员即使没有正式在设计方面训练可以成功的做到。信息架构是一个系统化与结构、逻辑驱动的学科。我个人认为开发人员有正确的思维模式明确IA。交互设计需要更多的体验，这是交互设计在过程中擅长的地方，但是一个开发人员沿着设计模式，我想他肯定可以做正确。这个阶段的挑战在于当前的设计模式缺乏与恰当的工具来实现方法、挑战，这增加对没有正式设计训练的人们的困难程度。最后，视觉设计阶段，我想你最好雇佣训练有素的图形视觉设计师。虽然有相当数量的设计教程与有版权的图标、图像与其它元素，但它与雇佣一个训练有素的设计师绝不一样。我希望我们可以在后面的文章，提供给开发人员许多实用的技巧，将基于素材的视觉设计元素变得更好。&lt;/p&gt;&lt;p&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; font-weight: bold; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;Redlines and Greenlines&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;什么是Redlines？什么又是greenlines？！简单的问题。他们是交互体验的蓝图。就像是建筑的蓝图，你可以在上面看到楼梯平面图、侧视图、建筑正面，通过标注尺寸，门有多大、窗户有多大、墙的厚度、水管通道经过的地方、电源出口坐标、楼梯有多高、楼梯采用的材质、涂料颜色等等&amp;hellip;&amp;hellip;在交互设计我们同样有我们的蓝图称作红线。我不确定为什么它们是红色而不是品红&amp;hellip;&amp;hellip;但是我们想是因为红色是经常看到的颜色，容易跳出来，所以UI标识尺寸容易读。屏幕上的redlines显示了一个app不同屏幕，顶部不同成串的测量。这些数字定义了外边距（margin）、内边距（padding）、元素的大小与短暂元素如状态栏。为什么我们需要redlines？我通过Expression Blend就可以解决问题！&lt;/p&gt;&lt;p&gt;很久前在设计过程中我们没有Expression Blend。我知道这会引发一个很长的讨论，所以我在个系列保留了对这个设计工具的细节。我会说不管怎样，对于设计师控制UI到不论谁拿到XAML格式的UI，redlines都是最好的表现技巧。这个人可能叫做整合者，另外一个用XAML或Blend的设计师或开发人员。不论是什么情况，拿到设计与设计app的人不是同一个人。团队仍然可以工作。所以这个人需要一个方式用XAML产生UI与redlines帮助实现。通过redlines就没有歧义，但是如果这个按钮是30&amp;times;150像素，距离屏幕左边24像素，距离顶部427像素，这时这些尺寸就是位置。不需要讨论。在过去，没有redlines，设计师会设计网站并转换JPG素材（不要使用JPG、只用PNG、没有压缩）给其他人产生HTML与CSS。这个过程会破坏设计，结果会与最初想象不同。Redlines表现了&amp;ldquo;契约&amp;rdquo;，一个当事人双方都同意写好的文档！我们会在未来的文章讨论更多的redlines与如何创建。&lt;/p&gt;&lt;p&gt;Greenlines是什么？Windows Phone设计工作室定义为触摸区域。需要按钮会说，10像素的直径，但是它们的点击区域会是20像素（便于用户点击）。Greenlines指明这些点击区域，不论它们匹配的物体大小。Greenlines与Redlines传递不同的信息。&lt;/p&gt;&lt;p&gt;&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.mdong.org/wp-content/uploads/2012/01/redline.png"&gt;&lt;img class="alignnone size-full wp-image-2254" style="margin: 0px 15px 18px 0px; padding: 0px; border: 5px solid #f1f1f1; height: auto; font-size: 14px; vertical-align: baseline; max-width: 100%; outline-width: 0px; background-color: transparent; border-image: initial;" title="redline" src="http://www.mdong.org/wp-content/uploads/2012/01/redline.png" alt="" width="480" height="335" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;a style="border-width: 0px; margin: 0px; padding: 0px; color: #743399; font-size: 14px; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;" href="http://www.mdong.org/wp-content/uploads/2012/01/greenline.png"&gt;&lt;img class="alignnone size-full wp-image-2255" style="margin: 0px 15px 18px 0px; padding: 0px; border: 5px solid #f1f1f1; height: auto; font-size: 14px; vertical-align: baseline; max-width: 100%; outline-width: 0px; background-color: transparent; border-image: initial;" title="greenline" src="http://www.mdong.org/wp-content/uploads/2012/01/greenline.png" alt="" width="480" height="335" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;strong style="border-width: 0px; margin: 0px; padding: 0px; font-size: 14px; font-weight: bold; vertical-align: baseline; outline-width: 0px; background-color: transparent; border-image: initial;"&gt;最后（The End）&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;这个是一个高视角的流程总览，在下面的一周，我们会从细节开始。&lt;/p&gt;&lt;p&gt;下一篇： 理念与概念 ideation&amp;amp;Concept&lt;/p&gt;&lt;p&gt;讨论头脑风暴（brainstorming）方法，草图（sketching）、简易原型（paper prototyping）与讲故事（storytelling）。&lt;/p&gt;&lt;img src="http://www.cnblogs.com/craig/aggbug/2522378.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/craig/archive/2012/05/28/2522378.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/craig/archive/2012/05/28/2522239.html</id><title type="text">Android 应用程序界面设计建议</title><summary type="text">与 iOS 相比，Android 系统界面存在各种不协调，应用界面本身缺乏统一的规范。虽然 Android 的开放性为应用的自主发挥带来了最大的可能性，但如果系统本身能够提供标准的范例，也未必是一件坏事，毕竟许多应用并不一定需要独创的界面。从 Android 4.0 开始，系统界面在一致性上有了许多改善，那么 Android 应用的界面应该如何设计？如果你仔细观察 Google 近期的一系列应用上的设计，应该能发现在一些指导性的要点，而这些设计也正在被第三方应用采用。Android 应用不应该成为 iOS 应用的翻版，那么它应该是什么样子？androiduipatterns 网站针对 Andr</summary><published>2012-05-28T11:56:00Z</published><updated>2012-05-28T11:56:00Z</updated><author><name>craig</name><uri>http://www.cnblogs.com/craig/</uri></author><link rel="alternate" href="http://www.cnblogs.com/craig/archive/2012/05/28/2522239.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/craig/archive/2012/05/28/2522239.html"/><content type="html">&lt;p&gt;&lt;a style="color: #d14836; text-decoration: underline; outline-style: none;" href="http://www.ifanr.com/65085/android-ics1" rel="attachment wp-att-65109"&gt;&lt;img class="aligncenter  wp-image-65109" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="Android-ICS1" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/Android-ICS1.jpg?9f13f7" alt="" width="549" height="375" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;与 iOS 相比，Android 系统界面存在各种不协调，应用界面本身缺乏统一的规范。虽然 Android 的开放性为应用的自主发挥带来了最大的可能性，但如果系统本身能够提供标准的范例，也未必是一件坏事，毕竟许多应用并不一定需要独创的界面。从 Android 4.0 开始，系统界面在一致性上有了许多改善，那么 Android 应用的界面应该如何设计？如果你仔细观察 Google 近期的一系列应用上的设计，应该能发现在一些指导性的要点，而这些设计也正在被第三方应用采用。&lt;/p&gt;&lt;p&gt;Android 应用不应该成为 iOS 应用的翻版，那么它应该是什么样子？&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.androiduipatterns.com/2011/12/how-should-android-apps-look-like_16.html" target="_blank"&gt;androiduipatterns 网站&lt;/a&gt;针对 Android 应用的界面设计提出了一些规范性的建议，值得参考。&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;主界面&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;应用的主界面（起始界面）应该是什么样子？看下面这个规范图。&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/def_screen1" rel="attachment wp-att-65087"&gt;&lt;img class="aligncenter size-full wp-image-65087" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="def_screen1" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/def_screen1.png?9f13f7" alt="" width="336" height="400" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;什么应用使用这样的起始界面呢？看这三个例子： Aldiko，Evernote 和 Google+。&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/landing-page" rel="attachment wp-att-65090"&gt;&lt;img class="aligncenter size-full wp-image-65090" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="landing page" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/landing-page.jpeg?9f13f7" alt="" width="501" height="253" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;分界面&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;进入应用的分界面之后如何设计，看下面这个范例。&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/def_screen2" rel="attachment wp-att-65091"&gt;&lt;img class="aligncenter size-full wp-image-65091" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="def_screen2" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/def_screen2.png?9f13f7" alt="" width="368" height="400" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;上面一行是操作栏：最左边是应用图标（或许包括后退键），点击回到起始界面；中间部分主要考虑于应用协调的配色；最右边是当前情景下可进行的操作。&lt;/p&gt;&lt;p&gt;看下面的例子&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/second-page" rel="attachment wp-att-65092"&gt;&lt;img class="aligncenter size-full wp-image-65092" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="second page" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/second-page.jpeg?9f13f7" alt="" width="330" height="256" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;列表界面&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;应用可能需要处理大量的数据，而列表则是将数据规则化呈现的一种方式。列表界面应该足够清晰，为用户提供一个好的概览，同时，列表界面的操作栏应该允许用户对列表进行单项或多项操作。&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/def_screen3_1" rel="attachment wp-att-65093"&gt;&lt;img class="aligncenter size-full wp-image-65093" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="def_screen3_1" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/def_screen3_1.png?9f13f7" alt="" width="400" height="331" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;两个比较好的范例是 Aldiko 和 Google Mail。需要注意的是，列表的选择框通常是在左边，但是在 Aldiko 中，文件夹图标在左边非常突出，于是 Aldiko 选择框放在了右边，达到界面上的一种平衡。&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/list" rel="attachment wp-att-65094"&gt;&lt;img class="aligncenter size-full wp-image-65094" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="list" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/list.jpeg?9f13f7" alt="" width="499" height="362" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;载入列表&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;应用可能需要处理大量的信息，比如 Twitter 的时间线。对于用户来说，这意味着列表长度几乎是无尽的。目前，许多应用已经采用了比较通用的处理方法，当下滑到列表已缓冲条目下部的边界时，自动加载更多的信息。&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/def_screen3_4" rel="attachment wp-att-65095"&gt;&lt;img class="aligncenter size-full wp-image-65095" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="def_screen3_4" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/def_screen3_4.png?9f13f7" alt="" width="324" height="400" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;下面是两个例子: Android Market 和 Twitter。&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/neverending-list" rel="attachment wp-att-65096"&gt;&lt;img class="aligncenter size-full wp-image-65096" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="neverending list" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/neverending-list.jpeg?9f13f7" alt="" width="529" height="360" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;长按&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;对某个单项信息进行操作，一种交互方式是长按。这也许不是最明显的操作，但是节省屏幕空间，也很符合&amp;ldquo;情景菜单&amp;rdquo;的理念。&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/def_screen3_3" rel="attachment wp-att-65097"&gt;&lt;img class="aligncenter size-full wp-image-65097" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="def_screen3_3" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/def_screen3_3.png?9f13f7" alt="" width="400" height="303" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;下面的三个例子：Aldiko，Astro 文件管理器和 Google+。&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/long-press" rel="attachment wp-att-65098"&gt;&lt;img class="aligncenter size-full wp-image-65098" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="long press" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/long-press.jpeg?9f13f7" alt="" width="525" height="243" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;多选操作&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;对列表进行多选操作，最好在列表上的项目一侧增加选择栏，如下图：&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/def_screen3_2" rel="attachment wp-att-65099"&gt;&lt;img class="aligncenter size-full wp-image-65099" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="def_screen3_2" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/def_screen3_2.png?9f13f7" alt="" width="331" height="400" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;当你选定了多个项目后，屏幕下方给出操作栏。&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/multi-select" rel="attachment wp-att-65100"&gt;&lt;img class="aligncenter size-full wp-image-65100" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="multi select" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/multi-select.jpeg?9f13f7" alt="" width="525" height="363" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;标签&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;从 Android 4.0 开始，系统进一步突出了分类标签。在顶部操作栏的下面，通常会有一个标签栏，你可以点击或者左右滑动，如下图&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/def_screen4" rel="attachment wp-att-65101"&gt;&lt;img class="aligncenter size-full wp-image-65101" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="def_screen4" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/def_screen4.png?9f13f7" alt="" width="320" height="306" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;Android Market 和 Google+ 是两个例子&lt;/p&gt;&lt;p&gt;&lt;a style="color: #0052aa; text-decoration: none; outline-style: none;" href="http://www.ifanr.com/65085/tab" rel="attachment wp-att-65102"&gt;&lt;img class="aligncenter size-full wp-image-65102" style="margin: 0px auto; padding: 0px; border: 0px solid #cccccc; text-align: center; display: block; max-width: 600px; border-image: initial;" title="tab" src="http://cdn.ifanr.cn/wp-content/uploads/2011/12/tab.jpeg?9f13f7" alt="" width="520" height="367" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p&gt;虽然 Google 并没有在界面上给出太多限制，但是随着 Android 平台的发展，应用界面逐渐形成一套统一的规则和界面应该是一个趋势。这是否意味着一切应用必须遵循规范呢？那倒也未必。比如 Path 的界面，就未必符合任何平台的既成规范。如果你有开创性的界面，而且能够保证易用性，不妨去大胆创新，否则，遵循现有的良好规范可能会让你少走些许弯路。&lt;/p&gt;&lt;img src="http://www.cnblogs.com/craig/aggbug/2522239.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/craig/archive/2012/05/28/2522239.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/craig/archive/2012/05/28/2522215.html</id><title type="text">移动开发中HTML5能否替代本地程序？</title><summary type="text">现在越来越多的公司进入到移动互联网这个领域，选择HTML5做跨平台的解决方案，还是针对不同的平台开发，这是一个十分艰难的选择。早期的技术选型很重要，稍有不慎，后患无穷，是超前使用HTML5，还是稳妥地针对性开发，或者两者折中？随着移动设备越来越先进，对HTML5的支持度越来越高，我们进军移动领域的时候，都会遇到一个问题，是选择HTML5和还是Native(用原生 代码编写的本地程序)？HTML5的前景无疑是诱人的，一句“Write once, run anywhere”就可以秒杀一切。笔者最近两年来对HTML5与Native有较为深入的研究，觉得两者之间不能仅仅是二分法来选择，还要根据企业自身</summary><published>2012-05-28T11:46:00Z</published><updated>2012-05-28T11:46:00Z</updated><author><name>craig</name><uri>http://www.cnblogs.com/craig/</uri></author><link rel="alternate" href="http://www.cnblogs.com/craig/archive/2012/05/28/2522215.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/craig/archive/2012/05/28/2522215.html"/><content type="html">&lt;div style="line-height: 25px; color: #2c2c2c; font-family: Arial, Helvetica, simsun, u5b8bu4f53; text-align: left; background-color: #feffff;"&gt;&lt;div&gt;现在越来越多的公司进入到移动互联网这个领域，&lt;strong&gt;选择HTML5做跨平台的解决方案，还是针对不同的平台开发，这是一个十分艰难的选择&lt;/strong&gt;。早期的技术选型很重要，稍有不慎，后患无穷，&lt;strong&gt;是超前使用HTML5，还是稳妥地针对性开发，或者两者折中？&lt;/strong&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;随着移动设备越来越先进，对HTML5的支持度越来越高，我们进军移动领域的时候，都会遇到一个问题，是选择HTML5和还是Native(用原生 代码编写的本地程序)？HTML5的前景无疑是诱人的，一句&amp;ldquo;Write once, run anywhere&amp;rdquo;就可以秒杀一切。笔者最近两年来对HTML5与Native有较为深入的研究，觉得两者之间不能仅仅是二分法来选择，还要根据企业自身的情况、团队的构成、公司的战略以及产品的特点来综合选择。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;HTML5的发展前景我无疑是非常看好的，各大公司也不遗余力的推动，目前主流的三大智能机操作系统iOS、Android和WIndows Phone都已经支持大部分的HTML5特性。而移动设备硬件军备竞赛也为HTML5扫清硬件障碍。按照现在的发展速度，我判断是在三年以内甚至更快，移动设备运行HTML5将会完全没有压力，无论是标准还是硬件。现在主流的智能机已经配置双核浏览器和1G及以上的内存，今年再出智能机没这个配置你都不好意思发布了。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;&lt;strong&gt;谈谈HTML5&lt;/strong&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;1.HTML5可以让你摆脱对平台的依赖，用户打开浏览器，直接就可以访问你的应用，而不需要经过各种Store的审核。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;2.实时更新，通常平台的审核都需要七个工作日左右的时间，如果你发布之后发现问题怎么办？Web方式就不存在这种问题。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;3.Write once, run anywhere?&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;这是多少程序员的梦想，也曾经是Java让人心动的地方，但真正做过跨平台解决方案的人都知道，这只是一句口号而已，跨平台没那么容易玩转的。没 错，HTML5可以实现Write once, run anywhere，但我们总不能写一个Hello World来run anywhere吧。不同平台有自己的特性，不同平台用户也有自己的操作习惯，如果你想讨好所有人，也就意味着你无法讨好任何人。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;4.减少开发工作量或者让开发变得更简单？&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;对老板来说，这是一个非常诱人话题，因为工作量的减少就意味着节省更多的钱，没有老板不喜欢用更少的钱办更多的事。而且目前一个非常大的问题是，移动设备开发人员特别是iOS开发人员非常不好找，因为技术好的都自己做应用了，人家自己也能赚个月薪上万甚至更多，为什么要进你的公司？怎么说也是自己的事业，拥有无限可能，还可以充分享受自由。但如果可以充分利用HTML5，那么我们就可以招聘Web前端的开发人员来构建移动应用，这样就不愁招人的有问题。因为在许多人的眼里，HTML5/CSS/Javascript都是没多大技术含量的东西，实在找不到人，找些实习生学学也就会了。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;但问题是，工作量真的会减少吗？技术门槛真的那么低么？答案是NO！&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;我曾经花了半年的时间去开发一个基于HTML5的移动框架，用来模拟Native应用，让HTML5应用看起来尽可能看起来像本地应用，注意：是 像。这有点像jTouch，但不一样的是，它能和Native程序很好地交互，并且能调用本地资源等等特性。但最后结果确不是那么令人满意，比如 HTML5在动画切换的时候，有时候候会有一些莫名其妙的问题，当然你可以告诉我把动画效果关了，但这看起来很死板，最后我不得不关闭某些动画。而用Objective-c编写程序就没这么多事了，几句简单的代码可以实现很酷的动画，用HTML5需要更多的代码，甚至根本无法实现。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;而且移动设备上的HTML5开发对开发人员的技术有非常高的要求，不是一般的Web前端人员能解决的，通常拥有这样技术的人才，工资水平也不会比Native开发人员低多少。如果你仅仅是要开发一个移动设备上的网站，这会简单很多，但如果你希望模拟Native应用，并且拥有较高的效率和优雅的用户体验，这就很有技术含量了。不要小看Javascript这类Web开发语言，通常我的看法是越简单的语言越会体现出技术人员的水平，特别是规划设计能力。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;5.其它问题，资源调用的限制，比如说在iOS中有Javascript运行不能超过15秒的限制，不能调用本地硬件设备(如相机等)，无法使用推送服务等。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;&lt;strong&gt;如何选择？&lt;/strong&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;是否这样，我们就不要选择HTML5了呢？我在前面说过：&amp;ldquo;要根据企业自身的情况、团队的构成、公司的战略以及产品的特点来综合选择&amp;rdquo;，我最近在关于HTML5讨论的微博上也有谈到：&amp;ldquo;HTML5是战略性方向，Facebook和Google已经布局，Google Mobile在iPhone上的体验可以媲美Native。基本上Native+Web App可以秒杀多数应用，如果不愿意受制于各种Store，单独的Web App也是一个不错的方向。对于游戏类和对硬件环境依赖严重的应用，只能是是Native&amp;rdquo;，相关链接：摘录微博&amp;mdash;&amp;mdash;对移动互联网的一些看法。仅管有这样那样的问题，但HTML5是一种趋势，在未来三至五年，HTML5将会取代很多本地应用，但就像多年前我们一直在谈B/S架构取代C/S架构一样，这需要一个过程。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;通常在HTML与Native之间，我们有三种选择&amp;mdash;&amp;mdash;HTML5、Native App以及HTML5+Native，HTML5就是指纯Web的移动应用，用户需要打开浏览器，然后输入应用的网址访问。Native指的是基于特定平台开发的应用。Native+HTML5实际上是一种加壳的方式，将HTML5用和浏览器封装起来，但这对用户是不可见的，用户没有任何异物感，和Store上下载的App没有什么两样。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;就我个人而言，我是比较推崇HTML5+Native的，这种加壳的方式，可以让你享受Native与HTML5的双重好处，但缺点是对技术含量要 求较高。当然我这里指的不是简单地把HTML5封装到一个浏览器里面，Native与HTML5会有许多的交互，实际上这有点像混合硬盘，我们即便享受 SSD的快速，但我们又想获得机械硬盘的高性价比。我认为在5-10年内，这都会是一种不错的解决方案，当HTML5和硬件发展到一定水平之后，我们再完全转向HTML5成本也会非常低的。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;&lt;strong&gt;如何做？&lt;/strong&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;假定现有一个对本地环境依赖不那么严重的项目，如微博客户端，各种社交美食甚至LBS应用，我们都可以采用HTML5+Native。如图所示，我 们可以将核心的代码Core层用封装起来，这个代码和平台无关，主要是业务逻辑以及和Shell的交互，代码用Web语言编写。在Core层上我们再根据不同的移动平台制作不同的UI。最后我们将上述两层放到各平台的Shell中，这个Shell主要是由浏览器来完成工作，当然还包括一些硬件操作和读取本地资源，如GPS、重力感应、相机调用、地图、推送通知或者IAP等。&lt;img style="border-style: initial; max-width: 100%; margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 0px; border-width: 0px;" src="http://img8.ph.126.net/ujTkR3X0Ckj9TKijX367oA==/1175720977737679448.png" alt="移动开发中HTML5能否替代本地程序？ - 乂乂 - 一个人，一支烟  &amp;middot;~～" /&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;我们可以把Web的升级部分部署到服务器上，用户运行App后，App会向服务器讲求获取最新的Web程序并下载运行，这样可以达到跳过各种 Store的更新审核，达到快速更新的目的。而且假如用户无法访问互联网，我们可以让用户使用上一个版本的程序，不会像纯Web App那样要求用户一定要联网。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;&lt;strong&gt;好处&lt;/strong&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;1.用户可以离线使用&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;2.更新下载量及少，可以全部更新，也可以选择替换部分文件&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;3.代码很安全安全，众所周知Web应用有一个很大的问题就是代码安全的问题，但现在我们可以将Web代码全部加密，本地应用解密后再运行，大大的提供了代码的安全性。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;4.可以通过浏览器作为中介充分利用Native的好处，比如说可以使用GPS、照相机、本地相册、读取本地联系人，也可以使用推送功能等，最重要的是，某些Web无法实现的功能，我们可以利用Native来实现。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;5.跨平台，多数核心代码不用重写，Javascript的代码用得好的话，在许多地方都可以用到，包括移动应用、移动网站、PC网站、各种浏览器 插件，甚至可以用WebKit封装作为跨平台的应用程序。诚然，这种方式并非完全跨平台，但这样也足以减少很多工作量了，特别是后期的维护。而且完全的跨平台是没有意义的，不同平台有自己的风格，为了更好的用户体验，界面层还是需要针对性开发的。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;&lt;strong&gt;坏处&lt;/strong&gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;我觉得最大的坏处是技术难度高，如果仅仅是简单的浏览器封装几个HTML文件，那没什么技术难度，但如果要打造一个系统级的东西，这就很有技术难度了。这要求有人要了解三个主流平台的浏览器特性，通晓Native程序的开发，要精通HTML5/CSS3/Javascript，最重要的是，要有较强 的架构设计能力。&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;如果要再找一个坏处的话，就是它不能满足所有的需要，它并不能代替Native，但我认为他可以替代大部的Native。&lt;/div&gt;&lt;div&gt;适合我们吗？&lt;/div&gt;&lt;div&gt;&amp;nbsp;&lt;/div&gt;&lt;div&gt;首先从产品的角度考虑，你的产品是否严重依赖于本地环境，比如说图像处理和华丽的游戏之类的。第二要考虑的是你的技术团队的构成，如果你们的团队有一个能解决这些问题的牛人，并且有一些清通Web前端的人，那我觉得你可以考虑用这种方式。技术选型非常重要，稍有不慎，后患无穷。第三个要考虑你们公司的战略，对HTML5未来发展的看法，愿意在移动互联网上付出多少代价，是否愿意做前瞻性的事，是否愿意在前期投入较多的资源，是否允许试错等等。&lt;/div&gt;&lt;div&gt;【from&amp;nbsp;涂雅 http://www.cnbeta.com/articles/173420.htm】&lt;/div&gt;&lt;/div&gt;&lt;img src="http://www.cnblogs.com/craig/aggbug/2522215.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/craig/archive/2012/05/28/2522215.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/craig/archive/2012/05/27/2519719.html</id><title type="text">关闭删除休眠文件</title><summary type="text">1.点击桌面左下角开始，找到“命令提示符”2.右键单击“命令提示符”3.选择“以管理员身份运行”4.关闭休眠功能请输入：powercfg -hibernate off 5.打开休眠功能请输入：powercfg -hibernate on6.如果关闭休眠功能，开始菜单电源选项里面就没有休眠可选了。右键单击系统盘盘符，选择“属性”，在弹出的窗口中点击“磁盘清理”按钮，随后系统将开始扫描系统，等待扫描完毕后，系统将会弹出“磁盘清理”的对话框，在弹出的窗口中向下拉动右侧的滑动块，找到并选中“休眠文件清理器”，最后单击“确定”按钮就可以彻底清理掉休眠文件所占用的空间了。</summary><published>2012-05-26T16:36:00Z</published><updated>2012-05-26T16:36:00Z</updated><author><name>craig</name><uri>http://www.cnblogs.com/craig/</uri></author><link rel="alternate" href="http://www.cnblogs.com/craig/archive/2012/05/27/2519719.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/craig/archive/2012/05/27/2519719.html"/><content type="html"> 1.点击桌面左下角开始，找到&amp;#8220;命令提示符&amp;#8221;&lt;br /&gt;2.右键单击&amp;#8220;命令提示符&amp;#8221;&lt;br /&gt;3.选择&amp;#8220;以管理员身份运行&amp;#8221;&lt;br /&gt;4.关闭休眠功能请输入：powercfg -hibernate off &lt;br /&gt;5.打开休眠功能请输入：powercfg -hibernate on&lt;br /&gt;6.如果关闭休眠功能，开始菜单电源选项里面就没有休眠可选了。&lt;br /&gt;&lt;br /&gt;右键单击系统盘盘符，选择&amp;#8220;属性&amp;#8221;，在弹出的窗口中点击&amp;#8220;磁盘清理&amp;#8221;按钮，随后系统将开始扫描系统，等待扫描完毕后，系统将会弹出&amp;#8220;磁盘清理&amp;#8221;的对话框，在弹出的窗口中向下拉动右侧的滑动块，找到并选中&amp;#8220;休眠文件清理器&amp;#8221;，最后单击&amp;#8220;确定&amp;#8221;按钮就可以彻底清理掉休眠文件所占用的空间了。&lt;br /&gt;&lt;br /&gt;&lt;img src="http://www.cnblogs.com/craig/aggbug/2519719.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/craig/archive/2012/05/27/2519719.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/craig/archive/2012/04/26/2470965.html</id><title type="text">抱歉，进程“android.process.acore”已停止运行  -  解决方法</title><summary type="text">1. 系统设置--应用程序-全部-（上面最左边）---联系人存储--清除数据。 android.process.acore报错就没了2.恢复出厂设置------##你应该是用第三方软件恢复通讯录了吧？我一开始也和你一样的问题，用谷歌自带的同步就没问题了,使用谷歌自带备份，目前不要使用第三方软件备份</summary><published>2012-04-26T02:14:00Z</published><updated>2012-04-26T02:14:00Z</updated><author><name>craig</name><uri>http://www.cnblogs.com/craig/</uri></author><link rel="alternate" href="http://www.cnblogs.com/craig/archive/2012/04/26/2470965.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/craig/archive/2012/04/26/2470965.html"/><content type="html">&lt;div&gt; 1. 系统设置--应用程序-全部-（上面最左边）---联系人存储--清除数据。 android.process.acore报错就没了&lt;img src="http://static.bbs.xiaomi.com/static/image/smiley/default/loveliness.gif" alt="" border="0" /&gt;&lt;/div&gt;&lt;p&gt;2.恢复出厂设置&lt;br /&gt;&lt;/p&gt;&lt;p&gt;------&lt;/p&gt;&lt;p&gt;&lt;div&gt;##&lt;/div&gt;&lt;p&gt;你应该是用第三方软件恢复通讯录了吧？我一开始也和你一样的问题，用谷歌自带的同步就没问题了,&lt;div&gt;使用谷歌自带备份，目前不要使用第三方软件备份&lt;/div&gt;&lt;/p&gt;&amp;nbsp;&lt;/p&gt;&lt;img src="http://www.cnblogs.com/craig/aggbug/2470965.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/craig/archive/2012/04/26/2470965.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/craig/archive/2012/04/26/2470888.html</id><title type="text">android壁纸路径/目录</title><summary type="text">内容一直在纠结一个问题，就是通过快图裁剪而设置为的壁纸，到底路径在哪，它存在哪呢？而且这个路径会不会随着设置壁纸的次数越来越多而越变越大？为此，还特地联系快图开发者，他们也不清楚，只是说找到一个安卓的内存接口，并不清楚具体位置；今 天无意中终于发现了壁纸的路径，而且不止快图，系统自带在system\\app\\Launcher2Mifavor.apk内的壁纸，也是首先缓存在 此位置，继而显示的；所以设置好壁纸后，即使卸载快图，或者修改Launcher2Mifavor.apk，壁纸依旧不会改，因为那个缓存路径文件一直 在，清理垃圾软件也不会清理这个地方...</summary><published>2012-04-26T01:24:00Z</published><updated>2012-04-26T01:24:00Z</updated><author><name>craig</name><uri>http://www.cnblogs.com/craig/</uri></author><link rel="alternate" href="http://www.cnblogs.com/craig/archive/2012/04/26/2470888.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/craig/archive/2012/04/26/2470888.html"/><content type="html">&lt;div&gt;&lt;div&gt;                      内容一直在纠结一个问题，就是通过快图裁剪而设置为的壁纸，到底路径在哪，它存在哪呢？而且这个路径会不会随着设置壁纸的次数越来越多而越变越大？&lt;/div&gt;&lt;p&gt;为此，还特地联系快图开发者，他们也不清楚，只是说找到一个安卓的内存接口，并不清楚具体位置；&lt;br /&gt;&lt;/p&gt;&lt;p&gt;今 天无意中终于发现了壁纸的路径，而且不止快图，系统自带在system\\app\\Launcher2Mifavor.apk内的壁纸，也是首先缓存在 此位置，继而显示的；所以设置好壁纸后，即使卸载快图，或者修改Launcher2Mifavor.apk，壁纸依旧不会改，因为那个缓存路径文件一直 在，清理垃圾软件也不会清理这个地方；文件不是很大，路径：/data/data/com.android.settings/files/wallpaper&lt;br /&gt;就是这个没有扩展名的文件，删除之后，手机壁纸会自动变成system\\framework\\frameworik-res.apk内drawe-hdpi下的defaultwallpaper                  &lt;br /&gt;&lt;br /&gt;转自&lt;a href="http://bbs.waptw.com/topic/threads/view/fid:65/tid:4904931/"&gt;天坛&lt;/a&gt;&lt;br /&gt;&lt;/p&gt;&lt;/div&gt;&lt;img src="http://www.cnblogs.com/craig/aggbug/2470888.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/craig/archive/2012/04/26/2470888.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/craig/archive/2012/01/16/2323575.html</id><title type="text">火狐代理fanqian访问youtube等和谐网站</title><summary type="text">通过空间的管理面板看到很多人来到这个空间是通过搜索引擎被这篇文章的标题吸引过来的,为了一篇过期的不能再使用的技术劳烦大家,很过意不去.为了让大家不乘兴而来,败兴而归,我向大家介绍目前我在用的方法: 1) 申请一个google账号,如果已经有了则跳过此步骤.推荐创建一个Gmail账号http://mail.google.com,界面右下角选择"创建账户" 2) 登录google后,访问https://reader.google.com,中文账户默认状态下在google产品大全中是看不到这个的,需手工录入,切记是https不是http 3) 进入Google阅读器后,左上角&amp;q</summary><published>2012-01-16T06:44:00Z</published><updated>2012-01-16T06:44:00Z</updated><author><name>craig</name><uri>http://www.cnblogs.com/craig/</uri></author><link rel="alternate" href="http://www.cnblogs.com/craig/archive/2012/01/16/2323575.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/craig/archive/2012/01/16/2323575.html"/><content type="html">&lt;div&gt;通过空间的管理面板看到很多人来到这个空间是通过搜索引擎被这篇文章的标题吸引过来的,为了一篇过期的不能再使用的技术劳烦大家,很过意不去.为了让大家不乘兴而来,败兴而归,我向大家介绍目前我在用的方法:&lt;br /&gt; &lt;br /&gt; 1) 申请一个google账号,如果已经有了则跳过此步骤.推荐创建一个Gmail账号http://mail.google.com,界面右下角选择"创建账户"&lt;br /&gt; 2) 登录google后,访问https://reader.google.com,中文账户默认状态下在google产品大全中是看不到这个的,需手工录入,切记是https不是http&lt;br /&gt; 3) 进入Google阅读器后,左上角"Google 阅读器"图标下放有"添加订阅"按钮,点击,在输入框中录入"GFW Blog",点击"添加"按钮,在出现的列表中第一个就应该是它的订阅链接,在我写这篇文章的时候,订阅数是7896,点击"订阅"按钮即可.&lt;br /&gt; 4) GFW Blog中有很多fanqian的教程和工具,自行搜索,注意在阅读页面(右半部分)上方有"N个新条目"和"所有条目"的链接,如果新条目中找不到你需要的信息,请切换至"所有条目".&lt;/div&gt;&lt;p&gt;&amp;nbsp;转自：&lt;/p&gt;&lt;div&gt;http://apps.hi.baidu.com/share/detail/368383&lt;/div&gt; &lt;br /&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;img src="http://www.cnblogs.com/craig/aggbug/2323575.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/craig/archive/2012/01/16/2323575.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry></feed>
