网站设计、搭建网站工具选择

第一章：寻找灵感

网站设计师通常会在网路上寻找设计灵感，以下是几个我们最推荐也相当容易使用的国外网站，在规划你的网站时，也许可以在这些网站上找到你喜欢的风格：

第二章：选择网站设计工具

一般来说，网站设计工具分为电脑应用程式和网站建置平台两种，而在建置之前，必须要考虑你的团队规模、预算、你想要的网站类型和需要的功能，这些都会关系到你所需要投入的资源和后续的网站维护。

• 电脑应用程式
  要设计出一个漂亮的网站页面，需要由专业美工或设计师先画出设计图，再将这些元素交由研发团队的工程师转换为程式码。常见的设计应用程式像是Photoshop和Sketch等。

对于比较大型或是比较复杂的网站来说，因为网页需要更精细且更准确的网站风格呈现，用电脑应用程式来做设计严格来说是比较标准的做法，但相对的，当中的重要工程就会落在网站开发团队身上，而且多半会伴随着人力、资源和耗费时间庞大的问题。

• 网站建置平台
  现在网路上有各式各样的网站建置平台，提供多样化的系统功能和服务，常见的像是Wix , Squarespace、Webflow和Pagecloud，而这还只是很少一部分，在挑选架站平台之前，首先要先了解平台能做到的设计程度、样式选择、价格和后台编辑的使用，在下手前必须要先做足研究，或是先使用免费版测试，再来选择最适合你的架站平台。

架站平台分为自应式和响应式两种，而这两种类型的网站又各会带来使用者不用的操作体验，这些细节都将在接下来的文章中做详细介绍。如果你不懂得如何写程式，那么熟悉并了解这些网站架设工具的自由度和设计多样性将变得非常必要。

在你开始架网站前先决定你的需求，你的网站需要相片图库吗？你多久会更新一次你的网站？你需要联络表单吗？先厘清需求，再有效地找到能满足你的需求的架站平台，才能打造出你梦想中的最佳网站！

第三章：网站设计元素

就跟人一样，网站设计的内在（功能面）和外在（外观设计）都很重要，一个优质的网站应该整合这些元素，才能将网站的使用体验和表现最佳化。优化网站使用体验的必要元素包含：前台操作指引清晰、正确使用图形和图片、写法正确且适当插入的文字和整体配色。而影响网站表现的因素则包含：网站速度、排名、搜寻难易度和受众掌握的精准度。

• 视觉化元素
  接下来我们将很快地告诉你一些在设计网站时所需要考虑的元素，每个段落都会提供一些小诀窍，让你能更快掌握这些要点：

• 写文案
  基本上，网站的外观和文字是息息相关的，网站的文案写手和美工设计需要紧密地携手合作，才能让网站设计一体成型且达到平衡。例如在网站中加入图案和图片时必须把重点放在文字区块，用文案来点缀及衬托你的图像。

• 字型
  选择一个能适用你整个网站的字型。网站所使用的字型应该要能搭配网站的配色、形象和图片，且能强化整体的网站风格。像Canva's Font Combinator这类型的工具能够帮助你找到最适合你网站的字型，另外还有PageCloud的应用程式甚至可以帮你配对丰富的字型组合。

• 颜色
  颜色的选择是在设计网站时最重要的决定性因素之一。要记住，许多人对色彩心理学存在许多的迷思和误解，当在架设网站时，你应该更着重在网站整体的调性，让你的品牌和你想传达给受众的讯息与网站配色保有一致性。

• 版型
  你如何决定你的网站内容排版，将对网站的使用者体验和功能性有极大的影响。虽然没有一个具体的规则教你如何挑选版型，但还是有一些基本的原则可以遵循，像是视觉层次、黄金比例、席克定律、费兹法则、三分法、格式塔设计法则、留白和干净设计及奥兹剃刀理论。确保你将目标受众的需求考虑进去，并且避免太过于复杂的版型导致分散你想传达的讯息。

• 形状
  在网站设计中使用图形元素可以帮助你整合文字和图片，还能提升网站外观的整体质感。结合美丽的色彩和形状可以很直接地在第一时间抓住网站访客的目光，也能进一步为网站流量带来很大贡献。

