网站导航设计特点研究.doc

论网页界面设计的规范郑州轻院轻工职业学院专科毕业设计（论文） 题 目 论网页界面设计的规范 学生姓名 高美 专业班级 电脑艺术设计2班 学 号 06010701024 系 别 06 级 指导教师(职称) 王俊波（讲师） 完成时间 2012 年 4 月 15 日 论网页界面设计的规范摘 要网站设计是一门新兴的边缘性职业，既要从外观上进行创意，又要结合图形和版面设计，交互设计等诸多相关原理，这使得网站设计变成了一门独特的艺术。良好的网站设计能使网站在同类站点中独具特色，优秀的创意和表现方式能给浏览者留下深刻的印象，使网站访问流量增加甚至直接增加网站收入。因此，在设计的初始阶段就规划好网站的设计步骤是非常重要的。理解并遵循网页设计的规范是网页界面设计的基础，网页设计的规范在行业中通常被称为设计的“一贯性”。一个优秀的、有经验的设计师能把网页设计的基本规范自然而本能地融入作品中。在显示器的方寸显示空间里，用户需要以被限定的分辨率来浏览页面、以键盘和鼠标来交互控制界面、继而在有限的网络传输速度下一个个层级地浏览整个站点，可想而知其中有多少要素需要规范化。关键词 网页/界面/设计/规范ON THE WEB INTERFACE DESIGNSPECIFICATIONABSTRACTWeb site design is the edge of a new job, not only from the appearance on creativity, but also combination of graphics and layout design, interaction design, and many other related principle, which makes web site design has become a unique art. Good website design make web site in the same unique, outstanding creativity and expression to give visitors impressed, so that even an increase website traffic increase website revenue directly. Therefore, the initial stage in the design of a good site on the planning steps of the design is very important. Understand and adhere to the norms of web design is the basis of web interface design, web page design specifications in the industry in design, often referred to as the consistency. An excellent and experienced website designers can design the basic norms of natural and instinctively into the works. The confusion shows in the display space, the user needs to be limited to browse page resolution to the keyboard and mouse to control the interactive interface, and then limited the speed of network transmission of the next level to browse the entire site, which can be imagined the need for standardization of the number of elements.KEY WORDS Web page ,interface ,design ,specification目 录 中文摘要 1 英文摘要 21 网站界面设计的重点 4 2 界面设计需规范的要素 6 3 如何进行界面的设计 6 3.1 遵循简洁为美原则 6 3.2 重视交互性和用户体验 74 网页界面设计风格三要素的应用8 4.1 协调运用颜色 8 4.2 适当选择线条和形状 8 4.3 均衡的分割版式 9结束语 10致谢 11参考文献 121 网站界面设计的重点 如何搭建完整的网站架构并设计出一个出色的网站？关于这个问题，我们很难提出一个绝对权威和正确的设计思路，但任何网站的设计都需要遵循一个循序渐进的步骤。因此，在设计的初始阶段就规划好网站的设计步骤是非常重要的，我们从以下四个方面来了解一下网站界面设计中的重点。1、 网站设计，不仅仅是美术设计。 你的工作究竟属于设计师还是美工？那得看你做的活是真正的设计，还是点缀页面使之更好看的操作。设计师的工作是高屋建瓴的，而美工只是软件工具的使用者。很多人把在网站中的设计定义为美术设计，认为设计师的工作任务就是使Photoshop一类的绘图软件把需要展示的页面画出来，其实这是很狭义的理解。合格的设计师应该立足于整个网站的全局，在规划上对整个网站进行完整的设计，在宏观上把握设计风格导向，微观上再针对该网站的具体定位来决定如何对设计进行元素上的细化。 二、设计人员在需求阶段介入，影响需求，而不干预需求。我们常听到有设计师抱怨：“这个设计让我改了十多遍怎么还不能定稿？”，也常听到产品经理说：“这个设计师怎么就是把握不住要点？”不论设计在网站的实现过程中有多么重要，网站该是什么模样，还是必须由需求决定。所以网站项目的前期需求是至关重要的环节，也可以理解成房屋建筑的地基。需求也许是经过若干调查，将结果汇总后产生的报告，也可能是领导或老板的一时冲动而引发的大讨论。在需求的确立过程中，遗憾的是，网站设计人员的分量是极其有限的，产品经理、频道主管、某级领导的想法往往直接决定着需求的最终形态。但是设计人员在需求阶段的介入还是很有必要的，设计师能以自己专业独到的眼光，提出科学合理的建议，影响需求的细节。这样做的结果是能在最大限度上取得需求方和设计方的思想一致，而不至于在设计过程中面对着有意见却不让更改的需求问题而大发牢骚。3、 学会掌控用户路径 用户从哪个页面来？他最有可能点哪个链接或者按钮？他使用了搜索框吗？他下一页去哪里？最后哪个页面会被他打印输出？站在整个网站的角度出发，这些流程也许只是产品经理需要把握的，设计师拿到UE图只管一个接一个绘制页面就行。其实不然，好的设计师往往能承担一部分产品经理的职责，设计出一个典型的用户路径，这对网站页面流程有着很大的影响。页面和页面之间有很多关联，成片的超链接把流程页面和外部页面混乱地串在一起，区域A的文字链接要链到页面2，区域B的图片链接是指向页面3，侧边的一个位置显著的大按钮其实是链接到网站X页面和页面之间也是有继承关系的，继承的过程要让用户觉得理所当然，在视觉上实现平滑过渡，这就是设计师要考虑的具体问题。从一个页面到另一个页面的路径组成里，哪些模块要原样保留，哪些控件要发生变化？页面结构是否可以变动，页面色彩是否可以更换？这些都是需要参照用户路径进行设计的地方。把自己想象成为一个普通用户，一页一页地点进来，你就能明白用户需要的是什么样的合理设计。4、 初步实现UE产品模型，并审核设计师需要以什么作为参考来进行页面设计？所有的元素和流程都在脑子里，这个时候设计师需要稍加整理把它们简要地画出来，画出线框和注释就可以了。我们可以把UE模型理解为设计草图，在UE阶段，设计师主要根据用户路径得来的线索，加上对用户交互习惯的探索，进而整理出一个大概的模型框架。这个框架里，要明确画出有几个关键页面，每个关键页面的关键元素和模块有哪些，这些关键元素和模块哪些是必须以某种特定位置排列或者是务必要强调突出的。其中，网站的首页、最终页面是最重要的两级页面，首页会是用户使用网站的第一站，在首页的体验好坏，直接决定着他的去留；而最终页面是用户想要获得信息的具体页面，他会在这个页面停留最久，可能会进行仔细的阅读，或是打印出这一页备用。通常在绘制完UE模型之后，会有一个开发小组来讨论并且审核这个模型，这时候就需要着重确定首页和最终页的大概模样，每个讨论参与者对此都很关心。UE模型的绘制我们可以参考如图的某商城的UE图。UE模型通过之后，传统意义的设计终于派上用场，要进行具体的页面设计了。2 界面设计需规范的要素理解并遵循网页设计的规范是网页界面设计的基础，网页设计的规范在行业中通常被称为设计的“一贯性”。一个优秀的、有经验的设计师能把网页设计的基本规范自然而本能地融入作品中。在显示器的方寸显示空间里，用户需要以被限定的分辨率来浏览页面、以键盘和鼠标来交互控制界面、继而在有限的网络传输速度下一个个层级地浏览整个站点，可想而知其中有多少要素需要规范化。形象标志(LOGO)、导航、搜索、内容区块、页面长度、字体字号等元素是这些规范中至关重要的部分。这些元素中大部分都表现在网站的头部或者是第一屏能显示的区域内：一般的网站通常会在头部显著位置显示网站LOGO，以合理的层级关系及最普通的字体字号来展现导航以及设计合理的搜索功能块。在这里我们需要注意的是除非非常必要，网站的LOGO尽量不要以flash动画展示，同时导航也尽量不要以flash动画或图片来表现，因为浏览器有拦截flash的可能；同时，不同终端设备上浏览器对flash和图片的不支持也可能造成网站无法继续访问或者根本无法识别。除此之外，网站的各内容区块应切割明显，让用户能很容易地判断内容块的起始。如果不是门户类型网站，网站页面长度尽量不要超过三屏（因为不同显示器分辨率参数不同，三屏的说法不一定适用于所有设计），即不要让用户在同一页面上过多滚动鼠标滚轮。中文网站设计时应注意内容区域文字尽量使用12像素、14像素等偶数字号，以准确表达中文字体的整齐切割，正文汉字部分应严格使用宋体，保证用户最好的阅读感受。标题部分可以稍微增大字号，页面上除装饰性图片或广告之外的地方最多使用两种字体。3 如何进行界面的设计3.1 遵循简洁为美原则网页设计不是仅仅使用户在显示器上看到漂亮的装饰性画面那么简单。比起华丽的画面装饰，网页设计应该在更有效地传达信息方面多下些工夫。这必须有对布局设计和色彩的正确理解和相关知识，要熟知网页物理系统的特性，并具备应对各种情况的能力。在具备人性化界面的网站设计中，我们不难发现其表现出来的功能性和自然美。多数设计得比较好的网站，都考虑了多媒体的特性，色彩设计和信息按照一定秩序排列，能更有效地向用户传达内容。很多设计师认为画出美妙绝伦的页面才是设计，其实不然，要在有限的元素和色彩里表达出风格才是更有难度也更有层次的设计。经过严谨的思考和漫长的推敲，最终只花几分钟为页面画下一个简单的圆角框或者一条两像素的实线，其效果也许比涂满了色彩和组合了数十个分层的画面更好。设计最终将上升到思想的层面，而不是仅仅停留在工具和素材的使用。简单就是美的设计理念使得Web设计中的简约风格意向逐步明朗，在体验了复杂烦琐的颜色和图片堆砌之后，主流设计开始返璞归真。毕竟网站是给用户使用的，而不是光用来看的，简约的设计能给人以轻松的视觉体验，更好的突出网站功能主题，更适用于网站文字内容的资料表达。3.2 重视交互性和用户体验在界面设计方面，很重要的一点就是要站在用户的立场去进行设计。如果网站的画面既不美观大方，使用起来也不方便，那么这个网页的界面设计是失败的。既能给用户带来方便，又兼备视觉的冲击力的网页界面设计，才是每个网页设计人员应该思考并追求的东西。在网页界面设计方面，设计师尤其应该考虑使用的便利性和视觉效果这两方面的问题。在使用方法方面，可能的话应该遵循网站设计的普遍规律，界面的构成不能太复杂，主要内容应该设计在引人注目的地方，所有操作性按钮位置应该科学，让用户容易适应；同时，要考虑符合网站主体的色彩系统，去除不必要的内容，把信息块分类设计得成体系，让用户很容易就能找到想要的内容。如果不是追求艺术美感和试验性的特殊网站，无论设计师想表达的东西是多么新颖多么富有创意，假如把网站头部设计得很复杂很难以理解，进而影响了用户的操作，那么它就很难成为一个优秀的网站。4 网页界面设计风格三要素的应用4.1 协调运用颜色不同的色彩影响着人们对网站的第一感觉，红色系象征着激烈、兴奋，灰色系象征着平淡和低调。因此，旅游和园林类型的网站使用绿色系比较多，蓝色则被誉为是企业色确实很多企业和政府机关都偏爱使用沉稳而大方的蓝色。另外也有几种颜色在网页设计中是很少被大面积使用的，比如紫色。一个网站不可能单一地运用一种颜色，这会让人感觉单调，乏味；但也不可能将所有的颜色都运用到网站中，给人感觉轻浮、花俏。一个网站必须有一种或两种主题色，既不至于让客户迷失方向，也不至于单调、乏味。所以确定网站的主题色也是设计者必须考虑的问题之一。通常情况下，一个页面内尽量不要使用超过4种色彩，太多的色彩容易让人感觉没有方向、没有侧重。当主题色确定好以后，考虑其他配色时，一定要考虑其他配色与主题色的关系，要体现什么样的效果；另外还要考虑哪种因素可能占主要地位，是明度、纯度还是色相。4.2 适当选择线条和形状文字、标题、图片等的组合，会在页面上形成各种各样的线条和形状。这些线条与形状的组合，构成了主页的总体艺术效果。必须注意艺术地搭配好这些线条和形状，才能增强页面的艺术魅力。以下我们来探讨一下几种不同线条和形状的使用方法。直线（矩形）的应用。直线条的艺术效果是流畅、挺拔、规矩、整齐的，也就是所谓的有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果。一般应用于比较庄重、严肃的主页题材。 曲线（弧形）的应用。曲线的效果是流动、活跃，具有动感的，曲线和弧形在页面上的重复组合可以呈现流畅、轻快、富有活力的视觉效果。一般应用于青春、活泼的主页题材。 曲、直线（矩形、弧形）的综合应用。把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力，使页面呈现更加丰富多彩的艺术效果。这种形式的主页，适应的范围更大，各种主题的主页都可以应用。但是，在页面的编排处理上，难度也会相应大一些，处理得不好会产生凌乱的效果。最简单的途径是，在一个页面上以一种线条（形状）为主，只在局部的范围内适当用一些其他线条（形状）。4.3 均衡的分割版式 在网页设计中，页面因为内容元素的需要被分割成很多区块，区块之间的均衡就是版式设计上需要着重考虑的问题。均衡并非简单理性的等量不等形的计算，一幅好的、均衡的网页版面设计，是布局、重心、对比等多种形式原理创造性全面应用的结果，是对设计师的艺术修养、艺术感受力的一种检验。在面积对比强烈(不等形)而又均衡(等量)的设计中，我们可以看到对比法则的成功参与；而在一些对比不十分强烈、典雅的不对称设计中，我们则可感受到设计者儒雅的学者风范。需要注意的是，传统网页设计的版式控制都是在不超越大众显示器分辨率宽度的前提下，依照内容多少纵向延展设计。而如今流行的产品型网站，更倾向于在一屏内表达最主要的东西，尤其是首页，尽量不出现滚动条。结束语设计界面所包含的因素是极为广泛的，但在运用中却只能有侧重、有强调的把握。设计因素虽多，但它仍是一个不可分割的整体。它的结果是物化的形，但这个形却是代表了时代、民族等方面的意识，并最终映出人的“美”的心理活动。设计界面的运用，核心是设计分析。在一些国际性的大公司，如索尼、松下、柯尼卡等，都有许多的成功案例可为借鉴。如柯尼卡公司设计其相机时，首先不是去绘制“美”的形和考虑技术的进步，而是进行对象人的日常行为分析，作出故事版(STORY)。它先假定对象人的年龄为35岁，名：Xxxx，从而分析他的家庭、喜好与憎恶，分析他的日常行为，进而考察其人在什么场合需要僚机，从而为设计提供概念(CONCEPT)与目标(TARGET)，进行设计。经过分析，设计师有了明确的概念与目标，并随信息的交互产生了创造力。另一方面，设计师自身对社会环境也要进行深入的认识与考察，对设计的作品取向有明晰的认识：是否符合人们的消费预期?是否能感受到人们的审美知觉?日本设计师佐野邦雄先生曾作一图生