基础知识：聊聊交互设计三要素之细节设计

@黄红艺Designer ：交互设计三部曲终于写到最后了，今天聊聊交互设计的最后一个要素 —— 交互细节设计。本要素是在前两个要素指导下的设计实践，也是交互设计可视化与形象化的关键。

相对于前两个要素的完整性和系统性，第三个要素-交互细节设计，就显得琐碎和零散。根据交互设计由浅入深的渐进，交互细节可以分为布局、控件、适配、音效与动效、流（目光与手指的循迹）等等。接下来，我们就从布局开始聊一聊交互细节设计。

首先是布局。页面布局的首要目的就是为了页面功能的秩序感，使其在页面功能的分类以及轻重缓急的表现上更加合理，符合用户的心智模型，在用户使用的过程中，做到Don’t make me think !在交互细节设计中，页面布局与前两个要素之间的联系最为紧密。布局的依据就是通过卡片分类法获取的并通过流程设计优化过的交互设计信息架构。根据得到的信息架构，我们就可以知道页面导航应该采用什么样的导航方式，抽屉式导航还是标签式导航，以及每个页面应该有哪些相关元素需要体现和体现的程度。笔者在页面布局中主要坚持格式塔心理学的设计原则。

格式塔心理学派断言：人们在观看时眼脑共同作用，并不是在一开始就区分一个形象的各个单一的组成部分，而是将各个部分组合起来，使之成为一个更易于理解的统一体。当一个格式塔单元中包含了太多互不相关的单位，眼脑就会试图将其简化，把各个单位加以组合，使之成为知觉上易于理解的整体。格式塔理论明确地提出：眼脑作用是一个不断组织、简化、统一的过程，正是通过这一过程，才产生出易于理解、协调的整体。由此产生出了格式塔的一些基本原则(适用于布局和界面设计)：主要包括接近原则、连续原则、相似原则和闭合原则。

有兴趣的读者可以了解相关的知识。

在交互设计的页面布局中，要对不同的功能进行分类，并将其在视觉体验上分开，这就会用到格式塔心理学中的接近原则。同理，页面布局中，主要功能的凸显、次要功能的弱化。总的要求就是重点突出，详略得当。

其次就是控件。说到控件，更多的是指移动端应用，Android和ios应用。控件的作用有两个：一、采用同一类型的控件可以使得应用的风格鲜明、有个性，赋予应用一种独特的气质；二、以不同平台为基础的控件，在开发的时候减少工作量，做到拿来就用。控件包括按钮、开关、输入框和进度指示器。控件还可以根据自己的需要来自己定义。有些应用在开发的过程中，制作设计规范的同时，会制作相应的控件，便于在后期的开发过程中减少工作量。

△ 界面控件距离（来源网络）

其次，是不同终端之间的界面适配。包括不同分辨率手机之间的适配、移动端和PC端的适配。适配有一个更专业的名称叫响应式设计（Responsive Design）。响应式的设计分为三个等级，第一等级是最弱的适配，就是没有适配，手机端会等比例缩小，需要放大才能查看，但是，不会出现图片破损的状况。第二个等级是轻度适配，可以实现移动端的正常预览，文字大小不变，图片等比例缩小。第三等级是图片、文字、元素位置以及显示方式等等，都会随着显示屏幕的大小而适应屏幕显示，达到显示效果的最优化，提高用户体验。

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

响应式设计，第一要考虑兼容设备的范围以及相应的分辨率。这样就可以确定出几套交互稿和效果图。第二，根据不同的尺寸以及设计规范来设计交互原型。第三，对相应的元素和模块进行调整。在响应式设计中，有两点需要特别注意：1）菜单，PC端的页面足够大，能够将菜单全部展开来显示，但是移动端就要把菜单收起来或者以抽屉的形式放在左侧；2）图表，图表是做所有的页面中最难处理的。目前笔者还没有找到通用的有效方法，多采用PC与移动端不同的设计，PC上采用列表，移动端采用内容单元的形式，即将列表中的一个项目单独成为一个内容单元，以瀑布流的形式向下滚动。但是这种方法就丧失了列表的一项重要功能，就是项目之间的对比。

再次，就是音效和动效。智能手机满足了人们视觉和触觉，音效则实现了听觉的交互。目前，音效设计的主要作用还是现在动效设计师已经单独的独立出来作为产品开发中的一环。在扁平化风行天下的情况下，优雅的动效设计是更多应用的追求。

目前，有很多动效制作软件各有优劣点，笔者比较倾向于AE，因为AE设计出来的效果细腻，细节丰富，你想要什么效果 AE都能实现，但是程序上能不能实现就难说啦。AE缺点就是不可交互+精准度很难控制。正式因为效果细腻丰富，精准度的控制才是考验动效设计师水平的试金石。动效学习中，可以参考Google Material Design设计规范中的动效设计的详细说明：

另外，网上关于动效的设计案例很多，多看、多练才能提高。在《移动设计》作者总结了动效设计的相关原则：

运动形变，万变不离其宗（运动和形变之间的结合衍生）

节奏速度，掌控曲线时长

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

结合操作，关联轻量自然

点到即止，切记过犹不及

尊重习惯，谨慎进行创新

快速原型，多方沟通权衡

最后，就是流。流，即目光和手指的循迹，是信息在设备与人之间的流转，实现人与设备之间的触发、影响和反馈交互。整个信息与反馈之间的流转包括视线流和操作流。视线流的的形成是根据页面布局以及页面中的元素特点来流动的，对比越强烈越容易引起人的注意。

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

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!