点击此处返回

每日可免费学习1个教程

立即登录>

软件入门平面设计 3D数字 C4D教程 Blender教程短视频制作影视动画摄影艺术室内设计绘画插画海外教程电商教程产品精修办公职场编程开发考证·外语品牌设计综合教程 UI设计兴趣生活

详情图文教程训练营推荐

UI设计

UI-闹钟界面设计

1574人学过难度:初级练习软件:sketch

评论(12) 收藏课程已收藏下载视频

关注人数：231

虎课注册讲师，专注于UI设计。

UI-K歌类APP交互动效设计（下）

8136人已学

UI-K歌APP界面设计（中）

6727人已学

课程综合评分：9.9分

评论可是有底线的

本节教程练习

1. 本课主要内容如图示。

2. 【打开】Sketch软件，【新建】合适大小的画布。具体效果如图示。

3. 使用【矩形工具】绘制画布大小矩形，【填充】合适的渐变颜色。具体效果如图示。

4. 【拖入】导航栏至画布，放置合适的位置，按【Ctrl+L】打开标尺。具体效果如图示。

5. 使用【矩形工具】绘制矩形参考对象，放置合适的位置。根据矩形参考对象拖出参考线至合适的位置，【删除】矩形参考对象。使用【矩形工具】绘制菜单栏，【填充】合适的颜色，调整透明度，【拖入】菜单ICON素材，放置合适的位置。具体效果如图示。

6. 【拖入】时针参考图片，放置合适的位置。使用【椭圆工具】和【形状工具】根据参考图片绘制图案，【填充】对应的颜色，调整形状属性。具体效果如图示。

7. 【选择】关联图层，按【Ctrl+G】编组，【重命名】图组，调整图层顺序，调整椭圆颜色的细节。具体效果如图示。

8. 使用【钢笔工具】绘制形状对象，【选择】形状对象关联椭圆，【单击】剪去顶层多余的部分。【复制】顶圆图层样式，【粘贴】至关联对象，调整渐变颜色角度和透明度。具体效果如图示。

9. 使用相同的方法给剩余的圆添加相同的效果，使用【矩形工具】绘制矩形，调整圆角至合适的角度，单击【旋转复制工具】，具体参数如图示。

10. 单击中间点，按Shift键拖动至合适的大小。【选择】关联图层，按【Ctrl+G】编组，【重命名】图组。具体效果如图示。

11. 调整刻度矩形的位置细节，根据光影规律，按Alt键【复制】底部圆，调整图层顺序，【描边】1PX，【填充】无，调整描边至合适的颜色。具体效果如图示。

登录后学习完整图文教程

虎课APP离线下载免流量

70000+教程，每天免费学一课

一键打开