2009年4月18日星期六
"启动 Google Talk 小工具"——goole talk网页版试用。
Rpple——Apple 产品上的曲线进化历程(3)

Rpple——Apple 产品上的曲线进化历程(1)(2)
6.New Edge
如前,这几个词语“浪漫主义”“理性主义”“New Edge”主要是来划分而用。前面两篇是铺垫,这一篇是交流的主要内容。
在(1)中说到了震惊,那么什么是震惊,大概可以描述如下,比如在“理性主义”时期,当你去想 Apple 接下来会是怎样风格的设计,很难想,而当它出了新产品,“耳目一新”为一震,“就是它就是它”为二震,“知其过程”为三震,当然性能好,可以一直震下去。
回到曲线,我们将这一时期称为 New Edge,也透露着将在Apple产品上出现新的曲线和边缘形式,先看几个对比图:
iPod 5代和6代的侧面比较,仔细看哪里发生变化。
iPhone 1代和 iPhone 3G的侧面对比,侧面变化很明显,但也请仔细比较。
iPod Touch 1代和 iPod Touch 2代的侧面及背面的比较。
从上面几个图的比较可以发现过度的曲线发生了变化,比如iPod Classic本来上表面是一个平面,这个平面的四角有圆弧过度,但是第6代不仅四角圆弧过度,而且四周有了曲面过度,反应在侧视图上就是一条曲线过度。iPhone 、iPod Touch 的侧试图中过度曲线,用感觉来说,就是过度更平缓,而在 iPod Touch 上连续曲线跨过脊背走向了正面。
而这些过度的曲线不再是“理性主义”时期的圆弧过度,而是倾向于自由曲线,我们在说“浪漫主义”时期时,也是自由曲线,但比较可以发现有所不同,此时的自由曲线更克制。圆弧过度你可以简单描述,比如说“R10”的过度,但是自由曲线如何描述呢?至少口头上现在没有什么能描述。
我们可以看一个示意图:
1为一个四边形,2为一个加了圆角,3看上去和2类似,4就是自由曲线的过度。上面的这些绒毛代表着曲线的曲率变化(类似触角线的长短示意此处曲率半径的倒数),即表示一条线上不同位置的弯曲程度。那么2和3看上去差不多,为什么曲率变化情况就不一样呢?没兴趣下面一段可以略过。
~~~~~~~~~~~~~
熟悉软件估计都知道这是因为一个是切线连续,一个是曲率连续。这里也不详谈,可以引入core77上的一些文章,A Periodic Table of Form: The secret language of surface and meaning in product design, by Gray Holland 形式周期表:曲面的秘密语言以及在产品设计中的意义,链接(感兴趣可以一读)。这篇文章从自然界说到产品设计,关于不同类型的曲面,最后页说到了MacBook,在这里引入那里的一张图来示意不同类型的连续的曲面带来的不同的视觉体验。

