腾讯内部用于软件原型设计的专用工具

软件概述

在软件设计阶段，交互设计师或者产品经理等常常需要使用一些工具（比如Visio、Axure RP、Flash或者OmniGraffle等）制作出静态稿或者原型来表达设计思想。这些工具是各有各的优势，当然也各有各的缺点啦。那么腾讯CDC是如何设计软件原型的呢？这里向大家概述我们正在研发的原型设计利器 UIDesigner。

首先，先让我们来体验一下UIDesigner制作出来的原型效果。这个原型是一个设置窗体，主要由按钮、复选框、分组框和文本框等控件构成，其中一些按钮还具有响应的动作（如打开另一个界面，关闭窗体等）。如图一所示，这是使用Firework制作出来的交互图。

http://i3.6.cn/cvbnm/1d/1e/59/c0e0b4612d6c5515a4a9b5f3a5d35ef0.jpg
图一、使用Firework制作出来的设计稿

这种交互图的特点是简单明了，能够表示出各种控件的基本属性（如文本、位置和选中状态等），但它只是一个静态的图片，不能真实表现出每个控件的响应动作，如仅看这张图，是不清楚点击代理服务器设置分组框上的“设置…”按钮会有什么响应的。

那再看看你若使用UIDesigner制作出来的效果：最终输出的是一个EXE可执行文件（见图二左上角），双击运行后就会出现一个与最终实现效果完全一致的窗体（见图二右）。另外，它还是一个具有响应动作的真实原型，例如你若点击了“设置…”按钮，那就会弹出一个新的窗体（见图三）。

http://i3.6.cn/cvbnm/50/76/2c/0496d84a2ae1c2f2a2767a735501e7a8.jpg
图二、使用UIDesinger制作出来的原型

http://i3.6.cn/cvbnm/50/76/2c/0496d84a2ae1c2f2a2767a735501e7a8.jpg
图三、点击“设置…”按钮后弹出的另一窗体

实际上，这个新弹出的窗体都是一个独立的原型，也是由UIDesigner制作出来的。由于它里面的控件同样可以设置下一步的响应动作，所以从总体上来看，众多原型就像一个树状结构，而其中的父节点就是图二中的设置窗体了。这种结构具有一个很大的好处：无论你完成了多个界面的原型，只需要它们之间有链接关系，最后输出的只是一个EXE可执行文件。这样，你可以很方便地与其它人员表达自己的设计思路，让沟通变得更加快捷。

接下来，我们看看这个原型是如何制作出来的。

第一步：建立空白窗体，调整它的大小、风格、标题和Icon

http://i3.6.cn/cvbnm/ea/0a/52/ff75c0d78f74e903c930071d796fdcdb.jpg
图四、使用UIDesigner制作原型—建立窗体

第二步：从工具箱中拖曳控件到窗体上，修改这些控件的属性（如Text等）

http://i3.6.cn/cvbnm/a7/d6/a8/845d239d0bd5e9a89b8f5d8571dd88d0.jpg
图五、使用UIDesigner制作原型—加入控件

由于UIDesigner具有自动对齐的功能，所以在拖动控件到窗体时就可以完成排版工作，不需要再逐个像素去调整。另外，不单单在加入控件到窗体时，在改变已存在于窗体内的控件的位置或者大小时，自动对齐功能一样会生效。这样，设计者在调整控件大小或者位置时（包括控件与控件，控件与窗体边缘等的距离等情况），工作变得很简单。

http://i3.6.cn/cvbnm/19/8a/6f/b72bc13402f1f6f0c4d27a46b34f6101.jpg
图六、使用UIDesigner制作原型—自动对齐功能

第三步：几分钟后，所有的控件都放到窗体并设置好属性了，如下图

http://i3.6.cn/cvbnm/d8/08/da/2f55dc94dffcabd0915dc792c4d2856e.jpg
图七、使用UIDesigner制作原型—整体界面效果

此时，设计者就可以使用软件的导出图片或者导出原型功能分享你的设计成果了。当然，现在这种效果还只是一个没有响应动作效果的原型。接下来，我们再给“设置…”按钮加入响应动作。首先，选中“设置…”按钮，然后点击工具栏的“响应”按钮，你将会看到如图八的响应设置窗口。此时，你可以选择打开窗体、打开网页、弹出对话框、修改属性值和关闭本身窗体等五种效果，这里我们选择“打开窗体”，然后在弹出的对话框里指向弹出窗体的文件。最后，点击“完成”按钮即可。

