从零开始学网站设计主要学习：版型、色彩、视觉、字体、内容

网站设计几乎与因特网的历史一样悠久，早年即便是计算机工程师也会自己设计网站，将自己的所学所知分享给网友。今日的网站技术越来越复杂，光靠初阶的HTML语法与技术，做出来的网站一定很简陋，别说是当作形象官网，恐怕连小学生都不想看。

今日的网站设计是一门专业的行业，通过网站设计师之手，才做出一个舒适、美观、又能吸引用户目光的优质网站。也因为各行各业都需要网站设计的专业人员，因此网站设计在求职市场上的需求一直都存在。

不论你想要成为网站设计师，或是身任网站站长，也不论是从零开始或是略有基础，网站设计一直有新的技术，必须不断学习网站设计的新技术。以下五点是我们分享网站设计给新人时，最常给予的五点建议：

版型：网站的外观布局

色彩：赋予网站性格

视觉：技术日新月异

字体：视觉设计的延伸

内容：图文并茂的艺术

版型：网站的外观布局

网站设计报估价与报价的问题，长远影响了网站的质量

一般人看到网站，首先注意到的是色彩、图像和各种内容。如果没有这一些元素，网站还剩下什么？您会看到网站的骨架，这个骨架就是我们提到的版型，也有人称之为网站布局。网站版型或网站布局，是定义网站呈现的视觉结构。用户能够从这个结构中，找到网站的内容，并且根据网站的导览找到所需信息。

对于设计师来说，网站成功或失败，跟版型有很大的关系，因为网站的元素若有瑕疵，只需稍加修改即可，但网站的版型一旦出现问题，往往需要整个重新翻修，是庞大的工程。一般来说，把网站的最重要元素放在网站的正中央是最佳的起手式。但网站的呈现方式千变万化，设计师需要不断学习新的版型设计趋势，才能满足不同用途网站的设计所需。

网站版型设计最常使用的技术为HTML与CSS语法，这两个语言技术虽然不难理解，却很难精通，对于初学者来说是一个易懂难精的门坎。幸运的是网络上有成千上万的资源，例如免费的版型可供下载，设计师会找到热门的网站版型加以分析，并且学习成为日后的成长养分。

欧美外贸网站设计风格检索网站 

全球最酷网站设计灵感-欧美系外贸网站设计风格 

色彩：赋予网站性格

从小时候的美术课程，到现在每日生活所见的色彩，人们对于色彩并不陌生，大部分的人都可以很快的学会如何在网站上，使用不同的色彩点缀网站的内容，让网站看起来具有个性与特色，但是专业的网站颜色与日常的颜色有一些不同。

今日的网站有两个主要的目的：信息的传递与人的沟通，因此颜色的使用上与艺术设计、视觉娱乐之目的是完全不同的。网站需要呈现信息，信息如何清楚的呈现是网站设计的基础，因此颜色的使用上也应该以此为基础。

不用担心，目前全球最标准的网站设计色彩，多以灰色为基底，因为通过灰色与其他色彩的组合，几乎可以保证访客可以轻易阅读内容，也能从网站上轻易分辨出文字、图片、视频之差异。接着，你可以挑选一两种颜色与灰色加以搭配，端看你的喜爱。

越来越多色彩工具可以辅助你找出适当的色彩，例如：颜色的对比是否过于强烈或是过弱，更有丰富的工具可以自动帮你找出最佳的颜色搭配。事实上，一个网站设计师能够在单一网站使用的颜色相当有限，初学者可以先从灰色与蓝色等安全的色调，学习如何将颜色与版型应用自如。

色彩学：为何科幻片的计算机画面总是蓝色的 

网站设计趋势：留白效果带来的效益 

视觉：技术日新月异

回顾早年网站仅能呈现非常单调的图片，如今，千万像素按照片、HD高画质视频、高帧数2D动画、3D立体对象都能在网站上呈现。视觉技术总是令人目眩神迷，但每种技术都有他的优势与劣势，新手设计师需要学习每种视觉技术的优点与缺点，并用于自己的设计作品上。

