<?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>陈书艺—Creative,Calmness,Passion,Unremitting,Belief &#187; 原则</title>
	<atom:link href="http://www.cnedwin.com/tag/%e5%8e%9f%e5%88%99/feed" rel="self" type="application/rss+xml" />
	<link>http://www.cnedwin.com</link>
	<description>Edwin Chen's Blog</description>
	<lastBuildDate>Mon, 29 Jun 2009 11:05:02 +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>五种高效网页设计的原则</title>
		<link>http://www.cnedwin.com/35.html</link>
		<comments>http://www.cnedwin.com/35.html#comments</comments>
		<pubDate>Wed, 25 Jun 2008 01:05:31 +0000</pubDate>
		<dc:creator>Edwin</dc:creator>
				<category><![CDATA[杂七杂八]]></category>
		<category><![CDATA[原则]]></category>
		<category><![CDATA[网页设计]]></category>

		<guid isPermaLink="false">http://www.cnedwin.com/?p=35</guid>
		<description><![CDATA[网页设计在 过去的几年中得到l了很大的提高。它现在使用户更加容易掌握，而且更具有吸引力。而其中有一个很好的原因就是，在过去的几年中，我们发现将设计更多的投入 在可用性和使用者的经验上会更加高效。现代的割边设计并不是满是招摇的快乐谈话和闪亮的广告。我们学会了以与访问者的对话开头，让他们参与到讨论中，通过 提出他们的需求和诚实直接地和他们谈话来取得他们的信任。
几个星期以前，我们发表了“有效网页设计的10条原则”——一篇关于有效网页设计的全面的文章，给你们提供了一些关于用户想法的见解和一些如何有效设计网页的例子。
这篇文章强调另外五条关于有效网页设计的原则、启发和方法，而这些方法如果恰当地运用就可以在得出更加复杂的设计作品同时简化取得这样的效果的过程。
请注意，你可能会对下面关于可用性的文章感兴趣：
10个可用性的噩梦：展示了你应该在设计功能型和可用型网站时避免的可用性噩梦，
30个可用性的议题：解释了重要的但通常被遗忘、忽略或误解的议题，条款，规则和原则。
1.使用一个有效的销售原则
为了出售一件产品或一项服务，你需要有效地与任何一个你网页的访问者展开对话。因为访问者现在来到了你的网页，他们希望能听你的谈话，并从中有所收获。因此你应该如何接近这个潜在的委托人以在月末最大程度地增加你的收入呢？
Strong在1925年提出的AIDA是高效的销售模式，这个模式描述了一个人在出售一件产品或一项服务时通常经历的一系列的事件。
A-注意（意识）：吸引顾客的注意
 I-兴趣：通过展示特征，优势和益处来激起顾客的兴趣
D-期望：使顾客相信他们想要甚至期望这个能满足他们需求的产品或服务
A-行动：引导顾客采取行动和/或购买
现在有人在其后增加了另一个字母构成了AIDA(S)的模式：S-满意-满足顾客，那样他们会成为常客，并且能为产品提供转介
在上下文中，顾客应该注意AIDA通常是让潜在的顾客购买他们实际上不需要的产品或服务的方法。为了取得用户的信任，设计者需要确定该网站提供真诚的信息，而且不存在使内容在不同方式下出现不同理解的隐藏信息。
更有效的方法就是为访问者提供关于产品或服务使用方法的实在的论据，环境和看法，而不是用招摇的空话来轰击他们。
 
 aida.png (52.23 KB)
2008-6-25 09:01

参看上面的例子。traffik 遵循了AIDA原则。如果访问者想要了解关于网站内容管理系统的信息，他们马上就能从网站顶端简明的介绍中获得。这样，潜在的顾客就能被吸引从而继续浏览网站(吸引，a)。他们的兴趣就会被展示的产品的特征和益处而激起（兴趣，i）。
为了从交流中获得满足顾客需求的信息，他们运用了网站底端右手方向的棕色信息块（期望，d）。最后，用户在“开始巡游”和“30天免费试用”这些按钮的引导下开始购买（行动，a）。
还有一些其他的有名的销售模式，例如，BOSCH公式（由Peter Hubert研发）：
B要有好奇心，询问开放式的问题
O提出解决方法，谈论顾客最终结果的获益
S刺激感官，让顾客检测你的产品
C采取交叉销售，考虑所有必要的附属设备
 H切入要点，当顾客有需要的时候才出售
2.用尽量少的几种颜色
深色的字体点击右键触发白色背景而浅色触发黑色背景是消极的。鲜明的颜色能够帮助你强调想要让顾客注意到的特定元素。
然而，你没有必要运用颜色鲜明的调色板来创造高效的网站设计。有时候，采用适当数量的颜色并有效地运用它们将会很有帮助。这样来访者就会很快看到更为重要的部分。这样也更容易将它们的注意力集中到网站中最重要的区域。
 
 sidebar.png (41.81 KB)
2008-6-25 09:01

Sidebarecreative.com只运用了一种主要鲜明色&#8211;蓝色表示链接，按钮和可点击的元件。白色表示能概括当前网页内容的重要信息。剩下的内容有淡青色的悬浮效果。运用卓越，适中和富有表现力的颜色，那样就很高效。
 
 wilson.png (71.88 KB)
2008-6-25 09:01

Wilson Miner 运用了绿色，蓝色和粉色。主导的绿色看起来淡雅而宜人。蓝色表示链接，而粉色表示悬浮效果。要注意网站的布局。虽然只运用了很少几种颜色，你能很快看到可以点击的区域和识别出该网站与众不同的区域。
3.力求平衡
在网页设计中，平衡很重要，因为给用户一种封闭意识，让人觉得恒久和安定。平衡的设计更容易领会和理解，因为他们营造出一种视觉的层级命令面板，清楚地展示出往网站中最重要和次要的部分。
 
 apple1.jpg (49.31 KB)
2008-6-25 09:01

来源：运用于网页设计中的元素
苹果的设计大 概是对称的（或者正规的）平衡最好的一个例子。同一个设计元素有很独具特色的（上面）或很相似的（下面）分量。他们都被放置在用户屏幕中间一条虚构垂直线 的两端。这样的设计相当的恒久和宁静，让来访者更容易的理解展示在其中的信息。结果就是：平衡营造了一种朴素的视觉和谐。
为什么苹果的设计如此的高效呢？因为它是以用户和产品为中心的。苹果网站的设计就象是一个剧院的舞台，在其中来访者是观众，而产品是舞台上的表演者。你可以发现该网站除产品本身外没有任何其他的内容。苹果成功地以提供最重要的选项发起了对话。
 
 signalfeuer.png (62.19 KB)
2008-6-25 09:01

Signalfeuer.info运用了一种不对称的（非正式的）平衡来留出了更多的空白区域的动态使用（这大概也是不对称平衡的主要优势）。左面的版块比右边的小，然而该网站通过运用令人印象深刻的均衡网格给人一种强烈的平衡感。同时颜色的选择也很独具一格。
据设计的原则该 文章所言，“不对称的平衡可能会在位置和集中程度上不平衡。为了营造不对称的平衡，必须要增加集中程度来弥补位置上的改变。集中程度可以通过改变大小，形 状和风格来增加。对一个特定的设计，设计者可能会选择将内容放在显像面的同一边。这样，相对的空白区域就会充当一种均衡的力量。”
 
 avalonstar.jpg (47.66 KB)
2008-6-25 09:01

Avalonstar.com就采用了这种方式。注意不同模块的迥异的形状和悬标题。白色的区域充当呈现在右边的内容的平衡力。
基于网格的做法对达到均衡的设计布局很有帮助或者甚至很有必要。
4.力求清楚明确
独立于设计方法，布局和展示内容的清楚明确在网页设计过程中应该给与高度的重视。如果标题中有错误或者存在歧义，一定要确保去除或者明确地详述其真正的含义。较为明确总是比含糊不清好的多。
为了达到清楚明确，你也没有必要使用“标准”设计布局或者基本模板。如果你想的话也可以冒险采用实验性设计，但要时刻记住网站内容清楚明确的视觉层级命令面板和网站结构。你的类别的组织越是有序，你的访问者就越容易在你的网站中找到自己的道路。
 
 hovie.jpg (50.34 KB)
2008-6-25 09:01

Hovie.com展示了一种新奇但很清楚明确的设计思路。该网站包含额五个模块；第一块表示当登陆网站是展示的主要菜单。当选择了主要菜单中的一些部分时就会出现下级菜单。
当前位置是由箭头展示的导航菜单中的选项。在内容区域中的是对上面的图片的一个简要描述和标题。这个设计从头到尾都很一致和连贯。你有可能误解这个设计吗？不太可能把。它很简洁，清晰和有效。
 
 astheria.png (33.51 KB)
2008-6-25 09:01

另一个例子：Astheria.com 聚焦于白色区域，采取了一种平衡的给予网格的设计思路。虽然这个设计很难以捉摸而且只使用了一种吸引人的颜色，你依然可以很快弄清楚身处何处，也很明确可获得的选择。印刷术的力量在这里得到了极致发挥。遗憾地是，该网站没有显示哪些链接已经访问过了。
5.说清用户的需求
作为网页开发者，你有为来访者提供舒适服务的首要任务，说清楚他们的需求，为他们提供充足的线索以满足准确无误且直观的导航。然而，为了取得这些，你需要的不仅仅是了解你用户的基本的概况和忠于他/她乐于的决定。
为了最大化你的曝光量，你必须考虑来访者的不同的类型和资料。你需要识别主要群体并且提供各个群体会喜欢的机能。但这并不意味着你需要创造多重版本的网站；这在一定程度上指你可以将不同层面的用户交流融合与同一个设计布局中。
比如，根据Shneiderman的使用界面设计的原则，让常客使用捷径是很重要的&#8211;为了增加互动的步伐，可以使用缩略语，特殊键，隐藏的命令等等。
 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://feed.yeeyan.com/articles/tag/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1" target="_blank"><em>网页</em></a><em><a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a></em>在 过去的几年中得到l了很大的提高。它现在使用户更加容易掌握，而且更具有吸引力。而其中有一个很好的原因就是，在过去的几年中，我们发现将设计更多的投入 在可用性和使用者的经验上会更加高效。现代的割边设计并不是满是招摇的快乐谈话和闪亮的广告。我们学会了以与访问者的对话开头，让他们参与到讨论中，通过 提出他们的需求和诚实直接地和他们谈话来取得他们的信任。<br />
<span id="more-35"></span>几个星期以前，我们发表了“有效<a href="http://feed.yeeyan.com/articles/tag/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1" target="_blank"><em>网页</em></a><em><a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a></em>的10条原则”——一篇关于有效网页设计的全面的文章，给你们提供了一些关于用户想法的见解和一些如何有效设计网页的例子。<br />
这篇文章强调另外五条关于有效<a href="http://feed.yeeyan.com/articles/tag/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1" target="_blank"><em>网页</em></a><em><a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a></em>的原则、启发和方法，而这些方法如果恰当地运用就可以在得出更加复杂的设计作品同时简化取得这样的效果的过程。<br />
请注意，你可能会对下面关于可用性的文章感兴趣：<br />
10个可用性的噩梦：展示了你应该在<a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>功能型和可用型网站时避免的可用性噩梦，<br />
30个可用性的议题：解释了重要的但通常被遗忘、忽略或误解的议题，条款，规则和原则。<br />
<strong>1.使用一个有效的销售原则</strong><br />
为了出售一件产品或一项服务，你需要有效地与任何一个你网页的访问者展开对话。因为访问者现在来到了你的网页，他们希望能听你的谈话，并从中有所收获。因此你应该如何接近这个潜在的委托人以在月末最大程度地增加你的收入呢？<br />
Strong在1925年提出的AIDA是高效的销售模式，这个模式描述了一个人在出售一件产品或一项服务时通常经历的一系列的事件。<br />
<strong>A</strong>-注意（意识）：吸引顾客的注意<br />
<strong> I</strong>-兴趣：通过展示特征，优势和益处来激起顾客的兴趣<br />
<strong>D</strong>-期望：使顾客相信他们想要甚至期望这个能满足他们需求的产品或服务<br />
<strong>A</strong>-行动：引导顾客采取行动和/或购买<br />
现在有人在其后增加了另一个字母构成了AIDA(S)的模式：<strong>S</strong>-满意-满足顾客，那样他们会成为常客，并且能为产品提供转介<br />
在上下文中，顾客应该注意AIDA通常是让潜在的顾客购买他们实际上不需要的产品或服务的方法。为了取得用户的信任，<a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>者需要确定该网站提供真诚的信息，而且不存在使内容在不同方式下出现不同理解的隐藏信息。<br />
更有效的方法就是为访问者提供关于产品或服务使用方法的实在的论据，环境和看法，而不是用招摇的空话来轰击他们。<br />
<span id="attach_665" style="position: absolute; display: none;" onmouseover="showMenu(this.id, 0, 1)"><img src="http://www.ismole.net/images/default/attachimg.gif" border="0" alt="" /></span> <img onclick="zoom(this, 'attachments/month_0806/20080625_6304ec65fa844e9748d16fLnCDvYTFLU.png')" onmouseover="attachimginfo(this, 'attach_665', 1);attachimg(this, 'mouseover')" onmouseout="attachimginfo(this, 'attach_665', 0, event)" src="http://www.ismole.net/attachments/month_0806/20080625_6304ec65fa844e9748d16fLnCDvYTFLU.png" border="0" alt="" /></p>
<div id="attach_665_menu" class="t_attach" style="position: absolute; display: none;"><img class="absmiddle" src="http://www.ismole.net/images/attachicons/image.gif" border="0" alt="" /> <a href="http://www.ismole.net/attachment.php?aid=665&amp;k=493f9163a762670c1787ea39a86307c9&amp;t=1214355870&amp;nothumb=yes" target="_blank"><strong>aida.png</strong></a> (52.23 KB)</p>
<div class="t_smallfont">2008-6-25 09:01</div>
</div>
<p>参看上面的例子。<a href="http://www.playintraffik.com/Home" target="_blank">traffik</a> 遵循了AIDA原则。如果访问者想要了解关于网站内容管理系统的信息，他们马上就能从网站顶端简明的介绍中获得。这样，潜在的顾客就能被吸引从而继续浏览网站(吸引，a)。他们的兴趣就会被展示的产品的特征和益处而激起（兴趣，i）。<br />
为了从交流中获得满足顾客需求的信息，他们运用了网站底端右手方向的棕色信息块（期望，d）。最后，用户在“开始巡游”和“30天免费试用”这些按钮的引导下开始购买（行动，a）。<br />
还有一些其他的有名的销售模式，例如，BOSCH公式（由Peter Hubert研发）：<br />
<strong>B</strong>要有好奇心，询问开放式的问题<br />
<strong>O</strong>提出解决方法，谈论顾客最终结果的获益<br />
<strong>S</strong>刺激感官，让顾客检测你的产品<br />
<strong>C</strong>采取交叉销售，考虑所有必要的附属设备<br />
<strong> H</strong>切入要点，当顾客有需要的时候才出售<br />
<strong>2.用尽量少的几种颜色</strong><br />
深色的字体点击右键触发白色背景而浅色触发黑色背景是消极的。鲜明的颜色能够帮助你强调想要让顾客注意到的特定元素。<br />
然而，你没有必要运用颜色鲜明的调色板来创造高效的网站<a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>。有时候，采用适当数量的颜色并有效地运用它们将会很有帮助。这样来访者就会很快看到更为重要的部分。这样也更容易将它们的注意力集中到网站中最重要的区域。<br />
<span id="attach_666" style="position: absolute; display: none;" onmouseover="showMenu(this.id, 0, 1)"><img src="http://www.ismole.net/images/default/attachimg.gif" border="0" alt="" /></span> <img onclick="zoom(this, 'attachments/month_0806/20080625_e4e052031657f5950c21gpyLuSkSZxwC.png')" onmouseover="attachimginfo(this, 'attach_666', 1);attachimg(this, 'mouseover')" onmouseout="attachimginfo(this, 'attach_666', 0, event)" src="http://www.ismole.net/attachments/month_0806/20080625_e4e052031657f5950c21gpyLuSkSZxwC.png" border="0" alt="" /></p>
<div id="attach_666_menu" class="t_attach" style="position: absolute; display: none;"><img class="absmiddle" src="http://www.ismole.net/images/attachicons/image.gif" border="0" alt="" /> <a href="http://www.ismole.net/attachment.php?aid=666&amp;k=84b47a1232ff331804cb648ccb750721&amp;t=1214355870&amp;nothumb=yes" target="_blank"><strong>sidebar.png</strong></a> (41.81 KB)</p>
<div class="t_smallfont">2008-6-25 09:01</div>
</div>
<p><a href="http://sidebarcreative.com/" target="_blank">Sidebarecreative.com</a>只运用了一种主要鲜明色&#8211;蓝色表示链接，按钮和可点击的元件。白色表示能概括当前网页内容的重要信息。剩下的内容有淡青色的悬浮效果。运用卓越，适中和富有表现力的颜色，那样就很高效。<br />
<span id="attach_667" style="position: absolute; display: none;" onmouseover="showMenu(this.id, 0, 1)"><img src="http://www.ismole.net/images/default/attachimg.gif" border="0" alt="" /></span> <img onclick="zoom(this, 'attachments/month_0806/20080625_86ba0e6c962fc2b0aa3bhLG4YuXLLFs0.png')" onmouseover="attachimginfo(this, 'attach_667', 1);attachimg(this, 'mouseover')" onmouseout="attachimginfo(this, 'attach_667', 0, event)" src="http://www.ismole.net/attachments/month_0806/20080625_86ba0e6c962fc2b0aa3bhLG4YuXLLFs0.png" border="0" alt="" /></p>
<div id="attach_667_menu" class="t_attach" style="position: absolute; display: none;"><img class="absmiddle" src="http://www.ismole.net/images/attachicons/image.gif" border="0" alt="" /> <a href="http://www.ismole.net/attachment.php?aid=667&amp;k=6fea7c15d0e9d91d5ffba67e8235ff50&amp;t=1214355870&amp;nothumb=yes" target="_blank"><strong>wilson.png</strong></a> (71.88 KB)</p>
<div class="t_smallfont">2008-6-25 09:01</div>
</div>
<p><a href="http://www.wilsonminer.com/" target="_blank">Wilson Miner</a> 运用了绿色，蓝色和粉色。主导的绿色看起来淡雅而宜人。蓝色表示链接，而粉色表示悬浮效果。要注意网站的布局。虽然只运用了很少几种颜色，你能很快看到可以点击的区域和识别出该网站与众不同的区域。<br />
<strong>3.力求平衡</strong><br />
在<a href="http://feed.yeeyan.com/articles/tag/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1" target="_blank"><em>网页</em></a><em><a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a></em>中，平衡很重要，因为给用户一种封闭意识，让人觉得恒久和安定。平衡的设计更容易领会和理解，因为他们营造出一种视觉的层级命令面板，清楚地展示出往网站中最重要和次要的部分。<br />
<span id="attach_668" style="position: absolute; display: none;" onmouseover="showMenu(this.id, 0, 1)"><img src="http://www.ismole.net/images/default/attachimg.gif" border="0" alt="" /></span> <img onclick="zoom(this, 'attachments/month_0806/20080625_bb3d9e39fd4353b804d3C95hHDzzhCxi.jpg')" onmouseover="attachimginfo(this, 'attach_668', 1);attachimg(this, 'mouseover')" onmouseout="attachimginfo(this, 'attach_668', 0, event)" src="http://www.ismole.net/attachments/month_0806/20080625_bb3d9e39fd4353b804d3C95hHDzzhCxi.jpg" border="0" alt="" /></p>
<div id="attach_668_menu" class="t_attach" style="position: absolute; display: none;"><img class="absmiddle" src="http://www.ismole.net/images/attachicons/image.gif" border="0" alt="" /> <a href="http://www.ismole.net/attachment.php?aid=668&amp;k=99294b6308cdcef180d15a2ac672a87e&amp;t=1214355870&amp;nothumb=yes" target="_blank"><strong>apple1.jpg</strong></a> (49.31 KB)</p>
<div class="t_smallfont">2008-6-25 09:01</div>
</div>
<p>来源：<span style="text-decoration: underline;">运用于<a href="http://feed.yeeyan.com/articles/tag/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1" target="_blank"><em>网页</em></a><em><a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a></em>中的元素</span><br />
苹果的<a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>大 概是对称的（或者正规的）平衡最好的一个例子。同一个设计元素有很独具特色的（上面）或很相似的（下面）分量。他们都被放置在用户屏幕中间一条虚构垂直线 的两端。这样的设计相当的恒久和宁静，让来访者更容易的理解展示在其中的信息。结果就是：平衡营造了一种朴素的视觉和谐。<br />
为什么苹果的<a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>如此的高效呢？因为它是以用户和产品为中心的。苹果网站的设计就象是一个剧院的舞台，在其中来访者是观众，而产品是舞台上的表演者。你可以发现该网站除产品本身外没有任何其他的内容。苹果成功地以提供最重要的选项发起了对话。<br />
<span id="attach_669" style="position: absolute; display: none;" onmouseover="showMenu(this.id, 0, 1)"><img src="http://www.ismole.net/images/default/attachimg.gif" border="0" alt="" /></span> <img onclick="zoom(this, 'attachments/month_0806/20080625_f91dba56983754e4aa81rzMICdMcs9AT.png')" onmouseover="attachimginfo(this, 'attach_669', 1);attachimg(this, 'mouseover')" onmouseout="attachimginfo(this, 'attach_669', 0, event)" src="http://www.ismole.net/attachments/month_0806/20080625_f91dba56983754e4aa81rzMICdMcs9AT.png" border="0" alt="" /></p>
<div id="attach_669_menu" class="t_attach" style="position: absolute; display: none;"><img class="absmiddle" src="http://www.ismole.net/images/attachicons/image.gif" border="0" alt="" /> <a href="http://www.ismole.net/attachment.php?aid=669&amp;k=c7b48f240f42f6662cbde3ee63f97ea2&amp;t=1214355870&amp;nothumb=yes" target="_blank"><strong>signalfeuer.png</strong></a> (62.19 KB)</p>
<div class="t_smallfont">2008-6-25 09:01</div>
</div>
<p><a href="http://www.signalfeuer.info/" target="_blank">Signalfeuer.info</a>运用了一种不对称的（非正式的）平衡来留出了更多的空白区域的动态使用（这大概也是不对称平衡的主要优势）。左面的版块比右边的小，然而该网站通过运用令人印象深刻的均衡网格给人一种强烈的平衡感。同时颜色的选择也很独具一格。<br />
据<span style="text-decoration: underline;"><a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>的原则</span>该 文章所言，“不对称的平衡可能会在位置和集中程度上不平衡。为了营造不对称的平衡，必须要增加集中程度来弥补位置上的改变。集中程度可以通过改变大小，形 状和风格来增加。对一个特定的设计，设计者可能会选择将内容放在显像面的同一边。这样，相对的空白区域就会充当一种均衡的力量。”<br />
<span id="attach_670" style="position: absolute; display: none;" onmouseover="showMenu(this.id, 0, 1)"><img src="http://www.ismole.net/images/default/attachimg.gif" border="0" alt="" /></span> <img onclick="zoom(this, 'attachments/month_0806/20080625_22194985158d7b4e538dMnCIs3yWazRS.jpg')" onmouseover="attachimginfo(this, 'attach_670', 1);attachimg(this, 'mouseover')" onmouseout="attachimginfo(this, 'attach_670', 0, event)" src="http://www.ismole.net/attachments/month_0806/20080625_22194985158d7b4e538dMnCIs3yWazRS.jpg" border="0" alt="" /></p>
<div id="attach_670_menu" class="t_attach" style="position: absolute; display: none;"><img class="absmiddle" src="http://www.ismole.net/images/attachicons/image.gif" border="0" alt="" /> <a href="http://www.ismole.net/attachment.php?aid=670&amp;k=ade86559580467871fa4348cf8a390ed&amp;t=1214355870&amp;nothumb=yes" target="_blank"><strong>avalonstar.jpg</strong></a> (47.66 KB)</p>
<div class="t_smallfont">2008-6-25 09:01</div>
</div>
<p><a href="http://www.avalonstar.com/" target="_blank">Avalonstar.com</a>就采用了这种方式。注意不同模块的迥异的形状和悬标题。白色的区域充当呈现在右边的内容的平衡力。<br />
基于网格的做法对达到均衡的<a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>布局很有帮助或者甚至很有必要。<br />
<strong>4.力求清楚明确</strong><br />
独立于<a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>方法，布局和展示内容的清楚明确在<a href="http://feed.yeeyan.com/articles/tag/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1" target="_blank"><em>网页</em></a><em><a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a></em>过程中应该给与高度的重视。如果标题中有错误或者存在歧义，一定要确保去除或者明确地详述其真正的含义。较为明确总是比含糊不清好的多。<br />
为了达到清楚明确，你也没有必要使用“标准”<a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>布局或者基本模板。如果你想的话也可以冒险采用实验性设计，但要时刻记住网站内容清楚明确的视觉层级命令面板和网站结构。你的类别的组织越是有序，你的访问者就越容易在你的网站中找到自己的道路。<br />
<span id="attach_671" style="position: absolute; display: none;" onmouseover="showMenu(this.id, 0, 1)"><img src="http://www.ismole.net/images/default/attachimg.gif" border="0" alt="" /></span> <img onclick="zoom(this, 'attachments/month_0806/20080625_a617eca87b3ea82181182NS4Yh2sBArU.jpg')" onmouseover="attachimginfo(this, 'attach_671', 1);attachimg(this, 'mouseover')" onmouseout="attachimginfo(this, 'attach_671', 0, event)" src="http://www.ismole.net/attachments/month_0806/20080625_a617eca87b3ea82181182NS4Yh2sBArU.jpg" border="0" alt="" /></p>
<div id="attach_671_menu" class="t_attach" style="position: absolute; display: none;"><img class="absmiddle" src="http://www.ismole.net/images/attachicons/image.gif" border="0" alt="" /> <a href="http://www.ismole.net/attachment.php?aid=671&amp;k=008d7e0e5fab99c660413be3becc87cd&amp;t=1214355870&amp;nothumb=yes" target="_blank"><strong>hovie.jpg</strong></a> (50.34 KB)</p>
<div class="t_smallfont">2008-6-25 09:01</div>
</div>
<p><a href="http://hovie.com/" target="_blank">Hovie.com</a>展示了一种新奇但很清楚明确的设计思路。该网站包含额五个模块；第一块表示当登陆网站是展示的主要菜单。当选择了主要菜单中的一些部分时就会出现下级菜单。<br />
当前位置是由箭头展示的导航菜单中的选项。在内容区域中的是对上面的图片的一个简要描述和标题。这个<a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>从头到尾都很一致和连贯。你有可能误解这个设计吗？不太可能把。它很简洁，清晰和有效。<br />
<span id="attach_672" style="position: absolute; display: none;" onmouseover="showMenu(this.id, 0, 1)"><img src="http://www.ismole.net/images/default/attachimg.gif" border="0" alt="" /></span> <img onclick="zoom(this, 'attachments/month_0806/20080625_46793df75a1f6b3d38aapdiTftg5vQxj.png')" onmouseover="attachimginfo(this, 'attach_672', 1);attachimg(this, 'mouseover')" onmouseout="attachimginfo(this, 'attach_672', 0, event)" src="http://www.ismole.net/attachments/month_0806/20080625_46793df75a1f6b3d38aapdiTftg5vQxj.png" border="0" alt="" /></p>
<div id="attach_672_menu" class="t_attach" style="position: absolute; display: none;"><img class="absmiddle" src="http://www.ismole.net/images/attachicons/image.gif" border="0" alt="" /> <a href="http://www.ismole.net/attachment.php?aid=672&amp;k=595219cdbf635bcf04a5178c0ae175a3&amp;t=1214355870&amp;nothumb=yes" target="_blank"><strong>astheria.png</strong></a> (33.51 KB)</p>
<div class="t_smallfont">2008-6-25 09:01</div>
</div>
<p>另一个例子：<a href="http://astheria.com/" target="_blank">Astheria.com</a> 聚焦于白色区域，采取了一种平衡的给予网格的设计思路。虽然这个设计很难以捉摸而且只使用了一种吸引人的颜色，你依然可以很快弄清楚身处何处，也很明确可获得的选择。印刷术的力量在这里得到了极致发挥。遗憾地是，该网站没有显示哪些链接已经访问过了。<br />
<strong>5.说清用户的需求</strong><br />
作为网页开发者，你有为来访者提供舒适服务的首要任务，说清楚他们的需求，为他们提供充足的线索以满足准确无误且直观的导航。然而，为了取得这些，你需要的不仅仅是了解你用户的基本的概况和忠于他/她乐于的决定。<br />
为了最大化你的曝光量，你必须考虑来访者的不同的类型和资料。你需要识别主要群体并且提供各个群体会喜欢的机能。但这并不意味着你需要创造多重版本的网站；这在一定程度上指你可以将不同层面的用户交流融合与同一个<a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>布局中。<br />
比如，根据Shneiderman的使用界面<a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>的原则，让常客使用捷径是很重要的&#8211;为了增加互动的步伐，可以使用缩略语，特殊键，隐藏的命令等等。<br />
<span id="attach_673" style="position: absolute; display: none;" onmouseover="showMenu(this.id, 0, 1)"><img src="http://www.ismole.net/images/default/attachimg.gif" border="0" alt="" /></span> <img onclick="zoom(this, 'attachments/month_0806/20080625_055c3eb742451f5f56c1rgXIMIygi4h0.png')" onmouseover="attachimginfo(this, 'attach_673', 1);attachimg(this, 'mouseover')" onmouseout="attachimginfo(this, 'attach_673', 0, event)" src="http://www.ismole.net/attachments/month_0806/20080625_055c3eb742451f5f56c1rgXIMIygi4h0.png" border="0" alt="" /></p>
<div id="attach_673_menu" class="t_attach" style="position: absolute; display: none;"><img class="absmiddle" src="http://www.ismole.net/images/attachicons/image.gif" border="0" alt="" /> <a href="http://www.ismole.net/attachment.php?aid=673&amp;k=59251ed19edfc4304a223dfc14d51840&amp;t=1214355870&amp;nothumb=yes" target="_blank"><strong>fffound.png</strong></a> (66.21 KB)</p>
<div class="t_smallfont">2008-6-25 09:01</div>
</div>
<p><a href="http://ffffound.com/" target="_blank">Ffffound.com</a>提供了普通的导航和基于JAVA的键盘导航。这项机能对采用普通方式浏览网页的新成员是不可见的。然而，高级的用户可以更高效地导航。当然，你需要明确地说明怎样使用高级的机能和这项技能能带来的益处。<br />
另一个可能项可能是书签，工具条或者一些类似闪烁上传的特定的工具。提供了这些工具，你就给你的用户提供了更容易的方法来使用你的服务，这样他们就没有必要寻找替代物了。<br />
<strong>结论：</strong><br />
高效的<a href="http://feed.yeeyan.com/articles/tag/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1" target="_blank"><em>网页</em></a><em><a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a></em>不一定要色彩鲜艳和漂亮，它需要清楚和直观。确定你帮助你的访问者了解了你网页的益处，并且为他们提供了一种简单的方法来浏览和使用你的网站。<br />
对称和不对称的平衡都能帮助你取得一种实在和清楚的<a href="http://feed.yeeyan.com/articles/tag/%E8%AE%BE%E8%AE%A1" target="_blank"><em>设计</em></a>思路以提供丰富的用户互动的基础。为了最大化你的曝光量，考虑不同类型的用户，然后为他们提供不同层面的用户互动以把他们拉回你的网站。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cnedwin.com/35.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
