<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="css/rss.xslt"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>互联网产品设计</title><link>http://www.vvwww.com/</link><description>最全的互联网产品设计分析运营资源站</description><generator>RainbowSoft Studio Z-Blog 1.8 Walle Build 100427</generator><language>zh-CN</language><copyright>Copyright 2008 - 2011 互联网产品设计. 京ICP备09078686号 .  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-27336784-1']);  _gaq.push(['_setDomainName', 'vvwww.com']);  _gaq.push(['_trackPageview']);  (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();</copyright><pubDate>Wed, 02 May 2012 22:41:57 +0800</pubDate><item><title>iOS手机客户端设计灵感，UI设计参考网站</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/mobile_app269/</link><pubDate>Mon, 16 Apr 2012 22:46:49 +0800</pubDate><guid>http://www.vvwww.com/post/mobile_app269/</guid><description><![CDATA[<p><b style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; "><font face="黑体 " style="outline-style: none; outline-width: initial; outline-color: initial; line-height: 1.5em; "><font size="4" style="outline-style: none; outline-width: initial; outline-color: initial; line-height: 1.5em; ">ICON集结点：</font></font></b><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><a target="_blank" id="url_1" style="outline-style: none; outline-width: initial; outline-color: initial; text-decoration: none; color: rgb(0, 112, 175); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " href="http://weloveicons.com/">http://weloveicons.com/</a><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><span id="att_38638" style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; "><br style="outline-style: none; outline-width: initial; outline-color: initial; " /><img border="0" title="Click Here To EnLarge" style="outline-style: none; outline-width: initial; outline-color: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " alt="" src="http://cc.cocimg.com/bbs/attachment/thumb/Fid_23/23_93978_46c276ce9d1587e.jpg" /></span><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><a target="_blank" id="url_2" style="outline-style: none; outline-width: initial; outline-color: initial; text-decoration: none; color: rgb(0, 112, 175); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " href="http:">http://iconfever.com/</a><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><span id="att_38658" style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; "><br style="outline-style: none; outline-width: initial; outline-color: initial; " /><img border="0" title="Click Here To EnLarge" style="outline-style: none; outline-width: initial; outline-color: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " alt="" src="http://cc.cocimg.com/bbs/attachment/thumb/Fid_23/23_93978_c707a43c743c0c9.jpg" /></span><span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; ">&nbsp;</span><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><a target="_blank" id="url_3" style="outline-style: none; outline-width: initial; outline-color: initial; text-decoration: none; color: rgb(0, 112, 175); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " href="http:">http://www.iosinspires.me/</a><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; ">&nbsp;</span><span id="att_38659" style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; "><br style="outline-style: none; outline-width: initial; outline-color: initial; " /><img border="0" title="Click Here To EnLarge" style="outline-style: none; outline-width: initial; outline-color: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " alt="" src="http://cc.cocimg.com/bbs/attachment/thumb/Fid_23/23_93978_04e44d8ec103bc0.jpg" /></span><span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; ">&nbsp;</span><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><b style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; "><font size="4" style="outline-style: none; outline-width: initial; outline-color: initial; line-height: 1.5em; "><font face="黑体 " style="outline-style: none; outline-width: initial; outline-color: initial; line-height: 1.5em; ">UI相关：</font></font></b><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><a target="_blank" id="url_4" style="outline-style: none; outline-width: initial; outline-color: initial; text-decoration: none; color: rgb(0, 112, 175); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " href="http:">http://www.appgala.com/</a><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><span id="att_38657" style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; "><br style="outline-style: none; outline-width: initial; outline-color: initial; " /><img border="0" title="Click Here To EnLarge" style="outline-style: none; outline-width: initial; outline-color: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " alt="" src="http://cc.cocimg.com/bbs/attachment/thumb/Fid_23/23_93978_27f9e20e3bcbf53.jpg" /></span><span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; ">&nbsp;</span><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><a target="_blank" id="url_5" style="outline-style: none; outline-width: initial; outline-color: initial; text-decoration: none; color: rgb(0, 112, 175); margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " href="http://www.appsites.com/">http://www.appsites.com/</a><br style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; " /><span id="att_38660" style="outline-style: none; outline-width: initial; outline-color: initial; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; "><br style="outline-style: none; outline-width: initial; outline-color: initial; " /><img border="0" title="Click Here To EnLarge" style="outline-style: none; outline-width: initial; outline-color: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " alt="" src="http://cc.cocimg.com/bbs/attachment/thumb/Fid_23/23_93978_4e4231977095f0a.jpg" /></span><span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 14px; line-height: 24px; ">&nbsp;</span></p><p>&nbsp;</p><p>转自：http://www.cocoachina.com/bbs/read.php?tid=96506&amp;page=1</p>]]></description><category>移动应用</category><comments>http://www.vvwww.com/post/mobile_app269/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=269</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=269&amp;key=56bdefb6</trackback:ping></item><item><title>iPhone App设计趋势分析</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss268/</link><pubDate>Mon, 09 Apr 2012 21:17:01 +0800</pubDate><guid>http://www.vvwww.com/post/rss268/</guid><description><![CDATA[<p>这篇文章有料。。做APP的朋友值得阅读参考。</p><p>&nbsp;</p><p>&nbsp;<span style="color: rgb(17, 17, 17); font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; line-height: 1.6em; text-align: justify; ">iPhone App Design Trends</span></p><div id="post-836" class="hentry p1 post publish author-%e6%b3%a2%e5%b8%8c%e7%b1%b3%e4%ba%9a category-design tag-iphone tag-%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf y2009 m11 d26 h22" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em; clear: both; "><div class="entry-content" style="margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0.4em; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; line-height: 1.6em; text-align: justify; color: rgb(68, 68, 68); "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">Smashing Magazine版权所有<br />作者：<a title="Smashing Magazine" href="http://www.smashingmagazine.com/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Smashing Magazine</a><br />译者：<a title="UCD翻译小组" href="http://ucdchina.com/topic/59" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">UCD翻译小组</a>，<a title="波希米亚" href="http://blog.b3inside.com/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">波希米亚</a><br />原文地址：&nbsp;<a title="iPhone App Design Trends" href="http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/</a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">在过去的两年里，你能想象的一些很烂的应用设计也入驻了优雅的<a href="http://www.testfreaks.cn/cell-phones/apple-iphone-3gs/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iPhone</a>。通过它周边的宣传，使得世界各地的设计者们都利用这个新的移动工具来一展身手。结果虽搞出了成千上万的iPhone应用，但通常不好用也不直观。然而有些设计师则是花费大量时间为创造更好用的界面而努力着（是的，这些都是好用且有创意的界面）。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">本文探究了如何让设计师利用图形元素和屏幕交互，<strong style="font: inherit; ">制作出易识别又易操控的iPhone应用</strong>。目的在于揭示iPhone应用设计的普遍趋势和设计方法&mdash;&mdash;请注意，这些未必是设计和可用性中的最佳观点。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">&nbsp;</p><h3 style="margin-top: 1em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0.3em; padding-left: 0px; font-size: 1.8em; font-weight: normal; color: rgb(0, 0, 0); ">1. 镜像iPhone原生界面元素</h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">&ldquo;告诉他们你要告诉他们的，去告诉他们，然后告诉他们你告诉过他们。&rdquo;（译者：作者在表达她当时的感受吧） 在你的应用中创建一套新的OS可能很有趣，但在移动设备上处理时，人们只想简明扼要。简明扼要的意思是，设计师得遵循OS的流程，创建一个无说明的应用，给最终用户去操作。镜像出用户熟悉的布局和界面元素可以节省时间和精力。所以这看起来是设计iPhone应用时的一个便利途径啊。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Facebook" href="http://www.facebook.com/apps/application.php?id=6628568379" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Facebook</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=284882215&amp;mt=8" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes Link</a>)<br />在新版Facebook 3.0中，你会发现这样一个栅格布局，用户可以通过左右滑动屏幕进入更多分类。因为它镜像了苹果的原生界面，所以用户根本不用再学如何使用。网页设计中存在类似方法：用户会预料到logo在左上角，导航也在上面，等等。Facebook把这它延续到了移动应用上，用大按钮可以轻松的被识别和点击。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-838" title="facebook" src="http://blog.b3inside.com/wp-content/uploads/2009/11/facebook.png" alt="facebook" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Where" href="http://www.where.com/carriers/iphone.php" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Where</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=281790044&amp;mt=8" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />Where使用了相同的概念，它允许用户通过左右滑动屏幕来获取更多信息。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-839" title="where" src="http://blog.b3inside.com/wp-content/uploads/2009/11/where.png" alt="where" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Tweetdeck" href="http://tweetdeck.com/beta/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Tweetdeck</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=318518757&amp;mt=8" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />Tweetdeck是用户界面设计中一个很好的例子。高亮显示的最近更新多吸引注意力啊。此应用能以归类或标签列表形式，在新窗口中显示更新。但不会替换掉一个已显示的对话菜单，它可以作为跳转到具体类目或清掉消息提醒的跳板。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-841" title="tweetdeck2" src="http://blog.b3inside.com/wp-content/uploads/2009/11/tweetdeck2.png" alt="tweetdeck2" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><h3 style="margin-top: 1em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0.3em; padding-left: 0px; font-size: 1.8em; font-weight: normal; color: rgb(0, 0, 0); ">2. 简化界面</h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">也许简化用户界面听起来像是个机械任务，但在用户界面设计背后又隐藏着什么呢？答案很简单：就是用户。用户需要什么？什么令他们感到友好和模糊？你如何提供他们所需的东西，以便不用时刻去关注那些重要的信息？</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">提到在小空间内展示大量核心功能，Facebook的第一版就做的非常到位。当然，这里指的是展示所有信息和拥有直观的界面。3.0与之相比，你会发现它使用&ldquo;跳板&rdquo;的方式来简化界面，既保持了直观又维护了功能。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/iphone-app-design-trends/facebook_animation.gif" alt="Facebook Animation in iPhone App Design Trends" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Flickr" href="http://www.flickr.com/photos/b3inside/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Flickr</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=328407587&amp;mt=8" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />Flickr 对功能、视觉设计和小屏幕移动设备显示这三者间平衡上的处理同样出色。试想之：Flickr的核心是什么？照片。它的用户或许不希望看到又大又笨的导航；他们想要的是照片。Flickr已经设法调整核心功能，去掉那些标题和该死的导航。事实上，很多导航元素已经在照片本身的交互上实现了。真是个既简单又聪明的办法。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-844" title="flickr" src="http://blog.b3inside.com/wp-content/uploads/2009/11/flickr.png" alt="flickr" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><h3 style="margin-top: 1em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0.3em; padding-left: 0px; font-size: 1.8em; font-weight: normal; color: rgb(0, 0, 0); ">3. 模拟硬件界面</h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">不少应用程序打破了传统iPhone界面的操作，利用它独特的手指手势进行控制。它们中一些是用户熟悉的硬件界面，光鲜亮丽的外表不禁让人回味起那种第一次点击的新鲜感。但应用程序不会因为你玩的多而变脏。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Convertbot" href="http://tapbots.com/convertbot/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Convertbot</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D308928075%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />Convertbot的轮盘让我们想起小学时候，不同的是它更具特色、更新颖、更有创意。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-845" title="convertbot" src="http://blog.b3inside.com/wp-content/uploads/2009/11/convertbot.png" alt="convertbot" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Little Snapper" href="http://www.realmacsoftware.com/littlesnapper/iphone/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Little Snapper</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D310591640%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes Link</a>)<br />Little Snapper模拟的就是一台普通数码单反的旋钮。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-846" title="littleSnapper" src="http://blog.b3inside.com/wp-content/uploads/2009/11/littleSnapper.png" alt="littleSnapper" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="iHandy Level" href="http://www.ihandysoft.com/carpenter/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iHandy Level</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D293621500%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes Link</a>)<br />iHandy Level的样子和功能都仿至一个真实好用的水平仪。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-medium wp-image-847" title="iHandy_level" src="http://blog.b3inside.com/wp-content/uploads/2009/11/iHandy_level-400x266.png" alt="iHandy_level" width="400" height="266" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Where To?" href="http://www.futuretap.com/home/whereto-en/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Where To?</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D314785156%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes Link</a>)<br />这个应用看起来像是属于奔驰车的。豪华的皮革、磨砂的按钮：上乘的技术。我们可以想象，每个按钮按下去都那么结实，都那么有力道。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-849" title="where_to" src="http://blog.b3inside.com/wp-content/uploads/2009/11/where_to.png" alt="where_to" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><h3 style="margin-top: 1em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0.3em; padding-left: 0px; font-size: 1.8em; font-weight: normal; color: rgb(0, 0, 0); ">4. 丰富、漂亮的列表视图</h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">当你对列表设计的最新趋势感到兴奋时，你已经被确诊为一位&ldquo;geek designer&rdquo;了。人们遇到一个列表时会做些什么？当然，只是略读。那怎样把人们决定什么有趣变得更轻松？没错，更多的视觉暗示！</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">基本上，用户通过寻找下一步的快照，来决定是否需要了解更多。而<strong style="font: inherit; ">又大又漂亮的按钮</strong>就是途径之一。通过色彩、图标和排版让人感觉这个大按钮背后隐藏着好多信息。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Delivery Status Touch" href="http://junecloud.com/software/iphone/delivery-status-touch.html" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Delivery Status Touch</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D290986013%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes Link</a>)<br />看看Delivery Status是怎样通过不同颜色的大按钮来区分不同品牌的。并用良好的排版建立起信息层次。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-850" title="delivery_status" src="http://blog.b3inside.com/wp-content/uploads/2009/11/delivery_status.png" alt="delivery_status" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Be Happy Now" href="http://www.mentalworkout.com/products/iphone-applications/be-happy-now/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Be Happy Now</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D321896701%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes Link</a>)<br />Be Happy Now的大按钮通过柔和的色彩体系与明亮清晰的字体传达&ldquo;be happy&rdquo;的主旨。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-851" title="beHappyNow" src="http://blog.b3inside.com/wp-content/uploads/2009/11/beHappyNow.png" alt="beHappyNow" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Next Read" href="http://www.squarewheelsoft.com/nextread/nextread.html" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Next Read</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D299379727%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />Next Read这个应用允许在朋友间分享图书。在这里所有书都是关于时下某一特定话题的，包括书名、封面、评分以及评论数。注意看每个导航选项的间隙和留白，它让这个区域更容易被点击。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-852" title="nextRead" src="http://blog.b3inside.com/wp-content/uploads/2009/11/nextRead.png" alt="nextRead" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Nike" href="http://www.nike.com/nikeos/p/nikewomen/language_tunnel/?" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Nike</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=301521403&amp;mt=8" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />Nike为女性开发了这个应用，精致的视觉元素和插画都很符合它的品牌。在设计上打破了传统界面的束缚，充分表达了品牌，不让用户为如何使用它而感到困惑。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-medium wp-image-853" title="nike" src="http://blog.b3inside.com/wp-content/uploads/2009/11/nike-400x300.png" alt="nike" width="400" height="300" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Borange" href="http://www.borange.com/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Borange</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D297643026%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />Borange是一款&ldquo;社交情况&rdquo;的应用，它可以帮你统筹与朋友们的约会。列表展示了很多信息：要一起出行的朋友，本地会议，并可以形象的表示哪个朋友有空。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-854" title="borange" src="http://blog.b3inside.com/wp-content/uploads/2009/11/borange.png" alt="borange" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><h3 style="margin-top: 1em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0.3em; padding-left: 0px; font-size: 1.8em; font-weight: normal; color: rgb(0, 0, 0); ">5. 分层的界面</h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">一些应用把界面设计成层，利用iPhone本身独有的特性让其固定，或垂直、水平滚动。这种方法有几个好处：</p><ol style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 2em; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.2em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: decimal; list-style-position: outside; list-style-image: initial; width: 520px; ">减少了必要的传统导航元素数量（即更少的按钮有助于避免界面混乱）</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.2em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: decimal; list-style-position: outside; list-style-image: initial; width: 520px; ">为用户获取信息提供了快速通道</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.2em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: decimal; list-style-position: outside; list-style-image: initial; width: 520px; ">有更多屏幕空间承载有用信息</li></ol><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Tweetie" href="http://www.atebits.com/tweetie-iphone/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Tweetie</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D296415944%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes Link</a>)<br />Tweetie利用层把具体信息传递给你每位Twitter好友。你看，所有信息都装在这一个屏幕里！</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-855" title="tweetie" src="http://blog.b3inside.com/wp-content/uploads/2009/11/tweetie.png" alt="tweetie" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Barnes &amp; Noble" href="http://www.barnesandnoble.com/iphone/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Barnes &amp; Noble</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=320214162&amp;mt=8" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />Barnes &amp; Noble让你可以快速的通过上面的层进入新商品，通过下面的层切换到更多分类。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-856" title="barnesandnoble" src="http://blog.b3inside.com/wp-content/uploads/2009/11/barnesandnoble.png" alt="barnesandnoble" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="USA Today" href="http://www.usatoday.com/iphone/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">USA Today</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewArtist?id=300669006" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />USA Today在它的图片一栏中对层做了细微改变：利用滑动面板显示信息区块。尽管第一眼看上去很乱，但能很容易跳过它。最有趣的部分在于，在每个面板里，都可以通过左右滑动来查看更多图片。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-857" title="usaToday1" src="http://blog.b3inside.com/wp-content/uploads/2009/11/usaToday1.png" alt="usaToday1" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="myPantone" href="http://www.pantone.com/pages/pantone/index.aspx" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">myPantone</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D329515634%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />我们何尝不希望色卡少一点？上面的拾色器就是一个层，你可以通过色彩范围、类别来取色，也可以通过滚动打开/关闭细节窗口。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-858" title="pantone" src="http://blog.b3inside.com/wp-content/uploads/2009/11/pantone.png" alt="pantone" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><h3 style="margin-top: 1em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0.3em; padding-left: 0px; font-size: 1.8em; font-weight: normal; color: rgb(0, 0, 0); ">6. 在列表中使用图标</h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">在小屏幕上，图标可给应用的可用性和导航性带来巨大提升。让我们通过几个应用的例子看看它的优势。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="iStudiez" href="http://www.istudiez.com/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iStudiez</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D310636441%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes Link</a>)<br />这个应用利用各种不同的教学用具图标，清晰地表达了应用的目的。通过这些具象的暗示，学生瞄一眼就知道今天发生了什么。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-860" title="istudiesz" src="http://blog.b3inside.com/wp-content/uploads/2009/11/istudiesz.png" alt="istudiesz" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Top Floor" href="http://www.taptapmobile.com/en/topfloor" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Top Floor</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D293259732%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes Link</a>)<br />Top Floor利用简单易识别的图标，快速引导用户进入他们选择的类别。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-861" title="topFloor" src="http://blog.b3inside.com/wp-content/uploads/2009/11/topFloor.png" alt="topFloor" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="New York Times" href="http://www.nytimes.com/services/mobile/iphone.html" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">New York Times</a><br />应用可以让你想做什么就做什么，是不是很不可思议哦？对于一个像纽约时报样的应用，用户必然有他喜欢的章节。你猜怎么着？纽约时报这样做：它让你自定义标签栏，把你喜欢的章节都加进来。拖动一个图标到标签栏即可。不过这样做也不是十全十美，在视觉呈现上打了折扣。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-862" title="wallStJournal" src="http://blog.b3inside.com/wp-content/uploads/2009/11/wallStJournal.png" alt="wallStJournal" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Filemaker" href="http://www.filemaker.com/products/bento/iphone.html" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Filemaker</a>(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D314638461%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />另一个漂亮图片的案例，说它好是因为图标的使用上不混乱、不混淆。设计师永远不要为了使用图标而使用图标。作为设计师，我们希望图标能够尽可能的反应出用户所选的内容。Filemaker，干的漂亮。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-863" title="filemaker" src="http://blog.b3inside.com/wp-content/uploads/2009/11/filemaker.png" alt="filemaker" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><h3 style="margin-top: 1em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0.3em; padding-left: 0px; font-size: 1.8em; font-weight: normal; color: rgb(0, 0, 0); ">7. 插图的使用</h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">依赖图形的应用程序越来越受欢迎，因为开发者试图让她们的应用与众不同。偶尔奏效，但不经常。越是传统的设计就越可能存在可用性问题。在推出一个&ldquo;有创意&rdquo;界面的产品前一定要进行可用性测试。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Magnetic Personalities" href="http://www.peopleoperatingtechnology.com/our-apps/magnetic-personalities/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Magnetic Personalities</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D321601898%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />这是个非常好的例子，看看如何让按钮变得不像标准按钮那么普通。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-864" title="magneticPersonalities" src="http://blog.b3inside.com/wp-content/uploads/2009/11/magneticPersonalities.png" alt="magneticPersonalities" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="SugarSync" href="http://www.sugarsync.com/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">SugarSync</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=288491637&amp;mt=8" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />这个界面可以轻松地走遵循传统列表视图的路线。但设计师没有这么做，而是通过一个漩涡将视觉连接在一起来传达这个应用。这很不寻常，同时需要花点时间来适应它。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-865" title="sugarsync" src="http://blog.b3inside.com/wp-content/uploads/2009/11/sugarsync.png" alt="sugarsync" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Mom Maps" href="http://www.mommaps.com/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Mom Maps</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D309570382%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />另一个使用插图取得成功的例子，它将很多概念都融入了这个应用。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-866" title="momMaps" src="http://blog.b3inside.com/wp-content/uploads/2009/11/momMaps.png" alt="momMaps" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><h3 style="margin-top: 1em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0.3em; padding-left: 0px; font-size: 1.8em; font-weight: normal; color: rgb(0, 0, 0); ">8. 使用手势</h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; ">经典的线性导航看上去很枯燥：一个按钮连一个按钮，来表现一堆东西的列表，或表现这样那样的交互。事实并非如此壮观，只是比喻一下。在公共事业的应用上使用有创意的交互可能性很大。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="Mover" href="http://infinite-labs.net/mover/?_coming_from=mover-plus-its" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">Mover</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D320907954%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />Mover列举了如何使用手势来分享联系方式、照片和书签。打开两个设备，把文件从这个共享到那个里。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-867" title="mover" src="http://blog.b3inside.com/wp-content/uploads/2009/11/mover.png" alt="mover" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="ABC Animals" href="http://www.criticalmatter.com/abc_animals/" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">ABC Animals</a>&nbsp;(<a title="iTunes Link" href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D292402752%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />这个应用寓教于乐。用手指在屏幕上书写字母是另一个通过触摸iPhone控制的例子。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-868" title="abcanimals" src="http://blog.b3inside.com/wp-content/uploads/2009/11/abcanimals.png" alt="abcanimals" width="318" height="478" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><a title="All Recipes" href="http://allrecipes.com/features/more/iphone.aspx" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">All Recipes</a>&nbsp;(<a title="iTunes Link" href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=299515267&amp;mt=8" style="color: rgb(2, 153, 255); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(243, 243, 243); background-position: initial initial; background-repeat: initial initial; ">iTunes link</a>)<br />此应用可以让你通过手势来混合众多元素，作为你的美餐。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0em; padding-right: 1em; padding-bottom: 1em; padding-left: 0em; color: rgb(17, 17, 17); width: 540px; "><img class="alignnone size-full wp-image-869" title="allRecipies" src="http://blog.b3inside.com/wp-content/uploads/2009/11/allRecipies.png" alt="allRecipies" width="320" height="460" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " /></p></div></div><p>&nbsp;</p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss268/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=268</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=268&amp;key=9dce4092</trackback:ping></item><item><title>为触屏手机而设计系列1——拇指操作的“热区/死角”与“控件尺寸”</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss267/</link><pubDate>Thu, 15 Mar 2012 21:35:11 +0800</pubDate><guid>http://www.vvwww.com/post/rss267/</guid><description><![CDATA[<p>&nbsp;<strong style="color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; font-weight: bold; ">挑战1：发展时间短，国内外的研究都尚处在探索阶段，充满未知和不确定。</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">触屏技术最早被应用到手机上要追溯到1999年（motorola A6188），至今虽然已有12年时间，但真正为手指操作的触屏界面设计带来革命性变化还是07年1月9日发布的iphone1代以及他的多点触摸技术。时至今日，不过4年时间，以苹果设计团队为先驱国内外相关研究领域，包括触摸的手势、触屏界面的规范、触摸的可用性研究等等，都还处在探索阶段，这也意味着有很多现有的东西都是建立在猜测和尝试基础上的，他们的成熟度也是有待时间检验的。这些东西包括国外的期刊文献和图书，甚至是苹果app开发官网上的信息、设计原则。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><strong style="font-weight: bold; ">挑战2：从鼠标键盘到手指，准确率问题、热区和死角的问题。</strong><br />触屏手机交互研究与PC交互的研究存在着质的变化。输入设备从鼠标键盘变成手指，一方面，操作的精准度上受到了挑战，在密集的信息处理上，用户常常会出现许多误操作；另一方面，手指操作所特有的&ldquo;死角和热区&rdquo;问题也是PC界面设计中不会面临的。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><strong style="font-weight: bold; ">挑战3：东西方生理指标和文化差异对现有设计原则的影响。</strong><br />即便是那些被证明了合理可行的理论，在飘扬过海来到中国后，能克服东西方生理指标和文化差异带来的影响吗？要知道，同样大小的手机对中国人的手和老外的手握持的稳定性而言也是可能存在差异的。所以，如何把成熟的西方知识拿来主义，进行更符合生理特征和民族文化的调整，是我们要面对的第三个挑战。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><strong style="font-weight: bold; ">挑战4：普通WAP/APP设计原则对淘宝（APP/WAP）的适用性。</strong><br />手机电子商务又是一个特殊的领域，我们面对海量决策信息与有限屏幕空间之间的矛盾，这是普通WAP网站或者APP应用极少会面对的严峻局面。如何将其他产品的触屏研究成果转化成更适合电子商务领域应用，是我们要进一步解决的问题。</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; "><strong style="font-weight: bold; ">1.2&nbsp;</strong><strong style="font-weight: bold; ">触屏手机界面设计一些前人的经验</strong></h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">《Tapworthy- Designing Great iphone Apps》Josh Clark&nbsp; 2010-6-25 （中文版：《触动人心&nbsp;<strong style="font-weight: bold; ">-</strong>设计优秀的iPhone应用》翻译者包季真 ）提到了iphone界面设计的两条原则&mdash;&mdash;<strong style="font-weight: bold; ">Rule of Thumb 和 The Magic Number is 44</strong>（见下图）。即，右利手触屏操作时的热区与死角（如下图），以及触及控件设计的合理尺寸为至少44pix。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><img alt="" width="569" height="306" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/111.jpg" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><strong style="font-weight: bold; ">对于这个研究结果，我们不难发现两个疑问&mdash;&mdash;</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><strong style="font-weight: bold; ">问题1</strong><strong style="font-weight: bold; ">：</strong>这个热区图和所谓的标准尺寸是怎么得来的，在书中并没有详细的叙述，是基于&ldquo;研究结果&rdquo;还是设计者自身的&ldquo;经验主义&rdquo;我们也不得而知。根据书中的描述和作者的专业背景推测，这些很有可能是作者在收集大量iphone界面案例后的自己的分析和经验总结。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><strong style="font-weight: bold; ">问题2</strong><strong style="font-weight: bold; ">：</strong>很多设计师在看完44pix这个数字后都很容易犯一个错误&mdash;&mdash;不同分辨率的屏幕所对应的44pix实际物理大小是有很大差异的。在Iphone3下，44pix约等于7mm ；在iphone4下，却不足6mm。书中的讨论背景是iphone3，所以需要设计师根据物理尺寸进行对应的换算。</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; "><strong style="font-weight: bold; ">1.3&nbsp;</strong><strong style="font-weight: bold; ">触屏手机界面设计</strong><strong style="font-weight: bold; ">一些前人的研究</strong></h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">Josh Clark也许是个经验主义者，那让我们重新审视这个44pix。事实上，iphone团队把触击控件的界面最小尺寸限定为44pix(7mm)并非是没有依据的。早在人机工效学的研究中，前人曾得出结论，认为用食指操作，触击范围在7mm左右比较合适；而用拇指操作，合适的触击范围需在9mm左右。为给设计师们提供较为准确的工学指标，对按键操作进行精密的实验设计必不可少。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><a style="color: rgb(69, 107, 149); " href="http://ued.taobao.com/blog/wp-content/uploads/2012/02/222.jpg"><img alt="" width="450" height="225" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/222.jpg" /></a></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">&nbsp;</p><h1 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; "><strong style="font-weight: bold; ">Part 2&nbsp;</strong><strong style="font-weight: bold; ">研究目的</strong></h1><ol style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">中国用户的单手拇指操作热区真的是这么分布的吗？</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">热区与死角的差异有多大？</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">那使用双手，食指操作还有没有热区和死角的差异呢？</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">热区和死角如果存在差异，7mm这个设计原则在屏幕的任何区域都适用吗？</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;单手拇指操作和双手食指操作对于控件尺寸的设计要求又有什么差异？</li></ol><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><strong style="font-weight: bold; ">&nbsp;<img alt="" width="485" height="452" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/333.jpg" /></strong></p><h1 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; "><strong style="font-weight: bold; ">Part 3&nbsp;</strong><strong style="font-weight: bold; ">研究理论基础</strong></h1><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; "><strong style="font-weight: bold; ">3.1 分析用户按键误操作成因</strong></h2><ol style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;没有击中按键（空击）</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">想按某个按键时却按到相邻的另一个按键上（错击）</li></ol><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">对于用户来说，第二种错误是更为致命的，这需要他花费更多的精力来纠正这一错误；而相对来说第一种情况就不那么严重了。因此在我们的实验设计中只取第二种情况为错误操作。</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; ">3.2&nbsp;实验情景</h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">考虑影响用户按键操作难易度的两大情景因素：一为用户的状态（静止、走动、公交车上等）；二为做按键操作使用的手指（食指、拇指等）。将这两个因素结合，正式实验中取两种最为常见的操作情景状态（均为单手操作）：静止时用食指操作、走动时用拇指操作。前者相对容易，后者较为困难。</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; ">3.3&nbsp;心理物理法&mdash;&mdash;恒定刺激法：</h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">本实验研究采用心理物理法中的恒定刺激法，也叫正误法、恒定法、次数法。它的特点是只采用少数几个刺激（一般是4&mdash;9个），且这几个刺激在整个测定阈限的过程中是固定不变的，主试把这几个刺激以随机的方式反复向被试呈现。用恒定刺激法测感觉阈限之前，先要进行预备实验，以选定刺激并确定各刺激呈现的顺序。所选刺激的最大强度应为每次呈现几乎都能被感觉到的强度，被感觉到的可能性最好在95%左右；所选刺激的最小强度应为每次呈现几乎都不能被感觉到的强度，被感觉到的可能性最好在5%左右。选定刺激范围以后，再在这个范围内选出4&mdash;9个间距相等的刺激。正式实验时，每种刺激强度呈现的次数不能少于20个，且呈现的次数要相等，呈现的顺序要随机排列。用恒定刺激法测绝对阈限时，绝对阈限的值可以根据操作定义由直线内插法或其他方法求得。恒定刺激法测差别阈限时，也可以用相同的方法求得差别阈限。</p><h1 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; "><strong style="font-weight: bold; ">Part 4&nbsp;</strong><strong style="font-weight: bold; ">实验规划</strong></h1><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; "><strong style="font-weight: bold; ">4.1&nbsp;</strong><strong style="font-weight: bold; ">实验对象与人群配比</strong></h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">由于本实验为基础研究，因此对于用户的要求不高，不一定非要淘宝用户。面向的对象可以是有潜在触屏手机使用能力的所有正常成年人。右利手为宜。在实验开始前，需对用户的手掌大小等尺寸进行测量，以选择手部尺寸适中的用户。详见国标《中国成年人人体尺寸》GB10000-88中的手部尺寸。采用被试间测试，初步定被试数量为40人左右，要求被试年龄在20岁以上，男女各半。</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; ">&nbsp;<strong style="font-weight: bold; ">4.2&nbsp;</strong><strong style="font-weight: bold; ">实验设计</strong></h2><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; "><strong style="font-weight: bold; ">自变量</strong></li></ul><ol style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">使用情景（2</strong><strong style="font-weight: bold; ">）：</strong>静止时用食指操作、走动时用拇指操作（被试间设计）</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">    <div align="left"><strong style="font-weight: bold; ">刺激呈现区域位置（16</strong><strong style="font-weight: bold; ">）：</strong>将手机屏幕划分为4*4的区域（被试内设计）</div>    </li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">可触击区域的大小（5</strong><strong style="font-weight: bold; ">）：</strong>设计5种可触击区域&mdash;&mdash;拇指7\8\9\10\11；食指5\6\7\8\9（实验为被试间设计，每种水平至少要求被试反应10次，则共要求被试反应16*5*10=800次。）</li></ol><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><a style="color: rgb(69, 107, 149); " href="http://ued.taobao.com/blog/wp-content/uploads/2012/02/444.jpg"><img alt="" width="505" height="278" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/2012-02-16_153253.jpg" /></a></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><img alt="" width="328" height="305" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/444.jpg" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">&nbsp;</p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; "><strong style="font-weight: bold; ">因变量</strong></li></ul><ol style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">触击正确率：</strong>在单个反应中，取被试正确击中目标刺激为结束，但只要触击次数大于1则认为反应错误。即，手指首次成功击中刺激红点的次数占红点出现总数的比率。</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">触击热区：</strong>在整个屏幕中，触击正确率显著高于其他部位的区域。</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">触击死角：</strong>&nbsp;在整个屏幕中，触击正确率显著低于其他部位的区域。</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">触击范围最小尺寸：</strong>特定手指在触击正确率均值达到95%及以上的最小尺寸。</li></ol><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; "><strong style="font-weight: bold; ">手机原始屏幕参数设置</strong></li></ul><ol style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">实验设备：iphone4手机3.5英寸屏幕</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">分辨率：640*960</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">物理尺寸：4.93*7.40CM，平均1cm有130个像素点左右</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">底色为灰色RGB（144，144，144）</li></ol><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><a style="color: rgb(69, 107, 149); " href="http://ued.taobao.com/blog/wp-content/uploads/2012/02/555.jpg"><img alt="" width="176" height="335" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/555.jpg" /></a></p><address style="font-style: normal; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">&nbsp;注：屏幕区域的划分和标记都是虚拟的，不直接呈现在屏幕上。一开始呈现给被试的仍是原始屏幕，而在后台刺激呈现和和数据处理时需要用到区域的概念。</address><address style="font-style: normal; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">&nbsp;</address><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; "><strong style="font-weight: bold; ">实验步骤</strong></li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">Step 1：指导与过后，计入实验参数设置。屏幕上部呈现文本框&ldquo;请输入参数&rdquo;，下面有一个输入框，要求可以输入数字，并且输入的数字可以被程序读取。按确认键进入正式实验。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">Step2：每次只展现一个红点，不会同时出现。要求被试尽可能快速地完成触击，但并非在考验被试的反应能力和时间，保持平和心态。拇指实验者在特定范围内正常步行速度（1-1.5m/s）。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">Step3：每个参数值有16&times;10次点击，耗时大约4-5min。共5轮，每轮之间可休息。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">step4：交由研究员截屏保存，再后期手工录入SPSS进行统计分析。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><a style="color: rgb(69, 107, 149); " href="http://ued.taobao.com/blog/wp-content/uploads/2012/02/6661.jpg"><img alt="" width="493" height="184" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/6661.jpg" /></a></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">&nbsp;</p><h1 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; "><strong style="font-weight: bold; ">Part 5&nbsp;</strong><strong style="font-weight: bold; ">单手&middot;拇指&middot;行走</strong><strong style="font-weight: bold; ">&nbsp;</strong><strong style="font-weight: bold; ">研究中的发现</strong></h1><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; "><strong style="font-weight: bold; ">5.1&nbsp;</strong><strong style="font-weight: bold; ">结论1：通过检验，《</strong><strong style="font-weight: bold; ">Tap Worthy</strong><strong style="font-weight: bold; ">》书中建议的右手拇指触击热区的合理性尚存在问题</strong></h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">为了验证这一理论，本实验近似取&ldquo;B1+B2+B3+C1+C2+C3+D1+D2+D3&rdquo;为检验区，定义为&ldquo;建议热区&rdquo;，其余区域定义为&ldquo;非建议热区&rdquo;。如果这种建议的&ldquo;热区&rdquo;的假设成立，那么&ldquo;建议热区&rdquo;与&ldquo;非建议热区&rdquo;应该存在正确率上的显著差异，并且这种差异在不同刺激参数值下都成立，在红点大小在7/8/9/10/11的情况下，建议热区的正确率都应该显著高于建议死角。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><a style="color: rgb(69, 107, 149); " href="http://ued.taobao.com/blog/wp-content/uploads/2012/02/777.jpg"><img alt="" width="501" height="330" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/777.jpg" /></a></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">但是，通过配对T检验，建议区正确率略高于非建议区，仅在参数值为<strong style="font-weight: bold; ">7</strong>的时候表现为差异显著，但在红点大小为8/9/10/11的时候，两个区域差异不显著。即这个建议热区的划分方式合理性存在一定的问题，意味着控件触击尺寸为8/9/10/11及以上的情况下，这种划分意义可能不大，两个区域基本不存在差异。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><img alt="" width="521" height="319" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/888.jpg" /></p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; "><strong style="font-weight: bold; ">5.2 结论2：实验发现更合理的右手拇指操作热区</strong></h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">我们猜测，在拇指自然弯曲且处在指肚触及的状态下，手持机的稳定性最佳，手指移动的灵活性也相对佳。所以我们模拟这种状态下手指触及的区域，大致呈现出一个&ldquo;扇环&rdquo;区域，在本实验中定义为&ldquo;探索热区&rdquo;，而其他区域为&ldquo;非探索热区&rdquo;。同理，如果这次探索的&ldquo;热区和死角&rdquo;的假设成立，那么&ldquo;探索热区&rdquo;与&ldquo;非探索热区&rdquo;应该存在正确率上的显著差异，并且这种差异在不同刺激参数值下都成立，在红点大小在7/8/9/10/11的情况下，建议热区的正确率都应该显著高于非建议热区。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><img alt="" width="474" height="268" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/999.jpg" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">结果，通过配对T检验，当红点大小为7/8/9/10时，探索区正确率均显著高于非探索区。差异随红点的变大而减弱，可能因为当红点增大到11后，触击定位变得更为简单，整体正确率都得到了提高，区域间的差异就消失了。较《tapworthy》所建议的操作热区，右侧通过我们探索得到的热区划分更为合理。尤其在控件尺寸大小被限定的前提下，放在热区与非热区的差异就会很大。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><img alt="" width="522" height="359" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/0000.jpg" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">&nbsp;</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; "><strong style="font-weight: bold; ">结论3：实验发现右手拇指操作的死角</strong></h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">通过比较16个区域的在不同红点大小实验下的正确率均值，发现A4\C4\D1\D4&nbsp; 四个区域触击正确率显著低于整体均值。死角区误操作比率高，在控件布局时应考虑死角问题，特别是在处理高频操作位置时。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><a style="color: rgb(69, 107, 149); " href="http://ued.taobao.com/blog/wp-content/uploads/2012/02/1212.jpg"><img alt="" width="497" height="332" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/1212.jpg" /></a></p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; text-align: left; "><strong style="font-weight: bold; ">&nbsp;结论4：44pix（7mm)的原则在&ldquo;单手/行走/拇指&rdquo;操作状态下并不适用</strong></h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">在本研究中，当红点大小值为7mm时，行走状态下单手拇指操作触击正确率均未达到95%。7mm or 44pix 的设计远不能满足移动单手持机操作的状态，容易引起较高的误操作率。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><img alt="" width="225" height="444" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/1313.jpg" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">&nbsp;<strong style="font-weight: bold; ">&nbsp;结论5：实验发现更具体的拇指操作尺寸要求</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; ">在本研究中，在行走状态下单手拇指操作触击正确率均值达到95%的最小尺寸见下图。且可以发现，不同区域对触击的尺寸要求是有差异的。在设计单手操作的界面时，参考控件所在位置的触击尺寸要求，避免因尺寸小带来误操作，影响操作效率。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; text-align: left; "><img alt="" width="252" height="435" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2012/02/1414.jpg" /></p><div>&nbsp;转自：http://ued.taobao.com/blog/2012/02/16/%E4%B8%BA%E8%A7%A6%E5%B1%8F%E6%89%8B%E6%9C%BA%E8%80%8C%E8%AE%BE%E8%AE%A1%E7%B3%BB%E5%88%971%E2%80%94%E2%80%94%E6%8B%87%E6%8C%87%E6%93%8D%E4%BD%9C%E7%9A%84%E2%80%9C%E7%83%AD%E5%8C%BA%E6%AD%BB%E8%A7%92/</div>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss267/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=267</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=267&amp;key=d28cbdef</trackback:ping></item><item><title>为了点击体验的手指触摸区域设计</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss266/</link><pubDate>Thu, 15 Mar 2012 21:25:48 +0800</pubDate><guid>http://www.vvwww.com/post/rss266/</guid><description><![CDATA[<p>&nbsp;<span style="font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">玩飞镖的时候，靶心是最难射中的位置，因为靶心是整个靶面上面积最小的部分。越是小的目标，就越是难以达到。这个准则在移动设备的触摸屏幕上同样适用。</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">众所周知，对于触屏设备用户来说，面积小的目标比面积大的目标更难操纵。所以，在设计移动设备界面的时候，触控目标一定要充分的大，足以让用户操作 自如。但是多大才算充分呢？多大才是对于大多数用户最合适的尺寸呢？各大移动设备开发者已经认识到这个问题，最常见的做法是在各大厂商的用户界面设计文档 中寻找答案。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">&nbsp;</p><h5 style="font-family: Arial, sans-serif; line-height: 20px; text-align: left; ">那么，设计文档怎么说？</h5><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">Apple的<a href="http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/DesigningNativeApp/DesigningNativeApp.html#//apple_ref/doc/uid/TP40006556-CH4-SW1" target="_blank" style="color: rgb(0, 0, 153); ">IPhone Human Interface Guidelines</a>推荐触控目标的最小尺寸是44*44 pixels。Google的<a href="http://developer.android.com/design/style/metrics-grids.html" target="_blank" style="color: rgb(0, 0, 153); ">Android Design</a>说7-10mm是比较理想的尺寸。Microsoft的<a href="http://go.microsoft.com/?linkid=9713252" target="_blank" style="color: rgb(0, 0, 153); ">Windows Phone UI Design and Interaction Guide</a>推荐的最小触控目标尺寸为7*7mm（26*26px），理想的尺寸为9*9mm（34*34px）。Nokia的<a href="http://library.developer.nokia.com/index.jsp?topic=/S60_5th_Edition_Cpp_Developers_Library/GUID-5486EFD3-4660-4C19-A007-286DE48F6EEF.html" target="_blank" style="color: rgb(0, 0, 153); ">开发指南</a>建议目标尺寸应该不小于10*10mm（28*28px）。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">虽然每个设计文档都给出了大体的合适尺寸，但是我们可以看到各个设计文档都有所不同。实际上，有些他们所推荐的尺寸是远小于用户手指尺寸的，而正是这些误差导致了用户在操作过程中的种种问题。</p><h5 style="font-family: Arial, sans-serif; line-height: 20px; text-align: left; ">小目标，大问题</h5><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">如果触控目标太小的话，用户需要付出额外的精力来进行精确的点击。用户需要不断的调整他们的手指来点击目标并获得反馈。有的人习惯用指腹，这样可以 覆盖整个目标区域，但如此以来就很难在点击的同时看到按钮的内容，也看不到点击的反馈。而有些人用指尖，这样可以在点击的同时获得视觉反馈。如果用户需要 多次尝试才能到达目标的话，就会影响任务操作的顺畅，耗费了不必要的精力，并且增加了用户的挫折感。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; "><img class="alignnone" title="指腹和指尖的区别" src="http://media.smashingmagazine.com/wp-content/uploads/2012/02/fingers1.jpg" alt="" width="500" height="350" /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">除此之外，小的触控目标还很容易导致误操作。当小的按钮被组合在一起的时候，用户很容易因为目标太小而点击到邻近的按钮，从而触发了其他动作。这样 的误操作在用户使用大拇指进行操作时尤为明显。有些用户为了在点击的同时看到反馈甚至将手指侧过来进行点击，其实，这完全是可以避免的。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; "><img class="alignnone" title="拇指和食指" src="http://media.smashingmagazine.com/wp-content/uploads/2012/02/finger-thumb2.jpg" alt="" width="500" height="350" /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">对于用户来说，很多时候他们只有一只手来操作设备，单手握持设备的时候，大概就只能用拇指进行点击操作了。我们的设计不能因为用户用的是拇指而不是食指而出现更难点击的情况，更不能导致他们的误操作。</p><h5 style="font-family: Arial, sans-serif; line-height: 20px; text-align: left; ">食指的平均宽度</h5><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">MIT的一项<a href="http://touchlab.mit.edu/publications/2003_009.pdf" target="_blank" style="color: rgb(0, 0, 153); ">研究</a>指出，大多数成年人的食指宽度为16-20mm，换算后大约为45-57px，在设计文档中，只有Apple的44px还比较接近。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; "><img class="alignnone" title="食指的平均大小" src="http://media.smashingmagazine.com/wp-content/uploads/2012/02/finger-57.jpg" alt="" width="500" height="350" /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">如果触控目标的宽度能够达到45-57px，那么操作起来就很舒适了，并且在进行点击的时候，按钮的边缘是可见的，这样点击的反馈也能很好的体现出来。用户点击和拖放目标的速度也能大大提高。根据<a href="http://en.wikipedia.org/wiki/Fitts_law" target="_blank" style="color: rgb(0, 0, 153); ">费茨定律</a>，目标越小，达到目标的时间越长。小的目标需要用户付出额外的精力去精确的点击它，增加目标的宽度就不用担心这些问题了。</p><h5 style="font-family: Arial, sans-serif; line-height: 20px; text-align: left; ">拇指的平均宽度</h5><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">有的用户喜欢用食指进行操作，而用拇指的用户更是大有人在。两者最大的不同在于拇指更宽。一个成年人的拇指宽度大概是25mm，换算之后大约是72px。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; "><img class="alignnone" title="拇指的平均宽度" src="http://media.smashingmagazine.com/wp-content/uploads/2012/02/thumb-72.jpg" alt="" width="500" height="350" /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">对于拇指用户来说，72px宽的触控区域能够很好的进行定位，同时也能看到目标的边缘和角落，从而获得反馈信息。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">Microsoft Research的一项<a href="http://research.microsoft.com/pubs/75812/parhi-mobileHCI06.pdf" target="_blank" style="color: rgb(0, 0, 153); ">研究</a>发现，触屏用户的误操作数量随着点击目标的增大而减小，用户点击目标的速度也随之变快。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">虽然增大目标的尺寸有诸多好处，但在某些情况下也有例外。大家都知道，移动设备的空间是很有限的，如果一味的增大按钮目标的尺寸，移动设备尤其是手 机的屏幕肯定会不够用。所以在设计的时候，我们必须解决屏幕大小和点击目标大小之间的冲突和矛盾，在屏幕允许的情况下尽可能的使用充分大的按钮目标，如果 实在不行，我们还有设计指南的推荐尺寸可用。</p><h5 style="font-family: Arial, sans-serif; line-height: 20px; text-align: left; ">游戏中的应用</h5><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">另一个我们需要考虑的问题是用户什么时候用食指，什么时候用拇指。如果是在游戏当中的话，用户会更倾向于使用拇指进行操作，想想PSP，NDS。所以，游戏应用中的控制区域最好要适合拇指的宽度。同样，触控目标的大小要既能舒适的控制，又能看到目标的反馈。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; "><img class="alignnone" title="游戏中的应用" src="http://media.smashingmagazine.com/wp-content/uploads/2012/01/gaming-thumbs.png" alt="" width="510" height="357" /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">毫无疑问，让移动应用中的触控区大小与用户手指尺寸相匹配大大提高了应用的可用性。如果用户在使用移动应用的时候还要特别花注意力来进行点击操作，那么其用户体验必将大打折扣。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; font-family: Arial, sans-serif; font-size: 13px; line-height: 20px; text-align: left; ">转自：http://ucdchina.com/snap/11625</p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss266/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=266</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=266&amp;key=68bb299d</trackback:ping></item><item><title>触屏手机点击区域的小秘密</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss265/</link><pubDate>Thu, 15 Mar 2012 21:17:04 +0800</pubDate><guid>http://www.vvwww.com/post/rss265/</guid><description><![CDATA[<p>&nbsp;<span style="color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; font-size: 16px; line-height: 25px; ">做触屏手机产品设计，要注意所有的可点击元素都有足够的点击区域，但是这并不是说你要把所有的按钮图标链接都设计的足够大，手机上的视觉焦点和操作焦点是不一样的，操作焦点是可被放大或移动的点击区域。</span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">这里分享几个点击区域的小秘密，帮你解决操作准确率的问题。</p><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 1.55em; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; line-height: 25px; ">一、扩大操作焦点</h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">iPhone自带的控件NavigationBar上的Button、TabBar上的Item、ToolBar上的ButtonItem，实际的点触区域都是被放大了的。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; "><a href="http://elya.cc/wp-content/uploads/2012/03/navigationbar.png" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; text-decoration: none; cursor: pointer; color: rgb(36, 61, 97); "><img class="alignnone size-full wp-image-1211" title="navigationbar" src="http://elya.cc/wp-content/uploads/2012/03/navigationbar.png" alt="navigationbar 触屏手机点击区域的小秘密" width="320" height="61" style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: none; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; border-width: initial; border-color: initial; border-width: initial; border-color: initial; clear: both; display: block; max-width: 600px; " /></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">虽然iPhone导航栏上的操作按钮仅有29px高，但是它的实际点触区域比整个导航栏的高度还要高出5px左右，大概能达到44px+5px，这样用户就不用小心翼翼的去点击返回按钮了，按钮点起来比看起来要大的多。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">如果导航栏下边区域还有按钮，或者输入区域，点击下边的按钮经常会触发导航栏上的按钮，这点很多开发人员都可能遭遇过，我看到Cocochina上就有不少类似问题，比如<a href="http://www.cocoachina.com/bbs/read.php?tid=80992" target="_blank" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; text-decoration: none; cursor: pointer; color: rgb(36, 61, 97); ">wyx遇到的问题</a>，比如<a href="http://stackoverflow.com/questions/2271945/uinavigationbar-uibarbuttonitems-much-larger-click-area-than-required" target="_blank" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; text-decoration: none; cursor: pointer; color: rgb(36, 61, 97); ">dave遇到的问题</a>。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">类似的，新浪微博的撰写微博界面也是个列子，当用户想编辑第一行的文字的时候，点击文字经常会误触顶部操作栏的取消或发送。随享微博客户端也是，顶部导航栏下边有一排操作图标，还是比较容易引发误操作的。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; "><a href="http://elya.cc/wp-content/uploads/2012/03/4.png" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; text-decoration: none; cursor: pointer; color: rgb(36, 61, 97); "><img title="实际焦点" src="http://elya.cc/wp-content/uploads/2012/03/4.png" alt="4 触屏手机点击区域的小秘密" width="320" height="70" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: none; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; border-width: initial; border-color: initial; border-width: initial; border-color: initial; max-width: 600px; " /></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">底部标签栏的可点击区域也比视觉焦点要多出5个像素左右，标签切换是比较常见的操作，这样一个小改动帮用户提升了标签切换的准确率。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; "><a href="http://elya.cc/wp-content/uploads/2012/03/5.png" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; text-decoration: none; cursor: pointer; color: rgb(36, 61, 97); "><img title="5" src="http://elya.cc/wp-content/uploads/2012/03/5.png" alt="5 触屏手机点击区域的小秘密" width="320" height="84" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: none; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; border-width: initial; border-color: initial; border-width: initial; border-color: initial; max-width: 600px; " /></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">但是正因为iPhone标准的TabBar的点击区域是有扩张的，所以如果你在TabBar上方放置可操作区域，都比较难以点击，Foursquare和USA today等应用最后都是采用自定义TabBar的方式规避问题的。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">关于和设置往往被做成半透明图标，浮动在界面上，如果操作焦点=视觉焦点，那么用户就只能杯具的削尖指头去点了，还好这两个按钮的实际操作焦点要比视觉焦点大的多，保证了足够准确的点击。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; "><a href="http://elya.cc/wp-content/uploads/2012/03/1.jpg" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; text-decoration: none; cursor: pointer; color: rgb(36, 61, 97); "><img class="alignnone size-full wp-image-1198" title="1" src="http://elya.cc/wp-content/uploads/2012/03/1.jpg" alt="1 触屏手机点击区域的小秘密" width="369" height="110" style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: none; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; border-width: initial; border-color: initial; border-width: initial; border-color: initial; clear: both; display: block; max-width: 600px; " /></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">Android4.0规定的有效可触摸的UI元素标准是48dp，一般来说，48dp转化为一个物理尺寸，约为9毫米。建议的目标大小为7~10毫米，这一点与iPhone一致，这是一个用户手指能准确并且舒适触摸的区域。<br />如果所示，你的UI元素可能小于48dp，图标仅有32dp，按钮仅有40dp，但是他们的实际可操作焦点都达到了48dp的大小。</p><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 1.55em; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; line-height: 25px; ">二、下移操作焦点</h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">由于用户在进行各种操作的时候，需要确保自己准确的点击到了相应的元素，所以一般情况下，右手持机的用户，落点会偏右偏下，见下图：</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; "><a href="http://elya.cc/wp-content/uploads/2012/03/%E8%90%BD%E7%82%B9%E7%9B%91%E6%B5%8B.png" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; text-decoration: none; cursor: pointer; color: rgb(36, 61, 97); "><img class="alignnone size-full wp-image-1200" title="落点监测" src="http://elya.cc/wp-content/uploads/2012/03/%E8%90%BD%E7%82%B9%E7%9B%91%E6%B5%8B.png" alt="落点监测 触屏手机点击区域的小秘密" width="273" height="393" style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: none; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; border-width: initial; border-color: initial; border-width: initial; border-color: initial; clear: both; display: block; max-width: 600px; " /></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">我们的UER把手机屏幕分成6*12个可点击的焦点，从用户的点击落点监测可以看到，右手持机的用户有很大一部分点击落点和视觉焦点是有很大偏差的，偏差具有一定的规律性。屏幕右下方格外明显。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">如果你的应用是操作密集型，可以考虑调整有效点击区域，整体往右往下偏移几像素，准确率会有所提升。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; "><em style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(128, 128, 128); ">##此部分内容希望有过类似研究的同学可以共同探讨##</span></em></p><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 1.55em; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; line-height: 25px; ">三、留白以规避误点击</h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">当然，仍然有很多情况，我们是无法用放大操作焦点或偏移操作焦点的方式来解决的，那就是当两个可操作元素确实离得比较近的时候。这时候，iPhone内置的应用会巧妙的采用留白排版方式以规避误点击。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; "><a href="http://elya.cc/wp-content/uploads/2012/03/liubai.png" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; text-decoration: none; cursor: pointer; color: rgb(36, 61, 97); "><img class="alignnone size-full wp-image-1203" title="输入框的留白" src="http://elya.cc/wp-content/uploads/2012/03/liubai.png" alt="liubai 触屏手机点击区域的小秘密" width="320" height="96" style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: none; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; border-width: initial; border-color: initial; border-width: initial; border-color: initial; clear: both; display: block; max-width: 600px; " /></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">比如iPhone系统的输入框，如果框右边有发送按钮的话，我们可以发现右侧是有个明显的留白的，由于中英文字体差异，中文的留白略大于英文。这个留白，一方面是为了规避跟发送按钮焦点太近的误操作问题，一方面是为了给滚动条留足够的空间。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; "><a href="http://elya.cc/wp-content/uploads/2012/03/liubai2.png" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; text-decoration: none; cursor: pointer; color: rgb(36, 61, 97); "><img class="alignnone size-full wp-image-1204" title="留白2" src="http://elya.cc/wp-content/uploads/2012/03/liubai2.png" alt="liubai2 触屏手机点击区域的小秘密" width="320" height="104" style="margin-top: 0px; margin-right: 0px; margin-bottom: 18px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; background-image: none; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; border-width: initial; border-color: initial; border-width: initial; border-color: initial; clear: both; display: block; max-width: 600px; " /></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">而带有全部删除按钮的输入框，文字离全部删除按钮也会有适当留白，规避切换光标时可能引发的误操作。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">当遇到焦点密集的问题的时候，我们都是可以利用增加行间距、元素间距和留白的方式来解决可点击区域问题。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">最后再啰嗦一句小图标元素大点击区域的实现方式，方法1：UI提供带透明点击区域的图标，就是一张透明的图，上面一个小图标；方法2：UI提供一个大点的透明的图，覆盖到图标上面，点到上面就执行操作；方法3：程序人员自己去实现，方法请问他们，嘿嘿。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; outline-style: none; outline-width: initial; outline-color: initial; font-size: 16px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; color: rgb(51, 51, 51); font-family: Georgia, Times, 'Times New Roman', serif; line-height: 25px; ">转自：http://elya.cc/2012/03/06/design-focus/</p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss265/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=265</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=265&amp;key=2fdafd04</trackback:ping></item><item><title>移动设计空间节省之道</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss264/</link><pubDate>Thu, 15 Mar 2012 21:11:54 +0800</pubDate><guid>http://www.vvwww.com/post/rss264/</guid><description><![CDATA[<p>&nbsp;<a href="http://cdc.tencent.com/?p=5339" style="color: rgb(51, 51, 51); text-decoration: none; font-family: Tahoma, 宋体; line-height: normal; "><img src="http://cdc.tencent.com/wp-content/uploads/2012/03/banner1.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; float: left; " alt="" /></a></p><div class="text" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 17px; padding-right: 0px; padding-bottom: 17px; padding-left: 0px; clear: both; width: 720px; font-size: 14px; line-height: 24px; position: relative; overflow-x: hidden; overflow-y: hidden; background-image: url(http://cdc.tencent.com/wp-content/themes/cdcblog2/images/hatching_line.png); background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(51, 51, 51); font-family: Tahoma, 宋体; background-position: 0% 0%; background-repeat: repeat no-repeat; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">　　设计来源于生活。最近在装修自己的房间，翻阅了一些相关的家居设计资料，发现交互设计和家居设计有很多相似的地方。小户型空间有限，手机屏幕也只有巴掌大小，在两种小空间上进行设计一定很多共通之道。携程UED的同学也是心有灵犀，很早就为我们奉献了一回精彩的分析（<a href="http://ued.ctrip.com/blog/?p=2905" style="color: rgb(51, 51, 51); ">http://ued.ctrip.com/blog/?p=2905</a>）。对于这么有意思的主题，还是想多唠叨几句。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">　　一位优秀的厨子，必须熟练掌握切菜的各种刀法：直切、侧切、推切、拉切、转切&hellip;.设计如是，在节省空间之道上，同样有一些基础&ldquo;刀法&rdquo;可以帮助我们打造精致的app。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><strong>1.&nbsp; 聚</strong><br />即聚拢、收纳，最朴实的节省空间的方式之一，可以轻松将归属一类的东西聚集起来放一块，办公用品、日常小工具、化妆品、衣服、家用医药&hellip;.能装的，都给它装下。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5340" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic1.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">　　移动设计中也经常使用actionsheet、popover这些&ldquo;容器&rdquo;将各种菜单、通知、相关项收到一块。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5341" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic2.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><strong>2.藏</strong><br />聚和藏有点类似，前者偏向归类，后者偏向隐而不见（有点难理解的话可以想象下冬天衣服打包的过程，先用收纳盒将衣服收起来，然后再扔进衣柜里去，这里就涉及先聚后藏的过程）。如果将一些不经常用到东西都藏起来，藏抽屉、藏衣柜、藏马桶里&hellip;会省出很多空间呐。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5342" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic3.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">　　移动设计中可隐藏的东西有三类：<br />（1）有形的控件：如按钮、标签、菜单、导航&hellip;<br />（2）手势与重力感应：长按删除、横滑翻页、摇一摇都是这一类；<br />（3）操作路径：把不常用的功能或设置项藏得深一点，通过层层递进达到目的。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5343" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic4.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">　　需要注意的是，藏是一种简单但&ldquo;略显粗暴&rdquo;的方式，移动设计不像私人空间，更多是为群体大众设计，他们可不知道你房间的剪刀放哪，所以，如果是比较重要的特性，提供一些简单的引导提示吧。　　　　</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">PS：关于如何设计引导提示，请参考<br /><a href="http://www.alibuybuy.com/posts/66389.html" style="color: rgb(51, 51, 51); ">http://www.alibuybuy.com/posts/66389.html</a><br /><a href="http://ucdchina.com/snap/11231" style="color: rgb(51, 51, 51); ">http://ucdchina.com/snap/11231</a><br />&hellip;.</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><strong>3. 换</strong><br />替换，即利用共享空间交替展现。当舞台只能容下一个人表演的时候，轮流上。家居创意中有很多双用的设计，办公桌与休闲床的翻转交替就完美地演绎了这样一种节省之道。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5344" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic5.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">　　手机屏幕空间非常有限，一块小小的角落都可以成为兵家必争之地，通过共享空间的利用，可以完成多个界面的跳转及不同状态之间的切换。Tab、slide page、还有各种翻转切换都是通过空间共享的方式承载不同的信息。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5345" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic6.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><strong>4. 合</strong><br />合并，咋一看和&ldquo;聚&rdquo;有点类似，不过&ldquo;合并&rdquo;更偏向融合，不但凑一块，还互不干扰，形成一个整体。沙发床就是一个典型的例子。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5346" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic7.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><br />移动设计中的合并也常常见于各种组件的组合，如输入框与标签、导航与下拉菜单、网址栏的输入框与取消/刷新按钮等。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5347" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic8.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><strong>5. 分</strong><br />在简单收纳的基础上，如果将空间继续细化，分割成不同的&ldquo;小块&rdquo;，会使得摆放更有秩序。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5348" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic9.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><br />九宫格、栅格、区域划分&hellip;如果小屏幕里灵活运用这些格子组合会让界面显得更加整齐。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5349" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic10.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><strong>6. 压</strong><br />冬天过了，厚厚的被子、枕头、薄棉衣就收起来，真空压缩袋绝对是收纳的好帮手。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5350" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic11.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><br />移动设计的挤压案例也蛮多。ios4新增的inbox展示方式就是一种自上而下的挤压处理，除此之外，facebook和path的从左往右的挤压布局最近也特别流行。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5351" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic12.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><strong>7. 顺</strong><br />直接利用现有的边角或边缘位置，顺着这些特殊的&ldquo;点&rdquo;进行设计。下面的这种组合书架紧靠两侧墙面转角位，这种顺着拐点的巧妙设计可以为墙面节省更多的空间。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5352" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic13.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><br />移动设计中，这些特殊的区域有那么几种：<br />（1）屏幕边缘<br />（2）角落<br />（3）控件边缘<br />（4）系统状态栏</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">　　如果能够很好地利用这些特殊区域，会有各种意想不到的效果。HiQQ的锁屏设计从原来的&ldquo;点到点&rdquo;演变成&ldquo;点到边&rdquo;，非常巧妙地利用了屏幕边缘，大大降低了操作密度。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5353" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic14.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">　　最后，总结下七步刀法：聚、藏、换、合、分、压、顺。以上7步仅为节省空间的基础&ldquo;刀法&rdquo;，实际的情况会更复杂，经常需要组合使用。设计的乐趣也就在此，有章可循却又变化莫测。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">　　最后，准备好接下来如何收拾自己的房间了吗？</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; "><img class="aligncenter size-full wp-image-5354" src="http://cdc.tencent.com/wp-content/uploads/2012/03/pic15.png" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 7px; padding-right: 0px; padding-bottom: 7px; padding-left: 0px; clear: both; width: 720px; ">转自：http://cdc.tencent.com/?p=5339</p></div>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss264/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=264</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=264&amp;key=c134fa19</trackback:ping></item><item><title>与广告“互动”—情景互动式创意广告</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss263/</link><pubDate>Thu, 15 Mar 2012 21:06:37 +0800</pubDate><guid>http://www.vvwww.com/post/rss263/</guid><description><![CDATA[<p>&nbsp;<span style="color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">早晨做地铁，正打盹的时候，忽然听到某网站的大名被一声声地呼喊着，顿时就把我惊醒了，现在有些广告做得都不怎么考虑用户的感受，在既没有美感又没有创意的前提下，强行灌输信息只会令多数人感到厌恶。</span></p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">广告本来起的是一个宣传的作用，如果人人看到都觉得烦，那就适得其反了。其实广告也有很多形式，平面、电视、网络等。通常我们看到的都是以上三种。这里，给大家介绍一个比较新颖的趋势&mdash;&mdash;情景互动式广告。<br class="spacer_" /><br />情景互动广告是指需要广告画面外的物体来参与，共同完成信息传播的一种广告形式。与传统广告相比，情景互动广告并不一定需要在公共场合突出位置，以大幅面、醒目文字和艳丽的画面博取注意力，而是建立在用户视觉经验、心理暗示和行为活动之上，根据广告目的预先设计场景，使得用户能够不自觉地参与互动体验各种广告信息，从而更生动、更形象和更丰富地传播信息。<br />它除了互动性的特点之外，还具有非强迫性的特点，用户可以自由选择是随意浏览还是细看，避免了注意力集中的无效性和被动性。<br class="spacer_" /><br />常见的情景互动式广告大体可分以下三类：<br />&nbsp;</p><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">一．创意与产品包装相结合</strong></h3><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">生活中各种产品都会有一个精美的包装，大多数只是为了一个美观的视觉效果，但是当创意融入产品包装，它会产生一个多么美妙的感觉！<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/1.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">Nike Stadium系列鞋的鞋盒设计，小鞋盒，新天地，足球场有了，篮球场，排球场以后也会有的！<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/2.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">潘婷洗发露的去屑功能，看到头发上飘着几颗白色盐粒，会不会觉得特别不舒服？<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/3.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">整容医院的水杯，不知道整容后的效果？好的，先让你体验一番！既不耽误喝水也不耽误美观！<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/4.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">讨厌下雨天？给你一片阳光灿烂的天空，即使雨天也不例外。看到这把伞就会心情舒畅！<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/5.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">这个鼠标垫是不是让你浮想联翩，满足了手感，满足了想法，还有良好舒适度。难道你还不心动么？<br />&nbsp;</p><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">二．创意融合周边环境</strong></h3><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">让观众参与，是拉近产品与用户的直接方法，也是让用户深入了解产品的机会，传统的方式是当你正在逛街，销售员会发给你一些宣传单或者突然把你拉去做个测试什么的，这种事情常常让我们避之不及。如何让体验和用户的关系变得自然成为需要攻克的难点。<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/6.jpg" alt="" width="544" height="694" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/7.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">以上两则广告的形式已经突破了传统的束缚，而是借助大自然，加入光电等元素，将创意表现得淋漓尽致。<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/8.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/9.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">而这两个广告则给了用户一个亲身体验的过程，但是它并不突兀，恰到好处的利用了周围的环境。反而用户会觉得很有趣，没有心理上的抵抗。不仅起到一个美化环境的效果，还给产品做了有力的宣传！<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/10.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">利用井盖内冒出来的热气做了咖啡杯，实在太妙了！<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/11.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">再乱的头发也能梳理的很光滑。<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/12.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">连卫星都能吸下来的吸尘器，还愁家里的卫生不好么？<br />&nbsp;</p><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">三．公益广告</strong></h3><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">公益广告作为与前两类属性不同的一个类别，这里单独拿出来说一下，我们见多了的是公益海报、是几个明星出来拍摄一段视频呼吁我们爱护环境，关注儿童、是某个墙壁上用红色大字写的标语，可是真正看到心底的又有多少呢，几乎都是三分钟热度，过了就忘！<br />以下这些公益广告将会给你一个触动心灵的洗礼！</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/13.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">这是07年戛纳广告金狮奖作品，奥美广告为英国卫生部和癌症研究所所做。清晰直观的告诉我们吸烟对身体的危害有多大，就像随身携带一颗威力无穷的炸弹！<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/14.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">我们所浪费掉的水对于那些极度缺水的非洲儿童来说是多么的可贵！这个创意很小，但在我们每一次使用水龙头的时候，他会提醒着我们要节约用水！<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/15.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">某个城市广场上放着的巨大的冰块，慢慢的融化，以小见大，警示南极州的冰川正在融化。<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/16.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">地球臭氧层就像那层透明的气球，一扎就破，它是多么需要我们爱护啊！<br />&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/74/17.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">少用几张纸，就保住了一棵树木！<br />&nbsp;</p><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">最后我们来总结一下情景互动式广告的特点：</strong></h3><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">1．参与性：体验经济时代，用户在广告中获取亲身感受，体验到参与的乐趣。<br />2．娱乐性：广告信息不再直接描述，通过比拟，象征和夸张等手法，产生诙谐与荒诞相容的心理。<br />3．多元性：广告传播环境的多样化（玻璃幕墙、车体、普通地面），广告媒介形式（三维、四维）、广告表现手法（声光电）。<br class="spacer_" /><br />情景互动式广告能够使广告跟用户产生互动，这种互动首先是行动上的&ldquo;亲身参与&rdquo;和&ldquo;亲密接触&rdquo;，之后从思想上产生影响，最后会给用户留下深刻的记忆。相信随着技术、设计创意等的日益完善会发展得越来越好！</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">&nbsp;</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">转自：http://mux.baidu.com/?p=2950</p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss263/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=263</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=263&amp;key=b06c5f12</trackback:ping></item><item><title>浅析iPhone平台三种应用类型的布局方式</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss262/</link><pubDate>Thu, 15 Mar 2012 21:04:24 +0800</pubDate><guid>http://www.vvwww.com/post/rss262/</guid><description><![CDATA[<p>&nbsp;<img src="http://mux.baidu.com/img/90/banner.png" alt="" style="color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; " /></p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">在手机这样一个小小的有限的屏幕尺寸里，要使界面保持清晰合理、简洁美观，就涉及到产品&ldquo;框架布局&rdquo;的设计问题，我们需要根据不同的产品需求及应用场景来设计合理的界面布局。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">iPhone平台的标准界面布局为顶部标题栏、中部内容区、底部工具栏/标签栏，设计师们根据不同的应用类型以及不同的使用情境进行着巧妙的布局，其中不乏很多勇于打破常规，精巧合理的布局设计。今天就一起来看看iPhone平台多样化的界面布局方式。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">iPhone平台有三种类型的应用：</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><ul style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; list-style-type: none; list-style-position: initial; list-style-image: initial; background-position: initial initial; background-repeat: initial initial; ">    <li style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">效率型应用（Productivity Applications）</li>    <li style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">实用型应用（Utility Applications）</li>    <li style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">沉浸型应用（Immersive Applications）</li></ul></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">每一种类型都有各自不同的特点和应用场景。设计之前要清楚产品的目标、特点以及用户使用产品的动机，以选择合适的应用类型。下面我们分别通过这三种应用来总结一下界面的布局方式。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">&nbsp;</p><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">1.效率型应用（Productivity Applications）</strong></h2><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">效率型应用几乎包含了从社交网络到手机银行的所有应用。此类应用具有组织和操作具体信息的功能，需要比较精简的用户体验，从而不会阻碍用户的工作，要将用户体验的重点放在任务上，用户可以快速地找到需要的目标，轻松地完成操作。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">&nbsp;</p><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">1)如何设计效率型应用</strong></h3><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">以任务为导向的设计理念。建立准确的任务模型，将用户可能的任务进行拆解，并逐一设计优化流程。要让用户快速开始，快速找到信息，快速离开。建立清晰的层级关系，便捷准确的检索方式，以便于用户迅速定位需要的信息。</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">要降低用户的学习成本，尽可能的使用系统的控件和操作。降低噪音，保证高级的功能在用户需要时能够找到即可，在不需要的时候也不会造成困扰。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">&nbsp;</p><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">2)效率型应用的界面布局</strong></h3><h4 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-size: 14px; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; line-height: 21px; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">A. 九宫格</strong></h4><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img class="alignnone" src="http://mux.baidu.com/img/90/1.jpg" alt="" width="560" height="368" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">此类界面通常是用户进入产品后的首屏，为用户提供分类入口，入口通常以图表加文字的形式展现。以格子的形式排列，可以让用户快速地找到入口。此类布局适合用于丰富的内容展现，且内容适合分类聚合。</div><h4 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">B.&nbsp;折叠列表</strong></h4></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img class="alignnone" src="http://mux.baidu.com/img/90/2.jpg" alt="" width="560" height="368" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">折叠折表是为避免页面内过长的滚动而做的布局设计，通常需要在同一页面内展示大幅内容时可考虑使用此类布局。内容以两级列表的形式进行分组，每组可以分别展开显示它的子项目。</div><h4 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-size: 14px; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; line-height: 21px; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">C. 图片列表</strong></h4><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img class="alignnone" src="http://mux.baidu.com/img/90/3.jpg" alt="" width="560" height="368" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">图片列表可以直观地将图片的全图显示出来，方便用户快速检索查看，大幅的图片也为用户带来视觉上的愉悦体验。</div><h4 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-size: 14px; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; line-height: 21px; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">D. 旋转木马</strong></h4><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img class="alignnone" src="http://mux.baidu.com/img/90/4.jpg" alt="" width="560" height="368" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">旋转木马的布局适用于内容以线性或者循环的形式进行组织，充分利用有限的屏幕空间，更好的来展示一系列图形图像，从而让用户获得更好的聚焦体验，正如欢快奔腾的木马，不停的旋转展示，让每个独立个体都得到表现的机会。这种布局特别适用于屏幕空间有限而又需要展示大量内容。</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">常用的旋转木马式布局有两种，一种是如上图的全屏的展示，一般多用于首页，用作各个内容的入口。另一种是如下图的应用，带有多个项目的通常用于页面的顶部。</div></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img class="alignnone" src="http://mux.baidu.com/img/90/5.jpg" alt="" width="560" height="368" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><h4 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-size: 14px; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; line-height: 21px; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">E . 侧滑分屏</strong></h4><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img class="alignnone" src="http://mux.baidu.com/img/90/6.jpg" alt="" width="560" height="368" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">侧滑分屏的界面布局是采用三屏模式（左屏、主屏、右屏），此架构具有极好的扩展性。path2.0完全颠覆了iOS guild line的模式，采用这种三屏模式，极简了主页面，主屏仅留下feed展示和添加功能。将导航放入左侧的屏幕，增加了未来的可扩展性，同时也保证了主屏幕清晰的内容。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">&nbsp;</p><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">2.<span style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</span>实用型应用（Utility Applications）</strong></h2><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">实用型应用完成的任务对用户输入要求很低。用户打开实用型应用程序，是为了快速查看信息摘要或是在少数对象上执行简单任务 。实用型应用的特点是最小化安装、简单的流程及布局、标准化的界面元素。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">&nbsp;</p><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">1)<span style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</span>如何设计实用型应用</strong></h3><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">专注做好一个功能，使其一目了然，将需要的信息展示在一个层级里，让用户快速地获取某类特定的信息或者执行某一具体的任务，因此在开启后无需操作就能解决问题是最完美的。力争使界面简洁，并尽量使用简单的、标准的视图和控件。设置通常在主视图背面，可以设置不同的数据源。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">&nbsp;</p><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">2)<span style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</span>实用型应用的界面布局</strong></h3><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img class="alignnone" src="http://mux.baidu.com/img/90/7.jpg" alt="" width="560" height="368" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">界面以平面列表的方式显示信息；易于浏览，只包含了最必要的信息，没有深入的信息层次结构。每一个视图都提供同样的数据组织结构和细节深度。在界面下方显示打开的视图数量，用户可以按顺序浏览，在一个视图后选择另一个视图。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img class="alignnone" src="http://mux.baidu.com/img/90/8.jpg" alt="" width="560" height="368" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">通常一个实用型应用只解决某一个方面的问题，如上图的指南针和温度计，通过拟物化的设计，全屏布局突出应用功能，一目了然。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img class="alignnone" src="http://mux.baidu.com/img/90/9.jpg" alt="" width="560" height="368" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">界面简明地突出了主要功能，没有多余的操作和设置，以使用户快速完成操作。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">3.<span style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</span>沉浸型应用（Immersive Applications）</strong></h2><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">沉浸型应用可以为用户带来极致的娱乐和游戏体验，这类应用和标准的系统界面不同，用户希望这类应用能够给他们带来最大的娱乐。此类应用的特点是聚焦于主要内容及完全个性化的用户体验。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">1)<span style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</span>如何设计沉浸型应用</strong></h3><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">富媒体的表现形式，声，光，色，效，通过丰富的表现力让用户沉浸其中。不拘泥于系统的控件和表现方式，因此，界面设计的自由发挥度比较高，仿真的、可爱的设计风格往往容易出彩。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">2)<span style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</span>沉浸型应用的界面布局</strong></h3><h4 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">A. 游戏类的全屏布局</strong></h4></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img class="alignnone" src="http://mux.baidu.com/img/90/11.jpg" alt="" width="480" height="319" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">沉浸式应用通常会占据整个屏幕，包括电池和网络信息的状态栏，让用户聚集于主要内容，以增强用户的参与感。这种全屏界面布局没有多余的任务导向和元素干扰，让用户探索，并在探索中得到发现和奖励，不拘泥于系统的控件和表现方式。此类应用多为以横屏方向进行布局。</div><h4 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; ">B. 媒体类的全屏布局</h4></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img class="alignnone" src="http://mux.baidu.com/img/90/12.jpg" alt="" width="560" height="368" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">媒体类最常见的是电子阅读和视频播放，特写内容会占据整个屏幕，界面只显示内容，让用户沉浸其中，当用户点击屏幕时会在浮动层上显示控件。</div><h4 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">C. 特定任务类的全屏布局</strong></h4></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img class="alignnone" src="http://mux.baidu.com/img/90/13.jpg" alt="" width="560" height="368" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">特定任务类常见的有录音、拍照、图片处理等，界面布局以突出特定任务为主，在界面的下方辅以任务的操作按键，通常使用自定义的界面以配合环境。此类应用程序运行时可能会涉及到大量数据的处理，但是通常不显示这些数据，无须让用户查看。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">写在后面</strong></h2><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">在手机的交互设计中，我们要思考如何在有限的空间内合理布局，更好的展现内容，无论是文字还是图片，都要让内容看上去优雅得体。我们需要根据不同的应用类型、产品定位、用户目标来选择合适的界面布局，还要勇于尝试，敢于打破常规，设计出让用户赏心悦目的产品。</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">转自：http://mux.baidu.com/?p=2950</div></div>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss262/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=262</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=262&amp;key=0d449ebe</trackback:ping></item><item><title>移动设备产品设计中手势操作的那点事儿</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/mobile_app261/</link><pubDate>Thu, 15 Mar 2012 20:43:37 +0800</pubDate><guid>http://www.vvwww.com/post/mobile_app261/</guid><description><![CDATA[<p>&nbsp;<img alt="" style="color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: center; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; " src="http://mux.baidu.com/img/77/top.jpg" /></p><p>我觉得这篇文章标题叫：小手势，大世界。。呵呵，随着大家使用移动设备上网办公的频率越来越高，移动设备上的交互愈来愈重要了，以前人们都在网页上的一些交互显然已经不能直接进行移值。。但是移动设备会有更牛逼的特性，比如语音，遥感，触摸屏的操作等等了，现在利用比较多的还是手势操作，比如Android上的长按执行某操作的特性可以用来干很多事儿。再比如下文说到的一些手势，真的可以开启一个崭新的移动互联网世界。也许你可以想象一下，不用掏出手机来，直接在空气中画一下就能听到手机助手告诉你现在几点了。。哈哈，是不是我想多了。。</p><p>&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">自然用户界面【1】（NUI , Natural User Interface）&mdash;&mdash;特别是触控技术使人机交互变得更加自然直观，更为人性化。比如ipad、iPhone和一些采用Windows Mobile，Android等系统的手机已经让用户体验到触控的便利。本篇文章要说的是一种关于手机端触控技术的交互设计，它利用我们的肌肉记忆，不需要过多思考，让我们依靠潜意识，动动手指就能完成任务&mdash;&mdash;它就是手势操作。</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><h1 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</h1><h1 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">手势操作分类</strong></h1><p>&nbsp;</p><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">基本操作</strong></h2><p><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/1.jpg" /></p><p>&nbsp;</p></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">导航操作</strong></h2></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/2.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: left; ">&nbsp;</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">对象操作</strong></h2></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/3.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: left; ">&nbsp;</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">绘制操作</strong></h2></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/4.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><h1 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</h1><h1 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">锦上添花vs弄巧成拙</strong></h1><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">基于触摸屏幕的手势操作是手机端人机交互的一个飞跃，它使手机用户的移动生活变得更加丰富多彩，使人与设备的交互更加有趣，同时增强了用户操作的满足感，真可谓锦上添花。</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">讨用户欢心的小惊喜！</strong></h2><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">手势操作让用户的操作空间不再局限于界面上那几个像素的按钮。</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&ldquo;浏览网页时，用手一抓就可以缩小当前页面窗口；不需要点击后退按钮，只需在屏幕上画个&lsquo;&lt;&rsquo;,界面就会跳转到上一次打开的网页&hellip;&hellip;&rdquo;</p></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/5.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: left; ">&nbsp;</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">动态十足的炫酷！</strong></h2><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">手势操作相对于无趣的触摸和点击来说，给用户带来了动态十足的新体验。</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">经常可以看到用户拿着手机大刀阔斧的&ldquo;切着西瓜&rdquo;。</p></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/6.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: left; ">&nbsp;</div><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">化繁为简的魔术！</strong></h2><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; ">在某些应用的设计中，利用手势操作可以简化用户完成某一任务的操作步骤,提高使用效率。</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/7.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><h1 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</h1><h1 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">But！</strong></h1><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">手势操作虽然带来了简洁的界面和有趣的操作，但在实际应用过程中，设计者经常忽略了一些可用性的问题，导致用户体验受损。</p><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">缺乏规范的困惑？</strong></h2><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">目前手势操作尚未形成统一的标准规范。相同的目标任务，往往出现不同的手势操作，这就造成了用户的困惑。</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><span style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(128, 128, 128); background-position: initial initial; background-repeat: initial initial; ">例如：下图的三种手势操作都可以使目标对象旋转一定的角度，但目前尚无固定的使用规范</span></p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/8.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; text-align: left; ">&nbsp;</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">不易被发现的尴尬？</strong></h2><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">手势操作似乎还没有像按钮操作或菜单操作那样被大大方方的搬上台面，用户界面并不告诉用户可以对某个对象做什么，于是用户需要记住可以使用哪些手势。如果用户对其缺乏认知，这些手势操作就不易被发现，也便不会为人所用，甚至造成操作障碍。</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/9.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; ">&nbsp;</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">精准度低的死穴？</strong></h2><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">影响手势操作精准度的因素多多，如硬件屏幕的尺寸、反应灵敏度，用户本身操作的熟练程度、对手势本身的认知（记忆）等。</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">这些因素都会导致手势操作易产生:操作不备触发，不知操作是否到位、误操作、与预期结果相悖等，让用户沮丧的体验。</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/10.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; ">&nbsp;</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><h1 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</h1><h1 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">给英雄以用武之地</strong></h1><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">尽管手势操作在通往易用性圣殿的路上仍然是荆棘重重，但是只要我们在设计的过程中绕过体验问题的泥沼，还是可以给英雄以用武之地的。</p><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&ldquo;洞察用户习惯&rdquo;</strong></h2><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">手势本身的设计需要符合用户的心智模型和日常的使用习惯，才能不给用户增加记忆负担，容易被用户接受。</p><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">文化约定</strong></h3><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">手势本身或操作过程的设计符合特定文化里约定俗成的用法，形象的、有意义性的手势更加容易记忆和学习，符合认知习惯；应该多用&ldquo;通用的符号&rdquo;作为手势。</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/11.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">实物隐喻</strong></h3><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">手势本身的形状或操作过程是从具体实物中简化出来的，其内涵具有实物的隐喻意义。</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/12.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; ">&nbsp;</div><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">首字母表示</strong></h3><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">以将命令的中文或英文的首字母符号作为该命令的手势。如用&ldquo;a&rdquo;表示&ldquo;全删除&rdquo;（All）手势，用&ldquo;c&rdquo;表示&ldquo;复制（copy）等。</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/13.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><h3 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">易操作</strong></h3><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">形状美观：&ldquo;喜欢封闭的曲线&rdquo;,&ldquo;感觉舒服、美观&rdquo;。</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">操作顺手：&ldquo;最好一笔画完&ldquo;，&rdquo;尽量采用曲线&rdquo;。</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">适当复杂：有的手势适当复杂一些（如全删除），因为这些手势操作容易引起用户大的损失。</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&ldquo;引导用户使用&rdquo;</strong></h2><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">很多时候，手势操作是隐藏的，用户难于发现。因此就要通过一些用户引导信息来进一步的协助用户。&ldquo;引领式&rdquo;的引导方式比较适合用户快速接受，尽快上手，享受手势操作乐趣。最好将简洁明快指示性强的引导说明放在用户第一次使用时，让用户有所心理准备。</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/14.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; ">&nbsp;</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&ldquo;给用户选择&rdquo;</strong></h2><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">对于复杂的手势，不能强迫用户去学习记忆和使用，可以只作为备选的快捷方式提供给用户，让那些愿意学习的用户更快捷地完成想要完成的功能。</p></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/16.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">手势模式可以让用户选择是否启用该模式。用户在启用手势模式状态下才能使用手势来完成操作任务。</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/15.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; ">&nbsp;</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><h2 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&ldquo;靠数据说话&rdquo;</strong></h2><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">手势操作缺乏规范，对于手势本身的设计可以进行用户调研，定性或定量的分析不同手势操作的易用性，用调研数据来帮助确认选择哪一种操作方式会更方便用户使用。</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; text-align: left; "><img alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " src="http://mux.baidu.com/img/77/17.jpg" /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><h1 style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; clear: both; font-weight: normal; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&ldquo;V&rdquo;就在前方</strong></h1><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">交互设计就是解决一个又一个的体验问题，尽管手机端的手势操作的应用还存在着这样或那样的用户体验上的bug，但是我相信它依旧是<strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">v</strong>5的。经过我们的不断改进创新，自然用户界面的宏伟目标终有一天会实现！胜利就在前方！</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">转自：http://mux.baidu.com/?p=2227</p></div></div></div></div></div></div></div></div></div>]]></description><category>移动应用</category><comments>http://www.vvwww.com/post/mobile_app261/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=261</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=261&amp;key=7d934da9</trackback:ping></item><item><title>交互设计实用指南系列—避免出错</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss260/</link><pubDate>Wed, 01 Feb 2012 21:59:36 +0800</pubDate><guid>http://www.vvwww.com/post/rss260/</guid><description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: small; ">启己：我记得听过一个故事：山路上一汽车驶近，路边寺庙门旁一小和尚高举&quot;回头是岸&quot;横幅，大喊：施主看这里！ 车内一年轻人隔窗笑骂:傻帽！瞬间飞驰转弯而去。10秒钟后坠落惨叫声传来。当晚禅房内小和尚对住持说:师父，是不是直接写&quot;前方桥梁已断&quot;好一些？，清晰表达的目的是减少犯错的操作。。表面简单的交互也许背后会有设计师和程序员的辛劳。。值得么？当然值得~应该是很值得，往往这些细节决定一个产品的魅力！~在产品设计中避免出现模糊的文字定义，错误的颜色标识以及混乱的页面跳转和弹出这些都是非常糟糕的体验。。</span><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; "><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; "><img class="alignnone" src="http://img02.taobaocdn.com/tps/i2/T1nU4wXm8eXXXXXXXX-600-773.png" alt="" width="600" height="773" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></h2></span><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; "><p>&nbsp;</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; "><strong style="font-weight: bold; "><span style="color: rgb(128, 128, 128); ">一、如何理解本条内容:</span></strong></h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">一个&ldquo;简单&rdquo;和&ldquo;复杂&rdquo;的例子</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">在我和开发人员沟通一个项目需求的时候，他们频频慨叹Mockup的设计所考虑情况之细致，很多程序要实现的预判和&ldquo;非基础功能点&rdquo;让开发人员望而却步不情愿去实现。相比较设计师为了让用户避免出错而绞尽脑汁去设想和考虑，开发人员更倾向于直接给到一个只能容许的操作行为，其他非法请求全部报错：&ldquo;程序是严谨的，他错，我报错，以不变应万变。<strong style="font-weight: bold; ">简单</strong>一点不好吗？&rdquo;程序员们甚至笑言：&ldquo;考虑他们的体验那么多，我们开发的体验真不好，please，咱们能不能不要把事情搞那么<strong style="font-weight: bold; ">复杂</strong>&rdquo;。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">在这个例子里，程序员看来，对于<strong style="font-weight: bold; ">用户在和系统交互的过程中可能出现的各种情况均予以考虑，找寻用户理解起来最明确、操作最简单的、用户犯错最少的设计</strong>是缺少效率且浪费时间的。设计师这样做，是在将简单的事情复杂化。OK，现在就有这样一个问题，什么是&ldquo;错误&rdquo;？每当程序要处理错误的请求，是否是用户真的在&ldquo;犯错&rdquo;？</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; font-family: 'Microsoft Yahei'; "><strong style="font-weight: bold; ">1</strong><strong style="font-weight: bold; ">、问题一，是谁的错？</strong></h3><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我在某一天使用了一个网站的相册功能时，遇到了这样的情况（如下图）:</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="alignnone" src="http://img07.taobaocdn.com/tps/i7/T1..twXhtmXXXXXXXX-588-165.png" alt="" width="588" height="165" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&ldquo;普通上传&rdquo;是当前的选中状态，而上传&ldquo;取消&rdquo;的Button也是同样的样式。因为选中状态具有&ldquo;肯定、确定&rdquo;的潜在暗示，这样消极操作和积极操作的状态完全混淆了，用户在上传过程中很容易出现错点&ldquo;取消&rdquo;Button当作确定完成上传任务的误操作。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如果真的发生了这样的情况（应该不在少数，像我就发生了在本地好不容易选择好的图片误点了很像&ldquo;确认&rdquo;功能的&ldquo;取消&rdquo;而做无用功的情况），是的，用户犯错了，但是责任难道在用户吗？&nbsp;<strong style="font-weight: bold; ">&ldquo;本来我不会犯错，是你的设计使我犯错，或起码增加了我犯错的几率。&rdquo;</strong>类似这样的错误，系统可能会报错，也可能不会；但真正应该检讨的却是系统本身，即： 用户对界面的理解和本身的系统意图出现误差，系统设计的歧义等固有缺陷导致用户出错。让用户频繁碰壁、产生挫折感的设计，其原因不是用户的愚蠢、而是设计的愚蠢。</p><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; font-family: 'Microsoft Yahei'; "><strong style="font-weight: bold; ">2</strong><strong style="font-weight: bold; ">、问题二，这是不是一个错？</strong></h3><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">关于&ldquo;错误&rdquo;一词解释的第二点主要针对用户对系统的行为层来说，即：用户在人机界面交互过程中的误操作，系统未能通过更好的设计减少和避免用户的误操作带来的损失。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">还是以&ldquo;上传照片&rdquo;为例（如下图）:</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="alignnone" src="http://img01.taobaocdn.com/tps/i1/T1foBwXd4mXXXXXXXX-457-316.png" alt="" width="457" height="316" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">一个模态的警示框，赫然告诉你，你想在这里上传相片，根本不该使用除了ie之外的浏览器！除了事先不打算通知你之外，同时也没的商量，因为我没有给你提供别的替代性方案和其他选择。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">可以想象,用户想要使用这个上传相片的功能，之前已经需要经历过许多步骤，比如要打开自己相册存放的线上地址、要成功登录进入管理后台、要寻找到上传相片的功能模块等等，已经付出了相当一部分的操作成本。但是系统却很残酷的让用户的所有工作都白做了，不仅如此，还很野蛮的方式告诉用户：你从一开始就错了！在这个情况下,用户对系统的理解并不存在误差，但还是在交互过程中产生了严重的挫折感。但是，这真的是用户的错误和需要承担的责任吗？我认为不是：<strong style="font-weight: bold; ">&ldquo;严格说来，我不是犯错，我只是不清楚我能做什么、以及应该怎么做的规则。&rdquo;</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">由以上两方面的案例，我想已经可以初步回答程序员同学的问题了：&ldquo;是的，简单总是好的，但是在交互过程中，事件永远是复杂的，所可能发生的情况的可能性永远是那么多的，不是你为他考虑的多，让他简单；就是他自己试验和受挫的经历更多，更复杂，体验更差&rdquo;。</p><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; font-family: 'Microsoft Yahei'; "><strong style="font-weight: bold; ">3</strong><strong style="font-weight: bold; ">、问题三、该如何做：</strong></h3><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">关于容错设计的三个境界：</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">1、<strong style="font-weight: bold; ">保证不是我们自己的错</strong>：屏蔽会引起歧义的设计、本身不合理的设计，不让用户因为系统的设计缺陷而导致犯错。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">2、<strong style="font-weight: bold; ">把简单留给用户，把复杂留给自己：</strong>通过系统的优良设计约束和指引用户的操作，把出现错误的可能降到最低。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">3、<strong style="font-weight: bold; ">减小错误的代价，帮助用户做对</strong>：当用户还是犯了错误，通过设计引导用户走向正确的方向。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">对交互设计师而言，第一条是本应遵守的设计底线，二三两条是设计时可供遵循的设计指南。其中的第三条，关于出现错误后如何帮助和引导用户做对，尚轩同学接下来会专门撰文探讨这个问题，此处暂不赘述，下面主要就第二条谈一些看法:</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; "><strong style="font-weight: bold; "><span style="color: rgb(128, 128, 128); ">二、如何做到避免用户出错：</span></strong></h2><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; font-family: 'Microsoft Yahei'; "><strong style="font-weight: bold; ">1</strong><strong style="font-weight: bold; ">、给予用户适当的行为约束</strong><span>&mdash;&mdash;为用户封闭掉不正确的道路</span></h3><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">这是Gmail的邮件处理区。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="alignnone" src="http://img07.taobaocdn.com/tps/i7/T1xoJwXoJjXXXXXXXX-558-575.png" alt="" width="558" height="575" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">上图表示当没有选择任何一封邮件的时候，操作项被置灰，不可点选。这样在有效避免了误操作的同时，也展示和预告了当符合操作要求时，&ldquo;更多操作&rdquo;内提供的全部功能的内容。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">下图则是已有选择邮件的时候，操作项全部激活为可用状态时的情况。对比上一张图未激活的状态，可以注意到除了激活与否的状态差别，还有其中的 &ldquo;加注星标&rdquo;功能在初始激活状态下是只有加注而隐藏了删除功能的、充分考虑了加注和删除功能的互斥性而予以隐藏。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">通过用户的使用状态，通过有选择性的设置功能项激活、待激活的状态，以及功能项展示、隐藏的状态，是有效避免用户误操作的常用手段。</strong>这个考虑细心周到的设计在很大程度上预防了用户可能发生的操作失误。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; font-family: 'Microsoft Yahei'; "><strong style="font-weight: bold; ">2</strong><strong style="font-weight: bold; ">、给予用户必要的预判性错误提示</strong><span>&mdash;&mdash;告诉用户，这样走可能会错</span></h3><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">这是Msn的登录界面。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="alignnone" src="http://img08.taobaocdn.com/tps/i8/T1noBwXbFmXXXXXXXX-336-202.png" alt="" width="336" height="202" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">当光标定位于密码输入区时，如果此时键盘的大写锁被不小心打开了，界面会提示用户此时处于Caps　Lock处于启用的状态，很可能会出现密码输入的错误。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">这样处理比用户输入完成点击提交之后再提示用户出了什么问题要来的友好和有效很多；比只是一味的批评用户 &ldquo;你错了&rdquo;从头至尾完全不告诉用户出了什么状况的界面要友好太多。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">当用户的一个行为很可能会引发预见性的错误，越早提示用户，并给出可行性的建议，错误越容易被接受和改正，用户的损失也就越小。</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; "><br /></strong></p><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; font-family: 'Microsoft Yahei'; "><strong style="font-weight: bold; ">3</strong><strong style="font-weight: bold; ">、告诉用户操作所处的状态和正确的操作方式</strong><span>&mdash;&mdash;告诉用户，怎么走才对</span></h3><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Flickr的媒体上传页面。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="alignnone" src="http://img06.taobaocdn.com/tps/i6/T1VUxwXkxmXXXXXXXX-527-333.png" alt="" width="527" height="333" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">对于用户在这个页面需要做什么、可以做什么有清晰的划分，对现在需要进行的、当前所处的操作阶段予以高亮显示，吸引人进行操作；对于还未进行到的操作阶段也预先做了一个介绍，很清晰的介绍了完整的任务流程。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">让用户知道在一个流程之中，自己已经完成了什么，将要做什么，还有什么没有做和应该怎样做，才能使任务成功，是避免用户出错的很积极的一个应对方式。</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">让我们摒弃作为设计师的中高级用户视角，深入挖掘用户行为习惯和心智模型，真正从用户的角度去分析使用上可能会出现问题，通过系统的设计去尽量避免错误的发生&mdash;&mdash;&ldquo;把简单留给用户、把复杂留给自己&rdquo;。About face3.0 第25章&ldquo;错误、警告和确认&rdquo;中讲到一条重要的设计原则：<strong style="font-weight: bold; ">让错误成为不可能。</strong>很美好。以此与各位设计同仁共勉之。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p></span><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; ">转自：</span><a href="http://ued.taobao.com/blog/2010/04/09/qiancheng1/">http://ued.taobao.com/blog/2010/04/09/qiancheng1/</a><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; "><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p></span></p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss260/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=260</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=260&amp;key=bd583afb</trackback:ping></item><item><title>如何使搜索列表页更亲切~~</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss259/</link><pubDate>Wed, 01 Feb 2012 21:42:44 +0800</pubDate><guid>http://www.vvwww.com/post/rss259/</guid><description><![CDATA[<p><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: left; ">对于搜索结果页的一些探索，看完这篇文章或许有一些启发。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: left; ">其实最好的搜索结果页应该是能把最需要的信息给用户，这个值得探讨。。搜索结果的智能推荐需要大量的数据分析做支持。。扯远了。。。这篇文章描述的是如何规划搜索结果页的信息展示。。避免无用信息的堆砌干扰到重要信息展示~~值得借鉴思考。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">很多网站都会非常关注购买行为的用户体验而忽略了如何促进用户去进行购买操作。其实对于用户来说只有当他决策了之后才会去进行购买的行为，那么我们首先要了解，怎么样能让用户更容易决策呢？</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户决策的最根本目的就是用最短时间找到最佳的选择，这个行为一般在搜索结果页就特别突出，因为我们面对页面上几十甚至更多的搜索结果集，这个时候决策的重要性就凸显了出来。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">现在很多网站的搜索结果集非常的冗长，信息量很大，无法让用户一目了然，做出决策。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我经常听到需求方跟我说：请帮我在列表项突出xx信息。而当我问起理由的时候他通常会告诉我用户会用的到，或者是他认为用户觉得因为这个信息而影响决策。这个导致在我设计搜索结果页的时候，最初干净简洁的版本就变得越来越冗长，越来越多可用可看的信息，也导致css的同事们经常1px1px的压缩列表宽度，为的就是避免换行而造成的不必要的错位。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">所以急需帮我们的搜索列表减减肥。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="color: rgb(17, 17, 17); ">1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong><strong style="color: rgb(17, 17, 17); ">那么减什么呢？</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">凸显关键信息，减少不必要的干扰</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="color: rgb(17, 17, 17); ">提取关键性信息</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">比如说机票列表项信息有很多，时间、机场、航空公司、舱位、航班、机型、价格、折扣、备注、燃油机建费、飞行时长、退改签、礼盒、日历展示的价格。对于这么多信息，我们如何去了解用户真正的关注点呢？</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="aligncenter size-full wp-image-3164" title="2012-01-30_170451" src="http://ued.ctrip.com/blog/wp-content/uploads/2012/01/432x336x2012-01-30_170451.png.pagespeed.ic.6z8BLGub6q.png" alt="" width="432" height="336" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; max-width: 680px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">由这张热点图可以看出，用户始终在价格和时间上反复比较，所以在机票的搜索结果页中对于用户最关心的因素应该是价格和时间。我们在设计搜索结果页的时候就应该突出时间和价格两个特征。他们也同样关注如航空公司或者机型等信息，但是这些信息是否真正影响用户的决策呢？曾经有一个用户参加访谈时聊到，非常关注机型，可是当她参与眼动任务流时，在决策中却完全没有关注到机型信息。所以这种现象被称为&ldquo;夸耀效用原理&rdquo;：人们喜欢自己被包围在不必要的功能中 [来自《简约至上》]<strong style="color: rgb(17, 17, 17); ">&nbsp;</strong>。<strong style="color: rgb(17, 17, 17); ">我们需要保留的是那些真正影响用户决策的关键信息。</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="color: rgb(17, 17, 17); ">2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong><strong style="color: rgb(17, 17, 17); ">怎么减的&ldquo;凹凸有致&rdquo;？</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">对于一个搜索结果来说，关键性信息也许会有很多，那么如何更<strong style="color: rgb(17, 17, 17); ">合理的组织这些信息</strong>，并且让它们<strong style="color: rgb(17, 17, 17); ">呈现的更加有层次</strong>，使用户在搜索结果这个步骤中更易进行选择呢？</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="color: rgb(17, 17, 17); ">合理组织信息</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">所谓合理组织信息，就是将关键性信息以及辅助信息内容按照相关性、从属性进行区块化呈现。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">比如一般的搜索列表项会包括重新搜索区域、筛选区域、主要产品区域、辅助特价区域。目前大部分网站对于这四个区域的块状划分还是比较清晰的，但是对于用户最关注的产品列表区域反而有些参差不齐，也是对设计师挑战最大的地方。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我们可以来看一个案例：</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="aligncenter size-full wp-image-3166" title="2012-01-30_170809" src="http://ued.ctrip.com/blog/wp-content/uploads/2012/01/557x304x2012-01-30_170809.png.pagespeed.ic.IX-mIkXzSb.png" alt="" width="557" height="304" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; max-width: 680px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如果让你判断是否缺货，哪个图让你更能一眼看出呢？</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">在A中，将无货通知夹在价格信息下方，导致其关注度远远降低，无法被用户关注到。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">B做的相对较好，他将到货通知放置在购买的位置上，使得用户在想要购买该商品时就能一下子看到无货的通知；</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">C不仅在购买位置上放上了到货通知的按钮，并且还在图片区域明显标志使得该信息更加明显。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">所以从这个细节点就能看出，合理组织信息，能够帮助到用户更快速更有效地了解产品信息避免给用户造成困惑。那么如何才能合理的组织信息呢？我们可以通过一些案例来进行分析。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">a)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 将信息按照不同的功能模块来组织构架</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">比如，机票信息，分为航程信息、航班信息、舱位信息，在信息中，和航程信息相关的，比如出发城市到达城市，出发日期到达日期等都是航程类信息；航班类信息包括，如机型、起抵时间、起抵机场、航空公司；舱位信息包括，如价格、折扣、备注、退改签等。那么在组织这些信息的时候需要考虑信息的从属和相关性，应该把其对应呈现，如下图：</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="aligncenter size-full wp-image-3167" title="2012-01-30_171315" src="http://ued.ctrip.com/blog/wp-content/uploads/2012/01/555x223x2012-01-30_171315.png.pagespeed.ic.wd36nWw_6P.png" alt="" width="555" height="223" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; max-width: 680px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">将来如果有任何其他信息的加入可以考虑对应信息类别来放置其位置。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">b)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 做成纵向列表并且结构化会更容易比较</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如下图所示：B和A均为纵向列表，但是B的产品信息呈现方式是按照从上至下从左至右的顺序组织，而A的产品信息是经过结构化分类之后而分栏展示的。很明显用户能在A中进行上下不同的信息的对比。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="aligncenter size-full wp-image-3168" title="2012-01-30_171545" src="http://ued.ctrip.com/blog/wp-content/uploads/2012/01/549x413x2012-01-30_171545.png.pagespeed.ic.21enew_K52.png" alt="" width="549" height="413" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; max-width: 680px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">c)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 避免不必要信息的重复显示</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如携程列表项中燃油机建和飞行时长信息，在列表项中重复出现，在用户访谈中，用户基本对于灰色条目并没有任何关注度，因此作为辅助型信息相对比较重要的燃油机建信息更换位置，删除飞行时长。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">d)&nbsp;&nbsp;&nbsp;&nbsp; 某些辅助信息可以隐藏显示，但保留入口</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="aligncenter size-full wp-image-3159" title="image009" src="http://ued.ctrip.com/blog/wp-content/uploads/2012/01/252x334ximage009.png.pagespeed.ic.1x203OSIod.png" alt="" width="252" height="334" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; max-width: 680px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如上图，赠品作为辅助信息，也许未必能影响主流用户对于产品的决策，但是做成小的icon hover上去显示出其赠品，也给予喜欢查看赠品信息的用户保留了一个显示的区域，又不干扰用户对主要信息的获取。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="color: rgb(17, 17, 17); ">信息呈现有层次</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">有很多次，需求方经常会要突出某个重要信息，而要求设计师增大字体，增加颜色或者加粗等等行为，但是经验表示，当你想突出某一个信息的时候，或者加粗或者做明显的颜色都行，但是当信息多的时候，那么你这些举动也许完全没有帮助。所以如何呈现信息的层次性不仅需要删减非关键信息，还需要视觉上做合理的设计。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">e)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 降低辅助信息的显示层级从而来突出关键性信息是一个好方法。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="aligncenter size-full wp-image-3160" title="image011" src="http://ued.ctrip.com/blog/wp-content/uploads/2012/01/500x299ximage011.png.pagespeed.ic.YAAKuZHYHB.png" alt="" width="500" height="299" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; max-width: 680px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">上图中，虽然信息层级是从左到右按照用户浏览方向依次减弱其重要级别，但是右侧各种花哨的icon和信息内容反而影响到用户对于评价和成交信息的关注度。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">f)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 块状化列表项</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">使得列表块状化的方式可以通过：框线或者空间间隔等各种视觉方式来实现。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="aligncenter size-full wp-image-3176" title="2012-01-30_173140" src="http://ued.ctrip.com/blog/wp-content/uploads/2012/01/480x388x2012-01-30_173140.png.pagespeed.ic.ERZXqWVtbN.png" alt="" width="480" height="388" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; max-width: 680px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">g)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 最重要的信息层级请保留给用户操作区</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="aligncenter size-full wp-image-3162" title="image015" src="http://ued.ctrip.com/blog/wp-content/uploads/2012/01/500x196ximage015.png.pagespeed.ic.yB6Y_D7Wag.png" alt="" width="500" height="196" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; max-width: 680px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">上图所示，在购买区域明显的颜色区别，使得用户一目了然。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="color: rgb(17, 17, 17); ">3.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong><strong style="color: rgb(17, 17, 17); ">考虑不同产品和不同人群的差异性</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="color: rgb(17, 17, 17); ">不同的产品类型或者不同的用户也会有不同的关键性信息。所以我们在减肥的时候需要对症下药，去了解产品的特点也需要去了解用户的关注点。</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我们还应该要考虑到不同产品类型。就以淘宝为例，不同行业的产品会有完全不同的信息展现。就好比dvd、围巾和服装产品对于图片的关注度是由低到高，因此从下图中可看出，它们的搜索结果，对于图片的尺寸处理也是从小到大的。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="aligncenter size-full wp-image-3178" title="2012-01-30_173354" src="http://ued.ctrip.com/blog/wp-content/uploads/2012/01/511x399x2012-01-30_173354.png.pagespeed.ic.9m2wmIpj1V.png" alt="" width="511" height="399" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; max-width: 680px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">度假产品的人群是非常多样化的，有自由行、团队游、邮轮、当地游等等。每一类型的产品所展示的信息是各有特色的，因此携程在对度假产品搜索结果页进行处理的时候，是根据不同的产品类型，做成了不同的tab切换模式，来进行合理的人群分流。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="aligncenter  wp-image-3155" title="image019" src="http://ued.ctrip.com/blog/wp-content/uploads/2012/01/ximage019.png.pagespeed.ic.0ZSeUMWVk1.png" alt="" width="962" height="345" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; max-width: 680px; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">总结：当我在设计搜索列表的时候，虽然尽量的给搜索列表减肥，可是它的顽固性完全不亚于真正的减肥。在不经意间，不停有人提出的增加这个信息那个信息的要求，慢慢地使搜索列表的减肥不仅不成功，反而反弹的更凶猛。这个或许就是无法协调的业务型需求和用户型需求的永久矛盾。所以减肥不仅仅是交互设计师需要考虑的项，而是更多部门协作更多部门理解的大话题。</p></span><font class="Apple-style-span" face="'Microsoft yahei', Arial, Helvetica, sans-serif"><span class="Apple-style-span" style="font-size: 14px; line-height: 24px;"><br /></span></font><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24px; ">原文地址：</span><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24px; "><a href="http://ued.ctrip.com/blog/?p=3154">http://ued.ctrip.com/blog/?p=3154</a><br /></span><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">本文作者：S++　转载请注明来自：<a href="http://ued.ctrip.com/blog" style="color: rgb(0, 102, 204); text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; "><strong style="color: rgb(17, 17, 17); ">携程UED</strong></a></p></span><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24px; ">编辑：S++小组</span><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Microsoft yahei', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p></span></p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss259/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=259</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=259&amp;key=fe7f38f5</trackback:ping></item><item><title>去哪儿网订火车票 - 一次蛋疼的体验过程</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/jilu258/</link><pubDate>Thu, 29 Dec 2011 12:53:17 +0800</pubDate><guid>http://www.vvwww.com/post/jilu258/</guid><description><![CDATA[<p><img onload="ResizeImage(this,520)" src="http://www.vvwww.com/upload/201112291400477117.png" alt="" title=""/></p><p>&nbsp;</p><p>&nbsp;帮弟弟订回家的火车票，也是同事介绍说去哪儿能订票，所以就去试试~他的订票模式有点儿像代购的意思，不过体验了一圈后觉得很多地方感觉不舒服，正好做个记录和总结。</p><p>这次先不说页面上面的问题，先说说为什么是蛋疼的过程。</p><ul>    <li><strong>12月13日订购了XX次火车票，找的是XX代购点代购，下好了订单。</strong></li>    <li><strong>12月19日收到了短信通知：&ldquo;铁道部在今日实施实名制.........您之前的火车票订单会做退款处理，在1~2天内会收到退款处理短信.......&rdquo;</strong></li>    <li><strong>然后当日去去哪儿重新下了单，等待退款短信。</strong></li>    <li><strong>12月20日查询订单状态后还是&ldquo;出票中&rdquo;状态，于是打电话询问客服。</strong></li></ul><p>下面蛋疼开始.....</p><p>&nbsp;</p><p>我说：&ldquo;我收到XX短信说要重新下单，以前的订单会在2天内做退款处理，但是现在还是出票状态，请问怎么回事儿？&rdquo;。</p><p>&nbsp;</p><p>客服：&ldquo;哦，这个你的联系一下XX代购查询下&rdquo;</p><p>&nbsp;</p><p>我说：&ldquo;你们的订单窗口没有这个XX代购电话啊，还有你们的下单页也没有XX代购的联系方式。。我怎么反馈，你们不能处理么？&rdquo;</p><p>&nbsp;</p><p>客服：&ldquo;我给你XX代购电话，你去查询下&rdquo;</p><p>&nbsp;</p><p>............</p><p>&nbsp;</p><p>等等。。。在这之前我在网上搜索了一下XX的名字。。。我本以为XX就是网上定各种电影票，门票，演唱会票的那个XX，于是打电话过去。。。结果.....人家说我们不是订火车票的那个XX。。。一阵汗，感觉被骗了一样。。</p><p>&nbsp;</p><p>...........</p><p>&nbsp;</p><p>我们再回来。。。当我这次按照客服提供的代购电话打过去后，尽然.....&ldquo;此电话无法拨通&rdquo;.....心里又是一阵阵痛......已经有点儿怒气了(虽然本人脾气好)。</p><p>&nbsp;</p><p>于是我又拨通了去哪儿客服电话.....这次，我用足了劲儿想好好反映这个问题。。。</p><p>&nbsp;</p><p>我说：&ldquo;..........(又说明了我的情况)，你们怎么搞的啊，这个代购电话根本就打不通~~这个能处理么？我还没有收到短信，订单状态还是出票中。。。&rdquo;</p><p>&nbsp;</p><p>客服：&ldquo;哦，我们知道这个~我们正在处理，今天你就能收到短信！（说的很肯定），好吧~你说的这个问题我们会记录反馈的，您再等等&rdquo;</p><p>&nbsp;</p><p>我说：&ldquo;好吧，你们让我误解了XX代购就是XX网，应该在网站上要标明代购的电话和一些基本资料的啊。。。这个也能增加公信度&rdquo;</p><p>&nbsp;</p><p>于是我又安静的等待了一天。。。。但是任然无任何短信</p><p>&nbsp;</p><ul>    <li><strong>12月20日下午7点左右吧，我有拨通了去哪儿客服。</strong></li></ul><p>我说：&quot;............(我又重复了此事件。。。你说你们就不能记录么？？？每次让我不停的重复时间，很蛋疼的！)，到现在还未收到短信。而且状态还是出票中，什么时候给处理?&quot;</p><p>&nbsp;</p><p>客服：&ldquo;很抱歉，这个你提供以下订单的后四位，我们反映给后台人员去联系XX代购做处理。。(啊呀，这个不是能处理么？为什么第一次要让我自己联系)&rdquo;</p><p>&nbsp;</p><p>我说：&ldquo;行，什么时候给我信儿&rdquo;</p><p>&nbsp;</p><p>客服：&ldquo;24小时内&rdquo;</p><p>&nbsp;</p><p>好吧，等你们的信儿。。。12月22日的晚上20点。。终于收到了退款短信。但是短信内容又让我莫名其妙了一回：&ldquo;您的火车票没票，请您更换日期......订单号......XX代购名&rdquo;，退票就是退票短信么，怎么会提示说没票呢？</p><p>&nbsp;</p><p>终于在某日收到了退的钱。。后来接到客服电话回访。。不过为啥要逼我到非骂不可的时候才能积极处理呢？</p><p>&nbsp;</p><p><strong>我们总结一下吧：</strong>整个过程本来可以轻松完成的，但是为什么处理起来这么蛋疼呢？</p><ul>    <li><strong>客服人员在传达信息时存在问题</strong>，如果都像最后一位客服去积极处理问题，也不会让我感觉到这么蛋疼。</li>    <li><strong>代购的信息不准确</strong>，也没有在重要位置告诉订票的用户，降低信任度，再出现问题时不能及时沟通处理。</li>    <li><strong>网站查询订单的流程太复杂</strong>，订单号很长，输入起来本来很麻烦难免输入错误，其实可以直接使用手机号码查询（输入手机号，接收到短信验证码后，验证手机后进入系统即可查询所有订单），省去很多成本有保证了安全。</li>    <li>如果是注册用户，查询订单仍然需要输入订单号和手机号，这个体验更不好。。。完全可以直接查询或参照上面方式。</li>    <li>本次暂不对页面产品做过多评价。。。</li></ul><p>希望去哪儿能够引以为戒，这样的订购体验真不好。。。服务做到位自然会成为口碑。</p><p>&nbsp;</p>]]></description><category>启己随笔</category><comments>http://www.vvwww.com/post/jilu258/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=258</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=258&amp;key=86168c17</trackback:ping></item><item><title>密码泄露事件不断升级 - 黑客教父详解账号泄露全过程</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss257/</link><pubDate>Thu, 29 Dec 2011 10:50:47 +0800</pubDate><guid>http://www.vvwww.com/post/rss257/</guid><description><![CDATA[<p>&nbsp;</p><p>&nbsp;本次密码泄露时间真是愈演愈烈，从网上看到一篇文章转来看看，深感中国目前的互联网安全方面实在是很薄弱....<br /><br />12月28日消息，2011年12月19日有着中国黑客教父之称的goodwell龚蔚在其腾讯微博发表了一篇微博再次指出互联网信任危机一触即发，其后的48小时，中国互联网迎来了历史上最大的灾难性的安全事件。腾讯科技特邀请龚蔚从专业角度对本次事件进行深度解析。</p><p>龚蔚表示，本次黑客公布的用户账号约为1亿个用户账号及密码相关信息，预计地下黑客掌握了更多的互联网用户账号信息，本次泄露及公布的与实际被黑客掌握的用户账号数相比只是冰山一角，<strong>预计有将近4到6亿的用户账号信息在黑客地下领域流传</strong>（2011年互联网数据统计，中国互联网网民为4.8亿），这次被黑客公布爆库的网站数据信息只是黑客地下流传的极少一部分。<br />他透露，其中有相当一部分网站采用明文方式存储用户密码，分析预计约有2亿的用户密码为明文存储。其余90%以上的网站采用公开的MD5算法对用户密码进行存储，通过简单的彩虹表碰撞（一种加密密码破解的方法）可以在数秒钟内破解加密存储的密码。<br /><br /><strong>以下为本次账号泄露的基本时间表：</strong></p><ul>    <li>12月21日：CSDN 640W用户帐户，密码，邮箱遭到黑客泄露</li>    <li>12月22日：中国各大知名网站全面沦陷.涉及范围甚广，泄露信息涉及用户相关业务甚多.... 一场席卷全中国的密码安全问题爆发了....</li>    <li>12月23日：经过确认 CSDN 泄露 多玩 泄露 梦幻西游帐户通过木马泄露 人人网部分泄露</li>    <li>12月23日：网友爆料 天涯沦陷...7K7K包中包含天涯帐户密码!!!互联网安全何在???</li>    <li>12月24日：178沦陷 UUU9沦陷 事态蔓延...</li>    <li>12月24日：天涯全面沦陷 泄露多达900W帐户信息...</li>    <li>12月24日：网易土木在线也沦陷，数据量惊人...</li>    <li>12月25日：百度疑因帐号开放平台泄露帐户信息...</li>    <li>12月25日：北京麒麟网信息科技有限公司疑泄露百度与PPLive帐户与密码.并且自身帐户信息全部泄露...</li>    <li>12月25日：UUU9.COM被黑客两次拖库..</li>    <li>12月25日：事态升级天涯疑泄露4000W用户资料</li>    <li>12月25日：178第二次被拖库泄露数据110W条</li>    <li>12月25日：木蚂蚁被爆加密密文用户数据，约13W数据</li>    <li>12月25日：知名婚恋网站5261302条帐户信息证实...</li>    <li>12月26日：myspace泄露，迅雷又成功离线3个泄露包!</li>    <li>12月26日：ispeak泄露帐户信息 已验证!请官方通知会员修改密码!</li>    <li>12月26日：网络流传包17173.7z中17173.0为178帐户信息，178惨被拖库3次</li>    <li>12月26日：网络流传包17173.7z中17173.3为UUU9.COM帐户信息，泄露数据不详</li>    <li>12月26日：塞班智能手机网校验准确率高达70%！！或塞班智能手机网沦陷</li>    <li>12月27日：网易土木论坛通过碰撞分析密码，用户资料全部属实！共计135文件，4.31G 资料泄露时间疑为2011-07-09 15：09：11(已论坛发帖通知，厂商未回应.)</li>    <li>12月27日：178.com彻底沦陷，共计泄露超出1100W+ 数据!</li>    <li>12月27日：766验证泄露，泄露数据十余万！</li>    <li>12月27日：ys168验证泄露，泄露数据三十余万！</li>    <li>12月27日：凡客20W 当当10W 卓越20W 用户资料验证泄露</li>    <li>12月28日：太平洋电脑泄露200W用户资料包含用户帐户</li>    <li>12月28日：大学数据库泄露，身份证信息泄露，更为敏感内容糟骇客泄露，泄露数据不详，只能靠截图揣摩!</li></ul><p><strong>以下为本次账号泄露情况的基本信息表：</strong></p><ul>    <li>CSDN共计泄露640万个帐号，泄漏信息：帐号、明文密码、电子邮件；</li>    <li>多玩：共计泄露800万个帐号，泄漏信息：帐号、MD5加密密码、部分明文密码，电子邮件，多玩昵称；</li>    <li>178.COM：共计泄露188万个账号，泄漏信息：帐号、MD5加密密码、全部明文密码、电子邮件、178昵称(178账户通用NGA)</li>    <li>天涯：共计泄露4000万个帐号(预计超过4000W数据)，泄漏信息：帐号、明文密码、电子邮件</li>    <li>人人网：共计泄露500万个帐号，泄漏信息：明文密码、电子邮件</li>    <li>UUU9.COM：共计泄露700万个帐号，泄漏信息：帐号、MD5加密密码、全部明文密码、电子邮件、U9昵称</li>    <li>网易土木在线：约4.3GB 137个文件，泄漏信息：帐号、MD5加密密码、其他相关数据</li>    <li>梦幻西游：约1.4G(木马盗取)，泄漏信息：帐号、邮箱、明文密码、角色名称、所在服务器、最后登陆时间、最后登陆IP。</li>    <li>北京麒麟网信息科技有限公司：共计泄露9072966个帐号，泄漏信息：帐户、明文密码</li>    <li>知名婚恋网站：共计泄露5261302个帐号，泄漏信息：帐户、明文密码</li>    <li>Ispeak.CN：共计泄露1680271个帐号，泄漏信息：帐户、明文密码、昵称</li>    <li>木蚂蚁：共计泄露13W帐号，泄漏信息：帐户、加密密码、数据库排序ID、其他信息</li>    <li>塞班论坛：共计泄露约140W帐号 泄漏信息：帐户、明文密码、电子邮箱</li>    <li>766.COM：共计泄露约12W帐号，泄漏信息：帐户、md5(md5(pwd).salt)密码、salt、电子邮箱、数据库排序ID</li>    <li>ys168：共计泄露约30W帐号，泄漏信息：帐户、明文、电子邮箱</li>    <li>当当：共计泄露约10W用户资料，泄漏信息：真实姓名、电子邮件、家庭住址、电话</li>    <li>凡客：共计泄露约20W用户资料，泄漏信息：真实姓名、电子邮件、家庭住址、电话</li>    <li>卓越：共计泄露约20W用户资料，泄漏信息：真实姓名、电子邮件、家庭住址、，电话</li></ul><p><strong>谁是幕后的主谋？</strong><br />龚蔚认为，从某种意义上说任何一个安全厂商都可能是事件之后直接的利益获得者，首次公布CSDN泄密信息为金山一个不知名的技术人员，但事件的第一个出场人物不是这些数据的最早拥有者，且就算凭借他的一己之力也不可能掌握如此庞大的数据，面对事件带来的极大社会影响谁都可以预知，显然作为长期站在黑客对立面的商业公司肯定不愿意搅这趟浑水。<br />他表示，从技术分析，一个或者几个联合体的黑客团队完全可能掌握这些庞大的地下信息，但是公布这些信息显然是对他们没有任何价值的，就目前来看还没有一个黑客团队公布对该事件的任何信息，公布近亿的用户数据就为了一个出名显然不可能。<br />他认为这次得信息泄露就是一场蝴蝶效应，当一部分密码被泄露后，一方面用户首先会做的就是更改他所有网站的密码，而另一方面对于黑客来说，他以前掌握的这些用户账号密码但来自于其他不同的网站，当黑客发现他们的密码将不再有任何的价值和意义时，随即娱乐大众拿出自己掌握的数据来与大家分享一下，用黑客那种独有的桀骜不驯的性格愚弄和嘲讽这些所谓的门户网站。这是一种连锁反应。<br /><strong>产业链解析</strong><br />龚蔚称，黑客地下产业细分很明确，一旦获得用户账户信息（黑客们习惯称为刷库），将进行流水化的洗库工作，庞大的群体等待着这些账户密码（黑客俗称洗库），下线洗库的首先判断是否可以登录其他所有的将近500个大型网站，然后分门别类的区分出不同的账号价值，比如短位QQ账号（5位6位的QQ号），带有虚拟币的系统比如支付宝系统，网游系统，通过第一次的刷库将其最直接的虚拟币或游戏账号进行转移，第二梯队根据刷下的库对用户账户信息进行筛选，将用户的一些基本信息进行保存，比如密码习惯，找回密码的答案，然后再根据这些信息去尝试用户其他的账户，同时进行二次刷库。<br />掌握某些网站的关键维护人员的用户账号信息后，他们的密码很可能就是某些网站的维护密码，这为刷库的黑客带来了更多的入侵机会，他们将会尝试这些管理员的密码扩大入侵的范围，（黑客俗称&ldquo;社会工程学破解&rdquo;）。<br />龚蔚表示，更多的产业链在等着这些刷库工作者，用户数、游戏运营商需要注册用户数，广告商要用户数，刷库的可以在短时间内将任何有需求的注册用户数提升上去，而且都是真实的用户。<br />他透露，更为可怕的是，根据数据库可以判断出账户的社会关系，如果一个密码数据库里只有5个人用，那就是马甲了。如果一个邮件后缀只有30个用户那你们就是某种特定关系的朋友或者是同事。<br />一个IP用户不同账号同时发了几次微博，那你一定离得很近。如果一个密码找回的问题有着同样的答案且不多过10个重复率，那你们之间一定有联系。还有更多的黑客分析算法，目的只有一个这将作为下一个产业链的开始，可以是诈骗，可以是敲诈。因为他知道网民背后所有的秘密。<br />他介绍，就算最后所有的价值都被榨取完了，这些账号还是有利用价值的，这些信息将被无情的低价倒卖给一些专门发送垃圾邮件，垃圾广告的群体，你的每一次点击将会给他带来1毛钱的收入</p><p>&nbsp;来源：<a href="http://tech.qq.com/a/20111228/000241.htm">http://tech.qq.com/a/20111228/000241.htm</a></p><p>&nbsp;</p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss257/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=257</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=257&amp;key=d018c4a2</trackback:ping></item><item><title>互联网用户心理分析 - 具有9种常见特征</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss256/</link><pubDate>Fri, 23 Dec 2011 18:24:56 +0800</pubDate><guid>http://www.vvwww.com/post/rss256/</guid><description><![CDATA[<p>&nbsp;<img alt="" src="/upimg/xinli.jpg" /></p><p>&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">注：本文是我在淘宝的内网中发现的一片文章，作者来自于测试团队的霜波同学，她是我淘宝讲师团队的同事，爱好广泛，去年一年都在研究心理学。哈哈，让我甚是佩服。这篇文章写的是互联网用户的心理学特征，我觉得分析的很到位，感觉这些行为就是每天发生在自己身上一样。我想，这对设计师来说，了解这些用户行为背后的原因是非常重要的。故转发此文，与大家一同分享。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">近半年持续关注了一些用户反馈和客服电话，从一些常见问题中总结出了八点互联网用户常见心理特征，在此共享，希望能共同努力提高用户体验。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">1：惯性</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;你们的排序按钮为什么没有了？&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">客服：&ldquo;亲，我们把它放在右边了，这样更加的明显哦。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;你们很闲吗？没事弄这个按钮做什么！&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">有一个故事，说的是将奶酪放在了迷宫的第三个格子，然后放一只老鼠进入迷宫，第一次的时候，老鼠先找第一个，再找第二个，最后在第三个格子中找到了，很高兴。第二次的时候，先找第一个，再找第二个，又再第三次的格子中找到了，很高兴。第三次的时候，老鼠直接去了第三个格子，找到奶酪。第四次，第五次，奶酪没有动。第六次的时候，奶酪被移入了第一个格子，老鼠看不到奶酪，于是生气，郁闷，焦躁，原地打转，却放弃了继续寻找。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">人和老鼠一样，甚至比老鼠更加的具有惯性，更加的善于总结规律，更加的容易感觉生气和不爽。一旦他学会了用一个按钮，第二次一定会去原地按照原来的方法使用。如果位置或者方法和以前不一样，他会很不习惯，并且认为这是一个非常不爽的改变。所以如果产品经理要改变原有的规律一定要三思再三思，即使你知道你是在让原来的过程更加的美观，更加方便，更加的绚丽，也请考虑到原有老用户的习惯。在吸引新用户的同时如果让老用户少去学习是产品经理需要综合考虑的问题。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">&nbsp;2：我就是全部</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;你们的平台真烂，我商品的显示全部错了。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">客服：&ldquo;亲，别人的都是好的。是不是你设置错了？&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;别人和我有什么关系，我的商品显示出来就是错的！&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">看上去蛮不讲理，但是每个人都是自己世界的国王，他对他自己全部的负责，所以当我们很轻易的说少数人的时候，也应该去体会这少数人的全部世界，他和我们关心自己的kpi，关心自己的晋升一样关心着自己的小店铺，对我们来说的沧海一粟，对他们来说也许是他们最珍惜的珍珠。承认彼此的平等，也正是这些微不足道给出反馈的用户帮助淘宝一而再再而三用户体验的改进，他们是我们最优秀的不取工资还不断帮我们提交bug的用户测试工程师，对于如此无私的行为，我们是应该感谢了？还是感谢呢？还是感谢呢？</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">&nbsp;3：第一印象很重要</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;你们应该提供一个**的功能。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">客服：&ldquo;亲，我们有了。在**的链接上可以链接进去。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;我之前用过，一点都不好用。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">客服：&ldquo;我们改进了，你再试试。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户（一段时间之后）：&ldquo;我就说过不好用，你看看，还有***都不是我想要的。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">第一印象一旦形成，接下来所有的关注力都是为了证明自己的第一印象是正确的。所以，不要责怪你的用户不够宽容，不够拥抱变化，不能理解你持续的努力，是你在之前没有竭尽全力去给他一个好的体验，一个满意的结果。所有单身的同学注意了，别随便糟蹋自己的形象，很可能在某一个你没有准备好的时刻，你的Mr right就出现了，然后你需要很长很长得时间去重塑你的新形象。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">4：相信熟人</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;我朋友说你们的这件商品很好，我也要一件。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">这是买一件东西最肯定的理由，经常在人多的地方听到一堆的女生在说这样的对话：&ldquo;你的衣服很漂亮，在哪儿买的？&rdquo;&ldquo;在淘宝。&rdquo;&ldquo;快把链接发给我。&rdquo;每次听到这样的言语都忍住不的微笑，因为成为这家有意义公司的一员而骄傲。感谢这些八卦的女生们，她们用言语证明了淘宝的价值，她们是淘宝最佳的代言人。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">&nbsp;5：简单</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;能不能不要让我回答这么多问题，填这么多信息。我只是想买一件衣服。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">刚开始的时候我们曾经想做成最简单的产品，随着时间的发展，随着需求的深入，随着问题的展开，我们经常看到的是一个复杂不堪的产品。然后用户望而却步：&ldquo;知道吗，我对你每一步的迈出和深入都需要勇气和热情。但是在得到真相之前，我不确定的我的这种付出是否值得。&rdquo;所以，别让潜力用户在漫漫长途中放弃。是我们的重重关卡将他们拒之门外。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">&nbsp;6：文字图片结合</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;能不能在文字上直接给张图片？看着直观漂亮。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;能不能在图片旁边写上文字，否则不知道是在卖什么，干什么。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">人的头脑分左脑右脑，右脑喜欢图片、直接感觉；左脑喜欢文字，思考。有人喜欢右脑思维，有人喜欢左脑思维，作为产品的设计者，不用纠结，不用分类，让用户的2块头脑都得到充分的享受和利用吧。图片文字合理完美的结合是对不同用户最好的尊重。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">&nbsp;7：金钱安全</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;我把钱放在你们这儿安全吗？你确定吗？&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;你确定我的退款能成功吗？我把货退还给他了，钱能拿回来吗？&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">金钱永远是让人担心的东西，金钱的安全一定是用户的第一考虑，如果我们不能给他们金钱的安全感，我们就无法留住用户，比金钱更加重要的应该是用户的信任和信心，所以在金钱的安全和保障上付出任何的努力应该都值得。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">8：搜索准确</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;你们的搜索真差，我找不到我想要得商品。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">客服：&ldquo;能告诉我你想找什么吗？&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;我就想要自己喜欢的东西。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">客服：&ldquo;。。。&rdquo;冷汗直冒中</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">也许我不知道自己想要什么，但是你们应该知道我想要什么。这是很多用户的心理，我也是。永远不要指责用户的无理取闹，就像不要指责女生的善变。如果你足够把她放在心上，你应该会知道她喜欢什么，想要什么，会买什么。她的每一次浏览，每次点击，每次购买都在告诉你她喜欢什么，想要什么，这些都是她给你的机会，不要浪费。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">&nbsp;9：保护私隐</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户：&ldquo;你们太过分了，你们把充气娃娃让我爸爸接收了，然后，然后。。。他还当场打开了。&rdquo;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">每个人都有自己的私隐和不想让人知道的信息，不可以想当然的将这些信息透露出去，信任的建立很困难，需要很长的时间，信任的失去也许只是一瞬间，一个不小心的安全漏洞，一个不合适的需求，一次不小心的透露，我们就可能摧毁我们和用户之前长时间建立的信任关系。珍惜用户包括珍惜他提供给你的一切信息。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我常想，作为产品我们应该把用户放第一，作为员工我们应该把公司放第一，作为主管我们应该把员工放第一，可是这么多第一，谁是真正的第一？问问自己的良心吧，你能坦然面对你所有的客户、员工、团队成员问心无愧，能堂堂正正说出自己所做所为所思所想，应该就是真正的成功了。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">转自：<a href="http://ued.taobao.com/blog/2011/12/20/psychological-characteristics-of-internet-users/">http://ued.taobao.com/blog/2011/12/20/psychological-characteristics-of-internet-users/</a></p><p>&nbsp;</p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss256/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=256</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=256&amp;key=28cd60d6</trackback:ping></item><item><title>85个很赞的响应式网页设计</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss255/</link><pubDate>Sat, 10 Dec 2011 14:46:05 +0800</pubDate><guid>http://www.vvwww.com/post/rss255/</guid><description><![CDATA[<p>转载自：<a href="http://www.qianduan.net/85-amazing-showcase-of-responsive-web-design.html">http://www.qianduan.net/85-amazing-showcase-of-responsive-web-design.html</a></p><p>看着很不错哦，先收藏慢慢看！~<br /><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 微软雅黑, helvetica, Arial; font-size: 14px; line-height: 21px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; ">想要查看效果很简单，打开这些页面，然后缩放浏览器窗口就可以了&mdash;&mdash;当然，要用chrome/safari/firefox/opera等浏览器，IE请绕道～～</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; ">当然，如果你有发现国内有好的类似设计，欢迎推荐！</p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.qianduan.net/" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">前端观察</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.qianduan.net/" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img src="http://img.qianduan.net/uploads/2011/11/qianduan.jpg" alt="前端观察" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://foodsense.is/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">food sense</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://foodsense.is/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img src="http://img.qianduan.net/uploads/2011/11/food_sense.jpg" alt="food sense" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.forefathersgroup.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Forefathers</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://forefathersgroup.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_1.jpg" alt="Forefathers" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.fork-cms.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Form CMS</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.fork-cms.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_2.jpg" alt="Fork CMS" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://havocinspired.co.uk/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Havoc Inspired</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://havocinspired.co.uk/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_3.jpg" alt="Havoc Inspired" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.jetcooper.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Jet Cooper</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.jetcooper.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_4.jpg" alt="Jet Cooper" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://galaxy.fili.nl/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Filidor Wiese</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://galaxy.fili.nl/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_5.jpg" alt="Filidor Wiese" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://conferenciarails.org/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Conferencia Rails</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://conferenciarails.org/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_6.jpg" alt="Conferencia Rails" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.designingwithdata.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Designing With Data</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.designingwithdata.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_7.jpg" alt="Designing With Data" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://thehappybit.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">The Happy Bit</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://thehappybit.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_8.jpg" alt="The Happy Bit" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://webdesignyorkshire.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Webdesign Yorkshire</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://webdesignyorkshire.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_9.jpg" alt="Webdesign Yorkshire" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://highwayhurricanes.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Highway Hurricanes</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://highwayhurricanes.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_10.jpg" alt="Highway Hurricanes" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://simplebits.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Simple Bits</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://simplebits.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_11.jpg" alt="Simple Bits" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://2011.dconstruct.org/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">2011 dConstruct</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://2011.dconstruct.org/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_12.jpg" alt="2011 dConstruct" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://hardboiledwebdesign.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Hardboiled Webdesign</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://hardboiledwebdesign.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_13.jpg" alt="Hardboiled Webdesign" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://stephencaver.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Stephen Caver</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://stephencaver.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_14.jpg" alt="Stephen Caver" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://nicelyreplayed.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Nicely Replayed</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://nicelyreplayed.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_15.jpg" alt="Nicely Replayed" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://electricpulp.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Electric Pulp</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://electricpulp.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_16.jpg" alt="Electric Pulp" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://teixido.co/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Teixido</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://teixido.co/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_17.jpg" alt="Teixido" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://edgeofmyseat.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Edge of My Seat</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://edgeofmyseat.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_18.jpg" alt="Edge of My Seat" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://robot-or-not.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Robot or Not</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://robot-or-not.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_19.jpg" alt="Robot or Not" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://teegallery.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Tee Gallery</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://teegallery.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_20.jpg" alt="Tee Gallery" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://urban-svensson.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Urban Svensson</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://urban-svensson.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_21.jpg" alt="Tee Gallery" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://forum.camendesign.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Camendesign Forum</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://forum.camendesign.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_22.jpg" alt="Camendesign Forum" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://authenticjobs.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Authentic Jobs</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://authenticjobs.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_23.jpg" alt="Authentic Jobs" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://lynnandtonic.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Lynn and Tonic</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://lynnandtonic.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_24.jpg" alt="Lynn and Tonic" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://calebacuity.us/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">CalebAcuity</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://calebacuity.us/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_25.jpg" alt="CalebAcuity" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://3200tigres.wwf.fr/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">3200 Tigres</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://3200tigres.wwf.fr/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_26.jpg" alt="3200 Tigres" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://upperdog.se/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Upper Dog</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://upperdog.se/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_27.jpg" alt="Upper Dog" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://fivesimplesteps.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Five Simple Steps</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://fivesimplesteps.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_28.jpg" alt="Five Simple Steps" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://iawriter.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">iaWriter</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://iawriter.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_29.jpg" alt="iaWriter" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://red-root.com/cv/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Red Root</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://red-root.com/cv/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_30.jpg" alt="Red Root" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://pauladamsmith.com/blog/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Paul Adamsmith</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://pauladamsmith.com/blog/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_31.jpg" alt="Paul Adamsmith" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://miekd.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Miekd</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://miekd.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_32.jpg" alt="Miekd" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://impactdialing.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Impact Dialing</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://impactdialing.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_33.jpg" alt="Impact Dialing" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://pgrady.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Pgrady</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://pgrady.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_34.jpg" alt="Pgrady" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://51bits.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">51bits</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://51bits.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_35.jpg" alt="51bits" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://glitch.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Glitch</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://glitch.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_36.jpg" alt="Glitch" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.getskeleton.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Get Skeleton</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.getskeleton.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_37.jpg" alt="Get Skeleton" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://us.illyissimo.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Illyissimo</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://us.illyissimo.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_38.jpg" alt="Illyissimo" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://morehazards.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">More Hazards</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://morehazards.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_39.jpg" alt="More Hazards" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://foodsense.is/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Food Sense</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://foodsense.is/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_40.jpg" alt="Food Sense" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://naomiatkinsondesign.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Naomi Atkinson Design</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://naomiatkinsondesign.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_41.jpg" alt="Naomi Atkinson Design" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://diablomedia.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Diablo Media</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://diablomedia.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_42.jpg" alt="Diablo Media" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.touchtech.co.nz/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Touch Tech</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.touchtech.co.nz/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_43.jpg" alt="Touch Tech" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://gregmcausland.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Greg Mcausland</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://gregmcausland.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_44.jpg" alt="Greg Mcausland" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://visuadesign.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Visua Design</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://visuadesign.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_45.jpg" alt="Visua Design" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.glueisobar.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Glue Isobar</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.glueisobar.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_46.jpg" alt="Glue Isobar" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://henry.brown.name/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Henry Brown</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://henry.brown.name/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_47.jpg" alt="Henry Brown" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.bostonglobe.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Boston Globe</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.bostonglobe.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_48.jpg" alt="Boston Globe" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://asuonline.asu.edu/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">ASU Online</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://asuonline.asu.edu/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_49.jpg" alt="ASU Online" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://10k.aneventapart.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">10K An Event Apart</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://10k.aneventapart.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_50.jpg" alt="10K An Event Apart" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://helloxie.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Helloxie</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://helloxie.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_51.jpg" alt="Helloxie" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://meltmedia.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Melt Media</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://meltmedia.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_52.jpg" alt="Melt Media" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.space150.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Space150</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.space150.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_53.jpg" alt="Space150" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://colly.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Colly</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://colly.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_54.jpg" alt="Colly" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://lessframework.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Less Framework</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://lessframework.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_55.jpg" alt="Less Framework" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://hicksdesign.co.uk/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Hicks Design</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://hicksdesign.co.uk/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_56.jpg" alt="Hicks Design" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://fivedetails.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Five Details</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://fivedetails.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_57.jpg" alt="Five Details" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://thinkvitamin.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Think Vitamin</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://thinkvitamin.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_58.jpg" alt="Think Vitamin" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://naomiatkinson.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Naomi Atkinson</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://naomiatkinson.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_59.jpg" alt="Naomi Atkinson" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://8faces.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">8Faces</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://8faces.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_60.jpg" alt="8Faces" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://clearleft.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Clearleft</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://clearleft.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_61.jpg" alt="Clearleft" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://lanyrd.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Lanyrd</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://lanyrd.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_62.jpg" alt="Lanyrd" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://lapse.org/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Lapse</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://lapse.org/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_63.jpg" alt="Lapse" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://seesparkbox.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">See Sparkbox</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://seesparkbox.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_64.jpg" alt="See Sparkbox" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.designmadeingermany.de/magazin/5/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Design made in Germany Magazine 5</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.designmadeingermany.de/magazin/5/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_65.jpg" alt="Design made in Germany Magazine 5" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://earthhour.fr/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Earth Hour</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://earthhour.fr/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_66.jpg" alt="Earth Hour" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://cssgrid.net/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">CSS Grid</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://cssgrid.net/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_67.jpg" alt="CSS Grid" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.stpaulsschool.org.uk/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">St. Pauls School</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.stpaulsschool.org.uk/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_68.jpg" alt="St. Pauls School" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://cognition.happycog.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Cognition</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://cognition.happycog.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_69.jpg" alt="Cognition" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://sasquatchfestival.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Sasquatch Festival</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://sasquatchfestival.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_70.jpg" alt="Sasquatch Festival" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://forgeideas.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Forge Ideas</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://forgeideas.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_71.jpg" alt="Forge Ideas" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://sweethatclub.org/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Sweet Hat Club</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://sweethatclub.org/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_72.jpg" alt="Sweet Hat Club" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://ribot.co.uk/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Ribot</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://ribot.co.uk/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_73.jpg" alt="Ribot" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://asburyagile.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Asbury Agile</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://asburyagile.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_74.jpg" alt="Asbury Agile" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.dolectures.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">do Lectures</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.dolectures.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_75.jpg" alt="do Lectures" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://www.madebysplendid.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Made by Splendid</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://www.madebysplendid.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_76.jpg" alt="Made by Splendid" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://yaronschoen.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Yaron Schoen</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://yaronschoen.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_77.jpg" alt="Yaron Schoen" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://trentwalton.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Trent Walton</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://trentwalton.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_78.jpg" alt="Trent Walton" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://owltastic.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Owltastic</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://owltastic.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_79.jpg" alt="Owltastic" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://kiskolabs.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Kiskolabs</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://kiskolabs.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_80.jpg" alt="Kiskolabs" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://staffanstorp.se/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Staff Anstorp</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://staffanstorp.se/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_81.jpg" alt="Staff Anstorp" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://dustandmold.net/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Dust and Mold</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://dustandmold.net/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_82.jpg" alt="Dust and Mold" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://spigotdesign.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Spigot Design</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://spigotdesign.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_83.jpg" alt="Spigot Design" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://convergese.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">Convergese</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://convergese.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_84.jpg" alt="Convergese" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p><h3 style="margin-top: 0.5em; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 22px; font: normal normal bold 22px/normal 微软雅黑, Arial, verdana; color: rgb(51, 51, 51); text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; "><a href="http://css-tricks.com/" target="_blank" style="color: rgb(51, 51, 51); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; text-shadow: rgba(50, 50, 50, 0.296875) 1px 1px 3px; ">CSS-Tricks</a></h3><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 1.8; "><a href="http://css-tricks.com/" target="_blank" style="color: rgb(44, 98, 136); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; "><img title="85个很赞的响应式网页设计" src="http://img.qianduan.net/uploads/2011/11/post_1_85.jpg" alt="CSS-Tricks" style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-style: initial; border-color: initial; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; -webkit-box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; box-shadow: rgba(150, 150, 150, 0.296875) 1px 1px 4px; " /></a></p></span></p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss255/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=255</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=255&amp;key=d862d6bd</trackback:ping></item><item><title>App推荐网站收集 - 含国内外iPhone 、iPad软件游戏App推荐，iOS App推荐网站不断更新中，还有每日限时免费app推荐哦</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss254/</link><pubDate>Wed, 07 Dec 2011 17:54:58 +0800</pubDate><guid>http://www.vvwww.com/post/rss254/</guid><description><![CDATA[<p>&nbsp;</p><p><img alt="" src="http://www.chinanews.com/cr/2011/1018/647478544.jpg" /></p><p><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">国内</strong></p><ol style="margin-top: 0px; margin-right: 0px; margin-bottom: 1em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; list-style-type: decimal; list-style-position: initial; list-style-image: initial; background-position: initial initial; background-repeat: initial initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">社会化推荐    <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; list-style-type: disc; list-style-position: initial; list-style-image: initial; background-position: initial initial; background-repeat: initial initial; ">        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">信有网&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.xinyou.com/">http://www.xinyou.com</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">揣着&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.chuaizhe.com/">http://www.chuaizhe.com</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">App汇&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.apphui.com/">http://www.apphui.com</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">疯狂盒子&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.crazybox.cn/">http://www.crazybox.cn</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">网易应用&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://m.163.com/">http://m.163.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">微应用&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.oooapp.com/">http://www.oooapp.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">iAPP4Me&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://iapp4me.com/">http://iapp4me.com</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Funso果粉社区&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.funso.com/">http://www.funso.com</a></li>    </ul>    </li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Blog形式推荐    <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; list-style-type: disc; list-style-position: initial; list-style-image: initial; background-position: initial initial; background-repeat: initial initial; ">        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">爱Apps（限时免费）&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.iapps.im/">http://www.iapps.im/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">51ipa软件精选&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://51ipa.com/">http://51ipa.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">搞趣&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.gao7.com/">http://www.gao7.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">苹果I派党&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.ipadown.com/">http://www.ipadown.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">苹果猫人吧&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.maoren8.com/">http://www.maoren8.com</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">iGoodApps(儿童教育App推荐)&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://igoodapps.com/">http://igoodapps.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">工程师爸爸(儿童App)&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.appshare.cn/">http://www.appshare.cn/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">任玩堂&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.ewtang.com/">http://www.ewtang.com</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">iOS玩意&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.iostoy.com/">http://www.iostoy.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">我是App爱好者&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.54apper.com/">http://www.54apper.com</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">App中文网&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.app178.com/">http://www.app178.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">App游戏部落&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.appgz.com/">http://www.appgz.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">苹果点评网&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.appledp.com/">http://www.appledp.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Gameway&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.gameway123.com/">http://www.gameway123.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">限时免费App（限时免费）&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.freeappinfo.com/">http://www.freeappinfo.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">App 堂（限时免费）<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.apptang.com/">http://www.apptang.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Apps ku&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://appsku.com/">http://appsku.com/</a></li>    </ul>    </li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">其他    <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; list-style-type: disc; list-style-position: initial; list-style-image: initial; background-position: initial initial; background-repeat: initial initial; ">        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">威锋网&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.weiphone.com/">http://www.weiphone.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">苹果园&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.app111.com/">http://www.app111.com</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">苹果App分享网&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.pgapp.com/">http://www.pgapp.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">iPhone中文网(电玩巴士旗下)&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://iphone.tgbus.com/">http://iphone.tgbus.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">App43锋锋网&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://app43.com/">http://app43.com</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">有App&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.youapp.cn/">http://www.youapp.cn</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">iPad网址导航&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://ipaddh.com/">http://ipaddh.com/</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">iPhone网址导航&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.ipdaohang.com/">http://www.ipdaohang.com</a></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">最近更新应用&nbsp;&nbsp;<a target="_blank" href="http://www.pingapp.net/">http://www.pingapp.net/</a></li>    </ul>    </li></ol><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">国外</strong></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; "><ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; list-style-type: disc; list-style-position: initial; list-style-image: initial; background-position: initial initial; background-repeat: initial initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Appolicious&nbsp;<a target="_blank" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.appolicious.com/">http://www.appolicious.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Appspace&nbsp;<a target="_blank" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.appspace.com/">http://www.appspace.com</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Chomp&nbsp;<a target="_blank" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://chomp.com/">http://chomp.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Appshopper&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://appshopper.com/">http://appshopper.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Appsfrie&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://appsfire.com/">http://appsfire.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">AppstoreHQ&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://iphone.appstorehq.com/">http://iphone.appstorehq.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Yahoo Apps&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://apps.search.yahoo.com/">http://apps.search.yahoo.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">148App&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.148apps.com/">http://www.148apps.com</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">iphoneapplicationlist&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://iphoneapplicationlist.com/apps/">http://iphoneapplicationlist.com/apps/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Smokin apps&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://smokinapps.com/">http://smokinapps.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">mobile9&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.mobile9.com/">http://www.mobile9.com</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Appstore apps&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(15, 69, 124); text-decoration: underline; background-position: initial initial; background-repeat: initial initial; " href="http://www.appstoreapps.com/">http://www.appstoreapps.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Art of the iPhone&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://artoftheiphone.com/">http://artoftheiphone.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">What&rsquo;s on iPhone&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.whatsoniphone.com/">http://www.whatsoniphone.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Apple iPhone School&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.appleiphoneschool.com/">http://www.appleiphoneschool.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">i use this iPhone software&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://iphone.iusethis.com/">http://iphone.iusethis.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">Gofreeapp&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.gofreeapp.com/">http://www.gofreeapp.com/</a></li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">overlapps&nbsp;<a style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 15px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; color: rgb(34, 94, 155); text-decoration: none; background-position: initial initial; background-repeat: initial initial; " href="http://www.overlapps.com/">http://www.overlapps.com</a></li></ul></div><p>来自：<a href="http://www.54apper.com/?page_id=139">http://www.54apper.com/?page_id=139</a></p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss254/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=254</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=254&amp;key=4f65ae7d</trackback:ping></item><item><title>互联网产品设计及相关运营资料和工具下载</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/downer253/</link><pubDate>Tue, 06 Dec 2011 22:30:04 +0800</pubDate><guid>http://www.vvwww.com/post/downer253/</guid><description><![CDATA[<p>共享在几个群中收集的资料，感谢PM265三群，以及其他群友的贡献。。，同时感谢同僚的支持。最近把相关的资料大包上传到了网盘，有需要的同学请关注<a target="_blank" href="http://weibo.com/vvwwwcom">官方微博</a>私信索要下载地址，当然留下email地址也可。</p><p>如果您是PM，可加PM群索取：170361074(PM三群)，82525358(PM超级群)</p><p>本人会不定期在官方微博上分享一些业内资料，当然也欢迎有分享精神的同僚们投稿，让我们一起进步。</p><ul>    <li>新增了一些学习资料 /2012.2.21</li></ul><p>新增产品相关书单....</p><p><img alt="" src="/upimg/booklist.png" /></p><p><img alt="" src="/upimg/1.jpg" /></p><p><img alt="" src="/upimg/2.jpg" /></p>]]></description><category>资源下载</category><comments>http://www.vvwww.com/post/downer253/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=253</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=253&amp;key=196923f5</trackback:ping></item><item><title>你适合做产品经理:什么用户的什么需求？</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss252/</link><pubDate>Tue, 29 Nov 2011 10:20:17 +0800</pubDate><guid>http://www.vvwww.com/post/rss252/</guid><description><![CDATA[<p><span class="Apple-style-span" style="color: rgb(68, 68, 68); font-family: Tahoma, 'Microsoft Yahei', Simsun; line-height: 18px; "><table cellspacing="0" cellpadding="0" style="word-wrap: break-word; empty-cells: show; border-collapse: collapse; table-layout: fixed; width: 757px; ">    <tbody style="word-wrap: break-word; ">        <tr style="word-wrap: break-word; ">            <td class="t_f" id="postmessage_11811" style="word-wrap: break-word; font-size: 14px; ">            <p>3月14、15号两天，在北京参加了《客户需求驱动的产品定义和规划》的培训，挺贵，不过由于和培训公司有些私交，所以没有花钱。培训信息量其实不多，但启发挺大，对于更多不可能花钱参加的同学来说，不妨就等我一点点分享出来吧。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            这次想说的是通过培训让我想到的，一个可以培养/测试自己的产品经理感觉的小游戏，也可以看做上次那个关于&ldquo;转行做产品经理&rdquo;的话题延续，有朋友说&ldquo;你越来越祸害了啊，，不但让大家都来想做产品经理，更开始给出行动方案了啊&rdquo;&hellip;&hellip;且慢，行动之前，慎重起见，各位还是多问问自己到底是否喜欢&amp;适合做产品经理吧。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            开始吧，这个游戏的玩法很简单，随时随地，单人多人都可以，就是随便看到一个产品（我把它定义为&ldquo;解决问题的东西，可以有形也可以无形&rdquo;），然后开始造句：<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <strong style="word-wrap: break-word; font-weight: 700; ">最基本的句式：</strong><br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <font color="#ff0000" style="word-wrap: break-word; ">解决了什么用户的什么需求？</font><br style="word-wrap: break-word; " />            练习的时候，切忌求多，说一点即可，找到你感觉最贴切的那一种用户，和他最迫切的那一个需求。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <strong style="word-wrap: break-word; font-weight: 700; ">主要扩展有如下几种：</strong><br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <font color="#ff0000" style="word-wrap: break-word; ">产生需求的场合是什么？</font><br style="word-wrap: break-word; " />            需求的应用场景，时间地点等，要有&ldquo;故事感&rdquo;，尽量找一个能让人会心一笑的。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <font color="#ff0000" style="word-wrap: break-word; ">产品的主要功能有哪些？</font><br style="word-wrap: break-word; " />            需求和功能的区别在于，前者是从用户角度说的，是一种希望，利益点，这时候还没有产品，后者是从产品属性上说的。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <font color="#ff0000" style="word-wrap: break-word; ">技术基础是什么？</font><br style="word-wrap: break-word; " />            主要考察产品的实现成本，从而评估性价比，是否值得做。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <font color="#ff0000" style="word-wrap: break-word; ">没有这个产品的时候，用户是怎么解决问题的？</font><br style="word-wrap: break-word; " />            帮助思考，这个产品是否是&ldquo;不做会死人&rdquo;的，我们尽量不要做有很多替代方案的产品。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <font color="#ff0000" style="word-wrap: break-word; ">竞争对手是什么？</font><br style="word-wrap: break-word; " />            这个问题不用局限，尽量展开了想，比上一个问题更广，可以考虑潜在的竞争对手。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <font color="#ff0000" style="word-wrap: break-word; ">顺应了什么趋势？</font><br style="word-wrap: break-word; " />            好的产品是顺势而为的，满足未来的某种根本需求是更进一步的基础，尝试预测未来。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            其他扩展，除了我列出来的，你还可以想出很多问题，不再详述：<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            产品的成本构成是什么？<br style="word-wrap: break-word; " />            产品的盈利模式是什么？<br style="word-wrap: break-word; " />            估计一下市场容量（有需求的人数、频率&hellip;&hellip;），以及变化趋势？<br style="word-wrap: break-word; " />            怎么定价？通过什么渠道卖？设计一个促销方案？<br style="word-wrap: break-word; " />            现在你来做改进，加什么功能？优先级？为什么？需要什么资源（人财物，时间&hellip;&hellip;）？之后会发生什么改变？<br style="word-wrap: break-word; " />            &hellip;&hellip;<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            我来举个例子，说明上述游戏。好吧，我抬眼看到了几包方便面。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <img alt="" src="/upimg/fbm.jpg" /><br style="word-wrap: break-word; " />            <span style="font-size: x-large; "><strong><br />            </strong><span style="color: rgb(255, 0, 0); "><strong>作为产品的方便面</strong></span></span><br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <strong>解决了什么用户的什么需求？</strong><br style="word-wrap: break-word; " />            方便面解决了宅男快速填饱肚子的需求。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <strong>产生需求的场合是什么？</strong><br style="word-wrap: break-word; " />            某天半夜，玩网游，刚和队友杀掉一个终极大Boss，忽然感到饿了，需要吃点东西。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <strong>产品的主要功能有哪些？</strong><br style="word-wrap: break-word; " />            撕开袋子，用开水泡3min，达到能吃的状态。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <strong>技术基础是什么？</strong><br style="word-wrap: break-word; " />            有一种面，可以用开水短时间泡到能吃的状态；有一种调料，让这个面不那么难吃。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <strong>没有这个产品的时候，用户是怎么解决问题的？</strong><br style="word-wrap: break-word; " />            开水加饼干。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <strong>竞争对手是什么？</strong><br style="word-wrap: break-word; " />            各种能做主食的速食，扩展开，外卖也算，高能压缩食品也算，会做饭的宅女也算。<br style="word-wrap: break-word; " />            <br style="word-wrap: break-word; " />            <strong>顺应了什么趋势？</strong><br style="word-wrap: break-word; " />            部分目标用户越来越宅，越来越懒，自己开火做饭变得很奢侈。</p>            <p>&nbsp;</p>            <p>来自：http://pmcaff.com/forum.php?mod=viewthread&amp;tid=1541</p>            </td>        </tr>    </tbody></table></span></p><p>&nbsp;</p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss252/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=252</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=252&amp;key=bb60b0a2</trackback:ping></item><item><title>亚马逊网站(amazon.com)浏览历史只显示70条记录的含义猜测</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/jilu251/</link><pubDate>Fri, 25 Nov 2011 23:59:01 +0800</pubDate><guid>http://www.vvwww.com/post/jilu251/</guid><description><![CDATA[<p><img width="400" height="233" alt="" src="http://www.vvwww.com/upimg/amazon2.png" /></p><p>最近在设计产品时时调研亚马逊(amazon.com)的浏览历史记录产品点，在亚马逊的首页，有一个区域是记录浏览历史记录的，根据您最近的浏览记录会推荐相关的产品给浏览者，当然这个浏览记录是可以编辑管理的，<strong>有意思的事儿就是在浏览历史记录管理页显示记录的总条数是70条</strong>，当然显示一定条数这个是没有问题的，因为显示历史记录条数过多其实是增加用户管理成本，非此产品点的初衷。但是问题出在为神马是70条而不是50，80，100条呢？呵呵，你也许会说估计是工程师随便输的吧。。。其实不然，我在网上搜索了一下才明白70这个数字本身是有含义的.......据说70这个实字含义在圣经中有不凡的含义，他代表了圆满以及无限，无止境还有循环的意思，也就是说任何事情重复70次时就到了一个循环周期。。哈哈哈。。。也许亚马逊的浏览历史记录为神马只显示70条后就会以新记录替老记录呢，我觉得其一历史圆满结束于这70条记录，其二这种记录开始进入新的循环周期。</p><p>&nbsp;<img width="631" height="400" alt="" src="http://www.vvwww.com/upimg/amazon1.png" /></p><p>思考：其实我们做产品的，应该认真对待每一个细节，也许可能细微到每个数字的意义。。或许以上对于70的分析有点吃毛求疵，但是确实能反映出亚马逊他的产品中的每个细节都经过了很严格的定义。。哪怕是产品中的数字遵从某种经典含义。<strong>我们现在缺少的就是这种产品素养，抄袭和借鉴优秀产品时我们应该多想想他为什么会这么设计(需要在了解网站产品理念以及主要使用产品的用户群等背景下思考)，他能解决什么问题？如何根据自有产品的特点进行融合和微创新？多问自己几个为才能有所沉淀而不是盲目抄袭。</strong></p><p>以后还是要记录一些东西了，做产品这几年看了很多,作了很多，想了很多确写的很少，现在也需要沉淀和总结了，以此篇起。</p><p>以下是网上摘录的圣经中数字含义..............</p><blockquote><p>许多圣经里的数字都有着很深的属灵与预言性的意义。不管在旧约还是新约，数字都包含着一些隐秘的意思，这往往会被那些粗心的读者所忽略。纵观整个历史，那些有着伟大头脑的人，例如奥古斯丁、艾萨克&bull;牛顿和莱昂纳多&bull;达芬奇对于圣经数字的重视都超越了短时间的好奇心。毕竟，耶稣曾经说，&ldquo;就是你们的头发也都被数过了。&rdquo;（马太福音10:30）显然地，圣经中的数字应该得到细致的思考。&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />在圣经里，至少有十二个数字是比较突出的：1, 2, 3, 4, 5, 6, 7, 10, 12, 40, 50, and 70.为了更好地解释圣经数字的意思，我们也会给出一到两个圣经的实例。然而，在圣经数字这个主题上还有更多可以讨论的，所以这些例子仅仅是作为入门的线索而不是详细的介绍。&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " /><br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />1&mdash;&mdash;代表绝对的唯一和合一（以弗所书4:4-6；约翰福音17:21,-22）（我们假定读者们只需要这两段引文就够了，因为圣经中关于唯一和合一的信息来说人所共知的）。&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />2&mdash;&mdash;代表着对于神的话语的真理见证；例如，律法与先知（约翰福音 1:45），两三个见证人（哥林多后书13:1），和两刃的剑（希伯来书 4:12）。同时见《马可福音》6:7和《启示录》11:3.这个数字在《但以理书》和《启示录》里被使用了21次。&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />3&mdash;&mdash;代表着神的位格/三位一体，天使们对着三位一体的神呼喊了三次&ldquo;圣哉！&rdquo;（以赛亚书6:3）。同时见《马太福音》28:19和《约翰一书》5:7-8.&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />4&mdash;&mdash;代表着普世真理，就像&ldquo;四方&rdquo;（北方、南方、东方、西方）和&ldquo;四风&rdquo;（马太福音24:31；启示录7:1；启示录20:8）。在《使徒行传》10:11中一块系着四角的大布象征着福音将到达所有的外邦人。&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />5&mdash;&mdash;代表着训诲。第一，有摩西五书。第二，耶稣曾有五个聪明的童女的教导（25:1-13），也曾用仅仅五个饼喂饱了5000个男人。（马太福音14:13-21）&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />6&mdash;&mdash;代表着对人的崇拜，是人的数字，显示了人的背叛、不完美、劳苦和悖逆。这个数字在圣经中使用了273次，包括它的派生词（例如第六）；并且以&ldquo;60&rdquo;的形式还出现了91次。人在第六天被创造出来（创世记1:26,31）。同时见《出埃及记》31:15和《但以理书》3:1.&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />这个数字在启示录这部书卷中特别突出，&ldquo;666&rdquo;代表着兽的数目：&ldquo;在这里有智慧。凡有聪明的，可以算计兽的数目；因为这是人的数目，它的数目是六百六十六。&rdquo;（启示录13:18）&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " /><strong>7&mdash;&mdash;代表着完美、是神的标记，代表着神圣的敬拜，完全，顺服和安息。七就像是圣经数字之王，使用的次数最多，一共有562次，包括派生词（如第七，七十个七）。（见创世记2:1-4，诗篇119:164，出埃及记20:8-11，这还只是大量例子中的几个）。</strong>&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />七在圣经预言中也是最常见的数字，仅仅在但以理书和启示录就出现了42次。在启示录中有七个教会、七灵、七个金灯台、七星、七灯、七印、七角、七眼、七天使、七号、七雷、七千人死于大地震、七头、七冠冕、七灾、七个金碗、七山以及七王。&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />10&mdash;&mdash;代表律法与恢复。当然，这包括出埃及记20章的十诫。同时见马太福音25:1（十童女）；路加福音17:17（耶稣治愈十个麻风病人）；路加福音15:8（十个银币）&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />12&mdash;&mdash;代表教会与神的权威。耶稣有十二门徒，以色列有十二个支派。在启示录12:1，有24位长老与144,000人，均为12的倍数。新耶路撒冷城有12根基，12个门，门上有12颗珍珠，有12，000弗朗（就是圣经上的四千里）长，城中有一棵树每年12次结果，结12种果子。&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />40&mdash;&mdash;代表着一个世代和受试探的次数。在大洪水中雨下了40天。摩西带着以色列人在旷野中流浪40年。耶稣禁食40天。&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " />50&mdash;&mdash;代表着力量与庆祝。禧年是第50年（利未记25:10），五旬节（圣灵降临节）在耶稣复活后50天（使徒行传2章）&nbsp;<br style="color: rgb(17, 17, 17); font-family: Arial, Helvetica, sans-serif; " /><strong>70&mdash;&mdash;代表着人的领导与审判。摩西指定70位长老（出埃及记24:1）；犹太公会由70人组成；耶稣拣选70个门徒（路加福音 10:1）。耶稣告诉彼得要宽恕自己的弟兄70个七次。&nbsp;</strong></p></blockquote><p>&nbsp;</p>]]></description><category>启己随笔</category><comments>http://www.vvwww.com/post/jilu251/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=251</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=251&amp;key=b2f6737d</trackback:ping></item><item><title>Pinterest分享模式价值浅析</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss250/</link><pubDate>Wed, 23 Nov 2011 16:37:09 +0800</pubDate><guid>http://www.vvwww.com/post/rss250/</guid><description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="color: rgb(62, 62, 62); font-family: Arial, Tahoma, Verdana; font-size: 13px; line-height: 22px; "><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 5px; font-size: 1.4em; color: rgb(62, 62, 62); display: block; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(0, 128, 0); ">一、Pinterest简介</span></h2><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a href="http://pinterest.com/" target="_blank" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(51, 153, 204); ">Pinterest</a>，Pin（图钉）+Interest（兴趣），把自己感兴趣的东西用图钉钉在钉板（PinBoard）上。美国的一家创办于2011年的正迅速成长为受世界瞩目的图片视觉社交网站。 Pinterest页面底端自动加载无需翻页功能，让用户不断发现新图片。为用户提供在线收藏和分享Pinterest视觉艺术图片的服务。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">该项目的创意来自于创始人 Ben Silbermann 为他的女朋友寻找订婚戒指之时。他发现了很多还算中意的戒指，但又需要反复比较，于是他就开发了 Pinterest，把它们随手贴在同一个页面上。（<a href="http://baike.baidu.com/view/6620273.htm" target="_blank" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(51, 153, 204); ">Via</a>）</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">目前Pinterest也支持视频的分享，之前<a href="http://www.web20share.com/tag/pinterest" target="_blank" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(51, 153, 204); ">Pinterest</a>获得了最新一轮2000万美金的投资，据传估值达到了2亿美金，国内类Pinterest服务又成为了一个热点，今天和大家分享一个对于Pinterest的理解和想法。欢迎大家通过微博&nbsp;<a href="http://weibo.com/web20share" target="_blank" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(51, 153, 204); ">@web20share</a>&nbsp;和我们分享您的观点。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img src="http://pic.yupoo.com/watsonxu/BwVIVwpR/medium.jpg" alt="" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; max-width: 100%; " /></p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 5px; font-size: 1.4em; color: rgb(62, 62, 62); display: block; "><a name="toc-9" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(51, 153, 204); "></a><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(0, 128, 0); ">二、Pinterest功能介绍</span></h2><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">先介绍几个<a href="http://www.web20share.com/tag/pinterest" target="_blank" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(51, 153, 204); ">Pinterest</a>里面的核心功能吧：</p><ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 35px; list-style-type: square; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Pin：字面意思是图钉，你可以理解为把一张图片（或视频）贴到一个板（Board）上，直白来理解就是收藏一个图片（或视频），每一个分享的图片的展示方式如下图，左侧是这个Borad上的图片（或视频）缩略图，右侧是图片或视频详情；</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Repin：你看到别人分享的一个Pin，觉得不错，可以拿来贴在自己的板子（Board）上，类似于转发的意思，你Repin之后，专注你的人，或者关注你Board的人便可以看到这个图片（或视频）</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Like：自己喜欢的图片或视频，类似于私藏，个人可见；</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Borad：上面提到的板子，可以理解为图片（或视频）的组，就是一个板子（Borad）上可以贴很多张照片（或视频）</li></ul><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">所以对于一个用户而言，其可以做几个操作：一是Pin，二是Repin，三是关注，这里面用户可以关注人，也可以关注用户的某个Board，用户通过Borad来整理自己感兴趣的内容，其他用户通过Repin的方式传播自己感兴趣的内容，并且重新组织到自己的Board。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户可以创建共享的Borad和其他朋友一起来协作将内容收藏到一个Board。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">另外Pinterest有一个公共的类别，Pinterest会提示用户将自己的Board添加到其公共类别以便于其他人通过分类浏览这些内容。<br style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " /><img src="http://pic.yupoo.com/watsonxu/BwVPssyt/medium.jpg" alt="" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; max-width: 100%; " /></p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 5px; font-size: 1.4em; color: rgb(62, 62, 62); display: block; "><a name="toc-10" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(51, 153, 204); "></a><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(0, 128, 0); ">三、Pinterest模式分析</span></h2><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">1.人和信息的关系：人-Board-图片，Board其实就是兴趣，只不过兴趣的载体是图片。用户可以关注人、关注一个人默认等于关注这个人所有的Board。其实是Pinteret将人定义为一个兴趣组（这些兴趣组体现为Board），Pinterest关注的最小的维度其实是Board。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">2.展示方式：大家熟知的瀑布流，这种方式真是很好的解决的图片信息的展示问题，对于各种大小的屏幕自动适应的方式，有人称之为将手机上的展示方式直接移植到Web上，相信这种展示方式会被很多网站所借鉴。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">3.信息的有序组织：每个人将图片整理至Board的过程其实是一种将信息有序化的过程，这种过程直接在传播中完成，这种由用户重新组织的兴趣内容组将很有价值，也会吸引更多人的关注。Pinterest提供的协作功能也允许多个用户来协作一个Borad的内容。</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 5px; font-size: 1.4em; color: rgb(62, 62, 62); display: block; "><a name="toc-11" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(51, 153, 204); "></a><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(0, 128, 0); ">四、商业模式</span></h2><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">目前大家普遍比较认同的方式就是和电子商务相结合的方式，不过在我看来，只要通过一种方式能够逐渐沉淀用户的兴趣，这种商业价值可能会有多种的回报方式。比如基于兴趣的广告。</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 5px; font-size: 1.4em; color: rgb(62, 62, 62); display: block; "><a name="toc-12" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(51, 153, 204); "></a><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(0, 128, 0); ">五、国内类Pinterest网站</span></h2><ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 35px; list-style-type: square; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">拼范网：http://www.pinfun.com/</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">迷尚网：http://www.mishang.com/</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">凡客达人：http://star.vancl.com/</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">美丽说：http://www.meilishuo.com/</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">蘑菇街：http://www.mogujie.com</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">淘宝哇哦：http://wow.taobao.com</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">IDsoo：http://idsoo.com/</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Topit：http://topit.me/</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Mark之：http://markzhi.com/</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">布兜：http://www.budoou.com/</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">堆糖：http://www.duitang.com/</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">花瓣：http://huaban.com/</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">码图网：http://www.markpic.com/</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">新鲜网：http://www.xinxian.com/</li>    <li style="margin-top: 7px; margin-right: 0px; margin-bottom: 8px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">易惊喜：http://www.ejingxi.com/</li></ul><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">好吧，每次介绍国外一个颇受关注的模式，总会列出国内的列表，当然上面只是个不完全列表，实际应该更多，并且最近应该也还会有不少会出来。大家看了上面的介绍会发现其实有一些只是形式象而已（当然也有一些诚心拷贝），大家都在学习瀑布流的展示方式，当然借鉴模式去发现自己的方式也是可以的，但是千万不要在模仿中迷失了自己。</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 5px; font-size: 1.4em; color: rgb(62, 62, 62); display: block; "><a name="toc-13" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(51, 153, 204); "></a><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(0, 128, 0); ">六、问题与挑战</span></h2><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">国内目前类似的服务也越来越多了，除了上面的信息关注机制和展示方式以外，如果这些只是表面的形式，那这些Pinterest服务谁能胜出比拼的应该是什么呢？个人列出一些觉得比较重要的点：</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(0, 128, 0); "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">1.如何吸引核心用户群（UGC用户）</strong></span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">本质上还是一个UGC的网站，这种形式固然可以吸引用户来，但是从站外贡献内容的还是极少的比例，如何建立这种分享驱动力并且构建合适的激励机制的需要考虑的？</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(0, 128, 0); "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">2.分享图片、发现图片本身不是需求，用户想要得到什么？</strong></span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">个人觉得还是如何解决后续用户的需求的问题，除了发现图片和视频，用户后续的需求是什么需要去考虑。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(0, 128, 0); "><strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">3.商业模式</strong></span></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如何将用户的需求和商业模式很好的结合。国内最成功的应该是美丽说 但是其实不是标准的pinterst形式，其更关注其用户群的需求，展示方式其实其中的一部分而已，通过满足用户群的需求来吸引这部分用户才是核心，那是否以为着需要更好的关注自己的用户群呢？</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 5px; font-size: 1.4em; color: rgb(62, 62, 62); display: block; "><a name="toc-14" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-decoration: none; color: rgb(51, 153, 204); "></a><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(0, 128, 0); ">七、小结</span></h2><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Pinterest的出现确实给我们带来了很多有价值的启发，比如对于图片信息的展示，未来会是个读图时代，因为图片能够承载的信息更多，但是纯粹的展示方式还不能够支撑一种商业模式，还是需要专心思考，用户是谁，除了展示效果以外，为用户提供的价值是什么，当然也要考虑可能的实现价值回报的方式。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p></span><a href="http://www.web20share.com/2011/11/pinterest-talk.html">http://www.web20share.com/2011/11/pinterest-talk.html</a><span class="Apple-style-span" style="color: rgb(62, 62, 62); font-family: Arial, Tahoma, Verdana; font-size: 13px; line-height: 22px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">来自：</p></span></p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss250/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=250</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=250&amp;key=bffae64a</trackback:ping></item><item><title>产品经理与用户体验精华PPT资源</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/downer249/</link><pubDate>Thu, 17 Nov 2011 17:07:46 +0800</pubDate><guid>http://www.vvwww.com/post/downer249/</guid><description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="font-family: Simsun; line-height: normal; font-size: medium; "><span class="Apple-style-span" style="font-family: Arial, Verdana, sans-serif; font-size: 12px; line-height: 19px; ">&nbsp;<span class="Apple-style-span" style="color: rgb(68, 68, 68); font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: 14px; line-height: 21px; ">产品经理需要具备的素质能力</span></span><div style="background-color: rgb(255, 255, 255); padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-family: Arial, Verdana, sans-serif; font-size: 12px; line-height: 160%; "><p><span class="Apple-style-span" style="color: rgb(68, 68, 68); font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: 14px; line-height: 21px; "><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801729" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106210936314320m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />SNS用户体验案例分享和讨论<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801731" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106210937482766m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />草根网-产品经理分享篇（费杰5-31）<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801733" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/20110621093814153m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />产品经理<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801735" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106210938401087m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />产品设计与用户体验--马化腾<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801764" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106210958592942m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />互联网用户体验<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801768" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211004181151m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />浅析社区类网站的用户体验<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801769" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211004213416m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />什么是用户体验0410<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801770" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211006202576m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />产品经理角色、协作、沟通<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801771" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211007462538m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a></span></p><p><span class="Apple-style-span" style="color: rgb(68, 68, 68); font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: 14px; line-height: 21px; ">统一用户体验的设计-腾讯<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801772" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211010503107m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />网站用户体验设计流程<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801773" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211011144187m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />用户体验的要素<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801775" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211011484130m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />用户体验的元素详解<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801776" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211014151482m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />用户体验管理培训<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801777" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211015041011m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />用户体验及交互设计<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801778" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/20110621101609133m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />用户体验课程<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801780" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211016492795m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />用户体验浅析<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801782" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211019481245m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />用户体验入门深化篇----源自瞬间之美读后感<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801785" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211030111187m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a></span></p><p><span class="Apple-style-span" style="color: rgb(68, 68, 68); font-family: Tahoma, 'Microsoft Yahei', Simsun; font-size: 14px; line-height: 21px; ">191如何做一名成功的产品经理<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801730" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106210936423436m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />腾讯产品经理的视角_Chrissyuan_V1.0<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801749" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/20110621094401972m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />产品经理都是大情圣<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801751" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106210945454615m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />产品经理管理实战训练(学员版)<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801759" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106210948154206m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />腾讯内部培训产品经理的视角<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801761" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106210957182385m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />产品经理圣经<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801762" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106210957303003m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />产品经理训练营(培训)ppt<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801763" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106210957413406m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />国内最有价值的产品经理培训文档<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801765" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/2011062110005132m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a><br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " />互联网时代的产品经理<br style="word-wrap: break-word; " /><br style="word-wrap: break-word; " /><a href="http://my.eapoo.com/freedownload/801766" target="_blank" style="word-wrap: break-word; color: rgb(51, 102, 153); text-decoration: underline; "><img src="http://upload2.eapoo.net/2011-06-21/59690/201106211001182711m3.jpg" alt="" width="212" height="164" style="word-wrap: break-word; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " /></a></span></p><p>转自：<a href="http://www.pmcaff.com/">http://www.pmcaff.com/</a></p><p>原文链接：</p><p><a href="http://www.pmcaff.com/forum.php?mod=viewthread&amp;tid=1813">http://www.pmcaff.com/forum.php?mod=viewthread&amp;tid=1813</a></p><p><a target="_blank" href="http://www.pmcaff.com/forum.php?mod=viewthread&amp;tid=1814">http://www.pmcaff.com/forum.php?mod=viewthread&amp;tid=1814</a></p><p><a target="_blank" href="http://www.pmcaff.com/forum.php?mod=viewthread&amp;tid=1815">http://www.pmcaff.com/forum.php?mod=viewthread&amp;tid=1815</a></p></div></span></p>]]></description><category>资源下载</category><comments>http://www.vvwww.com/post/downer249/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=249</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=249&amp;key=2f143267</trackback:ping></item><item><title>Html5很给力——代码可实现的视觉效果</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss248/</link><pubDate>Thu, 20 Oct 2011 23:45:29 +0800</pubDate><guid>http://www.vvwww.com/post/rss248/</guid><description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><img src="http://mux.baidu.com/img/41/top.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></span></p><p><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Helvetica Neue', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', Arial; font-size: 14px; line-height: 21px; "><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&ldquo;Html5&rdquo;一出生就伴随着各种争论，不过有几个业界大佬的保驾护航、极力推动，相信随着支持webkit浏览器的普及，HTML 5会越来越普及、越来越强大，一定是必然趋势。</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">HTML5 ~= HTML + CSS + JS APIs，在Html5引擎中已经有一些代码将html和css和jsapi做了结合。很多之前需要贴图或者很冗杂代码段才能实现的效果，采用Html5开发只需短短几行代码就可轻松搞定，大大降低了流量的压力。总之Html5真是很给力，那么作为一名移动端的wise设计师对于Html5可以轻松实现的视觉效果不能不了解。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">显示本地没有的字体</strong></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><img src="http://mux.baidu.com/img/41/1.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">移动端各种平台可以支持的默认字体有限，如果需要好的视觉效果，很常见的做法就是将文字做成图片，但是对于移动端来说，图片就意味着大流量，在如今还是按流量收费的移动网络时代，一味的追求效果而采用图片显然不是最好的做法。但是采用Html5开发，只需要在代码内设置所需显示的字体，那么一些个性的字体就可以不用图片轻松展示了。如上图红色方块区域中的效果。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">圆角效果</strong></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><img src="http://mux.baidu.com/img/41/2.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">如上图hao123主页和hao123.tuan主页效果所示，各种圆角在设计中对于提升用户的好感度，美化页面效果起到了很重要的效果。如今在移动端wise中也可以放心大胆的设计圆角效果，因为Html5对于圆角的支持已经很好了，代码可以根据需要随意控制圆角的半径大小，并且能够对其完美的展现。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">半透明效果</strong></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><img src="http://mux.baidu.com/img/41/3.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">在设计中为了能够让层与层之间的结合不生硬，采用半透明的效果，也已经是设计师惯用的手法之一了。Html5对于半透明效果支持也是非常理想的，代码可以根据需要随意控制层的透明度。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">渐变效果（线性渐变、径向渐变）</strong></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><img src="http://mux.baidu.com/img/41/4.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">在Html5之前对于线性渐变效果的支持就已经实现了，不过径向渐变还是需要贴图才能实现。图片对于移动端流量还是很受限的移动网络现状，视觉效果满足？流量费用支付？用户还是很在意的，不过Html5已经解决了这个问题，如同左图展现的线性渐变能够很好的支持外，右图中心区域径向渐变效果的展现是不是也很理想：）</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">文本描边</strong></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><img src="http://mux.baidu.com/img/41/5.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">文本描边这个效果其实在Html5之前也是可以轻松实现的，不过并没有被经常的使用，所以在这里也提及一下，在Html5下文本描边可以很轻松的实现，且可以根据需求控制文本颜色，文本描边颜色，以及文本描边的宽度，宽度甚至可以精确到0.00px。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">文本阴影效果 &nbsp;横向、纵向、虚化</strong></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><img src="http://mux.baidu.com/img/41/6.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">如上图所示Html5除了可以轻松实现文本描边效果外，对于文本的阴影角度、方向等也可以轻松实现。可以自由控制阴影的角度、距离、颜色及投影大小。通过自由组合这几个因素，实现很多需要图片支持的效果就变得易如反掌。</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><img src="http://mux.baidu.com/img/41/7.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">上图这样看似只能通过图片来实现的阴影+虚化效果，其实就是通过Html5来实现的。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">文本外发光效果</strong></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><img src="http://mux.baidu.com/img/41/8.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">经常对文字操作的视觉效果还包括：文字外发光。Html5对于文本外发光效果也是可以很好支持的，并且可以根据需求设置外发光的颜色、透明度、扩展范围、大小等等。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><strong style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">倒影</strong></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><img src="http://mux.baidu.com/img/41/9.jpg" alt="" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; border-style: initial; border-color: initial; max-width: 700px; max-height: 1000px; background-position: initial initial; background-repeat: initial initial; " /></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">刚才讲到了很多文字可以实现的视觉效果，其实对于图形来说是一样的，图形阴影、虚化、外发光效果也可以实现。此外图形还可以实现倒影效果，如上图所示，在Html5技术之前倒影效果需要贴图才能够实现的，而Html5中就可以用代码轻松来实现了。</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">综上所述：Html5能够轻松实现的视觉效果简直太给力了！太多太多需要做图软件成图，代码中贴图才能实现的效果，显示本地没有的特殊字体来实现艺术话视觉效果；各种圆角效果的支持；半透明效果：线性渐变，以及突破性的径向渐变支持；文本、图形各种效果的修饰，描边，阴影，虚化，外发光；以及图形的倒影效果等。总而言之，以上各种视觉效果均可实现，那么在以后wise网页设计中，设计师再也不用束手束脚了，不用再设计单调的界面了，很多效果都可以尝试，并且不会带来太多的页面体积成本：）</div><p style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">&nbsp;</p><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">以上主要是介绍Html5可以实现的视觉效果，此外Html5还可以支持很多功能层面的震撼效果，如：音频、视频、图片展示、运动展示、360度展示、VR（虚拟实境）、本地存储、表单、分栏显示、地理位置等等。<br />有兴趣的朋友可以了解看看：</div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><a href="http://www.apple.com/html5" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(20, 133, 236); text-decoration: none; background-position: initial initial; background-repeat: initial initial; ">http://www.apple.com/html5</a></div><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><a href="http://directguo.com/html5" style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; color: rgb(20, 133, 236); text-decoration: none; background-position: initial initial; background-repeat: initial initial; ">http://directguo.com/html5</a></div></span></p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss248/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=248</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=248&amp;key=e426b37c</trackback:ping></item><item><title>瀑布流布局浅析</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/PD247/</link><pubDate>Thu, 20 Oct 2011 23:37:34 +0800</pubDate><guid>http://www.vvwww.com/post/PD247/</guid><description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; "><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; ">简介</h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="alignnone" src="http://img01.taobaocdn.com/tps/i1/T1z.WnXhdzXXXXXXXX-600-567.png" alt="" width="600" height="567" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如&nbsp;<a href="http://pinterest.com/" style="text-decoration: underline; color: rgb(0, 100, 177); ">Pinterest</a>&nbsp;(貌似是最早使用这种布局的网站了)，<a href="http://markzhi.com/" style="text-decoration: underline; color: rgb(0, 100, 177); ">Mark之</a>，<a href="http://www.mogujie.com/book/clothing/" style="text-decoration: underline; color: rgb(0, 100, 177); ">蘑菇街</a>，<a href="http://www.diandian.com/" style="text-decoration: underline; color: rgb(0, 100, 177); ">点点网</a>，以及淘宝最新上线的&ldquo;<a href="http://wow.taobao.com/" style="text-decoration: underline; color: rgb(0, 100, 177); ">哇哦</a>&rdquo; 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 &mdash;&nbsp;<strong style="font-weight: bold; ">瀑布流式布局</strong>。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; ">几种实现方式</h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">随着越来越多设计师爱用这种布局，我们作为前端，要尽可能满足视觉/交互设计师的需求。所以，我们整理了下这种布局的几种实现方式，有三种:</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">1) 传统多列浮动</strong>。即 蘑菇街和哇哦 采用的方式，如下图所示:</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="alignnone" src="http://img02.taobaocdn.com/tps/i2/T1zXGoXdVpXXXXXXXX-600-452.png" alt="" width="600" height="452" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">各列固定宽度，并且左浮动；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">一列中的数据块为一组，列中的每个数据块依次排列即可；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">更多数据加载时，需要分别插入到不同的列上；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; "><a href="http://wow.taobao.com/" style="text-decoration: underline; color: rgb(0, 100, 177); ">线上例子</a>。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">优点:</strong></p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">布局简单，应该说没啥特别的难点；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">缺点:</strong></p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">滚动加载更多数据时，还要指定插入到第几列中，还是不方便。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">2) CSS3 定义</strong>。W3C 中有讲述关于<a href="http://www.w3.org/TR/css3-multicol/" style="text-decoration: underline; color: rgb(0, 100, 177); ">多列布局的文档</a>，排列出来的样子:</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img class="alignnone" src="http://img04.taobaocdn.com/tps/i4/T1lVGoXfFpXXXXXXXX-600-452.png" alt="" width="600" height="452" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">由 chrome/ff 浏览器直接渲染出来，可以指定容器的列个数，列间距，列中间边框，列宽度来实现；</li></ul><blockquote style="margin-top: 0.9375em; margin-right: 30px; margin-bottom: 0px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); "><div><pre style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-family: 'Courier New', Courier, monospace; background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: rgb(238, 238, 238); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(221, 221, 221); border-right-color: rgb(221, 221, 221); border-bottom-color: rgb(221, 221, 221); border-left-color: rgb(221, 221, 221); line-height: 21px; background-position: 0px 0px; background-repeat: repeat repeat; ">    #container {        -webkit-column-count: 5；        /*-webkit-column-gap: 10px；        -webkit-column-rule: 5px solid #333；        -webkit-column-width: 210px；*/        -moz-column-count: 5；        /*-moz-column-gap: 20px；        -moz-column-rule: 5px solid #333；        -moz-column-width: 210px；*/        column-count: 5；        /*column-gap: 10px；        column-rule: 5px solid #333；        column-width: 210px；*/    }</pre></div></blockquote><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">column-count 为列数； column-gap 为每列间隔距离； column-rule 为间隔边线大小； column-width 为每列宽度； 当只设置 column-width 时，浏览器窗口小于一列宽度时，列中内容自动隐藏； 当只设置 column-count 时，平均计算每列宽度，列内内容超出则隐藏； 都设了 column-count 和column-width，浏览器会根据 count 计算宽度和 width 比较，取大的那个值作为每列宽度，然后当窗口缩小时，width 的值为每列最小宽度。这边其实很简单，简易自己尝试下，详细可参考<a href="https://developer.mozilla.org/en/CSS3_Columns" style="text-decoration: underline; color: rgb(0, 100, 177); ">https://developer.mozilla.org/en/CSS3_Columns</a>&nbsp;中的说明。</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; "><a href="http://lizzie.github.com/kissy/src/waterfall/demo/css3.html" style="text-decoration: underline; color: rgb(0, 100, 177); ">线上例子</a>。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">优点:</strong></p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">直接 CSS 定义，最方便了；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">扩展方便，直接往容器里添加内容即可。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">缺点:</strong></p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">只有高级浏览器中才能使用；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">还有一个缺点，他的数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">鉴于这两个主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">3) 绝对定位</strong>。即 Pinterest ，Mark之，KISSY 采用的方式:<br /><img class="alignnone" src="http://img01.taobaocdn.com/tps/i1/T11VCoXhlpXXXXXXXX-600-452.png" alt="" width="600" height="452" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; "><a href="http://docs.kissyui.com/docs/html/static/demo/waterfall/demo2.html" style="text-decoration: underline; color: rgb(0, 100, 177); ">线上例子</a>。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">缺点:</strong></p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。</li></ul><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; ">KISSY.Waterfall 实现思路</h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><a href="http://docs.kissyui.com/docs/html/api/component/waterfall/" style="text-decoration: underline; color: rgb(0, 100, 177); ">KISSY 的 Waterfall 组件</a>主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置； 二是下拉滚动时，触发加载数据操作，并把数据添加到目标容器中。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">1) 数据块排列</strong>，算法步骤简述下:</p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">初始化时，对容器中已有数据块元素进行第一次计算，需要用户给定: a，容器元素 &mdash; 以此获取容器总宽度； b，列宽度； c，最小列数；&nbsp;最终列数取的是容器宽度/列宽度和最小列数的最大值，这样保证了，当窗口很小时，仍然出现最小列数的数据；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">获得列数后，需要保存每个列的当前高度，这样在添加每个数据块时，才知道起始高度是多少；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">依次取容器中的所有数据块，先寻找当前高度最小的某列，之后根据列序号，确定数据块的left，top值，left 为所在列的序号乘以列宽，top 为所在列的当前高度，最后更新所在列的当前高度加上这个数据块元素的高度，至此，插入一个元素结束；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">当所有元素插入完毕后，调整容器的高度为各列最大的高度值，结束依次调整；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">性能效率上的注意点: a，如果当前正在调整中，又触发了 resize 事件，需要将上次调整暂停后执行这次调整(见 timedChunk 函数)； b，resize 触发会很频繁，可以将回调函数缓存一段时候后执行，即当这段时间内多次触发了resize事件，但回调函数只会执行一次(见 S.buffer 函数)</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">感兴趣的可以参见<a href="https://github.com/kissyteam/kissy/blob/master/src/waterfall/base.js" style="text-decoration: underline; color: rgb(0, 100, 177); ">源码</a>。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">2) 异步加载数据</strong>，前面讲的是如何对容器中已有元素进行排列，但很多情况下，还需要不断加载新数据块，为此专门设计了一个独立的模块 KISSY.Waterfall.Loader，其实这个功能就更简单了，仅包含两个步骤:</p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">绑定滚动事件，并确定预加载线高度值，即滚动到哪个高度后，需要去加载数据，其实这个就是列的最小高度值，这样当前滚动值和最小高度值比较一下即可判断出来，是否要触发加载数据；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">加载数据，为了不对数据源做太多限制，完全由使用者自己决定数据源从哪边获取和其格式，这样更好的方便用户使用。为此，该组件只提供一个load(success，end) 接口，怎样load 由用户自己去定义，而其中的 success/end，分别给出如何添加新数据(suceess 即同 addItems)/如何停止加载的接口。这样真是太方便了~~</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">感兴趣的可以参见<a href="https://github.com/kissyteam/kissy/blob/master/src/waterfall/loader.js" style="text-decoration: underline; color: rgb(0, 100, 177); ">源码</a>。</li></ul><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; ">KISSY.Waterfall 示例和文档</h2><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">看到这边，是不是很想试用一下~~ 嗯嗯，这里给出一些相关学习资料和示例，以供参考:</p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; "><a href="http://docs.kissyui.com/docs/html/api/component/waterfall/" style="text-decoration: underline; color: rgb(0, 100, 177); ">Waterfall API 文档</a>，相关构造器，配置项，方法都在这里；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; "><a href="http://docs.kissyui.com/docs/html/demo/component/waterfall/" style="text-decoration: underline; color: rgb(0, 100, 177); ">示例</a>，包含静态和动态两种。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">欢迎试用和提出意见~~</p></span><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; ">来自：</span><a href="http://ued.taobao.com/blog/2011/09/14/waterfall/">http://ued.taobao.com/blog/2011/09/14/waterfall/</a><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; "><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p></span></p>]]></description><category>产品设计</category><comments>http://www.vvwww.com/post/PD247/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=247</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=247&amp;key=ae39e234</trackback:ping></item><item><title>如何设计新手用户引导</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/PD246/</link><pubDate>Thu, 20 Oct 2011 23:35:46 +0800</pubDate><guid>http://www.vvwww.com/post/PD246/</guid><description><![CDATA[<p>&nbsp;引言：这篇文章是小柒、墨轩、淡月、和我4个人一起工作的成果，在今年9月的STS设计分享会上演讲过一次。我们的设计分享会一共有4个演讲主题，另外几个话题稍后会陆续在这里和大家见面~</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">一个新的网络产品，或者一个全新的功能要想吸引用户的使用兴趣，就需要让用户在刚一接触到的时候能够快速地了解它是什么，能做些什么，并且能马上开始一些简单的操作。如果看了很久还没弄明白这些，那么很可能就彻底放弃了。</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">所以，设计新手用户引导，就是设计用户前一、两次使用产品时的体验，设计目标是让新手用户快速、无痛苦地成为中间用户。</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; "><span style="color: rgb(255, 102, 0); ">一、设计时的注意事项</span></h2><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">无论是什么类型的产品，新手用户在尝试时都会经历一些共同的情感历程：他们会对新产品和新功能有一些好奇和茫然，希望能快速了解它的概念和范围。在尝试使用时会比较敏感、容易受挫。如果身边有非常了解产品的专家级用户，一般会十分相信这个专家用户对产品的介绍和判断。</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">针对新手用户的这些情感上的特征，我们试着提出来一些设计新手用户引导时的注意事项。</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">1. 尽量少的新手任务</strong></p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">首先，我们要让新手快速了解产品是什么、能做什么，并且能快速上手，那么完成这个过程必须经历的任务一定不能多，要特别有针对性。引导用户阅读说明或是尝试操作都要围绕着&ldquo;了解产品的概念、范围&rdquo;这个目标展开，尽量不超过三个新手任务。&ldquo;将用户想象成非常聪明，但非常忙的人。&rdquo;──Alan Cooper。</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">2. 最好的引导是无形的</strong></p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如果一个产品的用户界面做得足够好，体现了用户的心智模型的话，那么就不需要设计所谓的新手用户引导，而是能让用户一看到就知道要如何操作。另一方面，在新产品中延续用户在其他同类产品中已养成的使用习惯也是将引导化为无形的一种手段。</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">3. 容易发现和理解</strong></p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">当新功能确实复杂到需要特别的引导时，我们需要让引导信息容易被用户发现和理解，提供明确的操作入口。</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">4. 适当夸大用户成功的程度</strong></p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">在新手还比较敏感、易受挫的时候，给她一些鼓励和积极的反馈能够帮助她建立起使用信心。这个做法在游戏中特别常见，针对新手的任务一般都很简单，奖励积分会来得特别容易，一旦上手之后就越来越难了。为用户设置符合她使用水平的任务，并帮助她成长，这也是符合Mihalyi Casikszentmilhalyi的心流理论的。</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img alt="Flow" width="400" height="398" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/flow.png" /></p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">5. 原谅用户出错</strong></p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户在不了解产品的时候最有可能在里面到处乱逛，因此产品需要提供一个安全的、可供探索的环境。系统提供的防错、纠错、帮助从错误中恢复等机制，针对新手用户的任务可以做得更加细致和周到，可多花一些成本。</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; "><span style="color: rgb(255, 102, 0); ">二、设计思路</span></h2><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">以上提出的注意事项要如何在产品中体现呢？我们查阅了一些资料，也学习了目前比较受欢迎的网站的常见做法，在此基础上提出我们的设计思路。还远谈不上是什么设计方法，因为还很不严谨。只是想提出来供大家探讨，拍砖也是可以的。我们暂且叫它做&ldquo;以新手任务为中心&rdquo;的设计思路。</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">1. 确定新手任务</strong></p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">谈到以新手任务为中心，那首先第一步就是要确定什么是新手任务。我们知道产品设计永远是以中间用户为主，不会针对新手用户单独设计一个产品。在为中间用户设计界面的基础上，提炼出一些新手任务来帮助新手用户成长。前面提到了最好的引导是无形的。如果做到了无形的引导，那么就没有必要设置专门的新手任务，但是很多情况下，新手任务是必要的。</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我们首先为产品整理出一份功能清单，然后从中筛选出新手用户的任务。</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4536 aligncenter" alt="" width="354" height="157" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/usertasks1.png" /></p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">筛选依据以下原则：</p><ul style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">前3次使用产品需要操作的任务；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">非完成不可的任务，否则无法继续使用产品；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">聚焦到不超过3个新手任务。</li></ul><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">2. 分析任务特征</strong></p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">确定新手任务之后，对任务的特征进行分析。我们从两个维度来分析一个任务：<strong style="font-weight: bold; ">任务难度</strong>和<strong style="font-weight: bold; ">操作频率</strong>。下图是以SNS网站为例，列举了4个任务，分别对应了4种不同的任务特征：</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4541" alt="" width="500" height="393" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/taskanalysis.png" /></p><ul style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">注册：低难度、低操作频率；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">建立个人资料：高难度、低操作频率；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">写博客：低难度、高操作频率；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">建立朋友圈子：高难度、高操作频率。</li></ul><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">3. 分析用户类型</strong></p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">根据用户使用产品的目的明确性，我们把用户分为3个类型：无向型、探索型和定向型。</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4545" alt="" width="550" height="201" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/usertypes1.png" /></p><ul style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">无向型：没有目标，不知道自己要什么；会偶尔发现感兴趣的信息；对使用产品的粘性弱。</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">探索型：有模糊的目标，但无法准确表达；目标范围过广，无法迅速确定；对使用产品的粘性一般，可能会选择竞争对手产品。</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">定向型：有计划、有目的的访问网站，有时候甚至清楚怎么做；有耐心，包容性强；对使用产品的粘性强。</li></ul><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">把新手任务的特征和用户类型按以上方式大致分析归类之后，接下来就是确定如何在界面上展示这些任务去引导用户一步步操作下去，也就是任务的具体表现方法了。我们总结出7种常见的表现方法，并且与任务特征和用户类型逐个去对应。</p><h2 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 16px; color: rgb(255, 103, 0); font-family: 'Microsoft Yahei'; "><span style="color: rgb(255, 102, 0); ">三、表现方法</span></h2><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">1. 大喊大叫式</strong></p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用视觉等手段达到让新手任务&ldquo;大喊大叫&rdquo;的效果，旨在吸引新手用户立刻采取行动。</p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4548" alt="" width="500" height="203" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/ex1.png" /></p><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; ">图片来源：Backpackit</p><ul style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">适用的任务特征：独立的主要任务或分步骤的简单任务、操作频率低；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">适用的用户类型：无向型、探索型。</li></ul><p style="color: rgb(51, 51, 51); margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><a style="text-decoration: underline; color: rgb(0, 100, 177); " href="http://ued.taobao.com/blog/wp-content/uploads/2011/10/method11.png"><img class="alignnone size-full wp-image-4561" alt="" width="576" height="217" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/method11.png" /></a></p><div style="color: rgb(51, 51, 51); "><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">2. 填补空白式</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">利用人们本能的填补未完成的心理，在界面上制造空白，吸引新用户填充内容。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4573" alt="" width="594" height="222" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/ex2.png" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; ">图片来源：Flickr</p></div><div style="color: rgb(51, 51, 51); "><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">适用的任务特征：独立的主要任务或分步骤的简单任务、操作频率高低都可；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">适用的用户类型：探索型、无向型。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4565" alt="" width="576" height="217" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/method2.png" /></p><div><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">3. 全局导游式</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">引导用户按照设定的路径一步步阅读产品的功能说明，以及尝试操作，逐步将产品的概念、范围、核心功能介绍给用户。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4574" alt="" width="500" height="309" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/ex3.png" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; ">图片来源：新浪轻博客</p></div><div><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">适用的任务特征：任务复杂、步骤多、操作频率低；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">适用的用户类型：定向型、探索型。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4566" alt="" width="576" height="217" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/method3.png" /></p><div><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">4. 任务向导式</strong></p></div><div>将一个复杂的大任务拆分成多个子任务，用步骤条分步引导用户操作。</div><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4575" alt="" width="500" height="261" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/ex4.png" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; ">图片来源：Facebook</p><div><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">适用的任务特征：操作步骤复杂、操作频率低；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">适用的用户类型：定向型。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4567" alt="" width="576" height="217" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/method4.png" /></p><div><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">5. 新手练手式</strong></p></div><div>引导用户在明确指引下尝试首次完成一个任务。</div><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4576" alt="" width="580" height="292" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/ex5.png" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; ">图片来源：360&deg;全景摄影社区</p><div><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">适用的任务特征：任务复杂、操作频率高；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">适用的用户类型：定向型、探索型。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4569" alt="" width="576" height="217" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/method5.png" /></p><div><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">6. 榜样激励式</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">利用新手用户相信专家户的心理特征，以中、高级用户的成功案例激励新手用户，引起她学习新产品的兴趣。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4577" alt="" width="369" height="203" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/ex6.png" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; ">图片来源：虾米网</p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">任务特征：任务较复杂，操作频率高；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">用户类型：无向型、探索型。</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img alt="" width="576" height="217" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/method6.png" /></p><div><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">7. 嵌入帮助式</strong></p></div><div>在用户操作任务的过程中，适时在场景中提供帮助，通常是精短的文字信息。</div><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4578" alt="" width="477" height="281" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/ex7.png" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; ">图片来源：淘宝网</p><div><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">任务特征：任务简单，可依赖简短帮助完成操作，操作频率高低均可；</li>    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">用户类型：定向型、探索型</li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4570" alt="" width="576" height="217" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/method7.png" /></p><div><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">最后把这7种表现方法作个总结，针对新手任务的特征以及不同的用户类型，可以选择相对应的表现方法。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4583" alt="" width="580" height="456" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/tasksinmap2.png" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; "><img class="alignnone size-full wp-image-4584" alt="" width="580" height="74" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " src="http://ued.taobao.com/blog/wp-content/uploads/2011/10/tasksinmap3.png" /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">以上就是我们总结出来的关于设计新手用户引导的一些思路。再次申明不是什么严谨的设计方法，欢迎探讨，拍砖也可。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">参考资料：</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">1. Simple for beginners and rich for aficionados: How Starbucks&rsquo; drink framework and ordering language engage customers at all levels, Dubberly Design Office<br />2. Task-based user interface design, Martijn van Welie</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">来自：<a href="http://ued.taobao.com/blog/2011/10/19/xinshouyonghuyindao/">http://ued.taobao.com/blog/2011/10/19/xinshouyonghuyindao/</a></p></div></div></div></div></div></div></div><p>&nbsp;</p>]]></description><category>产品设计</category><comments>http://www.vvwww.com/post/PD246/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=246</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=246&amp;key=c9085131</trackback:ping></item><item><title>iphone Web App 导航设计探讨</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/PD245/</link><pubDate>Thu, 20 Oct 2011 23:26:47 +0800</pubDate><guid>http://www.vvwww.com/post/PD245/</guid><description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="color: rgb(85, 85, 85); font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; background-color: rgb(245, 245, 245); "><a rel="attachment wp-att-7999" href="http://uedc.163.com/7998.html/web-app%e5%af%bc%e8%88%aa%e8%ae%be%e8%ae%a1-%e5%a4%b4%e5%9b%be" style="text-decoration: none; color: rgb(0, 0, 0); "><img class="alignnone size-full wp-image-7999" src="http://uedc.163.com/wp-content/uploads/2011/10/web-app%E5%AF%BC%E8%88%AA%E8%AE%BE%E8%AE%A1-%E5%A4%B4%E5%9B%BE.png" alt="" width="625" height="200" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a><p><span style="color: rgb(51, 51, 51); ">最近在做iphone端Web App的项目。由于产品形式新颖，技术环境不成熟，公司给与了较宽松的研发时间。在一个月的交互设计阶段，每个环节都得到多次讨论推敲，我从中感悟颇多。导航系统的设计是一个比较典型的点，拿出来与大家分享讨论一下。<br /></span><strong>导航系统所遭遇的挑战</strong></p><p><span style="color: rgb(51, 51, 51); ">iphone Native App较常见的导航如下图所示：</span></p><p><a rel="attachment wp-att-8003" href="http://uedc.163.com/7998.html/%e5%af%bc%e8%88%aa%e7%b3%bb%e7%bb%9f%e6%89%80%e9%81%ad%e9%81%87%e7%9a%84%e6%8c%91%e6%88%98" style="text-decoration: none; color: rgb(85, 85, 85); "><img class="alignnone size-full wp-image-8003" src="http://uedc.163.com/wp-content/uploads/2011/10/%E5%AF%BC%E8%88%AA%E7%B3%BB%E7%BB%9F%E6%89%80%E9%81%AD%E9%81%87%E7%9A%84%E6%8C%91%E6%88%98.png" alt="" width="625" height="500" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></p><p><span style="color: rgb(51, 51, 51); ">手机屏幕底端：A、B、C、D四个tab组成该Native App的全局导航，这是我们经常见到的tab导航栏。</span></p><p><span style="color: rgb(51, 51, 51); ">手机屏幕顶端：主要有四种形式。第①种形式是在该位置中心显示产品的logo；也可以将logo适当调整位置，将常用操作或快捷入口放在该位置的右侧。第②种形式是在该位置有两或三个tab选项。第③种形式是在该位置中间显示当前任务标题，在左右两侧放置导航控件或功能控件。第④种形式是在该位置放置搜索框。</span></p><p><span style="color: rgb(51, 51, 51); ">与以上的Native App导航方式相比，Web App导航方式有着巨大的不同，如下图所示：</span></p><p><a rel="attachment wp-att-8004" href="http://uedc.163.com/7998.html/web-app-%e5%af%bc%e8%88%aa%e6%96%b9%e5%bc%8f" style="text-decoration: none; color: rgb(85, 85, 85); "><img class="alignnone size-full wp-image-8004" src="http://uedc.163.com/wp-content/uploads/2011/10/web-app-%E5%AF%BC%E8%88%AA%E6%96%B9%E5%BC%8F.png" alt="" width="625" height="551" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></p><p><span style="color: rgb(51, 51, 51); ">Safari浏览器的工具栏将一直占据着屏幕的底端位置，全局导航只能被动移动到屏幕的顶端位置。这是影响Web App导航设计的最重要因素。</span></p><p><span style="color: rgb(51, 51, 51); ">如果产品的功能比较少，且没有特别要突出的功能的时候，可以设计成上图中第①种导航方式。此时存在的问题是如何表现出产品的品牌，毕竟在Safari浏览器登录某网站比运行一个Native App给人的品牌认同感弱很多。</span></p><p><span style="color: rgb(51, 51, 51); ">如果将产品logo表现出来，且产品需要将用户常用功能突出（比如刷新功能或者发布入口），就需要设计成上图中的第②种导航方式。</span></p><p><span style="color: rgb(51, 51, 51); ">如果在A功能板块下，还需要设置子类别选项，则导航栏中又多一组tab。此时的导航方式就如同上图中的第③种了。</span></p><p><span style="color: rgb(51, 51, 51); ">当然，在执行某一项任务的时候，全局导航可以暂时&ldquo;归隐&rdquo;，只保留一行标题栏和左右两侧的导航控件或功能控件。如上图中第④种导航方式所示。</span></p><p><span style="color: rgb(51, 51, 51); ">在该产品设计中，为方便用户在各功能板块之间快速省力地切换，设计师希望全局导航栏可以保持长久悬停，不要像一般wap网页似的让导航随网页滚动消失。这样的话，基于浏览器的Web App 导航系统便捷性就和Native App相媲美了。</span></p><p><span style="color: rgb(51, 51, 51); ">然而，浏览器工具栏将全局导航逼到了屏幕的顶端，却又造成了导航头部过于沉重的问题。如下图所示：</span></p><p><a rel="attachment wp-att-8005" href="http://uedc.163.com/7998.html/%e8%bf%87%e4%ba%8e%e6%b2%89%e9%87%8d%e7%9a%84%e5%af%bc%e8%88%aa%e5%a4%b4%e9%83%a8" style="text-decoration: none; color: rgb(85, 85, 85); "><img class="alignnone size-full wp-image-8005" src="http://uedc.163.com/wp-content/uploads/2011/10/%E8%BF%87%E4%BA%8E%E6%B2%89%E9%87%8D%E7%9A%84%E5%AF%BC%E8%88%AA%E5%A4%B4%E9%83%A8.png" alt="" width="625" height="546" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></p><p><span style="color: rgb(51, 51, 51); ">如果将logo栏中的常用功能（例如刷新或发布入口）和全局导航都设计为悬浮停留的形式，内容区的信息展示空间就比Native App减少了一行的高度，如上图中的①。而且，某些页面需要在全局导航的下方出现二级导航；悬停不动的3行导航大大吞噬了屏幕本来就很宝贵的内容显示空间，如上图中的②。</span></p><p><span style="color: rgb(51, 51, 51); ">让用户在如此狭小的空间不得不频繁滑动屏幕浏览信息，这样的体验太糟糕了。这个严重的问题很让设计师困扰，因此需要重新设计一下导航系统。设计过程主要包括：优秀竞品分析、方案遴选。</span></p><p>&nbsp;</p><h2><span style="color: rgb(255, 102, 0); ">优秀竞品分析</span></h2><p><span style="color: rgb(51, 51, 51); ">首先，分析对比了三款优秀的Web App：Google+、FT Web App、Twitter的导航方式。浏览环境均为iphone Safari浏览器。</span></p><h3><strong><span style="color: rgb(255, 102, 0); ">1.Google+</span></strong></h3><p><strong><a rel="attachment wp-att-8006" href="http://uedc.163.com/7998.html/%e7%ab%9e%e5%93%81%e5%88%86%e6%9e%90-google" style="text-decoration: none; color: rgb(85, 85, 85); "><img class="alignnone size-full wp-image-8006" src="http://uedc.163.com/wp-content/uploads/2011/10/%E7%AB%9E%E5%93%81%E5%88%86%E6%9E%90-google+.png" alt="" width="625" height="499" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></strong></p><p><strong><span style="color: rgb(51, 51, 51); ">导航系统特点：</span></strong></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>全局导航单独形成一个页面，其他页面不出现全局导航；</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>导航栏沿用了ios系统原生控件的形式：标题+导航或功能控件；</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>标题栏在页面中悬停不动</span></p><p><strong><span style="color: rgb(51, 51, 51); ">优点分析：</span></strong></p><p><span style="color: rgb(51, 51, 51); ">保证了每个信息浏览页面的导航栏简洁轻薄，尽量少的占用信息详情的显示空间；保证了其核心功能（此处是微博浏览功能）的良好使用体验。</span></p><p><strong><span style="color: rgb(51, 51, 51); ">缺点分析：</span></strong></p><p><span style="color: rgb(51, 51, 51); ">全局导航隐藏较深，降低了用户在不同功能板块快速切换的便利性；全局导航隐藏较深，用户看不到其它板块功能，大大降低了用户点击使用其他功能的可能性。</span></p><h3><strong><span style="color: rgb(255, 102, 0); ">2. FT Web App</span></strong></h3><p><strong><a rel="attachment wp-att-8008" href="http://uedc.163.com/7998.html/%e7%ab%9e%e5%93%81%e5%88%86%e6%9e%90-ft-2" style="text-decoration: none; color: rgb(85, 85, 85); "><img class="alignnone size-full wp-image-8008" src="http://uedc.163.com/wp-content/uploads/2011/10/%E7%AB%9E%E5%93%81%E5%88%86%E6%9E%90-FT1.png" alt="" width="625" height="499" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></strong></p><p><strong><span style="color: rgb(51, 51, 51); ">导航系统特点：</span></strong></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>Safari浏览器URL一栏一直悬停存在，并将品牌文字FT Web App显示在顶端;</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>全局导航被隐藏起来，点击功能键后在页面顶端出现；</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>二级导航出现在页面顶端；</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>全局导航和二级导航由于新闻板块数量较多，都采取了单行空间不完全呈现的方式，可滑动选择其中某一项；</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>所有导航随页面滚动，不在屏幕中保持悬停；</span></p><p><strong><span style="color: rgb(51, 51, 51); ">优点分析：</span></strong></p><p><span style="color: rgb(51, 51, 51); ">FT Web App导航设计最大的优点就是繁重导航的轻量化处理。全局导航和二级导航中的新闻板块都非常多，若将这些板块都展示出来，恐怕要占用屏幕的一半显示空间。FT Web App于是将全局导航隐藏在一个功能键之后，二级导航也只给了一行的显示空间。</span></p><p><strong><span style="color: rgb(51, 51, 51); ">缺点分析：</span></strong></p><p><span style="color: rgb(51, 51, 51); ">展示给用户的导航只是其全部新闻板块的冰山一角，无法给予用户全部概况浏览的机会，也就无法很好的激励用户去尝试被隐藏的新闻版块；同时，用户寻找某一个新闻版块或者在页面底端回到页面顶端的操作成本略高。</span></p><h3><strong><span style="color: rgb(255, 102, 0); ">3.Twitter</span></strong></h3><p><strong><a rel="attachment wp-att-8009" href="http://uedc.163.com/7998.html/%e7%ab%9e%e5%93%81%e5%88%86%e6%9e%90-twitter" style="text-decoration: none; color: rgb(85, 85, 85); "><img class="alignnone size-full wp-image-8009" src="http://uedc.163.com/wp-content/uploads/2011/10/%E7%AB%9E%E5%93%81%E5%88%86%E6%9E%90-Twitter.png" alt="" width="625" height="499" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></strong></p><p><strong><span style="color: rgb(51, 51, 51); ">导航设计特点：</span></strong></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>全局导航只有一行，品牌展示浓缩在主页图标中（Twitter小鸟图标）；</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>全局导航一直保持在屏幕顶端悬停不动，不随页面滚动而滚动；</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>二级导航在点击全局导航某tab后，以菜单列表形式出现。</span></p><p><strong><span style="color: rgb(51, 51, 51); ">优点分析：</span></strong></p><p><span style="color: rgb(51, 51, 51); ">在屏幕顶端悬停不动的全局导航，可以方便用户在不同的功能板块之间快捷切换，降低了用户的信息寻找成本；Twitter Web App的导航只有一行，为用户保证了尽量大的正文内容显示空间。</span></p><p><strong><span style="color: rgb(51, 51, 51); ">缺点分析：</span></strong></p><p><span style="color: rgb(51, 51, 51); ">一些常用的功能键被隐藏在二级导航中（比如新信息发布入口），一方面增大了用户的寻找成本，另一方面降低了这些常用功能对用户的激励使用效用。</span></p><p>&nbsp;</p><p><span style="color: rgb(51, 51, 51); ">基于对以上三款Web App产品导航系统的分析，设计师对目标项目的导航系统设计形成了以下框定：</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>全局导航方便用户快速寻找以及功能板块间的切换；</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>导航尽量轻薄化处理，尽量保证足够的正文内容区显示空间；</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭</strong>将用户经常使用的功能键呈现在前面。</span></p><p>&nbsp;</p><h2><span style="color: rgb(255, 102, 0); ">方案遴选阶段</span></h2><p><span style="color: rgb(51, 51, 51); ">基于项目的实际需要以及对竞品分析的思考总结，设计师尝试了3款导航设计方案，并对每一款方案的优劣之处进行了详细分析。</span></p><h3><strong><span style="color: rgb(255, 102, 0); ">导航设计方案一</span></strong></h3><p><strong><a rel="attachment wp-att-8010" href="http://uedc.163.com/7998.html/%e9%81%b4%e9%80%89%e6%96%b9%e6%a1%88%e4%b8%80" style="text-decoration: none; color: rgb(85, 85, 85); "><img class="alignnone size-full wp-image-8010" src="http://uedc.163.com/wp-content/uploads/2011/10/%E9%81%B4%E9%80%89%E6%96%B9%E6%A1%88%E4%B8%80.png" alt="" width="625" height="500" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></strong></p><p><strong><span style="color: rgb(51, 51, 51); ">设计说明：</span></strong></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>ABCD是产品的四个功能板块，组成全局导航。</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>全局导航在屏幕顶端保持悬停不动。</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>E是新消息发布入口，属于用户常用功能。</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>E采用半透明显示方式。</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>E停留在屏幕的右下角</span></p><p><strong><span style="color: rgb(51, 51, 51); ">该方案的优点：</span></strong></p><p><span style="color: rgb(51, 51, 51); ">屏幕顶端只有全局导航一栏，导航的轻量化为正文内容区节省了尽量大的显示空间；全局导航悬停不动，可以便于用户快速切换到不同的功能板块。</span></p><p><strong><span style="color: rgb(51, 51, 51); ">该方案的缺点：</span></strong></p><p><span style="color: rgb(51, 51, 51); ">右下角的新信息发布入口致使浏览页面不够清爽，会对用户造成一定的视觉干扰；新信息发布入口没有必要在任何页面都显示，于是可寻性出现了危机；品牌logo无法显示，品牌感较弱。</span></p><p>&nbsp;</p><h3><strong><span style="color: rgb(255, 102, 0); ">导航设计方案二</span></strong></h3><p><strong><a rel="attachment wp-att-8011" href="http://uedc.163.com/7998.html/%e9%81%b4%e9%80%89%e6%96%b9%e6%a1%88%e4%ba%8c" style="text-decoration: none; color: rgb(85, 85, 85); "><img class="alignnone size-full wp-image-8011" src="http://uedc.163.com/wp-content/uploads/2011/10/%E9%81%B4%E9%80%89%E6%96%B9%E6%A1%88%E4%BA%8C.png" alt="" width="625" height="700" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></strong></p><p><strong><span style="color: rgb(51, 51, 51); ">设计说明：</span></strong></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>E是新消息发布入口，属于用户常用功能。</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>ABCD是产品的四个功能板块，组成全局导航。</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>屏幕顶端的两行导航栏在用户刚进入页面的时候出现，在用户滑动屏幕浏览信息的时候消失。</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>屏幕右下角半透明功能键在导航栏消失后出现，点击该键导航栏出现。</span></p><p><strong><span style="color: rgb(51, 51, 51); ">该方案的优点：</span></strong></p><p><span style="color: rgb(51, 51, 51); ">浏览信息的时候导航栏消失，为用户提供提供了最大的正文内容显示空间；可以显示logo，品牌感较强；新信息发布入口的可寻性较好。</span></p><p><strong><span style="color: rgb(51, 51, 51); ">该方案的缺点：</span></strong></p><p><span style="color: rgb(51, 51, 51); ">屏幕右下角半透明功能键致使浏览页面不够清爽，会对用户造成一定的视觉干扰。</span></p><p>&nbsp;</p><h3><strong><span style="color: rgb(255, 102, 0); ">导航设计方案三</span></strong></h3><p><strong><a rel="attachment wp-att-8012" href="http://uedc.163.com/7998.html/%e9%81%b4%e9%80%89%e6%96%b9%e6%a1%88%e4%b8%89" style="text-decoration: none; color: rgb(85, 85, 85); "><img class="alignnone size-full wp-image-8012" src="http://uedc.163.com/wp-content/uploads/2011/10/%E9%81%B4%E9%80%89%E6%96%B9%E6%A1%88%E4%B8%89.png" alt="" width="625" height="700" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></a></strong></p><p><strong><span style="color: rgb(51, 51, 51); ">设计说明：</span></strong></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>E是新消息发布入口，属于用户常用功能。</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>ABCD是产品的四个功能板块，组成全局导航。</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>屏幕顶端的两行导航栏在用户刚进入页面的时候出现，在用户滑动屏幕浏览信息的时候第一栏向上消失，第二栏上移至顶部保持悬停不动。</span></p><p><span style="color: rgb(51, 51, 51); "><strong>￭&nbsp;</strong>手动下拉全局导航栏，可以下拉出第一栏导航。</span></p><p><strong><span style="color: rgb(51, 51, 51); ">该方案的优点：</span></strong></p><p><span style="color: rgb(51, 51, 51); ">浏览正文信息的时候，仅显示全局导航一栏，做到了导航的轻薄化；全局导航悬停不动，可以便于用户快速切换到不同的功能板块。</span></p><p><strong><span style="color: rgb(51, 51, 51); ">该方案的缺点：</span></strong></p><p><span style="color: rgb(51, 51, 51); ">下拉全局导航时，可能会有误操作的危险，虽然可能性很小。</span></p><p>&nbsp;</p><p><span style="color: rgb(51, 51, 51); ">综合以上的分析，考虑到正文内容区显示空间的大小、对产品的操作便利性以及产品品牌感三方面因素，最终决定将方案三作为导航设计的基本形式，并继续进行进一步丰富细化。</span></p><p>&nbsp;</p><h2><span style="color: rgb(255, 102, 0); ">总结：</span></h2><p><span style="color: rgb(51, 51, 51); ">浏览器的工具栏一直占据着屏幕的底端位置，全局导航只能被动移动到屏幕的顶端位置。如何平衡操作的便捷性与正文信息显示空间最大化的关系，是Web App导航设计的关键所在。</span></p><p><span style="color: rgb(51, 51, 51); ">最佳方案总是权衡的结果。每一款设计方案解决某些问题的同时也会产生新的问题。此时设计师需要知道哪些功能是最重要、优先级最高的，保证核心功能的良好用户体验是评判设计方案的重要准绳。</span></p></span><span class="Apple-style-span" style="color: rgb(85, 85, 85); font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; background-color: rgb(245, 245, 245); ">来自:</span><a href="http://uedc.163.com/7998.html">http://uedc.163.com/7998.html<br /></a></p>]]></description><category>产品设计</category><comments>http://www.vvwww.com/post/PD245/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=245</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=245&amp;key=594dda99</trackback:ping></item><item><title>推荐引擎的那些事儿</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/PD244/</link><pubDate>Wed, 31 Aug 2011 23:42:42 +0800</pubDate><guid>http://www.vvwww.com/post/PD244/</guid><description><![CDATA[<p><span style="font-family: 宋体"><span style=""><span style="font-size: small">&nbsp;</span></span></span></p><p><span style="font-family: 宋体"><span style="font-size: small">&nbsp;&ldquo;探索推荐引擎内部的秘密&rdquo;系列将带领读者从浅入深的学习探索推荐引擎的机制，实现方法，其中还涉及一些基本的优化方法，例如聚类和分类的应用。同时在理论讲解的基础上，还会结合 Apache Mahout 介绍如何在大规模数据上实现各种推荐策略，进行策略优化，构建高效的推荐引擎的方法。本文作为这个系列的第一篇文章，将深入介绍推荐引擎的工作原理，和其中涉及的各种推荐机制，以及它们各自的优缺点和适用场景，帮助用户清楚的了解和快速构建适合自己的推荐引擎。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><a name="major1"><span style="font-family: 宋体"><span style="font-size: small"><span class="atitle" style="font-weight: bold">信息发现</span></span></span></a></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">如今已经进入了一个数据爆炸的时代，随着 Web 2.0 的发展， Web 已经变成数据分享的平台，那么，如何让人们在海量的数据中想要找到他们需要的信息将变得越来越难。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">在这样的情形下，搜索引擎（Google，Bing，百度等等）成为大家快速找到目标信息的最好途径。在用户对自己需求相对明确的时候，用搜索引擎很方便的通过关键字搜索很快的找到自己需要的信息。但搜索引擎并不能完全满足用户对信息发现的需求，那是因为在很多情况下，用户其实并不明确自己的需要，或者他们的需求很难用简单的关键字来表述。又或者他们需要更加符合他们个人口味和喜好的结果，因此出现了推荐系统，与搜索引擎对应，大家也习惯称它为推荐引擎。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">随着推荐引擎的出现，用户获取信息的方式从简单的目标明确的数据的搜索转换到更高级更符合人们使用习惯的信息发现。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">如今，随着推荐技术的不断发展，推荐引擎已经在电子商务 (E-commerce，例如 Amazon，当当网 ) 和一些基于 social 的社会化站点 ( 包括音乐，电影和图书分享，例如豆瓣，Mtime 等 ) 都取得很大的成功。这也进一步的说明了，Web2.0 环境下，在面对海量的数据，用户需要这种更加智能的，更加了解他们需求，口味和喜好的信息发现机制。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><a name="major2"><span style="font-family: 宋体"><span style="font-size: small"><span class="atitle" style="font-weight: bold">推荐引擎</span></span></span></a></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">前面介绍了推荐引擎对于现在的 Web2.0 站点的重要意义，这一章我们将讲讲推荐引擎到底是怎么工作的。推荐引擎利用特殊的信息过滤技术，将不同的物品或内容推荐给可能对它们感兴趣的用户。</span></span></p><p><span style="font-family: 宋体"><span style="font-size: small"><br /><a name="fig1"></a></span></span><span style="font-size: larger"><a name="fig1"></a></span><span style="font-family: 楷体_GB2312"><span style="font-size: larger"><span style="font-size: small"><a name="fig1"><span style="font-family: 宋体"><b style="padding-right: 5px; padding-left: 5px; font-weight: bold; font-size: 0.76em; padding-bottom: 0.7em; padding-top: 0.3em; font-family: arial, sans-serif">图 1. 推荐引擎工作原理图</b></span></a></span></span><span style="font-family: 宋体"><span style="font-size: larger"><span style="font-size: small"><br /><img style="border-top-width: 0px; padding-right: 5px; padding-left: 5px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0.7em; padding-top: 0.3em; border-right-width: 0px" height="296" alt="图 1. 推荐引擎工作原理图" width="403" src="http://www.ibm.com/developerworks/cn/web/1103_zhaoct_recommstudy1/image003.jpg" />&nbsp;<br />&nbsp;</span></span></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">图 1 给出了推荐引擎的工作原理图，这里先将推荐引擎看作黑盒，它接受的输入是推荐的数据源，一般情况下，推荐引擎所需要的数据源包括：</span></span></p><ul style="padding-right: 5px; margin-top: 0px; font-size: 0.76em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px">    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 0px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">要推荐物品或内容的元数据，例如关键字，基因描述等； </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 0px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">系统用户的基本信息，例如性别，年龄等 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 0px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">用户对物品或者信息的偏好，根据应用本身的不同，可能包括用户对物品的评分，用户查看物品的记录，用户的购买记录等。其实这些用户的偏好信息可以分为两类： </span></span></li></ul><ul style="padding-right: 5px; margin-top: 0px; font-size: 0.76em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px">    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 0px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">显式的用户反馈：这类是用户在网站上自然浏览或者使用网站以外，显式的提供反馈信息，例如用户对物品的评分，或者对物品的评论。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 0px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">隐式的用户反馈：这类是用户在使用网站是产生的数据，隐式的反应了用户对物品的喜好，例如用户购买了某物品，用户查看了某物品的信息等等。 </span></span></li></ul><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">显式的用户反馈能准确的反应用户对物品的真实喜好，但需要用户付出额外的代价，而隐式的用户行为，通过一些分析和处理，也能反映用户的喜好，只是数据不是很精确，有些行为的分析存在较大的噪音。但只要选择正确的行为特征，隐式的用户反馈也能得到很好的效果，只是行为特征的选择可能在不同的应用中有很大的不同，例如在电子商务的网站上，购买行为其实就是一个能很好表现用户喜好的隐式反馈。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">推荐引擎根据不同的推荐机制可能用到数据源中的一部分，然后根据这些数据，分析出一定的规则或者直接对用户对其他物品的喜好进行预测计算。这样推荐引擎可以在用户进入的时候给他推荐他可能感兴趣的物品。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><a name="major3"><span style="font-family: 宋体"><span style="font-size: small"><span class="atitle" style="font-weight: bold">推荐引擎的分类</span></span></span></a></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">推荐引擎的分类可以根据很多指标，下面我们一一介绍一下：</span></span></p><ol style="padding-right: 5px; margin-top: 0px; font-size: 0.76em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px" type="1">    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">推荐引擎是不是为不同的用户推荐不同的数据 </span></span>    <p style="padding-right: 5px; padding-left: 0px; font-size: 1em; padding-bottom: 0px; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">根据这个指标，推荐引擎可以分为基于大众行为的推荐引擎和个性化推荐引擎</span></span></p>    <ul style="padding-right: 5px; margin-top: 0px; font-size: 1em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px">        <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">根据大众行为的推荐引擎，对每个用户都给出同样的推荐，这些推荐可以是静态的由系统管理员人工设定的，或者基于系统所有用户的反馈统计计算出的当下比较流行的物品。 </span></span></li>        <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">个性化推荐引擎，对不同的用户，根据他们的口味和喜好给出更加精确的推荐，这时，系统需要了解需推荐内容和用户的特质，或者基于社会化网络，通过找到与当前用户相同喜好的用户，实现推荐。 </span></span></li>    </ul>    <p style="padding-right: 5px; padding-left: 0px; font-size: 1em; padding-bottom: 0px; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">这是一个最基本的推荐引擎分类，其实大部分人们讨论的推荐引擎都是将个性化的推荐引擎，因为从根本上说，只有个性化的推荐引擎才是更加智能的信息发现过程。</span></span></p>    </li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">根据推荐引擎的数据源 </span></span>    <p style="padding-right: 5px; padding-left: 0px; font-size: 1em; padding-bottom: 0px; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">其实这里讲的是如何发现数据的相关性，因为大部分推荐引擎的工作原理还是基于物品或者用户的相似集进行推荐。那么参考图 1 给出的推荐系统原理图，根据不同的数据源发现数据相关性的方法可以分为以下几种：</span></span></p>    <ul style="padding-right: 5px; margin-top: 0px; font-size: 1em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px">        <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">根据系统用户的基本信息发现用户的相关程度，这种被称为基于人口统计学的推荐（Demographic-based Recommendation） </span></span></li>        <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">根据推荐物品或内容的元数据，发现物品或者内容的相关性，这种被称为基于内容的推荐（Content-based Recommendation） </span></span></li>        <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">根据用户对物品或者信息的偏好，发现物品或者内容本身的相关性，或者是发现用户的相关性，这种被称为基于协同过滤的推荐（Collaborative Filtering-based Recommendation）。 </span></span></li>    </ul>    </li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">根据推荐模型的建立方式 </span></span>    <p style="padding-right: 5px; padding-left: 0px; font-size: 1em; padding-bottom: 0px; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">可以想象在海量物品和用户的系统中，推荐引擎的计算量是相当大的，要实现实时的推荐务必需要建立一个推荐模型，关于推荐模型的建立方式可以分为以下几种：</span></span></p>    <ul style="padding-right: 5px; margin-top: 0px; font-size: 1em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px">        <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">基于物品和用户本身的，这种推荐引擎将每个用户和每个物品都当作独立的实体，预测每个用户对于每个物品的喜好程度，这些信息往往是用一个二维矩阵描述的。由于用户感兴趣的物品远远小于总物品的数目，这样的模型导致大量的数据空置，即我们得到的二维矩阵往往是一个很大的稀疏矩阵。同时为了减小计算量，我们可以对物品和用户进行聚类， 然后记录和计算一类用户对一类物品的喜好程度，但这样的模型又会在推荐的准确性上有损失。 </span></span></li>        <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">基于关联规则的推荐（Rule-based Recommendation）：关联规则的挖掘已经是数据挖掘中的一个经典的问题，主要是挖掘一些数据的依赖关系，典型的场景就是&ldquo;购物篮问题&rdquo;，通过关联规则的挖掘，我们可以找到哪些物品经常被同时购买，或者用户购买了一些物品后通常会购买哪些其他的物品，当我们挖掘出这些关联规则之后，我们可以基于这些规则给用户进行推荐。 </span></span></li>        <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">基于模型的推荐（Model-based Recommendation）：这是一个典型的机器学习的问题，可以将已有的用户喜好信息作为训练样本，训练出一个预测用户喜好的模型，这样以后用户在进入系统，可以基于此模型计算推荐。这种方法的问题在于如何将用户实时或者近期的喜好信息反馈给训练好的模型，从而提高推荐的准确度。 </span></span></li>    </ul>    </li></ol><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">其实在现在的推荐系统中，很少有只使用了一个推荐策略的推荐引擎，一般都是在不同的场景下使用不同的推荐策略从而达到最好的推荐效果，例如 Amazon 的推荐，它将基于用户本身历史购买数据的推荐，和基于用户当前浏览的物品的推荐，以及基于大众喜好的当下比较流行的物品都在不同的区域推荐给用户，让用户可以从全方位的推荐中找到自己真正感兴趣的物品。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><a name="major4"><span style="font-family: 宋体"><span style="font-size: small"><span class="atitle" style="font-weight: bold">深入推荐机制</span></span></span></a></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">这一章的篇幅，将详细介绍各个推荐机制的工作原理，它们的优缺点以及应用场景。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><a name="minor4.1"><span style="font-family: 宋体"><span style="font-size: small"><span class="smalltitle" style="font-weight: bold">基于人口统计学的推荐</span></span></span></a></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">基于人口统计学的推荐机制（Demographic-based Recommendation）是一种最易于实现的推荐方法，它只是简单的根据系统用户的基本信息发现用户的相关程度，然后将相似用户喜爱的其他物品推荐给当前用户，图 2 给出了这种推荐的工作原理。</span></span></p><p><span style="font-family: 宋体"><span style="font-size: small"><br /><a name="fig2"></a></span></span><span style="font-size: larger"><a name="fig2"></a></span><span style="font-family: 楷体_GB2312"><span style="font-size: larger"><span style="font-size: small"><a name="fig2"><span style="font-family: 宋体"><b style="padding-right: 5px; padding-left: 5px; font-weight: bold; font-size: 0.76em; padding-bottom: 0.7em; padding-top: 0.3em; font-family: arial, sans-serif">图 2. 基于人口统计学的推荐机制的工作原理</b></span></a></span></span><span style="font-family: 宋体"><span style="font-size: larger"><span style="font-size: small"><br /><img style="border-top-width: 0px; padding-right: 5px; padding-left: 5px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0.7em; padding-top: 0.3em; border-right-width: 0px" height="213" alt="图 2. 基于人口统计学的推荐机制的工作原理" width="351" src="http://www.ibm.com/developerworks/cn/web/1103_zhaoct_recommstudy1/image005.jpg" />&nbsp;<br />&nbsp;</span></span></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">从图中可以很清楚的看到，首先，系统对每个用户都有一个用户 Profile 的建模，其中包括用户的基本信息，例如用户的年龄，性别等等；然后，系统会根据用户的 Profile 计算用户的相似度，可以看到用户 A 的 Profile 和用户 C 一样，那么系统会认为用户 A 和 C 是相似用户，在推荐引擎中，可以称他们是&ldquo;邻居&rdquo;；最后，基于&ldquo;邻居&rdquo;用户群的喜好推荐给当前用户一些物品，图中将用户 A 喜欢的物品 A 推荐给用户 C。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">这种基于人口统计学的推荐机制的好处在于：</span></span></p><ol style="padding-right: 5px; margin-top: 0px; font-size: 0.76em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px" type="1">    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">因为不使用当前用户对物品的喜好历史数据，所以对于新用户来讲没有&ldquo;冷启动（Cold Start）&rdquo;的问题。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">这个方法不依赖于物品本身的数据，所以这个方法在不同物品的领域都可以使用，它是领域独立的（domain-independent）。 </span></span></li></ol><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">那么这个方法的缺点和问题是什么呢？这种基于用户的基本信息对用户进行分类的方法过于粗糙，尤其是对品味要求较高的领域，比如图书，电影和音乐等领域，无法得到很好的推荐效果。可能在一些电子商务的网站中，这个方法可以给出一些简单的推荐。另外一个局限是，这个方法可能涉及到一些与信息发现问题本身无关却比较敏感的信息，比如用户的年龄等，这些用户信息不是很好获取。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><a name="minor4.2"><span style="font-family: 宋体"><span style="font-size: small"><span class="smalltitle" style="font-weight: bold">基于内容的推荐</span></span></span></a></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">基于内容的推荐是在推荐引擎出现之初应用最为广泛的推荐机制，它的核心思想是根据推荐物品或内容的元数据，发现物品或者内容的相关性，然后基于用户以往的喜好记录，推荐给用户相似的物品。图 3 给出了基于内容推荐的基本原理。</span></span></p><p><span style="font-family: 宋体"><span style="font-size: small"><br /><a name="fig3"></a></span></span><span style="font-size: larger"><a name="fig3"></a></span><span style="font-family: 楷体_GB2312"><span style="font-size: larger"><span style="font-size: small"><a name="fig3"><span style="font-family: 宋体"><b style="padding-right: 5px; padding-left: 5px; font-weight: bold; font-size: 0.76em; padding-bottom: 0.7em; padding-top: 0.3em; font-family: arial, sans-serif">图 3. 基于内容推荐机制的基本原理</b></span></a></span></span><span style="font-family: 宋体"><span style="font-size: larger"><span style="font-size: small"><br /><img style="border-top-width: 0px; padding-right: 5px; padding-left: 5px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0.7em; padding-top: 0.3em; border-right-width: 0px" height="220" alt="图 3. 基于内容推荐机制的基本原理" width="357" src="http://www.ibm.com/developerworks/cn/web/1103_zhaoct_recommstudy1/image007.jpg" />&nbsp;<br />&nbsp;</span></span></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">图 3 中给出了基于内容推荐的一个典型的例子，电影推荐系统，首先我们需要对电影的元数据有一个建模，这里只简单的描述了一下电影的类型；然后通过电影的元数据发现电影间的相似度，因为类型都是&ldquo;爱情，浪漫&rdquo;电影 A 和 C 被认为是相似的电影（当然，只根据类型是不够的，要得到更好的推荐，我们还可以考虑电影的导演，演员等等）；最后实现推荐，对于用户 A，他喜欢看电影 A，那么系统就可以给他推荐类似的电影 C。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">这种基于内容的推荐机制的好处在于它能很好的建模用户的口味，能提供更加精确的推荐。但它也存在以下几个问题：</span></span></p><ol style="padding-right: 5px; margin-top: 0px; font-size: 0.76em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px" type="1">    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">需要对物品进行分析和建模，推荐的质量依赖于对物品模型的完整和全面程度。在现在的应用中我们可以观察到关键词和标签（Tag）被认为是描述物品元数据的一种简单有效的方法。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">物品相似度的分析仅仅依赖于物品本身的特征，这里没有考虑人对物品的态度。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">因为需要基于用户以往的喜好历史做出推荐，所以对于新用户有&ldquo;冷启动&rdquo;的问题。 </span></span></li></ol><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">虽然这个方法有很多不足和问题，但他还是成功的应用在一些电影，音乐，图书的社交站点，有些站点还请专业的人员对物品进行基因编码，比如潘多拉，在一份报告中说道，在潘多拉的推荐引擎中，每首歌有超过 100 个元数据特征，包括歌曲的风格，年份，演唱者等等。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><a name="minor4.3"><span style="font-family: 宋体"><span style="font-size: small"><span class="smalltitle" style="font-weight: bold">基于协同过滤的推荐</span></span></span></a></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">随着 Web2.0 的发展，Web 站点更加提倡用户参与和用户贡献，因此基于协同过滤的推荐机制因运而生。它的原理很简单，就是根据用户对物品或者信息的偏好，发现物品或者内容本身的相关性，或者是发现用户的相关性，然后再基于这些关联性进行推荐。基于协同过滤的推荐可以分为三个子类：基于用户的推荐（User-based Recommendation），基于项目的推荐（Item-based Recommendation）和基于模型的推荐（Model-based Recommendation）。下面我们一个一个详细的介绍着三种协同过滤的推荐机制。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small"><strong>基于用户的协同过滤推荐</strong></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">基于用户的协同过滤推荐的基本原理是，根据所有用户对物品或者信息的偏好，发现与当前用户口味和偏好相似的&ldquo;邻居&rdquo;用户群，在一般的应用中是采用计算&ldquo;K- 邻居&rdquo;的算法；然后，基于这 K 个邻居的历史偏好信息，为当前用户进行推荐。下图 4 给出了原理图。</span></span></p><p><span style="font-family: 宋体"><span style="font-size: small"><br /><a name="fig4"></a></span></span><span style="font-size: larger"><a name="fig4"></a></span><span style="font-family: 楷体_GB2312"><span style="font-size: larger"><span style="font-size: small"><a name="fig4"><span style="font-family: 宋体"><b style="padding-right: 5px; padding-left: 5px; font-weight: bold; font-size: 0.76em; padding-bottom: 0.7em; padding-top: 0.3em; font-family: arial, sans-serif">图 4. 基于用户的协同过滤推荐机制的基本原理</b></span></a></span></span><span style="font-family: 宋体"><span style="font-size: larger"><span style="font-size: small"><br /><img style="border-top-width: 0px; padding-right: 5px; padding-left: 5px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0.7em; padding-top: 0.3em; border-right-width: 0px" height="210" alt="图 4. 基于用户的协同过滤推荐机制的基本原理" width="287" src="http://www.ibm.com/developerworks/cn/web/1103_zhaoct_recommstudy1/image009.jpg" />&nbsp;<br />&nbsp;</span></span></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">上图示意出基于用户的协同过滤推荐机制的基本原理，假设用户 A 喜欢物品 A，物品 C，用户 B 喜欢物品 B，用户 C 喜欢物品 A ，物品 C 和物品 D；从这些用户的历史喜好信息中，我们可以发现用户 A 和用户 C 的口味和偏好是比较类似的，同时用户 C 还喜欢物品 D，那么我们可以推断用户 A 可能也喜欢物品 D，因此可以将物品 D 推荐给用户 A。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">基于用户的协同过滤推荐机制和基于人口统计学的推荐机制都是计算用户的相似度，并基于&ldquo;邻居&rdquo;用户群计算推荐，但它们所不同的是如何计算用户的相似度，基于人口统计学的机制只考虑用户本身的特征，而基于用户的协同过滤机制可是在用户的历史偏好的数据上计算用户的相似度，它的基本假设是，喜欢类似物品的用户可能有相同或者相似的口味和偏好。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small"><strong>基于项目的协同过滤推荐</strong></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">基于项目的协同过滤推荐的基本原理也是类似的，只是说它使用所有用户对物品或者信息的偏好，发现物品和物品之间的相似度，然后根据用户的历史偏好信息，将类似的物品推荐给用户，图 5 很好的诠释了它的基本原理。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">假设用户 A 喜欢物品 A 和物品 C，用户 B 喜欢物品 A，物品 B 和物品 C，用户 C 喜欢物品 A，从这些用户的历史喜好可以分析出物品 A 和物品 C 时比较类似的，喜欢物品 A 的人都喜欢物品 C，基于这个数据可以推断用户 C 很有可能也喜欢物品 C，所以系统会将物品 C 推荐给用户 C。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">与上面讲的类似，基于项目的协同过滤推荐和基于内容的推荐其实都是基于物品相似度预测推荐，只是相似度计算的方法不一样，前者是从用户历史的偏好推断，而后者是基于物品本身的属性特征信息。</span></span></p><p><span style="font-family: 宋体"><span style="font-size: small"><br /><a name="fig5"></a></span></span><span style="font-size: larger"><a name="fig5"></a></span><span style="font-family: 楷体_GB2312"><span style="font-size: larger"><span style="font-size: small"><a name="fig5"><span style="font-family: 宋体"><b style="padding-right: 5px; padding-left: 5px; font-weight: bold; font-size: 0.76em; padding-bottom: 0.7em; padding-top: 0.3em; font-family: arial, sans-serif">图 5. 基于项目的协同过滤推荐机制的基本原理</b></span></a></span></span><span style="font-family: 宋体"><span style="font-size: larger"><span style="font-size: small"><br /><img style="border-top-width: 0px; padding-right: 5px; padding-left: 5px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0.7em; padding-top: 0.3em; border-right-width: 0px" height="213" alt="图 5. 基于项目的协同过滤推荐机制的基本原理" width="301" src="http://www.ibm.com/developerworks/cn/web/1103_zhaoct_recommstudy1/image011.jpg" />&nbsp;<br />&nbsp;</span></span></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">同时协同过滤，在基于用户和基于项目两个策略中应该如何选择呢？其实基于项目的协同过滤推荐机制是 Amazon 在基于用户的机制上改良的一种策略，因为在大部分的 Web 站点中，物品的个数是远远小于用户的数量的，而且物品的个数和相似度相对比较稳定，同时基于项目的机制比基于用户的实时性更好一些。但也不是所有的场景都是这样的情况，可以设想一下在一些新闻推荐系统中，也许物品，也就是新闻的个数可能大于用户的个数，而且新闻的更新程度也有很快，所以它的形似度依然不稳定。所以，其实可以看出，推荐策略的选择其实和具体的应用场景有很大的关系。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small"><strong>基于模型的协同过滤推荐</strong></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">基于模型的协同过滤推荐就是基于样本的用户喜好信息，训练一个推荐模型，然后根据实时的用户喜好的信息进行预测，计算推荐。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">基于协同过滤的推荐机制是现今应用最为广泛的推荐机制，它有以下几个显著的优点：</span></span></p><ol style="padding-right: 5px; margin-top: 0px; font-size: 0.76em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px" type="1">    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">它不需要对物品或者用户进行严格的建模，而且不要求物品的描述是机器可理解的，所以这种方法也是领域无关的。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">这种方法计算出来的推荐是开放的，可以共用他人的经验，很好的支持用户发现潜在的兴趣偏好 </span></span></li></ol><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">而它也存在以下几个问题：</span></span></p><ol style="padding-right: 5px; margin-top: 0px; font-size: 0.76em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px" type="1">    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">方法的核心是基于历史数据，所以对新物品和新用户都有&ldquo;冷启动&rdquo;的问题。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">推荐的效果依赖于用户历史偏好数据的多少和准确性。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">在大部分的实现中，用户历史偏好是用稀疏矩阵进行存储的，而稀疏矩阵上的计算有些明显的问题，包括可能少部分人的错误偏好会对推荐的准确度有很大的影响等等。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">对于一些特殊品味的用户不能给予很好的推荐。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">由于以历史数据为基础，抓取和建模用户的偏好后，很难修改或者根据用户的使用演变，从而导致这个方法不够灵活。 </span></span></li></ol><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><a name="minor4.4"><span style="font-family: 宋体"><span style="font-size: small"><span class="smalltitle" style="font-weight: bold">混合的推荐机制</span></span></span></a></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">在现行的 Web 站点上的推荐往往都不是单纯只采用了某一种推荐的机制和策略，他们往往是将多个方法混合在一起，从而达到更好的推荐效果。关于如何组合各个推荐机制，这里讲几种比较流行的组合方法。</span></span></p><ol style="padding-right: 5px; margin-top: 0px; font-size: 0.76em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px" type="1">    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">加权的混合（Weighted Hybridization）: 用线性公式（linear formula）将几种不同的推荐按照一定权重组合起来，具体权重的值需要在测试数据集上反复实验，从而达到最好的推荐效果。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">切换的混合（Switching Hybridization）：前面也讲到，其实对于不同的情况（数据量，系统运行状况，用户和物品的数目等），推荐策略可能有很大的不同，那么切换的混合方式，就是允许在不同的情况下，选择最为合适的推荐机制计算推荐。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">分区的混合（Mixed Hybridization）：采用多种推荐机制，并将不同的推荐结果分不同的区显示给用户。其实，Amazon，当当网等很多电子商务网站都是采用这样的方式，用户可以得到很全面的推荐，也更容易找到他们想要的东西。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 5px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">分层的混合（Meta-Level Hybridization）: 采用多种推荐机制，并将一个推荐机制的结果作为另一个的输入，从而综合各个推荐机制的优缺点，得到更加准确的推荐。 </span></span></li></ol><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><a name="major5"><span style="font-family: 宋体"><span style="font-size: small"><span class="atitle" style="font-weight: bold">推荐引擎的应用</span></span></span></a></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">介绍完推荐引擎的基本原理，基本推荐机制，下面简要分析几个有代表性的推荐引擎的应用，这里选择两个领域：Amazon 作为电子商务的代表，豆瓣作为社交网络的代表。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small"><strong>推荐在电子商务中的应用 &ndash; Amazon</strong></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">Amazon 作为推荐引擎的鼻祖，它已经将推荐的思想渗透在应用的各个角落。Amazon 推荐的核心是通过数据挖掘算法和比较用户的消费偏好于其他用户进行对比，借以预测用户可能感兴趣的商品。对应于上面介绍的各种推荐机制，Amazon 采用的是分区的混合的机制，并将不同的推荐结果分不同的区显示给用户，图 6 和图 7 展示了用户在 Amazon 上能得到的推荐。</span></span></p><p><span style="font-family: 宋体"><span style="font-size: small"><br /><a name="fig6"></a></span></span><span style="font-size: larger"><a name="fig6"></a></span><span><span style=""><a name="fig6"></a></span></span><span><span><span style=""><a name="fig6"></a></span></span></span><span style="font-family: 楷体_GB2312"><span><span><span style=""><a name="fig6"><span style="font-family: 宋体"><b style="padding-right: 5px; padding-left: 5px; font-weight: bold; font-size: 0.76em; padding-bottom: 0.7em; padding-top: 0.3em; font-family: arial, sans-serif">图 6. Amazon 的推荐机制 - 首页</b></span></a></span></span></span></span><span style="font-family: 宋体"><span style=""><span><span><span style=""><br /><img style="border-top-width: 0px; padding-right: 5px; padding-left: 5px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0.7em; padding-top: 0.3em; border-right-width: 0px" height="329" alt="图 6. Amazon 的推荐机制 - 首页" width="511" src="http://www.ibm.com/developerworks/cn/web/1103_zhaoct_recommstudy1/image013.gif" />&nbsp;<br /><br /></span><a name="fig7"></a></span></span></span></span><span style="font-size: larger"><a name="fig7"></a></span><span style="font-family: 楷体_GB2312"><span style="font-size: larger"><span style="font-size: small"><a name="fig7"><span style="font-family: 宋体"><b style="padding-right: 5px; padding-left: 5px; font-weight: bold; font-size: 0.76em; padding-bottom: 0.7em; padding-top: 0.3em; font-family: arial, sans-serif">图 7. Amazon 的推荐机制 - 浏览物品</b></span></a></span></span><span style="font-family: 宋体"><span style="font-size: larger"><span style="font-size: small"><br /><img style="border-top-width: 0px; padding-right: 5px; padding-left: 5px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0.7em; padding-top: 0.3em; border-right-width: 0px" height="339" alt="图 7. Amazon 的推荐机制 - 浏览物品" width="475" src="http://www.ibm.com/developerworks/cn/web/1103_zhaoct_recommstudy1/image015.gif" />&nbsp;<br />&nbsp;</span></span></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">Amazon 利用可以记录的所有用户在站点上的行为，根据不同数据的特点对它们进行处理，并分成不同区为用户推送推荐：</span></span></p><ul style="padding-right: 5px; margin-top: 0px; font-size: 0.76em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px">    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 0px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">今日推荐 (Today's Recommendation For You): 通常是根据用户的近期的历史购买或者查看记录，并结合时下流行的物品给出一个折中的推荐。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 0px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">新产品的推荐 (New For You): 采用了基于内容的推荐机制 (Content-based Recommendation)，将一些新到物品推荐给用户。在方法选择上由于新物品没有大量的用户喜好信息，所以基于内容的推荐能很好的解决这个&ldquo;冷启动&rdquo;的问题。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 0px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">捆绑销售 (Frequently Bought Together): 采用数据挖掘技术对用户的购买行为进行分析，找到经常被一起或同一个人购买的物品集，进行捆绑销售，这是一种典型的基于项目的协同过滤推荐机制。 </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 0px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">别人购买 / 浏览的商品 (Customers Who Bought/See This Item Also Bought/See): 这也是一个典型的基于项目的协同过滤推荐的应用，通过社会化机制用户能更快更方便的找到自己感兴趣的物品。 </span></span></li></ul><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">值得一提的是，Amazon 在做推荐时，设计和用户体验也做得特别独到：</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">Amazon 利用有它大量历史数据的优势，量化推荐原因。</span></span></p><ul style="padding-right: 5px; margin-top: 0px; font-size: 0.76em; margin-bottom: 0px; padding-bottom: 5px; padding-top: 0px">    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 0px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">基于社会化的推荐，Amazon 会给你事实的数据，让用户信服，例如：购买此物品的用户百分之多少也购买了那个物品； </span></span></li>    <li style="padding-right: 5px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 3px; padding-top: 0px; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">基于物品本身的推荐，Amazon 也会列出推荐的理由，例如：因为你的购物框中有 ***，或者因为你购买过 ***，所以给你推荐类似的 ***。 </span></span></li></ul><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">另外，Amazon 很多推荐是基于用户的 profile 计算出来的，用户的 profile 中记录了用户在 Amazon 上的行为，包括看了那些物品，买了那些物品，收藏夹和 wish list 里的物品等等，当然 Amazon 里还集成了评分等其他的用户反馈的方式，它们都是 profile 的一部分，同时，Amazon 提供了让用户自主管理自己 profile 的功能，通过这种方式用户可以更明确的告诉推荐引擎他的品味和意图是什么。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small"><strong>推荐在社交网站中的应用 &ndash; 豆瓣</strong></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">豆瓣是国内做的比较成功的社交网站，它以图书，电影，音乐和同城活动为中心，形成一个多元化的社交网络平台，自然推荐的功能是必不可少的，下面我们看看豆瓣是如何推荐的。</span></span></p><p><span style="font-family: 宋体"><span style="font-size: small"><br /><a name="fig8"></a></span></span><span style="font-size: larger"><a name="fig8"></a></span><span style="font-family: 楷体_GB2312"><span style="font-size: larger"><span style="font-size: small"><a name="fig8"><span style="font-family: 宋体"><b style="padding-right: 5px; padding-left: 5px; font-weight: bold; font-size: 0.76em; padding-bottom: 0.7em; padding-top: 0.3em; font-family: arial, sans-serif">图 8 . 豆瓣的推荐机制 - 豆瓣电影</b></span></a></span></span><span style="font-family: 宋体"><span style="font-size: larger"><span style="font-size: small"><br /><img style="border-top-width: 0px; padding-right: 5px; padding-left: 5px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0.7em; padding-top: 0.3em; border-right-width: 0px" height="259" alt="图 8 . 豆瓣的推荐机制 - 豆瓣电影" width="336" src="http://www.ibm.com/developerworks/cn/web/1103_zhaoct_recommstudy1/image017.gif" />&nbsp;<br />&nbsp;</span></span></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">当你在豆瓣电影中将一些你看过的或是感兴趣的电影加入你看过和想看的列表里，并为它们做相应的评分，这时豆瓣的推荐引擎已经拿到你的一些偏好信息，那么它将给你展示如图 8 的电影推荐。</span></span></p><p><span style="font-family: 宋体"><span style="font-size: small"><br /><a name="fig9"></a></span></span><span style="font-size: larger"><a name="fig9"></a></span><span style="font-family: 楷体_GB2312"><span style="font-size: larger"><span style="font-size: small"><a name="fig9"><span style="font-family: 宋体"><b style="padding-right: 5px; padding-left: 5px; font-weight: bold; font-size: 0.76em; padding-bottom: 0.7em; padding-top: 0.3em; font-family: arial, sans-serif">图 9 . 豆瓣的推荐机制 - 基于用户品味的推荐</b></span></a></span></span><span style="font-family: 宋体"><span style="font-size: larger"><span style="font-size: small"><br /><img style="border-top-width: 0px; padding-right: 5px; padding-left: 5px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0.7em; padding-top: 0.3em; border-right-width: 0px" height="333" alt="图 9 . 豆瓣的推荐机制 - 基于用户品味的推荐" width="395" src="http://www.ibm.com/developerworks/cn/web/1103_zhaoct_recommstudy1/image019.gif" />&nbsp;<br />&nbsp;</span></span></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">豆瓣的推荐是通过&ldquo;豆瓣猜&rdquo;，为了让用户清楚这些推荐是如何来的，豆瓣还给出了&ldquo;豆瓣猜&rdquo;的一个简要的介绍。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small"><em>&ldquo;你的个人推荐是根据你的收藏和评价自动得出的，每个人的推荐清单都不同。你的收藏和评价越多，豆瓣给你的推荐会越准确和丰富。</em><br /><em>每天推荐的内容可能会有变化。随着豆瓣的长大，给你推荐的内容也会越来越准。&rdquo;</em></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">这一点让我们可以清晰明了的知道，豆瓣必然是基于社会化的协同过滤的推荐，这样用户越多，用户的反馈越多，那么推荐的效果会越来越准确。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">相对于 Amazon 的用户行为模型，豆瓣电影的模型更加简单，就是&ldquo;看过&rdquo;和&ldquo;想看&rdquo;，这也让他们的推荐更加专注于用户的品味，毕竟买东西和看电影的动机还是有很大不同的。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">另外，豆瓣也有基于物品本身的推荐，当你查看一些电影的详细信息的时候，他会给你推荐出&ldquo;喜欢这个电影的人也喜欢的电影&rdquo;， 如图 10，这是一个基于协同过滤的应用。</span></span></p><p><span style="font-family: 宋体"><span style="font-size: small"><br /><a name="fig10"></a></span></span><span style="font-size: larger"><a name="fig10"></a></span><span style="font-family: 楷体_GB2312"><span style="font-size: larger"><span style="font-size: small"><a name="fig10"><span style="font-family: 宋体"><b style="padding-right: 5px; padding-left: 5px; font-weight: bold; font-size: 0.76em; padding-bottom: 0.7em; padding-top: 0.3em; font-family: arial, sans-serif">图 10 . 豆瓣的推荐机制 - 基于电影本身的推荐</b></span></a></span></span><span style="font-family: 宋体"><span style="font-size: larger"><span style="font-size: small"><br /><img style="border-top-width: 0px; padding-right: 5px; padding-left: 5px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0.7em; padding-top: 0.3em; border-right-width: 0px" height="199" alt="图 10 . 豆瓣的推荐机制 - 基于电影本身的推荐" width="356" src="http://www.ibm.com/developerworks/cn/web/1103_zhaoct_recommstudy1/image021.gif" />&nbsp;<br />&nbsp;</span></span></span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><a name="major6"><span style="font-family: 宋体"><span style="font-size: small"><span class="atitle" style="font-weight: bold">总结</span></span></span></a></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">在网络数据爆炸的年代，如何让用户更快的找到想要的数据，如何让用户发现自己潜在的兴趣和需求，无论是对于电子商务还是社会网络的应用都是至关重要的。推荐引擎的出现，使得这个问题越来越被大家关注。但对大多数人来讲，也许还在惊叹它为什么总是能猜到你到底想要些什么。推荐引擎的魔力在于你不清楚在这个推荐背后，引擎到底记录和推理了些什么。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">通过这篇综述性的文章，你可以了解，其实推荐引擎只是默默的记录和观察你的一举一动，然后再借由所有用户产生的海量数据分析和发现其中的规律，进而慢慢的了解你，你的需求，你的习惯，并默默的无声息的帮助你快速的解决你的问题，找到你想要的东西。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">其实，回头想想，很多时候，推荐引擎比你更了解你自己。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">通过第一篇文章，相信大家对推荐引擎有一个清晰的第一印象，本系列的下一篇文章将深入介绍基于协同过滤的推荐策略。在现今的推荐技术和算法中，最被大家广泛认可和采用的就是基于协同过滤的推荐方法。它以其方法模型简单，数据依赖性低，数据方便采集，推荐效果较优等多个优点成为大众眼里的推荐算法&ldquo;No.1&rdquo;。本文将带你深入了解协同过滤的秘密，并给出基于 Apache Mahout 的协同过滤算法的高效实现。Apache Mahout 是 ASF 的一个较新的开源项目，它源于 Lucene，构建在 Hadoop 之上，关注海量数据上的机器学习经典算法的高效实现。</span></span></p><p style="padding-right: 5px; padding-left: 5px; font-size: 0.76em; padding-bottom: 0.7em; margin: 0px; padding-top: 0.3em; font-family: arial, nsimsun, sans-serif"><span style="font-family: 宋体"><span style="font-size: small">感谢大家对本系列的关注和支持。</span></span></p>]]></description><category>产品设计</category><comments>http://www.vvwww.com/post/PD244/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=244</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=244&amp;key=cf4117a1</trackback:ping></item><item><title>敏捷项目管理的智慧</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/PM243/</link><pubDate>Wed, 31 Aug 2011 23:39:00 +0800</pubDate><guid>http://www.vvwww.com/post/PM243/</guid><description><![CDATA[<p>&nbsp;&nbsp;<img title="" alt="" onload="ResizeImage(this,520)" src="http://www.vvwww.com/upload/01300000081816123025937530171.jpg" /></p><p>敏捷最有智慧的地方在于它只为我们提出了核心价值观和12条原则，它并没有告诉做什么和怎么做，因此基于这一基础，任何符合敏捷核心价值观和原则的方法、实践，我们都可以称之为敏捷。正是敏捷开发的这种开放性和动态发展的特性，留给敏捷开发人员巨大的空间，赋予了敏捷无限的魅力，但同时也留给敏捷实践者太多的困惑和无奈。</p><p>众所周知，敏捷开发是一个涵盖性术语，它包括SCRUM，XP，LEAN，AUP等多种类似的方法和实践。基于这些内容，产生出了敏捷开发的基本价值观和12条原则：</p><ul>    <li>人和交互重于过程和工具。</li>    <li>可以工作的软件重于求全责备的文档。</li>    <li>客户协作重于合同谈判</li>    <li>随时应对变化重于循规蹈矩</li></ul><p>其中位于右边的内容虽然也有其价值，但是左边的内容最为重要。</p><p><strong>敏捷开发的12条原则：</strong></p><ul>    <li>首要目标：更早地持续地交付有价值的软件，满足客户需求</li>    <li>即使到了开发的后期，也欢迎需求变更</li>    <li>频繁交付可工作的软件</li>    <li>关注协作，业务人员和开发人员必须每天协同工作</li>    <li>围绕被激励起来的个人来构建项目</li>    <li>面对面的交谈，是最有效和效率最高的沟通方法</li>    <li>可工作的软件是度量进度的主要标准</li>    <li>敏捷过程提倡可持续的开发速度</li>    <li>持续地优化技术和设计，会增强敏捷能力</li>    <li>简单--使工作效率最大化的艺术--是基本原则</li>    <li>最好的构架、需求和设计，出自自组织团队</li>    <li>定期总结回顾，思考团队如何更加高效，并作出相应调整</li></ul><p>&nbsp;</p><p>&nbsp;</p><p><img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/goldenning/EntryImages/20100103/Agile%20Principle.png" /><br /><br />敏捷的核心价值观和12条原则赋予了敏捷开发团队基本的思想文化基因，我们可以将其理解为敏捷之道中规律的部分（道之无名）；而敏捷开发团队基于敏捷的核心价值观和12条原则所进行的各种敏捷实践，我们可以将其理解为敏捷之道中表象的部分（道之有名）。观&ldquo;有名&rdquo;而悟&ldquo;无名&rdquo;，据&ldquo;无名&rdquo;而推&ldquo;有名&rdquo;，此正所谓&ldquo;一阴一阳谓之道&rdquo;。<br /><br />1 敏捷的&ldquo;平衡&rdquo;思想<br />从敏捷宣言对敏捷的核心价值观的阐述方式上，可以看到敏捷是一个相对的概念，它最终体现的是敏捷实践者对敏捷实践的一种拿捏和平衡。在一个团队推行敏捷的过程中，问得最多的问题就是关于敏捷开发流程的轻重、敏捷开发团队的大小分布、敏捷开发过程中工具的使用、敏捷最佳实践的采用顺序和数量，聪明的敏捷实践者知道上述所有问题都没有明确的答案，因为它需要具体情况具体分析。敏捷开发推崇的是做在指定环境中正确的事情，做对指定团队有效的事情，因此敏捷是一种实践方法和哲学，而不是一种理论方法，它讲究的是一种基于实践的平衡之道。</p><p><img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/goldenning/EntryImages/20100103/Agile%20Realitive.png" /><br />在敏捷开发中存在几个非常著名的实践平衡：<br /><strong>1.1 项目和迭代间的平衡</strong><br />项目越大，管理的复杂度就越大，带给项目管理团队的管理难度也就越高。敏捷开发中最重要的一个开发实践就是迭代式开发，其本质就是变长的、复杂的项目周期为短的、简单的迭代周期，从而改变了我们多久运行项目一次？同时通过不断重复的迭代周期，不断积累项目管理经验，提高团队绩效，改进团队开发速度。通过有效平衡项目和迭代，使团队在实现把复杂问题简单化的同时，积小胜为大胜，积珪步而至千里。<br /><br /><img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/goldenning/EntryImages/20100103/iteration.png" /><br /><strong>1.2 计划的平衡</strong><br />计划的主要作用无外乎以下几点：</p><ul>    <li>统一思想，明确目标</li>    <li>团队沟通</li>    <li>整合团队工作</li>    <li>作为项目监控的基准</li></ul><p>然而，地球人都知道计划赶不上变化的道理。尤其是当今业务飞速发展、经济市场环境不断创新的时代。敏捷团队不相信大的计划，取而代之敏捷团队使用分层的项目计划：发布计划、迭代计划和每日计划，迭代式软件开发和两级项目规划两个敏捷最佳实践，将规划过程分成了发布规划和迭代规划两个动态过程，发布规划的目标是制定出发布计划，发布计划中包含主要的项目远景、发布时间节点和里程碑要求，忽略善变的细节；而迭代计划中则包含具体计划实施的细节内容，它是个动态的计划，主要关注当前迭代和下一迭代工作内容，包括具体实施细节。由此可见，敏捷规划过程本身就是一个平衡过程，粗粒度的目标节点和细部的任务规划之间远粗近细的平衡，计划中不变的里程碑要求和善变的工作内容之间的动态平衡。<br /><img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/goldenning/EntryImages/20100103/Two%20level%20planning.png" /><br /><br /><strong>1.3 需求管理的平衡</strong><br />众所周知，项目的本质是渐进明细的，而需求开发过程的本质是启发式的，尤其是软件需求，整个开发过程就是一个由抽象到具体，由概念到实体的过程，因此项目需求变更成为必然，新的需求的不断提出也成为必然，这导致项目范围管理难度较大。同时加上很多软件生存的快速变化的业务环境和市场环境，如何保证快速响应需求变更的同时，保证软件的快速交付就成了一大难题。<br />敏捷开发基于需求不断变化的事实和快速响应客户需求变更的要求，通过很好的平衡需求中的变与不变的部分，做到了需求的动态平衡。</p><p>&nbsp;</p><p><img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/goldenning/EntryImages/20100103/requirement%20management01.png" /></p><p>敏捷项目中，需求在整个生命周期中是不断变化的，但为了保证软件开发团队工作的相对稳定，进入迭代规划的需求却又是相对固定不变的。敏捷开发团队正式通过这种对需求变与不变的相对平衡，智慧地即满足了快速响应客户变更，又保证可开发团队不为变更困扰。<br /><img alt="" src="http://p.blog.csdn.net/images/p_blog_csdn_net/goldenning/EntryImages/20100103/requirement%20management.png" /></p><p>&nbsp;</p>]]></description><category>项目管理</category><comments>http://www.vvwww.com/post/PM243/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=243</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=243&amp;key=194cad60</trackback:ping></item><item><title>地心探索</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss242/</link><pubDate>Wed, 31 Aug 2011 23:35:25 +0800</pubDate><guid>http://www.vvwww.com/post/rss242/</guid><description><![CDATA[<p>&nbsp;<img title="" alt="" src="http://www.vvwww.com/upload/2008062019400532351.jpg" onload="ResizeImage(this,520)" /></p><p>&nbsp;據俄羅斯《真理報》9月20日報道，一些有名望的科學家和作家相信，在地球內部，有著一些不為人知的地下城鎮，在這些城鎮中，住著一些來自外星球的生命體。</p><div>與「地下外星人」親密接觸 -</div><div>報道說， 首先提出關於地下城鎮說法的是美國一名頗有聲望的科學家兼記者作家的理查德&middot;沙弗。他在1946年通過調查研究，在美國《驚異事件雜誌》上提出了這個說法。沙弗說，他曾經有過幾個星期的親身經歷，與住在地下城鎮中的外星人打交道。這些長相似魔鬼的外星人是些不可思議的天才，在人類出現前就已經定居在地球上了。他們非常聰明，受到非常高等的教育。他們所有的生活習慣與人類沒有一絲相似，用他們的話說就是「不屑與人類相同。」</div><div>其實早在17世紀英國天文學家愛德蒙德&middot;哈雷，著名作家朱爾斯&middot;凡爾納愛德加&middot;艾倫&middot;坡和其他一些有名的作家在他們的作品中都曾提到關於地球是一個內部有著洞穴的球體的說法。</div><div>煤礦工人發現「外星人」出入地面通道？</div><div>據悉，1963年，兩名美國煤礦工人在挖煤時，發現了一條地下隧道。他們循著隧道一直斜著向下走，最後在隧道的盡頭發現了一扇巨大的門。推開門後，他們發現了一個大理石樓梯。出於害怕，這2名煤礦工人沒敢再向下走去。而幾乎在同一時期，在英國，幾名煤礦工人在挖掘一條隧道時，聽到地底下傳來機械裝置運動的聲音。一名礦工稱，他們還發現一個通向地下井的樓梯，走到樓梯口時，機械裝置運動的聲音變得清晰。之後，這些以為遇鬼的工人嚇得逃離了隧道。等他們喊來大量工人，準備探個究竟時，樓梯和通向地下井的入口都消失得無影無蹤了。</div><div>在20世紀 70年代末期，美國的一個人造衛星曾拍攝到一些有趣的圖片，這些圖片顯示，在北極地區地底深處，存在著一個黑暗的、有規律的成形場所。</div><div>&nbsp;</div><div>最近，美國人類學家詹姆士&middot;麥肯納和他的同事考察了美國愛達荷州的一個以邪惡聞名的洞穴。他們在這個洞穴的幾百米深處聽到了尖叫聲和呻吟聲。之後，這些考察者在洞穴中發現了一些人類的骨架。但是，由於洞穴中有著大量的硫磺味道，他們停止了更進一步的探險。</div><div>偶爾打開「底下之門」？</div><div>一些地質學家認為，地下世界所謂的居民並非地球人類，因為在地下洞穴中溫度極高，又缺乏氧氣，人類是不可能生活在地下的。惟一的解釋就是，住在地下的居民是來自地球以外的外星人。這些存在於地球上的外星人可能對於人類無止盡的戰爭和暴力感到厭倦，於是搬到地下生存。他們在地下可以一邊發展自己的科技，一邊觀察地面上人類的發展情況。但是，也有一些科學家認為，這些居住在地球上的外星人可能是居住在地下第四度空間。隨著地球磁場的不停變化，通向第四度空間的入口會在某個時刻打開。</div><div>地球內有人類嗎？</div><div>歷史上有許多有關的記載，有些人到地球的內部，發現了一些巨大的動物、或者廣大的草原、或者高大的人、他們可以用心靈溝通&hellip;&hellip;等等，甚至有人提出地球中空論的說法。以往這種說法被認為無稽之談，今若以多重宇宙的時空架構，這些記載，勢將引起世人的重新評估。</div><div>1908年美國作家威立喬治 艾默生出版一本「冒煙的神」，敘述一位挪威人歐拉 福傑森曾由北極進入地球內部的空間，那裡有一個比我們的太陽小一點的太陽，住著身高十二尺以上，壽命從四百歲到八百歲的巨人，利用某種輻射線可以把思想傳送到對方，他們使用大地的電磁能操縱及駕駛飛碟。傑森住兩年後返回人間。</div><div>1947年二月美國海軍准將裡察 拜爾駕駛飛機在北極飛行七小時，飛過一千七百哩達另一個世界，那裡有一片無冰的山嶽、湖泊、河流、植物及動物存在其間，拜爾說過，那個在空中的迷人大陸，無限神秘的土地，在北極內部是一個最大的未知中心，被稱為人類歷史上最偉大的地理發現。</div><div>其實還有一些記載，同樣去過一次，再也無從找到那裡，這種現象的奧秘在哪裡呢，就是空間的問題，例如在桃花源洞內的世界，故以後無人再找到，由這些現象，有人就把地球內部是中空的，有一顆星，好像太陽，這本書名叫《地球內部的人類》，繪聲繪影的寫著，都有一些事實根據。</div><div>大家想一想，有沒有可能呢，不可能，因為地球的質量那麼大，越裡面溫度越高，到地心部分達攝氏6000度，中間還有液態的熔岩，哪會是中空呢。</div><div>因為我們的地球只是在這三度空間裡，另外還有二個三度空間，即另外有二重宇宙，與我們同時存在，換句話說，任何一點的座標數有九個，其中三個座標是我們所知道的三度空間，其他六個座標是在另外的空間裡，目前我們沒有辦法去探求，因此地球內部是不是真的有人類呢，其實不是在地球內部，而是在地球內部另外的空間，那裡有另一顆星球，所以地底下的人類其實不在地球內部，而是另一個空間的人類，他們和我們是同樣存在的。&nbsp;</div><div>-地心飛碟基地-&nbsp;</div><div>地心有飛碟基地，這聽起來簡直是天方夜譚。然而曾是美國海軍少將的拜爾德卻在不久前公開了他駕機探訪地心飛碟基地的神奇經歷，使外星人和飛碟再次成為美國人談論的熱門話題。&nbsp;</div><div>拜爾德的日記說，他曾於1947年2月率領一支探險隊，從北極進人地球內部，並發現了一個龐大的飛碟基地和地面上已絕種的動植物，在這個基地裡還居住著擁有高科技的「超人」。但這一信息卻一直被美國政丨府長期封鎖著。&nbsp;</div><div>拜爾德飛行日記所載，探險隊駐紮在北極地區某一基地內。1947年2月19日，一切準備就緒後，他們朝北方進行飛行探測。圓形六分儀和指南針均經過再三檢驗，無線電通訊也正常。&nbsp;</div><div>他們到達飛行高度707米時；東風帶來輕微地展動，下降到518米時，飛機又趨於穩定，但尾風增強，後又產生展動，爬升到610米則又一切平穩。這時，他們看到地面上覆蓋著無盡的冰雪，呈現出微黃色的光澤，但奇怪地分散成直線狀，還賂微透出微紅色和紫色。&nbsp;</div><div>拜爾德除將此奇景立即電告基地外，又環繞飛行兩圈。這時，他發現指南針和六分儀不停地旋轉抖動，無法測出飛行方向，接著，看到地面不再有冰雪，遠方出現了山脈。那些山脈的範圍並不大，但絕不是幻覺。此時已飛行29分鐘。&nbsp;</div><div>爬升至900米時，拜爾德的飛機遭遇到強烈地震動。繼續朝北飛越這些山脈後，他竟然看到了綠意盎然的山谷，山谷中有小溪流過，左邊的山坡上分佈著茂密的森林。此時羅盤又開始旋轉，並在兩點之間來回擺動。於是他下降至427米，向左急轉，以便仔細觀察這個山谷。他看到青苔或稠密的青草覆蓋著的地面，但這裡的光線卻非常奇特，因為並沒有看到陽光。</div><div>他還看見了似乎是大象的動物，再下降至305米，，在望遠鏡中他吃驚地發現了地球上本已經絕種的猛犸!繼而又看到綠色的起伏山丘，外面的溫度為27cC，各種儀器恢復正常，無線電通訊卻失靈了。&nbsp;</div><div>地面更趨於平坦，拜爾德發現竟然有城市存在，而空中的飛行器似乎具有奇特的浮力。在艙門上端和右側出現碟形發光飛行器，上面有無法形容的符號。結果，拜爾德的飛機被一股無形的力量所吸住，無法加以控制。&nbsp;</div><div>更不可思議的事情隨即發生，無線電發出的嘩嘩聲中竟然傳出帶著北歐語言或德語音調的英語：「歡迎將軍的光臨」，並稱不必擔心，7分鐘之後將安全降落。&nbsp;</div><div>接著，飛機的引擎停止運轉，飛機在輕微地震動中平安著陸，好像是由看不見的升降機支撐著。幾位金髮碧眼、皮膚白晰，體形高大的人出現了，這些人並沒有攜帶任何武器。而這座城市閃閃發光，有規律地發出彩虹般的色彩。&nbsp;</div><div>拜爾德和無線電通信員受到熱誠地款待，他們登上了沒有輪子的平台車，急速奔向燦爛的城市。城市似乎是用水晶修築而成。隨後，他們走進一巨大的建築物裡，飲用風味絕佳的熱飲料。10分鐘後，拜爾德暫時離開通信員，進入一架升降機，向下運轉數分鐘，後來升降機的門朝上無聲地開啟，他走過充滿玫瑰紅色的走廊，光線似乎是從牆壁上放射出來的。&nbsp;</div><div>他在一扇巨大的門前停下，門上有奇特的文字。在進入該房間之後所發生的事情更具有震撼性。拜爾德一再使用「前所未有」、「不可思議」、「難以形容」等詞彙來描述他親眼看到的華麗精緻的房間，那些人的聲音既悅耳又熱誠，他們告訴將軍，因他具有高貴的素質，並在「地表」世界有一定的知名度，所以讓他入境。&nbsp;</div><div>那些人還告訴他，這個地下世界名為「阿里亞尼」，自從美軍在日本廣島投下兩顆原子彈以後，他們才開始關注外面的世界，並在那個危機四伏的時代，派遣許多飛行器到地表展開調查。他們表示，地下世界的科技和文化要比地上世界進步數千年，原先他們並沒有干涉地上世界的戰爭的想法，但因為不願再見到人類使用原子武器，因此派出密使訪問超級大國，可未受重視。這次借邀請將軍的機會，傳達地上世界可能會走上自我毀滅的信息。那些人抱怨說，他們派出的人在地上世界受到了不友好的待遇，而飛行器也常遭戰機惡意攻擊。人類文明之花慘造蹂躪，明暗的幕罩已經降臨，全世界將陷入極度的不安之中。黑暗時代將出現，但新世界將從廢墟中再生，地下世界的人類會協助地上世界的人類重建家園。&nbsp;</div><div>拜爾德在結束會晤後，沿原路返回，與滿臉狐疑的通信員會合。在兩架飛行器的引導下，他們升至823米，然後平安返回基地。臨行之前無線電傳來德語「再見」的聲音，27分鐘後著陸。&nbsp;</div><div>1947年2月，拜爾德出席美國國防部的參謀會議，所有的陳述均有詳細的記錄，並且向杜魯門總統做了匯報。會議歷時6 小時40分鐘，他還接受了最高安全部門及醫療小組的調查，後被有關方面告知嚴守機密。拜爾德身為軍人，只能服從命令。但他仍在1965年12月24日的日記中寫道：「那塊土地在北極，那個基地是一個巨大的謎。」&nbsp;</div><div>飛碟研究專家們認為，飛碟的來源大致可分為三類：外太空、內太空、未來的人形生物通過時光隧道「來訪」。而所謂的內太空即指地球本身，從地心至大氣層均有可能。人類出現在地球這個藍色行星上，至少已有300萬年的歷史，但對地球本身到底瞭解多少呢?</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>Selamat Jarin!（天狼星語：祝福大家！）我們再次回來告訴你們更多的信息。當我們穩步走向第一次接觸的揭示時，我們將注意力大致集中到你們的內部鄰居。地心世界是一個充滿了無數神話、傳說和傳奇故事的概念。第一個關鍵點是，地心世界真正存在！你們的地理學很長時間來一直宣稱，地球母親是一個固狀球體，由單一緻密叫做「地幔」的中層和一個高度電磁化的中心地核組成，而你們則居住在地球表面&mdash;&mdash;環繞地幔的「地殼」上。 &nbsp; &nbsp; &nbsp; &nbsp;</div><div>&nbsp;</div><div>今天我們來告訴你，地球母親的結構完全不同。就像所有天體一樣，比如行星或恆星，地球是空心的。</div><div>這個事實被那些秘密控制你們的人壓制著，因為該真相將把操縱、誤導你們的其它核心概念全部顛覆。真相是一個有力的「芝麻開門」，當它被智慧地使用時，它將揭示大量新的知識，並激勵你在當前環境中充分應用你的內在智慧。 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div><div>&nbsp;</div><div>地心世界包含2個主要特徵。第一個特徵是地心世界的地殼，這是地球表面地殼的延續。地球兩極的每一極都有一大型的入口或洞口，有點像一個被挖去核的蘋果，地殼沿著洞口纏繞下去，包裹住地幔成為空心內部。★外部和內部的地殼有著非常相似的地形，擁有海洋、大陸、山脊、湖泊和河流。只不過地殼內部面對著地球的核心，核心發光並被薄霧層遮蔽。這種光比太陽光更為瀰漫，因此，地心世界的白天光線比地球表面更為柔弱溫和。 &nbsp; &nbsp; &nbsp; &nbsp;</div><div>&nbsp;</div><div>地心世界的第二個主要特徵是一個被稱為「地穴世界」的存在。地幔中巨大的空洞，一部分是地球母親形成的自然結構，其它部分則是由地心世界主要社會&mdash;&mdash;Aghartha大陸的高超技術製造而成。該大陸是地球的第二個銀河聯盟殖民地&mdash;&mdash;利莫裡亞(Lemuria)最後的倖存成員。 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div><div>&nbsp;</div><div>利莫裡亞最初是一個擁有地下成員的地表社會。第一個首都位於約25000前沉入太平洋的某個島嶼上，第二個首都則位於地心世界。後者也是利莫裡亞政府在大災難後移居的位置。■那時地表新的統治者&mdash;&mdash;亞特蘭蒂斯帝國，命令將主要的隧道入口封存起來，只有在亞特蘭蒂斯末日時，利莫裡亞人才打開這些封口，從某種死亡中救活了很多地表居民。這些被救活的地表居民構建了一個社會，在後來的某個時期回歸地表，成為位於亞洲南部的Rama帝國，但此後，公元前8千年的大洪水終結了這個試圖將人類從Anunnaki黑暗統治中救治出來的嘗試。儘管受到挫折，▲利莫裡亞仍恪守職責，繼續保護地表世界免遭黑暗之手的浩劫。就是利莫裡亞的銀河使者保證了此太陽系在銀河聯盟中的成員資格。 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div><div>&nbsp;</div><div>在大洪水及Rama帝國滅跡後，利莫裡亞人重新聚集起來，將他們新成立的社會命名為Aghartha。首都香巴拉則重新搬遷到一個洞穴中， ★此位置正位於今天西藏拉薩所在位置的遙遠地底。很多將香巴拉連接到地表的通道位於喜瑪拉雅山。就通過這裡，聖人們將大能量和神性智慧傳播給外部世界，並為特殊事件保留了一個非凡的地方，在那兒，聖人和他們挑選的門徒為了維護地球母親的神性能量晶格層而相遇。這項工作和地心世界中的每日無數儀式一起，對保持地球神性能量負有很大責任，這也是利莫裡亞留給地表世界的主要財產。就是利莫裡亞，也就是後來的Aghartha，一直在看守和保留著光，等待你們回到光的全意識。 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div><div>&nbsp;</div><div>Aghartha的世界很像你們。那裡包含了一個繁榮的生物圈，你可以在那兒找到很多已不再地表上生存的生物，這個奇異的動物園一直被小心呵護。地心的大量城市附近是一個特殊區域，由Aghartha人小心照看並在必要時對此種類繁多的生物圈的很多生物進行療愈。&nbsp;</div><div>&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;</div><div>Aghartha人居住在遍佈地心世界、連成網絡的水晶城市中。這些城市規模大小不同，居民從約1萬到100萬不等，主要分佈在約10萬到20 萬中。它們更像微型居民地，一起構成了整個社會。最小的單位叫做「密集群」。分享相似生命目的的密集群集合起來，就一起構成「部落」。而部落則是銀河社會的主要居住群形式。&nbsp;</div><div>&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;</div><div>隨時間流逝，全意識人們發展了一個和諧生存的形式叫做銀河社會，其中Aghartha是一個主要範本。在Aghartha中，12個部落的體系構成了社會運轉的核心，這些部落據不同任務如管理、工程、療愈科學等而組織。每個部落又分成最多包含64個人的眾多密集群。一個部落中的密集群普遍可以與其他11個部落的密集群之間自由通訊。這些更大的集體構成了迷你社團，每個均擁有資源創造性地解決各種問題。 &nbsp; &nbsp; &nbsp;&nbsp;</div><div>&nbsp;</div><div>Aghartha的統治委員會由12個部落的首領組成，他們因過去對部落和社會的功勳而被選舉。在委員會中再次選舉出來一位被認為最有智慧、最應得Aghartha國王或王后榮耀的成員。他將負責處理派往地表世界、銀河聯盟相應委員會的使者與聯絡的龐大隊伍。這些使者的職責是來監控你們回歸肉體天使的進程是否根據神性計劃而進行。他們為你們所做的工作幫助我們再次聚焦「第一次接觸」任務，並間接導致了「Decra Zau」或靈魂運作任務。並且，▲國王和他的委員會已詳盡設計了實際大規模登陸你們世界後（指第一次接觸），所伴隨而來的偉大時期的整體議程。 &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</div><div>&nbsp;</div><div>高級技術（光技術），允許每個人創造他/她的每日食物與衣著，並可使每個水晶城自給自足。地表世界的耕種、建築和製造行業對這種光技術而言是過時的。比如用此技術，▲每個人可根據自己的幻想改變居所的外表和內部設計；幾乎瞬間，也可將一個人從一個地方運送到另一個地方。這就讓整個世界就如你隔壁鄰居一般，可輕巧接觸。就這樣，Aghartha人的思想並不被生活在地下的有限條件所約束，光技術賦予的自由釋放了美妙的創造能力，讓全社會充分使用。在充滿快樂中，Aghartha人現在正使用上述技能與地表同胞一起重建Aghartha。 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div><div>&nbsp;</div><div>今天，我們談及了位於你們腳下遙遠位置的迷人世界。這塊地心世界的大陸和你們所生活的世界非常相似，而且也同樣被深愛著。這塊大陸上的人類 &mdash;&mdash;Aghartha人，向你致敬，並期望著地球母親這兩個世界再次融為一體的那一天的到來！我們現在要走了，祝福你們，親愛的夥伴們！以你的眾心之心記住，天主永久的提供和無限的充足真正就是你的！ &nbsp; &nbsp; &nbsp;</div><div>&nbsp;</div><div>Selamat Gajun! Selamat Kasijaram!（天狼星語：獻身於一！在愛與歡樂中被祝福！）</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>================================</div><div>&nbsp;</div><div>附錄：關於星際聯邦（銀河聯盟）</div><div>&nbsp;</div><div>星際聯邦是否存在？真正讀過《一的法則》的讀者，都可以作出判斷。個人認為，十分可能。因為Ra的深度真誠，極富有同情心，所以Ra提到的星際聯邦如果不存在，可能性十分小。如果您感覺理解《一的法則》有困難，請先通讀《與神對話》這本書。《與神對話》的思想對於理解《一的法則》，十分有幫助。《一的法則》有很多觀點，與佛家的觀點很一致。</div><div>&nbsp;</div><div>星際聯邦一詞出自《一的法則》，位於第八密度的土星的光環，由各個星體上高智慧的憂傷的兄弟姐妹組成，服務於500個星體(註：第六密度生命的智慧程度，大約相當於幾千萬年後的地球人類，Ra是第六密度)。為什麼這個星際議會位於土星，可能是因為離地球比較近的原因，因此研究小組能夠與這個土星的星際議會取得聯繫。宇宙中，不止有土星的星際聯邦這一個，還有很多個星際聯邦。在《一的法則》中，星際聯邦多次造訪地球。例如埃及金字塔是星際聯邦成員Ra以及他的同伴們建造，耶穌降生地球之前的父母是星際聯邦成員。尼古拉&middot;特斯拉和埃德加&middot;凱西，都是與星際聯邦取得通訊，獲得信息。</div><div>&nbsp;</div><div>根據《一的法則》，7.5萬年前，地球被星際聯邦隔離，所以地球人看不見第三密度以上的外星人，目前任何電子設備也無法直接檢測到。外星人在地球出現，需要嚴格地經過星際聯邦的同意，目前還不允許。更多數的外星人，都是十分友好的。如果地球人有強烈的正義的渴望與這些外星人取得聯繫，地球的隔離狀態隨時都可以解除，這取決於地球人中，正義的人口比例。</div><div>&nbsp;</div><div>地球目前處於第三密度的尾聲。1981年～2011年的30年間，是地球向第四密度過渡的時期。過渡期結束，地球迅速向第四密度轉化。這個過程，Ra稱為「收割」，收割由星際聯邦參與第三密度的週期是2.5萬年，如果第三密度週期結束，收割會如整點報時般地準時發生。如果到時收割量為0，地球會仍然維持在第三密度狀態，再次重複一個第三密度週期，直到2.5萬年後，再次產生一次收割。</div><div>&nbsp;</div><div>獲得星際聯邦的幫助。在幾萬年前的馬爾戴克和亞特蘭提斯時期，以及幾千年前的埃及人，曾經呼叫過星際聯邦。然後，星際聯邦成員被呼叫而來，在地球降落，幫助地球人，於是埃及金字塔被建造，埃及金字塔的作用是醫療(其它地區的金字塔有其它的用途，比如調節地球氣候)。在當時，似乎是一個小的群體，或者個人，可以呼叫星際聯邦，得到高智慧的星際聯邦的幫助。而現代似乎是因為地球的業力(因果報應)的原因，需要全體呼叫星際聯邦，才可以得到星際聯邦的幫助。</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>==========================</div><div>&nbsp;</div><div>附：空心地球：地下文明---Agartha</div><div>&nbsp;</div><div>（另摘：） &nbsp;地心人表示，地下世界的科技和文化要比地上世界進步數千年，原先他們並沒有干涉地上世界的戰爭的想法，但因為不願再見到人類使用原子武器，因此派出密使訪問超級大國，可未受重視。這次借邀請將軍的機會，傳達地上世界可能會走上自我毀滅的信息。那些人抱怨說，他們派出的人在地上世界受到了不友好的待遇，而飛行器也常遭戰機惡意攻擊。人類文明之花慘造蹂躪，明暗的幕罩已經降臨，全世界將陷入極度的不安之中。黑暗時代將出現，但新世界將從廢墟中再生，地下世界的人類會協助地上世界的人類重建家園。</div><div>&nbsp;</div><div>地下文明連接到『空心地球理論』。據猜測族類們存在於地球行星下的地下城市裡。時常這些地下世界的居民比地面人類科技先進得多。有些人相信 UFO們不是來自其它行星，而是地球內部奇異生命所製造。在17世紀晚期，英國天文學家Edmund Halley提議地球由四個同心圓組成而「暗示地球內部居住有生命和靠發光的大氣層照明。他認為極光或北極光由這些逃逸出來的氣體通過位於極地的薄地殼引起。」在19世紀早期，1812年戰爭的一位行為古怪的老兵John Symmes廣泛地發揚了內部同心球體的想法，聲稱通向內部世界的開口就叫做「Symmes洞」。儒納&middot;梵爾納於1864年寫了地心遊記，而埃德加&middot;賴斯 Burroughs(1875-1950年)，火星冒險的創作者和Apes的泰山也寫了小說提了空心地球。傳說經常激發小說家的想像而小說經常激發 pseudoscientist的想像。</div><div>&nbsp;</div><div>在1869年，賽勒斯&middot;裡德&middot;Teed，一位草藥醫生和自稱的煉金術士，有一個女人夢見告訴他我們是生活在空心地球內部。差不多過了50 年，Teed用小冊子和演講宣稱其思想。他甚至創立了一個稱做Koreshans的儀式（Koresh就是希伯來人賽勒斯的相同物）。在1906年，威廉&middot;裡德發表了《極的幻影》，在書裡他聲稱無人能發現北極和南極，因為它們不存在。相反兩極是進入空心地球的入口。在1913年，馬歇爾&middot;B&middot;加德納私下地發表了到地球內部的旅行，在書裡他不認可同心球體的想法只是發誓空心地球內是直徑600英里的太陽。加德納也聲稱在兩極有一千英里寬的洞。</div><div>&nbsp;</div><div>在1940年，命運，來自其它世界的飛碟，探索，隱藏的世界與許多流行出版物的合作者雷&middot;帕默與理查德&middot;Shaver合作創作了 Shaver 神秘，一個空心地球的人們與先進文明的傳說。Shaver甚至聲稱與內部地球的人們居住在一起。根據理查德多倫多的說法，FBI詛咒帕默和Shaver在 1947年編造了「飛碟臆想」，使得他們真正成為現代飛碟學奠基之父。</div><div>&nbsp;</div><div>海軍上將伯德</div><div>&nbsp;</div><div>在1964年，雷蒙德&middot;W&middot;伯鈉德，一位密教學家和薔薇十字會員的領袖發表了空心地球-歷史中最偉大的地理發現，由海軍上將理德&middot;E&middot;伯德在神秘極地上發現-飛碟的真正由來。美國海軍海軍上將理德&middot;E&middot;伯德在1962年飛向北極和1929年飛越南極。在他日記裡，他告訴進入空心地球內部，與其他人一道旅行了17英里，飛越了山脈、湖泊、河流、綠色植被和動物。他講述看見了巨大的動物-類似古代活動的猛犸象-在灌木裡行走。他最後發現了城市和繁華的文明。外面的溫度是華氏74度。他的飛機受到他以前從來沒有見過的飛行類機器的問候。他們護送他到一個安全地方，在那裡他受到來自Agartha使者的問候。休息了一會以後，他和他的機組人員被引導與Agartha國王和王后見面。他們告訴他被允許進入Agartha由於他高貴精神與民族品質。他們繼續說他們擔心行星的安全由於他轟炸和其它政府進行的地面試驗。在參觀伯德和他的機組人員以後被引導回到行星表面上。在1965年1月海軍上將伯德率領探險隊到達南極。在那次遠征他和他的組員往下穿入2,300英里進入地球中心。海軍上將伯德講述南極與北極只是多數進入地心的開口的其中兩個。他寫道看見地底下的太陽。</div><div>&nbsp;</div><div>&ndash;空心地球-</div><div>&nbsp;</div><div>雷蒙德&middot;伯納德博士講述有關人們進入地球內部以及向他們所發生的故事。它提到一張於1960年發表在展現具有繁華山丘美麗山谷的加拿大多倫多全球與郵政上的照片。一個飛行員聲稱當他飛進北極時候他拍下了照片。伯納德也寫了來自地球內部的飛碟。他的真實名稱是Walter Seigmeister。在他的信裡到處聲稱已經在秘密修行處所接觸大神秘學家和西藏的大喇嘛。簡而言之他是另外的Gurdjieff。伯納德博士「於 1965年9月10日死於肺炎，那時候正在探索在南美的通向地球內部的隧道」。伯納德似乎接受曾經與空心地球有聯繫的許多傳說，包括愛斯基摩人起源地球內部和甚至居住至現在的高級文明，開動他們的飛碟偶而進入稀薄的大氣中。伯納德甚至毫不懷疑地接受Shaver聲稱自空心地球人們那裡，他在愛因斯坦之前就學會了相對論秘密。海軍上將伯德實際上提到南極洲為「永遠神秘的陸地」。他曾經寫過：「我寧願看見北極上的陸地。北極上的陸地是偉大未知的中心」。</div><div>&nbsp;</div><div>納粹連接</div><div>&nbsp;</div><div>信仰空心地球的有一些納粹德國的信徒。甚至有個傳說說希特勒和他的主要顧問們在第三帝國的最後日子裡通過進入南極開口逃跑了。西特勒的一些高級顧問-也許甚至希特勒本人-相信地球是空心的；而最終納粹軍隊派遣了一支探險隊來開發為戰爭期間戰略優勢的信仰。如同所有這類故事，挑出事實，誇張和直接偽造時常是困難的。但是它是anintriguing故事, 而同樣需要小背景。</div><div>&nbsp;</div><div>這「反轉地球」理論聲稱我們-我們的文明-實際上存在於地球內部。我們被牢固地固定在地上不是靠引力而是靠如地球旋轉的離心力。按照這個理論星星是懸浮在空中閃爍的大冰塊，而白天與黑夜的幻想被一中心旋轉的半明半暗的太陽引發。Cyrus Teed，一位來自紐約尤蒂卡的煉金術士，是最初普及這個想法的人們之一。他被該想法如此困惑以致他基於此創立一個信仰，將他的名字改為Koresh，於 1988年在芝加哥建立一個Koreshanity社團。在德國，依靠Koreshans，建立了主張反轉地球思想的另一個社團，而這就是該觀念被納粹高層某些人所接受。</div><div>&nbsp;</div><div>在文章的開始想定認為一種空心地球理論，雖然事實表明一些納粹實際上相信其它的。希特勒認為他們是派往來統治這個世界，而他們通過接受許多神秘信仰和修習、包括占星學、占卜預言和空心地球/反轉地球理論最終得出扭曲的結論。</div><div>&nbsp;</div><div>因為他們猜想我們地表是凹入地球的內部，西特勒派遣一支探險隊，包括Heinz Fischer博士和伸縮照相機，到Rugen波羅的海島偵察英國艦隊。Fischer這樣做沒有靠他的照相機搜尋水面，而是將它們對準大西洋搜尋大氣。當然探險失敗了。Fischer的照相機除了天空什麼也沒有看見，而英國艦隊仍然安全。</div><div>&nbsp;</div><div>有個傳說...</div><div>&nbsp;</div><div>希特勒和他的許多親信在第二次世界大戰結束的日子裡逃離了德國而逃到南極洲，在南極他們發現一個通向地球內部的入口。根據在安大略湖、加拿大空心地球調查社會，它們仍在那裡。二次世界大戰後，團體聲稱協約國發現來自德國和意大利的2,000 位以上的科學家消失不見了，隨同將近一百萬人們到了南極上的陸地。這個故事隨納粹設計飛碟變得更加撲溯迷離，納粹同生活在地心的人們在一起，而該說法來自「長相像雅利安人」 UFO飛行員。</div><div>&nbsp;</div><div>AGARTHA</div><div>&nbsp;</div><div>根據傳說居住在地心的人們的文明所在地是稱做Agartha的地方。 Agartha是用於地下居住者Agartha最常用的名字之一，它的首都城市就是香巴拉。這個信息的來源是名叫Olaf Jansen挪威水手的傳記冒煙的上帝。Agartha-威利斯&middot;愛默生寫的地下城市的秘密，解釋了Jansen 的單桅帆船如何航進一個到達位於北極的地球內部入口。他與Agharta 僑民網絡居民一起生活了二年，愛默生寫道，全都12英尺高而他們的世界由一個「冒煙」的中央太陽照明。香巴拉的要小一些，它是另一個僑民地，也是網絡政府所在地。雖然較小的香巴拉是一內部的陸地，它的衛星僑民地是一更小的依附生態系統，位於地殼下或巧妙地隱藏於山內。</div><div>&nbsp;</div><div>許多災難和發生在地表上的戰爭促使這些人們來到地下，根據秘教說法：認為超強的亞特藍提斯島-利莫裡亞戰爭和熱核武器的力量最終弄沉和毀壞了這兩大高度發達的文明。撒哈拉沙漠、戈壁、澳大利亞內陸和美國沙漠地帶只是毀壞結果的少部分例子。為這些人們建立了地下城市避難所和為神的記錄、教導和這些古代文明珍愛的科學技術建立了安全的避風港。</div><div>&nbsp;</div><div>到Agartha的入口:有些是行星網格點-能量的吸入和噴出點</div><div>&nbsp;&nbsp;&nbsp;</div><div>肯塔基州Mommoth洞穴，在美國肯塔基州南部中央</div><div>巴西馬瑙斯</div><div>巴西Mato Grosso- Posid城</div><div>Igua 瀑布，邊界或者巴西與阿根廷</div><div>意大利的Mount Epomeo</div><div>西藏喜馬拉雅山- Shonshe地下城市入口，根據說法由印度僧侶守衛</div><div>蒙古- Shingwa地下城市，根據說法存在於蒙古與中國邊境之下</div><div>印度羅摩-地表城市下，是消失很長的地下城市，他們說也叫羅摩</div><div>吉薩大金字塔</div><div>所羅門國王寶庫</div><div>北極與南極</div><div>加利福尼亞Mount Shasta- Telos傳說的Agharthean城市，存在於山脈內和山脈下面</div><div>Dero 洞穴-亞特蘭提斯島連接</div><div>&nbsp;</div><div>印度</div><div>&nbsp;</div><div>最著名的印度文獻之一羅摩傳，講述了偉大化身羅摩。它將羅摩描述成「一個來自Agartha的使者」，他乘空中飛車來到。在印度有一古老的信仰，仍被一些人保持，在地下族類中惡毒的人們居住在Patala和Bhogavati城裡。根據傳說，他們在Agharta王國發動戰爭。「The Nagas」，依照「深處的居住者」，「被描述為非常先進的族類，擁有高度發達的技術。他們也很高傲地對待人類，據說他們將人類綁架、折磨、混種甚至吃人「。</div><div>&nbsp;</div><div>入口</div><div>&nbsp;</div><div>雖然到Bhogavati入口是喜馬拉雅山某個地方，信徒聲稱Patala可以通過在印度貝拿勒斯的Sheshna的Well進入，比如說威廉&middot;邁克爾&middot;莫特在「深處的居住者」：根據爬蟲學家和作家Sherman A. Minton，如在他的有毒的爬蟲動物書裡敘述這個入口是相當真實的，有五十步台階下到一圓形的地方，盡頭是一扇緊閉的石門，門上雕刻有眼鏡蛇的雕像。在西藏，有一個大的聖地也叫做『Patala』,據說那裡人們位於一古代洞穴和隧道系統的頂上，該隧道完全貫通亞洲大陸和可能到的地方。Nagas也與水有密切關係，而通向地下宮殿的入口通常據說隱藏於牆、深湖和河流下面。」儘管無數流傳的奇異故事Shaver神秘-帕默為所以有價值擠壓它，而於是一些-對於這個地下世界的入口位置就不會再洩露出去。</div><div>&nbsp;</div><div>古老一代-生命</div><div>&nbsp;</div><div>在一篇標題為「空心地球文章裡：至於亞特藍提斯島提升神話或實相」，Brad Steiger寫的傳說「古老一代」，一種古代族類數百萬年前移民到地表世界而然後移到地下。「古老一代，一種非常智能和科學先進的族類」，Steiger寫道，選擇建造他們自己的行星地下生活環境和製造他們所有的必需品。古老一代是原始人類，壽命非常長，大約一百萬年以上的史前人類 sapiens。古老一代一般避開地表人類，但是時不時提出大家熟悉的建設性的批評意見；而據說他們經常綁架人類的孩子來教導和視同自己的一樣來培養。年長族類。最具爭論的內部世界居民的傳說就是所謂的「Shaver神秘」在1945年，正在編輯的雷&middot;帕默由理查德&middot;Shave告訴的流傳奇異故事雜誌，他聲稱受到仍存在的地下文明的款待。雖然少數人相信這故事，多數人猜測Shaver實際上是精神病，Shaver一直堅持他的故事是真實的。他主張年長族類或巨人在史前過去從另一個太陽系來到這個行星。在地表生活一段時間後，他們意識到我們的太陽正引發他們老化，因而他們逃到地下，建造了生活其中的巨大的地下聯合體。★最後他們決定探索一新的家園和一新的行星，撤出地球和通過變異生命移民離開他們的地下城市：邪惡的Dero-有害機器人-和好的Tero-綜合機器人。這就是Shaver聲稱遇見的這些生命。</div><div>&nbsp;</div><div>羽蛇神連接到中美洲的眾神。當他參觀海下面的內部世界之後的第八天乘飛碟消失了。</div>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss242/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=242</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=242&amp;key=65a9b99c</trackback:ping></item><item><title>2011年上半年国内优秀初创企业汇总</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss241/</link><pubDate>Wed, 31 Aug 2011 23:33:16 +0800</pubDate><guid>http://www.vvwww.com/post/rss241/</guid><description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="font-size: medium; line-height: normal; font-family: Simsun"><span class="Apple-style-span" style="font-size: 12px; line-height: 19px; font-family: Arial, Verdana, sans-serif">&nbsp;<span class="Apple-style-span" style="font-size: 13px; color: rgb(104,104,104); line-height: 24px; font-family: Tahoma, 'Microsoft YaHei', Verdana, Arial, Helvetica, sans-serif; background-color: rgb(249,249,249)"><a style="color: rgb(102,102,102); text-decoration: none" rel="attachment wp-att-550" href="http://www.shashuai.com/2011%e5%b9%b4%e4%b8%8a%e5%8d%8a%e5%b9%b4%e5%9b%bd%e5%86%85%e4%bc%98%e7%a7%80%e5%88%9d%e5%88%9b%e4%bc%81%e4%b8%9a%e6%b1%87%e6%80%bb/huizong/"><img class="alignnone size-full wp-image-550" title="huizong" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" height="130" alt="" width="680" src="http://www.shashuai.com/wp-content/uploads/2011/07/huizong.jpg" /></a></span></span></span><p>&nbsp;</p></p><div style="padding-right: 5px; padding-left: 5px; font-size: 12px; padding-bottom: 5px; margin: 0px; line-height: 160%; padding-top: 5px; font-family: Arial, Verdana, sans-serif; background-color: rgb(255,255,255)"><span class="Apple-style-span" style="font-size: 13px; color: rgb(104,104,104); line-height: 24px; font-family: Tahoma, 'Microsoft YaHei', Verdana, Arial, Helvetica, sans-serif; background-color: rgb(249,249,249)"><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">&nbsp;</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">本文总结了2011年上半年上线的或者关注度相对较高的国内优秀的初创企业，主要是<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.web20share.com/category/web20-weekly-news">Web2.0Share周刊</a>中介绍过的初创企业.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">&nbsp;</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0542437mR.jpg" /><br />美丽说是一个沸腾着血拼快感的时尚购物社区。爱网购，爱漂亮的时尚女生都在这里，分享网购链接，交流打扮与网购心得。本质是电子商务和SNS相结合的一个社区。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.meilishuo.com/">http://www.meilishuo.com/</a>.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" width="240" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054244ZVf.jpg" /><br />玛撒网（www.masar.cn）是一款基于API的多个微博、SNS同步更新工具，通过在该网站界面更新，后台会自动将消息通过API推送到每个微博、SNS网站上去。并可以实时获取各个微博、SNS个最新状态信息。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.masar.cn/">http://www.masar.cn/</a>.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0542456Ov.jpg" /><br />贝瓦网以&ldquo;发现儿童的兴趣与天赋，培养儿童的爱好与技能，分享儿童成长中的快乐&rdquo;为经营理念，打造儿童喜爱的卡通形象品牌，为儿童创造追逐梦想的网络世界，努力成为中国最有贡献的儿童成长公司。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.beva.com/">http://www.beva.com/</a>.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/05424726N.jpg" /><br />堆糖是一个用户分享购物的社区。在堆糖网大家一起分享、挖掘好东东，在这里你可以：</p><ul style="padding-right: 0px; padding-left: 20px; padding-bottom: 10px; margin: 0px; padding-top: 0px">    <li style="padding-right: 0px; padding-left: 0px; list-style-position: outside; padding-bottom: 0px; margin: 0px; padding-top: 0px">1. 发掘大家分享的宝贝</li>    <li style="padding-right: 0px; padding-left: 0px; list-style-position: outside; padding-bottom: 0px; margin: 0px; padding-top: 0px">2. 加入宝贝圈子，找到喜好相同的朋友</li></ul><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.duitang.com/">http://www.duitang.com/</a>.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" width="240" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0542493gv.png" /><br />之前曾和同事闲聊，说LBS服务在中国得和本土化的东西结合，中国人相信缘分，所以和交流约会结合会是很好的一个点，爱邂逅就是一个基于地理位置的约会网站。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://aixiehou.com/index.php">http://aixiehou.com/index.php</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">盒子世界儿童虚拟社区（www.hezi.com) 是一个面向6－14岁儿童及其家庭，着力于儿童思维养成体验的家庭互动网络平台。通过孩子们喜爱的微缩景观拍摄场景和flash图形化交互方式产生互动，提供孩子们成长中有趣、有益、探索的网络空间。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.hezi.com/">http://www.hezi.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0542500zT.png" /><br />蘑菇街是一个购物主题社区，用户可以在上面分享购物心得，可以使用微博账号登陆，可以将发表内容直接同步到新浪微博。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.mogujie.com/">http://www.mogujie.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" width="240" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054252Rkh.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">知乎是一个真实的网络问答社区，用户可以关注自己感兴趣的问题，也可以关注自己关注的人。类似的服务国外有Quora，也一度被认为是最火的一个创 新企业，知乎目前有很多Quora的影子，不过在国内出现一个<span class="wp_keywordlink_affiliate"><a title="查看 社会化 的全部文章" style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.shashuai.com/tag/%e7%a4%be%e4%bc%9a%e5%8c%96/">社会化</a></span>的问答社区，还是很让人期待的一件事情。目前知乎处于内测阶段。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.zhihu.com/">http://www.zhihu.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054254cC3.jpg" /><br />爱折客是一个基于地理位置的优惠券服务，优惠打折信息与地点结合起来的应用，方便用户随时随地获得实惠的本地消费信息。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.aizheke.com/">http://www.aizheke.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054256dmD.jpg" /><br />豆果是国内的一家发现、分享、交流美食的互动平台，致力于成为美食互动社区网络。其提供了一个在线的厨艺交流平 台；美食分享，心情故事的倾述之地。为喜爱美食、热爱生活的人提供了一个展现自己厨艺的舞台，也为吃喝发愁的新手提供了学习的课堂。（<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.web20share.com/2011/06/douguo.html">Via</a>）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.douguo.com/">http://www.douguo.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054258RB9.png" /><br />云存储时代是否就此会进入TB时代呢，让我回想起当年的邮箱，Google刚推出1G的邮箱的时候，很多人觉得很震惊，而之后GB的邮箱基本成为标准的配置，是否以后云存储服务也将进入TB时代呢，不管如何，对于用户总是好事！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">至此，国内网盘服务已经有数据银行，Everbox,新浪微盘，迅雷随身盘，金山快盘，袋鼠，115网盘等</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.1tpan.com/">http://www.1tpan.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img title="More..." style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0542598YX.gif" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054300b8j.jpg"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" height="89" alt="" width="230" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054300b8j.jpg" /></a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">经纬是千橡网旗下商务社交网络，尽管国内之前有像若邻、Xing等商务社交网络，不过和国外的Linkedin相比，应该都算不上成功，目前 linkedin据传即将上市，估值30亿美元，相信对于商务社交网络国内还是有很多人对这个领域很感兴趣，不过国内想要构建linkedin这样的社 区，可能未必想象那么简单。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://login.jingwei.com/">http://login.jingwei.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054301QaA.png" /><br />微格是一款以用户体验为核心的iphone版新浪微博客户端，尽管目前新浪微博在国内很火，不过从手机客户端的角度，和Twitter手机客户端确实有不少的差距。微格应该说是一款不错的设计精美的iPhone客户端。（目前还不能在App Store下载）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://vgoapp.com/">http://vgoapp.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054302TBL.gif" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">多盟智胜网络技术（北京）有限公司（简称domob），成立于2010年9月。致力于做中国最领先的智能手机广告平台。Domob整合了智能手机领 域最优质的应用以及广告资源，搭建了广告主和应用开发者之间的广告技术服务平台。并借助大规模数据处理的平台优势以及贴 近应用开发者的服务模式，为应用开发者提供产品推广服务和收益，以及为致力于在智能手机平台推广产品、品牌的广告主提供高效的服务。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">国内致力于手机广告平台的服务也越来越多，这也昭示着越来越多的人确信移动互联网将会带来更大的机遇！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.domob.cn/">http://www.domob.cn/</a>.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054304LFm.jpg" /><br /><span class="wp_keywordlink_affiliate"><a title="查看 点点 的全部文章" style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.shashuai.com/tag/%e7%82%b9%e7%82%b9/">点点</a></span>网是一个类似于Tumblr的内容分享平台，从产品结构而言，其功能和Twitter和新浪微博相似，可以分享文字，图片，视频，音乐。不同之处在于&nbsp;<span class="wp_keywordlink_affiliate"><a title="查看 点点 的全部文章" style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.shashuai.com/tag/%e7%82%b9%e7%82%b9/">点点</a></span>这样的站更加注重个性，更加注重图片、视频等内容的展示，尽管只是展示方式的小小差别，不过也决定了其和Twitter的差别，更加注重内容的分享和 展示，更加注重个性的展示，Twitter则更加注重内容的传播。<span class="wp_keywordlink_affiliate"><a title="查看 点点 的全部文章" style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.shashuai.com/tag/%e7%82%b9%e7%82%b9/">点点</a></span>网为<a style="color: rgb(102,102,102); text-decoration: none" href="http://baike.baidu.com/view/1332502.htm">许朝军</a>的创业项目。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://diandian.com/">http://diandian.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054305Oxz.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">爱库网是一个用于整理（Collect），组织（Organize），分享（Share）任何互联网上面的网站、图片、视频等资源的在线服务，并且致力于 让用户发现（Discover）更多有意思的互联网资源。目前爱库网更加注重基于兴趣的<span class="wp_keywordlink_affiliate"><a title="查看 社会化 的全部文章" style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.shashuai.com/tag/%e7%a4%be%e4%bc%9a%e5%8c%96/">社会化</a></span>分享！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://ikeepu.com/">http://ikeepu.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054307aZQ.jpg" /><br />MagSina，顾名思意其实一个基于新浪微博内容的杂志，当然其目前是面向iPad平台的应用，或者你也可以理解为其实一个依托于新浪微博的类似于 Flipborad一样的应用。目前越来越多的开发者基于新浪微博开发第三方应用，貌似新浪微博开始出现了当年Twitter发展初期的状况，逐渐获取第 三方开发者的青睐：）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://magsina.com/">http://magsina.com/</a>.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054309llA.png" /><br />米饭是一个轻松简单的问答社区，方便你随时随地分享个性生活。通过不同的提问回答可以表现你的兴趣或性格（<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.techwom.com/archives/1792">Via</a>）。米饭网主要功能包括：</p><ul style="padding-right: 0px; padding-left: 20px; padding-bottom: 10px; margin: 0px; padding-top: 0px">    <li style="padding-right: 0px; padding-left: 0px; list-style-position: outside; padding-bottom: 0px; margin: 0px; padding-top: 0px">注册之后，你可以进行提问，提问既可以是匿名提问，也可以是指定要有来进行提问；</li>    <li style="padding-right: 0px; padding-left: 0px; list-style-position: outside; padding-bottom: 0px; margin: 0px; padding-top: 0px">对于喜欢的问题，用户可以进行收藏（喜欢）；</li>    <li style="padding-right: 0px; padding-left: 0px; list-style-position: outside; padding-bottom: 0px; margin: 0px; padding-top: 0px">对于任何一个用户，你可以进行关注，查看其提过的问题，收藏的问题，也可以把他提问的问题来问你的好友；</li>    <li style="padding-right: 0px; padding-left: 0px; list-style-position: outside; padding-bottom: 0px; margin: 0px; padding-top: 0px">你在回答问题过程中可以将你的答案分享到新浪微博和腾讯微博；</li>    <li style="padding-right: 0px; padding-left: 0px; list-style-position: outside; padding-bottom: 0px; margin: 0px; padding-top: 0px">目前支持通过昵称方式查找好友；</li></ul><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://mifan.me/">http://mifan.me/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054310rQ5.jpg" /><br />&ldquo;简简单单&rdquo;（www.jjdd.com）是中国第一个大型的打分交友网站，属上海小兵信息科技有限公司的2号研发项目。网站以打分交友为业务模型，强调交友过程的简单性和用户资料的真实性，网站用户以北京、上海等一线城市白领人群为主。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.jjdd.com/">http://www.jjdd.com/</a>.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054311gJb.jpg" /><br />蚁信是一款基于地理位置的社交软件，为国内首个融合IM、微博、地理位置社交的真实社交的产品。通过蚁信，用户可以定位自己的位置、看到好友在哪里；随时 发表多媒体微博、分享身边的大小事；同时也可以向好友发送即时消息，与全球各地的朋友进行文字、语音交流，分享照片等。个人的角度而言并不看好将这么多东 西融合在一起，理念很好，操作并不容易。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.antmsg.com/index.aspx">http://www.antmsg.com/index.aspx</a>.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054313wVD.jpg" /><br />Vimi(全称Vimi Messenger)是一款完全代替手机短信、跨平台、跨运营商的信息软件，用户可通过Vimi跟你手机中的联系人进行实时的沟通，而且这完全免费、安 全。目前增加多媒体消息功能，提供照片即拍即传，随时随地与你的朋友分享周边动态。提供iPhone、Android、Symbian平台。这个应该是目 前类kik服务之一，国内基于手机通讯录关系的争夺在2011可能还会愈演愈烈！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.vimi.la/">http://www.vimi.la/</a>.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054315jUv.jpg" /><br />腾讯QQ美食(meishi.qq.com)正式上线，启用meishi.qq.com的二级域名。这也意味着腾讯进一步在生活服务领域投入。此前QQ美食一直作为美食应用在QQ空间中存在。大众点评，百度身边，QQ美食，这下生活服务领域也比较热闹了：）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://meishi.qq.com/">http://meishi.qq.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054317c7y.jpg" /><br />这个360安全桌面有点像Mac上的APP Store很类似，之前360投资了很多的桌面软件，现在通过这样一个平台终于可以整合了，这样的一个平台也是具有很多想象空间，甚至有可能实现在PC上的收费应用生态圈。(<a style="color: rgb(102,102,102); text-decoration: none" href="http://technode.com/archives/1804/">详细介绍</a>)</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">360今年启动开放平台战略&mdash;&mdash;现在360 已经有两个开放平台了，第一个是在2月23日，并推出首个开放平台&mdash;&mdash;团购开放平台(tuan.360.cn)。第二个是现在推出的360应用开放平台 （整合到其360安全桌面）。如果说团购开放平台只是360将流量变现的一种方式，那么应用开放平台则展示了360在PC上更大的野心！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://zhuomian.360.cn/">http://zhuomian.360.cn/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" width="240" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054317L05.jpg" /><br />微博物语是一款新浪微博的第三方客户端。旨在给用户提供简洁高效的阅读体验。个人使用下来其界面和weet for twitter比较类似，制作比较精美：）支持多帐号登录。（<a style="color: rgb(102,102,102); text-decoration: none" href="http://news.web20share.com/post/3428.html">Via</a>）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.weibostory.com/">http://www.weibostory.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" width="240" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054319wVD.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">&ldquo;拇指群&rdquo;是飞信推出的一个为手机用户群体的短信群聊工具。主要功能包括：群聊，向群内发送1条短信，短信将直达所有群成员！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://huodong.feixin.10086.cn/ThumbGroup/index.aspx">http://huodong.feixin.10086.cn/ThumbGroup/index.aspx</a>.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054321Qx6.jpg" /><br />推溜是又一款类Tumblr服务，最近由于点点的出现，tumblr类服务又掀起了一轮大家的关注，这个推溜目前还没有开放注册，不过从首页的简单介绍看 应该也是一款类Tumblr服务，不过其首页上提供的图片貌似是tumblr的照片。目前的宽途和点点网你更喜欢哪一个呢？</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.tuiliu.com/">http://www.tuiliu.com/</a>.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054323lj7.png" /><br />Wuala是一款基于P2P的在线存储、备份服务，是瑞士人开发的文件备份，同步，共享服务（类似Dropbox），最大特点是Wuala使用了服务器储存和P2P共享两种不同的技术手段。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.wuala.com/">http://www.wuala.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054324JxM.jpg" /><br />美食达人是一个移动地理位置的美食分享服务，为美食分享打上地理标签。用户使用手机客户端可以对美食拍照、点评并上传（自动确定地理位置）；服务本身是一 个美食小社区，用户可以互相关注对方的美食分享动态。网页端方便展示和查找各地美食。目前提供了Android客户端。（<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.web20share.com/2011/02/meishidaren.html">Via</a>）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://meishidaren.com/">http://meishidaren.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054326K05.jpg" /><br />人物圈是一个向所有人提供展现自我价值的平台，在这里记录你的里程碑，你的成就，让需要你的人找到你。从产品的形态上来看，人物圈和About.me比较 类似，不过从其后台的情况来看更多的加入了类似实名认证、个人档案及私信联系的功能，也有点Linkedin的影子，个人理解应该是希望构建一个真实的商 务社交平台</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://renwuquan.com/">http://renwuquan.com/</a><br /><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054327Yks.jpg" /><br />召集令是一个基于手机的群聊服务，之前比较火的<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.web20share.com/2011/03/kik-beluga.html">beluga</a>(基于通讯录的群聊网络),已被facebook收购，Kik在最新版本中也加入了群聊的功能，看来手机群聊又会成为近期的一个热点。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.1chu.com/">http://www.1chu.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054329fug.jpg" /><br />蝈蝈视频是一个提供类似视频类的Instagram的服务，用户可以通过手机拍摄视频上传，可以关注好友拍摄的视频，国外最近也出了类似的服务 （socialcam.com）。个人觉得这类服务出现的时机很重要，之前曾有过12seconds.tv，不过后来关了。视频图片文字三者的需求里面文 字和图片是最强的，视频类服务能否成功很大程度上取决于相关的环境（尤其移动市场）是否成熟。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://guoguo.me/">http://guoguo.me/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0543300pP.jpg" /><br />新浪微博推出团购导航服务&mdash;&mdash;微团,相比于之前的微领地，个人更看好一些，团购导航对于新浪这个强大的传播平台而言，再合适不过了，这也是为何国内几乎所有有流量的互联网公司都来做团购导航的原因，微领地个人觉得相对难度会更大。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://tuan.t.sina.com.cn/">http://tuan.t.sina.com.cn/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054332PeI.png" /><br />新浪微博和GyPSii合作推出LBS&mdash;&mdash;微领地服务，这是新浪微博通过其微博平台拓展周边应用的一个重要举措。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">新浪推出LBS的优势和看好的地方：</p><ul style="padding-right: 0px; padding-left: 20px; padding-bottom: 10px; margin: 0px; padding-top: 0px">    <li style="padding-right: 0px; padding-left: 0px; list-style-position: outside; padding-bottom: 0px; margin: 0px; padding-top: 0px">依托于新浪微博其优势在于，可以利用新浪微博现有的注册用户直接来发展LBS用户；</li>    <li style="padding-right: 0px; padding-left: 0px; list-style-position: outside; padding-bottom: 0px; margin: 0px; padding-top: 0px">新浪微博的名人策略对于LBS而言，吸引力依旧；</li>    <li style="padding-right: 0px; padding-left: 0px; list-style-position: outside; padding-bottom: 0px; margin: 0px; padding-top: 0px">有利于新浪微博向线下拓展，LBS的有个显著特点就是和线下服务的结合的优势；</li></ul><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">困难：</p><ul style="padding-right: 0px; padding-left: 20px; padding-bottom: 10px; margin: 0px; padding-top: 0px">    <li style="padding-right: 0px; padding-left: 0px; list-style-position: outside; padding-bottom: 0px; margin: 0px; padding-top: 0px">新浪微博和LBS的信息架构本质上不同，新浪微博而言，信息是首要的，地理位置是属性；而对于LBS，地理位置是在第一层的，所有的信息都是依附于地理位置的属性。所以要想平衡两者也未必是容易的事，想要在国内挑战街旁和切客可能还是有一定的难度的。</li></ul><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://vld.sina.cn/">http://vld.sina.cn/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0543344lI.jpg" /><br />彩贝积分是腾讯推出的通用积分平台，彩贝积分可抵扣现金支付，还可兑换各种物品和服务！通过网上购物，充值缴费，旅游出行等方式均可赚取彩贝积分。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">目前腾讯的生活服务包括：QQ电影票，QQ团购，QQ旅游，QQ返利，QQ商城，相信其还会拓展更多的生活消费领域的线上服务，这个QQ彩贝也将成为其一站式消费积分联盟</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://cb.qq.com/">http://cb.qq.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054336Rk3.jpg" /><br />FIT&trade;写字板由FIT中文输入法团队开发，为iPhone用户提供一款快速输入和保存文字,同时具备拼音、双拼、五笔、笔画输入法，并可方便发送短 信、邮件的应用程序。非越狱用户不错的选择，不过不是免费的。1.99$。不过其实还是很期待苹果能够开放对于输入法的限制。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://funinput.com/writer">http://funinput.com/writer</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054339cdU.jpg" /><br />飞豆是开心网（kaixin001.com）推出类kik服务&mdash;&mdash;飞豆，目前推出了iPhone和Android版本。貌似现在SNS也觉得有必要和手机的通讯录相结合，使得关系来得更有粘性。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://feidou.kaixin001.com/">http://feidou.kaixin001.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054341djn.jpg" /><br />时尚搜索：根据颜色形状搜索鞋子。点击最相似的鞋，会出现更多相似的鞋。目前可以搜索来自乐淘，卓越，淘宝商城，淘鞋网的鞋子。其实这样的搜索商品的方式应该是用户更加期待的。个人觉得这种搜索和<span class="wp_keywordlink_affiliate"><a title="查看 社会化 的全部文章" style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.shashuai.com/tag/%e7%a4%be%e4%bc%9a%e5%8c%96/">社会化</a></span>推荐相结合会有非常好的效果。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.sotuwang.com/">http://www.sotuwang.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054343UU2.jpg" /><br />下厨房-美食菜谱网: &ldquo;下厨房&rdquo;网是一个美食、菜谱分享网站，用户在这里上传美食图片、分享食谱、交流厨房世界的美好与精彩。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.xiachufang.com/">http://www.xiachufang.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054344hRK.jpg" /><br />位缘&mdash;基于地理位置提供您身边的交友及生活社区: 中国移动推出的基于地理位置服务，&ldquo;中国移动飞信-位置服务&rdquo;基于现有中国移动飞信平台，嵌入位置元素，提供飞信用户迫切需要的位缘-交友地图、生活地 图、游戏地图等位置业务。不过对于中移动的互联网产品可能目前个人都不是十分看好，尽管中移动有着很多的资源也很适合做LBS的产品，但是从发布的产品 来，感觉没有重视和投入。心态不转变，可能永远都很难做好！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.ishenbian.com/">http://www.ishenbian.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054346oGV.jpg" /><br />1.微评网是基于地理位置服务的实时点评信息传播平台,通过用户对本地餐饮、购物、娱乐、生活等信息点评、推荐和实时分享的交流平台，为用户提供更多客观、准确的消费信息和参考指南！目前网站还在内测阶段。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">将点评和地理位置相结合是一个不错的想法，不过目前从大众点评看和LBS的结合并不十分成功，其问题也是在于大众点评承载的是陌生人的网络，微评网如果希望有所突破对于关系的处理将尤为重要。基于熟人网络的微点评将更有价值！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.vpinco.com/index.php">http://www.vpinco.com/index.php</a>.</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0543487dJ.png" /><br />乐魔库是一款基于手机照片美化及分享的手机软件。产品的主要功能包括:一键美化照片（提供了10余种照片滤镜）,快速上传下载,同步社区（新浪微博、 人人网、开心网、豆瓣网、搜狐微博）分享等。从产品的形态上看和Instagram比较类似。目前提供了iPhone、Android客户端。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://lomokr.com/">http://lomokr.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054349eyl.jpg" /><br />初刻Crucco：中国慢时尚生活品牌: 原凡客诚品诚品高管许晓辉创办的B2C网站&ldquo;初刻Crucco&rdquo;（www.crucco.com）本月6日凌晨上线。网站定位于都市主流青年慢时尚服饰，产品以原创为主，先期提供女装、男装、鞋三大品类产品。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.crucco.com/">http://www.crucco.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054351cYP.jpg" /><br />布丁爱生活是一款都市人群活动指南工具软件,软件包括电影信息、演出信息和餐饮信息,独有的收藏夹功能,能把您感兴趣的电影、演出、美食收藏起来。目前提供了Android和iPhone客户端</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.buding.cn/">http://www.buding.cn/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054353FXL.jpg" /><br />友图是一款Android手机应用，可以帮助你建立自己的相片日记，随时随地与朋友们分享精彩瞬间，寻找共同爱好的朋友等等。支持分享到人人网、开心 网、豆瓣、新浪微博、Facebook、Twitter、Flickr、MySpace以及台湾的无名小站等多个渠道。目前提供了Android客户端</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.photosola.com/">http://www.photosola.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054355hDS.jpg" /><br />他在是由湖南卫视金鹰网推出的免费在线聊天交友网站，网站旨在为年轻时尚的男女提供一个交友,聊天,约会的平台。湖南卫视目前在国内应该是最有影响力 的电视媒体，也是新媒体的探索者，其对于互联网的理解也是在国内所有卫视中最好的，现在其也逐渐向网游、互联网等领域渗透，依托于其强大的媒体资源，其任 何一个互联网产品，只要其足够重视，都是有理由去关注的！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.tazai.com/">http://www.tazai.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054356K9A.jpg" /><br />咕咚网是一个致力于让运动更好玩的健身社区，通过使用健身追踪器(3D网络计步器)追踪用户的运动和睡眠情况，并将数据自动上传到咕咚网分析统计，并由专家在线指导。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.codoon.com/">http://www.codoon.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054358Ec8.png" /><br />磊友科技是一家从事移动互联网基础服务的企业，专注于HTML5在移动设备上的游戏产品研发，期望为用户和开发者带去卓越的价值。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.leiyoo.com/">http://www.leiyoo.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054400dz9.jpg" /><br />微征婚是一个基于新浪微博的征婚平台，可以直接通过新浪微博帐号登录。从功能上看还并不完善，不过从需求上讲这是一个不错的切入点，如果能够通过合适的方式将目标用户群从现有微博平台中过滤出来将很有价值！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.diglove.cn/">http://www.diglove.cn/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054402he4.png" /><br />摩迹网致力于建立一个基于购物活动的社交网络，利用<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.web20share.com/2011/02/social-services.html">社会化</a>的因素来推动电子商务的发展。它通过丰富的购物信息分享、个性化的口味推荐、公正全面的口碑和热度排行，从而使人们能够在购物的过程中，既买到称心如意的商品又收获了快乐和友谊。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.molgee.com/">http://www.molgee.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054403TXu.png" /><br />启维是一个趣味网络社会。旨在传播人们身边一切趣味文化，从音乐、电台、纯艺术、设计、舞蹈、影视、摄影、动画、雕塑、文学到网站、游戏等等。目前网站提供简体、繁体、英文版和日文版，很有点豆瓣的气息，网站的UI很和我的口味。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.maemvl.com/">http://www.maemvl.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054405Y4u.jpg" /><br />Meo是一个非常用心的儿童时尚信息分享网站，萝莉控正太控的天堂。两个北欧留学小女生尝试做的网站，内容很棒。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://meokid.com/">http://meokid.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054407a9x.png" /><br />MemoTime(某天)是一个手机照片分享服务，可以和自己的好友分享自己的照片，从产品形态上来看和Path比较相似，目前提供了Android客户端。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://memoti.me/">http://memoti.me/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0544090hG.png" /><br />萌否是一个关于ACGNM（Anime,Comic,Game,Novel,Movie）的分享与交流网站，致力于为阿宅们打造一个独特的二次元平台，让热爱二次元的朋友们能够更轻松、简单、愉快地享受ACGNM作品。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://moefou.org/">http://moefou.org/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054411WpA.png" /><br />驴评网是携程旗下推出的旅游点评服务，致力于帮助你更好地分享&ldquo;去哪里、玩什么和住哪里&rdquo;，发现好评酒店、景点和目的地。我们是由携程旅行网的酒店点评、目的地探索和社区服务整合而来。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.lvping.com/">http://www.lvping.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054412l4o.gif" /><br />坚果铺子是最近出来的一个类似Dropbox的同步服务，目前推出了Windows、Mac、Lunix客户端，其最大吸引人的地方就无限容量，不过在国内推出这样的服务，除了产品本身以外，可能更多的是需要去考虑如何获得用户的信任。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="https://jianguopuzi.com/">https://jianguopuzi.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054414iv3.png" /><br />美餐网主打&ldquo;附近的外卖详细菜单&rdquo;，目前已经收集了2645家餐厅的255,687道外卖美食。其主打的概念是&ldquo;餐厅地图&rdquo;、犹如iGoogle一样定制属于自己的订餐页面（就是将自己喜欢的餐厅放在网站首页）。（<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ikeepu.com/show/3dmc">Via</a>）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://meican.com/">http://meican.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054415Z7R.jpg" /><br />FIT&trade;随享-新浪微博iPhone客户端,由FIT新点科技出品，为iPhone用户提供舒适的操作界面、多角度的微博视点, 加上智能的FIT中文输入键盘, 真正让发微博和看微博成为一种乐趣。把输入法和应用集成，不错的创意。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://funinput.com/fitshare">http://funinput.com/fitshare</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054416Asr.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">9点30是一个基于微博开放平台的抽奖网站，将在活动结束当天晚上9点30准时公布抽奖结果，由Yalo团队开发。Yalo团队由四个北邮学子组成，团队成立的初衷为开发更多有用、有意思的互联网产品。（<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ikeepu.com/show/437o">Via</a>）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.9dian30.com/">http://www.9dian30.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054417RBB.jpg" /><br />SocialTouch-微博营销软件众趣是中国社会化媒体营销管理工具&amp;平台，专注于微博营销、社会化媒体营销、企业微博运营、企业微博管理等领域，为各大企业提供微博营销策略和服务。（<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ikeepu.com/show/41kn">Via</a>）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.social-touch.com/">http://www.social-touch.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0544201Nu.jpg" /><br />AutoDesk在线设计中文版上线啦！快来运用美家达人免费在线家装设计软件来形象化家居设计方案， 创建平面图，尝试各种室内设计及装饰理念，并加入园林设计来提高家居设计方案。在线家具购买马上也要推出咯，拭目以待！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.meijiadaren.com/home">http://www.meijiadaren.com/home</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054421TE2.jpg" /><br />计划FM是一个基于活动的社会化网络，通过其可以发现身边最好的活动，分享给朋友。计划FM是一个计划发起、共享、参与平台。致力于让活动分享与发现变得容易和有趣。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://jihua.fm/">http://jihua.fm/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054423e97.jpg" /><br />最淘网于2011年初创立于北京，是中国第一个移动SNS购物平台。最淘使用先进的搜索引擎技术，结合信息挖掘、LBS、以及twitter模式的SNS网络，建立起一个基于真实好友的电子商务消费网络。（<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ikeepu.com/show/40kk">Via</a>）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.zuitao.com/">http://www.zuitao.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054425EEl.jpg" /><br />ThinkerNote: 支持手机、电脑同步的记事服务，感觉有点Evernote的意思，目前内测中。网站界面看似还不错，期待一下。（<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ikeepu.com/show/4069">Via</a>）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.thinkernote.com/">http://www.thinkernote.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054426Tg7.jpg" /><br />到会网: 到会网是一个提供的专业会议服务平台，整合了互联网与传统会议业，为会议组织者提供便捷、经济、高效的会议解决方案。之前抢坐网出售，也说明会议服务平台对于运营可能邀请还是比较高的。同类网站还有<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.web20share.com/2010/08/mymova.html">魔瓦网</a>。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://daohui.net/">http://daohui.net/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/05442816l.png" /><br />微博语音助手: 下载浏览器插件，使用微博账号登录即可！目前提供IE插件和Chrome插件，Firefox插件正在开发中。语音相关的互联网移动互联网产品将成为下一阶段的一个热点。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.weibocall.com/">http://www.weibocall.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054430qa3.png" /><br />品礼 &ndash; 社会化礼物推荐引擎: 品礼是一款社会化的礼物推荐引擎，它将自动汇聚众人的送礼经验心得，根据你设定的送礼对象智能推荐最适合的礼物。内测版即将发布。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://pin-li.com/">http://pin-li.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054431uoG.jpg" /><br />讯飞口讯是一款通过语音进行文字输入的应用,支持将输入的内容通过短信/邮件进行发送。科大讯飞出品。目前还提供了Symbian版本。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://kouxun.voicecloud.cn/index.html">http://kouxun.voicecloud.cn/index.html</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0544325RL.jpg" /><br />Justsoit&ndash;山寨搜索是一种生活态度，因为,山寨是一种生活态度。 是一种极端的,挑剔与不屑并存,虽万人独往矣的下一秒即使不复存在的生活态度。这个搜索网站有点意思。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://justsoit.com/">http://justsoit.com/</a><br /><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" width="240" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054434Dp4.jpg" /><br />面孔：老朋友，新眼光: 面孔是一个新浪微博第三方应用，个让你用另外一种视角和微博好友互动的应用，为你提供了一个整体视图，让你可以同时整理数千个好友，查看好友的更新，和他们对话交流，你还可以和他们拍照合影</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.miankong.cc/">http://www.miankong.cc</a><br /><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054436Nde.gif" /><br />微拍 wepai.cn 手机视频，分享生活一刻！: 基于手机的微视频服务，暂未安装体验，感兴趣的朋友可以去体验一下</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://wepai.cn/">http://wepai.cn</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">PDFdo.com: PDFdo是一个在线PDF操作服务网站，可以进行在线生成PDF文档、PDF合并、PDF分割、TXT转PDF、PDF多页合并为一页、PDF提取图片、PDF提取页面、PDF删除页面、PDF旋转页面、PDF加密、PDF加注释等等</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.pdfdo.com/">http://www.pdfdo.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054437iZF.jpg" /><br />友付 是一个全新的网络支付方式，帮助用户轻松完成各种收款及转款需求;友付支持5个亿的银联、网银、支付宝、Visa、Mastercard、Paypal 用户，并提供方便的款项记录、查询、管理功能。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="https://yoopay.cn/">https://yoopay.cn/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/05443928n.gif" /><br />火信微拍卖: 基于新浪微博的拍卖服务，火信微拍卖是一个电子商务拍卖网站，为各大微博网站用户提供荷兰式降价拍卖服务，拍卖商品主要为生活用品、3C数码电子产品。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://wp.hotsent.com/">http://wp.hotsent.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054440Dkv.jpg" /><br />芒果（MOGO）是目前最先进的一站式移动广告优化平台，它整合了国内外各大主流移动广告平台，如：AdMob、iAd、Google AdSence、InMobi、MdotM、JumpTaps、有米、 微云、亿动、哇棒、AdChina、架势等</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.adsmogo.com/">http://www.adsmogo.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">文艺复兴网是一款基于生活兴趣交友的社区化电子商务产品，通过个性化的场景空间和标准化的微生活事件来充分展示和分享自己的生活兴趣，并找到感兴趣的内容、结交到有共同生活兴趣的朋友。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.v1v7.com/">http://www.v1v7.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054442uFG.jpg" /><br />旅行器: 是一个以地点为核心的新一代分享与联络平台，通过电脑或者手机，用户可以随时随地的简单而又快捷的记录感想，轻松了解朋友间的生活片段，保持联系，非常简单的就可以了解到你现在感兴趣的地方都有哪些好玩的事情发生并且即时的参与进去。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.lvxingqi.com/">http://www.lvxingqi.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054444FOa.png" /><br />熟客奢侈品会员购物专区: 熟客网是一个会员尊享的国际设计师品牌购物网站。免费成为会员，即可在定期举行的熟客专场以熟客老友的礼遇尽情选购精选的国际设计师品牌时装以及生活精品。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.shouke.com/">http://www.shouke.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0544464iF.png" /><br />手机虫是一款通过手机分享摄像头的应用。主要目的是让大家更加轻松的分享精彩生活瞬间！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://shoujichong.com/">http://shoujichong.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" width="240" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054448mje.gif" /><br />第五大道奢侈品折扣网（www.5Lux.com），隶属于瑞美嘉信国际信息技术（北京）有限公司，是由海外留学归国创业团队创办的中国第一家全球 知名品牌网上折扣销售中心。 网站通过整合以欧美市场为主的全球供应资源，向数以百万计的中国都市白领提供包括Louis Vuitton，Gucci, Chanel, Coach, Calvin Klein, Guess等100余个从顶级到一线品牌的折扣商品，常年折扣在20%-80%左右。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.5lux.com/index.php">http://www.5lux.com/index.php</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054449G15.jpg" /><br />炫拍手机视频直播分享是一款利用手机直播视频或者拍摄照片，并实现好友间分享的移动互联网产品。用户可以通过手机进行视频直播，发布；利用手机发送朋友信 息，分享直播视频或者照片; 也可以通过炫拍网站将拍摄的视频和照片直接发布到微博或其他网站。好朋可以通过互联网站或者手机浏览直播视频或照片，并进行评论交流。更多类似服务可以查 看<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.web20share.com/2011/04/micro-video-time.html">这里</a>。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.xpai.com.cn/">http://www.xpai.com.cn/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054451o3O.jpg" /><br />新浪微博的第三方应用感觉越来越多了，爱吧婚恋是一款基于微博的第三方应用，是一个基于微博的婚介平台；更高效、更多种婚介匹配模型；基于SNS的认证体系全面了解异性。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.aiba.com/">http://www.aiba.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054452PkO.jpg" /><br />微博已经成为越来越多的商家营销的一个地方，对于营销方面而言，对于微博管理会有很多需求，国外基于Twitter有很多商家服务，品牌微博是一个面向 机构和商家专用微博，方便多人同时管理一个微博账号 团队协作，任务分配，定时微博，数据报表等等。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://pinpaiweibo.com/">http://pinpaiweibo.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0544549CP.jpg" /><br />玉贝网: 是一家电子商务公司，以礼品为核心，为用户提供礼品的选、买、送等全方位服务，并带来时尚、便捷、愉悦的馈赠体验，从而帮助维护、发展人际关系及客户关系。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.yubei.com/">http://www.yubei.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0544568Vv.jpg" /><br />@Impress | 爱影响: 量化你的社交影响力。Twitter搜索更关注人，未来People Rank应该会越来越重要，尤其是社会化推荐相关服务，People Rank应该来决定可信赖度。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://atimpress.sinaapp.com/intro/">http://atimpress.sinaapp.com/intro/</a><br /><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054458g44.jpg" /><br />Feastie : 将shopping list和购物服务结合起来。这是一个可以记录你想要购买的杂货列表服务，不过其在你记录这些想购买内容的时候会同时给你推荐这些相应商品的折扣信息。Shoping List 电子商务，看上去还不错：）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.feastie.com/">http://www.feastie.com/</a><br /><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054500Pep.png" /><br />易惊喜是一个<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.web20share.com/2011/03/social-shopping.html">社会化购物网站</a>，利用人工智能的技术，分析你看过的、喜欢的商品和你的社交关系等数据，自动推荐其他你也想看的商品。通过新浪微博账号登陆，登陆之后可以将自己喜欢的商品直接通过微博进行分享。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.ejingxi.com/">http://www.ejingxi.com/</a><br /><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0545020xp.png" /><br />按哪儿是基于微博的生活健康社交问答平台，这个应该算是基于新浪微博的第一个垂直<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.web20share.com/2011/05/social-qa-service-talk.html">社会化问答</a>服务吧。这个对知乎等社会化问答网站会产生什么影响呢，拭目以待吧。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://an.sina.yoloho.com/">http://an.sina.yoloho.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054503ktr.png" /><br />火柴网: 一个基于SNS的新一代web2.0招聘网站，一个让求职招聘更加轻松，更加人性化的全新招聘网站。更集SNS社交功能为一体，求职、创业、社交、个人展 示等众多人性化的设置，让您在火柴网留下属于您的职场精彩。招聘这么多年，一直觉得招聘其实可以加入更多的社交元素，比如国外基于Facebook何 Linkedin的招聘平台目前也受到很多人的关注。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.17hc.com/">http://www.17hc.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054505H9s.gif" /><br />围观是一个手机直播分享平台，致力于让用户方便的将自己平时喜欢的视频拍摄之后来进行分享。目前直播方式提供了PC摄像头直接拍摄直播和手机客户端直播方式。（<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.web20share.com/2011/03/weiguan-mobile-video.html">Via</a>）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.weiguan.com/">http://www.weiguan.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054507ugi.png" /><br />微分析是一款基于腾讯微博的第三方应用，分别从关注者，听众，微博内容，首页时间线等多个维度进行分析，以图表的方式展示分析结果。微博平台得到越来越多 开发者的关注，不过新浪微博自己也推出微数据服务，平台何开发者之间的微妙关系再次引起众多开发者的关注，中国会有真正开放的有良好生态的平台么？</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://app.weibox.net/fenxi/">http://app.weibox.net/fenxi/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054508hvL.jpg" /><br />分子网 | 网罗志趣: 是一个全新的兴趣社交网站，致力于为用户提供以兴趣为核心的一站式内容资讯、线上线下活动及管家服务，并创造一种新型的人际互动方式及生活方式。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://funzz.com/">http://funzz.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054510U25.jpg" /><br />QQ都市是腾讯推出的基于地理位置的游戏。好吧，腾讯也开始搞LBG了，目前提供iPhone，Android客户端。记得之前国内做LBG的有16FUN，魔力城市，摩天轮。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://qqtown.qq.com/">http://qqtown.qq.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0545125El.png" /><br />我家久久: 是家庭交流社区(FNS)网站,女性最喜欢的家庭、婚姻、生活主题交流社区,旗下有虚拟家庭、网上家谱、网上纪念、记录一生四大主频道。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.wojia99.com/">http://www.wojia99.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054514tYq.gif" /><br />搜狐快递是一个手机客户端自主定制平台，免费为第三方提供移动媒体手机端解决方案； 解决方案包括：可定制化的客户端、内容发布系统、统计分析系统、产品官网（电脑手机）、付费订阅、移动广告投放。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://k.sohu.com/">http://k.sohu.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054515Yi9.jpg" /><br />一兜糖: 一个专属恋人的网络平台，记录生活，分享幸福！注册简单体验乐一下，应该是基于情侣的社会化分享，分享购物，吃喝玩乐的信息：）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.yidoutang.com/">http://www.yidoutang.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054517Hbv.gif" /><br />人人围，世界&ldquo;围&rdquo;我而精彩: 人人围是一个即时围观热门人物、事件和话题等娱乐性综合网站，主要由个人门户、互动社区、小工具库和即时通讯四部分构成。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.renrenwei.com/">http://www.renrenwei.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054519wGD.jpg" /><br />阅米网-发现你的阅读DNA: 新浪微博第三方应用，阅米网-发现你的阅读DNA，个人猜测应该跟个性化的社会化阅读有关，内测中，还没有邀请码。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.yuemee.com/">http://www.yuemee.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054521tCi.png" /><br />扎堆是针对android系统开发的社交游戏平台。开发者可以通过PC端上传自己的游戏应用，并产生可持续的积极收入。开发者还可以通过PC端查看到自己游戏应用的下载量等相关数据，玩家可以通过手机扎堆客户端下载游戏，并且同步自己的积分，获得成就以及加入家族活动等。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.zhadui.cn/">http://www.zhadui.cn/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054522wKY.png" /><br />Sonar: 是一个基于手机的移动社交应用。这款应用可利用Facebook、Twitter、Foursquare等社交网站的数据来分析你与身边其他用户之间的关 系，进而找出联系最密切最感兴趣的人，然后就是与他们交流。简单适用之后的一个感觉，在没有足够用户数的前提下，这个软件会显得很鸡肋。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.sonar.me/">http://www.sonar.me/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054527gul.png" /><br />可口网-营养师在线服务平台: 健康总是眷顾懂得膳食调理的人。食物也有性格，需要您倾听，更需要用心搭配。可口网用专业营养师搭配的食谱计划为您的健康奠定基石。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.keko.com.cn/">http://www.keko.com.cn/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/05452931U.jpg" /><br />MM语音通讯软件: 这是一款支持朋友间语音通话的App，只要保持网络通畅注册后就能通过用户名邀请朋友参与对话；它还能在通话过程中分享位置并能将对话内容等信息上载至新浪微博、开心网、人人网 朋友分享的即时分享工具！目前感觉类似的服务米聊和微信势头比较猛。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://themmapp.com/">http://themmapp.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0545319mJ.png" /><br />有人网（youren.me）社会化聚合平台，类似FriendFeed，目前有10枚邀请，需要体验的可以留下邮箱。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://youren.me/">http://youren.me/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054535Od6.jpg" /><br />聚物 &ndash; 汇聚物品,分享发现: 聚物是一个物品分享网站,我们致力于建立公共分享系统，让用户在聚物建立一个自己的储藏室,并和其它用户一起分享发现的快乐。社会化购物网站越来越多，不过貌似有逐步同质化的趋势。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.360juwu.com/">http://www.360juwu.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054537L2k.jpg" /><br />微博预定，微博适合传播，预定服务和微博相结合看上去是个不错的组合，不过其实传播对于预定而言只是营销的部分，解决预定的信息的准确性，实时性才是重点，Opentable模式是国内想做预定服务要去研究的。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://weibofood.sinaapp.com/">http://weibofood.sinaapp.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054539Y7J.jpg" /><br />幸会－发现人脉的价值: 幸会是一个基于线下互动的强关系移动即时社交网络，通过行程签到，友群引荐和迷你微博问答三个主要功能的实现，帮助用户记录，拓展和维系真实生活中的人脉关系。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.xinghui.me/">http://www.xinghui.me/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054542FIk.png" /><br />Camera360 &ndash; 手机摄影大师 for iPhone正式登陆 App Store，0.99$，单手移滑式指控聚焦和测光调整，自动红眼去除功能，超级连拍功能,最快可以达到180张/分钟，二格、四格拼图拍摄功能，支持 Flickr、Facebook、新浪微博分享，13款特效相机功能。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://itunes.apple.com/cn/app/id443354861?mt=8">http://itunes.apple.com/cn/app/id443354861?mt=8</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054613e77.png" /><br />脸谱换换-方便好用的手机分享工具: 一款帮助你与好友方便快捷地分享信息的手机软件，通过云端服务器作为中介，你只需轻轻一摇便可以与朋友交换名片，图片，音乐等信息。支持安卓（Android），Ophone和iPhone。中国的Bump？</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.lianpu.com/">http://www.lianpu.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054615bQR.png" /><br />微助手: 是一款企业微博营销软件工具平台，提供新浪企业微博营销、企业微博营销管理、企业微博营销方案等服务。提供的服务包括：监控账户，话题追踪，定时发送，多人管理，任务指派，数据报表等等。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.weizhushou.com/">http://www.weizhushou.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054617uhi.jpg" /><br />奇妙果 &ndash; 关注和发现，最有趣的安卓应用和朋友: 奇妙果是一个致力于发现最有去的Android手机应用的服务，感兴趣的朋友可以通过其首页申请内测：）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.qimiaoguo.com/">http://www.qimiaoguo.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0546192AH.png" /><br />琢么网&ndash;企业众包客服平台: 琢么网是一个以品牌企业为中心的社区化众包客服平台。这个平台为品牌企业和他们的消费者顾客们提供了一个紧密沟通的桥梁。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.zhuome.cn/">http://www.zhuome.cn/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054621wuA.gif" /><br />明道 &ndash; 明工作之道: 企业间沟通的协作信息平台。类似国外Yammer，需要使用企业邮箱注册。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://mingdao.com/Home.htm">http://mingdao.com/Home.htm</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054622XGS.png" /><br />生活里是一个基于位置的生活服务网站，为你推送发生在你身边的并且是你感兴趣的活动、团购、优惠券等生活服务信息。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.shenghuoli.com/">http://www.shenghuoli.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054624VC6.jpg" /><br />找优点&mdash;&mdash;真实到店，逛街即得返利: &ldquo;找优点&rdquo;可以使您和真实世界中的商家通过手机互动起来，不仅为您提供身边的各种商家信息，而且您逛逛&ldquo;找优点&rdquo;的合作商家，通过真实的到店即可获得大量&ldquo;优点&rdquo;，甚至仅仅是关注商家的行为。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.zhaoyoudian.com/">http://www.zhaoyoudian.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054625KDa.png" /><br />噢粑粑是一个基于地理位置的查找周边厕所的应用，目前提供了Android客户端。很早以前就想过这样的应用，现在终于有了，呵呵。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://kai7.cn/">http://kai7.cn/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054626E5C.jpg" /><br />鹿客网: 专业的个性化电子书精彩分享平台，提供在线电子书制作、相片书分享、图片存储等服务，涵盖旅游、亲子、居家、个性等各大生活主题，记录精彩的生活</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.vslook.com/">http://www.vslook.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054628VDk.jpg" /><br />拉网: 研究型娱乐互动社区，通过各种有趣的活动，让您更了解自己并获取免费礼品， 同时鼓励分享自己的生活方式和消费态度。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.laawoo.com/index">http://www.laawoo.com/index</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054629E6C.jpg" /><br />搜物网: 是一个&ldquo;DS网站平台&rdquo;。DS=Drop Shipping，是供应链管理中的一种方法，零售商不需商品库存，直接通过搜物网把客户订单和装运细节转交给供应商，供应商将货物直接发送给最终客户。 零售商赚取批发和零售价格之间的差价。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://demo.sowu.com/default.html">http://demo.sowu.com/default.html</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054631Qo0.jpg" /><br />路趣网是一个基于真实地理位置的移动互联社区。可以在这里告诉朋友&ldquo;我在什么地方！&rdquo;；可以随时随地分享自己的吃喝玩乐精彩生活；还可以在这里发相片、发 途说、抢地主、赢勋章、分享心情故事，把自己现实生活中所有的乐趣都搬到互联网上与朋友分享，同时也在其他人的分享中发现更多的乐趣；</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.roadqu.com/">http://www.roadqu.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054632MSN.jpg" /><br />在线音乐人声移除 | 消声魔术师 | 伴奏带制作: 首个在线音乐人声去除服务。可以轻松地除去音乐中的人声，制作出伴奏！</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.vocalremover.net/cn/tw/">http://www.vocalremover.net/cn/tw/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054633nHs.png" /><br />对角，发现身边有趣的事物。: 对角, 发现身边有趣的事物。豆瓣出品的LBS服务。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://duijiao.com/">http://duijiao.com</a>/</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" width="240" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054635IwM.png" /><br />朋友圈 自然社交网络 | 和不同的人 分享不同的事: &ldquo;朋友圈&rdquo;是基于通讯录的可靠社交网络，致力于在可靠关系中发现价值和乐趣 。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.pengyouquan.com/">http://www.pengyouquan.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" width="240" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054636AKs.png" /><br />喊吧是一款基于地理位置发现、分享周围趣闻的有趣应用，你可以发现周围的办公楼、小区、学校正在发生的事情，还可以向这些地点分享照片、录音、涂鸦、文字，同时支持转发到搜狐微博，未来将陆续支持转发到新浪微博、腾讯微博、人人网等。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://shibu.mobi/">http://shibu.mobi/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054638y5c.png" /><br />App汇是一个类似豆瓣的手机应用分享社区，用户可以在上面分享自己用过的手机软件（目前主要iPhone、iPad应用），然后也可以通过单向关注机制关注自己的好友了解自己的好友喜欢的应用，App汇还会基于你喜欢的应用给你推荐你可能喜欢的手机应用。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.apphui.com/">http://www.apphui.com/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054640u4P.jpg" /><br />纷享: 社会化应用分享服务，可以分享自己手机上安装的应用程序，查看热门的手机应用等等。目前提供了Android客户端。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://appshare.cc/">http://appshare.cc/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054641CwY.jpg" /><br />说淘由前阿里巴巴员工创立，旨在帮助用户解决在移动互联网购物的体验。这是一个基于移动平台的<span class="wp_keywordlink_affiliate"><a title="查看 购物分享 的全部文章" style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.shashuai.com/tag/%e8%b4%ad%e7%89%a9%e5%88%86%e4%ba%ab/">购物分享</a></span>社区，用户通过搜索可以查找周边团购信息，通过关注标签可以订阅感兴趣的团购推荐，还可以和朋友分享讨论团购的乐趣。说淘根据用户的关注进行个性化推送。（<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.web20share.com/2011/06/shuotao.html">Via</a>）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://shuotao.me/">http://shuotao.me/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054643tvQ.jpg" /><br />灯鹭是一个社会化登录工具提供商: 使用灯鹭社会化登录工具，您网站的用户可以使用与人人连接、用开心网账号登录、用微博账号登录、与QQ空间连接、与MSN连接等功能连接到您的网站，在您的站群之间实现单点登录。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.denglu.cc/index.html">http://www.denglu.cc/index.html</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/0546450YX.png" /><br />集馈网是<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.originatechina.com/">OriginateChina</a>公司发布的一个新项目，旨在更好的处理用户和企业之间的交流，客户可以对企业提出意见、建议、报告错误、及给予好评；对企业来说，也提高了反馈的质量，能更好的帮助产品成长。（<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.web20share.com/2011/04/geekui.html">Via</a>）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://geekui.com/">http://geekui.com</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054647KuW.jpg" /><br />路演网是一个在线路演制作网站，个人理解其实就是一个将演示内容过程通过视频方式完整记录下来的服务。简单来讲就是可以将你上传的内容制作成一个演示文档，然后你可以在这个文档演示的同时配以语音的说明，然后将这个演示的过程完整的录制下来，生成一个在线的路演视频。（<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.web20share.com/2011/01/luyan.html">Via</a>）</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">链接：<a style="color: rgb(102,102,102); text-decoration: none" href="http://www.luyan.net/">http://www.luyan.net/</a></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" alt="" src="http://www.shashuai.com/wp-content/uploads/assets/2011/07/054648iQv.jpg" /><br />几分钟是一个HowTo类视频分享网站，同时也是一个基于视频的在线知识问答平台。几分钟用户可以在几分钟分享自己如何做某件事的视频，也可以在几分钟进行提问，让其他的用户通过视频来给你解答。（<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.web20share.com/2010/12/jifenzhong.html">Via</a>）</p></span></div>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss241/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=241</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=241&amp;key=57349622</trackback:ping></item><item><title>网站用户体验要点</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/ue240/</link><pubDate>Wed, 31 Aug 2011 23:32:02 +0800</pubDate><guid>http://www.vvwww.com/post/ue240/</guid><description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="font-size: 13px; color: rgb(104,104,104); line-height: 24px; font-family: Tahoma, 'Microsoft YaHei', Verdana, Arial, Helvetica, sans-serif; background-color: rgb(249,249,249)"><a style="color: rgb(102,102,102); text-decoration: none" href="http://www.shashuai.com/%e7%bd%91%e7%ab%99%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%e8%a6%81%e7%82%b9/"><img class="alignnone size-full wp-image-535" title="tiyanyaodian" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" height="130" alt="" width="680" src="http://www.shashuai.com/wp-content/uploads/2011/06/tiyanyaodian.jpg" /></a></span><p>&nbsp;</p></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><strong>（一）关于体验</strong></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">约瑟夫。派恩和詹姆士。吉尔摩在《体验经济》一书中提出其观点：所谓&ldquo;体验&rdquo;就是企业以商品为道具，以服务为舞台，以顾客为中心，创造出可以使消费者全面参与、让消费者感到值得回忆的活动。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">&nbsp;</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">体验是使每个人以个性化的方式参与消费，在消费过程中产生情绪、体力、心理、智力、精神等方面的满足，并产生预期或更为美好的感觉。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">体验的核心就是顾客参与，体验营销的消费者充分发挥自身的想象力和创造力，主动参与产品的设计、创造和再加工。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">通过创造性的消费来体现独特的个性和价值，获得更大的满足和成就感。体验营销的焦点放在顾客体验上，把顾客作为价值创造的主体，及时回应消费者的感情诉求。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><strong>（二）网络体验</strong><strong><br /></strong><br />网站体验，指的是利用网络特性，为客户提供完善的网络体验，提高客户的满意度，从而与客户建立起紧密而持续的关系。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">网络的体验，是体验的延伸。随着网络的普及，网络体验成为体验营销不可缺少的重要组成部分。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><strong>（三）网站体验的分类</strong></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">1、感官体验：呈现给用户视听上的体验，强调舒适性。<br />2、交互体验：呈现给用户操作上的体验，强调易用/可用性。<br />3、情感体验：呈现给用户心理上的体验，强调友好性。<br />4、浏览体验：呈现给用户浏览上的体验，强调吸引性。<br />5、信任体验：呈现给用户的信任体验，强调可靠性。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><strong>（四）网站体验的76个体验点</strong></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">一、感官体验：呈现给用户视听上的体验，强调舒适性。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">1. 设计风格：符合目标客户的审美习惯，并具有良好的引导性。<br />网站在设计之前，必须明确目标客户群体，并针对目标客户的审美喜好，进行分析，从而确定网站的总体设计风格。<br />2. 网站LOGO：确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间。<br />3. 页面速度：正常情况下，尽量确保页面在5秒内打开。如果是大 型门户网站，必须考虑南北互通问题，进行必要的压力测试。<br />4. 页面布局：重点突出，主次分明，图文并茂。与企业的营销目标相结合，将目标客户最感兴趣的，最具有销售力的信息放置在最重要的位置。<br />5. 页面色彩：与品牌整体形象相统一，主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。<br />6. 动画效果：与主画面相协调，打开速度快，动画效果节奏适中，不干扰主画面浏览。<br />7. 页面导航：导航条清晰明了、突出，层级分明。<br />8. 页面大小：适合多数浏览器浏览（以15寸及17寸显示器为主）。<br />9. 图片展示：比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远。<br />10. 图标使用：简洁、明了、易懂、准确，与页面整体风格统一。<br />11. 广告位：避免干扰视线，广告图片符合整体风格，避免喧宾夺主。<br />12. 背景音乐：与整体网站主题统一，文件要小，不能干扰阅读。要设置开关按钮及音量控制按钮。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">二、交互体验：呈现给用户操作上的体验，强调易用和可用性。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">13. 会员申请：介绍清晰的会员权责，并提示用户确认已阅读条款。<br />14. 会员注册：流程清晰、简洁。待会员注册成功后，再详细完善资料。<br />15. 表单填写：尽量采用下拉选择，需填写部分需注明要填写内容，并对必填字段作出限制。（如手机位数、邮编等等，避免无效信息）<br />16. 表单提交：表单填写后需输入验证码，防止注水。提交成功后，应显示感谢提示。<br />17. 按钮设置：对于交互性的按钮必须清晰突出，以确保用户可以清楚地点击。<br />18. 点击提示：点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读。<br />19. 错误提示：若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作。<br />20. 在线问答：用户提问后后台要及时反馈，后台显示有新提问以确保回复及时。<br />21. 意见反馈：当用户在使用中发生任何问题，都可随时提供反馈意见。<br />22. 在线调查：为用户关注的问题设置调查，并显示调查结果，提高用户的参与度。<br />23. 在线搜索：搜索提交后，显示清晰列表，并对该搜索结果中的相关字符以不同颜色加以区分。<br />24. 页面刷新：尽量采用无刷新（AJAX）技术，以减少页面的刷新率。Ajax是新兴的网络开发技术的象征。它将JavaScript和XML技术结合在一起，用户每次调用新数据时，无需反复向服务器发出请求，而是在浏览器的缓存区预先获取下次可能用到的数据，界面的响应速度因此得到了显著提升。<br />25. 新开窗口：尽量减少新开的窗口，以避免开过多的无效窗口，关闭弹出窗口的功能。<br />26. 资料安全：确保资料的安全保密，对于客户密码和资料进行加密保存。<br />27. 显示路径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">三、浏览体验：呈现给用户浏览上的体验，强调吸引性。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">28. 栏目的命名：与栏目内容准确相关，简洁清晰，不宜过于深奥。<br />29. 栏目的层级：最多不超过三层，导航清晰，运用JAVAscrip等技术使得层级之间伸缩便利。<br />30. 内容的分类：同一栏目下，不同分类区隔清晰，不要互相包含或混淆。<br />31. 内容的丰富性：每一个栏目应确保足够的信息量，避免栏目无内容情况出现。<br />32. 内容的原创性：尽量多采用原创性内容，以确保内容的可读性。<br />33. 信息的更新频率：确保稳定的更新频率，以吸引浏览者经常浏览。<br />34. 信息的编写方式：段落标题加粗，以区别于内文。采用倒金字塔结构。<br />35. 新文章的标记：为新文章提供不同标识（如new），吸引浏览者查看。<br />36. 文章导读：为重要内容在首页设立导读，使得浏览者可以了解到所需信息。文字截取字数准确，避免断章取义。<br />37. 精彩内容的推荐：在频道首页或文章左右侧，提供精彩内容推荐，吸引浏览者浏览。<br />38. 相关内容的推荐：在用户浏览文章的左右侧或下部，提供相关内容推荐，吸引浏览者浏览。<br />39. 收藏夹的设置：为会员设置收藏夹，对于喜爱的产品或信息，可进行收藏。<br />40. 栏目的订阅：提供Rss或邮件订阅功能<br />41. 信息的搜索：在页面的醒目位置，提供信息搜索框，便于查找到所需内容。<br />42. 页面打印：允许用户打印该页资料，以便于保存。<br />43. 文字排列：标题与正文明显区隔，段落清晰。<br />44. 文字字体：采用易于阅读的字体，避免文字过小或过密造成的阅读障碍。可对字体进行大中小设置，以满足不同的浏览习惯。<br />45. 页面底色：不能干扰主体页面的阅读。<br />46. 页面的长度：设置一定的页面长度，避免页面过长而影响阅读。<br />47. 分页浏览：对于长篇文章 进行分页浏览。<br />48. 语言版本：为面向不同国家的客户提供不同语言的浏览版本。<br />49. 快速通道：为有明确目的的用户提供快速的入口。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">四、情感体验：呈现给用户心理上的体验，强调友好性。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">50. 客户分类：将不同的浏览者进行划分（如消费者、经销商、内部员工），为客户提供不同的服务。<br />51. 友好提示：对于每一个操作进行友好提示，以增加浏览者的亲和度。<br />52. 会员交流：提供便利的会员交流功能（如论坛），增进会员感情。<br />53. 售后反馈：定期进行售后的反馈跟踪，提高客户满意度。<br />54. 会员优惠：定期举办会员优惠活动，让会员感觉到实实在在的利益。<br />55. 会员推荐：根据会员资料及购买习惯，为其推荐适合的产品或服务。<br />56. 鼓励用户参与：提供用户评论、投票等功能，让会员更多地参与进来。<br />57. 会员活动：定期举办网上会员活动，提供会员网下交流机会。<br />58. 专家答疑：为用户提出的疑问进行专业解答。<br />59. 邮件/短信问候：针对不同客户，为客户定期提供邮件/短信问候，增进与客户间感情。<br />60. 好友推荐：提供邮件推荐功能。<br />61. 网站地图：为用户提供清晰的网站指引。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">五、信任体验：呈现给用户的信任体验，强调可靠性。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">62. 搜索引擎：查找相关内容可以显示在搜索引擎前列。<br />63. 公司介绍：真实可靠的信息发布，包括公司规模、发展状况、公司资质等。<br />64. 投资者关系：上市公司需为股民提供真实准确的年报，财务信息等。<br />65. 服务保障：将公司的服务保障清晰列出，增强客户信任。<br />66. 页面标题：准确地描述公司名称以及相关内容。<br />67. 文章来源：为摘引的文章标注摘引来源，避免版权纠纷。<br />68. 文章编辑作者：为原创性文章注明编辑或作者，以提高文章的可信度。<br />69. 联系方式：准确有效的地址、电话等联系方式，便于查找。<br />70. 服务热线：将公司的服务热线列在醒目的地方，便于客户查找。<br />71. 有效的投诉途径：为客户提供投诉或建议邮箱或在线反馈。<br />72. 安全及隐私条款：对于交互式网站，注明安全及隐私条款可以减少客户顾虑，避免纠纷。<br />73. 法律声明：对于网站法律条款的声明可以避免企业陷入不必要的纠纷中。<br />74. 网站备案：让浏览者确认网站的合法性。<br />75. 相关链接：对于集团企业及相关企业的链接，应该具有相关性。<br />76. 帮助中心：对于流程较复杂的服务，必须具备帮助中心进行服务介绍</p>]]></description><category>用户体验</category><comments>http://www.vvwww.com/post/ue240/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=240</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=240&amp;key=bf8dafd3</trackback:ping></item><item><title>互联网产品经理需要了解的这些网站</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss239/</link><pubDate>Wed, 31 Aug 2011 23:30:01 +0800</pubDate><guid>http://www.vvwww.com/post/rss239/</guid><description><![CDATA[<p>&nbsp;<img class="alignnone size-full wp-image-369" title="互联网产品经理需要了解的这些网站|产品经理网址导航" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; max-width: 640px; border-right-width: 0px" height="130" alt="" width="680" src="http://www.shashuai.com/wp-content/uploads/2011/06/pm_nav.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px">互联网是不断变化莫测的，作为一个产品经理，或者是亟待成为产品经理的朋友，也要不断了解整个互联网市场的动态。以下是<a style="color: rgb(102,102,102); text-decoration: none" href="http://pm265.com/">pm265.com/</a>整理的产品经理必须的网站导航，用起来很方便，一目了然。</p><h1 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: bold; font-size: 16px; padding-bottom: 5px; margin: 0px; color: rgb(0,134,227); padding-top: 10px"><span style="font-size: small"><span style="line-height: normal">资讯</span></span></h1><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.alibuybuy.com/">互联网那点事</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.yixieshi.com/">互联网的一些事</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://bbs.bianews.com/portal.php">鞭牛士</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.donews.com/">DoNews</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.williamlong.info/">月光博客</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.techfrom.com/">TechFrom</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.techwom.com/">科技娲母</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.20ju.com/">草根网</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.chinainternet.cn/index.asp">互联网天地</a><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.weiphone.com/">&nbsp;威锋网&nbsp;</a><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.meihua.info/">梅花网</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.ftchinese.com/">FT中文网</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://dongxi.net/">东西网&nbsp;</a><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://madbrief.com/">疯狂简报</a></span></span></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.cnbeta.com/">CNbeta</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.techweb.com.cn/">Techweb&nbsp;</a><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://cn.engadget.com/">Engadget</a>&nbsp;&nbsp;<a title="Mobile Design China" style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://mdchina.org/">MobileDesignChina</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://mobinode.tv/">MOBINODE.TV</a></span></span></p><h1 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: bold; font-size: 16px; padding-bottom: 5px; margin: 0px; color: rgb(0,134,227); padding-top: 10px"><span style="font-size: small"><span style="line-height: normal">组织与沙龙</span></span></h1><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.chinapm.com.cn/">中国产品经理联盟</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://home.pmcaff.com/portal.php">PMcaff</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://pmcamp.org/">PMCamp</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.ynren.cn/portal.php">业内人</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.86pm.com/">86PM</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://hdsalon.org/">人本设计沙龙</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.51qiangzuo.com/">抢座</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.homeol.cn/portal.php">网站运营俱乐部</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.pmoo.net/">产品圈圈</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://bbs.itniuren.com/">IT牛人论坛</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.chinaz.com/">站长之家</a><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.hiued.org/">&nbsp;用户体验交流会</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.ipm8.com/">互联网产品经理</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.yuewe.cn/">阅微网</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.msg2me.com/">Msg2me</a></span></span></p><h1 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: bold; font-size: 16px; padding-bottom: 5px; margin: 0px; color: rgb(0,134,227); padding-top: 10px"><span style="font-size: small"><span style="line-height: normal">数据分析</span></span></h1><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.chinawebanalytics.cn/">网站分析在中国</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.199it.com/">中文互联网数据研究资讯中心</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://bluewhale.cc/">蓝鲸的网站分析笔记</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.dcci.com.cn/">DCCI</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://cnzz.com/">CNZZ</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.google.com/analytics/">Google Analytics</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.iresearch.com.cn/">艾瑞咨询</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://data.baidu.com/">百度数据研究中心</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.google.com/trends">google趋势</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://index.baidu.com/">百度指数</a></span></span></p><h1 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: bold; font-size: 16px; padding-bottom: 5px; margin: 0px; color: rgb(0,134,227); padding-top: 10px"><span style="font-size: small"><span style="line-height: normal">原型&middot;技能</span></span></h1><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a title="webppd" style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.webppd.com/">WebPPD&nbsp;</a><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://bbs.hpx-party.org/">HPX Party</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://cn.userxper.com/">悠识</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.douban.com/group/124802/">豆瓣Axure小组</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.hozin.com/">网站策划师</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.rapidbbs.cn/">锐普PPT论坛</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://bbs.21manager.com/">栖息谷</a></span></span></p><h1 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: bold; font-size: 16px; padding-bottom: 5px; margin: 0px; color: rgb(0,134,227); padding-top: 10px"><span style="font-size: small"><span style="line-height: normal">视觉&middot;设计</span></span></h1><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.chinavisual.com/">视觉中国</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.wpsay.com/">别出心裁</a></span></span></p><h1 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: bold; font-size: 16px; padding-bottom: 5px; margin: 0px; color: rgb(0,134,227); padding-top: 10px"><span style="font-size: small"><span style="line-height: normal">UED&middot;团队</span></span></h1><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://cdc.tencent.com/">腾讯CDC</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://wsd.tencent.com/">腾讯WSD</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://isd.tencent.com/">腾讯ISD</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://support.qq.com/discuss/0_1.shtml">腾讯产品交流</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ued.taobao.com/blog/">淘宝UED</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.aliued.com/">阿里巴巴UED</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ued.koubei.com/">口碑UED</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.uedblog.com/">雅虎UED</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ued.alimama.com/">阿里妈妈UED</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ued.alipay.com/">支付宝UED</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.alidigest.com/">阿里文摘</a><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ixdc.org/">交互设计专业委员会</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://mux.baidu.com/">百度Mux&nbsp;</a><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.baiduux.com/">百度泛用户体验团队</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.sndaued.com/blog/">盛大UED</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://fed.renren.com/">人人网FED</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ued.5173.com//">5173UED</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ued.sohu.com/">搜狐UED</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://ucdchina.com/">UCD大社区</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://uedc.163.com/">网易UEDC</a></span></span></p><h1 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: bold; font-size: 16px; padding-bottom: 5px; margin: 0px; color: rgb(0,134,227); padding-top: 10px"><span style="font-size: small"><span style="line-height: normal">创业&middot;社交</span></span></h1><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.36kr.com/">36氪</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://tech2ipo.com/">Tech2IPO</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.ifanr.com/">IFanr</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://techcrunch.com/">TechCrunch</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.ushi.cn/">优仕网</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.wealink.com/">若邻网</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.jingwei.com/">经纬网</a></span></span></p><h1 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: bold; font-size: 16px; padding-bottom: 5px; margin: 0px; color: rgb(0,134,227); padding-top: 10px"><span style="font-size: small"><span style="line-height: normal">优秀产品&middot;新产品</span></span></h1><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://reteng.qq.com/">热腾</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://mifan.me/">米饭</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.wohuia.com/">我会啊</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.uqude.com/">有趣的</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.taobao.com/">淘宝</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.paidai.com/">派代网</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.360buy.com/">京东&nbsp;</a><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.icson.com/">易讯&nbsp;</a><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.soqi.cn/">搜企</a></span></span></p><h1 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: bold; font-size: 16px; padding-bottom: 5px; margin: 0px; color: rgb(0,134,227); padding-top: 10px"><span style="font-size: small"><span style="line-height: normal">博客</span></span></h1><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://blog.sina.com.cn/kaifulee">李开复</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://blog.sina.com.cn/zhouhongyi">周鸿祎</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.kuliqiang.com/">费杰</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://iamsujie.com/">苏杰</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://uicom.net/blog/">白鸦</a>&nbsp;&nbsp;<a title="修泽" style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.yintop.com/">尹广磊</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.znnblog.cn/">张楠</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.chouyu.com.cn/">臭鱼</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.chedong.com/blog/">车东</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.lusongsong.com/">卢松松</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.jaylee.cn/">李杰</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://hi.baidu.com/inetpm">高巍</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.muchangqing.com/">牟长青</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.misterfang.com/??3?o?">方楚</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://pdpo.iyenei.com/">马国良</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.ximisoft.com/">西米的博客</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://blog.donews.com/keso">对牛乱弹琴</a><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://elya.cc/">elya妞</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://blog.donews.com/llf">零零发</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.javey.org/">寻找互联网</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://pccto.com/">首席网</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.jianglikun.com/">江礼坤</a>&nbsp;&nbsp;<a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://www.jiasijun.com/">贾思军</a></span></span></p><h1 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: bold; font-size: 16px; padding-bottom: 5px; margin: 0px; color: rgb(0,134,227); padding-top: 10px"><span style="font-size: small"><span style="line-height: normal">微博</span></span></h1><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a title="李开复" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/kaifulee">李开复</a>&nbsp;&nbsp;<a title="周鸿祎" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/zhouhongyi">周鸿祎</a>&nbsp;&nbsp;<a title="傅盛" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/fusheng7878">傅盛</a>&nbsp;&nbsp;<a title="姚劲波" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/yaojinbo">姚劲波</a>&nbsp;&nbsp;<a title="黄亮新" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/huangliangxin">黄亮新</a>&nbsp;&nbsp;<a title="月光博客" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/williamlong">月光博客</a>&nbsp;&nbsp;<a title="程苓峰" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/yunkeji">程苓峰</a>&nbsp;&nbsp;<a title="田学峰" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/shtic">田学峰</a>&nbsp;&nbsp;<a title="蔡学镛" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/1614282004">蔡学镛</a>&nbsp;&nbsp;<a title="米晓彬" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/mixiaobin">米晓彬</a>&nbsp;&nbsp;<a title="马日拉" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/marilawang">马日拉</a>&nbsp;&nbsp;<a title="卢松松" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/lusongsong">卢松松</a>&nbsp;&nbsp;<a title="美团网王兴" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/1616192700">美团网王兴</a>&nbsp;&nbsp;<a title="互联网才子" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/irealy">互联网才子</a>&nbsp;&nbsp;<a title="毕朝晖" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/i8816">毕朝晖</a>&nbsp;&nbsp;<a title="炳叔" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/bingshu">炳叔</a>&nbsp;&nbsp;<a title="栾璞" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/luanpu">栾璞</a>&nbsp;&nbsp;<a title="曹军波" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/junbocn">曹军波</a>&nbsp;&nbsp;<a title="费杰_苦力强狒狒" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/feijie">费杰</a>&nbsp;&nbsp;<a title="iamsujie" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/iamsujie">苏杰</a>&nbsp;&nbsp;<a title="白鸦" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/baiya001">白鸦</a>&nbsp;&nbsp;<a title="修泽" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/xiuze">修泽</a>&nbsp;&nbsp;<a title="尹广磊" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/yintop">尹广磊</a>&nbsp;&nbsp;<a title="李雪岩zoe" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/pmroad">李雪岩</a>&nbsp;&nbsp;<a title="夜雨寒笛" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/diz8">夜雨寒笛</a>&nbsp;&nbsp;<a title="moon" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/moonseo">moon</a>&nbsp;&nbsp;<a title="潇湘夜语" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/maichao">潇湘夜语</a>&nbsp;&nbsp;<a title="westlinn" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/westlinn">westlinn</a>&nbsp;&nbsp;<a title="赫贤" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/manabuqiao">赫贤</a>&nbsp;&nbsp;<a title="yule" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/yule">yule</a>&nbsp;&nbsp;<a title="艾颂" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/buzzing">艾颂</a>&nbsp;&nbsp;<a title="林辉Ethan" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/linhui620">林辉Ethan</a><a title="kentzhu" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/kentzhu">kentzhu</a>&nbsp;&nbsp;<a title="酷讯张海军" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/1683896720">酷讯张海军</a>&nbsp;&nbsp;<a title="牛角尖" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/laoniu">牛角尖</a>&nbsp;&nbsp;<a title="屈于鸿" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/quyh">屈于鸿</a>&nbsp;&nbsp;<a title="高巍谈互联网产品" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/inetpm">高巍</a>&nbsp;&nbsp;<a title="星汉Lee" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/xinghan">星汉Lee</a>&nbsp;&nbsp;<a title="包炬强" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/timbao">包炬强</a></span></span></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a title="数据挖掘与数据分析" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/betterdata">数据挖掘与数据分析</a>&nbsp;&nbsp;<a title="网站分析星期三" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/beijingwaw">网站分析星期三</a>&nbsp;&nbsp;<a title="199IT--数据驱动未来" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/199it">199IT&ndash;数据驱动未来</a>&nbsp;&nbsp;<a title="小蚊子乐园" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/xiaowenzi22">小蚊子乐园</a>&nbsp;&nbsp;<a title="数据圈官方微博" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/jingjiquan">数据圈官方微博</a>&nbsp;&nbsp;<a title="WebInsight互联网测评" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/webinsight">WebInsight互联网测评</a>&nbsp;&nbsp;<a title="网站分析公会" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/walib">网站分析公会</a>&nbsp;&nbsp;<a title="小白的筷子" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/fiona620206">小白的筷子</a></span></span></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a title="互联网的那点事" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/alibuybuy">互联网的那点事</a>&nbsp;&nbsp;<a title="互联网的一些事" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/yixieshi">互联网的一些事</a>&nbsp;&nbsp;<a title="互联网实验室" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/chinalabs">互联网实验室</a>&nbsp;&nbsp;<a title="互联网爆料" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/itbaoliao">互联网爆料</a>&nbsp;&nbsp;<a title="hiued用户体验交流会" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/hiued">hiued用户体验交流会</a>&nbsp;&nbsp;<a title="pmcaff" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/pmcaff">PMCaff</a>&nbsp;&nbsp;<a title="PMCamp" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/pmcamp">PMCamp</a>&nbsp;&nbsp;<a title="TechWeb" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/techweb">TechWeb</a>&nbsp;&nbsp;<a title="uxworks" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/uxworks">uxworks</a><a title="sealon" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/sealon">sealon</a>&nbsp;&nbsp;<a title="职场经典" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/kxjj1">职场经典</a>&nbsp;&nbsp;<a title="挨踢职场" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/ajob">挨踢职场</a></span></span></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a title="牙疼毅语" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/wandongming1987">牙疼毅语</a>&nbsp;&nbsp;<a title="小兵孙运凡" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/sunyunfan">小兵孙运凡</a>&nbsp;&nbsp;<a title="白鸥v" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/baioux">白鸥v</a>&nbsp;&nbsp;<a title="土豆泥炖土豆" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/tianxiaomeng">土豆泥炖土豆</a>&nbsp;&nbsp;<a title="小虫PM" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/alipayzouyan">小虫PM</a>&nbsp;&nbsp;<a title="蓝夕bangwo8" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/bangwo8">蓝夕bangwo8</a>&nbsp;&nbsp;<a title="赵楠" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/zhaonan">赵楠</a>&nbsp;&nbsp;<a title="小小财神" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/moneyfull">小小财神</a>&nbsp;&nbsp;<a title="李杨_天际网" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/bluewind1">李杨</a>&nbsp;&nbsp;<a title="乖乖king猪头" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/pmking">乖乖king猪头</a>&nbsp;&nbsp;<a title="侯雨泽" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/bobhou">侯雨泽</a>&nbsp;&nbsp;<a title="江洋pcuseman" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/pcuseman">江洋pcuseman</a>&nbsp;&nbsp;<a title="陆易斯" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/mysmth">陆易斯</a>&nbsp;&nbsp;<a title="张良伦" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/keeptry">张良伦</a>&nbsp;&nbsp;<a title="王永金" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/cnnewmedia">王永金</a>&nbsp;&nbsp;<a title="庄呈笛" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/samzhuang">庄呈笛</a></span></span></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 10px; padding-top: 0px"><span style="font-size: small"><span style="line-height: normal"><a style="color: rgb(102,102,102); text-decoration: none" target="_blank" href="http://t.qq.com/tencent_isux">腾讯ISUX</a>&nbsp;&nbsp;<a title="站长之家" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/chinaz">站长之家</a>&nbsp;&nbsp;<a title="laobai" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/iamlaobai">laobai</a>&nbsp;&nbsp;<a title="Fenng" style="color: rgb(102,102,102); text-decoration: none" href="http://weibo.com/fenng">Fenng</a></span></span></p><p>&nbsp;</p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss239/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=239</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=239&amp;key=c113e2ec</trackback:ping></item><item><title>手机客户端UI设计之手机平台之争</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/mobile_app238/</link><pubDate>Wed, 31 Aug 2011 23:16:54 +0800</pubDate><guid>http://www.vvwww.com/post/mobile_app238/</guid><description><![CDATA[<p><span class="Apple-style-span" style="font-size: 14px; color: rgb(51,51,51); line-height: 25px; font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif">原文链接：&nbsp;</span><a href="http://ued.taobao.com/blog/2011/07/06/mobile-ui-guideline-analysis-of-different-mobile-platforms/">http://ued.taobao.com/blog/2011/07/06/mobile-ui-guideline-analysis-of-different-mobile-platforms/</a><p>&nbsp;</p><p><span class="Apple-style-span" style="font-size: 14px; color: rgb(51,51,51); line-height: 25px; font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif">转自：淘宝UED&nbsp; </span><span class="Apple-style-span" style="font-size: 14px; color: rgb(51,51,51); line-height: 25px; font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif"><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;</p></span><p>&nbsp;</p><p>&nbsp;</p></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;</p></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><span style="color: rgb(255,102,0)"><img title="" alt="" src="http://www.vvwww.com/upload/0918130.jpg" onload="ResizeImage(this,520)" /><br />1. 当前手机平台的争锋</span></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;为了占领移动互联网的制高点，当前的几大IT巨头都以手机平台为基础展开争夺。占领移动平台就是占领了用户的移动桌面，也就为自身的移动服务争取到了最佳位置。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 微软公司推出windows phone 7, 曝光了windows 8；苹果公司也开了iOS 5的发布会；谷歌的Android 3.0的发布，Android 2.4 的若隐若现等等；大家都在努力提升平台体验。另外，惠普的Web OS、黑莓公司也都在研制和发布新平台，也引起了业内人士的极大关注。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 从当前市场占有率和未来的发展趋势看，客户端适配上，主要还是考虑iOS ，Windows，Android三个系统为主，其他的系统在国内还难占据主流，这里不解释。Android手机的增长最快；iOS手机在国内的占有量也增长很快，利好消息也不断，电信、移动都在谈；Windows主要看与Nokia的未来合作，前景不小。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 因此，在本文中，简单的介绍一下这三个主流平台的交互特性，以帮助刚从事客户端交互设计的同行们更快地了解它们的基本特性，为能开发出更好体验的客户端提供便利。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><span style="color: rgb(255,102,0)">2. 各个平台的特点及优势</span></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><strong style="font-weight: bold">&nbsp;1）平台的硬件特性</strong></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">a)&nbsp;&nbsp; 平台的按键</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 手机按键是系统自带的，平台也会把按键的功能带入到系统的客户端应用中，他也天然地与用户操作相融合。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><img class="alignnone size-full wp-image-4242" title="表1" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="271" alt="" width="551" src="http://ued.taobao.com/blog/wp-content/uploads/2011/07/%E8%A1%A81.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 手机按键一般分为两类，功能键和导航键。功能键被指派为特定的功能，用户按了后，触发对应的功能，一般与屏幕内容关系不大，如拍照键，只是启动拍照，在其他的客户端中基本无效。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 另一类是导航键，被赋予了特定的逻辑规则，她的操作与屏幕有一个逻辑映射的关系，但操作与操作对象分离，用户按键后，在屏幕中得到对应的反馈。如【Back】映射为返回前一页，点击【Back】后，屏幕的内容返回到上一页。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 功能键能直接启动功能，它本身对交互的影响不是很大。而导航键则是交互设计的重要组成部分。主要应该注意以下几点：</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">（1）&nbsp; 客户端的交互导航设计应该支持平台的导航按键的操作。不管你是否已经在屏幕中有虚拟按钮代替了按键已有的功能，也应该支持系统按键的导航逻辑。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">（2）&nbsp; 客户端用到了平台的功能键对应的功能，应该支持功能键的操作。如，在客户端中需要调节音量，则应该支持系统音量的按键来控制。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">（3）&nbsp; 所有客户端对按键的操作都必须保持一致，不要随意互用。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">b)&nbsp;&nbsp; 平台的屏幕适配</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 由于不同平台的开放程度很不一样，不同的平台产品对于屏幕的大小的设计很不一样，有些只有很少的尺寸分布；有些有很多不同的尺寸，这给适配带来了很多问题和麻烦。屏幕适配设计参见我之前的博文。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><img class="alignnone size-full wp-image-4243" title="表2" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="217" alt="" width="554" src="http://ued.taobao.com/blog/wp-content/uploads/2011/07/%E8%A1%A82.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">c)&nbsp;&nbsp; 平台支持的其他硬件：传感器，屏幕特性等</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; iPhone 推出来后，迅速风靡全球，创造了一个革新的时代（也有人说iPhone本身不是革命，但是他创造了一次革命），除了设计本身外，几个传感器的合理使用也立下了汗马功劳。主要包括，重力加速度传感器、陀螺仪、接近传感器、电子罗盘等。这些传感器在不同的情景下，创造了很多独特的体验，极大的增强了手机的可玩性。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 不同的平台或是手机会支持不同的传感器，在界面设计时，也需要考虑它们在不同平台上支持的普及程度，以及不支持的时，能提供的相关代替设计方案。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><strong style="font-weight: bold">2）平台的界面特性</strong></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">a)&nbsp;&nbsp; 应用入口形式</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 应用程序的启动入口是指用户启动程序的交互界面及操作形式。不同的平台上，对于启动入口操作和界面也有较大的区别，这是展示平台特性的第一印象。同时，不同平台及手机公司为了使品牌形象更加突出也会在这里多做文章。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">从交互特性上看，应用程序的启动入口主要有以下几个特征和注意点：</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><img class="alignnone size-full wp-image-4244" title="表3" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="514" alt="" width="580" src="http://ued.taobao.com/blog/wp-content/uploads/2011/07/%E8%A1%A83.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">b)&nbsp;&nbsp; 页面基本结构</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 页面的基本结构布局，决定了手机界面的主要风格，在不同的平台上为了表现出设计的差异和风格，在界面布局上都有所不同。但是，总的来说还是没有与iOS有何本质的不同，主要在形式上略微的不同。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">iOS：</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><img class="alignnone size-full wp-image-4245" title="图1" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="244" alt="" width="513" src="http://ued.taobao.com/blog/wp-content/uploads/2011/07/%E5%9B%BE1.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">Android：</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><img class="alignnone size-full wp-image-4246" title="图2" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="221" alt="" width="555" src="http://ued.taobao.com/blog/wp-content/uploads/2011/07/%E5%9B%BE2.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">Windows Phone7：</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><img class="alignnone size-full wp-image-4247" title="图3" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="294" alt="" width="555" src="http://ued.taobao.com/blog/wp-content/uploads/2011/07/%E5%9B%BE3.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Android 的手机厂商都更改了原生系统的界面，不同Android手机在界面的展示上多有不同。在Android客户端的设计上，本身有不少都是从iOS上直接移植了界面，导致了它的更多不同。但是不管怎么样，界面上操作和导航逻辑要符合平台本身的特征。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在框架的设计上，我是倾向于把最核心的操作放在底部，方便用户的单手操作。iOS的设计把导航按钮方在左上角，远离大拇指的操作区域，就是容易造成用户脱手&ldquo;甩机&rdquo;，也影响操作效率。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">c)&nbsp;&nbsp; 主要导航特性：</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 导航作为一个平台的主要交互特性之一，不同平台之间也存在较大的差异。iOS在设计上逻辑严密，所有的应用自成一体、浑然天成；相比之下，Android像是由iOS和android设计师杂交的产物，在不同的应用上导航系统混乱，不太成体系；Windows Phone 7 的导航在界面展示上，标题采用全景图的形式，真是另辟蹊径，自成体系。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 在这里主要讲一下不同平台下的导航按键、title和Tab、返回逻辑、退出程序几个小点。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><img class="alignnone size-full wp-image-4262" title="表4" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="1002" alt="" width="587" src="http://ued.taobao.com/blog/wp-content/uploads/2011/07/%E8%A1%A841.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">d)&nbsp;&nbsp; 菜单及操作形式</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 这几个代表当前最高水平的移动平台，都是以手指触摸为基础的直接操作界面。iOS只提供了直接操作的方式；Android和Win Phone 7 还增加了几个硬键按钮配合操作，但总体也是以直接操作为主。几个平台都有菜单操作，但是展示的形式不同，但也在相互的借鉴。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><img class="alignnone size-full wp-image-4249" title="表5" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" height="288" alt="" width="591" src="http://ued.taobao.com/blog/wp-content/uploads/2011/07/%E8%A1%A85.jpg" /></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 由于手机屏幕较小，一屏内容往往显示一个对象或信息单元，toolbar的操作正是对这个单元进行操作的。如果是对单元内的对象操作，更多的设计都是在界面中直接设置操作对象（如屏幕内的操作按钮）。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">e)&nbsp;&nbsp; 信息提示</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 信息提示方式，各个平台之间也都在相互学习。信息list作为Android系统的最核心的设计优势，现在iOS5也开始应用。同时许多Android手机及锁屏应用在锁屏界面与提示信息间做更多地权衡，使用户能更快地处理信息，提升效率。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 各个平台都提供了对话框的形式，只是在叫法上略有不同，如alert，popup，dialog，raw notification等，其主要的交互操作没有区别，都是对话框的基本操作形式。也有一些变异的反馈提示框，如android系统提供的快速消失的反馈提示，做成轻量级的，对用户干扰也减到更少。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Android系统提供的状态栏的消息提示机制，是处理多应用push信息的一个十分创新的设计，可以说是android系统的最佳设计。用户可以在任何界面中，快速的向下拨动状态栏呼出信息list，也可以再向上拨动手指收起提示信息。但是，在最近看到的iOS5上也看到了它的更新特性中，这一点就赫然在列。所以，有好的特性，不同的平台也会相互学习。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; iOS上也有它的创新提示，就是在程序图标上来进行新消息数量的提示，这在后面的几个平台上都有应用，只是不同的平台上，表现形式略微不同，就是视觉上微创新。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Windows Phone 7 提供了tile形式的提示信息显示方式，那只是样式上的不同，在设计的本质上，差异不大。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">具体可以参见钟磊的博文，《<a style="color: rgb(0,100,177); text-decoration: underline" href="http://www.kevinzhong.com/notification-of-the-most-used-mobile-paltforms/">手机系统消息通知设计的整理和分析</a>》</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><span style="color: rgb(255,102,0)">3. 移动应用在多平台适配的原则</span></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 一个产品的规划，很少会仅局限于某一个平台，都会进行跨平台的适配。那应该如何进行适配呢？</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 这里主要有两个观点，以设备为中心来设计还是以应用为中心来设计；以设备为中心的设计师认为，应用界面应该与设备的设计规范保持一致，让用户快速上手，不觉得陌生。以应用为中心的设计师认为，保持所有的平台上的一致性，同时，很多多平台的应用开发工具也是为开发人员提供了多平台界面移植的便利，但是对用户体验是否好，却有待思考。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">在多平台适配中遵循如下原则</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">1）&nbsp; 客户端的设计规范应该以平台规范为基础</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">2）&nbsp; 在多平台中，应保持统一的品牌标识，包括logo，视觉风格，核心功能点等等。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">3）&nbsp; 更多地与平台的特性相融合，运用平台提供的特色功能，来减少用户的输入或者其他体验提升点。如拍照输入，传感器的使用等。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">每个平台都需要注意的问题有：</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">1）&nbsp; 移动的特性决定了手机信号的强弱不均，如何处理在弱信号下的设计？</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">2）&nbsp; 需要考虑在断网情况下，如何快速恢复中断？</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">3）&nbsp; 如何设计手机推送的问题？</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">4）&nbsp; 如何尽量避免手机的固有限制，如屏幕小，输入不方便，电源紧张等？</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">5）&nbsp; 如何尽量通过手机的特有特性来提升体验，如各类传感器，声音提示等？</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px"><span style="color: rgb(255,102,0)">4. 后记</span></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 当我从3月份拟好提纲写这几篇文章到现在，不过短短几个月时间，各大公司的移动平台就都推出了新的版本，对平台特性总结的速度有些赶不上平台更新的速度。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 从本质上说，iOS是一个开创性的设计，也引发了客户端的高潮，其他的平台还没有脱离iOS的痕迹，虽然各大公司都在努力创新，形成自己的风格，但是还远没有到开创、革命的程度。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 除了这三大平台外，Blackberry，Palm WebOS也都在发布新品，体验也不逊色与三大平台，在客户端的设计上，非常值得大家更多地研究一二，说不定哪天主流平台就把他们的有点给抄了，你也是在为你的新设计做知识储备。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 从客户端的交互设计上来说，我们要做的是如何发挥平台的特性上的设计优点，把客户端的体验去做好，而不是去改变平台的设计特性。所以，做客户端设计的设计师，需要时刻关注平台特性的更新，这都是你提升客户端体验的契机。<span id="_marker">&nbsp;</span></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 15px 0px; padding-top: 0px">&nbsp;</p>]]></description><category>移动应用</category><comments>http://www.vvwww.com/post/mobile_app238/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=238</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=238&amp;key=9e0991ab</trackback:ping></item><item><title>Pew：社交网络是如何影响我们生活的？</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss237/</link><pubDate>Wed, 29 Jun 2011 01:38:17 +0800</pubDate><guid>http://www.vvwww.com/post/rss237/</guid><description><![CDATA[<p>&nbsp;</p><div><span class="Apple-style-span" style="color: rgb(61, 61, 61); font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; ">Pew最近发布了一份针对社交网络的报告&mdash;&mdash;社交网络和我们的生活（social networking and our lives），在这个报告的调查样本中，有以下一些数据（更多信息点这里<a href="http://pewinternet.org/~/media//Files/Reports/2011/PIP%20-%20Social%20networking%20sites%20and%20our%20lives.pdf" style="color: rgb(34, 102, 187); text-decoration: none; ">下载报告全文</a>&nbsp;。）：</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><strong>只有13%的sns用户使用twitter</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><strong><img class="alignnone size-full wp-image-44152" title="sns网站年龄分布" src="http://www.socialbeta.cn/wp-content/uploads/2011/06/sns%E7%BD%91%E7%AB%99%E5%B9%B4%E9%BE%84%E5%88%86%E5%B8%83.png" alt="" width="573" height="300" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 100%; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); " /></strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; ">有79%的美国成年用户上网，接近一半（47%）成年人口数和59%的互联网用户至少使用一个社交网络，这个数据是接近2008年的一倍，这组数据在2008年分别是26%和34%。而92%的sns用户都在facebook上，而只有13%的sns用户使用twitter。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><strong>每天的facebook</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; ">-15%的facebook用户每天更新状态；<br />-22%的facebook用户会评论其他用户的帖子或者状态；<br />-20%的facebook用户会 评论其他用户的图片；<br />-26%的facebook用户会&ldquo;喜欢&rdquo;其他用户的发布的内容；<br />-10%的facebook用户会发送私信给其他用户；</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><strong>facebook用户中只有7%的好友完全未曾见过面</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><strong><img class="alignnone size-full wp-image-44153" title="facebook好友类型数据" src="http://www.socialbeta.cn/wp-content/uploads/2011/06/QQ%E6%88%AA%E5%9B%BE%E6%9C%AA%E5%91%BD%E5%90%8D16.png" alt="" width="508" height="399" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; max-width: 100%; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); " /></strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; ">在这个调查样本中，一个典型的Facebook用户平均拥有229个好友，其中：</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; "><strong>-22%是他们在高中时候认识的；<br />-12%来自亲戚（译者注：extended family&mdash;&mdash;三代、四代甚至五代同堂的家庭，大家庭）；<br />-10%是同事；<br />-9%是大学同学；<br />-8%是家人（译者注：immediate family&mdash;&mdash;自家人，直系）；<br />-7%是在课外活动时候认识的；<br />-2%是隔壁邻居。</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; ">更多信息点这里<a href="http://pewinternet.org/~/media//Files/Reports/2011/PIP%20-%20Social%20networking%20sites%20and%20our%20lives.pdf" style="color: rgb(34, 102, 187); text-decoration: none; ">下载报告全文</a>&nbsp;。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; ">本文链接：<a href="http://www.socialbeta.cn/articles/social-networking-sites-and-our-lives.html" style="color: rgb(34, 102, 187); text-decoration: none; ">http://www.socialbeta.cn/articles/social-networking-sites-and-our-lives.html</a><br />编译：<a href="http://weibo.com/socialbeta" style="color: rgb(34, 102, 187); text-decoration: none; ">@puting</a></p></span></div>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss237/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=237</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=237&amp;key=1da7f48a</trackback:ping></item><item><title>产品经理常犯的错误总结</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss236/</link><pubDate>Thu, 26 May 2011 18:15:12 +0800</pubDate><guid>http://www.vvwww.com/post/rss236/</guid><description><![CDATA[<p><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; "><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">1</b><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">、想当然。</b><br />这个是产品经理经常所犯的最大错误了。我们接到一个需求，我们想了想，然后就认为自己想的是对的。因为我们用过很多同类产品，想过很多类似的事情，等等。我们也想去做市场调查，但漫长而经常不靠谱的市调结果，往往让我们更加不知所措。所以我们反思：除了想当然我们还能干嘛？也就只能想当然了。<br />为了不让自己想当然，我们找目标用户听取需求，我们绘制用户模型，我们头脑风暴，我们力争让自己的每一步都显得比较靠谱，希望最终的结果证明我们不是在想当然。唉，我们不容易啊。<br />当然，我们都不想想当然。如何去除在项目初期的想当然成份，就是产品经理的巨大课题。<br /><br /><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">2</b><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">、沟通不足。</b><br />产品经理，作为一款产品的精神领袖，我们需要把我们的想法，让团队中的每一个人都清清楚楚明明了了。这时，沟通显得极为重要。你做了PPT、写了文档、文档中图文并茂还配了音频视频；你一而再再而三地开会，你每时每刻都在强调产品的核心功能与特色功能。但你无数次悲哀地发现：漏斗原理绝对是特么的真理。甚至你无可奈何地想起存在主义的信条：他人即地狱。<br />是的，没有人能完全了解另一个人。幸好，做一款优秀的产品不需要完完全全了解你Team中所有人。沟通本身是有很多技巧的，每个人都可以学会。<br />呃，其实沟通有件法宝。那就是，永远不要觉得自己牛逼而别人傻了吧叽。倾听一直比表达重要。<br /><br /><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">3</b><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">、忽视原型。</b><br />我倾向于任何产品，都需要有原型阶段。原型阶段是个思维和验证阶段。最近两三年的经验是，我们大家都知道做原型，但原型并没有发挥出真正的用途，没有让我们发现产品中潜在的问题。每当这时，我就无比崇拜那些独创出游戏门类的人象宫本茂、席德&middot;梅尔、彼得&middot;莫里纽克斯等人。只有好的、彻底的、令人兴奋的原型，才能让他们成就万千玩家的欢乐。<br />原型不是用来交差的啊XD。<br /><br /><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">4</b><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">、需求变更。</b><br />人无完人，我们更不可能强求每个人都是伟人。所以，我们也有犯错的时候。我们经常会发现自己想错了，我们需要改变原来的需求。但是，在原型阶段之后步入实施，也就是思考阶段完毕进入构造阶段，需求真的已经不是我们一个人的事儿了，你这一拍脑袋，设计师、前端、后端、UE都得跟着你变啊XD。据不完全统计，所有失败的产品，60%的原因是需求变更太频繁导致实施人员心灰意冷无以为继。<br />做产品跟建房子真的就是一回事。当你画完建筑图纸，然后开始施工了。这时你想把卫生间从东移到西把书房从南移到北，嘿，还真不是件简单的事情。<br />当然不是说不能变。我相信认真负责的产品经理，需求越变更未来产品会越好。但不能太随意了。<br /><br /><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">5</b><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">、老板说⋯⋯</b><br />对产品经理来说，有一种灾难，叫&ldquo;老板说&rdquo;。老板说不喜欢红色。老板说这产品是给老年人用的。老板说登录框放到左边很醒目⋯⋯<br />世界上最可怕的人是什么？是老板。谁都有老板。但懂得和老板打交道的产品经理才能成功。<br />老板要面子，但老板更想赚钱。显而易见的是，你的产品不都是做给你老板用的，所以大多数产品经理在&ldquo;老板说&rdquo;之后，或者变了需求，或者偏了方向，或者改了进度，或者啥啥啥的。<br />你要想当个成功的产品经理，学会怎么听从&ldquo;老板说&rdquo;，或者学会怎么与老板打交道，是个非常重要的本领。<br /><br /><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">6</b><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">、未能有效地整合资源。</b><br />我把所有你在项目行进过程中，所要调配的人力、物力都叫作资源。你最头疼的肯定是人员问题了。那位程序员死活听不懂你的话。那位设计师一直对你铁青着脸。而你觉得他们能力真的有问题。你想换成配合更默契的人。你得找人事经理，或者直接找老板。你能否成功，就归结为你的资源整合能力怎么样。<br />或者是，当你做到半道，你的产品不被大家看好，上司不愿再继续了。能否说服上司对项目进行持续投入，这也是资源整合的能力之一。<br />据不完全统计，所有失败的产品，90%的原因归结为资源整合不到位。<br /><br /><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">7、靠谱的项目周期。</b><br />老板总希望第二天早上醒来就发现项目已完成，开始赚钱了。产品经理希望第二天早上醒来，项目的里程碑已经圆满。但希望不是现实，愿望只是愿望。大多数产品经理在既定的时间点上，看不到应该看的东西。Delay是我们永恒的宿命。<br />每当你陷入拖期的烦恼时，你该明白，你团队中的伙伴们，谁都不希望拖期，谁都知道青春无比宝贵。项目管理的精华就是资源管理，而时间是最可宝贵的资源。<br />如果你开始了一个新项目，那我建议你一定要把周期分得细之又细，并在每个验证点仔细验证。如果你的项目现在拖期，不必烦恼，只要团队中每一分子都有求胜欲望，那很快会靠谱起来。<br /><br /><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">8</b><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">、直视产品品质。</b><br />绝大部分产品，尤其是互联网类的，产品不是做完了就完了；还必须在交付运营的过程中，进一步验证、改造，提升产品的质量。<br />最糟糕的情况莫过于，当你的产品一上线，用户蜂拥而至，又一哄而散。据不完全统计，80%跳楼的产品经理都是因为这个原因。剩下的20%很坚强，他们顶住了压力，从另外一个角度来反观产品，分析数据，说服团队积极面对快速行动，然后把用户又感召回来了。<br />当然大多数产品都是上线后无人问津。大概念上的产品经理也需要对此负责。而不幸的是，很多产品经理在这时候退缩了，不敢担责任。遥想当年，当我的团队承受这种压力时，那几个跟着我的兄弟，纷纷提出辞职，整得我仰天长笑壮怀激烈。<br />其实，反思我们的产品为什么赢不来用户，这样的过程会让我们成长得更快。别怕总结教训，别怕失败，别怕面对过去。<br /><br /><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">9</b><b style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-style: none; outline-width: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; word-wrap: break-word; background-position: initial initial; background-repeat: initial initial; ">、有效学习。</b><br />很多产品经理，当他们做成了一款或者两款或者更多的产品之后，他们往往固守成功，忘记了进一步学习。即便他们认为自己是在学习，那也是在学习如何让自己已经有的经验成为牢不可破的教条。咳咳，其实没有比这更可怕的事情了。你想想，为神马拥有那么多优秀产品的微软会在网络时代行走艰难？<br />有则你肯定听过的寓言，关于空杯的。如果我们想一直在产品这条线上走下去，嗯，要保持有一颗空灵的心，天真而好奇，永远不认为自己是对的，永远做好迎接新知识新理论的准备。还有，永远不要再说永远！<br /><br />我原本列的提纲中有16点，经过浓缩排重，就只剩下了这9点。完全避免这9个问题谈何容易。但我们可以用来警醒自己：别再犯二了。<br /><br />共勉。</span></p><p>来自 知乎 &gt; &nbsp;<span><a href="http://www.zhihu.com/people/anchor" title="李安科" style="outline-style: none; outline-width: initial; outline-color: initial; text-decoration: none; color: rgb(16, 92, 182); ">李安科</a></span></p><p><a href="http://www.zhihu.com/question/19668599">http://www.zhihu.com/question/19668599</a></p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss236/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=236</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=236&amp;key=1f7f3b52</trackback:ping></item><item><title>交互设计师PK产品经理</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss235/</link><pubDate>Tue, 24 May 2011 23:29:04 +0800</pubDate><guid>http://www.vvwww.com/post/rss235/</guid><description><![CDATA[<p><span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 14px; line-height: 25px; "><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><b>摘录&nbsp;</b><strong style="font-weight: bold; ">淘宝碳酸饮料会和pmcaff产品经理联合举办《产品经理和交互设计换位思考》话题</strong><strong style="font-weight: bold; ">沙龙总结，有一些思考，他们遇到的问题相信现在阅读这篇文章的同僚们都遇到过，解决办法其实很多，但是最终离不开几点：相互尊重，相互信任，明确需求，沟通一切。</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">个人觉得产品经理更应该去思考产品规划，产品布局和产品运营等比较宏观角度更多一些，而交互设计应该是从产品需求出发，充分理解产品需求和业务方向，从产品功能细节，UE角度柔和用户需求，体验等细节再次细化产品需求提升产品体验的一个过程。当然这些事儿在我们这儿是产品经理全包的，呵呵</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">分享部分内容，希望各位共同思考，共勉~</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">一、 大多数交互设计师，认为产品经理需要：</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">1、学会做人&mdash; 尊重是第一，不管你能力或强或弱。；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">2、信任团队&mdash; 很大交互细节，可以让专业的人操心；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">3、擅长沟通&mdash; 要做啥，为什么做啥，多讲讲，讲清楚；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">4、了解业务&mdash; 了解透业务、抽象好需求，大家更认同；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">二、大多数交互设计师，认为产品经理最容易犯的毛病：</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">1、需求不靠谱，没有想清楚，老是改来改去；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">2、日常工作中，对交互细节过多的指指点点；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">三、大多数产品经理，认为交互设计师需要：</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">1、完善技能&mdash; 得非常了解用户的操作习惯、体验感受；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">2、专注坚持&mdash; 有强烈的欲望，不断的精益求精；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">3、增加视野&mdash; 改善信息对称，了解业务向上走；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">4、学会平衡&mdash; 兼顾商业求快（利益）和追求完美（体验）之间的平衡；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">四、大多是产品经理，认为交互设计师最容易犯的毛病：</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">1、思维零散&mdash; 对业务的态度：质疑、抱怨多，但建议、方案少；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">2、定位局限&mdash; 把自己定位为&ldquo;工匠&rdquo;，没有和业务线同床同梦；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">五、绝对性偏向的问题，其实很难回答。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">1、什么是交互设计师？</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">2、什么是优秀的产品经理？</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">3、什么是成功的产品？</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">4、如何界定一个好的交互产品的边界？</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">道理大家都明白，但我们在不同环境、不同场景、不同阶段，所以只能是仁者见仁，更多的是给大家一起点启发。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">六、点睛之笔，最大最大的收获。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">1、不应该是PK，而是拉手&mdash; 大家最后对于活动海报的认同出奇的一致；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">2、不应该是互责，而是包容、理解，以开放学习的心态立足平时，放眼未来；</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">虽然这次沙龙结束了，但是关于这个话题的讨论和思考仍在继续。。。</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">以下是刚毕业新入职的一位交互设计师（崇禧&nbsp;）在听完这次沙龙后的一些感想：</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">交互设计师需要具备的素质：</strong><strong style="font-weight: bold; ">A</strong><strong style="font-weight: bold; ">懂用户、</strong><strong style="font-weight: bold; ">B</strong><strong style="font-weight: bold; ">懂业务、</strong><strong style="font-weight: bold; ">C</strong><strong style="font-weight: bold; ">懂数据</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; "><br />A</strong><strong style="font-weight: bold; ">懂用户：</strong><br />作为交互设计师的我们坚持以为用户提供最好的体验为准则，我们都意识到用户体验是产品获得成功的一个重要环节，但是也需要认识到这并不是产品的全部。我们一直在说要读懂用户，理解用户，我们经常会用同理心去分析用户会不会去怎么怎么操作，会不会有没有某个需求。但是，渐渐发现&ldquo;理解用户&rdquo;需要考虑环境和时间的变量，用户所处的环境、应用的时间。<br />&ldquo;为用户提供最好的体验&rdquo;这个话需要辩证的去理解，对不同的用户，不同的环境、不同的时间，提供&ldquo;合适&rdquo;的体验，这更符合用户的需求、产品规划的需求。其实我们也是在这么做的、淘宝的很多应用有不同的版本，满足不同用户不同的需求。<br />其次，设计师大都有一种完美情节，会把各种最优的想法在一个产品中一股脑儿的呈现，但是有时候过早提供一个我们觉得完美体验的产品，不一定就符合用户的需求，我们需要考虑在目前这个时间点上用户最需要什么，将来的时间点上，用户还需要什么。<br /><strong style="font-weight: bold; "><br />B</strong><strong style="font-weight: bold; ">懂业务</strong><br />懂业务不能仅仅看到业务的现状，还需要往前看、往后看，看该业务的过去、看该业务将来的规划。这个时候需要交互设计师跳出设计这个部分，从更高更全面的角度去思考产品，要理解产品的商业逻辑，只有理解了产品的商业逻辑才能更好的将背后的逻辑和目的通过合理的交互形式进行呈现。越早介入产品的规划，有助于设计师更好的理解产品的规划，也有助于更好的明确用户群体，理解用户需求。<br /><strong style="font-weight: bold; "><br />C</strong><strong style="font-weight: bold; ">懂数据</strong><br />需要重新思考什么是懂数据。数据可以挖掘用户的需求，过滤产品的功能，反映产品的成败，数据也是交互设计师和产品经理沟通的重要工具，有时候我们会问产品经理这个需求，这么设计产品有没有相关的数据支持？这些固然是对的，但是渐渐也意识到数据不能反映一切。数据不一定就能发现有价值的潜在需求，数据在事后分析一个产品时，通常显得很有说服力，但是当需要预测一个创新产品的走向时，就不总是准确的了。苹果公司的成功固然有数据分析的成功，但是绝不仅仅只是靠分析数据成功的，苹果的产品总规划师乔布斯的成功不仅仅只是数据积累而成的。我坚定认为数据是重要的，但是我们需要抱着一种客观的心态去看待数据，产品经理的作用，不仅仅是分析数据。不同的产品需要从不同的角度去看待数据，我们需要用数据和产品经理保持有效的沟通，但是也需要客观评价产品经理对那些新生产品的设计，不能因为没有数据或者数据不全就产生抵触的情绪。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">除了这三点之外，再补充一点关于沟通的理解。<br />无论是产品经理还是交互设计师，每个人都很容易说这里或者那里不好，但是那些优秀的人都在指出问题之后给出自己的解决方案。大家都是为了同一个目的，为用户设计优秀的产品，大家都为产品的成功而努力，我们需要为自己的意见多思考一步，问问自己，解决方式是什么呢？<br />看到彼此的长处和优点，争论的目的在于解决问题，而绝不是为了捕捉对方话语中的漏洞。变质的争论是没有意义和价值的。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>最后，相互信任很重要，引用一句话：</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong>&ldquo;信赖，往往创造出美好的境界。&rdquo;&ndash;冯骥才。</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><b><br /></b></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; "><a href="http://v.youku.com/v_show/id_XMjY1OTQ5NTI4.html" style="text-decoration: underline; color: rgb(0, 100, 177); ">沙龙视频</a>：</strong><a title="阿里旺旺无法确定该链接的安全性" href="http://v.youku.com/v_show/id_XMjY1OTQ5NTI4.html" target="_blank" style="text-decoration: underline; color: rgb(0, 100, 177); ">http://v.youku.com/v_show/id_XMjY1OTQ5NTI4.html</a></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span class="Apple-style-span" style="font-family: Arial, Verdana, sans-serif; font-size: 12px; line-height: 19px; color: rgb(0, 0, 0); ">转自：淘宝UED</span></p></span></p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss235/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=235</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=235&amp;key=8d2487ca</trackback:ping></item><item><title>产品经理共勉 - 转【周鸿祎】如何做一个优秀的产品经理</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/rss234/</link><pubDate>Fri, 22 Apr 2011 23:06:00 +0800</pubDate><guid>http://www.vvwww.com/post/rss234/</guid><description><![CDATA[<p jquery1299681406609="64"><img alt="" src="http://www.vvwww.com/upload/PM-Software01.gif" /></p><blockquote><p jquery1299681406609="64">&nbsp;<span style="color: #008080">读后小感：这篇文章有很多共鸣和警示的地方，做产品如何做的优秀？如何能做个优秀的产品经理？大家总结的很多很多，我觉得真正需要思考的是为用户需求去设计产品而不是为了设计而去做产品,借用文中的语言&lt;心里要有一个&ldquo;大我&rdquo;和一个&ldquo;小我&rdquo;&gt;, 让我们一起共勉！</span></p></blockquote><p jquery1299681406609="64">现在，互联网公司里开始重视产品经理了，这是一个好事。以前互联网谈融资，谈商业模式，谈战略，很少有谈产品的，因为产品可以从国外抄，谁下手快谁就能获得先发优势。现在，互联网里的资本已经不成问题，抄袭速度都一样快了。这个时候，互联网比拼的就是谁能更好的理解用户需求，比谁能做出比别人更好的产品。此时，产品经理的作用至关重要。</p><p jquery1299681406609="65">那么，怎样才能成为一个优秀的产品经理？或者说，一个优秀的产品经理需要具备哪些素质？</p><p jquery1299681406609="66">一个产品没做好，原因可能很多，比如说功能做得太多，或者定位不清楚。这些原因都容易看出来，给产品经理指出来。但是，原因背后的原因如果找不到，产品经理就会犯同样的错误，那也意味着根本不会成为一个优秀的产品经理。</p><p jquery1299681406609="67">从我个人的经历来看，要成为一个优秀的产品经理，必须在心里要有一个&ldquo;大我&rdquo;和一个&ldquo;小我&rdquo;，可能你要经历这两个过程的磨练，才能找到原因背后的原因。</p><p jquery1299681406609="68"><strong>什么是&ldquo;大我&rdquo;？我的意思是，一个产品经理要把自己当成CEO</strong>。在《兄弟连》里面的连长的绰号就是CEO。产品经理要对一个产品负责，虽然挂的是经理的头衔，但行驶的是总经理的职责。因为要对产品负责，产品经理还要经常去协调很多部门，要去推动很多不归他管的人和事，比如要跟设计打交道，要跟技术打交道，要跟测试打交道，还要去了解用户的想法，还要去跟市场谈支持。产品经理要操的心，一点也不比一个总经理少。所以，我说一个优秀的产品经理首先要把自己当成一个CEO，既要负责执行、推动（Executive），也要负责用户体验（Experience）。可能别人不拿你当回事，但你自己心里的有一个&ldquo;大我&rdquo;。你对一个产品负责，你的title不重要，但是你一定要把这个责任担负起来。</p><p jquery1299681406609="69">所以，优秀的产品经理不必在意今天管了多少人，不必在意自己的头衔是高是低，关键最是你能不能利用公司里的资源，不管采用什么手段，最后做出来一个好产品。上亿的用户选择使用你做出来的产品，就是对产品经理最大的认可。在其他相同的条件下，你做的产品有上亿用户用，他做的产品只有几百万人用，那么你就比他要优秀。</p><p jquery1299681406609="70">可能你会说，我是想做一个优秀的产品经理，但我太年轻，没什么资历。我觉得，产品经理要非常自信，你要有这种气势。如果没有这种自信和雄心，我建议你也别干产品经理了。十多年前，我在方正集团，只是一个很不起眼的产品经理，别人都说：&ldquo;周鸿祎这个人怎么看起来成天牛哄哄的，整天胸怀世界，天天跟老板似的？&rdquo;他们说得没错，那个时候我觉得我就是老板，是我自己的老板。</p><p jquery1299681406609="71"><strong>一个优秀的产品经理心中有&ldquo;大我&rdquo;，但同时还得不断地&ldquo;小我&rdquo;，甚至要&ldquo;忘我&rdquo;。</strong>这就是说，产品经理要忘掉自己。根据我的经验，产品经理最容易犯的几个错误，包括今天我都还在犯，就是<strong>产品做着做着，就不是给用户做产品，而是给自己做产品，给同事做产品，给领导做产品了。</strong></p><p jquery1299681406609="72">所以，产品经理心中要做到&ldquo;小我&rdquo;，甚至&ldquo;忘我&rdquo;，就是产品经理必须身临其境，把自己当成一个典型用户，让自己精神分裂，这样才能体会用户心中真正的想法和需求。</p><p jquery1299681406609="73">举一个例子。我是技术出身，做了这么多年的客户端软件，我相信任何客户端软件到我手里，解构起来都不是难事。但是，我可以告诉大家，360的产品到我手里来用就会出问题。为什么？因为我只要一用产品，我马上就会变成另外一个&ldquo;周鸿祎&rdquo;，一个对电脑一窍不通、非常急躁、乱敲键盘的&ldquo;周鸿祎&rdquo;，这样一搞，很多程序没走几步就死机了。</p><p jquery1299681406609="74">有的人可能会笑，但我告诉你，用户就是这么急躁，就是这么没有耐心，就是这么乱敲乱点。用户用你的产品，是为了完成任务的，不是为了了解背后复杂的技术的。而且，他有意见也不会向你反映，直接卸掉了事。但是，如果一个产品经理不能放下自我，没有&ldquo;小我&rdquo;，或者说没有&ldquo;忘我&rdquo;，他怎么会做出一个用户喜欢的产品出来呢？</p><p jquery1299681406609="75">怎么才能练就出&ldquo;小我&rdquo;，甚至达到一种&ldquo;忘我&rdquo;的境界呢？我做产品的时候，也没有人指导，完全靠摸索，实际上是因为做失败的产品比大家多，挫败感多，因此感悟多，思索多，总结多。比如，我在读研究生的时候，做防病毒卡，拿出去卖。结果，有时候会接到用户电话，被用户骂。像我这样的技术人才，被用户骂，那也没办法。那个时候，我感觉到原来用户想法跟我的想法是不一样的，做产品不能给自己做而是给用户做，这是一个很简单的道理。</p><p jquery1299681406609="76">有时候，产品经理做出产品来，不是为自己，而是为公司，这也是要不得的。我们经常可以看到，某个公司做一个产品，是因为公司需要，而不是用户需要。公司需要做某个产品，目的不是服务用户，而是服务公司。我曾经看到一家大型的互联网公司做的关于怎么做IM的报告。50页的PPT，从头到尾就在谈这个IM做好了，对这个公司的业务有什么样的帮助，但却没有说明这个产品到底要满足用户的哪些需求。</p><p jquery1299681406609="77">所以，一个优秀的产品经理，当你能够调动公司的资源做产品的时候，一定要避免我提到的这种陷阱。这种陷阱有时候我自己还会掉进去，只不过我会经常提醒自己要警惕，所以还能爬出来。</p><p jquery1299681406609="78">其实，我从事互联网行业这么多年，也做出了一些大家还觉得不错的产品，但有时候回过头去想一想，其实发现里面有一些是运气的成分，是不自觉地在正确的时间做了一件正确的事。</p><p jquery1299681406609="79">很多做产品的感悟，实际上是在失败中磨练出来的。比如，最近我一直在感慨：乔布斯其实犯过错误。佛法里说，人是贪、嗔、痴的，贪是每个人的本性。所以，公司的CEO总是喜欢开发新产品，产品经理总是喜欢给产品增加新功能。在PC时代，乔布斯要打败微软，什么都做，但是遭遇到很多挫折。但当他上了一定岁数，重新回到苹果做iPod的时候，每个阶段他只是专注在一个产品上。乔布斯对新事物可能不像年轻人那样敏感，他的创造力可能没有年轻人那么锐利，但是他找到了感觉，找到了正确的方法，结果取得了巨大成功。</p><p jquery1299681406609="80">怎么样做一个优秀的产品经理？这个话题其实蛮复杂，我希望业界能够多讨论，因为只有出现更多的优秀的产品经理，中国互联网才能产生更多优秀的产品。要知道，产品是互联网发展的基础，离开这个基础，谈虚的，谈大的，都没用。我也希望每一位产品经理，不管是在哪个公司，不管你是不是与360竞争，不管你是不是喜欢360和周鸿祎，看到这篇文章后，都能够以自己身为一个产品经理为骄傲，能够有一个充满自信的&ldquo;大我&rdquo;，同时又有一个以服务用户为本的&ldquo;小我&rdquo;。</p><p jquery1299681406609="81">做出一个好产品，千万用户用，上亿用户用。别人怎么看你的头衔，不重要。<strong>能否做出一个好产品，很重要，因为这是检验一个产品经理是否优秀的唯一标准。</strong></p><p>&nbsp;</p>]]></description><category>网文摘录</category><comments>http://www.vvwww.com/post/rss234/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=234</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=234&amp;key=cf7f9914</trackback:ping></item><item><title>3天内构建Facebook Web应用的经验之谈[转]</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/mobile_app233/</link><pubDate>Wed, 09 Mar 2011 23:35:05 +0800</pubDate><guid>http://www.vvwww.com/post/mobile_app233/</guid><description><![CDATA[<p>mars: 这个有点意思，像非诚勿扰II, 有搞头....</p><p><span>近期在微博上有朋友推荐了一个</span><span lang="EN-US">Facebook</span><span>创意应用</span><span lang="EN-US">Crush  Notifier</span><span>（爱情通知）。其基本规则是：</span><span lang="EN-US">1</span><span>、 提交你喜欢的异性（对方不会收到）；</span><span lang="EN-US">2</span><span>、如果对方也将你列为喜欢的对 象，你们俩就会同时收到通知。</span><span lang="EN-US">3</span><span>、</span><span>每人仅能 免费</span><span lang="EN-US">2</span><span>次。</span><span>这个应用像该应用作者之前的一款 产品</span><span lang="EN-US">Breakup Notifier</span><span>（分手通知，该应用上线</span><span lang="EN-US">72</span><span>小时用户量接近</span><span lang="EN-US">370</span><span>万） 一样在</span><span lang="EN-US">Facebook</span><span>上火速窜红。</span></p><p align="left" class="MsoNormal"><span>&nbsp;&nbsp; &nbsp;下面我翻译了一个和这个应用非常类似的应用</span><span lang="EN-US">adore.ly</span><span>作者一篇关于</span><span lang="EN-US">Facebook  Web</span><span>应用开发心得的文章，希望能带给应用开发者一些帮助和启迪。</span></p><p align="left" class="MsoNormal"><span>&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;</span></p><p align="left" class="MsoNormal"><span>原文地址：</span><span lang="EN-US"><a href="http://tilomitra.com/what-building-and-releasing-a-web-app-in-3-days-taught-me/">http://tilomitra.com/what-building-and-releasing-a-web-app-in-3-days-taught-me/</a></span></p><p align="left" class="MsoNormal"><span>原文作者：</span><span><span lang="EN-US">Tilo Mitra</span></span></p><p align="left" class="MsoNormal"><span><span>译者：蒋宇捷（</span></span><span>http://blog.csdn.net/hfahe</span>）</p><p align="left" style="margin: 0px; padding: 0px;" class="MsoNormal"><span lang="EN-US"><span style="font-family: mceinline;">&nbsp;</span></span></p><p align="center" style="margin: 0px; padding: 0px;" class="MsoNormal"><span style="font-family: mceinline;"><img alt="" src="http://hi.csdn.net/attachment/201103/6/0_12993899177fgE.gif" /></span></p><p align="center" style="margin: 0px; padding: 0px;" class="MsoNormal"><span style="font-family: mceinline;"><br /></span></p><p align="left" style="margin: 0px; padding: 0px;" class="MsoNormal"><span style="font-family: mceinline;">&nbsp;&nbsp; &nbsp;</span><span><span>最近，我和我的两个朋友发布了</span><span lang="EN-US">adore.ly</span><span>网站，一个基于</span><span lang="EN-US">Facebook</span><span>的</span><span lang="EN-US">Web</span><span>应用，允许你&ldquo;爱慕&rdquo;其他人，但是你的身份不会暴露，除非他们也对你表示&ldquo;爱慕&rdquo;。这个应 用程序上线了几周时间，现在我有一个机会好好思考和沉淀我做了些什么、哪些做对了，而哪些又做的不够好。这篇文章记录这些想法，并为其他准备在</span><span lang="EN-US">Web </span><span>应用上有所收获的同学们分享一些经验。</span></span></p><p align="left" class="MsoNormal"><strong>经验一：快速开始</strong></p><p align="left" class="MsoNormal"><span><span>&nbsp;&nbsp; &nbsp;</span>我们在华盛顿大学进行的</span><span lang="EN-US">Facebook hackathon</span><span>（</span><span lang="EN-US">hackathon</span><span>是 指开发人员拿出几天或是一周的时间，通过协作方式集中攻关某一项目的方式）期间构建了我们应用的大部分功能。</span><span lang="EN-US">24</span><span>小时的编码和头脑风暴后，我们完成了一个粗糙的版本并呈现给用户。随后的一周我们开始打磨应 用，在前台方面花了更多的时间。我们基本上在</span><span lang="EN-US">7</span><span>天内构建了</span><span lang="EN-US">adore.ly</span><span>。</span></p><p align="left" class="MsoNormal"><strong>经验二：发布，然后修复</strong></p><p align="left" class="MsoNormal"><span><span>&nbsp;&nbsp; &nbsp;</span>很容易发现我们应用里的缺陷，将 发布日期推迟很久曾经是摆在我们面前的诱惑。但是，立即发布它是我们曾经做过最正确的事情。从我们知道用户开始访问这个站点后，我们修复缺陷和迭代得更快 了。</span></p><p align="left" class="MsoNormal"><span><span>&nbsp;&nbsp; &nbsp;</span>小小的警示：我们在</span><span lang="EN-US">2</span><span>月</span><span lang="EN-US">7</span><span>号发 布，</span><span lang="EN-US">2</span><span>月</span><span lang="EN-US">8</span><span>日 发表在</span><span lang="EN-US">Hacker News</span><span>（</span><span lang="EN-US">Y Combinator</span><span>旗下的一个新闻频道，属于</span><span lang="EN-US">Digg</span><span>类产品）和</span><span lang="EN-US">Reddit</span><span>（也 是</span><span lang="EN-US">Digg</span><span>类型网站）上，拥有不错的反响。事后才明白，等到</span><span lang="EN-US">2</span><span>月</span><span lang="EN-US">14</span><span>日情 人节可能会更好。</span></p><p align="left" class="MsoNormal"><strong>经验三：并不只有代码<span lang="EN-US">-</span>还 有思想</strong></p><p align="left" class="MsoNormal"><span><span>&nbsp;&nbsp; &nbsp;</span>我想我们并没有做到和预期一样 好。我们事先认为在</span><span lang="EN-US">Facebook</span><span>上从朋友那儿收到匿名的爱慕信息应 该并不是一件让人厌恶的事情，因为他们是你熟悉的人。我们只猜对了</span><span lang="EN-US">60%</span><span>。 男生们支持我们，但是一些女生并不。结果这些女生并不想发送她们爱慕的人，或者不对她们收到的爱慕信息进行回应。</span></p><p align="left" class="MsoNormal"><span><span>&nbsp;&nbsp; &nbsp;</span>这里我想指出的关键点是，就用户 的思想而言，了解他们的心理，考虑你的应用是否在他们可以接受的范围内。</span></p><p align="left" class="MsoNormal"><strong>经验<span lang="EN-US">4</span>： 了解你的市场</strong></p><p align="left" class="MsoNormal"><span><span>&nbsp;&nbsp; &nbsp;</span>拥有市场和目标用户是一回事。这 种事是每一个应用必须要考虑的</span><span lang="EN-US">-</span><span>否则你构建它的目的何在？例如，</span><span lang="EN-US">adore.ly</span><span>背后的创意是，可以在高中或者更保守的国家（例如印度）里病毒性传播，但是我们 并不能确切的知道如何可以影响到这些用户。通常大多数高中学生并不阅读</span><span lang="EN-US">Hacker News</span><span>、</span><span lang="EN-US">TechCrunch</span><span>或者科技博客。他们上</span><span lang="EN-US">Facebook</span><span>和</span><span lang="EN-US">Twitter</span><span>，但是这个年龄段的人并不在我们的好友圈里。我想接下来可能更重要的是运气。</span></p><p align="left" class="MsoNormal"><strong>经验五：有一个全能的小组</strong></p><span><span>&nbsp;&nbsp; &nbsp;</span>我们真的做的不错。我们有两个程序员：我和维克多，还有金飞负责商务和营销。维克多是后台的负责人，</span><span lang="EN-US">Python</span><span>编码相当快速。我主要负责整个前端。每个人有明确的职责是相当有用的，因为我们确切 的知道我们需要做些什么。同时，我们足够小，所以能够相当快速的决策。</span><p align="left" style="margin: 0px; padding: 0px;" class="MsoNormal">&nbsp;</p><p style="text-align: center;"><span style="font-family: mceinline;"><img alt="" src="http://hi.csdn.net/attachment/201103/6/0_1299389936y0b9.gif" /></span></p><p align="center" style="margin: 0px; padding: 0px;" class="MsoNormal">&nbsp;</p><p align="left" style="margin: 0px; padding: 0px;" class="MsoNormal"><span style="font-family: mceinline;"> </span></p><p align="left" class="MsoNormal"><span>&nbsp;&nbsp; &nbsp;有关</span><span lang="EN-US">adore.ly</span><span>的 数据：</span><span><span>目前</span></span><span><span lang="EN-US">adore</span></span><span><span>上 已有超过</span></span><span><span lang="EN-US">50</span></span><span><span>对 配对成功。</span></span></p>]]></description><category>移动应用</category><comments>http://www.vvwww.com/post/mobile_app233/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=233</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=233&amp;key=b506eb3f</trackback:ping></item><item><title>微博应用布局及Twitter代表应用分析[转]</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/mobile_app232/</link><pubDate>Wed, 09 Mar 2011 23:02:04 +0800</pubDate><guid>http://www.vvwww.com/post/mobile_app232/</guid><description><![CDATA[<p>mars: 可供思考，国外微博的应用发展趋势。。。</p><p><span lang="EN-US">2011</span><span>年无疑是个微博发力年，随着众多优秀开发者的涌入，微博开放平台将会涵 盖包括客户端等基本工具、关系链管理、富媒体、社交游戏、生活类、商务类应用等满足用户各种需求的第三方应用。本文结合了</span><span lang="EN-US">Twitter</span><span>现有应用类型对</span><span lang="EN-US">2011</span><span>年 国内微博开放平台第三方应用布局进行了预测，针对各种应用类型分析了</span><span lang="EN-US">Twitter</span><span>较 知名的代表应用。</span></p><p class="MsoTitle">由于目前国内微博应用尚在起步阶段，此列表涉及的很多领域尚无对应的&ldquo;国产&rdquo;应用。期待广大开发者齐心合力完善 此表，在下次我更新时能替代twitter的应用。各位开发者可与我联 系，提供此列表下对应的国内应用案例。</p><p class="MsoTitle"><span><br /></span></p><p><img height="582" width="1024" alt="微博2011第三方应用平台布局预测及Twitter代表应用" src="http://hi.csdn.net/attachment/201103/7/8709810_1299476481zcKC.jpg" /></p><p>&nbsp;</p><p class="MsoNormal"><span><span lang="EN-US"><span><span>继上篇《从</span><span lang="EN-US">&nbsp;Twitter&nbsp;</span><span>应用布局看国内微博应用发展趋势》发表后与一些开发者交流，大家对于国内微博 开放平台都抱有一个共同的态度：对未知领域的密切关注及谨慎观望。往前看</span><span lang="EN-US">Twitter</span><span>成 功的应用不胜枚举，如</span><span lang="EN-US">Tweetdeck</span><span>以</span><span lang="EN-US">3</span><span>千万美元被收购、</span><span lang="EN-US">Seesmic</span><span>三 次融资</span><span lang="EN-US">1</span><span>千</span><span lang="EN-US">6</span><span>百 万美元、</span><span lang="EN-US">HootSuite</span><span>融资</span><span lang="EN-US">190</span><span>万美元等，但在其开放平台巨大光环笼罩着的数量过</span><span lang="EN-US">7</span><span>万的第三方应用中默默无闻的还是占大多数。微博第三方应用将如何发展呢？<span>请关注我的 腾讯微博（</span></span><span lang="EN-US"><a href="http://t.qq.com/sukihow"><span>http://t.qq.com/sukihow</span></a></span><span><span>） 及新浪微博（</span></span><span lang="EN-US"><a href="http://t.sina.com.cn/housusu"><span>http://t.sina.com.cn/housusu</span></a></span><span><span>）， 诸多心得会在后面的文章中陆续与大家分享，谢谢！</span></span></span></span></span></p><p><span><span lang="EN-US">1</span></span><span><span>、</span></span><span><span lang="EN-US">basic</span></span></p><div style="padding-left: 30px;"><table cellspacing="1" cellpadding="1" border="1" width="86%" style="" class="MsoTableGrid">    <tbody>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span lang="EN-US">&nbsp;</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><strong><span lang="EN-US">Twitter</span></strong></p>            <p class="MsoNormal"><strong><span>代表应用</span></strong></p>            </td>            <td width="68%">            <p class="MsoNormal"><strong><span>应用简介</span></strong></p>            </td>            <td width="12%">            <p class="MsoNormal"><strong><span>应用点评</span></strong></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>客户端</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">HootSuite</span></span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span>社交媒体管理平台，采用了<span lang="EN-US">Klout</span>开发 的计算互联网影响力的算法，帮助企业根据其关注者在<span lang="EN-US">Twitter</span>上的影响力来分类这些关注者，更 好地与关注者进行沟通。如果某品牌拥有大量关注者，有助于找出最有用的<span lang="EN-US">Twitter</span>消息或是潜在 客户</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>支持<span lang="EN-US">iphone</span>、<span lang="EN-US">andoid</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Tweetdeck</span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span>很好的与企业服务结合，进行多个帐号管理及提供有针对性的企业服务，该应用服务商已于<span lang="EN-US">2</span>月初以<span lang="EN-US">3000</span>万美元的现金和股票被<span lang="EN-US">UberMedia</span>。类似应用还有<span lang="EN-US">CoTweet</span>及<span lang="EN-US">Salesforce</span>等整合<span lang="EN-US">Twitter</span>的应用都值 得尝试，这是一个拥有大量机会的领域。</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>支持<span><span lang="EN-US">iPhone</span>、<span lang="EN-US">iPod   Touch</span>，</span>最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">2</span>，月独立访客<span lang="EN-US">285,864</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>搜索</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">Twitscoop</span></span></p>            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US"><span>&nbsp;</span></span></span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span><span>提供趋势监控服务，在突发事件的报道中，<span lang="EN-US">Twitter</span>社 区往往会领先传统媒体一大步。而<span lang="EN-US">Twitscoop</span>这类服务即可收集任意时段最受欢迎的<span lang="EN-US">Twitter</span>主题，然后将这些主题以<span lang="EN-US">&ldquo;</span>文字云<span lang="EN-US">&rdquo;</span>的方式组合起来，频率最高的主题会以最大的字号显示。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>支持</span><span><span lang="EN-US">iPhone</span></span><span><span>和<span lang="EN-US"> iPod Touch</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">Twitturly&nbsp;</span></span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span class="MsoHyperlink"><span>列出关于这个话题的所有<span lang="EN-US">Tweets</span>，还包括过去<span lang="EN-US">24</span>小时的<span lang="EN-US">Tweest</span>数，上周总共的<span lang="EN-US">tweets</span>数，过去一个月 的<span lang="EN-US">Tweets</span>数。用户可以据此来判断这个话题的热门程度。还有估算的此话题被阅览的次数（这个貌 似是按照发布此<span lang="EN-US">Twitter</span>用户的<span lang="EN-US">Follow</span>用 户数来估算的）</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span class="MsoHyperlink"><span>最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">6</span>，月独立访客<span lang="EN-US">88,793</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">Monitter</span></span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">Twitter</span></span><span class="MsoHyperlink"><span>关键词实时监测服务，同时搜索<span lang="EN-US">3</span>个关键 词，并且无论何时一个拥有这些关键词的新文章发布，它都能够自动更新。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span class="MsoHyperlink"><span>最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">17</span>，月独立访客<span lang="EN-US">25,433</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>皮肤<span lang="EN-US">/</span>背景</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">TwitBacks</span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span><span>为用户提供个性化的背景服务，可作为一张个性化的名片，利用页面背景来展示自己的工 作地点等信息。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>        </tr>    </tbody></table></div><p align="left" class="MsoNormal"><span lang="EN-US">&nbsp;</span></p><p class="MsoNormal"><span><span lang="EN-US">2</span></span><span><span>、 关系链</span></span><span><span lang="EN-US"><span>&nbsp;&nbsp; &nbsp; &nbsp;</span></span></span></p><div style="padding-left: 30px;"><table cellspacing="3" cellpadding="0" border="1" style="width: 86%;" class="MsoTableGrid">    <tbody>        <tr>            <td width="7%">            <p style="padding-left: 30px;" class="MsoNormal"><strong><span lang="EN-US">&nbsp;</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><strong><span lang="EN-US">Twitter</span></strong></p>            <p class="MsoNormal"><strong><span>代表应用</span></strong></p>            </td>            <td width="68%">            <p class="MsoNormal"><strong><span>应用简介</span></strong></p>            </td>            <td width="12%">            <p class="MsoNormal"><strong><span>应用点评</span></strong></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>找人</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">Twibs</span></span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span><span>针对<span lang="EN-US">twitter</span>上的企 业、服务商和应用而收集的一个商家目录。<span lang="EN-US">Twibs</span>皆在建造一个地方、分类及产品级别的权威平台， 便于人们寻找、跟随甚至与<span lang="EN-US">twitter</span>商家进行沟通</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span><span>最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">18</span>，月独立访客<span lang="EN-US">17,168</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">Twitterholic</span></span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span><span>首页排行榜列出前<span lang="EN-US">100</span>名最 热门的用户，并长期汇总统计数据，通过它可以确切知道用户加入<span lang="EN-US">Twitter</span>的时间以及自加入之日 起他所积累的跟随者的数量。它还会列出跟随者最多的用户并建议其他用户跟随这些热门用户。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span><span>最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">5</span>，月独立访客<span lang="EN-US">147,164</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Follower Wonk</span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span><span>显示多达<span lang="EN-US">3</span>个用户的共同好友 和追随者</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">Mr. Tweet</span></span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span>在寻找志趣相投的用户这方面，<span lang="EN-US">MrTweet</span>被 誉为是最准确的工具之一。你只需在<span lang="EN-US">Twitter</span>上跟随它即可。它会汇总你的各类信息，与其他用户 的相比较，最后为你推荐合适的用户，且详细显示了其<span lang="EN-US">Twitter</span>信息，包括该用户的个人基本信 息、<span lang="EN-US">Following</span>和<span lang="EN-US">Followers</span>数 量、更新频率以及同时<span lang="EN-US">Follow</span>的<span lang="EN-US">Twitter</span>用 户等</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span><span lang="EN-US">&nbsp;</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Twellow</span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span>几乎每个公司都会有一本本行业的黄页，<span lang="EN-US">Twellow</span>就 是<span lang="EN-US">twitter</span>中的黄页，可以在里面很精准地找到你所关注行业的<span lang="EN-US">twitter</span>帐号去<span lang="EN-US">follow.</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span><span lang="EN-US">&nbsp;</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Who   should i Follow<span>&nbsp;</span></span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span>是一个帮助你寻找新的</span><span lang="EN-US">twitter</span><span>好 友的工具<span lang="EN-US">, </span>输入你的<span lang="EN-US">Twitter</span>名称<span lang="EN-US">, </span>它会根据你的<span lang="EN-US">Twitter</span>好友们所关注的人来给 出建议结果名单<span lang="EN-US">, </span>比如某个人被你的<span lang="EN-US">10</span>个<span lang="EN-US">Twitter</span>好友所关注<span lang="EN-US">, </span>就会被建议<span lang="EN-US">.&nbsp; </span>在结果页面还有滑块选项<span lang="EN-US">, </span>你可以通过拖动滑块来 设置关注流行度和所在地域<span lang="EN-US">,</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span><span lang="EN-US">&nbsp;</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong>粉丝管理</strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Tweepler</span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span lang="EN-US">Followers</span>管理服务，可以查看你的<span lang="EN-US">Follow</span>了多少人，列出哪些人<span lang="EN-US">Follow</span>你了而 你还没有<span lang="EN-US">Follow</span>他们的，你可以进行批量处理（选择<span lang="EN-US">Follow</span>）， 可以批量忽略。</p>            </td>            <td width="12%">            <p class="MsoNormal">最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">11</span>，月独立访客<span lang="EN-US">51,304</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">WeFollow</span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span lang="EN-US">WeFollow</span>是一个<span lang="EN-US">Twitter</span>用户目录网站，能动态创建类别，并且告诉你谁将自己归到哪一类中，你也可以查找任何领域内的专家 或者在这些类别中寻找更多值得跟随的人。</p>            </td>            <td width="12%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong>名单管理</strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Listorious</span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span>根据给定的话题发现最好的<span lang="EN-US">Twitter</span>列 表，也可以帮助列表创建者发布他们的列表。<span lang="EN-US">Listorious</span>有很多目录、主题、榜单、标签让你 很容易就找到自己关注的人，你可以<span lang="EN-US">follow</span>他们或是看看他们在哪些列表或是看看他们创建了哪些 列表。</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Twibs</span></p>            </td>            <td width="68%">            <p class="MsoNormal"><span>针对<span lang="EN-US">twitter</span>上的企业、服务商和应 用而收集的一个商家目录。<span lang="EN-US">Twibs</span>皆在建造一个地方、分类及产品级别的权威平台，便于人们寻找、 跟随甚至与<span lang="EN-US">twitter</span>商家进行沟通</span></p>            </td>            <td width="12%">            <p style="padding-left: 30px;" class="MsoNormal"><span>最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">18</span>，月独立访客<span lang="EN-US">17,168</span></span></p>            </td>        </tr>    </tbody></table></div><p align="left" class="MsoNormal"><span lang="EN-US">&nbsp;</span></p><p class="MsoNormal"><span><span lang="EN-US">3</span></span><span><span>、 富媒体</span></span></p><div style="padding-left: 30px;"><table cellspacing="3" cellpadding="0" border="1" style="width: 87%;" class="MsoTableGrid">    <tbody>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span lang="EN-US">&nbsp;</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><strong><span lang="EN-US">Twitter</span></strong></p>            <p class="MsoNormal"><strong><span>代表应用</span></strong></p>            </td>            <td width="69%">            <p class="MsoNormal"><strong><span>应用简介</span></strong></p>            </td>            <td width="12%">            <p class="MsoNormal"><strong><span>应用点评</span></strong></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>图片</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">Twitpic</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span><span>基于<span lang="EN-US">Twitter</span>的图片分 享应用。该应用已于<span lang="EN-US">2</span>月份宣布将核心产品扩大到图片以外的内容格式，支持用户通过<span lang="EN-US">TwitPic</span>网站、移动和桌面客户端上传视频。<span lang="EN-US">TwitPic</span>是 一个基于<span lang="EN-US">Twitter</span>的媒体内容共享平台，成立于<span lang="EN-US">2008</span>年<span lang="EN-US">2</span>月，目前拥有<span lang="EN-US">1700</span>万美元，而且每天新增<span lang="EN-US">3</span>万用户，该品牌已传播到全球，甚至出现在流行歌曲歌词中。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span><span>最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">1</span>，月独立访客<span lang="EN-US">1,236,828</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>音频</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">Blip.fm</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span><span>一款专注于音乐分享的微博客服务，用户可以从<span lang="EN-US">Blip.fm</span>提 供的音乐库中搜索歌曲或者歌手，并且将喜欢的音乐加入列表并添加简短评论，还可查找品味相同的用户</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span><span lang="EN-US">&nbsp;</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>视频</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Screenr</span></p>            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span>基于<span lang="EN-US">Web</span>的即时屏幕录制服务，够在线录 制你的电脑屏幕大约长达<span lang="EN-US">5</span>分钟左右的视频，类似的产品还包括<span lang="EN-US">  Screenjelly </span>、<span lang="EN-US"> Screencast-O-Matic </span>、<span lang="EN-US"> Jing</span>、<span lang="EN-US">ScreenToaster</span>、<span lang="EN-US">GoView </span>等等。</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>        </tr>    </tbody></table></div><p align="left" style="padding-left: 30px;" class="MsoNormal"><span lang="EN-US">&nbsp;</span></p><p class="MsoNormal"><span><span lang="EN-US">4</span></span><span><span>、 社交游戏</span></span><span><span lang="EN-US"><span>&nbsp;&nbsp;</span></span></span></p><div style="padding-left: 30px;"><table cellspacing="3" cellpadding="0" border="1" style="width: 87%;" class="MsoTableGrid">    <tbody>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span lang="EN-US">&nbsp;</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><strong><span lang="EN-US">Twitter</span></strong></p>            <p class="MsoNormal"><strong><span>代表应用</span></strong></p>            </td>            <td width="69%">            <p class="MsoNormal"><strong><span>应用简介</span></strong></p>            </td>            <td width="12%">            <p class="MsoNormal"><strong><span>应用点评</span></strong></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">Gowalla </span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span>一款结合<span lang="EN-US">LBS</span>的应用，用户在实际生活中 签到获得徽章、优惠，与朋友分享位置信息。</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>支持<span lang="EN-US">iPhone   Android, iPad</span>，最近很流行的<span lang="EN-US">LBS</span>移动方向应用</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">Hot Potato</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span>中文应该叫&ldquo;烫手山芋&rdquo;吧，这个小游戏我觉得很有意思，用户间可以通过转发的方式传递这个&ldquo;烫手 山芋&rdquo;，每个用户只有<span lang="EN-US">15</span>分钟的时间转发，如果某人时间过了没发出去就会自动被山芋砸在脸上。</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">140InABottle   </span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span>漂流瓶</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">Tweefight</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span>与姓名大作战（</span><span lang="EN-US"><a href="http://t.sina.com.cn/app/detail/1iCyKz">http://t.sina.com.cn/app/detail/1iCyKz</a></span><span>） 类似的应用</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>姓名大作战使用人数已达<span lang="EN-US">120225</span>，新 浪微博最受欢迎的应用之一</span></p>            </td>        </tr>    </tbody></table></div><p align="left" style="padding-left: 30px;" class="MsoNormal"><span lang="EN-US">&nbsp;</span></p><p class="MsoNormal"><span><span lang="EN-US">5</span></span><span><span>、 生活</span></span></p><p style="padding-left: 30px;" class="MsoNormal"><span><span><br /></span></span></p><div style="padding-left: 30px;"><table cellspacing="3" cellpadding="0" border="1" style="width: 87%;" class="MsoTableGrid">    <tbody>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span lang="EN-US">&nbsp;</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><strong><span lang="EN-US">Twitter</span></strong></p>            <p class="MsoNormal"><strong><span>代表应用</span></strong></p>            </td>            <td width="69%">            <p class="MsoNormal"><strong><span>应用简介</span></strong></p>            </td>            <td width="12%">            <p class="MsoNormal"><strong><span>应用点评</span></strong></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>位置</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">Twittervision</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span>整合了<span lang="EN-US">Twitter</span>与<span lang="EN-US">Google Maps</span>两个网站的服务，它将<span lang="EN-US">Twitter</span>网 站上一堆网友们相互聊天的內容发布在<span lang="EN-US">Google Maps</span>的世界地图上，几乎每隔两三秒就会更新 一则最新的<span lang="EN-US">Twitter</span>信息。</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">15</span>，月独立访客<span lang="EN-US">30,708</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>趋势</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">Twitscoop</span></span></p>            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US"><span>&nbsp;</span></span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span><span>提供趋势监控服务，在突发事件的报道中，<span lang="EN-US">Twitter</span>社 区往往会领先传统媒体一大步。而<span lang="EN-US">Twitscoop</span>这类服务即可收集任意时段最受欢迎的<span lang="EN-US">Twitter</span>主题，然后将这些主题以<span lang="EN-US">&ldquo;</span>文字云<span lang="EN-US">&rdquo;</span>的方式组合起来，频率最高的主题会以最大的字号显示。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>支持</span><span><span lang="EN-US">iPhone</span></span><span><span>和<span lang="EN-US"> iPod Touch</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">Retweetist</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span class="MsoHyperlink"><span>可以看到最新的<span lang="EN-US">Twitter</span>状态被<span lang="EN-US">retweet</span>的实时排名。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span class="MsoHyperlink"><span>最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">8</span>，月独立访客<span lang="EN-US">60,051</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>购物</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">TipJoy</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span><span lang="EN-US">10</span></span><span><span>年 前，<span lang="EN-US">PayPal</span>的诞生使得在线支付蔚然成风。而<span lang="EN-US">TipJoy</span>则 希望进一步简化交易流程。在<span lang="EN-US">TipJoy</span>中输入自己的信用卡信息和<span lang="EN-US">PayPal</span>账户后，用户仅需在<span lang="EN-US">Twitter</span>上发布一 条带有简单代码的信息，即可将钱汇入到好友、企业或慈善机构的账户内。该公司最初由<span lang="EN-US">Y Combinator</span>资 助，最近又获得了<span lang="EN-US">Betaworks</span>的支持。该服务会向用户收取<span lang="EN-US">3%</span>的手续费，公司首席执行官阿比<span lang="EN-US">-</span>克里金（<span lang="EN-US">Abby Kirigin</span>，见上图）预计，<span lang="EN-US">TipJoy</span>将 于今年年底实现盈利。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>旅行</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Whrrl</span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span><span>结合<span lang="EN-US">LBS</span>的可放到地图上的 评价系统，令所有地图上的东西，包括地铁口、公园、停车场、站立的位置等等都可以被评价，兼具社区功能。结合手机定位系统，可以很方便的知道附近都有哪些 朋友，并在手机地图上一一标出他们的位置。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>支持<span lang="EN-US">Iphone</span>、<span lang="EN-US">android</span><span>移动方向的应用很值得关注</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>热门及公益事件</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">twebevent</span></span></p>            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span><span>通过<span lang="EN-US"> Twitter </span>举办 活动，在活动中进行交流</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">twtvite</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span><span>显示出上百个城市的聚会并且允许用户在它的界面上直接回复。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">TwitCause</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span><span>支持非营利性慈善事业，其每周推荐一个项目，通过用户捐款筹集慈善基金，有超<span lang="EN-US">50</span>万粉丝。经验：<span lang="EN-US">1</span>）简短的任务消息<span lang="EN-US">2</span>）及时提供结果<span lang="EN-US">3</span>）用户微薄投入和大量转发<span lang="EN-US">4)</span>商家支持，如<span lang="EN-US">eBay</span>、哈根达斯的合作</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span><span>随着随手拍照解救乞讨儿童 受到关注，微博是否会出现类应用？</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>知识</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span><span lang="EN-US">Quora</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span><span>最热门的问答型社交类网站，</span></span><span><span>代 表了用兴趣图谱对用户的社交图谱进行分层的技术趋势。用户不仅可以用不同的人分类，还可以用话题和问题分类。它根据用户的兴趣来定义世界，而不仅仅是用户 认识或崇拜的人来定义。已获八千六百万美金风投</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span><span>与微博完美结合，用户自我展示需求得到满足</span></span></p>            </td>        </tr>    </tbody></table></div><p align="left" class="MsoNormal"><strong><span lang="EN-US">&nbsp;</span></strong></p><p class="MsoNormal"><span><span lang="EN-US">6</span></span><span><span>、 商务</span></span><span><span lang="EN-US">&amp;</span></span><span><span>客 户</span></span></p><p style="padding-left: 30px;" class="MsoNormal"><span><span><br /></span></span></p><div style="padding-left: 30px;"><table cellspacing="3" cellpadding="0" border="1" style="width: 87%;" class="MsoTableGrid">    <tbody>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span lang="EN-US">&nbsp;</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><strong><span lang="EN-US">Twitter</span></strong></p>            <p class="MsoNormal"><strong><span>代表应用</span></strong></p>            </td>            <td width="69%">            <p class="MsoNormal"><strong><span>应用简介</span></strong></p>            </td>            <td width="12%">            <p class="MsoNormal"><strong><span>应用点评</span></strong></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>统计分析</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Klout</span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span lang="EN-US">Klout</span><span>是一家衡量<span lang="EN-US">Twitter</span>用户影响力指数的创业公司，将把用户在<span lang="EN-US">Facebook</span>和<span lang="EN-US">Twitter</span>上的影响力合二为一。<span lang="EN-US">Klout</span>根据<span lang="EN-US">Twitter</span>用户有多少活跃关注者、用户所发布链接的点击次数、与其它用户的互动情况来衡量该用户在<span lang="EN-US">Twitter</span>上的影响力。</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>重点领域值得关注</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">bit.ly</span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span>提供网址缩短服务及统计功能，<span lang="EN-US">bit.ly</span>占 据了<span lang="EN-US">twitter</span>所有网址的<span lang="EN-US">33%</span>，可实 时跟踪短链接每次点击，用户来自哪里的，从哪里点击了链接，分别有多少次等信息。</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>重点领域值得关注</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Tweetburner</span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span>在<span lang="EN-US">twitter</span>上发布的网址进行缩写服 务，并对你发布的信息进行访问统计，如果你是市场推广人员的话，这个功能能够让你获得第一手的市场调查资料。</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">13</span>，月独立访客<span lang="EN-US">41,754</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Twistori</span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span>专门收集<span lang="EN-US">twitter</span>客<span lang="EN-US">(</span>用户<span lang="EN-US">)</span>在<span lang="EN-US">Twitter</span>上<span lang="EN-US">tweet</span>时流露的情感，包括<span lang="EN-US">6</span>种最常见的情感：爱<span lang="EN-US">(I love)</span>，恨<span lang="EN-US">(I hate)</span>，认为<span lang="EN-US">(I think)</span>，信任<span lang="EN-US">(I believe)</span>，觉 得<span lang="EN-US">(I feel)</span>，希望<span lang="EN-US">(I wish)</span>。 在这里，你可以看到，这些感情都很真。而其数据，则来自于专门用于<span lang="EN-US">twitter</span>的搜索引擎<span lang="EN-US">summize</span>。</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">19</span>，月独立访客<span lang="EN-US">16,229</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">My6sense</span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span>根据用户的喜好和兴趣来整理<span lang="EN-US">Twitter</span>内 容流，会根据和用户的相关性进行重新排列：排在上面的消息，是<span lang="EN-US">My6sense</span>认为和用户的喜好和 兴趣相关的消息</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span lang="EN-US">Chrome</span><span>浏览器扩展</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">TweetStats</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span>在线统计分析工具，有点类似于网站统计，分析你<span lang="EN-US">Twitter  </span>在线的时间以及习惯，甚至会给出类似博客标签云的&ldquo;<span lang="EN-US">Tweet   Cloud</span>&rdquo;，用以了解你最热门的言论。</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US"><span>&nbsp;</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>市场营销推广</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">TwitHawk</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span class="MsoHyperlink"><span>实时针对性的营销引擎，已为用户发出约<span lang="EN-US">50</span>万<span lang="EN-US">tweets</span>。这个工具允许任何企业向所有涉及 特定关键词的<span lang="EN-US">Twitter</span>用户自动发送信息。例如，企业可以向某一地理范围内的提到&ldquo;咖啡&rdquo;的用 户发送广告。企业每发送一条<span lang="EN-US">Twitter</span>信息，要向<span lang="EN-US">TwitterHawk</span>支 付<span lang="EN-US">5</span>美分</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>支持<span class="MsoHyperlink"><span lang="EN-US">iphone</span>、<span lang="EN-US">ipad</span>，让你无时无地不营销</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Twitter   Grader</span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span class="MsoHyperlink"><span>出自<span lang="EN-US">HubSpot</span>公司，是一种评估<span lang="EN-US">Twitter</span>账户影响 力和传播范围的工具。跟随者数量、你所跟随的用户数量、更新频率、账户信息完整度以及其他的因素构成了<span lang="EN-US">Twitter  Grader</span>评判分数的依据。它也会提供建议，给出应该跟随的用户的名称。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span lang="EN-US">Offerpop</span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">Offerpop</span></span><span class="MsoHyperlink"><span>帮助使用者建立有吸引力、品牌社交媒体营销活动（如团购、抽奖、竞赛、优惠、赠送等），并在<span lang="EN-US">Facebook</span>、公司网站（集成了<span lang="EN-US">Facebook  Connect</span>）和<span lang="EN-US">Twitter</span>上同步推出。<span lang="EN-US">Offerpop</span>的竞争对手<span lang="EN-US">Wildfire</span>服务的客户 名录，包括了百事、索尼、<span lang="EN-US">CNN</span>、环球、<span lang="EN-US">AT&amp;T</span>甚 至<span lang="EN-US">Facebook</span>本身。为企业提供平台，帮助其创建、运营在<span lang="EN-US">Twitter</span>和<span lang="EN-US">Facebook</span>上发起的广告活动，并 衡量广告效果的联网营销公司。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US"><span>&nbsp;</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">Sprout  Social</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span class="MsoHyperlink"><span>是个为小企业提供社交媒体管理工具的公 司，各类公司都可以使用<span lang="EN-US"> Sprout Social </span>来管理、观察和跟踪他们的公司在<span lang="EN-US"> Twitter</span>，<span lang="EN-US">Facebook</span>，<span lang="EN-US">Foursquare</span>，<span lang="EN-US">LinkedIn </span>和<span lang="EN-US"> Yelp </span>等社交网站上的表现。已获<span lang="EN-US">1</span>千万美元融 资。<span lang="EN-US">Sprout Social </span>提供的是为小企业准备的低价月服务费计划，他们在这一领域里瞄准 了中端市场。他们提供的服务对小企业小公司来说已经足够强壮，他们的模式有一点像<span lang="EN-US"> HootSuite</span>， 但是又没有<span lang="EN-US"> Vitrue </span>或者<span lang="EN-US"> Buddy Media  </span>那么昂贵。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US"><span>&nbsp;</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">Zendesk</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span class="MsoHyperlink"><span>是个帮助商家搜集<span lang="EN-US">twitter</span>的各种抱怨信息的服务。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>支持<span class="MsoHyperlink"><span lang="EN-US"> iPad</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>品牌追踪</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">Monitter</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">Twitter</span></span><span class="MsoHyperlink"><span>关键词实时监测服务，同时搜索<span lang="EN-US">3</span>个关键 词，并且无论何时一个拥有这些关键词的新文章发布，它都能够自动更新。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span class="MsoHyperlink"><span>最受欢迎的<span lang="EN-US">20</span>个<span lang="EN-US">Twitter</span>应用排名第<span lang="EN-US">17</span>，月独立访客<span lang="EN-US">25,433</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">BrandTags</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span class="MsoHyperlink"><span>人们对于品牌的真实想法，每次它会闪出 一个品牌的<span lang="EN-US">Logo</span>，然后让你填一个你看到这个<span lang="EN-US">logo</span>后 第一个想到的标签</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US"><span>&nbsp;</span></span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><strong><span>客户关系管理</span></strong></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">HootSuite</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span>社交媒体管理平台，采用了<span lang="EN-US">Klout</span>开发 的计算互联网影响力的算法，帮助企业根据其关注者在<span lang="EN-US">Twitter</span>上的影响力来分类这些关注者，更 好地与关注者进行沟通。如果某品牌拥有大量关注者，有助于找出最有用的<span lang="EN-US">Twitter</span>消息或是潜在 客户。</span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>支持<span lang="EN-US">iphone</span>、<span lang="EN-US">andoid</span></span></p>            </td>        </tr>        <tr>            <td width="7%">            <p class="MsoNormal"><span lang="EN-US">&nbsp;</span></p>            </td>            <td width="10%">            <p class="MsoNormal"><span class="MsoHyperlink"><span lang="EN-US">CoTweet</span></span></p>            </td>            <td width="69%">            <p class="MsoNormal"><span><span lang="EN-US">CoTweet</span></span><span><span>是 一个很有效的客户关系管理和内部商务管理平台，支持多人登录、多帐户协作；工作事项分配与管理；关键词与趋势跟踪；工作日程提醒等。</span></span></p>            </td>            <td width="12%">            <p class="MsoNormal"><span>支持<span lang="EN-US">iPhone</span></span></p>            </td>        </tr>    </tbody></table></div><p align="left" style="padding-left: 30px;" class="MsoNormal"><span lang="EN-US">&nbsp;</span></p><p align="left" class="MsoNormal"><span><span lang="EN-US">7</span></span><span><span>、 博客、网站工具</span></span></p><p><span><span lang="EN-US">8</span></span><span><span>、 开发者工具</span></span><span><span lang="EN-US"><span>&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; <br /></span></span></span></p><p>转自：http://blog.csdn.net/sukihow/archive/2011/03/07/6228823.aspx</p>]]></description><category>移动应用</category><comments>http://www.vvwww.com/post/mobile_app232/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=232</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=232&amp;key=2892f60c</trackback:ping></item><item><title>未来的移动用户体验——增强现实</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/mobile_app231/</link><pubDate>Fri, 18 Feb 2011 22:45:03 +0800</pubDate><guid>http://www.vvwww.com/post/mobile_app231/</guid><description><![CDATA[<h3>一、什么是增强现实？</h3><p><!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.6px Monaco} span.s1 {font: 10.6px 'Times New Roman'} -->当 你想知道今天的天气情况的时候，还是在听新闻联播之后的天气预报吗？当你想知道哪辆公车可以回家的时候，还是要挨个公交站牌去找寻么？当你想认识一个漂亮 mm的时候，还是要鼓起勇气跑上前去跟她搭讪吗？当你在街上游荡，想找到一家吃晚餐的地方的时候，你还是查完大众点评查谷歌地图吗？如果现在有一种技术， 可以让你想知道天气的时候，直接仰望苍穹；想知道公车信息的时候，直接去问公车；想知道mm信息的时候，直接扫描mm本人；想找附近吃饭的地方时，直接摄 像头环绕周边&hellip;会不会听上去有点离谱呢？其实这项技术已经发展的非常成熟了，就是增强现实技术。</p><p>增强现实(AR)是在虚拟现实技术基础上发展起来的一种新兴计算机应用和人机交互技术。它借助计算机和可视化技术将虚拟的信息应用到真实世界，真实 的环境和虚拟的物体实时地叠加到了同一个画面或空间同时存在。简单的说就是虚实结合。</p><p><object height="400" width="480" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"><param value="middle" name="align" /><param value="http://player.youku.com/player.php/sid/XMjEwMzIyNTI4/v.swf" name="src" /><param value="high" name="quality" /><embed height="400" align="middle" width="480" quality="high" src="http://player.youku.com/player.php/sid/XMjEwMzIyNTI4/v.swf" type="application/x-shockwave-flash"></embed></object></p><p>&ldquo;传统的增强现实服务过于平面，无法将周围环境的有用信息完整呈现且运用，他们所发展中的接合自然网络服务（Articulated  Naturality  Web），则可以让人以截然不同的方式来使用科技；未来实际配合手机来用，将可以让使用者有相当多广泛的用途，例如说以相机来扫描辨识饭店外观，即可进行 空房查询、订房等，若以相机扫描空荡荡、尚未装潢的办公室，则会叫出一系列的办公室装潢元素，让使用者来配对，甚是还可以照照天空，来显示一天的天气预测 等等，诸如此类的应用，可以说是有相当多延伸空间。&rdquo;</p><h3>二、基本原理</h3><p>LBS常用的POI信息会有三个维度的信息：</p><ul>    <li>名称</li>    <li>类别</li>    <li>坐标</li></ul><p>而通过手机摄像头定位一个虚拟物品或虚拟信息则需要这样三类数据：</p><ul>    <li>GPS坐标</li>    <li>数字罗盘确定的手机朝向</li>    <li>加速器给出的手机与地面角度</li></ul><p>当用户为屏幕中的景物添加标注，或者放置虚拟物品到屏幕中时，需要同时附带这三类数据，其他用户通过摄像头查看景物时，才能通过这三类数据匹配出相 应的信息。</p><h3>三、当虚拟照进现实</h3><p><strong>１、Foursquare的位置层</strong></p><p>Foursquare推出的&ldquo;位置层&rdquo;（Location-layers）功能，允许企业通过&ldquo;Tips&rdquo;想用户推送信息。该功能类似于&ldquo;增强现 实&rdquo;原理，使现实世界中的信息以数字的形式反映出来。</p><p><strong>2、Layar的开放平台</strong></p><p>荷兰一家名叫SPRXmobile的公司推出的Layar的软件，推出的开放平台计划。随着第三方API的发布，互联网服务商们争相将在Layar 平台上构建自己的数据层，而Layar软件自身的功能也因此变得更加丰富。户只需要将手机的摄像头对准周围的建筑物或者开放空间，就能在手机屏幕下方看到 与之相关的现实数据，其中包括房屋出租、餐馆打折、招聘启事以及ATM位置等实用信息。</p><p><strong>３、Discover Anywhere Mobile</strong></p><p>多伦多的旅行向导提供商<a href="http://www.discoveranywheremobile.com/">Discover  Anywhere Mobile</a>完成一款iPhone应用程序的开发，该应用提供北美33个城市的地铁、轻轨、列车和机场信息的增强现实视图。在 下一版iPhone OS推出之时，该应用将正式发布。</p><p><strong>４、Mobizily</strong></p><p>奥地利创业公司Mobizily开发的Wikitude世界浏览器，前身是一款增强现实旅行指南软件。这款软件的初衷是为全世界背包客建立一个手机 上的虚拟旅行手册，帮助用户自行标注、分享现实世界中的景点，并通过手机上的Wikitude软件查阅其他用户提供的相关景点描述。Wikitude中所 有景点信息主要由用户提供，并通过维基模式来维护。在Wikitude.me网站上，用户可以使用自己的Google、Yahoo!、Twitter或是 OpenID帐号登录并提交新的注释内容，降低了产生内容的门槛。</p><h3>四、目前使用场景</h3><p><strong>1、餐馆服务</strong></p><p><img height="347" width="231" title="未来的移动用户体验&mdash;&mdash;增强现实" alt="yelp augmented reality ar 4 300x450 未来的移动用户体验&mdash;&mdash;增强现实" src="http://www.gsmdome.com/wp-content/uploads/2009/08/yelp-augmented-reality-ar-4-300x450.jpg" /><img height="347" width="231" title="未来的移动用户体验&mdash;&mdash;增强现实" alt="yelp ar app 未来的移动用户体验&mdash;&mdash;增强现实" src="http://www.digitaltrends.com/wp-content/uploads/2010/01/yelp-ar-app.jpg" /></p><p>Yelp是众所周知的第一个采用AR技术的客户端，打开手机摄像头就可以查看周围商户的信息。我推测是需要定位+方向识别技术。盛大游玩网的客户端 切客也采用了这个增强现实技术。</p><p><strong>2、旅游</strong></p><p><img title="未来的移动用户体验&mdash;&mdash;增强现实" alt="wikitude 未来的移动用户体验&mdash;&mdash;增强现实" src="http://gevleugeldewoorden.nl/wp-content/uploads/2009/03/wikitude.jpg" /></p><p>Wikitude通过用户提供的游记和和地点信息提供旅游攻略</p><p><strong>3、测距离</strong></p><p><img height="369" width="491" title="未来的移动用户体验&mdash;&mdash;增强现实" alt="layar app1 未来的移动用户体验&mdash;&mdash;增强现实" src="http://5magazine.files.wordpress.com/2010/06/layar-app1.jpg" /></p><p><strong>4、虚拟宠物</strong></p><p><img height="216" width="267" title="未来的移动用户体验&mdash;&mdash;增强现实" alt="arf 未来的移动用户体验&mdash;&mdash;增强现实" src="http://www.ugotrade.com/wordpress/wp-content/uploads/2009/06/arf.jpg" /></p><p>图 ARf是iPhone上一款增强现实宠物养成游戏，需要二维码扫描技术支持</p><p><strong>5、天气查询</strong></p><p><img title="未来的移动用户体验&mdash;&mdash;增强现实" alt="augmented reality apps coming iphone 20090714043212241未来的移动用户体验&mdash;&mdash;增强现实" src="http://gearmedia.ign.com/gear/image/article/100/1003504/augmented-reality-apps-coming-iphone-20090714043212241.jpg" /></p><p>TwittARound是一款iPhone上的增强现实软件，可以利用摄像头对准天空来判断当前的天气状况。需要定位技术加上云存储的天气数据库。</p><p><strong>６、娱乐游戏</strong></p><p><strong><img title="未来的移动用户体验&mdash;&mdash;增强现实" alt="mzl.fvtdibse.320x480 75 未来的移动用户体验&mdash;&mdash;增强现实" src="http://a1.phobos.apple.com/us/r1000/009/Purple/d4/0a/24/mzl.fvtdibse.320x480-75.jpg" /></strong></p><p>AR Invaders  将AR技术引入游戏，无论你身处何处，都是真实的战场！游戏利用设备自带的摄像头捕捉周围的实时画面，利用陀螺仪和重力感应来判断玩家的动作、方向和位置 变化，玩家则需要在实境中搜索着外星飞船并击毁他们，阻止外星人的入侵。AR Invaders 需要陀螺仪支持，所以仅适用于iPhone 4 和  Touch 4。</p><h3>五、未来的移动用户体验</h3><p>在web2.0时代，人们迫切需要更多的互动性，更多的即时性，更多的个性化，更多的垂直化，随着AR技术跟手机发展的结合，相信一个崭新的 web3.0时代已经在向我们招手，虚实结合、高度交互性以及三维定位功能，将极大程度的调用用户参与的热情，还原互联网的真实感，让互联网跟真是世界的 关系更紧密，是现在lbs服务的三维化。AR也为互动营销、移动广告发展带来了巨大的商机，它创造出全新的用户体验，在一种轻松活跃的环境中，使用户与品 牌产生零距离的接触。</p><p><strong>１、全新的广告形态</strong></p><p>用增强现实技术实现的虚拟广告投放，大大的有别于什么报纸广告、电视广告、户外广告、搜索引擎广告。</p><p><strong>２、全新的搜索模式</strong></p><p>之前也撰文<a href="http://elya.cc/product/757.html">移动搜索产品的用户体验</a>提到过，未来的 搜索将要不在局限与那一个框，摄像头搜索将会有很大的想像空间，营造全新的位置搜索引擎时代。</p><p><strong>３、全新的游戏模式</strong></p><p>虽然Mytown之类的已经对LBG（基于位置的游戏）进行过实践摸索，但是相信这种平面的LBS远没有AR游戏带给用户的参与感强烈。</p><p><strong>４、全新的社交方式</strong></p><p>现在我们还停留在纸质名片的阶段，未来每个人都可以有一个立体的社交主页，帮订自己的SNS、微博，通过人脸识别技术，用户就能利用摄像头看到你的 信息、动态，添加你为社区好友。</p><p><strong>５、全新的浏览器</strong></p><p>只要开启摄像头，就能获得周围一切我想要的信息，通过在不同的图层中切换，找到感兴趣的垂直信息，这不是浏览器是什么？这是基于摄像头的浏览器。</p><p><strong>６、全新的生活方式</strong></p><p>基于位置你再也不会迷失了，周边的餐馆、今天的天气、公车的路线、周围的美女、商场的打折信息、前方漂亮的鞋是什么牌子等等，我们将要迎来一个全新 的移动互联网时代。</p><p>虽然AR技术在国外已经比较成熟，并频繁并应用到商业化产品中，但是在国内还停留在学术研究阶段，出了盛大游玩网出的切客里使用到了AR技术之外， 我还暂时不知道第二家。但是相信随着AR技术的不断完善，国内手机市场情况孕育到位，相信未来，Augmented Reality +  Location会是一个趋势，开发者的想象力跟使用者的需求间是否能对应到，不久之后应该就会有答案了。</p><p>&nbsp;</p><p>来源：http://elya.cc/internet/903.html#more-903</p>]]></description><category>移动应用</category><comments>http://www.vvwww.com/post/mobile_app231/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=231</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=231&amp;key=ac5fb9d0</trackback:ping></item><item><title>人生定律大全</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/ue230/</link><pubDate>Mon, 07 Feb 2011 01:11:57 +0800</pubDate><guid>http://www.vvwww.com/post/ue230/</guid><description><![CDATA[<p>人生定律与法则大全<br /><strong>一、生活定律 <br /></strong><br />　　 痛苦定律：死无疑是痛苦的，然而还有比死更痛苦的东西，那就是等死。 <br /><br />　　 幸福定律：如果你不再总是想着自己是否幸福时，你就获得幸福了。 <br /><br />　　 错误定律：人人都会有过失，但是，只有重复这些过失时，你才犯了错误。 <br /><br />　　 沉默定律：在辩论时，沉默是一种最难驳倒的观点。 <br /><br />　　 动力定律：动力往往只是起源于两种原因：希望，或者绝望。 <br /><br />　　受辱定律：受辱时的唯一办法是忽视它，不能忽视它时就藐视它；如果料藐视它也不能，那么你就只能受辱了。 <br /><br />　　 愚蠢定律：愚蠢大多是在手脚或舌头运转得比大脑还快的时候产生的。 <br /><br />　　化妆定律：在修饰打扮上花费的时间有多少，你就需要掩饰的缺点也就有多少。 <br /><br />　　省时定律：要想学会最节省时间的办法，首先就不需要学会说&ldquo;不&rdquo;。 <br /><br />　　 地位定律：有人站在山顶上，有人站在山脚下，虽然所处的地位不同，但在两者的眼中所看到的对方，却是同样大小的。 <br /><br />　　 失败定律：失败并不以为着浪费时间与生命，却往往意味着你又有理由去拥有新的时间与生命了。 <br /><br />　　 谈话定律：最使人厌烦的谈话有两种：从来不停下来想想；或者，从来也不想停下来。 <br /><br />　　 误解定律：被某个人误解，麻烦并不大；被许多人误解，那麻烦就大了。 <br /><br />　　 结局定律：有一个可怕的结局，也比不上没有任何结局可怕。 <br /><br />　　 花钱定律：妻子把钱花在打扮（美容、穿戴）上，丈夫把钱花在过（烟、酒、牌&hellip;&hellip;）瘾上。 <br /><br />　　 买菜定律：一到菜市场就不知买什么菜好的多是妻子，一到菜市场见啥菜买啥菜的多是丈夫。 <br /><br />　　成熟定律：越是被妻子深爱着的丈夫越是成熟，越是被丈夫娇宠着的妻子就越是不成熟。 <br /><br />　　 说话定律：夫妻之间谁说得话越多，谁的话就越没分量。 <br /><br />　　伤害定律：夫妻之间，一方对另一方付出得越多，分手时所得到的伤害越大。 <br /><br />　　抱怨定律：经常抱怨的总是妻子，经常被抱怨的总是丈夫。 <br /><br />　　 干活定律：在丈夫的眼里，家里总是没有什么活；在妻子的眼里，家里总是有干不完的活。 <br /><br />　　 做事定律：做事见好就收的总是丈夫，做事想好上加好的总是妻子。 <br /><br />　　 着装定律：男人只有合身的服装而缺少流行的服装；女人只有流行的服装而缺少合身的服装。 <br /><br />　　出门定律：最着急出门的是妻子，最后一个出门的也是妻子。 <br /><br />　　 洗碗定律：妻子洗碗易净，丈夫洗碗易碎。 <br /><br />　　 唠嗑定律：越唠越有精神的多是妻子，越唠话越少的多是丈夫。 <br /><br />　　定律：妻子一出门就想回家，丈夫一出门就不爱回家；妻子一旦不愿回家，丈夫就得匆匆回家；丈夫一旦不愿回家，妻子迟早也得离家。 <br /><br />　　 吵架定律：夫妻越是毫无原因的吵架越是吵得凶。 <br /><br />　　讥笑定律：在懂得爱情的夫妻那里，相互间的讥笑会演化成一种幽默，在不懂得爱情的夫妻那里，相互间的讥笑会演化成一场战争。 <br /><br />　　 距离定律：有时候夫妻之间的地理距离越远，情感距离越近。 <br /><br />　　 危机定律：当家庭经济出现危机之时，丈夫的想法总是希望妻子帮自己一把，而妻子的想法是能否换一个丈夫。 <br /><br />　　 脾气定律：夫妻之间，挣钱多少决定脾气大小，不挣钱的人没脾气。 <br /><br />　　 平等定律：夫妻双方都认为自己是家长，可重大的事情又一个人说了不算。 <br /><br />　　 劝说定律：夫妻之间一旦发生矛盾，出面劝说的人越多，矛盾越是不容易解决。 <br /><strong>二、工作定律</strong> <br /><br />　　　　安全定律：最安全的单位几十年没有得过安全奖（最安全证明你们安全没有做工作） <br /><br />　　需要定律：同样两个相同的单位，同样的办公费。多少年以后，发生了变化（证明你们单位办公不需要那么多的钱）出来反对，这种成功的概论会归结为零。 <br /><br />　　 评比定律：领导认为谁好，谁就好。（只要领导看你不顺眼，再辛辛苦苦地工作也是白费力气。） <br /><br />　　一票否决定律：在一个单位，比如升工资，比如提拔任用，一个人提出来，往往成功的概率最大，而另一个人站 <br /><br />　　 接受教育定律：每个单位都有吊儿郎当不好好干工作的人。但领导往往在批评这些人的时候，这些人恰恰不在场，于是，便出现了遵纪守法的人，经常接受教育的尴尬局面。 <br /><br />　　哭闹定律；那个部门没有几个因为经常的哭闹而得到了实惠，他有什么理由不经常哭闹下去。（此定理也适用那些经常在领导面前叫苦叫累的部门） <br /><br />　　 能者多劳定律：在同一科室里，有的人虽然在其岗，但却不能胜任本职工作，那他的工作只能由能胜任该项工作的人去代劳。 <br /><br />　　 不平衡定律：年年当先进的部门或个人，一年没有当先进便想不通；从未当先进的部门或个人，当上先进后便想不到。 <br /><br />　　 少劳多得定律：现在一般的单位，都分为合同工、（过去称为正式工）协议工、临时工等等。拿钱越少的工作量越大，而且越容易被解雇；拿钱越多的越没有多少事情可干，而且最不容易被解雇。 <br /><br /><strong>三、爱情定律 <br /><br /></strong>　　 情人定律：男人想当女人的初恋情人；女人想做男人的最后情人。 <br /><br />　　 <br /><br />　　初坠情网定律：女人姣好的长相，是使男人迅速坠入情网的&ldquo;导火线&rdquo;，男人的&ldquo;甜言蜜语&rdquo;，使女人乐于被拉下爱河。 <br /><br />　　 求爱定律：男人追求女人，如隔一座山------难：女人追求男人，如隔一层纸-----易，尽管如此，实际生活男人往往能追到他喜欢的女人，而女人却得 <br /><br />　　不到她爱恋的男人，原因是：男人不怕翻山越岭，女人却怕伤了手指头。 <br /><br />　　 初恋定律：男人获得爱的方式是迅速出击，在燃烧中拥抱爱的火焰：女人获得爱的方法是缓慢渗透，然后在平静中品尝爱的芬芳。 <br /><br />　　 热恋定律：男人热恋有用不完的聪明：女人热恋时却易变的愚蠢。 <br /><br />　　 考验定律：男人考验女人的方法是远走高飞:女人考验男人的方式是约会迟到。 <br /><br />　　目的定律：男人为结婚而恋爱：女人为恋爱结婚。 <br /><br />　　夫妻定律：父亲---兄长---弟弟；母亲---姐姐---妹妹。需要什么时就变出什么样子。 <br /><br />　　结婚定律：男人结婚是因为无聊，女人结婚则是因为好奇。结婚后双方都很失望。 <br /><br />　　婚前婚后定律：婚前,男人说：&ldquo;你是我的一切。&rdquo;女人会说：&ldquo;我属于你。&rdquo;婚后，男人会说：&ldquo;我是你的一切。&rdquo;女人会说：&ldquo;你属于我。&rdquo; <br /><br />　　 说话定律：男人酒后话多，女人婚后话多，所以，一个热闹的家庭往往是由嗜酒的丈夫和爱唠叨的妻子组成的。 <br /><br />　　 家庭观念定律：&ldquo;晚出夜不归&rdquo;的是男人：&ldquo;多想这个家&rdquo;的是女人。 <br /><br />　　区别定律：当男人不修边幅时，人们会说：&ldquo;他的老婆真呛！&rdquo;当一个女人仪容不整的时候，人们会说：&ldquo;她的丈夫真倒霉！&rdquo; <br /><br />　　 成功背后定律：一个成功的男人背后，总有一个坚强的女人；而一个成功的女人背后，常是一个伤她心的男人。 <br /><br /><strong>四、反反定律</strong> <br /><br />　　 学者定律：总是用一己的认知和标准去衡量他人。 <br /><br />　　 世俗定律：受看不见的影响，被看得见的迷惑。 <br /><br />　　生存定律：在各种旋转的棋盘上，找一个活角或相对稳定、能够发展的点。<br />礼节定律：成亦萧何败亦萧何，尽人可为可做的最微妙的东西。 <br /><br />　　 时间定律：风来雨去，积日为年地走着，让老年人觉得日长年短，年轻人觉得日短年长。 <br /><br />　　 成长定律：不管走出多少步，没走好的那步，返回来还得重走。 <br /><br />　　 吃苦定律：少时不吃老来吃，30岁以前没吃，30岁以后加倍吃。 <br /><br />　　 规定定律：都知道挂墙上的，会上说；都不知道潜行在生活里的，通用。 <br /><br />　　 黑白定律：自然的两种颜色，合在一起组成社会，反差最大，势不两立，又互相转化，谁也离不开谁。 <br /><br />　　 长短定律：长长为短，短短反长。缺点是优点的延伸，优点是缺点放对了地方。 <br /><br />　　 胆小定律：与势力结缘。 <br /><br />　　权力定律：没有百分之百，好的七三开，差的三七开，最容易犯的错误是：延误、受贿、用人不当、蛮横欺人和被瞒被欺。 <br /><br />　　 称赞定律：把最廉价的东西放在口头上。 <br /><br />　　 勇敢定律：高端品行，常常发生在对危险的无知阶段。 <br /><br />　　 从者定律：永远窥视被从者的隐私。 <br /><br />　　 驾驭定律：紧持缰绳，少打鞭子。 <br /><br />　　 偶然定律：常常影响人一生的不期而至。 <br /><br />　　 生物世界定律：细菌无处不在无物不畏；恐龙灭苍蝇生，从来以小治大。 <br /><br />　　 学问定律：被不了解的人当垃圾扔的。 <br /><br />　　 忍耐定律：变化之纲，功名之舟，成事之旅，大匠之绳。 <br /><br />　　 智者定律：不做绝事，不夸耀自己成功，不在同一个地方跌倒两次。 <br /><br />　　 意义定律：名利之外讲尊严，保留一点值得自傲的东西。 <br /><br />　　 儒雅定律：稳步踏靴，宠辱不惊，好的时候不看得太好，坏的时候不觉得太坏。 <br /><br />　　 债务定律：天公地平，不饶恕任何一个人，有欠就要还，今天不还明天还，这代没还下代还。 <br /><br /><strong>五、性别定律</strong> <br /><br />　　 属性定律：男人具有气体的属性，因此爱吹牛、爱发火；女人具有液体的属性，因此爱吃醋、爱流眼泪。 <br /><br />　　 关系定律：&ldquo;女人是水做的，男人是泥捏的&rdquo;，二者的关系是：泥巴投入水中至多会激起一朵浪花，而水却可以把泥巴泡化。 <br /><br />　　目的定律：男人为结婚而恋爱，女人为恋爱而结婚。 <br /><br />　　 接吻定律：第一次接吻后，女人会把这个吻当作一笔放出去的投资，期待着获取利润；男人则会把它当作一笔收回来的贷款，干脆放在保险柜里。 <br /><br />　　转换定律：结婚前的女人对恋人说&ldquo;我属于你&rdquo;，男人则对恋人说&ldquo;你是我的一切&rdquo;；结婚后的女人会说&ldquo;你属于我&rdquo;，男人会说&ldquo;我是你的一切&rdquo;。 <br /><br />　　 老婆定律：讨漂亮女人做老婆，称心而不放心；讨丑女人做老婆，放心而不称心。所以，哪个男人也不会对自己的老婆满意。 <br /><br />　　定律：女人为做饭不到下班时间便忙着回家，男人因怕做饭下了班也爱躲在办公室聊天或四处闲逛。 <br /><br /><strong>六、大一到大四的男女定律 <br /><br /></strong>　　男生定律 <br /><br />　　走路定律：大一是走在人行道上的；大二是走在马路边上的；大三是走在马路中央的；大四是走在马路逆行线上的。 <br /><br />　　 眼神定律（看MM的）：大一是害羞的大二是直直的；大三是YD的；大四是还要跑回去看的。 <br /><br />　　 报到定律：大一是提前几天到的；大二是准时到的；大三是迟几天到的；大四是不去注册的。 <br /><br />　　大学四动（追MM的）：大一按兵不动；大二蠢蠢欲动；大三全面出动；大四个个反动。 <br /><br />　　 大学四草：大一兔子不吃窝边草；大二好马不吃回头草；大三疾风知劲草；大四天涯何处无芳草。 <br /><br />　　 女生定律 <br />大一女生娇；大二女生俏；大三女生满街跑；大四女生没人要。 <br /><br />　　水果定律：大一女生是芒果（好看不好吃）大二女生是苹果（好看又好吃）大三女生是凤梨（好吃不好看）大四女生是番茄（自以为还是个水果呢&hellip;&hellip;） <br /><br />　　上课定律大一：&quot;你怎么迟到了？&quot;大二：&quot;你今天怎么没上课？&quot;大三：&quot;你上课去吗？&quot;大四：&quot;你怎么上课去了？&quot; <br /><br />　　考试定律大一：什么!明天要考微积分！？大二：什么!等下要考微积分！？大三：什么!刚刚考的是微积分！？大四：什么！微积分什么时候考的！？ <br /><br />　　思想定律大一：理想主义大二：浪漫主义大三：现实主义大四：批判现实主义 <br /><br /><strong>七、官场魔鬼定律</strong> <br /><br />　　 <br /><br />　　正确定律：官场上，权力越大的人就越正确。 <br /><br />　　熟悉定律：原本特别熟悉的人，他的官当得越大，你越对他感到陌生。 <br /><br />　　能人定律：官场上的能人，并不是有很大权势的人，而是会使用权力的人。 <br /><br />　　 能力定律：在官场上，你有没有能力取决于领导对你怎么看。也就是说，说你行你就行，不行也行；说你不行就不行，行也不行。 <br /><br />　　 害怕定律：当官的人不怕人骂，不怕人告，最怕失去权力。 <br /><br />　　 赌博定律：当官的无论牌技多差，可总是赢的时候多。 <br /><br />　　民主定律：所谓民主就是把大家的看法集中统一到领导的观点上来。 <br /><br />　　胆识定律：在官场上，胆子越大就越有见识，而越有见识，胆子就越小。 <br /><br />　　信息定律：当官者最喜欢的信息就是下边人所打的小报告。 <br /><br />　　挨骂定律：当官没有不被人骂的，有时骂他的人越多，他反倒升迁得越快。 <br /><br />　　 牛B定律：当官的人什么时候自己感觉最牛B？滥用权力的时候！ <br /><br />　　 吹牛定律：在官场上，越是会吹牛的人越是觉得自己高高在上。 <br /><br />　　距离定律：越是脱离群众的官，越是觉得自己高高在上。 <br /><br />　　 发言定律：开会时最后发言的总是说了最算的领导。 <br /><br />　　 合作定律：在官场上，会装傻的人才容易合作，不会装傻的人无法合作。 <br /><br />　　承诺定律：反复承诺的多是不容易兑现的，容易兑现的用不着反复承诺。 <br /><br />　　 下场定律：当官时治人特狠的，倒后台的下场越惨。 <br />&nbsp;</p><p><strong>八、综合定律 </strong>　　 <br /><br />　　高贵定律：气质上生的，长在骨子里，权拿不到，钱买不来，有值无价。 <br /><br />　　 筷子定律：用二夹一。 <br /><br />　　 办事定律：找说了算的人。 <br /><br />　　 世事定律：阴阳有恒，凡不公不平导致失衡的，都不长久。 <br /><br />　　 关系定律一：没有不行，过近不好；少了不行，多了乱套。 <br /><br />　　关系定律二：上下，左右，都是来回的，你曾经怎样对别人，反过来别人也会怎样对你。 <br /><br />　　任期定律：不管前方是什么，在哪里，只管这一站，把风光占尽。 <br /><br />　　挥霍定律：一、花不是自己的钱，二、花不是自己挣的钱，三、花自己轻易挣得来不费功夫的钱，四、花今天不花明天就作废的钱，五、花不花白不花的钱。 <br /><br />　　主持定律：活偶，永远为后台说话。 <br /><br />　　 官场定律：不在那位置时说那位置话，到了那位置不说那位置话。 <br /><br />　　 天下无直定律：所有颈椎、脊柱都是弯的，活人要直身子，必须强项、挺腰，用气、用力。 <br /><br />　　GDP定律：创造出，破坏也出，破坏越大的地方，出的越高。 <br /><br />　　 年节定律：看似物质，实际过的都是心情。 <br /><br />　　　过日子定律：总是要有储存、备用，体力的能力的物力的财力的，包括喜怒哀乐，包括柴米油盐。<br />脸谱定律：不是两面，是两张，一张熟悉的，很温暖，一张很冷，很陌生，或者倒过来。 <br /><br />　　机会定律：赶上了的铁成金，没赶上的金成铁。 <br /><br />　　门闩定律：就一根棍，横在中间，把所有的打开和将要的打开，统统关死。 <br /><br />　　　顺心定律：布衣粗食，喝凉水也觉痛快的日子。 <br /><br />　　求知定律：越学越深，越读越薄，越明白越简要。 <br /><br />　　读书快乐定律：打开一扇窗户，读出一种生命来。 <br /><br />　　书香定律：不是每个人都能闻到的，唯善知者。 <br /><br />　　人生定律：一辈子一盘棋，每一步都是自己走出来的。 <br /><br />　　信息定律：需要才是及时雨，其他都是过眼烟云。 <br /><br />　　　宝贵定律：久居心里，日常接触，没了才知道。 <br /><br />　　戏剧定律：过去就完，有欢乐就有悲伤，有上台就有下台，有开始就有结束，有那个就有这个。 <br /><br />　　科学定律：以结果为目的，从每一步做起，既宏观又细微，没快的内容。 <br /><br />　　名利定律：好名的，洁癖，至少有不做的事；好利的，歹徒，没有不做的事；名利捆一起都要的，恶棍，逮谁打谁。 <br /><br />　　深刻定律：宁静时和心对话的那一刻，只有耐得住孤独的人才会有。 <br /><br />　　　接触定律：许多时候都在和皮打交道，真实和心一样在里面裹着，绝不轻易站出来。 <br /><br />　　简单定律一：加法修业，减法生活，不给自己弄方程，出面积。 <br /><br />　　简单定律二：不要包装，拿一根绳子捆东西。 <br /><br />　　规定定律：无规才规，不定才定，都做到的，没有。 <br /><br />　　难办定律：上下都一样，什么事情都一样&mdash;&mdash;把自己摆进去。 <br /><br />　　　拿来定律：拿对了是药，拿错了是毒，会用的是药，不会用的是毒。 <br /><br />　　　幸福普适定律：先苦后乐，累后有得，在没想到的途中碰到想到。 <br /><br />　　倒霉定律：绕不过，躲不开，冰山走过又是刀山，陷阱后面是陷阱。 <br /><br />　　 季节定律：谁也挡不住地到来。 <br /><br />　　四时定律：春夏秋冬，重复不变的是那个轨道，不断嬗变的是风物、环境和人。 <br /><br />　　故乡定律：无论一生去了哪里，最后的心仍在这里。就像一个回力镖，甩出去还拐回来。 <br /><br />　　岁月定律：不论代，论年，有年始称岁：树叫年轮，人叫年景，生活叫年月，过去叫年间。 <br /><br />　　史学定律：走过的回头，也是前行的影子。任何历史都是当代史。 <br /><br />　　规律定律：始终不变，又经常重演；每重演一次，付出代价翻番。 <br /><br />　　婚姻定律：寻找一个从性格到性别跟你都起化学反应的人。 <br /><br />　　生活定律：明晰家庭物理，创造一个你与周围能发生互动关系的场。 <br /><br />　　机遇定律：没了那个时间，就没了那个时候。离开了那个地方，再回来也不是原来的地方。 <br /><br />　　无外定律：墙两边都是世界，圈内外都是人生，天地事都得经历，台上下都得走过。 <br /><br />　　板凳定律：所有站着的人都得坐，没有不弯腰的。 <br /><br />　　转化定律：慢是快的基因，快是速的毁灭，好是坏的开始，坏是好的结束。 <br /><br />　　　声誉定律：吹起来的泡泡，光大三秒，好东西埋没了，一千年后是更好的东西。 <br /><br />　　家什定律：生活在一起，就会成为自己的一部分。 <br /><br />　　文化定律：生活氤氲沉淀下的，以质为胜，不以数惊人。 <br /><br />　　人生定律：人生来弱，总持强。物有生来强，如天地金石山海，从不说。 <br /><br />　　人欲定律：看得见的不算数，摸得着的才放心。 <br /><br />　　　运动定律：无上不下，无下不上；无水不火，无火不水；无伏不起，无起不伏。 <br /><br />　　变道定律：不按规矩行驶，总想超越，变一次道，玩一次命。 <br /><br />　　部门定律：只要摆上位，就公说公有理，婆说婆有理。 <br /><br />　　城市生活定律：日夜颠倒，黑白反常，为生活编码，用符号定人。<br />计划定律：文章真做，事情勉为，履践时缩水。 <br /><br />　　拍卖定律：裸露羞藏，一丝不挂地论价。 <br /><br />　　社会定律：没有重来一次的假设，许多事情都是走过之后才明白的。 <br /><br />　　时间定律：来也是一，走也是一，始终一个一。 <br /><br />　　生命定律：一天一天，一点一点，一步一步。 <br /><br />　　气质定律：教不了，学不来，半开半掩，半天生半自蕴。 <br /><br />　　视觉定律：初看漂亮的不一定漂亮，初看不漂亮，看久了变成漂亮的才是真漂亮。 <br /><br />　　庙殿定律：正面有天尊，信香十里远，僧道自然来。 <br /><br />　　忌妒定律：在无德的天下通行。 <br /><br />　　牢骚定律：失意的伙伴。 <br /><br />　　调侃定律：&ldquo;自嘲＋嘲他&rdquo;，把美好和恶丑都放到哈哈镜里。 <br /><br />　　健康定律：与病有关的文明，病愈后又绝对会忘掉的东西。 <br /><br />　　　治病定律：不是药物，不在医院，你自己是你自己的最好医生。 <br /><br />　　　伪改革定律：权力和金钱挂钩，把不该市场化的市场化。 <br /><br />　　新运动定律：不是什么季节穿什么衣服，是到什么日子说什么话。 <br /><br />　　昔日颠倒定律：做仆的为上，称主的居下。 <br /><br />　　希望定律：明灭中，有寄托、没到手的那种想。 <br /><br />　　　珍贵定律：曾经的丢失，又不复有，不复再回来的。 <br /><br />　　 守恒定律：总量不变，得到同时失去，失去同时得到。 <br /><br />　　赚钱定律：昧心就行。 <br /><br />　　涨价定律：有机会就搭车，变个说法就涨价，越听证越涨，越垄断涨得越邪乎。 <br /><br />　　抉择定律：左思右想，日比夜看，都没用；关键时刻灵机发挥作用。 <br /><br />　　身体定律一：上半身决定下半身，下半身改变上半身。 <br /><br />　　影视定律：翻弄所有的陈谷子，为现代人充饥。 <br /><br />　　子弹定律：所有能穿越历史的子，都是弹，老子、孔子、庄子、孟子、墨子、列子，鬼谷子，包括精子、卵子。 <br /><br />　　空间定律：因为它发生的战争。 <br /><br />　　边缘定律：随时有出局的危险，又绝对是好球。 <br /><br />　　　流变定律：喝进去的是水，流出来的都叫液。 <br /><br />　　关键定律：能说出来的都不重要了。 <br /><br />　　单身定律：男人单身，是因为没有女人给予爱；女人单身，是因为没有男人值得爱。男人坚持单身是因为找不到对象；女人坚持单身是因为找不到好 <br /><br />　　对象。男人坚持独身，人们会以为他有事业心；女人坚持独身，人们会以为她有毛病。 <br /><br />　　 <br /><br />　　欣赏?崇拜定律：男人对女人欣赏，使女人多了妩媚和灵气；女人对男人崇拜，使男人有了力量和勇气。男人对女人过分欣赏，使女人轻浮自欺；女 <br /><br />　　人对男人盲目崇拜，使男人自命不凡。 <br /><br />　　糊涂?精明定律：男人糊涂一世但在热恋时绝对精明；女人精明一生但在热恋时特别糊涂。 <br /><br />　　两难定律：男人&mdash;&mdash;&mdash;没有女人心疼，有了女人头疼；女人&mdash;&mdash;&mdash;没有男人心慌，有了男人心烦。 <br /><br />　　心愿定律：男人的心愿是自己的腰包丰满，所以男人为了炫耀自己的钱财，衣服就越穿越多；女人的心愿是自己的身材苗条，所以女人为了炫耀自己的身材，衣服就越穿越少。 <br /><br />　　 约会定律：男人约会有意先到是为了讨好对方；女人约会故意迟到是为了考验对方。 <br /><br />　　 关注定律：男人关注大家关注的女人；女人关注自己心上的男人。 <br /><br />　　 失恋定律：男人失恋时，他会花时间忙事业当作报复；女人失恋时，她会把报复当作事业来做。 <br /><br />　　 忍受定律：男人能够忍受不幸的爱情，不能忍受不幸的婚姻；女人能够忍受不幸的婚姻，不能忍受不幸的爱情。 <br /><br />　　 反感定律：男人最反感老婆喋喋不休的埋怨；女人最讨厌老公默默无语的状态。<br />拿手好戏定律：男人的拿手好戏是撒谎，女人的拿手好戏是撒娇。 <br /><br />　　 逛商店定律：男人若想陪老婆逛商店，最好多带一张信用卡；女人若 <br /><br /><strong>八、著名定律（理）、法则</strong> <br /><br />　　 帕金森定律：英国著名历史学家诺斯古德?帕金森通过长期调查研究，写出一本名叫《帕金森定律》的书。他在书中阐述了机构人员膨胀的原因及后果：一个不称职的官员，可能有三条出路，第一是申请退职，把位子让给能干的人；第二是让一位能干的人来协助自己工作；第三是任用两个水平比自己更低的人当助手。这第一条路是万万走不得的，因为那样会丧失许多权利；第二条路也不能走，因为那个能干的人会成为自己的对手；看来只有第三条路最适宜。于是，两个平庸的助手分担了他的工作，他自己则高高在上发号施令，他们不会对自己的权利构成威胁。两个助手既然无能，他们就上行下效，再为自己找两个更加无能的助手。如此类推，就形成了一个机构臃肿，人浮于事，相互扯皮，效率低下的领导体系。 <br /><br />　　苛希纳定律：西方管理学中有一条著名的苛希纳定律：如果实际管理人员比最佳人数多两倍，工作时间就要多两倍，工作成本就要多4倍；如果实际管理人员比最佳人员多3倍，工作时间就要多3倍，工作成本就要多6倍。 <br /><br />　　250定律：美国著名推销员拉德在商战中总结出了&ldquo;250定律&rdquo;。他认为每一位顾客身后，大体有250名亲朋好友。如果您赢得了一位顾客的好感，就意味着赢得了250个人的好感；反之，如果你得罪了一名顾客，也就意味着得罪了250名顾客。这一定律有力地论证了&ldquo;顾客就是上帝&rdquo;的真谛。由此，我们可以得到如下启示：必须认真对待身边的每一个人，因为每一个人的身后，都有一个相对稳定的、数量不小的群体。善待一个人，就像拨亮一盏灯，照亮一大片。 <br /><br />　　　达维多定律：达维多定律是以英特尔公司副总裁达维多的名字命名的。他认为，一个企业要想在市场上总是占据主导地位，那么就要做到第一个开发出新产品，又第一个淘汰自己的老产品。这一定律的基点是着眼于市场开发和利益分割的成效。因为人们在市场竞争中无时无刻不在抢占先机，只有先入市场才能更容易获取较大的份额和较高的利润。 <br /><br />　　木桶定律：一个有许多块长短不同的木板箍成的木桶，决定其容量大小的并非其中最长的那块木板，而是其中最短的那块木板。同样，在一个企业的营销过程中，必然存在着许多相关的环节，只有找出制约企业经济效益提高的某一关键环节，把这一个矛盾解决了，其它矛盾就可以迎刃而解了。 <br /><br />　　 墨菲定律： １９４９年，一位名叫墨菲的空军上尉工程师，认为他的某位同事是个倒霉蛋，不经意间开了句玩笑：&ldquo;如果一件事情有可能被弄糟，让他去做就一定会弄糟。&rdquo;这句话迅速流传，并扩散到世界各地。在流传扩散的过程中，这句笑话逐渐失去它原有的局限性，演变成各种各样的形式，其中一个最通行的形式是：&ldquo;如果坏事情有可能发生，不管这种可能性多么小，它总会发生，并引起最大可能的损失。&rdquo;这就是著名的&ldquo;墨菲定律&rdquo;。下面是墨菲定律的一些变种或推论。 <br /><br />　　人生哲学 <br /><br />　　１．别试图教猫唱歌，这样不但不会有结果，还会惹猫不高兴? <br /><br />　　２．别跟傻瓜吵架，不然旁人会搞不清楚，到底谁是傻瓜? <br /><br />　　３．不要以为自己很重要，因为没有你，太阳明天还是一样从东方升上来? <br /><br />　　４．笑一笑，明天未必比今天好。 <br /><br />　　５．好的开始，未必就有好结果；坏的开始，结果往往会更糟。 <br /><br />　　处世原理 <br /><br />　　６．你若帮助了一个急需用钱的朋友，他一定会记得你&mdash;&mdash;在他下次急需用钱的时候。 <br /><br />　　７．有能力的&mdash;&mdash;让他做；没能力的&mdash;&mdash;教他做；做不来的&mdash;&mdash;管理他。 <br /><br />　　８．你早到了，会议却取消；你准时到，却还要等；迟到，就是迟了。<br />９．你携伴出游，越不想让人看见，越会遇见熟人。 <br /><br />　　爱情意义 <br /><br />　　１０．你爱上的人，总以为你爱上他是因为：他使你想起你的老情人。 <br /><br />　　１１．你最后硬着头皮寄出的情书；寄达对方的时间有多长，你反悔的时间就有多长。 <br /><br />　　生活常识 <br /><br />　　１２．东西越好，越不中用。 <br /><br />　　１３．一种产品保证６０天不会出故障，等于保证第６１天一定就会坏掉。 <br /><br />　　１４．东西久久都派不上用场，就可以丢掉；东西一丢掉，往往就必须要用它。 <br /><br />　　１５．你丢掉了东西时，最先去找的地方，往往也是可能找到的最后一个地方。 <br /><br />　　１６．你往往会找到不是你正想找的东西。 <br /><br />　　１７．你出去买爆米花的时候，银幕上偏偏就出现了精彩镜头。 <br /><br />　　１８．另一排总是动的比较快；你换到另一排，你原来站的那一排，就开始动的比较快了；你站的越久，越有可能是站错了排。 <br /><br />　　１９．一分钟有多长？ 这要看你是蹲在厕所里面，还是等在厕所外面。 <br /><br />　　二八法则：1897年，意大利经济学家帕列托在对19世纪英国社会各阶层的财富和收益统计分析时发现：80%的社会财富集中在20%的人手里，而80%的人只拥有社会财富的20%，这就是&ldquo;二八法则&rdquo;。&ldquo;二八法则&rdquo;反应了一种不平衡性，但它却在社会、经济及生活中无处不在。 附：破窗理论等在商品营销中，商家往往会认为所有顾客一样重要；所有生意、每一种产品都必须付出相同的努力，所有机会都必须抓住。而&ldquo;二八法则&rdquo;恰恰指出了在原因和结果、投入和产出、努力和报酬之间存在这样一种典型的不平衡现象：80%的成绩，归功于20%的努力；市场上80%的产品可能是20%的企业生产的；20% 的顾客可能给商家带来80%的利润。遵循&ldquo;二八法则&rdquo;的企业在经营和管理中往往能抓住关键的少数顾客，精确定位，加强服务，达到事半功倍的效果。美国的普尔斯马特会员店始终坚持会员制，就是基于这一经营理念。&ldquo;二八法则&rdquo;同样适用于我们的生活，如一个人应该选择在几件事上追求卓越，而不必强求在每件事上都有好的表现；锁定少数能完成的人生目标，而不必追求所有的机会。 <br /><br />　　马太效应：《新约?马太福音》中有这样一个故事，一个国王远行前，交给三个仆人每人一锭银子，吩咐他们：&ldquo;你们去做生意，等我回来时，再来见我。&rdquo;国王回来时，第一个仆人说：&ldquo;主人，你交给我的一锭银子，我已赚了10锭。&rdquo;于是国王奖励了他10座城邑。第二个仆人报告说：&ldquo;主人，你给我的一锭银子，我已赚了5锭。&rdquo; 于是国王便奖励了他5座城邑。第三个仆人报告说：&ldquo;主人，你给我的一锭银子，我一直包在手巾里存着，我怕丢失，一直没有拿出来。&rdquo;于是国王命令将第三个仆人的那锭银子赏给第一个仆人，并且说：&ldquo;凡是少的，就连他所有的，也要夺过来。凡是多的，还要给他，叫他多多益善。&rdquo;这就是马太效应，它反映了当今社会中存在的一个普遍现象，即赢家通吃。 <br /><br />　　对企业经营发展而言，马太效应告诉我们，要想在某个领域保持优势，就必须在此领域迅速做大。当你成为某个领域的领头羊的时候，即便投资回报率相同，你也能更轻易地获得比弱小的同行更大的收益。而若没有实力迅速在某个领域做大，就要不停地寻找新的发展领域，才能保证获得较好的回报。 <br /><br />　　手表定理：手表定理是指一个人有一只表时，可以知道现在是几点钟，而当他同时拥有两只表时却无法确定。两只表并不能告诉一个人更准确的时间，反而会让看表的人失去对准确时间的信心。你要做的就是选择其中较信赖的一只，尽力校准它，并以此作为你的标准，听从它的指引行事。记住尼采的话：&ldquo;兄弟，如果你是幸运的，你只需有一种道德而不要贪多，这样，你过桥更容易些。&rdquo; <br /><br />　　如果每个人都&ldquo;选择你所爱，爱你所选择&rdquo;，无论成败都可以心安理得。然而，困扰很多人的是：他们被&ldquo;两只表&rdquo;弄得无所，心身交瘁，不知自己该信仰哪一个，还有人在环境、他人的压力下，违心选择了自己并不喜欢的道路，为此而郁郁终生，即使取得了受人瞩目的成就，也体会不到成功的快乐。 <br />手表定理在企业经营管理方面给我们一种非常直观的启发，就是对同一个人或同一个组织的管理不能同时采用两种不同的方法，不能同时设置两个不同的目标。甚至每一个人不能由两个人来同时指挥，否则将使这个企业或这个人无所适从。手表定理所指的另一层含义在于每个人都不能同时挑选两种不同的价值观，否则，你的行为将陷于混乱。 <br /><br />　　不值得&rdquo;定律：不值得定律最直观的表述是：不值得做的事情，就不值得做好，这个定律似乎再简单不过了，但它的重要性却时时被人们疏忘。不值得定律反映出人们的一种心理，一个人如果从事的是一份自认为不值得做的事情，往往会保持冷嘲热讽，敷衍了事的态度。不仅成功率小，而且即使成功，也不会觉得有多大的成就感。 <br /><br />　　 哪些事值得做呢？一般而言，这取决于三个因素。 <br /><br />　　1、价值观。关于价值观我们已经谈了很多，只有符合我们价值观的事，我们才会满怀热情去做。 <br /><br />　　2、个性和气质。一个人如果做一份与他的个性气质完全背离的工作，他是很难做好的，如一个好交往的人成了档案员，或一个害羞者不得不每天和不同的人打交道。 <br /><br />　　3、现实的处境。同样一份工作，在不同的处境下去做，给我们的感受也是不同的。例如，在一家大公司，如果你最初做的是打杂跑腿的工作，你很可能认为是不值得的，可是，一旦你被提升为领班或部门经理，你就不会这样认为了。 <br /><br />　　总结一下，值得做的工作是：符合我们的价值观，适合我们的个性与气质，并能让我们看到期望。如果你的工作不具备这三个因素，你就要考虑换一个更合适的工作，并努力做好它。 <br /><br />　　因此，对个人来说，应在多种可供选择的奋斗目标及价值观中挑选一种，然后为之而奋斗。&ldquo;选择你所爱的，爱你所选择的&rdquo;，才可能激发我们的奋斗毅力，也才可以心安理得。而对一个企业或组织来说，则要很好地分析员工的性格特性，合理分配工作，如让成就欲较强的职工单独或牵头来完成具有一定风险和难度的工作，并在其完成时给予定时的肯定和赞扬；让依附欲较强的职工更多地参加到某个团体中共同工作；让权力欲较强的职工担任一个与之能力相适应的主管。同时要加强员工对企业目标的认同感，让员工感觉到自己所做的工作是值得的，这样才能激发职工的热情。 <br /><br />　　 彼得原理：管理学家劳伦斯?丁?彼得（Laurence．J．Peter），1917年牛于加拿大的范库弗，1957年获美国华盛顿州立大学学士学位，6年后又获得该校教育哲学博士学位，他阅历丰富，博学多才，著述颇丰，他的名字还被收人了《美国名人榜》、《美国科学界名人录》和《国际名人传记辞典》等辞书中。 彼得原理（The Peter PrinciPle）正是彼得根据千百个有关组织中不能胜任的失败实例的分析而归纳出来的。其具体内容是：&ldquo;在一个等级制度中，每个职工趋向于上升到他所不能胜任的地位&rdquo;。彼得指出，每一个职工由于在原有职位上工作成绩表现好（胜任），就将被提升到更高一级职位；其后，如果继续胜任则将进一步被提升，直至到达他所不能胜任的职位。由此导出的彼得推论是，&ldquo;每一个职位最终都将被一个不能胜任其工作的职工所占据。层级组织的工作任务多半是由尚未达到不胜任阶层的员工完成的。&rdquo;每一个职工最终都将达到彼得高地，在该处他的提升商数（PQ）为零。至于如何加速提升到这个高地，有两种方法。其一。是上面的&ldquo;拉动&rdquo;，即依靠裙带关系和熟人等从上面拉；其二是自我的&ldquo;推动&rdquo;，即自我训练和进步等，而前者是被普遍采用的。 <br /><br />　　彼得原理首次公开发表于1960年9月美国联邦出资的一次研习会上，听众是一群负责教育研究计划、并刚获晋升的项目主管，彼得认为他们多数人&ldquo;只是拼命地想复制一些老掉牙了的统计习题&rdquo;，于是引介彼得原理说明他们的困境。演说召来了敌意与嘲笑，但是彼得仍然决定以独特的讽刺手法呈现彼得原理，尽管所有案例研究都经过精确编纂，且引用的资料也都符合事实，最后定稿于1965年春完成，然后总计有16家之多的出版社无情地拒绝了该书的手稿。1966年，作者零星地在报纸上发表了几篇述论同一主题的文章，读者的反应异常热烈，引得各个出版社趋之若婺鸳。正如彼得在自传中提到的，人偶尔会在镜中瞥见自己的身影而不能立即自我辩认，于是在不自知前就加以嘲笑一番，这样的片刻里正好可以使人进一步认识自己，&ldquo;彼得原理&rdquo;扮演的正是那样一面镜子。 <br />零和游戏：一个游戏无论几个人来玩，总有输家和赢家，赢家所赢的都是输家所翰的，所以无论输赢多少，正负相抵，最后游戏的总和都为零，这就是零和游戏。 <br /><br />　　 华盛顿合作规律：华盛顿合作规律说的是：一个人敷衍了事，两个人互相推诿，三个人则永无成事之日。多少有点类似于&ldquo;三个和尚&rdquo;的故事。人与人的合作不是人力的简单相加，而是复杂和微妙得多。在人与人的合作中，假定每一个人的能力都为1,那么10个人的合作结果有时比10大得多，有时甚至比1还要小。因为人不是静止的物，而更像方向不同的能量，相互推动时自然事半功倍，相互抵触时则一事无成。 <br /><br />　　 酒与污水定律： 酒与污水定律是指，如果把一匙酒倒进一桶污水中，你得到的是一桶污水；如果把一匙污水倒进一桶酒中，你得到的还是一桶污水。几乎在任何组织里，都存在几个难弄的人物，他们存在的目的似乎就是为了把事情搞糟。他们到处搬弄是非，传播流言、破坏组织内部的和谐。最糟糕的是，他们像果箱里的烂苹果，如果你不及时处理，它会迅速传染，把果箱里其它苹果也弄烂，&ldquo;烂苹果&rdquo;的可怕之处在于它那惊人的破坏力。一个正直能干的人进入一个混乱的部门可能会被吞没，而一个人无德无才者能很快将一个高效的部门变成一盘散沙。组织系统往往是脆弱的，是建立在相互理解、妥协和容忍的基础上的，它很容易被侵害、被毒化。破坏者能力非凡的另一个重要原因在于，破坏总比建设容易。一个能工巧匠花费时日精心制作的陶瓷器，一头驴子一秒钟就能毁坏掉。如果拥有再多的能工巧匠，也不会有多少像样的工作成果。如果你的组织里有这样的一头驴子，你应该马上把它清除掉；如果你无力这样做，你就应该把它拴起来。 <br /><br />　　蘑菇管理原理： 蘑菇长在阴暗的角落，得不到阳光，也没有肥料，自生自灭，只有长到足够高的时候才开始被人关注，可此时它自己已经能够接受阳光了。蘑菇管理是大多数组织对待初入门者、初学者的一种管理方法。从传统的观念上讲，&ldquo;蘑菇经历&rdquo;是一件好事，它是人才蜕壳羽化前的一种磨炼，对人的意志和耐力的培养有促进作用。但用发展的眼光来看，蘑菇管理有着先天的不足：一是太慢，还没等它长高长大恐怕疯长的野草就已经把它盖住了，使它没有成长的机会；二是缺乏主动，有些本来基因较好的蘑菇，一钻出土就碰上了石头，因为得不到帮助，结果胎死腹中。 <br /><br />　　让初入门者当上一段时间的&ldquo;蘑菇&rdquo;，可以消除他们不切实际的幻想，从而使他们更加接近现实，更实际、更理性地思考问题和处理问题。领导者应当注意的是，这一过程不可过长，时间太长便会使其消极退化乃至枯萎，须知不给阳光不给关爱不仅是任其自生自灭，而且更是对其成长的抑制。如何让他们成功地走过生命中的这一段，尽快吸取经验、成熟起来，这才是领导者所应当考虑的。 <br /><br />　　奥卡姆剃刀定律：12世纪，英国奥卡姆的威廉主张唯名论，只承认确实存在的东西，认为那些空洞无物的普遍性概念都是无用的累赘，应当被无情地&ldquo;剃除&rdquo;。他主张&ldquo;如无必要，勿增实体&rdquo;。这就是常说的&ldquo;奥卡姆剃刀&rdquo;。这把剃刀曾使很多人感到威胁，被认为是异端邪说，威廉本人也因此受到迫害。然而，并未损害这把刀的锋利，相反，经过数百年的岁月，奥卡姆剃刀已被历史磨得越来越快，并早已超载原来狭窄的领域，而具有广泛、丰富、深刻的意义。奥卡姆剃刀定律在企业管理中可进一步演化为简单与复杂定律：把事情变复杂很简单，把事情变简单很复杂。这个定律要求，我们在处理事情时，要把握事情的主要实质，把握主流，解决最根本的问题，尤其要顺应自然，不要把事情人为地复杂化，这样才能把事情处理好。 <br /><br />　　 破窗理论：美国政治学家威尔逊和犯罪学家凯林经过观察提出了&ldquo;破窗理论&rdquo;。如果有人打坏了一栋建筑上的一块玻璃，又没有及时修复，别人就可能受到某些暗示性的纵容，去打碎更多的玻璃。久而久之，这些窗户就给人造成一种无序的感觉，在这种麻木不仁的氛围中，犯罪就会滋生、蔓延。&ldquo;破窗理论&rdquo;更多的是从犯罪的心理去思考问题，但不管把&ldquo;破窗理论&rdquo;用在什么领域，角度不同，道理却相似：环境具有强烈的暗示性和诱导性，必须及时修好&ldquo;第一扇被打碎玻璃的窗户&rdquo;。推而广之，从人与环境的关系这个角度去看，我们周围生活中所发生的许多事情，不正是环境暗示和诱导作用的结果吗？<br />　达维多定律：达维多定律是以英特尔公司副总裁达维多的名字命名的。他认为，一个企业要想在市场上总是占据主导地位，那么就要做到第一个开发出新产品，又第一个淘汰自己的老产品。这一定律的基点是着眼于市场开发和利益分割的成效。因为人们在市场竞争中无时无刻不在抢占先机，只有先入市场才能更容易获取较大的份额和较高的利润。 <br /><br /><strong>九、企业管理定律（理）、法则 <br /></strong><br />　　 蓝斯登原则：在你往上爬的时候，一定要保持梯子的整洁，否则你下来时可能会滑倒。提出者：美国管理学家蓝斯登。点评：进退有度，才不至进退维谷；宠辱皆忘，方可以宠辱不惊。 <br /><br />　　卢维斯定理：谦虚不是把自己想得很糟，而是完全不想自己。提出者：美国心理学家h?卢维斯。点评：如果把自己想得太好，就很容易将别人想得很糟。 <br /><br />　　 托利得定理：测验一个人的智力是否属于上乘，只看脑子里能否同时容纳两种相反的思想，而无碍于其处世行事。提出者：法国社会心理学家h?m?托利得。点评：思可相反，得须相成。 <br /><br />　　刺猬理论：刺猬在天冷时彼此靠拢取暖，但保持一定距离，以免互相刺伤。点评：保持亲密的重要方法，乃是保持适当的距离。 <br /><br />　　鲦鱼效应：鲦鱼因个体弱小而常常群居，并以强健者为自然首领。将一只稍强的鲦鱼脑后控制行为的部分割除后，此鱼便失去自制力，行动也发生紊乱，但其他鲦鱼却仍像从前一样盲目追随。提出者：德国动物学家霍斯特。点评：1、下属的悲剧总是领导一手造成的。2、下属觉得最没劲的事，是他们跟着一位最差劲的领导。 <br /><br />　　 雷鲍夫法则：在你着手建立合作和信任时要牢记我们语言中： <br /><br />　　1、最重要的八个字是：我承认我犯过错误 <br /><br />　　2、最重要的七个字是：你干了一件好事 <br /><br />　　3、最重要的六个字是：你的看法如何 <br /><br />　　4、最重要的五个字是：咱们一起干 <br /><br />　　5、最重要的三个字是：谢谢您 <br /><br />　　6、最重要的两个字是：咱们 <br /><br />　　提出者：美国管理学家雷鲍夫。点评：1、最重要的四个字是：不妨试试；2、最重要的一个字是：您 <br /><br />　　洛伯定理：对于一个经理人来说，最要紧的不是你在场时的情况，而是你不在场时发生了什么。提出者：美国管理学家r?洛伯。点评：如果只想让下属听你的，那么当你不在身边时他们就不知道应该听谁的了。 <br /><br />　　 斯坦纳定理：在哪里说得愈少，在哪里听到的就愈多。提出者：美国心理学家s?t?斯坦纳。点评：只有很好听取别人的，才能更好说出自己的。 <br /><br />　　费斯诺定理：人有两只耳朵却只有一张嘴巴，这意味着人应该多听少讲。提出者：英国联合航空公司总裁兼总经理l?费斯诺。点评：说得过多了，说的就会成为做的障碍。 <br /><br />　　牢骚效应：凡是公司中有对工作发牢骚的人，那家公司或老板一定比没有这种人或有这种人而把牢骚埋在肚子里的公司要成功得多。提出者：美国密歇根大学社会研究院。点评：1、牢骚是改变不合理现状的催化剂。2、牢骚虽不总是正确的，但认真对待牢骚却总是正确的。 <br /><br />　　避雷针效应：在高大建筑物顶端安装一个金属棒，用金属线与埋在地下的一块金属板连接起来，利用金属棒的尖端放电，使云层所带的电和地上的电逐渐中和，从而保护建筑物等避免雷击。点评：善疏则通，能导必安 <br /><br />　　氨基酸组合效应：组成人体蛋白的八种氨基酸，只要有一种含量不足，其他七种就无法合成蛋白质。点评：当缺一不可时，&quot;一&quot;就是一切。 <br /><br />　　 米格-25效应：前苏联研制的米格-25喷气式战斗机的许多零部件与美国的相比都落后，但因设计者考虑了整体性能，故能在升降、速度、应急反应等方面成为当时世界一流。点评：所谓最佳整体，乃是个体的最佳组合。 <br />磨合效应：新组装的机器，通过一定时期的使用，把磨擦面上的加工痕迹磨光而变得更加密合。点评：要想达到完整的契合，须双方都作出必要的割舍。 <br /><br />　　吉尔伯特法则：工作危机最确凿的信号，是没有人跟你说该怎样作。提出者：英国人力培训专家b?吉尔伯特。点评：真正危险的事，是没人跟你谈危险。 <br /><br />　　权威暗示效应：一化学家称，他将测验一瓶臭气的传播速度，他打开瓶盖15秒后，前排学生即举手，称自己闻到臭气，而后排的人则陆续举手，纷纷称自己也已闻到，其实瓶中什么也没有。点评：迷信则轻信，盲目必盲从。 <br /><br />　　 古特雷定理：每一处出口都是另一处的入口。提出者：美国管理学家W?古特雷。点评：上一个目标是下一个目标的基础，下一个目标是上一个目标的延续。 <br /><br />　　 列文定理：那些犹豫着迟迟不能作出计划的人，通常是因为对自己的能力没有把握。提出者：法国管理学家P?列文。点评：如果没有能力去筹划，就只有时间去后悔了。 <br /><br />　　 弗洛斯特法则：在筑墙之前应该知道把什么圈出去，把什么圈进来。提出者：美国思想家W?P?弗洛斯特。点评：开始就明确了界限，最终就不会作出超越界限的事来。 <br /><br />　　 波克定理：只有在争辩中，才可能诞生最好的主意和最好的决定。提出者：美国庄臣公司总经理詹姆士?波克。点评：无磨擦便无磨合，有争论才有高论。 <br /><br />　　 韦奇定理：即使你已有了主见，但如果有十个朋友看法和你相反，你就很难不动摇。提出者：美国洛杉矶加州大学经济学家伊渥?韦奇。点评：1、未听之时不应有成见，既听之后不可无主见。2、不怕开始众说纷纭，只怕最后莫衷一是。 <br /><br />　　福克兰定律：没有必要作出决定时，就有必要不作决定。提出者：法国管理学家D?L?福克兰。点评：当不知如何行动时，最好的行动就是不采取任何行动。 <br /><br />　　王安论断：犹豫不决固然可以免去一些作错事的机会，但也失去了成功的机遇。提出者：美籍华裔企业家王安博士。点评：寡断能使好事由好变坏，果断可将危机转危为安。 <br /><br />　　格瑞斯特定理：杰出的策略必须加上杰出的执行才能奏效。提出者：美国企业家H?格瑞斯特。点评：好事干实更好，实事办好愈实。 <br /><br />　　吉德林法则：把难题清清楚楚地写出来，便已经解决了一半。提出者：美国通用汽车公司管理顾问查尔斯?吉德林。点评：杂乱无章的思维，不可能产生有条有理的行动 <br /><br />　　 沃尔森法则：把信息和情报放在第一位，金钱就会滚滚而来。提出者：美国企业家s?m?沃尔森。点评：你能得到多少，往往取决于你能知道多少。 <br /><br />　　 塔马拉效应：塔马拉是捷克雷达专家弗?佩赫发明的一种雷达，它与其他雷达的最大不同是不发射信号而只接收信号，故不会被敌方反雷达装置发现。点评：善藏者人不可知，能知者人无以藏。 <br /><br />　　 小池定理：越是沉醉，就越是抓住眼前的东西不放。提出者：日本管理学家小池敬。点评：自我陶醉不易清醒，自以为是不喜批评。 <br /><br />　　赫勒法则：当人们知道自己的工作成绩有人检查的时候会加倍努力。提出者：英国管理学家h?赫勒。点评：只有在相互信任的情况下，监督才会成为动力。 <br /><br />　　 横山法则：最有效并持续不断的控制不是强制，而是触发个人内在的自发控制。提出者：日本社会学家横山宁夫。点评：有自觉性才有积极性，无自决权便无主动权。 <br /><br />　　 蝴蝶效应：&quot;紊乱学&quot;研究者称，南半球某地的一只蝴蝶偶尔扇动一下翅膀所引起的微弱气流，几星期后可变成席卷北半球某地的一场龙卷风。他们将这种由一个极小起因，经过一定的时间，在其他因素的参与作用下，发展成极为巨大和复杂后果的现象称为&quot;蝴蝶效应&quot;。点评：善终者慎始，谨小者慎微。<br />　阿什法则：承认问题是解决问题的第一步。提出者：美国企业家m?k?阿什。点评：你愈是躲着问题，问题愈会揪住你不放。 <br /><br />　　洛克忠告：规定应该少定，一旦定下之后，便得严格遵守。提出者：英国教育家洛克。点评：简则易循，严则必行。 <br /><br />　　热炉法则：当人用手去碰烧热的火炉时，就会受到&quot;烫&quot;的惩罚，其有以下三个特点：即时性、预警性、平等性。点评：罪与罚能相符，法与治可相期。 <br /><br />　　 柯美雅定律：世上没有十全十美的东西，所以任何东西都有改革的余地。提出者：美国社会心理学家m?r?柯美雅。点评：不拘于常规，才能激发出创造力。 <br /><br />　　 达维多夫定律：没有创新精神的人永远也只能是一个执行者。提出者：前苏联心理学家达维多夫。点评：只有敢为人先的人，才最有资格成为真正的先驱者。 <br /><br />　　自吃幼崽效应：美国硅谷企业竞争十分激烈，以至于各公司都积极寻找自己的致命弱点，所有公司共同的生存之道是：拿出更好看产品来击败自己的原有产品。有人将这种行为戏称为&quot;自吃幼崽&quot;。点评：1、自己不逼自己，别人迟早会逼你。2、敢于对过去告一个段落，才有信心掀开新的一章。 <br /><br />　　舍恩定理：新思想只有落到真正相信它，对它着迷的人手里才能开花结果。提出者：美国麻省理工学院教授舍恩。点评：只有信之不疑，才能持之以恒。 <br /><br />　　吉宁定理：真正的错误是害怕犯错误。提出者：美国管理学家h?吉宁。点评：不怕错误的人，错误往往也离他最远。 <br /><br />　　卡贝定理：放弃是创新的钥匙。提出者：美国电话电报公司前总经理卡贝。点评：在未学会放弃之前，你将很难懂得什么是争取。 <br /><br />　　 吉普林忠告：将成败同等看待。提出者：英国作家、诺贝尔文学奖获得者吉普林。点评：如果不明白失败是什么，那么对成功的理解也是片面的。 <br /><br />　　史华兹论断：所有&quot;不幸事件&quot;，都只有在我们认为它不幸的情况下，才会真正成为不幸事件。提出者：美国管理心理学家d?克华兹。点评：若能坏中看好，终会好上加好。 <br /><br />　　廷克定律：如果你处在第二的位置，你就总想努力去争作第一。提出者：英国管理学家哈罗德?廷克。点评：欲往高处走，须向高处看。 <br /><br />　　鲁尼恩定律：赛跑时不一定快的赢，打架时不一定弱的输。提出者：奥地利经济学家r?h?鲁尼恩。点评：无备，强不抵弱，出奇，弱可胜强。 <br /><br />　　史密斯原则：如果你不能战胜他们，你就加入到他们之中去。提出者：美国通用汽车公司前董事长r?史密斯。点评：竞争使人进步最快，合作让人得到最多。 <br /><br />　　阿尔巴德定理：一个企业经营成功与否，全靠对顾客的要求了解到什么程度。提出者：匈牙利全面质量管理国际有限公司顾问波尔加?韦雷什?阿尔巴德。点评：看到了别人的需要，你就成功了一半；满足了别人的需求，你就成功了全部。 <br /><br />　　冰淇淋哲学：卖冰淇淋必须从冬天开始，因为冬天顾客少，会逼迫你降低成本，改善服务。如果能在冬天的逆境中生存，就再也不会害怕夏天的竞争。提出者：台湾著名企业家王永庆。点评：逆境不错，顺境更好。 <br /><br />　　布里特定理：商品不作广告，就像姑娘在暗处向小伙子递送秋波，脉脉此情只有她自己知道。提出者：英国广告学专家s?布里特。点评：要推而广之，先广而告之。 <br /><br />　　伯内特定理：只有占领头脑，才会占有市场。提出者：美国广告专家利奥?伯内特。点评：脍炙人口才会耐人寻味，深得人心方可引人入胜。 <br /><br />　　 拉图尔定律：一个好品名可能无助于劣质产品的销售，但是一个坏品名则会使好产品滞销。提出者：法国诺门公司德国分公司负责人苏珊?拉图尔。点评：取名的艺术，亦是取得成功的艺术。 <br /><br />　　赫斯定律：广告超过12个字，读者的记忆力要降低50%。提出者：澳大利亚广告家h?赫斯。点评：忘却即等于抛弃。<br />玛丽法则：假如还没有破，就不要去修它，免得弄巧成拙。提出者：美国著名企业家玛丽?凯?阿什。点评：弄巧之所以成拙，往往是因为本来就无巧可弄。 <br /><br />　　弗里施定理：没有满意的工作人员，就没有满意的顾客。提出者：德国慕尼黑企业咨询顾问弗里施。点评：协调内外关系，从协调内部关系开始。 <br /><br />　　反哺效应：动物学家将某些动物长大后把觅到的食物给予其父母的行为称为反哺。点评：给别人好处的人，往往也是得到好处最多的人。 <br /><br />　　 史崔维兹定理：如果你为获得好处而帮助他人，就不算帮助他人。提出者：美国社会心理学家g?史崔维兹。点评：动机不纯，行为失真。 <br /><br />　　奥狄思法则：在每一次谈判中，你都应准备向对方作出让步。提出者：美国谈判专家j?s?奥狄思。点评：争，丈不足；让，寸有余。 <br /><br />　　居家效应：一个人在家里或自己最熟悉的环境中，言谈举止表现得最为自信和从容。点评：没有实力垫底，自信永远是苍白的。 <br /><br />　　尼伦伯格原则：一场圆满的、成功的谈判，每一方都应是胜利者。提出者：美国著名谈判学家尼伦伯格。点评：总想自己得势，必然势不两立。 <br /><br />　　 比林定律：一生中的麻烦有一半是由于太快说&quot;是&quot;，太慢说&quot;不&quot;造成的。提出者：美国幽默作家比林。点评：1、没有否决权，发言权也很容易被剥夺。2、对不该让步的事不让步，别人反而更容易给你让步。 <br /><br />　　克林纳德法则：与人相处得好坏，在很大程度上取决于我们用什么方式与人打交道。提出者：美国人际关系学家h?h?克林纳德。点评：交之有道，能打好交道；来而无往，难有常来往。 <br /><br />　　忌讳效应：因风俗习惯或个人理由等，对某些言语或举动有所顾忌，积久成为禁忌。点评：知道别人不喜欢什么，比知道别人喜欢什么更重要。 <br /><br />　　弗里德曼定律 ：当一个人的需要可以满足另一个人的需要时，两人就趋于互相喜欢。提出者：美国心理学家n?w?弗里德曼。点评：有利益与利益的相互补充，才会有需要与需要的相互满足。 <br /><br />　　基利定理：容忍失败，这是人们可以学习并加以运用的极为积极的东西。提出者：美国多布林咨询公司集团总经理拉里?基利。点评：1、成功者之所以成功，只不过是他不被失败左右而已。2、不许失败，无异于不许成功。 <br /><br />　　沸腾效应：水温升到99度，还不是开水，其价值有限；若再添一把火，在99度的基础上再升高1度，就会使水沸腾，并产生大量水蒸气来开动机器，从而获得巨大的经济效益。点评：只差一点点，往往是导致最大差别的关键。 <br /><br />　　王永庆法则：节省一元钱等于净赚一元钱。提出者：台湾企业界&quot;精神领袖&quot;台塑总裁王永庆。点评：赚钱要依赖别人，节省只取决自己。<br />&nbsp;</p>]]></description><category>用户体验</category><comments>http://www.vvwww.com/post/ue230/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=230</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=230&amp;key=2f4e1cb1</trackback:ping></item><item><title>Google Android平台经理谈2011年Android发展路线图</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/mobile_app229/</link><pubDate>Mon, 07 Feb 2011 01:05:22 +0800</pubDate><guid>http://www.vvwww.com/post/mobile_app229/</guid><description><![CDATA[<p>本文由SocialBeta内容贡献者wisp编译自<a href="http://blogs.forbes.com/oliverchiang/2011/01/25/unhappy-with-slow-growth-of-android-app-purchases-google-talks-2011-roadmap/"><font color="#2266bb">unhappy-with-slow-growth-of-android-app-purchases-google-talks-2011-roadmap</font></a>。</p><p>Google Android平台经理Eric Chu明白虽然android智能手机用户在快速增长，但是付费应用的交易数量却表现惨淡。在周二于圣弗朗西斯科举行的Inside Social Apps会议上，Chu明确表示Google对付费应用交易完全不满意。</p><p>虽然目前对于Google在2011年的Android发展战略仍缺乏具体地消息（Chu表示&ldquo;敬请期待进一步消息&rdquo;），但大致可以才想到Google会在下面几个方面发力。</p><p><strong>In-app payments system</strong><strong>（应用内交易系统）：</strong><br />Chu表示本季度Android将推出应用内交易系统，一年前苹果也有此类举措。在应用内交易系统中，用户在应用内购买（译者：比如购买更多的功能或游戏装备等等），这将有助于开发者利用发展迅速的虚拟货物移动市场来实现盈利。</p><p><strong>Carrier billing（运营商计费）：</strong><br />12月，Google推出AT&amp;T计费系统，用户可以通过手机话费来为应用付费，不需要采用另外一种支付系统。希望Google能在全球与更多的运营商进行类似的合作，Chu如此表示，另外还说与运营建立付费系统虽然昂贵且耗时，但是对于用户来说是个很有价值的功能，同时也可以提高Android应用的交易额。</p><p><strong>Improve user discovery of apps in Market</strong><strong>（改善</strong><strong>Android Market</strong><strong>中应用发现功能（译者：原文是</strong><strong>disicovery</strong><strong>（发现），而非</strong><strong>search</strong><strong>，原文更加贴近愿意））</strong>:<br />Chu表示已经有一个团队在负责剔除Android Market中的劣质应用，还表示将制定市场排名算法以帮助用户更方便地发现最好的应用。</p><p><strong>Getting social</strong><strong>（社会化）</strong>:<br />Chu表示为了使得市场和Android更加社会化，Google将推出&ldquo;最好的社交图&rdquo;&mdash;&mdash;Android address book（安卓通讯录），并且对开发者开发。Android address book将聚合了多渠道的用户联系人 ，而不仅仅是Google自己的通讯录。</p><p><strong>HTML5</strong>:<br />虽然Chu对此并未透露太多，但是Google一直把赌注放在HTML5上。</p><p>有意思的一点是，就Larry Page替代Eric Schmidt成为CEO一事，Chu如此表示&ldquo;安卓是google的战略投资&hellip;我不希望看到有任何改变&rdquo;。</p>]]></description><category>移动应用</category><comments>http://www.vvwww.com/post/mobile_app229/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=229</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=229&amp;key=7f6b2145</trackback:ping></item><item><title>8大导致社会化媒体营销收效甚微的原因</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/www228/</link><pubDate>Mon, 07 Feb 2011 00:34:27 +0800</pubDate><guid>http://www.vvwww.com/post/www228/</guid><description><![CDATA[<p>有一些读者向我抱怨，他们在新浪微博上也开设了企业账号，也很认真的在尝试着，可是觉得效果甚微，甚至很难进行效果的评估。他们开始有一些疑虑，社会化媒体营销真的有效果吗？ROI真的比传统营销要高吗？社会化媒体营销效果真的可以评估吗？很多企业也许因为这个原因那个原因导致了社会化媒体营销收效甚微甚至放弃了，我整理了下，社会化媒体营销失效可能是以下几个方面的原因<img class="alignright" height="263" alt="" src="http://ww3.sinaimg.cn/large/61fe39eajw6dcdd0k5n3pj.jpg" width="355" />：</p><h2><strong>一、 </strong><strong>从态度上来说，你们企业是真心在做社会化媒体营销吗？</strong></h2><p>很多企业当初做社会化媒体营销，可能是因为看到别的企业在做，或者是老板为了追下时髦，大家都在说社会化媒体营销，自己企业不去做下，有点不好意思，于是，随便找了人，就随便在新浪微博上注册了账号，随便发了几条微博，和粉丝随便的交流了下，最后，执行这个事情的人就随便给忘记了。</p><p>也有很多企业，根本就不会相信社会化媒体营销真的可以带来奇迹，他们也许是在做社会化媒体营销，但因为不相信，所以不可能很认真的去做，当成任务去做，又怎么会有好的结果呢？</p><p>社会化媒体营销来不得半点随便。</p><h2><strong>二、 </strong><strong>从目的上来说，很多企业不明白为什么要做社会化媒体营销？</strong></h2><p>为了提高品牌影响力？提高产品销售？提升客户服务满意度吗？增加粉丝？还是为了发挥员工的创新能力呢？你们企业在做社会化媒体营销的时候，有没有给自己定过目标呢？是不是也是一时跟分而去做的？根本就没有目标，只是因为领导任务，做一天算一天，根本就没设定目标，或者目标设定的也是很模糊的，又或者是目标设定的根本是那些表明的，比如每天发多少条微博，要达到多少多少粉丝之类的，在加上，目前社会化媒体营销效果的评估比较困难，以至于很多企业即使有目标也因为无法准确评估而慢慢变得没有目标。</p><p>那么怎么设定目标呢？</p><p>首先，我觉得要分析自己企业的状况，有的企业是需要提高知名度的，有的企业是需要提高产品销售的，因企业而异。<br />其次，目标要具体且可衡量，不能设置一些大而空的虚无目标，否则就是漫无目标；<br />再次，要从小目标做起，比如每天和五位粉丝深层的交谈，比和500个粉丝随便聊聊要效果好的多。</p><p>&nbsp;</p><h2><strong>三、</strong><strong>从选择平台上来说，要专注。</strong></h2><p>很多企业，在多个平台上都开设了企业账号，新浪微博上有账号，人人网上有，豆瓣上也有，甚至在twitter上，facebook上都开设了企业账号，可是每个平台上又都是草草的去做，甚至是荒废了，我看到新浪微博上有很多企业，但是，已经很久没有更新了，或者是有用户在微博上联系他们，也没有人回复，这样的情况比没有开设账号更糟糕，这就像你对外公布了几个客户电话，但是客户打某些电话却一直没人接，这种情况下，用户会满意吗？</p><p>所以，在选择平台这件事上，一定要慎重，要看自己的实力，不要一次贪多，铺的摊子过大，而没有人力物力来进行维护。选择适合自己企业实际情况的平台，一旦选择了，就一定专心去做，不能荒废掉。</p><p>企业自己的官方站点和博客是必须的，社会化媒体营销的很大程度上是要建立一个稳定的消费者社区；</p><h2><strong>四、 </strong><strong>从发布的内容上来说，要对用户有用且有趣。</strong></h2><p>很多企业在微博上发布的内容，在我看来，一点也不实用，更不要说好玩了。有些企业甚至是当成一个新闻发布窗口，把企业站点上的新闻直接拷贝过来，而且很不注重格式，虽然只有短短的140个字，但是没有一定的格式，用户看起来也会很吃力，有些企业在内容上就做的很好，图文并茂。</p><p>对于内容，我的一些建议：</p><p>1 实用优先，用户需要实实在在的内容；<br />2 不要一上来就推销自己，对话，要和用户对话，在社会化媒体营销上，企业是主持人，用户才是主角；<br />3 要有趣，不要把自己的社会化媒体营销平台弄成第二个企业官方站点，可以放一些有趣好玩的信息，<br />4 最重要的是要讲&ldquo;人话&rdquo;，别弄的像新闻联播似的；<br />5 文字、图片、音频、视频形式的内容都可以尝试；<br />6 排版很重要，不管是微博上，还是自家的博客上，要知道，用户是不会阅读的，他们只会&ldquo;浏览&rdquo;；</p><p>关于内容，可以看看SocialBeta之前的文章，<a title="Permanent Link to 社会化媒体营销内容策略先行的5大理由" href="http://www.socialbeta.cn/articles/five-reasons-why-content-strategy-comes-before-social-media.html"><font color="#2266bb">社会化媒体营销内容策略先行的5大理由</font></a>。</p><h2><strong>五、</strong><strong>从参与方式上来，要先聆听。</strong></h2><p>很多企业因为习惯了在报纸、广播、电视上面做广告，在一些社会化网络也采用这种过时的参与方式，一上来就是发布消息，发完就走，根本就没有和用户去&ldquo;交谈&rdquo;的意思，即使遇到一些用户，尝试和企业进行对话，企业也可能是一股很官方的口吻进行的，让用户根本就就感觉不到是在他们进行对话。这种广播式的参与社会化媒体的方式，在很多企业中都有这个毛病，导致这种情况可能是一种惯性思维，认为社会化媒体营销和传统的一些手段没有什么区别。</p><p>那么，企业该如何参与到社会化媒体当中去呢？我觉得有以下几个方面：</p><p>1 要先学会聆听，看看你的用户在谈论什么、关注什么、感兴趣的是什么？你们的竞争对手都是怎么做，你们行业中做的最好的企业又是如何去做的。<br />2 要学会对话，你的粉丝不是来听你说话的，你应该让你的粉丝们进行对话，用户之间的对，用户和企业之间的对话等；<br />3 尊重每一个粉丝，不要忽略每一个用户的建议，要知道口碑传播是把双刃剑；</p><p>&nbsp;</p><h2><strong>六、从社会化媒体策略上来说。</strong></h2><p>很多企业是在看了几篇博文开始进行社会化媒体营销的尝试的，完全没有制定一整套的社会化媒体策略，更没有和其他的营销方式有机的结合起来，许多公司在应用社会化媒体时最常犯得一个错误就是：没有明确的目标或者是战略，完全停留在战术层面。社会化媒体营销是一个系统的过程，并不是发一两条微博、写两篇文章就能搞定的事情，对于企业来说，在做社会化媒体营销之前，需要制定社会化媒体总战略，即使是刚开始的尝试的时候，至少也应该按照目标、战略、战术和评估这一结构性方法适当地进行尝试。</p><p>关于社会化媒体策略的制定，可以查看SocialBeta之前的文章，<a title="Permanent Link to 2010年企业社会化媒体策略的5个建议" href="http://www.socialbeta.cn/articles/five-social-media-tips-for-2010.html"><font color="#2266bb">2010年企业社会化媒体策略的5个建议</font></a>。</p><p>&nbsp;</p><h2><strong>七、 </strong><strong>从社会化媒体效果评估上来说。</strong></h2><p>大家都在说社会化媒体营销的评估是很困难的事情，的确，社会化媒体营销的评估相比其他的一些营销方式要困难些，很多东西也许不能通过简单的数据就能做评估的，比如品牌影响力，用户的喜好程度，用户忠诚度等等，而也有一些东西是实在的可以评估的。<br />一些企业也许因为社会化媒体评估很难，就没有科学的认真的去实施，导致了社会化媒体营销在企业中陷入很尴尬的地位，公司老板也许一时心血来潮，花了人力物力，但是最终结果，老板却不能得到这个人力物力导致花的值不值，以至于老板因为看不到明确的投资回报率，而对社会化媒体营销失去兴趣。</p><p>如果你的企业是在这个方面跟不上形式了，建议看看这些关于社会化媒体评估的文章，<a href="http://www.socialbeta.cn/articles/somethings-about-social-media-roi.html"><font color="#2266bb">点此查看</font></a>。</p><h2><strong>八、团队，团队，还是TM的团队。</strong></h2><p>很多企业也许会把社会化媒体营销外包给其他公司，我不是说外包不好，而是说做社会化媒体营销，需要一直特别用心的团队，我不知道有多少企业有自己专属的社会化媒体团队，可能有的公司是随便找个实习生在做，在他们眼中，社会化媒体营销不就是发几条微博，加几个豆瓣小组吗？</p><p>不过，我看到很多像携程这样的企业开始在招聘<a href="http://www.socialbeta.cn/articles/ctrip-need-you.html"><font color="#2266bb">社会化媒体经理</font></a>这样的职位，我想在以后，这种招聘会越来越多，如果你的企业还是实习生在随便发微博，那么，赶紧要找个专人吧。</p><p>企业中这样的社会化媒体营销团队，有时候不仅仅是对外的，更多时候是要改变企业的观念，让企业内部的每一个员工都有社会化媒体营销的意识，只有全员都树立起时刻和用户对话的观念，才是真正给力的社会化媒体营销。</p><p>好了，你还有什么需要补充的，欢迎留言，谢谢。</p><p>From:http://www.socialbeta.cn/articles/social-media-8-tips.html</p>]]></description><category>网站运营</category><comments>http://www.vvwww.com/post/www228/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=228</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=228&amp;key=81931492</trackback:ping></item><item><title>土豆烧牛肉的制作方法</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/meishi227/</link><pubDate>Tue, 18 Jan 2011 17:07:19 +0800</pubDate><guid>http://www.vvwww.com/post/meishi227/</guid><description><![CDATA[<p align="left">土豆烧牛肉也是我们餐桌常菜，做法很多，这里列举一些以供参考。</p><p align="left">方法一</p><p align="left">菜谱原料&nbsp;：牛肉薄片（用少许酱油，料酒，太白粉稍腌），土豆，葱段，洋葱，蒜，辣椒。 <br />调味料：生抽/老抽各一大匙，蚝油半大匙，高汤一饭碗，糖，味精，胡椒粉，麻油一茶匙。&nbsp;<br />制作方法 ： 土豆如油锅炸至呈金黄色，捞起滤干备用。<a title="" href="http://www.meiweizhongguo.com/" target="_blank"><font color="#000000">牛肉</font></a>片过嫩油，捞起滤干备用。一大匙油烧热，放进葱段，洋葱，蒜，辣椒爆香，注入高汤烧开后放进土豆，牛肉和所有调味料烧煮至汤汁收干即可。 <br />&nbsp;</p><p align="left">方法二</p><p align="left">菜谱原料: 牛肋肉、土豆、植物油、郫县豆瓣、干辣椒节、整花椒、五香粉、味精、白糖、生姜、整大葱、鸡精、盐、糖色、香油、香菜各适量。 <br />制作程序: <br />1 牛肉用沸水永去血水洗净，切成小方块；土豆削皮切滚刀块。 <br />2 ．锅置火上，下油加人豆瓣、整花椒、生姜反复炖炒，待豆瓣吐红油出香味时，掺入鲜汤烧开，捞去渣料，下牛肉、干辣椒节、整大蒜、五香粉、自釉、鸡精，欲、少许糖色，烧开，打去浮沫，移小火上慢煤，至牛肉七成熟，再放土豆烧烂，然后大火收汁，加味精、香油起锅即成。走菜时可加少许香菜。 <br />操作要领: <br />1 ．烧此菜时汤汁要宽些，土豆下锅后要随时用炒勺轻轻推动，以免糊锅。 <br />2 ．火不宜过大，不然牛肉不烂，达不到成菜的效果。 营养特点: 牛肉含蛋白质、脂肪、维生素 B1、维生素 B2 、钙、磷、铁等成分。土豆含大量淀粉、蛋白质和胶质柠檬酸、乳酸及钾盐。牛肉味甘性平，能补脾胃，益气血，强筋骨，止消渴，民间有&ldquo;牛肉补气，与黄芪同功&rdquo;之说。牛肉蛋白质比猪肉高一倍．而脂肪、胆固醇含量则低得多。土豆配牛肉是非常科学的食品。<br /><br /><br />方法三 <br /><br />原料:土豆500g 酱牛肉:300g 番茄:100g 洋葱少许切成粒<br />配料:八角一个.干辣椒3-4个(视口味而定,有无均可) <br />调味料:油,盐,味精,糖,酱油 <br />制作方法: <br />1.把土豆去皮整个切成3-4毫米的厚片.牛肉切2厘米见方的薄片.番茄切片 <br />2.热锅里放油要多放,火不要大,先把土豆煎透,煎成金黄色,颜色越深越好,不过不要糊了. <br />3.土豆好了以后锅内留少许油,放八角,干辣椒,然后放洋葱炒香,接着把番茄放入.翻炒一会家土豆和牛肉放2茶匙酱油,2茶匙糖,和2茶匙盐(依据个人口味)放水,最好是冷水并且要盖住一半锅内的食物.大火煮开后转中火,等汤差不多没有的时候家味精出锅. 要注意的是土豆在煎的时候一定要有耐心,要等它变色,而且熟了,那么后来水不用多加,等开了以后就能吃了. <br /><br />方法四 <br /><br />菜谱原料：牛腿肉一斤左右（用牛腩也可以的），小土豆三四个，青红辣椒若干（也可以不要，主要是为了调色），葱，姜，大料两个，桂皮一两片 <br />制作过程： <br />1、首先把牛肉切成两厘米见方的小块。 <br />2、把切好的牛肉放到开水里焯一下，去掉血沫。 <br />3、起锅，放入少量油，葱姜倒入，接着放入牛肉，翻炒一下，然后放入适量酱油，大料，桂皮，少量糖，适量的盐，最后放入足量的水，要没过牛肉的，大火烧，然后盖上锅盖，休息会。 <br />4、等锅中水开之后，就可以把火调小，一旁休息玩耍去了。锅中的牛肉用小火炖阿炖，不到半个小时，就可以闻到香味了。不要管它，接着炖。 <br />5、等炖了一两个小时之后牛肉就完全酥烂了，这个时候加入切好的土豆块（片也行，更容易煮烂），再接着炖十几二十分钟，这个时候土豆烧得也差不多了，可以放入青红辣椒，翻炒一下，最后放入少许味精，就可以起锅了。 <br /><br />方法五<br /><br />汤烧土豆牛肉</p><p align="left">菜谱原料&nbsp;：牛腱（烫飞水后冲洗干净），土豆，胡萝卜，洋葱，番茄，冬菇，葱花，姜片。 <br />调味料：盐，糖，料酒，味精，胡椒粉。 <br />做法 ： 半锅水加姜片，料酒烧开，放进牛腱烧煮45分钟，加入土豆，胡萝卜，洋葱，番茄，冬菇继续煮45分钟，放进其它调味料再煮10分钟，撒上葱花即可。</p><p>&nbsp;</p>]]></description><category>美食菜谱</category><comments>http://www.vvwww.com/post/meishi227/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=227</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=227&amp;key=89fa32b3</trackback:ping></item><item><title>敏捷实践的七个方面-转载</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/PDM226/</link><pubDate>Sun, 09 Jan 2011 00:00:26 +0800</pubDate><guid>http://www.vvwww.com/post/PDM226/</guid><description><![CDATA[<p><span class="Apple-style-span" style="word-spacing: 0px; font: medium Simsun; text-transform: none; color: rgb(0,0,0); text-indent: 0px; white-space: normal; letter-spacing: normal; border-collapse: separate; orphans: 2; widows: 2; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px"><span class="Apple-style-span" style="font-size: 14px; color: rgb(70,70,70); line-height: 21px; font-family: simsun; text-align: left">原文：http://www.programmer.com.cn/4146/&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr><span class="Apple-converted-space">&nbsp;</span>文 / 徐毅 王献<br /><br />我们俩来自于诺基亚西门子网络杭州3G研发中心，本文内容来源于诺西一个通信产品研发部门所进行的敏捷转变，它是典型的多站点开发的研发组织，在芬兰、印度、中国等国家都有研发团队，总计超过600人。我们免去在文中冗述各种功绩和所得，只在这里和大家分享我们所经历的那些误区、陷阱，当然还有那些应对的措施。<br /><br />本文仅代表徐毅和王献的看法，如此大的组织转变，我们作为不到1%的人口代表，看到的、经历的难免会有误差，恐怕不能概括事件的全貌，如有出入，请见谅。我们认为经历的误区和陷阱大致可以分成如下七个方面：特性团队、人、浪费、局部优化、软件质量、测试自动化、流程。<br /><br /><span style="font-weight: bold; word-break: normal; line-height: 21px; word-wrap: normal">特性团队（Feature Team）</span><br /><br />在组织中想要达到真正的Feature Team是一个很漫长的过程，当在组织中实现局部的端到端的组的时候，更大的端到端的组的演变要求就会出现，因为这时组织中新的瓶颈会展现出来，这也是为什么敏捷虽不能解决问题，但却使问题更显现地表现出来的原因之一。<br /><br />在组织的转型中，产品有非常庞大的老代码：<br /><br /></span></span></p><ul style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; list-style-type: none; border-right-width: 0px">    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 0px 30px; padding-top: 0px; list-style-type: disc; border-right-width: 0px">通常早期的Feature Team所包括的功能性测试不完全，外部的测试对于这些Feature Team所起到的保护作用还是相当重要的；随着时间的推移，Feature Team对于自己feature自动化测试加强以及测试能力的提高，发布给外部的产品质量会大大提高；</li>    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 0px 30px; padding-top: 0px; list-style-type: disc; border-right-width: 0px">对于外部其他组的依赖接口会很多，特别是组在不同国家的时候，沟通、交接和等待的浪费会很大；</li>    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 0px 30px; padding-top: 0px; list-style-type: disc; border-right-width: 0px">当产品中开发部门和开发部门的依赖减少后，开发和测试的瓶颈会更突出；</li>    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 0px 30px; padding-top: 0px; list-style-type: disc; border-right-width: 0px">当产品中各个功能部门的依赖减少的时候，产品和产品间的瓶颈会凸显。</li></ul><p><br /><span style="color: rgb(255,0,0); word-break: normal; line-height: 21px; word-wrap: normal">想象一下从客户提需求到最终提交功能需要经过多少个过程，特别是大型组织中的产品，端到端意味着几十个过程甚至更多，Feature Team中能容纳多少个这样的过程就意味着这个Feature Team的灵活度有多高，本质上敏捷就是为了减少相互的依赖、等待和传递所带来的消耗。</span><br /><br />一个组织是一个庞大的系统，Feature Team的转变过程意味着减少整个系统中的Limitation。在向Feature Team演变的过程，在相对比较短的时间把原先十几或者几十Component Team打破组成新的Feature Team，这中间的风险在于：<br /><br />&nbsp;</p><ul style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; list-style-type: none; border-right-width: 0px">    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 0px 30px; padding-top: 0px; list-style-type: disc; border-right-width: 0px">组的成熟度：成熟度需要时间，也需要一些错误的代价；</li>    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 0px 30px; padding-top: 0px; list-style-type: disc; border-right-width: 0px">组的长期成长和短期项目计划：由于为了项目的进度而把对某领域很熟悉的组移出去做不熟悉的领域；</li>    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 0px 30px; padding-top: 0px; list-style-type: disc; border-right-width: 0px">组织的产出效率：怎样合理的利用现有的有经验人员和新人，建立新结构所需要的基础会使组织整体的产出效率减低；</li>    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 0px 30px; padding-top: 0px; list-style-type: disc; border-right-width: 0px">不可控和无序：怎样让这些组高质量的发布产品在转变过程变的不可控。</li>    <li style="border-top-width: 0px; padding-right: 0px; padding-left: 0px; border-left-width: 0px; border-bottom-width: 0px; padding-bottom: 0px; margin: 0px 0px 0px 30px; padding-top: 0px; list-style-type: disc; border-right-width: 0px">理想和现实中的平衡是Feature Team所面对一个问题，剧烈的变动意味着剧烈的阵痛。</li></ul><p><br /><span style="font-weight: bold; word-break: normal; line-height: 21px; word-wrap: normal">人(People)</span><br /><br />我们的转变是基于Scrum+XP的方式，转变的影响巨大，之前存在的许多职位、头衔都会面临变化甚至消失的可能。例如将不再会有项目经理来集中处理项目管理的工作，对于产品需求研发顺序的管理也由以往的项目经理手中转为产品负责人来负责。就算是最基层的开发人员和测试人员，他们的日常工作方式以及职责范围也面临着极大变化。这也意味着转变可能会遇到非常大的阻力，人天性会抗拒未知的变化。<br /><br />某平台部门的转变尤其特殊，研发的老大意志坚定，在初期Pilot成功后，就大刀阔斧地进行组织架构改革，仿佛一夜之间所有的项目经理全部消失。而以往围绕功能模块所组建的分散的测试团队以及开发团队也被重组，每一个Scrum团队都拥有好几名来自不同功能模块领域的开发和测试人员，从某种角度来看，这是我们所倡导的跨功能特性团队的雏形。<br /><br />各种形式的人员流失造成很大的困难，有人因为个人或家庭的原因离开公司，也有人在新成立的产品线谋得职位，也有人被提升。但这一切都造成原来位置上的熟手损失殆尽，尤其是测试相关人员的流动，曾是很大的隐患。在以往的研发模式中，测试被严格划分为多个层级，由不同的测试部门执行，彼此之间通过高级别工程师以及文档和流程体系来沟通，确保各个层级的测试得到执行。新的组织架构中，除了Scrum团队后，就是系统测试团队，而Scrum团队测试和系统测试之间的衔接则出现了灰色地带，原因就是彼此对对方的职责各有不同假设，却未能发现及解决。<br /><br />当时拥护及反对&ldquo;敏捷&rdquo;的各有人在。很有意思的是，在内部论坛上，我们属于敏捷的坚定支持者，又喜欢说话或者说辩论，所以可谓是当时论坛里的焦点，矛头所向。和大家进行了很多很多的辩论，当然多数都是无疾而终。我认为这些讨论，以及发生在工作场合里的许多讨论，同事间私下的交流都非常好，在变革之际，能够帮助大家去理解这场变革（就算是纯粹的抱怨也并非一无是处）。<br /><br /><span style="color: rgb(255,0,0); word-break: normal; line-height: 21px; word-wrap: normal">组织变革的关键还是在于充分沟通，以及切实执行。有不同的声音不要紧，关键是要去澄清和解决他们的疑问，因为没有大家的理解和认同，变革也很难取得实际的效果。</span><br /><br /><span style="font-weight: bold; word-break: normal; line-height: 21px; word-wrap: normal">浪费</span><br /><br />加班加点赶进度的情形相信大家并不少见，但如果这么辛苦做出来的东西并没有真正地或是及时地派上用场，恐怕就更加可惜了。该平台部门曾经很辛苦地去兑现某一个重要发布的最后期限，而根据客户提交的缺陷报告来看，其中有一些功能客户并没有在拿到这个重要发布后就去使用，而是在拿到后续的发布后才有使用到这些特定的功能。<br /><br />该平台部门并非是直接面向终端客户，还需要结合上层的网元应用才能真正地产生效果。常规的模式都是网元有一系列客户需求（具有非常大的粒度）中分割出对系统平台的需求后，传递到平台部门的项目进行管理。出现过的情形是，平台部门赶出来递交的功能特性，由于网元应用没能及时开发出来，而无法递交给客户使用。<br /><br />对此，大家有很多疑惑，我们是否在做该做的事情（功能特性），其中到底有多少浪费。Scrum的主张就是对用户需求进行优先级排序，但其中有一些关键的点必须要重视，否则很容易流于形式而无法从中获益，<span style="color: rgb(255,0,0); word-break: normal; line-height: 21px; word-wrap: normal">第一，要将需求分割到合适的细粒度，团队才有可能持续地递交高优先级的功能特性，需求粒度不够小，假设Product Backlog里就只有一个条目，那么不管是PO还是销售还是客户都没有办法取舍；第二，要逐渐达到以真正端到端级别的需求为单位进行开发、管理；第三，开发团队和PO（能够和终端客户、用户交流更好）之间有频繁地交流、功能成品展示，从而可以利用反馈来改进、提高后续功能的开发。</span><br /><br /><span style="font-weight: bold; word-break: normal; line-height: 21px; word-wrap: normal">局部优化</span><br /><br />有话说&ldquo;不怕神一样的敌人，就怕猪一样的队友&rdquo;，其实做软件也是，怕的就是劲不往一处使。但说回来还真不是大家不努力，而是对这个&ldquo;一处&rdquo;的看法各有不同。关注于各自目标的达成，并不能保证这些努力叠加起来能够实现那个 &ldquo;共同的&rdquo;目标，对局部进行的优化可能会反过来扯集体的后腿。这样的现象，组织各个层面都有。团队内、团队之间、产品线之间，都存在着这样的情况。<br /><br />例如团队内部，由于不习惯转型过程中新的特性团队的工作方式，团队内部也还是颇有些泾渭分明的开发、测试各一拨人，自个选自个的工作，迭代开始的时候，各自就把自己的任务选走，然后整个迭代就盯着自己的一亩三分地拼命干。但问题是，团队需要负责、承诺的是最终可以运作的软件增量，而这样的模式无法保证迭代结束时的交付。<br /><br />团队之间也是如此，为了让自己的团队工作预期更稳定、工作中能更专心，团队也都要求确定他们的工作领域，迭代中则有些简单粗暴的拒绝许多协助进行缺陷分析的请求。结果就是导致缺陷分析、修复的工作变得非常难以开展，而且有很多尚未查明的潜在缺陷被放弃追踪和申报。<br /><br />更大范围内来看，我们完成了传输平台的开发还不够，要能够产生客户价值，还少不了上层的应用软件系统。但我们的系统工程师团队、Scrum团队、系统领域测试团队等，以及上层的开发团队、功能测试团队、版本测试团队、系统测试团队等一干团队，尽管都在努力改进自己的工作绩效，可问题是，这些局部的、片面的优化，在组织层面观察，对终端客户产生的影响微乎其微，甚至是副作用。<br /><br /><span style="color: rgb(255,0,0); word-break: normal; line-height: 21px; word-wrap: normal">敏捷、精益的要点正在于此 &mdash;&mdash; 关注于产生的价值，移除不必要的浪费。不恰当的局部优化也是一种浪费，我们要具备系统思考的能力，从整体上看问题，然后改进绩效。组建特性团队就是开始。</span><br /><br /><span style="font-weight: bold; word-break: normal; line-height: 21px; word-wrap: normal">软件质量</span><br /><br />软件质量是很多组织都有的一些共性问题，任何变化都意味着质量降低然后恢复到当初，然后再变得比以前好的循环，在我们组织中还是不可避免经历这样的循环。<br /><br />在敏捷的转型中，如果没有很好的考虑这些质量的风险，那么最终它所带给组织的将是未来很长一段时间的&ldquo;痛&rdquo;，背负的&ldquo;债&rdquo;需要很大的代价来偿还，所导致的结果将对客户的满意度和信任都会产生很大的影响。<br /><br />质量问题中，通常我们认为会有三种类型的问题：老代码的问题，新功能开发的问题和改问题引入的新问题:<br /><br />老代码的遗留质量问题所占的比重通常是比较大。庞大的系统，任何的改动都有可能影响老代码的问题，或者老代码不能满足当前的需求所需要做的调整，往往是这些改动或者新需求会影响那些地方通常是比较难界定出来，对于老代码的测试自动化保护是关键。<br /><br />新功能开发所带来的问题通常会由于对于进度压力的妥协，在匆忙完成当前迭代周期的内容或者需要延迟当前迭代周期去做更多的测试之间矛盾。敏捷的开发模式使得原先长周期的项目进度和项目质量矛盾会在更短的周期里（4周）显现出来。<br /><br />在敏捷实践中，最大的一个优势就在于快速的质量反馈。由于持续集成，持续回归测试，质量的反馈就会在2~3天甚至3~4小时之内反馈到代码提交的软件人员。<br /><br />当然这样的快速反馈是基于持续集成所达到的层次，最完美的情况肯定是整个产品所有的测试都被放入到持续集成，那么对于整体软件将会有一个非常全面的质量考量。<br /><br style="font-weight: bold" /><span style="font-weight: bold; word-break: normal; line-height: 21px; word-wrap: normal">自动化测试</span><br /><br />测试自动化被许多人看做是敏捷的基石之一，众多的敏捷实践依赖于自动化的程度，例如持续集成。而能够实现增量式开发也需要能够快速、全面地进行回归测试，确认已存在的功能特性没有受到新特性开发的影响。在大张旗鼓地进行敏捷转变之前，我们的产品线就已经开始尝试过测试自动化。一个专门的测试自动化小组在半年多时间内，操作芬兰专家开发的自动化测试工具，将那些执行频率很高的回归测试用例集实现自动化执行。基于由此项目得来的成功经验，测试自动化的概念被广为传播，而且这个实践也开始作为一个基本要求附加给测试团队，自动化测试用例占所有测试用例的比例作为一个指标被上层主管密切关注。<br /><br />开始进行敏捷转变时，围绕着测试自动化有很多的争论，主要的焦点在于是否要追求100%的测试自动化。反对方和支持方都各有理由，难分高下，不同理念都有追随者在实践。支持者认为自动化测试可以节省执行时间，而且可以在夜间及周末进行测试执行。反对者认为实现自动化用例耗用了测试人员的绝大部分时间，来自于基层的部分意见反映他们都没有时间去真正的测试系统，而且还有一些用例非常难实现自动化，或者说成本非常高。而最新的一个情况是，在一个新的版本发布计划中，测试自动化的开销总计以万小时计算，那么是否有必要一定要实现100%测试自动化？<br /><br />我个人认为，其中很重要的一点就是测试自动化以及其比例被作为硬性指标施压给团队，导致团队无暇顾及测试自动化的质量高低。而测试自动化的质量恰恰会影响到：执行时间的长短、维护自动化脚本的开销、实现测试目的的准确性等。另一个原因就是，了解、专长于测试自动化，具备大范围应用测试自动化经验的专家太少，还常常疲于应付实现具体的测试自动化用例，无暇去传授、辅导及培养其他同事的测试自动化技能。<br /><br /><span style="font-weight: bold; word-break: normal; line-height: 21px; word-wrap: normal">流程&amp;过程</span><br style="font-weight: bold" /><br />敏捷的转型过程中，如果认为流程可以被抛弃，可以按照自己的想法去做开发测试，这样的观念将是很大的一个误区。<span style="color: rgb(255,0,0); word-break: normal; line-height: 21px; word-wrap: normal">流程之所以为流程是因为它所承载的是一个组织长时间积累的经验与教训，它被实践所证明有效的方式，怎样使做某件事情的效果与效率达到最优，并在多年的实践中被不断的补充。</span><br /><br />比如同行评审，我们的误区在于认为人们会自动自发的组织好同行评审，可以使用开发组所自己的方式。老的同行评审的传统并没有很好的沿袭，特别在组织大规模扩招的时候。导致的结果是我们的需求，设计代码的问题比以往任何时候都要多。<br /><br />比如测试，组织大规模的调整，但是相对应的测试在新组织里的怎样的计划，新开发组里测试以怎样的方式进行，怎样是最有效率的进行测试，开发组的测试和外部测试之间的区别和协调，测试在端到端的整个开发过程中的布局与充分性。我们的误区是对这些问题在相当长的时间以后才逐渐意识到这方面的缺乏，然后逐渐提出改进。<br /><br />作者简介：<br /><br />徐毅，诺基亚西门子网络担任精益及敏捷顾问，专长于大型组织（超过500人）的敏捷迁徙转变。精通各种风格、类型的黑盒测试，包括验收性测试驱动开发、探索性测试、测试自动化等。<br /><br />王献，诺基亚西门子网络担任项目质量经理，主要职责是帮助开发部门质量和流程的改进。工作经验从测试工程师和测试质量工程师，到度量组组长，再到项目质量经理。经历过大型组织的整个转型，对于敏捷，Scrum以及组织中的所有的流程有些个人的见解。</p>]]></description><category>产品管理</category><comments>http://www.vvwww.com/post/PDM226/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=226</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=226&amp;key=534cedf3</trackback:ping></item><item><title>平台技术支持思考 - 转</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/PDM225/</link><pubDate>Sat, 08 Jan 2011 23:31:33 +0800</pubDate><guid>http://www.vvwww.com/post/PDM225/</guid><description><![CDATA[<p><p>&nbsp;</p><p>&nbsp;</p><p><img title="" alt="" src="http://www.vvwww.com/upload/c6e439cb4811.png" onload="ResizeImage(this,520)" /></p></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">一个平台化产品要想围绕平台自身建立起一个和谐的生态链，快速构筑起平台的影响力，平台的开放性是其中比较关键的因素。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 就自己理解而言，抛开诸如通讯协议、网络、操作系统等基础设施层面的开放外，互联网产品应用平台的开放主要分为如下几个层次：应用/服务接口级开放-&gt;产品运营级开放-&gt;开放平台，其中：</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp;<span class="Apple-converted-space">&nbsp;</span><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">应用/服务接口级开放</strong>：平台提供商对外提供系统的各种API接口，供合作伙伴使用平台提供的各种服务。此种模式的核心特点为平台提供商自个玩。目前大部分SaaS模式的互联网应用的开放都可以归为此类。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp;<span class="Apple-converted-space">&nbsp;</span><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">产品级开放</strong>：平台提供商将平台的部分资源（例如用户资源、频道资源、内容资源）有选择性的开放给合作伙伴。此种模式的核心特点是平台提供商与个别合作伙伴点对点玩。目前诸如网游联合运营、当当之类的频道外包都可以归为此类。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp;<span class="Apple-converted-space">&nbsp;</span><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">开放平台</strong>：平台提供商将平台的各种资源全面、公平地开放给所有的合作伙伴。此种模式的核心特点是平台提供商与所有的合作伙伴一起玩。目前Facebook是最好的代表。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 由于目前各种互联网产品及应用间的同质化极度严重，平台提供商服务的品质成为决定产品成败的一个重要因素。怎样让合作伙伴用好、用爽平台提供的各种服务，成为所有平台提供商必须重点考虑的问题。正如在<a style="padding-right: 0px; padding-left: 0px; font-weight: 400; padding-bottom: 0px; margin: 0px; color: rgb(0,99,220); padding-top: 0px; border-bottom: rgb(204,204,204) 1px solid; text-decoration: none" href="http://www.yeeach.com/2010/07/31/%e4%ba%92%e8%81%94%e7%bd%91%e4%ba%a7%e5%93%81%e6%9c%8d%e5%8a%a1%e5%93%81%e8%b4%a8%e6%9d%82%e6%80%9d/">互联网产品服务品质杂思<span class="Apple-converted-space">&nbsp;</span></a>及<a style="padding-right: 0px; padding-left: 0px; font-weight: 400; padding-bottom: 0px; margin: 0px; color: rgb(0,99,220); padding-top: 0px; border-bottom: rgb(204,204,204) 1px solid; text-decoration: none" href="http://www.yeeach.com/2010/02/28/%e7%94%b5%e5%ad%90%e5%95%86%e5%8a%a1%e5%b9%b3%e5%8f%b0%e4%b9%8b%e5%b9%b3%e5%8f%b0%e6%9c%8d%e5%8a%a1%e6%9d%82%e6%80%9d/">电子商务平台之平台服务杂思<span class="Apple-converted-space">&nbsp;</span></a>中提到的。在提升平台服务品质上，一个高素质的技术支持团队起着至关重要的作用。</p><h3 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: 400; font-size: 20px; padding-bottom: 20px; margin: 0px; color: rgb(59,59,59); line-height: 20px; padding-top: 0px"><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">1、技术支持的核心价值</strong></h3><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 在大部分的公司技术支持的地位并不高，在大部分人眼中，技术支持人员虽然是销售、产品、技术、运营间的桥梁。但相对于销售、产品、技术、运营人员而言，技术支持扮演着四不像的角色：技术支持人员在产品上没有产品人员熟悉，在技术上没有技术人员深入，在销售上又不具备销售人员的销售能力，在产品运营及客服上又不具备产品运营人员所必须的各种技能。技术支持只能够解决商户及客户简单的产品、技术疑问，稍微复杂一点的问题只能够转交给相关人员。于是乎在大家头脑中，技术支持=技术客服。在职业发展前途上技术支持也黯淡无光。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp; 之所以有以上的问题，不能单纯只是公司领导重不重视的问题，核心的问题在于对技术支持的定位不清晰以及技术支持人员自己本身的技能欠缺有关。</p><h4 style="padding-right: 0px; padding-left: 0px; font-weight: 400; font-size: 20px; padding-bottom: 0px; margin: 0px; color: rgb(59,59,59); padding-top: 0px"><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">1.1、产品与市场结合的问题</strong></h4><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 对于大部分互联网公司的产品而言，最为突出的问题莫过于：怎样让产品规划及研发能够与市场无缝结合，及时了解市场的真实需求，避免闭门造车，让市场需求来驱动产品研发。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 但对于大部分的公司而言，所谓&ldquo;市场驱动的研发&rdquo;、&ldquo;端到端的产品研发&rdquo;等理念都好提出，怎样达成这一目标，在具体的执行策略上其实并没有好的方案，最后只能提升到企业文化的高度上来飘在空中。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 之所以在产品与市场直接存在一定的鸿沟在于偏前端的市场人员（销售人员、市场人员、营销人员、BD等等）与后端的技术体系人员（产品、技术、系统）在思维模式、市场意识上、考核体系等方面存在较大的差异，而在这当中，技术支持人员刚好可以扮演两者桥梁的角色。</p><h4 style="padding-right: 0px; padding-left: 0px; font-weight: 400; font-size: 20px; padding-bottom: 0px; margin: 0px; color: rgb(59,59,59); padding-top: 0px"><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">1.2、技术支持的价值：</strong></h4><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp; 其实要回答此问题，可以反过来看一下技术支持相对于销售、产品、技术擅长什么呢？</p><ul style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 10px 0px 10px 30px; padding-top: 0px">    <li style="padding-right: 0px; padding-left: 0px; padding-bottom: 2px; margin: 0px; padding-top: 2px; list-style-type: circle"><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">相对于销售人员：</strong></li></ul><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 技术支持由于有一定的产品、技术背景，因此相对于销售而言，技术支持比销售更熟悉公司的产品，在针对客户推产品解决方案时比销售更为专业；技术支持与技术、产品人员沟通更有共同语言。在对商户需求的把控上，技术支持更容易能够从产品、技术角度来提炼商户的真实需求，也更能够帮助完善产品功能。相对于销售人员与商户的中、高端人员沟通，而这些人对产品的口碑更多来自于下面的员工，技术支持天天与商户的技术、客服沟通交流，更容易与商户真正的产品使用者建立信任关系。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 因此相对于销售人员而言，技术支持可以发挥如下作用：产品解决方案、作为商户的代表向产品提出需求、产品运营、技术接入支持、客户关系维系</p><ul style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 10px 0px 10px 30px; padding-top: 0px">    <li style="padding-right: 0px; padding-left: 0px; padding-bottom: 2px; margin: 0px; padding-top: 2px; list-style-type: circle"><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">相对于产品人员、技术人员</strong></li></ul><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 由于天天与商户、销售接触，因此技术支持对商户需求更能够获取第一线的真实信息；由于距离市场更近，因此对于行业趋势及行业深入比产品人员、技术人员更加深入，同时对于竞争对手及其产品更有深入的认识；由于天天被客户投诉、谩骂，技术支持比产品经理、技术人员更有客户服务意识；技术支持的技术背景也让其与那些无技术背景的产品人员区隔出来，这样对于产品方案、商户需求的技术可行性更能够有清晰的把握。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 因此相对于产品人员、技术人员而言，技术支持可以发挥如下作用：产品竞争分析、作为商户的代表向产品提出需求、产品相关支撑功能完善（产品知识库、FAQ等）、客户维系和关怀、产品销售。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp; 整体而言，技术支持的核心价值在于：作为市场与产品的桥梁。技术支持人员其实有很大的施展才华的空间，优秀的技术支持可以帮助公司更加接近市场，避免产品技术人员的闭门造车，有效衔接市场与产品直接的鸿沟。与此对应我们对于技术支持人员未来的发展通路就有一定清晰的认识。</p><h4 style="padding-right: 0px; padding-left: 0px; font-weight: 400; font-size: 20px; padding-bottom: 0px; margin: 0px; color: rgb(59,59,59); padding-top: 0px">&nbsp;</h4><h3 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: 400; font-size: 20px; padding-bottom: 20px; margin: 0px; color: rgb(59,59,59); line-height: 20px; padding-top: 0px"><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">2、技术支持的发展通路</strong></h3><h4 style="padding-right: 0px; padding-left: 0px; font-weight: 400; font-size: 20px; padding-bottom: 0px; margin: 0px; color: rgb(59,59,59); padding-top: 0px"><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">2.1、技术支持的技能要求</strong></h4><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp; 当然以上技术支持的优势的前提是建立在技术支持自身具备相应实力的基础上，粗略说来，一个合格的技术支持应当具备如下一些技能：</p><ul style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 10px 0px 10px 30px; padding-top: 0px">    <li style="padding-right: 0px; padding-left: 0px; padding-bottom: 2px; margin: 0px; padding-top: 2px; list-style-type: circle">售前支持能力</li>    <li style="padding-right: 0px; padding-left: 0px; padding-bottom: 2px; margin: 0px; padding-top: 2px; list-style-type: circle">销售能力</li>    <li style="padding-right: 0px; padding-left: 0px; padding-bottom: 2px; margin: 0px; padding-top: 2px; list-style-type: circle">商务能力</li>    <li style="padding-right: 0px; padding-left: 0px; padding-bottom: 2px; margin: 0px; padding-top: 2px; list-style-type: circle">产品管理能力</li>    <li style="padding-right: 0px; padding-left: 0px; padding-bottom: 2px; margin: 0px; padding-top: 2px; list-style-type: circle">技术能力</li></ul><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;</p><h4 style="padding-right: 0px; padding-left: 0px; font-weight: 400; font-size: 20px; padding-bottom: 0px; margin: 0px; color: rgb(59,59,59); padding-top: 0px"><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">2.2、技术支持发展通道</strong></h4><ul style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 10px 0px 10px 30px; padding-top: 0px">    <li style="padding-right: 0px; padding-left: 0px; padding-bottom: 2px; margin: 0px; padding-top: 2px; list-style-type: circle">技术支持通路：初级技术支持-&gt;中级技术支持-&gt;高级技术支持-&gt;中级售前支持-&gt;高级售前支持-&gt;行业专家</li>    <li style="padding-right: 0px; padding-left: 0px; padding-bottom: 2px; margin: 0px; padding-top: 2px; list-style-type: circle">技术支持管理通路</li>    <li style="padding-right: 0px; padding-left: 0px; padding-bottom: 2px; margin: 0px; padding-top: 2px; list-style-type: circle">技术通路</li>    <li style="padding-right: 0px; padding-left: 0px; padding-bottom: 2px; margin: 0px; padding-top: 2px; list-style-type: circle">产品通路</li>    <li style="padding-right: 0px; padding-left: 0px; padding-bottom: 2px; margin: 0px; padding-top: 2px; list-style-type: circle">销售通路</li></ul><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp;&nbsp; 其实整体而言，好的技术支持的发展通过更为广阔，个人认为：一个有创业梦想的人，都应当去做一段时间的技术支持工作，这样对于市场、客户、产品销售及营销有更加深切的认识。</p><h3 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: 400; font-size: 20px; padding-bottom: 20px; margin: 0px; color: rgb(59,59,59); line-height: 20px; padding-top: 0px"><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">3、方法思考</strong></h3>]]></description><category>产品管理</category><comments>http://www.vvwww.com/post/PDM225/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=225</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=225&amp;key=77ac49fb</trackback:ping></item><item><title>互联网产品规划杂思 - 转</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/PDM224/</link><pubDate>Sat, 08 Jan 2011 23:16:20 +0800</pubDate><guid>http://www.vvwww.com/post/PDM224/</guid><description><![CDATA[<p><p>转自：<a href="http://www.yeeach.com/2010/12/26/%E4%BA%92%E8%81%94%E7%BD%91%E4%BA%A7%E5%93%81%E8%A7%84%E5%88%92%E6%9D%82%E6%80%9D/">http://www.yeeach.com/2010/12/26/%E4%BA%92%E8%81%94%E7%BD%91%E4%BA%A7%E5%93%81%E8%A7%84%E5%88%92%E6%9D%82%E6%80%9D/</a></p></p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">在规划一个互联网产品时候经常面临这样的窘境：</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 一方面由于市场竞争的需要，留给产品规划的时间并不多，需要尽快规划出产品雏形以便投入开发及运营，然后在运营过程中逐步完善，按照当下时尚的说法：&ldquo;敏捷开发&rdquo;、&ldquo;迭代增量&rdquo;、&ldquo;持续改进&rdquo;。对于互联网行业而言，再完美的规划并不能保证产品的成功，正如那些成功的互联网企业产品&ldquo;无心插柳柳成荫&rdquo;的故事所彰示的：Paypal原来是提供加密软件和通过Palm&nbsp; pilot来转移资金的服务的，Twitter原来是做短信交换服务，Baidu最初是看好企业搜索的，迅雷原来是要做分布式邮件系统的。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 于是乎大家都觉得：既然计划赶不上变化，与其耗费大量力气去做产品规划，还不如&ldquo;摸着石头过河&rdquo;，在做的过程中在逐步调整方向。但是由于时间紧迫，对产品规划核心的要素并没有想清楚，例如对于产品定位、产品核心功能、产品运营及营销策略等，导致在未来花大量力气进行调整，由于规划不合理导致产品失败乃至公司倒闭的例子举不胜数。因此众多的中国互联网公司为了规避产品规划的风险，则采用全面&ldquo;山寨&rdquo;国外的成功案例。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 而一些企业将产品规划放到了重要的位置，企业会按照标准产品研发的流程来进行互联网产品规划：先花上几个月时间进行市场调研、竞争对手分析，然后再花上几个月时间来做产品规划，再花上半年乃至一年时间来进行开发。最后做出来的产品可想而知。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 那么互联网产品规划是否有必要呢？</p><h3 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: 400; font-size: 20px; padding-bottom: 20px; margin: 0px; color: rgb(59,59,59); line-height: 20px; padding-top: 0px"><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">1、产品战略规划 VS.&nbsp; 产品规划</strong></h3><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp; 我们一般说产品规划其实包含了产品战略规划和产品规划（姑且叫产品实现规划）两部分。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp; 产品战略规划需要重点关注产品战略愿景、产品战略方向、产品定位、产品核心业务模式、产品市场细分等影响产品未来发展的重要因素，而产品规划主要偏重于产品具体功能的实现逻辑。如果说产品战略规划关注&ldquo;该做什么&rdquo;的话，产品规划则关注&ldquo;怎样做&rdquo;。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp; 一般产品战略规划由负责战略的人负责，而产品功能规划则由产品经理负责。负责战略的人与负责产品的人的思维模式、做事风格并不相同，两者之间存在一定的鸿沟。例如负责战略的人经常很理想化，不关注方案具体实现的可行性等；而负责产品的人相对现实主义，关注于产品具体的实现、运营。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp; 正是由于这种差异，导致在产品规划中经常出现产品战略规划与产品规划无法很好衔接的问题，这也是在互联网产品规划中最常见的问题。战略家们说&ldquo;产品战略已经很清晰了，只需要产品经理去细化即可&rdquo;，但产品经理仍然无从下手。原因有多方面，例如：产品定位不清晰，什么都想做；产品核心业务模式不清晰；</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp; 从产品规划角度来说，产品战略规划不能够只是停留在在所谓的产品战略方向、产品战略愿景、产品核心模式这些宏观理念上，负责制定产品战略的人必须能够度量产品战略在现有公司资源下的可行性及实施路径，并将产品战略的执行思路以清晰简洁的方式告知产品经理，必要时候应当自己能够操刀上阵，否则战略始终只是战略。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 会有人说，这不是让战略家去做产品经理做的事情吗，极端的答案：是。一个好的产品战略家必须是一个好的产品经理，这个世界不缺少能说会道的战略家，不缺少各种战略，缺少能够将自己的想法推动落实执行的实干家，正如一个好的商业模式必须能够通过所谓的电梯测试（三分钟测试），如果一个战略家无法度量自己想法在现有公司资源情况下的可行性及实施步骤，那这样的产品战略只能无疫而终。很奇怪很多初创型的互联网公司竟然养了专门做战略的人员，于是乎产品战略规划与产品规划无法衔接的悲剧遗憾在不停发生着。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;</p><h3 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: 400; font-size: 20px; padding-bottom: 20px; margin: 0px; color: rgb(59,59,59); line-height: 20px; padding-top: 0px"><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">2、产品规划的价值</strong></h3><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 既然可以山寨别人已有的产品，那么是否还有必要费老大劲进行产品规划呢，产品规划价值的在那儿呢？</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; 原因主要如下：</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; a、任何优秀的产品都有其内在的文化基因及气质，这种文化基因及气质与创造这个产品的公司的企业文化及产品人员息息相关，正是这种基因让其从其他产品中脱颖而出，我们在山寨别人时候并无法山寨此部分基因的，缺少了灵魂的产品只能是一个平庸的产品；另外我们所看到的产品可能是人家第一次迭代的产品，人家可能已经处于第3、4次迭代开发中了，被别人节奏所牵制的产品始终无法超越别人，我们始终只能是追随者。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; b、产品规划最重要的还是做规划和实施的人，直接跳过产品规划去山寨别人，那么公司最宝贝的资源：&ldquo;人&rdquo;始终得不到相应的锻炼，一流的产品必然有一流的产品人员，反之亦然。这样才能够在未来转型时候有能力、有资源去快速完成转型，抓住市场机会，这也是Paypal、Twitter等能够实现顺利转型的根本原因，而我们只看见了Paypal、Twitter的最初的状态和现在的辉煌，而忘记了中间的过程和背后的实力所在。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; c、产品规划的过程也是梳理思路、统一思想的过程，只有对产品战略规划及产品规划达成一致，才可能将规划的东西顺利落实。从这一点来说，规划过程比规划的结果更为重要。因此在产品规划中应当尽量让团队团队成员都参与进来，对于初创型公司而言，这也是团队磨合、加深理解的好机会。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;&nbsp;&nbsp; d、市场是不断变化的，而规划需要动态调整的，好的规划应当先于市场变化。对于市场变化趋势的把控，必须建立在对行业的深刻的洞察基础上。这恰恰是产品规划的价值所在，产品规划的过程可以帮助我们成体系梳理对市场的理解，没有这种理解，我们只能始终落后于市场变化。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">&nbsp;</p><h3 style="padding-right: 0px; display: block; padding-left: 0px; font-weight: 400; font-size: 20px; padding-bottom: 20px; margin: 0px; color: rgb(59,59,59); line-height: 20px; padding-top: 0px"><strong style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px">3、产品规划的度</strong></h3><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">既然产品战略规划／产品规划重要，不能仓促为之，那怎样平衡互联网产品敏捷开发的要求呢？</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 15px; padding-top: 0px; text-align: left">个人认为：对产品战略规划应当尽量详尽，要尽量理清楚产品的脉络，包括产品定位、产品业务模式、产品核心逻辑、核心业务功能等；对于产品规划则可以采用迭代规划方式。由于产品战略规划决定了产品未来的发展方向，因此应当尽量考虑清楚，未来不要轻易频繁做大的调整，这样才能够保证战略的延续性。产品战略规划实际上已经确定了产品各迭代周期总的目标计划；在产品战略清晰的情况下，产品规划主要偏重产品的实现，此时侯可以按照迭代增量的思路进行规划，在运营过程中根据反馈，及时调整、持续完善产品。</p>]]></description><category>产品管理</category><comments>http://www.vvwww.com/post/PDM224/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=224</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=224&amp;key=270d8ec6</trackback:ping></item><item><title>百度前端技术交流会视频分享和演示文档下载</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/PD223/</link><pubDate>Sun, 02 Jan 2011 00:09:08 +0800</pubDate><guid>http://www.vvwww.com/post/PD223/</guid><description><![CDATA[<p><strong><span style="font-size: small">张克军：豆瓣前端团队的工作方式</span></strong></p><p><strong><span style="font-size: small"><embed type="application/x-shockwave-flash" allowscriptaccess="sameDomain" align="middle" height="400" width="480" quality="high" src="http://player.youku.com/player.php/sid/XMjE5NzcxMDQw/v.swf"></embed></span></strong></p><p><strong><span style="font-size: small">杨皓：新浪博客前端架构分享</span></strong></p><p><strong><span style="font-size: small"><embed type="application/x-shockwave-flash" allowscriptaccess="sameDomain" align="middle" height="400" width="480" quality="high" src="http://player.youku.com/player.php/sid/XMjE5OTYzMTI4/v.swf"></embed></span></strong></p><p><strong><span style="font-size: small">张勇：搜搜前端架构</span></strong></p><p><strong><span style="font-size: small"><embed type="application/x-shockwave-flash" allowscriptaccess="sameDomain" align="middle" height="400" width="480" quality="high" src="http://player.youku.com/player.php/sid/XMjIwMTY4Njk2/v.swf"></embed></span></strong></p><p><strong><span style="font-size: small">雷志兴：百度前端基础平台与架构分享</span></strong></p><p><strong><span style="font-size: small"><embed type="application/x-shockwave-flash" allowscriptaccess="sameDomain" align="middle" height="400" width="480" quality="high" src="http://player.youku.com/player.php/sid/XMjE5OTM0NTA4/v.swf"></embed></span></strong></p><p><strong><span style="font-size: small">全部pdf/ptt资料打包下载</span></strong>&nbsp;----------- <a target="_blank" href="http://www.rayfile.com/zh-cn/files/02f58ae3-15c4-11e0-9b9d-0015c55db73d/">地址一</a>&nbsp;|||||| <a target="_blank" href="http://www.sscoo.com/打包下载.rar">地址二</a></p>]]></description><category>产品设计</category><comments>http://www.vvwww.com/post/PD223/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=223</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=223&amp;key=43da5b82</trackback:ping></item><item><title>细说产品的“魅力属性”</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/PD222/</link><pubDate>Thu, 09 Dec 2010 22:53:05 +0800</pubDate><guid>http://www.vvwww.com/post/PD222/</guid><description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="font-family: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; line-height: 21px; font-size: 14px; color: rgb(51, 51, 51); "><span class="Apple-style-span" style="line-height: 25px; ">本文由胡斐撰写，源地址是：<a href="http://www.panghufei.com/?p=10351" style="text-decoration: underline; color: rgb(0, 100, 177); ">http://www.panghufei.com/?p=10351</a></span><div class="entry-content entry" style="margin-top: 30px; margin-right: 0px; margin-bottom: 30px; margin-left: 0px; line-height: 1.8; "><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&ldquo;魅力属性&rdquo;是一个常常被我用在产品设计和产品体验上的词汇。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">这不是我发明的，我在上一家公司A.O.Smith热水器的时候，做了一段时间用户调研，我们的调研公司使用了一个叫&ldquo;科诺(Kano)模型&rdquo;的东西帮助我们分析产品的各种属性，有关产品几种属性的内容我记下来了。很长时间以来，我发现这样的概念完全可以用在我们的互联网产品设计上，甚至在很多产品设计上都可以套用，还很管用。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">于是我在很多场合开始讲这个概念，结合我的一些经验和理解，有一些优化吧。很多人也对这个开始很感兴趣，弄得好像是我提出来的东西一样。我在这里试图详细阐述一下吧。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">在UCD年会上我分享了所谓的产品&ldquo;四种属性&rdquo;，当时的解释是，所有产品的属性可以分为四类，他们是：</p><div><table border="0" cellspacing="0" cellpadding="2" width="527" align="center" style="border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; ">    <tbody>        <tr>            <td width="132" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">必备属性</td>            <td width="393" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">产品必须具备的属性。比如电视机必须能出影，比如微博必须能发布能关注，满足用户对产品最基本的需求。</td>        </tr>        <tr>            <td width="132" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">可有可无属性</td>            <td width="393" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户认为是产品无所谓的属性，比如电冰箱可以放音乐。</td>        </tr>        <tr>            <td width="132" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">魅力属性</td>            <td width="393" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用户认为产品特别有吸引力的，区别于其他产品的特别属性。</td>        </tr>        <tr>            <td width="132" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">不可接受属性</td>            <td width="393" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">产品不可以具备的属性，也往往和必备属性相对立。比如在中国使用110伏电源，微博不能转发等等。</td>        </tr>    </tbody></table></div><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">其实这是被我简化和概念化了的模型，关于这个的原始资料和相关分析方法，我们在文章后面会附上，相信对做用户和产品研究的同学会有帮助。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">其他三个概念都非常好理解，唯独&ldquo;魅力属性&rdquo;，需要详细说说，这也是我认为最有价值的属性。更是所有产品经理在设计产品时需要考虑的东西。这东西，没有没所谓，有了，还真丢不掉。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">举例来说：</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">前几天子柳在微博上发的那条，在QQ邮箱，如果你写了诸如&ldquo;请见附件&rdquo;之类的文字，然后还忘了粘贴附件，就会蹦出一个框。够可爱吧？</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img src="http://photo14.bababian.com/upload5/20101122/9C1AB0D16CB209866398B8371BE6D960_500.jpg" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">这就是挺典型的魅力属性，用户会觉得这功能好贴心啊。一种让人很温暖的提醒。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">用wap版的微博，如果服务器忙，会看到这一屏，让人觉得要笑出来。没什么用，但显然比只说上面一句有用，还为服务器争取了时间。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img src="http://photo14.bababian.com/upload5/20101129/E2E35274DF644522BCDBECE3436762B4_500.jpg" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-left: auto; margin-right: auto; " /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我经常会提到的苹果电脑的&ldquo;呼吸灯&rdquo;。苹果电脑的电源灯，待机的时候会一亮一亮，节奏和人睡着的呼吸一样，非常有趣。很多初次看到的人，都会爱上这个&ldquo;贴心&rdquo;的小设计。说实话，这个功能没什么难的，但是苹果做了。后来有几部手机具备了类似的功能，比如诺基亚8600，我用过，那个灯，呼吸就太慢了，我喜欢跟着它调整呼吸，结果每次都憋得要死。这我就会觉得，诺基亚学了，没学好。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我还一直觉得，魅力属性抓得最好的，就是苹果了。我们会在苹果的产品中发现很多打动人的小细节。比如输入时候的放大镜，比如笔记本背后的发光logo&hellip;&hellip;当我们问那些苹果用户，苹果产品最打动你的地方在哪里，除了笼统的&ldquo;设计&rdquo;之外，你一定会听到很多有趣的东西，这些，都是魅力属性。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">当有人问你，说打算出一款冰箱，在门上印画，你会觉得怎么样？我想大多数人会选择&ldquo;没所谓&rdquo;，因为他们可能不打算买冰箱，就算打算买，也是关注冰箱什么牌子多大容量是不是节能等等，没有人会提出想要一个&ldquo;面板印花&rdquo;的冰箱。可是我们在卖场发现，印花的冰箱很好卖，同时，西门子曾经推出印有名家作品的冰箱，放在商场巡展，很多人都会佩服西门子的创意和文化味，那个系列也变得非常好卖。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">有人会说，魅力属性就是那些小细节嘛。对了一部分。确切点说应该是一些能够打动人的小细节。正是那些打动人的小细节，为人家赢得了更多的客户，换来更多客户主动跟朋友提起。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">另一个说法是&ldquo;人性化&rdquo;。我觉得这和&ldquo;魅力属性&rdquo;不一样。&ldquo;人性化&rdquo;说的是把自己当人，把人当人的做法。但是&ldquo;魅力属性&rdquo;是做那种招人喜欢的人。</p><h4 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; font-family: 'Microsoft Yahei'; ">为什么要有魅力属性？魅力属性有什么特点？</h4><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如果你有男朋友，问自己，为什么喜欢他。如果有女友，又为什么喜欢她。为什么是他/她，而不是别人？他/她跟别人很多地方都一样。你一定会告诉我，你喜欢的人有很多地方不一样，对他/她的特别之处，你会如数家珍，甚至，会以这些好处，都充满幸福感。这就是对方吸引你的地方，你所回忆起的那些，就是对方的魅力属性。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">就这么简单，当产品变得越来越同质化的时候，那些有性格，有特色，具备魅力属性的产品才会脱颖而出。比如，谁能告诉我，现在千团大战，数千个团购网站有什么区别？这样表达可能更直接一点，同质化越严重，客户忠诚度越低。就像团购，现在流量最大的，居然是那些团购集合网站，因为消费者只为团购的内容买单，至于从哪儿买，大家服务都一样，也没啥讲究。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">所以，魅力属性是同质化最好的解药。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">有没有发现，所有我们提到的，和你能想到的那些能魅力属性，你都会愿意跟人分享。我想，再没有什么事儿比客户主动帮你做宣传更爽的了吧。我会跟很多人讲<a href="http://mobi.younet.com/choose.php?selltime=4,&amp;shape=1,&amp;funclist=132,&amp;tradeid=1,5,2,&amp;" target="_blank" style="text-decoration: underline; color: rgb(0, 100, 177); ">友人网的手机筛选功能</a>，因为它让我用起来好爽，淘宝没有实现过。我们每个人，跟人讲起那些打动过自己的产品功能的时候，都会眉飞色舞。这些所有这些传播出去的功能，都是很简单的东西，一两句话就能说清楚的那种。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">所以，魅力属性具有极强的传播力，甚至有病毒的作用。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">一个很好的魅力属性，会很容易占据某个领域，让自己的这个功能，成为某一类产品或者某一个领域的标准，最后成为标配。比如&ldquo;断点续传&rdquo;，我不知道是谁先用起来的，但我知道QQ在这方面最先推广起来，后来大家就都觉得QQ传文件&ldquo;靠谱&rdquo;啊。就算后来其他IM工具也支持了断点续传，用户会认为&ldquo;这个人家QQ早就有了&rdquo;，&ldquo;原来旺旺也能断点续传了呀。&rdquo;一个&ldquo;也&rdquo;字，多少无奈。更可怕的是，MSN至今都被送一个&ldquo;还&rdquo;字，因为还不支持断点续传，人们会觉得&ldquo;太傻了&rdquo;。甚至很多魅力属性被拿来和品牌关联起来，而且，后来者往往被认为是&ldquo;学的&rdquo;。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">所以，魅力属性很有强独占性。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">当一个魅力属性被做到极致，有时候会发生一种现象。产品属性的认知度和传播效果，远高于产品本身。我们都碰到过，想不起来某个东西，但就记住什么特点了，就说&ldquo;就是能xxx的那个xx&rdquo;，就属于这样的例子。比如我现在这个X10手机，我不止一次听到有人跟别人介绍，说胖胡斐那个手机拍照很好的，啥型号记不清了。你的男朋友可以不高不帅，也可以不浪漫，可以不这样不那样，但你还是喜欢他，因为他一定在某方面的魅力让你觉得足以弥补所有缺憾。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">所以，魅力属性的能量可以被放到很大。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">还有个现象很有趣，就是一个属性一旦被认为有魅力，就不能没有了。比如当初旺旺和贸易通合并的时候，旺旺原有的&ldquo;一个好友可以在多个组里&rdquo;的功能被取消，我当时就跳出来说这是一个降低魅力值的事儿。要知道，当时的IM工具里，只有旺旺能这样。后来MSN有了，QQ有了。旺旺到现在也没法一人多组，反正我永远不会改变我的看法，那次改动很不懂事。这样的例子多得是。最有趣的是，当一个魅力属性消失，用户会想，这家企业怎么了，这个品牌怎么了，为什么没了。说实话这很可怕。想想，你明天拿到一部苹果电脑，发现灯不会呼吸一直亮着，你会怎么想。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">所以，魅力属性需要被坚持。</p><h4 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; font-family: 'Microsoft Yahei'; ">怎么找到魅力属性？</h4><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">先问一个问题，产品经理在设计产品的时候，会考虑什么问题？会考虑客户需求是什么，然后考虑怎么满足他们的需求，对吧？然后做出一个&ldquo;满足&rdquo;需求的产品。这样的产品，往往&ldquo;刚好&rdquo;满足客户的需求，客户不会觉得不满，但也不会觉得很爽，更不会心甘情愿的帮你宣传。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">那么和上面的那些案例相比，差在哪里呢？因为上面的产品经理不光满足客户的需求，而且超出了客户的期望。客户不可能说要一个电源能呼吸的电脑，但是他们做了，客户就爽了。而且，产品经理也很爽。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我的想法是，魅力属性不要直接问用户。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">产品经理最大的问题，就是总在&ldquo;分析需求 &ndash; 满足需求&rdquo;中转来转去。说<a href="http://cn.bing.com/" target="_blank" style="text-decoration: underline; color: rgb(0, 100, 177); ">必应（Bing）</a>的例子，微软要做一个搜索引擎。那需求是什么？要能搜到，于是需要有爬虫，有索引有算法等等。要很快，不能像传统微软产品那么慢，所以需要优化速度，微软也不认为页面显示&ldquo;用时xxxx秒有什么意思&rdquo;，所以微软需要找到用户不会抱怨的最长时间，只要比这个快就可以了。需要把很多种搜索结果放在一起，所以有了混合搜索。这些都是需求，完成了这个，就是一个搜索引擎了，产品经理的职责也完成了。这就是原先Windows Live Search。可是没人用，是没有广告投放的问题么？我告诉大家不是的。关键问题，是没有找到一个用户更换搜索引擎的借口，没有找到一个能够传播的魅力属性。于是微软做了几件事：起了一个很响亮的名字Bing，然后在必应首页使用大图片的<a href="http://www.panghufei.com/?p=10044" target="_blank" style="text-decoration: underline; color: rgb(0, 100, 177); ">情感化运营方式</a>，最后是在产品上做创新，必应搜索视频，鼠标移过的时候，就会直接播放，这个真的很棒，会节约大量时间。于是很多客户开始爱上必应，跟别人分享必应的图片和体验，很多人手机下载必应的客户端，用必应主页图片做桌面。这让我们看到搜索引擎原来可以这么玩。必应在全球很多市场的份额大涨，已经第二了。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我的想法是，产品经理需要跳出来，放开去想。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">微软在几年前跟我聊，说会有一个新的搜索产品，每天会更新首页图片。我当时的反应是&ldquo;神经病&rdquo;，也就是我认为这个属性&ldquo;可有可无&rdquo;。可是后来做出来，我倒吸一口凉气。同样，Google的logo文化人人喜欢，我至今都记得那天PAC-MAN游戏纪念，原本如果做成下面这样的图片，我们就很惊喜了，结果发现&ldquo;I&rsquo;m feel lucking&rdquo;改成了&ldquo;Insert Coin&rdquo;然后还能玩两把。整个人就抓狂了，你没有想到会有趣到这种令人发指的地步。这样的需求，永远也不会被&ldquo;客户&rdquo;提出来！而且，当问起用户我们在google首页玩游戏怎么样，那用户也不会选择&ldquo;很爽&rdquo;，这就是可有可无。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img src="http://photo14.bababian.com/upload5/20101129/5C923CC89D06CD44B09C2192E33AA3D5_500.jpg" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-left: auto; margin-right: auto; " /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我的想法是，试试从&ldquo;可有可无&rdquo;属性中挖掘可能的魅力属性吧。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">说实话，我接触产品的日子，最恨的一句话就是&ldquo;二期&rdquo;。&ldquo;二期&rdquo;是我见过最好的推脱方法，因为&ldquo;二期&rdquo;给人一种还有希望的感觉，给人一种&ldquo;有优先级&rdquo;的条理感。可是我不知道别的公司怎么样，我接触过的产品，往往&ldquo;哪TM有二期！？&rdquo;为什么呢？因为其他的需求排在后面，你这些被二期的需求，既然都二期了，那就是不重要的，所以必然排不上优先级，所以不会有人理会。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">事实很残酷，产品经理砍掉的那些&ldquo;二期&rdquo;需求，常常就是能成为魅力的东西。结果呢，就是我们花了很多精力，做出了跟别人没什么区别的，满足基本需求的产品。然后这傻产品一上线就是一年多。例子就不举了，伤了和气。总之，我旗帜鲜明地反对所有拿二期当借口的行为。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我的想法是，从被二期的需求中，去找找能成为魅力属性的东西。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">每个人每天都在接触各种产品，我们常常会想，这东西怎么不这样怎么不那样。其实这就是说，如果这样或者那样了，我们就会用的爽一点。换句话说，如果怎么样，你自己就high了。我们很多产品经理在设计产品和砍需求的时候，我看不到他们眼睛中的亮光，说实话，一个不能让自己high起来的产品，我们怎么指望别人能爽呢？我见过我们交易线的一个产品经理，讲到要做的东西时候，两眼真的放光，就像苹果首席设计师的Jonathan Ive的眼神一样。我那时候就跟自己说，这一定会是一个好产品，结果真是。让人遗憾的是，我们碰到的很多产品经理，会强调老板说要如何如何，然后做一做分工就干活了，我真不指望那东西能做得如何。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">因为，那样的做法，实在满足别人。只有满足自己的时候，人才会兴奋起来。你见过天天接客，还打心眼里喊爽的么？</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img src="http://image.91.com/zx.sj/2009/07/01/ip_zx_pgedj_01.jpg" border="0" alt="苹果首席设计师再获殊荣" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-left: auto; margin-right: auto; " />苹果首席设计师Jonathan Ive，充满自信和热情的眼神</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">淘宝的TMS系统是个很好的正面案例。最早的需求是为了替换老化的TurboCMS，同时实现一些自动化的更新。后来TMS团队有几个同学很high，比如<a href="http://www.om19.com/" target="_blank" style="text-decoration: underline; color: rgb(0, 100, 177); ">毛哥</a>、青云，他会每天跟运营同学沟通，看看大家用得爽不爽，把发现的问题记录下来。之后，我们发现上了定时更新，然后是版本和日志记录。发现运营还花了大量时间在Ctrl+C &ndash; Ctrl+V，然后就设计了一个小功能，运营可以直接粘贴excel表格了，这是能让我们欢呼起来的功能。要知道，这些需求都不是主动提出来的。是因为我们的产品同学爱自己的产品，想做得更好。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我再说一遍，整天研究产品需求的产品经理，永远也不可能找到魅力属性，更不可能做出人人称颂的产品。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">我想说的是，魅力属性就是那个能让自己两眼放光的东西，放光的时候，一定要抓住。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">找到魅力属性的方法很简单，抬头看看，跳出去看看，再转过来看看。</p><h4 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; font-family: 'Microsoft Yahei'; ">实施、保持魅力属性，并形成产品特征</h4><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">这个真没什么好说的。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如果你谈起一个小功能，就两眼放光，别管别的了，做吧。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如果你发现用户谈起你的小功能，就两眼放光，别管别人怎么说，保持住。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">以后，这就是你的特征，别人抢都抢不走。</p><h4 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 14px; font-family: 'Microsoft Yahei'; ">要注意属性的转变</h4><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">这是一个非常有趣的现象。我们发现在产品的生命周期和更新换代中，产品的属性会发生变化。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">一方面因为用户需求会发展。同一属性的定义不会恒定不变，当某一属性由原来的魅力属性逐渐成为行业标准的时候，它就会转化成必备属性了。比如彩色电视机，在都是黑白的时代，彩色绝对是魅力属性，后来，谁家电视不是彩色的？又比如微博的转发并评论，没有的时候，一有就觉得无比靠谱，后来谁再做微博，要是转发并评论放在二期，肯定会有人骂娘。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">一方面因为产品自身的发展。很简单的例子，Office，升级到2007的时候，无数人骂娘，什么烂东西，想找的菜单都找不到了。因为大家都很习惯原来2003的菜单了，2007从根本上改变了菜单组织方式，这在当时看来，快属于&ldquo;不可接受属性&rdquo;了。当时微软还出了一个报告，说Office2007的用户在两个月后，效率提高超过百分之多少，我嗤之以鼻。可是当我用了两年，后来又升级到2010的时候，有一天在一台装了2003的电脑上，我死也没找到想找的菜单，然后恍然大悟，2007的菜单组织方式，确实有助于提高效率。这就是魅力属性被慢慢认知和认可的过程。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">有两种属性转变方向需要关注。</p><ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">    <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">    <ul style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 30px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: none; list-style-position: initial; list-style-image: initial; ">        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">魅力属性 -&gt; 必备属性。也就是我们说的占领了一个领域，到这，就是一种&ldquo;境界&rdquo;了。</li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">可有可无属性 -&gt; 魅力属性。被挖掘出来和被认可的过程。这种过程产品经理会很开心。我把这叫做&ldquo;进化&rdquo;<img src="http://photo14.bababian.com/upload5/20101130/BC6042650F46460C27DCB96B622C28A0_500.jpg" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></li>        <li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: disc; ">必备属性-&gt; 不可接受属性。这个不能放在图里，因为这说明产品失败了，或者作出了一个阉割掉的东西。比如淘宝08年下半年做的&ldquo;限时抢购&rdquo;产品，秒杀被玩起来之后有了需求，需求上写了要实现定时改价格提前预告等等。结果开发的时候有人认为预告功能没必要，就&ldquo;被二期&rdquo;了。结果我告诉他们，用户不知道什么时候开始改价格，谁会来等着，没人来等着算什么限时抢购，然后说这个阉掉的产品在没有预告之前不会获得任何推广资源。结果是产品上线推迟了将近2个月。这是个血淋淋的例子，大家要共勉。</li>    </ul>    </li></ul><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">注意，产品属性之间的移动，是单向的。如果出现了反向的移动，很可能是需求发生了颠覆，或者演砸了。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">好了，我觉得说得挺多了，魅力属性是个很有用的东西，把握好了，如虎添翼。写给愿意做好的人。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&ndash;</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">*附：Kano模型的详细信息和实施方法</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span style="color: rgb(255, 0, 0); "><strong style="font-weight: bold; ">=====下面介绍一下这段比较书本化一点，写给研究型产品经理和调研人员参考。</strong></span></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">&nbsp;</strong></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><strong style="font-weight: bold; ">没兴趣可以直接跳过======</strong></p><blockquote style="margin-top: 0.9375em; margin-right: 30px; margin-bottom: 0px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); "><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">其实，上面是经过我简化和概念化的模型概念，原始由日本Kano教授提出的研究方法是这样的：</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">对产品而言，存在三类属性：一维属性、魅力属性和必备属性。产品的功能好坏，和客户满意度之间的关系如下图。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">学过高中数学的同学就应该能明白了，一维属性就是功能越好，客户约满意。而必备属性在功能完善到一定程度之后，满意度变化会趋缓。同时，魅力属性越多，满意度会极大提升。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img src="http://photo14.bababian.com/upload5/20101129/B73741E1E78CC3DE20DE9114E0B382D6_500.jpg" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">此外还有一个&ldquo;次要属性&rdquo;指那些无论功能表现如何，对满意度都不会产生影响的属性。</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Kano分析技术的应用和数据采集：被访者会被要求回答一组配对的问题，数据会很多，也会很麻烦。表格比如：</p><table border="0" cellspacing="0" cellpadding="2" width="361" style="border-collapse: collapse; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; text-align: center; ">    <tbody>        <tr>            <td width="170" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如果电脑有防水键盘，你感觉如何？</td>            <td width="189" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">如果电脑没有防水键盘，你感觉如何？</td>        </tr>        <tr>            <td width="170" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">1. 我喜欢2. 它理应如此3. 无所谓            <p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p>            <p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">4. 我能忍受</p>            <p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">5. 我不喜欢</p>            </td>            <td width="189" valign="top" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">1. 我喜欢2. 它理应如此3. 无所谓            <p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">&nbsp;</p>            <p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">4. 我能忍受</p>            <p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">5. 我不喜欢</p>            </td>        </tr>    </tbody></table><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: left; ">针对得到的配对问题，我们可以给每一种答案一个分类的定义，下面就是一种典型的定义分类方式：</p></blockquote><blockquote style="margin-top: 0.9375em; margin-right: 30px; margin-bottom: 0px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); "><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img src="http://photo14.bababian.com/upload5/20101130/E30BB65D20652A14D9C2952166FB4789.jpg" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; margin-left: auto; margin-right: auto; " /></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">其中A = Attractive = 魅力属性，M = Must-be = 必备属性，O = One-dimensional = 一维属性，I = Indifferent = 次要属性，R = Reflected = 与假设相反的属性，Q = Question = 有问题的回答。</p></blockquote><blockquote style="margin-top: 0.9375em; margin-right: 30px; margin-bottom: 0px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); "><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">然后根据统计得到的不同分值，通过一些算法，可以在上面的坐标系中标注出每一个属性的点，越高说明越重要</p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><img src="http://photo14.bababian.com/upload5/20101130/C29D07E1B040D2B68F37BA74FA2F8FAC.jpg" alt="" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; " /></p></blockquote><blockquote style="margin-top: 0.9375em; margin-right: 30px; margin-bottom: 0px; margin-left: 10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(221, 221, 221); "><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">除了这样的表现，还可以结合高级统计分析方法，得到一些跟深入的分析。</p></blockquote><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; "><span style="color: rgb(255, 0, 0); "><strong style="font-weight: bold; ">=====书本化介绍到底为止======</strong></span></p><p style="margin-top: 15px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">胖胡斐要特别强调，这只是一种分析方法而已，不要不相信分析，但也不能全相信科学。特别对魅力属性而言，相信自己更加重要。</p><div>&nbsp;</div></div></span></p>]]></description><category>产品设计</category><comments>http://www.vvwww.com/post/PD222/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=222</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=222&amp;key=f312da6e</trackback:ping></item><item><title>新版twitter背后的技术</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/ue221/</link><pubDate>Sun, 14 Nov 2010 23:36:30 +0800</pubDate><guid>http://www.vvwww.com/post/ue221/</guid><description><![CDATA[<p><img title="" alt="" src="../../../upload/201011142341063520.jpg" onload="ResizeImage(this,520)" /></p><p>如果要评2010最牛逼的网站改版，除了豆瓣就是Twitter了（开个玩笑）。那天看了<a href="http://twitter.com/newtwitter">新版twitter的介绍视频</a>，相当兴奋，那种感觉就像04年看到 gmail。面对未知的新时代，一部分人在畅想，一部分人在抵触，只有小部分人在行动。Twitter很快交出了他们的答卷。</p><p>今天看到Twitter官方发表的博文&ldquo;<a href="http://engineering.twitter.com/2010/09/tech-behind-new-twittercom.html">The  Tech Behind the New Twitter.com</a>&rdquo;，总结了新版twitter背后的技术，值得一读。（下面的内容不是翻译， 是我的理解）</p><p><strong>API客户端</strong><br />新版背后的一个重要的架构上的改变是像其它第三方客户端一样，Twitter自己也开始基于API开发，唯一不同是他们可以使用更多资源。同时对访问 API做了诸多优化，原文提到的&ldquo;highly optimized JSON fragment cache&rdquo;。</p><p>评论：这种方式是很多技术团队都想实现的，但碍于原有架构的历史问题，下不了决心彻底改变它。但未来要满足各种终端上各种形式应用的开发需求，这种 架构是最灵活的。</p><p><strong>The Javascript API</strong><br />对应后端的API架构，前端自然需要一个很给力的Javascript库实现和后端的数据交互。Twitter内部用到一个库叫@anywhere (<a href="http://platform.twitter.com/js-api.html">http://platform.twitter.com/js-api.html</a>)， 它提供的功能:<br />1. 负责和API交换数据。文档里可以看到提供了丰富的接囗。<br />2. 提供一个客户端的缓存策略（保存在本地的内存和localStorage中）。@ded不久前写的&ldquo;<a href="http://www.dustindiaz.com/javascript-cache-provider/">JavaScript  Cache Provider</a>&rdquo;其实透露了一些细节。<br />3. 提供一个事件通知机制，当UI发生变化，相应处理组件能够立即响应。</p><p>评论：从中可以看到Twitter前端架构的设计思路，跟后端充分对接，建立业务级的通用接囗层，提供通用处理机制解藕，保持代码的模块化。这个路 子很对，很值得借鉴。</p><p><strong>页面管理</strong><br />新版的一个项目目标就是让页面导航更简单更快。它是利用URL hash建立一套浏览器端的页面路由系统。这个具体要等到用上新版后看一看。</p><p>评论：像GMail那种，用URL hash做页面切换，管理起来还是很复杂的。等用上新版后要好好分析一下代码。</p><p><strong>渲染堆栈(The Rendering Stack)</strong><br />新版Twitter的页面都是在前端渲染的，但在不支持Javascript的情况下，后端也需要一个渲染系统。他们前后端用的模板系统都是<a href="http://mustache.github.com/">Mustache</a>，这样前后端可以保持一致，利用Mustache将 API对象转成HTML代码。另外，针对DOM操作还做了诸多优化，如事件处理都是用事件代理机制实现，提高组件的重用性，尽可能减小repaint提高 页面渲染性能等。</p><p>评化：Mustache是开源的模板系统，支持各种语言。我原来认为它有点重，并没有在项目中用过它。但如果真要做一个所有页面切换都是Ajax的 应用，Mustache是首选。</p><p><strong>内联媒体（Inline Media）</strong><br />新版Twitter整合了很多第三方内容，从URL中判断如果是像kiva，vimeo这样的合作方，会利用基于oEmbed标准的JSON-P方式，从 合作方的接囗中抓取内容。如果判断是来自TwitPic的图片或来自Youtube的视频，就直接显示出来。从视频中可以看到，交互方式很酷。</p><p><strong>开源</strong><br />Twitter的前端开发大量用到开源技术，像jQuery, Mustache, LABjs,  Modernizr和大量jQuery插件。这么做的好处是一方面可以将重心放在前端应用的创新上，另一方面对开源社区的发展也是一种推动。自己在项目中 积累的一些技术也会开源。</p><p>评论：我非常赞同这样。不要重复造轮子，尤其像浏览器级的基础功能库，jQuery，YUI已经做的很成熟了，需要做的应该是在没有或没有成熟的开 源技术解决的领域上，通常更多在应用层面上需要建立适合自己产品的各种功能库和框架机制。</p><p>Twitter前端团队成员，可以关注一下：<br />Ben Cherry<br />@bcherry</p><p>http://www.adequatelygood.com/</p><p>Marcus Phillips<br />@mracus</p><p>http://marcusphillips.com/</p><p>Dustin Diaz<br />@ded</p><p>http://www.dustindiaz.com/</p><p>来自 <a href="http://hikejun.com/blog/">Kejun&rsquo;s Blog</a></p><p>&nbsp;</p><br />]]></description><category>用户体验</category><comments>http://www.vvwww.com/post/ue221/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=221</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=221&amp;key=50068ff9</trackback:ping></item><item><title>8款移动应用推荐</title><author>zqzer@163.com (Mars)</author><link>http://www.vvwww.com/post/mobile_app220/</link><pubDate>Wed, 10 Nov 2010 09:39:30 +0800</pubDate><guid>http://www.vvwww.com/post/mobile_app220/</guid><description><![CDATA[<p>&nbsp;<span class="Apple-style-span" style="font-family: 宋体, Arial, Verdana, sans-serif; line-height: 24px; font-size: 13px; color: rgb(51, 51, 51); "><span class="Apple-style-span" style="font-size: 14px; "><strong>1.Muji Cal</strong></span><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; text-align: center; "><img class="aligncenter" src="http://pic.yupoo.com/watsonxu/ABqXTl1W/Fi73x.jpg" alt="" original="http://pic.yupoo.com/watsonxu/ABqXTl1W/Fi73x.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 600px; " /><br />MUJI无印良品一直是我很喜欢的一个品牌，其致力于提倡简约、自然、富质感的MUJI式现代生活哲学很都很多人的喜欢，最近MUJI推出的这款iPad上的Calendar应用也体现了其一款的风格，简约大气，看着很舒服，最喜欢的是其当天页面的展示效果，当日的日程，最近一段时间的日程，还有当日的代办事项。非常喜欢，强烈推荐！</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; ">各平台下载：<a href="http://itunes.apple.com/app/muji-calendar/id396882964?mt=8" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">iPad</span></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; "><strong>2.Memeo</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; text-align: center; "><img class="aligncenter" src="http://pic.yupoo.com/watsonxu/ABqXSOWq/hnIE0.jpg" alt="" original="http://pic.yupoo.com/watsonxu/ABqXSOWq/hnIE0.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 600px; " /><br />Memeo是一家本地文件备份软件制造商，目前也开始推出网络端的文件服务，谷歌在去年与其达成协议，让其为谷歌文档的存储功能开发一个本地客户端。 Memeo目前已经提供了能够在Mac和Windows平台下使用的Google Docs桌面客户端Memeo Connect，现在还提供了iPhone和iPad客户端。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; ">各平台下载：<a href="http://itunes.apple.com/us/app/memeo-connect-reader-google/id386398634?mt=8" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">iPhone/iPad Touch</span></a>；<a href="http://itunes.apple.com/us/app/memeo-connect-reader/id363616159?mt=8" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">iPad</span></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; "><strong>3.ReadSquare</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; text-align: center; "><img class="aligncenter" src="http://pic.yupoo.com/watsonxu/ABr1Czzb/oWf1A.jpg" alt="" original="http://pic.yupoo.com/watsonxu/ABr1Czzb/oWf1A.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 600px; display: inline; " /><br />ReadSquare是一个支持Twitter、Facebook和Google Reader的阅读器，支持将内容进行重新排版，和FlipBoard很绚的风格不同，其是一种相对简约的风格，目前限时免费中。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; ">各平台下载：<a href="http://itunes.apple.com/us/app/readsquare/id399480537" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">iPad</span></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; "><strong>4.ENDI Tank Battle HD</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; text-align: center; "><img class="aligncenter" src="http://pic.yupoo.com/watsonxu/ABqXU02P/Txpbq.jpg" alt="" original="http://pic.yupoo.com/watsonxu/ABqXU02P/Txpbq.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 600px; display: inline; " /><br />这个游戏是最近iPad免费排行榜上排第一的一个应用，非常有意思的一个游戏，需要在指定时间内消灭一定的坦克，通过控制iPad来控制方向。此外还提供了iPhone/iPod Touch版本。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; ">各个平台下载：<a href="http://itunes.apple.com/us/app/endi-tank-battle-hd/id400291223?mt=8" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">iPad</span></a>；<a href="itms://itunes.apple.com/us/app/endi-tank-battle/id393148397" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">iPhone/iPod Touch</span></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; "><strong>5.黑板</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; text-align: center; "><img class="aligncenter" src="http://pic.yupoo.com/watsonxu/ABr04KdM/13XeJT.jpg" alt="" original="http://pic.yupoo.com/watsonxu/ABr04KdM/13XeJT.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 600px; display: inline; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; ">iPad上的一个提供类似黑板功能的服务，提供了不同的颜色，画好之后可以通过邮件、Twitter、Facebook进行分享。另外还可以查看别人共享的画的画，进行评级等等。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; ">各平台下载：<a href="http://itunes.apple.com/us/app/chalk-board/id374235211?mt=8" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">iPad</span></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; "><strong>6.TouchWriter</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; text-align: center; "><img class="aligncenter" src="http://pic.yupoo.com/watsonxu/ABqXRJ1Y/9qG8b.jpg" alt="" original="http://pic.yupoo.com/watsonxu/ABqXRJ1Y/9qG8b.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 600px; display: inline; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; ">我很喜欢的一个应用，这是一个可以记录你手写记录的Note软件，并且可以记录Note记录的位置，在地图上查看这些Note，并且可以同步到Evernote，Dropbox，Google Docs，Twitter。强烈推荐！</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; ">各个平台下载：<a href="http://itunes.apple.com/us/app/touchwriter/id376495976?mt=8" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">iPhone/iPod Touch</span></a>（1.99$）；<a href="http://itunes.apple.com/app/touchwriter-hd/id399206692?mt=8" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">iPad</span></a>（2.99$）</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; "><strong>7.丁仔</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; text-align: center; "><img class="aligncenter" src="http://pic.yupoo.com/watsonxu/ABqXSjYs/11RZVh.jpg" alt="" original="http://pic.yupoo.com/watsonxu/ABqXSjYs/11RZVh.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 600px; display: inline; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; ">这个<a href="http://dingzai.com/" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">丁仔</span></a>可以认为是国内的一个类似的服务，提供集成Lomo、相片在线存储、跨平台管理，不过个人使用下来，使用体验方面还是和Instagram有些差距。</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; ">各个平台下载：<a href="http://itunes.apple.com/us/app/id397580071?mt=8" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">iPhone/iPod Touch</span></a>；<a href="http://www.dingzai.com/download.html" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">Android</span></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; "><strong>8.优士</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; text-align: center; "><img class="aligncenter" src="http://pic.yupoo.com/watsonxu/ABr1C7Cx/kDE9C.jpg" alt="" original="http://pic.yupoo.com/watsonxu/ABr1C7Cx/kDE9C.jpg" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; max-width: 600px; display: inline; " /></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; "><a href="http://www.ushi.cn/user/index.jhtml" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">优士网</span></a>是一个实行邀请制的私密商务社交平台，由中国100位商业领袖共同创立，专注于将中国有影响力的职业人士、企业家和创业者联系起来，帮助他们找到客户，商业伙伴，行业专家和职业机会，致力于打造国内的Linkedin。目前也提供了iPhone版本，不过个人使用下来觉得这个iPhone版本还有很多地方需要提高，和Linkedin客户端有很大的差距！</p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; ">各平台下载：<a href="http://itunes.apple.com/lv/app/id369852437?mt=8" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">iPhone/iPod Touch</span></a></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; font-size: 14px; ">本文摘自：<span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); "><a href="http://www.web20share.com/2010/11/mobile-apps-03-201011.html" target="_blank" style="color: rgb(36, 40, 43); text-decoration: none; "><span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: rgb(51, 102, 255); ">http://www.web20share.com/2010/11/mobile-apps-03-201011.html</span></a></span></p></span></p>]]></description><category>移动应用</category><comments>http://www.vvwww.com/post/mobile_app220/#comment</comments><wfw:comment>http://www.vvwww.com/</wfw:comment><wfw:commentRss>http://www.vvwww.com/feed.asp?cmt=220</wfw:commentRss><trackback:ping>http://www.vvwww.com/cmd.asp?act=tb&amp;id=220&amp;key=dd2e019c</trackback:ping></item></channel></rss>

