首页

交互式数据可视化设计思维

ui设计分享达人

      随着大数据时代的快速发展,日常生活中对数据信息的接触场景越来越多,我们在做数据展示设计前首先要梳理数据重点,数据结构关系得到的结论结合用户需求产品需求等进行合理的设计。

      最初的数据展示接近于数据报表的形式,而现今数据展示有两种:静态数据可视化、交互数据可视化。它们的设计基础均基于数据可视化的设计要点进行延展的,而数据可视化要点已有很多优秀的设计师进行总结,因此我重点介绍一下我对交互式数据可视化的理解(仅代表个人观点),希望对大家有所帮助。

      什么是交互式可视化

      静态与交互式数据可视化的区别

      交互式数据可视化中的用户体验

      交互式数据可视化设计思维

      开源数据可视化库



什么是交互式数据可视化

      交互式数据可视化是一种更能够吸引用户的数据信息交流形式,在BI中的应用也变得越来越流行,并且由于其有较强的易用性以及能够为用户体验带来更多附加值而逐渐成为大多数数据分析系统的常见部分。它通过数据动态演示的交互方式,使用户可以直接与信息交互,用以构建自己对信息的理解,交互式可视化必须具有与人机交互方式,如单击按钮,移动滑块,快速响应以显示输入和输出之间的真实关系。

      有效的交互式可视化能够保持展示形式和数据功能之间的平衡关系。简单的图表可能因为太无聊而无法引起用户的注意,复杂数据可视化可能完全无法传达正确的信息。因此数据视觉和交互形式效果需要协同工作。



静态与交互式数据可视化的区别

      静态数据可视化是不包含任何交互功能且不随时间变化的数据可视化,从单一视角关注特定数据故事的信息图。图表中没有可操作的交互功能来调整静态可视化的数据展示结果,更适合不太复杂的数据故事、建立概念之间的关系以及传达预定的视图。其构建成本远低于交互式设计。因此在设计时必须充分考虑如何展示当前显示的数据拟定好数据故事。

      交互式是可视化设计中的绝佳工具,因为它们能够优化信息的显示方式,减少视觉噪音,降低用户对数据阅读的难度。系统中最常见应用之一是数字化仪表板或数字看板,如果直接从枯燥的数据表格获取信息这样的体验是非常原始且视觉干扰过多。而通过梳理数据结构使用适当的交互可视化使看板,能够成为用户快速汲取主要数据信息的理想工具

    设计时决定应用哪种数据可视化形式一方面需通过用户画像分析了解用户偏好如何,另一方面则需要结合数据故事复杂程度采用哪种才能够更全面更准确的传达数据信息,以及在构建项目的过程投入成本最终回报率的高低也起着决定性因素。




交互式数据可视化中的用户体验

      大量数据可用于帮助用户做出更好的业务决策。为了实现这一点,并从数据中获得最大价值,用户必须能够理解它;提出问题、体验模型并识别异常。

      在设计数据可视化面板时,最至关重要的是,需要考虑用户将如何使用这些数据。让更多的用户会使用数据面板而不是让他们去创建面板。强迫用户按照我们设定的规则去破译图表含义不仅不切实际且学习成本高昂。

      用户需要在不受额外功能干扰的情况下看到我们所展示的内容,当我们使用太多的颜色、形状、图案和大量的数据时,容易使用户迷失在数据展示中。我们的工作就是为用户处理数据信息结构降低用户对数据认知的难度。


视觉成像基础

      我们的大脑处理视觉图像要比处理文字内容快 60,000 倍,能够在13 ms内处理一张图像,然而,大脑的处理能力也是有限的。为了展示最优效果,数据可视化必须基于人类认知速度提供信息。需要设计输入来将信息分解成可管理的模块并以用户能够简易处理的方式呈现它。

 

用户分析

      我们在构建任何类型数据可视化时都需以用户为中心,了解用户的目标、动机和需求,经营环境,需要解决什么问题,以及用户语言和特定领域的知识;

在做这方面用户分析不需要耗费大量的时间,只要足以使我们能够进入下一阶段——设计用户路径上即可


用户体验路径

      系统用户的体验建立在两个主要元素上:关键点可视化以及交互路径。而用户路径中每个关键点需设计为对应特定的业务问题。

      可视化工具能够以丰富而复杂的方式与图表交互:筛选、缩放、细分、导出值等。它们都有助于将信息分解为更易于管理的块,因此我们需要考虑多种操作结果,综合起来能够串联出具有多个分支交互路径和图表用户体验路径。




交互式数据可视化设计思维

      可视化中的交互改变了数据的视角,始终致力于简单的可视化而不是复杂的可视化。目标是使其更易于理解和阅读。因此,需要避免使因使用过多的图表引起页面结构混乱,意味着通过过滤某些数据点,选择数据的不同区域,甚至完全改变可视化的类型。重要的一点是:交互式可视化不再是静态的,也不代表数据的单一视图。交互使人们能够根据自己的需要调整可视化并提出不同的问题。


寻找理论依据

      通过了解受众群体是谁,需要展示哪些数据,了解他们将如何使用这些数据。这些都将作为我们设计的理论依据,用以解决设计中哪些图表是可以快速应用到实际场景中,如何为数据结构做简化等问题;在数据的展示形式上通常是使用图表、线条或点、条形图和地图来实现的。万变不离其宗,交互可视化也是同样在此基础上进行扩展发挥作用。


遵循设计原则

      在设计中需要为数据可视化创建各种交互式小部件,但首先需要遵循数据可视化交互设计的三个基本设计原则——可用性、可访问和可操作。

       是否有直观的交互功能和数据可视化?

       用户是否可访问数据,并且能够快速理解其含义?

      是否为用户提供简便易上手的可操作的系统平台?

      当我们有了一个粗略的理论基础模型,就可以搭建数据模型来记录每条数据和相关的元数据,接下来是通过各种交互形式设计用户界面。


清晰的架构

      可视化架构是映射数据故事的形式化基础,在此基础上通过线条、图标和颜色等设计元素的视觉工具进行展示。为了利用这些工具,我们责需要运用对比关系、比重关系、颜色差异、位置信息和象征意义等突出显示信息所呈现的目的及数据间的结构关系。


可视化美学

      设计美学中少即是多的设计理念经久不衰,我们在进行可视化设计时也可按照这一标准在有限的设计空间内为用户提供最多的想法,清晰准确的传达复杂的想法


交互式绘图

     交互不一定发生在页面中明显可点击的事物上,也可融入在图像结构中,用图表中交互的小部件,扩展到其他类型的内容上,通常需要一个或多个UI 元素进行转换提示。

如在做地图中的交互可视化时要探索当前特定点或区域的实时信息,此时需要将图标或交互功能融入在地图上


开源数据可视化库

      简单介绍一下开源的交互可视化数据库,如果对数据没有什么概念在图表设计前可以参考一下数据库中的样式及类型,然后根据自己实际项目的需要进行设计。

D3.js 可能是最流行和最广泛的 Javascript 数据可视化库  专为基于数据操作文档而构建,并使用 HTML、SVG 和 CSS 使数据栩栩如生。

还有很多开源数据库可以查看- 11 个 Javascript 数据可视化库-里面有详细的介绍,这里就不一一说明了,希望在你们的设计中有所帮助。

结论

为了提高交互式数据可视化易用性以及为用户体验带来更多附加值,我们需要基于数据调研,用户分析,场景模拟等方向逐一解决相对应的问题,才可从各项结论中得出设计方向和目标。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷    作者:胖Kuan

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



提升产品易用性的10个知识点

ui设计分享达人

作为设计师,我们希望做出来的产品对于用户而言易于访问、易于浏览、易于理解和可供所有人使用。而我们在做页面的过程还要考虑具有视力障碍、行动不便等残疾类人群

万维网的创始人蒂姆·伯纳斯·李 (Tim Berners Lee) 也重申了这一点,他说:

“网络的力量在于它的普遍性。无论是否残疾,

每个人都可以访问是一个重要方面。”

因此,这里有十种方法可以使你的界面更易于访问和更具包容性,并确保你是为用户设计的产品


文章内容包含以下:

1、颜色对比

2、导航选项

3、不仅仅使用颜色来指示状态变化

4、视觉焦点

5、预先加载

6、设计表达

7、视觉层级

8、合理交互

9、用户测试

10、无障碍设计


1、颜色对比

色彩是设计的主要方面之一。确保背景和元素模块之间有适当的对比,可以使用适当的阴影和颜色对比来

区分,突出重要信息是使你的产品更易于访问的最简单的方法。


这里推荐使用工具WebAIM 颜色对比度检查器来实现平衡的颜色对比度。该工具允许输入特定的十六进制代码或从色轮中进行选择,然后进行增量调整以达到元素之间的 AA(最低对比度)或 AAA(增强对比度)对比度标准。

网址:https://webaim.org/resources/contrastchecker/


2、导航选项

在用户使用时,导航的便利性是最重要的因素之一

(确保产品内跨页面的导航具有一致的命名、样式和定位)

(为用户提供站点搜索或站点地图)

(通过提供方向提示例如面包屑和清晰的标题帮助用户了解他们在网站或页面上的位置)


3、不仅仅使用颜色来指示状态变化

虽然颜色对于传达信息很有用,但它不应该是传达信息的唯一方式。在使用颜色来区分元素时,请确保始终提供不依赖于颜色感知的额外标识,以便于用户易识别


比如在做表单的情况可以通过以下方式去做区分


(除了颜色之外,还使用星号来指示所需的表单字段)

(使用提示标签来区分状态)

(添加说明文字)



4、视觉焦点

一些用户使用手机端产品时很难去聚焦于某个点,作为设计者这时需要去通过手法去制造焦点引导用户进行操作。

以手机屏幕为例,用户阅读的习惯分为两种,一种是“z”习惯型另一种是“F”习惯


比如可以在用户浏览路径上去做视觉焦点,引导告知用户进行点击,下面是列出的有效焦点指标:

(具备清晰的对比度)

(具有与元素互补的形状和大小)

(使用互补但引人注目的配色方案)

(好的动画可以帮助用户跟踪焦点移动)

(元素位置大小等适配各种型号)


5、预先加载

在产品上不管是文字还是图片都需要提前告诉用户当前状态,不同的使用环境下用户的网络相对是有波动情况,在网络不好的情况下用户打开产品如果产品没有做预加载大概率会造成用户直接关闭产品


6、设计表达

“没有用户喜欢点击他不想点的入口”听起来比较绕,你可以这样理解,我们平常看到的按钮是什么样呢如果在页面中我们把一个按钮做成一个灰色上面写着点击进入,作为设计者的我们在遇到这样的一个按钮相信都会犹豫的,灰色传达给用户的信息是禁止不可点击,用户已经被培养出这样一种习惯,但是遇到这种按钮上面还写着《点击进入》就会造成信息传达不准确(不仅仅是按钮)。




(样式符合用户理解范围内)

(交互给用户合理反馈,点击后状态、按压状态、禁止状态)


7、视觉层级

建立视觉层次结构, 元素在你的页面设计中的定位方式,并在这些相应元素之间建立一定的连贯性。


(不要挤满屏幕,否则会提升用户阅读成本)

(视力受损的人可能需要放大屏幕上的元素,因此请使你的内容具有可扩展性)

(将重要信息放在视线水平附近)

(使用空格和邻近度使内容之间的关系更加明显)


8、合理的交互

一个好的交互能够让产品达到一个沉浸式体验,相反一个差的交互会造成用户的反感;什么是合理的交互例如在使用阅读产品时,翻页功能是模仿现实中书本的翻页效果作用到线上就会制造出一个良好的体验

交互不仅仅是操作反馈还包含页面布局、元素展示、场景使用等

(符合用户对现实物体的认知,达到联觉效果)

(内容简洁,具备吸引力)

(出现场景是否合情合理)

(具备反馈能力)


9、用户测试

即使在前期工作做的足够好的情况下,在你觉得整个产品设计易于用户使用之后,使用产品的用户也可能会发现某些地方并不像你希望的那样友好


避免这类问题的最佳和最有效的方法是通过用户测试,在整个产品开发项目中进行非正式评估比在项目结束时进行正式的可用性测试更有效,用户测试有很多好处,至关重要的是你能够了解你的产品还存在哪些不足那些设计不到位,然后针对这些不足进行问题解决



10、无障碍设计

创建无障碍设计最重要的部分之一在于知道它绝不是创新的障碍,但是它可以让你创新你的设计,在做产品的时候要考虑到产品不单单只服务一部分人,所以在设计时应当考虑到具备一定障碍的群体

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷    作者:爱吃猫的鱼_

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



设计要知道-HMI设计必看!车载中控的前世今生

ui设计分享达人

首先先普及下HMI的概念

HMI:- Human Machine Interface : 人机界面,现在多指车载交互系统体验设计。

既然说到人机界面,我们先来设计的载体是如何演变的。




一、车载中控仪表盘演变过程


1886 年,由卡尔·本茨发明的第一辆汽车。当时根本就没有所谓的仪表盘概念,所以载体还得从1908年T型车(Ford Model T)说起,到2012年划时代的特斯拉Model S,汽车仪表盘目前经历四代。



1、第一代:以按键为主


机械式仪表盘: 第一个时代仪表盘为机械芯仪表,一般包含了车速里程表、转速表、机油压力表、水温表、燃油表、充电表等,之后汽车仪表还需要装稳压器来稳定仪表电源的电压,抑制波动幅度,保证汽车仪表的准确性。初代的汽车仪表盘主要以传统的热式和动磁式,显示的信息极为有限,更多的是车辆物理信息“通信员”的角色。


在机械时期中控台哪有什么屏幕可言,那时候的中控台就是收音机和空调的调节器,而且都是实体按键的,只能满足驾驶的基本需求,没有屏幕,都是照搬飞机中控布局,以实体按键为主,功能简陋单一。堆砌功能按钮仪表,没有交互可言。






2、第二代:电气式仪表盘+小中控屏


第二个时代的电气式仪表盘终于诞生,从真空荧光显示屏(VFD),发展到采用液晶显示屏(LED)及小尺寸薄膜晶体管显示器(TFT),显示屏显示的信息越来越清晰、快捷。目前电气式仪表在市场的保有量最大,且一般采用机械仪表结合数字仪表的方式,例如车速、转速信息采用指针,指示灯信息采用LED等点亮,其它信息则采用TFT屏。



虽然相较于第一代机械机芯仪表增加了不少功能,汽车信息反馈也更全面更及时,但是其发展速度却明显与汽车行业不相匹配,对于更深层次的驾驶需求,电气式仪表仍无法满足。




3、第三代:全数字化仪表


汽车仪表盘领域在不断追求更新,于是划时代的全数字液晶仪表盘孕育而生,也是就我们常说的虚拟仪表盘。全数字汽车仪表盘使用了一整块液晶屏取代了传统的指针和刻度表,所有信息都通过这块屏幕显示出来。


单从外观上来看就能给人以一种比较高大上的感觉,这类仪表盘上往往没有指针等部件,所有信息都通过屏幕传递出来。功能更强大、信息显示更具逻辑性,驾驶者接受信息更快,提升行车安全。也可以根据个人喜好调整相应参数,比如比亚迪的仪表盘就可以改变背景颜色。在高级点的,像宝马的全数字仪表就可以切换N多种模式。


2007年iPhone问世后,大屏、轻薄机身、高清显示屏、可安装应用等功能引领了整个行业的革命。电动汽车行业飞速发展,智能AI和人际互联等人车交互概念也跟着兴起,对于中控台的需求和功能复杂度也跟着越发精细起来,结果就是屏幕越来越大。


2013年上市的特斯拉Model S,座舱里最惊艳的就是那块17寸的大屏。超高的分辨率和流畅的操作,和漂亮的UI设计,最初让很多美国民众疯狂。就像苹果手机颠覆了传统手机业,特斯拉也颠覆了传统汽车行业。


2014年换代的奔驰S级将两块12.3寸屏幕连在一起,合成了一块23寸大屏,比特斯拉的大屏还多出6英寸。




拜腾M-Byte,48寸巨屏,横向贯穿仪表台,再一次颠覆汽车的内饰设计。



比亚迪系列汽车的旋转大屏,玩出新花样,可以旋转控制,就像手机横屏和竖屏的场景。


纵观下来,其实不难看出,虽然汽车的中控屏幕也是往着越来越大的方向发展,但因为空间以及功能需求的不同,相比起手机来说,中控屏幕的变化更具备多样性。




4、第四代:HUD显示屏


从上世纪80年代,抬头显示技术在汽车领域已经开始被使用,直到现在才开始逐渐展露头脚。

HUD抬头显示器(Head Up Display),又叫平视显示系统。它可以把重要的信息,映射在风窗玻璃上的全息半镜上,使驾驶员不必低头,就能看清重要的信息。


战斗机是率先应用HUD抬头显示器的。飞行员在空战中,需要交替观察舱外目标和舱内仪表,易产生瞬间视觉中断,因此会导致反应迟缓、操作失误,并有可能贻误战机,采用HUD抬头显示可克服这一缺点。


第一架使用HUD抬头显示的飞机是美国海军的A-5舰载机。民用航空最早使用HUD抬头显示是法国达索飞机公司的mercure飞机。



在复杂多变的道路上开车,驾驶员双眼离开车辆前方,是个非常危险的事情,尤其是在高速公路上更是明显。于是很多车型,就给车辆配备了一个不需要挪开视线,就能知道车辆基本信息的配置,这就是HUD抬头显示。



HUD作为一款新技术,优势显而易见。当驾驶员需要查看仪表盘或中控台上的信息,视线至少需要转移0.3秒,而HUD投影的信息就在驾驶员平视的正前方,驾驶员可以将更多的注意力放在路面上。将驾驶体验及驾驶员对于路况信息的认知能力进行革新式升级。





二、六大车载系统的特点


现在各家系统百家争鸣,各家车载系统设计有哪些不同?



1. 阿里 斑马智行


简介:


1、阿里车载小程序是一种无需下载安装即可使用的“应用”,旨在为用户打造“随时可用”、“用完即走”的使用体验。


2、AliOS作为互联网汽车操作系统,原生地支持阿里小程序,引入阿里生态服务的同时也面向开发者开放,围绕车场景为用户提供从出行到生活的各类智慧服务。


特点:


1、设计特点:


独立的大卡片式的内容界面模块方便车主在行车过程中单手操作,其配色鲜艳,风格扁平,符合使用场景和国人的使用习惯。


2、功能特点:自带场景智能感知的基因。


得到车主授权后,车载小程序可以围绕行车场景,实现上车前、行车中、下车后自然串联的智能化场景服务。


用户可以在车上通过触控、语音、手势等多模态交互方式,咨询附近的推荐餐厅,小程序会基于用户的喜好作出推荐,还可以预约排号;到达餐厅附近,系统会自动唤醒小程序,为用户找到停车场;下车后,车载小程序会无缝连接到手机小程序端,用户可以在手机上查看餐厅的预约信息等。


△ 斑马智行2.0系统设计


斑马智行,采用智能手机界面和应用商城下载 APP 的使用方式,实现车载和手机的双重控制。


强大的云端特性在语音识别和线上互联方面提供了良好的使用体验,车主可以连接手机蓝牙后,读取其手机通讯录,实现利用车载系统拨打和接听电话的功能。支持 USB 接口,通过 U 盘实现播放音频、视频文件等。在娱乐生活方面,内置虾米音乐,蜻蜓FM,喜马拉雅等,支持在线搜索,在线播放以及在线广播等服务。


同时,斑马智行依靠阿里强大的技术和资源支持,打通停车场,加油站,高速公路支付等,使用户驾车时产生的费用均能通过支付宝支付。




2. 百度 Car Life和Apollo


简介:


1、打造智能车载服务生态,满足用户出行、娱乐、生活等多元化需求,构建人-车-家一体化互联闭环成为时代趋势。


2、智能小程序,是百度提供的一种技术解决方案。开发者基于此开发出来的服务,在各类宿主环境(手机 App、车载系统、IOT 设备等)中,可做到用户无感知安装,即点即用。


特点:


1、设计特点


车载端主界面分别采用蓝、绿、红、灰四个色块对应四个功能模块,「发现」集成音乐、娱乐、听书、电台等特色音视频服务,采用红色在界面中最为突出,其设计风格整体扁平,面性 icon 利于识别与点击。


2、功能特点


智能小程序包括“车后服务”、“资讯”、“休闲游戏”、“视频”、“购物”、“亲子”、“旅游”、“工具”等8个类别,一共80多款。车企可以根据车型定位和自身需求自行定义和组合可供使用的车载小程序。


百度的车载小程序大部分场景下还是只能依靠用户用语音唤醒,但在生态的开放性上,百度车载小程序则做得更为彻底,可以在百度App、百度地图、百度贴吧、百度网盘百度系App上运行。





3. 腾讯 Ai in Car




简介:


1、“腾讯小场景”是专为出行场景打造的车载轻应用生态,部署在云端,不需要下载,即用即走,并支持语音交互。


2、分为3类,出行服务小型车、生活服务小程序和视听服务小程序。


特点:


1、设计特点:


运用的FutureLink3.0系统,FutureLink3.0 基于安卓平台开发,在 12 英寸的中控屏幕上并没有将大量的图标堆砌在首页,反而以地图为背景,将六大功能模块以大板块的形式布局在地图下方,整个界面设计简洁。


2、功能特点:


最大特色:基于位置和场景会被自动唤醒。比如用户经过加油站、停车场、旅游景点的时候,有些购买和支付的服务就会主动弹在车机上,用户再通过语音完成操作。


手机小程序是“人找服务”,那么腾讯车载小程序则进化成“服务找人”。


△ 腾讯在车载场景下的生态布局


Ai in Car,顾名思义,基于 AI 的连接能力和生态,融合腾讯内容生态的优质资源,包括资讯、视频、IP、文学等板块,为车主提供更丰富的内容消费。风行搭载的 FutureLink3.0 车联网系统,就是和腾讯深度合作而诞生的优质案例。



△ FutureLink3.0系统界面


只在设置页中,才会出现二级子菜单列表,而且提供的设置项目也不多,界面层级简单,不累赘,也给司机带来轻松愉悦的操作体验。同时,基于行车安全考虑,在类似天气、股票等查询功能上,比较依赖语音控制。在娱乐生活方面,打通手机和车机账号,用户无需切换账号就可以与车载导航、电台、QQ音乐、微信等功能无缝衔接,支持车主组建聊天组,在行车途中与好友进行实时沟通。


从整体来看 FutureLink3.0 的设计,它更像是一个把需求页面展现在车主面前的「轻应用」,没有传统概念上的主界面、多层交互菜单以及相应的「系统特质」的设计,它更希望把海量资源建立在云端,终端只给车主呈现其所需要的服务即可。




4. 谷歌 Android auto


简介:


Android Auto 系统的工作原理是将手机连接到兼容的汽车,让驾驶员可以使用汽车屏幕和语音操作与手机的应用程序进行交互。它提供了一种导航、收听媒体和消息等的简单方法。


特点:


1、设计特点:


在 UI 框架设计方面,主屏幕以卡片的形式显示通知、活动、导航和消息,右下角有启动语音命令的麦克风图标和底部的活动栏,这些特性属于全局 UI。在它下方,应用程序内容区域显示应用程序启动器或当前使用的主应用程序的内容。



△ Android auto手持设备与车载设计系统


Android auto 将 Android 平台扩展到汽车上,它有两种使用方法:在手机上或在兼容的车载屏幕上。


它有一个简单的界面,标准化的用户交互模型和强大的声音动作,其目的是帮助司机尽量减少分心。需要注意的是,为汽车设计交互式应用程序与手持式设备的设计有根本上的不同,其应用程序的交互界面应该简化,以确保司机的眼睛和手集中在开车上,减少司机分心。


△ Android auto车载系统UI框架


卡片上提供如消息字符串、图标、图形和操作等内容,会根据用户最近的使用情况和优先级来确定卡片的大小。主屏幕会限制卡片的数量,以保持列表的简短和相关。因此,当新的、更相关的内容出现时,应用程序的通知可能会从屏幕上消失。同时,抽屉式的交互方式,提供了简单的操作和导航。每个抽屉项目必须提供一个单一的触摸目标,避免在抽屉里放长的列表,或者在相同内容的视图之间切换。这里官方给出的最佳 UI 做法是简化内容,关注上下文,显示新鲜的、有用的和大多数不滚动的项目,使用单行,对决策至关重要的较长字符串使用两行。




5. 苹果 CarPlay



简介:


CarPlay 车载系统旨在令用户通过汽车制造商之原生车载系统来使用、操控iOS设备并发挥其功能。该产品的首个版本计划于2014年发布,最早出现在一些制造商的汽车展览上。


特点:


1、设计特点:


基于手机映射,所以界面除了横向布局外,icon都和手机端统一。以简洁的布局提供有用的、重点突出的信息,便于从驾驶员座椅上进行扫描。不要用不必要的细节和不必要的装饰来弄乱屏幕。


在整个应用程序中保持整体一致的外观。一般来说,具有相似功能的元素应该看起来相似。


2、功能特点:


作为车内辅助、操作、娱乐的中心,Carplay 可以直接连接到汽车中控的触摸屏上,提供基于 iOS 的相关的服务和应用。Carplay 的整体设计围绕着车内驾驶这一使用场景,而它的设计原则也围绕着这一场景来规划:

  • 成熟。基于最熟悉的 iOS 应用,来设计界面元素,并提供熟悉、直观的体验。

  • 简短。采用尽可能简短的交互,不过度引人瞩目

  • 相关。屏幕显示信息高度相关,提供尽可能少选项,不需要复杂决策

  • 语音。基于Siri,以语音交互为核心,司机无需视线离开前方,手也不用离开方向盘即可完成交互。


全新的电子车钥匙,加上 Apple CarPlay 车载流畅的使用体验,让 iPhone 能在旅途上发挥更多作用。地图、电话、信息、音乐、日历、一言、一触、一旋随你驾驭。






6、华为车机应用



简介:


HMS for Car是华为终端云服务打造的智慧车载云服务解决方案,基于HMS(Huawei Mobile Services),通过AI场景引擎结合华为生态资源,为用户提供精准丰富的出行场景内容和服务,助力汽车从交通工具向具有交互和服务的能力的智能终端进化。


华为快应用是一种基于行业标准开发的新型免安装应用,其标准由主流手机厂商组成的快应用联盟联合制定。开发者开发一次即可将应用分发到所有支持行业标准的手机运行。


HMS Core提供端、云开放能力,帮助开发者实现应用高效开发、快速增长、商业变现,使能开发者创新,为全球用户提供精品内容、服务及体验。

1、全球化分发。已上线超过170+国家和地区。

2、全终端接入。全面支持从小屏幕到大屏幕各种智能终端。

3、全场景支持。快应用直达链接和卡片嵌入全终端场景。


特点:


1、设计特点:


在交互界面上,Carplay和Carlife由于使用的投屏方式,主界面依然是一个个的APP图标,需要点击启动进入后才能使用。笔者认为采用这样移动端过于笨重的交互方式并不适用于车载场景;HUAWEI HiCar的设计理念是"安全便捷、自然舒适、智能贴心", 对车载端的人机交互要素重新布局规划设计,采用桌面卡片的设计方式,以满足复杂驾驶状态下的使用需求。



桌面卡片是应用内容和功能特性的重要载体,用户通过对卡片的快捷操作直达应用的核心功能,提升交互的便捷性。应用可通过接入 HUAWEI HiCar 桌面卡片的方式呈现最核心的功能和服务,并根据自身的需求特性,自行组合卡片元素以满足不同场景下的用户诉求。

  • 背板:背板样式可以为色彩填充或设置背景图。

    背景色支持黑、白、彩色三套。

    应用需提供三套背板以适配卡片主题切换。

  • 品宣区:品宣样式为图标+文字,应用可根据在此区域显示品牌图标和名称。

  • 内容区:展示与应用场景相关的信息,其内容可以是图片、文本或图文样式。

  • 操作区:操作区为文字或图片按键,最多 3 个控件或 1 个控件组。



2、功能特点:


华为智慧助手,可结合用户使用场景,以卡片形式推送提醒、服务和行程,实现智慧化服务找人。例如,送孩子上学时,车机端华为智慧助手将自动推送"有声续播"卡片,用户点击卡片,即可一键续播孩子在华为手机上没听完的有声儿童内容;用户在开车下班回家路上,进入离家500米范围内时,车机系统可自动启动"回家模式",提前打开家中的窗帘、空调等设备,方便用户享受惬意生活。



My Car功能面向车企开放华为手机等智能硬件系统级入口能力,能够实现远程控车、查车、汽车服务/告警关键信息等反向推送能力。远程控车功能,可以满足用户高频控车诉求,例如,远程开关空调、寻车、查看门窗状态等。另外,当车辆胎压不足、门窗未关闭时,用户也能通过手机、车机及时收到提醒。





三、系统的开源地址


1、阿里Alios开放平台

https://miniapp.alios.cn/index#/document


2、百度车载生态开放平台

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html


3、腾讯-车载小场景(私我领取PDF)


4、谷歌驾驶

https://developers.google.com/cars/design/design-foundations


5、苹果apple car play

iOS - CarPlay 车载


6、华为车机三方应用交互设计规范

https://developer.huawei.com/consumer/cn/doc/50902#h2-1587181522014






蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷    作者:郝小七

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



弹窗主按钮与菲茨定律的纠葛

ui设计分享达人

问题是这样的:有位设计师和我探讨弹窗主按钮在左侧还是右侧的问题,他说,他觉得应该在右侧,原因是因为菲茨定律(Fitts’ Law):“弹窗主按钮在右侧,次按钮在左侧,是由于菲茨定律,这是因为边角的按钮更容易被点击。”


主按钮在右侧,这个我是能理解的,但在右侧的原因是由于菲兹定律决定的,我是持需考证态度的,毕竟虽然这个说法确实听到过,但我认为还有待进一步梳理,这里需要细究的要点包括:


第一、弹窗主按钮一定要在右侧吗?


第二、如果弹窗主按钮“更适合”在右侧,是不是只有菲茨定律的原因,还有其他原因吗?


第三、菲茨定律到底在解决什么问题,它是否除了上述问题,还解决了其他问题?


带着这三个问题,本文打算从如下几个方面展开:
第一部分:弹窗主按钮位置 
1、PC端弹窗主按钮位置情况 
2、弹窗主按钮位置在哪里更合适 
第二部分:费茨定律 
1、什么是菲茨定律 
2、菲茨定律的启示 
第三部分:总结 

第一部分:弹窗主按钮位置
1、PC端弹窗主按钮位置情况
为了聚焦用户的视觉与心理,激起用户的反馈,弹窗诞生了。由于弹窗可以承载的内容丰富,且交互具备扩展性,弹窗被广泛应用于应用、网页等产品中。在弹窗设计中,标题、关闭的位置基本设计者们基本不会产生争议,而主次按钮的位置是一个永恒的话题。 

1.1、按钮组位置
对于弹窗来说,按钮组的位置位于footer区,此点无可争议。但按钮组应该在footer区的左侧、中间,还是右侧呢?从大量产品设计中我们可以发现,位于左边的比例几乎为0,中间大约5%,而位于右侧的比例达到95%。 

