网页设计【交互篇】.ppt

第三，隐藏与转移。 不重要和不常用的功能隐藏起来。对于较为繁琐的功能内容可以分层或阶段性展示。彻底隐藏，适时出现。 如国内某电游网站导航栏的一级导航下的二级导航有固定区域，页面导航看起来略显繁杂，而电子游戏业巨头任天堂官网，功能十分强大，界面却十分简洁，它就是将信息都隐藏在导航菜单中，当鼠标悬停时能看到二级菜单，单击后跳转到二级页面。 4.3 案例——活动页面设计】 详情请参考微课视频。 END * 标题: 字体: 微软雅黑粗体 字号: 32-36pt 颜色: 主题蓝色 副标题: 字体: 微软雅黑 字号: 24pt 颜色: 主题灰色 网页设计：从界面布局到视觉表现 基础篇 界面交互篇 视觉表现篇 综合案例篇 界面交互篇 用户体验研究 信息架构设计 界面与布局 4.信息结构与交互 4.1网站的信息结构 4.2网站整体结构到界面架构 4.3 案例——活动页面设计 4.1.1信息结构的概念 4.1网站的信息结构 信息结构设计为信息内容提供了情境，它的目的是将若干信息有机的组织在一起，使用户能够更容易地查询获取所需信息。网站信息结构的核心要素包括网站的组合系统、导航系统、搜索系统、标识系统，各系统的具体内容如下： 组合系统是负责组织网站的信息框架，确定信息的组织系统分类，对网站内容进行逻辑分组，确定各组之间的联系。 组合系统 导航系统 搜索系统 标识系统 导航系统是负责设置页面间的交互，通过标识和路径的显示，表明用户现在在哪，看过哪些页面，如何去目标页面等。 组合系统 导航系统 搜索系统 标识系统 搜索系统是负责用户对信息的查询搜索。通过提供搜索引擎或一定的检索条件对网站内容进行搜索，最终展示搜索结果。 组合系统 导航系统 搜索系统 标识系统 标识系统是负责网站信息名称的定义与表述，如对标题、图形、索引项、导航等的标识的标引名称、标签及描述。 组合系统 导航系统 搜索系统 标识系统 4.1.2 网站信息组织方式 网站的组织方式是指将信息组合成有意义而且各具特色的类别。 网站的设计者需要在研究用户思维模式的基础上，对信息的内涵进行概括和抽取，运用合理的组织方式使信息以人们熟悉或易于接受的方式展示出来。 在组织方式中最为关键的是组织体系，也称分类依据，是指网站是以什么为标准来进行分类的。 按照精度来划分，组织体系分为精确性组织体系与模糊性组织体系两种。 常见的精确性组织体系有：按字母顺序、按年代顺序、按地理位置。 常见模糊性组织体系有：按主题，按任务、按用户、按隐喻。 国家地理杂志网站首页的左侧焦点栏目就是按照主题来分类，通过单击左侧的主题文字可在右侧切换浏览对应的图片，若对图片感兴趣即可点击图片进入主题页面。 服务众包平台猪八戒网在用户注册成功后的“新人上路”页面，就是按照用户来分类，页面中分有两种角色：一个是雇人办事的雇主，另一个是接单赚钱的服务商。点击相对应的图片链接入口，即可跳转进入对应的用户页面。由于两类用户对于猪八戒网站的需求不同，即雇主更加关心如何发布需求，服务商更加亲睐如何开店接单，因此这种按用户分类的方式设置入口极大的满足了不同用户群的需求。 4.1.3 信息结构的类型 在网站界面信息中，不同的层级、不同的功能，分类依据可能会不一样，而从组织方式的维度出发，常见的有四种类型：层次结构，矩阵结构，线性结构，自然结构。 层次结构 矩阵结构 线性结构 自然结构 层次结构也叫树形结构，它通过树状图的方式对一个事物的结构进行逐层分解，一般是从父级向子集深挖，有时也可能是自下而上或者是双向的。 比如京东网的商品组织方式就使用了层级结构，尽管其功能繁杂，但使用起来却不会一头雾水。从首页左侧的固定菜单我们即可看到该网站的层级结构，一级菜单将“全部商品分类”分为了15个部分，这是层级结构的最顶层，当鼠标悬停一级菜单时会看到一级导航下的二级菜单及三级结构，而想看到更深层的结构则需要进入到二级页面中。 层次结构 矩阵结构 线性结构 自然结构 矩阵结构的特点就是允许用户在节点与节点之间沿着两个或更多的“维度”移动，通常能帮助那些“带着不同需求而来”的用户，使他们能在一个页面中寻找各自想要的东西。 如在去哪儿网中酒店团购页面，就较好地应用了矩阵结构，页面中提供了“位置、分类、价格、服务”的热门筛选条件方便用户查找符合要求的酒店，用户还可以同时勾选多个条件进行精确搜