华为5大设计师讲述HarmonyOS UX设计背后的故事

嫩娘2022-09-23  68

针对以上问题,华为做了大量的人为因素分析。华为在研究一个滑动手势轨迹时,发现有三个关键指标:滑动角度、滑动速度和滑动距离。这三个指标对一个滑动有一个比较完整的定义,可以清晰的识别这个滑动是什么样的滑动,更好的识别用户的手势意图。

热图已显示。颜色深的才是难滑的地方,不同的指标得出了相似的结论。有的地方容易滑,有的地方难滑。基于这些,我们结合左手和右手,最后有一个容易区和一个难触发区,哪里容易做上滑动作,哪里比较难。对于这两个区域,如果把刚才的三个指标整合起来,会有一些特殊的设计来定义如何在容易的地方触发。比如容易的地方角度小一点,就能满足滑上来的指标,难的地方角度会大一点。速度也是如此。容易的区域滑的比较快,困难的区域滑的比较慢,困难的区域会降低速度阈值,这样更容易触发。距离也是如此。容易的地方比较长,难的地方明显比容易的短。

针对这些不同的区域,华为做了特殊的设计,让全屏滑动一致,滑动到哪里都很舒服。

在动态效果方面,华为针对卡片做了相应的动态效果设计,主要集中在动态效果的时长和帧间距上。在这方面,华为做了大量的研究,找出所谓的最大帧间距在什么范围内才能保证更好的流畅体验。当时华为划定了三个区域:舒适区、安全区、通过区,把最大动态帧间距放在舒适区的不同设备上,至少放在安全区内部,保证每一次变焦都能达到非常好的流畅体验。

模仿设计:物理世界和数字世界的平衡与融合

2012、2013年左右,扁平化风格开始盛行,扁平化风格的盛行也和当时的大环境有关系。回想那个年代,恰好app开始如雨后春笋般涌现,同时流量对于那个年代的用户来说也是弥足珍贵的。更轻便的app更方便用户快速下载和系统快速运行,而拟物化和图像裁剪的方式占用了大量资源,所以扁平化风格可以直接用代码实现。

此外,在内容为王的时代,APP开始注重展示内容,一些扁平化的风格帮助其减少了多余的装饰,让用户更容易关注界面内容的一些展示。

在鸿蒙系统,华为希望平衡并整合物理世界和数字世界。

在方案探索阶段,华为发现小工具等模块是很好的场景,都可以在物理世界中找到映射的对象,比如计算器。它可以将物理世界中计算器按键的感觉融入到电子计算器中,在微微凸起的按键上做出凹陷的效果,以加强用户点击按键的反馈。

同样,华为也尝试了其他小工具,比如指南针和温度计,很多小工具都使用了光拟像的效果。

针对拟像占用资源大的问题,华为通过编码解决了资源占用问题。华为在整个设计中有一个可视化的设计工具,设计师会在这里调整这个东西当前的效果,或者说哪个设计最适合当前的界面。

可视化设计工具调好后,可以直接参数化导出XML配置文件,然后直接进入APP的设计,这样就可以不用编码加载XML文件就可以还原设计效果。华为就是这样解决资源占用问题的。

舒适的鸿蒙系统Sans:105种语言是免费和开放的。

据设计师说,鸿蒙系统字体升级后的反馈是非常积极的。比如升级后屏幕变得更好更清晰;有些人也明显感觉到字体的变化。

从2019年做鸿蒙系统开始,华为就在思考要不要做一套属于鸿蒙系统自己的字体?因为定制字体需要很长的时间和大量的资金,华为可以从供应商那里获得字体授权。这是设计师面临的一个选择。

鸿蒙系统面向全场景多设备,字体也面向全场景多设备。所以原字体可能不太合适。华为决定从易读性、人为因素研究等方面做自己的字体。

那么如何实现设计的独特性呢?华为认为有两个方面。第一种是结构平衡,包括内外,空白,阴阳等。第二,笔画和书写因其随意性而具有优雅的表现力。华为认为,文笔的人文感就是这两个方面。

在笔画方面,华为认为,通过临摹法和弯钩的楷书美感,比长弯、曲笔画更明显,这些笔画经过了优美的曲线调整,并从基本笔画中提取出来进行改造。

比如看type字体或者其他加粗字体,这种字体会有一种相对人文的书写感,这是一个平衡的过程。

易读性方面,先优化字体“灰度”的感觉。写生的时候我经常眯着眼睛看一下,这样可以更好的看一下明暗。同样,如果你斜眼看字体,可以模拟一个字体看不清的情况。这时候你会发现字体所列的这些地方会有一丛丛的东西,会在这个地方形成集群。

优化后,华为稍微错开了一些结构,笔画粘连重叠的地方都单独分解了,这也是华为解决灰度问题的原因。

同时“口”部的优化,之前从宋体过来的,包括楷书,都是在口部下面凸出来的,口部很复杂。一般现在分为两种,一种是底口,一种是非底口。目前存在底口简化的问题。如果将底口完全简化,很可能无法支持整个字体。我们认为非底口可以简化,因为加这个其实会增加内白的复杂度。也就是最后的底口不变,非底口去掉了。

第三个方面是优化高频词汇的重心。对于以前用过的字体,设置的重心会在上侧。这种字体是针对移动设备和整个鸿蒙系统系统。有这些高频词,华为专门优化了这些字体。

