首页

数据可视化

博博

这两年互联网行业在 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咨询、用户体验公司、软件界面设计公司



设计未来的情感界面

ui设计分享达人

推荐 | 科技的不断发展将给未来的界面设计带来更多的可能性。复杂的语音界面、先进的 AR 或是真正沉浸式的 VR 都会被实现。而科技的进步也对设计师们提出了新的要求。在更加重视体验的未来,设计师们应该作出何种创新以应对变化呢?尼克·索萨尼斯曾在其著作《非平面》中写道:“要走出平面与狭窄,我们需要万花筒般千变万化的视角,我们的维度性和不断变化的能力才得以展现”。希望此文中提供的视角能给设计师们带来启发,跳出传统屏幕的平面来思考未来的界面设计。




快速摘要:

当改变来临,我们总倾向于自然而然地抵制它。我们所拥有的唯一真正的界限,就是我们的大脑告诉我们,事情最好保持原样。在本文中,Gleb Kuznetsov 分享了他的一些想法和观点,即在不久的将来,界面会是什么样子,以及我们能够期待何种非凡的体验。关键词:虚拟现实,用户交互,用户体验,用户界面

在我们做决策的过程中,情感起着至关重要的作用。一秒钟的情感便能改变用户体验产品的整个现实过程。

人类是一种由情感驱动的物种。我们选择一款产品并不是因为它有何意义,而是因为我们认为它能够给我们带来何种感受。未来的界面将会在产品设计的基础上使用情感概念。人们的使用体验将基于智商 ( IQ ) 和情商 ( EQ ) 。

本文试图展望未来,看看未来十年我们将设计什么样的界面。我们将详细研究三种交互媒介:

  1. 语音
  2. 增强现实 ( AR )
  3. 虚拟现实 ( VR )

未来情感界面的实例

未来的界面将是什么样子?虽然我们现在还无法回答这个问题,但我们能够探讨未来的界面可能具有哪些特征。在我看来,我确信我们最终会摆脱那些充满菜单、面板、按钮的界面,并转向更加“自然”的界面,即扩展至我们全身范围的界面。未来的界面不会被限制在物理屏幕中,而是会借助五感的力量。正因如此,它们需要更少的学习曲线①——理想情况下,根本没有学习曲线。

①学习曲线:在一定时间内获得的技能或知识的速率,文中指面对未来的界面,用户需要更高效的学习速度,甚至无需学习即可掌握界面的使用方法。

情商在商业中的重要性

除了使体验更加自然并减少学习曲线之外,对产品创造者来说,情感设计还有另一个益处:它提高了用户对产品的采用率。利用人类对情感的反应能力来创造更好的用户参与度是可能的。

具有真实感的语音界面

使用语音功能作为主要界面交互方式的产品正变得越来越流行。我们之中有很多人使用 Amazon Echo 和 Apple Siri 来安排日常活动,例如设置闹钟或安排预约。但是,目前市场上可用的语音交互系统中,大多数仍具有一个天然的局限性:它们并没有将用户情感考虑在内。结果便是,当用户与像 Google Now 这样的产品进行交互时,他们有一种在与机器而不是真人交流的强烈感觉。系统的反应是可预测的,并且它们的响应是脚本化的。与这样的系统进行有意义的对话是不可能的。

但是目前市场上也有一些完全不同的系统。其中一个是 Xiaoice( 微软小冰 ),一个社交聊天应用程序。这个应用程序的核心是情感计算框架;其理念是,首先要与用户建立一个情感连接。Xiaoice 可以动态识别情绪,并通过给出相应回答的长对话来吸引用户。结果,当用户与 Xiaoice 交互时,他们感觉是在与真人进行对话。

Xiaoice 的局限在于它是一个基于文本的聊天应用程序。很明显,如果是基于语音的交互,你可以获得更强烈的感受( 人类的声音具有不同的特征,例如音调可以传达出强大的情感 )。



微软小冰跨平台人工智能机器人图片来源:https://www.msxiaobing.com/

很多人已经通过电影 《 Her 》( 2013 )看见了基于语音互动的力量。Theodore (由 Joaquin Phoenix 扮演的主角)爱上了 Samantha ( 一个复杂的操作系统 )。这也让我们相信,未来语音系统的主要目的之一便是成为用户的虚拟伴侣。这部电影中最有趣的事是 Theodore 从未见过 Samantha 的视觉形象——他只能听到她的声音。要建立这种亲密关系,必须产生能够反映出和虚拟伴侣性格一致的回应。这将使系统既可预测又值得信赖。



电影《Her》海报

图片来源:https://movie.douban.com/photos/photo/2166850749/

要实现像 Samantha 这样的系统,科技还有很长的路要走。但是我相信,语音优先的多模式界面将是语音驱动界面发展的下一篇章。这样的界面将使用语音作为主要的交互方式,并在上下文中提供附加信息,以创造和构建连接感。



为 Brain.ai 设计的语音界面实例 (图片来源:Gleb Kuznetsov )


AR 体验的演变

增强现实( AR )被定义为在现实世界基础之上进行的数字叠加,并将我们周围的物体转换为交互式数字体验。我们的环境变得更加“智能”,用户在指尖产生一种“有形”物体的错觉,从而在用户和产品(或内容)间建立更深层次的连接。

利用AR重构现有概念

AR 的独特之处在于它给予我们一种与数字内容进行物理交互的非凡能力。它允许我们看到以前无法看到的东西,这有助于我们更加了解我们周围的环境。这种AR属性帮助设计师使用熟悉的概念创造新层次的体验。

例如,通过使用移动 AR,可以创造一个全新水平的飞行体验,它允许乘客看到有关她的班次或当前飞行进程的详细信息:



AR 展示空客 A380 的飞行体验。(图片来源:Gleb Kuznetsov )

AR 帮助我们找到穿越空间的方式,并一目了然地获取所需要的信息。例如,AR 可以为你当前的位置创建丰富的提示。SLAM 技术②在这方面有着出色的表现。SLAM 允许环境的实时映射,并能将多媒体内容置入环境中。

②SLAM 技术:( Simultaneous Localization And Mapping ) 同时定位与地图构建技术,指机器人在未知环境中从一个未知位置开始移动,在移动过程中根据位置估计和地图进行自身定位,同时在自身定位的基础上建造增量式地图,实现机器人的自主定位和导航。

AR 有很多机会为用户创造价值。例如,用户可以将他们的设备对准建筑物,并在屏幕上了解该建筑的更多信息。它能够显著减少工作量,并通过导航和访问功能使用户获得轻松的情感体验。



在环境中提供附加信息( 图片来源:Gleb Kuznetsov )

我们周围的环境(例如墙壁或地板)也能成为交互的场景,在过去这仅限于通过智能手机和电脑实现。

下面的概念正是如此,它使用物理对象(白墙)作为画布,来表现那些通常用数字设备来传达的内容:



互动墙的概念——现实世界之上的数字叠加(图片来源:Gleb Kuznetsov )

避免信息过载

在一个名为 “HYPER-REALITY”( 超真实 )的一个网站中,作者 Keiichi Matsuda 制作了一段视频。视频中物理世界和数字世界已经合并,用户被大量信息淹没。

视频:

https://www.youtube.com/watch?v=YJg02ivYzSs&feature=youtu.be

科技允许我们同时显示几个不同的对象。但是当它被误用时,很容易造成过载。

信息过载是一个严重的问题,它会对用户体验产生负面的影响。避免信息过载将成为 AR 设计的目标之一。设计良好的应用程序会借助 AI 的力量将那些与用户无关的元素过滤掉。

高级个性化

当系统根据用户的需求和期望来实时管理内容和功能时,数字体验的个性化便会发生。很多现代移动应用程序和网站使用个性化的概念来提供相关的内容。例如,当你浏览 Netflix 时,你看见的电影列表都是基于你的兴趣进行个性化推荐的。

AR 眼镜能够创建新的个性化水平,即“高级的”个性化水平。由于系统能“看见”用户所看见的内容,因此可以利用这一信息来提出相关建议,或在环境中提供附加信息。想象一下,你很快就将戴上 AR 眼镜,并且传输到你视网膜的信息是根据你的需求量身定制的。

视频:

https://www.youtube.com/watch?v=eQ2OKB026Wc&feature=youtu.be

从增强现实走向虚拟现实,创造沉浸式体验

AR 体验具有天然局限性。作为用户,我们与内容之间有一条明晰的界线,这条线将一个世界( AR )与另一个世界(现实世界)分离开。这条线让人感觉 AR 世界显然不是真实的。

你可能知道如何去解决这一限制,即使用虚拟现实( VR )。当然,VR 确切来说不是一种新媒介,但直到最近几年,科技才达到能让设计师们创造沉浸体验的高度。

