CHAPTER 02 线框图设计指南

2.1 线框图的重要性

2.1.1 线框图概念理解

• 概念

线框图，英文为Wireframe或Wireframing。本书所说的线框图是指在网站设计（不仅仅用于网页界面设计）中对网站结构和层级关系做出表现的一种方式。它一般用来布置内容和功能，满足用户的页面浏览需求。

线框图设计一般在视觉设计前期进行，是在添加完整的视觉设计和网站具体内容之前所做的工作。实际工作中，设计会受诸多因素影响，如产品经理、客户、素材、灵感、团队、项目需求等。项目需求的变化、人为主观因素的变化也将导致稿件的多次修改。那么线框图是否能作为一个节省时间的前期沟通工具呢？事实上线框图一般不作为与客户沟通的工具，因为它在细节上可以和最终的设计媲美，需要花大量的时间和精力去制作，与客户前期沟通时建议使用简洁的交互原型图。在本章后面的内容中，大家会学到如何做一个交互原型图。这里推荐大家直接使用Photoshop设计线框图，不要将它当作是“草稿”，这一步是为了减少重复设计，方便直接将线框图应用到视觉设计阶段。图2-1所示为最终的线框图效果。

• 掌握线框图设计的好处

设计线框图是一个可选工作流程，设计师可以根据具体的项目进行取舍。设计过程中不要求大家一定要使用线框图来进行视觉设计，但线框图的制作具有以下几个方面的价值。

· 养成良好的设计习惯，好的设计习惯能给你未来的工作创造更多的可能。

· 线框图也反映了现代化的工作流程，能够让你学会更多的Photoshop技巧。

· 作为视觉设计的一个起点，能提高后期视觉设计的便利性，提高设计质量。

· 能够灵活更换不同的图片、文字，节省试错的时间。

· 可以快速调整整体布局，不会因为复杂的设计元素造成调整过程中的浪费。

· PSD文件可以直接用于后期的视觉设计阶段。

2.1.2 与原型图的关系

既然提到线框，就再说一说原型（Prototype）。简单通俗地讲，原型可以理解为是一个功能全面的产品的“工作和演示”模型。原型在不同领域（如心理学、文艺创作、机械设计制造）的概念也不是一致的，本书只针对Web设计的原型做一个简单的解读。在实际工作中，需要将网页界面变成可以使用的代码，通过浏览器和电子设备去访问和使用。单纯的界面其实是没有可用性的，所以我们必须考虑配合前端和后端开发人员的工作，还要考虑配合产品经理等工作。市面上已经有很多成熟的原型图制作工具。

一个完整的网站，需要经过设计，经过前端耐心的打磨。虽然目前很多制作网页原型的工具很强大，但由于越来越多的网页的定制化需求增多，原型工具直接生成的项目不能给开发人员提供可行性和可扩展性极强的代码，这就会造成返工。所以笔者并不建议使用工具直接生成Web项目原型，虽然它可以点击，有交互动画，但是最终要提高项目质量，前端工程师还得重新去选择框架、重新编码。在一些云端工作非常成熟的企业，它们会有自己的协作工具，有匹配的原型生成工具，这种情况使用原型工具是非常具有优势的。

大家注意，这里要区分“原型”“原型图”和“交互原型图”。原型的知识面比较广，想深入了解可以找相关的专业图书和知识内容进行学习。这里讲述的原型图是专门针对Web设计前期的一个对网站总体的模型构想图，书中也称其为“交互原型图”。针对Web设计，设计时需要有一个人机交互的思想，如何将设计运用到实际操作中，如何面对用户，这是设计师需要考虑的问题。但是单纯地使用图片很难直接表达自己的想法，使用一些可以生成代码的原型工具，会由于操作不方便及一些局限性，阻碍设计师的设计思想。而“交互原型图”就是使用图片序列，来表述对网站的交互设计思想的一套图片。本书的“原型图”和“交互原型图”实际上是一个概念。其他领域的原型图和原型不一定和网页设计领域一致，大家应该具体问题具体分析，不要一概而论。在这里讲解原型的一些零散的概念，是为了让大家更好地理解原型和线框的区别和联系，有一个更灵活的意识去做界面。

在实际运用中，经常会有将原型图与线框图放在一起表述的情况，大家只要合理地理解它们的关系就可以，它们之间并无明显的概念对错。在Web设计过程中，为了提高效率和质量，减少返工率，也经常会将线框图和原型图搭配在一起使用。

其实线框图和原型图在工作流程和需求上有很多类似之处，主要区别在于功能。下表详细列出了它们的区别。

表　线框图和原型图的区别

这里介绍一种“交互原型图”，它常用来与客户沟通，用作设计效果的展示及线框图设计的工作模型，它能够反映设计者的设计思想及页面交互行为。它不能够直接用作线框图设计，而是作为一个参考和沟通工具来使用。本书介绍的交互原型图也属于设计草图的范畴，但是由于纸张的表现力不够，而且我们需要构建一个演示模型，所以笔者比较推荐使用这种方法。如果大家觉得这种称呼不习惯，可以叫它草图，也可以叫它原型图。图2-2为商业项目的初期沟通用的交互原型图，它有以下几个特征。

· 直接使用PSD，便于修改。

· 分屏，能够更好地表现网站的动态效果。

· 使用简单的形状和色块替换可变内容，节省时间，利于思路的扩展。

· 能够更好地将前期的设计思维传达给客户，提高过稿率，减少后期设计阶段返工的可能性。

· 直观大方，可以在任何地方增加注释。

· 使用现成的PSD模板，节省基本原型的制作时间。

2.1.3 与效果图的关系

这里所说的效果图，就是在线框图基础上进行的比较具体、完整的视觉设计。它反映了一个网站的所有细节：品牌标识、文本样式、导航菜单、Head、Footer、色彩关系、字体、布局等，甚至是比较抽象的用户体验、页面操作流程、交互效果、行业特征、目标人群特征等。

图2-3所示的效果图与图2-1相似，是线框图的具体视觉表现。在下一章中，我们会通过设计规范，来具体讲解实际操作和技巧。

2.1.4 与设计软件的关系

线框图的设计工具软件多样，可以是Photoshop，也可以是Illustrator、OmniGraffle、Indesign、Fireworks、ProtoShare、Word，还可以是其他的非主流软件。专业的设计师推荐使用Photoshop，当然并不是只能用Photoshop，你甚至可以搭配其他软件，协作设计。而使用Photoshop有以下一些原因。

· 可以自定义字符样式、段落样式、图层样式等，并重复使用它们。

· 很容易修改、移动或缩放任意图形对象。

· 容易在最少的细节设计阶段调整布局。

· Photoshop在图形处理方面具有强大的性能，可以对色彩、图形效果做多种模拟。

· 可以直接用作视觉设计的PSD正式稿，而不是单纯作为参考。

如图2-4和图2-5所示，图中将设计中常用的字符或段落样式都储存为模板，以供重复使用，大大提高了设计效率。真正做设计时，网站线框图设计是一个必须的过程，大家不妨尝试用这种方式去设计界面。从Photoshop菜单栏中执行【窗口→字符样式/段落样式】命令，打开对应的面板，即可编辑自定义样式，然后直接选中文本图层即可快速应用效果。在创建线框图的实际操作中我们会详细讲解此功能。