UI交互设计中的重要因素和加载机制-【非凡学院】

　　外行人对交互设计的(上海UI设计培训)*印象是什么？画线框图的？做草稿的？

　　的确，大家所看到交互设计师的日常工作成果都是一些线框图，从表面上理解的确是这样。

　　其实，交互设计师做的远远不止这些。往深一步想，信息架构、界面、流程，都是设计师需要考虑的问题。下面，想谈一下我理解的交互设计。

　　交互设计*重要的两个因素：信息&互动

　　1.信息

　　人们每天面对那么多信息，在杂乱的信息中筛选出对用户有价值的，呈现给用户，帮助用户做选择，指引用户完成任务。信息的筛选直接影响着用户使用，在用户需要的时候无法提供有用的信息，将导致任务无法进行下去。所以信息是交互设计师需要关注的*要素。

　　2.互动

　　有了信息后，就需要设计用户如何与这些信息进行互动了。信息的分类、布局将影响用户与信息的交互。用户获取信息后，做出了反应，采取了行动，应用也需要有来有往地给予足够的反馈，来协助用户完成任务。

　　以上2要素，都是从用户直观感受上去体现的，也就是说往往是表现在用户界面上。我们可以把它称之为“看得见的交互设计”。

　　具体的形式包括：

　　信息架构：把筛选好的信息进行分类，*页面来承载这些信息，并且把信息（页面）的层次规划好

　　界面设计：把信息在一个页面上进行布局

　　流程设计：把一个任务中涉及的页面信息串联起来，使任务形成一个线性流的关系

　　以上三个关键点，是对交互设计师的基本要求，很多情况下，非专业人员也能做得7788，但还有一部分的交互设计，并不是直观能看到的，也许用户会轻微感受到，但他总在不经意间使用户使用得更加流畅。我们可以把它称之为“看不见的交互设计”。而这些看不见的交互设计，也是初级交互设计师容易忽略的。

　　如今移动互联网发展迅速，移动产品对这些看不见的交互设计更为注重。因为移动应用的使用场景、网络环境、使用心态都与用户在使用web产品时有着大大的不同。所以在了解这些看不见的交互设计时前，需要对移动应用的情景有一定的了解。

　　1.使用场景

　　用户在使用移动产品，有可能会在户外人多的公众场合使用，这时候需要特别注意移动应用设计的隐私安全。

　　用户有可能在家里、在床上、在厕所，用着各种姿态使用产品，所以对交互的便利性和容错性要特别注意

　　2.网络环境

　　网络环境是“看不见的交互设计中”非常关键的一点。用户会在2G、3G、wifi甚至无联网的(上海UI设计培训)情况下使用产品，所以对于各种网络环境进行合理的交互设计是移动产品交互设计师需要考虑的重中之重

　　3.使用心态

　　产品的存在是为了解决用户的问题，而移动产品是用户的贴身工具，当用户需要时，能立刻开始运作，需要快速、直接、有效，用户不喜欢等待。有研究结果表示：

　　上海UI设计培训

　　在移动产品这种特殊的环境下，“看不见的交互设计”会相较于web产品更为重要，特别是针对网络环境和用户等待的体验需要特别注意

　　下面将展开讨论一下“看不见的交互设计”

　　总的来讲，可以归结为三大点：

　　1.加载机制

　　2.刷新机制

　　3.缓存机制

　　加载机制

　　通常情况下，我们使用的绝大部分是网络App，他的工作原理是这样的

　　用户在客户端的界面上进行操作，客户端发送请求到服务器，服务器处理请求，返回数据给客户端，并显示给用户

　　上海UI设计培训

　　其中，客户端和服务器的交互过程，用户是感知不到的，而他确实会耗费时间，在不同的网络环境下耗费的时间也会有所差异，如何让用户在这段时间里有友好的体验呢？这时候“加载过程”起了作用。

　　加载过程的关键可以总结为：

　　1.让用户感知产品正在努力为他运作

　　2.让用户有基本的心理预期需要等待的时间长短

　　3.让用户在无聊的等待中获得更多乐趣

　　进度条是一个针对加载过程很好的设计

　　上海UI设计培训

　　动态的加载进度表示产品正在工作，总进度和当前进度能让用户及时了解情况，让用户能根据这些信息预判时间，有了心理预期

　　有趣的进度条设计or在加载过程中展示一些功能介绍提示（常用于游戏）能有效减少用户等待时的焦躁心理，也能有效地提高用户的容忍度

