玖玖's blog

喜宴意外收获--遭遇自己做的标志设计

jojos@vip.qq.com(玖玖猫) — Fri, 05 Nov 2010 22:42:18 +0800

从亲戚家的喜宴归来，打开喜糖盒子，竟意外发现他们家的喜糖是石榴记(http://www.shiliuji.com)买的，非常巧的是石榴记标志是自己设计的，所以感到异常惊喜，在盒子里有1个印有石榴记标志的小标签，烫银的，精致可爱，看到自己做的设计做成商品出售非常开心，可惜我照片拍的太丑了。

想到当初接到这个项目，就觉得石榴记这个名字十分好听，寓意又吉祥如意，欣然接受了这个嘱托。面对这样一家经营婚庆礼品的喜铺，我仿佛也感受到了新人们的喜悦，在标志的创意和设计上也格外的用心，希望这个带着吉祥，如意，欢欣的标志也能牢牢印刻在每一对新人的心中。

设计思路：

示例：

当初做了2个方案，其实另外一个我也挺喜欢的

wordpress-3D标签云插件

jojos@vip.qq.com(玖玖猫) — Wed, 03 Nov 2010 11:55:55 +0800

效果见腾讯游戏官方设计团队博客右侧标签云 http://tgideas.qq.com/
插件下载地址：http://wordpress.org/extend/plugins/wp-cumulus/screenshots/

FF火狐浏览器中去除input虚线的方法

jojos@vip.qq.com(玖玖猫) — Mon, 01 Nov 2010 17:39:26 +0800

在火狐浏览器里可以增加input属性 onfocus="this.blur()" ，这样鼠标点击就不会出现虚线框。

例子：
<input name="提交" type="submit" value="提交" class="yourclass" onfocus="this.blur()" />

IE6中实现PNG透明的完美方法

jojos@vip.qq.com(玖玖猫) — Fri, 29 Oct 2010 12:19:40 +0800

首先需要下载实现此方法的JS文件，点击下载此文件. 源下载见 http://dillerdesign.com/experiment/DD_belatedPNG/#download

然后按照以下方法在页面中引用：

 程序代码
<!--[if IE 6]><script src="DD_belatedPNG.js"></script>
<script>
  /* 设定需要渲染的DOM对象*/
  DD_belatedPNG.fix('.png_bg');
</script>
<![endif]--> 

QQ阅读空间升级为QQ阅读~创新的杂志阅读方式

jojos@vip.qq.com(玖玖猫) — Tue, 19 Oct 2010 12:31:00 +0800

QQ阅读空间将升级为QQ阅读，接到升级通知，体验了一把新功能。全新的杂志阅读方式以及新的绑定功能，QQ空间产品开始和微博整合，（其实我觉得早就可以整了，很多功能都差不多，整在一起还能更方便的营销推广，使用起来也方便，利人利己）。

杂志功能挺不错的，看订阅的文章很直观，一屏里接收的信息量多了,自动排版视觉上也很舒服，翻页采用了现在很流行的小圆点，很多网站的幻灯片都是采用这种，不过我感觉还是IBOOK的那种翻页方式更好，比较容易知道你现在在哪个位置，如下图：

绑定功能让你不必再一个一个的去登陆不同的微博，一键分享内容，梦想的功能啊，我曾经在关于博客的易用性里YY过，继续膜拜腾讯~，懒人表示很喜欢这个功能。

what's your choice?

jojos@vip.qq.com(玖玖猫) — Wed, 13 Oct 2010 23:55:15 +0800

今天开会的时候，SUNNY大人给我们大家做了一道题，最后公布答案，解释的时候觉得很有意思，感知了一下另外一种思维方式，题目是这样的：

“一辆有轨电车行驶途中突然刹车失灵，而这时司机发现前面有5个人，停不下来的电车毫无疑问要将这5个人全部撞死。

现在做如下假设：司机发现在那5个人前面有一个岔道，他可以紧急将电车开到岔道上去。但是，很遗憾，司机发现岔道上也有一个人，如果电车转过去，那个人也是必死无疑。”

问题是：在这种情况下，司机的那种选择是正确的？

我们大部分人都选了转向到分叉铁轨，让伤亡减少到最小，我也选择了这个答案。

如果是你，你会如何选择呢？

公布答案的时候，感到有些意外，虽然答案并不一定是固定的，但是那种思维方式值得我们深思。

出题的人选择了不转向，笔直往前，原因是如果你选择了开到岔道上去，那么你在主观意愿上选择了牺牲这个人来保住那5个人的性命，这个人是无辜的，如果说撞上前面那5个人是因为电车故障，那么当你选择撞岔道上那个人的时候，意味着你是有主观意识的，你是主动去撞这个人的，从这点上看，你谋杀了这个人。

很有警示意义的问题，即使我觉得，从你开始选择的那一刻开始，无论你选择哪条道路，其实都是一样的，因为你“选择”了。

这是哈佛大学讲授公共事业管理课程的教授在课堂上问学生们的问题，回家后去网上搜了一下，还有一些假设情况：

前提不变。假如司机发现那个在岔道上的人不是别人，恰好就是他放学不回家在外面贪玩的儿子。那么，如果你是司机你将如何抉择？这种情况下，有多少人认为司机把车开上岔道是正确的？

我再假设另外一种情形：假如那5个人是监狱里面送出来干活的犯人（世俗意义上的坏人），而岔道上的那个人是一个受人爱戴的小学老师（世俗意义上的好人），那么，又有多少人会赞同司机把失控的电车开向岔道撞死老师，而不直接撞向那5个囚犯？

相似的问题还有----------

“如果你是急诊室里的一个医生，有六个病人向你求助，他们都被电车重重压过，其中五个人中度受伤，另一个受到重伤，你救治那个重伤的受害者，另五人会因此死掉，或者你可以去照顾那五个，让他们恢复健康，但同时那个受重伤的病人会死。现在作为一个医生，多少人会选择救那个重伤的？”

“如果你是个器官移植的外科医生，你有五个病人，一个人需要心脏，一个人需要肺脏，一个人需要肾脏，一个人需要肝脏，而第五个人需要胰脏，你手头没有别人捐献的器官，你将不得不看着他们死去，然后你想到，在隔壁房间，有一个健康的人来医院做检查，他正在打瞌睡，你可以悄悄地走进去，取出他的五个器官，虽然这个人会死，但是你却救了另外五条人命，多少人会这么做？”

Flash动画

在线播放

veryCD上有这节课的视频，并且YYeTs字幕组已经进行了翻译，这里感谢万能的网络，感谢那些无私分享的人们，网络分享的力量真是无比强大，坐在家里我们也能听到哈佛，耶鲁教授讲的课了。

课程名称：《公正：该如何做是好？》(Justice: What's the Right Thing to Do? )
下载地址：http://www.verycd.com/topics/2803004/

在veryCD上还有一些其他课程的下载，搜索“开放课程”“哈佛”“耶鲁”等关键词，你就可以找到他们。

教程：用Fireworks打造精致葡萄酒

jojos@vip.qq.com(玖玖猫) — Mon, 11 Oct 2010 21:56:13 +0800

看上去精致漂亮的葡萄酒瓶，其实制作起来非常简单，用fireworks只需几步，就能轻松打造。

首先，用形状工具画出相应的形状，通过这些形状的组合，我们能够得到一个瓶身。

接着，我们开始制作瓶颈，用钢笔工具勾画出半个瓶颈的形状，通过复制-水平翻转，得到右边半个，这样制作的瓶颈看起来对称平整，比完整勾勒的更好。用路径面板中的组合路径拼合他们。

把制作完成的瓶身和瓶颈组合起来，得到完整的葡萄酒瓶子，这里由于在做包装纸的时候我需要用瓶颈部门形状，所以暂时不需要把他们合并路径。

添加高光是很关键的一部，因为有了光影变化，才会有立体感，使用渐变填充，调整透明度，使高光看起来更自然，更符合现实情况，如果平时注意观察，就可以做的更好。

复制瓶颈形状，切去不需要的部分，我们得到瓶颈包装纸的形状，是不是很方便。

标签由3部门组成，这里你可以自由发挥，可以做一个自己品牌的葡萄酒，让酒瓶更有个性。

现在，葡萄酒瓶制作完成啦，是不是很容易，有些细节其实还可以更加细化些，比如瓶口部分的透视还不是非常好，希望大家看了我的教程后，可以做出更好，更有创意的各种瓶子。

【视频教程】快速完成交互设计和原型制作

jojos@vip.qq.com(玖玖猫) — Sun, 10 Oct 2010 19:11:14 +0800

David Hogue是Fluid公司的信息设计和可用性方面的主管，他为我们制作了如何使用快速完成交互设计和原型制作的视频教程。

由于教程是全英文的，建议先下载软件和示例文件，这样能帮助你更好的理解教程中的内容：

软件下载：Adobe Fireworks cs5

视频中的示例文件： files_f1498v1661.zip (ZIP, 1 MB)

信息和互动设计

在Fireworks里使用页面，层，方格，引导线和组件来创建线框。利用主页面，共享层，内建工具，和通用库快速的创建复合的线框。(11:14)

播放视频>>

互动原型设计

在Fireworks 中创建一个导航条，并适用片段和热点为线框添加互动功能。添加简单的互动使得用户可以在页面之间进行跳转，模仿在网站中浏览的过程。(10:43)

播放视频>>

快速原型建立

在Fireworks 中使用不相交的变换图像，灵活的组件，和导出的html和图片来迭代和快速建立原型在原型中添加更复杂的互动元素，来模拟窗口跳转，甚至包含动态内容。(9:42)

播放视频>>

完成设计过程

让我们来看看如何使用Adobe 的设计工具完成整个设计过程，以及Fireworks，Illustrator，Photoshop和InDesign 怎样进行联合工作以提升你的团队的效率。从概念构想，到框架设立，到视觉设计，到印证实现，Adobe Creative Suite工具协同工作都能进行高质量高效率的生产设计。(11:50)

播放视频>>

交互设计类网站推荐--看行业先锋是如何做的

jojos@vip.qq.com(玖玖猫) — Sun, 10 Oct 2010 17:46:11 +0800

这里只是一些自己订阅的BLOG，如果大家有推荐的，欢迎留言，把好东西分享给更多的人

团队类：
Tencent CDC http://cdc.tencent.com/
ISD webteam http://isd.tencent.com/
Tencent TG ideas  http://tgideas.qq.com/
Tencent WSD http://wsd.tencent.com/
19楼UED http://ued.dukuai.com/blog/
口碑网UED http://ued.koubei.com/
淘宝UED  http://ued.taobao.com/blog/
百度UFO http://www.baiduux.com/
阿里软件UED http://www.alisoftued.com/
盛大UED http://www.sndaued.com/blog/
携程UED http://ued.ctrip.com/blog/
网易杭州研究院UED http://ucd.blog.163.com/
搜狐UED http://ued.sohu.com/
当当网官方BLOG  http://blog.dangdang.com/?cat=42
人人网FED http://fed.renren.com/

网站类：
UCD大社区  http://www.ucdchina.com/
蓝色理想 http://www.blueidea.com/

个人：
西贝的交互设计 http://www.xibeidesign.com/
白鸦，以用户为中心的设计 http://uicom.net/blog/
臭鱼的交互设计 http://www.chouyu.com.cn/
折折熊的交互论 http://www.jojobox.cn/blog/default.asp
坏交互 http://www.huaiuc.com/

为什么要用Fireworks？

jojos@vip.qq.com(玖玖猫) — Sat, 09 Oct 2010 17:54:07 +0800

为什么要用Fireworks？这个问题有很多朋友问过我，每每惊奇于我用的竟然不是photoshop，我只能说，因为firework能够高品质，高效率的完成工作。有人说过“学会偷懒，并懒出境界是提高工作效率的最有效方法！”，不得不承认，我是一个懒人，以更好，更快，更便捷为己任。这就是为什么一台洗衣机也能造福全人类的原因。
从软件本身上来看：

为WEB设计而生

Fireworks最早是由Macromedia公司专为网络图形设计而开发的软件，处处体现WEB特性，它的颜色管理系统基于WEB安全色，它的网页元素互动、鼠标Rollover、Swap、图片分割、切片、热点、图像映射、按钮、滚盖图、层及GIF动画，CSS图层、影像环等等都是WEB制作非常好用的东西，Fireworks在处理一些简单静态页面时，可以使用热点切片等工具快速完成切割并加上链接，直接导出生成网页。。

兄弟三剑客-与Dreamweaver亲密无间

Fireworks与Dreamweaver,Flash一起被称为网页三剑客，同在Macromedia公司出生，他们在网页制作中能够紧密配合。

在Dreamweaver的属性编辑栏中，内置的图片编辑按钮，默认为Fireworks，在Macromedia被收购以后，仍然保持了这一特性，直到Dreamweaver CS4发布时，Adobe让photoshop取代了这一位置，当然通过设置，你仍然可以把Fireworks设置为默认编辑软件。(Adobe这个后妈真是不怎么见待这个收养来的儿子。)

突出的图片优化表现

在web图型设计中，图片的优化压缩尤为重要，fireworks在这里体现了它天生的优势。
详见：Fireworks和Photoshop图片优化的比较 http://www.7blue.cn/article.asp?id=115

新的革命---快速完成交互设计和原型制作

从 Fireworks cs3开始，我们就可以看到，adobe公司逐渐认同了它在web设计上的位置，增加了很多有利于快速完成交互设计与原型制作的功能，到了cs5这些功能得到更大体现。

新的页面面板在单个文档 (PNG 文件) 中创建多个页面, 并在多个页面之间共享图层。每个页面都可以包含自己的切片、图层、帧、动画、画布设置, 因而可在原型中方便地模拟网站流程。并且它自带的公用库中，包含 Web 应用程序、表单、界面和网站中经常用到的图形元件、文本元件和动画, 可以使用它迅速开始原型构建过程。

页面面板的运用很大程度上为项目界面设计减少不必要的重复劳动，在我们的项目需要反复修改的时候，你不需要一个一个页面的去修改。
大家知道，在网页设计中，通常头部，导航，侧栏这些位置都是公用元素，让这些通用的部位成为共享元素，极大的提高了制作效率。比如，导航位置需要增加一个按钮，因为使用了共享功能，在公用文件中增加就可以了，同时也减少了文件容量，

更让人兴奋的是，在你完成这些页面制作后，可以直接导出成为一个可以点击交互的网站，就像Axurerppro那样，fireworks自带公用库，ADOBE吸收了Flash软件的这一优点，用库中的这些图形按钮表单等元件，导出生成网页后是可以进行点击，下拉，输入动作的，能够对网站提前进行模型预览，交互流程测试，减少了后期出现问题的风险以及一些不必要的返工情况等。公用库的这些组件还能通过自定义，制作自己需要的样式，可方便保存，共享使用，大大减少工作量，提高了效率，在视觉统一，UI规范上也很有意义。

为什么不是Photoshop？

没有最好的，只有最合适的

这里，我想说我们现在讨论的不是一个软件的好或坏，Photoshop是一个非常优秀的设计软件，这是大家一致公认的。我在学习设计之初学的也是photoshop，但我认为Photoshop更适合做平面设计，在对图形要求高精度，高清晰度，高表现力的平面设计中，才是它表现的舞台。书籍，名片，印刷，户外广告，那些色彩绚丽，如梦似幻的作品，平面设计师们用他们卓越的技艺，结合Photoshop这一设计利器，让我们真实的感受到了设计之美。

不过Photoshop软件相比fireworks就显得庞大臃肿，占内存，在photoshop里拖动图片，明显的感觉有延迟，而在fireworks中却十分灵活。photo中导出的图片也明显比fw中导出的大。所以说photo适合做精度要求高的印刷品，相反fireworks却不适合，它导出的图片印刷后总感觉颗粒比较粗，没有photo那么精细，恰恰网络中需要的正式fireworks这种图片压缩方式。

我们是WEB设计师

最后，大家可以在实践中去比较下这2个软件的优缺点，去真实感受一下Fireworks专门为WEB设计师们准备的那些便捷的功能，如果你是一名平面设计师，请无视以上。

我们的目标是----更快，更好，更便捷。