Skip to main content

网页设计:网站线框 - 定义和示例

開發流程 #1 Wireframe | 規劃 | 如何做線框圖 | Wireframe 你該注意什麼 (六月 2025)

開發流程 #1 Wireframe | 規劃 | 如何做線框圖 | Wireframe 你該注意什麼 (六月 2025)
Anonim

Web线框是一个简单的可视化指南,用于向您显示网页的外观。它建议页面的结构,而不使用任何图形或文本。网站线框将显示整个网站结构 - 包括哪些页面链接到哪里。

Web线框是开始设计工作的好方法。虽然可以创建具有大量细节的复杂线框,但您的计划可以从餐巾纸和笔开始。制作好线框的关键是忽略所有视觉元素。使用框和线来表示图片和文本。

要在网页线框中包含的内容:

  • 主要图形元素的框
  • 标题和副标题的位置
  • 一个简单的布局结构
  • 号召行动
  • 文本块

如何构建简单的Web线框

使用您方便的任何纸张创建网页线框。我是这样做的:

  1. 绘制一个大矩形 - 这可以表示整个页面或仅表示可见部分。我通常从可见部分开始,然后将其展开以包含将在折叠下方的元素。
  2. 草绘布局 - 是2列,3列吗?
  3. 添加标题图形框 - 如果您希望列在列上方的单个标题,请在列上绘制,或者只是将其添加到您想要的位置。
  4. 写下你需要H1标题的“标题”。
  5. 写下“Sub-Head”,你想要H2和更低的标题。如果你使它们成比例有帮助 - h2小于h1,h3小于h2等。
  6. 添加其他图像的框
  7. 添加导航。如果您正在计划标签,只需绘制框,并在顶部写上“导航”。或者将项目符号列表放在要导航的列中。 不要写内容。 只需编写“导航”或使用一行代表文字。
  8. 向页面添加其他元素 - 使用文本标识它们的内容,但不要使用实际的内容文本。例如,如果您想要右下方的号召性用语按钮,请在其中放置一个框,并将其标记为“号召性用语”。不要写“立即购买!”在那个盒子里。

    一旦你编写了简单的线框,并且你不应该花费超过15分钟的时间来绘制一个,然后将它展示给其他人。询问他们是否遗漏了什么以及其他反馈。根据他们的说法,你可以写另一个线框或保留你的线框。

    为什么纸线框最适合初稿

    虽然可以使用像Visio这样的程序创建线框,但是对于您最初的头脑风暴会议,您应该坚持使用纸张。纸张似乎不是永久性的,许多人会认为你在5分钟内把它扔在一起,所以毫不犹豫地给你很好的反馈。但是当你使用一个程序来制作具有完美正方形和颜色的花哨线框时,你就有可能陷入程序本身并花费数小时来完善一些永远不会生效的东西。

    纸线框很容易做到。如果你不喜欢它,你只需将纸张弄皱,扔回去再拿一张新纸。