摘 要：近几年，在设计网站中，开始流行一种具有独特设计风格的网站，网站是由一个单一的页面组成，呈现出网站内容的流动性。单页面网站的导航的设计是具有挑战性的，这种网站的导航设计，是整个页面设计的基础，是每个页面链接的纽带。如何能将所需要表达的信息集中在一个网页中，而且每个页面有共性，还有个性，排版布局结合动态效果有机穿插，也能以有效的应用代码，实现华丽的场景过渡效果，展示出网站的中心思想和主题内容。

　　关键词：单网页；网站；导航

　　0 引言

　　随着网络信息的飞速发展，网络传媒已被越来越多的企业看好，而网站是传媒很好的一种方式，所以网页制作已经被带入前所未有的新时期。而且近几年，随着网络技术的不断提升，计算机硬件以及软件的不断强大，人们的视觉审美欣赏水平不断提升，对网页是设计要求也不仅仅限于可操作性和实用性了，更多的是追求视觉美感，完美的体验式操作，与产品产生良好的互动。可操作性与实用性已经转变为最基本的属性了。而网站中导航是一个必不可少的元素，导航设计的形式直接关系到网站的应用，它是网站访问者获取所需内容的快速通道和途径。导航让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到并所需的信息，达到有效地传递。本文是针对时下网站最流行的页面形式——单页面中的导航进行研究的，一个界面的导航设计对用户体验至关重要，简单直观的导航不仅能提高网站易用性，而且在方便用户找到所要的信息后，可有助提高用户体验。

　　1 单页面导航设计特征

　　（1）信息浅层结构传达的直接性，有利于用户体验。单页面，导航的层级不多，除了基本的几个栏目之外，其他的尽量的简化。尽可能地安排关键词作为导航栏目。对于网页页面层级越是扁平结构的网站导航越是有效。导航的内容尽可能提取主要信息，简化导航层级，这样信息传达路径缩短，直接，有利用户很快找到相关的内容。

　　（2）单页面导航的视觉表现形式。单页面导航的基本形式是以文字加装饰的形式设计的，导航信息在点击按钮的上部，保持静止效果，当鼠标悬停在其中一个导航装饰上时，装饰按钮就发生变化，为保证页面的统一效果，导航视觉风格应与界面风格相应。有的文字信息直接形成导航的导航设计十分简洁，除了用于分割导航标题的直线外，没有多余的装饰，导航的简洁明快，使网站看起来也颇为轻快，自然。

　　（3）视觉流动性强，增强操作真实体验与趣味性。随着体验经济时代的到来，人们对产品界面的期待值也越来越高，用户在使用产品功能的同时，也追求完美的体验式操作，与产品产生良好的互动。网页的视觉流动性也从单一流动性，转换到视差滚动效果（让多层背景以不同速度移动，形成立体的运动效果，带来非常出色的视觉体验），使网站设计样式缤纷多彩。

　　（4）视觉设计更具挑战性。单页面网站设计是有挑战性的，这种网站直接考验设计师的个人能力，将所有需要表达的信息集中在一个网页中，除了如何排版布局外，也能以更夸张的形式展示网站的中心思想。同时在另一层面，单页面的网站的极简主义和充满创意性的设计也能极大提高了用户的兴趣和关注。动感十足的导航、细致入微的交互、恰如其分的音效反馈、优雅流畅的场景过渡、精致视觉质感的打造，都为其增色了不少。

　　2 单页面导航设计方法

　　（1）页面导航的视觉化传达方式。单页面的导航，在视觉风格和视觉形式上与之前网站导航设计形式，有了很多创新。视觉风格上，导航的设计更多结合了网站的属性风格，有的导航也作为其中的装饰元素而存在。与整个页面产生视觉互动。在视觉形式上，单页面网站形成了独特的布局特征：1）水平式延长。水平式延长是指横向画布，交互时，页面左右滑动，页面在运动中可以看到相关的其他界面元素，可营造一种亲切感的氛围，不会产生更多的陌生感，从而最大限度地减少了干扰，帮助人们沉浸在整个网站的信息内容中。与内容交互，提升了用户掌握的控制权，且让他们感到自信。在页面视觉设计上，每个页面都要有相互关联性，想成一个整体的画面，从设计的风格，到设计形式，都保持要一致性。使用平衡、层次结构来培养信任和完整性感觉。水平式延长页面主导航大部分是横向的。2）垂直式延长。垂直式延长是指纵向画布。交互时，页面上下滑动。垂直式延长页面主导航有的是横向的，有的是纵向的。

　　（2）页面操控性与自然流畅性体验。单页面网站，最核心的就是操控性与流动性体验。点击菜单选项可以看到屏幕如何从下至上以及从上至下地切换。点击任一界面的主导航时，导航都会有轻微的跳动。这些简单的转场效果直接传达给用户他们在操作系统里处于何种位置。让人们直接与内容进行交互，利用与其相符的精力对操作进行响应。通过使用有意义的运动使得体验更加丰富，形成持续的视觉流动的感觉。流动性怎么能增强界面的视觉效果呢？动画在交互易用性方面体现了其优势，一个动画样式的小转场，增强了页面的视觉美感，连接了用户体验与界面之间的关系。交互动画会给用户带来一种舒适、自然和流畅的感觉。交互动画逐渐成了视觉界面与用户之间的沟通方式，成为界面导航应用的肢体语言。它可以清晰表现出导航之间的切换过程。当用户进入一个不同的交互模式时，比如两个应用程序之间的切换，动画可以提供一个指引，告诉用户已进入另一个场景。在界面视觉设计过程中，合理运用交互动画，让界面与用户更好的互动，能让其变的更具情感。

　　3 单页面用户体验

　　（1）信息结构方面，浅层的结构传达直接性，有利于用户体验。单一页面信息量较少。结构比较清晰，明确。其导航采用的是扁平结构，简化了的导航层级，导航的内容提取的也是主要信息，这样信息传达路径缩短，直接，有利用户很快找到相关的内容，方便体验。合理的链接结构是提升网站权重的一个很好的方面，也能给用户最好的体验。

　　（2）视觉流动性强，增强了用户操作的真实体验与趣味性。点击任一界面的主导航时，页面在运动中可以看到相关的其他界面元素，可营造一种亲切感的氛围，不会让用户产生更多的陌生感，从而最大限度地减少了干扰，帮助人们沉浸在整个网站的信息内容中。当用户进入一个不同的交互模式时，比如两个应用程序之间的切换，动画可以提供一个指引，告诉用户已进入另一个场景。精心设计的有针对性的动画可以使网页变得更丰富，并且使体验感觉精良和完美。帮助用户理解上下文环境变动，将体验与视觉转换紧密相连。

　　单页面网站，最核心的就是操控性与流动性体验，交互操作产生的视觉动画，是界面产生自然的流动性。交互动画会给用户带来一种舒适、自然和流畅的感觉。单页面网站正成为网站设计的一种趋势。它正以独有的视觉形式和表现形式进入人们日常生活中。

　　参考文献：

　　[1] 辛希孟.交互设计之路：A集[C].北京：中国社会科学出版社，2008.

　　[2] 冯西桥.情感化设计[R].北京：清华大学设计研究院，2009.

　　[3] 何龄修.读顾城《操作界面设计模式》[J].2010（3）：167-173.

---

期刊库（http://www.zgqkk.com），是一个专门从事期刊推广、投稿辅导的网站。
　　本站提供如何投稿辅导，寻求投稿辅导合作，快速投稿辅导，投稿辅导格式指导等解决方案：省级投稿辅导/国家级投稿辅导/核心期刊投稿辅导//职称投稿辅导。

---

　　【免责声明】本文仅代表作者本人观点，与投稿辅导_期刊发表_中国期刊库专业期刊网站无关。投稿辅导_期刊发表_中国期刊库专业期刊网站站对文中陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完整性提供任何明示或暗示的保证。请读者仅作参考，并请自行承担全部责任。