首页

AR,我们从设计说起

纯纯

今天给大家带来的分享是《AR,我们从设计说起》,希望大家通过这个分享能够快速了解AR的实现原理,AR的设计流程,以及在设计过程中遇到的问题,在最后会分享我这些年做AR设计的一些心得和技巧。




关于AR


AR这个词对大众而言并不是一个陌生的词,但是AR的实现原理是怎样的?


AR的中文名字是增强现实技术,它是一种实时地计算摄影机影像的位置及角度,并且加上相应的图像、视频、3D模型的技术。


简单来讲就是在现实世界上叠加一些虚拟信息,然后再实时计算它在设备上的位置以及角度的变化。


AR的目标是将屏幕上的虚拟内容放在现实的世界中与之互动,帮助大众更快捷更直观的去获取信息,并且AR自带强大的商业价值。身边的小伙伴经常会把AR跟VR搞混,其实AR是增强现实技术,而VR是虚拟现实技术。



AR是将虚拟的物体放在我们周边的现实环境,增强现实世界的感官体验;VR则是将我们放在虚拟的环境中,打造一个以假乱真的沉浸式体验。


它们在设备上进行划分,AR对大众用户来说参与的门槛低,操作的门槛更低,因为AR只需要拥有一部带摄像头的智能手机,便可以成为一个载体,在增强现实世界的同时,重塑用户的交互体验,而VR的设备对于大众用户来讲日常比较难接触到,需要较为专业的设备和场地。


AR技术的核心是识别与跟踪,它的实现方式分为两种:


● 图像检测法;


● 全球卫星定位系统法。




图像检测法


图像检测法其实是AR最常见的一种定位方式,经常用在图片识别和人脸的识别。它的技术实现流程主要分为三步:


Step 1:需要捕捉特征图像,算法会对图像进行规划处理,计算有效特征点进行匹配,可以看下图一,这些绿色的小点点就是有效特征点;


Step 2:从偏离的矩形算出一个三维坐标系,建立一个空间;


Step 3:实时跟踪数据内容的位置和角度的变化;


刚才讲到绿色的小点点设计师应该怎么去检测呢?这里推荐一个网站给大家 —— Vuforia,注册账号后上传设计图就可以直接将图稿的特征点标记出来,并且对其进行打分,特征点越多,识别的准确率越高。(链接在文末)



观察第一张图的上下两幅作品,可以发现它仅仅只是背景和深浅不同,形成的有效特征点也有所不同,因为算法在灰度对比度高的情况下会形成更多的有效特征点。


我们再观察第二张图,可以发现第二张图在太阳的圆形部分没有形成任何有效特征点,因为算法会排除掉一些比较平滑的曲线或元素,视为无效特征点,这种点一般出现在夹角处,所以为了使特征点分数更高,我们在设计的时候需要:


● 避免画一些比较平滑或带弧度的元素;


● 特征点需要平均分布在每一个角落。


最后看第三张图,几何云的部分重复出现在不同的位置上,它形成的有效特征点的数量和位置也一样。因为重复出现的规则图形会被算法判定为无效特征点并排除掉,所以在做设计的时候需要:


●避免用一些规则的图形和一些重复出现的元素。


图像检测的优点是简单、高效和多样性,缺点是容易受环境、光线、距离、遮挡、聚焦这些因素产生变化,会使虚拟内容产生抖动、卡顿、误判、识别慢、无法识别的情况出现。



环境光线距离就不需要多讲了,遮挡就是取决于取景的角度和范围。聚焦指的是设备,也就是我们的摄像机,我们的手机对于深色还有渐变颜色进行对焦时会较慢显现。


所以在做视觉稿的时候,其实需要满足很多条件,并且要与开发进行多环境测试、一起研讨,才能得出一张比较合格的识别图,优秀的识别图必须确保它的稳定性,还有它的识别速度。


我们来看看实际项目中是如何应用的。


在2016年的时候,团队策划了《QQ奥运火炬手》AR活动,基本上是在一个毫无经验的情况之下,不断地试错,不断地修正,在两个月内从风格到终稿花了将近3000稿,才完成六个奥运城市28张识别图的设计,可以看到DEMO呈现出来的效果相对比较稳定,而且识别速度非常快的,基本在一秒之内完成。



这里强调优秀这个词,因为我们不希望用户第一次接触AR时就造成一些挫败感,导致对新技术的体验产生抗拒心理,所以对识别率的速度还有稳定性做了相当多的调试,当时也获得了世界吉尼斯纪录的证书。



这是以前的一个小DEMO,通过手机的扫一扫识别一层一层传递的过程。刚才说到图片检测法的图像场景,现在再看一下纹理识别的场景,人脸识别其实就是图像检测法的边缘检测,它可以检测出人脸的部位,同时跟踪这些部位进行运动,把虚拟的内容跟肢体做无缝的贴合。 



比如说经常用到的特效挂件,大家看到市面上的一些美颜APP都有些什么样的能力呢?


● 实时美颜


● 脸部贴合


● 动作触发


● 脸部变形


● 换脸、扣脸


● 氛围滤镜


● 3D模型


其它便不一一阐述了,相信大家也有所了解。



针对QQ的一些社交场景,我们团队也做了QQ特有的一些特效挂件,例如可以在QQ的聊天界面中的拍摄功能,还有聊天,都可以在视频聊天看到,玩到。还有利用AI还有AR的结合,在两人通话中做了一个小游戏,通过做表情赢取对方的红包。



全球卫星定位系统法


全球卫星定位系统法是是利用GPS去定位我们所处的位置,在真实的空间里寻找一个平面,可以现实世界中跟虚拟物体进行互动和观赏。


优点是适合于室外的跟踪,可以克服在室外场景中光照,还有聚焦等不确定因素,而缺点是很考验设备的性能,包括当前网络的环境。


可以看到这上面有两个比较陌生的词,一个是LBS(Location Based Service),一个是POI(Point of Interest)。LBS其实是基于移动位置服务,配置服务GPS获取位置的一个方式。有些AR的游戏是基于LBS去实现的,它们所用到的实现方式也就是全球卫星定位系统法。而POI就是一个兴趣点,它在地图上可代表是一栋大厦,一个商铺或者一处景点等等,它包含四方面的信息,就是名称、类别、坐标和分类。


这个是16年日本做的一个AR游戏,相信大家都有玩过。



这个游戏是利用全球卫星定位系统法去实现的一个游戏,为什么给大家看刚才的短片,是因为腾讯2017年新年QQ的一个运营活动跟它的玩法特别像,都是基于一个地图上去寻找一个红包或者一个宝藏,然后找到这个位置,再通过完成一些任务去获得这些红包或者礼品。



做这个运营活动的时候,需要去考虑如何体现AR的空间概念,譬如说要合理利用一个真实的空间,因为设计师出的设计稿再也不是750×1334的尺寸了,它是一个真实的空间,需要把这空间进行拓展,去引导用户移动手机镜头,跟踪这些虚拟物体进行移动和互动。


我们可以通过物体的走向去体现一个空间感,譬如说从远到近,从左到右,从上到下等方式让用户移动起来。



在地图的引导上,可以从远近这个层次去打造一个三维空间,譬如说离我们比较近的AR点的时候,需要强化我们的信息,做一些差异化的动画引导,再远一点的地方就只需要给一个简单的贴图或者简单的元素告知用户,远处也有一个红包,或者礼品。 




IP的力量是非常强大的,当时使用了QQfamily的baby Q作为财神形象给用户发红包,它的作用是可以跟用户产生一个平等的对话,陪伴用户一起完成一些任务,建立一个平等亲密的关系。



在2016年的时候,通过《QQ奥运火炬手》活动,一推出QQ就被称为是国内首个AR用户超过1亿的社交应用,整个活动吸引了全球一百四十三个国家的用户,跟AR的互动超过将近两亿次。


在2017年的时候《QQ天降红包》运营活动用户量超过3亿,半年间就收获业界还有一些用户的良好口碑,QQ是一个很年轻的产品,它的用户大部分都是学生。通过这样的活动跟新的技术做结合,我们成功将QQ的品牌升级为年轻化,娱乐化,还有科技化。


过去的设计手法就是从图形,动画还有色彩上做一些创新。现在我们加入一些新的技术,比如说AI、AR、音效和物理震动之后,可以升级用户的一些感官体验,使设计更加沉浸式,更加娱乐化。


把AI跟AR做一个很好的结合,是因为更好的AI需要更好的AR去体现。


那么大家都说AI就是AI,AR就是AR,其实这个说法是错的,因为它们的关系非常密切。如果我来作比喻的话,


「AI就是人的大脑,AR就是人的一些感官体验」


跟这些新的技术做结合,会使得设计和活动会有四个优点,那就是话题性,串联性,沉浸式和娱乐化。


通过一些新的技术给用户带来的新鲜感和话题性,再把一些时间音效还有振动影像这些元素有效地串联在一起,让用户身临其境,更加专注在操作当中,更加强化整个设计,整个产品的趣味性,也提高整个产品的娱乐价值。


去年世界杯的时候,我们推出了《QQAR穿越赛场》。



相对奥运而言,世界杯并不是全民都会关注的一个赛事,所以当时用了很大部分的时间来做用研,想方设法去提升用户的参与感。我们对用户的行为和心理进行分析,希望能通过新的交互形式和新的技术让用户更好的参与进来。


在做运营设计的时候,需要从三个部份去策划:


● 如何去吸引用户;


● 在用户体验的过程中如何制造一些惊喜;


● 希望用户在最后有一个想要抒发自己的欲望的出口,将活动分享出去。


那如何去吸引用户参与活动呢?可以利一些视觉线索,突出一些重点信息,通过差异化的设计去满足用户的好奇心。譬如说,利用一个足球的运动轨迹引起用户的注意力,让用户产生好奇心,去点击入口,到第二个页面的时候,需要告诉用户具体的活动内容,这是比较轻的设计手法,比较直接的方式是在登录QQ之后,直接给用户一个活动预告。



这个需要结合QQ扫一扫的界面,并且跟活动里面的场景结合起来,打造一个新的UI风格。我们可以透过一些色彩质感和执行动画告诉用户,这是一个充满科技感的运营活动,一个新的UI活动风格,一个新的科技感风格。



沉浸式体验,往往也包含人的感官体验和认知体验。


我们需要从大众的一些记忆里面提取一些设计元素,基于现在的场景、应用做结合。那么我们如何去提取用户的一些记忆元素?可以通过我们记忆中一些片段去提取它的色彩、质感,还有声音、图形、运动方式、光学和力学这样的特征去和设计做融合。


说起穿越这个话题,大家也会想到哆啦A梦的穿越门或者哆啦A梦的时光机,还有些用户就会想到我们近年来比较火的奇异博士其中的一个片段,我们抽取奇异博士打开穿越门的片段提取一些设计元素,譬如说它的运动方式,力学和光学特征。



首先我们需要去教育用户“空中画圈”,“空中画圈”这个词大家应该都不难理解,当时请了很多深大学生去公司做用研,当时试玩这个活动的时候,发现很多同学都不会玩,不是说大家没有看过奇异博士,也不是说大家对AR没有接触,是因为这种新的互动形式会让用户的心理造成一个不确定因素,并且怀疑自己的判断,大家更多的习惯直接在屏幕上画圈,而不是举起自己的手,在空中画一个圈,开启穿越门,甚至有一些同学直接手反过来一直在扣摄像头,都会有这种情况出现。


