首页

工具型产品可用性测试怎么做?

资深UI设计者

本文将针对酷家乐旗下云端建模工具——酷大师所做的可用性测试,说明工具型产品如何去做可用性测试。

打造一款产品的过程中,我们需要时刻保持警惕:功能是否满足用户核心需求?交互流程能否做到简单流畅?是否还有未知领域可以由用户带来启发?进行一次准备充分的可用性测试,无疑是解答上述问题快捷有效的方式。

下面我将结合本次针对酷家乐旗下云端建模工具——酷大师所做的可用性测试,说明工具型产品如何去做可用性测试。

准备阶段

第一步:明确测试目的

测试目的不同,安排的测试任务就不同,进而就会影响最终得到的结果。所以测试之初需要考虑清楚测试目的。国际标准化组织在人体工程学设计的人机交互部分( ISO9241) 把b2可用性c 规定为 3 个指标:

  • 有效性:用户使用该系统完成任务的精度和完整性;
  • 效率:用户使用该系统完成任务需要耗费的资源;
  • 用户满意度:用户对该系统的舒适度和认可接受程度。

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

结合这3个指标,我将本次测试目的设定为:

  • 了解用户对酷大师现有主流程的使用现状;
  • 了解用户对酷大师的体验满意度及需求满足情况。

第二步:确定测试时间和环境

测试时间:

  • 测试准备时间:建议为期2天。准备相关文档、设备、场地、任务等。
  • 用户测试时间:建议为期3-5天。可短时间内容集中进行用户测试,或在工作日穿插进行测试。
  • 结果整理时间:建议为期5天。用于整理测试信息、落实产品迭代任务、撰写总结报告等。

测试环境:

  • 线下环境:邀约用户到公司办公室现场测试;
  • 线上环境:考虑到用户路程及时间等限制性因素,也可在线上进行测试。
第三步:安排测试设备
  • 操作设备:取决于目标用户群体主要使用的设备,假如用户都使用ipad,就要将ipad列为主要操作设备。
  • 录音设备:测试结束后需要进行详细的信息整理,录音资料可以帮助回忆沟通内容。可使用手机自带录音功能或专业录音笔。录音前必须告知用户,在征得许可后方能进行录音。
  • 录屏设备:工具型产品的操作过程中涉及很多细节,录屏资料可以帮助工作人员进行问题定位。可使用电脑自带录屏功能,或录屏工具。
  • 远程设备:由于部分用户需在线上测试,可使用在线工具进行远程协作,比如:zoom、腾讯会议等。
  • 记录本和笔:测试过程中进行表格填写时需要使用。
  • 文档资料:主要包括测试过程中需要填写的表格。建议打印n+2套,n是测试样本数量,另外2套备用。
  • 场地准备:提前预约会议室,给用户独立的操作环境。
  • 测试酬劳:具体可根据公司政策进行准备。
第四步.邀约测试样本

Nielsen在理论中认为5-8位用户可以测试出85%的可用性问题,实践下来确实如此,样本数量建议控制在这个范围。

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

在同一个产品的用户中,新手用户、永久的的中间用户、专家用户这三类角色通常是共存的。我们需要让新手用户快速和无痛苦地成为中间用户;避免为那些想成为专家的用户设置障碍;最为重要的是,让永久的中间用户感到愉快,因为他们的技能将稳定地处于中间层。

本次测试中,我尽量使样本中包含这3类用户,比例为2:3:3。测试之后,就可以大概知道对于不同类型用户来说,产品可用性和

易用性情况,也可以得到多维度差异化的反馈。

第五步:设计测试文档

测试中需要使用一些管理用户信息或记录用户反馈的表格,在准备阶段就要做好表格设计和打印工作。下面是具体的表格,可根据具体需求做相应调整。

《用户信息&排期表》

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

在这张表中管理测试用户信息b2姓名、职业c 、测试安排「时间、地点」、测试工作人员「主持人、观察员」。一场测试尽量安排一位主持人和一位观察员作为工作人员相互配合。

主持人负责与用户沟通互动,推进测试进程;观察员负责设备和资料保障,以及测试过程中的行为观察和记录。一个人独自承担主持人+观察员角色的话,在用户反馈密集而现场又出现临时状况时就会手忙脚乱,所以建议两个角色分工协作。

《用户基本信息问卷》

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

在这张问卷中可以设计与产品相关的用户基本信息问题,问卷设计原则为:

  • 关联性:与需要测试的内容相关;
  • 层级性:问题层级依次递进,使用户回答问题时能够思维连贯,由浅入深;
  • 隐私性:尽量避免涉及用户敏感信息,必须涉及时需解释原因,尊重用户意愿。比如有些用户不愿透露年龄、收入等信息。

这张问卷使用在线工具呈现,比如腾讯问卷;也可现场打印纸质问卷进行询问填写。大多数用户比较喜欢现场填写。

《单任务满意度问卷》

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

测试过程中,我们需要让用户完成一个完整任务,该任务需要拆解成若干单任务。在每个单任务结束后,立刻对用户进行该单任务的满意度询问。

《SUS系统可用性量表》

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

用户结束完整任务后,填写该量表。该量表由10个题目组成,包括奇数项的正面陈述和偶数项的反面陈述。在结果整理阶段,我们再对该量表进行分值计算。

第六步:规划测试脚本

从开始到结束,需要主持人将整场测试的各个环节串联起来,引导用户操作,推动测试进程向前发展。为防止意外状况出现,可以预设测试脚本,规划情境和话术,并在预测试环节验证及优化该话术。

比如可以这样开场:“首先非常感谢您今天能来参加我们的可用性测试,我是主持人XXX,这位是观察员XXX。我们这次是对酷大师建模工具进行可用性测试,想了解您使用时的体验和感受。

在这里需要强调的是:我们测试的对象是工具,而不是您,所以您不必感到紧张……当您使用工具时,我们会观察和记录。今天的测试大概需要一个小时,测试过程中会有休息时间。测试过程中,请您将手机保持静音状态……“

比如可以这样进行两个单任务环节串场:“好的,我们已经完成了第一个单任务。现在有一份简单的问卷,填完后可以稍微休息一下。

「出示问卷,并作简要填写说明」「问卷完成后进行简单访谈,用户也稍稍休息后继续」现在,我们开始进行第二个单任务「要清晰且大声地说出这句话,以“鼓励”测试参加者和提示记录人员」……”

具体话术依据需要测试的内容和情境展开,尽量做到专业、友好。

第七步:设计测试任务

可用性测试往往带有一定目的性,而这些目的能不能达成,取决于任务与目的的关联性以及用户是否能够给到对应反馈。通常,测试用户是愿意给予反馈的,那么测试任务的设计就成为整个准备阶段最重要的环节。

做好测试任务的设计和拆解:需要具备从全局高度理解产品的能力;需要知道产品全链路的过去起源、现状细节、未来走向;需要把控重点,拎出骨架;需要去繁就简,以较少的任务成本测出最有价值的信息。

本次测试中,我设计的主流程是:模型创建——材质铺贴——模型渲染——模型发布——模型分享,并且我还希望测到拉伸、阵列、组编辑、移动、旋转这样的主功能。所以我将这两块有机结合,给到用户创建一个「楼梯踏步模型」的任务。

我将任务按照主流程拆解为5个单任务,主功能分布到其中几个单任务中,且尽量做到两个单任务中不重复使用同一个主功能。

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

预测试阶段

大多数产品都存在一些限制因素导致的尚未解决的已知问题。这些问题在测试中出现的话,会转移用户注意力,削弱本次测试的价值,偏移本次测试的目的。

另外,我们准备阶段进行的种种规划也需要得到验证。结合这两个原因,正式测试之前建议进行内部的用户预测试。找出并修复测试环节中的漏洞,准备好各类突发状况下的planB,以及修复影响正式测试的已知问题,提高正式测试的执行效率。

正式测试阶段

第一步.测试开场,填写《用户基本信息问卷》

本次测试是在工作日穿插进行8场一对一用户测试。这样可以放缓测试节奏,在两场测试间隙有充足时间简单整理上一场收集的信息,与下一场用户确认测试安排,以及对突发状况及时处理。

正式开始前半小时,观察员需确认设备都已调试妥当,资料都已打印完成。主持人可与用户进行联系,带领用户进入测试场所。主持人可以通过填写《用户基本信息问卷》了解用户基本信息,帮助用户消除在陌生环境下的沟通障碍。也可以使用户以放松状态完成测试任务,以开放心态为后续拓展性话题的展开做好准备。

无论是填写《用户基本信息问卷》还是后续的问卷,建议采用主持人提问、用户回答的方式收集信息。用户的注意力集中于思考和沟通,就能够提供更多有价值的信息,而不是忙于撰写问卷。

第二步.完成单任务,填写《单任务满意度问卷》

主持人按照顺序分步解说单任务。单任务测试过程中,工作人员不要去打扰用户,也不要给用户任何提示,所有的问题都等到测试结束再进行解答。

观察员需仔细观察用户操作,记录用户是否很容易判断出如何操作,完成某个重要功能点时是否顺畅;需随时关注用户表情,记录下明显表情相关联的流程或功能点等等细节。

一个单任务完成后,提示用户稍事休息,然后提问《单任务满意度问卷》中的问题。此时可以回答用户操作过程中的疑问,也可以藉由操作中的细节做延展发散,询问用户操作感受。通常可以获得很多针对该单任务的意见和建议。这些意见和建议后续就需要记录整理,作为优化任务帮助提升产品可用性和易用性。

第三步.填写《SUS系统可用性量表》,了解整体评估

整个任务完成后,可以藉由填写《SUS系统可用性量表》,了解用户对整体的评估。由于量表的10个题目中,包括奇数项的正面陈述和偶数项的反面陈述,所以在提问过程中一定要陈述清楚题目。如果用户认为有些问题无法回答,则视为其选择中间值。在后续的结果整理阶段,再对量表总分进行计算。

在问题询问过程中,可以有针对性地询问原因。比如针对第2个问题“我认为酷大师建模工具的操作较为复杂,其实没必要这么复杂”。

如果用户认为不复杂,则可以询问哪些点非常简单易用;如果用户觉得复杂,则可以询问哪些点觉得复杂。用户告知原因的同时,常常会说出他认为比较简单的解决方案。这些解决方案或者来自于竞品,或者来自于实践,或者来自于创新,常常可以帮助我们开拓思路,走出认知盲区。

第四步.拓展性访谈,测试收尾