1.2、主次按钮顺序
既然弹窗按钮组在95%的情况下都为右侧,那么我们就来看下,在该种情况下,win和mac系统主次按钮的顺序是怎样的,站在巨人肩膀上,总是能看的更远。 

主按钮是指行动按钮,行动按钮是连接用户与产品的接触点,一个优秀的行动按钮,可以提升用户体验,且帮助用户高效完成任务。主按钮颜色在视觉上通常被醒目突出,而次按钮被弱化表现,这可以降低用户出错的风险,及提高用户完成操作的概率。 

在win系统中:
主按钮在左侧,次按钮在右侧。 

在mac系统中:
主按钮在右侧,次按钮在左侧。 

这里插一句题外话,mac的窗口关闭,最小化、最大化按钮在左上角,而win在右上角,它俩总是做啥都反一反。 

那为什么win和mac会做出不同的选择呢?背后又有哪些设计理念在支撑?翻阅了网上各种说法后,我总结出如下说辞: 

1、mac倾向于把当前场景下推荐用户点击的按钮放在右侧,例如,mac推荐取消,就会把取消放右侧;推荐储存,就会把储存放右侧。且右侧按钮为主按钮,视觉上突出强化。 

2、win倾向于把最安全的按钮(比如取消,关闭)放在右侧。因此,可以说它的主按钮在左侧,只是主按钮没有明确的视觉样式,保持和次按钮一致。 
2、弹窗主按钮位置在哪里更合适
关于主次按钮在左侧还是右侧更合适,两大巨头给出来的设计方案是不同的,网上也有很多同学做了该方面的实验,结果大致是说:不论主按钮在左侧还是右侧,只要系统中统一皆可。就像中国人吃饭用筷子,西方人用刀叉,与其纠结筷子和刀叉哪个更适合吃饭,还不如考虑用户的习惯、使用场景等因素,制定出更合适自身产品的解决方案。 

不过话说回来,目前支持弹窗主按钮在右侧的人数占多数(产品专家、设计专家、用户皆包括),原因不外乎:
1、右手操作原则; 
2、用户在弹窗中的阅读模式为“Z”字模式; 
3、BLABLA(接下来我们看看是不是菲茨定律也要参与进来)。 

第二部分:费茨定律
什么是菲茨定律
1954年保罗.菲茨首先提出菲茨定律,费茨定律是用来预测从任意一点到目标中心位置所需时间的数学模型,其后来在人机交互领域也得到了广泛的应用。它的计算公式为: 
T代表完成移动所需的平均时间; 
a代表光标开始/停止的时间; 
b代表光标移动的速度; 
D代表从起点到目标中心的距离; 
W代表目标的宽度(按移动方向为水平方向计算)。 

首先,完成移动所需的平均时间由两个参数来决定,即起点到目标中心的距离D和目标的大小W。其次,起始点与目标距离远,耗时越长;目标越大,耗时越短。 

这里还涉及用户在使用产品时到达到目标的心理诉求:
1、用户对鼠标指针达到目标并没有时间要求,则用户会缓慢移动鼠标指针,在此过程中逐步调整鼠标指针移动的位置,从而最终达到目标。 

2、用户对鼠标指针达到目标有明确时间要求(例如股票下单场景),此时用户会快速将鼠标指针移动到目标附近,然后在做精细化的调整,从而精确操作目标。 

由上我们可以发现,不论用户是否对鼠标指针达到目标有时间要求, 菲茨定律中的两个关键点为:鼠标指针移动到目标大致区域及精细化微调后精确定位目标中心。且在实际产品设计中,我们必须要考虑如何让用户的鼠标指针以最短的时间到达目标。 

因此,我们可以将菲茨定律中,从起点到目标所需的时间细化为以下四种情况:
1、距离远-目标大
除了鼠标指针需要跨越较大的屏幕范围,相对来说还是比较容易到达目标的,因为目标大。 
2、距离远-目标小
用户需要在鼠标达到目标可触位置前做一些鼠标位移的精细化调整。 
3、距离近-目标大
用户无需做太精细的调整就可以轻易到达目标。 
4、距离近-目标小
在快速到达目标后,鼠标需要做一些精细化的调整。 

以上的距离远近实际上还可以进行细化区分,一个是鼠标指针处于页面任意位置,与目标并无上下文关系;一个是鼠标指针处于下一步操作的上一步位置。 

这里可能会影响到的情况是,当鼠标指针处于页面任意位置时,目标元素的大小需要做通用化考虑(使用业界标准或用户的常规认知)。而当可以非常明确鼠标指针与目标的上下关联时,可以适当调整设计策略,例如鼠标hover一个按钮,出现面板,我们可以发现 ,鼠标指针一定是在按钮上了,才可以去进行下一步操作,这个场景下,鼠标指针的起始位置永远是不变的,变的是目标,即选择了面板中的哪个操作。 

菲茨定律的启示
从上述可知,在产品设计中,我们需要 优先考虑使用“距离近-目标大”的设计方案,再考虑“距离远-目标大”和“距离近-目标小”(但也不能太小,还是要稍微合理化一些),不要去考虑“距离远-目标小”的方法。下面梳理了一些在产品中用到菲茨定律的例子,让大家加深对菲茨定律的感知。 

1、点击区域合理加大,降低操作复杂度。例如表格排序功能,需要扩大点击区域。 
2、可点击属性视觉化。例如tabs的下面会带一条选中的宽度线,由此可推理出鼠标hover到其他tabs上的区域也是如此。 
3、相关内容与操作靠近。例如word中鼠标选中文字,右键可带出相关的操作。 
4、相关按钮互相靠近摆放。例如word文档需要被保存,通常保存和取消靠近,便于用户快速做出选择和操作。 
5、给目标操作安排流程,而不是点状设计功能。例如对单条数据启动编辑后,在原位进行保存。 
6、不希望用户操作的时候,目标设计远一点。例如word文档需要被保存时,mac系统会将“不储存”按钮距离“储存”按钮远一些。 
7、控制风险。在移动端中,如果不想用户误触,会将危险系数较高的按钮放在距离拇指热区远的位置。还有例如睡眠、关机、重启等按钮也不适合放一起(实际上真的放一起了,我无数次误关机)。 

第三部分:总结
说到这里,想必大家对菲茨定律已经有了基本认知吧。在菲茨定律中,有一条为:页面四周的按钮更容易被点击(无限可选中),因为鼠标达到屏幕的边角后,就不可能在超过了,所以mac和win都会将按钮放在屏幕边缘。这个就是那位设计师小伙伴说的,“弹窗主按钮在右侧,次按钮在左侧,是由于菲茨定律,这是因为边角的按钮更容易被点击。” 

实际上我们会发现,假如弹窗的主按钮在右侧,鼠标也并不是达到屏幕的边角,鼠标只是达到了弹窗的边缘(这里会存在一定的心理边缘感知,可能那位设计师就是说的这个吧)。然而,这与菲茨定律中的边角无限可选中概念不是一回事。 

所以说,目前弹窗主按钮大家更赞同在右侧的设计理念是:
1、右手操作原则:右手用鼠标,用户会习惯性把光标放在屏幕右边。 
2、用户在弹窗中的阅读模式为“Z”字模式:先浏览标题,最后视觉落脚点在footer右侧。手眼协调,手会执行视觉落脚点的操作。 
3、mac已经培养了大多数人的用户习惯,这点从很多产品设计中就可以看出,放弃用户习惯就是挑战用户体验,所以,我们为何不去拥抱呢。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷    作者:小果1

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


从5个方面,全方位解析微信的搜索功能设计

ui设计分享达人

动互联网时代,用户信息被孤岛化,用户生产的内容被隔离在自家产品,搜索引擎无法通过搜索抓取,例如微信公众号、小红书等。

在国内除百度搜索外,用户使用量最多的可能就是微信搜索。微信搜索可以同时搜索到来自微信公众号、微博、知乎、腾讯视频、快手、第三方网页、小程序等渠道的内容。

本文主要讲解微信搜索功能规则设计,大纲如下:

  • 全局与局部搜索
  • 搜索前置
  • 本地与联网搜索
  • 即时搜索
  • 搜索排序

全局与局部搜索

搜索范围一般有两种,一种是全局搜索,搜索的内容为整个平台的内容;另一种是局部搜索,即搜索结果仅为规定的范围,其好处可以缩小搜索结果范围。

微信首页、通讯录和搜一搜均采用全局搜索,即搜索内容为整个微信平台和第三方的内容。

从5个方面,全方位解析微信的搜索功能设计

小程序和订阅号搜索,则是局部搜索,即只搜索规定范围内的搜索结果,避免搜索结果含有其他非想要的类型。

从5个方面,全方位解析微信的搜索功能设计

搜索前置

微信是为数不多的将搜索范围前置(搜一搜,搜索结果页也有搜索范围筛选),而其他的 app 大部分是将搜索范围后置。即搜索出现结果,通过 tab 展示不同的搜索结果,例如 b 站。

从5个方面,全方位解析微信的搜索功能设计

为什么微信将搜索范围前置呢?

我在网上找到了比较靠谱的回答,以下是来自纯银社群 Tony 的回答:

微信目前没有能力去做全搜索结果的后置分类。这里的“没有能力”是个中性词,因为和网页这种格式化标准化的内容组织形式不一样,微信内部的内容格式高度不统一,难以统一搜索。

比如现在微信的搜索结果是有分类的,分类是 1. 最常使用;2. 联系人;3. 群聊;4. 公众号;5. 聊天记录;6. 收藏;7. 内容搜索(搜一搜)。其中有可能还插入一个“游戏类别”。同时前置也有分类,分别是“朋友圈”,“文章”,“表情”,“小说”,“音乐”,“表情”。

可以看到这些分类对应的内容可能是通讯录的联系人,可能是群聊名称,也可能是公众号名称等等。这些格式不统一的内容之间,缺乏一种像网页 pagerank,社交媒体 feed 的 edgerank 的排名算法,这在技术上就形成了很大的挑战,微信很可能“没有能力”。因为内容形式不统一,就很难用同一个标准算法衡量每种内容的权重,即使是淘宝的商品,因为统一是商品,所以基于“好评”“购买量”“价格”等特征来做 rank 的技术挑战也比微信要在“联系人”“群聊”“公众号”“朋友圈”“表情”这些纷杂的内容形态之间做 rank 要简单的多。

简单说,如果只搜联系人,微信能做排名;只搜朋友圈,微信也能做排名;但是揉在一起,微信就不知道怎么做排名了:联系人应该排第一栏还是朋友圈内容应该排第一栏,或者说是表情包应该排第一栏?这个结论如何得出?

因为微信没有能力做这些不同格式内容的搜索排名,或者说控制不了把多种不同格式内容糅合在一起进行搜索的用户体验。他只能采取“后置分类倾向于 IM 产品的应用内搜索,如联系人,群聊,公众号”,“前置分类倾向于内容分类搜索,如表情,小说,音乐”。来达到一个虽然不如 google 百度这样流畅自然,但足够可控的,比较稳定的搜索体验。

微信搜索过程中,因为搜索内容都是本地,所以采用即时搜索机制,这一过程中体验很好,用户不需要点击键盘上的搜索按钮,因为当前页即代表结果页。

本地与网络搜索

搜索机制分为两种,一种是本地搜索,一种是网络搜索。

本地搜索,即不需要通过网络数据即可检索出本地信息内容,其特点是速度快,不需要加载。

网络搜索,即通过网络数据检索出非本地存储数据的内容,其特点是可以获得大量的数据。

从5个方面,全方位解析微信的搜索功能设计

联系人、群聊、使用过的小程序、收藏文件标题等均存在本地,不需要联网即可搜索,无需加载。

搜一搜为网络搜索,即搜索的主要为网络全平台信息。

即时搜索

输入搜索词即时出现搜索结果,则为即时搜索。用户不需要点击搜索按钮即可得到搜索结果。

如下图所示:淘宝搜索,搜索关键词,出现搜索词的联想匹配。用户只能点击搜索或点击匹配联想词进入搜索结果页

微信搜索,用户输入关键词,即时出现搜索结果。

从5个方面,全方位解析微信的搜索功能设计

两者差异化是因为:微信搜索结果页可以在当前页面呈现,而淘宝,关键词的搜索页是搜索词的全部的商品,搜索过程页,无法承载搜索结果。

两者搜索结果的内容形态差异,导致出现这两种完全不同的设计。

搜索排序

微信主要为即时通讯工具,所以搜索的主场景围绕着:搜索联系人、群组和聊天记录展开。其中权重最高的是最常使用。其次是联系人、群聊、使用过小程序、公众号以及聊天记录等

其排序顺序如下图所示:

从5个方面,全方位解析微信的搜索功能设计

其中搜一搜为网络搜索,其他为本地搜索。

搜索结果排序,反映出用户对类型的高低频,越排在前面,搜索的频率越高。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:优设 作者:Echo的设计笔记

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



史上最全|数据体验好就好吗?—体验度量篇

ui设计分享达人

上一篇文章讲解了产品的数据都有那些,设计师可以通过数据进行设计决策,并且分享了“数据好体验不一定会好的这个观点”。今天这一篇文章咱们聊一聊“怎么用度量产品体验”这个知识点。


流量红利退去进入互联网下半场,所有产品都在比拼产品体验,这些年体验的设计价值越来越多受到公司重视,几乎所有的互联网公司,都会说:“产品(用户)体验设计”,但是大部分产品设计从业者,都弄不明白“产品(用户)体验设计到底是什么?产品上线了我们怎么去衡量设计策略的有效性,以及怎么评估现阶段产品的产品(用户)体验”的状况。这篇文章,我们就把目光锁定到“用户体验”和“衡量标注”两个问题上。


文章结尾我将分享腾讯中国用户体验行业发展报告,最近总有粉丝反应链接过期问题,如果获取不到可以私信我。





我们在项目中经常听到产品经理定的产品目标是“提升用户体验来提升产品数据”,貌似很多项目都能和用户体验沾点关系,首先让我们从了解“体验”概念这个角度,来解析为什么提升用户体验就可以提升产品数据。


一、为什么是产品(用户)体验


1.1 体验设计的概念

产品(用户)体验设计,我们可以把这个词拆开来看看产品、用户、体验这三个词都各自代表的含义:

产品:可以理解为用户在享受服务过程中承载服务的载体,比如手机、电脑、应用程序等。

用户:广泛的含义是使用者,即产品的使用者或享受服务的人群。

体验:这是一个过于宽泛和宏大的词,也是一个比较抽象概念,简单理解为用户对产品的主观感受,这个感受可能是好的,也可能是坏的。

总结一句话体验设计就是用户与产品的发生互动行为后,用户产生的心理感受。如果用户在产品使用场景中完成期望目标,所产生的愉悦的感受体验,称为好的用户体验。



1.2 体验设计的原则

产品(用户)体验设计 User Experience Design(以下简称体验设计)中“用户体验”的概念最早由Don Norman教授(曾任苹果用户体验架构师)在上世纪60年代提出并进行了系统性研究。他表明,用户体验设计,是用户在使用产品的直观感受,并归纳出好的用户体验应以用户为中心,是尊重用户的、是有效的、顺畅的、一致的、符合直觉的。后有人把Don Norman教授这段话归纳为体验设计应遵循“可用性、易用性、满意度”这三个原则,如图:


1.3 体验设计是迭代的原因之一

体验设计在产品迭代中有多重要,看下面这种张图你就会懂了。现在互联网产品的迭代方式是“小步快跑,快速迭代”,产品迭代无外乎两个原因;

1) 产品利益:为了推出迎合市场的新功能,促使用户进行付费行为获取商业利益

2) 用户体验:不断优化产品体验、提升产品质量、不断的实现用户健康增长。

由此可见,体验设计在产品迭代中拥有举足轻重的分量。


1.4 体验设计的3种价值

体验设计的价值体现在用户心理感受与产品业务价值发生关联的场景中,比如愉快的购物体验、高效的退货业务等这些场景都会促使用户信任产品从而提高用户下单率。在这些场景中就会体现体验设计的产品价值和商业价值,产品的页面清晰操作简单很容易触发用户愉悦的心理感受,从而进行下单的互动行为。

另外我还要补充一点其设计价值,因为设计师是站在用户的角度考虑问题、解决问题的职业,而ui设计师的核心价值就是提升产品体验,所以综上所述,体验设计的价值在于设计价值、商业价值和产品价值这三点。


二、衡量体验的三个维度


2.1 衡量体验的所有指标

体验是一个比较抽象的概念,很多场景中所表达的都是用户对产品的主观感受,最开始判断体验的指标也很抽象,后来人们把抽象的指标和埋点的数据相结合,通过数据去衡量比如页面访问次数、用户停留时间、产品加载速度等。

*在工作中常会用到易用性、满意度、nps等维度再结合后台数据埋点这种方式进行用户行为分析来评估用户的体验指标是否达标。


2.2 衡量体验的三个维度

现在为了方便大家进行分类,大家把衡量体验的所有指标都是按照用户感受、用户行为、系统表现这三个纬度进行度量:


2.3 不同形态的产品体验目标各不相同

用户感受、用户行为、系统表现只是一种简单的方法,大家要有这样一个认知,不同细分类型、不同生命周期的产品,对于各个指标的偏重也有所不同。如协同办公类的产品更注重协同性,而数据产品更注重易理解性和一致性。初创期的新产品需要容易上手,对易学性要求较高,而成熟期的产品可能更需要考虑各个角色的需求满足度。


2.4 C端和B端产品的体验目标有啥不同

市场上的产品主要分为两类c端和b端,因为两类产品的用户属性、盈利模式、产品定位不同,所以两类产品的体验目标各不相同,最大的区别在于用户、体验、数据上的不同,接下来让我们聊一聊两款产品的体验目标侧重点各自都是什么。


a c端产品体验的侧重点

c端(Consumer)产品通常指消费者或者个人终端用户使用的客户端,类似产品有微信、知乎、qQ音乐等产品。

因为c端产品的用户忠诚度较低,一言不和就换产品使用,所以为了留住用户各大产品不惜成本追求极致的体验。帮助用户解决需求的同时,与其他竞品相比产品的整体体验相对有趣是现在c端产品的体验目标。


b b端产品体验的侧重点

B端(Business),通常为企业员工或商家使用的系统或平台,类似产品有SaaS软件服务系统——微盟、oA办公自动化系统——飞书、cRM客户管理系统——销帮帮等产品。

而B端产品具有链路冗长、操作复杂等特点。b端的产品体验核心是降低用户上手门槛,提高产品的工作效率,帮助用户高效的完成工作任务是现在B端产品的体验目标。


*在B端产品中经常会提及“易用性”这个专业名词,为什么呢?那是因为B端产品针对的是商家,用户,所以对于这类用户高效是他们的核心需求,那怎么样才是高效呢,那就是后台系统要做得极其简单也就是产品的易用性要高。


三、用户体验的三大评估指标

通过上面讲解大家可以了解到判断用户体验的具体产品数据和抽象概念的指标有很多,这里我着重讲解三个在行业内使用最为常用的三个比较主观的体验指标,即满意度、净推荐值、费力度

为什么只讲解这三个呢,那是因为这三大评估指标分别代表体验设计的设计价值、商业价值以及产品价值。


a 设计价值——满意度(CSAT)

这应该是最经典的衡量指标了,也是更大互联网对于产品来说最为看中的指标。早在于1965年“满意度”这个概念就被提出,在我们在生活中都可以看到关于客户满意度方面的调研功能,比如app storr对产品的体验,送完外卖对店家和送餐人员的服务点评等。

优势:

满意度的扩展性强非常高,可以用于询问用户各种问题,可以看整体的产品体验满意度,也可以看具体的某个功能的满意度。

劣势:

满意度对未来行为的预测是最差的,满意度能够体现出用户对产品短期内的幸福感,但无法体现用户对产品的长期态度。


B 商业价值——净推荐值(NPS)

净推荐值是由贝恩咨询企业客户忠诚度业务的创始人佛瑞德·赖克霍徳(Fred Reichheld)在2003年提出,它把用户分为推荐者、被动者和批评者这三类,通过计量用户的推荐意愿的强烈度而判断用户的忠诚度。

优势:

他常作为未来的客户满意度指标,精准的测量某一项的客户满意度,与满意度相比这个指标更为直观,用于衡量用户长期的幸福感,也用于全链路全流程的满意,判断用户忠诚度,也可以看到项目未来一段时间的发展趋势。

劣势:

虽然获得的指标是最为直观的,但度量的问题往往只有一个所以反应的用户视角会比较狭隘。并且设计的问题也不能证明推荐者会真的推荐,所以得到的结果并不一定是用户在现实生活中的推荐行为相关。


C 产品价值——费力度(CES)

客户费力度这个概念在2010年在《哈佛商业评论》中被提出,可以理解为是升级版,用于询问用户在产品使用过程中高频出现的问题,主要是为了满足用户的满意度但是无法体验用户的忠诚度的用户所设计的。


优势:

帮助产品设计发现和解决复杂流程中的问题,比如B端产品中,可以通过数值的表现,对下一次改版进行想法升级。

劣势:

对于衡量产品质量比较适合,但不是很适合衡量品牌在用户中的价值地位。并且并能用来来挖掘用户真实的评价和需求痛点。


*在这里还有一个知识点向大家普及,就是可用性测试——SUM。






每个设计师都在遇到这样的问题;

设计领导:你怎么证明你做比其他设计同事好

开发同事:你们设计只关心美不美,浪费研发资源 产品经理:我觉得这个功能优化并没有比竞品的好?

公司老板:你们对产品盈利都做那些什么贡献?

我们在做真实项目的时候会发现几乎所有的设计策略都能和用户体验扯上关系,比如我们通过xxx提升了用户体验从而提升用户在xxx场景的用户满意度。这样折腾了一圈,但是发现好像有产品没有什么实质性的效果,设计很难度量也难度凸显设计的价值。


一、为什么要会设计度量


1.1 设计度量的意义

a 体验面前的拦路虎

其实上面这个问题曾经其实也困扰了我很久,但随着做的项目越来越多,我现在从体验设计师的角度尝试回答这个问题:

1)“体验”是用户纯主观的感受,概念比较抽象,从这个情况来看是很难被度量的。

2)促成体验好与不好的因素有很多,很难定直接定位体验问题的根本原因。

3)现在产品迭代频繁,提升了一个场景的体验,往往另一个场景体验问题就会暴露,很难确定产品终极目标。


但是作为体验设计师,我们需要在项目中对体验有以下三点比较清楚的认知:

·体验是直观的用户体验感受和清晰的设计价值体现。

·体验要以体验为中心做有价值性的探索设计破局点。

·体验需要对设计产品迭代有明确的改版目标。


b 度量的意义

我们要完成设计师的使命,在项目中凸显设计的价值,所以我们需要一套科学的、成体系的、可量化用户的体验完整的度量框架,能够聚焦用户体验问题作为驱动、提炼提升产品体验的目标,从体验角度解决体验需求。项目中的度量有其三点意义:

1)可以具像化有刻度的的体现用户主观感受的测量工具。

2)可以通过度量提炼出以用户行为作为产品迭代目标。

3)可以更好的根据自己公司业务场景搭建体验设计体系。现在很多公司都有自己的度量体系,比如阿里,滴滴为体现设计在业务中创造的价值,都有自己的设计质量评估体系。他们通过划分场景、量化设计可以更准确的刨析出那个体验的根本问题。并且评估潜在用户的体验感受,为之后的产品改版找到体验优化方向。


1.2 设计度量的概念

度量的概念在我们的生活中很常见,以下是对度量比较严谨的概念解释:

【度量Measure】是一种测量评定对象的方式,它帮助我们结构化的获取对象的状态与变化,我们运用这些数据进行洞察,转化为有用的信息,帮助决策和优化,这个过程也是分析诊断的过程


二、设计度量的原则

用户体验度量体系是可以通过某种形式测量采集得到的,例如对用户无感知的埋点法、由用户直接反馈的问卷法等等,设计度量作为项目中重要一环,不仅能够验证产品及设计策略的有效性,还可以有效验证了我们服务化升级目标及设计目标拆解的精准性,也为后续优化带来了更多的线索。

所以设计度量的建立应具有有效性、稳定性、针对性、扩展性、可持续性这五个原则。

a 有效性

我们通过某种形式测量产品体验时候,把保证“体验好”转化为可以测量的概念,如用户留存率、流失率、关键操作的完成率等,通过这些直观数据的改变去衡量抽象体验的问题,在这个过程中需要保证数据结果是真是有效的。

b 稳定性

人与人之间的体验差异本身是具有差异性的,用设计度量时候人的感受往往会受到环境、情绪等影响,产生随机误差。我们需要度量的结果尽量减少外界环境的干扰,出于这个目的度量需要具有一定的稳定性才能进行真实结果反馈。

c 针对性

可以反应用户体验问题的指标有很多,数据埋点也有很多。本身数据是有欺骗性的,所以我们在做设计度量时应该划分场景,即不同场景对应不同的数据埋点,有明确的度量目标,才能做到只聚焦某个产品的端上体验问题,那这个度量结果才有针对性。

d 扩展性

我们要保证输出的指标和测量模型,不仅适用于整体,也可以针对某个场景某一个交互环节,某个界面进行度量的测量,度量应该具备扩展性。

e 可持续性

度量的目的不仅是反应当时产品存在的问题,也要预测出未来产品规划方向,度量指标的可持续性指应持续观察、跟踪、和优化指标,使得度量体系可以贯穿在产品整个生命周期中,也利于对产品迭代优化后指标数据的前后对比。



三、体验度量和可用性测试的区别

可用性测试大家一定经常听,在很多测试场景,我们很容易把体验度量和可用性测试的概念相混淆。

可用性测试:通常是在开发完成之前,让用户完成特定的任务,通过观察用户在使用产品时的反馈,从中发现设计中存在的可用性问题的一种测试方法,其目的就是为了付出最小可行产品来做正确的设计,避免消耗太多开发资源做产品。

体验度量:是一种更宏观的视角,强调用户与产品之间的整体交互,以及在交互过程中形成的想法、感受和感知。用户判断产品现在阶段暴露出来的体验类型问题,对未来设计的一种预判。






“满意度—有用”,“净推荐值—有效”,“费力度—易用”这几个观测维度贯穿了互联网1.0到4.0时代,在不同时期,各类模型普遍都会涉及到的维度,根据以上三点也严格的度量的标注和具有较强的普适性、通用性的度量模型,接下我将带领大家一一了解这些度量模型都有那些。


一、度量标准都有那些

方便大家区分可以把度量标准梳理成国际标准和国内标注两个部分,大家了解即可。


1.1 国际的标准

A ISO-9126 软件质量模型

ISO/IEC 9126 (1991) 软件质量模型是是一种评价软件质量的国际标准,包括3个层次,由6个特性和27个子特性组成:

1)质量特性

2)质量子特性

3)度量指标

* 在这里设计师应该注意「适应性」、「易安装性」、「易理解」、「易学」、「易操作」和「一致性」,产品应注意「共存性」「易替换性」和「可移植性的依从性」,其中「易用性」的概念涵盖了用户体验中常规易用性的维度。


b BS ISO/IEC 25010-2011软件产品质量需求和评估(SQuaRE)

该模型是ISO/IEC 9126的升级版,包含8个特性和36个子特性,相对比较全面的了,大家可以从各特性的定义、范围与度量标准评估自己产品。


1.2 国内的标准

A SO-9126 软件质量模型,评价软件质量的国际标准

该模型重新定义了「效益」、「效率」、「满意度」即定义为一个产品可以被特定用户,在特定场景下,达成特定目标的效益,效率和满意度。

- 效益(effectiveness):用户完成任务的精确性和完整性。

- 效率(efficiency):用户完成任务所消耗的资源。

- 满意度(satisfaction):用户对任务流程的可接受程度。


b ISO-9241 关于办公室环境下交互式计算机系统的人类工效学国际

SO9241对Usablity的定义,在今日的设计质量评估仍旧有很强的指导性和应用性,具备很强的可操作性。比较重视「效率」和「效益」这两个维度,在任务完成程度和所消耗的时间/人力资源的场景下,评估出特定任务的可用性,在流程较长的B端产品体验度量中尤为常用标准。


1.3 其他

这里我还查阅到和体验有关的国外资料,称之为标准也可以、称之为模型也没错,他们分别是“蜂巢模型、尼尔森十大可用性原则、USE量表”,有兴趣的同学可以自行查找了解。


二、度量模型都有那些


度量模型也分为国内和国外这两部分讲解,这里介绍常用的8种类型,其中HEART模型是目前比较成熟的体验度量模型,也是各大互联网公司的应用最广泛,普及率是最好的模型之一了。


2.1国外模型

a 谷歌HEART模型

HEART是GOOGLE公司基于商业和技术的产品评估体系提出的模型概念,它包含5个维度,适用于市面上大多数C端类产品。

这五个维度分别是:

1)愉悦度:用户主观的体验即使用产品或者功能时是否会感觉到愉悦感。

2)参与度:用户对产品内容是否感兴趣并愿意主动分享给其他人。

3)接受度:用户看到新产品或新功能可以接受并且愿意尝试新的功能。

4)留存度:在一段时间后,新、旧用户是否愿意回来继续使用产品。

5)任务完成度:在使用过程中,用户能够高效,准确、流畅地完成当前任务。

如果结合上一篇数据认知的文章,就可以通过以下数据去衡量产品的体验度量,如下图:

这个模型虽然是全维度、多参数、多角度、系统性的评估方式也是目前普及率最高的,但是也有其自身缺点。



b 门户电商PULSE模型

PULSE模型以网站为维度来衡量体验的模型,通过商业指标和技术指标,衡量网站的整体表现。同样包含5个维度:

1)页面浏览量:属于产品指标,指页面被用户访问的次数,以及页面的点击转化情况。

2)运行时间:属于技术指标,指衡量网站可以持续稳定地运行时长。

3)系统延迟:属于技术指标,指衡量用户打开页面的速度是否流畅。

4)周用户活跃:属于产品指标,反映网站的实际运营情况,估计产品的用户规模。

5)商业收益:属于商业指标,指产品的营收情况,不同类型的产品类别是不同的,比如电商类更关注GMV等指标,视频业务关注广告,电子书业务关注VIP售卖等。


c 谷歌GSM模型

GSM模型是Google的用户体验团队提出的一种指标体系,即目标(Goal)、信号(Signal)、指标(Metric)这三个纬度做为另外横向的参考纬度,他最有价值的一点是把GSM模型和HEART模型想结合,设计一个更为全面的体验度量模型,具体内容如下图。


2.2 国内模型

a 阿里云UES模型

UES应用场景更加适合B端产品。是阿里云设计中心基于易用性量表去扩展而成的度量模型,它的核心纬度包括易用性、一致性、满意度、任务页效率、性能。其中易用性是B端产品的重要属性,他的背后就是易用性量表的标准,与常规的易用性量表相对来说更为成熟和精细化。


b 阿里妈妈四项五度模型

四项五度模型应用场景更加适合C端产品。它是阿里巴巴1688UED团队在Google的HEART模型的基础上升级的度量模型,从用户的行为角度出发,四项分别是「当下、未来、态度、行为」;五度分别为「吸引度、完成度、满意度、忠诚度和推荐度」。


c 酷家乐四象模型

四象模型是面向工具类产品的体验度量方案,它以「角色」与「心智」「功能」和「性能」这四个维度,分析人与工具之间的微妙关系。


