首页

数据工程在腾讯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 设计师的总结!










网站设计之七:2021-2022设计趋势报告:动态篇

博博


前言


动态设计(Motion Design)有助于创建令人愉悦且直观的用户界面。好的动态设计,不仅能引导用户对数字产品的体验,还可传达有关产品的品牌信息。本文将介绍近来最流行的动态设计趋势,这些令人惊艳的动效表现手法,在不久的将来势必席卷所有人的目光。

1. 动态在 UI/UX 扮演的角色

动态能激发用户的情绪,为静态的视觉设计注入活力与生命力。有趣、奇妙、吸引人的动态,能让你的产品展现与众不同的魅力。另一方面,动态有助于支持可用性,通过自然流畅的物理运动,突显元素在过渡时的关联性与状态变化,增强用户对产品功能的感知。

因此,动态设计必须是有意义的,同时兼具可用性与美感,UX 行业也将动态设计视为多学科的交集,细分成一个专业的设计门类。作为 UI 和 UX 设计中重要的组成部分,动态设计从三个层面发挥影响力:

提高连贯性(Increase Continuity)

让界面元素在用户流程中顺畅地转变与过渡,将用户操作导向期望的任务结果。

连接场景(Connect Scenes)

在转换场景的过程中扮演润滑剂的角色,阐明场景之间的位置、层级与空间的关系。

视觉吸引(Visually Appealing)

聚焦用户视线,将其注意力放在重要的事情上,从而起到信息传达、提升识别度的作用。

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

2. 动态设计趋势

植基于 UI 和 UX 设计而发展的第三维度,动态设计的趋势自然与两者密不可分。综观近年,多数作品巧妙地运用绚丽的动态图像(Motion Graphics)与动效设计,让新的视觉手法得以表现更为出彩。再者,随着移动端芯片性能提升,跳脱二维平面的表现形式不再难以实现,让设计师能够解开束缚,发挥无限的想像空间。2021 年的动态设计可归纳为三个趋势:

增强表达(Enhance Expression)

运用引人注目的表现手法将信息传递给用户,包括变形、动态文字背景动画

创造层次(Create Hierarchy)

在视觉平面中创建空间层次结构,遮罩与视差是常用的表现手法。

扩展维度(Expand Dimensions)

突破二维限制,将界面元素多维化营造空间感,例如 3D 动态图形和摄像机运动。

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


增强表达


1. 变形 Morphing

变形创造了一种连续的叙事状态,告知用户元素的状态或作用发生变化,是一种最引人注目的表现手法,能将形状、图像、色彩无缝地融合与过渡。

动画插图 Animated Illustrations

2021 年看到许多有趣、吸引人的插图,而更多的设计师开始为静态图像添加动态,也让 GIF 和动画插图越来越受欢迎。

动画插图看起来更生动,并带有叙事性质。在示例中,运用动画插图来呈现这杯果汁是由哪些水果打成,比起文字描述更能吸引观众的注意力。

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

by Lobster

通过动画插图来呈现同一系列的转变,有利于延续外形上的特征,让不同的物体具有连结性。比如从桌子、衣柜到灯具的连续变化,同样风格的系列家具利用动画来体现一致性。

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

by Graceful illustrations ™

流体动态 Liquid Motion

动态的有机形状,包括流体、烟雾和火焰等粒子效果,能够极大地增强视觉效果。流体动态并非明确的过渡与场景转换,而是颜色在流动的液体中扩散,进而创造出抽象或真实的视觉形状。这种风格能实现无缝过渡,并为设计增添有机感,也是 2021 年最引人注目的动画趋势之一。

运用流体动态来展现抽象的有机体,除了轻易地攫取受众目光,还让人不自觉地伫足在画面上,感受流体变化的韵律与美感。这类动态设计可作为烘托主题的背景动画,或是吸引目光焦点的主角。

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

by ✞anton mishin✞

流体动态运用到网站设计所营造的视觉冲击力更为惊艳,能为用户带来独特、新鲜的视觉感受, 使得流体动态深受风格前卫的设计师喜爱。网站还能利用鼠标悬停与流体进行互动,因此会在许多特效网站见到流体动态的踪迹。

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

by Gilles Tossoukpé

动态渐变 Dynamic Gradients