在这个环节可以不必拘泥于原定的测试任务。建议预留一定时间,大到行业发展,小到产品细节,与用户进行一番深度探讨。这些来自于一线的用户常常会带来一些新鲜的灵感,为产品未来的拓展提供一些线索,解决产品当下的一些困惑。

由于我们一开始就对测试样本进行了分类,所以也可以结合前面几个环节的信息,对各分类下的用户诉求和行为习惯进一步验证、区分、归纳。

结果整理阶段

第一步.SUS量表分值计算

首先,我们需要计算SUS量表总分。奇数项计分采用“原始得分-1”,偶数项计分采用“5-原始得分”。由于是5点量表,每个题目的得分范围记为0~4(最大值为40),而SUS的范围在0~100,故需要把所有项的转换分相加,最终再乘以2.5,即可获得SUS分数。

其次,我们可以获得分量表得分。SUS量表中,第4和第10项构成的子量表为“易学性”(Learnability),其他8项构成的子量表为“可用性”(Usability)。

为了使易学性和可用性分数能够与整体SUS分数兼容,范围也是0~100,需要对原始分数进行转换:易学性量表转换分数的总和乘以12.5,可用性量表乘以3.125。

最后,我们可以将SUS量表分数换算成百分等级来解释,找到对应评级。百分等级的意思是指测量的产品或系统相对于总数据库里其他产品或系统的可用性程度。比如SUS得分是73分,其百分等级大约为67,意味着比大约66%的产品可用性更好。

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

第二步.整理问题列表,推进迭代优化

做完所有用户的测试之后,我们一定会收集到很多涉及具体功能点的反馈。对于正向反馈,我们可以谦虚地接受,并且思考这些打动用户的点如何复用;对于非正向反馈,我们应该冷静地思考,它们将是本次可用性测试中最直接而有效的收获!

对这些反馈可以进行分类归纳,将其中能够立即应用于产品的内容整理出来,按照优先级,放入产品迭代优化任务中。这些任务将提高产品可用性,在数据层面能够帮助提升留存率。我们这次可用性测试中总共获取97个有效反馈,其中62个整理进产品迭代任务,并且取得了用户使用数据上的相应提升。

第三步.撰写测试报告

整个测试环节通常只有2-3位工作人员,如果希望能和团队一起分享测试的收获,建议整理一份总结报告。可以使用word或者ppt形式,说明测试背景、测试用户信息、主要结论、发现的问题、以及解决问题的行动项。

总结升级

经过几场颇具收获的工具型产品的可用性测试之后,我做了一些总结,希望能够形成适应于工具型产品的可用性测试体系:

1. 目的性

工具型产品的可用性测试目的比较统一:帮助团队优化体验路径;帮助团队明确用户使用产品时的体验感受;帮助设计师验证设计指标。

2. 专业性

完整的可用性测试全程都需要专业支撑,从筹备到进行,从任务到结果,每一个细节都需要考虑到位。在这过程中我们要尽量保证:流程规划清晰;文档整理完整;分工明确到位。

3. 参与性

大多数可用性测试是用户体验相关岗位人员发起,但是用户对于产品的反馈与团队每位成员息息相关,所以建议团队共同参与。比如在这次可用性测试中,就邀请了产品经理和研发人员担当观察员或主持人;邀请用研人员给予专业指导培训;在对测试反馈的问题进行优化过程中,也是团队通力合作,推进迭代快速进行。

4. 周期性

可用性测试不是进行一次就结束的一场表演。而是结合产品进展情况,可持续实施的一种有效的快速验证方式。

可以在新产品上线后进行,可以在重要功能上线前进行,也可以在迭代优化后进行。建议周期性进行可用性测试,取得一些结果后立即应用于产品,隔段时间再次验证,形成良性循环。亦趋近于精益用户体验中倡导的基本MVP理念。

当然,每次可用性测试都需要工作人员投入大量时间和精力,所以专业赋能可以成为很好的解决方案。即团队成员可以学习使用该方法,轮流进行周期性操作。

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

写在最后

我们日常其实接触并积累了大量专业方法,可用性测试只是其中一种。在不断实践的过程中才能真正体会到这些方法的魅力之处,在不断落地的过程中才能打磨自身的方法论体系,形成属于自己的一套打法,给产品设计带来新颖的专业思路。

文章来源:优设    作者:酷家乐UED 


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

拼多多抢走了我妈,从淘宝手里

周周

编辑导读:对于老一辈人来说,他们没有赶上互联网兴起的时候,等到想要主动“触网”时,才发现很多操作根本搞不清楚。尽管产品设计师已经极可能考虑到了老人群体的用户体验,但在实际操作中,老人家还是一头雾水。这时,操作越是简单的产品,越能够赢得他们的喜爱。本文作者从自身经验出发,对这类现象进行分析,与你分享。

上周某天吃完晚饭,我妈递过她的华为手机怯怯地问我:你有空吗?我想叫你帮我跟那个商家说换一个快递,我们家这边的百世快递的站撤了,叫他们不要用这个快递。

我脑海中闪过一个念头:嗯?最近我没有帮她付款啊。但随即也是接过她的手机打开了淘宝。我妈立刻阻止我:不是淘宝,是拼多多。随即自己打开了她微信里的拼多多小程序,演示给我她找不到商家客服。我跟她说,这个功能要用APP才行,于是帮她下载了拼多多APP并很快解决了问题。

弄完之后,我们又展开了这样的对话:

我妈:哎呀,这个拼多多真是太好了,物美价廉,超方便!你怎么不早教我用!

我:我自己都不怎么用拼多多啊!

我妈:这个是我的舞友上周教我的!我打开一看,哇,好多有用的东西,又便宜!第一天我就买了几百块的!

我:但是拼多多很多假货啊!

我妈:我又不像你们追求什么名牌!有什么假货可言?一条裙子30块!

我:……

我妈:而且!以前我在淘宝总要你帮我付款,现在我用拼多多自己用微信就可以支付了。

我:我早就叫你开个支付宝账号,你自己又不开!

我妈:那么麻烦,我不会,你又不教我!而且又要绑定银行卡,万一哪天我的钱被人家骗走,那些什么黑客……

我:哪有黑客黑你,你又不是马云……

我妈:还有,拼多多退货很方便!以前我在淘宝的时候,退货要你帮我搞,还要在家等快递上门,很不自由,现在我自己去菜鸟驿站退就得了。

我:好吧。

我妈:以后我就用拼多多,我那些舞友都在用!

我:你开心就好。

我回头想了想,这是一个以用户定位和产品特征为优势抢夺用户的典型场景。

首先看看以我妈为原型的粗略用户画像:

  • 年龄特征:60岁左右
  • 工作与生活特征:退休在家,时间较多
  • 消费能力:退休金4000元左右
  • 家庭情况:已有孙辈
  • 人际关系:以广场舞舞友、同学、工友、插友为主的人际关系圈,集聚在微信上
  • 消费态度:不追求牌子,追求低价
  • 网购习惯:淘宝的老用户,但没有支付宝账号;网购品类主要为衣物及家居用品
  • 触媒习惯:微信(微信群、朋友圈)、今日头条

为什么我说拼多多是从用户定位和产品特征这两个维度抢夺走了我妈这样的淘宝用户的呢?

首先,我用的是“抢夺”这个词。

我并没有用挤占、分流这样的词。因为,在跟我妈的交谈里,我已经感受到她心里估计“从此淘宝一生黑”了。也确实,一个月以来我妈没有再叫我在淘宝付款过。所以,我想我妈大概率未来不会再用淘宝了,也就是说,淘宝直接流失掉了我妈这个用户。

其次,来看看用户定位。

根据上面我列出的以我妈为原型的用户,多吗?我简单查了一下。

根据国家统计局官网上发布的《中华人民共和国2019年国民经济和社会发展统计公报》,60周岁以上的人口约有2.5亿人,60-65周岁的人口约有83250000人,分别占人口总数的18.1%和6%;根据中国互联网信息中心官网发布的《第46次<中国互联网络发展状况统计报告>》,截止2020年6月,我国手机网民用户规模达9.4亿。

那么,根据这个比例可以推算,这样的用户大约在5千万—1亿的规模。

这么大的一个用户群体,实际上是淘宝自己放弃掉的。自从前几年淘宝打假货的行动和品牌化(力推天猫)的战略执行以来,实际上大量的县城以下、60岁以上的用户都被淘宝放弃掉了。

以我妈为原型的这批用户,他们大多数没有支付宝账号,但在微信上有钱,但除了平时发发红包,菜市场便利店买点东西,基本上还是没有用出去。于是,这批用户沉淀在微信钱包里的海量的钱,很难直接转化到淘宝上。

另外一个关键的地方在于,他们对淘宝是有怨言的,但在拼多多出来之前,没有替代物。某种程度上来说,对用户而言,忠诚度是很虚无的。真正对品牌有感情而产生“忠诚”的用户极少极少,品牌还是得需要不断优化产品,满足用户的需求。

品牌也好,产品也好,本质上是为用户提供价值,而不是要跟用户“谈恋爱”。

这是很多品牌的一个误区。没有在自身的产品上下功夫,去了解用户瞬息万变的需求,而去打“情怀”,讲“文化”。所以,我们可以看到当某些品牌醉心于自己的“情怀和文化”之时,其竞争对手在了解用户需求和优化产品而推出竞品后,瞬间打垮行业老大哥的案例。

最后来讲讲产品特征。

我妈使用淘宝的流程是怎么样的呢?

挑选商品——下订单——点击“找人付款”——发送需支付的订单到我的淘宝账号——退出淘宝——打开微信——告诉我发了一个订单——发红包给我——我看到微信或淘宝信息——点击需支付的订单——支付——退出淘宝——打开微信收红包。

而她使用拼多多呢?

挑选商品——下订单——支付。

当我列出这两个产品使用流程之后,我猜如果你是我妈,你也会用拼多多了。

在我妈跟我的对话里,还突出强调了“退货难”这个点。实际上是淘宝的物流服务不好吗?并不是。我一直觉得淘宝的物流虽然不如京东,但并不差,而且也不断在优化升级。但为什么我妈还是觉得不好呢?这一点不能单纯地从物流本身来看,而得回到淘宝的产品来看。

在淘宝上,推出了一个功能,叫“找人付款”。当时我觉得这个功能很好,解决了我帮我妈买单时,她要跳出淘宝从微信给我发链接的麻烦。但最终却带来了一个重要的弊端:当要退换货时,我这边无法执行,她那边又不知道如何操作。

