网页前端设计毕业论文(含设计图)

毕业设计（论文）原创性声明和使用授权说明

原创性声明

本人郑重承诺：所呈交的毕业设计（论文），是我个人在指导教师的指导下进行的研究工作及取得的成果。尽我所知，除文中特别加以标注和致谢的地方外，不包含其他人或组织已经发表或公布过的研究成果，也不包含我为获得及其它教育机构的学位或学历而使用过的材料。对本研究提供过帮助和做出过贡献的个人或集体，均已在文中作了明确的说明并表示了谢意。

作者签名：日期：

指导教师签名：日期：

使用授权说明

本人完全了解大学关于收集、保存、使用毕业设计（论文）的规定，即：按照学校要求提交毕业设计（论文）的印刷本和电子版本；学校有权保存毕业设计（论文）的印刷本和电子版，并提供目录检索与阅览服务；学校可以采用影印、缩印、数字化或其它复制手段保存论文；在不以赢利为目的前提下，学校可以公布论文的部分或全部内容。

作者签名：日期：

学位论文原创性声明

本人郑重声明：所呈交的论文是本人在导师的指导下独立进行研究所取得的研究成果。除了文中特别加以标注引用的内容外，本论文不包含任何其他个人或集体已经发表或撰写的成果作品。对本文的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。本人完全意识到本声明的法律后果由本人承担。

作者签名：日期：年月日

学位论文版权使用授权书

本学位论文作者完全了解学校有关保留、使用学位论文的规定，同意学校保留并向国家有关部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。本人授权大学可以将本学位论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。

涉密论文按学校规定处理。

作者签名：日期：年月日

导师签名：日期：年月日

注意事项

1.设计（论文）的内容包括：

1）封面（按教务处制定的标准封面格式制作）

2）原创性声明

3）中文摘要（300字左右）、关键词

4）外文摘要、关键词

5）目次页（附件不统一编入）

6）论文主体部分：引言（或绪论）、正文、结论

7）参考文献

8）致谢

9）附录（对论文支持必要时）

2.论文字数要求：理工类设计（论文）正文字数不少于1万字（不包括图纸、程序清单等），文科类论文正文字数不少于1.2万字。

3.附件包括：任务书、开题报告、外文译文、译文原文（复印件）。

4.文字、图表要求：

1）文字通顺，语言流畅，书写字迹工整，打印字体及大小符合要求，无错别字，不准请他人代写

2）工程设计类题目的图纸，要求部分用尺规绘制，部分用计算机绘制，所有图纸应符合国家技术标准规范。图表整洁，布局合理，文字注释必须使用工程字书写，不准用徒手画

3）毕业论文须用A4单面打印，论文50页以上的双面打印

4）图表应绘制于无格子的页面上

5）软件工程类课题应有程序清单，并提供电子文档

5.装订顺序

1）设计（论文）

2）附件：按照任务书、开题报告、外文译文、译文原文（复印件）次序装订

指导教师评价：

一、撰写（设计）过程

1、学生在论文（设计）过程中的治学态度、工作精神

□优□良□中□及格□不及格

2、学生掌握专业知识、技能的扎实程度

□优□良□中□及格□不及格

3、学生综合运用所学知识和专业技能分析和解决问题的能力

□优□良□中□及格□不及格

4、研究方法的科学性；技术线路的可行性；设计方案的合理性

□优□良□中□及格□不及格

5、完成毕业论文（设计）期间的出勤情况

□优□良□中□及格□不及格

二、论文（设计）质量

1、论文（设计）的整体结构是否符合撰写规范？

□优□良□中□及格□不及格

2、是否完成指定的论文（设计）任务（包括装订及附件）？

□优□良□中□及格□不及格

三、论文（设计）水平

1、论文（设计）的理论意义或对解决实际问题的指导意义

□优□良□中□及格□不及格

2、论文的观念是否有新意？设计是否有创意？

□优□良□中□及格□不及格

3、论文（设计说明书）所体现的整体水平

□优□良□中□及格□不及格

建议成绩：□优□良□中□及格□不及格

（在所选等级前的□内画“√”）

指导教师：（签名）单位：（盖章）

年月日

评阅教师评价：

一、论文（设计）质量

1、论文（设计）的整体结构是否符合撰写规范？

□优□良□中□及格□不及格

2、是否完成指定的论文（设计）任务（包括装订及附件）？

□优□良□中□及格□不及格

二、论文（设计）水平

1、论文（设计）的理论意义或对解决实际问题的指导意义

□优□良□中□及格□不及格

2、论文的观念是否有新意？设计是否有创意？

