Axure学习笔记：APP Store推荐截图

#交互#   Axure

---

今天的练习界面是从APP Store推荐中截图获取的~~

里面出现的图标、图画暂时先用占位符代替

---

效果如下：

---

流程如下：

1. 绘制一个750*1334，带边框，填充#ffffff的矩形。

绘制一个670*1232，带边框，15px圆角，填充#1cb0f9的矩形。

2. 绘制右上角删除按钮。55*55，50%透明度，填充#000000的圆形。

3. 删除按钮的“X”，绘制5*30，圆角5px，填充#ffffff的圆角矩形，旋转45°。copy圆角矩形旋转-45°。

两个圆角矩形上下居中、左右居中。置于按钮居中位置。

----

添加标题栏的返回按钮、标题。

使用占位符代替居中的图片。

4. 绘制492*511，圆角15px，边框#3696CD，填充#ffffff，圆角矩形。

5. 绘制字体大小30px，字体颜色#999999的标题

6. 绘制标题下方的字体、按钮

7. 添加大小30px，颜色#696969的文字

8. 绘制390*90，圆角45px，填充#1cb0f9，按钮字体大小30px，字体颜色#ffffff的圆角矩形按钮

9. 绘制底部广告栏，广告栏背景是带有磨砂效果的半透明圆角矩形。在Axure中似乎没有这种效果，于是只是设置了90%的不透明度。

绘制719*140，圆角15px，填充#f2f2f2圆角矩形。

10. 添加图标、字体

使用占位符代替app logo icon

11. 绘制右侧的下载按钮。

绘制145*60，圆角30px，渐变填充的圆角矩形。

按钮上半部分填充#004d89，下半部分填充#3f6284，渐变角度90°。

按钮字体大小30px，字体颜色#ffffff。

12. 添加下载按钮下方的文字描述

13. 中间部分内容的白色圆角背景矩形添加阴影效果。完成~~