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

设计师和初级产品经理在面试中不能很好回答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

相关推荐

  • 关于创意,国外设计师用垃圾制作的插画,震惊到我了。

    本文来源于交互设计网:我是UE网,小编:阿西巴巴 图片来源:互联网 有些生活中的日用品或消耗品产生的垃圾我们随手都丢掉了,不过在设计师眼里这些也可能价值数十万美元。她是如何变废为宝的呢? 下面是作品: 我真…

    2015-04-20
  • 用好的交互设计来管理复杂-“筛选器”

    我们必须按照人们的行为方式来设计,而不是按照我们希望他们应有的行为来设计。

    2017-05-19
  • 【分享•客户体验】“互联网+”如何提升用户体验?

    “你兜售的虽然是产品,但真正能使你获益的却是服务”。为何这样讲?众所周知,顾客就是上帝。在今天,客户体验越来越多的被提及,产品得到了更多的外延及扩展,已经不再局限于产品本身的价值,而有了更多的后续价值和服务的依托。注重交付的每个环节的规范与体验,这让卖点从产品本身逐渐渗透到整个产品的生命周期中,用户对品牌的认识也开始从产品蔓延到店面、店员、交易流程是否顺畅、售后服务是否及时到位等诸多层面。换句话说,产品是基础,而优质的服务可以帮助企业赢...

    2018-02-11
  • 一只交互设计喵在工作过程中的几种思维方式

    这篇文章来自于《为真实的世界设计》读书笔记。文中罗列了设计师的几种思维方式,但是在实际的过程中,这几种方式是交错出现的,在本喵实际的搬砖过程中发现,不同的思维方式会出现在不同工作流程中。先简述一下,…

    交互设计 2016-07-01
  • iPhone X 交互设计官方指南

    编译|覃云北京时间 9 月 13 日凌晨,苹果发布了带刘海的 iPhone X,这个屏幕需要 iOS 开发者做新的适配,会后苹果发布了 iPhone X 的适配指南,我们将它翻译出来供大家参考。本文首发于 InfoQ 垂直号移动开发前线,ID:bornmobileiPhone XiPhone X 拥有一个宽大的、高分辨率、圆角的、扩展到边缘的屏幕,提供了以前从未有过的沉浸式、内容丰富的体验。屏幕尺寸在纵向方向上,iPhone X 显示屏...

    2018-01-31
  • 交互实战|覆盖层设计:弹出式半屏页面和弹出式气泡(下)

    上篇《交互实战|覆盖层设计:对话框&浮层(上)》讨论了“对话框”和“浮层”两种覆盖层中最为常见的样式:对话框主要分为提示型和输入型两大类;浮层主要分为Toast和Snackbar两类。在下篇中,想要讨论一些不那么常用的覆盖层交互形式:弹出式半屏页面和弹出式气泡。

    2017-05-05
  • 交互设计完全学习指南

    交互设计起源于网站和平面设计,但已成长为单独的一个领域。工作内容不仅仅有文本和图片,交互设计现在负责创造屏幕上用户可能会划动、点击、按压或输入的每一个元素,简而言之,就是体验的互动。这篇文章为对交互设计感兴趣的人提供了几个好的点可以开始行动。为了这个目的,我们简要的介绍了交互设计的历史、指导原则、值得注意的贡献者和与这个极具吸引力的学科相关的工具。即使你已经是一个交互设计师,阅读下这篇文章然后在下方评论区分享你的想法吧!目录什么是交互设...

    微信热点 2018-05-06
  • 至纯至简|手机百度8.0设计总结

    8.0是手机百度发展过程中一个重要里程碑,它不仅延续了产品建立以来的要点,打破历史包袱,与时俱进地从体验和产品角度进行了创新,通过全新的整体交互框架与视觉风格,将搜索、语音搜索、FEED流信息获取、多垂类服务等进行了再设计。

    2017-05-12
  • 从交互层面探讨:不一样的 App 该如何设计?

    针对APP同质化现象,本文作者从从交互层面探索了不一样的 App 该如何设计,且谈及自己的解决方案。值得一读。     “首先占据人们大多数时间的同类型APP内容高度同质化,而风格取决于内容,在平庸的内容下只能诞生风格平庸的APP设计。其次,对于以商业目标为根本的APP应用设计开发,设计风格的投入产出比并不高(游戏依然除外),设计模式的流行以及交互方式的单一使得保守的设计投入产出更高。最后在现今的消费领域,功能主义盛行,界面设计中理性居于主导地位,设计风格显示不是理性思考的首要考量目标。”

    2017-05-04
  • 《用户体验要素》 读书笔记 (3)第四章 范围层

    范围层主要解决功能规格和内容需求只有明确定义出来,你和你的团队才知道你正们在做什么同时你才知道你不需要做什么1. 范围层定义1)范围层需要同时做两件事情:规定过程(日程安排和里程碑);生产产品。2)范围层的功能和内容要明确的定义出来:只有明确定义出来,你和你的团队才知道你们正在做什么,团队中的不同角色才能有共同的参照标准;同时你才知道你们不需要做什么,同时你才知道你不需要做什么,因为这个过程中会不断出现新的需求,要结合你的规划、新需求与...

    2018-04-09