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

<channel>
	<title>Mykite&#039;s Blog</title>
	<atom:link href="http://www.mykite.cn/feed" rel="self" type="application/rss+xml" />
	<link>http://www.mykite.cn</link>
	<description>用户体验设计和前端技术应用</description>
	<lastBuildDate>Fri, 23 Sep 2011 18:22:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>网站运营数据分析之内容指标</title>
		<link>http://www.mykite.cn/post/70</link>
		<comments>http://www.mykite.cn/post/70#comments</comments>
		<pubDate>Fri, 23 Sep 2011 18:22:38 +0000</pubDate>
		<dc:creator>mykite</dc:creator>
				<category><![CDATA[数据分析]]></category>

		<guid isPermaLink="false">http://www.mykite.cn/?p=70</guid>
		<description><![CDATA[<p>        做为网站运营、产品经理、交互设计师等职位，经常要对网站的一些运营数据做分析，那么这些公式是如何计算的，每个术语又代表什么意思呢？请看<strong>网站运营数据分析之内容指标</strong>：</p><p align="left"><strong>网站转换率　</strong><strong>Take Rates </strong><strong>（</strong><strong>Conversions Rates</strong><strong>）</strong></p><p align="left">计算公式：网站转换率＝进行了相应的动作的访问量／总访问量</p><p align="left">指标意义：衡量网站内容对访问者的吸引程度以及网站的宣传效果</p><p align="left">指标用法：当你在不同的地方测试新闻订阅、下载链接或注册会员，你可以使用不同的链接的名称、订阅的方式、广告的放置、付费搜索链接、付费广告（PPC）等等，看看那种方式是能够保持转换率在上升？如何增强来访者和网站内容的相 <span class='read-more'><a href='http://www.mykite.cn/post/70'>Continue Reading >></a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>        做为网站运营、产品经理、交互设计师等职位，经常要对网站的一些运营数据做分析，那么这些公式是如何计算的，每个术语又代表什么意思呢？请看<strong>网站运营数据分析之内容指标</strong>：</p>
<p align="left"><strong>网站转换率　</strong><strong>Take Rates </strong><strong>（</strong><strong>Conversions Rates</strong><strong>）</strong></p>
<p align="left">计算公式：网站转换率＝进行了相应的动作的访问量／总访问量</p>
<p align="left">指标意义：衡量网站内容对访问者的吸引程度以及网站的宣传效果</p>
<p align="left">指标用法：当你在不同的地方测试新闻订阅、下载链接或注册会员，你可以使用不同的链接的名称、订阅的方式、广告的放置、付费搜索链接、付费广告（PPC）等等，看看那种方式是能够保持转换率在上升？如何增强来访者和网站内容的相关性？如果这个值上升，说明相关性增强了，反之，则是减弱。</p>
<p align="left"><strong>回访者比率　</strong><strong>Repeat Visitor Share</strong></p>
<p align="left">计算公式：回访者比率＝回访者数／独立访问者数</p>
<p align="left">指标意义：衡量网站内容对访问者的吸引程度和网站的实用性，你的网站是否有令人感兴趣的内容使访问者再次回到你的网站。</p>
<p align="left">指标用法：基于访问时长的设定和产生报告的时间段，这个指标可能会有很大的不同。绝大多数的网站都希望访问者回访，因此都希望这个值在不断提高，如果这个值在下降，说明网站的内容或产品的质量没有加强。需要注意的是，一旦你选定了一个时长和时间段，就要使用相同的参数来产生你的报告，否则就失去比较的意义。</p>
<p align="left"><strong>积极访问者比率　</strong><strong>Heavy User Share</strong></p>
<p align="left">计算公式：积极用户比率＝访问超过N页的用户／总的访问数</p>
<p align="left">指标意义：衡量有多少访问者是对网站的内容高度的兴趣</p>
<p align="left">指标用法：根据你网站的内容和大小，去衡量N的大小，比如内容类的网站通常定义在11~15页左右，如果是电子商务类网站则可定义在7~10页左右。如果你的网站针对正确的目标受众并且网站使用方便，你可以看到这个指标应该是不断的上升。</p>
<p align="left"><strong>忠实访问者比率　</strong><strong>Committed Visitor Share</strong></p>
<p align="left">计算公式：访问时间在N分钟以上的用户数／总用户数</p>
<p align="left">指标意义：和上一个指标的意义相同，只是使用停留的时间取代浏览页数，取决于网站的目标，你可以使用两个中的一个或结合使用。</p>
<p align="left">指标用法：其中的N也通过网站的类型和大小来定义，比如大型网站通常定位在20分钟左右。这个访问者指标如果单独使用很难体现他的效用，应该结合其它网站运营的数据指标一起使用，例如转换率，但总体来说，较长的访问时长意味着用户喜欢呆在你的网站，高的忠实访问率当然是较好的。同样的，访问时长也可以根据不同的需要自行设定。</p>
<p align="left"><strong>忠实访问者指数　</strong><strong>Committed Visitor Index</strong></p>
<p align="left">计算公式：忠实访问者指数＝大于N分钟的访问页数／大于N分钟的访问者数</p>
<p align="left">指标意义：指的是每个长时间访问者的平均访问页数，这是一个重要的指标，它结合了页数和时间。</p>
<p align="left">指标用法：这个指数通过页面和时间对网站进行了一个更细的区分，也许访问者正好离开吃饭去了。如果这个指数较低，那意味着有较长的访问时间但是较低的访问页面。通常都希望看到这个指数有较高的值，如果你修改了网站，增加了网站的功能和资料，吸引更多的忠实访问者留在网站并浏览内容，这个指数就会上升。</p>
<p align="left"><strong>忠实访问者量　</strong><strong>Committed Visitor Volume</strong></p>
<p align="left">计算公式：忠实访问者量＝大于N分钟的访问页数／总的访问页数</p>
<p align="left">指标意义：长时间的访问者所访问的页面占所有访问页面数的量</p>
<p align="left">指标用法：网站通常都是靠宣传和推广吸引用户，这个指标的意义就显得尤为重要了，因为它代表了总体的页面访问质量。如果你有１００００的访问页数却仅有１％的忠实访问者率，这意味着你可能吸引了错误的访问者，这些访问者没有啥价值，他们仅仅看一眼你的网页就离开了。这是你应该考虑你的推广方式和宣传方式是不是有什么问题了。</p>
<p align="left"><strong>访问者参与指数　</strong><strong>Visitor Engagement Index</strong></p>
<p align="left">计算公式：访问者参与指数＝总访问数／独立访问者数</p>
<p align="left">指标意义：这个指标是每个访问者的平均会话（session），代表着部分访问者的多次访问的趋势。</p>
<p align="left">指标用法：与回访者比率不同，这个指标代表着回访者的强烈度，如果有一个非常正确的目标受众不断的回访网站，这个指数将大大高于１；如果没有回访者，指数将趋近于１，意味着每一个访问者都有一个新的会话。这个指数的高低取决于网站的目标，大部分的内容型和商业性的网站都希望每个访问者在每周／每月有多个会话（session）；但是如客户服务尤其是投诉之类的页面或网站则希望这个指数尽可能地接近于１。</p>
<p align="left"><strong>回弹率（所有页面）</strong><strong>Reject Rate</strong><strong>／</strong><strong>Bounce Rate</strong></p>
<p align="left">计算公式：回弹率（所有页面）＝单页面访问数／总访问数</p>
<p align="left">指标意义：代表着访问者看到的仅有的一页的比率</p>
<p align="left">指标意义：这个指标对于最高的进入页面有很重要的意义，因为流量就是从这些页面产生的，那么在网站策划和网站规划时，你需要对网站的导航或布局设计进行架构设计时，尤其要注意到这个参数。总而你是希望这个比率不断地下降。</p>
<p align="left"><strong>回弹率（首页）</strong><strong>Reject Rate</strong><strong>／</strong><strong>Bounce Rate</strong></p>
<p align="left">计算公式：回弹率（首页）＝仅仅访问首页的访问数／所有从首页开始的访问数</p>
<p align="left">指标意义：这个指标代表所有从首页开始的访问者中仅仅看了首页的访问者比率</p>
<p align="left">指标意义：这个指标是所有内容型指标中最重要的一个，通常我们认为首页是最高的进入页面（当然，如果你的网站有其他更高的进入页面，那么也应该把它加入到追踪的目标中，如推广广告等）。对任意一个网站，我们可以想象，如果访问者对首页或最常见的进入页面都是一掠而过，说明网站策划时在某一方面有问题。如果针对的目标市场是正确的，说明是访问者不能找到他想要的东西，或者是网页的设计上有问题（包括页面布局、网速、链接的文字等等）；如果网站设计是可行易用的，网站的内容可以很容易地找到，那么问题可能出在访问者的质量上，即市场问题。</p>
<p align="left"><strong>浏览用户比率　</strong><strong>Scanning Visitor Share</strong></p>
<p align="left">计算公式：浏览用户比率＝少于１分钟的访问者数／总访问数</p>
<p align="left">指标意义：这个指标一定程度上衡量网页的吸引程度。</p>
<p align="left">指标用法：大部分的网站都希望访问者停留超过一分钟，如果这个指标的值太高，那么就应该考虑一下网页的内容是否过于简单，网站的导航菜单是否需要改进。</p>
<p align="left"><strong>浏览用户指数　</strong><strong>Scanning Visitor Index</strong></p>
<p align="left">计算公式：浏览用户指数＝少于１分钟的访问页面数／少于１分钟的访问者数</p>
<p align="left">指标意义：一分钟内的访问者平均访问页数</p>
<p align="left">指标用法：这个指数也接近于１，说明访问者对网站越没兴趣，他们仅仅是瞄一眼就离开了。这也许是导航的问题，如果你对导航系统进行了显著的改进，应该可以看到这个指数在上升；如果指数还是下降，应该是网站的目标市场及使用功能有问题，应该着手解决。将浏览用户比率和浏览用户指数结合起来使用，可以看出用户是在浏览有用的信息还是厌烦而离开。</p>
<p align="left"><strong>浏览用户量　</strong><strong>Scanning Visitor Volume</strong></p>
<p align="left">计算公式：浏览用户量＝少于１分钟的浏览页数／所有浏览页数</p>
<p align="left">指标意义：在一分钟内完成的访问页面数的比率</p>
<p align="left">指标用法：根据网站的目标的不同，这个指标的高低有不同的要求，大部分的网站希望这个指标降低。如果是搞广告驱动的网站，这个指标太高对于长期的目标是不利的，因为这意味着尽管你通过广告吸引了许多的访问者，产生很高的访问页数，但是访问者的质量却是不高的，所能带来的收益也就会受到影响。</p>
<p align="left"><strong>二、网站分析的商业指标</strong></p>
<p align="left"><strong>平均订货额　</strong><strong>Average Order Amount </strong><strong>（</strong><strong>AOA</strong><strong>）</strong></p>
<p align="left">计算公式：平均订货额＝总销售额／总订货数</p>
<p align="left">指标意义：用来衡量网站销售状况的好坏</p>
<p align="left">指标用法：将网站的访问者转化为买家当然是很重要的，同样重要的是激励买家在每次访问是购买更多的产品。跟踪这个指标可以找到更好的改进方法。</p>
<p align="left"><strong>订单转化率　</strong><strong>Conversion Rate </strong><strong>（</strong><strong>CR</strong><strong>）</strong></p>
<p align="left">计算公式：订单转化率＝总订货数／总访问量</p>
<p align="left">指标意义：这是一个比较重要的指标，衡量网站的对每个访问者的销售情况</p>
<p align="left">指标用法：通过这个指标你可以看到即使一些微小的变化都可能给网站的收入带来巨大的变化。如果你还能够区分出新、旧访问者所产生的订单，那么就可以细化这个指标，对新旧客户进行分别的统计。</p>
<p align="left"><strong>每访问者销售额　</strong><strong>Sales Per Visit </strong><strong>（</strong><strong>SPV</strong><strong>）</strong></p>
<p align="left">计算公式：每访问者销售额＝总销售额／总访问数</p>
<p align="left">指标意义：这个指标也是用来衡量网站的市场效率</p>
<p align="left">指标用法：这个指标和转化率差不多，只是表现形式不同。</p>
<p align="left"><strong>单笔订单成本　</strong><strong>Cost per Order </strong><strong>（</strong><strong>CPO</strong><strong>）</strong></p>
<p align="left">计算公式：单笔订单成本＝总的市场营销开支／总订货数</p>
<p align="left">指标意义：衡量平均的订货成本</p>
<p align="left">指标用法：每笔订单的营销成本对于网站的盈利和现金流都是非常关键的。营销成本的计算各人有不同的标准，有些把全年的网站营运费用摊入到每月的成本中，有些则不这么做，关键要看那种最适合自己的情况。如果能够在不增加市场营销成本的情况下提高转化率，这个指标就应该会下降。</p>
<p align="left"><strong>再订货率　</strong><strong>Repeat Order Rate </strong><strong>（</strong><strong>ROR</strong><strong>）</strong></p>
<p align="left">计算公式：再订货率＝现有客户订单数／总订单数</p>
<p align="left">指标意义：用来衡量网站对客户的吸引力</p>
<p align="left">指标用法：这个指标的高低和客户服务有很大关系，只有满意的用户产品体验和服务才能提高这个指标。</p>
<p align="left"><strong>单个访问者成本　</strong><strong>Cost Per Visit </strong><strong>（</strong><strong>CPV</strong><strong>）</strong></p>
<p align="left">计算公式：单个访问者成本＝市场营销费用／总访问数</p>
<p align="left">指标意义：用来衡量网站的流量成本</p>
<p align="left">指标用法：这个指标衡量的是你的市场效率，目标是要降低这个指标而提高SPV，为此要将无效的市场营销费用削减，增加有效的市场投入。</p>
<p align="left"><strong>订单获取差额　</strong><strong>Order Acquisition Gap </strong><strong>（</strong><strong>OAG</strong><strong>）</strong></p>
<p align="left">计算公式：订单获取差额＝单个访问者成本（CPV）－单笔订单成本（CPO）</p>
<p align="left">指标意义：这是一个衡量市场效率的指标，代表着网站所带来的访问者和转化的访问者之间的差异</p>
<p align="left">指标用法：指标的值应是一个负值，这是一个测量从非访问者中获得客户的成本。有两种方法来降低这个差额，当你增强了网站的销售能力，CPO就会下降，这个差额就会缩小，说明网站转化现有流量的能力得到了加强；同样的，CPV可能升高而CPO保持不变或降低，这个差额也会缩小，表明网站所吸引的流量都具有较高的转化率，这种情形通常发生在启用了PPC（pay per click）的计划。</p>
<p align="left"><strong>订单获取率　</strong><strong>Order Acquisition Ratio </strong><strong>（</strong><strong>OAR</strong><strong>）</strong></p>
<p align="left">计算公式：订单获取率＝单笔订单成本（CPO）／单个访问者成本（CPV）</p>
<p align="left">指标意义：用另一种形式来体现市场效率</p>
<p align="left">指标用法：用比率的形式往往比较容易为管理阶层所理解，尤其是财务人员。</p>
<p align="left"><strong>每笔产出　</strong><strong>Contribution per Order </strong><strong>（</strong><strong>CON</strong><strong>）</strong></p>
<p align="left">计算公式：每笔产出＝（平均订货数Ｘ平均边际收益）－每笔订单成本</p>
<p align="left">指标意义：每笔订单给你带来的现金增加净值</p>
<p align="left">指标用法：公司的财务总监总是对这个指标感兴趣的，代表了你花了多少钱来赚多少钱。</p>
<p align="left"><strong>投资回报率　</strong><strong>Return on Investment </strong><strong>（</strong><strong>ROI</strong><strong>）</strong></p>
<p align="left">计算公式： 投资回报率＝每笔产出（CON） /每笔订单成本 （CPO）</p>
<p align="left">指标意义： 用来衡量你的广告的投资回报</p>
<p>指标用法：比较你的广告的回报率，应该把钱分配给有最高回报率的广告，但是这个回报率应当要有时间段的限制，比如“２５％ RIO/每周”和“２５％　RIO／每年”是有很大差别的</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mykite.cn/post/70/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>分享一个专门收集用HTML5编码制作的网站导航</title>
		<link>http://www.mykite.cn/post/64</link>
		<comments>http://www.mykite.cn/post/64#comments</comments>
		<pubDate>Mon, 19 Sep 2011 19:58:42 +0000</pubDate>
		<dc:creator>mykite</dc:creator>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[前端开发]]></category>

		<guid isPermaLink="false">http://www.mykite.cn/?p=64</guid>
		<description><![CDATA[<p>HTML5Gallery: 是一个专门收集用HTML5代码制作的网页的网站导航，Gallery网站越来越细分化，如果你正准备学习HTML5，可以从这些网站里面查看各种实例，提高你对HTML的认知和使用。这里我们可以学习到国外优秀的网页制作方法，有兴趣的童鞋可以去看看能不能学到对自己有价值的知识。</p><p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/2011330052987002.jpg"></a></p><p>访问地址是：<a href="http://html5gallery.com/" target="_blank">http://html5gallery.com/</a> <span class='read-more'><a href='http://www.mykite.cn/post/64'>Continue Reading >></a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>HTML5Gallery: 是一个专门收集用HTML5代码制作的网页的网站导航，Gallery网站越来越细分化，如果你正准备学习HTML5，可以从这些网站里面查看各种实例，提高你对HTML的认知和使用。这里我们可以学习到国外优秀的网页制作方法，有兴趣的童鞋可以去看看能不能学到对自己有价值的知识。</p>
<p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/2011330052987002.jpg"><img class="alignnone size-full wp-image-65" title="HTML5Gallery" src="http://www.mykite.cn/wp-content/uploads/2011/09/2011330052987002.jpg" alt="HTML5Gallery" width="528" height="371" /></a></p>
<p>访问地址是：<a href="http://html5gallery.com/" target="_blank">http://html5gallery.com/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.mykite.cn/post/64/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>完整B2C网站的设计过程（二）</title>
		<link>http://www.mykite.cn/post/53</link>
		<comments>http://www.mykite.cn/post/53#comments</comments>
		<pubDate>Mon, 19 Sep 2011 19:30:51 +0000</pubDate>
		<dc:creator>mykite</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[B2C]]></category>
		<category><![CDATA[保健品]]></category>

		<guid isPermaLink="false">http://www.mykite.cn/?p=53</guid>
		<description><![CDATA[<p style="text-align: left;">        网站信息架构完成以后就可以开始了吗？答案是：NO，那还不是完整的。我们前期所有需求分析的目标只有一个，“让用户愉快的体验购物的过程”，所以我们需要整理出用户的购物流程，与上一篇中的购物流程略有不同，这里我们主要是模拟用户从进入网站到完成购买有哪些动作，以便后期完成我们的系统功能设计。我们先画出当用户第一次进入网站到完成购买的流程：<a href="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_051.jpg"></a></p><p>        这只是一个简单的流程图，你可以在这个基础上绘制出更多的用户行为，模拟用户在购买商品的过程中可能会遇到哪些问题，如何在用户遇到问题的时候通过网站的信息提示帮助用户去解决这些问题，在设计这些功能的时候千万不要盲目的凭自己的经验武断的认 <span class='read-more'><a href='http://www.mykite.cn/post/53'>Continue Reading >></a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">        网站信息架构完成以后就可以开始了吗？答案是：NO，那还不是完整的。我们前期所有需求分析的目标只有一个，“让用户愉快的体验购物的过程”，所以我们需要整理出用户的购物流程，与上一篇中的购物流程略有不同，这里我们主要是模拟用户从进入网站到完成购买有哪些动作，以便后期完成我们的系统功能设计。我们先画出当用户第一次进入网站到完成购买的流程：<a href="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_051.jpg"><img class="alignnone size-full wp-image-55" title="baojianpin_05" src="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_051.jpg" alt="" width="673" height="237" /></a></p>
<p>        这只是一个简单的流程图，你可以在这个基础上绘制出更多的用户行为，模拟用户在购买商品的过程中可能会遇到哪些问题，如何在用户遇到问题的时候通过网站的信息提示帮助用户去解决这些问题，在设计这些功能的时候千万不要盲目的凭自己的经验武断的认为用户就该这样做。每个网站的模式、每种商品的属性都是不同的，在用户选择的时候考虑的角度也不同。比如：购买一件衣服的时候用户可能担心的是衣服的面料怎么样？尺码是否合身？而购买保健品的时候用户更加看重的是它所具有的保健效果，这些都要通过用户购买商品时的不同心理分析得出。举一个例子，我们来看看两个B2C网站的用户注册页面包含了哪些信息，在用户操作的过程中给予用户哪些不同的信息。</p>
<p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_06.jpg"><img class="alignnone size-full wp-image-58 aligncenter" title="baojianpin_06" src="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_06.jpg" alt="麦考林用户注册界面" width="478" height="268" /></a></p>
<p style="text-align: center;"><strong>麦考林用户注册界面</strong></p>
<p style="text-align: center;"><strong></strong> </p>
<p style="text-align: center;"><a href="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_07.jpg"><img class="alignnone size-full wp-image-59" title="baojianpin_07" src="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_07.jpg" alt="京东商城注册界面" width="546" height="325" /></a></p>
<p style="text-align: center;"><strong>京东商城用户注册界面</strong></p>
<p>        通过判断用户在注册过程中会遇到哪些问题，设计表单的时候需要在不同状态下给出不同的提示信息，这些信息帮助用户更快的完成这个步骤，发生错误的时候明确的告诉TA们，哪里错了？也就是说我们要在用户遇到这些问题之前就考虑到可能会发生什么样的问题，不要让用户进入你的网站以后还要费力的去学习怎么才能在这个网站里买到我想要的东西，这样只会浪费公司的推广费用。记住，好的产品设计是可以帮助网站留住用户并提升网站转化率的法宝。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mykite.cn/post/53/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>很久以前做的一些东西</title>
		<link>http://www.mykite.cn/post/37</link>
		<comments>http://www.mykite.cn/post/37#comments</comments>
		<pubDate>Sun, 18 Sep 2011 23:24:57 +0000</pubDate>
		<dc:creator>mykite</dc:creator>
				<category><![CDATA[界面设计]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[网页设计]]></category>

		<guid isPermaLink="false">http://www.mykite.cn/?p=37</guid>
		<description><![CDATA[<p>整理资料的时候发现硬盘里尽然还藏着很早以前刚做网页设计的时候做的一些网页设计作品，顺手整理几张像样的贴上来也算对过去的一种美好回忆吧！</p><p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/21.png"></a></p><p>第一个自己设计的BOLG封皮</p><p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/1.png"></a></p><p>这个是改版后的效果，封面的这面鼓是在海南旅游的时候拍的一张照片，当时感觉拍的还挺好，于是就拿来做BOLG的首页素材啦！</p><p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/3.png"></a></p><p>这个更早，06年世界杯前期在猫扑的一个活动，为匡威的鞋子做一个图片，主题就是“不就是支持嘛！”</p><p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/1-2.png"></a></p><p>这是同事生日的时候做的一个FLASH页面，可惜当时的源文件现在已经找不到了，记得做了两帧，里面的还可以播放音乐，挺酷的。这可能算我做的最好的一个FLASH作品吧，哈哈！</p><p>还有 <span class='read-more'><a href='http://www.mykite.cn/post/37'>Continue Reading >></a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>整理资料的时候发现硬盘里尽然还藏着很早以前刚做网页设计的时候做的一些网页设计作品，顺手整理几张像样的贴上来也算对过去的一种美好回忆吧！</p>
<p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/21.png"><img class="size-full wp-image-40 alignleft" title="mykite's blog" src="http://www.mykite.cn/wp-content/uploads/2011/09/21.png" alt="mykite's blog" width="330" height="488" /></a></p>
<p>第一个自己设计的BOLG封皮</p>
<p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/1.png"><img class="alignright size-full wp-image-41" title="mykite's blog v2" src="http://www.mykite.cn/wp-content/uploads/2011/09/1.png" alt="mykite's blog v2" width="780" height="468" /></a></p>
<p>这个是改版后的效果，封面的这面鼓是在海南旅游的时候拍的一张照片，当时感觉拍的还挺好，于是就拿来做BOLG的首页素材啦！</p>
<p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/3.png"><img class="alignright size-full wp-image-42" title="3" src="http://www.mykite.cn/wp-content/uploads/2011/09/3.png" alt="" width="342" height="175" /></a></p>
<p>这个更早，06年世界杯前期在猫扑的一个活动，为匡威的鞋子做一个图片，主题就是“不就是支持嘛！”</p>
<p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/1-2.png"><img class="alignnone size-full wp-image-43" title="1-2" src="http://www.mykite.cn/wp-content/uploads/2011/09/1-2.png" alt="" width="780" height="462" /></a></p>
<p>这是同事生日的时候做的一个FLASH页面，可惜当时的源文件现在已经找不到了，记得做了两帧，里面的还可以播放音乐，挺酷的。这可能算我做的最好的一个FLASH作品吧，哈哈！</p>
<p>还有一些工作上的就不贴出来现眼了，过去就过去了，展望未来吧！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mykite.cn/post/37/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>学会三点，即可打造良好的交互设计效果</title>
		<link>http://www.mykite.cn/post/23</link>
		<comments>http://www.mykite.cn/post/23#comments</comments>
		<pubDate>Sun, 18 Sep 2011 22:59:58 +0000</pubDate>
		<dc:creator>mykite</dc:creator>
				<category><![CDATA[交互设计]]></category>

		<guid isPermaLink="false">http://www.mykite.cn/?p=23</guid>
		<description><![CDATA[<p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/11071714067ab0f4339ce50168.jpg"></a></p><p>交互设计，表现出来的呈现方式可谓是多种多样，</p><p>不过你只要掌握好了以下三点的使用技巧，同样可能轻松打造出良好的交互设计效果。</p><p><span style="color: #ff8c00;"><strong>1.响应</strong></span></p><p>对即将产生交互内容的区域提供给操作者一种响应机制。</p><p>参考实例：<a href="http://glyde.com/" target="_blank">http://glyde.com</a></p><p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/1001121813bef63781c116d057.jpg"></a></p><p>不同的内容有很多响应的处理方法，</p><p>比如：链接加个下划线，图片链接变换下外边框颜色，</p><p>鼠标划过某区域，变化下背景色，同时出现一些隐性的操作按钮，如删除操作等。</p><p>注意：忌讳因为某区块产生响应，而让其它区块边界产生生硬的错位。</p><p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/100112181317f9d561dea5edd2.jpg"></a></p><p>补充：提示音也是一种响应。</p><p>比如：用iPhone发送邮件，发送成功后会听到“嗖...”的一 <span class='read-more'><a href='http://www.mykite.cn/post/23'>Continue Reading >></a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/11071714067ab0f4339ce50168.jpg"><img class="alignnone size-full wp-image-24 alignleft" title="11071714067ab0f4339ce50168" src="http://www.mykite.cn/wp-content/uploads/2011/09/11071714067ab0f4339ce50168.jpg" alt="" width="472" height="292" /></a></p>
<p>交互设计，表现出来的呈现方式可谓是多种多样，<br />
不过你只要掌握好了以下三点的使用技巧，同样可能轻松打造出良好的交互设计效果。</p>
<p><span style="color: #ff8c00;"><strong>1.响应</strong></span></p>
<p>对即将产生交互内容的区域提供给操作者一种响应机制。</p>
<p>参考实例：<a href="http://glyde.com/" target="_blank">http://glyde.com</a></p>
<p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/1001121813bef63781c116d057.jpg"><img class="alignnone size-full wp-image-25" title="1001121813bef63781c116d057" src="http://www.mykite.cn/wp-content/uploads/2011/09/1001121813bef63781c116d057.jpg" alt="" width="462" height="307" /></a></p>
<p>不同的内容有很多响应的处理方法，</p>
<p>比如：链接加个下划线，图片链接变换下外边框颜色，</p>
<p>鼠标划过某区域，变化下背景色，同时出现一些隐性的操作按钮，如删除操作等。</p>
<p>注意：忌讳因为某区块产生响应，而让其它区块边界产生生硬的错位。</p>
<p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/100112181317f9d561dea5edd2.jpg"><img class="size-full wp-image-26 alignleft" title="100112181317f9d561dea5edd2" src="http://www.mykite.cn/wp-content/uploads/2011/09/100112181317f9d561dea5edd2.jpg" alt="" width="466" height="417" /></a></p>
<p>补充：提示音也是一种响应。</p>
<p>比如：用iPhone发送邮件，发送成功后会听到“嗖&#8230;”的一声。</p>
<p>另一个参考实例：</p>
<p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/1105082028cefc5561e6c047b7.jpg"><img class="size-full wp-image-27 alignleft" title="1105082028cefc5561e6c047b7" src="http://www.mykite.cn/wp-content/uploads/2011/09/1105082028cefc5561e6c047b7.jpg" alt="" width="425" height="255" /></a></p>
<p><strong><span style="color: #ff8c00;">2.过渡过程或转场效果</span></strong></p>
<p>对即将产生的交互变化，提供一个过渡过程或转场的效果。<br />
过渡过程，如：延时移动、淡入淡出等。<br />
转场效果，如：滑动、门开关、缩放、翻转等。<br />
参考实例：<a href="http://glyde.com/" target="_blank">http://glyde.com</a><br />
<a href="http://www.mykite.cn/wp-content/uploads/2011/09/1001121813b54ed3674a751151.gif"><img class="alignright size-full wp-image-30" title="1001121813b54ed3674a751151" src="http://www.mykite.cn/wp-content/uploads/2011/09/1001121813b54ed3674a751151.gif" alt="" width="693" height="329" /></a></p>
<p>点击某个封面，延时移动给操作者带来一个很好的引导阅读过程。<br />
注意：要频繁处理的操作，过渡过程耽误时间的同时，还可能造成误点击。</p>
<p>过渡效果有时候还可以减少不必要的态度变更提醒：<br />
比如，删除邮件后不需要显示邮件已删除。<br />
而是点击删除后，该条内容闪烁一下（响应），然后逐渐消失，<br />
因为你已经真实的看到了删除的过程，所以不必再显示邮件已删除的状态变更提醒。</p>
<p><strong><span style="color: #ff8c00;">3.移位</span></strong></p>
<p>在不弹层、弹窗情况下的内容移位。合理的运用页面内容的展开、收起。<br />
操作者在即将产生交互的地方，就近通过这种方式就完成了轻便的操作。</p>
<p>参考实例：<a href="http://gizmodo.com/" target="_blank">http://gizmodo.com/</a><br />
                <a href="http://www.axure.org/demo" target="_blank">http://www.axure.org/demo</a>    下边的展开与收起<br />
<a href="http://www.mykite.cn/wp-content/uploads/2011/09/1001121813f5bc0802580491ad.gif"><img class="size-full wp-image-31 alignleft" title="1001121813f5bc0802580491ad" src="http://www.mykite.cn/wp-content/uploads/2011/09/1001121813f5bc0802580491ad.gif" alt="" width="353" height="172" /></a></p>
<p>点击下边地址中的视频播放，同样可以看到视频右侧文字内容的移位效果。<br />
<a href="http://www.cnn.com/2010/TECH/01/13/google.china.analysis/index.html" target="_blank">http://www.cnn.com/2010/TECH/01/ &#8230; analysis/index.html</a><br />
        <br />
我们总结出来结论，所有交互过程不外乎包括以下三个要素：</p>
<p>1. 响应：可以引起触发的区域提供响应变化<br />
2. 过程效果：让人的视线一直保持连贯<br />
3. 移位：不必要弹出新页面时，通过伸展原区域的大小完成小的功能交互，以达到用最小的视觉变化完成交互任务的目的。</p>
<p>注意：过渡过程和移位在Web开发实现上，可能大量应用到Js库，非必要时可以尽量减少使用。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mykite.cn/post/23/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>完整B2C网站的设计过程（一）</title>
		<link>http://www.mykite.cn/post/7</link>
		<comments>http://www.mykite.cn/post/7#comments</comments>
		<pubDate>Sun, 18 Sep 2011 13:10:14 +0000</pubDate>
		<dc:creator>mykite</dc:creator>
				<category><![CDATA[产品设计]]></category>
		<category><![CDATA[B2C]]></category>
		<category><![CDATA[保健品]]></category>

		<guid isPermaLink="false">http://www.mykite.cn/?p=7</guid>
		<description><![CDATA[<p>以前写过一篇类似的文章，不过因为工作的原因相对写的比较简单，这次从产品的角度重新整理一下以往工作中的一些经验，算是对自己的一个阶段的总结。</p><p><strong>一、收集需求</strong></p><p>作为一个产品的发起人，你可能是公司的CEO，也可能是一名产品经理，甚至会是一个普通的创业者，不论你的职位是什么，想做好一个网站就必须对它的目标人群有充分的认识，清楚的明白我的主要消费人群需要什么？我能给他们提供什么？我的资源有哪些？有些时候，可能这个初期的想法只是在头脑里的一个概念，我们要把这个概念转化成实际的成果并且能够为企业带来实际的利益就必须开始我们的第一步“<strong>收集用户需求</strong>”。本文以一个垂直B2C的例子来讲解全文，假设我们现在要做 <span class='read-more'><a href='http://www.mykite.cn/post/7'>Continue Reading >></a></span></p><div class="clear-float"></div>
		]]></description>
			<content:encoded><![CDATA[<p>以前写过一篇类似的文章，不过因为工作的原因相对写的比较简单，这次从产品的角度重新整理一下以往工作中的一些经验，算是对自己的一个阶段的总结。</p>
<p><strong>一、收集需求</strong></p>
<p>作为一个产品的发起人，你可能是公司的CEO，也可能是一名产品经理，甚至会是一个普通的创业者，不论你的职位是什么，想做好一个网站就必须对它的目标人群有充分的认识，清楚的明白我的主要消费人群需要什么？我能给他们提供什么？我的资源有哪些？有些时候，可能这个初期的想法只是在头脑里的一个概念，我们要把这个概念转化成实际的成果并且能够为企业带来实际的利益就必须开始我们的第一步“<strong>收集用户需求</strong>”。本文以一个垂直B2C的例子来讲解全文，假设我们现在要做一个卖保健品的B2C网站，首先我们对市场的了解是一片空白，我们需要知道目前主流的保健品消费人群大致是一个什么样的人群结构？他们经常消费的保健品是哪几类？目标用户是否有网上购物的习惯？我们的竞争对手有哪些，他们的优势是什么？等等~收集需求的方式和方法有很多种，比如用户访谈，调查问卷，购买行业数据等，其事如果你不是一个完全创新的模式或则说你卖的东西市面上还找不到第二家，通常通过对我们竞争对手分析的同时就能够得到很多有用的数据，所以这里就省略N个字，不重点写了。</p>
<p><strong>二、分析需求</strong></p>
<p>采集到需求以后当然是要分析的，从中提炼出对自己有用的东西来。这里我将需求分析分为两类，一类是用户需求，一类为系统需求，用户需求是将前期收集到的商品所针对的目标人群以及网站的使用者他们想要什么，而系统需求则是网站需要给用户提供什么样的功能，让用户方便的在网站上实现购买过程。</p>
<p><strong>2.1）用户需求</strong></p>
<p><a href="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_01.jpg"><img class="alignnone size-full wp-image-8 aligncenter" title="baojianpin_01" src="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_01.jpg" alt="baojianpin_01" width="640" height="203" /></a></p>
<p style="text-align: center;"><strong>保健品使用人群定位</strong></p>
<p style="text-align: left;">        上图已经将我们的主流使用人群分为了四大类，青少年、都市白领、年轻女性和中老年人。保健品B2C与传统意义上的B2C在使用人群上有所差异，保健品的使用人群不等于最终的网站消费者，主要是因为人群中涵盖了青少年和中老年两大人群，而这两类人，通常是缺乏购买能力或则是对网上购物并不了解和接受的人。所以这里的人群定位并不代表网站的最终用户，所以我们还必须继续分析最终在网站上购买商品的人会是谁，他们的人群角色是什么？</p>
<p style="text-align: left;"><a href="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_02.jpg"><img class="size-full wp-image-9 aligncenter" title="baojianpin_02" src="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_02.jpg" alt="" width="471" height="421" /></a></p>
<p style="text-align: center;"><strong>网站购买者角色</strong></p>
<p style="text-align: left;">        明确了保健品的最终使用人群和网站的购买人群，我们就可以定制商城的商品类目了，也就是<strong>我们能提供什么</strong>？从前期的需求收集我们已经清楚的知道了目标消费人群主要的目的和需求，这个时候就要结合网站本身的资源来满足目标用户的需求，这里涉及到市场采购、渠道合作等多方面的因素，需根据企业自身状况决定。</p>
<p style="text-align: left;"><strong>2.2）系统需求</strong></p>
<p style="text-align: left;"><strong>        </strong>通过对用户需求的分析后可以让我们了解用户在购买商品的过程中需要哪些功能，什么样的功能和信息能够帮助用户更容易的挑选适合TA们的商品，从而使我们做出更适合目标用户的系统功能从而有效的让消费者通过我们网站买到TA想要的商品。在这里我们来做一次<strong>层次任务分析</strong>用来模拟用户的购物流程，梳理出用户在购买过程中的整个购物流程，设计出符合用户购买习惯的网页原型。</p>
<p style="text-align: left;"><a href="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_03.jpg"><img class="alignnone size-full wp-image-17" title="baojianpin_03" src="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_03.jpg" alt="" width="681" height="790" /></a></p>
<p style="text-align: left;">        从上图中我们已经知道了用户在购买保健品的过程中会产生哪些操作，通过任务的方式模拟用户操作再和用户实际操作的方式做对比，帮助我们设计出更加符合用户习惯的网页原型。</p>
<p style="text-align: left;">        在大致的分析完需求以后需要梳理一下网站的<strong>信息架构</strong>，也就是网站呈现在用户面前的信息。开始之前首先要清楚所销售商品的有哪些特殊的属性，用户在挑选的过程中哪些信息会给TA们带来帮助，哪些功能会让用户更快速的找到想要的商品，当用户不知道自己要买什么的时候，如何推荐给用户适合的商品。</p>
<p style="text-align: left;"><strong>商品属性</strong></p>
<p style="text-align: left;"><strong>按功能区分</strong></p>
<p style="text-align: left;">补气补血、美容养颜、增强免疫、调理肠胃、营养素、补钙、抗疲劳、增强记忆、改善睡眠、预防三高、心血管保健、丰胸减肥、调理亚健康、其它等等</p>
<p style="text-align: left;"><strong>按人群区分</strong></p>
<p style="text-align: left;">女性保健、男性保健、母婴保健、中老年保健</p>
<p style="text-align: left;"><strong>按营养成分区分</strong></p>
<p style="text-align: left;">液体钙、蜂胶、螺旋藻、卵磷脂、蛋白粉、维生素、氨基酸、羊胎素、胶原蛋白、钙铁锌硒、深海鱼油、左旋肉碱等</p>
<p style="text-align: left;"><strong>按品牌区分</strong></p>
<p style="text-align: left;">养生堂、营养屋、奈氏力斯、美国NGO、艾兰得、Elelen、汤臣倍健、康琪壹佰等</p>
<p style="text-align: left;">通过以上分析，我们大致清楚了一个保健品商城的信息架构，一个合适信息粒度“保健品”、类型众多的元数据以及一个估算内容重心的方法，现在可以开始构建一个内容清晰、主次分明、信息丰富的保健品商城来满足用户的需求了。</p>
<p style="text-align: center;"><a href="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_041.jpg"><img class="alignnone size-medium wp-image-21" title="baojianpin_04" src="http://www.mykite.cn/wp-content/uploads/2011/09/baojianpin_041-300x237.jpg" alt="" width="300" height="237" /></a></p>
<p style="text-align: center;"><strong>点击图片查看大图</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.mykite.cn/post/7/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

