axure入门

文章目录

  • 一、线框图
    • 1.1 矩形的使用
  • 二、高保真图
    • 2.1 使用图标
      • 2.1.1 点赞功能
      • 方法一:在面板内设置交互
      • 方法二:在面板外设置交互
      • 2.1.2 按钮功能
    • 2.2 热区的使用
    • 2.3 动态面板
    • 2.4 原件的显示和隐藏
    • 2.5元件的交互样式
    • 2.6 web表单的设计
    • 2.7 表格
    • 2.8 嵌入视频/网页(内联框架)
    • 2.9 导航菜单和收起
    • 2.10 滚动评论与弹幕
  • 三、简易需求文档
  • 四、使用技巧
    • 4.1 使用母板
    • 4.2 选择不同的组合(概述)
    • 4.2 视图-->样式-交互-说明
    • 4.2 启用-禁用

一、线框图

1.1 矩形的使用

二、高保真图

2.1 使用图标

图标网站
axure入门_第1张图片
然后到Axure复制
axure入门_第2张图片

变化颜色
axure入门_第3张图片

2.1.1 点赞功能

axure入门_第4张图片

双击进入动态面板
axure入门_第5张图片
复制图像
axure入门_第6张图片
axure入门_第7张图片
切换图像,修改内容

axure入门_第8张图片
axure入门_第9张图片
axure入门_第10张图片

设置交互

方法一:在面板内设置交互

在这里插入图片描述

axure入门_第11张图片
选择状态为2
axure入门_第12张图片

进入动态面板,选择面板2,选择面板1
axure入门_第13张图片

方法二:在面板外设置交互

axure入门_第14张图片

2.1.2 按钮功能

启用情形:判断文字
单机->打开情形

axure入门_第15张图片

2.2 热区的使用

就是为了在上面添加一层,使得整个区域都作为一个事件(为了方便同事操作不同的矩形等,出现问题)
比如下面要同时为三个设置点击等效果,可以直接子啊上面添加一个热区

axure入门_第16张图片
热区的返回–》返回上一级
axure入门_第17张图片

2.3 动态面板

举例1:看点赞功能
axure入门_第18张图片
举例2:滚动功能

图片转化为动态面板–>选择区域大小(不要进入动态面板)

axure入门_第19张图片

axure入门_第20张图片

axure入门_第21张图片
切换,动态面板滑动
axure入门_第22张图片
轮播图

axure入门_第23张图片
拖动
动态面板->手势
axure入门_第24张图片

2.4 原件的显示和隐藏

设置向上滑动和灯箱效果

axure入门_第25张图片
或者向上滑动+热区+组合
axure入门_第26张图片

axure入门_第27张图片
axure入门_第28张图片

2.5元件的交互样式

鼠标悬停
axure入门_第29张图片
axure入门_第30张图片
按下-外部阴影调成0,内部调成默认
axure入门_第31张图片
选中
axure入门_第32张图片

axure入门_第33张图片
axure入门_第34张图片

axure入门_第35张图片

表格选中

首先全选中–>添加悬停-》按下-》选中

axure入门_第36张图片
每一行选择单击时
axure入门_第37张图片

2.6 web表单的设计

axure入门_第38张图片
单选项组
axure入门_第39张图片
选中样式-----线段样式
axure入门_第40张图片

文本提示

axure入门_第41张图片

输入提示-线段颜色
axure入门_第42张图片
axure入门_第43张图片
最好加个填充(20%透明)

2.7 表格

2.8 嵌入视频/网页(内联框架)

使用工具:内联框架
axure入门_第44张图片

axure入门_第45张图片
根据需求不同,如果是网页,就直接外部url

使用其他工具修改这个值就行了
axure入门_第46张图片
axure入门_第47张图片axure入门_第48张图片

2.9 导航菜单和收起

一级是按钮,二级是动态面板
axure入门_第49张图片

菜单选上,转化为动态面板

axure入门_第50张图片

axure入门_第51张图片
axure入门_第52张图片

2.10 滚动评论与弹幕

axure入门_第53张图片
动态面板是n个内容
axure入门_第54张图片
线性很平均
axure入门_第55张图片
横向
axure入门_第56张图片

三、简易需求文档

四、使用技巧

4.1 使用母板

一次调好,后面都能用的东西

4.2 选择不同的组合(概述)

axure入门_第57张图片

4.2 视图–>样式-交互-说明

web大小:1260*1024px

axure入门_第58张图片

4.2 启用-禁用

就是所有的事件,交互能不能用

你可能感兴趣的:(axure,photoshop,ui)