• 间距
  间距是在架构一个讨喜且动线明确的网站时非常重要的关键。网站中的每个元素都会形成不同型态的间距。适当的间距可以让网站的文字、照片和图像达成完美的平衡，持续地使用留白概念可以增加网站操作使用时的流畅度，是现代网站设计不可或缺的概念。

• 图片和图标icon
  让人惊艳的设计可以在短短几秒内沟通大量的讯息，而这一切都和善用图片和icon有很大的关系。选择适合的图片和icon有助于强化你想沟通的内容，只要简单上Google搜寻就可以轻易获得许多有用的相关网站工具：

• 免费图片和icon：
  Pexels

Unsplash

IconMonstr

• 进阶版付费图片和icon：
  Shutterstock (Getty)

• 影片

在网站中加入影片的形式在网站设计中越来越受到欢迎，如果使用恰当，可以有助于帮助网站使用者理解那些无法用文字和图像传达的讯息。想像当你在一间设有电视的餐厅里吃饭，你会发现周遭的人的目光无法离开萤幕中不断变换的影像。因此我们建议，在确保不会模糊焦点的前提下，网站中加入动态影片也许是个好主意。

• 功能性元素
  网站功能面的设计对于网站在搜寻引擎的排名和使用者体验至关重要，所以在进行网站设计时，务必要把以下几个重点考虑进去：

• 选单/导航列
  网站的选单/导航列是决定你的网站是否能适当发挥作用最重要的元素之一。取决于你的受众，你的导航列可能有多种不同的使用目的：帮助第一次造访网站的访客得知你的网站提供什么样的服务、让重复造访的旅客快速登入和提升整体的使用者体验等，你可以在这里找到更多的小诀窍，帮助你优化你的网站导航列。

• 使用者互动
  你的网站访客可以用各种不同的方式和你的网站产生互动（滑动滚轮轴、点选和输入等）而最好的网站设计应该让使用者感觉他们是可以「控制」他们正在浏览的网站的，以下是几个简单的例子：

  • 绝对不要自动播放音讯或影片。

  • 除非是可以点击的，否则绝对不要在文字下加入底线或其他强调文字的装饰。

  • 确保所有的表单都是手机使用者友善的。

  • 避免弹跳视窗。

• 动画
  现在网路上有非常多元的动画技术让你的网站可以抓住使用者的眼球，还能引导使用者和你的网站做互动。比方说，在你的网站里使用表单或问答式的按钮，当访客填写表单或回答在问题时按下是或否，都能使访客和你的网站产生连结。但我们仍要建议在第一次设计网站时尽量选择简单一点的动画，否则过于复杂的动画对工程师或网站开发者来说可能都是个大工程。

• 速度
  没有人喜欢速度慢的网站。要人花上超过几秒的时间等待网站载入完成，可能会使有些人因为不耐烦而跳出或直接关闭视窗。因此，不管你的网站设计得多精美，当网站因为速度而影响搜寻引擎排名时，就先被大大扣分了！

你可以发现，很多网站为了更快的载入速度会刻意压缩网站内容，但这种方式对于提升排名的效果可能有限，建议在选择架站平台时可以做点功课，看看哪个平台的架站工具在这方面的表现较佳，像是PageCloud就有优化网站中容量过大的图片、多张图片相簿的功能，用来加速网站载入速度。

• 网站结构
  一个网站的结构在使用者体验和搜寻引擎优化中都扮演相当重要的角色。你的网站使用者应该要能够透过导航列或选单方便地浏览网站，如果连他们都在你的网站中「迷失方向」，找不到他们需要的，那么网站爬虫大概也会遇到一样的问题。（注：「爬虫」指的是透过搜寻网页确认网站是否功能健全的一种自动化程式。）而不够明确的导航列，就可能严重影响你的网站排名。

• 跨浏览器及跨装置相容性
  一个好的网页设计应该在任何浏览器和装置上看起来都一样好看，如果你是用程式软体scratch制作网站，我们会建议你使用跨浏览器测试工具来加速你的撰写流程，同时也会更有效率。而如果你是使用架站平台，一般架站工具的开发者都已经把相关的测试工具内建在平台中，不仅可以省下多余的测试时间，也可以让使用者把心力更专注投入在网页设计上。

第四章：网站设计类型：自应式VS. 响应式

过去你可能曾经听过固定式网页、流动式网页和静态网页等各种不同的网站类型，但在手机装置成为主流的现在，最适合的网站类型可以大致分为两种：自应式和响应式。了解自应式和响应式网站的优缺点，可以让你更能清楚分析哪一种架站平台会更符合你的需求。

