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

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

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

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

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

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

相关推荐

  • 【颜值已爆表】00io.com-盘点2014最精彩的移动APP动画UI

    原文导读: On the third day of The Highlight 2014, we’re bringing you our picks of some of the best UI animations we’ve seen in apps and across the web. Apps have been a UI playground for quite some …

    2015-01-14
  • UX分析:朋友圈的外链知多少?

    用户体验设计的核心是用户,而用户是通过社交媒体相联系的,在设计app应用时,我们会更在意app内的使用,而会忽略app外的使用。当我在朋友圈里看到这些外链的时候就想到了要写这样一篇文章,略显粗浅笨拙,如有不当之处请不吝指教。“来跳坑吧,下载我吧,打开我吧”!

    2017-05-08
  • App界面交互设计规范

    APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、…

    2015-11-08
  • 设计的组件化

    我们在设计一个系统的时候会不可避免的与各个不同的角色互动:不同的设计师、不同的前端工程师,这其中不可避免的会出现大量的沟通和协作问题,如何在这类多角色互动中提高效率,降低沟通损耗就不可避免的成为一个…

    交互设计 2016-06-16
  • 嘘!手机能听出你声音里的情绪

    对我们大部分人来说,每天心情有点变化是很正常的。女人的一天常常是喜怒哀乐随机出现,当然一般也就自己调整过来了,不至于要死要活。但有一类人例外,躁郁症患者。 事业不顺、丢了工作、失恋等等,当生活的不幸降…

    2014-12-13
  • 交互设计师之学习需求分析总结

    交互设计师在产品开发的过程中扮演者什么样的角色?需要做什么具体的工作?这是我之前接触到交互设计时的疑问,我想只有清楚了交互设计师的工作流程,才能对交互设计师的职责有一个深入的理解,下面根据自己所涉猎…

    交互设计 2015-08-12
  • 马化腾:用户体验,比一切事情都大

    企业快速成长中,第一个大问题就是战略。/演讲|马化腾来源|笔记侠(ID:Notesman)我非常希望也很高兴在这个平等氛围中,以创业者的身份跟大家进行这样一场交流。在座的创业者,很多拿到A轮、B轮,有些在走向C轮。企业快速成长中,第一个大问题就是战略。创业最难的就是选准创业的点,你会面对很多机会、很多诱惑,需要不断做出选择。自腾讯初创开始的六七年,是我们变化最快的时期,我想把这个时期包括战略选择等方面的经验跟大家分享。一、关注痛点你出来...

    2018-02-16
  • 为什么产品与交互你都要懂?

    今天老大给交互设计师和部分视觉设计师上了一堂产品经理的培训课,从实际的项目需求出发,十分受益匪浅,确实有些事情值得去考虑。 老大先抛出了一个问题(据说的某厂的一道面试题):一辆卡车载着货物过桥洞,货物…

    2016-02-29
  • 译文|用户体验的秘诀是什么?

    我常被问到的问题之一是:“你在用户体验过程中的思维是怎么样的”或者“如何你如何把用户的个人资料转化成可以有形的事物,比如说‘界面’”。

    2017-05-28
  • 阿里设计专家深度解读:全链路设计师和设计增值再现

    分享嘉宾:汪方进(1688UED设计总监) 点评嘉宾:高峰(阿里巴巴国际UED B2B总监)、周敏青(阿里巴巴国际UED AliExpress总监)   前些日子的美国大选,特朗普胜出了,这个结果让很多小伙伴惊呆了!他竞选口号是:M…

    交互专题 2017-09-11