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

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

目 引言.................................................................市场调研...........................................................1.1 时尚信息服务平台现状......................................1.构图设计在网页设计中的现状...................................文献检索...........................................................2.1构图在网页设计中的表现形式...................................2.构图在网页设计中的规律.......................................3设计实践..........................................................3.创作初衷.....................................................3.创作过程.....................................................3.创作总结....................................................4设计自评.........................................................4.1理念与市场..................................................4.创作与社会效益..............................................致谢................................................................参考文献............................................................附录设计作品图片.................................................附录设计作品光盘.................................................第1

光宝气”的阶段，而趋于一种理性、健康的消费方式，购买奢侈品不是崇拜，而是能切实反映自我的心境、品位和信念。轻奢生活网”的定位不是“淘便宜”，瞄准的是那些因为欣赏商品的设计感而愿意多掏钱的中高端消费者。轻奢生活网的页面是时尚设计信息的载体，所以页面设计则是浏览者对信息的视觉生理、心理分析了网页的板式、文字、色彩、图像等元素的在网页界面中的表达方式。在网页设计上起到事半功倍的效果。从审美的角度阐释了构图设计对网页整体视觉效果的影响。1时尚信息服务平台现状给买家和卖家建立一个公共服务的平台。目前国外的新一代导购网站模式正在日益成熟，那就是社会购物，它是基于社交网络SocialNetworking的衍生品，这类网站从2005年以后出现，借助Web2.0的各项技术日益形成以借助Crowd量进行产品的汇聚、评比、推荐和分享，如何汇聚每个人的力量来进行购物成为了电子商务前段的新亮点。国内外的设计师有很多出色的设计品，但他们并不擅于商业经营，导致设计品无法被更多的人发现。还有一部分消费者，他们热爱生活热爱时尚，有一定的我也经过了大量的调查、查阅了很多书籍报刊资料。我参考了“美丽说”、“蘑菇街”、“返利网”等导购网站的营运模式和主要客户群，以及他们网站发展一些劣势阻力。蘑菇街的成功，告诉我们，任何事情都需要创新，只有创新才能够受第1

到大众的喜爱。当然，蘑菇街的成功不是偶然，这是迎合了目前大家越来越喜欢社交网站的趋势，认清消费者心理，当然这跟蘑菇街团队运营是密不可分的，没有好的运营团队也是不可能成功的。蘑菇街以分享社交为前提，吸引一大批女性的喜爱。这是社交与购物的一个非常好的结合。不仅增加了用户体验度，也给消费者提供了展示自己和分享自己喜爱物品的平台。从淘宝客，到返利网，再到现在的购物分享网站，我们很明显的可以看出，现在的用户似乎对用户体验度的要求是越来越高，因此我们在运营一个网站的时候，我们必须把用户体验度放在第一位，要相当重视，只有把用户体验度弄上去了，网站才能做得很好，用户才会个生活类的设计师商品社会化导购网站是可行的。1.构图设计在网页设计中的现状

1.2.1网页设计的发展信息表现与信息的传递中的重要部分。我国目前的设计走向问题，已成为设计师们研究的焦点，无论是平面设计、建筑设计或者网页设计都同样会遇到这样的问题。网页设计上出现了欧美、日、究的课题。1.2.构图方法在网页中的运用构图是造型艺术术语，指作品中艺术形象的结构配置方法。它是造型艺术表第2

达作品思想内容并获得艺术感染力的重要手段。而我们网页制作方面，则可以把画面中的元素如何布局、如何搭配，构成一个协调的完整的页面。研究构图的目的是研究在一个平面上处理好三维空间——高、宽、深之间的关系，以突出主题，增强艺术的感染力。构图处理是否得当，是否新颖，是否简洁，对于网页设计的成败关系很大明，主题突出，赏心悦目。反之，就会影响页面的效果，没有章法，缺乏层次。2讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。版式设计通过文字图形的空间组合，表达出和谐与美。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要求处理好页面之间和页面内的秩序与内容的关系。在设计前我阅读了很多文献来帮助我更好的制作网页。2.1构图在网页设计中的表现形式当人们浏览网页时，第一眼看到的就是网页的构图。因此，构图是否美观、和谐直接影响到视觉效果。构图不仅要注意到形式，还要考虑到实用性，是否便于人们阅读和观看。适于一般性的商业网站。在矩形的构图中，一定要注意应用黄金分割线的比例、构图基本结构的形成规律。一定要有疏密的节奏，要意识到主次关系，上面往往螺旋曲线是最有韵律和生命力的线条，适用于艺术、音乐以及内容充满动感和活力的网站。2.较庄重，而真正的页面上左右同形同量的配置是不多的。平衡的构图较均齐生动第3