沉浸式 VR 体验移除了真实世界与数字世界间的屏障。当你戴上 VR 耳机时,你的大脑很难分析出你接收到的信息是否真实。电影《 头号玩家 》( Ready Player One )很好地解释了在不久的将来,VR 体验会是什么样子:

视频:

https://www.youtube.com/watch?v=cSp1dM2Vj48&feature=youtu.be

以下是设计师们在创造沉浸式虚拟环境时需要记住的几点:

1.写一个故事有意义的 VR 在其核心有一个强大的故事。这就是为什么在你开始设计 VR 环境之前,你需要为用户旅程写一个故事。“故事板”这一强大工具可以帮助你完成这一工作。使用故事板,可以创造一个故事,并检查所有可能的结果。当你检查你的故事时,你将看到何时以及如何利用视觉及听觉线索来创造沉浸式体验。

2.与角色建立更深层次的连接为了使用户相信 VR 世界中他们周围的一切都是真实的,我们需要在用户与其扮演的角色间建立联系。最明显的解决方案之一是,使用户的手部表现成为虚拟场景中的一部分。这一表现应该是实际的手——而不仅仅是一个被操纵的复制品。考虑不同的因素(例如性别或肤色)是至关重要的,因为这让交互更加真实。



用户可以看到他或她的手,并看到自己作为一个角色出现(来源:leapmotion )

为了建立此连接,也可以将现实生活中的物品带到 VR 环境中。例如,一面镜子。当用户看向镜子并看到其反射出他们自己的角色时,用户和虚拟角色间的交互会更加真实。



VR 用户看向虚拟的镜子,并在 VR 环境中看到他自己的角色。致谢:businesswire

3.使用手势代替菜单

当设计沉浸式 VR 体验时,我们不能依赖传统的菜单和按钮。为什么呢?因为显示菜单比较容易打破沉浸感。用户将会知道他们周围的一切都不真实。设计师们需要依靠手势来替代传统菜单。设计界依然在为手势的使用制定通用语言,参与这项活动是有趣且令人兴奋的。但棘手的部分是如何设计出用户熟悉且可预测的手势。



Hovercast VR menu 是将现有的交互概念重新用在 VR 体验的一次尝试。不幸的是,这个概念会打破沉浸感。新的媒介需要一个新的交互模式。

4.与 VR 环境中的元素交互

为了创造一个真实的环境,我们需要使用户能够与现实中的物体进行交互。理想情况下,环境中的所有物体都可以被设计成允许用户触摸和观察它们的模式。这样的物体会起到刺激作用,并帮助你创造更具沉浸感的体验。触摸对于探索环境非常重要,婴儿在刚出生的那些天接收到的最重要的信息便是通过触摸获得的。

5.在 VR 中分享情感

VR 真正有机会实现社交体验的新高度。但为了实现它,我们需要解决一个重要问题,即将非语言的提示带入交互中。

当我们与他人进行交互时,我们获得的信息中有很重要一部分来自肢体语言。惊喜、厌恶、愤怒——所有这些情绪都在我们的面部表情中。在面对面的交互过程中,我们通过眼睛的区域来推断信息。当人们在 VR 环境中互动时,为了创造更加真实的交互,提供此信息是非常重要的。

好消息是,头戴式设备( HMD )很快就将涵盖情感识别。在虚拟现实中,几乎所有人与人之间的互动都受益于面部表情。



在 VR 空间中分享情感(来源:MITReview 的 Rachel Metz )

6.为 VR 环境设计合适的音效和音乐

音频是沉浸式体验中的重要组成部分。如果不为环境设计音效,就不可能创造出真正的沉浸体验。声音既可以被当作背景元素(即环境中风的声音),也可以是指向性的。在后一种情况中,声音可以作为提示使用——通过播放具有方向性(声音来自哪里)和距离(可以将用户注意力集中在特定元素上)的声音来提示用户。

在为 VR 设计音频时,制作 3D 音效是基础。2D 音效 VR 中表现不佳,因为它让一切都显得太平。3D 音效可以使你听到来自四面八方的声音——前、后、上、下——任何地方。你不需要使用专门的耳机来体验3D音效,通过头戴式设备的标准立体扬声器便可以实现。

头部追踪是良好声音设计的另一个重要方面。让声音以逼真的方式表现是至关重要的。这就是为什么当用户移动他的头部时,声音应该根据头部移动而改变。

7.预防晕动症

晕动症是 VR 的主要痛点之一。在这种情况下,视觉感知的运动与前庭系统③的运动感知之间存在分歧。在体验VR的过程中,使用户保持舒适是至关重要的。

③前庭系统:前庭系统是人体平衡系统的重要组成部分,它具有特殊的感受器,能够接受适宜的刺激,经过与其他感觉信息(如视觉信息、其它本体觉信息)的整合、加工等处理后,再经多条神经通路把这些信息传送到脑内更高层次的中枢,进行高层次的加工处理。

关于VR中导致晕动症的原因,以下是两种主流理论:

  • “感觉冲突”理论

根据这一理论,晕动症的发生是由于预期运动与实际经历的运动在感官上不一致。

  • “眼动”理论

在《 The VR Book: Human-Centered Design For Virtual Reality 》一书中,作者 Jason Jerald 提到,晕动症的发生是由于眼球的非自然运动,而这是保持场景图像在视网膜上稳定所必需的。

以下是一些提示,有助于避免用户使用呕吐袋(避免晕动症的发生):

  • 身体运动应该与视觉运动相匹配。有时即便是很小的视觉抖动也会对体验造成巨大的负面影响。
  • 让用户在切换场景时休息(当 VR 体验真正呈动态时,这一点尤为重要)。
  • 减少虚拟旋转

结论

当我们考虑产品设计的当前状态时,很明显我们仅看见冰山一角,因为我们局限于平面屏幕。我们正目睹人机交互( HCI )的根本转变——重新思考数字化体验的整体概念。在接下来的十年中,设计师们将打破这层玻璃(我们今天所知的移动设备时代)并转向未来的界面——复杂的语音界面、先进的 AR 和真正沉浸式的 VR。当创造新的体验时必须要明白,我们唯一的界限是我们的大脑总告诉我们,应该保持原样。


原文标题:Designing Emotional Interfaces Of The Future

原创作者:january

原文链接:https://www.smashingmagazine.com/2019/01/designing-emotional-interfaces-future/

翻译作者:阿钦

授权获取:张聿彤

文章审核:王翎旭

文章编辑:王鸿飞

该译文并非完整原文,内容已做部分调整。如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。如需转载,请注明来自 三分设

作者:三分设  来源:站酷

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

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



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



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

色彩趋势浅显总结

纯纯

四个色彩趋势:霓虹渐变、轻量渐变、高饱和度色系、梦幻色/幻彩色系从现实图库入手,总结出该色彩趋势对应的关键词以及色彩特征。对部分案例进行了解析,更深入地了解其运用方向以及实现技巧。希望这些内容可以起到抛砖引玉的作用,欢迎大家探讨。(图片来源于网络,原作者可提供原图链接进行标注)



一、霓虹渐变


现实生活中,炫彩夺目的霓虹灯效果常被应用于广告牌、灯箱的展示中,在暗夜的烘托下,霓虹灯展现出光影陆离的光影效果,吸引着人们的眼球,留下强烈的视觉冲击。如图所示,暗夜中的霓虹灯效果,为霓虹渐变的现实灵感来源。

夜色下的霓虹灯


关键词

undefined


霓虹色特点总结

1、以紫色、蓝色、洋红为主的冷暖色搭配;

2、整体颜色对比度高;

3、以冷色调为主,局部暖色调,搭配霓虹光感对比色点缀;

4、背景用暗色调更能凸显霓虹效果;

5、根据霓虹灯的灵感,采用了霓虹灯发光的效果。



近年来,强视觉冲击的渐变色被广泛应用在各个领域,包括宣传海报、综艺节目、游戏等等,其中最为瞩目的是霓虹渐变,设计师通过将这种高饱和度的渐变色与暗色调背景结合,形成强烈的视觉冲击,突出主体,渲染氛围,使整个画面的色调更加活力化、年轻化。


01 娱乐案例

最近较火的综艺节目“这就是街舞”,其宣传海报通过高饱和度的霓虹色渐变,与人物及背景形成强明暗对比,结合对人物本身的光影细节刻画,突出人物主体,增强画面视觉冲击力


02 游戏案例

2020年7月,由Veewo Games发布的一款游戏「霓虹深渊」,画面以紫色、蓝色、洋红的冷暖色搭配为主基调,通过明暗色的对比,以及大面积的紫色光影渲染氛围,营造出极强的未来科技感,而霓虹光感的使用以及涂鸦风格的融入,使得游戏更加时尚、自由。



01 专题页