而当我从PC端登上我妈的淘宝账号之后,PC端的退换货服务非常麻烦和繁琐,让我都研究了差不多一个小时才解决。而最后,我妈那边又无法支付退货费用,我在PC端也支付不了,也不能“找人付款”。总之,整个过程极其麻烦。虽然淘宝也意识到了产品上的缺陷,但目前的情况而言,这样的产品还是对于我妈这样的用户非常不友好。

而拼多多呢?它基于微信这个社交生态圈。加上没有什么太多余的功能,我妈很快就能上手了,自己操作还是比别人代操作方便多了。

谈到这里,我还意识到一个重要的问题。

从产品对人际关系的影响而言,淘宝是负向的,而拼多多是正向的。从某种程度上而言,60岁以上的这代人,是被互联网抛弃了,所以当他们想搭上这波潮流时,不得不面对自己的儿女,需要向他们请教,怎么用怎么学。这一点首先就会让不少子女心烦,不少父母自卑。

再进一步,如果每次父母网购都得“捆绑”上子女时,对人际关系是正向的吗?而在拼多多上购物时,他们不仅可以大大优化自己的产品使用流程,还能跟自己的老朋友们一起拼单,互惠互利,这对人际关系的影响有很大的正向作用。

你有什么被别的产品抢走的故事吗?

一点个人小想法,想到哪写到哪。

如果你有不同的意见和想法,欢迎评论或留言。


文章来源:人人都是产品经理           作者:@源记物语


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

Apple 的设计哲学:网页篇

周周


Apple 致力于让每件产品都赏心悦目,与其说官网是产品展示平台,倒不如说它是苹果产品分支的延续。从 Apple.com 找设计灵感是每一位设计师都做过的事,那它到底有何魅力?文章对Apple的网页设计展开了梳理分析,与大家分享。


一、沉浸与交互式体验

每当有新产品发布时,我们都会被它的 Landing page 所吸引。不管是 AirPods Pro 也好,和前段时间发布的 iPad Pro 也一样。

这背后是 Apple 基于 webGL 技术,创造的一种沉浸与交互式产品体验。

1. 连续性

我们在产品介绍页可以看到,苹果使用了大量的滚动 scroll 来体现连续性。

一方面,滚动作为大多数 Web 用户最自然的操作,学习成本极低。

另一方面,在冗长的页面下,滚动能让产品特性保持更自然的转场衔接。

iPad Pro 的连续性

2. 趣味性

另外,采用了大量的动画式转换(animated transition),即操作时展示的动态效果,以此来增加趣味性。

伴随着丰富的、若隐显现的章节文案,就像电影的旁白一样,娓娓道来。

通过滚动的方式增加交互性,这是明智之举。试想一下,如果只放置已渲染的演示视频,那么用户的操作会受到限制,只能在视频中前进或后退,毫无乐趣可言。

AirPods的趣味性

二、言之有序

1. 秩序感

说到言之有序,我们看 iPad 的页面介绍。四款产品,分别是:iPad Pro、iPad Air、iPad、iPad mini。

拍摄角度的秩序感,可谓妙不可言。

iPad的秩序感

  • iPad Pro 的拍摄角度接近于正侧面。
  • iPad Air 是四分之三侧面。
  • iPad 是正面。
  • iPad mini 是俯视。

如此一来,即显得有序,也不会导致视觉疲劳。

2. 设计语言

其次,官网与 iOS 保持协同的设计语言,给用户呈现了一致的感官体验。

从 iOS 11 开始,苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular + Light 的组合,转向的 Medium + Bold ,以此增强信息传播中的识别力。

HomePod

另外,高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的风格。我们可以很清晰的看到 Web 设计的同步转变。

三、层次

1. 视差

第三是视差带来的层次感。

苹果奉行包豪斯的无装饰和极简的理念。当然,它不是那种附庸的美观及外表的光鲜,而是将复杂难懂的技术以简洁的形式传达给用户。

Mac Pro 视差滚动

在信息层次方面,Apple 的编排设计由浅入深,犹如抽丝剥茧。很好的利用了视差滚动,传达图片与文字之间「层」的概念。这种深度感可以增加用户的理解和乐趣。

2. 视觉张力

不仅如此,样式上富有视觉张力。或扩张、或收缩、或吸引、或排斥之感觉,呈现刺激与震撼。举两个例子:

A13芯片的扩张力

扩张力:整个画面以 A13芯片 为视觉中心点,元素和布局围绕这个视觉中心点向外扩张。采用发散式的视觉引导,视觉张力就出现了,让人感觉巍峨壮观。

Pro级摄像头的排斥力

排斥力:通过元素的大小对比,可以形成一定强度的视觉排斥力。Pro级摄像头 辅以大特写,传达空间意识。视觉上被其构图、美感触动。

四、高级感

再聊聊苹果的高级感是怎么来的?

1. 视觉降噪

我们都知道,高饱和度的色彩,会影响人的情绪波动。相反,低饱和度的配色,对人眼的刺激较弱,会有一种冷静且克制的高级感。

iMac Pro 高级感

回过头来看苹果官网的大部分页面,除了产品界面色彩 和 按钮蓝 之外,其他的文字、背景、控件一律采用黑白灰色系,以此营造高级感。

甚至是 iPhone 11 Pro 新出的暗夜绿,也是高级灰中加了一点点绿而已。

换言之,减少使用颜色的数量,降低色彩的饱和度都能削减色彩对人的情绪,起到提升产品高级感的效果。

iPad 留白

除此之外,恰当的留白可以更加突出产品内容,让重要的信息更准确的传达。并且能营造出广阔的空间感,让画面得到延伸,呈现一种意境美。

所以我们做设计时应当多做减法,避免无意义的视觉元素堆砌,反而能让你的设计更有高级的气质。

这又印证了现代主义建筑大师密斯·凡德罗的那句话:Less Is More

2. 配图

当然,只有留白是不够的。既然是做宣传,那么一份高分辨率、精致的配图就显得尤为重要。

苹果官网大部分的产品都是采用实拍+后期修图,而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果,这一点能看到苹果对于品质的追求。

Designed by Apple in California

不仅如此,苹果产品圣经《Designed by Apple in California》,以及壁纸同样是由摄影师拍摄完成。有兴趣的同学可以看下面这个幕后制作视频,相当硬核。

3. 苹果式文案

做过英文 Web 的设计师都知道,英文往往比中文更好设计,相同的布局英文出来的效果也更好看。

这不是崇洋媚外,心理学有个词叫做「母语羞涩」。简单来说就是,中文对于我们来说,太常见了会让人产生一种廉价感(实际上是羞涩感)的心理感受。

老外也一样,你可以看到美国企业:苹果、麦当劳、星巴克都是使用图形 Logo,而日本企业不用母语,而是用英文,比如 SONY、TOYOTA、Canon。

你的下一台电脑,何必是电脑。

回到苹果官网,我们看到一部分文案是英文产品名称,这个不会感觉羞涩。

那中文部分怎么办呢?比较有意思的是,Apple 的本土化团队用了完全不对仗但押韵、奇怪的排比、双关、重复等修辞手法。虽然语感很差,但基本上能明白字面意思。

其实这样做的目的就是为了创造一种陌生感、一种独特的语言风格,来凸品牌气质。举几个例子:

  • 重复:比如说 iPad Pro「你的下一台电脑,何必是电脑。」
  • 双关:比如说 AppleWatch 的「它会时时关心你的心。」
  • 排比:比如说 iMac的「从极速,到神速,任你提速。」
  • 押韵:比如说 配件 的「可重复充电,又可圈可点。」
  • 对比:比如说 iPad mini 的「身量小,能量大。」

4. 仪式感

最后一点。生活要有仪式感,苹果官网也有仪式感。

国际妇女节专题

在一些特殊的日子里,例如三八节当天,友商选择打广告促销。而苹果推出了国际妇女节专题,致敬女性的伟大,这一做法颇具人文情怀。

不过话又说回来,感动归感动,还是参与友商的打折活动香。

#相关阅读#

Apple 的设计哲学:交互篇

Apple 的设计哲学:UI 篇

Apple 的设计哲学:声音篇


文章来源:人人都是产品经理           作者:阿洋


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

为什么用户注册这么简单,想注销却如此麻烦?

资深UI设计者

最近国外的设计平台频繁出现一类内容,大概类似于「产品设计中的伦理道德与用户体验」,里面的内容有引起我的一些思考。

我先给大家举个例子,来解释一下上面这句话的意思。

以前,我们聊界面的设计,说界面当中如果有两个按钮,就要引导用户走向主要操作,弱化次要的。类似于下图:

为什么用户注册这么简单,想注销却如此麻烦?

这时候一定会有一些设计师告诉你说,这类界面,要以左边这种形式去设计,因为无论从视觉角度、优先级角度还是企业利益角度来说,左边这种都更符合用户操作的逻辑。

为什么用户注册这么简单,想注销却如此麻烦?

或者,如 PayPal 上底部的「移除卡」功能,故意在层级上做的很弱,颜色的处理让按钮看起来甚至是不可点击的。

虽然「移除」对于产品来说是一个危险操作,产品不希望用户进行这一操作。但是对于用户来说,当他们想要这个功能的时候,说明意愿强烈,这时候这种设计会让用户产生糟糕的体验。

于是就有人提出说:

  • 为什么呢?难道就不考虑想要跳过的那部分用户了么?
  • 产品设计就是只考虑对企业有利的用户,而忽视掉那些不想付费的用户?
  • 为什么我们的界面设计不能从更公平的角度去考虑呢?
  • 难道因为这些糟糕的设计频繁的出现,我们就要认为这是好的设计了么?

为什么,用户登录注册就这么简单,但是有些用户想要注销账号却如此麻烦?难道对于这些想要注销账号的用户来说,用户体验就不重要了么?

其实,我觉得这个问题,可以从两个角度来说明,分别是「目的」和「义务」。

作为产品团队的一员,我们的价值在于给公司创造利益,想方设法得到用户的支持与广告商的青睐。所以我们设计的产品都会有特定的目的。

比如,引导用户去购买产品或平台中的商品,以让企业能够存活,持续运营下去。

但这并不是说,企业把一些对用户无用的商品卖给了用户,用户买的这份商品,对他们来说一定是有价值的。产品并不是在欺骗用户购买无意义商品。

比如平台支付了音乐或视频的巨额版权费,方便用户在线上收听与观看,那么用户为这些内容付费是否应当?

