首页

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乐章

医疗行业的交互设计怎么做

资深UI设计者

医疗行业的交互设计,跟其他行业有何不同?有什么要特别考虑的点?设计师应该注意哪些方面?

X与行业

产品体验设计通道中有条简单好记的定义: 1+X。

「X」这个字母常被定义为更多可能性,它的诞生往往是为了更好地服务行业与产品。

例如在医疗健康行业中,不再只有C端用户,我们要面对医院管理人­­员、患者、医护人员还有企业用户等;环境也不单是线上场景,它可能是医院、企业大楼、社康、疾控中心等等;合作方式同样独特,我们做出的任何一个设计都是需要客户过目的,每一个字段甚至都涉及到生命健康与安全,所以会要求我更高标准地了解行业与用户,促使我们在项目前期去不断学习和应用一些用户研究知识,使设计更加贴近用户。

交互设计师在用户研究领域的探索

过往经历中,总结了用户研究在各阶段的介入场景和方法,接下来会具体讲下在医疗健康项目中的运用。

1. 企业健康场景案例

企业健康项目是从一个合作开始的,公司的行政部门想要通过我们提供的健康管理产品来提升员工整体的健康水平,并将该方案进行复制从而提供一个企业健康管理的行业解决方案。

的确,员工是一个企业的宝贵财富,健康有活力的员工群体对提升企业生命力有着非同一般的影响。通过网络文献调研,我发现国内企业的亚健康状况并不乐观。

△ 国内企业健康现状

第一阶段用研——产品定义与设计方向

为了更了解员工和企业的真实情况和痛点,我们规划了用研计划,列出了三个用研目标:

  • 了解员工们的主要健康问题
  • 了解企业服务存在的问题和改善方向
  • 确立产品目标与设计目标

目标1: 员工们的主要健康问题都是什么?

通过和企业方的沟通,我们发现员工的体检报告是挖掘健康问题的源头,于是我们由此开始研究。

首先,我们拿到了历年的公司员工体检数据统计(脱敏分析),整理出体检问题的Top10。

△ 腾讯2018年体检数据统计

获许可,我们也随机向外发放问卷,了解到一些公司职工最想要改善的问题。

△ 某大厦的用研报告(仅作为分析用)

目标2:企业现在所提供的服务有哪些问题,该如何改善?

B端: 由于这是一个B to C的项目,我们优先会去采访企业端遇到的问题,沟通发现企业都会投资提供的健康设施(体检,食堂,健身房等),其中很多设施并没有被充分利用,或是没有得到合理的分配,现有的线上预约流程也存在很大的后台计算成本。

△ 腾讯提供的健康服务与设施(非疫情期间拍摄)

C端: 通过公司内部招募和访谈了20名员工,我们总结为三个主要痛点:

  • 体检套餐不知怎么选最适合自己,体验不流畅
  • 体检后看不懂报告也不知道该如何改善
  • 知道改善方向却不知如何落地和规划,或是没有坚持下去。

△ 员工在体检健康中遇到的痛点

以上,我们也对企业客户与员工用户的诉求有了初步的了解。

△ B&C两端诉求分析

目标3:如何定义产品目标与设计目标?

通过以上分析,和其他合作团队一同讨论了体检与健康管理行业的现状和盈利点,我们最终确定了产品方向:通过加入AI技术,分析用户过往体检数据来给用户推荐最合适的体检套餐,帮助用户解析体检报告转化为更加易懂的方式,加强与医疗服务的定制化连接;并智能定制最适合员工的管理方式和行为,充分利用起公司资源。

△ 产品形象与定义

通过对整体流程的用户情绪地图分析,我们得出设计的关键词:专业,贴心,安全

△ 阶段情绪地图分析

知识点1: 访谈与问卷调研

不要一上来就直奔主题,可以先问一些简单回答的问题和闲聊,让用户进入放松状态时再聊重点问题。且要时刻关注受访用户的状态,比如:是不是开始疲惫,回答过于发散以及表达意思模糊等等。遇到这些问题,需要随时做调整。

