AG真人赌博登录
电商学院

原型设计——线框图与原型的前世今生

作者: 来源: 时间:2019-12-08

本文作者JerrΔy Cao是UXPin的内容决策者,也是◈UXPin 这款在线线框图/原型工具的在线内容开Щ发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程,那么你可以下载UXPin精心制作的《原型设计终极指南》(英文版)。这篇文章会系统为你介绍线框图和原型的发展历程,了解它们在不同历史背景下的发展,能帮你在未来设计更优秀实用的线框图和原型。通过线框图和原型的发展历程,你还能从侧面了解用户体验设计的过去、现在〗和未来。

设计方法的变迁直接影响了原型和线框图在整个设计流程中的位置,所以,在开始聊原型之前,我们先温故一下现在的设计方法。

现在:当前的设计方法

设计走到今天,│┃最流行的两种设计方法是Lean UX和Agile UX,也就是“精益UX”和“敏捷UX”。虽然两者听起来很接近,但是两种设计方法从设计过程到涉及的范围都截然不同。精益UX更接近于一种业务︵运营方式,而敏捷用户体验设计则接近一个项目的执行方法。

曾经,设计师只需要将设计好的内容打包发给开发者,然后丢下一句“祝你好运”就可以潇洒地收钱走人了,可惜这样的时代已经一去不复返了。著ξ名的网页设计师、博客写手Brad Fros∏t 认为,随着屏幕和设备的碎片化,曾经的“PSD时代”已经彻底结束了,因为这种打包PSD交付的方式,属于典型的瀑布式开发流程(瀑布模型),已经无法应对当前市场的需求了。正是因为设计方法的缺失,精益设计和敏捷设计这两种方法的重要性就体现出来了。尽管两种设计方法有着不少差异,但是普遍都认为两种设计方法应该合理地结合起来。UXPin 的CEO Marcin Treder 曾经撰文对比过两种设计方法,仔细看下两种的差异,你会发现两种方法与其说是对抗,不如说是互补。

1. 敏捷UX

敏捷宣言的发布让这种新的开发方法展现在大家面前,而敏捷UX则将设计师和开发者统一到敏捷开发过程中来。通常,在这个过程中大家会遵循下面的原则:

人和交互重于过程和工具

可以工作的软件 重于求全而完备的文档

客户协作重于合同谈判

随时应对变化重于遵循计划

目前,上面的几条规则被认为是“┎数字产品开发的黄金准则”。

尽管敏ω捷方法并不是直接作用于用户体验设计,但是它确实会提升基于合作的设计项目的运作方式。在《原型设计终极指南》中我们曾探讨过,就像Design Studio和Cross-Functional Pairing 这样的案例,敏捷UX让设计师能用有意义的交互/动效替换文档说明。另外,敏捷UX让设计师、Π开发者和产品经理的沟通更加高效直观。

2. 精益UX

基于最初的精益创业模式的方法论,通常会认为一家公司所发布的产品,必须在发布前通过研究,确定它的市场定位符合特定的需求,并且尽可能快地发布、推广,将浪费降低到最低的程度,确保企业和产品的生存。精益UX更多的是专注于将产品推向市场这个过程,所以借助精益UX来设计产品过程中会发现,发布产品仅仅只是一个开始。

精益UX的一些核心原则:

专注解Ⅰ决问题,验证客户的假想(“走出办公室”)

放出能解决用户问题的最小可能产品

协作快速完成原型(“学习闭环”)

基于完备的线框图和规格表快速敏捷地制作原型

在被各类产品充斥的市场中,精益UX几乎成为了自家产品生存的救生艇。

3、如何让两者结合到一起♀

敏捷UX更关注的问题是“如何进行产品设计”,而精益UX则更专注于“为什么要这样设计”。敏捷UX可以帮助设计师改造过时的设计和协作方法,而精益UX则指明了研究产品和衡量产品品质的方法。

精益UX会建议你在设计过程中借助A/B测试不断针对产品进行研究,而不是仅在设计原型之前做研究,同理,客户回访和可用性测试也需要在设计和开发过程中不断进行。

由于精益UX是一种整体的商业策略,所以你仍然可以使用敏捷UX的方法来构建产品。团队头脑风暴,绘制概念图和需求分析,建立快速原型,并对其进行测试。而Spotify也正是这么做的,我们在《最小可用产品设计指南》中也对这一方法有详细的介绍。