□优□良□中□及格□不及格

3、论文（设计说明书）所体现的整体水平

□优□良□中□及格□不及格

建议成绩：□优□良□中□及格□不及格

（在所选等级前的□内画“√”）

评阅教师：（签名）单位：（盖章）

年月日

教研室（或答辩小组）及教学系意见

教研室（或答辩小组）评价：

一、答辩过程

1、毕业论文（设计）的基本要点和见解的叙述情况

□优□良□中□及格□不及格

2、对答辩问题的反应、理解、表达情况

□优□良□中□及格□不及格

3、学生答辩过程中的精神状态

□优□良□中□及格□不及格

二、论文（设计）质量

1、论文（设计）的整体结构是否符合撰写规范？

□优□良□中□及格□不及格

2、是否完成指定的论文（设计）任务（包括装订及附件）？

□优□良□中□及格□不及格

三、论文（设计）水平

1、论文（设计）的理论意义或对解决实际问题的指导意义

□优□良□中□及格□不及格

2、论文的观念是否有新意？设计是否有创意？

□优□良□中□及格□不及格

3、论文（设计说明书）所体现的整体水平

□优□良□中□及格□不及格

评定成绩：□优□良□中□及格□不及格教研室主任（或答辩小组组长）：（签名）

年月日

教学系意见：

系主任：（签名）

年月日

摘要：网页界面作为网站信息传达的载体，网页给人最直观的感受就是它的页面框架与构造，网页设计中的构图也足以影响到整个网站给人的感受。就网页其构图而言，其视觉表现力具有影响受众审美情感的作用。本文重点讲述了“轻奢生活网”网页设计中构图技巧的运用。网站定位为时尚信息服务平台，专为热爱时尚、热爱生活的人提供前沿的设计理念与产品，内容分为设计、名品、乐活、家居四大类。运用Photoshop工具制作网站首页及栏目页及栏目子页面。结合构图技巧在网页设计界面中的运用情况，阐述几何图形运用、素材点缀、斜线修饰等构图技巧适应网页界面设计发展的新特点。

关键词：网页界面；构图设计；时尚平台；Photoshop

目录

引言 (1)

1 市场调研 (1)

1.1时尚信息服务平台现状 (1)

1.2 构图设计在网页设计中的现状 (2)

2 文献检索 (3)

2.1构图在网页设计中的表现形式 (3)

2.2 构图在网页设计中的规律 (3)

3 设计实践 (5)

3.1 创作初衷 (5)

3.2 创作过程 (5)

3.4 创作总结 (20)

4 设计自评 (21)

4.1理念与市场 (21)

4.2 创作与社会效益 (22)

致谢 (22)

参考文献 (22)

附录1 设计作品图片 (23)

附录2 设计作品光盘 (29)

引言

“轻奢生活”，不仅代表一种精品生活方式，更代表着大家正在享受的高质量生活细节，而且绝非是遥不可及的。在奢侈品消费观念方面，轻奢早已超越了“珠光宝气”的阶段，而趋于一种理性、健康的消费方式，购买奢侈品不是崇拜，而是能切实反映自我的心境、品位和信念。轻奢生活网”的定位不是“淘便宜”，瞄准的是那些因为欣赏商品的设计感而愿意多掏钱的中高端消费者。轻奢生活网的页面是时尚设计信息的载体，所以页面设计则是浏览者对信息的视觉生理、心理反应的关键。本文从视觉基础理论入手，以构图设计对视觉的影响的运用为主线，分析了网页的板式、文字、色彩、图像等元素的在网页界面中的表达方式。在网页设计上起到事半功倍的效果。从审美的角度阐释了构图设计对网页整体视觉效果的影响。

1 市场调研

1.1 时尚信息服务平台现状

同时各种折扣和导购信息网站也跟着出现，对各种产品信息进行汇聚和评比，给买家和卖家建立一个公共服务的平台。目前国外的新一代导购网站模式正在日益成熟，那就是社会购物，它是基于社交网络Social Networking的衍生品，这类网站从2005年以后出现，借助Web 2.0的各项技术日益形成以借助Crowd 的力量进行产品的汇聚、评比、推荐和分享，如何汇聚每个人的力量来进行购物成为了电子商务前段的新亮点。

国内外的设计师有很多出色的设计品，但他们并不擅于商业经营，导致设计品无法被更多的人发现。还有一部分消费者，他们热爱生活热爱时尚，有一定的购买能力，也愿意买高附加值的设计商品，但却不知道在哪里可以买到这些商品。

