网页设计内容【交互篇】-2.ppt

《网页设计内容【交互篇】-2.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、标题:字体:微软雅黑粗体字号:32-36pt颜色:主题蓝色副标题:字体:微软雅黑字号:24pt颜色:主题灰色网页设计：从界面布局到视觉表现基础篇界面交互篇视觉表现篇综合案例篇界面交互篇用户体验研究信息架构设计界面与布局4.信息结构与交互4.1网站的信息结构4.2网站整体结构到界面架构4.3案例——活动页面设计4.1.1信息结构的概念4.1网站的信息结构信息结构设计为信息内容提供了情境，它的目的是将若干信息有机的组织在一起，使用户能够更容易地查询获取所需信息。网站信息结构的核心要素包括网站的组合系统、导航系统、搜索系统、标识系统，各系统的具体内容如下：组合系统是负责组织网站的信息框架，

2、确定信息的组织系统分类，对网站内容进行逻辑分组，确定各组之间的联系。组合系统导航系统搜索系统标识系统导航系统是负责设置页面间的交互，通过标识和路径的显示，表明用户现在在哪，看过哪些页面，如何去目标页面等。组合系统导航系统搜索系统标识系统搜索系统是负责用户对信息的查询搜索。通过提供搜索引擎或一定的检索条件对网站内容进行搜索，最终展示搜索结果。组合系统导航系统搜索系统标识系统标识系统是负责网站信息名称的定义与表述，如对标题、图形、索引项、导航等的标识的标引名称、标签及描述。组合系统导航系统搜索系统标识系统4.1.2网站信息组织方式网站的组织方式是指将信息组合成有意义而且各具特色的类别。网

3、站的设计者需要在研究用户思维模式的基础上，对信息的内涵进行概括和抽取，运用合理的组织方式使信息以人们熟悉或易于接受的方式展示出来。在组织方式中最为关键的是组织体系，也称分类依据，是指网站是以什么为标准来进行分类的。按照精度来划分，组织体系分为精确性组织体系与模糊性组织体系两种。常见的精确性组织体系有：按字母顺序、按年代顺序、按地理位置。常见模糊性组织体系有：按主题，按任务、按用户、按隐喻。国家地理杂志网站首页的左侧焦点栏目就是按照主题来分类，通过单击左侧的主题文字可在右侧切换浏览对应的图片，若对图片感兴趣即可点击图片进入主题页面。服务众包平台猪八戒网在用户注册成功后的“新人上路”页面

4、，就是按照用户来分类，页面中分有两种角色：一个是雇人办事的雇主，另一个是接单赚钱的服务商。点击相对应的图片链接入口，即可跳转进入对应的用户页面。由于两类用户对于猪八戒网站的需求不同，即雇主更加关心如何发布需求，服务商更加亲睐如何开店接单，因此这种按用户分类的方式设置入口极大的满足了不同用户群的需求。4.1.3信息结构的类型在网站界面信息中，不同的层级、不同的功能，分类依据可能会不一样，而从组织方式的维度出发，常见的有四种类型：层次结构，矩阵结构，线性结构，自然结构。层次结构矩阵结构线性结构自然结构层次结构也叫树形结构，它通过树状图的方式对一个事物的结构进行逐层分解，一般是从父级向子集

5、深挖，有时也可能是自下而上或者是双向的。比如京东网的商品组织方式就使用了层级结构，尽管其功能繁杂，但使用起来却不会一头雾水。从首页左侧的固定菜单我们即可看到该网站的层级结构，一级菜单将“全部商品分类”分为了15个部分，这是层级结构的最顶层，当鼠标悬停一级菜单时会看到一级导航下的二级菜单及三级结构，而想看到更深层的结构则需要进入到二级页面中。层次结构矩阵结构线性结构自然结构矩阵结构的特点就是允许用户在节点与节点之间沿着两个或更多的“维度”移动，通常能帮助那些“带着不同需求而来”的用户，使他们能在一个页面中寻找各自想要的东西。如在去哪儿网中酒店团购页面，就较好地应用了矩阵结构，页面中提供

6、了“位置、分类、价格、服务”的热门筛选条件方便用户查找符合要求的酒店，用户还可以同时勾选多个条件进行精确搜素。层次结构矩阵结构线性结构自然结构线性结构是以时间为轴，设定好起点和终点后，中间所能发生的所有的事情都被设计成一种线性的体验。虽然它无法为用户提供在网站上的每个流程的细节，但至少它显示了你现在正处于关键线路的哪个点上。如南方航空公司官网上办理乘机手续页面，就是一步一步引导用户操作。层次结构矩阵结构线性结构自然结构自然结构不会遵循任何一致的模式。节点是逐一被连接起来的，同时这种结构没有太强烈的分类概念。自然结构对于探索一系列关系不明确或一直在演变的主题是很合适的。如淘宝网中猜你喜

7、欢的栏目就是典型的自然结构，它根据你浏览网页的历史记录，经过大数据分析而随机推荐商品。以上四种结构单一存在的形式并不多，大多数都是需要根据网站页面功能类型进行多种结构的组合。如可以针对基础内容创建网站的层级结构，然后利用矩阵结构将具体信息与某部分集成。4.2.1确定网站的导航4.2网站整体结构到界面架构理解了网站的信息的组织方式与信息结构后，接下来就是确定网站的导航栏目，再将信息对号入座的放置到它所在的功能页面中。设计开发人员可以借助一些思维导图软件如X-