两种设°゜计方法还是有不少共同点的:它们都强调协⊿作而非文档记录,强调行之有效的冲刺而非∽雄心勃勃的时间表安排。

事实上,精益UX之父Jeff Gothelf 曾经说过,精益UX灵感“来自于精益模式和敏捷开发理论”,所以对于产品和设计而言,选择精益UX还是敏捷UX并不重要,最核心的一点是“巧妙地工作,而非长时间加班”,这是两者的共同点,也是推动快速原型设计成为主流的重要思想。

现状:当今的原型设计

虽然绝大多数的人都是原型的坚定支持者,但是越来越多的设计师开始怀疑静态线框图设计的实际价值。越来越多的设计团队开始合并相框图和原型设计,借此来绕过线框图设计阶段,并尽早进入交互设计阶段。

其实这和近几年流行开的设计新工具有很大的关系,如果设计好的线框图只需要多点⊕击几下就能生成原型图和视觉稿╬,那么谁会强行将其分为2个阶段呢?这个话题在Quora上已经被讨论得很多了,有些专家还提到过“互动式线框图”(其实也可以说是低保真原型)的好处,他们所说的理由各不相同,但是大抵都认同了它“一次满足两个愿望”的优势,合理结合了原型和线框图。

所以,考虑到这一点,当前我们所说的原型说的应该就是像素精准可交互的视觉稿了。在不久的将来,我们会看到低保真·。原型会逐渐取代静态线框图,这将是设计发展史上的又一个里程碑,而高保真原型则会继续服务于产品演示和可用性测试。

过去:原型发展史

原型设计和工具有着极为密切的联系,这也是为什么当你回顾原型设计的发展历程的时候,需要追溯到上世纪70年代。有趣的是,原型设计随着电脑技术的高速发展,也进行着高密度的迭代升级,接下来我会列出塑造这个信息化时代的大事件,它们也是影响原型设计的重要里▷程碑。

1970——瀑布模型成为软件开发领域的主流

1975——信息架构的重要性被承认,并开始发展

1980——由于编程技术的发展,最早的数字化原型(类似流程图)出现了

1985——纸质原型开始出现,被用于可用性测试★和概念分享

1985——瀑布模型被调整修改,并纳入迭代开发和增量开¤发中(IID)

1986——第一款可视化设计软件被开发出来

1986——Adobe IllustratⅫor 问世

1987——微软的PowerPoint问世(应该是用于苹果家的Macintosh系列的电脑)

1988——软件开发的螺旋模型问世并推广

1990——Adobe Photoshop问世(它和电影发展史息息相关)

1991——IBM 推出用于软件开发的“软件快速开发”(RAD)理论

1992——微软 Visio问世(原本名为Shapeware,最终在2000年为微软所收购)

1995——案例展示和UI设计上布局变得更加全面

2000——为了迎合日益增长的需求,原型设计软件出∩现了

2000——著名软件Omnigraffle问世

2001——《敏捷宣言》发布,这也是后来敏捷UX运动的起点

2003——Axure 出现,这是目前最主流的原型设计软件

2003——iRise发布

2005——基于网络的原型(SaaS)越来越普遍,这也为低保真原型设计类APP打开了一扇门,也成为了整合协作与产品管理的APP诞生的契机

2005——╜ MockupScreens 问世

2006—— Gliffy 诞∏生

2006—— Cowboy coding,这是一套针对软件开发的编程与修改的理论,这套由谷歌所推行的“20%时间”策略指的是,允许程δ序员将一小部分工作时间划分出来做他们自己想做的任何事情。

2007—— Jumpchart 诞生

2008—— Balsamiq 问世

2008—— Protoshare 发布

2008—— Justinmind 问世

2008——创业公司之间的激烈竞争导致了精益UX运动

2010——技术发展促使无代码高保真SaaS原型的诞生

2011——UXPin的诞生(纸质、移动端、网页、响应式)

2011——InVision的问世(移动端,网页)

2012——Flinto(移动端)

2012——POP出现(针对移动端的纸质原型)

2013——Marvel (移动端,网页)

未来:属于原型的时代

