0

点赞

收藏

分享

雷柏mv20鼠标使用体验

外贸达人小峻先森 2023-09-30 阅读 152

标签: axure photoshop ui

文章目录

一、线框图
- 1.1 矩形的使用
二、高保真图
三、简易需求文档
四、使用技巧

一、线框图

1.1 矩形的使用

二、高保真图

2.1 使用图标

图标网站
在这里插入图片描述
然后到Axure复制

变化颜色
在这里插入图片描述

2.1.1 点赞功能

在这里插入图片描述

双击进入动态面板
在这里插入图片描述
复制图像

切换图像，修改内容

在这里插入图片描述

设置交互

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

在这里插入图片描述

在这里插入图片描述
选择状态为2

进入动态面板，选择面板2，选择面板1
在这里插入图片描述

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

在这里插入图片描述

2.1.2 按钮功能

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

在这里插入图片描述

2.2 热区的使用

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

在这里插入图片描述
热区的返回–》返回上一级

2.3 动态面板

举例1：看点赞功能
在这里插入图片描述
举例2：滚动功能

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
切换，动态面板滑动

轮播图

在这里插入图片描述
拖动
动态面板->手势

2.4 原件的显示和隐藏

设置向上滑动和灯箱效果

在这里插入图片描述
或者向上滑动+热区+组合

在这里插入图片描述

2.5元件的交互样式

鼠标悬停
在这里插入图片描述

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

选中

在这里插入图片描述

在这里插入图片描述

表格选中

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

在这里插入图片描述
每一行选择单击时

2.6 web表单的设计

在这里插入图片描述
单选项组

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

文本提示

在这里插入图片描述

输入提示-线段颜色
在这里插入图片描述

最好加个填充（20%透明）

2.7 表格

2.8 嵌入视频/网页（内联框架）

使用工具：内联框架
在这里插入图片描述

在这里插入图片描述
根据需求不同，如果是网页，就直接外部url

使用其他工具修改这个值就行了
在这里插入图片描述

2.9 导航菜单和收起

一级是按钮，二级是动态面板
在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

2.10 滚动评论与弹幕

在这里插入图片描述
动态面板是n个内容

线性很平均

横向

三、简易需求文档

四、使用技巧

4.1 使用母板

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

4.2 选择不同的组合（概述）

在这里插入图片描述

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

web大小：1260*1024px

在这里插入图片描述

4.2 启用-禁用

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

0 条评论

外贸达人小峻先森

关注