<?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>&#34;有意思&#34;的用户体验团队 &#187; 视觉设计</title>
	<atom:link href="http://www.kdued.com/category/ui/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.kdued.com</link>
	<description>数据 用研 交互 视觉 做有品质的体验设计</description>
	<lastBuildDate>Fri, 03 Feb 2012 02:04:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>广告创意，是否已离你我远去</title>
		<link>http://www.kdued.com/2012/02/%e5%b9%bf%e5%91%8a%e5%88%9b%e6%84%8f%ef%bc%8c%e6%98%af%e5%90%a6%e5%b7%b2%e7%a6%bb%e4%bd%a0%e6%88%91%e8%bf%9c%e5%8e%bb-2/</link>
		<comments>http://www.kdued.com/2012/02/%e5%b9%bf%e5%91%8a%e5%88%9b%e6%84%8f%ef%bc%8c%e6%98%af%e5%90%a6%e5%b7%b2%e7%a6%bb%e4%bd%a0%e6%88%91%e8%bf%9c%e5%8e%bb-2/#comments</comments>
		<pubDate>Fri, 03 Feb 2012 01:59:28 +0000</pubDate>
		<dc:creator>qiyuexiaohuo</dc:creator>
				<category><![CDATA[视觉设计]]></category>
		<category><![CDATA[广告创意]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=1228</guid>
		<description><![CDATA[&#160; 往往在一个企业呆太久，或者被一两个客户折磨得太惨，我们会慢慢失去了有意思的创意，而有意思的创意居然变成了拿设计大奖的飞机稿。在互联网广告铺天盖地并且雷同的今天，有意思的广告不仅成为互联网精神的展现，同时也成为战胜对手，取得消费者关注的利器。 &#160; 广告的渗透 随着交互媒介的扩展，注意力的持续时间日益缩短。而对于那些试图以说明格式推广其产品或服务的公司，任务将是富有挑战性的，难度也不小。在饱和度很高的广告市场，富有创意的广告是吸引受众的少数有效方法之一。这类广告不仅能使受众的接受度大大提升，而且仍然是大家所乐意关注的领域。 &#160; &#160; 广告作为企业、产品营销手段中的一种载体,或多或少对消费者接受产品起到较重的决策性，要不然我们不会整天抱怨广告的质量。消费者往往更愿意接受让他们感觉到尊重与至少看上去可信赖的产品。好的广告吸引消费者阅读、推荐，并且广告语成为日常用语，差的广告往往适得其反，不仅付之白花花的广告费如流水，甚至会触怒它的上帝，后果很严重。 &#160; 昨日的苦恼 但是绝大多数的企业决策者，产品总监，甚至一些设计师似乎并不知道这些，他们的常见诉求是越大越好的产品图片，越大越好的LOGO尺寸，越大越好的产品介绍文字等等，因为他们认为这样就叫做视觉冲击力,导致的直接结果就是现在大家看到的是千篇一律、毫无想象力的产品介绍，他们的口吻永远都是我们的产品的好处在哪，所以为您提供了什么。长期的产品介绍会让人失去对品牌、产品的新鲜感而产生抵抗心理。 &#160; &#160; 其实，按照普遍企业所说的让人记住他的产品，他的品牌，这没有错，这也确实就是广告所带来的价值。但是方式却是有很多种的，并不仅仅只是放大图片，放大标志来吸引受众的眼球，那只是广告设计中最基础的一部分，很多让人印象深刻的东西往往是那种曾相识，切中软肋的点子，可口可乐和百事可乐只喝其中一种，麦当劳和肯德基只消费其中之一，公司通过广告企图得到更多的回报，必须在整体氛围或者理念上与消费者的思想产生共鸣。 &#160; &#160; 回想一下你刚刚看过的这些广告，这些你看上去新鲜并且不让你讨厌的广告他们其实有一个共同点，就是他们看上去并没有那么讨厌，有点幽默，或者说你至少希望在广告上多呆上几分钟去看看其中含义，看清楚它的产品。这或许有悖于广告的本意，但本编觉得，至少这不是一个没有意义的广告，不会埋没在广告海洋当中充当其中的一个小水滴，他已经完成了它的使命，并且最大限度的获得了关注。而很多时候，找一堆朋友去看明白一个广告也成为一部分人茶余饭后的一项娱乐活动。不得不否认创意广告带来的影响力。 &#160; 其实说了这些，我们还得回到我们的实际当中，企业文化广告着实让人感觉沮丧，本编也努力改变设计师在其中的限制和束缚。这是俺们公司及时奖励的海报，我将习以为常的冷漠的说辞翻译成了稍微带点感情色彩的语句，画面也因此而得。我的设想是每次有人拿了奖励我们就给他拍张拥抱或者握手的照片，以切合更具感情色彩的词语“祝贺你，辛苦了”。 &#160; &#160; 匆匆一小时赶稿，让大家见笑了，这么厚脸皮好意思拿出来只是想说明，只要我们努力去改变束缚，敢于尝试，始终能有实现个人创意的机会，怕就怕越做越不知道创意的事该由谁来做。 &#160; 我们应该觉醒 广告不是一个企业，一个产品唯一的生命能源，一个产品从出生到被消费者购买、使用，广告只能占行销方式中的一隅，其中还有公关，促销，渠道等等。。。话又说回来广告说来说去就那么简单，就是说句话给消费者听，关键点也就在这里，怎么样把这句话说好，说些什么消费者才爱听，在广告中是没有用户体验这一说法的，但是广告却在做着用户体验的事情，这就需要我们从生活中摄取创意，也就是说话的方式。 &#160; 广告出生的意义就是给大众看懂的，但在今天，大量的广告渗透到生活当中的时候,海量的广告信息往往容易削弱人的记忆能力，大家都在寻找创意，去吸引人的注意力，其实互联网公司产品更应如此，在未来的几年时间里，使用互联网产品的用户将主要是80后，90后，我们也必须转变我们的宣传方式，广告方式，找到一种与这个年代的人的对话方式。 &#160; 设计师包益民，他说过一句话“我们学习英文，有人拿来发短信，有人却写出了《哈利波特》”，其实这话放在哪都适用，因此联想到，广告设计并不仅仅只是拿来做图画，它真正的意义应该像《哈利波特》一样，创造思想，改变世界。 &#160;]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.kdued.com/wp-content/uploads/广告的幽默设计图.jpg" alt="" width="661" height="254" /></p>
<p>&nbsp;</p>
<p>往往在一个企业呆太久，或者被一两个客户折磨得太惨，我们会慢慢失去了有意思的创意，而有意思的创意居然变成了拿设计大奖的飞机稿。在互联网广告铺天盖地并且雷同的今天，有意思的广告不仅成为互联网精神的展现，同时也成为战胜对手，取得消费者关注的利器。<img src="http://www.kdued.com/wp-includes/js/tinymce/plugins/wordpress/img/trans.gif" alt="" /></p>
<p><span id="more-1228"></span></p>
<p>&nbsp;</p>
<p>广告的渗透</p>
<p>随着交互媒介的扩展，注意力的持续时间日益缩短。而对于那些试图以说明格式推广其产品或服务的公司，任务将是富有挑战性的，难度也不小。在饱和度很高的广告市场，富有创意的广告是吸引受众的少数有效方法之一。这类广告不仅能使受众的接受度大大提升，而且仍然是大家所乐意关注的领域。</p>
<p>&nbsp;</p>
<p><a href="http://www.kdued.com/2012/02/%e5%b9%bf%e5%91%8a%e5%88%9b%e6%84%8f%ef%bc%8c%e6%98%af%e5%90%a6%e5%b7%b2%e7%a6%bb%e4%bd%a0%e6%88%91%e8%bf%9c%e5%8e%bb/%e5%b9%bf%e5%91%8a%e7%9a%84%e5%b9%bd%e9%bb%98%e8%ae%be%e8%ae%a1%e5%9b%be2/" rel="attachment wp-att-1216"><img src="http://www.kdued.com/wp-content/uploads/广告的幽默设计图2.jpg" alt="" width="662" height="461" /></a></p>
<p>&nbsp;</p>
<p>广告作为企业、产品营销手段中的一种载体,或多或少对消费者接受产品起到较重的决策性，要不然我们不会整天抱怨广告的质量。消费者往往更愿意接受让他们感觉到尊重与至少看上去可信赖的产品。好的广告吸引消费者阅读、推荐，并且广告语成为日常用语，差的广告往往适得其反，不仅付之白花花的广告费如流水，甚至会触怒它的上帝，后果很严重。</p>
<p>&nbsp;</p>
<p>昨日的苦恼</p>
<p>但是绝大多数的企业决策者，产品总监，甚至一些设计师似乎并不知道这些，他们的常见诉求是越大越好的产品图片，越大越好的LOGO尺寸，越大越好的产品介绍文字等等，因为他们认为这样就叫做视觉冲击力,导致的直接结果就是现在大家看到的是千篇一律、毫无想象力的产品介绍，他们的口吻永远都是我们的产品的好处在哪，所以为您提供了什么。长期的产品介绍会让人失去对品牌、产品的新鲜感而产生抵抗心理。</p>
<p>&nbsp;</p>
<p><a href="http://www.kdued.com/2012/02/%e5%b9%bf%e5%91%8a%e5%88%9b%e6%84%8f%ef%bc%8c%e6%98%af%e5%90%a6%e5%b7%b2%e7%a6%bb%e4%bd%a0%e6%88%91%e8%bf%9c%e5%8e%bb/%e5%b9%bf%e5%91%8a%e7%9a%84%e5%b9%bd%e9%bb%98%e8%ae%be%e8%ae%a1%e5%9b%be3/" rel="attachment wp-att-1217"><img src="http://www.kdued.com/wp-content/uploads/广告的幽默设计图3.jpg" alt="" width="662" height="405" /></a></p>
<p>&nbsp;</p>
<p>其实，按照普遍企业所说的让人记住他的产品，他的品牌，这没有错，这也确实就是广告所带来的价值。但是方式却是有很多种的，并不仅仅只是放大图片，放大标志来吸引受众的眼球，那只是广告设计中最基础的一部分，很多让人印象深刻的东西往往是那种曾相识，切中软肋的点子，可口可乐和百事可乐只喝其中一种，麦当劳和肯德基只消费其中之一，公司通过广告企图得到更多的回报，必须在整体氛围或者理念上与消费者的思想产生共鸣。</p>
<p>&nbsp;</p>
<p><a href="http://www.kdued.com/2012/02/%e5%b9%bf%e5%91%8a%e5%88%9b%e6%84%8f%ef%bc%8c%e6%98%af%e5%90%a6%e5%b7%b2%e7%a6%bb%e4%bd%a0%e6%88%91%e8%bf%9c%e5%8e%bb/%e5%b9%bf%e5%91%8a%e7%9a%84%e5%b9%bd%e9%bb%98%e8%ae%be%e8%ae%a1%e5%9b%be4/" rel="attachment wp-att-1218"><img src="http://www.kdued.com/wp-content/uploads/广告的幽默设计图4.jpg" alt="" width="662" height="385" /></a></p>
<p>&nbsp;</p>
<p>回想一下你刚刚看过的这些广告，这些你看上去新鲜并且不让你讨厌的广告他们其实有一个共同点，就是他们看上去并没有那么讨厌，有点幽默，或者说你至少希望在广告上多呆上几分钟去看看其中含义，看清楚它的产品。这或许有悖于广告的本意，但本编觉得，至少这不是一个没有意义的广告，不会埋没在广告海洋当中充当其中的一个小水滴，他已经完成了它的使命，并且最大限度的获得了关注。而很多时候，找一堆朋友去看明白一个广告也成为一部分人茶余饭后的一项娱乐活动。不得不否认创意广告带来的影响力。</p>
<p>&nbsp;</p>
<p>其实说了这些，我们还得回到我们的实际当中，企业文化广告着实让人感觉沮丧，本编也努力改变设计师在其中的限制和束缚。这是俺们公司及时奖励的海报，我将习以为常的冷漠的说辞翻译成了稍微带点感情色彩的语句，画面也因此而得。我的设想是每次有人拿了奖励我们就给他拍张拥抱或者握手的照片，以切合更具感情色彩的词语“祝贺你，辛苦了”。</p>
<p>&nbsp;</p>
<p><a href="http://www.kdued.com/2012/02/%e5%b9%bf%e5%91%8a%e5%88%9b%e6%84%8f%ef%bc%8c%e6%98%af%e5%90%a6%e5%b7%b2%e7%a6%bb%e4%bd%a0%e6%88%91%e8%bf%9c%e5%8e%bb/%e5%b9%bf%e5%91%8a%e7%9a%84%e5%b9%bd%e9%bb%98%e8%ae%be%e8%ae%a1%e5%9b%be5/" rel="attachment wp-att-1219"><img src="http://www.kdued.com/wp-content/uploads/广告的幽默设计图5.jpg" alt="" width="663" height="345" /></a></p>
<p>&nbsp;</p>
<p>匆匆一小时赶稿，让大家见笑了，这么厚脸皮好意思拿出来只是想说明，只要我们努力去改变束缚，敢于尝试，始终能有实现个人创意的机会，怕就怕越做越不知道创意的事该由谁来做。</p>
<p>&nbsp;</p>
<p>我们应该觉醒</p>
<p>广告不是一个企业，一个产品唯一的生命能源，一个产品从出生到被消费者购买、使用，广告只能占行销方式中的一隅，其中还有公关，促销，渠道等等。。。话又说回来广告说来说去就那么简单，就是说句话给消费者听，关键点也就在这里，怎么样把这句话说好，说些什么消费者才爱听，在广告中是没有用户体验这一说法的，但是广告却在做着用户体验的事情，这就需要我们从生活中摄取创意，也就是说话的方式。</p>
<p>&nbsp;</p>
<p>广告出生的意义就是给大众看懂的，但在今天，大量的广告渗透到生活当中的时候,海量的广告信息往往容易削弱人的记忆能力，大家都在寻找创意，去吸引人的注意力，其实互联网公司产品更应如此，在未来的几年时间里，使用互联网产品的用户将主要是80后，90后，我们也必须转变我们的宣传方式，广告方式，找到一种与这个年代的人的对话方式。</p>
<p>&nbsp;</p>
<p>设计师包益民，他说过一句话“我们学习英文，有人拿来发短信，有人却写出了《哈利波特》”，其实这话放在哪都适用，因此联想到，广告设计并不仅仅只是拿来做图画，它真正的意义应该像《哈利波特》一样，创造思想，改变世界。</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2012/02/%e5%b9%bf%e5%91%8a%e5%88%9b%e6%84%8f%ef%bc%8c%e6%98%af%e5%90%a6%e5%b7%b2%e7%a6%bb%e4%bd%a0%e6%88%91%e8%bf%9c%e5%8e%bb-2/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>设计与用户体验</title>
		<link>http://www.kdued.com/2009/04/%e8%ae%be%e8%ae%a1%e4%b8%8e%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c/</link>
		<comments>http://www.kdued.com/2009/04/%e8%ae%be%e8%ae%a1%e4%b8%8e%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c/#comments</comments>
		<pubDate>Thu, 30 Apr 2009 08:48:23 +0000</pubDate>
		<dc:creator>saidy</dc:creator>
				<category><![CDATA[工作相关]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[视觉设计]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=948</guid>
		<description><![CDATA[设计，用户说好，才是真的好！ 14期的友商联线，同事认为风格不美观，需要重新设计。 这次，我们引入了用户调研，调研数据可以帮助我们快速决策！ EDM设计的前提是： 1、友商联线将持续性的以邮件EDM的形式发给用户。 2、要考虑版式结构的延续性和扩展性。 3、要考虑邮件收发的速度性能。 4、品牌风格的传递。 根据这些前提，我们拟定了设计的基调： 1、框架必须简单，易于扩展。 2、图片精简再精简。装饰性设计集中在广告，及视觉引导的作用上。 3、要有联线的设计特色（这个做了3类风格供参选） 根据这些原则，我尝试做了很多种风格，最后聚焦在3种，方案一：是清爽有质感风格的设计；方案二：非常简洁大方的商务味道的设计；方案三：是有特色情感的风格设计。 最后我们联系了14位用户，请他们帮助调研。决策最终选用哪种方案。但因为时间紧迫，我们仅收到5个问卷反馈。 5份问卷的数据为： 1、无用户选择方案一； 2、设计风格和文字字体上，方案二均以4：1胜出； 3、阅读粘性上，方案二与方案三2：2。 虽然调研基础最少要12份，由于我们的时间有限，仅收到5份就开始总结，但方案二的优势还是很明显的。 最后，我们选定了方案二。 我总结了一下： 其实友商联线15期和14期，在风格设计上是近似的，都是商务风格，简洁大方，蓝色调子，右边为广告区域。视觉设计并没有新的改观和体验。 但内部同事反馈意见说，14期风格不好看，需要重新认真设计。回过头来，我们发现，单纯的设计回到了原点，提升和改进的其实是用户体验。So，不管需求还是规划提意见不能单单指：设计风格不好！更多要站在用户的角度去思考体验的改进！而设计师呢，不能仅仅只关注色调图片的装饰性效果，更多要关注视觉层面的交互设计体验（色彩、图片都是为内容服务的），要更多地多问问、多思考。 15期设计，修改的地方： 1、文字，用了14pix的字号，有助于阅读。 2、主要推送内容加了图片，目的是吸引用户的视觉，能快速聚焦到重要区域。 3、加了导航栏目，帮助用户快速进入其他链接内容。 4、加了hot、new小图标，有视觉引导提示性作用。 5、一级栏目、二级栏目标题，颜色做了区别，更加醒目。 6、加了友好的问候语。 7、规范了部分内容的文字描述。]]></description>
			<content:encoded><![CDATA[<p>设计，用户说好，才是真的好！<br />
14期的友商联线，同事认为风格不美观，需要重新设计。<br />
这次，我们引入了用户调研，调研数据可以帮助我们快速决策！</p>
<p>EDM设计的前提是：<br />
1、友商联线将持续性的以邮件EDM的形式发给用户。<br />
2、要考虑版式结构的延续性和扩展性。<br />
3、要考虑邮件收发的速度性能。<br />
4、品牌风格的传递。</p>
<p>根据这些前提，我们拟定了设计的基调：<br />
1、框架必须简单，易于扩展。<br />
2、图片精简再精简。装饰性设计集中在广告，及视觉引导的作用上。<br />
3、要有联线的设计特色（这个做了3类风格供参选）</p>
<p>根据这些原则，我尝试做了很多种风格，最后聚焦在3种，方案一：是清爽有质感风格的设计；方案二：非常简洁大方的商务味道的设计；方案三：是有特色情感的风格设计。</p>
<p><span id="more-948"></span></p>
<p>最后我们联系了14位用户，请他们帮助调研。决策最终选用哪种方案。但因为时间紧迫，我们仅收到5个问卷反馈。</p>
<p>5份问卷的数据为：<br />
1、无用户选择方案一；<br />
2、设计风格和文字字体上，方案二均以4：1胜出；<br />
3、阅读粘性上，方案二与方案三2：2。</p>
<p>虽然调研基础最少要12份，由于我们的时间有限，仅收到5份就开始总结，但方案二的优势还是很明显的。<br />
最后，我们选定了方案二。 我总结了一下：</p>
<p>其实友商联线15期和14期，在风格设计上是近似的，都是商务风格，简洁大方，蓝色调子，右边为广告区域。视觉设计并没有新的改观和体验。<br />
但内部同事反馈意见说，14期风格不好看，需要重新认真设计。回过头来，我们发现，单纯的设计回到了原点，提升和改进的其实是用户体验。So，不管需求还是规划提意见不能单单指：设计风格不好！更多要站在用户的角度去思考体验的改进！而设计师呢，不能仅仅只关注色调图片的装饰性效果，更多要关注视觉层面的交互设计体验（色彩、图片都是为内容服务的），要更多地多问问、多思考。</p>
<p>15期设计，修改的地方：<br />
1、文字，用了14pix的字号，有助于阅读。<br />
2、主要推送内容加了图片，目的是吸引用户的视觉，能快速聚焦到重要区域。<br />
3、加了导航栏目，帮助用户快速进入其他链接内容。<br />
4、加了hot、new小图标，有视觉引导提示性作用。<br />
5、一级栏目、二级栏目标题，颜色做了区别，更加醒目。<br />
6、加了友好的问候语。<br />
7、规范了部分内容的文字描述。</p>
<p style="text-align: center;"><img class="size-full wp-image-949 aligncenter" title="youshang02" src="http://www.kdued.com/wp-content/uploads/youshang02.png" alt="youshang02" width="800" height="542" /></p>
<p style="text-align: center;">
<p style="text-align: center;"><img class="size-full wp-image-951 aligncenter" title="youshang03" src="http://www.kdued.com/wp-content/uploads/youshang03.png" alt="youshang03" width="800" height="702" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/04/%e8%ae%be%e8%ae%a1%e4%b8%8e%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>中国移动G3笔记本全Flash 网站</title>
		<link>http://www.kdued.com/2009/04/china-mobile-g3-flash-website/</link>
		<comments>http://www.kdued.com/2009/04/china-mobile-g3-flash-website/#comments</comments>
		<pubDate>Sun, 26 Apr 2009 18:39:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[用户体验]]></category>
		<category><![CDATA[视觉设计]]></category>
		<category><![CDATA[Flash RIA]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=912</guid>
		<description><![CDATA[在看到7yue博客——“换手来用”的思考 有这么一句话：RIA是一个更趋向于“体验”设计的领域，不仅仅包括“开发人员”，还包括“设计人员”，这些设计师又包括UI设计，交互设计，图形设计，色彩设计，特效设计……一大堆五花八门的设计分支，这个分支可不是“开发人员”玩的转的。偶觉得基本列举了RIA的一些特性。 作为业界最热门的话题：3G，如何让人们了解3G，认识3G，宣传3G，营销3G，中国移动的策划肯定是花了很多心思的，最后，选择了Flash作为载体。最终的制作出来效果也非常棒，形式与内容结合俱佳，细节丰富，与其他两个运营商的区别一下就显现出来，下面就让我们一一来解读这个RIA应用（http://www.chinamobile.com/events/g3/g3book/）。 1、技术实现：Flash +Photoshop +Actionscipt3。之所以用Flash而非Flex，从网站的显示对象来讲，基本是复杂动画和自定义的界面，而不是数据的交互，这方面是Flash的强项。 2、UI设计：场景放在云端，整个意境体现了无线的空中穿梭感觉。处处是LOGO的变幻应用（G3气球），强化突出品牌。表格设计，滚动条设计及图片框等常用的UI组件样式都经过了特制，与整个背景和风格融为一体。美中不足的是视频的播放控制用了Flash的内置控制条，与整个网站风格不符并且高度显得太高了，如也能自行定义，则完美了。 ·云端 ·表格设计 ·滚动条设计 ·图片展示 ·视频播放器 3、图形设计：简洁明快，大量使用透明，羽化，模糊，光影效果，体现了无线上网及上网本的轻量级感觉。 4、 交互设计：整个网站的内容包括三大块，G3笔记本、产品、活动专区，通过下方云端的彩虹分别进入。由于菜单使用了逐渐进入效果，必须等待三个菜单全部显示完全之后，才能点击进入，这就需要用户有一个等待的时间，例如我一般都在菜单没显示完全就开始点击了，但都是无效点击，这一点如果有改进，比如按钮对象在动画过程中可以点击或者动画速度更快一些就更好了。进入具体的内容页，里面的交互就直接很多，不但可以方便的浏览G3的各种信息和活动，并且操作过程中一个过程被中途停止，返回时能继续此前的过程，连接顺畅而自然。应该说这样的交互是很清晰的，浏览内容没有中断和重头再来的感觉，再加上搭配合适的: 5、 特效设计：就显得天衣无缝了。几乎每一个对象和元素（甚至关闭按钮的出现和退出）都有动画效果，可见所有的特效是经过精心设计和测试过的，无论是速度还是节奏还是衔接都很自然。所有的进入和退出的动作都有缓冲效果，配合透明度的变化，酷眩和动感就出来了。 6、特色Loading：首先Loading进度条摒弃了大多数的居中的习惯，放到了浏览器的顶部；其次，进度条与浏览器同宽；第三，配合了颜色渐变和数字显示。就这么一个创新，果然有令人眼前一亮的感觉。 7、 特色真人Show：这一点虽然不是什么创新，但是在这个场合，人和场景的融合及模特的动作表情却能很好的吸引住用户的眼球。 ·大头人 不足： 1、采用了过多的位图 2、资源耗费过高，CPU大概维持在90%左右 3、由于采用了Flash制作的表格样式等，扩展性不强，例如用户如果想要看到更多产品上网本的具体参数，就不能够及时更新，而这是比较关注的用户体验特性。]]></description>
			<content:encoded><![CDATA[<p>在看到7yue博客——<a href="http://www.7yue.com/post/297.html" target="_blank">“换手来用”的思考</a> 有这么一句话：<strong>RIA是一个更趋向于“体验”设计的领域，不仅仅包括“开发人员”，还包括“设计人员”，这些设计师又包括UI设计，交互设计，图形设计，色彩设计，特效设计……一大堆五花八门的设计分支，这个分支可不是“开发人员”玩的转的</strong>。偶觉得基本列举了RIA的一些特性。</p>
<p>作为业界最热门的话题：3G，如何让人们了解3G，认识3G，宣传3G，营销3G，中国移动的策划肯定是花了很多心思的，最后，选择了Flash作为载体。最终的制作出来效果也非常棒，形式与内容结合俱佳，细节丰富，与其他两个运营商的区别一下就显现出来，下面就让我们一一来解读这个RIA应用（<a href="http://www.chinamobile.com/events/g3/g3book/">http://www.chinamobile.com/events/g3/g3book/</a>）。</p>
<p><strong>1、技术实现：</strong>Flash +Photoshop +Actionscipt3。之所以用Flash而非Flex，从网站的显示对象来讲，基本是复杂动画和自定义的界面，而不是数据的交互，这方面是Flash的强项。</p>
<p><strong>2、UI设计：</strong>场景放在云端，整个意境体现了无线的<strong>空中穿梭感觉</strong>。处处是<strong>LOGO的变幻应用</strong>（G3气球），强化<strong>突出品牌</strong>。表格设计，滚动条设计及图片框等常用的UI组件样式都经过了特制，与整个背景和风格融为一体。美中不足的是视频的播放控制用了Flash的内置控制条，与整个网站风格不符并且高度显得太高了，如也能自行定义，则完美了。</p>
<p style="text-align: center;"><span><strong><a href="http://www.kdued.com/wp-content/uploads/g3_1.jpg"><img class="size-full wp-image-913 aligncenter" title="g3_1" src="http://www.kdued.com/wp-content/uploads/g3_1.jpg" alt="g3_1" width="600" height="395" /></a></strong></span></p>
<div class="Section5">
<p align="center">·云端</p>
<p align="center">
</div>
<p><span id="more-912"></span></p>
<div class="Section8">
<p align="center"><strong><a href="http://www.kdued.com/wp-content/uploads/g3_2.jpg"><img class="alignnone size-full wp-image-914" title="g3_2" src="http://www.kdued.com/wp-content/uploads/g3_2.jpg" alt="g3_2" width="546" height="311" /></a></strong></p>
</div>
<div class="Section9">
<p align="center">·表格设计</p>
</div>
<div class="Section11">
<p align="center"><strong><a href="http://www.kdued.com/wp-content/uploads/g3_3.jpg"><img class="alignnone size-full wp-image-915" title="g3_3" src="http://www.kdued.com/wp-content/uploads/g3_3.jpg" alt="g3_3" width="24" height="149" /></a></strong></p>
</div>
<div class="Section12">
<p align="center">·滚动条设计</p>
<p align="center"><span><strong><a href="http://www.kdued.com/wp-content/uploads/g3_4.jpg"><img class="alignnone size-full wp-image-916" title="g3_4" src="http://www.kdued.com/wp-content/uploads/g3_4.jpg" alt="g3_4" width="526" height="488" /></a></strong></span></p>
</div>
<p align="center">·图片展示</p>
<div class="Section19">
<p align="center"><strong><a href="http://www.kdued.com/wp-content/uploads/g3_5.jpg"><img class="alignnone size-full wp-image-917" title="g3_5" src="http://www.kdued.com/wp-content/uploads/g3_5.jpg" alt="g3_5" width="532" height="383" /></a></strong></p>
</div>
<div class="Section20">
<p align="center">·视频播放器</p>
<p><strong>3、图形设计：</strong>简洁明快，大量使用<strong>透明，羽化，模糊，光影效果</strong>，体现了无线上网及上网本的<strong>轻量级感觉</strong>。<br />
<strong>4、 交互设计：</strong>整个网站的内容包括三大块，G3笔记本、产品、活动专区，通过下方云端的彩虹分别进入。由于菜单使用了逐渐进入效果，必须等待三个菜单全部显示完全之后，才能点击进入，这就需要<strong>用户有一个等待的时间</strong>，例如我一般都在菜单没显示完全就开始点击了，但都是无效点击，这一点如果有改进，比如按钮对象在动画过程中可以点击或者动画速度更快一些就更好了。进入具体的内容页，里面的交互就直接很多，不但可以方便的浏览G3的各种信息和活动，并且操作过程中一个过程被中途停止，返回时能继续此前的过程，连接顺畅而自然。应该说这样的交互是很清晰的，浏览内容没有中断和重头再来的感觉，再加上搭配合适的:</p>
<p><strong>5、 特效设计：</strong>就显得天衣无缝了。几乎每一个对象和元素（甚至关闭按钮的出现和退出）都有动画效果，可见所有的特效是经过精心设计和测试过的，无论是速度还是节奏还是衔接都很自然。所有的进入和退出的动作都有缓冲效果，配合透明度的变化，酷眩和动感就出来了。</p>
<p><strong>6、特色Loading</strong>：首先Loading进度条摒弃了大多数的居中的习惯，放到了浏览器的顶部；其次，进度条与浏览器同宽；第三，配合了颜色渐变和数字显示。就这么一个创新，果然有<strong>令人眼前一亮的感觉</strong>。</p>
<p><strong>7、 特色真人Show：</strong>这一点虽然不是什么创新，但是在这个场合，人和场景的融合及模特的动作表情却能很好的吸引住用户的眼球。</div>
<div class="Section24">
<p align="center"><strong><a href="http://www.kdued.com/wp-content/uploads/g3_6.jpg"><img class="alignnone size-full wp-image-918" title="g3_6" src="http://www.kdued.com/wp-content/uploads/g3_6.jpg" alt="g3_6" width="432" height="408" /></a></strong></p>
</div>
<div class="Section25">
<p align="center">·大头人</p>
</div>
<p>不足：</p>
<p>1、采用了<strong>过多的位图</strong></p>
<p>2、资源耗费过高，CPU大概维持在<strong>90%</strong>左右</p>
<p>3、由于采用了Flash制作的表格样式等，<strong>扩展性不强</strong>，例如用户如果想要看到更多产品上网本的具体参数，就不能够及时更新，而这是比较关注的用户体验特性。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/04/china-mobile-g3-flash-website/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>web专题设计模板化可行性研究</title>
		<link>http://www.kdued.com/2009/04/web-special-topic/</link>
		<comments>http://www.kdued.com/2009/04/web-special-topic/#comments</comments>
		<pubDate>Fri, 17 Apr 2009 04:50:34 +0000</pubDate>
		<dc:creator>jasmine</dc:creator>
				<category><![CDATA[视觉设计]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=861</guid>
		<description><![CDATA[什么事情不能一味的强势，也不能一味的妥协，在双方都僵持不下时，只能采取折中法才是解决矛盾与争端的最优方法。引用冯小刚《非诚勿扰》中最经典的一句话：21世纪什么最贵？“和谐”. 专题设计一直困扰着我们，以至于经常会跟需求、开发产生摩擦和矛盾，而影响我们的工作效率。针对我们目前工作中专题设计存在的问题我做了一个ppt进行分析，并结合同行的设计总结了我们需要如何改进和完善的措施，希望在今后的工作中能真正执行，减少不必要的资源浪费，以提高我们的工作效率。现将ppt内容展示如下： 会后我们又进行了补充 我们的专题设计支持可提供2种方案： 1、可以专门定制设计风格 2、可以选用模板 具体定制还是用模板，由策划师决定，设计师建议。 1.策划师首先要根据内容和人群定位确定整个专题类别，是纯粹的活动营销类，还是战略发布、高端理论的官方、政府类等等。2.根据时间、重要系数来确定是否使用模板，比如，重要系数一般、时间紧迫的，建议使用模板；时间不是很紧迫、非常重要的大型宣传项目，可以专门定制。特殊的紧要题材除外，如大地震那种。 3.策划师根据类别来确定“基调”，如果用文字无法描述，最好能提供直观的可以参考的同类的网站或图片，这样设计师能更快理解策划师的用意，尽快达成共识，确定设计风格。 4.如果选用模板的话，模板会根据几种常用的内容形式提供几套风格，冷色系，暖色系，2-3种质感，活泼的，正式的。默认提供3-5种，隔一个季度再更新。模板资源可积累重复使用。 为了提高我们的工作效率，减少沟通成本，必须规范我们的流程，所以请经常参与此项工作的同学能积极配合，为共同的目标而努力！：）]]></description>
			<content:encoded><![CDATA[<p>什么事情不能一味的强势，也不能一味的妥协，在双方都僵持不下时，只能采取折中法才是解决矛盾与争端的最优方法。引用冯小刚《非诚勿扰》中最经典的一句话：21世纪什么最贵？“和谐”.</p>
<p style="text-align: left;">专题设计一直困扰着我们，以至于经常会跟需求、开发产生摩擦和矛盾，而影响我们的工作效率。针对我们目前工作中专题设计存在的问题我做了一个ppt进行分析，并结合同行的设计总结了我们需要如何改进和完善的措施，希望在今后的工作中能真正执行，减少不必要的资源浪费，以提高我们的工作效率。现将ppt内容展示如下：</p>
<p style="text-align: center;"><img class="size-full wp-image-869 aligncenter" title="p011" src="http://www.kdued.com/wp-content/uploads/p011.jpg" alt="p011" width="630" height="473" /></p>
<p><span id="more-861"></span></p>
<p style="text-align: center;"><img class="size-full wp-image-870 aligncenter" title="p021" src="http://www.kdued.com/wp-content/uploads/p021.jpg" alt="p021" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-871 aligncenter" title="p031" src="http://www.kdued.com/wp-content/uploads/p031.jpg" alt="p031" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-872 aligncenter" title="p04" src="http://www.kdued.com/wp-content/uploads/p04.jpg" alt="p04" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-873 aligncenter" title="p05" src="http://www.kdued.com/wp-content/uploads/p05.jpg" alt="p05" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-875 aligncenter" title="p061" src="http://www.kdued.com/wp-content/uploads/p061.jpg" alt="p061" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-876 aligncenter" title="p07" src="http://www.kdued.com/wp-content/uploads/p07.jpg" alt="p07" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-877 aligncenter" title="p08" src="http://www.kdued.com/wp-content/uploads/p08.jpg" alt="p08" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-878 aligncenter" title="p09" src="http://www.kdued.com/wp-content/uploads/p09.jpg" alt="p09" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-879 aligncenter" title="p10" src="http://www.kdued.com/wp-content/uploads/p10.jpg" alt="p10" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-880 aligncenter" title="p11" src="http://www.kdued.com/wp-content/uploads/p11.jpg" alt="p11" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-881 aligncenter" title="p12" src="http://www.kdued.com/wp-content/uploads/p12.jpg" alt="p12" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-882 aligncenter" title="p13" src="http://www.kdued.com/wp-content/uploads/p13.jpg" alt="p13" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-883 aligncenter" title="p14" src="http://www.kdued.com/wp-content/uploads/p14.jpg" alt="p14" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-885 aligncenter" title="p151" src="http://www.kdued.com/wp-content/uploads/p151.jpg" alt="p151" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-886 aligncenter" title="p16" src="http://www.kdued.com/wp-content/uploads/p16.jpg" alt="p16" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-887 aligncenter" title="p17" src="http://www.kdued.com/wp-content/uploads/p17.jpg" alt="p17" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-888 aligncenter" title="p18" src="http://www.kdued.com/wp-content/uploads/p18.jpg" alt="p18" width="630" height="473" /></p>
<p style="text-align: center;"><img class="size-full wp-image-889 aligncenter" title="p19" src="http://www.kdued.com/wp-content/uploads/p19.jpg" alt="p19" width="630" height="473" /></p>
<p>会后我们又进行了补充<br />
我们的专题设计支持可提供2种方案：<br />
1、可以专门定制设计风格<br />
2、可以选用模板</p>
<p>具体定制还是用模板，由策划师决定，设计师建议。<br />
1.策划师首先要根据内容和人群定位确定整个专题类别，是纯粹的活动营销类，还是战略发布、高端理论的官方、政府类等等。2.根据时间、重要系数来确定是否使用模板，比如，重要系数一般、时间紧迫的，建议使用模板；时间不是很紧迫、非常重要的大型宣传项目，可以专门定制。特殊的紧要题材除外，如大地震那种。<br />
3.策划师根据类别来确定“基调”，如果用文字无法描述，最好能提供直观的可以参考的同类的网站或图片，这样设计师能更快理解策划师的用意，尽快达成共识，确定设计风格。<br />
4.如果选用模板的话，模板会根据几种常用的内容形式提供几套风格，冷色系，暖色系，2-3种质感，活泼的，正式的。默认提供3-5种，隔一个季度再更新。模板资源可积累重复使用。</p>
<p>为了提高我们的工作效率，减少沟通成本，必须规范我们的流程，所以请经常参与此项工作的同学能积极配合，为共同的目标而努力！：）</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/04/web-special-topic/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>图片格式问题和对性能产生的影响</title>
		<link>http://www.kdued.com/2009/04/833/</link>
		<comments>http://www.kdued.com/2009/04/833/#comments</comments>
		<pubDate>Tue, 07 Apr 2009 13:48:24 +0000</pubDate>
		<dc:creator>martilo</dc:creator>
				<category><![CDATA[前端开发]]></category>
		<category><![CDATA[视觉设计]]></category>
		<category><![CDATA[图片优化]]></category>
		<category><![CDATA[图片输出]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=833</guid>
		<description><![CDATA[文字一出各路诸侯杀出，一个措手不及待吾友商发布！ 前不久视觉组同事们讨论了一个老话题 &#8212; 网站图片格式问题和对性能产生的影响 其实大家每天都与图片色彩文字打交道，经验给大家带来了熟练的技巧！但是对图片格式对站点性能产生的影响大家都发表了自己的看法，分享了自己的经验。 目标:提高浏览器访问页面速度 我们设计和制作中能做的：  1、尽量少图片；尽量好交互       浏览器页面尽量少用图片或精细化图片 2、图片尽量用色彩和像素点代替       解决好 美观和下载速度这把双刃剑 3、做切割对比测试       制作人员掌握图片切割规律]]></description>
			<content:encoded><![CDATA[<div style="width:555px;margin:0 auto;">
<iframe src='http://docs.google.com/EmbedSlideshow?docid=dc338b7f_0hfm7ng6m&amp;size=m' frameborder='0' width='555' height='451'></iframe>
</div>
<p>文字一出各路诸侯杀出，一个措手不及待吾友商发布！</p>
<p>前不久视觉组同事们讨论了一个老话题 &#8212; 网站图片格式问题和对性能产生的影响</p>
<p>其实大家每天都与图片色彩文字打交道，经验给大家带来了熟练的技巧！但是对图片格式对站点性能产生的影响大家都发表了自己的看法，分享了自己的经验。</p>
<p>目标:提高浏览器访问页面速度</p>
<p><span style="color: green; font-family: 微软雅黑; mso-ascii-font-family: 微软雅黑; mso-fareast-font-family: 微软雅黑; mso-hansi-font-family: 微软雅黑;">我们设计和制作中能做的：</span><span style="font-family: 微软雅黑; mso-ascii-font-family: 微软雅黑; mso-fareast-font-family: 微软雅黑; mso-hansi-font-family: 微软雅黑;"><span style="mso-spacerun: yes;">  </span></span><span style="font-family: 微软雅黑; mso-ascii-font-family: 微软雅黑; mso-fareast-font-family: 微软雅黑; mso-hansi-font-family: 微软雅黑;"><span style="mso-spacerun: yes;"><br />
1、尽量少图片；尽量好交互<br />
      浏览器页面尽量少用图片或精细化图片<br />
2、图片尽量用色彩和像素点代替<br />
      解决好 美观和下载速度这把双刃剑<br />
3、做切割对比测试<br />
      制作人员掌握图片切割规律</span></span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/04/833/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>“小人”我最近比较“繁”</title>
		<link>http://www.kdued.com/2009/03/%e2%80%9c%e5%b0%8f%e4%ba%ba%e2%80%9d%e6%88%91%e6%9c%80%e8%bf%91%e6%af%94%e8%be%83%e2%80%9c%e7%b9%81%e2%80%9d/</link>
		<comments>http://www.kdued.com/2009/03/%e2%80%9c%e5%b0%8f%e4%ba%ba%e2%80%9d%e6%88%91%e6%9c%80%e8%bf%91%e6%af%94%e8%be%83%e2%80%9c%e7%b9%81%e2%80%9d/#comments</comments>
		<pubDate>Fri, 06 Mar 2009 09:26:37 +0000</pubDate>
		<dc:creator>jasmine</dc:creator>
				<category><![CDATA[视觉设计]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=746</guid>
		<description><![CDATA[“小人”我最近比较“繁”，比较“繁”，比较“繁”，09年的出镜率是频频上升啊，看来我“小人”今年真能红遍全国哦。 马上上我的靓照，帅锅美女们，睁大眼睛看啰。 关键词： 坚定、开放、速度、责任、快乐   逻辑： 坚定目标－－开放心态－－速度求胜－－承担责任－－快乐工作   诠释： 坚定： 坚定目标，不抛弃、不放弃！ 敢于胜利、不胜不休 保持定力，保持静气   开放： 释放正面能量，激发共鸣 不开不放，主动融合 分享让自己更强大   速度： 千破万破，唯快不破 速度求胜，嫉慢如仇 以速度换时间、空间   责任： 对同事负责，对流程负责 对客户负责，对全程服务负责 承担社会责任，推动商业文明   快乐： 共创氛围，快乐工作 让用户体验轻松、愉悦 快乐工作、快乐生活   口号： 我们从五湖四海走到一起，(团队) 在竞争中过五关、斩六将！(竞争) 为客户提供五脏俱全的服务，(客户价值) 让团队的每个人五子登科，(员工价值) 让全程电子商务五谷丰登！(社会价值) 不错吧，图文并茂吧：） 下面再上两张最近的PP   “小人”我很牛X吧，我很珍惜每次出镜的机会, 所以我会很努力很认真的表现自己，希望得到更多fans的支持，下一场再会！  ]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">“小人”我最近比较“繁”，比较“繁”，比较“繁”，09年的出镜率是频频上升啊，看来我“小人”今年真能红遍全国哦。</p>
<p>马上上我的靓照，帅锅美女们，睁大眼睛看啰。</p>
<p style="text-align: center;"><img class="size-full wp-image-767 aligncenter" title="e4ba94e5a4a7e6a0b8e5bf83e883bde9878fe5b08fe4babae7a4bae6848fe59088e59bbe13" src="http://www.kdued.com/wp-content/uploads/e4ba94e5a4a7e6a0b8e5bf83e883bde9878fe5b08fe4babae7a4bae6848fe59088e59bbe13.jpg" alt="e4ba94e5a4a7e6a0b8e5bf83e883bde9878fe5b08fe4babae7a4bae6848fe59088e59bbe13" width="700" height="525" /></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span id="more-746"></span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">关键词：</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">坚定、开放、速度、责任、快乐</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"> </p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">逻辑：</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">坚定目标－－开放心态－－速度求胜－－承担责任－－快乐工作</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"> </p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">诠释：</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">坚定：</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">坚定目标，不抛弃、不放弃！</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">敢于胜利、不胜不休</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">保持定力，保持静气</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"> </p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">开放：</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">释放正面能量，激发共鸣</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">不开不放，主动融合</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">分享让自己更强大</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"> </p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">速度：</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">千破万破，唯快不破</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">速度求胜，嫉慢如仇</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">以速度换时间、空间</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"> </p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">责任：</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">对同事负责，对流程负责</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">对客户负责，对全程服务负责</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">承担社会责任，推动商业文明</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"> </p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">快乐：</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">共创氛围，快乐工作</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">让用户体验轻松、愉悦</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">快乐工作、快乐生活</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"> </p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">口号：</span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">我们从五湖四海走到一起，<span lang="EN-US">(</span>团队<span lang="EN-US">)</span></span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">在竞争中过五关、斩六将！<span lang="EN-US">(</span>竞争<span lang="EN-US">)</span></span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">为客户提供五脏俱全的服务，<span lang="EN-US">(</span>客户价值<span lang="EN-US">)</span></span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">让团队的每个人五子登科，<span lang="EN-US">(</span>员工价值<span lang="EN-US">)</span></span></p>
<p class="MsoNormal" style="margin: 0cm 0.9pt 0pt 13.85pt; text-align: left; mso-pagination: widow-orphan;" align="left"><span style="font-size: 10pt; color: black; font-family: 宋体; mso-font-kerning: 0pt;">让全程电子商务五谷丰登！<span lang="EN-US">(</span>社会价值<span lang="EN-US">)</span></span></p>
<p>不错吧，图文并茂吧：）</p>
<p>下面再上两张最近的PP</p>
<p><img class="aligncenter size-full wp-image-771" title="e4bc81e4b89ae8a1a8e68385e589afe69cac1" src="http://www.kdued.com/wp-content/uploads/e4bc81e4b89ae8a1a8e68385e589afe69cac1.jpg" alt="e4bc81e4b89ae8a1a8e68385e589afe69cac1" width="600" height="761" /><strong><img class="size-full wp-image-772  aligncenter" title="e4bc81e4b89ae8a1a8e683852e589afe69cac1" src="http://www.kdued.com/wp-content/uploads/e4bc81e4b89ae8a1a8e683852e589afe69cac1.jpg" alt="e4bc81e4b89ae8a1a8e683852e589afe69cac1" width="600" height="551" /></strong></p>
<p> </p>
<p>“小人”我很牛X吧，我很珍惜每次出镜的机会, 所以我会很努力很认真的表现自己，希望得到更多fans的支持，下一场再会！</p>
<p class="MsoNormal" style="margin: 0cm 0cm 0pt;"> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/03/%e2%80%9c%e5%b0%8f%e4%ba%ba%e2%80%9d%e6%88%91%e6%9c%80%e8%bf%91%e6%af%94%e8%be%83%e2%80%9c%e7%b9%81%e2%80%9d/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>2009海外web设计色彩趋势分析</title>
		<link>http://www.kdued.com/2009/03/2009%e6%b5%b7%e5%a4%96web%e8%ae%be%e8%ae%a1%e8%89%b2%e5%bd%a9%e8%b6%8b%e5%8a%bf%e5%88%86%e6%9e%90/</link>
		<comments>http://www.kdued.com/2009/03/2009%e6%b5%b7%e5%a4%96web%e8%ae%be%e8%ae%a1%e8%89%b2%e5%bd%a9%e8%b6%8b%e5%8a%bf%e5%88%86%e6%9e%90/#comments</comments>
		<pubDate>Wed, 04 Mar 2009 10:10:31 +0000</pubDate>
		<dc:creator>saidy</dc:creator>
				<category><![CDATA[视觉设计]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=700</guid>
		<description><![CDATA[这是 Smashing Magazine 花费几个月的时间研究编写的 2009 年 Web 设计风格与潮流，Smashing Magazine 的编辑们对当前流行的大量 Web 设计风格进行分析，总结出那些可能在 2009 年风行的潮流，包括新的设计元素，新的图形方式，并给出大量的漂亮的示例。文字引至（http://hi.baidu.com/yumcn/blog/item/d930c23342446544ac4b5f14.html）。原文链接（http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/ ） 我截取了大概100个页面进行色彩应用的分析，我想，既然这些页面代表着2009年的视觉潮流，那么网站的色彩也相应地体现了2009年的流行色应用趋势。其实还可以深化研究的，因为时间的问题（大概用了5个工作日），我做得比较粗，等后续再进一步细化分析。希望能给我们和广大web视觉设计师带来一点点的帮助。 分析总结的结果，基本符合常规理论，只是通过分析得出的数据，进一步坚定了我们的设计思想和理念。 欢迎大家探讨，指正，共同进步！                    点击此处下载PPT]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;"><em>这是 Smashing Magazine 花费几个月的时间研究编写的 2009 年 Web 设计风格与潮流，Smashing Magazine 的编辑们对当前流行的大量 Web 设计风格进行分析，总结出那些可能在 2009 年风行的潮流，包括新的设计元素，新的图形方式，并给出大量的漂亮的示例。文字引至（</em><a href="http://hi.baidu.com/yumcn/blog/item/d930c23342446544ac4b5f14.html"><em>http://hi.baidu.com/yumcn/blog/item/d930c23342446544ac4b5f14.html</em></a><em>）。原文链接（http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/ ）</em></p>
<p>我截取了大概100个页面进行色彩应用的分析，我想，既然这些页面代表着2009年的视觉潮流，那么网站的色彩也相应地体现了2009年的流行色应用趋势。其实还可以深化研究的，因为时间的问题（大概用了5个工作日），我做得比较粗，等后续再进一步细化分析。希望能给我们和广大web视觉设计师带来一点点的帮助。</p>
<p>分析总结的结果，基本符合常规理论，只是通过分析得出的数据，进一步坚定了我们的设计思想和理念。</p>
<p>欢迎大家探讨，指正，共同进步！                   </p>
<p style="text-align: center;"><a href="http://www.kdued.com/temps/colorAnal2009.pps "><strong>点击此处下载PPT</strong></a></p>
<p style="text-align: center;"><img class="size-full wp-image-701  aligncenter" title="12" src="http://www.kdued.com/wp-content/uploads/12.png" alt="12" width="695" height="523" /></p>
<p style="text-align: center;"><img class="size-full wp-image-702  aligncenter" title="22" src="http://www.kdued.com/wp-content/uploads/22.png" alt="22" width="695" height="523" /></p>
<p style="text-align: center;"><img class="size-full wp-image-703  aligncenter" title="31" src="http://www.kdued.com/wp-content/uploads/31.png" alt="31" width="695" height="523" /></p>
<p style="text-align: center;"><img class="size-full wp-image-704  aligncenter" title="41" src="http://www.kdued.com/wp-content/uploads/41.png" alt="41" width="695" height="523" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/03/2009%e6%b5%b7%e5%a4%96web%e8%ae%be%e8%ae%a1%e8%89%b2%e5%bd%a9%e8%b6%8b%e5%8a%bf%e5%88%86%e6%9e%90/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>桌面设计</title>
		<link>http://www.kdued.com/2009/01/%e6%a1%8c%e9%9d%a2%e8%ae%be%e8%ae%a1/</link>
		<comments>http://www.kdued.com/2009/01/%e6%a1%8c%e9%9d%a2%e8%ae%be%e8%ae%a1/#comments</comments>
		<pubDate>Wed, 21 Jan 2009 02:45:18 +0000</pubDate>
		<dc:creator>saidy</dc:creator>
				<category><![CDATA[视觉设计]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=524</guid>
		<description><![CDATA[春节前有一段小小的空闲时间，静下心来做了几款桌面的设计，喜欢的同学可以下载使用，呵呵。 下载链接地址：http://www.youshang.com/html/card/calendar.jsp]]></description>
			<content:encoded><![CDATA[<p>春节前有一段小小的空闲时间，静下心来做了几款桌面的设计，喜欢的同学可以下载使用，呵呵。</p>
<p><strong>下载链接地址：</strong><a href="http://www.youshang.com/html/card/calendar.jsp"><strong>http://www.youshang.com/html/card/calendar.jsp</strong></a></p>
<p style="text-align: center;"><img class="size-medium wp-image-533 aligncenter" title="long12802" src="http://www.kdued.com/wp-content/uploads/long12802-700x560.png" alt="long12802" width="648" height="519" /></p>
<p style="text-align: center;"><img class="size-medium wp-image-534 aligncenter" title="mudan12801" src="http://www.kdued.com/wp-content/uploads/mudan12801-700x560.png" alt="mudan12801" width="643" height="514" /></p>
<p style="text-align: center;"><span id="more-524"></span></p>
<p style="text-align: center;"><img class="size-medium wp-image-535 aligncenter" title="huajuan12801" src="http://www.kdued.com/wp-content/uploads/huajuan12801-700x560.png" alt="huajuan12801" width="640" height="512" /></p>
<p style="text-align: center;"><img class="size-medium wp-image-536 aligncenter" title="shengxiao12801" src="http://www.kdued.com/wp-content/uploads/shengxiao12801-700x560.png" alt="shengxiao12801" width="638" height="513" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2009/01/%e6%a1%8c%e9%9d%a2%e8%ae%be%e8%ae%a1/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>金融风暴—友商支招</title>
		<link>http://www.kdued.com/2008/12/%e9%87%91%e8%9e%8d%e9%a3%8e%e6%9a%b4%e2%80%94%e5%8f%8b%e5%95%86%e6%94%af%e6%8b%9b/</link>
		<comments>http://www.kdued.com/2008/12/%e9%87%91%e8%9e%8d%e9%a3%8e%e6%9a%b4%e2%80%94%e5%8f%8b%e5%95%86%e6%94%af%e6%8b%9b/#comments</comments>
		<pubDate>Tue, 30 Dec 2008 13:45:41 +0000</pubDate>
		<dc:creator>saidy</dc:creator>
				<category><![CDATA[视觉设计]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=473</guid>
		<description><![CDATA[首先：祝大家节日快乐！笑口常开！在金融危机的风暴下，荷包仍然满满，银票天天花不完！ 接下来：感谢各位勇于牺牲色相的同学！感谢各位设计师PS照片！感谢开发大师制作实现！感谢“流沙”的交互和测试！感谢领导的支持和认可！感谢互联网的传播…… 咳咳。。言归正传，我的确是来做广告的…… 不想浏览更多么？你还可以很方便滴转发贺卡给你的亲戚朋友、同学同事……真的不想试试吗？！ 请点击：http://www.youshang.com/html/card/card.jsp]]></description>
			<content:encoded><![CDATA[<p>首先：祝大家节日快乐！笑口常开！在金融危机的风暴下，荷包仍然满满，银票天天花不完！</p>
<p>接下来：感谢各位勇于牺牲色相的同学！感谢各位设计师PS照片！感谢开发大师制作实现！感谢“流沙”的交互和测试！感谢领导的支持和认可！感谢互联网的传播……</p>
<p>咳咳。。言归正传，我的确是来做广告的……</p>
<p>不想浏览更多么？你还可以很方便滴转发贺卡给你的亲戚朋友、同学同事……真的不想试试吗？！</p>
<p><strong>请点击：</strong><a href="http://www.youshang.com/html/card/card.jsp"><strong>http://www.youshang.com/html/card/card.jsp</strong></a></p>
<p style="text-align: center;"><img class="size-full wp-image-477 aligncenter" title="2-4" src="http://www.kdued.com/wp-content/uploads/2-4.jpg" alt="2-4" width="709" height="589" /></p>
<p style="text-align: center;"><span id="more-473"></span></p>
<p style="text-align: center;"><img class="size-full wp-image-478 aligncenter" title="1-41" src="http://www.kdued.com/wp-content/uploads/1-41.jpg" alt="1-41" width="709" height="589" /></p>
<p style="text-align: center;"><img class="size-full wp-image-479 aligncenter" title="3-4" src="http://www.kdued.com/wp-content/uploads/3-4.jpg" alt="3-4" width="709" height="589" /></p>
<p style="text-align: center;"><img class="size-full wp-image-485 aligncenter" title="7-51" src="http://www.kdued.com/wp-content/uploads/7-51.jpg" alt="7-51" width="709" height="568" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2008/12/%e9%87%91%e8%9e%8d%e9%a3%8e%e6%9a%b4%e2%80%94%e5%8f%8b%e5%95%86%e6%94%af%e6%8b%9b/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>网页设计基础-web图片输出优化1</title>
		<link>http://www.kdued.com/2008/12/web-design-pic-output-1/</link>
		<comments>http://www.kdued.com/2008/12/web-design-pic-output-1/#comments</comments>
		<pubDate>Fri, 26 Dec 2008 05:46:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[视觉设计]]></category>
		<category><![CDATA[web设计]]></category>
		<category><![CDATA[图片优化]]></category>
		<category><![CDATA[图片输出]]></category>
		<category><![CDATA[网页设计]]></category>
		<category><![CDATA[设计基础]]></category>

		<guid isPermaLink="false">http://www.kdued.com/?p=430</guid>
		<description><![CDATA[我们都知道，对于一个网站而言，网页的下载速度是至关重要的。它不仅直接影响到用户的浏览体验、还关系到网页在搜索引擎中的排名参数。因此，优化网页、使之能快速下载是页面制作中很重要的考虑因素。网页优化涉及方方面面，图片优化则是其中重要手段之一。下面，本着把图片大小节省到字节的精神，我们就来探讨一下web图片的优化，欢迎大家补充、指正。 图片优化基本原则： 一、图片裁切 切图时尽量贴合图形区，避免空白区域占用文件大小。 二、图片输出 1． 使用photoshop的“存储为web所用格式”功能来输出照片， 测试表明：输出某张图片为jpg格式，分别使用“存储为web所用格式”和一般的“存储为”，都压缩到50%，前者得到的图片结果为14.4kb，后者为47.1kb。 2． 在使用上述功能进行图片输出的过程中，对比jpg、gif格式下的文件大小，选择效果和大小较优的文件格式。 一般情况下，色彩少的图片使用png-8、gif格式文件会小些，色彩渐变丰富的图片，则使用jpg会小些。 3． Jpg格式的图片，需综合对比压缩品质高、中、低下的效果，尽量选择效果好且压缩品质较低的选项，以达到获取较小文件的目的。 4． 对于无多通道透明需求的图片，避免使用png24位格式输出。 Gif图片如何优化？ 有些图片，色彩并不是很丰富，通过对比可知输出gif会更小些；或者，因为要用在多种背景中使用，需要输出为透明格式（非多通道），这时，就需要选用gif格式。我们都知道Jpg格式可以通过控制压缩比来优化，相对于JPG，gif优化是比较容易被忽视的。看到身边有些朋友在输出gif时基本不作什么优化选择，觉得很可惜。其实，即使确定要输出gif格式，通常也仍有继续瘦身的余地。 我们可以做个实验。 请看看下面四个图片，大家在肉眼、原大的情况下能看出区别来吗？ (声明，此实验图标取自网络，作者未知，感谢！) 呵呵~~相信如果不放大到像素级来一个个点的对比看，是很难辨认出有何不同的。 其实，这几张图片有着不同的色阶。请看下面在Photoshop中输出时的相关参数，注意文字中红色线标注的内容。 样图解读： 图1为要输出的原图效果； 图2为64色输出的效果，输出后文件大小为601字节； 图3为128色输出的效果，输出后文件大小为853字节； 图4为256色输出的效果，输出后文件大小为1.286K。 由此可见，上述四张图中，在肉眼可辨识情况下，64色的图片对比256色图片，输出后可以少掉一半还多的字节数，且效果完全能满足视觉要求。不要小看这几百个字节，试想网站里几百张图片，如果每张图都节省一些，最终可以节省多少空间出来？ 这是PS的输出模式中提供的gif色彩选项。 根据这些选项，我们再看看更多的Gif格式下多色阶的效果和文件大小对比。 经对比可知，其实对于此图片而言，用32色来输出也是可以接受的。 Gif优化小结：对于gif而言，色彩越少，文件也就越小。在肉眼可可接受的范围内，尽量将gif色彩数量降低，能够对gif图大小进行有效的优化。道理其实很简单，关键就在于我们实际输出过程中要细心、耐心。 hydrn按：其实关于文件格式，png-8也是不错的选择。后续还有补充。欢迎探讨。]]></description>
			<content:encoded><![CDATA[<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">我们都知道，对于一个网站而言，网页的下载速度是至关重要的。它不仅直接影响到用户的浏览体验、还关系到网页在搜索引擎中的排名参数。因此，优化网页、使之能快速下载是页面制作中很重要的考虑因素。网页优化涉及方方面面，图片优化则是其中重要手段之一。下面，本着把图片大小节省到字节的精神，我们就来探讨一下web图片的优化，欢迎大家补充、指正。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left"><strong>图片优化基本原则：</strong></p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">一、图片裁切</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">切图时尽量贴合图形区，避免空白区域占用文件大小。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">二、图片输出</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">1． 使用photoshop的“存储为web所用格式”功能来输出照片，</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">测试表明：输出某张图片为jpg格式，分别使用“存储为web所用格式”和一般的“存储为”，都压缩到50%，前者得到的图片结果为14.4kb，后者为47.1kb。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">2． 在使用上述功能进行图片输出的过程中，对比jpg、gif格式下的文件大小，选择效果和大小较优的文件格式。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">一般情况下，色彩少的图片使用png-8、gif格式文件会小些，色彩渐变丰富的图片，则使用jpg会小些。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">3． Jpg格式的图片，需综合对比压缩品质高、中、低下的效果，尽量选择效果好且压缩品质较低的选项，以达到获取较小文件的目的。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">4． 对于无多通道透明需求的图片，避免使用png24位格式输出。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left"><strong>Gif图片如何优化？</strong></p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">有些图片，色彩并不是很丰富，通过对比可知输出gif会更小些；或者，因为要用在多种背景中使用，需要输出为透明格式（非多通道），这时，就需要选用gif格式。我们都知道Jpg格式可以通过控制压缩比来优化，相对于JPG，gif优化是比较容易被忽视的。看到身边有些朋友在输出gif时基本不作什么优化选择，觉得很可惜。其实，即使确定要输出gif格式，通常也仍有继续瘦身的余地。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">我们可以做个实验。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left"><span id="more-430"></span></p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 18pt; TEXT-INDENT: -18pt; TEXT-ALIGN: left; mso-pagination: widow-orphan" align="left">请看看下面四个图片，大家在肉眼、原大的情况下能看出区别来吗？</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-family: 宋体; mso-font-kerning: 0pt" lang="EN-US"><img class="aligncenter" src="http://mycoastline.cn/wp-content/uploads/2008/12/pic_011.gif" alt="" width="93" height="80" /><span style="color: #888888;">(声明，此实验图标取自网络，作者未知，感谢！)</span></span></p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-family: 宋体; mso-font-kerning: 0pt" lang="EN-US"><span style="color: #888888;"><br />
</span></span></p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">呵呵~~相信如果不放大到像素级来一个个点的对比看，是很难辨认出有何不同的。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">其实，这几张图片有着不同的色阶。请看下面在Photoshop中输出时的相关参数，注意文字中红色线标注的内容。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-family: 宋体; mso-font-kerning: 0pt"><img class="aligncenter" src="http://mycoastline.cn/wp-content/uploads/2008/12/pic_02.gif" alt="" width="438" height="508" /></span></p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">样图解读：</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">图1为要输出的原图效果；</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">图2为64色输出的效果，输出后文件大小为601字节；</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">图3为128色输出的效果，输出后文件大小为853字节；</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">图4为256色输出的效果，输出后文件大小为1.286K。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">由此可见，上述四张图中，在肉眼可辨识情况下，64色的图片对比256色图片，输出后可以少掉一半还多的字节数，且效果完全能满足视觉要求。不要小看这几百个字节，试想网站里几百张图片，如果每张图都节省一些，最终可以节省多少空间出来？</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">这是PS的输出模式中提供的gif色彩选项。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><img class="aligncenter" src="http://mycoastline.cn/wp-content/uploads/2008/12/pic_04.gif" alt="" width="234" height="206" /></p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-family: 宋体; mso-font-kerning: 0pt" lang="EN-US"> </span></p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">根据这些选项，我们再看看更多的Gif格式下多色阶的效果和文件大小对比。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><span style="FONT-SIZE: 9pt; COLOR: black; FONT-FAMILY: 宋体; mso-bidi-font-family: 宋体; mso-font-kerning: 0pt"><img class="aligncenter" src="http://mycoastline.cn/wp-content/uploads/2008/12/pic_03.gif" alt="" width="322" height="321" /></span></p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">经对比可知，其实对于此图片而言，用32色来输出也是可以接受的。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">Gif优化小结：对于gif而言，色彩越少，文件也就越小。在肉眼可可接受的范围内，尽量将gif色彩数量降低，能够对gif图大小进行有效的优化。道理其实很简单，关键就在于我们实际输出过程中要细心、耐心。</p>
<p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt">
<p class="MsoNormal"><span style="color: #888888;">hydrn按：其实关于文件格式，png-8也是不错的选择。后续还有补充。欢迎探讨。</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.kdued.com/2008/12/web-design-pic-output-1/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

