网站界面UI设计.docx

网站界面UI设计.docx

《网站界面UI设计.docx》由会员分享，可在线阅读，更多相关《网站界面UI设计.docx（9页珍藏版）》请在冰豆网上搜索。

网站界面UI设计

2014届本科毕业论文

网站界面UI设计

*******　张帅杰　

系别：

计算机与信息技术学院

专业：

信息管理与信息系统

学号：

*********

*******

2014年4月13日

网站界面UI设计

摘要

UI的本意就是用户界面，而用户界面是人与机的交互，要使人机交互和谐、沟通顺畅，就必须设计出符合人机操作的简易性、合理性，来拉近人与机之间的距离。

在发展迅速的互联网科技信息时代，知识在不断更新，科技越来越发达，界面的设计工作渐渐地被重视起来。

一个网站拥有美观的界面会给人们带来舒适的视觉享受与操作体验，是建立在科学技术性上的艺术设计。

检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，更不是设计师的个人意愿，而是终端用户的感受，UI设计就是为了实现这些和谐、舒适、协调、美观而产生的，目的就是设计出更加合理的人机交互界面，实现人机交互的合理性，实现UI设计的价值意义。

本文的主要内容就是针对网站界面的UI设计进行了相关的阐述，来进一步探究UI设计的重要性。

关键词

网站；网页设计；UI设计；交互界面

WebinterfacedesignofUI

Abstract

UIwastheoriginalpurposeoftheuserinterface,andtheuserinterfaceistheinteractionbetweenpeo-pleandmachines,tomakethehuman-computerinteractionandharmonious,smoothcommunication,itisnecessarytodesigntheman-machineoperationsimplicity,rationality,topullclosethedistancebetweent-hemachine.WiththerapiddevelopmentofInternettechnology,knowledgeontheincrease,technologyfu-rtherdeveloped,interfacedesignofalittlebitofattention.Awebsitewithgoodinterfacewillbringcomfo-rtablevisionforpeopletoenjoyandoperatingexperience,theartisticdesignisbasedonthescienceandt-echnologyofthestandardtest,aninterfaceisnotaprojectgroupleader'sopinionnorprojectmembersvot-ingresults,moreisnotthedesigner'spersonalwishes,buttheterminalthefeelingoftheusers,theUIisd-esignedtorealizetheharmonious,comfortable,harmonious,beautifulandproduces,thepurposeistodes-ignamorereasonableman-machineinterface,realizetherationalityofhuman-computerinteraction,ther-ealizationofthevalueofthesignificanceofUIdesign.ThemaincontentofthispaperisaimedatthewebinterfacedesignofUIisdiscussedindetails,tofurtherexploretheimportanceofUIdesign.

Keywords

Website；WebpageDesign；UserInterfaceDesign；InteractionInterface

引言

21世纪的今天，科技、经济、人们的生活方式较以往发生了巨大的改变，是人类的进步推动了社会的发展。

互联网的发明给人们的生活方式带来了新的改变，互联网代表着一种崭新的信息交流方式，它使信息的交流与传播打破了地域上的限制，扩大了信息交流与传播的范围，提高了速度与效率。

当今是科技的时代，更是信息发达的时代，信息的作用在社会发展中占有举足轻重的地位，而目前互联网的信息传播方式大都展现在网站上，而网站的类型又是多种多样的，不同的类型给人们传达的信息方式也是不一样的，但是他们都有一个共同的特点，就是通过网站内部模块、图文信息、服务方式等将信息传达给人们，那么这么多类型的网站，究竟什么样的网站才更适合人们获取准确、清晰的信息呢，这就关乎到网站界面的UI设计。

1网站网站界面UI设计的定义

1.1网站

网站：

网站是一种展现现代科技网络技术的新式工具，它可以将多个网页集成在一起构成一个站点，在站点上可以放置一些有用的或是需要让用户浏览的信息。

1.2网站界面

