Axure自学笔记5 – 重要 – 动态面板

动态面板定义:

1. 一个用来存放多个原件容器

2. 其中包含多个状态,但同一时间只能显示一个

3. 状态之间可以通过交互动作控制切换和动画

创建动态面板:

1.【拖入】动态面板元件

2. 将元件【转换为】动态面板

制作1 :页面滑动 + Tab切换

第一种:转化为动态面板后,添加垂直滚动。

第二种:保留title,让下方滚动。(切割不需要滚动的部分,只对需要滚动的部分进行操作)

也可以简单实现切换效果:

制作2 :按钮效果

1.制作好第一个效果后,将其转换为动态面板。

2. 制作第二个状态。

3. 设置点击交互即可。

制作3 :轮播图Banner

Tips:

1. Axure10动态面板可查看所有状态,Axure9只可以一个个切换。

Axure自学笔记2 – 入门 – 高保真原型图

要素:静态(尺寸、色彩、贴图);动态(交互、演示)

小技巧:

1. 字体压缩可多个选中,点击右侧自动适合文本宽度

2. 一些小图标的网站:https://www.iconfont.cn/

3. 复制小图标SVG代码粘贴至Axure后,右击转换SVG图片为形状

4. PC直接截图 shift+win+S

5. 右击图形,变换形状->编辑点(或者直接选中后双击边框)

实践成果2个,左边为朋友圈原图,右边为Axure制作的高保真原型图

Axure自学笔记1 – 入门 – 制作线框图

产品原型图(prototype)的作用

1.产品研发前,用于描述产品设计的文档(UI样式、交互动作)

2.沟通需求的工具(客户、领导,研发团队)

以下先说明一下三种类型的原型图:

1.线框图

通过【线段+色块+文字】描述产品页面,制作快速传递信息容易遗漏

应用场景:早期方案的讨论,需要快速输出。

具体样例如下:

2.高保真图

高度还原产品运行效果,包括【设计+交互】的保真度,还原度高耗时长

应用场景:客户/大领导沟通,产品设计思路的完整展示,求职能力体现。

具体样例如下:

3.简易产品需求文档(PRD)

除了页面外,描述更多业务逻辑与辅助说明,指导产品研发。

具体样例如下:

实例:用Axure制作一个线框图(朋友圈)

小技巧:

1. 当找不到一样的颜色时,可以点击填充 ->滴管

2. 不同元件之间的位置比较,可以长按拖动标尺

3. 小图标按住shift可以等比例缩放(或直接改比例,锁定宽高比)

4. 同一行四个原件摆正可以使用水平分布

5. 图形右击可以选择具体形状(按住ctrl可旋转)

6. 矩形左上角的黄色箭头,按住拖动可以使尖角变圆角(右侧样式也可)

实践成果2个,左边为朋友圈原图,右边为Axure制作的线框图: