外卖类 APP 界面设计教程来了,临摹是最好的学习 !

发布时间:2023-01-10 19:11:26

伴随着生活节奏的加快,当代年轻人的“必需品”成为了外卖。在本期的外卖类 APP 界面设计教程中,我们将带大家设计一套美食外卖类应用界面,包括 5 个功能页面:首页、店铺页、商品详情页、清单结算页和个人中心页。这些页面简洁明了,操作流畅,你是否也想来一单呢?快来一起动手设计吧!使用即时设计资源广场,1.2w 个免费设计资源随便用呦!

外卖APP界面设计

1、设置背景

新建画板(快捷键为:A)尺寸为:375PX ^ 812PX ,设置背景色 #FFFFFF ;把固定元素 statusBar 和 homeBar 分别置于画板的顶部和底部;

2、设置顶栏

新建画板(快捷键为:A)尺寸为:375PX ^ 812PX ,设置背景色 #FFFFFF ;把固定元素 statusBar 和 homeBar 分别置于画板的顶部和底部;

绘制两个线性图标(也可使用提供的素材),使图标到页面的边距都为24;

创建文本(快捷键为:T),文本属性为:阿里巴巴普惠体、中等、字号 14、行高 22、颜色 #FF673D;

再创建文本,设置字号为12,颜色 #A6A6A6;再绘制一个下拉箭头颜色同样填充 #A6A6A6;

3、搜索框

绘制一个327PX ^ 44PX的矩形,圆角值调至32,填充颜色 #F8F7F9;

创建文本,文本属性为:阿里巴巴普惠体、常规、字号 14、行高 18、颜色 #A6A6A6;置于矩形中,使文本到矩形的左间距为16;

再绘制一个16PX ^ 16PX的搜索图标,填充颜色 #C6C6C7;置于矩形中,使图标到矩形的右间距为16;

4、发现美食

创建文本,设置文本属性为:阿里巴巴普惠体、字号:16、行高:22、粗体、颜色 #1B1B21;再绘制一个63PX ^ 2PX的矩形,圆角值调至最大,填充颜色 #FF673D;将矩形置于文本下方;

绘制一个104PX ^ 38PX的矩形,圆角值调至最大,填充 #FF7F5C到 #FF673D的线性渐变;再创建一个文本,设置文本属性为:阿里巴巴普惠体、字号:14、行高:22、中等、颜色 #FFFFFF;

复制多个标签,修改标签的文本信息和颜色为 #1B1B21、不透明度 10%,把线性渐变修改为纯色填充,颜色 #FF673D、不透明度 10%;

同时选中全部标签创建「自动布局」,参数为:横向、顶对齐、固定间距:12;使标签和「发现美食」的间距为16,选中标签项,按着「option / Alt」即可查看上下和左右间距;

5、热门餐厅

复制上面的「发现美食」修改一下文本内容;再创建一个文本,文本属性为:阿里巴巴普惠体、常规、字号 14、颜色 #1B1B21;再绘制一个更多的图标,使文本和图标到页面的右间距为24;同时和左侧的标题居中对齐;

再绘制一个 298PX^164PX 的矩形,双击矩形,选中矩形上方的两个描点,设置圆角为16;选中矩形,点击插件中的「智能填充」点击「美食」图片即可完成图片填充;

绘制一个 90PX^32PX 的矩形,圆角调整到最大,填充颜色 #FFFFFF、不透明度 90%;使矩形到底部卡片的边距都为16;

为标签填充文本和图标信息;

再绘制一个 32PX^32PX 的圆形,填充颜色 #FF673D;绘制一个 16PX^16PX 的爱心图标,和圆形居中对齐;同样使图标到底部卡片的边距为16;

绘制一个 298PX^96PX 的矩形,双击矩形,选中矩形下方的两个描点,设置圆角为16,填充颜色 #FFFFFF;添加阴影:颜色 #000000、不透明度 4%、大小「0、12、24、0」;

根据前面的操作,为矩形增加文本信息和标签;

复制一个卡片,使两个卡片的间距为16;

6、为你优先

再为首页增加一个「为你优先」的功能区,按照前面的操作,设计成小卡片的样式;

7、底部导航栏

绘制四个导航图标,使主页的图标颜色为 #FF673D,表示当前页状态,其他页面图标为灰色;

教程中的属性参数供大家作为参考,大家可根据自己的实际项目来做参数的调整;

以上就是即时设计出品的外卖类 APP 界面设计教程全部内容,UI 设计师必备即时设计,云端在线使用的 UI 设计工具!快去试试吧!