原型设计工具 - Mockplus
原型设计
对于一个完整的产品而言,产品原型可以说是整个产品面市之前的框架设计。原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具,将页面的模块、元素和人机交互的形式,利用线框描述的方法,更加直接生动地表达产品架构。
原型设计工具 Mockplus
原型设计可以基于手绘,也可借助工具。显然,使用工具进行页面交互设计及构建,不仅可以节省人力,也能够更加清晰明确地呈现页面内容,同时可以保证风格的统一化,更加便于修改。
Mockplus作为一款简洁快速的原型设计工具,适合软件团队及个人在软件开发的设计阶段使用。其素描风格、组件交互、模板重用和审阅协作等创新理念,吸引了众多的项目团队。与此同时,由于入门简单,无需编程,Mockplus也已经逐渐普及,成为新手和有经验设计者的前列选择。
下载地址:Mockplus
需要注意的是,Mockplus专注于提供低保真原型设计,所谓低保真,一般指一个可以简单交互的现况模型,表达产品的整体框架。
Mockplus 的初步使用
新建项目
Mockplus提供新建手机、平板、网页、桌面项目的原型模板,使用者也可以选择自由模板或自定义项目,单击选项,界面下方可更改页面尺寸:
Mockplus 界面
以网页项目为例,介绍Mockplus界面的分布:
如上图,Mockplus界面主要分为6个区域,分别为界面顶部的工具栏,左侧的项目总览和元件库,右侧的页面属性区(样式、备注)和组件大纲,以及占据界面主要位置的主操作界面。显然,主操作界面是呈现具体原型设计的区域,呈现内容包括元件类别、位置、事件关联等。
Mockplus 元件
Mockplus包括大量的元件元素,如下截图显示部分元件:
观察到部分元件为网页页面中的常见元素,如图片轮播元件常用于广告版的设计或头条图片的推送;滚动区则基本出现在所有页面中,作为页面的定位组件;单复选框则常见于选项内容,比如选择电影列表的排序方式,注册时用户选择自己的关注标签等。通过添加这些元件,使得页面表达出呈现内容,更加直观地反映页面及交互设计是否合理,是否能够满足用户使用的舒适度,是否契合后端数据库的连接等。
例如,添加图片轮播组件于主编辑界面,并添加图片表示其展示内容:
单击上方“播放”按钮,即可显示设计效果,观察到图片按一定顺序进行轮播,同时可以设置鼠标触发事件、页面备注等。
除此之外,还可以点击“五角星”按钮,添加组件至个人的组件库中:
Mockplus事件
众所周知,原型设计除了涉及页面布局的内容外,事件触发也是非常重要的一部分。事件的编辑和触发体现于交互效果上,用户的体验感、页面跳转是否合理,都需要对事件进行细心编排。
下面以链接元件为例,展示Mockplus工具添加事件的过程:
为首页添加一个名为“电影资讯”的链接元件
点击右上方圆圈并将其拖动至链接框,表示选中链接为目标组件,并为其添加事件:
如上图,表示点击该元件时,元件将隐藏,预览效果即为每点击一次链接,链接将闪动一次。
若目标事件为与其他页面,则将小圆点拖动至项目总览栏中其他页面的位置,如下:
除此之外,还有缩放事件、移动事件、悬浮事件等,帮助使用者更好地完善页面设计细节。
总结
了解了以上Mockplus工具的基本功能后,即可根据需要,完成原型设计工作。由于对原型设计的理解还不够深入,因此此教程的介绍较为浅显基础,日后还将认真体会对此工具的使用。
这里推荐一个Mockplus的详细教程,个人认为对此工具学习非常有用:Mockplus使用教程
原型设计工具 - Mockplus相关推荐
- 界面原型设计工具Balsamiq、墨刀、Axure、Mockplus
Balsamiq的体验 这个基于Adobe AIR Runtime的工具实在是有让人眼前一亮的感觉,手绘风格的元件样式粗犷淋漓,能创建接近于纸上手绘的原型文件.其提供了丰富的手绘风格的web常用元件, ...
- 第三次作业-介绍一款原型设计工具
课程:软件工程综合实践专题 学号:1759214 介绍一款原型设计工具:Mockplus http://www.mockplus.cn 如今是一个快节奏的社会,每一天都会有无数的软件发布,每一款软件 ...
- 三款运用二维码分享与预览的原型设计工具
2019独角兽企业重金招聘Python工程师标准>>> 越来越多的原型工具也开始利用二维码"简单便捷"的特点,来进行原型设计的展示与分享 伴随着智能手机的快速发展 ...
- hrjava项目原型html_Mockplus for Mac(原型设计工具)
Mockplus for Mac是Mac平台上一款简单.快速的原型设计工具,无需任何编程,不需要任何编程基础知识,帮你快速使用Mockplus设计图形.Mockplus封装了近200个组件,提供300 ...
- 7款免费原型设计工具
身为一位产品经理或设计师,原型设计工具是必不可少的工作伙伴.但我们难免会遇到预算有限的时候,这时候,去哪里寻找一款好用的免费原型设计工具呢?以下,小编为大家精心挑选了7款免费的原型工具,并对其进行了简 ...
- 从Adobe调查问卷看原型设计工具大战
近年国内外原型设计工具新品频出,除了拥趸众多的老牌Axure在RP 8之后没有什么大的动作,大家都拼了命地在出新品.今天 inVision 的 Craft 出了 2.0 的预告视频,明天 Adobe ...
- 5款高效的原型设计工具
设计并不是随心所欲,也不是每时每刻都需要创意.你需要一个向导为你指明方向- 这就是原型. 什么是原型? 原型可以概括的说是整个产品面市之前的一个框架设计.设计师可以利用它引导每个人都参与到项目中来.原 ...
- 推荐几个开发高薪技术产品(APP、网站、小程序)的原型设计工具
工欲善其事必先利其器.作为一名产品经理,如何才能快速地设计一款产品?一款优秀的产品原型工具必不可少.如何才能选择一款适合自己的原型工具呢?Benson特意整理了11款产品原型工具以供参考,并学习曲线, ...
- 最受产品经理关注的10个原型设计工具
每个公司对产品经理这个职位的定位都会有所不同,但一般都会涉及到需求调研.画原型.写各种文档等工作.说到画原型图,原型设计工具是必不可少的. 当然了,如果你已经上升到了产品经理的最高境界,那这些工具对你 ...
最新文章
- GARFIELD@04-09-2005
- 阿里云证书 | 套路太深,还是我打开姿势不对?
- 基于.Net 2.0 (C# 2.0, ASP.NET 2.0)的快速Web开发框架设计
- python教程:几个基础类型循环删除
- 如何给 SAP Fiori Elements 应用的字段添加 value help
- face alignment by 3000 fps系列学习总结(二)
- 单片机片外程序存储器数据存储器操作命令
- Python对象引用和del删除引用
- ci mysql 缓存_CI框架缓存的实现原理
- 白帽飞客从入门到放肆
- python程序下载腾讯企业邮箱附件_python批量下载邮件附件
- 计算机组装怎么备份系统,电脑怎么备份系统(高手教你win7系统怎么备份)
- 扫地机器人扫水泥地板有用吗_拖地机器人好用吗—拖地机器人的优点介绍
- FortiGate FGCP HA 配置文档
- 【卡尔曼滤波】离散线性系统的卡尔曼滤波
- 深度解析服务器科普知识
- RenderContents和Render区别
- vue3组合式api
- 【数据结构与算法】task3 排序二分查找
- Beacon学习总结