墨刀吧 关注:778贴子:1,807
  • 13回复贴,共1

这里是一些常见实用的墨刀设计原型教程

只看楼主收藏回复

Hello,以后将不定时更新一些常见实用的墨刀设计原型教程,希望能帮到大家哟。


1楼2019-06-25 23:38回复
    基础篇:创建移动端和Web项目
    在墨刀,你既可以创建移动端项目(iPhone/Android)、平板项目、也可以创建Web/电视项目、Watch项目,并可以自定义尺寸,为各种屏幕创建原型。登陆墨刀之后,点击“新建项目”即可。
    当然,您可以选择“从模板中创建项目”。鼠标悬浮在模板上方,点击“使用模板”,就能创建该模板项目。


    2楼2019-06-25 23:41
    回复
      2025-07-31 12:03:40
      广告
      不感兴趣
      开通SVIP免广告
      基础篇:修改原型尺寸和机型
      鼠标悬浮在项目卡片上,点击“...",然后点击“设置”,

      再修改项目的名称、设备类型和尺寸,然后保存即可。
      Q&A
      Q1:修改原型尺寸和机型后,已经设计好的页面内容会自适应吗?
      A1:页面内容不会随原型尺寸或机型修改自适应,如果您修改了尺寸或机型,您需要根据修改后的页面尺寸对页面内容进行调整。


      3楼2019-06-25 23:43
      回复


        4楼2019-06-27 15:18
        回复
          基础篇:添加和编辑页面
          添加页面
          添加同级页面:选中一个页面,再点击页面列表顶部的「添加新页面」,便可以新建该页面的同级页面。添加子级页面:鼠标悬浮某页面上,点击「...」展开更多按钮,单击「添加子页面」即可为该页面添加子级页面。目前最多支持创建7级页面。

          修改页面名称
          双击修改页面名称:可使用“数字”+“页面功能”方式命名,既便于页面识别,又可弥补多级列表演示时的不足,更清晰地展示页面逻辑关系。
          调整页面顺序
          拖拽调整页面顺序:拖动某页面在页面列表上下移动位置即可。如果将页面 A 移动为页面 B 的次级页面,直接拖拽 A 至 B 区域处即可。
          复制/转移/删除页面
          鼠标悬浮某页面,页面名称右侧会显示「...」更多按钮,点击更多按钮展开「创建副本」、「移动到」以及「删除」的按钮。

          编辑页面式样
          在右侧的“页面设置面板”,你可以选择页面是“竖屏”还是“横屏”演示,可以修改背景颜色。
          可以选择是否显示“布局”,并可以修改“列数”/"间隔"/“尺寸”。
          可以选择是否显示“网格”,并可以调节网格大小。
          可以查看当前页面链接数,并在这里一键删除。


          5楼2019-06-27 21:05
          回复
            基础篇:添加组件和图标
            在最右的设置面板左侧里有“组件”、“我的组件”、“图标”库,点击即可打开相应的素材库。
            组件(官方组件)库:墨刀官方提供丰富的组件库,除了基础组件,还有苹果的 iOS, 谷歌的Material design, 微信的 WeUI,蚂蚁金服的 Ant Design, Windows 10 等多套组件库。这些都可以直接使用,画原型效率大大提升。
            我的组件:你自定义的组件库。
            图标:覆盖各领域的图标,来自 Font Awesome, Material Design 和墨刀图标系列。
            墨刀目前有两种方式添加组件/图标到画布上:
            1 双击组件/图标
            2 拖拽组件/图标到画布
            对于左侧(在“推荐”模式下)的“快捷组件”来说,还有第三种添加方式:按住对应的快捷键然后鼠标画出。比如画“长方形”组件,就按住“R”。至于其他组件用什么快捷键,鼠标悬浮在“快捷组件”上就可以看到啦!
            Q&A
            Q1:怎么上传自己设计的图标到墨刀上?
            A1: 目前还不支持将本地的图标导入到官方图标库中。如果有导入图标的需求,可以把图标以PNG的格式上传图片库中使用。
            Q2:图标能直接导出使用吗?
            A2:官方提供的图标主要来源于开源图标库,目前还不支持直接导出使用。如果您需要使用这些图标,建议用搜索引擎搜索「Font Awesome」和「Material Design」这两个开源图标库获取相关图标。


            6楼2019-06-27 21:24
            回复
              基础篇:编辑组件属性
              选中组件,右侧便会呈现出组件的设置面板。

              在面板里可以编辑组件的各种属性,比如位置、大小、颜色、透明度、阴影、动效等等。
              选中多个组件,可以编辑它们的布局方式,比如“左对齐”、“右对齐”、“居中对齐“、“水平等间距”、“垂直等间距”…Q&A
              Q1:怎么隐藏/显示组件?
              A1:选中组件,在设置面板中点击「小眼睛」得图标即可显示、隐藏组件。
              显示、隐藏组件快捷键:
              Mac:Cmd+shift+H(hide 隐藏)
              Win:Ctrl+shift+H(hide 隐藏)
              Q2:怎么锁定/解锁组件?
              A2:选中组件,在工具栏中点击「锁定」,或者在外观设置中点击「小锁」图标即可锁定、解锁组件。
              锁定组件后,点击组件右上方的「小锁」图标也可解锁组件。
              锁定、解锁组件快捷键:
              Mac:Cmd+shift+L(lock 锁定)
              Win:Ctrl+shift+L(lock 锁定)
              Q3:组件可以设置渐变色吗?
              A3:组件和页面目前还不支持渐变色设置。


              7楼2019-06-27 21:27
              回复
                基础篇:保存自定义组件,以重复使用
                画原型时,会遇到这样的情况:我设计好了一套组件,之后会多次利用,但我不想每次都重新设计,该怎么办?
                在墨刀,你可以将任何组件(组合)创建为“我的组件”,收录到“我的组件”库中,之后便直接从组件库中拿出来使用即可。

                “我的组件“跟随你的账号,因此无论你是在哪台电脑使用墨刀,只要登录你的账号,就可以在任何项目里使用你之前设计的组件,助你提升设计效率。
                有2种方式可以创建“我的组件”:
                1 选中组件,右键弹出面板,选择“创建我的组件”。
                2 直接拖拽组件到“我的组件”面板空白区域。
                创建成功后,便可以通过双击或者拖拽的方式直接使用啦!
                如果你自定义的组件数量很多,还可以使用“搜索”功能来提升工作效率。
                此外还可以在“我的组件”面板建立文件夹来管理你的组件,更多批量处理可以通过打开“素材库”实现。
                Q&A
                Q1:怎么收藏模板内的组件?
                A1:下载模板后,如果看到之后可能用得上的组件,可以选中该组件,然后 右键- 创建为我的组件,将它收藏到「我的组件」当中。


                8楼2019-06-28 22:07
                回复
                  2025-07-31 11:57:40
                  广告
                  不感兴趣
                  开通SVIP免广告
                  基础篇:用动态组件做交互动画
                  动态组件的作用
                  动态组件和页面状态一样可以用来实现页面内的交互动画。可以让页面中一个组件的位置、大小、颜色发生改变,也可以设置显示隐藏。
                  动态组件和页面状态比较
                  动态组件和页面状态的动画效果实际上都是用状态实现的。
                  两者的区别在于:
                  1)页面状态做的动画效果会影响整个页面内的组件,动态组件做的动画效果只会影响动态组件内部的组件。
                  2)页面状态基于项目页面完成,不太方便保存复用,动态组件与项目页面是分离的,可以保存到组件库中作为组件素材复用。
                  由于以上两点差异,建议刀友们在做交互动效的时候优先选择用动态组件来实现。


                  9楼2019-06-28 22:08
                  回复
                    基础篇:使用母版批量修改组件
                    你在画原型时或许面临这样的问题:同一个组件(组合)在多个页面多处都用到,但是当后期需要修改时,你想一次性修改所有这样的组件。
                    此时你就可以利用墨刀的“母版”了。
                    母版墨刀支持将任何组件,无论是静态还是动态,转化成母版(master)。
                    母版的特点是具备“继承性”:只要改动母版(master),那么它所有的实例(instance)都能同步更新改动。
                    新建母版
                    步骤:选中组件——右键“转换为母版”——命名。
                    在该项目创建的所有母版都会存放在“母版库“中。
                    编辑母版
                    鼠标悬浮在母版缩略图上方,点击“…”—“编辑”,即可进入修改母版。修改完成后,它在该项目里所有的应用实例都会同步更新修改。

                    Q&A
                    Q1: 母版可以跨项目使用吗?
                    A1: 母版不会跨项目同步,只从属于当前的项目。


                    11楼2019-07-01 00:21
                    回复
                      基础篇:添加交互链接
                      在墨刀,你可以很快捷地实现页面之间的跳转。有2种方式:
                      方法一
                      选中组件,在“链接设置面板“点击“添加事件”。
                      然后设置”触发动作“和”动作“。

                      方法二 选中组件,然后拖拽组件左边(推荐模式下)出现的“链接”图标,到目标页面即可。
                      选中链接,同样可以在右侧的“链接设置面板”,重新修改“触发事件“和“动作”。
                      删除交互链接
                      如果要删除某个链接,只需要点击该链接上的“小剪刀”。如果要删除当前页面所有链接,只需要在“页面设置面板”的“页面链接”处点击“删除”。
                      Q&A
                      Q1:一个组件能添加两个跳转吗?
                      A1:目前还不支持给一个组件添加两种交互方式或者说两个交互链接。
                      Q2:怎么设置返回上一页的交互链接?
                      A2:拖动组件链接到画布左上方的「返回上一页」上,即可实现点击返回上一页的效果。注意:运行时直接在页面列表点击切换页面,将无法触发返回上一页的效果。这是因为没有从A页面跳转到B页面的记录,系统无法判断返回哪一个页面。


                      12楼2019-07-22 00:19
                      回复
                        基础篇:给页面添加备注说明
                        画好一个页面,你也许想加个备注,用文字做些补充说明,那在墨刀如何实现呢?非常简单,使用“组件”里面的“批注”组件就可以了!

                        在“批注”可以添加文字,也可以在组件的外观设置面板里编辑批注的背景色、文字大小、排列方式等等。
                        Q&A
                        Q1:手机预览怎么看批注?
                        A1:为保障手机(小屏幕)的预览演示体验,手机预览演示时无法查看页面区域以外的批注内容。如需展示这些内容,建议在电脑预览演示。
                        Q2:下载PNG能否显示批注?
                        A2:目前下载的PNG图片是指页面区域的PNG图片,不包含批注。如果需要离线向他人展示原型,建议下载HTML压缩包发给对方。


                        13楼2019-07-22 00:21
                        回复
                          请问墨刀支持点击文字更改文字内容吗?比如点击 +关注 然后变成 已关注,再点击就变成 +关注


                          IP属地:贵州来自iPhone客户端15楼2019-10-04 19:10
                          回复
                            墨刀原型中,分享去的链接,弹窗中的图标能保存到本地吗?


                            IP属地:浙江16楼2021-08-11 10:42
                            回复