交互设计

【译】为什么要在绘制线框图之前画草图

0
登录或者登记去做吧。

我们在设计的过程中都会有意无意忽略掉很多步骤,大部分原因是我们都不了解这些步骤。当有人问你,交互设计的价值在哪里?会不会觉得很难回答出来,就算答了也觉得很虚。因为本质上我们都不懂。当你了解了整个流程,知道每个步骤的意义是什么,价值就自然而然的体现出来了。

看了之后,大概对于交互设计的工作会更加清晰。不要总是说交互设计只是画画线框图,没有实际产出。交互设计师是第一个把想法实现出来的人,这个过程才是交互设计的价值所在。

结合这篇文章的角度,我认为交互设计的价值,就是从用户的使用角度思考,把功能点界面化,帮助用户以良好的的体验完成目标。

-------------------------------------------------------------------------------------------------

原文:Why It's Important To Sketch Before You Wireframe

作者:Anthony

译者:ManUx

你是不是曾经为一个网站或者应用想过一个绝妙的点子?如果只是想出点子,其实很简单的,难就难在如何把点子从抽象变为现实,也就是怎么把想法塑造成真实的用户界面,而这就是草图有用的地方了。其实在很多需要创造力和架构的专业领域里,草图都会经常被用到。

即使是达芬奇,在他开始建造他的发明之前,也不得不先把它们勾勒出来。就算你非常聪明,也不可能在没有考虑任何细节的前提下,直接把你脑子里的简化版点子塑造成真实的产品。因此,在真正开始画线框图之前勾勒出脑袋中的概念图,是每个设计师都必须得做的工作。

6630693931747137016

画草图其实是概念图和用户界面之间的转译过程

设计用户界面是一个过程。所有的元素,一开始都来源于那个脑袋里的想法,但是想法需要被“翻译”。如果你只是说,我希望这个APP有X、Y、Z这些功能,其实是不够的。你需要了解的是,在APP里面的每一个页面里,用户将会看到什么,他们又会怎么去使用X、Y、Z这些功能,从而完成他们的目标。草图能够把你脑海里那些充满想象力的鬼点子实化为原始的用户界面,当你看见原始的界面时,你才会真正地开始考虑用户体验。你会渐渐地明晰你创造的APP是怎么运转的,又是怎么帮助用户到达他需要到达的地方的。画草图使得你能够可视化页面与页面之间的交互,最终使得之前隐藏在脑袋里的鬼点子渐渐的清晰起来。

6631426206489635527

草图并不是线框图

很多设计师错误地认为草图就是线框图。这两者确实很相似,但是它们并不是同一种东西。它们对于展示界面概念来说都很有用,但是画草图和线框图使用的是不同的媒介,并且它们也产生不同的结果。

6631296464117561097

在画草图的过程中,你会不断尝试弄清楚一个基本的概念——究竟这个APP在用户界面的形式下是怎么工作的。你可以通过多种方式勾勒出界面的概念。但是,在这里,你会尝试弄清楚究竟这些方式是什么,以及哪种方式是最好的[1]。在这个写写画画的过程中,你的脑袋里会快速的冒出各种各种粗略甚至肤浅的想法。而在这个阶段,用户界面的具体细节并不重要,重要的是去理解用户在每个页面会看到什么,并且怎么通过页面一步一步带领用户得到他想要的结果。

[1]注:这里作者说的“方式”,我认为应该是指各种不同的设计模式,比如导航栏,有各种不同的设计方式(卡片式的、底部菜单(微信)、汉堡包、画廊(浏览图片)),但是要根据不同的场景和设计目标来综合考虑究竟哪一种设计方式才是最好的。

而当你画线框图的时候,你会使用像素化的灰度控件,尝试提炼出APP工作的概念。因为不同于草图的媒介,画线框图的媒介(比如Axure)会迫使你去考虑更多更高保真的细节,比如元素的大小、位置、次序。你也会更加整体地考虑页面上所有的元素。当你使用到像素这个概念进行设计的时候,你能够更加精确地把握用户界面的工作方式。当你制作完线框图,用户界面的概念应该会变得更加清晰和精炼。

草图总是在线框图之前

很多设计师都会有不同的工作流程。有一些会跳过草图,直接制作线框图。有一些则跳过线框图,直接制作原型。但是,当你跳过一个或者更多的时候,你会失去非常多概念的细节和概念的提炼。界面会变得惨不忍睹,因为它其实只处于未成熟的阶段,并且没有经过全面的提炼。

6630102394490861614

草图能帮助你跟客户一起头脑风暴

草图其中一个最大的优点就是使得你能够快速表达自己的观点,并且让其他人也参与进来,一起创造用户体验。无论你是使用白板还是纸来画草图,重要的是你的客户或者团队成员能够理解这个APP用户体验的基本概念,从而使他们能够提供给你必要信息(内容)。同样重要的是,让他们参与进来,你能够从中获得更多的反馈和想法,帮助你改进用户界面。当大家都在同一步调上时,大家都能相互理解,工作起来更有效率。

6630413556281525124

草图帮助你更快地工作和思考

如果你在一点基本的概念都没有的情况下就胡乱地画线框图,其实是非常困难的,因为你并不能像在纸上画一样,很快地就在软件上堆砌像素。当你在形成界面的概念的过程中,你会考虑所有构造用户体验的方式。很多的设计模式会快速,甚至是一瞬间地出现在你的脑海里,如果你需要直接用软件来记录下这些想法,显示不现实的,因为你的动手速度比思考速度慢太多了。而画草图就轻松得多了,虽然谈不上与思考速度同步,但至少能够大大缩小两者之间的差距。当你画好草图以后再制作线框图,那速度就快多了。6630734613677369853

Sketch 3 布尔运算教程
【译】学习Axure RP 8 Beta - 编组功能