页面整体以紫色,蓝色,洋红为主,冷暖色搭配,营造出层次感,活泼生动且年轻化;偏暗色调的霓虹渐变色背景烘托出专题页的内容主体,使得页面运营氛围更好、更强;同时在一些重要的、需要用户操作点击的部分使用了暖色调的霓虹色渐变,使得内容主体在冷色调的环境下更为突出,提高了用户体验。


02 App

以暗色调背景作为烘托,搭配紫色、蓝色、洋红为主的冷暖色,是霓虹色渐变经典的应用方式。在暗色背景下运用霓虹色渐变,通过明暗的强对比突出页面关键元素,对用户进行视觉引导,同时丰富页面层次,增强页面的视觉冲击力及艺术感染力


03 Web

暗色的背景与撞色霓虹搭配的插画手法使得界面看起来更加的酷炫和高科技,整体页面在霓虹色渐变的使用下更富层次性。通过主体与环境色的呼应、冷暖明暗的对比,展现出主体光源对空间层级的变化效果。此组合用来作为web头部页面,冲击感十足,科技感也非常的棒。


04 Icon

通过高饱和度的霓虹渐变色彩,结合外发光、叠加、模糊等多种技法,塑造出更加丰富的光影效果,不仅增强图标视觉表现力及空间感,更凸显了图标的风格化与趣味性。暗色调背景的烘托,使霓虹色渐变图标更加有质感,更加突显。


05 插画

通过大面积的霓虹色渐变结合迷彩渐变的绘制手法,构建不同色彩鲜明的矩形图案,暗色调的背景烘托与颜色用冷色为主暖色为辅、点缀,画面感极强,极具视觉冲击力。



霓虹色渐变在暗色调的背景烘托下,撞色的冲击感使得画面更加具有科技感、潮流感;对于霓虹色渐变使用比较频繁的赛博朋克风、故障风,也是现下较为流行的风格,通过丰富鲜明的色彩与背景作强对比,营造出极具视觉冲击力的画面效果;同时霓虹渐变色也被广泛的使用于app、web、插画等领域,虽然它出现已久,但其大胆、强烈的配色风格给画面带来的冲击感以及潮流、自由感,使得它仍然成为当下一种比较流行的色彩趋势。



二、轻量渐变


通过对2021年色彩趋势分析发现,渐变色的运用仍然非常流行。相较之前运用较多的强视觉冲击类——对比色渐变,轻量渐变在色彩运用上变得更加理性与克制。主要特征为轻量、柔和、层次递进,营造一种舒缓、治愈的沉浸感。



色彩上的渐变是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩,充满变幻无穷的神秘浪漫气息的颜色。根据强弱程度分类,渐变主要分为强渐变和弱渐变,轻量渐变属于弱渐变范畴。在过渡的过程中,轻量渐变特点为渐变色彩邻近,幅度轻柔,节奏缓慢,融合感和细腻感较强


关键词


轻量渐变特点总结

轻量渐变是一种简约且高度可用的元素,它可以创造出一些时尚的氛围,但是又不会有信息过载的担忧,这使得轻量渐变成为一种富有感染力又非常实用的设计解决方案。轻量渐变特点之一为明度高、饱和度低,色彩轻量而透气。在轻量渐变的使用过程中,同色系、邻近色系较多,其过渡自然柔和。



01 毛玻璃案例

透过今年各大设计网站上的作品不难发现,较多的视觉设计师将轻量渐变的色彩趋势与毛玻璃的质感趋势结合,运用在界面中。下图画面中,轻量渐变的柔和属性搭配上毛玻璃的朦胧感,营造一种视觉感官的舒适感与呼吸感,已成为2021年UI界面设计趋势之一。


02 3D案例

当轻量渐变与3D碰撞时,则会产生更加趣味的视觉化学反应。画面中使用的3D效果可以最大限度还原现实世界的材质与光效,呈现极具脑洞的“超现实”效果,为用户呈现不可思议的异度空间,吸引用户眼球。画面中的背景使用了轻量渐变来创建出多彩的模糊背景,为3D素材创造出另类维度的空间感,增加了画面深度,使设计更具真实感。



01 首页Icon

自如app最新的首页风格采用轻量渐变+毛玻璃效果,金刚区应用最为明显。图标的色彩选用低饱和邻近色,遵循3色系原则,使得整体色彩统一且不失丰富。从单个图标看,色块部分采用单色渐变,通过easing gradient插件工具调整渐变值,以达到最佳效果。毛玻璃特有的通透感,会将渐变色块透映出来,故制作毛玻璃效果时,需添加环境色使其融合。


02 启动页

两个启动页中均采用高明度、低饱和度外加一些毛玻璃微透质感的表现手法。第一个界面主要传达安全、简洁、可靠的情感,第二个界面则表现的是活动主题的梦幻感。这两个页面虽目的不同,但却均体现了柔和、细腻、轻量感的视觉感。设计师发现,使用者在经历过传统大色块、大面积、较强冲击力渐变的视觉后往往更加想追寻视觉上的宁静,所以视觉负担相对较小、相对轻量的微渐变色彩和可以利用微透质感减弱色彩冲击力的毛玻璃相结合的视觉效果越来越多地被运用。


03 界面背景

在界面背景中,使用少量的邻近色渐变来做通栏背景,使整体氛围更加柔和、富于层次感,同时起到强调头部的作用。卡片处采用透明毛玻璃效果,利用毛玻璃特有的通透感,透映出底部渐变,使卡片兼具质感与美感。


04 彩色化卡片

卡片中采用同色系的轻量渐变效果,营造融合、舒适的视觉观感。卡片的颜色根据色彩情绪进行选取,增加辨识度,进而增加点击率。



渐变之所以每隔几年就会成为设计流行趋势,很大程度上得益于它自然的特征和普遍的吸引力。今年盛行的轻量渐变,更多从用户的角度出发:减轻界面给用户带来的视觉负担,为其提供更轻盈的视觉体验。在应用的过程中,轻量渐变与毛玻璃、3D等流行表现形式相结合,可创造出全新的、有趣的视觉体验,不仅在外观上起到美化的作用,在功能上也达到了强调、醒目的作用。



三、高饱和度色系



在过去的两年中,高饱和度色系的应用已经是重要的趋势之一。年轻人作为移动互联网的主力军,他们青春,活力,有朝气,因此,代表年轻活力群体的鲜艳,高饱和度色彩成为视觉主流趋势之一。偏高饱和度色彩更易吸引注意力,烘托主体,影响用户情绪,提高品牌的识别性,增强品牌影响力。


关键词


高饱和度色系特点总结

1、颜色饱和度高,艳丽;

2、色彩丰富多样;

3、视觉冲击力强;

虽然高饱和色彩视觉冲击力强、更容易传递情绪,但在使用时仍需克制使用。原因在于:1.过高的饱和度,容易产生视觉疲劳;2.高饱和度的颜色并不适合所有的用户群体。

这里说的高饱和度的颜色,并不是一味追求高饱和刺激性颜色,我们在使用时候,仍需对颜色的明度,饱和度进行合理设置,这样才能保证我们视觉上的舒适性。



综艺海报案例

在综艺海报中,高饱和度的半插画+实物的表现形式,让画面极具趣味性和视觉吸引力,获取了大批流量。



01 产品品牌色

偏高饱和度的色彩,在UI设计应用中,往往更容易脱颖而出。而一些品牌的品牌色往往就是偏高饱和度的颜色,比如UI设计中品牌色的运用,在一定程度上可以将品牌影响力扩大化,品牌影响力,也会让用户增加信任感。

例如,微信的绿色,饿了么的蓝色,美团的黄色,淘宝的橙色......等等这些品牌色,都深入人心。

高饱和度品牌色


02  运营色

活动营销类弹窗,以及运营类的H5,运营专题,促销类的BANNER中经常运用高饱和色的视觉刺激以达到强调、引流的作用。



高饱和度色系以其绚丽、强视觉冲击力等特点,在UI设计中一直被广泛的应用。它可以更好的营造氛围、传递情绪、增强视觉层次结构、提高品牌的可识别性。撞色、插画+半实物、手绘等各种新式流行的表现手法使得高饱和色的运用上更加丰富多样。



四、梦幻色/幻彩色


 

广义上,我们将富于想象力的色彩,或者说体现人生丰富多姿的色彩称之为“梦幻色彩”,像泡沫、像天使、 像梦境、像糖果...


关键词


梦幻色/幻彩色特点总结

梦幻色在颜色面板中处于中间偏上部分,即特点为中纯度、高明度。

配色方面和谐,视觉效果相对温暖柔和。常以简单、干净的背景为衬托,烘托主体物以及主色调。色彩场景偏向幻想、天马行空的自由世界,给人以浪漫的色彩感受,容易令人沉浸在画面的温暖氛围中。



