这是《App产品设计指南》系列文章的第7篇内容，更多精彩可以点击下方链接查看。
经过前面几篇内容预热，相信大家已经对App产品的设计理念，研发流程有了一定的认知。接下来我们来正式切入正题，一起来学习关于App产品设计的具体知识点。需要说明的是，后续的文章为了让大家更直观地理解，语言上会比较直白。文章之外的很多细节，比如说B站的情感化设计，微信克制的初心，这些都需要大家主动思考和发散才能深刻的理解。
在本文中我会重点介绍一下App产品的通用模块。在产品初期一定要设计好产品的通用模块，这些模块会伴随着产品的一生。如果没有设计好，后续迭代多半会踩坑填坑。我目前在用的机器是小米9，所以后面会出现较多的安卓系统的案例。
全局加载
经常会在App中看到转圈加载的交互，这个就属于全局加载。在数据没有获取到之前显示加载中的特效；数据请求后再渲染页面，这样的交互能让用户不至于焦虑。下面介绍几种常见的设计：
（1）App页面中显示loading图标，增加文案引导。由于一般是圆圈加载，速成菊花图。
饿了吗&简书
（2）App页面中显示由矩形、圆形等图案组合的轮廓效果。这种效果有一个学名叫做骨架屏。
需要说明的是骨架屏最好根据页面内容来显示轮廓效果，如果使用相同的设计效果就会不太理想。
腾讯新闻&一点资讯
（3）webview页面中在页面顶部显示进度条，表示对应的加载进度。
全局加载需要设置一个数据请求上限，比如说10S。如果达到上限还没有请求到数据，就要显示对应的失败提示，下文中会提到这种场景。
淘宝&网易云音乐
空白页
在列表页面中经常会出现没有数据的情况，我们要明确的告诉这是什么，为什么出现，用户要做什么。在实际情况中，上面3种处理会组合出现。
不同页面的内容都不一样，所以空白页最好能根据页面的内容来进行设计
得到&喜马拉雅
网络异常
用户进入新页面时，本地判断网络情况。如果网络异常则显示该状态，一般都会增加“重新加载”“点击刷新”“查看网络设置”这种操作提示。
类似微信钉钉等使用长连接机制的App，如果网络中断，页面顶部会显示网络异常提示。
网络异常属于可以实时判断的情况，进入页面时就能立刻判断。
美团&可听
错误提示
这种情况一般发生在服务器出问题的时候，相当于网页上的404状态。比如说连接人数特别多，或者服务器宕机，此时就会触发该状态。
上面说的错误提示需要客户端请求数据一段时间（比如说10S）之后才会触发。一般包括整个页面出错，部分内容出错两种场景。前者需要有对应的页面设计，后者一般使用toast这种轻度的设计。
熊猫直播&即刻
刷新加载
上拉加载
如果数据量比较少，可以一次性加载完；而数据量较多时，就需要分页加载。比如先加载20条数据，然后再继续加载。
（1）触发上拉加载分为2种情况，一种是用户看完当前页向上滑动时再加载数据；另外一种是预加载，即用户还在浏览当前数据，程序在后台自动加载数据。比如抖音App，你在浏览视频时，系统会自动加载后面几个视频。
（2）数据全局加载完，显示触底提示，文案如“没有更多数据了”“我可是有底线的”。
（3）如果上拉加载数据失败，在底部显示加载失败并显示“重试”按钮。这种场景也可以不予考虑。
IT之家
下拉刷新
用户在页面顶端主动进行下拉操作，当前页面数据进行刷新。如果有其他页面的数据或者配置发生变化，也可以同步更新。下拉刷新一般分为以下4个步骤：
（1）用户向下拉动时提示用户在进行刷新操作；
（2）用户下拉是有区域范围的，一般在屏幕的1/3处左右。当下拉达到这个区域时，提示用户此时松开可以刷新数据。
（3）显示刷新中的交互效果；
（4）提示用户刷新成功，可以把刷新成功的数字显示出来。如果挤在失败则toast刷新失败。
今日头条
在写作过程中，如果有意见或者想法，欢迎有兴趣的读者添加我的微信一起交流探索，共同进步。
网友评论