倪爽.的 » 产品设计

[有关设计] 都来学一点跨领域的技能

倪爽 — Sun, 02 Aug 2009 10:28:13 +0000

要不要学

产品设计圈子里，不时提及这样的问题：产品经理要不要学设计？或者：设计师要不要学技术？

这类问题既然能问出来，答案已经挺清楚：要学。大家反复争论的，其实是与之相关的两个问题：怎么学？学多少？

学多少？

普通人掌握一门技能，一般经过了解、理解、熟练、精通这些过程。

学会所有相关技能的成本较高，所以正常情况下，现实的方法是”按需学习”。

比如产品经理这种综合性工作，需要广泛了解相关领域，并至少理解其中某些领域。设计师是流程中一个环节，设计师需要了解和自己衔接的上下游领域，理解那些影响交接的关键点。而工程师到市场这种跨度较大的情况，有所了解、并且随时学习，也就足以胜任了。

什么叫做了解？－－你听得懂同事说的是什么。什么叫做理解呢？－－你明白同事为什么这么说。如果和同事交流时，你脑子里有很多个”啊？”，那么说明你对他们的技能，还学得不够。如果某天你发现，自己理解并熟练掌握了某个相关领域技能，那么恭喜你，你已经具备了跨领域的竞争力。

怎么学？

每个人有自己的学习方法，不多说。这里说说怎么降低跨领域学习的难度。

一是事先发现自己的短处。某位严谨的工程师缺想象力，某位浪漫的设计师没有逻辑性，这就是短处。扬长避短可以大大减少学习难度。

二是从具体实例回头去补充理论知识。学习其他领域知识，最大难度在于无法在有限时间内，完成基础知识到实际应用的积累，无法循序渐进地形成知识体系。所以学习其他领域知识，有点象学口语：先把嘴皮子说利索了，回头再补语法也来得及。

三是利用身边的老师。我们的身边有各种熟练、精通某领域的专家，你要做的只是一句”请教……”

四是好心情。看看这两幅照片，相信你一下就记住了两个新知识：现在的也需要关门，z-index，数字越大、越在上面（其实z-index还可以是负数，详情去请教身边的前端工程师吧）。

照片出处：在这里 >>

欢迎交流，请自行穿越、自行翻越，到遥远深邃的twitter上follow我。

[有关设计] 错误设计导致错误操作的问题

倪爽 — Fri, 24 Jul 2009 16:11:17 +0000

问题开始于抱怨

同事姐姐在9911上抱怨：”绝大多数出租车司机，都无法区别空调温度高低和风量大小这两个不同概念，每次我说’能否把空调温度调高点’，90%的司机会伸手把风量从3扭到1档，而不是把温度从蓝色区域往蓝红渐变方向调高。产品设计的问题？”

这个问题很有意思。在互联网产品设计中，错误设计导致错误操作的事情很常见，怎么从其他产品设计中学习经验呢？所以我一边等车，一边分析产生这一现象的可能原因。

需求决定方法

古人早说了：物中主人意，必是好东西。改进用户体验，得从了解用户需求开始。

油价高涨，司机师傅首要需求是省钱。也许调温比调风速更耗油？这种假设貌似比较牵强。

形式对应使用方式

有凹坑的按钮是按的，有纹路的按钮是转的，下面有槽的按钮是滑动的…按钮的样子，对应它的使用方式。

这是我想到的第二组原因：汽车空调风扇开关，和温控节开关，也许形式有什么不同？（正在阅读的您，不妨也在脑子回想一下这两种开关的外观）大部分汽车上，它们都是圆的、把手都是转动的、大小基本一致、位置非常接近……乍一看很相似啊！不过风扇开关和温控开关，设计上其实有很大差别：前者有刻度，后者连续变化。风扇有1、2、3档，档是一个绝对的概念，3档对应的风速永远那么大。而温控开关属于无级调整，只有相对的大小，转一下，既没法估计”变大了多少”、也没法了解”现在有多大”。

不同设计的开关，对应不同的用法，司机师傅选择有刻度的风扇开关，放弃无刻度的温控开关，这种用法一定有它好处。

