网站设计教学：如何规划网站架构图？

网站设计教学：如何规划网站架构图？

本文是网站设计教学系列的第一篇，主要讲解网站架构规划的重要性、基本组成以及不同类型网站的架构特点。文章内容详尽，包含了具体的页面元素、布局建议和实际案例分析，适合网站设计初学者阅读。

前言：为什么会有系列教学文？

作为一名设计师，身边有很多内容创作者朋友，每次看到他们丰富的知识储备，但往往在初期经营时，“网站设计”成为他们最大的短板。根据观察，这些创作者在刚开始建立网站时，会花费大量时间在调整版面，想要让画面变得美观，结果到最后网站最重要的内容反而没有写。

而根据他们的说法，如果没有先有好看的页面，他们就没有动力去撰写内容；相反，如果有了让自己满意的版面，那么他们充实内容的动机就会更高。这导致我想要以内容创作者为出发点，规划出这个系列的《网站设计教学》，分成八大单元，一步一步带领设计小白设计出自己的网站，包含以下主题：

为什么设计网站前，需要规划架构？

许多人认为设计只是我们看到的那些外在的视觉画面，但设计真正的核心在于“内在”，也就是外在的视觉都是根据内在的想法而呈现出来的。网站就像一篇文章一样，每个文章都会有每个文章的核心想法，而如果要通过内容把这个想法表达出来，通常就需要先去规划一篇文章的大纲。

同理，网站也是一样的，如果你的网站有一个核心想要呈现给别人的感受、想告诉别人的故事，那么你就需要先规划好“网站架构”，再通过设计去实现这些网站架构，把你想要说的话通过设计表现出来。

我也相信，大多数的创作者，应该都会有自己的想法想要传递给大众；即便没有，如果在设计前就有先规划好网站架构，也可以帮助自己厘清以下几件事：

1. 确认自己要带给别人什么感受：在进入你的网站时，就跟初次见面一样，在读者心理会留下对品牌的第一印象。通过规划网站架构，你也可以更清楚知道自己想要让网站带给别人的感觉是什么。

2. 知道自己要告诉别人什么故事：如果是以内容创作来说，通常很多人都会产出了一堆内容，但没有仔细去思考自己产出这些内容背后真正想要告诉大家的是什么事情。而通过规划网站架构，就可以更深入地让自己去思考这件事，觉察自己想要告诉别人什么样的故事。

3. 更清楚每个页面要放什么元素：如果有事先规划网站架构，就会知道每一页会有哪些区块，也能确认想放置的内容及元素，如此一来在设计上就不会东一块西一块，更有整体性。

当厘清这些事情后，整个网站设计起来，就会变得更有一致性，个人风格也会更加明显，因为不会再只是停留在外在的调整，而是“从内而外”的展现。

网站架构可以用什么软件发想？

在初步发想规划网站架构时，不会先使用网站架构软件，而是会先利用纸笔直接写下自己的方向。后来为了能让客户更明了，我会使用树状图工具，可以边思考边快速拖拉新增与修改，更能准确地与客户讨论，而我喜欢这套工具的另一个原因是，它的整体配色相当的好看，以下推荐几款我自己常使用的心智图/树状图制作软件：

以上这几款都可以在线编辑，非常方便与客户讨论，如果你想要更自由地把自己的想法标记，那我推荐可以使用FigJam这款画布工具。

组成一个网站的 3 大基本架构

网站的品牌感需要依靠整体规划，让读者在还没阅读文章之前，第一眼的视觉门面就能有印象。就像是到一个人的家里，从玄关到客厅，会感受到这家主人的风格品味。

首先，要先知道，一个网站会由 3 大基本的架构组成：

• 頁首 Header
• 頁尾 Footer
• 網站基本頁面

頁首 (Header) 基本信息有哪些？

頁首是网站每页最上方的那一列，主要功能是让用户直接点击进入他们想要的页面，或是也可以通过设计去引导他们进入你想要让他们看的页面。

• 品牌 LOGO：放上一张横向的品牌 LOGO 图，来增加品牌识别度。
• 選單：選單的空間有限，可以放上最想傳遞的服務或頁面，以及聯絡方式。
• 按鈕：通常用在最想凸顯的服務內容，像是：課程、預約諮詢等。但沒有強制放上，可依照需求新增按鈕。

頁尾是固定在网站每页的最下方，除了主要的选单可以放上以外，也能新增各种的相关信息，像是社群链接、版权声明、隐私权政策，也能在最下方告知营业时间，以及联络你的方式，以下分别细项说明：

1. 品牌 LOGO：
   虽然頁首已经有放上 LOGO，为什么頁尾还需要放一个呢？确实没有一定规定要放上，但我的做法会放上单色系的 LOGO，不是那么凸显，又可以展现品牌的整体性，不讓頁尾太过单调。

2. 相关链接：
   可以放上与选单一样的相关链接，也能新增其他页面的链接，让读者与客户浏览网站到下方后，更方便点击其他页面，是一个很好的用户体验。

