来华为旗舰店为 解锁HarmonyOS全新设计故事

[ 上海 ] 2021-06-18 编辑:花花

主题:HarmonyOS UX设计理念分享

时间:2021年6月16日

地点:华为全球旗舰店·上海南京东路

微信图片_20210618200054.jpg

主持人:各位媒体朋友们各位花粉朋友们大家下午好,欢迎大家来到华为全球旗舰店·上海南京东路,来参加我们今天的HUAWEI TALK独家活动--HarmonyOS UX设计理念的分享。

非常荣幸向各位介绍迄今为止华为全球最大的直营旗舰店,整家门店的面积共有5000平方米,分为三层楼,接下来我简单的跟各位介绍一下门店的布局,一层是产品体验区,进门左手边第一张桌是我们为大家专门设置的HarmonyOS主题桌,展示了搭载HarmonyOS系统的一些智能设备,大家可以在那里尽情感受超级终端带来的全新体验。二层是全场景体验区,我们设置了包含移动办公、影音娱乐、智能家居在内的5大HarmonyOS的全场景智慧生活体验区,通过不同场景的沉浸式体验,让大家更深入的感受万物互联带来的魅力。三层是多功能区,也是我们的政企展示区和售后服务区,在今天的分享结束后,我们会有HarmonyOS资深体验官带大家进行参观体验,各位也可以期待一下。

而大家现在所处的位置是我们华为零售消费者教育的课程分享区,也称为华为学堂。这里每天都有精彩的课程启发顾客深入探索自己的兴趣,玩转他们手中的设备,目前已有30多节课程里,涵盖了玩机技巧、摄影摄像、艺术设计、运动健康、商务办公、编程、音乐和智慧生活8大主题,也经常会邀请很多大咖和华为花粉来到这里进行交流,在华为学堂里,我们也有专属的Hi HarmonyOS的课程,带大家了解全新的UX设计,体验更多设备互联的便捷和流畅。

微信图片_20210618200253.jpg

我们门店也正在展开HarmonyOS体验官招募活动,截止6月20日之前,大家都有机会预约成为旗舰店的HarmonyOS体验官,通过完成打卡活动,不仅可以解锁所有的新奇操作,还可以获得HarmonyOS的优先升级权。

今天我们的HUAWEI TALK分享的主题正是HarmonyOS的UX设计理念,HarmonyOS在今年6月2号正式在大家面前全新亮相,这个新一代智能终端操作系统,为不同设备的智能化、互联和协同提供了统一的语言,带来简捷、流畅、安全可靠的全场景交互体验。今天我们有幸邀请到了华为大咖,同时也是自身的UX设计师大福老师和大家分享HarmonyOS UX美学设计背后的一些小故事。

大福:今天非常高兴在这里跟大家分享全新的HarmonyOS的设计,在之前的发布会上大家已经对HarmonyOS有很多的了解,今天我会分享一下大家没有看到的设计上的贴心的细节,带给大家全新的视觉感觉。

这个是我们全新的logo的故事,也在发布会上进行了播放。可以看到HarmonyOS,我们的O会有特别的设计,在圆球下有一条线其实我们也是一个开放性的思维让大家自己进行不同的解读,花粉论坛上有人说O就代表了太阳,一横就代表了地平线,阳光初升代表了HarmonyOS起源的设计理念,我们还看到O就是一个口音,横就是闭口音,还有我们是做软件的,软件的,语言跟人的语言是不同,软件的数字中有O和1,你也可以把它解读为0和1的组合,成为我们新的logo的起源。

微信图片_20210618200120.jpg

我们这次带来的全新HarmonyOS我们想建立的是人与世界交互的全新想象,我们这次想建立一个和谐的数字世界,所以我们这次的理念有三个非常非常有意思的关键词,第一个是ONE,ONE就是和谐统一的意思,我们这次有不同的设备,我们怎么样用一套设计语言去打通这么多跨设备的东西,所以我们提出了和谐共生的语言。

还有universe,这是衍生万物的概念,在有这么多设备之后,我们通过整个系统怎样让更多的交互、创意带来更多的可能性?所以我们提出了universe这个概念,从ONE、universe到HarmonyOS形成了整个的全新设计体系。

