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

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

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

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

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

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

相关推荐

  • 视觉设计不懂业务时如何着手设计?

    信很多视觉设计师 会有这样经历,当接触到一个新的项目;如果是熟悉业务类型产品,设计起来轻松熟络,如果是一个陌生的业务类型,则需去摸索与尝试,找到合适的设计定位与视觉风格。当视觉对交互的业务性质、框架逻辑、层级关系不熟悉时候,视觉效果是画出来了却漏洞百出.

    2017-05-24
  • 交互小细节——信息层级展示规则

    信息层级展示规则是交互设计中的小细节。要分析信息的优先级,用户的核心行为;并通过位置、大小、距离、内容形式、表现方法来建立信息层级;设计过程和结束都要不断审视页面视觉流,看看用户浏览是否顺畅。作为设计师的你,注意到了吗?

    2017-05-20
  • 帮你自学到底!非科班同学如何成为交互设计师?

    前言:最近一段时间,基本每天都有小伙伴在问,“我是来自非设计专业的学生,能否做交互设计”、“我想从事交互设计工作,是否需要读一个交互设计的硕士?”、“我工作一段时间了,不是设计行业,我能转行做交互设计么?…

    2015-04-27
  • 用户体验测量的工具:可用性度量

    说到用户体验度量就不得不说用户体验,用户体验即用户在使用产品、系统、服务的过程中建立起来的主观心理感受、因为它是纯主观的,就带有一定的不确定因素;而个体的差异也决定每个用户的真实体验无法通过其他途径来完全模拟或再现。

    2017-05-30
  • 菲茨定律与未来交互方式

    未来已来,随着科技的不断发展,交互的方式也发生巨大的变化,它正一步步颠覆着我们的生活习惯。

    2017-04-27
  • 【转】交互设计规范总结

    前些时间正准备写交互规范,就去网上搜罗了一下交互规范的一些范本,想作为借鉴参考,但却没能找到比较满意的,找到了一些零散的内容(当然有些还是有参考价值的),所以就觉得交互规范这方面的内容比较少,就来此…

    交互设计 2016-09-05
  • 如何制作交互组件库

    曾几何时,每次交互稿都是徒手画,或者截个图在现有的界面上改造。渐渐感到同一平台,每个版本都有很多重复劳动,是时候做个交互组件库了~ 什么是组件库? 就是类似axure左侧栏的这一坨标准控件,方便直接拖拽使用…

    2017-07-24
  • 如何让设计效果可量化

    前言: 做搜搜这些年一直沉浸于重点工作中的项目,除了定时写项目总结与培训。都快忘记写文章很抱歉。这次终于有了重新学习机会,应该多写。 长久一来也是思考如何让我们每天面对的工作内容更直观价值体现与量化。 …

    2015-04-13
  • 设计思考:如何传达APP中的隐藏手势?

    手势本是能够帮助用户更好的使用产品,但手势交互常被隐藏起来,因此用户如果没有发现隐藏手势,便失去了设计这些隐藏手势的功能作用。那么到底该如何向用户传达APP中的隐藏手势呢?看看这篇文章,或许你就知晓。

    2017-05-10
  • 阿西JsutinMind日记 之 幻灯片自动播放与左右滑动

    新项目为了给客户演示高保真的移动设备交互原型,故采用JustinMind工具。 国内资料很少,好在阿西使用过多款交互设计工具,大体都差不多,摸索着前行吧。。。   1.认识一下JsutinMind里的,这个动态面板理论上…

    2015-03-23