墨刀入门学习笔记

最新推荐文章于 2025-04-11 11:48:36 发布
最新推荐文章于 2025-04-11 11:48:36 发布
阅读量6.3k 收藏 60
点赞数 11
文章标签： 墨刀 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_75207853/article/details/142597660
版权

墨刀入门学习笔记

目录

一、创建文件
二、目录
1. 画布
2. 页面
3. 图层
三、组件库
1. 图片
2. 链接
3. 占位符
4. 表格
5. 批注
6. 下拉菜单
7. 导航菜单
8. 移动端导航
9. 轮播图
10. 网页
11. 视频
12. AI生成
13. 其他组件
四、快捷键
五、微信页面实操小案例

这里使用的是网页端的墨刀，也可以去官网下载客户端版本。
墨刀 (modao.cc)

一、创建文件

点击【个人空间】，右上角有一个【新建】按钮，再点击【原型】：

在这里插入图片描述

这里可以选择不同的原型：App、web、小程序等等。

在这里插入图片描述

再点击【网页 1920】打开下拉菜单，选择不同的分辨率，目前主要还是1920 x 1080 用的多。

在这里插入图片描述

然后再点击右下角【确定】即可成功创建原型文件，创建成功后墨刀会自动打开这个文件，如果需要返回个人空间，只需要在左上角点击返回按钮即可。

PS： 右上角返回按钮旁边就是菜单基础项，里面是这个原型文件的一些功能和设置，这个可以自己去试用一下。

在这里插入图片描述

比如编辑里面有一个【智能填充】的功能，在视图里面有【标尺、参考线、对齐参考线（一般都开启）、画布的大小缩放…】。

在这里插入图片描述

要删除什么东西，【选中+ delete/backspace】就可以了。

二、目录

画布

打开【个人空间】，进入原型文件，找到侧边栏，点击【目录】：

在这里插入图片描述

画布顶栏的不同按钮的功能：

在这里插入图片描述

点击具体某个画布的右侧菜单项：

在这里插入图片描述

在这里插入图片描述

  • 子画布、子文件夹就是添加子级的，上方和下方添加画布就是添加同级的画布。
  • 上移、下移就是同级画布间的移动，改变排序，升级就是子画布会从父级画布出去，变成与父级画布同级，降级反之

PS：如果要给画布重命名，快捷方法就是鼠标移到画布的名称，然后双击，就能够进行编辑了。

要放大缩小也可以按住【ctrl+滚轮】，要拖拽画布可以【空格+鼠标左键】。

页面

一个画布可以创建多个页面，每个画布之间的页面都是独立的，这样就让同一个主题的画布可以直接画不同的页面，不需要反复创建新的画布。

在这里插入图片描述

在这里插入图片描述

页面宽高部分右侧有一个链接的按钮，那个是锁定宽高比的。

图层

如果一个页面里面有不同的组件，那就会有不同的图层（显示层级）：

在这里插入图片描述

在这里插入图片描述

鼠标移到组件处：

在这里插入图片描述

鼠标点击组件，右侧面板会有菜单项，【图层】处也可以调节显示层级：

在这里插入图片描述

在页面中按住鼠标左键拖拽进行选中组件，然后右键，会有一些菜单项：

在这里插入图片描述

这里可以添加到我的组件，按照要求完成添加后，在如图位置可以找到：

在这里插入图片描述

这样就可以用于不同的页面了，不用再次重复编辑组件。

三、组件库

组件使用只需要从左侧面板中，鼠标移到组件处，按住左键拖拽到页面即可。

在这里插入图片描述

所有组件基本上都会有 X、Y、W、H这四个属性值，跟页面的属性值含义是一样的。

还有一些常见的外观设置，下面的组件不再赘述这些属性功能。

另外，可以通过【选中组件 + Alt】就可以看到组件距离页面边界的距离：

在这里插入图片描述

1. 图片

右侧面板中，鼠标移到图片处，点击【替换】，再点击【智能填充】：

在这里插入图片描述

任选一个图片主题，图片就会自动填充内容：

在这里插入图片描述

在右侧面板，图片下方的小按钮可以进行【图片分割】：

在这里插入图片描述

第二个按钮，可以进行【图片裁切】，可以选择矩形或者圆形：

在这里插入图片描述

在这里插入图片描述

点击最右侧的小按钮，可以对图片进行滤镜设置：

在这里插入图片描述

2. 链接

链接组件可以单独使用，也可以放在其他组件的区域上

在这里插入图片描述

链接其他组件，类似于绑定事件：

在这里插入图片描述

