产品设计要学什么知识-基础！我们来谈谈交互设计三要素的详细设计

@黄红艺Designer：交互设计三部曲终于完结了。 今天我们来聊聊交互设计的最后一个要素——交互细节设计。 该元素是前两个元素指导下的设计实践，也是交互设计可视化、可视化的关键。

往期回顾：“基础知识！” 我们来谈谈交互设计的三要素：信息架构和流程设计”

与前两个要素的完整性和系统性相比，第三个要素——交互细节设计就显得琐碎和碎片化。 按照交互设计由浅入深的递进，交互细节可以分为布局、控制、适配、音效和动效、流程（视线和手指的追踪）等。接下来我们从交互设计细节开始从布局。

首先是布局。 页面布局的首要目的是给页面功能提供一种秩序感，使页面功能的分类和优先级更加合理，符合用户的心理模型，在用户使用的过程中，不要别让我思考！ 在交互细节设计中，页面布局与前两个元素关系最为密切。 布局的基础是通过卡片分类获得并通过流程设计优化的交互设计信息架构。 基于获得的信息架构，我们可以知道页面导航、抽屉式导航还是选项卡式导航应该采用什么样的导航方式，以及每个页面上应该体现和体现哪些相关元素。 作者在页面布局上主要遵循格式塔心理学的设计原则。

格式塔心理学派认为，当人们观看时，他们的眼睛和大脑一起工作，并不是一开始就区分图像的各个组成部分，而是将各个部分组合起来，使其成为一个更容易理解的整体。 当格式塔单元包含太多不相关的单元时，眼睛和大脑会尝试简化它，并将各个单元组合成一个可感知可理解的整体。 格式塔理论明确指出，眼睛和大脑的功能是一个不断组织、简化和统一的过程。 正是通过这个过程，产生了一个易于理解且协调的整体。 由此得出了格式塔的一些基本原则（适用于布局和界面设计）：主要包括邻近原则、连续原则、相似原则和封闭原则。

有兴趣的读者可以学习相关知识。

在交互设计的页面布局中，需要对不同的功能进行分类，并在视觉体验上进行区分，这利用了格式塔心理学中的邻近原则。 同样，在页面布局上，突出主要功能，弱化次要功能。 总的要求是突出重点、细节得当。

第二是控制。 说到控件，更多的是指移动应用、Android和ios应用。 控件有两个作用：一是使用同类型的控件可以使应用程序与众不同、个性化，赋予应用程序独特的气质； 其次，使用基于不同平台的控件可以减少开发时的工作量。 收到后请尽快使用。 控件包括按钮、开关、输入框和进度指示器。 也可以根据自己的需要定义控件。 在一些应用程序的开发过程中，在制定设计规范的同时，也会制作相应的控件，以减少后期开发过程中的工作量。

△ 接口控制距离（源网络）

其次，是不同终端之间的接口适配。 包括不同分辨率手机之间的适配，以及移动终端和PC端之间的适配。 适配有一个更专业的名字叫响应式设计。 响应式设计分为三个层次。 第一级是最弱的适配，即不适配，手机会按比例缩小，需要放大才能查看，但图片不会损坏。 第二个层次是光适应，可以在移动端实现正常预览。 文字大小保持不变，图片缩小。 第三层是图片、文字、元素位置和显示方式等，会根据显示屏的大小来适应屏幕显示，优化显示效果，提高用户体验。

△ 响应式设计（来源网络）

对于响应式设计，首先要考虑的是兼容设备的范围以及对应的分辨率。 这样就可以确定几套交互的草图和效果图。 其次，根据不同尺寸和设计规范设计交互原型。 三是调整相应要素和模块。 在响应式设计中，有两点需要特别注意：1）菜单。 PC端的页面足够大，可以显示所有菜单，但在移动端，菜单必须折叠起来或者以抽屉的形式放在左侧； 2）图表。 图表是所有页面中最难处理的。 目前，笔者尚未找到通用有效的方法。 它们大多针对PC端和移动端采用不同的设计。 PC端采用列表的形式，移动端采用内容单元的形式。 也就是说，列表中的一项单独成为一个内容单元，以瀑布流的形式。 向下滚动。 但这种方法失去了列表的一个重要功能，即项目之间的比较。

再次强调的是声音效果和动作效果。 智能手机满足人们的视觉和触觉，音效实现听觉交互。 目前，声音设计的主要作用仍然是动作设计师独立出来作为产品开发的一部分。 随着扁平化风靡全球，优雅的动感设计是更多应用的追求。

