页面线框图教程(之一):从本质到表象

Home » 原型/交互设计 » 页面线框图教程(之一):从本质到表象

页面线框图(Wire frame)是网站设计方案中的重要组成部分,无论是I-BoardPage-LayoutUI-Draft这些不同的称呼,它们的本质都是一样的,网站策划师、网络产品经理的最后交付文档,通常的呈现设计是最直观有效的。单纯从设计的角度,线框图也可以看作一个视觉呈现过程,虽然如此,也不能把线框图的设计当作简单的视觉问题。如何看待线框图,如何着手设计线框图,如何把握线框图的详细程度,如何让其他合作者看懂线框图,就是本系列文章要解决的问题。

线框图的本质是信息架构的表象。根据需要,页面线框图可能是一个独立页面一整套页面序列:当针对中小型项目时,可能只需要首页以及关键页面的设计;针对复杂项目和大规模的团队协作,则需要一系列相互关联的线框图,并且包含交互设计部分。

在《网页线框图教程》的第一篇文章中,主要帮助读者了解线框图之前的必要步骤:

  • 确定页面逻辑架构
  • 低保真还是高保真
  • 规范图例与交付物
  • 基本框架模板

确定页面逻辑架构

在最近流行的一篇国外译文《画好线框图的20个步骤》中有一句话“线框图是计划中的第一步也是最重要的一步”,这是大错特错的。

线框图肯定不是计划中的第一步,在没有确定页面中“到底有什么”之前,根本无从下手去设计;确定线框图的蓝图不是靠设计者拍脑门,而是基于对内容分析之后的信息架构设计,请各位读者参考《从概念设计到信息架构》一文。

线框图并非计划中的必需步骤,更谈不上什么重要步骤。当与优秀的界面设计师、视觉设计师配合一些中小项目的时候,根本不需要什么线框图,而作为网站策划师和产品经理只需要提供页面逻辑框架就可以了。

所谓页面逻辑框架,是在整个网站信息架构确立的基础上,具体描述某个页面:都包含什么元素这些元素的权重页面的大概形式

页面逻辑框架可以用逻辑表逻辑图两种形式交付,可以单独采用一种形式,也可以同时提交两者。

例:Page[List02][Article_List][T1]的页面逻辑表
元素 类型 包含 权重

Logo

图片

 

模板T1

导航

链接组合

 

模板T1

面包屑

链接组合

 

模板T1

列表标题

文字

 

重要

文章列表

序列

文章名称、作者、发布时间

明显

页码及翻页

链接组合

上一页 下一页 当前页

明显

搜索

表单

 

模板T1

广告

图片

 

模板T1

例:Page[List02][Article_List][T1]的页面逻辑图
例:Page[List02][Article_List][T1]的页面逻辑图

确定各个页面的逻辑结构是进行页面线框图的设计前提,也是界面设计、视觉设计呈现的基础;非常推荐在着手设计线框图之前建立一个《项目的页面列表》,记录整个项目需要多少张线框图的支持,每张线框图的标号和使用模板的情况,如果时间充裕,甚至可以给每张线框图一个简洁的描述

《项目的页面列表》
页面名称 文件名字 代号 模板 简介

模板01

Template_01

T1

这是一个通用的左右两栏模板

首页

Index

Page01

T2

首页使用T2模板,纵列三栏布局

文章列表

Article_list

List02

T1

某栏目的文章全集,使用T1模板

这个《项目的页面列表》对衡量整个设计的工作量把控进度和工作重点非常有帮助。

低保真还是高保真

线框图的细节要逼真到何种程度,要根据执行团队的实际情况来决定。一般来说,线框图的细节越逼真,执行越流畅,但是给界面设计和视觉设计的发挥空间越小;相反,线框图越是粗略,对团队配合的要求越高,界面设计和视觉设计发挥的空间越大。

低保真原型(线框图)通常包括:页面的基本布局元素的大概位置交互的基本形式表单项

在低保真原型的基础上,高保真原型(线框图)通常包括;精确到像素的页面布局,辅助设计元素的数量和位置,图片格式尺寸,屏幕划分,超级链接的标示,带时间轴的FLASH关键帧,每个交互步骤的界面变化,表单项说明,具体文案。

对于三两个人配合的微型项目(比如中小企业网站)使用低保真原型配合口头沟通就可以解决实际的问题;对于复杂一些的项目,更推荐以《低保真和高保真模型混搭》的模式开展工作。

无论线框图的细节要逼真到何种程度,一定要在线框图开始设计之前明确,并且在《项目的页面列表》中标注每一个页面的逼真程度;明确交付物的细化程度,对保障工作进度和团队配合是非常重要的。

规范图例与交付物

一个团队的效率来自每一位成员的专业技能和敬业精神,而每一个人力量的集合需要通过工作流程和规范体现。 在你的工作中是否存在这样的情况:交付的线框图与最后的执行结果出入悬殊,根本不是你的设计初衷,造成不对等原因是 “执行部门看不懂你的设计”。此时,就需要流程和规范出场摆平问题了。

工作流程是对项目执行上下级关系的一种描述,即上级交付给下级何种结果时,下级可以开始自己的工作;当交付结果不符合要求时,下级变为上级,要求前一环节进行返工。

规范并不是某一个部门强制规定的(虽然的确可能存在这样的情况),而是工作流程的上下级默认的一种约定;非常建议把工作流程中上下级的约定整理成手册,提供给所有的执行部门;如果整个执行团队规模在20人以下,没有必要单独设立Workflow这样的职位,但是确定质量监督人员是非常重要的。

一些常用的WireFrame图例
一些常用的WireFrame图例

无论手绘、纸面模型、Visio、Dream Weaver、Axure、PowerPoint甚至Word都可能成为线框图设计工具,使用何种工具进行设计并不重要,然而这些文档能否被其他执行部门理解,是另外一回事;各个执行环节的默认约定成为线框图的图例,是保证所有的设计被理解被合理执行的前提。

基本框架模板

感谢模板给设计带来的便捷!站在用户的角度,需要在大致相同的浏览环境中学习网站的使用;站在界面设计的角度,应用模板能够大大缩减设计与实现的时间;站在程序开发的角度,复用结构能够提升整体的开发进度和系统效率;最后站在线框图设计者自己的角度,合理的使用模板能够缩减相当的工作量……全都受益,何乐不为

在编写《项目的页面列表》的过程中,已经逐渐确立了大体的模版种类和应用范围;构建线框图的第一步就是针对那些常用的页面模板进行设计。

一张页面线框图模板的实例,其中包含了可编辑部分
一张页面线框图模板的实例,其中包含了可编辑部分

模版可以包含Logo&Slogan、页面导航面包屑、广告、常用功能、侧边栏和页底版权栏;每个模板都包含一些可编辑的部分。在确立了模板之后,剩下的工作无非就是根据每个页面逻辑架构的区别,设计那些可编辑的部分而已。

本章小结

在本章节中,确定了在开始设计线框图之前,整个项目及参与团队需要完成的工作。在了解一共有多少页面,每个页面都包含什么内容,那些内容是可以复用的……这些问题之后,必须确认已经完成《项目的页面列表》《线框图图例》《基本框架模版》这三个文档,那么就可以开始具体的线框图设计。了解更多线框图设计中的技巧,请关注HoZiN.CoM的《页面线框图教程(之二):画地为牢的框架设计

标签: 设计流程, 网站设计, 线框图, 线框图设计, Wireframe, 页面逻辑, 线框图模板, 产品经理交付物, 网站策划方案, 线框图流程, 线框图图例, 设计规范, 线框图规范

添加新评论