自己设计网站似乎不太可能，你是不是也这样想？你是不是觉得必须得是专业的人，专业的网页设计公司才能干这活？

我实话告诉你，这完全不对！！

事实上，你根本不需要把自己打造成一个专业人士、一个天才才能设计网页。网站设计关乎创作自由，且本文介绍的易于遵循的指南将会协助你完成这项工作，并且告诉你网站设计重点以及你需要避免的网页设计坑点。

-> 这篇文章旨在阐述如何设计一个网站，如果你想知道如何建立一个网站或关于WordPress建站的内容，你可以参考对应的文章。

1.  如何设计网页？

（1）设定网站目标和策略

（2）研究最新的网页设计趋势

（3）挑选平台

（4）选择模板/主题

（5）确定你的品牌

（6）添加以及优化内容

（7）发布网页

1.1  设定网站目标和策略

网页设计的第一步是“设定网站目标和策略”。

这听起来很简单，但在你一头扎进网站设计之前，你首先需要弄清楚网站目标。

除了简单地了解你的行业和制定内容战略之外，你还需考虑你的独特卖点是什么，以及你要如何体现出来。

人们并不愚笨。如果你是为了盈利或为了提升自己的形象，人们都能通过网站看出来。你的网站设计与你的品牌直接挂钩，它需要给人一种真实、真诚的感觉，且要有吸引力，能让人愿意参与进来。

• 你想要获得什么？

一旦你的目标明确了，重点就转移到当访客访问你的网站时，你想让他们做什么？你的网站只是用来提供信息？销售产品？让访客注册？

这个问题的答案最终决定你网站的外观和给人的感觉。以购物网站为例，你设计的一个关键元素是你的登录页面。

根据顶级数字品牌公司Crowdspring的说法，你的登录页面应该聚焦于一款产品或活动，并带有明确的CTA（Call to Action，呼叫行动，即刺激客户下单）。

曾经有人采访一家全球科技公司的一位在商品转化率方面非常顶尖的专家Wolfgang Bruns，问他关于，为不同的访客提供不同的登录页面、制定不同的优惠和产品的重要性（这一过程称为客户细分）。

他认为，了解自己的客户对于任何商业模式上的成功都是至关重要的。这意味着你可以定制以及改进你提供的体验，更好地满足他们的需求。这样做会对利润产生正面影响。对流量进行细分以提供对号入座的体验，这是迈向个性化用户体验之旅的第一步，随之而来的便是商业成功。

1.2  研究最新的网页设计趋势

网页设计发展很快，但总归有值得你去学习的设计。不过，你要知道的是，尽管这种设计比较流行，但并不意味着它一定适合你。

48%的人认为设计是网站最重要的要素，所以花点时间看看竞争对手在做什么很重要。每个行业都会有不同的风格，所以你要知道你是要融入你的行业，还是要颠覆它，这一点很重要。

1.3  挑选平台

当你寻求高质量的网页设计时，你首先想到的是不是寻找一个专业网站设计公司的帮助？虽然顶级网站设计公司可以设计出很棒的网站，但所要花费的成本却是无比贵。

值得庆幸的是，这里还要另外几种解决办法：WordPress、网站建置工具以及电子商务建立平台。这些都是DIY在线工具，允许你设计和建立自己的网站，而不需任何程序技术或设计经验！

当然，市场上有很多不同质量的选择，那应该选择哪一家呢？别担心，我们已经为你研究、测试出了市场上最好的网站设计、建立工具及平台：

• 10家最好的网站设计工具
• 8家最好的跨境电商建立平台

接下来，我们将介绍建立一般网站和电子商务网站优先考虑的前三个建立选项。首先是WordPress。

（1） WordPress

WordPress.org是一个免费的开源程序的内容管理系统（CMS）。当涉及设计、建立网站时，它是最受欢迎的。

WordPress让你完全掌控你的网站。不过，若想让网站能够上线，你需额外支付虚拟主机服务、域名网址、以及额外的插件或主题费用。你是不是认为需要花费大价格才能备齐这些装备？

其实，作为新手，第一年只需$33（选择Bluehost WordPress Basic主机方案的话），就可完成网页设计、网站建立的工作，并且具有高度的自由性。

-> 如何建立一个WordPress网站？这篇指南将指导你一步一步建置出属于自己的WordPress网站。

-> 还不知道WordPress到底是什么？没关系，请阅读 WordPress是什么？

-> 想全方位了解WordPress？请点击WordPress教程。

本文“WordPress”是指WordPress.org，而非.com ！更多关于这两者的区别： WordPress.org vs. WordPress.com。

（2） 网站设计工具

