axure入门
  LisBlKScaTwd 2023年11月02日 111 0



文章目录

  • 一、线框图
  • 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入门_ui


然后到Axure复制

axure入门_photoshop_02

变化颜色

axure入门_axure_03

2.1.1 点赞功能

axure入门_axure_04

双击进入动态面板

axure入门_axure_05


复制图像

axure入门_动态面板_06


axure入门_动态面板_07


切换图像,修改内容

axure入门_动态面板_08


axure入门_动态面板_09


axure入门_动态面板_10

设置交互

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

axure入门_ui_11

axure入门_动态面板_12


选择状态为2

axure入门_动态面板_13

进入动态面板,选择面板2,选择面板1

axure入门_单选_14

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

axure入门_axure_15

2.1.2 按钮功能

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

axure入门_单选_16

2.2 热区的使用

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

axure入门_photoshop_17


热区的返回–》返回上一级

axure入门_axure_18

2.3 动态面板

举例1:看点赞功能

axure入门_动态面板_19


举例2:滚动功能

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

axure入门_axure_20

axure入门_photoshop_21

axure入门_axure_22


切换,动态面板滑动

axure入门_ui_23


轮播图

axure入门_ui_24


拖动

动态面板->手势

axure入门_动态面板_25

2.4 原件的显示和隐藏

设置向上滑动和灯箱效果

axure入门_ui_26


或者向上滑动+热区+组合

axure入门_axure_27

axure入门_动态面板_28


axure入门_ui_29

2.5元件的交互样式

鼠标悬停

axure入门_动态面板_30


axure入门_动态面板_31


按下-外部阴影调成0,内部调成默认

axure入门_axure_32


选中

axure入门_单选_33

axure入门_photoshop_34


axure入门_单选_35

axure入门_ui_36

表格选中

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

axure入门_axure_37


每一行选择单击时

axure入门_photoshop_38

2.6 web表单的设计

axure入门_动态面板_39


单选项组

axure入门_axure_40


选中样式-----线段样式

axure入门_动态面板_41

文本提示

axure入门_photoshop_42

输入提示-线段颜色

axure入门_photoshop_43


axure入门_动态面板_44


最好加个填充(20%透明)

2.7 表格

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

使用工具:内联框架

axure入门_ui_45

axure入门_单选_46


根据需求不同,如果是网页,就直接外部url使用其他工具修改这个值就行了

axure入门_photoshop_47


axure入门_axure_48

axure入门_ui_49

2.9 导航菜单和收起

一级是按钮,二级是动态面板

axure入门_单选_50

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

axure入门_axure_51

axure入门_单选_52


axure入门_axure_53

2.10 滚动评论与弹幕

axure入门_动态面板_54


动态面板是n个内容

axure入门_单选_55


线性很平均

axure入门_ui_56


横向

axure入门_photoshop_57

三、简易需求文档

四、使用技巧

4.1 使用母板

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

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

axure入门_动态面板_58

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

web大小:1260*1024px

axure入门_photoshop_59

4.2 启用-禁用

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


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
LisBlKScaTwd