用有刻度的开关，好处在于心里有数，心里有数意味着安全，安全意味着可以长期反复操作。汽车如此，网站也一样。

环境改变使用方式

想到此，我正好打到了空taxi。上车后，我立刻去看风扇和温控开关，一看我就笑了。

两种开关和我记忆中完全一致，操作方法的确不同，风扇开关的确有刻度、的确更容易操作，但我忘记一个重要外因：位置。风扇开关靠近司机，温控开关离手比较远。一边开车、一边看路、一边弄开关，使用环境的复杂，让开关位置变得很重要。所以我发现问题的第三种可能性是：顺手。

联系到我们的工作：拥挤的网页上，如果按钮位置不顺手，麻烦就大了。

至于我为什么看了就笑呢？－闭门造车、凭空设想、脱离群众的分析可笑呗。

故事还没有结束

回到最初的问题，问题答案是肯定的：司机师傅的操作，的确和产品设计有关。

第二天吃饭时，我向设计师、产品经理问了同样的问题，由此我们聊出去很远。其实还有很多疑问，比如：为什么不直接问师傅呢？会不会是某种行业习惯呢？也许是数据采样太少了呢？我很少让司机操作、而是自己动手，我是怎么做并且保证不被司机暴打呢？

不如您来告诉我更多问题、以及答案。请自行穿越、自行翻越，到遥远深邃的twitter上follow我。

附录：几种典型的汽车空调风扇、温控开关设计

桑塔纳，风扇是有刻度的拨盘，温控是水平滑动的把手

捷达的，温控器变成了圆形无刻度转盘。右侧四格的控制风向

伊兰特，风扇开关被放到了中间

新版伊兰特，依然保留了风扇的刻度

Audi TT的不同设计：风扇无级变速，温控有刻度

欢迎下载WordPress模板－7color 1.0版

倪爽 — Tue, 09 Jun 2009 01:26:30 +0000

感谢网友反馈，我对7color模板进行了修改。提交到WordPress后，审核已经通过。欢迎下载1.0版本的7color theme for WordPress。

Download | Demo

Change Log

1.0.4 2009/7/12

修改头部title在FireFox下无法点击的错误

1.0.2 2009/7/10

修改头部title行间距
修改sidebar list颜色

1.0.1 2009/6/10

修改顶部导航栏上的rss连接地址

1.0 2009/6/7

重新设计顶部搜索框和导航栏，解决了屏幕过窄时排版错位的问题
重新设计底部widget容器，固定宽度，解决了屏幕过窄时排版错位的问题
改进页面框架，解决IE6兼容性问题
footer部分增加版权信息

WordPress模板－7color，设计背后的故事

倪爽 — Tue, 02 Jun 2009 00:44:26 +0000

本站使用的WordPress模板叫做7color，欢迎各位下载。

这个模板从年初开始设计，在线测试OK后，上周提交到WordPress，现在已通过审核。

说起这个模板，有点八卦。最初的设计图，是休假期间在我奶奶家画的，而CSS部分，基本上在叫做”雕刻时光”的咖啡店里完成。以下是写CSS过程中拍的照片。

我的电脑，WAMP环境，7color模板第一次在本地测试。背景是南京的”雕刻时光”，靠窗男子是小老板。

写模板时用的鼠标。效果不错，我已经推荐N个人购买了

满满两书架的书，可惜我一直忙着弄模板，一本都没欣赏

另外一个书架上的小鸭子和电子琴，怀旧尺度刚刚好

咖啡馆门口的告示栏、广告栏，这就是古代的BBS

咖啡馆入口

改日介绍设计制作这个模板的过程。

欢迎各位下载，欢迎留言交流。

[用户体验] Bing Vs Google，使用速度对比测试，bing完败

倪爽 — Mon, 01 Jun 2009 18:20:36 +0000

在网络产品用户体验中，最基础、最重要的因素是：速度。

