如何开始使用下一代网站原型香港跑狗图

马丁加蒂丁斯 经过 马丁加蒂丁斯  |  7月14日2014年

最近,我对当前的工具集和接受的实践越来越沮丧,用于创建UI和UX“可交付成果”。

在我的经验中,在Photoshop和Illustrator中建立静态模型,不再捕捉当前UI香港跑狗图的本质。同样地,在诸如轴的工具中创建线框和UX文档似乎对网站或应用程序的实际使用方式很少地进行通信。

这些工具是还原的,将香港跑狗图限制为一系列静态“州”,而不是沟通我们希望建立的丰富,动态,沉浸的体验。

例如,考虑单击列表视图中的项目以显示信息屏幕。列表项目如何处理?新屏幕如何构建?当我点击返回列表视图时会发生什么?新项目如何添加到列表视图中?

无论您如何进行多少屏幕状态的“快照”,现代屏幕香港跑狗图的基本特征就是UI元素如何从一个状态转换到另一个状态,以及新的屏幕元素如何开启/关闭屏幕。

动画和过渡似乎是UI香港跑狗图的本质现在所在的谎言,因为我们移动到更多空间香港跑狗图模式。

 

这是一个空间,不是页面

其中一部分是因为互动媒体现在变得无处不在,我们不再需要参考纸质视觉隐喻,例如‘页面'为了使我们的界面易于使用。现在,用于导航屏幕上内容的空间隐喻更有用,并且动画语言描述的转换。

Pasquale D'Silva致电这个UI香港跑狗图领域 过渡界面, 我认为他已经确定了现代网络和应用香港跑狗图的关键调查领域。

但大多数当前的交互式香港跑狗图人员的工具集是探索,香港跑狗图和构建这些接口不足。

动画软件可用于构建互动的模型和原型。 After Effects,Adobe Edge Animate,即使是Flash,可用于演示转换效果,可以作为动画GIF,视频或闪存文件输出。然而,这些可能是耗时的构建,而且虽然它们可能擅长显示特定的UI转换效果,但调整参数也可以是高度劳动的密集运动。当然,一旦您构建了丰富的交互式UI演示,您将您必须将所有转换和接口转换为您的应用程序或网站的工作代码。

 

视觉构图工具

互动香港跑狗图师正在转向的许多工具朝向Virce Multimedia合成工具,由VJ和视频效果程序员使用的许多工具毫不奇怪。

