摹客教程

摹客教程

摹客,让设计更快更简单

交互

旅游类App的原型制作分享

今天我用Mockplus做了一套Gogobot的原型,这是一款旅游类的App。为了达到高保真的效果,在做原型图的时候我把App的颜色也一并做好了,因为Mockplus的颜色属性设置可以直接吸取颜色,非常方便快捷,除了配色,动效上我也尽量还原了App原来的效果,其中Mockplus的滚动区组件除了纵向还有横向滚动,满足了我对滚动的需求~好了,下面请看我的成果吧!

美食类Web原型制作分享-Taste

Taste是国外知名的美食类网站,为人们提供丰富的美食菜单,帮助人们更好的享受美食带来的快乐。网站采用图文结合的排版方式,有固定顶部导航栏的交互功能等。

小摹做原型12-电商导航菜单

大家好,我是小摹。今天教大家做一个电商导航菜单。导航菜单是电商网页中常见的设计元素。这次用到的交互效果主要有状态交互、“显示/隐藏”和“设置颜色”。希望小摹的讲解能给大家带来一些启发和帮助。

小摹做原型13-微信公众号底部导航

大家好,我是小摹。今天教大家做一个微信公众号底部导航。微信公众号是大家常用的应用,其底部导航是较为经典的设计元素。这次用到的交互效果主要有“显示/隐藏”和“弹出状态”。希望小摹的讲解能给大家带来一些启发和帮助。

企业官网Web原型制作分享-Tesla

Tesla是汽车行业知名的奢华品牌,产品为纯电动汽车,知名度极高。此模板正是取自Tesla的官网,高端大图配上文字排版,彰显了汽车的奢华感觉。

小摹做原型之11 – 多级菜单

Hello,大家好,我是小摹。这次小摹将来教大家如何制作一个多级菜单。多级菜单也称之为树形结构菜单,是很常见的设计元素。这次主要用到的组件有菜单栏组件、菜单组件和弹出面板组件,用到的交互有“显示/隐藏”,交互效果单一,但是需要捋清楚逻辑。希望小摹的讲解能给大家带来一些启发和帮助。

审阅

协作的另一个功能是在线审阅。在线演示时,可以对页面进行批注和添加评论。

云项目的管理

项目上传到云后,您需要清晰掌握并管理您的云项目,下面来介绍Mockplus中的云项目管理功能。

在线发布项目

在Mockplus中完成设计后,可以在线发布项目。发布之后可生成Html链接,在浏览器中打开链接即可预览项目,并且可以将链接发送给其他人,查看项目。

导出文档

在Mockplus中完成设计后,可以以不同形式导出文档。导出之后可以很方便的将自己的设计成果发给老板、同事或客户查看。

项目的导出和导入

在Mockplus中完成设计项目后,你可以将文件以.mp格式导出保存至本地。以便后期随时随地导入到Mockplus后查看或编辑项目文件。

页面的导出和导入

如果你想将Mockplus项目A中的页面运用到项目B中,可以使用导出、导入页面来进行。具体步骤如下:

图表组件

图表组件分类中有柱状图、条形图、曲线图和饼图四种组件。

菜单栏组件

菜单栏是按照程序功能分组排列的组件,它由一系列的按钮组成,并且有一些预定义的样式。

旅游类APP原型模板分享——爱彼迎

这是一款专为游客提供全球范围内短租服务的APP,可以让你不论出门在外或在家附近都能开展探索之旅,并且还可以获取世界各地独特房源、当地体验及好去处等相关信息。

小摹做原型之9 – 扇形悬浮按钮

Hello,大家好,我是小摹。这次小摹将来教大家如何制作一个扇形展开的悬浮按钮。扇形展开的悬浮按钮常见于移动端,用于展开常用的操作。这次用到的交互上,主要要注意组件的移动和动画延迟时间。希望小摹的讲解能给大家带来一些启发和帮助。

小摹做原型之8 – 倒计时

 Hello,大家好,我是小摹。这次小摹将来教大家如何制作一个简易的倒计时。如果需要更复杂的倒计时效果,大家可以在此基础上发散思维,希望小摹的讲解能给大家带来一些启发和帮助。

社交类APP原型模板分享——Tinder

Tinder是国外的一款手机交友APP,作用是基于用户的地理位置,每天“推荐”一定距离内的四个对象,根据用户在 Facebook 上面的共同好友数量、共同兴趣和关系网给出评分,得分最高的推荐对象优先展示。

动画设置

Mockplus中可设置交互执行过程中的动画,乃是精细化原型设计的利器。

触发方式

目前Mockplus中支持组件间交互、状态交互、页链接三种交互方式。不同的交互方式支持的触发条件和设置方式有所不同,这里统一做个对比介绍。

组件交互

在Mockplus中,设置组件间的交互是一件非常轻松、容易的事情。

页链接

Mockplus中可轻松实现页面跳转,操作简单可视化。

页面流程图

Mockplus可以一键生成页面流程图。页面流程图能够清晰的表达整个项目的页面跳转关系,便于交流。

页面回收站

目前,在mockplus中删除页面并未将其完全删除,而是暂时移到了回收站中,并支持从回收站中找回。但页面一旦从回收站删除,就无法找回。

隐藏页面

在演示项目时,若是部分页面不希望呈现出来(如内容面板的内容页),可将这些页面设置为隐藏。方法如下:

页面序号

在Mockplus中可一键设置页面编号。在项目树的工具栏中,点击“显示页面编号”,将自动根据项目树层级生成页面编号。

页面标记

使用页面标记,可以给页面或分组的图标设置不同的颜色,方便管理和区分。

页面介绍

