微交互的设计案例与思考（中篇）

2017-04-21 10:20:00

设计师和初级产品经理在面试中不能很好回答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阅读的时候，调整亮度的操作：

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

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

上滑屏幕
拖动亮度条
下滑屏幕回到阅读

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

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

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

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

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

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

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