童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

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

2月10日 温柔冢投稿
  设计师和初级产品经理在面试中不能很好回答APP设计好在哪里,并非是由于平时使用太少,而往往因为缺乏一种视角,即产品是为人而设计的。当我们意识到使用产品的是人,人具有感性层面,就会发现使用”功能强大、信息准确和流程最优“等客观化标准评价的不足。
  微交互的核心在于产品细节,在上一章(点击查看)中,我们介绍了为懒而做的设计和为等待而做的设计。本章我们将聚焦人的感受层面,分享第三和第四部分,即懂礼貌的设计和为舒适而做的设计。
  三、懂礼貌的设计:具有一名好服务员的礼仪
  人在与数字设备相处的行为模式和人与人之间是类似的,交互设计者常常使用对话框和表单完成两者之间的沟通。日常生活中,我们与他人相处常见四种模式:与老板,与亲人,与同事,和与服务员。人们在使用产品时所期待的应是最后一种。
  当我们在高档的西餐厅就餐,会发现好的服务员不必卑躬屈膝,但一定是客户至上的,在我们需要的时候提供帮助,不问过多烦人的问题。做一名好的服务员也许不难,但当交互设计者深陷在产品的功能、信息、流程和商业逻辑中,经常就把礼仪这件事抛之脑后了。
  案例一word和page的退出保存对话框:不问已经就坐的顾客是否吃饭
  对程序设计而言,流程判断节点的是和非都是必须考虑的范围,但对人而言,在特定条件下人具有的可推断的行为。例如顾客走进一家餐厅就坐,服务员应该问“您想吃点什么?”,而不是问“您要吃饭吗?”。顾客到餐厅当然是来吃饭的,如果他不想吃了,只要能够离开就好了。在流程图和逻辑上,顾客存在离开的可能,“是否吃饭”也的确在“吃什么”之前,但这并不意味着交互设计要以这种方式问话。
  今天我们在MAC上使用word和page编辑同一篇文档,点击关闭会发现弹出的对话框是不同的。微软word对话框会问是否保存,而苹果page对话框则问存在哪里,同时提供不保存的按钮。word的做法即在问就座的顾客是否吃饭,用户花费数小时写的文档,为什么不保存?而page的设计者就聪明多了,将是否保存带入到保存到哪的问题中。不问已经就座的顾客是否吃饭,核心是交互设计应从人的行为模式出发,脱离程序思维,这样用户就不会觉得产品表现的刻板、愚蠢和失礼。
  案例二京东和淘宝退出订单支付:不过度问烦人的问题
  不论我们在餐厅、商店还是理发店,当我们说明要求后,都希望服务者能够快速理解,而不是反复确认。经常网购的朋友会发现,京东商城和淘宝在退出确认订单和支付的界面是不同的。
  在退出确认订单界面时,京东用模态对话框问“便宜不等人,请三思而行,我再想想or去意已决”,淘宝则不问。对多数用户而言,地址是默认填充的,退出订单等需要时再买并不付出什么代价,在这里京东让用户确认自己的行为是非常让人厌烦的。
  而在退出支付界面时,京东仍然用模态对话框问“确认要离开收银台?超出时间订单会被取消,请尽快支付,继续支付or确认离开”,淘宝则不问,直接显示待支付的订单,如果用户不管,订单会自动删除。在这里,京东更加失礼,用户明明已经点击退出支付,为什么还要问,甚至要求用户尽快支付。
  京东所展示的正是过度问烦人问题的服务员形象,让用户反反复复确认自己的行为,感到厌烦和丧失信心,相比之下,淘宝好多了。
  案例三麦当劳自助点餐与饿了么提交订单:不问问题而是提供选择
  回答问题与选择截然不同,前者让人感觉是被动的,被压制的行为,是日常生活中与上司和长辈间的对话模式;后者则会让人感觉是自主的,可控的行为。聪明的服务者不会强迫用户回答问题。
  麦当劳设计了超级棒的自助点餐系统,但在对话框交互使用上不尽人意。当人们选完需要的食品后,屏幕弹出对话框问是否外带,选择之后屏幕又弹出对话框问是否确认订单,选择后屏幕又弹出对话框问是否送到餐桌。这种连续的独占态YN发问让用户感到霸道和压制。同时由于一旦回答就无法返回上一层,用户潜意识会担心自己选错,倍感压力。
  虽然信息是必须向用户询问的,但麦当劳使用了错误的方式,饿了么则做得好多了。在饿了么的订单确认里,商品明细,是否匿名,用餐人数等必要信息,是让用户选择而不是逐个回答,一并确认提交。
  案例四轻芒和知乎的推荐信息:不强行推荐服务
  出于业务或商业需要,有时候产品必须向用户推荐信息和服务,但这不一定就和用户体验相违背。当我们走进麦当劳的时候,门口的展板,餐厅内的墙壁,服务台上都是推荐产品的广告,甚至在我们就餐中会发现,连食品的的垫纸上都是新品广告,但我们从未感觉这影响了我们就餐的体验。麦当劳摆放在那里,需要就买,不需要可以不看,不是强推给顾客的。
  有一款APP叫轻芒杂志,每隔几天打开,文章上就会叠一摞卡片消息,分别来自该公司CEO、PM、设计、运营和客服的各种消息。更糟糕的是,这些卡片根本无法移除,盖在文章上无法阅读文章内容,只有一个一个点开看完关闭才能消除。这绝不是一个好服务员的体贴,而是愚蠢服务员的喋喋不休。
  相比之下,知乎首页的付费Live呈现就好多了,这是用户打开应用第一眼就会看到的,但却不会感觉因为其影响了正常使用。知乎在这里非常聪明的使用了泳道模式,每个Live项目在卡片里以缩略态方式呈现,这些卡片可以横向滑动,在小面积内具有极高的信息呈现效率,不干扰用户操作。不强推服务给顾客,是好服务员应有的礼仪。
  案例五京东和阿里闲鱼:记住顾客的喜好
  我们每天都承受着移动产品各种推送的消息轰炸,从短信唤醒,到邮件活动,再到微信优惠券,可是当我们打开,很快就丧失信心了:我家里明明有空调,你推什么空调大促?我明明是个男子,你怎么推女装打折呢?几次下来,再推送的消息躺在了短信、邮件和微信消息堆里不再被打开,成为了垃圾。
  虽然APP可以不知道我是谁,但是我可一直在使用这款软件啊,从行为中分析我的偏好,记住我的喜好,为我做个性化推荐让我开心很难吗?多数APP却根本不关心这一点,但有一款产品好像不一样,这款产品就是阿里旗下的二手平台闲鱼。通过记录搜索和浏览行为,闲鱼的iOS通知、首页置顶和前几页的商品都是用户所关心喜好的,这是一位能记住顾客喜欢的服务员,丝毫不让人感觉是打扰,而是感到十分贴心。
  理解使用产品的是人,人具有主观感受,我们就将以全新的视角重新审视和设计产品的交互形式。我们为产品设计出好服务员一样的礼仪,但我们很快发现这样的感觉还不够,因为有一个客观事实存在:所有的交互形式都最终在设备上呈现,而人通过眼睛浏览阅读和手指点击拖动使用设备。
  四为舒适而做的设计:舒适是好用的前提
  三年前我购买了当时摄像头达4100W像素的NOKIALUMIA1020。当我在父亲面前显摆这个黑科技产品时,父亲拿过手机大概看了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键盘模型产生映射,用户会蹩脚的输入字母。小米的特殊键盘用错了地方,电视不是一个输入设备,搜索的软键盘只是暂时态使用,人们无法通过经常使用增加经验,所以就会一直觉得不舒适。
  暂时态下应避免新奇的操作形式,这会让用户迷惑不知所措,无法舒适操作。
  设计界伟大的DieterRams曾经说:
  “设计和艺术是不同的,但很多人都没有认识到这一点,设计是为了人而产生的,如果你不明白人,你就不能理解什么是好的设计。”
  当我们理解了最终使用产品的是人,人具有感性层面,我们就将从全新的视角看我们手机中的APP,从而开始感知和理解到伟大产品的动人细节。感谢大家阅读。
  【未完待续】
  相关阅读
  微交互的设计案例与思考(上篇)
投诉 评论 转载

UI设计师:教你以问答形式“来“把玩”APP作为APP狂热分子,定期去AppStore或者其他渠道找新鲜的产品来玩儿,已经持续了很多年。但是光浮于表面的玩儿,还不够。因为只有了解产品背后的逻辑才能更全面的解读为何会那么设……浅析栅格系统的基础六要素这是一篇非常非常基础的关于栅格的文章,如果你已经对栅格系统有了深入的理解,就不用浪费时间看这篇文章了!以前有很长一段时间,我一直搞不明白到底什么是栅格,听过很多解释之后还……界面交互动效核心知识的分类与总结这篇文章是基于我自己的理解对界面交互动进行了分类整理和总结。什么是界面交互动效?界面交互动效是展现界面间的转换和界面内元素变化的交互反馈。而效果就表现在触发与结束的……内容展示页,是选择瀑布流还是分页呈现?每个设计师在工作中都会纠结于是使用瀑布流还是分页列表去展示内容。到底如何选择,让我们先分析下两种交互方式的优缺点。瀑布流瀑布流是一种允许用户不断往下滚动,页面自动刷……阿里设计师分享:UX设计心理套路在阿里巴巴国际站,我们对心理学理论进行了客观的数据验证,把科学理论应用至前线设计,提升设计效益。我们沉淀及过滤出一些行之有效的方法及案例与同业共享,希望普惠更多设计师能活化科学……如何运用预置的内容和默认设置,创造更好的用户体验首先出现的数值和设置内容就是默认项。它们的作用似乎微乎其微,但默认项(和它们的设计者)掌握着强大的力量替用户做决策。本文中,我们会讨论如何运用预置的内容和默认设置,创造更好的用……别被数据骗了视频搜索页面设计研究总结如今的互联网PM都会对产品数据进行追踪,作为自己的KPI指标。但是在实际的设计结果中,令人满意的数据有时却并不一定会说明产品的实际使用效果,数据呈现的结果和用户的实际使用体验有……来自腾讯交互设计师的分享:交互微动效设计指南本设计指南适用于UI界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率。……制作在线UX作品集的四个步骤本文作者将帮你系统梳理一下创建一份作品集的全部步骤,让你明白UX作品集的常规创建流程。对于UX设计师而言,作品集非常重要。一方面,它是证明你的天赋、经验的证据,另一方面,……微交互的设计案例与思考(中篇)设计师和初级产品经理在面试中不能很好回答APP设计好在哪里,并非是由于平时使用太少,而往往因为缺乏一种视角,即产品是为人而设计的。当我们意识到使用产品的是人,人具有感性层面,就……浅析手机交互设计中的“拇指法则”你有没有遇到过一款APP让你用的很不舒服?你的拇指必须要伸得老远才能够得到菜单,或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受,或者更……交互进阶:一套较完整的轻量竞品调研法本文作者将介绍自己常用的一套较完整的轻量竞品调研法,一共分为五个步骤。如果你是一名设计师,且经常参加方案评审的话,肯定听过这些话:“这个地方怎么不借鉴X产品?”……
作为产品经理,你的核心技能是什么?作为产品新人,我是如何做产品测试的从市场出发,将用户分层定义实战案例:从降低客服成本问题,说说解决问题的通用流程周鸿祎做好产品的六字真言:刚需、痛点、高频送给刚入行的产品经理们,我的需求之见8个源自谷歌值得一看的用户体验观点产品学习笔记所谓产品汪,你认识吗?产品经理:如何构建产品和用户关系模型五分钟理解什么是面向对象Android适配的那些P事产品新人一年的产品经历,产品经理的世界是这样的

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界