产品设计方法与流程 PPT
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
题后，接下来的沟通就会比较轻松。
二、产品原型
• 主要执行人员： • UI、UE、需求部门 • 需沟通人员： • 程序部、销售部
• 在产品原型方面,主要指的是黑白稿或线稿，除 了颜色基本采用黑白的形式，最终出的产品原 型将会和实际产品没区别。这个环节会拟定出 产品页面的宽度,广告的形式,导航基本样式,各 内容的区域的表现形式等
• 主要执行人员：UI、UE、程序、SEO
• 需沟通人员：UE、销售
█ 设计规范
• 考虑到在动态实 现方面,光凭效 果图很难直接的 给予表现，这时 需要配合使用说 明文档及设计规 范规范来做辅助。 比如按钮及文字 链在触发前后的 样式,文字间距 等。
▇ █ 代码及程序开发
• 由UID进行页面的代码开发（CSS DIV），并 需严格参考SEO理出的相关规范，针对一些 AJAX的动态效果还需要程序部人员协助完成， 当静态HTML完成后即由技术人员进行程序嵌 套，并实现预期的功能。 • 这个阶段由UI、UE全程跟踪，保证HTML和设 计稿最大限度相似前提下，对已实现的功能进 行测试，并出交互设计改善文档，提交给技术 人员。
SEO
• SEO则根据原型提出搜索引擎优化的意见, 为制作阶段代码优化做预备. 这个阶段一 定要保证与需求部门沟通到位,当产品界 面最终定稿后,建议再组织一次讨论,这次 用户面对着是实实在在的产品,所感受会 和之前有所不同.对产品效果上来说,这次 的讨论也会有不少收获。
四、界面设计规范及功能实现
产品主要经过以下几个阶段：
• 可行性评估(用户体验研究员，作调查分析) • 产品原型(信息建构师，设计产品架构;互动设计师，作出互动流程 ) • 产品界面设计 (视觉设计师和用户界面设计师，作出页面视觉设计 ) • 规范整理、功能实现 • 产品上线
• 分析报告、优化方案(用户体验研究员，做用户测试确保质量)
主要从以下三方面进行评估: • 数据报告 • 功能性
• 可行性
• 数据报告
• 通过99Click、Netratings、Counter三套系统来进行数据收集，并在分析 报告中指出相应的问题。
• 功能性
• 站在用户角度上，对方案的结构及功能性进行评估，提出并解决操作上 的问题。
• 可行性
• 每个产品初期都是感性的，但在不能保证每个功能都能按原有思 路进行实现，具体还需要和相关技术 人员进行探讨、碰撞后形成 最终的产品思路。
• 当经过可行性评估阶段后,产品经理的思路和设 计师也基本达成共识，接下来将进行原型设计， 主要分为三个步骤来实现 ：纸稿、线稿，黑白 稿、原型
▆
•
纸稿
一般情况下结构图都是 采用word文档描绘，也 可以选择笔和纸的方式 （主要还是比较方便、 易修改，有任何突发的 思路只需要擦一下，就 可以直接在已有的基础 上进行调整），由于之 前的讨论没有实物参照， 在这个环节你一定会发
现更多有趣的问题。
▆ ▇线稿、黑白稿
• 当纸稿确定后，则由UI 或UE使用做绘图工具来 描绘黑白稿(主要使用 Photoshop来进行这个 步骤，跟据个人习惯不 同，大家的方式也有所 区别，比如淘宝UED Team及Baidu UE更多 的则采用线稿的形式)。 UI主要是采用黑白稿， 方便界面设计，在结构 上也会精确到像素,比如: 导航高度40px.头条采 用20px黑体,图片规 格:104x85px,页面的各 区域的留白为5px等等， 只有这样才会发现更多 细节上的问题，当然到 界面设计的同时你也会 尝到更多的甜头。
网络产品设计流程
工业设计0804班邓蓉蓉指导老师苏莎
设计流程概述：
• 大多数产品都是由需求部门提出,当项目 完成审批流程后,就会交由产品负责人直 接和我们(目前UE还处于起步阶段，大部 分设计师主要扮演UI及兼任UE的职责)进 行沟通,进行可行性评估,经过N次讨论后 确定结构、风格、功能、并确定开发周 期及最终的上线时间。
一、可行性评估
• 主要执行人员：UI、UE、需求部门、程 序部 • 需沟通人员：销售部
可行性评估
• 当产品经理确定基本的思路后,会先会跟我们沟 通，并说明这个产品的思路、受众及一些自己 的想法． • 接着会拿来一个结构图来和我们探讨实现方面 的可行性。我们也会预备相关资料与其进行沟 通，主要会从数据报告、功能性及可行性三方 面下手，在探讨的同时会指出功能或结构上的 一些问题，并提出改善方案，这步一定得仔细， UI、UE深入探讨并尽可能考虑到每个实现的细 节,待框架打好后,出好的产品很轻易.但假如在 可行性评估上出现隐患,余下的其它工作也将会 碰到诸多问题。
UE
• UE则开始针对原型进行操作上的优化调 整,召集用户并组织头脑风暴,收集到相关 意见后，由UE整理出交互及用户体验方 面改善意见,并反馈给UI及需求部门。
UID
• UID即开始着手预备制作方面相关文档. 并提出实现方面的意见.等待效果图最终 确定后,则开始相关代码的编制(CSS DIV、 AJAX、Java)。
温馨小贴士：
• 由于各人思考问题的角度不同, 这个环节常碰到大家意见不统一 情况，在接触项目过程中，很多产品经理都会将个人喜好溶入到 产品设计思路中 。作为设计师，跟据自己的经验判定，假如认为 不可取，可以尽最大能力去说服对方，当然前提是把自己的位置 摆正，站在中立的角度上去审阅产品。
• 顺便谈谈沟通，相信大家经常会碰到和产品经理矜持不下的情况， 这时用理论及实际案例去说服对方基本是无效的。建议可以采用 一对一的方式单独沟通，碰到问题先记下来，放到会后进行单独 讨论，人都是要面子的嘛。只要让对方意识到你是在帮他改善问
• 目前产品的雏形已基至的本成型，虽然还没 华丽的外衣，但凹凸有至身型已隐约可见。 下一步将进入界面设计阶段.设计师们也将 再次体会到黑白稿给他带来的各种便利.
主要承接部门
• UI
• UE
• UID • SEO
UI
• 主要针对首页进行风格设计，并出3-4套 界ቤተ መጻሕፍቲ ባይዱ,最终挑选出2套左右提交给需求部 门,同时也会指出设计师自己最满意的一 套，和需求部门进行二,三次碰撞后,最终 拿出定稿。
五 、产品上线
• 主要执行人员：需求部门 • 需沟通人员：UI、UE、程序、销售 模板 无忧-MB5U.COM
• 这个阶段主要是内容的添加，主要由相 关频道编辑完成，对于软性广告位这块 还需要和销售进行协调。完成内容添加 后，由需求部门、UI、UE进行核查，在 保证和内容、功能完整后，进行整体上 线。
项目负责：
项目部门基本是:需求部门(比如:产 品经理，某频道负责人或主编) 、销 售部、程序部 、 UI(界面设计) 、UE(交
互及用户体验) 、 UID(制作) 、SEO(搜索 引擎优化)
设计师要做的：
• UI(界面设计) 、UE(交互及用户体验) 、 UID(制作) 、SEO(搜索引擎优化)
六 、分析报告及优化方案
• 主要执行人员：UE • 需沟通人员：UE、UID、程序、需求部 门、 销售
• 产品上线后，由UE进行数据及意见的收 集，在二周后出相关改善文档，协调各 部门进行优化的工作。
• 完成以上的二个步骤后,产品的基本功能, 结构,规范都已经大致成型.这时就可以叫 上程序部、销售部及需求部门产品经理， 在白板上对着黑白稿做最终的讨论。经 过二次、三次调整，最终定下完整的产 品原型。
▆ ▇ █ 原型
三、界面设计
• 主要执行人员：UI、UE、需求部门 • 需沟通人员：UID、SEO
二、产品原型
• 主要执行人员： • UI、UE、需求部门 • 需沟通人员： • 程序部、销售部
• 在产品原型方面,主要指的是黑白稿或线稿，除 了颜色基本采用黑白的形式，最终出的产品原 型将会和实际产品没区别。这个环节会拟定出 产品页面的宽度,广告的形式,导航基本样式,各 内容的区域的表现形式等
• 主要执行人员：UI、UE、程序、SEO
• 需沟通人员：UE、销售
█ 设计规范
• 考虑到在动态实 现方面,光凭效 果图很难直接的 给予表现，这时 需要配合使用说 明文档及设计规 范规范来做辅助。 比如按钮及文字 链在触发前后的 样式,文字间距 等。
▇ █ 代码及程序开发
• 由UID进行页面的代码开发（CSS DIV），并 需严格参考SEO理出的相关规范，针对一些 AJAX的动态效果还需要程序部人员协助完成， 当静态HTML完成后即由技术人员进行程序嵌 套，并实现预期的功能。 • 这个阶段由UI、UE全程跟踪，保证HTML和设 计稿最大限度相似前提下，对已实现的功能进 行测试，并出交互设计改善文档，提交给技术 人员。
SEO
• SEO则根据原型提出搜索引擎优化的意见, 为制作阶段代码优化做预备. 这个阶段一 定要保证与需求部门沟通到位,当产品界 面最终定稿后,建议再组织一次讨论,这次 用户面对着是实实在在的产品,所感受会 和之前有所不同.对产品效果上来说,这次 的讨论也会有不少收获。
四、界面设计规范及功能实现
产品主要经过以下几个阶段：
• 可行性评估(用户体验研究员，作调查分析) • 产品原型(信息建构师，设计产品架构;互动设计师，作出互动流程 ) • 产品界面设计 (视觉设计师和用户界面设计师，作出页面视觉设计 ) • 规范整理、功能实现 • 产品上线
• 分析报告、优化方案(用户体验研究员，做用户测试确保质量)
主要从以下三方面进行评估: • 数据报告 • 功能性
• 可行性
• 数据报告
• 通过99Click、Netratings、Counter三套系统来进行数据收集，并在分析 报告中指出相应的问题。
• 功能性
• 站在用户角度上，对方案的结构及功能性进行评估，提出并解决操作上 的问题。
• 可行性
• 每个产品初期都是感性的，但在不能保证每个功能都能按原有思 路进行实现，具体还需要和相关技术 人员进行探讨、碰撞后形成 最终的产品思路。
• 当经过可行性评估阶段后,产品经理的思路和设 计师也基本达成共识，接下来将进行原型设计， 主要分为三个步骤来实现 ：纸稿、线稿，黑白 稿、原型
▆
•
纸稿
一般情况下结构图都是 采用word文档描绘，也 可以选择笔和纸的方式 （主要还是比较方便、 易修改，有任何突发的 思路只需要擦一下，就 可以直接在已有的基础 上进行调整），由于之 前的讨论没有实物参照， 在这个环节你一定会发
现更多有趣的问题。
▆ ▇线稿、黑白稿
• 当纸稿确定后，则由UI 或UE使用做绘图工具来 描绘黑白稿(主要使用 Photoshop来进行这个 步骤，跟据个人习惯不 同，大家的方式也有所 区别，比如淘宝UED Team及Baidu UE更多 的则采用线稿的形式)。 UI主要是采用黑白稿， 方便界面设计，在结构 上也会精确到像素,比如: 导航高度40px.头条采 用20px黑体,图片规 格:104x85px,页面的各 区域的留白为5px等等， 只有这样才会发现更多 细节上的问题，当然到 界面设计的同时你也会 尝到更多的甜头。
网络产品设计流程
工业设计0804班邓蓉蓉指导老师苏莎
设计流程概述：
• 大多数产品都是由需求部门提出,当项目 完成审批流程后,就会交由产品负责人直 接和我们(目前UE还处于起步阶段，大部 分设计师主要扮演UI及兼任UE的职责)进 行沟通,进行可行性评估,经过N次讨论后 确定结构、风格、功能、并确定开发周 期及最终的上线时间。
一、可行性评估
• 主要执行人员：UI、UE、需求部门、程 序部 • 需沟通人员：销售部
可行性评估
• 当产品经理确定基本的思路后,会先会跟我们沟 通，并说明这个产品的思路、受众及一些自己 的想法． • 接着会拿来一个结构图来和我们探讨实现方面 的可行性。我们也会预备相关资料与其进行沟 通，主要会从数据报告、功能性及可行性三方 面下手，在探讨的同时会指出功能或结构上的 一些问题，并提出改善方案，这步一定得仔细， UI、UE深入探讨并尽可能考虑到每个实现的细 节,待框架打好后,出好的产品很轻易.但假如在 可行性评估上出现隐患,余下的其它工作也将会 碰到诸多问题。
UE
• UE则开始针对原型进行操作上的优化调 整,召集用户并组织头脑风暴,收集到相关 意见后，由UE整理出交互及用户体验方 面改善意见,并反馈给UI及需求部门。
UID
• UID即开始着手预备制作方面相关文档. 并提出实现方面的意见.等待效果图最终 确定后,则开始相关代码的编制(CSS DIV、 AJAX、Java)。
温馨小贴士：
• 由于各人思考问题的角度不同, 这个环节常碰到大家意见不统一 情况，在接触项目过程中，很多产品经理都会将个人喜好溶入到 产品设计思路中 。作为设计师，跟据自己的经验判定，假如认为 不可取，可以尽最大能力去说服对方，当然前提是把自己的位置 摆正，站在中立的角度上去审阅产品。
• 顺便谈谈沟通，相信大家经常会碰到和产品经理矜持不下的情况， 这时用理论及实际案例去说服对方基本是无效的。建议可以采用 一对一的方式单独沟通，碰到问题先记下来，放到会后进行单独 讨论，人都是要面子的嘛。只要让对方意识到你是在帮他改善问
• 目前产品的雏形已基至的本成型，虽然还没 华丽的外衣，但凹凸有至身型已隐约可见。 下一步将进入界面设计阶段.设计师们也将 再次体会到黑白稿给他带来的各种便利.
主要承接部门
• UI
• UE
• UID • SEO
UI
• 主要针对首页进行风格设计，并出3-4套 界ቤተ መጻሕፍቲ ባይዱ,最终挑选出2套左右提交给需求部 门,同时也会指出设计师自己最满意的一 套，和需求部门进行二,三次碰撞后,最终 拿出定稿。
五 、产品上线
• 主要执行人员：需求部门 • 需沟通人员：UI、UE、程序、销售 模板 无忧-MB5U.COM
• 这个阶段主要是内容的添加，主要由相 关频道编辑完成，对于软性广告位这块 还需要和销售进行协调。完成内容添加 后，由需求部门、UI、UE进行核查，在 保证和内容、功能完整后，进行整体上 线。
项目负责：
项目部门基本是:需求部门(比如:产 品经理，某频道负责人或主编) 、销 售部、程序部 、 UI(界面设计) 、UE(交
互及用户体验) 、 UID(制作) 、SEO(搜索 引擎优化)
设计师要做的：
• UI(界面设计) 、UE(交互及用户体验) 、 UID(制作) 、SEO(搜索引擎优化)
六 、分析报告及优化方案
• 主要执行人员：UE • 需沟通人员：UE、UID、程序、需求部 门、 销售
• 产品上线后，由UE进行数据及意见的收 集，在二周后出相关改善文档，协调各 部门进行优化的工作。
• 完成以上的二个步骤后,产品的基本功能, 结构,规范都已经大致成型.这时就可以叫 上程序部、销售部及需求部门产品经理， 在白板上对着黑白稿做最终的讨论。经 过二次、三次调整，最终定下完整的产 品原型。
▆ ▇ █ 原型
三、界面设计
• 主要执行人员：UI、UE、需求部门 • 需沟通人员：UID、SEO