【WEB设计】网站设计基础知识，让你对网站设计有更清楚的了解

| 网站设计需要具备哪些技能、知识和经验？

网页设计要求有“设计工具”、“知识和经验”、“代码”。懂得这三点，在要求网站设计时就能与制作公司进行沟通。在此，我们将对这些问题作详细说明。

| 理解支持执行设计的工具

您应该了解每一种网站设计工具的特性来设计您的网站。因为有很多设计工具都支持网页设计的实现，比如 Photoshop, Illustrator, Adobe, XD, Sketch, Figma等等，这些软件在都很有名，各有千秋。稍后将详细介绍一些重要的设计工具。看过好的设计，有扭转设计的经验。只是使用工具并不足以创造出优秀的网页设计。必须有设计观念。因此，我们建议网页设计者多看多设计，培养眼力。这是因为当你看到许多设计时，比较容易分享图片的要求。例如，“我希望你能设计出与首页一致的布局，比如00。例如，“我希望布局与主页一致，如“00”，“我想让图片最突出的部分与“00”一样大”。等一下

“我希望它看起来很酷”，“我希望它时髦”。不要发出“酷”“时髦”等模棱两可的命令，而是要具体一点，降低效率。

如果想在头脑中建立一个“抽屉”的设计概念，可以去看看那些设计不错的网站和主页。

建议下列4个网页设计图库站点。

io3000.com

gooddesignweb.com

www.webdesignclip.com

nipponcolors.com（配色）

从图片库网站上，您可以看到以下图片等网站设计。

如果你经常看网站，你可以找到一些网站，在布局和色彩方面都有帮助。

编码技能，如HTML，CSS和JavaScript。

网站的网页设计并不只限于表面的设计。为了使网页设计在互联网浏览器上可见，需要进行编码。编码使用的语言是HTML、CSS和JavaScript。

超文本标记语言| HTML

用于创建构成网页基础的文件的语言。它向计算机本身指定了文本或文本串应该代表的内容。

CSS

用于装饰文件外观的一种语言。它的作用是装饰用HTML创建的页面，它只有白色背景和黑色文字。

脚本语言 | JavaScript

JavaScript主要用于为网页添加运动。如果你只使用HTML和CSS，页面仍然是静态的，但如果你使用JavaScript，你可以把它变成一个动态的页面。除此之外，它还被用于开发网络应用和智能手机应用。如果你懂得基本的编码知识，当你要求网站制作公司设计制作你的网站时，你就能与他们进行深入的沟通和建议。

如果你想通过实际接触编码来学习更多的知识，推荐以下网站进行自学。

www.runoob.com

www.w3school.com.cn

w3school是非常受欢迎的，被很多用户推荐。如果你想用英语学习，Codeacademy也很受国际用户欢迎。

| 设计、色彩与排版的4个基本原则是什么？

设计是建立在基本原则之上的。但基本原则是什么呢？

我们来讲解设计的四个基本原则，即使你不是设计师，也可以学到设计的基本原则。此外，我们还将介绍设计中重要的色彩和排版。

什么是近距离？让我们把这些信息分组

邻近原则

就近原则是把相关的物品集中在一起。如果你把相关的物品拉近，它们就会成为一个有凝聚力的群体，而不是互不相关。因此，不要把不相关的信息放在附近。这是因为近似性需要让访问页面的读者在视觉上有即时性。

如果对他们进行适当的分组，他们更有可能被阅读，更有可能记住你的网站或页面。

| 什么是对齐？要注意所有元素的排列!

对齐是指页面上所有的东西都必须有意识地摆放的原则。此外，页面上的所有内容都必须在视觉上与其他东西相关。看齐就是 "团结 "和 "组织"。如果对齐方式做得好，与字体相结合，会给人以精致、正式、严肃的感觉。所有的排列都应自觉地放置。

| 什么是重复？我们来定义一下设计规则。

重复的原则是指在一个作品中重复一些设计特征。例如，如果你在一个页面上反复使用相同大小的标题、粗体边框或列表局，你就是在使用重复。重复的目的是为了 "统一"，增加视觉趣味。一个页面有很好的接近性和对齐性是很好的，但如果你根据重复的原则增加设计，你就会增加读者认识到这个页面有趣的机会。