除非你想在网上销售，否则网站设计工具是非专业人士建立自己网站的另一种有效方式。如果你想开一家在线商店，可以直接移步于我们的跨境电商平台版块。

我们已经调研得出10家最好的网站设计工具供你选择，所有工具都能满足不同的需求。

• Wix

Wix通常被认为是市场上最好的网站设计工具。它易于使用的拖放编辑器让你可以完全施展你的创造能力，允许你添加任何内容，并放置在你认为合适的地方。

Wix有500多个专业设计的模板可供选择，内置了一系列非常棒的功能，还有一个巨大的应用商店供你安装任何你需要的额外功能apps。

• Squarespace

Squarespace是散发着优雅气息，并带有一种光泽、优质感觉的网站设计工具。Squarespace以自己的模板而自豪。它们的尖端设计使它们成为创意领域行业的完美选择，例如摄影师、艺术家或平面设计师。

• Weebly

Weebly宣称是一款适合所有人的网站设计工具，实际上，它专注于小企业网站。它有很多模板可供选择，还有一个很容易掌握的拖放编辑器。

（3）跨境电商建立平台

跨境电商建立平台的工作方式类似于网站设计工具，但它们是专门为帮助你建立在线商店而出现的。有些是专门为电子商务（例如，Shopify）而建的，而另一些（如Wix）则是具有电子商务功能的网站设计工具。

• Shopify

作为最好的电商建立平台之一，Shopify遥遥领先于同行。它有一系列专门为你产品设计的主题，还提供更多的销售功能。

Shopify非常突出的一点是该平台允许你通过利用不同的渠道，以及通过在不同的市场和社交媒体上销售来扩大在线商店的覆盖范围。

Shopify与网站设计工具略有不同，Shopify主要是在控制台上操作，而非在编辑器上操作。

由于网上商店需要考虑的因素太多了：比如营销、库存和发货等，如果你有一个控制中心来管理这一切，当然也包括网站设计，就变得非常有意义了。

• Wix eCommerce

“你们不是已经介绍过Wix了吗？”是的，但用Wix建立一家网上商店完全是另一回事！

虽然Wix在建立一个“纯粹”的在线商店方面无法与Shopify竞争，但对于那些只想在自己的网站上开设一个商店版块的人来说，Wix是完美的选择。

任何兼营销售产品的人都可以从Wix中收益。例如，如果你是一个乐队的成员，你网站的主要目的可能是向歌迷提供巡演信息，并接受演唱会的预订。

不过，你也有可能想在网站上售卖商品，如巡演上衣、专辑和品牌乐器。Wix可以让你很容易地从一开始就建立一个在线商店，或在中途增加一个店铺。

• BigCommerce

与Shopify和Wix相比，BigCommerce与前者更相似。它完全是为在线销售而设计的，被广泛认为是建立在线商店的最佳平台之一。

BigCommerce胜过Shopify的一点是它拥有大量的内置功能。使用Shopify，你最终可能会花费远远超过安装一大堆应用程序的标准月费，而许多应用程序是免费与BigCommerce一起使用的。

不过，BigCommerce无疑比Shopify更难以使用。它使用的一些术语非常专业，而且网站的实际设计可能会变得相当复杂，这意味着它并不是一个适合初学者的平台。

我们会将BigCommerce视为一个为那些有技术且有预算意识的人提供的平台。它比较适合中小企业。所以任何一个只想售卖较少产品的人，更适合使用带有电商功能的网站设计工具。

1.4  选择模板/主题

现在你已经清楚了你建立网站的目的，知道了最新的网页设计趋势，心中有了一个建立平台，接下来就是要挑选一个模板。

模板（或主题）是一个网站的布局，就像房子的结构一样，在你用东西填满它之前，它形成了你网站的基本外观。

大多数平台都会提供一系列模板供你选择，其中预先填充了示范内容。

模板通常根据行业类别分类，这让你可以比较容易地从中筛选出适合自己的模板。每个类别都将具有与该行业相关的内置功能的模板，从而可以节省大量时间和精力。

1.5  确定你的品牌

好啦，是时候开始设计网站了！

在设计网页时，需要考虑你所做的每一件事与你的整体品牌之间的关系。从配色方案到字体风格和形象，一切都在讲述品牌故事中发挥着作用，它们应传递相同的信息。

（1）配色方案

色彩是品牌最大的推广工具之一。事实上，依据Color Matters，一个标志性的颜色可以提高80%的品牌认知度。

人们对颜色的感知背后有很多心理因素，所以了解它与你的行业相关性是很重要的。

