网站架构轻松建立，带你画出网站地图，网页架构是什么呢?

网站架构轻松建立，带你画出网站地图

很多公司或是品牌都会希望架设一个自己的网站，不论是对于客户资源的掌握或是行销导流都可以更加的方便，而建立网站架构，就是架设网站中最主要的核心，当我们有了这个完整的地图，不管你的客群怎么浏览都不会迷路，为你的消费者带来更好的使用体验，轻松直达消费者的心，那我们要如何做才能够更有效的规划网站呢? 我们会在下面告诉你，用最简单的方法，开始你的网站发想，轻松勾勒出属于你的网站蓝图。

网页架构是什么呢?

在进行网站规划前，我们先来了解一下什么是网页架构呢? 网站架构其实就相当于一张关于网站的地图，不仅仅涵盖前端以及后端还有各个不同部分的讯息传达与连结，我们可以透过这张地图发想，将你想要的网站一步步地构建起来。当我们开始想要制做网页时，这个就是一个非常必要的动作，可以在你的脑海中带你实际地走过一遍流程，让你从使用者的角度去思考，怎么样的使用者体验才是最流畅的呢?怎么样才能让视觉动线更舒服?因此建立架构是网站规划的第一步，如果网站制作前在架构上能够有效的规划，可以免去后续管理上的困难或是很多没有想清楚又要多次修改的地方，也能带领你更清楚地了解你的网站，省时省力也提高网站上线的效率喔!

架站准备做得好，后面沟通不困扰

为什么我们时常会建议在内部先进行网站的架构规划呢? 因为这可以帮助你的团队「想清楚」，时常会遇到很多客户想要这个功能，可是想一想好像那个又比较好，而陷入抉择的困难，或是多出许多不必要的连结，如果在团队内部可以讨论出想要的风格功能、大致的方向，可以帮助你厘清网站的需求，也能够让你和设计师更有效的沟通，以下架站准备可以协助你将你的想像具像化，例如:了解我的网页流程是什么?画面上会想要呈现什么资讯呢?当我们运用图像和设计师沟通，设计师可以更容易理解我们的想法，制作出来的网站也就更能够贴合你的需求。

架站前需要思考的两大方向

网站的定位

首先我们要为网站做定位，不同类型的网站的功能需求、呈现的内容以及希望可以透过网站达到的目标也就有所不同，所以首先应该想想我们希望制作什么样的网页呢?像是目前最常见的形象网站、B2B网站或是电商网站等等，也可以参考同业的网站有什么样的功能，再思考一下我们的网站需要什么，像是电商网站就会需要购物车以及较多的产品说明页，还有后端的CMS后台管理；形象网站就会带有较强烈的视觉风格，面对的目标客群不同也会有不一样的设计。

品牌的风格

一个好的网站在风格上会与你的品牌相契合，我们可以结合品牌或是公司的调性，在找出希望制作的设计风格同时，可以使你的网站更加具有独特性，消费者在浏览网页时，也较容易融入我们营造的氛围感，更能够达到我们的网页目的。我们可以透过以下几个网站去查找范例或是作品提供给设计师，帮助设计师更了解你的想像以及需求。

Pinterest

Pinterest是一个图像分享的网站，网站中包含各种类别的图片，我们可以轻易地在这里搜寻到各种不同的样式与范例，快速地帮你找到灵感以及时尚的好点子。

Awwward

Awwward被誉为「网页设计的奥斯卡」，是各种优秀设计网页的汇集地，我们可以看到全球网页设计的得奖作品，追踪到许多优秀的设计趋势，网站上的设计都会有专业的评委进行打分，因此很适合参考以及整合各种不同类型网站的优点。

Responsive Web Design JP

Responsive Web Design JP 是一个收集了许多不同版型「响应式网页」的日本网站，可以让你看到网页在不同的萤幕宽度下是如何呈现，你可以根据类别、颜色或是功能性，去参考较适合你的网页，也可以想一想我们的网页需要制作「RWD 响应式网页」或是「AWD自适应式网页」呢?

简单的小工具，开始构思你的专属网页

当我们的定位与风格经过讨论与总结，就可以开始进行发想，将每一个资料尝试归纳入你的网页内，不论是我们想要置入的架构大纲、想要展示的BANNER或是条列清晰的面包屑导览，都可以利用树状图或是线框图，协助你更清晰的知道网站的流程，制作网站架构更容易。

运用树状图，清晰列出导航列

树状图也可以称为心智图，不管是设计或是网页，心智图都是一个很棒的工具。它可以帮助我们简单地画出Sitemap，如果我们的网站地图在制作前有规划好，将可以大大提升SEO的排名，这个部分可以让你在后续SEO优化中更加地轻松。

我们可以将主分类、次分类，还有其他的分支等等，运用树状图将它画出来，你就可以清晰地知道哪一个连结会前往哪一个页面，或是哪一个地方需要增加页签等等。如果你还没有头绪，运用树状图开始发想，可以最简单的帮助你清晰地列出导航列的项目，也能规划出让使用者轻松找到资讯的网页。我们要绘制树状图时，可以运用一些常用的小工具像是PPT、WORD或是EXCEL表格，将简单的组织图架构出来，Xmind也是一个绘制心智图的好工具，除了可以更简单的填入架构和色彩美观，还有更多的模板可以提供你做选择。

运用线框图，快速画出简易分页

线框图(Wireframe)就是一个沟通网页架构、内容，进行布局的一个工具，大部分的线框图会呈现灰阶色彩，简易描写出框架与定位，可以后续再和设计师详尽地讨论设计重点或是色系规划等等。线框图就像是一个一个的抽屉，可以帮助你将资料分门别类的收纳在不同位置。我们可以参考绘制好的树状图，将架构融入线框图中，像是一般的首页会有的Header与导览列、内容与BANNER主视觉，或是商品区块、行动呼吁CTA，还有Footer等等，当我们将大致的区块规划好，后面就能轻松地将内容、图片与文案置入这些方块中，也可以了解哪里需要设计点击的按钮，或是哪里希望可以有引导式浏览等等。

简易的画出线框图，能够让你和设计师沟通更加地容易。我们一样可以运用PPT和WORD来绘制，另外这里介绍一些好用的简易规划工具就是FIGMA与Frame Box。FIGMA是一个常用的线上设计工具，可以帮助你详尽地规划线框图， FIGMA提供预设的框架大小，可以让你的物件定位较精准，不容易出现不符合架构而难以写出的网页，也可以让设计师更容易理解你的框线表示以及区块分隔。而Frame Box的介面较简单，但是该有的功能都具备，像是标题、区域方块、文字等等，是一个较容易上手的线上绘图软体，可以轻松绘制流程图和线框图，也可以建立独立专案，非常适合基础使用者。

当我们做好网站架构规划，接下来我们要做的就是整理资讯，当我们知道网站的性质与风格，就可以开始考虑内容与图片需要放什么，和我们需要提供什么资料给设计师，像是LOGO或是图片设计档案，可以运用大纲的页签，将图片与文案，还有一些相关资料分别放好整理成资料夹，可以帮助设计师更容易了解你的意图，减少沟通上的问题，如果有图片以及文案的设计需求也可以找我们沟通讨论喔。