访谈的时候最好不要单独行动,要有1个主导访谈的,一个记录的。如果访问过程很长,有条件以及受访者允许的情况下,可以进行录音有助于后期的整理。

访谈结束后,最好是当场,或者至少应该是当天就完成本场次的访谈记录和总结工作。因为根据遗忘曲线,人在20分钟后将遗忘42%的内容,而1天后则将遗忘74%。即使有录音笔记录,你也会忘掉很多细节的,诸如表情,用户的潜台词等等。想到的设计解决方案也可以先记录下来但不急于放到总结当中去。

第二阶段用研——产品与设计验证

确立了目标和方向,我开始从体检预约和检后管理两部分来进行设计,由于在前期建立了用研机制,我们会定期对重要版本的内容和信息设计进行测试验证,并让用户基于我们定义的设计标准来打分,判断是否达到了专业,贴心与安全。

卡片分类-测试内容与排序

在检后的体检报告解读中,我们需要对解读结果进行结构化展示,方便用户快速获取有用信息,提高阅读效率,由此我们运用了卡片分类法,让用户对其重要性的排序,得知对用户来说体检异常中的单项的指标解释>危害性>指导措施。

△ 卡片测试与分析

可用性测试-测试架构与信息形态

体检解读的首页我们绘制了三个版本的方案,来突出不同的信息通过制作原型demo来进行可用性测试,让用户选出最喜欢的并说明原因,最终选择出一个最优方案。

△ 体检解读首页可用性测试与分析

从弹窗内容组合到内容的体检解读指标的可视化设计我们都做了用研测试版本

△ 体检解读内页信息测试稿

最终得到更加符合用户认知的体检解读设计。

△ 体检解读设计

灰度测试与深度访谈

由于某些需求时间紧迫,例如体检预约,当时很快就要到体检季,于是我们快速搭建框架和基础功能的设计,细节疑问点列出后进行灰度版本测试,并对前期招募的种子用户进行测试访谈,总结现存版本的问题,同时我们也访问了企业侧,把他们的优化诉求纳入考虑。

△ 体检预约访谈脚本与测试结论

比如企业要求突出安全感,福利感与智能推荐,减少后台结算成本等,我们便通过明确隐私授权认知的全页面弹窗以及简化体检预约流程,2步变1步,增强页面福利与智能推荐的感知渲染来满足客户要求,也得到了满意的赞赏。

△ 隐私授权设计

△ 体检预约设计

以上的用研方法其实可以运用在大多数的项目中,于是我在后续的腾讯健康模块设计中也常会去使用,例如疫苗设计中的闪屏方案测试等等。需要注意的是用研应该被列入到日常的流程中去,而不能作为临时安插,需要在项目实施前就进行用研计划的拟订,才能保证我们和用研同学有条理地客观的进行调研和验证。

知识点2:卡片与可用性测试

  • 研究员不要引导和干扰受访者,特别是不要在过程中对某些词汇进行解释。
  • 开放式卡片分类法中,卡片数量不宜太多,简单的卡片测试建议在20以内。难度会随着数量的新增而成倍增加。
  • 记得要首先询问用户对于卡片上词汇的理解,看是否有偏差。当对方问到的时候,可以先不着急回答,先问问他是如何理解的。内容的设计是设计师容易忽略但非常重要的一点。
  • 可用性测试的环境要保证安静无干扰。自己做的设计往往会容易有一些主观的想法和情绪,需要尽量克制,比如可以让用研同学做主导,自己做记录和观察即可。
2. 就医服务场景案例

就医流程是看似并不陌生的场景,痛点也非常明显,就是常被提到的「三长一短」问题(挂号时间长,支付时间长,问诊时间短),于是在进行线上就医服务设计时,很多人会认为没什么好特别调研的,竞品也非常多。

然而其实在设计中,最害怕的就是「我以为」。记得在做某医院的就医服务项目时,由于就医环境和用户非常复杂,所以我们在做这个项目时坚持去到了前线进行了实地考察与影子观察法,才发现了新的洞察。

实地考察中的望闻问切

说来很巧,现场的调研方法其实和中医中的「望闻问切」有异曲同工之妙。

△ 医疗场景用研方法

「望」:可理解为影子观察法:选择最能反映问题的时间和场景去观察用户行为,发现痛点,经过几天的观察我们发现早上8-10点是医院看病的高峰期,也是排队最严重,院内最拥挤的时期,所以我会在这两个小时集中观察和记录患者以及医生的状态。

「闻」:即为倾听,其实也是访谈法中很重要的一个原则,多让用户去诉说,减少自己的主观判断干扰用户的完整陈述,如果记不下可以录音。

「问」:根据我们想要了解和观察到用户的行为进行提问。

「切」:这里和中医中的切诊接触不同。是指切身去体验患者的感受,比如我会根据自己身体的某些不舒服去挂号体验流程,情景带入。

以上的实地考察后,我在第一时间用我们设计师的手法来记录整理:体验地图分析,并通过讨论提炼出设计的关键点:引导,连接,合并与转化。

△ 用户体验地图与关键点分析

知识点3:影子观察法

  • 需要选取事件发生的典型场景和时间,即所观察的场景和用户是最具有代表性的,才能最反映问题所在。
  • 像一个隐形人一样去观察,不要主动打扰和询问用户,才能最客观的记录状态和行为,避免变形。

用户体验地图的落地应用

这四个设计关键点其实来源于痛点描述中的一些高频提到的情况,拿引导和连接这两个点来说明。

引导:通过观察发现,用户在嘈杂的就医环境中本处于极度焦虑紧张的状态,对信息阅读和处理的速度低于平时的好几倍,因此我们需要提供具体的,正向的引导。

△ 精准预约设计

连接:通过访谈和自己实际的体验发现,许多线上和线下的服务之间是断层的,一方面需要流程上连接我付了款下一步要去哪,怎么拿药;另一方面我们也发现线下的引导设计是一个非常重要的连接机会点。

于是我们从线上和线下两方面进行了连接,提供了一套整体的解决方案。

△ 候诊与取药签到设计

△ 医院物料布局与落地布置

通过用户关系图了解了每个相关利益人的人群要素和诉求,在设计中不仅会考虑针对他们的设计,也结合体验地图中的机会点引出了设计原则,作为设计的指导和验证标准。

△ 相关利益人分析与设计原则

测试与收获

上线后,我们穿上志愿者的衣服,去往前线进行现场解说和用户测试,经过一个月的努力,真实感受到了现场效率的提升和满意度的提高,院方和使用过的用户都非常满意,这也让我们设计师切实感受到了欣慰和成就感。

△复旦大学附属肿瘤医院病理会诊 整体服务上线前后对比

这得益于我们能长时间与用户在一起,真实地听到了他们的声音与感受,也把想法落地去帮助他们解决了问题。这个过程中,让我们发现类似的垂直领域需要去到前线自己去感受,而不是隔着屏幕去观察,每个人的思考角度会不同,会发现新的问题和洞察。

知识点4:用户体验地图

  • 不要为了画流程而画,最终还是要通过图形化的记忆更好的还原记忆细节。
  • 重点要放在痛点与机会点的一些突出共性上,提炼是关键步骤。
  • 不要忽略不同接触点的洞察,它们均可以作为设计的载体。
3. 医疗数据分析场景案例

在医疗数据分析的场景中,我们面对的客户是政府和医院领导。相信在做TO B设计的小伙伴经常会遇到这样的问题:客户时间比较难约,给的调研时间有限;决策层客户思考的比较广而泛,很难深入用研。

基于这样的问题,我们想出了一个根据客户群体层级,区别调研的方法。

梳理角色

去年年初,我们曾走访多家公立和私立医院,优先通过管理层梳理出了关于数据处理上报的流程。他们对数据的关注度和处理顺序往往是有一个自下而上的上报过程,基层人员进行每个月度和季度的数据汇总,分析与简单的可视化表现,上报给部门管理和上级管理者进行审核提炼,最终给到管理决策者一些关键现象和趋势和对比。

