文档章节

前端基础---设计篇

三十年Web
 三十年Web
发布于 2016/05/16 13:21
字数 4844
阅读 54
收藏 2

很多打算学习前端的同学估计都在培训机构学习过 ,但是很少有机构会培训前端的审美,以及设计基础以及理论。接下来我为大家讲解的是网页的设计以及网页的构成,和用色。

 

在讲解之前我给大家抛个引子网页中占比最多的是什么 ?

占比最多的是图片,没错就是图片 ,现在的互联网时代,基本的文字信息已经满足不了客户的需求,因为信息斑驳又杂乱,然而最吸引人的是什么 ?图片。

一张好看的图片是吸引人眼球的,也是容易引起用户关注的。接下来才是交互。交互还是后话,还是讲图片 。图片主要就是经过PS处理,来修饰的。很多学前端的朋友都认为这些事情是UI去做的我只负责码好代码就好了。然而并不是这样 ,优不优秀在于你看待问题的方式,

ps  的教程网上现在有很多,我们主要是学习最基础的,知道怎么用的就行。

主要要学习以下几个功能,知道怎么用就行。

能基本的PS图片就可以了 ,毕竟重心还是在代码上 ,

其二便是网页的结构,主要有以下7点:

1.“同”字型结构布局
所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单,下方左侧为二级栏目条,右侧为链接栏目条,屏幕中间显示具体内容的布局。
这种布局的优点是充分利用版面,页面结构清晰,左右堆成,主次分明,信息量大;缺点是页面拥挤,太规矩呆板,如果细节色彩上缺少变化调剂,很容易让人感到单调缺乏。
2.“国”字型布局
“国”字型布局是在“同”字型布局基础上演化而来的,在保留“同”字型的同时,在页面的下方增加一横条状的菜单或广告,是一些大型网站所喜欢的类型。一般最上面是网站标题及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是在网上见到的最多的一种结构类型。
这种布局的优点是充分利用版面,信息量大,与其他页面的链接切换方便,缺点是页面拥挤,四面封闭,令人感到憋气。
3.T型布局
这是一个形象的说法,是指页面的顶部是“网站标志+广告条”,左面是主菜单,右面是主要内容。这种布局的优点是页面结构清晰、主次分明,是初学者最容易上手的布局方法;缺点是页面呆板,如果不注意细节上的色彩,很容易让人“看之无味”。
4.“三”字型布局
这种布局多用于国外站点,国内用得不多。特点是在页面上有横向两条色块,将页面整体分割为但部分,色块中大多放广告条、更新和版权提示。
5.对比布局
顾名思义,这种布局采用左右或者上下对比的方式:一半深色,一半浅色。一般用于设计型站点。优点是视觉冲击力强;缺点是将两部分有机地结合比较困难。
6.POP布局
POP引自广告术语,是指页面布局像一张宣传海报,一一张精美的图片作为页面的设计中心。这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接,甚至直接在首页的图片上做链接而没有任何提示。这种布局大部分出现在企业网站和个人主页,如果处理得好的话,会给人
带来赏心悦目的感觉。
7.Flash布局
这种布局是指整个或大部分幅面的网页本身就是一个Flash动画,它本身就是动态的,画面一般不叫绚丽、有趣,是一种比较新潮的布局方式。其实这与封面型结构是类似的,只是这种类型才采用了目前非常流行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。

在结构上,大家也没有必要照搬欧美的网站,国内的网站也有许多经典的和好看的网站,

在国内网站主要注意以下几点:

1,区分网站的主要内容。2,网站主要的用户人群。3,网站针对用户群设计相应风格的网站。4,用户群不同需要的交互也就不同,若是一个针对老年人群的网站过多炫酷的特效是没有必要的,因为用户群不懂,也不知道怎么交互,所以网页的设计应该针对相应的用户群指定响应的设计需求。

 