微软的新搜索引擎必应bing.com刚刚推出，作为互联网产品设计、用户体验方面的从业人员，我（http://nishuang.de）对bing和google做了使用速度对比测试。此处”使用速度”的定义是：按照搜索引擎最基础操作，测试其最基础页面的载入速度，并以此来模拟用户在实际使用中感受到的速度。

在我所做的对比测试中，选取了5个基础页面和1个特殊页面，它们分别是欢迎页、搜索网页结果页、搜索图片结果页、搜索视频结果页、搜索新闻结果页，以及bing引擎新增的ajax方式搜索更多图片页。为了模拟日常搜索的真实情况，我选择的搜索关键词是”单反 5D II”，这个关键词是一款数码相机。

测试使用FireFox浏览器＋FireBug，FireBug可以测试的数据有：页面http请求数，页面下载数据量，页面下载所需时间。测试过程中，每次载入页面之前先清空缓存。测试成对进行，每一对测试，先测试bing、再测试google，bing页面下载完成后、立即测试google，以最大限度减少网速变化带来的偏差。由于时间关系，测试比较简单，我只测试了一轮，请各位包涵。

为方便一般读者理解，我只采用了下载数据量、下载时间这两项数据。有数据有真相，最终测试结果是：

以上所有图形，都是越短越好。

一共测试了5对、20个数据，使用速度对比测试结果是：bing VS google，0:20，bing完败。

另外我还测试了bing搜索引擎的一个特殊页面：bing搜索图片时，不需要象一般搜索引擎那样不断点”下一页”，bing采用了ajax，只要用户往下滚动页面，bing在页面下面自动添加一行新图片……相信会有很多用户觉得这个功能很酷，anyway，我所关注的是搜索引擎的最基础因素：速度。测试这一个特殊页面是，我不断往下滚动页面，直到bing返回第280张图片。这一过程，累计下载2MB数据，累计使用72秒。（下载这么多数据的感觉，以及内存和CPU的占用情况，不在本测试范围内，作为参考，我的个人感受是：卡。）

回到我测试的初衷：为什么专家、高手们测试bing和google的强大，而我要对比测试bing和google的速度呢？－因为速度是网络产品用户体验中，最基础、最重要的因素。

如果您对以上这个简单测试有什么想法，欢迎留言讨论，或者在twitter上follow我，给我反馈

附件1：测试数据

附件2：测试截屏，左边bing、右边google，可以点开大图

1，欢迎页

2，搜索网页

3，搜索图片

4，搜索图片至第280个结果

5，搜索视频

6，搜索新闻

[有关设计] 微软的Bing会是一个好名字么？

倪爽 — Fri, 29 May 2009 04:10:48 +0000

微软即将推出新的搜索品牌： Bing ，中文名为”必应“。

微软称Bing 为”决策引擎 Decision Engine”，瞄准4 大领域： 购物、旅游、健康以及本地 （via）。这几个服务，是不是有点耳熟呢？没错，今天的bing，就是昨天的Kumo，一个被奚落的日本式品牌名。微软希望用Bing来代替现有的Live Search品牌，对不太会起名字的微软来说，bing还真是个简短有趣的好名字，有了bing，原先繁复诡秘的Live Search Farecast，今天就成了简单直观的Bing Travel。

从产品到商品，需要品牌设计，在品牌设计的诸多环节中，最基础一步：起个合适的名字。

关于起名字，先说个正面例子。palm上一个商品品牌叫做palm treo，在业务低落若干年后，palm洗心革面，推出新手机、新操作系统。OK，新东西需要新名字。新操作系统名字蛮简单：Web OS，web直指其网络特色；新手机叫什么好呢？palm找到命名公司Catchword。从内部的产品名nova开始，经过对几千个名称的取舍（包括命名要避开数以百计的法律障碍，还要关注全球适用性），最后的答案：Palm Prē（via）。Catchword还真是起名字的专家，看看他们的广告语：If you can dream it, we can name it. And give it wings.