| 什么是对比？我们来强调一下元素之间的区别。

对比就是要让两个事物之间有区别。

一个很好的例子是，大字号和小字号，小图像和大图像，或者冷色和暖色。改变大小和颜色，使其在页面上可以识别为两个不同的元素。改变颜色或只在插图上增加一点不同的颜色，这不是对比，相反，它会造成两者的冲突。

对比的目的是 "在页面上创造兴趣"。换句话说，它有助于组织和信息。如果你不有所作为，你就会把读者引入歧途，他们就不会注意你希望他们注意的部分。

所以，如果你要对比，就要大胆的区别。近似、对齐、重复、对比这四个原则是设计中必不可少的。这四个原则非常重要，所以要牢牢记住。除了这四个原则之外，"色彩"和 "排版"在设计中也很重要。下面我们也来介绍一下另外两种。

| 什么是颜色？我们来了解一下饱和度、明度和色调。

所有的颜色都有三种属性，即 "颜色的三属性"。

颜色的三种属性如下。

色调(Hue)

饱和度（chroma）

光度(value)

如果你了解这三种属性的基础知识，你就可以实现有效的配色方案。

Hue

色调是指红色和蓝色等颜色的属性差异。色相环是指一圈圈有代表性的颜色排列而成。在一个色相环中，相邻的颜色叫做 "相似色"，相对的颜色叫做 "互补色"，互补色两边的颜色叫做 "相反色"。

chroma

饱和度是指颜色的鲜艳程度。饱和度最高的颜色称为 "纯色"，反之饱和度最低的颜色称为 "消色（灰）"。

value

光度是指颜色的明度。光度越高，颜色越接近白色；反之，光度越低，颜色越接近黑色。

| 什么是字体设计？让我们用字母来操作图像吧!

字体设计是指所有使用文字的表达形式。

排版有两点：一是选择合适的字体，把文字排列得漂亮，二是把文字当成设计元素。排版也是有讲究的。例如，如果你牢记上述四项设计原则，如相关字母要靠拢、重要句子的字体增大、行首对齐等，字母就成了设计。

此外，如果适当调整行距和字符间距，页面上的文字就不仅仅是文字，而是变成了一种设计。

如果把文字作为一种设计元素，而不仅仅是文字，会让页面的设计更加突出。

| 网站设计的基本知识有哪些？

到目前为止，我们已经学习了设计的原理，但是设计网站本身需要什么样的知识呢？从这里开始，我们将对网站设计进行讲解，主要是版面设计、字体、色彩模式。

在网站设计中，不同的网站有不同的布局。其中主要有两种布局方式：单列布局和网格布局。下面我们将逐一说明。

单栏（一栏）

单列是指网站的内容从上到下排列成一列的布局方式。主要用于登陆页、企业网站、活动网站。

在单列的情况下，你可以专注于内容，因为你不需要关注两边的内容。此外，根据显示宽度改变内容也很方便，而且兼容响应式设计（能自动响应智能手机的设计），维护起来也很方便。

网格布局

与单一的不同，这是一种通过将屏幕或页面划分为直线网格来安排内容的方法。主要特点是可以在列表中放置很多内容。

内容块的组合形式可以是固定的，也可以是可变的，根据浏览器的宽度安排不同大小的块来变化。同时，它还可以支持响应式布局以及单列。可以根据设备的不同，创造出不同的设计，比如在桌面上有3列，但在手机上有2列。

| 什么是字体类型？梅里奥、于哥特等。

由于有这么多类型的字体可供选择，似乎很难选择最好的字体。所以选择的字体具有可读性、可视性和易读性，这样就不容易出错。

下面是一些具备这三种功能的字体。

| 不同类型的配色图案有哪些？ 

决定主色、底色和重点色。

配色模式是决定网站网站设计的最重要因素之一。

一般来说，最好选择以下三种颜色。

底色

主色

重点颜色

底色

这是占据网站最大面积的颜色，用于背景和边框。

主色

这是决定网站整体印象的颜色，是配色方案中最重要的颜色。

