移动端界面与交互设计(移动端滚动加载)

针对目前交互设计知识体系的混乱，我写了这一系列专题【交互基础】，旨在梳理移动交互设计的基础知识。巩固自己的知识体系，鼓励他人，打好基础，才能飞得更高！
1.人机交互设计是定义和设计人造系统行为的设计领域。这是一个非常广阔的领域。这里只讨论IT产品的人机界面交互。例如，用户单击OK按钮来完成表单的提交。这时APP提示用户“提交成功”，这是用户和APP的一个交互过程。从点击按钮到弹出提示，这个过程是怎么发生的？交互层面需要考虑哪些问题？
二。用户3354客户端3354服务器用户与客户端交互。如上例，点击OK按钮，客户端会将用户的操作转换成相应的指令，并向服务器请求数据。如果网络和服务器正常，服务器会把数据返回给客户端，用户看到的是自己操作造成的结果。这个过程包括两个部分：用户与客户端的交互和客户端与服务器之间的数据传输。
从用户单击OK按钮到服务器向客户端返回数据需要一定的时间。我们需要呈现一个加载过程，告诉用户APP在做什么，以此来缓解用户的焦虑。当服务器返回数据时，客户端需要提示用户“提交成功”，通知用户操作的结果。当然也会有不正常的情况。在客户端和服务器之间的数据传输过程中，可能会出现网络不稳定、服务器异常等情况。这也需要及时告知用户，避免用户不知所措，焦虑，影响体验。
加载的原理是一致的，即用户和客户端进行人机交互后，请求数据和返回数据的过程。但是在不同的场景下，要考虑不同的加载方式。
三。加载模式页面加载的两种模式：同步加载和异步加载。
1.同步加载的定义：同步加载请求执行某项任务。在请求返回数据之前，请求者什么都不等待，直到请求返回数据，然后执行下一个操作。(例如，直到设计完成，产品才能交付开发。)场景：登录、注册、扫码、支付、提交订单、数据上传、数据修改等。要求验证并提交信息，或者下一步的结果与当前操作相关，这也叫顺序操作。(比如登录时，需要验证账号信息。如果成功，将进入申请首页；如果失败，您仍将停留在登录界面。)特点：时效性，加载完成/失败后会立即得到反馈结果，上下步骤关联性强，更容易实现。但如果加载速度过慢，很可能会在加载页面停留很长时间，导致用户产生消极的等待情绪。
2.异步加载的定义：异步加载请求执行某个任务时，可以继续执行下一个操作，收到返回的数据后再处理该任务。(比如你要烧水扫地，为了提高效率，先烧水，然后在烧水的过程中扫地。当水沸腾时，再次处理煮沸的水。)场景：不涉及重要数据和顺序操作的数据加载适合异步加载。比如大量的图片和视频，长列表数据的列表页，内容的详情页等等。特点：有效提升用户体验。页面跳转和加载动画让用户感觉反馈及时，增强了操作的流畅性。但是需要处理好操作之间的关联，否则用户很容易混淆。
四。加载策略和表现形式利用加载模式的两个原理，可以扩展多种加载策略，满足不同场景的需求。加载策略是方法，加载方式是原则。需要注意的是，不同的加载策略使用不同的加载方式，不是简单的一对一关系，要学会一起使用。
1.开始页面加载并打开应用程序。有一个加载过程，其中同步加载和
同步的常用策略：加载一些数据才能进入应用，适用于检查一些关键数据，比如检查用户的身份信息。这种策略是为了保证一些关键数据的可控性。异步加载的常用策略：进入应用，重新加载使用过的数据，比如进入应用，重新加载首页，可以提高进入应用的速度。启动页面显示的长度取决于需要加载多少内容。有些app还会在启动页之后设置广告页(一般可以跳过)，所以更多考虑广告营销等商业目的。
2.当前页面加载当前页面加载大多属于同步加载。
定义：点击触发操作后，数据会加载到当前页面并给出提示。数据加载成功后，可以进入下一页。(如果网络异常，只能停留在当前页面。)场景：适用于需要判断和验证的情况，或者下一步与当前操作结果相关的情况。如登录注册、表单提交等。功能：加载完成/失败会立即得到反馈结果，下一步和下一步的关联性强，更容易实现。缺点：加载时间超过3S，容易让用户产生焦虑感。表现形式：如下图所示，多态按钮用来表示登录时的验证过程，保存投递地址时可以用模态加载来过渡表单的提交过程。
3.下页加载下页加载大多属于异步加载。因为下一页内容类型和内容数量的影响，有很多处理方法。
定义：点击触发操作后，页面跳转到下一页，加载内容。场景：大多数应用程序的内容页面都采用这种方法。功能：大大增强了流畅感。毕竟卡在当前页面和卡在下一个页面是两种不同的感觉。网络异常时，用户点击触发操作。如果用户停留在当前页面没有任何变化，很容易产生烦躁的负面情绪。一定程度上，跳转到下一个页面加载可以缓解负面情绪，因为当用户发出指令时，应用页面跳转，让用户看到了操作带来的改变，只是因为网络差，没有尽快加载成功。3.1.总负载
定义：一次性加载完所有内容后，展示给用户。场景：适用于页面内容比较单一的情况，这种加载方式多用于H5页面。功能：保证内容的完整性，可以系统的阅读全部内容。缺点：等待感比较强，超过3S容易让用户产生焦虑感。所以在地铁等信号不好的地方使用手机网页获取内容的体验比较差。表现形式：如下图所示，APP的加载过程通常采用能强化品牌效应的有趣动画，或者简单的循环加载、菊花加载风格，但有趣动画的设计更能吸引用户，减少用户等待时的焦虑。H5页面通常使用进度条来指示加载的进度。3.2.逐步加载
分步加载就是先加载文本，再加载图片。以整页加载的方式加载文本成功后，页面的内容以分步加载的方式呈现，即先呈现文本内容和图片占位符，再加载图片。这样做是为了缩短整体加载时间，让内容尽快呈现，减少用户等待时间。由此可以看出，我们经常使用多种加载策略来达到更好的用户体验。
定义：根据页面上的资源类型，先加载网络资源小的文本，在图片的加载过程中使用占位符，直到图片加载成功。文字图片视频其他资源。场景：适用于图文内容交织的页面，如新闻列表页、详情页等。很多应用的首页都有很多图文内容，所以这种加载方式比较合适。功能：让用户快速了解界面信息的布局，阅读内容。缺点：可能一开始就丢失了重要的关键信息，用户可能第一时间就认为产品有问题。表现形式：对于下图所示的图形列表和内容详情页，首先加载文本，在图片加载过程中用占位符填充位置。一般在灰框中显示占位符，或者在灰框中添加品牌logos，以增强品牌效果。加载占位符(骨架屏):加载占位符是另一种形式的分步加载，即先加载页面的框架，再加载框架中的内容。此表单显示内容的大致轮廓，用于具有固定内容框架的页面。如果页面上可能有空数据，就不应该使用，所以要保证最终呈现的内容和显示的框架大致一致。如下图所示，脸书，简书等。采用这种加载方式。占位符的加载方式可以根据实际情况搭配分步加载、分屏、分页等加载方式，可以达到更好的效果。
3.3.分屏装载
拆分加载也称为延迟加载或延迟加载。
定义：先加载框架和文本，然后加载fold以上的数据，向下滚动，走到哪里加载到哪里。场景：适用于多屏、图片资源较多的页面，如电子商务应用产品展示页面。功能：只加载当前窗口的图片，页面加载速度快，可以减轻服务器压力，节省流量，用户体验好。缺点：重要、关键的信息可能会丢失，无法建立信息获取的闭环。表现形式：如下图所示，淘宝的商品展示页面只加载首屏图片。当页面向上滑动时，底部的图片进入窗口并显示占位符。加载后，显示产品图片。3.4页面加载
定义：例如显示列表数据时，默认显示20项。当滚动到末尾时，将自动加载20项或手动点击加载。场景：适合长单、商品单、咨询单或者瀑布。作用：避免一次性加载大量数据带来的不良体验。用户可以有选择地一直向下滚动，无需手动点击下一页。缺点：将用户带入无止境的浏览模式，没完没了，用户容易流失，不方便快速索引定位某个内容。表现形式：如下图所示，分页加载分为手动点击加载和自动加载两种形式。