回音专栏丨交互设计中的规律

回音专栏丨来自行业最前线的设计大咖们的独家MAX干货聚合!库伯学习圈,从行动中归纳出经验,把经验升华为规律,再用规律指导行动。……交互设计中的规律昨天讲了库伯学习圈和正确的学习步骤,应该从行动中归纳出经验,把经验升华为规律,再用规律指导行动。今天就来讲讲我在学习交互设计时,是怎样总结出一些有用的规律的,你同样也能用这种方法学习别的知识。行动中归纳经验我们平时都会使用一些电脑软件和手机APP,你有留意到它们的界面和操作吗?比如iPhone...

文章目录[隐藏]

回音专栏丨来自行业最前线的设计大咖们的独家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】



✬如果你喜欢这篇文章,欢迎分享到朋友圈✬

评论功能现已开启,我们接受一切形式的吐槽和赞美☺

往期精彩请戳“阅读原文”

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/34664/

(0)
交互精选交互精选
上一篇 2018-01-30
下一篇 2018-01-30

相关推荐

  • 案例:交互设计七大定律分享

    一费茨定律(Fitts' Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. Fitts)博士,在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的,时间是1954年;该定律被用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。费茨定律指的是:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(...

    2018-02-28
  • 在Sketch中直接画流程图?现在你可以梦想成真了

    静电说:许多小伙伴对Sketch的期许是更多的,他们不仅希望Sketch是一个绘图工具,更希望它能变成一个交互工具,一个动效设计工具。比如这样一个需求:“在Sketch中画流程图箭头”,之前是不可以的,但插件为我们带来了无限可能性。今天静电就要来介绍这款User Flows插件。User Flows可以来创建图层到页面(Artboard)之间的连线,也可以用它来导出设计流程图,User Flows提供多种语言选择,为我们提供了不少方便。...

    2018-04-17
  • AI 交互设计怎么做?谷歌详解自家 AI 相机设计思路

    文 | 何忞来自雷锋网(leiphone-sz)的报道雷锋网按:日前谷歌在其官网发布博文,文中详细介绍了 AI 相机 Google Clips 的一些设计思路。雷锋网将其编译如下正如过去曾经发生过的移动革命以及再之前的网络革命一样,机器学习正在让我们反思、重构、重新审视我们生活中已经拥有的一切。在 Google 用户体验(UX)社区中,我们开始了一项名为“以人为本的机器学习(HCML)”工作项目,来指导和帮助我们重构世界。站在这样的视角...

    2018-02-03
  • 用户体验和可用性之间的联系和差异,你都知道吗?

    本文转自本文由优设网作者 :Amy Smith,版权归作者所有阅读需 5 分钟Amy Smith – 最近几年来,用户体验设计逐步成为了目前设计圈中广泛认同的重要设计环节。而“可用性”这一词也作为改善用户体验设计的重要度量而发挥着无与伦比的作用。于是乎,除了“用户体验设计师”这一职位,在欧美的产品和设计团队当中还诞生了“可用性工程师”这样的专业职位。另一方面,这些相互关联,在含义和功能上有所重叠的专业词汇,让许多设计师和相关的从业者感到...

    2018-03-03
  • 老子花了1761,你就给我这用户体验?!

    关注公众号回复关键词回复“模考”获得还原机考环境的口语模考回复“TPO”获得TPO模考软件回复“机经”获得托福历年真题回复“作文批改”获得趴趴助教亲自批改作文更多福利礼包领取请添加微信:papalovetoeflSpeaking-Direction来自趴趴托福00:0004:06托福虐我千百遍,我待托福入初恋托福,作为一个从早上八点半到中午十二点半多的长时间持久战,在考试过程中,同学们总会到一些奇奇怪怪的事情,有一些奇奇怪怪的经历比如说...

    2018-03-01
  • 02案例:用户体验和结婚教练

    用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为结婚也好,创业找合伙人也罢,都是非常重要的长期关系。改变一个人...

    2018-04-04
  • 大屏时代,如何做好电视端交互设计?

    在过去一年多的时间里,笔者有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。-硬件+远距离操控——基本交互-基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一 、遥控器输入当我们用手指快速便捷地在手机屏幕上点击或滑动时,主流电视大屏及应用的操作还是:使用遥...

    2018-04-01
  • 交互设计 | 张艺谋这样玩儿

    3 月 4 日,张艺谋导演的观念演出《对话·寓言 2047》在上海大剧院正式演出。在连演两场之后,他们将移师广州和杭州,共同组成《对话·寓言 2047》第二季的演出。尽管被称为第二季,但此次演出的内容与去年 6 月在国家大剧院上演的第一季大体相似。开场仍旧是 71 岁的蒙古族老人其布日一边编织着麻绳,一边唱着悠扬的蒙古长调。背景中,美国先锋艺术家 Daniel Wurtzel 利用空气动力学原理,让一块云纱在舞台上翩翩飞舞。在这个段落之...

    2018-03-06
  • 这场UED界的大会堪比最近最火爆的雄安楼市

    2011年,阿里UED委员会的几位童鞋一商量,想给互联网的UED们一个搭交流学习的场子,就发起了第一届UCAN。如今,UCAN已经从阿里的UED的大团建发展成了国内最热门的设计大会之一。2017届的UCAN今天在阿里巴巴西溪园区召开,小编在现场看到走道都坐着人,800多人的场子,10000人报名,快赶上抢房摇号的阵仗了。报名的观众不但专业齐全,视觉、交互、用研、工程师、产品经理一个不拉,而且来自的公司阵容也很强大,腾讯、百度、亚马逊……...

    2018-02-01
  • Axure RP软件

    长按链接复制链接到浏览器打开Axure RP 7.0软件及安装教程下载地址:链接:https://pan.baidu.com/s/1mkqu1Ws密码:467u长按链接复制链接到浏览器打开Axure RP 8.0软件及安装教程下载地址:链接:https://pan.baidu.com/s/1c3h7c1i密码:esqr给大狮兄一个赞赏大狮兄想生存下去,我还想以后给你更多好用的软件赞赏的狮粉记得备注名字,大狮兄想记得你的名字大狮兄资源吧专...

    2018-03-04