《百世物流UE-UI设计流程》由会员分享，可在线阅读，更多相关《百世物流UE-UI设计流程（16页珍藏版）》请在金锄头文库上搜索。
1、UE/UI设计流程R.DR.D软件软件UIUI设计流程设计流程王兰杰浙江百世物流科技有限公司Wang lanjieEmail:QQ:22998215 3517965Website:http:/ RESEARCHPRODUCT ANALYSEINTERACTION DESIGNPROTOTYPE DESIGNDETAILED DESIGNUSER六个阶段，每个阶段又有关键的工作内容和要求。Date2UE/UI设计流程第二阶段：产品分析产品定位从软件提供者的角度分析产品推出的意义和重点关注的方面，实际考量、 丰满决策层的idea，明确列出产品定位，通过讨论修缮取得决策层的认可 ；用户分析结合竞争产
2、品的分析资料，采用定性分析的方法，获得对产品目标用户在 概念层面的认识；产品概述以软件提供的身份，以最简短的文字，向用户介绍产品，突出产品对用户 的价值。避免功能点的简单罗列，而应该在归纳总结的基础上突出重点；功能需求规格整理在归纳关键功能的基础上，结合竞争产品规格整理的领域认识，从逻辑上 梳理需求规格列表，重在逻辑关系清楚、组织和层级关系清晰。划定项目 （设计和研发）范围；产出物：用户分析文档和产品概述、功能规格列表产品定位用户分析产品概述功能需求规格整理产出物第一次Check是/否通过？Date3UE/UI设计流程第三阶段：交互设计（功能结构和交互流程设计）产品概念模型分析从产品功能逻辑入
3、手，结合对常见软件的经验积累和竞争产品的认识，加上 对用户的理解，为产品设计一个尽量接近用户对产品运行方式理解的概念模 型，成为产品设计的基础框架；功能结构图在产品概念模型的基础上丰富交互组件，并理顺交互组件之间的结构关系；使用场景分析模拟典型用户执行关键功能达到其目标的使用场景；交互流程分析模拟在上述概念模型和功能结构决定的产品框架之中，支持使用场景的关键 操作过程（即鼠标点击步骤和屏幕引导路径）；产出物：产品设计文档的交互设计部分概念模型分析功能结构图使用场景分析交互流程分析产出物第一次Check是/否通过？Date4UE/UI设计流程 第四阶段：原型设计（信息架构和界面原型设计） 信息架
4、构和界面原型设计设计产品界面中应该包含的控件数量和类型、控件之 间的逻辑和组织关系，以支持用户对控件或控件组所 代表的功能的理解，对用户操作的明确引导；所有界 面设计成为一套完整的可模拟的产品原型； 设计要点说明对界面设计的重点添加说明，帮助涉众对设计的理解 ； 产出物：产品设计文档的原型设计部分信息架构和界面原型要点说明产出物第一次Check是/否通过？Date5UE/UI设计流程第五阶段：详细设计（详细设计和伪代码编写）详细设计完善设计细节、交互文本和信息设计（Message box）；设计和逻辑说明对界面控件/控件组/窗口的属性和行为进行标准化定义，梳理完整的交互 逻辑，用状态迁移图或伪
5、代码形式表示； 产出物：产品设计文档的详细设计部分 第六阶段：设计维护（研发跟踪和设计维护）语言文档整理设计通过评审之后，把产品中所有的交互文本整理成excel文档，预备研发 工作；研发跟踪维护进入研发阶段后负责为研发工程师解释设计方案、问题修改、文档完善、 Bug跟踪等；产出物：产品语言文档，设计调整维护详细设计设计和逻辑说明产出物第四次Check是/否通过？完成设计维护进入设计维护EndDate6UE/UI设计流程第一阶段：基础调研 竞争产品分析寻找市场上的竞争产品，挑选3-5款进行解剖分析。 整理竞争产品的功能规格；并分析规格代表的需求， 需求背后的用户和用户目标；分析竞争产品的功能结
6、构和交互设计，从产品设计的角度解释其优点、缺点 及其原因，成为我们产品设计的第一手参考资料。 领域调研结合上述分析基础和资料，纵观领域竞争格局、市场 状况，利用网络论坛、关键字搜索等手段获得更多用 户反馈、观点、前瞻性需求。 产出物：相应的对比分析文档和领域调研报告竞争产品分析领域调研产出物新产品开发任务Date7UE/UI设计流程这是一个著名的模型，把UCD过程中的每个工作步 骤和内容都完整而流畅的概括进来。很大程度上帮 助我理清了UCD相关的混乱头绪。以这个模型为基 础，我整理了一个比较可行的UCD流程。Date8UE/UI设计流程需求需求功能定义功能定义交互设计交互设计视觉设计视觉设计D
7、EMODEMOUI设计（交互/视觉/编码）实现实现PM OR TEAMLEADER软件工程师Date9 第于第一步的用户调研问题，当然迫于条件的限制，我们 不可能有机会去做用户研究相关的工作，通常是从竞争对 手的分析中来获得关于用户的理解和灵感。用Jesse James Garrett的话说，在相同领域做相似的事情的研发 团队，所服务的用户必定具有某种程度的相似性。按照产 品分析和设计套路倒推，解剖优秀产品的设计策略，可能 是快速建立用户认识的窍门。 可能有人觉得理解用户是市场的事，显然这是片面的。其 实理解用户能够在以用户为中心的设计过程中帮助设计决 策，如果没有这个认识，很可能会在后面的设
8、计决策和讨 论中陷入个人英雄主义的表演和政治博弈之中。当然，寻 找用户还能使我们收获更多的领域知识，整理对手的优缺 点，并能在后续的概念设计、交互设计和原型设计中提供 极大的参考价值。Date10UE/UI设计流程交互设计交互设计视觉设计视觉设计CSS/HTMLCSS/HTML编码编码生成产品原型（线框图）生成产品原型（线框图）生成产品模型（效果图）生成产品模型（效果图）生成产品生成产品DEMODEMO（效果图）（效果图）实现产品（最后阶段）实现产品（最后阶段）Date11UE/UI设计流程一、生成产品原型一、生成产品原型PrototypePrototype （线框图）（线框图）原型就是用来让
9、人改的。它存在的原型就是用来让人改的。它存在的 价值就体现在被修改了几次，被更价值就体现在被修改了几次，被更 新了几次，以及它的下一步被少改新了几次，以及它的下一步被少改 了几次。了几次。 Date12UE/UI设计流程二、生成产品模型二、生成产品模型Mock-upMock-up （效果图）（效果图）在原型被大家接受之后，就该关心在原型被大家接受之后，就该关心 产品长得好不好看了。产品长得好不好看了。 我们以我们以“ 模型模型”这个词来统称该步骤的交付这个词来统称该步骤的交付 物。和原型相比，它关注于产品的物。和原型相比，它关注于产品的 视觉设计，包括色彩、风格、图标视觉设计，包括色彩、风格、
10、图标 、插图等等。、插图等等。 Date13UE/UI设计流程三、生成三、生成HTML/CSSHTML/CSS页面页面DemoDemo就是按照原型和模型用就是按照原型和模型用 HTML(XHTML)/CSS/JavaScriptHTML(XHTML)/CSS/JavaScript等等等等 前端技术实现出来，以便后端的开前端技术实现出来，以便后端的开 发工程师可以接手编码。发工程师可以接手编码。到此到此UIUI部分基本完成，不知道大家对部分基本完成，不知道大家对 此流程有什么看法。不足之外还请大此流程有什么看法。不足之外还请大 家纠正。一起讨论，把家纠正。一起讨论，把UIUI工作流程做工作流程做
11、 好。好。当然，如有条件，最好能参于下前期当然，如有条件，最好能参于下前期 调研，为能更好的理解用户需求，提调研，为能更好的理解用户需求，提 升用户体验。升用户体验。Date14 这个流程不是一个快速开发的流程，虽然在用户分析中投 机取巧节省了一点时间，但是在交互设计阶段需要消耗相 当的努力和创造激情，当然还有时间和成本。在急于看到 成果和关心“成本”的队伍中，很容易被一笔带过或敷衍 了事，很多人习惯以看到界面设计框线图作为设计成果的 标志，呵呵，画框线图其实是很简单的。缺少慎重的交互 分析基础的框线图，很容易浮于形式而缺少内涵。Date15UE/UI设计流程We provide the Best !Date16
