第6章节Web界面设计Pro.ppt

Web应用的历史 WWW初现 每个应用都有自己的客户端用户接口 Web浏览器-HTML/XHTML Flash(1996) JavaFX (Applets) Rich Internet Application (RIA) JavaScript(1995) Web 2.0-Ajax Web软件界面 特点 融合网页和Windows应用软件界面的特点 C/S和B/S两种结构 Web软件的主要界面模型 Header区 功能模块区 内容显示与操作区 信息反馈区 Header区 内容显示 与操作区 信息反馈区 功能模块区 网站界面 网站界面发展自Windows应用软件界面，有自己的特点 页面浏览器和运行平台具有不可预见性，超链接的无限跳转具有不可预见性 网站的互动性越来越强，但主要是展示信息 网站界面的基本界面结构 网站头部 导航条 内容展示区 网站尾部 网站头部 内容展示区 网站尾部 导航条 网站 vs. Web应用 网站，一组网页的集合，多为静态文本、图像和视频等，交互功能有限。 使用“内容管理系统”提供动态文本，但主要作用仍是提供信息的展示。 Web应用，一个动态交互的软件系统，用于处理业务流程（有明确的业务规则），运行在Web环境中。 桌面应用 任务型，面向普通用户，解决特定任务。功能不太复杂，界面简洁实用。如FoxMail, WinRAR 娱乐型，功能简单，用途明确，用户参与和可控制度不高。如媒体播放器，聊天工具 专用型，功能复杂，模块与界面元素丰富。如MAYA, Flash Web应用 vs. 桌面应用 Web Application – Desktop Application 桌面应用的特点 WYSIWYG Word, Excel, PPT Web应用的特点 点击-等待 使Web应用软件的界面逼近桌面应用 Ajax RIA 手持设备界面 功能有限，携带方便 图形界面的子集，如早期没有窗口的对象显示等 真正的图形用户界面风格的外观和行为，借助于嵌入式操作系统的支持 移动GUI 界面基本要素 界面菜单层级、图标、文字、功能按钮 128X160,?176X220,?240X320?像素是目前较常见的手机屏幕尺寸 手机LCD本身的限制，在色彩的还原程度上没有PC如此完善 受到硬件运算速度和内存的影响 移动设备界面的设计 移动设备 智能手机 个人数字助理（PDA） 笔记本电脑 车载电脑 …… Gartner预计，2012年智能手机销量将超越PC 移动设备界面设计的标准化 移动设备千差万别，界面设计也五花八门 2001.6，GSM发表Mobile Services标准，实现移动设备界面设计的标准化 定义移动设备界面的图形外观 定义内容和短信功能的通用框架 移动设备界面的输入方式 键盘输入 按键复用：T9输入法 软键盘 笔写输入 触摸屏 输入笔 语音识别输入 研究始于20世纪50年代 IBM的ViaVoice、Dragon的Naturally Speaking 移动设备界面的输出方式 屏幕输出 尺寸小 色彩少 声音输出 单音 合成音 移动设备界面的设计 导航 按钮 菜单 其他控件 多媒体 移动设备应用开发技术 技术框架 J2ME .NET BREW (Binary Runtime Environment for Wireless) 操作系统 Palm OS Nokia Symbian OS Android OS Windows Phone Apple iOS BlackBerry RIM 浏览页面 WAP (Wireless Application Protocol) WML (Wireless Markup Language) XHTML Basic + Mobile Profile * Internet/Intranet/WWW 因特网、内部网、万维网 Web界面设计 内容概述 Web概念 Web界面的设计 Web应用软件 6.1.1 Web概念 WWW（World Wide Web） 1989年，欧洲核子研究中心 高能核物理专家Tim Berners-Lee发明 通过WWW，互联网上的各种资源可以在一个网页里以直观的形式表示；而且在网页上可以链来链去 WWW由一个个超文本链接组成，是一个解决信息发布的应用 HTML HTML是表示Web信息的标准 超文本标记语言 通过标签说明如何在浏览器中显示信息 HTML发展 1993年，HTML1.0 1995年，HTML2.0 1996年，HTML3.2 1997年，HTML4.0 1999年，HTML4.0.1 2008年，HTML5 draft HTML5 多样化的API 嵌入音频、视频、图片 客户端数据存储 交互式操作 新界面元素 XHTML是基于XML结构的HTM