线框图

线框图和设计稿有什么区别？

线框图是决定“什么内容放在哪里”的阶段，设计稿则是决定“看起来是什么样”的阶段。线框图里只有灰色方框和文字占位，设计稿里才会加入颜色 · 照片 · 字体。

之所以分成两个阶段，是因为修改的成本不一样。调整方框的顺序只要几分钟，但设计稿出来后再改顺序，照片尺寸和留白都得重新调整。

看线框图时，您觉得没有颜色、有点空荡荡，这很正常。这个阶段只看方框的顺序和大小，把氛围风格的讨论留到设计稿阶段，意见就能整理得清楚得多。

也有制作公司不单独设线框图阶段。这时第一版设计稿也承担了线框图的作用，所以收到第一版设计稿时，最好先确认顺序，再看颜色。

线框图里包含哪些内容？

线框图里包含页面列表、每个页面的区块顺序、按钮位置，以及页面之间的跳转路径。不需要会画画，在方框里写上“主图”“价目表”这样的名称就足够了。

预约或下单这类跨多个页面的流程，最好在页面之间画上箭头。这种把页面和流程画在一起的图，也叫“线框流程图（Wireflow）”。

文字占位最好大致按实际文案的长度来留。如果一行的位置要放五行的介绍，到了设计稿阶段排版又会被打乱。

即使是只需滚动的一页式落地页，线框图也很有用。因为哪怕只有一页，从上到下的顺序就是顾客浏览的路径。

• 页面列表：首页 · 介绍 · 菜单 · 交通指南等，共有哪些页面、几个页面
• 区块顺序：一个页面里从上到下依次出现什么
• 行动按钮：电话 · 预约 · 咨询按钮放在哪里、出现几次
• 跳转路径：点击按钮后会进入哪个页面
• 手机排版：电脑上横向并排的栏目，在手机上按什么顺序堆叠

线框图怎么自己动手画？

一张纸加一支笔，30分钟内就能画出草稿。顺序先定好，和制作方的第一次咨询就能短很多。

图不用画得很工整。制作方看的不是画功，而是“什么先出现”和“什么必须有”。习惯用电脑的话，在演示文稿软件里摆几个方框也可以，把纸上画的拍张照片也完全够用。

1. 01写下顾客通过电话或消息最常问的5个问题。
2. 02列出能容纳这些答案的页面清单。小店铺很多时候一个页面就够了。
3. 03画一个手机屏幕大小的竖长方框，把问题的答案按重要程度从上往下用方框填满。
4. 04确定顾客最后要做的行动（预约 · 电话 · 导航），画出按钮方框。
5. 05截图其他您喜欢的店铺网站，贴上并注明“这部分的顺序很好”。
6. 06把画好的图拍照发给制作方，一起确认有没有遗漏的信息。

不同行业的首屏顺序有什么不同？

首屏顺序与其说取决于行业，不如说取决于“顾客进来后最先想知道什么”。同样是美发店，预约顾客多的店和路过顺便进店的顾客多的店，顺序就不一样。

下面的例子只是起点。实际可以根据店里最常被问到的问题来调整。

如果难以决定顺序，可以把打到店里的电话记录一周。如果问“营业到几点？”的最多，就把营业时间放到靠近首屏的位置；如果问“能停车吗？”的多，就把停车指南往上提。

• 美发店：代表发型照片 → 设计师介绍 → 各项目价格 → 预约按钮 → 位置 · 停车
• 手作工坊：代表作品照片 → 课程类型和日程 → 学费 → 报名按钮 → 学员评价
• 餐厅：招牌菜照片 → 营业时间 · 休息日 → 菜单 → 团体预约咨询 → 地图
• 普拉提 · 瑜伽：课堂氛围照片 → 课程类型 → 课表 → 体验课报名 → 教练介绍

手机端线框图需要单独看吗？

需要，手机端的顺序最好单独确认。电脑上左右并排的栏目在手机上会上下堆叠，哪一栏先出现，会让顾客看到的顺序完全不同。

Google表示，建立搜索收录时主要以移动版页面为准。所以从一开始就同步设计手机端，确保重要内容不会缺失或被隐藏，会更稳妥。

看手机端线框图时，要看预约 · 电话按钮是否放在拇指方便点按的位置，以及是不是要滚动很久才能看到价格。

看手机端线框图时，也请确认不用滚动就能看到的首屏范围。这个范围里要同时有店铺名称和店铺是做什么的，顾客才不会马上离开。

线框图阶段常见的错误有哪些？

最常见的错误是草草跳过线框图，到了设计稿阶段再改顺序。这样修改次数和工期都会一起增加。

另一个错误是把想放的内容全都堆到首屏。首屏是顾客判断“这里是不是我要找的地方”的位置，信息精简到3~4项，反而更容易读。

反过来，把页面拆得太细也是常见错误。小店铺的信息如果分散在多个页面，顾客在菜单之间来回切换时很容易离开，所以很多时候不如集中到一个页面，并在顶部放上快捷跳转按钮。

线框图阶段应该问制作公司哪些问题？

在签约前或第一次见面时问清下面四点，修改次数和工期就会很明确。

• 是否单独设有线框图阶段，还是直接进入设计稿
• 线框图阶段的修改是否计入总修改次数
• 是否同时展示手机端排版
• 线框图确定后再改顺序，会如何处理