5分钟掌握8个常用交互组件,轻松进阶原型设计

原型设计离不开组件,如果原型是房子,那么组件就是水泥和砖块。本文将为您介绍八个最常用的交互组件,现在就打开Mockplus试试吧!

一、弹出菜单

弹出菜单是原型设计中最常用的组件,许多组件的使用方法也与它类似,熟练使用弹出菜单将会给您带来莫大的帮助。接下来我们从实际案例来看一看如何使用弹出菜单。

1. 随意拖出一个组件,这里我们以Mockplus中的按钮组件为例。

2.拖出弹出菜单组件,将按钮右上角的链接点与菜单组件相连。

3.双击弹出菜单以编辑菜单位置及内容。

二、弹窗

弹窗与弹出面板的操作步骤基本一致,区别在于弹出菜单的四个菜单项都可再设置交互动作,而弹窗仅有“是”、“否”两个选项可供设置交互动作,同时,弹窗内容的格式也与弹出面板略有区别。

三、抽屉

抽屉是一个常用的容器型组件,其特点为高度封装、高度可调节性、高度可容纳性,换句话说,您无需自行设计抽屉的细节,只需简单设置几下即可的到一个以多种方式滑出、能装入绝大多数组件的抽屉。

在将按钮的链接点与抽屉连接后,双击抽屉图标即可添加组件。

四、图片轮播

图片轮播组件支持数张图片的乱转展示,同样操作简单。先将图片轮播组件拖入工作区内,双击添加图片即可。

五、面板

面板其实就是一个可供放置组件的容器。

将能容面板拖至需要的地方,调整大小,双击进入编辑模式,拖入需要的组件即可。注意,组件超出面板边界的地方不会显示。你会发现:因为是容器,面板是有边界的,子组件超过边界的部分会被“切掉” 。另外有意思的是:和“组”不同,设置交互的时候,可以将面板中的子组件作为交互目标,但“组”不行,只能将整个组设为交互目标,因为组是几个组件编组而成,编组之后,就被视为一个整体。

六、弹出面板

弹出面板是最为灵活的交互组件。拖入一个弹出面板,双击打开,你会发现它里面什么也没有,但是利用它,我们完全可以自己制作出需要的弹窗、消息框、提示框等许多交互组件。

七、内容面板

内容面板主要用来实现内容的快速切换。但是它一般不会单独使用,你可以使用它和菜单栏、列表、选项卡等具有多选性质的组件来配合,共同完成内容切换。

首先在内容面板中设置三个层,分别连接到三个目标页面上。然后将选项卡上的链接一一对应地与三个层相连,内容切换就完成了。

八、滚动区

当屏幕大小不足以容纳我们需要展示的内容时,我们可以使用滚动区组件在有限的空间内展示更多内容。

将滚动区组件拖入工作区后,调整大小,然后双击进入编辑模式。在编辑模式中拖入需要加入滚动区的组件,鼠标点击“+”来扩展滚动区大小,点击“-”来收缩滚动区大小,如果你同时按下Ctrl键,可加速扩展或收缩。

交互是原型设计中非常重要的部分,灵活使用以上八个交互组件,足以满足你常用的交互设计!除了交互组件,Mockplus中还有近两百个封装组件,现在就去试试吧!

时间: 2024-07-29 02:58:46

5分钟掌握8个常用交互组件,轻松进阶原型设计的相关文章

干货!所有常用的原型设计工具都在这里了

本文列举了20余款当前国内外比较火爆的原型设计工具.我把它们分为以下五类: 1. 交互原型设计工具(仅限页面交互) 2. 手机原型工具 3. 网页原型工具 4. 静态原型工具 5. 动态原型工具(组件和页面交互) 交互原型设计工具(仅限页面交互) 这一类工具主要是建立页面之间的交互.其本身不能进行组件的制作和设计,需要从其它地方(例如:PS,本地)导入设计图,对已有的设计图创建热点,进行交互设计. Invision - 一款很好的制作原型交互演示的工具.你可以从本地.Dropbox.Google

常用的原型设计工具

本文列举了20余款当前国内外比较火爆的原型设计工具.我把它们分为以下五类: 1. 交互原型设计工具(仅限页面交互) 2. 手机原型工具 3. 网页原型工具 4. 静态原型工具 5. 动态原型工具(组件和页面交互) 交互原型设计工具(仅限页面交互) 这一类工具主要是建立页面之间的交互.其本身不能进行组件的制作和设计,需要从其它地方(例如:PS,本地)导入设计图,对已有的设计图创建热点,进行交互设计. Invision - 一款很好的制作原型交互演示的工具.你可以从本地.Dropbox.Google

不一样的交互组件

链接:http://ued.taobao.org/blog/2010/02/interactive-controls-innovation1/ 交互设计是一个创造性的工作,利用创新的方式漂亮地解决产品问题,是一个交互设计师价值的体现.当创新的交互设计被用户认可.被业界同行学习,更是一种巨大的职业满足感.这种创新不一定是惊天地泣鬼神的革命性设计,一个小小的交互组件的创新就可以让产品体验增色不少.今天就通过一些案例聊聊交互组件创新的四种常见方式,与大家共勉. 一.滚动条的创新[重构法] 我们先来回想

没事抽空学——常用界面组件属性

android:latout_width fill_parent 设置组件宽高,fill和wrap相同 match_parent wrap_content android:text 组件中文字 组件中文字 android:ems 数值和长度单位 英文字M的数倍 android:inputType text/number/date/time... 文字类型 android:background example:ff0000 6或6十六位进制数设置底色 android:textSize 数值 设置文

【Unity 3D】学习笔记三十四:游戏元素——常用编辑器组件

常用编辑器组件 unity的特色之一就是编辑器可视化,很多常用的功能都可以在编辑器中完成.常用的编辑器可分为两种:原有组件和拓展组件.原有组件是编辑器原生的一些功能,拓展组件是编辑器智商通过脚本拓展的新功能. 摄像机 摄像机是unity最为核心组件之一,游戏界面中显示的一切内容都得需要摄像机来照射才能显示.摄像机组件的参数如下: clear flags:背景显示内容,默认的是skybox.前提是必须在render settings 中设置天空盒子材质. background:背景显示颜色,如果没

React Native常用第三方组件汇总--史上最全 之一

把我认为最好的知识,拿来与他人分享,是这一生快事之一! React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 reac

ECharts.js学习(三)交互组件

ECharts.js 交互组件 ECharts.js有很多的交互组件,一般经常用到的组件有这些: title:标题组件,包含主标题和副标题. legend:图例组件,展现了不同系列的标记(symbol),颜色和名字.可以通过点击图例控制哪些系列不显示. xAxis:直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放左右两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠. yAxis:直角坐标系 grid 中的 y 轴,一般情况下

1.1.1. 常用界面组件使用

1.1.1. 常用界面组件使用 功能 代码参考 {{属性名}} 数据绑定对象,例如{{attr1}}这里会自动绑定控制层$scope.attr1.此标签可以出现在页面调用的js函数中,注意不能使用双引号和单引号了,如<a ng-click="gotoDetail({{item.planserialno}})">立即投资</a> ng-click 标签的点击事件,<a ng-click="testService()">test<

Vue最常用的组件通讯有三种:父-&gt;子组件通讯、子-&gt;父组件通讯,兄弟组件通讯.(template用的pug模板语法)

Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通讯,是通过props进行数据传递,并且具有这几个特性,单向传递,子组件接收的数据不可以更改,如果更改,会发出警告,每次父组件更新时,子组件的所有 prop 都会更新为最新值. 1 父组件 2 <template lang="pug"> 3 .father 4 Children(:name='msg