新知榜官方账号
2023-09-27 02:16:27
学习APP原型设计需要把握重点和难点,最有效的方式是临摹。在短时间内理解和掌握一个工具的使用,可以通过看实例视频教程,并跟着教程在实例素材上操作。本教程通过一个具有典型性的APP——小红书APP来做实例,结合视频、原型素材和配套文档,让新手能快速学会APP原型设计。
1.项目类型、尺寸设置:要设计原型,首先需要确定要做什么类型的原型,是iPhone、Android还是iPAD?如果是Android的话,要设置成什么尺寸?
2.APP图标、启动页设置:每个APP都有自定义的图标和启动页。
APP引导页设计:通常一个APP在初次下载打开的时候都会有3-5个页面的引导页。
1.页面设置:在开始设计页面时,需要解决一些问题:APP的顶栏、底栏怎么固定?怎么更改页面背景色、背景图?怎么做长页面,并让长页面可以滚动?这里我们将会结合小红书APP的首页进行设置讲解。
2.组件固定设置:在APP页面中,按钮悬浮也是一种较为常见的设计。我们将会结合小红书APP的悬浮购物车按钮进行设置讲解。
页面跳转设置:交互跳转、返回是可交互原型的一个重要部分。
APP原型设计中,会涉及到一些常用的产品导航,且这些导航的原型设计操作相对复杂。因为这些导航小红书APP刚好都用到了,所以这里我们将会结合它的几个页面重点讲解一下这些导航如何设计。
1.底部、顶部导航设计
2.侧边滚动(分类)导航设计
3.顶部滚动(分类)导航设计
4.抽屉导航设计
除了导航以外,APP中一般还会有轮播图、滚动消息、弹窗以及视频这些常见页面元素,这里我们同样会结合小红书APP的相关元素进行设计讲解。
1.轮播图、滚动消息设计
2.点击弹窗设计
3.定时弹窗设计
4.视频嵌入
以上就是本教程的内容,快去墨刀官网观看吧!
微信扫码咨询
相关工具
相关文章
相关快讯
推荐
阿里Accio中文版上线!一键搞定复杂采购
2025-08-19 09:13
视频“用嘴编辑”的时代来了,但钱包顶得住吗?
2025-08-15 17:59
智谱新模型GLM-4.5V全面开源,玩家们有福啦!
2025-08-12 17:56
扎心文案+AI插画=爆款!揭秘8万赞视频的制作全流程
2025-08-12 10:08
GPT-5没你想的那么好,附实测体验~
2025-08-11 11:07
一站式搞定AI绘图+视频,AI短片效率飙升的秘密在这儿!
2025-08-08 09:26
打工人新神器!10款国产AI,让你告别996!
2025-08-08 09:24
豆包视觉推理深度体验,AI也能“边看边想”了!
2025-08-08 09:19
300美元的AI男友来了!马斯克的情感生意从女友做到男友
2025-08-01 17:56
Agent智能体:2025年企业新员工,月薪仅需一度电?
2025-07-30 17:49