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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容