易站得-网站建设

从头衔上，您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计。的确，这些确实是我所关注的。视觉上的吸引力是重要的，但是这仅仅是工作的一小部分。而最终的目的是确保整个站点运转正常。
我的意思是，人们通常在访问 microsoft.com 时，并未将它当作艺术作品来赞赏。而是为了获得有关产品的信息，或者有一些技术问题需要咨询，或是阅读有关开发商的期刊。所以网站的设计应该尽量清楚和有条理，以便他们能够容易地找到所需信息。

设计站点

在进行 Web 设计时–在设计过程中–形式应该服从功能。这种方法应用于我们站点的整个设计过程中。当然，我们有最新的 Web 工具，并且能够将各种可视的小配件上载到网页上。但是我们认为这样做将不利于为访问者提供有效的服务。
事实上，我经常发现一些站点未将重点放在功能上。常见的错误包括：
用户界面元素不一致。例如，同一个控件在不同的页面上功能不同，或者同一个功能对应几个用户界面控件。
导航栏位置不一致。决定站点的哪些页和功能需要在站点的任何页上都可被访问到。这就是应该保持一致性的“全局导航栏”。
不太注意或根本不注意基本的图形设计原则。例如排版式样、色彩和版面的设计。
相关元素和功能的随意分组。注意将元素放置在网页上的位置和目的。这可帮助访问者从其它相邻的选择和位置来推断某个链接的功能。
使网页过于庞大以至使访问者需要通过典型的调制解调器速度的 Internet 连接进行长时间的下载。这并不是说不应该使用图形，但是您需要对它们进行精挑细选，然后用适当的压缩和颜色索引优化它们。
现在的 Web 站点仍然存在很多问题，这并不奇怪。毕竟，Web 设计“艺术”相对来说还是个新生事物。在四、五年以前，Web 页甚至是普通的。那时，人们好像认为他们的 Web 站点将会吸引访问者只是因为它们存在–并且，可能在某些情况下这种方法确实有效。但是这些站点一般很难看，并且更重要的是，它们真的难以使用。接下来便进入“看看我们能做些什么”阶段，在网页中加入了大量的动画、声音文件以及其它附加件，导致访问者需要长时间地进行下载，但是并未获得多少实实在在的内容。
如今的 Web 设计师们已经吸取了前人的经验和教训。好的站点倾向于简化和快速，同时在功能上有所提高。这是 Microsoft 的目标，而且我们最先承认自己所犯的错误（参阅“Microsoft 的 Web 简史”看一看以前的主页设计）。
设计错误并不总是显而易见的。有时在设计上对一个小元素的移动或更改将有很少或根本没有影响。但是，在其它情况下，它可能确实会对页面功能有所影响。而且如果说我们从过去几年学到了一些东西，那就是小的改动会使 Web 页的运行方式有很大的不同。

明确的流程

若要避免类似问题，我们为新服务（例如“搜索”）的创建或关键的 Web 页（如主页）设计了一个明确的流程。每个项目都是在一定的基础上开始的，即我们有一个受益于我们站点上的页面、部分或用户界面元素的产品或服务。在早期的产品计划阶段（第 1 阶段），我被要求设计一些初级模型：大致描述页面、部分或功能的草图。然后产品项目组检查产品计划建议，看看此项服务是否可以为 microsoft.com 的访问者真正带来一些实惠。
如果答案是“可以”，那么此项目会获得批准，我们开始写项目说明书（第 2 阶段）。我们在第 1 阶段的草图和概念基础上创建并提出一个更为完整的计划。这时，我们一般还会开始可用性测试（一般会有书面的模型）以了解潜在用户将对计划中的设计做出何种反应。在最后开发阶段（第 3 阶段），我们创建运行计划服务的 Web 原型，并且进行全面的可用性测试以及内部复查。然后完成站点的代码，修改程序错误，最后站点通过实际运转的 Web 站点向客户发布。
正如您所见到的，可用性在整个流程中扮演着重要的角色（参阅“创建有效的 Web 界面需要认真计划”）。我们可以为用户运行某项任务计时，这样我们就可以在产品以后的版本中对比相同的测试。我们可以使用这种方法进行度量，以确定一个功能的重新设计是否为客户带来任何真正的价值。
还有，我们将仔细地观察以了解可用性对象是否可以计算出如何正确使用新功能–我们称为“可发现性”的方法。有时这为我们提供了一些挑战。例如：在我们的站点上，在搜索引擎中键入一个词组或字会产生一列结果。然后我们请用户选择在这些结果中进行搜索，以便进行更细的搜索并且导向某一页或资源。但是即使“在结果范围内搜索”被明显地标记在深色标签上，很少有人熟悉它。一些用户认为他们正开始新的搜索，并且可能毫无结果。我们正在解决这个问题以确保客户可以利用 microsoft.com 上所有丰富的功能来提高他们对此站点的认识。
选项“在结果范围内搜索”看上去很直观，但不是非常易发现的。此问题一直是困扰我们的设计的问题之一。

