Dreamweaver教程:网页导航的设计如何做到更清晰
导航在Web中扮演一个回答用户"我是谁?""我从哪里来?""我到哪里去"的角色。好的导航是一个网站的主要基石。而在开始设计一个网站或者改版一个网页时,它往往是设计师第一个面临的挑战;
导航设计之信息架构
信息架构决定了导航的定性,在设计之前整理清楚内容的信息架构,才能最大程度发挥导航的梳理网站结构、有效传递信息功能;
网页结构一共有多少层级关系?是否存在上下层关系?各类别标签之间的关系是并列关系还是相关联的?各子级项中是否存在可合并项?等等。要避免单纯地按照简单的逻辑关系,甚至按照业务关系把页面导航细分到3级甚至4级或者产生出一些和用户认知不相符的信息类别;
每增加一级导航就增加一个认知维度,每增加一级使得整个导航系统复杂度增加数倍,不仅用户的操作将成倍的增加,给网页后期维护的带来极大的成本。以下两种图示,就能清楚地看到相同数量页面的不同放置方式给用户带来不同的体验;
在web交互设计中存在"3次点击"的原则,用户在3次点击后无法找到想要的信息或完成某个功能时,便会选择放弃。所以对于导航来说,最基本的应该是让用户知道当前的页面有哪些内容,并且知道自己的目标内容在哪里。导航设计的广度和深度的区别展示,一般来说,广度比深度的效果要好。在深结构的各级别间选择更容易迷失方向,甚至可能迷路。但也不要在广度上铺的过广,任何时候把太多内容show出来都会吓退用户,让他们被迫患上了"选择综合症";
为了更明确用户的认知或者甚至说在设计师面对改版等需求时,有助导航的创建和完善,常用的一个方法是卡片分类法。卡片分类法的进行方式很简单,首先准备一些大小相同的空白卡片,将信息写在不同的卡片上,让参与人员自行分类,也可有适当的解释性引导;
每次测试的人数最好在2到4个之间,人数过少的话使用者之间不易产生讨论,人数过多则会让讨论变得混乱,场面不易控制。这是一种在在网站或其他规划初期常用的一个测试方法,能从中了解真正符合用户习惯的信息分类,找到之间的认知差异,作为调整架构的依据;
Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |