今天米醋带给大家一款运动类App的设计，包含3个页面，分别是运动页面、地图页面和个人页面。

在设计上，用放射构图来设计运动页面，用倒三角形构图来设计地图页面，用三角形构图来设计个人页面；在配色方面，主要用到了紫色和黄色来进行互补搭配。

01用放射构图设计运动页面

首先制作背景。启动PhotoshopCC 2017，按Ctrl+N组合键新建一个文件，将文档类型设置为画板，将画板大小设置为iPhone6（750，1334）。

将图层更名为紫色渐变背景，按Alt+Delete组合键用任意一种颜色填充该图层，然后双击图层缩览图，打开图层样式对话框，为图层添加一个渐变叠加样式，设置一个深蓝色到蓝色的渐变色，并将角度调整为120°。

使用横排文字工具在画板中上部输入里程1288，字体可以选择比较饱满一些的英文字体，例如Bebas Neue，文字大小可以设置在160点左右。

下面制作反射图形。按住Shift键使用椭圆工具在里程外面绘制一个圆形，在选项栏中关闭填充功能，同时将描边宽度设置为14像素。

执行图层图层样式渐变叠加菜单命令，为圆形添加一个渐变叠加样式，然后设置一个黄色-桃红色-紫色的渐变色，接着设置角度为-57°。

使用钢笔工具在圆环上单击鼠标左键，添加一个锚点，然后使用直接选择工具调整锚点的位置，以改变圆形的形状。

采用相同的方法继续添加锚点，并调整锚点位置，完成对放射形状的调整。

按Ctrl+J组合键复制一个放射形状，然后按Ctrl+T组合键进入自由变换模式，按住Shift+Alt组合键将图形等比例缩放。

继续复制两个放射形状，然后等比例缩放其大小，完成后的效果。

将复制的3个放射形状的描边宽度全部修改为1像素，然后将第2个放射形状的不透明度修改为60、第3个修改为40、第4个修改为20。

使用横排文字工具在里程的下面输入文字总里程（KM），可以选择苹方字体，大小可以设置为28点。

下面制作辅助数据。辅助数据主要是总时间和总步数，数据字体选用Bebas Neue，中文选用苹方字体，同时添加上时钟和脚步的图标，完成后的效果。

时钟和脚步图标的制作方法很简单，在这里就不再详细讲解了，大家可以观看视频进行参考。

下面制作头像。按住Shift键使用椭圆工具在画板的左上角绘制一个大小合适的圆形（关闭描边功能），然后将头像拖入画板中，并调整好头像的大小。

按Ctrl+G组合键将头像设置为圆形的剪贴蒙版。

下面制作地图图标。按住Shift键使用椭圆工具在画板的右上角绘制一个大小合适的圆形，关闭填充功能，将描边色设置为白色，同时将描边宽度设置为3像素。

使用转换点工具单击圆形底部的锚点，将其转换为角点，然后使用直接选择工具将角点向下拖动，制作出一个大头针的形状。

选择钢笔工具，然后设置绘制方式为新建图层，这样在绘制形状的时候会在一个新图层中进行绘制，接着绘制出形状（同样将描边宽度设置为3像素）。

下面制作开始按钮。按住Shift键使用椭圆工具在画板的底部中间绘制一个大小合适的圆形（关闭描边功能）。

执行图层图层样式渐变叠加菜单命令，为圆形添加一个渐变叠加样式，然后设置一个黄色到橘黄色的渐变色（与放射形状的渐变色形成对比色），接着设置样式为角度、角度为90°；在图层样式对话框左侧勾选投影样式，然后设置不透明度为30、角度为90°、距离为6像素、大小为19像素。

最后加入手机状态栏上的一些图标，例如手机信号、Wifi信号、时间、电池等，然后输入步行文字信息，完成运动页面的设计。

02用倒三角形构图设计地图页面

下面先复制画板。在工具箱中选择画板工具，然后按住Alt键单击画板右侧的图标，在画板右侧复制一个画板，同时将画板名称修改为地图模式。

删除地图模式画板中不需要保留的内容，只留下背景、开始按钮、头像和手机状态栏，同时将步行文字修改为地图，将脚步图标放在地图图标的位置。