最后阶段

大体来讲，站点设计是在发生冲突的需要之间求得平衡的艺术。一方面，我要将站点设计得尽量简单易用。另一方面，我要确保站点中所有强大的工具可为经验丰富的用户所用。与此同时，我还要为内部客户服务–Microsoft 产品项目组–他们对服务有特殊的需要。所以每天我都要解决一些非常困难的问题，经常处于很紧迫的情形中。我发现这种工作是鼓舞人心和有趣的。
这个职业非常需要更熟练的专业人员。我是经过一系列非常不一般的过程–在大学学习图形艺术，然后在多媒体公司设计 CD-ROM，最后加入 Microsoft 并开发应用程序–才获得这个职位的。非常奇怪的是，当我申请（并获得）这份工作时，我以前从来没有设计过 Web 页。但是我广泛的设计经历已经证明是非常有用的，并且我自认为已经验证了格言“成功的设计就是成功的设计”（不论是什么媒体）。许多设计问题对 Web 来说是独一无二的，解决这些问题的方法对于任何媒体都是一样的。
对于那些准 Web 设计师我的建议是，他们也应该尽可能地扩大设计背景。今天应该确保将一些 Web 工作作为互动设计培训的一部分–大多数好的设计学校已将其加入课程中。但是在排版、色彩理论、版面设计以及生产等方面的扎实的技术将仍然特别有价值。在未来，Web 设计师们仍将会继续被要求给页面增加更丰富的多媒体内容，从而为 Web 站点的可视性和可操作性增加了新一级的复杂性和技术要求。作为 CD-ROM/多媒体设计师，要求我必须具有图形设计、视频、音频制作、动画等方面的知识和创作能力。我的预言是，Web 设计师也将向这些领域发展。
对于属于 microsoft.com 的我们–以及在 Internet 上的其它地方–那应该是一个非常有趣的未来。

了解您的观众

调查一下究竟哪些人在访问您的站点，以及他们为什么要访问。新手或不定期上网的 Web 用户与软件开发商相比有非常不同的兴趣和站点需要。使您的站点对访问者来说有所帮助。

为您的观众提供所需的信息

使导航元素保持一致，并且确保对访问率最高的区域进行明显的标记，是它们易于被找到。

使用清楚的消息

确保用户了解此页面的上下文，并且知道需要他们做些什么。如果在注册过程中您要用户输入姓名，那么就直截了当地说。不要让访问者自己计算什么，他们会感到沮丧，于是转到其它更简单的站点（例如您的竞争对手的站点！）。

保持一致性

虽然更改不同 Web 页的外观并不难，但这并不意味着您应该这么做。将主要功能–例如返回“主页”的链接或者执行一个搜索–放在每页的相同位置。在 microsoft.com 上，黑色全局导航工具栏的位置在四十多万页上都是一样的。

使站点可用

牢记设计和测试站点的可用性。确保用户可容易地执行任务以获得所需信息。估算任务时间和任务完成率，然后努力进行改善。如果新的设计没有在这些方面获得改善，那么就不要实施它。重新从草图（或最初的计划）开始并尝试其它方法。

保持简洁

说起来容易做起来难。尝试征求反馈意见。有时新人可以很容易找到解决方案。

尝试新的东西

不要害怕打破常规，尝试一些完全不同的东西。如果您不试试，永远不会找到真正的答案。

用户体验和网站可用性的关系

ez898 — Wed, 28 Jul 2010 11:18:54 +0800

DJ 和 Bonny展开了一场以“品牌的用户体验”为主题的对话。这场对话也引发我们去探讨可用性（usability）和用户体验（user experience）的差别。从我的角度看，这两者同样重要。

正如DJ提到的，很多在相同领域的客户都面临相同的可用性问题。我们很幸运的曾经和几个在相同领域的公司合作，因此我们针对两者的区别有一些想法可谈。

我对两者的定义是…

