交互设计三要素都有哪些？

交互式设计三部曲终于写完了，今天就来谈谈交互式设计的最后一个要素——交互式细节设计。这一元素是前两个元素指导下的设计实践，也是交互设计可视化和形象化的关键。前期回顾：“基础知识！与前两个要素的完整性和系统性相比，我们来谈谈交互设计三要素的信息架构和流程设计。第三个要素——交互细节设计是琐碎和分散的。根据交互设计由浅到深的渐进，交互细节可分为布局、控制、适应、音效和动态效果、流动（眼睛和手指的跟踪）等。接下来，让我们从布局开始谈谈互动细节的设计。首先是布局。页面布局的主要目的是使页面功能的秩序感，使其在页面功能的分类和优先级方面更加合理，符合用户的心理模型，在用户使用过程中实现“tmakemethink!页面布局与前两个元素在交互细节设计中的联系最为密切。布局的基础是通过卡分类法获得并通过流程设计优化的交互设计信息架构。根据获得的信息架构，我们可以知道页面导航应该采用什么样的导航方法，抽屉导航或标签导航，以及需要反映和反映每个页面的相关元素。在页面布局中，作者主要坚持格式塔心理学的设计原则。格式塔心理学派断言，人们在观看时眼睛和大脑的共同作用不是从一开始就区分图像的每个单一部分，而是将每个部分结合起来，使其更容易理解。当一个格式塔单元包含太多不相关的单位时，眼睛和大脑会试图简化它，并将每个单位结合起来，使它成为一个容易理解的整体。格式塔理论明确指出，眼睛和大脑的作用是一个不断组织、简化和统一的过程。正是通过这个过程，它产生了一个容易理解和协调的整体。由此产生了格式塔的一些基本原则(适用于布局和界面设计)：主要包括接近原则、连续原则、相似原则和闭合原则。有兴趣的读者可以了解相关知识。在交互设计的页面布局中，应对不同的功能进行分类，并将其与视觉体验分开，这将利用格式塔心理学中的接近原则。同样，在页面布局中，主要功能的突出和次要功能的弱化。一般要求是重点突出，细节略合适。二是控件。说到控件，更多的是指移动应用、Android和ios应用。控制器有两个功能：一是使用相同类型的控制器可以使应用程序具有独特的风格和个性，赋予应用程序独特的气质；2、基于不同平台的控制器可以减少开发过程中的工作量，并使用它们。该控件包括按钮、开关、输入框和进度指示器。控件也可以根据自己的需要定义。有些应用在开发过程中，在制定设计规范的同时，会制作相应的控件，以减少后期开发过程中的工作量。△接口控件距离(源网络)其次是不同终端之间的接口适应。包括不同分辨率手机、移动终端和PC终端之间的适应。有一个更专业的名字叫响应式设计（ResponsiveDesign）。响应式设计分为三个等级。第一级是最弱的适应，即没有适应。手机的比例会缩小，需要放大才能查看。然而，图片不会损坏。第二个等级是轻度适配，可以实现移动终端的正常预览，文本大小不变，图片等比例缩小。第三个层次是图片、文本、元素位置和显示方法，它们将适应显示屏的大小，以优化显示效果，改善用户体验。△响应设计(源网络)响应设计，首先要考虑设备的范围和相应的分辨率。这样就可以确定几套交互稿和效果图。二是根据不同的尺寸和设计规范设计交互原型。第三，调整相应的元素和模块。在响应设计中，有两点需要特别注意：1）菜单。PC端的页面足够大，可以展开所有菜单，但移动端应以抽屉的形式收集或放置在左侧；2）图表是所有页面中最难处理的。目前，笔者还没有找到一种通用有效的方法，主要采用PC和移动终端的不同设计，PC采用列表，移动终端采用内容单元的形式，即列表中的一个项目以瀑布流的形式单独成为内容单元向下滚动。但这种方法失去了列表中的一个重要功能，即项目之间的比较。第三，是音效和动效。智能手机满足了人们的视觉和触觉，音效实现了听觉交互。目前，音效设计的主要作用是动效设计师作为产品开发的一部分已经独立出来。优雅的动效设计是更多应用的追求，在扁平化风行世界的情况下。目前，动态生产软件有很多优缺点。作者更喜欢AE，因为AE设计的效果细腻，细节丰富。AE可以实现你想要的任何效果，但很难说它是否可以在程序上实现。AE的缺点是不可互动 精度难以控制。由于效果细腻丰富，精度控制是测试动态设计师水平的试金石。在动效学习中，可以参考GoogleMaterialdesign设计规范中动效设计的详细说明:“中文版来了！新版《MaterialDesign官方动效指南》《中文版来了！新版MATERIALDESIGN官方动效指南(二)“中文版来了！新版MATERIALDESIGN官方动效指南(三)此外，网上还有很多关于动效的设计案例，多看多练才能提高。在《移动设计》中，作者总结了动态效果设计的相关原则：运动变形、变形（运动变形之间的结合衍生）节奏速度，控制情感故事的曲线时间、拟议、隐喻、品牌组合操作、相关轻自然点，记住过多不尊重习惯，仔细创新快速原型，多次沟通权衡最终，是流动。流动，即眼睛和手指的跟踪，是设备与人之间的信息流动，实现人与设备之间的触发、影响和反馈交互。整个信息和反馈之间的流通包括视线流和操作流。视线流的形成是根据页面布局和页面中的元素特征流动的，对比度越强，越容易引起人们的注意。△页面布局视觉热图(来源网络)说到这里，我们不得不把百度和谷歌拉出来。通过研究发现，用户对搜索结果的查看集中在前几篇文章上，从上到下进行阅读。谷歌的搜索结果是，这种布局符合用户的视觉流。当用户从上到下浏览时，他们自然会翻到下一页，所以底部是翻页操作。百度的设计也符合这一规律，但百度以竞价的方式将用户的视觉热图集中在广告上，这也是百度竞价排名受到批评的原因。因此，每个人都形成了用百度搜索的习惯，直接跳过前几个，从后面开始。△视觉热力图(来源网络)从操作焦点到视觉焦点的引导更多的是通过动态设计来实现的。在搜索过程中，从搜索结果到页面形成视觉引导流。点击页面后，页面将显示在顶部，引导用户从零开始阅读，这是从操作焦点到视觉焦点的反馈流。从操作触点到视觉焦点的反馈流，在界面设计过程中应充分考虑从视觉焦点到操作触点的引导流。视觉流应符合用户的视觉习惯，或引导用户浏览产品想要用户浏览的内容。在任务背景下，操作流需要考虑系列操作的连贯性和自然引导手指的轻松点击。另一方面，要符合用户的手指点击习惯，保证足够的容错性，不要让用户用自然操作达到意想不到的目标。当我们操作一个应用程序时，由于网络、内存等原因，反应不及时，用户会多次点击。如果其他功能操作的button出现在多次点击的位置，就会出现误操作，严重降低用户体验。流提供了从另一个角度审视页面布局的新视野和方法。这种方法在以用户体验为中心的设计趋势中会越来越受到重视。此外，交互设计的细节还包括手势设计等。互动细节的设计很多，很繁琐，不管你做得多么细致。所有这些都需要时间和心去积累。△最后推荐大家看看傅小贞、胡甲超、郑元拢写的《移动设计》，里面有很多设计细节，值得一读。作者从中获得了巨大的收获。交互设计的三个要素终于写完了，文章从宏观的角度阐述了交互设计的三个要素。本文总结了作者在设计过程中的一些设计方法和要点，并没有给出三个要素的具体实施方法。在后期，分别介绍了作者所掌握的设计方法和技巧。希望和大家一起进步！