下面制作地图形状。地图的形状看似比较复杂，其实制作起来很简单，主要是比较耗费时间。使用钢笔工具勾画出一条条细细的封闭形状作为道路（这些形状只需要填充颜色，不需要描边），然后多勾画一些形状，让其看起来既有主道又有辅道的感觉，形成一个道路网。

选中所有的形状图层，然后按Ctrl+E组合键将其合并为一个形状图层，接着双击形状图层的缩览图，将颜色修改为R72，G63，B101，这样看起来就更有道路的感觉。

下面制作运动轨迹。使用钢笔工具沿着道路勾画一条形状，并关闭填充功能，然后将描边的宽度修改为20像素。

在选项栏中将描边的对齐修改为居中、端点和角点都修改为圆形，这样可以让轨迹线看起来更自然平滑一些。

执行图层图层样式渐变叠加菜单命令，为轨迹线添加一个渐变叠加样式，然后设置一个紫色到桃红色的渐变色，接着勾选反向选项，同时设置角度为90°。

现在来看一下整体效果。现在的道路网看起来比较杂乱，可以为道路形状图层添加一个图层蒙版，然后使用黑色柔边画笔工具在蒙版中涂去多余的部分，让道路网的视觉重心更加明确一些，完成后的效果。

下面制作起点和定位点图标。这两个图标都用大头针来表示，制作方法可参考上一个页面中地图图标的制作方法，其中蓝色渐变大头针表示起点，黄色渐变大头针表示定位点。

在黄色大头针的内部还有一个人物跑步的图标，这里仔细讲解一下该图标的制作方法。先按住Shift键使用椭圆工具绘制一个大小合适的圆形作为人物的头部，将填充色设置为白色，并关闭描边功能。

使用钢笔工具绘制一条波浪线作为运动人物的手部，关闭填充功能，用白色进行描边，并设置描边宽度为6像素，设置完成后按小键盘上的Enter键确认操作，然后用相同的方法勾画出左腿、右腿和腹部。

选择直接选择工具，然后选择除了头部以外的所有人物形状图层，接着在选项栏中设置描边的对齐方式为居中、端点和角点均为圆形，最后使用直接选择工具调整好每条形状的锚点位置。

继续在画板中添加地图页面的辅助数据。这些辅助数据与下面的开始按钮会形成一个倒三角形的构图。在辅助数据中，稍微难一些的就是3个图标的制作方法。

03三角形构图设计个人页面

下面先复制画板。与地图页面一样，个人页面也可以直接进行复制，然后删除多余的内容，保留背景、手机状态栏（在下面将页面顶部换成白色以后，手机状态栏的颜色就需要换成白色和头像即可。

下面制作页面的构图。先隐藏头像，使用椭圆工具绘制一个比较大的白色椭圆（关闭描边），放在背景的上面。

将头像显示出来，放在白色椭圆的上部，然后隐藏头像，只显示圆形，按Ctrl+T组合键进入自由变换状态，在选项栏中的WH（设置水平垂直缩放比例）输入框中单击鼠标右键，在弹出的菜单中选择像素命令，将单位切换为像素，接着将水平和垂直的数值修改为180像素，这样就得到了一个180像素×180像素的圆形。

显示出头像，按Ctrl+T组合键进入自由变换状态，然后按住Shift+Alt组合键将头像等比例缩放到合适的大小，接着使用横排文字工具输入人物的个人信息，完成后的效果。

到此为止，构图完成，从头像往下直到白色椭圆与背景衔接的区域就形成了一个三角形的构图。

将开始按钮和运动人物图标复制到个人页面中，然后调整好两个对象的大小和位置，接着将开始按钮的渐变样式修改为线性、角度修改为-74°。

下面制作数据线。使用钢笔工具在画板底部绘制出数据线，关闭填充功能，并开启将描边功能，将描边的宽度修改为8像素。

在运动页面中选中放射形状的图层，在图层名称上单击鼠标右键，然后在弹出的菜单中选择拷贝图层样式命令，接着在曲线图层的名称上单击鼠标右键，在弹出的菜单中选择粘贴图层样式命令。

最后将渐变的角度修改为0°，效果如图。

继续完善数据线的信息，输入相关的文字内容，完成个人页面的设计，最终效果。

好啦！今天就分享到这里！

明天米醋将跟大家继续分享，

不见不散哦！

在MICU设计公众号中回复PPT 即可下载精选10000套PPT模板