【UI/UX】Web应用GUI设计

Web应用程序

Web应用程序是一种允许用户在Internet浏览器执行业务逻辑的Web(分布式C/S)系统,业务逻辑可以放在服务器和/或客户端。

当一个 页作为Web应用程序的入口时,可以将其看成是一种特殊的主窗口。

Web应用系统中的用户事件是通过菜单项、动作按钮、超链接实现的。

一个 页链接到其他 页的方式:

  • 页标题下的菜单栏
  • 菜单栏下面的面包屑区域
  • 左边和右边的菜单面板

Web应用系统的使能技术

使能技术(Enabling Technology)是指一项或一系列的、应用面广、具有多学科特性、为完成任务,而实现目标的技术。

维基百科对使能技术的定义是:使能技术是指能够对用户的能力或文化产生根本性变化的发明或创新,其最明显的特征是一般会在不同领域快速形成衍生技术。

大多数Web应用系统的核心使能技术是Web服务器,它给浏览器提供 页,维护着应用系统的状态以跟踪在线用户的动作。

Cookie是应用服务器监控用户状态的一种简单技术。

Script和Applet用于创建动态的客户端页面,Script是一个由浏览器解释执行的程序,Applet是一个编译好的在浏览器沙盒环境中执行的组件。

服务器页中的脚本使用标准数据访问库,典型的使能技术包括ODBC、JDBC、RDO、ADO等。

Web服务器的使能技术一般有HTML、ASP、JSP等。

页使能技术一般有客户端脚本、XML文档、JavaApplet、JavaBean、ActiveX控件等。

客户端通过HTTP从服务器获得 页,页面可以包含脚本,或是已经编译好的可执行的DLL模块,如ISAPI、NSAPI、CGI、Servlet等。

部署体系结构支持更先进的Web应用系统,包括四个层次的计算节点:

  • 浏览器客户端:在客户端运行浏览器外的应用代码(脚本或小程序)。
  • Web服务器:处理来自浏览器的页面请求,并动态生成页面和要在客户端执行和显示的代码。
  • 应用服务器:在系统实现涉及分布式对象时,应用服务器不可或缺,它处理业务逻辑。
  • 数据库服务器:业务构件封装存储在数据库中的持久数据。

内容设计

内容设计的目标:

  • 如何将 站或Web应用系统的可视内容展现在用户的Web浏览器上。
  • 设计必须具更具有适应性,并考虑到不同用户的需要、兴趣、技能和偏好。

Web应用系统是一个包含部分或全部未确定页面内容的 站。

静态 页和动态 页之间的区别原语Web服务器和应用服务器之间的区别。
Web服务器管理管理静态 页,而应用服务器管理动态 页。

表单在页面显示信息给用户,允许输入数据或发送信息组合给服务器处理并显示结果。

菜单和链接具有类似的功效(指用户期望GUI项具有的行为),链接的功效是进入另一个页面,菜单的功效也是移动到另一个页面,但偶尔菜单项可以在呈现另一个页面时做一些附加的处理。
菜单可以分层,一些菜单可以进入一个新的页面,另一些则是展示一个子菜单的下拉列表。

菜单可以分为:

  • 顶部菜单用于整个 站的导航。
  • 左手菜单用于导航到达 站控制以外的 页。
  • 右手菜单用于显示 站范围内的 页。

面包屑和导航面板

面包屑和导航面板提供了当前页所在位置的可视化,并用于导航到此页。

面包屑区域通常放在页面的顶部,刚好在顶部菜单下面。该区域由一组超链接标签组成,用于告诉用户它们的当前位置。导航项随用户在页面之间的导航而改变。通常情况下,它们还允许用户后退到以前访问过的页面。

按钮

在Web应用系统中,按钮是调动动作的主要工具,而菜单项只用于导航目的。
按钮的功效是按下之后做一些事情。

按钮的设计原则如下:

  • 如果按钮被放置在一个相关的按钮组中,且它们的文字数量没有明显不同,则它们的大小相同。
  • 把它们一起放在页面的按钮区域上,与输入数据的区域分开。
  • 如果 页比窗口长,则在顶部和底部重复放置相同的按钮。
  • 谨慎放到框架标签上,区分应用于个别标签的动作和应用于整个框架标签的动作。
  • 编程时忽略不耐心用户的多次点击。
  • 准确命名以显示将触发的动作(某些动作会保存在数据库,而某些只是暂时保存,用户可以撤销)。

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2021年1月15日
下一篇 2021年1月15日

相关推荐