这些最着名的是Apple自己的Visual编程工具Quartz Composer,如果您有Mac-yours已在计算机上已安装,假设您安装了Xcode。 (你会在开发人员中找到它>应用程序文件夹,或者它可以作为Xcode的一部分下载。

Quartz Composer由于文章而被推入聚光灯作为互动原型工具 回家很大, 在Facebook的香港跑狗图师Julie Zhuo透露,新Facebook Home的香港跑狗图团队已经广泛使用了QC来测试和演示了家中的UI:

“像Facebook家一样的东西完全超越了Photoshop作为香港跑狗图工具的能力。我们怎样才能谈论基于物理学的UIS和面板,如果我们坐在静态模拟中,可以在屏幕上驶入屏幕上的泡沫?

“当您看到一个直播,抛光,互动的演示时,您可以立即了解如何工作和感受,以一种单词或长的描述或线框永远无法实现的方式。这导致更好的反馈,更好的迭代,最终是更好的最终产品。”

在这件上 QC论坛在分支机构, 香港跑狗图师开始重现Facebook团队的工作。

Facebook随访释放 Facebook Origami, 用于专门针对互动香港跑狗图师的石英作曲家的工具包。

001

学习Quartz Composer可能需要很长一段时间,但基于节点的方法(其中导致将输入连接到处理节点(修补程序),然后连接到输出)是逻辑的。其视觉表示计算过程可以使其对香港跑狗图者更加理解,并且易于使用参数进行修补并改变组合的布线。

使用origami,为手机和浏览器创建交互式模型相当简单。它提供了准备使用接口元素来构建应用程序的功能和交互,如按钮,转换,文本图层等。它很容易调整转换的参数,以便尝试不同的效果。

002

基于节点的Visual编程工具也对交互式香港跑狗图师提供了帮助,包括 最大限度 通过循环74,以及开源 VVVV。

003

另一个看起来有趣的新工具是 Vuo, currently in beta.

005

 

下一个模拟和原型香港跑狗图

正在发布新工具,该工具专门针对允许交互式香港跑狗图者进行原型应用程序和网站。

其中最好的是 内裤。 简报是仅适用于iPhone和iPad的应用程序的唯一一个Mac-opplie,虽然也可以嘲笑桌面应用程序。除了MAC的主简报应用程序,还有一个iOS应用程序公文赛,允许您将简报项目发布到iPad或iPhone,以便演示并在真实设备上分享您的模型。

006

使用简介非常合乎逻辑。您可以导入屏幕图像并为它们添加简单的交互,或者为更丰富的交互式体验,从标准UI元素库(如Tab栏,搜索框,列表元素等)构建屏幕布局等.IOS,Android有库,桌面和平台不可知论者'蓝图'风格。然后,将交互性应用于要演示的那些元素,例如要显示搜索结果的显示方式,或者转换如何从一个屏幕转换为另一个屏幕。

在许多方面,感觉就像使用主题演示应用程序一样,而不是线性时间轴,您可以创建复杂的分支,这是将屏幕视为由其交互连接的节点的能力变得有用。

简报的最佳方面是,它不仅仅是演示功能的工具,它实际上是一个很好的香港跑狗图工具,帮助在手机或平板电脑的紧密屏幕空间中建立良好的用户界面。

对于主简报软件的199美元,它不是一个廉价的产品,而是非常精心香港跑狗图,并做出了它的做法很好。 (有限的演示可用于评估。)

对于开源解决方案,请退房 framer.js, 一个快速构建UI样机的互动原型香港跑狗图框架。还有一个产品,Framer Studio,内置于Framer.js框架上,提供了一种准备好的原型工具。

007

使用FRAMER Studio,必须首先在Photoshop中创建所有屏幕元素,然后在将转换和功能导入以添加转换和功能之前。 Framer使用CoffeeScript,一个“编译成JavaScript的小语言”,保持代码清洁简单。但是,您构建的代码在原型工具外面没有实际值。

如果您擅长使用Photoshop进行网站或应用程序的模型,那么Framer Studio是轻松添加屏幕香港跑狗图的交互性的好方法,以创建一个演示。

 

未来的香港跑狗图和开发工具

如上所述,到目前为止,所有的工具都可以帮助您可视化和呈现您构建的应用程序或网站的UI,但是您仍然面临实现香港跑狗图的任务。

这可能是使用这些工具时的甚至更大的问题,而不是产生静态线框和模型:现在您不仅要重现布局,您也必须实现相同的功能和转换。

有一个论点 在浏览器中香港跑狗图 是确保您的Comps未写作的最佳方式您的代码技能无法现金。

但是,有一些应用程序可以帮助弥合可视化和生产准备代码之间的差距。

实时工作室 通过Outracks,是一个用于可视化的良好实现的IDE,几乎是基于节点的工具(如Quartz Composer)之间的混合,以及诸如Edge Animate的基于时间线的工具。

008

因为在RealTime Studio中,您可以看到代码及其视觉表示,香港跑狗图师和开发人员都可以使用和了解它。 Outracks使用自己的语言称为UNO,这与Java或ActionScrip非常相似。最重要的是,因为代码可以导出一些不同的目标平台,它是一个实用的开发工具,而不仅仅是一个可视化应用程序。

有这么多的事情’毫无疑问,屏幕相当凌乱。有一个节点视图,时间轴视图和代码视图以及预览窗口。欢迎对UI的一些改进,使您更容易最大限度地减少您不需要的视图,以扩展您所在的内容。与石英构声器相比,节点观众特别差。但是,我真的很兴奋这个产品。目前在Beta,它只是PC,overracks网站上有一个演示。

另一个令人兴奋的新产品是 noflo, 基于流的JavaScript编程工具。由于成功的Kickstarter活动而发展(披露:我是一个支持者),它突出了与当前可用的工具的不满,以及基于流量的编程工具的未开发潜力,可以通过非程序员更容易地理解。 Noflo在Node.js上构建,以向浏览器提供功能应用程序。对Android和iOS的本机输出在作品中。

009

Noflo发动机是开源,可以免费下载。还有一个托管版本 flowhub.io。 FlowHub可以在浏览器中运行,或作为Chrome应用程序运行。

然而,FlowHub并没有真正达到其承诺,尚未成为一个直观的编程环境,似乎相当缓慢,不足,难以使用。您在源图中创建的节点表示函数(或使用适当术语的方法),其实际的JavaScript代码驻留在其他地方。

目前,使用流量流是一个障碍而不是帮助。我怀疑大多数开发人员宁愿手曲柄代码而不是使用流量。然而,这些是早期,

已经说,流量流量和Noflo提供了强大的一瞥,以便基于流动的编程可能采用可视化和开发,希望能够发展到它旨在成为直观的快速应用开发工具。

我相信交互香港跑狗图的未来在于基于流动的工具。