网站界面是网站呈现给人们的非常直观的一种版面，界面的内部设有许多信息模块，模块包含有图片、文字、音像等等内容，人们就是通过这些信息模块来获取信息，从而将信息应用到人们的各种生活活动当中。

1.3UI设计

UI设计：

UI的英文全称为UserInterface，指的是用户界面的意思，那么UI设计就是指在设计上实现软件界面与人的交互操作，并且将其效果实现的更加合理、更加人性化，从而满足人们在体验操作界面上的心理需求。

2网站的类型与作用

网站有各种各样的类型，也有各种各样的作用，大致可分为以下几种：

2.1资讯门户类网站

这类网站以提供信息资讯为主要目的。

它是目前最流行的网站形式之一，此类网站虽然所涉及的功能比较简单，但所包含的工作类型却很多，信息拥有量大，访问对象广，它的功能一般包含查找、讨论、留言，另外还有少数设置了浏览权限的控制。

比如很多企业网站中设立只对代理商设计的栏目或是频道，如新浪、搜狐、新华网。

2.2企业品牌类网站

企业品牌类网站非常重视在设计上的创意，对于优化设计方面要求相当严格，优美的flash动画是这类网站常用的表现形式之一。

比如：

联想IBM。

2.3交易类网站

这类网站的目的是实现沟通商议的达成，以客户所下的订单为中心，其重点在于业务模型的质量好坏。

比如：

淘宝、易趣、拍拍。

2.4社区类网站

社区网站是指分了很多类的，有很多注册用户的大型网站，和BBS具有相似的功能。

比如:

猫扑、天涯。

2.5政府机构类网站

政府机构类网站一般指政府机关所设立的网站。

比如：

税务局类网站、政府网站。

3网站界面的功能介绍

当我们打开一个网站（一个网站包含着许多个网页）的时候，就会看到有图片、文字、音频、动画等许多模块组成的版面，我们称之为网站中网页的界面。

不同的模块包含着不同的信息内容或服务，这是一种传递信息的方式。

当然，一个网站又不止一个网页集合而成，每个网页上又有许多链接可以进入不同的网站或是本网站的一个子网页，不同的链接又可以进入不同的功能界面，感受不同的操作体验。

一个完整的网站包含着网站整体结构的布局、网站展示的背景色调、网站的LOGO、导航条、广告、图文信息、图文链接、子网页、后台管理、公司或企业注册信息、网站版权等内容。

3.1网站的结构布局与视觉感受

网站的结构布局与视觉感受对一个网站是否被关注起着至关重要的作用。

例如一个网站的首页如果结构布局凌乱不堪，视觉感官令人厌烦，那么将会造成浏览者对其关注的吸引力下降，甚至根本就不会接着浏览该网站所展示的信息，这不仅将会使公司或企业损失一位客户，并且还会造成极大的负面影响，给公司或企业的形象带来损害。

因此，结构布局的合理性，视觉感官的舒适性必将是一个网站成功与否的关键，这就关乎到网站界面UI设计的技术性与结构布局的逻辑合理性。

3.2网站的LOGO

网站的LOGO是网站的标志，网站LOGO的设计也要符合一定的要求，比如易识别性、与公司的关联性、美观性等条件。

它好比人的面貌气质，透漏着一个网站的整体信息与形象，因此LOGO的设计同样重要；界面导航条好比生活中城市街道的指路标，导航条内容的清晰度、准确性、操作简单易用性同样关乎着一个网站的整体质量，是每一个网站都不可缺少的重要结构之一。

3.3广告

每个网站的页面都会呈现企业或公司的宣传广告或是公司理念，特别是商业性质的网站会有关于产品或服务的广告，这些广告给人以一种直观、易懂的画面，从整体上网站页面的动感，从而吸引浏览者对网站的关注；网站内部的图文信息也起着非常重要的作用，图文信息表现出了一个网站的服务内容，图文信息的合理性、简洁性、易懂性、吸引性也关乎着一个网站整体的质量，若图文信息过于杂乱，过于繁琐，必将引起浏览者获取信息的不满，因此在编排上，内容上，信息准确易懂，内容精简易读上都要有合理的布局，以将图文信息表达的更合乎情理，更准确高效。

