[转]关于淘宝设计流程的学习

发布者小八 | 张贴在 星期八团队博文 | 发布 06-03-2010

标签:, , , ,

0

  淘宝面试的最后一个环节,是请应聘者向面试官提问,使面试官有机会解答应聘者对公司、团队以及工作等等方面的疑问。在我面试过的设计师当中,大约有三分之一会问我:“淘宝的设计流程是怎么样的?”我不是很了解问这个问题的人为什么会有如此高的比例。也许这是一个“安全”的问题,不会对面试有什么危害;也许目前设计师在工作中普遍碰到“流程”问题或“没有流程”的问题;也许这个话题涉及各家公司的“机密”,确实无从找到相关的资料。
  总而言之,虽然来面试淘宝的设计师人数有限,但我斗胆假设:目前国内所有网页设计师中的三分之一想了解更多关于“设计流程”方面的知识,而我们也不认为这是什么“机密”的话题(我了解的各公司设计过程都八九不离十,名称不同,本质上是一样的)。所以,就在此简单介绍一下淘宝UED的设计流程,期望对这三分之一的设计师有所帮助。
  Step 1:原型(Prototype)设计的第一个阶段,我们称之为原型设计,主要是设计产品的功能、用户流程、信息架构、交互细节、页面元素等等。如果你觉得听上去这些概念都比较悬的话,我就用大白话来说:原型设计,就是完全不管产品长得好不好看,只把它要做的事情和怎么做这些事情想清楚,把它怎么和用户交互想清楚,而且把所有这些都画出来,让人可以直观地看到。
  至于怎么画出来,那就随你了。用纸笔画,用白板水笔画,用Photoshop画,用Visio画,或者像我们一样用Axure画,都可以。只要把上面提到的这些都事无巨细地表达出来。
  在原型的交付物(Delivery,也就是某个阶段的产出物)中,最重要也最常见的就是线框图(Wire Frame),这玩意儿不用多解释了,看下面这张图就明白:
  在画线框图的时候,要把握好细节的刻画程度。有些东西只要画个框就行了,而有些东西需要把文案都设计好。以免你的老板或是需求方揪住角落里的广告banner该有多大这种问题与你纠缠不休,而忽视了最重要的页面主体部分。
  此外,还要牢记:原型就是用来让人改的。它存在的价值就体现在被修改了几次,被更新了几次,以及它的下一步被少改了几次。
  Step 2:模型(Mock-up)在原型被大家接受之后,就该关心产品长得好不好看了。 我们以“模型”这个词来统称该步骤的交付物。和原型相比,它关注于产品的视觉设计,包括色彩、风格、图标、插图等等。
  要清楚的是,这不是一步由“美工”来“美化”的工作。视觉设计师需要对原型设计有深刻的理解,对交互设计和尚未进行的HTML/CSS/JS的Code都要有充分的了解。如果不能从全局的角度来做视觉设计,则只能是做做把水晶效果改成金属效果这样的“自娱自乐”,而对产品本身没有任何有价值的帮助。如果原型说:“在这个页面上,A比B重要。”,那他的脑子里就要有十七八种可以表现“A比B重要”的视觉语言可供选择。这是对设计模型的视觉设计师的基本要求。
  更高一些的要求,才是视觉设计的“原始功能”。“倒底是选水晶效果还是金属效果?”,“这个按钮选什么颜色好?”等等。这一类的思考和选择,应着眼于产品的气质、品牌等等,在各种产品间保持一定的统一,在用户心里打下视觉的烙印。其实要做到这一点是很难的,特别是还要满足上一点的要求。一般来说,如果能90%的把交互设计的成果和品牌形象表达出来,已经是很好的结果了。从我自己来说,就常常很郁闷不能用好的视觉语言来表达自己在原型设计中的想法,总是做完模型就打个七折。
  更更高的要求, 有些问题用交互设计是很难解决的,这时就需要一个有创造能力的视觉师,可以从视觉设计的角度来创造性地解决问题(一时还没想出好的例子,想出来再补上)。
  总的来说,模型设计是件非常困难的事情。它的工具是感性的,但设计过程又要求非常理性,必须在各种约束条件中解决问题。而目前能从较高的角度来来看“视觉设计”的人还不多,大多还停留在“效果”、“风格”等表面议题上。个人以为在“Web标准”和“用户体验”之后,视觉设计是Web设计专业化运动的第三波,市场的需求已经存在,只差有人推动一下。
  模型的设计一般来说都是用Photoshop了,下是是个例子(与原型的例子对应):

  Step 3:演示版(Demo)这步我就不多说了,Demo就是按照原型和模型用xHTML/CSS/JavaScript等等前端技术实现出来,以便后端的开发工程师可以接手编码。这个过程让小马、正淳专门起个新帖来详细介绍吧。只提一点,前端开发在有些公司是不放在设计团队的,而我们认为前端开发从很大程度上来说是对用户体验的提升和保证,开发只是它的一个手段和形式。所以就把这块工作一直留在我们团队,现在看起来这样很棒:)
  把上述原型、模型转为xHTML/CSS之后就是这个页面了:
  http://favorite.taobao.com/collect_list——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm
  Step 0.5/1.5/2.5/3.5居然还有半个半个的步骤?是的,这是我们的用户研究过程。在各个阶段的前后,我们会根据具体情况选择是否投入精力到用户研究上。用户研究的形式也很自由:给会员打个电话,旺旺上随便找人聊聊,到公司来做可用性测试,到会员家中访谈……怎么方便怎么实用就怎么做。我们还没有精力放在太多的“学术”性质的理论研究上,对研究方法也是不拘一格,“能抓老鼠”就行。关键的关键,研究的结果如何表现到产品上,如何吸收单个用户的意见来服务所有用户。
  在这一点上,我们做得还很不够,积累也很薄,需要向同行们多多学习,也请大家多多指点。
  最后……关于流程,要注意:

  设计流程的目标,在于保证“无论谁来做这个产品的设计,都能达到80分”;

  “100分”的完美作品,很有可能没有遵循流程,而是天才地融合了创新、传承和执行力的作品;

  “流程”这种东西,只有与环境相匹配才能带来正面的作用。

(转)

[转]《阿凡达》不是钉子户,是纯正义

发布者小八 | 张贴在 星期八团队博文 | 发布 06-03-2010

标签:, , , ,

0

  一个放松的周末,突然想写点东西。由于自己闲暇至于酷爱看电影。而最有感触的就是前段时间票房最高的电影《阿凡达》,3D很是震撼,特效也是我看的最多的一步,有人说这像拆迁钉子户的感觉,我不以为然,完全没可比性,和拆迁对比完全是心理思想作怪,首先被拆迁房可有个卧底啊,还有个是城管一方的,后来反叛过来,为家园生存而战,牺牲,而最后胜利。

  现实拆迁90%可没有啊,最后都是被拆方无助,强制拆迁了,可以说,完全和《阿凡达》不一样,《阿凡达》更多像侵略战争,像美国打伊拉克一样为了石油,现实的拆迁本身来说土地就不属于一些个人,确实是属于国家,为了个人利益不管集体利益,或者说更希望获得更多金钱补助,也许显钱补得不多,其实那帮人也不完全就对,不要因为一个人在那坚持,大家表面看上去很弱势,就以为他有理,其实这是表面,当然也有些是执法者和政府不对,过于暴力拆迁,但这并不能代表被拆迁人就100%值得同情,《阿凡达》故事,纳威人本身的星球就不属于人类,本身就是他们财产,并没有形成国家和个人,土地使用权的交易,完全是2个独立星球战争,从这一点来说人类确实反面角色,纳威人为自己而战,并不是为本身不属于自己的东西而战,纳威人善良和友善让主角反思,为他们而战,感觉到人性和平相处的一面,现实钉子户却不见得,甚至有些会以极端的方式做出不理性的事情,这不是弱小的举动,而这是没方法,不理性的举动,不值得提倡,可以说这样做出极端选择完全没意思,而不是意气用事。
  《阿凡达》给我们启示是,我们可以为自己的正义和属于自己的东西而战斗,但首先我们自己要有充足理由,而不是无理由的做出无理性的举动,而《阿凡达》表现的不是钉子户,是纯正义。

