原文链接 ： 不得不懂得交互设计三要素之叁——交互细节设计
基于information architecture 和solution features 已经确定下来的前提，实现交互设计可视化与形象化。交互细节可以分为布局、控件、适配、音效与动效、流（目光与手指的循迹）等等。平面设计是如何表达一个事物，而UI设计是如何让用户更好使用一个事物，表达层面令人费解则卡在了使用的第一步。UI论坛有人吐槽:“不要用平面设计思维做UI”，然而许多UI设计师往往缺少平面设计最基本的意识。
1. 布局
页面布局的首要目的就是为了页面功能的秩序感，使其在页面功能的分类以及轻重缓急的表现上更加合理，符合用户的心智模型，在用户使用的过程中，做到Don’t make me think !在交互细节设计中，页面布局与前两个要素之间的联系最为紧密。布局的前提是：有好的Information Architecture, 同时有card sorting 来反应用户是如何理解各个信息之间的内容关系。
布局的依据就是通过卡片分类法card sorting获取的并通过流程设计优化过的交互设计信息架构。根据得到的信息架构，我们就可以知道页面导航应该采用什么样的导航方式navigation pattern，抽屉式导航还是标签式导航，以及每个页面应该有哪些相关元素需要体现和体现的程度（display patter and information hierarchy）。笔者在页面布局中主要坚持格式塔心理学的设计原则。
格式塔心理学派断言：人们在观看时眼脑共同作用，并不是在一开始就区分一个形象的各个单一的组成部分，而是将各个部分组合起来，使之成为一个更易于理解的统一体。当一个格式塔单元中包含了太多互不相关的单位，眼脑就会试图将其简化，把各个单位加以组合，使之成为知觉上易于理解的整体。格式塔理论明确地提出：眼脑作用是一个不断组织、简化、统一的过程，正是通过这一过程，才产生出易于理解、协调的整体。由此产生出了格式塔的一些基本原则(适用于布局和界面设计)：主要包括接近原则、连续原则、相似原则和闭合原则。 Visual Perception
Gestalt principles of perception：Gestalt psychology attempts to understand psychological phenomena by viewing them as organised and structured wholes rather than the sum of their constituent parts. Gestalt psychology was applied to visual perception
01. Similarity：相似性原则
things which share visual characteristics such as shape, size, color, texture, or value will be seen as belonging together in the viewer’s mind. Similarity is influenced by the shape, size and color of the elements. When you mix objects with high degrees of similarity to each other with a group of dissimilar objects, the brain then devotes time and energy to creating a link between them so that it can try to understand their relationship with each other.
同时，如果想让一个物体突出显示，只需让他现实的跟其他物体不同
02. Continuation
Continuation is the principle through which the eye is drawn along a path, line or curve, preferring to see a single continuous figure than separate lines. This can be used to point towards another element in the composition, and is seen where a line is cut through one object, often in a curve, aligning perfectly with a secondary element. Good example is: arrow and point
03. Closure
Closure is a common design technique that uses the human eye's tendency to see closed shapes. Closure works where an object is incomplete or the interior space of an element is not fully closed, but the viewer perceives a complete shape by filling in the missing information. This technique is often associated with stenciled artwork, but is also closely associated with logo forms.
Closure works
best with objects that are recognizable.
For example, an outline of a triangle that slowly has pieces taken away is still recognizable as a triangle even when down to a bare minimum of pieces. Complex objects are trickier for the mind to complete.
04. Proximity 这个是最强的信号，比 similarity 和 closure 都要强
Objects or shapes that are close to one another appear to form groups". Even if the shapes, sizes, and objects are radically different, they will appear as a group if they are close together. 聚合性，物体在物理位置上相近，会让人想group them together。
1 + 2 = as one group
3 + 4 = as another group
Similarly, on the left, three groups of dots in three lines. What happens with the evenly spaced dots?
The principle of proximity or contiguity states that things which are closer together will be seen as belonging together
05： SYMMETRY AND ORDER对称性
Symmetry gives us a feeling of solidity and order, which we tend to seek. It’s our nature to impose order on chaos. This principle leads us to want balance in composition, though our compositions don’t need to be perfectly symmetrical to be in balance.
06：Figure/ground
refers to the relationship between positive elements and negative space. The idea is that the eye will separate whole figures from their background in order to understand what’s being seen. It’s one of the first things people will do when looking at any composition.
可以用来突出figure，弱化background
二. 合理的布局原则
1. 分类： 在交互设计的页面布局中，要对不同的功能进行分类，并将其在视觉体验上分开，这就会用到格式塔心理学中的接近原则。
2. hierarchy：同理，页面布局中，主要功能的凸显、次要功能的弱化。总的要求就是重点突出，详略得当。
3. 7+-2 原则：无论分成几类，但是不要超过7+-2 个项目让用户去选择。过多的选择会cause attention distribution，造成用户注意力难以集中。limited attention got divided. 不要让用户难以选择。
三。布局的案例
1. 如何对齐
a. 信息分组 reasonable category
先从一个酒店预定成功通知消息案例来看，通知信息文字平铺直叙，并未合理分组（左图）。图片部分上方酒店评价、信息地址和电话操作按钮剧中对齐，酒店名成为了一个小标题。做适当调整后（右图），使得正文通知、价格和时间字段分组明确。电话按钮同酒店信息组对齐，使得图片区域的文字和操作信息更为整体。
同时，需要user 注意的内容：price，date got lighted。
b. 居中对齐or左对齐
信息分组后，居中排列每组信息的小标题，模块感增强，使得阅读标题和每个组信息中产生视线的跳跃。小标题和每组信息统一居左对齐，更符合快速浏览和操作。比如在需要完成注册任务的网页中，标题居左更有利于视线快速向下流动，使得操作路径更顺畅。
2. 如何有重点
a. 大小对比
前面谈了如何组织信息，那如何使主要信息更为有重点？首先可以通过拉开大小比例，拿一张活动海报来举例。5米处能看到什么？海报的大图案渲染气氛的整体感受；3米处能看到什么？活动主标题；1米近距离又能发现什么？具体信息和时间等。拉开主次信息的尺寸大小对比，从空间距离上，使得观众接受信息传达有了先后。观众近距离阅读，信息有效传达的顺序同理适用。
b. 并非均分
看似没有什么差错的信息布局（左图），为什么始终差了一些什么？由于细节之处并非理解信息主次。最初设计稿追求绝对的均分，导致信息较散，没有“组”的紧凑感。页面元素中的左右间隔往往也会被忽视，如（左图）中帐号头像与页面的左边距=帐号名称之间间隔，使得页面中间区域的信息散于页面边界。标题和发布时间也是通过设计软件的居中对齐功能快速对齐，具有平面设计意识的排版不仅是设计软件中的文本框绝对居中对齐，需要对信息分组与主次深入思考，避免机械的均分对齐。
1） 在某电台app概念设计中，分享功能支持获取歌词并同时拉取专辑封面配图，允许用户上传照片、写下当时的心情或是用语音表达。最初设计时的界面交互框架（左图）默认功能在“写下心情”，“加图片”和“录语音”的功能重要性并列，感受上是个功能强大的分享界面，告诉用户你有三种选择配心情内容的方式。讨论后优化框架（右图），默认拉取专辑封面图，支持上传图片入口置于右上角，默认歌词展示在封面图上可点击编辑，整个页面可视化了最终分享出去的样式，所见即所得。设计优化后，让整个操作有了重点。可以直接在分享预览图上操作，缩短了分享路径，最重要带给用户轻量化的操作感受。
2） 更优雅的操作
在手机app上后期处理一张照片时，通常是操作区域和照片分开。Black 的处理照片主界面的操作有趣而直观，再调整曲线或加暗角操作都在图片层上，整个界面的导航也突破了传统控件模块，使得整个app在直观又易操作的基础上，彰显独特的态度和个性。
![]()
四 控件和设计规范 design guideline
参看视觉规范案例 http://huaban.com/boards/26801808/ （花瓣的收集）
控件的作用有两个：
1） 采用同一类型的控件可以使得应用的风格鲜明、有个性，赋予应用一种独特的气质；
2）以不同平台为基础的控件，在开发的时候减少工作量，做到拿来就用。
控件包括按钮button(primary,secondary,normal status, disable status, active status, )、菜单navigation/menu，开关switch、radio、输入框input和进度指示器indicator。控件还可以根据自己的需要来自己定义。有些应用在开发的过程中，制作设计规范的同时，会制作相应的控件，便于在后期的开发过程中减少工作量。
![]()
五 流。
流，即目光和手指的循迹，是信息在设备与人之间的流转，实现人与设备之间的触发、影响和反馈交互。整个信息与反馈之间的流转包括视线流和操作流 visual attention flow and operation flow。视线流的的形成是根据页面布局以及页面中的元素特点来流动的，越大，对比越强烈越容易引起人的注意。
从操作焦点到视觉焦点的引导更多的是通过动效设计来实现。在搜索的过程中，从搜索结果到翻页就形成了视觉的引导流，当点击翻页以后，页面会显示在顶部，引导用户从头开始阅读，这就是从操作焦点到视觉焦点的反馈流。在界面设计过程中，
要充分考虑视觉焦点到操作触点的引导流，从操作触点到视觉焦点的反馈流。
visual should lead operation
operation interaction should give feedback for the visual attention
视觉流要符合用户的视觉习惯，或者引导用户去浏览产品想让用户浏览的内容。操作流需要考虑在任务的背景下，系列操作的连贯与自然可以引导的手指毫不费力地进行点击。另一方面要顺应用户的手指点击习惯，保证足够的容错性，不要让用户用自然的操作却达到了非预期的目标。在我们操作一款应用的时候，会因为网络、内存等原因，造成反应不及时，用户会产生多次点击的情况，如果多次点击的位置出现其他功能操作的button，就会出现误操作，严重降低用户体验。流又提供了从另一个角度来审视页面布局的新视野、新方法。在以用户体验为中心的设计风潮中，这种方法会越来越受到重视。
但是，还需要注意image blindness 和banner blindness 。用户往往对于大的图片，没有文字提示的banner会以为是广告，而无法进行点击，所以也避免这一现象的出现。
六: 手势
交互设计的细节还包括手势设计
小结
提升平面设计基础能力，在生活中有意识的观察设计、思考分析、养成视觉洁癖。逛商场，导视系统是否能起到不迷失目的地的作用；地铁广告，重点信息是否能瞬间吸引过客的注意力； POS机打出的各种小票，怎么在方寸之地合理安排信息；阅读电子书，字号行距是否适合长时间阅读。如果自己设计将会做出怎样的改变。
平面设计的基本原理
原地址：知乎问答
