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

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

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

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

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

原文: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

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/8051/

(0)
TinadminTinadmin
上一篇 2015-08-19
下一篇 2015-08-19

相关推荐

  • 现在!极限UI设计的时间到了

    毫无疑问,数字设计其增长突飞猛进超过过去五年和服务设计更是如此。合并用户体验、 客户体验、 交互设计和技术创新有助于更好,并协助组建健壮的规则、 模式和人民已经认识到的用户界面语言。然而,我不禁感到东西死了前进的道路。

    2014-12-28
  • 「抖音」用户体验分析

    和大部分人想的不一样,我是抖音和快手的忠实用户,每天都会在上面花不少时间。在玩抖音几个月后,我开始思考和分析这两款APP的设计和技术,发现其实其中充满了很多“精巧”的设置。抛开APP的针对群体和社会影响不谈,只想说作为一个普通用户的感受。抖音的交互设计是沉浸式的。在推荐页面,你每次只能看到一个视频,系统默认自动播放。因为没有给你反应时间,我们会不由自主的盯着屏幕看,而人的注意力很容易就被当前的视频(视觉和听觉)吸引。这样的交互好处是人的...

    2018-04-02
  • 未来美甲店一定赢在“用户体验” | 互联互生

    咱们来假想一个情景,你到一个新公司第一天上班,你刚到公司门口,就有一位打扮非常正式的女士专门迎接你。她领着你在公司走了一圈,介绍了各部门的情况,然后把你送到你的办公桌。你发现办公桌上挂着一个横幅,上面写着“新人在这儿!”全公司都能看见。你打开电脑,屏幕是一张代表公司理念的美丽图片。办公桌上有一份给你的礼物,是不锈钢做的一个公司产品的模型。你刚连上电子邮件,就收到 CEO 亲自写给你的信,对你各种鼓励、希望你能度过愉快的一天,也希望你在公...

    2018-04-29
  • 选择极简主义风格做设计,不是没有道理

    极简主义设计并非万能的。但有一件事是肯定的,界面越简约,设计目标和针对性就越明显,而设计师要投入的时间和精力也越多。你并不需要更多的空间,你所需要的是更少的东西。

    2017-08-04
  • 推荐给设计师的UI/UX书籍和资源

    如果你想成为一名优秀的设计师,想要博览这个领域的书籍而又无从下手,或不知从哪里快速寻找正确有效的资源。那么,我这里整理了一份书单,根据各大专业博客的推荐书目或者业内关注度比较高的书籍中精选得出的。主…

    2016-08-25
  • Axure绘制专题页原型

    专题策划对于SEM至关重要,如果策划及文案都搞定了,接下来如何与设计进行沟通呢,这篇文章我们一起聊聊专题页原型绘制的话题。一、Axure界面介绍Axure的使用极其简单,只需要几个拖拽动作就可以基本搞定。接下来我们实际上手用学历教育的例子,带大家一起来看看。绘制这个原型可以分为两步,首先是手机的绘制,然后是文案内容的绘制。左侧面板(快捷键:Ctrl+Shift+[),主要是元件库,将需要用到的元件,直接拖拽就可以。右侧面板(快捷键:Ct...

    2018-03-04
  • 被忽视的重彩-交互设计验证

    每次评审,都是一场高效的讨(si)论(bi)大会...届时,需求、设计、开发也会上演争霸对决。作为身经百战的设计师该如何从评审会中顺利脱身,逃离这场没有硝烟的战役呢?小子很高兴地告诉你:你是绝对跑不掉的!定性、定量挖掘数据我们知道产品都有一定的周期性,开发期-成长期-成熟期-衰退期。在不同的产品周期中用户也会随着时间的推移,对产品的使用深度和理解广度有了深浅的层次变化,而不同的时期设计师采用的定性定量研究方法也是不一样的,如:访谈、问卷...

    2018-04-18
  • 关于用户体验 生活才是最好的老师

    早早起床,天下去小雨,收拾完一切,带上我的花伞出门。今天的任务是买一双早已在网上看好的球鞋![我的主要需求]来到了步行街,街上的人还不少。我的目光在细雨的缝隙间不断的寻找着我心中的那个目标。偶然,在一个个华丽的招牌旁边,我发现了一个黑色的招牌,特别显眼!黑底白字虽然单调却不失档次,门内的贴画很简单,不是某某明星,仅仅是一双鞋子,在鞋子的表面,有几滴水珠。我不禁心中发起感慨,有意思。[广告展示的对比,不光是门头还是贴画,给我视觉上的冲击和...

    2018-02-07
  • 产品交互乱,设计效率低?你需要一套好用的产品设计规范

    说到产品设计规范,大家一定不会陌生。一套好的产品设计规范,将产品设计模块化、通用化、标准化,不仅能够为产品建立起统一的交互规则与品牌视觉,让用户拥有更好的产品体验、对产品风格有更深的认知,更重要的是,它能够减少产品设计人员的设计工作量,提升产品设计的效率。

    2017-06-08
  • 异常逻辑梳理与数据处理

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Dschinghis KhanDschinghis Khan - Siegerehrung作者:Glen公众号:更冷吃到老玩到老的故事冰山:异常逻辑梳理也许你用了九牛二虎之力,终于把产品的主流程梳理清楚了,但是你看到的只是产品冰山海面上的那10%,剩下的90%是海面下各种情况的异常逻辑。➀ 10%的冰山和90%的冰山任何一个产品功能逻辑,都分为主逻辑和异常逻辑。产品经理们当然要花...

    2018-04-08