总监经验！视觉设计师必须知道的交互设计模式

很多人在这个信息爆炸的移时代，更想看到一些谓的「干货」，干货到是么，可直接拿来上手的是干货吗？还是需要你经过判断和思维转再处得到的属于自己的启发？利本篇交互模式家可以好的思考，归纳。

一、为什么学习交互设计模式？

 dyj 时一句口：人多胆，多产，形的人法多，那的产就会多。虽然这一种错误的思，但我们可以换角度理解：脑中的知识验越多，就能多的场景中运用自如。所以我们需积累我们脑中的知识池子——库。当我们了一的思维方式之后，我们需依靠脑中的知识、验帮我们专业的事。

• 如你想成为专业匠，那你定要知不手法和不工具能够刻画成千上不纹路、物件，需要日积月累。
• 如果专业的伦敦「的哥」，那完全熟悉，市中半径2.5公里范围内，超过2500条街区的道，能够到达客户去的任何一此范围内的角落。
• 如果你要成为资深的设计师，那你就要知道非多的模式和形式，一般我们称交互模式，和视觉形式。只有当你积累足够多同的案例经验之后，你才够成为专的行。

二、什么是交互设计模式

Alan Cooper 在 about face4 是这么解释：交互设计模是捕捉有效设计案，并将其应用于类似问题法，尝试将设计理论形化。强调是设计问题解决法。

我们日常使用产品的过程中常会接触到一些基础的单元，我们称之交互单元，研究过发者指南的朋友肯知道，iOS 安卓会一些样式区别，但功能相同的交互单元，比如关、选择器、对话框。

也同样的手势操作规范：点击、滑动、按，由这些交互单元组合的交互单元。

比如点击某图标，页面底部滑出一组件 Action Sheet（动作单/动作面板/行动列表），按钮基本单元， Action Sheet 则一复合单元。这些许许多多的交互单元通过不同的形式结构组了多不同的复合单元，以便于满足不同的用户、任务、需求、境、操作以及反馈。

三、交互设计模式如何使用

使用之，我们先思考以下几问题：

• 我设计背景是什么，选择那交互设计模适合前场景、任务或者流程？
• 这交互设模式几种不同的形式，能承载哪些不同的内？
• 该交互模式的限性是么？
• 该互模式是否在产品其他地方使用？在什么情境下？需要做相应整吗？

进行个案例进行分析。

案例1：Action Sheet

• 移动备的屏幕可以说是寸土寸金，所以 action sheet 为了承载更多内容，并减少对用户的干扰，它呈现了当前页面相关的部操作和内容。用户能够通过点击按钮唤出该控件。
• 般选项较少时，我们选择列表形，选项较多时为了避免列表滚动造成误操作议选择宫格形。要注意是 action sheet 这个组件可支持击立即跳转交互，并不支持输入，也不能用在表单。
• 它能防止用户误操作。
• 实卓有类似的控件，但是他没有取消按钮，因为卓有物返按钮，同时 iOS 有些应在使的过程中，没有将取消按钮放在，甚至有些在右上角放置了一个闭按钮。
• 它经常被各种软件进行自定义控件设计，但是该互模式无法承载太内容，因为身就是为让用户快速对当前页面进行额外的操，所赋予用。

案例2：图标按钮

第张和第张界长常相似控件，都是过右上个功能图标过击为后触发。那么为什么要把那么多信息都成到个入口，是为如信息在单个页承载过多会导致许多问题：目标不明确，用户决策成本高，页结构混乱等等。所以为了解决该问题，这里应运而生使用了该交互模。

那么问题又了，这样的交互模式针对的问题太宽泛，难道什么东都可以往里塞吗？我的集入口只能固的置吗？什么的取消按钮，的却呢。

交互设计模式会现这些情况：

• 相同的功能图标可能发不同的交互行信息展示。
• 即同的功图标，承载的信息可是相似的。
• 图标的位置、形式以及所触的内容是由目标所决定的。
• 根据内容的长度可以考虑隐藏一部功能，例如取消，用户心智已可以理解点击空取消。

互模式需要在相应的场或者情境中去，脱离情境的互模式是不客观的。你现我们常说产品有不同的和风，么决定产品的基上是由表现形式和互模式来共同决定的，互模式无法像乐高样固定的拼凑，而更像是橡皮泥，在一定的规则下能够进行样的使用。

案例3：表单

我们通将左侧的拉表单叫做为「拉菜单」，那么我们知道的是：

• 下拉单也表单的一种。
• 单行表单可进行拼接，成为一个列表。
• 单行表单能有几种形式：只有左有文字；左有文字右有说明还有箭头；左有标题右只有箭头 ；当表单还以放置 Picker、Segment Control、Radio Button 等控件，还以有双行表单等。
• 表不仅仅在个page上静存在，还可以通过交互行为动存在。
• 这样形单表单不能够支持左滑删除。
• 箭的表单可以行页面跳转，但不能展此表单。
• 拉菜单没有箭头，但我们明显知道，当我进行点击后，页面即将执行对此条件进行筛的结果展示。
• 果是一个列表么安卓长按以删除，iOS 左滑以删除。

上是简单对上图中的交互模式进行一个分析，两个界面中的信息，在形式上非接，但是同的信息组合和结构，产生了同的产行为和户预期，为了解决同的问题而现的同的模式。如果我们对这些模式够了解，就无法针对同的目标作相应的反馈。

我道你生病，但是我不道你得哪种病，我没办法医治你。

知道你得了哪种病，但是不知道给你吃什药能让你康复。

总结

越来越多的交互计模式应运而生，需要不断的去收集，形成的经验。在不同情下对交互模式进行类归纳，等需要使用的候即使不能快速应对也能够从中找或者衍生出一些符当前情的交互计模式。

欢迎关注作者微信公众号：「应谋鬼计」

图片素材作者：Daniel Timofte