接着是个谣传，还是palm，还是pre。作为万众期待的新智能手机，美国运营商激烈争夺发售权，最后Sprint获胜，AT&T只有眼馋。据说，Sprint好容易拿到palm pre发售权后，做了匪夷所思的决定：把palm pre，改叫做Jones。wa！你是indiana jones还是jack jones啊？好在是个谣传，否则年轻貌美的女士们，每天贴身揣个jones，那还不窘死？相比之下，palm粉丝给palm pre起的中文名真不错：胖梨，非但听起来可爱，还直指手机市场上欺行霸市的那些水果：苹果、黑莓。

还有关于品牌的冷笑话，来自黑莓。黑莓品牌有两则冷笑话，一个关于名字－－黑莓用户在街上用黑莓，被路人搭讪：”你用的是蓝莓吧！”。另一笑话关于长相－－黑莓用户在街上用黑莓，被路人鄙视：”看旁边那个人用的山寨E71，丑死了”。其实黑莓很无辜啊，”黑莓”是个很贴切的好名字，来自早期黑莓产品的两大特点：黑色，象草莓籽一样密密麻麻的QWERTY键盘。

那么，回到微软的问题：Bing会是一个好名字么？放在微软手上，这个事还真不好说。一个公司，强大到可以抛弃live这么好的名称，显然有能力把bing推向全世界，显然也有能力把bing变成下一个live。

而且，即便bing是个好名字，并不等于bing将是个好品牌。即便bing是个好品牌，并不等于bing将是个用户喜欢的好产品。

有关Bing品牌的其他八卦 >>

[有关设计] 人性化的星星点点

倪爽 — Mon, 11 May 2009 14:43:46 +0000

抽血

上周体检，照例抽血。

早些年抽血，台词一般是大妈略带贬义说：”男同志，胆子那么小？”。再进化一点，医生会安慰一句”马上就好”，算不上体贴，但总算有点善意。感谢市场竞争、感谢私营医院的出现，终于出现了更人性化、更贴近普通人的抽血台词：”疼吗？”，这一阶段，医院终于开始顾及用户的切身感受。

回到当日，扎针过程中，年轻貌美气质佳的女医生，忽然看着我眼睛问：”是不是很疼？”。没想到医生会这么问，一时间我不知道如何作答，只好含糊地说”OK啦”。

查水表

上班族，平日家里没人，查不了水表。

某天回家，门上有小纸条，标题斗大一个”水”字。正文说：因您工作忙，人不在家，所以我没法查水表，麻烦您自己查一下读数，然后打手机通知我，我的号码是某某某某。因为开头一句设身处地的”因您工作忙……”，我没顾上嘘嘘，立刻看水表、打电话、飞快搞定一切。

以前自来水行业，没有市场化意识，查水表师傅都异常冷酷。要么理直气壮数落用户，要么一言不发拿眼神杀人。

红绿灯

上班路上，我要经过两组人性化的红绿灯。

以前的红绿灯，不考虑细节，搞出很多白痴状况。比较典型一例在南京：两个路口相距50米，各有一组红绿灯，两组红绿灯之间不联动，如果运气不好，司机会连续被红绿灯堵两次……大约120秒。

现在这两组红绿灯，行人红灯提前亮、绿灯提前灭，意思是说：人比汽车慢，如果行人和汽车的红绿灯开关时间一致，那么行人很有可能被困在路中间。

关门曲

最后一个小细节，来自我们家附近的商场。

小时候，商场关门之前，会响起凛冽的电铃声，大家一听就明白：哦，马上打烊了。后来的商场，把电铃换作了悠扬的音乐，比如kenny G，在悠扬音乐中，有个略不耐烦的声音提醒：即将关门，请顾客们赶紧结束购物。

目前最新版的商场打烊提示语，大意如下：即将关门，不用紧张，您慢慢选购，我们等你走了再关门。

至于我们

有时候我挺惭愧，这些曾经嚣张的人，他们慢慢学会人性化。而我们，围绕着用户需求，创造出那么多不人性的产品。

[有关设计] 传说中的纸上线框图

倪爽 — Sun, 10 May 2009 09:43:30 +0000

画线框图/原型图，是每个产品设计人员的基本功。

