Axure9.0预览界面坐标系和编辑界面不一致，如何解决？

来源：蜘蛛抓取(WebSpider) 时间：2022-07-22 10:00 标签： python网页版编辑器

调查显示，产品新人每天 1/3 以上的时间都在和原型打交道。

一份专业的标准原型，可以帮助产品新人在职场生涯的刚开始，给周围人建立专业的好印象。

不专业的原型，会留下坏的印象

标准的低保真原型，给职业生涯一个好的开始

但！如果你想更快进阶到高级产品经理，除了能用 Axure 画出标准低保真原型，还应该尽快做到下面这两点：

进阶第 1 步：清晰的页面逻辑和备注

原型图漂亮、尺寸规范只是基本功，如果你想进阶，更需要在原型上清晰呈现页面逻辑、原型里清晰的备注、异常状态的表述等等

进阶第 2 步：用原型体现产品流程

原型的作用不仅仅是快速传递需求，表达想法，更是为了验证用户使用流程、产品逻辑是否完善，操作体验、是否符合预期等。

如果你想更快进阶高级产品经理，这个点也是一定要做到的。

产品新人的你，想尽快做出标准低保真、写出规范原型注释、用 Axure 体现产品流程？却遇到下面这些问题：

自学 Axure，耗时多却无法做出规范原型；

最近需要面试产品经理，想为面试加 buff；

已经做产品经理，原型不美观，画图效率低；

更高阶的 Axure 功能掌握不足，无法做出高保真；

原型注释写不好，没有专业度，被开发怼

推荐起点学院 & 腾讯课堂联合打造的

给产品经理的 Axure 实战课程

已有 4000 多位同学学习，学习效果显著

Axure 零基础也能学，学完画出规范原型

产品交互贯穿全程，学完告别画图经理

1、4000 多位同学高度认可的实用 Axure 训练营

从完全的 axure 小白，到应用到实际工作中。从产品小白，到产品设计思维，都有了长足的进步

2、5 次强实操训练，0 基础也能快速达到高级产品经理的 Axure 水准

重视培养新人的产品意识和习惯，画原型图的第一步不是直接上手，而是梳理功能流程。因此你将先梳理功能流程，再开始画线框图

接着，你将做出好看美观的标准低保真原型

第 4 次实操时，你将写出专业、规范的原型注释

最后，你将作出带有交互的高保真原型

扫上方二维码立即咨询↑↑↑

新一期 1 月 31 日（周四）开课

现在报名，可学到所有录播内容

本期课程可以学到最新 Axure9.0

3、课程系统，一次 get 初中高阶操作，还有产品思维

除此，还有 6 次直播课学习，交互和产品思维贯穿整个课程。让你在学会 axure 的同时，培养对产品的理解，对交互的感觉。

4、附赠 57 份原型资料：常见动效、组件库、进阶操作等

5、2 位导师全程带班辅导，随时解决你的学习问题

本期课程可以学到最新 Axure9.0

作者利用Axure动态面板功能对网易云音乐的搜索界面、歌手分类界面以及歌曲播放界面进行了一个简单的原型设计，与大家分享。

在歌曲播放界面，我们实现了唱片的旋转，带时间的进度条，对喜欢的音乐进行标记等基础效果。下面我们先来浏览一下总体的实现效果：

发现界面、搜索界面、歌手分类界面以及歌曲播放界面交互效果：

在对已有的产品进行原型设计时，最重要的就是要熟练使用产品，了解每一个部分的交互效果，必要时我们可以采用脑图将每个界面的功能及交互效果记录下来~

通过我们对网易云音乐发现界面的观察我们发现搜索框中带有一个类似于放大镜的标志，带有搜索图案的搜索框制作过程如下：

（1）拖入宽为305，高为33的矩阵，同时设置其圆角直径为20，如下图所示

（2）在矩形中添加“放大镜”图片，以及文本框，设置文本框为无边框且宽度小于33，同时在文本框中添加提示文字：

（3）最后一步只要在矩形中添加热区，对热区设置单击时交互效果就可以啦~

若有搜索历史的话，我们默认将搜索历史显示出来；若需要对搜索历史进行删除的话，我们要有弹窗对用户的行为进行确认，以防止用户只是误点了删除按钮：

首先设置一个黑色透明遮罩层以及提示框，将其隐藏；在我们单击清除历史记录按钮后将其显示出来。

若单击提示框的取消按钮，则将黑色透明遮罩层以及提示框隐藏起来；

