it-swarm.cn

您如何在模型中定义交互?

我既是程序员又是UX/UI设计人员。在设计事物时,通常会制作出界面外观的静态图像。问题是,大多数UI都不是静态的。它们根据用户输入进行更改和调整大小。当然,我确切地知道接口应如何响应此类输入,但是对于大型项目,客户端和其他程序员必须能够采用我的模型并理解交互。那么,如何在模型中显示设计如何交互并响应用户呢?

17
Jonathan Dumaine

描述交互的最佳方法是使用交互原型对其进行建模。

有各种原型制作工具,例如Axure或我们正在开发的原型工具Handcraft。无论使用哪一种,关键是它们使您可以向客户端,同级等显示与模型中的元素进行交互时发生的情况。但是,使用原型显示交互性会比使用可点击的模型获得更好的结果。可以使用模型来显示基本状态的变化,并且在设计过程中有一个阶段可以用到它,但是,有些事情很难用静态图像来描述,例如动画(在某些情况下是至关重要的),响应能力(交互性的关键要素),对于本机或Web应用程序,则是使用该特定平台的“感觉”。

7signals 讨论了很多有关如何跳过线框并直接使用HTML的问题。几个月前,我写了 一篇博客文章 关于他们发表的一篇演讲,描述了他们的过程。

但是,如果您想丰富静态模型, Jakub Linowski的交互式素描符号 是类似于UML的描述交互的好方法:

interactive sketching notation

参见 PSD与HTML样机的优点/缺点 进行类似的讨论:

如果您正在构建网站或应用程序,则HTML样机要优越得多,因为您要以尽可能接近最终产品的格式设计样机。这使您可以更轻松地设定期望,将您限制在最终产品中所能提供的范围内,并提供更大的灵活性。

25
Rahul

如果无法选择交互式模型,请尝试输入文本。您可以添加指向静态图像或线框部分的数字,然后为每个数字提供交互注释

alt text

上图:指向数字的示例。

5
JeromeR

如果您没有诸如Axure之类的选项(或其他交互式原型工具,甚至HTML或Flash),我认为最好的选择是对“标准”或“默认”视图进行线框设计,然后在其他连接线中显示特定模块的备用状态。

以我的经验,依靠基于文本的注释来传达更改通常是不够的-我做了太多的项目,其中由于客户/开发人员/等原因而误解了完美注释的线框或构建不正确的情况。错过了重要的文字细节,而这些细节在视觉上会更好地捕获。

2
Michael Histen

我知道这已经有半年了,但是由于没有人提到它,我将:

Bill Buxton写了一本书 “ Sketching User Experiences” ,该书处理交互设计的“草图”问题-我们如何以探索性的方式(即快速且低成本)传达交互的概念和模式,但是不太抽象?

2
Jan