mockingbot墨刀中文使用说明

1、Table of Contents........11.6.2 1.6.3 1.7前言墨刀中文使用说明书此书主要内容为介绍墨刀(MockingBot这款原型工具的详尽功能,从认识工作区开始,一步一步引领大家玩转墨刀。你在使用中遇到的任何问题都可以在这本书内找到答案。如果你想更快速地掌握墨刀使用方法,也可以直接在墨刀官网查看入门教程,跟着教学视频一起变身墨刀使用

2、达人。墨刀作为一款工具,除了尽可能帮助使用者提高工作效率外,还希望可以激发产品从业者们新的思维及工作方式。创造力是无法被某个工具制约和限制的,希望大家在学习中明确这个观点:学会使用某种工具是为了将个人创造力更好地展示出来,工具不是区分职业能力的指标,创造力才是。若你对此书内容有任何疑问,欢迎与我们联系:supportmodao.cc第一章 墨刀第一章 墨刀本章主要为墨刀官网的概述,你可以通过本章了解到墨刀是什么、服务相关的隐私条款、账户收费模式以及产品大致的使用流程。简介墨刀是什么?墨刀(MockingBot,极简超快的移动应用原型工具墨刀是一款在线移动应用原型工具,旨在帮助各种规模的移动互联

3、网团队快速构建移动应用产品原型,墨刀支持云端保存,实时手机预览,一键分享,多种手势和页面切换特效,以及多人协作和团队管理功能。使用墨刀,用户可以快速制作出可直接手机运行的接近真实App交互的高保真 / 线框图原型,使创意得到更直观的呈现,不管是早期客户收集反馈,客户 / 投资人展示,或是团队内部沟通协作,墨刀都可帮助用户大幅提升沟通效率,降低项目风险。功能亮点:1. 拖拽控件或图片开始App设计2. 移动设备常用手势及丰富切换动画3. 云端实时保存,工作无缝衔接4. 手机实时预览,随时演示原型作品;一键分享,获取反馈5. 团队协作,产品极速上线6. 导出工作流,产品开发从全局出发7. 内置素材

4、库、模板库墨刀(MockingBot是由北京磨刀刻石科技有限公司旗下运营的在线移动应用原型工具,公司成立于2014年10月。目前全球已有140个国家超过25万名设计师选择并使用墨刀,同时墨刀对基础功能永久免费。隐私条款最后更新:2015年9月14日本隐私协议旨在提供墨刀(MockingBot网站如何收集和使用与您相关的信息记录。本协议适用于,您使用我们网站和其他在线产品及服务,或者其他任何您和我们有联络时的信息收集。我们可能会对隐私协议进行变更,如若产生变更,请以文首的修改时间为准。如有重大变更,我们也会向您提供额外的通知(比如在首页增加声明或是邮件提醒。在使用墨刀(MockingBot服务之

5、前,我们希望您仔细阅读本协议,了解我们对收集到信息的处理以及我们对您隐私的保护。信息收集您提供的信息我们会对您直接提供的信息进行保存。比如:我们会记录您的注册信息,寻求客服或者其他和我们沟通的记录。记录信息的种类包括:用户基本信息(姓名、邮箱和图片、公司信息、财务信息(您的交易账户以及其他您选择提供的信息。使用服务自动收集的信息当你接触或者使用我们的服务时,我们将自动收集您的信息包括: Log 信息(我们记录所有您使用服务时的log信息,包括浏览器信息、使用时间、浏览的网页、IP地址、及来源。Cookies和其他跟踪技术的信息:我们使用多种技术记录信息,包括但不限于:向您的电脑或移动设备种co

6、okies。Cookies是一些存在您的硬件上的小数据包,用以帮助我们提高服务的质量及您的使用体验,了解在哪些区域和功能上受欢迎,以及统计流量等。信息使用我们将您的信息用于以下用途:提供、维护和改善我们的服务;提供和交付产品及您要求的服务,处理交易,向您发送相关信息,包括:确认信息和发票等;发送技术通知、系统更新、安全警告、支持和管理信息;回应您的意见、问题和要求,并提供客户服务;和您就墨刀(MockingBot提供的产品、服务、促销、推广、有奖活动等信息进行沟通,提供我们认为您感兴趣的新闻和信息;监控分析和我们服务相关的使用和活跃的趋势;个性化服务和内容,以及用户信息和兴趣的匹配;处理并送达

7、比赛和奖品信息;联系、结合其他途径的信息,帮助更好理解用户需求,提供更好的服务;其他相关信息采集的用途。墨刀(MockingBot总部设在中国,信息收集受中国法律管辖,通过访问或使用本服务或提供信息给我们,即代表您已经同意您的信息在中国及其他国家的处理和传输。信息分享在以下情况以及本隐私协议中描述的其它情况下,我们会分享您的相关信息:与其他代表我们,需要使用相关信息才可以进行工作的供应商,顾问和其他服务提供商;符合相关适用法律法规,披露的请求;当我们确定你的行为与我们的用户协定和协议相违背,出于保护墨刀(MockingBot及他人的相关权利,财产安全的要求时;在任何合并,或者收购本公司的联络或

8、者谈判中,在得到您的同意后;我们还可能共享统计的或去个人标识的信息。社交媒体分享功能我们的服务中可能提供社交分享功能或其他集成工具,我们支持在墨刀内部分享信息到其他媒体,亦允许将其他信息分享到墨刀。这些功能依赖于你在社交分享功能中的设置,可以让你与朋友或者公众共享信息。更多有关数据处理和连接相关分享功能,请浏览分享功能的相关隐私协议。安全墨刀(MockingBot会采取合理的手段来保护您的信息,防止丢失、误用、窃取等。您的选择账户信息 您可以在任何时间登录您的账户、更新、修改、删除你的信息或者修改个人资料、账单详情等,您也可以直接通过账户管理页面删除您的账号。但是请注意,我们可能会按照法律要求

9、或者在合法的商业范围内保留您的部分信息。我们也可能短时间内保留缓存中关于您的信息。我们也可能会将您的缓存或信息存档副本保留一段时间。Cookies大部分浏览器默认接受cookies,您也可以设置浏览器删除或者禁止cookies。请注意如果选择删除或禁止cookies,将会影响到对我们服务的正常使用。联系我们如果您有任何关于隐私协议的问题,请联系我们: supportmodao.cc官网功能简介墨刀官网功能分为:下载(客户端、入门教程、讨论区、博客、注册/登录、工作区。下载(客户端墨刀是网页应用,直接在Chrome及Chrome内核的浏览器上登录使用即可获得最佳体验效果。(注:墨刀不支持IE及I

10、E内核的浏览器,只需将360、搜狗、QQ浏览器等切换为极速模式即可使用若您不想安装以上浏览器,也可以在墨刀首页(https:/modao.cc下载墨刀桌面客户端(需联网使用。 桌面客户端:Windows客户端(32/64位:支持XP以上系统Mac客户端iOS客户端:对个人账号内项目进行管理及预览,也可称为墨刀应用查看器。入门教程入门教程包括:视频教程教程文档系统更新日志通过观看教学视频掌握墨刀基本使用方法,打好基础快速进阶。讨论区(论坛讨论区(论坛包括:墨刀精选帖原创产品设计类文章原型作品分享产品经理书单功能答疑相关线上线下活动/招聘在这里你可以与数十万产品设计师们直接交流、分享经验,也可以获

11、取墨刀最新的活动资讯。 全新积分系统,获取一定的积分后可兑换等值的墨刀周边产品(账号、周边、活动优先参与权等。博客墨刀官方博客,这里有设计美学相关干货、优秀文章投稿、国际最前沿的设计趋势解读。每周一篇,让你的灵感永不枯竭。工作区墨刀最重要的功能入口,在这里开启创作、项目或团队管理与协作之旅。账户收费情况账号使用方案墨刀账号使用方案分为免费及付费两种,我们目前的付费方式:增强版:图片存储容量10G;允许邀请1名协作者;10元/月,99元/年创业版:图片存储容量100G;允许邀请5名协作者;49元/月,499元/年标准版:图片存储容量100G;允许邀请10名协作者;99元/月,999元/年企业版:

12、图片存储容量1000G;允许邀请50名协作者;499元/月,4999元/年 例:若公司产品团队有 6 人且需要团队协作,那么可以由一人选择创业版方案并付费,该用户可邀请其他 5 名协作者加入到团队或协作项目中来。四种方式都可以创建不限数量的私密应用,并可以享受导出离线文件、白名单、多人协作、团队项目以及所有在未来增加的付费增值功能。不同方案的区别即是图片存储空间及多人协作者数量的差别,存储空间及协作人数需求越高方案金额越高。若想变更方案,可以直接点击切换计划,系统会自动根据之前的付费情况折价升级到新方案。若您需要更多个性化方案,可直接与我们联络:supportmodao.cc免费和收费的区别免

13、费账户:私密应用;不可导出;不可团队协作;100MB图片存储可以创建不限数量的公开、私密项目,可以通过加密来保障项目的隐私;不支持导出离线文档,如HTML 压缩包、全部PNG压缩包、当前页PNG图、IPA或APK安装包;不支持团队项目及多人协作功能;100MB 的图片存储空间。注:个人公开页是您工作成果的展示页,展示的内容为您的所有公开项目、母版、组合。后期我们会陆续上线诸如应用广场等模块,为大家提供一个更加自由开放的交流平台。高级账户:私密应用;导出;团队协作(白名单;超大图片存储空间可以创建不限数量的公开、私密项目,可以通过加密及设置白名单来保障私密项目的隐私;支持导出离线文档,如HTML

14、压缩包、全部PNG压缩包、当前页PNG图及安卓APK安装包;企业版账户支持导出IPA文件(需主动申请;高级账户享有多人协作 、团队项目以及白名单功能;xG 的图片存储空间(不同梯级方案。除导出、协作及存储空间的区别外,所有墨刀用户享有的基础工具服务是相同的,基础工具服务包括:内部素材库、交互设计功能、预览模式等。同时,每个用户都享有14天的免费试用高级功能的福利,在你使用了以上描述的高级功能后,账号会升级为增强版,试用期结束后账号自动转回免费版。账户到期的相关问题账户到期您将无法再继续编辑团队及协作应用,但是您依然可以继续查看和分享团队及协作应用;您将无法导出各种格式的离线文件;到期后存储空间

15、会自动降为基本版容量,若已超出 100MB,您将无法上传新的图片素材。解决办法项目或团队所有者主动续费,以继续相关协作服务;移除所有协作者,删除无用图片素材;团队应用属于付费功能, 需要团队管理者主动续费,方可继续协作。新建账号及使用流程新建账号流程浏览器输入https:/modao.cc 后,点击右上角免费注册或首屏立即体验按钮,输入用户名、登录邮箱以及登录密码信息,单击立即体验,新账号注册完毕,即刻登入墨刀进行创作。 账户升级若对免费账号进行升级,需要进入项目管理页,点击个人头像-账户设置,挑选适合自己的付费方案后根据页面提示完成付款: 若想对已有付费方案进行转换升级,点击切换计划后,剩余

16、时长可直接抵换相应费用: 中国站(modao.cc支付方式目前仅支持支付宝,若您有其他充值需求,可以联系: supportmodao.cc邀请奖励专属邀请奖励,将账户设置页的邀请链接复制并分享给朋友,对方注册并完成验证后,双方各得一个月增强版使用权限,奖励可叠加(邀请越多,奖励时间越长。 账单查询进入账户设置后,点击账单,可以查看个人付费账单记录。 个人信息设置若想对个人信息进行修改,可点击个人头像或账户设置后,对用户名、登录邮箱、头像、密码等信息进行修改。修改完成后点击底部更新按钮,即可应用修改。资料更新后可以尝试刷新浏览器或重启客户端,完成信息同步。可更改的信息有:用户名、登录邮箱(Ema

17、il、手机号、头像、个人主页链接、个人资料(职业信息、生日、所在地、密码修改。账号验证:为保障账号信息安全,墨刀提供两种验证方式:邮箱验证及手机验证,在账户设置页面输入邮箱及手机号,获取验证码完成验证。完善个人信息:在社区与更多行业大牛交流经验,同时获得更精准的活动推送。 发票及优惠申请墨刀支持公益及教育事业,希望为行业发展贡献自己的一份力量,我方会向公益组织及教育机构提供一定的优惠方案:公益组织以及教育机构可点击付费方案下方的按钮提交优惠申请;付费金额达300元即可申请发票,申请审核通过后会于每月下旬对发票进行寄送。(墨刀 为小规模纳税人,只能为您提供增值税普票发票申请流程在账户设置中的账单

18、列表处勾选未开票订单,开票金额达到300元后即可将订单合并开出,填写发票邮寄地址后请等待派送。 发票申请成功后,发票管理列表处状态显示为未开票,开票后状态转为已开票并标注快递信息,各位可自主查询订单派送状态。发票及优惠申请第二章 认识工作区第二章 认识工作区工作区是墨刀的主要操作区,认识工作区可以帮助我们更好地掌握墨刀使用方法。工作区由四部分组成,分别是内置组件区、页面列表区、工具栏、页面设计器,以下是各个部分的细节功能介绍。 组件(快捷键 按“1” 所有的内置组件都会在左侧组件列表中显示,分为5大类组件:基本、形状、输入组件、工具 栏及其它组件。以下分别介绍各组件的功能及特性。组件基本组件介

19、绍 1. 文字简介:也可称为单行文字组件,可将其作为标题等说明性文字。组件特性:默认高度不变,文本框宽度随文字长度自动伸缩手动设置文本框宽高后,框内文字增减,文本框宽度不变字号直接决定可选区域的宽高限制文本框宽度不小于内部文字宽度单行文本不支持回行外观设置:(快捷键“T”文本面板颜色:文本颜色、阴影颜色字号大小;加粗/斜体/下划线/删除线/上划线对齐:横向左对齐、居中、右对齐;竖向顶对齐、垂直居中、底对齐其他基础设置:透明度、边框色、固定位置、显示隐藏、初始动效等2. 多行文字简介:适用于文字详情对应页面,直接粘贴文字段落。组件特性:默认宽度不变,文本框高度随文本行数自动伸缩手动设置文本框宽高

20、后,框内文字增减,文本框高度不变字号直接决定可选区域的高度限制文本框高度不小于边缘文字高度多行文本支持回行外观设置:(快捷键“T”文本面板颜色:文本颜色、阴影颜色字号大小;加粗/斜体/下划线/删除线/上划线对齐:横向左对齐、居中、右对齐;竖向顶对齐、垂直居中、底对齐其他基础设置:透明度、边框色、固定位置、显示隐藏、初始动效等3. 全局手势简介:适用于设置当前页整体的跳转手势及链接。拖入此组件,所选的对应手势操作会对当前页整体造成影响,如翻页。组件特性:同一页面内可设置不同的全局手势及连接,预览时不同的手势操作会触发对应跳转效果同一页面内相同全局手势有且只有一个链接有效全局手势与组件手势相同时,

21、预览时只有全局手势有效页面内设置了自动跳转的链接,预览时只有该链接有效全局手势组件宽高与控制区域大小无关全局手势坐标与预览效果无关4. 链接区域简介:链接区域是一个不可见(透明的区域组件,可将其放置于任意区域(如静态图片上并为此区域添加交互。组件特性:工作区状态下为半透明蓝色,预览时变为透明链接区域的尺寸决定所覆盖组件的最终可点击区域Ctrl(Command+鼠标划选 可为图片快速创建链接区域,添加交互支持基础设置:尺寸、固定位置、显示隐藏5. 图标 简介:组件外观默认为星星,功能同组件名,墨刀提供了移动应用原型中常用的图标素材,使用此组件即可打开及使用内置图标素材库。组件特性:选中后可拖拽调

22、整的区域为图标的可点击范围尺寸在素材库面板内调整图标大小单选或多选图标组件后,直接在素材库中点击某图标,即可统一替换原图标外观设置:(快捷键“A”图标素材库面板颜色:前景、背景、阴影颜色等 (快捷键“O”外观设置面板素材库面板(A:图标大小、图标搜索及分类筛选其他基础设置:透明度、边框色、阴影色、固定位置、显示隐藏、一键圆形/正方形、初始动效等6. 图片简介:组件外观为灰底白标,可直接用于原型界面占位,亦可上传.gif及.png格式的图片,并通过拖拽调整图片尺寸。组件特性:图片组件与个人图片素材库(注相关联可直接批量上传UI设计稿至素材库直接点选素材库中图片以完成对当前图片组件的替换操作可直接

23、在工作区中粘贴截图或直接将图片拖入工作区插入勾选等比例缩放图片表示当前图片按照组件尺寸等比缩放Chrome浏览器及官方客户端支持对图片进行简单形状裁切支持图片滤镜,选中图片后调节滤镜参数即可*注:关于图片素材库及图片滤镜的功能将在第三节课中详细解答。7. 按钮简介:适用于制作各种功能按钮,外观默认为圆角矩形、文字居中、白底黑字。可直接打开图标素材库,为按钮添加图标,图标居左且不可自定义。组件特性:按A打开图标素材库,点选某图标为按钮添加或替换图标设置图标后,不支持删除图标,只能删除按钮后重新设置外观设置:颜色:前景、背景、阴影颜色等 (快捷键“O”外观设置面板文字(T:对齐方式、字号等图标素材

24、库(A:图标大小、图标搜索及分类筛选其他基础设置:圆角半径、固定位置、显示隐藏(V、一键圆形/正方形、初始动效等按钮组件、文字、形状组件都是可以通用的,只需自定义外观即可。8. 聊天气泡 简介:tooltip组件,适用于制作聊天气泡及相关工具提示效果。默认样式为绿底黑字、箭头居左的聊天气泡。组件特征:调整箭头方向及大小创作不同的气泡样式双击组件直接(且只能编辑文字外观设置:箭头方向、位置、大小调整其他基础设置:颜色、文字、固定位置、显示隐藏、初始动效等9. 网页(外部网页简介:适用于展示外部网页内容,在预览原型时该组件区域内会显示已设置的网页信息。注:由于特殊原因(不法分子恶意使用,现已将外部

25、网页组件的权限进行了限制,只有创业版以上用户可以使用该组件。关于事件的说明看这里:官方声明组件特性:双击输入想要展示的网页完整URL只能预览https协议的网页组件尺寸影响预览时网页展示区域大小,也就是网页内容只会在此组件内部显示举例: 双击输入, 运行后网页组件内会显示百度首页。 组件介绍如上图,目前形状组件包括矩形、圆形、直线、三角形这四种形状,他们的用法相似,将组件拖入工作区中,调节尺寸、设置外观即可。1. 矩形 为万用组件,你可以用它占位、制作按钮、一键圆形、正方形等等;2. 圆形 可变身为椭圆,只需调整其宽高即可;3. 直线 调整高度,可设置直线的粗细;直接旋转组件制作斜线效果;4.

26、 三角形 等腰三角形及直角三角形适用于制作角标样式,与其他组件相同通过旋转组件来达到期望效果。如何旋转组件呢?见下图,选中组件后,按住上方的旋转图标,顺时针或逆时针转动即可,亦可直接在尺寸设置面板键入角度值,精确控制组件的旋转。 输入组件包括单行、多行文本输入、多选、单选、文本选择及下拉列表框以及开关组件。输入组件与其他类型组件的区别在于预览时此类组件是动态展示的,如:你可以在文本输入框中输入密码、点击switch来模拟开关效果。1. 输入框组件:我们把拖入单行、多行、以及工具栏组件分类下的搜索组件统称为输入框组件。组件的具体使用方法如下:1. 拖入输入框组件后,双击修改默认文字内容2. 预览

27、时,单击输入框,可直接输入文字2. 单行输入框:除基本的使用方法外还有其独特的组件属性:链接可以通过敲击回车触发跳转可在尺寸设置面板处选择键盘样式,如选择密码,预览时输入的信息自动转换为·····密码暗文3. 单选:将多个单选框组合(Ctrl+G后,组合中的单选框有且只能有一个处于选中状态。4. 多选:输入组件多选一般与列表组合相配合(如:问卷、购物车等 5. 下拉列表框:拖入组件,双击修改列表文字,每项文字使用回车分隔即可创建完毕。预览时列表项文字与编辑时的各行文字内容相同。需要注意的是,下拉列表框无法设置跳转链接,只供列表内容展示用。若你需

28、要实现此效果,可以使用矩形组件直接拼接出列表样式,设置跳转链接。6. 开关(Switch:预览时直接点击即可切换开/关状态。工具栏 工具栏分类下包含的组件为标题栏、底栏、搜索框、标签、空白栏。1. 标题栏简介:适用于制作页面顶部导航栏。组件特性:默认置于页面头部,不支持移动其所在位置默认文字居中,字号18号,不支持调整文字居中方式可拉动标题栏的底边调整组件高度预览时标题栏区域及区域内组件默认为固定状态,不随页面滚动外观设置:可进行简单的颜色及文字设置。2. 底栏、标签 简介:如上图底栏与标签组件通常配合使用。底栏与标题栏相似,用于制作页面底部的tabbar效果;标签可以看做是图标与文字组件的组

29、合,默认外观即组件缩略图样式。组件特性:标签的可选高度不可调节,宽度可调,可拖动调整组件位置可通过打开图标素材库调节图标大小、外观以及文字大小,来设置标签样式底栏默认置于页面底部,不支持移动其所在位置拉动底栏的顶边调整组件高度预览时底栏区域及区域内组件默认为固定状态,不随页面滚动3. 搜索框与上一节所讲输入框组件功能一致,拖入组件后双击编辑默认文字,预览时可输入文字模拟真实搜索效果。可通过设置前背景色、组件宽度来调节组件外观。4. 空白栏组件外观与矩形相似,区别是空白栏的宽度与原型宽度是一致的,无法通过拖拽直接调节。该组件适用于制作列表通栏效果。其它组件 其它组件内包括地图、键盘、批注及状态栏

30、组件。1. 地图根据当前网络环境显示不同的地图(中文、英文,预览时地图组件可以左右拖动模拟真实地图效果。2. 键盘键盘默认至于页面底部,不支持移动其位置预览时底栏区域及区域内组件默认为固定状态,不随页面滚动在尺寸设置面板设置默认键盘类型:数字键盘、字母键盘此组件为静态组件,预览时不支持动态输入键盘默认样式随原型设置时所选设备类型(Android或iOS改变(如下图 3. 批注组件简介:适用于对原型页面功能进行说明、备注,默认样式为黄色便签。批注组件是唯一可以在运行时显示的手机框外的组件,其他组件均不显示。组件特性:可将批注组件放置于工作区内任意位置,设计器内、外部区域均可双击批注即可添加描述,

31、用法与文本组件相同预览时,批注随屏幕滚动显示或隐藏将批注线拖至页面内,对指向处功能进行描述批注线颜色和批注背景色一致批注线默认半透明,鼠标悬停批注时,线条高亮批注线即下图箭头标识处: 4. 状态栏该组件只有在当前页无状态栏的情况下才会显示在组件区。组件默认样式跟随所选设备机型,双击可修改服务商信息。设置面板墨刀内的设置面板分为两类,一种是设置组件外观样式的组件设置面板,另一种是控制页面跳转的链接设置面板。两种面板位于工作区中部,当选中某组件时才会触发面板的开启或关闭。组件设置面板组件设置面板分为外观、文字、尺寸、素材库以及图片上传五个功能面板,控制组件外观样式的改变。组件设置面板默认为开启状态

32、,用户主动关闭某面板后,下次选中组件时,该面板为关闭状态。若想再次开启面板,点击工具栏下方对应按钮或面板快捷键即可。(如下图 1. 外观面板(快捷键“O” 在外观设置面板内可以设置组件的颜色、边框样式、阴影以及透明度。直接粘贴16进制颜色代码或打开取色器选取颜色,完成颜色设置。自定义主题:除了直接使用墨刀内置主题颜色,您还可以自定义主题。添加主题:将配置好的颜色及样式添加到自定义主题处,就可以跨项目使用了。应用主题:选中组件后直接点击某自定义主题(或使用快捷键Shift+10即可快捷应用主题。更新主题:选中某主题,修改外观面板部分参数后,点击更新主题按钮,完成更新。2. 文字面板(快捷键“T”

33、 在文字面板内可以设置文本外观如文本颜色、字号、行高、对齐方式,可使用双击或直接在面板编辑框内输入文字的方式编辑文本信息。3. 尺寸面板(快捷键“R” 尺寸面板中可设置组件位置(X、Y坐标、组件尺寸、旋转角度、圆角半径以及组件初始动效。其中有两个常被用到的功能需要大家知晓:固定位置以及组件的显示隐藏。运行时固定位置:勾选此选项时,预览模式下所选组件将不跟随页面滚动,且组件默认置顶,其他组件将无法覆盖它。该功能适用于制作 FAB 效果。当前状态可见(快捷键“V”:此选项控制可组件的显示或隐藏。默认为勾选状态,取消勾选后组件将被隐藏。适用于制作不同页面状态下组件交互效果。4. 素材库面板 墨刀内有

34、两个素材库,一是图标素材库(图标组件、按钮组件可开启,二是图片素材库(快捷键“A”开启。图标素材库(快捷键“I”:图标组件专属素材库,选中图标后点击工具栏上的星星按钮可以开启素材库面板,使用图标搜索功能可以快速定位图标素材。图片素材库(快捷键“A”:个人上传至墨刀的图片素材都将在此面板展示,具体的使用方法及功能介绍请看下一课。5. 图片上传面板 图片上传:拖动图片到面板下方区域即可完成图片上传;点击上传区域将打开图片素材库面板。图片裁切:支持对图片进行简单的形状裁切(不支持Firefox浏览器。裁切方法如下:1.选择裁切形状:选中图片,打开图片上传面板(快捷键U,选择形状2.选择裁切区域:调整

35、图片上蓝色锚点位置(只有矩形及圆形支持整体移动裁切形状移动外侧锚点位置可以调整截图区域拖拽裁切中心锚点可以整体移动裁切形状3.确定裁切:鼠标点击外部空白区域即可确认裁切4.重置裁切:点击图片上传面板上的移除图片裁切按钮,将恢复图片原始效果*注:图片裁切功能只有Chrome浏览器及官方客户端可使用。6. 图片滤镜面板图片滤镜面板在图片上传面板旁,可对当前选中图片样式进行调节,如调整亮度、对比度等基本图片属性,亦可添加模糊效果。链接设置面板1. 页面链接使用墨刀可以非常方便地创建页面间链接,墨刀独创的拖拽链接方式,让页面间的链接关系清晰呈现眼前,要创建页面间链接,只需要选中组件,然后拖动组件右侧的

36、小圆圈到目标页面或状态就可以了,如下图: 创建好链接之后,我们会看到链接设置面板: 链接面板包含5个部分:手势、切换动画、动效时长、定时器以及相关跳转设置,下面我们来依次介绍这5个部分。手势:对应的手势操作可以触发页面跳转,可供选择的手势有7种:点击、上下左右滑动、长按、双击。全局手势有8种手势可以选择:点按、上下左右滑动、长按、双击以及摇一摇。最后一个钟表图标的手势为定时器,选择定时器后可设置页面自动跳转时间。切换动画:页面切换动画选择,共有15种特效可供选择,如果您不确定需要哪种效果,可以直接将鼠标移到动画上面预览切换效果。动效时长:设置不同的时长可直接影响动画的切换速度;如无特殊需要可不

37、做设置。定时器:可以设定当前链接的自动跳转时间,到达时间后,即使用户没有任何操作,应用也会自动跳转到目标页面,适合制作轮播动画等等。保留两侧浮动页面:设置左菜单后,若想保持左菜单浮动状态,在对菜单页进行链接时选择保留两侧浮动页面即可。重置目标页为初始状态:此功能默认处于选中状态,若取消选择则代表不重置目标跳转页的初始状态。举个例子:页面A为长页面,A中页面下部某组件链接至B页面;B中按钮设置链接返回A,并取消勾选重置目标页状态;页面返回后,A展示会跳转之前的内容或状态。2. 状态链接 状态链接与页面链接不同点在于新增了延迟设置选项,延迟时间是从手势触发时算起,到达设定时间后页面才会发生跳转。新

38、版图片素材库及滤镜介绍新的图片素材库可帮助我们完成上传图片的操作,如:当前页插入图片、创建新的图片页面、图片替换;亦可协助我们管理素材库中已有图片,如:自定义图片标签、修改图片信息、增删图片。一、图片上传流程:支持 .png 及 .gif 格式1. 直接拖入或粘贴图片至工作区,在当前页插入图片2. 批量拖入图片至右侧页面列表区,创建相应数量的新的图片页面3. 拖入图片组件,打开图片上传面板(U,将当前组件替换为图片:a. 点击面板上传区域,选择图片上传b. 将图片拖入上传面板,直接完成图片替换c. 点击上传/管理图片,打开素材库,直接选择已有图片 二、素材库管理:自定义标签、更新图片名1、认识

39、新素材库:新版素材库分为四部分: 图片筛选及搜索区:图片数量精准提醒;输入图片名快速搜索;自定义标签筛选;删除标签列表图库:大视窗多图显示,素材一目了然;删除图片素材库功能区:图片重命名;添加及移除图片标签;插入图片至当前页;替换图片图片上传区:批量导入图片2、图片替换 功能区右侧的替换图片按钮可用来统一替换素材库以及工作区中已有的图片。选中某图片,点击界面右侧的替换图片按钮,上传新版设计图,上传成功后即可完成所选图片的替换操作;当多个项目中已使用了 原图A 时,执行替换操作后,所有项目中的 图片A 将统一更新为新图,且素材库中原图将被覆盖。3、自定义图片标签添加标签:选中图片,在右侧素材功能

40、区点击添加标签,选择已有标签或创建新标签,添加成功后,下方会显示该图片所属标签。 移除标签:选中某图片,点击右侧素材功能区下方标签上的×号,即可移除某图片的标签属性; 删除标签:鼠标悬浮左侧标签列表,点击某标签上的×号,即可删除此标签;*注:标签删除后无法恢复,原标签内图片可正常搜索使用 三、素材库使用须知1. 同一图片可添加n个标签2. 快捷键 “A” 打开/收起 图片素材库,快捷键 “U” 打开/关闭 mini图片上传面板3. 图库中,对某图进行删除操作后,该素材即刻隐藏,工作区中已存在的对应图片不受影响4. 图库中,对某图进行替换操作后,该素材被新图覆盖,工作区中已存

41、在的对应图片均更新为新图5. 需明确移除及删除标签的区别,在相关操作时均有二次确认提醒6. 设置自定义标签属于账号个人行为,不受团队管理制约四、图片滤镜使用方法在图盘上传面板旁新增了图片滤镜面板,选中图片组件后,会自动弹出。选中图片后,在新的滤镜设置面板上调整各参数如模糊、加温等,可实时看到调节反馈。图片滤镜和图片裁切效果可叠加。 母版 组件区域第二个标签为母版标签(快捷键“2”,母版可以复用于账号下所有项目,属性为继承即编辑母版,当前项目中的所有对应母版实例都会同步发生改变。母版主要用于快速修改当前项目内某模块的内容及布局。母版列表(快捷键“2”墨刀内置两个基础母版,供大家学习及使用。将面板

42、切换至母版标签后,可以新建、搜索或筛选已有母版,可编辑母版名称、复制或删除母版。1. 新建母版:点击+ 新母版按钮,编辑母版名称,创建新母版。2. 导入其它项目母版:母版列表默认只显示当前项目内创建的母版,点击导入其他项目母版后,可以将其他项目内母版复制到当前项目中(实现母版的复用,对导入母版的操作只对当前项目内实例有效。3. 搜索母版:通过输入母版名称关键词,查找当前项目内已创建的母版。4. 设置、复制或删除母版:鼠标悬浮母版名称之上,可查看设置、复制、删除这三个功能按钮。设置:齿轮为设置按钮,可设置母版的名称或尺寸;复制:创建当前母版副本,修改副本不会对工作区原母版或实例造成影响;删除:将

43、当前母版删除。需要注意的是,删除母版前,需要将账号内项目中应用过的母版实例全部删除。*注:内置母版不支持修改名称及删除。4. 使用母版:母版的使用与其他组件用法相同。1. 新建母版,修改名称,创建;2. 进入母版编辑区,编辑母版内个页面布局,设置交互链接;3. 点击工具栏保存按钮,保存成功后,返回项目工作区;4. 将已创建好的母版拖入工作区中,调整位置,设置链接;5. 双击实例重新修改母版的页面布局。*注:母版不支持嵌套母版。母版与自定义组合的区别?母版与自定义组合的相同点在于可复用性,两种控件都可以在同一账号的任意项目内使用。在这里我们重点解释两者的区别。1. 继承性:继承性为母版特有属性,

44、母版的编辑及改动会影响项目内已应用的对应实例;自定义组合的属性是独立,对源组合的修改不会影响项目内已有实例。2. 可交互性:母版相当于原型内的二级项目,支持创建多个页面及跳转链接,可完成诸如轮播图等效果;自定义组合是静态的单张页面,无法在组合内部创建交互。母版、母版编辑区与实例 明确母版、母版编辑区及实例这三个概念,可以帮助我们更好地认识母版功能。母版位于母版列表中,单击母版会进入母版编辑区,应用于工作区中的母版区域叫做母版实例,双击实例会进入母版编辑区。母版的尺寸决定实例的显示范围(可选区域,母版背景色设置为透明,透明区域在预览时将不会遮挡底层组件链接。使用母版制作定时轮播图1. 创建母版,母版尺寸应于项目尺寸宽度一致;2. 在母版编辑区内新建3个页面,分别拖入三张图片,将页面1、2、3连接起来,设置页面切换效果为右移入,并设置定时器,时间为2s;3. 保存成功后,返回工作区;4. 拖入该母版,运行预览轮播效果。母版如何连接外部页面?母版可以连接外部页面,但外部页面不可反向连接母版、控制母版交互。具体操作方法:选中工作区中某母版实例,在左侧弹出的编辑母版面板上点选组件所在的页面,选中实例中的组件为组件添加链接。案例教程地址:https:/modao.cc/guide/286使用母版制作页面横屏滚动 / 局部滚动效果母版功能可以实现局部滚动的效果,如:竖向滚动、横屏滚动、查看细