项目创建好以后,我们要在项目中创建页面,才能开始设计。

发布和分享项目

发布和分享项目,可生成Html链接,在浏览器中预览项目,并且可以将链接发送给其他人,查看项目演示。

历史备份

在你的工作中,Mockplus会自动定时备份你的工作成果,并保存为历史版本。

项目模板

Mockplus中有两种方式可以创建项目。

创建项目

Mockplus中有两种方式可以创建项目。

替换文字

替换文字功能可以对页面或项目中,指定文字进行一次性批量替换,非常方便快捷,它适用于所有带有文字的组件(包括母版)。

约束组件

对组件的约束,可以帮助我们批量设置多个组件的宽高、对齐以及距离,快速布局页面中的组件。

缩放

组件可以进行任意缩放或等比例缩放,具体方式如下:

大纲树

大纲树在界面右下角的组件大纲面板上,它是当前页面中所有组件所构成的列表,而列表的顺序从上到下则代表了组件的层级从顶部到底部。

交互面板

交互面板是用来设置组件与组件之间的交互属性。它位于界面的右侧,可以通过选项卡切换到交互面板。

属性面板

在界面的最右边,是组件的属性面板。组件拖拽到工作区之后,为了使组件更加符合我们设计的要求,可以在属性面板中可以对组件进行个性化属性设置。

组件面板

组件面板中陈列了Mockplus的所有组件,在设计时,从这里将所需组件拖拽到工作区中,即可开始设计。

项目树

项目树包含了很多节点,其中第一个节点(根节点)表示项目名称,其它节点表示所有的页面和分组。从这些节点我们可以清晰地看出项目中页面或分组的层次结构。项目树上方的工具栏中包含了对项目的常用操作。

主工具栏

顶部的主工具栏中包含了Mockplus的主菜单(最左侧)和常用的快捷按钮。

工作区

界面的中间部分,就是你设计时的工作区。

界面简述

Mockplus的界面非常简洁,我们来分区域看看:

电商类web原型制作分享——美丽说

美丽说是国内白领女性时尚消费品牌,精选上千家优质卖家供应商,为用户提供女装、女鞋、女包、配饰、美妆等品类的优质时尚商品。

社交分享类Web原型制作分享——花瓣网

这是一家基于兴趣的社交分享网站,网站为用户提供了一个简单地采集工具,帮助用户将自己喜欢图片重新组织和收藏。网站布局美观合理,内容丰富。此原型模板所用到的组件有按钮栏、菜单栏、搜索框、水平分割线。交互动作有鼠标悬停文字按钮颜色改变效果,鼠标按下文字按钮颜色改变效果,按钮跳转页面,利用按钮栏实现table切换效果。

电商类Web原型制作分享——聚美优品

这是一家化妆品限时特卖商城。作为美妆电商类网站的佼佼者,网站以用户体验为核心,画面主色调符合女性消费者审美。排版整齐,布局合理。网站用弹出面板实现点击弹出内容,鼠标悬停文字按钮颜色改变等交互效果。

组件库

在Mockplus 2.3版本中推出了组件库的同步和分享。

表格组件

表格组件用于实现表格类效果,经过升级已经支持合并单元格、自定义边框等常用属性。

头像组件

头像组件常用于联系人列表等场景,可在组件面板中的扩展分类下找到,也可以在搜索栏搜索。

提示框组件

提示框组件默认是提示模态弹窗,可双击编辑提示框中呈现的文本。

图标按钮组件

图标按钮是按钮的变种,它没有文字只由图标构成,用于向用户传达信息。

Gif组件

Gif组件既可以充当Gif图片的占位符,也可以作为Gif图片的“容器”进行展示。

树组件

树组件可以用清晰的层级结构展示信息,可以展开或者折叠。

列表组件

如果内容需要以列表的方式呈现,那么可以使用列表组件。

下拉列表框组件

下拉列表可以从多个项目中选择其中一项。在正常状态下,只显示一个当前选定的列表项,当点击下拉列表时,会下拉(drop down)出所有的列表项目以供选择。

单选按钮组组件

单选按钮组是多个单选按钮的集合,它提供了数个选项,但只能选中其中一项,这是和复选框组最大的区别。

复选框组组件

复选框组提供一组复选框以供选择,用户可勾选多个选项,被勾选的项将会生效。

弹窗组件

弹窗组件是一种特殊的弹出面板,可弹出提示框,主要用于手机项目。

抽屉组件

抽屉组件是一种特殊的弹出面板,可以模拟手机App中推入拉出抽屉的效果,主要用于手机项目。

面板组件

面板组件是一个容器,可以把其他的组件装入其中。

滚动区组件

使用滚动区组件,你可以在一块固定区域内滚动查看超出其范围的内容。具体使用如下:

弹出面板组件

使用弹出面板组件,可以动态的弹出或关闭一组组件。具体使用如下:

输入框组件

输入框在演示时可以输入文本,多用于需要用户填写信息的场景,如输入账号、密码登录。

图标组件

Mockplus中内置了4000+的图标,下面带领大家一起来认识一下图标组件。

线段组件

线段组件可绘制分割线、连接线、曲线、箭头等样式,也是mockplus提供的基本组件之一。

圆形组件

圆形组件作为形状组件的一种,由于其经常被使用,这里单独作为一个基本组件提供给大家。

形状组件

使用形状组件可以绘制矩形、圆形、五角星、三角形等几何形状。

多行文本组件

多行文本适用于文本较多,需要换行、分段的场景,是Mockplus的基本组件之一。

按钮组件

按钮在界面上的运用非常广泛,Mockplus中的按钮默认是带有圆角的。