`

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

 
阅读更多

原文出自:http://www.webppd.com/thread-1060-1-1.html

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

axure线上培训
希望大家看完后,能留下您的足迹。让我们大家都能够结识一下。

软件介绍

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

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



 
图一、使用Firework制作出来的设计稿



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

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



 
图二、使用UIDesinger制作出来的原型



 
图三、点击“设置…”按钮后弹出的另一窗体



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

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

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



 
图四、使用UIDesigner制作原型—建立窗体



第二步:从工具箱中拖曳控件到窗体上,修改这些控件的属性(如Text等)



 
图五、使用UIDesigner制作原型—加入控件



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



 
图六、使用UIDesigner制作原型—自动对齐功能



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



 
图七、使用UIDesigner制作原型—整体界面效果



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



 
图八、使用UIDesigner制作原型—设置控件的响应动作



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

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










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


特别说明:

软件运行需要 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

下载地址:ed2k://|file|UIDesignerV1.0.Setup.exe.rar|3471938|276f8de4a4a9aecd0087a760a6ddcbf8|h=cvktm4dpxzm5te7z4sm74zrld2zeroaa|/
  • 大小: 35.2 KB
  • 大小: 42.2 KB
  • 大小: 42.2 KB
  • 大小: 50.1 KB
  • 大小: 52.8 KB
  • 大小: 48.1 KB
  • 大小: 34.6 KB
  • 大小: 32.6 KB
分享到:
评论

相关推荐

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

    在软件设计阶段,交互设计师或者产品经理等常常需要使用一些工具(比如Visio、Axure RP、Flash或者OmniGraffle等)制作出静态稿或者原型来...那么腾讯CDC是如何设计软件原型的呢?这里向大家推荐原型设计 UIDesigner。

    UIDesigner 1.0(腾讯内部软件原型设计利器)安装版

    软件在设计界面的时候,交互设计师或者产品经理等常常需要使用一些工具如:Visio、Axure RP、Flash或者OmniGraffle等)制作...软件街发布腾讯内部CDC软件原型设计的利器UIDesigner。 此软件运行需要 .net 2.0 !!!!

    原型设计工具UIdesigner1.1.1

    UIdesigner 1.1.1作为腾讯推出的一款原型设计工具,以其高效、易用的特点,为设计师提供了更便捷的创作平台,是推动产品设计流程的重要工具。无论你是新手还是经验丰富的设计师,UIdesigner都能成为你设计过程中的...

    腾讯发布UIDesigner 2.0,软件原型设计工具

    UIDesigner,简称“UID”,是腾讯CDC(用户研究与体验设计部)团队研发的一款进行软件界面原型设计的工具。它具有团队协作、整合设计流程、版本管理、快速原型等特性,拥有强大的模板和预制功能,能够快速搭建软件...

    UIDesigner(软件界面原型设计软件)v2.5.5.1免费安装版

    UIDesigner,简称”UID”,腾讯目前开发的软件界面原型设计的工具,它拥有强大的模板和预制功能,能够快速的搭建起软件界面的高保真原型,可以实现设计师、产品经理、程序开发工程师三者间的快速沟通,减少不必要的...

    UIDesigner 原型设计 v2.5.0 beta

    UIDesigner,简称"UID",是腾讯CDC(用户研究与体验设计部)团队研发的一款进行软件界面原型设计的工具。它具有团队协作、整合设计流程、版本管理、快速原型等特性,拥有强大的模板和预制功能,能够快速搭建软件界面...

    UIDesigner (1.1.2.0Alpha)

    腾讯CDC(Customer Research & Design Center)推出了一款名为“UIDesigner”的软件原型设计工具,其1.1.2.0Alpha版本是该系列的一个重要里程碑,特别是对于那些偏好于WIN32系统的用户来说,这是一个不容忽视的宝藏...

    腾讯UIDesigner1.0 for pc

    目前腾讯官方发布的都是UIDesigner2.0以后的版本,而且...UIDesigner1.0是专门面向桌面应用程序的原型设计的快速工具,界面及使用方法与MS的VS很像,左侧工具栏,右侧控件属性栏,能够在很短时间内实现软件的原型设计。

    UIDesigner 2.0

    总的来说,UIDesigner 2.0是腾讯CDC对软件原型设计工具的一次重大升级,它集成了丰富的设计资源、高精度的编辑工具和高效的协作功能,旨在为设计师提供一个全方位的设计解决方案,推动产品设计向更高层次迈进。...

    UIDesigner1.1.2免安装版本

    《UIDesigner1.1.2免安装版本:腾讯客户端原型设计工具详解》 UIDesigner,由腾讯公司推出的客户端原型设计工具,以其强大的功能和便捷的操作方式,为UI设计师们提供了一个高效的设计平台。这款1.1.2.0版本的免安装...

    UIDesigner

    UIDesigner,简称”UID”,腾讯目前还在开发的软件界面原型设计的工具,UIDesigner除了能让使用者能够快速地搭建起软件界面的高保真原型外,还提供了项目管理,让使用者能够方便地管理工程文件;提供了图片库和模板...

    uidesigner 1.1.2.0版本

    UIDesigner,由腾讯倾力打造,是一款专为UI设计师量身定制的高效原型设计工具。这款软件的核心特色在于其直观易用的拖拉式操作,让用户能够随心所欲地摆放控件,极大地提升了设计效率和创作自由度。在1.1.2.0版本中...

    UIDesigner界面设计工具

    它拥有强大的模板和预制功能,能够快速的搭建起软件界面的高保真原型。可以实现设计师、产品经理、程序开发工程师三者间的快速沟通,减少不必要的工作内耗。... UIDesigner软件是由腾讯公司开发。

    UIDesigner 1.1.1.0 Alpha

    UIDesigner,简称”UID”,腾讯目前还在开发的软件界面原型设计的工具,UIDesigner除了能让使用者能够快速地搭建起软件界面的高保真原型外,还提供了项目管理,让使用者能够方便地管理工程文件;提供了图片库和模板...

    UIDesigner(软件界面设计)

    UIDesigner简称UID,是腾讯推出的一款进行软件界面原型设计的工具。它拥有强大的模板和预制功能,能够快速的搭建起软件界面的高保真原型。可以实现设计师、产品经理、程序开发工程师三者间的快速沟通,减少不必要的...

    UIDesigner_

    UIDesigner,简称”UID”,腾讯目前还在开发的软件界面原型设计的工具,UIDesigner除了能让使用者能够快速地搭建起软件界面的高保真原型外,还提供了项目管理,让使用者能够方便地管理工程文件;提供了图片库和模板...

    UIDesigner v2.5

    UIDesigner是腾讯CDC团队研发的一款进行软件界面原型设计的工具。UIDesigner(UI软件界面设计软件)具有团队协作、整合设计流程、版本管理、快速原型等特性,拥有强大的模板和预制功能,能够快速搭建软件界面的高保真...

    UIDesigner使用帮助文档

    - **背景与定位**:UIDesigner是一款由腾讯CDC开发的专业设计工具,旨在提升设计团队的工作效率。该工具面向各种规模的设计团队,提供了高效的设计协作、标准化控件库以及快速原型设计等功能。 - **核心功能**: - ...

Global site tag (gtag.js) - Google Analytics