微交互的设计案例与思考(下篇)

微交互的设计案例与思考(下篇),第1张

微交互的设计案例与思考(下篇)

第一部分,重点讨论用户在产品中的过程行为,讨论交互设计减轻用户 *** 作负担,优化等待时间。在中间部分,我们从人的主观感受出发,讨论了产品的礼仪和舒适性的交互设计。在这篇文章中,我们将讨论人们的感知和目标,并探索“人们实际上知道但没有被发现”的伟大产品的动人细节。

为感知而做的设计:交互设计的基石

说到“感知”和“目标”,就不能回避认知心理学。我们今天讨论的“交互设计”是在人机界面(GUI)出现之后成型的。因为随着GUI的发展,隐形 *** 作和概念化中的问题必须通过“交互设计”来合理解决。此时,认知心理学家不仅评价具体设计的优劣,还通过了解人们的认知和行为模式,进一步指导交互设计的具体实施。

这里不得不提的是,美国加州圣地亚哥大学认知心理学教授唐·诺曼(DonNorman)在20世纪80年代将心理学引入设计,奠定了交互设计和体验设计的基础。后来者史蒂夫·穆德、艾兰·库伯和杰夫·巴顿已经完善了交互设计的方法和工具。

在增强感知方面,诺曼提到了日常设计中的五种方法,即供给、能指、反馈、映射和概念模型。后世如深泽直人提出的潜意识设计,在可用性方面走得更远,所以这里我们做一些调整,从直觉、视觉反馈、一致性、方向感、与心智模型的符合性五个方面来讨论为感知而设计。

案例一MACBOOK和iOS的输入键盘:直觉化设计

我们生活的世界充满了线索。我们把瓶子放在桌子上,因为桌子是平的,高度刚好。我们爬山累了,就坐在石头上,因为石头的轮廓让我们觉得可以坐。人们每时每刻都在衡量身边物体的可用性,但大多数时候并没有发现。

诺曼在日常设计中阐述的可用性是事物的客观特征与人的印象的结合,而深泽直人提出的潜意识(无意识设计)中的可用性强调通过产品轮廓来构建属性,以增强人的直观感知。

当我们意识到人的感知会受到物体轮廓的影响,我们就会发现身边的直观设计。

与Thinkpad的键盘相比,MACBOOK的键盘更可用,不是因为MACBOOK的键盘比Thinkpad的键盘更大,而是因为前者用不同的材质和颜色增强了按键轮廓,并通过轮廓表现出舒适和恰到好处的间距。

同样,IOS的键盘比Android的更可用,并不是因为它比Android更像键盘,而是因为它简洁的信息、饱满的字体设置和刚柔并济的轮廓,更容易让人专注于按键。

直观设计并不强调对用户的感官刺激,而是通过产品轮廓和位置与用户的直觉产生高度共鸣。比如我们经常看到红包的模态视图,在很多点上把领取按钮的位置向用户靠拢。用户下意识的点击领取按钮进行注册,并不是因为这个红包画的更像红包。

案例二iOS的按键显示与放大镜:可视化反馈

人们在乘坐电梯时经常会看到一个现象。一秒钟后,人们按下关门按钮,再按,再按,最后门关上了。这是因为电梯关闭延迟,反馈不及时。虽然大家都知道电梯有这个问题,但是当他们再次来到这部电梯的时候,还是会重复一次又一次按下按钮的场景。人在 *** 作时,需要得到可视化和及时的反馈,否则会有强烈的不稳定感。

如前所述,OFO使用了一个糟糕的解锁键盘,大键设计和输入反馈可以让我们少犯错误。但是当键盘不是数字而是字母时,受限于屏幕尺寸,我们无法增加按键尺寸。我们做什么呢IOS很早就想到了这一点,在第一代iPhone上提供了输入视觉反馈,让人们可以及时知道是否输入准确,同时又不会扰乱视觉焦点。

在同样的模式下,iOS也用于长按文本复制。当用户手指较长时,会覆盖焦点位置。此时提供放大镜的视觉反馈,帮助用户全面感知是否精确取景。

iOS的系统键盘通过视觉反馈来增强 *** 作感知,而坏的三星手机在窄键盘上输入时根本看不到按键反馈,手指按下文字复制时也看不到反馈,就像电梯里不亮的关门键,每次都让人不安。

案例三iOS的天气开启流量:保持一致

我们知道产品无论是视觉设计还是交互设计都应该是一致的。当我们看到强调词的时候,就明白这就是标题了。当我们再次阅读和看到强调词时,我们会立即意识到这就是标题。当我们把一个文件拖到垃圾桶里删除时,我们会察觉到拖另一个文件也可以删除它。如果视觉元素的布局不一致,会让我们感到混乱,难以理解;如果同样一致的交互结果完全不同,我们会感到困惑,甚至怀疑系统本身。

