原型设计工具实践及比较

发布时间 2023-04-22 22:45:14作者: 陈乾慧

一.原型设计工具比较

1.墨刀

  • 适用领域

    • 浏览器注册使用,Windows、Mac桌面客户端,同时支持iOS、Android端预览。

墨刀为企业级用户提供权限控制、项目管理及基础项目数据统计等功能。

  • 优点

    • 墨刀拥有PC端、手机端、网页版,方便用户随时随地可以进行产品原型设计。
    • 墨刀是一款在线工具,支持云端操作。
    • 墨刀提供了强大的共享创建功能。
    • 墨刀自带了很多成熟的组件,例如键盘,开关,手机模型等。
    • 墨刀控件的拖拉、大小的调整,都会自然去匹配相应的母版大小,非常人性化。
    • 墨刀的交互简单快捷,墨刀做交互特别简单,只要拖动其各种元件左边的这根线,即可链接打开各种页面。
    • 墨刀的APP原型可以下载到手机里,方便用户在手机上预览原型。
    • 墨刀的原型可以分享网页链接。
  • 缺点

    • 墨刀不能画流程图,相对于其他两款功能还不是很全面。
    • 墨刀对交互效果、控件组合、操作面板的选择都不如Axure灵活,内置交互效果包括点击、滑动、滚动等,做高保真原型的时候不够用。
    • 墨刀的效果切换因为是采用连线的方式,有时会让用户产生错乱的感觉。

2.Axure

  • 适用领域

    • Axure RP的使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。
  • 优点

    • Axure是一款高保真的原型设计工具,功能齐全,操作变化多端,在制作PC端原型图上非常有优势。
    • Axure提供强大的交互支持,交互特别灵活多样,通过动态面板、函数、中继器等几乎可以实现任何常见的交互效果。
    • Axure自带组件库并支持第三方组件库,用户可以自做或者下载各种组件,形成自己独有的组件库。
    • Axure拥有强大的编辑功能,用户可以将常用的交互和组件打包,自行制作素材库。
    • Axure有完整的教程及支持文档。
  • 缺点

    • Axure在自带成熟的组件方面稍显单薄,只有一些基础元件。
    • Axure要做交互,需要设置各种条件,或者输入各种用例,通过条件,动态面板状态,隐藏,切换等功能才能形成交互效果,操作麻烦,而且修改起来也比较繁琐。
    • Axure用户去第三方素材库进行寻找素材需要花费不少时间,而且交互操作太多,常常耽误时间,所以用Axure制作原型的速度比较慢。
    • Axure在手机上预览不方便。
    • Axure的专业需求度高,功能不容易搞懂,学习起来有点难度。

3.Mockplus

  • 适用领域

    • 适合软件团队、个人在软件开发的设计阶段使用。
  • 优点

    • Mockplus功能多样,除用于移动APP原型设计,还可以制作PC、网页的原型设计。
    • Mockplus操作简单,可以帮助UI设计师在最短的时间内完成产品原型图的设计。
    • Mockplus支持团队协作。
    • Mockplus组件资源丰富,在组件面板的优化比 Axure 好很多,筛选了一部分常用的组件固定在组件库上面,实现高频操作不用找。
    • Mockplus设计了组件、图标、收藏、母版的 Tab,切换起来很方便。
    • Mockplus交互简单,只需拖曳就可以。
    • Mockplus预览方式和导出类型多样。
    • Mockplus上手快,完全区分于Axure的臃肿和陡峭学习曲线。
  • 缺点

    • Mockplus不支持手势交互。
    • Mockplus的一些组件属性比较少。
    • Mockplus在手机上演示时候偶尔会出现闪退。

二.原型设计

1.主题名称

  • 老年机的一些实用性APP。

2.功能

  • 天气预报:可以获取当天该地区的天气信息。
  • 闹钟闹铃:可以设置闹铃。
  • 相册:可以查看本地相册。
  • 音乐播放 :播放本地音乐。

3.界面设计考虑因素

  • 界面的字体和图标设计的更加大一点,方便老人阅读。
  • 画面简洁,去除繁琐的页面和花里胡哨的功能。

4.切换界面

(1)主页面

  • 界面功能:

    • 看见不同的软件,按照需求选择
  • 界面组成:

    • 微信,QQ,设置,日历,相册,应用商店,地图,音乐等软件的图标
  • 前置条件:

    • 解锁手机屏幕,便会显示主页
  • 后置条件:

    • 点击不同的图标便可以选择不同功能的软件供使用
  • 操作步骤:

    • 点击APP的图标

    (2)天气

  • 界面功能:
    • 了解到该地区当日的天气,如:温度。
  • 界面组成:
    • 天气信息,添加不同地区信息及返回主页面和返回键。
  • 前置条件:
    • 点击天气图标。
  • 后置条件:
    • 返回键或者是返回主页键。
  • 操作步骤:
    • 点击天气信息,查看温度,天气情况,是否晴天。

(3)音乐

  • 界面功能:
    • 可以播放音乐。
  • 界面组成:
    • 音乐播放控制,歌词,歌手信息。
  • 前置条件:
    • 点击音乐。
  • 后置条件:
    • 控制音乐播放。
  • 操作步骤:
    • 点击音乐的播放,拖动音乐的播放条。

(4)相册

  • 界面功能:
    • 可以查看相册信息。
  • 界面组成:
    • 本地的照片及添加项目和返回键。
  • 前置条件:
    • 点击相册。
  • 后置条件:
    • 返回键返回主页面。
  • 操作步骤:
    • 点击照片,可以放大查看。

(5)闹钟

  • 界面功能:
    • 可以按照所需设置闹铃,秒表和计时器。
  • 界面组成:
    • 不同时间的闹钟。
  • 前置条件:
    • 点击闹钟。
  • 后置条件:
    • 点击闹钟开关。
  • 操作步骤:
    • 查看闹钟消息,可以更改闹钟时间。

5.界面切换流程