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

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

相关推荐

  • 如何创建用户体验地图

    许多公司尽管怀中最美好的愿景、掌握庞大的数据,却依然只能给他们的用户提供乏善可陈、平淡无奇的产品体验。这归咎于他们以聚焦内部、脱离用户的方式做产品,缺乏对用户的关注。他们未意识到用户对其产品的每一次体验都会影响用户的体验满意度、品牌忠诚度和忍耐底线。如果使用用户体验地图(Customer Journey Map),则能够很好地描绘出用户在体验产品时的情绪 变化,并以此对产品进行优化。通过体验地图的项目,我们发现了很多产品的优化方向。下面...

    2018-02-01
  • 拆解【用户体验要素】

    作为产品经理不但要有能力作出产品设计和规划,更要尊重用户,作出用户体验更佳的产品【用户体验要素】告诉我们如何更好的设计出让用户体验更佳的产品方法论,那么这本书如何更好的应用到实战中,我们如何更好的将理论与实践结合呢?我们今天简单来阐述一下【用户体验要素】概论知识初识【用户体验要素】【表现层】我们所能看到的一系列的网页的元素:图片、文字、按钮等,有些图片就是图片,单纯的进行展示;有些图片或者文字有可能就是一个按钮链接,通过点击可以执行某种...

    2018-05-05
  • Axure实例:即刻 app 产品需求文档

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放不了了之冰淇 - 分手快乐作者:T.zh来源:简书以下我的Axure原型截图:目录:1.概述1.1产品介绍1.2需求整理2.版本信息2.1修订历史2.2版本规划3.产品逻辑3.1产品信息图3.2产品结构图3.3部分业务流程图4.产品设计4.1全局说明4.2部分功能需求说明4.3部分交互设计1. 概述1.1 产品介绍1.1.1 文档属性1.1.2 产品综述1.2 需求整理1.2.1...

    2018-03-08
  • 华景招聘用户体验分析师啦!

    作为华景员工,除了能体验旅游之外,还能体验华景食堂的凉皮儿和拉面,包子和油条,腊牛肉和酱猪肘,狮子头和卤肉饭,肉夹馍和艇仔粥,老婆饼和豆沙酥,酸辣汤和叉烧饭,泰式河粉和肉酱意面,干煸四季豆和蒜蓉蒸茄子……华景集团招聘1. 用户体验部    用户体验分析师岗位职责:*负责产品的用户研究,分析用户的使用习惯、情感和体验需求*负责原型/产品用户体验评估工作,参与产品的交互界面的设计,分析影响产品用户体验的因素*定期开展用户测试,观察用户使用产...

    2018-05-04
  • 解密 Facebook 广告业务:用户体验与商业价值的双赢靠什么?

    本文经授权转载自极客公园(id:geekpark)文:宋德胜责任编辑:克里斯「把核心的事情做好,用户增长、收入增加会随之而来」,Facebook 近期在产品上的一些调整恰恰体现了这一想法。当地时间 1 月 19 日下午,扎克伯格在个人的 Facebook 账号上宣布,Facebook将对媒体机构进行评级,并在算法上提高优质媒体的内容在信息流中出现的优先级。公告刚刚发布,《纽约时报》等权威媒体机构的股票应声上涨。无独有偶,扎克伯格发出公告...

    2018-01-30
  • 【新锐玉商风云榜】颜传赞:以‘用户体验’为支点 撬动家装行业“一键式”转型升级

    在父辈创造的奇迹上,是传承、是创新、是开拓,每一位新生代年轻玉商都在给出自己的答案。——“新锐玉商”专栏总题记新锐玉商风云榜他是“2016浙商年度创新人物”;他提出“构家”如“构车”的“一键式”整体家装新理念,推动家装行业从传统的手工作业升级为家装工业4.0;他的公司“构家”获得复星集团数亿A轮投资。他就是坊间广称为“船长”——杭州构家创始人兼CEO颜传赞。在经济创新这条漫长的大道上,颜传赞以玉环人海派的作风和追求卓越品质的韧性,谱写“...

    2018-02-03
  • 产品经理必修课:那些隐藏在界面里的交互设计

    投稿作者:温晴公众号“爱累加”首发我们在做交互设计的时候,一般都是通过线框图和文字说明进行展示,有时候遇到一些复杂的功能我们还需要配上流程图进行补充说明,详细的全方位的交互设计文档不仅可以让研发人员方便的投入工作而且还可以让测试人员清楚的了解产品功能,方便测试细节。但是有时候我们会遇到一些无法用线框图展示出来的需求,但是又会经常遇到,下面分享给大家一些界面上看不到的交互设计。案例一用户A在使用一款应用程序的时候,突然网络断开了,那么这时...

    2018-05-05
  • 设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

    让人人都懂点儿设计设计史论全文字数 :4689 | 阅读 时长:12分钟今天史论君为大家分享一篇来自interaction design foundation的文章原文作者:TEO SLANG    |    翻译:于于于Jessica编辑:Sujay Wu转载后台回复 :史论君把不好的设计和好的设计的反面例子一起看,不仅有趣,而且为设计师们提供了重要的经验教训。它们突出了设计人员要避免的陷阱,并让我们理解如何将设计理论转化为在现实世界...

    2018-04-07
  • 关于“用户体验动效”的十二项原则

    前言关于“用户体验动效“的十二项原则,本文分为四部分来引入说明:1. “用户体验动效” 不等于 “界面动画”;2. 实时与非实时交互的区别;3.  动效的四种可用性提升方式;4. “用户体验动效”的十二项原则。1.  “用户体验动效”不等于“界面动画”在用户界面设计中,大部分动态的效果被设计师理解为“界面动画”,事实却并非如此。在介绍“用户体验动效”的十二项原则之前,我们先明确一下二者之间的不同。大部分设计师认为,“界面动画”是为了让用...

    2018-04-01
  • 用户体验地图

    利用用户体验地图实现产品的情感化设计;先来看一张图:我们可以将用户体验地图分为三个区域,其中:# ZONE A 提供了对地图的界定;# ZONE B 是视觉化的用户体验过程;# ZONE C 描述了用户的痛点;我们通过拆分各个区来实现一个用户体验地图的构建;A区:1 : 表示一个角色,即体验的用户是谁,或者说你的产品的目标客户群体是什么样类型的人;2 :表示待调研的场景,即在用户什么情景下会使用你的产品;B区:3 :可分段的体验过程,即...

    2018-03-28