图片是最常用的网站视觉元素，因为他的使用规则简单，取得也很容易。简单来说有JPG与PNG两种主流格式，初学者必须要学着如何运用这两种图文件元素于网站上，并且留心图片的尺寸与压缩，因为这关系到网站的执行效率。另外也有新世代的SVG向量型图片格是，以及压缩表现更佳的webp格式，目前虽不普及但后势值得观察。

网站2D动画的部分早期是以Flash为主流，曾经辉煌一段时间的Flash自2021年正式结束被HTML 5替代。HTML 5动画有更好的跨平台特性与互动特性，但设计上来说比较复杂。视频视频相较之下制作2D动画容易上手得多，只要手机就能拍出一段质量不错的视频，而且视频的平台使用也非常的成熟便利，各有各的长处与缺点。

次世代的网站技术势必会有3D的身影，随着2020年疫情的蔓延，在线展会、在线导览成为网站设计的新主流，像是360环景导览、虚拟导览、AR虚拟扩张、VR在线展览，都能通过网站的方式呈现在网站上。

HTML5动画-如何挑选一间好的网站设计公司  

动画网站设计时代的句点-Flash于2020终止更新 

字体：视觉设计的延伸

字体是让访客留下印象至关重要的元素，访客可以根据网站的设计，观察到网站是否适合他们继续使用。不同的字体样式会向人们传达不同的信息，更有助于建立品牌形象。一般来说网站使用字体的情况有两种：一种是以图片的方式呈现在网站上，另一种是内容上的字体呈现。

特定的字体样式可以向人们传达不同的信息，例如信赖感，永续感，优雅感、精致感、创造感等触及内心的感受。举例来说，休闲娱乐产业使用的字体，就可以采用比较特殊、大胆、活泼、突破传统的字体来呈现，而传统的工商业界就可以使用稳重、古典、传统、安定的字体表达需求。

在网站上使用不同的字体，需要一些CSS的技巧，以Google Font为例，可以上W3C的教学网站学习如何套用Google的免费字体资源于网站中。由于Google Font的中文字体选择不多，另外有专业的中文字体供货商如：花康与文鼎字体，皆已提供字体服务给网站设计者购买使用。

https://www.w3schools.com/css/css_font_google.asp

另外，网络上有许多字体相关的实用服务，例如：字体产生器，可以帮助你无须下载字体，就能产生出简单的字体图片，可以用于网站内容或是社交媒体经营。另外也有一些字体的服务，可以帮助你规划网站的文字大小、行距、字距等布局，有助于网站呈现文字内容时表达出正确的信息。

【创意】字体不但能够卖钱，还能够制作成文创商品！ 

新版Google Fonts，多种字体免费使用

内容：图文并茂的艺术

身为一个网站设计者，可能会认为网站的内容与设计者没有关系，实务上，许多网站设计上的问题，都需要将内容放上网站上，才会发现出真正的问题。

举例来说：当网站介绍产品时，是否需要有文字的说明，文字的说明该如何呈现，是要呈现出产品的标题、产品的摘要，还是另外输入文字说明？这些版面的呈现，若没有内容输入在网站内，是很难看出问题的端倪。

如果设计者本身就是创作网站内容的人，可以做的事情更多，例如：一个迷你的导引网站，活动门户网站，这些网站可能与主要网站的设计风格相差甚远，主要的目的是通过生动的内容与丰富的设计，吸引人到主要的网站一探究竟。

用网站来陈述一个故事，也是一个很重要的潮流。近年常见的滚动视差网站设计：当用户通过鼠标滚动，可以逐渐看到产品或服务内容，而且呈现的方式是十分生动，就是一个很好的例子。当网站能够完整讲述一个故事时，用户也会沉浸在其中，让网站得到更好的效果。