点击此处返回

每日可免费学习1个教程

立即登录>

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

详情图文教程训练营推荐

UI设计

UI-租房类APP界面设计

1645人学过难度:初级练习软件:Sketch

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

关注人数：694

现任集团高级交互设计师，从事云计算、云安全及大数据产品设计。擅长APP UI、用户体验设计及用户研究

如何设计好产品充值页（下）

3226人已学

如何设计好产品充值页（上）

7588人已学

课程综合评分：9.5分

评论可是有底线的

本节教程练习

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

2. 【打开】Sketch软件，按A键新建【画布】，【选择】Iphone X界面。具体效果如图示。

3. 按R键呼出矩形对象，高度44PX，拖出参考线至对应的位置。按【Ctrl+D】复制矩形，调整矩形大小，拖动至合适的位置，使用相同的方法，拖出参考线至合适的位置。具体效果如图示。

4. 使用【矩形工具】绘制34PX高的矩形，放置底部，拖出参考线至底部合适的位置。使用【矩形工具】绘制134*5PX圆角矩形，移动至合适的位置。具体效果如图示。

5. 使用【矩形工具】绘制16PX大小的矩形，拖出参考线至合适的位置。具体效果如图示。

6. 【拖入】状态栏素材，放置状态栏上方合适的位置。根据参考文档，调整状态栏矩形高度。具体效果如图示。

7. 使用【矩形工具】绘制搜索框，调整大小和圆角，【填充】白色，放置画面合适的位置。具体效果如图示。

8. 使用【文字工具】选择合适的字体输入文字，调整大小，排列至搜索框内合适的位置。使用【形状工具】绘制装饰素材，根据设计思路，调整大小排列至文字周边合适的位置。具体效果如图示。

9. 使用【椭圆工具】和【矩形工具】绘制搜索ICON图标，使用【文字工具】选择合适的字体输入文字，调整大小，排列至画面合适的位置。具体效果如图示。

10. 【拖入】准备好的图片素材，调整大小置于矩形上方合适的位置，单击【蒙版】，调整图片位置至合适的效果。具体效果如图示。

登录后学习完整图文教程

虎课APP离线下载免流量

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

一键打开