网页界面的视觉导向设计

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