本文作者将教您如何使用axure8.0制作电子相册原型，享受〜

电子相册，主要用于个人空间相册，在圆形转盘中显示照片。主要通过将当前照片放在照片的顶部和底部来显示，然后其他照片更小且模糊。当用户点击下一个时，照片可以循环旋转。目前，似乎没有人在互联网上看过这个电子相册的原型。在这里，我将教你如何使用axure8.0制作电子相册原型。以下是渲染：

第一步：拖放相关控件

1,5张照片：这5张照片被命名为“图片1”，“图片2”，“图片3”，“图片4”和“图片5”，大小分别为240X320,222X296,204X272,204X272和222X296 ，不透明度分别为100％，60％，20％，20％和60％，等级为“1”和“1”，“1”，“2”，“3”，“3”和“3”; < ;;图片5>>&ndquo;&ndquo;图片4&rd ;,从左到右的5张照片的中心点相隔100度，并且每张照片的初始状态被设置为禁用。

2,1个矩形：白色黑框，169X45，名为“ldquo; next”。

第2步：向页面添加页面加载大小写

为页面加载添加5个全局变量并设置初始值，picture1=0，picture2=1，picture3=1，picture4=0，picture5=0。

第3步：添加鼠标点击“下一步””用例

一个鼠标点击使用用例，当鼠标点击“下一步”时触发5张照片。

第4步：将案例用于< ;;图片1”〜“图片5”添加鼠标点击

“图片1”单击鼠标时有5个用例，设置如下：

用例1

条件：如果当前组件宽度为204，则全局变量picture1为1;

动作1：相对运动“图片1”，x轴为-400，y轴为0，动画为线性，时间为500毫秒;

操作2：将全局变量picture1设置为0.

用例2

条件：如果当前组件宽度为204，则全局变量picture1为0;

动作1：相对运动“图片1”，x轴为100，y轴为0，动画为线性，时间为500毫秒;

动作2：设置图像的大小1” [当前组件宽度+18]，高度为[当前组件高度+24]，锚点居中，动画为线性，线性度为500毫秒;

操作3：将图片的不透明度设置为< ;;图1“至60％，动画为线性，线性为500毫秒。

用例3

条件：如果当前组件宽度为222，则全局变量picture1为0;

动作1：相对运动“图片1”，x轴为100，y轴为0，动画为线性，时间为500毫秒;

动作2：设置图像的大小1” [当前组件宽度+18]，高度为[当前组件高度+24]，锚点居中，动画为线性，线性度为500毫秒;

行动3：放置“图片1”在顶部;

操作4：将图片的不透明度设置为< ;;图1“为100％，动画为线性，线性为500毫秒。

用例4

条件：如果当前组件宽度为240，则全局变量picture1为0;

动作1：相对运动“图片1”，x轴为100，y轴为0，动画为线性，时间为500毫秒;

动作2：设置图像的大小1” [当前组件宽度-18]，高度为[当前组件高度-24]，锚点居中，动画为线性，线性度为500毫秒;

措施3：设置图像的不透明度&图像1“ 60％，动画是线性的，线性度是500毫秒;

操作4：将全局变量picture1设置为1.

用例5

条件：其他

动作1：相对运动“图片1”，x轴为100，y轴为0，动画为线性，时间为500毫秒;

动作2：设置图像的大小1” [当前组件宽度-18]，高度为[当前组件高度-24]，锚点居中，动画为线性，线性度为500毫秒;

操作3：设置图像的不透明度1”到20％，动画为线性，线性为500毫秒;

这里只教您如何设置“图片1”使用鼠标点击的情况下，其他四张照片的交互设置是相似的，但有些参数不同，请查看原型rp文件的设置。

设置5张照片的互动后，点击预览，然后选择“下一步”。看相册的旋转木马效果。

« 用户体验需要良好的内容 | 讲一个好故事，优秀的用户体验设计开始 »