我也经过了大量的调查、查阅了很多书籍报刊资料。我参考了“美丽说”、“蘑菇街”、“返利网”等导购网站的营运模式和主要客户群，以及他们网站发展一些劣势阻力。蘑菇街的成功，告诉我们，任何事情都需要创新，只有创新才能够受到大众的喜爱。当然，蘑菇街的成功不是偶然，这是迎合了目前大家越来越

喜欢社交网站的趋势，认清消费者心理，当然这跟蘑菇街团队运营是密不可分的，没有好的运营团队也是不可能成功的。蘑菇街以分享社交为前提，吸引一大批女性的喜爱。这是社交与购物的一个非常好的结合。不仅增加了用户体验度，也给消费者提供了展示自己和分享自己喜爱物品的平台。从淘宝客，到返利网，再到现在的购物分享网站，我们很明显的可以看出，现在的用户似乎对用户体验度的要求是越来越高，因此我们在运营一个网站的时候，我们必须把用户体验度放在第一位，要相当重视，只有把用户体验度弄上去了，网站才能做得很好，用户才会更喜欢。所以研究构图设计对网页的影响是很有必要的。另外还有“花瓣网”、“淘宝网”中的家居展示页面、以及“瑞丽”、“YOKA”等时尚类网站。在了解市场动态的同时也发现针对时尚设计在生活方面的网站比较少，因此“轻奢生活”网这个生活类的设计师商品社会化导购网站是可行的。

1.2 构图设计在网页设计中的现状

1.2.1网页设计的发展

作为新型平面设计的网页页面设计，数字化界面运用了和物化界面相同的视觉构成元素。新的大众媒介——数字化的传播手段网络，为我们承载以前诸多媒体综合起来都难以承载的信息量，它以时效性、交互性、更新及时、不受时间、地域的限制、信息反馈及时、准确的特点，带领我们进入信息化的时代，也为我们带来了全新的视觉阅读体验。根据构图设计的不同表现，网页视觉表现为网络信息表现与信息的传递中的重要部分。

我国目前的设计走向问题，已成为设计师们研究的焦点，无论是平面设计、建筑设计或者网页设计都同样会遇到这样的问题。网页设计上出现了欧美、日、韩三大风格的并立，而我国的设计却处于一种模仿的状态，多表现为形式的跟风，少有实质性的研究。网页设计发展的近些年里，网页的视觉表现已经从当初文字编排的单一样式，发展到多种视觉元素的综合运用，而新媒介下的网页设计更是成为了视觉传达的新门类。由此，网页设计中构图设计就成为了一个非常值得研究的课题。

1.2.2构图方法在网页中的运用

构图是造型艺术术语，指作品中艺术形象的结构配置方法。它是造型艺术表达作品思想内容并获得艺术感染力的重要手段。而我们网页制作方面，则可以把

它理解为根据网站题材和建设网站的主题思想，把要表现的形象适当地组织起来，画面中的元素如何布局、如何搭配，构成一个协调的完整的页面。

研究构图的目的是研究在一个平面上处理好三维空间——高、宽、深之间的关系，以突出主题，增强艺术的感染力。构图处理是否得当，是否新颖，是否简洁，对于网页设计的成败关系很大。成功的构图能使页面内容顺理成章，主次分明，主题突出，赏心悦目。反之，就会影响页面的效果，没有章法，缺乏层次。

2 文献检索

网页设计作为一种视觉语言，除了需要photoshop软件扎实的技术支持，还需讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。版式设计通过文字图形的空间组合，表达出和谐与美。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要求处理好页面之间和页面内的秩序与内容的关系。在设计前我阅读了很多文献来帮助我更好的制作网页。

2.1构图在网页设计中的表现形式

当人们浏览网页时，第一眼看到的就是网页的构图。因此，构图是否美观、和谐直接影响到视觉效果。构图不仅要注意到形式，还要考虑到实用性，是否便于人们阅读和观看。

方形的分割是网页设计中常用的方法。矩形的分割给人的感觉是稳定、平和，适于一般性的商业网站。在矩形的构图中，一定要注意应用黄金分割线的比例、构图基本结构的形成规律。一定要有疏密的节奏，要意识到主次关系，上面往往比下面的更受人关注，左边的往往比右边的更受关注，这是人们的基本视觉规律。

螺旋曲线是最有韵律和生命力的线条，适用于艺术、音乐以及内容充满动感和活力的网站。

2.2 构图在网页设计中的规律

1、网页界面设计中，运用构图设计的均齐与平衡规律。均齐式的构图往往比较庄重，而真正的页面上左右同形同量的配置是不多的。平衡的构图较均齐生动活泼，这种平衡的获得多依赖于设计者的视觉感受与经验。页面上的平衡是一

