Web站点设计的12种模式

一 Know Your Audience （明确受众）

问题:

         如何裁减网站的内容使之更紧凑?如何使你的网站信息更丰富、更有说服力或更有用？

情景

         网站是一种通讯工具，与错误的受众通讯将达不到预期的效果—如劝说十几岁青少年的内容对于有三个孩子的五十多岁的老父亲来说就是无聊的，反之亦然。因此网站的图形、书写语言和词汇、甚至导航都应由打算影响的受众决定。

方案

        在一些情景，受众是网站功能的一部分。如你创建一个关于面向对象开发最新理论的网站，受众将是OO面向对象开发程序员、工程管理人员和理论工作者。如果网站的功能对网站的受众不是显而易见的，公司就要有市场研究部门来识别目标客户群或他们想面对的特定的人群。

结果

        一旦受众被识别，美工就知道如何设计，程序人员就知道如何编程、网站的架构也能够被适当的设计。

已知应用

        大多数网站都有涵盖受众的主题，如 IEEE网站 ,http://www.ieee.org，受众是IEEE的会员和预期会员。

相关模式：SelfSortingAudience、MultipleCrossSections

二Keep It Fresh（保持更新）

问题

        网站会随着时间流失失去价值。如果网站的内容在2012年还充满着象"Coming in Fall, 1996!"等失去价值的内容，即使实质内容仍旧有效，网站信息的感知价值也会降低。

情景

        站点服务于市场营销或者服务于教育，用户对信息的感知是判断站点成功或失败决定性的东西。对于市场营销站点，维持用户头脑中的品牌标识来产生回头客的关键。

方案

        维护和更新站点。维护意味着避免链接失效和保持服务正常。更新站点意味着增加新的内容和纠正以前错误的内容。

        新的内容应当突出，可以有一个“最新更新”的页面，或者在页面的头部放最新的内容而和把旧的内容移到页面的最后。

        如果站点内容不是由用户生成的（如 WIKI），新的内容应当按计划发布。大多数站点也许是每日或每周更新，重要的是有规律的做它，以便使使用它的人知道站点仍是有效的。

结果

       使用户知道站点的内容在不断更新和有价值。营销站点也有更多的点击量，点击量是站点成功与否的一个基本测量指标。

三 Self Sorting Audience（受众内容的自组织）

 问题：

        当有多个受众使用站点时如何指导他们找到为他们提供的信息？

情景

       有时识别站点的每个单独的受众是不可能的。在一些情况吸引和与多个受众通讯是紧要的。

方案

        提供一个包含站点多个受众内容链接的不同分区的顶层页面，每个分区对应一类受众。

结果

       每类站点受众能选择他们感兴趣的部分。

       VisibleContext模式也能针对每类受众进行裁减。

       主页有包含大量的图片的趋势，在这种情况下就不能提供太多有价值的实质内容给用户。假定站点的其它部分也是相似的，用户有可能对下载时间和少量的内容感到失望。

相关模式

EasyOrientation Multiple Cross Sections