现今,色彩作为重要的视觉语言而被越来越多的设计师所关注,而在实际设计作品输出当中,颜色也扮演着将产品理念传递给用户的媒介⻆色。可见,完整的设计作品是离不开色彩的表现的,那么了解色彩趋势就会显得尤为重要。而在众多颜色中的梦幻色,更是极具前沿性和突出感的色彩。


糖果色插画案例

色彩倾向明快轻量,采用颜色烘托主题的表达方式,较能抓住用户眼球。塑造了色彩多变的视觉风格,适用于多种品牌调性,给用户温暖、轻松且焕然一新的感觉。


绚丽配色案例

在下图插画案例2-绚丽配色中,能发现绚丽配色类插画通过光的运用,让画面呈现出细节更丰富的视觉效果。 一些光晕的重叠使用,使得画面变得朦胧,更显梦幻特点。另外,梦幻色还可以营造神秘的氛围,在网站首页使用的梦幻色彩,搭配引人入胜的画面,神秘感的体现更加突出。吸引用户的点击,从⽽提升⽹站的浏览量,实现流量变现。


材质案例

在材质-塑料质感中,大面积的梦幻色彩渐变,形成很强的视觉冲击。塑料的质感配合灯光与彩色渐变,显得非常梦幻;透明的气泡材质,整体质感给⼈轻盈、透亮。这种流动的色彩呈现出了源源不断、生命不息的美好愿景,带给观者美好的想象。



01 3D物体

梦幻色应用于3D物体中,整个画面更加丰富多彩,温暖、轻松氛围下的物体仿佛将从屏幕的束缚中挣脱出来,拉近了画面与观者之间的距离。


02 手绘插画

这是一组描绘田野间的手绘插画,为观者提供感观上的愉悦。一切事物在自然中的蓬勃生长以及梦幻色下烘托出的神秘感,使得整体画面有种超脱现实、游离人生的美感。形成了以自然景观为主导的唯美风格。


03 App




虽然梦幻色没有特别靓丽夺目的色彩特点,但在梦幻色的使用中所烘托出的特定氛围,不但突出了不同产品的特点,也更加满足了用户的情感需求。色彩趋势必然与时代潮流以及用户喜好紧密结合,作为设计师的我们需要了解,并能与我们的设计产出进行结合。



结语


日新月异的生活是色彩趋势的灵感来源,这使得色彩的流行趋势不断更新变化着。作为设计师的我们,要保持一颗敏锐的心,不断从现实生活中捕捉灵感,将自然赋予我们的宝贵灵感运用于作品中,从而增强设计的原创性,给设计行业注入新鲜血液。其次,趋势是方向,不能盲目追随,需要不断思考总结沉淀升华,并将其合理运用至自己的作品或项目中。设计就是在实践中不断探索与总结!这是我们写这篇文章的初衷,最后也欢迎大家积极探讨。


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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


设计思维中的共通性和差异性

纯纯

“ 设计思维是一种以人为本的创新方法,它借鉴了设计师的工具包,整合了人们的需求,技术的可能性以及商业成功的要求。” 


设计思维

关于设计思维的文章我们也看过不少,也听过大佬们讲什么是设计思维,可都停滞于带我们了解初识阶段,并没有教到我们怎么去践行设计思维。设计思维 (Design Thinking) 是一种设计方法,提供基于解决方案的方法来解决问题。解决方案是什么?究竟要解决什么问题?如何去解决?在参考了大量的文献后,更多的是在阐述设计思维是什么,具体的分类和步骤,更偏向于介绍和展示相关的知识。比如 Google 的 Design Sprint 方法论,比如 IDEO 首席执行官 Tim Brown 提出的可行性三原则,比如斯坦福大学哈斯普拉特纳设计学院(d.school)提出的五阶段设计思维模型,而根据 d.school 提出的五阶段设计思维模型,大部分公司都基于这个模型进行变量修改后作为自己的设计思维模式,这五阶段设计思维模型为:同理心 (Empathise) - 定义 (Define) - 假设 (Ideate) - 原型(Prototype) -测试 (Test) ,几乎大部分的设计思维都基于这五阶段模型做的改变。



用同理心代入 (Derivation) 定义,用同理心建立 (Build) 原型,通过原型反推 (Reverse) 原型的成立,最后用测试结果证实 (Validate) 定义的正确性。

现在对设计思维有了大致的认识,这里也不花太多篇幅去描述,但是全部看下来感觉自己脑袋晕乎乎的,那究竟我们在具体的工作学习中,要如何尝试性代入且应用设计思维来做设计呢?通过一些项目的经验我总结出关于如何运用设计思维做设计的方法,就是通过寻找产品之间的共通性和异样性,深挖出关键性的问题所在,最后去解决这个关键性问题。



共通性与共同性

共通性和共同性在意义上有根本的区别,共通性是指相通或者适用于各方面的东西,比如共通的道理,共通的方法;共同性则是指彼此都具有相同的性质,比如大家共同的目标,共同的性格;产品与产品之间也是有共通性和共同性的,只有找准产品的共通性,才能深度挖掘到核心问题的所在,从而通过设计手段解决核心问题。

与同类竞品分析不同的是,竞品分析需要通过大量且快速的对比找到各类产品之间的共同处和差异处,而寻找产品的共通性,则需要对逐个产品进行深度剖析,挖掘共通的点 (Point),然后把这个点透过三原则:可行性(Feasibility),可取性 (Preferability) 和创新性 (Innovativeness)分析来设计产品解决问题。一款产品或者某个功能模块,只有在可行性和可取性中产生交集时,才可以在此之上进行创新设计,可行性可以理解为开发可实现,或者和业务需求没有冲突的模块,可取性是指性质上可以取用。



举一个简单的例子,某个模块希望通过弹窗的形式提升某二级页面的跳转率,那么提炼出业务诉求关键点:

  1. 1.提升二级页面的跳转率;

  2. 2.通过弹窗的形式展现;

那么可取性就是【弹窗】这个 Piont,而可行性同样为弹窗形式,那么他们共同的交集之处就是弹窗顶部的氛围层和行动点,设计师就可以在这两个交集处做自己的创意发散,比如在弹窗头部氛围做的很强烈吸引用户,或者把行动点设计成带有动效的按钮以此来吸引用户点击等等。产品设计中通过共通性挖掘问题,而承诺和顾客的体验达成共同相通,这是为了赢得用户信任和尊重的需要。


产品的共通性

做产品第一步就是找出同类竞品之间共同之处,把他们共同的地方记录下来并做出统计。比如我需要做一个关于 UGC(用户原创内容)的内容社区,那么我前期得搜集同类竞品,比如 MONO、新草、Lofter等等,找出他们共同的地方。首先来解释为什么要寻找共同的地方,根据模块出现的频率排列出模块的优先级,这是一款产品从零到一必须要经历的阶段,但往往很多产品到这一步就停止了,然后像堆砖砌瓦一样,它有的我 Duang 地加上去,另一个它有的我也要 Duang 地加上去,我全都要!最后导致产品做出来架构不清晰,目标不明确。这就是为什么老有设计师疑惑:为啥总是左改一版右改一版业务方/老板就是不满意,这在战略层就出现了的问题,跳到执行层上改来改去,肯定怎么改都不会有一个满意的结果。这时候就需要将搜集到共同的地方做分析,找出它们各自存在的性质,然后挖掘产品的共通性。



通过各类竞品搜集下来可以看出关于社区模块的内容大致分列为:话题标题占比18%,统计信息占比18%,话题说明占比16%,心智氛围占比8%,内容分级占比4%以及其他内容填充占比36%,具体归类成A.标题&统计、B.话题说明、C.心智氛围、D.分级信息和 E.其他信息,然后排列优先级顺序为:A>B>C>D>E,最后一步就是分析各自独有的性质:


A.标题&统计信息:话题标题和统计信息属于必要模块,标题显示话题主题,统计信息展示话题关注度等信息,增强话题氛围;


B.话题说明:是对话题进行的补充说明,也可增设相关活动等文案;


C.心智氛围:心智氛围的增设用于对话题主题的传达以及突出用户的参与感;


D.分级信息:分级信息对用户的筛选起到至关重要的作用;


E.其他信息:其他信息皆为用户提供UGC或者平台提供PGC。


而这类性质可以统称为社区类模块产品的共通性,提炼出产品的共通性有什么用呢?如果一个社区类产品上线后发现用户参与感热度不是很强,那么就可以从心智氛围模块去分析是否问题出在这里,是否应该加强话题的心智氛围,或者是否可以通过投资邀请专业的人士通过生产 PGC 来带动社区的热度等等,只有先去了解产品之间的共通性,然后找出关键点提炼出关键问题,在战略上提出解决方案,才能从根本上解决产品问题。