链接好后，可以点击上方的红色框按钮部分进行动态演示。

点击链接区域后，图片消失了：

在这里插入图片描述

链接还可以直接拖拽到目录中，能够跳转画布、页面或者链接一些图层：

在这里插入图片描述

3. 占位符

如果某个区域暂时想不到做什么功能，就可以用占位符先占着。占位符也没什么特殊的功能，都是常见的外观设计。

在这里插入图片描述

4. 表格

在这里插入图片描述

5. 批注

在这里插入图片描述

在这里插入图片描述

6. 下拉菜单

在这里插入图片描述

7. 导航菜单

在这里插入图片描述

还有能够调节一级选项以及子选项外观的属性设置：

在这里插入图片描述

8. 移动端导航

在这里插入图片描述

这里弄错了，那个小圆圈应该是设置为默认选中，选项的小圆圈最多只能设置一个，也可以直接点击组件对应标签，会自动设置为默认选中。

其他的导航组件的选项属性也会有这些东西。

9. 轮播图

在这里插入图片描述

10. 网页

在这里插入图片描述

正常会显示这个网页地址对应的页面：

在这里插入图片描述

如果遇到下面这种问题，无法正常显示页面：

在这里插入图片描述

解决办法：

在这里插入图片描述

【隐私、搜索和服务】那里，把严格模式改为平衡模式：

在这里插入图片描述

11. 视频

在这里插入图片描述

12. AI生成

在这里插入图片描述

只需要给出要求的指令，就能快速地生成组件、页面等

在这里插入图片描述

左侧面板也有一些案例：

在这里插入图片描述

13. 其他组件

流程图

在这里插入图片描述

图标

在这里插入图片描述

页面

在这里插入图片描述

脑图

在这里插入图片描述

还有很多组件，需要可以直接进行搜索。

四、快捷键

按照红框部分点击可以查看快捷键

在这里插入图片描述

在这里插入图片描述

五、微信页面实操小案例

在这里插入图片描述

在这里插入图片描述

————————————————- 待更新 -—————————————————

参考资料：

【[B站首发官方版]2024最新墨刀从入门到实战，56集全套教程，产品经理必备软件工具！】

墨刀帮助中心 - 墨刀使用技巧及常见问题解答 - 原型新功能 (modao.cc)