从视觉上带来的最大改变就是颜色,这次来源于宇宙的设计理念,整个的空间感在手机操作界面里面会更加深邃,我们也有全新的黑色,以前系统里面的黑色是纯黑,这次我们不把纯黑作为底色,这次我们把星空灰带给大家,还有雪域白,它也不是纯白,这个是作为三个系统里面的主色来呈现,大多数时间我们使用系统的时候都是由这三个颜色组成,其实我们还有各种的辅色,辅色会有高饱和和低饱和度,以这样的舒适度进行全部的色彩设计体系,让你在不同的设备上都能看到同样的这些色彩,这些色彩运用到不同的设备上,你都升级成HarmonyOS系统以后,所有的视觉上都会有非常舒适的一致性。

并且我们刚才看到了所有颜色,还有形状,还有从语言开始,这次从语言出发带来了点的形状、圈的形状,我们从圆和形状这两个方面再进入系统中的话,其实你从颜色和形状上你就知道你现在的系统用的是多少容量,而不需要聚焦于数字上,这个是用形状和颜色最直观的方式告诉你使用数据的时候可视化的效果。

你可以看到蓝色的圈,你就会觉得你的手机非常的健康,只要看到不同的色系出现,你就知道你的内存差不多快满了,所以我们想用最直观的颜色和形状来告诉用户你的手机使用状态是什么样的。

同样圆的元素也用到了图标的设置中,图标比之前更加的圆润了一点,这个是我们的圆角弧度都是超脱于手机外壳的圆角弧度,这样的话我们在设计上看到所有的角度都会更加的舒适。现在这样是之前的图标,现在的图标把它重新变成了有开口、圆角更加圆润的弧度,这是我们之前,以前我们都是在平面上进行设计,没有空间纵深,现在我们怎么样思考在平面的细微图标上让它产生有立体感、纵深感,所以我们进行开口的设计,通过小开口穿插的设计让你感觉并不是在一个平面上,而是在三维空间的立体感,这也是我们在细微的地方有不同的地方,细到所有的小图标都进行了重绘过程,我们通过线条的间隙体现空间穿插的效果。

其实我们还有动效上的变化,动效我们追求的是流畅感,这次又增加了一个新的设计,我们称之为引力动效设计,我们建立了一套全新的引力动效体系。

引力动效体系有超脱于现有的地球感,让我们来到了宇宙,我们把宇宙中的那些不同星球之间的引力放到了我们系统中的动效上。这次整个动效上我们做了非常大的变化,这些元素都是用在了系统设计的动画效中,这些元素我们都是从宇宙的特征中进行吸取,用到了实际场景中。

大家可以看到宇宙的起源是道光,我们把光束的灵感用到了全新的开机动画中,背后也是寓意整套系统也是从零开始,在天空中飘浮的悬浮的感觉,也用在了一开始开机的时候你在选择的动效,类似于宇宙的物质悬浮的感觉,还有很多人已经升级到了HarmonyOS,我们在升级HarmonyOS统的时候我们也用到了穿梭的感觉,我们把这个也用到了升级的系统中。

还有平衡,比如说月球围绕地球转,之间达到了引力的平衡,我们用到了pad和手表、手机上,你看到这个标志的话你就知道这个系统就是HarmonyOS系统,这个手表是华为手表。

其实动效体系中不光是刚才的,我们还有日全食的感觉,构建了全新的一道引力动效体系。我们每一次使用的时候,动效设计师全部做了一套新的动效体系的引进,大家在不断使用的小细节中会慢慢知道我们设计师在背后的贴心和用心。

我们在声音体系上,大家都知道华为标志性的声音是四个音阶的声音,我们也在这四个音阶上做了扩展性的设计,我们在华为标志音上重新做了铃声、闹钟、通知音、信息音,这一套整个的升级体系,我们升级完以后我们在HarmonyOS铃声主题包里面可以点击铃声主题听一下全新的铃声,并且我们不只做了铃声设计上的东西,我们在调试上也做了全场景的东西,我们在声音混音效果上,我们用华为本身的标志性的铃声,它在手机上、平板上、智慧屏、手表、耳机上所有的调试都是不一样的,包括我们用了不同的声音的乐器的选择,为什么这么做?为什么会花大力气给每个设备同样的一首铃声做不同的配器呢?因为我们知道不同设备上的扬声器是完全不一样的,手机的扬声器比较小,它的频段是在500k以下,但是电视机的话有可能是在20赫兹以下才开始衰减,我们为了发挥每个设备上的扬声器最佳的体验,所以我们用同样的一首铃声,从混音开始到配器在不同的设备上都重新定义了,我们会把相对应的声音放到相对应的设备上来,跟我们之前的设计完全不一样,我们之前就是用一套东西去适配所有设备。

