墨刀原型如何快速变成前端代码
大概在几个月之前吧，看了一个老外的一个视频介绍，通过一个手绘的一个草图，系统能自动生成代码，但是觉得这个可能还是在一些理念想法阶段。 那今天我们的同事呢，基于这个图片跟恰的 gdp 四点零去作为一些这个绑定，也就是通过上传一些图片，我们能把这些图片复制网站的一些界面原型， 快速能生成前端的代码。那这样做的目标也就是未来我们真正的在系统当中做前后端分离的时候，我们的前端样式会更丰富。 那在我们 pass 平台上面，现在就提供非常多的这种前端组建市场，未来我们会把这个组建市场适应更多的一些场景。在左边这个 区域呢，是我上传的一个图片，他通过这个图片，嗯，生成的右边的这个前端代码，然后有 pc 端的，有移动端的，那这个呢？是整个代码的生成的过程，嗯，其实效率非常高哦， 就是我们可以把这些做成一个模板市场，那我同时我可以提供一些新的意见，比如我把这个模板改成一种暗黑风格，整个呃页面他会快速的去生成这些页面代码， 然后这边就是变成一个暗黑的模式，那同样的，我把它变成一个是紫色的一个布局，就是我要求整个，嗯，主题色改成了一个紫色的，那他按照我这个需求的内容重新生成一个紫色，那 按钮呢？可能就是不太一样哦，可能你比如光标移到那之后，他才换成一个紫色，那同样的在我们这个卡片市场当中预制了很多的卡片，那我们会发现说这个把我们卡片截图放进，放进来以后呢？他就很方便的去生成这些卡片。 我们可以推理在不远的将来，应该在数月内，像福克马 action 这种前端界面圆形设计工具就可以快速生成代码，这个是必然的一种趋势。 那同样的像我们低代码更多的会去做很丰富的前端组件，跟我们后端的 api 进行快速绑定，快速交付业务。
粉丝28获赞104
相关视频
02:35查看AI文稿AI文稿四款产品经理最常用的圆形图工具， ex、 磨刀、模克和马钱，你最配谁？普及率最高的当属 ex， 这绝对是产品经理的启蒙。圆形图工具能快速创建县风、土流程、土原型、说明文档、 app 和外部网站，产品的设计都不在话下。磨刀主打在线设计，编辑圆形的工具主要是手机端的圆形设计，能够快速创建页面，这是手机端实时预览编辑后产品直接保存云端，随时随地进行圆形设计的制作。 模克相比磨刀主打手机端模克，在 pc 级，外部端圆形设计的功能很强大，并且自带交互效果的预设组线可以帮助产品经理快速铲除设计，而且还是免费的。马前去年九月份刚上线，有丰富的圆形模板库支持圆形 ui 图对比支持功能点与圆。 这三个功能啊，都能够比较好的帮助产品经理提升工作效率。那产品经理选圆形图看什么看？四点一，看组建库和模板的丰富度，这能提升设计效率。 第二，看使用产品是否广泛，是否 pc、 移动 lab 都支持。第三，如果要产出高保真，还要看交互功能的支持程度。 第四，要看功能的拓展性。如果一个产品能够解决所有产品经理对于工作中的工具需求自然更加强大。 从组建库和模板来看，莫当内置了比较多元的组建，只是自定义组建，同时提供大长常用的组建 ls、 element t、 dess、 小程序等等，符合国内的使用场景，操作便捷，略胜一筹。 使用场景来看，磨刀更侧重于手机端的圆形设计，如果你是一个呃要做外部端产品或者呃 pc 的产品，那么 action 模特马前会更加友好。那交互设计来看的话，如果日常的产品工作对于页面的交互要求不高，那么以上几款产品呢，都可以满足你的需求。但如果要产出高保真的原型， action 模特能够支持复杂的逻辑关系处理，模拟更加真实， 但 x 的使用体验稍显复杂。第四呢是功能拓展性。莫刀的定位是圆形工具，对流程设计、 ui 设计方面支持很少，其他三个产品支持更加到位。 那如果你是一个新手的产品经理啊，主要以手机端产品设计为主，推荐使用磨刀。如果你的工作包含了 pc 和外部场景，别想在一个产品内做流程图，推荐使用模克和马钱。最重要的是模克现在免费。 如果还想继续进阶，提升产品原型的交互体验，铲除更复杂的原型图，可以尝试学习曲线更陡峭，但是支持功能更多样的 x。
3718Super产品林木说
01:41查看AI文稿AI文稿产品小白刚入行最头疼的问题就是各种圆形图，各种扣细节，今天给大家分享一个产品工具，算是产品小白的一个福音了。这个工具叫马前，听名字你应该能感觉到这个工具的定位就是开发代码之前的所有的工作一步搞定。 大家画圆形的时候，最常用的工具应该就是 x 和磨刀了。马前这个工具其实有几个特别好用的点，第一呢，就是他有非常丰富的圆尖库，这也是画圆形最麻烦的地方了，因为你毕竟还是要找很多的一些 icon， 节省了你大量找 icon 的时间，而且圆间库的风格也很多， icon 的尺寸和颜色都可以调整，所以非常方便。 第二也是最重要的环节就是他内置了很多的产品模板，无论你想要规划一个移动端的 app 还是小程序，还是做一个 pc 端，还是要搭一个后台，他都会有大量丰富的模板，而且这些模板都支持一键调用， 这样的话你就可以在模板的技术上根据自己公司的需求来调整页面或者功能那些细节，来大幅提升你的工作效率。因为你不用从头画， 比如让你曾经到一大一个电商资讯或者直播类的产品，你还得去研究到底应该画哪些页面，应该具有哪些功能，但是他的模板库里都有，而且很全，最重要的是很多常用的模块的功能和逻辑分支人家都已经帮你整理好了，所以对刚入行的产品小白是非常友好的。 第三呢，他融合了从需求到产品原型再到 ui 交付的一整套整合方案，也就是说你可以用他自带的需求管理的功能来进行需求持的管理，然后把需求转化为完整的产品方案， 再把原型交给 ui 转化为设计稿，而且对 ui 来讲还支持 sky 式的导入，这样的话就方便了产品和 ui 来检查 ui 稿是否有遗漏，感兴趣的小伙伴可以体验一下。
3527刀叔产品论
08:44查看AI文稿AI文稿哈喽，大家好，我是思思，之前视频给大家分享过产品经理日常画圆形的流程步骤，以及怎么做圆形练习。为了帮大家解答一些问的比较多的点，比如说画圆形需要画到什么程度才算行？低保真还是高保真呢？到底什么样才算好的产品设计？ 那今天呢，就想跟大家分享一些画圆形的要点和原则，分享五个大家在画圆形的时候一定要注意的产品设计原则。原则一，状态可见原则用户在界面上的任何操作，不论是网页上的单机鼠标悬浮滚动，还是手机上的长按侧滑双击 页面，都应及时给出反馈。及时是指页面响应的时间要小于用户可以忍受的等待时间，如果没有及时合适的反馈，用户就会茫然失措，可能会多次重复操作，以为卡了，不知道下一步要做什么。 当页面在加载的时候，需要告诉用户页面在加载，而不是空白的页面。再比如说下载安装显示的进度条，提交表单的加载中提交成功或者失败的 tost 提示。及时合理的反馈是良好用户体验的基本原则。就仿佛用户和产品在进行一个持续的沟通， 那如果沟通出现了问题，用户就会对产品不信任，觉得不好用，可能再也不会使用了。所以产品经理在日常工作的时候，也需要通过原型图或者是需求文档覆盖到这些情况，才不至于在开发过程中漏掉，导致用户体验差。那么刚刚提到的这个加载中的进度，怎么用原型图去制作体现呢？ 我拿下载安装这个需求场景做一个演示，今天用的圆形工具是大家都非常熟悉的，我自己，包括我很多同事在工作中都会使用的圆形设计工具。磨刀，就在前几天磨刀 八点零上线了，正好也让我们一起体验一下磨刀的新功能。首先是画布，画布内支持新建多个页面，原来一页只有一个页面，那我们如果想看多个页面的话，就需要来回切换，那现在多个有关联的页面不仅可以在一个画布内展示，还可以进行连线，制作页面流程图， 地面关系会更加清晰，批注也进行了升级，对于习惯在原型内写需求文档的产品经理会更加方便了。其实这种需求文档的形式呢，也是很多敏捷开发的公司会应用的，因为会更直观快捷，没有那么多文档格式的限制。我们先看一下做完之后的一个效果， 那做这个交互效果呢？我们需要用到动态组件，可以制作页面多个状态进行切换这样的效果。页面画好之后呢，我们复制一下，因为我们需要两个页面分别制作点击事件和定时事件，下载加载过程中的 交互效果就可以用动态组件，我们先把安装按钮转化为动态组件，进入组件的编辑模式。创建加载过程中的每个状态，我分别做了百分之一、百分之十、百分之五十、百分之八十。还有完成打开的状态， 在每个状态设定定时事件，跳转至下一个状态，再把安装按钮设置，点击事件切换至第二个页面就可以完成了。我们来试一下 原则二，环境贴切原则产品设计中的一切表现和表述应该尽可能的贴近用户所在的环境， 要使用用户熟悉的图标语言来告知用户，可以利用现实生活中的一些行为作为设计的元素进行隐喻，很大程度上呢，可以降低用户的学习成本，同时激发用户的 使用兴趣。比如说这些弹窗文案，简洁明了，通俗易懂，如果我们在文案中写点击主按钮参与，那么很多用户可能会觉得，呃，主按钮这个表达就很奇怪了。那再比如说微信读书的翻页效果，就做的和我们看实体书很相似， 都是为了尽可能贴近现实生活。再比如说音乐软件的播放，就是像一个黑胶唱片转动的样子， 交互效果我们通过磨刀也可以做出来。制作。音乐播放效果呢，我们需要两个状态，播放中和暂停播放，点击播放按钮变成暂停按钮，同时上面的转盘要开始转动，点击暂停按钮停止，那我们通过点击事件和设置图片动向就可以完成。 首先还是要创建两个页面，播放中和暂停播放，播放按钮有差异，在未播放的页 面中，播放按钮要设置，点击事件跳转到播放中的页面，另一边也是一样的，点击暂停按钮返回暂停播放的页面。另外呢，就是播放中状态，我们需要让这个圆形图片来进行旋转， 选中中间的图片，在外观动效里面选择旋转，设置无限循环和动效时间。让我们演示一下效果是不是很简单。 原则三，撤销重做原则也可以叫做可控性原则，为了避免用户的勿用勿操作，应该提供撤销和重做功能，让用户具有对产品的控制性 自由度，也就是要给用户留一条后路吧。比如微信的撤回功能，微博的在编辑功能发出去的内容也可以修改，用户在删除的时候也会有一定的焦虑感。那么回收账功能三十天内可找回，这种策 略呢？就可以给用户增加一些安全感。那我刚刚提到的微信撤回消息这样的交互动作，我们用交互原形制作也是很简单的，同样是先把撤回动作进行一个拆分，可以拆分成三个页面状态消息发出撤回的操作。面板消息撤回，我们可以先用连线功能把 页面流程标注出来，然后直接按照页面流程连接，点击交互。要注意的是，在第一个页面交互事件是长按，这样就完成了。 原则四，一致性原则对用户来说，同样的文字状态按钮都应该触发相同的事情，要遵从通用的平台惯例， 也就是说同一用语功能操作要保持一致。一致性包括以下五个方面，结构一致性，保持一种类似的结构。新的结构变化会让用 户思考规则的排列顺序，能够减轻用户的思考负担。色彩一致性，产品所使用的主要色调应该是统一的，而不是要换一个页面就颜色不一样。操作一致性，让产品在更新换代的时候，仍然用户可以保持对原产品的一个认知， 减少用户的学习成本。反馈一致性，用户在使用操作按钮的时候，点击反馈的效果应该是一致的，比如说基本上所有的阅读产品，我们在点击页面中间的时候，都会出现一些菜单栏， 这个是经过长期的用户教育，在用户心里的一条理所当然的交互操作。所以一个类型的产品要遵循行业规律，文字一致性， 产品中呈现的用户阅读的文字大小、样式、颜色、布局都应该是统一的。原则。五、防错原则通过产品设计防止用户出错我们肯定有过这样的 体验，就是一般我们在做删除操作之前，都会有一个二次确认弹窗，这就是在产品设计中，为了防止用户犯错，对于比较重要的操作都进行了二次提示确认。再比如用户发一条动态，发到一半的时候， 无论是因为误操作，还是说他直接点击了返回按钮，那我们再使用二次确认弹窗，可以去询问一下用户是不是要保留这个内容，因为用户这个操作呢，会让之前辛苦编辑的内容删除找不回。那么这种二次确认弹窗的交互怎么 用圆形工具磨刀制作呢？我们可以以朋友圈发布返回挽留的流程来进行一个举例，这个流程呢，我们也可以拆分成三个页面状态，分别是发朋友圈、编辑朋友圈返回挽留。我们还是可以先用连线功能把页面流程标注出来，然后连接需要 有点击交互事件的位置，那我们删除交互事件的操作呢，也很方便，直接点击连接线上的小剪刀就可以了。我们来看一下效果， 以上五条产品设计原则呢，选自尼尔森的十大可用性原则，也是我认为其中比较重要的五条，另外呢，还有协助记忆原则、灵活高效原则、审美和简约设计原则、 容策原则，还有人性化帮助原则。有机会的话，我们以后可以继续聊尼尔森时代。可能性原则其实是在一九九五年就提出来的，到现在已经快二十年了， 是产品设计与用户体验设计的重要参考标准，仍然值得我们反复琢磨，经典需要重新研读，这也是我们为什么要持续性聊他的原因。在现在这个充斥着商业化、流量变现、引导弹窗满天飞的 产品时代，我希望大家在做产品设计的时候一定勿忘初衷，始终谨记用户体验第一的原则，利用好像磨刀这样好用实用的给力工具，做出真正提供用户价值的产品设计。好了，这就是本期视频的全部内容了， 如果觉得对你有帮助的话，别忘了一键三连，我们下期视频再见！拜拜！
260斯前想后来
00:31查看AI文稿AI文稿如何快速掌握磨刀绘制产品原型是产品经理必备技能之一哦！今天带领大家如何使用磨刀绘制产品原型？课程集合了原型绘制的经典案例， 采用低保针加高保针圆形的绘制方法基础小白也能快速掌握。同时课程还讲解了如何入行产品经理以及相关的求职宝典，干货满满，赶快私信，还能免费领取全套资料！
296黑马程序员视频库
09:13查看AI文稿AI文稿天就开始我们的这个实战课的这个第三节，那第三节的内容的话呢，我们主要是对这个呃怎么去画圆形图，然后给大家做一个讲解。呃，然后这节课课程结束之后呢， 嗯，希望大家就是能够掌握这个画圆形图的一些基础的技能啊。然后我们这节课的圆形图呢 是会用这个微信作为一个案例，因为大家每天可能都会有很长的时间在使用微信嘛，而且微信的这个首页他其实呃是运用了很多我们在这个我们的这个原型化缘形同的过程当中的一些技能啊， 所以就以这个为例。那我们就先来看一下我们今天的这个课程结束之后啊，大家都会做出来什么样的一个圆形图。然后因为我们的这个课程呢？呃是以这个录播 的形式进行的。那所以大家可以在这个自己看这个过程当中啊，来跟我一起去做啊。你比如说你看到哪个地方了，然后可能存在一些什么问题，那你就去自己演示一下，对吧？跟着这个去做一下。那整个做完了以后， 那你可能就应该已经掌握了大部分的这些还原型的一些技能了哈。然后化原型图其实就是一个，呃对于产品经理来说还算是比较初级的一个技能。 嗯，然后我们只要学会了，那后续更多的就是怎么样去利用他已有的这些能力，然后去实现你想要去实现的那样的一种交互啊。 然后我们在这个过程当中的话，我们是使用的磨刀啊，大家看这个磨刀去作为我们的这个圆形的一个呃工具，呃，还有一些同学可能 我们以前听说过，比如像这个 extra， 对吧？还有这个 sketch， 那像 extra 的话，他原本是为了这个呃我们去做这个 pc 的那种，那种那种圆形图而生的这么一个圆形的应用，它里面可以配置一些函数，可以做出一些比较复杂的这个交互和一些具有这个呃判断逻辑的这么一种圆形图。那我们实际上在工作当中呢？呃，现在因为大家都是在做这种移动互联网的产品嘛， 大部分都是在使用这个磨刀去画这个圆形图，包括如果说你要做这个 啊，比如我们做后台 pc 的一种后台，对吧？也可以使用魔道去进行啊。然后我我们其实对圆形图的一个最大的要求就是说你要体现清楚说你的这个圆形图上得有哪些东西，有哪些元素啊？ 然后把这个信息提现出来后，还有就是说这个呃你的页面有哪些交货啊？我点击这些地方能够往哪去进行一个跳转，把这两个信息提现清楚了， 其实我们的圆形图的目的就能够拿到了啊。至于里面的一些具体的这个实现的过程当中的一些交互，我们可能无法通过圆形图的软件去实现，那我们可能就是通过这个和交互啊，和这个设计的这个，还有包括我们最后的这个研发同学啊， 通过这种呃文档的形式，或者是这种直接语言沟通的形式啊，去告诉他说，哎，我这个地方，呃，你看到的这个圆形图静态他是这样的，但是实际上在使用的过程当中呢，他有什么样的一个动态的效果，对吧？有什么样的一个动画？ 这些我我们是无法通过原形图去实现，所以我们要通过沟通和我们的文档去解决的啊，然后包括我们说到的里面的一些复杂的这个判断逻辑啊， 还有这个页面的不同的状态等等等等这些更多的东西呢，我们做的呢就是说我们通过文档去实现啊，因为这个成本可能就会比你直接在原形图上一个一个把它都画出来成本要低的很多。 那我们就先来看一看哈，我们今天做完之后，我们会得到什么样的一个圆形，那我们就去看一下这个玉兰， 那我们就会看到这么样的一个应用啊，那大家看到这个地方，他其实就和我们的这个微信的一个首页是比较像的了，对吧？我我们点击任何一条消息，可以进入到一个消息的这个详情页面，然后再点返回的时候，我们会看到刚才的那个，呃， 有新消息的那个提示就消失了啊，本来是这样的，对吧？在上面和下面都会有新消息的提示，那一旦我看完这个消息再点返回的时候，这个时候这个 消息就没有了，然后我点击一个返回这个搜索按钮的时候呢，能够进入一个搜索的这么一个状态啊，点击取消的话，他能回到我的首页，点击这个加号呢，能够打开我的这样的一个弹板， 然后再点击这个加号呢，他能把这个弹板收起来啊。微信还有个服装的功能，那我们点击左左上角的这个按钮呢，就能够进入到这个服装的这样的一个状态上去，然后点击这个返回的按钮， 他就又会回到我们这个首页，这就是我们今天的课程里面要去实现的这个圆形图啊。然后呢，接下来我们就来和大家一块啊，伴随着这个怎么去学习使用磨刀，然后一步一步的去把这个东西给实现，好吧。 呃，我们先来看一下这个，呃，整个磨刀的一个结构哈，那在这个呃，首先磨刀这个东西大家不用 去购买哈，我，你看我，我其实一直使用的就是这个免费版，因为在你未来工作以后的话呢，公司可能会给你提供账号啊，或者是这个公司会有他自己的一个原型的那个软件，比如说有些公司他可能都都是提供这个 sketch 啊，还有一些像这个，呃， 像是干去也好，这个这个这个磨刀也好，他本质上还是这个啊，他的协作可能并没有做的那么好，对吧？那协作做的比较好的可能就是这种云云的这种设计应用，像这个飞哥嘛， 还有这个 z 不领这样的软件，这可能是在你工作之后实际上去使用的呃，但是所有的这些圆形工具呢，其实万变不离其宗，你只要能够掌握其中的一个， 后续的那个的学习成本就会非常的低啊，把第一个学会了，不管你学四个 h 还是学这个魔道啊，你把第一个学会了，那你后续再去迁移到其他的应用上去，使用的时候 啊，会快很多。这块的话我们就以磨刀为例啊，大家在这个做圆心的过程中呢，做自己的作业的时候呢，也是以磨刀为例啊，磨刀的一个好处就是他可以很简单的把这个链接给呃，你做完的这个项目的链接给分享出去啊，这样别人就能够很快的去看到你做的这个东西是怎样的， 所以我们就使用磨刀，那磨刀的这个结构的话，我们可以看到哈，大家注册登录以后，我们能看到这是我们的一个呃，大概的页面的结构，这块会显示我们所有的项目啊，那我们大家自己可能就做，你要做一个新的 app 的时候，你就新建一个项目就可以了 啊，新建的话就在这里点击这个新建的按钮，他会让你去选择是要做这个圆形还是流程图，那我们肯定是做这个圆形，对吧？ 呃，也我们也可以在我们原来已有的这个项目上去点击这个，这个是预览，那点击这个地方的话他就是编辑，那就像 对个页面进行编辑。我们来看一下，我们现在要重新创建一个这个圆形，那我们就点这个创建圆形，那在这块的话我们就得去选择说我们要创建的这个圆形，他的一个尺寸。在这块的话，比如说我们要做这个后台的话，我们可能就选这个网页， 如果我们要做这个移动端的话，我们可能就选手机，那在底下的话，你还可以去选择具体的一个机型啊。然后这个的话大家其实就 就就无太所谓了，基本上你你如果自己用了什么手机，你最好就选另一个啊，因为这样的话你是后续在你自己的手机上再安装一个磨刀的那个 app， 你就可以直接在你的手机上去使用这个可交互的呃原形图了， 那底下还有很多这个模板哈，这些模板大家可以在自己那个呃，有空的时候你们去每个点一点，然后去看一看，你就可以知道哦，人家是怎么去画这个圆形图的。好吧， 那我们计划的话，我们就选择这个 iphone 十二，然后去创建我们的一个项目。 呃，那这个项目创建完了以后的这个页面呢，就是我们的一个呃，摸到了一个操作的一个页面了，那在这个操作的页面呢？分成了几块啊？ 首先左边这一块分成了两个区域，一个是我们所所谓的这个叫页面的区域，我们可以看到在摸到里面你的整个这个操作的这个中心区域呢，就是一个手机端的这样的一个页面了， 对吧？如果说你的这个页面涉及到跳转到另外一个页面，那就意味着你需要在这里面有至少两个页面，那你就可以通过新建的方式啊，去创建一个新的页面，对吧？这就是我们的页面一，页面二 也可以对这个页面进行双击啊，对他重新进行一个命名。然后如果说你做的这个项目比较复杂，里面有很多的 页面，比如说我们像抖音，以抖音为例，他可能会有这个视频的这个短视频的业务，他可能会有这个直播的业务，还可能会有这个电商的业务，对吧？那可能我们就可以去对他进行一个文件夹的一个新建一个文件夹，然后再去把所有电商的页面放到一个文件夹里面， 给我们再创建一个文件夹，我们说这个页面叫电商， 那我们就可以在创建完电商之后呢，把所有和电商有关的这个页面啊拖动到这个下面去啊，那这样的话他就变成了一个下一集了啊。如果我们有很多业务的话，可能我们就以这种文件数的这种方式去对他进行一个整理，那这块的话我们就先不考虑啊。 呃，这是我们说的这个页面哈，我们点击以后这个地方的这个页面，大家看到他就会变了，就变成页面二，我们点主页，他就回到了主页。
479产品经理随口说
01:25查看AI文稿AI文稿人人都能做前端圆形，啥是圆形？比如我看见一只猫，然后我根据这只猫画了一只老虎，猫就是老虎的圆形。 再来看一下 j s 中的原型，定义一个 a 的构造函数，在这个构造函数的 podtype 属性对象上定义一个内幕属性，内幕属性的值设置为猫，然后用 a 构造函数创建一个对象， a 对象的原型是构造函数的 podtype 属性。看一下 a 对象能不能调用它原型上的属性。 把内幕属性的值显示在 d i v 一中，保存在浏览器上运行一下，成功调用了 a 对象原型的属性。 再在 a 对象本身上加一个内幕属性直，设置为老虎保存，刷新浏览器 diy 一种显示的内幕值变成了老虎。在控制台上显示一下 a 对象保存， 刷新浏览器，打开控制台，这个是 a 本身的内幕属性， 这个是它圆形上的内幕属性。优先调用 a 对象本身的属性。最后看一下完整代码。
16纯人代码
03:20查看AI文稿AI文稿最近我遇到一个很头疼的问题，我在制作我的课程视频的时候呢，都需要花大量的时间在导出视频素材这件事上，因为我的课程视频最终呈现的状态是这样的，而我用 screen flow 录制好的原始素材是这样的， 我需要先把两个画面分别导出，然后再通过剪映的抠像功能自动把人的背景去掉。抠完之后呢，还得先把整体合成导出，我才能在导出的成品素材的基础上开始剪辑和处理。那光是这导出、导出、抠像、导出这四个步骤就非常的费时。 我估算了下，因为我都是每录完一张的内容，包括课后的练习的部分一起导出。每次光是把原始素材导出成可供剪辑的成品素材，那至少都要花费八到十二个小时的时间，如果按白天的工作时间算，基本上就会浪费我一天半到两天的时间。 而这套课程按照我自己的规划有二十来张的内容，那么意味着我可能会整整浪费一个多月的时间在纯手工导出这个无聊低效的事情上面，想想都太可怕了。那在前两天又一次痛苦的靠手动一个个导出之后呢，我实在是忍不了了， 于是我开始找有没有什么 gs 的代码库能够实现类似按键精灵的效果呢？能让电脑自动帮我实现各种软件的操作，并最终导出我想要的可以进行剪辑的成品素材。 哎，你别说，还真被我找到了。 robert js 这个酷能模拟鼠标操作键盘输入，还能获取屏幕某个坐标的颜色值。那我研究了一下，哎，发现这个酷应该能满足我的需求，于是我边研究边写，花了一天的时间，在踩了不少坑之后，终于我实 这几百行代码可以帮我自动把 squeenflow 文件中的两个画面分别导出保存，然后再自动导入到剪映中进行抠像，最后导出最终的可剪辑的成品素材。我准备了几个很短的 screenflow 的原始文件，我们一起来看看从头到尾的自动效果， 这就是最后导出的成品素材， perfect！ 那从此以后呢，我就可以让电脑在我晚上回家的时候自动帮我完成所有的导出工作了。那第二天一早呢，我就可以用这些完成的成品素材进行剪辑了。懂点代码真的可以为所欲为啊哈哈哈哈哈哈哈哈哈。
18好奇代码的三木
06:08查看AI文稿AI文稿如果你总是担心自己的需求文档写的不够专业，害怕和技术开需求评审会，总是被挑毛病，被说看不懂。如果你总是感觉自己写需求文档好像没有什么章法 法，用简洁明了的语言去描述清楚自己的需求，那今天这个视频就很适合你了。分享一个我在工作中常用的圆形需求文档的写作方法，绝对可以帮助你解决刚才这些问题，现在内容十分干货，建议产品同学可以先收藏起来了。这个方法呢，源于我发现我大多数合作过的程序员 都不爱看文档，他们更爱看原型。区别于把原型进行截图再放到文档里的写作方法，我们可以把需求直接标注进原型里。以我自身的经验来看呢，这种原型需求文档更直观易读，而且当你掌握了之后，工作效率会有显著的提升。今天视频中的文 档部分，我都是用磨刀 v 八来进行制作演示的，用磨刀画圆形我之前其实就推荐过很多次了，因为它真的很适合新手产品，操作简单，素材还多。那用磨刀写圆形需求文档 其实也非常合适，因为不用下载客户端，你直接登录网页版就可以随时针对方案进行修改，能够很大程度上去提高我们的文档写作效率。接下来我们就来分享一下这个圆形需求文档到底应该怎么写。首先呢，你需要一个圆形说明，圆形说明呢，主要是针对本次项目 功能的页面规则，还有展示规则等等全局规则性质的内容来进行一个整体的说明，目的呢是为了一次性说清楚，不用在原型文档中再进行零散的标注了，方便技术查看，方便后续测试校对，也方便产品写文档题项。那一般我们把 那些重复说明的内容整理出来，会放在全局说明里面，比如说页面基本布局和交互形式，比如按钮状态，比如弹窗 tost 提示，比如文案状态，比如常见操作，向下拉，刷新上拉，加载有输入框的地方统一规则。 再比如针对原型文档中后续出现的表格进行一个统一的说明，可以直接在画布中插入表格以及其他需要特别注意的交互操作。页面结构也是原型说明中需要提的， 为了让开发同学对需求有个整体结构上的认识，产品有几个内容模块，每个模块都包含哪些页面？那这部分内容呢？我们可以直接用流程图工具进行绘制。第二步，需要我们针对核心任务去制作一张流程图，梳理 页面交互关系。我们可以用这种永道流程图来把核心任务过程进行展示，这样可以比较清楚的展示出用户与系统、用户与用户之间的交互过程。另外再用页面流程图来展示页面跳转的前后关系， 这个操作大家应该不陌生了，这样我们就能够得到一系列的跳转操作流程。当然核心任务以外的流程图也可以通过这样的方式进行梳理。第三步，增加页面注视。这里就是需求文档的最核心的部分了，把我们原本 要写在需求文档的内容，通过注视的方式添加到你的原型页面里，这里有一些技巧和方法。首先我们可以按照页面模块进行拆分，比如一个个人中心页面可以分为概述基本信息、通知红点、操作按钮，我们划分好的模块，用这种小标题的方式进行分割就很清楚了。第二个要点 是罗列数据，每一个页面内容都是由数据组成的，我们要根据数据内容去思考交互和视觉表现形式，选择适合的空间。那我们刚刚提到的 很多个模块内容都可以通过罗列数据的方式进行展示，比如各类的展示内容，页面的各种操作以及各类状态内容展示。 三个要点呢，是要描述操作，针对页面上的所有可交互操作，你都要描述一下操作之后的结果。第四点呢，是要描述规则，如果有默认状态，也是在这个时候来进行说明，比如页面有不同的状态，每个页面的初始状态、 正在编辑状态、正常状态、异常状态等等，也都可以用表格的形式进行罗列。最后，如果你觉得静态注视描述的不够清楚，我们也可以通过制作简单的辅助动 效来帮助理解。总而言之，想要产出一份简明扼要的需求文档，每页内容根据页面功能的不同，你都可以通过划分模块，罗列数据，描述页面操作规则进行，这样就不容易遗漏需求点，而且特别易读易懂，不再需要大段的文字描述， 写的费劲，技术读的也头疼。最后呢，还有一块内容，大家很容易遗漏的，就是异常情况常见呢，比如说网络异常、数据异常、操作异常等等，那这部分呢，我们可以和测试一起梳理， 也可以上线之后呢，根据用户的反馈再进行补充，按照这样的方式写下来呢，左边是我们的文档目录，每块内容都可以展示的很清楚，就是一份比较完整的圆形需求文档了，完成之后呢，你就可以直接分享给 u i 啊，研发啊，测试啊，他们看到 的内容呢，就是这样，他们也可以在任意位置进行评论， 然后呢，你就可以再根据他们的评论内容进行修改和完善。使用磨刀这种在线圆形工具的好处呢，就是无论你如何修改你的文档内容，分享给你的项目成员，他们打开之后看到的都是最新的内容， 这样就很好的避免了版本更替插错的情况。刚刚提到的方法呢，我已经分享给我身边很多产品小伙伴了，尤其适合刚入门的产品经理，能够很大程度上帮助大家规范日常需求文档的书写，快速平稳的度过新人阶段， 反馈都很不错，今天也分享给大家了，赶快去试试吧。另外，磨刀目前正在举办设计大赛，只要你有能用磨刀实现的想法都可以参赛，像 ppt 呀， 家居设计图啊，甚至是小游戏，感兴趣的同学可千万别错过这次机会，有很多奖品等着大家。好啦，这就是本期视频的全部内容，如果觉得对你有帮助的话，别忘了一键三连，我们下期视频再见吧，拜拜！
672斯前想后来
05:04查看AI文稿AI文稿今天做了一个投屏应用的手三个页面主页的功能，我们看一下，然后呢他，他就有个连接按钮，投屏按钮，然后呢这个文档和文档啊，投照片啊什么之类的， 投视频、投游戏等等，然后呢这里有个文档，看到这更多功能我们可以点击，更多的话我们可以点击试验，然后呢可以调整到内页，目前是没有做的。 然后呢像这个文档资料，然后呢我们直接把它做出来了，然后呢这图片，然后呢像自己大眼角，大眼角，然后呢这个有一个 整个页面背景有一个阴影效果啊，有一个阴影效果，是不是？然后阴影效果加了一个阴影效果，然后呢基本上就这样子，然后呢非常的方便快捷，然后你做出来的话 就已经有了。然后呢分类这里也是已经有了。分类这里这里已经也是已经有了。然后个人中心这里有了。然后呢前期设置这里我们直接把这里挑呃点击事件，然后配置上就可以了。然后呢配置上，然后呢首页 主页的这个东西我们在线预览一下， 在这一栏一下我们会看到他这个页面就是这样子的。然后呢这个图片图标，然后呢分类页，然后分类页也是这样的， 然后呢这个投屏首页也是一样的，就是说我们直接可以，嗯，然后呢我们可以看一下，查看野马， 查看原版以后，你看到没有？这个就是我们刚才看见的那个，嗯，灯个人中心的那个，那个页面，点击灯 我的管理，我的，然后呢在线客服帮助中心等等，都是非常快捷的方便的。然后呢我们直接可以可以直接导出野马，导出 uvip、 微信小程序、支付宝小程序等等。目前， 嗯，就是说我们做一个应用，做完应用以后，像这样上面没有这个连接头屏，我们直接可以在线查看严码，在线查看严码，这里都没有，这里有一个 可以看一下，这里有个投文档，投投投照片、投视频，是不是？然后呢就可以看到了？然后呢 看下这里，这里有个连接按钮嘛，对不对？连接按钮这里都都直接直接已经，这还有个图标嘛，对不对？这个图标也是会放在这里了，都是已经非常快捷方便的， 就写的，他其实都不是用写代码的，像这些图标什么之类的，是不是这样我们直接就自己改一下，我们就直接可以 可以改成其他图片了。嗯，然后这个这个东西是不是然后直接改成其他图片了？就是说我们然后改完了以后，我们一保存，然后一导出野马，或者是直接拆开查看野马，导出一次以后， 我们直接把这个野马，呃，直接复制到我们这个 hbue 的下面去啊，他就可以跑了。其实是这样的，其实因为我们目前我看一下，我们复制一下，然后复制一下这里跑一下。呃，因为我们现在图片我们没有进行一个导出嘛，对不对？我们可以把整个导出一下，导出野马 app， 对不对？我们就叫 app 找出原码，点击下载， 我们看一下，然后呢我们 处理完呀，稍微等一下，还有个下载过场，嗯，有了 app， 然后我们把这个重密密一下， 那我们再把它解压出来，解压出来以后我们的项目就在这里，看到没有？那这个项目就已经出来了，就是已经出来了，我们的野马都会到这里了，然后呢都是非常的快捷方便。然后呢不用你怎么去携带嘛？我们就直接这个界面就已经集成了， 非常的快捷，你只要可视画画完了以后，我们这界面代码都会帮你生成的，我们可以看一下这个代码生成的代码，呃，他的他的，他的代码的质量是如何的，看到没有？就是我们这上面的一个按钮，按钮的话他有一个，有一个 有个图标吗？对不对？然后一个按钮的文本他都会在这里，然后这里有一个宫格组件，然后呢这个图图片嘛，对不对？然后文档和文档图照片什么之类的，对不对？我们都是直接可以看到的，然后呢这里有个翻动片， 半张边也是这样的，然后后面有一个图片组件，也就直接图片组件出出来了。嗯，非常感谢大家啊，我们下节课我们现在在不断努力的做一些案例给大家，供大家参考，大家以后可以直接在我们的这里的案例，这里 案例重新就就能够找到，目前目前我们还在不断的完善这个案例。当然我们直接界面模板这里也很多很多，我们直接可以点击过来就已经可以使用的了，对不对？就已经可以使用了，欢迎大家使用。
12志丰全栈接单
23:21查看AI文稿AI文稿大家好，我是老旧的程序员，今天我们来搭建一个充电站小程序页面 右侧是从即时设计上找的 ui 设计，通过我们的平台不写重复的样式代码， 拖拽空间，填上颜色、尺寸等信息，生成一个页面代码下面伴着轻松愉快的音乐，一起来看搭建过程，心急的小伙伴可以跳过搭建过程，直接看搭建结果。 好了，到这里页面已经搭建完成了，然后保存页面，生成代码， 复制生成的代码到 h b odex 中预览小程序页面效果已经出来了，大家觉得效果怎么样？欢迎评论留言。
54老旧的程序员