上面123依次为位置连续、切线连续以及曲率连续,位置连续即两面或两线相交,切线连续即两面或两线相交并相交处的切线方向一致,曲率连续即两面或两线相交并相交处的切线方向一致并曲率大小也相同,通常我们用G0连续,G1连续,G2连续来简称(当然有G3、G4等更高级的连续,依次叫做曲率变化率连续,曲率变化率的变化率连续,曲率变化率(n+1)的变化率连续)。那么在视觉上是有什么不同体验,看上去三个不同方块上光线形成的倒影的边线的情况,G0可以看到倒影的边线断开了,G1倒影的边线连接着,但是有尖点,而G2不仅连接上而且光滑过度,这就是差别。其他请查找相关或者 Class A 曲面的一些资料。
Core77的这篇文章在说MacBook的时候,是以不同的连续情况(G0或G2)出发的,但是这里我想把MacBook前后的变化放在不同曲线上讨论,毕竟看上去是圆弧过度的也可能是G2连续,比如说上面几个黑方块的第3个就是G2连续,但是曲线看上去还是和圆弧过度差不多,对我们来说,前后差别最大的不在于交接点,而是曲率的变化,比如黑块2,3,4比较,4同2、3差别更大。
~~~~~~~~~~~~~
MacBook 随着新版 Unibody 的推出,曲线也发生了类似如上所举的iPod,iPod Touch,iPhone这样的变化,我们先从感觉上再来体验一下从“理性主义”时期到“New Edge”时期不同曲线(曲面)过度的直观体验。我们可以从Flickr上查找一些图片,可以看到人们非常着迷于新 MacBook 的设计。
(图片来自这)那么这两中曲线(曲面)有什么差别吗?各人有自己的体验,总的来说,圆弧过度有时会让我们感觉是模拟时代的东西,Apple 能够把它做到亲和力以及有一点雅致,但是和自由曲线过度的MacBook Unibody相比,后者更有时代感,更薄同时更富张力,更有技术性的优雅之感。
(图片来自这)
“New Edge” 除了自由曲线的过度,还有就是细节对与曲线对于Unibody的烘托作用。
在“理性主义”时代的产品,比如iBook,我们总是看到相交于1点的三面相交都是圆弧过度,带来一种柔和饱满的感觉,而新MacBook 则更富有攻击性,用我们以前的词形容,就是“亮利”,或者说cool。从上面这个图我们从上到下可以看到几条锐利的边界线,最上的一条刚好能衬托住顶上的弧面,而下面几条突出了Unibody的整体感,工艺的品质。
(图片来自这)
另一个增强Unibody的整体感,工艺的品质的细节,当然首先是功能性的。
完。
Rpple——Apple 产品上的曲线进化历程(2)
5.理性主义
和前文一样,我们用“理性主义”这个词并不是来谈主义,只是为了界定,拿一个较顺手的词来用而已。
用 PowerBook G4 钛合金版来打头,这个产品发布于2001年1月,它从前一代 PowerBook G3 进化而来,在设计上大大的简化,将一些适合多余设计的曲面,适合人机的曲面……可以说去掉一切,用最简洁的直线和平面来重新设计。可对比下图:

上面的 PowerBook G3 的线性风格也代表着一段时期工业设计的流行风格,甚至现在有人还在使用,就是用较朴素的曲线代替早先的机器直线风格。
PowerBook G4 不只是一个坦平的盒子,那么以什么来丰富,细节。我们可以看到细小的圆弧到处存在,1/4圆弧、1/2圆弧、圆,触摸操作区的大圆弧也可以看作是iMac上一些元素的继承,这些圆弧增加了整体的精致感,PowerBook G4 也为今后这个产品线以及其他 Apple 产品定下了简洁硬朗的基调(简洁平面+小圆弧过度)。

iBook G3 第二代以及 iBook G4,最早是在2001年5月1号发布,将 PowerBook G4 上的圆弧元素强化,比如上盖A壳的四角,这样的圆弧过度带来亲和力,加上色彩,人们乐于称它为“小白”,但这一种亲和力和 iMac G3 以及前一代的 iBook 的亲和力不同,比如前一代更倾向是一种外向型亲和力,这个我们就称它为内向型亲和力,白色也再一次成为 Apple 的代表色。
PowerBook G4 铝合金版,2003年1月发布,Apple开始使用铝合金,风格接近iBook,上盖四角也出现圆弧过度。
Power Mac G5 ,从柔和光亮的 Power Mac G4 跳到了铝合金机身冷峻精致的 Power Mac G5。
iMac G5,风格延续(方盒子+四边导圆角),但背部出现大跨度的弧面。


新 iMac,MacBook,MacBook Pro
Mac Mini
还有其他产品,不一一列举。
Rpple——Apple 产品上的曲线进化历程(1)

