快好知 kuaihz

当我们在做原型时,我们在做什么?

我们如何看待工具?为什么学习工具是为了理解媒介?为何我们要做原型原型设计的原则是什么?为什么说好的思维是结构化的解构?欲知详情,请往下阅读。

利用

我们如何看待工具

有一种观点:设计师不要学太多的软件,精通一种就好了,更重要的是你的思维。

从个人技能上,这个说法没错,但它可能忽视的是,思维和工具,并不独立。因为所谓工具,其实是思维的被封装与具象化,而你使用工具的过程,便是对这思维的习得和解码。就像阅读从不是一个单方面行为,而是读者和作者思维的无声交流。你阅读书,书塑造你。

而你总不能只读一本书,只读一类书。

一个错觉是,我们在利用工具。更精确的说法是,我们和工具彼此利用。

人类的起源时期,石制的手斧是最早的常用武器。可始祖人类的手腕结构,很难提供足够的腕力来紧握一些小物体。进化的车轮下,一块新手骨出现了,这块叫第三掌骨的结构,给了这批新人类更强的握力、更精细的手部动作,也意味着对工具更精确的掌握,而这也意味着:进化的优势。

到底是我们根据双手的形状打造了工具,还是我们的双手进化成了可以握住工具的形态?

循环

学习工具是为了理解媒介

在一个新的媒介产生的初期,用于生产内容的工具是来源于旧媒介的。

许多视觉设计师习惯用Photoshop来进行网页和APP界面设计,但Photoshop的本质依然是一款位图处理软件,是以印刷为主导媒介的时代产生的主力工具。在这个阶段,新媒介的形态也会受到旧工具的影响。Photoshop作为WEB/APP设计主力的时代,也是拟物化设计最盛行的时代。

随着新媒介的发展,必然会出现适应新媒介的新生产工具

因此一款更加适应新媒介的工具的产生和流行就是一种必然。Sketch的兴起不是单纯的因为它“简洁易用”,而是其形态更贴近于信息时代媒介的本质属性。新工具的每一个功能从设计初始,就做好了和新媒介做无缝嫁接的准备。如今的设计师不再需要付出从位图到代码的转换成本,一个开源的插件就能将样式转化为CSS代码,尽管现在不够完美,但方向是可见的:工具的发展将不断减少中间步骤,趋近媒介本身的形态。

工具的不断产生会扩充媒介的外延,并最终产生新的媒介形态。

工具的进化不仅仅是适应媒介,同时也在塑造和扩充媒介。从Photoshop到Sketch,从拟物设计到从现在的Complexion Reduction,对材质的弃用、对颜色的克制、对图标的简化,工具的进化更替暗合着设计的风格迭代。

信息成为了设计主体后,动效设计就应运而生。如果说扁平化是在设计“信息”,那动效设计就是设计“信息的传递”。新的工具随之如雨后春笋,Origami、Framer、Form、Pixate、Flinto、Principe、Atomic……设计师从来没有过这么多的选择,而在这些选择背后,是更新的设计形态孕育在襁褓之中。

成为

为何我们要做原型

在交互设计师的工作流里,有一个重要部分叫“原型设计”。而当我们在做原型时,我们在做什么?

或许一开始你用纸和笔勾勒出网站或应用的轮廓,就像给一幢大厦搭好框架。接下来,你可能选择用Axure画好线框图,加上标注,唤之“低保真原型”。又或者再进一步,上色处理,添加动效,做个可以在屏幕上供人指指点点的,所谓“高保真原型”。

这一派观点认为,把原型做到高保真是没有必要的,视觉还是要做设计稿,前端还是要开发,你把原型做得再精准,都是徒然。

这种观点,代表了一种线性的工作流。但在实际的产品设计中,交互从不仅是一个中间环节,它的触角延伸到产品开发的每个阶段,牵一发而动全身,而原型设计也不是一个承上启下、可有可无的中间步骤。

而如果回到本质,原型,究竟是什么?

让我们做一个类似于“惠勒的龙”的思维实验:假设有这样一个原型,它做得如此逼真,如此完善,以致于用户在使用中,无法区分出原型和产品。那这个原型,和真正的产品,有区别吗?

原型的本质是描述真实的语言。越高保真的原型,就越逼近真实,而越高保真的原型工具,其描述方式(被封装的思维方式)就越接近真实事物的运行方式。

纸和笔的语言是“描述”,覆盖一切,但低效而不精确,且无法被机器理解。

Axure的语言是“控件”。页面由一个个控件组成,而控件则由其自身的样式、属性构成。每个控件的事件是独立的,如果你想让一个事件触发多个控件行为,或是多个控件共用一个属性,那Axure就会变得极其繁琐和不便。

Principle的语言是“状态”。设定一个起始态、一个终态、一个触发方式,剩下的就只是调整状态变化的参数。也因为核心语言的限制,2.0版本前的Principle,更适合做单一动效演示,而非全产品原型

Quartz composer的语言是“流动”。它将MVC设计模式中的“视图”、“模型”、“控制器”具象为一个个Patch,通过连线的方式将实现接口的连接和数据的流动,用乐高积木一般的方式,将事物的运行逻辑可视化。

Framer的语言是“对象”。将CoffeeScript作为一种中间语言,更简洁的语法,更清晰的面向对象编程,使得Framer成为了最灵活、最强大的原型工具

Webflow的语言是“成为”。可视化搭建,直接生成页面,设计即编程,设计及开发。工具总在尝试各种各样的方法,降低中间步骤,最终成为真实。

因此,当我们拿起工具,我们不仅仅是为了“使用”,更为了透过它们背后设计者的眼睛,寻找观察产品的不同角度。

而我们之所以要做原型,也不仅仅是为了模拟。模拟不是目的,模拟是探索事物运行规律的过程,最终目的是成为真实。

真实

一个原型设计原则

原型来理解真实产品的一个方法是,尝试做“真实原型”。

刚刚接触Axure的时候,经常要做一种叫胶囊型TAB/Capsule的控件。

当时对软件还不熟悉,采用的做法是,把这个控件做成了一个动态面板,然后通过点击不同区域来切换面板状态。

这样的效果,其观感和真实情况一样。但实现的方法,却不简洁优雅,更关键的是:这不真实。

为了实现一个切换效果,就创建了控件的一堆影分身,这不是这个世界的运行方式。

当你觉得麻烦到家时,一定是你哪走了弯路。

所以,我揣测设计者应该考虑到了这样的场景,就在Axure的面板里找来找去,然后发现了那个之前从未注意的功能:select group:通过创建一个按钮组,就可以解决切换问题。这样制作的控件,简洁清晰、易于复用,更重要的是,它是通过对控件的属性进行归纳和抽象来解决问题,而不是制造一个“看上去一样”的假象。这也是产品实际的运行逻辑。

当你需要新增固定内容时,你可以使用中继器而不是设置大量隐藏面板;当你的交互需要触发控件移动时,你可以用push交互来更改位置而不是手动设置坐标。这并不是什么《Axure:30天从入门到精通》中的习得的“常用小技巧”,而是逼迫自己使用一种更诚实的原型制作方式,跳出自己习惯的思维和习惯,去探索那些自己尚未发现的领域,这样才能在制作原型的过程中,洞察真实。

而真实是什么?

或许,真实就是简洁,是奥卡姆的剃刀,是如无必要勿增实体,是光会挑选的那条最短路径,是物质会降低到最低势能态,是用最小的资源去实现最大的效能。

分割

好的思维是结构化的解构

分割不是一种方法,但它是一切方法的本源。

任何一个复杂的事物,都可以被分割成为一个个最简单不可分割的单元。再复杂的逻辑,分割到最后,也不过了一些与非门、或非门、异或门的集合;所以再复杂的问题,经过分割后,也只不过是用一定的顺序,去解决一些简单的小问题。

在阿里云官网首页中,需要设计一个卡片的展开和收起状态。

一个不负责任的做法是,画出视觉稿,简单标注变化过程,之后扔给前端:说:“喏,把这个,变成这个。”

只要再往前走一步,你会发现这一句“变成”,可能就包含了十几个动效细节。

当你去尝试做一个“真实原型”时,你会发现“分割”的思维方式会帮你规避掉“虚假”,因为当你把原型分割到最小粒度时,你会发现你和开发面对的是同样的问题,而你的解决方式可能也是前端的方案。而那些你已经多次思考和调整的参数,就无缝地融入到了前端的开发进程中。

分割的另外一个好处,是帮你快速找到适合解决这个问题的工具

当我们讨论哪些工具更强大、更自由时,其实是在讨论它们的分割颗粒度。

把一个元素从页面的左边移到右边,axure给你提供了匀速、渐入渐出等预设动效,而principle则可以对缓动函数进行更精确的控制,本质上,是在对动效问题上,后者采用了更细的分割颗粒度。就好像给你一堆五颜六色的碎片,让你去完成一个拼图,那碎片切分越细、形状越全、色域越广,你最终的拼图就越可能接近目标。而你是永远无法用4个大方块拼成一个圆形的。

阿里云官网新首页里,有几处icon,在鼠标移入后,会发生一些有趣的运动。

当时决策要使用动效icon时,开发的时间只有两天,留给设计的时间更少。而关于这个icon应该怎么动,一开始却是一筹莫展的。我们只知道应该是一些互相连接的点和线,在两个形态之间互相转换,但大脑的空间想象力毕竟有限,语言的描述毕竟匮乏,如何快速地创造出11个这样的动效icon呢?

在快速分割问题后,发现这只是一个初始态和终态的问题,而中间的变化形态是难以凭空手绘或想象的。而解决始态终态问题的最快速的工具,是什么?

Keynote。

凭借最简单的神奇移动,我们快速产出了这些动效icon,本来预计要一天的工作,压缩到了两小时。

所以,分割不是方法,它本身不解决任何问题,它只是把问题分解成你可以解决的小问题,并帮你找到能解决它的方法。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:我们  我们词条  原型  原型词条  什么  什么词条  
原型

 Axure教程:导航栏如何根据滚...

本文给大家介绍的是导航栏如何根据滚动条同步选中,一起来看看~实现效果:选中导航栏中的菜单,窗口内容显示对应的内容;窗口滚动时,选中导航栏对应的菜单。创建导航栏(...(展开)

原型

 Axure RP 9 教程:模拟...

本篇文章利用原型设计工具为大家展示了AB双方猜拳时出现石头、剪刀或布的效果,希望对有需要的同学能有所帮助!效果:AB双方猜拳时出现石头、剪刀或布为等概率事件ma...(展开)