D 58同城B-Metric

B-Metric是一个关注业务特点与用户角色的度量模型,也是一个个比较全面的指标体系,该体系包含基础体验、角色体验、企业价值三大部分,基础体验是提供产品最基础体验的保证;角色体验则是我们在设计产品最为关心的体验纬度;企业价值是产品所带来的盈利情况,也是体验相关的实际价值。


E 支付宝PTECH模型

PTECH模型是阿里巴巴支付宝团队设计的度量模型,它是基于HEART模型升级后基于用户行为分析和应用性能检测的模型,比如:将愉悦度改为满意度,将任务完成度改为任务体验,在参与度下并入接受度、弱化留存率,引入清晰度与性能体验的全新维度。


2.3 三种测量方法

模型种类有很多,这里说明一下测量三种方法,大家简单了解即可。






一、度量体系需要具备两种模式

前面讲到了体验是一个抽象的概念,必须要有数据这种比较具象的概念做支撑,在《u一点料》这本书中,作者把数据比喻成设计的理性之光,我这种观点认为用在度量上也不为过,因为度量的体系是建立在数据之上的。

而这种度量体系的搭建本身就是为了用户着想,以创造用户价值为出发点的体系。所以我认为度量体系的搭建应该具备两种模式,即“数据驱动+体验驱动”这两种模式


二、三环四步打造自己的度量体系

体验度量体系虽然是一种很复杂的体系,但是如果以化繁为简的思路去刨析它的话,我们可以讲这种复杂的体系概括为三个层级来解决问题:聚焦体验的问题——体验目标的指标——后续指标的追踪。

聚焦体验的问题:就是在业务链路中找出最能提升用户体验的关键问题,并把这个问题进行可度量的转化,换一个角度说找出的这个问题也是我们搭建度量体系的目标。

体验目标的指标:当体验目标被我们明确之后,就可以利用市面上现存的度量体系来进行度量纬度的测量,当然也可以理解为这是定义体验标准的过程,既然有标准一定会有定义标准的指标,而筛选体验目标的指标就是在这个环节被筛选出来的。

后续指标的追踪:这一个环节就是首位的环节了,其中包括验收和追踪两个步骤,在度量体系的标注线客观的捕捉其变量的特征,为后续的项目改版方向提供线索支撑。


2.1 第一步

凡事都需要有一个目标,确立体验目标就是体验度量的开始,清晰准确的目标决定度量体系的最终质量。这里有两个方法可以帮助我们梳理出用户的产品的体验目标。以下内容我以金融产品为例子讲解每个步骤我们应该做什么。

a 利用kcon模型划分需求范围

体验和需求分不开的,在卡诺模型(KANO)中,将产品功能的需求 分为五种属性:必备型需求、期望型需求、兴奋型需求、无差异型需求、反向型需求。以金融类产品为例子,我们需要找到必备型需求、期望型需求、兴奋型需求,来确定用户的需求都有那些。


b 通过定性、定量确定体验目标

也可以通过定性、定量的方式把划分后的需求,在梳理成以满意度、易用度、有效性为三个纬度的体验目标,比如

满意度:产品内务对用户的吸引力、产品界面是否美观友好给人舒适感觉、客服是否专业性高可以即使有效地回复用户问题、用户对品牌是否表示认可是否用户对品牌有赞美,用户会产品的是否有信任感觉、用户是否愿意持续使用产品等。

易用性:是指产品功能对用户的难易程度,比如功能入口是否容易识别,用户是否能快速找到自己所需要的内容,产品操作步骤是否简单符合用户习惯、用户在浏览内容适合时是否可以快速阅读和理解、产品对用户不恰当的操作是否有提示和限制,产品对用户的错误操作是否有提示,用户能否快速地知晓产品的使用等。

有效性:用户账户资金是否安全、产品提供的内容服务是否有价值、用户可以顺利完成核心任务、产品基础功能是否健全完备、产品提供的信息内容是否准确完整、用户查询信息和提交信息是否能即使响应、产品运行速度是否稳定。


2.2 第二步

a 筛选最佳度量模型或者工具

前面讲了很多关于度量模型的知识点,如果你在之前的工作中没有接触到度量提醒,那么这里我将讲解一些关于“怎么选择度量模型”的办法。

行业界内的体验度量上的方案,大致可以用“客观度量、主观度量、主观&客观结合度量”这三个纬度进行区分。

客观衡量法:通过数据埋点监测用户行为数据。比如经典的 PULSE 模型,还有大家熟悉的运营指标,活跃用户数、留存率、点击率等等。

主观衡量法:就是收集用户主观的评分。比如满意度、费力度,可用性测试量表(如SUS)等等。

主观+客观衡量法:把用户行为数据和主观的评分结合起来,多数用归一化方式得出一个总分,把分数划分成不同档次作参考。比如Google 经典的 HEART 模型,PTECH 模型,阿里云UES模型、58同城B-Metric等等。


*在这里我还是比较推荐使用 HEART 模型(Google),因为他的五个纬度包含了定性和定量两个数据纬度,也可以从宏观和微观两个角度解析产品。



b 结合数据验证模型

上一篇文章《数据认知篇》简单的介绍几种数据测试的方法,比如A&b TASR测试、灰度测试、可用性测试的方法,这里就可以派上用场。通过测试中的订单量、点击率,活跃度的数据波动我们可以直观的对应出我们产品质量、系统性能等的体验类型的问题。这样我们的体验度量体系的雏形就搭建完成。


2.3 持续监测,不断优化

最终我们集合成这样的表格就可以了。度量体系最重要的就是发现具体的体验问题以及后续的改进方向。

明确体验目标:我们产品目前存在什么体验问题,他的严重程度有多少,是否对产品的盈利造成影响。

改进方向:我们要改进什么场景,要用什么设计策略怎么提升产品的用户体验等。


总结

体验设计是产品的重要一环,除了研发,持续的用户体验活动可以使每个人的努力更有效和更有价值。在设计过程的每个阶段,不同的用户体验方法可以使产品开发工作保持在正确的轨道上,符合用户的真实需求而不是想象中的需求。

产品的体验研究,研究的越早,研究结果对您的产品的影响就越大,而且根据最后的体验定义,有助于做出现阶段或者未来产品的迭代规划,

在所有阶段进行用户研究,正如我们在下面展示的,在任何合理的项目计划的每个阶段都有一些有用的东西可以学习,每个研究步骤都会增加你的产品价值。

一下是我在国外网站搜集到的一篇关于“用户研究的方法论”,文章地址我输入到文章末尾处。






蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷 作者:斜杠7湿兄

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



UI&UE实用方法论 | 「美即好用效应」就是UI存在的价值吗?

ui设计分享达人

有研究表明,人们会自然地认为外表更漂亮的人拥有更加优秀的品质特质。即我们对一个人的外表印象会影响对他品质的感受和思考,心理学上将这种行为称为「光环效应」


同样有人认为,这样的光环效应作用于人机交互设计领域也一样是奏效的。好看的设计,会让用户认为产品更好用,外观会影响用户对产品可用性的感受,这就是所谓的「美即好用效应」



一、关于该定律的实验


前面我在谈「费茨定律」或是「恐惧留白」的时候,大多数方法论都可以溯源到真实的科学实验或心理学文献记录。


但在查找「美即好用效应」资料的时候,所有内容对初始实验都是一笔带过:


1995年,日立设计中心的研究员 Massaki Kurosu 和 Kaori Kashimura 通过26种不同的 ATM 交互界面对 252 位参与者进行详细的用户体验测试。结果发现,这些因素中很大一部分对真实可用性的影响微乎其微,反而界面美观度对真实可用性的影响出乎预料的大。


表现可用性的决定因素对真实可用性的影响系数大多在 0.000-0.310 之间,而界面美观度这个数据达到了 0.589。



我试着到很多地方去搜索更多关于该实验的记录,却都没有找到相关论文。所以对于这个实验的结果,我只能保持观望态度。(也可能是我检索资料的能力还有待提升...)


首先是我无法确定所有参与者在这个实验中的需求目标是否发生变化,概述中既没有阐明对照组,也没有告知实验对比过程的细节。


其次在「美观度对可用性的影响较大」的实验结论中,科研人员是如何定义「美观度」的标准的?审美是一种主观意识,那么「美观度」应该如何被定义,科研人员究竟是从配色、排版、统一性,还是动态和谐的交互流程定义了实验界面的「美观度」?我们也不得而知。


所以「美即好用效应」在人机交互领域的可用性,究竟是一条科学实验结论,还是属于用户心理研究,抑或只是人传人传出来的自然规律,作为笔者,我本着对我读者负责的前提下,也只能画个问号。


二、「美」在商业产品中的价值层级


在人们追求基本生理需求的时代,「美即好用效应」的作用力必然不会比温饱时代的大。


为什么这么说?从马斯洛需求层次理论模型中就可以看到,对于用户而言,“审美需求”是在保证了一系列缺失性基础需求之后,才会追求的需求层次。



马斯洛需求层次理论映射到用户体验五层理论也是异曲同工,从战略层到表现层,越是重要的层级挂靠的马斯洛需求层次就越基础。拥有巨大商业价值的产品,往往影响其在商业市场中走向的,都是基础需求,而非高层级需求。


这就为什么我前文说道,很多人抽离前提来谈「美」的重要性。用户对「美」的追求是在满足了基础需求的前提之下,如果一个产品的战略、范围层难以落地,空谈「美即好用效应」便是空中楼阁罢了。


表现层在没有可靠的战略前提之下,是毫无商业价值的个人狂欢。


三、UI到底该关注什么


UI是一项纯艺术性创作的职业吗?在我刚接触UI行业的时候,我是这么单纯地认为的,但现在已经不再是了。


我前一阵子看了像素范泡泡老师的直播,其观点我非常赞同,也在社群里和大家进行过了交流。在此我引用两个泡泡老师举到的 iOS UI 的案例,来阐述 UI 探索的「美」,究竟是在探索什么。


  1.iOS为什么激励大部分APP适配暗黑模式?  


大概在去年,网传苹果将强制要求 APP Store 中的应用程序要适配暗黑模式。暗黑模式也掀起了一轮新的视觉设计潮流,暗调的设计语言让产品在视觉上看上去更酷更年轻。


但苹果激励大部分应用程序适配暗黑模式,只是单纯的为了视觉上的好看吗?其实并不是。


是因为后期的苹果硬件设备多采用OLED屏幕技术,比起其他厂商的LCD屏幕技术,有其优点,但也有其缺点。OLED采用低频PWM调光模式,也就是通过低频频闪的方式控制屏幕亮度(一亮一暗、一亮一暗如此反复)。在调低屏幕白光亮度的情况下,频闪很容易造成用户视觉疲劳。这一点极可能成为苹果设备的销售弱点。


于是苹果希望在用户需要调低屏幕亮度的场景中,通过暗黑模式的视觉手法,大量运用黑色,这样OLED屏幕的光源就可以直接关闭,而不需要采用频闪的方式来控制屏幕亮度,从而减轻用户视觉疲劳的现象。



(ps.看不懂的朋友莫急,文末我放了B站up主硬件茶谈的《全网最简洁易懂的OLED与LCD屏幕工作原理与优劣科普》视频,感兴趣的小伙伴可以查看)


苹果主动落地暗黑模式的开发,并且激励在应用市场上架的其他应用也适配暗黑模式,实际上是与其商业目的挂钩的一种行为,只是将解决方案落实到了表现层。


  2.iOS从拟物风格向扁平风格的转换  


iOS7掀起的扁平设计风潮,至今还在影响着UI设计趋势以及用户的审美。但你硬要从个人审美角度去评判曾经的拟物风格与现在的扁平风格究竟哪个更好,只能说仁者见仁。


泡泡老师认为,iOS 拟物风格向扁平风格的转换,也不仅仅是基于视觉「美」的考虑。因为曾经的苹果在全球移动品牌厂商中,拥有更加优质的屏幕硬件,他们的屏幕可以高清显示更多的设计细节,于是仿真的拟物风格在苹果设备上通过其光影、阴影的展示,可以突出苹果的屏幕优势,从而成为其商业卖点。


但后来随着移动设备品牌商的硬件差距不断缩小,高清显示已不再成为苹果独家的亮点,苹果也就不需要再花费更多的设计成本在拟物设计上了。此时的拟物设计成本并不能再持续带来高效的商业回报,从而转向扁平风格,一方面可以提高设计效率、降低设计成本,同时对其周边设计的延展性更高。



从这两个案例中可以看到,UI虽然做的是表现层的工作,但实际上也是在为用户、为商业、为战略而服务。除了视觉的「美」,我们也应该关注产品背后的数据、商业价值,我想这就是UI与纯艺术性创作型设计岗位的区别吧。


四、总结


说了一堆,感觉我好像一个「美即好用效应」的ANTI份子...其实也不全是。我清楚「美即好用」在一些商业案例中的运用,我不否定该定律存在的价值,只是想表达一些看法。


首先我认为不应该在产品还没有扎根市场,拥有产品自身的商业价值之前,过分拘泥于视觉表现层的内容。在腥风血雨的互联网商业市场,迅速小跑迭代,做好用户数据分析,增强产品自身留存实力、激活市场潜在用户,比把目光放在视觉表现上可能更有价值。当产品在一个领域或市场积累了一定忠实度较高的用户之后,「美即好用效应」可能才会发挥其功效。


其次我想对话同行的UI设计师,我一年前在《UI如何提升个人价值?UGD思维了解一下》中已经说到过,UI设计不应只停留在视觉表现层,想提升自我价值,一定要培养超脱表现层的思维能力。


我们不应该一味地信奉「美即好用」。作为UI设计师,我们要通过避免「美但不好用」或「不美但好用」的极端来平衡视觉表现与功能的体验。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷  作者:UCD耍家

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


深度解析蚂蚁Ant Design的设计原则

ui设计分享达人



『 Ant Design是什么 』


众所周知蚂蚁集团的B端产品是一个庞大的系统,数量多且功能复杂,而且变动频繁,常常需要设计师和开发人员能快速做出工作上的配合。同时这类产品中有存在很多类似的页面以及组件,根据原子设计理论可以得到一些稳定且高复用性的内容。

随着这两年B端产品的逐渐白热化,越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标,蚂蚁集团体经过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。通过组件化设计规范,降低冗余的生产成本,让设计者专注于更好的用户体验。



『 Ant Design设计原则是什么 』


针对B端产品反复出现的一些设计体验等问题, Ant Design 给出标准的设计原则,实现跨应用交互一致性的有效融合。依照这些原则使用 Ant Design 组件设计界面,既减少了不必要的认知成本,又能够提升设计的效率。考虑到需要适应各种定制化的业务场景,设计原则具有一定的灵活性,万变不离其宗,通过了解设计原则的构建逻辑,高效组织信息、帮助建立用户与界面的互动等原则性要求,可以衍生出更具场景特性的设计方案。


① Ant Design设计原则的由来

可以说 Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则,并做了理论之外最佳的设计实践。其十大设计原则反过来是对书本理论的补充,我在看书的过程结合『Ant Design 』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明,这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。


② Ant Design设计原则的适用范围

1. 我们先说说『Ant Design 』的适用范围:

稍微了解 Ant Design 的小伙伴都知道,本系统是针对B端后台系统,承载媒介是PC端的浏览器。使用的人员主要包括:用户体验设计师、交互设计师、UI设计师、前端程序员等。

2. 再说说 『 Ant Design 设计原则 』的适用范围:

顾名思义『 设计原则 』主要是针对设计师在创作页面时依照的标准。虽然『 Ant Design的设计原则 』是 Ant Design 系统的一部分,但是前文已经提到,此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华,所以设计师可以把这些原则运用到任何的设计领域,并不要局限于企业后台系统的PC端产品。