企业做这些事,从用户与广告商身上获取利益,本质就是为了赚钱,这一点无可厚非。

所以在产品界面的设计中,如文章开头的示例,采用左图的形式,突出办理会员的按钮,引导用户付费成为会员,似乎也没什么问题。

它不过是利用了「信息优先级」的概念。我们需要帮助用户去理解界面上所呈现的信息,目的是为了让用户更好的操作。如果所有信息的权重是一样的,反而会影响用户的使用,甚至造成体验障碍。

而逆向的,比如不办理、跳过类似的出口也有给到用户,虽然从视觉上相对弱化了,但绝不应该阻碍用户去点击。

从这点来说,上图示例的问题不是在弱化了按钮的视觉效果上,而是按钮太小,可能会导致用户误触「去办理」,让不想办理的用户频繁点错;或者过分弱化界面上的重要元素,明明在眼皮底下,却给用户找不到的错觉,这才是根本性的问题。

比如一些引导页,在屏幕上设置了三个类似「跳过」的按钮,结果只有一个是有效的,产品为了让用户点击广告给企业创造收益,利用这样的方式达到目的,这才是所谓伦理道德的缺失。

为什么用户注册这么简单,想注销却如此麻烦?

我再举个例子。

为什么用户注册这么简单,想注销却如此麻烦?

连续包月,相比普通包月,策略大多都是第一个月有优惠价,以引导用户办理连续包月服务。好处是,大多数用户办理了连续包月,就会长期使用,它弱化了用户的决策意识。

除了部分办理完第一个月就取消服务的用户,只是为了这个月用,利用这样的漏洞省点钱,不过这也仅限于第一次办理了。

那么我们作为设计师,就应该从为公司盈利的角度去设计界面,引导用户办理连续包月服务,而不是普通包月,在界面上做出差别。

同样的,当每个月用户需要自动扣费时,就应该告诉用户,过两天又要一次扣费了,做一个提醒。而不单单是成功办理后,就再也不通知了,这是不对的,毕竟用户每个月都在为产品付费,这样的通知是产品的义务。

如果用户办理的是年会员,已经单次就付清年费,那就没必要反复提醒(也没什么可提醒的)。

在这个例子中,用户体验与伦理道德的界限很清晰,所以我并不觉得它们是相互矛盾的。

我们还可以举很多例子来说明这个问题。

比如 Windows 系统下卸载软件频繁的下一步,甚至还会有错误引导的设计。

为什么用户注册这么简单,想注销却如此麻烦?

再比如,在一些产品里关注了某个人,但是有一天想取关的时候,总是找不到取关按钮。或者,一些产品里并不重要的信息,总是闪着红点引导用户去点击等等。

我们常常会去分析按钮的各种样式,比如是否有圆角,是否有投影,是否要渐变等等;也会去梳理按钮与文案的关系,比如按钮中的文案与边框的间距,文案的大小要适配载体的比例等等;甚至,还会去分析按钮的位置,比如取消按钮应该在左边还是右边,取消按钮与关闭按钮的区别等等。

但似乎,我们很少会去探讨按钮背后的这些事件,我们都知道按钮是用户与某个事物间接的交互控件,但我们从来都只注意于按钮的外形与按钮位置所应有的逻辑,而没有真正去探讨按钮所承载的这些问题。

比如用户点击了「会员办理」的按钮,会发生什么事情?我们是否应该在下个月用户扣款之前提醒他们?或者,频繁的在产品里滥用并不重要红点提示,会不会影响用户对于该产品的使用频率?

这才是我们需要延伸出来思考的事情,而不单单是按钮或者某个控件本身。我们思考的远不止目的,还有义务。

所以。

我并不觉得在产品界面上引导用户执行操作有什么问题,相反,问题在于在引导的同时,不能阻碍用户进行其他的操作,给予用户合理的控制权,才是最重要的。

产品设计的目的在于正向逻辑的用户操作体验,而产品设计的义务在于给予用户拒绝的权利。


文章来源:优设    作者:和出此严


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



交互设计原则之格式塔定律

ui设计分享达人

在做交互设计或者视觉设计时要遵循一些既有的原则,其中非常重要的一条就是【格式塔定律】

一、什么是格式塔原理?

        格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。

       格式塔学派主张人脑的运作原理属于整体论,“整体不同于其部件的总和”。例如,我们对一朵花的感知,并非纯粹单单从对花的形状、颜色、大小等感官资讯而来,还包括我们对花过去的经验和印象,加起来才是我们对一朵花的感知。

       格式塔心理学家认为这些原则之所以存在,是因为头脑具有天生的倾向,可以根据某些规则感知刺激中的模式。(是不是觉得hin神奇)

       比如,这是著名的“人脸花瓶幻觉”图。如果以黑色为背景,白色为图形,则是一个花瓶;如果以黑色为图形,白色为背景,则是两个人的侧脸。它也反映了图形和背景对一幅图的影响。

二、什么是格式塔原理?

1、接近性原理
接近性原理说的是物体之间的相对距离会影响我们感知它是否以及如何组织在一起。互相靠近(相对于其它物体)的物体看起来属于一组,而那些距离较远的则自动划为组外。              

接近性原理的应用1--将相关元素彼此靠近放置

使用不同数量的空格来合并或分离元素是传达有意义的分组的关键。例如,在Ant Design的标题区域中,“ 搜索”功能与站点的主要导航位于同一行。但是,主导航和搜索之间的多余空格表示它们属于不同的组,因此具有独特的功能。对于使“ 搜索”功能在主菜单的其余部分中脱颖而出,此空格至关重要。


但是,在较小的屏幕上,无法保持此间距。为了避免将这些区域视为一个整体,页面收缩宽度的时候,搜索后的文字隐藏了。



接近性原理的应用2--构建清晰的结构

应具有固定或锁头标题的网站特别可以从使用独特的背景颜色或清晰的边框中受益,从而有效地将标题与下面滚动的页面内容区分开。此外,大页脚的单一统一背景色  可有效地表示该区域中的所有链接都属于一个组。

创建清晰的边界是一种强大的视觉提示,可以压倒其他分组原则,例如接近性或相似性。因此,当需要包含几种不同类型的UI元素或无法调整对象之间的空白量时,它是一种强大的工具。我们做页面时如果需要把两个元素放成一组与其他元素区分,那么我们可以用线框画出边界来达到目的。

2、相似性原理

如果其它因素相同,那么相似的物体看起来归属于一组。接下来从形状、颜色、尺寸上来说明相似性原理,这也就是我们平时做视觉设计时的原理,比如我们设计稿宣讲时可能会被开发、产品以及测试同学问到“为什么用这个形状?为什么这里用这个颜色?为什么这两个尺寸不一致?等等,细细体会这个相似性原理就会给我们答案,让我们在画设计稿时能够有理有据。


A相似性原理之形状:

在上图中,我们头脑中自然而然的会分成“四列”,也就是圆形一列,三角形一列,然后再圆形一列,三角形一列,而不会看成“三行”


B相似性原理之颜色:

应用共享的颜色来表示某些项目是相关的,因此可能具有相似的功能,这很有效。通用颜色往往比其他特征(例如形状)更加突出,因此可以用于组合不同类型的元素并传达它们确实相关。         

在用户界面设计中,颜色通常用于指示常用功能。例如,使用单个链接颜色作为与用户交流可点击内容,链接颜色应仅保留给交互式文本和其他可单击元素,因为用户会意识到所有具有此特征的项目都是相关的,并且以相同的方式工作。因此,链接颜色不应用于关键字,不可点击的标题或实际上不可点击的附近图标。

如上图,就是一个用色的反面例子,“ 消息中心”中的所有按钮均为绿色,因此用户必须花时间确定哪个是提交表单的主要按钮。(此外,“ 提交”按钮离消息区域很远,并且根据Fitts的定律,这种缺乏接近性也会降低用户的速    度。)

相同颜色的按钮将被视为具有相同的重要性级别。因此,应为主要操作性按钮保留单独的颜色,以帮助它们在辅助按钮中脱颖而出。

C相似性原理之大小:大小也可以用来表示关系。大小相似的对象可能被认为是相关的,通常具有相同的重要性。

在用户界面中,我们经常使用大小来强调内容或按钮中最重要的部分。相同的大小表示相同的视觉突出度,并且在所有其他条件相同的情况下,将共享该属性的所有元素连接在一起。一致地使用大小会创建视觉层次结构,并使页面易于扫描,因为人们可以立即看到并理解这些类型分组。

例如,在产品列表页面中,每个单独的产品列表都以相同的大小(和相同的形状)显示。这种一致的视觉样式告诉我们该区域中的所有物品都是产品。共享大小将其与其他不同的UI元素分开。当某项商品在此列表中以不同的大小或形状出现时,就会突出显示为不属于产品分组。下面这个产品集合的促销以单个产品列表大小的两倍显示。


下面是我最开始尝试的招聘系统首页的改版:

根据上面的相似性原理和接近性原理就可以很容易看出来,这个页面结构和逻辑不清晰:

1.待处理和招聘日程两个模块之间的区分不够清晰:因为这两个模块右侧应用了同样的形状和颜色的按钮(相似性原理),让用户在心理上产生联想,同时这两个模块之间只靠间距来区分,区分的太弱了(接近性原理)

2.招聘日程头部日期与下面的面试安排卡片联系太弱:因为面试卡片用了非常强的边界区分的线条(接近性原理-构建清晰的结构)确实在面试模块之间构建了清晰的结构,与此同时卡片与头部的日期之间看起来没有什么关联。

3.首页的选中效果太弱,分析这个页面的层级,左侧首页选中才应该是最重的,能让用户第一眼就知道在系统中的位置,很显然目前来看很容易忽视首页这个位置,关注点被吸引到了快捷入口。这并不是我们想要传达给用户的。

根据格式塔原理中的相似性原理和接近性原理,对页面的结构进行了调整,就看起来清晰多了。

所以,我们在制作完设计稿后,可以应用格式塔原理,分析下最终呈现给用户的结构和逻辑是否清晰。而这也是做视觉的理由和底气。


3.连续性原理

视觉倾向于感知连续的形式而不是离散的碎片。

连续理解起来是很简单的,但连续却解决了非常复杂的问题。通过找到非常微小的共性将两个不同的环连接成一个整体。在引导页中经常会用到这个。

     

 4、封闭性原理

视觉系统自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。

