3.4.5 绘制首页交互稿

在首页（“发现音乐”页）交互稿中，要将产品要传达给用户的功能模块清晰地表现出来。处理非设计区域，首页主要分为3个大模块，分别为导航栏模块、内容区模块、音乐播放模块。

导航栏模块主要负责App中三个一级界面的跳转，跳转是通过点击3个跳转标签来完成的。这3个跳转标签分别是首页（“发现音乐”页）、“喜欢”页、“朋友”页。

内容区模块包含的内容比较多，如搜索位、Banner广告位、新歌推荐位、流行电台位、分类歌单位等。

播放模块是在点击一首歌曲之后，从底部弹出的播放条，播放条中的信息和当前播放的音乐相关。如果没有播放任何音乐，那么就即不会显示播放。

绘制导航栏

先绘制导航栏底部。创建矩形，将图层命名为“导航栏底”，坐标为（X：0，Y：44），尺寸为（W：375，H：44），色值为87B2EC。

开始创建跳转文字，单击Insert（添加）按钮，选择Text（文本）选项创建文本。

“发现音乐”页（首页）：

字体：PingFang SC（iOS官方默认字体），字号：18，色值：FFFFFF，位置：居中对齐。

“喜欢”页和“朋友”页：

字体：平方，字号：18，色值：C9DCF7。

利用测量工具选中“发现音乐”图层，按住Option键，将鼠标指针移动到“朋友”图层上，显示文本之间的间距，将它们的间距调整为32，以保证文字间距一致。

添加“设置”按钮。在交互稿阶段，不需要对icon做过于详细的设计，可以通过统一的icon底板配合文字，将icon简单地表示出来。此时，Sketch中的Create Symbol（创建元件）工具就派上了用场，极大地节省了交互设计的时间。

单击Insert（添加）按钮，创建一个尺寸为24x24、圆角半径为4的圆角正方形，色值为CADCF6，作为按钮的统一底板。

单击Insert（添加）按钮，创建一个文本“设置”，色值为4F81DC，字号为12，作为交互按钮的统一文字标准。

选中“按钮”和“设置”两个图层（按住键盘上的Shift键加选），再单击工具栏中的Create Symbol按钮，将它们设置为一个元件，并命名为“按钮”。

创建好元件后，可以在右侧的属性检查器中看到当前选中元件的基本样式及内部文本信息。前面提到过，元件内部的文本内容是可以通过Overrides修改的，无须反复制作元件。

使用测量边距的办法将“设置”按钮元件与“导航栏底”的距离调整为如下数值：与“导航栏底”的上边距为10、左边距为16、下边距为10（选中“设置”按钮元件后，按住Option键，可以观察它与底边的边距）。

复制“设置”按钮元件（快捷键Command+D），复制完成后，将复制的元件移动到如下图所示的位置，与“导航栏底”的上边距为10、右边距为16、下边距为10。

选中复制的“设置”按钮元件，在右侧的属性检查器的Overrides选项区域，将名称改为“添加”。

选中和导航栏相关的所有图层，将它们组成一个图层组（快捷键Command+G），并将图层组的名称改为“导航栏”。可以将之前做好的“非设计区域”图层组的眼睛图标打开，并将其移动到“导航栏”图层组的下方，方便观察。

绘制搜索栏

通过Insert（添加）工具，创建一个圆角矩形，具体设置：X轴坐标为7，Y轴坐标为93；宽为364，高为27；Radius（Round Corners）（圆角半径）为18；Fills（填充）颜色的色值为CADCF6；将图层命名为“搜索底”。

通过Insert（添加）工具，创建文本，将文本图层命名为“搜索”，字体为PingFang SC，字号为12，色值为4F81DC。设置完成之后，选中“搜索”“搜索底”两个图层，单击横向与纵向中心对齐按钮，保证文字在底栏的中心位置。

选中“搜索”“搜索底”两个图层，单击Create Symbol（创建元件）按钮，将和搜索相关的图层创建成一个“搜索”元件。

绘制Banner部分

绘制Banner底。通过Insert（添加）工具，创建一个矩形，具体设置：X轴坐标为0，Y轴坐标为123；W（宽）为375，H（高）为152；Fills（填充）颜色的色值为CADCF6；将图层命名为“Banner底”。

