网页设计因素的分析与探讨*

刘华敏

(安徽文达信息工程学院)

网页设计因素的分析与探讨*

刘华敏

(安徽文达信息工程学院)

网页设计要运用互联网+的思维，以客户需求为原则，灵活的使用文字、图片和多媒体等元素设计网页，从而提高信息的传播速度，使界面与用户之间能及时的进行交流互动来满足用户的需求，为用户提供快速获取准确信息，提高页面的访问量.

互联网+;交流互动;访问量

0 引言

随着互联网+的发展，网页设计已经渗入到多学科领域.过去的页面设计是围绕客户所需要表达的内容进行组织、整理，最后在互联网上运行，让更多的浏览者能获取信息就够了.现在这样的页面已完全不能满足客户的需求，客户需要将情感、内容、互动等因素综合的展示在互联网上.这就迫使页面设计者不能单纯的使用计算机技术来设计页面，需要了解与页面相关的心理学知识，从客户的角度考虑客户的心理;了解艺术知识，知道如何搭配页面的色彩，图片如何处理，文字使用何种字体，如何用特效处理文字，为页面增添活力、生动性.设计者设计页面应遵循软件工程开发项目的思想即需求分析－总体设计－详细设计－编码 －调试－测试，以客户为中心、实现客户需求为原则设计页面布局，让浏览者在愉悦的氛围中对页面进行访问与操作.

软件需求分析阶段要解决“页面设计最终目标必须做什么”，也就是要深入实际与客户进行洽谈，真实的了解客户的想法.利用绘制页面整体布局的草图来合理的安排内容素材，与客户进一步的讨论如何宏观的解决这个目标，沟通基本完成后，以总体设计为基础，如何具体地实现这个系统，进行素材的存放、编码，最终实现页面设计的目标.运行过程中，与客户交流探讨是否需要修改或扩充，完善页面的功能，尽善尽美.

1 网页布局的合理性与设计原则的分析

网页设计需要对各个元素进行整体理解，在进行网站设计时，需要对网页的布局进行整体性的规划.从布局合理性与设计原则两个方面进行探讨.

1.1 分析页面布局设计合理的重要性

网页版面布局是否合理是设计网页成功与否的关键.特别是一级页面的布局设计尤为重要，是任何一个类型网站平台的“脸面”.首页是网站所有子页面内容的索引，首页面的导航是起到引航的作用.因此不同的网页界面设计的原则和风格是不同的，但首页面存放的内容一般是网站标记、导航、主体内容、公告、友情链接等，如何合理的在页面空间摆放这些元素是受设计者设计风格的影响.如果设计者知晓现在的大部分年轻人都生活在快节奏中，他们在浏览页面时不仅希望能获取信息，而且需要在一种轻松、快乐的氛围中缓解心理和生活压力，这就需要设计师在设计页面时，能将技术、艺术与心理学等结合，在页面的布局中适当的“留白”，颜色搭配尽可能的选择洋溢幸福的色彩来修饰页面内容，此时设计的布局就达到了“此时无声胜有声”的境界.如果设计者仅仅把“留白”理解成页面布局的背景使用白色或者留出一片空白区域，不存放任何内容，这就是一种败笔.可见，页面布局设计是否合理对网页设计的成功起到画龙点睛的作用.

1.2 网页界面布局设计原则

网页界面是连接用户与浏览者进行交流、互动的桥梁，现代社会中的网页设计已经融合了多学科，包括艺术设计、计算机技术和心理学等领域.界面设计者不能简单的把页面的元素和版式粗略的组合，拼凑出页面;而是在设计的过程中，要以客户至上为原则，从心理学的角度出发研究客户的情感和需求，后用计算机技术、艺术技术相结合来有效地设计页面，达到与用户产生共鸣的反应.由于用户的年龄、接受的教育程度、生成环境等因素的影响，对需求的页面也是五花八门的，这就促使设计师需要将设计风格多样化，争取得到多数用户的认可.

设计师对用户的需求了解后，应策划出一幅界面版式的草稿图，与客户进行进一步的沟通，从用户的角度去考虑素材和需求如何完美的结合，不仅能突出主题，还能达到美的享受，从而追求整个网站的和谐性.

以客户为中心，设计出友好互动的界面是客户的目标.设计师在设计的时候应尽量的围绕客户的需求进行设计，在设计中摒弃过多的外观美的影响，以简洁、清新、明了的设计原则展现主题内容，页面主题内容需要分门别类的存放，以优化为设计理念，提高捕捉信息的效率，让用户在第一时间感受到页面带来的快乐，在最短时间获取信息.

最后，要以整个网站或平台的统一风格来局部调整页面的内容，尽量的以少修改的原则来调整页面的内容.

2 页面构成的基本元素

