很多产品经理都做过app设计，对于新人来说要一步一步踩坑走过来。其实app的很多通用的模块和底层逻辑、设计方法，在这里梳理了一下供大家参考。
1、APP启动页设计
2、Loading页设计
3、提示对话框/操作浮层
4、时间的展示
5、APP消息推送
6、缓存与空页面
7、引导用户为APP评分
8、定位授权
9、输入设计
10、异常情况设计
11、产品设计自查清单
1、APP启动页设计
为什么要有启动页
启动页是因为APP在打开时，首页需要有一个预加载的过程，为了让用户不要太枯燥，在这段时间展示一些内容。
启动页的内容类型
品牌展示，广告展示，活动展示，主页面框架，背景底色。
品牌展示-网易云音乐
广告展示-QQ音乐
活动展示-知乎
主页面框架-即刻
启动页的机制
数据来源
- 本地默认底板
一般会设置一个默认启动页底板，可以是一种颜色填充，也可以是一张品牌图直接打包在app中。 - 线上读取图片
启动页加载时向服务端请求启动页图片并展示。 - 本地缓存图片
为了避免每次启动都要向服务端请求图片，一般首次下载了启动页图片会存在本地，下次启动时首先向服务端请求校验是否有新的图片，如果没有就直接用本地缓存的图片，如果有就下载最新的。
本地缓存图片也会被用于网络异常的情况下，请求服务端超时后直接展示缓存图片。
启动页时长
- 下载时间
规定下载时间是防止网络不好的情况下，下载时间过长甚至直接卡死在启动页。正常应该超过规定下载时间之后终止下载请求，使用缓存的旧广告或默认底板。 - 展示时间
根据app的性质和启动页用途决定，比如卖的广告会有跟客户约定展示时间多久。
细节
- 断网或弱网场景，上面有提到处理机制。
- 启动页图片的大小与尺寸
尺寸注意机型的适配，可以在服务端多放些不同尺寸的图，根据请求的设备屏幕尺寸不同，下载不同尺寸的图。
另外图片大小不宜过大，否则加载需要时间会很长。 - 启动页的数据统计
比如展示量、点击量等数据。
比如不同细分用户展示不同的启动页广告。
2、Loading页设计
进入页面时，一般会都会有loading页，常见的加载方式有先加载再进入和先进入再加载。
Loading的方案有
全屏锁定加载
即整个页面一起加载，加载完成前无法操作。
全屏锁定加载-王者荣耀
非全屏锁定加载
即部分内容用全屏锁定动画的样式遮罩加载，留部分功能在外面可以操作，比如返回上一页、切换tab等
非全屏锁定加载-大众点评
局部加载
每个块单独加载，先加载出来的先展示。
局部加载-小米商城
默认样式填充
即进入页面之后先展示一个页面的默认样式框架，然后加载框架中的内容。
默认样式填充-饿了么
Loading页体验
为了避免加载时的枯燥，可以用进度条或小动画展示加载进度，也可以与用户交谈（正在玩命加载）、展示app使用技巧分享、小游戏等。
展示游戏技巧-王者荣耀
3、提示对话框/操作浮层
提示对话框
弹窗的基本元素包括遮罩层、弹出窗体、操作按钮。常见的提示对话框有4种类型。
-
toast：用于不重要的操作反馈
toast-ONE
-
须知：用于需要用户明确知道的提示
须知-ofo
-
选择：需要用户做出操作选择时的提示
选择-抖音
-
自定义：比如活动推广、红包发放等为了把重要信息展示给用户的弹窗。
自定义-美团外卖
操作浮层
操作浮层一般是从底部向上浮起，不像提示对话框一般的居中的展示，操作浮层更多是产品功能操作流程中的一部分。
浮层是为了不跳转页面，让操作更简单，同时也有强调的作用，直接在上一步页面的底部展示浮层进行下一步操作。
操作浮层-支付宝
4、时间的展示
时间的使用场景决定了时间展示的精度和格式，具体在app设计时采用哪种格式，要具体问题具体分析。
以下3款app为例：
微信
当日：hh：mm
昨日：昨天
本周：星期几
上周及更早：yyyy/m/d
IM类的app对时间的精度要求比较高，所以当日的时间会具体到分。
即刻
不展示时间
对于即刻app来说，用户在上面只是要看有趣的内容，并不关心这个内容是什么时间发布的，所以不需要展示时间。
APPso
当日：**小时前
昨日：昨天
前日-8天前：2日前-7天前
9天前及更早：yyyy-mm-dd
对于资讯类app来说，时间精度要求没有IM类高，只需给用户一个比较直观的感受这个新闻是新旧程度即可，所以用“多久前”更为恰当。
5、APP消息推送
推送类型包括：端内推送、端外推送（通知栏消息、透传消息）
端内推送
指app打开或在后台未被杀死的时候，与服务器有长连接，只要长连接还在，app就能收到服务器推送的消息。
端内推送一般由开发者自己做，方便维护，但是缺点很大，app被杀死的情况下，长连接断掉就收不到推送了，尤其是Android手机。
端外推送
通知栏消息
消息推送到手机之后在通知栏展示，与APP并无联动，仅仅是通知，点击消息进入app实际上是看不到这个消息内容的。
透传消息
即透明传送消息，消息是直接推送给APP，再由APP来决定如何处理消息，比如展示在通知栏。
因为可以处理成通知栏内容展示，所以通知栏的样式也可以根据需求来做对应的改变。在Android 4.4及以上的系统，通知栏样式更丰富，可以放入图片和视频等；
也可以不展示在通知栏，仅仅更新app的某些内容，更新相关信息，在主界面中相关栏位用红点标识进行弱提醒，比如推送一条命令用来检测用户是否有登录等。
厂商通道和第三方通道
在国际上，标准的推送通道有iOS官方推送APNs，Android官方推送GCM。
Android消息推送的大坑
到了国内，Android因为国内限制的因素，GCM需要翻墙才能使用，并且需要手机安装了 Google Service ，条件比较苛刻。再加上国内的Android系统都是各大厂商的定制化系统，所以就有了厂商推送。
厂商推送的大坑
因为国内手机厂商品牌众多，很多家都有自己的官方推送，目前Android厂商推送有小米、华为、魅族、OPPO，虽然厂商是不会杀死自己的消息通道的，推送质量很高，但是每家都接一下也是很麻烦的，而且做不到所有机型、系统版本全面覆盖。
所以因厂商覆盖不完整，以及并不是都支持透传，所以就有了第三方推送：极光、友盟、个推等。另外三方通道一般都提供详细的数据统计，便于运营同学分析推送的策略。
一般来说，如果APP对消息推送质量要求很高，会对接一个第三方推送再加上述厂商推送。
推送机制
客户端初始化SDK--》上传token到服务器--》将token绑定用户id或设备
完成上述流程之后即可根据token推送给指定的设备或用户，推送用户群选择一般是根据用户推送或根据设备推送，有时也会结合两者，比如只推送用户登录过的最后一个设备，而不是推送用户所有登录过的设备。
推送质量
在线送达率
针对长连接在线的设备推送的送达率。
通用送达率
针对所有设备推送的送达率，一般在线送达率都是高于通用送达率的，选用第三方通道时要问清楚是哪一个。
6、缓存与空页面
空页面的情况
空数据（比如用户未加好友、未关注内容）、断网、接口异常等
处理方式
-
空页面
用有提示语的空页面告知用户发生了什么。
空页面-哔哩哔哩
-
缓存页面
如果业务场景对实时性要求不高的话，可以使用上次缓存的数据填充展示。 -
toast提示用户
比如断网告诉用户网络异常刷新重试，接口异常提示服务器不稳定，请重试。 -
图文说明
与引导比较类似，一般需要说明的情况比较复杂时会出个图文解释。 -
引导
引导用户去做一些操作，比如一些社交软件刚注册时没有好友，会引导用户去添加好友或关注路人。
引导-陌陌
7、引导用户为APP评分
为了APP在应用商店的排名，一般都会引导用户去评分。有以下原则需要注意：
- 弹窗提醒用户要确定评分时机，不要打断用户的使用流程
- 事先询问用户的评价意愿，如果用户多次拒绝评分，就不要打扰用户了。
- 引导不满意的用户填写意见反馈。
评分弹窗除了常见的“去给个好评”、“下次再说”以外，一般会再加一个选项叫“我要吐槽”，这个按钮指向的并不是App Store，而是APP内的意见反馈，以便收集用户的反馈同时拦下用户的差评流向App Store。
8、定位授权
APP需要用到定位权限时，一般提前告知打开定位的好处，确认之后再弹出定位授权弹窗。
用户拒绝之后的提醒：
- 主功能需要定位：下次打开APP再次提醒用户
- 主功能不需要定位：下次使用到特定需定位的功能时再提醒
为了便于用户找到打开定位的位置，一般会在弹窗中告知用户操作路径。
告知用户定位好处与操作路径
用户拒绝之后的补偿策略
- Android可以使用基站数据定位
- 手动选择地址
- 将用户定位到默认区域，比如北京，让用户感知到定位的结果以及定位错误的不便，激发用户授权定位
- 使用上次定位的数据，如果有的话
9、输入设计
输入设计有一些基本原则：
- 自动弹出键盘
对于必须输入内容的页面，进入时可以自动唤起键盘，减少用户操作。 - 键盘不要挡住操作按钮
键盘唤起时会遮住底部，要尽量避免遮挡页面的操作按钮。 - 可自定义的键盘
一般密码输入时为了安全考虑会使用APP自定义的键盘。 - 智能预设
除了键盘输入以外，选项也是一种输入方式，比如性别的选择。 - 输入内容推荐
根据用户输入的部分内容，推荐相关内容，提高输入效率，比如输入邮箱类账号时推荐常用的邮箱后缀。 - 输入内容指导
常见的就是在输入框内告知输入内容的显示，比如账号中提示“请输入注册手机号”。 - 输入即时反馈
在输入过程中给出反馈，比如设置密码时，两次设置的密码不一致，在输入框失焦时自动校验并给出提示；在输入手机号账号失焦后自动校验手机号格式（号段、位数）是否正确。 - 多行输入的自适应
单行输入和多行输入不同，要考虑输入框的大小展示，同时要设定好极限值。 - 去掉提交按钮
比如微信支付输入密码时，是免提交的，输入密码完成后自动提交。 - 珍惜用户已输入的内容
如果在输入过程中点击了取消或返回，这时要帮用户保存内容或者做二次确认弹窗提醒，防止用户误操作导致内容丢失。
10、异常情况设计
对于异常情况，要告诉用户异常原因，提供解决方案，缓解用户情绪。
断网
- 文案提示+重连网络按钮
- 用预设图或占位符或native框架
- 本地缓存
断网情况下的内容加载
切换为网络
- 提醒流量风险
- 提供免流量方案
非WIFI情况视频播放
网络慢
- 给出进度提示
- 分块加载
- 利用缓存展示之前加载过的内容
- 异步加载：对于用户提交的内容（比如发微博），如果当前网络较慢，可以不用立即告诉用户网络慢，而是将内容存在本地，等待网络好的时候系统自动提交。如果超过了设定的提交时效仍未提交成功，可以再告知用户提交失败。
微信的H5页面加载进度条
11、产品设计自查清单
为了避免产品设计的基础逻辑上有漏洞，可以采用以下口诀“增删改查显算传”进行自查。
增
- 内容增加时的界面显示（是否需要分页）
- 添加、创建、发布、上传时的显示和处理方式
- 增加内容后的显示/跳转逻辑
删
- 是否能够删除
- 删除后的界面显示
- 删除时是否需要确认，确认时的界面显示
- 删除后能否恢复
- 删除后的显示/跳转逻辑
改
- 是否能够修改
- 修改的规则
- 修改是否需要确认，确认的界面显示
查
- 有哪些查询规则
- 查询后（结果为空）的界面显示
显
- 界面显示（显示多少条数据，怎么排序，极限值如何展示）
- 打开时跳转页面还是弹窗
- 是否能够打开查看
- 页面跳转逻辑
- 不同用户权限的显示方式
算
- 计算规则
传
- 用户可以传哪些数据，怎样传，传多少，传多大
- 客户端存储数据还是传到服务端
- 数据传输的规则
天气热了，肉肉们开始发慌，因为我要干掉他们！！
网友评论