闭合可以实现统一整体,这不难理解。但是有一个非常有趣的现象值得我们去观察和思考,就是不闭合时候也会实现统一的整体,更确切的说,这种现象是一种不完全的关闭。这些图形与设计给人以简单,轻松、自由的感觉。所以,完全的闭合是没有必要的。最著名的应用便是苹果公司的logo,咬掉的缺口唤起人们的好奇、疑问,给人巨大想象空间。

5、对称性原理

我们倾向于分解复杂的场景来降低复杂度。


6、主体/背景原理

我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素,其余则是背景。这个原理经常会在海报设计中应用,这也是为什么我们做海报,做平面时,一定要制作好背景,背景的氛围很重要。

文章来源:站酷   作者:ZZiUP

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

如何在设计中构建共情 (同理心)

资深UI设计者

-设计过程中,共情(同理心)的一些观点和心得,希望能够让更多设计师对这些软能力有更好的提升和应用,欢迎前来交流探讨



到底什么是共情

————


在体验设计的过程中,如果不能对设计对象有更深入的了解,设计思维就无法开始。而用户对产品持有的观念、态度甚至意见并不一定会表现的很明显,这需要设计者更加主动的与用户进行互动去构建共情。这可以使得你能够更加了解他们的需求、想法、情绪和动机。好消息是,你能掌握多种方法来与用户构建共情去获取更多信息。并且当你有足够的“正念”和经验时,你也能成为共情他人的专家。

“正念”:有目的的、有意识的,关注、觉察当下的一切,而对当下的一切又都不作任何判断、任何分析、任何反应,只是单纯地觉察它、注意它。



百科

共情(Empathy),也称为神入、同理心,共情又译作同感、同理心、投情等。 由人本主义创始人罗杰斯所阐述的概念,却越来越出现在现代精神分析学者的著作中。不管是人性观还是心理失调的理论及治疗方法似乎都极为对立的两个理论流派,却在对共情的理解和应用上,逐步趋于一致。共情似乎为现代精神分析与人本主义的融合搭起了一所桥梁。


通俗含义

我们常说的感同身受、换位思考、同情心、设身处地、将心比心这都是共情的一种描述。Empathy一词源于德语“Einfühlung”,意为让人们跟艺术品融为一体,比喻走进一件艺术品的奇妙体验,因此国外常常会看见“站进别人鞋子里去”的共情比喻——(Stepping into their shoes as the saying goes, in order to gain a deeper understanding of their situations.)意为正如俗话所说,站在他们的立场上,以便更深入地了解他们的处境。


对于“共情”我更多的理解成是两个或多个载体之间的一种共识一种情绪共鸣,然后再到行为跟思维上的影响。但实际上发生完全的共情是不可能的,有时连我们自己也会做一些无法理解的迷惑行为,并且客体是多样化的,可以是跨物种的,跨维度的。而我们要做的就是在工作中定义共情的有效范围,尽可能的与目标用户产生共情以了解更多信息或需求,然后去定义和构思新的需求与设计。共情很重要,但它不是设计工作中的全部,有效而不要过度的使用也很重要。


  1. 共情载体的多样化可以是你通过一幅画感受到了作者的情绪表达

  2. 十字路口听见火车的鸣笛声,从而感知到危险的信号

  3. 当你傍晚处在城市生僻的角落,打开地图软件,亮起了回家的导航


身边的共情

我们身边的共情无处不在,正是这些共情使得人与人之间的情感更丰富,当然也是因为人类有强大的表达能力。通常当客体情绪在表达出来的情况下,主体是可以更容易得到共情的。所有当主体更专注的去感受客体的情绪表达时,能够使达到共情变得更迅速。



        常的的共情场景;


  1. 身处于电影院,看到某一段感人的情节,很多人开始泪盈眼眶。

  2. 朋友讲述着自己的不幸,你听完后的同情与表示理解他。

  3. 看着熟睡的婴儿,人们自觉的保持了安静的氛围。

  4. 准备上楼,当眼看电梯门就要关上时,里面的人帮忙打开了电梯门。

  5. 正在写报告时,突然的停电让你措手不及,也让你的同事措手不及。

  6. 与伙伴开黑游戏,共同取得胜利那一刻。

  7. .....


以上都是一些生活中常有的共情场景。通常当我们与其他客体得到共情时,往往我们能够更清楚客体传递的信息是什么、需求是什么,这完全可以应用到我们的设计场景中帮助我们获取更多的有效信息。



共情对体验设计的作用

————


如果你想要更了解你的产品用户,从而让你的产品更好的服务用户得到更好的体验口碑,那么体验设计师如果对目标用户没有更深入的了解,那么产品设计中的各种设想都是没办法决策的,甚至都难以测试和验证,这对产品研发一定是一个危险信号。而共情则能帮助我们洞察用户需求和定义问题,所以共情在体验设计中显得基本且至关重要。


以交互设计为例

- 电商的界面设计:

产品原型与交互界面时常是有所出入的,其原因在于前者更关注产品本身框架与盈利点,而后者更注重整体的用户体验的细节。共情用户需求,以及思考商业盈利与用户体验之间平衡的点似乎是无法脱离共情应用的。这便是共情应用的一种体现,也是共情价值与设计赋能的体现。



- 移动端常见广告推广界面:

一直以来在产品营销广告中,始终存在一些流氓的交互方式让用户苦恼。往往更加注重和尊重用户感受可以更好的提升用户的好感与使用体验,这便能够使产品与用户之间的感情升温赢得口碑。



- 组织产品功能架构时:

在构建产品业务框架时,大多可能会出现以公司服务资源为中心的构建方式,但同时这种由内而外开发方式会为产品带来更多的弊端(往往产品投入使用后,会出现超出预期的问题)。尝试去站进用户的鞋子里去,或者找来目标用户甚至是相关的专家来做咨询,减少研发迭代的弯路。



用户研究中的共情应用

- 用户画像:

用户画像是体验设计中常见的一种设计工具,它能够帮助产品定义目标用户,能够有效用于产品设计决策或者洞察用户需求等。一个好的用户画像是基于真实用户的,它不是胡编乱造的。画像在于形成多组可供参考的角色材料,这有利于跨团队跨层级之间快速实现共情,达到业务目标的统一性。因此一组目标用户画像能否帮助团队快速实现共情是一个重要的衡量标准,而不仅是一组人口调查数据。



- 用故事去描述:

故事的元素通常会更丰富更有趣味,用故事叙事更能提升用户的兴趣和关注,这能便于构建共情。因此当你发布测试任务或者撰写研究报告时,都可以加入背景故事或用故事叙事,便于对象更容易理解和共情,你甚至可以用笔绘制故事版,像四格漫画一般,因为用图传达概念或信息更容易让人记住或回想起来,并且当你用这些方法时,自身也能加强理解。共情不是单向传递的,不要高估对方的理解能力,让你的信息更简单明了的传递也是重要的共情应用!



- 仔细倾听和观察:

在与目标用户进行互动的时候,通常会借助电子设备帮助记录这个过程,目的是为了更仔细的观察和聆听,并注意到被忽略的信息。就像一种正念,我们会带有目的性的观察目标活动,并且不会进行干涉,同时不对当下发生的一切提前作出任何结论、分析或判断,直至这个过程有了一个里程或结果,我们再将收集到的各种信息放在一起去思考。倾听和观察是人与人之间互动的根本方式,相对仔细完整的倾听与观察可以获取到更加有效的共情,而片面的则可能产生共情偏差。



小结:

共情在体验设计的应用中很广泛也很重要,甚至还延展了许多帮助共情的工具,这些都是为了让设计者能够更好的了解市场、发掘用户需求、甚至找到新的产品机会,最终帮助企业解决产品实际问题。有时在共情工作中,我们就像一个老中医一般,对患者望闻问切。 一旦有了问题,就应该及时使用适当的方式去共情目标对象,定位问题所在,并制定解决方案。



如何在体验设计中构建共情

————


制定共情的范围

为了寻求更加有价值的目标用户进行共情研究,我们会对共情的目标进行范围筛选,可以是根据某些用户习惯、常使用的产品服务、某个场景、也可以是社会群体(例如学生、司机)、甚至可以是动植物(例如宠物类产品)。所以第一步你要根据需求去制定共情目标的筛选条件,然后一点点缩小和锁定有效的目标群体,再开始招募、沟通或是进行其他下一步工作。我们没办法跟所有目标用户构建共情也没有必要这样做。通常五个左右的用户就能够反映出大多数问题,并出现重叠的反馈。


- 在不同研发阶段尝试与特殊的用户共情

伴随产品的发展过程用户也在时时发生微妙的变化,在跨度大的迭代中,尝试与产品潜在用户或极端用户进行共情研究也是很有价值的。潜在用户的需求通常存在着更多的不确定,这也意味有发现新机会的可能。而极端用户通常会有一些更刻薄的需求,这些需求可能不是主流,但也有主流发展的潜力,不过至少这些改进会为极端用户带来惊喜。这就像是在公交车站下安装一台自动售卖机,不是大多数人的需求,也不是当前的主流趋势,但却能够为部分乘客带来方便或惊喜,我们不能忽略这些少数。




带有目标的进行

在体验设计的过程中,我们需要与目标对象构建共情时,一定是有目的有意图的。以使用性测试为例,往往我们都会设定一些产品测试任务和目标给用户,再进行观察和共情。这也将允许我们能够在同一个或相似的场景事件中发生共情,这样才能够获取到更真实有效的共情。以一个吸尘器产品为例,如果对方是在地毯上测试的,而你是在木质地板的环境下去共情的,那么共情结果肯定是有所出入的。所以构建一个共情目的甚至是环境是有效共情的一个重点之一。



情绪降噪与倾听

构建共情会受情绪影响,在共情前有必要去除负面情绪影响,不要为共情构建带来更多的阻力,另外则是仔细的倾听和理解。这就好比我们要专注学习,除了认知听讲,脑子里一旦充斥着其他负面情绪或思维影响,就很难完成专注学习的目的。同理,在用户帮助我们测试产品或访谈时,我们也要首先做好彼此的心理建设,去除主要的负面情绪甚至去除不利的环境影响因素,例如缓解用户紧张不安的情绪,找一个素一点且安静的测试房间等。



合理的工具辅助

图表、笔记、录制设备是帮助我们共情的最好工具,在不同的场景下,这些工具能够帮助我们更好的收集信息,并且便于我们思考和共情。我们在短时间能记住的信息是有限的,这也是为什么我们会用到7±2这种定律去控制信息量的原因。以用户体验地图为例,在记载用户体验产品的过程中,便是一种很好的共情辅助工具,它能够按照使用步骤或阶段记载用户使用情况和情绪变化等反馈。



