Web界面设计基本原则 2.一致性 口内容一致:Web网站显示的信息、数据等 a形式致:Web界面设计的版式、构图、布局、色彩以及它 们所呈现出的风格特点 PIXAR PIXAR an RAT Mike Wants You! Partly Cloudy A出mk 山东子 SHANDONG UNIYEKSETY
Web界面设计基本原则 ◼ 2. 一致性 ❑ 内容一致：Web网站显示的信息、数据等 ❑ 形式一致：Web界面设计的版式、构图、布局、色彩以及它 们所呈现出的风格特点
Web界面设计基本原则 aWeb界面自身的风格也要一致性 ■各页面使用相同的页边距;文本、图形间保持相同的间距 各页面上都放上公司或网站的统一标志 各页面应当使用相同的导航图标; 页面中的每个元素与整个页面以及站点的色彩和风格上保持一 致性 文字的颜色要同图像的颜色保持致并注意色彩搭配的和谐。 山东大学计算机学院 子 SHANDONG12VEXstTY
Web界面设计基本原则 ❑ Web界面自身的风格也要一致性 ◼ 各页面使用相同的页边距；文本、图形间保持相同的间距； ◼ 各页面上都放上公司或网站的统一标志； ◼ 各页面应当使用相同的导航图标； ◼ 页面中的每个元素与整个页面以及站点的色彩和风格上保持一 致性； ◼ 文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。 山东大学计算机学院 12
Web界面设计基本原则 3.简洁与明确 使用一个醒目的标题,这个标题常常采用图形来表示,但图 形同样要求简洁。 限制所用的字体和颜色的数目 界面上所有的元素都应当有明确的含义和用途,不要试图用 无关的图片把界面装点起来。 尽量减少浏览层次 Google 谷歌 Goge搜索|手气不错 265导航 图75G0oge首页(htp/ ww.google. com,2009年9月) 山东大学计算机学院 山子 SHANDoNe13: VEXSETY
Web界面设计基本原则 ◼ 3. 简洁与明确 ◼ 使用一个醒目的标题，这个标题常常采用图形来表示，但图 形同样要求简洁。 ◼ 限制所用的字体和颜色的数目。 ◼ 界面上所有的元素都应当有明确的含义和用途，不要试图用 无关的图片把界面装点起来。 ◼ 尽量减少浏览层次 山东大学计算机学院 13 图7-5 Google首页（http://www.google.com，2009年9月）
Web界面设计基本原则 4.体现特色 ¤清楚地了解Web网站背景、体现主题和服务对象的基本情况 选择合适的表现手法,展示关键信息和特色内容,并形成 独特、鲜明的风格。 i大学 2 Enghsh2热团 学校截况|获系设置|管理机构|科学研究|款师队伍|人才培养1招生就业 回省理工务长访问华 ●华公共程学气苗公共理士缺量 学生活动|招聘信息|图节档素|合作交流!产学研|信息资源|服务指南|校内信思 公告:渣大学20年专上技木号西得抗位么开题 大国 图7-6清华大学首页(http:lwww.tsinghua.edu.cn/,2009年9月) SHANDONG UNIYEKSETY
Web界面设计基本原则 ◼ 4．体现特色 ❑ 清楚地了解Web网站背景、体现主题和服务对象的基本情况 ，选择合适的表现手法，展示关键信息和特色内容，并形成 独特、鲜明的风格。 图7-6 清华大学首页（http://www.tsinghua.edu.cn/，2009年9月）
Web界面设计基本原则 5.兼顾不同的浏览器 口不同浏览器类别和版本在功能支持上有所区别 三岛 On Figure 4: Summary Thumbnails can be adapted to arbitrary screen and font sizes. Here the same web page is shown on mockups of different devices SHANDONG UNIYEKSETY
Web界面设计基本原则 ◼ 5．兼顾不同的浏览器 ❑ 不同浏览器类别和版本在功能支持上有所区别