Prototyping is critical part of UX process. Obviously, prototyping tools play significant roles, and we have seen various software programs throughout the past decades. Among these tools, I would like to focus on Adobe Flash (now called Animate), and share what I learned from using it for years, and why I think a lesson from Flash holds a future of prototyping. Let me dive in.

原型制作是UX流程的关键部分。 显然，原型制作工具发挥着重要作用，并且在过去的几十年中，我们看到了各种软件程序。 在这些工具中，我想专注于Adobe Flash(现在称为Animate)，并分享我多年来使用它所学到的知识，以及为什么我认为从Flash中学到的东西对原型技术的未来具有启发性。 让我潜入。

现代原型制作的历史 (History of modern-day prototyping)

When we think about the future of prototyping, it’s worth looking back in a history. A chart below shows major prototyping and authoring tools from 1987 to 2020. On the bottom, I added key product/service launches that impacted the world, which provides an overall historical context. The list is not exhaustive, but you get the idea.

当我们考虑原型的未来时，值得回顾一下历史。 下图显示了从1987年到2020年的主要原型制作和创作工具。在底部，我添加了影响整个世界的关键产品/服务发布，从而提供了整个历史背景。 该列表并不详尽，但是您可以理解。

The rise and fall of prototyping tools have always been heavily influenced by the underlying technology trends, which can be divided roughly into 4 eras; 1) Multimedia Era, 2) Flash Era, 3) Web 2.0 Era, and 4) Mobile Era.

原型工具的兴衰始终受到基础技术趋势的严重影响，技术趋势可以大致分为四个时代。 1)多媒体时代，2)Flash时代，3)Web 2.0时代和4)移动时代。

Strictly speaking, Microsoft Powerpoint, Adobe Photoshop, Illustrator, After Effects, PDF are not prototyping tools. But in early days (and even today), designers used/use these tools to create simple prototypes. Prototyping can be done using any tools, including hand-drawn sketches on paper, after all.

严格来说，Microsoft Powerpoint，Adobe Photoshop，Illustrator，After Effects，PDF并不是原型工具。 但是在早期(甚至今天)，设计师使用/使用这些工具来创建简单的原型。 毕竟，可以使用任何工具进行原型制作，包括在纸上绘制手绘草图。

Processing never took part of the mainstream UX prototyping, but it created a distinctive, interactive/generative art community, which gave birth to Arduino, a popular hardware prototyping platform.

处理从未成为主流UX原型的一部分，但它创建了一个独特的交互式/生成艺术社区，从而催生了Arduino (一种流行的硬件原型平台)。

Among these, Flash launched in 1996 by Macromedia, which later acquired by Adobe in 2005.

其中，Flash由Macromedia于1996年推出，后来于2005年被Adobe收购。

回顾历史 (Flash in a historical context)

In early 90s, When the internet went mainstream with the birth and wide adoption of web browsers, the basic HTML was extremely limited. It was Flash that came to rescue this limited environment of early web by enabling various rich interactions within its embedded SWF file in an HTML page. Since its launch in 1996, Flash quickly became the center of rich internet web development platform. During mid 90s to early 2000s, Flash was dominant as a prototyping tool as well as a web development platform. Many Flash-based games flourished. Even the initial YouTube on PC web was Flash-based, until Google switched to HTML5 video in 2015.

在90年代初，随着互联网随着浏览器的诞生和广泛采用而成为主流，基本HTML变得极为有限。 Flash通过在HTML页面的嵌入式SWF文件中启用各种丰富的交互来挽救早期网络的有限环境。 自1996年推出以来，FlashSwift成为富互联网Web开发平台的中心。 在90年代中期至2000年代初期，Flash成为原型工具和Web开发平台的主导。 许多基于Flash的游戏蓬勃发展。 甚至在PC网络上最初的YouTube都是基于Flash的，直到Google在2015年切换到HTML5视频。

During early 2000s all the way up to 2019, I lived with Flash. I literally created hundreds of Flash prototypes. During these days, I worked on various advanced concepts too, and Flash was perfect for that.

在2000年代初期直到2019年，我一直生活在Flash中。 我确实创建了数百个Flash原型。 在这些日子里，我也从事各种高级概念的工作，Flash对此非常适合。

It was true that Flash had many technical, implementation problems such as sluggish performance, poor memory management, being buggy, unable to bookmark specific “page” inside Flash, a browser plugin always had to be updated, and so on.

确实，Flash存在许多技术上，实现上的问题，例如性能低下，内存管理不善，存在故障，无法在Flash内部添加特定的“页面”书签，必须始终更新浏览器插件等等。

However, from a designer’s perspective, Flash offered an almost ideal environment for several reasons.

但是，从设计人员的角度来看，由于多种原因，Flash提供了几乎理想的环境。

Flash几乎毫不费力地占用了所有媒体 (Flash took almost any media effortlessly)

So what was so special about Flash? Flash was extremely flexible and forgiving in terms of how you create and what you could create. It took almost any media effortlessly including text, images, vector graphics, videos and audio files. This was huge at the time when software programs were siloed based on different media types. Whatever media types that you brought in to a stage in Flash, you could handle pretty much the same way to scale, group, animate, and add interactivity. Flash even had a camera object, that you could manipulate almost the same way as other objects.

那么Flash有什么特别之处？ Flash在创建方式和可以创建的内容方面极为灵活且宽容。 几乎所有媒体都可以轻松完成，包括文本，图像，矢量图形，视频和音频文件。 当基于不同的媒体类型隔离软件程序时，这是巨大的。 无论您将什么媒体类型带入Flash舞台，都可以使用几乎相同的方式来缩放，分组，设置动画和添加交互性。 Flash甚至有一个相机对象，您可以使用与其他对象几乎相同的方式进行操作。

In a nutshell, Flash gave designers a freedom to push their creativity to a whole new level which was not possible in such an easy way before. During this time, many creative and inspirational works came out from various designers’ experiments such as Mono*crafts above.

简而言之，Flash使设计师可以自由地将他们的创造力提高到一个全新的水平，这是以前如此简单的方式无法实现的。 在这段时间里，许多创意和鼓舞人心的作品都来自于各种设计师的实验，例如上面的Mono * crafts。

嵌套时间表 (Nested timelines)

One of the most powerful features that Flash had was its nested timelines. This was essentially object-oriented programming done visually. Micro-interaction animations could all be embedded within each object on a page. Although it could get complicated, this was very simple and straightforward model for designers to mentally understand and work with.

Flash具有的最强大功能之一就是其嵌套的时间轴。 这实质上是可视化的面向对象编程。 微交互动画都可以嵌入到页面上的每个对象中。 尽管它可能会变得复杂，但是对于设计人员来说，这是一个非常简单明了的模型，可以使他们从心理上理解和使用。

通过基本命令控制多个时间线 (Controlling multiple timelines via basic commands)

These multiple timelines typically needed just the basic controls such as play, stop, loop/etc. Even if you were a designer with no coding experience, these were easy enough to handle. For example, “stop();” to stop an animation, “gotoAndStop(1);” to rewind the “playhead” to the beginning of the animation and stop, or “gotoAndPlay(1);” to keep looping the animation. As seen in the screenshot above, all you had to do was to add a desired line of command on the last frame of the animation timeline.

这些多个时间轴通常只需要基本的控件，例如播放，停止，循环等。 即使您是没有编码经验的设计师，这些也很容易处理。 例如，“ stop();” 停止动画“ gotoAndStop(1);” 将“播放头”后退到动画的开头并停止，或“ gotoAndPlay(1);” 保持循环播放动画。 如上面的屏幕快照所示，您要做的就是在动画时间轴的最后一帧上添加所需的命令行。

Above shows another example of adding an interactivity to a Movie Clip in ActionScript 3.0. Now ActionScript 3.0 became more complex compared to the original ActionScript 1.0. With ActionScript 1.0 or 2.0, you could add these scripts directly onto a Movie Clip without having to write a custom function. These interactivity allowed designers to intuitively play and stop animations, and jump between different screens with ease. Most of the time, this was more than enough to build quite sophisticated prototypes.

上面显示了在ActionScript 3.0中向影片剪辑添加交互性的另一个示例。 现在，与原始ActionScript 1.0相比，ActionScript 3.0变得更加复杂。 使用ActionScript 1.0或2.0，可以将这些脚本直接添加到影片剪辑中，而无需编写自定义功能。 这些互动性使设计师能够直观地播放和停止动画，并轻松地在不同屏幕之间跳转。 大多数时候，这足以构建相当复杂的原型。

动画默认是烘焙的 (Animation was baked in by default)

Because Flash initially started as a vector graphic animation software, animation capability was always baked in throughout the program by default. Designers were able to animate pretty much everything in Flash, and this was huge in the time of early web with static pages.

由于Flash最初是作为矢量图形动画软件启动的，因此默认情况下始终在整个程序中引入动画功能。 设计人员能够为Flash中的几乎所有内容设置动画，而在早期使用静态页面进行Web的时代这是巨大的。

Flash gave designers a fresh, blank canvas to play around with virtually any media, with an ability to animate objects and add interactivity with ease. Who doesn’t want that?

Flash为设计师提供了一块新鲜的空白画布，几乎可以在任何媒体上播放，并且可以为对象设置动画并轻松添加交互性。 谁不想要那个？

混合图形和编码方法 (Blending graphical vs. coding approach)

Another unique aspect of Flash was its ability to blend graphical approach and coding approach. As mentioned earlier, if you were a designer and wanted to work only through graphical user interfaces, you could absolutely do so by drawing an object and create a tween animation on a timeline. You needed to add basic ActionScript to enable interactivity mentioned above, but that could be minimum.

Flash的另一个独特之处是它能够融合图形方法和编码方法。 如前所述，如果您是设计师，并且只想通过图形用户界面进行工作，则可以通过绘制对象并在时间轴上创建补间动画来绝对地做到这一点。 您需要添加基本的ActionScript才能启用上述交互功能，但这可能是最小的。

If you were an experienced designer with some coding knowledge, you could write your own ActionScript functions to enable advanced interactions on top of what you designed visually and animated along the timeline. You could combine tween animation with code-based animation. You could combine static objects in a library with a dynamically created ActionScript objects. The choice was yours, whether the ratio of graphic approach vs. coding was 80/ 20, 50/50, or 20/80, whichever was right for you.

如果您是一位经验丰富的设计人员，并且具有一定的编码知识，则可以编写自己的ActionScript函数，以在沿时间轴进行视觉和动画设计的基础上实现高级交互。 您可以将补间动画与基于代码的动画相结合。 您可以将库中的静态对象与动态创建的ActionScript对象结合在一起。 图形选择与编码的比例是80 / 20、50 / 50还是20/80，这是最适合您的选择。

If you wanted to go 100% with code without drawing anything graphically, you could do that too. Code-savvy designers or engineers were able to define everything in ActionScript without creating any Movie Clips manually on stage, using either Flash or Flash Builder.

如果您想100％使用代码而不用图形绘制任何内容，也可以这样做。 精通代码的设计人员或工程师可以使用Flash或Flash Builder在ActionScript中定义所有内容，而无需在舞台上手动创建任何影片剪辑。

This was fantastic for designers because there was always a way around if you bump into coding problems or tween animation problems for example. Designers didn’t want to spend too much time debugging their half-ass codes, because perfecting a code in a prototype was never their goals. They could easily switch to tween animation to get around. Or if tween animations fell short for what you envisioned, adding a bit of ActionScript could solve that problem.

这对于设计人员来说是很棒的，因为如果遇到编码问题或补间动画问题，总会有解决方法。 设计人员不想花太多时间调试半屁股代码，因为在原型中完善代码从来都不是他们的目标。 他们可以轻松切换到补间动画来解决问题。 或者，如果补间动画不符合您的预期，则添加一些ActionScript可以解决该问题。

设计人员和工程师可以无缝协作的单一平台 (Single platform where designers and engineers can work together seamlessly)

Flash provided a unique platform that allowed both designers and engineers to work on exactly the same platform. This was great because designers could create visuals, animations and interactions in Flash, and delivered Flash files to engineers. Engineers who received Flash files did not have to reproduce the front-end, which is the typical workflow in today’s web and app development. All they had to do was to add ActionScript to complete the product. In this workflow, the handoff from a designer to an engineer was perfectly executed in form of a Flash file (FLA), without the designer having to produce additional deliverables such as bitmap assets and design specifications separately.

Flash提供了一个独特的平台，使设计人员和工程师都可以在完全相同的平台上工作。 这很棒，因为设计人员可以在Flash中创建视觉效果，动画和交互，并将Flash文件交付给工程师。 接收Flash文件的工程师不必重现前端，这是当今Web和应用程序开发中的典型工作流程。 他们要做的就是添加ActionScript来完成产品。 在此工作流程中，以Flash文件(FLA)的形式完美地执行了从设计者到工程师的移交，而设计者不必分别产生其他可交付成果，例如位图资产和设计规范。

When the world transitioned to HTML5 and mobile, we lost this flexibility that designers and engineers used to have on Flash platform.

当世界过渡到HTML5和移动设备时，我们失去了设计人员和工程师过去在Flash平台上拥有的灵活性。

Web 2.0和Axure (Web 2.0 and Axure)

In mid 2000s, Web 2.0 dramatically changed how we experience the internet from static to dynamic without having to rely on plugins like Flash. Facebook, Gmail, Twitter, Skype, Google Map, YouTube were all born around this time and became widely adopted by the mainstream internet users. Wordpress also launched, and automated content management of many websites which used to be manually maintained before.

在2000年代中期，Web 2.0极大地改变了我们从静态到动态的互联网体验方式，而不必依赖Flash之类的插件。 Facebook，Gmail，Twitter，Skype，Google Map，YouTube都在这个时期诞生，并被主流互联网用户广泛采用。 Wordpress还启动了许多网站的自动化内容管理，这些网站以前都是手动维护的。

Axure launched in 2003 to address emerging needs of designing Web 2.0 applications. In a way, Axure attempted to have a Flash-like capability via Interaction Editor without having to code. While Axure’s Interaction Editor is well designed and powerful, it somehow feels a bit too cumbersome to build complex interactions just by clicking and selecting every single event and action, compared to defining those in Flash ActionScript.

Axure于2003年推出，旨在满足设计Web 2.0应用程序的新兴需求。 在某种程度上，Axure尝试通过Interaction Editor拥有类似Flash的功能，而无需编写代码。 尽管Axure的交互编辑器经过精心设计和强大，但与在Flash ActionScript中进行定义相比，仅通过单击并选择每个事件和操作，以某种方式构建复杂的交互就显得有些麻烦。

Axure was lot lighter than Flash, and published a prototype in native HTML5 without a need for any plugins. Axure shipped with it’s cloud service for free, so designers didn’t have to worry about setting up their own web server to host their prototypes. It was all included. Today, cloud share feature is a must for all the prototyping tools.

Axure比Flash轻得多，并且不需要任何插件就可以使用本机HTML5发布原型。 Axure免费提供了其云服务，因此设计人员不必担心设置自己的Web服务器来托管其原型。 全部包括在内。 如今，云共享功能已成为所有原型工具所必需的。

世界变得以移动为中心 (World became mobile-centric)

When iPhone launched in 2007, Apple did not support Flash because Flash was too heavy on mobile. More details on why Apple dropped Flash was described in “Thoughts on Flash” written by Steve Jobs in 2010 on Apple’s website. In 2008, Apple App Store and Google Play launched, and the center of the internet shifted from desktop to mobile. Today, the internet usage on mobile accounts for 53.3% of the total internet traffic, surpassing desktop according to BroadbandSearch.

当iPhone在2007年推出时，Apple不支持Flash，因为Flash在移动设备上过于繁琐。 史蒂夫·乔布斯(Steve Jobs)在2010年在苹果网站上撰写的“ 关于Flash的想法 ”中介绍了有关苹果为何放弃Flash的更多细节。 2008年，Apple App Store和Google Play推出了，互联网的中心也从台式机转移到了移动终端。 如今，根据BroadbandSearch的数据 ，移动互联网的使用量已占互联网总流量的53.3％，已超过台式机。

Because Axure started as a tool to primarily design desktop web applications, it fell short in designing mobile apps. As mobile started to take over the world, many new tools emerged with mobile-first approach. Wide adoption of mobile phones also raised a bar for customers’ expectations on user experiences on mobile devices and even desktop web applications.

由于Axure最初是主要用于设计桌面Web应用程序的工具，因此在设计移动应用程序方面达不到要求。 随着移动开始占领世界，许多新工具以移动优先的方式出现了。 移动电话的广泛采用也提高了客户对移动设备甚至台式机Web应用程序上用户体验的期望的门槛。

当今的原型制作工具 (Today’s prototyping tools)

Today, UX designers are tasked to design, test and iterate UX concepts with much shorter timeframe than before. Modern tools are offering easy + smart features to keep up with demands for these fast iterative processes. This is where we are, with Sketch, Craft, Balsamiq, InVision Studio, Principle, Adobe XD, Figma and Framer X, and more.

今天，UX设计人员的任务是以比以前更短的时间框架设计，测试和迭代UX概念。 现代工具提供了便捷的智能功能，可以满足对这些快速迭代过程的需求。 通过Sketch，Craft，Balsamiq，InVision Studio，Principle，Adobe XD，Figma和Framer X等，我们就在这里。

Recent trends in prototyping tools are ”stitch screens with wires” interaction model, accompanied by auto-animate transitions that smartly animate transitions between two screens connected.

原型工具的最新趋势是“带有线的缝合屏幕”交互模型，并伴随自动动画过渡，该过渡可以对连接的两个屏幕之间的过渡进行智能化动画处理。

Various smart features are also developed such as Smart Layout in Sketch, Duplicate and Data features in Craft, Repeat Grid in Adobe XD, Stack feature in Framer X, all of which automate otherwise mundane repetitive tasks beautifully. All these make prototyping super-fast and intuitive for non-code-savvy UX designers.

还开发了各种智能功能，例如Sketch中的 Smart Layout， Craft中的重复和数据功能， Adobe XD中的 Repeat Grid， Framer X中的 Stack功能，所有这些功能都能很好地自动完成否则重复的繁琐任务。 所有这些使原型设计对于非代码精通的UX设计人员而言超级快速且直观。

While these are great accomplishments, many of these are geared towards increased productivity for most typical design works. Somehow I feel these are optimized too much towards today’s mobile standards and expectations, leaving very little space for designers to explore beyond those standards.

虽然这些成就是巨大的成就，但许多成就都旨在提高大多数典型设计工作的生产率。 不知何故，我觉得这些东西已经对当今的移动标准和期望进行了太多优化，从而给设计人员留下了探索这些标准之外的空间。

This is probably due to what the market demands. Every company and startup is aware of the importance of user experience today. Everyone wants to create its own website and app, as fast as possible. This fast-paced market demand pushes UX designers to work faster. And with today’s expectation on user-centered design practice, everything is moving towards similar directions, similar designs, and similar patterns, because that’s what users are used to and familiar with.

这可能是由于市场需求。 每个公司和初创企业都意识到当今用户体验的重要性。 每个人都希望尽快创建自己的网站和应用程序。 这种快速发展的市场需求促使UX设计人员更快地工作。 鉴于当今对以用户为中心的设计实践的期望，所有事情都朝着相似的方向，相似的设计和相似的模式发展，因为这是用户习惯并熟悉的。

There’s nothing wrong with this from a pure user-centered design perspective. But at the same time, this concerns me. What happened to out of the box thinking, pushing the envelope, experimenting with new ideas, sailing to the unknown?

从纯粹的以用户为中心的设计角度来看，这没有错。 但是与此同时，这令我感到担忧。 开箱即用的思维，推波助澜，尝试新想法，航行到未知世界发生了什么？

As much as UX designer’s job is to solve users problems and create delightful user experiences for its users, it should not be JUST listening to what users have to say and simply implement what was heard in form of conventional patterns and standard designs.

尽管UX设计师的工作是解决用户问题并为其用户创造愉悦的用户体验，但它不只是听用户说什么而只是简单地以传统模式和标准设计的形式实现听到的内容。

Based on users’ voices and observations, UX designer’s job is to imagine and create a better future. This is where more of a free-flowing imagination and creativity need to come in. And prototyping tools should accommodate this as friction-free as possible. Many of today’s prototyping tools don’t seem to put weight on this aspect.

基于用户的声音和观察，UX设计师的工作是想象并创造更好的未来。 这是需要更多自由流动的想象力和创造力的地方。原型制作工具应尽可能避免摩擦。 当今许多原型工具似乎都没有在这方面加重。

面向未来的新实验 (New experiments towards the future)

But I do see a few interesting experiments happening towards pushing an envelope. For example, Framer X has an online store feature where users can upload and download custom components. Framer X also has pretty powerful code-based extensibility such as Frame Motion. It also has an ambitious vision to take care of handoff from a designer to an engineer.

但是我确实看到了一些推动信封发展的有趣实验。 例如， Framer X具有在线商店功能，用户可以在其中上载和下载自定义组件。 Framer X还具有相当强大的基于代码的可扩展性，例如Frame Motion 。 它还具有雄心勃勃的愿景，可以处理从设计师到工程师的交接。

Adobe XD’s voice interaction capability is quite impressive too, which you don’t see anywhere else. Voice interaction has already become part of our daily lives, and its presence will only grow further.

Adobe XD的语音交互功能也非常出色，在其他任何地方都看不到。 语音交互已经成为我们日常生活的一部分，并且它的存在只会进一步增长。

I really hope that the next evolution of prototyping tools explore more free-form flexibility so that designers can experiment wild ideas and push their creative limits all the way to come up with unexpected, innovative and groundbreaking concepts.

我真的希望原型工具的下一个发展能够探索更多自由形式的灵活性，以便设计人员可以尝试各种荒谬的想法，并不断突破自己的创作极​​限，以提出意想不到的，创新和突破性的概念。

From this perspective, lessons from Flash still holds super valuable. What Flash did in the early days of the internet truly inspired many designers and helped them push their creativity.

从这个角度来看，Flash的教训仍然具有极其重要的意义。 Flash在互联网初期所做的工作确实启发了许多设计师，并帮助他们提高了创造力。

I look forward to a world where experimenting with wild new concepts becomes a breeze for designers AND engineers!

我期待着一个世界，对于设计师和工程师来说，尝试全新的概念变得轻而易举！

I also look forward to a world where a prototype created by a designer IS the front-end of the final product, where engineers plug in their code to turn it into a real product. Engineers should not have to reproduce the front-end already created by designers, and designers should not have to create additional deliverables such as design specifications and bitmap assets for engineers to reproduce their designs.

我也期待着一个世界，在这个世界上，设计师创建的原型是最终产品的前端，工程师可以插入他们的代码以将其变成真正的产品。 工程师不必复制设计师已经创建的前端，设计师也不必为工程师复制其他可交付成果，例如设计规范和位图资产。