因此才会让我们的设计更加客观,我们自认为很好理解的事情,其实对于一些大众用户来说,并不容易去实现。



在此次研究的基础上我们做了图文的结合,到最后不断优化了十几个方案,不断地去找学生做用研,最后得出了一个解决方案——模拟一个真实的画圈场景。做了一个动画,并且加上简洁的文字和操作的反馈来引导用户操作,同时也支持用户屏幕画圈,可是扣摄像头还是做不到的,这是为了避免用户在试玩的过程中会发生一些中断。


关于AR画圈在设计师的工作来说,设计这个点的动画好像很简单,其实它特别困难。开发同学需要考虑手机性能以及QQ引擎等问题,为了确保用户的流畅体验,设计可能需要做一些牺牲。


当时我们有一个限制,动画必须保证在5到8帧之内。但是它会出现卡顿,色差,模糊,生硬这些情况,并且我们用AE的粒子效果去做一个动画的时候,跟开发实现的原理其实不太一致,所以我们要不断去跟开发做调试跟还原效果。再者比如说AE里面的粒子效果导出PNG之后会有很大的色差,这些都是需要不断去修正和想办法解决的。


我们在多方面调试下,修正方案,寻找解决的方法,最后做出了一个相对比较满意的效果。


在空中画圈之后,它会立马形成一个3D立体的穿越门,这个穿越门可以让我们360度地观看,并且可以在现实还有虚拟场景中来回穿梭,这需要很多的面片去做一些贴图处理,但是会遇到技术上的问题,所以只能用最精简的方式去达到我们理想中的效果。



对于一些引擎还有技术的限制,需要想很多的方法去将资源整合。譬如说从AR画圈到AR穿越门,再到一个虚拟的AR赛场,其实是有四段不同的资源合成的,需要严格去把控整个时间的进场和退场。 



第一步:需要想方设法去用一些巧妙的手法让它过度自然;



第二步:如何让用户感觉到身临其境,可以从视觉、听觉、触觉这三方面去提升用户的感观体验;以第一人称的视角能够360度去观看整个AR赛场,然后再配合现场真实的一些音效,像是解说员的旁白,还原一个真实感;



第三部:触感。触感的设计我们知道自从IOS升级之后,手机有强、中、弱三挡的振动,我们利用设计这些振动的频率,还有长短还原踢球,球击龙门还有球在草地上来回滚动的触感,主要目的就是提升用户的真实感;



第四步:如何去增强用户的分享欲望。除了从质感上去打造真实的报纸质感之外,我们根据用户的一些阅读习惯去把内容排版起来,分布在每一个角落。再来我们根据整个国家的球服配色,不同的赞扬文案,还有用户画圈的过程,会有视频录屏把这些元素整合在一起,打造一个魔法报纸,以这些个性化的设计去提升用户的参与感,让用户有一个分享的欲望。





设计心得


关于AR的设计流程的建议:


● 在定义玩法的时候,交互和操作要尽量的简单,降低用户的参与门槛与操作门槛,不要让用户形成挫败的心理;


● 在交互阶段的时候,我们通过用研定出最佳的新手引导方案,确保用用户懂得玩这个活动;


● 在视觉阶段的时候,需要预留时间给开发做测试,反复去调试还原视觉效果,AR的设计原则其实跟大部分设计原则都是一样的,它是一个金字塔的三角形关系,首先要确保应用性,应用性就是要有一些简单明了的操作,还有一些引导暗示用户是会使用AP或是会玩这个活动的,避免用户的心理造成一些挫败感;


● 稳定性。需要确保整个体验流程是通畅的,要多维度的给到一些操作反馈,避免用户在体验过程中发生意外或者中断;


● 最后才是愉悦感,通过设计的手法让用户得到一些娱乐感和满足感,沉浸其中,忘记真实世界的场景。


关于AR沉浸式体验的建议:


● 情景:需要设计背景或剧情去吸引用户,让用户产生一个探索的欲望;


● 空间:需要合理的去利用真实的空间;


● 情节:需要明确一些比较细节的目标,让用户的行为有一些特别的反馈,让用户对整个体验有着绝对的主控感;


● 角色:可以通过创建一些角色关系,情景化的设计,去提升用户的参与感;


● 氛围:可以从视觉,听觉,触觉三方面去提升整个体验的愉悦感;


● 节奏:从简单到挑战,需要慢慢循序渐进的使得用户集中精神。




结语


 最后就是我在做AR项目的一些反思。


之前我经常就会觉得设计师的工作只是考虑怎么包装这个APP,怎么包装这个品牌,怎么做好看就可以了。其实并不是的,我们需要考虑用户的一些体验问题,还有我们要具备一些产品思维,所有跟新技术去做融合的设计是有很高的风险,一个好的设计其实是选择众多条件下的最佳方案。


我们在设计过程中会遇到很多困难、很多限制,而且需要用设计去解决一些技术问题,我们会把这些限制设为思考问题的出发点,提供一个更完善的方案,同时我也相信科技是跟技术在不断的进步,所以有一天我们可以做到我们理想中的设计。

来源:站酷     作者:腾讯ISUX团队
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

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


虚拟现实、数字孪生……医疗元宇宙场景有哪些应用?

蓝蓝设计的小编

元宇宙概念自被提出来之后,就引发了各行各业的关注,不少行业也开始与“元宇宙”应用结合,试图发掘行业前进的更多可能。那么,当医疗行业和元宇宙碰撞之后,可以产生哪些火花?在医疗元宇宙场景下,又可能出现哪些应用呢?

潮流是个轮回,这些UI设计趋势你怎么看?

ui设计分享达人

潮流是个轮回,不光我们看的衣服、化妆品、哪怕是那些短视频,同样的事情也发生在用户界面(UI)设计中。从模仿现实世界物体的界面到没有任何修饰的极简界面,不同的风格优缺点各异。只有学习并了解了历史上曾流行的趋势,你才能进行新的尝试。这对于创新、推动设计行业的发展和提升你自己的设计能力都是至关重要的。下面本文将介绍十大UI设计趋势,对每位设计师来说都值得一看。

1.拟态主义

拟态主义是用来设计最早的图形用户界面的视觉方法。在拟态主义中,设计元素模仿现实世界中的对应物来连接物理世界和数字世界。最著名的例子是回收站的图标,它模仿了现实生活中的回收站。

当个人电脑或智能手机首次出现时,设计师需要将它们设计成第一次使用的人也能理解的样子。因此,拟态主义设计将与现实世界的相似性置于视觉吸引力之上,以确保直观的用户体验。

苹果公司的iOS操作系统便在早期版本中于用户界面上大量使用了拟态设计。

早期苹果app和软件的视觉界面模仿现实生活中的物体,就算是首次使用的用户也能一眼就看明白

2010年初之前,拟态设计是行业标准。这种设计美学大大方便了人们过渡到数字平台。但随着越来越多的人成为数字原住民,缺乏想象的设计元素对用户体验而言变得不再那么重要。此外,因为高度拟真,所以拟态主义设计元素需要大量的技术能力。人们数字素养的提升为新的UI设计风格兴起铺平了道路。

2.极简主义

受极简主义艺术运动的影响,UI设计领域也开始刮起极简的风潮。极简主义的主要原则是 “少即是多”。极简主义并不是空洞和模糊的设计。它推崇的是 “少即时多”–正如美国作家Joshua Becker的书名所言–意味着要简化视觉空间,换句话说,使用更少的元素,以便能够突显最重要的东西。

极简主义界面优雅简洁,注重每个元素的功能,重视负空间和大胆的颜色、字体之间的组合。总的来说,极简主义的用户界面可以非常实用,因为没有任何装饰性元素。因此–如果设计得好的话–用户会有一个高度直观的设计之旅。极简主义界面往往拥有一种优雅而精致的视觉吸引力。

作家Alan Trotter的网站采用了极简UI设计,用户需点击突出显示的单词来查看隐藏内容

极简主义于20世纪50年代末在纽约兴起,其主要特征是秩序、简单和和谐。极简主义的 “少即是多 “原则后来被德国工业设计师迪特尔-拉姆斯改编为 “少而精 “,列为他的“好设计原则”之一。也有人解释这一原则为:”好的设计是尽可能少的设计”。

“一个形状、一个体积、一种颜色、一个表面,它们是独立存在的,不应该沦为整体的一部分。形状和材料不应该被它们所处的环境所改变。” – 唐纳德-贾德,美国艺术家

除了极简主义本身,许多其他的UI设计趋势–包括扁平化设计–都或多或少地遵循了极简主义的原则。

3.扁平化设计

扁平化设计是一种以简约为中心的UI设计美学,它将界面设计的范式从现实中的物体转移到元素的图解简化。这种UI趋势代表了一种实质性的技术优势,尤其是在移动设备上,因为它提升了设备的加载速度。扁平化设计使用极简的方式处理UI元素,不添加任何阴影或装饰物。在个性和视觉吸引力上,扁平化设计很大程度依赖于明亮的色彩和高超的字体排版技术。例如,设计师会寻找本身便足够有趣的字体,但它们的笔画要均匀,并且符合极简美学的风格。

扁平化设计在2012年随着Windows 8、苹果的iOS 7和谷歌的Material Design的发布而获得关注。然而,在某种程度上,扁平化设计缺乏视觉功能可见性,用户有可能不知道哪些元素可以互动。

iOS 7控制中心采取扁平化设计

2.0版本的扁平化设计诞生后,其视觉功能可见性和使用性得到提升。扁平化设计开始利用微妙的阴影或颜色变化来突出互动元素,向用户表明如何与设计进行互动。这些微妙的变化有助于增加深度和维度,从而提高使用性,扁平化设计的视觉效果干净整洁不杂乱。

4.包豪斯主义

包豪斯界面设计风格围绕几何图形如半圆形、圆形、矩形、三角形等展开,采用各种创新字体和非干扰、非功能性的细节。这种设计风格依赖于设计元素本身:线条、形状、颜色。包豪斯主义的特点为抽象的形状和平衡的形式。

1919年,德国魏玛开始了包豪斯艺术和设计运动,从而衍伸出了包豪斯用户界面设计风格。包豪斯艺术和设计运动通过将手工业与艺术相结合,在艺术与工业之间架起了一座桥梁。包豪斯运动的基本原则是 “形式服从功能”。这一原则深刻地影响了后世的设计。根据这一原则,从物体的预期功能或目的出发,设计师设计出简单的几何图形,从而制造出一种极简主义美学。它倡导的是一种几何的、抽象的风格,没有什么情感或情绪,也没有什么历史元素。

包豪斯风格下的数字界面有一种优雅、现代和简洁的视觉吸引力。

“将包豪斯原则运用到现代产品设计中,意味着要勇于面对纷杂的质疑。”- Melanie Daveid,用户体验设计师和艺术总监,以及Adobe Live主持人

5.深色模式

深色模式的用户界面令浅色文本位于深色背景上。这种颜色方案减少了设备屏幕发出的亮度,一些研究指出,它有助于通过减少眼睛的疲劳来改善人体视觉。这种能潜在改善眼睛疲劳的功能对于用户需要阅读大量内容的界面特别有帮助。而且深色模式在一定程度上有助于节约电量。深色主题界面的诞生是对暗字明底方案的反击,后者模拟了墨字白纸的外观。