　　进度条是web产品时代的产物，还有另外一种加载设计，就是加载图标

　　由于移动产品请求的数据量并不大，所以进度条往往会在一瞬间就完成了，在这种情境下，简化了加载的设计，很多移动产品转而使用加载图标来表示加载过程

　　以上为两种比较常用的加载方式，下面将具体介绍他们与移动产品结合的用法

　　页面加载机制

　　移动产品的信息都是*页面来承载的，页面的加载方案设计是交互设计师面临的一个重要难题

　　方案一：单页面整体加载

　　这种加载比较简单，一般运用在页面内容比较单一的情况下，所以直接一次性加载完所有数据后再显示内容

　　上海UI设计培训

　　上海UI设计培训

　　单页面加载失败的状态也比较好处理

　　方案二：单页面分块加载

　　这种方案的特点是，能让用户逐步看到内容，在这个渐进的过程中降低用户的焦虑心理

　　其中又可以分为，模块间有关联性的，先加载父内容，再加载子内容

　　如优酷，先把栏目加载出来，再加载各栏目的内容

　　上海UI设计培训

　　模块间没有绝对关联性的，可独自加载各自模块内容，根据请求的速度不同分别显示。这样处理有一定几率让用户在没完全刷出数据的情况下就能找到自己需要的功能，如大众点评、淘宝客户端

　　上海UI设计培训

　　上海UI设计培训

　　框架固定，内容更新的，可先把框架显示出来，再把各模块的数据各自加载显示，如各种iOS自带应用，云音乐

　　上海UI设计培训

　　上海UI设计培训

　　这种分模块加载的需要特别注意加载失败的状态，毕竟每个模块都提示加载失败，点击重试是很挫的一件事，可以根据信息的优先级来决定哪些数据失败了采用默认状态，哪些数据采用失败提示

　　方案三：跨页面加载

　　父页面&子页面 or 同一app内，页面间字段可以复用的，在加载子页面时不需要重新加载新数据

　　上海UI设计培训

　　上海UI设计培训

　　方案四：预加载

　　这种加载方式的特点是，在加载一个页面内容的同时，预测用户的下一步行为，并为他下一步需要使用的页面加载内容，使得他在下一步的操作中能立刻获取信息而不需要加载等待。

　　预加载提供给用户无缝的产品使用体验，使得用户在使用产品的过程中更直接流畅，没有被打断的感觉。

　　具体的例子有：

　　在浏览图集的时候，当看到*张的图片时，就自动后台加载第二第三第四张图片，用户浏览完*张图片切换到第二张时就不会有加载等待的过程

　　在浏览新闻列表时，就把每篇新闻的内容在后台进行预加载，用户选择看某篇新闻时，能立刻阅读到内容

　　但是这种方案需要面临很多的问题，*直接的是流量问题，因为会自动跑掉很多用户可能根本用不上的数据流量，所以一般情况下可以设定在wifi环境才采用这种加载模式。又或者设定加载规则，只把主要内容预加载，而部分次要内容可以在用户真的用到的时候才加载，例如预加载新闻正文的情况，可以只加载文本信息，图片信息等到用户进入内页才加载。这种预加载与分块加载结合的方式也普遍运用在各个场景。

　　另外，预加载也需要时间的，他只是不在客户端显示给用户，默默在后台运作而已，需要特殊考虑未加载完用户就使用到那些信息的情况，所以在做预加载设计时需要同时考虑另一种适合该情况的普通加载方式。

　　预加载需要根据具体的场景来进行设计，设定好信息优先级，综合考虑各种类型信息的具体大小流量，整体考虑预加载的方式，这些都是需要经过精心分析思考的。

　　随着网络环境的发展，预加载将成为以后产品普遍的加载方式，他提供给用户的无缝使用体验大大地提升了产品的可用性。

　　操作加载机制

　　除了页面的信息需要加载，页面内的操作也是需要*给服务器发送请求记录的

　　方案一：加载层

　　进行一个操作后，弹出模态的提示层，告知用户正在加载。

　　上海UI设计培训

　　采用模态的提示主要是防止用户在该过程中进行其他操作，导致当前加载出错。由于采用模态的提示，并且有可能因为网络原因导致长时间处于加载状态，建议提供一个“关闭”的操作，中止本次加载，恢复App可用状态。加载失败时可在当前