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

设计师和初级产品经理在面试中不能很好回答APP设计好在哪里,并非是由于平时使用太少,而往往因为缺乏一种视角,即产品是为人而设计的。当我们意识到使用产品的是人,人具有感性层面,就会发现使用”功能强大、信息准确和流程最优“等客观化标准评价的不足。“设计和艺术是不同的,但很多人都没有认识到这一点,设计是为了人而产生的,如果你不明白人,你就不能理解什么是好的设计。”


设计师和初级产品经理在面试中不能很好回答APP设计好在哪里,并非是由于平时使用太少,而往往因为缺乏一种视角,即产品是为人而设计的。当我们意识到使用产品的是人,人具有感性层面,就会发现使用”功能强大、信息准确和流程最优“等客观化标准评价的不足。

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

微交互的核心在于产品细节,在上一章(点击查看)中,我们介绍了为懒而做的设计和为等待而做的设计。本章我们将聚焦人的感受层面,分享第三和第四部分,即懂礼貌的设计和为舒适而做的设计。

三、懂礼貌的设计:具有一名好服务员的礼仪

人在与数字设备相处的行为模式和人与人之间是类似的,交互设计者常常使用对话框和表单完成两者之间的沟通。日常生活中,我们与他人相处常见四种模式:与老板,与亲人,与同事,和与服务员。人们在使用产品时所期待的应是最后一种。

当我们在高档的西餐厅就餐,会发现好的服务员不必卑躬屈膝,但一定是客户至上的,在我们需要的时候提供帮助,不问过多烦人的问题。做一名好的服务员也许不难,但当交互设计者深陷在产品的功能、信息、流程和商业逻辑中,经常就把礼仪这件事抛之脑后了。

案例一 word和page的退出保存对话框:不问已经就坐的顾客是否吃饭

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

对程序设计而言,流程判断节点的是和非都是必须考虑的范围,但对人而言,在特定条件下人具有的可推断的行为。例如顾客走进一家餐厅就坐,服务员应该问“您想吃点什么?”,而不是问“您要吃饭吗?”。顾客到餐厅当然是来吃饭的,如果他不想吃了,只要能够离开就好了。在流程图和逻辑上,顾客存在离开的可能,“是否吃饭”也的确在“吃什么”之前,但这并不意味着交互设计要以这种方式问话。

今天我们在MAC上使用word和page编辑同一篇文档,点击关闭会发现弹出的对话框是不同的。微软word对话框会问是否保存,而苹果page对话框则问存在哪里,同时提供不保存的按钮。word的做法即在问就座的顾客是否吃饭,用户花费数小时写的文档,为什么不保存?而page的设计者就聪明多了,将是否保存带入到保存到哪的问题中。不问已经就座的顾客是否吃饭,核心是交互设计应从人的行为模式出发,脱离程序思维,这样用户就不会觉得产品表现的刻板、愚蠢和失礼 。

案例二 京东和淘宝退出订单支付:不过度问烦人的问题

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

不论我们在餐厅、商店还是理发店,当我们说明要求后,都希望服务者能够快速理解,而不是反复确认。经常网购的朋友会发现,京东商城和淘宝在退出确认订单和支付的界面是不同的。

在退出确认订单界面时,京东用模态对话框问“便宜不等人,请三思而行,我再想想or去意已决”,淘宝则不问。对多数用户而言,地址是默认填充的,退出订单等需要时再买并不付出什么代价,在这里京东让用户确认自己的行为是非常让人厌烦的。

而在退出支付界面时,京东仍然用模态对话框问“确认要离开收银台?超出时间订单会被取消,请尽快支付,继续支付or确认离开”,淘宝则不问,直接显示待支付的订单,如果用户不管,订单会自动删除。在这里,京东更加失礼,用户明明已经点击退出支付,为什么还要问,甚至要求用户尽快支付。

京东所展示的正是过度问烦人问题的服务员形象,让用户反反复复确认自己的行为,感到厌烦和丧失信心,相比之下,淘宝好多了。

案例三 麦当劳自助点餐与饿了么提交订单:不问问题而是提供选择

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

回答问题与选择截然不同,前者让人感觉是被动的,被压制的行为,是日常生活中与上司和长辈间的对话模式;后者则会让人感觉是自主的,可控的行为。聪明的服务者不会强迫用户回答问题。

麦当劳设计了超级棒的自助点餐系统,但在对话框交互使用上不尽人意。当人们选完需要的食品后,屏幕弹出对话框问是否外带,选择之后屏幕又弹出对话框问是否确认订单,选择后屏幕又弹出对话框问是否送到餐桌。这种连续的独占态Y/N发问让用户感到霸道和压制。同时由于一旦回答就无法返回上一层,用户潜意识会担心自己选错,倍感压力。

虽然信息是必须向用户询问的,但麦当劳使用了错误的方式,饿了么则做得好多了。在饿了么的订单确认里,商品明细,是否匿名,用餐人数等必要信息,是让用户选择而不是逐个回答,一并确认提交。

案例四 轻芒和知乎的推荐信息:不强行推荐服务

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

出于业务或商业需要,有时候产品必须向用户推荐信息和服务,但这不一定就和用户体验相违背。当我们走进麦当劳的时候,门口的展板,餐厅内的墙壁,服务台上都是推荐产品的广告,甚至在我们就餐中会发现,连食品的的垫纸上都是新品广告,但我们从未感觉这影响了我们就餐的体验。麦当劳摆放在那里,需要就买,不需要可以不看,不是强推给顾客的。

有一款APP叫轻芒杂志,每隔几天打开,文章上就会叠一摞卡片消息,分别来自该公司CEO、PM、设计、运营和客服的各种消息。更糟糕的是,这些卡片根本无法移除,盖在文章上无法阅读文章内容,只有一个一个点开看完关闭才能消除。这绝不是一个好服务员的体贴,而是愚蠢服务员的喋喋不休。

相比之下,知乎首页的付费Live呈现就好多了,这是用户打开应用第一眼就会看到的,但却不会感觉因为其影响了正常使用。知乎在这里非常聪明的使用了泳道模式,每个Live项目在卡片里以缩略态方式呈现,这些卡片可以横向滑动,在小面积内具有极高的信息呈现效率,不干扰用户操作。不强推服务给顾客,是好服务员应有的礼仪。

案例五 京东和阿里闲鱼:记住顾客的喜好

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

我们每天都承受着移动产品各种推送的消息轰炸,从短信唤醒,到邮件活动,再到微信优惠券,可是当我们打开,很快就丧失信心了:我家里明明有空调,你推什么空调大促?我明明是个男子,你怎么推女装打折呢?几次下来,再推送的消息躺在了短信、邮件和微信消息堆里不再被打开,成为了垃圾。

虽然APP可以不知道我是谁,但是我可一直在使用这款软件啊,从行为中分析我的偏好,记住我的喜好,为我做个性化推荐让我开心很难吗?多数APP却根本不关心这一点,但有一款产品好像不一样,这款产品就是阿里旗下的二手平台-闲鱼。通过记录搜索和浏览行为,闲鱼的iOS通知、首页置顶和前几页的商品都是用户所关心喜好的,这是一位能记住顾客喜欢的服务员,丝毫不让人感觉是打扰,而是感到十分贴心。

理解使用产品的是人,人具有主观感受,我们就将以全新的视角重新审视和设计产品的交互形式。我们为产品设计出好服务员一样的礼仪,但我们很快发现这样的感觉还不够,因为有一个客观事实存在:所有的交互形式都最终在设备上呈现,而人通过眼睛浏览阅读和手指点击拖动使用设备。

四 为舒适而做的设计:舒适是好用的前提

三年前我购买了当时摄像头达4100W像素的NOKIA LUMIA1020。当我在父亲面前显摆这个黑科技产品时,父亲拿过手机大概看了20秒时间,说了一句令我至今难忘的话“这手机不好,握在手里不舒服。”想想也对,一部整天在手里使用的手机,如果拿着不舒服,还提什么别的呢。