我们再看看第二个环节和谐共生,人类生活的是物理世界,使用的设备是数字世界,怎样打通物理世界和数字世界的真实感。这次我们带来的是轻拟物的设计,真实世界所有的按纽都是有立体感的,所以我们在这次的设备中,只要大家感觉我用的这个模块是不是真实世界中有这样一个东西,只要是真实世界上有这样的东西,我们的设计都会引入轻拟物主义,也是轻微立体的感觉。之前的设计都是平面的,没有任何的立体感,现在每个按纽都是微微浮起的,跟立体世界里的东西都是一样的,我们就还原到怎么在手机里面体现真实物理世界温度的感觉。

不光是计算机,我们从温度计、方位、指南针,所有的只要真实世界有这样的东西在,我们就会引入微立体的设计,让你感觉这个东西是真实存在于你的手机之中的。刚才是雪域灰和正常模式下,有很多人喜欢用深色模式,用了深色模式我们不可能重新用一个反色去做它的深色模式了,在深色模式里面我们给微立体也加入了不同的色阶,等于说微立体的设计同样的界面会做两套不同的设计做软件合成,一套是深色模式,一套是正常模式,让所有的用户在不同模式下他感受到微立体材质的变化都是一致的,是这样的一种不同的设计。

只要是华为设备,只要是有这个功能的,不管是PAD还是手机都是同样的,所以你在使用华为这么多设备的时候,你会感觉到非常的一致舒适,为什么我们要做这样的事情?就是为了减少大家在使用我们系统时候的二次学习成本,你只要用了我们的手机,你再用平板上的东西你会发现非常的熟悉,你再用电视的话你也会发现这些图标、界面都会非常熟悉,不需要有二次的学习成本,我只要学习一个设备,为用户节省更多的时间。

我们又在想刚才是视觉上的空间感,我们在里面不同层上的空间感怎么设计出来的呢?我们把所有的卡片材质分成一层,我们再把阴影分成一个层,再把背景景深做一个层,我们想把二维世界让它带给我们宇宙的那种纵深感,纵深感我们会怎么做?材质的话其实细节,有可能我们在使用的时候并没有发现,但是这些东西都是经过严谨的思考用到了手机的设计之中。我们所有的材质它肯定是有有薄有厚,厚的材质感你会发现它离你更近,你用薄的材质感的话会发现界面离你更远,我们用厚与薄区分内容是想给用户带来更快捷的操作,如果你是聚焦当前你要操作的内容的话,我们会选用厚的材质感,一般的材质感我们选用的是中间距离,还有文件夹那些你有可能只是调出来看一下,我们会选择薄的材质感,通过我们用材质的区分造成的视觉上的前中后的空间感。

还有通过阴影,我们造了不同的阴影的数值来表现出同样一个元素或者一个界面上有多种不同的元素的时候,我们是通过不同的阴影在一个平面上的远近距离,并且我们还有背景景深的模糊处理,由景深造成远到近的距离的感觉,这样在二维的平面上造成了三维的视觉感觉。

景深近的模糊数值就更小,远的模糊数值就更大,我们会和开发软件的人一起,把所有的这些东西都进行定义,我们会分不同的级别,从级别上看,我们会选用相应的层级关系的模糊数值,带给大家不同的感觉,这张两个窗口,你会发现一个窗口在另外一个窗口之上,这个窗口如果我们没有模糊的话,会发现之前两个窗口是平行在一起的,我们通过阴影的层级变化和背景模糊的变化,我们会感觉出来前面和后面包括侧面和悬浮球他在你视觉上的距离是完全不同的。

我们通过刚才所有数值的调试来区分它跟你视觉上的远近的距离,其实我们想用这一套不同的景深、阴影、透明材质来区分这个时候你所交互的东西离你近还是远,这样一种纵深的空间感。

