《3+1团队》第三次作业：团队项目的原型设计

项目	内容
这个作业属于哪个课程	任课教师博客主页链接
这个作业的要求在哪里	作业链接地址
团队名称	3+1团队
作业学习目标	（1）掌握软件原型开发技术； （2）学习使用软件原型开发工具；
团队博客地址	https://home.cnblogs.com/u/3-1group
项目名称	一起种水果

---

1.原型设计工具简介

原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物，交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导致该产品的可用性。

产品原型可以概括的说是整个产品面市之前的一个框架设计。以网站注册作为例子,整个前期的交互设计流程图之后,就是原形开发的设计阶段,简单的来说是将页面的模块、元素、人机交互的形式，利用线框描述的方法，将产品脱离皮肤状态下更加具体跟生动的进行表达。

我们采用的原型设计工具是MOCKINGBOT(磨刀)，下面对MOCKINGBOT做简单的介绍：



1.简单易用的原型设计工具

无论是 PM 从 0 到 1 绘制原型、还是设计师导入设计稿制作交互，都可以快速轻松搭建全平台设备原型。节约了沟通的成本，降低了试错成本，优化了设计的效率！让看不见的价值，更快速地用可见的方式表达。让革新者有新的方法去改变世界。

2.多种设备完美演示

可以将你的作品分享给任何人，无论在 PC、手机或微信上，他们都能随时查看最新版本。快速生成高保真原型，在原型阶段得到产品反馈，节约开发成本。

3.工作流文档生成，关注产品全局

开发人员可告别复杂的需求文档，打开工作流便可看到全局状态和注释，实时同步进度和文档——工作流成为高效的沟通语言。针对移动应用，可以做出像开发完成的应用一样的原型。产品方案验证和演示的时候，工作流极大地减少了沟通和时间成本。

4.在线团队协同，多人聚焦讨论

产品细节、新增需求、打点评论清晰可见。制作者可以第一时间收到细节反馈，方便意见的统一修改。

5.Sketch + 墨刀 = 交互标注利器

将 Sketch 的设计稿一键导入墨刀即可马上制作交互，工程师还可以通过开发者模式，看到完整的图层信息 墨刀 Sketch 插件极大程度地提升了工作效率，可以一键导入设计稿，几分钟内轻松制作出可跳转的交互原型。

---

2.原型设计工具团队学习总结

在采用原型设计时，用户界面设计员负责维护用户界面原型的完整性，并确保按照用例示意板和边界对象的要求，使用原型构建一个可用的用户界面。

原型设计之于应用开发，是为第一要素。它所起到的不仅是沟通的作用，更有体现之效。通过内容和结构展示，以及粗略布局，能够说明用户将如何与产品进行交互，体现开发者及UI设计师的idea，体现用户所期望看到的内容，体现内容相对优先级等等。

墨刀的教程做的清晰明了，看完【快速使用墨刀-快速上手】【基础手册-工作区】大概就能制作一个有模有样的静态页面，这部分花十来分钟看一下还是很有必要的，可以快速入门。

光静态页面肯定不行，接下来就重点攻克一下【进阶效果】，我觉得墨刀的重点就是【母版】和【状态】了吧，跟着教程好好练习【母版】和【状态】中的案例。这个过程会花费一定时间，但收获也是大大的。

---

3.团队项目github仓库地址链接

3+1团队项目GitHub仓库链接地址：https://github.com/wh0114

---

4.团队项目原型设计成果

页面部分展示


登陆



用户管理

卡卷管理

商品管理

商品管理其他列表

商品管理-新增

订单管理

订单管理详情

也可点击下方链接，直观操作
https://org.modao.cc/app/816c49d7d362baee14efffbf27542f82796048b3

---

5.团队项目的原型设计过程、原型设计心得总结

(1)原型设计过程：

产品的原型设计实现一般区分整体和局部，整体上更多考虑信息架构的设计，如功能结构、导航、菜单、布局排版等方面的，局部上更多考虑功能上的交互设计，如按钮点击、反馈、页面切换、局部模块的整体展示等。从设计实现的角度来看，由总到分逐渐细化的过程是比较适合的。
下面对原型设计的步骤做简单的介绍：
第一、确定产品的整体结构

