原型设计工具比较及实践

Posted 2023-04-22 wangzibin

目录

• 一 ，原型设计工具比较
  • 1. 墨刀
  • 2. Axure
  • 3. Mockplus
• 二 , 原型设计
  • 1.主题名称
  • 2.功能
  • 3.界面设计考虑因素
  • 4.切换页面
  • 界面交换流程

一 ，原型设计工具比较

1. 墨刀

• 适用领域
    墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理 。
• 优点：
  • 帮助中心：从每一个组件、图标可以链接进入其帮助中心，查看使用指南，一条龙服务，非常方便，非常适合初学的新手。
  • 由于产品设计团队都中国的，相对于Axure，比较符合我们的作业习惯，登陆方便 支持网页登陆。
  • 墨刀将带来全新的设计工具，响应式布局、布尔运算、渐变色填充，甚至是协作，且远不止此。性能优化实现高并发高可用的协同设计，毫秒级响应，操作体验更顺滑，智能化操作设计，减少繁琐的操作步骤，提升设计效率。
• 缺点：
  • 需要收费，才使用墨刀；不够灵活，自由度低；免费内容极少，只能网页操作，无法离线保存。

2. Axure

• 适用领域
    Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。
• 优点：
  • 免费，功能强大，交互功能比较强大，处理可以更细节；
  • 有强大的编辑功能, 使得制作素材库会更便捷一点，更快的复制粘贴，素材库和原型库会多一些，有较为完善的管理功能；
  • 可以项目共享，使得同事间可以同步工作，并保留所有工作历史，并可以随时到处历史版本的项目文档。
• 缺点：
  *使用需要安装；保存在本地，安全性较差；操作繁琐，而且文件一大就容易卡死。

3. Mockplus

• 适用领域
    摹客（Mockplus）是成都摹客科技有限公司旗下设计协作品牌，专注于一站式的产品设计和协作平台，为产品开发团队提供全流程协作、高保真设计和设计规范管理支持。摹客可以自产出高保真设计，支持多款主流设计工具（Sketch/PS/XD/Axure等）的设计稿交付，团队成员在产品、设计到开发的各个工作环节，利用多种设计工具，都能使用摹客平台协同工作。
• 优点：
  • Mockplus设计了组件、图标、收藏、母版的 Tab，切换起来很方便。
  • 做原型，交互简单，只需拖曳就可以，更快更简单。
  • 功能多样，组件资源丰富。
• 缺点：
  • 手机预览偶尔会出现闪退且不清晰；不支持鼠标悬停，日历表组件是静态的；不支持手势交互。

二 , 原型设计

1.主题名称

在线听歌--滴爱音乐。

2.功能

• 用户可以在线听歌，制定属于自己的个性化歌单。
• 商家可以根据，用户的喜欢，进行大数据推送，实现为用户提供‘听、看、唱’等功能。

3.界面设计考虑因素

• 主页主要以推送最新发布的音乐为主，添加听歌识曲功能，方便用户快速得知歌曲信息。
• 音乐馆页面实现歌手选择，以及歌曲排行，为用户选择歌曲提供选择，提供良好体验。
• 播放页面，为用户提供各种播放方式，提供用户会员体验，给予用户优质体验，并添加展示歌词，歌曲选择功能等。
• 音乐直播界面，为用户提供音乐主播现场直播画面，给予用户身临其境体验。
• 退出页面，以用户退出登录为主，附加用户app内存的清理，注销账号，设置等功能。

4.切换页面

1.音乐主页

• 界面功能
  • 搜索功能。
  • 歌曲推荐。
  • 听歌识曲功能。
  • 选择播放功能。
• 界面组成
  • 页面切换项。
  • 推荐歌曲内容。
  • 用户头像，昵称。
  • 搜索栏。
  • 播放栏。
• 前置条件
  • 登录软件。
• 后置条件
  • 进入其他页面。
  • 进入推荐歌曲内容。
• 操作步骤
  • 点击“百万收藏”查看大数据收藏。
  • 点击搜索栏，进行搜索感兴趣的歌曲。
  • 点击播放栏，查看播放音乐内容。
  • 点击“查看我的音乐DNA”，查看我的详情个性播放。
    2.音乐馆页面
    
• 界面功能
  • 搜索功能。
  • 歌手推荐。
  • 听歌识曲功能。
  • 歌曲排行。
• 界面组成
  • 页面切换项。
  • 推荐歌手选项。
  • 提供歌曲排行，分类歌单等功能。
  • 搜索栏。
  • 播放栏。
• 前置条件
  • 进入主页面。
• 后置条件
  • 进入其他页面。
  • 进入播放页面。
• 操作步骤
  • 点击搜索栏，进行搜索感兴趣的歌曲。
  • 点击播放栏，查看播放音乐内容。
    3.识曲页面
    
