学会UI设计-指示器实操

1.打开sketch，新建文档，按住【a】新建画布，选择【插入】-【ios用户界面设计】-【bars】-【status】-【black】生成黑色状态栏，【顶部居中】，按住【r】绘制矩形36×44，拉出参考线，添加【文字】新闻，【大小】17，【居中对齐】，具体效果如图所示。

2.在页面底部，选择【插入】-【ios用户界面设计】-【bars】-【tab bar】-【3 ltems】生成状态栏，【底部对齐】，右键选择图层，选择【从组件分离】，选择底部背景图层，【填充】白色，具体效果如图所示。

3.选择星星图层，使用【矩形】绘制图标边框，保证绘制的图标大小视觉统一，关闭【描边】，按住【u】绘制新闻稿图标，【半径】3，按住【u】矩形内部绘制出横线，，将三条横线【编组】，【居中】，按住【command】选中文在，修改文字为【新闻】，字符【间距】0，修改颜色，删除底部星星，具体效果如图所示。

4.将矩形图层移动到第二个图标上方，按住【o】绘制视频图标，在圆内绘制圆角矩形，【旋转】45°，双击圆角矩形，删除【锚点】，调整位置大小，【居中对齐】，修改文字【视频】，调整颜色，具体效果如图所示。

5.将矩形图层移动到第三个图标上方，按住【o】绘制我的图标，在圆的下方按住【u】绘制圆角矩形，【command+b】复制圆，缩小，按住【v】使用【钢笔工具】在圆上增加两个【锚点】，使用【剪刀】删除其他【锚点】，关闭【填充】，描边【端点】变成圆，删除底部矩形，修改文字【我的】，调整颜色，具体效果如图所示。

6.打开ps，新建画布50×50，新建50×50的圆，【水平居中】，【垂直居中】，关闭【填充】，打开【描边】，方式改为【角度】，吸取sketch新闻稿颜色，修改颜色，具体效果如图所示。