关键词： 网页界面设计 信息 有效视觉传达
一、造成网页界面设计信息无法有效视觉传达的原因浅析
（一）设计布局问题
设计布局混乱是造成网页界面设计中信息无法有效表达最为常见的问题。造成设计布局混乱主要有两方面的原因：其一，是由于对于网页风格定位不明确；其二，是由于做不到技术与艺术的高度统一。可见优秀的网页设计布局既对设计者的艺术技法有一定的要求，还要求设计者熟练地运用HTML，JavaScript，HTML5等相关网页设计语言，做到艺术表现力与实施设计的高度统一。除此之外，网页设计布局对于浏览者的视觉习惯考虑不足也有一定的关系，这是由于网页信息传递的公开性特点，网页设计不能很好地符合公众的审美特点，过于艺术化的展现可能会造成大众审美困难，进而导致信息不能有效传达。
（二）颜色、字体、图片等网页搭配问题
除了布局方面的问题外，造成网页界面信息无法有效传达的另一个常见问题在于网页元素搭配不足，常见的网页元素包括文字、图片、声音、视频等，就文字而言，网页中过多字体格式的滥用、字体大小和颜色的不合理混搭严重影响视觉美感及信息的有效传达；图片的选择不符合文字和网页的整体风格，图片尺寸大小，选取的不合理会造成网页信息的杂乱，声音和视频也是如此。可见对于具体信息传递载体――网页元素的搭配问题，是造成信息传达有效性缺失的重要方面。
（三）广告及其他内容过度植入
一些网站为了盈利等方面的因素，在网页中植入广告或者其他内容，这本无可厚非，但是由于诸如此类内容的过度植入往往产生喧宾夺主的尴尬问题，浏览者无法有效地阅读或者浏览网页，导致信息传达有效性的不足，这是值得网站运营和界面设计需要关注的。
二、如何做到网页界面设计中信息的有效视觉传达
（一）网页风格定位
鉴于上述设计不足，要做到信息的有效传达首先要搞好网页的风格定位。风格定位应更注重艺术及美学方面的内容，如政治新闻类的网页应做到庄严大气，简洁明晰；而娱乐性的网页，则应突出“娱乐”特性，力争在活泼、有趣方面有所突破。当然，在风格定位的时候，还应考虑到网页的公开性特点，一定程度上迎合浏览人群大众化的实际情况，在艺术美和大众化之间达到相应的平衡。总之，网页风格定位是进行网页界面设计最关键的一步，需要设计者具备一定的艺术底蕴，同时也应考虑大众的审美特点。
（二）网页界面版式设计
如果网页风格定位工作中艺术美学功底发挥了举足轻重的作用，那么在网页界面版式设计工作中，对于网页编制的技术语言功底的要求则更突出。版式设计是设计者将艺术元素与网页编程进行高度统一的过程，通过编程的方式进行美感艺术的传递。因此，在网页界面设计展开时，应首先遵循网页风格定位，制定相对统一的界面版式设计（一个网站通常是若干网页的集合），保证设计的一致性。另外，对于一些不确定或者后期可能需要完善的内容，在进行版式设计时应做好流余设计工作。总之，网页界面版式设计工作是通过具体的技术手段展现设计之美的过程，做好版式设计是搭建网页整体框架的环节，为信息的有效传递奠定基础。
（三）网页元素的合理填充和搭配
网页元素的合理填充和搭配工作是网站界面设计的最后环节，再次文本建议在文字方面设计的时候遵循相对统一的样式，例如网页整体采取统一的样式，各级标题采取相对统一的样式，避免字体样式的滥用，尽量做到清晰简洁；在图片搭配的时候，修饰类图片应较好的符合网页的风格定位及版式设计内容，而说明类配图则应更好地服务于网页文字内容，提升文字的可读性及吸引力；而声音和视频类型的网页元素的选择，则应根据网页具体内容进行合理的选择。可见网页元素的填充过程是网页设计的画龙点睛之笔，应做到与前期工作的高度一致，提升信息传达的有效性。需要说明的是，网页界面设计的各个环节并不是绝对孤立的，本文只是按照网页界面设计的一般步骤进行相应的阐释，设计者应结合具体的设计环境进行合理的选择和取舍。
（四）合理运用富客户端技术
随着计算机网页技术的发展，富客户端的应用为网页界面设计的多样性提供了更多的选择。常见的富客户端技术有，Flex，Laszlo等，这类技术将网页元素的展现形式及与用户交互能力提升到一个新的高度，甚至一定程度上与传统的C/S架构的软件在客户端方面都不相上下。因此，网页设计者合理地利用一些新的富客户端技术，对于提升信息传达的有效性有一定的作用。
三、结语
信息传达视觉有效性是网页设计工作的重要方面，本文分析了当前信息传达有效性常见的问题，包括设计方面、网页元素组合方面及广告和其他内容的过多植入等方面的原因，并以此给出了解决上述问题的思路，通过提升网页风格定位、加强板式设计、网页元素的合理搭配及合理运用富客户端技术等手段共同提升网页在信息视觉传达有效性方面的功能。
参考文献：
[1]李婵.网页界面设计中信息的有效视觉传达[D].河北师范大学，2014.
[2]李静.基于视觉体验的网页界面极简主义设计[D].中国地质大学，2013.
网页是信息传递和表达的新形式，由于界面设计缺失，容易造成信息表达不足，本文结合网页设计中的设计思路和技术手段两个方面探讨信息视觉传达有效性的问题。
关键词：
网页界面设计；信息；有效视觉传达
一、造成网页界面设计信息无法有效视觉传达的原因浅析
（一）设计布局问题设计布局混乱是造成网页界面设计中信息无法有效表达最为常见的问题。造成设计布局混乱主要有两方面的原因：其一，是由于对于网页风格定位不明确；其二，是由于做不到技术与艺术的高度统一。可见优秀的网页设计布局既对设计者的艺术技法有一定的要求，还要求设计者熟练地运用HTML，JavaScript，HTML5等相关网页设计语言，做到艺术表现力与实施设计的高度统一。除此之外，网页设计布局对于浏览者的视觉习惯考虑不足也有一定的关系，这是由于网页信息传递的公开性特点，网页设计不能很好地符合公众的审美特点，过于艺术化的展现可能会造成大众审美困难，进而导致信息不能有效传达。
（二）颜色、字体、图片等网页搭配问题除了布局方面的问题外，造成网页界面信息无法有效传达的另一个常见问题在于网页元素搭配不足，常见的网页元素包括文字、图片、声音、视频等，就文字而言，网页中过多字体格式的滥用、字体大小和颜色的不合理混搭严重影响视觉美感及信息的有效传达；图片的选择不符合文字和网页的整体风格，图片尺寸大小，选取的不合理会造成网页信息的杂乱，声音和视频也是如此。可见对于具体信息传递载体———网页元素的搭配问题，是造成信息传达有效性缺失的重要方面。
（三）广告及其他内容过度植入一些网站为了盈利等方面的因素，在网页中植入广告或者其他内容，这本无可厚非，但是由于诸如此类内容的过度植入往往产生喧宾夺主的尴尬问题，浏览者无法有效地阅读或者浏览网页，导致信息传达有效性的不足，这是值得网站运营和界面设计需要关注的。
二、如何做到网页界面设计中信息的有效视觉传达
（一）网页风格定位鉴于上述设计不足，要做到信息的有效传达首先要搞好网页的风格定位。风格定位应更注重艺术及美学方面的内容，如政治新闻类的网页应做到庄严大气，简洁明晰；而娱乐性的网页，则应突出“娱乐”特性，力争在活泼、有趣方面有所突破。当然，在风格定位的时候，还应考虑到网页的公开性特点，一定程度上迎合浏览人群大众化的实际情况，在艺术美和大众化之间达到相应的平衡。总之，网页风格定位是进行网页界面设计最关键的一步，需要设计者具备一定的艺术底蕴，同时也应考虑大众的审美特点。
（二）网页界面版式设计如果网页风格定位工作中艺术美学功底发挥了举足轻重的作用，那么在网页界面版式设计工作中，对于网页编制的技术语言功底的要求则更突出。版式设计是设计者将艺术元素与网页编程进行高度统一的过程，通过编程的方式进行美感艺术的传递。因此，在网页界面设计展开时，应首先遵循网页风格定位，制定相对统一的界面版式设计（一个网站通常是若干网页的集合），保证设计的一致性。另外，对于一些不确定或者后期可能需要完善的内容，在进行版式设计时应做好流余设计工作。总之，网页界面版式设计工作是通过具体的技术手段展现设计之美的过程，做好版式设计是搭建网页整体框架的环节，为信息的有效传递奠定基础。
（三）网页元素的合理填充和搭配网页元素的合理填充和搭配工作是网站界面设计的最后环节，再次文本建议在文字方面设计的时候遵循相对统一的样式，例如网页整体采取统一的样式，各级标题采取相对统一的样式，避免字体样式的滥用，尽量做到清晰简洁；在图片搭配的时候，修饰类图片应较好的符合网页的风格定位及版式设计内容，而说明类配图则应更好地服务于网页文字内容，提升文字的可读性及吸引力；而声音和视频类型的网页元素的选择，则应根据网页具体内容进行合理的选择。可见网页元素的填充过程是网页设计的画龙点睛之笔，应做到与前期工作的高度一致，提升信息传达的有效性。需要说明的是，网页界面设计的各个环节并不是绝对孤立的，本文只是按照网页界面设计的一般步骤进行相应的阐释，设计者应结合具体的设计环境进行合理的选择和取舍。
（四）合理运用富客户端技术随着计算机网页技术的发展，富客户端的应用为网页界面设计的多样性提供了更多的选择。常见的富客户端技术有，Flex，Laszlo等，这类技术将网页元素的展现形式及与用户交互能力提升到一个新的高度，甚至一定程度上与传统的C/S架构的软件在客户端方面都不相上下。因此，网页设计者合理地利用一些新的富客户端技术，对于提升信息传达的有效性有一定的作用。
三、结语
信息传达视觉有效性是网页设计工作的重要方面，本文分析了当前信息传达有效性常见的问题，包括设计方面、网页元素组合方面及广告和其他内容的过多植入等方面的原因，并以此给出了解决上述问题的思路，通过提升网页风格定位、加强板式设计、网页元素的合理搭配及合理运用富客户端技术等手段共同提升网页在信息视觉传达有效性方面的功能。
参考文献：
［1］李婵.网页界面设计中信息的有效视觉传达［D］.河北师范大学，2014.
［2］李静.基于视觉体验的网页界面极简主义设计［D］.中国地质大学，2013.
［3］郑强伟.网页界面设计中信息的有效视觉传达研究［J］.大众文艺，2015，06：135.
(1)调研阶段:项目开展前期学生会对客户或相关专业人士展开访谈,对行业同类网站的资讯开展收集与调研。如果是真实案例,此阶段将会是客户与设计师交流阶段,我们也可以在这个环节中通过客户的感受与体验得到所需的设计信息,或者客户会提出指定的信息需求也是我们需要关注的。这个阶段为后续的设计提供设计依据。
(2)信息设计:信息架构是一门以逻辑性方式来组织信息的科学。这一阶段并不是我们通常理解的通过计算机后台代码进行的代码结构设置,而是我们设计网页之前根据分析调研资料,界面设计共同习惯和使用者习惯及需求,设计的逻辑关系架构图,也就是网站的主要信息导引。根据设计结构关系我们可以更进一步开展详尽的设计纲要,而设计纲要的信息主要来源于我们的前期所获得的调研信息。(4)交互设计:网页中的交互设计是目前我们教师在教学中面对的新课题,在网页中如何更好的与访问者互动将是我们教师在教学中探究与关注的重点。目前在网页设计课程中所接触到最直接的交互设计形式主要集中在导航条和表单信息的设计上。导航条和表单信息都会直接产生交互行为,导航条引导浏览者,通过点击触发导航按钮的行为直接参与交互,进而浏览新的网页;表单通过浏览者填充或选择信息,生成交互,收集有用的资料和跟踪反馈。
2界面设计过程中的设计
界面设计是网页设计中重要的设计展示环节,在这个过程中学生可以根据自己的主题展开艺术美感的设计。一般进行页面设计我们从以下几个方面入手。
(1)版式设计:网页设计中的排版与传统意义上的版式设计差异不大,只是由于各自的展示环境不同,有所侧重。在网页设计排版中我们会采用黄金比例分割排列方式,也会采用三分法排列原则。常见的网页排版由上至下分别是网页上部logo区域、导航区域、内容区域、版权信息区域。中间的内容区域可以根据自己的需求进行分配,可以是左右形式,也可是上下形式,还可以是上中下结构等等。
(2)色彩设计:色彩设计作为一门独立学科,有其丰富的语言和表现形态,向我们传达由科学到情感不同层次不同领域的信息,为我们带来更直观的视觉体验。同时网页配色也是网页设计师必备技能之一。网页色彩决定访问者的第一视觉感受。在教学中教师应要求学生根据所选主题,确立网站主体颜色和辅助颜色,利用色彩营造符合主题的环境与相应的气氛。
(3)图像设计:图像是网页页面中的重要信息组成部分。网页中常见的图像形态分为,信息图片,反映现实的图片信息或调查数据信息,量表等;装饰美化图像,如插画,符合网站主题与网站主色调协调统一,起到美化页面的效果;背景图像设计,这部分可能采用大面积的色块,也会采用纹理或连续图案效果,起到页面美化,气氛烘托等作用。
(4)字体设计:网页字体分为英文字体与中文字体,网页中常见的英文字体有Arial、ArialBlack、ArialNarrow等等,字号一般选用12pt。在中文网页中我们一般会看到字体为宋体或黑体,字号为12pt/14pt的文字展示,另有个别网页中也会采用16pt或更大字号作为标题文字,以上是常见字体字号显示方式。特殊字体的运用方面,随着浏览器技术的发展,及相关软件的开发,我们可以将选择的特殊字体顺利的嵌入到网页页面中,便于展示。另外字体除了本身的表意之外,还更多的转换为图形释义,这样也为我们的设计提供新的切入方法。
3技术实施与运行中的设计
(1)布局设计,网页设计中常见的布局方式有表格式布局,框架式布局以及DIV+CSS方式布局。DIV+CSS布局方式,是目前网页设计中比较常见的,它实现了网页结构与样式的真正分离。与table表格布局在静态外观展示上差别不大,只是在收索引擎和网站的后期维护上有所差别,相对信息复杂,内容繁多的网站,我们更建议使用DIV+CSS这种布局方式,这种布局方式更有逻辑性,结构清晰,便于后期信息修订与整理。
(2)CSS样式设计,CSS样式是英文Cas-cadingStyleSheets(层叠样式表的缩写形式,它是html或xml外观样式的一种补足。CSS规则简单易掌握,可以更好的控制网页外观展示,同时CSS所涉及的规划范围广泛,从文字大小、颜色到web页面中各个元素定位等。在网页中应用CSS样式,便于统一展示风格,便于修改,便于不同浏览器显示统一效果。
4结语
【关键词】 中职 网页 Dreamweaver Photoshop flash JavaScript
【中图分类号】 G712 【文献标识码】 A 【文章编号】 1992-7711（2014）03-114-01
网页的前台设计属于设计的范畴，因其所涉及的理论知识不深奥，市场前景广阔，且工资待遇也比一般的平面设计要高得多，因此在中职学校开设网页前台设计专业具有可行性和推广性。笔者从事中职网页前台设计专业教学已经有三年之久，一直在这个专业上辅导学生参加省市技能比赛，并且指导的学生也曾多次在比赛中赛出佳绩。下面我就谈谈网页前台设计专业的教学目标、教学方向、教学方法及相关学习资料。希望可以给广大热爱网页设计或从事网页教学的朋友们一些帮助。
一、明确教学目标
作为中职生，普遍存在文化基础相对薄弱的问题，所以在教学中一定要先抛开复杂的代码分析。从学生感兴趣、易理解、能就业方面入手，制定切实可行的教学目标。
能设计出美观大方、合乎逻辑、界面友好的页面设计草图。能借助PS软件对设计出的草图进行文件生成，生成跟设计草图一致的网页PSD效果图，并科学完成切图操作。能用flash软件制作出网页中常见的动画（尤其是banner动画）。能通过Dreamweaver 软件合理布局站点，并把相关媒体进行有效的整合，生成与PSD效果图一致的网站页面。在网页中加入常见的JavaScript代码，给HTML网页添加动态功能，从而实现响应用户的常见操作。
二、科学开设相关课程
网页前台设计要开设什么课程？每门课程有什么作用？这些课程如何整合？成为了学习者共同关心的问题，因为这关系到学习到的技能能否和市场接轨的问题。
（一）美术基础与网页赏析。任何美的东西均有其原理所在，学生通过对素描和色彩的学习，美感得到了增强，设计出的网页效果图有了理论依据，更符合大众的品味，加上欣赏过成千上万个优秀网站的界面，对自身设计网页PSD效果图奠定了理论基础。
（二）Photoshop软件生成网页PSD效果图。Phtoshop软件在图像合成与图像制作领域中功能强大，我们不但能使用该软件对网页中的图片进行处理，而且能对制作出的网页PSD效果图进行切图操作，切出的小图片文件可以保存为JPG或gif格式，对于网页中的较多背景图像，我们只需切成一个象素宽、一个象素高或宽高均为一象素的小图像即可，大大减少了网站占用的空间，提高了网页下载浏览速度。
（三）flash软件制作出网页中常见的动画。Flash软件生成的二维动画，因其占用空间小等原因，在网上大为流行。对于学好网页中的flas，一是要熟练掌握好工具箱中工具的使用，达到利用工具绘制简单图形的能力；二是通过举一反三的方法，掌握好制作帧帧动画、形变动画、运动动画、引导层动画、遮罩层动画等原理与制作方法。可以多浏览网页中的flas，然后进行分析再制作。
（四）Dreamweaver软件整合网页元素生成网页文件。Dreamweaver软件可以把文字、声音、视频、动画等媒体整合在一个网页之中。学好此软件可以分成为以下几步：找一本较为基础的书或一部视频教程，进行Dreamweaver软件操作的学习，在学习中注重html、css代码与生成的网页元素的对应；利用Dreamweaver的代码视图手写代码并注重与设计视图中元素的对应关系，主要目的是为了深入学习html代码与css代码；学习DIV+CSS网页布局方法，为自己的网页设计生涯开启标准化的大门。
（五）JavaScript代码的套用。JavaScript代码对中职生来说较为复杂，但是很多JavaScript代码在网络上都可以免费下载，学生仅需掌握其结构及其套用方法，从而使自己开发出的网页达到动态交互即可。
三、教学中的一些教学方法
（一）多鼓励学生。德国教育家第斯多惠说：“教学艺术的本质不在于传授的本领，而在于激励、唤醒、鼓舞。”教师想方设法让学生能喜欢上这门课程，可以多拿一些成功的人或事激励学生，对于一些不认真听课的学生，更要多多关心与谈心，做到在思想上感情上赢得学生。
（二）把自己的讲课思路记录或录制下来。讲课讲得慢，条理清楚，让大多数学生能跟上老师的思路，这已是老生常谈。但作为一门专业课，我建议，授课老师可以借助记事本软件把自己的讲课要点采用边讲边敲的方式记录下来，或是通过屏幕录像专家软件录制自己的讲课视频，然后发到每一位学生的电脑上，这样学生就可以在练习时跟上老师的思路，增强学习的信心。
（三）请教学科中的“专家”来帮忙。如今是一个网络时代，网络中的资源非常丰富，各类专家均或多或少在网上视频教程，各位朋友可以多去学习；另可以多参阅网页前台的网上论坛，取长补短、拓宽视野不断提升自身的技能水平。
[ 参 考 文 献 ]
[1]《2009年北风网李炎恢讲师Xhtml+css视频教程+项目视频》.
[2]站长好站（http：///shipin/photoshop/）中刘明轩讲师的《PS网页设计视频教程》.
【关键词】网页UI设计；视觉设计；视觉吸引；交互设计；交互艺术
随着信息化的深入，网页成为人们浏览信息、获取信息、放眼世界的主要窗口之一。在传统网页的界面设计中，人们认为网页界面设计就是美工，而美工就是单纯对网页进行装饰。随着网络技术的发展与普及，网页界面设计的技术在不断的进步，设计的理念也在不断的更新，网页界面设计不再是单纯的视觉设计，而是将视觉设计与人的行为习惯、生活方式、心理体验等结合在一起的设计，基于用户体验的网页UI设计是当前研究的热点。
一、网页UI设计及用户体验
UI即User Interface（用户界面）的简称，指对软件的人机交互、操作逻辑、界面美观的整体设计。网页UI设计用户体验（User Experience，简称UE）则是一种纯主观在用户使用产品过程中建立起来的感受。由于生活习惯、文化背景、行为方式及心理体验等不同，用户体验产品时会有不同的感受，一个好的UI设计要能充分满足大众的需求，使用户在体验过程中都能心情愉悦、操作流畅、交互高效。
就网页UI设计而言，用户浏览网页的需求是什么？抽象出来可以归纳为两点：一浏览信息，二操作数据。这里的数据是指在数据库中躺着的数据，用户在单纯浏览信息时，不会对页面背后的“数据”造成任何操作，但用户进行点击链接、跳转页面和处理信息时，就要和页面背后的数据进行交互。所以，在做网页UI设计时候主要满足于用户的这两方面的需求，第一是用户在浏览信息时候，要有一个赏心悦目的界面，即网页界面的视觉设计要美观。第二是用户在操作数据时候要高效，即网页界面的交互设计灵活。
二、网页界面视觉设计
爱美之心人皆有之，漂亮的网页界面能吸引浏览者的眼球、提高网页的浏览量。传统网页美工设计，更注重网页的布局以及网页的颜色搭配，换言之，就是重在设计网页平面效果图和以及对网页进行装饰。随着人们生活节奏的加快，快餐文化日渐丰富，仅靠传统网页美工已不能适应当今网页发展的需要。那么，如何让你的网站跟上时代的步伐，满足当今用户的需求呢？
从用户体验出发：什么东西能让我们从电脑屏幕上看到接近于现实世界的东西？是视觉吸引，视觉吸引是非常有效的提示工具，通常在用户第一次打开某个应用，或进入某个新的界面时出现。简单的视觉吸引能扭转乾坤，把令人沮丧万分的第一次使用经历变成满意的产品使用体验。[1]常见的网页视觉吸引的模式：
1.对话框
这是最常见的视觉吸引模式，它是网页中一种次要窗口，包含按钮和各种选项，通过它可以完成特定命令或任务。
2.提示
提示指给予相应的提醒、明示和解释，它可以出现在网页中的任何位置，比对话框更能融入到网页的应用情景。
3.使用导航
导航是网页布局中最重要的元素之一，是网页主要内容的提炼，是网站的框架更是网站信息的分类，直观漂亮的导航能吸引用户的操作。
4.视频演示
将视频嵌入到网页当中，通过视频形象直观的画面来吸引浏览者。在进行视频嵌入设计时，为了便于用户的操作，一般要提供常见的视频控制选项（停止、暂停、音量控制等）。
5.首次使用引导
用户首次使用网页或是网页界面中的某些操作时候，提供适当的引导，帮助用户进入操作界面，比如说利用图像或是其他视觉线索来引导用户使用。
6.持续视觉吸引
持续视觉吸引设计，主要是将一些网页元素进行有别于其他网页元素的设计（比如说，通过字体的大小、颜色区别开来），并将这些元素一直保持在网页中，通过持续的视觉刺激来吸引用户。
7.可发现的视觉吸引
可发现的视觉吸引是一种在保持页面简洁的前提下，用户通过执行特定交互操作的方法（如点击和滑动等），就能看到页面中某些隐藏的元素。如比较常见的视觉吸引模式是鼓励用户刷新数据的提示。
三、网页界面交互设计
“交互”是人与机器之间的相互作用。良好的交互能保持或是激发用户使用网站的兴趣，传统的网页交互设计重在技术上关注人机之间的交互，忽视了人机之间“情感”交互。发挥设计中人的情感体验作用，使设计更具有人性化的自由，满足审美的追求，这不仅需要交互技术，更需要交互艺术。所以，从用户体验出发，来进行网页界面的交互设计。
1.交互技术
人机之间信息交互的有效性主要取决于交互技术。好的交互主要包括两方面：
（1）时效性
如今生活节奏的加快，人们更注重时效性，在人机交互过程中，如果交互不及时，浏览者就会厌烦甚至放弃浏览该信息，有网络调查研究表明，用户打开网页等待的时间最长为五秒，如果五秒之后没有任何的反馈信息，用户一般会放弃该网页的操作。所以，在进行网页界面设计时，要考虑到受众的心理，在提高交互速度的同时，也要为用户在等待交互过程中提供相关的信息，减少用户的疑惑以及焦虑。比如在用户等待操作时的，提供操作成功与否的信息或是提供操作成功的数据量和剩余所需等待的时间等。
（2）直观性
简单直观的交互能帮助用户快速完成任务，繁琐的交互会增加用户操作和思考的时间，也会引起用户心理上的厌倦。在进行交互设计时，反馈回来的信息要直接明了，因为在操作过程中用户都喜欢被告诉怎么做，而不喜欢去思考如何做。同时，交互设计要减少干扰，让用户的操作能更顺畅。
2.交互艺术
交互发生取决于交互技术，交互持续取决于交互艺术。交互艺术，是指运用一定的创意，使用户在体验交互的过程中，能沉浸其中，并保持愉悦的心情。在交互设计中，运用艺术表现形式，改变传统媒体的线性秩序叙事方式，强调观众的积极性和能动性，引导用户更好地进行交互操作，达到人机交互的自然、和谐。
四、结语
“以人为本”的创新设计是UI设计的核心，好的设计既是美的设计也是为人的设计，这也是未来UI设计的趋势。[2]所以，在网页UI设计中，我们要摒弃以往界面设计就是美工的观念，网页UI设计不是给网页进行简单的装饰和美化，而是要赋予其独立的思想和创意，结合用户的心理体验、行为习惯、生活方式等因素，以人为本，基于用户体验进行网页UI设计。
参考文献
关键词:网页界面;视觉导向;界面设计
用户界面设计是屏幕产品的重要组成部分｡界面设计是一个复杂的有不同学科参与的工程，认知心理学､设计学､语言学等在此都扮演着重要的角色｡界面设计有以下几个基本的准则:保持界面的一致性､满足不同目标用户的创意需求､用户界面友好性､图标识别平衡性､图标功能的一致性､建立界面与用户的互动交流｡这些原则放在网页界面设计中来看，其实是一个解决如何引导用户如何去浏览网页的问题，它就是对于用户的视觉导向的一种设计｡ 导向设计这个概念常见于环境艺术设计当中，做为一种环境的指引和导向的设计，如城市导向设计､放在软件设计当中常见名称为目标导向设计｡导向设计可从两个领域来划分:一是从视觉传达角度来研究，关注的是如何有简洁而醒目的图形符号来表达准确的含义，这种视觉语言是不分国界的;二是从环境艺术设计角度来研究，主要包括材质､外观､位置､艺术表现等因素，而且使图形符号融入整个环境的氛围中去｡这里我们所说到的是指在网页界面的设计当中应该注重的视觉导向设计，其中要使浏览该网页的用户在该网站中的任何位置，都能够清楚的找到指引方向的标识物，并通过页面上的图形､符号､颜色､多媒体､文字标识物等元素所承载的信息，准确､顺利抵达目的地，并使各页面之间的相互跳转的通过导向系统变得合理有序｡在网页当中，视觉导向设计的目的在于准确把握用户的心理活动及一般视觉转向，一定要明确用户“从那里来，到那里去”｡对于网页界面设计中的视觉导向设计出发点是基于用户的需求导向出发的，怎么样才算是从用户的需求出发呢?在这里从以下几点来看:
1 页面布局的合理与统一
需要考虑网页布局的框架的合理与统一｡一般网页的布局设计方法是一种上下框架结构式，通常上方为导航条，或者动态的公司企业形象､广告区域｡下方为正文､内容部分(也有在下方为导航，上方为内容等)｡还有企业网站较喜欢采用的二分栏式布局，或叫作左右结构式｡这是一种清晰的分列两旁的框架结构，一般左侧是导航条，有时最上方会有一个小的标题或标志，右侧是正文､内容部分或者公司企业形象展示｡而大中型企业比较喜欢的一般是上左右布局式的框架式样｡这种类型框架特征是通常在网页界面的上方设置为主要的菜单导航条，左侧为点击出现的细分栏目导航条，下方为较主要的栏目及小广告等，右侧为内容区域｡对于较为大型的企业､电子商务､政府网站､教育机构上左中右结构式又称为3分栏布局式，，也是较常见的结构式｡同上左右框架式稍有区别的是中间部分为内容区域，右侧则是该网站较重要的内容导航区域，或是登录､搜索区域､小广告等｡网页界面的布局设计没有一定的绝对的结构框架形式，可以说都是根据网站性质的开发需要､根据网站所表现的内容以及想要传达的信息考虑，然后选择适合表现､适合传播､适合开发等这些因素条件的能够体现网站内容及主题的这样一种布局形式，并在整个设计中主要是一个——从用户出发､考虑界面与用户交互角度出发，引导用户的视觉重要因素｡
要考虑到页面尺寸的大小对用户浏览的影响｡影响网页页面尺寸的因素有2个，一个主要的是显示器大小及分辨率，另一个是用户使用的浏览器｡网页是通过计算机的显示器来实现最终显示的，不同的人群又是使用着不同的显示器的｡目前我们在对网页界面进行设计的时候的页面尺寸基本上能够适合1024×768及1440×900这两个分辨率就可以了，另外，关注和研究显示器的发展方向也必然是做好网页界面的必修课之一｡
用户使用的浏览器也是影响页面尺寸的因素之-｡因为不同的浏览器会有不同的界面设计，而其中的工具条基本上都要占部分屏幕空间，有的浏览器占据的空间要大，有的要小，所剩余的空间才是网页的展示面积｡目前一般常用的尺寸是:分辨率在800×600的情况下，页面宽度应保持在778以内，就不会出现水平滚动条，高度视版面内容决定，全屏在778×432｡分辨率在1024×768的情况下，页面宽度应保持在1002以内，就不会出现水平滚动条，高度视版面内容决定，全屏在1002×600｡由于以上尺寸是在常规使用的浏览器与工具栏的适合尺寸，考虑去掉滚动条及浏览器的其他必须面板｡所以如大家在制作中最好恢复默认的浏览器工具栏，这样与网页最终设计的作品的差别就不会太大｡
如上所述，页面尺寸是不是就只能控制在一定的范围之内呢?不是，我们可以通过两种增加页面内容和尺寸的办法，一个是向下拖动页面，一个是左右拖动页面｡但是这种办法有一定的限制性，从用户使用的角度出发的话，在一般的情况之下，除非你的页面内容安排绝对能够吸引用户能够引导用户去浏览，否则请不要让页面的拖动超过三屏(一屏为显示器屏幕的显示范围)｡但是如果内容实在是非常多，最好能够在页面上做一定的方便视觉导向的页面内部链接，充分考虑及把握用户期望､需要以及动机，做到方便浏览｡
考虑页面的整体设计对用户的心理影响｡我们常说，对于事物的第一印象是非常重要的，网页的界面整体造型是就是给予浏览者的第一印象｡在这里说到的网页的界面整体造型指的是界面上出现的视觉元素所组成的一个主体的单形形态，如几何形体､有机形体､无规则形体等｡不同的形态会带给人们不同的视觉感受､心理感受，这也是我们在构成学上常常提到形态本身具有的性格特征，如几何形体具有规整､秩序､严肃､稳定､单纯等性格特征，有机形体有着勃勃生机､膨胀､优美､弹性等性格特征，而无规则形体则会有着具有人情味､温暖感､情趣性等性格特征｡在网页的界面整体设计中，必然要考虑的不同视觉元素所组成的一个主题的单形形态所具备的性格特征｡在已有的网页设计实践中统计我们可以看到，矩形给浏览者的感受是中规中矩，有规则，稳定，所以绝大部分的政府网页及教育机构的整体造型都是矩形;圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;一些交友类竞赛类站点常运用菱形作为页面整体造型，因为采用菱形代表着平衡､协调､公平，一些有机形往往常见于一些个人站点中，以彰表个性､突出自我｡
2 界面元素的统一
网页界面中文字是较为主要的元素，各级界面的文字必须要对字体､字号､色彩､行距､字间距､排列方式､强调､状态等的统一，如主要标题文字､二级标题文字､需要提醒的文字､具有超链接的文字､正文､标注文字､段落文字､公告文字等｡其中必须重视的是文字必须是准确的，千万不能出现错字别字，否则出现的引导错误是可怕的，甚至导致不良的后续效果｡另外，考虑文字的导向还必须要考虑文字在不同的状态下出现的不同要求，前面我们提到具有超链接的文字，这种类型的字最起码都具备正常､鼠标经过､鼠标点击的3个基本状态，另外还要考虑到动态的文字和静态的文字要求绝对不同，如果文字是静止不动的，那么文字的字体就可以相对复杂､颜色可以多变､字号可以相对较小等;反之如果是动态的文字，如在动画或在多媒体中出现或文字本身具有动态的效果，那么文字字体必然不能够太复杂要简洁醒目，文字必要要偏大，包括文字内容都要尽可能言简意赅｡为此我们在网页的界面设计当中必须要对承载导向的文字进行良好的､谨慎的､多角度的设计｡
各级页面的色调统一，如背景色､主体色､文字色､图片色､按钮色等｡人的活动受着思想､心理活动的支配，网页界面做好的视觉导向，色彩的绝对不容忽视｡例如考虑色彩的情感特征，色彩能够给人们带来各种想象､联想､印象与会议，使人产生喜怒､哀､乐各种情绪､感情与心境｡从色调的功能上来看其有不同的感情效应，如黄色调光明､充满希望;红色调，热烈且刺激;蓝色调，冷静，崇高与理智｡又如:春､夏､秋､冬季分别可以以嫩绿色､翠绿色､金黄色､灰褐色来象征｡另外有一些已经成为职业或行业的标志色，如:军警的橄榄绿､医疗卫生的白色､高科技的蓝色等｡
另外还需统一的提示用词､统一各级界面位置､按钮也在窗口的相同的位置｡如你可以在一个列表的项目上双击后能够弹出对话框，那么应该在任何列表中双击都能弹出对话框｡还包括图表的统一､素材的统一等｡
3 元素功能性的统一
在网页界面设计中，各种元素所承载的这些功能都必须有相同的操作方法｡通过对这些元素的功能性的统一，使用户在浏览起网页来能够建立起一种的心智模型，让他们在使用熟练了一个网页界面后，切换到另外一个网页界面就能够很轻松的推测出各种功能，语句理解也不需要费神理解｡这样可以给浏览用户统一感觉，不觉得混乱，让整个的浏览过程变得轻松自然，方便易用｡我们主要可以从图标､文字两个元素来看｡图形大致可分为具象图形和抽象图形两种类型，具象图形通过具体的形象来表达和传达事物信息，它的特点是直接与明了，在网页界面中常见用于传达特定与既定的事物｡而抽象图形则用概括的手法升华图形，这类图形具有视觉冲击效果强､容易识别的特点，常见用于表达注意､警告等含义时，通常是把强烈的色彩和简洁易懂的抽象图形结合起来达到最佳传达效果｡在网页界面的设计当中，我们往往不是做一个两个的界面，而是有几十个甚至上百个的不同层级的界面，在这里我们就必须要把握住图形功能性表达统一｡但在图形标志的功能性定义中，也要特别注意避免与已经既有的､既定概念的图形标志混淆使用｡如已经行业标准化､国家标准化､国际标准化的图标符号，向公共信息图形符号､交通标志､安全标志､ 包装标志､环境保护标志､ 家用电器及办公设备､危险品等级图形标志､残疾人用图形符号｡
色觉障碍有多种类型，最常见的是红绿色盲．根据三原色学说，光谱内任何颜色都可由红、绿、蓝三色组成．如果能辨认三原色的就为正常人，三种原色均不能辨认则称全色盲；辨认任何一种颜色的能力降低者称色弱，在物体颜色深且鲜明时，则能够分辨，若颜色浅而不饱和时，则分辨困难，主要有红色弱和绿色弱；如有一种原色不能辨认都称二色视，主要为红色盲与绿色盲．正常色觉与色觉障碍光谱见文献［3］（图1，彩色效果见插页）．全色盲：是色觉障碍中最严重的一种，但较为罕见，七彩世界在患者眼中就像观看黑白电视一样，仅有明暗之分，而无颜色差别．红色盲：又称第一色盲或甲型色盲，患者不能分辨红色，对红色与深绿色、蓝色与紫红色以及紫色不能分辨，常把绿色视为黄色，紫色看成蓝色，将绿色和蓝色相混为白色．绿色盲：又称第二色盲或乙型色盲，患者不能分辨淡绿色与深红色、紫色与青蓝色、紫红色与灰色，把绿色视为灰色或暗黑色．蓝黄色盲：又称第三色盲，患者蓝黄色混淆不清，对红、绿色可辨，较少见．
网页设计时对于色彩的选用，可以利用仪器、科学技术或人们的关爱来弥补视觉所带来的缺陷，比如说在页面中使用通用色彩设计，配色时选用色彩分明的色块，尽量不要选用混合色，以防色障人士对其认知吃力；提供相关改善的选项；利用图案、肌理等构成要素来装饰、丰富整个页面等．
1面向色障人群提出的色彩方案
通过上文色彩定义可知，色彩是人的一种认知过程，人生来其实并不了解自然界中颜色该称为何种色彩，它是人在成长过程中，由别人告知、传授经验，再通过自己识别、记忆，最后形成了对于色彩的认知．由于色障人群从小就没有正常辨别色彩的能力，通常自己难以发现具有色觉障碍，只有经过色觉检查或者在辨色过程中与正常人发生冲突时，才会发现自己是色障患者（图2，彩色效果见插页）．正是因为如此，除了全色盲患者容易被发现异常，色障人群中绝大多数的红色盲（弱）和绿色盲（弱）患者，他们只是对光谱中的某些颜色辨认不清．因此，网页设计师可以从中获得灵感，在选择网页色彩时，设计师要做到因人而异，对于色障人群中不同的色障患者，提出不同的色彩方案与之相适应．现在国际上设计界正掀起一股浪潮，人们越来越关心特殊人群．“通用色彩设计”（Color UniversalDesign–CUD）的系统，正是一个面向所有用户（包括色障人群）的设计系统，其选择色彩的方案并非只从美观的角度考虑，而是基于最容易被任何色障人士辨认到的色彩，提倡照顾色障人群的需要，体现人性化原则．如果遵守CUD的设计原则，设计时便需要工具来帮助设计师模拟色盲人士的视觉，通过实验找出各种不能被色盲人士分辨出来的色彩．目前，国外在色盲人群的色彩视界研究方面己经有了一定的基础，例如通过计算机的辅助，可以模拟色盲人群所见的色彩，如图2（彩色效果见插页）所示的Vischeck色彩设计软件的插件就可以实现将位图的色彩转换成为色障人群可见的色彩，以检验配色方案是否便于色障人群的使用．
2色彩的肌理表现
色彩与物体的材料性质、形象表面纹理关系很密切，影响色彩感觉的是其表层触觉质感及视觉感受．肌理指客观存在的物质表面形式，是单位形象的群化而产生的某种质感．因此肌理的变化可以引起人们诸多直接的感受和形态的意味，通过肌理美感的视觉表现，不仅为网页本身增强丰富的情感和情趣，对于严重的色障人群，还可以使得单调的网页界面显得更加丰富，增添一丝生气［5］．1）对比双方的色彩，如采用不同肌理的材料，则对比效果更具情趣性．2）同类色或同种色相配，可选用异质的肌理材料变化来弥补单调感．
3色彩的易见度
色彩在视觉中容易辨认的程度称之为色彩的易见度．光对人眼产生刺激而产生色彩的感觉，光的刺激强度也称为色彩的强度，一般而言，纯度高、明度对比强烈则易见度高．因此在网页配色时需要考虑的一个重要因素就是：要在前景色和背景色之间产生强烈对比，这样可以便于用户阅读信息［6］．对于色障人群来说，这一点尤为重要．图3（彩色效果见插页）的前景色与背景色对比度，这种情况下蓝色盲患者是幸运的，他们看到的颜色比色觉正常的人所看到的颜色更鲜明．也许您也可以看到，虽然使用灰度调色板显示时图像看起来还不错，但对于许多患有色觉障碍的用户来说，这种颜色组合明显不安全．
4提供相关改善的选项
关键词：电子商务专业；网页设计；教学
一、《网页设计》教学现状
目前各大高校开设了《网页设计》课程的专业有电子商务、艺术设计、计算机软件、信息工程等专业，有的学校还把该课程设置成全校公选课程，但是教师上这门课时在教学方式、教学内容上几乎完全一致，没有从专业发展的角度来安排教学内容，严重影响了学生在其专业领域的发展。目前该门课程教学内容的设计有以下几种：
（一）介绍网页三剑客软件的使用
“网页三剑客”软件包括：DREAMWEAVER是一款可进行静态和动态网页制作、网站管理的所见即所得网页编辑器。FIREWORKS主要是用于网页图片的制作与处理，也可用于网页布局。FLASH主要用来制作动画。按照这种教学内容培养出来的学生往往只是熟悉软件的使用，不懂网页源代码，做出来的网页效果一般，缺乏特色，学生将来从事网页设计工作时会感觉困难重重。
（二）只介绍DREAMWEAVER软件的使用
这种教学方式比较常见，教师只讲述DREAMWEAVER软件的使用，包括：DREAMWEAVER的工作界面、文档编辑、图像与多媒体、超链接、表格、框架、CSS、模板和库、表单、行为、网站测试与。学生学习该课程后，能熟练使用软件，能用表格、框架、层来进行页面布局，懂得基本的CSS样式设置，会利用行为面板添加一定的网页特效，在网页设计完成之后，能进行网站的测试与。相比前一种，这种方式培养出来的学生网页设计基础知识更为扎实，但是相关的技术掌握太少。
（三）HTML5、CSS3、JAVASCRIPT网页设计技巧
HTML（HypertextMarkupLanguage），是用于描述网页文档的一种标记语言，HTML5是当前最新版本。CSS即层叠样式表（CascadingStyleSheet），在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确地控制，CSS3是CSS技术的升级版本。JAVASCRIPT一种直译式脚本语言，用来给HTML网页增加动态功能。HTML5、CSS3、JAVASCRIPT是网页设计的主流技术，是教学的重点和难点。
（四）动态网页设计
除了介绍DREAMWEAVER软件的使用外，还重点讲述后台数据库的访问，即C#语言、数据库编程。由于《网页设计》课程通常开设在大一，对于很多从来没有接触过编程和数据库的学生来说，他们会觉得特别难，容易产生抵触心理，消磨掉学习兴趣。
二、电子商务专业《网页设计》教学内容的设计
电子商务专业的培养目标是培养掌握电子商务系统开发技术和电子商务管理与应用知识和技能的高素质人才。《网页设计》是电子商务专业的一门专业必修课，是一门涉及面很广泛的学科，仅仅讲述DREAMWEAVER显然是不够的，毕竟在一个完整的网站中，除了有合理的页面布局之外，用户还希望能看到画面优美的图片、制作精美的动画作品、引人入胜的网页特效，网站设计完成之后，还需要将网站上传和定期维护。另外对于正在读大一的电子商务专业学生来说，在《网页设计》课程中讲述动态网页也不合适，超出了他们的接受程度。因此本人在给电子商务专业的学生讲课时，结合他们的专业特色，将教学内容和课时（一学期64个课时）做了如下安排：
（一）教学内容安排
1、FIREWORKS图片切片处理考虑到我校大一新生第一学期就学习了《PHOTOSHOP图片处理》，掌握了图片处理的技巧，所以图片处理部分只讲述切片和精确提取属性值，而且这部分不单独拿出来讲述，可以穿插在综合案例的DIV+CSS页面布局中。2、FLASH动画设计：10课时这部分内容是学生最感兴趣的，重点讲述动画设计的基本方法，要求学生能够设计出网页中常见的动画效果，能将动画作品成swf文件或者gif文件，并将作品添加在网页中。3、DREAMWEAVER软件使用：10课时因为学生在大一第一学期学过办公软件OFFICE，所以DREAMWEAVER软件的使用他们很容易掌握。教学目标包括：了解创建站点的方法、视图的切换、常用面板的使用；熟悉常用的html标记；能用软件建立超链接、插入图片和多媒体文件、设计表格、表单。学完这部分，学生能利用软件的菜单和工具栏完成各种类型的简单网页的设计。4、DIV+CSS页面布局：32课时这一部分是本门课程的教学重点。教学目标包括：理解DIV盒子模型、熟练掌握CSS常用样式、精通页面布局技巧，最终学生能根据效果图自如地设计出网页。5、JAVASCRIPT网页特效：10课时对大部分电子商务专业的学生来说，因为从来没有接触过程序设计，所以这部分内容对他们来说是最难掌握的。教师对他们不能提出过高的要求，以免打消他们学习的积极性。教学目标是：学生掌握JAVASCRIPT基本语法，能设计简单特效，能修改网上下载的网页特效素材，灵活运用到自己的网页中。6、网站测试与：2课时让学生掌握网站测试与的方法。
（二）教学先后顺序
通常《网页设计》课程的教学顺序是：网站基本知识、HTML、DREAMWEAVER（HTML5+CSS3+JAVASCRIPT）、FLASH、FIREWORKS。本人在讲述该课程时教学的先后顺序如上所示，原因有两点：首先符合网页设计的基本流程：先确定主题，然后准备素材，PHOTOSHOP制作网页效果图，然后用DREAMWEAVER根据效果图设计网页。常言道“巧妇难为无米之炊”，只有先把网页素材准备好了，才可以开始网页设计。其次相比DREAMWEAVER网页设计，动画设计和图片处理效果更为生动直观，更能激发学生的学习兴趣。
三、结束语
任何一门课程的教学都应该根据专业的特色来调整教学内容，培养出适应社会需求的专业性人才。上述《网页设计》课程教学内容的设计使电子商务专业学生能够扎实掌握网页设计技能，同时为后续专业课程学习奠定了良好的基础。
参考文献：
[1]陈波.网页设计教学中引入MOOC教育模式的探索[J].电脑知识与技术，2017，(11):95+125.
[2]田关伟，夏龄，周德荣，舒涛.翻转课堂模式下《网页设计》教学研究[J].科技经济市场，2017，(03):137-138.
购物车(0)