就好比一个人捂着肚子冲进诊所,医生首先了解捂着肚子的性质,是阑尾炎?是胃痛?还是其他的疾病,只有先熟悉各类疾病的性质原因后,通过排查筛选找出根本的原因,才能提出是做手术还是药物治疗的解决方案;同理,回到之前的那个问题:为啥总是左改一版右改一版业务方/老板就是不满意,都没查出究竟是什么原因导致肚子痛,就开始开刀手术或者胡乱吃药,运气好了胡乱吃药吃对了解决了,运气不好被折腾凉了,最后的结果就是产品模块下架撤离,所以无论是从零到一的产品还是业务改版,都需要找到产品之间的共通性,才能找出具体的解决方案。


设计细节的共通性

我们不难发现市场上很多出自于同一业务下的产品都有着自己的设计细节,而在这些母舰上都有着各个模块的附属模块,比如在QQ产品里的兴趣部落、NOW直播、微视等模块,比如在淘宝产品里的天猫、聚划算、飞猪等模块,那么在这些母舰下的附属模块,在设计细节上自然而然要和母舰保持一致性。举个很明显的例子:手淘设计语言中卡片的圆角为24px,手猫设计语言中卡片的圆角为10px(基于750px尺寸下),那么手猫其中的模块自然是要遵循手猫的设计语言——圆角的尺寸为10px,但是如果这个模块获取到手淘透出的资源,那么在设计上,就要遵守手淘的设计语言——圆角尺寸为24px。