华为的鸿蒙系统Sans字体支持105种语言,包括中文、拉丁文等。

重力效应:回到原点

动态效果设计独特流畅。在华为看来,动态效果是一门流动的艺术,华为大部分时间都在终端设备上做这样的操作,比如点击、滑动、拖动,同时在界面中也会发生一些这样的流动。

华为回到了最初的设计,探索宇宙,洞察宇宙引力的意义。从主引力观察它的物理规律,可以制造出一些运动的节奏感,它的一些吸引人的特征,以及彼此之间的一些距离感。万有引力存在于世间万物之中,它能衍生出五彩斑斓的视觉美感,神奇而独特。

比如加载动态特效的时候,华为先把宇宙做成了动态,提取了它的一些星形布局结构,再逐步在上面添加一些特效。华为增加了一些摄像头,让行星的盘旋更具投射性,扫尾的效果增强了旋转时的速度感。

在此基础上提取了一些设计效果,增加了一些灵活性。华为引入了黄道角,以地球为静态参照物,打破了其对称均衡的结构,让整个画面更具原创性。为了让这种动态更加敏捷,增加了上下浮动的属性。

在协同效应方面,华为构建了两个模型,第一个是运动模型,是每个设备在旋转过程中的速度和轨道,不同的速度围绕着它。第二步是关键的一步,就是建立引力模型。这个功能点就是用手拖动一个设备,然后连接到主设备上。

在这个功能点上,华为为了突出增强重力的主观感受,将动态效果的设计与手势相结合。当手势将球拖入引力场时,球和大球会启动联动。当拖拽达到阈值点B时,大球和小球会相互吸引,暗示设备的连接,可以增强手势操作时的操控感。

例如,在下载动态方面,下载动态的灵感来自于日食的形式。华为提取了日食后半段,从吃饭、照明到恢复,在下载安装场景中使用了这些形式。

这些动态设计的背后是引力引擎工具的支持,大大提高了设计师与研发对接的一些开发效率,设计师可以在这个工具上调整一些效果,所见即所得会将当前动态效果的多维度、复杂参数转移到RD,从而将RD效率提高很多。

定制音效:丰富华为原创标志性铃声。

鸿蒙系统使用华为手机铃声四个音节中的最后两个音节作为开机音。

华为鸿蒙系统从数字合成器开始。华为数字合成器用于模拟宇宙空间的感应和太阳的升起。太阳升起的感觉是一个向上的过程,符合刚才动画中慢慢上升一圈的感觉。

那么如何用声音表达宇宙第一瞬间的感受呢?华为创造了“丁”的感觉,给人一种所有宇宙汇聚,各种粒子汇聚之后,宇宙第一次爆炸的感觉。会有很强的空感。

铃声方面,鸿蒙系统延续了华为的四音阶,但选择了木乐的感觉。

华为的主旋律是德国制造的三角钢琴,辅助旋律是洪都拉斯木材制作的马林巴。声音由加拿大fir的单面板吉他点缀,完成整套铃声的设计体验。

华为 麦芒10 SE搭载什么处理器?-处理器性能怎么样? 华为 麦芒10 SE优缺点是什么?-值得入手吗? 华为 麦芒10 SE参数配置-详细性能分析 华为 麦芒10 SE搭载什么处理器?-处理器性能怎么样? 华为 麦芒10 SE优缺点是什么?-值得入手吗? 华为 麦芒10 SE参数配置-详细性能分析 易评机:A14芯片地表最强 苹果发布会上集剧情也精彩 华为P10 Plus钻雕蓝版真机图赏 华为P10怎么样 华为P10值得入手吗 华为P10配置怎么样 华为P10配置一览 不想选iPhone 14,还有五款国产手机也很强,用到2025年问题不大 2022年,苹果和华为旗舰手机怎么选? 金秋买点什么好?这几款手机数码产品使用后体验出色,可以参考 2022下半年换机指南:华为苹果一加小米争鸣,这四款机型很难不爱 2022年下半年想换机,三款最值得购买的国产旗舰不能错过 高端旗舰别乱选,这五款实力偏强,你选对了吗? 手机口碑很重要,这四款新机口碑较为出色,你选对了吗? 国产旗舰机怎么选?这三款性能卓越堆料足,款款都综合实力强 覆盖高中低全价位,这四款手机才是2022年的真旗舰,入手不亏 不与iPhone 14和华为 Mate 50 争风头!这四款高性价比手机,覆盖高中低三档 OPPO18年,创新科技越来越多 OPPO看着现在很多一句话重复N多篇的“洗脑式”广告 盘点3K价位几款真香机,颜值拍照都在线,每一款都很值得入手 想要买AirPods Pro 2,现在华强北耳机就能代替,但不建议入手 手机流畅度是否值得重视?OPPO Reno8 Pro上手体验感受 A16芯片被吐槽挤牙膏?游戏玩家更推荐看看这些新机 华为 Mate 50 Pro和vivo X80 Pro这两款手机怎么选择? 今天大家朋友圈最热的话题,应该就是羊了个羊如何闯关吧 iOS 16登上热搜,网友却说摆烂?现在入手骁龙8+旗舰更香 苹果14正式开售!追求高性价比,但更推荐这三款高口碑安卓旗舰
转载请注明原文地址:https://juke.outofmemory.cn/read/1749348.html

最新回复(0)