为了方便大家理解,讲一个小故事。故事来自于《写给大家看的设计书》,作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。作者翻阅之后,发现其中有一颗叫约书亚树的树,造型奇特,自己从未见过。于是决定出门转转,然而发现外面到处都是这种树。故事到这里就完了。

可能大家会想,这个故事要讲一个什么道理呢?简单来说就是,当你手中有个锤子,满世界都是钉子。当你了解到下面要讲的十个设计原则后,你会发现它们处处都适用。


③ Ant Design设计原则的内容

十大原则如下:

  • 亲密原则(Proximity)

  • 对齐原则 (Alignment)

  • 对比原则 (Contrast)

  • 重复原则 (Repetition)

  • 直截了当 (Make it Direct)

  • 简化交互 (Keep it Lightweight)

  • 足不出户 (Stay on the Page)

  • 提供邀请 (Provide Invitation)

  • 即时反应 (React Immediately)

  • 巧用过渡 (Use Transition)



『 如何运用Ant Design的设计原则 』


对于一个初级设计师而言,想要了解UI用户体验等知识,学习 Ant Design 的设计原则算是比较快能上道的,因为 Ant Design 是吸取了很多前辈的精华,提炼而成的系统。打个简单的比喻,对于设计师而言 Ant Design 就是设计师学习『 视觉规范 』,掌握『 设计原则 』最好的字典。

接下来我就给大家说说我是如何快速理解 Ant Design 的这10条设计原则并运用到工作当中。

Ant Design 定义了10条设计原则,根据『 席克定律 』选项太多不易记忆,于是我找到了这些设计原则的共通性,将其归为4类,也就是大家只需记住四类设计原则,在工作中适当延展即可。


① 视觉层级清晰

包含 Ant Design 的设计原则有:『 亲密原则 』『 对齐原则 』『 重复原则 』『 对比原则 』。

「视觉层级清晰」的重要性体现在 交互前 用户看到的内容结构是清晰明确的 。一个层级混乱的界面,任何信息的传达都是无效的。所以保证清晰的排版布局是人机交互前的基础。


1. 亲密

如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。


1.1 纵向间距关系

  • 纵向间距:在 Ant Design 中,通过「小号间距」「中号间距」「大号间距」这三种规格来划分信息层次结构。这三种规格分别为:8px(小号间距)、16px(中号间距)、24px(大号间距)。


  • 增加元素:通过增加「分割线」来拉开层次。在这三种规格不适用的情况下,可以通过加减「基础间距」的倍数,或者增加元素来拉开信息层次。注:在 Ant Design 中,y = 8 + 8 * n。其中,n >= 0,y 是纵向间距,8 是「基础间距」。


1.2 横向间距关系

  • 组合排布:为了适用不同尺寸的屏幕,在横向采用栅格布局来排布组件,从而保证布局的灵活性。(注:栅格是另外一个模块的内容,这里不赘述。)


  • 复选框内:在一个组件内部,元素的横向间距也应该有所不同。


2. 对齐

正如「格式塔学派」中的连续律(Law of Continuity)所描述的,人类的视觉系统往往倾向于将看到对象的直线继续成为直线,曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。

格式塔学派(德语:Gestalttheorie):是心理学重要流派之一,兴起于 20 世纪初的德国,又称为完形心理学;主张人脑的运作原理是整体的,「整体不同于其部件的总和」。——摘自「维基百科」


2.1 文案类对齐

如果页面的字段或段落较短、较散时,需要确定一个统一的视觉起点。


  • 推荐使用:标题和正文左对齐,使用了一个视觉起点。

  • 不推荐使用:标题和正文使用了两个视觉起点,不推荐该种对齐方式,除非刻意强调两者区别。


2.2 表单类对齐

  • 冒号对齐:冒号对齐(右对齐)能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项,从而提高填写效率。


2.3 数字类对齐

为了快速对比数值大小,建议所有数值取相同有效位数,并且右对齐。


3. 对比

对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

注:要实现有效的对比,对比就必须强烈,切不可畏畏缩缩。


3.1 主次关系对比

为了让用户能在操作上(类似表单、弹出框等场景)快速做出判断, 来突出其中一项相对更重要或者更高频的操作。

注意:突出的方法,不局限于强化重点项,也可以是弱化其他项。


  • 需要区分主次场景:


  • 不需要区分主次的场景:「通过」和「驳回」都使用次按钮,系统保持中立。在一些需要用户慎重决策的场景中,系统应该保持中立,不能替用户或者诱导用户做出判断。


3.2 总分关系对比

  • 总分关系:通过调整排版、字体、大小等方式来突出层次感,区分总分关系,使得页面更具张力和节奏感。


3.3 状态关系对比

常见类型有「静态对比」、「动态对比」。


  • 静态对比示例:用不同颜色的点,来表明不同状态。


  • 动态对比:鼠标悬停时,该项和其他项呈现出明显不同的视觉效果,响应用户操作。通过改变颜色、增加辅助形状等方法来实现状态关系的对比,以便用户更好的区分信息。


4.重复

相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。


4.1 重复元素

重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。


  • 线框重复:


  • 设计要素重复:


  • 文案格式重复:


② 交互操作高效

包含 Ant Design 的设计原则有:『 直截了当 』『 足不出户 』『 简化交互 』『 即时反应 』。

「交互操作高效」的重要性体现在 交互时 用户操作流畅、简单、用时短。如果仅仅只是解决高效的问题,却忽略用户能否理解流程如何操作,那这样的解决方案也是徒然。有的时候并不是解决实际时间的长短,而是用户的心理时间是否太长的问题,就像我们打游戏往往会觉得时间过的很快,但是在等待页面加载时却不耐烦。


1. 减少打断

能在这个页面解决的问题,就不要去其它页面解决,因为任何页面刷新和跳转都会引起变化盲视(Change Blindness),导致用户心流(Flow)被打断。频繁的页面刷新和跳转,就像在看戏时,演员说完一行台词就安排一次谢幕一样。

变化盲视(Change Blindness):指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物,眼球运动、地点的变化,或者是缺乏注意力等。——摘自《维基百科》

心流(Flow):也有别名以化境 (Zone) 表示,亦有人翻译为神驰状态,定义是一种将个人精神力完全投注在某种活动上的感觉;心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》


  • 气泡提示:对于操作的反馈是必要的,下文会提到,但是为了减少打断用户,轻量级的反馈气泡提示即可。


  • 输入覆盖层:鼠标「点击」图标触发;鼠标「点击」悬浮层以外的其他区块后,直接保存输入结果并退出。不用弹窗或跳转的形式编辑,只需要在触发图标附近弹出浮层即可,这样避免用户视动线的混乱,减少打断用户操作的心流。

2.缩短步骤

正如 Alan Cooper 所言:「需要在哪里输出,就要允许在哪里输入」。这就是直接操作的原理。eg:不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。


常规的编辑模式,界面都会跳出一个弹窗或者是一个页面跳转,无形之中用户走了更多的流程路径,如果能在当前页面就把编辑问题解决掉那就符合了 Ant Design 『 足不出户 』的设计原则。

  • 文字链/图标编辑:

状态一:在可编辑行附近出现文字链/图标;

状态二:鼠标点击「编辑」后,出现「输入框」、「确定」、「取消」表单元素,同时光标定位在「输入框」中。


  • 多字段行内编辑:编辑模式在不破坏整体性的前提下,可扩大空间,以便放下「输入框」等表单元素;其中,在 Table 中进行编辑模式切换时,需要保证每列的不跳动。


  • 拖放图片/文件:在早前很多产品在上传功能上,都是跳出弹窗再选择文件上传,现在基本都可以实现拖拽上传了。这样的设计大大提高了用户使用上传功能的效率。


  • 模糊搜索:系统根据用户所查询的关键词,智能匹配可能的结果。


  • 定时自动更新:新增的列表项「高亮」,持续几秒后恢复正常。不需要用户手动刷新,减少不冗余的操作。


3.避免回忆

人们在思考的时候,是需要依靠大脑神经元之间相互传递信号,而回忆是需要调用更多的的神经元传递信号,简单地说就是非常费脑子。


  • 搜索历史:搜索历史的功能,可以减少用户的回忆,使得整个体验更加轻松愉悦。


4.信息降噪

