网页导航设计:让你的网站导航更扎实更清晰

文章描述:Web导航设计二三事。

导航在Web中扮演一个回答用户"我是谁?""我从哪里来?""我到哪里去"的角色。好的导航是一个网站的主要基石。而在开始设计一个网站或者改版一个网页时,它往往是设计师第一个面临的挑战。

01 导航设计之信息架构

信息架构决定了导航的定性,在设计之前整理清楚内容的信息架构,才能最大程度发挥导航的梳理网站结构、有效传递信息功能。网页结构一共有多少层级关系?是否存在上下层关系?各类别标签之间的关系是并列关系还是相关联的?各子级项中是否存在可合并项?等等。要避免单纯地按照简单的逻辑关系,甚至按照业务关系把页面导航细分到3级甚至4级或者产生出一些和用户认知不相符的信息类别。每增加一级导航就增加一个认知维度,每增加一级使得整个导航系统复杂度增加数倍,不仅用户的操作将成倍的增加,给网页后期维护的带来极大的成本。以下两种图示,就能清楚地看到相同数量页面的不同放置方式给用户带来不同的体验。

在web交互设计中存在"3次点击"的原则,用户在3次点击后无法找到想要的信息或完成某个功能时,便会选择放弃。所以对于导航来说,最基本的应该是让用户知道当前的页面有哪些内容,并且知道自己的目标内容在哪里。导航设计的广度和深度的区别展示,一般来说,广度比深度的效果要好。在深结构的各级别间选择更容易迷失方向,甚至可能迷路。但也不要在广度上铺的过广,任何时候把太多内容show出来都会吓退用户,让他们被迫患上了"选择综合症"。

为了更明确用户的认知或者甚至说在设计师面对改版等需求时,有助导航的创建和完善,常用的一个方法是卡片分类法。卡片分类法的进行方式很简单,首先准备一些大小相同的空白卡片,将信息写在不同的卡片上,让参与人员自行分类,也可有适当的解释性引导。每次测试的人数最好在2到4个之间,人数过少的话使用者之间不易产生讨论,人数过多则会让讨论变得混乱,场面不易控制。这是一种在在网站或其他规划初期常用的一个测试方法,能从中了解真正符合用户习惯的信息分类,找到之间的认知差异,作为调整架构的依据。

02 导航设计之交互样式

Web导航的最重要的作用就是将网站的内容信息友好地展示给用户。在确定好网站的信息架构后,应当按需所取适当的导航样式。而不是不管三七二十一,都来个tab式导航,觉得没有个横梁式的导航都不好意思说自己在做网页。首先我们了解一些常用的导航形式:

1. 分步导航 (Step navigation)通常由文字标签和箭头组成,也要伴随着向后退的链接。适用于环环相扣的页面流程,如向导,支付,在线阅读等,为一个接一个的页面提供访问。

(图示出自:Google.com 注册页面)

2.分页导航 (Paging navigation)经常出现在搜索页中,一次可展现的结果数目通常有限制,超出限制的结果将在新页面展现。最简单的分页导航就是带页码的分布导航。

(图示出自:阿里巴巴 我的阿里)

3.面包屑 (Breadcrumb trail)展示了用户访问网站的路线,由一大串的元素和节点组成。每个节点都与指向先前访问过的页面或父级主题相连,节点间以符号分隔,通常是大于号(>),冒号(:)或者竖线()

(图示出自:Apple.com)

[1] [2] [3] [4]  下一页

时间: 2024-12-05 23:05:01

网页导航设计:让你的网站导航更扎实更清晰的相关文章

网站导航设计经验分享:清晰的导航能够让页面简单易用

文章描述:网站导航设计经验分享:清晰的导航能够让页面简单易用. 导航是互联网产品中应用最广泛的基础元素之一,引导用户了解到网站的内容结构进而找到所求.作为基础控件,导航看起来简单,但却是产品设计中最复杂繁琐的一部分.因为我们想要让网站结构更清晰.想要向用户传达所有的信息,所以就赋予了导航越来越多的内容,使他们庞大异常,十分纠结.简化了,用户无法了解到页面结构以及自己的处境,产生困惑:复杂了,导航臃肿不堪,层峦叠嶂,既不美观也不好用. 那么,在清晰的信息架构下能不能让导航尽可能的更轻便.更灵动,是

如何设计好B2B行业网站导航栏提高易用性

导航栏是指位于页面页眉区域的一排水平导航文字或图片按钮,或者是位于页面左边或右边的一排导航文字或图片按钮.它起着链接B2B行业网站各个栏目的作用,或者链接一级栏目下面许多二级栏目的作用,让访问者能方便.快速的找到自己所需要的内容和功能. B2B行业网站的导航栏与其他网站的导航栏基本一样,不过还是有一些区别.判断一个B2B行业网站的导航栏是否符合要求,可以多参考一些大网站,比如新浪.腾讯.知名的B2B行业网站等,他们在设计的时候大部分还是遵守了网站建设的标准,下面讲解一些基本标准,以供我们在判断设

