原型设计工具比较及实践

1.原型工具的比较

a.墨刀

优点：（1）拥有PC端、手机端、网页版，随时随地可以进行产品原型设计，

          （2）定位是主要用于设计移动APP原型，其控件的拖拉、大小的调整，都会自然去匹配相应的母版大小，非常人性化。

          （3）墨刀提供了强大的共享创建功能，方便用户的手机上预览原型。

缺点：（1）墨刀的缺点在于对交互效果、控件组合、操作面板的选择都不如Axure灵活，

          （2）内置交互效果包括点击、滑动、滚动等，做高保真原型的时候不够用；

          （3）另外，效果切换因为是采用连线的方式，有时会让用户产生错乱的感觉。

适用领域： 墨刀的使用方法不难，适合新手，即时没有丰富的经验也可以轻松驾驭软件，完成简单的原型设计；如果需要设计到很多的图层组合、更加完整直观地展示原型效果，建议选择墨刀。

b.Axure

优点：(1)Axure作为一款老牌的原型设计工具，功能齐全，交互多样，通过动态面板、函数、中继器等几乎可以实现任何常见的交互效果，在制作PC端原型图上非常有优势；

          (2)Axure拥有强大的编辑功能，你可以将常用的交互和组件打包，自行制作素材库，这是它的优点。

缺点：(1) Axure的缺点在于，虽然动态面板、中继器等功能都很强大，但是不容易搞懂；   

          (2)Axure的素材也是让人头疼的问题，一般情况下，用户会去第三方素材库进行寻找，需要花费不少时间。

适用领域：较为专业;老牌工具，功能强大，驾驭不易。

c.Mockplus

优点：

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

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

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

缺点：

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

2.表格功能还需要完善

适用领域：

Mockplus除用于移动APP原型设计，还可以制作PC、网页的原型设计，它可以帮助UI设计师在最短的时间内完成产品原型图的设计。

2.低保真与高保真

a.低保真

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

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

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

• 便宜。 低保真原型制作的明显优势在于其极低的成本。
• 快速。 可以在五到十分钟内创建一个低保真纸原型。 让产品团队可以毫不费力地探索不同的想法。
• 协作。 这种原型设计刺激了小组协作。它的设计不需要什么特殊技能，因此更多人可以参与到设计过程。 即使是非设计师也可以在创意过程中发挥积极作用。
• 清晰。 团队成员和利益相关者对将来的项目有了更清晰的期望
• 测试期间的不确定性。 使用低保真原型，对于测试者来说，容易不清楚到底什么本来是有效的，什么不是。另外，低保真原型需要用户充分的想象力，也限制了用户测试的效果。
• 有限的交互性。 使用这种类型的原型想要传达复杂的动画或转场效果是不可能的。

b.高保真

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

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

                        视觉设计：逼真细致的设计 – 所有界面元素、间距和图形看起来就像一个真正的app或网站。

                       内容：设计人员使用真实或类似于真实内容。原型包括最终设计中显示的大部分或全部内容。

                       交互性：原型在交互层面非常逼真。

                       可用性测试期间获取有意义的反馈。对于用户来说，高保真原型通常看起来像真正的产品。这意味着，在可用性测试会话中，测试参与者将更有可能自然地表现——                           就好像他们正在与真实产品交互一样。

                      对特定 UI 元素或交互的测试。借助高保真交互性，可以测试平面元素，或特定交互, 比如动画过渡和微交互。

                      轻松获得客户和利益相关者的认同。这种类型的原型也适合向利益相关者演示。它使客户和潜在投资者清楚地了解产品应该如何工作。一个优秀的高保真原型让人们对                        你的设计感到兴奋，但低保真的原型则不然。

                      成本较高。 与低保真原型相比，创建高保真原型意味着更高的时间成本和财务成本。   

墨刀原型设计

 

主题：智能音箱

 

功能：登录/退出，广场信息，社交娱乐，接受消息，个人信息页面

1.首页界面

界面设计：背景颜色取色白色，整体较为整洁干净

界面功能：选择电话，助理资讯，互动通话，留言，智能通话或者点击更多。也可以在该界面进行歌曲歌单，有声书歌手的搜索。

界面组成：包括积分兑换，天天抽奖，技能发现内容精选，更多内容等点击技能发现可进入技能广场。

前置条件：点击即进入。

后置操作：跳转“登录”页面，跳转“个人信息”页面

2.技能广场界面

界面设计：背景颜色取色白色，整体较为整洁干净

界面功能：可以在技能广场选择娱乐，生活，教育，游戏，工具。可以个性化设置一些功能。

界面组成：包括各种分区和新手指南。以及一些技能发现，新技能的介绍。

前置条件：首页界面点击技能发现

后置操作：点击退出首页界面后，点击消息

3。消息界面

界面设计：背景颜色取色白色，整体较为整洁干净

界面功能：可以进行用户间的信息交流。

界面组成：包含消气提醒和聊天记录，可以查看最近联系和留言。

前置条件：在主页点击消息界面。

后置操作：从消息界面点击我家，跳转至个人信息

（4）个人信息界面

界面设计：背景颜色取色白色，整体较为整洁干净

界面功能：可以进行智能场景和智能设备的添加。
界面组成：包括场景添加和设备添加。

前置条件：点击我家进入个人消息界面。

后置操作：可以选择退出。