以上这些内容都是一个网站所必备的重要内容，关系着整个网站的好与坏，甚至成败。

而这些成败的关键因素还在于UI设计的合理性，因为网站中所展示出来的所有内容都是一种UI设计，而UI设计与用户的体验是分不开的，UI设计的好就说明用户体验好，用户体验差就说明UI设计的差，因此一个网站的UI设计是相当的重要，对于网站将来的成功起着决定作用。

4网站界面UI设计

4.1网站界面UI设计应具备的条件

4.1.1熟悉网站知识，并能独立完成项目开发，网页设计等相关操作

要想从事网站界面的UI设计，必须要懂得网站知识。

例如网站的制作流程，网页整体的页面布局，以及相关网站性质的知识，并能够把控网站的整体统一性。

设计一个网站不仅仅是将图文信息、音像等信息摆放到页面那么简单，而是要从用户实用性入手，清楚明了所要设计的网站的性质，看是什么类型的网站，政府机构的还是商业用途的，不同的性质有不同的设计风格，例如政府机构的网站是一种与社会人民相互沟通、公告信息、发布条文类的网站，主要是为了公众能够获知一些政府的重要举措，重要下达文件，及倡导社会民风，道德规范等等。

有了对网站整体系统的了解，才能设计出更加合乎情理的网站页面。

那么何为合乎情理呢？

这就要从网页设计的目的来说，设计一个网页就是要突出该网页所要呈现出来的主要信息，让浏览者一眼就能看出重点信息，如若网页信息过于繁多，又突出不了主要信息，看不出信息等级的差别或是层次，那么浏览者就会费力去查看这些信息给他们的获取带来不便。

如果浏览者没有一定的耐心，就可能不会继续浏览网页，甚至产生厌恶，结果就是一个客户的丢失，网站形象的倒塌，因此主题信息需要明确突出，这一点是很关键的。

有了主题信息就要围绕主题进行设计，包括其它板块的设计都离不开主题所要表达的内容信息，而这些承载内容信息的其他版块又要有一个合理的规划，包括文字信息的精炼简洁，摆放位置的合理易查等。

综合上述就可以对整个网页进行一个合理的布局设计了，这个环节相当重要，因为每个网站页面的所有板块都不是随意摆放的，他们摆放的位置是经过仔细定位认真考虑、逻辑感官所布局的。

比如人们的视觉感官或是图文呈现的视觉冲击力，就一些图片模块而言，要有一种视觉集中显现的布局，包括图片的角度，视觉聚焦的范围，这都要求有一定的设计感和布局顺序性，这只是描述布局方面的一个局部，关于网页的布局还有很多，但都脱离不了主题的最终传达与整个版面的主旨信息，这样就可组织不同的模块信息进行对网页的布局了。

4.1.2要有一定的色彩运用知识

色彩在网页布局与设计方面所表现出的重要性也不可忽视，它能够使网页更具活力，更能体现出网页精彩的一面，能使人感到愉悦舒适，并能烘托出网页主要信息的整体与协调性。

色彩布局合理，整个网页表现的才更加完整。

关于色彩对网页的重要性有许多方面，比如冷暖色调的搭配，不同颜色所代表的意义，好比红色代表着激情、火力、欢乐、正能量；蓝色代表着理智、淡定、稳重；绿色代表着年轻、希望、成长；黄色代表着智慧、正气、乐观等。

不同的颜色有不同的含义，也象征着不同的意义，对于不同的网站又要有不同的色调，色调搭配合理，布局设计感强，才能将整个网站表达的更为成功，否则就会适得其反，得不到想要表达的主旨意义。