我们对于未来的猜测始于我们对于现有原型和线框图的讨论:线框图卐和原型以低保真原型的形式结合到一起,同时兼具了大纲和组织的功能。

我们将2014年称为“交互设计工具之年”,并为此专门撰文。这篇文章当中,Bloc的设计师 Emelyn Baker 解释了这次交互设计工具社区爆发式增长的原因,并且列♀举出了那些最优秀的工具,其中包括了UXPin。阅读完这篇文章你会发现这类工具多得令人惊讶,而且其中绝大多数都界限模糊,功能游离于线框图、原型和视觉稿之间,其实你也可以从中窥↗见未来。

老的设计方法逐渐被新的工具和新的思路所替代,静态设计和瀑布模型也将成为故纸堆б中的记录。新的设计工具裹挟着全新的设计方法带着我们走向新时代。正如同我们在《原型设计终极〇指南》中所提及的那样,新一轮的设计工具已经带来了两种至关重要的更新:

1、快速原型设计——在未来,你会在原型设计过程中碰到更多的原型设计思路、Ч细化方式、频率变化,这些变化会提升并改进早期设计阶段的功能和效果。考虑到现在许多新兴的设计工具★已经支持全方位的原型设计ω(从‖静态到动态都支持了),所以你已经没有借口不去探索和练习快速原型设计了。

2、非邮件式协作——越来越多的是原型设计工具已经具备在线通讯和协作的功能了,这有效的缩短了设计师、开发者和相关人员之间的距离。随着大家对于早期设计流程缺陷的认知,相关从业者会更加深入的协作、交流,并且相关工具会越来越普及。(UXPi|︴()〔〕n和InVision就是典型)

讨论原型设计的未来的时候,另外一个不得不提及的的热门话题是“microinteractions”,也就是“微交互”。简单的说,一个典型的为交互用例通常是源自于单个目的——比如解锁手机——基于这一目标任务所需的触发机制、规则和反馈就构成了一个微交互。得益于新的原型设计工具,微交互将设计重心从╱╲整体个产品于用户体验转移到单个动作的用户体验和过程上来,让产品细节设计上升到一个新的高度成为了可能。

微交互背后有一整套完整的逻辑。每个产品UI的细节(╯╰单۩个细节,而非所有细节的总和)是让不同产品拉开距离的重要因素,事实上很多用户会因为单个细节而爱上某个APP。FastCoDesign的设计类文章撰稿人 John Pavlus≯ 将微交互称为“用户体验设计的未来”,这从侧面反应了这一新领域的认可度。微交互是交互设计的放大镜,使得那些令人愉悦难忘的细节成为关▅▆注的焦点。而为了将这些提升产品外观、感受的瞬间完善出来,原型设计自然就成了打造完美细节的重要基石。

结语

向前发展,不是进化,就是灭亡。能否生存下去,大多取决于๑对于先兆的正确解读和前期的适应与否。线框图仍然有它的用〒武之地,但是现在的线框图更多是被是作为原型设计的蓝图,这Ⅴ不同于它在5年前的地位,那时候的线框图是被是作为设计々过程中重要的交付内容,10年前的线框图的重要性更高,它的重要性几乎和产品本身等同。

而原型设计在过去十几年中的变化也是明显的,从早期∮包含小段代码的产品化的可交互原型,到现如今可以快速建立并用于用户体验测试的快速原型,变化可谓是翻天覆地。通过迭代,原型直接替我们一次性克服了对设计和代码的恐惧。在这样的设定之下,我们有理由拥抱现在的原型,和它的未来。同样的,我们也理当更加紧密的协作,强调早期交互的重要性,将灵活迭代推行下去。

备注▓:IxD是交互设计缩写,UX是用户体验缩写。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源; 2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任; 3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 人大商学院院长毛基业“金牛角”致辞:新经...

  • 制造业成美国经济"软肋&quo...

  • 制造业成美国经济"软肋&quo...

  • 戈恩不是藏身乐器盒逃亡的?监控拍到他离开...

  • 皮尤研究中心:调查显示中国将超越美国成为...

  • 联合国说,这世界还有一半人不能上网

  • 波士顿咨询:金融机构如何驾驭大数据?(附...

  • 谷歌独家数据:海外手游玩家市场观测