今天网上有无数人抱怨iOS的天气数据打不开。麻烦的原因是,iOS对于开放应用数据流量的 *** 作,实际上是为天气应用设计了不同的流程。

当我们需要打开常用应用程序的数据流时,步骤是:

进入设置滚动列表选择某个应用列表选择无线数据开启无线数据与蜂窝数据

天气不包括在设置列表中,打开天气数据流的步骤是:

进入设置进入蜂窝移动网络列表选择使用无线与蜂窝数据应用滚动列表选择”天气“开启无线与蜂窝数据

不一致的交互让用户因为无法正确感知和找到打开天气数据流的入口而感到迷茫。

案例四iOS与摩拜单车的转场动画:方位感

在办公室,我们经常使用中央空恒温器。空之间不好的恒温器按键排列,无法引起用户内心的共鸣,所以我们每次使用都需要重新观察和理解每个按键的含义。出色的温控器设计,风起风落,温度按键调节,数字,能用空之间的布局,引起人心共鸣。只要用过一次,下次闭上眼睛就能 *** 作。

就像我们很容易迷失在一些立交桥或者写字楼里一样,糟糕的交互设计总是让我们随着功能和界面的增加而迷茫,思考自己在哪里;优秀的设计甚至不需要logo,只需要通过空之间的关系就能让人与环境产生共鸣。

我们每天使用的iOS就是通过界面之间的X、Y、Z轴过渡,以及焦点缩放,来展现界面信息之间的层级关系,了解自己所处的位置。通常,应用程序设计人员已经注意到了这一点。比如Airbnb:搜索、房源、策略被X、Y、Z轴过渡隔开,每个信息类别和当前位置都能清晰感知。

一个不好的例子就是摩拜单车。无论是左边的菜单,搜索,还是消息,都是X轴过渡向左滑动,而模态视图采用下降的Y轴过渡,与触发位置无关。人们根本无法通过界面之间的移动关系感知信息的层级关系,所以信息之间的关系是混乱的,就像一个糟糕的恒温器例子中简单粗暴的横向排列的按钮。

案例五支付宝与微信卡包:符合心智模型

诺曼提到产品设计有三种模型:实现模型、呈现模型和用户心智模型。当产品呈现模型趋于用户心智模型时,用户会很容易理解和使用。当呈现模型倾向于实现模型而不是用户的心智模型时,用户需要适应、理解和平衡。有时候因为误解错误,会犯错误,甚至会感到沮丧,愤怒,逃离。

今天我们知道,电脑里根本没有真正的文件夹、桌面、垃圾箱。这是施乐实验室在20世纪70年代设计图形系统时使用的概念,符合用户的心智,将视觉 *** 作与用户的日常行为联系起来。

用支付宝的优惠券和yhk列表都用到了卡包的概念。日常生活中,拿出钱包,拿出xyk,用完后放回钱包。“卡应该放在你的钱包里”的概念模型是用户所熟悉的。举个类似的例子,我们给朋友转账,支付宝和微信为了把可视化 *** 作和日常行为联系起来,用了“红包”的概念。手机里没有真正的红包,但是心智模型增强了用户的感知,减少了用户的误解和焦虑。

如今,越来越多的产品懂得利用红包的概念带来新意。另一方面,airbnb邀请好友获得“旅行基金”,这是一个陌生的概念,与用户的日常行为没有联系。这是一个需要用户理解却不能轻易感知的例子,不符合用户心智。

因懂你而做的设计:

我们身边的大部分人造的东西都是设计出来的,但出于产品竞争或者商业目的,如今的智能设备上日益复杂的功能和 *** 作,有时并不能帮助我们,甚至让我们感到多余和挫败。以人为中心的设计强调对人的需求、能力和行为模式的分析,然后进行满足人的需求的设计。设计的前提是先了解人。

诺曼在《情感设计》中提到,人的认知有三个层次,即本能层次、行为层次和反思层次。AlanCopper将它们映射到交互设计中用户的目标:体验目标(用户想要的感受)、使用目标(用户想要做的事情)和生活目标(用户想要成为的人)。

要说懂你做的交互设计,我们顺着诺曼到艾伦·库珀的思路。

案例一Bilibili、Acfun和野兽派:懂得如何迎合你

本能认知是用户接触产品时会产生的感受,所以体验的目标通常是简单的、通用的、人性化的。但设计师要想迎合受众,通常会考虑更多的体验动机,并煞费苦心地实现体验目标。

毕丽和Acfun都是以90后二次元为主要用户群体的视频app。他们在页面元素、卡通图标和下拉刷新的加载动画上尽量迎合90后二次元的群体特征,展现非常有趣的场景。