体积等关系的平衡。形。2、网页界面设计中，运用构图设计的变化与统一规律。在我们把大量的信息塞加到网页上去的时候，考虑怎样把它们合理的用统一的方式来排布，使整体感强同时又要有变化，这样使页面更丰富，更有生气，看起开就不感到枯燥，很多网站诸如体育的网站，排布的新闻从上到下几十条，没有一点变化，显得单调而乏味，就是违反这种形式美的规律，所以要充分的运用变化来改进它，从排布的形式上或者颜色上都可以。3、网页界面设计中，运用构图设计的对比与调和规律。在网页设计中，如何利用它来表达到好的效果呢？首先合理的利用对比因素，例如文本的排布、字体的大小、粗细、颜色、图片的宽窄、比例的反差、透明以及位置的放置等。4网页界面设计中，运用构图设计的节奏与韵律规律。在网页设计中，按钮的编排就经常会遇到这个问题，做得好的按钮能够使排在一起的诸多按钮富有音乐般的美感，同时丝毫不损失其实用性，既要从形状上，也要从整体的色泽、大小等综合方面入手，才能做到实用与艺术共存的和谐设计。

2.2.p软件介绍切片、图片输出等。受广大平面设计人员和电脑美术爱好者的喜爱。分。第4

图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、选装、倾斜、镜像、透视等。也可以进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路。Photoshop校色调色是Photoshop中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同的颜色进行切换以满足图像在不同领域如网页设计、多媒体等方面的应用。特效制作在Photoshop中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由Photoshop特效完成。而各种特效字的制作更是很多美术设计师热衷于Photoshop的研究的原因。33.创作初衷材肯定是自己最擅长、最感兴趣、最能体现自身价值的作品。在于很多人对生活方式的追求，不为走在前端不为炫耀夸望这样的生活态度能与“轻奢生活网”一起带给更多的热爱时尚的人。3.创作过程

3.2.1第5

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

2)本网站的除了首页以为分为四大专题页。为了介绍不同的构图设计，专题页都采用针对其主题的构图方式设计。但专题页及其子页之间风格保持协调统一。网站风格可以从以下几个方向来探讨，而每一项都是有关联性的：

1、色彩：灰白色背景和浅蓝色背景使界面简洁清爽，简约而通透的高明度页面，畅快、朴素，永恒无暇，在自然界象征着极致的纯净与贞洁。轻快的白色可所以整体界面基调明度较高。网站的色系更能衬托出网站的主题，专题页的若色系能与主页的色系合理搭配，将会增加浏览者的易读性。另外，页首以及网店的logo为黑色，黑色在网页中的面积较小，成为点缀或陪衬。2、版式：网站编排方式主要是表格。表格的应用是一般大型网站最常见到的编排方式，表格能使多段文字统合整理，达到清楚易懂的效果。如图形与文字间的排版，表格可将图形与文字做最恰当的编排，充分结合于网页上。通过框架来布局。框架结构的页面被许多人不喜欢，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观，布局采用两栏式分布上下型和三栏式分布上下中型、上左右型和其他布局类型不规则型。如图0.2.所示。第6

图0.2.直接表现风格的要素，本网站以展示时尚设计图片展示，图片直接合理的搭配及文字排版，给浏览者更直观的感受。4、界面：简化界面布局，精炼界面元素和信息，在保证浏览者对于页面以及产品有足够的认知的情况下，使界面做得尽量简洁，从而传达出更轻盈的视觉感受。3.2.2网站内容结构网站的首页涵盖了四大专题页的主要内容，以板块的形式展示。每个专题页都都有一个详细页展示。如图0.2.2所示。第7

