<?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>DESICODEDESICODE - 分享设计&amp;代码 Design&amp;Code</title>
	<atom:link href="http://desicode.cn/feed/" rel="self" type="application/rss+xml" />
	<link>http://desicode.cn</link>
	<description>分享设计&#38;代码 Design&#38;Code</description>
	<lastBuildDate>Tue, 06 Dec 2011 17:47:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>微博运营：企业微博营销实战流程</title>
		<link>http://desicode.cn/share/2011/10/15/305/</link>
		<comments>http://desicode.cn/share/2011/10/15/305/#comments</comments>
		<pubDate>Sat, 15 Oct 2011 04:07:22 +0000</pubDate>
		<dc:creator>Wag Jie</dc:creator>
				<category><![CDATA[分享|Share]]></category>
		<category><![CDATA[微博营销]]></category>
		<category><![CDATA[微博装修]]></category>
		<category><![CDATA[电子商务]]></category>
		<category><![CDATA[营销策略]]></category>

		<guid isPermaLink="false">http://desicode.cn/?p=305</guid>
		<description><![CDATA[本文来自@晏涛三寿 现为知名电商企业网络策划及微博运营负责人。 引言 研究微博营销已达半年之久，在实战中不断的摸索总结，零零散散的也写了不少关于微博方面的文章，每次都在派代上首发，得到了派友们的支持或者拍砖， 最后被其他网站转载。之前都零零散散的，这一次花了点时间整理出了《企业微博运营实战流程》，希望将自己的一点经验与大家分享，没有华丽的语言，没有精美 的图片，没有深奥的理论，都是自己在操作过程中的一点心得体会。 上次写完《微博营销基本兵法》之后大家一直追问我具体该如何操作，我知道大家追问的不是兵法层面的策略问题，而是执行层面的细节问题，兵法无常态， 微博营销大家要首先把握的是策略与方向，其次才是执行细节，而且细节是具体问题具体分析，没有固定的模式与标准，我在《企业微博运营实战流程》中为了不禁 锢大家的思维，尽量站在策略层面去阐述，其间细节也仅供大家参考。好了，废话不多说，【三寿】已经做好接受拍砖准备。 微博营销它不是网络营销的终点，是社会化营销的开始，是口碑营销的升华。。。。。 《企业微博运营实战流程》共分为8部分，具体如下，在文章中偏理论部分将会被我一带而过，重点讲解2、3、4、5、6这几部分。 第一部分：认识微博营销 ●微博是自媒体●微博6大营销方式 ●微博营销策略●新浪微博用户分析 ●微博营销4重功能 第二部分：微博账号建立 ●账号的开通 ●微博装修 ●企业微博认证 第三部分：日常运营 ●内容建设 ●活动策划 ●客户管理 ●微博推广 ●商务合作 ●运营日志 第四部分：数据分析 ●日常报表 ●活动分析 ●粉丝分析 第五部分：团队建设 ●团队构架 ●成员考核 第六部分：微距阵建设 第七部分：微博学习案例 第八部分：微博营销未来 第一部分：认识微博营销 1.【微博6大营销方式】 微距阵 微整合 微直播 微公关 微应用 微商店 2.【微博营销策略】 3.【微博营销4大功能】 第二部分：微博账号建立 1.【账号的开通】 选择在哪一个门户网站开通微博，腾讯、新浪、网易、搜狐。截止2011年6月新浪微博用户突破2亿，腾讯达2.3亿，新浪用户群以职业白领偏多，腾讯用户群相对年轻化。企业微博首选新浪，其次是腾讯，以笔者经验来看新浪 微博更具营销价值。 2.【微博装修 】 ●微博昵称：简洁 易记 以公司名称、品牌为宜 [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p>本文来自<a title="晏涛三寿" href="http://weibo.com/yantao219">@晏涛三寿</a> 现为知名电商企业网络策划及微博运营负责人。</p></blockquote>
<h2>引言</h2>
<p>研究微博营销已达半年之久，在实战中不断的摸索总结，零零散散的也写了不少关于微博方面的文章，每次都在派代上首发，得到了派友们的支持或者拍砖， 最后被其他网站转载。之前都零零散散的，这一次花了点时间整理出了《企业微博运营实战流程》，希望将自己的一点经验与大家分享，没有华丽的语言，没有精美 的图片，没有深奥的理论，都是自己在操作过程中的一点心得体会。</p>
<p>上次写完《微博营销基本兵法》之后大家一直追问我具体该如何操作，我知道大家追问的不是兵法层面的策略问题，而是执行层面的细节问题，兵法无常态， 微博营销大家要首先把握的是策略与方向，其次才是执行细节，而且细节是具体问题具体分析，没有固定的模式与标准，我在《企业微博运营实战流程》中为了不禁 锢大家的思维，尽量站在策略层面去阐述，其间细节也仅供大家参考。好了，废话不多说，【三寿】已经做好接受拍砖准备。</p>
<p>微博营销它不是网络营销的终点，是社会化营销的开始，是口碑营销的升华。。。。。</p>
<p>《企业微博运营实战流程》共分为8部分，具体如下，在文章中偏理论部分将会被我一带而过，重点讲解2、3、4、5、6这几部分。<br />
<strong>第一部分：认识微博营销</strong><br />
●微博是自媒体●微博6大营销方式<br />
●微博营销策略●新浪微博用户分析 ●微博营销4重功能<br />
<strong>第二部分：微博账号建立</strong><br />
●账号的开通 ●微博装修 ●企业微博认证<br />
<strong>第三部分：日常运营</strong><br />
●内容建设 ●活动策划 ●客户管理 ●微博推广 ●商务合作 ●运营日志<br />
<strong>第四部分：数据分析</strong><br />
●日常报表 ●活动分析 ●粉丝分析<br />
<strong>第五部分：团队建设</strong><br />
●团队构架 ●成员考核<br />
<strong>第六部分：微距阵建设<br />
第七部分：微博学习案例<br />
第八部分：微博营销未来</strong></p>
<p><span id="more-305"></span></p>
<h2>第一部分：认识微博营销</h2>
<p><strong>1.【微博6大营销方式】</strong><br />
微距阵 微整合 微直播 微公关 微应用 微商店<br />
<strong>2.【微博营销策略】</strong></p>
<p><a href="http://desicode.cn/?attachment_id=45539" rel="attachment wp-att-45539"><img title="2011914215425_702341" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/6785_2011914215425_702341.jpg" alt="" width="558" height="433" /></a></p>
<pre>3.【微博营销4大功能】
<a href="http://desicode.cn/?attachment_id=45540" rel="attachment wp-att-45540"><img title="2011914215425_702341" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/78cc_2011914215425_7023411.jpg" alt="" width="558" height="433" /></a></pre>
<h2>第二部分：微博账号建立</h2>
<p><strong>1.【账号的开通】</strong><br />
选择在哪一个门户网站开通微博，腾讯、新浪、网易、搜狐。截止2011年6月新浪微博用户突破2亿，腾讯达2.3亿，新浪用户群以职业白领偏多，腾讯用户群相对年轻化。企业微博首选新浪，其次是腾讯，以笔者经验来看新浪 微博更具营销价值。<br />
<strong>2.【微博装修 】</strong><br />
●微博昵称：简洁 易记 以公司名称、品牌为宜<br />
●个性域名：以公司、品牌的中英文为宜，被抢注另当别论<br />
●头像：以产品或企业LOGO为宜<br />
●背景：简洁、清晰为主，根据微博尺寸合理设计，充分利用其广告价值<br />
●标签：根据公司、产品或人群定位设置关键词，便于潜在用户搜索<br />
<strong>3.【企业微博认证】</strong><br />
企业品牌微博最好进行认证，增加信赖感，也防止混淆，流程根据微博官方要求即可。</p>
<h2>第三部分：日常运营</h2>
<h3><strong>●内容建设</strong></h3>
<p><strong> </strong><br />
1.发布时间有规律，切忌混乱随意发布，建议每天早上9点和晚上23点问早安、晚安，其他以相同时间间隔来发布。具体的也可以根据企业用户的习惯来合理安排。</p>
<p><a href="http://desicode.cn/?attachment_id=45541" rel="attachment wp-att-45541"><img title="2011914215558_210507" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/ca6d_2011914215558_210507.jpg" alt="" width="438" height="203" /></a></p>
<p>上图是新浪微博统计的时间，结合实践的总结来看，用户比较集中的时间段一般有：<br />
上午9-10点:可能刚上班就会上微博<br />
下午4-5点：快下班了，手头上工作快做完了，时间比较充裕<br />
晚上8-23点：8点钟回家基本上吃饭完了，比较有空<br />
所以对于发布微博活动掌握好用户的时间有时候会起到事半功倍的效果。</p>
<p><strong>2.【信息的采集和制作】</strong><br />
根据内容规划中的话题制作内容和配图，每天第一和最后一条分别是#早安#和#晚安#语，这样给用户一个很有规律的很亲切的感觉，企业相关的信息要原创，其他话题内容可摘自微博或网络，但与公司人群相关度要高。</p>
<p><a href="http://desicode.cn/?attachment_id=45542" rel="attachment wp-att-45542"><img title="2011914215629_020570" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/00c5_2011914215629_020570.jpg" alt="" width="558" height="195" /></a></p>
<p><strong>3.【信息发布与维护 】</strong><br />
信息发布时间:周一至周五9:00-22:30，发布间隔为1小时，遇特殊情况可定时器发布。<br />
信息维护：删除言语恶劣的留言，并做好沟通，转发回复好的评论</p>
<h2>总结：</h2>
<p><a href="http://desicode.cn/?attachment_id=45543" rel="attachment wp-att-45543"><img title="2011914215655_481044" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/2db4_2011914215655_481044.jpg" alt="" width="558" height="255" /></a></p>
<h3>●活动策划</h3>
<p>微博活动一般分为新浪平台活动与企业独立活动<br />
新浪平台活动：基于新浪微博活动平台发起的活动，如大转盘/砸金蛋/有奖转发等，通过新浪抽奖系统抽奖。<br />
企业自建活动：是指企业在自己微博中发起的各种活动，如有奖转发、晒单有礼，盖楼，随手拍等各种形式话题的活动。可分为独立活动和联合活动，独立活动就是自己发起的，联合活动就是与其他异业微博开展的活动</p>
<p>新浪活动平台特点<br />
优点：活动形式多样化据分析更详尽 抽奖公正公平 人气旺盛<br />
缺点：时间有限制 遭遇专业抽奖控 竞争激烈 不容易被推荐<br />
<strong>三点技巧：</strong>1.是标题要给力 2.奖品给力，普遍适用 3.中奖率要给力<br />
自建活动特点<br />
优点：粘性强 互动性强 深化品牌传播 粉丝质量较高<br />
缺点：人气不旺盛（除非本身粉丝基数大） 玩法较单一 粉丝增量不大</p>
<p><a href="http://desicode.cn/?attachment_id=45544" rel="attachment wp-att-45544"><img title="201191422027_216782" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/ff3d_201191422027_216782.jpg" alt="" width="477" height="257" /></a></p>
<h3><strong>【活动开展步骤】</strong></h3>
<p><strong> </strong><br />
1、确定主题<br />
2、撰写活动方案，包括活动形式、奖品、时间、执行人、宣传文案（图）<br />
3、活动发布和维护，跟踪活动效果，互动维护<br />
4、公布活动结果，发奖等事宜<br />
5、活动分析，转发、评论、粉丝数、ROI等数据分析，并做好记录</p>
<p><strong>小技巧：</strong><br />
1）活动主题要鲜明 可与与节假日配合，活动有理<br />
2）活动规则简单明了，门槛放低<br />
3）活动发布时间选在早9-10点或晚上7点以后<br />
4）活动中注意维护和互动<br />
5）奖品尽量以实物为宜，尽量使用本企业产品或服务为奖品</p>
<h3>●客户管理</h3>
<p>微博让企业与用户直接对话，走进用户，聆听用户的声音，与用户互动。微博上客户管理工作主要包括投诉处理、粉丝互动、意见咨询、活动奖品发放通知等，具体如下图：<br />
□处理投诉：处理微博上用户的紧急投诉避免其四处发帖<br />
□粉丝互动：针对粉丝的评论作相应的回复或转发互动<br />
□咨询答疑：解决用户的各种疑问<br />
□发券、发奖品<br />
□意见收集调查</p>
<h3>●微博推广</h3>
<p>■ 微博也需要推广，它犹如企业官方网站一样，需要通过多种渠道来进行宣传推广，我们总结一样，将其归结为站内推广和外部推广，具体如下：<br />
<strong>■站内推广：</strong>基于微博平台上的推广方式，主要有<br />
1.活动推广，新浪平台和自建活动，吸引粉丝参与，增加搜索结果数。<br />
2.草根账号推送，花钱请大号转发。<br />
3.异业合作，通过赞助奖品等形式与其他微博开展联合活动。<br />
4.微应用，开发微博App应用，吸引人参与，同时可以推广企业微博。<br />
5.主动关注，通过搜索相关关键词，找到潜在用户，主动求关注。<br />
<strong>■站外推广：</strong><br />
1.博客，论坛、贴吧、企业官网上发布企业微博信息<br />
2.微博组件推广，如在官网上添加一键关注、关注、分享等微博按钮<br />
3. 有条件的企业可以在EDM、DM宣传册、名片等添加微博信息<br />
说明：一般情况下企业需要结合自身优势来增加微博的有效粉丝，而不是通过买粉、送Iphone这样的活动吸引粉丝，可以通过官网、会员营销等方式来增加有效粉丝，数量永远没有质量重要。</p>
<h3>●商务合作</h3>
<p>企业微博营销过程中不可避免的会与合作伙伴，第三方服务公司等展开些商务合作，以利于微博营销工作的开展，主要有以下几方面：<br />
1.与微博平台服务商合作，如新浪、腾讯开展微博组件合作，APP应用合作，活动参与等商务往来。<br />
2.与其它企业微博合作，之前提及的异业合作就是如此，去其它企业微博开展活动，友情链接等合作。<br />
3.与第三方服务公司合作，如微博代运营公司，微博营销分析工具供应商等。<br />
4.参与业内各种会议活动，企业微博营销中可能会参与一些业内的会议、沙龙活动等商务场合，建立广泛联系。<br />
小提示：商务合作的形式根据企业的情况有各自不同</p>
<h3>●运营日志</h3>
<p>微博营销是一个实时的动态营销方式，它本身包含很多数据指标，如粉丝数、微博数、评论转发数、订单销售、流量等。包括分析行业其他微博的运营情况， 也需要跟踪观察，做好一些记录。根据笔者运营的经验来看，一般包括微博日志、活动报表，微博日志是最重要的，应该保持每天更新记录，活动报表可以周为单位 做汇报。<br />
1.微博日志，包括粉丝增量（增长率）、每日发微博数、转发评论数、搜索结果数（增长率）、订单数、IP（PV）、活动数量等，具体可根据公司情况而定。<br />
【此处略图】<br />
2.活动报表，可以每周为单位进行分析，报表中一般包括活动类型、时间、参与人数、转发评论数、粉丝增长数、奖品价值、roi等必要条件。</p>
<p>注意：数据统计是为了分析指导工作，数据本身不会说话，所以需要根据数据发现问题，总结规律，及时的调整微博运营的策略。例如，某类信息比较受粉丝喜欢，转发评论很高，什么样的文案更容易引来订单；活动什么时间发布是高峰期，什么时间是低谷等等。</p>
<h2>第四部分：数据分析</h2>
<p>微博自身涉及的数据大致有微博信息数、粉丝数、关注数、转发数、回复数、平均转发数、平均评论数、二级粉丝数、性别比例、粉丝分布数，微博营销运营 指标有粉丝活跃度、粉丝质量、微博活跃度，企业考核KPI指标有粉丝增长数、搜索结果数、销售/订单、PV/IP、转发数、评论数。对部分指标做简单阐 述：<br />
<strong>粉丝数：</strong>关注微博的人数，可以直接反映微博的人气（不造假）<br />
<strong>关注数：</strong>你主动关注的微博数量，最高上限2000人，日关注500人<br />
<strong>评论数：</strong>用户对微博内容的回复，可以反映微博内容的受欢迎程度和微博用户的活跃度。<br />
<strong>转发数：</strong>用户对微博内容进行的二次传播行为，同样反映微博内容的受欢迎程度和微博用户的活跃度！<br />
<strong>平均转发数：</strong>每条信息的转发数之和/信息总数量，一般计算日平均转发数或月平均转发数，次/条 ，平均回复数原理类似。平均转发数（评论数）与粉丝总数和微博内容质量相关，粉丝总数越高，微博内容越符合用户需求，转发数和评论数就会越高。所以这个数 据可以反应粉丝总数、内容和粉丝质量的好坏。粉丝基数越大，理论上转发会提高，内容越契合用户，或者粉丝中你的目标人群越多，这个数据都会上升。<br />
<strong>粉丝活跃度：</strong>这是一个综合数据，一般可以通过平均转发数或回复数来衡量。<br />
<strong>微博的活跃度：</strong>一般是用做竞品微博或其他微博之间的比较。对于企业理性的看待微博营销的效果有指导意义。<br />
<strong>搜索结果数：</strong>指在微博搜索框中输入指定关键词得到的结果数，可以反映企业品牌或产品名称被提及的总数。<br />
<strong>●日常报表</strong><br />
一般包括粉丝增量（增长率）、每日发微博数、转发评论数、搜索结果数（增长率）、订单数、IP（PV）、活动数量等，具体可根据公司情况而定。<br />
<strong>●活动分析<br />
</strong>以每周为单位进行分析，报表中一般包括活动类型、时间、参与人数、转发评论数、粉丝增长数、奖品价值、roi等必要条件。<br />
如何分析自己微博与他人的微博，以具体的实例来分析吧。</p>
<h3>1、分析自身微博</h3>
<p>如何考量微博营销的成绩呢？以上2个报表中的数据可以及时的反应微博的运营状态，通过之前提及的相关指标，对应来分析微博的成绩，具体的以案例来分析吧。以A公司微博为例，连续4、5月份的数据统计如下：</p>
<p><a href="http://desicode.cn/?attachment_id=45553" rel="attachment wp-att-45553"><img title="1" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/7a03_1.jpg" alt="" width="558" height="62" /></a></p>
<p>从这个表中可以看到4、5月的粉丝增量差不多，5月微博信息数量增加36%，转发总数也增长近100%倍，评论增长了64%，搜索结果数也是增加了。这些数据均直接说明了微博营销效果。<br />
再针对具体指标来深一步分析：<br />
<strong>粉丝数量：</strong>4、5月活动数量相当，每日自然增长粉丝也差不多，所以总体增量基本持平。<br />
平均转发/评论：5月份微博数量增加了36%，而转发总数和评论总数均增加了近1倍，平均转发评论有直接提高，说明内容受粉丝的欢迎，粉丝活跃度有所提 高，这是为什么？因为4月份调查用户属性之后，5月份的内容策划更加贴近粉丝需求，即此前提到的对胃口、有营养所以粉丝会更喜欢。<br />
<strong>搜索结果数：</strong>这个指标有很重要的意义，直接反应了企业在微博上被提及和讨论的程度，如果粉丝数量与搜索结果数差距太大，说明2点：僵尸粉较多，或有效粉丝太少；粉丝活跃度很低，他们不自主讨论企业，需要企业做合理的引导激发。</p>
<p><strong>结论：</strong>1.平均转发/评论可以指导反映微博内容策略及粉丝活跃度；2.搜索结果数可以反映企业在微博上被曝光提及的程度，微博就是要激发引导用户口碑传播；3.微博营销的考核不能仅仅以粉丝增量或转发数来评判，必须整体综合各项数据来考量。</p>
<h3>2、与其他微博分析比较</h3>
<p>我们都会与其他同类微博进行比较，可是究竟如何来比较呢？直接以粉丝数来衡量还是转发数、销量订单？之前我提过，我们不应盲目追求高数量，而应该注 重高质量。相互比较之前一定要清楚彼此的目标群体规模，知名度影响，甚至行业局限性，所以不可盲目比较。我们仍然以笔者熟知的ABC三个企业来分析。看看 三者的基本数据。</p>
<p><a href="http://desicode.cn/?attachment_id=45554" rel="attachment wp-att-45554"><img title="2" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/049f_2.jpg" alt="" width="496" height="88" /></a></p>
<p><strong>数据解读：</strong>粉丝量上，B是A的10倍，C是A的4倍；平均转发数和回复数理论上，应该B是A的10倍，C是A的 4倍，可情况并不如此，B只有A的3倍，C与A基本一样，为什么会这样。我们能不能就此认为A的运营就比B和C要好呢？我们再看看三者粉丝的粉丝比例，一 般粉丝的粉丝低于10被视为僵尸粉和无效粉。</p>
<p><a href="http://desicode.cn/?attachment_id=45555" rel="attachment wp-att-45555"><img title="3" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/916a_31.png" alt="" width="617" height="404" /></a></p>
<p>在此我们选择粉丝的粉丝数量在10-500之间的比例，通过我们的研究总结，对于一个企业微博真正有价值的不是那些粉丝数很少或粉丝成千万的红人， 而是普通网友。根据调查，普通人在微博上正常社交范围内，粉丝数应该在50-500之间，而且这些用户才是大部分企业的中坚力量。这就是我们习惯称为的有 效群体，这就是“中间多两头少”的粉丝分布原理。</p>
<p>由此来看，A的质量似乎最高。而企业的有效活跃粉丝基本上集中在这个比例内。</p>
<h3>结论：</h3>
<p>1.比较微博之间运营成功与否的标准是多维度的，粉丝数、粉丝活跃度、粉丝构成比例、平均转发等都应该考虑进去；</p>
<p>2.高质量的粉丝不是那些明星、红人或带V的粉丝，而是你们目标用户中的活跃用户。</p>
<p><strong>●粉丝分析</strong><br />
粉丝的分析包括性别、地区、粉丝的粉丝占比、活粉率、二级粉丝等数据。目前有企业提供微博分析工具，会有影响力、曝光率、眼球数等指标，实际上也是围绕之前的系列数据展开的模型计算出来的，仅供参考。<br />
——————————————————————————————————————————————</p>
<h2>第五部分：团队建设</h2>
<p><strong>●团队构架</strong><br />
根据微博运营的流程工作来看主要包括运营负责人（CWO）、BD专员、文案写手、客服人员、活动策划、美工编辑这几类，具体根据公司的情况来合理配置。一般企业构架如图</p>
<p><a href="http://desicode.cn/?attachment_id=45556" rel="attachment wp-att-45556"><img title="4" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/04ff_41.png" alt="" width="611" height="328" /></a></p>
<p><strong>●成员考核</strong><br />
团队成员根据各自的工作建立日常的报表，对每日工作进行分析。一般来说微博运营团队的工作是密切相关的，在考核方面不应孤立来看每个人的KPI，可以对整 个团队的制定中的指标，如粉丝数、搜索结果数、订单或销量、活动数量等，但是每个人对应的具体指标的侧重点不同，具体的结合公司的实际情况来定。【统计样 表如下，参考】</p>
<p><a href="http://desicode.cn/?attachment_id=45557" rel="attachment wp-att-45557"><img title="5" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/b836_5.jpg" alt="" width="558" height="163" /></a></p>
<h2>第六部分：微距阵建设</h2>
<p>微距阵是一个必然之路，不同微博的工作侧重点应该有所不同。一般根据微博的定位和功能分类，如是产生销售、品牌传播还是客户管理，还是公共关系，没 有明确的功能定位，不仅无法形成有力的微距阵，连主微博的运营都会成问题，因为微博的内容更新，活动策划、粉丝互动都要根据微博本身定位来运作。</p>
<p>例如凡客建立了以@vancl粉丝团为主要阵地的微距阵，如下图。vancl粉丝团是专注于粉丝互动的交流平台，发布促销，互动活动，所以从它的页 面装修，内容建设，活动策划是可遇年轻、时尚、流行话题相关，竭力诠释凡客快时尚的互联网品牌内涵。@凡客诚品用于发布凡客内部新闻重大事件等信息。其他 子微博也明确定位，各司其职。</p>
<p><a href="http://desicode.cn/?attachment_id=45558" rel="attachment wp-att-45558"><img title="6" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/9670_6.jpg" alt="" width="334" height="197" /></a></p>
<p>常见的三种微距阵模式：</p>
<p>一、阿迪达斯的<strong>蒲公英式</strong>，适合于拥有多个子品牌的集团；</p>
<p><a href="http://desicode.cn/?attachment_id=45559" rel="attachment wp-att-45559"><img title="7" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/1299_7.png" alt="" width="616" height="420" /></a></p>
<p>二、<strong>放射式模式</strong>，<br />
由一个核心账号统领各分属账号，分属账号之间是平等的关系，信息由核心账号放射向分属账号，分属账号之间信息并不进行交互，这种适合地方分公司比较多并且为当地服务的业务模式。</p>
<p><a href="http://desicode.cn/?attachment_id=45560" rel="attachment wp-att-45560"><img title="8" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/7e52_8.jpg" alt="" width="558" height="315" /></a></p>
<p>三、<strong>双子星模式</strong><br />
老板一个账号很有影响力，公司官方一个账号也有影响力，形成互动。这些都是比较初级的模式，企业真正要建立的体系，除了官方账号，子账号，还需要一个小 号，所谓的小号，就是建一个跟自己企业相关的匿名 账号，比如调味品企业可以建立一个账号：@巧媳妇，或者厨房达人，或者私房菜等等，跟粉丝分享做饭美味的方法，总之，小号就是脱离于企业的产品，但是又是 自己企业的理念升华，你要上升到一个高度才能让消费者举得你很中立，从而润物无声的影响消费者。</p>
<p><a href="http://desicode.cn/?attachment_id=45561" rel="attachment wp-att-45561"><img title="9" src="http://alibuybuy-img11.stor.sinaapp.com/2011/10/6d6d_9.jpg" alt="" width="558" height="364" /></a></p>
<h2>第七部分：微博学习案例</h2>
<p>之前新浪微博做了一期大家谈微博运营的活动，里面有些不错的案例可以借鉴学习，在此我简单的从策略方向上给出几个大家可以学习的例子。</p>
<p><strong>@vancl粉丝团 学品牌塑造和话题营销</strong><br />
从logo到企业介绍都简洁明了，微博内容与企业相关度达80%以上，时时刻刻与凡客产品、用户、代言人相关，在话题标签设置上也凸显品牌，如#凡客衣橱#、#随手拍凡客#、#就爱帆布鞋#等等，品牌微博就应该时时不离品牌。</p>
<p><strong>@杜蕾斯官方微博 学内容营销</strong><br />
微博营销“内容为王”，杜蕾斯依靠极具创意的微博内容不仅吸引了粉丝眼球，更加深化了杜蕾斯的品牌传播。也许有人说杜蕾斯的特殊性所以才造就了它内容的有 趣，但是我们不得不承认它的很多内容确实很具创意，这一点是其他微博需要学习的。内容要求有特色，要有营养，有创意更容易传播。</p>
<p><strong>@海底捞 学病毒式营销/公关</strong><br />
虽然海底捞勾兑门事件影响了海底捞的形象，但是“人类无法阻止海底捞”这一事件营销依然是成功的，它让海底捞的知名度得到了极大的提升，这样的效果是传统媒体无法企及的。</p>
<p><strong>@快书包 学微博客户服务</strong><br />
据传微博给快书包带来了近1/3的流量；新浪微博订单占据书店总订单的40%；不管这些数据是否精准，但至少说明他们很重视这块一块，微博也确实给他们带来了效益。交朋友-做生意，这也是社会化营销的核心。<br />
——————————————————————————————————————————————</p>
<h2>第八部分：微博营销未来</h2>
<p>常常有人会问，微博营销还会火多久，我相信微博总会被新的互联网产品替代，那个时候网民不在聚集在微博上了，但是未来的那个产品一定会有“微博的基 因”，社会化媒体更多的满足了人社交的需求，那么社会化营销也将更加深入，我还是哪句话，消费者在哪里，营销的主战场就在哪里。</p>
<p>最近新浪微博有2个比较大的变化，开通新浪微博违规处罚平台，加强监管草根账号发布广告、虚假信息等力度；企业版微博开通微橱窗入口。靠草根账号转 发来增加粉丝和推广活动的时代即将终结，微博营销不再仅仅是草根转发，大号推送，它将更注重微博团队日常运营的能力，能力大于技巧。企业微博将正式进入微 电商时代，如何作为微博营销更值得摸索。</p>
<p>未来微博营销的几个方向，微公关、微橱窗、微直播、微距阵、微客服、微应用、LBS、Xweibo。【欢迎补充】<br />
<strong>微公关：</strong>微博的媒体属性已经显示出它巨大的公关作用了，如霸王致癌、会理县事件、动车事件、海底捞事件。<br />
<strong>微橱窗：</strong>微橱窗被认为是新浪微博电商化重要的一步举措，即在企业微博上增加展示企业商品的版面，同时可在用户右侧栏增加一些硬广展示位，具体效果还有期待。<br />
<strong>微直播：</strong>微直播和访谈对于企业或政府重大事情有很好的及时互动作用，能够与千万网友互动，扩大影响力。<br />
<strong>微距阵：</strong>微博上的人都是以兴趣、爱好、关系组成的小圈子，企业根据自身服务的不同可以开通不同功能的微博对他们进行精准营销。<br />
<strong>微客服：</strong>这也是目前各大企业用的比较多而成熟的模式，利用微博开展客户关系管理，对于聆听用户声音，增加客户互动，增强用户品牌认知度和忠诚度有很好的作用。<br />
<strong>微应用：</strong>这一块很多企业不太重视，其实中用很大，丫丫网的3款应用有超过300万用户使用，这个营销的价值有多大，可以自己想想。针对你的目标用户开发出有特色的微应用绝对值得。<br />
<strong>LBS：</strong>基于地理位置的服务会随着移动互联网用户的增长，最终会与微博有一个很好的整合，但是具体的合作模式仍在探索之中。<br />
<strong>Xweibo：</strong>新浪的这款产品已经为很多网站应用了，它打通了微博与企业网站的通道，让用户可以随意的在微博和网站间切换，可以方便用户将好的内容进行分享传播，共享资源。</p>
<p>—————————————————————————————————————————————————————————</p>
<p>《企业微博运营实战流程pdf版》将在10.22后分享资料，请通过新浪微博联系作者 <a title="晏涛三寿" href="http://weibo.com/yantao219">@晏涛三寿</a>，在评论或私信中留下你的邮箱。<br />
本文链接：<a href="http://www.socialbeta.cn/articlesweibo-marketing-for-bussiness-solution-part1.html">http://www.socialbeta.cn/articlesweibo-marketing-for-bussiness-solution-part1.html</a><br />
作者：<a title="晏涛三寿" href="http://weibo.com/yantao219">@晏涛三寿</a><br />
三寿博客：<a href="http://blog.sina.com.cn/sanshou219">http://blog.sina.com.cn/sanshou219</a></p>
]]></content:encoded>
			<wfw:commentRss>http://desicode.cn/share/2011/10/15/305/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>网站上线之前需要检查的13个问题</title>
		<link>http://desicode.cn/share/2011/08/31/301/</link>
		<comments>http://desicode.cn/share/2011/08/31/301/#comments</comments>
		<pubDate>Wed, 31 Aug 2011 03:44:20 +0000</pubDate>
		<dc:creator>Wag Jie</dc:creator>
				<category><![CDATA[分享|Share]]></category>
		<category><![CDATA[准备工作]]></category>
		<category><![CDATA[网站上线]]></category>
		<category><![CDATA[网站前期]]></category>

		<guid isPermaLink="false">http://desicode.cn/?p=301</guid>
		<description><![CDATA[废话少说： 1、用了Google分析等统计工具了吗？ 你应该跟踪每个页面的访问情况，哪些受欢迎，哪些挣得钱多。 2、用了Pagespeed和Yslow了吗？ 70%用户看得到的速度提升都是通过客户端优化完成的。这两个工具可以帮你了解你的网站是否符合最佳惯例，并提供改进建议。 3、通过feedbackarmy.com和usertesting.com进行可用性测试了吗？ 哪怕只有5个用户参与测试，你也能发现85%的问题。 4、当网站出现错误时管理员能收到错误通知邮件。 天有不测风云，不管你准备得多么充分，网站都可能出现意外错误，如果你能立马发现错误，就可以尽快修复。 5、使用了Siteuptime.com/Pingdom.com等网站监测服务和吗？{国内用户可用监控宝} 网站总会宕机，网站监测服务会告诉你网站出现的问题，省的让你的顾客告诉你。 6、媒体和数据库备份了吗？ 服务器会宕机，人会犯错。有备无患。你的主机一般会提供备份选项，此外你还应该有一个额外备份。 7、对备份进行过测试了吗？ 如果你从没对备份进行过测试，那么他们就没有用，很多人在做备份时忽视了这一步。 8、有网站地图（sitemap.xml）文件吗？ 搜索引擎可以发现网站所有页面，但网站地图可以给搜索引擎指路，并告诉它们页面的权重。 9、有robots.txt文件吗？ 有些东西你可能不想让外人知道，robots.txt可以将其隐藏，不被搜索引擎发现。 10、在多个浏览器下测试过吗？ 你可以通过browsershots.org检查你的网站是否在所有浏览器下都顺眼。 11、用户可以联系到网站管理员吗？ 应该有个联系人页面，让人可以很方便地联系到你，给你发email。 12、管理员可以获得无效链接通知邮件吗？ 当页面被移动、链接被修改时，确保你可以应对404错误。 13、有一个最新内容板块或一个RSS feed吗？ 你的用户希望了解你。这些信息不应该让他们去找，如果你有一个博客或者RSS feed，就可以自动完成内容推送。 来源：Agiliq   &#124;  源地址：http://www.36kr.com/p/40176.html]]></description>
			<content:encoded><![CDATA[<div id="pageContent">
<div id="pageContentWrap">
<p>废话少说：</p>
<p><strong>1、用了Google分析等统计工具了吗？</strong></p>
<p>你应该跟踪每个页面的访问情况，哪些受欢迎，哪些挣得钱多。</p>
<p><strong>2、用了<a href="http://code.google.com/speed/page-speed/" target="_blank">Pagespeed</a>和<a href="http://developer.yahoo.com/yslow/" target="_blank">Yslow</a>了吗？</strong></p>
<p>70%用户看得到的速度提升都是通过客户端优化完成的。这两个工具可以帮你了解你的网站是否符合最佳惯例，并提供改进建议。</p>
<p><strong>3、通过<a href="http://feedbackarmy.com/" target="_blank">feedbackarmy.com</a>和<a href="http://usertesting.com/" target="_blank">usertesting.com</a>进行可用性测试了吗？</strong></p>
<p>哪怕只有5个用户参与测试，你也能发现85%的问题。</p>
<p><strong>4、当网站出现错误时管理员能收到错误通知邮件。</strong></p>
<p>天有不测风云，不管你准备得多么充分，网站都可能出现意外错误，如果你能立马发现错误，就可以尽快修复。</p>
<p><strong>5、使用了Siteuptime.com/Pingdom.com等网站监测服务和吗？{国内用户可用监控宝}</strong></p>
<p>网站总会宕机，网站监测服务会告诉你网站出现的问题，省的让你的顾客告诉你。</p>
<p><strong>6、媒体和数据库备份了吗？</strong></p>
<p>服务器会宕机，人会犯错。有备无患。你的主机一般会提供备份选项，此外你还应该有一个额外备份。</p>
<p><strong>7、对备份进行过测试了吗？</strong></p>
<p>如果你从没对备份进行过测试，那么他们就没有用，很多人在做备份时忽视了这一步。</p>
<p><strong>8、有网站地图（sitemap.xml）文件吗？</strong></p>
<p>搜索引擎可以发现网站所有页面，但网站地图可以给搜索引擎指路，并告诉它们页面的权重。</p>
<p><strong>9、有robots.txt文件吗？</strong></p>
<p>有些东西你可能不想让外人知道，robots.txt可以将其隐藏，不被搜索引擎发现。</p>
<p><strong>10、在多个浏览器下测试过吗？</strong></p>
<p>你可以通过<a href="http://browsershots.org/" target="_blank">browsershots.org</a>检查你的网站是否在所有浏览器下都顺眼。</p>
<p><strong>11、用户可以联系到网站管理员吗？</strong></p>
<p>应该有个联系人页面，让人可以很方便地联系到你，给你发email。</p>
<p><strong>12、管理员可以获得无效链接通知邮件吗？</strong></p>
<p>当页面被移动、链接被修改时，确保你可以应对404错误。</p>
<p><strong>13、有一个最新内容板块或一个RSS feed吗？</strong></p>
<p>你的用户希望了解你。这些信息不应该让他们去找，如果你有一个博客或者RSS feed，就可以自动完成内容推送。</p>
<p>来源：<a href="http://newsletter.agiliq.com/the-quick-website-launch-checklist" target="_blank">Agiliq</a>   |  源地址：<a href="http://www.36kr.com/p/40176.html">http://www.36kr.com/p/40176.html</a></p>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://desicode.cn/share/2011/08/31/301/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML5 vs Mobile App 谁将是主流</title>
		<link>http://desicode.cn/share/2011/08/26/297/</link>
		<comments>http://desicode.cn/share/2011/08/26/297/#comments</comments>
		<pubDate>Fri, 26 Aug 2011 03:17:35 +0000</pubDate>
		<dc:creator>Wag Jie</dc:creator>
				<category><![CDATA[分享|Share]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[MOBILE APP]]></category>
		<category><![CDATA[未来应用]]></category>

		<guid isPermaLink="false">http://desicode.cn/?p=297</guid>
		<description><![CDATA[前言 HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间：移动端的IE、Chrome、FireFox、Safari，亦或是新出现的浏览器，谁能达到在移动端对HTML5更好的支持，谁就能在以后的移动应用领域占据更多的市场。 现在我们怎么装APP 有了HTML5以后怎么装APP 更灵活、更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一。 下面列举HTML5适合移动应用开发的几大特性： 1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。 同时，这个功能算得上是另一个方向的后台“操作记录”，而不占用任何后台资源，减轻设备硬件压力，增加运行流畅性。 在线app支持边使用边下载离线缓存，或者不下载离线缓存；而离线app必须是下载完离线缓存才能使用。 形象点说，cookie就是存了电话和菜单，想吃什么要叫外卖，等多长时间才能吃到就得看交通情况了；离线缓存就是直接在冰箱里存了食物，想吃就能马上吃到（当然，想吃最新的食物同样可以打电话预定）。 设计师要知道，什么时候让用户下载离线缓存（注意在线和离线app的区别）。 2.音频视频自由嵌入，多媒体形式更为灵活 原生开发方式对于文字和音视频混排的多媒体内容处理相对麻烦，需要拆分开文字、图片、音频、视频，解析对应的URL并分别用不同的方式处理。 HTML5在这个方面完全不受限制，可以完全放在一起进行处理。 设计师要知道，如果新闻类、微博类、社交类应用的信息呈现中实现文字与多媒体混排，而不用专门嵌入webview，将是一件多美好的事情，至少现在原生方式实现起来还有困难。 3.地理定位，随时随地分享位置 充分发挥移动设备对定位上的优势，推动LBS应用发展。 可以综合使用GPS、wifi、手机等方式让定位更为精准、灵活。 地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，可以通过缓存来解决，到哪儿下哪儿，更灵活。 设计师要知道，现在嵌入LBS功能的应用越来越多，这也是移动设备与台式PC相比最大的优势之一，HTML5能把这个优势再度扩大化，好好想想怎么在你设计的应用里用上吧！ 4.Canvas绘图，提升移动平台的绘图能力 使用Canvas API可以简单绘制热点图收集用户体验资料 支持图片的移动、旋转、缩放等常规编辑 Canvas – 2D的绘图功能支持 Canvas 3D – 3D的绘图功能支持 SVG – 向量图支援 设计师要知道，图片的移动、旋转、缩放？那都太基础了，自己画都是小case，至于怎么用，好好想想吧！ 5.专为移动平台定制的表单元素 浏览器中出现的html5表单元素与对应的键盘： 类型 用途 键盘 Text 正常输入内容 标准键盘 Tel 电话号码 数字键盘 Email 电子邮件地址文本框 带有@和.的键盘 url 网页的URL [...]]]></description>
			<content:encoded><![CDATA[<h2>前言</h2>
<p>HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间：移动端的IE、Chrome、FireFox、Safari，亦或是新出现的浏览器，谁能达到在移动端对HTML5更好的支持，谁就能在以后的移动应用领域占据更多的市场。</p>
<p><a href="http://desicode.cn/?attachment_id=7142" rel="attachment wp-att-7142" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/0dee_image002.jpg" alt="" width="400" height="382" /></a></p>
<p>现在我们怎么装APP</p>
<p><a href="http://desicode.cn/?attachment_id=7143" rel="attachment wp-att-7143" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/8148_image003-300x111.png" alt="" width="300" height="111" /></a></p>
<p>有了HTML5以后怎么装APP</p>
<p><a href="http://desicode.cn/?attachment_id=7144" rel="attachment wp-att-7144" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/c3ff_image004-300x71.png" alt="" width="300" height="71" /></a></p>
<p>更灵活、更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一。<span id="more-297"></span></p>
<h2>下面列举HTML5适合移动应用开发的几大特性：</h2>
<p><strong>1.</strong><strong>离线缓存</strong>为HTML5开发移动应用提供了基础</p>
<p>HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以<strong>减少网络流量</strong>。</p>
<p>同时，这个功能算得上是另一个方向的后台“操作记录”，而<strong>不占用任何后台资源</strong>，减轻设备硬件压力，增加运行流畅性。</p>
<p>在线app支持边使用边下载离线缓存，或者不下载离线缓存；而离线app必须是下载完离线缓存才能使用。</p>
<p>形象点说，cookie就是存了电话和菜单，想吃什么要叫外卖，等多长时间才能吃到就得看交通情况了；离线缓存就是直接在冰箱里存了食物，想吃就能马上吃到（当然，想吃最新的食物同样可以打电话预定）。</p>
<p><strong>设计师要知道</strong>，什么时候让用户下载离线缓存（注意在线和离线app的区别）。</p>
<p><strong>2.</strong><strong>音频视频</strong>自由嵌入，多媒体形式更为灵活</p>
<p>原生开发方式对于文字和音视频混排的多媒体内容处理相对麻烦，需要拆分开文字、图片、音频、视频，解析对应的URL并分别用不同的方式处理。</p>
<p>HTML5在这个方面完全不受限制，可以完全放在一起进行处理。</p>
<p><strong>设计师要知道</strong>，如果<strong>新闻类</strong>、<strong>微博类</strong>、<strong>社交类</strong>应用的信息呈现中实现文字与多媒体混排，而不用专门嵌入webview，将是一件多美好的事情，至少现在原生方式实现起来还有困难。</p>
<p><strong>3.</strong><strong>地理定位</strong>，随时随地分享位置</p>
<p>充分发挥移动设备对定位上的优势，推动LBS应用发展。</p>
<p>可以综合使用GPS、wifi、手机等方式让定位更为精准、灵活。</p>
<p>地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，可以通过缓存来解决，到哪儿下哪儿，更灵活。</p>
<p><strong>设计师要知道</strong>，现在嵌入<strong>LBS</strong>功能的应用越来越多，这也是移动设备与台式PC相比最大的优势之一，HTML5能把这个优势再度扩大化，好好想想怎么在你设计的应用里用上吧！</p>
<p><strong>4.Canvas</strong><strong>绘图</strong>，提升移动平台的绘图能力</p>
<p>使用Canvas API可以简单绘制热点图收集用户体验资料</p>
<p>支持图片的移动、旋转、缩放等常规编辑</p>
<p>Canvas – 2D的绘图功能支持</p>
<p>Canvas 3D – 3D的绘图功能支持</p>
<p>SVG – 向量图支援</p>
<p><strong>设计师要知道</strong>，图片的移动、旋转、缩放？那都太基础了，自己画都是小case，至于怎么用，好好想想吧！</p>
<p><strong>5.</strong>专为移动平台定制的<strong>表单元素</strong></p>
<p>浏览器中出现的html5表单元素与对应的键盘：</p>
<table width="551" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="66">类型</td>
<td valign="top" width="350">用途</td>
<td valign="top" width="136">键盘</td>
</tr>
<tr>
<td valign="top" width="66">Text</td>
<td valign="top" width="350">正常输入内容</td>
<td valign="top" width="136">标准键盘</td>
</tr>
<tr>
<td valign="top" width="66">Tel</td>
<td valign="top" width="350">电话号码</td>
<td valign="top" width="136">数字键盘</td>
</tr>
<tr>
<td valign="top" width="66">Email</td>
<td valign="top" width="350">电子邮件地址文本框</td>
<td valign="top" width="136">带有@和.的键盘</td>
</tr>
<tr>
<td valign="top" width="66">url</td>
<td valign="top" width="350">网页的URL</td>
<td valign="top" width="136">带有.com和.的键盘</td>
</tr>
<tr>
<td valign="top" width="66">Search</td>
<td valign="top" width="350">用于搜索引擎，比如在站点顶部显示的搜索框</td>
<td valign="top" width="136">标准键盘</td>
</tr>
<tr>
<td valign="top" width="66">range</td>
<td valign="top" width="350">特定值范围内的数值选择器，典型的显示方式是滑动条</td>
<td valign="top" width="136">滑动条或转盘</td>
</tr>
</tbody>
</table>
<p>只需要简单的声明 &lt;input type=”email”&gt; 即可完成对不同样式键盘的调用，简捷方便。</p>
<p><strong>设计师要知道</strong>，用的时候记得告诉研发同事一声！</p>
<p><a href="http://desicode.cn/?attachment_id=7149" rel="attachment wp-att-7149" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/260a_image005-300x144.png" alt="" width="300" height="144" /></a></p>
<p><strong>6.</strong>丰富的<strong>交互方式</strong>支持</p>
<p>提升互动能力：<strong>拖拽</strong>、<strong>撤销</strong>历史操作、<strong>文本选择</strong>等</p>
<p>Transition – 组件的<strong>移动</strong>效果</p>
<p>Transform – 组件的<strong>变形</strong>效果</p>
<p>Animation – 将移动和变形加入<strong>动画</strong>支持</p>
<p><strong>设计师要知道</strong>，HTML5提供的交互方式是非常丰富的，至于用不用得上，那是你自己的事儿喽！</p>
<p><strong>7.HTML5</strong><strong>使用上的优势</strong></p>
<p>更低的开发及维护成本；</p>
<p>使页面变得更小，减少了用户不必要的支出；而且，性能更好使耗电量更低；</p>
<p>方便升级，打开即可使用最新版本，免去重新下载升级包的麻烦，使用过程中就直接更新了离线缓存。</p>
<p><strong>设计师要知道</strong>，用户想要什么，HTML5能提供给用户什么。</p>
<p><strong>8.CSS3 </strong>视觉设计师的辅助利器</p>
<p>CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。</p>
<p>Selector – 更有弹性的选择器</p>
<p>Webfonts – 嵌入式字体</p>
<p>Layout – 多样化的排版选择</p>
<p>Stlying radius gradient shadow – 圆角、渐变、阴影</p>
<p>Border background – 边框的背景支持</p>
<p>使用CSS3来完成部分视觉工作，载入速度快，节省代码及图片，也为用户节约了带宽。</p>
<p><strong>设计师要知道</strong>，一个界面里几十张素材图的方式已经太out啦，赶快让CSS3帮你偷懒。</p>
<p><a href="http://desicode.cn/?attachment_id=7150" rel="attachment wp-att-7150" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/5057_image006.jpg" alt="" width="480" height="258" /></a></p>
<p><strong>9.</strong><strong>实时通讯</strong></p>
<p>以往网站由于HTTP协议以及浏览器的设计，实时的互动性相当的受限，只能使用一些技巧来「仿真」实时的通讯效果，但HTML5提供了完善的实时通讯支持。</p>
<p><strong>设计师要知道</strong>，应用中嵌入实时通信、信息内容进行实时提醒，HTML5可以帮你实现。</p>
<p><strong>10.</strong><strong>档案以及硬件支持</strong></p>
<p>不知道大家有没有发现，在Gmail等新的网页程序当中，已经可以透过拖拉的方式将档案作为邮件附件？这就是HTML5档案的功能中的Drag’n Drop和File API。</p>
<p><strong>设计师要知道</strong>，移动应用中对于数据传输的需求越来越大，传统的路径选择方式太过于繁琐，快来试试HTML5的拖拽上传功能吧！</p>
<p><strong>11.</strong><strong>语意化</strong></p>
<p>语意化的网络是可以让计算机能够更加理解网页的内容，对于像是搜索引擎的优化（SEO）或是推荐系统可以有很大的帮助。</p>
<p>设计师要知道，HTML5能让搜索更快速、更准确。</p>
<p><strong>12.</strong><strong>双平台融合</strong>的app开发方式，提高工作效率</p>
<p>依照目前iPhone/Android 迅速提升市占率的情势来看，未来如果想要在先进的智慧型手机上撰写应用程式，要不是选择使用Objective-C + CocoaTouch Framework 撰写iPhone/iPad 应用程式，就是选择Java + Android Framework 撰写Android 应用程式，如果想要同时支援两种平台，势必要维护两套程式码，对于刚起步的小服务而言也算是个小有负担的维运成本。</p>
<p>使用HTML5, CSS3 来撰写Web-based  的应用程式，若要同时支援iPhone 及Android，几乎只需要维护一份程式码（少部份要因应clients 作修改），而且未来若有其它行动装置拥有支援HTML5 的浏览器，那同样的WebApp 直接就多了一个支援平台。</p>
<p>Google 的系列服务使用了不少HTML5 中的cache、storage 及database 规格来做到离线存取程式的效果。因为比起桌面应用程式，行动装置的网路连线更不稳定，而且有时在移动中并无网路可以使用，透过这些技术才能让使用者即使在 无网路环境下继续使用你的webapp。这说明html5主要服务对象还是给予web的应用，并不会对全部app开发造成威胁，这样有利于不同类型应用使 用不同的开发方式，灵活性更强。</p>
<h2>关于HTML5，设计师要知道些神马</h2>
<p>对于设计师，了解HTML5并不是要学会写代码，而是要知道HTML5有什么特性，能实现什么效果，以便在设计过程中熟练应用。</p>
<p>除此之外，需要知道哪些产品适合使用HTML5进行开发，哪些适合使用原生方式进行开发，毕竟最快、最方便的开发方式是最好的。</p>
<p>再进一步，原生&amp;HTML5的符合开发方式会逐步成为潮流，哪个部分最适合使用HTML5进行开发，也应该能够分辨出来。</p>
<h3><strong>什么类型的应用最适合用HTML5</strong><strong>开发</strong></h3>
<p>就目前来说，依托于网络，web上已经出现的，基于<strong>信息流</strong>方式及类似方式的应用最适合使用HTML5进行开发。</p>
<p>什么应用是这样的：<strong>微博</strong>、<strong>社交</strong>、<strong>新闻</strong>等</p>
<p>其他适合使用HTML5开发的应用类型：<strong>地图</strong>、<strong>导航</strong>等</p>
<h3><strong>为什么用HTML5</strong><strong>会更好</strong></h3>
<p>信息流架构应用都是直接在web（或wap）端抓取数据，HTML5可以直接使用跨平台数据而不用使用后台API，大大降低研发、维护成本，而且呈现效果几乎没有什么区别</p>
<p>地图类能充分发挥HTML5对于离线缓存及地理定位方面的功能，将地图下载到本地，然后配合定位进行搜索、导航等功能（形式灵活，不用提前下载大容量的地图包，节省流量）</p>
<p>下面介绍一些使用HTML5开发的web应用</p>
<p>google+</p>
<p><a href="http://desicode.cn/?attachment_id=7151" rel="attachment wp-att-7151" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/d90b_image007.png" alt="" width="291" height="437" /></a></p>
<p>新浪微博</p>
<p><a href="http://desicode.cn/?attachment_id=7156" rel="attachment wp-att-7156" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/d3bd_image008.png" alt="" width="294" height="440" /></a></p>
<p>百度小说</p>
<p><a href="http://desicode.cn/?attachment_id=7157" rel="attachment wp-att-7157" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/ae12_image009.png" alt="" width="294" height="441" /></a></p>
<p>FT web app  app.ft.com</p>
<p><a href="http://desicode.cn/?attachment_id=7158" rel="attachment wp-att-7158" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/02f2_image010.png" alt="" width="294" height="440" /></a></p>
<p>不停走动的倒计时器  <a href="http://www.technetra.com/ipdc3/countdown-2.0/" target="_blank">http://www.technetra.com/ipdc3/countdown-2.0/</a></p>
<p><a href="http://desicode.cn/?attachment_id=7159" rel="attachment wp-att-7159" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/3471_image011.png" alt="" width="291" height="437" /></a></p>
<p>终端上实现素描效果  <a href="http://mrdoob.com/projects/harmony/" target="_blank">http://mrdoob.com/projects/harmony/</a></p>
<p><a href="http://desicode.cn/?attachment_id=7160" rel="attachment wp-att-7160" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/2033_image012.png" alt="" width="294" height="440" /></a></p>
<p>吃豆游戏iPhone版   <a href="http://www.kesiev.com/akihabara/" target="_blank">http://www.kesiev.com/akihabara/</a></p>
<p><a href="http://desicode.cn/?attachment_id=7161" rel="attachment wp-att-7161" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/dbf0_image013.png" alt="" width="298" height="448" /></a></p>
<p>图表实时绘制应用    <a href="http://dwpe.googlecode.com/svn/trunk/charting/index.html" target="_blank">http://dwpe.googlecode.com/svn/trunk/charting/index.html</a></p>
<p><a href="http://desicode.cn/?attachment_id=7162" rel="attachment wp-att-7162" target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/08/8358_image014.png" alt="" width="292" height="438" /></a></p>
<h3><strong>怎么用HTML5</strong><strong>开发移动应用</strong></h3>
<p>对于纯离线类的app，目前HTML5展现出来的实力还不是非常强劲，从交互体验和视觉呈现来说与原生方式开发的app还有一定的差距，希望随着HTML5的不断完善，能够赶超原生模式</p>
<p>事实上，移动应用的开发方式往往不是那么死板只用一种方式的，HTML5配合原生方式可能会获得更好的效果：<strong>利用原生方式搭建本地架构</strong>，让用户获得更加贴近于设备的交互体验，同时<strong>在信息的呈现上使用</strong><strong>HTML5</strong>的优势，以强强联手的方式为用户打造最好的移动应用。</p>
<p><strong>实例：网易博客Android</strong><strong>客户端</strong></p>
<p><a href="http://www.mhtml5.com/2011/07/2200.html" target="_blank">http://www.mhtml5.com/2011/07/2200.html</a></p>
<h2><strong>HTML5</strong><strong>现状及展望</strong></h2>
<p>现在HTML5的标准还没有完全定制完成，整体开发方式上还没有一个规范性的内容，导致的结果是开发者开发的应用比较混乱，体验上也不及原生方式开发的应用，如果想要更好的用户体验，需要更多的优化。</p>
<p>对于移动设备硬件的接口API，目前使用HTML5还不能方便调用移动设备的摄像头、话筒、重力感应器、GPS等硬件设备，不过这也只是时间问题，相信随着HTML5的越发完善，这样的功能一定也会支持的。</p>
<p>还有一个方面就是浏览器之争，一个全面强大的移动端浏览器将对HTML5在移动平台上的发展起到至关重要的作用。</p>
<p>Safari、Chrome、Firefox、IE…谁能脱颖而出，我们拭目以待。</p>
<p>期待HTML5未来在移动平台散发炫目的光彩！</p>
<p>由于目前网络上相关内容较少，以上内容多为自己总结，肯定有不太对的地方，还请大家多多指正。</p>
<p>来源：<a href="http://uedc.163.com/7136.html" target="_blank">http://uedc.163.com/7136.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://desicode.cn/share/2011/08/26/297/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>剖析完美的着陆页[landing page]</title>
		<link>http://desicode.cn/design/2011/08/25/291/</link>
		<comments>http://desicode.cn/design/2011/08/25/291/#comments</comments>
		<pubDate>Thu, 25 Aug 2011 08:45:25 +0000</pubDate>
		<dc:creator>Wag Jie</dc:creator>
				<category><![CDATA[设计|Design]]></category>
		<category><![CDATA[LANDING PAGE]]></category>
		<category><![CDATA[专题设计]]></category>
		<category><![CDATA[提高转化率]]></category>
		<category><![CDATA[着陆页设计]]></category>

		<guid isPermaLink="false">http://desicode.cn/?p=291</guid>
		<description><![CDATA[剖析完美的着陆页之汉化版。 点击图片查看大图 原图原文见“Anatomy Of A Perfect Landing Page”。 注：在国内，很少有人把绿色（美钞的颜色）与财富联系起来。环境不同，供参考。 PPC着陆页[landing page]：怎样利用按点击付费PPC广告的着陆页，获得更高的转化率和更低的每点击成本CPC。 英文原图原文见“LANDING PAGES FOR PPC”。 注：最佳实践也会害死人。供参考。 12步骤的着陆页修复程序：优化你的营销漏斗，以获得更高的转化。 英文原图原文见“The 12-Step Landing Page Rehab Program [Infographic]”。 再说明一次：它山之石，可以攻玉，可以毁玉。 来源：http://blog.sina.com.cn/laolu2066]]></description>
			<content:encoded><![CDATA[<p>剖析完美的着陆页之汉化版。</p>
<p><strong>点击图片查看大图</strong></p>
<p><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/05/8c3e_37d0_3a36_6d6f_7e1a_3e90_f4a8_0d70d." alt="" width="900" height="2240" /></p>
<p>原图原文见“<a href="http://blog.kissmetrics.com/landing-page-design-infographic/" target="_blank">Anatomy Of A Perfect Landing Page</a>”。<span id="more-291"></span></p>
<p>注：在国内，很少有人把绿色（美钞的颜色）与财富联系起来。环境不同，供参考。</p>
<div id="sinabloga">
<div id="sinablogb">
<div id="sinablogbody">
<div id="column_2">
<div id="module_920">
<div>
<div id="articlebody">
<div id="sina_keyword_ad_area2">
<p>PPC着陆页[landing page]：怎样利用按点击付费PPC广告的着陆页，获得更高的转化率和更低的每点击成本CPC。</p>
<p><a href="http://alibuybuy-img11.stor.sinaapp.com/2011/05/2faa_3d11_9e1c_178de." target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/05/2faa_3d11_9e1c_178de." alt="" /></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sinabloga">
<div id="sinablogb">
<div id="sinablogbody">
<div id="column_2">
<div id="module_920">
<div>
<div id="articlebody">
<div id="sina_keyword_ad_area2">
<p>英文原图原文见“<a href="http://unbounce.com/ppc-landing-pages/" target="_blank">LANDING PAGES FOR PPC</a>”。</p>
<p>注：最佳实践也会害死人。供参考。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p>12步骤的着陆页修复程序：优化你的营销漏斗，以获得更高的转化。</p>
<p><a href="http://alibuybuy-img11.stor.sinaapp.com/2011/05/4e7c_a74d_b6220." target="_blank"><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/05/4e7c_a74d_b6220." alt="" /></a></p>
<p>英文原图原文见“<a href="http://www.seomoz.org/blog/the-12step-landing-page-rehab-program-infographic-10488" target="_blank">The 12-Step Landing Page Rehab Program [Infographic]</a>”。</p>
<p>再说明一次：它山之石，可以攻玉，可以毁玉。</p>
<p>来源：<a href="http://blog.sina.com.cn/laolu2066">http://blog.sina.com.cn/laolu2066</a></p>
]]></content:encoded>
			<wfw:commentRss>http://desicode.cn/design/2011/08/25/291/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>谈网络广告的发展与蜕变</title>
		<link>http://desicode.cn/design/2011/08/12/283/</link>
		<comments>http://desicode.cn/design/2011/08/12/283/#comments</comments>
		<pubDate>Fri, 12 Aug 2011 01:40:08 +0000</pubDate>
		<dc:creator>Wag Jie</dc:creator>
				<category><![CDATA[设计|Design]]></category>
		<category><![CDATA[广告发展与蜕变]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[网络广告]]></category>

		<guid isPermaLink="false">http://desicode.cn/?p=283</guid>
		<description><![CDATA[来自：百度MUX 广告无时无刻在我们的生活中存在着，我们既离不开它，又需要它，它是我们生活中不可缺少的一部分。想象一下，我们生活的世界中如果没有了广告，这个世界会变的多么枯燥无味，所有的产品都可能将是一样的包装，一样的功能…… 网络广告，早期由于硬件和网络环境的限制，其展现形式极其有限。广告形式以文本链接广告、网幅广告、电子邮件广告等形式为主要传播手段。随着互联网技术、硬件的快速发展，传统互联网广告越来越不能满足需求时，富媒体互动广告的出现和发展逐渐成熟并得到了充分应用。到现在，我们即将进入移动互联网时代，以手机为载体的新媒介的诞生，移动网络互动广告将越来越重要，成为网络广告中的新秀和未来。 一 文本链接广告 是一种以文字链接形式的，对浏览者干扰最小，访问速度最快，最具效果的网络广告形式； 二 网幅广告 以GIF，JPG等格式建立的图像文件，定位在网页中，大多用来表现广告内容的网络广告形式； 网幅广告分为两类：静态、动态； 1. 静态： 静态的网幅广告就是在网页上显示一幅固定的图片，它也是早年网络广告常用的一种方式。优点就是制作简单，并且被所有的网站所接受。它的缺点也显而易见，在众多采用新技术制作的网幅广告面前，它就显得有些呆板和枯燥。 这是Naver shop中的一个商品展示的静态图片banner，banner中大大的绿色标题，与精美的图片相映衬，既能突出文字的表意，也可以将视觉停留在精美的图片之上。 iPhone的广告，相信大家早已不再陌生，一如既往的那么简单，那么经典。没有多余的装饰，只有那一句精炼的广告语和经典的产品设计。 iPhone APP的banner设计，其中的文案“感谢第100万次下载者”。 宝马3系的banner广告，放大的经典的宝马车灯，一眼就能认出，这就是宝马，依然是那么大气，结合音乐活动，体现出这次活动的主题——BMW之悦。 2. 动态： 以一连串动态或闪烁的静态图片形成的具有动态效果的动画。通常采用gif、swf等格式，通过不同的画面，传递给浏览者更多的信息，这种广告并不复杂，尺寸也比较小。正因为动态网幅广告拥有如此多的优点，所以它是目前最主要的网络广告形式。 百度身边的客户端gif banner设计，可爱的百度身边形象，通过手持手机的造型，既诠释了产品特性，又体现出无线客户端的特点。 三 电子邮件广告 采用文本格式或html格式，把一段广告性的文字、图片放置在邮件中，也可以设置一个URL，链接到广告主公司主页或提供产品或服务的特定页面的网络广告形式； 电子邮件的广告也已经发展了很多年了，现在我们无时不刻不再被电子邮件广告所轰炸着。一个好的电子邮件广告，能够为用户定期提供所需信息，反之，用户一定会在某个时间点抛弃它。 苹果的邮件广告，主题突出，一句话即说明这次活动的主旨：为母亲节挑选礼物。通过各种女性形象传达着“母亲节”的主题。 四 互动富媒体广告 随着网幅广告越来越不能满足需求时，一种更能具吸引的交互方式：以文字、声音、图像、游戏等为元素，以鼠标，键盘等其他输入输出装置为交互操作体验的网络广告形式。 传统的文字搭配图片式广告，电子邮件式广告，由于其发展多年，用户对其所带来的感受已经逐渐淡化，甚至有时候会产生反感情绪。另一方面，传统的文字，图片等广告形式的收益也越来越小。 因此网络互动富媒体广告的出现给网络广告的设计，带来了新的发展空间，flash技术的应用，让广告的展示形式有了新的活力。现在互联网上较为成熟的互动广告也多是以flash和js为主要展现形式。Flash互动广告，在网络互动广告中的贡献堪称卓越。 互动富媒体广告的常见形式： 1. 自动播放： 不需要鼠标交互，即可完成动画的播放，这种方式被大量应用在flash广告中 奔驰汽车的互动广告——广告中没有文案,画面就一个时钟，每过一秒钟，就有一辆汽车开了出去，用画面的意境体现：还等什么 “Let’s Talk!” 2. 单击交互： 不鼠标点击，触发广告交互 大众广告——整个广告以视频播放为创意，点击播放后一路快速驶过的大众汽车，快到浏览者根本无法看到车是什么样子，吸引用户拖拽进度条自己回放观看。 Super Lub 润滑剂广告——广告一上来就是一个小女孩不同的荡秋千，秋千发出刺耳的摩擦声，当你关掉左上角的声音时，产品出现。广告形式简单，瞬间产品的特性就表现的淋漓尽致！ 3. 拖拽交互： 按住鼠标拖拽，享受拖拽时画面变化的快感 保险套创意广告——一开始是一个禁止符号，当用鼠标向下拖拽，瞬间变成了一个女性符号，广告的创意意味深长 PUMA互动广告——画面上有一根鞋带提醒你去拖拽，使用鼠标拖拽的时候，会拽出一双运动鞋，形象的说明了，puma的运动鞋是如此得轻薄。 Mini cooper广告——当你拖拽这家伙的嘴角，就从微笑变成了这幅样子。 [...]]]></description>
			<content:encoded><![CDATA[<p><span class="Apple-style-span" style="line-height: 19px;">来自：百度MUX</span></p>
<div id="main">
<div id="post">
<div id="post-1295">
<div>
<div><img src="http://mux.baidu.com/img/39/top.jpg" alt="banner" width="580px"/></div>
<div>广告无时无刻在我们的生活中存在着，我们既离不开它，又需要它，它是我们生活中不可缺少的一部分。想象一下，我们生活的世界中如果没有了广告，这个世界会变的多么枯燥无味，所有的产品都可能将是一样的包装，一样的功能……</div>
<div>网络广告，早期由于硬件和网络环境的限制，其展现形式极其有限。广告形式以文本链接广告、网幅广告、电子邮件广告等形式为主要传播手段。随着互联网技术、硬件的快速发展，传统互联网广告越来越不能满足需求时，富媒体互动广告的出现和发展逐渐成熟并得到了充分应用。到现在，我们即将进入移动互联网时代，以手机为载体的新媒介的诞生，移动网络互动广告将越来越重要，成为网络广告中的新秀和未来。<span id="more-283"></span></p>
<h2><strong>一 文本链接广告</strong></h2>
<p>是一种以文字链接形式的，对浏览者干扰最小，访问速度最快，最具效果的网络广告形式；<br />
<img src="http://mux.baidu.com/img/39/1.jpg" alt="" /></p>
</div>
<div>
<h2><strong>二 网幅广告</strong></h2>
<p>以GIF，JPG等格式建立的图像文件，定位在网页中，大多用来表现广告内容的网络广告形式；</p>
<p>网幅广告分为两类：静态、动态；</p>
<h4><strong>1. 静态：</strong></h4>
<p>静态的网幅广告就是在网页上显示一幅固定的图片，它也是早年网络广告常用的一种方式。优点就是制作简单，并且被所有的网站所接受。它的缺点也显而易见，在众多采用新技术制作的网幅广告面前，它就显得有些呆板和枯燥。<br />
<img src="http://mux.baidu.com/img/39/2.jpg" alt="" /><br />
这是Naver shop中的一个商品展示的静态图片banner，banner中大大的绿色标题，与精美的图片相映衬，既能突出文字的表意，也可以将视觉停留在精美的图片之上。</p>
<p><img src="http://mux.baidu.com/img/39/3.jpg" alt="" /><br />
iPhone的广告，相信大家早已不再陌生，一如既往的那么简单，那么经典。没有多余的装饰，只有那一句精炼的广告语和经典的产品设计。</p>
<p><img src="http://mux.baidu.com/img/39/4.jpg" alt="" /><br />
iPhone APP的banner设计，其中的文案“感谢第100万次下载者”。</p>
<p><img src="http://mux.baidu.com/img/39/5.jpg" alt="" /><br />
宝马3系的banner广告，放大的经典的宝马车灯，一眼就能认出，这就是宝马，依然是那么大气，结合音乐活动，体现出这次活动的主题——BMW之悦。</p>
<h4><strong>2. 动态：</strong></h4>
<p>以一连串动态或闪烁的静态图片形成的具有动态效果的动画。通常采用gif、swf等格式，通过不同的画面，传递给浏览者更多的信息，这种广告并不复杂，尺寸也比较小。正因为动态网幅广告拥有如此多的优点，所以它是目前最主要的网络广告形式。</p>
<p><img src="http://mux.baidu.com/img/39/6.jpg" alt="" /><br />
百度身边的客户端gif banner设计，可爱的百度身边形象，通过手持手机的造型，既诠释了产品特性，又体现出无线客户端的特点。</p>
</div>
<div>
<h2><strong>三 电子邮件广告</strong></h2>
<p>采用文本格式或html格式，把一段广告性的文字、图片放置在邮件中，也可以设置一个URL，链接到广告主公司主页或提供产品或服务的特定页面的网络广告形式；</p>
<p>电子邮件的广告也已经发展了很多年了，现在我们无时不刻不再被电子邮件广告所轰炸着。一个好的电子邮件广告，能够为用户定期提供所需信息，反之，用户一定会在某个时间点抛弃它。</p>
<p><img src="http://mux.baidu.com/img/39/7.jpg" alt="" /><br />
苹果的邮件广告，主题突出，一句话即说明这次活动的主旨：为母亲节挑选礼物。通过各种女性形象传达着“母亲节”的主题。</p>
</div>
<div>
<h2><strong>四 互动富媒体广告</strong></h2>
<p>随着网幅广告越来越不能满足需求时，一种更能具吸引的交互方式：以文字、声音、图像、游戏等为元素，以鼠标，键盘等其他输入输出装置为交互操作体验的网络广告形式。</p>
<p>传统的文字搭配图片式广告，电子邮件式广告，由于其发展多年，用户对其所带来的感受已经逐渐淡化，甚至有时候会产生反感情绪。另一方面，传统的文字，图片等广告形式的收益也越来越小。<br />
因此网络互动富媒体广告的出现给网络广告的设计，带来了新的发展空间，flash技术的应用，让广告的展示形式有了新的活力。现在互联网上较为成熟的互动广告也多是以flash和js为主要展现形式。Flash互动广告，在网络互动广告中的贡献堪称卓越。</p>
<p>互动富媒体广告的常见形式：</p>
<h4><strong>1. 自动播放：</strong></h4>
<p>不需要鼠标交互，即可完成动画的播放，这种方式被大量应用在flash广告中<br />
<img src="http://mux.baidu.com/img/39/8.jpg" alt="" /><br />
奔驰汽车的互动广告——广告中没有文案,画面就一个时钟，每过一秒钟，就有一辆汽车开了出去，用画面的意境体现：还等什么 “Let’s Talk!”</p>
<h4><strong>2. 单击交互：</strong></h4>
<p>不鼠标点击，触发广告交互<br />
<img src="http://mux.baidu.com/img/39/9.jpg" alt="" /><br />
大众广告——整个广告以视频播放为创意，点击播放后一路快速驶过的大众汽车，快到浏览者根本无法看到车是什么样子，吸引用户拖拽进度条自己回放观看。</p>
<p><img src="http://mux.baidu.com/img/39/10.jpg" alt="" /><br />
Super Lub 润滑剂广告——广告一上来就是一个小女孩不同的荡秋千，秋千发出刺耳的摩擦声，当你关掉左上角的声音时，产品出现。广告形式简单，瞬间产品的特性就表现的淋漓尽致！</p>
<h4><strong>3. 拖拽交互：</strong></h4>
<p>按住鼠标拖拽，享受拖拽时画面变化的快感<br />
<img src="http://mux.baidu.com/img/39/11.jpg" alt="" /><br />
保险套创意广告——一开始是一个禁止符号，当用鼠标向下拖拽，瞬间变成了一个女性符号，广告的创意意味深长</p>
<p><img src="http://mux.baidu.com/img/39/12.jpg" alt="" /><br />
PUMA互动广告——画面上有一根鞋带提醒你去拖拽，使用鼠标拖拽的时候，会拽出一双运动鞋，形象的说明了，puma的运动鞋是如此得轻薄。</p>
<p><img src="http://mux.baidu.com/img/39/13.jpg" alt="" /><br />
Mini cooper广告——当你拖拽这家伙的嘴角，就从微笑变成了这幅样子。</p>
<h4><strong>4. 鼠标跟踪交互：</strong></h4>
<p>当鼠标晃来晃去的时候，画面就像被施了魔法一样，你怎么操控，它就怎样播放。<br />
<img src="http://mux.baidu.com/img/39/14.jpg" alt="" /><br />
这是一个数字电话的互动广告，用户在banner上左右滑动鼠标，画面上的耳朵就会不停的跟着手机跑来跑去，当追到后就开心的放出心形。</p>
<p><img src="http://mux.baidu.com/img/39/15.jpg" alt="" /><br />
雪佛兰汽车广告——鼠标晃动，会画出汽车行驶的路线，汽车跟随鼠标来行驶。</p>
<h4><strong>5. 鼠标事件交互：</strong></h4>
<p>通过对事件的选择，交互时间会变化出不停的结果，娱乐十足<br />
<img src="http://mux.baidu.com/img/39/16.jpg" alt="" /><br />
iPod nano——当你选择一个Nano后，在背景上点住鼠标晃动，即可看到nano所放的光辉，与电视广告相得益彰。</p>
<p><img src="http://mux.baidu.com/img/39/17.jpg" alt="" /><br />
WWF——地球的向左转，回复到绿色的世界，向右转城市变荒漠</p>
</div>
<div>
<h2><strong>五 移动网络互动广告</strong></h2>
<p>相对于其他广告形式，移动网络广告，借助于移动终端所特有的硬件或传感器特性，可以具有更强的达到率、互动性、定位能力、传播性、交易能力广告特点，如AR，二维码，蓝牙广告，LBS基于位置的营销活动互动、与其他媒体的网络互动广告。</p>
<p>据相关数据表明，2010年美国移动广告市场规模为7.976亿美元，预计2011年美国移动广告市场规模为12.4亿美元，2015年将达到50.4亿美元。在中国移动广告市场，eMarketer表示中国移动广告市场规模在2011年预计将达到4.45亿美元，预计2012年中国移动广告市场规模将达到7.12亿美元，到2015年该数据将达到13.9亿美元。移动广告市场将是一块新兴的互联网产业。</p>
<p>移动互联网的到来，给我们开启了激情神奇的新世界之门，我们在这里见到了更具革命性的广告形式，原来广告可以为我们的生活带来这样的便利，让我们更加享受移动生活的多彩。移动网络互动广告，不像传统的网络广告，有可能成为给我们带来干扰。移动广告对用户的精准定位，透过各种传感器，位置定位，推送等功能，给用户提供更加适合自己的广告服务；同时，广告的展现形式也已不再像传统互联网广告那样生硬，移动网络广告从硬件环境的提升，以及软件及网络环境的变化，成为了更加富有创意性与交互性的新广告媒介，使用户在得到有用信息的同时，更可以感受到移动网络互动广告所带来的乐趣。</p>
<p>可以说移动网络互动广告给我们现有的广告模式，带来一次革命！</p>
<p>目前，移动网络互动广告分为3种形式</p>
<h4><strong>1. 移动网站互动广告</strong></h4>
<p>以移动终端浏览器为基础，以移动网页为展现形式的广告，如：移动网页上的文字链接广告、图片广告，以及品牌活动等广告形式；</p>
<h4><strong>2. APP植入广告</strong></h4>
<p>以APP为广告载体，在app启动或运行中，植入了以iAD、AdMob等第三方广告；</p>
<h4><strong>3. App互动展现广告</strong></h4>
<p>APP本身即为互动广告的营销平台，如：宜家、Converse等APP应用；</p>
<p>让我们来看看现在一些移动网络广告的案例：</p>
<p><img src="http://mux.baidu.com/img/39/18.jpg" alt="" /><br />
APP启动后的游戏中，在APP上部或下部，显示有广告，点击广告可以进入app store或以浏览器打开进入相应的广告主网站。这种广告模式是以APP为基础，常以免费APP+广告的模式出现。在满足用户需求的同时，也达到了广告传播的目的。</p>
<h4><strong>QR应用案例《你的简历够帅吗》</strong></h4>
<p><img src="http://mux.baidu.com/img/39/19.jpg" alt="" /><br />
一张个人简历，做一段视频，结合二维码。打印出来。招聘方可以使用手机中的扫码软件，即可看到视频。结合二维码可以很方便的把线下和线上链接起来；</p>
<p><a href="http://v.youku.com/v_show/id_XMjYyNDI2Mjgw.html">http://v.youku.com/v_show/id_XMjYyNDI2Mjgw.html</a></p>
<h4><strong>宜家（IKEA）AR增强实景技术运用案例</strong></h4>
<p><img src="http://mux.baidu.com/img/39/20.jpg" alt="" /><br />
宜家家居的APP，允许你将宜家的产品，以虚拟现实的方式，显示在你的空间中。</p>
<p><a href="http://v.youku.com/v_show/id_XMTkyNjM2MTA0.html">http://v.youku.com/v_show/id_XMTkyNjM2MTA0.html</a></p>
<h4><strong>Converse AR互动营销APP</strong></h4>
<p><img src="http://mux.baidu.com/img/39/21.jpg" alt="" /><br />
和之前宜家的App创意如出一辙，都是借助增强实景技术，让消费者虚拟体验商品。然后促进购买。</p>
<p><a href="http://v.youku.com/v_show/id_XMjYwMzI3NDAw.html" target="_blank">http://v.youku.com/v_show/id_XMjYwMzI3NDAw.html</a></p>
<h4><strong>iPad 内嵌入式广告展示</strong></h4>
<p><img src="http://mux.baidu.com/img/39/22.jpg" alt="" /><br />
晃动iPad，下面banner中的相机会根据 iPad的晃动角度旋转不同视图，点击banner后全屏显示，手可以拖动相机360°旋转展示相机的各个角度。</p>
<p><a href="http://v.youku.com/v_show/id_XMjUyOTA5Nzcy.html">http://v.youku.com/v_show/id_XMjUyOTA5Nzcy.html</a></p>
<h4><strong>Axe在iAd平台上的广告案例</strong></h4>
<p><img src="http://mux.baidu.com/img/39/23.jpg" alt="" /></p>
<p><a href="http://v.youku.com/v_show/id_XMjQ5MzI0MDE2.html">http://v.youku.com/v_show/id_XMjQ5MzI0MDE2.html</a></p>
</div>
<div>总结：移动互联网时代的到来，为我们工作、生活提供了无限的便利与效率，也让我们有了更多的选择，移动网络广告让用户越来越有主动权，用户才是决定一个产品是否有用的，一个广告是否有价值的关键。广告的传播形式的转变，创造了一个新的广告产业。我们在移动网络广告设计中，将有更大的创意发挥空间，更强的传播力。</div>
</div>
</div>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://desicode.cn/design/2011/08/12/283/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>强大的jQuery弹出层插件–BlockUI</title>
		<link>http://desicode.cn/code/2011/07/23/279/</link>
		<comments>http://desicode.cn/code/2011/07/23/279/#comments</comments>
		<pubDate>Sat, 23 Jul 2011 08:02:55 +0000</pubDate>
		<dc:creator>Wag Jie</dc:creator>
				<category><![CDATA[代码|Code]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[jQuery弹出层]]></category>

		<guid isPermaLink="false">http://desicode.cn/?p=279</guid>
		<description><![CDATA[经常会有些同志问我有没有好用的基于jQuery的弹出层插件，我通常都会毫不犹豫的推荐他这款插件–BlockUI。我也极少接触到其他的jQuery弹出层插件，因为我觉得有了BlockUI这款功能强大的插件已经能满足我的需求了。 先看看BlockUI的演示效果： 查看演示 BlockUI支持很多常见的弹出层，表单、图片、div窗口等。那么这个插件该如何使用呢？接着往下看。 先导入jQuery的库文件(小提示：使用Google服务器的压缩版jQuery库文件加载速度会更快)，然后再导入BlockUI的库文件，如果你觉得库文件比较大你可以使用压缩技术对其进行压缩，本博在另一篇文章中详细的说明了javascript文件和CSS文件的压缩。 导入库文件后，就可以调用BlockUI了，BlockUI的调用挺简单的，看下面这段代码 $(function(){ $('#box_btn').click(function(){ //给box_btn绑定一个鼠标点击的事件 $.blockUI({ //当点击事件发生时调用弹出层 message: $('#box'), //要弹出的元素box css: { //弹出元素的CSS属性 top: '50%', left: '50%', textAlign: 'left', marginLeft: '-320px', marginTop: '-145px', width: '600px', background: 'none' } }); $('.blockOverlay').attr('title','单击关闭').click($.unblockUI); //遮罩层属性的设置以及当鼠标单击遮罩层可以关闭弹出层 $('.close').click($.unblockUI); //也可以自定义一个关闭按钮来关闭弹出层 }); }); 看了上面的代码，其实你会发觉BlockUI的使用很简单，有2个重要的方法分别是调用弹出层($.blockUI)和关闭弹出层($.unblockUI)。 $.blockUI定义了一个message属性的，该属性的值就定义了要弹出的元素，比如要弹出一个id为box的div元素，就可以这样 写：message: $(‘#box’)，对应了上面的第4行代码。需要注意的是，要弹出的那个元素在弹出之前要将其在页面中隐藏即设置该元素的CSS样式为 display:none。 $.blockUI还定义了一个css属性，该属性可以对弹出层的样式进行再定义。细心的同志可能会打开BlockUI的库文件查看，其实在库文件 中也默认定义了一个弹出层的样式，如果你在页面中定义的样式效果并不是很理想，最好是看看库文件中的$.blockUI.defaults的CSS属性。 如果你想了解一些BlockUI的更高级的用法你可以去该插件的官网看看说明文档。 BlockUI的下载地址是：hhttp://jquery.malsup.com/block/#download 另一个简单实用的弹出层组件–easyDialog：http://stylechen.com/easydialog.html 原载于：雨夜带刀’s Blog 本文链接：http://stylechen.com/jquery-blockui.html 如需转载请以链接形式注明原载或原文地址。]]></description>
			<content:encoded><![CDATA[<p>经常会有些同志问我有没有好用的基于jQuery的弹出层插件，我通常都会毫不犹豫的推荐他这款插件–BlockUI。我也极少接触到其他的jQuery弹出层插件，因为我觉得有了BlockUI这款功能强大的插件已经能满足我的需求了。</p>
<p>先看看BlockUI的演示效果：</p>
<div><a href="http://stylechen.com/wp-content/uploads/demo/jquery-blockui/index.html" target="_blank">查看演示</a></div>
<p>BlockUI支持很多常见的弹出层，表单、图片、div窗口等。那么这个插件该如何使用呢？接着往下看。</p>
<p>先导入jQuery的库文件(小提示：使用Google服务器的压缩版jQuery库文件加载速度会更快)，然后再导入BlockUI的库文件，如果你觉得库文件比较大你可以使用压缩技术对其进行压缩，本博在另一篇文章中详细的说明了<a title="压缩JS/CSS的利器–minify" href="http://stylechen.com/minify.html" target="_blank">javascript文件和CSS文件的压缩</a>。</p>
<p><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="images/jquery.blockUI.js"></script></p>
<p>导入库文件后，就可以调用BlockUI了，BlockUI的调用挺简单的，看下面这段代码</p>
<p><code><br />
$(function(){<br />
$('#box_btn').click(function(){ //给box_btn绑定一个鼠标点击的事件<br />
$.blockUI({ //当点击事件发生时调用弹出层<br />
message: $('#box'), //要弹出的元素box<br />
css: { //弹出元素的CSS属性<br />
top: '50%',<br />
left: '50%',<br />
textAlign: 'left',<br />
marginLeft: '-320px',<br />
marginTop: '-145px',<br />
width: '600px',<br />
background: 'none'<br />
}<br />
});<br />
$('.blockOverlay').attr('title','单击关闭').click($.unblockUI); //遮罩层属性的设置以及当鼠标单击遮罩层可以关闭弹出层<br />
$('.close').click($.unblockUI); //也可以自定义一个关闭按钮来关闭弹出层<br />
});<br />
});</p>
<p></code></p>
<p>看了上面的代码，其实你会发觉BlockUI的使用很简单，有2个重要的方法分别是调用弹出层($.blockUI)和关闭弹出层($.unblockUI)。</p>
<p>$.blockUI定义了一个message属性的，该属性的值就定义了要弹出的元素，比如要弹出一个id为box的div元素，就可以这样 写：message: $(‘#box’)，对应了上面的第4行代码。需要注意的是，要弹出的那个元素在弹出之前要将其在页面中隐藏即设置该元素的CSS样式为 display:none。</p>
<p>$.blockUI还定义了一个css属性，该属性可以对弹出层的样式进行再定义。细心的同志可能会打开BlockUI的库文件查看，其实在库文件 中也默认定义了一个弹出层的样式，如果你在页面中定义的样式效果并不是很理想，最好是看看库文件中的$.blockUI.defaults的CSS属性。</p>
<p>如果你想了解一些BlockUI的更高级的用法你可以去该插件的官网看看<a href="http://jquery.malsup.com/block/#faq" target="_blank">说明文档</a>。</p>
<p>BlockUI的下载地址是：<a href="http://jquery.malsup.com/block/#download" target="_blank">hhttp://jquery.malsup.com/block/#download</a></p>
<p>另一个简单实用的弹出层组件–easyDialog：<a href="http://stylechen.com/easydialog.html">http://stylechen.com/easydialog.html</a></p>
<div id="art_copy">原载于：<a href="http://stylechen.com/">雨夜带刀’s Blog</a><br />
本文链接：<a title="强大的jQuery弹出层插件--BlockUI" href="http://stylechen.com/jquery-blockui.html">http://stylechen.com/jquery-blockui.html</a><br />
如需转载请以链接形式注明原载或原文地址。</div>
]]></content:encoded>
			<wfw:commentRss>http://desicode.cn/code/2011/07/23/279/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>少些质感，多些板式，转自腾讯TGideas</title>
		<link>http://desicode.cn/design/2011/07/05/275/</link>
		<comments>http://desicode.cn/design/2011/07/05/275/#comments</comments>
		<pubDate>Tue, 05 Jul 2011 01:57:09 +0000</pubDate>
		<dc:creator>Wag Jie</dc:creator>
				<category><![CDATA[设计|Design]]></category>
		<category><![CDATA[板式]]></category>
		<category><![CDATA[网页设计]]></category>
		<category><![CDATA[设计]]></category>
		<category><![CDATA[质感]]></category>

		<guid isPermaLink="false">http://desicode.cn/?p=275</guid>
		<description><![CDATA[《ideas》是腾讯互动娱乐系统设计团队TGideas针对各类游戏的视觉包装设计所输出的适用性研究期刊，希望与大家分享相关经验，以及游戏类课题的交流。 本期作者：Ggao、Zaneye &#160; 1. 少些质感，多些版式 By Ggao 你是否有过，为越来越同质化的标题渐变，质感而苦恼吗？设计是否就是每天叠素材？随着越来越多平面韩国网页的出现，我们或许可以变个思路，少些质感，特效。多些设计感。 01.对于设计师 01-1 You can’t design without type You can’t design without type. 这是我很喜欢的一句话，设计应该设计什么？当没有光效质感，原画素材的时候。你怎么能快速么处理你的页面，让你的页面看起来还不错。 来一些文字的穿插组合，就可以。 如图: 01-2. 网页设计与平面设计没有不可逾越的鸿沟 上面的几个例子，可能你感觉过于平面。日常商业应用里可能不适合，但他们的精髓是一样的，优点是能被分析与复制的。我们来看些这类风格的活动页面。主要讲究的也是平面的点线面组合。 主要表现在文字大小的组合，粗细的对比，与整体页面划分的形式感上。 02.对于产品 只是设计师的个人小情结？强调版式与设计感能为我们的产品带来些什么？ 在充斥着金黄的大字渐变，火焰爆炸效果，红黄色背景的国内大环境下，这样强调页面版式与布局能带来些什么？ 02-1 让你的产品看上去更专业，国际化 我们对于所有产品的形容词总是大气，上流。但真正做到这一点的并不多，特别是当二者同时出现的时候，你能更明显的看出那个更专业，哪个更山寨。 如图:2-1 与 图2-2 02-2 更明确的主体，与可控的视觉焦点 同样是以上两个例子。图2-1有明确的视觉中心，几乎每个玩家打开网页后，都会被长条广告吸引。相比之下图2-2就是一盘散沙，广告位再多，也不知道重点。 02-3 相比质感流能有更稳定的品质保证与更少的修改成本 版式在页面多数以块来体现，没有很多效果，修改文字后，页面效果也不会受其影响，修改时间也很快。质感流，素材流就需要重新制作，花费时间长。对于紧急修改，时间的不到保证的情况下，质量也很难得到保证。 当然每个产品定位可能不一样，不存在绝对的好与坏。我们给出的更多是面对中高端，稳定且快速的一种视觉包装解决方案。 ——————————————————————————- 2. 专题的氛围是必须的 By Zaneye 曾几何时，自己苦思冥想自认为集艺术与创意于一体的作品出炉了，却被需求方一口否绝！其实很大的原因是因为我们的设计思路跟需求方的想法方向上是不一致的，没有表达出他们想要的意境，也就是所谓的活动气氛，人家要喜庆你搞个很有艺术感的大灰调，要么就是页面过于平淡，人家一再要求你放大标题字，放大人物，其实那是因为页面缺乏视觉冲击力，少了点气势，少了点氛围。有时可能你觉得自己做得非常不错，自我很欣赏，但做设计并不能像放屁，自己觉得很爽，却熏倒周围一大片。我们不能只做自己喜欢的设计，商业设计也不只是纯艺术！ &#62; 对于需求方一再强调的活动气氛，设计师应该如何去营造呢？ 1、有个明确的活动标题！ 沟通是必须的，了解并明确需求方的意图！确定主题方向，首先你得有个让玩家一眼就看得明白的大大的主题，千万别干把主题文字做得很小的事！可能你觉得那样看起来比较美观，但玩家看的挺揪心。 如上图所示，标题的凸显是一个活动专题页面的点睛之笔，一个有气势的标题能衬起整个专题的气氛，主标题一般都简短精辟，概括了整个活动的专题商业诉求。副标题一般是起解释说明的作用，描述该活动的利益点。所以在视觉处理上标题是要重点刻画的，将其拆分做一些形状、色彩、大小、字体、质感、排版的变化和突破是必不可少的。玩家善于扫描，且勤于扫描，却不勤于思考，且对小于24号的文字都是视而不见的。所以一定要让大标题吸引注玩家，让玩家感兴趣，才会去看那些小于24号的文字。 2、选用合适的素材及元素，点缀活动气氛 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://desicode.cn/?attachment_id=3375" rel="attachment wp-att-3375"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/ideas_02.jpg" alt="" width="650" height="278" /></a></p>
<p>《ideas》是腾讯互动娱乐系统设计团队TGideas针对各类游戏的视觉包装设计所输出的适用性研究期刊，希望与大家分享相关经验，以及游戏类课题的交流。<span id="more-275"></span></p>
<p>本期作者：Ggao、Zaneye</p>
<p>&nbsp;</p>
<h2>1. 少些质感，多些版式</h2>
<p>By Ggao</p>
<p>你是否有过，为越来越同质化的标题渐变，质感而苦恼吗？设计是否就是每天叠素材？随着越来越多平面韩国网页的出现，我们或许可以变个思路，少些质感，特效。多些设计感。</p>
<p><strong>01.对于设计师</strong></p>
<p><strong>01-1 You can’t design without type</strong></p>
<p><a href="http://desicode.cn/?attachment_id=3393" rel="attachment wp-att-3393"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/ggao_031.jpg" alt="" width="640" height="388" /></a></p>
<p>You can’t design without type. 这是我很喜欢的一句话，设计应该设计什么？当没有光效质感，原画素材的时候。你怎么能快速么处理你的页面，让你的页面看起来还不错。</p>
<p>来一些文字的穿插组合，就可以。</p>
<p>如图:</p>
<p><a href="http://desicode.cn/?attachment_id=3410" rel="attachment wp-att-3410"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/ggao_061.jpg" alt="" width="639" height="282" /></a></p>
<p><strong>01-2. 网页设计与平面设计没有不可逾越的鸿沟</strong></p>
<p>上面的几个例子，可能你感觉过于平面。日常商业应用里可能不适合，但他们的精髓是一样的，优点是能被分析与复制的。我们来看些这类风格的活动页面。主要讲究的也是平面的点线面组合。</p>
<p>主要表现在文字大小的组合，粗细的对比，与整体页面划分的形式感上。</p>
<p><a href="http://desicode.cn/?attachment_id=3411" rel="attachment wp-att-3411"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/ggao_081.jpg" alt="" width="639" height="674" /></a></p>
<p><a href="http://desicode.cn/?attachment_id=3412" rel="attachment wp-att-3412"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/ggao_101.jpg" alt="" width="639" height="713" /></a></p>
<p><a href="http://desicode.cn/?attachment_id=3413" rel="attachment wp-att-3413"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/ggao_121.jpg" alt="" width="639" height="546" /></a></p>
<p><strong>02.对于产品</strong></p>
<p><strong>只是设计师的个人小情结？强调版式与设计感能为我们的产品带来些什么？</strong></p>
<p>在充斥着金黄的大字渐变，火焰爆炸效果，红黄色背景的国内大环境下，这样强调页面版式与布局能带来些什么？</p>
<p><strong>02-1 让你的产品看上去更专业，国际化</strong></p>
<p>我们对于所有产品的形容词总是大气，上流。但真正做到这一点的并不多，特别是当二者同时出现的时候，你能更明显的看出那个更专业，哪个更山寨。</p>
<p>如图:2-1 与 图2-2</p>
<p><a href="http://desicode.cn/?attachment_id=3414" rel="attachment wp-att-3414"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/ggao_141.jpg" alt="" width="639" height="534" /></a></p>
<p><a href="http://desicode.cn/?attachment_id=3438" rel="attachment wp-att-3438"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/ggao_162.jpg" alt="" width="639" height="454" /></a></p>
<p><strong>02-2 更明确的主体，与可控的视觉焦点</strong></p>
<p>同样是以上两个例子。图2-1有明确的视觉中心，几乎每个玩家打开网页后，都会被长条广告吸引。相比之下图2-2就是一盘散沙，广告位再多，也不知道重点。</p>
<p><strong>02-3 相比质感流能有更稳定的品质保证与更少的修改成本</strong></p>
<p>版式在页面多数以块来体现，没有很多效果，修改文字后，页面效果也不会受其影响，修改时间也很快。质感流，素材流就需要重新制作，花费时间长。对于紧急修改，时间的不到保证的情况下，质量也很难得到保证。</p>
<p>当然每个产品定位可能不一样，不存在绝对的好与坏。我们给出的更多是面对中高端，稳定且快速的一种视觉包装解决方案。</p>
<p>——————————————————————————-</p>
<h2>2. 专题的氛围是必须的</h2>
<p>By Zaneye</p>
<p><a href="http://desicode.cn/?attachment_id=3420" rel="attachment wp-att-3420"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/zane_03.jpg" alt="" width="640" height="243" /></a></p>
<p>曾几何时，自己苦思冥想自认为集艺术与创意于一体的作品出炉了，却被需求方一口否绝！其实很大的原因是因为我们的设计思路跟需求方的想法方向上是不一致的，没有表达出他们想要的意境，也就是所谓的活动气氛，人家要喜庆你搞个很有艺术感的大灰调，要么就是页面过于平淡，人家一再要求你放大标题字，放大人物，其实那是因为页面缺乏视觉冲击力，少了点气势，少了点氛围。有时可能你觉得自己做得非常不错，自我很欣赏，但做设计并不能像放屁，自己觉得很爽，却熏倒周围一大片。我们不能只做自己喜欢的设计，商业设计也不只是纯艺术！</p>
<p><strong>&gt; 对于需求方一再强调的活动气氛，设计师应该如何去营造呢？</strong></p>
<p><strong>1、有个明确的活动标题！</strong></p>
<p>沟通是必须的，了解并明确需求方的意图！确定主题方向，首先你得有个让玩家一眼就看得明白的大大的主题，千万别干把主题文字做得很小的事！可能你觉得那样看起来比较美观，但玩家看的挺揪心。</p>
<p><a href="http://desicode.cn/?attachment_id=3421" rel="attachment wp-att-3421"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/zane_06.jpg" alt="" width="640" height="513" /></a></p>
<p>如上图所示，标题的凸显是一个活动专题页面的点睛之笔，一个有气势的标题能衬起整个专题的气氛，主标题一般都简短精辟，概括了整个活动的专题商业诉求。副标题一般是起解释说明的作用，描述该活动的利益点。所以在视觉处理上标题是要重点刻画的，将其拆分做一些形状、色彩、大小、字体、质感、排版的变化和突破是必不可少的。玩家善于扫描，且勤于扫描，却不勤于思考，且对小于24号的文字都是视而不见的。所以一定要让大标题吸引注玩家，让玩家感兴趣，才会去看那些小于24号的文字。</p>
<p><strong>2、选用合适的素材及元素，点缀活动气氛</strong></p>
<p>节日要有节日的元素，比赛要有比赛的元素。圆形和其它几何图形比较，具有圆滑的特点，让人感觉轻松、愉悦，合理的运用会提高页面的层次，让焦点更加突出，增强视觉感的同时也能够营造活跃的氛围。但记得要使用加减法，不能乱堆一通，点到为止即可。</p>
<p><a href="http://desicode.cn/?attachment_id=3422" rel="attachment wp-att-3422"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/zane_08.jpg" alt="" width="640" height="364" /></a></p>
<p><a href="http://desicode.cn/?attachment_id=3423" rel="attachment wp-att-3423"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/zane_10.jpg" alt="" width="640" height="385" /></a></p>
<p>上面<strong>图1</strong>只是用了冠军杯作为主要元素去营造一种比赛气氛，素材并不新颖，但出来的效果却令人相当震撼。<strong>图2</strong>的素材是非常给力，所以营造的那种周年庆的气氛也十分犀利。玩家可能不用看文字就能明白这两个页面是干嘛的。毕竟图形比文字能更快速更有效的传达信息。</p>
<p><strong>3、用合理的色调营造意境，设计有灵魂的作品</strong></p>
<p>通俗点地说就是该喜庆的得喜庆，该火爆的还是得火爆，但这火候是掌在设计师手中的，当需求方给了个很山寨很暴力的页面给你参考时，你得明白，这是他想要的气氛，但不一定是他想要的画面，我们是设计师，不是美工，美工与设计师的区别其实跟裁缝与服装设计师的区别是一样一样的，这个你懂的。</p>
<p>何谓有灵魂的作品，请看下面几个作品：</p>
<p><a href="http://desicode.cn/?attachment_id=3424" rel="attachment wp-att-3424"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/zane_12.jpg" alt="" width="640" height="385" /></a></p>
<p><a href="http://desicode.cn/?attachment_id=3425" rel="attachment wp-att-3425"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/zane_14.jpg" alt="" width="640" height="385" /></a></p>
<p><a href="http://desicode.cn/?attachment_id=3426" rel="attachment wp-att-3426"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/zane_16.jpg" alt="" width="640" height="385" /></a></p>
<p>非常简单的素材，却营造出了扣人心弦的气氛，就像画面里有个故事，有个影像，让玩家如同身临其境，陷入其中，完全抓住了玩家的眼球。其实这些作品无非是找到适合的元素，辅以合理统一的色调，运用眩光/实体/手绘/虚幻空间/平面构成等表现手法给玩家设计一个完美的陷阱，套住他们的心。</p>
<p><strong>&gt; 营造专题活动气氛并不只是“火/爆/热”</strong></p>
<p>这种过火过爆过热的专题活动，不仅会让玩家感到不适，还会使游戏的品牌形象受损。</p>
<p>下面我们看一组对比：</p>
<p><a href="http://desicode.cn/?attachment_id=3439" rel="attachment wp-att-3439"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/zane_181.jpg" alt="" width="640" height="161" /></a></p>
<p><a href="http://desicode.cn/?attachment_id=3440" rel="attachment wp-att-3440"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/zane_201.jpg" alt="" width="640" height="183" /></a></p>
<p><a href="http://desicode.cn/?attachment_id=3441" rel="attachment wp-att-3441"><img src="http://tgideas.qq.com/wp-content/uploads/2011/07/zane_221.jpg" alt="" width="640" height="183" /></a></p>
<p>通过对比，左边的专题页面总让人感觉少了些什么。那便是气势和气氛。</p>
<p>也许有点气氛却总让人想起街边小广告，简陋，设计缺少一些思考，缺少一些灵魂，像是拼图式的设计。气氛并不是你堆一堆东西上去就叫有气氛的，抛开可用性、易用性、识别性、安全性等不管，单是美观上就有些欠佳。游戏专题/线上活动可以说是游戏品牌推广最常见的手段，如何去了解并掌握用户心理，继而设计出紧扣玩家心弦的专题，即是我们一直在追求的。</p>
]]></content:encoded>
			<wfw:commentRss>http://desicode.cn/design/2011/07/05/275/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>8个神奇的网页动态流体布局及其做法揭秘</title>
		<link>http://desicode.cn/code/2011/07/04/273/</link>
		<comments>http://desicode.cn/code/2011/07/04/273/#comments</comments>
		<pubDate>Mon, 04 Jul 2011 03:30:25 +0000</pubDate>
		<dc:creator>Wag Jie</dc:creator>
				<category><![CDATA[代码|Code]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[流体布局]]></category>
		<category><![CDATA[网页布局]]></category>
		<category><![CDATA[网页设计]]></category>

		<guid isPermaLink="false">http://desicode.cn/?p=273</guid>
		<description><![CDATA[最近，有一种新的网页布局 ——动态流体布局，很让我感到兴趣。它巧妙地重排元素，并填补了网页的所有空间，而在每个浏览器上显示效果都十分出色，而且通常配以流畅的动画效果。其中有些甚至针对不同类别有不同效果. 这样的网站我找到了8个，他们都有相同的特征。在文章末尾列举了3个JQuery插件, 可以很方便的帮助你达到这些效果。 &#160; 展示 Gimme BarMKSD ArchitectsMarken FilmCascade Brewery CoPixillionSwintonDynamitPinterest 怎么实现 好了，也许你已经迫不及待想知道怎么实现了。多亏了这三个插件，一切垂手可得。 jQuery Masonry 一个JQuery动态布局插件,CSS侧边浮动。Isotope一个可以神奇布局的JQuery精美插件。QuickSand可以重排和过滤，带有滑动动画效果。 &#160; 转载：http://www.alibuybuy.com/posts/61706.html]]></description>
			<content:encoded><![CDATA[<p>最近，有一种新的网页布局 ——动态流体布局，很让我感到兴趣。它巧妙地重排元素，并填补了网页的所有空间，而在每个浏览器上显示效果都十分出色，而且通常配以流畅的动画效果。其中有些甚至针对不同类别有不同效果.</p>
<p>这样的网站我找到了8个，他们都有相同的特征。在文章末尾列举了3个JQuery插件, 可以很方便的帮助你达到这些效果。</p>
<p>&nbsp;</p>
<h2>展示</h2>
<p><a href="https://gimmebar.com/user/cameron">Gimme Bar</a><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/07/8a8e_1.jpg" alt="" /><span id="more-273"></span><a href="http://www.mksdarchitects.com/?cbg_tz=-600">MKSD Architects</a><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/07/0044_2.jpg" alt="" /><a href="http://markenfilm.com/en/news.html">Marken Film</a><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/07/d393_3.jpg" alt="" /><a href="http://www.cascadebreweryco.com.au/">Cascade Brewery Co</a><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/07/0efa_4.jpg" alt="" /><a href="http://www.pixillion.com/">Pixillion</a><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/07/deee_5.jpg" alt="" /><a href="http://www.swinton.me/">Swinton</a><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/07/5577_6.jpg" alt="" /><a href="http://www.dynamit.us/">Dynamit</a><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/07/0fc1_7.jpg" alt="" /><a href="http://pinterest.com/">Pinterest</a><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/07/2c31_8.jpg" alt="" /></p>
<h2>怎么实现</h2>
<p>好了，也许你已经迫不及待想知道怎么实现了。多亏了这三个插件，一切垂手可得。</p>
<p><a href="http://masonry.desandro.com/?resources/jquery-masonry">jQuery Masonry</a></p>
<p><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/07/05f9_10.jpg" alt="" />一个JQuery动态布局插件,CSS侧边浮动。<a href="http://isotope.metafizzy.co/">Isotope</a><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/07/83f6_9.jpg" alt="" />一个可以神奇布局的JQuery精美插件。<a href="http://razorjack.net/quicksand/">QuickSand</a><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/07/680a_11.jpg" alt="" />可以重排和过滤，带有滑动动画效果。</p>
<p>&nbsp;</p>
<p>转载：http://www.alibuybuy.com/posts/61706.html</p>
]]></content:encoded>
			<wfw:commentRss>http://desicode.cn/code/2011/07/04/273/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>给设计师的礼物，20个顶级的UI控件库</title>
		<link>http://desicode.cn/design/2011/06/27/268/</link>
		<comments>http://desicode.cn/design/2011/06/27/268/#comments</comments>
		<pubDate>Mon, 27 Jun 2011 06:26:49 +0000</pubDate>
		<dc:creator>Wag Jie</dc:creator>
				<category><![CDATA[设计|Design]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UI控件库]]></category>
		<category><![CDATA[设计]]></category>
		<category><![CDATA[设计师]]></category>

		<guid isPermaLink="false">http://desicode.cn/?p=268</guid>
		<description><![CDATA[转载：http://www.uleadesign.com/index.php/archives/3380   作者 yash 今天我们给网页设计师们带来了一个礼物，精心挑选的20个的网页UI控件库，大家可以把这些设计元素放在自己的项目，你也可以发挥再改造，不用担心都是免费的哦~赶紧抱走~（点图片链接到原站下载） Got Wood UI Design Elements by Tony Thomas UI Kit by Raj Ramamurthy Black UI Kit by Alex Patrascu Moonify UI by jlofstedt Black UI Kit by Jonathan Moreira Fuel UI Design Kit by Jeff Olson Snow Modern UI Kit by MediaLoot Web Elements by Dillen Verschoor Dark UI Element Set [...]]]></description>
			<content:encoded><![CDATA[<p>转载：http://www.uleadesign.com/index.php/archives/3380   作者 yash</p>
<p>今天我们给网页设计师们带来了一个礼物，精心挑选的20个的网页UI控件库，大家可以把这些设计元素放在自己的项目，你也可以发挥再改造，不用担心都是免费的哦~赶紧抱走~（点图片链接到原站下载）</p>
<p>Got Wood UI Design Elements by Tony Thomas</p>
<p><a href="http://medialoot.com/item/got-wood-ui-design-elements/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit20.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="297" /></a></p>
<p><span id="more-268"></span>UI Kit by Raj Ramamurthy<br />
<a href="http://dribbble.com/shots/107090-UI-Kit#comment-282123" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit1.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="400" height="300" /></a></p>
<p>Black UI Kit by Alex Patrascu</p>
<p><a href="http://www.designkindle.com/2011/05/09/black-ui-kit/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit2.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="475" /></a></p>
<p>Moonify UI by jlofstedt</p>
<p><a href="http://365psd.com/day/2-63/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit3.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="400" /></a></p>
<p>Black UI Kit by Jonathan Moreira</p>
<p><a href="http://dribbble.com/shots/156769-Black-UI-Kit-free" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit4.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="400" height="300" /></a></p>
<p>Fuel UI Design Kit by Jeff Olson</p>
<p><a href="http://www.fuelyourinterface.com/free-web-ui-wireframe-kit/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit5.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="464" height="462" /></a></p>
<p>Snow Modern UI Kit by MediaLoot</p>
<p><a href="http://spyrestudios.com/freebies/snow-modern-ui-kit/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit6.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="442" height="478" /></a></p>
<p>Web Elements by Dillen Verschoor</p>
<p><a href="http://designmoo.com/3301/web-elements/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit7.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="229" /></a></p>
<p>Dark UI Element Set by Ryan Forgan</p>
<p><a href="http://pixelsdaily.com/resources/photoshop/psds/psd-dark-ui-element-set/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit8.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="718" /></a></p>
<p>Sepia GUI Elements by takuji ikeda</p>
<p><a href="http://365psd.com/day/2-26/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit9.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="185" /></a></p>
<p>Light UI PSD by Matt Wadsworth</p>
<p><a href="http://dribbble.com/shots/125984-Light-UI-PSD?offset=23" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/Light_UI.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="294" /></a></p>
<p>Simple UI Elements by Adrian Pelletier</p>
<p><a href="http://www.designkindle.com/2011/01/19/simple-ui-elements/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit10.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="522" /></a></p>
<p>Spring GUI by Jon Ovander</p>
<p><a href="http://designmoo.com/3966/spring-gui/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit11.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="400" height="300" /></a></p>
<p>E-Commerce Steps UI by Mateusz Dembek</p>
<p><a href="http://pixelsdaily.com/resources/photoshop/psds/e-commerce-steps-ui/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit12.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="254" /></a></p>
<p>Web Kit Interface Layout Pack by Gianluca Giacoppo – Comes in 6 colors (blue, yellow, gray, green, red and purple)</p>
<p><a href="http://giallo86.deviantart.com/art/Web-kit-interface-layout-pack-181748544" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit13.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="463" /></a></p>
<p>Modern Web UI Set by Dimi Arhontidis</p>
<p><a href="http://feedgrids.com/originals/post/freebie_modern_web_ui_set/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit14.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="532" /></a></p>
<p>Soft UI Kit by Design Kindle</p>
<p><a href="http://sixrevisions.com/freebies/web-page-templates/soft-ui-kit/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit16.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="363" /></a></p>
<p>UI Kit by Dany Duchaine</p>
<p><a href="http://dribbble.com/shots/172046-DDFreebie-UI-Kit" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit17.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="375" /></a></p>
<p>Big Block UI by Adrian Pelletier</p>
<p><a href="http://www.designkindle.com/2010/09/01/big-block-ui/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit18.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="475" /></a></p>
<p>A Hand Coded Designer CSS UI Kit – Another CSS kit using HTML5 and CSS3</p>
<p><a href="http://medialoot.com/blog/a-hand-coded-designer-css-ui-kit/" target="_blank"><img title="uleadesign 给设计师的礼物，20个顶级的UI控件库" src="http://www.noupe.com/wp-content/uploads/2011/06/uikit19.jpg" alt="uleadesign 给设计师的礼物，20个顶级的UI控件库" width="500" height="265" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://desicode.cn/design/2011/06/27/268/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>社会化电子商务：社会化购物心理漫谈</title>
		<link>http://desicode.cn/share/2011/06/27/264/</link>
		<comments>http://desicode.cn/share/2011/06/27/264/#comments</comments>
		<pubDate>Mon, 27 Jun 2011 03:18:16 +0000</pubDate>
		<dc:creator>Wag Jie</dc:creator>
				<category><![CDATA[分享|Share]]></category>
		<category><![CDATA[电子商务]]></category>
		<category><![CDATA[社会化电子商务]]></category>
		<category><![CDATA[社会化购物]]></category>
		<category><![CDATA[购物心理]]></category>

		<guid isPermaLink="false">http://desicode.cn/?p=264</guid>
		<description><![CDATA[这是一篇转载的文章，原因是看到Socialcommercetoday.com上面一篇关于社会化购物方面的文章，分析了社会化购物心理以及社会化购物的工作原理，本来想自己翻译一下，不过搜索了一下，有人已经翻译了，和大家分享，非常好的一篇文章。 社会化电子商务定义：在电子商务环境下使用支持社会化交互和用户贡献的社会化媒体、网络媒体来帮助商品或服务的网上销售和购买。（Wiki:Social Commerce） 作为一个社会心理学家，我对社会化电子商务如何工作非常感兴趣。不是出于学术的原因，而是为了一个单纯、实际的理由。商业广告能够帮助人们将他们的 购物地点联系起来，并促使他们去那些地方购物。理解了这些，自然会赋予商业以策略优势，正如所设想的，仅仅作为一把利器，社会化电子商务就提供了一个机会 ——收获一个强有力的洞察力驱动的社会化电子商务策略带来的丰厚回报。 开门见山，我认为，对于社会化电子商务如何工作，基于心理预期的理解是它指明了六种有效的社会化电子商务策略的可能性。 显而易见，社会化电子商务使商业广告更加有效，因为从市场营销角度通过解决人们的需求获利的方面讲，它是一种很好的市场营销策略。通过有用的工具为 网上购物者们提供更好更优惠的选择，社会化电子商务自然帮助购物者做出明智、理性的购物消费。而且这样做，零售商们能够给予那些低于期望的购物者群体更牢 固的购物忠诚度和极佳的口碑。 第二个明显的理由是社会化电子商务允许品牌商和零售商们能够对症下药——在当今时代这就意味着一个社会化媒体平台。社会化电子商务解决方案因此是一 个获取人气和市场影响力的有效途径。而且使用得当，甚至会汇聚电子商务或网上购买的巨大潜力客户群体。例如，现在做虚拟的弹出式电子零售、推销是可能的， 而且会催生实体活动商店，协同市场推广活动获取更大的利润。 第三且更有利的原因是不言而喻的。它是基于社会化购物心理。下面的总结而来就是如果使用得当的，社会化购物工具，能够推动社会化影响力的进程，当我们购物时会在无形中提升购买的可能性。 社会化购物心理 某种浅层次上讲，社会化购物心理很简单；社会化购物充分利用了人们对于社会化学习的能力——向我们认识或信任的一些人讨教经验和门道。社会化学习的 能力是社会智能的一部分，强调互相学习并能够从社会化环境中获利的能力。但是，社会化购物工具也会通过影响人们购物时潜在的认知偏见，在更基础的层次上起 作用。 简言之，作为探究人们如何思考并相互联系、影响的心理学分支，社会化心理学已经发现：外出购物时，人们总会关注一些“琐碎”的事情，这类似于一种启 发式的思维方式——人们往往忽略了一些易于获取的信息，而通过一些零星的社会化性质的信息以及一些简单、感性的规律、认识去做出决定。心理学家们已经总结 出了六种通用的人们用于获取“琐碎信息”的启发法。社会化购物工具往往很强大，因为他们更有可能运用这些启发法来做出相关决定。 注：下述的方法和法则其实是对发表在《哈佛商业评论》杂志上的一篇论文的概述和提炼，如果有兴趣的朋友，可以下载原文通读一下，可能会有更多的感悟。猛击一下—-相似文章 启发法一：社会化证明原则 法则：从众 如何起作用：为了规避购物中的不确定因素，我们常常会参考别人的购物体验。当某件东西很畅销或占据市场统治地位时，我们会本能地把它当作社会化的证明，这种是一个正确、有效的选择——这是一种不容忽视的力量。 经典案例：42区实验（1969）。在42街区，一个过路者被拦下来仰望天空六十秒。其他的路人并没有在意。但是当有15个路人被拦下做同样一件事情的时候，40%的路人注意到并也停下来抬头看了看。 经典的市场应用：借助销售排行榜将一个品牌与最畅销、市场领军品牌、增速最快等等联系起来了。 社会化电子商务应用： 购物列表 例如最希望的购物清单或礼品清单可以说明哪些是消费者最想要的——Amazon, Best Buy, Kaboodle, StyleFeeder, ThisNext. 畅销列表 允许购买者浏览最畅销、最多浏览、最受喜爱、最多评论的数据，说明购买哪些商品是最明智的。——Amazon, Apple (iTunes). 分享你的故事 用于分享消费者购买经历的工具从人们兴趣角度提供了社会化佐证——James Avery Jewellery 社会化媒体评论 来自与其他购买者所提供的对于产品或服务质量的可信评价——Amazon, Apple, WineLibrary, Zappos 社会化推荐系统 通过对相似消费群体的挖掘提供个人推荐的工具——Netflix, Apple (Genius), Stylefeeder, Honk User [...]]]></description>
			<content:encoded><![CDATA[<p>这是一篇转载的文章，原因是看到Socialcommercetoday.com上面一篇关于社会化购物方面的文章，分析了社会化购物心理以及社会化购物的工作原理，本来想自己翻译一下，不过搜索了一下，有人已经翻译了，和大家分享，非常好的一篇文章。</p>
<p>社会化电子商务定义：在电子商务环境下使用支持社会化交互和用户贡献的社会化媒体、网络媒体来帮助商品或服务的网上销售和购买。（Wiki:<a title="维基百科" href="http://en.wikipedia.org/wiki/Social_commerce" target="_blank">Social Commerce</a>）</p>
<p><img src="http://alibuybuy-img11.stor.sinaapp.com/2011/06/bcd1_medium.jpg" alt="" /></p>
<p>作为一个社会心理学家，我对社会化电子商务如何工作非常感兴趣。不是出于学术的原因，而是为了一个单纯、实际的理由。商业广告能够帮助人们将他们的 购物地点联系起来，并促使他们去那些地方购物。理解了这些，自然会赋予商业以策略优势，正如所设想的，仅仅作为一把利器，社会化电子商务就提供了一个机会 ——收获一个强有力的洞察力驱动的社会化电子商务策略带来的丰厚回报。</p>
<p>开门见山，我认为，对于社会化电子商务如何工作，基于心理预期的理解是它指明了六种有效的社会化电子商务策略的可能性。<span id="more-264"></span></p>
<p>显而易见，社会化电子商务使商业广告更加有效，因为从市场营销角度通过解决人们的需求获利的方面讲，它是一种很好的市场营销策略。通过有用的工具为 网上购物者们提供更好更优惠的选择，社会化电子商务自然帮助购物者做出明智、理性的购物消费。而且这样做，零售商们能够给予那些低于期望的购物者群体更牢 固的购物忠诚度和极佳的口碑。</p>
<p>第二个明显的理由是社会化电子商务允许品牌商和零售商们能够对症下药——在当今时代这就意味着一个社会化媒体平台。社会化电子商务解决方案因此是一 个获取人气和市场影响力的有效途径。而且使用得当，甚至会汇聚电子商务或网上购买的巨大潜力客户群体。例如，现在做虚拟的弹出式电子零售、推销是可能的， 而且会催生实体活动商店，协同市场推广活动获取更大的利润。</p>
<p>第三且更有利的原因是不言而喻的。它是基于社会化购物心理。下面的总结而来就是如果使用得当的，社会化购物工具，能够推动社会化影响力的进程，当我们购物时会在无形中提升购买的可能性。</p>
<h2>社会化购物心理</h2>
<p>某种浅层次上讲，社会化购物心理很简单；社会化购物充分利用了人们对于社会化学习的能力——向我们认识或信任的一些人讨教经验和门道。社会化学习的 能力是社会智能的一部分，强调互相学习并能够从社会化环境中获利的能力。但是，社会化购物工具也会通过影响人们购物时潜在的认知偏见，在更基础的层次上起 作用。</p>
<p>简言之，作为探究人们如何思考并相互联系、影响的心理学分支，社会化心理学已经发现：外出购物时，人们总会关注一些“琐碎”的事情，这类似于一种启 发式的思维方式——人们往往忽略了一些易于获取的信息，而通过一些零星的社会化性质的信息以及一些简单、感性的规律、认识去做出决定。心理学家们已经总结 出了六种通用的人们用于获取“琐碎信息”的启发法。社会化购物工具往往很强大，因为他们更有可能运用这些启发法来做出相关决定。</p>
<p><strong>注：下述的方法和法则其实是对发表在《哈佛商业评论》杂志上的一篇论文的概述和提炼，如果有兴趣的朋友，可以下载原文通读一下，可能会有更多的感悟。<a title="论文" href="http://www.socialcommercetoday.com/downloads/CialdiniHBR.pdf" target="_blank">猛击一下</a>—-<a href="http://www.socialcommercetoday.com/downloads/CialdiniSciAmerican.pdf" target="_blank">相似文章</a></strong></p>
<h3>启发法一：社会化证明原则<br />
法则：从众</h3>
<p><strong>如何起作用：</strong>为了规避购物中的不确定因素，我们常常会参考别人的购物体验。当某件东西很畅销或占据市场统治地位时，我们会本能地把它当作社会化的证明，这种是一个正确、有效的选择——这是一种不容忽视的力量。<br />
经典案例：42区实验（1969）。在42街区，一个过路者被拦下来仰望天空六十秒。其他的路人并没有在意。但是当有15个路人被拦下做同样一件事情的时候，40%的路人注意到并也停下来抬头看了看。</p>
<p><strong>经典的市场应用：</strong>借助销售排行榜将一个品牌与最畅销、市场领军品牌、增速最快等等联系起来了。</p>
<p><strong>社会化电子商务应用：</strong></p>
<ul>
<li><strong>购物列表 </strong>例如最希望的购物清单或礼品清单可以说明哪些是消费者最想要的——Amazon, Best Buy, Kaboodle, StyleFeeder, ThisNext.</li>
<li><strong>畅销列表</strong> 允许购买者浏览最畅销、最多浏览、最受喜爱、最多评论的数据，说明购买哪些商品是最明智的。——Amazon, Apple (iTunes).</li>
<li><strong>分享你的故事</strong> 用于分享消费者购买经历的工具从人们兴趣角度提供了社会化佐证——James Avery Jewellery</li>
<li><strong>社会化媒体评论</strong> 来自与其他购买者所提供的对于产品或服务质量的可信评价——Amazon, Apple, WineLibrary, Zappos</li>
<li><strong>社会化推荐系统</strong> 通过对相似消费群体的挖掘提供个人推荐的工具——Netflix, Apple (Genius), Stylefeeder, Honk User Galleries, Burburry (in the trenches)</li>
</ul>
<h3>启发法二：影响力原则<br />
法则：追随有影响力的人</h3>
<p><strong>如何奏效：</strong>人们总有一种很自然的倾向：总相信专家或权威人士的评论，无论他们说什么。这些专家以他们的学识、经历和专业性，省去了我们很多考虑的时间和精力。</p>
<p><strong>经典案例：Shockbox实验</strong>（<a href="http://en.wikipedia.org/wiki/Milgram_experiment">http://en.wikipedia.org/wiki/Milgram_experiment</a>）</p>
<p><strong>经典的市场应用：</strong>广告中总会出现权威医生重点推荐（通常让演员穿着白大褂，与某个权威人士相联系）<br />
社会化电子商务应用：</p>
<ul>
<li><strong>推荐计划</strong> 通过购物者信任的人们进行相关推荐——Amazon Affiliates, Gilt, VanRosen, Rue La La, Ideeli, Vente-Privée, Sky invite-a-friend</li>
<li><strong>社会化媒体评论</strong> 通过具有权威性质的专业评论者（博客评论、网络杂志评论、YouTube评论）和真实的消费者，赋予人民的声音以权威——Amazon Affiliates, Gilt, VanRosen, Rue La La, Ideeli, Vente-Privée, Sky invite-a-friend</li>
</ul>
<h3>启发法三：稀缺原则<br />
法则：稀缺的东西往往是好东西</h3>
<p><strong>如何起作用：</strong>我们总有一种固化的思想去评价稀缺资源，我们直截了当地认为很少获得的机会往往具有更大的价值——出于对可能失去的害怕</p>
<p><strong>经典实验：</strong><strong>甜饼罐（Cookie Jar）实验（1975</strong>）—— 实验参与者对巧克力曲奇饼进行评级。实验者将十个曲奇饼放到了一个罐中，将两个一样大小的放置到另外一个罐中。实验结果显示：含有两个曲奇饼的罐获得了更高的评价，即使两个罐子中的曲奇饼是一样的。</p>
<p><strong>经典市场应用：</strong>限量机会，限量提供，限量可获得性，限量版本，基于时间的促销</p>
<p><strong>社会化电子商务应用：</strong></p>
<ul>
<li><strong>商品交易手册</strong> 列出独家的有限时间促销（倒计时形式），而往往大家都知道——Deals.Woot, JustBoughtIt, Ikea</li>
<li><strong>促销订阅</strong> 获得那些大多数人不了解的独家促销——Dell, Amazon, Carrefour</li>
<li><strong>团购</strong> 允许购买者成为一个大交易中的一分子的工具——Dell, Adidas, Groupon, Intel (FanPlan)</li>
<li><strong>新闻推送</strong> 提供欲购从速的特讯来分享、传播—— Best Buy, NorthFace, Nokia (WoM World)</li>
<li><strong>推荐计划</strong> 针对私人购物——Amazon Affiliates, Gilt, VanRosen, Rue La La, Ideeli, Vente-Privée, Sky invite-a-friend</li>
<li><strong>社交化网络店面</strong> 针对社交化网络用户的独有优惠促销、商品——Best Buy, 1-800 Flowers, Reebok, Carrefour (FaceShopping)</li>
</ul>
<h3>启发法四：喜好原则<br />
法则：追随你喜欢的</h3>
<p><strong>如何起作用：</strong>我们有一种自然的倾向：具有相同兴趣爱好的人相互具有认同感，一部分是因为它建立在社会纽带和信任上，一部分是因为它是印象的一部分——通过联系来组织脑海中的影响和认知</p>
<p><strong>经典案例：尼克松—肯尼迪辩论（1960）. </strong>收音机听众和电视观众被邀请对两个总统候选人在直播辩论中的表现打分。收音机听众对尼克松的表现评价较高，而电视观众却相反。为什么会产生差异呢？肯尼迪更具亲和力、吸引力同时也是一个新面孔。相反，尼克松略显憔悴、胡须满面、满脸是汗。</p>
<p><strong>经典市场应用：</strong>网络市场，广告市场的用户意象，性用品市场销售</p>
<p><strong>社会化电子商务应用：</strong></p>
<ul>
<li><strong>问问你的社交化网络：</strong>来自购物者社交圈的实时推荐和感想——Charlotte Russe, Mattel, Jansport</li>
<li><strong>促销推送：</strong>分享、传播来自相同喜好的品牌购买者的促销——Dell, Amazon, Carrefour</li>
<li><strong>新闻推送：</strong>关注、分享、传播一些相同喜好的品牌购买者的社交媒体新闻（Twitter,YouTube,Facebook,RSS）——Best Buy, NorthFace, Nokia (WoM World)</li>
<li><strong>选择列表</strong>——Amazon, Best Buy, Kaboodle, StyleFeeder, ThisNext</li>
<li><strong>推荐计划</strong> 针对私人购物——Amazon Affiliates, Gilt, VanRosen, Rue La La, Ideeli, Vente-Privée, Sky invite-a-friend</li>
<li><strong>分享你的社交化网络</strong> 允许购物者分享自身的经历和发现给同类的社交化群体—— Kaboodle, StyleFeeder</li>
<li><strong>一起购物</strong> 寻求团结的力量——Charlotte Russe, Mattel, Jansport</li>
<li><strong>社交化网络店面</strong>——Best Buy, 1-800 Flowers, Reebok, Carrefour</li>
</ul>
<h3>启发法五：一致性原则<br />
法则：寻求一致</h3>
<p><strong>如何起作用：</strong>面对不确定性，我们往往会选择与自身观感和过去行为一致的那个商品。当我们的看法和行为无法匹配上，即认知不一致，我们心理总会感到不安。尤其是我们做出了一些面向公众的积极、自愿的承诺。</p>
<p><strong>经典实验：</strong><a href="http://osil.psy.ua.edu:16080/~Rosanna/Soc_Inf/week11/freedman&amp;fraser.pdf" target="_blank">露天大广告牌（1966）</a>（详细内容可以参阅相关的文档）</p>
<p><strong>经典市场应用：</strong>生命周期广告、免费试用、免费会员注册计划……</p>
<p><strong>社会化电子商务案例：</strong></p>
<ul>
<li><strong>问问你的社会化网络</strong>——Charlotte Russe, Mattel, Jansport</li>
<li><strong>社会化游戏</strong>——Levi’s</li>
<li><strong>选择列表</strong>： Amazon, Best Buy, Kaboodle, StyleFeeder, ThisNext</li>
<li><strong>社会化网络分享</strong> ——Kaboodle, StyleFeeder.</li>
<li><strong>一起买</strong>——Charlotte Russe, Mattel, Jansport</li>
<li><strong>社会化媒体娱乐</strong>——Blendtec</li>
<li><strong>社会化媒体倾听</strong>——Dell, Starbucks, Simple, eBay</li>
<li><strong>社会化媒体评论</strong>——Amazon, Apple, WineLibrary, Zappos.</li>
<li><strong>社会化媒体服务</strong>——Best Buy, Nike+</li>
<li><strong>社会化推荐系统</strong>——Netflix, Apple (Genius), Stylefeeder, Honk</li>
<li><strong>用户论坛</strong>——Apple, eBay.</li>
<li><strong>用户Gallery展示</strong>——Burburry.</li>
</ul>
<h3>启发法六：互惠原则<br />
法则：回报消费者的肯定</h3>
<p><strong>如何起作用：</strong>无论那些认同者是否是被 邀请，我们都渴望去回报他们。当我们答谢这些支持者时，我们都觉得很好，不仅是因为我们固有的公正和社会化的契约，而且互惠主义是大家所褒奖的，因为这是 一个社会的粘合剂，使得合作、关系、社区和社会成为可能。现在你会恍然大悟当你收到了一张季度贺卡，而这张贺卡是某人寄给一个你未曾联系的人时，为什么会 感到很糟糕。</p>
<p><strong>经典实验：可乐和彩券（1971）。</strong>实验者们假装艺术学生参加到一个艺术博物观光团，发现了一个很有趣的现象：如果在参观过程中对其他成员给予一定的帮助，即使哪怕是一瓶可乐，在参观结束时，他们会卖出相当可观的学生彩券给那些随行的成员。尽管没有事先要一瓶可乐，他们也会觉得回报别人的帮助是必须的。</p>
<p><strong>社会化电子商务应用及案例：</strong></p>
<ul>
<li><strong>促销信息推送</strong>：Dell, Amazon, Carrefour</li>
<li><strong>团购：</strong> Dell, Adidas, Groupon, Intel (FanPlan)</li>
<li><strong>推荐计划</strong>：Amazon Affiliates, Gilt, VanRosen, Rue La La, Ideeli, Vente-Privée, Sky</li>
<li><strong>社会化媒体娱乐</strong>：Blendtec</li>
<li><strong>社会化媒体倾听：</strong>Dell, Starbucks, Simple, eBay</li>
<li><strong>社会化媒体服务：</strong>Best Buy Nike+</li>
<li><strong>用户论坛</strong>：Apple, eBay</li>
</ul>
<h2>六种社会化电子商务策略</h2>
<p>透过社会心理层面观察社会化电子商务的实用工具就是提供给品牌商和零售商们以策略化的方法来角力社会化电子商务。并非简单地运用工具，六种社会化影 响启发法为直接以购买者为中心的社会化电子商务策略提供了一个很好的框架。基于这种框架，采用适当的工具和更广泛的市场营销策略，可以为电子商务注入新的 活力。</p>
<p>1.	The Social Proof Strategy<br />
2.	The Authority Strategy<br />
3.	The Scarcity Strategy<br />
4.	The Liking Strategy<br />
5.	The Consistency Strategy<br />
6.	The Reciprocity Strategy</p>
<p><a href="http://alibuybuy-img11.stor.sinaapp.com/2011/06/dc1a_fIGXf.jpg"><img title="social_commerce_strategies" src="http://alibuybuy-img11.stor.sinaapp.com/2011/06/dc1a_fIGXf.jpg" alt="" width="460" height="605" /></a></p>
<p><strong>英文原文：</strong><strong><a href="http://socialcommercetoday.com/how-social-commerce-works-the-social-psychology-of-social-shopping/" target="_blank">How Social Commerce Works: The Social Psychology of Social Shopping</a></strong></p>
<p><strong> </strong></p>
<p>原文链接：<a href="http://www.hoowolf.net/2011/02/06/how-social-commerce-works-the-social-psychology-of-social-shopping/" target="_blank">http://www.hoowolf.net/2011/02/06/how-social-commerce-works-the-social-psychology-of-social-shopping/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://desicode.cn/share/2011/06/27/264/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

