鉴于目前交互设计知识体系混乱的现状，我写了这个系列话题【交互基础】来梳理关于交互设计的基础知识移动的。巩固自己的知识体系，分享给大家打好基础，让自己飞得更高！1.人机交互交互设计是定义和设计人造系统行为的设计领域。这是一个非常广阔的领域。这里只讨论IT产品的人机界面交互。举个例子，用户点击一个OK按钮完成表单的提交。此时APP提示用户“提交成功”。这是用户与APP之间的一个交互过程。从点击按钮到弹出提示，这个过程是怎么回事？交互层面需要考虑哪些问题？2.User-client-server用户与客户端进行交互，如上例，点击确定按钮，客户端将用户的操作转化为相应的命令，向服务器请求数据。如果网络和服务器都正常，服务器返回数据给客户端，用户看到自己操作的结果。在这个过程中，涉及两部分：用户与客户端的交互和客户端与服务器的数据传输。从用户点击确定按钮到服务器返回数据给客户端需要一定的时间。我们需要呈现一个加载过程，告诉用户这个app在做什么，以减轻用户的焦虑。服务器返回数据后，客户端需要提示用户“提交成功”，告知用户操作结果。当然，也会有不正常的情况。客户端与服务端之间传输数据的过程中，可能会出现网络不稳定，服务端出现异常的情况。这也需要及时告知用户，以免用户不知所措，造成焦虑，影响体验。加载的原理是一样的，就是用户和客户端进行人机交互后请求数据和返回数据的过程。但是在不同的场景下，需要考虑不同的加载处理方式。三、加载方式页面加载有两种方式：同步加载和异步加载。1.同步加载定义：一个同步加载请求执行某个任务。在请求返回数据之前，请求者不做任何事情等待，直到请求返回数据后才进行下一步操作。（比如产品设计，产品设计完成后才能交付开发。）场景：登录注册、扫码支付、提交订单、上传数据、修改数据等需要验证提交信息，或者下一个结果将与当前操作相关。也称为顺序操作。（例如需要验证账号信息才能登录，成功则进入应用首页，失败则仍停留在登录界面。）特点：时效性，你会得到加载完成/失败立即反馈结果，上下操作关联度高，更容易实现。但如果加载速度过慢，很可能会长时间停留在加载页面，导致用户产生烦躁消极的等待情绪。2、异步加载定义：异步加载请求在执行某个任务的同时，可以继续进行下一个操作，收到返回数据后才可以处理该任务。（比如要烧水扫地，为了提高效率，先把水烧开，烧开的过程中再扫地，等水烧开，再处理烧开的水。）场景：不涉及重要数据和顺序操作的数据加载，都适合异步加载。比如有大量图片和视频的页面，有长列表数据的列表页，有内容的详情页等。特点：有效提升用户体验，页面跳转和加载动画让用户感觉反馈非常好及时，提高操作的流畅性。但是需要处理好操作之间的关联性，否则用户很容易产生混淆。4.加载策略和表现形式利用加载模式的两大原则，可以扩展出多种加载策略，以满足不同场景的需求。加载策略是方法，加载模式是原则。需要注意的是，不同的加载策略使用不同的加载模式，并不是简单的一对一关系，所以要学会一起使用。1.启动页加载打开APP时有一个加载过程。在这个过程中，可能会涉及到同步加载和异步加载。一种常见的同步加载策略：有些数据只能在进入应用程序之前加载。适用于查看一些关键数据，比如查看用户的身份信息。这种策略是为了保证一些关键数据的可控性。常见的异步加载策略：进入应用再加载使用过的数据，比如进入应用再加载首页，这样可以提高进入应用的速度。APP启动页显示的长度取决于需要加载的内容量。有些APP在启动页之后还会设置一个广告页（一般是可以跳过的），所以更多的考虑是出于广告营销等商业目的。2.当前页面加载当前页面加载大部分是同步加载。定义：点击触发操作后，在当前页面加载数据并显示提示。数据加载成功后才能进入下一页。（如果网络不正常，只能停留在当前页面。）场景：适用于需要判断验证的情况，或者下一步与当前操作结果相关的情况。例如登录注册、表单提交等。作用：加载完成/失败时立即获取反馈结果，上下操作关联度高，更容易实现。缺点：加载时间超过3S，容易让用户感到焦虑。表现形式：如下图，在登录过程中用一个多态按钮表示验证过程，表单提交过程可以通过保存收货地址进行模态加载转场。3.下一页加载下一页加载多为异步加载。由于受下页内容类型、内容量等因素的影响，处理方式有多种。定义：点击触发动作后，页面跳转到下一页并加载内容。场景：大部分应用的内容页都采用这种方式。作用：大大增强了光滑感。毕竟卡在当前页面和卡在下??一页是两种不同的感觉。当网络异常时，用户点击触发操作。如果用户停留在当前页面没有任何变化，很容易产生烦躁的负面情绪；而跳转到下一页加载可以在一定程度上缓解负面情绪，因为用户发出指令的同时，应用的页面跳转，让用户看到操作带来的变化，只是因为网络不好，没有尽快加载成功。3.1.整体加载定义：一次性加载完所有内容后展示给用户。场景：适用于页面内容比较单一的情况，这种加载方式多用于H5页面。功能：保证内容的完整性，系统阅读所有内容。缺点：等待感比较强，超过3S容易让用户产生焦虑感。所以在地铁等信号不好的地方使用手机网页获取内容的体验是比较差的。表现形式：如下图所示，APP的加载过程通常采用能够强化品牌效应的趣味动画，或者简单的循环加载、菊花加载等风格，但趣味动画的设计更能吸引用户，减少焦虑感等待时的用户。H5页面通常使用进度条来表示加载进度。3.2.分步加载分步加载就是先加载文字，再加载图片。页面通过整体加载方式加载文本成功后，再使用分步加载方式呈现页面内容，即呈现文本内容和图片占位符，再加载图片。这样做是为了缩短整体的加载时间，让内容尽快呈现，减少用户的等待时间。由此可见，我们往往需要结合使用多种加载策略来达到更好的用户体验。定义：根据页面资源类型顺序加载。先加载占用网络资源少的文本。图片在加载过程中使用占位符，直到图片加载成功。文字→图片→视频→其他资源。场景：适用于图文内容交织的页面，如新闻列表页、详情页等，很多应用的首页图文内容较多，适合这种加载方式。功能：让用户快速了解界面信息布局和阅读内容。缺点：一开始可能会丢失重要的关键信息，用户第一感觉可能会认为产品有问题。表现形式：如下图，文字列表和内容详情页，先加载文字，图片加载过程中使用占位符填充位置。占位符一般用灰色方框展示，或者在灰色方框内加入品牌标识，加强品牌效果。加载占位符（SkeletonScreen）：加载占位符是分步加载的另一种形式，即先加载页面的frame，再加载frame中的内容。这种形式显示了内容的大纲，用于具有固定内容框架的页面。如果页面上可能有空数据，则不应使用它。需要保证显示的内容与显示的帧大致匹配。如下图，Facebook、简书等都采用了这种加载方式。加载占位符的方法可以根据实际情况结合分步加载、分屏加载、逐页加载等加载方式，可以达到更好的效果。3.3.分屏加载分屏加载也称为延迟加载或惰性加载。定义：先加载frame和text，再加载第一屏的数据，向下滚动到加载的地方。适用场景：适用于多屏、图片资源多的页面，如电商类应用产品展示页面。功能：只加载当前窗口的图片，页面加载速度快，可以减轻服务器压力，节省流量，提供良好的用户体验。缺点：可能会丢失重要的关键信息，无法建立信息获取的闭环。表现形式：如下图，淘宝的商品展示页只在首屏加载图片。当页面向上滑动时，下图进入窗口，显示占位符。加载完成后，显示产品图片。3.4.分页加载定义：显示列表数据时，例如默认显示20条，滚动到***时，自动加载另外20条或手动点击加载。场景：适用于长列表、产品列表、查询列表或瀑布列表。功能：为避免一次加载大量数据导致体验不佳，用户可以选择性向下滚动，无需手动点击下一页。缺点：将用户带入无休止的浏览模式。没有尽头，用户容易迷路，不方便快速索引定位某个内容。表现形式：如下图所示，页面加载分为手动点击加载和自动加载两种形式。3.5.Preloading预加载与分屏加载相反，即提前加载。定义：预先加载数据，当用户需要查看时直接从本地缓存中渲染。场景：信息需要立即刷新，适用于预加载后消耗流量较少的场景，如信息、消息等（预加载占用网络资源较少的元素，如文本，是一种平衡网络流量的方式和流畅的体验。)功能：用户进入下一级界面无需加载过程，给用户流畅的体验。缺点：换来更好的用户体验，增加了服务器前端的压力，牺牲了服务器前端的性能。假设在非wifi环境下，如果用户没有把握观看，就会浪费流量。外观形式：如下图，iOS信息，当用户还未查看时，信息详情实际上已经被预加载；微信的公众号消息，预加载消息的文本部分和边框，图片部分需要在线加载。这是因为图片本身很大。如果预加载，会消耗大量流量，占用过多的本地缓存。预加载占用较少网络资源的文本和框架等元素，可以节省流量并确保用户不在线。/弱网情况下查看消息的体验。4.下拉加载下拉加载应用广泛，优秀的刷新动画可以在加载过程中传达情感、人性化和品牌化。定义：页面下拉，出现加载动画，释放后重新加载页面。场景：适用于界面信息会经常更新或变化的情况。（这个场景在任何应用中应该都有。）作用：已经成为用户习惯的加载方式，方便用户刷新当前页面，获取新的数据。缺点：非首屏时无法进行手势操作。表现形式：如下图，是下拉加载的多种形式。当然，一个符合品牌调性的有趣的加载动画更能吸引用户，但一个普通的加载过程可能是一个想让用户更专注于内容本身的产品。5、智能加载定义：考虑网络环境和用户流量成本，选择合适的方式呈现图片、视频、音乐等高流量资源。例如以下处理方式：在WIFI环境下：优先加载高质量的图片、视频、音乐等在4G环境下：提示是否终止下载行为或自动停止下载行为，优先加载正常甚至停止加载图片、视频、音乐等，并提醒用户当前网络环境可能会消耗大量流量。弱网环境下：默认低画质加载甚至会停止加载图片、视频、音乐等，并提示用户当前网络环境异常。场景：适用于图片或视频数量较多的应用，如新闻资讯应用、视频应用、直播应用等。功能：根据场景控制流量消耗，帮助用户避免流量的非自愿流失。缺点：可能无法准确满足用户的需求。（土豪不会考虑流量因素）外观：如下图，需要检测用户当前设备??的网络环境。在非WIFI环境下进入直播间时，会提示用户在当前网络环境下观看直播，会消耗大量流量；查看今日头条，在非WIFI环境下，文章中的图片默认显示缩略图，用户可以选择性显示大图，避免流量消耗太大，直接在WIFI中显示大图环境，以确保更好的体验。6、缓存加载定义：应用程序从本地数据库中获取缓存的数据，以便用户在无网络/弱网络的情况下仍然可以查看一些内容或使用一些功能。场景：适用于新闻、小说、视频等内容列表，以及浏览内容详情缓存及相关功能离线运行、即时通讯消息缓存及相关功能离线运行。（同时还要考虑流量因素，在WIFI环境和4G环境下缓存处理要区别对待。）作用：提高应用的加载效率。在无网络/弱网络环境下，您仍然可以查看部分内容或使用部分功能。申请内容列表不会为空；对于用户可能会查看两次的即时内容，缓存可以减少流量损失。缺点：应用的缓存需要考虑容量限制和清理时间，否则缓存会越来越大，导致手机不堪重负，运行缓慢。表现形式：如下图，今日头条缓存了信息列表和咨询内容的文本和框架，方便用户在没有网络的情况下（比如在地铁上）查看，体验远优于空白内容；优酷视频离线缓存，清除内容展示页的文字和边框（封面很多，占用缓存比较大）；微信朋友圈支持离线点赞，用户的操作先保存在本地，等有网络的时候再上传。说起来，操作已经很满意了。5、加载处理的注意点请求数据的过程不可避免地需要一定的时间，可能会出现网络异常、服务器异常等情况，导致请求时间变长。等待很容易让用户感到烦躁和焦虑。一旦处理不好，会大大降低用户对产品的好感度，导致产品被卸载。我觉得设计者可以从以下几个方面来考虑优化加载过程：1、合理使用预加载和缓存加载，让用户在翻页的时候不需要重新加载。这种体验较好，但需要预测用户可能的使用行为，还要考虑设备的网络环境和流量成本。如果内容数据量比较大，而且是在非WIFI环境下，不建议使用预加载机制。.使用缓存加载时，需要考虑缓存的容量限制和使用时间。关于缓存，会在以后的文章中详细讲解。2.设计有趣的加载动画。一个好的加载动画需要和品牌相结合，同时也要体现出一定的趣味性。使用有趣的加载动画来吸引用户，可以在一定程度上缓解用户等待时的焦虑情绪。3、及时退出加载时间过长，再有趣的动画，用户也不会买账。因此，我们可以考虑为用户提供退出加载的选项；也可以考虑设置，如果在一定时间内加载不成功，则退出加载过程，让用户选择是否重新加载。只有理解了加载的原理，并合理地使用（或一起使用）加载策略，才能设计出体验更好的加载方案。
