1.冷启动页
开启APP时的启动页面,一般由logo、slogan、版本号、产品名、公司名、Copyright等信息简单组合而成,出现时长一般在3s内;
应用的启动方式分为两种:冷启动和热启动;
冷启动:当启动应用时,后台没有该应用进程;
热启动:当启动应用时,后台已有该进程。
2.引导页
一般为产品的功能性引导,使用户能快速了解产品特性;页面数通常为1-5个(3个最为常见);内容由主题、图/文简介、页面指示器、跳过按钮等构成;
常用使用场景:新用户激活、老用户回归、大版本功能更新等
设计注意事项:文字信息不宜过多,主题内容要突出,图片要符合品牌调性,页数不宜太多。
3.登录注册
一般APP都会有自己的用户体系,少部分第三方、功能简单的APP没有,如系统工具中的计算器、闹钟、天气等。
第三方账号登录,用户不需要输入信息直接第三方账号登录即可,流程简化,提高留存率;
邮箱注册,一般这种是最开始注册时基于网页版的;
手机号注册,一般会结合密码或是动态验证码。
以上三种方式一般会组合使用。
4.内容页
状态栏 StatusBar :用来呈现信号、时间、电量等信息,位于APP界面顶部,可以改变底色与APP统一;
导航栏 NavBar :导航作用,位于状态栏下方,一般显示导航内容、页面标题,也可以放搜索控件等;
标签栏 TabBar :让用户在不同的页面进行切换,位于APP底部,一般放3-5个内容,图标加文字形式;
工具栏 ToolBar :常用于针对当前页面的操作展示,位于在APP底部,图文形式根据使用场景而定,一般用于二级页面;
搜索栏 SearchBar :用于搜索,宽高可自定义,可位于导航中也可位于导航下方。
5.内容形式
列表形式:每条列表信息可以是单独的图片或文本,也可以是图文混合,多数会用分割线区分;
卡片形式:将同类内容归纳到一个个矩形或圆角矩形中的一种展示形式;
集合视图:将同类信息用平铺的形式展示,一般图片为主,文字为辅;
图片形式:纯图片展示;
文字形式:纯文字展示;
6.列表
列表式布局在APP中非常常见,其特点在于能够在较小的屏幕中展示多条信息,用户通过上下滑动的方式获得更多信息。
列表舒适体验的最小高度是80px,高度需要根据内容多少而定。
列表布局示例如下:
微博消息列表126px、微信消息列表136px、QQ消息列表132px、网易云音乐列表110px、微信个人中心列表88px。
7.卡片
卡片是含有图片和文字在内的小矩形模块,它是用户了解更多细节信息的入口。
便于清晰展示同类型的内容信息,如信息流等;
在同一页面布局中,卡片宽度应保持不变,但高度可以相应调整,卡片的最大高度根据平台可用空间高度而定。一般移动端的卡片或按钮等至少会有2px的圆角,无圆角会很尖锐,感受不好。
卡片中的横构图,常采用16:9、4:3,也会有2:1、3:2等比例的使用。