Advertisement
  1. Web Design
  2. Wireframing

线框图设计新手教程

by
Read Time:13 minsLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX
A Beginner’s Guide to Wireframing in Omnigraffle

Chinese (Simplified) (中文(简体)) translation by Yimin Zhou (you can also view the original English article)

线框图 是各种屏幕设计流程中重要的一步,主要让你定义信息架构,从而让你根据你希望怎样让用户处理信息来规划页面布局。如果你从来都没用过线框图,那现在就应该开始学了。

A simple wireframeA simple wireframeA simple wireframe

就像建筑蓝图一样,你需要看到二维的黑白图表才明白要怎样建真正的房子。同样地,你需要知道内容是怎样分布的才能在photoshop里建立图层,或者开始写代码。

更深层次地讲,线框图对于决定用户怎样跟界面交互有十分重要的作用。例如,线框图可以包含按钮或者菜单的不同状态。

a simple example of a wireframe showing a menu hover state, this reduces the possibility of miscommunicationa simple example of a wireframe showing a menu hover state, this reduces the possibility of miscommunicationa simple example of a wireframe showing a menu hover state, this reduces the possibility of miscommunication

线框图设计很重要,因为可以让设计师把注意力集中在规划排版和界面的交互上,而不受颜色、字体选择或甚至内容的干扰。我倾向于跟我的客户这么解释,如果用户在黑白的线框图都不知道该何去何从,那么就更不用管用什么颜色了。按钮应该足够明显,尽管它不会发光或者颜色鲜明。

就像建筑的基底一样,要先保证足够稳固才能决定是否涂上的昂贵的油漆。

步骤1: 获取灵感

一幅图胜过一千句话,在进入细节前先看一下I ♥ wirefames,你可以从中快速直观地了解到其他设计师是怎么进行线框图设计的。

I Heart WireframesI Heart WireframesI Heart Wireframes

或者也可以看下这个浏览器书签工具Wirify,可以让你看到任何在线网站的线框图版本。

cnn.com with wirifycnn.com with wirifycnn.com with wirify

如果你坚持看其他设计师或者网站是怎样做线框图的,你将会慢慢地了解到线框图能怎样帮助你组织信息。

步骤2: 设计你的流程

设计是一个有机的过程,因此不同的设计师会采取不同的方法来绘制线框图和转化成视觉设计或者代码。你需要探索让你最舒适也最能突显你的优势的流程。下图是几种典型的流程:

Wireframes ProcessWireframes ProcessWireframes Process

37signals 出名倡导使用草图然后直接开始编写代码, 尽管他们的某些设计师也会使用视觉线框图

而我之前经历过足够多的设计到编程的循环,所以摸索出了一套比较精简的流程。可能有些人不会想到考虑html/css框架,但我会在项目中想要用什么框架。

举个栗子,我之前常常用Blueprint这个框架来建站, 因此我会把线框图和Blueprint都设成一样有12栏的网格。这样将极大地缩短了建立原型和开发的时间,因为预先定义了1到12栏的宽就不用逐个写入css。我现在改用cssgrid因为这个框架支持响应式设计,但仍支持12栏网格,你还可以下载photoshop模版。

the 12-column cssgrid templatethe 12-column cssgrid templatethe 12-column cssgrid template

就像我前面说的一样,你需要决定哪种流程更适合你,可能还要进行多次尝试才能知道哪一种最能提高效率。有些人很会画草图,可能就倾向于不使用线框图工具,其他设计师可能会使用尽量多的步骤来减少分歧,或者通过多个步骤循环来让设计成形。

你最终会摸索出你更喜欢的流程,但在这个教程中,我会使用我常用的流程作为栗子:

我使用Illustrator作为我的线框图工具主要有三个原因:

  1. 样式 - 就像CSS一样,你可以保存文字或对象的样式然后重用
  2. 方便修改、移动或放大缩小多个对象
  3. 之后更容易转移到Photoshop中

然而,我也会根据项目的情景使用其他工具。下面我讲列举一些比较流行的工具以及这些工具的长处和短处。

步骤3: 选择你的工具

以下是一些流行的工具,排名不分先后:

Balsamiq

Balsamiq变得流行起来是因为做出来的线框图带有手绘风格,突显出线框图是半成品而不是成品。Balsamiq还有一个庞大的程序集包含许多可充用的控件,你可以简单地拖拽控件来设计线框图。

Sample Balsamiq wireframe from the Balsamiq website.Sample Balsamiq wireframe from the Balsamiq website.Sample Balsamiq wireframe from the Balsamiq website.

你还可以在几乎任何平台上使用Balsamiq,除了Mac,Windows和Linux的桌面版本,如果你更喜欢使用云端应用还有网页版。第三方应用比如iMockups(iOS)也支持Balsamiq导出格式。

Omnigraffle

Mac老牌应用Omnigraffle 也广泛地支持自定义控件。Graffletopia.

you’ll like omnigraffle if you enjoy using beautiful stencils like this oneyou’ll like omnigraffle if you enjoy using beautiful stencils like this oneyou’ll like omnigraffle if you enjoy using beautiful stencils like this one

由于Omnigraffle是专门开发作为绘图应用,所以也带有一些高级功能,比如自动布局、自定义对象样式支持、智能参考线和图表工具。某些功能在Adobe CS里也有,但如果你没有CS的话,Omnigraffle可以作为性价比高的线框图工具(少于100刀)。

Axure

Axure算是所有线框图工具的祖宗,是领先的专业级线框图或原型设计工具。之前只有Windows版本(现在Mac也可以享用了)。我个人不是很熟悉Axure,但已被业内的设计师广泛使用。

Flairbuilder

