实习之网页设计总结

成功网页设计师的七大必备技能：

1、 熟悉设计的完整流程

请注意，我们强调要了解的是“完整”流程。怎么算是完整呢？网页设计和平面设计有许多重叠的地方，以至于在许多学校教育中它们并没有明确地区分开。这也是为何不少网页设计师对于设计和设计流程有着颇为深入的了解。一般而言，他们的知识结构应该包括下面的内容：

色彩

色彩是网页设计的核心，因为它是快速有效构建主题和样式的基础。另外，色彩和心理学关系紧密，合理地运用色彩可以提高用户体验，让访客流连忘返。

轨迹

这里所说的轨迹是用户浏览网页时视觉运动的轨迹。要掌控用户的浏览轨迹，你需要懂得正确使用色彩、层次结构、深度、形状和线条的方法，明白透视法，空间和方向的运用。

平衡和比例

这所说的平衡和比例指的是视觉上的稳定性和平衡。比例上，了解对称和非对称的使用技巧。在设计信息流的时候，各个元素的比例控制是重点。

间距

其实间距控制说起来并不复杂，一个元素和另一个元素之间的距离控制。但是要让网站用户体验良好，控制好各个元素的间距并不是一句话说的清楚的。较大的间隙能让布局更大气，富有呼吸感；叫窄的间隙能让内容更加靠近，呈现相关性，拥有更加的阅读体验。衡量你的各个元素之间的关系，明白自己的目的，掌握好间距的差异与平衡。

2、 让HTML如臂使指

作为网页设计师，你无需像其他程序那样精通C/C++并能让自家的扫地机器人自动发推，但是你必须熟悉HTML代码。有些设计师认为不懂代码也无所谓，但是更多的设计师开始认识到熟悉HTML代码是成为合格设计师的必备技能。即使不够熟悉，最起码你得了解HTML的基础知识，最起码！

HTML是所有网页的基础框架，网页设计师了解它是应有之义。了解它意味着你能对网页设计有着更精确的掌控，让它拥有更好的可用性，更加易用。你可以拥有属于自己的展示网站，可以更好的出售你的设计和服务，打破设计能力的界限。

3、 掌控创意文案的技巧

作为网页设计师，你常常会应客户要求做许多设计之外的工作，有时候甚至会被要求为网站撰写文案，尤其是当网站没有配备专职文案的时候。想想看，如果客户发现他们的网页设计师能写得一手创意爆棚的文案的时候，他们绝对会如获至宝的（当然你也有了涨价的理由了）。不要以为你的文案技能只能在为客户做网站的时候用上，这对于你而言绝对是无与伦比的无形资产，当你做市场营销的时候，设计与文案的结合能让你和其他设计师拉开距离。

4、 坚持不懈学习

作为一个网页设计师而言，“学无止境”并不是一句单纯的口号。你确实需要不停的学习新技能，发掘新创意，它能提高你对设计的热情，打动你的客户。

另外一个让你不得不坚持学习的重要原因来自网页设计行业本身——不断进化的设计趋势和不断涌现的新技术。你刚刚学会了视差滚动和扁平化设计，Material Design
又立刻出现在你眼前。作为一个设计师，学习是需要坚持不断的，只有对新趋势新技术了如指掌才能让你保持住你在设计圈的位置。

5、 发掘商业技能

越来越多的设计师开始选择成为自由职业者，而许多还未曾独立的设计师也开始宣传属于自己的设计品牌，这也是为什么在自己身上发掘更多商业技能成为一件必要的事情。你拥有自己的业务，销售的是自己的设计技能，如果没有系统的商业技能，你会挣扎于营销、找客户、维持客户等一系列冗杂的事务中无法脱身。

如果你懂得运营自己的业务，那么你会明白如何通过与客户沟通来做决策，学会在职业生涯中高效处理多任务，保持作为网页设计师的创意思维，灵活多变地的应对多种客户和不同项目，在闲暇的时候发展爱好，锻炼身体。

6、 学会倾听的艺术

沟通是一门艺术，而倾听就是其中的关键。和客户构成业务关系，也是起始于你们的沟通，首要的一点，就是听取客户的需求，而这是构成后面一系列沟通与合作的基础。而且，作为一个合格的倾听者，不仅会在客户沟通中起到作用，还会运用到许多其他的地方。作为一名网页设计师，为何你不能具备这一技能呢？

设计师倾听技能包：《告别玻璃心！设计师如何正确听取反馈》

如果你无法正确听取需求，甚至拒绝去听，那么你是无法成为一名合格的网页设计师的。许多客户会在设计过程中，不断提意见或者补充要求，这种情况非常普遍。不称职地忽略这些声音，或者在沮丧中继续修改，伤害客户，还有影响业务。学会倾听，了解要求背后的深层需求和目的，然后提供你的专业意见和建议，实现它，皆大欢喜。