个动态的平衡，是图与底、图形与文字、群组与间距、主次与聚散、色彩的轻重与体积等关系的平衡。

网络构成的界面设计，通过分割将页面分成若干板块，各个板块可以有大有小，但要遵循视觉平衡的规律，注意上与下，左与右的关系，考虑面积的大小，色彩的呼应等因素。这种板式设计方式具有不规则和灵活的特点，但是必须合乎具体的版面内容，并注意因变化过强而导致失衡。在界面设计中，均齐式与平衡可以结合起来运用，比如在整体上使用平衡板式，但在局部使用均齐式标题或图形。

2、网页界面设计中，运用构图设计的变化与统一规律。在我们把大量的信息塞加到网页上去的时候，考虑怎样把它们合理的用统一的方式来排布，使整体感强同时又要有变化，这样使页面更丰富，更有生气，看起开就不感到枯燥，很多网站诸如体育的网站，排布的新闻从上到下几十条，没有一点变化，显得单调而乏味，就是违反这种形式美的规律，所以要充分的运用变化来改进它，从排布的形式上或者颜色上都可以。

3、网页界面设计中，运用构图设计的对比与调和规律。在网页设计中，如何利用它来表达到好的效果呢？首先合理的利用对比因素，例如文本的排布、字体的大小、粗细、颜色、图片的宽窄、比例的反差、透明以及位置的放置等。

4网页界面设计中，运用构图设计的节奏与韵律规律。在网页设计中，按钮的编排就经常会遇到这个问题，做得好的按钮能够使排在一起的诸多按钮富有音乐般的美感，同时丝毫不损失其实用性，既要从形状上，也要从整体的色泽、大小等综合方面入手，才能做到实用与艺术共存的和谐设计。

2.2.1 Photoshop软件介绍

在我的网页页面设计上，主要运用了Photoshop软件图片处理、页面设计制作、切片、图片输出等。

Photoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。

从功能上看，Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。

图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、选装、

倾斜、镜像、透视等。也可以进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路。Photoshop提供的绘图工具让外来图像与创意更好地融合，成为可能使图像的合成天衣无缝。

校色调色是Photoshop中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同的颜色进行切换以满足图像在不同领域如网页设计、多媒体等方面的应用。

特效制作在Photoshop中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由Photoshop特效完成。而各种特效字的制作更是很多美术设计师热衷于Photoshop的研究的原因。

3 设计实践

3.1 创作初衷

大学毕业设计可以视作对本人大学三年学习成果的一次检验和展示，所选题材肯定是自己最擅长、最感兴趣、最能体现自身价值的作品。

大学三年学习了不少课程，掌握了许多三维、平面制图软件，其中个人较为喜欢的当属平面设计软件Photoshop和CorelDraw。平时关注较多的是互联网交互设计，同时对电子商务类导购网站发展运营模式都有一定研究。随着教育体制改革的不断深入和大学生学习、生活方式出现新的变化“轻奢生活网”主题的确定在于很多人对生活方式的追求，不为走在前端不为炫耀夸赞但要尽情享受生活的美好。我希望时尚就是一种日常的生活方式和生活态度。这样一位热爱自由、活在当下的人们，既努力工作，亦尽享生活，正是当今中国新职场人的缩影。希望这样的生活态度能与“轻奢生活网”一起带给更多的热爱时尚的人。

3.2 创作过程

3.2.1网站的规划

1)网站主题概述：网站是时尚设计信息网络平台，

2)确定网站风格：精致简约。根据对本网站的主题分析，确定了网站设计的风

格。本网站的除了首页以为分为四大专题页。为了介绍不同的构图设计，专题页都采用针对其主题的构图方式设计。但专题页及其子页之间风格保持协调统一。

网站风格可以从以下几个方向来探讨，而每一项都是有关联性的：

1、色彩：灰白色背景和浅蓝色背景使界面简洁清爽，简约而通透的高明度页面，畅快、朴素，永恒无暇，在自然界象征着极致的纯净与贞洁。轻快的白色可以给人很好的轻快速度感，整洁、大空白的同时让用户保持欢快的情感进行浏览。所以整体界面基调明度较高。网站的色系更能衬托出网站的主题，专题页的若色系能与主页的色系合理搭配，将会增加浏览者的易读性。另外，页首以及网店的logo为黑色，黑色在网页中的面积较小，成为点缀或陪衬。

