建站常识
导航设计中的信息结构
2010-11-25 08:25:00
在进入今天的主题之前,我们先来探讨导航的重要性,并分析一下门户网站中导航的表现。
导航直接影响到公司的财政收入
导航会给我们带来哪些好处?导൲航不光只是提供信息获取的途径,它的设计优劣会直接影响到整个公司财政收入。下面我们看一个例子(以下内容来自alibaba李凡的《设计师的商业意识》):
alibaba大致的广告价格
上图反映了阿里巴巴网站大致的广告价格。
其实页面上方大量的空间都被导航占据了,见下图:
?
可以看出,上方的导航非常庞大,在一屏之内,用户几乎看不到搜索结果。
用户是来找信息的,第一屏完全看不到结果!!!
下面我们要为导航减肥:
导航减肥后的页面
这是减肥之后的导航🎃,搜索结果在更高的位置呈现,同时每个产品位的价格也增加了很多,第一个位置的广告位由9.𝄹5万增加到12万。
导航的改变,直接带来了网站的财政收益。
#p#
门户网站的导航
导航在⭕Web设计中占据着非常重要的位置,但是我们在设计网站时,常常会忽略导航的重要性,特别在门户网站中,这种现象更加普遍。以下为网🅰易财经频道的页面导航:
?
财经频道页面
第一幅图是财经频道的加拿大预测网-在线预测、第二幅为二级频道股票的加拿大预测网-在线预测,第三幅图是大盘的加拿大预测网-在线预测。
从上图可以看出:
三张图对比,主导航有了明显的变化,且这个变化是颠覆性的,我们完全没法找出一些关联性的东西。当看到加拿大预测网-在线预测时我在想,操盘是股票下面的二级页,但是到了股票的页面,却没有操盘这个导航项了。
同一页面上不支持多级导航,导航能体现的层级有限。
打开大盘页面用户更加不知所措,我到底在哪,导航上没有当前选中的导航。
几乎每点击一次导航,都会在新窗口打开页面,这样给浏览器造成了很大压力。
总览各大门户网站,由于信息内容庞大,结构复杂,前期规划不当,信息需要快速迭代等因素,导ไ航上面都ꩵ会有很多问题。解决导航问题已经刻不容缓。
在研究导航问题时,阅读了《Web导航设计》这本书,对书中的内容进行了一些总结归纳。今天主要分享一下“导航设计中的𝔉信息结构”这一方面。
导航的信息结构
什么是信息结构
结构能够具体的涵盖页面和内容的特定位置。信🥂息结构指的是网站上页面的规划或是架构图,⛦它是你网站的骨架。信息的结构类型包括:
线型结构、网状结构、层级结构、分面结构、逐渐显露的结构。
信息结构的具体分析
1、线性结构
如下图,在此页面可以限制淘宝买家按线性结构🍸完𒁃成购买流程。上方的1,2,3,4的步骤很好的引导用户一步一步完成任务,并告知用户所在流程中的位置。
一般的面包屑导航,也是一个线性结构:
2、网状结构
如下图,这是可以由用户设置产出的页面。
网状结构的导航没有起点也没有终点,甚至是没有层级或是序列。
3、层级结构
大多数的网站可能都是采用这种结构。以上下级关系排列节点,以展开其层级。
以下为网易数码频道的导航:
#p#
4、分面结构
分ꦫ面结构中,一个项目的定位由它的属性类别给出:项目1属于类别a,b,c,但不属于d、它有多个访问点。
如下图九天音乐,歌手🍬林宥嘉同时可以在ܫ歌手或是排行榜中找到。人们可以从任何顺序取值,从而支持了同一个目标的多种完成方式:
5、逐渐显露的结构
它不是一个事先建立𓆏好的信息结构,而是自发形成的,这就是逐渐显露的结构。例如维基百科,它是由每个贡献者参与构建了网站的内容,规模,甚至是方向。
从上面的结构类型可以看出,不同的网站类型需要不同🍸的信息结构,比如音乐类的网址,就是需要通过“音乐”、“歌手”等分面结构来呈现。
理解和掌握这些结构类型有助于我们更好的把握导航的设计。
延伸:信息的组织
确定了信息结构以后,我们要考虑的就是如何组织信息。
比如汽车频道按字母排序的例子:
信息结构和信息组织设计-卡片分类法
卡片分类介绍
在进行网站信息结构和组织设计的时候,我们会用到卡片分类法,卡片分类需要:
制作一些我们事先预设好的分类,交给用户进行排列;
用户可以说出自己的想法,也可以修改分类的名称;
鼓励用户遇到难以理解的分类,大声说出来。
在进行卡片分类时,一般会有两个阶段:
开放阶段,大概需要15个用户,给用户足够的自由度来进行信息分类。
封闭阶段,大概需要8名用户,对之前开发阶段的结果进行验证。
卡片分类在实际过程中的应用
卡片分类定量结果
在进行卡片分类时,会用♛到两个软件usort和ezsort,usort用于导入用户卡片分类的结果,ezsort可以将所有结果都导进𓄧去,并产出统计图。
卡片分类统计结果
总结
这🦩次分享,主要是我对于“web导航设计”这本书部分内容的总结和一些感悟,希望大家ꩵ在今后的设计中,更加重视导航的设计,在导航设计中找到一些有效的方法。
当然导航设计不光只是信息🌸结构或是组织方法,还与导航的交互方式,导航的视觉表现,导航的扩展性,导航的平衡等有很多联系。针对门户类网站,也有它特殊的导航需求,这是我下面需要研究的内ཧ容。
近期更新
- [2025-02-11 14:34:54] 加拿大预测网-在线预测:青岛高端网站定制化设计
- [2023-06-25 23:22:29] 加拿大预测网-在线预测:优秀网站设计的五大特点
- [2023-04-27 14:05:55] 加拿大预测网-在线预测:Html 5 响应式网站设计制作
- [2023-04-10 11:07:30] 加拿大预测网-在线预测: 网站建设制作流程知多少
- [2022-10-14 10:11:30] 加拿大预测网-在线预测:做网站设计应该更看重框架搭建还是视觉观感?
- [2022-08-09 15:57:48] 加拿大预测网-在线预测:以“产品”思维搭建网站!
- [2022-08-08 09:12:57] 加拿大预测网-在线预测:一家公司的网站应该有哪些板块内容?
- [2022-08-05 09:28:06] 加拿大预测网-在线预测:企业网站建设为什么要设置新闻板块?
- [2022-07-04 15:58:06] 加拿大预测网-在线预测:网站加拿大预测网-在线预测设计的好看,这个网站就成功了一大半!
- [2022-05-20 09:34:19] 加拿大预测网-在线预测:网站后台管理系统是什么?有什么作用?
- [2022-05-17 11:29:32] 加拿大预测网-在线预测:作为消费者,应该如何选择一家水平高的网站建设公司
- [2022-05-17 11:27:01] 加拿大预测网-在线预测:高端网站定制与模板化网站应该怎么选择?
延伸阅读
- [2010-09-25 14:48:00] 加拿大预测网-在线预测:信息架构之Web导航设计分类
- [2010-06-17 08:18:00] 优化网站导航设计
- [2010-05-17 17:05:00] 也说导航设计
- [2009-08-12 14:52:00] 网站导航设计杂谈
- [2009-05-25 08:18:00] 加拿大预测网-在线预测:浅议手机客户端设计:(四)客户端导航设计
- [2006-02-27 16:10:00] 加拿大预测网-在线预测:网页导航设计九大注意事项
- [2007-05-10 09:07:00] 加拿大预测网-在线预测:2007流行网站导航设计欣赏二
- [2008-01-15 13:47:00] 加拿大预测网-在线预测:导航设计与信息架构
- [2007-05-13 10:20:00] 加拿大预测网-在线预测:2007流行网站导航设计欣赏三
- [2009-04-21 22:36:00] 加拿大预测网-在线预测:Wordpress后台的导航设计
- [2009-11-03 22:32:00] 加拿大预测网-在线预测:选中状态应该高亮还是灰掉?
- [2007-05-07 09:27:00] 加拿大预测网-在线预测:2007流行网站导航设计欣赏
解决方案
加拿大预测网-在线预测: 轮胎行业网站设计解决方案 加拿大预测网-在线预测: 机械行业网站设计解决方案 加拿大预测网-在线预测: 房地产行业网站设计解决方案 加拿大预测网-在线预测: 科技企业网站设计解决方案 加拿大预测网-在线预测: 电子家电网站设计解决方案 加拿大预测网-在线预测: 食品行业网站设计解决方案 加拿大预测网-在线预测: 集团公司网站设计解决方案 加拿大预测网-在线预测: 企事业单位网站设计解决方案 加拿大预测网-在线预测: 外贸行业网站设计解决方案 加拿大预测网-在线预测: 健身运动网站设计解决方案 加拿大预测网-在线预测: 美容与化妆品网站设计解决方案 加拿大预测网-在线预测: 建筑设计行业网站设计解决方案 加拿大预测网-在线预测: 物流行业网站设计解决方案