深色模式趋势出现在2016年,当时Twitter试验了一个暗色底的颜色方案。不过,在深色背景上使用亮色文本的操作其实早已出现–比如说《黑客帝国》电影中深色屏幕上的绿色数字。但深色模式真正流行开来是得益于苹果。苹果公司在iOS 13的更新中发布了深色模式选项,从那以后,深色模式成为许多界面中的常见选项,用户可以在浅色和深色界面之间进行选择。

深色模式vs浅色模式

深色模式的用户界面具有鲜明、时尚和现代的特征,对眼睛更加温和。因此,深色模式的流行可能缘于解决用户用眼过度问题的需要。如果你的产品需要用户长时间观看屏幕,不妨考虑添加一个深色模式选项。

就拿深色模式来说现在身边很多朋友都在用,所以我们以前不喜欢的,在未来的某一天还是会重新爱上的。

作者:马克笔设计留学

转载请注明:站酷

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


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



iPhone 14正式发布!从设计师角度聊聊苹果的灵动岛功能

ui设计分享达人

苹果的发布会经常会被视作为「科技春晚」,而如果你看过几次,大体上还是能够看出一些套路的。最近几年的发布会,基本上都会让最小的 Apple Watch 系列先来暖场,然后才会上诸如 iPhone 和 Mac 这样的重头戏。

iOS 16 UI设计 交互设计 灵动岛

在 Apple Watch Ultra 为整个发布会打出一波小高潮之后,新的 iPhone 14 从造型、配色到芯片上的「摆烂」,让人感到苹果的9月特别活动开始进入了一种疲软的情绪。

iOS 16 UI设计 交互设计 灵动岛

直到 iPhone 14 Pro 出现,全新的打孔屏替代了刘海,「灵动岛」在交互上的突出表现,透出了屏幕,iPhone 14 所带来的疲软氛围一扫而空,以设计闻名的苹果再一次将「你大爷始终是你大爷」打在公屏上。

iOS 16 UI设计 交互设计 灵动岛

交互设计的野心

必须承认,苹果在交互设计上的野心从来未曾淡褪。

iOS 16 UI设计 交互设计 灵动岛

最近几年,iPadOS 系统从 iOS 系统当中独立出来,大屏触控交互连年升级,iPad 就点名道姓地顶着 Mac 产品线来竞争了。iOS 系统也开始在系统个性化和美化上越走越远,去年 Safari 的交互升级苹果狠狠的秀了一波操作:

而今年 WWDC 上,「前台调度」这一新交互干脆把性能门槛拉到最新的 M1 芯片级别,让性能为交互体验作出牺牲,虽然不少人诟病,但是也足以看出苹果在交互设计上的认真。

iOS 16 UI设计 交互设计 灵动岛

桩桩件件,苹果在设计上的骚操作,正经是没有停过的。

老实说,早在 iPhone X时代,使用挖孔屏的 Android 手机厂商就没少嘲讽 iPhone 的刘海,这回「灵动岛」这套高成本交互设计方案狠狠压在 iOS 打孔屏上,苹果算是怼着过去几年 Android 打孔屏的友商们的脸一顿输出,把正确答案糊在对面脸上,一点不客气。

iOS 16 UI设计 交互设计 灵动岛

挖孔屏交互的设计公约数

iPhone 系列从 iPhone 14 Pro 开始,肯定是要革除刘海,启用挖孔屏了。「灵动岛」这套设计不仅仅仅只是针对通知系统的重新想象,它将通知系统几乎修改成了一个随时待命的弹窗通知系统,它自动叠加在界面层之上,可小可大,可以模态也可非模态。也正是因为这一点,整个围绕着「灵动岛」存在的即时通知系统的复杂度,比起之前的通知弹窗复杂了不止一个数量级。

iOS 16 UI设计 交互设计 灵动岛

iOS 16 UI设计 交互设计 灵动岛

首先,在绝大多时候,「灵动岛」会向两边拉长作为基础的状态展示,通过图标和数据构建出一个典型的非模态的提示框:

iOS 16 UI设计 交互设计 灵动岛

比如 Airpods pro 的电量

iOS 16 UI设计 交互设计 灵动岛

比如指示距离

不过在导航模式之下,为了更加清晰地提供视觉指示,「灵动岛」还会拓展成更大的非模态视觉提示:

iOS 16 UI设计 交互设计 灵动岛

而对于不同类型的 APP,在非模态的状态和信息呈现上,还有一些特征性的元素,「灵动岛」会提供不同的弹出框样式来尽量贴合不同的需求,比如 Face ID 就是方形的:

iOS 16 UI设计 交互设计 灵动岛

而作为第三方参与到这次的 「灵动岛」演示的APP ,Lyft 还展示了「灵动岛」在长条模式下的多状态呈现的样式,比如 Lyft 和通话单独存在以及同时存在的时候:

iOS 16 UI设计 交互设计 灵动岛

iOS 16 UI设计 交互设计 灵动岛

iOS 16 UI设计 交互设计 灵动岛

「灵动岛」甚至有分裂样式来支持多样状态的呈现。

而在可以交互的模态弹出框上,目前「灵动岛」在演示中还仅仅只提供了通话、音乐等常见的样式:

iOS 16 UI设计 交互设计 灵动岛

iOS 16 UI设计 交互设计 灵动岛

而在发布会上,还提供了视频通话、倒计时等一些系统自带功能在「灵动岛」上的模态交互展示,这也意味着可能在当前,「灵动岛」暂时还没有打算开放出太多的可交互的功能,相反苹果更加倾向于控制好当前这一功能的复杂度和稳定性。

iOS 的通知设计迈向次世代

作为刚刚问世的动态交互控件,「灵动岛」和刚刚问世时的「桌面小组件」的待遇是类似的,带有通知和展示性质的非模态弹窗通知,会相对更多一些,一些涉及交互的模态弹出通知,类型会有所控制,就目前官方展示的功能而言,可交互的数量并不算多。

但是就和如今的通知栏、桌面小组件一样,可交互的控件类型会逐渐增加,而「灵动岛」作为一个固定的硬件缺口,在 UI 界面当中,则逐渐变成了一个实体的即时通知控件「核心」,这种转变无疑是化腐朽为神奇,将瑕疵变为优势。

iOS 16 UI设计 交互设计 灵动岛

但是就「灵动岛」本身作为状态呈现、偶尔交互的控件,它更多是作为现有通知体系的一个补充,而非替代。另外,在新的下拉通知界面的设计上,常驻信息呈现会集中在屏幕上端,而推送通知则会在更加触手可及的屏幕下半部呈现。

iOS 16 UI设计 交互设计 灵动岛

与此同时,它还针对通讯类的 APP 进行了专门的样式优化:

通讯类 App 的通知现在具有独特的外观,这些 App 在征得用户许可后,可同步它们的状态,以反映用户当前的系统级专注模式状态。

在这种情形之下,iPhone 本身的硬件完整性,会进一步往前推进,可以预见到的是 iPhone 15 系列可能会全面使用挖孔屏,「灵动岛」将会接管多数的状态指示性的通知。而对于设计师而言,APP 的通知系统的功能设计要求和工作量,则会继续往上提升一个层级。

说道这里,我不由得想起了当年为 Macbook Pro 所适配的 TouchBar 这一功能。

和 TouchBar 同源不同命

TouchBar 和 「灵动岛」在某种意义上是类似的,两者都是「作为副屏拓展交互并指示状态」而存在。但是 TouchBar 在键盘上,某种意义上挑战了用户的习惯,违反了日常交互时候「所见即所得」的基础逻辑,用「灵活性」挤占「可靠性」的空间,最终被放弃。

iOS 16 UI设计 交互设计 灵动岛

「灵动岛」在 iPhone 14 Pro 的情况看似相似,实则有根本性的不同,它是将一个几乎无法被忽略掉的物理「窟窿」相对优雅的转化为一个实用的状态指示、快速交互的功能,成为了更好的系统补充——毕竟对于一个屏幕上的窟窿而言,但凡是能给用户多提供一点便利,就算是赚回一点印象分了。

结语

iOS 16 UI设计 交互设计 灵动岛

当然,在不需要状态展示的日常状态下,这个挖孔屏上的窟窿还是个窟窿,遮瑕并不能让瑕疵彻底消失,但是很多时候,用户在意的是态度和巧思,不是么?

作者:陈子木
来源:优设

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

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

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

元宇宙视角下,AR究竟到哪一步了

ui设计分享达人

如果说去年到今年科技领域的概念,元宇宙一定是最亮眼的那一个。 然而我们看到市场上的产品,扎克伯格奇丑无比的元宇宙自拍;包括大家都知道XR好像和元宇宙有些关系,但是XR本身好像也烟消云散了 那么元宇宙是否也是一个资本炒作的噱头呢?它和AR究竟发展到什么地步了?设计师能做什么?

本文分为以下3个部分进行讲解:



和当时的“VR元年一样”(当时VR比其他R更火),在去年“元宇宙元年”被提出之后的今天,同样浮现了许多诸如:“啊,这不就是AR嘛,果然是资本炒作的噱头”之类的声音,那我们首先结合以上片宇宙的概念来看看他们为什么这么说。






以上文字来源于百度百科的解释,这里面有两个重要的关键词:虚拟现实世界和数字化身。这两个词可以说就是元宇宙的命脉。

诶,但是这两个事物新鲜吗?它们像什么?

我们的游戏玩家发言了:这不就是MMO RPG嘛。

对,这就是为什么腾讯网易都在积极部署自己的元宇宙,腾讯的QQ元宇宙,网易的瑶台。它们拥有行业上的先发优势,比如游戏引擎、比如三维能力。可以说,在内容这一块,游戏行业的一只脚其实早就踏入元宇宙,你在玩原神的时候,世界不是虚拟的吗?你的人物不是代表你吗,除了虚拟人部分还是写好的程序,AI智能程度不高,和metaverse也没什么区别。这时候我们得出结论:害,元宇宙就是rpg游戏嘛,果然是个噱头。


是这样吗? 是,但是不全是。



我们来看两个元年,去年2021年被称为元宇宙元年,而在这之前的2015年被称为XR元年。

那一年我上大一,我就是从那一年入的XR的坑。看着铺天盖地的VR的新闻,还在学交互的我琢磨着,woc,这玩意儿就是未来。2015年,

hololens和htc vive的推出,标志着VR和AR技术不再只停留在实验室,他们可以开始商业化探索了。实际上VR的诞生比之前说的雪崩更早,他在上个世纪60年代就被发明出来,被称为“达摩克利斯之剑”,这在很多VR科普的文章中都被讲解到了,感兴趣的朋友们可以去查一下VR的发展史。

而2021年,nft作为具有唯一性特点的可信数字权益凭证红极一时,紧接着web3作为去中心化的新型网络模式,虚拟人作为元宇宙中的人物形象,跟随元宇宙一起被大家所知晓。

这些本来在小众技术圈的研究其实都在“元宇宙”概念之前默默发展了,但由于元宇宙被资本市场挖掘。这时候有许多人发现,元宇宙好像真的可以开始做了。