【产品经理修炼之道】-产品经理：从快速入门到驰骋职场
xiaoli8748的专栏
12-03 495
产品经理这个职位虽然有非常广阔的前景，但科技的进步也给这个职业带来越来越高的门槛和越来越大的竞争。如果你计划成为产品经理，或者正在学习成为产品经理，亦或是刚刚成为产品经理，不妨来看一下这篇文章。本文写给那些计划成为产品经理或正在学习成为产品经理或刚刚成为产品经理的人。
墨刀原型工具基本操作流程.pdf
05-17
墨刀原型工具基本操作流程 墨刀App高效原型 墨刀是一个原型设计工具，可以快速构建移动应用原型与 这节课，我们介绍墨刀工具的客户端使用基础，看如何高效 线框图，支持云端保存和实时手机预览。 的设计一个App低保真原型 高 效 的 创 建 基 础 页 面 合理布局 内容为纲 创建应用 首先打开墨刀软件，新建 一个应用，选择应用类型 （这里选择了iPhone设 备），输入应用名称，设 备类型和应用尺寸，点击 创建按钮，完成应用创建。 请参考右侧的操作 制作底部导航栏 新建应用的标题栏会自 动显示应用的名称，标题 栏文字可以自行修改。 制作里布导航栏，从左 侧 “组件”栏目中找到底 部组件，拖入应用之中， 大小和样式可以自行修改。 然后拖入三个导航标 签，修改标签的位置和名 称。至此完成底部导航栏 的制作。 请参考右侧的操作 制作原型页面 在左侧的 “组件”栏目中 找到搜索组件，拖入App 首页中，在 “母版”栏目 中找到轮播图模版，拖入 应用之中。墨刀中有一些 已经做好的组件或母版， 可直接拖入使用，加快创 建原型的时间。 请参考右侧的操作 制作原型页面 然后回到 “组件”栏目， 为首页插
06-原型设计（墨刀）：初识墨刀、原型设计、交互效果、项目演示
Serendipity_zyx的博客
03-07 1万+
1、了解了墨刀的项目创建方式及菜单和功能；2、掌握的低保真原型设计的方法；3、掌握了页面和组件交互的实现效果；4、能够完成项目的发布及演示
APP动态交互原型实例｜墨刀变量控制+条件判断教程
最新发布
Lemonliyi的博客
04-11 1695
本文介绍了原型设计中变量与条件判断原理，涵盖高级交互原型工具选择指南，通过实战案例“3步实现APP原型重置密码动态交互”，展示了变量控制和条件判断功能使用教程，一起来看看吧。
墨刀用户手册,墨刀用户手册,墨刀用户手册
07-22
墨刀用户手册
墨刀基础篇(一) ：4.常用组件(表单、导航)
人不风流枉少年
08-12 5180
双击进入编辑模式，可以新增选项，只能单选，不能设置选项的样式。而下拉菜单支持多选，支持设置选项样式。
墨刀新手教程：5分钟搞定登录页面设计」 「小白必看！墨刀原型工具快速入门教程」 「从零开始用墨刀设计登录界面，超详细新手指南」 「产品经理新手福利！墨刀一步步教你完成第一个原型」 「登录页面原型设计：
南北极之间
01-05 2562
墨刀新手教程：5分钟搞定登录页面设计」 「小白必看！墨刀原型工具快速入门教程」 「从零开始用墨刀设计登录界面，超详细新手指南」 「产品经理新手福利！墨刀一步步教你完成第一个原型」 「登录页面原型设计：墨刀入门完整教学」 「原型设计零基础？教你用墨刀轻松做出第一个项目！」 「墨刀快速上手指南：新手也能轻松完成原型设计」 「5步学会用墨刀设计移动端登录界面！」 「初学者的福音：墨刀入门到设计完整原型教程」 「墨刀新手必备！手把手教你完成登录界面原型设计」墨刀新手教程：5分钟搞定登录页面设计」 「小白必看！墨刀原
墨刀原型工具-小白入门篇
热门推荐
u012998680的博客
05-01 1万+
墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅 ，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。
产品经理入门之墨刀(原型图)
weixin_64512346的博客
02-24 5168
和经常使用的页面一样，在导航栏处需要有个退出的按钮，所以选取自己需要的图标（可以对他修改颜色的填充）需要一个输入框，进行拖拽，进行位置，文字等的修改，按照规范进行相同的处理，如添加按钮等。接下来，我将使用墨刀来画原型图来为大家讲解基本的功能和做法（非常简单易学，很有趣。从素材广场创建项目（可以使用别人的，当然我们做好了自己的可以上传自己优秀的素材。首先从右侧的工具栏中选出自己比较喜欢的图片，拖拽进草稿内，自己调节合适的大小。最后呈现的效果，可以打开预览进行查看（这个是最基本的静态页面，未设计到交互）
墨刀学习笔记（一）
zeroDNA的博客
10-15 1415
一、安装和注册 墨刀分为网页版和客户端、手机端， 我为了方便摸索下载的客户端。个人版有七天试用期，注册后界面如下
墨刀使用入门学习笔记1
GutiHAZ14的博客
09-09 2361
墨刀 原型工具 需要官网下载和注册 https://modao.cc/ 推荐下载到本地 入门使用 企业级使用最好创建一个 organization space 个人玩或者非正式场合，就personal space就可以了 创建Project 点击Create旁边的箭头 发现两个选项 project 或者 from template 选project 一样可以选择墨刀自带的一些模板 ，我们这里选 project 我们看到其实这里有两个tab页，一个是空项目 ，一个是create from demos 其
墨刀学习方法
人不风流枉少年
08-23 4010
一：官方视频 墨刀的使用与Axure基本上差不多，不同的是墨刀把一些常用的小组件都封装好了作为一个独立的元件提供出来了，并有对应的样式与事件，而Axure还要自己一点一点的制作。在Axure RP 9中也提供了一个Simple UI Patterns元件库，该元件库也提供了很多常用的组件，如轮播图、时间选择器、进度条等元件，但是这些元件都是利用Default元件库中的多个元件加事件制作出来的，并没有单独封装成一个独立的组件。 Axure在制作App原型时很麻烦，通常都是使用Axure制作PC原型，使用墨刀制
墨刀原型设计工具学习体会——临摹网易云音乐App
2401_84094979的博客
04-22 1192
总结一些学习过程中的体会吧！一开始也是贪心，想着之前有接触墨刀的基础，进入工作区，立马就创建了一个支付宝demo，很无奈看不懂呀，只看到一推线，一堆手势。本事不到家，更加不能心浮气躁。沉住气，看教程呗。墨刀的教程做的蛮清晰明了的，看完**【快速使用墨刀-快速上手】【基础手册-工作区】**大概就能制作一个有模有样的静态页面，这部分花十来分钟看一下还是很有必要的，能让你快速入门。光光静态页面肯定不行呐，接下来就重点攻克一下**【进阶效果】【母版】
零基础入门课程（从产品经理岗位、分类、职责等开始）
Chen_Siri_33的博客
07-26 732
产品经理零基础入门课程，主要分为六大部分：1、认识产品经理；2、问题思考维度；3、产品解决方案；4、项目立项；5、思维导图-Xmind快速入门；6、原型设计-墨刀。
WEB前端学习工具，资源技术汇总（IDE集，框架集，类库集...）
web前端入门基础进阶教程-htmlcssjs
05-06 1068
该篇主要收集了一些前端常用的编辑器、框架以及一些常用工具，帮助前端开发者更快成长。 IDE集 VSCode：https://code.visualstudio.com/ SublimeText：https://www.sublimetext.com/ WebStorm：https://www.jetbrains.com/webstorm/ Atom：https://atom.io/ Hbuilde...
2022年Web前端开发流程和学习路线（详尽版）
weixin_47367099的博客
06-13 9685
前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。前端技术的更新日新月异；前端框架的技术选型百家争鸣；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个
微信小程序授权登录和获取手机号功能（详细）
2401_83916355的博客
03-30 2874
请依次允许获得你的公开信息及手机号码请升级微信版本（四）index.wxss.header {.content {.operBtns{important;important;*/（三）index.jsPage({data: {//判断小程序的API，回调，参数，组件等是否在当前版本可用。AuthorizedLogin: ‘授权登录’,
微信小程序云开发教程——墨刀原型工具入门（安装以及基础使用教程）
ZhiYilang的博客
03-01 3488
墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅 ，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。墨刀 - 在线一体化产品设计协作平台 (modao.cc)
墨刀使用笔记
qq_30272167的博客
07-11 508
3.永久拖动：按住空格键+Alt+a。2.按住鼠标中间键拖动。
算力 H20在算力方面进行了优化，提供了不同精度下的算力支持，如INT8算力为296TFLOPS，FP16算力为148TFLOPS等。这些算力指标使得H20在处理大规模数据集和复杂计算任务时表现出色。FLOPS性能提升50% 功耗增加200W（GB300和B300 HGX的TDP分别达到1.4KW和1.2KW；前代则为1.2KW和1KW）
03-19
### H20 算力优化及性能指标分析 #### INT8 和 FP16 的性能提升 英伟达H20在INT8和FP16精度下的表现尤为突出，其设计旨在最大化推理效率并降低延迟。相比前代产品，H20通过架构改进实现了更高的吞吐量，在INT8模式下提供了显著增强的TOPS（Tera Operations Per Second），而在FP16模式下则提升了TFLOPS（Tera Floating-point Operations Per Second）。这种优化使得H20成为机器学习模型部署的理想选择[^2]。 #### FLOPS 性能对比 就FLOPS而言，H20相较于前一代GPU有明显进步。具体来说，它不仅提高了单精度浮点运算能力（FP32），还大幅增强了混合精度计算的支持力度，这对于需要高精度与高效能平衡的应用场景尤为重要。此外，借助Tensor Core的新特性，H20能够在特定工作负载中实现更高倍率的速度增益。 #### 功耗管理与 TDP 设计 功耗方面，尽管H20拥有更强悍的处理能力和更大的晶体管数量，但由于采用了先进的制程技术和高效的电源管理系统，整体能耗得到了有效控制。对于GB300、B300以及HGX平台上的配置版本，各自的热设计功率（TDP）均经过精心调整以适应不同的应用场景需求。例如，在数据中心环境中运行时，即使面对极高负荷的任务也能保持稳定而持久的表现。 #### 前代产品的比较 当我们将目光投向前几代NVIDIA GPU时可以发现，无论是从原始算力还是实际应用效能来看，H20都树立了一个新的标杆。特别是在针对AI训练和推理任务进行了专门调优之后，无论是在每瓦特性能还是单位面积内的计算密度上都有所突破。这表明相对于早期型号如V100或A100等，新一代硬件已经迈入了一个全新阶段——即更加注重可持续发展的同时追求极致性能。 ```python # 示例代码展示如何查询 NVIDIA GPU 的基本规格信息 (伪代码) import nvidia_smi nvidia_smi.nvmlInit() handle = nvidia_smi.nvmlDeviceGetHandleByIndex(0) info = nvidia_smi.nvmlDeviceGetPowerUsage(handle) print(f"Current Power Usage: {info / 1000} W") ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值