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

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

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

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

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

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

相关推荐

  • 02案例:用户体验与结婚教练

    02 案例:用户体验与结婚教练来自信息读书00:0017:04用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为...

    微信热点 2018-03-27
  • 苹果设计主管乔纳森:从乔布斯身上学会专注

    发布者: GUImobile 新浪科技讯 北京时间10月11日早间消息,在近期于旧金山举行的“名利场新成就峰会”上,苹果设计高级副总裁乔纳桑·艾维(Jonathan Ive)表示,乔布斯是他一生中遇到过的最专注的人。 艾维表示:“这种…

    2014-10-15
  • 88个IXDC国际体验大会的PPT干货

    88个IXDC国际体验大会的PPT干货 毫无水分的PPT资料,快来下吧。   下载地址:http://pan.baidu.com/s/1gekWpJd 密码:请在 【艾欧交互设计】公众号里回复:【ixdc】获得密码 ​微信二维码见页面底部

    交互设计 2015-12-16
  • 【曝光台】用户体验不佳 “海带宝”屡遭投诉

    导读凭借业内领先的电子物流平台和遍布全球的优质物流资源,海带宝为全球跨境电商、代购平台提供一站式综合进口物流解决方案。然而,据“电子商务消费纠纷调解平台”(微信ID:DSWQ315)接到的用户投诉维权案例统计,“海带宝”存在提现等待队伍长、转运速度慢、用户体验不佳等问题。电子商务研究中心(100EC.CN)了解到,深圳海带宝网络科技股份有限公司成立于2013年8月,是一家基于互联网智能化物流解决方案的高新技术企业,国内现有员工300余名...

    2018-04-26
  • iOS8 Human Interface Guidelines 精选阅读(中英对照)

    用了两个星期时间断断续续读完iOS的guidelines英文原版,原文是写得有点啰嗦,所以精选了以下觉得比较重要的点,并加以自己的解释;当然如果你有时间,还是推荐阅读英文原文。首先是因为翻译的版本基本是不全的、旧的,就像ISUX的翻译的对比原文就会发现中间省略了好多。本文的作用并不像多数的翻译那样,让你粗略地了解里面的内容,而是精选出一些点使你体会到苹果的设计思想。 我读guidelines的目的不仅仅是要看他们是怎样规定的,而是要看他们为什么这样规定,在了解了制定规则背后的原因之后不仅便于记忆规则本身,还能了解苹果的设计思路,当吸收了设计思路之后,就不再是墨守成规,而是更自信和灵活地运用规则,甚至创造属于自己的规则。就像tweetie发明下拉刷新手势之后苹果反而把这种手势加进了自己的guidelines。 读英文原版还有一个显然易见的好处就是熟悉专业英语表达,guildlines的措辞显得优美而精确,值得去读读。

    2017-06-02
  • 译文 | 结合用户体验设计和心理学来影响用户行为的发生/改变

    你是否曾经困扰为什么你的用户总是不按你设计的思路来操作产品?成功说服用户去操作某个功能,比如注册或者购买产品,对于任何一个产品来说都是很有难度的,尤其当这些行为是你的产品的核心功能时。“设计并非设计外观,感觉如何,而是设计产品的工作原理。”

    2017-05-27
  • 关于假设和极致

    作者:杨蓉(资深用研专家,现任极客网运营总监)   假设的意义 今天看到一本质性研究的书,在讨论定量定性的研究方法的时候,会说定性通常被质疑的是“不够客观”,所以作者开始一大篇幅,在讨论“客观性”是什么,就…

    交互专题 2017-08-07
  • 视觉设计师应该修炼的五个交互设计技能

    现在,所有基于Web进行设计的人都需要对交互设计 原则有一个基本的了解。即使你没有在人机交互、用户体验设计或人性因素等方向的正式学习训练,但只要你了解这些学科的基本原理,依然会大大提高了你设计的成功机会。这一点对视觉设计师尤为明显。大多数视觉设计师都在艺术学校或者在培训机构经过正式或者非正式的训练。

    2017-05-27
  • 如何保持交互与视觉的协调性

    转自微信号: 作者:小云子  我是UE / woshiue 我不想贬低文字的重要性,但也不想忽视视觉。两者是同等重要的交互设计元素。文字就是交互,但那些视觉元素(比如图标、菜单、图像等)才是用户实际上操作的东西。虽然…

    2015-03-30
  • 交互——浅谈“什么是好的社交产品?”

               最近密集参加了几场和社交有关的活动,引发了一些思考。就如同大部分投资人认为的一样,社交领域是一个进入门槛很低的领域,似乎任何人都可以进来试试。其实这句话的背后,有3个深层次的意义: 1. 投社…

    2015-04-05