• 自应式网站
  自应式网站设计针对特定的萤幕尺寸有两种或两种以上的专用版本，能因应网站侦测显示最合适的主要目录选单尺寸：

• 适应装置类型
  当网页浏览器连结到网站时，HTTP会发出一个含有「使用者代理」的讯号给伺服器，告知是哪种装置正尝试浏览网页，而自应式网站则会依据来源的所属的装置类型来显示（例如：桌机、手机或笔电）。因此当你在桌机上尝试缩小画面时，画面没办法依据萤幕大小调整成手机或平板尺寸，问题就在于你使用的浏览装置仍是桌机。

• 适应浏览器宽度
  另一种适应类型，则是藉由媒体查询（原文media queries，是一种可相容不同萤幕尺寸的CSS。）和断点（原文breakpoints，指特定的网页宽度）来切换适应装置的尺寸，分为1080px、768px和480px三种，这样的呈现方式不但可以提供网页设计更多的弹性，也能提供更容易阅读的使用者体验。

• 自应式网站优点：
  编辑模式「所见即所得」，你在编辑时看到的样子就是最后呈现的样子。

无需程式码的客制化设计更加简单快速。

跨浏览器和跨装置相容。

网页载入速度快。

自应式网站缺点：
使用适应装置的自应式网站，当在桌机版本上用较小的浏览视窗时页面显示可能会跑掉或出现损坏。

部分网站使用的效果可能只能用在响应式网站。

响应式网站
响应式网站可以更精细地依据网站中各元素在排版中的比例，依装置尺寸等比例调整大小。例如：一则在页面中占比25%的标题，不管萤幕尺寸放到多大都会维持25%的比例。响应式网站同样可以透过断点客制化调整在不同尺寸装置中的显示方式，但有别于自应式网页需要在页面触及到断点时才切换，响应式网页可以随时变换及调整显示画面。

响应式网站优点：
不管使用的是何种装置，在不同尺寸的萤幕上都能有优质的使用体验。

响应式网站的架站系统通常是有固定的模板，让设计不容易出现损坏。

有成千上万种版型可供挑选。

响应式网站缺点：
如果一开始是用scratch制图，可能需要大量的设计和测试来确保品质。

在不使用程式码的情况下，要做到客制化需求可能比较具有挑战性。

自应式网站架站工具
Wix和Pagecloud是目前市场上讨论度最高也最多人使用的视觉化网站架站工具。两者都使用自应式系统，在「所见即所得」和拖放操作方面都是首屈一指，你不需要靠写下任何一条程式码也能打造几乎任何你想要的网站设计。

Wix在2006年问世，至今打造了各式各样可适用于商业网站的网页模版，也被许多人公认为是最适合初学者的架站工具。

虽然很难确切指出哪个架站平台最好用，但还是有几个重点可以做为选择参考依据，同时以下推荐的两种推荐架站平台都有提供免费试用，也非常建议在都尝试过再做选择，：

如果你想找客制化弹性最大且体验最佳的，建议可以选择Pagecloud。

如果你过去完全没有架站或网页设计经验，推荐选操作最简单的Wix。

如果你打算和一群网站开发团队一起架设网站，建议选Pagecloud。

想要有最多最丰富的版型选择，那就选Wix。

如果你希望能在桌面排版系统累积一些经验的话，就选Pagecloud吧！

响应式网站架站工具
像Squarespace这类的架站平台提供了响应式网站的架站工具，但这也代表它的编辑体验是相对受限制的。要打造一个流动式响应式网站相当困难，而当你不会写程式时，要建造一个别出心裁且与众不同的网站更是难上加难。

这也是为什么像Webflow和Froont这类更精细的架站工具加入战局，而如果你不确定自己是否适合这样的工具，以下提供几个优缺点做为参考：

• 优点：
  不会写程式也能为你量身打造响应式网站。

精准操控页面上的每个元素及物件。

可输出程式码，将你的网站「打包带走」移至其他相容系统。

• 缺点：
  复杂的工具使得上手更加困难。

相较自应式网站设计过程更花时间。

• 电子商务
  电商网站在网站设计中是相当重要的部分。建造一个有清楚的导航列、内容丰富且准确展示你的商品的网站，才能让消费者享有最好的使用体验。