Flairbuilder是比较新的工具,对交互的支持十分强大。

from show & hide to if-else interactionsfrom show & hide to if-else interactionsfrom show & hide to if-else interactions

Flairbuilder有强大的控件库,支持母板页,也可以导出原型在线查看。

网页应用

如果你不喜欢桌面应用,还有网页应用比如mockflowhotgloomockingbird.

Keynote/Powerpoint

Keynotopia“把你最喜欢的演示文稿应用变成最好又便捷的原型设计工具,可绘制移动应用、web应用和桌面应用线框图”。不是mac用户也不用担心,Keynotopia也有 powerpoint模版。

如果你需要快速地设计移动应用原型,我强烈推荐这个工具。另一个不错的选择是Keynote Kungfu

Adobe CS

如果熟悉Adobe suite,Fireworks,Illustrator和Indesign是很强大的线框图工具,也各有优劣。

Fireworks

你可以在Fireworks里进行整个设计流程,从基本线框图到完整的视觉稿。Fireworks支持母板页(可以当作可重用的模版,编辑母板,子页面也随之改变)、元素库,你还可以相对快速地制作可交互原型。

Illustrator

Illustrator是我最爱的工具,因为我十分熟悉,相信许多设计师也一样。当我需要快速做复杂的线框图,又不需要交互时,我使用Illustrator。

Illustrator有什么过人之处呢?它可以导出带有可编辑图层的PSD,有强大的复制粘贴到Photoshop的功能,还有强大的字体图层样式,可以编辑、保存和重用,就像CSS一样。

Indesign

跟Illustrator的好处一样,Indesign支持强大的字体样式,支持母版,最近还新增交互功能。

Have you seen the interactive controls of InDesign?

当我要制作高保真多页面原型的时候我会选择Indesign,我唯一需要提醒的是它对导出到Photoshop进行视觉设计的支持比较弱。

ProtoShare

"Powerful Prototyping Made Easy." ProtoShare最近发布了第9代,可以所见即所得。值得看看.

步骤4: 设定网格

关于网格系统的理论有很多,这里不仔细讲了,我解释为“一种结构化的简单排版方式”。

在这个教程中,我使用Illustrator,但这些步骤可以应用到你选择任何工具中。

首先设定文档大小,我设成1280 x 900因为我将会用到cssgrid,这样可以让网站响应分辨率最小为手机屏幕到最大1140象数的屏幕。

把从cssgrid下载好的模版放在文档中。

技巧:

网上有很多网格模版可以下载,但如果你有兴趣自定义网格可以看看responsify.it

步骤5: 使用框格进行布局

开始在网格上画框框。想一想呈现信息给用户的顺序,从上到下是最简单的,然后是从左到右。下面的栗子是当前软件公司常用的布局:

有时候,根据你的目标和客户需求,你可以对布局进行创新,但要记住信息的层级分布。下面是一个真实的个案,来自我的一个客户,我打破了传统技术公司网站的布局:

以下是一个博客的布局,有严谨的广告排位和给客户明确的指引:

步骤6: 使用字体定义信息层级

在你放置好框格并感到满意之后,就可以开始慢慢放进内容,看看信息架构是不是足够好。经验法则还是一样的,你想要传达给用户的信息必须清晰,尽管是在黑白的线框图中。

使用不同大小的字体是个好的方法,可以区分不同层级的信息。

在这个阶段不要害怕尝试。有时候,当你放进更多细节的时候,你会发现原本的布局不够好。线框图流程的目的就是要有尽量多的重复循环,最终筛选出最恰当的呈现信息的方式。

在下面的栗子中,我已经决定好让截图更富有冲击力,同时我也开始加入黑色框格来突出哪些部分在视觉上更重要:

步骤7: 使用灰度进行微调

使用整灰度谱可以让你决定每个元素视觉上的强度,省去从调色板中选取颜色的麻烦。这实际上还会对你之后进行视觉设计产生帮助。

步骤8: 高保真线框图

这一步不一定需要,但如果你喜欢可以进一步尝试。制作高保真线框图意味着加入更多细节,越多越好,但不需要细致到视觉设计。可以是加入更多内容然后选择适合的字体。

也可以加入颜色:

简单来讲,这样你之后进行视觉设计或者编程的时候你就会处在润色模式,而不是在草图或尝试模式。在你适应的工具中快速地进行反馈 <-> 线框图循环,而不是在photopshop里移动图层或者象数。

虽然如此,在某些情景中省去过多细节,直接进行交互原型制作(像37signals一样),可能更理想。原因是某些交互细节可能无法完全在平面中展示。

如果你跟一个开发团队合作,你可能想把通过审批的线框图交给他们,让他们编写基本的框架,同时你可以进行视觉设计。

步骤9: 把线框图转化成视觉设计

之前提到,我更喜欢用Illustrator来绘制线框图是因为我可以导出带可编辑图层的.psd文件。在我使用Photoshop时就不太需要再修改(Photoshop的控件工具没那么强大,但在CS6中已经改善很多了。)

Photoshop Export OptionsPhotoshop Export OptionsPhotoshop Export Options

下面是一个线框图转化成视觉设计的栗子。线框图基本没怎么改变,虽然视觉上有些小的改动。你还可以看已上线的网站

Webwise 2010Webwise 2010Webwise 2010

结语

本次教程就到这里,希望你能够得到启发开始尝试!对任何设计流程,都不要害怕重复,重复,再重复。

另外,花点时间尝试不同的工具,当你找到最适合你的工具时你会发现这种投资是值得的。

请在评论留下你的问题,感谢阅读!

补充资源

如果你想了解更多关于线框图的咨询,可以查看以下资源。

关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.