《人机交互技术》 第七章 Web界面设计

第七章 Web界面设计

1.Web相关概念（第二版 P164）

       Web是一个由许多相互链接的超文本（Hyper Text）文档组成的系统，用户通过Internet对其访问，进行交流与共享信息。资源通过超文本传输协议（HTTP）传送给用户。

        超文本（Hypertext）:是一种使用于文本、图形或计算机的信息的组织形式，是一种非线性的信息组织形式。它使得单一的信息元素之间相互交叉引用，这种引用并不是通过复制来实现的，而是通过指向对方的地址字符串来指引用户获取相应的信息,超文本标记语言（HTML）是超文本最常使用的格式。

        Web界面设计的人性化、易用性是Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。

2.Web界面设计原则（第二版 P167）

 

• 以用户为中心：既考虑共性，也考虑差异性
• 一致性：内容和形式的一致性、风格的一致性
• 简洁与明确：网页层次化、显示字体和颜色的数目、减少浏览层次
• 体现特色
• 兼顾不同浏览器
• 明确的导航设计

        站点的结构可分为逻辑结构和物理结构:逻辑结构描述文档间的关系，定义文档间的链接；物理结构描述文档的实际位置及显示方式。

        WWW网上，最普通的超文本结构是层次结构和树型结构

        Web界面设计的3C原则：简洁、一致性、对比度（第一版 P177）

3.Web界面设计要素

（1）规划（第一版 P178）

       确定目标（企业 OR 个人）、布局规划、网站规划、建立原型、详细设计、正式实施

（2）设计要素（第一版 P181）

       布局：合理、有序、整体化；“同”、“国”、 “匡”、“三” 、“川”字形布局 、左右对称布局、自由式布局

       色彩：

                确定网站的标准色彩：不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。

                以红、绿、蓝三色称为三基色：其它的色彩都可以用这三种色彩调和而成。

                底色应柔和、素雅：柔和的底色配上深色文字，读起来自然，流畅。

                网页色彩搭配的原则：鲜明性、独特性、合适性、联想性

       文本：（第一版 P174）

                文本不要太多，以免转移浏览者注意力。

                要选择合适的颜色，以便使文本和其它界面元素一起产生一个和谐的视觉效果；文本的颜色应该一致，让用户可以容             易地确定不同文本和颜色所代表的内容。

                选择的字体应和整个界面应融为一体；一旦已经为某些元素选择了字体，应该保证其在整个网站中应用的一致性。

                网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。

                通过合理设置页边框、行间距等，使Web界面产生丰富变化的外观和感觉。

                应该重视标题的处理。标题一般无分级要求，其字形一般较大，字体的选择一般具有多样性，字形的变化修饰则更为丰富。

       动画与多媒体：

       导航：

4.Web界面设计的基本技术和工具（第二版P175）

    超文本标记语言HTML  和CSS (Cascading style sheets层叠样式表)

    C#

     客户端脚本语言JavaScript

    JavaApplet

    服务器端脚本语言 ASP PHP JSP

    页面编辑器、辅助工具（第一版 P192）

5.Web界面设计的新技术（第一版 P193）

    Web 3D图形技术

    语音Web技术

6.实例分析（第一版 P198）

    商业站点

    信息站点

    娱乐站点

    门户站点

8.交互设计指南 12点