进行网站设计规划时，网站结构可以说是一个主要核心，所以规划网站结构也因此变得十分重要，本文将会针对网站结构设计的各部分进行说明，如流程、结构图、分类及分析等，希望读者阅读完后能更理解网站结构该如何规划以及一些网站建设规划上的技巧。

网站结构设计规划 4大步骤

1、同行参考

如果对网站建设规划毫无头绪，第一步就是先找到参考案例。可以先建立一张表格，列出所有你同业、竞业与相似行业的网站列表，让团队可以互相提供各自的经验，整合大家的认知。有了这些资料，对于自己想做什么样的网站，就可以有一个基础的认识与理解。从别人的案例学习是一个好的开始。

2、选择一个合适的网页规划工具

一个规划完整的网站结构图必须是逻辑清晰且容易理解的设计网站结构图时，首先要确定网站想要传达的理念或事项，然后通过工具来规划网站，出现出网站结构。

目前流行的工具有：Figma原型设计）Balsamiq线图绘制）Wirifi线图绘制）Axure可点击原型制作）UXPin线原型设计）

网页规划原型设计工具

3、网站结构设计图

开始设计网站版面之前，首先要决定网站包括什么页面，以及各个页面的功能和分类规划。为了清晰表达网站页面框架和浏览者体验网站的路线，一个清楚的网站结构设计图可以让你对页面、分类更加清晰。

线框稿主要用于展示页面上的功能和设计元素，并呈现排版。将每一个区块的内容、功能标示清楚，当确定摆放的布局后，就可以开始把文案与图片置入，测试一下网站的视觉效果是否如你所想。还要留意页面会否过于密集、版面会否太长、排版对于初次体验的用户是否合理等。

此外，现在网站都需要配合大众浏览的习惯，做到响应式设计，因此你也可以留意不同元素在电脑、平板电脑和手机上呈现的样式有什么差别，否需要在不同版本上在排版中做出取舍。

4、网页设计与制作

画出线框稿，要标示出 HeaderContentFooter等区块，以及各区块的出现方式如大图轮播、影片播放等，还要包括文案内容、标题（h1h2标示、与网站结构相呼应的页面名称命名等。之后决定想要的风格、色调，过程中务必考虑到用户体验（UX并要符合响应式网页的需求，再交给网页设计公司/人员去执行。

源文件（SourcFile指由源顺序和数据构成的文件。比方开发软件过程中，需要将编写好的代码（Code保管到一个文件中，这样代码才不会丢失，后期可以进行多次修改，也能被编译器搜索到最终是变成可执行文件。这种用来保存代码的文件就叫做源文件。

每种编程语言的源文件都有特定的后缀，以方便被编译器识别，被顺序员理解。

响应式网页设计（ResponsWebDesign,RWD又称为自适应网页设计、适应性网页、回应式网页设计，设计网站时采用CSS3以百分比的方式以及弹性的画面设计，不同分辨率下改变网页页面的布局排版，让不同的设备都可以正常浏览同一网站，提供最佳的视觉体验。

以前很多手机版网站设计都是与电脑上的网站区隔开来另外再制作，就会导致如果进行更新网页内容就必需要更新两次。现在使用响应式页面设计模式所制作出来的网站，相同的网址、相同的网站内容，使用不同型号的电脑、手机以及平版浏览时，网站的代码可让页面内容适应不同分辨率的设备，自动排版成适合浏览的大小，简单的说，让网页中的文字以及图片甚至是网站的特殊效果，自动适应用户正在浏览屏幕的大小。