(第六章Web界面设计.pptVIP

Web界面设计 内容概述 Web概念 Web界面的设计 Web应用软件 Web应用的MVC模型 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 HTML5 多样化的API 嵌入音频、视频、图片 客户端数据存储 交互式操作 新界面元素 XHTML是基于XML结构的HTML 语法更严谨 代码的可读性 XHTML发展 2000年，XHTML1.0 2001年，XHTML1.1 6.1.2 Web 2.0 Web2.0 ，声称是新版本的WWW，是相对Web1.0的新型互联网应用的统称 2004年第一届O’Reilly Media Web 2.0会议 Web2.0主要是指用户使用Web的方式的变化，提高创造性、安全性、协作性和功能性为目的。 Web2.0对已有技术规范的没有任何变化。 Web 2.0产品 Blog：用户以时间顺序发布并不断更新的记录，并其他用户内容链接，进行组织管理 RSS（Really Simple Syndication）：用于共享新闻和其它Web内容的数据交换方式，读者订阅后可以及时获得更新 SNS（Social Network System）：社会化书签 blog+人与人之间的链接 WiKi：用户共建的百科全书 Web 2.0理论 六度分割理论 1967年，Stanley Milgram创建 人与人之间最远间隔6个人 Small World 人际关系局限在一个小范围内 少数人拥有大量的人际关系 6.1.3 Web 3.0 Internet革命的未来 2006年John Markoff最早提出 智能网络及连接 下一代Internet服务 Semantic Web借助于人工智能技术改变网络的使用方式 模块化的Web应用开发 Web 1.0 Read only Web 2.0 Read, write Web 3.0 Read, write, execute 6.2 Web界面的设计 Web设计是艺术与技术的高度统一。 Web设计要求 主题鲜明 形式与内容统一 强调整体性 6.2.1 Web设计的特点 交互性，及时交互，主动交互 持续性，信息的持续更新 多维性，源于超链接，导航清晰 多媒体，综合运用多种媒体元素 布局不可控 操作系统不同、浏览器种类和版本不同、屏幕大小和分辨率不同 6.2.2 Web设计的基本原则 主题鲜明 形式与内容的统一 强调整体 减少层次 6.2.3 Web设计的内容原则 主流浏览器正常显示 结构层次分明 平衡使用多种媒体，达到效率与效果的统一 文字通俗易懂 重视主页 及时更新 6.2.4 Web设计的风格原则 用户 儿童 老年人 功能 专业 娱乐时尚 6.2.5 Web设计的语言文化原则 文字排向 颜色 数字 时间格式 货币 6.2.6 Web界面元素的设计 布局 导航 颜色 文字 视听元素 RIA Web布局 在限定范围内合理安排图像和文字的位置，根据需要进行分组，按照内在逻辑进行组织排列，体现出一定的条理性。 布局原则 平衡 呼应 对比 疏密 典型的Web布局 “同”或“国”字型 页面结构清晰、左右对称、主次分明 往往较呆板，需要运用细节色彩调剂 左右对称型 自由活泼，屏幕利用率高 左右两部分有机结合很困难 拐角型 标题正文型 左右框架型 上下框架型 封面型 自由型 打破条条框框，漂亮吸引人，适合文字少的时尚设计网站 显示速度不高 Web导航 首页出现 位置醒目一致 横向导航栏优于纵向导航栏 Web颜色 用户的第一印象，体现网站的风格、文化和品味 色彩的合适性，色彩与内容契合 色彩的鲜明性，引人注目 色彩的独特性，印象强烈 色彩的联想性，诱导用户产生期望的联想 Web文字 重视标题，综合运用字体和字号 英文正文要求易读性，采用Serif字体；其他英文要求醒目，采用Sans-Serif字体 中文常用字体和字号参考用途 文字颜色一致，慎用颜色 6.3.1 Web应用概述 Web Application Web应用是在Internet中通过浏览器访问的应用软件 以支持浏览器的语言开发（HTML, JavaScript等） 依靠浏览器呈现 Web应用是多层