扁平化设计缺少现实质感的元素,搭配渐变色能有效缓解不足,为设计创造深度与层次。变化中的渐变色同时带有动感与舒缓,充满活力却又平静。使用动态渐变能让设计师展示一系列不断变化的情绪,许多内容创作者和品牌已经注意到这一点,开始在广告活动、识别设计和数字内容使用动态渐变。

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

by Pixelz Studio

微交互 Micro Interactions

在用户体验设计中微交互变得日益重要,而动态设计正是微交互的灵魂所在,即使只是微小的视觉提示或反馈,都是人机交互易于使用的关键。从经典案例来看,微交互的动画细节必须带有明确的目的性,让用户获得实时反馈,指导用户进行下一步。从近几年的设计趋势来看,微交互已成为不可或缺的存在。

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

by Илья Бабушкин

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

by Google

动画商标 Animated Logos

过去几年动画商标是最流行的动画趋势之一,通过各种视觉效果,设计师能创造出不同类型的动画商标,许多企业开始采用动画商标作为吸引注意力的手段。多数情况下,商标是进入网站时最先看到的东西,因此商标应该令人难忘、引人入胜,并使用符号或排版来揭示品牌个性。结合动画的优势,设计师可以运用一些动态或效果来讲述简短的故事以强调品牌特征,并为静态排版和商标注入一股活力。

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

by Yulia K.

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

by Meta

2. 动态文字 Kinetic Typography

动态文字是使用移动文本来吸引注意力的动画技术,许多卓越的品牌在网页设计中使用动态文字,为网站外观增添动感和视觉冲击力,是近年 UI 动画的趋势之一。

设计师使用动态文字为单词或句子添加生动的元素,借此定下情绪氛围与设计基调,吸引用户的注意力。几种常见的表现手法,挤压和拉伸一个词能会唤起一种俏皮感,而连续重复这个词则具有催眠感和前卫感。另外,使用大号和粗体字体来增强份量以强调某些信息,也是动态文字的特征之一。

无论在电商网站、电视广告或音乐视频,动态文字都占有举足轻重的地位,有利于加深用户对品牌的关注与印象。

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

by HOLOGRAPHIK®

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

by Hrvoje Grubisic

3. 背景动画 Background Animation

通过背景动画来强化叙事,成为许多行业常用的品牌传播手段。你可以创建动态的品牌故事,展示有趣的制造过程、产品的使用场景。背景动画深获大众喜爱,它能让用户在进入登录页或网站首页时,轻易地了解更多有关公司或产品的信息。调研显示,从银行、医疗保健公司、电商零售商、餐馆到 B2B 供应商,这些跨越不同细分市场和行业的网站都开始使用背景动画。

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

by Carlo Soleri

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

by Kirill Zhukovsky


创造层次


1. 遮罩 Masking

遮罩过渡是将几何或有机形状作为衔接下个场景的遮挡物,等同于舞台幕布设计,能在界面元素进场或退场时创造连续性效果。这种表现手法简洁高效,是最常见的过渡动画之一。

切换场景 Scene-Switching

其中一种遮罩过渡,是将当前场景完全置换,如同揭开蒙在上层的布,逐渐展露叠在下方的景,并利用景物相似性和动作延续性,让两个场景能够顺畅地衔接,不致于差异过大,造成用户心理负担。

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

by intent

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

by Minh Pham ✪

状态变换 State Transformation

另一种遮罩的表现形式,较无明显的场景过渡,而是利用遮罩来表现景物的状态变化,界面元素和布局基本保持一致,以此塑造无缝过渡的视觉效果,这种手法被广泛地使用,例如气候变化、人物换装、产品组合等。

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

by Daniel Tan

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

by Outcrowd

2. 视差 Parallax

视差是利用不同的界面元素以不同的速率移动,创造前后景深的分离效果,借此在平面中塑造空间层次,已成为网站首页最为普遍的表现形式。

视差之所以能形成一股风潮,广为各个行业所接受,一方面是信息层级更加清晰,明确定义各种元素的关系,让用户专注于主要操作和内容,将背景或非交互元素往后退,同时保持设计的完整性。另一方面是丰富的层次变化,当用户滚动或滑动时,能在扁平化界面拉开空间关系,利用不同的速率和纵深,塑造多层次的感官体验。

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

by Studio VØR

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

by Studio VØR


扩展维度


1. 3D 动态图形 3D Motion Graphics