页面内容需要有文字、图片、导航栏等基本元素构成，但不是所有元素都是必须的.通常是以页面的内容为中心，基本元素为素材设计页面;在设计的过程中，元素不是简单的堆砌在一起，而是经过艺术性的处理、分析，从用户的情感、视觉审美与内容结合的方面来选取素材.

2.1 文字

文字是人类沟通、传递信息、表达情感的一种有效的工具之一.网页页面中的文字尽量使用常用的字体，虽然不同的字体能增加页面的美观性.但如果一个页面使用过多的字体，会给人眼花缭乱的视觉审美，削弱了内容表达的能力.不同风格的网站可以选用与页面主题有关的字体，更好的体现页面的特点.儿童网站可以采用艺术字，体现小孩阳光、快乐和精力旺盛.

页面内容离不开文字的支撑，但如何合理的编排文字呢?如果是容纳丰富信息内容的页面，让浏览者能在第一时间找到所需的信息，可以充分调动文字的颜色、字体、大小、滤镜等属性运用，将重要的或最新的信息放在最醒目的位置，提高阅读的效率;如果是宣传类的页面，海报和图片占据页面的大部分，冲击客户的视觉审美，吸引眼球，这时仅有的一点文字能和海报主题达到和谐，起到相得益彰的效果.

滚动文字能吸引用户的注意力，一般页面的最新信息、天气预报等采用滚动文字表现.如果页面布局中有一行区域显示天气预报，直接采用水平方向滚动;如果是绘制出的一块矩形区域显示最新信息，采用垂直方向滚动，需注意滚动文字运动区域的大小，不能超出边界，否则有损页面的美观性.代码如下:

＜marquee direction=“right”scrollamount=“20”scrolldelay=“100”width=“n”height=“m”onmouseover=“this.stop()”onmouseout=“this.start()”＞这里是滚动的文字＜/marquee＞.Width与height值需根据实际区域大小定.

2.2 图片

“千言万语不如一张图”，图片是界面设计中其中的一个重要元素，它能准确、直观的传递文字无法表达的信息.例如支付宝中蚂蚁森林，这是个公益活动，大家在这个页面种树，依靠出门选择行走或公共交通，为地球减负，获取绿色能量，小树(如图1所示)就一点点的长大，直到长成一棵树(如图2所示)，最后被阿拉善基金会认领，将种植到阿拉善地区.这个过程用文字表达欠准确，而且还不简洁明了.但大家一看下面的图就知道其中的寓意.

页面设计离不开图片的加入，特别是现在的页面设计若没有图片，显得苍白无力;但图片又不能随意使用，容易造成凌乱.将图片插入到页面中，需巧妙的处理图片与文字的关系，从图片上获取情感，从文字中读取信息.

图1 小树

图2 不断获取能量成长的树

图片插入到页面中，可以选择图片轮换的方式，这样节省页面的区域空间，同时能更新信息，添加了生动性;使用图片首尾连接的方式，能在短时间内看到图片传递的信息.

2.3 超链接

超链接是指从一个网页指向另一个网页，或者指向同一个页面的不同位置.在页面中常见的超级链接是给文本、图片建立超链接.

一般情况下，超链接分为绝对链接与相对链接.绝对链接的路径必须是完整的URL，包括所使用的传输协议http或硬盘的盘符;相对路径是以当前文档所在位置为开始到链接目标所经过的路径.通常，使用相对路径时建议所有文件都存放在站点中.

图片不同位置可以创建不同的超级链接，如实现该功能，需要与图片的热点区域结合使用，在图片不同位置绘制热点区域并创建超级链接.2.4 导航栏

导航栏的形式多样，分为文字、图片和FLASH按钮编辑的导航菜单.文字制作的导航尽可能的容纳丰富的信息;图片和FLASH按钮编辑的导航菜单主要是外观上丰富多彩，容纳的信息少.

导航栏在页面中起到引导作用，这就需要导航菜单在设计时必须合理清晰，准确定位链接的页面.被人熟知的电子商务平台如淘宝、天猫，导航栏是页面中不可或缺的一个元素.平台中所有商品都是通过导航栏展示在页面中，浏览者根据个人需要去查找所需的物品信息，满足个人的需求.此时，若用超文本链接二级页面的商品是实现不了的，无法在页面中合理的排列所有商品.导航栏可以通过子菜单链接商品，子菜单需要时显示，否则就隐藏，这种布局不占用页面空间，如图3所示.

图3 天猫的导航菜单

3 动态元素的应用

页面只静不动，犹如一潭死水，没有任何生机，浏览者访问页面会丢失继续浏览的兴趣.为了留住更多的用户，在不影响页面原有的设计的基础上，适当的添加动态效果，能让页面生动起来，增加人气，页面的访问量就得以提升.例如图像飘动、弹出信息、跟随鼠标移动的图案等，这些动态效果实现起来简单，但要适当合理的运用才能锦上添花.

