2网站的用户体验与界面设计

《2网站的用户体验与界面设计》由会员分享，可在线阅读，更多相关《2网站的用户体验与界面设计（45页珍藏版）》请在金锄头文库上搜索。

1、电子商务网站开发 与管理 唐四薪 主编 人民邮电出版社 http:/ ISBN:9787115282491 2012年8月第2章网站的用户 体验与界面设计 目 录 v2.1 用户体验设计 v2.2 网页的界面设计 v2.3 遵循Web标准的网页设计原理 v2.4 HTML与XHTML v2.5 CSS基础2.1 用户体验设计 v用户体验（User Experience，简称UE或UX） 是一种纯主观的，在用户使用一个产品（或服务） 的过程中建立起来的心理感受。 用户户 分析设计设计用户测试户测试 专专家评测评测目标标用户户定位 分析用户户需求 分析用户户任务务设计设计 概念 明确细节细节 构架

2、原型真实实用户测试户测试 设计专设计专 家再评评 界面设计到用户体验设计的发展 界面设计（UI）界面设计（UI）+ 交互设计（ID）用户体验设计 （UED）视觉+艺术设计的对象是产品本身视觉+交互设计的对象是产品本身视觉+交互+用户的感受 设计的对象是整个用 户体验的过程用户体验要素 表现层视觉设计框架层结构层交互设计 信息架构范围层功能规格 内容需要战略层用户需求 网站目标界面设计 导航设计 信息设计具体抽象完成概念2.1.3“以用户为中心”的用户体验设计（1）感官体验：呈现给用户视听上的体验，强调 舒适性。 （2）交互体验：呈现给用户操作上的体验，强调 易用/可用性。 （3）情感体验：呈现

3、给用户心理上的体验，强调 友好性。 （4）浏览体验：呈现给用户浏览上的体验，强调 吸引性。 （5）信任体验：呈现给用户的信任体验，强调可 靠性。网页的界面设计 网页版式布局 vT型布局 v“口”型布局 v分栏布局 v“POP”布局 网页版式设计的基本原则 v 网页中的文字应采用合理的字体大小和字形 。 v 确保在所有的页面中导航条位于相同的位置 。 v 确保页头和页尾部分在所有的页面中都相同 。 v 不要使网页太长，特别是首页。 v 确保浏览器在满屏显示时网页不出现水平滚 动条。 v 要在网页中适当留出空白 网页版面布局的方法 v框架布局 将浏览器窗口分割成几部分，每部分 放一个不同的网页（示

4、例） v表格布局 将网页元素装填入表格内实现布局， 表格相当于网页的骨架，因此表格布局的步 骤是先画表格，再往表格里填内容。 vDIVCSS布局用盒子布局，利用网页元素本身的盒 子模型，通过盒子在页面上的排列和嵌套进 行布局。布局的含义v网页版面布局是网页设计中的一项重要内容。版 面指的是浏览器看到的完整的一个页面。因为每个 人的显示器分辨率不同，所以同一个页面的分辨率 可能出现800*600像素，1024*768像素等。 v布局，就是以最适合浏览的方式将图片和文字摆 放在页面的不同位置。网页版面布局是指定网页内 容在浏览器中的显示方式，例如徽标的位置、导航 栏的显示、主要内容的排版等。经常用

5、到的版面布 局结构主要有以下几种：常见网页的版式v 131式v 121式v 艺术版式v1-3-1式 v示例Logo banner导航条（Navigator)Bottom(版权信息）栏目1栏目2栏目3用表格实现用CSS布局 实现表格布局的原则v各栏目之间必须相对独立，方法是把每个栏目装 在一个单独的表格中，这样修改一个栏目时不会对 其他栏目产生影响 v各栏目之间必须用占位表格(或CSS边界）留出 一定的空隙 v栏目采取纵列的形式排列网页的配色v网页不只是传递信息的媒介，同时也是网络上的 艺术品。如何让浏览者以轻松惬意的心态吸收网页 传递的信息，是一个值得研究的课题。 v任何网页创意使用的视觉元素

6、总的归纳起来不外 乎三种：文字、图像、色彩。三者选用搭配的适当 ，编排组合的合理，将对网页的美化起到直接的效 果。色彩的4种角色v 主色调页面色彩的主要色调、总趋势，其他配色不能超过该主要色 调的视觉影响 v 辅色调仅次与主色调的视觉面积的辅助色，是烘托主色调、支持主 色调、起到融合主色调效果的辅助色调。 v 点睛色 在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜 明生动。 v 背景色 衬托环抱整体的色调，协调、支配整体的作用。Web标准vWeb标准是由W3C（World Wide Web Consortium）建立的一组标准 v网页由结构，表现和行为组成v基于Web标准的网页制作就是说

7、要将网页 的这三个组成部分严格分离内容、结构和表现的含义v1内容：内容就是页面实际要传达的真正信息 ，包含数据、文档或者图片等。注意这里强调的“ 真正”，是指纯粹的数据信息本身。 v如：忆江南(1)唐.白居易江南好，风景旧曾谙。 (2)日出江花红胜火，春来江水绿如蓝，(3)能不忆 江南。作者介绍772846 ，字乐天，太原人。唐 德宗朝进士 v2结构：可以看到上面的文本信息本身已经完 整。但是混乱一团，难以阅读和理解，我们必须给 它格式化一下。把它分成标题、作者、章、节、段 落和列表等。 Web标准结构v标题 忆江南(1) 作者 唐.白居易 正文 江南好，风景旧曾谙。(2) 日出江花红胜火，春

8、来江水绿如蓝，(3) 能不忆江南。 节1作者介绍 772846 ，字乐天，太原人。唐德宗朝进士 Web标准表现 v 表现（Presentation）：虽然定义了结构，但是内容还是 原来的样式没有改变，例如标题字体没有变大，正文的颜色 也没有变化，没有背景，没有修饰。所有这些用来改变内容 外观的东西，我们称之为“表现” 行为v行为：就是对内容的交互及操作效果。例如，使 用JavaScript可以响应鼠标的点击和移动，可以判 断一些表单提交，使我们的操作能和网页进行交互 。 网页的组成行为层 内容如何对事件做出响应表现层 内容如何显示结构层 内容的语义内容层 内容网页是由四层信息构成的一个共同体：

9、Web标准的实现p结构标准语言 （1）XML （2）XHTML p表现标准语言 CSS（Cascading Style Sheets，层叠 样式表） p行为标准语言 JavaScript Web标准网页示例结 构表 现行 为XHTMLCSSJavaScript(X)HTML文档的基本结构：告诉浏览器HTML文档开 始和结束的位置，其中包括head部分和body 部分。HTML文档中所有的内容都应该在这 两个标记之间，一个HTML文档总是以 开始，以结束。：HTML文件的头部标记，头 部主要提供文档的描述信息，head部分的所有 内容都不会显示在浏览器窗口中，在其中可以 放置页面的标题以及页面的

10、类型、使用的字符 集、链接的其它脚本或样式文件等内容：用来指明文档的主体区域 ，网页所要显示的内容都放在这个标记内， 其结束标记指明主体区域的结束 HTML标记 的分类p头部标记：title, meta, link, style p文本标记：font, b, i, u , strong, p段落标记：p, hn, pre, marquee, br, hr p列表标记：ul, ol, li, dl, dt, dd 5)超链接标记：a, map, area 6)图像及媒体元素标记：img, embed, object 7)表格标记：table, tr, td, th, tbody 8)表单标记：f