由此提醒了我们,想要提供一个完整的数据解决方案,就需要绘制角色面板,区别调研目的与手段。

△ 医院层针对数据的处理流程

分角色的沟通用研

我们确立了针对基层人员,中层管理者以及决策管理者的用研目标并展开了差异化的沟通用研,我们会每个角色找1-2人和我们3-4个同事坐在一起,以焦点小组的方法一同脑暴某一数据场景和所需数据。

  • 基层人员 用研目标:了解常用基础数据的模块与细节汇总
  • 中层管理 用研目标:常关注的关键指标模块与提炼形态(对比,警示,峰值,占比)
  • 决策管理者 用研目标:看数据的目的,常关注的关键指标与形态的验证,后续操作

△ 医院数据现场用研

数据研究与总结应用

根据对医院不同角色的沟通梳理出了一些总结点,运用到了产品和设计中。

第一:我们发现了管理者们最关注的一些医院数据的形态,并打算把基础数据尽量以对比,警示等手段进行分析与场景描述。便于管理者直观获取他想要获取的辅助决策信息。

第二:根据不同角色提供针对性的角色面板,并梳理出个角色关注的数据模块和现象。

第三:各角色具体数据字段的梳理与总结,并进行了频率的标注便于后续的设计面板规划。

第四:调研中发现领导层在看数据时需要来回切换系统,且看起来没有一个统一的路径和条理,因此我们也和对方沟通,通过故事化的手法进行数据分析的流程体验设计,层层深入和下钻,从现象挖掘到问题本质。更加符合了用户看数据的顺序和认知。

△ 长沙超脑项目设计版图

除此之外,我们后面的产品和设计的汇报也会根据角色的差异来进行内容的调整,让听我们说话的人可以快速理解我们想要达成共识的内容,加快沟通效率,提升了在客户心里的印象。

这个过程中,通过用研让用户感觉到我们懂他们,并让其增加了参与感,对产品和设计都是一个推进器。

知识点5:TO B/G客户用研

  • 事前理清楚项目中会接触的各个角色,并进行初步了解,制定不同的用研目标再进行沟通。
  • 探讨的过程,要给足客户参与感,例如使用焦点小组的调研方式,提升好印象。

如何持续提升技能——读书有感

说了那么多设计师在用研技能上的应用,也许有人会有这样的疑问:如何可以不断提升自己在各方面学到的技能呢?一年前读到《刻意练习》这本书,给了我一些启发,在此总结给大家,希望对你们有帮助:

1. 制定具有定义明确的特定目标

「提升专业」是个很大的词,所以我们往往定了一个很大的目标,然后被各种事情拖着然后抛之脑后。因此拆分目标才是第一步。比如最开始做交互时我发现自己在归纳场景时总会缺失,再比如每次自己在汇报总结时,耗时过长,缺乏重点,那么这些都可以被列入要提升的小目标,总之目标不要太泛太难实现,这样实现起来会更加容易,也更容易坚持和自我激励。

2. 持续学习与专注练习

研读多本相关专业书籍,并应用的项目中去。这是我的一个目标也是方法。投入项目后,我们往往会陷入事件当中,甚至会就一个点和产品争论不休。但其实跳出来,去看些新思路不妨为一个好方法。

比如我最近在读《感官心理学》这本书,提到人们对于「软」和「硬」的触感印象会延伸到女性和男性的联想上,提到女性人们自然都会有柔软的印象,男性则会有刚硬事物的联想,这也就充分佐证了对于不同性别上的设计形态差异。类似的小实验可以帮助我们的设计更有说服力。

大多时候理论知识很枯燥,也难以一时间就可以用到,但只要你读过,在需要的时候它就会突然跑出来给你灵感。

专注是我一个单线程人的特点,我很难在一个时间里同时处理多件事,所以我会每天根据要完成的训练目标,把时间进行划分,个人感觉这的确产出效率也会高一些。