目前动效制作软件有很多，各有优缺点。 我更喜欢AE，因为AE设计的效果细腻，细节丰富。 AE可以实现任何你想要的效果，但是能否通过编程来实现就很难说了。 。 AE的缺点是不具有交互性，精度难以控制。 官方表示，由于效果细腻丰富，精确的控制是检验动效设计师水平的试金石。 在学习动效时，可以参考Google Material Design设计规范中关于动效设计的详细说明：

“中文版来了！” 新版Material Design官方动效指南》中文版来了！ 新版MATERIAL DESIGN官方动作指南（二）》中文版来了！ 新版MATERIAL DESIGN官方动效指南（三）》

另外，网上也有很多关于动效的设计案例。 只有多读书产品设计要学什么知识，多练习，才能进步。 在《Mobile Design》中作者总结了动效设计的相关原则：

运动和变形，一切变化都忠于其根源（源于运动和变形的结合）

节奏速度、控制曲线持续时间

情感故事、拟物化、隐喻、品牌

与运营结合，关联轻量、自然

当你达到目标时就停下来，记住走得太远是不够的

尊重习惯，谨慎创新

快速原型设计、多方沟通和权衡

终于有了流量。 流吉祥物设计，即眼睛和手指的追踪，是设备与人之间信息的流动，实现人与设备之间的触发、影响、反馈交互。 整个信息与反馈的流程包括视线流程和操作流程。 视觉流的形成是基于页面的布局和页面上元素的特征。 对比度越强，越容易吸引人们的注意力。

△ 页面布局可视化热力图（来源网络）

说到这里我们就不得不拉出百度和谷歌来谈谈了。 通过研究，我们发现用户会关注前几个搜索结果，并从上到下阅读。 Google的搜索结果就是这样布局的，以适应用户的视觉流程。 当用户从上到下浏览完后，自然会翻到下一页，所以最下面是一个翻页操作。 百度的设计也符合这个规则，只不过百度通过竞价来广告用户视觉热力图的焦点。 这也是百度竞价排名被诟病的原因。 因此，大家都养成了在百度上搜索的习惯，跳过前几项，从末尾开始搜索。

△ 搜索结果可视化热力图（来源网络）

从操作焦点到视觉焦点的引导大多是通过动作设计来实现的。 在搜索过程中，从搜索结果到翻页形成视觉引导流程。 点击翻页时，页面会显示在顶部，引导用户从头开始阅读。 这就是从操作焦点到视觉焦点的反馈流程。 在界面设计过程中产品设计要学什么知识，要充分考虑从视觉焦点到操作触点的引导流，以及从操作触点到视觉焦点的反馈流。

视觉流程要符合用户的视觉习惯，或者引导用户浏览产品希望用户浏览的内容。 操作流程需要在任务上下文中考虑，一系列连贯、自然的操作可以引导手指毫不费力地点击。 另一方面，要符合用户的手指点击习惯，并保证足够的容错能力，以免让用户通过自然的操作达到意想不到的目的。 当我们操作应用程序时，由于网络、内存等原因，会导致响应不及时，用户会多次点击。 如果多次点击的地方出现其他功能操作的按钮，就会出现误操作。 严重降低用户体验。 Flow 提供了从另一个角度看待页面布局的新视角和新方法。 在以用户体验为中心的设计趋势中，这种方法将变得越来越重要。

此外，交互设计的细节还包括手势设计等。 交互细节的设计非常复杂复杂ip形象，无论你多么细致，也永远不过分。 这一切都需要时间和奉献精神来积累。

△ 移动手势示例（来源网络）

最后推荐大家看一下付小珍、胡家超、郑元龙写的《移动设计》。 其中包含很多设计细节的解释，非常值得一读。 笔者从中收获颇多。

交互设计三要素终于写完了。 文章更多地从宏观的角度解释了交互设计的三要素。 文中概述了作者的一些设计方法和设计过程中的要点，但没有给出这三个要素的具体实现方法。 稍后将按元素分别介绍作者所掌握的设计方法和技巧。 希望与大家共同进步！

“八月最受欢迎文章”

一个常见的问题是：“为什么你的设计作品看起来不专业？” ”自学的正确姿势：“光是抄袭是不行的！ 平面设计师在业余时间应该如何自学？ 》大家最喜欢的中文字体：《超实用！ 有哪些免费的中文字体可以下载？ 》

【优舍网原创文章提交邮箱：】

================关于================

“优设网”是国内最受欢迎的网页设计师学习平台，专注于分享网页设计、无线设计和PS教程。

【精选】

设计师必读的100本书：史上最全面的设计师书籍导航：

设计微博：热门微博@优秀网页设计，拥有150万粉丝。 欢迎关注获取网页设计资源，下载顶级设计素材。

设计导航：全球顶级设计网站推荐，设计师必备导航：