若单击提示框的确认按钮，在将黑色透明遮罩层以及提示框隐藏起来的同时，我们需要将历史记录及下边的标签隐藏起来，同时将热搜榜向上移动。

在使用网易云音乐歌手分类界面时我们发现，进入页面时默认显示歌手分类标签及热门歌手；当滑动热门歌手名单列表时，歌手标签会自动隐藏起来，我们单击筛选时又会自动显示歌手标签，下面我们来看一下这个功能的实现过程：

（1）首先，热门歌手列表我们采用两个动态面板的组合，之前的推文已经介绍过具体的实现过程；

（2）当滑动热门歌手列表时，我们将歌手分类标签隐藏起来，同时将动态面板向上移动，“全部歌手”以及“筛选”标签显示出来。

这里我们设置两个用例，一个为拖动时，一个为拖动结束时：

（3）同理，当我们单击筛选时，我们需要隐藏必要的标签以及将动态面板根据固定坐标下移。

通过对网易云音乐歌曲播放界面使用后，我们选取部分功能进行设计，即播放暂停音乐、对唱片封面进行旋转、圆形动态效果、时间进度条、标记喜爱的音乐以及弹出分享窗口。

单击音乐播放按钮时，显示暂停按钮；同时唱片封面进行选择，围绕着唱片封面的原型呈现动态效果，时间增加以及进度条向前移动，针对以上我们设置如下用例：

1. 单击播放按钮时相关用例

将播放按钮隐藏起来，显示暂停按钮并置于顶层；唱片封面以每100ms旋转1°的速度；进度条标识以每1000ms的速度移动1；设置唱片封面周围的动态圈为动态面板，在每个状态中放入圆心相同、半径不同的空心圆，将其设置为向后循环效果；

为使单击暂停按钮时，唱片封面停止旋转以及动态圆圈停止动态变化，同时为保持旋转等变化的一致性，我们对唱片封面图片设置旋转时的用例如下，需要注意的是，此时我们需要添加判断条件，即当暂停部件可见时才会执行以下操作，暂停图标隐藏时动作随即停止：

为使时间随着进度条标识的移动进行符合实际的变化，我们首先设置全局变量t，默认值为1000：

接下来，我们对进度条标识设置移动时的部分用例如下：

同上一步中为使单击暂停按钮时，进度条标识停止移动、时间停止变化，我们添加判断条件，即当暂停部件可见时才会执行以下操作，暂停图标隐藏时动作随即停止。同时我们根据以下条件对全局变量t进行设置，更新时间文本：

当我们单击喜欢时，即可收藏喜爱的音乐，同时弹出提示框，两秒后提示框自动消失。这时我们在设置用例时只需添加等待事件即可。

这一部分比较简单，只是涉及到了分享窗口的显示与隐藏。

这样看下来是不是制作一个原型非常的简单呢。

欢迎大家与我交流，共同进步~

个人公众号：产品小新学乐园

Axure RP Pro 是一个产品经理***的交互原型设计工具，能够***制作产品原型，快速绘制线框图、流程图、网站架构图、示意图、HTML 模版等。

欢迎来电咨询优惠价格！

上海铭嘉科技--中国正版软件代理经销

上海铭嘉信息科技有限公司是上海一家***正版软件销售与服务供应商。公司承销各种软件产品，覆盖计算机应用的各个领域，满足了不同层次、不同性质、不同单位和个人的多种需求。公司以“专注软件，用心服务”为核心价值.我们相信，通过我们的不断努力和追求，一定能够实现与中小企业的互利共赢！ 作为上海的软件销售与服务平台，我们拥有完善的营销服务体系和***化技术服务团队，致力于软件产品销售与服务，可以根据顾客的需求做出迅速的反应，为顾客提供丰富的产品信息和***技术服务支持。我们还与多家大型系统集成商建立了良好的合作，力求从满足需求的角度出发，为***、企事业、教育等行业提供操作系统、办公软件、防毒软件、财务管理软件以及针对性的软件应用解决方案。

有限责任公司(自然人独资)
上海市普陀区曹杨路1017号1幢三楼3284室
计算机软硬件专业领域内的技术开发、技术咨询、技术转让、技术服务，销售计算机软硬件（除计算机信息系统安全专用产品）。 【依法须经批准的项目，经相关部门批准后方可开展经营活动】

我要回帖

更多关于 python网页版编辑器 的文章

 

随机推荐