首页设计 名品 乐活 家居 设计详细页 名品详细页 乐活详细页 图0.2.3.2.3首页效果图制作确定了网站的风格，开始制作首页的效果图，因为首页奠定了整个网站的基调，所以尤为重要，具体制作过程如下：

打开photoshop软件，新建宽：1380px,高：2235px轻奢生活网首页.psd，注意要边做边保存，防止程序突然崩溃等意外情况发生。如图3.2.3-1所示。图背景添加效果，图案叠加，选择已准备的素材文件。如图3.2.3-2第8

图1)制作导航条与logo：1.用矩形工具、圆形工具，画出基本形状然后在图层样式里设置描边、投影、浮雕达。

2.在顶部左上方用“迷你简柏青”输入“轻奢活”三个字。用“刘德华字体”输入“生”，下方输入英文字体Interiordesign，组合成网页的又不失精致。3.页面首页制作搜索框、帮助、连接邮箱设计制作。主要采用圆角矩形工具和图案叠加效果。如图3.2.3-3所示。图2)制作导航条与logo：

1第9

到黑的渐变，使背景两边透明。2.第二部分为一个细分的小导航，由于篇幅关系，没有做连接效果图。主要是通过圆形描边和斜线等绘制。3.页面主题部分为四大专题页的四个板块，主要以图片展示为主，另外加上点、线、面等视觉元素的搭配。主要涉及到的技术有图层透明度设置，钢笔工具的运用，自定义形状工具绘制导航箭头。4.网页底部信息编辑，运用文字工具和填充工具即可。效果图如图所示。图3.2.4“设计”专题页及子页制作依次移动一定像素得到阴影效果。2)左边导航通过文字、背景、线条制作。中间背景图形使用滤-模糊-高斯模糊设置一定像素，再在上方绘制形状不一的矩形，排列在页面中，并且设置其投影和描边。如图3.2.3-5所示。第10

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

图3.2.5“名品”专题页制作大小。

2)右边不同颜色区块填充并且放入图片，输入文字。如图3.2.3-7所示。图3.2.6“乐活”专题页及子页制作1)将背景设置为浅蓝色，左边导航用文字工具输入。2)钢笔工具画出不规则图形，按下“Ctrl+Enter”转换为选区，填充白色，并且画上蓝色线条。周围大小不等的圆圈，设置描边白色素材。再将准备好的彩色素材用剪切蒙版的方式放入页面中。如图第12

图3.2.3-83)同样制作出它的子页面，黑色矩形设置透明度。效果如图3.2.3-9图3.2.7“家居”专题页及子页制作1)将背景设置为浅蓝色，左边导航用文字工具输入。2)椭圆工具，按shif色到蓝色渐变，大小为15像素，不透明度为67%。并且在图形上输入白色、12素、宋体文字，居中放置。如图3.2.3-10所示。在大正圆里放置图片素材。第13

图3.2.3-10变形文字工具 ，大文字设置样式为扇形，弯31%。小文字设置样式为扇形，弯曲-27%，水平扭曲2%。画笔设置如图3.2.3-11所示。用钢笔工具画出爱心状曲线，在路径面板下，点击将路径转化为描边按钮。得到效果图如图3.2.3-12图第14

图3.2.3-12

4)椭圆工具，按shif色到蓝色渐变，大小为15像素，不透明度为67%。并且在图形上输入白色、12素、宋体文字，居中放置。如图3.2.3-13所示。在大正圆里放置图片素材。图第15

3.2.8构图设计在网页中的应用1)几何图形在页面中往往能起到大梁的作用，也是网页内容最为常用的承载面板。不同的几何形状有不同的性格，圆形是活泼可爱的，方形是平稳整齐的，三角形就是尖锐动感的了信息传达外，更具层次感和观赏性。如图3.2.8-1所示。图同样是矩形的穿插结合，出”名品”专题页的奢华时尚又有质感的风格形态。图3.2.8-2所示。第16

图题页的整个页面既有亮点又不失简洁。如图3.2.8-3所示。中，使其相得益彰。如图3.2.8-3所示。第17