传统导航样式承担吃力 大型网站导航设计

原文作者:Paul Boag 简介 对于大部分网站,导航并不算是个挑战.一条主导航加条二级导航支撑,通常就足够了. 对于大部分网站,导航并不算是个挑战.一条主导航加条二级导航支撑,通常就足够了. 典型的做法是,二级导航显示出父.兄及当前子菜单.常显的主导航条显示最顶层的菜单,允许用户在菜单间切换. 然而,有一类网站让这种传统的导航样式承担有些吃力.这就是我要提的大型网站. 定义大型网站 一个大型网站由结合了综合服务和产品的典型大型组织所有.这个组织通常也服务各色用户. 拥有大型网站的组织,包括B

网页界面设计:插画主题的网站设计实例

使用插画的网站可以给人一种有趣创意的感觉,特别是一些网站将卡通插画用于网站设计与标志中,使得网站整体风格也能统一起来.在不影响网站布局的情况下,适当加入的插画还能更好的起到画龙点睛的作用. 有上面的三大特点,可以插画主题的网站设计还是比较简单的. 一.云彩插画在网站中的使用 云彩插画的使用总能很快调整网页的亮度,让人感觉简洁,轻快! Candy Cult FrancescoMugnai indiqo.media Katherine Designs MiNDiNG MoNSTeRS MULTIWA

方便用户交互的网站导航完美设计

许多网站缺乏针对性和友好的导航设计,难以找到连接到相关网页的路径,也没有提供有助于让访客/用户找到所需信息的帮助,用户体验非常糟糕.这篇文章,我们尝试就网站导航交互做一些探讨. 首先对于WEB交互设计师来说,解决上面遇到的问题,使之简单的方法是设计一套完善的网页导航系统. 优化网站导航设计的目的 一个网站导航设计对提供丰富友好的用户体验有至关重要的地位,简单直观的导航不仅能提高网站易用性,而且在方便用户找到所要的信息后,可有助提高用户转化率.本文是网页教学www.webjx.com收集整理或者原

值得学习总结的网页导航设计最佳实践

  优质的网页设计通常都有着相当不错的导航设计来支撑.如果你的网站有着有趣的内容和受欢迎的视觉设计,那么一个体验良好,可用性优异的导航栏无疑是必须的.可用和易用一直是高效交互的核心,也是激发创意.创造高效设计和优秀视觉设计的基础.所以说,是时候重新审视你的菜单和导航设计,尽量以简约的方式将它们重新组织起来. 导航是必不可少的.高素质是网站导航是让网站从不错走向卓越的必经之路.在今天,千变万化的网页导航设计开始趋于系统化.规则化,网页导航的最佳实践也并非虚无缥缈的都市传说,而今天我们要聊的也就是这

2015网页导航设计趋势

  不管你喜欢不喜欢,汉堡图标反正已经是大势所趋了.今年无数的网站将这个小元素纳入到界面中来,成为页面导航的重要组成部分.不过汉堡图标并不是今年唯一的导航设计趋势.全屏导航.底部导航等许多设计手法都是网页设计师们的心头好.今天这篇文章将会对今年所流行的10个导航设计趋势进行总结,并附上精彩案例若干,记得收藏哟. 1.全屏导航 当导航是整个网页设计的核心的时候,页面会是怎么样的?只要合理地策划整合,全屏导航其实是一种非常有效的技术,用户可以更加便捷地切换到不同的页面,内容成为更加触手可及的东西.

2015网页导航设计趋势&案例大搜罗

  不管你喜欢不喜欢,汉堡图标反正已经是大势所趋了.今年无数的网站将这个小元素纳入到界面中来,成为页面导航的重要组成部分.不过汉堡图标并不是今年唯一的导航设计 趋势.全屏导航.底部导航等许多设计手法都是网页设计师们的心头好.今天这篇文章将会对今年所流行的10个导航设计 趋势进行总结,并附上精彩案例若干,记得收藏哟. 1.全屏导航 当导航是整个网页设计的核心的时候,页面会是怎么样的?只要合理地策划整合,全屏导航其实是一种非常有效的技术,用户可以更加便捷地切换到不同的页面,内容成为更加触手可及的东西

移动网站的导航设计

导航是互联网网站最重要的组成部分之一,它涉及到产品的信息架构.页面布局和用户交互行为等诸多方面.一个网站用户体验的优劣往往和导航的优劣有密切的联系. 随着移动互联网的发展,越来越多的网站以移动网站的形式移植到手机上.在网站移植过程中,导航的重新设计有什么变化和设计要点呢,本文尝试做出一些研究. 导航的目的 在研究导航之前,我们不妨从导航的使用目的谈起.如果把网站比成一座大厦,那导航可认作是大厦内的指引系统.导航的使用目的归纳起来主要有以下几个方面: 1. 引导用户在网站页面间移动和浏览,提供获取