绘制Banner修饰部分（这部分属于修饰，可以省略）。通过Insert（添加）工具，创建两个圆角矩形，摆放在“Banner底”的中间位置即可，大小也可以随意，一长一短最好。Radius（Round Corners）（圆角半径）为7.5；Fills（填充）颜色的色值为FFFFFF；图层名称分别为“Banner修饰1”和“Banner修饰2”。

添加Banner文字（这一步要通过文字让大家知道这是Banner模块）。创建文本，将文本命名为“Banner”，字体为PingFang SC，字号为40，色值为6493E8，选中和Banner内容相关的4个图层，单击“纵向中心对齐”按钮，保证Banner的所有内容都与底层纵向中心对齐。

绘制Banner切换点。通过Insert（添加）工具，创建一个圆形，坐标随意，W（宽）和H（高）均为6，Fills（填充）颜色的色值为FFFFFF，将图层命名为“切换点”。

将“切换点”复制5次，每个“切换点”之间的间距为6，随意选择一个圆点作为选中点，将其色值改为6493E8。

制作“切换点”元件（切换点模块会在交互稿中频繁出现，所以需要制作成元件）。选中和“切换点”相关的6个图层，并单击Create Symbol（创建元件）按钮，将其创建成“切换点”元件。之后将其放置在“Banner底”的下方，选中“切换点”和“Banner底”两个图层，并单击“纵向中心对齐”按钮，保证“切换点”和“Banner底”居中对齐。

绘制“新歌推荐”交互模块

绘制内容区，再制作“新歌推荐”部分的交互。通过Insert（添加）工具，创建文本，将文本命名为“新歌推荐”，X轴坐标为18，Y轴坐标为285，字体为PingFang SC，字号为18，色值为6493E8。

绘制“新歌推荐”底层。通过Insert（添加）工具，创建一个圆角矩形，X轴坐标为18，Y轴坐标为296，W（宽）为90，H（高）为10，将Radius（Round Corners）（圆角半径）设置为最大，Fills（填充）颜色的色值为E5F0FF，将图层命名为“新歌推荐底层”。

制作大标题元件（大标题在交互区会频繁出现，所以需要制作成元件）。选中“新歌推荐”“新歌推荐底层”两个图层（如下图所示），单击Create Symbol（创建元件）按钮，将其制作成“大标题”元件。

双击“导航栏”图层组，将其中的“按钮”元件复制出来，并移动到“导航栏”图层组外，X轴坐标为333，Y轴坐标为285，在右侧属性检查器的Overrides选项区域，将名称改成“展开”。

绘制“歌曲底层”。通过Insert（添加）工具，创建一个圆角矩形，X轴坐标为18，Y轴坐标为316，W （宽）为120，H（高）为120，Radius（Round Corners）（圆角半径）为4，Fills（填充）颜色的色值为CADCF6，将图层名称改为“歌曲底层”。

绘制歌曲底层的修饰（图片符号）。通过Insert（添加）工具，创建一个圆形， W（宽）为8，H（高）为8；再创建两个三角形（一大一小），大三角形的W（宽）为32、H（高）为25，小三角形的W（宽）为20、H（高）为16；Fills（填充）颜色的色值均为白色FFFFFF（白色）。

添加歌曲及歌手信息。通过Insert（添加）工具，创建一个文本，将文本命名为“歌曲名字”，字体为PingFang SC，字号为14，色值为6493E8。再创建一个文本，将文本命名为“歌手”字体为PingFang SC，字号为12，色值为B4CFFF。选中“歌手”“歌曲名字”“歌曲底层”3个图层，单击“左对齐”按钮。

制作歌曲元件（歌曲在交互区会频繁出现，所以需要制作成元件）。选中和歌曲模块相关的图层（如下图所示），单击Create Symbol（创建元件）按钮，将其制作成“歌曲”元件。

将“歌曲”元件复制两次，并将它们横向分布，间距为14，在右侧属性检查器的Overrides选项区域，可以修改两个文本的名称，比如，将“歌曲名字”改成“七里香”，将“歌手”改成“周杰伦”。

选中和“新歌推荐”相关的图层（如右图所示），组成一个图层组，方便后续重复使用，并更改名称为“新歌推荐“。