就好比一个婚庆网站用灰色或是蓝色来作为主题色调，那么即使网站布局的再漂亮，内容设计的再优美，广告设计的再精彩，在客户看来这都不会使他们感觉到那种带着欢乐与幸福的气氛，婚庆网站要突出的主题是获得美满的婚姻，有一个幸福快乐的家庭的诞生，可是灰色、蓝色给人的感觉并不是这样的，这就说明了色彩在制作网页时的重要性。

所以说色彩的运用在网页设计上是必不可少的，占有一定的地位。

4.1.3要具备较强的软件使用操作能力

对于网页设计的布局和色彩的运用及相关网页知识有个整体的了解才能设计出一个成功的网页版面，但是只会描绘出这种成功的版面是远远不够的，因为版面要呈现给人们就要将其设计出来，而设计出来还需要借助处理软件将其效果实现出来，若没有这种处理软件的运用能力，就不能将其效果实现出来，从而展示不了给人们，那么再好的页面，再成功的设计也算是没有价值了。

对于网页设计必须掌握以下软件的应用操作：

Photoshop：

AdobePhotoshop，简称“PS”它主要用来处理编辑以像素为单位构成的图像，在矢量图形上也具有编辑功能，但是只是做一些简单地操作。

它也是网页设计当中使用的最多的软件之一。

Illustrator：

AdobeIllustrator简称“AI”是一种专业绘制矢量图形的软件，还具有排版、设计等功能，能够与PS软件结合使用。

CorelDraw：

它与AI类似，也具有PS的一些功能，是PS软件比较好的搭档，利用他们之间的结合会设计出更加美观的图像。

Fireworks：

是一种网页设计作图软件，用来使Web设计与制作更加顺利，同时也有制作动画的功能，与Flash相似。

Dreamweaver：

是用来专门制作网站的软件，可以结合Fireworks、Photoshop等软件在网页上进行使用。

Flash：

经常用于网页和软件程序中，它能够制作各种各样的应用程序，比如MV、声音、图形和动画等，在这方面具有非常强悍的功能。

以上这些软件中，Photoshop、Fireworks或Flash、Dreamweaver被称为“网页三剑客”它们都是网页设计中必备的设计软件。

4.1.4要具备一定的专业素质与职业道德

不论是做什么样的工作，从事什么样的职业，一定要有对工作的热忱，对任务的负责以及一定的职业道德，这是对工作的负责也是对设计行业的负责，这不仅是一种责任更是一种义务。

设计就是一种思想的表达，在设计的过程中，也许会有很多设计以供参考，但是绝对不能抄袭他人的设计思想，只能借鉴或是从中获得一些灵感创意，否则，则是对其他设计的不尊重与侵权，这不仅败坏个人品德，而且还会扰乱设计行业秩序，给社会带来不必要的麻烦，因此专业素质与职业素养对于一个设计师必须具备。

4.2网站界面UI设计的流程

4.2.1确定网站主题和目标用户

有了网站主题，就可以根据主题内容来定位目标用户，从而为网站整体的设计确定方向，比如游戏类网站，它们的目标用户就是游戏界的人群，那么就要设计出具有吸引力，游戏动感渲染强的网站版面氛围，能给游戏者带来刺激、新鲜、好奇等感受，同时从这种画面当中传递游戏技能、道具、活动、赛事等相关信息。

如果不定位这些目标客户群，了解不了他们的需求，那么就可能设计不出有价值的网页，失去网站设计的意义。

因此，确定目标，定位准确相当重要。

4.2.2搜集有关主题的各种信息及进行用户调查

要想使一个网页充分地体现它的价值，就必须将主题表现的淋漓尽致，因此搜集相关主题的详细信息非常有必要。

比如一个销售仪器的商业网站，那么网站里面就必须有产品的成品图片信息、功能介绍、与其它同类产品的优势比较等相关信息，只有对其有了详细的描述，用户才能更加了解产品，从而产生购买订购欲望，促成交易的达成。

