3.4.6 绘制“喜欢”界面交互原型图

通过首页的绘制，大家应该对交互设计有些感觉了，接下来绘制“喜欢”界面交互原型图。在“喜欢”界面中，有“用户展示”模块、“搜索”模块、“歌单”展示模块、“我的喜欢”歌曲列表等。

创建“喜欢”界面画板

首先复制“首页”画板（选中图层列表中的“首页”并按快捷键 Command+D），将画板名字改为“喜欢”。接着将“非设计区域”图层组隐藏，方便快速选择下面的图层。删掉“新歌推荐”“流行电台”“分类歌单”3个图层组。

绘制“用户展示”模块

这里无须重新设置，修改“Banner”元件即可。首先要将“Banner”元件进行分离，用鼠标右键单击图层中的“Banner”元件，在弹出的快捷菜单中，选择“Detach from Symbol”命令，元件即变成了图层组的状态，将图层组名称改为“用户展示”。

将“用户展示”部分和“Banner”模块进行区分，将“Banner”文本改为“用户昵称”，并添加“签名”等文本，将文本按右图所示放置在底板的左下角，单击Create Symbol（创建元件）按钮，将其创建为“用户展示”元件。在右侧属性检查器的Overrides选项区域，可以进行文本内容的修改。

调整“导航栏”状态

展开“导航栏”图层组，更换“喜欢”和“发现音乐”两个文本的颜色。

绘制“歌单”元件

首先，绘制圆角矩形作为歌单底层，W（宽）和H（高）均为160，色值为 CADCF6，圆角半径为4；其次，在“歌曲”元件中复制出大山造型，再绘制圆角矩形作为歌单名字底层，W（宽）为90，H（高）为10，色值为E5F0FF，将圆角半径调成最大；再次，创建一个“歌单名字”文本，字体为PingFangSC，字号为18，色值为6493E8。注意：创建的这些元素要纵向中心对齐。

绘制好后，单击Create Symbol（创建元件）按钮将其创建为“歌单”元件。在右侧属性检查器的Overrides选项区域，可以进行文本内容的修改，比如“嘻哈音乐”等。“歌单”元件距画布左边距离为18，距离“用户展示”元件的距离也为18。

复制“歌单”元件，并将复制的元件移动到右侧。

绘制“我的喜欢”歌曲列表

制作“我的喜欢”歌曲列表。在Insert（添加）下拉列表中，选择“Document”中的“大标题”元件，将其放置在画布中，W（宽）为18，H（高）为475，在右侧属性检查器的Overrides选项区域，将文本内容修改成 “我的喜欢”。

打开Symbols（元件库），将“播放器”元件进行复制，重命名为“歌曲列表”，并将其中一个“按钮”元件，以及“播放条”“播放条底”删掉。

选中“歌曲列表”元件图层，将元件高度改为72，将“播放条底”图层重命名为“歌曲列表底”。

将元素都进行横向中心对齐，将“歌曲列表底”的高度改为72。

回到Page1中，单击Insert（添加）按钮，选择“Document”中的“歌曲列表”元件，将其放置在画布中，W（宽）为0，H（高）为500，在右侧属性检查器的Overrides选项区域，可以修改“歌手”“歌曲名字”的文本内容。

“喜欢”界面整理

删掉“播放器”元件。注意，当用户播放歌曲的时候，在界面下方会出现播放器，这里要做出没有播放的效果，所以先将播放器删掉。复制多个“歌曲列表”元件，间距为0，将“非设计区域”图层组的眼睛图标打开，显示“非设计区域”。