UIPig——设计私生活

交互设计的利器——Flash Catalyst入门介绍

Adobe Flash Catalyst是一款专业的交互设计工具，可以在不编写任何代码的情况下快速创建用户界面。它的出现为开发人员和设计人员建立起了沟通的桥梁，程序开发人员可以导入设计师在Photoshop、Illustrator和 Fireworks中设计的用户界面，并将它们转化成UI组件而不改变它们原先的“皮肤”、外观和整体风格。设计师仍然用Adobe的各种产品来完成自己的大部分工作，但是能通过Catalyst来定义UI组件，这就像开发人员通过编程来完成这一工作一样。

2009年6月1日，Adobe公司给大家送来了儿童节的礼物，发布了Flash Catalyst Beta，大家可以到其官方网站免费下载试用。Flash Catalys的安装过程中一些交互设计不是很好，它首先得让用户解压安装文件到一个目录下，可是用户根本不需要从这些解压文件中选择 “setup”进行安装，安装程序自动运行，如此的结果是这些文件占据了几百兆的空间，用户却很容易就把它遗忘。建议Flash Catalyst开发团队在设计时，安装文件不要解压到某个目录下，直接储存在缓存中，等安装完成后就释放出来。接下来的安装非常简单，按步骤很容易就完成了。

启动Flash Catalyst，出现如下界面：

Flash Catalyst启动界面

从此界面上我们可以多种操作：1.打开一个项目；2.从AI文件中创建新项目；3.从PSD文件中创建新项目；4.从FXG文件中创建新项目；5.创建新项目；6.信息和介绍。

我们选择创建一个新的项目，弹出对话框，默认项目名称为Untitled_1，ArtBoard高、宽分别为800px和600px，背景颜色为白色，用户可以自定义这些选项。

Flash Catalyst 创建项目

点击OK，进行初始界面，如下图：

初始界面

此界面风格简洁，窗口布局一目了然，分别有菜单栏、页面/舞台区、主窗口显示区(ArtBoard)、交互应用区，右侧则列出了常规应用，分别为工具栏、图层、组件/库/数据、属性区。

页面/舞台区放置的是一个个的场景，类似于网站中的一个个页面，我们可以在此区域进复制一个页或新建一个页面，页面跳转的动画可以在交互应用区进行设置。

Flash Catalyst默认的组件有10个，如下图所示：

组件

组件形状

从右边的组件区选择一个组件后，拖动主窗口显示区，一个组件就创建完成，当这个组件为选中状态时（以Data list为例），会弹出一个浮动窗口，如下图：

编辑

从这里我们可以对Data List进行编辑，交互设计，同时在属性窗口上也会显示Data List的基本属性，我们可以对这些属性进行修改。

属性

一些操作上的小技巧：

• 按F4在基本布局与主显示窗口（ArtBoard）间切换
• Ctrl + “+”或Ctrl + “_”进行窗口大小的缩放
• 双击各窗口区上方的深灰色区域，此窗口收缩或展开
• Flash Catalyst可以在设计与代码间进行切换，懂代码的朋友可以进行更丰富的操作

代码页面

总结
Flash Catalyst的入门非常简单，基本的功能和操作很快都能掌握，关键还是要在实例中应用，接下来我会制作实例，用实例来讲解，以此固定知识。

PS，Twitter解封了，我又重新燃起了对生活的激情，please follow me on my twitter：http://twitter.com/hanyan

UI设计 插画 动画 小说 心情随笔 web2.0 seo 用户体验 UE UCD

• 六月 8, 2009 -- 交互设计学习笔记之《如何帮助用户探索和尝试》 (0)
• 六月 22, 2009 -- 交互设计学习笔记之《如何制作原型》 (0)
• 六月 21, 2009 -- 交互设计学习笔记之《如何进行用户研究》 (0)
• 六月 14, 2009 -- 交互设计学习笔记之《如何克服短时记忆局限性对于界面的影响》 (0)
• 六月 13, 2009 -- 交互设计笔记之《如何设计出错信息》 (0)
• 六月 12, 2009 -- 交互设计学习笔记之《如何使得鼠标操作更高效》 (0)
• 六月 10, 2009 -- 交互设计学习笔记之《如何帮助用户高效率地完成任务》 (0)
• 六月 9, 2009 -- Data List的应用——Flash Catalyst入门教程 (0)
• 六月 9, 2009 -- 交互设计学习笔记之《如何设计帮助系统》 (0)
• 六月 6, 2009 -- 交互设计学习笔记之《如何使软件一学就会》 (0)
• 六月 5, 2009 -- 交互设计学习笔记之《如何使界面让用户一看就懂》 (0)
• 六月 28, 2009 -- 交互设计学习笔记之《如何进行可用性评估》 (0)
• 六月 16, 2009 -- 交互设计学习笔记之《如何充分利用屏幕空间来显示更多的内容》 (0)
• 六月 15, 2009 -- 交互设计学习笔记之《如何减少人们在使用软件时的长时记忆负担》 (0)
• 六月 14, 2009 -- 交互设计学习笔记之《如何减少用户的等待感》 (0)
• 五月 3, 2009 -- 如果让你来设计火车票 (0)
• 四月 28, 2009 -- 网络会议的江湖路 (0)
• 五月 27, 2008 -- 法国icon设计师——浪漫的质感 (0)
• 五月 21, 2008 -- 青蛙设计推出概念面具,改变未来世界 (0)
• 五月 22, 2009 -- 应需而变——产品设计流程 (0)
• 五月 21, 2009 -- Microsoft XUI Concept (0)
• 七月 8, 2008 -- 界面测试 (0)
• 六月 11, 2008 -- 手机常识(UI设计须知） (0)
• 六月 7, 2008 -- 什么是交互设计 (2)
• 五月 20, 2008 -- 质感是怎样炼出来的——UI设计实验室 (1)
• 五月 18, 2008 -- 用户体验设计师的职责 (0)
• 五月 18, 2008 -- 如何量化用户体验UE(How To Quantify The User Experience) (0)
• 五月 18, 2008 -- UI设计的概念 (0)
• 七月 6, 2011 -- GPS device design (0)
• 七月 4, 2011 -- “NFC Accounting tools” design (0)
• 六月 19, 2011 -- “Walker” design (2)
• 六月 12, 2011 -- DIY T-Shirt APP设计 (0)
• 五月 24, 2011 -- 电影中的交互设计 (5)
• 五月 22, 2010 -- 2010世界杯的Android之旅 (0)
• 五月 20, 2010 -- 个人知识管理之我见 (0)
• 一月 31, 2010 -- 纯粹GUI练习 (1)
• 一月 6, 2010 -- 回望2009，行走2010 (1)
• 十一月 19, 2009 -- 近段时间的一些GUI作品 (3)
• 十月 14, 2009 -- 以用户中心的设计 (1)
• 八月 5, 2009 -- 常见的手机UI布局 (2)
• 五月 9, 2009 -- 中文输入法的寻觅 (0)
• 四月 22, 2009 -- 赵小姐的二三事 (0)
• 六月 26, 2008 -- 上海毅仁招聘UI设计师 (0)
• 六月 7, 2008 -- 淘宝UE团队的设计流程 (0)
• 六月 7, 2008 -- 用户体验的概念与设计 (0)
• 五月 26, 2008 -- 毛线玩具,怎一个棒字了得 (0)
• 五月 24, 2008 -- 细致的Icon，UI设计强人作品下载 (0)
• 五月 24, 2008 -- Icon教程——创建简单的玻璃球 (0)
• 五月 22, 2008 -- Icon王国，我的地盘我做主 (0)