Web GUI设计

Web GUI设计
1  概述      
    web应用程序是一种在Internet浏览器上使用的分布式C/S系统。Web应用程序中的用户事件是通过菜单项、动作按钮和活动链接（超链接）实现的。链接到其它网页的方式有：
    A、网页标题下的菜单栏（About the Book、Readers Area和Instructors Area）。
    B、菜单栏下面的面包屑区域（这个页面上只有一个面包屑项Main）。
    C、左边和右边的菜单面板（使用向下导航和侧面导航+可以到达其它菜单列表）。
1.1 Web应用系统的使能技术  
大多数Web应用系统的核心使能技术是Web服务器，它给浏览器提供网页。应用服务器维护应用系统的状态，以跟踪在线用户的动作。
    脚本和小程序（applet）用于创建动态的客户端页面。脚本（例如JS编写的脚本）是一个由浏览器解释执行的程序。
   网页的脚本也可以在服务器执行，这样的网页称为服务器页。服务器页可以访问数据库服务器的所有资源。服务器页管理客户端的会话、放置cookie到浏览器、创建客户端页（从服务器的业务对象创建页面文档并发送给客户端）。
   服务器页中的脚本使用标准数据访问库来访问数据库。典型的使能技术包括开放数据库连接（ODBC）、Java数据库连接（JDBC）、远程数据对象（RDO）和ActiveX数据对象（ADO）。
    Web服务器的使能技术一般有超文本标记语言（HTML）页、动态服务器页（ASP）或Java服务器页（JSP）。网页的使能技术有客户端脚本（JS或VBStcript）、可扩展标记语言（XML）文档、Java applet、JavaBean或ActiveX控件。
    客户端通过超文本传输协议（HTTP）从服务器获得网页。
    cookie是保持客户端和服务器之间连接的原始机制，称为无连接互联网系统。保持客户端和服务器连接的更先进技术使Internet成为了分布式对象系统。在这个系统中，对象使用OID唯一标识，通过获得彼此的OID进行通信。主要机制有CORBA、DCOM和EJB。通过这些技术，对象之间的通信可以不使用HTTP或Web服务器。
    部署体系结构支持更先进的Web应用系统，包括4个层次的计算节点：
       1）浏览器客户端。
       2）Web服务器。
       3）应用服务器。
       4）数据库服务器。
    客户端节点的浏览器可以用于显示静态或动态网页。可以下载脚本和小程序，并在浏览器上运行。通过使用对象，如ActiveX或JavaBeans，可以在客户端浏览器上执行附加的功能，可以在客户端运行浏览器外的应用代码，以满足其它GUI需求。
    Web服务器处理来自浏览器的页面请求，并动态生成页面和要在客户端执行和显示的代码。Web服务器也处理与用户会话的客户化和参数化。
    当系统实现涉及分布式对象时，应用服务器是不可或缺的，它处理业务逻辑。业务构建通过构件接口（如CORBA、DCOM和EJB）向其它节点提供接口。
       业务构件封装存储在数据库中的持久数据。它们通过数据库连接协议（如JDBC，ODBC）与数据库服务器通信。数据库节点提供可扩展的数据存储，并支持多用户访问。

1.2 内容设计         
    桌面设计和Web内容设计的区别似乎是设计师不一定认识网站或Web应用系统的观众。因此，设计必须更具有适应性，并考虑到不同用户的需要、兴趣、技能和偏好。
    内容必须与网站或应用系统的性质和宗旨相匹配。SKlar（2006）区分定义了从网站到Web应用的不同内容的目标：
    1）广告牌——为组织建立Web展现。
    2）出版——出版报纸和期刊。
    3）门户网站——发布自己的信息内容。作为一个门户，包括Web服务和资源，如购物、搜索、电子邮件(广告内容是其主要的收入来源)。
    4）特殊利益、公共利益和非盈利组织——根据目的，它包含新闻、联系信息、链接、下载文件等。
    5）博客——网络博客的简称，它包含私人或有限范围内的页面，反映博客作者的独特兴趣或努力，并邀请其他“博客作者”的参与。
    6）虚拟画廊——包括作家、艺术家、摄影师、音乐家等的文字、视觉和视听作品的例子（通常是有加数字水印版权的材料）。
    7）电子商务、产品目录和网上购物——（无疑是一个应用系统，不仅仅是一个网站）使得通过互联网开展业务称为可能。
    8）产品支持——传播信息、操作说明、升级、咨询、文档、指南和其他对产品用户和消费者的支持。
    9）企业内联网和外联网——允许员工通过私有局域网访问组织的软件应用系统，包括文件、政策、电子邮件等（所有这一切也能以外联网的形式）。

1.2.1 网站到Web应用系统的统一
    Web应用系统是一个包含部分或全部未确定页面内容的网站。只有当访问者从Web服务器请求网页后，其内容才最后确定。因为最后的网页内容根据访问者的行动请求变化，这种网页称为动态网页。
    顺便提一下，静态和动态网页之间的区别还源于Web服务器和应用服务器之间的区别。Web服务器管理静态网页。它找到浏览器请求的页面并将它们发送到浏览器。应用服务器管理动态网页。它从Web服务器接收不完整的页面，扫描网页代码，与数据库通信并请求需要的信息，在网页上插入新的信息，并把网页传给Web服务器。