近年来,结合 3D 动态图形的界面设计呈现爆炸式增长,虽然创建 3D 动画需要更多的时间、技巧与协作,但不可否认的,3D 动画比 2D 图形更加逼真,从而提供更具吸引力和互动性的用户体验,并有效地展示品牌的活力。

更生动的表情 Lively Emoji

动画的吸引力在于能够创建各种角色,并为无生命物体注入生命力,表情符号就是一个很好的例子。作为独特的网络语言,表情符号生动地描摹日常面对面交流的非言语信息,随着图形界面的设计趋势逐渐结合 2D 与 3D,运用 3D 动态图形来创造更加动感、拟人化的表情,能让这些非言语信息更加丰富,有机会引领下一波风潮。

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

by Outcrowd

营造空间感 Spatial Awareness

3D 动态图形为平面设计建构了空间叙事框架,在扁平化界面中展现立体感,从而表达空间中元素的位置与层级关系。多维化的发展趋势,推动了视觉表达形式的演变,空间感让界面设计更符合人类的认知逻辑,运用各种 3D 运动特效,包括旋转、翻转、折叠、透视、Z 轴位移等,打造令人难忘的感官冲击。

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

by UI8

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

by Bruno Ortolland

拟人动画 Anthropomorphic Animations

拟人化能让物体、植物、动物等非人类事物,表现出人类属性的行为与状态。动画片运用拟人的手法是最普遍的,1927 年迪士尼第一部系列动画《幸运兔子奥斯华》的主角便是拟人的兔子形象。由于人们容易被以人类行事的事物所吸引,越来越多设计师在界面中添加拟人元素,利用这种效果让画面更加生动有趣,增强用户体验的愉悦感。

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

by Gregory Riaguzov

2. 摄像机运动 Camera Movements

在动态设计中,摄像机运动是最自由、灵活的一种表现形式,能让画面过渡更有张力,突破 2D 平面在视角上的限制,创造一个无界线的立体空间。常见于影视、动画和广告的摄像机运动,包括推近、拉出、平移、跟拍等方式,备受动态设计师青睐,让用户以多变的视野探索数字产品。

推近/拉出 Dolly In/Dolly Out

推镜头是指被拍摄的对象不动,摄像机由远而近,朝着对象不断推进, 用来突出人或物的主体。镜头推近的运动方式,用来呈现从整体到局部、由分散到集中的变化,引领用户进入故事情景,给人一种身临其境的感受。

相反地,拉镜头则是将摄像机后退,使画面逐渐远离被摄主体,侧重的是从局部到整体、由点到面的转变,强调主体所处的空间环境。随镜拉出的景象,能激起人们无限的想像。

水平/垂直移动 Truck/Pedestal

水平向左或向右,垂直向上或向下移动摄像机,使画面不断变化,让用户跟随镜头视角一起移动,产生一种置身其中的感觉。这种运镜方式,通常用于具体的场景,利用角色或景物的延续性来消除场景过渡时的边界,表现出一种流动感,无论是手势滑动或鼠标滚动都能有顺畅的操作体验。

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


结合多种运镜 Multiple Camera Movements

运用多种摄像机运动相当普遍,既能扩大视野,又有很强的空间感,可以更加自由与多样地展示不同视角和情景。比方说结合横摇(Pan)、直搖(Tilt)和跟随(Tracking)镜头,连续而详尽地展示一个产品,由于画面始终跟随一个主体,有利于突出产品特征,并让用户从不同的角度和距离观看产品,是一种增强临场感和参与感的有效方法。


一镜到底 One Shot

在电影中为了不将观众的情感和注意力割裂,使用一个镜头来完成全片的场景刻画和叙事,这种拍摄手法被称作一镜到底或长镜头。连续镜头逐渐被运用到界面过渡,以此增强操作过程的流畅性,例如一气呵成的购物体验,或是贯穿全场的人物角色,其特点是给用户最沉浸的感官体验,无间断地体验整个流程。


结语


动态设计作为近年热门的创作形式,广泛应用到各个领域,逐渐成为设计的主流趋势。受益于技术演进与发展,从创意生产到落地实现,动态设计的门槛不再遥不可及。设计师得以将想法转化为生动、有趣的作品,并有机会创造新的表现手法,玩出许多新花样,成为 2021 年动态设计的特色。

本文归纳的设计趋势,有助于启发设计师对动态设计的想像,激发更多创作灵感,为静态界面赋予灵魂,打造令人难忘的视觉体验和品牌形象。

作者:腾讯ISUX


转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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

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

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

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

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

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

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

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










2022年你最需要抓住的UI/UX设计趋势

纯纯

在本文中,我们将发现:

  • 3D视觉设计师的内卷将会越来越严重

  • 数据可视化的工作将变得越来越重要

  • 服务的移动化还需要做出更多努力

  • scrollytelling 技术会越来越流行



1、滚动已死,滚动叙事兴起 


旧的滚动是无聊的。如果你想吸引注意力,你就需要实现滚动叙事(scrollytelling)。(彩云注:这个技术的核心在于边滚动页面边讲故事) 

undefined

《纽约时报》是第一批在他们的文章《雪花飘落》中使用滚动叙事手法的机构之一。


它是一种叙事形式,可以在网页和APP上呈现。想象一下,在一个网站中每个插图、文本和其他元素都开始变得生动起来。自然地,你会想看到这个故事的结局。它就像一个游戏,带你穿越迷宫。虽然你不能影响它的进程,但却让你感觉自己能参与其中。


2022年,Scrollytelling将会出现在你看到的每一个流行网站上。


另一方面,scrolllytelling让用户真正去阅读内容。你可以用动态文本让他们产生兴趣,比如谷歌的网站 (https://www.google.com/search/howsearchworks/)。他们的团队知道如何让信息看起来更好:

undefined

Scrollytelling在用户向下滚动时被激活,因此得名。没有点击,没有选择的麻烦,没有弹出窗口。你似乎停留在一个地方,但通过滚动,把屏幕上的故事慢慢展开。这不仅要求设计师创造出酷炫的视觉效果,还需要认真思考一个你想要讲述的故事情节。


所以,最好的网站不可能在2天内建成,需要更多的时间去打磨。

undefined

IAmBinadam令人惊艳的叙述设计


滚动叙事的项目通常需要大量的时间和精力。不过,这样做的结果是值得的。页面变成“活的”,每一秒都有新的事情发生,所以在阅读时很难感到无聊。


那么移动端APP呢? Pure是一款约会应用(彩云注,这个应用在app store可以搜到,推荐大家安装一个体验一下,非广告),它创造了一种我称之为“tappytelling”的故事(当你第一次点击并打开应用时,它就会被激活):


undefined


Scrollytelling是为用户而创建的,用户很喜欢它,不需要到其他页面去阅读整个故事。相反,网页设计的整个故事都是事先考虑好的,并尽可能以最有趣的方式设计出来。 


2、用户喜欢看数据,数据可视化越来越被重视 


如何在2022年做出一个还不错的企业网站?你不会想告诉用户你是“XX领域公认的领导者,该领域最好的之一”。这种标准的广告表达并不传达任何有价值的信息。


最好不要用形容词,而是用事实来说明:你有多少分支机构,在哪些城市,谁是你的客户,以及你是如何帮助他们的。抽象信息是不可靠的。但如果你有很多想要分享的数据,你需要让它不仅简单,而且有趣。 

undefined

数据可视化有助于以一种吸引人的方式传达正确的信息。它也可以与滚动叙事(Scrollytelling)紧密结合。以下是IAmBinadam展示数据的方式:


undefined

 通过去除数据集的复杂性,使信息更容易让读者感知。

undefined

不同级别的数据具有不同的大小,这样用户知道应该先从哪里查看


读者可以很快注意到作者试图通过图片引出的结论。考虑到如今人们消费的数据量巨大,那些干净整洁的数字带来的正面影响更大。 


undefined

有些图表乍一看甚至不像图表,这使得它们更加能被注意到


还有一种现象叫做“新冠后遗症”。这是Covid对公司及其员工的长期影响。根据英国国家统计局的数据,2018年,压力和焦虑的平均得分约为2.7/10。自新冠疫情发生以来,得分已升至4.0/10,很少低于这一水平。同样因为大流行,在过去两年里工作量增加了4个小时。


人们压力太大,卷的太辛苦,以至于不愿去看复杂的数据。


设计师做好数据可视化,以保持人们的注意力。记住,复杂的信息通常被忽略,因为读者试图节省他们的时间,更有可能使用滚动按钮。
undefined

Illustration by Mona Chalabi


以下是我们推荐的一些表示数据的方式

  • 1)图表和曲线图

  • 2)插图

  • 3)静态信息图

  • 4)互动信息图


undefined

Illustration by Ink Factory


如何让信息图表看起来更好?