我们再来看一下两根曲线,他们分别是是2018和2022年,由世界著名咨询和趋势预测机构gartner发布的曲线,看过这个我们就知道为什么XR似乎消身匿迹了。每一项技术的诞生基本都逃不过资本对概念的炒作,这是他们第一次让实验室外的人知晓。但随后都会进入一段漫长的产业深耕期。不明真相的围观群众看到的是又一个噱头陨落了,但是这些被资本堆积起来的无数企业却在默默地开始他们的长征。比如在AR头显领域,他们中大多数会像影创、NORTH一样陷入困境,但也有少部分探索到可行的商业模式得以生存。有很多技术都在质疑声中慢慢走向成熟。

以另外一个今年很火的概念虚拟人为例,在虚拟人中有一项非常重要的技术:让虚拟人开口说话的“语音-口型”技术,它的实现路径中,许多技术都在近年来快速发展,比如GAN(生成式对抗网络)、动作捕捉、包括基础的建模、TTS(文字转语音)等。



然后我们再来看XR,首先用一句话讲明白各种R的定义:下面的这张图是许多XR论文中都会引用的“虚拟-现实连续体”,其实我们熟知的VR(虚拟现实,virtual reality)、AR(增强现实,augmented reality)、MR(混合现实,mixed reality)都是其中的一种程度,越靠近轴的右侧,越接近真实世界。而XR则是他们的总称(扩展显示,expended reality),我今天主要想分享和元宇宙最相关的AR。



虽然很多产品广告都是以实物为准,但是基本上下面视频里的画面都是真实的。这里的hololens是世界上集成度最高的AR设备,然而他很贵、很重还有各种技术上的限制。下方的是今年U设计周国内顶尖AR头显厂商Rokid介绍的和钉钉合作的办公视频,这张图中我注意到的重点是那根连接HMD(头戴式显示器,头显)的线。没错,他们把头显连接到手机,用手机的计算可以大大的减少整个AR-HMD的重量,而重量之前一直是一个老大难问题。事实上,近年来有许多AR-HMD都采用了这种连接手机的方式。又或者专注于某一垂直领域,比如只做工业生产中的识别扫描等等,这些都可以极大的提高设备的性能,减少设备重量,优化用户体验。






比如今年新发布的这两款AR-HMD,oppo通过做减法,让眼镜只保留基础的增强显示信息的功能;nreal通过连手机让眼镜外形到达了不再像hololens那样中二的程度(虽然在功能上nreal似乎和VR没什么区别,缺少和现实世界的交互)。此外,他们各自也有光学上的创新与专利。

因此,我们可以发现,XR其实并没有销声匿迹,他们一直在不断的迭代自己的产品。到现在这种和普通眼镜无异的产品形态,已经和刚出来时又了很大的进步。






说完了XR的发展后,接下来说说,现在XR还需要解决的问题。下方是XR当前遇到的一些难题和困境。

首先是价格问题,现在的AR一体机价格依然非常的贵,只能作为一款企业级的产品卖给B端,军方。比如hololens与美国军方签订了4.8亿美元的订单;罗克韦尔自动化通过AR提高了员工的培训效率。

FOV(field of view),视场角。作为HMD(head mounted display)的一项重要评价指标,在增强现实的HMD中受到极大的限制,我们可以看到右上方的这幅图显示的是代表目前AR头显的最高水平的微软hololens和magic leap。其中hololens2的FOV是最大的,有43*29。但是人的正常视野范围大约有水平210*竖直150.这就会导致下图的这种情况——用户因为FOV问题错过视野外的虚拟信息。在下图中用户通过AR识别展板,看到展板上的虚拟按钮,点击后左右两侧都出现了虚拟信息,然而由于FOV问题,用户实际上看不到两侧的额外信息,导致用户体验不佳。


而为了解决这个问题,现有的研究提出了各种方法,如下图中的作者Marquardt等人连续5年发表相关论文,通过在AR头显上安装震动器、耳机等外设,利用触觉和听觉暗示用户虚拟目标的方位。

而在软件交互层面,有许多研究致力于使用雷达、小地图、3d箭头等和游戏中相似的方式,帮助用户找到空间中的虚拟目标。

晕动症也是一个老生常谈的问题,但是这一症状在AR中并不明显,这可能是因为使用AR时用户可以看到现实世界。而对于AR来说,设备重量和电池续航问题更为严重,Hololens2的持续使用时间实测仅为4小时左右,并且当事业中的场景或虚拟物体较为复杂时,还会导致主机很烫,佩戴体验不佳。

最后想和大家来探讨一些作为设计师,这些先进技术要到来时,我们可以做哪些准备。

很显然,XR带来的空间界面将突破传统用户界面的方式,打破屏幕,将信息融入现实世界,增强用户获得信息的途径,增加信息的维度。这一颠覆性的显示技术变化,势必会带来交互设计上的变革。再对空间界面进行设计时,势必会带来许多2D时代未曾考虑过的问题,比如信息与自身的空间相对位置,多模态的信息提示,用户负荷,人体工学等等。因此赶在技术成熟之前,预想出一套全新的交互设计规律,可以为技术的爆炸性突破做好准备 —— 一旦技术普及,相关应用立刻投入生产占领市场。以下为一些个人对AR设计的扯淡。

首先从交互形式上来说,XR的理想状态应该是可以支持多模态的交互形式,包括视觉的注视眨眼、听觉的空间音效、头部的追踪跟随、手势的识别、身体运动时的空间识别等等。甚至也有研究通过电极模仿味觉、香氛模仿嗅觉,达到五感沉浸的效果。

请注意,这里的每一个通道的设计都需要被考量。举些例子:比如在进行听觉交互时,需要考虑到提供空间音效的HRTF技术可能存在前后混淆的问题,玩过吃鸡(或其他FPS游戏)的玩家可能会发现,有时候无法分辨敌人来自正前方还是正后方。而对于头部旋转、身体运动,需要了解,人的脖子、躯干拥有最大扭转角度,如果用户在坐着的使用场景中,则需要考虑虚拟信息最多能被放置在多少大的范围内。对于手势交互,应尽量避免一些手势冲突,因为现在的手势识别技术在有些时候不那么精准。这在我们的平面交互中也会遇到,比如一些热区、滑动和点击问题。

在进行视觉引导时还会存在各种物理、生理甚至心理上的交互规则,比如之前提到的小地图和箭头,它们分别属于外中心和内中心的视点引导方法——小地图是以空间中的其他物体为参考对象,比方杯子在桌子上;而箭头是以自己为参考对象,比如杯子在我前面。研究表明内中心的参考方式在视觉搜索时间和任务符合方面都优于外中心。

视觉交互中,需要结合设备大小和人的中心视野范围,考虑将层级重要的信息置于视野中心。因为人的视野大小本身也是有极限的,下方的图从小到达依次为:hololens的横向FOV,人的双目中央视野(可以容易的观察到立体信息),人的总体视野,以及转动头部时能看到的最大视野。此外,请尽量将信息布置在人体周围的球形界面中,以保证用户在旋转视角时,界面、字体的尺度大小保持一致性。

和2D界面一样,在空间中也有信息层级,除了常规的平面信息层级之外,空间界面中还有“深度”概念。

关于色彩,在AR头显中目前存在一些极限值,比如明度和不透明度低于一定值时人就很难分辨了,这是因为ARHMD的镜片本身也存在一定的透明度。我们可以采用一些卡片式(或者在AR中应该称为模块化?)设计,在信息底部叠加对比强烈的底色,保证信息的可读性。

然后是模型设计,右侧为前段时间扎尔伯格的离谱自拍,奇丑无比的外形被人喷的体无完肤,并且META中的小人都是没有脚的,这加强了吃瓜群众认为元宇宙就是噱头的心理。除去meta可能把黑红作为营销策略的想法之外,有可能是出于性能和技术的考虑。

首先出于性能,前文说过复杂的场景可能会导致场景卡顿,因此可能这张照片只是内部测试时为了高效而选择了Low poly(低面)风格的模型。其次在技术方面,由于VR眼镜目前大多都是坐着玩的,摄像头没有办法识别到用户的脚。并且用户的头部有头盔,手上有手柄,因此可以大致模拟出上半身的大致姿态,而脚的可穿戴设备似乎还比较匮乏。另外也有官方说法是,在原宇宙显示下体可能会导致一些“伦理”问题,emmm。

但其实从识别技术来说,微软在16年就可以实现全身的远程对话了。

说了这么多,可能大家会觉得AR好像是开发的事儿,设计师能做的事目前还不多。但事实上,要想实现一个AR的demo并没有这么困难,运用现在已有的软硬件能力,我们已经可以快速的开发出一些AR原型。这些工作有点类似游戏行业中的技术美术(TA),AR的普及需要更多的杀手级应用,这其中也一定需要各位设计师朋友的支持。学习一下unity、unreal引擎,包括Nvidia的ominiverse都在帮助设计师更好的创作内容。

再来看些老生常谈的AR应用场景。


第一张图是今年的ucan中使用的AR会场,可以在上面看到不同嘉宾的信息,还可以和他们互动、点赞。不过他的信息是360度呈现的,考虑到会场大伙都是坐着的,而且转头拿手机对着别人的脸是不是也不太礼貌,是不是设计上还能再优化一下呢=v=。

除了会展,AR还非常适合一些需要高成本制作的场景。比如房屋装修、汽车销售、珠宝定制等,他们的试错成本都很高,如果在下单前就能看到最后的效果,可以为商家节约很多成本。

最后我想说,其实元宇宙的各个产业链上,相关技术都在快速发展。我们可以说现阶段的元宇宙和XR是噱头,是概念的堆积。但是只到此为止一笑了之可能草率了一点,很多技术都会爆发式的进入成熟期,为了空间交互可能的到来,至少我自己还得做很多的准备。



作者:kylin97
来源:站酷

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

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

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

标签: 用户体验 设计趋势 ui 网页设计

7个优秀网页设计趋势!

博博

关注趋势本质上就是关注未来可能存在的形态。很多营销需求和优秀设计趋势是相互关联的,两者之间的关联更像是一种动态的同步。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

很多时候趋势并不一定是全新的东西,它们往往是服务于当下和未来的需求,有很多趋势存在了一些年头,它们在现在发挥着作用,但是在未来可能会发挥更大的效用。所以,当我们在查看这些设计趋势的时候,需要注意,它们必须是服务于用户,服务于品牌和企业。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

更多设计趋势:


1、新极简主义


的确,极简主义一直在某种程度上流行,但是 2022 年出现的新极简主义的浪潮,比起传统的极简主义设计更加在意用户注意力的吸引。这种新极简主义的设计会采用更加大胆、 生动、明亮的色彩来填补留白,这种设计使得设计保持简约的同时,更加富有调性,在简约的框架下制造一种别样的华丽,营造令人亢奋的氛围。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

干净清晰、生动的新极简主义风格在品牌推广的过程中也更加受欢迎,大量的留白和跳脱的视觉焦点让整个视觉更加抓人眼球,也使得品牌给人的感知更加新鲜独特。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

新极简主义风格,对比度在深色主题下得到了进一步的提升。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

这种设计并不意味着传统的极简主义已经被用户抛弃,很多企业依然会青睐更加传统的单色极简主义设计,不过其中多少会增加一些明亮的色彩作为点缀。

2、新粗野主义


从 1950 年开始,粗野主义就是年轻化、反叛、反主流、标新立异的设计风格。在过去的几十年当中,这种设计风格一直随着时代的发展而自我迭代,新粗野主义更加强调创造力、 大胆前卫的新奇元素,而这也正好符合很多品牌对于新奇性的追求,它可以瞬间抓住用户的注意力。不过,这种风格的使用需要控制好程度,否则很容易失控。

