写在前面 强烈建议开始之前阅读以下第一篇高保真UI框架的前面部分,以了解设计思想,这篇文章不再重复介绍: AXURE-整套可复用的高保真元件和框架之暗黑风格 本次共享模板的UI规范 注:由于篇幅问题,截图中省略了部分规范内容(比如语义规范,内容显示规范,动效规范).后期会整理出一份完整的规范文档共享出来,敬请期待.   界面整体预览   注:本来做了一个界面操作演示,由于生成gif太大,有10M多,所以就不上传了,下面分别截图显示,具体动效可在元件文件里查看. 主要元件效果 主要元件包括:输

在上一篇文章中跟大家分享了Axure7.0 的简介.基本操作和原型图的制作,主要是应用元件库里的原件进行界面元素的搭建,直至完成原型图,在最后给大家展示了高保真原型图效果.而在本次分享中,主要带领大家来实现高保真原型图的制作过程,同时介绍一些其他工具的使用情况. 在讲解之前先跟大家回顾下交互设计,什么是交互设计? 交互设计是指设计人和产品或服务互动的一种机制,以用户体验为基础进行的人机交互设计,是要考虑用户的背景.使用经验以及在操作过程中的感受,从而设计符合最终用户的产品,使得最终用户在使用产品

解释: Axure 属于原型制作里的霸道总裁 1.原型:原型模拟真实产品的功能与设计.用于在初期阶段测试产品的可行性与效果.来节省开发成本与周期. 2.线框图:在初期实现对产品的了解.实现产品的基本结构.栏目.板块 3.低保真原型图:在初期基础上细化.实现元素细化.简单交互效果 4.交互说明/流程图:捋清楚交互元素之间的关系.产品的流程 5.高保真原型:接近产品的真实效果 Axure 的元件库 基本元件 表单元件 菜单和表格元件 标记元件 flow icon Axure 的元件交互样式设置 属性

  写在前面 在我们的开发团队里,一般在产品通过策划和需求评审后,在还没开始设计之前,产品经理和美工会一起定一套UI规范. 一方面用于规范整体界面,防止界面开发过程中出现UI不一致性的情况(有时候标准并不能涉及到每个细节,研发会偶尔跑偏). 另一方面用于后期其他项目的复用,也就是当有了其他项目的UI规范沉淀之后, 风格相似的项目,其实是不需要美工的,产品经理直接按照规范和项目沉淀下来的元件做出高保真,研发只要按照此规范来实现即可,可适当省去美工出图和原型标注部分的工作量. 团队的演变流程   任

(一)  Axure rp的界面 1-主菜单工具栏 大部分类似office软件,不做详细解释,鼠标移到按钮上都有对应的提示. 2-主操作界面 绘制产品原型的操作区域,所有的用到的元件都拖到该区域. 3-站点地图 所有页面文件都存放在这个位置,可以在这里增加.删除.修改.查看页面,也可以通过鼠标拖动调整页面顺序以及页面之间的关系. 4-axure元件库 或者叫axure组件库.axure部件库,所有软件自带的元件和加载的元件库都在这里,这里可以执行创建.加载.删除axure元件库的操作,也可以根据

Axure RP是一个专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototyping(快速原型)的缩写. Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格.设计功能和界面的专家能够快速创建应用软件或Web网站的线框图.流程图.原型和规格说明文档.作为专业的原型设计工具,它能快速.高效的创建原型,同时支持多人协作设计和版本控制管理 . Axure R

(三)Axure rp元件的触发事件 l  OnClick(点击时): 鼠标点击事件,除了动态面板的所有的其他元件的点击时触发.比如点击按钮. l  OnMouseEnter(鼠标移入时): 鼠标进入到某个元件范围时触发,比如当鼠标移到某张图片时显示该图片的介绍. l  OnMouseOut(鼠标移出时): 鼠标离开某个元件范围时触发.比如鼠标离开图片时,图片介绍消失. l  OnKeyUp(按键弹起时): 文本框(单行与多行)编辑时,键盘按下某一个按键松开时触发,不支持其他axure元件.比如

示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1.   点击按钮弹出带遮罩层的对话框: 2.   页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入编辑区2个矩形,并点右键—转换—转换为动态面板: 2. 双击其中一个动态面板设置标签为“遮罩层”(看个人喜好随便命名),并双击状态1进入编辑: 3. 点击状态1里面的矩形,设置大小与网站页面大小相同,以便完全遮盖:然后,设置矩形边框为“无”:最后设置填充色的透明度为50%(看个人喜好),并选择填充色

(三)Axure rp元件的触发事件 l  OnClick(点击时): 鼠标点击事件,除了动态面板的所有的其他元件的点击时触发.比如点击按钮. l  OnMouseEnter(鼠标移入时): 鼠标进入到某个元件范围时触发,比如当鼠标移到某张图片时显示该图片的介绍. l  OnMouseOut(鼠标移出时): 鼠标离开某个元件范围时触发.比如鼠标离开图片时,图片介绍消失. l  OnKeyUp(按键弹起时): 文本框(单行与多行)编辑时,键盘按下某一个按键松开时触发,不支持其他axure元件.比如

