网页美工导航栏.ppt

《网页美工导航栏.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页交互—导航栏设计网页设计艺术一、交互形式的设计从用户角度来说，交互设计是一种有效而让人愉悦的技术，它致力于了解目标用户及其期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时还包括了解各种有效的交互方式，并对它们进行增强和扩充。通过对产品的界面和行为进行交互设计，让产品和它的使用者之间建立一种有机的关系，从而可以有效达到使用者的目标，这就是交互设计的目的。强调可用性和易用性1、交互的类型（1）按钮式按钮式交互是我们在网页中最常见的一种交互方式，它也是最直接的、最形象的交互类型。按钮是网页形象的重要组成部分，其设计与编排遵循利于实现

2、信息交互、传播的目标。（2）下拉菜单式下拉菜单式交互是近十年、特别是Flash网页出现后在网页中应用的一种交互方式，它可以在一个网页中安排大量的交互项，又不影响网页的视觉效果，但不直接面对用户，隐藏于某一个标题按钮中，交互的直接性效果不好。（3）文本式文本式是网页最初的交互形式，也是最直接的交互方式，世界上第一张网页就是采用文本式交互。随着网页的发展，直接的文本式交互主要用在诸如新闻、公告等标题类交互。另一种表现为按钮式的文本交互正在被广泛采用，特别是这两年的扁平式网页设计流行，更是为这种交互方式应用提供了肥沃的土壤。（4）图像热点式通常一般一张图像只能链接

3、一个文件路径。（5）锚记交互式锚记交互是网页制作中超交互的一种，又叫命名锚记。（6）空交互式空交互式是未指派的交互式。空交互式用于向页面上的对象或文本附加行为。（7）框架交互式框架常用在需要导航的网页结构中，比如一个窗口分为两个框架页（导航框架页与内容框架页），通过点击导航框架页的交互，可以显示不同的内容框架页。2、交互与网页的协调设计师在设计页面时，应该建立更多的视觉层次，引导用户的视觉焦点，把用户的注意力吸引到最重要的元素上，然后才把视线引导到其他次要的信息上。这样便于用户迅速、快捷地找到自己所需，更好地完成信息搜索、阅读、浏览任务等。（1）能简不繁交互

4、设计主要体现指示、易用、美观性。（2）能少勿多设计网页交互就像设计电视遥控器按钮一样，不会把电视每一个命令都做在遥控器上。在设计中，我们在一个页面中尽量只保留必需的、主要的交互，使网页更易用和美观。（3）能显勿藏网页的交互是生命，没有交互网页就没有了意义。在设计网页时一定要处理好交互的“显”，同时又能与整体协调。二、按钮的设计按针按钮代表着“做某件事”，即点击了某个按钮代表着操作了一项功能，按钮在形式上还有一个功能，就是链接功能，即提供一个要被强化、引导用户点击的地方。有一个外框（这个框可以是任何几何形体，如方、圆、椭圆等），在上面有一些文字（如下载、注册、

5、充值、搜索、登录，抽奖等），满足了这两个基本条件的，就认为是按钮，按钮的本质特点就是可以点击后实现交互。1、按钮本身的颜色按钮本身的颜色应该区别于它周边的环境色，要具有较高的辨识度。因此，按钮一般采用更亮且有高对比度的颜色。2、按钮的位置按钮的位置也需要仔细考究，基本原则是浏览者能快速、方便地找到，特别重要的按钮应该处在画面的第一视觉位置。3、按钮的尺寸通常来讲，一个页面当中按钮的大小也决定了其本身的重要级别，但也不是越大越好，尺寸应该适中，因为按钮大到一定程度，会让人觉得那不像按钮，潜意识地认为那是一块区域，导致没有点击欲望。4、按钮上的文字在按钮上的文字

6、如何表述，以传递信息给用户非常重要。语言组织需要言简意赅，直接明了。5、按钮的效果按钮不能和网页中的其他元素挤在一起，它需要充足的外边距才能更加突出，也需要更多的内边距才能让文字更容易阅读。在网页设计中有一些通用的交互设计模式。网站导航各种各样的通用和大家熟知的设计模式，可以用来作为为网站创建有效地信息架构的基础。三、网页导航布局设计网页版式与其它视觉传达媒体所不同的重要一条就是，它必须具备清晰的导航性。对于浏览者来说，导航是网站内容的目录。导航系统作为网站信息储备的核心构架，展示出了网站的规模、储备方式和查阅方式等基础设施。网页导航应该帮助浏览者理解他们在

7、哪里和去哪里，即让浏览者时刻清楚自己所处的位置，并能轻松进入其他页面或返回本页面。网页导航的功能是帮助人们迅速有效地到达目的地，在设计导航系统和用户界面时，重要的事情是了解访问者的需求而设置导航系统，帮助浏览者找到他们正在寻找的信息。一个网站可以运用多种导航，如主栏目导航、二级栏目导航、快速导航和相关链接等。1．主栏目导航在主页面上，全局导航是所有网页都具有的导航选项，一般是网页内容的分类，提供给读者必要的选项。2．二级栏目导航当一个浏览者正在浏览网站的一个特殊区域时，第二级导航就显示出来这一级反映了特定内容。3．快速导航快速导航是现在韩国的一些网站中比较流

8、行的方式，一般出现在网页的右侧，并且采用浮动的方式伴