axure怎么用手机边框
使用 action 制作一个手机模型框架，在产品工作中，利用手机模型做圆形设计时，更容易掌握产品交互和需求理解。 首先打开 action 软件，在页面栏点击添加页面新建四个页面，我们把配级一重命名为 app 模型框架。 在画布中拖入矩形框原件，设置矩形框的高度和宽度分别为三百八十四、七百六十一，根据实际需求进行调整尺寸，选择矩形框左上角的到三角，拖动倒角为二十二，设置线段为二线段，颜色为黑色。 拖动复制矩形框，调整新的矩形框适当尺寸。选择两个矩形框上下居中 对齐。设置新的矩形框，线段为一线段，颜色为灰色，填充颜色为白色，也可以设置透明度。 拖入内帘框架，放置到画布。设置内帘框架尺寸为三百六十 七百三十二、设置内连框架，从不滚动并隐藏边框。选择矩形框和内连框架，上下居中对齐。 现在我们看到内连框架四个角会露出在外面，我们要对四个角进行隐藏，并做成有弧度衔接到矩形。我们选择开始创建的矩形并进行复制。对顶部的矩形调整到适合的尺寸， 并对复制的两个矩形进行布尔运算，去除调整去除后的新元件到适合的位置并填充颜色为黑色，线段为零。 选择原件，复制一个新原件并移入到底部。旋转原件为一百八十度。调整到底部适当位置，手机的大概轮廓就做好了。现在我们来做顶部电池条区域。选择矩形原件，拖入画布， 调整高度和宽度到适当的尺寸，拖入文本标签到顶部适当位置，我们输入时间点文本 复制我们提前准备好的电池和信号，移动到适当位置，拖入圆形原件到 划不调整圆形的尺寸， 填充颜色为黑色，线段颜色为灰色，并复制出两个圆形，选择三个圆形进行组合并调整电池条里面原件，在适当的位置 选择电池条，矩形框设置线段为零，填充颜色为透明，选择弧形原件置顶。 点击右上角预览按钮，我们查看画好的手机模型效果，手机模型的就画好了， 在日常工作中都会在圆形上做交互设计，也可节省开发人员理解需求时间。我们选择画布中的内连框，记住尺寸，选择页面一， 拖入矩形框，设置的尺寸和内连框尺寸一致，框高分别为三百六十七百二十三，并把矩形入到顶部和左边，我们对页面做个标记，为页面一 并全选复杂页面内容，选择页面二，粘贴原件。为了区分页面内容，我们设置颜色为蓝色， 选择页面三，用同样的方法区分页面，页面四也是一样的，选择 app 模型框架页面 选择右边交互，点击添加交互为页面载入时框架中打开链接，选中内帘框架，选择页面为页面一，点击 确定。现在我们再次点击右上角预览按钮，我们查看到手机模型页面已经载入了页面一的内容，为了在手机模型上直接查看页面的交互，我们把提前准备好的页面内容粘贴到页面一，页面二、页面三、页面四中 返回到 app 模型框架页面全选所有原件，调整好手机模型到适当的位置， 我们把页面的内容转换为动态面板，后期再使用就比较方便。现在我们再次点击右上角预览按钮，此时我们看到页面上的交互信息是在手机模型框架内，分别点击底部导航菜单，就可以看到我们想要的页面效果。 本节课讲解的内容覆盖了前期的基础课程，原件的使用和原件的样式，你学会了吗？
粉丝335获赞2004
相关视频
03:55
12:43
03:02查看AI文稿AI文稿大家好，这节课我们来讲解一下文本框的相关实战交互。 那文本框常用的一个就是边框的变色，当我鼠标移入的时候，他会进行变色，当我鼠标输入的时候 获取焦点他也有一个颜色的变化，那除了边框的变色，我们的文本框还支持输入内容的时候会显示一个清除图标，那我单击清除图标的时候，他会把内容清除掉。还有另外一种场景，就是当我 单击一个按钮或者加载一个页面的时候，我们需要让某个文本框获取焦点，所以我们这时候就需要有一个获取焦点 的一个交互动作，那我们的文本框清除内容放在我们的 cc top 教程，需要的同学可以私信我。好的，接下来我们就来讲解一下如何去实现我们的文本变宽变色。 那这节课主要涉及到的知识点跟交互事件还有交互动作是没有关系的，主要就是给我们的文本框去添加一个交互样式， 主要是添加鼠标闲停以及获取焦点的样式。那接下来就教大家如何去画这样的一个文本框。首先拉入一个文本框，我们设置一下它的尺寸，调下字体大小， 然后我们可以给他个眼角，然后里面给他个编剧，左右的编剧 还需要这边有个提示文本，给个请输入， 这样话我们就有一个提示语。设置完以后，接下来就是我们说要鼠标移入的时候有个颜色， 然后获取焦点的时候也需要有个边框式，所以我们这边有个添加焦样式效果，我们选择鼠标悬停时，然后这里有个更多样式，点击一下， 那我们这时候就找到我们的线条的颜色，也就是我们的边框的颜色，每个颜色维持，然后还有一个获取焦点 也是一样的，选个蓝色确定确定，这时候我们再预览一下，我们就可以发现我鼠标一入的时候，他的边框颜色会变为蓝色，再放大一点， 那当我输入获取焦点的时候，他的边框也会变为颜色，我鼠标一到外面，他边框蓝色还依然显示。好的，那这节我们就分享到这里，谢谢大家。
03:07查看AI文稿AI文稿你想知道如何把这些设计图标不经过开发就嵌入到你的手机屏幕中呢？接下来给大家讲一下如何操作。首先呢，我们准备打开这个 x r p 这个软件， x p 里边呢，随意拖一张图，我已经放好了，然后点击发布菜单，这里边有一个生成 ht m 二文件， 选择移动设备，这里边把它点上，这个也可以不点，我们只欠图标的话，这些东西可以不操作，只选择这一块 主屏幕图标选择导入，注意你要准备一张启动图标之前设计好的尺寸是幺幺四乘幺幺四的 扩展名是拼这个式的图片，我们导入随便选一个，然后点这个，这就 ok 了。回到常规里边，我们创建一个文件夹，我们创建桌面起成叫这个 html， 这个名字可以任意去起。好，我们把生成的东西发布到那里面，生成， 生成之后呢，回到咱们这个文件夹当中啊，这里边呢就会 有我们刚才生成的那些所有的文件。接下来如何操作呢？我们还要借助一个客户端配置成服务器的一个软件啊。呃，这个呢， window 版也有叉 ampp 把它装， 安装过程我就不给大家讲了啊。做完之后呢，首先要启动阿帕奇服，这颜色变绿了，就说明启动成功了，福气。启动之后呢，我们访问他对应的文件夹， 这个软件把刚才我们发布好的所有文件复制粘贴到 htdocs 文件夹当中。 好，接下来进行重要的操作，我们再打开手机，通过手机的浏览器访问我们电脑的文件啊， 看一下我们电脑的 ip 网络编号， 在手机浏览器当中输入我们电脑的 ip 地址，幺九二点幺六八点三点三幺点四四， 幺九二点幺六八点三幺点四四。好，这样呢就进入到咱们这个文件夹当中啊，接下来呢我们点哪一个呢？点这个音响， 这里边就看到了我们刚才导入进来的这个启动图标，往下滑选择添加到主屏幕，好，起上你这个应用的名字， 点添加，这样呢就保存到了咱们这个手机的主屏幕当中。
106北京第嘉学社
01:30查看AI文稿AI文稿如何给视频添加手机边框？如何给视频添加如图所示的手机边框呢？方法很简单，跟我学起来吧！ 打开剪映点，开始创作，导入录好的视频，把视频缩小一点。 点击贴纸，搜索手机，选择一款你喜欢的边框。我这边已经收藏了一款，选择它 贴纸的长度拉到和视频一样长，放大贴纸到合适的大小。我们看到视频的四个角露出来了， 怎么办呢？点击视频，点击蒙版，选择矩形蒙版，调整蒙版大小， 左上角有一个三星图标，往外拉，可以调整四角的弧度，调整好后，把视频移动到合适的位置， 这样一个带着手机边框的视频就做好了。
113肥君吖
01:52查看AI文稿AI文稿大家好，我是程姐姐，每天分享一个视频制作小技巧，今天我们学习给视频添加手机边框，打开剪映 app， 点开始创作， 导入一段视频，添加视频添加进来以后，点亮视频双指，在预览区将视频稍微的缩小一些， 然后点击返回，在工具栏找到背景，点击背景画布样式，在画布样式中选择一个自己喜欢的样式， 做好以后打对勾，然后点击返回，在工具栏找到贴纸，点击贴纸，点击搜索栏，在搜索栏中输入手机搜索，里面就会出现很多手机贴纸， 我们找到一个自己喜欢的贴纸，我就用这个吧，然后点击关闭打对勾，在预览区按住贴纸边框右下角的小方块，放大贴纸， 将贴纸进度条拉长，和视频同样长，然后点亮住视频，在工具栏找到蒙板，点击蒙板，选择矩形蒙板，拉到蒙板的上下，左右箭头调整蒙板的大小， 再拉一下左上角的圆角边，做好以后打对勾，这样就给视频添加上手机边框了，我们看一下效果， 今天的分享就到这里，我是程姐姐，每天分享一个视频制作小技巧，喜欢我视频的朋友记得点赞收藏加关注哦！
173橙姐姐
01:39121i 人也不会拍照📷