另外，对于用户的调查还可以给厂家带来产品的定位，时代变了，市场模式也跟着变了，以前的市场上是厂家生产什么，消费者就购买什么，没有什么接受与不接受，只有用还是不用，是市场决定消费者的形势。

当今社会，是消费者决定市场的时代，一切都以消费者为中心，消费者喜欢什么，乐意接受什么样的产品，厂家或生产商就生产什么，销售什么。

因此用户调查必不可少。

4.2.3网站初期规划制定

待目标明确，客户确定，资料详细，用户调查统计完毕，就开始进行网站的设计，设计也要定制不同的方案，以便日后调整择优，选出最佳方案。

4.2.4进行用户反馈与设计定稿

设计完成后，需要进行用户反馈，根据用户反馈的信息来决定设计的成功与否，如若不成功则进行重新的规划设计，如若成功就要着手设计效果的实现，并将网站测试上传。

4.3网站界面UI设计的原则

4.3.1简易性

简易性给人们的感觉就是整体界面简洁清爽，操作起来干脆利落，这样就会使人们在操作过程中得到更好地体验。

4.3.2记忆负担最小化

界面的设计就是为了方便人们迅速获取有价值的信息，只有将界面设计制作的更加简单易懂、清晰易查，才更够使浏览者或是用户在最短的时间内获取想要知道的信息，减轻用户在记忆上的遗忘性。

4.3.3安全性

界面的设计不能让用户感觉到自己不敢操作或是带有个人利益的损失等不安全因素。

4.3.4人性化

人性化就是指更够给用户带来高效率的操作，使用户在体验上更加满意，更加符合用户想要操作的要求。

4.3.5美观与协调性原则

这就要求设计的界面美观性要与网页主题内容协调一致，和谐统一。

4.4网站界面UI设计的意义

UI的本意就是用户界面，而用户界面是人与机的交互，要使人机交互和谐，沟通顺畅，就必须设计出符合人机操作的简易性、合理性，来拉近人与机之间的距离。

在发展迅速的互联网科技时代，知识在不断更新，科技在进一步发达，界面的设计工作越来越受到人们的重视，其实界面设计就好比产品漂亮的外观一样，是人们关注的焦点之一。

一个网站若是能呈现出美观的界面将会给人们带来舒适的视觉享受与操作体验，从而实现人机交互操作的最优化。

检验一个操作界面标准的好坏不是设计开发者自己的意见或认知，也不是他人发表的意见，更不是领导的个人意愿，而是终端用户的感受，UI设计就是为了实现这些和谐、舒适、协调、美观而产生的，目的就是设计出更加合理的人机交互界面，实现人机交互的合理性，实现UI设计的价值意义。

5网站界面UI设计的走向

网站界面的设计是基于浏览者的审美、文化、修养，以及信息传播的一般方式，还有网页的开发技术。

对于绝大部分的网站来说，没有足够的力量去研究用户新的习惯与需求，也不可能研究出新的技术性功能，仅在某些大的网站中才能够看到一些设计趋势。

对于如何能够使网站具有符合用户的使用需求，让网站变得更强大、具有更好的用户体验，只有大胆、大步的尝试新的网站类型的开发。

从有关网页设计方面的资料中可以总结以下几种发展的趋势。

5.1固定头部

使用CSS中position：

fixed属性来使网站的头部固定在网页中的最合适的位置。

有两种方法：

绝对定位和相对定位。

两者还可以相互结合使用，利用父级子级的关系进行调整。

这是一种非常流行的设计，并且看上去布局很搭配。

但从美学角度看，这中固定的条目减小了操作网站的距离感是一种特别用户体验。

5.2大背景图片

大背景图片也是一种非常流行而且高端大气的发展趋势，许多摄影师或摄影爱好者都喜欢这种设计方式，它要求设计者要有很好的审美观，能选出高品质且极具吸引力的图片，如果再加上一些动态效果，使图片自动切换，那么效果将会更好。

