电子商务网站开发与管理 教学课件 作者 唐四薪 谭晓兰 屈瑜君 2网站的用户体验与界面设计.pptVIP

电子商务网站开发与管理 唐四薪 主编 人民邮电出版社 第2章网站的用户体验与界面设计 目 录 2.1 用户体验设计 2.2 网页的界面设计 2.3 遵循Web标准的网页设计原理 2.4 HTML与XHTML 2.5 CSS基础 2.1 用户体验设计 用户体验（User Experience，简称UE或UX）是一种纯主观的，在用户使用一个产品（或服务）的过程中建立起来的心理感受。 界面设计到用户体验设计的发展 用户体验要素 2.1.3“以用户为中心”的用户体验设计 （1）感官体验：呈现给用户视听上的体验，强调舒适性。 （2）交互体验：呈现给用户操作上的体验，强调易用/可用性。 （3）情感体验：呈现给用户心理上的体验，强调友好性。 （4）浏览体验：呈现给用户浏览上的体验，强调吸引性。 （5）信任体验：呈现给用户的信任体验，强调可靠性。 网页的界面设计 网页版式布局 T型布局 “口”型布局 分栏布局 “POP”布局 网页版式设计的基本原则 ① 网页中的文字应采用合理的字体大小和字形。 ② 确保在所有的页面中导航条位于相同的位置。 ③ 确保页头和页尾部分在所有的页面中都相同。 ④ 不要使网页太长，特别是首页。 ⑤ 确保浏览器在满屏显示时网页不出现水平滚动条。 ⑥ 要在网页中适当留出空白 网页版面布局的方法 框架布局 将浏览器窗口分割成几部分，每部分放一个不同的网页（示例） 表格布局 将网页元素装填入表格内实现布局，表格相当于网页的骨架，因此表格布局的步骤是先画表格，再往表格里填内容。 DIV＋CSS布局 用盒子布局，利用网页元素本身的盒子模型，通过盒子在页面上的排列和嵌套进行布局。 布局的含义 网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现800*600像素，1024*768像素等。 布局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主要内容的排版等。经常用到的版面布局结构主要有以下几种： 常见网页的版式 1－3－1式 1－2－1式 艺术版式 1-3-1式 示例 表格布局的原则 各栏目之间必须相对独立，方法是把每个栏目装在一个单独的表格中，这样修改一个栏目时不会对其他栏目产生影响 各栏目之间必须用占位表格(或CSS边界）留出一定的空隙 栏目采取纵列的形式排列 网页的配色 网页不只是传递信息的媒介，同时也是网络上的艺术品。如何让浏览者以轻松惬意的心态吸收网页传递的信息，是一个值得研究的课题。 任何网页创意使用的视觉元素总的归纳起来不外乎三种：文字、图像、色彩。三者选用搭配的适当，编排组合的合理，将对网页的美化起到直接的效果。 色彩的4种角色 ■ 主色调　　页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉影响 ■ 辅色调　　仅次与主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。 ■ 点睛色 　　在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。 ■ 背景色 　　衬托环抱整体的色调，协调、支配整体的作用。 Web标准 Web标准是由W3C（World Wide Web Consortium）建立的一组标准 网页由结构，表现和行为组成 基于Web标准的网页制作就是说要将网页的这三个组成部分严格分离 内容、结构和表现的含义 1．内容：内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。 如：忆江南(1)唐.白居易江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。作者介绍772－846 ，字乐天，太原人。唐德宗朝进士 2．结构：可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。 Web标准－结构 标题 忆江南(1)作者 唐.白居易正文江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。节1作者介绍772－846 ，字乐天，太原人。唐德宗朝进士 Web标准－表现 表现（Presentation）：虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现” 行为 行为：就是对内容的交互及操作效果。例如，使用JavaScript可以响应鼠标的点击和移动，可以判断一些表单提交，使我们的操作能和网页进行交互。 网页的组成 Web标准的实现 结构