网页导航设计

网页导航设计
一、什么是导航系统
回忆一下，黄金周你去某个不熟悉的国家度假，有没有找不到路的情况？
回忆一下，你去逛卢浮宫，里边的道路很多，你很难到哪一条是你来时的路
很多时候我们需要生活中的这些导视系统，或者导航才能找到正确的方向
在国外的朋友突然给我发来一条链接，让我帮他看看买哪款手机比较合适
我在哪个页面？我怎么查看其他的手机在哪？回到主页后怎么再找到这个页面？
导航系统
是如何通过导航信息来浏览或者操作网站的系统
是让用户知道自己在哪、可以去哪的系统
组织系统和导航系统的关系是什么？
我收藏了这首歌，我想去“我的音乐“看看是否成功
导航让信息跨越组织结构，人们可以在整个网站中自由穿梭
导航设计需要兼顾灵活性和避免混乱
二、网页导航
1.全局导航
网页中的导航 每一页都会显示全域导航系统
2.局部导航
局部导航系统和其内容 被称为“子网站”或“网站中的网站”
3.全局导航+局部导航
很多网站会把全局导航和局部导航 结合使用 ——巨型菜单
4.情景导航
有节制地使情景式导航可以增加灵活性来弥补现有导航系统的不足
它提供了了交叉销售、提升销售、打造品牌和提供顾客价值的真正机会
5.辅助导航
不属于网站的层级结构，但是可以提供查找内容和完成任务的辅助方法
1.站点地图

lynda的网站，所有课程的的字母索引，帮助标清晰的用户找到所要的信息。
https://lynda/subject/all
6.其他导航
1.指南
导游、教程、针对特定用户、主题或任务走查；
为新手介绍有关网站内容和功能的工具
2.个性化
我们才用户想要什么
3.有好导航
提供用户不常用的链接，以便在需要的时候提供便利，比如法律信息、反馈等
4.自定义
用户告诉我们他们想要什么
三、如何设计网页导航？
苹果官网的组织系统
用站点地图的方式来组织内容信息
工具网址：https://slickplan/
页面的组织方式一：
页面的组织方式二：
命题
我们要为城市白领设计一个音乐app
用用户故事检查功能是否完成
用信息框架灵活设计页面
四、几种组织架构和导航设计
1.单页面 flatsingle page
所有内容信息的页面站点都放在同一个页面，一个页面分成好几个部分
网址：https://getobachan/
2.线性层级 sequence site
一般是任务型的网站，以完成任务为目标
网址：teambition
3.扁平层级 flat
十个面以内，个面都是可以相互交叉访问的，只有一层导航，般是个人或小型机构的网站，
这类站需要保证内容不会有幅度增长
网址：http://momentomultimedia/
网址：https://superduper.wtf/#stuff_we_did
4.绝对层级 strict hierarchy
每个网站的面只能通过级网页访问，不能交叉访问
5.多维层级 multidimensional hierarchy
打破父子级关系，任何两个界面之间都有可能有交集，一个页面也可以和多个页面有交集
推荐
推荐书籍
《信息架构-超越web设计》《用户体验设计要素》
推荐线框图工具
balsamiq：
https://balsamiq/
超快速原型绘制工具，里面有很多组件可以直接使用，但是灵活度不够
axure：
https://axure/
是一个专业的快速原型设计工具， 让负责定义需求和规格、设计功能 和界面的专家能够快速创建应用软 件或web网站的线框图、流程图、 原型和规格说明文档
omnigraffle:
https://omnigroup/omnigraffle
omnigraffle可以用来绘制图表， 流程图，组织结构图以及插图， 也可以用来来组织头脑中思考的 信息，组织头脑风暴的结果，绘 制心智图，作为样式管理器，或 设计网页或pdf文档的原型
推荐线框图工具
sketch
https://sketchapp/
专业的界面设计软件，功能强大，插件更新速度快，操作体验不错