这个是我们带来的衍生万物,当我们有一样东西以后,我们会把它扩展成一个像宇宙一样更深邃、更大的东西。这次HarmonyOS的“混沌未分天地乱,渺渺茫茫无人见”,这是大家对HarmonyOS全新的期待,这个我们第一眼看到的是字体,我们在字体上也带来了全新的设计,我们为什么要做全新字体的设计呢?为什么字体会有人文上的演变?其实是人赋予它的,因为它所书写的材质不一样,其实字体的演变是根据你所承载字体的材质的变化而变化的,现在这么多显示屏,我们在想我们的字体是什么样的,我们现在处于什么时代,接下来处于什么时代,不同的人有不同的设备,我们有这么多不同的设备,我们打造一个全新的字体应该符合什么样的标准?肯定是符合全场景、全显示的标准,在我们的手表、手机、平板、智慧屏上我们怎么样用一套字体显示在不同介质上、不同设备上的舒适感,这就是我们带来的全新的字体。

我们带来了全新的字体HarmonyOS Sans。我们想从三个方面去更改字体,我们有易读、独特、通用,我们对所有以前的字体进行了重新的购置,这个感觉我们会对笔画、连体等一些小的细节进行收拢,这样看上去会有现代与人文之间的平衡。首先中文上我们引入了书法的弯、折、勾,第一种是数字化黑体,他是在正常的屏幕上显示,铅字黑体是在印刷体之上,我们取了现在数字化的电子显示屏上圆润的感觉,这样的平衡带来了新的HarmonyOS Sans,这套字体不光是用在平面上,我们想超脱于手机屏幕外,我们在印刷各种东西的时候,你在传统的物理印刷介质上,也会有很好的油墨混开的感觉,我们想从传统的印刷、铅字包括数字显示中带来全新的感觉。

我们为什么会对所有的字体进行重构?考验到不同的场景比如你在使用手表的时候,你大多数时间看东西的时候是运动状态,家里的老人看电视的时候,老人的视力比年轻人的视力会下降一点,怎样做到用一套字体去适应不同场景,其实我们做到的就是处理好字体的灰度,这上面是以前我们没有进行改良的字体,你可以看到它的易读性,包括“桌面”的“桌”中间这块,你如果是在运动状态下看到这个字,其实中间的“木”是糊的,现在我们通过细节的改良,让每个字体的现实至少是不同的场景下这套字体你都可以非常轻易的识别他写的是什么,而不同造成模糊的感觉。

其实我们这套字体背后有一整套研究的流程,我们全场景手机、手表、平板、车机包括智慧屏,你在使用设备的时候你看的距离不一样,看的角度也是不一样的,我们怎么样通过这些数值让每个人使用设备的时候看同样的字体都是舒适易读的呢?这次我们采用的是无级字重可调节的特性,我们通过专业的人因研究的报告,这个是我们通过大量的数据进行的研究,同样一套字体在不同的设备上,所有人的舒适的观看度包括是深色背景还是浅色背景,手表上的中文是静止的还是运动的,是夜晚还是黄昏,其实人的需求对不同屏幕上字体的显示是完全不同的,所以我们在出厂的时候就用这样一套字体去适配不同场景下阅读字体的无级字重,这就是我们带来的覆盖全场景、多终端、最舒适阅读的字体体验,这套字体体验是有105种语言,这105种语言全部是免费开放给大家下载的,而且是可以免费开放商用,你可以把这套字体用在单页的印刷、海报印刷,也可以用在各种app之上面。

其实刚才看到的是字体上的设计,大家以前使用的时候其实文字和图标之间混排也会有不舒适的感觉,下面是我们以前的,当我们使用手机的时候,当中英文字体和图标开始在一起的时候,中文图标和英文图标就会跟字符等宽,合在一起的话就会有一个距离差,我们现在就会变成不同等宽的字符,我们变成字宽的字符,让图标在字里面阅读会非常舒适,间距也是合适的。

你在我们系统中如果你打字也好或者看显示也好,不用适配,如果你是打一个数字我们就会默认为你是一个时间显示,我们的冒号就会居中,这跟我们的认知是一样的,如果只是作为人去讲的东西的话应该是居下的,这是我们做的符合正常阅读上的字体的变化。

微信图片_20210618200200.jpg

我们把所有的运算符号也是跟数字做了同样的居中,这部分我们带来了全新字体,不光是字体,我们通过不同的卡片设计,从字体开始这个是我们非常熟悉的HarmonyOS桌面,我们这次引入的不光是全部的字体上的设计,整个的界面上最大的变化就是卡片。为什么我们会用卡片式的设计?不光是用在我们的桌面上,我们用在里面所有的小部件上也是用这样的卡片,卡片的设计也打通了所有的设备,并且我们根据不同的握持方式,平板界面上我是双手握持,你就会发现原本在下方的操作栏,这个是给你单手握持用的,单手握持的时候这个操作栏就会在下面,便于你单手操作,你横屏的时候你会发现最舒适的是左手握持的方式,所以我们会把不同的操作栏根据你使用的不同设备也进行变化,让你第一时间使用的时候是你双手最容易触发的那个点位去进行设计,这也是我们所带来的区分上的不同设计。