它是配色方案中最重要的颜色，因为主色决定了网站的整体形象。

装饰色

重点色是指当用户看到主色和底色时，能吸引用户眼球的颜色。

它常用于查询按钮。好的平衡点是70%的底色，25%的主色，5%的重点色。

| 学习设计的主要工具是什么？

要做网页设计，你需要一个设计工具。如前所述，设计工具的种类很多。以下是设计师最常用的四种工具。

Photoshop

Photoshop是一种用于网页设计排版和图形处理的工具。它不仅被很多网页设计师使用，也被很多网页制作公司使用。

它是网页设计行业的标准工具，因为它是一个优秀的工具，可以在排版的同时处理图形。

Illustrator

Illustrator，顾名思义，是一个绘制插图的工具。因此，它可以用来创建用于网页设计的图标和插图。它还具有网页设计的排版功能，很多设计师都把Illustrator作为主要工具。 

Adobe XD

它是一个设计工具，也可以用来创建网页设计，但目前主要用于创建基于Web服务的应用程序。它的特点是操作轻快。与同为Adobe公司的Photoshop和Illustrator联动，功能不同，功能方便，提高了设计制作的效率，因此也很受欢迎。

不过，相比Photoshop和Sketch的同款UI设计工具，它在功能上有些缺乏，所以需要确定什么能做什么不能做才能使用它。

Sketch

一个专门从事UI（用户界面）设计的设计工具。之前并不适合网站设计，但近年来，一些公司将其用于网页设计。

Sketch的特点是，你可以使用Sketch特有的插件，使用高功能的符号。符号是一种功能，可以将设计零件单独保存为组件，然后只需简单的操作就可以改变相应的设计零件。

例如，你可以一键改变同一元素中使用的多个设计部件的颜色，或者立即改变书面文字。如果你能很好的利用它，在网页设计中网站制作就会高效的进展。但是，它只能在Mac上使用，有的时候与主要使用Windows的公司交换数据是很困难的。

【专栏】网页设计的注意点

根据设备和浏览器的不同，设计的方式有哪些变化？

在网页设计中，你需要注意的是，你的网站看起来的方式会根据设备和浏览器而改变。

随着智能手机的普及，越来越多的人在智能手机上浏览网站，近年来，不仅需要建立一个桌面浏览器网站，而且还需要建立一个智能手机专用网站已经成为普遍现象。

从这里开始，我们将简单地解释网页设计如何根据设备和浏览器的变化而变化。

举个例子，我们对比了三种设备：PC端、iPad和iPhone X。

这三种设备，以下几点可以看出对比中器件的变化。

在智能手机上，首页顶部的菜单栏由一个三行图标（汉堡包菜单）来容纳

网站的关键图像（关键视觉）根据设备的不同而改变其形状。

文字的位置也会根据关键视觉的变化而变化。

在 "新闻 "栏目中，桌面上可以看到四条通知，但在智能手机网站上只能看到两条。

相应的，智能手机网站上也出现了左右两边查看新闻的箭头按钮。

不同设备上的文本换行符是不同的

例子中的公司网站采用了响应式设计。响应式网站是指当网站达到规定的尺寸数时，自动改变网站形状的设置。在响应式网站之前，我们曾经为浏览器版、智能手机版等分别设置了HTML。不过，近年来，众多网站都支持响应式网站。

如果你是一个站长，也希望有一个智能手机的专用网站，我们建议你制作一个响应式网站。

我们介绍了网站设计的基础知识。所有的内容都是重要的。如果你是网络负责人，请尽量控制好基本功，然后再去问制作公司。如果你牢记基础知识，就能进行更深层次的交流，完成更好的网站。

对于想把网页设计交给专业人员来做的人来说。如果您没有时间找网站制作公司，请联系我们。我们有实际的网站制作和运营经验，让您不费吹灰之力就能得到高质量的匹配!

近5年来，我参与了包括上市公司在内的50多家企业的网站设计。

与不同的客户合作过他们的网站项目，所以，即使您是不是很了解专业的知识，我们也会根据您的项目和预算为您制作出理想的网站。