Browse all articles in history

2010春节杂记

| 6 comments 2010-02-22 23:15:24

除了吃吃睡睡探访亲友,春节期间最重要的事情,就是在长春家中整理旧物。这一次整理,正经翻出了不少好玩的东西,比如下面这几样:

西部数据鱼子酱硬盘,容量1624.6MB(yfrog

西部数据鱼子酱硬盘,容量1624.6MB

这恐怕是我现存的最老的计算机硬件了-出厂日期为1995年。除了这个东西以外,我手里还有一块同轴接口的NE2000网卡,也算是个老家伙。说起这个,本来我还买过IDT C6这块CPU的,这东西产量很少,可惜后来被我卖掉了,否则现在当个收藏品也不错。

KV300(yfrog

KV300

我买的第一个正版软件,标价要260块呐,我记得实际花了180多。1998年的事。

其实KV系列(还有当年的Kill系列)的口碑都曾非常好,我那时满硬盘的CIH病毒就是KV300帮我干掉的。再看看现在这些杀毒软件厂商的口碑……我只能说很多事情怪不了别人。

旧光盘(yfrog 1yfrog 2

在宽带普及以前,在玩电脑人手中各种光盘一定是少不了的。粗略算算我手里买的光盘少说也有三、五百张,其中大部分是游戏 :D

素材光盘,还有98年的3D游戏:死亡竞赛(Forsaken)刚学网页设计时搜集的素材光盘,还有98年的3D游戏:死亡竞赛(Forsaken)。

黑暗王朝(Dark Reign)整理旧物又一战果:翻出了前几天和同事聊到的老游戏:黑暗王朝(Dark Reign)。

其实“黑暗王朝”这款游戏很好玩,AI非常高,行动路径的设定在当时也是绝无仅有的,只是在国内似乎不太流行。

《大众软件》1996年10月号(yfrog

《大众软件》1996年10月号

这是我买的第一本《大软》,至今仍然清楚地记得那是在高中放学以后,天已经黑了,我骑着自行车路过一个报刊亭时买下的。从那以后一直到2000年初,我期期不落地购买这本杂志。在那个互联网仍不普及的年代,反复研读《大软》成了我重要的学习途径。

除了《大软》以外,96-99年间各种各样的计算机杂志我买了不少,基本上市面上有的我都买过。其中特别值得一提的有两本,一是《软件报十年精华(1986-1995)》,另一本则是早期的《电脑高手》,这两本书的内容都是既广又深,读起来十分的过瘾。

阿尔卡特 OT715的附赠全键盘(yfrog

阿尔卡特 OT715的附赠全键盘

阿尔卡特 OT 715是我的第三个手机,也是迄今为止外形最讨我喜欢的一款(一个原因是,以后我就开始用形似砖头的智能机了)。715堪称是黑白机时代的机王之一,屏幕够大,功能够强,并且阿尔卡特不惜血本的给它配备了在当时看来很豪华的一些配件,比如数据同步线、数据同步底座、Creation Studio软件、耳机和这款外接全键盘。

刚才Google了一下,发现一群老外直到2006年还在为阿尔卡特OT 501(我的第二款手机)和715编写软件,真是疯子!

唐朝乐队(yfrog

唐朝乐队

唐朝的《梦回唐朝》记得吧!这是当年磁带中附带的歌词页,为了向这支伟大的乐队致敬,我给这页覆了膜。

虽然已经时过境迁,但唐朝和黑豹永远都是我心中摇滚乐的两座高峰。

《雪椰》(yfrog

雪椰

小时候很喜欢看,那个女主角在当时也算是个梦中情人了 :D 可惜作者颜开的更新速度实在太慢,差不多一年才出一本。一个漫画从我上初中就开始画,等到我上大学了还没完呢!

 

就写这么多吧,最近很少更新blog,工作一忙起来,就很难静下心来写东西。

对了,我最近主要在Twitter上说话,欢迎follow我:@felixding

一个十分好用的铃声制作软件:Ringtones

| 14 comments 2010-01-24 21:28:55

我是无意中发现这个软件的,试用了以后让我彻底改观了对铃声制作软件的看法-原来此类软件可以做得这么好用的!

软件启动后会直接读取iTunes的曲库,这样用户就不用再傻乎乎的去一首首打开mp3了。很棒的设计。

软件主界面

选取一首歌曲后,界面下方会直接显示歌曲的信息和波形图。

歌曲的信息和波形图

要截取声音片段,根本不用像我原来用过的此类软件那样、在播放的过程中设定片段开始和结束,而只要用鼠标拖动那个蓝色的区块、并调整区块的大小就行了,非常方便!

修改声音片段

更赞的是它的预览设计之妙完全出乎我的意料!按下右下角的Preview按钮后,软件进入预览模式,此时它会自动重复播放声音片段,无论是你移动了声音片段的位置、还是调整了声音片段的长短,预览都会在操作完毕后自动开始。

做铃声时最麻烦的一点无外乎调整铃声的开头和结尾,常常要反复的修改和预览。很贴心的是,当你修改完结尾后,软件会自动地从后面几秒开始播放,这样马上就能听到调整完的效果,非常方便!

制作完毕后点一下Send to iTunes,铃声就被传进iTunes的曲库了。不瞒你们说,因为担心麻烦,我买了iPhone几个月来从没改过铃声,这还是第一次,呵呵。

添加到iTunes

在Snow Leopard下编译PHP的pecl_http扩展库

| 4 comments 2010-01-14 10:31:50

由于Snow Leopard为64位系统,Apache无法加载直接编译pecl_http出来的http.so,查日志文件可以看到如下提示:

PHP Warning: PHP Startup: Unable to load dynamic library '/Applications/XAMPP/xamppfiles/lib/php/php-5.3.0/extensions/no-debug-non-zts-20090626/http.so' - dlopen(/Applications/XAMPP/xamppfiles/lib/php/php-5.3.0/extensions/no-debug-non-zts-20090626/http.so, 9): no suitable image found. Did find:\n\t/Applications/XAMPP/xamppfiles/lib/php/php-5.3.0/extensions/no-debug-non-zts-20090626/http.so: mach-o, but wrong architecture in Unknown on line 0

Google一圈后,发现要设置一下环境变量:

MACOSX_DEPLOYMENT_TARGET=10.6

CFLAGS="-arch i386 -arch x86_64 -g -Os -pipe -no-cpp-precomp"

CCFLAGS="-arch i386 -arch x86_64 -g -Os -pipe"

CXXFLAGS="-arch i386 -arch x86_64 -g -Os -pipe"

LDFLAGS="-arch i386 -arch x86_64 -bind_at_load"

export CFLAGS CXXFLAGS LDFLAGS CCFLAGS MACOSX_DEPLOYMENT_TARGET

然后在终端下照常编译即可:

phpize

./configure

make

成功加载这个扩展后,phpinfo()中会看到:

phpinfo()中显示的模块信息

代人寻iPhone开发者

| 2 comments 2010-01-08 11:56:30

今天收到一封邮件,要我帮忙寻找iPhone开发者,说是有个项目,具体情况我不熟悉,有兴趣的朋友可以直接和邮件作者联系。经同意,邮件转载如下:

我们现在想要寻找一个iPhone上软件开发的熟手,part time或者full time协助我们开发这款软件,我们支付费用。不需要用到太复杂的算法或者达到很绚的效果,我们只想完成一个在iPhone上运行的iPhone style的应用程序,但紧迫的项目时间以及规划适合iPhone的软件架构这两方面,需要我们寻找资深的开发人员给与我们帮助。

联系人: 李兴华 (我们的技术负责人);张峰 (产品经理)

公司名称: 上海庞米电子信息技术有限公司

邮件: xinghua.li@permian.com.cn; cc: jeff.zhang@permian.com.cn

手机: 13764568757(李); 13818945272(张)

从“产品需求文档”(PRD)到“产品设计文档”(PDD)

| 28 comments 2009-12-21 23:02:34

传统上写产品需求文档(PRD)的做法,就是把用例、流程图和网页原型图一股脑的放到一个Word文档里。一般一个产品都包含乃几十个乃至上百用例,每个用例都有自己的流程图,每个流程图又包含了少则几个多则几十的网页原型图,结果就是产品需求文档变得庞大无比,写的人费事儿,读的人更惨。

自从我受到了这样文档的折磨,我就一直都在琢磨怎么才能把文档写得更简单一点,让阅读的人-通常是设计师和程序员-能够在最短的时间内领会产品的设计。

原来做UI设计师的时候,我创造了一种用流程图来表示产品交互的办法,这个方法受到了很多人的欢迎,这篇文章也引起了一定的反响。其实当时在实际使用的时候,我不仅产出这样一份流程图,还利用网页热区,把流程图中的界面元素(蓝色的元素)和原型网页(HTML文件)给结合起来了,这样设计师和程序员在看流程图的时候,只要用鼠标点一下界面元素,就可以连接到原型网页,非常方便!这个办法我一直都在用,只是当时没有写在文章里罢了。

后来随着工作性质的变化,我需要越来越多地考虑产品的整体和功能、而不是像原来一样只在特定需求内围绕界面做文章,我就开始寻找把用例整合进前述方法的可能。在经过了一段时间的摸索和实践后,我逐渐形成了自己特有的一套产品需求文档的写法,为了表示区别,我称之为“产品设计文档”,简称PDD。

本文就是对PDD的介绍。

PDD的组成部分

PDD有三个组成部分,它们分别是用例、流程图和原型图。

用例

用例从整体脉络上定义了产品所具有的功能。比如对于一个邮件系统来说,“写邮件”、“发邮件”和“删除邮件”等功能都是用例。

用例比较流行的写法,是在每一个用例中标明它的前后置条件和异常情况等属性。不过在PDD中,我完全放弃了上述属性,只保留用例的名称和简要描述。因为“用例”的出发点就是“用户”,如果你站在一个用户的角度来思考产品的功能,你会发现那些属性你根本就不会考虑。并且,各种前后置条件和异常情况,完全可以放在流程图中,这样更清楚。

用例

流程图

流程图是对用例的细化,它可以清晰地表现一个用例所有相关的前置、后置和分支条件。流程图的画法我在“画Web流程图的一点心得”一文中已经说得非常清楚了,在此不再赘述。唯一值得注意的是,我以前并没有意识到流程图本身也是有ISO标准的,因此“画”中使用的流程图元素并不符合ISO标准,也和一些已经成型的系统(比如这篇“描述信息结构和交互设计的图示词汇表”)有出入,因此元素在使用上还存在一些问题。在日常工作当中我已经对元素使用做了修改,以后有时间我会更新“画”一文的内容,也有可能直接把模板放出来。

流程图

原型图

原型图是对流程图中“界面元素”的展现。这个东西没什么可说的。

PDD的表现方式

用例、流程图和原型图一般都是产片需求文档(PRD)中已有的东西,PDD在这点上和PRD没什么区别。而下面要说的表现方式,则是PDD的精髓。我比较孤陋寡闻,还没看到过有人像我这样组织这三块内容,所以姑且认为这是我的首创吧。

用例和流程图

首先把用例和流程图整合起来。方法很简单,利用网页的frame标签,新建几个帧:

  1. index.html-另外两个帧的容器,不用解释吧
  2. navigation.html-导航帧,用于存放用例列表
  3. main.html-默认情况下的主帧,用于存放文档简介、作者、版本和更新日志一类的东西

然后新建一大堆网页,把所有的流程图都放在这些网页里,每个流程图(即每个用例)放在一个网页里,最后修改navigation.html,把用例名称和其对应的网页链接起来。完工以后,页面应该是下面这个样子:

PDD文档首页

左侧为用例,右侧为流程图左侧为用例,右侧为流程图

好了,左侧为用例,右侧为流程图,这样就把用例和流程图整合了起来,并且结构清晰,查看方便。

流程图和原型图

整合流程图和原型图的重点在于,提供一种方便的方式,以让读者能够在看流程图时方便的看到其中包含的原型图。为了达到这个目的,我的做法是:

  1. 在用OmniGraffle画流程图时,选择界面元素(蓝色的那个),然后在“检查器”-“属性:动作”中选择“打开文件”,然后按“选择文件”,找到你的原型图文件并按“确定”,这样你这个元素就和原型图链接起来了。如下图所示:

    在OmniGraffle中链接元素

  2. 在OmniGraffle中输出这个流程图文档时,不是选择图片,而是选择“HTML图像映射”,这样在生成出来的网页上,蓝色的界面元素都是可以点击的,点了以后就链接到原型图。很方便对吧?但这还不够;

    用OmniGraffle输出HTML图像映射

  3. Lightbox,把所有图片链接都改成弹出图层,这次再点刚才那些链接看看,效果是不是更棒?

    用Lightbox做弹出效果

好了,通过这样的方法,产品设计文档(PDD)就将用例、流程图和原型图这三块内容有效的整合了起来。

About

我在厦门拍的照片

丁宇(Felix Ding),电脑Geek,狂热的爱书和爱乐分子,99年迷上网页设计,并从此一发不可收。现在在上海做用户体验/产品设计咨询。Email: felixding[AT]gmail.com。

订阅到RSS

Latest Comments

  • xiaoxian 2010-03-20 20:53:51

    bad_smile.gif bad_smile.gif 一个渴望成为艺术家的人路过。。

  • 王宏伟 2010-03-20 14:32:02

    我突然想到,能否在北京也开这么一个会呢。

  • hiro 2010-03-20 00:50:05

    这个插件如何,xhtml代码很简单:

    <label>4</label>

    jQuery代码:

    ;(function($) {

    $.fn.timer = function(callback) {

    var _this = this,

    oldTimer = _this.text(),

    timer = oldTimer;

    var id = setInterval(function() {

    timer--;

    if(timer == 0) {

    clearInterval(id);

    };

    _this.text(timer);

    }, 1000);

    setTimeout(function() {

    if(callback) {

    callback();

    };

    }, oldTimer*1000);

    };

    })(jQuery);

    jQuery(function($) {

    $('label').timer(function() {

    alert('倒计时结束');

    });

    });

    欢迎回访我的博客,给我提点意见啊!!

  • ktmud 2010-03-19 14:22:57

    顶吴克群~

  • taine 2010-03-19 14:07:15

    不是艺术家,还是露个脸先 eye_up.gif

  • stmadman 2010-03-19 13:49:58

    hum.gif hum.gif hum.gif

  • 个篱 2010-03-19 13:34:05

    angel.gif 支持!

  • JOY 2010-03-18 19:18:35

    期待,有需要的话,我可以当跑腿

  • JOY 2010-03-18 18:37:38

    恩最近对这个也有些迷茫

  • Paris 2010-03-18 15:40:21

    angel.gif hi nice to connect with you!

    活动不错噢,不知到你们的场地定没有. 可以来新单位看看哈, 我们的场地和你们"人本设计"的思想很符合. www.xindanwei.com

Douban