根据费茨法则(Fitts's Law)所描述的,如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互,起到信息降噪的作用。

费茨法则 :到达目标的时间是到达目标的距离与目标大小的函数,具体:。其中:1.设备当前位置和目标位置的距离(D);2.目标的大小(W)。距离越长,所用时间越长;目标越大,所用时间越短。


  • 列表嵌入层:将列表为多层级时,隐藏弱层级列表内容,可以让用户更加直观地看到重要信息。当我在聚焦某一个列表模块的内容,鼠标悬浮即可展开。


  • 标签页:标签也换可以将信息内容进行分类,让用户更易理解。


  • 渐进式展现:用户在填写表单时,会根据当前录入的数据,展现下一项需要填写的内容,这样的展现方式可以屏蔽掉无关紧要的内容。


  • 悬停即现工具:鼠标悬停时,出现操作项。这样将不重要信息或者操作隐藏起来,不会干扰到用户浏览其他重要内容。


③ 系统反馈即时


包含 Ant Design 的设计原则有:『 简化交互 』『 巧用过渡 』『 即时反应 』。

「系统反馈及时」的重要性体现在 交互之后 立即给出反馈。就像「牛顿第三定律」所描述作用力和反作用一样,用户进行了操作或者内部数据发生了变化,系统就应该立即有一个对应的反馈,同时输入量级越大、重要性越高,那么反馈量级越大、重要性越高。


1.实时反馈

虽然反馈太多(准确的说,错误的反馈太多)是一个问题,但是反馈太少甚至没有反馈的系统,则让人感觉迟钝和笨拙,用户体验更差。

牛顿第三定律 :当两个物体互相作用时,彼此施加于对方的力,其大小相等、方向相反。——摘自《维基百科》


  • 实时预览:根据用户的输入,提供关于密码强度和有效性的实时反馈提示。


  • 文字链热区:当悬浮在 ID 所在的文字链单元格时,鼠标「指针」随即变为「手型」,单击即可跳转。


2.过渡反馈

人脑灰质(Gray Matter)会对动态的事物(eg:移动、形变、色变等)保持敏感。在界面中,适当的加入一些过渡效果,能让界面保持生动,同时也能增强用户和界面的沟通。

Adding: 新加入的信息元素应被告知如何使用,从页面转变的信息元素需被重新识别。

Receding:  与当前页无关的信息元素应采用适当方式移除。

Normal: 指那些从转场开始到结束都没有发生变化的信息元素。


  • 表格加载:网络不好或者表格数据过多,都有可能导致加载缓慢,这时有一个小动画可以缓解用户的焦虑感。


  • 富列表加载:用户在打开列表时,页面无法做到一次性加载所有的数据,同时有为了减少翻页的繁琐操作,就有了下拉自动加载的。


  • 页面加载:当用户访问的页面体量过大时,系统会通过给出倒计时或完成百分比,来缓解用户焦虑,并且给用户友好可控的感觉。


  • 滑入与滑出:可以有效构建虚拟空间。  


  • 折叠窗口:在视图切换时,有助于保持上下文,同时也能拓展虚拟空间。


  • 对象增加:在列表/表格中,新增了一个对象。


  • 对象删除:在列表/表格中,删除了一个对象。


  • 对象更改:在列表/表格中,更改了一个对象。

    • 状态一:用户更改了「详情」中的值;

    • 状态二:用户点击「保存」后,详情所在的网格出现「黄底」,表明该对象发生了更改;

    • 状态三:底色持续几秒后,恢复正常。


  • 对象呼出:点击页面中元素,呼出一个新对象。


3.结果反馈

用户常常会疑惑自己的操作是否成功了,哪怕是失败了也是需要系统反馈,这样才能安心进行下一步的操作。


  • 页面反馈结果:


  • 气泡反馈结果:


④ 用户自由可控


包含 Ant Design 的设计原则有:『 提供邀请 』『 足不出户 』『 即时反应 』。

「用户自由可控」的重要性体现在 交互前对下一步操作的预判;交互时 不论操作后的结果多严重都要允许用户自主决策;以及交互后 能否对自己的操作结果反悔。


1.未来预判

很多富交互模式(eg:「拖放」、「行内编辑」、「上下文工具」)都有一个共同问题,就是缺少易发现性。如果用户在操作前就能得到下一个交互层次的提醒和暗示,以表明在下一个界面可以做什么。  这样人机交互的过程往往更加自然、顺畅。



  • 点击刷新:对于设计师而言,最常见的例子要属花瓣了,我们时长会沉浸在我们浏览的瀑布流卡片中,如果系统强行刷新当前页面,用户很有可能迷失。邀请用户主动更新,既不会错过新的消息,又不会导致我们的心流被打断。


  • 未完成邀请:用户在当前页面无法完成登录操作,为了减少用户迷茫的焦虑感,系统告知用户点击“更改”链接,可以去向何处。


  • 悬停邀请:鼠标「悬停」时,出现「选择此模板」的按钮。


2.自主决策

虽然系统中缺少不了一些危险操作或者不可逆操作(eg:删除、重置、重装系统等),但是仍然要用户自主决定是否继续,我们能做的就是让用户再三确认。


  • 弹窗提示:虽然弹窗打断用户心流,但是对于重要的操作,这样是最保险的方式。


  • 删除知识库提示:是钉钉中,删除「知识库」这一重要内容,是不可逆的,系统需要用户谨慎操作。


3.准许反悔

如果说「自主决策」中提到的案例都是不可逆的,那「准许反悔」的后果严重性会弱一些,系统对用户的操作没有那么强的阻断性,所以要准许用户反悔的,


  • 删除撤销:用户点击「删除」后,直接操作;出现 Message 告知用户操作成功,并提供用户「撤销」的按钮;用户进行下一个操作或者 1 分钟内不进行任何操作, Message 消失,用户无法再「撤销」。



『 Ant Design的优点与缺点 』


① 优点


1.助初创团队快速产品快速上线

Ant Design在"幸福者示例中"写到“Ant Design 无法保证业务产品能否成功,但是能帮助业务产品『正确的成功』或者『正确的失败』。”

如果团队有一个产品idea,我们需要通过最少的资源开发此产品并投入到市场中,通过听取用户反馈,验证idea是否可行,快速迭代最终做出更完善的产品。但理想是美好的,但现实是骨感的,在前期研发的过程中通常会出现两个情况。创业团队没有足够的设计资源和时间,前几个版本的产品通常用户体验非常差,这种情况体验差有可能让用户放弃这款产品。创业团队没有好的方法论和协作模式,需要磨合,设计和开发进度一延再延,结果错过了风口,市场被竞品抢占,还没上线就倒闭了。

Ant Design提供了一套完整的界面实现方案,即有代码框架能直接拿来提高开发效率,每个界面组件都经过蚂蚁金服多个项目的考验,具备优秀的用户体验。用Ant Design来做0-1,能快速发布用户体验优秀的产品,听取用户反馈,快速迭代。


当然,创业是九死一生,市场和用户口味都充满了不确定性,谁也没有能力保证产品是否成功,但是只要你能高效的产出质量优秀的产品,不断试错,说不定以后就能成功。


2.减少设计和开发的不确定性。

用 Ant Design 就能高效的产出高质量的产品,减少设计和开发的不确定性。

因为我们公司就使用了 Ant Design 的系统,所以时常会与前端小伙伴沟通,以下都是他们在使用过程的感想。

Ant Design 提供的大量功能比较全面且UI风格统一的组件,能帮助开发者快速搭建通用场景下的应用界面。这大概是得益于蚂蚁金服业务线上极为广泛的应用场景,驱动了 Ant Design 团队通过对使用情况的观察汇总,整理出来了这么一个组件库。他们的经验积累如此之丰富,足以让这个库支持大部分其他前端开发者的需要。

其设计团队给出的设计规范相当详细且经得起推敲,令许多其他团队获益匪浅。


3.节省设计与开发的人力成本

我见过太多宣称自己在乎用户体验的公司,给用户的产品质量确实比较高,但是自己员工内部使用的系统和管理一团糟。种种不便让员工经常加班,情绪消极,这样的团队抄抄竞品达到行业标准体验还行。要想突破是不可能了,因为创新需要员工有充沛的精力和主动性,天天加班谁还有这精神。

用 Ant Design 系统提供的设计工具和组件框架能给设计师和开发者减少负担,能用更少的时间呈现给用户体验好的产品。这样带来的好处不仅仅是设计师和开发者觉得少加班成就感高而幸福,他们重新恢复活力和激情能做出更有创意和竞争力的产品,给公司带来更大的收益,这是一个三赢的结局。


② 缺点


1.无法根据业务场景定制组件,灵活度不够

一定有小伙伴会有这样的疑问,目前市面上有这么多的第三方设计规范,例如 Ant Design ,Element UI,有必要自己造轮子做一遍吗?

这里要视情况而定,如果公司产品是初创期,而且研发人手不足,那确实没有必要自己造轮子。反之在资源足够的情况下,是有必要设计团队重新做一套属于自己产品的规范组件库的,因为B端自身的业务性决定了市场上没有万能的设计规范,那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范,在此基础上进行修改,效率很低,适配的复杂度和重新开发相差无几。


2.组件细节深入度不够,只能“将就”使用

对于比较普通的设计解决方案是可以的,但是 Ant Design 包含的组件细节仍有不足,毕竟 Ant Design 没必要投入过多的精力在组件细节深入度上,规范定义的越是精细,对于产品组件而言可延展性就越差,限制也会越多。而 Ant Design 只需要解决80%企业,80%的通用问题即可。


3.竞品同质化严重,视觉上无法脱颖而出

当市场大部分产品都在使用 Ant Design 设计系统时,产品的同质化就会很严重。为了避免这种情况发生,我们就有必要从设计语言、设计原则、设计组件三个部分开始,设计自己的规范。那些大厂的成熟的组件库该如何用呢?我认为应该把它当成一个字典,有不会的地方,可以去参考人家的成熟的解决方案。



『 总结 』


这篇文章简单的介绍了一下 Ant Design 是什么、 Ant Design 的设计原则是什么以及 Ant Design 的优缺点。当然也重点总结了一下,设计师如何运用 Ant Design 的设计原则,可以将这些原则分为四类:视觉层级清晰、交互操作高效、系统反馈及时、用户自由可控。希望大家通过这篇文章能够更深一步了解 Ant Design 的设计原则,并将其灵活运用到设计工作中。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:人人都是产品经理    作者:菜菜不甜

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


体验度量深度实践

ui设计分享达人

前言


体验目标的达成,需要合理且客观的度量方法,体验度量的实践,需要度量框架的有力支撑。提高竞争优势,提升客户态度,保障产品可以即时的响应客户的需求。本篇文章的实践方法全部来源于酷家乐B端产品业务中的实践案例,重点在于度量框架的深度实践,如果我们的经验能够帮助到您,欢迎交流讨论。 


一、体验度量怎么做?


“体验”是用户纯主观的感受,从这个情况来看是很难被度量的。“体验”同时也是一个比较抽象的概念,如果把一个抽象的概念拆解成一个可执行的策略,拆解的过程如何保证策略的有效性,是我们一直在思考的。面对酷家乐工具型、SaaS型、平台型并存的产品体系,且存在错综复杂的用户需求和业务诉求。在这样的前提下对方法的确立需要更加的冷静。 

如何确定方法?我们需要的是一个完整的度量框架,以及能够聚焦用户体验层为驱动,分解并有力的去解决问题。经过大量的实践和验证得到,抓住一个击破点作为产品体验提升的目标,并一种合理的方式进行推导和验证,这是一种最直接度量体验的标准流程性方式,这里的目标必须是:


  • 体现用户主观感受或者具有行为驱动的目标。

  • 基于业务目标定义+用户诉求了解后,得到的以用户为中心驱动的用户行为。



二、度量模型怎么选?


面对设计圈内已经存在的和部分大厂创造的度量模型,评估优劣后最终我们选取了HEART模型。因为HEART是个比较全面和具备更多扩展性的分析框架,同时足够的权威和标准,而且市面上的模型基本都被HEART的五维囊括。除了这些考虑因素外,再给出以下几个明显的优势点:


  • 1、HEART同时涵盖了定性和定量的不同数据维度。

  • 2、HEART框架同时包含了:宏观和微观的层面

  • 3、HEART模型并不单纯的再定义体验质量,同时也链接了商业价值。把用户体验的原则和收益驱动的指标关联在了一起。


undefined


三、HEART模型简介


1.什么是HEART模型?


多个大厂利用HEART模型拆解框架得到了深度结合业务的度量框架。是个比较全面和具备更多扩展性的分析框架。HEART是GOOGLE公司在实践中提出,基于产出更好产品为目的,用来衡量产品整体体验的度量评估模型。 

它包含五个维度Happiness(愉悦度)、Engagement(参与度)、Adoption(接受度)、Retention(留存度)、Task success(任务完成度)组成,是Google用户体验研究团队在实践中为了准确的度量用户体验而总结提炼出的一个框架。 


2.HEART模型的特性与应用场景


目前市面上还存在PTECH、TEENS等体验度量模型,而HEART模型的特性在于它”以用户为中心“进行度量,同时度量维度全面,既包含宏观的愉悦度,也有微观的任务完成率,同时关注产品上的留存率,与业务目标保持紧密。在评估方式上,既有定性评估的愉悦度,也有定量评估的参与度、留存率等,可对用户使用产品情况做一个完整的评估。 

undefined



四、HEART模型的详细拆解指南


undefined


第一步:确定体验目标

体验目标是体验度量的开始,准确的目标决定了度量的质量。要提炼出准确而有效的体验目标并不容易,通常会引入产品功能等业务因素,使体验目标不够单纯,拆解出来的指标所反映的数据也很难归因到体验。故复杂项目可提炼多个体验目标相互补齐,但每个都必须准确而具体。 

那么如何确定体验目标呢?

体验无法脱离于具体的产品服务存在,用户的整体体验感知积累于每一个接触触点,大多触点常规而平庸影响不大,必须识别出达成业务的关键触点进行深入分析,已提炼出体验目标。 

整体的思路是:首先分析业务目标,并就业务目标所落地的产品服务的链路进行拆解,分析链路后,找到其中对体验有决定性影响的因素,提取其因素后,即形成体验目标。


undefined
1.确定业务目标
业务目标是整个产品服务的最终目的,体验作为产品服务的重要评估维度,需要与之对齐。业务目标与所选取项目范围有关,从整个产品到特定功能模块,或者某个行为链路都可作为参与项目。根据选取的项目来确定业务目标,如“保持产品新旧改版的平稳过渡,降低改版造成的断约率”、“提升用户自主解决问题的能力,降低运营服务的压力”等。注意业务目标与产品目标的差异,后者是对前者的产品化阐释,可以具体到某项产品服务目标上。产品目标和体验目标可以共同服务于业务目标,实现价值的达成。 

➢示例:
业务目标:在设计工具中商品素材的查找效率,辅助家装设计师快速构建方案,提升其签单率 
产品目标:优化现有商品素材的查找逻辑,降低家装设计师查找商品素材的成本 

2.拆解产品链路
产品目标需借助于功能链路来达成,将该目标达成过程的逻辑呈现出来,并分析其跳转路径、操作触点,就是链路拆解过程。整个链路过程是用户价值的直接承载,任何一个触点的失效都将影响到整条链路顺畅和效率。就链路整体而言,触点越多、链路越长,操作成本越大;就某个具体触点而言,其效率、易用性、易理解度也将影响整体的价值传达。 

为完整的拆解出整个产品链路,需要从“用户侧”、“系统侧”进行分析,用户侧代表用户视角下的功能使用流程,是主要考虑的维度,体现了以用户为中心的设计思路;系统侧代表系统在用户交互过程中的需要执行的行为,是系统逻辑的直接体现。两者的交互作用,将完整表达“信息”的流转过程,最终作用到产出物上。 

➢示例:商品素材搜索链路




3.分析触点并提取决定性因素

选取对整个链路有重要影响的触点进行设计维度上的分析,以找出决定触点目标达成的决定性因素,这个决定性因素就是我们体验上需要着重优化的点。在寻找“决定性因素”的过程中,避免将系统性能、业务功能、业务信息因素筛选出来,需要聚焦在设计维度上,诸如交互行为、界面布局、信息呈现、系统反馈等。 

➢示例: 
“确认输入行为”、“搜索结果分类”、“不同分类的区块划分”、“结果数量”等。 

对已拆分出来的各种设计因素来说,哪些算是决定性因素呢?一个很简单的判断方式是:反向判断,即假设缺失这个设计因素,或不完整是否会对该触点有“阻塞性”影响。 

如有严重阻塞影响,则证明该设计因素很大程度上决定了触点的目的达成,属于决定性因素;若设计因素有中等的、轻微的影响,则可能不是本次优化的重点,不作为决定性因素。如“搜索结果的分类”影响用户对搜索结果的信息获取,是决定性因素。“确认输入行为”是常规设计行为,不算决定性因素。 
当然,具体问题具体分析,在不同的功能场景下,同一种行为的影响程度可能不同。 

需要注意的是,决定性因素的选取必须在具体的触点中才有意义,脱离后无法判断是否有阻塞性影响。另外,某些设计因素是否是决定性可能在跨触点中体现出来,需要联系整个链路进行交叉分析确定。




4.体验目标的提取与表述

找到决定性因素及其为什么决定性的原因后,需要为其设定一个设计目标,来指示应向什么方面优化这个决定性因素。决定性因素只是现有功能的一种解法,可能存在其他更优解法或优化方向,我们需要基于决定性因素概括出“设计目标”,以新的设计目标来指引我们的优化设计。 

➢示例: 

决定性因素“搜索结果的分类”,引申出的设计目标为“更清晰的信息层级”、“更完整的信息”。



通过链路触点的分析,决定性因素的提取,设计目标的匹配,我们已对设计优化方向有了准确的了解。这个时候需要从设计师视角做一个完善而精准的”体验目标“的表述。


一个体验目标需要与具体设计场景关联后,才能产生具体而明确的价值,即设计目标落地到场景中后产生价值,表述思路是:在某个具体的链路触点中,我们期望怎么达成这件事。可通过格式进行填写: 
使/什么用户/用什么  做什么事/设计目标/完成什么事 

➢示例: 
家装设计师  使用搜索功能  搜索素材时  对结果展示清晰的信息层级  来快速找到需要的商品 


第二步:确定度量维度

引入HEART模型的重要原因,正在于它的度量维度。由于它的度量维度多方位的表述了产品的使用情况,度量纬度不是一种标准,是一种分析框架和角度,决定了体验目标应该被如何度量,进而影响信号的确定和指标的拆解,因此度量维度的选取至关重要。 

HEART提供了丰富的五个维度,根据其定义,提供了你几个可以衡量的视角。在实践过程中,因每个体验目标所对应的触点的场景、交互、产品目的不同,我们只需要找到符合定义的维度即可。反过来看,一个与体验目标不相关、不匹配的度量维度不能很好地度量体验。 

需要注意的是,HEART模型因其维度的广泛定义,不仅仅可用于体验目标的度量,也可以对产品目标、业务结果进行度量,对体验目标的度量因要从产品因素中剥离出体验问题,相对来说较为复杂,是本次叙述的重点。



第三步:确定信号

首先信号可以被定义为是一种信息的载体,其承载的信息往往反映的是用户对体验目标的成功或是失败的结果,对信号的准确获取将直接影响到对下游指标的确立。 

信号的确定需以上游度量维度为标准范围并引用体验目标为重要判断依据,避免过度发散,保证精准规范的同时,去结合当前有无体验变量基准值作为条件,并使用成功或者失败的结果来评估体验目标的达成情况,最终提炼出信号。 


以度量维度为标准并引用体验目标确定信号

通过逐一对度量维度进行体验变量提取,有基础值则进行对比的方式,无基础值则使用趋势的表述方式,结合业务目标的情况下,去概念性假设体验目标的正向或反向结果,最终通过标准的格式提炼出信号,信号的提炼的可以用固定的格式进行书写: 格式:用户   用什么   做什么   体验变量   趋势&数值


寻找体验变量
基于HEART模型的整个分析框架,拆解出最高频和贴合体验目标的常见体验变量库。在此框架的指导下,可以快速寻找需要的体验变量。 

➢示例: 
(体验变量:易操作度;有基准值) 家装设计师 使用搜索功能 搜索素材时 易操作度 达到4.2
(体验变量:易操作度;无基准值) 家装设计师 使用搜索功能 搜索素材时 易操作度 上升

确定信号的注意事项
①信号的成功或失败要能在行为或态度上准确的体现出来,失败信号可能比成功更容易定义; 
②信号要易于被追踪; 
③信号的敏感度要高,易于被检测; 
④信号应与目标有高的相关度,同时避免被其他因素影响; 
⑤一个目标可能对应多个信号; 

第四步:确定指标

指标是衡量目标的参数,用于准确的描述目标。但通常很难直接从目标中确定出指标,需要借助于对信号的分析。信号是信息的载体,其中包含着变量信息,提取其中变量信息,即可获得一个初始指标。 
初始指标反映了客观的原生数据,需要对原生数据做处理后,可得到一个能精准描述体验目标的指标。 



对数据进行处理

体验变量所直接产生的属于原生数据,而一组数据通过某种分析加工后,可以成为一个更有价值的信息,如均值、中位值。选择对数据进行哪种方式处理,受目标的影响较大,每一种数据处理方式,都有指向特征,通过与目标的匹配,可以选取出合适的数据处理方式。




确定指标的注意事项

①指标应与目标和信号密切相关,指标越明确越清晰越好; 
②标应方便被持续追踪,对信号的描述更敏感,方便做A/B测试。 


五、总结


看似复杂的体验度量监控指标的拆解,可以概括为“体验的问题定位”——“体验的目标度量”——“体验的客观追踪”。 

1.“问题定位”是监控目标的根据,必须来源于具体的业务链路才有被分析和量化的可能,它是体验问题在业务链路中被抽取出来的关键,并转化为可度量的指标来进行监控,最终为后续数据洞察和可视化提供准确的数据来源,否则流于主观,监控体系建立在不可靠的体验目标之上,当然也就不可能有助于解决体验问题。 

2.而“目标度量”所运用的HEART模型作为度量维度,相当于一种体验的定义标准,阐释了什么是它所定义的用户体验。HEART模型以其全面的度量维度,能很好地实践这一点。必须注意的是,对HEART模型下的五个度量维度的细化阐释可能受不同产品特性、产品阶段影响而不同,最终转化出不同的客观指标。 

3.“客观追踪”是对在度量标准下的客观变化的捕捉,捕捉其变量特征,建立常态指标,成为可靠的可监控的指标。 

4.另外,除了准确的定位、度量、转化的逻辑推导外,参考业务目标进行范围收敛,也是非常重要的工作,它影响着每一个推导环节,以避免偏离产品方向,有效的过滤弱关联或无关联的因素。

文章来源:站酷    作者:酷家乐UED

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



从前端数字化到后端数字化,数字化的路到底该怎么走?

ui设计分享达人

从去年到今年,众多行业都遭受到疫情这只黑天鹅的冲击,然而,中国经济也最快的从疫情中恢复到常态,其实这一过程,离不开数字化。从今天来看,数字化几乎是各行各业都在试图接受的一个进化路径。

早前YC中国创始人及首席执行官陆奇认为,数字化是把人们需要的信息获取后存在一个特定的介质上,使得信息本身与这些信息所描述的实体分离开来,进而被大规模、高效地处理后又被传递回人们所使用的终端,被进一步利用的过程。

他指出,在今天的知识经济时代,它是由大规模的信息、数字化来驱动的。

在过去60多年的历史上,从第一代IBM为代表的单板个人电脑;第二代微软、苹果再到第三代、第四代的PC与移动与云,再到即将进入的第五代AI/5G +边缘计算的早期,数字化进程一直是由计算平台来驱动的。

从陆奇的观点来看,任何一代计算平台,都有前端和后端。前端永远由交互的模式来驱动。

包含鼠标、键盘到手指等交互入口。其次,包含数字化的终端设备,比如个人电脑到智能手机等移动终端。前端永远由交互的模式来驱动。

而驱动后端演进的是计算资源规模的扩大提高,具体而言是运算信息、存储信息和传输信息(网络)的能力水平的提高。计算资源规模的提高也意味着数字化广度和深度的扩展。

一、前端数字化:从产业痛点入手,从体验改善突围

从今天来看,借助计算平台的发展,交互入口的演进,前端数字化与后端数字化已经在各行业演进。

比如房产市场贝壳等玩家的VR看房、互联网家装市场的VR装修、服务机器人市场的AI机器人、新能源汽车市场的换电模式(体验交互终端)、手机厂商的智慧大屏等就是典型的前端数字化的案例。

在今天,后端大规模的云计算开始把计算、存储作为一种服务形式,让每个企业在门槛很低的情况下,充分享用数字化所带来的能力。

后端的数字化创新更多是计算资源规模带来的数据化驱动。

比如说,各行各业与互联网大平台结合建立的数据化、以及互联网巨头借助自身的云计算资源平台布局,带动千行百业上云, 解决流程与业务创新。

从前端与后端的数字化,或能窥视数字化转型的趋势性方向。

互联网平台结合VR技术的应用在今天已经非常普遍,比如VR购物、VR看房以及互联网家装行业的VR装修等玩法都相对成熟了。

当前从国美打扮家到土巴兔、齐家网等互联网家装平台,都加入了VR技术,能让用户有直观独特的3D全息家居体验,用户除了能全方位查看全息影像,观看户型展示,更能与全息影像展开交互。

而VR看房也应用到了租房市场。传统的线上看房,都是采用图片和视频的方式,但线下看房要花费大量的精力体力。从行业痛点来看,房地产互联网广告平台模式最大的弊病就是滋生假房源,真实性难以判定。

而互联网房产与VR整合在一起,通过三维实景重建,建立3D化的体验,带来了多重体验改善——它首先是让消费者获得沉浸式的看房体验,自由行走在VR场景内,查看每一处细节。

其二是,无需亲自到现场体验,就可以获得所见即所得的现场体验。其三,基于空间三维数据,以AI生成一种更具交互性的VR视频,解决了房源的真实性的问题。

这其实是一种典型的前端数字化创新,它通过VR这种新型的数字化终端与房地产、装修等行业结合,一改过往看房不便利、假房源众多、信息隐私泄漏等众多短板。

再看AI机器人市场。

我们知道,工业机器人可以代替一部分人进行重复性的劳动,然而由于指令循环式的机械化,无法应用于家庭、商场、医院等复杂环境中。

2021年央视春晚上,红色机身搭配祥云图案的「拓荒牛四足机器人」亮相,让服务型机器人进入大众视野。

这类AI机器人关键是解决了两个核心的技术难题:其一就是赋予机器人感知的能力。其二是给机器人做好整个任务的长链条规划。具备对指令进行解析,进行分层任务分解的能力。

通过这两个能力的完善,它就有机会针对行业的痛点改善交互模式服务于众多的行业之中。比如在机场、银行、购物中心等商业场景中,机器人能够帮助企业减少人力资源支出,帮助人们快速获得咨询回应。

某种程度上,这类探索更多是聚焦于如何更好的服务于人的问题,但如何利用机器人来更好地服务到社会更多细分群体,是它未来的考验。

此外,在新能源汽车行业,蔚来的换电布局是基于行业的电动车充电痛点而挖掘出来的新模式,在今天,电动汽车的电池电量焦虑无疑是当前消费者购买电动车的最大的焦虑与痛点。

对此,蔚来提出了车电分离、电池租用的商业模式,背后的核心是蔚来把换电站、充电桩、电池、专员通过数字化搬到了云端,实现线上线下同步。它本质上是在电池技术短时期内难有突破的现实条件下,拿出的一种基于解决车电分离的问题、快速换电的新解决方案。

再看电视行业。

在今天,手机与PC已经抢夺了太多时间,人们正在形成用手机、平板看电视的习惯,电视的发展前景在哪里?

从整个行业来看,电视行业经历了一轮曲线发展,在2014年左右,中国智能电视行业的发展达到顶峰。随后在2016年进入低谷。

但2019年华为智慧屏之后,小米、海信、TCL等相继发布首款智慧屏。智慧屏的出现,让电视行业进入到家庭互联网的时代。

在雷鸟科技CEO李宏伟看来,电视行业发展经历三个阶段,第一阶段是以显示技术为主的传统电视,第二阶段是以观看在线内容为主的智能电视,第三阶段则是成为一部55英寸手机的智慧屏。

雷鸟科技的智慧屏玩法是融合在大屏电视上建立了一个短视频频道,即当用户想看短视频或其他场景的时候,它可以旋转成一个竖屏。

某种程度上,智慧屏是在传统电视的基础上,为用户提供更丰富、更个性化的使用体验(如视频通话、AI健身、实时互动教育等),重构了人机交互。

综上从VR看房、AI服务机器人、VR装修,智慧屏、蔚来换电站等案例中,其实都能看到前端数字化重做的理念。

它们都是看到了行业的痛点与短板,以及新阶段的消费需求(比如贝壳看到了平面图片的假房源问题,智慧屏玩家们看到了大屏需求与消费形态的转变),然后借助了新的终端技术,新的计算平台玩法嫁接,推动行业游戏规则的改变。

前端数字化更倾向于从一个产业原本存在的痛点与问题入手,通过终端交互的创新,带动用户体验的升级,试图打破原本产品业务增长的瓶颈,通过体验创新带动新需求。

二、后端数字化:借助数字中台、云计算、SaaS等实现B端生意突围

如果说前端数字化更多面向消费互联网赛道,而后端数字化创新则更多是面向B端产业互联网赛道。

在今天来看,从国外亚马逊微软,到国内BAT、华为、字节跳动,它们当前的战略是集体To B,争夺云计算赛道蛋糕,这是平台型巨头带动后端数字化的一个侧面。

在当下这些巨头玩家们的布局战略来看,存在诸多共性:

首先是巨头们To B都是主打技术输出,赋能各行各业。亚马逊、阿里云,腾讯云、百度云、字节跳动火山引擎等都在以技术输出、赋能各行各业的方式在To B市场跑马圈地。

其次,都基于自身业务发展特色提出了相关的服务与解决方案——当前,一方面,腾讯云有 “数据驱动” 解决方案、阿里云有 “推荐算法” 解决方案,火山引擎有“智能增长技术” 。

另一方面,BAT字节跳动等众多大厂开放了比如钉钉、企业微信、飞书、如流这些工具,可以免费被中小企业使用。

其三是大厂凭借C端业务的巨大体量,都在输出数据中台。

而从平台商业模式的演变来看,字节跳动与腾讯、阿里等巨头型玩家的商业化路径有类似之处,即首先是通过入口级流量型产品聚集起规模化的流量与用户进行流量变现,然后切入B端市场,开始进一步输出技术价值(大数据、人工智能、云服务等)。

综上来看,从BAT到字节跳动来看,它们就是借助了数字中台、云计算等底层基础设施的能力,来推动平台数字化赋能模式与用户增长模式。

在目前,基于强大的数据分析能力来实现用户精准定位,最直观的例子是电商行业,无论是基于消费者偏好的广告投放,还是基于对用户群体需求行为数据分析,结合在线人群识别技术,电商APP总能精准卡准你的偏好与需求。

此外,在技术价值输出层面,百度腾讯等玩家也带动了自身的云服务能力在营销、工业、金融等多个行业成功落地。

而传统企业后端数字化的本质就是把人工、线下的经营模式搬到线上去,通过互联网软件技术来实现获客与增长。比如传统的企业增加了ERP系统、CRM等。

而SaaS是后端数字化的典型。所谓SaaS,也就是软件及服务,很多中小企业都会选择SaaS提供企业服务。

早在2016年知识付费兴起,作为创投的一个新风口,当时的互联网行业里纷纷涌现了像得到、喜马拉雅、千聊、荔枝微课等知识付费平台。

但发展到后来,教育培训与知识付费费行业越来越倾向于需要一个专业化的工具来实现内容的获客引流。而知识服务SaaS平台就这样应需求而生。小鹅通、千聊、荔枝微课是其中的典型玩家。

小鹅通是基于微信生态的SaaS服务工具,客户可以基于这个工具在微信里运营私域流量,打造自己独立的知识店铺,围绕着教育与知识付费业务,实现引流获客、线上用户运营,帮助商家打造完整的业务闭环。

同类型的还有千聊和荔枝微课,它们作为知识支付平台工具,可以通过SaaS系统,帮助创业者建立自己的知识商店。

在SaaS服务工具中,CRM的普及化程度相对较高。从字面意义来看,企业用CRM来管理与客户之间的关系,从而支持有效的市场营销、销售与服务流程。

它的本质是把企业的组织架构,业务流程,运营模式等通过软件系统的形式固化下来,是一种创新的企业管理模式和运营机制。

由于CRM是企业面向外部销售、客户服务的部分,在数字化过程中,它与业务增长具备直接关联性,也因此最快被企业接受。

国内企业服务领域机构T研究发布了《2021中国CRM数字化全景实践研究报告》,报告指出,在经历了“疫情”黑天鹅事件后,中国市场中的CRM品牌反而逆增长趋势。

特别是在大量业务必须线上化、数字化加剧的双重驱策下,CRM成为了企业抵御风险、保持增长、以客户为中心的转型必要选项。

SaaS服务工具是数字化转型的大势下一股代表性的力量,他们为企业提供一种获客引流的数字化工具,增加了与客户接触的触点。

有业内观点认为,传统企业软件之所以到了规模化增长的天花板,是因为没有解决服务产能问题,而SaaS的运营本质是服务的管理,即通过高效的工具系统来支撑,围绕获客、留存、增长的全链条的服务。

因此,SaaS服务作为数字化转型中的一股重要力量,它试图帮助增加客户接触机会,实现更高的销售额,说到底,企业的数字化转型,其中一个重要驱动力还是利益驱动。

如果说前端数字化创新更多偏向于消费互联网赛道,通过终端交互创新发力行业的痛点,那么后端数字化其实更偏向产业互联网,更多借助了数字中台、云计算、SaaS等底层基础设施的变革,来实现了产业化B端生意的突围。

三、数字化转型的难题、痛点以及未来

也就是说,从计算平台交互模式的不同,各行业企业有了前端数字化与后端数字化不同发展与创新模式。

从趋势来看,未来所有的企业都将成为数字型企业。如前所述,对于众多传统企业而言,它首先是利益驱动,这决定了它关注降本增效,但更关注投入产出比的问题。

从业务模式来看,前端数字化更多是聚焦通过产品层面的技术创新来实现业务与产品体验破局,而后端数字化更多是基于数字化技术(如大数据、云计算、人工智能等)来推动企业组织转变业务模式,组织架构。

前端数字化它更多聚焦于解决客户的现存痛点,比如:

  • 家装、房产相关市场可以利用虚拟现实和三维建模技术为顾客提供仿真体验;
  • 酒店行业、汽车行业提供基于智能手机的无钥匙产品化体验;
  • 餐饮行业已经实现了扫码排队、点菜服务等。

而后端数字化更讲究从数字渠道有效触达目标顾客的能力,目前围绕微信、抖音快手、头条、淘系等各个内容平台,出现了非常多的营销获客的解决方案,这本质是借助后端数字化的模式来实现业务的线上化营销突围与创新。

而“上云”也已成为后端数字化转型的基础,从产品、业务再到运营和服务等各种转型层面,通过“上云”获取算力资源实现对用户需求的精准定位都变得必不可少。

来自全球知名数据机构IDC的报告显示,疫情加速了全球以云为中心的IT转换,预计到2024年,全球整体云计算产业规模(包括云服务、云相关服务和云基础设施建设)将达1万亿美元以上,而在中国将达到1000亿美元以上。

有业内人士指出,为什么传统商超干不过电商?因为传统商超是凭经验来判断市场平均需求,而电商则是精确量身定制,当前C2M、社交电商等新模式开始进一步升级了这种精准定位能力。

对于中小企业来说,数字化转型无疑也面临着众多难题,一方面是面向内部,数字化转型需要企业运营体系、组织架构、技术开发等各种力量的配合,打破部门之间的数据壁垒与业务流通壁垒。

尽管不少企业内部有管理升级和业务创新的需要,但在成熟的、利益机制板结的传统大企业内部,实现起来并不容易。

另一方面是面向外部,挑选哪家厂商的服务,平台的解决方案是否与自己的业务适配等等,这些顾虑无形之中给企业增加了采购风险与相应的损失与误差。

这事实上也是对提供云服务的巨头的一大考验,在云市场,你给客户提供的能力是否有助于帮助企业建立壁垒,形成差异化的竞争能力,这是关键。

在今天,从工业、金融到地产、零售等都行业都已经实现不同程度的数字化转型,实现了对业务的局部改善。但从未来趋势看,企业到底应该走向哪一条路,其实关键是看其本身的模式是产品创新驱动还是服务、业务创新驱动,或者说是两种情况的融合。

这往往都是由企业的商业模式或生意模式决定的——产品创新驱动为主的商业模式对应的更多是以前端数字化为主,而业务销售创新驱动的则更多是以后端数字化为核心。

从前端数字化发展趋势来看,它在电商、零售领域中已经应用得相对成熟了,在互联网平台经济模式中,融合AR与VR技术等新一代交互终端带来前端用户体验创新方面还存在巨大的机会。

而前端数字化程度越高,沉淀的后台数据就往往越丰富,这往往对于后端数字化的改造与升级的推动作用就更明显。

因此,这两种数字化模式之间也没有明显的界限,在多数情况下,企业需要融合这两种数字化模式的创新,实现前后端数字化的双向升级,在此基础上,再考虑投入产出比的问题。

美国学者尼葛洛庞帝在其1996年出版的《数字化生存》一书中提到对未来的畅想:人类生存于一个虚拟的、数字化的生存活动空间,在这个空间里人们应用数字、信息等技术从事信息传播、交流、学习、工作等活动。时至今日,尼葛洛·庞帝的很多描述已经成为现实。

在今天,每个人手机里小小健康码的背后,其实就是“数字化”城市治理的一种表征。

综合来看今天的数字化转型,我们发现,前端数字化讲究技术和需求挂钩,与投入产出比结合,从解决实际的需求与痛点出发拉动技术与市场的创新进度。

而后端数字化更多是基于对业务数据充分而高效的运用,实现组织经营的完全数字化,从而提升企业运营效率。

四、结语

数字化的大潮正在到来。

在这个大时代下面,谁能站到浪潮之巅,就看是否能找到合适的突破口,实现从前端数字化层面的用户体验的突围与升级,到后端的数据化基础设施的指导结合起来形成综合性的竞争力,继而顺应时代潮水流动的方向,成为潮水的一部分。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:人人都是产品经理    作者:王新喜

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


日历

链接

个人资料

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

存档