用户删除某个操作会造成一定的影响，此时若在真正的删除之前弹出一个友情提示窗口，用户顿时觉得这是个贴心的服务，用户在删除时会仔细考虑再做出是否删除的决定.电商购物平台中购物车添加商品进行编辑时就有这个温馨的提示信息.

图像飘动的运用，能给网页增加飘逸性、活泼性.页面中的图片在理论上支持*.png、*.jpg和*.gif动画格式，但在实际应用中，设计者会选择*.gif动画和*.jpg.因为*.gif动画容量小还生动，不失真，不占用页面的空间;*.jpg图片能真实、清晰的表达所需要传递的信息.跟随鼠标移动的图案动态效果可以插入到儿童页面中，儿童在浏览时会觉得很新奇，激发他们的想象力，也被页面吸引住舍不得离开.

4 其他元素的运用

4.1 色彩

在网页设计中，色彩是一个不可忽略的重要因素.因为整个页面的色彩搭配的完美，不仅能对浏览者的视觉审美起到一个刺激的作用，而且能抓住浏览者的心理，留住用户.在网页设计中如何才能正确用色，这是需要设计者长期积累的过程，不是一蹴而就的.不管怎样，设计者对页面设计用色的基本常识的了解，这是很有必要的.网页界面中的色彩分冷、暖色调，在运用时要理解不同颜色代表不同的涵义.譬如，白色是洁白无瑕的，给人洁净、纯真等美好的想法;黑色往往给人庄重、严肃的印象，容易让人产生悲哀、恐怖、不祥等消极印象;红色在中国代表喜庆，易使人联想起太阳、热情、积极、希望等向上的倾向;蓝色是甜美的，一说起蓝色，用户就会在第一时间想到蓝色的天空与海洋，给人一种唯美、甜蜜的浪漫气息.

在网页用色中，色彩搭配应遵循“总体协调、局部对比”的大原则;同时对于具体的页面用色会从“单色－五彩缤纷－标准色－单色”的一个制作趋势选取色彩.无论什么样的原则，只要合理的搭配页面的用色，就能起到事半功倍的作用.

4.2 多媒体元素

随多媒体技术的普遍应用，Internet的功能日益完善.音乐、动画、视频等媒体元素应用到网页中，有利于制作出动感、受用户青睐的网页.

音乐是能释放心情、缓解生活压力的一种有力的工具.大部分年轻人都生活在压力之中，闲暇时浏览有音乐伴随的网页，心情豁然开朗.很多优美的文字与音乐相配，在阅读的过程中，读者顿时感到轻松、愉悦，有与文字意境同在的体验.浏览者访问qq好友空间的页面，聆听音乐，访问页面能明了好友的心情，同时也是与好友进行一种无声的交流.

Flash动画是当今流行的Web页面动画格式，具有体积小、动感强的特点.将Flash动画运用到页面中，可以增加浏览者点击动画页面的机会，另外对浏览者的视觉产生强有力的冲击，可以更好的满足用户的需求，使网页有声有色.

5 结束语

设计元素是呈现页面设计主题内容的，但如何体现是值得深究的一个方向.通过对页面元素与页面设计的分析得出设计页面是一项复杂的“工程”，设计者不仅要有计算机技术的设计能力、心理学的分析能力，还需有艺术设计的视觉审美.作为一名网页设计者，仅仅是对实际操作的过程中常见的几个元素进行分析与探讨，期望能更好的设计出出彩的页面.

［1］李貌，徐林涛.网页设计中的色彩搭配研究［J］.包装工程，2016，37(16):177～180.

［2］张乃恒.网页界面设计风格多样化研究［D］.南京:东南大学，2015.

［3］高翔.巧页设计中文字巧素的应用与研究［J］.美术视点，2014，11.

［4］程辉.色彩在网页界面设计制作中的应用［J］.现代装饰(理论)，2014，12.

The Analysis and Discussion of Web Design Factors

Liu Huamin
(Auhui Wonder Information Engineering University)

Design web pages should have Internet+ thinking，which should meet the demand of customer.The integrated use of elements such as words，pictures and multimedia，can improve web aesthetic effect，the timely interaction between web interface with the users is provided and a better experience are gained.Application of this principle for the design of the web page can improve the speed of information dissemination，useful informationed can be quickly and accurately obtained，and page access will be improved.

Internet+;Exchange interaction;Page view

TP393.02

:A

:1000－5617(2017)01－0071－04

(责任编辑:李家云)

2016－12－03

*安徽省省级质量工程精品资源共享课程“《数据结构》精品课程”研究成果(2016gxx060)