可以用绘制画线框图的软件工具很多，从word、ppt这样的办公软件，到PhotoShop、illustrator、visio之类的设计软件，当然还有专用的Balsamiq、Axure等等。

那么如何选择线框图/原型图工具呢？

目的决定方法：明确目的，按照目的选择－－不选好工具，选合适的工具
结合自己的能力：产品人员各有专长，有些偏管理、有些偏设计、有些偏开发－－选一个能够扬长避短的工具
习惯成自然：无论选择哪种工具，频繁地使用它、把它用在不同场合－－通过反复训练，掌握它

此外，还有一组很常用的传统工具：纸、笔。

一些新的产品设计人员不太喜欢old school的办法，为什么有那么多强大工具，还要回到老土的笔和纸呢？不如看一下成功人士的实例。PhotoShop不能让你成为毕加索，word不能让你成为JK·罗琳，但毕加索一定画了成千上万张草稿，而JK·罗琳在纸上描绘出了你所熟悉的哈里·波特，你和成功人士的差别在于－－他们以简便的手段积累能力，而你把时间用来研究工具。

所以，请在产品设计中，特别是在学习和练习性质的简单设计中，充分利用手边的纸笔。

下面有两张比较详细的纸上线框图，来自things的开发公司。这两张图，显示了things iphone版的产品设计，原图比较大，请点开图片看细节。

全文看这里 >>

这是产品的实际界面。Things iPhone更多界面见这里 >>

最终，Things得到的评价是：Things definitely tops our list of GTD applications for the iPhone.

Flickr : 互联网, 产品设计, 设计

[网络传播] twitter遭黑客侵入，泄露26张管理界面截图

倪爽 — Wed, 06 May 2009 14:00:33 +0000

Twitter证实，已遭某不知名人士闯入并登入十个帐户，从法国博客网站贴出的屏幕画面照片看来，可能包括艺人布兰妮和艾什顿·库彻的帐户。

Korben博客和另一个网站贴出的13张屏幕画面照片，其中不但显示这些名人Twitter帐户的管理页面，还显示被他们打入黑名单的使用者清单页面，以及其他管理页面。

实际流出的twitter管理界面截图不止13张，目前我拿到26张。以下是最重要的一张截图：

通过这张截图，结合其他具体界面截图，大致可以推测出twitter运营管理的一些想法。

而twitter被黑客侵入的原因也很冷幽默：技术上，这个办法叫做”社会工程学”、”社交工程学”，按照通俗的话来说，黑客猜到了twitter管理员所使用的密码。

Flickr : twitter, 泄密

[有关设计] 互联网产品设计的矛盾－－方法和能力

倪爽 — Sat, 25 Apr 2009 10:01:34 +0000

近期互联网行业，有若干和产品设计相关的新闻。

这是一个好新闻，这不是一件好事

新闻之一，关于设计师：《 Google顶尖设计师离职撰文批评公司缺乏灵活性》。

照片上这位就是事主，Google首席视觉设计师：德格·鲍曼（ Doug Bowman ）。

为什么世界一流的互联网设计师，指责世界一流的互联网公司？鲍曼批评google过分依赖数据。比如在两种蓝色中选择一种，必须以41种辅助色来佐证。又比如想调整3、4个像素，也被要求拿数据来证明其必要性。当数据变成所有设计的基础，这种情况下，设计师就无法做出大胆的决定，从而禁锢了人的设计思维。

以鲍曼为首的一批google设计师，矛头直指google美女副总裁玛丽萨·梅尔( Marissa Mayer )，她是google用户体验方面的负责人。

美女副总裁玛丽萨尚未回应。之前，她曾阐释：”当我在做用户界面设计时，设计师会过来对我说，这里要用这种绿色，或另一种绿色，而我没有必要武断地作出决定，因为我只需要将它们都放在网页上，然后观察用户回馈数据，这样我们就可以通过用户的回馈来科学地证明哪种颜色更好。”

那么强调创造性的顶尖设计师，和依赖数据的美女副总裁，谁对？－－答案是：都对了。都错了。

一切要从数据调查说起……

什么叫做用数字说话呢