这一篇继续以 Apple 为主题,在半年前 Apple 发布了新一代 MacBook,一年多年推出了 MacBook Air,而当现在再去看这两个产品的一些细节,特别是 Unibody 的边线,一样还会感到震惊,如果要选近几年(甚至更广的时间跨度)工业设计中造型设计最具突破性的产品,无疑我会选 MacBook Air,MacBook 以及 MacBook Pro,此前或者此后,谁能够想到笔记本(或Apple 笔记本)还能如此突破?当然肯定会有人不这么认为,也不会被 Unibody 的边线所震惊,但新 MacBook 的设计是经得起时间考验的,这个时间考验不只是牢固,不只是使用中留下的痕迹带来的体验……而是蕴藏在设计中的美可以不断流露。当然这不只是 Unibody 的功劳,还包括我们这篇要说的“曲线”。
我想在设计师之中,绝大多数都有意无意的模仿过 Apple,那么当我们模仿 Apple 的时候,我们在模仿什么呢?
或许就是类似这样,但不限于这。或许这太简单,那么找一个视觉更丰富的例子:
就是 sonos,也许我们不能称其为模仿,但是 sonos 是少数被认为具有 Apple 设计气质的产品。
那么无论从我们简单的模仿,还是到 sonos,我们可以粗浅的认为所谓 Apple Style 的关键就是圆角,画一个正规简洁的形状,给它一个不大不小的圆角,就接近 Apple 了,至少在几年前是这样的,由此绕一圈热完身,正式引出我们文章的主题:Rpple——Apple 产品上的曲线进化历程
我们都知道 Apple 可以代表简洁设计,从线以及形状上来说,可以说是现代主义风格,比如正四边形,比例控制良好的矩形,在此基础上引入圆角。而这是一般对Apple风格的大致印象,实际上Apple一直在变,我们把起始点定在1998年,来看一下 Apple 产品上这些圆角和曲线的进化历程。
1.浪漫主义时期

我们是浪漫主义的鼓吹者,浪漫主义是追求自我的解放,摆脱束缚,信马由缰。不管这样来形容Apple是否正确,但不可否认的是,在98年之前,Apple 已经压抑很久了。我们不在其他方面展开,只围绕着设计。
98年之前,Apple 的产品与其他PC厂商的产品在设计相差不是很大,也就是整个个人计算机领域虽然时有一些创新设计,但是已经在塑料壳子上循规蹈矩了,或许可以看作从打字机到电视机走出而进入一个成熟期,Apple 保持了早先 Frog Design 时期留下的一些设计元素,比如“雪白”“装饰凹槽”(1982到1988),后期则是 Robert Brunner 主管(1989 到1996),设计出色的 PowerBook 系列产品,此时圆弧线条已经在设计上使用较多了,但这些圆弧如同成熟的套路一样,并没有鲜明地表征什么。

上图来自这。
iMac G3的发布开启了 Apple 新的篇章,也标志着 Apple 设计的 Jonathan Ive 时代的到来,这是 Apple 1998年的1984,只不过老大哥是自己,从此 Apple 焕然一新,个人电脑的设计也出现了新的历程,iMac G3的彩色和半透明流行风一直刮到21世纪。
上图来自这。我们把重点放在曲线,iMac G3 不再将曲线作为一种修饰的服务配角,而是接近尽情挥洒,此时曲线的特征是饱满。无论从正面还是侧面还是顶视,我们都可以看到舒展的线条。
一个能代表整体的细节,就是半圆弧或类半圆弧的使用,比如上图的扬声器,背部的提手,甚至是背部的接线区,见下图。
圆弧无处不在。
上图来自这。
上图来自这。
iMac G3 的设计风格延续到1999年推出的iBook G3 (Clamshell) 以及 Power Mac G4 上。

舒张的完整大圆弧。饱满的曲线给人亲和力以及生命力的感觉,而在当时个人计算机还没有完全脱离精密仪器的形象,而Apple打破了这个界限,肆意挥洒。由于多种原因,也使得Apple的产品容易让人和时尚甚至女性化结合起来,这种影响一直作用到现在,曾几何时,iMac G3 是杂志媒体上个人电脑的代言人。iMac G3 解放 Apple 也解放了个人电脑。
2.后浪漫主义时期
所谓后浪漫主义是指在 iMac 爆发革命之后,在下一个时期到来之前的时期,由浪漫主义进入一个相对稳定期,我们主要是凭产品的设计,并非严格的按照时间。