那么你会问了,这样最多只是相同啊,有什么性质意义呢?这和共通性又有什么关系?不同的产品所面向的用户群体是不一样的,所以主打心智也不一样,设计上的细节传达给用户的心智一样的不同。众所周知,淘宝主要面向的用户群体是大众的,天猫主要面向的用户群体是追求更高质量或者品牌的,那么在细节上,24px的圆角卡片带给用户的心智是友好亲切的,10px的圆角卡片带给用户的心智是偏向更精致更高质感的;其次,如果用户通过手淘的场景进入天猫的模块,一会儿24px的圆角一会儿10px的圆角,长时间下去用户自然会分不清当前场景是天猫还是淘宝,这是在产品一致性上做的共通性协调工作。所以如果是同类系的产品或者是模块,在设计细节上一定要注意,保持模块与模块之间的共通性。(有的人可能不会注意到这些设计细节,设计细节既然是细节,个体本身影响力不是很大,很容易造成忽视,但是如果个体增多形成量级的话,造成的视觉影响是很直观的



差异性

差异化策略是从改变产品的“绝对差异化”到改变认知的“相对差异化”,越来越着眼于“人”的视角。在如今发展迅猛的网络营销时代,“人”的因素更是被置于产品运营和品牌营销的核心位置,不过,这并非表明“定位”理论变得越来越重要了。这点做品牌的朋友相信有更多的感触,但是无论你是做产品的,还是做品牌的,要想脱颖而出,首要的策略就是“差异化”。大家都知道平台产品的最终目的是实现商业价值,可是如何实现商业价值,就是要通过产品之间的差异化来寻求突破点。



产品的差异性

依旧拿上面那个社区产品当例子,同类对比我们发现,大多数的社区产品更多的是流量引进来营造平台氛围,无论是通过 PGC 的形式还是对内容的打造,但是在商业价值化层面上则很少有渠道介入。那要如何通过设计表达出差异化并且实现商业价值,就需要对实现商业价值有一定的了解。当社区把流量引进时,实现商业价值常见的几种方式有:

  1. 1.广告宣传的推广;

  2. 2.电商平台的转化;

  3. 3.流量引导产品模块的介入等等。

以电商产品举例,我这个社区模块将流量引进后,需要致使用户通过 UGC 或者 PGC 种草的内容去购买所对应的种草商品,知名的社区电商产品的确也是这样做的,比如小红书、Lips等等,但是不难发现此类产品都有一个共同的弊端:用户需要先记住种草商品的内容后,自行去购买采购商品,这样可能就去了淘宝、京东等等更加知名的电商平台,最后为他人做了嫁衣,那么这一块就是关键突破点。



通过寻找差异性找出关键突破点问题所在,并推导出相关的设计策略:平台可以通过招商的形式发布社区话题,并且可以通过“参与话题送 xx 额度的优惠券”、“参与话题并分享给好友获取 xx 限量商品”等形式刺激用户参与话题,并且也给用户很方便的渠道入口直接进行商品购买,防止流量丢失为他人做嫁衣;商家通过入驻平台提供话题,平台流量导入参与话题,商家通过参与话题给予优惠等活动引导用户购物,用户通过平台参与话题了解品牌获取参与感;类似线下商场搞一些活动,品牌店给一些优惠券之类的当作参与活动的奖励,然后客人可以去到品牌店消费,最终实现三方获利的商业闭环!

不难发现,通过寻找产品之间的差异性来挖掘出关键点问题,然后在此基础上解决问题做出创新。追求差异化,是产品基于竞争角度永恒的主题。这种差异化甚至贯穿了产品生命不断迭代的全程,也贯穿在与品牌相关的一切要素中——产品、包装、广告、价格、渠道、视觉、代言人等等,每种要读的动态演变,都是一种创新,具体需要那种要素在哪些时刻做出何种改变,既要考虑到竞争,也要敏锐觉察用户的需求、态度和行为的变化趋向。


设计细节的差异性

设计细节用共通性同样也有差异性,而细节的差异性有时候往往能起到产品的关键性作用。这里使用之前做的一个实际项目做例子:淘抢购模块 v4.0.1的改版。(保密性原则不透露任何数据)因为淘抢购 v3.9样式太过老旧,根据手淘语言更新的淘抢购 v4.0在投放过程中发现,成交量和成交率比 v3.9降低了很多,所以在 v4.0.1的改版中最主要的是解决这个问题。



根据用户采样调研数据分析我们筛查和对比发现,成交量和成交率下降的根本原因是用户在页面丢失,而用户丢失的原因则是因为淘抢购 v3.9首屏的 Sublist 商品坑位的透出比 v4.0首屏的 Sublist 商品坑位多出一个,对的你没看错,就是因为这么一个商品坑位的细节原因,导致 v4.0的成交量和成交率比 v3.9降低了很多,以至于引起重视从而需要解决问题。



找出关键问题后就要去解决问题,那么如何解决问题是关键。此处需要保证在不改变新版设计语言的基础上对首屏 Sublist 的坑位透出做调整,那么只需要坑位透出3.5~4个坑位就能到达预期的效果,如何在有限的空间里解决这个问题,做了很多版本的尝试。



通过各类尝试得出ABCDEF六种方案后,这时候需要从设计细节的差异性逐一分析然后进行取舍:


A.此方案为目前 v4.0实行方案,可以明显看出单屏的效率只能展示3个商品坑位,因此是造成用户在浏览的过程中会流失的根本原因;


B.此方案计与 v3.9通栏无太大差异,所以问题就是:1.版式陈旧老化;2.信息过多整体会导致页面看起来杂乱无章;


C.此方案除了版式陈旧信息过多问题外,图片变小导致用户对信息细节辨识度不高,直接pass,所以通栏的方案在当前场景中完全不可行。



D.此方案基于 v4.0上,缩进了卡片内信息的距离,更加突出“抢购”的紧凑感氛围,同时单屏能显示3.5个商品坑位,解决了屏效的主要问题,同时数据显示比通栏式设计曝光点击率有所提升,也符合淘宝的设计风格规范,但是单卡片样式商品与商品之间分割感太强烈;


E.此方案将所有商品坑位包含在一个大卡片内,解决了商品与商品之间的分割感,商品信息细节也比小卡片展示得更完全,但存在问题就是:每个商品之间的间隔存在的分割线导致间距过大,屏效又回到旧版只能展示3个的问题,不能解决主要问题,所以pass;


F.此方案在大卡片设计上进行了优化,取消了分割线的设计,缩进了商品与商品之间的间距,解决了小卡片式商品与商品之间分割感强烈的问题,图片的大小信息细节也能给用户良好的体验,最主要单屏显示3.5个商品坑位,解决了最主要的问题,也符合最新的淘宝设计规范和风格,此方案为最佳方案。



最后采用了F方案,也就是目前我们线上看到的效果,在灰度上线和 A/B test 后数据反馈,淘抢购 v4.0.1的成交量&成交率相比 v4.0有很明显的上升甚至超出了 v3.9的数据,这是通过寻找设计细节上的差异性来解决问题最好的案例。再次证明:设计思维不应被视为一种具体而不灵活的设计方法,细节的差异性有时候往往能起到产品的关键性作用,所以设计师从设计层面上去解决问题的时候,要不断通过寻找产品之间的差异性,培养自己设计思维中的差异性。


动效差异性的运用

产品设计中,动效作为一种辅助手段,帮助设计师传达具象的意愿,帮助开发理解交互手段,是一种锦上添花的表达;前面的内容更偏向于战略层,而动效则偏向于表现层,同一种想表达的心智不同的样式表达的效果完全不同。如何做好动效在产品中的表现,我们就需要了解不同的动效所带来的性质传达。



举个例子,某个弹窗需要对行动点通过动效的展示进行强化,但是同样是强化行动点,如果产品是需要体现出质感、高端等心智时,那么在动效上的处理上就应该体现出高品质高质感的动效,如果产品主要用户为女性或者年龄偏小的用户,则需要体现出可爱、亲切感的心智。那么在动效的选择上,就需要通过平时对动效的收集积累,然后熟悉不同的动效所表达的性质,才能从中选择最优的方案。比如 Q弹缩放的动效看起来亲切感更强,闪光的按钮看起来质感更加强烈一些。

动效向来是产品的辅助,动效应该是克制的,只有了解动效的性质,通过动效的差异性,完美地契合产品,才能发挥出动效的最大作用。



总结

在如今网络时代和社会化媒体的大潮下,产品设计差异化的力量不仅仅基于竞争,更要基于消费者需求的敏锐察觉和捕捉;设计思维的共通性和差异性,在今天也比以往任何时代都显得重要。识别和竞争的需要决定了产品一定要差异化,而诚信和责任要求产品必须做到共通,差异性是产品价值的基础,而共通性则是产品价值的保障。设计思维不应被视为一种具体而不灵活的设计方法,而是需要设计师们通过自己的经验积累,刻意地培养设计与产品之间差异性和共通性的意识,总结归纳出一套适用自己的设计思维。




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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


2022追波设计流行趋势

纯纯


随着C端市场饱和与数字化的浪潮下,实体经济、ToB 、ToG的产业再次迎来了它的曙光。视频动效的作品占比也已超过C端界面设计,相信今年视频动效作品占比还会再次提升。



追波年度最佳作品

追波年度最佳作品来自大家最熟悉的UI8团队中的Tran Mau Tri Tam ✪,作者来自越南西贡,最佳作品截止目前355K浏览量,2933个赞


为什么看似平平无奇的作品却能获得追波年度最佳作品呢?既不是C端也不是纯B端的作品,更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮,你可以理解它就是一个平面作品,一个字体加几何形体构建的作品,为了丰富画面的层次,让画面更加的活泼采用了多彩加几何色块,让标题阅读有停顿感和呼吸感。faster底部的横线让它从标题文字中脱颖而出,这种使用线条突出重要信息的设计也是今年追波设计流行趋势之一。


MetroUI是Windows8的界面设计语言,在2010年至2013年间曾经风靡一时,那也是移动互联网的发展元年,现在国家推行实体经济、数字化带动To B 、To G 的发展元年,通过几何色块(MetroUI)实现B端产品与C端设计风格的传承与衔接,你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风,毛玻璃的多彩高斯模糊渐变风,年度作品当之无愧。


最后来看下按钮的设计,正常的按钮要么文字加色块,要么左图标加右文字,它设计成左文本加右图标,更加注重信息的可读性和易读性,也体现B端设计重功能和交互体验,视觉点到为止的设计理念。


下面我们来欣赏年度最佳作品里面的流行趋势吧。


易读性(停顿感)

字体三原则:可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章,肯定设计文章的内容可读性更好。易识性是用在字体设计上,不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关,因为我们都需要编排文本。当我们小时候写作文时,不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感,更加适合用户阅读。


通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容,丰富文本内涵。比如情侣间表达爱意时会输入文本,“我爱你”、“我Love你”、“我ai你”、“我❤️你”,哪个更加会有情感共鸣呢?不言而喻,相信你心中已经有答案了。



曲线

在标题文字上添加曲线来突出重要文案是2021追波最流行的趋势之一,第一个设计目的就是突显文字,其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中,签字的文本都是手写体的感觉,手写体对比电脑的机械字体会带有一种人文气息,也会让两者之间产生一种对比、矛盾


除了突显文本外,曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试,通过真实用户眼睛浏览界面显示对应的热点图。



多彩高斯渐变风

多彩高斯渐变风是从色彩的角度来传达和丰富画面的,多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程,多彩渐变多为冷暖对比来制造画面的冲突,需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。


多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新,给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上,为了更好的传达信息需要去设计与内容相匹配的视觉风格。




B端界面设计


侧边栏Sidebar

B端设计的火爆带动了B端相关模块设计,更多的人也愿意尝试B端相关模块设计,侧边栏作为产品架构中重要的导航系统,好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果,也是受限于PC屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。追波的B端产品设计已经不再是假大空概念设计,而是一套实用美观可落地的设计。



仪表盘设计

仪表盘设计是一个很好的隐喻,想象一下开摩托车或汽车主驾驶前面的屏幕,汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态,大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据,团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同,自定义的仪表盘也各有差异。重要的是突显数据和业务状态,需要分层级系统性去思考和设计。



流程设计

复杂的事情简单化,简单的事情标准化,标准的事情流程化,流程的事情自动化。流程设计是每一个企业核心功能和业务,可自定义的管理流程系统搭建也是B端产品设计的难点,需要对业务高度抽象,让每一个业务人员可自定义的流程才是好的流程设计。



B端C化

B端C化是B端产品设计的视觉表现力慢慢往C端产品设计的视觉靠齐,国内B端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外,由于业务的发展,B端产品也开始移动化、智能化,国内主流还是通过小程序、H5来现实B端产品C端化



轻代码化

轻代码化是一种低代码赋能无代码的方式,弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时,又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统,轻松实现多元业务场景的数字化管理


轻代码化将功能进行打包,升级成全局可以用的配置,技术人员配置好后,业务人员在应用编辑时直接选择使用模版,绑定对应的变量即可使用。




界面设计技巧


人文气息

为什么人加色块的组合方式能流行起来?还是B端行业流行带动的。B端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外,还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起,这种人文气息和价值观已经就不言而喻了。


当然企业也需要进行营销,抓人眼球。几千年来的遗传证明了,人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。


这种风格更适合大公司,国内的一些手机厂商OPPO、VIVO等也会通过手机+背景+人物来体现科技与人文的结合,而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。



毛玻璃效果

毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的顺应当下UI扁平化的设计趋势。苹果Mac OS Big Sur系统的图标、界面中运用了大量毛玻璃和半透明元素,界面更扁平。至于C4D三维彩色玻璃的视频教程可以在B站搜索“透光艺术-C4D创建彩色玻璃的4个技法”,完全能满足UI设计师。当然还有一个好消息就是Mac用户可以享有OC一年免费的使用权,具体安装购买方法可以上“某宝”就可以轻松搞定,真香。




轻拟物

轻拟物这几年一直流行,在UI设计中趋于稳定的位置。从写实到扁平再到轻拟物,其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光(环境光)五个部分的处理。写实三维的图标等设计更适用于简洁的画面中,扁平等设计更适用于复杂一点的界面中,比如B端产品界面中的功能图标。轻拟物可使用的范围更广,效果更佳。Sketch、Figma软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。




简洁设计

简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则,在B端产品界面中更加需要简洁设计,我们最熟悉的Sketch软件界面已经是相当的简洁了。回到现实当需求功能不断增加,产品界面的编排如何取舍,如何保证界面的简洁是设计师需要深度思考的问题?如何与上级沟通?该功能是否可做可不做?是否需要埋点用数据说话?如果只是一味竞品有我们就需要有,功能不断累加只会让界面越来越重。



几何图形

几何图形和几何插画有异曲同工之妙,几何图形多为产品界面和宣传内容的抽象,产品界面的几何图形多为占位符形式,加上色彩和几何色块让其成为一个整体。B端产品视觉设计C端化的进程中,几何图形、几何色彩不失为最好的突破口,相信今年追波B端产品的视觉设计一定会更上一个台阶。



几何图形另一个场景化的地方就是品牌,作为一名UI设计师一定会经历从图标到几何图形到品牌设计的过程,品牌设计的技巧基本还是以几何图形为主,至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。



暗黑设计

暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大,如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳,提高在夜间使用的可读性


在设计暗黑主题时,不能为了突显视觉上的逼格,而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design给出了暗黑主题的设计准则,即正文和背景之间的对比度应至少为15.8:1。按照此标准设计,可读性都还不错。这里介绍一个插件“Stark”(Figma、Sketch、XD、Chrome插件)用来测试界面的对比度。



模块化(组件化)

为什么叫模块化,而不叫组件化,组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面,但在B端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提,是否有从0到1搭建B端产品组件的经历是设计师一生中最宝贵的经验之一,它能提高设计师的系统化思维、逻辑思维和抽象思维能力


产品模块化设计就是将产品分成几个部分,也就是几个模块,每一部分都是具有独立功能,具有一致的连接接口和一致的输入、输出接口的单元,相同种类的模块在产品族中可以重用和互换,相关模块的排列组合就可以形成最终的产品。通过模块的组合配置,就可以创建不同需求的产品,满足客户的定制需求 。




插画

插画作为设计的一大品类,不同的插画师都有自己擅长的风格,本质是都有自己的个性,但是在产品设计中更多是需要共情、共性来讲故事,表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合,插画不会过时,而是需要结合当下和产品找到最匹配的设计风格。



几何插画

几何插画算是插画简化的一种表现形式,人和物的形态不再写实,而是抽象成几何图形拼凑的感觉,同时保留人物形态的神韵。加上几何色块与人物交互形态的表现,传达出简洁、科技的现代感。难点还是在人物形态的表现上,平时多练习练习速写还是很有必要的。



线面插画

线面插画最近一两年非常流行,准确的说是非常适合。首先线面插画主要是由线条和块面组合而成,用块面表现人物形态时某些结构会表现不出来,这时候用线条简单勾勒后,结构就会清晰明了。其次当线面插画运用在界面上时,可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时,还能保持界面的干净整洁。




动效


微交互

界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计,微交互和动效设计是绕不开的,UI界面设计通过微交互反馈告知用户当前正在发生的事情,所处的状态。细微的动效更能调动用户情绪,取悦用户。C端产品微交互和动效已经很成熟了,一部分功劳来自iOS系统原生自带的效果。B端产品的微交互和动效更多还是在学习海外产品,还需要给前端工程师灌输微交互和动效的设计价值,共同打造产品体验细节。



Mg动画

Mg动画需要很好的节奏感、韵律,每一个场景动画都需要其中的元素进行连接变化,让转场动画更加自然,MG人物动画通过点线面的动效变化让画面更加有趣、自然,通过粒子效果让特定场景无限循环会让人更加印象深刻。




三维


三维图标

MacOS Big Sur系统图标的更新带动了三维图标的流行,三维图标的应该场景还是需要有较大留白空间的界面,因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上?设计师应该保持开放多元的视角。设计本身也在不断的演化融合,存在即合理。合适最重要,它们都会有适合自己的场景和设计价值。



轻三维

为什么轻三维在界面设计中占有一席之位?一个是设计师不断追求差异化的产物。另一个是更好的表现内容,并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素,比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等,这些都是用户日常使用系统软件常见的元素,通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角,结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加,特别是当下流行的毛玻璃效果,玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光,局部的渐变色或环境光更佳出彩



P4D(PS+C4D)

P4D是PS加C4D的设计表现技法,也是视觉设计的最后一个环节,通过PS对C4D的渲染图片进行调色,利用PS的调色技巧可以很好的解决C4D打灯光的瑕疵,还可以利用PS强大的合成功能,将渲染图片与图片素材进行合成,来表现画面的视觉度,当然三维软件比较难实现的水、粒子、烟花等效果,也可以通过PS的后期合成来实现,这也是P4D的强大之处。



卡通IP

卡通IP设计最近三四年技术的迭代已经慢慢的走上成熟,卡通IP也从传统的纯PS手绘技法,转到C4D建模—角色绑定—MD衣服制作—OC渲染—PS(静态)/AE(动态)调色


卡通IP火的本质更适合做营销,相比于品牌或Slogan,卡通IP具有亲和力和画面感。随着各种手办行业大热,受互联网大厂影响下,卡通IP已经是互联网B轮以上公司的标配了。如果团队中没有这样能力的人,也可以通过绘制好二维,一套三维可以选择外包完成。


对于UI设计师来说学习是有成本的,暂时并不是必备技能,如果喜欢完全可以学习,从设计差异化的角度来看三维视觉确实有一定的竞争力



三维动画

C4D三维场景动画通过构建实物和场景模拟生活中的现实场景,会让用户体验真实感,三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感,未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中C4D软件对于域、动力学还是有一定的优势




存在即合理,趋势流行稍纵即逝,注定是不长久的,只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注,因为哪有什么所谓的创新,只不过是旧元素的重新组合,并符合当下这个时代人的审美需求。香奈儿的“时尚易逝,风格永存”大概就是这个意思吧。

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



2022 年 UXUI 设计趋势

ui设计分享达人

2022 年即将过半,疫情在家的我们重新花一些时间,回顾今年最引为人注目的一些设计趋势,有些已经变成现实,有些可能即将会发生。在过去的这十几年里,全国的互联网和移动互联网行业蓬勃发展,引发了 UX / UI 行业的火爆,无论是在设计技术方面还是在设计实践方面维持着快速发展状态。设计探索受到了前所未有的关注。创新也永不停止,正在向各个方向延伸——有的是昙花一现,有的是重塑想象,有的却循环往复。


下面我们将更详细地向你探讨一些 2022 年的设计趋势。

超级大的字体排版



The Badass Project 捣蛋派计划

过去几年里,大字排版的趋势越来越明显,字体尺寸也在增加!接下来,字体更大且几乎没有图像的时尚 英雄形象 网页设计,将成为主流风格。

(英雄形象在网页设计中是一个特定的网页横幅,通常是一个包含与内容相关的大图像页眉)

设计师和用户都越来越习惯在登陆页面前面和中心位置使用超大文字。无论是怪诞的无衬线字体还是现代奢华的衬线字体——这一趋势就是在于越大越好。通过精心选择的字体,网站可以做出比以往更大胆的宣传,以吸引受众的注意力并有效地信息传达。



这些字体选择通过 引人注目的动画进一步生动起来。设计师正在实现通过鼠标移动或向下滚动页面使排版移动并与用户产生互动的创造性效果。以粗体、动画和交互式排版为核心,许多网站也就不使用任何背景图像,让外观变得干净且精致。



MAFF

所以一定要试试这种趋势:把文本尺寸放大,可以将其放置在一些图像上,制作大尺寸的动态标题,让用户从中获得乐趣。最重要的是,要勇于呈现大胆强烈视觉效果,从而可以立即吸引用户的注意力。

案例:Medium 官网——https://medium.com/


复古风格回归



Shakib - Sneakerbumb

在经历了充满不确定性和阴郁的两年,我们学会了寻找和珍惜任何享受幸福的机会。我们大量独处时光的花在了数字空间上,这一现象也不例外。



La puce à l’oreille

为了回应这一需求,设计师从 80 年代和 90 年代获得了巨大的灵感;将色彩丰富、质感丰富、复古风格的主题与现代气息结合起来,打造真实的外观。鲜艳的色彩搭配柔和蜡笔肌理、古怪的排版、纹理丰富的背景、跨页面网格的布局、非传统的图像和古怪的插图,都可能会在接下来的一年吸引你的注意力。



Kristen Ryan for MakeReign

随着这一切的发生,我们甚至可以说,在过去几年里,每个人都学会了赋予自己一些自由的生活态度。这为我们提供了更多的实验空间,当然也为设计和其他领域带来了让人愉快的成果。这就是说,设计师们觉得有必要从简单和实用的用户体验转向有趣、搞笑甚至愚蠢的交互。出人意料的是,让别人微笑可能会是你的网站或 app 令人印象深刻的一种方式。

新野兽派设计



Blumenkopf

野兽派设计从 1950 年代的野兽派建筑运动中汲取灵感,延用其不修边幅、毛糙粗狂的外观形式,和故意做出的丑陋效果。就像在建筑中一样,野蛮主义在网站中揭露和解构(甚至庆祝)这种媒介的底层结构和重要原则。原始、大胆和反动的本性使野兽派设计一直处于数字空间的边缘,因为原始是互联网的全部。然而,近年来,野兽派一直在缓慢而稳定地复苏,现在被一些人称为新野兽派。



Caroselling


随着互联网上干净、传统的网站越来越多,个人网站变得难以脱颖而出。转向野兽派,提供真诚、原始但独特的视觉体验,可能正是提升你下一个网站的方式。


无网格布局,强烈的调色板,重叠的元素,拥挤和几乎混乱的设计只是你的野兽主义工具包的一部分。将它们与等宽和奇怪大小的排版结合起来,缺乏或极少的导航,这相当于没有额外的“空间”或子页面的“开放式版面”,你会得到一个引人注目的粗野派外观。



Work with us


案例:阿里云设计官网——Alibaba Cloud Design - Not Design Just Future


当然,还有更多,但野兽派网页设计的定义规则是没有规则;它反对既定的规则和惯例。更重要的是,你需要用更强烈的意义价值和意图来将你的野兽派杰作与另一个设计糟糕的网站区分开来。


本机桌面客户端



Messenger


Figma、Todoist、Slack和 Messenger 等网站和移动应用程序都把时间和精力集中在桌面客户端版本。



Todoist


越来越多的应用程序似乎也在效仿,因为研究表明,这样用户会感到 更舒适、更安全。用户希望自己的应用程序远离互联网浏览器,远离所有打开的标签,回到指定的应用程序窗口,让人感觉更宽敞、更专注。在使用这些应用程序时,不需要处理数分散注意力的标签,这无疑是一种进步!此外,将通知直接发送到桌面,我们的通知管理也必然得到改善。



Figma

本地化用户体验



为阿拉伯语国家的谷歌搜索页面布局


用户研究团队利用 人类心理学 领域的洞察,以及 可用性测试,已经能够塑造界面,为用户提供最大的满意度和愉快的体验感受。几十年来,这一直是用户体验设计的核心。

随着技术的快速进步,我们看到数字产品体验的保真度有了空前的提高。这一发展也为不同用户群体之间的细微差异提供了新的理解。年龄、文化、地理位置、日常习惯、社会结构(以及其他因素)的差异可能会导致人们对什么构成令人满意用户体验的期望存在显著的差异。因此,这些体验可能需要类似的设计,但肯定不是相同的设计方法。


随着技术和研究方法的到位,我们开始看到一款产品的多种变体同时推出,以满足不同用户的需求。随着许多大品牌都在努力扩大他们的用户群体,创造本地化的产品体验可能会成为一种大趋势——如果不是标准的话。


荣誉提名:包容性



NhuSW- Everyfit — Fitness for Everyone

包容性不仅是一种趋势,也是一种运作模式;人类生存和共存是一个不可否认的重要方面。在日益全球化的复杂世界中,我们不断意识到自己与其他个人或社群之间的差异。以同理心驾驭这些差异是我们的责任,并努力将所有文化、性别、性别、种族、能力和残疾都有意义地适当地纳入全球社会。



Spotify


随着数字空间引领着世界的全球化,它也毫无疑问地成为我们包容性努力的前沿。人们总是希望品牌和公司采用更具 包容性的叙述 和语言,并向包容性的平台、产品和服务 迈进。他们被鼓励在图像、语言和视觉语言中推动多样化的表现,这样做不仅仅是为了营销收益,而是为了更大的意义和价值。


这些是我们在 2022 年会看到的趋势和现象。记住,它们是为了提醒我们当前的总体设计趋势。可以使用它们来支持和授权您的设计决策,但不要害怕挑战它们,或用它们为人们创造更多积极有效的体验。


原文标题:UI/UX Design Trends of 2022

文章来源:Codeart

原创作者:Taras Bakusevych & Maja Mitrovikj

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

魏华的微信.png

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

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

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

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

网站设计之九:高手出品!2020~2021年UI界面设计趋势

博博

2020年已经过去一大半,这些时间以来,我一直在关注数字设计领域未来的设计趋势。从年初就开始收集,到今8月份了,我想是时候将发现的一些趋势风格分享出来,这些风格很有可能继续延续到2021的产品设计上。

对于UI界面视觉趋势,同样需要我们高度重视。毕竟每年改版方向,视觉风格研究是必不可少的一个环节,下面正式开始。


少量的渐变


今年在各网站上看到大面积的渐变色设计,相对前两年来说越来越少,设计上有所克制。大面积的渐变色虽然视觉冲击力强,但大部分停留在概念中。

从今年设计中我们可以看到设计更加理性与克制,将渐变色彩运用到关键功能上,突出强调重要信息。

高手出品!2020~2021年UI界面设计趋势

机票选购界面,将渐变色运用到头部位置去强调功能。

高手出品!2020~2021年UI界面设计趋势

运用在功能卡片上,突出重点信息。

高手出品!2020~2021年UI界面设计趋势

如上图,设计上同样只将渐变色运用在背景上,其他卡片上基本没有渐变色。


包豪斯风格图形


几何图形设计是目前运用最多一个设计手法,今年发现一些比较抽象艺术化包豪斯风格几何图形,在UI设计中大量运用,且效果还不错。

这种图形带来好处就是记忆性强,应用广,它不仅可以拓展在品牌包装,品牌图形延展,还可以运用在UI设计中。

高手出品!2020~2021年UI界面设计趋势

卡片设计采用一些具有意向符号的图形,来表达功能的设计,形成记忆点。

高手出品!2020~2021年UI界面设计趋势

品牌设计上,也是重复这种极简包豪斯风格几何图形。将logo元素提取,进行包豪斯风格化,重复运用在设计中。

有深度的界面


今年这样的设计屡见不鲜,大量3D运用在界面设计中,二维的界面已经不再满足当前设计需要。设计师去探索更多维度学科与UI界面融合,形成一种全新的视觉感官。

uber的概念官网就通过3D来呈现,表达功能亮点。

高手出品!2020~2021年UI界面设计趋势

将二维世界三维化,将是2021年重要的趋势。目前国内外线上有一些产品,开始在部分功能模块使用这样设计手法,如Naver,支付宝等。


毛玻璃效果


可以说是趋势轮回,毛玻璃的效果又回来了。这也是今年在各网站设计上出现频次多一些的设计。

新的毛玻璃效果更加去注重功能说明,用在视觉强调的地方。

高手出品!2020~2021年UI界面设计趋势

如上图设计,毛玻璃运用在顶部关键信息上。这样设计即可减少其他色彩运用,还可以对功能信息进行强调。

高手出品!2020~2021年UI界面设计趋势

毛玻璃效果运用在个人中心,人物头像位置,进行设计强调。

高手出品!2020~2021年UI界面设计趋势

运用毛玻璃去包装UI界面,可以提升品质感与神秘感。


沉浸式界面


将功能与场景融合设计,用户在使用产品过程中,能产生更多情景体验感触。这也是最近今年喊的比较火的一种设计思路。在各网站上,这样设计出现次数越来越多,设计效果冲击力强,得到很多设计师的认可。

高手出品!2020~2021年UI界面设计趋势

场景中关键人物元素与设计进行巧妙集合。

高手出品!2020~2021年UI界面设计趋势

运用超现实设计手法,将人物与酒店场景进行排版布局。

高手出品!2020~2021年UI界面设计趋势

将制作材料与产品集合。

高手出品!2020~2021年UI界面设计趋势

拟真植物元素与土地进行巧妙集合,在视觉上传达逼真效果。


界面排版杂志化


杂志化设计风格鲜明,可以有助产品去打造强化记忆点。杂志化设计的优势可以不受到网格约束,排版使用大字体,同时设计排版上更加个性。我们在做产品概念探索前期,可以多去尝试这样的风格。

高手出品!2020~2021年UI界面设计趋势


拟物化图标


拟物图标又回来了,Apple新版本的Big Sur系统,就采用拟态图标,这也是一个新的尝试,当然也是一个开始。我们很有必要时刻关注这个趋势,未来将会在更多设计中看到拟物化图标的出现。

不过这种风格也不能大面积运用在界面中,我们可以运用在一些关键功能入口设计上。

高手出品!2020~2021年UI界面设计趋势

在天气上的运用,相对之前扁平化设计,目前具有空间的拟物化设计,增加了真实感。

高手出品!2020~2021年UI界面设计趋势

圆形的运用


圆形趋势,我想大家也许会忽略的点,最近几年设计中,圆形的设计无处不在。它的好处不言而喻,亲和力强、场景覆盖广,几乎任何设计都能去用圆形。因此我们有必要去注意圆形运用技巧。

高手出品!2020~2021年UI界面设计趋势

星巴克的web UI概念设计,采用圆形与产品进行集合设计排版。


2021新拟态界面


新拟态趋势是2020年受到广泛关注的趋势之一,这种趋势大量使用了柔和的阴影和微弱渐变,使设计既具有未来感又具有现实感,并且为熟悉的界面带来了新的感觉。相对之前大面积浓厚阴影而言,目前新的简化拟态界面,会克制使用这些元素。

高手出品!2020~2021年UI界面设计趋势

2021年拟态界面,更注重功能与体验。拟态效果会使用在关键功能上,如仪表、按钮,又或者需要重点强调的地方,避免了大面积使用这种设计手法。

写在最后


2021年的趋势相对来说,有继续延续2020年一些设计风格,这些风格将会在继续加强,同时我们也有发现,目前越来越多3D元素与二维界面进行集合设计,能更生动传达功能与将故事,2021年大家务必要注意这种趋势的延续。

作为设计师,我们对设计的思考不能只停留在表象层面,而更多的需要围绕信息传达这一设计的本质功能,以充满自省的精神深化和反思自己的设计意识,同时要时刻保持对趋势的敏感度。将新趋势合理的运用在产品设计中,以产生最大化收益。

作者:功夫UX

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!










日历

链接

个人资料

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

存档