• 界面功能
  • 听歌识曲。
  • 哼唱识曲。
• 界面组成
  • 页面切换项。
  • 接受歌曲播放。
  • 通过用户哼唱识别歌曲。
• 前置条件
  • 进入主页面。
  • 进入音乐馆界面。
• 后置条件
  • 进入哼唱识别页面。
• 操作步骤
  • 点击中间图标，进行识别歌曲。
    4.播放页面
    
• 界面功能
  • 随时播放歌曲。
  • 选择下一首或者上一首。
  • 选择播放形式。
  • 歌曲歌词展示。
  • mv播放。
• 界面组成
  • 页面切换项。
  • 展示歌曲信息，以及歌手信息。
  • 播放，选择选项。
  • 视频播放选择。
• 前置条件
  • 进入主页面。
  • 进入音乐馆界面。
• 后置条件
  • 返回主页。
• 操作步骤
  • 点击暂停选项，歌曲停止播放。
  • 点击上一曲或者下一曲，歌曲切换。
  • 点击视频播放，进行mv播放。
    5.音乐直播页面
    
• 界面功能
  • 播放歌曲。
  • 选择热门歌手现场演绎。
  • 选择附近，有关音乐的现场直播。
• 界面组成
  • 页面切换项。
  • 展示歌手信息，以及演唱风格。
  • 为用户进入直播提供接口。
  • 播放栏
• 前置条件
  • 进入主页面。
• 后置条件
  • 进入播放页面。
• 操作步骤
  • 点击图片，进入歌手直播现场。
  • 点击附近，音乐，脱口秀进入直播现场。
  • 点击播放栏，进入播放页面。

界面交换流程

  首先进入主页面，主页面会推荐最新最热的音乐，歌手，供用户选择，切换页面进入音乐馆，系统会推送全部歌手，歌曲排行，以及大数据推送百万收藏，可返回主页面，切换页面进入音乐主播，进行观看，可返回页面，切换页面，进入，听歌页面，进行听歌识曲，切换页面，进入播放页面，设置播放形式，进行播放，返回主页面。

原型设计工具比较与实践

答：一：

Axure

优点：

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

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

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

缺点：

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

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

3.Axure只支持在本地设计。

墨刀

优点：

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

2.动效丰富。

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

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

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

缺点：

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

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

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

Mockpuls

优点：

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

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

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

缺点：

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

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

二：总体来讲高低保真原型的区别就在对设计的还原度上面。 设计初期,还未确定整体设计方向的时候,采用低保真的原型,能够帮助设计师快速原型化各种设计想法,并及时与其它成员更新迭代,完成整体设计的确认和统一。所以,这一阶段的原型,仅仅展示设计的整体框架或某一部分的界面交互情况,设计还原程度较低.

三：老年手机原型设计

1.该老年手机原型设计主要实现了老年人接发短信、接打电话（主要是打电话）、电话簿以及时钟闹钟的功能。主要是提供了一个专为老年人考虑的一款原型设计。

在界面设计考虑因素方面：主要有较大的一些字体、图片以及更利于老年人操作的页面切换，使老年人上手更容易，操作更简单。

（1）主页面（主要显示该老年机的四个基本功能）

界面组成：由四个基本功能模块组成

当点击任意一个功能时，会跳到相关页面。

 

（2）短信页面（主要实现了发短信的功能）

界面组成：由收件人和内容组成，用户通过填写收件人和内容实现对短信的发送。点击红色的箭头还可以返回上一步主页面。

 

（3）电话簿界面（显示了联系人）

界面组成：由电话簿、联系人、红色箭头组成。

当点击任意一个联系人时，会弹到另一个界面，提示你是否拨打这个电话，如果点击是的话，电话将会拨打出去，如果点击否，则退回电话簿页面。如果直接点击红色箭头则直接退回到主页面。

 

 

 

 

（4）通话界面（显示通话信息）

界面组成：由通话、搜索项、红色箭头以及键盘组成。

当点击搜索项时，会根据输入信息进行查找（本功能并未实现，只是引用了这个页面），当点击某个联系人时，会拨号给该联系人，也可以取消，当点击红色箭头时，则退回回到主页面。

 

（5）时钟界面（显示世界时钟并能设置闹钟）

界面组成：由时间闹钟、添加闹钟功能以及红色箭头组成。

当点击添加闹钟按钮时，会弹到另一个页面，如下，提示你是否添加闹钟，点击是的话，可以实现添加闹钟功能，输入添加闹钟时间，点击保存及添加完成。如果点击否的话则退回时钟页面，如果直接点击红色箭头则直接退回到主页面。

 

 

 这是我本次的原型设计老年机，第一次使用这个软件，对图片的增加，较复杂功能的实现还不是特别会，上述是我实现的一些简单的用户页面切换功能。