Power Mac G4 Cube 或者简称为 G4 Cube,2000年推出,2001年终止,这是从 Steve Jobs 离开 Apple 创办的 NeXT 的 NeXTcube 上继承过来,边长7英寸的立方体,虽然 G4 Cube 本身寿命不长,但是它设计的影响远大,包括对 Apple 自己的产品。
透明已经是此时 Apple 的一个风格,我们仍然讨论曲线为主,Cube 的顶面我们可以看到继承自 iMac G3 的大半圆弧。而在 Cube 四周出现的圆弧过度,结合简洁的形状,将成为 Apple 一个主要形态,也就是我们开头说到的“当你模仿 Apple 时,你在模仿什么”的那个特征,我想在那个年代,如果让自己来设计一个方块,很多可能毫不犹豫将另外的边也圆角过度,当然决定 Cube 这样的还有材料的关系。从显示器中,我们也可以看到原先的大圆弧,包括长自由曲线已经开始收缩,走向理性。
Power Mac G4 的升级版,Power Mac G4 Quicksilver,主要是颜色材质上一些变化,如果说前面说的浪漫主义时期是一种开拓,让人感受到亲和力,生命力,时尚等等,那么此时透明以及纯色则在品质的追求上更进一步。
我们将2002推出的 eMac 也归类到这个下面,可以比较一下 iMac G3,曲线由更多的直线形代替,曲线也由肆意的自由曲线过度到基本曲线,比如正面边框的圆角面。
3.插曲1-iPod G1
iPod 第一代,2001年10月23号发布,当时很少有人会想到今后它的辉煌。从曲线上来说,是非常理性的简洁设计,平面-圆角过度-平面。
4.插曲2-iMac G4 (iLamp)
如果我们真把 Apple 历程用浪漫主义、后浪漫主义来分的话(其实这篇文章重点在曲线和风格,不必过分讲究浪漫主义什么意思),那么 iMac G4 无疑是后浪漫主义时期的一次浪漫火花的自燃,或者是 G4 Cube 的灵魂附体。关于这个产品不再详细介绍,但从曲线上我们已经看到理性的一面了。
2009年4月16日星期四
产品经理的前世今生
根据我个人对互联网产品经理(以下简称PM)的理解,画了上面这个草图,想表达几方面的内容: 1、蓝色箭头指向代表PM在工作过程中要接触到的对象。 我做的这个图只能说具有代表性,不具普遍性,因为企业不同、部门组织不同、管理模式不同都决定PM在工作过程中有差异。今天我只是希望用这个图来和大家讨论一下PM在职业生涯中的起点、支点、增长点。 一、产品经理的起点 图中有三条绿色的虚线,分别指向PM,说明这三个部门或者说这三类工种最可能发展为PM,他们分别是负责产品营销的部门、负责产品运营的部门、负责产品实现的部门。 负责产品营销的部门和市场接触最多,对市场的需求也会逐渐的更了解,而一个产品的起点就在于市场的需求。所以只要能把市场需求表达出来,并让产品实 现的部门加以实施,这就已经是PM的起点了。从市场转过来的PM个性很鲜明,沟通能力强、表达能力强、应变能力强,但毕竟还处在过渡阶段,需要学习的方向 是产品的管理和经营,例如设计产品功能并且做出产品初步原型,描述产品逻辑等等。 负责产品运营的部门可以说掌握着丰富的行业资源,他们拥有BD、PR、客服等等工种。他们了解行业,对同类产品的历史和现状甚至小小的改动都知晓。 用网络游戏行业来举例,盛大是一个典型的游戏运营商,也许他们根本不需要自己开发游戏,只需要把别人做好的游戏产品拿来运作就行,可是一旦他们决定要自己 开发一款网络游戏的时候就可以很快的实施,因为他们在运营产品的同时积累了大量的产品经验和市场经验。所以这个部门下的工种也是很容易转为PM的。 负责产品实现的部门,这是现在PM的黄埔军校,可以说80%的PM是从这个部门走出来的。这个部门最了解产品的功能、使用逻辑、数据结构、信息结构等等。他们掌握着产品的“形”。再加上现在好多公司将负责开发的项目经理、负责产品demo的产品设计都称为PM。 还有一种特殊的现象,就是好多企业的老板或者CEO,都在兼任着PM这个职务的事情。 各位看官,您在企业担任的工种是否属于以上几个部门之中呢?如果是,那么可以试试往PM方向发展哦。 二、产品经理的支点 如果想往PM方向发展,或者现在就已经渐渐的进入PM这个角色,那么需要具备哪些支点来支撑PM这个职位的发展呢? 1)脸皮要厚 文章开始那副图表现的是,蓝色箭头以PM为中心,指向不同的部门。说明其在沟通和协调过程中扮演着主动的角色。 各位男士都追过女生吧?主动的前提不就是脸皮厚么?如果在约会之前考虑要是被拒绝了该多丢脸啊,考虑约对方会不会让对方生气,考虑对方是不是根本就不会理睬自己,最后自己被自己吓着了,决定放弃。 PM在工作过程中也是一样,会有很多计划外的事情,例如调整页面、需求变更、迎合市场需要临时做个专题等等。不可能任何事情都在各部门的计划之内, 那么在别人档期之外的事情,PM如何实施呢?都找领导来协调?如果事事都这样还需要PM做什么?那就脸皮厚点,豁达一些,都是有感情的动物,没有什么事情 是协调不了的。丢点面子是小,耽误了事情那就麻烦大了。 另外,PM在产品管理经营过程中,会遇到很多临时性的沟通,不敢保证每次沟通PM都能够理解,都能够记住,需要PM多问多了解,如果PM自身姿态过高,那么很可能因为不重视而出现问题。 至于其他支点或者说PM应该具备的技能,有篇文章说得很全面,包括沟通能力、无授权领导能力、学习能力、商业敏感度、热爱产品、注重细节、日常产品管理能力等等,推荐大家看看《优秀产品经理的核心技能》 作为一名成功的PM,除了具备这些能力之外,还有一个必须的支点,那就是心态,工作1-5年是锻炼一个人的能力,5-10年更多的就是在锻炼心态,关于这个问题以后会专门和大家讨论。 三、产品经理的增长点 担任PM的这三年多的时间里,我深深的被这个职位所着迷,对我来说,PM已经不仅仅是一份工作,更多的是一种生活方式。当然,我也担心时间长了会出现“审美疲劳”的问题,于是我也常想,PM能做多久、能向哪里发展、能如何一直着迷下去。 首先:PM在一个企业中因为接触的领域最广,所以需要学习的东西也要最多,不需要成为专才,但是起码也得是个通才。所以PM是个不断积累的职业,即使有一天你失去了这个职位,那么积累的东西别人是拿不走的。 其次:都说PM其实是这个产品的CEO,那么PM之后出来自己创业至少可以比较快的进入状态,能少走一些弯路。 第三:PM既然是和产品捆绑在一起的,那么产品的市场应该也是和PM有关系的,产品业绩的好坏也需要作为PM考核的一部分,产品卖得好,PM拿的薪水多,没有达到市场预期就扣PM的薪水,那么PM其实可以是个薪酬丰厚的职位。 第四:无论互联网行业还是传统行业,PM都是相通的,跨行业并不难。 等等等等••• 一篇下来,似乎已经脱离的文章开头的那张图,有点跑偏了。对于PM这个工种真是有很多感受,有很多东西可以说,今天就先到这吧。感谢大家百忙中的阅读! |
Adaptive Path:我们最爱的草图工具
有件事呢本应该是显而易见的,我是指如果你用恰当的工具,那么画起草图来会变得相当、相当简单。 我不会穿着网球鞋去滑雪,但我却常常假想自己可以用蜡笔、羽毛笔或者用剩的铅笔头画出工业级效果。喔,太蠢了。最近我才意识到,拥有一套良好的“装备”是多么重要,真是杀牛要用牛刀啊。 下面就是我的“装备”,看看它们是怎样帮助我成为一个更好的用户体验设计师。
1. 网纹收纳袋 我知道你在想什么。收纳袋不是一个画草图的工具。那你就错了,因为:它可以将你的所有工具收纳在一起,方便拿取和带走。这意味着你更可能将它们随身携带,并且因此能够在更多情况下使用。 如果你能够在人们讨论过程中为讨论的对象画一些草图,那么你通过绘画就可以阐明人们所表达的意思,并且可以使每一个人有相同的认识。这种交流过程中实时产生的草图,在促进想像力方面具有无与伦比的力量,并且会被不断地引用、引用、再引用。比如,“记得那天我们画的一个框和两个圆圈。我想我们漏掉了另外一个圆圈...” 2. 暖灰色马克笔 如果你犹豫踌躇于将看上去挺搞笑的线条草图作为专业的业务交付物,那么一支暖灰色的马克笔立即能够使草图更加美观。我通常用灰色来描绘重点,加一些简单的阴影、细微地区分出前景和背景。这样可以使草图更有层次感,并且可以使眼睛更容易解读具体的情景。
3. 蓝色铅笔 蓝色铅笔对初学者来说是很有帮助的,用来先打底稿,然后再墨水描绘。蓝色的铅笔线条易于擦除,并且不会被复印出来或拍出来。 但是注意不要过分依赖于蓝色铅笔。草图又不是艺术品,不需要在细节上尽善尽美或过分挑剔。蓝色铅笔确实能让你给草图修饰过头,哪怕并不需要这样。但在画故事版,或需要描绘特定位置和姿势的人物时,蓝色铅笔确实能让你有如神助。
4. 红色马克笔 红色马克笔很容易就能够让人关注草图的某些部分。尤其是在箭头和动作的指示上。
5. Sharpie®斜头记号笔 我特喜欢用Sharpie®的斜头记号笔。就像其他好工具一样,它能胜任多种角色。我最常用的是调整草图线条的粗细,来凸显最重要的部分。调整线条粗细(基本上就是通过重复描绘的方式)是画草图的一项最简单、最有效的技巧。能够立即让草图具有对比和视觉层次感,使人眼看上去更加舒适,使大脑更容易处理。 我也用斜头记号笔来写字。我觉得,文字和标记像是草图中默默无闻的英雄。我们总担心我们画的草图,但Jessica Hagy却在她《Indexed》封面上欣欣然地用了一个清晰、有冲击力的箭头指向右侧的文字,一下子使得草图具备了“可读性”。
6. Sharpie®常规记号笔 Sharpie®的常规记号笔是整套装备的主力。你将用它来画人、流程图、标记、界面、方块、箭头等等。事实上最好是多准备一些这种笔,因为大量使用它的笔头很容易用旧或起毛。 7. Sharpie®特细记号笔 Sharpie®的特细记号笔尤其适合画界面。在Adaptive Path,我们通常会在设计一开始画一些缩略尺寸的界面想法,之后再为其中一小部分绘制更具体的草图。缩略的尺寸强迫你关注本质的东西。标题、文本区块、照片或功能特性的位置——这些都通过方块和曲线的形式来简单表示。要让这些方块和曲线看上去有意义,就需要较细的笔头了。我们将在 [Good Design Faster] 工作坊(http://www.adaptivepath.com/events/2009/apr/)中作更深入具体的探讨。
8. 小贴纸(Drafting Dots) 小贴纸可以使任何垂直表面变成你的草图展示空间。这些圆形的贴纸能够附着于大部分表面,不会有痕迹而且粘性能够保留很长时间(所以你能够将草图重新贴在其他任意地方)。将草图挂贴起来看上去很简单,但这样使得其他人也能看到,就让草图从一种个人想法转变为了集体解决问题的工具。
所以啦,我是有些喜欢这些工具的,办公用品、缝纫用品之类。去哪里买?可别让我再罗嗦下去啦。但当然了,真正重要的并非这些工具。照片、草图,这些都不是终点。它们是为了告诉我们该如何做。 我们该做什么? 在对未来的设计中,为了展示现在仅存在于想像中的事物,草图是我们最无拘束的工具。它们看上去会怎样?怎么运行?什么形态?如何展示?以及最重要的,我们如何与之交互。如果每一个新的应用我们都是用Visio的绘图形状,那么我们将生活在一个满是单选框和下拉菜单的世界中。过去可能就是这样,但在现在我们所为之设计的世界中——移动设备、多渠道、服务至上——显然并非如此。这意味着是时候考虑用新的工具了,或者说那些老朋友。 如果你有兴趣学习更多关于次世代用户体验设计工具,可以参加我们4月2-3日在旧金山举办的Good Design Faster工作坊。用“NEWS”促销代码来获得10%的注册折扣。 |