3. 联络信息：
   可以详细地填写服务的联络信息，像是：地址、服务时间、联络邮箱、电话等信息。

4. 行动呼籲：
   常见的行动呼籲有以下几个：

• 社群链接：除了网站的经营，如果有社群的联络方式，也可以利用图示的方式，让人点击。
• 电子邮件：如果你想蒐集读者邮箱，也能在頁尾地方直接让人填写。

5. 隐私权政策
   隐私权政策是为了要保护客户隐私而设置，可以新增页面，并放置頁尾提供链接点击。

6. 版权声明：
   主要是以三个信息组成：

• Copyright ©：版權的英文写法 Copyright ©，也可以用一个 © 符号来简化。
• 年份：显示年份期间，例如：2022-2023，也可以显示发表年份。
• 公司名 / 作者：通常会写上公司名称，会让人更有信赖感，若是没有公司抬头，也可以写上作者的名字或网站名称。

版权声明没有制定的排版规则，主要的用意是想提醒，网站的内容都是受到版权保护。可以依照排版的空间，来选择适合的组合：

• Copyright © [year] [owner]. All rights reserved.
• Copyright © [year] [owner]
• 版權所有© [year] [owner]
• © [year] [owner]

以我自己的网站「温研创意」为例：

1. Copyright © 2023 温研创意. All rights reserved.
2. Copyright © 2023 温研创意
3. 版權所有© 2023 温研创意
4. © 2023 温研创意

网站会有哪些基本页面？

在一開始网站还没有内容时，一个网站的基本页面会有：首页、关于我们、联络我们、文章Blog。以下分别介绍，每一页的功能介绍：

• 首页 Home：在第一眼的视觉占比非常的大，也可以在这页介绍完整的服务与内容。
• 关于我 About：详细的个人的介绍，历届作品、经历，以及合作客户等。
• 联络我们 Contact：让对你产生兴趣的读者与客户，可以有一个页面联络你的方式。
• 文章页面 Blog：以部落格的形式，将所有的文章做分类的空间，也能在侧边栏做基本的品牌介绍。

网站基本页面所需的元素

以下的规划是针对初期刚开始经营，内容还没有很丰富的情况下，如何有一个完整的页面规划：

首页 (Home) 的元素有哪些？

• banner：这是一进网站的第一眼视觉，在第一眼直接告诉访客，主要经营的内容是什么，除了放上一张简单的图，可以针对自己的经营方向，再 Banner 内放上一些信息：
• 品牌标题：用一句话来涵盖整个品牌的主要故事。
• 服务主题：利用简单的关键词，或者一段 Slogan 来介绍主要服务。
• 服务按钮：首页的开头往往是最醒目的区块，可以藉由按钮引导读者到你的服务目的。
• 相关图片：依主题来放上适合的图，可以放上形象照、服务相关的插图、符合主题分为主的情境照等。
• 主题项目：可以用小图示加上短说明，让读者更清楚主要的网站内容主题有哪些。
• 个人介绍：简单撰写个人的介绍，让读者更认识你这个人，增加信赖感，让读者吸引对你的好奇心，来选你的关于我的页面，看更多你的故事内容。
• 热门文章：可以放上文章列表，吸引读者点击更多的文章页面。
• IG 链接：如果原先有经营社群 IG，也可以联动放上网站，增加真实互动感。
• 联络我们：最后底部放上联络信息或者联络表单，让读者可以找到你。

关于页面 (About) 的元素有哪些？

• 品牌介绍：这里可以让读者更了解品牌，将自己的历程、品牌故事更详细地介绍。
• 个人介绍：除了介绍自己的故事内容，也能将自己的经历依照时间轴的方式撰写。
• 历程介绍：搭配图片、年份、说明，让读者更带入你的时间轨迹。
• 联络我们：虽然说在首页已经有了联络的信息，为了不让读者需要联络你时，还要回上一页，这里也可以再放一个联络你的信息。

联络页面 (Contact) 的元素有哪些？

• 联络说明：在让读者填写表单时，可以告知回覆的频率或时间，以及该注意的事项说明。
• 联络表格：让读者填写姓名、邮件，还有想对你说的话。
• 联络按钮：如果不使用表格填写的方向，也能利用按钮引导其他联络方式。
• 电子邮件：以防尚未收到信件，可以写上自己的电子邮件账号。

文章页面 (Blog) 的元素有哪些？

• 文章列：左侧是每一次撰写文章的列表，可以总览全部的文章内容。
• 搜索按钮：方便快速搜索到某一篇文章，文章量多的时候，是一个很方便快速查询的工具。
• 个人介绍：一般来说读者会看见你的文章，有可能是通过搜索引擎，并未完全了解作者本身，可以藉由侧边栏的介绍，让陌生读者留下对你的印象。
• 文章分类：在一开始撰写文章时，建议可以将文章做好分类，可以让读者更方便找寻你的文章类别。

一个典型的网站架构图范例

在了解以上网站基础架构后，我最常被询问：“那我需要把每个元素都规划进我的网站架构图吗？”

