Data List的应用——Flash Catalyst入门教程
在这个教程中，我将为大家讲述Flash Catalyst组件Data List的应用。首先在Photoshop中设计好所要呈现内容的界面，这里我构思了一个RSS Widget，主要是帮助我们实时地订阅信息，无论是twitter上的即时信息，还是facebook上的朋友动态。需要注意的，在设计时要把图层规划好（这也是交互设计的一要点），方便后来导入到Flash Catalyst中操作。在Photoshop中的设计稿好下图：
接着我们把RSS Widget PSD文件导入到Flash Catalyst中，其步骤如下图：
上图是有关导入PSD文件的选项，我们可以在左边改变Artboard的大小和背景颜色，在高级选项中可以选择图层进行导入，非常好的自定义操作（符合交互设计中允许用户自定义原则），点击OK键，完成导入。
我们可以看到在Flash Catalyst中图层效果的变化，在Photoshop中对图层的混合选项进行了设置（例如描边、斜面和浮调等），导入到Flash Catalyst后，Flash Catalyst对图层效果进行了分离，单独分为一个图层，下图是导入到Flash Catalyst中的的图层：
选择如下图所示的几个图标，如下图所示，然后把它们删除，虽然删除了它们，但它们还会保留在Library中。这步骤是为了以后在Data List中替换图标。
选择所有图形，把其转化为Data List，具体操作方法如下图所示：
双击图形，进行编辑状态，选把右边的下拉条，把其转化为Vertical scrollbar（右键单击），操作方法如下图所示：
选择右上方（短的矩形）的滚动条，进行如下图所示的操作：
选择更长的矩形（滚动条的轨迹），进行如下图所示的操作：
选择RSS图标和相对应的文件，进行如下图所示的操作（勾选Repeated Item）：
然后我们双击进入其子页面进行编辑，到Design-Time-Data选项中进行相应的操作，我们可以在此对图标进行替换，文件进行修改，还可以增加列数。只需点击相应的图标就到弹出一个窗口，我们就可以选择相应的图标进行替换。如下图所示：
接着我们可以用同样的方法把Search转化为Text Input。
最后按ctrt+Enter进行测试，保存文件，最终效果如下图：
源文件下载地址：
http://drop.io/uf8kstx6015
http://cid-5dbd5ed5b5f62f82.skydrive.live.com/self.aspx/.Public/RSSwidget.rar
UI设计 插画 动画 小说 心情随笔 web2.0 seo 用户体验 UE UCD
- 六月 21, 2009 -- 交互设计学习笔记之《如何进行用户研究》 (0)
- 六月 14, 2009 -- 交互设计学习笔记之《如何克服短时记忆局限性对于界面的影响》 (0)
- 六月 13, 2009 -- 交互设计笔记之《如何设计出错信息》 (0)
- 六月 12, 2009 -- 交互设计学习笔记之《如何使得鼠标操作更高效》 (0)
- 六月 10, 2009 -- 交互设计学习笔记之《如何帮助用户高效率地完成任务》 (0)
- 六月 9, 2009 -- 交互设计学习笔记之《如何设计帮助系统》 (0)
- 六月 8, 2009 -- 交互设计学习笔记之《如何帮助用户探索和尝试》 (0)
- 六月 8, 2009 -- 交互设计的利器——Flash Catalyst入门介绍 (1)
- 六月 5, 2009 -- 交互设计学习笔记之《如何使界面让用户一看就懂》 (0)
- 六月 28, 2009 -- 交互设计学习笔记之《如何进行可用性评估》 (0)
- 六月 22, 2009 -- 交互设计学习笔记之《如何制作原型》 (0)
- 六月 15, 2009 -- 交互设计学习笔记之《如何减少人们在使用软件时的长时记忆负担》 (0)
- 六月 14, 2009 -- 交互设计学习笔记之《如何减少用户的等待感》 (0)
- 六月 6, 2009 -- 交互设计学习笔记之《如何使软件一学就会》 (0)
- 五月 3, 2009 -- 如果让你来设计火车票 (0)
- 四月 28, 2009 -- 网络会议的江湖路 (0)
- 五月 27, 2008 -- 法国icon设计师——浪漫的质感 (0)
- 五月 21, 2008 -- 青蛙设计推出概念面具,改变未来世界 (0)
- 六月 16, 2009 -- 交互设计学习笔记之《如何充分利用屏幕空间来显示更多的内容》 (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)
- 五月 22, 2009 -- 应需而变——产品设计流程 (0)
- 五月 21, 2009 -- Microsoft XUI Concept (0)
- 五月 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)