案例一 OFO和摩拜单车的键盘输入:为舒适的输入优化

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

我们其实没有发觉,生活中很多事物都是被优化过的。当我们每天乘坐电梯,用手指去按楼层的按钮,那按钮刚好是我们拇指的大小。而当我们坐在电脑前工作,键盘的大小则刚好是我们食指的宽度,鼠标是我们手掌的宽度。这些都不是巧合,而是为了更舒适的操作而设计的。

去年的一个冬夜,我走出地铁找到一辆OFO,使用键盘输入车牌号,输错了一位,结果不得不提交报错重新解锁另外一辆。后来我仔细想了想,原来我之所以输错的原因来自OFO不合理的软键盘设计。

OFO的解锁场景要比一般输入苛刻,原因在于用户此时目光需要聚焦三处:车牌、键盘、和输入框。但是OFO却设计了一个糟糕的键盘,不但浪费了7和9下面的空间,还用两个数字键的面积重复了一个本来在输入框旁边就存在的确认键,这样键盘被划分成了四列,每个数字键都小于食指的宽度。摩拜单车,和支付宝输入金额的软键盘,都采用三列。让用户不输错最好的办法不是提醒,而是舒适的输入。

案例二 Path的抽屉交互模式:为舒适的浏览优化

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

在移动设备上,抽屉交互最早出现在2012年的Path上,当时被称为“神交互”。原因在于那时智能手机刚刚出现,屏幕大小是3.5英寸,Path的抽屉模型将菜单和消息列表收敛到顶部导航中,最大限度的解放了屏幕可用显示区域,让用户舒适的浏览列表,不被底部导航遮盖。但随着智能手机屏幕尺寸变大,这种结构的优势减弱,劣势凸显(菜单的层级过深,菜单唤出按钮点击频繁),最终被微信这种底部浅宽导航取代。

当我们今天使用以地图为中心的产品,比如滴滴打车,摩拜单车,会发而Path所努力的方向和解决的问题仍具有巨大价值。为了更有效率的利用显示区域,最小遮盖地图,舒适的浏览和操作地图,这些产品仍然使用的是抽屉模型。

理解用户的需要,调整信息展示的层级,解放屏幕可用区域,是Path所体现的为舒适浏览所做的设计。

案例三 微信、轻芒和好奇心人报:舒适的阅读应只有内容

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

今天的智能手机越来越大,但我们看看家里书架上的书籍和杂志就会发现,即使常见最大的手机屏幕面积,也比不上一本书籍或杂志。今天我们已经逐渐习惯了使用智能手机阅读,比如使用微信浏览公众号文章,或使用杂志APP阅读精选内容。

在微信浏览器内阅读内容并不是经过优化的舒适阅读,顶部的黑色调航条让我们在滑动屏幕的时候,减小了阅读面积,同时感受到强烈的视觉遮盖感。既然我们不曾在杂志和书籍上并看到导航,那么为什么我们要在手机上必须看到?

不是每个APP都像微信一样。轻芒使用白色的顶部导航和底部输入评论,相比之下接近杂志的感觉,但关闭的位置欠考虑,随着手机变大和单手操作习惯,对角顶部绝不是一个合适的返回位置。好奇心日报则让我们看到了真正优秀的交互设计,在用户滑动浏览的时候,屏幕干净的没有任何多余的东西,这不正是我们所期待的阅读吗?舒适的阅读就应该像书籍和杂志一样只有内容。

案例四 iBooks和微信读书的亮度调节:舒适的操作是直接的

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

当我们用勺子吃饭,希望直接握住柄就能使用,而不是使用复杂的操作形式,这是为什么对幼儿来说勺子比筷子更容易使用的原因。同样,我们为了能够更快速的调节播放器的音量,在耳机线上增加波轮,也希望用手指滚动就能调整音量,而不是显示对话框操作。对人来说,最舒适的操作都是直接操作,但糟糕的交互设计不是,它们让人倍感蹩脚。