1.2.2  表单
    Web应用系统在浏览器的总体框架内执行，框架包括标题栏、菜单栏、按钮栏和URL地址栏。应用系统的内容又构成其自身的框架，包括导航框架、动作按钮和表单。
    表单在页面中显示信息给用户，允许输入数据或发送信息组合给服务器处理并显示结果。
    Web表单域的设计指南与桌面应用系统的设计指南类似。Fowler和Stanwick（2004）列出并讨论了以下指南：
    1）决定域类型。（是否允许使用任意文本？是否只限于预定义的值？是否为必填值？）
    2）确定域的适当大小——通常情况下，域框架或盒子的大小与域的长度相同，但请记住，域可以横向滚动，因此对于大的域，其大小可以小于域的长度。
    3）尽可能指定域值的应用格式——文本居左，数字居右。
    4）在区域内提供键盘和鼠标导航（但，数据录入者宁愿通过键盘输入数据，讨厌被迫切换到鼠标，所以不要那么做）。
    5）如果应用程序逻辑允许，保留浏览器上对域值的剪切、复制和黏贴功能。
    6）对域进行标记，并且要么左对齐，要么右对齐（左对齐适合域长度不同和/或用户很可能会从一个域跳到另一个域输入数据）。
    7）将长表单改成多个分割的表单或（如单个交易表单的例子）确保没有“假底部”——也就是说，在域之间没有任何可视的指示，这种指示会使我们以为已经达到了表单底部。
    8）用视觉上有吸引力的方式对域分组（不一定用盒子或框架）。
    9）确保对任何有限制值和所需要的域有明确的视觉提示，包括为视障人事提供的文本。
    10）尽可能使用下拉列表，但当列表项中的内容太多，以至于在下拉列表中无法显示时，用带有滚动条的弹出列表来代替下拉列表。
    11）如果可能，请使用复选框和单选框。

1.3 导航设计    
    GUI屏幕（窗口、网页）之间的导航涉及用户的动作，又涉及应用程序的代码。在桌面应用系统中，有菜单项、工具栏按钮、命令按钮和键盘支持用户在窗体之间的导航。Web应用系统中存在类似的功能，虽然看上去有所不同，特别是菜单项和工具栏按钮。事实上，在Web应用系统中，不存在桌面上的菜单栏和工具栏的感觉。另一方面，桌面上不存在Web应用系统中为用户导航的活动链接（超链接）。
    如果有什么区别的话，Web应用系统中的导航往往比桌面中的用户界面更友好。它没有主窗口和辅窗口的区别——每个网页都可以表现出混合的导航能力；各种各样的菜单可以与按钮、链接和导航（导航面板）共存。
    应用程序网页之间的导航要精心策划。无论是直观的还是页面上的导航面板，导航必须有明确的用户可以理解的逻辑，使用户不会在网页的“超空间”中迷失。
    基于交易的商业应用倾向于加强页面中工作流程的活动顺序。在初始阶段，当用户查找产品或服务时，允许用户进行探索，但在后期则引导用户付款。数据输入的应用倾向于尽量少的导航，由少量的较长的页面组成，以方便快速的输入，而不需要在页面之间切换。

1.3.1 菜单和链接菜单和链接是网页之间导航的两个主要工具。菜单和链接有相同的功效。链接的功效是进入另一个页面。菜单的功效也是移动到另一个页面，但偶尔菜单项可以在呈现另一个页面时做一些附加的处理。此外菜单可以分层，因此一些菜单项事实上并不进入一个新的页面，而是展现一个子菜单项的下拉列表。
    我们可以区分：
    1）顶部菜单。
    2）左手菜单。
    3）右手菜单。
    顶部菜单通常用于整个网站的导航。左手菜单和右手菜单的设计原则更灵活。左手菜单用于导航到达网站控制之外的网页，而右手菜单显示网站范围内的网页。当然，也可以把二者颠倒过来，至少有两种理由支持这样做：
    1）许多应用程序（与网站相反）仅有一个退出设施，且不允许向后或向前移动到网站或应用程序之外。
    2）对人们浏览页面的方式进行研究，发现通常用户查看页面的左边，然后看上边，最后从中间到右边。因此，把网站或应用系统的关键要素集中放在用户首先看到的左手边更为明智。

1.3.2 面包屑和导航面板
    有些特殊的菜单，主要功能是报告信息，而不是方便页面间的移动。它们是面包屑和其他导航面板——它们提供了当前页所在位置的可视化，应用于导航到此页。
     面包屑（breadcrumb）区域通常放在页面的顶部，刚好在顶部页面下面。该区域由一组链接标签组成，用于告诉用户它们的当前位置（他们当前工作的页面）。因此，导航项随用户在页面之间的导航而改变。通常情况下，它们还允许用户后退到以前访问过的页面。

    导航面板与面包屑类似，但是它们更有可能应用于交易应用系统，显示一个交易工作流程的所有步骤，且除非取消交易的进行，否则不允许移动到以前的步骤。通常，由前面页面的动作按钮导致工作流程中页面的向前移动，而不是点击导航面板。此外，导航面板在页面上的位置取决于设计师的判断，有可能不在页面的顶部。

1.3.3 按钮
    在桌面应用系统中，计算动作的调用有些时候可以在菜单项和按钮之间互换。在Web应用系统中，按钮是调用动作的主要工具，而菜单项只用于导航目的。按钮的功效是按下之后做一些事情。
    按钮的设计原则如下：
    1）如果按钮被放置在一个相关的按钮组中，且它们的文字数量没有明显不同，则它们的大小相同。
    2）把它们一起放在页面的按钮区域上，与输入数据的区域分开。
    3）如果网页比窗口长，则在顶部和底部重复放置相同的按钮。
    4）谨慎放到框架标签上，区分应用于个别标签的动作和应用于整个框架标签的动作。
    5）编程时忽略不耐心用户的多次点击。
    6）准确命名以显示将触发的动作（特别要表明，某些动作会保存到数据库，而某些只是暂时保存，用户可以撤销）。