为什么我们会大面积的采用卡片设计?卡片是承载内容的最好的方式,我这个卡片在手机里面,这个卡片在折叠屏里面,这个卡片在pad里面,只要用卡片的设计就可以打通所有的设备,我们通过引入了大量的卡片设计,把我们所有的内容都可以快速的进行不同设备之间的认知,不光是所有的设计界面的小卡片、大卡片,我们所有的都运用了卡片的元素,让它可以在不同的设备之间快速的流转。

卡片不光是承载在一个设备到另外一个设备,还承载了人和其他设备之间信息的交互,这个我们有碰一碰、靠一靠、扫一扫,其实这背后我们跟三方设备是要接入HarmonyOS的设备,他都是采用了不同的卡片完成我和三方设备之间不同的交流,让你的设备可以快速的和三方的内容进行互动,只要运用了HarmonyOS系统,所有的视觉交互上都会非常的统一,不会有二次的学习成本。

这次来带来了最大的交互构架的革新是什么?是我们把通知中心和控制中心进行了分离,按照传统的安卓系统我们就做不到全场景的设备,我们这次分离了以后,这个面板等于是超级的控制器,上面控制本机所有的应用、设备设置,下面控制你所有的家居,等于在这一屏里面可以把所有的设备全部在一屏里面掌握。

这个视频是在发布会上放的,这里面加载了我个人的一个小的心思,这个图片的乐队就是我自己的乐队,这张图上面的三个人左下角就是我。

我们所有的控制中心我们在各个设备上都是打通的,包括智慧屏上也是有的,包括卡片的服务中心全部都是打通的,并且所有的通知中心也是在所有的设备上全部打通。为什么你会知道使用了一个设备以后,你会对其他设备非常了解?因为我们所有的构架都是一致的,这就是你用了一个设备以后,你再用其他的设备学习成本会非常低。

还有我们这次还带来了万能卡片,不同的设备都有万能卡片的服务,这是在发布会上大家看到的我们有这么多的万能卡片,大家不知道其实我们给万能卡片做了一套设计的规范,我们会在不同的卡片形状、尺寸上给出不同的规范,所有里面的内容、文字、颜色、数据、图标都是可以进行二次设计的,什么是二次设计?我们之前所有的设计师你在我们的华为主题上可以下载到不同样式的主题,但是涉及到不同样式的主题,卡片里的内容是改不了的,我们通过这样的形式,我们开放给任何主题设计师,或者你在华为的主题市场上你可以下载到更加不一样的,不光是图标会变、地址会变,所有卡片的样式可以更加的多样化,我们整个的共建都是开放给三方设计师,大家可以发挥自己不同的创意。

这个是不同的表盘的设计,这也是采用HarmonyOS系统的全新手表,我们的手表表盘后面还有不同的设计故事,这一套是月球,你点击一下它就会实时显示现在的月球不同月面的样式,你可以看到月球的阴晴圆缺,再点可以一下实时显示现在月球与地球之间的距离,再点击一下你可以看到月球上不同的陨石坑的形状,再点一下又回到了主界面,这是我们在手表上做了可交互的方式。

华为是一个技术性的公司,我们也在想光是设计是不够的,设计怎么样结合技术,这套表盘会根据温度变不同的颜色,这个是跟现在当下的环境温度有关,热的话会变成暖色调,冷的话会变成冷色调,这个表盘是金镶玉,是2008年奥运会金牌的设计感觉,他是利用陀螺仪,你的手在不同位置显示的时候它表面的反光会根据你的手不同的位置而变化,这个待会儿大家可以体验一下。这个是最后我想带给大家比较有趣的东西,是一个趣味游戏,你们可以在表盘上打弹珠,不光是打弹珠里面还有分数,你可以跟朋友比比谁的分数最高。

这就是我今天给大家带来所有设计上体验分享的内容,希望大家能希望,如果还没升级的伙伴们可以去升级了,如果已经升级完了的朋友们可以看看其他的设备,可以体验在不同设备上同样的一套HarmonyOS的设计是什么样的感觉,谢谢大家。

微信图片_20210618200222.jpg