如果您想设计和创建网站,那么花一些时间进行网站规划会发现它容易得多。在计划阶段,开发人员和客户可以一起工作,直到找到符合其需求的格式和布局。规划过程会影响网站的样式选择,并且可以说是网站设计的最重要方面,尤其是对于企业而言。那么,究竟网站规划包括哪些内容?网站规划的流程是什么样的?现在就进入我们的探索之旅吧!
建立基础结构

1.确定网站的功能。如果您自己创建站点,则可能已经知道答案。如果要为另一个人,公司或组织创建站点,则需要找出他们对站点及其功能的期望。您在此处决定的所有内容都会对最终网站产生影响。
- 需要店面吗?您是否需要用户评论?用户是否需要创建帐户?它是面向文章的吗?以图像为导向?所有这些问题以及更多问题将有助于为站点的设计和结构提供信息。
- 这可能是一个漫长的过程,尤其是对于有很多人参与该项目的大型公司而言。




制作HTML线框

1.制作线框以帮助巩固层次结构。HTML线框是未来网站的框架,仅使用最基本的标签和块表示内容。它回答了以下问题:“屏幕上出现了什么?位置在哪里?” 线框中的格式和样式完全被忽略。
- 线框使您可以在确认样式选择之前查看内容结构和流程。
- HTML线框并非像PDF或图像一样是静态的,它使您可以快速移动内容块以创建新的结构。
- 线框是交互式的,这对开发人员和客户都有利。由于线框是用简单的HTML编写的,因此您仍然可以在其中浏览并了解页面之间的移动方式。这是无法通过PDF概念表达的。
2.尝试灰盒方法。在灰色框中屏蔽页面内容,最重要的内容在顶部。这些块排列在单列中,最重要的内容在页面顶部。例如,如果该页面是公司的“关于”页面,则公司详细信息可能会放在顶部,然后是人员列表,然后是联系信息,等等。
- 这不包括页眉和页脚。灰色框只是页面上内容的可视表示。
3.尝试接线框架程序。有几个程序可以帮助您完成线框图的制作过程。所需的编码知识量因程序而异。一些较受欢迎的程序包括:
- 模式实验室。该站点专门研究“原子设计”,其中的每个内容都被认为是构成较大页面的“分子”。
- 跳跃图。这是一个网站计划和线框图服务。它需要付费订阅,但允许您快速构建线框,而不必担心编码。
- Wirefy。Wirefy是另一个“原子设计”系统。这些工具可供开发人员免费使用。
4.使用简单的HTML标记。好的线框可以在以后轻松地转换为实际位置。不用担心线框过程中的样式。相反,请使用易于理解的标记,并且不费吹灰之力即可进行交换。
- 线框越少越好。目标是简单地构建结构。以后可以使用CSS和高级标记来调整视觉效果。
创建内容

1.在开始构建网站之前,请准备好一些内容。如果您拥有实际的内容而不是占位符,那么查看网站样式将更加容易。您不需要太多的内容,但是如果您有一些副本和原始图像,则在样机中看起来会更好。
- 您不一定需要文章的正文,但至少应该有实际的标题。
2.请记住,好的内容不仅仅是文字。互联网不仅仅是简单的文本网站。为了在您的利基市场中脱颖而出,您需要各种不同的内容类型来吸引和留住访客。请记住一些可能的内容:
- 图片
- 音讯
- 视频
- 流媒体(Twitter)
- Facebk整合
- RSS
- 内容提要
3.委托专业摄影师。如果您在自己的网站上添加照片,那么使用专业摄影会给您带来更好的初始印象。一张好的照片超过二十张坏照片。
- 寻找比长期专业人士更便宜的解决方案的最新艺术摄影专业毕业生。
4.写高质量的文章。页面上的书面内容将决定您的网络流量。尽管在设计过程的这一点上您不必太担心内容的创建,但是开始考虑它并没有什么害处,因为一旦网站上线,您将定期需要内容。
- 除了文章内容之外,还有一些在网站建设过程中最有可能写的项目。这可能包括联系信息,公司名称或将在网站上的多个地方使用的其他任何信息。
将概念转化为现实

1.设置全局元素的样式。这些是您网站的每个页面上都可以看到的内容,例如页眉,页脚和导航菜单。创建一个非常基本的样式,以便您可以看到所有页面在适当位置的外观。当您进入布局过程时,这将非常有用。
- 不必太担心细节,但是请尽量使其与标题最终的外观接近。
2.创建一个基本布局。开始将线框的时钟移出单列并移至页面上的常规位置。例如,您可以将导航块移至页面的左侧,将标题列表移至右侧。
- 在继续之前,请继续尝试几页的布局。让其他人测试他们是否感到有机。
3.创建一个样机。使用Photoshop之类的程序来创建网站几页的模型。使用已经确定的布局作为指南。您可以在图像编辑程序中更快地工作,并获得所需的一切。实际进行编码时,这将使您可以将这些图像用作参考。
- 在模型中包括实际内容,以确保所有内容看起来都很好。
5.创建样式指南。这对于保持凝聚力风格至关重要,尤其是对于较大的站点。如果网站是针对已经拥有视觉品牌的企业的,则应将其纳入网站设计中。样式指南中可能要考虑的事项:
- 导航
- 标题(<h1>,<h2>等)
- 段落
- 斜体字
- 粗体
- 链接(活动,非活动,悬停)
- 图片使用
- 图示
- 纽扣
- 清单