《网页美工导航栏.ppt》由会员分享，可在线阅读，更多相关《网页美工导航栏.ppt（83页珍藏版）》请在三一办公上搜索。
1、网页交互导航栏设计,网页设计艺术,一、交互形式的设计,从用户角度来说，交互设计是一种有效而让人愉悦的技术，它致力于了解目标用户及其期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时还包括了解各种有效的交互方式，并对它们进行增强和扩充。通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机的关系，从而可以有效达到使用者的目标，这就是交互设计的目的。强调可用性和易用性,1、交互的类型,（1）按钮式 按钮式交互是我们在网页中最常见的一种交互方式，它也是最直接的、最形象的交互类型。按钮是网页形象的重要组成部分，其设计与编排遵循利于实现信息交互、传播的目标。,（
2、2）下拉菜单式 下拉菜单式交互是近十年、特别是Flash网页出现后在网页中应用的一种交互方式，它可以在一个网页中安排大量的交互项，又不影响网页的视觉效果，但不直接面对用户，隐藏于某一个标题按钮中，交互的直接性效果不好。,（3）文本式 文本式是网页最初的交互形式，也是最直接的交互方式，世界上第一张网页就是采用文本式交互。随着网页的发展，直接的文本式交互主要用在诸如新闻、公告等标题类交互。另一种表现为按钮式的文本交互正在被广泛采用，特别是这两年的扁平式网页设计流行，更是为这种交互方式应用提供了肥沃的土壤。,（4）图像热点式 通常一般一张图像只能链接一个文件路径。,（5）锚记交互式 锚记交互是网页制
3、作中超交互的一种，又叫命名锚记。（6）空交互式 空交互式是未指派的交互式。空交互式用于向页面上的对象或文本附加行为。,（7）框架交互式 框架常用在需要导航的网页结构中，比如一个窗口分为两个框架页（导航框架页与内容框架页），通过点击导航框架页的交互，可以显示不同的内容框架页。,2、交互与网页的协调,设计师在设计页面时，应该建立更多的视觉层次，引导用户的视觉焦点，把用户的注意力吸引到最重要的元素上，然后才把视线引导到其他次要的信息上。这样便于用户迅速、快捷地找到自己所需，更好地完成信息搜索、阅读、浏览任务等。,（1）能简不繁 交互设计主要体现指示、易用、美观性。（2）能少勿多 设计网页交互就像设计
4、电视遥控器按钮一样，不会把电视每一个命令都做在遥控器上。在设计中，我们在一个页面中尽量只保留必需的、主要的交互，使网页更易用和美观。（3）能显勿藏 网页的交互是生命，没有交互网页就没有了意义。在设计网页时一定要处理好交互的“显”，同时又能与整体协调。,二、按钮的设计,按针按钮代表着“做某件事”，即点击了某个按钮代表着操作了一项功能，按钮在形式上还有一个功能，就是链接功能，即提供一个要被强化、引导用户点击的地方。有一个外框（这个框可以是任何几何形体，如方、圆、椭圆等），在上面有一些文字（如下载、注册、充值、搜索、登录，抽奖等），满足了这两个基本条件的，就认为是按钮，按钮的本质特点就是可以点击后实
5、现交互。,1、按钮本身的颜色 按钮本身的颜色应该区别于它周边的环境色，要具有较高的辨识度。因此，按钮一般采用更亮且有高对比度的颜色。2、按钮的位置 按钮的位置也需要仔细考究，基本原则是浏览者能快速、方便地找到，特别重要的按钮应该处在画面的第一视觉位置。3、按钮的尺寸 通常来讲，一个页面当中按钮的大小也决定了其本身的重要级别，但也不是越大越好，尺寸应该适中，因为按钮大到一定程度，会让人觉得那不像按钮，潜意识地认为那是一块区域，导致没有点击欲望。,4、按钮上的文字 在按钮上的文字如何表述，以传递信息给用户非常重要。语言组织需要言简意赅，直接明了。5、按钮的效果 按钮不能和网页中的其他元素挤在一起，
6、它需要充足的外边距才能更加突出，也需要更多的内边距才能让文字更容易阅读。,在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式，可以用来作为为网站创建有效地信息架构的基础。,三、网页导航布局设计,网页版式与其它视觉传达媒体所不同的重要一条就是，它必须具备清晰的导航性。对于浏览者来说，导航是网站内容的目录。导航系统作为网站信息储备的核心构架，展示出了网站的规模、储备方式和查阅方式等基础设施。网页导航应该帮助浏览者理解他们在哪里和去哪里，即让浏览者时刻清楚自己所处的位置，并能轻松进入其他页面或返回本页面。网页导航的功能是帮助人们迅速有效地到达目的地，在设计导航系统和用户
7、界面时，重要的事情是了解访问者的需求而设置导航系统，帮助浏览者找到他们正在寻找的信息。,一个网站可以运用多种导航，如主栏目导航、二级栏目导航、快速导航和相关链接等。1主栏目导航 在主页面上，全局导航是所有网页都具有的导航选项，一般是网页内容的分类，提供给读者必要的选项。2二级栏目导航 当一个浏览者正在浏览网站的一个特殊区域时，第二级导航就显示出来这一级反映了特定内容。,3快速导航 快速导航是现在韩国的一些网站中比较流行的方式，一般出现在网页的右侧，并且采用浮动的方式伴随于每一个网页，不会因为页面的滚动而找不到导航，能够提供随时可用的链接。4相关链接导航 相关链接一般出现在网页的下部，用于提供相
8、关栏目的链接，一般以图块的方式出现。,为了分辨这些不同的导航，可以把导航信息以相同的形式固定在不同页面的相同位置，这些位置可以是页面的上部、下部、左侧、右侧或中部，页面中间一般放置主体内容。一个网页实际上四个基本区域最适合放置导航元素：在网页的顶部、左侧、右侧和中部，放在下部需要将网页控制在一屏以内。,导航位置,1.顶部水平栏导航,顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单，且最通常地放在网站所有页面的网站头的直接上方或直接下方。,顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。,顶部水平栏导航一般特征导航项是文
9、字链接，按钮形状，或者选项卡形状水平栏导航通常直接放在邻近网站logo的地方它通常位于折叠之上,顶部水平栏导航的缺点顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。,何时使用顶部水平栏导航顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。,2.竖
10、直/侧边栏导航,侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。,它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。,侧边栏导航的一般特征文字链接作为导航项很普遍(包含或不包含图标)很少使用选项卡(除了堆叠标签导航模式)竖直导航菜单经常含有很多链接,竖直/侧边栏导航
11、缺点因为可以处理很多链接，当竖直菜单太长时有时可能将用户淹没。尝试限制你引入的链接数，取而代之可以使用飞出式子导航菜单以提供网站的更多信息。同时考虑将链接分放在直观的类别当中，以帮助用户很快地找到感兴趣的链接。,何时使用竖直/侧边栏导航竖直导航适用于几乎所有种类的网站，尤其适合有一堆主导航链接的网站。,3、中部 当进入一个网页的进入页时，将导航按钮放在页面的中心位置便于浏览者进行选择，进入页类似于书籍的封面，帮助浏览者决定到哪里，这样设计使导航看起来十分突出。,4、下部 为了突出展示的内容，将导航放在下部也是可以的，但要将网页严格控制在一屏以内，而不能在浏览时出现垂直的滚动条。,5、倾斜导航
12、倾斜导航打破了网页由于表格排版造成的横向与竖向导航的格局，拥有很强的视觉冲击力。但是由于它的个性特征太鲜明，不适用于信息量丰富的网站。,6、选项卡导航,选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到圆滑的标签，以及简单地方边的标签等。它存在于各种各样的网站里，并且可以纳入任何视觉效果。,选项卡比起其它类别的导航有一个明显的优势：它们对用户有积极的心理效应。人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。,选项卡导航的一般特征样子和功能都类似真实世界的选项卡(就像在
13、文件夹，笔记本等中看到的一样)一般是水平方向的但也有时是竖直的(堆叠标签),选项卡导航的缺点选项卡最大的缺点是它比简单的顶部水平栏更难设计。它们通常需要更多的标签，图片资源以及CSS，具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们也不太适用于链接很多的情况，除非它们竖直地排列(即使这样，如果太多的话它们还是看起来很不合适)。,何时使用选项卡导航选项卡也适合几乎任何主导航，虽然它们在可以显示的链接上有限制，尤其在水平方向的情况下。将它们用于拥有不同风格子导航的主导航的较大型网站是个不错的选项。,7、面包屑导航,面包屑的名字来源于Hansel和Gretel的故事，他们在沿途播撒面包屑以用来
14、找到加家的路，这可以告诉你在网站的当前位置。这是二级导航的一种形式，辅助网站的主导航系统。,面包屑对于多级别具有层次结构的网站特别有用。它们可以帮助访客了解到当前自己在整站中所处的位置。如果访客希望返回到某一级，它们只需要点击相应的面包屑导航项。,面包屑的一般特征一般格式是水平文字链接列表，通常在两项中间伴随着左箭头以指示层及关系从不用于主导航,面包屑导航的缺点面包屑不适于浅导航网站。当网站没有清晰的层次和分类的时候，使用它也可能产生混乱。何时使用面包屑导航。面包屑导航最适用于具有清晰章节和多层次分类内容的网站。没有明显的章节，使用面包屑是得不偿失。,8、标签导航,标签经常被用于博客和新闻网站
15、。它们常常被组织成一个标签云，导航项可能按字母顺序排列(通常用不同大小的链接来表示这个标签下有多少内容)，或者按流行程度排列。,标签是出色的二级导航而很少用于主导航。他可以提高网站的可发现性和探索性。标签云通常出现在边栏或底部。如果没有标签云，标签则通常包括于文章顶部或底部的元信息中，这种设计让用户更容易找到相似的内容。,标签导航的一般特征标签是以内容为中心的网(博客和新闻站)站的一般特性仅有文字链接当处于标签云中时，链接通常大小各异以标识流行度经常被包含在文章的元信息中,标签导航的缺点人们通常把标签和博客和新闻网站联系在一起(有时候也可能是电子商务网站)，所以如果你的网站与这些网站有本质的不
16、同，它可能对你就没有帮助。标签也会给内容创作者带来一定量的工作量，因为为了使标签系统有效，每篇文章都需要打上准确的标签。,何时使用标签如果你拥有很多主题，为内容打上关键词标记是很有利的。如果你仅有几个页面(可能你的网站是一个公司网站)，可能就不需要给内容打标签了。是否结合标签云或只是将标签包含在元信息中得取决于你的设计。,9、搜索导航,近些年来网站检索已成为流行的导航方式。它非常适合拥有无限内容的网站(像维基百科)，这种网站很难使用其它的导航。搜索也常见于博客和新闻网站，以及电子商务网站。,搜索对于清楚知道自己想要找什么的访客非常有用。但是有了搜索并不代表着就可以忽略好的信息结构。它对于保证那
17、些不完全知道自己要找什么或是想发现潜在的感兴趣内容的浏览者可以查找到内容依然非常重要。,搜索导航的一般特征搜索栏通常位于头部或在侧边栏靠近顶部的地方搜索栏经常会出现在页面布局中的辅助部分，如底部,搜索导航的缺点搜索最大的缺点是并非所有搜索引擎都是平等的。取决于你选择的方案，你网站的搜索特性可能不能返回精确的结果或者缺失一些东西如文章元数据。搜索导航，对于大部分网站来说，应该作为次要的导航形式。搜索是用户在无法被导航到他们想找的东西的地方时的可靠选择。,何时使用搜索导航对于具有无数页面并且有复杂信息结构的网站来说，肯定必须引入搜索功能。没有它用户可能很难通过便利链接和多层的导航来找到他们想要的信
18、息。搜索对于电子商务网站也非常重要，而关键的一点是电子商务网站的搜索结果要根据网站存货的多少具有相应的筛选和排序功能。,10、出式菜单和下拉菜单导航,出式菜单(与竖直/侧边栏导航一起使用)和下拉菜单(一般与顶部水平栏导航一起使用)是构建健壮的导航系统的好方法。它使得你的网站整体上看起来很整洁，而且使得深层章节很容易被访问。,他们通常结合水平，竖直或是选项卡导航一起使用，作为网站主导航系统的一部分。,出式菜单和下拉菜单导航的一般特征用于多级信息结构使用JavaScript和CSS来隐藏和显示菜单显示在菜单中的链接是主菜单项的子项菜单通常在鼠标悬停在上面时被激活，而有时候也可能是鼠标点击时激活,出
19、式菜单和下拉菜单导航缺点除非你在主导航链接边上放置一些标识(通常是箭头图标)，不然访客可能不知道那有包含子导航项的下拉或出式菜单，因此使这些标识很明显是非常重要的。同时出式菜单和下拉可能使得导航在移动设备上非常难用，所以要确保你的移动样式表处理了这种情况。,何时使用出式菜单和下拉菜单导航如果你想在视觉上隐藏很大的或很复杂的导航层次，出式菜单和下拉是很好的选择，因为它让用户决定他们想看见什么，以及什么时候可以看见它们。它们可以用来在不弄乱网页的情况下按需显示很大数量的链接。它们还可以用来显示子页面和局部导航，并且不需要用户首先点击打开新的页面。,11、分面/引导导航,分面/引导导航(也叫做分面检
20、索或引导检索)最常见于电子商务网站。基本上来说引导导航给你提供额外的内容属性筛选。假设你在浏览一个新的LCD显示器，引导导航可能会列出大小，价格，品牌等选顶。基于这些内容属性，你可以导航到匹配你的条件的项。,引导导航在拥有巨大数量货物的大型电子商务网站中是非常宝贵的。用户通过直接搜索通常很难找到他们想要的东西，并且增加了用户漏掉一个产品的功能性。例如他们可能搜索一个灰褐色的产品，但你可能将它标记了灰色或褐色，虽然它可能就是用户想要的东西。,分面/引导导航的一般特征最常见于电子商务网站通常让用户对不同的特征做多次筛选几乎总是使用文字链接，分解在不同的类别下或是下拉菜单下常常与面包屑导航一起使用,
21、分面/引导导航的缺点引导导航可能会引起一些用户的迷惑。另外不能保证用户会在你预先定义的类别中查找。何时使用分面/引导导航分面导航对于大型电子商务网站非常有用。它方便了用户购物，提升了购物体验，并更容易找到它们真正想要的东西。它也可以用于其它目录风格的网站。,12、页脚导航,页脚导航通常用于次要导航，并且可能包含了主导航中没有的链接，或是包含简化的网站地图链接。,访客通常在主导航找不到他们要找的东西时会去查看页脚导航。,页脚导航的一般特征页脚导航通常用于放置其它地方都没有的导航项通常使用文字链接，偶尔带有图标通常链接指向不是那么关键的页面,页脚导航的缺点如果你的页面很长，没有人愿意仅仅为了导航而滚动到页面底部。对于较长的页面，页脚导航最好作为重复链接和简要的网站地图的地方。它不适合作为主导般形式。,何时使用页脚导航绝大多数网站都有这样那样的页脚导航，即使它只是重复其它地方的链接。考虑什么放在那有用，以及你的访客可能最想找什么。,结论大多数网站使用不只一种导航设计模式。例如一个网站可能会用顶部水平栏导航作为主导航系统，并使用竖直/侧边栏导航系统来辅助它，同时还用页脚导航来作冗余，增加页面的便利度。当选择你的导航系统基于的导航设计模式时，你必须选择支持你的信息结构以及网站特性的方案。导航是网站设计的重要部分，它的效果必须有坚实的基础设计,