粗野主义经久不衰的秘诀是什么?是未经打磨、粗粝而原始的素材,它让观看者忍不住想要改进它,这种未完成的原始感会在情感上吸引观众,这在营销上是无价的优势。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

粗野主义在设计上并非看起来那么粗糙,相反它更加需要高度的专业性来控制它粗野的程度。设计师需要敏锐地感知到观看者改进地欲望,让设计粗野而不低级,原始而不拙劣。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

新粗野主义柔糅合了极简主义和大胆地排版,它依赖看似粗野地视觉冲击:高对比度、粗粝地阴影,撞色、 简约的背景、不对称的布局、 未经修饰的照片,新粗野主义偏好基础款的加粗字体,跟注重可读性而不是舒适所制造的视觉吸引力。

这个网站就是一个典型的例子:

3、强调参与感的交互


这一趋势在绝大多数的趋势排行榜当中,都占据首位。随着技术的进步,用户和数字媒体之间的交互正在增加,引人入胜的交互已经不仅仅停留在响应式设计当中,如今它已经开始关注心理和生理的逻辑,开始全方位地调动视觉、听觉、 嗅觉、触觉、味觉乃至于运动体感。

这种趋势旨在帮助用户体验真实地感觉,在完成交互地基础上,触发用户地情绪反应和生理反应,热气腾腾地馅饼视频让人垂涎,游戏中虚拟地对手让人肾上腺素激增。

交互所制造地参与感,在某种程度上是实际地物理产品地替代物,用户可以从不同角度来缩放查看产品,了解细节,选择尺寸,挑选颜色。

交互过程中,手指和屏幕之间地触摸交互开始变得丰富,开始变得有意味,它成为了用户和虚拟世界之间沟通地桥梁,开始有游戏地乐趣,有更具设计感地交互环节。用户也可以根据自己地喜好,对界面进行更多样的个性化处理。

具有参与感的交互是我们的未来。

4、关注人和叙事


2022 年是疫情开始后的第三年,隔离使得人们对于照片所呈现出的故事和情感,有着更为强烈的情绪反应。在极简主义设计当中,富有表现力的人物照片是最为流行的元素之一,这类照片搭配上简短的文字,简练的口号,一些带有宏大叙事特质的文字引用,时常能够更好地营造出故事感。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

不用担心主屏页面太长没人看,只要随着用户滚动,故事会随之逐步展开,用户可以在照片、 标题、视频、动画和文本地指引下,看到整个故事有步骤地呈现。

在这当中,富有表现力的人物照片是吸引用户注意力的关键要素。

另外就是页面的 Banner 的部分,强调主题和内容的标题文本,是用户从屏幕上获取的重要信息之一。

如今的用户越来越偏好在详细阅读内容之前,快速浏览一下全局的做法,这也使得 Scrollytelling(滚动叙事:通过滚动触发音频、视频、 动画效果的一种技术)这种渐进式叙事方式,可以像电影一样将故事呈现在用户眼前。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

Scrollytelling 适合大量的内容呈现,比如对于公司和产品的描述,对于数据呈现或者认知要求较高的内容,它适合学习和记忆性内容的呈现。


5、3D图形的运用


3D 图形设计正在越来越流行,因为它确实是吸引用户注意力的最主要的工具之一。3D 图像无论有多么奇异,它本身都会被认为是有真实感的,明确的体积,精致的建模,所有的一切都令人着迷。很多时候,用户停留在有3D元素的页面上,是为了更细致的欣赏。

3D 图形设计的趋势从来都没有减退,它正在进入更多的领域,甚至进入了品牌推广的领域。3D 动画图标比过去更能吸引用户的注意力。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势


6、抽象插画


我们通常说的抽象插画,指的是带有明确几何特征的插画,它们被广泛地应用于网站和 APP,在社交媒体和包装设计中也越来越多的存在。

2022设计趋势 优秀网页设计 网页设计 网页设计趋势

抽象插画之所以会如此成功,是因为它们大多有着吸引人的生动色彩和良好对比度,视觉上的美感和极简主义的风格特质,它们成为视觉的焦点,为整个设计提升视觉。

抽象插画在品牌营销场景下的应用也很多,它们在这个时候是贴合品牌推广的诉求的:通过色彩和形式来吸引用户来关注品牌的形象和名称。

7、超大文本版式


这种趋势的特别之处是其中的文本字体元素是完全独立的。这些文本不仅仅是用来传递信息的,它们还充当着拉升页面视觉效果的重要作用,它们结合动画和交互,成为页面中醒目的亮点。

超大字体的优点在于,它和很多设计风格是相得益彰的,加粗的大字体在极简主义风格的页面上不会显得突兀,在元素丰富的页面上,同样可以起到优秀的点缀作用。这些文本内容可以和纤细和小尺寸的元素协同,而后者则衬托出它本身的醒目。

超大文本字体的另一个好处是有效地减少网页上的图像的使用,缩短加载时间,提升移动端的可用性。

这种设计元素最重要的,是选择易读且符合品牌调性的字体。


总结


这么多年来,我们看到来这么多的趋势,很多趋势是一以贯之持续出现,有的趋势则如同流星一样一闪而逝。好的趋势不断迭代升级,并且持续存在,但是最重要的,始终是那些选择合理的方案,并且坚持改进设计,让趋势服务于终端的产品和用户的设计师。

让趋势服务于你,不要盲目地追趋势!



作者:陈子木



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

数据可视化

博博

这两年互联网行业在 C 端市场上的增长已经不足以吸引大众和投资者的视线,B 端作为一个新的热点开始被追捧。 

但 B 端是一个泛指,它是由若干面向商业场景的不同细分行业组成。包括云服务、SAAS、PAAS、定制系统、数据可视化、智慧平台、商用 HMI 等等。 

不同 B 端细分行业差距是非常大的,就像游戏 APP UI 和一般软件 APP UI 完全是两种职业一样。每当我们讨论 B 端行业前景,就一定要聚焦到具体的行业类型,否则就没有讨论下去的基础。 

而我们今天重点聚焦的,就是目前声势极大的数据可视化行业。 



这是最近很多同学咨询和关注的领域,也是各大显卡厂商、3D 引擎发布会上的常客。 



各种让人眼花缭乱的图例和技术应用解说,很容易让我们产生未来已经加速向我们走来的 “幻觉”,此时不抓紧时代的机遇投身数字化界面的设计,更待何时? 

但我还是要劝大家别光顾着鸡冻,冷静下来好好分析这些行业和市场状况,当你了解的越多,你就越会发现,这个职业方向和你们想的不太一样…… 

首先,数字可视化领域也是一个比较笼统的行业,它依旧可以拆分出若干细分领域。但我先简单根据视觉展示类型把它们分成两大类,平面展示型和3D展示型。为什么根据这个分而不是商业场景,下面会做进一步解释。 

首先,数据可视化不是用了花哨的 3D 视觉才叫可视化,平面展示类型是绝对不能忽视的一个方向。它的主要应用场景集中在商业 BI ,统计分析工具等。 

比如统计并查看网站、应用、店铺数据的平台。 



这类产品有非常广泛的使用场景和需求,是现代企业和产品运营的基石,它存在的价值是毋庸置疑的。 

而另一类 3D 展示型的细分发展方向,包含展示大屏、数字孪生、智慧项目、商用 HMI 等类型。 



这类项目更多是由技术发展催生而来的 “新需求”,和 5G 的发展是高度相似的。我对这个行业的发展潜力是认可的,但对设计师从事这个行业的总体前景持悲观态度。 

下面,针对真正的数据可视化设计师,我会从下面几个维度展开讨论(唱起反调): 

- 知识门槛 

- 行业特征 

- 团队价值 



数据可视化是对数据信息进行图形化设计的过程,这个行业不是这两年才出现的,而是由来已久。 

从世界上第一个图表的诞生之后,就有无数统计学家和设计师投身到这个领域中,发明和设计出各种精妙绝伦的图形。



数据可视化的重要性不会比任何其它设计行业低,但是,数据可视化重要性的来源,是由数据本身的价值赋予的。因为诠释数据的方式精彩,所以有价值,而不是仅仅是因为你做得好看且花哨。 

更进一步说,就是数据可视化的价值是被统计学赋予的,而统计学是被这个世界真实需要的。 

但很可惜,极少有 B 端设计师会投入精力到统计学的基础知识和应用,这就导致很多设计稿中,连对数据的展示应该用折线还是柱状都分不清。 

或许你依靠经验可以提升对一些基本图表使用的心得,但是,进阶的可视化设计需求就靠几个简单的折线、柱状、饼图就能解决嘛?那下面这些图形应用需要掌握什么? 



复杂的可视化应用场景,不仅需要设计师对统计内容和数据应用有主动地分析,还需要对计算机图形学有一定的掌握。先不说门槛极高的 R 语言应用,但凡涉及到区级以上的地理信息可视化,就一定需要应用 GIS 工具的应用,导出并转化数据包。 



除了 2D 以外,3D 可视化的项目,所需的知识储备就更进一大步。很多新人的认知以为设计师的工作只要用 3D 软件建模并输出就可以,学会 C4D 就可以做可视化项目。

这和以为掌握烤箱的功能就可以做出美味的蛋糕性质是一样的…… 

前面说过,3D 可视化是由技术发展催生出的行业,它的应用受到技术的影响非常大。因为 3D 应用实在是太复杂了,比 2D 图形复杂好几个量级,这就导致设计可以落地的限制远远超出新手的认知。 

常规的 3D 项目,必然要借助相关的图形协议或者引擎。比如新手刚开始都以为的 3D 可视化就是网页中运行 3D 效果,而网页运行 3D 就是借助 WebGL 图形协议实现的。 



由于各种技术和硬件限制,WebGL 的性能是奇差无比的,因为它的图形绘制渲染主要依靠 CPU 来完成,只要项目稍微复杂一点,多边形和图元数量一多,立马就会让电脑变卡(CPU占用量暴涨)。同时,它可以使用的渲染效果、着色器也必然不等同于 3D 软件的高阶渲染插件 OC 或 Redshift。 

因为 WebGL 太弱,目前封闭的可视化项目就转而使用其它的技术解决方案,即虚幻 Unreal 和 Unity。没错,就是你们玩游戏启动画面中显示的那俩引擎。 



换句话说,现在的高端 3D 可视化项目,就是用做游戏的方式做可视化应用,只要在指定设备里安装,就可以调用 GPU 资源,实现更高级复杂的效果。



但是,只要应用了对应的引擎,就必须使用配套软件来完成渲染、动画、交互事件。即通过 C4D 或者 Blender、犀牛等软件完成建模(不同可视化项目应该用的建模软件也不一样),再导入到虚幻或者 Unity 编辑器中进行下一步的操作,然后再和开发进行交付。 



因为 3D 的复杂性,导致独立 3D 可视化项目的开发流程被大幅度拉长,从而让设计师需要掌握的知识面也大大增加。中间每个步骤都充斥着各种屎尿屁的限制,我就不继续展开了。 

3D 可视化设计师,几乎就等同于游戏行业中的技术美术(Technical Artist),因为游戏开发更复杂,分工更明确,技术美术作为设计师和开发之间的桥梁,帮助项目的美术能尽量在技术上被实现。 

而因为可视化项目的建模精度与视觉效果要求不高(对比游戏),这些工作就要由同一个岗位包揽,设计师就没办法回避这些让人绝望的知识信息。 