首先让我们看看国际标准化组织（ISO）是如何来给可用性下定义的。在ISO9421里提到，某一事物的可用性应当可以以效力（effectiveness）、效率（efficiency）和满意度（satisfaction）三个维度来进行衡量。

效力（effectiveness）是指用户是否可以完成任务。

效率（efficiency）是指用户完成任务的快慢（这点在web和某些非关键应用上的重要性略低）

满意度（satisfaction）是衡量用户是否很享受完成任务的过程（最有趣的可能是具有高满意度将影响用户对效力和效率的看法）

那什么是用户体验呢？

用户体验是关于用户和品牌间的一个更大的概念。所以不只是一个是否可用的问题，而是如何让用户更简单的理解、参与其中并与品牌展开对话的问题。

这个问题真是太大了！这要求每个人，包括从管理层到一线员工（包括设计师、开发人员、文案人员和经理）都用相同的方式思考并实施。

你不需要见解（eyes），你需要的是愿景（vision）

这是问题的关键。如果缺乏一个针对你想创建的用户体验的非凡愿景，你很难建立伟大的用户体验。

看看那些伟大的品牌：Apple、Innocent Drinks、Nike、Howies。如果你与这些品牌的任何员工交谈，他们都能和你分享他们公司的愿景以及这些愿景意味着什么。

这些对你的网站/移动应用/业务简报（newsletter）/应用有什么影响？

尝试去思考这些内容，并把它比作你的同事，而不是一个对象。

作为一个你想让他谈论品牌的同事，你将如何使他们加入到你的用户中来。

事实上，他们所拥有的网站将是品牌表现的一部分。所以，网站看上去如何、他们说了些什么、他们对于抱怨如何反馈都是品牌对外表现的一部分。

所有的这些对于创建伟大了用户体验都非常重要，确保这些事情一切正常是必须做到的。

反过来看看那些在相同领域的品牌，就很容易看出他们有着相同的愿望但却试图着拥有不同的用户体验。

6个卓越网站设计细节

ez898 — Wed, 28 Jul 2010 11:04:22 +0800

优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解释说明卓越的设计的具体差别，但他们可以找到自己喜欢的网页设计作品。通过对照一下几个优秀作品，我总结了一下作为卓越设计的几个细节差别。

一、合理使用渐变
渐变不要滥用，更不要把渐变弄的跟彩虹似的，否则你的网页作品看起来比较外行。总而言之，合理的使用渐变对于优秀网站设计是有帮助的。

渐变、散景结合使用
Newism网站色彩丰富，但微妙的渐变与背景在视觉上结合的很到位。如果你也有兴趣在photoshop里面做这个散景效果，可以去Abduzeedo’s tutorial网站上面学习一下。

渐变、投影、纹理结合使用。
OnWired网站应用了这些设计技巧，显而易见，他的设计作品效果是很棒的！自始自终OnWired网站设计在应用渐变、投影、质感这方面是恰到好处的。我也特别喜欢设计师设计的这些。

二、留白
留白一词往往容易被误解从字面解释的空白。网页设计较为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它的。
“留白”对于网页设计是很重要的，留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题，他们在做设计的时候将整个页面放的满满的，没有给页面足够的“呼吸空间”。这对于他们来说可能不是什么问题，如果内容放不下的话，他们可以借助浏览器的滚条来扩大页面的空间。

优秀的留白与巧妙的分割线
Snook网站布局方面设计的是比较合理、舒服的。同时注意一下，网站里面的虚线将各个板块区分开了，这样我们在浏览网站的时候就一目了然了。

抽象图形
沙发采用抽象、美观、简约的方法。通过使用无背景或杂乱的图像，给浏览者的空间是流畅、舒服的。

三、网格布局
网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象，从好的设计到生活中的交通网。
960和蓝图可能是两个最流行的网格布局。我个人比较喜欢960网格布局，它简单、重点突出。你可以用任意对齐方式来安排你网站的元素，对齐在设计一个复杂的页面时，能使你的网站看起来比较精致、井然有序，并且你在网页布局里面添加任何模块内容时候都不用考虑其他的模块内容。

综合使用网格布局
Poccuo网站综合使用了网格布局，它采用3列和5列相结合的布局方式。给人以视觉吸引力和视觉空间。

博客采用列布局
我比较喜欢Web Design Ledger首页最上面的展现方式，他把最新的公告内容放大同时放到页面最顶部，其他的以3列的方式排列。

