﻿<?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">
<channel>
<title>视觉设计 - ITFeed</title>
<link>http://www.itfeed.cn</link>
<description>互联网产品设计开发知名博客聚合</description>
<dc:creator>ITFeed</dc:creator>
<pubDate>Tue, 31 Jan 2012 22:24:11 +0800</pubDate>
<language>en</language>
<item>
<title>Android 4.0设计规范 优先导读 十大改变 （附全文翻译pdf）</title>
<link>http://www.itfeed.cn/post.asp?id=7619</link>
<description>
<![CDATA[<p><a href="http://cdc.tencent.com/?p=5082" target="_blank"><img src="http://cdc.tencent.com/wp-content/uploads/2012/01/banner1-21.jpg"/></a></p><p>　　在拜读和翻译了Android design设计指导后，对比Android 4.0与Android2.3及之前版本的app设计指导，总结了Android 4.0设计的10大改变：<span id="more-5082"></span></p>
<p><strong>1. 导航栏</strong> <span style="color: #888888">(详见模式PATTERNS&gt;导航Navigation)</span><br />
　　由之前的物理按键导航（返回、菜单、搜索、主页）变成了嵌入屏幕的虚拟按键（返回、主页、最近任务）。</p>
<p> <img class="aligncenter size-full wp-image-5133" src="http://cdc.tencent.com/wp-content/uploads/2012/01/114.png" alt="" width="720" height="389" /></p>
<p><span style="color: #888888">　　　　　　　　　　左侧为早期有4个物理按键的手机，右侧为新版只有3个虚拟按钮的手机</span></p>
<p>　　把菜单项和搜索项从导航栏去掉，把之前通过长按主页键才出现的最近任务直接展示在导航栏中。</p>
<p><img class="aligncenter size-full wp-image-5114" src="http://cdc.tencent.com/wp-content/uploads/2012/01/23.png" alt="" width="720" height="400" /><br />
<span style="color: #888888">　　　　　　　　　　　　　　　　　　　　　　最近任务的界面</span><br />
　　把菜单收起的同时，在软件界面的操作栏上增加了“更多操作”（action overflow），如下图中的黄色圆点所示。</p>
<p><img class="aligncenter size-full wp-image-5115" src="http://cdc.tencent.com/wp-content/uploads/2012/01/31.png" alt="" width="720" height="340" /><br />
<span style="color: #888888">　　　　　　　　　　黄色圈部分为“更多操作”（action overflow）的位置和点击后内容的展示方式</span></p>
<p><strong>2. 操作栏</strong> <span style="color: #888888">(详见模式PATTERNS&gt;操作栏Action bar)</span><br />
　　操作栏从之前的app图标＋操作，变成如下图所示：<br />
　　1向上＋2 Spinner＋3 重要操作＋4 更多操作。<br />
　　其中，向上按钮，点击后是去到当前界面的上一个层级，非第一层级界面有此按钮，第一层级界面则无向上按钮；Spinner 是用于展示内容的下拉菜单，其内容包括视图的快速切换和显示相关内容的完整信息；更多操作（action overflow）是集合操作栏中不常用的和非重要操作的地方。</p>
<p><img class="aligncenter size-full wp-image-5116" src="http://cdc.tencent.com/wp-content/uploads/2012/01/41.png" alt="" width="720" height="142" /><br />
　　操作栏可以拆分成下图中的1主操作栏、2顶部栏和3底部栏。如果需要，顶部栏可以承载选项卡tabs，底部栏可以承载主要操作和被收起的更多操作（action overflow）。</p>
<p><img class="aligncenter size-full wp-image-5117" src="http://cdc.tencent.com/wp-content/uploads/2012/01/51.png" alt="" width="720" height="450" /><br />
　　在空间足够的横向屏幕展示界面时，被拆分的操作栏，可以灵活合并在一起。如下图中的手机端横竖屏操作栏所示。</p>
<p><img class="aligncenter size-full wp-image-5118" src="http://cdc.tencent.com/wp-content/uploads/2012/01/61.png" alt="" width="720" height="455" /></p>
<p><strong>3. 多面板布局</strong> <span style="color: #888888">(详见模式PATTERNS&gt;多面板布局Multi-pane layouts)</span><br />
　　多面板布局更多的是针对平板电脑，把手机端的目录视图和详情视图两个层级的界面，甚至更多的页面，复合展示在同一个界面中，有效地利用平板电脑的屏幕空间，扁平化层级结构，简化导航。这点在iPad上已经运用得相当娴熟了。</p>
<p><img class="aligncenter size-full wp-image-5119" src="http://cdc.tencent.com/wp-content/uploads/2012/01/71.png" alt="" width="720" height="456" /></p>
<p><strong>4. 选择</strong> <span style="color: #888888">(详见模式PATTERNS&gt;选择Selection)</span><br />
　　Android4.0中的长按与Android2.3及更早期的版本有很大的不同。早期版本长按操作后，是出现情境菜单的浮出层。在Android4.0中，长按后在操作栏的位置会覆盖一个临时的情境操作栏，不再弹出情境菜单浮出层。在临时情境操作栏的环境下，当前界面的内容项允许被单个处理，也允许被批量处理。</p>
<p><img class="aligncenter size-full wp-image-5120" src="http://cdc.tencent.com/wp-content/uploads/2012/01/81.png" alt="" width="720" height="300" /></p>
<p><span style="color: #888888">　　　　　　　　　　长按Android2.3及更早期系统版本的内容项时，出现情境菜单的浮出层。</span><br />
<img class="aligncenter size-full wp-image-5121" src="http://cdc.tencent.com/wp-content/uploads/2012/01/91.png" alt="" width="720" height="340" /></p>
<p><span style="color: #888888">　　　　　　　　　　长按Android4.0系统版本的内容项时，情境菜单栏覆盖在操作栏上。</span><br />
<img class="aligncenter size-full wp-image-5122" src="http://cdc.tencent.com/wp-content/uploads/2012/01/101.png" alt="" width="720" height="340" /></p>
<p><span style="color: #888888">　　　　　　　　　　　　　　　　　　在情境菜单环境下，支持批量操作。</span></p>
<p><strong>5. 返回和向上</strong> <span style="color: #888888">(详见模式PATTERNS&gt;返回和向上Navigation with Back and Up)</span><br />
　　返回按键用在手机全局的虚拟导航栏中，基于用户最近查看的界面历史，采用时间倒序的方式，连接界面间的关系。向上按钮用在操作栏的左侧，基于层级结构，点击后是去到当前界面的上一个层级，若当前界面已经是最高一级，则没有向上按钮。</p>
<p><img class="aligncenter size-full wp-image-5123" src="http://cdc.tencent.com/wp-content/uploads/2012/01/113.png" alt="" width="720" height="133" /><img class="aligncenter size-full wp-image-5124" src="http://cdc.tencent.com/wp-content/uploads/2012/01/121.png" alt="" width="720" height="364" /><br />
<span style="color: #888888">　　　　　　　　　　黄色部分为点击向上按钮后的页面路径，红色部分为点击返回按钮后的页面路径</span></p>
<p><strong>6. 主题样式</strong> <span style="color: #888888">(详见风格STYLE&gt;主题样式Themes)</span><br />
　　推出三套默认主题：Holo浅色主题、Holo深色主题、Holo浅色底+深色操作栏主题。主推app在这三套默认主题的基础上做设计，以加快app研发效率，但只是建议使用，并没有完全强制。视觉设计师们可以重点看下STYLE和BUILDING BLOCKS这两章。</p>
<p><img class="aligncenter size-full wp-image-5125" src="http://cdc.tencent.com/wp-content/uploads/2012/01/132.png" alt="" width="720" height="377" /></p>
<p><strong>7. Widgets</strong> <span style="color: #888888">(详见开始吧GET STARTED&gt;UI概览UI Overview)</span><br />
　　在原apps页里，用选项卡tabs的方式增加了widgets内容。一改用隐晦方式添加widget的操作和把widgets零散放在桌面呈现的方式。在app设计中，应该提高对widget设计的重视程度。</p>
<p><img class="aligncenter size-full wp-image-5126" src="http://cdc.tencent.com/wp-content/uploads/2012/01/141.png" alt="" width="720" height="400" /></p>
<p><strong>8. 兼容性</strong> <span style="color: #888888">(详见模式PATTERNS&gt;兼容性Compatibility)</span><br />
　　向后兼容，考虑到物理导航按键手机如何兼容Android 4.0系统和虚拟导航手机如何兼容Android2.3和更早期版本的apps。</p>
<p><img class="aligncenter size-full wp-image-5127" src="http://cdc.tencent.com/wp-content/uploads/2012/01/151.png" alt="" width="720" height="355" /><br />
　　在物理导航按键手机上安装android4.0系统，点击物理按键，在屏幕下方出现action overflow的内容。</p>
<p><img class="aligncenter size-full wp-image-5128" src="http://cdc.tencent.com/wp-content/uploads/2012/01/161.png" alt="" width="720" height="380" /><br />
　　在新的虚拟导航手机上安装为android2.3及更早版本系统设计的app，会在屏幕下方的虚拟导航的右侧出现action overflow按钮（如上图的黄色部分）。</p>
<p><img class="aligncenter size-full wp-image-5129" src="http://cdc.tencent.com/wp-content/uploads/2012/01/171.png" alt="" width="720" height="385" /><br />
　　在新的虚拟导航手机上安装android4.0，点击action overflow后的展示状态如上图。</p>
<p><strong>9. 强调纯粹的Android应用设计</strong><span style="color: #888888"> (详见模式PATTERNS&gt;纯粹的Android)</span><br />
　　在Android4.0 app设计准则中，特别强调为Android设计纯粹的Android app，切勿使用其他平台特定元素的注意事项，有以下5个方面：<br />
　（1）强调视觉元素的样式要符合android系统；<br />
　（2）不用其它平台特有的图标；<br />
　（3）不在界面的下方使用选项卡tabs；<br />
　（4）区分向上和返回，不在操作栏上使用返回样式的按钮；<br />
　（5）不在内容列表里使用向右箭头。</p>
<p><img class="aligncenter size-full wp-image-5130" src="http://cdc.tencent.com/wp-content/uploads/2012/01/181.png" alt="" width="720" height="174" /></p>
<p>　　<img class="aligncenter size-full wp-image-5131" src="http://cdc.tencent.com/wp-content/uploads/2012/01/191.png" alt="" width="720" height="400" /></p>
<p>　　Android系统里，选项卡（tabs）会固定放在屏幕上方，不会放在下方。这点与ios系统不同。</p>
<p><strong>10. 其它细节</strong><br />
　　增加许多新的交互细节、信息展示和视觉样式等规范，详细见翻译。其中，有几点在此强调下：<br />
　（1）新增了横滑移除内容的交互手势。在部分模块中，支持向左或向右横滑移除内容的操作，如最近任务和消息通知抽屉。</p>
<p><img class="aligncenter size-full wp-image-5132" src="http://cdc.tencent.com/wp-content/uploads/2012/01/201.png" alt="" width="720" height="310" /><br />
　（2）视觉的平面化，栅格风正在4.0中上演。<br />
　（3）在writing style中明确指出写wording时，要直接使用第二人称“你”。</p>
<p>　　原文见<a href="http://developer.android.com/design/index.html">http://developer.android.com/design/index.html</a><br />
　　快速查阅，Android Design全文翻译 下载地址：<a href="http://cdc.tencent.com/?download=Android-Design-4.0">http://cdc.tencent.com/?download=Android-Design-4.0</a></p>
<p>　　Android Design全文翻译由CDC D3多媒体小组（江宁、张云）出品。<br />
　　感谢您的阅读！</p>
<p>(本文出自腾讯CDC博客: <a href="http://cdc.tencent.com/?p=5082" target="_blank">http://cdc.tencent.com/?p=5082</a>)</p>]]>
</description>
<dc:creator>腾讯CDC</dc:creator>
<pubDate>Wed, 18 Jan 2012 11:20:23 +0800</pubDate>
</item>
<item>
<title>阿里巴巴中国站手机客户端项目总结</title>
<link>http://www.itfeed.cn/post.asp?id=7606</link>
<description>
<![CDATA[<p><span style="color: #e11e69;"><strong>阿里巴巴手机客户端项目阶段总结</strong></span> (部分省略)：</p>
<p><a href="http://www.aliued.cn/wp-content/uploads/2012/01/无线项目总结-banner.jpg"><img class="alignnone size-full wp-image-3706" title="无线项目总结-banner" src="http://www.aliued.cn/wp-content/uploads/2012/01/无线项目总结-banner.jpg" alt="" width="680" height="240" /></a></p>
<p>原文链接：<a href="http://liuchenhuan.net/?p=701">http://liuchenhuan.net/?p=701</a></p>
<p>从无到有的阿里巴巴无线端设计，经历了由前期的产品定位、产品形态探索、无线需求场景脑暴、产品拆解、分合的产品思路讨论、版本规划到手机行为、手机平台特性分析乃至信息架构的确定、细节的推敲&#8230;</p>
<p>无线端敏捷开发节奏快，如何低成本、有条不紊的迭代更新，版本规划以及产品的拓展性考虑尤为关键。九宫格聚合的工具平台形态和运营形态在我们客户端的定位中必然共存，但一期内容不足功能较少，过渡期既要保证目前版本的充实和架构合理，又要考虑用户习惯的延续和activity等的代码模块可复用。</p>
<p>在已有13年历史的网站（培养了稳定的用户群以及培养了一定的用户习惯）基础上，实际上我们并非从零开始。B2B的业务属性决定了无线场景的设计与网站的关联性，而用户使用时必然伴随部分网站习惯的迁移，因此在基于无线场景和手机端特性设计的同时，我们也同时考虑用户在网站端的认知映射。</p>
<p>作为项目owner，跟进后续流程的过程中有几点经验值得highlight：</p>
<p><span id="more-3686"></span></p>
<p><span style="color: #e11e69;"><strong>1. 关于视觉适配难</strong></span></p>
<p>相比于iOS平台, android硬件厂商众多，屏幕分辨率五花八门， 且dpi不同，我们这样做：<br />
(1) 进行目标用户群使用手机比例调研(可通过问卷投放等方式)，选取一个<span style="color: #e11e69;"><strong>主流分辨率和目标机</strong></span>(本项目中目标机为htc G7，分辨率480*800) ；<br />
(2) 视觉设计过程中，实时在目标机并定期在其他分辨率手机上查看实际效果，并调整方案；<br />
(3) 规范<span style="color: #e11e69;"><strong>点九图</strong></span>(九宫格)的切片尤为重要。.9.png不但能最大程度低成本、高还原度的适配到android的各个屏幕，更是设计师和开发同学之间的沟通工具，避免在视觉－前端这一环节的设计走样。</p>
<p><span style="color: #e11e69;"><strong>2. 关于视觉切片资源文件大</strong></span></p>
<p>由于功能模块相对独立的迭代开发，造成不同开发同学对于切片管理不统一，以至app文件大且运行过程中占用内存大，操作流畅度不佳的情况。在<span style="color: #e11e69;"><strong>UI Check</strong></span>过程中，<span style="color: #e11e69;"><strong>优化切片资源包</strong></span>，替换掉不规则渐变和纹理，尽可能复用样式，统一.9.png格式。</p>
<p><span style="color: #e11e69;"><strong>3. 关于UI Check</strong></span></p>
<p>UI Check的目标不但是保证<span style="color: #e11e69;"><strong>UI在开发环节的设计还原度</strong></span>，更是对设计方案的重要review。尤其手机操作流程性强，过程更为动态，转场动画、hover效果、gesture这些内容都需要高保真demo在真实的测试下确认调整和再优化。</p>
<p>最后，产品更新和体验优化是一个永无止境的过程。之后我们除了拓展更多无线平台(windows phone/iPad/&#8230;)以及新产品新功能追加，也会根据埋点数据和一手用研不断在迭代过程中同步优化体验设计。敬请期待！</p>
<p>下面为项目总结ppt中的部分内容，方便大家有个更加直观的了解：</p>
<p><img src="http://pic.yupoo.com/liuchenhuan/BG0jfkOT/zudUy.png" alt="阿里巴巴无线端设计.004" width="710" height="444" border="0" /></p>
<p><img src="http://pic.yupoo.com/liuchenhuan/BG0jfwmx/49imE.png" alt="阿里巴巴无线端设计.005" width="710" height="444" border="0" /></p>
<p><img src="http://pic.yupoo.com/liuchenhuan/BG0jfy7N/Wcqoe.png" alt="阿里巴巴无线端设计.006" width="710" height="444" border="0" /><br />
<img src="http://pic.yupoo.com/liuchenhuan/BG0jfORu/10jfCi.png" alt="阿里巴巴无线端设计.007" width="710" height="444" border="0" /></p>
<p><img src="http://pic.yupoo.com/liuchenhuan/BG0jfUYc/khdj6.png" alt="阿里巴巴无线端设计.009" width="710" height="444" border="0" /></p>
<p><img src="http://pic.yupoo.com/liuchenhuan/BG0jg1BV/11fA4X.png" alt="阿里巴巴无线端设计.010" width="710" height="444" border="0" /><br />
<img src="http://pic.yupoo.com/liuchenhuan/BG0jfR0g/dnXoS.png" alt="阿里巴巴无线端设计.011" width="710" height="444" border="0" /><br />
<img src="http://pic.yupoo.com/liuchenhuan/BG0jfYI0/wbpzq.png" alt="阿里巴巴无线端设计.012" width="710" height="444" border="0" /><br />
<img src="http://pic.yupoo.com/liuchenhuan/BG0jg3yj/rWYpv.png" alt="阿里巴巴无线端设计.013" width="710" height="444" border="0" /><br />
<img src="http://pic.yupoo.com/liuchenhuan/BG0jgcCu/CMtJF.png" alt="阿里巴巴无线端设计.014" width="710" height="444" border="0" /><br />
<img src="http://pic.yupoo.com/liuchenhuan/BG0jgj1p/abL4a.png" alt="阿里巴巴无线端设计.015" width="710" height="444" border="0" /><br />
<img src="http://pic.yupoo.com/liuchenhuan/BG0jgoLe/hslDd.png" alt="阿里巴巴无线端设计.017" width="710" height="444" border="0" /><br />
<img src="http://pic.yupoo.com/liuchenhuan/BG0jgItY/TgB8I.png" alt="阿里巴巴无线端设计.018" width="710" height="444" border="0" /></p>
<p><img src="http://pic.yupoo.com/liuchenhuan/BG0jgNUG/zOXdd.png" alt="阿里巴巴无线端设计.019" width="710" height="444" border="0" /></p>
<p><img src="http://pic.yupoo.com/liuchenhuan/BG0jgSS0/ruEMB.png" alt="阿里巴巴无线端设计.020" width="710" height="444" border="0" /></p>
<p>感谢各位看官的时间，欢迎亲们更多的专业交流~~</p>
]]>
</description>
<dc:creator>AlibabaUED(中国)</dc:creator>
<pubDate>Wed, 18 Jan 2012 12:33:54 +0800</pubDate>
</item>
<item>
<title>如何做首页改版（阿里巴巴中国站首页改版经验谈）</title>
<link>http://www.itfeed.cn/post.asp?id=7605</link>
<description>
<![CDATA[<p><img class="alignnone size-full wp-image-3714" src="http://www.aliued.cn/wp-content/uploads/2012/01/1688redesignban.jpg" alt="" width="680" height="196" /><br />
同任何网站一样，阿里巴巴首页的每次改版也都是一次纠结和挣扎的洗礼。设计的过程总是痛苦的，因为判断和选择总是艰难的，这里我们并不想叙述改版的整个流程——尽管不同团队的架构和设计团队的职责有所差异，但除了决策过程不同外，大公司抑或小公司在流程上并无本质区别。我们在此是想通过总结我们在改版过程中经验和教训，以及对于首页甚或产品redesign的思考。</p>
<p>以下是我们觉得必要的思考流程以及一些方法和关键点：</p>
<h2>一、关于定位的思考</h2>
<p>在首页改版之前，结合网站整体的策略变化我们首先思考以下三个问题：</p>
<dl>
<dt>1、改版的目的/目标是什么？</dt>
<dd>是配合网站整体战略的调整，还是用户体验的改善和提升，是自上而下的网站转型升级，还是自下而上的流量再分配？&#8230;<br />
这些因素也决定了首页的设计思路是宏观还是微观，是信息层面的梳理还是视觉表达的优化。</dd>
<dt>2、首页的用户是谁？</dt>
<dd>用户是谁，用户特征是什么，用户的需求和价值在哪里？<br />
考虑这个问题时，需要对于用户类型做相应的区分，不同的网站可能根据网站服务的特征来区分不同的用户群，比如：</p>
<ul>
<li>时间：新用户与老用户</li>
<li>来源：自有用户、SEO用户、BD用户</li>
<li>关注行业：原材料用户、工业品用户、…</li>
<li>……</li>
</ul>
</dd>
<dt>3、现状</dt>
<dd>
<ul>
<li>目前的内容运营规则是怎样的</li>
<li>当前的界面是否存在可用性或易用性的问题</li>
<li>基本数据是怎样的：PV、UV、回访率、流量转化率，各产品的流量分布、各类型用户的访问基础数据是怎样的。这些数据本身是否能暴露当前的问题，或者能用以评估预期目标的效果</li>
</ul>
</dd>
</dl>
<h2>二、做好设计管理</h2>
<p>&nbsp;</p>
<p><span id="more-3713"></span></p>
<dl>
<dt>1、找准关键角色</dt>
<dd>在这个过程中能否找准关键角色非常重要：谁是真正对首页负责的人，谁是对具体业务负责的人，相关的合作方的决策者是谁？只有明确关键角色，问题才能高效的决策和推进，而不是互相推诿和拖延，这将是考验改版项目团队工作技巧的重要一步。</dd>
<dt>2、提早沟通设计思路，而不是直接进入设计</dt>
<dd><img class="imgleft" style="float: left; margin: 0 10px 10px 0;" src="http://farm8.staticflickr.com/7020/6714001479_d2617935d5_m.jpg" alt="sketch" />不同工作风格会产生不同的工作流程，以首页改版为例，我曾经见过给出十多个首页设计稿给老大选择的壮观场面，这未必是不好的工作方法，但却显然是低效的。</p>
<p>建议在改版之前，能够和相关方（尤其是对于首页有决策权的leader）建立起充分沟通，将改版的整体目标建立共识，而不要一开始就沟通具体的设计细节——这很容易就陷入对于细节的争议当中。</p>
<p>当然为了避免“空谈”，做好相应的准备还是必要的，有可能的话提供数据依据和现状分析，并给出鲜明的观点。当然您也可以通过低保真的页面结构图，以便各方对于首页有概念上的理解。</dd>
<dt>3、项目管理</dt>
<dd>
<strong>a) 资源保障</strong></p>
<p>首页改版对于投入精力的需求长期而稳定，能否争取到相关资源，并且在项目过程中获得高优先级的支持将非常重要。</p>
<p><strong>b) 时间计划：定期与追踪</strong></p>
<p>首页改版是一个耗费较多资源，牵涉业务众多的项目，强烈建议按照项目流程来执行，但与一般项目不同的是首页改版的进度往往并不完全受控，相关影响因素较多，并不完全能由技术评估方案的工作量，因此建议在项目前期编制较为粗线条的项目时间表，主要用以对执行过程进行分解，而在方案基本成型后再建立精确的上线时间计划。</p>
</dd>
</dl>
<h2>三、把握设计细节</h2>
<dl>
<dt>1、设计即运营</dt>
<dd>设计的过程也是运营策划的过程，尤其是以运营为主的首页，设计师不仅要关注用户如何浏览和阅读，也需要考虑首页内容如何产生，因此首页的设计过程也是和相关业务方订立运营规则和运营方式的过程。</dd>
<dt>2、追求细节，但别害怕不完美</dt>
<dd>就像产品设计中常说的，产品的成功往往是通过快速迭代而造就的，如果追求完美的产品，则时机早已错过。首页的设计和改进也会是一个不断经受用户检验和快速迭代的过程。因此在设计上线先后不断通过用户的反馈和行为数据验证和确认，而无需去追求完美的方案——因为完美是不会存在的。<br />
<img src="http://farm8.staticflickr.com/7016/6714001199_ecb558145e.jpg" alt="mockup" /></dd>
</dl>
<h2>四、善用数据与用户</h2>
<dl>
<dt>1、数据是了解用户的重要途径</dt>
<dd>
<strong>a) 在设计前要对要验证的目标设定可衡量的指标</strong></p>
<p>首页改版效果的指标与首页的定位关系密切，如何设置用户体验指标，建议参考<a href="http://www.tianya8.net/2011/03/user-centerd-merics.html">Google的用户体验衡量指标体系(HEART</a>)。</p>
<p><strong>b) 是否有足够的数据来支持分析结论</strong></p>
<p>一旦明确首页改版效果的指标，就要通过各种方式来收集指标的相应的数据，网站的基础访问数据、tracelog、点击分布等。如有必要应当对当前首页的数据指标进行收集，以便用以对首页改版后的效果进行对照。</p>
<p><strong>我们的经验：</strong>我们在首页改版时主要采用的是（结合采购商身份的）页面CTR和Bounce Rate，以此来评估新老版本与用户需求的匹配度和吸引力。当然在不同的目标驱动下可能会采用完全不同的数据指标，比如在分析局部板块时可能会关注诸如广告效果、专场转化率、登录行为数等。
</dd>
<dt>2、用数据来做决策和验证</dt>
<dd>
<strong>a) 关键指标的定义及描述应该达成一致</strong></p>
<p>在我们改版的过程中遇到一系列数据上问题，包括监测数据的不稳定、数据前后矛盾等，而在总结原因时发现问题出于不同的部门对于数据的定义和观测都有所差异，并且在AB Test过程中由于选取的样本数量和类型上的差异，也会使得观测的结果不具可比性。这也促使我们在后续的测试过程中建立统一的数据收集通道，并且在后续的AB Test中和BI部门进行充分的沟通来确保测试样本的可比性。<br />
<img src="http://farm8.staticflickr.com/7001/6714001369_ee7ddc593f.jpg" alt="" /></p>
<p><strong>b) 不要迷信数据，要寻找数据背后的意义</strong>
</dd>
<dt>3、意见反馈，有时候并不重要</dt>
<dd>这取决于你是否有足够的判断力和敢于say no。请考虑接收到的问题——</p>
<ul>
<li>表达的是感受，还是使用的实际问题</li>
<li>是否是目标用户的问题</li>
<li>是普遍性的问题，还是个体问题</li>
<li>……</li>
</ul>
<p>在从而做出自己的判断，要记得一点——聆听少数人的声音，但为大多数人设计。
</dd>
</dl>
<h2>五、“习惯”与重建习惯</h2>
<p>一般情况下，首页改版总是会原有用户的使用习惯，因此在首页的测试过程和上线都需要慎重考虑用户习惯的延续和给予一定的指导。请考虑——</p>
<ul>
<li>在测试版本上给予用户返回默认首页的入口，允许用户退出测试</li>
<li>在新首页上线后，在一段时期内保留旧版首页的入口，让那些尚未适应新首页的用户能够有缓冲期来完成原来习以为常的任务</li>
<li>如果有必要，提供一个<a href="http://page.china.alibaba.com/whatsnew.html">what&#8217;s new</a>页面，帮助用户快速了解新首页</li>
</ul>
<p><strong>我们经验：</strong>在新版正式上线后，在首屏为用户提供了新首页指南，在页面底部提供了回顾旧首页的入口，给用户留有充足的时间进行过渡，通过监控旧版本的流量也可以判断用户对于新版本的接受度，从而逐渐降低新版本的帮助的权重，并且在此过程中基本上未产生用户的主动投诉。</p>
<p>以上是我们本次阿里巴巴中国站首页改版的经验总结，在这里分享给有相关困惑或遇到同样问题的同学们，欢迎大家在专业上更深入的探讨。</p>
]]>
</description>
<dc:creator>AlibabaUED(中国)</dc:creator>
<pubDate>Wed, 18 Jan 2012 13:35:11 +0800</pubDate>
</item>
<item>
<title>设计是O——我对关于设计趋势的思考</title>
<link>http://www.itfeed.cn/post.asp?id=7584</link>
<description>
<![CDATA[<p><a href="http://tgideas.qq.com/webplat/info/news_version3/804/808/810/m579/201201/54180.shtml" target="_blank"><img src="http://ossweb-img.qq.com/upload/webplat/info/tgideas/201201/1326679780_-1719592020_4516_imageAddr.jpg" alt="" /></a></p><p>设计是O，O是什么，O是Origin原点，《生活大爆炸》的片头就是一切原点的起源，而人类发展史就是一个越滚越大的原点，总是发现有一个不断循环的规律，艺术是如此，设计更是如此。
 设计需要创新的精神，才能产生Big Bang！而设计师的修为高低在于：你是否恰到好处的占领了原点的前端。
 近几年，经常听到一个词“趋势”，大致意思是：事物发展的动向。我认为这个词用在观察金融交易市场规律上大致可取，但是用在设计发展规律上就不妥了。
</p>]]>
</description>
<dc:creator>腾讯TGideas</dc:creator>
<pubDate>Mon, 16 Jan 2012 08:00:00 +0800</pubDate>
</item>
<item>
<title>如何才是一个好的LOGO？</title>
<link>http://www.itfeed.cn/post.asp?id=7528</link>
<description>
<![CDATA[<p><a href="http://bs.baidu.com/ueobaidu/%2F1326257835.jpg?sign=MBO:6cFxwpFUY9QP:LnEWE94gJli92sUrlPdgewOyhpI%3D"><img class="alignnone size-full wp-image-350" src="http://bs.baidu.com/ueobaidu/%2F1326257835.jpg?sign=MBO:6cFxwpFUY9QP:LnEWE94gJli92sUrlPdgewOyhpI%3D" alt="" /></a></p>
<p><span id="more-348"></span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>一个LOGO对于一家企业的重要性不用我说相信大家也都知道，不管是从视觉的品牌传播方面，还是对于传达企业对内对外的精神和文化理念方面，小小的一个LOGO都处在一个举足轻重的位置。好了，废话不多说，开始正题。</p>
<p>有人说“即使一把火把可口可乐烧得精光，它也能凭借着它的LOGO东山再起。“当然了，至于有没有人说过，我们无法考证。但是这句话充分说明了一个LOGO所能发挥的作用。下面我从5个方面来说明如何才是一个好的LOGO:</p>
<p>&nbsp;</p>
<p><span style="color: #99cc00"><strong>1． </strong><strong>LOGO</strong><strong>应该有代表性的寓意（配图）</strong></span></p>
<p>中国银行的LOGO的经典之处也不用我来多废话，我们来看一看它所包含的寓意：</p>
<p>（1）首先，既然是中国银行，它的图形部分中间实际上是一个中国的“中”字；</p>
<p>（2）其次，外圆中方的造型，则代表着中国的古钱币，将银行这一特性表达出来；</p>
<p>（3）再次，圆形的外观则指中国银行面向全球，着眼世界。</p>
<p><a href="http://bs.baidu.com/ueobaidu/%2F1326258299.jpg?sign=MBO:6cFxwpFUY9QP:%2FOnHnDLlTsxvfJ9OIWmwznecV4Y%3D"><img class="alignnone size-full wp-image-357" src="http://bs.baidu.com/ueobaidu/%2F1326258299.jpg?sign=MBO:6cFxwpFUY9QP:%2FOnHnDLlTsxvfJ9OIWmwznecV4Y%3D" alt="" /></a></p>
<p>&nbsp;</p>
<p><span style="color: #99cc00"><strong>2． </strong><strong>LOGO</strong><strong>的用色（配图）</strong></span></p>
<p>一个好的LOGO应该有能够表达企业特性的色彩</p>
<p>上图中，同为美国的2家著名企业的LOGO,都是以大量的字母为基础造型的LOGO</p>
<p>给观者的感觉却是截然不同的两种感觉,色彩的运用起到了很重要的作用</p>
<p><span style="color: #ff9900"><strong>微软                              </strong></span></p>
<p><span style="color: #ff9900">沉重的颜色,要传达给用户的是沉稳/深度/专业严谨等信息</span></p>
<p><span style="color: #ff9900"> <strong></strong></span></p>
<p><span style="color: #ff9900"><strong>可口可乐</strong></span></p>
<p><span style="color: #ff9900">鲜亮的色彩搭配活跃飘逸的字体,年轻/活力的感觉跃然纸上</span></p>
<p><a href="http://bs.baidu.com/ueobaidu/%2F1326258379.jpg?sign=MBO:6cFxwpFUY9QP:06n1R91%2B79wrmgYDj%2Fod5U1W17I%3D"><img class="alignnone size-full wp-image-358" src="http://bs.baidu.com/ueobaidu/%2F1326258379.jpg?sign=MBO:6cFxwpFUY9QP:06n1R91%2B79wrmgYDj%2Fod5U1W17I%3D" alt="" /></a></p>
<p>&nbsp;</p>
<p>在一个色彩扮演的角色越来越重要的时代,现今也涌现出大量的色彩丰富绚烂的优质LOGO.搭配协 调的很好的多种颜色的组合能够给观者更加强烈的思维记忆和视觉记忆.但是,若非有一定的色彩驾 驭能力,否则只会让画面显得杂乱烦躁加眼花</p>
<p><a href="http://bs.baidu.com/ueobaidu/%2F1326258691.jpg?sign=MBO:6cFxwpFUY9QP:pZs%2FZ8WkaSRfgFOJ2QfRyfBKyjA%3D"><img class="alignnone size-full wp-image-361" src="http://bs.baidu.com/ueobaidu/%2F1326258691.jpg?sign=MBO:6cFxwpFUY9QP:pZs%2FZ8WkaSRfgFOJ2QfRyfBKyjA%3D" alt="" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="color: #99cc00"><strong>3． </strong><strong>LOGO</strong><strong>的字体选择</strong></span></p>
<p>字体选择及设计在LOGO的设计制作中亦是比重非常大的一个部分,不管是</p>
<p>以字为主体造型的LOGO,还是字体为辅助图形的LOGO,字体在整个LOGO</p>
<p>中占据的位置都是非常重要的，我们先来看看纯文字类LOGO中字体的表现：</p>
<p><span style="color: #ff9900"> <strong>微软</strong></span></p>
<p><span style="color: #ff9900">粗壮的黑体给观者的感觉就是成熟,稳重,严谨加上一目了然的公司名称和少许的字体变形及设计,一个大气沉稳有安全感的气质就显露出来了.</span></p>
<p>&nbsp;</p>
<p><span style="color: #ff9900"><strong>可口可乐</strong></span></p>
<p><span style="color: #ff9900">飘逸,圆润,活跃,跳动,巧妙的穿插,这些字体设计的元素让可口可乐LOGO醒目和体现产品特点等功能一应俱全!</span></p>
<p><a href="http://bs.baidu.com/ueobaidu/%2F1326258379.jpg?sign=MBO:6cFxwpFUY9QP:06n1R91%2B79wrmgYDj%2Fod5U1W17I%3D"><img class="alignnone size-full wp-image-358" src="http://bs.baidu.com/ueobaidu/%2F1326258379.jpg?sign=MBO:6cFxwpFUY9QP:06n1R91%2B79wrmgYDj%2Fod5U1W17I%3D" alt="" /></a></p>
<p>&nbsp;</p>
<p>我们再来看看图文组合类LOGO中的文字表现</p>
<p><span style="color: #ff9900"><strong>LOGO1</strong><strong>：</strong></span></p>
<p><strong>图形部分</strong>：有圆润，有尖锐</p>
<p><strong>文字部分</strong>：有圆角，有尖角</p>
<p><strong>整个LOGO</strong><strong>简洁明了，图文风格统一充满现代感</strong></p>
<p><span style="color: #ff9900"><strong> </strong><strong>LOGO2</strong><strong>：</strong></span></p>
<p><strong>图形部分</strong>：尊贵，典雅，复古</p>
<p><strong>文字部分</strong>：老式字体，粗细有 致，同样的高贵，复古气质</p>
<p><strong>整个LOGO</strong><strong>充满贵族气息和历史悠久的氛围 </strong></p>
<p><span style="color: #ff9900"><strong> </strong><strong>LOGO3</strong><strong>：</strong></span></p>
<p><strong>图形部分</strong>：祥云玉盘，古老华夏</p>
<p><strong>文字部分</strong>：中国古体，篆体变形</p>
<p><strong>不论是图形还是文字，浓郁的中国味一目了然 </strong></p>
<p><a href="http://bs.baidu.com/ueobaidu/%2F1326259318.jpg?sign=MBO:6cFxwpFUY9QP:%2BMTtgBwGhmYXd2cXJUp1ajsVE70%3D"><img class="alignnone size-full wp-image-368" src="http://bs.baidu.com/ueobaidu/%2F1326259318.jpg?sign=MBO:6cFxwpFUY9QP:%2BMTtgBwGhmYXd2cXJUp1ajsVE70%3D" alt="" /></a></p>
<p>&nbsp;</p>
<p><strong> </strong></p>
<p><span style="color: #99cc00"><strong>4. </strong><strong>LOGO</strong><strong>的整体性</strong></span></p>
<p>一个LOGO最基本的整体性要有保证，在视觉上不能太散，相互之间要有联系，要给观者以整体，统一的感觉，不能轻易被其他元素干扰。</p>
<p><span style="color: #ff9900"><strong>LOGO1</strong><strong>：</strong></span></p>
<p>图形方面，完全是在一个规范的方形范围之内做文章，想散也散不了，非常保险的保持整体性的方法；</p>
<p><span style="color: #ff9900"><strong>LOGO2</strong><strong>：</strong></span></p>
<p>一个纯文字图形组成的LOGO，找到字母共同点，加以变形，做到5个字母的外形相似，整齐排列，增强整体感稳定性；</p>
<p><a href="http://bs.baidu.com/ueobaidu/%2F1326259425.jpg?sign=MBO:6cFxwpFUY9QP:Ou7ZbXOnQXZrtpY%2Bc534MDrAZMw%3D"><img class="alignnone size-full wp-image-369" src="http://bs.baidu.com/ueobaidu/%2F1326259425.jpg?sign=MBO:6cFxwpFUY9QP:Ou7ZbXOnQXZrtpY%2Bc534MDrAZMw%3D" alt="" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="color: #99cc00"><strong>5.</strong><strong>LOGO</strong><strong>的应用    </strong></span></p>
<p><span style="color: #ff9900"><strong>LOGO</strong><strong>要易于应用，这样才能更易于传播。</strong></span></p>
<p><strong> </strong>所以为了LOGO能够更好的应用在各种不同的领域，所以墨稿以及反白稿都是必不可少的，即使你的LOGO是带有很强的立体效果或者是颜色变化，都要考虑到单色的转换和应用方面。</p>
<p><a href="http://bs.baidu.com/ueobaidu/%2F1326259451.jpg?sign=MBO:6cFxwpFUY9QP:qQ8XTpkWwLqRvulFkMhQe5jgQHE%3D"><img class="alignnone size-full wp-image-370" src="http://bs.baidu.com/ueobaidu/%2F1326259451.jpg?sign=MBO:6cFxwpFUY9QP:qQ8XTpkWwLqRvulFkMhQe5jgQHE%3D" alt="" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>好了，以上就是笔者对于如何才是一个好的LOGO的认识，其实在LOGO这个领域包罗的元素实在是太多，而且每个人对于LOGO的看法也都不一样，所以笔者在这里也只是抒发一下自己的个人看法，希望能与更多的朋友进行交流，大家说出自己不同的看法。</p>
<p>&nbsp;</p>
]]>
</description>
<dc:creator>百度联盟UEO</dc:creator>
<pubDate>Wed, 11 Jan 2012 13:27:04 +0800</pubDate>
</item>
<item>
<title>男装商城活动页面设计:衣折礼遇迎新年</title>
<link>http://www.itfeed.cn/post.asp?id=7524</link>
<description>
<![CDATA[<p><img alt="" src="http://www.skydesign.cn/blog/upload/201201091712325824.jpg" /><br /><br />男装商城活动页面设计-衣折礼遇迎新年<br />年尾了，各种活动越来越多了~</p><p>抢实惠的朋友留意咯~（非广告）</p><p><a href="http://www.skydesign.cn/blog/post/741.html" target="_blank">阅读全文</a></p><h3>相关文章:</h3><ul><li><a  href="http://www.skydesign.cn/blog/post/740.html">2012"您"来了~祝各位新年快乐~</a>&nbsp;&nbsp;(2011-12-31 17:1:31)</li><li><a  href="http://www.skydesign.cn/blog/post/738.html">【作品展示】梵尼克斯淘宝商城设计</a>&nbsp;&nbsp;(2011-11-2 11:35:24)</li><li><a  href="http://www.skydesign.cn/blog/post/737.html">【案例展示】爹地宝贝纸尿裤网站设计</a>&nbsp;&nbsp;(2011-10-26 11:5:44)</li><li><a  href="http://www.skydesign.cn/blog/post/734.html">国庆黄金“粥”快乐！</a>&nbsp;&nbsp;(2011-9-30 16:44:42)</li><li><a  href="http://www.skydesign.cn/blog/post/733.html">【作品展示】与狼共舞官方旗舰店2011秋冬季</a>&nbsp;&nbsp;(2011-9-21 14:1:8)</li></ul>]]>
</description>
<dc:creator>Sky</dc:creator>
<pubDate>Mon, 09 Jan 2012 17:10:52 +0800</pubDate>
</item>
<item>
<title>20个漂亮的网站导航设计案例</title>
<link>http://www.itfeed.cn/post.asp?id=7517</link>
<description>
<![CDATA[<p>
	作为网站最重要的组成部分之一，导航能够引导用户浏览网站中的更多内容。优秀的导航应该和网页内容完美的融合在一起，因此设计前需要设仔细分析网页结构。这篇文章收集了20个漂亮的网站导航设计案例，希望这些优秀的实例能给你带来灵感。</p>
<h3>
	<a href="http://www.ds5.citroen.co.uk/uk/" rel="nofollow" target="_blank">New Citroen DS5</a></h3>
<p>
	<a href="http://www.ds5.citroen.co.uk/uk/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z94Y0-0.jpg" /></a></p>
<h3>
	<a href="http://www.sparksonline.com/" rel="nofollow" target="_blank">sparks</a></h3>
<p>
	<a href="http://www.sparksonline.com/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z95402-1.jpg" /></a></p>
<h3>
	<a href="http://inmotionmassage.co.uk/" rel="nofollow" target="_blank">In Motion</a></h3>
<p>
	<a href="http://inmotionmassage.co.uk/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z91041-2.jpg" /></a></p>
<h3>
	<a href="http://zooadvertising.com.au/" rel="nofollow" target="_blank">zoo.</a></h3>
<p>
	<a href="http://zooadvertising.com.au/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z9D33-3.jpg" /></a></p>
<h3>
	<a href="http://newgothamnyc.com/" rel="nofollow" target="_blank">New Gotham</a></h3>
<p>
	<a href="http://newgothamnyc.com/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z93954-4.jpg" /></a></p>
<h3>
	<a href="http://womens.timberland.com/" rel="nofollow" target="_blank">Timberland</a></h3>
<p>
	<a href="http://womens.timberland.com/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z91533-5.jpg" /></a></p>
<h3>
	<a href="http://kennethcachia.com/#home" rel="nofollow" target="_blank">Kenneth Cachia</a></h3>
<p>
	<a href="http://kennethcachia.com/#home" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Za1C-6.jpg" /></a></p>
<h3>
	<a href="http://www.momentskis.com/" rel="nofollow" target="_blank">Moment Skis</a></h3>
<p>
	<a href="http://www.momentskis.com/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z95N2-7.jpg" /></a></p>
<h3>
	<a href="http://www.thrivesolo.com/" rel="nofollow" target="_blank">solo</a></h3>
<p>
	<a href="http://www.thrivesolo.com/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z91924-8.jpg" /></a></p>
<h3>
	<a href="http://cameronreynoldsflatt.com/" rel="nofollow" target="_blank">Cameron Reynolds-Flatt</a></h3>
<p>
	<a href="http://cameronreynoldsflatt.com/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z9E23-9.jpg" /></a></p>
<h3>
	<a href="http://hermetik.fr/" rel="nofollow" target="_blank">Hermetik</a></h3>
<p>
	<a href="http://hermetik.fr/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Za336-10.jpg" /></a></p>
<h3>
	<a href="http://www.mad.no/" rel="nofollow" target="_blank">MAD</a></h3>
<p>
	<a href="http://www.mad.no/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z93456-11.jpg" /></a></p>
<h3>
	<a href="http://www.carterdigital.com.au/" rel="nofollow" target="_blank">Carter Digital</a></h3>
<p>
	<a href="http://www.carterdigital.com.au/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z92333-12.jpg" /></a></p>
<h3>
	<a href="http://www.3degreesagency.com/" rel="nofollow" target="_blank">3Degrees Design Agency</a></h3>
<p>
	<a href="http://www.3degreesagency.com/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z92231-13.jpg" /></a></p>
<h3>
	<a href="http://www.divups.com/" rel="nofollow" target="_blank">divups</a></h3>
<p>
	<a href="http://www.divups.com/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z9D42-14.jpg" /></a></p>
<h3>
	<a href="http://chimpchomp.us/" rel="nofollow" target="_blank">Chimp Chomp</a></h3>
<p>
	<a href="http://chimpchomp.us/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z91E4-15.jpg" /></a></p>
<h3>
	<a href="http://realmacsoftware.com/analog/" rel="nofollow" target="_blank">Analog</a></h3>
<p>
	<a href="http://realmacsoftware.com/analog/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z932K-16.jpg" /></a></p>
<h3>
	<a href="http://pongathon.com/" rel="nofollow" target="_blank">Pongathon</a></h3>
<p>
	<a href="http://pongathon.com/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z94U3-17.jpg" /></a></p>
<h3>
	<a href="http://www.inkling.com/" rel="nofollow" target="_blank">inkling</a></h3>
<p>
	<a href="http://www.inkling.com/" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z91T6-18.jpg" /></a></p>
<h3>
	<a href="http://www.heringberlin.com/en" rel="nofollow" target="_blank">hering berlin</a></h3>
<p>
	<a href="http://www.heringberlin.com/en" rel="nofollow" target="_blank"><img alt="20个优秀的网站导航设计案例" src="http://www.yixieshi.com/uploads/allimg/120110/014Z95K1-19.jpg" /></a></p>

				<p>本文链接：<a href="http://www.yixieshi.com/web/10145.html" target="_blank">http://www.yixieshi.com/web/10145.html</a></p><img src="http://www1.feedsky.com/t1/594961484/yixieshi/feedsky/s.gif?r=http://item.feedsky.com/~feedsky/yixieshi/~8269072/594961484/6372261/1/item.html" border="0" height="0" width="0" style="position:absolute" />]]>
</description>
<dc:creator>包子</dc:creator>
<pubDate>Tue, 10 Jan 2012 01:48:20 +0800</pubDate>
</item>
<item>
<title>浅析图标的微观世界——从符号学说起</title>
<link>http://www.itfeed.cn/post.asp?id=7449</link>
<description>
<![CDATA[<p><a href="http://cdc.tencent.com/?p=5038" target="_blank"><img src="http://cdc.tencent.com/wp-content/uploads/2012/01/banner.jpg"/></a></p><p>　　自图形用户界面这个概念诞生于1970年施乐完成的第一个WIMP演示以来，使得计算机用户界面从字符发展过渡到了图形时代。经过不足半世纪的迅速发展，纵观受人瞩目的苹果系统与大众化受益者的微软视窗系统，图形用户界面呈现出层出不穷的变化。面对这些精彩纷呈、感性与理性兼备的图形界面设计，图标元素无疑起着不可忽视的作用，想在此与大家一起探索下图标的微观世界。<span id="more-5038"></span></p>
<p>　　首先，先从符号学说起。</p>
<p><strong>什么是符号学？<br />
</strong>　　随着人类社会的发展和文明的与日俱增，符号世界日渐丰富完善。早在过去的原始时期，符号交流就产生于结绳记事、图腾仪式、象形文字的人类文明中。从具体质朴的物理世界到抽象丰富的符号世界，人类精神文化中所有形式都是符号活动的产物。<br />
　　“符号”——记号、标记、信息的载体，是一种感官系统所感知的对象，对象代表一定的事物，集体所认同的公共约定。 利用简单的代号代表复杂事物或概念。同时它具有认知与交际的功能，通过符形来传达信息。<br />
　　符号学自19世纪以来就以语言学为源头出现，随后源于结构主义语言学、逻辑学、文化哲学和美学这三种学术领域探索，现代符号学由此诞生。针对语言的符号性质，在我国先秦时期就对其投入关注，数千年前的《易经》堪称符号学史上一大奇迹，它建立了包含今天所说的语构学、语义学和语用学的完整符号系统。<br />
　　符号学在图形用户界面中的表现属于应用层面，在符号学应用研究领域的探索，国外涉入较早。符号学的传播方式有三种，其一适用于互联网环境下的传播方式为：共同经验传播模式。这种模式基于编码者与解码者之间的共同经验范围所交集形成的共同认知，最后促成我们所说的具有约定俗成特性的符号。</p>
<p><img class="aligncenter size-full wp-image-5039" src="http://cdc.tencent.com/wp-content/uploads/2012/01/1.jpg" alt="" width="711" height="328" /><br />
 <br />
<strong>符号学部分理论学<br />
　　</strong>索绪尔与皮尔斯是符号学研究领域的先驱者，索绪尔的结构主义符号学为欧洲符号学研究奠定了基础概念，他将符号学分解为能指（Signifier）和所指(Signified)即指称物和被指称物两个部分，也就是形式与内容。</p>
<p><img class="aligncenter size-full wp-image-5040" src="http://cdc.tencent.com/wp-content/uploads/2012/01/2.jpg" alt="" width="715" height="509" /></p>
<p>　　相对于索绪尔的研究方法是围绕能指和所指两个侧面展开的二元化，皮尔斯则是三元化的研究方法。他认为符号学含有符号、客观对象、解释这三项，弥补触及了索绪尔没有涉及的部分。皮尔斯是美国的实用主义哲学者，他的符号学理论建立在对意义、表征、符号概念的逻辑学研究基础之上，概括起来为三种范畴：设计感觉质，人的经验，思维三个层面。即媒介物、对象指涉、解释这三要素构成的三角形关系。他的理论具有普适性，适用于任何领域，被称为“广义符号学”。听到为数最多的要数对象关联层下的三个下位符号：图像符号（icon）、标识符号（Index）和象征符号（Symbol）。</p>
<p><img class="aligncenter size-full wp-image-5041" src="http://cdc.tencent.com/wp-content/uploads/2012/01/3.jpg" alt="" width="711" height="532" /></p>
<p>　　图标微观世界中的符号学自然也有在三个范畴层面上的表现，本文着重围绕对象关联层进行进一步探讨。</p>
<p><strong>图标对象关联层</strong></p>
<p><img class="aligncenter size-full wp-image-5042" src="http://cdc.tencent.com/wp-content/uploads/2012/01/4.jpg" alt="" width="710" height="487" /></p>
<p>　　图像符号的表征方法为对对象的写实或者模仿来表征的，建立在相似性基础上，有明显的可感知特性。比如计算机操作系统中的回收站用垃圾桶来表意；用折了角的纸代表文档；文件夹的含义直接采用文件夹工具图标来表征。图像符号的设计让用户在使用认知过程中带有愉悦感，一方面形态语义比较直观易懂；另一方面在身处非物质化时代下，对虚拟世界的认知能立刻联想到现实中的物理世界，这也是为什么如今的图形界面中越来越多呈现出“拟物化”设计。</p>
<p><img class="aligncenter size-full wp-image-5043" src="http://cdc.tencent.com/wp-content/uploads/2012/01/5.jpg" alt="" width="720" height="287" /></p>
<p>　　标识符号则不是像图形符号直接描摹对象事物的形态，它与表征对象存在着因果或者接近的逻辑性的联系。人们在日常生活中最为常见的要属公共导向中的指示符号，鉴于导向系统中的建筑物出口处通常用“门”这个图形概念来表征，所以沿用到图形用户界面中网站的首页，通常采用小房子图形来表征用户的浏览步骤一直退后到当前网站的“家门口”，即首页。而图形用户界面中还大量得运用了上下左右不同方向，直线型或曲线型的箭头，它们都来自传统的公共导向系统中。包括界面中常用的“刷新”图标，源于国际环保组织统一认证标识中的“循环利用回收”标识简化而来的。</p>
<p>　　除此以外，导航、菜单、搜索、等交互控件的链接节点也都是标识符号。</p>
<p><img class="aligncenter size-full wp-image-5044" src="http://cdc.tencent.com/wp-content/uploads/2012/01/6.jpg" alt="" width="720" height="187" /></p>
<p>　　象征符号则与表征的对象没有相似性或直接的联系，它是庞大图形符号中最为抽象含蓄的表意符号。它所指涉的对象与本身没有造型上的相似或关联，而是在性质上有相似之处，它是群体在长期的劳动实践中形成的约定俗成的表征方式。例如公司标识、文字、数字、颜色、姿势、旗帜、宗教形象，这些带有浓烈的社会文化背景的符号都属于象征符号。例如最早出现于微软XP操作系统中的共享图标为一个托手的形态来表征，至今沿用于其他界面媒介共享语义的图标中；又例如竖起大拇指在网页中表征“支持”的语义，这些属于手势象征符号范畴。代表产品或者公司企业形象的Logo，通常作为其网站的导航栏上的“首页”图标，这也是作为象征符号的用法。</p>
<p>　　在图形用户界面中采用象征符号的情况下，尤其需要谨慎地对待，因为由于各个民族具有自己群体的共识符号，不利于跨国界交流。我们提倡在本地化的语境中强调民族化的元素符号，而在全球化的语境中仍然是需遵循跨地域跨文化的符号运用准则。甚至是同一地域中的文化在不同时期也会出现持有符号意义的变化。</p>
<p><img class="aligncenter size-full wp-image-5045" src="http://cdc.tencent.com/wp-content/uploads/2012/01/7.jpg" alt="" width="720" height="270" />         </p>
<p><strong>图形的语义识别<br />
　　</strong>通常图形界面中的图标在方寸像素之间来说明它所包含的复杂对象，是一件很有难度的事。因此需要适当去除图形的杂音信息，保留图标中简明扼要的信息，让用户关注在应该被关注之处，不是信息量越大越好。</p>
<p><img class="aligncenter size-full wp-image-5046" src="http://cdc.tencent.com/wp-content/uploads/2012/01/8.jpg" alt="" width="710" height="266" /></p>
<p>　　Scott McCloud在《Understanding Comics》一书中对动画形象的分析，卡通形象的普适性说明了卡通程度越高，能代表的人群就越多。因此图标的形态简洁程度与细节的取舍决定了图形所能指涉的对象的范围。如图图标的高识别性区间落于写实性纬度的中间，也充分说明了图标过于简单或复杂，会扩散或减小指涉范围，必须平衡好这个度。</p>
<p><img class="aligncenter size-full wp-image-5047" src="http://cdc.tencent.com/wp-content/uploads/2012/01/9.jpg" alt="" width="714" height="392" /></p>
<p><strong>共时性与历时性 </strong> <br />
　　共时态即指一段时期内，同一个符号具有不同的指涉事物；历时态经历了长时期的变化，不同符号指涉同一事物。图标设计中的历时性体现在基于文化特征下的图形符号隐喻，这里有两个屡试不爽的例子。例如软盘的图标一直以来表示存盘，仅仅是对于传统文化的延续。“存储”这个概念，在实现世界中经历了软盘、硬盘的符号演变。2010年最为受争议的iTunes 10 图标，用了很多年的光盘介质被替换为没有特别指涉的圆形质感符号，这恰好说明了整个软件在服务方面的定位调整与目前的图标符号更为相符。</p>
<p><img class="aligncenter size-full wp-image-5048" src="http://cdc.tencent.com/wp-content/uploads/2012/01/10.jpg" alt="" width="720" height="294" /></p>
<p><strong>图形语言的语法分析<br />
　　</strong>在20世纪80年代以后，德国欧芬巴赫设计学院产品设计专业的J.格罗斯（Jochen Gros）教授从事了一种新的图形语言的探索。该课题试图探讨将自然语言的词法和句法规则相适应的图形符号来构建一种视觉语言。这个系统做到了呈现线性的图形序列是可读的，并且作为图形符号组成的文本是流畅的。这一图形语言系统充分考虑到不同文化背景的因素，顾及到了欧洲以外图形语言的不同逻辑性。同时它相比之前的一些交通符号系统或者建筑导向系统标识图形，在意义内涵上表达的精确度都有很大提高，使跨文化跨国际的全面快速高效的人际交流成为可能。这套图形语言系统中分别用粗细线来标明图形中的文本语境、动词、形容词、主谓宾等结构。</p>
<p><img class="aligncenter size-full wp-image-5049" src="http://cdc.tencent.com/wp-content/uploads/2012/01/11.png" alt="" width="720" height="576" /></p>
<p><strong></strong> </p>
<p><strong>符号操作与图标组合规则<br />
　　</strong>符号的建立需要经历符号化的过程，在符号的操作方法具体包括“代入”、“添加”、“结合”、“迭代”等方法。运用到具体的图标组合规则中，结合代数运算符，图标组合的方法也自有一套图标代数理论：组合COM，标记MAR，情景解释CON，增强ENH，倒置INV，索引IDX。<br />
　　组合COM(X，Y)，把X和Y的语义合并来进行概念的合并。如用地球和数据连接的两个概念组合为网络信息连接这个图标语义。<br />
　　标记MAR运算符的表示方法为MAR（X，Y），以符号X在符号Y上作标记，从而强调符号Y的局部特性。如图放大镜标记“+”表示放大的操作语义。<br />
　　情景解释CON（X，Y）指在情景Y中置入X的含义，往往是对X的一个特殊作用。如图带有W文本字样的文件情景中含有“DOCX”纸条字样，由此突显这是一个word格式的文档文件。</p>
<p><img class="aligncenter size-full wp-image-5050" src="http://cdc.tencent.com/wp-content/uploads/2012/01/12.jpg" alt="" width="720" height="287" /><br />
　　增强ENH（X,Y）用附加属性Y来增强图标X的概念，目的在于增强X的属性含义。如图由增加这个属性来增强人头像的个数，可以表示群组的概念。<br />
　　倒置运算符INV（X）中只有一个变量X，运算值表示否定，与“不”是同义词。这种形式的图标经常用于同一个图标的是与非的状态切换，相当于单联开关。例如重点标记过的对象用实心的五角星，而没有重点标记过的则用空心描线型的图标。<br />
　　索引运算符IDX（X）用于抽象地得出图标的属性。如图Font Row是Mac OS X中的原生播放器，它利用隐喻的手法，将舒适的座椅作为该软件的Logo图标，目的在于让用户从舒适的座椅联想到美妙的视听享受。</p>
<p><img class="aligncenter size-full wp-image-5051" src="http://cdc.tencent.com/wp-content/uploads/2012/01/13.jpg" alt="" width="720" height="332" /><br />
 <br />
<strong>未来的变化在哪里？</strong><br />
 　　计算机技术日新月异的变化给予设计师们带来崭新的舞台，计算机技术的发展进步与用户的实际需求，这两个推动力很大程度上决定了GUI范式发展的方向。<br />
　　首先，自然与和谐的“零界面”无疑是未来的一大发展方向，今后的形态将是以图形用户界面为基础的下一代人机交互界面，集成大量自然语言、触控等多通道传播方式，更积极地促进人与人、人与世界、人与自然之间的交流。在这样的大势所趋下，图标的形态会如何发展呢？<br />
　　总体呈现出时代性与个性化的视觉符号形态：大图标尺寸被普遍运用；精致、细节、艺术个性化；材质趋于模拟还原真实自然，即拟物化；剪影图标将越发精致小巧；iOS移动端app图标在众多优秀作品中披上了强烈设计感的圆角状外衣。</p>
<p><img class="aligncenter size-full wp-image-5052" src="http://cdc.tencent.com/wp-content/uploads/2012/01/14.jpg" alt="" width="719" height="481" /></p>
<p>　　纵观那么多优秀的图标设计，艺术化、涂鸦风格、剪影、3D、写实风、甚至于多种材质手法，软陶概念图标等创作，从技术上而言，几乎无所不能了。除此以外，我们还能有更多的可能性猜测与尝试吗？<br />
　　本人先来抛个砖，曾经有工造的老师和学生一起谈过过什么是时尚的问题，从某种意义上来说，对历史的追溯，复古情结未必不可尝试，利用现今的手法来描绘图形界面刚孵出雏形时的像素图标，又会是一番怎样的景象。<br />
　　这里分享一个苹果的博物馆珍藏界面网站： <a title="The Vintage Mac Museum" href="http://www.d4.dion.ne.jp/~motohiko/index.htm" target="_blank">The Vintage Mac Museum</a></p>
<p><img class="aligncenter size-full wp-image-5053" src="http://cdc.tencent.com/wp-content/uploads/2012/01/15.jpg" alt="" width="720" height="528" /></p>
<p>　　包括CSS 3不知何时能普及技术的情况下，设计师运用编码的逻辑思维结合图形的具象思维，会有更多有想法有趣的东西值得我们去期待，去亲自享受这个过程。<br />
　　<a href="http://www.red-team-design.com/wp-content/uploads/2011/09/awesome-css3-buttons.html">http://www.red-team-design.com/wp-content/uploads/2011/09/awesome-css3-buttons.html</a></p>
<p><img class="aligncenter size-full wp-image-5054" src="http://cdc.tencent.com/wp-content/uploads/2012/01/16.jpg" alt="" width="719" height="419" /></p>
<p>　　最后，少不了的出场——全球统一与多元并存，不同地域的人们拥有不同的文化传统，在全球化的背景下，全化是世界面临的文化主流，同时本土化是人文维护的文化特征。<br />
　　由于文章篇幅有限，着重探讨“对象关联物”层面，媒介层与解释层则不赘述了，望大家多多包涵。</p>
<p>(本文出自腾讯CDC博客: <a href="http://cdc.tencent.com/?p=5038" target="_blank">http://cdc.tencent.com/?p=5038</a>)</p>]]>
</description>
<dc:creator>腾讯CDC</dc:creator>
<pubDate>Thu, 05 Jan 2012 10:58:23 +0800</pubDate>
</item>
<item>
<title>品牌影响力评估方法探讨</title>
<link>http://www.itfeed.cn/post.asp?id=7391</link>
<description>
<![CDATA[<p>近期，聚划算在各类媒体上投放了大量广告，迅速传播了聚划算的品牌形象，在非淘宝用户中培养了品牌认知，同时也在淘宝用户中巩固了品牌理解，从而对聚划算提升品牌价值起到积极作用。</p>
<p>在投放广告前，用研团队Q3时曾对聚划算的品牌影响力进行了考察，着重于六个主要指标：</p>
<p>——熟悉度：用户知道并且了解该品牌的程度，反映市场的表现和地位</p>
<p>——流行度：流行的/大众接受的品牌，反映市场的表现和地位</p>
<p>——相关性：品牌以及产品是否适合目标人群，是品牌资产的基础</p>
<p>——独特性：该品牌区别于其他品牌，反映品牌超越竞争对手的能力和品牌的前景</p>
<p>——高质性：用户感知的质量，是品牌长存最基本的要素</p>
<p>——信任度：用户是否信任，反映品牌带给用户利益和权益的能力</p>
<p>这六个指标在市场调研行业，普遍应用于品牌研究，且每个指标用一句话表述，形成量表，用户填答成本不大。本次移植到互联网创新产品的研究中，基本能达到预期的研究目的。<strong>本文不对聚划算的品牌影响力作深入分析，而侧重于分析方法的探讨。</strong></p>
<p>&nbsp;</p>
<p><strong>指标降维</strong></p>
<p>本例中通过六个指标评估聚划算的品牌影响力，但可以发现这六个指标之间存在很强的相关性（相关系数均超过0.5，且非常显著正相关），进行综合评估时，需要考虑简化指标。</p>
<p>一般而言，采用主成分分析法或因子分析法。大多数情况下，主成分分析得到的主成分不易解释，而通过因子旋转都可以减少主成分中常有的含糊性，可以使因子负荷的结构更简单，从而更有利于因子的解释。另外，常用软件可以直接输出因子得分的值，而主成分的值需要重新手动计算。</p>
<p>首先对六个指标做因子分析，得到的KMO值为0.891，Bartlett球形检验的值为2747210.409（df=15）达到显著，非常适宜进行因子分析。最终萃取出2个公因子，累积方差贡献率为84.6%（详见下表），解释效果很强；变量原始矩阵与重构矩阵之间的残差&gt;0.05的个数比例为26%，拟合效果较好。</p>
<p><a href="http://ued.taobao.com/blog/wp-content/uploads/2011/12/品牌影响力指标.jpg"><img class="alignnone size-full wp-image-4921" src="http://ued.taobao.com/blog/wp-content/uploads/2011/12/品牌影响力指标.jpg" alt="" width="594" height="280" /></a></p>
<p>通过因子载荷矩阵能够发现，第一公因子更侧重使用了聚划算之后的心理认知，而第二公因子则更体现事实和现象的感知，因此将第一公因子命名为深层特征，第二公因子命名为表层特征。</p>
<p>另外，相关性指标在两个公因子上的载荷均比较大，一般在考虑建构效度的时候，会把在不同公因子载荷都较大的指标删掉，但本例并不追求建构效度，而是希望尽可能保留指标体系中的指标，达到降维的目的作进一步分析，因此没有删除相关性指标。</p>
<p>&nbsp;</p>
<p><strong>计算品牌影响力综合得分</strong></p>
<p>有了两个公因子得分，仍然不能做综合评估。为了更加简化，最终使用一个数据体现品牌综合影响力，需要进一步计算。</p>
<p>因子分析的综合得分需要利用各因子的特征根与因子得分，本例的计算方程如下：</p>
<p><strong>单个样本的综合得分=（特征根1）/（特征根1+特征根2）*公因子1得分+（特征根2）/（特征根1+特征根2）*公因子2得分</strong></p>
<p>由于因子得分是标准化分数，计算得到的综合得分也是标准化分数，需要转化成0-100的数，以便直观体现品牌综合影响力。需要作如下处理：</p>
<p><strong>单个样本品牌综合影响力得分=（单个样本的综合得分—所有样本的综合得分最小值）/（所有样本综合得分的最大值—最小值）*100</strong></p>
<p>如此，就能得到每个样本对聚划算的品牌综合影响力分数，进行不同群体间的对比分析。</p>
<p>&nbsp;</p>
<p><strong>对比群体间品牌影响力差异</strong></p>
<p>首先，对男女群体做差异性检验。经独立样本T检验分析可知，男女对聚划算的品牌影响力存在显著差异，男性对聚划算的综合评估更高；</p>
<p>其次，对不同城市级别的群体做差异性检验。经卡方检验（两两比较）可知，不同城市级别用户对聚划算的品牌影响力存在非常显著差异，三线城市用户对聚划算的品牌影响力综合评估最高，而一线城市则综合评估偏低。</p>
<p>&nbsp;</p>
<p>经过聚划算业务的调整以及品牌广告传播，相信品牌影响力得分会有较大幅度的提升，有待后续研究验证。</p>
<p>&nbsp;</p>
<p><strong>小结</strong></p>
<p>品牌影响力的评估方法，基本操作流程如下：</p>
<p>1、确定评估的分项指标；</p>
<p>2、通过因子分析（或主成分分析），给分项指标降维，并计算公因子得分；</p>
<p>3、计算公因子的综合得分，并转化成0-100的直观分数；</p>
<p>4、对比不同群体的品牌影响力综合得分。</p>
<p>Copyright © 2011 Taobao UED 渡劫（范欣珩）. All Rights Reserved.</p>
]]>
</description>
<dc:creator>淘宝UED</dc:creator>
<pubDate>Sat, 31 Dec 2011 23:32:25 +0800</pubDate>
</item>
<item>
<title>腾讯视频品牌形象设计</title>
<link>http://www.itfeed.cn/post.asp?id=7366</link>
<description>
<![CDATA[<p><a href="http://cdc.tencent.com/?p=5012" target="_blank"><img src="http://cdc.tencent.com/wp-content/uploads/2011/12/banner5.jpg"/></a></p><p><img class="aligncenter size-full wp-image-5013" src="http://cdc.tencent.com/wp-content/uploads/2011/12/18.jpg" alt="" width="490" height="40" /></p>
<p>　　腾讯视频是一个综合视频门户，旨在打造中国最大的云视频服务平台，此前QQLive投射到的路径不多，在用户规模上与竞争对手相比不具备优势，难以打造在业界视频类产品影响力 ，2011年4月，腾讯视频使用域名为原腾讯博客V.QQ.COM将QQ LIVE网站与客户端归入其中同步运作，统一腾讯视频平台域名及对外接口，形成独立品牌，内容以电影、电视剧、综艺、音乐、新闻、时尚、科技多纬度运营,支持内容丰富的在线点播及电视台直播，降低了用户门槛并希望提高用户的覆盖率，通过客户端，网站，移动终端多种产品形态，满足不同用户的需求，以实现更好的广告商业模式。<br />
　　在以上资源整合后，我们了解腾讯视频迫切的需要一个全新的品牌形象，来提升品牌影响力，扩大用户认知度及对品牌的忠诚度。</p>
<p><img class="aligncenter size-full wp-image-5015" src="http://cdc.tencent.com/wp-content/uploads/2011/12/27.jpg" alt="" width="450" height="40" /></p>
<p><img class="aligncenter size-full wp-image-5016" src="http://cdc.tencent.com/wp-content/uploads/2011/12/35.jpg" alt="" width="720" height="315" /></p>
<p><img class="aligncenter size-full wp-image-5017" src="http://cdc.tencent.com/wp-content/uploads/2011/12/45.jpg" alt="" width="450" height="40" /></p>
<p>　　前期调研我们归纳出目前市面上视频产品所强调的定位，及人们对此类产品提出的感受在功能上主要强调的特点：高清、正版、品质、直播。</p>
<p><img class="aligncenter size-full wp-image-5018" src="http://cdc.tencent.com/wp-content/uploads/2011/12/64.jpg" alt="" width="720" height="567" /></p>
<p><img class="aligncenter size-full wp-image-5019" src="http://cdc.tencent.com/wp-content/uploads/2011/12/73.jpg" alt="" width="450" height="40" /></p>
<p>　　我们更希望产品定位强调的不只是普通功能，更多的去体现人文关怀和情感的传达，真正的品牌是源自消费者的生活形态，甚至是高于他们生活的，是一种对于生活的期待，如果品牌领先其对手的原因是产品属性，那么这个品牌有可能在将来被其他产品所代替，腾讯视频期望给予用户的是自由生活的一种精神感受，而不仅仅是一种工具和产品。</p>
<p><img class="aligncenter size-full wp-image-5021" src="http://cdc.tencent.com/wp-content/uploads/2011/12/82.jpg" alt="" width="450" height="40" /></p>
<p>　　接下来通过与感性的关键词出发从生活场景中去寻找相关的图片，代表丰富，轻松，娱乐。漂浮的五彩气球，自由的鱼群，天空草地，盛放的花朵，从这些自然的生命中找到了相应的契合点，通过收集的图片，品牌组同学进行了一次头脑风暴，大家随心所欲的画下心中想象的元素和图形，一次轻松有趣的散发过程结束后再进行统一的整理和分析。</p>
<p><img class="aligncenter size-full wp-image-5022" src="http://cdc.tencent.com/wp-content/uploads/2011/12/92.jpg" alt="" width="720" height="544" /></p>
<p>　　在大家的手稿中，我们排除了过于写实的胶片，摄影机等元素，从品牌的角度上来说，这一类图形过于写实了，使产品含义受到局限，没有一种更深的内涵,很容易停留在只是工具的概念上,不够神秘太过直白，与我们前期的定位不相符合。我们发现鱼的造型和三角形的播放键造型非常吻合，也代表了自由快乐，娱悦的精神感受，希望通过这个抽象的造型进一步延伸。</p>
<p><img class="aligncenter size-full wp-image-5023" src="http://cdc.tencent.com/wp-content/uploads/2011/12/103.jpg" alt="" width="720" height="461" /></p>
<p>　　在方向上进行定位后，进入上机实现阶段，参考之前搜集的素材和确定的手稿，去表现轻松自由，轻质感，动态、丰富多彩又属于视频类产品的图形。</p>
<p><img class="aligncenter size-full wp-image-5024" src="http://cdc.tencent.com/wp-content/uploads/2011/12/113.jpg" alt="" width="450" height="40" /></p>
<p><img src="http://cdc.tencent.com/wp-content/uploads/2011/12/123.jpg" alt="" width="720" height="432" /></p>
<p><img class="aligncenter size-full wp-image-5026" src="http://cdc.tencent.com/wp-content/uploads/2011/12/133.jpg" alt="" width="720" height="600" /></p>
<p><img class="aligncenter size-full wp-image-5028" src="http://cdc.tencent.com/wp-content/uploads/2011/12/143.jpg" alt="" width="450" height="40" /></p>
<p>　　在后期的推广中，更希望能延续这种轻松活跃丰富的印象，辅助图形组合多变，能更适用于视频制作推广时使用，有效地辅助视觉识别系统的应用。</p>
<p><img src="http://cdc.tencent.com/wp-content/uploads/2011/12/153.jpg" alt="" width="720" height="600" /><br />
<img class="aligncenter size-full wp-image-5029" src="http://cdc.tencent.com/wp-content/uploads/2011/12/162.jpg" alt="" width="720" height="600" /></p>
<p><img class="aligncenter size-full wp-image-5030" src="http://cdc.tencent.com/wp-content/uploads/2011/12/171.jpg" alt="" width="720" height="480" /><br />
<img class="aligncenter size-full wp-image-5031" src="http://cdc.tencent.com/wp-content/uploads/2011/12/181.jpg" alt="" width="720" height="633" /><br />
<img class="aligncenter size-full wp-image-5032" src="http://cdc.tencent.com/wp-content/uploads/2011/12/19.jpg" alt="" width="720" height="480" /></p>
<p><img class="aligncenter size-full wp-image-5033" src="http://cdc.tencent.com/wp-content/uploads/2011/12/20.jpg" alt="" width="450" height="40" /></p>
<p>　　新品牌形象发布后，通过悉心运营推广，腾讯视频用户倍增，未来将希望通过更多的推广来提升品牌的影响力。<br />
　　品牌形象是用户认知产品的重要途径，是一种被人管理和传承的气质，我们所需做的设计不仅是一个LOGO而是去注意设计用户能接触的每一样细节，意识周边物料的重要性和统一的感官，品牌建设并非一朝一夕，还有许多的不完善需要努力，希望与大家有更多的摸索和探讨，给予我们更多的建议。</p>
<p><img class="aligncenter size-full wp-image-5034" src="http://cdc.tencent.com/wp-content/uploads/2011/12/211.jpg" alt="" width="283" height="200" /></p>
<p>腾讯视频官方网站<a href="http://v.qq.com/">http://v.qq.com/</a><br />
腾讯视频IPAD　<a href="http://itunes.apple.com/cn/app/id407925512?mt=8">http://itunes.apple.com/cn/app/id407925512?mt=8</a></p>
<p>(本文出自腾讯CDC博客: <a href="http://cdc.tencent.com/?p=5012" target="_blank">http://cdc.tencent.com/?p=5012</a>)</p>]]>
</description>
<dc:creator>腾讯CDC</dc:creator>
<pubDate>Sat, 31 Dec 2011 11:40:12 +0800</pubDate>
</item>
</channel>
</rss>