每一个网站都可以被认为是一个信息资源中心,网站中的信息资源都是通过网页展示给访问者的。访问者访问网站,打开网页,映入眼帘的首先是网页的色彩。多数情况下,访问者在访问一个陌生的网站时,如果网站的色彩搭配合理,运用恰当,或生动有活力,访问者就会被吸引,从而停留在此网站中,并开始阅览网站栏目,进而浏览网站信息。例如:访问者需要从一个学术类网站中获取信息,当打开某学术类网站的首页时,如果网页色彩能够体现出很强烈的学术气息,那么访问者就会被该网页色彩所营造的气氛所吸引。反之,访问者有可能立即离开该网站。又如:当一个儿童类网站的网页被设计得既轻松又活泼,色彩明快,就会受小朋友的青睐。由此可见,网页的色彩问题是网页设计中不可忽略的重要问题,网页设计必须解决好色彩的排布。

 

一、网页的色彩认知
在网页设计过程中,最难处理的问题就是色彩。如何确定主色调,如何搭配色彩,如何运用最简单的色彩来表达、体现网站的形象和风格是网页设计的难点之一。


1、色彩的联想和象征  

每一种色彩都具有象征意义,都会引发人的某种情感,这就是色彩的象征性和色彩的情感。色彩的联想与象征性涉及到美学、光学、心理学、人类学和民俗学等多方面的内容。不同的人,对同一个色彩会产生不同的联想,所引发出的情感也会不同,其受年龄、对色彩的理解、传统等多方面因素的影响,例如看到红色,有人联想到的是热情,有人联想到的可能就是危险。
当人们看到某颜色时,必然会将它与其相关的精神、内涵、意义、形态等相联系,他是通过过去的经验、记忆或知识而取得的。象征是由联想并经过概念的转换形成的思维方式。色彩的象征是联想经多次反复后思维方式里固定了的专有表情,于是在思维中某色就变成了某事物的象征。网页中的色彩同样给人以联想。很多优秀的网站正是利用了色彩的联想和象征这一特性而进行设计,例如很多糕点类的网站都采用黄色作为主色调,正是由于黄色具有快乐、希望、智慧和轻快的个性,由于它的明度较高,给人留下明亮、辉煌、灿烂、柔和的印象,又同时引起味美的条件反射,给人以甜美感、香酥感和温暖感。又如惠好公司是全球最大的林产品一体化公司,它是北美最大的软木生产商,其网站采用绿色为主色调,正是利用了绿色所表现出来的充实、平静和希望,给人以新鲜、青春、健康和安全的感觉,充分体现了人与大自然的和谐,人文与绿色环保的诉求理念。


2、色彩的平衡和倾向


色彩是有倾向性的,这种倾向性与人类的生存环境、民族信仰、个人喜好、网站的性质和类型等有关。网页的色彩同样具有倾向性。例如在中国,红、蓝搭配表示的是庄重、严肃,所以多为政府网站所采用。因此,设计网页必须研究色彩的倾向性。与倾向性相关的就是色彩的平衡问题,色彩的平衡是对色彩倾向的制约和调和。例如从色彩冷暖的角度看,冷和暖是两种倾向,趋于中性的绿色则较为平衡,那么使用绿色为主色调的页面会让人感觉和谐、亲切。又如世界上许多著名的时装、体育用品的网站都采用黑色与白色搭配作为网站的主色调,这是由于黑色与白色搭配能够给人一种稳重、成熟和神秘的感觉。黑色和白色都属于冷色调,这样的搭配也会给人以冰冷、消极、虚无的感觉,为了增加画面的亲和力,往往在设计时会在黑色和白色之间加入灰色、红色等颜色来过渡、点缀,以实现色彩的平衡。


3、网页色彩配色


网页的配色对营造网页氛围,突出网页主题等有重要影响。就人们所浏览到的网站来说,所有网页都进行了配色,但给访问者的感受却千差万别。例如黑色和白色搭配,会使访问者感到庄重、神秘、雅洁,会引起访问者的沉思;紫色和灰色搭配,会使访问者的心情变得忧郁和不安,如果访问者当时的心情本身就不太好,则会使访问者的不太好的心情进一步加剧。


二、网页色彩设计存在的问题


经过了一个漫长的摸索过程,虽然我国目前在网页设计的色彩构建方面已经有了长足的进步,但相比国外的优秀网站还有很大的欠缺。