构建共情的要素

在我的理解中,共情由四个主要的因素影响来构成。

一、尊重:受到不同的环境跟经历影响,要去准确理解一个人是很困难的,哪怕是多年的夫妻也是如此。所有首先要做到尊重,消除任何偏见,不要带有批判或评价的心理。然而做到足够的尊重也并不容易。

二、观察:观察是获取客体传递信息的主要途径,不能掌握足够的信息是无法做到共情的,片面的或者假设的信息都将影响到正确的共情。

三、思考:对客体的信息与观念进行思考,尝试理解客体的各种行为根因以达成一致的认知。

四、融入:将自己感受到的情绪与认知代入到共情对象的行径中,去仔细揣摩,以洞察用户的行为、感受、需求、思维方式以及与产品之间的关联,就像灵魂附体一般,以达到更深入的共情来定义问题。




共情为设计赋能

最后便是共情结果如何应用到设计之中,将共情结果赋能到产品设计也是共情工作的价值所在。通常这套流程是共情->定义->构思->原型->测试,在这个整个过程中随时是可以返回到前面其他阶段中反复打磨的,而共情作为一个起点也揭示了其重要性。我们一切的共情工作皆为了能够优化和解决产品的问题,使得产品体验能够更好,这是我们在体验设计中不断去共情的初衷。




好的共情设计欣赏

————


以移动端的产品来讲,现在好的共情设计真是百花齐放,这正是创新技术与共情设计发展的好趋势,也是敢于创新探索的好机遇。这里我们放三种典型的欣赏案例说一下;


一、智能便捷型:给用户提供更加智能便捷的服务功能,使得用户能够获得更轻松流畅的服务体验;




二、人性化类型:通过大数据与技术手段,为用户提供更加人性化的服务方案,提升用户好感度、依赖性,加强产品口碑与体验;




三、情感关注型:有一些属于情感关注类型的共情设计,通过获取用户的场景信息或其他数据共情用户情绪,并给予用户合适的关爱、帮助、引导。为用户带来软件有情感,品牌有温度的体验;



小结:

在体验设计中,情感化设计一定会是一个值得深入方向,我们应该关注到不同场景下用户会产生的情绪变化,为用户提供更加走心的服务体验,为产品收获更多口碑。当然,在产品完善的这个漫长过程中,我们也要随时甄别我们所做的事情是否对用户和企业有更高的价值。在研发资源有限的情况下,划分这些设计点的权重,合理分配研发资源。



共情构建中的认知偏差

————


