|
相信对交互设计有一定了解的同学一定听说过线框图这个概念。有些同学甚至已经制作过很多次线框图了，但是同学们真的了解线框图吗？或者说真的知道其在交互设计中的意义和重要性，以及线框图的制作到底在整个项目的设计流程中的哪个环节进行？又对流程中的其他环节有什么影响？ 针对大家各种各样的疑惑，本文UXD将为大家详细的介绍一下线框图，并且为大家演示一些线框图的具体制作方法，方便大家在制作作品集时更好地应用。 01 什么是线框图? 首先我们介绍一下线框图，听过UXD之前课程或者知识科普文章的同学多少都会了解到设计思维的五个阶段，在这里我们给大家简单地复习一下：大家在做一个项目时需要经历Empathize➡Define➡Ideate➡Prototype➡Test这五个阶段。  在最开始的时候，我们要对用户进行调研和采访，了解用户的需求并得到反馈。之后根据调研的内容对我们需要解决的问题做一个明确的定义，也就是问题到底是什么，我们到底要满足用户的哪些需求，解决什么样的问题。在这之后就到了一个产出概念的阶段，对定义好的问题进行思维发散。当做完这么多事情之后，我们终于来到了原型制作的阶段，也就是终于从分析研究来到了项目产出的阶段。 但是到了Prototype这一阶段的时候我们又该从何处下手呢？我们如何去运用前期研究的成果，并将想法落实到产品上呢？本文为大家解读的线框图就是在Prototype这个阶段进行设计和制作的。准确地说，线框图的制作可以衔接Ideate概念提出和Prototype原型制作两个环节，是有过渡作用的重要设计步骤。 02 原型制作阶段的常见问题 首先大家看上图，我们可以看到这是一张很有混乱感的图片，它看起来像一团乱麻，但它确实是一条曲折蜿蜒的线，并且有很清晰的开始和结尾。这条线其实就是表现了一个项目想法从提出到完成的过程，但是它为什么这么混乱呢？ 其实这张图很好地表现出了很多刚开始接触交互设计的同学在进行项目制作的时候的状态：只是发现并提出了问题，以为自己设计出了一个可以解决问题的方案，但是其实整个项目中间的设计过程都是逻辑很差，甚至没有逻辑且混乱的。 或者说在进行设计产出的时候走了很多的弯路，浪费了很多时间去做重复性的工作，并且最终得到了一个说服力不强的结果，并不能真正地解决最开始定义下来的问题。 · 对交互流程把握不清晰 例如，很多同学进行到原型制作这一步的时候都会表现出急于求成的状态。因为前期花了大量的时间去进行调研和分析，所以当学生们终于步入原型制作的阶段的时候，就会急于去进行交互界面的制作。 有的同学会说：“老师我想做的是一个音乐类的APP，我已经挖掘好用户的需求了，现在我想做就是把我的交互界面做的很酷炫，我想做的更有个性。”，或者说“我想要用什么风格的颜色组合，比如说黑色、银色、五彩斑斓的黑什么的”，就是大家甚至已经在脑海中畅想好自己产品最后的产出的画面了，已经想好了“我要给人一种什么样的视觉冲突”。 这样的想法其实不是错的，但是当同学们抱有这样的想法直接去做界面的时候就会发现，原来理想很美好，但是面对着电脑就不知道从何下手了。具体表现出来就是，整个的思维都比较混乱，上来先做出来一个最先出现在脑海里的界面，或者是自己的设计项目中最亮眼、最具有创新性的一个功能界面。 以上文提到的音乐类APP为例，有的同学可能是想做一个现场live的界面，可以和好朋友开启一个小房间，共同观看演唱会的一个界面，然后有了想法先把这个界面做出来了。素材可以找自己喜欢的明星的演唱会视频，或者很漂亮的专辑封面图片、宣传海报等。这样的做法可以让这个页面看起来很酷炫很亮眼，学生也会明确地知道好的素材对于整个界面的视觉效果是有很大帮助的。 但是当学生兴致勃勃地做完了这个页面以后他会感到非常的迷茫，这个时候如果问他：“这个页面应该放在哪里？它在整个app的设计中占据着什么样的位置？整个app的使用流程和内部的逻辑又是什么？”，他很难条理清晰逻辑分明地回答。也就是说，大家对线框图或者说对整个交互设计流程是存在误区的，即对整个交互流程把握的不清晰。 · 过于注重视觉效果而忽视功能的设计 我们再来看这样上面这张图。这张图和前面那张图形成了鲜明的对比，两张图都有一个明确的开始和结尾，但是第一张图像一个混乱的迷宫一样一团乱麻，第二张图却有着清晰的框架，它从一个出发点进行发散，之后在下一个层级继续深入和发散，不断地连接和构建最后获得一个完成的结果。 也就是说，新手设计师总是无意之中就把注意力过多的集中到视觉层面之上，却忽视了功能上面的设计，然而功能上的设计才是交互设计中的重中之重。像前面举例的那位同学，他在还没有想好自己整个产品的架构的时候就急于去做比较抓人眼球的界面了，他对自己产品内部逻辑的把握就是非常不清晰的。 有的同学可能会觉得，自己做项目主要的作用就是用来申请学校，或者仅仅是作为作品集里的一个项目，只需要足够抓人眼球，界面足够丰富就好。这种想法UXD可以理解，大家都想快速地得到面试官和教授的注意。 但是UXD在这里要强调的一点是：你拿出的毕竟不只是一个视觉作品，你拿出的是一个完整的交互项目，你在前面花了大量的视觉去做采访做调研、去做问题的分析，这些东西不应该只是做个样子，它应该对你后面的设计产出有绝对的指导意义，应该是和你后面的设计内容有紧密的逻辑关系。 也就是说我们从Ideate阶段过渡到Prototype阶段的时候，一定不要急于求成，我们到底是要一个漂亮的原型图还是一个好的idea？答案当时是全都要。但是再好看的原型图不一定是好的idea的表现，而好的idea一定是被放在设计过程中最前面、最重要的位置。 所以，我们怎么才能够避免在不成熟的idea上面花去过多的时间精力？怎么才能在避免浪费过多时间的前提下，拿出尽量多的问题解决方案？怎么对方案之间的优劣作出正确的判断？这就涉及到我们的一个设计学习的内容了。当大家不再急于求成之后，就能明白从设计想法到原型制作要迈出一大步，这中间有很多小步骤，比如说： -故事板：形象地传达和表现产品的功能； -交互信息架构和用户流程图：将整个概念系统化、组织化，把用户的需求和产品的功能分出层级来，与前期做的Journey Map 中的Touchpoint（服务触点）相对应； -线框图：构建出核心的项目架构，并在框架上填充为用户服务和功能的细节，让空荡荡的骨架可以有血有肉的运行起来的设计步骤，可以将设计内容有逻辑性的表达出来。 03 线框图的定义和主要作用 线框图，也称为页面示意图或原型草图，是展示网站或产品框架的视觉指南。从某种意义上来说，线框图就相当于UI界面的使用说明书，它的精细和复杂程度取决于你的应用范围。如果你是为个人项目制作线框图，也就是作为独立设计师给自己提供设计帮助，那么你可以做的简洁一些，方便自己的设计就好。 但是在真实的设计项目中，线框图的制作是要面向设计和开发两个部门的，所以说线框图需要足够清晰且便于理解和传达，让同一个团队里的设计师都能理解里面的设计内容，同时还要便于修改，这样才可以降低设计部门和开发部门的沟通成本。 也就是说，线框图的主要目标是向团队和利益相关者展示产品将包含的页面和组件，以及这些元素之间的相互作用。 · 线框图的四个基本内容 -界面上的功能信息 -界面的结构和布局 -多界面之间的系统关系 -总体设计方向和说明 · 常见的线框图案例 案例一： 这是一个常见的，做的比较漂亮的线框图了，它是一组网页的线框图。大家可以看到一个网页的功能内容是要比一个手机APP的内容多很多的，这里面涉及到很多功能，所以一套合适的界面排布十分重要。 在做这样的线框图的时候可以不仅仅只使用黑白两色或者单色，还需要用较为醒目的颜色去点明逻辑关系，让整个页面更好传达和理解。 案例二： 第二组线框图是手机APP的线框图，同学们可以看到这套线框图不只是传统的并列对齐的样式，而是有点类似思维导图。它可以清晰地传达出多个界面之间的层级关系和逻辑关系，所以线框图的制作不必拘泥于某一种严格的定式，而是要根据使用需求灵活地进行设计。 第三个例子是非常接近高保真原型图的一个案例了，它让同学们明白，支座线框图的时候不能只做区域的划分，还要有实际的内容，如文字、销售目的、使用方法等，这样才更加方便团队和客户理解设计，从而提出切实性的反馈并对设计进行改善。 总结来说：线框图需要表现界面的功能、逻辑和必要的视觉效果，制作时要保证页面的清晰、简洁、易懂，让人一目了然。 04 线框图的误区 提到线框图，大家可能会存在以下几个误区： 1.不够重视线框图 线框图作为原型制作之前的设计步骤，通常是灰色或单色的低保真页面，很多同学便因此认为线框图就是原型设计页面的去色版本，没有必要在作品里放两组内容一样、只是颜色不一样的设计。这是因为很多刚开始接触交互设计的同学普遍是在设计分享网站上看到了线框图和原型图的图片案例，也就是说同学们先看到了设计结果，所以自然而然产生了这样的想法。 真实的设计流程是，线框图在经过不断地探讨与修改后，才作为原型图的“草图”为原型图提供设计内容的，所以线框图对后续设计具有指导意义，线框图的制作也是很重要的。 2.依赖模板，一味模仿 同学们很容易找到一些模板和素材并进行套用，但是UXD想告诉大家的是，制作线框图不是只做做表面功夫就好，这个过程也是在思考和分析自己的项目框架的过程，同学们不应该是在进行大脑放空的机械性工作，而是应该根据自己的项目情况去进行创新。 模仿设计很容易，设计创新很难。如果过于依赖模板，就会造成同学们被思维定式禁锢住，所以大家在制作的时候一定要思考：“这个功能真的需要吗？别的原型设计上做了全屏的视频展示界面，我这个APP也要这样做吗？”。不要照搬其他一些APP的线框图设计模式，而是一定要重视线框图的制作，并且耐心地处理细节。 3.线框图一定要做的美观精致 有些同学会说：“老师，既然你说线框图很重要，那我一定要把它放到作品集里，并且要做的很美观。”，有这样想法的同学就容易花很多的时间和精力去纠结线框图的视觉效果。这其实是一件没有必要的事情，要知道以前大多数的设计师都是手绘线框图的。 线框图的主要作用就是要清晰快捷地传达设计内容，并且方便与团队或者用户进行功能的介绍和解释，所以同学们注意不要本末倒置，快速高效，传达内容，方便修改，才是线框图的设计原则。 05 为什么线框图如此重要？ · 草图的功能 在所有的设计领域中都会涉及到“草图”的概念。产品设计需要一个草图迭代的过程来完善设计造型的推敲和产品功能的演示；动画设计需要对主要角色进行一系列的建立和规范；电影制作需要采用分镜的方式来展现画面，便于协调演员、摄影等制作人员。所以在交互设计中，线框图起到的就是草图的功能，完善设计、统一规范、协调团队。 · 团队协作沟通与高效率 可能很多同学对团队协作这方面的感受还不是很深，因为多数同学在准备作品集的时候都是自己在做。然而在工作中，制作线框图可以帮助团队评估和完善工作范围，并且允许设计师快速创建产品的视觉表现，方便后期修改。以及帮助设计师向团队展示应用程序具有的页面元素和控件，以及所有元素如何进行交互。 线框图的使用允许设计师和开发人员在早期阶段共同参与讨论设计，在开始进行视觉设计之前就提供反馈和更改建议。这样有助于使设计过程快速迭代，避免不必要的浪费。 · 进行用户测试 方便快速演示，从客户和利益相关者那里获得快速反馈是设计过程的重要组成部分。设计过程中，经常会遇到需求的来回变化。有了线框图，可以使这个过程更有效，修改原型比修改线框图需要更多的时间和精力。
线框图可以帮助设计师从潜在用户那里获得有用价值的反馈。同时浏览线框比读取规范要快得多，还有助于减小与预期效果的差异。 06 线框图的制作 1.线框图的设计目标 在设计用户行为之前，我们当然需要了解清楚目标用户是谁，了解他们有什么样的特征、经验，会在什么场景下出现注册行为，体验目标是什么，这就对应到我们在项目前期做的内容 的用户需求分析。
此外，针对用户本身的需求，有一些我们在前期调研的时候不一定会想到的内容，比如我们要做一个关于护理老年患者的项目，或者是护理体验的提升，我们在前期调研做Journey Map的时候，更多关注的是老年患者在这个患病和护理的情境下的一些需求，却可能会忽略他们在后期使用APP时可能会遇到的问题： “界面是否要更简易才能方便老年人使用？是否需要多使用图片少出现文字？是否需要将字体调大？是否可以利用声音效果的设计以帮助视力不好的老年人？按键应该采用什么样式？如果老人丧失了自己使用app的功能呢？如果使用者是他的家属呢？又需要怎样的一个改良？” 2.线框图的设计原则
颜色的使用：黑白灰或添加单一颜色突出特定组件； 组件的使用：使用相同的、简单的组件，在大多数情况下没必要为线框图添加效果； 简单且一致：类似的组件或按钮保持相同，避免混淆； 真实的内容：添加真实的文字内容，而不是只划分布局； 必要的注释：方便与团队沟通，提高工作效率。 此外，线框图需要包含几个重要的内容：页面跳转逻辑、交互逻辑、页面布局、页面状态等。如果页面涉及到后续的一些动效问题，可以在线框图中进行必要的注释，这样可以让所有参加项目的成员都能理解整体的设计流程，避免影响开发过程的错误。 在线框图不足以说明复杂性的情况下，可以将线框图扩展到交互原型中，而不必写冗长的注释并花大量时间进行解释。灵活的根据自己的需求去做线框图。 · 线框图制作的常用软件 Sketch作为MAC系统目前最好用的原型制作软件，可以用来高效快捷地产出线框图；Figma的优势主要体现在团队合作上；Windows系统主要应用Adobe Xd进行原型制作，它也可以很便捷地制作线框图和交互原型。
|
|
|