不管是哪种工作，由总到分逐渐细化的过程通常都是最好的方法，产品的结构设计则决定了产品未来的功能导航结构。一般来讲，我们在做需求分析的时候，都会把几个主要的功能点抓出来，这几个功能点就可以浓缩一下形成产品的初步功能结构。每个产品最终确定下来的一级导航栏里面的各个栏目就是产品的功能结构。
第二、确定产品的布局排版

确定产品的整体结构之后，一般都会先对页面进行布局设计的考虑，然后再考虑对每一个产品页面进行元素的排版。通常我们做产品设计的时候，都会遵循一些已有产品总结出来的布局结构，比如三行三列布局，三行两列布局等，再如左导航右内容的形式，左内容右导航的形式等，这些都是大的布局结构，是整体页面的布局排版。
第三、确定产品的功能模块

功能模块是指数据说明、可执行语句等程序元素的集合，它是指单独命名的可通过名字来访问的过程、函数、子程序或宏调用。功能模块化是将程序划分成若干个功能模块，每个功能模块完成了一个子功能，再软件结构图示把这些功能模块总起来组成一个整体。以满足所要求的整个系统的功能。功能模块化的根据是，如果一个问题有多个问题组合而成，那么这个组合问题的复杂程度将大于分别考虑这个问题时的复杂程度之和。

确定产品的布局排版就相当于决定了某个产品功能模块的放置位置，接着就可以一块一块的确定原型设计内容，使其接近于最终产品的展示样式。这个时候就要用到原型设计的实例了。

按照以上三个步骤一步步坐下来的话，其实产品的低保真原型就出来了。

第四、结合原型设计工具的特性，确定功能模块实现的原理

原理就是要让你自己明白这个东西到底是怎么做出来的，要怎么去做。因为每个实例原型都是一个单独的功能模块或交互效果，当你通过某款原型设计工具去实现的时候，都会有相应的实现原理。如果这个都不明白的话，后面就无从下手了。因此做实例原型之前，原型设计工具的使用基础很重要，必须对工具已经有了一定的熟悉和了解，否则对着一个实现要求，没有任何想法，脑子一片空白，这样肯定是做不出东西来的。这个需要一个过程来培养，多看看别人设计的原型，弄清楚人家是怎么做，然后尝试着自己做一遍，最后想想有没有可以改进的地方。

第五、对每个功能模块进行相对详细的交互设计
　

确定功能模块实现的原理，我们就要对每个功能模块进行相对详细的交互设计。基础的准备工作包含添加组件元素，设置组件排版布局，设置组件属性（命名、大小、方位、颜色、文本等）。基础工作都做完了之后，就可以开始做交互设计了。
第六、交互效果的反复调试

确定功能模块实现的原理，也对每个功能模块进行相对详细的交互设计，那么我们就想看到真实的交互效果。很多交互效果都不是一次性设置之后就能成功的，特别是复杂的交互效果，都需要做多次的效果尝试，反复的进行修改调整，最后才达到最终的效果。这个过程一定要有耐心，慢工出细活，思路是对的，想法也有可行性，那就一定能把效果做出来，哪怕最终真的没有将效果做出来，也可以反过来思考，是自己对工具的特性不了解造成的，还是自己的知识水平局限性。

原型设计心得总结：

以上是产品原型设计过程六大步骤，按照这个步骤的话，再进行产品的原型设计会简单很多。对于产品人员来说，做原型不应该成为负担，而是要将它变成得心应手的沟通工具，沟通成本是无法估量的巨大，如何降低沟通成本是产品整个研发周期里面都需要考虑的问题，而产品的需求是源头，源头把握住了，后期就会通畅很多，这也是做原型设计最重要的目的。而学习原型设计最为核心的点就是多动手，只看是学不会的，一定要动手操作，多练就会了，再加上产品的设计思路，产品的雏形就是这么产生的。

产品的原型设计所起到的不仅是沟通的作用，更有体现之效。通过内容和结构展示，以及粗略布局，能够说明用户将如何与产品进行交互，体现开发者及UI设计师的idea，体现用户所期望看到的内容，体现内容相对优先级等等。产品原型设计对于设计师来说也是一个非常好的学习过程。

---

转载于:https://www.cnblogs.com/3-1group/p/10781618.html