图3.2.8-3三角形的不平衡性及其尖锐性能够增强视觉上的刺激，快速吸引用户，可以用于科技和时尚这种风格同样比较“锋利”的网页。上图，将同色系小三角形均匀的拼贴起来，马上就营造出一种钻石璀璨般的时尚感。但实践的时候要注意加减法，不能乱堆一通，点到为止即可。如图所示。第18

图3.2.8-4抛开争议，斜塔的魅力让许多人都想来到它身边一睹这位倾斜美人之容。凑巧的是，在浩瀚的宇宙中最美丽的星球，也就是地球，也斜着身子对着太阳转着。话题扯的比较远，斜线，或者说是斜着的物体，似乎天生有一种张力。在网页设计中亦是如此。而在这里所表现的为视觉的张力，是种视觉心里上的延伸力而非物理上的。当页面过于平均，毫无亮点时，打破通体的平均尤为重要。打破平均的方式有很多，而斜线似乎是网页设计中最常用的一招。余白也不会显得空洞。斜线的张力让整个页面富有动感和延伸性，即可为页面起到修饰的作用，又能作为信息的承载模块，两者有机的融合并不让人觉得倾斜的标题不好识别或者区交流、网站用户信息展示，故应用斜线的方式，更显动态和时新。如图3.2.8-5所示。第19

如图3.2.8-5时也能够营造活跃的气氛蓝色的字构成的曲线穿插在网页中，用曲线来分割背景和焦点就显得理所当然了，画面中曲线合理的运用也提高了层次感，机器人和红色标题都更突出，如图3.2.8-6所示。图3.创作总结第20

网页设计是这些策划将要采取的形式之一。在网页设计中需要用视觉元素来传播你的设计设想和计划，用文字和图形把信息传达给浏览者，让人们通过这些视觉第二，要做好网站的整体规划，选择好温和主题的色系和网站风格。第三，在设计过程中，对于PS软件的操作，图层的命名的修改以及图层文件夹分类管理是提高效率和后续维护的一个重要习惯。第四点是除了在大学期间计算机应用上基础学习后，还需要不断的更新知识库，除了在专业上精益求精外，平时我还涉猎了大量电子商务网站运营、平面设计、网页设计等知识。并且相信在以后理论与实际结合当中，能有更大提高。44.1理念与市场是奢华。奢华并非令郎满目的时尚品牌、动辄上万的标价和暴发户富二代的消费水平，而是一种对着装的态度。之所以选择“轻奢生活”这个网页的设计，首先是个人的喜爱，另外这些优秀的设计不仅给人带来视觉享受还能激起人们对生活的热爱。著名的品的意义是不言自明的，在多元的社会交往中，没有一些画龙点睛之物压阵，的感，一个真正的都市人懂得巧用奢侈品来为自己加分。而这个时尚信息平台就可以汇集最新信息，引领质感生活。同时“轻奢”的概念越来越受到大众的喜爱，其市场前景也被看好。因此在这个信息平台里放入推荐购买网站，方便浏览者的消费需求。并且能通过需求刺激消费，带动电子商务产业的发展。同时也让优秀的设计师拥有他们展示的舞台。将设计市场化、信息化。在做这个网站时，将设计师商品分为“设计”、“名品”、“家居”等几大类，用户注册后，可在“乐活”页面拥有类似微博的主页，评论、分享商品，或直接点击购买链接，进入淘宝页面。这个平台将连接起这类消费者与优秀设计师。第21

4.2创作与社会效益活去享受高质量生活，拥有一颗懂得享受生活的心，是网站的最大目的。创作过程中难免会遇到这样那样的问题，在此向指导我毕业论文的许丽莉老师表示由衷的感谢！［1］山田章博.山田章博的世界[M].安徽：安徽文化音像出版社,2003.

［2］林明庆.动感CG—Painter古典风格插画设计[M].北京：中国电力出版社,2008.

［3］冲麻实也.冲麻实也16厂银声音像出版社，1998.

［4］子弹.插画之梦·CG动漫全程详解[M].江西：江西美术出版社,2008.

[6

[7皇明月.中国帝王图[M].大阪：讲谈社，1988.[8林奕辰.Painter&C版社,2009.第22

附录附图1第23

附图2附图3第24

附图4附图5第25

附图6第26

第27

附图7附图7第28

附图8附录第29