还有一点对比游戏行业更让人绝望的,就是 3D 可视化实际应用的技术方案是高度碎片化、没有体系的,而且技术迭代周期远比游戏行业短(WebGPU已经在路上了),这在客观上增加了设计师的从业压力(欢迎体验前端开发的压力?)。 

一个专业的可视化设计师知识门槛,是远远高于一般 UI 设计师的。 



当我们研究一个行业的前景时,就是研究它未来的趋势和潜力。数据可视化严格意义来讲并不是完全独立的一个行业或市场,而是其它多个大市场中的某个组成部分。 

如前面提到的数字分析、物联网、工业物联,都是层次更高的商业化市场。这些都是近年来高速发展的热门行业,是带动可视化行业发展的客观依据,我就不一一找公开统计数据佐证了。 

而可视化除了商业场景外,还有个在国内做可视化绕不开的话题 —— 政策。 

如果具体关注过地产、5G、电动车产业的发展历程,就应该明白国家意志的贯彻可以怎样在短时间内催生出市场的高度繁荣(或者泡沫)。 

而政策对于可视化的利好,就在于 “数字政府” 概念的规划中。从几年前开始就兴起的政务数字化转型,到最近国务院发布的 《关于加强数字政府建设的指导意见》,都是中央直接 “指导” 地方发展数字化的指标,是行政意志与力量的体现。 

说更具体点,下面是指导意见中的目标说明,非常直白,大家可以自己体会: 

到2025年,与政府治理能力现代化相适应的数字政府顶层设计更加完善、统筹协调机制更加健全,政府数字化履职能力、安全保障、制度规则、数据资源、平台支撑等数字政府体系框架基本形成,政府履职数字化、智能化水平显著提升,政府决策科学化、社会治理精准化、公共服务高效化取得重要进展,数字政府建设在服务党和国家重大战略、促进经济社会高质量发展、建设人民满意的服务型政府等方面发挥重要作用。 
到2035年,与国家治理体系和治理能力现代化相适应的数字政府体系框架更加成熟完备,整体协同、敏捷高效、智能精准、开放透明、公平普惠的数字政府基本建成,为基本实现社会主义现代化提供有力支撑。 

原文链接: http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm 

正因国情在此,所以这些年 G 可视化项目才如雨后春笋一般涌现。智慧城市、智慧农村、智慧水利、智慧交通、智慧民政等等,都是借助这股东风蓬勃发展。 



所以,商业和政务的迫切需求,催生出一大批可视化服务公司,如 EasyV、ThingJS、观远等。即使头部大厂也生怕错过这个机会,纷纷组建团队进行行业布局。如腾讯云的 Raya Data、阿里云的 DataV、网易的数帆等等,都已经小成气候,初现锋芒。 

市场需求旺盛,规模快速增长,前景理应一片大好!但是…… 

市场总规模的扩张,带给个体的收益却不一定有表面看起来那么理想,尤其是设计师岗位。 

这要先从常规 UI 设计行业说起,UI 设计师工资已经是国内设计行业工资最高的类型之一,从10年前的屌丝行业到今天能和老牌贵族建筑设计叫板,是非常了不起的成就。 



而之所以有这种收入,除了移动互联网爆发以外,最重要的原因就是互联网产品的 “利润率”,可以用非常少量的职员撬动上亿甚至上百亿的利润。 

如王者荣耀 2021 年全年盈利 28 亿美元,接近 200 亿人民币的利润。一款游戏的利润直接达到万科(2021年利润225亿)和中国人保(2021年利润216亿)的水平,他们都是在册员工超过 10W 人的大型企业,也是国内各自行业里的巨头,而王者的员工只是他们的几百近千份之一。 

再如蚂蚁金服、微信、抖音之类的国民级互联网应用,都是用极少的员工达到让人难以置信的估值和利润,这在传统行业是无法想象的。 

所以能盈利的公司会给员工开出满是行业红利的待遇,拔高行业上限的同时,也迫使那些有志于挑战巨头的新公司愿意抬高工资价码,吸引人才。 

总结起来,UI 之所以平均收入远超平面、服装、工业、室内等老牌设计行业,并不是因为 UI 专业门槛更高,而是以行业规模、项目规模、利润率三个核心指标的共同作用形成。 

其中,项目规模和利润率的重要性,其实远远大于行业规模,这是很多职场新人最想不通的地方。 

例如广告行业已经是一个万亿市场了,除了分众这家互联网独角兽外,其它老牌广告营销公司每年财报的营收和利润大家感兴趣的可以去搜搜(下图为 21 年财报)。 



看看他们的营收总额和净利润比例,以及员工总数,你自己就会得出,作为普通平面设计师的待遇,是绝对不可能超过头部互联网企业的,甚至能达到中游水平都是超常发挥的结论。 

行业规模大,但是头部企业规模和利润却不高,除了行业本身的平均利润率因素外,还有一个原因就是业务是高度分散的,没有被集中在少数头部企业,供应商数量庞大,不像多数 C 端市场都由少数几家公司或者产品把持或直接垄断。 

在可预见的未来,可视化行业也会处于这样的情况,竞争激烈,利润率低。而且作为 B 端服务商,不要看各家企业需求旺盛,政府各级单位招标不断,实际上每个项目的规模都不大,百万内的项目才占行业的绝大多数,这是不太符合满足我们收入期待的项目规模。 

而单个项目规模在未来高速扩大在我看来也不太现实,有两个原因,一个是项目使用人数极少(通常也就几十上百人…),另一个就是对可视化项目实用性的质疑。 

如果看过航天相关的报道,就会看到指挥室数据大屏相比我们网上看过的案例比起来,简陋得发指。这会是因为总局没有预算,请不起设计师和团队开发嘛? 



为什么航天指挥中心没有用下面这种 “科技感” 满满,复杂的我坐下面保证除了标题一个字也看不见的 “高端设计”? 



原因说出来让人沮丧,因为他们 —— 真的要看上面的信息啊!

真正能发挥可视化价值的场景并不多,很多项目出发的意义,就是为了表面工程(各级ZF单位需求,自行体会),装饰属性大于实用性。既然实用性不够高,很多甲方心里也清楚,是花钱装裱门面的,那么投入的预算就更不可能太高。 

所以,我对可视化行业的整体的发展是认可的,但对单家公司或项目的预期,却是悲观的,它们没法达到我们已经习惯的 C 端和 SAAS 行业的高度。 



最后,还要探讨下数据可视化中设计师的团队价值。 

我们知道,一个完整的可视化项目设计与开发门槛都是非常高的,但因为高,创造的价值就高嘛?项目营收的成本占比就高吗? 

答案依然是否定的!因为可视化行业的绝大多数项目都是 “传统” 的外包项目。 

不管是商业是政务领域,外包最重要的任务,都是找到业务(中标)。朴素的价值观会认为,只要技术和服务够好,业务自然源源不断,其实不然。技术服务都是后验的,客户没有合作过之前是不知道的,在市场上挑选服务商,可不是打开淘宝买家评论查看分数和具体评价筛选。 

所以,外行了解服务商的窗口,更多是通过熟悉的中间人介绍,或者销售的嘴。谁能拿到项目,谁就为公司创造了最大的价值。后面怎么做那是后面的事,换谁做不是做…… 

这就是最常见的外包企业思路,所以技术人员或者设计往往都是消耗品,没有那么强的依赖性。而在具体外包实践环节中,项目的执行决策也和一般 B 端、G 端项目不同。 

我以前一直强调,B 端项目的存在价值,是用来解决业务问题,为企业 —— 降本增效。但是可视化项目往往不是用来解决问题,而是用来 —— 解决产生问题的人! 

尤其是面向政务的项目,在领导的需求面前,是没有体验这一说的,首先考虑的应该是 ”科技感“(结合前文理解),不然怎么展示自己贯彻上层指导意见…… 



这种环境对于创意类职业是非常不利的,一方面创造的价值并不显著,另一方面是由别人 “教你” 怎么做设计。长此以往,你会越来越缺失职业竞争力和发展可能。 

问题二,则是因为可视化项目独立开发成本太高昂,做的视觉内容又非常固定。于是有实力的团队就纷纷投入可视化编辑工具的研发,解决最麻烦的底层图形方案。 



这和 B 端的前端开源框架非常类似,把底层的代码、交互、动画、性能优化都帮你做好了,设计师和程序员可以用非常省事的完成项目的视觉内容落地。 

但是,常规 B 端管理项目中,界面样式一直就不是最重要的事情,而是解决复杂页面流程和组件交互的问题。所以资深的 B 端设计师乐于应用第三方的框架来完成复杂的项目。 



而在可视化领域中,多数项目并没有那么多和复杂的交互需要考虑,视觉展示效果才是第一位,绝大多数团队应用第三方框架是大势所趋。核心工作内容被影响,那才叫触及灵魂的打击。 

所以,在我看来可视化设计师可以创造高价值的场景,只会出现在两种团队中。 

第一种,是给其它可视化团队提供图形服务的 SAAS 工具,比如 Raydata、EasyV 这类。都需要团队有非常优秀的前端程序员和技术积累,换句话说,就是既要有技术实力又要有资金保障的团队。 

第二种,则是走优质项目输出路线的小团队或公司。会有一些优秀的开发人员坐镇,再由设计师主导来推动业务发展,不会什么项目都做,会选有价值的用心交付。例如早年的 UI 外包团队 ARK、Eico、TangUX 等都是这种路线。 

这两种对比目前海量的服务商来说都是凤毛麟角,第一种类型是可视化设计师发展最好的归宿,因为设计产出和图形技术发展高度捆绑,只有这样的团队才会最早最快接触新的专业技术方案。 

除了这两类,不要对其它外包类公司有太多的期待。在整个互联网行业中,成熟产品团队非常不喜欢招外包设计师不是没有原因的。 

至于未来是不是可视化内容会在 C 端领域打开局面,发展出一些新的应用场景,我就不过早下定论了。 



最后,做个总结,给目前还没有进入可视化设计行业,或者是误打误撞进入这个行业的设计师一些职业方向的建议。 

可视化设计行业和广告业非常类似,就是从业人员收入构成是沙漏状,而不是像 UI 这样呈金字塔状的,缺乏健康的增长梯度和充足的腰部岗位。 



可视化设计师从菜鸟进入专业阶段所需的知识量更大,准备周期更长,技能门槛更高。在初中级阶段和一般 UI 行业对比起来 —— 毫无性价比。 

如果本身热爱可视化,想将 FUI 那些东西搬进真实的世界和项目里,也做好了艰苦学习的准备(说不定是你乐在其中的),那么这个的行业的头部岗位就是为你这种人准备的。 

毕竟行业体量大,当然就会有真正优质的岗位出现,只是它的门槛高,没有那么多水分能挤。 

如果不是异常热爱这个行业,具备较强的自学能力,或有一定的 3D 和图形技术知识积累,那么不太建议往这个职业深入发展,一般的 B 端和 SAAS 项目才会是更好的选择。



作者:酸梅干超人      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

160种常用的配色方案,把设计调性拿捏得死死的

seo达人



一、高端

图片

视觉调性高端的色彩,通常具有明度低、饱和度低、颜色数量少等特点,所以很多高端的设计都会以深色作为背景色,因为深色更显低调、更具神秘感,所以给人的感觉更高贵。然后以亚金色、银色、桔红色、白色等作为辅助色。