• 绿色：代表财富、健康、宁静与自然。眼睛最容易处理的颜色，所以它有放松的效果。绿色是男性和女性最喜欢的第二种颜色。
• 黄色：代表年轻、乐观和开朗。经常用来吸引观众的注意力。黄色会使眼睛疲劳，所以你要谨慎使用。
• 橙色：代表友好、热情和创造力。促使人们采取行动：购买和订阅。橙色吸引冲动的购物者。
• 红色：代表激情、紧迫感、兴奋、活力和危险。经常被用来制造人们购买的紧迫感。有效地引发强烈的情绪反应。餐馆用它来刺激食欲。
• 粉色：代表女性、甜蜜、天真、生育和浪漫。通常用于向妇女和年轻女孩推销服务和产品。
• 紫色：代表皇室、财富、成功和智慧。常用于美容或抗衰老产品。对人有抚慰和镇静的作用。
• 蓝色：代表信任、安全、稳定、和平与平静。常用于企业和银行，以营造品牌的安全感和信任感。蓝色是男性和女性最喜欢的颜色。
• 灰色：代表中性、简单、冷静、未来主义和逻辑。它缺乏情感，与技术、行业、精确度、控制力、能力甚至成熟联系在一起。
• 黑色：代表权力、奢华、精致和优雅。经常被用来营销奢侈品牌，以唤起专业、力量和精确度。

大多数品牌都有1种主色，2到3种次要颜色。蓝色是最受欢迎的颜色，在排名前100的品牌中，有三分之一的品牌在其logo中使用蓝色。

（2）字体样式

与颜色类似，你选择的字体让人们对你的网站的看法有很大的影响。网站使用者平均会在任何给定页面上阅读大约20%的文本，所以用合适的字体氛围来吸引他们是至关重要的。

当然，白领企业会希望使用经典风格的字体。像宋体、Arial或Helvetica等这样的字体是专业的代名词，因此在讨论严肃的问题时使用它们是很有必要的。

不过，一个更有趣或更好玩的品牌可能希望探索更抽象的字体。但是，在趣味性和可读性之间取得平衡很重要，因为你最不想做的是疏远你的读者群体。

本网站使用的字体是 Noto Sans TC。

（3）图片

图片是你如何将一个朴素的网站变成一场视觉盛宴必不可少的要素。

视觉内容对增加点击量和参与度很有用，因为图片会萦绕在你心头，久久不离去，增加访客对你网站感兴趣的几率。

依据一项研究，如果我们看到一条信息，我们只会记住其中的10%；但是，如果你加上一张图片，我们会记住65%。

尽管这样，你要注意，不要让你的网站上有过多的图片。许多高质量的图片可能看起来很棒，但它们会减慢你的网站速度。访客可没有太多耐心，如果你的网站不能快速加载，他们就会离开。

1.6  添加以及优化内容

接下来，你应该知道你要给你的网站添加什么内容了。在执行这项操作时，你需要考虑两件事：定位和优化。

定位是指内容在每个页面上的位置，以及它的布局方式。与此同时，优化是调整内容以协助其在Google、Bing或百度等搜索引擎上排名更靠前的过程。

下面，我们将讨论这两者的技术细节，并解释它们为什么重要。

（1）定位

研究人们的阅读习惯后，我们发现人们通常以“F”格式阅读内容。简单地说，这意味着网站用户以类似于F的形状扫描页面。

这就是为什么网站上的导览栏几乎总是显示在页面顶部，这是人们在登录网站时第一个被吸引的元素。

记住这一点来安排你的内容是很好的做法，这样就能让尽可能多的人看到重要的内容。

（2）优化

搜索引擎优化（Search Engine Optimization, SEO）是指你对你的网站内容做出改变，以提高访客的质量或数量。可以这样想SEO：

如果你有一辆赛车，你的目标是赢得一场比赛。你可以拥有看起来最花里胡哨的汽车，可是，引擎盖下的东西才是你赢得比赛的关键。

当你调整引擎、更换轮胎或减轻底盘重量时，你所做的就是在优化你的赛车。你的赛车看起来好像没什么变化，但这样做会让你赢得比赛的几率大大提高。

SEO其实很类似。你的网站看起来可能没什么不同，但对内容、图片和响应度的调整可以对它在搜索引擎结果中的排名产生巨大影响。

以下是你在设计一个网站时可以做的一些比较重要的优化：

• 元数据

页面或文章标题和描述，即元数据（Meta Data），是告诉Google你网站是关于什么内容最简单的方式。

元数据出现在搜索结果中，允许用户在点击之前就能知道你网站上都有什么。

• 图片优化

图片通常是非常大的文件。这意味着网站上有大量图片会减慢你的速度，网民耐心有限，他们会在你的网站完全加载之前就离开了。这就是所谓的“跳出页面”（bouncing）。

那你有什么解决方案吗？当然，压缩图片。