已知应用

        Microsoft的主页(http://www.microsoft.com)包含针对开发者、管理者、投资商等链接的不同分区。

        Javasoft的主页（http://www.javasoft.com)也作相同的事情。

四  Easy Orientation  (易定位模式)

问题

       在组成一个站点的混乱链接中容易迷失。

情景

        一个站点在页面之间具有交叉链接。

        人们不象看电视或阅读一本杂志那样使用WEB。他们使用WEB用来寻找他们需要的信息一旦找到就停止浏览。

        一个WEB站点的用户在浏览时心里不会记忆站点的地图。

       用户在查找他们需要的信息时可能选择了一个错误的链接，这时他们不能找到返回相关链接的页面的方法。

方案

       在每一页包括一个指引用户到“关键点“的页面的链接，在关键页面他们能够重新理清站点之间的关系。

结果

       如果用户在某个站点感到迷失，他们能够容易的重新理清思路。

       如果你需要多个页作为关键页面，你能够采用用树结构TreeStructure来组织它们。

       你也能包含一个VisibleContext来帮助用户维护他们目前在站点什么地方的跟踪。

已知应用

       许多站点的每个页面包含一个主页的链接或者站点地图的链接。

五 Visible Context（可视上下文）

问题

       如何帮助读者知道他们在站点的什么位置？

情景

       包含多个交叉链接的WEB站点。

方案

       在每页包含一个站点地图或者导航条来链接与当前页面接近的页面。这可能包括通向当前页面的页面，与当前页面有关的页面以及关于当前页面详细主题的页面。Visible Context内容与页面的实际内容要有个清晰的区分。

结果

       Visible Context给出站点整个结构一个观感，但不会使每页的详细信息逊色。

       如果你的站点有一个树结构TreeStructure，Visible Context可能包括从根页面到当前页面以及当前页面的兄弟页面的路径。

 

已知应用

        许多站点在页面的顶部和/或底部包括一个导航条。

        Bruce Tognazzini发表了一篇关于设计VisibleContext的文章（http://www.asktog.com/columns/014WebsiteNavBars.html）。

        Adobe 向你展示了如何使用颜色来制作VisibleContext，来确保相关页面和导航图标看上去一致，参见http://www.adobe.com/studio/tipstechniques/wpdphse7/main.html。

六Tree Structure模式

问题

       在构成一个站点的混乱链接中容易迷失

情景

        一个站点在页面之间具有交叉链接，且主题之间有一个显而易见的等级组织。

方案

        着重站点内容的树结构：每页包含VisibleContext来显示页面在树中的位置。VisibleContext可能包括从根页面到当前页面以及当前页面的兄弟页面（在树的相同层次）的路径。包括当前页面的子页面应该也是可能的。

结果

       树结构对用户是显而易见的。

       VisibleContext作为“关键点”链接展示了到当前页面的路径，在树的较低层次迷失时作为采用EasyOrientation模式的方案来理清位置。

已知应用

        许多站点有一个组织拥有的匹配组织本身等级结构的结构。

七 Multiple Cross Sections 多交叉分区

问题

        你如何为不同类型的用户组织站点的内容？

情景

        大多数站点提供不同背景和需求的人们使用的多个功能。一种结构适合一类用户但不一定适合另外的用户。

方案

        为不同用户以不同方式组织站点的内容。每个结构包含一个呈现以用户特定视角观察的站点信息的交叉分区。

        独立的页面可以在交叉分区之间共享。

结果

       用户能够选择一个他们熟悉的组织。

       这种结构使用VisibleContext来提供将更复杂，因为他们可能通过站点不同的交叉部分到达一个页面。

已知应用

         Byrd Watcher站点（http://ebni.com/byrds/index.html）采用MultipleCrossSections组织相同的数据:乐队的历史通过以每个乐队成员不同视角的交叉线索来描绘,如通过日期、专辑、乐队的拆散等等。

         Java 辅导网站（http://www.javasoft.com/docs/books/tutorial/index.html）包含多个交叉的指导内容，每个学员能够跟着学到JAVA语言和API的不同方面。

八 Consistent Look （一致的外观）

         该思想是通过维护一个网站一致的观感( LOO K or feel）来降低学习曲线。

九 Use The Clients Cache ( 使用客户端CACHE)

问题

       如何减少下载时间？

情景

      含有用作导航按钮、图标、标签等图片的大量网页的网站。

      当使用大量图片时，下载时间就会增加，如果下载时间太长用户通常退出下载浏览其它内容。

 

       1 许多用户使用低带宽访问网站

       2 用户不想等待网页下载除非他们确信网站包含他们想要的内容，否则他们选择取消浏览另外的内容。

       3 你想使网站具有吸引力或者必须符合社区已公开的指导方针。

       4 图片比文本更花费下载时间。

       5 从cache下载图片比网络下载快。

方案

       网站自始至终使用一致的外观，每页的按钮或LOGO使用相同的图片。

       导航和内容使用DIV元素组织。确保内容首先出现在HTML代码中，第二个导航和广告出现在网页末端。这种方式使用户在导航元素加载时能够检查内容。使广告显示在末端有两个效果：1用户几乎很少从头到尾阅读完网页，因此不必等待它们。2如果用户呆在本页，广告也不会吸引他们的注意。

结果

        图片在首次出现时将被浏览器客户端CACH下来，以致下次在其它页面出现浏览器就不必再次下载它们。

       如果图片变化，变化将不能立即被已CACH该图片的浏览器反映。

已知应用

        许多网站使用公共的导航按钮，如TreeStructure或返回前一页。

十 Get As Read Post As Write （Get读Post写）

问题

         CGI用来显示一个表格，表格也许带着一些已经填充的项。当用户提交表格时，表格项填写错误或者有未填的项可能需要表格重新填写和提交。

方案

        从不嵌入表格到无格式的HTML页面，尤其如果站点能够基于状态和历史自动填充表格的一些内容时。而是使用CGI（servlets, ASP等）来响应GET命令来返回表格给用户，响应POST命令来处理表格输入。

结果

        仅在一个地方放置产生表格的必须的代码，这样就可以在表格出现错误时重新显示它们。因为表格显示代码在表格处理时仍旧有效，因此可以调用它们重新显示表格来处理表格错误和提示用户出现的问题。而不需要太多的“请返回重试”。

十一 Bread Crumbs 面部屑

        该模式的意图是显示用户当前在WEB站点的位置。通常在站点的头部出现，看上去像这样：Root > Foo > Bar > Page

          除了最后是个超链接外每个元素的位置允许在站点中向上移动。

         注意页面的面部屑是静态的，它们向用户显示页面在站点的位置，不是用户已经在的位置。

十二 Accessible Web Page Design

         该模式的意图是如何写网页保证网页在尽可能多的浏览器中能够解释。

        该技术包括：

              避免依赖浏览器窗口的尺寸，依赖浏览器显示图形和其它非文本数据的能力和浏览器是否支持脚本等等。

              使用标准的HTML。

              避免使用引起歧义的HTML语法。

              避免或提供没有包括在 HTML早期版本中的选项。

              使用一个HTML校验器例如http://validator.w3.org  来校验语法。

              抑制试图简单地控制用户的体验的企图。