UI-理财类APP界面设计

1.首先我们来分析这个理财APP的各个部分。

2.接下来我们来看一下竞品分析，对四款APP进行分析介绍。

3.接下来我们来看一下我们要制作的APP的功能结构思维导图。

4.接下来我们来看一下页面原型，分别是首页跟产品详情页，首页分为banner跟四个功能区，成交金额显示，理财产品推荐。

5.产品详情页分为收益率显示，融资进度条，向下是产品的详情介绍。

6.接下来我们看一下色彩搭配使用黑金配色。

7.我们使用【PS】新建画布尺寸为【宽750像素*高1334像素】绘制矩形【750*40】为上面状态栏高度拖入状态栏素材进行摆放。

8.然后绘制矩形【750*98】当做底部标签的高度，绘制直线填充浅灰色，将下面的矩形填充改为白色。

9.拉出一条中间居中参考线在两侧拉出20像素的边界线，绘制52*52的矩形，输入文字填充金色。

10.再复制一层到右侧进行填充灰色当作为选中选项，向左进行复制两个，将四个选项分别编组。

11.绘制矩形选框，选中四个组进行点击【水平等距分布】然后进行编组命名【标签栏】。

12.绘制矩形【750*374】这个是banner区域，绘制【60*60】的金色矩形输入文字填充【20％】黑。

13.接下来进行复制三层出来进行摆放，绘制矩形选框，选中四个组进行点击【水平等距分布】修改底部文字然后进行编组命名【功能区】。

14.接下来向下输入文案进行摆放到中间，数字吸取主色调，接下来绘制浅灰色条形。

15.接下来进行继续向下输入文字，绘制线条进行区分，接下来继续输入文案，数字使用【平方粗体】填充红色。

16.接下来继续输入文案，属于提示性的文字将颜色填充为浅灰色，绘制圆角矩形填充金色，输入文字当做投资按钮。