UI-租房类APP界面设计

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

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

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

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

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

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

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

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

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

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

11. 按R键使用【矩形工具】绘制合适大小的矩形，【填充】黑色，置于图片上方合适的位置，【不透明度】35%。具体效果如图示。

12.