/ 产品设计

线框图设计【产品】

一、谁在用线框图

简而言之,与产品有关的、任何身份的任何人。

尽管通常是设计人员,开发人员和产品经理最经常在日常工作中创建和使用
线框图,却有很多人受益于线框图。这些可能包括业务分析师,信息架构师
交互设计师,用户体验设计师,平面设计师,程序员,以及产品经理。
在后面的系列中,我将讨论更多关于这些团队成员们应该如何协同工作,包
括其使用线框和其他设计工具。

二、为何人人都在用线框图?

线框图是“设计的蓝图”。
他们将底层概念结构(或信息体系结构)与网站或移动应用的界面(或视觉
设计)建立联系。更具体地说,他们是一个界面的视觉表示,用于让每个人
都在相同的页面上沟通以下细节:

  • 结构 - 如何将这个网站的各个页面放到一起?
  • 内容 - 网站显示什么?
  • 信息层次 - 如何组织和展示这些信息?
  • 功能 - 这些界面如何工作?
  • 行为 - 它如何与用户进行交互? 它是如何运转的?

线框图无法代替表视觉设计设计稿、无法定义视觉元素,无法作为品牌设计
指导规范。

三、线框图的保真程度

除非工具受限,否则设计师应该根据产品设计所处的阶段,合理增添线框图的细节。除了设计阶段,还需考虑设计目标。

3.1 方框图

这种视觉样式提供了最基础也是基本的线框图:布局内容版式所需添加的功能。这种保真级别的线框图也可提供信息层级和字体排版 的参考,通过调整元素尺寸,来突出视觉焦点和层级,记得设计此类线框图 之前要布置好网格线,帮助你更有层次的架构内容,整合元素。

在这个阶段,设计者依然能够获取相当的设计灵感,虽然线框图会在一定程度 上限制设计者的思维。在设计时思考设计模式、产品目标、用户流程等,因 为这个阶段的保真程度很低,随时可以推倒重来。并且,要考虑加上文字后 的版式效果,如果你不注意文字排版,以后出了问题,就麻烦了。
这类线框图绘制的条件要求非常低,上述提到的工具和媒介均可完成此类
线框图的绘制。

3.2 灰框图

利用全灰色调绘制线框图,主要用来强调版式设计和具体元素 好处是不用在配色上下功夫,也不用加上一堆“Lorem Ipsum”,这些会 导致以后的视觉设计受干扰。这种线框图非常适宜于测试用户流程,组织 图形内容,但是也可以作为方框图、文本+框图之外的个人设计参考。

3.3 文本高保真线框图

让线框图变得具有真实感的方法之一,不必太过在意图 形细节,但是要在文本上下功夫,理想的字体,尺寸,字重,长度等等,作 为高保真线框图之一,这种细节程度的线框图能保证读者较为轻松的理解 概念,一旦通过,就可以开始下一个设计流程了。

3.4 色彩高保真线框图

让线框图变得具有真实感的方法之一,不必太过在意图形细节,但是要在色彩上下功夫,背景颜色,按钮颜色,文本颜色,或是需 要重点强调的颜色,能够提供灰框图不能提供的一些设计细节。不要太沉浸 于配色,否则会大大降低效率,如果花在太多的时间在终究要被替代“假模 型“上,那么设计流程毫无疑问是有问题的。而且配色太花,其他的设计细 节就不好展示了,尤其是当老板不太懂设计,容易被花花绿绿的东西吸引时 他们会以为这是效果图,而不是线框图。

3.5 媒体高保真线框图

让线框图变得具有真实感的方法之一,不必太过在意图形 形细节,但是要在色图片、视频、缩略图、背景图像上下功夫。伴随内容的 崛起,这类线框图开始变得流行,这类线框图对信息层级和整体架构有着 显著的影响。

3.6 高保真交互原型

让线框图变得具有真实感的方法之一,不必太过 在意图形 形细节,但是要交互和可点击链接上下功夫。这种线框图主要用 来展示交互性,而不是视觉。例如弹出窗口,内容的扩展和放大,以及滑 动、滚动、点击等交互手势的表达

3.7 带注释的线框图

非常适用于在基本线框图的基础上添加大量细节,同时 保证整体线框图设计整洁有序,还能保证线框图的整体性。例如,在一些定 义交互性的线框图汇总,注释可以很好的向读者解释如何触发交互,触发后 达成什么效果。往往注释会描述以下细节。

3.8 带用户流程的线框图

这种线框图已经得到了普及,在早期产品设计中将 线框图和用户流程图结合。用户流程用文字叙述不便,而线框图所绘制的 流程,在视觉上有点像传统的故事板。在一些案例中,带用户流程的线框 图可以用静态的形式展现产品动态的交互性。而有的案例中,主要用线框 图来梳理用户主要操作流程。

3.9 可交互可点击线框图

这类线框图接近原型图了,可以在开发完成前大致 领略产品——像是一个带有动画的故事板。这类线框图可以实际操作(点 击、敲击、滑动),设计者可以亲身体验一番用户操作流程,而不像静态 的线框图,设计者只能空想。在原型设计和开发之前,在线框图中尝试加 入一些基本交互效果,可以节省设计师和工程师的时间。这种线框图仅仅 能在延时类软件和图形设计类软件中设计出来,当然,像UXPin,Bal- samiq,Axure,Proto.io,Sketch + Flinto,SilverFlows这种专攻线框图的软件也可以设计出来。

四、熟能生巧

现在你知道用什么创建线框图,创建什么样的线框图了,可以开始做作业了
上面提到的多种方法,不妨都试试,这样在面对不同的项目时,你可以针对
性选择线框图绘制方法。