11、orm, input, textarea, select, option, fieldset, legend 9)框架标记：frameset, frame, iframe 10)容器标记：div, span表格布局综合案例制作太阳能网站 把网页分为上下两部分装在表格中LogoBannerCopyRight xxxx xxxxBanner图片制作网页的头部 v插入一个一行两列的表格，将表格的宽设为852 ，高设为104 v将第一个单元格宽设为161，背景色设为 #99cc00 v在第二个单元格插入一张图片images/logo.jpg制作网页的主体部分 v 设置第一个单元格高为41，背景图像为i

12、mages/bj.jpg， 再在该单元格中插入一幅图像images/ggd.jpg，可看到背 景图像和图像很好的融合在了一起。 v 设置第二个单元格高为21，起占位的作用。 v 在第三个单元格中插入公司简介的文本。 v 在文本中间插入一副图像，设置该图像对齐方式为右对 齐。 v 现在网页主体已基本呈献，下面进行一些微调。可看到 此时栏目文本与banner图像紧挨在一起，不美观，在两者 之间插入一个占位表格，设置该表格宽位100，高为16。 v 在文本表格下插入一条水平线，设置其宽为90，高为1 ，居中对齐，无阴影。 v 再在下面插入一段版权文本。 v 在网页banner上插入一副flash。

13、v 用CSS设置网页主体的右边框线 v 用CSS设置文本样式在该表格下再插入一个一行两列的表格，将宽设为852，将 第一个单元格宽设为161，高设为817，背景色设为 #99cc00 在该表格中插入一个一行一列的表格，作为导航栏的背景 ，宽设置为100，高设置为181，将其单元格的背景色设 为#00801b 在该表格中插入一个一行六列的表格，将宽设为143，和导 航图片等宽，将表格设为居中对齐。 在该表格的每个单元格中分别插入一个导航图片，并分别 将这些图片先链接到。 在右边的单元格中插入一个一行一列的表格，设置该表格 宽为688，高为181。将背景图像设置为images/ba1.jpg 插入

14、一个一行3列的表格，将宽设置为902.5 CSS基础vCSS（Cascading Styles Sheets，层叠样式表 ），是用于控制网页样式并允许将样式信息与网页 内容分离的一种标记性语言 v一条CSS样式规则由选择器（selector）和声明 （declarations）组成 h1color: red;font-size: 25px;选择器属性值属性值声明声明最常用的CSS属性 CSS属性含义义举举例font-size字体大小font-size:14px;color字体颜颜色color:red;line-height行高line-height:160%;text- decoration文

15、本修饰饰（如增删删下划 线线）text- decoration:none;text-indent文本缩进缩进text-indent:2em;background -color背景颜颜色background- color:#ffeeaa;CSS布局的案例重构太阳能网站 用DIV+CSS重构该网站h1#headerh1#container#nav#banner#copyright#title#intr#intro#content总结CSS网页布局的步骤v用CSS对网页进行布局的基本步骤如下： （1）将页面用div分块（页面标题和栏目 标题可用h1或h2元素）； （2）通过CSS设置各块的大小 （利

16、用width和height属性） 和位置 （利用padding和margin属性）， 以及相互关系（是否浮动或定位）；表格布局和DIV+CSS布局的比较 表格布局CSS+DIV布局布局方式将页页面用表格或单单元格分 区将页页面用div等元素分块块控制元素 占据的空 间间大小通过过标记标记 的width和 height属性确定通过过CSS属性width和 height确定控制元素 的位置在单单元格前插入指定宽宽度 的单单元格使元素位置向右 移动动，或插入行或占位表 格使元素向下移动动设设置元素的margin属性或 设设置其父元素的padding属 性使元素移到到指定位置图图片的位 置只能通过图过图 片所在单单元格 的位置控制图图片的位置既可以通过图过图 片所在元素 的位置确定，又可以使用 背景的定位属性确定图图片 的位置使用DIV+CSS布局制作网站实例 v制作一个网站主要应制作三个页面，即首页、分 栏目首页和内页，