2、版式：网站编排方式主要是表格。表格的应用是一般大型网站最常见到的编排方式，表格能使多段文字统合整理，达到清楚易懂的效果。如图形与文字间的排版，表格可将图形与文字做最恰当的编排，充分结合于网页上。通过框架来布局。框架结构的页面被许多人不喜欢，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观，布局采用两栏式分布上下型和三栏式分布上下中型、上左右型和其他布局类型不规则型。如图 0.2.所示。

图 0.2.1 布局

3、图饰：页面的装饰会使用到一些图片和纹饰等素材，图片纹饰的风格是最直接表现风格的要素，本网站以展示时尚设计图片展示，图片直接合理的搭配及文字排版，给浏览者更直观的感受。

4、界面：简化界面布局，精炼界面元素和信息，在保证浏览者对于页面以及产品有足够的认知的情况下，使界面做得尽量简洁，从而传达出更轻盈的视觉感受。

3.2.2网站内容结构

网站的首页涵盖了四大专题页的主要内容，以板块的形式展示。每个专题页都都有一个详细页展示。如图 0.2.2所示。

图 0.2.2 结构

3.2.3首页效果图制作

确定了网站的风格，开始制作首页的效果图，因为首页奠定了整个网站的基调，所以尤为重要，具体制作过程如下：

打开photoshop 软件，新建宽：1380px,高：2235px 的页面，然后文件另存为轻奢生活网首页.psd ，注意要边做边保存，防止程序突然崩溃等意外情况发生。如图3.2.3-1所示。

图3.2.3-1

背景添加效果，图案叠加，选择已准备的素材文件。如图3.2.3-2所示。 轻奢生活网

首页

设计 名品 家居 乐活 注册登入 设计详细页 名品详细页 乐活详细页 家居详细页

图3.2.3-2

1)制作导航条与logo：

1.用矩形工具、圆形工具，画出基本形状然后在图层样式里设置描边、投影、浮雕达。

2.在顶部左上方用“迷你简柏青”输入“轻奢活”三个字。用“刘德华字体”输入“生”，下方输入英文字体Interior design，组合成网页的logo。简洁又不失精致。

3.页面首页制作搜索框、帮助、连接邮箱设计制作。主要采用圆角矩形工具和图案叠加效果。如图3.2.3-3所示。

图3.2.3-3

2)制作导航条与logo：

1.第一部分为三行四列的表格式图片展示。先画好矩形用

对齐工具将其排列整齐。然后加入素材使用蒙版工具。文字背景部分颜色填充黑色，然后在蒙版上使用黑到白到黑的渐变，使背景两边透明。

2.第二部分为一个细分的小导航，由于篇幅关系，没有做连接效果图。主要是通过圆形描边和斜线等绘制。

3.页面主题部分为四大专题页的四个板块，主要以图片展示为主，另外加上点、线、面等视觉元素的搭配。主要涉及到的技术有图层透明度设置，钢笔工具的运用，自定义形状工具绘制导航箭头。

4.网页底部信息编辑，运用文字工具和填充工具即可。效果图如图3.2.3-4所示。

图3.2.3-4

3.2.4“设计”专题页及子页制作

1)制作子页标题“泛设计”，将字体复制三次，分别填充白色、蓝色、黑色。依次移动一定像素得到阴影效果。

2)左边导航通过文字、背景、线条制作。中间背景图形使用滤镜-模糊-高斯模糊设置一定像素，再在上方绘制形状不一的矩形，排列在页面中，并且设置其投影和描边。如图3.2.3-5所示。

图3.2.3-5

3)在这些矩形上通过，剪切蒙版放入素材图形，也便于下次更换图形。最终效果图如图3.2.3-6所示。

图3.2.3-6

4) “泛设计”子页，制作登入框。用圆角矩形工具画框，设置描边为1像素，黑色到白色渐变。渐变叠加为灰色到白色。投影为105°，距离设置为3。其他按钮制作方法一样。如图3.2.3-6所示。

图3.2.3-6

3.2.5“名品”专题页制作

1)左边导航栏制作，输入导航栏文字，设置不同颜色，不同等级的字体不同大小。

2)右边不同颜色区块填充并且放入图片，输入文字。如图3.2.3-7所示。

图3.2.3-7

3.2.6“乐活”专题页及子页制作

1)将背景设置为浅蓝色，左边导航用文字工具输入。

2)钢笔工具画出不规则图形，按下“Ctrl+Enter”转换为选区，填充白色，并且画上蓝色线条。周围大小不等的圆圈，设置描边为2像素，填充蓝色，加入白色素材。再将准备好的彩色素材用剪切蒙版的方式放入页面中。如图3.2.3-8