7、 向着职业巅峰前进

很多时候我们会用王大锤那句“出任CEO，赢取白富美，走上人生巅峰”来自嘲，但是实际上，每个行业都有它的专业标准和可见的“巅峰”，你需要这样的目标来鞭策自己。也许你无法在一夜之间达到目标，甚至几年之内都无法抵达那里，但是瞄准目标，设定计划，是能够让你保持激情前进。在这个过程中，你会发现更多的方法来加快这一过程。

网页设计的配色技术：

各种色彩的象征：

红色热情、活泼、热闹、革命、温暖、幸福、吉祥、危险......

橙色光明、华丽、兴奋、甜蜜、快乐......

黄色明朗、愉快、高贵、希望、发展、注意......

绿色新鲜、平静、安逸、和平、柔和、青春、安全、理想......

蓝色深远、永恒、沉静、理智、诚实、寒冷......

紫色优雅、高贵、魅力、自傲、轻率......

白色纯洁、纯真、朴素、神圣、明快、柔弱、虚无......

灰色谦虚、平凡、沉默、中庸、寂寞、忧郁、消极......

黑色崇高、严肃、刚健、坚实、粗莽、沉默、黑暗、罪恶、恐怖、绝望、死亡......

色彩的心理效应

色彩的直接心理效应来自色彩的物理光刺激对人的生理发生的直接影响。

心理学家对此曾做过许多实验。他们发现，在红色环境中，人的脉搏会加快，血压有所升高，

情绪兴奋冲动。而处在蓝色环境中，脉搏会减缓，情绪也较沉静。有的科学家发现，颜色能影响脑电波，

脑电波对红色反应是警觉，对蓝色的反应是放松。

色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是"总体协调，局部对比"，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。下面介绍几种常用的配色方案：

1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。

2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。

3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握"大调和，小对比"这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。

最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是"高调"和"低调"。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为"明度变化"。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。

网页色彩的搭配

网页的色彩是树立网站形象的关键之一，色彩搭配却是网友们感到头疼的问题。网页的背景，文字，图标，边框，超链接...，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？阿捷这里谈一些心得，希望对你有所启发。

首先我们先来了解一些色彩的基本知识：

1.颜色是因为光的折射而产生的。

2.红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如：红色是color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF),
我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。

3.颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。

4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。

网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。

我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。

●非彩色的搭配

黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。

●彩色的搭配

色彩千变万化，彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。

一.色环。我们将色彩按"红->黄->绿->蓝->红"依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和寒色，当中是中型色。(如下图)

红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红

|___________| |____| |_________| |_________| | || |

暖色系中性系寒色系中性系

二.色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。

红色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。

绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。

橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。

黄色---具有快乐，希望，智慧和轻快的个性，它的明度最高。

蓝色---是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:)

白色---具有洁白，明快，纯真，清洁的感受。

黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。

灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。

每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。

●网页色彩搭配的原理

1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。

2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)

3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。

●网页色彩掌握的过程

随着网页制作经验的积累，我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。

○网页色彩搭配的技巧

文章写到这里，有心急的网友要问了："到底用什么色彩搭配好看呢？你能不能推荐几种配色方案？"别急，这里有一点技巧，可以帮助你迅速成为调色大师:)

1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择"自定义"，然后在"色库"中选就可以了:)

4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。

在网页配色中，忌讳的是：

1.不要将所有颜色都用到，尽量控制在三种色彩以内。

2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容

个人笔记总结以及领悟：

1、 了解网站的需求是what，如果是企业或公司的话，就要了解它的行业特性。

2、 做网页时首先要布局。

3、 第二要确定主色调，辅助色调，字体色。

4、 不要用太过鲜艳的颜色，以及不能用纯色。

5、 网页设计的六条永不变的x轴参考线（宽度为1417像素参考）：

44.9 116.8 218.7 1228.3 1327.1 13960

6、 Logo的设计要符合标准。不要过大。

7、 字体统一用微软雅黑，大小为14

8、 要注意页面的对齐感以及整体感。

9、 字体，图形不准变形。

10、 字体间的间隔。

11、 底部要有备案号（参考其他网页的底部）

（可以先模仿其他相似行业，主题的网站，找到灵感）

我的不足的地方：

1、 色彩搭配不会。

2、 整体的设计不好。

3、 注意每一年的网页页面流行的元素，方式。

我要改正的地方：

1、 熟练操作Photoshop

2、 配色理论

3、 设计技巧

4、 交流。