运动类app如何设计？（给大家一款运动类App的设计包含3个页面）

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

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

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

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

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

使用【横排文字工具】在画板中上部输入里程12.88，字体可以选择比较饱满一些的英文字体，例如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】组合键将其合并为一个形状图层，接着双击形状图层的缩览图，将颜色修改为【R:72，G:63，B:101】，这样看起来就更有道路的感觉。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

不见不散哦！

在【MICU设计】微信公众号中回复“PPT” 即可下载精选10000套PPT模板