1、色彩风格与主题脱离的问题


色彩风格与主题脱离的问题是网页色彩设计中最常见的问题。这是因为利用色彩来恰当地表现网页主题,呈现网站理念,比较好地迎合多数访问者的情感,喜好、视觉感受,对设计者来说并非困难。例如设计一个咖啡的网站。通常情况下,选择咖啡的原色褐色为主色调,搭配表现甜美、柔和、味美感觉的黄色进行点缀,能使整个画面表现出一种协调、统一柔和的效果。这个设计方案,特别是色彩风格是符合网页主题的,也非常好地呈现出了网站理念。但问题是,在互联网上存在数万个与咖啡相关的网站,这些网站的基本理念又是相似的。如果所有的与咖啡相关的网站和具有类似理念的网站都采用这种格调,结果可想而知。因此,设计者在设计过程中既要在色彩运用上满足上述基本要求,同时又要有所突破,要体现出自身的与众不同的特征,要使所设计的网页从众多相同主题的网站中脱颖而出,这对设计者来说确实是一件很艰苦的工作。这是导致色彩的滥用,使网页色彩风格与网站主题脱离现象产生的主要原因。


2、文字能见度低的问题


网页的核心功能是提供信息,能见度是信息的体现者,如果网页中的信息能见度低则严重地影响访问者阅读网页,网页因此就失去了意义。然而,在众多的网页中,由于配色方面的原因,网页的能见度不是令人满意。其主要表现在:文字与背景色差太小;色彩搭配凌乱,文字内容被背景淹没,特别是当采用将文字说明放置在图像内对图像中所呈现的艺术品进行说明过程中,往往出现文字与图像混淆的现象,其不仅严重地影响了作品的展示效果,同时还影响了访问者对作品的认知。


3、人性化的问题


网页信息是通过光波的传播,经人的视觉器官传输到人脑中的。光波的波长不同,所产生的色彩和亮度不同,给人的视觉感受不同,对访问者的心理感受也不同。特别是,计算机显示器所发出的光由于含有辐射等因素,其自然而然地就对访问者的视力产生负面影响,如果在进行网页色彩设计过程中,不注意光的亮度的调节,不注意色彩的搭配,则会对访问者的视力产生严重的影响。例如黄色是亮度最高的颜色,并且黄色在白色背景上的易见度最低。在网页中如果使用黄色文字和白色背景作为主要的色彩搭配,会让访问者觉得非常刺眼,严重影响访问者的阅读并会对视力产生负面影响。


三、网页的色彩构建


通过上述对色彩认知的介绍和对网页色彩设计常见问题的分析可知,网站的成败与网站的网页色彩设计、色彩定位有着密切的关系,因此在网页设计过程中必须重视色彩的设计。
1、色彩风格设计   在网页设计过程中,确定色彩风格既简单,又复杂,它是一件具有创造性的创新活动。这是因为:当网站主题确定后,设计者会自然而然地联想到一些色彩,例如设计房地产类网站,设计师在网页色彩设计时,会很自然地想到使用金色和灰色;又如设计洁具类网站,设计师马上会想到使用蓝色和白色搭配。上述这些实例所反映出的是人的常规思维。但就设计而言,不论是网站的拥有者还是访问者都要求设计者所设计的网站在网页色彩等方面,既与网站主题相吻合,又特立独行,因此,仅用常规的思维来进行设计就远远不够了。例如法拉利汽车网站,从LoGo到整个网页的主色调采用的都是红色,红色给人以活力、奔放的感觉,非常符合法拉利跑车的速度与激情的设计理念。在众多的汽车网站中,法拉利汽车网站在色彩的确定上也做到了与众不同。又如:可口可乐公司的网站、百事可乐公司的网站、李宁网站、中国一汽的网站等一些网站的网页在色彩定位和配色方面就不仅与企业理念相吻合,有自身的特点,同时访问者在浏览网页时会随着网页的色彩来感受和体味其品质。


2、文字色彩设计