Axure 软件的需求史 功能:用来制作快速原型的软件.也可以绘制中保真原型草图. (适用人群:产品经理,交互设计师,UI设计师,网页设计师, 想要自己提升的人[重]) 原型分类: 低保真原型(草图) 中保真原型(适用相关的软件设计出来) 高保真原型(包括效果图及原型交互) 软件的基本操作     元件:                          元件的使用:在RP中使用元件需要选择后拖拽到工作区中使用即可. 矩形的适用: 它可以是任何几何图形. 注意:直接拖拽左上角更改圆角,直接拖拽右

把元件库文件放在我的文档里的 \Documents\Axure\元件库 就可以了,重新启动程序不会消失

axure是公司产品经理常用的软件,用来绘制产品原型图. 为了画出漂亮的原型图,需要各色各样的元件.因此导入各类元件库很有用处: 打开元件库视图: 载入元件库,选择事先下载好的元件 元件库下载:https://github.com/refscn/rplibs https://ant.design/index-cn https://library.ant.design/

本文核心内容点:- 啥是高保真原型?(附简单说明原型)- Axure可以画出什么水准的高保真?(给示例,开启装逼模式)- 高保真原型图技巧:- 啥时候上高保真?适用场景 and 不适用场景 啥是高保真原型 ? 啥是原型,从事互联网的同学,肯定非常熟悉,特别是产品岗同学.如果不是,那如下简单讲原型和高保真原型的: 原型:即产品草图.从产品流程来看,将想法形成草图原型,原型再有设计师形成效果图,程序猿们根据需求和效果图开发,出来的软件样子就是和效果图差不多.原型在过程中就是产品最终形态的骨架. 低/

我们曾经对axure线框图基本元件进行过说明,现结合这我对这些元件的使用习惯,对部分元件的使用,再做一些补充. 1. 图片:可以编辑悬停.按下时候显示不同的图片,做图片的一些特殊效果. 2. 文本(lable):这个元件到处都能用得到,这个元件是可以通过事件触发改变元件文字的,可以通过全局变量,实现如登陆前后不同的文字提示效果.对我来说这个元件还有一个用处就是除错,因为axure没有调试器,所以当因为变量值出现问题导致交互效果无法出现的时候,我通常会在调用变量时顺便加上一个动作,拖进去一个文本,

Axure 的发布与预览 1.发布 2.生成html文件 常规:指定浏览器.工具栏的生成 页面.页面说明.元件说明.交互.标志(logo和描述).字体.移动设备等 3.发布到Axshare Axure 的菜单和表格元件的使用 1.树状结构 2.表格 3.水平菜单 4.垂直菜单 学习结果 Axure 的流程图和连接点 学习结果 Axure 的标记元件 交互文档.页面结构说明文档使用比较多 页面快照如何使用.以及作用(参照物) 使用标记元件对页面进行标记 1.登录按钮 2.文本框 3.密码框 4.注

Axure RP 的每个元件都有着自己独有的和一些公共的触发事件,在不同的情况下触发不同的事件. 这里我们就以上图中文本输入框为例 A.改元件已使用的触发事件 [1].文字改变时:当一个元件内的文字改变时触发,比如搜索框,文本输入框. [2]获取焦点时:当一个元件通过点击或切换获取焦点时触发.比如搜索框编辑时,清空“请输入关键字”的提示. [3]失去焦点时:当一个组件失去焦点时触发.比如用户名.密码的验证. B.改元件未使用的触发事件 [1].鼠标单击事件:除了动态面板的所有的其他元件的点击时触

下拉列表的交互事件: 场景:当点击第一个下拉列表框的江苏时,第二个列表框会显示江苏省的城市:当点击第一个下拉列表框的北京时,第二个列表框会显示北京市的区 操作:把第二个列表框设置为动态面板,设置为两种状态(北京和江苏),然后在每种状态里面加入各自的区和城市,设置第一个列表框的“选项改变时”这个用例,设置用例动作即可,如下图所示 补充: 1.设置矩形的圆角 操作:添加完矩形之后,移动如图所示倒三角,就会相应的改变矩形的圆角的程度 2.自定义元件库 场景:当你设计完一个元件模型的时候,你需要把它单独

元件的移动主要是指当点击某一元件(登录)时,某些元件会发生移动或者是左右移动的动画效果,先将登录界面设置为动态面板,然后再设置动作 本节主要应用于一下三种场景: 1.当邮箱不为空.密码为空时,点击登录,登录界面会发生左右晃动: 2.当邮箱为空.密码不为空时,点击登录,登录界面会发生左右晃动: 3.当邮箱和密码均不为空时,点击登录,登录界面会发生左右晃动

元件库的创建 元件库的创建.载入.编辑和删除等操作 元件库的后缀名名:.rplib 学习结果: 实现iPhone6的原型图 分辨率是 1080*1920,现在我们按比例缩小去实现(360*640)

讲解如何控制光标的位置,主要学习了以下三种场景: 1.点击邮箱或者密码时,光标分别自动定位到email.password的文本框处: 2.还有将密码对应的文本框的内容设置为密码的格式(····) 3.如果邮箱和密码都没输入,当点击登录的时候光标会自动定位到邮箱的文本框中