#交互# 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. 中间部分内容的白色圆角背景矩形添加阴影效果。完成~~