`
nkliuliu
  • 浏览: 210059 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

淘宝UED的设计流程

阅读更多

淘宝面试的最后一个环节,是请应聘者向面试官提问,使面试官有机会解答应聘者对公司、团队以及工作等等方面的疑问。在我面 试过的设计师当中,大约有三分之一 会问我:“淘宝的设计流程是怎么样的?”我不是很了解问这个问题的人为什么会有如此高的比例。也许这是一个“安全”的问题,不会对面试有什么危害;也许目 前设计师在工作中普遍碰到“流程”问题或“没有流程”的问题;也许这个话题涉及各家公司的“机密”,确实无从找到相关的资料。

总而言之,虽然来面试淘宝的设计师人数有限,但我斗胆假设:目前国内所有网页设计师中的三分之一想了解更多关于“设计流程”方面的知识,而我们也不 认为这是什么“机密”的话题(我了解的各公司设计过程都八九不离十,名称不同,本质上是一样的)。所以,就在此简单介绍一下淘宝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

居然还有半个半个的步骤?是的,这是我们的用户研究过程。在各个阶段的前后,我们会根据具体情况选择是否投入精力到用户研究上。用户研究的形式也很 自由:给会员打个电话,淘宝旺旺上随便找人聊聊,到公司来做可用性测试,到会员家中访谈……怎么方便怎么实用就怎么做。我们还没有精力放在太多的“学术” 性质的理论研究上,对研究方 法也是不拘一格,“能抓老鼠”就行。关键的关键,研究的结果如何表现到产品上,如何吸收单个用户的意见来服务所有用户。

在这一点上,我们做得还很不够,积累也很薄,需要向同行们多多学习,也请大家多多指点。

最后……

关于流程,要注意:

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

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

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

以上是我们UED团队目前的设计流程,也许你也发现了,它和大多数公司的设计流程是差不多的。我们也在不断地修改和发展这个体系,有不足的地方也请大家多指教。如果你借鉴了我们的流程,在工作中发现有什么问题,也请回来告诉我们,谢谢大家!

 

分享到:
评论

相关推荐

    淘宝UED设计流程图

    淘宝UED设计流程图

    用户体验,用户研究

    - **淘宝UED设计流程图**: 介绍了淘宝平台如何通过用户研究来优化用户体验。 - **联想用户研究中产品设计规划流程图**: 描述了联想如何结合用户研究来进行产品设计规划。 #### 六、总结 用户体验设计不仅仅是关注...

    淘宝前端UED资料 Juicer 一个Javascript模板引擎的实现和优化

    Juicer是一个JavaScript模板引擎,它是由淘宝前端UED团队开发的,其主要目的是为了优化前端的代码结构和提升页面渲染的性能。模板引擎的核心作用是将数据和模板相结合,生成HTML页面,它能够有效地将数据的处理逻辑...

    网页界面设计流程.pdf

    以下将详细阐述淘宝UED(User Experience Design)团队所采用的设计流程,包括三个主要阶段:原型(Prototype)、模型(Mock-up)和演示版(Demo)。 ### Step 1:原型设计 在设计的初始阶段,原型设计主要关注产品...

    移动应用程序交互设计适配之终端屏幕大小

    淘宝UED开发团队在实践中总结了一系列关于移动应用程序交互设计适配的经验,本文将围绕这些经验进行深入探讨。 #### 二、当前热门手机的屏幕大小 在设计移动应用程序时,了解当前主流设备的屏幕特性至关重要。例如...

    编写可维护的JavaScript中文完整版

    完整中文版pdf文件: 1.作者是大名鼎鼎的NicholasZakas,他是《JavaScript高级程序设计》、《Ajax高级程序设计》和《高性能JavaScript》的作者。...中文版由淘宝UED团队负责翻译,质量可靠,著译双馨。

    BANNER设计培训PPT课件.ppt

    在设计流程方面,淘宝的标准步骤包括:理解需求、评估与沟通、制作初稿、反馈与确定、以及后续跟进。这个流程强调了与客户的互动和作品的反复打磨,以确保设计满足需求。 在字体选择上,课件推荐使用清晰易读的...

    淘宝面试题

    ”和“参加淘宝UED前端开发面试后”等相关文件中,可能涉及到HTML、CSS、JavaScript的基础与进阶应用,如响应式设计、跨浏览器兼容性、Vue/React/Angular框架、模块化开发(如CommonJS、ES6模块)、前端性能优化(如...

    JavaScript面向对象编程指南(第2版)

    受到国内众多前端开发人员,如淘宝UED团队的推崇和推荐。 Stoyan Stefanov:Facebook公司工程师、作家、演说家。他经常会在其博客(www.phpied.com)与一些相关会议中就Web开发话题发表独到见解。他还运营着其他一些...

    淘宝网-软件新项目测试方法(与“测试”有关文档共20张).ppt

    - **UED**:用户体验设计。 - **测试经理**:测试资源协调、问题跟踪和解决。 - **测试负责人**:需求评审、测试方案制定、测试执行组织。 - **测试工程师**:设计和执行测试用例。 - **SCM&PE**:负责发布和...

    jQuery实现TaoBaoUED左侧导航.zip

    在本项目中,“jQuery实现TaoBaoUED左侧导航.zip”是一个包含JavaScript特效的资源,主要是针对网页中的菜单导航栏进行优化,模仿了淘宝UED(用户体验设计)团队的设计风格。这个压缩包可能包含了HTML、CSS和...

    IT面试(itmian4)之2015届校招阿里校招笔试面试大礼包

    笔试题目一般围绕着对应职位所需的专业知识、逻辑思维、问题解决能力等,例如研发工程师的笔试题会考察编程语言熟练度、算法设计、软件开发流程等技能,而系统工程师的笔试可能会着重考察网络、数据库、系统架构等...

    leetcode中国-Front-End-Develop-Resource:前端资源整合(学习与分享)

    小程序 Nginx Git VPN 浏览器相关 性能优化 数据可视化 网络安全 兼容性 移动端调试 开发工具 客户端 设计模式 函数式编程 正则表达式 可持续集成部署 代码规范 全栈成长指南 人工智能 推荐的学习博客或者平台 ...

    开源的javascript项目Kissy介绍

    Kissy是一款由淘宝UED团队推出的开源JavaScript框架。本文将围绕这个框架的特点、设计思想、使用方法以及核心API等方面,详细介绍Kissy框架,并对其在前端UI开发中的应用及其优劣势进行探讨。 首先,我们需要了解...

Global site tag (gtag.js) - Google Analytics