风流 少年
我走的很慢,但从不后退!
展开
-
Axure共享
一:共享Axure Share共享就是将原型文件发布到axshare.com中。首先要先注册账号,然后创建一个项目。axshare.com在国外访问速度慢,可以托管到中国的服务器上。共享是可以设置访问共享密码。发布后可以通过这里显示的地址来浏览。共享过一次后后面可以使用更新。二:AXURE原型托管 zptqhttps://www.zptq.com/ 单文件最大支持500M,总容量5G,多版本管理。新建项目。导入PR文件。三:Axhub(https://axhub原创 2021-09-20 21:01:14 · 2153 阅读 · 2 评论 -
Axure RP从入门到精通(五十一)案例 - 数字输入框
拖入一个矩形,W:40, H:40, 矩形内容为➖,设置字体颜色,R:153 G:153 B:153,设置矩形填充颜色:R:242 G: 242 B: 242,命名为”减号矩形“,并设置左边两个角为圆角。同理加号。拖入一个矩形,用来作为输入框的边框,矩形四角调为圆角,线段颜色:R:220 G:223 B: 230,将边框矩形放到加减矩形的正上方,并置于底部。在边框矩形中拖入一个文本框,取消边框(线段:None),排版:居中对齐, 输入一个默认值6,元件命名”数值输入框“。为加号添加单击事件.原创 2021-09-20 17:25:07 · 568 阅读 · 0 评论 -
Axure RP从入门到精通(五十一)案例 - 超链接
超链接非常容易制作,随便拉个”链接按钮“即可,但是如何实现鼠标悬停时鼠标又原来的箭头变为小手呢?拖入一个链接按钮,并修改文本为忘记密码,为忘记密码添加单击事件,注意只添加事件不加任何动作;右键”单击时“,添加情形时,添加完什么就不操作。预览。鼠标移入鼠标执行形状变为小手实现的原理就是为此添加一个单击事件,单击事件中不添加任何动作,为了让单击事件生效,只需要添加一个空的情形即可。类似于以下伪代码。<a onclick="forgetPassword()"> </a&g.原创 2021-09-08 17:00:12 · 503 阅读 · 0 评论 -
Axure RP从入门到精通(五十一)APP案例 - 底栏
拖一个矩形,填充色为浅灰色,W: 375 H: 49, 命名为底栏动态面板,并转为动态面板,并复制3份State1。去阿里矢量图中搜索ic_tabbar,找到四组底部状态栏选中和未选中的图标,并统一修改尺寸 25x25,并配备名字,将文字和图标设置成一个组合。注意图标要和文字居中对齐,没组图标之间要水平对齐(即中间间隔相等,选中所有图标点击水平对齐)分别将每一组状态栏放到不同的状态上。为动态面板中的每个状态中除了当前选项外的所有图标添加鼠标单击事件,切换为对应的状态。以S..原创 2021-09-05 13:23:09 · 205 阅读 · 0 评论 -
Axure RP从入门到精通(五十三)灵魂提问 - 画原型到底要不要加交互事件?
产品经理在画原型时要不要加交互事件,不同的人有不同的观点,而且在实际工作中也不统一。一:UI和UEUI设计师:用户界面设计(User Interface Designer),常用来指设计界面美观的工作。UE交互设计师:常用来设计人与软件之间的交互方式。一般只有大公司才会有该职位。二:低保真和高保真原型的保真度一般体现在:内容、交互、视觉三个维度上,高和低就是成果物的质量程度,也就是保真度。低保真:一般是不带交互动作和视觉设计元素所制作的原型,多用线框图呈现,受项目节奏限制,完成的质量也.原创 2021-08-29 17:23:09 · 649 阅读 · 0 评论 -
Axure RP从入门到精通(五十三) 灵魂提问 - 写PRD需求文档是使用Word文档还是Axure?
在实际工作中有些公司使用Word文档来写需求文档(一般是大公司),有些公司使用Axure来写需求文档,他们习惯在画原型的时候在旁边写需求,并用辅助线来连接需求说明和对应的功能(组件),那么我们应该如何选择使用方式???一:使用Word文档写需求文档的优劣势1.1 优势方便存档,方便交接和传播(传递);方便习惯使用Word文档的技术人员;方便发邮件做报告;还对于一些有较复杂流程,需要用到各种图示的产品项目,Word文档方便贴图。1.2 劣势原型和需求文档需要不断.原创 2021-08-28 15:44:18 · 492 阅读 · 0 评论 -
Axure RP 从入门到精通(五十五)案例 - 终极杀人王(执行javascript脚本)
一:执行一个简单的js脚本为按钮添加一个单击事件,链接到URL或文件路径,输入js脚本,脚本的第一行必须是javascript:。javascript:alert('js被执行了');注意:js中的注释不能使用//, 只能使用 /* */,最好不要加任何注释。二:引入视频控件拖入一个矩形,命名为”videoCode“,并将以下html代码粘贴到矩形。<iframe src="https://www.runoob.com/try/demo_source/movie.mp4"原创 2021-08-29 10:03:12 · 1188 阅读 · 0 评论 -
Axure RP从入门到精通(五十二) 自定义元件说明
在公司中常会看到原型图平铺的情况,即一个需求只有一个静态页面没有任何交互动作,这个需求中的其它子页面都放在这个页面上,然后通过一根线来连接页面流转,使用标记来来备注需求说明。这样在子页面少的情况下没什么问题,当需求复杂子页面多的时候那么整个页面的内容就会变的很多,看着可能让人心烦杂乱。当功能复杂,子页面较多的时候,我们可以为页面添加点击交互事件页面跳转,不平铺页面而是通过点击按钮来跳转页面,然后通过为元件添加说明来解释需求。一:说明字段设置(可选)选中页面 -> 说明 -> 设置 -&g原创 2021-08-28 20:44:09 · 416 阅读 · 0 评论 -
Axure RP从入门到精通(五十一)案例 - 验证码
验证码实现非常简单,只需要一个动态面板,添加几个状态,每个状态中放一张不同的图片,然后点击动态面板切换到下一个状态即可。拖拽一个动态面板,设置W:111,H:36。分别为State1、State2、State3 添加不同的图片验证码。3. 添加鼠标单击时交互事件。4. 预览...原创 2021-08-28 21:30:49 · 425 阅读 · 0 评论 -
Axure RP从入门到精通(五十一) 案例 - 左侧菜单栏导航
1 更改页面尺寸,将Auto改为Web,页面布局改为左侧对齐。页面尺寸和页面布局都会对元件的位置有影响。拖一个动态面板作为左侧菜单导航栏的整体容器,设置x:0, y:50(这里留出50是给顶部导航使用的)w: 210,双击动态面板进入State1设置填充颜色R: 48 G: 66 B: 86,动态面板只有一个状态State1。页面载入时设置尺寸,设置高度为:[[Window.height - 50]],至此左边导航栏的容器算是完成。双击导航栏容器进入State,拖拽一个矩形作为一级原创 2021-08-10 18:09:21 · 2314 阅读 · 0 评论 -
Axure RP从入门到精通(五十)案例(二级菜单)
制作一个二级菜单。为用户管理命名为一级菜单。选中所有矩形,统一为矩形设置选中的样式。将二级菜单转为动态面板,并命名为二级菜单。进入动态面板State1,选中所有矩形,设置选项组,设置的目的是二级菜单只能有一个被选中。设置二级菜单动态面板默认为隐藏。为一级菜单(用户管理)添加鼠标单击时事件,单击时设置选中状态并切换二级菜单的可见性。为每个二级菜单添加一个鼠标单击事件,单击时取消一级菜单的选中状态,设置当前二级菜单的状态为选中。这样一级菜单和二级菜单只能有一个可以选中。..原创 2020-06-22 17:45:17 · 2383 阅读 · 0 评论 -
Axure RP从入门到精通(四十九)案例 - 手风琴菜单
拖入一个矩形,设置文本为“菜单一”并命名为“菜单一”,拖入一个动态面板命名为“内容一”,放在矩形的整下方,填充动态面板状态的内容并默认设置为隐藏。复制菜单一矩形命名为菜单二并放在菜单一的正下方。在菜单二的正下方放置一个动态面板并命名“内容二”,填充一下State1的内容。复制菜单二矩形命名为“菜单三”放在菜单二的正下方。在菜单二的正下方再添加一个动态面板。为菜单一添加鼠标单击事件,让内容一切换隐藏性,隐藏其它(内容二和内容三)的动态面板。为菜单二添加鼠标单击事件,让内容二切换隐藏性,隐藏其它(.原创 2020-07-10 07:11:10 · 846 阅读 · 0 评论 -
Axure RP从入门到精通(四十八)案例(顶部导航栏)
拖拽一个矩形,设置填充为蓝色、无边框。将蓝色矩形转为动态面板并取消“自动调整为内容尺寸” ,进入State1,删除原来的蓝色矩形,并为State1设置同样蓝色的背景颜色。为动态面板设置100%宽度。往顶部导航栏左侧添加一个“Administrator”字样作为logo。在顶部导航栏的右侧放一个动态面板,State1中放一个头像和用户名,下面再放一个动态面板(下拉菜单)内容为设置和退出登录。下拉菜单默认隐藏。当鼠标移入头像时显示下拉菜单,当鼠标移出下拉菜单时隐藏下拉菜单。...原创 2020-06-28 21:42:24 · 1650 阅读 · 0 评论 -
Axure RP从入门到精通(四十七)案例(轮播图)
拖进一个动态面板并设置和图片一样的宽高,然后给元件起一个名字”动态面板“。点击➕然后增加多个状态或者选中State1来复制多个状态。状态数量和轮播图的数量一致。双击每一个状态为每一个状态设置图片,直接将图片拖进来即可,然后将图片拖进蓝色框内。点击页面空白处,然后添加”页面载入时“交互,让页面刚打开时就开始轮播图片。设置面板状态,向后循环,设置循环间隔时间为1秒。实现鼠标移入停止轮播。为动态面板添加”鼠标移入时“事件,让动态面板停止循环。实现鼠标移出继续循环轮播..原创 2020-06-15 22:19:56 · 892 阅读 · 0 评论 -
Axure RP从入门到精通 (四十六)案例 - 步骤
本案例是模仿CSDN提现步骤。完成的步骤圆形边框为绿色圆形内容为绿色对号,对号字体为Fontawesome完成步骤的后面的水平线为绿色,下一个步骤的圆形为黑色,后面的其它步骤均为浅灰色。拖入1个圆形,宽高为20、设置边框宽度、设置边框颜色为浅灰色。在灰色圆形下拖入一个文本标签,设置字体颜色为灰色,文本和圆形左右居中对齐。复制圆形和文本,先选中4个圆形进行水平分布,然后对每个步骤进行左右居中对齐使得文本和圆心对齐。分别为圆形填充数字,并拖入3条水平分割线,设置分割线线宽和颜色,并将分割线至于底部原创 2020-07-06 09:18:58 · 1087 阅读 · 0 评论 -
Axure RP从入门到精通(四十七)案例 - 百度地图
拖入一个内联框架,设置框架滚动条从不显示,隐藏边框,预览图片为地图。第一步:创建地图 地图生成器2.1 定位中心点,输入城市和地点。2.2 设置地图2.3 添加标注3. 第二步:获取代码在桌面新建一个baidumap.html文件,并将获取代码的代码粘贴到baidumap.html中。4. 申请秘钥完成百度地图开放平台开发者注册,进入邮箱激活账号。复制访问应用AK替换baidumap.html中的ak=后面的您的秘钥。双击内联框架链接到baidumap.htm..原创 2020-07-07 13:49:29 · 1865 阅读 · 2 评论 -
Axure RP从入门到精通(四十五)案例(App内容上下拖动)
制作基本的App页面,并在屏幕中间添加一个动态面板并命名为“屏幕”。双击动态面板进入状态1,制作首页内容,并将所有内容组合成一个整体。为动态面板增加鼠标拖动时事件,拖动时移动y轴的值。上述示例效果当移动到顶部还能移动,当移动到底部也还能移动,这是不行的,我们需要添加移动的边界,当顶部到头了就不能继续往上移动了,当底部到底不能继续向下移动了。如果顶部距离<=0就不再移动,如果底部距离>=432也不能再移动(0是动态面板的起始点,432是动态面板的高度)...原创 2020-06-20 19:37:42 · 1128 阅读 · 0 评论 -
Axure RP从入门到精通(四十四)案例(输入框关键词联想)
制作元件。一个输入框和一个中继器。设置中继器矩形只有底部边框可见。2. 中继器中插入数据。为输入框加入文本改变时事件。增加一个条件只有文本框中的有内容时才搜索。中继器默认刚开始需要隐藏。如果文本款中的文本没有内容则隐藏中继器。注意这次是新增加案例Case2 和 Case1 是else if 关系。修改案例1,如果文本内容不为空则显示中继器。...原创 2020-06-15 22:20:29 · 629 阅读 · 0 评论 -
Axure RP从入门到精通(四十三)案例(发送验证码)
制作登录页面,给发送验证码按钮命名“发送验证码”拖拽一个动态面板放在手机外边,再新建一个状态,总共两个状态而且两个状态不需要添加任何内容。设置动态面板轮询,两个空的状态不停循环。为动态面板添加“状态改变时”事件,当状态改变时修改“发送验证”为剩余多少秒。这里需要定义一个全局变量表示剩余的秒数,设置一个默认值60秒。为了演示这里设置75秒。当动态面板状态发生改变时需要将按钮的文本显示剩余多少秒,并且计算下一次全局变量的值。如果数秒等于0时就不能继续往下数了,所以数秒时要增加条件。如果全局变量.原创 2020-06-22 14:23:44 · 993 阅读 · 0 评论 -
Axure RP 从入门到精通(四十二)案例 - 淘宝搜索框
拖入矩形1,设置文本为宝贝,设置圆角半径为10,取消左下和右下方的圆角半径,设置字体为红色,取消矩形边框。设置选中样式字体颜色为白色、填充颜色为橘色。添加鼠标单击时事件,单击时标记当前元件为选中状态。复制矩形,修改文本为天猫和店铺。默认将宝贝设置为选中状态。选中所有矩形,设置选项组名称。选项卡效果如图拖入一个白色矩形,设置圆角半径,设置边框线宽。在矩形上拖入一个文本框,取消边框,设置提示文字。注意:提示文字中的放大镜是字体而不是图片。添加一个文本标签,并设置文本内容为相机。复制.原创 2020-07-04 10:03:53 · 1529 阅读 · 0 评论 -
Axure RP从入门到精通(四十一)案例 - 环形进度条
制作上半圆:拖一个矩形,转变形状将底部边框去掉,设置宽120高60,设置圆角半径和高度一样60,设置边框为最粗,设置边框颜色为绿色,命名为“上半圆”。在页面载入时或者元件载入时添加旋转事件, 相对位置、旋转180°、方向为顺时针、锚点为底部、旋转事件5000毫秒。3. 添加一个矩形1并命名为遮挡,宽度和高度和上半月的宽高完全一样,设置矩形无边框,无边矩形的坐标值和上半圆的坐标值完全一样,达到完全遮挡住上半圆的效果。添加完遮挡后再次预览,可以看到上半圆旋转看起来是慢慢旋转的效果,逐渐出现的效果。.原创 2020-07-05 09:42:00 · 943 阅读 · 0 评论 -
Axure RP从入门到精通(四十)案例(进度条)
进度条就是两个矩形,一个矩形作为进度条的底部,一个矩形作为进度条的轨道置于底层上面,然后不断的去增加上面矩形的宽度。拖入两个矩形,一个矩形填充为白色,另一个矩形填充为绿色,分别设置两个矩形为圆角,绿色矩形放入到白色矩形最左侧,置于白色矩形上方。设置一个表示当前进度条进度的全局变量(表示进度条的宽度)。为上传按钮增加鼠标单击事件。设置顶部矩形进度条的宽度为全局变量。修改全局变量的值。每次加一部分,这里进度条总长度300,分10次,每次增加30。设置等待时间也就是睡眠时间。意思是执行完上一个动作原创 2020-06-15 22:21:57 · 693 阅读 · 0 评论 -
Axure RP从入门到精通(三十九) 案例 - 进度条
拖拽一个灰色矩形作为进度条的轨道背景,并调整宽高。拖拽一个动态面板并设置尺寸和轨道的尺寸保持完全一致,设置填充色。调整动态面板的宽度为10,然后置于轨道的顶层。添加页面载入时事件5. 预览就可以看到初步的效果。6. 如何做到循环的改变进度条的尺寸宽度,页面载入时会触发设置尺寸的动作,如果我们在进度条上设置尺寸改变时事件去触发改变进度条宽度的动作就会达到循环的目的,当此次尺寸改变完后还会触发下次的尺寸改变事件。7. 预览,已经达到循环的改变进度条的宽度了,但是会超过进..原创 2021-03-08 10:13:13 · 480 阅读 · 0 评论 -
Axure RP从入门到精通(三十八)动画(推动和拉动元件)
推动元件将下方或者右方的元件给推开。拉动元件将上方或者左方的元件给拉过来。方式一:推动拉动动画制作两个表格,一个带表头,一个不带表头(其它数据),再拖拽一个链接按钮(命名为:显示更多)2. 将其它数据表格放在第一个带有表头的下方并设置底层和隐藏。3. 拖一个文本段落放在显示更多链接按钮的下方,用于表示表格下方是有其它别的内容的。4. 给显示更多按钮添加鼠标点击事件,点击时要显示其它数据表格()并且将显示更多链接按钮的文本改为“收起”。5. 效果,当点解显示更多其它数据表格会以动画的原创 2020-06-22 09:38:16 · 2787 阅读 · 0 评论 -
Axure RP从入门到精通(三十七)案例(卡片向不同方向旋转)
制作一个卡片并转为动态面板,命名为卡片,为State1命名为列表。制作State2内容,为State2命名为详情。在动态面板State1列表的左侧添加一个热区并新增一个鼠标单击事件。同理我们需要在动态面板列表页面的右侧、顶部、底部都放置一个热区并为热区添加单击事件。顶部:向上翻转底部:向下翻转以上示例是点击不同的边缘进入详情页,进入详情页还要重新出来到列表页,所以也要为详情页增加热区。不同的是此次翻转效果是相反的,点击上方要从下方翻转,点击左方要从右方翻转。示..原创 2020-06-25 09:02:39 · 817 阅读 · 0 评论 -
Axure RP从入门到精通(三十六)案例(文字跑马灯效果)
拖拽一个矩形命名为“LED显示屏”,并将矩形转为动态面板。在动态面板State1中拖拽一个文本标签并命名为“广告内容”。拖拽一个动态面板放在一边并命名为“轮询面板”,再新建一个状态,总共两个状态,两个状态都不需要填充内容,作为事件轮询的作用。页面载入时设置动态面板状态。这里每隔300毫秒空循环一次,两个空状态一直切换下去。动态面板状态切换时移动广告内容的横坐标。当广告内容第一轮循环结束后还要将广告内容重置到动态面板的最后面,也就是重新设置广告内容的横坐标。这里的临界横坐标是广告内容的宽度。这.原创 2020-06-23 15:33:49 · 1970 阅读 · 3 评论 -
Axure RP从入门到精通(三十五)案例(下拉菜单)
待完善。原创 2020-06-15 22:22:36 · 1101 阅读 · 0 评论 -
Axure RP从入门到精通(三十四)案例 - 自定义复选框
复选框其实就是一个矩形 + 文本标签。复选框选中其实是设置矩形的文本为对号。一:方式一为矩形添加一个单击事件,每次单击时都要判断矩形的文本是否为空,为空说明是未选中状态然后设置矩形文本为对号,如果不为空说明是选中状态设置矩形文本为空字符串。拖入一个矩形,并设置宽高各为15,设置内阴影有点立体感。添加鼠标单击事件,如果矩形文本为空没有内容时就设置矩形文本为✔️。继续为矩形添加鼠标单击事件Case2,矩形文本只有两种情况,一种是文本为空,一种是文本不为空,上面Case1已经判断过为空了,这个Ca.原创 2020-07-06 16:20:34 · 1413 阅读 · 0 评论 -
Axure RP从入门到精通(三十三)案例(滑块)
拖动一个矩形作为底部轨道:设置填充为浅灰色、无边框、圆角。复制浅灰色矩形修改填充色为绿色,然后放在底部轨道上。拖拽一个椭圆,设置边框和边框颜色,并放在绿色轨道右边。选中圆形和绿色轨道将之变为动态面板(因为只有动态面板才有拖动事件)。为动态面板增加拖动时事件,拖动时设置绿色轨道的宽度和圆形滑块的横坐标。6. 如果不给拖动加个条件限制可以一直向右移动。当绿色轨道的宽度小于总宽度时可以移动。当等于总宽度时让总宽度设置为总宽度少1这样可以继续向左移动。7. 示例效果...原创 2020-06-28 13:22:54 · 1234 阅读 · 0 评论 -
Axure RP从入门到精通(三十二)案例(开关)
拖一个动态面板并制作State1内容:拖一个矩形,设置圆角,设置无边框,填充色为绿色,并拖拽一个椭圆形。2. 复制State1,制作State2内容:填充色为白色,边框为灰色,设置边框。3. 在State1中为圆形添加鼠标单击事件,设置面板状态为State2。4. 在State2中为圆形添加鼠标单击事件,设置面板状态为State1。5. 示例效果。...原创 2020-06-28 09:15:43 · 556 阅读 · 0 评论 -
Axure RP从入门到精通(三十一)案例(按钮组、选项卡)
一:按钮组按钮组就是一组按钮只能选中其中一个。拖入三个普通按钮摆成一排。选中三个按钮同时为这三个按钮设置选中样式:选中时填充为蓝色、字体颜色为白色。默认第一个为选中状态。分别为三个按钮添加鼠标单击事件,鼠标单击时标记当前按钮为选中状态。同时选中这三个按钮右键“设置选项组”,随意起个名字比如按钮组。为了美观我们改变一下按钮的圆角,只要两边的按钮有圆角,其它都为直角。最终效果。二:选项卡在按钮组的基础上添加一个动态面板,再复制两个状态,分别填充每个状态的内容。分别为三个原创 2020-06-26 21:48:42 · 1464 阅读 · 0 评论 -
Axure RP从入门到精通(三十) 布尔运算符
布尔运算符用于情形判断中连接多个条件。原创 2021-03-07 20:00:54 · 674 阅读 · 0 评论 -
Axure RP从入门到精通(二十九) 函数 - 日期函数
原创 2021-03-07 19:48:32 · 1048 阅读 · 0 评论 -
Axure RP从入门到精通(二十八)函数 - 数学函数
原创 2021-03-07 19:35:58 · 537 阅读 · 0 评论 -
Axure RP从入门到精通(二十七) 函数 - 数字函数
原创 2021-03-07 16:14:45 · 400 阅读 · 0 评论 -
Axure RP从入门到精通(二十六)对象属性
一:元件属性scrollX、scrollY 用于动态面板。透明度是指的元件本身样式中的透明度,而不是填充色对应的透明度。一般对象名字都是首字母大写(如This、Target)。一般对象的属性都是小写字母开头(如text、name)。在插入变量或者函数时是不区分大小写的,但建议按照标准写。二:页面属性常用于面包屑导航。三:窗口属性...原创 2021-03-07 12:49:40 · 291 阅读 · 0 评论 -
Axure RP从入门到精通(二十五)自定义样式
1. 阴影当x、y的便宜量都为0时表示向四周偏移。原创 2020-07-04 08:18:49 · 514 阅读 · 0 评论 -
Axure RP从入门到精通(二十四)自定义元件库
待完善。原创 2020-06-15 22:23:06 · 1065 阅读 · 0 评论 -
Axure RP从入门到精通(二十三)第三方元件库
一:Font Awesome 5.7.2图标文字注意Font Awesome图标文字是属于字体而不是图片。下载Font Awesome 5.7.2 https://use.fontawesome.com/releases/v5.7.2/fontawesome-free-5.7.2-desktop.zip解压并双击otfs目录中的三个文件安装字体。退出并重新打开Axure RP,字体中就出现了刚才安装的字体。设置Web字体样式文件发布-> 生成HTML文件 -> Web字体。原创 2020-06-18 12:05:41 · 955 阅读 · 0 评论 -
Axure RP从入门到精通(二十二)使用SVG矢量图标
iconfont.cn 阿里巴巴矢量图表库https://www.iconfont.cn/ 该网站有很多常用的小图标,都是SVG图片,我们可以下载下来在Axure RP中使用。Axhub Icons 谷歌浏览器插件Axhub Icons插件是为了便于下载操作阿里巴巴矢量图表库的,只需要点击复制按钮就可以直接粘贴到Axure RP中。安装完Axhub插件后再刷新iconfont.cn可以看到图标下方最后一个是复制到Axure RP中,直接点击复制就可以粘贴到Axure RP中了注意:粘贴后的任然原创 2020-06-20 09:41:39 · 1696 阅读 · 0 评论