3. 一定要有反馈

每一次的练习必须要得到反馈,这也是评审的重要性。但其实不同的目标点可以对应方面的专家,不仅限于leader了,同事也是很好的老师,比如我会去发现身边汇报比较厉害的同事,帮我把关。只要遇到问题,一定不会放过去问用户研究同学的机会。

某方面没有老师怎么办?让用户告诉你!首先我会常用可用性测试的方式去检测自己的方案中的信息传达,交互反馈等等在进步,另外我也会在每个项目后整理一个小总结,来记录自己的思考与进步

另外,以下是我在用户研究学习中读过的几本书,推荐给大家~

结语

面对飞速发展的现在,各行业的产品也都在积极转型,例如开始涉足TO B行业和客户,开始研究00后的新生代用户,面对新事物我们设计师更要保持敏锐的眼光,利用自身的设计洞察能力去挖掘新的问题与方法,于是新的技能和方式也开始出现,所以我们一直认为产品体验设计师没有一个固定的能力模型,还是要根据你所从事的行业和产品来发现所需的技能点去发挥价值。学习的过程中,我们成就项目的同时也在慢慢成就自己。

文章来源:优设    作者:腾讯 April

保姆级交互名词扫盲

ui设计分享达人

通过一个案例解释那些让你们看得有大的交互专业词汇

UI 和交互这两个词汇是一对孪生兄弟,有非常密切的联系,我们在前期了解 UI 的时候“交互”这个词总是形影不离,出现的频次极高。


但是,从我开始学习 UI 起,就被它困扰了非常长的时间,并不是苦于如何在实战中应用,而是在中文语境下,交互有关的词义实在是太“玄学”了,网上对它的解释多数也含糊不清。


比如看百度词条里,交互本身有两种解释,我们分别来看一下。


1.交互:指替换;互相;彼此。语出《京氏易传·震》:“震分阴阳,交互用事。”(阴阳……难道是我想的那个意思?)

2.交互:通过某个具有交互功能的互联网平台,让用户在上面不仅可以获得相关资讯、信息或服务,还能使用户与用户之间或用户与平台之间相互交流与互动,从而碰撞出更多的创意、思想和需求等。(交互使人类进步?)


单就这个词,如果词条看不懂,多在网上搜索相关的信息,咂摸个10天半个月的,是可以对它有个大致的认识。我会用一个比较简单词来概括它 —— 相交互动。即人和机器有了接触并产生操作、互动的整个合集。


好不容易把这个词搞懂,但是,交互事件、交互操作、交互方式、交互流程、交互原型、交互设计、交互文档、交互体验、交互动效……又是什么意思?


当我们在网上看一些交互相关的分享,你就会感受到这种混乱,比如下文截图的这种表述方式。

undefined


这是我非常不喜欢的风气,通过非常生硬的专业名词包裹自己的思路,去总结一个非常简单易懂的道理或原则,也就是俗称的 “不讲人话”。


所以,对于这个问题的反感,我打算自己做一篇 “接地气” 的分享,对交互的基本常识做一次扫盲。







针对这些解释,我找了一个我自己课程学员正在处理的真实案例作为依据,并进行改版优化,来解释所有和交互有关的名词具体含义,以及对应的实例是什么。


先看看下面这个案例。

undefined

Protopie线上可交互稿:https://cloud.protopie.io/p/a66d68949d


围绕这个案例开展,该页面是公司内部人员使用的订单管理页面,订单代表的是为客户上门测量门框门扇数据和进行设计定制的服务。


再详细点解释,就是销售找到定制门的客户,要创建一个销售订单,填写客户的基础资料信息,然后设计师会上门进行进行测量,并将测量结果和定做要求编辑进去,以及填写具体定制参数,还有服务的价格明细。


这个页面与公司内部的四个角色有关联,分别是销售客服、设计师、财务、派单员。


销售客服:联系到客户以后,确定客户的资料信息基本需求,然后创建订单填写基本的客户资料。

