原型设计工具比较与实践
一、原型设计工具间的比较
1.1 墨刀
适用范围：为企业级用户提供权限控制、项目管理及基础项目数据统计等功能，高保真原型图。
优点：
（1）操作简单。简单拖拽和设置，即可将想法、创意变成产品原型。
（2）演示。真机设备边框、沉浸感全屏、离线模式等多种演示模式，项目演示效果逼真。
（3）团队协作。与同事共同编辑原型，效率提升；一键分享发送给别人，分享便捷；还可在原型上打点、评论，收集反馈意见，高效协作。
（4）交互简单。简单拖拽就可实现页面跳转，还可通过交互面板实现复杂交互，多种手势和转场效果，可以实现一个媲美真实产品体验的原型。（5）
（5）自动标注及切图。将 Sketch 设计稿墨刀插件上传至墨刀，将项目链接分享给开发人员，无需登录可直接获取到每个元素宽高、间距、字体颜色等信息，支持一键下载多倍率切图。（）
（6）素材库。内置丰富的行业素材库，也可创建自己的素材库、共享团队组件库，高频素材直接复用。
缺点：
（1）必须在线操作（离线无法保存）；
（2）免费版对于项目数量、页面数量有限制；
（3）页面流程图不能自由操作；
1.2 Axure
适用范围：低保真和高保真原型图。
优点：
（1）可以在另一台电脑上，阅读和编辑Axure原型图；
（2）在Axure预览模式下，可以在浏览器左侧显示网页的目录；
（3）Axure软件有Mac版本和windows版本。
缺点：
（1）如果接收文件同事的电脑，没安装Axure，就打不开了；
（2）不能在手机微信聊天窗口上，直接阅读Axure原型图；
（3）Axure低版本，不能打开高版本的Axure文件。
1.3 Mockplus
适用范围：低保真原型图。
优点：
（1）制作效率很高，适合用“傻瓜式”方式来制作原型的设计师和产品经理，几乎不用学习；
（2）最全面、便捷的原型演示支持，包括：直接演示、导出图片演示、导出可以独立运行的演示包（Win/Mac）、在线和离线的HTML演示。在手机端，可以通过手机浏览器演示和手机App直接演示；
（3）独特的弹出面板和内容面板组件，可灵活编辑，轻易完成常用交互；
（4）团队项目的编辑方式，易懂好用。在线审阅对于协作很有帮助。
缺点：
（1）需要Mockplus的软件支持，才能编辑和演示；
（2）一些复杂的交互效果，暂时不支持；
（3）对PRD（产品需求文档）的支持，还不足。
二、低保真高保真介绍
2.1 原型
原型最基本的含义：原型是设计想法的表达。原型让设计师们得以展现他们的设计，以及模拟真实的使用场景。在数字化的背景下，原型能够模拟用户与界面之间的最终交互行为。根据产品团队的需求，原型可以模拟整个app或仅单个交互行为。原型可以模拟最终产品的运作方式。它支持产品团队测试其设计的可用性和可行性。也有很多人将原型与草图，线框图和模型混淆，实际上它们不同于原型。“交互性”这个概念是原型的根本。
2.2 保真度
原型不一定要看起来像最终产品——它们可以有不同保真度。 原型的保真度指的是它如何传达最终产品的外观（也就是指它的细节和真实感级别）。
2.3 低保真原型
低保真（lo-fi）原型设计是将高级设计概念转换为有形的、可测试物的简便快捷方法。它首要的也是最重要的作用是——检查和测试产品功能，而不是产品的视觉外观。
以下是低保真原型的基本特征：
- 视觉设计：仅呈现最终产品的一部分视觉属性（例如元素的形状，基本视觉层次等）。
- 内容：仅包含内容的关键元素。
- 交互性：原型可以由真人模拟。 在测试期间，熟悉页面流程的设计师就相当于一个“计算机”，实时手动呈现设计页面。此外，也可以给线框图制作交互效果，这种称为“交互线框图”。
优点
- 便宜。 低保真原型制作的明显优势在于其极低的成本。
- 快速。 可以在五到十分钟内创建一个低保真纸原型。 让产品团队可以毫不费力地探索不同的想法。
- 协作。 这种原型设计刺激了小组协作。它的设计不需要什么特殊技能，因此更多人可以参与到设计过程。 即使是非设计师也可以在创意过程中发挥积极作用。
- 清晰。 团队成员和利益相关者对将来的项目有了更清晰的期望
缺点
- 测试期间的不确定性。 使用低保真原型，对于测试者来说，容易不清楚到底什么本来是有效的，什么不是。另外，低保真原型需要用户充分的想象力，也限制了用户测试的效果。
- 有限的交互性。 使用这种类型的原型想要传达复杂的动画或转场效果是不可能的。
2.4 高保真原型
高保真 (Hi-fi) 原型的呈现和功能，尽可能类似于发布的实际产品。 当团队能深入了解产品的预期，需要与真实用户一起测试，或获得利益相关者的最终设计批准时，通常会创建高保真原型。
高保真原型的基本特征包括:
- 视觉设计：逼真细致的设计 – 所有界面元素、间距和图形看起来就像一个真正的app或网站。
- 内容：设计人员使用真实或类似于真实内容。原型包括最终设计中显示的大部分或全部内容。
- 交互性：原型在交互层面非常逼真。
优点
- 可用性测试期间获取有意义的反馈。对于用户来说，高保真原型通常看起来像真正的产品。这意味着，在可用性测试会话中，测试参与者将更有可能自然地表现——就好像他们正在与真实产品交互一样。
- 对特定 UI 元素或交互的测试。借助高保真交互性，可以测试平面元素，或特定交互, 比如动画过渡和微交互。
- 轻松获得客户和利益相关者的认同。这种类型的原型也适合向利益相关者演示。它使客户和潜在投资者清楚地了解产品应该如何工作。一个优秀的高保真原型让人们对你的设计感到兴奋，但低保真的原型则不然。
缺点
- 成本较高。 与低保真原型相比，创建高保真原型意味着更高的时间成本和财务成本。
三、原型设计实践
主题：学无止境小程序
功能：提供培训机构、继续教学、留学、研学服务
界面设计考虑因素：符合现代青年人审美，可以通过边界的操作满足基本的培训机构、继续教学、留学、研学服务需求
1、主界面
界面功能：主界面是软件的初始界面，可以在该界面上选择需要的功能进行实现
界面组成：由白色为主色调，由图片、搜索栏、轮播图、按钮、列表、底部导航栏等元件组成
前置条件：进入该app即为该界面
后置条件：点击界面上的按钮进入其他界面
操作步骤：点击个人进行登录
2、登录页面
界面功能：创建个人信息，并绑定信息。
界面组成：由白色为主色调，由图片、搜索栏、轮播图、按钮、列表、底部导航栏等元件组成
前置条件：进入app
后置条件：点击界面上的按钮进入其他界面
操作步骤：点击搜索
3、搜索页面
界面功能：搜索想要了解的内容。
界面组成：由白色为主色调，由图片、搜索栏、轮播图、按钮、列表、底部导航栏等元件组成
前置条件：进入app
后置条件：点击界面上的按钮进入其他界面
操作步骤：点击课程
4、课程界面
界面功能：进入课程并学习。
界面组成：由白色为主色调，由图片、搜索栏、轮播图、按钮、列表、底部导航栏等元件组成
前置条件：点击课程
后置条件：点击界面上的按钮进入其他界面
操作步骤：课程分享
5、分享界面
界面功能：分享课程给别人。
界面组成：由白色为主色调，由图片、搜索栏、轮播图、按钮、列表、底部导航栏等元件组成
前置条件：点击课程
后置条件：点击界面上的按钮进入其他界面
暂时只实现了这么多功能，后续功能会继续完善。