http://i3.6.cn/cvbnm/91/b6/23/8adf7b76a9adc18beb6aca22c3230ded.jpg
图八、使用UIDesigner制作原型—设置控件的响应动作

到此为止，你就完成了一个与最终实现效果完全一致的高保真原型了。产品经理和开发人员等若想了解你的设计思想就不需要看着长长几页的说明文档了，而只需要运行你输出的原型文件，就可以对你的设计思路一目了然。

UIDesigner除了能让使用者能够快速地搭建起软件界面的高保真原型外，还提供了项目管理，让使用者能够方便地管理工程文件；提供了图片库和模板库功能，让使用者可以方便地重用以前的设计资源；提供了32个Windows客户端软件常用控件，满足使用者的设计需求；提供了多个属性设置入口，分别实现最常用属性设置、一般属性设置和高级属性设置功能。当然，UIDesigner不是专用来设计QQ的，其它的Windows客户端产品都在它的工作范围之内。总的来说呢，使用UIDesigner来制作原型是很高效的，而制作出来的原型也能够实现设计师、产品经理和程序开发工程师三者间的快速沟通，减少不必要的工作内耗。

http://i3.6.cn/cvbnm/3f/80/86/f9b38d5e41ed5db22e56504e938b8473.png

http://i3.6.cn/cvbnm/64/46/19/d56b014b009a64c362dd5755863363b3.jpg

http://i3.6.cn/cvbnm/04/f7/ed/62053e6bb90bf878463cdff26cc64c94.jpg

UIDesigner 目前还在内测阶段，还不是一款完整的产品，所以请勿直接将其用于生产用途。如果运行遇到问题请及时向腾讯反馈。

使用注记：

“UIDesignerV1.0.Setup.exe.rar”为软件的原版程序压缩包。喜欢安装版的朋友请下载此文件。

“腾讯.UIDesigner.v1.1.1.0.Alpha.(Win32.云端版).exe”为软件的云端版本，下载运行解压后即可直接使用（如有提示注册，请见下面的说明）。云端版本用完不想用了可以很彻底地从系统中删除，适用于想尝试该软件的用户使用。

有关什么是云端，云端版的技术特点是什么，请看这里：http://www.VeryCD.com/groups/daruanjian/790044.topic。

特别说明：

软件运行需要 Microsoft .NET Framework 2.0 版本以上的运行环境支持。请在使用之前，在您本机安装 .NET 2.0。Windows Vista 和 Windows 7 系统已带，无需安装。

Microsoft .NET Framework 2.0 Service Pack 2 微软官方下载地址：http://www.microsoft.com/downloads/details…06da9d0f

软件类型: 编程开发-编程工具
软件性质: 无插件绿色软件 / 免费软件
应用平台: Windows XP / Vista / Windows 7
资源发布: 大软件分享基地
版权声明: 软件版权归原作者及原软件公司所有，如果你喜欢，请购买正版软件，所提供之软件只供学习用，由此产生的任何法律问题和经济损失盖不负责。
共享时间: 全天长期做种
共享服务器: eDonkeyServer No2

测试通过操作系统: Windows XP / Vista / Windows 7 （云端版目前仅支持在32位 Windows 下运行）

查毒情况: 使用 Avira AntiVir 英文版（程序版本：10.0.0.561，病毒库版本：7.10.05.248）查毒，未发现报毒情况。

免责声明

★本帖概述的内容转自网络，凡摘自网络相关图文概述内容的本帖不另行标注出处，版权所有者如有异议请告知以便删除。
★关于软件破解及注册机可能被杀毒软件报病毒或间谍木马（若已检测到的则将在帖中特别标注），请自行甄别和取舍，不另行加以解释。
★资源下载后请对文件做必要的安全检测，该下载内容仅限于个人测试学习之用，不得用于商业用途，并且请在下载后24小时内删除。
★各计算机系统环境各不相同，因此不保证该软件完全兼容于你的计算机系统，最终解决软件安装运行问题请联络官方站点寻求相关技术支持。
★资源版权归其所有者所有，如果你喜欢，请购买正版。

本文链接: https://www.books51.com/305506.html

上一篇: (SIEMENS)西门子S7-1200 PLC编程软件

下一篇: Sybase CASE工具集

(0 次顶, 0 人已投票)
你必须注册后才能投票！

Loading...