当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 总结网站导航怎么设计才好呢?

心得技巧
网页设计师学习网页设计的经验和技巧小结
10个优秀的 Web UI库/框架
40个CSS/JS风格和功能技术处理
最佳网页宽度及其兼容实现方法
让你了解HTML及资源是如何加载的
flex程序Firefox下中文输入乱码的bug
网页制作常用英文字体
在iframe框架中打开页面的方法
企业网站与栏目字典 中英文对照 做中英双语企业网站的朋友需要
前端开发大众手册(包括工具、网址、经验等)
iframe在IE6下出现横向滚动条的解决方案
IE6中奇数宽高的BUG
IE6中PNG Alpha透明(全集)
交互设计理论:良好的交互设计的三要素
互联网产品设计:启发式评估
B2C网站用户体验设计:Checkout(结帐流程)设计
40个2010年网页设计趋势单页布局实例
讨论基于B/S架构开发项目的原型工具
用户体验设计:UED设计流程和方法
网页设计参考:23个出色的蓝色系网站设计

心得技巧 中的 总结网站导航怎么设计才好呢?


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-01   浏览: 54 ::
收藏到网摘: n/a

导航,路标和找路

     了解导航在互联网上很多分析的例子,但是讨论的焦点的目的都是一个——“不要迷路”。
从导航说起,一般都会联想到路标,因为用户要找路,就想到了标识!

网页常规的标识包含:
    页面和窗口标题
    网页标识(logo)
    其他有标记的设备
    Tab
    选择指示器

标识使用到的模式:
    全局导航
    颜色编码的栏目
    序列地图
    面包屑层级结构
    注释滚动条

如何找路呢?
    运用良好的标记
    环境线索
    地图

    Jenifer提到有清晰的入口点模式结合良好的标记及环境线索的例子——链接必须在页面上突出显示。一个有序的地图,使用总览加细节,形成一个空间显示地图。

    总结导航如何好呢——让距离保持简短,避免太多的跳转!

清晰的入口点

what:只在界面上显示几个入口;让它们面向任务,并具有自描述性。
Where:当你正在设计一个面向任务的应用,或者其他任何主要供新用户或不常访问的用户使用的应用时,可应用此模式。
Why:网站要清晰的展现给用户信息和结构,大量平铺的面板,毫不相关的信息(广告等)都不能使用工具条。提供清晰的目的去口。
How:运用大门的概念,入口处很清晰的几点重要的导航。标准例子就是google,首页上集中处理好一件事。用户很明确ta能做什么。

图例:http://home.ingdirect.com/

序列地图What:在一系列页面上的每一页上,显示一幅地图,把所有的页面按顺序排序在改地图,包括“你在这里”的位置指示器。
Where:用户访问的路径是线性的。按照顺序一页一页访问的。但是太多的层次就不能使用了,要使用面包屑了。(具体几个层次jenifer没有提到,个人觉得超过5-6步就要改了把!)
Why:用户在按步骤走的时候迷路的可能很小,最担心的反而是还要走多久才到头。接下来我还要做什么。
How:那就采用步骤地图方式设计,用颜色深浅标识当前所在,用箭头等标识标记下游的方向。例如很多注册流程是这样的。

图例: