页面状态还是组件？到底什么才是交互的中心？

Posted 2020-08-21

随着信息行业的日益发展，软件的开发设计得到了更多人的重视，软件的原型设计也同样的变得原来越重要。我们目前使用的原型设计工具中，设计的模式普遍为两种，一种是以页面状态为中心来设置交互，比如Flinto for Mac和Principle。另一种模式则是以组件为中心，这种工具也很多，比如大家常用的Axure和Mockplus。那么这两种方式哪一种才是最好的呢？我们这里来做一下具体的分析。

一、以页面状态为中心

Flinto for Mac和Principle这类原型设计工具有一个共同点，那就是它们本身几乎不具有任何产生组件的能力，基本都是通过使用导入其它图形工具导出文件而获取组件和页面的。Flinto敏感的抓住了一个现象，那就是Sketch的崛起。它果断用一种可以说是与Sketch捆绑的方式开发了Flinto for Mac的版本。通过以页面状态为中心来设置交互，在状态罗列在页面后，简单的链接就会自动产生动画效果，而且动效还很逼真。这对于开发后期的UI演示来说，帮助是极大的。Principle的工作原理和Flinto for Mac基本相同。

这种以页面状态为中心设置的方式确实受到了很多人的追捧，但是问题也是确实存在的。当一个页面中有大量的组件需要实现交互的时候，这个依靠不同的页面状态来实现交互设置的方式就面临了一个巨大的挑战，那就是如何来显示大量的状态。Flinto和Principle的方法想必也是出于无奈，它们只能把各个层级按照某种顺序排列在地面上。

二、以组件为中心

Axure、Justinmind以及Mockplus这类原型设原型设计工具本身是具有产生组件的能力，很自然地，组件就成了这类工具软件设置交互的中心。多数的交互都是通过改变组件的属性来实现的，使得整个设计过程变得灵活起来。而也正是这种灵活的设计方式在软件开发的前期需求表述上可以真正的做到快捷、有效。

相信很多用户在升级了Axure新版本之后并没有收获原有的期待，不过Axure仍然是用户最多的原型设计工具。它的设计操作模式也为很多同类的工具提供了借鉴，甚至可以说，有很多原型设计工具是在模仿Axure。Mockplus在设置上通过高度可视化减少了设置步骤，在面对大量的交互设置时，仍然能够实现敏捷迅速。

然而，当交互的设置对象为组件而不是页面状态的时候，那么这个项目显示出来的整体篇幅就小了很多。Axure对于交互功能的支持更加丰富。Mockplus也不甘示弱，尤其是它对可视化程度的把握。它采用的拖拽方式是设计过程变得可视化，而设置结束之后链接线就会隐藏，所以即使页面内部的交互设置多达几十个，也并不会影响整体的视觉效果。

不管是以页面状态为中心，还是以组件为中心，最好的原型设计方式只存在与相对的人群之中。开发前期的需求表述方面，Axure和Mockplus很明显是占有优势的。而Flinto for Mac和Principle则在后期的演示中能够呈现出更好的效果。结合需求才能选择正确的工具。