一个好的图表,或者任何其他形式的数据可视化,都应该具有在Edward Tufte的“定量信息的可视化显示”中描述的特征。在他的书中,Tufte通过图表解释了好图表的3个原则:


1)展示数据的图形元素与数值总数的比值应趋向于1。简单地说,应该删除一切不必要的元素,保持整洁。 


undefined


2)充分利用好画面空间。也就是说,需要将数据编排的更紧密


undefined

Graph by Hootsuite


3)客观地描述数据。不要使用夸张的图表,可视化数据可以看起来很酷,但真实永远是更重要的。


3、2022年还有必要做APP吗?


根据We Are Social的数据,2021年有52.2亿人使用手机,约占世界人口的66%。自2020年1月以来,手机用户数量增长了1.8%(9300万),而手机联网总数量增长了7200万(0.9%),到2021年初达到80.2亿。


过去一年,社交媒体用户的数量增长了13%以上。到2021年初,社交网络上已有近5亿新用户注册。根据App Annie的数据,Android用户每天花在手机上的时间超过4小时。2020年,安卓用户上网时长超过3.5万亿小时。


令人印象深刻的数字,是吗?似乎到2022年,为产品做一个APP将成为必须拥有的东西。如何知道你的公司是否真的需要一款应用?有以下几点可供评估:

 

1)用户主要通过移动设备访问你的网站这是你应该了解的重要数据。

客户和你在一起的时间越长,你就有越多的机会去吸引他们,了解他们的习惯,并给他们想要的东西。(彩云注:这就是为什么各大厂之间都在拼命抢占用户的在线时长。)

2)帮助内部业务流程更加有效。

如果你想要提高员工的工作效率、改进工作流程或增加利润,那么就制作一个可以帮助管理业务流程的移动应用。

如今,像这样的手机应用使企业能够执行越来越复杂和多样化的任务,加快日常重复操作和文档管理。


3)实现一些网站上没有的新功能。

如果你认为APP能为用户打开新的触点,并让用户体验更加友好,那么它就值得考虑开发。问问自己的APP能提供什么新的商业机会?例如,随着疫情的蔓延,许多人开始用上健身APP在家里锻炼。


4)竞争对手做的情况。

要了解竞争对手在做什么,他们是否有APP,能做什么,以及他们是否真的对用户有用。


查看App Store和谷歌Play的统计数据。下载和评论的数量可以告诉你用户是如何使用竞争对手的应用的。如果他们的服务真的很方便而且很有必要,那么你就容易被甩在后面。


5)复购率。

一个应用可以帮助你留住那些习惯从你那里购买的人。如果想为老客户开展促销活动了,给他们发送一个通知就能完成,成本更低。


在正确的时间提供的报价越有吸引力,人们购买的可能性就越大。

undefined

6)促销工具。


有了应用,你就不需要花钱设计和制作实体卡,客户也不需要随身带卡。将促销计划整合到APP,并分享有用的促销信息。


做原生APP还是移动端网站?

开发手机网站比开发手机应用需要更少的工作量,这反过来可以降低整体推广成本。


这部分是由于响应式设计的出现,它允许你根据打开网站的设备屏幕来调整网站。至于APP,它们必须为许多移动平台单独编写:Android、IOS、Windows等。


一些设计师认为“前端驱动的网络体验”会是2022年的一个好机会,我非常同意!(彩云注:在国内,现在开发小程序的肯定越来越多了。) 


4、3D设计具备更强竞争力 


我们一开始并没有将其放在首位,因为这并不是一个新的趋势,在很久以前设计师们就已经设计了很多3D图像和动画了。 

undefined

Cardi B rhymes with 3D

3D技术已经在过去流行了很多年,但它不会很快消失。此外,我们预测3D图形将变得更加多样化和包容。


在过去的几年里,3D艺术和动画已经出现在各种UI设计趋势评论中。这意味着越来越多的设计师将它们整合到页面中。


3D当然应该成为2022年最热门的趋势和预测之一,因为与经典动画相比,逼真的3D形状结合动画总是引人注目的。


undefined


从技术上讲,通过3D更容易传达更多内容,因为它比平面图片更接近我们的感知。3D插图更有深度,信息量更大,也更具互动性。"


许多设计师将3D对象无缝地“安置”在2D空间中。它允许创建更有趣的组合,也作为一个优秀的工作方法蕴藏着巨大的潜力。