设计师:设计师在看见订单后需要上门进行测量沟通,并给出方案确定报价,然后将明细也记录到资料中。

财务:财务在做账的时候有时候需要进来订单查看具体的明细和数据。

派单员:派单员要根据订单内的具体数据要求,联系仓库进行准备和发货(进销存管理)。


说到这里,大家应该还已经对这个页面是做什么的有了基本的认识了把。那么我们先不讨论它的优缺点,就来讲讲上面的交互名词在这个页面中的对应实例。


人机交互:就是指上面销售、设计、财务、派单四个角色进入这个页面,编辑信息、查看信息的所有操作和行动的合集。


交互界面:该页面可以进行操作和编辑,就叫做交互界面。


交互操作:交互操作就是指我们操作这个页面的行为方式,该页面目前只有两种,点击(Tap)和上下滚动(Scroll)。


滑动Scroll


点击Tap


交互方式:这是软件允许用户操作的规则,比如想要选择设计师,就要通过点击 “设计师” 栏目,在弹出的选择器中,通过滚动列表来选取指定人选的方法,就叫交互方式。


交互事件:交互事件是指整个人机交互中的其中一个独立事件,比如上面案例讲的,点击设计师触发选择器弹出的事件,就是一个交互事件,在选择器列表中选择具体设计师,也是一个事件。


交互流程:交互流程是完成一个操作目标的操作流程,范围可大可小。比如上面选择设计师的全部操作流程,可以定义为一个交互流程。而完成整个页面信息录入的过程,也可以成为一个交互流程。


交互动效:比如选择设计师的交互流程中,点击设计师选择器的动画效果,就叫交互动效。交互动效是由交互操作触发而成的,方便用户理解界面的内容,而不是任何在UI中看到的动效都叫交互动效,比如下图这种。


交互体验:它和产品、用户体验还不太一样,专指用户在交互流程中得到的体验,维度并没有覆盖产品服务、情感化设计。


关于交互设计、交互原型、交互文档,我们在下一个部分讨论。这里的结尾我们就来讲讲交互体验,交互体验的评判维度有很多。但抛开所有技术分析,我自己将交互体验的结果简化成 3 个:难用、能用、好使。


交互体验的好坏不是产品、交互、设计师、程序员说了算的,是由用户来评判的。所以产品和设计行业都会强调 “共情” 能力,可以站在用户的角度来审视我们做出来的东西,而不是呆滞的上帝视角。


之所以挑这个案例,就是因为即便作为读者的你们,应该也可以想象如果你是这个页面的操作用户,那么体验一定会非常差,虽然它功能可能是完备的,但一定是 “难用” 的。


而对难用的分析上,绝对不是直接去套理论分析哪里难用,而是先找到难用的原因。


这个是多数新手会犯的错误,不站在业务、用户的角度去使用应用,找出原因,而就指望着去套理论套公示来对这个界面进行 “专业分析”。


所以这里我们简单讲讲,它的主要问题:


  • 页面菜单选项太多,操作起来感觉压力非常大

  • 菜单内容的分布感觉混乱,很难形成记忆点每次要设置的东西在什么位置

  • 不同角色对这个页面的功能诉求不同,现在的设计显然没有满足






在得到上面三个问题以后,我们就可以对这个页面做出新的优化。 而要优化交互,我们就要首先从交互原型入手,即根据我们的想法设计出可以表现交互方式、交互流程的原型图,比如下图案例。

Protopie线上可交互原型:https://cloud.protopie.io/p/838165bdad


交互原型和产品原型不一样,产品原型是用来解释产品经理自己对产品功能的规划,不需要着重考虑交互体验,逻辑能跑顺并且能讲清楚即可。


而最终的设计稿,就是基于交互原型的基础上,遵照它的交互方式、事件、流程展开视觉内容的填充和细化。


我们再回到这个改版过后的案例,讲讲我们在交互原型中的流程给大家一点启发。


