UI-美食类APP产品讲解及界面设计

1、［打开］flinto软件，［打开］原型图文档，了解整个菜谱的内容和界面功能。具体显示如图示。

2､［打开］Sketch软件，按Ａ键［新建］画板，［选择］iphoneX界面。具体效果如图示。

3､按Ｒ键［呼出］矩形，绘制高44PX大小的矩形，［取消］描边，单击［标尺］建立参考线。具体效果如图示。

4､按［Ctrl+D］复制矩形，向下拖动至合适的位置。使用相同的方法，单击［标尺］建立参考线。绘制合适大小的矩形，放置画面合适的位置，使用相同的方法创建参考线。具体效果如图示。

5､［拖入］电池条图标，排列至合适的位置。使用［矩形工具］绘制添加ICON图标，［填充］合适的颜色，移动至画面合适的位置。具体效果如图示。

6､使用［矩形工具］绘制高34PX大小的矩形，［圆角］设置至合适的效果，［填充］浅灰色。根据设计思路，使用相同的方法绘制搜索栏关联icon图标，排列至合适的位置。具体效果如图示。