实例介绍
【实例简介】
UIDesigner（腾讯公司出品） 在软件设计阶段，交互设计师或者产品经理等常常需要使用一些工具（比如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来制作原型是很高效的，而制作出来的原型也能够实现设计师、产品经理和程序开发工程师三者间的快速沟通，减少不必要的工作内耗。 ------------------------------------------------------------------ GUI_Design_Studio_3.5.94.0 在2008
【实例截图】
【核心代码】
4744300845403950985.rar
0 directories, 0 files
UIDesigner（腾讯公司出品） 在软件设计阶段，交互设计师或者产品经理等常常需要使用一些工具（比如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来制作原型是很高效的，而制作出来的原型也能够实现设计师、产品经理和程序开发工程师三者间的快速沟通，减少不必要的工作内耗。 ------------------------------------------------------------------ GUI_Design_Studio_3.5.94.0 在2008
【实例截图】
【核心代码】
4744300845403950985.rar
0 directories, 0 files
标签：
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论