下载

0下载券

加入VIP
  • 专属下载券
  • 上传内容扩展
  • 资料优先审核
  • 免费资料无限下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 网站界面UI设计

网站界面UI设计.doc

网站界面UI设计

张强义
2018-05-02 0人阅读 举报 0 0 0 暂无简介

简介:本文档为《网站界面UI设计doc》,可适用于高等教育领域

网站界面UI设计届本科毕业论文网站界面UI设计姓名:张帅杰系别:计算机与信息技术学院专业:信息管理与信息系统学号:指导教师:田素霞年月日目录网站网站界面UI设计的定义网站网站界面UI设计网站的类型与作用资讯门户类网站企业品牌类网站交易类网站社区类网站政府机构类网站网站界面的功能介绍网站的结构布局与视觉感受网站的LOGO广告网站界面UI设计网站界面UI设计应具备的条件熟悉网站知识并能独立完成项目开发网页设计等相关操作要有一定的色彩运用知识要具备较强的软件使用操作能力要具备一定的专业素质与职业道德网站界面UI设计的流程确定网站主题和目标用户搜集有关主题的各种信息及进行用户调查网站初期规划制定进行用户反馈与设计定稿网站界面UI设计的原则简易性记忆负担最小化安全性人性化美观与协调性原则网站界面UI设计的意义网站界面UI设计的走向固定头部大背景图片CSS透明社交媒体标记滑动的网页面板CSS动画总结参考文献致谢I网站界面UI设计摘要UI的本意就是用户界面而用户界面是人与机的交互要使人机交互和谐、沟通顺畅就必须设计出符合人机操作的简易性、合理性来拉近人与机之间的距离。在发展迅速的互联网科技信息时代知识在不断更新科技越来越发达界面的设计工作渐渐地被重视起来。一个网站拥有美观的界面会给人们带来舒适的视觉享受与操作体验是建立在科学技术性上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果更不是设计师的个人意愿而是终端用户的感受UI设计就是为了实现这些和谐、舒适、协调、美观而产生的目的就是设计出更加合理的人机交互界面实现人机交互的合理性实现UI设计的价值意义。关键词网站网页设计UI设计交互界面WebinterfacedesignofUIAbstractUIwastheoriginalpurposeoftheuserinterface,andtheuserinterfaceistheinteractionbetweenpeopleandmachines,tomakethehumancomputerinteractionandharmonious,smoothcommunication,itisnecessarytodesignthemanmachineoperationsimplicity,rationality,topullclosethedistancebetweenthemachineWiththerapiddevelopmentofInternettechnology,knowledgeontheincrease,technologyfurtherdeveloped,interfacedesignofalittlebitofattentionAwebsitewithgoodinterfacewillbringcomfortablevisionforpeopletoenjoyandoperatingexperience,theartisticdesignisbasedonthescienceandtechnologyofthestandardtest,aninterfaceisnotaprojectgroupleader’sopinionnorprojectmembersvotingresults,moreisnotthedesigner’spersonalwishes,buttheterminalthefeelingoftheusers,theUIisdesignedtorealizetheharmonious,comfortable,harmonious,beautifulandproduces,thepurposeistodesignamorereasonablemanmachineinterface,realizetherationalityofhumancomputerinteraction,therealizationofthevalueofthesignificanceofUIdesignThemaincontentofthispaperisaimedatthewebinterfacedesignofUIisdiscussedindetails,tofurtherexploretheimportanceofUIdesignKeywordsWebsiteWebpageDesignUserInterfaceDesignInteractionInterfaceII商丘师范学院届本科毕业论文(设计)引言世纪的今天科技、经济、人们的生活方式较以往发生了巨大的改变是人类的进步推动了社会的发展。互联网的发明给人们的生活方式带来了新的改变互联网代表着一种崭新的信息交流方式它使信息的交流与传播打破了地域上的限制扩大了信息交流与传播的范围提高了速度与效率。当今是科技的时代更是信息发达的时代信息的作用在社会发展中占有举足轻重的地位而目前互联网的信息传播方式大都展现在网站上而网站的类型又是多种多样的不同的类型给人们传达的信息方式也是不一样的但是他们都有一个共同的特点就是通过网站内部模块、图文信息、服务方式等将信息传达给人们那么这么多类型的网站究竟什么样的网站才更适合人们获取准确、清晰的信息呢这就关乎到网站界面的UI设计。网站网站界面UI设计的定义网站网站:网站是一种展现现代科技网络技术的新式工具它可以将多个网页集成在一起构成一个站点在站点上可以放置一些有用的或是需要让用户浏览的信息。网站界面网站界面是网站呈现给人们的非常直观的一种版面界面的内部设有许多信息模块模块包含有图片、文字、音像等等内容人们就是通过这些信息模块来获取信息从而将信息应用到人们的各种生活活动当中。UI设计UI设计:UI的英文全称为UserInterface指的是用户界面的意思那么UI设计就是指在设计上实现软件界面与人的交互操作并且将其效果实现的更加合理、更加人性化从而满足人们在体验操作界面上的心理需求。网站的类型与作用网站有各种各样的类型也有各种各样的作用大致可分为以下几种:资讯门户类网站这类网站以提供信息资讯为主要目的。它是目前最流行的网站形式之一此类网站虽然所涉及的功能比较简单但所包含的工作类型却很多信息拥有量大访问对象广它的功能一般包含查找、讨论、留言另外还有少数设置了浏览权限的控制。比如很多企业网站中设立只对代理商设计的栏目或是频道如新浪、搜狐、新华网。企业品牌类网站企业品牌类网站非常重视在设计上的创意对于优化设计方面要求相当严格优美的flash动画是这类网站常用的表现形式之一。比如:联想IBM。交易类网站这类网站的目的是实现沟通商议的达成以客户所下的订单为中心其重点在于业务模型的质量好坏。比如:淘宝、易趣、拍拍。社区类网站社区网站是指分了很多类的有很多注册用户的大型网站和BBS具有相似的功能。比如:猫扑、天涯。政府机构类网站政府机构类网站一般指政府机关所设立的网站。比如:税务局类网站、政府网站。商丘师范学院届本科毕业论文(设计)网站界面的功能介绍当我们打开一个网站(一个网站包含着许多个网页)的时候就会看到有图片、文字、音频、动画等许多模块组成的版面我们称之为网站中网页的界面。不同的模块包含着不同的信息内容或服务这是一种传递信息的方式。当然一个网站又不止一个网页集合而成每个网页上又有许多链接可以进入不同的网站或是本网站的一个子网页不同的链接又可以进入不同的功能界面感受不同的操作体验。一个完整的网站包含着网站整体结构的布局、网站展示的背景色调、网站的LOGO、导航条、广告、图文信息、图文链接、子网页、后台管理、公司或企业注册信息、网站版权等内容。网站的结构布局与视觉感受网站的结构布局与视觉感受对一个网站是否被关注起着至关重要的作用。例如一个网站的首页如果结构布局凌乱不堪视觉感官令人厌烦那么将会造成浏览者对其关注的吸引力下降甚至根本就不会接着浏览该网站所展示的信息这不仅将会使公司或企业损失一位客户并且还会造成极大的负面影响给公司或企业的形象带来损害。因此结构布局的合理性视觉感官的舒适性必将是一个网站成功与否的关键这就关乎到网站界面UI设计的技术性与结构布局的逻辑合理性。网站的LOGO网站的LOGO是网站的标志网站LOGO的设计也要符合一定的要求比如易识别性、与公司的关联性、美观性等条件。它好比人的面貌气质透漏着一个网站的整体信息与形象因此LOGO的设计同样重要界面导航条好比生活中城市街道的指路标导航条内容的清晰度、准确性、操作简单易用性同样关乎着一个网站的整体质量是每一个网站都不可缺少的重要结构之一。广告每个网站的页面都会呈现企业或公司的宣传广告或是公司理念特别是商业性质的网站会有关于产品或服务的广告这些广告给人以一种直观、易懂的画面从整体上网站页面的动感从而吸引浏览者对网站的关注网站内部的图文信息也起着非常重要的作用图文信息表现出了一个网站的服务内容图文信息的合理性、简洁性、易懂性、吸引性也关乎着一个网站整体的质量若图文信息过于杂乱过于繁琐必将引起浏览者获取信息的不满因此在编排上内容上信息准确易懂内容精简易读上都要有合理的布局以将图文信息表达的更合乎情理更准确高效。以上这些内容都是一个网站所必备的重要内容关系着整个网站的好与坏甚至成败。而这些成败的关键因素还在于UI设计的合理性因为网站中所展示出来的所有内容都是一种UI设计而UI设计与用户的体验是分不开的UI设计的好就说明用户体验好用户体验差就说明UI设计的差因此一个网站的UI设计是相当的重要对于网站将来的成功起着决定作用。网站界面UI设计网站界面UI设计应具备的条件熟悉网站知识并能独立完成项目开发网页设计等相关操作要想从事网站界面的UI设计必须要懂得网站知识。例如网站的制作流程网页整体的页面布局以及相关网站性质的知识并能够把控网站的整体统一性。设计一个网站不仅仅是将图文信息、音像等信息摆放到页面那么简单而是要从用户实用性入手清楚明了所要设计的网站的性质看是什么类型的网站政府机构的还是商业用途的不同的性质有不同的设计风格例如政府机构的网站是一种与社会人民相互沟通、公告信息、发布条文类的网站主要是为了公众能够获知一些政府的重要举措重要下达文件及倡导社会民风道德规范等等。有了对网站整体系统的了解才能设计出更加合乎情理的网站页面。那么何为合乎情理呢,这就要从网页设计的目的来说设计一个网页就是要突出该网页所要呈现出来的主要信息让浏览者一眼就能看出重点信息如若网页信商丘师范学院届本科毕业论文(设计)息过于繁多又突出不了主要信息看不出信息等级的差别或是层次那么浏览者就会费力去查看这些信息给他们的获取带来不便。如果浏览者没有一定的耐心就可能不会继续浏览网页甚至产生厌恶结果就是一个客户的丢失网站形象的倒塌因此主题信息需要明确突出这一点是很关键的。有了主题信息就要围绕主题进行设计包括其它板块的设计都离不开主题所要表达的内容信息而这些承载内容信息的其他版块又要有一个合理的规划包括文字信息的精炼简洁摆放位置的合理易查等。综合上述就可以对整个网页进行一个合理的布局设计了这个环节相当重要因为每个网站页面的所有板块都不是随意摆放的他们摆放的位置是经过仔细定位认真考虑、逻辑感官所布局的。比如人们的视觉感官或是图文呈现的视觉冲击力就一些图片模块而言要有一种视觉集中显现的布局包括图片的角度视觉聚焦的范围这都要求有一定的设计感和布局顺序性这只是描述布局方面的一个局部关于网页的布局还有很多但都脱离不了主题的最终传达与整个版面的主旨信息这样就可组织不同的模块信息进行对网页的布局了。要有一定的色彩运用知识色彩在网页布局与设计方面所表现出的重要性也不可忽视它能够使网页更具活力更能体现出网页精彩的一面能使人感到愉悦舒适并能烘托出网页主要信息的整体与协调性。色彩布局合理整个网页表现的才更加完整。关于色彩对网页的重要性有许多方面比如冷暖色调的搭配不同颜色所代表的意义好比红色代表着激情、火力、欢乐、正能量蓝色代表着理智、淡定、稳重绿色代表着年轻、希望、成长黄色代表着智慧、正气、乐观等。不同的颜色有不同的含义也象征着不同的意义对于不同的网站又要有不同的色调色调搭配合理布局设计感强才能将整个网站表达的更为成功否则就会适得其反得不到想要表达的主旨意义。就好比一个婚庆网站用灰色或是蓝色来作为主题色调那么即使网站布局的再漂亮内容设计的再优美广告设计的再精彩在客户看来这都不会使他们感觉到那种带着欢乐与幸福的气氛婚庆网站要突出的主题是获得美满的婚姻有一个幸福快乐的家庭的诞生可是灰色、蓝色给人的感觉并不是这样的这就说明了色彩在制作网页时的重要性。所以说色彩的运用在网页设计上是必不可少的占有一定的地位。要具备较强的软件使用操作能力对于网页设计的布局和色彩的运用及相关网页知识有个整体的了解才能设计出一个成功的网页版面但是只会描绘出这种成功的版面是远远不够的因为版面要呈现给人们就要将其设计出来而设计出来还需要借助处理软件将其效果实现出来若没有这种处理软件的运用能力就不能将其效果实现出来从而展示不了给人们那么再好的页面再成功的设计也算是没有价值了。对于网页设计必须掌握以下软件的应用操作:Photoshop:AdobePhotoshop简称“PS”它主要用来处理编辑以像素为单位构成的图像在矢量图形上也具有编辑功能但是只是做一些简单地操作。它也是网页设计当中使用的最多的软件之一。Illustrator:AdobeIllustrator简称“AI”是一种专业绘制矢量图形的软件还具有排版、设计等功能能够与PS软件结合使用。CorelDraw:它与AI类似也具有PS的一些功能是PS软件比较好的搭档利用他们之间的结合会设计出更加美观的图像。Fireworks:是一种网页设计作图软件用来使Web设计与制作更加顺利同时也有制作动画的功能与Flash相似。Dreamweaver:是用来专门制作网站的软件可以结合Fireworks、Photoshop等软件在网页上进行使用。Flash:经常用于网页和软件程序中它能够制作各种各样的应用程序比如MV、声音、图形和动画等在这方面具有非常强悍的功能。以上这些软件中Photoshop、Fireworks或Flash、Dreamweaver被称为“网页三剑客”它们都是网页设计中必备的设计软件。商丘师范学院届本科毕业论文(设计)要具备一定的专业素质与职业道德不论是做什么样的工作从事什么样的职业一定要有对工作的热忱对任务的负责以及一定的职业道德这是对工作的负责也是对设计行业的负责这不仅是一种责任更是一种义务。设计就是一种思想的表达在设计的过程中也许会有很多设计以供参考但是绝对不能抄袭他人的设计思想只能借鉴或是从中获得一些灵感创意否则则是对其他设计的不尊重与侵权这不仅败坏个人品德而且还会扰乱设计行业秩序给社会带来不必要的麻烦因此专业素质与职业素养对于一个设计师必须具备。网站界面UI设计的流程确定网站主题和目标用户有了网站主题就可以根据主题内容来定位目标用户从而为网站整体的设计确定方向比如游戏类网站它们的目标用户就是游戏界的人群那么就要设计出具有吸引力游戏动感渲染强的网站版面氛围能给游戏者带来刺激、新鲜、好奇等感受同时从这种画面当中传递游戏技能、道具、活动、赛事等相关信息。如果不定位这些目标客户群了解不了他们的需求那么就可能设计不出有价值的网页失去网站设计的意义。因此确定目标定位准确相当重要。搜集有关主题的各种信息及进行用户调查要想使一个网页充分地体现它的价值就必须将主题表现的淋漓尽致因此搜集相关主题的详细信息非常有必要。比如一个销售仪器的商业网站那么网站里面就必须有产品的成品图片信息、功能介绍、与其它同类产品的优势比较等相关信息只有对其有了详细的描述用户才能更加了解产品从而产生购买订购欲望促成交易的达成。另外对于用户的调查还可以给厂家带来产品的定位时代变了市场模式也跟着变了以前的市场上是厂家生产什么消费者就购买什么没有什么接受与不接受只有用还是不用是市场决定消费者的形势。当今社会是消费者决定市场的时代一切都以消费者为中心消费者喜欢什么乐意接受什么样的产品厂家或生产商就生产什么销售什么。因此用户调查必不可少。网站初期规划制定待目标明确客户确定资料详细用户调查统计完毕就开始进行网站的设计设计也要定制不同的方案以便日后调整择优选出最佳方案。进行用户反馈与设计定稿设计完成后需要进行用户反馈根据用户反馈的信息来决定设计的成功与否如若不成功则进行重新的规划设计如若成功就要着手设计效果的实现并将网站测试上传。网站界面UI设计的原则简易性简易性给人们的感觉就是整体界面简洁清爽操作起来干脆利落这样就会使人们在操作过程中得到更好地体验。记忆负担最小化界面的设计就是为了方便人们迅速获取有价值的信息只有将界面设计制作的更加简单易懂、清晰易查才更够使浏览者或是用户在最短的时间内获取想要知道的信息减轻用户在记忆上的遗忘性。安全性界面的设计不能让用户感觉到自己不敢操作或是带有个人利益的损失等不安全因素。人性化人性化就是指更够给用户带来高效率的操作使用户在体验上更加满意更加符合用户想要操作的要求。美观与协调性原则这就要求设计的界面美观性要与网页主题内容协调一致和谐统一。商丘师范学院届本科毕业论文(设计)网站界面UI设计的意义UI的本意就是用户界面而用户界面是人与机的交互要使人机交互和谐沟通顺畅就必须设计出符合人机操作的简易性、合理性来拉近人与机之间的距离。在发展迅速的互联网科技时代知识在不断更新科技在进一步发达界面的设计工作越来越受到人们的重视其实界面设计就好比产品漂亮的外观一样是人们关注的焦点之一。一个网站若是能呈现出美观的界面将会给人们带来舒适的视觉享受与操作体验从而实现人机交互操作的最优化。检验一个操作界面标准的好坏不是设计开发者自己的意见或认知也不是他人发表的意见更不是领导的个人意愿而是终端用户的感受UI设计就是为了实现这些和谐、舒适、协调、美观而产生的目的就是设计出更加合理的人机交互界面实现人机交互的合理性实现UI设计的价值意义。网站界面UI设计的走向网站界面的设计是基于浏览者的审美、文化、修养以及信息传播的一般方式还有网页的开发技术。对于绝大部分的网站来说没有足够的力量去研究用户新的习惯与需求也不可能研究出新的技术性功能仅在某些大的网站中才能够看到一些设计趋势。对于如何能够使网站具有符合用户的使用需求让网站变得更强大、具有更好的用户体验只有大胆、大步的尝试新的网站类型的开发。从有关网页设计方面的资料中可以总结以下几种发展的趋势。固定头部使用CSS中position:fixed属性来使网站的头部固定在网页中的最合适的位置。有两种方法:绝对定位和相对定位。两者还可以相互结合使用利用父级子级的关系进行调整。这是一种非常流行的设计并且看上去布局很搭配。但从美学角度看这中固定的条目减小了操作网站的距离感是一种特别用户体验。大背景图片大背景图片也是一种非常流行而且高端大气的发展趋势许多摄影师或摄影爱好者都喜欢这种设计方式它要求设计者要有很好的审美观能选出高品质且极具吸引力的图片如果再加上一些动态效果使图片自动切换那么效果将会更好。把较大图片设计成背景能够在最短的时间内吸引到用户的关注如果这种效果能使用户感到特别的肯定就可以使用户迅速的被网站吸引从而喜欢该网站使网站在用户看来更专业、更大气。CSS透明CSS的新属性已经允许编辑网页上任何元素的不透明这就意味着界面设计师们能够在不使用Ps的情况下在现代浏览器中实现透明。操作透明CSS的设计技巧是通过RGB(颜色语法)在进行CSS编辑时指定具体的RGB以及透明度这是一种设计趋势。社交媒体标记网络营销已经成为决定网站成功或失败的重要因素。社交化媒体和渗透式营销在很多类型的网站中逐渐流行起来。滑动的网页面板滑动的网页版面较静态的网页版面具有灵活、美观等优势更给人们带来不一样的操作感受更体现了人性化、合理化。CSS动画CSS的出现可以让设计师利用不同的CSS属性来实现动画效果。比如:hover过渡效果这是一种伪类代码。总结商丘师范学院届本科毕业论文(设计)网站界面的设计从以前的只重技术不重设计正逐渐改善为两者兼顾设计的重要性和技术性是同等重要的。如果只重技术而设计的不好那么即使技术性再强也达不到好的用户体验效果从而不能满足一个网站总的功能的发挥这样就影响了网站的价值只有将技术性和设计效果结合起来才能达到更好的用户体验更合理的人机交互实现网站存在的价值。因此网站界面的UI设计对于网站的建设非常重要。然而目前UI在中国还是还不够流行的就是一些设计人员对这个词也不甚了解。从市面上的一些招聘情况上就可以看到招聘界面美工或界面美术设计师之类的招聘这就表明在国英GilesColborne交互设计四策略M北京人民邮电出版社陈义文,张福堂商务网站建设项目化教程M北京冶金工业出版社,张国勇,邹蕾DreamweaverCS白金手册M北京清华大学出版社,彭锋美学与艺术M北京北京大学出版社何新奇网站制作与网站建设M北京人民邮电出版社加瑞特用户体验要素M北京机械工业出版社美JeffJohnson认知与设计M人民邮电出版社商丘师范学院届本科毕业论文(设计)致谢即将走出校门的我此时此刻正在为毕业之后的工作努力回想起来大学生活竟然过的如此之快转眼间就要走出校园进入社会面临毕业百感交集有不舍也有兴奋。不舍的是大学这几年当中在讲台上孜孜不倦给我上课的老师们是他们教会了我怎样去学习怎样去珍惜大学生活在他们的帮助下我的大学生活才如此充实。在论文写作期间特别感谢我的论文指导老师田素霞在这里向田老师致以崇高的敬意和衷心的感谢。感谢她在百忙之余对于我的指导和帮助并且给我提出了很多宝贵的意见使我的论文写作能够顺利的完成。田老师对学生的关心与包容让我深表感激她严谨的治学态度和渊博的学术造诣更是让我深有体会同时也给了我很大的激励作用在此再一次由衷的感谢我敬爱田老师祝您工作顺利、身体健康~另外也要感谢在大学期间陪伴我的同学们是他们给了我极大的帮助和生活的意义希望你们在新的一年里能够找到好的工作让我们共同努力、共同奋斗不辜负老师们对我们的谆谆教导这才是我们对敬爱的老师们最大的回报~

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

评分:

/19

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利