大量使用相等的列布局
Ecoki漂亮的网页布局显而易见采用的是4列、2行布局，同时幻灯片、缩略图、最新的审查也是采用相同的方式。

四、改善字体应用
字体应用困扰着大多数的设计师。如果要想提高你的设计水平，字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色，同时还可以增加设计作品的氛围。

用对比字体引起关注
SimpleBits网站在应用各种对比字体引导浏览者的注意力方面做的很棒。字体对比可以采取不同字体对比、各种颜色对比、字体大小对比等形式。

不要认为字体就像标志
这个网站看齐来就非常的漂亮、舒服，但你可以说出你的想法和感受来描述这个感觉。尤其在间距、字体选择等字体应用这方面做的挺完美的，我就被他的logo 字体应用迷住了。

五、明确而有效的导航
良好的导航对于网页设计来说很重要，如果浏览者不能快速、便捷的找到它，他们就很有可能去别的网站了。这是我们所不愿意看到的，同时我知道 MyInkBlog进行了一些改进，并将在以后重新设计中进行彻底的改进。

博客导航下面显示分类导航
在大多数情况下，博客导航放在页面的同时将分类作为第二导航放在页面的边栏。Tutorial9做了一件了不起的事情，他把浏览者关心的photoshop资源以生动的方式展现出来了，并且在鼠标经过二级导航的时候有一个高亮效果。

切换不同的图标效果
图标切换效果在web2.0网页设计里面无论是否需要被大量、胡乱的应用，并且成为一种趋势。并不是所有的都是不好的，web2.0里用的不好的原因是过度使用、业余使用造成的。在大多数情况下，适当的应用图标切换按钮是相当有效的。Carsonified网站在导航上就运用了单色、简洁的图标切换效果，并且于他的网站整体感觉想吻合。

六、使用漂亮实用的页脚
一开始我们就将页脚作为次要的内容，在页脚里面放置一些没有多大用处的内容。在设计的时候仅仅花费一点点心思在它上面。现在页脚对于整体设计来说变的越来越重要了，千万别错过好的页脚完成你设计。

展示大量的信息和证书
这个页脚主要展示了网站介绍和版权等必要的信息。Brian Hoff网站更是添加了一些个性、有趣的内容在里面。通过3列布局方式展示了作者的工作和建议性的内容。

添加搜索功能
Elliot Jay Stock’s网站在底部添加了一个特大的搜索框…

网站建设套餐不符合我的需求怎么办？

ez898 — Tue, 27 Jul 2010 12:42:16 +0800

在选择易站得网站建设套餐时，可能您的需求和套餐不吻合，那么怎么选择呢？

1.你可以选择和你的需求接近的套餐作为基础套餐(比如你想价格尽量便宜而设计过得去就可以，想做一个简单的宣传网站，那么以898元为基础套餐)，然后其他定制部分可以根据我们的明细报价来增加其他条目。

2.可以与我们的在线客服联系，由在线客服帮你选择最终方案。

3.如果您需要更好的定制化网站建设服务（一般预算金额在5000RMB以上），请与我们联系，由专人与您沟通。

4.如果您的需求过于复杂，易站得网站建设也许并不适合您，您可以与我们在线客服联系转交给花火定制化网站建设部门。

经典的web2.0网站赏析一

ez898 — Mon, 26 Jul 2010 12:13:26 +0800

做好一个网站，不仅要在服务及功能上胜人一筹，而且网站的整体设计也是一个不可获缺的重要因素，一个设计漂亮的站点通常能在第一时间吸引人的眼球，用户回访机率也就更大。因为我本人对设计这一块也很感兴趣，所以经常在浏览一些网站的时候，非常在意它们的设计效果，下面这十个web2.0网站的设计堪称经典，值得我们去学习。

1)Cork’d - 是一个分享好酒、酒文化、酒故事的网站。深棕色和淡棕色的颜色搭配很协调，再配上漂亮的插画，显得整个布局更加充实。

2) Newsvine - Newsvine是一个社会性新闻站点，它是一个用来阅读、撰写和分享新闻的场所。

3) digg - digg也是一个社会性新闻网站，它的网站创意不仅吸引了很多的人，而且它设计也非常大气，以致于越来越多的网站来模仿它的设计。

4) Blurb - Blurb 提供图书设计及出版软件。

5) FireFox - Firefox不仅由于出色的功能，从而可以与IE进行对抗，而且它的网站设计也漂亮得没话说，给人的感觉非常清新。