有大量免费的在线压缩工具可以减少图片的像素，还不怎么扭曲图片质量。压缩图片可能会对页面加载速度产生很大的正面影响。

本网站显现的所有图片均是通过Squoosh.app处理过的.WebP格式的图片，此过程不但让图片的规格变小，且几乎不怎么影响图片质量。

• 图片替代文字

除了压缩图片，SEO的另一个重要工作就是要告诉Google图片代表什么。不像文字，搜索引擎不能“阅读”图片，因此，通过在图片中添加替代（Alt）文字，你可以有效地帮助搜索引擎理解图片中所描述的内容。

Alt文本不会直接出现在你的网站上，它是在你编辑图片的时候添加的。

• 移动响应能力

越来越多互联网用户喜欢通过移动设备，如手机，上网。这就是为什么Google越来越青睐在移动设备上格式正确的网站。

如今，大多数模板都是移动响应的，会自动格式化你的内容，以适应不同的设备屏幕大小。

如果你想改善访客的体验，并为你赢得重要的SEO积分，那么你就需要考虑移动响应性。因为这也是让你的网站更容易被更广泛的群体访问的一个很好的方式。

• 内链

内链是指你通过超链接将读者引到你网站上的另一个网页。通常是当你提到一些相关内容的时候，你会这样做。这样可以告诉Google等搜索引擎，你是这个主题内容的权威，因为你有很多关于这个主题内容的文章。

-> 本篇文章只介绍了SEO的部分内容，若想知道详细介绍，请参考SEO教程这篇文章。

1.7  发布网页

好，到了这一步，就是准备要发布网页了。

在发布之前，你需要检查一下一切是否正常。一般你可以检查：

（1）你网站内的所有链接是否是有效的，是否可以将读者带到正确的页面。

（2）你的所有内容都是可读的，且很容易找到。

（3）你离主页的距离永远不会超过三次点击。

（4）你的网站在电脑、平板、手机上看起来都很棒。

（5）任何页面的加载速度都不超过5秒（使用免费的网站速度测试器进行检查）。

2.  结语

现在，你知道了设计网页所要考虑的要素。你可将本指南作为你网站设计手册。这样的话，当你不确定应该怎么做时，看一看。

记住：密切关注你的竞争对手，不要害怕向优秀的人学习！遵循我们指南中的步骤，你很快就会发觉设计网页并不像想象中那么难，也并不是那么地枯燥乏味。

3.   网站设计常见问题及解答

（1）设计一个网站需要花多少钱？

很多网站设计工具都提供免费方案。不过，你还是需要支付购买域名的费用（一般是$10-15/年）。如果你的预算紧张，你可以选取便宜的建站工具方案，费用大约是$5-15/月。

你也可以选择WordPress.org建站，WordPress软件免费，你需支付域名和WordPress主机的费用。如果你的预算有限，便宜的虚拟主机方案能让你一年只需支付$33，便可以拥有一个功能完全，且所有权属于你的网站。

（2）我应该找网页设计公司，还是自己做？

如何选择其实取决于三点：你的技术水平、预算，以及网站要求。

大多数人都可以在DIY平台设计一个网站，但如果你的网站很复杂，要求的功能很多，我们建议还是寻求网页设计公司的帮助比较好。

（3）在什么平台上设计网站最好？

我们首先推荐WordPress。它适合任何类型的网站设计：个人网站、公司形象网站、小企业网站、大企业网站、作品集网站等，甚至可以安装WooCommerce进行电子商务网站设计，并且，WordPress的主题库以及插件库提供非常多的免费主题和插件。

另外，Wix是另外一个优质DIY网站设计工具。它是个人网站、小公司和那些希望在线销售一些产品的人的理想选择。

与此同时，Shopify是大公司、想在线销售较多产品的成熟电子商务网站的绝佳建站平台，它拥有一系列的优质主题和功能。

（4）我是应该使用WordPress还是别的建站工具？

WordPress的自由度更高，可以更改源代码，且设计、建立出的网站归自己所有，不过，你需选择网络主机来储存网站资料。

有人可能认为需要扎实的编程知识才能通过WordPress设计、建置网站。

但，我们不是这样认为的。尽管你不懂技术知识，如今市面上有多款可视化编辑器（如Divi Builder, Elementor）协助你设计、建立网站，你仍然可以建立出自己满意的网站。

别的建站工具可能会更简单、更省事，但自主性有限，且价格更高。

-> 想知道WordPress和别的建站工具之间有哪些区别？分别适合哪类人？你可以查看WordPress.com vs WordPress.org，因为WordPress.com就属于“别的建站工具”。

（5）如何通过网站盈利？

像在线销售（产品和服务都可以）、联盟营销、销售广告位等都可以获得利润。