undefined

乌克兰政府网站用3D手模拟了黑客帝国


注意一点:在整合3D图形等重量级内容之前,确保你的应用性能是OK的,能够快速加载所有元素。 


5、元宇宙风潮  


Meta的logo既不是2D也不是3D。或者两者兼而有之?这就是即将到来的2022年的莫比乌斯带和薛定谔的猫。 

 undefined

undefined

Meta logo的变化(3D版本)(https://design.facebook.com/stories/designing-our-new-company-brand-meta/)


(彩云注:这个概念在去年简直不要太火,未来几年肯定还会是一个大的趋势,设计师也需要保持关注。跟着趋势走,易于放大自身价值。)


6、混合动画  


越来越多的公司在网站和移动应用中使用动画,以提高用户的沉浸感和体验,使内容更有趣。 

undefined


动画是2022年重要的网页设计趋势。2022年,如果没有它,你的产品很可能会看起来就像个半成品。混合风格的动画越来越受欢迎:定格动画和3D动画的结合,2D动画和3D动画的结合。设计师这样做是为了获得不同寻常的风格解决方案,以及提高最终产品的质量。


2022年,动画设计将是品牌市场定位的重要组成部分,想想一个公司新的视觉形象——动画形象。随着这个领域的专业设计师数量的增长,实现新想法的机会也在增加。


2022年如何使用网页动画?

1)讲故事动画。

可以通过在界面和用户之间建立情感联系来传达信息。 

undefined

加载动画Yoichi Kobayashi


2)更有趣的加载。


用户不愿意等待,除非载入画面很有趣。带有百分比的动画不仅可以分散用户的注意力,还可以告知他们加载页面需要多少时间。使用进度条或者任何你能想到的可以显示时间流逝的东西。

undefined


3)光标效果。

用户可以精确地观察光标所在的位置。通过添加智能互动动画,对这个光标作出反应来探索网站。这种效果在21世纪初非常流行。如你所知,流行趋势往往每20年就会重演一次


undefined 


4)动态排版

你有没有想过让字母跳舞? 

undefined



添加角色的动画插图

据Statista统计,2020年全球动画市场达到了2700亿美元。趋势是视频,而不是静态信息。全球品牌在社交网络上使用动画制作广告。毫无疑问,动画插图的优势是它们非常灵活和多样化。 

undefined

宝马历史动画


这样的作品通常用于两种情况:

1)用于解释视频

2)电商广告

undefined

动画解说的趋势出现在几年前,解说视频清楚地显示点击的位置或公司的项目是关于什么的。


在招聘或商业视频中,用户更喜欢看画出来的人物,而不是抽象的形状或物品。画出来的人物可以唤起情感共鸣,就像活着的人一样。


7、微交互,大影响  


微交互是帮助用户浏览网站或应用的小界面变化。通常这些是作为提示用户的视觉或声音效果:它们显示发生了什么,将导致什么操作,下一步需要做什么。 

undefined

图片来源awwards


动画交互将为你的设计注入活力,并有助于保持用户粘性。关注每一个细节是设计师工作的关键,因为设计中的所有元素都可以带来积极的用户体验。


重要的是要达到元素的和谐,而不是把注意力分散到界面的各个方面。微交互作用的一个重要部分是颜色,它们为界面元素增强价值。


undefined


微交互有助于页面导航,解释它们的功能。最重要的方面之一是加快和简化以前冗长的功能,以实现特定的行为。 


8、动态logo,加深品牌印记  


2022年,在线品牌面临着新的挑战,需寻求新的解决方案,其中之一就是动画logo设计。 

undefined

图片来源Toridori


动画logo主要有以下几点营销优势:

1)吸引注意力。这意味着它们有助于提高品牌知名度。

2)有助于提高SEO。谷歌更倾向于动态内容,带有动态图形的页面更容易吸引用户。

3)在移动端看起来更好。丝滑的动画看起来比静态的logo更有趣。

4)最重要的是展示了历史。静态logo背后的想法正在动画中发展。由于这一点,在几秒钟内,你可以展示品牌的使命,甚至它的价值!


undefined

一家洗衣机[公司]的标志(https://www.schulthess.ch/)

现在有很多设计模板,可以很容易地用字体制作一个动画logo:


undefined



undefined

图片来源Shabello, Bobby Voeten

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


魏华的微信.png

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



日历

链接

个人资料

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

存档