人们在移动设备上使用阅读软件,由于长时间观看,对亮度的要求和调节都更加苛刻。当我们使用iBooks阅读的时候,调整亮度的操作:

  1. 点击界面唤起菜单
  2. 点击顶部亮度按钮显示亮度条
  3. 滑动亮度条
  4. 点击屏幕关闭亮度条
  5. 点击屏幕会到阅读状态

这是一个不直接操作的糟糕设计,没有人会用这种方式调整亮度,人们宁愿使用今天iOS的系统亮度调节:

  1. 上滑屏幕
  2. 拖动亮度条
  3. 下滑屏幕回到阅读

但这仍然是一个不直接操作的设计。它们都来自以体验著称的苹果公司。

难道想调节播放器的音量就不能直接滚动耳机线上的波轮,而非要用对话框么?微信阅读不是这样做的:设计者在这里使用了系统的多点触控,用户只要双指在屏幕上下滑动屏幕即可,这个操作虽然可见性差,但读书APP并非暂时使用,用户在长时间阅读中一但熟悉,就会爱不释手。

案例五 麦当劳卫生间标志和小米电视软键盘:避免暂态下的新奇操作

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

新鲜有趣的设计和交互形式往往能够吸引和打动人,但要分场合。2个月前我在一家麦当劳写文档,期间当我去卫生间的时候,由于无法快速识别标志,傻呆呆的停留了半分钟。M的创意画用错了地方,快餐厅的卫生间是暂时属性,90%的顾客都是首次来到这扇门前,需要专注对比两扇门上的图形才能区分男女,当然如果这个创意放在90%用户都熟悉的环境则很棒。

同样的例子,小米电视机在搜索输入时使用了和大家平时习惯不一样的软键盘,由于无法和用户心理的QWERTY键盘模型产生映射,用户会蹩脚的输入字母。小米的特殊键盘用错了地方,电视不是一个输入设备,搜索的软键盘只是暂时态使用,人们无法通过经常使用增加经验,所以就会一直觉得不舒适。

暂时态下应避免新奇的操作形式,这会让用户迷惑不知所措,无法舒适操作。

设计界伟大的Dieter Rams曾经说:

“设计和艺术是不同的,但很多人都没有认识到这一点,设计是为了人而产生的,如果你不明白人,你就不能理解什么是好的设计。”

当我们理解了最终使用产品的是人,人具有感性层面,我们就将从全新的视角看我们手机中的APP,从而开始感知和理解到伟大产品的动人细节。感谢大家阅读。

【未完待续】

相关阅读

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

 

作者:彩虹猫sir,交互设计师一枚,坚持原创,以文会友,希望和大家共同感悟,思考,成长。

本文由 @彩虹猫sir 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22680/

(0)
CatherineCatherine
上一篇 2017-05-02 15:58
下一篇 2017-05-02 17:50

