Sketch-资讯类社交APP界面设计

1.本节课为大家带来社交APP页面的设计，具体内容【如图所示】。

2.打开【Sketch】，这是我们要设计的一个原型稿，【如图所示】。

3.【A】新建画板，【R】矩形工具，画矩形，关闭描边， 从标尺拉出参考线，【Ctrl+D】再复制一个出来，同样拉出参考线，【如图所示】。

4.在画板下方用【矩形工具】画矩形，拉出参考线，在矩形内部再画一个矩形，在画板两边画出矩形，同样拉出参考线【如图所示】。

5.导入预设好顶部状态栏，【矩形工具】画矩形，导入预设图片，同时选中矩形和图片，【右键】选择蒙版【如图所示】。

6.【矩形工具】画一个与图片大小相同的矩形，关闭描边，填充为黑色，调整不透明度，【如图所示】。

7.【T】文字工具，打字，【Ctrl+D】复制，【矩形工具】画矩形，【T】打字，调整位置和大小【如图所示】。

8.【矩形工具】画矩形，【T】文字工具打字，导入图标素材【如图所示】。

9.【矩形工具】画矩形，【T】文字工具打字，【Ctrl+D】复制文字，按住【Shift】直接拖拽，【矩形工具】画几个小矩形，填充颜色，增加阴影，【T】输入文字信息，【如图所示】。

10.按住【Shift】直接点击矩形可以进行拖拽，【T】文字工具打字，【O】椭圆工具画圆，使用插件自动复制图片，【如图所示】。

11.【T】文字工具打字，【O】椭圆工具画三个圆，选中三个圆然后点击【合并形状】，【拼合】，调整位置，【T】文字工具打字，【R】矩形工具画矩形，再次利用插件导入图片【如图所示】。

12.【矩形工具】画矩形，修改圆角，【T】文字工具打字【如图所示】。