Drgonlcl

导航

 

1原型设计工具比较

1.1基本要求

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

1.2原型设计工具

1.2.1墨刀

(—)简介

墨刀,也是原型图制作软件,拥有着PC端、手机端、网页版这几个方面,可以让你随时随地可以原型设计制作 。

(二)优点

  1. 功能强大:可满足产品经理、设计师、开发在产品设计和团队协作上的主要需求,不需要采购多款工具来回切换同步。

2. 功能特色: 内置丰富的素材广场、图文结合的PRD模式、细粒度的权限管理等特色功能,是经常会用到的高频功能,显著提升了创作和沟通效率。
  3. 简洁易用:产品界面简洁易用,上手快,学习成本和切换成本低,真正方便全员使用。

墨刀主要是用于移动端的app原型制作!其控件的拖拉、大小的调整,都会自然去匹配相应的母版大小,可以说是比较人性化的了。再者,墨刀提供了强大的共享创建功能,方便用户手机上预览原型。

(三)缺点

  1. 不自由:这与墨刀的产品定位有关,清晰定位为移动端原型设计工具,因此在交互效果上、控件组合上,操作面板的选择上都不如AXURE 灵活,并且效果切换因为是采用连线的方式。

2. 付费:需要充费才能够使用更强大的共享创建功能。

墨刀不好的点就是在交互效果、控件组合、操作面板的选择等等方面上都没有Axure灵活,内置交互效果包括点击、滑动、滚动等,做高保真原型的时候也不大够用;另外,效果切换因为是采用连线的方式,有时会让用户产生错乱的感觉。

(四)领域

  • 产品经理:可以利用自带组件库和素材广场轻松完成原型设计;

  • 开发人员:通过一个链接即可获取所需的标注、切图等设计资源;

  • 测试人员:参考内置的PRD模式就能直接核对功能需求点;

  • 市场销售:制作产品demo,与客户演示更传神;

  • 设计师:使用Sketch插件,就能一键上传设计稿件,交付开发;

  • 运营:可以更好的梳理活动需求


1.2.2Axure

(一)简介

Axure作为一款专业的快速原型设计软件,其实在功能上是十分齐全的,并且交互的样式也比较多样,主要是通过动态面板、函数、中继器等几个模块就几乎可以实现任何常见的交互效果,所以说Axure在制作PC端原型图上是占有非常强大的优势的 。

(二)优点

  1. 即可以画图,又可以做文档,画图的难度比PS低,写文档比word灵活。
  2. Axure有一套非常强大的交互编辑器,可以实现复杂的逻辑的关系处理,使得模拟更加真实。
  3. 使用成本几乎为零。

Axure界面共有九大版块,使用者可以有更好的制作原型体验!还有一个很值得说的点,就是Axure有自带的元件库,如果想要制作更多的原型而想要用到其它样式的元件库的话,那么是可以自行导入进去使用的 。

(三)缺点

  1. 不好看,在设计师眼中,Axure的默认元件和样式都无法接受。
  2. 学习成本高,高级元件的使用有一定学习门槛。
  3. 手机端演示效果差,服务器不在国内,自带元件库用处不大等。

Axure的功能比较多而往往会比较头晕不知道怎么操作

(四)领域

  • Axure的最主要用户是产品经理

  • 其次就是UI/UE

  • 然后是研发。


1.2.3Mockplus

(一)简介

摹客(Mockplus)是成都摹客科技有限公司旗下设计协作品牌,专注于一站式的产品设计和协作平台,为产品开发团队提供全流程协作、高保真设计和设计规范管理支持。

(二)优点

  1. 易用且低学习曲线。对于任何经验水平的用户都是一个好的选择;
  2. 针对不同的设备,有大量的元素和图标库;
  3. 通过简单的拖放,容易地创建交互原型;
  4. 通过拖放快速直观地链接页面。

(三)缺点

  1. 文档支持欠缺;
  2. 不支持手势交互。

(四)领域

  • 产品经理

  • 设计师

  • 前端工程师


2原型设计工具实践

2.1基本要求

利用网络资源自学墨刀或Axure等原型设计工具,并利用原型工具自拟主题进行原型设计。主题可以是二手交易平台、在线听歌、老年手机、相册管理等。

要求:

1)对主题名称、功能、界面设计考虑因素等进行说明;

2)提供至少四个切换界面;

3)对每个界面的界面功能,界面组成,前置条件,后置条件,操作步骤简单说明。

2.2“生鲜电商”原型设计

2.2.1原型设计说明

  • 主题名称——“生鲜电商”

  • 功能:商品搜索,查看商品详情,查看购物车,查看我的账户信息

  • 界面设计考虑:分为“主页”,“分类”,“购物车”,“我的”四大板块


    操作前后的页面跳转
    image


    界面组成元素+组件
    image


    事件的链接
    image


2.2.2界面说明

  • 主页(搜索,查看商品,商品评价,购买后确认订单等)
    image

可搜索,点击“搜索栏”转换至下页:(点击“取消”可跳转回首页)
image


点击“放大镜”图标搜索内容,页面转换
image


查看商品跳转详情
image


商品评价
image
image


选择(点击加入并确认订单
image
image


  • 分类
    image


  • 购物车
    image


  • 我的
    image


    2.3原型设计链接

https://modao.cc/app/aLN4anN5ra80zpcPIyXUlQ 《生鲜电商原型》

posted on 2022-04-12 22:06  李承龙  阅读(88)  评论(0编辑  收藏  举报