图片

 

二、科技

图片

想要表现科技感,色彩的整体调性通常会偏冷色系,明暗对比要强,且通常会使用渐变色。比如以深蓝色到蓝色的渐变作为背景色,然后用高饱和度、高亮度的青色和紫色作为辅助色,这时这些辅助色就会非常的跳跃,具有一种发光的效果。

图片

 

三、时尚

图片

其实所有调性的配色都应该要尽量时尚一点,即使是想表现复古,也不能太土,所以这里所说的时尚特指偏向年轻、潮流的时尚。这种色彩通常具有饱和度高、明度适中、色相对比较大等特点。葱爷这里概括了两类,一类是以纯色作为背景,这种色彩比较适合于品牌设计、网页设计、画册设计等;一类是以渐变色作为背景,这种色彩比较适合于电商设计、广告设计等。

图片

图片

 

四、酷炫

图片

酷炫是指那种视觉效果特别张扬、甚至是极具个性的色彩搭配,比如近几年比较火的蒸汽波风格、酸性风格、赛博朋克风格、故障风格,其色彩就属于酷炫类的。该类设计通常也是以深色作为背景,图片元素会使用高饱和度且对比很强的渐变色,色彩相对较多。

图片

 

五、好吃

图片

即让人感觉很有食欲的色彩搭配,这种色彩通常以暖色为主,比如红色、橙色、黄色。饱和度较高、明度较低的组合方式通常用于餐饮行业;而饱和度较低、明度较高的色彩组合通常用于甜点、饮料等行业。

图片

 

六、夏天

图片

目前正值火热的夏季,所以葱爷专门整理了一些适合表现夏季的好看色彩,该类色彩通常会以蓝色、青色、绿色这种冷色系最为主要颜色,然后以黄色或红色、白色作为辅助色,这种色彩组合会给人清凉、快乐的感觉。

图片

 

七、清新

图片

小清新的视觉感受为轻松、柔和、淡雅,要达到这样的效果,颜色的明度通常是比较高的,饱和度偏低,常用的颜色有浅青色、浅绿色、浅黄色、粉红色等,在奶茶、女性护肤品的相关设计中比较常见。

图片

 

八、快乐

图片

快乐是张扬的、是活泼的,所以快乐的色彩饱和度较高、明度不会太低、色彩的种类会比较多,通常也是以暖色为主,但是会搭配冷色一起使用。黄色具有很强的快乐、阳光属性,所以想要表达快乐,黄色通常是少不了的。

图片

 

九、可爱

图片

跟儿童、年轻女性相关的设计,通常需要表现出可爱的调性,这类色彩通常是用冷色和暖色相互组合,颜色的明度同样不会太低,否则会有压抑的感觉,另外饱和度也不要过高,饱和度稍低一点效果会更柔和一些。

图片

 

十、健康

图片

想到健康我们立马就会想蓝天白云、青山、绿色的草地和树叶,还有黄色的小野花等等,所以蓝色、绿色、青色、黄色、白色都是常用于表现健康的色彩,红色也可以偶尔作为点缀色加进来。由于健康的调性也是要给人一种舒适、轻松的感觉,所以整体的颜色明度不要太低。

图片

 

十一、运动

图片

要想让色彩动起来,对比一定要强,可以是色相对比、也可以是明度对比和饱和度对比。橙色和黄色是两个很具活力的的颜色,所以常用于表现运动的设计里。

图片

 

十二、科幻

图片

这是一些科幻电影、机动游戏的海报设计常用的色彩搭配组合,给人的视觉感受是稳重而大气,科技感和神秘感并存,所以背景色通常也比较暗,喜欢用青色和黄色这种比较亮的颜色作为点缀。

图片

 

十三、喜庆

图片

在设计节日海报或促销海报时,通常需要表现出喜庆的调性,有些设计师会局限在大红色、黄色、和橙色里,这样搭配出来的色彩容易土,而想要解决这个问题,一方面可以加入冷色搭配使用,另一方面颜色的饱和度和亮度也不要过高。

图片

 

十四、复古

图片

这类色彩的特点是颜色的饱和度会相对低一点,而且大多数情况下,整体的明度通常也不会太高,常用类比色搭配和对比色搭配。

图片

 

十五、中国风

图片

具有中国风特色的颜色和色彩组合有很多,葱爷这里仅列举了8个组合。这类色彩同样饱和度不会达到最高,有点复古和充满文化气息的感觉。胭脂(暗红色)、缃色(中黄)、绀青(深蓝色)、黛(褐色)等是中国风常用的颜色。

图片

 

十六、梦幻

图片

梦幻具有奇妙和神秘的感觉,好像在黑暗中找到了一点曙光,奇遇了惊喜一般,所以大多数情况下,背景色会使用从深色到亮色的渐变。颜色相对会比较丰富,而且以渐变色居多。

图片

 

十七、女性

图片

女性是温柔的,是感性的,所以该类色彩组合通常为类比色,偶尔会用一点对比色作为点缀,以增加画面的活泼气息,颜色的明度和饱和度都不能太低,当然饱和度最好也不要过高,粉色、紫色是常用于表现女性的色彩。

图片

 

十八、优雅

图片

优雅可以理解为低调、高级、温和、安静,所以这类色彩的对比通常不会太强,饱和度也会比较低,整体的色彩调性会偏中性,常用卡其色、麻色,还有单色组合及类比色组合。

图片

 

十九、经典色彩组合

图片

除了以上十八大调性,葱爷还给大家推荐一些经典的配色,很难把它们具体归为哪一类,但是我们在做很多设计时,用上这种配色总能得到不错的效果,比如红黄黑、红白蓝、黄绿黑、等等,在很多平面海报设计中经常能看到。

图片

 

 

图片

以上所列举的色彩组合,矩形色块为背景色,圆形色块为画面中图片元素或文字使用的颜色。根据需要可以把其中的某些纯色转变为单色渐变,或者也可以把某些单色渐变转化为纯色。另外,在不包含黑白灰的色彩组合里,仍可以根据需要自行加入黑白灰,比如用于填充文字的颜色。
当然,能体现以上这些调性的颜色还有很多,大家可以自行补充,建立起自己的色库。 
 
 

原文地址:葱爷(公众号)

作者:葱爷

转载请注明:学UI网》160种常用的配色方案,把设计调性拿捏得死死的

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


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



数据工程在腾讯CDC的演进

seo达人

一、问题分析

不同人对数据的需求是不一样的,或者说,不同同学对同一份数据的不同指标组有不同的价值认可。

1.我们的交互同学更多地会参考大盘的“用户习惯”,使用某个问卷题型的比例来作为设计方案的数据支撑;

2.开发同学更多地会关注这个数据引发地一些性能(问题),架构指标等;

3.产品同学会非常关心某个上线项目的入口流量,转化率相关指标;

4.运营同学关注的方面更为通用,除了大家都关注的北极星和护栏指标,他们更会关心用户在使用上的一些点位问题,单个/单批用户的运营策略转换问题。

虽然上面只提到4个笼统的数据场景,但是其实我们由此产生的数据图表、SQL模板甚至是需求单已经有很多,于是我们从规范和流程上看到了一些问题:

1.我们要如何快速找到我们指标对应的底层数据?当时一个关于「活跃用户」在团队版中的表现的下推分析,后面还加上了登录渠道的多维分析,我们甚至开了一场会去校对口径 ;

2.关于口径,我们如何确定什么数据是对的呢?不同的数据开发同学开发的报表相差很大;

3.开发同学有非常美好的想象力,一句超凡脱俗的SQL不仅在当前的架构下得不出结果,甚至会拖垮其他依赖的组件。

让用户简单地找到正确的数据,需要把数据按照层级顺序摆放在合适的位置并且登记在册,在当时的时间点下,开始构建数据业务的数据仓库当然是最好的选择;我们在数仓开始之初时反思,为什么口径、数据、校对总是不能被一次敲定呢?后来我们发现,我们做这个需求的过程:从口径的描述、SQL的开发执行到出库展示整个过程没有一个地方是可以被review的。而对复杂数据量的支持,其实就是架构该升级了,单点的ES无法支持多场景的adhoc。

 

二、数仓基建与维度建模

在做这个事之前,我问组里的同学:“我们有什么数据能够支持我们做数据分析?”,清一色的回答:“ES里的后端Event日志,前端上报的Pageview和埋点,业务DB中的表”。确实我们早期就有比较统一的基于事件流的日志格式和较为完备的前端埋点组件,但是我们还是没法回答我们拥有的数据如何支持我们完成某些需求的问题。只有我们把我们拥有的数据的具体能力和表现形式放出来,我们才能真正知道我们拥有的是什么,数据才能真正地从数据存储变成数据资产。

1、明确数据表

图片

上图显然就是我们数仓初期ODS到DWD的一层规划,这里我们更希望引入产品同学来对齐我们现有的数据资产,以便在后续数据需求的沟通上能够明确哪些数据能为我们所用,我们有哪些底层数据需要再去补齐。明细表一般存在于流式数据中,带有时间属性,一般用于一段时间内的指标计算。

同理,我们把存在业务DB中的数据平移到数仓中,这些数据表本身经过了不错的数据建模,我们将我们拥有的表保留退化维度同步到数仓,我们就得到了DIM层(块)。维度表一般不带有时间属性,用于关联做维度分析。

2、业务总线矩阵构建

把动态的明细数据和静态的维度数据相互交叉,就得到了我我们数仓的底层应用「业务总线矩阵」。在这个笛卡尔坐标系里的每一个点或者一条线都有它的业务意义。比如我们通过交叉「登录明细」 和「团队信息」,我们就能得到「团队登录」的明细;通过交叉「登录明细」、「团队信息」和「用户登录渠道」(2维度1明细),我们可以得到「分渠道的团队登录」明细,这是一种维度细分统计的构建;通过交叉「登录明细」、「团队信息」和「提交答卷明细」(1维度2明细),我们可以得到「团队版登录且答题」明细,这是行为组合(细分)。

至此,我们能够清楚地认知数据可能会在哪个位置发挥什么作用,下一步要解决的是我们该怎么找到我们的数据这个问题。

3、元数据管理

为了解决“我们有什么数据”这个问题,我们决定接管数据的入口,把开发过程中生成的数据表按照数据的生命周期命名打上标签。

图片

问卷的业务数据库里有百余张表,其中大约有近4成为维度表,需要拆分成明细的点位或者日志会随着业务发展主键膨胀,业务总线矩阵也会主键变成一张大网,失去可检索性。事实上,我们对数据的需求是有描述性的,比如想看“这周问卷的新增明细”,我们并非记住一串冰冷的文字,我们更希望能把「1周」,「问卷」转换成描述条件作为我们元数据的检索入口。 我们支持了Superset从表comment、字段comment中检索的需求,把想要的关键字按照关键字检索匹配到正确的数仓入口。

4、数据血缘

在我们接管了数据产生的入口后,我们把用户调用数据资产的记录同样采集了起来。基于一套low code配置化调度任务,我们在为开发同学提供分区筛选、数据量评估、sql执行、执行结果质量校验和下游写入的能力的同时,我们更在配置化的Spark启动入口处植入了血缘上报,当一个任务被成功执行计算后,我们采集了数据的流向和数据流动比例。

图片