文字、图形图像,以及视频信息是网页信息的核心内容,文字在其中所占的比例应该说是最多的。不仅如此,文字还存在再设计的问题,例如大小、体例、色彩等。就文字色彩的设计来说应该做到色彩与文字的体例、文字的大小与文字所述的内容相吻合。除此之外,还要处理好文字的色彩与其相应的环境色(如背景)之间的关系,例如在高明度色彩的背景中,低明度的文字易于识别,如果背景和文字明度接近,就容易出现难以识别的情况。具体来说,黄色在白色背景上的易见度最低;橙色兼具红色和黄色的优点,柔和明快,容易为人眼接受,所以橙色与任何一种颜色搭配都显示得很清晰。黄与白、绿与红、绿与灰、紫与红、紫与黑、青与黑等几种搭配的易见度低。因此,进行文字色彩设计应该根据色彩原理进行组合,以突出文字效果。


3、人性化色彩设计


色彩设计不仅要考虑与主题相一致,能有效地营造网页气氛等问题,进行网页色彩设计还必须考虑和解决好保护访问者视力的问题,考虑和解决好访问者感受的问题。因此,网页配色设计时尽量不要选择视疲劳度高的色调。一般来说,高明度、高纯度的颜色刺激强度高,疲劳度也大。非色彩中的白色的明度最高,黑色明度最低。
总之,网页配色既是一项技术性工作,同时也是一项艺术性很强的工作。在网页设计时除了考虑网站自身的特点外,还要遵循一定的艺术规律,以设计出色彩鲜明、个性独特,同时又无损访问者健康的网页。

 

 

对于想入前端的同学,给你们几个建议,

1,每天收集10个你觉得有创意好看的网页,并抽出一个你觉得最好的,写出自己的观看想法。

2,利用PS的图层方法设计一个网站出来,

3,学会切图。

 

 

© 著作权归作者所有

三十年Web
粉丝 2
博文 1
码字总数 4844
作品 0
成都
前端工程师
私信 提问
极速上手进阶大神的 5 门 SpringBoot 课程

SpringBoot 因其大大简化了配置。可快速启动一个应用的开发环境,把时间和精力更多的投入到实现业务需求上去。成为了Java 服务器端近几年特别火爆的框架。 如此火爆的技术,怎能不抢先了解一...

实验楼
08/16
0
0
【备忘】2017年3月老男孩python全栈工程师第2期不加密92天完整版

无加密 完整版 课程总共92天 www.ai998.cn day01-python 全栈开发-基础篇 www.ai998.cn day02-python 全栈开发-基础篇 www.ai998.cn day03-python 全栈开发-基础篇 www.ai998.cn day04-pytho...

qq_38155396
2017/07/16
0
0
小册上新:Taro 多端开发实现原理与项目实战

学习一门技术的最好方法,就是在实践中使用它。 Taro 也是如此。Taro 是由京东凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。他们为此专门撰写了一本小册子,主要介绍从 0 到...

小册姐
2018/11/13
0
0
CSS——把“可以动的盒子”更优雅地展示:③ 常用的“布局”

前言: 拿到一张设计稿,我们首要的就是从宏观上考虑这整个页面的“布局”。随着前端技术的不断更替,以前很多老的布局方式现在也慢慢淡化了,那哪些是我们最基本最常用的布局方式呢? 本篇给...

itsOli
05/09
0
0
自学前端之前端学习路线图

前端很火,想自学前端的人也多。作为过来人,知道自学的辛苦。特来给大家分享这份学习路线图,让想自学前端的小伙伴们有一份系统专业的学习资源和学习指导。若是觉得有用记得给点个赞哦!无论...

爱龙猫
2017/02/24
2.5K
7

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
6
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
4
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
7
0
从零基础到拿到网易Java实习offer,我做对了哪些事

作为一个非科班小白,我在读研期间基本是自学Java,从一开始几乎零基础,只有一点点数据结构和Java方面的基础,到最终获得网易游戏的Java实习offer,我大概用了半年左右的时间。本文将会讲到...

Java技术江湖
昨天
7
0
程序性能checklist

程序性能checklist

Moks角木
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部