绘制“流行电台”交互模块

绘制“流行电台”模块内容区。将图层组“新歌推荐”复制一次（Command+D），并将图层组名字改为“流行电台”，X轴坐标为18，Y轴坐标为513。

单击“流行电台”图层组，打开图层组，并选中“大标题”元件图层，在右侧属性检查器的Overrides选项区域，将界面中的“新歌推荐”文本修改为“流行电台”。

首先删掉“流行电台”图层组中的“歌曲”元件图层，再单击图层上方Page1的下拉按钮，在打开的下拉列表中选择Symbols（元件库）。进入元件库后，可以看到之前创建好的元件。

在元件库中绘制下图所示的和电台相关的元素：“电台底层”“名称底层”“电台名称”，再将“歌曲”元件中的大山符号复制到这里，并按照下图中的位置进行摆放，然后单击Create Symbol（创建元件）按钮，将其创建为“电台”元件。

将元件库中的元件添加到画板中。单击Insert（添加）按钮，选择Symbols>Document选项，即可显示刚刚绘制的“电台”元件。选择“电台”元件，将它放置在画板中。

将“电台”元件放入“流行电台”图层组中，X轴坐标为18，Y轴坐标为545，W（宽）为120，H（高）为120，在右侧的属性检查器中，在Overrides选项区域修改文本内容。摆放好之后，将其复制一份，之后进行水平移动，间距为14。

绘制“分类歌曲”交互模块

添加“分类歌单”模块区域。复制“新歌推荐”图层组（Command+D），并将其向下移动，与“流行电台”图层组的间距为20。

将刚复制出来的图层组重命名为“分类歌单”。打开“分类歌单”图层组，单击“大标题”元件，在右侧属性检查器的Overrides选项区域，将界面中的文本修改为“分类歌单”。

绘制播放器交互模块

单击通过Insert（添加）工具，创建一个矩形， X轴坐标为0，Y轴坐标为720，W（宽）为375，H（高）为58，Fills（填充）颜色的色值均为FFFFFF（白色），将图层重命名为“播放器底”。

绘制“正在播放底”，W（宽）和H（高）都为40，圆角半径为4，色值为CADCF6。它与“播放器底”的上边距为8、左边距为18。将“歌曲”元件中的大山符号复制到这里，并进行缩放。

将下图红框中的4个图层选中，并单击Create Symbol（创建元件）按钮，将其创建成“头像”元件。再将“歌曲”元件中的“歌曲名字”“歌手”文本复制到右图中的位置。

为了方便看清非设计区域，可以将“非设计区域”图层组提到最上层（选中该图层组，直接拖动即可调整图层位置）。

单击Insert（添加）按钮，创建一个矩形，W（宽）为375，H（高）为3，Fills（填充）颜色的色值均为DEDEDE（灰色），将图层重命名为“播放条底”。将它复制一层（快捷键Command+D），位置不变，将宽度改小即可，色值为87B2EC，将图层重命名为“播放条”。这两个矩形要与“播放器底”图层底边对齐。

复制两个“按钮”元件到下图所示的位置，在右侧属性检查器的Overrides选项区域，将左侧按钮的文本内容改为“播放”，将右侧按钮的文本内容改为“列表”。

将右图中的图层都选中，单击Create Symbol（创建元件）按钮，将其创建为“播放器”元件。这里要注意的是，“播放器”属于含有文本比较多的元件，在右侧属性检查器的Overrides选项区域，可以依次修改文本内容。

“播放器”与画板底边间距一定要等于或大于34，因为这里使用的机型为iPhone X，所以下边有高为34的非设计区域，不能进行任何设计，仅可以平铺颜色。

整理非设计区域

将上、下两个非设计区域分别改成和“导航栏底”和“播放器底”相同的颜色。

在“非设计区域”图层组中添加系统模块，固定的系统模块因为和iPhone X手机一样，所以大家不需要自己制作，使用本书提供的文件即可。

展开“非设计区域”图层组，将系统模块中的iPhone X Frame、Status bar两个图层复制进来，并将它们放置在画板中，X和Y坐标均为0。

用同样的方法，将Home Indicator也复制进来，X和Y坐标均为778。

至此，发现音乐App首页的交互原型图就制作完成了。