回音专栏丨来自行业最前线的设计大咖们的独家MAX干货聚合！
库伯学习圈，
从行动中归纳出经验，
把经验升华为规律，
再用规律指导行动。
……
交互设计中的规律
昨天讲了库伯学习圈和正确的学习步骤，应该从行动中归纳出经验，把经验升华为规律，再用规律指导行动。今天就来讲讲我在学习交互设计时，是怎样总结出一些有用的规律的，你同样也能用这种方法学习别的知识。
行动中归纳经验
我们平时都会使用一些电脑软件和手机APP，你有留意到它们的界面和操作吗？
比如iPhone的系统设置里，有一个WiFi设置界面，相信大家都很熟悉。
在现实世界中，我们是使用按下按钮和拨动开关来启动和关闭电器的，那在手机里我们如何开关WiFi呢？其实也是模拟拨动开关的效果，我们点击界面最顶部的绿色开关，就会有一个拨动的小动画，开关会从绿变白，WiFi也就关掉了。
这里有一个概念，叫做 交互模型单元（Interaction Module Unit），简称IMU，这是我给软件交互中这种简单的交互操作起的名字。比如开关操作，这种左边有开关操作的功能名称，右边有一个点击会切换的开关控件，就构成了一个IMU。
当你记住了这个IMU可以作为功能开关之后，你下次需要自己设计功能开关的时候，你就可以用上。比如QQ音乐中就有同样的控件：
看到了吧？上图中的“定时关闭”、“仅WiFi联网”和“流量提醒”就是和刚刚的WiFi开关同样的功能开关式的IMU。
可能你会有疑问了，为什么你要称它为 交互模型单元（IMU）呢？它明明就是一个简单的控件而已，叫控件就好了嘛。
问得好，控件当然是一种IMU，但是IMU并不是仅仅包含控件这种单位，它还包含更多的内容。
比如在下图QQ音乐的首页中，你应该在哪里放入一个系统菜单，里面包含个人中心和各种设置呢？它的交互操作是怎样的？里面的内容该如何布局比较好？
于是你就发现了，QQ音乐的设计师在界面最左上角放了个三条横线的按钮，点击之后就能展开菜单了。
也就是刚才看过的包含三个开关的那张图，它其实是从界面的最左边滑出来的一整个菜单，菜单里是从上到下的列表式布局，每一项都可以点击跳转到下级界面进行选择或者是直接进行开关操作，最下面还有设置界面的入口和退出登录按钮。
经验升华成规律
于是你就可以把三条线的菜单按钮和上面的这整个滑出的菜单作为一个IMU，把它作为菜单的一种展示形式存进你的交互知识库里。
存进去之前，你还需要思考几个问题：
-
什么情况下使用这个菜单IMU比较合适？（A:菜单中需要展示的内容比较多的时候）
-
这个菜单IMU适合展示什么类型的内容？（A:从上到下的列表式结构比较合适）
-
它有什么局限性？（A:占用面积比较大，过场动画幅度大，更适合沉浸式的操作）
-
如果不用从左滑入的动画，换成从上往下滑入会怎样？（A:可以改成从上往下或者从下往上滑入，但是也要相应地把菜单右侧的留白改成在下面或者上面）
只有把这几个问题思考清楚了，下次等你需要用到这个菜单IMU的时候，你才能使用的好。
比如问题4如果你想明白了，你就完全可以做出下面的这种菜单：
乍看起来好像和刚才那个菜单IMU不一样，但是不就是换成从下往上滑入的方式嘛！里面的内容同样还是列表式结构，留白改为放上面了，下面还多了一个“关闭”按钮。
为什么下面要多一个关闭按钮？
刚才那个左侧的菜单IMU并没有“关闭”按钮啊，只要点击右边的空白区域就可以关闭菜单了。想想看，这个为什么不能点击上面的空白区域来关闭菜单？
对，因为这是手机上的APP界面，而手机屏幕的上方手指是不太好点的。
所以在下面加一个“关闭”按钮使用起来会更方便。
于是你又得到了一个 底部菜单IMU，它是从底部向上滑入的，内容是列表式，下方多了一个“关闭”按钮。
是不是很有意思？
你完全可以继续思考，这个新的菜单IMU真的只能是列表吗？还能用来放其他类型的内容吗？如果把纵向的列表改成横向的图标会怎么样？
当然可以啊，然后你就又会得到一个新的 底部菜单IMU：
当你需要分享歌曲的时候可以打开这个菜单，它可以放很多社交APP的入口，用来选择你要分享的平台如微信、QQ和微博等。
下面的“关闭”怎么变成了“取消”？
因为刚才那个是歌曲的播放列表，上一个操作是“打开”，所以对应的操作是“关闭”。而这个是你点击“分享”按钮触发的分享菜单，于是对应的操作就变成了“取消分享”，简称“取消”。
是不是很神奇，明明我们最开始看到的只是一个菜单IMU，怎么想着想着就变成了三个？
不止如此，你完全可以把任何一个你看到的IMU都进行如此的思考和改造，根据你的应用场景制作成合理的 新IMU，这就是“用规律指导行动”。
打造属于自己的IMU库
作为一个交互设计师，我在刚入行的时候，每一天都在做上面的这种工作，把所有见到的APP界面进行截图、分析和拆解，然后存入我脑海中的IMU库里。不仅仅是手机APP里有，电脑软件、网页还有游戏里全都有大量的IMU供你参考，这真是一个令人兴奋的积累过程。
IMU这个概念其实也是《刻意练习》这本书里提到的心理表征的一种：
心理表征是一种与我们大脑正在思考的某个物体、某个观点、某些信息或者其他任何事物相对应的心理结构，或具体或抽象。
——安德斯·艾利克森
所以做交互设计也和围棋、象棋大师在下棋的时候的思考模式很像，在这种情况下，我应该用哪一种走法（也就是IMU）来应对呢？他们心中正是有足够多、理解足够深刻的心理表征，才有可能在非常短的时间内在脑海中进行大量的“检索”，从而得出最合适的走法。
只有当你积累了足够多的IMU，建立了自己的IMU库之后，你才有可能随心所欲地设计新产品和新应用。而对这些IMU的理解深刻与否，则决定了你做出来的东西是生搬硬套的，还是达到了“重剑无锋，大巧不工”的境界。
当然了，只有这个库还是不够的，你还需要理解用户心理、站在用户的角度进行思考，才能真正做好交互设计。而这，应该是以后我们再继续探讨的话题了。
专栏作者介绍
WingST
腾讯高级交互设计师、特聘讲师，
八年行业经验的资深互联网人
此文为精简版本，深度阅读欢迎长按识别下图二维码，关注作者个人公众号！干货满满，遇见就不要错过 (*￣︶￣)
END
传 播 设 计 价 值
专注优秀设计、创意内容分享的设计师平台
EchoShare
全国多地区大型线下分享会
NEW EchoCheers NEW
10人小圆桌线下设计沙龙
长按二维码 即刻关注 参与其中
▼
回音官方群
①群、②群、③群、④群已满
【⑤群 383473375】【⑥群 102472778】【⑦群 183169559】
【深圳 470388486】【南京 264878997】【上海 561895025】
✬如果你喜欢这篇文章，欢迎分享到朋友圈✬
评论功能现已开启，我们接受一切形式的吐槽和赞美☺
往期精彩请戳“阅读原文”
