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

学院毕业论文(设计)

活泼,这种平衡的获得多依赖于设计者的视觉感受与经验。页面上的平衡是一个动态的平衡,是图与底、图形与文字、群组与间距、主次与聚散、色彩的轻重与体积等关系的平衡。

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

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

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

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

2.2.1 Photoshop软件介绍

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

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

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

第 4页

学院毕业论文(设计)

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

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

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

3 设计实践

3.1 创作初衷

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

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

第 5页

学院毕业论文(设计)

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

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

本网站的除了首页以为分为四大专题页。为了介绍不同的构图设计,专题页都采用针对其主题的构图方式设计。但专题页及其子页之间风格保持协调统一。 网站风格可以从以下几个方向来探讨,而每一项都是有关联性的: 1、色彩:灰白色背景和浅蓝色背景使界面简洁清爽,简约而通透的高明度页面,畅快、朴素,永恒无暇,在自然界象征着极致的纯净与贞洁。轻快的白色可以给人很好的轻快速度感,整洁、大空白的同时让用户保持欢快的情感进行浏览。所以整体界面基调明度较高。网站的色系更能衬托出网站的主题,专题页的若色系能与主页的色系合理搭配,将会增加浏览者的易读性。另外,页首以及网店的logo为黑色,黑色在网页中的面积较小,成为点缀或陪衬。

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

第 6页

学院毕业论文(设计)

图 0.2.1 布局

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

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

3.2.2网站内容结构

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

第 7页

学院毕业论文(设计)

轻奢生活网首页 设计 名品 乐活 家居 注册登入 设计详细页 名品详细页 乐活详细页 家居详细页 图 0.2.2 结构

3.2.3首页效果图制作

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

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

图3.2.3-1

背景添加效果,图案叠加,选择已准备的素材文件。如图3.2.3-2所示。

第 8页