优秀资源和设计网站分享

发布者小八 | 张贴在 星期八团队博文 | 发布 06-02-2010

标签:, , ,

0

个人收集的一些优秀资源和设计网站。跟大家分享的是经常浏览的国际国内上十分优秀的部分站点,包含创意、视频、网站、平面、建筑、广告等等,希望大家喜欢。

 

NewWebPick – 最权威的网络在线创意与潮流杂志
内容涉及:广告、网站、FLASH、平面、街头艺术、插画、3D、产品与包装、建筑与空间、摄影、时装、试验艺术… 展示全球最前沿的设计作品,收集国际最新的设计资讯,辨析某时期内设计艺术的动向。
http://www.newwebpick.com/

 

Asds of the world – 全球平面创意网
目前,国内各大小创意广告类网站上,您所能看到的国外平面创意作品,绝大多数都来自于adsoftheworld.com,我们姑且称他为:全球平面创意网吧!
http://adsoftheworld.com/

 

The Fwa – 全FLASH酷站集合
外国知名的FLASH酷站收集站点,能被FWA收录的作品无论是前台能够看到的,还有新创意所带来的强大的后台功能都是处于领先状态。
http://www.thefwa.com/

 

2inside – 优秀的视频特效作品网站
令人震撼,威力十足,让你的眼睛无法离开屏幕,因为你不想错过任何一样东西,这里收录了Cho Hak Rae大部分视频作品。
http://www.2inside.com/

 

TWOTHOUSANDSTRONG – 优秀的视频特效作品网站
同样也是非常优秀的视频特效作品网站,里面收录了大量的优秀视频特效作品。
http://www.2000strong.com/

 

iconfinder – 优秀的图标设计参考网站
一个图标设计参考的网站,可以按关键词搜索出大量的图标下载作为参考。
http://www.iconfinder.net/

 

AboutCG – 视觉共和国
专业的数码视频教程提供者,各种二维,三维的优秀教程。
http://www.aboutcg.com/

 

懒人图库
一个非常方便的素材收集网站,包括ico、平面素材、网站等等。

http://www.lanrentuku.com/

 

当我吧
和懒人图库类似,一个非常方便的素材收集网站,包括ico、平面素材、网站等等。

http://www.d500.com.cn/

 

个人网站展示
很个性化得一个国外个人网站,很独特的就是其作品的展示方式。

http://iondrimbafilho.com/#/HOME

 

这次先放这些网站,下次继续分享。

(文/李晓天)

辞旧迎新——2009年的最后一次午餐

发布者小八 | 张贴在 星期八团队活动 | 发布 31-12-2009

标签:, , , , ,

1

31 传说中的背背

 

32笑的有点荡

 

33 去山民居的路上

 

34 这人有点莽

 

35 老毕

 

36 窃窃私语

 

38 莽了

 

37 大飞哥

 

39 凯子

 

40

 

41

 

42

 

43

 

44

 

46

 

47

 

摄影/李晓天   文字/黄鸿川

星期八团队介绍:李晓天

发布者小八 | 张贴在 星期八团队介绍 | 发布 08-12-2009

标签:, , ,

0

关键人物:李晓天

代  号:小天

 

 

未命名

  常以山上一棵松自称,自认为是山上与众不同的一棵松树,在山顶的尽头孤寂着,默默看着世界的徐徐变迁,从小老师就常教育我,你天都“晓得”,为什么…..什么什么的不晓得。很是郁闷。所以我才愿变成一棵松树站在高处看我所应该知道的一切事物。由于站的高望的远。,所以爱好广泛,特别是“打望”。这也是爱好摄影的原因之一。既然为山树的一个品种,出去结识其他树种是必不可少的。所以闲暇之余爱好旅旅游、爬爬山、踩踩水。:)听听自然的音色。

  现在松树来到星期八的这个大家庭。很是开心。这里什么物种都有。大家其乐融融。每天都会听见不同的声音在发出声响。而作为星期八的一分子,从事web和UL设计多年。致力于将设计做得更好,松树在成长,星期八更在成长,等到星期八成功之时,松树也会变成big松的,加油吧。星期八…..我等你