网页界面的视觉导向设计
摘 要:界面设计是一个复杂的有不同学科参与的工程网页界面的设计当中应该注重的
视觉导向设计,其中要使浏览该网页的用户在该网站中的任何位置,都能够清楚的找到指引
方向的标识物,并通过页面上的图形符号颜色多媒体文字标识物等元素所承载的信息,准
确顺利抵达目的地,并使各页面之间的相互跳转的通过导向系统变得合理有序
关键词:网页界面;视觉导向;界面设计
用户界面设计是屏幕产品的重要组成部分界面设计是一个复杂的有不同学科参与的
工程,认知心 理学 设计学语言学等在此都扮演着重要的角色界面设计有以下几个基本的
准则:保持界面的一致性满足不同目标用户的创意需求用户界面友好性图标识别平衡性
图标功能的一致性建立界面与用户的互动交流这些原则放在网页界面设计中来看,其实是
一个解决如何引导用户如何去浏览网页的问题,它就是对于用户的视觉导向的一种设计 导
向设计这个概念常见于环境 艺术 设计当中,做为一种环境的指引和导向的设计,如城市导向
设计放在软件设计当中常见名称为目标导向设计导向设计可从两个领域来划分:一是从视
觉传达角度来研究,关注的是如何有简洁而醒目的图形符号来表达准确的含义,这种视觉语
言是不分国界的;二是从环境艺术设计角度来研究,主要包括材质外观位置艺术表现等因
素,而且使图形符号融入整个环境的氛围中去这里我们所说到的是指在网页界面的设计当
中应该注重的视觉导向设计,其中要使浏览该网页的用户在该网站中的任何位置,都能够清
楚的找到指引方向的标识物,并通过页面上的图形符号颜色多媒体文字标识物等元素所
承载的信息,准确顺利抵达目的地,并使各页面之间的相互跳转的通过导向系统变得合理有
序在网页当中,视觉导向设计的目的在于准确把握用户的心理活动及一般视觉转向,一定要
明确用户“从那里来,到那里去”对于网页界面设计中的视觉导向设计出发点是基于用户的
需求导向出发的,怎么样才算是从用户的需求出发呢?在这里从以下几点来看:
1 页面布局的合理与统一
需要考虑网页布局的框架的合理与统一一般网页的布局设计方法是一种上下框架结
构式,通常上方为导航条,或者动态的公司 企业 形象广告区域下方为正文内容部分(也有
在下方为导航,上方为内容等)还有企业网站较喜欢采用的二分栏式布局,或叫作左右结构式
这是一种清晰的分列两旁的框架结构,一般左侧是导航条,有时最上方会有一个小的标题或
标志,右侧是正文内容部分或者公司企业形象展示而大中型企业比较喜欢的一般是上左右
布局式的框架式样这种类型框架特征是通常在网页界面的上方设置为主要的菜单导航条,
左侧为点击出现的细分栏目导航条,下方为较主要的栏目及小广告等,右侧为内容区域对于
较为大型的企业 电子 商务政府网站 教育 机构上左中右结构式又称为 3 分栏布局式,,也
是较常见的结构式同上左右框架式稍有区别的是中间部分为内容区域,右侧则是该网站较
重要的内容导航区域,或是登录搜索区域小广告等网页界面的布局设计没有一定的绝对
的结构框架形式,可以说都是根据网站性质的开发需要根据网站所表现的内容以及想要传
达的信息考虑,然后选择适合表现适合传播适合开发等这些因素条件的能够体现网站内容
及主题的这样一种布局形式,并在整个设计中主要是一个——从用户出发考虑界面与用户
交互角度出发,引导用户的视觉重要因素
要考虑到页面尺寸的大小对用户浏览的影响影响网页页面尺寸的因素有 2 个,一个主
要的是显示器大小及分辨率,另一个是用户使用的浏览器网页是通过 计算 机的显示器来实
现最终显示的,不同的人群又是使用着不同的显示器的目前我们在对网页界面进行设计的
时候的页面尺寸基本上能够适合 1024×768 及 1440×900 这两个分辨率就可以了,另外,关
注和研究显示器的 发展 方向也必然是做好网页界面的必修课之一
用户使用的浏览器也是影响页面尺寸的因素之-因为不同的浏览器会有不同的界面设
计,而其中的工具条基本上都要占部分屏幕空间,有的浏览器占据的空间要大,有的要小,所剩
余的空间才是网页的展示面积目前一般常用的尺寸是:分辨率在 800×600 的情况下,页面
宽度应保持在 778 以内,就不会出现水平滚动条,高度视版面内容决定,全屏在 778×432分
辨率在 1024×768 的情况下,页面宽度应保持在 1002 以内,就不会出现水平滚动条,高度视
版面内容决定,全屏在 1002×600由于以上尺寸是在常规使用的浏览器与工具栏的适合尺
寸,考虑去掉滚动条及浏览器的其他必须面板所以如大家在制作中最好恢复默认的浏览器
工具栏,这样与网页最终设计的作品的差别就不会太大
如上所述,页面尺寸是不是就只能控制在一定的范围之内呢?不是,我们可以通过两种增
加页面内容和尺寸的办法,一个是向下拖动页面,一个是左右拖动页面但是这种办法有一定
的限制性,从用户使用的角度出发的话,在一般的情况之下,除非你的页面内容安排绝对能够
吸引用户能够引导用户去浏览,否则请不要让页面的拖动超过三屏(一屏为显示器屏幕的显
示范围)但是如果内容实在是非常多,最好能够在页面上做一定的方便视觉导向的页面内部
链接,充分考虑及把握用户期望需要以及动机,做到方便浏览
考虑页面的整体设计对用户的心理影响我们常说,对于事物的第一印象是非常重要的,
网页的界面整体造型是就是给予浏览者的第一印象在这里说到的网页的界面整体造型指
的是界面上出现的视觉元素所组成的一个主体的单形形态,如几何形体有机形体无规则形
体等不同的形态会带给人们不同的视觉感受心理感受,这也是我们在构成学上常常提到形
态本身具有的性格特征,如几何形体具有规整秩序严肃稳定单纯等性格特征,有机形体有
着勃勃生机膨胀优美弹性等性格特征,而无规则形体则会有着具有人情味温暖感情趣性
等性格特征在网页的界面整体设计中,必然要考虑的不同视觉元素所组成的一个主题的单
形形态所具备的性格特征在已有的网页设计实践中统计我们可以看到,矩形给浏览者的感
受是中规中矩,有规则,稳定,所以绝大部分的政府网页及教育机构的整体造型都是矩形;圆形
带表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力
量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;
一些交友类竞赛类站点常运用菱形作为页面整体造型,因为采用菱形代表着平衡协调公平
,一些有机形往往常见于一些个人站点中,以彰表个性突出自我
2 界面元素的统一
网页界面中文字是较为主要的元素,各级界面的文字必须要对字体字号色彩行距字
间距排列方式强调状态等的统一,如主要标题文字二级标题文字需要提醒的文字具有
超链接的文字正文标注文字段落文字公告文字等其中必须重视的是文字必须是准确的,
千万不能出现错字别字,否则出现的引导错误是可怕的,甚至导致不良的后续效果另外,考虑
文字的导向还必须要考虑文字在不同的状态下出现的不同要求,前面我们提到具有超链接
的文字,这种类型的字最起码都具备正常鼠标经过鼠标点击的 3 个基本状态,另外还要考
虑到动态的文字和静态的文字要求绝对不同,如果文字是静止不动的,那么文字的字体就可
以相对复杂颜色可以多变字号可以相对较小等;反之如果是动态的文字,如在动画或在多
媒体中出现或文字本身具有动态的效果,那么文字字体必然不能够太复杂要简洁醒目,文字
必要要偏大,包括文字内容都要尽可能言简意赅为此我们在网页的界面设计当中必须要对
承载导向的文字进行良好的谨慎的多角度的设计
各级页面的色调统一,如背景色主体色文字色图片色按钮色等人的活动受着思想
心理活动的支配,网页界面做好的视觉导向,色彩的绝对不容忽视例如考虑色彩的情感特征,
色彩能够给人们带来各种想象联想印象与会议,使人产生喜怒哀乐各种情绪感情与心境
从色调的功能上来看其有不同的感情效应,如黄色调光明充满希望;红色调,热烈且刺激;蓝
色调,冷静,崇高与理智又如:春夏秋冬季分别可以以嫩绿色翠绿色金黄色灰褐色来象
征另外有一些已经成为职业或行业的标志色,如:军警的橄榄绿医疗卫生的白色高科技的
蓝色等
另外还需统一的提示用词统一各级界面位置按钮也在窗口的相同的位置如你可以在
一个列表的项目上双击后能够弹出对话框,那么应该在任何列表中双击都能弹出对话框还
包括图表的统一素材的统一等
3 元素功能性的统一
在网页界面设计中,各种元素所承载的这些功能都必须有相同的操作方法通过对这些
元素的功能性的统一,使用户在浏览起网页来能够建立起一种的心智模型,让他们在使用熟
练了一个网页界面后,切换到另外一个网页界面就能够很轻松的推测出各种功能,语句理解
也不需要费神理解这样可以给浏览用户统一感觉,不觉得混乱,让整个的浏览过程变得轻松
自然 ,方便易用我们主要可以从图标文字两个元素来看图形大致可分为具象图形和抽象
图形两种类型,具象图形通过具体的形象来表达和传达事物信息,它的特点是直接与明了,在
网页界面中常见用于传达特定与既定的事物而抽象图形则用概括的手法升华图形,这类图
形具有视觉冲击效果强容易识别的特点,常见用于表达注意警告等含义时,通常是把强烈
的色彩和简洁易懂的抽象图形结合起来达到最佳传达效果在网页界面的设计当中,我们往
往不是做一个两个的界面,而是有几十个甚至上百个的不同层级的界面,在这里我们就必须
要把握住图形功能性表达统一但在图形标志的功能性定义中,也要特别注意避免与已经既
有的既定概念的图形标志混淆使用如已经行业标准化国家标准化国际标准化的图标符
号,向公共信息图形符号 交通 标志安全标志 包装标志环境保护标志 家用电器及办公
设备危险品等级图形标志残疾人用图形符号
网页界面中另外一个承载功能较多的就是文字元素了文字除了本身具有的绝对的说
明功能表达功能之外,它还常常在网页中承载着其他的功能,在界面设计中,必须要考虑让同
个词语或同个字同个句子所具备的功能是相同的另外还有比较重要的一点的是必须要把
点击过或正在浏览的超链接具有与未点击过和未浏览过的超链接区分开来,如是文字链接,
可考虑不同的字体字号及颜色等;图形链接可考虑采取不同的图形或者变为不可用状态添
加相关的提示等,这样才有助于浏览用户理解整个的网页
最后,设计一个易于识别的网站导航也是做好视觉导向的一个重点到底怎么样的网页
界面设计可以称为具有良好的视觉导向设计呢? 优秀的网页界面设计除能够传达既定的信
息外美化网页页面外,如何让浏览用户的浏览变的更加的便利,如何让用户产生信任感, 如
何让用户觉得完全可以控制, 如何让网页界面中的各种元素能够恰当地与浏览用户产生互
动, 使他们能顺利地获取自己需要的部分,那么,我们就可以说这就是优秀的网页界面的视觉
导向设计了