有了数据血缘后,在一份数据出现分歧时,他的数据量和执行计划都是可以被review的,从数据读入和写出的量级波动情况可以相对容易地追溯到原因,但是目前还没有做成波动归因。

到这里,我们的数据开发链路的不确定性只剩下了口径确认和变更。我们通过将指标组(一般是单指标多维度)命名,分配给数据开发同学,确定产品负责人和开发负责人。这个顺便解决了我们之前无法追溯报表错误不知道该找哪位同学来看的问题。开发完成后挂靠在某个具体的数仓表上,实现数据需求到数据开发到底层计算的全链路记录,当数据出现问题或需要修改时,则整个链条上的负责同学都会有感知,确保发起的修改能够被所有相关的(特别是下游的)数据同学review到。

图片

5、数据架构

规范的事情暂时能跑了,在只有我一个人力的情况下继续大力度地做进一步数据治理可能并不是当下最急需的,在场景分析中提到的问题,我们还有关于开发最重要的一个问题——当下的数据架构需要升级。为了回答这最后一个问题,我们希望把昂贵的ES储存费用转投到能面向更大型分析场景的数据架构上。

在之前,部门内所有的分析都有ES或者ELK套件承担,从20年开始性能和钱包都陆续见到了瓶颈。目前部门数据平台内走的是以流式分发为主的Lambda架构,由下游需求决定数据是否从实时层沉降到离线层。维度数据会存在离线层,事实明细数据会广泛地存在于实时层,这是基于下游有时延要求高,维度要求低的场景,只需要做简单的指标聚合,附带退化维度写出即可。

图片

和Lambda架构不同,我们的低时延分析需求更多地由近实时分析层承担,针对不同需求,我们尝试过很多不同的组件,根据不同的使用场景,比如全文查找、强聚合、上下文分析等等,我们会选择不同的组件。基于不同的组件,我们在上层有去尝试做不同的应用实践。

 

三、应用实践

1、机器学习

图片

在机器学习方面,腾讯问卷有基于用户答题的行为,构建用户答题的时间序列,得到一个评估用户答题认真度/可信度的评估模型,目前这个工具已经上线到样本库填答的红包发放鉴别能力中,提供给投放者对回答可信度和总体回答质量做相应参考。

在最早期我们通过ES去查找单份答卷用户在答题过程中的所有用户行为埋点数据来构建序列数据进行预测,将预测结果写入DB;在近一年中,我们把查询数据源经过计算清洗后写入按问卷和用户为索引的ClickHouse数据源中,同时将服务与线上服务解耦,使用kafka来进行通信;最后配置了消费监控和写入监控,使这个服务成为一个单独维护的组件。以牺牲少许的实时性为代价大幅提升了预测速度和可用性。

2、实时风控

基于实时层的数据聚合分发能力,我们在问卷系统中逐步搭建了一套对问卷维度进行风控的系统。在最早期的设计中,实时层基于小时间段窗口触发计算,从明细数据流读取计算到写入下游系统之间的误差能够控制在秒级,支持了下游规则引擎的实时特征数据检索。

在架构上,风控模型走的是全实时数仓链路,从Kafka明细中读出前端上报信息和后端收集答卷的日志,在Flink中做实时的多窗口聚合写入到下游的数据组件。在前期选型中,业务侧希望能够具有实时调用和短时间指标回溯的能力,同时希望系统组件能够相对轻,能从云上购买,最后我们选定了Kafka作为业务侧实时接收窗口聚合结果的组件,PostgreSQL作为小时间段的回溯组件来构建线上的风控分析。

3、AB实验

目前,我们已经在SaaS平台内对文案显示、用户逻辑等多方面做了很多次AB测试,通过pv上报的曝光和event埋点的转化分析,能够实时构建单个用户的转化行为;相同地,我们会对实验时间范围内的数据使用ClickHouse构建用户RBM,分析不同用户在不同实验命中的表现情况。

图片

 

总结

通过补齐一些基本的数据架构和数据规范,目前我们在数据驱动的实践上已经走出了一条自己的路。随着用户调研类组件的发展、用户分析需求的增加,其分析能力也会随之增强,越来越多的数据能力正在沉淀成底层功能加入到SaaS服务侧。

 

原文地址:腾讯CDC体验设计

作者: 腾讯CDC-erien

转载请注明:学UI网》数据工程在腾讯CDC的演进

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


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



数字化浪潮下,设计师如何驱动技术类SaaS产品的升级与创新?

seo达人


一、应用/软件研发就是单纯的敲代码?

在我们传统认知里,应用/软件研发似乎就是开发者在黑色屏幕前敲代码。但随着敏捷研发DevOps理念的发展,现在的应用研发,转变为了围绕devops的协作工作流,涉及多样化的工具和不同人员的协作。研发体验的核心要素,也从“架构逻辑“向”流程和协作“发展

图片

阿里巴巴应用研发平台EMAS正是在此背景下诞生的产品。面向全端场景(移动App、H5应用、小程序、Web应用、PC应用等),基于广泛的云原生技术(Backend as a Service、Serverless、DevOps、低代码等),为企业、开发者提供应用研发运营管理服务。

综上,EMAS做为帮助企业/开发者进行应用研发的技术类SaaS产品,也面临了全新的机遇与挑战

 

二、设计师如何在技术类产品中破局?

面对复杂的技术类产品,由于技术的高门槛及业务的复杂性,很多时候设计师都是被动的接受需求。但我们也在思考,设计师如何在技术类产品中破局,如何发挥更大的价值。

因此,我们尝试站在更高的全局视角而不是设计的本位视角,主动发现问题提出设计策略,实现设计执行到设计驱动的突破。

全局视角的主动洞察

怀着让设计发挥更大价值的初心,我们深入业务主动邀约产品关键角色深入沟通,了解产品历史背景、技术逻辑及痛点,并发起产品的易用性测试、体验走查及竞品分析等动作,站在全局视角从产品侧、用户侧和体验侧多个角度进行深入洞察,形成全面的“产品体检报告”总结旧版EMAS所存在的问题:

图片

1.产品侧洞察——子产品无合力、相互割裂缺乏串联

EMAS围绕应用全生命周期包含12款子产品,却是各个子产品的拼接,功能独立零散,未形成一站式研发体验。各个子产品也是以独立垂直工具视角建设,缺乏用户及客户业务视角。

2.用户侧洞察——产品价值/能力感知弱、没有攻占开发者心智

多数用户并没有完全理解产品的价值和能力,EMAS没有攻占开发者心智。

3.体验侧洞察——产品易用性差、满意度低

通过用户调研的量表评分,易用性及满意度评分低,虽然用户对产品功能能力认可,但对产品使用体验满意度差。

 

三、设计驱动产品创新升级

基于以上分析,我们与关键决策人积极沟通,汇报关键问题及设计策略,驱动产品的升级创新,进行EMAS3.0 一站式应用研发平台的打造。通过咬合3个业务关键问题,制定出以下的设计策略:

图片

 

〇 策略一:打造一站式研发体验

打造一站式、平台化研发流程体验,为客户提供完整价值闭环。通过一站式独立控制台建设,进行构建-测试-发布-运维-运营全链路打通串联。

1.应用全生命周期协同流程梳理:

旧版的EMAS是各个子产品的拼接,功能独立零散,未形成一站式的研发体验。经数据分析,产品的交叉使用率也非常的低。因此,设计首先从应用全生命周期角度,梳理了不同角色的协作流、任务流,并串联之前子产品没有打通的数据流,进行构建-测试-发布-运维-运营全链路打通串联

图片

2.用户视角的产品架构重构

并且在旧版的EMAS中,各个子产品是以垂直工具的视角进行建设,每个子产品的架构逻辑都不同,也没有形成合理的联动。进一步,设计驱动以用户视角进行产品的架构重构,以”项目“作为统一顶层逻辑,并兼容技术架构,进行围绕应用的的管理,形成一站式应用研发全周期流程。

图片

3.一站式独立控制台建设

在产品形态上,形成了以下结构的一站式独立的Studio框架,让用户能够清晰、流畅的产品体系中进行应用构建

图片

4.一站式全景产品架构

最终,EMAS3.0一站式应用研发平台实现编码-构建-测试-发布-运维-运营全链路的打通串联。应用阿里云的Real3D能力,打造一站式产品全景3D互动场景围绕DevOps协作流串联各个子产品,形成一站式应用平台。

通过流程化研发指引帮助新手开发者快速开启应用研发流程,也能帮助团队不同角色成员进行项目全局管理和关键指标监控

图片

 

〇 策略二:品牌建设与产品价值传递

通过品牌建设与开发者心智构建,强化产品价值/能力透传

1.增强产品价值/能力透传设计

旧版的EMAS试用体验差,且在首页、功能初始页等场景也缺乏产品能力的有效展示与使用引导。因此,我们在多个场域进行产品信息的有效展示及引导,行产品价值/能力透传的核心场域的典型场景建设,帮助用户快速感知产品价值。

图片

2.品牌建设,建立用户心智

研究竞品会发现:大部分竞品缺少独特的品牌语言——用户很难区分彼此,无法激发用户对产品的兴趣 EMAS希望提供什么样的形象与感受,现有的视觉设计语言能否让用户产生所预设的共鸣?因此差异化的牌语言,能体现EMAS独有的品牌价值,在用户心智建立准确的品牌形象。

首先,我们基于“卡普费雷品牌识别棱镜”从品牌定位&品牌表现的维度来挖掘产品形象,在个性、文化、形象、关系、体现、外貌6个纬度对品牌进行定位

图片

明确了“Make smart app”这一产品Slogan,相应确定了产品“智能、高效、敏捷、灵动”的视觉语义,并从从个层面定义Smart,从各设计元素中挖掘smart的特性,来传达品牌。

图片

通过品牌logo的三角图形元素贯穿运用到整个产品的 布局、插画等元素,增加符号化元素的透出率,提升品牌的感知

图片
图片

产品形象采用3D Pictogram配上动效,通过材质和光影的变化,更丰富传达各子产品的特点,体感更强。

图片

 

〇 策略三:易用性改进提升研发效能

旧版EMAS经过用户调研的量表评分,产品易用性为6.8分,未达到优秀标准,在整体研发易操作性及易学性等方面存在20+体验问题。

图片

因此,我们基进行了深入的易用性度量和测试,挖掘出20+体验问题,除了问题的单点解决外,我们也形成了系统化的解决方案,形成了“一键接入”、”流水线编排““跨产品引导”、”场景化开发指引“等易用性策略和范式。最终形成了完善的一站式应用研发设计体系。

图片

 

四、技术类SaaS产品设计方法

通过以上项目的体系化设计的最佳实践,我们逐渐总结出一套技术类SaaS产品创新设计方法:基于“产品/技术能力”、“产品价值传递”、“使用体验”及“ARR”四个产品关键要素的抽取和分析,明确了“连贯度”、“价值感”、“易用性”、“转化率”四大开发者体验原则,进而形成一系列体验设计要素,指导设计师有章可循的去进行技术类产品的思考和设计工作。

图片

设计师是人与科技间的链接者,在数字化变革的浪潮中发挥着重要的作用,通过对用户、产品、体验的深度洞察,让科技逐步普惠化、民主化。

 

原文地址: 阿里云设计中心(公众号)

作者: 阿里云设计中心

转载请注明:学UI网》数字化浪潮下,设计师如何驱动技术类SaaS产品的升级与创新?

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

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

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



日历

链接

个人资料

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

存档