能够对共情构建产生影响的认知偏差挺多的,这些认知上的偏差会影响到共情的正确性,不仅是构建共情的主体还是客体都会有影响。国外产品设计师Abhishek Umrao在UX MAGAZINE(https://uxmag.com/articles/6-ways-psychology-affects-your-design-work)上整理了六个关于影响UX体验设计的认知偏差可以了解一下。这里围绕构建共情补充了一些相关认知偏差,希望能够在构建共情的工作中再少一些坑;


1. Empathy gap(共情偏差)

共情偏差是指由于经验、预期和态度存在差异,我们很难准确地去体会他人的感受。这一点就是前文提到的我们无法做到完全共情,我们对共情的概念要有一定认知。

建议:通过技巧去弥补,减少认知偏差。多一些耐心的聆听,减少偏见和执念,尝试思考如果是TA该怎么办?


2. Negativity bias(负面情绪偏差)

情绪会对我们的认识和行为产生影响,而负面情绪产生的影响则是最大的,这会对我们的共情判断产生偏差,所以前文我们会提到消除情绪噪点的概念。

建议:尽可能的维持中立或积极的情绪状态会更有助于共情工作,但至少是消除负面的情绪影响。


3. Observer-expectancy effect(观察者预期效应)

观察者常常会不自觉地扭曲影响因素或数据,以得到预期结果。这就好比在用户进行产品测试的期间,向你咨询了意见,而你很有可能不自觉的给出你的期望或者一些暗示,这会对目标产生可暗示性偏差(Suggestibility),使得目标想到的内容往往会被扭曲。

建议:1. 对面向用户的测试材料进行自查纠正,尽可能处于中间立场,不要干扰测试结果。2. 在主持访谈或用户测试现场时,对于用户的主动咨询或交谈中不要解释过多,让用户理解其定义跟概念即可,说的越多越是容易出现观察者预期效应。


4. Automation bias(直觉偏误)

基于自身的认知或经历,有时做出判断会过度依赖个人直觉,而不去收集更多有益于做出准确判断的证据。这一现象常常表现为产品或项目经理的一拍脑袋的决定,但是往往因为过度依赖直觉而忽略了实际的场景差异等。

建议:对于不能直接给出有效证据的决策,要敢于质疑而去追究其正确性。当使用参考信息时要思考两者之间的差异性。总之不要凭借事件的相识性而忽略差异性,最终凭直觉决策。


5. Authority bias(权威偏见)

人们会过度倚重某些权威的意见,而忽视事情发生的实际背景。以品牌的影响力为例,两种不同的任务实施程序,通常人们会认为大品牌的方案更好更值得信赖,而忽略了一些体验细节。

建议:对于相比较的软件测试任务,我们有时会弱化甚至隐匿品牌信息。其目的便是在比较时减少这些权威偏见,不论是正面的还是负面的,这些都会影响用户判断,所以在特殊的场景研究下,请注意这一影响是否干扰结果。


6. Normalcy bias(正常化偏误)

人们会过度依赖先前的经验,把一些极端事件看作正常的,认为事情很快会过去。以用户测试为例,当6个人都正常完成了测试任务,仅有一人出现出现问题时,这是一个概念问题,我们不能忽视这仅有的一个用户,更不能安慰自己这只是一个特例。

建议:上文有提到尝试与极端用户进行交流,其实道理类似,问题纯在即合理,我们有必要注重和研究这些极少数,它们极有可能带来新的机会点。


7. Illusion of transparency(透明度错觉)

人们高估自己的个人心理状态被他人知晓的程度的一种倾向,时常表现为你以为别人都明白了你的意思,实际上别人明白的还远远不够。与“知识的诅咒”这一偏差的差别在于,前者是我以为对方明白了实际对方还有诸多不解,而知识的诅咒是你无法给对方进行可理解的解释,有着文化背景或认知的障碍,实际上这两者偏差概念都会影响到共情工作。实际办公中透明度错觉时常体现在需求表达、文档解释、跨部门沟通中,往往你以为你说的已经很清楚了,但在实际研发中却会体现出诸多差异。

建议:适当的了解其他部门的专业文化,便于更好的解释给对方。组织好信息框架,简单易懂的信息框架易于对方理解,例如书本的目录大纲、信息的分类等。跨团队或部门的PRD(产品需求文档)尽可能的减少专业术语的应用或者进行注释,文档的目的不在于体现多专业而是更加易懂的传达信息。


趣味思考

————


研究用户从观察自己开始。每个时代的人都会有不一样的特质或者某些现状,在这个大环境下,你会发现与同龄人之间有很多相似点,那么加强对自己的行为理解,是不是就等同研究了这些同龄用户的共有特征?这些特性是否会对你的产品使用有关联?带着这些特性去体验你的产品时,是否会发现新的机会点?



参考文献:https://uxren.cn/?p=68537#影响UX设计的6个心理偏差

参考文献:https://uxren.cn/?p=68382#如何构建同理心


文章来源:站酷    作者:泡泡bing


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

学会「交互设计五要素」,帮你更快Get到设计关键点! 我要投稿

资深UI设计者

B端浪潮下设计师的「尴尬」

供应链资源整合是企业发展态势。企业对内部多岗位协作、企业与企业间的协作效率有更多诉求。

企业级服务系统的智能在线处理、数据准确、信息安全等特征,成为企业实际作业的得力助手。(以下简称B端)

系统提供商也便对业务型产品、设计、开发、运营等人才有更多需求。

在C端浪潮中,设计师通过创造用户流畅和惊喜的体验,发挥了显而易见的价值。

然后B端系统的业务复杂特性,普遍认知产品经理、开发会体现更大的价值。

设计师作为中间角色,难免「尴尬」,甚至沦为产品经理原型的高保真绘制人员,缺少发言权,或初次接触对海量信息无从下手。究本质原因:

未直接接触业务方和用户,无法对需求场景有深入的了解,缺少系统性设计分析、设计判断能力

我在几年的实战中,运用辛老师 「交互设计五要素」 基础原理,融合于B端业务体系,形成一套自己的思维图谱。(以下简称五要素)

从「五要素」出发,会更快速地get到关键设计点,抱着开放的态度与产品讨论方案,总会愉快地达成一致,顺利对接开发。

B端「五要素」详解

就像我们写小说「讲故事」一样:时间地点人物、有什么目标、使用什么工具,完成什么事情,故事才完整。基于B端实际业务场景的五要素,阿飞解说如下:

1. 用户-角色、权限

角色:

老板、运营、销售、物流、采购、库管、财务等(不同岗位日常事项不同)

权限:

主子账号(涉及到模块间的操作权限、数据权限)

2. 目的

用户目标:

B端一般是具有明确的作业目标,更地完成工作。老板一般希望节约人力成本,且可即时响应客户需求

商业目标:

为客户赋能、提升下单率、支付率、新业务渗透力、裂变等

业务目标:

产品会不断的迭代,了解当下需求中的业务目标

设计目标:

基于以上目标,设计需符合用户思维习惯,提高处理效率,同时避免误操作等

任何场景下,人的行为都是有「目标动机」

当以「目标」为出发点,可以增强设计判断力,输出有效方案。另外真正有价值的商业目标一般都是和用户终极目标所吻合。

3. 场景

时间、地点是场景的必要组成

When:

随时随地在线或工作日期间,如:售后客服需要随时在线;财务人员一般工作日处理任务

Where:

办公室、仓库、户外等。需考虑线上线下结合,系统是为用户的线下作业场景服务

4. 工具或媒介

台式电脑、笔记本电脑、手机、平板、扫码枪、PDA、打印机、肢体、智能运输车等

互联网媒介又包含web网页端,web客户端,小程序,H5,App

系统功能承载在媒介中,媒介承载在实际作业下使用的工具,存在多终端配合使用。比如仓库移动作业时,会使用到平板进行盘查核对等。

5. 行为

需要完成什么事?通过典型的任务流分析是否可达到目标

学会「交互设计五要素」,帮你更快Get到设计关键点!

△ 仓库移动作业场景

「五要素」带来的机遇和价值

B端复杂业务下,设计师主动了解用户实际的场景后,五要素作为必需思考元素,经过实战验证,带给设计师的机遇价值至少有2方面:

1. 对设计师自身:

有利于设计分析、判断思维体系的完善,考虑更全面;所输出的方案符合用户思维和习惯,更容易得到各方的认可

2. 对于业务价值

可作为考量产品方案可行性的判断准则
另外,产品原型一般基于「功能」本身,而设计师从用户实际场景规划用户的任务流,可以优化产品逻辑,补全缺失场景,也会给予创造性解决方案

举个实战栗子

比如「开发票」功能 :

  • A购买B的服务后,系统会统计时间段内订单金额;
  • A可向B申请开发票,B接收到申请工单
  • B线下开票后,上传发票凭证,单据变成已完成状态(系统不对接发票打印接口)

在需求评审中,针对于「A向B申请开票,A撤销申请不需要B操作同意」这点,我提出建议:「需要B线上同意」

首先确实是要避免无谓的用户线上流程操作,但针对这点,我分析如下:

  • 用户是财务人员,「开发票」是其重要严谨的工作事项之一
  • 线上线下场景结合。B看到A的申请单据,极有可能B线下已开发票还未录入系统。
  • 此时申请取消开票,若不需要B同意/拒绝,会造成纠纷,平台需要负责。

所以「A撤销申请B需要线上操作同意或拒绝」

学会「交互设计五要素」,帮你更快Get到设计关键点!

△ 打印发票

以「五要素」的分析思维的表述,最终与产品、技术达成一致。

在设计中,考虑到「A申请撤销」的单据,对于双方都是需要优先确认和处理的。所以除有即时消息通知外,列表中我做了2点设计:

  • 会把这批单据使用浅红色底,起到提示作用
  • 优先放在分页列表最前面

(若不这样,在分页列表中特殊单据很有可能从第二页后才出现,用户都发现不了)

学会「交互设计五要素」,帮你更快Get到设计关键点!

△ 状态操作参考框架示例-原创

总结

回顾下B端交互设计五要素

  • 用户:角色、权限
  • 目标动机:商业、业务、用户、设计,
  • 场景:什么时候?在哪里?
  • 工具或媒介:作业场景中使用各种工具
  • 行为:基于用户任务流的行为设计

设计师的分析、判断能力是非常重要,五要素则作为系统性的思维支撑。

B端浪潮中,设计师仍有很大的机遇和价值。基于五要素分析,会对业务有所优化和补充,或提出创造性的解决方案。

设计不仅是一种技能,而是对事物本质的感知和洞察能力

交互设计五要素不仅对设计师有帮助,同时对产品、运营等人员同样具有价值。

文章来源:站酷    作者:Aber UX设计



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


想让交互更走心?这4种可见状态微交互技巧一定要学会

周周

在经典的尼尔森十大启发式当中,「系统状态可见性」可以说是如今交互设计领域当中,最为重要的原则之一。通过向用户展现当前的状态,让用户拥有对系统的控制权,建立用户对于产品的信任感,这也是这种设计启发式的最重要的价值之一。

但是,想要做到可靠、易用,系统状态展现的技巧是很讲究的。这里梳理了4种最为常用的方法,结合了不少实用的案例,希望对你有所帮助。

1、展示用户位置、进度的视觉反馈

1.1、让用户知道自己在哪

没有人会喜欢迷失方向,但是无论在现实生活还是在数字领域当中,这种情况都会发生。让用户知道他们在哪里是创建良好导航体验的关键。应用程序和网站都应该凸显当前的导航选项,帮助用户了解他们所在的位置。

Google 的底部导航栏设计

1.2、要经过多少步骤来完成任务

这也是一个非常基本的操作,通过展现步骤数量,帮助用户来预估完成这个过程所需要的时间。

Selecto 的调查问卷的设计

2、辅助用户交互的视觉反馈

数字界面毕竟不是现实世界中的真实硬件机构,用户更多只能借助交互过程中的即时视觉反馈来确定是否完成了操作,即时的视觉反馈因此显得非常重要。

即时的视觉反馈让用户的操作得到了视觉上的「认可」,从而强化了「确信感」,这样一来一回的确认可以避免错误的发生,比如可以避免用户因为「感觉没有点下去」而反复点击。

这种视觉反馈的设计,最常见的范例就是点击按钮按下的微交互动画,它告知用户「系统已经捕捉到点击交互了」。

AliAli 所设计的悬停点击动画

但是在某些状况下,按钮的视觉反馈还有很多不同的呈现形式,有更多可见的、可理解的新形态,可以在原有的基础上探索更多可能性,比如下面的

2.1、单击点赞按钮

Spread love, not viruses ,作者  Charles Patterson

2.2、开关按钮

这个开关按钮不仅有点击动效,而且色彩和按钮标识也随之改变,更为清晰地表明状态,甚至兼顾到了视觉障碍用户

Switcher XLIV , 作者 Oleg Frolov

2.3、书签按钮微交互

这个书签按钮通过色彩的虚实变化来呈现书签已添加的状态,颇为巧妙。

Bookmark interaction,作者 Oleg Frolov

2.4、添加购物车微交互

在这种情况下,视觉反馈非常明确且优雅地告知用户已经添加到购物车里面了。

咖啡下单动效,作者 Nhat M. Tran

3、呈现系统状态的视觉反馈

3.1、系统正忙于什么事情

当系统正在加载,正在执行,正在运行的过程中,通过动效来告知用户系统并没有停止,而是正忙于执行某件事情,是避免用户误解的手段。在用户等待的过程中,通常会实用无限加载的动效(一般使用在低于10s的操作中):

对于超过10s的更长的执行过程,无限加载的动效会显得令人沮丧,这个时候实用进度条会更好:

这些视觉反馈很大程度上降低了系统给人的不确定感。

对于移动端应用,在初始加载阶段所使用的启动动画界面,是否精心设计,决定了用户对于整个产品的第一印象,优秀的初始加载动画能够将用户的注意力从焦躁的等待中解放出来。

Logo 闪屏 ,作者 Gleb Kuznetsov✈

3.2、内容加载

当用户需要时间来加载内容的时候,建议使用一种特殊的的容器「界面骨架」来展现。这种临时的内容容器不仅能够帮助用户快速地了解界面的整体框架,构建用户预期,并且能够在后台快速地加载数据,渐进式地帮用户获得信息。

内容加载,作者 Ginny Wood

这种设计方式对于移动端和桌面端的设计同样适用:

界面骨架加载动效,作者 Shane Doyle

4、触发事件

4.1、通知和提醒

有效的通知和提醒,能帮用户意识到有新的事情正在发生。在多数时候,我们建议设计师使用微妙的动画来进行通知,因为动画效果会自然地吸引用户的注意力,人类的双眼的动态视觉其实是非常强的。

Aleksei Kipin 设计的通知动效

4.2、提示用户采取行动

在很多情况下,用户界面中会有很多地方会需要用户提交信息。比如,需要用户提交表单,或者用户创建了一个密码,但是在复杂度上不足需要修正,或者填写邮箱来订阅信息的时候,邮箱格式出错,等等。使用适当的视觉反馈总能够更加有效地将问题告知用户。

内联邮箱验证机制,作者 Derek Reynolds

结语

让用户有掌控感,就是为用户创造更好的体验。在很多设计方案中,视觉反馈会因为种种原因被削弱了,甚至被忽略了。但是当用户在和 UI 进行交互的时候,期望度和可动性其实是高度依赖于这些动效和微交互,而这正是设计师需要设计出优秀视觉反馈效果的原因所在。

文章来源:优设     作者:Nick Babich

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

汽车交互手势,这样设计才有趣

资深UI设计者

随着车内屏幕越来越多,越来越大,驾驶者在开车过程中因操作屏幕而分心机率逐渐升高。众多汽车制造商均希望探索出一种降低或避免「驾驶员分心」的安全性技术。

手势,是指人手、手和手臂结合产生的动作,作为解决「驾驶者分神」这个痛点的解决方案之一,正在全世界的汽车制造商中掀起「热浪」。

你只需要随意的挥一挥手,就能挂断电话;将手指向顺时针或者逆时针方向移动,就能调整音量大小。

互联网基因:屏内手势交互

汽车手势的出现,源于对车内屏幕的操作。而这些操作均来自于移动端的设计标准,比如苹果IOS设计规范中的标准手势或者谷歌Mertiral Design中的标准手势。

汽车交互手势,这样设计才有趣

△ 移动端常见交互手势

常见的手势如上图,分别为

  • 点击:激活控件或选择一个项目
  • 滑动:上下滑动,或者左右滑动来连续移动需要查看的内容
  • 按住并拖动:在屏幕上左右或者上下移动某个元素
  • 双击:放大或缩小内容或图像,并使之居中
  • 捏:外捏时放大,内捏时缩小
  • 长按:进入文本或内容编辑状态

为了满足手机屏幕外观改变,屏内显示内容越来越多元化的需求,设计师们也在探索屏内手势的新玩法。

汽车交互手势,这样设计才有趣

△ android底部导航栏按键从左至右分别为:返回上一级、返回主页、多任务

2017年iPhoneX的发布,正式开启了全面屏时代。为了替代Home键及android底部导航栏,各大手机厂商相继开始拥抱「全面屏手势交互」。

在车机系统中,部分汽车制造商也在积极迎接变化,比如理想one采用「三指下滑」的手势交互替代「返回主页」的图标按键。

汽车交互手势,这样设计才有趣

△ 「 三指下滑」表示返回主页

2019年的Google I/O大会上,新版本Android Q选择与IOS采用一样的手势操作逻辑,即在屏幕下方提供一个指示条,用户在左侧页面边缘右滑代表「返回上一级」、提示条区域上滑代表「返回主页」、提示条区域上滑并悬停代表「多任务」。

汽车交互手势,这样设计才有趣

△ android系统中的三种全面屏手势

随着全面屏手势在手机端的操作交互上达成一致,相信在不久的将来,也将越来越频繁的在车机端看到全面屏手势的「身影」。

车机新玩法:多屏联动交互

当汽车与数字屏幕相遇,如何让屏幕与内饰结合的更加完美,又能突显品牌特性,似乎给内饰设计师带来了许多挑战与机遇,「一字屏」、「T字屏」、「7字屏」、「旋转屏」应运而生。

汽车交互手势,这样设计才有趣

△ 拜腾M-Byte 一字屏

汽车交互手势,这样设计才有趣

△ 理想one的T字屏

汽车交互手势,这样设计才有趣

△ 合创007的7字屏

汽车交互手势,这样设计才有趣

△ 比亚迪王朝系列的旋转屏

与此同时,因为成本及技术的限制,汽车制造商的量产车型不得不在屏幕上做出妥协。理想one的妥协方案是利用3块屏幕组合,在视觉上形成「大长屏」的既视感。

汽车交互手势,这样设计才有趣

要让3块屏幕「变」成一块屏幕,仅仅在视觉上做足功夫显然还不够,多屏联动手势交互也不能「缺席」。

事实上,多屏联动手势交互依旧来源于IOS及android系统中的标准手势,它将不同的手势进行组合,并与页面联动显示,形成了多屏联动手势。

理想one在停车模式下,用户长按并向左滑动,即可将副驾娱乐屏上的信息「甩动」至中控屏。

汽车交互手势,这样设计才有趣

天际ME7不仅有3块屏幕组合而成的前排「一字屏」,还有2块后排乘客娱乐屏,5屏联动的手势交互,天际采用「手势+屏幕显示」来解决。

汽车交互手势,这样设计才有趣

在中控屏、副驾娱乐屏和后排娱乐屏上采用五指抓取手势进入多屏互动页面,比如想把中控屏上的内容分享给副驾娱乐屏,第一步是单击选中副驾娱乐屏,第二步按住并拖动中控屏至副驾娱乐屏位置,第三步在副驾娱乐屏中点击确认。

视频版交互演示:https://v.qq.com/x/page/w08791lhqus.html

未来已来:隔空手势交互

通过隔空手势接听或者挂断电话,这似乎是科幻电影中才有的情节。但正如开篇所说,车内屏幕数量增多,尺寸加大的同时「驾驶者分心」的机率也增加了,盲操手势与隔空手势的出现,是解决这个痛点的一种尝试。

目前量产的汽车中,盲操手势主要是通过标准手势与声音反馈的组合来实现。

比如在理想one中,用户在空调屏上左右滑动可以调节风量,上下滑动调节温度,且系统通过声音反馈告知用户操作成功与否。

与盲操手势相比,隔空手势似乎科技感十足,备受汽车制造商的青睐,我们不仅可以在各种概念车上窥见它的踪影,在君马SEEK上,也可以实际操作一番。

君马SEEK提供8种隔空手势。

汽车交互手势,这样设计才有趣

△ 左图:接听电话 右图:挂断电话

汽车交互手势,这样设计才有趣

△ 左图:上一曲 右图:下一曲

汽车交互手势,这样设计才有趣

△ 左图:音量升高 右图:音量降低

汽车交互手势,这样设计才有趣

△ 左图:音乐播放/暂停 右图:玫瑰花

与君马SEEK相同,宝马提供「向左」手势代表上一曲、「向右」手势代表下一曲,「yeah」手势代表播放或暂停。

但在许多其他操作上,宝马与君马的手势操作则各有特色。

君马SEEK使用手掌的正面与反面来区分不同的操作,正面表示接听电话·/音量增加,反面表示拒听/音量降低。

宝马则选择向屏幕方向点击代表接听电话,手掌向右挥动代表拒听电话,手指顺时针画圈代表音量增加,手指逆时针画圈代表音量降低。

在倒车影像中,手指向右挥动代表调整视角。

汽车交互手势,这样设计才有趣

△ 图片来源于「汽车界的扛把子」的短视频《宝马手势控制详细演示》

在手势交互上,拜腾也交出了自己的「成绩单」。

拜腾的手势识别共五种,手掌向下激活手势识别,手掌向上启动主页面,手指移动代表移动光标,ok手势代表确定,五指捏合可拖拽内容。

汽车交互手势,这样设计才有趣

△ 图片来源于太平洋汽车网《拜腾Concept手势感应系统操作演示》

这些高大上的技术看起来令人兴奋,但在实际使用的过程中,依旧存在识别范围有限、识别精度不灵敏、识别后的响应速度慢等等问题,而各个厂家的手势识别没有形成统一的标准,且没有大规模在在用户中进行推广,必然会增加用户的学习成本。

手势识别对用户来说是「真香」还是「鸡肋」,相信时间会给出答案。

参考文献:

写在最后

汽车内手势的交互设计,是一个有趣又好玩的课题,但如何让这个课题在好玩但同时易用、好用,恐怕只有设计师不断思考,并不断采用一些用户测试的方法进行验证才能获得答案。

文章来源:优设    作者:点滴DESIGN

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

2020年越来越火的车载交互该怎么设计?来看前辈的经验总结!

资深UI设计者

这次我们不聊视觉,也不畅想未来,只说说当下 HMI 产品设计与交互体验。

本文内容会涉及一些专业的汽车知识名词,因为篇幅有限,如有些知识名词不太明白可以百度一下。

别看错了,不是HDMI!

说到 HMI 大多数设计师应该是既熟悉又陌生,HMI 是 Human Machine Interface 的缩写,「人机接口」,也叫人机界面,人机界面(又称用户界面或使用者界面)是系统和用户之间进行交互和信息交换的媒介, 它实现信息的内部形式与人类可以接受形式之间的转换,凡参与人机信息交流的领域都存在着人机界面。

听起来是不是觉得这不就是 UI 吗?有什么区别吗?似乎差不多,几乎是没有区别的,只不过是在某些场合和设备上管他叫 UI,比如移动端设备,而在另外某些场所和设备上管他就叫 HMI,比如汽车车机和数控机床。所以这个概念也不用去特别较真,HMI 就权当作是汽车上的 UI 界面吧。毕竟汽车是高科技与工业结合的完美产物,「HMI」念出这个词时候就感觉是蛮专业的!很般配!

HMI前世与今生?

刚才说 HMI 最早更应用于工业上,比如常见的各种机床、制造装备。

或者说让时间再向前推进一点!

而这里通常意义的 HMI 则更加聚焦点,基本特指汽车车机或者车载多媒体设备。

说到这里还是要从车载仪表盘说起,从德国人卡尔·本茨发明世界第一辆汽车,距今已经 100 多年的时间了,在那些还没有 HMI 这个名词的年代,那么他是以什么形态出现的?那就不得不提「仪表盘」了。

当然写这篇文章并不是去评测谁家 HMI 更优秀,而是希望通过一些假设、实验和推断,和大家一起来探讨一下如何更有效地设计 HMI。

屏幕越大越好?车内到底需要几块屏幕?

我们先从屏幕开始。

说到屏幕,设计师都是比较敏感的,因为我们最终的设计交互创意都是需要都是在屏幕上显示展示出来的,HMI 当然也不例外。现在在车载屏幕上你能看到最大尺寸多大?

拿特斯拉为例,Model S 和 Model X 车型都是 17英寸,Model 3 为 15 英尺。

当然他肯定不是最大的,熟悉汽车朋友你应该知道我想说谁了,没错就是他!拥有 48 寸可多段升降屏幕的 BYTON 新能源概念车 M-Byte!48 寸的确很夸张,难道屏幕越来越大就是未来 HMI 的方向吗?

当然这个问题肯定是否定的,为什么?那就要从车载屏幕的作用来说起。

首先我是作为一个曾经就职于汽车公司的设计师,并且是一名地道的汽车发烧友,凭借对汽车还算熟悉和热爱做出一些产品交互分析,以下如有不妥之处还望海涵。

汽车内屏幕的作用

按照功能场景总体可分为三类:主行驶状态信息、附设备状态信息、多媒体 & 外设

不可缺少还需要与使用者、场景结合,我们先来做一个大概的用户画像。

对应这些需求,汽车需要有仪表台(屏)控制和显示的区域有五个。

五个区域分别是:

  • 主驾驶仪表屏
  • 中控台控制(屏)
  • 后排娱乐屏
  • 副驾驶信息屏
  • 扶手控制台(屏)

其中前三个是主流配置,后两个比较少见。

关于汽车设备这块我们不做深入展开了,毕竟这篇文章主要讨论的还是设计,直接看结果!

题外音:屏幕安全性的考量

汽车是比较特殊的设备,基于安全性考虑,汽车内屏幕尺寸不宜太大与太多。

屏幕总体为玻璃材质,但与车窗挡风玻璃的材质不同,当汽车遭遇碰撞的时候,车内屏幕极易破损并形成尖锐物,极大可能会乘坐人员造成二次伤害,所以车内屏幕不易太多,更不易太大。虽然车载屏幕变大变多已不可逆转,而且随着屏幕技术的提升,柔性 OLED 的应用也将会在一定范围解决安全问题。但也需要汽车相关设计者多在安全方面进行考虑,任何产品体验应该建立在安全基础之上的,特别是交通工具。

物理实体按钮过时了?

为什么大屏幕操控成为了当前的 HMI 主流了呢?那不得不去提一下另外一个我们熟悉的设备——手机!

同样一个有限的区域,如果用物理按键那么这个区域只能是固定的功能,而屏幕就可以无限扩展。特别是在汽车中控屏上集成内容会很多,体现就更加突出。

但是在汽车上的全部使用屏幕真的是最佳选择吗?显然这是有待商榷的。

不可否认屏幕的确有很强的扩展性,但是缺点也是明显的:1.触控反馈缺乏 2.交互效率不高

对于这样的判断,我们可以通过两个实验来进行验证。

将类似于 Surface Dial 这种智能按钮交互装置引入汽车的屏幕控制中,每个按钮可以根据情景进行自定义,并且吸附到汽车屏幕的任何位置进行交互操作,相信这一定是一种全新的使用体验。当然这一定是需要解决比如吸附力、安全性等一系列问题。

屏幕触控反馈

虽然目前的屏幕还无法做到完美触控反馈,但已经出现了一些新的硬件技术来试图解决这些问题,比如 Tanvas Touch,其定义为 「手指与触摸界面之间的电子压力控制」。简单来说他们的产品就 「皮肤的磁铁」 一样,能够更加精准地感应手指的动作,最后结果就是比 Apple 的 3D Touch 更加具有压感的触摸操作表现。

原理是利用手指尖触摸显示屏时产生的静电引力来模拟触感,通过电磁脉冲把更的反馈发送到用户的指尖。

Tanvas 也正在与汽车制造商们合作把这项技术嵌入到汽车或屏幕上,让人们更容易感触受到不同物体的表面。

也许在未来我们真的会遇到他。

文章来源:优设    作者:残酷de乐章

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档