把较大图片设计成背景能够在最短的时间内吸引到用户的关注，如果这种效果能使用户感到特别的肯定，就可以使用户迅速的被网站吸引，从而喜欢该网站，使网站在用户看来更专业、更大气。

5.3CSS透明

CSS3的新属性已经允许编辑网页上任何元素的不透明，这就意味着界面设计师们能够在不使用Ps的情况下，在现代浏览器中实现透明。

操作透明CSS的设计技巧是通过RGB（颜色语法），在进行CSS编辑时指定具体的R，G，B以及透明度，这是一种设计趋势。

5.4社交媒体标记

网络营销已经成为决定网站成功或失败的重要因素。

社交化媒体和渗透式营销在很多类型的网站中逐渐流行起来。

5.5滑动的网页面板

滑动的网页版面较静态的网页版面具有灵活、美观等优势，更给人们带来不一样的操作感受，更体现了人性化、合理化。

5.6CSS动画

CSS的出现可以让设计师利用不同的CSS属性来实现动画效果。

比如：

hover过渡效果，这是一种伪类代码。

总结

网站界面的设计从以前的只重技术不重设计正逐渐改善为两者兼顾，设计的重要性和技术性是同等重要的。

如果只重技术而设计的不好，那么即使技术性再强也达不到好的用户体验效果，从而不能满足一个网站总的功能的发挥，这样就影响了网站的价值，只有将技术性和设计效果结合起来才能达到更好的用户体验，更合理的人机交互，实现网站存在的价值。

因此，网站界面的UI设计对于网站的建设非常重要。

然而目前UI在中国还是还不够流行的，就是一些设计人员对这个词也不甚了解。

从市面上的一些招聘情况上就可以看到招聘界面美工或界面美术设计师之类的招聘，这就表明在国内对UI的理解还处在美术设计层面上，缺乏对用户交互重要性的理解，这也是UI设计发展过程中所必须经历的阶段。

虽然UI设计还处于一个发展的初期阶段，但是目前已经有许多公司开始重视UI的开发与地位，比如金山公司的产品，由于重视UI设计，金山产品才能在同类软件产品中技高一筹。

UI设计的重要性不仅仅表现于此，它更体现了人类社会的发展，人们已不再仅仅满足于功能上的需求，而是追求一种更为和谐、更具人性化的精神体验，UI设计不仅是一种创意，更是一种科学性的艺术。

参考文献

[1][英]GilesColborne.交互设计四策略[M].北京.人民邮电出版社，2011.7

[2]陈义文,张福堂.商务网站建设项目化教程[M].北京.冶金工业出版社,2010.1

[3]张国勇,邹蕾.DreamweaverCS6白金手册[M].北京.清华大学出版社,2013.1

[4]彭锋美学与艺术[M].北京.北京大学出版社，2005.11

[5]何新奇网站制作与网站建设[M].北京.人民邮电出版社，2013.8

[6]加瑞特用户体验要素[M].北京.机械工业出版社，2011.7

[7][美]JeffJohnson.认知与设计[M].人民邮电出版社，2011.9

致谢

即将走出校门的我，此时此刻正在为毕业之后的工作努力，回想起来大学生活竟然过的如此之快，转眼间就要走出校园进入社会，面临毕业百感交集，有不舍也有兴奋。

不舍的是大学这几年当中在讲台上孜孜不倦给我上课的老师们，是他们教会了我怎样去学习，怎样去珍惜大学生活，在他们的帮助下我的大学生活才如此充实。

在论文写作期间，特别感谢我的论文指导老师田素霞，在这里向田老师致以崇高的敬意和衷心的感谢。

感谢她在百忙之余对于我的指导和帮助，并且给我提出了很多宝贵的意见，使我的论文写作能够顺利的完成。

田老师对学生的关心与包容让我深表感激，她严谨的治学态度和渊博的学术造诣更是让我深有体会，同时也给了我很大的激励作用，在此再一次由衷的感谢我敬爱田老