以下这张算是一个典型的网站架构规划，先给不知道如何开始规划的人有一个参考方向，利用这些内容组合出合适的网站架构，也可以藉由这张树状图，让自己的品牌定位更加明确。

当然有些信息也不一定需要放上网站，像是 IG 链接、主题项目，可以在未来经营方向更加明确时再加入，也就刚好回答了这段开头的那个问题。

总而言之，前面分享的那些架构与元素，都只是一个参考，最重要的是你要能够知道自己网站想要放入哪些信息。

3 种网站设计架构范例解析

网站的架构很多变化，藉由不同的网站形式，发展出不同主题的架构，让读者更清楚网站架构可以有更多的组合，以下三个是我最常接触的网站类型：

• 销售型网站
• 内容型网站
• 作品集网站

销售型网站

销售型网站会是一页式的產品介绍，能再让读者看完后，产生想要购买的行为，所以销售页面最重要的，是行动呼籲的按钮，让读者知道购买的方法，以及商品介绍的清晰程度。

以大家最熟悉的“Netflix”的网站页面来解析：

• 頁首：品牌 LOGO、语言选择、登录按钮。
• 頁尾：相关链接、语言选择。
• 首页：标题介绍、内容介绍、电子邮件输入框、产品介绍、常见问题、电子邮件输入框。

网站规划记录日期：2023-05-25

内容型网站

内容型网站，顾名思义这类网站会有大量的内容，所以更会吃不同主题类型的分类，让读者可以更快找到他们要的内容。

以拥有丰富内容的“DR.DEAN 处方笺”来分析：

• 頁首：品牌 LOGO、选单按钮、产品 & 服务按钮。
• 頁尾：品牌 LOGO、电子邮件、相关链接、版权声明、著作权声明、免责声明、隐私权政策。
• 首页：Banner、个人介绍、主题项目、热门文章、加入社团、合作夥伴。
• 关于我：个人介绍、主题介绍、品牌介绍、历程介绍、订阅邮件、联络我们。
• 网络自学：内容介绍、资源介绍、所有文章、加入社团。
• 内容创作：内容介绍、资源介绍、产品介绍、所有文章、加入社团。
• 文章页面：文章列、搜索按钮、个人介绍、文章分类、加入社团、订阅邮件。
• 本站资源：资源介绍、产品介绍、资料总览。
• 产品 & 服务：链接到产品购买介绍页面。
• 联络我们：标题说明、联络表格填写。

网站规划记录日期：2023-05-25

作品集网站

作品集网站的目的是希望让人看见作品，让喜欢你风格的潜在客户，更清楚知道你经手过哪些作品，来判断是否要找你做服务。所以在设计上就会以作品为主，也可以将作品分类，让读者更清楚知道是哪一类的主题。

以“温研创意”来解析，主要有设计作品为，网站架构会是：

• 頁首：品牌 LOGO、选单按钮、设计咨询按钮。
• 頁尾：品牌 LOGO、社群链接、联络信息、相关链接、版权声明。
• 首页：Banner、服务内容、个人介绍、作品欣赏、热门文章、客户评价、联络我们。
• 服务页面：Banner、服务流程、常见问题、联络我们。
• 品牌作品：标题、作品分类、作品欣赏、联络我们。
• 文章页面：文章列、搜索按钮、个人介绍、设计咨询按钮、文章分类。

主要的规划方向会以，设计作品、设计服务、流程为主。

网站规划记录日期：2023-05-25

小小结

从以上几种类型的网站架构规划，就能看出其中的差异之处。

比如说我自己的“温研创意”网站，我会更希望我的服务项目、以及作品被看见，所以将设计作品、以及制作的服务流程，放上頁首的选单上，让想找我制作设计的人，可以更快速知道我的服务。

如果说撰写内容非常多元，就会像“DR.DEAN 处方笺”将自己的内容用主题区分，让读者在浏览网页时，更容易找到你的内容，也明白你想传达的理念。

目标不同，在规划网站的方向也会不一样，在一开始可以先确认制作网站的目的，以最核心的主题开始做归纳。

形象网站设计

小作业：试着规划自己的网站架构

看完这篇文章网站基本的架构规划，是否已经能够了解一个网站是如何组成的呢？

接下来，就要轮到你为你的网站进行架构规划，可以跟着下面的步骤完成此篇的小作业：

1. 开启为你制作的网站规划架构树状图。
2. 列出頁首要放的选单内容，并思考是否要放置按钮。
3. 根据这篇文章中的提示，列出頁尾需要填入的信息。
4. 列出你网站需要的页面，如果想不到就以最基本的页面为主。
5. 根据这篇文章中的提示，规划每个页面会出现的区块。

在填写时，可以先大胆地规划，不需要先考虑排版上的问题。下一篇文章会开始介绍，要如何运用线框图画出网站架构，并编辑网站上的内容。

网站线框图如何设计？
Wireframe 教学与范例解析

如果你还不能确定是否要找网页设计师合作，可以参考我这篇文章的分析：制作网站需要找设计师吗？专业设计师分析给你听