相关推荐

  • 探究设计的本质,运用符号元素的经典好设计有哪些?

    符号,通常是指具有代表意义的标志。人类运用图形符号来传达信息远比文字传达信息早,它的起源可以追溯到原始社会中部族的图腾标志。随着人类文明的发展和科技的进步,符号设计有着由简至繁再至简的波浪式发展过程。今天很多的图形符号从古至今不断的发展演变,日趋精简,成为经典的视觉符号设计。

    2017-05-16
  • 小白菜们:别再用“好的文案”YY了,该醒醒了!

    不知何时起,文案写的好,竟然成了众多互联网小白追捧的热点,各种文案大师,文案叫兽,传道受业解惑,登台演讲,大讲文案的力量,貌似文案写的好,就练成了盖世神功,天下无敌了。

    2017-05-26
  • 互联网产品经理常用工具有哪些?

    互联网产品经理的工作是复杂和多样的,PM们通常要负责产品各方面的事务,因此工作中需要用到的工具有很多,现在就跟这笔者一起来看看互联网产品经理常用工具有哪些,想走产品经理路线的同学可以提前了解一下。一、产品经理的主要工作"工欲善其事,必先利其器!"既然是"善其事",关键就是搞明白产品经理相关的工作内容,针对工作合理有效的利用软件,才能达到事半功倍的效果。要说到产品经理的职能,这是另开新篇的话题,这里我们先通俗概括一下PM的主要活动:1、参...

    2018-03-13
  • 物联网UXs(用户体验)的设计模型

    如在文章《物联网相关产品的用户体验设计与其它产品设计之间的差异》(http://www.toutiao.com/i6414599431076708866/)所描述的那样物联网(IoT)的设计将面临着一些挑战和复杂性,这些挑战您可能不会在“常规”的Web服务(只有软件)中遇到。在实际设计中您将需要考虑一些不同的也许是新的设计领域,而所有这些都将用于塑造UX(用户体验)。物联网产品的两个最明显的和有形的设计形式是:一是UI (用户界面)或者...

    2018-05-01
  • 读书会第一期:《简约至上-交互设计四策略》

    你有多久没有静下心来好好读一本专业书了?谁都知道读书重要,然而“工作忙没有时间”、“不知道该看什么“常常成了借口,读书还是一再被耽搁。本周起,集创堂推出“设计经典书籍阅读”系列,每周解析一本设计类好书,深入浅出,提炼精华。也许,看完简介之后,你就有了读原著的欲望,那么我们做这件事的目的就达到了。《简约至上-交互设计四策略》这本书是我罗列的推荐书单里专门描写信息架构的书籍,书籍作者Giles Colborne是物理学出身,参与过航空航天项...

    2018-04-07
  • 中国app产品UI在歪果仁眼里是怎么样子的?-Dan Grover

    小木导读:中美用户习惯的和文化的不同,造成了设计很多的不同。看惯了国内的设计,你了解外国人怎么看待我们的产品吗?接下来就可以带着疑问往下阅读。

    2014-12-30
  • 不要忽视色彩在手机APP设计中的作用

    在本文中,我们将讨论在APP中与色彩相关的重要知识点。 我们将涵盖传统的配色方案模式(单色,相似色,互补色),不严格基于任何一种模式的自定义色彩组合,同时我们还将学习如何为你的APP选择色彩与对比度来增强可用性。

    2017-05-08
  • 被忽略的交互设计本质

    谈论交互设计本质是起源于日常的很多谈论,不管是向朋友介绍自己从事“交互”相关岗位,还是需要向亲戚通过三言两语解释自己的工作内容;甚至在工作的上下游沟通中,也经常会被问道“你怎么就判断用户是这么想的”“产品如何从0(概念)到1(页面界面)的”;这些问题促使我想要追本溯源,捋顺一下交互的由来、工作内容,以及依照什么方法执行等问题。(1)把冰箱门打开→ (2)把大象放进去→ (3)把冰箱门关上(1)要充值的手机号码→(2) 确认充值多少钱(用“确认”是因为很多软件提供了默认金额)→ (3)付款搞定。

    2017-05-15
  • 阿里UED双11组织文化传播-为每位阿里小二制造快乐

    这个组织,从创意策划、设计体验方案、执行落地再到传播推广,各种角色无缝衔接。下面带大家探秘这个神秘组织—UED双11品牌传播团队。印象里…双11阿里组织文化传播设计不就是内部宣传么(简称内宣)。Too young Too simple,一次成功的双11背后,内宣就好比阿里小二的精神鼓励师,支(bi)撑(po)着大家不断创造新的历史(走过最长的路,就是内宣人的套路,此处应有掌声)。那么,今年内宣设计的策略和体验核心是什么呢?今年双11品牌...

    2018-02-02
  • 5步快速制作移动动效

    Sketch+Keynote双剑合璧:5步快速制作移动动效 2014年,Facebook推出了新闻阅读应用Paper,诸多交互细节与炫酷动效启动了界面设计的新时代,Google的Material Design更是将移动动效提升到了app基础体验环节的高度。…

    2015-04-11