首先这个页面的所有菜单,并不是只有一个人完成填写,最起码要由派单员、设计师两个人,而财务、派单员进入到这个页面中,通常会有明确的目的要查看哪一部分数据,其它的数据信息对于他们而言都是干扰。


所以,我们将所有数据类型进行划分,统计结果如下(大致规划,了解意思即可)。


完成分类后,旧版中只使用上下滚动查找菜单的方式显然是不满足实际需要的,所以我就根据内容的划分创建一个分页栏的形式,将不同类目的菜单对应进行匹配。


当我们要查找某个具体元素的时候,首先选择对应的分类以后,再在分类下方查找。并且我们还引入一个新的 “交互方式”,可以通过左右滑动的 “交互操作” 来切换分类页面。




并且这个分页器栏目也可以进行标识,你的账户对这些内容的权限如何,比如 “不可看”、“只读”、“可编辑” 等等。


而每个分类下方,对它们再做一次逻辑分类,还有区分必填项和非必填项。如果有大量非必填项目为空,那么对于信息的查阅检索都是干扰,选填内容是用户需要填写的情况下才会去填,所以我们将每个分类下面的必填和选填也作出拆分,默认将选填菜单进行折叠(也可以是默认不折叠)。


这样,我们就可以得到一个你没有想到的 “船新” 版本。相信大家在这个版本的交互体验肯定比老版好出不少。


当然,这只是对交互流程的其中一个改版,并不代表我们的交互只能这么改而已,实际项目中,优秀的设计师都会提供几种不同的版本进行评审和测试,挑出其中最优的方案。


比如,我们可以不把分类页面做成左右滚动的,而是做成上下滑动的。


所以,在了解上面两套交互原型的案例,我们就可以再来介绍交互设计(UE)了。交互设计就是制定用户操作界面的流程、方式、体验的设计,和界面视觉设计并不能划上等号。


虽然过去行业里喜欢强调,将交互设计 (UE) 和界面视觉设计 (UI) 岗位拆分开来,但这不是一个太合理的现象,对于多数业务和团队来说增加 UE 岗位只是平添负担而已,未来的大趋势是由 UI 设计师负责交互设计的内容,当然也有个洋气的新名称叫 UX。


最后,在完成了上面这些内容的设计和规则制定以后,事情还没完。专业的 UE 和 UX 还会提供一份文档叫 “交互文档”,除了将交互原型图置入进去以外,还要具体来介绍它的交互方式、交互事件和交互流程的说明。


基于时间原因我就没办法提供一份基于这个案例制作的交互文档了,大家只要明白,如果我没在一个地方标注可以通过左右滑动来切换页面的方式,或者默认状态下选填内容是展开还是关闭之类的信息,那么最后落实到开发环节中可能就会导致很多细节问题的错误。





以上,就是我们关于对交互有关名词扫盲和解释的全部内容了。学习交互,要先从这些名词的认识开始入手,搞清楚底层的逻辑和原因,然后再通过实践和分析来积累对这部分内容的经验。


只有深入去了解业务,并站在用户角度审视,勤于思考的设计师,才能在交互领域中有所建树,理论知识只是其中嘴不重要的一环。


下面再把所有涉及的名词罗列一遍做个总结:


人机交互:用户和机器、软件实现操作和互动的过程。

交互界面:可以用来进行交互和操作的UI界面。

交互操作:用户操作软件、界面的具体操作,比如单击、双击、长按等。

交互方式:软件允许用户操作的规则,比如按钮的交互方式要通过点击才能触发。

交互事件:没完成一次交互操作并获得反馈的事件。

交互流程:用户为完成目标所做的一系列交互的合集。

交互原型:用来确定产品交互方式的原型图。

交互设计:制定用户操作界面的流程、方式、体验的设计。

交互文档:用图文记录交互思路、具体交互规则的文档。

交互动效:用来协助交互操作明确交互事件的动画效果。

交互体验:完成交互流程后所获得得感受。


完!

转自:站酷-酸梅干超人

日历

链接

个人资料

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

存档