3.4.7 绘制“朋友”界面交互原型图

接下来绘制“朋友”界面交互原型图，“朋友”界面中包括“导航栏”“搜索”模块、视频播放模块等。

创建“朋友”界面画板

复制“喜欢”界面画板（Command+D），将新复制出来的画板重命名为“朋友”，并将“朋友”界面中的“非设计区域”图层组隐藏，仅留下“非设计区域”图层组、“导航栏”图层组、“搜索”元件，其他图层都删掉。

绘制视频播放模块

①绘制视频底层。创建圆角矩形，W（宽）为339，H（高）为186，色值为CADCF6，圆角半径为4。

②绘制文案介绍底层。创建两个圆角矩形，第一个圆角矩形的W（宽）为178、H（高）为10、色值为E5F0FF，第二个圆角矩形的W（宽）为98、H（高）为10、色值为E5F0FF。

③ 创建文案介绍文本，字体为PingFangSC，字号为16，色值为6493E8。

④通过Insert（添加）工具创建一个三角形，三角形创建好之后，通过旋转工具栏中的Rotate（旋转）按钮，将其旋转90°，并调整其宽为35、高为44、色值为87B2EC，并将图层重命名为“播放按钮”。

⑤ 将所有元素都绘制好之后，按下图位置摆放好。

⑥ 将前面创建的5个图层创建为“视频”元件。

⑦创建“头像底”图层。创建圆形，W（宽）为30，H（高）为30，色值为C9DBF7。

⑧ 创建“用户昵称”文本图层。字体为PingFangSC，字号为16，色值为6493E8。

⑨ 创建“文字介绍底”图层。创建圆角矩形， W（宽）为65，H（高）为10，色值为 E5F0FF。

⑩ 创建“文字介绍”文本图层。字体为PingFangSC，字号为14，色值为6493E8。

⑪ 将“按钮”元件复制3次，在右侧属性检查器的Overrides选项区域，从左至右分别修改文本为“留言”“点赞”“分享”。

⑫ 在“留言”和“点赞”按钮前面分别创建两个文本，用来填写留言和点赞的数量。

⑬ 绘制原创底层。创建圆角矩形，W（宽）为46，H（高）为24，色值为85B1EE，将图层命名为“原创标识”。

⑭ 创建原创文本，字体为PingFangSC，字号为14，色值为FFFFFF，将其放置在原创底层中间位置。

⑮ 将原创底层和原创文本都选中，并创建为“原创标识”元件。

⑯ 选中和用户视频模块相关的所有图层，单击Create Symbol（创建元件）按钮，将其创建为“朋友圈视频”元件。

⑰ “朋友圈视频”元件距顶边距离为136，距左边距离为18。

⑱ 将导航栏中的“喜欢”“朋友”两个文本的字体和颜色进行调换。

⑲ 复制“朋友圈视频”元件，放置在界面下方，并将图层中的“非设计区域”变成显示状态。