同样是电商APP野兽派,用户是不满足于传统电商的年轻白领,在首页用精美的地图展示店铺。这种交互模式虽然增加了用户识别的混乱,但却迎合了这类用户追求新鲜、与众不同、精致的体验目标。

案例二iOS与锤子日历:懂得你的日常行为

分层认知是用户在使用过程中的感受,其映射的使用目标代表了用户使用产品执行任务的动机。要实现这一点,设计师通常需要关注用户的日常行为和场景,以及用户具体的使用行为和任务。

在日常生活中,我们经常看到三种日历,即黄历、月历和年历。黄历的每一页都是一天,每一页可以浏览和记录更多的信息,但是不方便计算不同天之间的天数;日历在一页上记录一个月,方便计算一个月中不同日子的间隔,但不方便计算相邻月份的间隔日期。日历适合查看和计算月份之间的日期间隔,但不方便浏览和记录信息。

IOS设计了一个优秀的日历,可以让用户在周、月、年的不同浏览模式间平滑切换。当用户希望看到下个月的某一天和今天之间的几天时,他们不会受到是否在同一个月的限制。这得益于对人们日常行为的准确理解。相反,锤子的日历完全机械地复制了现实中的日历。人们不得不根据日历进行切换,但日期在客观上是连续的。在计算相邻两个月之间的天数时,人们会遇到和现实中一样的问题。

了解用户的日常行为和场景,iOS日历可以更好的实现用户的使用目标。

案例三知乎和RNIfilm:懂得你如何使用产品

另一种实现用户使用目标的方法是关注用户的使用行为和任务。

我们在使用知乎的时候,跳出APP,稍后重新进入,顶部的无模式显示会刷新;当我们下拉列表时,我们将显示我们之前在信息中浏览过的位置。知乎做的是了解用户的具体行为和任务,让用户更好地“刷”知乎。

同样的例子,APPRNIfilm在照片后期打开手机照片时并没有直接使用iOS相册,而是提供了一个设计好的相册视图,其中有两种相册的排列方式:正序和逆序。还记得你半年前拍照的尴尬吗?RNIfilm帮你减少 *** 作。这也是基于对用户行为和任务的理解。

知道用户在产品中的具体使用行为和任务,知乎和RNIfilm更好的实现了用户的使用目标。

案例四斯塔克的设计:懂你的进取心

用户使用产品后产生反思性认知。它映射的人生目标代表了用户的期望,涉及更深层次的驱动力、用户的动机、欲望和自我形象。设计师所做的是最终将产品转化为更高层次的系统,以用户的生活目标为导向。

在诺曼的《情感设计》一书中,斯塔克的设计被归为第三层设计,但诺曼并没有说得很清楚。在国内各种设计文章中介绍他的时候,“设计天才”、“极简主义”被广泛使用。看他出演的2009年设计稿纪录片《名师成徒》时,反复听到他在训斥参赛选手时用了“企业”这个词,恍然大悟。

如果我们看看斯塔克的设计,无论是幽灵座椅、外星人榨汁机还是骑士马桶刷,我们会发现这些设计不仅是极简主义,也是流行的设计。再者,他们使用普通廉价的材料,通过塑造他们的主动性,最终为产品注入灵魂和力量。当我们今天看着并使用这些产品时,我们可以感受到这种非凡。大众不甘平凡,懂得用侵略性的设计来激发大众内心深处的欲望和驱动力,这就是斯塔克设计的独特之处。

案例五微信和支付宝:不是为沟通和支付而做的产品,而是达成你的人生目标

诺曼进一步提到,人的目标分为四类:过上好日子;实现自己的抱负;成为某方面的专家;在同龄人中有魅力,受欢迎,受尊重。

再看看微信和支付宝:这不是为了解决人们的沟通和支付问题而做的产品。

我们用微信和别人交流,同时每天刷微信朋友圈晒各种生活。动力不就是成为一个有魅力,受欢迎,受尊重的人吗?

我们用支付宝快捷支付,短期支撑房子水电缴费,打理日常收支和储蓄,长期通过余额宝理财,不就是为了更好的生活吗?

我们发现,当产品不仅帮助我们实现了体验目标和使用目标,还帮助我们实现了人生目标,这似乎就像斯塔克的设计一样,注入了灵魂和力量,我们最终成为了产品的狂热粉丝。

感谢大家的阅读。

相关阅读

微互动的设计案例与思考(上)

微交互设计案例与思考(中)

作者:彩虹猫sir,交互设计师,坚持原创,以文字为友,希望与你一起感受、思考、成长。

文章作者是@彩虹猫先生。未经许可,禁止转载。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/780388.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-04
下一篇 2022-05-04

发表评论

登录后才能评论

评论列表(0条)

保存