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之后就是这个页面了:
[url]http://favorite.taobao.com/collect_list[/url]——-g,nrxwy2lumhgozsvz2cq3tk6w64-.htm
Step 0.5/1.5/2.5/3.5
居然还有半个半个的步骤?是的,这是我们的用户研究过程。在各个阶段的前后,我们会根据具体情况选择是否投入精力到用户研究上。用户研究的形式也很 自由:给会员打个电话, 旺旺上随便找人聊聊,到公司来做可用性测试,到会员家中访谈……怎么方便怎么实用就怎么做。我们还没有精力放在太多的“学术”性质的理论研究上,对研究方 法也是不拘一格,“能抓老鼠”就行。关键的关键,研究的结果如何表现到产品上,如何吸收单个用户的意见来服务所有用户。
在这一点上,我们做得还很不够,积累也很薄,需要向同行们多多学习,也请大家多多指点。
最后……
关于流程,要注意:
1. 设计流程的目标,在于保证“无论谁来做这个产品的设计,都能达到80分”;
2. “100分”的完美作品,很有可能没有遵循流程,而是天才地融合了创新、传承和执行力的作品;
“流程”这种东西,只有与环境相匹配才能带来正面的作用。
- 大小: 52.9 KB
- 大小: 235.8 KB
分享到:
相关推荐
淘宝UED设计流程图
前端开发 可以学习 淘宝的前端页面是如何开发的
在UED设计流程管理项目中,我们可以总结出以下几个重要的知识点: 1. 用户界面设计:用户界面设计是一个广泛的概念,指人和机器互动过程中的界面。它不仅仅是做“漂亮的界面”,还需要涉及到交互设计。 2. 交互...
UED设计插件则是设计师们为了提高工作效率、简化设计流程而开发的一类工具。这些插件通常集成了多种功能,如原型设计、交互模拟、图标库、颜色提取等,帮助设计师快速实现设计想法。 在本压缩包中,我们可以看到...
在设计过程中,腾讯UED团队可能采用了以下步骤: 1. 用户研究:通过访谈、问卷调查、数据分析等方式,深入理解用户的行为、需求和痛点。 2. 信息架构:构建清晰、逻辑性强的信息结构,使用户能快速找到所需内容。 3...
### 腾讯网UED体验设计之旅知识点梳理 #### 一、概述 《腾讯网UED体验设计之旅》是一本深入探讨用户体验设计(User Experience Design, UED)的专业书籍,主要面向产品经理、设计师以及对用户体验感兴趣的读者群体...
阿里巴巴旺旺产品的用户体验设计流程图(UED流程图)是展示产品开发过程中一系列关键步骤的可视化工具,对于理解和实践高效的产品设计至关重要。该流程图涵盖了从项目启动到发布跟踪的全过程,确保产品能满足商业...
UCD Process(用户中心设计流程)是由Jack.lee提出的UED流程模型,它强调用户研究和交互设计的重要性,并将UED流程分为五个阶段,即研究阶段、概念设计阶段、视觉设计阶段、原型设计阶段和测试阶段。 UED流程是产品...
《UED产品交互设计工作流程详解》 ...以上流程体现了UED团队在产品设计中的系统性和协同性,每个步骤都直接影响到最终产品的用户体验。通过严谨的工作流程,团队可以确保产品不仅满足用户需求,还能在市场上脱颖而出。
【腾讯UED设计提示插件详解】 腾讯用户体验设计团队(User Experience Design,简称UED)是业界知名的设计部门,致力于提供高质量的交互设计、视觉设计以及用户体验策略。这款提示插件是腾讯UED为提升用户在产品...
"一款腾讯UED设计的提示插件"就是这样的一个产物,专为QQ空间量身定制,旨在通过优雅而直观的提示方式,改善用户在使用过程中的信息获取体验。 首先,我们来理解一下"提示插件"的概念。提示插件通常是指一种软件...
这一步骤至关重要,因为它决定了产品设计的方向和目标。 2. 制作流程图阶段:在需求确定之后,团队会开始制作流程图。流程图是描述用户操作过程的图示,有助于团队成员理解和掌握产品操作逻辑。良好的流程图可以...
##### 1.2 UED设计流程 用户体验设计(UED)流程通常分为五个层面: - **战略层**:确定用户需求和产品目标。 - **范围层**:明确产品的功能规格和需求确立。 - **结构层**:构建信息架构、交互流程等。 - **框架层*...
标题和描述概述的知识点主要围绕着“ued规划思路”,即用户体验设计(User Experience Design)的战略思考与实施路径。本文将深入探讨用户体验设计的核心要素,以及如何通过分层策略构建优秀的用户体验,以此提升用户...
在普通的产品团队中,UED工作流程可能包含需求调研、用户研究、概念设计、交互设计、视觉设计、原型制作、用户测试和反馈收集等多个环节。各个环节相互协作,循环迭代,直至产品达到满意的用户体验。而一个产品经理...
- **淘宝UED设计流程图**: 介绍了淘宝平台如何通过用户研究来优化用户体验。 - **联想用户研究中产品设计规划流程图**: 描述了联想如何结合用户研究来进行产品设计规划。 #### 六、总结 用户体验设计不仅仅是关注...
产品经理深入浅出系列课程的第14课聚焦于互联网产品的用户体验设计(UED),这是一门至关重要的主题,尤其是在数字化时代,优秀的产品体验是吸引并留住用户的关键。在本课中,我们将探讨用户体验设计的核心概念、...
以上知识点总结了《产品经理深入浅出第15课-互联网产品的用户体验设计(UED)(下)》文件中提到的主要内容,涵盖用户体验设计的理论与实践、团队结构与职责、产品用户体验分类及设计注意事项等多个方面,以帮助读者...