APP产品【通用功能】的设计方法

很多产品经理都做过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、产品设计自查清单

为了避免产品设计的基础逻辑上有漏洞，可以采用以下口诀“增删改查显算传”进行自查。

增

• 内容增加时的界面显示（是否需要分页）
• 添加、创建、发布、上传时的显示和处理方式
• 增加内容后的显示/跳转逻辑

删

• 是否能够删除
• 删除后的界面显示
• 删除时是否需要确认，确认时的界面显示
• 删除后能否恢复
• 删除后的显示/跳转逻辑

改

• 是否能够修改
• 修改的规则
• 修改是否需要确认，确认的界面显示

查

• 有哪些查询规则
• 查询后（结果为空）的界面显示

显

• 界面显示（显示多少条数据，怎么排序，极限值如何展示）
• 打开时跳转页面还是弹窗
• 是否能够打开查看
• 页面跳转逻辑
• 不同用户权限的显示方式

算

• 计算规则

传

• 用户可以传哪些数据，怎样传，传多少，传多大
• 客户端存储数据还是传到服务端
• 数据传输的规则

---

天气热了，肉肉们开始发慌，因为我要干掉他们！！