设计这种关乎感觉的事，什么叫做用数字说话呢？以快餐店为例，一个典型的数据调查是这样的：

有一天，麦当劳叔叔琢磨：咱们干快餐的，顾客吃饭速度越快、人流量越大、销售额越高，so，怎么让顾客赶紧滚蛋呢？于是他找到了科学家：

“王科学家，我怎么让顾客赶紧吃完走人呢？”
“这个简单啊！红色能刺激神经，你把店堂刷成红色，顾客还没吃完，就想走人了”
“这么简单？你不会骗人吧！”
“我们拿数据说话！”科学家提供的方案是：”选两家店，一家刷成红色，一家刷成白色，天天数人头，三个月后再看数字，保准红店子里流动的人更多。”

于是麦大叔安排小伙子蹲在店门口数人头，三个月后，果然红店多接待了20％的顾客。再一问会计，果然红店多赚了20％还不止。这就是数据的力量。所以，麦当劳、肯德基、永乐豆浆……快餐店一律都是红色的。

互联网企业也用类似的方法，解决设计中的不确定因素。

但是！

被动地统计数据，并不能解决创造性问题。

比如”不下车（drive-through）”快餐店，顾客在车里接受服务。别管红色还是绿色，我们连店堂都不要了。这个违背常规的想法，一定是麦大叔他们扯蛋时忽然想到的。所以，数据统计的方法是对的，拍脑袋的能力也是对的。

但是两边都对的事情，怎么google美女总裁就给办砸了呢？

围绕互联网产品开发，有产品经理、设计师、工程师、客服各色人等。大家专长不同、方法不同、能力不同，吵架的事情，太常见了。所以需要谈判。如果双方说的有道理，形势当然僵持不下，谈判谈不下去怎么办呢！我们干互联网的，总不能撩衣服掏家伙吧？！这时候，就需要领导了。

现实环境里，难得到理想结果

在一个理想的环境里，一位称职的google副总裁，大约会这么和首席设计师说话：

“虽然我们只用数据说话，但鲍老师您设计水准那是相当的高！（潜台词：别生气，我们还靠您混哪）”
“玛丽萨姐您真会说话，老鲍我心领啦！（潜台词：嗯我留下来继续努力）”

可惜，现实中，google的美女和牛人都做错了。估计当时的情形，八成是这样：

“虽然鲍老师您设计水准那是相当的高，但我们只用数据说话！（潜台词：无所谓，不乐意你就滚蛋）”
“玛丽萨姐您真会说话，老鲍我心领啦！（潜台词：嗯你们全家都是数据）”

虽然二者都没处理好，但考虑到领导和被领导的关系，美女玛丽莎显然错得更厉害。

谢谢google，给我们来了这么生动形象的一堂课。

网络转载，请注明出处：http://nishuang.de/archives/2857，传统媒体转载，请与我联系。

最后附赠一个八卦：事情还没有结束

那么鲍老师后来怎么样了呢？

鲍老师去了一家以短小、流行为特色的互联网公司：twitter，对了，就是每句话不超过140个字，连obama都在用的twitter。顺便做一小广告，欢迎在twitter上follow我。

然后，然后事情就黑色幽默了。

此后数天内，网上出现google收购twiiter的消息，消息连绵不绝至今。

如果交易成功，鲍老师将重回google怀抱。

（END）

倪爽.的 » 产品设计

[有关设计] 都来学一点跨领域的技能

相关文章

[有关设计] 错误设计导致错误操作的问题

相关文章

欢迎下载WordPress模板－7color 1.0版

相关文章

WordPress模板－7color，设计背后的故事

相关文章

[用户体验] Bing Vs Google，使用速度对比测试，bing完败

相关文章

[有关设计] 微软的Bing会是一个好名字么？

相关文章

[有关设计] 人性化的星星点点

相关文章

[有关设计] 传说中的纸上线框图

相关文章

[网络传播] twitter遭黑客侵入，泄露26张管理界面截图

相关文章

[有关设计] 互联网产品设计的矛盾－－方法和能力

相关文章