<?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>Palmback™菜园地 &#187; How-to</title>
	<atom:link href="http://palmback.cn/category/backs/how-to/feed/" rel="self" type="application/rss+xml" />
	<link>http://palmback.cn</link>
	<description>You are Palm and I am Back</description>
	<lastBuildDate>Sun, 06 Jun 2010 14:57:25 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Web 2.0设计指导四</title>
		<link>http://palmback.cn/2008/10/web-20-design-guide-part4/</link>
		<comments>http://palmback.cn/2008/10/web-20-design-guide-part4/#comments</comments>
		<pubDate>Sun, 19 Oct 2008 10:24:27 +0000</pubDate>
		<dc:creator>handback</dc:creator>
				<category><![CDATA[How-to]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web 2.0]]></category>

		<guid isPermaLink="false">http://palmback.cn/?p=823</guid>
		<description><![CDATA[11 丰富的平面效果
许多web 2.0 风格的网站适当地使用精致的3D效果，以加强设计的质感。
我们都知道这些精细的效果感觉很好，但并不知其中缘由。
逼真的平面效果（如阴影、渐变及倒影）有助于让可视界面感觉更真实、结实、精致。这些效果也可以唤起我们对某些现实世界中物体的触觉和美感，比如水滴、闪亮的塑料按钮、大理石地板。让界面看起来结实、真实可以让人感觉是可触摸的，有呼之欲出的感觉。
  
  
  
何时、如何使用丰富的平面效果
这里金科玉律是慎重使用，而且不要过度使用。
正如我在 3D效果设计指导 中解释一样，这些效果不应该用于所有对像。
和所有的技术一样，敏感地、适当地使用丰富的平面效果可以增加设计的价值。
如果网站的导航/icon/logo/布局根本上很糟糕，那么并不能以此达到效果，正确的基本原则才是首要的。
保持一致的光源也很重要的。虽然可以借助逆光散射制作更复杂效果的按钮等，但是仍然需要把握总体设计感觉的一致。3D效果也可以是元素从页面中突出来，但仅仅在其余的页面相对平的情况下有效。
避免试图让整个设计3D化，因为：

更大的工作量
将会增加页面的大小
不需要这样做。3D效果使用许多不同的像素，而不同的像素应该是有意用来吸引用户注意关键内容，或者加强“软”信息外观的，少量即可见其效。

12 渐变效果
Web 2.0 设计使用中许多渐变效果。
为什么渐变如此有用？
渐变使原本平乏的色块变得柔和。

渐变可以创造非平面的错觉，在Alex Dukal作品集中达到了良好的效果。

渐变可以用来逐渐加亮或加深色块，以创造网页的整体氛围。

在网页背景中，渐变也可以创造距离的错觉。常用的渐变组合是由蓝色到白色，产生 空中透视（aerial perspective）的效果，创造背景在地平线消失的效果。
渐变经常被用在网页背景的顶部，以助于产生可视区域的分界线。
 
渐变也是阴影、内发光、镜面高光的主要部分，正如在玻璃质感或塑料质感的按钮中所见。
注意，渐变在并列区域颜色平铺的时候最有效。

在Curve2 主页中，渐变显得更加有效，因为每个渐变放在临近白色或灰色块的地方。这是常见的渐变加强基色（在Photoshop中使用诸如颜色加深、覆盖的混合效果），创造巧妙的不同的色调。
上图中，突出的绿色比深的基色更加温暖、更加友好，总体效果柔和、丰富兼具。
13 倒影Reflections
倒影的视觉错觉是在渐变中最经常使用的效果之一。
通常有两种实现方式：

光在有光泽的平面上反射产生的高光效果
有光泽的桌面效果

高光曲线-Specular highlights
水滴、玻璃珠、闪亮的塑料按钮等效果在过去几年已经很流行。我不知道这种趋势何时开始，但苹果的网站应该是最有影响力之一，以及以前的水滴界面外观Aqua interface look &#38; feel。
下面是一些例子：

Apple.com 经典的标签按钮，现在仍然在使用。它们使用标签上的光源结合内外发光产生的高光实现塑料效果。

这些标签源自我最近的设计中，这里有一个抛光（从一个亮白色的高光里）碳纤维外观。碳纤维的效果来源于对角线中的图标发光。

更漂亮的光泽塑料，注意倒影如何附着在图形的边沿上，产生边缘圆滑效果的错觉。

类似的效果在方形上看起来像一个徽章。非水平角度产生活力的感觉。

来自 cafepress.com 的光泽按钮使用圆滑的倒影，如同一个宽光源反射在圆形表面上。

来自主机商 Mediatemple 的按钮有更多的漫反射，达到无光泽的玻璃效果。
桌面光泽（反光）效果！
这也是苹果开创的（我确定）。现在这个确实漂亮的效果如此流行，使其处于过度使用的危险中，现在已经开始审美疲劳并被设计师抛弃。
记住，网页设计师通常对这些东西更感性，这是理所当然的，所以即便这种效果被设计师抛弃，在未来的一段时间里一般公众也许仍然觉得这种效果很酷。

标准的苹果外观，白色基调上的灰色褪去。

在着色的背景上。

向两边淡出

更极端的角度，丰富的分层效果。
如何制作这样的效果（来源于photoshoplab.com） »
14 可爱的图标Cute icons
图标在Web 2.0 设计中扮演着一个很重要的角色。现在我们使用更少、更精致且具有更多含义的图标。
当图标易于辨别且带有明确含义时是有用的，而在许多其他案例中，一句简洁的话更有效。
在过去，图标被过度地使用，看起来每个人都想为每个导航链接或标签使用图标。现在，我们更广泛地使用清晰的文字，不愿再去用图标弄乱页面。
做图标的Web 2.0设计师被保留在价值更高的地方。
更简洁、更开阔的设计要求对丰富的图标更少关注和允许。
一些例子，说明各种情况。
简洁、干净的
  
可爱、古怪的
没有必要的特写小山！
  
丰富详细地
设计灵感源于Mac OSX， Enhanced Labs 查看更多案例。
  
  
15 星光闪耀 Star flashes
下面是粘贴在网页上的星形标签，用于提醒用户注意某些重要信息。
星形在低价商店中做价格标签吸引客户。由于这个原因，许多Web 2.0 网站中开始使用它，同样的原因是它可能比其他网站便宜。
星形标签很有效，当然只能用于吸引注意力到某些重要的信息。我建议一个页面上只用一个（最多一个）！
另一种风格看起来被过度使用了，在未来一年可能会按常规发展。
  [...]]]></description>
			<content:encoded><![CDATA[<h3 id="rich-surfaces">11 丰富的平面效果</h3>
<p>许多web 2.0 风格的网站适当地使用精致的3D效果，以加强设计的质感。</p>
<p>我们都知道这些精细的效果感觉很好，但并不知其中缘由。</p>
<p>逼真的平面效果（如阴影、渐变及倒影）有助于让可视界面感觉更真实、结实、精致。这些效果也可以唤起我们对某些现实世界中物体的触觉和美感，比如水滴、闪亮的塑料按钮、大理石地板。让界面看起来结实、真实可以让人感觉是可触摸的，有呼之欲出的感觉。</p>
<p><img src="http://lh3.ggpht.com/hegfirose/SPgdZLUKcvI/AAAAAAAACY0/BPViuNC_cwY/s400/20-surface-apple.jpg" alt="" width="179" height="67" /> <img src="http://lh3.ggpht.com/hegfirose/SPgdZ2nTzNI/AAAAAAAACY8/8nTLi0Glfrc/s400/20-surface-i-hate-clowns-redesign.jpg" alt="" width="179" height="67" /> <img src="http://lh3.ggpht.com/hegfirose/SPgdaEtCMkI/AAAAAAAACZE/qZxCuUFP6oQ/s400/20-surface-sinelogic.jpg" alt="" width="179" height="67" /></p>
<p><img src="http://lh6.ggpht.com/hegfirose/SPgdaW4g6uI/AAAAAAAACZM/kSonszL1TeE/s400/20-surface-shopify.gif.jpg" alt="" width="179" height="67" /> <img src="http://lh5.ggpht.com/hegfirose/SPgdbiyyBxI/AAAAAAAACZk/3obuntvvAXI/s400/20-surface-webtalent.jpg" alt="" width="179" height="67" /> <img src="http://lh5.ggpht.com/hegfirose/SPgdbWFHIDI/AAAAAAAACZc/_pNGz1RXfNs/s400/20-surface-giddykippa.jpg" alt="" width="179" height="67" /></p>
<p><img src="http://lh3.ggpht.com/hegfirose/SPgda6s7VxI/AAAAAAAACZU/dk6A1jfiE48/s400/20-surface-enhanced-labs.jpg" alt="" width="179" height="67" /> <img src="http://lh6.ggpht.com/hegfirose/SPgdb9Cia5I/AAAAAAAACZs/XIEIFgXifRc/s400/20-surface-aurum.jpg" alt="" width="179" height="67" /> <img src="http://lh5.ggpht.com/hegfirose/SPgdcb7vtvI/AAAAAAAACZ0/yTx3BkhyPUI/s400/20-surface-ruby-containers.gif.jpg" alt="" width="179" height="67" /></p>
<h4>何时、如何使用丰富的平面效果</h4>
<p>这里金科玉律是慎重使用，而且不要过度使用。</p>
<p>正如我在 <a href="http://www.webdesignfromscratch.com/3d_effects.cfm">3D效果设计指导</a> 中解释一样，这些效果不应该用于所有对像。</p>
<blockquote><p>和所有的技术一样，敏感地、适当地使用丰富的平面效果可以增加设计的价值。</p>
<p>如果网站的导航/icon/logo/布局根本上很糟糕，那么并不能以此达到效果，正确的基本原则才是首要的。</p></blockquote>
<p>保持一致的光源也很重要的。虽然可以借助逆光散射制作更复杂效果的按钮等，但是仍然需要把握总体设计感觉的一致。3D效果也可以是元素从页面中突出来，但仅仅在其余的页面相对平的情况下有效。</p>
<p>避免试图让整个设计3D化，因为：</p>
<ul>
<li>更大的工作量</li>
<li>将会增加页面的大小</li>
<li>不需要这样做。3D效果使用许多不同的像素，而不同的像素应该是有意用来吸引用户注意关键内容，或者加强“软”信息外观的，少量即可见其效。</li>
</ul>
<h3 id="gradients">12 渐变效果</h3>
<p><strong>Web 2.0 设计使用中许多渐变效果。</strong></p>
<h4>为什么渐变如此有用？</h4>
<p>渐变使原本平乏的色块变得柔和。</p>
<p><a href="http://www.circografico.com.ar/portfolio/" target="_blank"><img src="http://lh5.ggpht.com/hegfirose/SPgdcgbWy5I/AAAAAAAACZ8/mfboTyVM3ow/s400/20-3d-alex-dukal-folio.jpg" alt="Artypapers" width="300" height="200" /></a></p>
<p>渐变可以创造非平面的错觉，在<a href="http://www.circografico.com.ar/portfolio/">Alex Dukal作品集</a>中达到了良好的效果。</p>
<p><a href="http://www.aurum3.com/" target="_blank"><img src="http://lh5.ggpht.com/hegfirose/SPgddGDgJTI/AAAAAAAACaE/0s_HrFiTE0k/s400/20-3d-aurum.jpg" alt="Aurum homepage" width="300" height="200" /></a></p>
<p>渐变可以用来逐渐加亮或加深色块，以创造网页的整体氛围。</p>
<p><a href="http://www.artypapers.com/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdCIY-4wI/AAAAAAAACUc/4qVEjUtJo_U/s400/20-artypapers.jpg" alt="Artypapers" width="300" height="200" /></a></p>
<p>在网页背景中，渐变也可以创造<strong>距离的错觉</strong>。常用的渐变组合是由蓝色到白色，产生 <a title="More on Wikipedia" href="http://en.wikipedia.org/wiki/Aerial_perspective">空中透视（aerial perspective）</a>的效果，创造背景在地平线消失的效果。</p>
<p>渐变经常被用在网页背景的顶部，以助于产生可视区域的分界线。</p>
<p><a href="http://www.colorschemer.com/" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdYXhsxYI/AAAAAAAACYc/cM74TmmHQSk/s400/20-colorschemer.gif.jpg" alt="Colorschemer" width="270" height="180" /></a> <a href="http://www.circografico.com.ar/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdduDI0OI/AAAAAAAACaM/F4aO_njygy4/s400/20-alex-dukal-small.jpg" alt="Alex Dukal, illustrator" width="270" height="180" /></a></p>
<p>渐变也是阴影、内发光、镜面高光的主要部分，正如在玻璃质感或塑料质感的按钮中所见。</p>
<p>注意，渐变在并列区域颜色平铺的时候最有效。</p>
<p><a href="http://www.curve2.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdJ6sI4QI/AAAAAAAACV8/7UiJ-6QzeXk/s400/20-curve2.jpg" alt="Curve2" width="300" height="200" /></a></p>
<p>在<a href="http://www.curve2.com/" target="_blank">Curve2</a> 主页中，渐变显得更加有效，因为每个渐变放在临近白色或灰色块的地方。这是常见的渐变加强基色（在Photoshop中使用诸如颜色加深、覆盖的混合效果），创造巧妙的不同的色调。</p>
<p>上图中，突出的绿色比深的基色更加温暖、更加友好，总体效果柔和、丰富兼具。</p>
<h3 id="reflections">13 倒影Reflections</h3>
<p>倒影的视觉错觉是在渐变中最经常使用的效果之一。</p>
<p>通常有两种实现方式：</p>
<ul>
<li>光在有光泽的平面上反射产生的高光效果</li>
<li>有光泽的桌面效果</li>
</ul>
<h4>高光曲线-Specular highlights</h4>
<p>水滴、玻璃珠、闪亮的塑料按钮等效果在过去几年已经很流行。我不知道这种趋势何时开始，但苹果的网站应该是最有影响力之一，以及以前的水滴界面外观<a title="More on Wikipedia" href="http://en.wikipedia.org/wiki/Aqua_%28user_interface%29" target="_blank">Aqua interface look &amp; feel</a>。</p>
<p>下面是一些例子：</p>
<p><img src="http://lh3.ggpht.com/hegfirose/SPgdZLUKcvI/AAAAAAAACY0/BPViuNC_cwY/s400/20-surface-apple.jpg" alt="Apple's classic button" width="179" height="67" /></p>
<p><a href="http://www.apple.com/" target="_blank">Apple.com</a> 经典的标签按钮，现在仍然在使用。它们使用标签上的光源结合内外发光产生的高光实现塑料效果。</p>
<p><img src="http://lh3.ggpht.com/hegfirose/SPgdZ2nTzNI/AAAAAAAACY8/8nTLi0Glfrc/s400/20-surface-i-hate-clowns-redesign.jpg" alt="MY design" width="179" height="67" /></p>
<p>这些标签源自我最近的设计中，这里有一个抛光（从一个亮白色的高光里）碳纤维外观。碳纤维的效果来源于对角线中的图标发光。</p>
<p><img src="http://lh3.ggpht.com/hegfirose/SPgda6s7VxI/AAAAAAAACZU/dk6A1jfiE48/s400/20-surface-enhanced-labs.jpg" alt="" width="179" height="67" /></p>
<p>更漂亮的光泽塑料，注意倒影如何附着在图形的边沿上，产生边缘圆滑效果的错觉。</p>
<p><img src="http://lh5.ggpht.com/hegfirose/SPgdcb7vtvI/AAAAAAAACZ0/yTx3BkhyPUI/s400/20-surface-ruby-containers.gif.jpg" alt="" width="179" height="67" /></p>
<p>类似的效果在方形上看起来像一个徽章。非水平角度产生活力的感觉。</p>
<p><img src="http://lh6.ggpht.com/hegfirose/SPgdei63OyI/AAAAAAAACas/dVf7HFnPqZ4/s400/20-surface-shiny-button.jpg" alt="" width="179" height="67" /></p>
<p>来自 <a href="http://www.cafepress.com/" target="_blank">cafepress.com</a> 的光泽按钮使用圆滑的倒影，如同一个宽光源反射在圆形表面上。</p>
<p><img src="http://lh5.ggpht.com/hegfirose/SPgdebn3RGI/AAAAAAAACak/Onfiy8ARmQM/s400/20-surface-mediatemple1.jpg" alt="" width="179" height="67" /></p>
<p>来自主机商 <a href="http://www.mediatemple.net/" target="_blank">Mediatemple</a> 的按钮有更多的漫反射，达到无光泽的玻璃效果。</p>
<h4>桌面光泽（反光）效果！</h4>
<p>这也是苹果开创的（我确定）。现在这个确实漂亮的效果如此流行，使其处于过度使用的危险中，现在已经开始审美疲劳并被设计师抛弃。</p>
<p>记住，网页设计师通常对这些东西更感性，这是理所当然的，所以即便这种效果被设计师抛弃，在未来的一段时间里一般公众也许仍然觉得这种效果很酷。</p>
<p><a href="http://www.creixems.com/home/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdd1JfyoI/AAAAAAAACac/6ib6qFSmYfU/s400/20-shinytable-2.jpg" alt="" width="100" height="100" /></a></p>
<p>标准的苹果外观，白色基调上的灰色褪去。</p>
<p><a href="http://www.curve2.com/" target="_blank"><img src="http://lh5.ggpht.com/hegfirose/SPgddxV9xlI/AAAAAAAACaU/guIUpXKXkcg/s400/20-shinytable-1.jpg" alt="" width="100" height="100" /></a></p>
<p>在着色的背景上。</p>
<p><img src="http://lh5.ggpht.com/hegfirose/SPgdftiaqNI/AAAAAAAACbE/qKALuEzfSL8/s400/20-shinytable-3.jpg" alt="" width="100" height="100" /></p>
<p>向两边淡出</p>
<p><a href="http://www.stonewall.co.za/" target="_blank"><img src="http://lh5.ggpht.com/hegfirose/SPgdf2RBe-I/AAAAAAAACbM/bcdUju_0qS4/s400/20-shinytable-4.jpg" alt="" width="100" height="100" /></a></p>
<p>更极端的角度，丰富的分层效果。</p>
<p><a href="http://www.photoshoplab.com/web20-design-kit.html" target="_blank">如何制作这样的效果（来源于photoshoplab.com） »</a></p>
<h3 id="cute-icons">14 可爱的图标Cute icons</h3>
<p><strong>图标在Web 2.0 设计中扮演着一个很重要的角色。现在我们使用更少、更精致且具有更多含义的图标。</strong></p>
<p>当图标<strong>易于辨别</strong>且<strong>带有明确含义</strong>时是有用的，而在许多其他案例中，一句简洁的话更有效。</p>
<p>在过去，图标被过度地使用，看起来每个人都想为每个导航链接或标签使用图标。现在，我们更广泛地使用清晰的文字，不愿再去用图标弄乱页面。</p>
<p>做图标的Web 2.0设计师被保留在价值更高的地方。</p>
<p>更简洁、更开阔的设计要求对丰富的图标更少关注和允许。</p>
<p>一些例子，说明各种情况。</p>
<h4>简洁、干净的</h4>
<p><img src="http://lh5.ggpht.com/hegfirose/SPgde2ipgdI/AAAAAAAACa0/6IPP9UlzIsI/s400/20-icons-hireus.gif.jpg" border="0" alt="" width="179" height="67" /> <img src="http://lh5.ggpht.com/hegfirose/SPgdfTInZuI/AAAAAAAACa8/Qa1psRGO6bM/s400/20-icons-scribble.gif.jpg" border="0" alt="" width="179" height="67" /> <img src="http://lh5.ggpht.com/hegfirose/SPgdgFaI_LI/AAAAAAAACbU/vUqsoZdQ-wI/s400/20-icons-7.gif.jpg" border="0" alt="" width="179" height="67" /></p>
<h4>可爱、古怪的</h4>
<p>没有必要的特写小山！</p>
<p><a href="http://www.37signals.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdg2JgteI/AAAAAAAACbk/vS20XrDuzo8/s400/20-icons-10.gif.jpg" border="0" alt="37 Signals" width="179" height="67" /></a> <a href="http://overture21.com/" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdhnKzJxI/AAAAAAAACbs/wu5duffrGPQ/s400/20-icons-6.jpg" border="0" alt="Overture" width="179" height="67" /></a> <img src="http://lh4.ggpht.com/hegfirose/SPgdh1Hki2I/AAAAAAAACb0/w1hVnXhl3yk/s400/20-icons-ihc.jpg" border="0" alt="" width="179" height="67" /></p>
<h4>丰富详细地</h4>
<p>设计灵感源于Mac OSX， <a href="http://www.enhancedlabs.com/main/showroom.php" target="_blank">Enhanced Labs</a> 查看更多案例。</p>
<p><img src="http://lh6.ggpht.com/hegfirose/SPgdgn_7DtI/AAAAAAAACbc/fAjpt1a0GWo/s400/20-icons-8.gif.jpg" border="0" alt="" width="179" height="67" /> <img src="http://lh4.ggpht.com/hegfirose/SPgdijxhDkI/AAAAAAAACcM/fllDWNwZTZY/s400/20-icons-4.jpg" border="0" alt="" width="179" height="67" /> <img src="http://lh5.ggpht.com/hegfirose/SPgdi88hWAI/AAAAAAAACcU/Af0q3n2Wqkc/s400/20-icons-13.jpg" border="0" alt="" width="179" height="67" /></p>
<p><img src="http://lh6.ggpht.com/hegfirose/SPgdiP1dPoI/AAAAAAAACb8/GbLlo6OPb1o/s400/20-icons-14.gif.jpg" border="0" alt="" width="179" height="67" /> <img src="http://lh3.ggpht.com/hegfirose/SPgdioW8-kI/AAAAAAAACcE/7-d_1UTsiy8/s400/20-icons-15.gif.jpg" border="0" alt="" width="179" height="67" /> <img src="http://lh4.ggpht.com/hegfirose/SPgdjynEtoI/AAAAAAAACcs/2uHW3ouL1Jo/s400/20-icons-17.jpg" border="0" alt="" width="179" height="67" /></p>
<h3 id="star-flashes">15 星光闪耀 Star flashes</h3>
<p>下面是粘贴在网页上的星形标签，用于提醒用户注意某些重要信息。</p>
<p>星形在低价商店中做价格标签吸引客户。由于这个原因，许多Web 2.0 网站中开始使用它，同样的原因是它可能比其他网站便宜。</p>
<p>星形标签很有效，当然只能用于吸引注意力到某些重要的信息。我建议一个页面上只用一个（最多一个）！</p>
<p>另一种风格看起来被过度使用了，在未来一年可能会按常规发展。</p>
<p><img src="http://lh4.ggpht.com/hegfirose/SPgdjSLCeiI/AAAAAAAACcc/5hsDHfFAVMM/s400/20" border="0" alt="" width="100" height="100" /> <img src="http://lh3.ggpht.com/hegfirose/SPgdj6hDiHI/AAAAAAAACc0/8xty-CEKjew/s400/20-flashes2.gif.jpg" border="0" alt="" width="100" height="100" /> <img src="http://lh5.ggpht.com/hegfirose/SPgdjtI2RrI/AAAAAAAACck/lVuzkLZkyL0/s400/20-flashes3.jpg" border="0" alt="" width="100" height="100" /> <img src="http://lh3.ggpht.com/hegfirose/SPgdkOamCJI/AAAAAAAACdE/fKYM4zeRvx8/s400/20-flashes4.gif.jpg" border="0" alt="" width="100" height="100" /></p>
<p><img src="http://lh5.ggpht.com/hegfirose/SPgdklHqojI/AAAAAAAACdM/1otCovTN7bM/s400/20-flashes5.gif.jpg" border="0" alt="" width="100" height="100" /> <img src="http://lh3.ggpht.com/hegfirose/SPgdk6UPGlI/AAAAAAAACdU/awL_NRKphhM/s400/20-flashes6.gif.jpg" border="0" alt="" width="100" height="100" /> <img src="http://lh4.ggpht.com/hegfirose/SPgdkCnvvsI/AAAAAAAACc8/ciiKR-pboTg/s400/20-flashes7.jpg" border="0" alt="" width="100" height="100" /><img src="http://lh3.ggpht.com/hegfirose/SPgdljUkSlI/AAAAAAAACdc/2TGydJFlBfk/s400/20-flashes8.jpg" border="0" alt="" width="100" height="100" /></p>
<p>（译文完）</p>
<p>via：<a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm">http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm</a><br />
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part3/" title="Web 2.0设计指导三">Web 2.0设计指导三</a> - Oct 19, 2008</li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part2/" title="Web 2.0设计指导二">Web 2.0设计指导二</a> - Oct 19, 2008</li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part1/" title="Web 2.0设计指导一">Web 2.0设计指导一</a> - Oct 19, 2008</li>
<li><a href="http://palmback.cn/2008/11/javascript-in-modern-web-design/" title="现代Web设计中的JavaScript">现代Web设计中的JavaScript</a> - Nov 10, 2008</li>
<li><a href="http://palmback.cn/2008/08/single-page-portfolio-sites/" title="单页作品集展示网站">单页作品集展示网站</a> - Aug 20, 2008</li>
<li><a href="http://palmback.cn/2008/03/space-death-wound-of-internet-explorer-7/" title="让IE7致命的空格">让IE7致命的空格</a> - Mar 31, 2008</li>
<li><a href="http://palmback.cn/2007/12/browser-capabilities-of-web-design/" title="网页设计的浏览器兼容之痛">网页设计的浏览器兼容之痛</a> - Dec 3, 2007</li>
<li><a href="http://palmback.cn/2007/09/sfruc-and-chicago-gsb-emba-webpage-finished/" title="EMBA homepage finished">EMBA homepage finished</a> - Sep 22, 2007</li>
<li><a href="http://palmback.cn/2007/09/designing-with-web-standards/" title="Designing with Web Standards">Designing with Web Standards</a> - Sep 11, 2007</li>
<li><a href="http://palmback.cn/2007/09/buy-3-books/" title="买了几本书">买了几本书</a> - Sep 3, 2007</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://palmback.cn/2008/10/web-20-design-guide-part4/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web 2.0设计指导三</title>
		<link>http://palmback.cn/2008/10/web-20-design-guide-part3/</link>
		<comments>http://palmback.cn/2008/10/web-20-design-guide-part3/#comments</comments>
		<pubDate>Sun, 19 Oct 2008 10:21:37 +0000</pubDate>
		<dc:creator>handback</dc:creator>
				<category><![CDATA[How-to]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web 2.0]]></category>

		<guid isPermaLink="false">http://palmback.cn/?p=819</guid>
		<description><![CDATA[5 固定的实色块
在区分明显的顶部引领下，许多网站定义了许多醒目、清晰的是固定区域。固定块有各种形式，包括：

导航 - Navigation
背景（画布） - Background / canvas
主要内容区域
其他事项
Callouts / cross-links

设计一个使这些区域立即和它相邻内容区分开来的网页是可行的，最明显的方式是使用色块。
 
 
白色的空间也同样有效。使用强烈的颜色的风险是过度吸引用户眼球，转移了用户对其他页面元素的注意力。我认为把干净的内容放在白色的空间上建立简单的体验，有助于用户放松、自由地浏览。
 
6 简洁的导航
固定导航——作为整个网站模板必需的一部分，出现在每个页面，应当是清晰可辨的，而且应该易理解、易确定访问目标、易选择。

Web 2.0 设计的整站导航应该是大气、醒目、简洁、显而易见的。
行内超链接（Inline hyperlinks） （文本里的链接）应明显区别于正常文本。






为什么要使用简洁的导航
用户需要能够识别导航，导航告诉用户各种各样重要的信息：

在网站的什么位置
从这里可以到达哪
有什么可以选择的事项

下面是简洁的原则、减少干扰以及使导航明晰的最好方式：

固定导航和内容分离
使用颜色、色调、图形区分导航
导航项目应该大气、醒目
为每一个链接使用明晰的文字，避免含糊不清

如何保持导航简洁
记住关键所在：导航应该清楚地区分于非导航内容。
遵循上面的原则，并通过定位、颜色、透明区分即可。
我关于导航的文章 »
行内超链接也应该从周围的文本中足够地突出，看下面的截图，每个案例中， 那些是链接毫无疑问。就个人而言，我比较喜欢用不带下划线的蓝色文本，鼠标经过时别为红色带下划线的。


7 醒目的Logo
一个清晰、醒目、大气的标识，象征着组织文化、语气，给用户第一印象，这是一个醒目的Logo能做到的。
下面是一些100%大小的Logo。注意这些Logo趋向于特别大，符合Web 2.0 的一般原则。

为什么？
大气、醒目的Logo告诉用户：这就是我们。在某种程度上我们可以相信组织（人）如其言。
何时、何地？
查看关于Logo的文章 及 基于文字的Logo。
很难表述如何设计一个好的logo，但简而言之，你的Logo应该：

有视觉效果，其他人能够使用于他们可能用的地方（像传单或者T-shirts）
被认可而且有特色
第一眼就能展现品牌的特点和质量

更多信息……
查看我收藏的近50个令人振奋的网站 »
8 较大的文本
与旧式的网站相比，许多Web 2.0 风格的网站使用大字号文本。
如果填充相同数量的空间，少一些“东西”，你有更多的剩余空间；有了更多的剩余空间，你可以加大更重要的元素。加大的元素比更小的元素更显而易见。这种效果应用贯穿于于整个印刷设计的历史中，用来突出标题、标题页和头条新闻。
这不仅仅使加大的文本突出，而且对更多人而言提高了可访性——不仅是对视觉缺陷的人，也包括在日光下查看LCD显示器的、离显示器比较远的以及只是粗略浏览的人。如果考虑到这些因素，那可能是相当多的人。
 
 
何时、如何使用大文本
大文本使大多数网页对更多人提高可用性，这是一件好事。
当然，大小是相对的。不能让一个正常的、繁忙的网站都使用大字体、让其更可用。这可能无法正常工作，甚至更糟。
为使用大字体文本，你应当简化、移除不必要的元素。而且你应该有让一些文字大于其他文字的理由，而且加大文本必须是有意义、有用的。没有必要为了oh-so Web 2.0而增加一些大文本。
如果一个页面上有许多信息，而且其重要程度持平，那么可以都保持小文本。
9 粗体文字介绍Bold text introductions
由于受大文本主题的引导，许多网站加粗了所有文字描述。
这些加粗的文字通常用来展现站点独特的地方、“电梯游说” 或主要信息。
他们往往是图形，而不是规则的文本，因为设计师能够更多地控制页面的视觉冲击，尤其是在早期的浏览体验中。
 
 
何时、如何使用粗体文本简介
如果想在页面中醒目地突出某个东西，那么能用且只能用一个粗体文本。（如果没有想醒目突出的东西，那么值得考虑一下网页/网站的目的，然后提出值得醒目突出的内容。）
如果有信息要让用户在第一时间看到，那么将其提前作为大标题并放置在相对纯色的背景上。
10 强烈的色彩
明亮、强烈的色彩吸引眼球，可以用来将页面分割为明确的几部分和突出重要元素。
对于简单、剥离的设计，可以使用强烈的色彩以区分不同的块或者吸引用户注意希望突出的信息。

The Treo Mobile site 使用三个强烈的色块标示和宣传该网站涉及的三个主要领域。突出背景颜色表明这不是网站的主要内容，而大号、粗体的文字让用户快速了解上面的内容并决定是否继续浏览。

Colorschemer 用许多强烈、明亮、喜庆的颜色把页面分块，和偏于中性的背景色协调。

Apple's design 经常使用许多平衡组合的色调（黑），用丰富的效果和颜色吸引用户眼球。在我看来，这是设计最完美的网站。如上图，深黑色区域和强烈的色彩被少量地使用以突出重要内容。
色彩也是一个很大的传达品牌价值的媒介。

如上图，所采用的颜色并不明亮，但是很浓烈，一个原因就是采用了大量的绿色。此设计使用绿色传达“品质”和“健康”的价值。
注意: 网站设计不要采用类似于上图的形式！

这个网站专门为女性销售户外服装，软色调加强了精选的品牌个性。
慎重使用强烈色彩做背景或包围重点内容。

上图中，一个精彩、有效的设计被外围的强烈色块区域折中了，这样的结果是用户的眼球从主要内容上被转移了。

The Aurum Newtech site 冒了同样的危险，但是由于颜色足够苍白以保持内容显而易见。 大气、醒目、适当间隔的内容元素也有助于把用户的注意力从“有吸引力的”背景转移回来。
记住，适度使用
用强烈的色彩吸引眼球仅在有许多区域未被浓墨重彩的情况下有效，如果试图所有内容都吸引眼球，结果适得其反，使页面混乱、令人迷惑。
Related Posts

Web 2.0设计指导四 [...]]]></description>
			<content:encoded><![CDATA[<h3 id="solid-areas-of-screen-real-estate">5 固定的实色块</h3>
<p>在区分明显的顶部引领下，许多网站定义了许多醒目、清晰的是固定区域。固定块有各种形式，包括：</p>
<ul>
<li>导航 - Navigation</li>
<li>背景（画布） - Background / canvas</li>
<li>主要内容区域</li>
<li>其他事项</li>
<li>Callouts / cross-links</li>
</ul>
<p>设计一个使这些区域立即和它相邻内容区分开来的网页是可行的，最明显的方式是使用色块。</p>
<p><a href="http://www.mediconmedia.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdBXsmREI/AAAAAAAACUM/g8TdND3Amfg/s400/20-medicon-media.jpg" alt="Medicon Media" width="270" height="180" /></a> <a href="http://www.jeremyboles.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdPC2bvpI/AAAAAAAACW8/uOFhzVssJv4/s400/20-jeremy-boles.jpg" alt="Jeremy Boles' blog" width="270" height="180" /></a></p>
<p><a href="http://www.exblogs.com/" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdMSt43NI/AAAAAAAACWc/LyVFuSwx1Vg/s400/20-ex-blogs.gif.jpg" alt="Ex Blogs" width="270" height="180" /></a> <a href="http://www.curve2.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdJ6sI4QI/AAAAAAAACV8/7UiJ-6QzeXk/s400/20-curve2.jpg" alt="Curve2" width="270" height="180" /></a></p>
<p>白色的空间也同样有效。使用强烈的颜色的风险是过度吸引用户眼球，转移了用户对其他页面元素的注意力。我认为把干净的内容放在白色的空间上建立简单的体验，有助于用户放松、自由地浏览。</p>
<p><a href="http://www.apple.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdHiqFprI/AAAAAAAACVU/iQb4Tw2p1wg/s400/20-apple-expo.jpg" alt="Apple Expo" width="270" height="180" /></a> <a href="http://www.etre.uk.com/" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdB_c6qeI/AAAAAAAACUU/Sha8vy6NpO8/s400/20-etre.jpg" alt="Etre" width="270" height="180" /></a></p>
<h3 id="simple-nav">6 简洁的导航</h3>
<p>固定导航——作为整个网站模板必需的一部分，出现在每个页面，应当是清晰可辨的，而且应该易理解、易确定访问目标、易选择。</p>
<ul>
<li>Web 2.0 设计的<strong>整站导航</strong>应该是大气、醒目、简洁、显而易见的。</li>
<li><strong>行内超链接（Inline hyperlinks）</strong> （文本里的链接）应明显区别于正常文本。</li>
</ul>
<p><a href="http://www.tradingeye.com/" target="_blank"><img src="http://lh5.ggpht.com/hegfirose/SPgdQH0wuzI/AAAAAAAACXE/HWBKYecqDNE/s800/20-snip-nav-tradingeye.jpg" alt="Navigation from TradingEye" width="470" height="153" /></a></p>
<p><a href="http://www.crossconnector.com/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdOnloLbI/AAAAAAAACW0/x9o-iuXQZ9g/s800/20-snip-nav-crossconnector.gif.jpg" alt="Navigation from Cross Connector" width="470" height="153" /></a></p>
<p><a href="http://www.mozilla.com/"><img src="http://lh3.ggpht.com/hegfirose/SPgdQ3LvbKI/AAAAAAAACXM/ncHjP-VtsWg/s800/20-snip-nav-moz.gif.jpg" alt="Navigation from Mozilla" width="470" height="153" /></a></p>
<p><a href="http://www.londonpainconsultants.com/" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdRFj9jgI/AAAAAAAACXU/KUAgX_RD7QM/s800/20-snip-nav-painclinic.jpg" alt="Navigation from London Pain Consultants" width="470" height="153" /></a></p>
<p><a href="http://www.tonyyoo.com/protolize/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdRVF1LWI/AAAAAAAACXc/TGtD0hE2DLI/s800/20-snip-nav-protolize.jpg" alt="Navigation from Protolize" width="470" height="153" /></a></p>
<h4>为什么要使用简洁的导航</h4>
<p>用户需要能够识别导航，导航告诉用户各种各样重要的信息：</p>
<ul>
<li>在网站的什么位置</li>
<li>从这里可以到达哪</li>
<li>有什么可以选择的事项</li>
</ul>
<p>下面是简洁的原则、减少干扰以及使导航明晰的最好方式：</p>
<ul>
<li>固定导航和内容分离</li>
<li>使用颜色、色调、图形区分导航</li>
<li>导航项目应该大气、醒目</li>
<li>为每一个链接使用明晰的文字，避免含糊不清</li>
</ul>
<h4>如何保持导航简洁</h4>
<p>记住关键所在：<strong>导航应该清楚地区分于非导航内容</strong>。</p>
<p>遵循上面的原则，并通过定位、颜色、透明区分即可。</p>
<p><a href="http://www.webdesignfromscratch.com/navigation.cfm">我关于导航的文章 »</a></p>
<p>行内超链接也应该从周围的文本中足够地突出，看下面的截图，每个案例中， 那些是链接毫无疑问。就个人而言，我比较喜欢用不带下划线的蓝色文本，鼠标经过时别为红色带下划线的。</p>
<p><img src="http://lh3.ggpht.com/hegfirose/SPgdSaOVh0I/AAAAAAAACXk/ZtCaftGZV0g/s800/20-nav-hyperlinks1.gif.jpg" alt="Inline Link" width="567" height="169" /></p>
<p><img src="http://lh4.ggpht.com/hegfirose/SPgdUJMzHTI/AAAAAAAACXs/vcZFJc-CrvI/s800/20-nav-hyperlinks2.gif.jpg" alt="Inline Link" width="567" height="169" /></p>
<h3 id="bold-logos">7 醒目的Logo</h3>
<p>一个清晰、醒目、大气的标识，象征着组织文化、语气，给用户第一印象，这是一个醒目的Logo能做到的。</p>
<p>下面是一些100%大小的Logo。注意这些Logo趋向于特别大，符合Web 2.0 的一般原则。</p>
<p><img src="http://lh6.ggpht.com/hegfirose/SPgdU0iqmSI/AAAAAAAACX0/QetlaHJ_O3w/s800/20-logos-wall.gif.jpg" alt="Collection of strong logos" width="662" height="358" /></p>
<h4>为什么？</h4>
<p>大气、醒目的Logo告诉用户：这就是我们。在某种程度上我们可以相信组织（人）如其言。</p>
<h4>何时、何地？</h4>
<p>查看<a href="http://www.webdesignfromscratch.com/logos.cfm">关于Logo的文章</a> 及 <a href="http://www.webdesignfromscratch.com/text_based_logos.cfm">基于文字的Logo</a>。</p>
<p>很难表述如何设计一个好的logo，但简而言之，你的Logo应该：</p>
<ul>
<li><strong>有视觉效果</strong>，其他人能够使用于他们可能用的地方（像传单或者T-shirts）</li>
<li><strong>被认可而且有特色</strong></li>
<li>第一眼就能展现品牌的特点和质量</li>
</ul>
<h4>更多信息……</h4>
<p><a href="http://www.webdesignfromscratch.com/great-web-logos-for-creative-inspiration.cfm">查看我收藏的近50个令人振奋的网站 »</a></p>
<h3 id="bigger-text">8 较大的文本</h3>
<p><strong>与旧式的网站相比，许多Web 2.0 风格的网站使用大字号文本。</strong></p>
<p>如果填充相同数量的空间，少一些“东西”，你有更多的剩余空间；有了更多的剩余空间，你可以加大更重要的元素。加大的元素比更小的元素更显而易见。这种效果应用贯穿于于整个印刷设计的历史中，用来突出标题、标题页和头条新闻。</p>
<p>这不仅仅使加大的文本突出，而且对更多人而言提高了可访性——不仅是对视觉缺陷的人，也包括在日光下查看LCD显示器的、离显示器比较远的以及只是粗略浏览的人。如果考虑到这些因素，那可能是相当多的人。</p>
<p><a href="http://browsehappy.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdUz68WuI/AAAAAAAACX8/Kye0W6mjWQ0/s400/20-browse-happy.jpg" alt="Browse Happy" width="270" height="180" /></a> <a href="http://www.37signals.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdHDVfX-I/AAAAAAAACVM/AryCx6moMx4/s400/20-37-signals.jpg" alt="37 Signals' home page" width="270" height="180" /></a></p>
<p><a href="http://intlstore.mozilla.org/index.php?cPath=2" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdBNw9llI/AAAAAAAACUE/PnLb_0An9jk/s400/20-mozilla-store.jpg" alt="Mozilla store" width="270" height="180" /></a> <a href="http://newtech.aurum3.com/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdNZcBdjI/AAAAAAAACWk/1QH0uttc_Ho/s400/20-aurum3.jpg" alt="Aurum Newtech" width="270" height="180" /></a></p>
<h4>何时、如何使用大文本</h4>
<p><strong>大文本使大多数网页对更多人提高可用性，这是一件好事。</strong></p>
<p>当然，大小是相对的。不能让一个正常的、繁忙的网站都使用大字体、让其更可用。这可能无法正常工作，甚至更糟。</p>
<p>为使用大字体文本，你应当简化、移除不必要的元素。而且你应该有让一些文字大于其他文字的理由，而且加大文本必须是有意义、有用的。没有必要为了oh-so Web 2.0而增加一些大文本。</p>
<p>如果一个页面上有许多信息，而且其重要程度持平，那么可以都保持小文本。</p>
<h3 id="bold-text-introductions">9 粗体文字介绍Bold text introductions</h3>
<p><strong>由于受大文本主题的引导，许多网站加粗了所有文字描述。</strong></p>
<p>这些加粗的文字通常用来展现站点<abbr title="Unique Selling Point">独特的地方</abbr>、“<a title="Explained on Wikipedia" href="http://en.wikipedia.org/wiki/Elevator_pitch" target="_blank">电梯游说”</a> 或主要信息。</p>
<p>他们往往是图形，而不是规则的文本，因为设计师能够更多地控制页面的视觉冲击，尤其是在早期的浏览体验中。</p>
<p><a href="http://www.apple.com/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdVLc6cVI/AAAAAAAACYE/weKpw-RASdk/s400/20-apple-home.jpg" alt="Apple.com" width="270" height="180" /></a> <a href="http://www.37signals.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdHDVfX-I/AAAAAAAACVM/AryCx6moMx4/s400/20-37-signals.jpg" alt="37 Signals' home page" width="270" height="180" /></a></p>
<p><a href="http://www.exblogs.com/" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdMSt43NI/AAAAAAAACWc/LyVFuSwx1Vg/s400/20-ex-blogs.gif.jpg" alt="Ex Blogs" width="270" height="180" /></a> <a href="http://www.crossconnector.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdXX6a2SI/AAAAAAAACYU/dw-AjhUe7WQ/s400/20-cross-connector.gif.jpg" alt="Cross Connector" width="270" height="180" /></a></p>
<h4>何时、如何使用粗体文本简介</h4>
<p>如果想在页面中醒目地突出某个东西，那么能用且只能用一个粗体文本。（如果没有想醒目突出的东西，那么值得考虑一下网页/网站的目的，然后提出值得醒目突出的内容。）</p>
<p>如果有信息要让用户在第一时间看到，那么将其提前作为大标题并放置在相对纯色的背景上。</p>
<h3 id="strong-colours">10 强烈的色彩</h3>
<p><strong>明亮、强烈的色彩吸引眼球，可以用来将页面分割为明确的几部分和突出重要元素。</strong></p>
<p>对于简单、剥离的设计，可以使用强烈的色彩以区分不同的块或者吸引用户注意希望突出的信息。</p>
<p><a href="http://www.treomobile.co.uk/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdVilAy4I/AAAAAAAACYM/I9NQ2weC3Jg/s400/20-treo.jpg" alt="Treo mobile" width="300" height="200" /></a></p>
<p><a href="http://www.treomobile.com/">The Treo Mobile site</a> 使用三个强烈的色块标示和宣传该网站涉及的三个主要领域。突出背景颜色表明这不是网站的主要内容，而大号、粗体的文字让用户快速了解上面的内容并决定是否继续浏览。</p>
<p><a href="http://www.colorschemer.com/" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdYXhsxYI/AAAAAAAACYc/cM74TmmHQSk/s400/20-colorschemer.gif.jpg" alt="Colorschemer" width="300" height="200" /></a></p>
<p><a href="http://www.colorschemer.com/">Colorschemer</a> 用许多强烈、明亮、喜庆的颜色把页面分块，和偏于中性的背景色协调。</p>
<p><a href="http://www.apple.com/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdVLc6cVI/AAAAAAAACYE/weKpw-RASdk/s400/20-apple-home.jpg" alt="Apple.com home" width="300" height="200" /></a></p>
<p><a href="http://www.apple.com/">Apple's design</a> 经常使用许多平衡组合的色调（黑），用丰富的效果和颜色吸引用户眼球。在我看来，这是设计最完美的网站。如上图，深黑色区域和强烈的色彩被少量地使用以突出重要内容。</p>
<h4>色彩也是一个很大的传达品牌价值的媒介。</h4>
<p><a href="http://www.realmeat.co.uk/" target="_blank"><img src="http://lh5.ggpht.com/hegfirose/SPgdC84JaiI/AAAAAAAACUs/kVAZtViXERI/s400/20-real-meat.jpg" alt="Real Meat" width="300" height="200" /></a></p>
<p>如上图，所采用的颜色并不明亮，但是很浓烈，一个原因就是采用了大量的绿色。此设计使用绿色传达“品质”和“健康”的价值。</p>
<p><strong>注意: 网站设计不要采用类似于上图的形式！</strong></p>
<p><a href="http://www.gearforgirls.co.uk/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdYol5bzI/AAAAAAAACYk/D61K5B_Du5U/s400/20-gear-for-girls.jpg" alt="Gear for girls" width="300" height="200" /></a></p>
<p>这个网站专门为女性销售户外服装，软色调加强了精选的品牌个性。</p>
<h4>慎重使用强烈色彩做背景或包围重点内容。</h4>
<p><a href="http://www.giddykippa.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdY3fcvwI/AAAAAAAACYs/iWVELNNLaGI/s400/20-giddykippa.jpg" alt="Giddy Kippa" width="300" height="200" /></a></p>
<p>上图中，一个精彩、有效的设计被外围的强烈色块区域折中了，这样的结果是用户的眼球从主要内容上被转移了。</p>
<p><a href="http://newtech.aurum3.com/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdNZcBdjI/AAAAAAAACWk/1QH0uttc_Ho/s400/20-aurum3.jpg" alt="Aurum Newtech" width="300" height="200" /></a></p>
<p><a href="http://newtech.aurum3.com/" target="_blank">The Aurum Newtech site</a> 冒了同样的危险，但是由于颜色足够苍白以保持内容显而易见。 大气、醒目、适当间隔的内容元素也有助于把用户的注意力从“有吸引力的”背景转移回来。</p>
<h4>记住，适度使用</h4>
<p>用强烈的色彩吸引眼球仅在有许多区域未被浓墨重彩的情况下有效，如果试图所有内容都吸引眼球，结果适得其反，使页面混乱、令人迷惑。<br />
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part4/" title="Web 2.0设计指导四">Web 2.0设计指导四</a> - Oct 19, 2008</li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part2/" title="Web 2.0设计指导二">Web 2.0设计指导二</a> - Oct 19, 2008</li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part1/" title="Web 2.0设计指导一">Web 2.0设计指导一</a> - Oct 19, 2008</li>
<li><a href="http://palmback.cn/2008/11/javascript-in-modern-web-design/" title="现代Web设计中的JavaScript">现代Web设计中的JavaScript</a> - Nov 10, 2008</li>
<li><a href="http://palmback.cn/2008/08/single-page-portfolio-sites/" title="单页作品集展示网站">单页作品集展示网站</a> - Aug 20, 2008</li>
<li><a href="http://palmback.cn/2008/03/space-death-wound-of-internet-explorer-7/" title="让IE7致命的空格">让IE7致命的空格</a> - Mar 31, 2008</li>
<li><a href="http://palmback.cn/2007/12/browser-capabilities-of-web-design/" title="网页设计的浏览器兼容之痛">网页设计的浏览器兼容之痛</a> - Dec 3, 2007</li>
<li><a href="http://palmback.cn/2007/09/sfruc-and-chicago-gsb-emba-webpage-finished/" title="EMBA homepage finished">EMBA homepage finished</a> - Sep 22, 2007</li>
<li><a href="http://palmback.cn/2007/09/designing-with-web-standards/" title="Designing with Web Standards">Designing with Web Standards</a> - Sep 11, 2007</li>
<li><a href="http://palmback.cn/2007/09/buy-3-books/" title="买了几本书">买了几本书</a> - Sep 3, 2007</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://palmback.cn/2008/10/web-20-design-guide-part3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Web 2.0设计指导二</title>
		<link>http://palmback.cn/2008/10/web-20-design-guide-part2/</link>
		<comments>http://palmback.cn/2008/10/web-20-design-guide-part2/#comments</comments>
		<pubDate>Sun, 19 Oct 2008 07:24:03 +0000</pubDate>
		<dc:creator>handback</dc:creator>
				<category><![CDATA[How-to]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web 2.0]]></category>

		<guid isPermaLink="false">http://palmback.cn/?p=801</guid>
		<description><![CDATA[2 居中布局
和几年前相比，现在基本上大多数网站都布局在浏览器窗口的中间，全屏（流体）、居左固定宽度的布局相对较少。（更多关于居中请查看 Current Style ）
为什么选择居中布局
Web2.0风格是简洁、大气、直观的。网站居中布局感觉更加简单、大气、直观。另外，考虑合理安排屏幕显示内容，避免过多的内容产生阅读压力。居中布局使用较小的空间展示更多的内容，留给用户更多自由和轻松的白色填充空间。
何时、如何使用居中布局
一般应该采用居中布局，除非特殊的需求，比如你想获得更多的创作空间，或者你想在屏幕上显示尽可能多信息（例如网络应用程序）。
3 少列
几年前，三列的网站最常见，四列的网站也不少见；现在，2列的网站更加常见，三列是主流的最大限度。
为什么使用较少的列
简单就是美。少列感觉更简洁、更大气、更直观。少列减少传达的信息量，使其更加明朗。
还有一个居中布局的副产品，因为没有完全填充屏幕，而且也不想任何时候都屏幕上都显示那么多，我们根本不需要多列信息。

37Signals一直将关于现状和前景的问答放在首页。
他们采用了两列布局，是研究简洁设计的一个很好的案例。这样让信息说明一切，而且不添加任何干扰的东西。

苹果公司是另一个简洁设计的引领者。
这种布局方式真的很出色。每次体验苹果的简洁设计，都使我更加确信它的禅意是设计的圣杯。有人经常问：“我们需要多少盒子/列/行？”典型的苹果布局回答了这个问题。然后他们大胆地删除不必要的元素，结果无可置疑地是最简洁最有效地和用户沟通。
如何确定适当的列数
我想肯定地推荐使用不要超过三列的布局，仅仅因为应当使用符合自己需要的列。
当然总是有例外的，下面是几个有效使用超过三列布局的例子。

Derek Powazek 的博客主体部分使用三列布局，而底部采用四列。底部是一种 pick &#38; mix，强调“以你喜欢”的感觉。

Amazon (UK)有两个边栏，产品安排在中间另外三列里。
这样的效果很好，因为它的设计达到了明确区分每一列的目的。左列是确切的产品分类导航，右列是其他元素，中间区域清晰地平铺并用白色块分割，所以它看起来不压抑。

Popurls.com包含几块挑选&#38;混合的信息，从类似 digg和del.icio.us这样的网站中整理热点链接，但主体文字区域仍保持三列布局。在往下，展示Flickr上的照片缩略图（而后有YourTube视频）。这些被平铺在几列里，给用户放松的空间。
也有很糟糕的网站……

All Things Web2.0使用四列布局：两个边栏、中间两列。
这个布局的缺点是不知道从哪里开始浏览，所有东西都不知到优先级（部分原因是因为浅黑的背景）。如我们所见，Amazon和这个页面有很大的区别，因为Amazon的设计协助用户区分屏幕上的各个区域，不会感觉混乱无序。
4 分隔顶部
这意味着是屏幕的顶端（品牌标识及导航区域）区别与剩余部分（主要内容）。 当然，关于这个原则没有什么新的内涵，这是一个很好的原则而且一直这么使用。但是现在比以往用得更多，而且区别还经常更大。
看看这些“页眉”如何清晰地区别于其他部分，即便是很小的尺寸：



为什么要区分出顶部
顶部告诉用户“这是页面的顶部”。这听起来显而易见，但实际上清晰地知道页面从哪里开始，可以给用户更好的感觉；而且以强烈、直观的表述开始网站/网页之旅，更具Web 2.0质感。用户喜欢丰富、大气、简洁的设计。
上面的网站其中两个其顶部只包含品牌标识 (Protolize, Mediconmedia)，1个仅包括导航(Cross Connector)，其余三个两者兼具。在我看来Cross Connector的缺点是Logo在导航之后，我更倾向使导航更清晰、明确（如  Simple Bits ）。
何时、如何使用分离的顶部
无论任何网站，标识和主导航都应该是明显、醒目、清晰的。
所以设计网站的时候都应该建立一块清晰的空间，醒目地放置Logo和导航。始终把Logo置于屏幕上方；我推荐把主导航置于Logo之后。把网页的顶部置突出显示在屏幕上，并使其和主要内容区分开来，以达到更好效果。
网页的顶部应该在视觉上区分于其他内容，区分的最强烈方式是用一个醒目的颜色或色调块，当然也有其他方式。下面是两个顶部使用实线区分顶部的例子，而不是用颜色填充本身。

下面的两个网站中，顶部明显地在主要列区域之外。

Related Posts

Web 2.0设计指导四 - Oct 19, 2008
Web 2.0设计指导三 - Oct 19, 2008
Web 2.0设计指导一 - Oct 19, 2008
现代Web设计中的JavaScript - Nov 10, 2008
单页作品集展示网站 - Aug 20, 2008
让IE7致命的空格 - Mar 31, 2008
网页设计的浏览器兼容之痛 - [...]]]></description>
			<content:encoded><![CDATA[<h3 id="central-layout">2 居中布局</h3>
<p>和几年前相比，现在基本上大多数网站都布局在浏览器窗口的中间，全屏（流体）、居左固定宽度的布局相对较少。（更多关于居中请查看 <a href="http://www.webdesignfromscratch.com/current-style.cfm" target="_blank">Current Style</a> ）</p>
<h4>为什么选择居中布局</h4>
<p>Web2.0风格是简洁、大气、直观的。网站居中布局感觉更加简单、大气、直观。另外，考虑合理安排屏幕显示内容，避免过多的内容产生阅读压力。居中布局使用较小的空间展示更多的内容，留给用户更多自由和轻松的白色填充空间。</p>
<h4>何时、如何使用居中布局</h4>
<p>一般应该采用居中布局，除非特殊的需求，比如你想获得更多的创作空间，或者你想在屏幕上显示尽可能多信息（例如网络应用程序）。</p>
<h3 id="fewer-columns">3 少列</h3>
<p>几年前，三列的网站最常见，四列的网站也不少见；现在，2列的网站更加常见，三列是主流的最大限度。</p>
<h4>为什么使用较少的列</h4>
<p>简单就是美。少列感觉更简洁、更大气、更直观。少列减少传达的信息量，使其更加明朗。</p>
<p>还有一个居中布局的副产品，因为没有完全填充屏幕，而且也不想任何时候都屏幕上都显示那么多，我们根本不需要多列信息。</p>
<p><a href="http://www.37signals.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdHDVfX-I/AAAAAAAACVM/AryCx6moMx4/s400/20-37-signals.jpg" alt="37 Signals' home page" width="300" height="200" /></a></p>
<p><a href="http://www.37signals.com/" target="_blank">37Signals</a>一直将关于现状和前景的问答放在首页。</p>
<p>他们采用了两列布局，是研究简洁设计的一个很好的案例。这样让信息说明一切，而且不添加任何干扰的东西。</p>
<p><a href="http://www.apple.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdHiqFprI/AAAAAAAACVU/iQb4Tw2p1wg/s400/20-apple-expo.jpg" alt="Apple Expo" width="300" height="200" /></a></p>
<p><a href="http://www.apple.com/" target="_blank">苹果公司</a>是另一个简洁设计的引领者。</p>
<p>这种布局方式真的很出色。每次体验苹果的简洁设计，都使我更加确信它的禅意是设计的圣杯。有人经常问：“我们需要多少盒子/列/行？”典型的苹果布局回答了这个问题。然后他们大胆地删除不必要的元素，结果无可置疑地是最简洁最有效地和用户沟通。</p>
<h4>如何确定适当的列数</h4>
<p>我想肯定地推荐使用不要超过三列的布局，仅仅因为应当使用符合自己需要的列。</p>
<p>当然总是有例外的，下面是几个有效使用超过三列布局的例子。</p>
<p><a href="http://www.powazek.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdIGQ3l-I/AAAAAAAACVc/4e6UGEQYPQ8/s400/20-powazek.jpg" alt="Derek Powazek's blog" width="300" height="200" /></a></p>
<p><a href="http://www.powazek.com/" target="_blank">Derek Powazek 的博客</a>主体部分使用三列布局，而底部采用四列。底部是一种 <strong>pick &amp; mix</strong>，强调“以你喜欢”的感觉。</p>
<p><a href="http://www.amazon.co.uk/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdIhUwhoI/AAAAAAAACVk/0MlDju-a4cI/s400/20-amazon-uk.jpg" alt="Amazon.co.uk" width="300" height="200" /></a></p>
<p><a href="http://www.amazon.co.uk/" target="_blank">Amazon (UK)</a>有两个边栏，产品安排在中间另外三列里。</p>
<p>这样的效果很好，因为它的设计达到了明确区分每一列的目的。左列是确切的产品分类导航，右列是其他元素，中间区域清晰地平铺并用白色块分割，所以它看起来不压抑。</p>
<p><a href="http://www.popurls.com/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdI33PCnI/AAAAAAAACVs/dU2VV0PKamg/s400/20-popurls.jpg" alt="Popurls.com screenshot" width="300" height="200" /></a></p>
<p><a href="http://www.popurls.com/" target="_blank">Popurls.com</a>包含几块挑选&amp;混合的信息，从类似 <a href="http://www.digg.com/" target="_blank">digg</a>和<a href="http://del.icio.us/" target="_blank">del.icio.us</a>这样的网站中整理热点链接，但主体文字区域仍保持三列布局。在往下，展示<a href="http://www.flickr.com/" target="_blank">Flickr</a>上的照片缩略图（而后有YourTube视频）。这些被平铺在几列里，给用户放松的空间。</p>
<h4>也有很糟糕的网站……</h4>
<p><a href="http://www.allthingsweb2.com/"><img src="http://lh3.ggpht.com/hegfirose/SPgdJsMkoUI/AAAAAAAACV0/YfXVevHYNY0/s400/20-all-things-web-20.jpg" alt="All things web 2.0 has 2 much" width="300" height="200" /></a></p>
<p><a href="http://www.allthingsweb2.com/">All Things Web2.0</a>使用四列布局：两个边栏、中间两列。</p>
<p>这个布局的缺点是不知道从哪里开始浏览，所有东西都不知到优先级（部分原因是因为浅黑的背景）。如我们所见，Amazon和这个页面有很大的区别，因为Amazon的设计协助用户区分屏幕上的各个区域，不会感觉混乱无序。</p>
<h3 id="separate-top-sections">4 分隔顶部</h3>
<p><strong>这意味着是屏幕的顶端（品牌标识及导航区域）区别与剩余部分（主要内容）。</strong> 当然，关于这个原则没有什么新的内涵，这是一个很好的原则而且一直这么使用。但是现在比以往用得更多，而且区别还经常更大。</p>
<p>看看这些“页眉”如何清晰地区别于其他部分，即便是很小的尺寸：</p>
<p class="image"><a href="http://www.simplebits.com/" target="_blank"><img src="http://lh5.ggpht.com/hegfirose/SPgdCjze7JI/AAAAAAAACUk/ofNJA06rv2c/s400/20-simplebits.jpg" alt="Simplebits" width="270" height="180" /></a><a href="http://intlstore.mozilla.org/index.php?cPath=2" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdBNw9llI/AAAAAAAACUE/PnLb_0An9jk/s400/20-mozilla-store.jpg" alt="Mozilla store" width="270" height="180" /></a></p>
<p class="image"><a href="http://www.mediconmedia.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdBXsmREI/AAAAAAAACUM/g8TdND3Amfg/s400/20-medicon-media.jpg" alt="Medicon Media" width="270" height="180" /></a><a href="http://www.curve2.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdJ6sI4QI/AAAAAAAACV8/7UiJ-6QzeXk/s400/20-curve2.jpg" alt="Curve2" width="270" height="180" /></a></p>
<p class="image"><a href="http://www.alsacreations.fr/" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdLO3tSrI/AAAAAAAACWE/ldJE_LScMwc/s400/20-alsa-creations.jpg" alt="Alsa Crétions" width="270" height="180" /></a><a href="http://www.tonyyoo.com/protolize/" target="_blank"><img src="http://lh5.ggpht.com/hegfirose/SPgdLX9b3pI/AAAAAAAACWM/Sq_G2nVKmW4/s400/20-protolize.jpg" alt="Tony Yoo's Protolize" width="270" height="180" /></a></p>
<h4>为什么要区分出顶部</h4>
<p>顶部告诉用户“这是页面的顶部”。这听起来显而易见，但实际上清晰地知道页面从哪里开始，可以给用户更好的感觉；而且以强烈、直观的表述开始网站/网页之旅，更具Web 2.0质感。用户喜欢丰富、大气、简洁的设计。</p>
<p>上面的网站其中两个其顶部只包含品牌标识 (<a href="http://www.tonyyoo.com/protolize/" target="_blank">Protolize</a>, <a href="http://www.mediconmedia.com/" target="_blank">Mediconmedia</a>)，1个仅包括导航(Cross Connector)，其余三个两者兼具。在我看来<a href="http://www.crossconnector.com/" target="_blank">Cross Connector</a>的缺点是Logo在导航之后，我更倾向使导航更清晰、明确（如  <a href="http://www.simplebits.com/" target="_blank">Simple Bits</a> ）。</p>
<h4>何时、如何使用分离的顶部</h4>
<p><strong>无论任何网站，标识和主导航都应该是明显、醒目、清晰的。</strong></p>
<p>所以设计网站的时候都应该建立一块清晰的空间，醒目地放置Logo和导航。始终把Logo置于屏幕上方；我推荐把主导航置于Logo之后。把网页的顶部置突出显示在屏幕上，并使其和主要内容区分开来，以达到更好效果。</p>
<p>网页的顶部应该在视觉上区分于其他内容，区分的最强烈方式是用一个醒目的颜色或色调块，当然也有其他方式。下面是两个顶部使用实线区分顶部的例子，而不是用颜色填充本身。</p>
<p class="image"><a href="http://www.londonpainconsultants.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdLz-8z9I/AAAAAAAACWU/O7uHZ6_8HWY/s400/20-london-pain-consultants.jpg" alt="London Pain Consultants" width="270" height="180" /></a><a href="http://www.exblogs.com/" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdMSt43NI/AAAAAAAACWc/LyVFuSwx1Vg/s400/20-ex-blogs.gif.jpg" alt="Ex Blogs" width="270" height="180" /></a></p>
<p>下面的两个网站中，顶部明显地在主要列区域之外。</p>
<p class="image"><a href="http://newtech.aurum3.com/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdNZcBdjI/AAAAAAAACWk/1QH0uttc_Ho/s400/20-aurum3.jpg" alt="Aurum Newtech" width="270" height="180" /></a><a href="http://www.steinruckdesign.com/" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdNqPfA6I/AAAAAAAACWs/uKWckTtPDuY/s400/20-steinruck.jpg" alt="Steinruck Design" width="270" height="180" /></a></p>
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part4/" title="Web 2.0设计指导四">Web 2.0设计指导四</a> - Oct 19, 2008</li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part3/" title="Web 2.0设计指导三">Web 2.0设计指导三</a> - Oct 19, 2008</li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part1/" title="Web 2.0设计指导一">Web 2.0设计指导一</a> - Oct 19, 2008</li>
<li><a href="http://palmback.cn/2008/11/javascript-in-modern-web-design/" title="现代Web设计中的JavaScript">现代Web设计中的JavaScript</a> - Nov 10, 2008</li>
<li><a href="http://palmback.cn/2008/08/single-page-portfolio-sites/" title="单页作品集展示网站">单页作品集展示网站</a> - Aug 20, 2008</li>
<li><a href="http://palmback.cn/2008/03/space-death-wound-of-internet-explorer-7/" title="让IE7致命的空格">让IE7致命的空格</a> - Mar 31, 2008</li>
<li><a href="http://palmback.cn/2007/12/browser-capabilities-of-web-design/" title="网页设计的浏览器兼容之痛">网页设计的浏览器兼容之痛</a> - Dec 3, 2007</li>
<li><a href="http://palmback.cn/2007/09/sfruc-and-chicago-gsb-emba-webpage-finished/" title="EMBA homepage finished">EMBA homepage finished</a> - Sep 22, 2007</li>
<li><a href="http://palmback.cn/2007/09/designing-with-web-standards/" title="Designing with Web Standards">Designing with Web Standards</a> - Sep 11, 2007</li>
<li><a href="http://palmback.cn/2007/09/buy-3-books/" title="买了几本书">买了几本书</a> - Sep 3, 2007</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://palmback.cn/2008/10/web-20-design-guide-part2/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Web 2.0设计指导一</title>
		<link>http://palmback.cn/2008/10/web-20-design-guide-part1/</link>
		<comments>http://palmback.cn/2008/10/web-20-design-guide-part1/#comments</comments>
		<pubDate>Sun, 19 Oct 2008 07:07:14 +0000</pubDate>
		<dc:creator>handback</dc:creator>
				<category><![CDATA[How-to]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web 2.0]]></category>

		<guid isPermaLink="false">http://palmback.cn/?p=795</guid>
		<description><![CDATA[本教程描述现代Web 2.0设计风格中常用的各种平面设计元素，然后解释它们为什么有效（例如为什么他们变得普遍），及在设计中如何、何时、何处使用这些元素。
这是继Current Style 之后的文章，分析时下Web 2.0设计风格更深入的特点。
特点涵盖概述
下面的列表是许多典型的Web 2.0网站的特点概述。很明显，一个展现所有这些特点的网站并不意味着好，而且展示这些特点不一定实现Web 2.0风格或者更好！

简洁 - Simplicity 
居中布局 - Central layout 
少列 - Fewer columns 
分隔顶部 - Separate top section 
固定的实色块 - Solid areas of screen real-estate 
简洁的导航 - Simple nav 
醒目的Logo - Bold logos 
较大的文本 - Bigger text 
粗体文字介绍 - Bold text introductions 
强烈的色彩 - Strong colours 
丰富的平面效果 - Rich surfaces 
渐变 [...]]]></description>
			<content:encoded><![CDATA[<p>本教程描述现代Web 2.0设计风格中常用的各种平面设计元素，然后解释<strong>它们为什么有效</strong>（例如为什么他们变得普遍），及在设计中<strong>如何、何时、何处</strong>使用这些元素。</p>
<p>这是继<a href="http://www.webdesignfromscratch.com/current-style.cfm" target="_blank">Current Style</a> 之后的文章，分析时下Web 2.0设计风格更深入的特点。</p>
<h3>特点涵盖概述</h3>
<p>下面的列表是许多典型的Web 2.0网站的特点概述。很明显，一个展现所有这些特点的网站并不意味着好，而且展示这些特点不一定实现Web 2.0风格或者更好！</p>
<ol>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part1/#simplicity">简洁 - Simplicity</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part2/#central-layout">居中布局 - Central layout</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part2/#fewer-columns">少列 - Fewer columns</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part2/#separate-top-sections">分隔顶部 - Separate top section</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part3/#solid-areas-of-screen-real-estate">固定的实色块 - Solid areas of screen real-estate</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part3/#simple-nav">简洁的导航 - Simple nav</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part3/#bold-logos">醒目的Logo - Bold logos</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part3/#bigger-text">较大的文本 - Bigger text</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part3/#bold-text-introductions">粗体文字介绍 - Bold text introductions</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part3/#strong-colours">强烈的色彩 - Strong colours</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part4/#rich-surfaces">丰富的平面效果 - Rich surfaces</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part4/#gradients">渐变 - Gradients</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part4/#reflections">倒影 - Reflections</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part4/#cute-icons">可爱的图标 - Cute icons</a> </li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part4/#star-flashes">星光闪耀 - Star flashes</a> </li>
</ol>
<h3>免责声明</h3>
<p>这些特点并非都适用于所有的案例，经常有例外，而且有许多在网站设计时错误的、过度的、毫无创意的混合使用这些特点的糟糕案例。</p>
<p>不是将所有这些元素扔在一起就能制作出好网页，就像不是鸡蛋、糖、面粉揉在一起就得到蛋糕一样。</p>
<p>制作网页需要许多灵感使各种力量一起工作，一个好的设计解决方案是可以平衡这些（经常对立的）力量的。</p>
<h3>Web 2.0 ?!</h3>
<p>在我的文章<a href="http://www.webdesignfromscratch.com/current-style.cfm" target="_blank">current style</a>中，我用“Web 2.0设计”这个术语描述网页设计中盛行的风格。</p>
<p>很多人用“Web 2.0”描述：</p>
<ul>
<li>网络经济的复苏</li>
<li>网站和服务交互的一个新水平</li>
<li>或者源于在线社区和社交网络的社会现象</li>
</ul>
<p>也有许多人用这个术语表述有关网页设计的学校。在这样的背景下我使用这个术语也是适当的。</p>
<h3>前言</h3>
<p>我将引领你贯穿当下流行的优秀网站设计的特点，剖析最有意义的特点，解释为什么他们是优秀的，以及如何在自己的网站使用它们。</p>
<p>如果要我用一个词总结“Web 2.0”的话，我选“简洁”这个，这也是我们教程开始部分。</p>
<p>我非常支持简洁设计，我觉得它是网页设计的发展趋势。</p>
<p>简洁、醒目、优雅的页面设计用更少的元素传达更多的信息：</p>
<ul>
<li>能够让设计师根据网站的目标，通过少而精的视觉元素指导用户访问。</li>
<li>使用更少的语言传达更多信息，精心挑选意象创造让用户渴望的感觉。</li>
<li>捉摸用户想从网站获取什么信息，据此设计创意。</li>
</ul>
<h3 id="simplicity">1 简洁</h3>
<p><strong>网页设计比以往任何时候都更简单，这是件好事。</strong></p>
<p><strong>Web 2.0 设计意味着专注、干净、简洁。</strong></p>
<p>但这并非意味着极简主义。我确实支持简洁，但并不是说所有网站都应该极度简化，而是我们应该用更少的必要的元素，实现所要达到目标。</p>
<p>我一直在坚持的原则是：假如某个问题有两个解决方案，那么简单更优。</p>
<p>下面是一些例子。注意，不必要的元素已经被剔除，虽然页面上还可以有更多元素，但这样能达到更好的效果吗？</p>
<p>结果是看内容的时候，你会发现用户恰好与设计师所希望的元素交互，而且你不会介意简单的页面，而你也达到了访问的目的。</p>
<p class="image"><a href="http://intlstore.mozilla.org/index.php?cPath=2" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdBNw9llI/AAAAAAAACUE/PnLb_0An9jk/s400/20-mozilla-store.jpg" alt="Mozilla store" width="270" height="180" /></a> <a href="http://www.mediconmedia.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdBXsmREI/AAAAAAAACUM/g8TdND3Amfg/s400/20-medicon-media.jpg" alt="Medicon Media" width="270" height="180" /></a></p>
<p class="image"><a href="http://www.etre.uk.com/" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdB_c6qeI/AAAAAAAACUU/Sha8vy6NpO8/s400/20-etre.jpg" alt="Etre" width="270" height="180" /></a><a href="http://www.simplebits.com/" target="_blank"><img src="http://lh5.ggpht.com/hegfirose/SPgdCjze7JI/AAAAAAAACUk/ofNJA06rv2c/s400/20-simplebits.jpg" alt="Simplebits" width="270" height="180" /></a></p>
<p class="image"><a href="http://www.artypapers.com/" target="_blank"><img src="http://lh3.ggpht.com/hegfirose/SPgdCIY-4wI/AAAAAAAACUc/4qVEjUtJo_U/s400/20-artypapers.jpg" alt="Artypapers" width="270" height="180" /></a> <a href="http://www.realmeat.co.uk/" target="_blank"><img src="http://lh5.ggpht.com/hegfirose/SPgdC84JaiI/AAAAAAAACUs/kVAZtViXERI/s400/20-real-meat.jpg" alt="Real Meat" width="270" height="180" /></a></p>
<h4>为什么简洁更好</h4>
<ul>
<li>网站有目标，每个网页也都有目的。</li>
<li>用户的注意力是有限的。</li>
<li>设计师应该帮助用户发现他们想要的（或者让让他们注意网站希望他们注意的）。</li>
<li>网页上的元素吸引用户的眼球，元素越多，用户去关注的不同事情就越多，用户注意到重要元素的可能性就越小。</li>
<li>我们需要很确定的沟通，而且需要尽量减小干扰。这就意味着我们需要寻找一个用尽量少的元素实现尽可能多功能的解决方案，那就是节约元素，即简洁。</li>
</ul>
<h4>何时、如何让设计简洁</h4>
<h4>何时？</h4>
<p>始终应该如此！</p>
<h4>如何？</h4>
<p>有两个重要的原则可以成功实现简洁：</p>
<ol>
<li>在不影响效果的前提下，移除不必要的元素。</li>
<li>能达到同样效果的可选方案中，选择简单的。</li>
</ol>
<blockquote><p>似乎并不是当没有东西需要添加的时候就达到了完美，而是当没有东西需要删除的时候。</p>
<p>"It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away."</p>
<p><cite><a href="http://zh.wikipedia.org/wiki/安托万·德·圣-埃克絮佩里" target="_blank">Antoine de Saint-Exupéry</a>,Terre des hommes, 1939</cite></p></blockquote>
<p><strong>设计的时候，把有意识地移除不必要的元素作为一个准则。</strong></p>
<p>特别应该浓缩与网页目标相关性小的区域布局，因为这些区域会分散用户对主要内容和导航的注意力。</p>
<p>利用视觉细节，不管是线条、文字、形状、颜色去传达信息， <a href="http://www.webdesignfromscratch.com/dont_decorate_communicate.cfm" target="_blank">而不是仅仅为了装饰</a>。</p>
<p>下面是一个页面设计不够简洁的案例。<a href="http://www.yaxay.com/" target="_blank">Yaxay's</a> 页面使用了大量元素，但是许多元素都是<strong>装饰性</strong>的，一部分是页面背景。相对少的元素用来让用户查找或理解信息、和网站交互。</p>
<p class="image"><a href="http://www.yaxay.com/" target="_blank"><img src="http://lh4.ggpht.com/hegfirose/SPgdDLsbYBI/AAAAAAAACU0/Trs7uLxuI40/s400/20-yaxay.jpg" alt="Yaxay is busy and ineffective" width="270" height="180" /> <img src="http://lh5.ggpht.com/hegfirose/SPgdDmtG1_I/AAAAAAAACU8/zEj1WUlQzhU/s400/20-yaxay-detail.jpg" alt="Yaxay detail" width="270" height="180" /> </a></p>
<p>看看这个页面上元素如此之多，但明确用于实际内容、导航和交互功能的又是如此之少。</p>
<p><a href="http://en.wikipedia.org/wiki/Edward_Tufte" target="_blank">Edward Tufte</a> 用<strong>“数据墨水”</strong>（如可以传递信息的细节）和<strong>“非数据墨水”</strong>（如仅作装饰细节）描述这个现象。托佛特衡量信息设计（图形，图表，演示等）有效性的一种标准是<strong>数据墨水和非数据墨水的使用比例</strong>，数据墨水使用比例越高，设计的有效性可能越高。</p>
<p>以上面Yaxay的细节图（第二幅）为例，有太多称之为“繁忙”的元素，如边缘、色调变化、颜色变化、形状、线条。有许多的元素，但有用的仅仅是：</p>
<ol type="a">
<li>网站Logo</li>
<li>导航按钮上标签：art gallery</li>
</ol>
<p>剩余其他的“繁忙”元素：背景形状、界面上的斜纹、格子、渐变……都是干扰，都是非数据墨水，因为它们都<strong>不能传达信息</strong>。</p>
<h4>我并不反对丰富、复杂或者美感的网页设计。</h4>
<p>简洁意味着：</p>
<blockquote><p>使用需要的元素，不管你需要什么，达到传达需要传达信息的目的。</p></blockquote>
<p>当然，通常要传达的不是<strong>硬数据</strong>，而是<strong>软数据</strong>。</p>
<dl>
<dt>硬数据</dt>
<dd>指事实，诸如新闻、股票价格、列车时刻，或者你的银行帐户里有多少钱……</dd>
<dt>软数据</dt>
<dd>设计信息传达性质的方面，诸如对公司质量的第一印象、服务提供者的亲和感，及一个产品是否适合你的感觉。这些都是同样重要的！</dd>
</dl>
<p>无论传达硬数据或软数据，都应有意识地、慎重使用元素。</p>
<p>看下面的例子：</p>
<p><a href="http://www.circografico.com.ar/" target="_blank"><img src="http://lh6.ggpht.com/hegfirose/SPgdGrhH2AI/AAAAAAAACVE/RfZ8Dui6LZg/s800/20-alex-dukal-large.jpg" alt="Alex Dukal, illustrator" width="600" height="400" /></a></p>
<p><a href="http://www.circografico.com.ar/" target="_blank">Alex Dukal 的网站</a>很丰富、有趣而且吸引人。网站使用一系列视觉技巧来吸引用户的注意力，让用户感兴趣，而且Alex的作品给用户一种温暖的质感。</p>
<p>但它也是简洁的，因为他慎重、敏感地使用元素、墨水和繁忙元素，这不是无缘无故地，而是简约而丰富。</p>
<p>无论如何，明智地选择何处使用墨水、像素，用来传达首要信息，然后考虑能否用更少的元素有效地传达，如果能，就这样做。<br />
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part4/" title="Web 2.0设计指导四">Web 2.0设计指导四</a> - Oct 19, 2008</li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part3/" title="Web 2.0设计指导三">Web 2.0设计指导三</a> - Oct 19, 2008</li>
<li><a href="http://palmback.cn/2008/10/web-20-design-guide-part2/" title="Web 2.0设计指导二">Web 2.0设计指导二</a> - Oct 19, 2008</li>
<li><a href="http://palmback.cn/2008/11/javascript-in-modern-web-design/" title="现代Web设计中的JavaScript">现代Web设计中的JavaScript</a> - Nov 10, 2008</li>
<li><a href="http://palmback.cn/2008/08/single-page-portfolio-sites/" title="单页作品集展示网站">单页作品集展示网站</a> - Aug 20, 2008</li>
<li><a href="http://palmback.cn/2008/03/space-death-wound-of-internet-explorer-7/" title="让IE7致命的空格">让IE7致命的空格</a> - Mar 31, 2008</li>
<li><a href="http://palmback.cn/2007/12/browser-capabilities-of-web-design/" title="网页设计的浏览器兼容之痛">网页设计的浏览器兼容之痛</a> - Dec 3, 2007</li>
<li><a href="http://palmback.cn/2007/09/sfruc-and-chicago-gsb-emba-webpage-finished/" title="EMBA homepage finished">EMBA homepage finished</a> - Sep 22, 2007</li>
<li><a href="http://palmback.cn/2007/09/designing-with-web-standards/" title="Designing with Web Standards">Designing with Web Standards</a> - Sep 11, 2007</li>
<li><a href="http://palmback.cn/2007/09/buy-3-books/" title="买了几本书">买了几本书</a> - Sep 3, 2007</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://palmback.cn/2008/10/web-20-design-guide-part1/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>AMD CPU及风扇装拆视频及图解</title>
		<link>http://palmback.cn/2007/10/amd-processor-and-heatsink-installation-videos/</link>
		<comments>http://palmback.cn/2007/10/amd-processor-and-heatsink-installation-videos/#comments</comments>
		<pubDate>Fri, 12 Oct 2007 12:24:46 +0000</pubDate>
		<dc:creator>handback</dc:creator>
				<category><![CDATA[How-to]]></category>
		<category><![CDATA[AMD]]></category>
		<category><![CDATA[CPU]]></category>
		<category><![CDATA[Heatsink]]></category>
		<category><![CDATA[Installation]]></category>
		<category><![CDATA[Processor]]></category>

		<guid isPermaLink="false">http://palmback.cn/archives/351.htm</guid>
		<description><![CDATA[AMD的CPU除了发热量大这一硬伤以外，个人感觉散热器（风扇）的拆装也比较困难。就我的偏好来讲，Intel的CPU一直是我的首先，除非Intel倒闭了我才选AMD。但我不用不意味着不接触，因为我家菜菜用的就是AMD的CPU，算是被人啃了吧，也罢，谁叫买电脑的时候我们还不认识呢。菜菜的电脑经常无故自动关机，排除系统和其他硬件的原因后，确定罪魁祸首是CPU散热不好，发热过大导致的。五一的时候我去本来想把散热器拆下来擦擦的，拆容易，装的时候把我好一阵折腾。
今天菜菜说风扇被她弄下来了，我不在这可不好办，去电脑城吧，远不算还麻烦；让她自己装又比较困难，上AMD的官网找找了，AMD的产品支持还做得不错，找到了CPU及散热器安装视频，还有说明文档。
Processor and Heatsink Installation Videos
The following videos will guide you through the most important steps when installing a processor and also installing and choosing a suitable heatsink.
Please note you will need to have Windows Media Player or RealPlayer installed on your computer to view the videos below.



 





Processor Installation（处理器安装——点击右键用下载软件下载，下同）
Download Now! - 2.6MB high quality .wmv [...]]]></description>
			<content:encoded><![CDATA[<p>AMD的CPU除了发热量大这一硬伤以外，个人感觉散热器（风扇）的拆装也比较困难。就我的偏好来讲，Intel的CPU一直是我的首先，除非Intel倒闭了我才选AMD。但我不用不意味着不接触，因为我家菜菜用的就是AMD的CPU，算是被人啃了吧，也罢，谁叫买电脑的时候我们还不认识呢。菜菜的电脑经常无故自动关机，排除系统和其他硬件的原因后，确定罪魁祸首是CPU散热不好，发热过大导致的。五一的时候我去本来想把散热器拆下来擦擦的，拆容易，装的时候把我好一阵折腾。</p>
<p>今天菜菜说风扇被她弄下来了，我不在这可不好办，去电脑城吧，远不算还麻烦；让她自己装又比较困难，上AMD的官网找找了，AMD的产品支持还做得不错，找到了CPU及散热器安装视频，还有说明文档。</p>
<blockquote><p><strong>Processor and Heatsink Installation Videos</strong></p>
<p>The following videos will guide you through the most important steps when installing a processor and also installing and choosing a suitable heatsink.</p>
<p>Please note you will need to have Windows Media Player or RealPlayer installed on your computer to view the videos below.</p>
<table border="0" width="70%">
<tr>
<td width="50%"><a href="http://windowsmedia.com/download/download.asp" target="new"><img src="http://www.amd.com.cn/CHCN//assets/content_type/Additional/windowmedia.gif" tppabs="http://www.amd.com.cn/CHCN/assets/content_type/Additional/windowmedia.gif" align="middle" border="0" height="31" width="88" /></a></td>
<td width="50%"><a href="http://www.real.com/realone/index.html" target="new"><img src="http://www.amd.com.cn/CHCN//assets/content_type/Additional/realplayer.gif" border="0" /> </a></td>
</tr>
</table>
<table>
<tr>
<td width="20%"><img src="http://www.amd.com.cn/CHCN//assets/content_type/Additional/section1.gif" align="left" border="0" /></td>
<td><strong>Processor Installation（处理器安装——点击右键用下载软件下载，下同）<br />
</strong><a href="http://www.amd.com.cn/CHCN/assets/content_type/DownloadableAssets/section1-high.wmv">Download Now!</a> - 2.6MB high quality .wmv file<br />
<a href="http://www.amd.com.cn/CHCN/assets/content_type/DownloadableAssets/section1-low.wmv">Download Now!</a> - 1.0MB low quality .wmv file</td>
</tr>
</table>
<table>
<tr>
<td width="20%"><img src="http://www.amd.com.cn/CHCN//assets/content_type/Additional/section2.gif" align="left" border="0" /></td>
<td><strong>Heatsink Selection（散热器选择）<br />
</strong><a href="http://www.amd.com.cn/CHCN/assets/content_type/DownloadableAssets/section2-high.wmv">Download Now!</a> - 2.1MB high quality .wmv file<br />
<a href="http://www.amd.com.cn/CHCN/assets/content_type/DownloadableAssets/section2-low.wmv">Download Now!</a> - 846KB low quality .wmv file</td>
</tr>
</table>
<table>
<tr>
<td width="20%"><img src="http://www.amd.com.cn/CHCN//assets/content_type/Additional/section3.gif" tppabs="http://www.amd.com.cn/CHCN/assets/content_type/Additional/section3.gif" align="left" border="0" /></td>
<td><strong>Heatsink Installation（散热器安装）<br />
</strong><a href="http://www.amd.com.cn/CHCN/assets/content_type/DownloadableAssets/section3-high.wmv">Download Now!</a> - 3.8MB high quality .wmv file<br />
<a href="http://www.amd.com.cn/CHCN/assets/content_type/DownloadableAssets/section3-low.wmv">Download Now!</a> - 1.5MB low quality .wmv file</td>
</tr>
</table>
<table>
<tr>
<td width="20%"><img src="http://www.amd.com.cn/CHCN//assets/content_type/Additional/section4.gif" align="left" border="0" /></td>
<td><strong>Heatsink Removal &amp; Re-Use（散热器拆卸和再使用）<br />
</strong><a href="http://www.amd.com.cn/CHCN/assets/content_type/DownloadableAssets/section4-high.wmv">Download Now!</a> - 2.3MB high quality .wmv file<br />
<a href="http://www.amd.com.cn/CHCN/assets/content_type/DownloadableAssets/section4-low.wmv">Download Now!</a> - 947KB low quality .wmv file</td>
</tr>
</table>
<table>
<tr>
<td width="20%"><img src="http://www.amd.com.cn/CHCN//assets/content_type/Additional/section5.gif" align="left" border="0" /></td>
<td><strong>Thermal Pad or Paste?<br />
</strong><a href="http://www.amd.com.cn/CHCN/assets/content_type/DownloadableAssets/section5-high.wmv">Download Now!</a> - 2.1MB high quality .wmv file<br />
<a href="http://www.amd.com.cn/CHCN/assets/content_type/DownloadableAssets/section5-low.wmv">Download Now!</a> - 841KB low quality .wmv file</td>
</tr>
</table>
<p><a href="http://www.amd.com/us-en/assets/content_type/white_papers_and_tech_docs/23986.pdf">AMD风扇安装指南PDF下载 </a></p></blockquote>
<h3>Most Commented Posts</h3>
<ul class="related_post">
<li><a href="http://palmback.cn/2007/02/wallop-gmail-orkut-invitation/" title="长期免费放送Wallop、Gmail、orkut 邀请">长期免费放送Wallop、Gmail、orkut 邀请</a> - Feb 28, 2007</li>
<li><a href="http://palmback.cn/2006/03/i-am-a-madman/" title="我就是一个疯子">我就是一个疯子</a> - Mar 16, 2006</li>
<li><a href="http://palmback.cn/2006/05/your-opinions/" title="大家对我下乡的画有什么看法呢？">大家对我下乡的画有什么看法呢？</a> - May 5, 2006</li>
<li><a href="http://palmback.cn/2006/07/i-am-in-beijing/" title="现在在北京">现在在北京</a> - Jul 17, 2006</li>
<li><a href="http://palmback.cn/2006/07/8-days/" title="还有8天">还有8天</a> - Jul 2, 2006</li>
<li><a href="http://palmback.cn/2006/05/%e8%b0%81%e6%98%af%e6%9d%ad%e5%b7%9e%e7%9a%84%ef%bc%9f/" title="谁是杭州的？">谁是杭州的？</a> - May 19, 2006</li>
<li><a href="http://palmback.cn/2006/03/i-am-going-home/" title="我回家了">我回家了</a> - Mar 29, 2006</li>
<li><a href="http://palmback.cn/2007/11/fanfou-javascript-plugin-plus/" title="饭否JS 插件增强版">饭否JS 插件增强版</a> - Nov 7, 2007</li>
<li><a href="http://palmback.cn/2006/05/recently/" title="最近">最近</a> - May 12, 2006</li>
<li><a href="http://palmback.cn/2006/06/just/" title="只是。。。">只是。。。</a> - Jun 20, 2006</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://palmback.cn/2007/10/amd-processor-and-heatsink-installation-videos/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Make a photoWORKS skin</title>
		<link>http://palmback.cn/2007/09/make-a-photoworks-skin/</link>
		<comments>http://palmback.cn/2007/09/make-a-photoworks-skin/#comments</comments>
		<pubDate>Wed, 05 Sep 2007 08:16:44 +0000</pubDate>
		<dc:creator>handback</dc:creator>
				<category><![CDATA[How-to]]></category>
		<category><![CDATA[photoWORKS]]></category>

		<guid isPermaLink="false">http://palmback.cn/archives/286.htm</guid>
		<description><![CDATA[photoWORKS 是一款免费的韩国软件，能批量为图片添加个性十足的边框、水印，目前最新版本是1.5，可以从这里下载简体中文绿色汉化版。
前几天，我得到了一个任务：把一些照片添加做好的模板边框。2G多的照片，把一些重复的、拍得不好的删了以后，还有500多张，如果就那么一张一张的缩小、加边框的话，一定能把人给搞死。于是想到了photoWORKS ，能否把要加的边框模板做成photoWORKS skin，然后批量处理呢？
有想法就得动手做。photoWORKS安装目录下面有一个skin文件夹，里面都是一个bmp文件和同名的ini文件，bmp应该就是边框图片，而ini则是配置文件，也就是说只需要把模板存为bmp，然后在把相关配置写到ini文件里，就成皮肤了。打开ini文件一看：
[Info]
ver=1.0
title=floating film curl right hspace
direction=0
[Skin]
file=floating_film_curl_right_hspace.bmp
upleft=123 123
upmid=5 123
upright=123 123
ctleft=123 5
ctright=123 5
btleft=123 163
btmid=5 163
btright=123 163
[Make]
stretch_mode=1
pic_drawpt=11 11
extraspace=22 62
Info一栏很容易理解，版本、皮肤名称、联系方式，下面两栏就只知道file是用来制定文件路径，其他的看着似懂非懂。Google了一下，没有找到photoWORKS皮肤制作教程，至少中文的没有；又去官方网站看了一下，貌似有这些参数的介绍，但是和没有一样——韩语，看不懂，周围也没有会韩语的同学。最后用这些参数作为关键字google，在一个台湾的网站是发现了已给nEo花样边框的教程，但是打不开，一定又是GFW搞的鬼，FireFox+Tor，终于打开了。nEo Imaging是什么玩意，边框参数几乎和photoWORKS一摸一样？Google之，原来是光影魔术师啊，是我孤陋寡闻了。肯定是nEo抄袭了photoWORKS的边框功能。
既然有nEO的教程，那就照葫芦画瓢，试着做photoWORKS的skin吧。

需要注意的是extraspace=22 62这一项，22=左边距+右边距，62=上边距+下边距；stretch_mode应该是缩放模式，参数未知。各个边距的测量可以在Photoshop一类软件里完成，也可以借助nEo官方的边框制作工具neoFrameMaker，使用方法参加nEo官方论坛。
到此为止，一个photoWORKS skin 基本完成了。本文只做抛砖引玉，如果你只需要边框和水印功能，那用photoWORKS足矣，如果还需要更多功能的话neo Imaging也是不错的选择。
最终我还是用neo Imaging完成我工作的，摸索的过程虽然花了我很大一部分时间，但还是值得。事情是死的，人是活的；达到目的的方法有很多种，殊途同归，却是事半功倍和事倍功半两种截然不同的效果。
Most Commented Posts

长期免费放送Wallop、Gmail、orkut 邀请 - Feb 28, 2007
我就是一个疯子 - Mar 16, 2006
大家对我下乡的画有什么看法呢？ - May 5, 2006
现在在北京 - Jul 17, 2006
还有8天 - Jul 2, 2006
谁是杭州的？ - May 19, 2006
我回家了 - Mar 29, 2006
饭否JS [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://andojung.com/photoWORKS/" target="_blank">photoWORKS </a>是一款免费的韩国软件，能批量为图片添加个性十足的边框、水印，目前最新版本是1.5，可以从<a href="http://www.crfans.com/Software/catalog24/1739.html" target="_blank">这里</a>下载简体中文绿色汉化版。</p>
<p>前几天，我得到了一个任务：把一些照片添加做好的模板边框。2G多的照片，把一些重复的、拍得不好的删了以后，还有500多张，如果就那么一张一张的缩小、加边框的话，一定能把人给搞死。于是想到了<a href="http://andojung.com/photoWORKS/" target="_blank">photoWORKS </a>，能否把要加的边框模板做成<a href="http://andojung.com/photoWORKS/" target="_blank">photoWORKS</a> skin，然后批量处理呢？</p>
<p>有想法就得动手做。<a href="http://andojung.com/photoWORKS/" target="_blank">photoWORKS</a>安装目录下面有一个skin文件夹，里面都是一个bmp文件和同名的ini文件，bmp应该就是边框图片，而ini则是配置文件，也就是说只需要把模板存为bmp，然后在把相关配置写到ini文件里，就成皮肤了。打开ini文件一看：</p>
<blockquote><p>[Info]<br />
ver=1.0<br />
title=floating film curl right hspace<br />
direction=0</p>
<p>[Skin]<br />
file=floating_film_curl_right_hspace.bmp<br />
upleft=123 123<br />
upmid=5 123<br />
upright=123 123<br />
ctleft=123 5<br />
ctright=123 5<br />
btleft=123 163<br />
btmid=5 163<br />
btright=123 163</p>
<p>[Make]<br />
stretch_mode=1<br />
pic_drawpt=11 11<br />
extraspace=22 62</p></blockquote>
<p>Info一栏很容易理解，版本、皮肤名称、联系方式，下面两栏就只知道file是用来制定文件路径，其他的看着似懂非懂。Google了一下，没有找到<a href="http://andojung.com/photoWORKS/" target="_blank">photoWORKS</a>皮肤制作教程，至少中文的没有；又去官方网站看了一下，貌似有这些参数的介绍，但是和没有一样——韩语，看不懂，周围也没有会韩语的同学。最后用这些参数作为关键字google，在一个台湾的网站是发现了已给nEo花样边框的教程，但是打不开，一定又是GFW搞的鬼，FireFox+Tor，终于打开了。nEo Imaging是什么玩意，边框参数几乎和<a href="http://andojung.com/photoWORKS/" target="_blank">photoWORKS</a>一摸一样？Google之，原来是光影魔术师啊，是我孤陋寡闻了。肯定是nEo抄袭了<a href="http://andojung.com/photoWORKS/" target="_blank">photoWORKS</a>的边框功能。</p>
<p>既然有nEO的教程，那就照葫芦画瓢，试着做<a href="http://andojung.com/photoWORKS/" target="_blank">photoWORKS</a>的skin吧。<br />
<a href="http://palmback.cn/wp-content/uploads/2007/09/photoworks1.jpg" rel="lightbox[skinmake]" title="photoWORKS-skin1"><img src="http://palmback.cn/wp-content/uploads/2007/09/photoworks1.jpg" alt="photoWORKS-skin1" /></a><a href="http://palmback.cn/wp-content/uploads/2007/09/photoworks2.jpg" rel="lightbox[skinmake]" title="photoWORKS-skin2"><img src="http://palmback.cn/wp-content/uploads/2007/09/photoworks2.jpg" alt="photoWORKS-skin2" /></a><a href="http://palmback.cn/wp-content/uploads/2007/09/photoworks3.jpg" rel="lightbox[skinmake]" title="photoWORKS-skin3"><img src="http://palmback.cn/wp-content/uploads/2007/09/photoworks3.jpg" alt="photoWORKS-skin3" /></a><a href="http://palmback.cn/wp-content/uploads/2007/09/photoworks4.jpg" rel="lightbox[skinmake]" title="photoWORKS-skin4"><img src="http://palmback.cn/wp-content/uploads/2007/09/photoworks4.jpg" alt="photoWORKS-skin4" /></a><a href="http://palmback.cn/wp-content/uploads/2007/09/photoworks5.jpg" rel="lightbox[skinmake]" title="photoWORKS-skin5"><img src="http://palmback.cn/wp-content/uploads/2007/09/photoworks5.jpg" alt="photoWORKS-skin5" /></a><a href="http://palmback.cn/wp-content/uploads/2007/09/photoworks6.jpg" rel="lightbox[skinmake]" title="photoWORKS-skin6"><img src="http://palmback.cn/wp-content/uploads/2007/09/photoworks6.jpg" alt="photoWORKS-skin6" /></a><a href="http://palmback.cn/wp-content/uploads/2007/09/photoworks7.jpg" rel="lightbox[skinmake]" title="photoWORKS-skin7"><img src="http://palmback.cn/wp-content/uploads/2007/09/photoworks7.jpg" alt="photoWORKS-skin7" /></a><a href="http://palmback.cn/wp-content/uploads/2007/09/photoworks8.jpg" rel="lightbox[skinmake]" title="photoWORKS-skin8"><img src="http://palmback.cn/wp-content/uploads/2007/09/photoworks8.jpg" alt="photoWORKS-skin8" /></a><a href="http://palmback.cn/wp-content/uploads/2007/09/photoworks9.jpg" rel="lightbox[skinmake]" title="photoWORKS-skin9"><img src="http://palmback.cn/wp-content/uploads/2007/09/photoworks9.jpg" alt="photoWORKS-skin9" /></a><a href="http://palmback.cn/wp-content/uploads/2007/09/photoworks10.jpg" rel="lightbox[skinmake]" title="photoWORKS-skin10"><img src="http://palmback.cn/wp-content/uploads/2007/09/photoworks10.jpg" alt="photoWORKS-skin10" /></a><a href="http://palmback.cn/wp-content/uploads/2007/09/photoworks11.jpg" rel="lightbox[skinmake]" title="photoWORKS-skin11"><img src="http://palmback.cn/wp-content/uploads/2007/09/photoworks11.jpg" alt="photoWORKS-skin11" /></a></p>
<p>需要注意的是extraspace=22 62这一项，22=左边距+右边距，62=上边距+下边距；stretch_mode应该是缩放模式，参数未知。各个边距的测量可以在Photoshop一类软件里完成，也可以借助nEo官方的边框制作工具<a href="http://palmback.cn/wp-content/uploads/2007/09/neofm-gb.zip" title="neoFrameMaker">neoFrameMaker</a>，使用方法参加nEo官方论坛。</p>
<p>到此为止，一个<a href="http://andojung.com/photoWORKS/" target="_blank">photoWORKS</a> skin 基本完成了。本文只做抛砖引玉，如果你只需要边框和水印功能，那用<a href="http://andojung.com/photoWORKS/" target="_blank">photoWORKS</a>足矣，如果还需要更多功能的话neo Imaging也是不错的选择。</p>
<p>最终我还是用neo Imaging完成我工作的，摸索的过程虽然花了我很大一部分时间，但还是值得。事情是死的，人是活的；达到目的的方法有很多种，殊途同归，却是事半功倍和事倍功半两种截然不同的效果。<br />
<h3>Most Commented Posts</h3>
<ul class="related_post">
<li><a href="http://palmback.cn/2007/02/wallop-gmail-orkut-invitation/" title="长期免费放送Wallop、Gmail、orkut 邀请">长期免费放送Wallop、Gmail、orkut 邀请</a> - Feb 28, 2007</li>
<li><a href="http://palmback.cn/2006/03/i-am-a-madman/" title="我就是一个疯子">我就是一个疯子</a> - Mar 16, 2006</li>
<li><a href="http://palmback.cn/2006/05/your-opinions/" title="大家对我下乡的画有什么看法呢？">大家对我下乡的画有什么看法呢？</a> - May 5, 2006</li>
<li><a href="http://palmback.cn/2006/07/i-am-in-beijing/" title="现在在北京">现在在北京</a> - Jul 17, 2006</li>
<li><a href="http://palmback.cn/2006/07/8-days/" title="还有8天">还有8天</a> - Jul 2, 2006</li>
<li><a href="http://palmback.cn/2006/05/%e8%b0%81%e6%98%af%e6%9d%ad%e5%b7%9e%e7%9a%84%ef%bc%9f/" title="谁是杭州的？">谁是杭州的？</a> - May 19, 2006</li>
<li><a href="http://palmback.cn/2006/03/i-am-going-home/" title="我回家了">我回家了</a> - Mar 29, 2006</li>
<li><a href="http://palmback.cn/2007/11/fanfou-javascript-plugin-plus/" title="饭否JS 插件增强版">饭否JS 插件增强版</a> - Nov 7, 2007</li>
<li><a href="http://palmback.cn/2006/05/recently/" title="最近">最近</a> - May 12, 2006</li>
<li><a href="http://palmback.cn/2006/06/just/" title="只是。。。">只是。。。</a> - Jun 20, 2006</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://palmback.cn/2007/09/make-a-photoworks-skin/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>无尽的抗争</title>
		<link>http://palmback.cn/2007/08/fuck-gfw/</link>
		<comments>http://palmback.cn/2007/08/fuck-gfw/#comments</comments>
		<pubDate>Thu, 30 Aug 2007 14:10:49 +0000</pubDate>
		<dc:creator>handback</dc:creator>
				<category><![CDATA[How-to]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Flickr]]></category>
		<category><![CDATA[G^&F&^W*]]></category>
		<category><![CDATA[Internet]]></category>

		<guid isPermaLink="false">http://palmback.cn/archives/270.htm</guid>
		<description><![CDATA[很大程度上人都有好奇心和逆反心理，总会千方百计地探究那些被阻隔的东西，总觉得外面的世界很精彩。其实外面的世界不精彩，只不过真实一些。杀鸡儆猴结果是猴学也会了杀鸡，同样的道理，高墙的阻隔迫使大家都学会了翻墙，越是黑暗中的人越渴望光明，技术之争永无止境。 GFW过滤掉的，不仅仅是那些“违法违规”、不利于青少年健康的信息，就连WordPress.com、Blogspot、Flickr等优秀的网络服务也被和谐掉了。身为中国的网民，我感觉到有点悲哀，不仅要受ISP的剥削，也无法享受畅通无助的互联网。 Flickr被和谐掉又是中国网民的一大损失，IT评论人Keso都生气了。当然，广大网友也不是这样任GFW宰割的，你有政策，我们为何就不能有对策？以下是解决无法访问Flickr相册的方法，感谢各位网友：
Update:07.11.2 相关插件和JS有更新，敬请查看花儿开了。
1. 自己如何查看 Flickr 的图片

Firefox 用户：安装 Firefox 插件Access Flickr，基本解决 Firefox 下浏览Flickr 的问题。
Maxthon2 用户：安装pekkle 写的Flickr突破GFW过滤包，然后在 Maxthon 右下角广告过滤那里点鼠标左键，启用文本过滤即可。
Opera 用户：安装Jimmy写的Opera 脚本即可。
Internet Explore 7.0 用户：首先安装IE7Pro 这个浏览器插件，然后点击安装花儿的脚本。（IE7Pro安装用户自定义脚本方法：启用用户脚本，然后在IE7地址栏输入ie7pro://脚本地址，如ie7pro://palmback.cn/js.js）

2. 让别人查看 Flickr 的图片 Flickr 最重要的一个功能就是站外图片引用。使用 Flickr 的用户或多或少都会将自己 Flickr 上的图片引用到 Blog 等地方。虽然有上面的用户脚本可以轻松看图，但是还是不够方便，影响用户体验。最简单的解决方案就是，当我们引用 Flickr 的图片时，对图片原始地址改动一下即可（即 src="http://......" mce_src="http://......"这个部分）

方法1：把网址改成新网址 直接把一张图片原始网址中的farm1.或者farm2.去掉即可，示例： http://farm1.static.flickr.com/203/474629846_b8fae4a313_o.gif(不能直接访问)
=&#62; http://static.flickr.com/203/474629846_b8fae4a313_o.gif（可以访问）
方法2：把网址换成IP
farm1.static.flickr.com =&#62; 68.142.232.116
farm2.static.flickr.com =&#62; 69.147.123.56

上述两种方法采用任意一种后，图片就可以正常显示了。当然，如果你的图片是通过一些 Flickr Flash 展示程序来嵌入到网页中的，一般不受影响。
3. WordPress 用户的终极方案 对于经常在 Blog 中引用 Flickr [...]]]></description>
			<content:encoded><![CDATA[<p>很大程度上人都有好奇心和逆反心理，总会千方百计地探究那些被阻隔的东西，总觉得外面的世界很精彩。其实外面的世界不精彩，只不过真实一些。杀鸡儆猴结果是猴学也会了杀鸡，同样的道理，高墙的阻隔迫使大家都学会了翻墙，越是黑暗中的人越渴望光明，技术之争永无止境。 GFW过滤掉的，不仅仅是那些“违法违规”、不利于青少年健康的信息，就连WordPress.com、Blogspot、Flickr等优秀的网络服务也被和谐掉了。身为中国的网民，我感觉到有点悲哀，不仅要受ISP的剥削，也无法享受畅通无助的互联网。 Flickr被和谐掉又是中国网民的一大损失，IT评论人Keso都<a href="http://blog.donews.com/keso/archive/2007/06/08/1173239.aspx" target="_blank">生气了</a>。当然，广大网友也不是这样任GFW宰割的，你有政策，我们为何就不能有对策？以下是解决无法访问Flickr相册的方法，感谢各位网友：</p>
<p><strong>Update:07.11.2 相关插件和JS有更新，敬请查看</strong><a href="http://blog.istef.info/2007/06/08/save-flickr/" target="_blank"><strong>花儿开了</strong></a><strong>。</strong></p>
<p><strong>1. 自己如何查看 Flickr 的图片</strong></p>
<ul>
<li>Firefox 用户：<a onclick="javascript:urchinTracker ('/outbound/addons.mozilla.org');" href="https://addons.mozilla.org/en-US/firefox/addon/4286" target="_BLANK">安装 Firefox 插件Access Flickr</a>，基本解决 Firefox 下浏览Flickr 的问题。</li>
<li>Maxthon2 用户：<a onclick="javascript:urchinTracker ('/outbound/addons.maxthon.cn');" href="http://addons.maxthon.cn/post/2007/06/11/flickr突破gfw" target="_BLANK">安装pekkle 写的Flickr突破GFW过滤包</a>，然后在 Maxthon 右下角广告过滤那里点鼠标左键，启用文本过滤即可。</li>
<li>Opera 用户：安装<a onclick="javascript:urchinTracker ('/outbound/www.mhour.com');" href="http://www.mhour.com/js/FlickrPassThrough_Opera.js" target="_BLANK">Jimmy写的Opera 脚本</a>即可。</li>
<li>Internet Explore 7.0 用户：首先安装<a onclick="javascript:urchinTracker ('/outbound/www.ie7pro.com');" href="http://www.ie7pro.com/" target="_BLANK">IE7Pro</a> 这个浏览器插件，然后<a href="ie7pro://blog.istef.info/files/flickrpassesgfw.ieuser.js" target="_blank">点击安装花儿的脚本</a>。（IE7Pro安装用户自定义脚本方法：启用用户脚本，然后在IE7地址栏输入ie7pro://脚本地址，如ie7pro://palmback.cn/js.js）</li>
</ul>
<p><strong>2. 让别人查看 Flickr 的图片</strong> Flickr 最重要的一个功能就是站外图片引用。使用 Flickr 的用户或多或少都会将自己 Flickr 上的图片引用到 Blog 等地方。虽然有上面的用户脚本可以轻松看图，但是还是不够方便，影响用户体验。最简单的解决方案就是，当我们引用 Flickr 的图片时，对图片原始地址改动一下即可（即 src="http://......" mce_src="http://......"这个部分）</p>
<ul>
<li><strong>方法1：把网址改成新网址</strong> 直接把一张图片原始网址中的farm1.或者farm2.去掉即可，示例： <a href="http://farm1.static.flickr.com/203/474629846_b8fae4a313_o.gif">http://farm1.static.flickr.com/203/474629846_b8fae4a313_o.gif</a>(不能直接访问)<br />
<strong>=&gt;</strong> http://static.flickr.com/203/474629846_b8fae4a313_o.gif（可以访问）</li>
<li><strong>方法2：把网址换成IP</strong><br />
farm1.static.flickr.com <strong>=&gt;</strong> 68.142.232.116<br />
farm2.static.flickr.com <strong>=&gt;</strong> 69.147.123.56</li>
</ul>
<p>上述两种方法采用任意一种后，图片就可以正常显示了。当然，如果你的图片是通过一些 Flickr Flash 展示程序来嵌入到网页中的，一般不受影响。</p>
<p><strong>3. WordPress 用户的终极方案</strong> 对于经常在 Blog 中引用 Flickr 图片的 WordPress 用户来说，这次封禁绝对是场灾难。为了挽回损失，<a onclick="javascript:urchinTracker ('/outbound/blog.istef.info');" href="http://blog.istef.info/" target="_PARENT">花儿</a>已经写了一个简单的 WordPress 插件用来解决这个问题。使用方法非常简单：<a onclick="javascript:urchinTracker ('/outbound/blog.istef.info');" href="http://blog.istef.info/wp-content/plugins/DownloadCounter/download.php?id=7" target="_BLANK">点此下载插件</a>后解压缩，上传到 Plugins 目录下，后台激活，这样图片就回来了。注意，此插件对FlickrRss不起作用。</p>
<p>以上仅仅是应对Flickr被和谐的方法，当我们还需要访问其他被和谐的网站时，可以考虑用代理服务器，不过很难找到长期稳定的代理服务器，换来换去也比较麻烦。这里推荐Tor+Firefox，只需安装Tor和Firefox，再为Firefox安装<a href="https://addons.mozilla.org/en-US/firefox/addon/2275" target="_blank">Torbutton扩展</a>，即可方便的掌控是否启用Tor了。更详细的Tor使用教程在<a href="http://tcno.net/doc/tor/#para4" target="_blank">这里</a>，Tor下载<a href="http://tor.eff.org/dist/vidalia-bundles/vidalia-bundle-0.2.0.6-alpha-0.0.14.exe" target="_blank">Tor for Windows v0.2.0.6 Alpha</a>、<a href="http://tor.eff.org/dist/vidalia-bundles/vidalia-bundle-0.1.2.16-0.0.13.exe" target="_blank">Tor for Windows v0.1.2.16 Final for Windows</a>。</p>
<p>GFW不倒，抗争不止!希望广大网友齐心协力、各尽其能将抗争进行到底。本文主要参考<a href="http://blog.istef.info/2007/06/08/save-flickr/" target="_blank">花儿开了</a>。<br />
<h3>Related Posts</h3>
<ul class="related_post">
<li><a href="http://palmback.cn/2006/08/accept-gfw/" title="转载：承认GFW客观现实，停止抵制，另寻他­路">转载：承认GFW客观现实，停止抵制，另寻他­路</a> - Aug 23, 2006</li>
<li><a href="http://palmback.cn/2008/09/blog-comes-back/" title="重见天日">重见天日</a> - Sep 12, 2008</li>
<li><a href="http://palmback.cn/2008/05/violate-rules-content/" title="违规内容通告">违规内容通告</a> - May 6, 2008</li>
<li><a href="http://palmback.cn/2008/04/bloodstained-glory/" title="Bloodstained Glory">Bloodstained Glory</a> - Apr 4, 2008</li>
<li><a href="http://palmback.cn/2007/12/troubled-times/" title="多事之冬">多事之冬</a> - Dec 7, 2007</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://palmback.cn/2007/08/fuck-gfw/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>合理设置域名TTL值给网站加速</title>
		<link>http://palmback.cn/2007/08/ttl-setting/</link>
		<comments>http://palmback.cn/2007/08/ttl-setting/#comments</comments>
		<pubDate>Tue, 28 Aug 2007 12:13:59 +0000</pubDate>
		<dc:creator>handback</dc:creator>
				<category><![CDATA[How-to]]></category>
		<category><![CDATA[appliaction]]></category>

		<guid isPermaLink="false">http://17bar.name/archives/268.html</guid>
		<description><![CDATA[文章来源：ifetyper.com
Most Commented Posts

长期免费放送Wallop、Gmail、orkut 邀请 - Feb 28, 2007
我就是一个疯子 - Mar 16, 2006
大家对我下乡的画有什么看法呢？ - May 5, 2006
现在在北京 - Jul 17, 2006
还有8天 - Jul 2, 2006
谁是杭州的？ - May 19, 2006
我回家了 - Mar 29, 2006
饭否JS 插件增强版 - Nov 7, 2007
最近 - May 12, 2006
只是。。。 - Jun 20, 2006

]]></description>
			<content:encoded><![CDATA[<p>文章来源：<a href="http://www.lifetyper.com/archives/000076.html" target="_blank">ifetyper.com</a><br />
<h3>Most Commented Posts</h3>
<ul class="related_post">
<li><a href="http://palmback.cn/2007/02/wallop-gmail-orkut-invitation/" title="长期免费放送Wallop、Gmail、orkut 邀请">长期免费放送Wallop、Gmail、orkut 邀请</a> - Feb 28, 2007</li>
<li><a href="http://palmback.cn/2006/03/i-am-a-madman/" title="我就是一个疯子">我就是一个疯子</a> - Mar 16, 2006</li>
<li><a href="http://palmback.cn/2006/05/your-opinions/" title="大家对我下乡的画有什么看法呢？">大家对我下乡的画有什么看法呢？</a> - May 5, 2006</li>
<li><a href="http://palmback.cn/2006/07/i-am-in-beijing/" title="现在在北京">现在在北京</a> - Jul 17, 2006</li>
<li><a href="http://palmback.cn/2006/07/8-days/" title="还有8天">还有8天</a> - Jul 2, 2006</li>
<li><a href="http://palmback.cn/2006/05/%e8%b0%81%e6%98%af%e6%9d%ad%e5%b7%9e%e7%9a%84%ef%bc%9f/" title="谁是杭州的？">谁是杭州的？</a> - May 19, 2006</li>
<li><a href="http://palmback.cn/2006/03/i-am-going-home/" title="我回家了">我回家了</a> - Mar 29, 2006</li>
<li><a href="http://palmback.cn/2007/11/fanfou-javascript-plugin-plus/" title="饭否JS 插件增强版">饭否JS 插件增强版</a> - Nov 7, 2007</li>
<li><a href="http://palmback.cn/2006/05/recently/" title="最近">最近</a> - May 12, 2006</li>
<li><a href="http://palmback.cn/2006/06/just/" title="只是。。。">只是。。。</a> - Jun 20, 2006</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://palmback.cn/2007/08/ttl-setting/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>FSO安装、开启和关闭</title>
		<link>http://palmback.cn/2007/08/fso-installation-guide/</link>
		<comments>http://palmback.cn/2007/08/fso-installation-guide/#comments</comments>
		<pubDate>Sun, 26 Aug 2007 06:49:43 +0000</pubDate>
		<dc:creator>handback</dc:creator>
				<category><![CDATA[How-to]]></category>
		<category><![CDATA[ASP]]></category>
		<category><![CDATA[FSO]]></category>

		<guid isPermaLink="false">http://palmback.cn/?p=265</guid>
		<description><![CDATA[FSO(FileSystemObject)是微软ASP的一个对文件操作的控件，该控件可以对服务器进行读取、新建、修改、删除目录以及文件的操作。是ASP编程中非常有用的一个控件。但是因为权限控制的问题，很多虚拟主机服务器的FSO反而成为这台服务器的一个公开的后门，因为客户可以在自己的ASP网页里面直接就对该控件编程，从而控制该服务器甚至删除服务器上的文件。因此不少业界的虚拟主机提供商都干脆关掉了这个控件，让客户少了很多灵活性。我们公司的W2K虚拟主机服务器具有高安全性，可以让客户在自己的网站空间中任意使用却有没有办法危害系统或者妨碍其他客户网站的正常运行。
FSO的添加，删除，注册，卸载
1、首先在系统盘中查找scrrun.dll，如果存在这个文件，请跳到第三步，如果没有，请执行第二步。
2、在安装文件目录i386中找到scrrun.dl_，用winrar解压缩，得scrrun.dll，然后复制到
你的系统盘:\windows\system32\目录中。
3、运行regsvr32 scrrun.dll即可。
删除fso、regsvr32/u scrrun.dll
开启/关闭系统FSO支持方法
windows98系统
在DOS命令行状态输入以下命令：
关闭命令：RegSvr32 /u C:\WINDOWS\SYSTEM\scrrun.dll
打开命令：RegSvr32 C:\WINDOWS\SYSTEM\scrrun.dll
win2000/XP
在CMD命令行状态输入以下命令：
关闭命令：RegSvr32 /u C:\WINNT(windows)\SYSTEM32\scrrun.dll
打开命令：RegSvr32 C:\WINNT(windows)\SYSTEM32\scrrun.dll
如何卸载和安装Wscript.Shell,FSO和stream对象
1、卸载wscript.shell对象
在cmd下运行：regsvr32 WSHom.Ocx   /u
2、卸载FSO对象
在cmd下运行：regsvr32.exe scrrun.dll /u
3、卸载stream对象
在cmd下运行：
regsvr32 /s /u "C:\Program Files\Common Files\System\ado\msado15.dll"
恢复的话，去掉/u就行了
Most Commented Posts

长期免费放送Wallop、Gmail、orkut 邀请 - Feb 28, 2007
我就是一个疯子 - Mar 16, 2006
大家对我下乡的画有什么看法呢？ - May 5, 2006
现在在北京 - Jul 17, 2006
还有8天 - Jul 2, 2006
谁是杭州的？ - May 19, 2006
我回家了 - Mar 29, 2006
饭否JS 插件增强版 - Nov 7, 2007
最近 - [...]]]></description>
			<content:encoded><![CDATA[<p>FSO(FileSystemObject)是微软ASP的一个对文件操作的控件，该控件可以对服务器进行读取、新建、修改、删除目录以及文件的操作。是ASP编程中非常有用的一个控件。但是因为权限控制的问题，很多虚拟主机服务器的FSO反而成为这台服务器的一个公开的后门，因为客户可以在自己的ASP网页里面直接就对该控件编程，从而控制该服务器甚至删除服务器上的文件。因此不少业界的虚拟主机提供商都干脆关掉了这个控件，让客户少了很多灵活性。我们公司的W2K虚拟主机服务器具有高安全性，可以让客户在自己的网站空间中任意使用却有没有办法危害系统或者妨碍其他客户网站的正常运行。<br />
FSO的添加，删除，注册，卸载<br />
1、首先在系统盘中查找scrrun.dll，如果存在这个文件，请跳到第三步，如果没有，请执行第二步。</p>
<p>2、在安装文件目录i386中找到scrrun.dl_，用winrar解压缩，得scrrun.dll，然后复制到</p>
<p>你的系统盘:\windows\system32\目录中。</p>
<p>3、运行regsvr32 scrrun.dll即可。</p>
<p>删除fso、regsvr32/u scrrun.dll<br />
开启/关闭系统FSO支持方法</p>
<p>windows98系统</p>
<p>在DOS命令行状态输入以下命令：</p>
<p>关闭命令：RegSvr32 /u C:\WINDOWS\SYSTEM\scrrun.dll</p>
<p>打开命令：RegSvr32 C:\WINDOWS\SYSTEM\scrrun.dll</p>
<p>win2000/XP</p>
<p>在CMD命令行状态输入以下命令：</p>
<p>关闭命令：RegSvr32 /u C:\WINNT(windows)\SYSTEM32\scrrun.dll</p>
<p>打开命令：RegSvr32 C:\WINNT(windows)\SYSTEM32\scrrun.dll</p>
<p><strong>如何卸载和安装Wscript.Shell,FSO和stream对象</strong></p>
<p>1、卸载wscript.shell对象<br />
在cmd下运行：regsvr32 WSHom.Ocx   /u<br />
2、卸载FSO对象<br />
在cmd下运行：regsvr32.exe scrrun.dll /u<br />
3、卸载stream对象<br />
在cmd下运行：<br />
regsvr32 /s /u "C:\Program Files\Common Files\System\ado\msado15.dll"</p>
<p>恢复的话，去掉/u就行了<br />
<h3>Most Commented Posts</h3>
<ul class="related_post">
<li><a href="http://palmback.cn/2007/02/wallop-gmail-orkut-invitation/" title="长期免费放送Wallop、Gmail、orkut 邀请">长期免费放送Wallop、Gmail、orkut 邀请</a> - Feb 28, 2007</li>
<li><a href="http://palmback.cn/2006/03/i-am-a-madman/" title="我就是一个疯子">我就是一个疯子</a> - Mar 16, 2006</li>
<li><a href="http://palmback.cn/2006/05/your-opinions/" title="大家对我下乡的画有什么看法呢？">大家对我下乡的画有什么看法呢？</a> - May 5, 2006</li>
<li><a href="http://palmback.cn/2006/07/i-am-in-beijing/" title="现在在北京">现在在北京</a> - Jul 17, 2006</li>
<li><a href="http://palmback.cn/2006/07/8-days/" title="还有8天">还有8天</a> - Jul 2, 2006</li>
<li><a href="http://palmback.cn/2006/05/%e8%b0%81%e6%98%af%e6%9d%ad%e5%b7%9e%e7%9a%84%ef%bc%9f/" title="谁是杭州的？">谁是杭州的？</a> - May 19, 2006</li>
<li><a href="http://palmback.cn/2006/03/i-am-going-home/" title="我回家了">我回家了</a> - Mar 29, 2006</li>
<li><a href="http://palmback.cn/2007/11/fanfou-javascript-plugin-plus/" title="饭否JS 插件增强版">饭否JS 插件增强版</a> - Nov 7, 2007</li>
<li><a href="http://palmback.cn/2006/05/recently/" title="最近">最近</a> - May 12, 2006</li>
<li><a href="http://palmback.cn/2006/06/just/" title="只是。。。">只是。。。</a> - Jun 20, 2006</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://palmback.cn/2007/08/fso-installation-guide/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
