原型设计工具比较及实践

Posted 2021-05-30 hahahhahah784

1、对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点。

一、墨刀

优点：

1.操作效率高，易于上手。

2.动效丰富。

3.分享二维码到微信等十分方便。

4.可自动生成页面流程图。

5.专为移动端产品原型设计而生。基本上能满足移动端产品原型的设计要求并且系统控件都是基于APP，以及系统平台ios和安卓，因此在里面可以首先选择相应的设备布局，减少了不少不必要的工作环节。

缺点：

1.必须在线操作（离线无法保存）。

2.免费版对于项目数量、页面数量有限制。

3.页面流程图不能自由操作。

二、 Axure

优点：

1.有强大的编辑功能, 使得制作素材库会更便捷一点。

2.更快的复制粘贴，素材库和原型库会多一些。

3.可以项目共享，使得同事间可以同步工作，并保留所有工作历史，并可以随时到处历史版本的项目文档。

缺点：

1.正版的Axure售价高，学生等群体可能负担不起。

2.动态面板和中继器较为复杂，要完全弄懂也需要一定的时间成本，学习成本高。

3.Axure只支持在本地设计

三、MockPlus

优点：

1.基础版免费使用，操作简单，上手快，交互简单(只需拖曳就可以)，功能多样，组件资源丰富，预览方式和导出类型多样，支持团队协作。

2.有原型演示，可以帮助前端设计师、后端程序员更好地理解你的原型产品。

3.mockplus有组件库和图标库，界面设计较为方便。

缺点：

1.不支持鼠标悬停，手机预览不是很清楚，日历表组件是静态的。

2.表格功能还需要完善。

 

2、原型设计中的低保真和高保真是什么意思？

低保真（lo-fi）原型设计是将高级设计概念转换为有形的、可测试物的简便快捷方法。它首要的也是最重要的作用是——检查和测试产品功能，而不是产品的视觉外观。

以下是低保真原型的基本特征：

• 视觉设计：仅呈现最终产品的一部分视觉属性（例如元素的形状，基本视觉层次等）。
• 内容：仅包含内容的关键元素。
• 交互性：原型可以由真人模拟。 在测试期间，熟悉页面流程的设计师就相当于一个“计算机”，实时手动呈现设计页面。此外，也可以给线框图制作交互效果，这种称为“交互线框图”。

高保真 (Hi-fi) 原型的呈现和功能，尽可能类似于发布的实际产品。 当团队能深入了解产品的预期，需要与真实用户一起测试，或获得利益相关者的最终设计批准时，通常会创建高保真原型。

高保真原型的基本特征包括:

• 视觉设计：逼真细致的设计 – 所有界面元素、间距和图形看起来就像一个真正的app或网站。
• 内容：设计人员使用真实或类似于真实内容。原型包括最终设计中显示的大部分或全部内容。
• 交互性：原型在交互层面非常逼真。

3.墨刀原型设计

主题名称：电子书阅读

功能：能进行电子书阅读，购买正版电子书，与相关书友讨论

界面设计：

1.首页界面

界面功能：可以看到每日首推书籍

界面组成：由白色为主色调，由图片、图标、按钮、底部导航栏组成

前置条件：点击首页

后置条件：点击界面上的按钮进入其他界面

操作步骤：点击社区按钮

 

2.社区

界面功能：可以看到最受欢迎的书籍

界面组成：由白色为主色调，由图片、图标、按钮、底部导航栏组成

前置条件：点击社区

后置条件：点击界面上的按钮进入其他界面

操作步骤：点击评论广场按钮

 

3.评论广场

界面功能：可以看到许多书友的评论，推荐与求助

界面组成：由绿色为主色调，由图片、图标组成

前置条件：点击评论广场

后置条件：点击点击返回按钮

操作步骤：点击返回左箭头

4.图书类别

界面功能：可以看到图书分类

界面组成：由绿色为主色调，由图片、图标、按钮、底部导航栏组成

前置条件：点击书库

后置条件：点击图书类别上进入购买阅读图书。

操作步骤：点击学习教育

5.购买与阅读界面

界面功能：购买和阅读图书界面

界面组成：由白色为主色调，由图片、图标、按钮组成

前置条件：点击学习教育按钮

后置条件：点击购物车按钮

操作步骤：点击购物车按钮

 

6.购物车

界面功能：进行购买书籍

界面组成：由白色为主色调，由图片、图标、按钮组成

前置条件：点击购物车

后置条件：点击结算进入付款界面

操作步骤：返回，点击我按钮

7.我的界面

 

界面功能：查看我的信息

界面组成：由白色为主色调，由图片、图标、按钮、底部导航栏组成

前置条件：点击我按钮

后置条件：点击界面上的按钮进入其他界面

操作步骤：点击评论