《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.5 绘制网站线框图
本节书摘来自异步社区《21天学通HTML+CSS+JavaScript Web开发(第7版)》一书中的第2章,第2.5节,作者:【美】Laura Lemay(劳拉·莱梅) , Rafe Colburn(雷夫·科尔本) , Jennifer Kyrnin(珍妮弗·凯瑞恩)著,更多章节内容可以访问云栖社区“异步社区”公众号查看
2.5 绘制网站线框图
网站规划的下一步是确定如何在网页之间分配内容,并制定在网页之间导航的方案。如果有很多需要以复杂的方式链接起来的内容,请坐下来制定具体的内容分配计划,这对您以后开发和链接网页大有裨益。
2.5.1 线框图是什么,为何需要绘制线框图
线框图是网站完成后的大致轮廓,指出了内容在网页之间的分配情况以及内容是如何彼此关联起来的。有了线框图后,开发每个网页时就无须牢记它在整个网站所处的准确位置,也无须牢记它与其他网页之间的复杂关系。
在网站特别大的情况下,如果有线框图,就可将网站不同部分的开发工作分配给不同的人去完成。清晰的线框图让您能够最大限度地避免重复工作,减少每个人都必须牢记的上下文信息。
如果网站较小,或者网站是使用提供了具体结构的内容管理应用程序创建的,也许不需要线框图。然而,对于复杂的大型网站,线框图可节省大量的时间,避免众多的弯路。如果您无法牢记内容的各个部分以及它们之间的关系,就应考虑绘制线框图。
线框图什么样呢?一般而言,它们是成组的文档或图像,每组表示网站中一种特定类型的网页。文档包含网页的粗略示意图,指出了网页各个部分处于什么位置、占据多大空间以及将发挥的作用。例如,报纸网站的线框图包括主页示意图、各个版面的主页以及文章页面的线框图。线框图还可能包括网站的注册表单以及购买广告版面的页面。图2.8是一个使用工具Balsamiq创建的线框图。
线框图并非必须非常漂亮,也并非一定要使用线框图绘制软件来创建。绘制线框图的关键在于,将网页以适合您的方式组织起来。如果您喜欢索引卡和细绳,使用这些工具就是了;如果在纸上或计算机中绘制简单的草图更佳,这样做就是了。
2.5.2 线框图绘制小贴士
绘制线框图时,需要考虑如下几点。
- 如何在网页之间分配主题?
确定一个网页包含多少信息可能比较棘手。有些网站将所有内容都放在一个设计巧妙的冗长网页中,有些网站将内容分配到大量不同的网页中,还有些网站使用新技术按需动态地加载网页的各个部分,用户根本不需要从一个网页切换到另一个网页。为避免过于花哨,最佳的做法是这样组织内容,即让每个页面都包含一个主题的信息。如果页面有好几屏长,也许该将相应的主题按逻辑分成多个子主题。
- 在网页之间导航的主要方式是什么?
为了让访客能够在页面之间导航,您需要哪些链接。这些是文档中的主链接,让访客能够实现您确定的目标。向前、向后、向上、向下的链接以及到主页的链接都属于主要的导航方式。
- 要提供其他哪些导航方式?
除简单的导航链接外,有些网站还包含与主要Web内容平行的额外信息,如术语表、按字母顺序排列的概念索引、版权信息或职员页面。制定计划时一定要考虑这些额外的信息,想想要如何将它们链接到主要内容。
- 要在主页上放置哪些内容?
鉴于主页是访问网站其他信息的入口,需要考虑要将哪些信息放在主页上。一篇博客?即将推出的产品摘要?一系列到其他主题的链接?无论您决定将哪些内容放在主页上,都必须确保它们有足够的吸引力,让目标受众留下来。
- 如何让访问内部网页的用户知道他身处何方?
除非您的网站要求访客注册才能访问,否则访客很可能是通过搜索引擎进入网页的。务必要让访客能够知道他访问的是哪个网站,并指出该网站还有更多他可能感兴趣的信息。通常,您可通过设计和导航实现这个目标。
- 您的目标是什么?
设计网站的框架时,别忘了您要达成的目标,并避免您的目标因额外的信息或内容而变得模糊不清。