冠亚体育娱乐_冠亚体育可靠吗

帮你奠定设计项目基础的线框图五步法

许多设计项目是从线框图的设计开始的,但是真正专业的线框图到底要经历哪些步骤呢?今天这篇来自UXPin设计师Faye Bridge的文章,帮你总结了一套实用的线框图设计五步法,帮你从最早的阶段奠定整个项目的基础。

线框图并非是原型,但即使是经验丰富的设计师也可能会将两者混为一谈。实际上,两者的差别还是非常多且明显的,那么就让我们通过这篇文章分辨清楚这俩概念,一劳永逸。

想要让整个数字产品或者设计项目结构化,线框图是它最早也是最重要的组成部分。线框图向整个团队展示了布局、导航、视觉层次、信息架构和内容优先级等关键的问题,它勾勒出了整个项目的基本轮廓,呈现了关键信息。

线框图

而今天的文章会帮你了解提升线框图设计品质的所需要知道的一切。继续读下去,你会知道线框图为什么这么重要,不同的工具要如何使用,并且如何通过一步步的操作最终完成线框图的设计。

线框图是产品设计的低保真呈现方式。它有三个简单直接而明确的目标:

线框图为何如此实用

1、呈现主体信息群

在形式上,线框图使用了大量的占位符,比如带标记的框图,它们随后会被实际的内容填充起来。在绝大多数情况,设计师会出于下面的考虑来使用和设计线框图:

2、勾勒出结构和布局

结构化的设计:在细化到具体技术细节之前,明确整个界面的运作方式和交互走向

3、用户交互界面的主视觉和描述

构建基础:导航和布局的搭建几乎决定了整个项目的大体走向。如果有亟待解决的问题,最好打一开始就着手解决,而不是到高保真原型阶段再寻求方案。

正确地创建了线框图之后,它将作为产品的骨干而存在。

以内容为中心的设计:线框图的设计思路是以内容为中心,它鼓励你思考页面哪些部分更重要,进而设计合理的布局。

它就像一幢建筑的蓝图一样,将细节规定地明明白白。

更多的创意和尝试:由于线框图足够简单,这意味着你可以更容易创建,不用耗费太多精力便可尝试不同的思路,拿出多种多样富有创意的方案。

线框图的视觉特性

线框图是设计的框架。

图片 1

线框图设计思路

线框的视觉特性局限性非常明显。通常设计师会只需要使用线条、方框和灰阶色彩填充(不同灰阶标明不同层次)就可以完成。

线框图的设计并没有一种固定的形态,你可以在图片编辑器中完成,也可以通过专门的线框图工具来制作,甚至可以直接在纸上绘制。接下来,我们看看各种不同方式的优劣。

简单的矢量线框图

纸:最基本的线框图和草图也相去不远。如果你想尝试探索不同的思路来寻求最佳的方案,你可以忽略视觉的精准度,在纸上快速勾勒出来以做探索。

一个简单的线框图最终需要包含的内容有图片、视频、文本这些东西。所以,通常情况下,被省略的地方会用占位符来标明,而图片通常被带斜线的线框来替代,文本会按照排版,用一些标识性的文字所替代。

图片 2

线框图的优势

来源:UXPin

线框图的制作是快速而廉价的,特别是当你使用诸如UXPin、Balsamiq、Axure这样的软件来制作的时候。当然,线框图也理当是在设计之初就使用这些工具来制作。

专业平台:诸如UXPin这样的可以制作线框图和高保真原型的设计平台,它们大多适宜于团队协作。

比起创建一个完整细致高保真的线框图,搜集反馈信息来得更加重要。为什么这么说呢?

图片 3

一般而言,大家更注重软件的功能、信息架构、用户体验、用户交互流程图、可用性,这些东西,而不是考虑这些因素的美学特征。同时,在这种情况下,根据需求进行修改也无需涉及代码调整和图形编辑。

来源:UXPin

交互式线框图

展示软件:如果你不想使用使用UXPin这类收费的平台,也可以使用Keynote 和Powerpoint 这样的软件来展示。好处自然是更加省钱,但是缺点是它们多数时候必须通过邮件来回传递再做编辑,沟通和设计成本都偏高。

图片 4

图片 5

有的时候,设计师喜欢提高线框图的保真度而强调用户界面的某些方面的重要性,以及展示和快速测试、各种视觉元素之间相互作用的合理性。用以解决这些问题的方案就是使用交互式线框图,也叫做可点击式线框图。

来源:Keynote

创建这种更加复杂的线框图你就需要用UXPin了,它是专门用来制作线框图和原型设计的工具了。互动式线框图可能是用来向开发团队和客户最合适的演示工具了。当你碰上客户的经典问题如果我点击这个按钮会发什么什么的时候,你所需要做的就是在互动式线框图中按下那个按钮。就是这样,你只需要这样回答。的确,这种方式令人印象深刻,引人入胜。

图片编辑器:有些设计师喜欢在Photoshop和Sketch这样的图片编辑软件中搞定一切设计问题。如果你也是这类工具的重度用户的话,创建线框图所用的形状和视觉元素绝对够轻松。不过要记住,后续的高保真原型你需要重新创建(在UXPin这类工具中则不然,线框图在后续创建高保真原型的时候是可以复用的)。

谨慎展示线框图

媒介的选取仅仅只是个开始,接下来我们看看设计的具体步骤。

当你需要展示的对象是一个彻头彻尾的门外汉的时候,你就要小心了。他可能是你的客户,也可能是参与合作的某个非技术背景主管,他们并不知道,线框图和最终的产品可能看起来毫无关系。所以,他们有可能并不能很快地明白两者的内在联系和运作方式,是否要演示,如何演示,一定要拿捏好这其中的度。

线框图5步流程

图片 6

虽然线框图的设计并没有一个标准规范,但是我们发现下面的五步设计流程是最实用的:

这是Fernando Guillen快速手绘出来的APP的用户操作流程图。当然,这无疑是最早期的设计版本。

1、内容清单

线框图设计流程中最重要的组成部分之一,看完这张手绘的流程图你就明白,为什么要耗费时间来向他们解释什么是线框图(笑),以及为什么要这么用线框图。或者,你干脆跳过这个版本。

2、视觉层次

原型

3、内容线框图

原型的要求比线框图/可交互式线框图要高,它要求必须是可交互的,并且尽可能贴合最终的用户界面的高保真模型。

4、打磨线框图

制作原型的目标非常明确:尽可能真实地模拟用户和界面之间的交互。当一个按钮被按下的时候,相应的操作必须被执行,对应页面也必须出现,尽可能地模仿完整的产品体验。

5、低保真原型

原型的视觉特征

图片 7

毫无疑问,原型是必须囊括产品该有的美学特征,并且尽量贴合最终版本。基本上,当原型制作出来的时候,它就是一副画皮,除了不具备血肉骨骼,该有的眉眼皮肤和化妆都有了,也就是说,它无需涉及HTML/CSS/JS,不用考虑服务器端的程序和数据库实现。

接下来我们看看每个步骤都是怎么操作的。

图片 8

1、内容清单

在UXPin中制作的交互原型设计

首先你得创建一个内容清单,其中聚合了所有相关的素材,在创建线框图之前得合理地整理起来。

主色调和主视觉必须到位,重点内容理应呈现出来,信息保障和版式设计也当在合理范畴以内。点击相应的元素之后,原型也应出现对应的交互回馈。

图片 9

原型的优势

本文由冠亚体育娱乐发布于摄影专区,转载请注明出处:帮你奠定设计项目基础的线框图五步法