原型设计工具比较及实践
目录
一、原型设计工具比较
1、墨刀
- 适用范围
- 墨刀隶属于万兴科技集团，公司自成立以来一直致力于产品设计在线协同办公软件的研究与开发。全新版本聚合四款工具的创作与管理，包括「原型」、「设计」、「流程图」、「思维导图」。墨刀是一款在线设计编辑原型的工具，特点短平快，适合一些APP，小型pc工程，以及一些频繁迭代的产品。
- 优点
- 协同办公效率比较高
- 很便捷，功能齐全，有各种环境的幕布
- 不用下载，网页版可以直接使用，方便快捷
- 缺点
- 组件较少，不适合复杂的交互
- 免费版对于项目数量、页面数量有限制
2、Axure
- 适用范围
- Axure是专门用来画原型的工具，也可以画流程图。它能快速、高效的创建原型。
- 优点
- 即可以画图，又可以做文档，画图的难度比PS低，写文档比word灵活
- Axure有一套非常强大的交互编辑器，可以实现复杂的逻辑的关系处理，使得模拟更加真实
- 使用成本几乎为零
- 缺点
- 学习成本高
- 手机端演示效果差，服务器不在国内，自带元件库用处不大
3、Mockplus
- 适用范围
- Mockplus（摹客）是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。
- 优点
- 操作简单，上手快，交互简单(只需拖曳就可以)
- 功能多样，组件资源丰富，预览方式和导出类型多样，支持团队协作
- mockplus有组件库和图标库，界面设计较为方便
- 缺点
- 表格功能不够完善
- 不支持鼠标悬停，手机预览不是很清楚，日历表组件是静态的
二、原型设计实践
1、主题名称
美刻相册
2、功能
用户可根据自己的需求，对照片进行相对应的处理，对自己的个人主页进行设置。
3、界面设计考虑因素
- 登录界面参考微信、QQ、全民K歌等手机APP，借助醒图对登录界面logo以及标语进行设计
- 以相册界面作为主页面，连接各个页面，实现对各个页面的跳转
- 个人界面参考微信、QQ、一刻相机等手机APP，提供修改信息、添加好友、切换账号等功能
- 界面清晰简洁，操作简单方便，功能新颖多样
4、切换页面
本人在本次原型设计任务当中主要负责对登录界面以及个人页面等9个界面的开发设计
登录界面
- 界面功能
- 选择登录方式
- 界面组成
- 微信登录按键
- QQ登录按键
- 前置条件
- 打开APP
- 后置条件
- 进入微信登录界面
- 进入QQ登录界面
- 操作步骤
- 点击微信登陆按键或者QQ登录按键
微信登录界面
- 界面功能
- 微信账户登录
- 界面组成
- 登录按键
- 账号密码输入框
- 返回登录页面按键
- 前置条件
- 选择微信登录按键
- 后置条件
- 进入相册界面主页面
- 返回登录界面
- 操作步骤
- 输入账号和密码登录,点击登录按钮
- 点击右上角返回标志>
QQ登录界面
- 界面功能
- QQ账户登录
- 界面组成
- 登录按键
- 账号密码输入框
- 返回登录页面按键
- 前置条件
- 选择QQ登录按键
- 后置条件
- 进入相册界面主页面
- 返回登录界面
- 操作步骤
- 输入账号和密码登录,点击登录按钮
- 点击右上角返回标志>
个人主界面
- 界面功能
- 进入基本信息功能
- 进入个性签名功能
- 进入二维码名片功能
- 进入朋友功能
- 进入挑选精选照片功能
- 进入设置功能
- 界面组成
- 个人头像、昵称、ID、地区、个性标签以及精选照片展示
- 各类界面跳转区域
- 界面下方功能图标
- 前置条件
- 点击各个功能主界面下方的个人按键
- 后置条件
- 进入其他主要功能（照片、相册和工具）主界面
- 进入更多信息界面
- 进入个性标签界面
- 进入二维码名片界面
- 进入朋友界面
- 进入收藏相册界面
- 进入设置界面
- 操作步骤
- 点击下方其他三个主功能按键跳转对应主功能界面
- 点击更多信息跳转界面区域
- 点击个性标签跳转界面区域
- 点击二维码名跳转界面区域
- 点击朋友跳转界面区域
- 点击精选照片跳转界面区域
- 点击设置跳转界面区域
更多信息界面
- 界面功能
- 修改各类信息
- 界面组成
- 头像、个性标签跳转区域
- 各类信息输入框
- 确认修改按键
- 返回个人主界面按键
- 前置条件
- 选择更多信息跳转界面区域
- 后置条件
- 进入换头像的收藏相册界面
- 进入个性标签界面
- 确认修改进入个人主界面
- 返回个人主界面
- 操作步骤
- 点击头像修改跳转界面区域
- 点击个性标签修改跳转界面区域
- 下滑界面，点击确认修改按键
- 点击左上角返回标志<
个性标签界面
- 界面功能
- 修改个性标签
- 界面组成
- 个性标签输入框
- 保存按键
- 返回个人主界面按键
- 前置条件
- 选择个性标签跳转界面区域
- 选择个性标签修改跳转界面区域
- 后置条件
- 保存进入个人主界面
- 返回个人主界面
- 操作步骤
- 点击保存按键
- 点击左上角返回标志<
二维码名片界面
- 界面功能
- 展示个人二维码
- 界面组成
- 二维码图标
- 返回个人主界面按键
- 前置条件
- 选择二维码名片跳转界面区域
- 选择分享我的二维码按键
- 后置条件
- 返回个人主界面
- 操作步骤
- 点击左上角返回标志<
朋友界面
- 界面功能
- 展示朋友列表
- 跳转二维码名片界面
- 界面组成
- 朋友的头像及名字
- 扫一扫加朋友按键
- 分享我的二维码按键
- 返回个人主界面按键
- 前置条件
- 选择朋友跳转界面区域
- 后置条件
- 进入二维码名片界面
- 返回个人主界面
- 操作步骤
- 点击分享我的二维码按键
- 点击左上角返回标志<
设置界面
- 界面功能
- 应用设置管理
- 退出登录功能
- 切换账号功能
- 界面组成
- 各类应用设置图标
- 退出登录按键
- 切换账号按键
- 返回个人主界面按键
- 前置条件
- 选择设置跳转界面区域
- 后置条件
- 退出登录进入登录界面
- 切换账号进入登录界面
- 返回个人主界面
- 操作步骤
- 点击退出登录按键
- 点击切换账号按键
- 点击左上角返回标志<
5、界面切换流程
进入APP，首先进入登录界面，选择微信登录或者QQ登录，输入账号和密码进入相册主界面，点击下方的个人按键，切换到个人主界面。在个人界面可点击各个不同功能区域切换各个功能操作界面，执行不同操作，每个功能操作界面到带有返回按键可返回个人主界面。
