首页

数字农业:农企数字化转型实施路径

资深UI设计者

农业产业链上的企业实现数字化后,才能逐渐带动当地县域整个农业的数字化,每一件事进行都有着它的实施路径,农企数字化也不例外。本文涵盖了某农企的数字化战略规划之路,与你分享。


很多人一谈数字农业上来的就是政府,这个我们也有文章阐述过。今天我们主要是来分析一下农企怎么做数字化,毕竟农业产业链上的企业一个个实现数字化之后,才会带动当地县域整个农业的数字化。

每一件事情做的时候都是有实施路径,农企数字化也不例外。

农业数字化有方方面面,本文还是聚焦于农企数字化,只有一个个的农企实现了数字化转型,才能让整个农业产业链是数字化的,即实现某一个区域内的农业数字化。

最后本文将给某农企的五年数字化之路,从业务优化、商业变革到技术应用都会涵盖。

本文可以看成是某一个农企的数字化战略规划之路。

一、现状评估-常规操作

一般商业模式实施前,需要了解自身有哪些资源,有哪些优劣势,政策经济背景如何。

农企做数字化转型,也是如此,需要清晰地了解自己所处的产业链地位、产业地位、内外部环境如何。使用的工具有战略地图、波特五力模型、市场分析、SWOT/PEST、 价值链分析、标杆对标等一些列工具。

最后期望的出来的就是农企要做农企数字化转型,需要哪些资源,需要怎么做,需要多少成本,需要多少工期。

以上都是常规操作,实施起来,不找个外部咨询公司、花个一二百万,还分析不出个所以然。

二、现状评估模板-简单版

所以我们的建议是,把农企高管集中起来,统一回答如下几个问题。

谈谈你对数字化转型的理解,随意任何方面,哪怕是国家政策导向。

  1. 你认为本企业数字化的模样是咋样的?
  2. 你认为可以从哪几个方面发力成为你心中的数字化企业?
  3. 这几个方面需要哪些成本和资源?
  4. 当地政府可以为哪些工作买单

当然还有其他的五个问题。

通过这几个问题的高管问答,高层能够看到农企数字化后的未来蓝图,也能看到现在到未来的差距。

至于现在长得怎样,相比未来而言,还是可以简单看待。毕竟漏洞识别越多,得罪的人越多。不如多谈谈未来蓝图,跨组织跨部门的未来。

三、某农企的数字化转型蓝图

农企的数字化转型可以从以下一个方向展开。都针对大企业,小企业建议选择其中若干项开展。

第一,业务模式的变化,建议增加三块业务,一个是政府项目申报,一个是直播+电商小程序,最后一个是自建渠道。三个的价值不一,政府项目申报,是与当地产业的深入融合,额外与政府形成联盟。直播+电商小程序,不为真卖,只为营销推广和品牌孵化,所以短视频也行。自建渠道,包括采购和销售,一定要发展起自己的贸易属性,将贸易武器抓在自己手里。

第二,信息化建设,配合上面三个业务,做一些信息化数字化建设,可以建设的系统有农事生产系统,电商系统,进销存管理系统,财务分析系统,人力资源系统等,可以做的数据分析有产量预估,农事作业分析,销售价格预测。

第三,商业模式创新。要为董事长CEO以及当地政府对口单位,一个可以不断做大不断优化的商业模式。不能只讲自己的数字化,要讲产业,要说明农企数字化进程中,给产业,给就业,给GDP带来的变化。

四、某农企的数字化转型蓝图

该企业为了确保以上战略的实施,做了一下工作。

1)成立项目管理团队,用来管理整体的数字化转型项目的落地实施和资源协调。

2)成立政府研究和项目申报团队,专门维持与政府及大企业的关系,支持政府各项涉农规划在本企业的试点落地。同时专门面向政府的项目立项机会完成项目立项。

3)构建自己的经销渠道,并通过电商系统做自己农产品的软文推广。开始在各类自媒体上,联合当地政府发布推介信息,争取销路和投资。

4)分五年,将上面信息化系统进行落地,并选择合适的云计算厂商,将系统和物联网设备跑在公有云上。第三年开始,应用前两年积累的数据开始做数据运营分析,发挥数据的生产力价值。

5)开始认养农业模式,并选择了合适自己的潜在目标客群。


文章来源:人人都是产品经理   作者:农业数字化


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

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

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



2022年10种UI/UX设计趋势

资深UI设计者

我们收集了一份UX/UI设计趋势清单,帮助你了解2022年的相关行业变化,以及未来展望。

想成为更优秀的设计师, 需要了解设计趋势和受众目标的需求。了解UI/UX设计趋势本质上与了解时尚或者消费行业的趋势并无本质差别,都必须倾听人们的需求,关注人们如何使用产品,创造出美观、简单、易用的设计,使产品脱颖而出。

在2021年的那份文章中,许多假设已不仅仅是一种趋势——已经演变成全新的东西。

我们收集了一份UX/UI设计趋势的清单,帮助你了解2022年的相关行业变化。




1.极简主义


越是领先的科技公司,你会发现,他们对简单大气、重点信息明确、精致的设计越有强烈的偏好。这种趋势逐年增多,覆盖范围也越来越广,品牌和各行各业的设计师也越来越多的偏好这种风格。


例如:英国金融科技公司Revolut


Meta(2021年10月28日,Facebook宣布,该平台的品牌将部分更名为“Meta”。)


Dribbble设计师:MoRas ✪ 的作品

小结:从心理学角度上说,极简主义也是在寻求一种安全感,纷杂的物品和内容生产者无时无刻都在绑架我们的眼睛,很容易让人沉沦其中,不能自拔。当越来越多的人开始明确自己的定位,明确这些购物和社交软件只是满足自己需求的一种工具,而拒绝做工具的奴隶。「觉醒」的人越多,极简主义的运用就会越来越普遍。





2.粗旷/粗野主义


粗旷主义包含强烈的轮廓、鲜明的对比色、大胆的排版和真实的生活摄影相结合。




  • 去年我们还在说:“ 野蛮主义设计风格短期内应该不会深入到UI设计中去,更多的会在网站,或者杂志的设计运用此种设计思想。”


今年Spotify Wrapped(可以理解为国外的网易云年报)就给我们上了一课—野无止境。

贪吃蛇一样的形状配合各种高饱和颜色,穿插于各种界面和海报中,形成了巨大的视觉冲击,令人难以忘怀。


让我们来看看他们的设计:





3. 重回90年代


流行趋势总是轮回又轮回,但原因可能不是现在的人忽然意识到以前的回忆有多美好,而是当年的90后小孩成了行业的领头羊以后,将童年的美好回忆拿出来沉醉一番,找个机会释放内心的那份童真。

创意机构CPB London的设计总监June Frange将这波趋势称之为「年代怀旧」,短视频平台和明星效应的加持,以及使用者自发性的DIY内容,也使得它的影响力更加强大。

今年《王者荣耀》推出了两个新主题的游戏皮肤,其中一个以旧版西游记为原型打造的孙行者皮肤,一经上线在销售量上就远远超过了同时出现的安琪拉新皮肤。而原因却并不是皮肤的精美,因为从孙行者皮肤的精美程度而言,官方这一次就是出了一个“原皮”。

这样一个简单的皮肤,却让无数玩家纷纷掏钱买账,这就是怀旧的魅力。这种使用传统神话故事元素结合官方的创新设计,让无数玩家用一种全新的方式感受到了传统文化的魅力所在。


虽然我玩游戏不多,但是也半夜爬起来买了个孙猴子~




4.排版变得更生动有趣


10 年前,行业对排版比现在要严格得多,有明确的排版和字体使用规范。

不过现在,设计师们可以对标题和段落做任何想做的事情——完全取决于想象力。将字体与形状、照片和表情符号混合,在其上添加纹理,或者选择一种形式非常复杂的字体做装饰。

这种设计会产生一种有趣、引人注目的效果,但它也必须要美观和谐——我们仍需在设计时首先牢记:用户的舒适度永远是第一原则。

字体设计在2022年仍将占有一席之地,设计排版中融入夸张的、富有个性的字体,比如:同时拥有流畅的线条与锐利的棱角。


《鱿鱼游戏》的韩文片名标题,是由几何图形重新排列组合而成,挑战了抽象形状和文字之间的区别,借此突破字体必须易于阅读的局限,创作出具有表现力的形式。


Design Bridge London的高级设计师 Chris Algar认为:「  2022 年将是字体的重要一年」。


他预测:“我们将看到排版风格融入真正夸张的个性字体,在流畅的线条和锐利的棱角形状之间形成对比。”
Chris 认为,颜色和活力也将在 2022 年的排版趋势中发挥重要作用。





5.Glassmorphism 和玻璃元素


玻璃态已经无处不在——这是事实。有背景模糊、半透明物体,如卡片、水彩、玻璃球等等。从 Mac OS Big Sur 和 Windows 11 ,玻璃拟态已经存在了很长时间。

在去年,Glassmorphism(玻璃拟态)经过一整年的风靡也算站稳了脚跟,并未像新拟态风(Neumorphism)一样火速崛起又火速沉寂。越来越多的设计师将这种风格融入设计中去。





6.极光背景


不知大家是否可能还记得前一年的这个趋势——「模糊的彩色背景」。

它在2021变得非常流行,甚至有了一个专有名词——极光背景。

微妙、多彩、模糊的颜色看起来非常友好和有机——且更具视觉吸引力。这些飞溅和高斯模糊可以用作整个背景或置于一些重要的 UI 元素下。








7.全息/霓虹灯


这种网络全息/霓虹灯效果很适合虚拟现实和全息界面的时代。虚拟世界提供的新可能性激发了设计师的灵感。充满活力的、发光的颜色、抽象的圆形、全息图纹理是这一趋势的典型特征。


它也被广泛用于许多加密空间,以展示这些接口的未来性。





8.环保风


我们大多数人还是愿意选择环保的生活方式的,投射到设计中——可以将「生态外观」和感觉融入设计中。

越来越多的品牌在追逐这种「纸质感」的趋势——背景通常是灰色的,类似于可回收的纸板。排版风格极简。对比度很高。颜色非常克制,看起来稍显「暗淡」,这种风格包含现实生活中的摄影、纹理、和涂鸦。




9.粘土形态3D


3D 作为一种艺术风格正在变成设计趋势和大众流行

现在一种特殊的风格越来越受欢迎,3D最新的流行风格是粘土形态——类似于由粘土制成的对象(形状简单,由圆柱形/椭圆形组成,由内阴影和外阴影创造深度,但采用更「松软」的 3D呈现方式,通常与其他极简设计结合在一起。粘土3D有种可以按出一个坑的质感。






10. Metaverse


元宇宙(英语:Metaverse),又称形上宇宙,此一科技词汇由前缀“meta”(意思是超越)和词干“verse”(通过逆向构词法从“宇宙(universe)”得来)组成,可简称为MVS。这个词通常用来描述未来互联网虚拟环境的概念,于共享、持久的3D 虚拟空间组成一个可感知的虚拟宇宙,此合成环境包含对象、常驻用户与其交互关系,并存在于虚拟定义的时间中。旨在提供连接用户长时间登录和交互。广义上的元宇宙概念不仅指虚拟合成世界,还指整个互联网,也包括增强现实的范围。


Metaverse描述的是一种趋势:越来越多的技术和媒介,都在不停地缩短虚拟和现实的距离。


人类的大量活动和时间在往数字世界进行迁移。我们的社交活动、经济活动都是在数字世界(或者叫虚拟世界)里面,玩游戏也好,购物也好,社交也好,所以元宇宙(Metaverse)就是顺应这样的趋势产生的,元宇宙就是个数字世界。


感兴趣的朋友可以自行搜集详细资料。



用户体验设计,设计师的出发点是人,让人的使用体验感加强,趣味性加强,使用更加方便。





文章来源:站酷   作者:一个辛普森


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

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

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


2022年,互联网10大关键词

资深UI设计者

互联网行业的未来趋势是什么?本文将从宏观环境、长期主题、确定性机会三个方面,来总结互联网的十大关键词,推荐对此感兴趣的朋友阅读,希望对你有所帮助。


2021年,互联网行业经历了一场耐力大考验。这一年,政策监管席卷了诸多行业,互联网行业身处风暴眼。从反垄断超200亿元巨额罚款,到平台之间“拆墙”势在必行,数据合规已经上升至国家安全的战略高度,一项又一项新政,让互联网行业告别野蛮扩张。互联网大厂内部的日子也不好过。

2021年三季度,互联网大厂们均不同程度地遭遇营收增长乏力、净利润增速下滑的问题,纷纷裁员过冬、节衣缩食。内外环境的变化都昭示着,消费互联网的时代渐行渐远,互联网行业正处在转型的重大拐点。身处其中的玩家们,只有两条路,要么抓住新机会、去新的战场掘金,要么让科技创新成为发展的底层驱动力。

即将过去的2021年有着诸多关键词,反垄断大年、互联互通元年、数据安全元年、碳中和元年、元宇宙元年……在2022年即将开启之际,我们从宏观环境、长期主题、确定性机会三个方面,盘点了十大关键词,分别是反垄断、互联互通、数据安全、拥抱变化、碳中和、硬科技、元宇宙、产业互联网、出海、助农,以期呈现互联网行业的未来趋势。

一、宏观环境

1. 反垄断:资本不再万能

2021年,被称为“反垄断大年”。尤其是互联网领域,利剑频繁落下。上半年,阿里巴巴因实施“二选一”垄断行为被罚182.28亿元,这是我国至今开出的最大反垄断罚单。下半年,美团因同样的原因,被罚34.42亿元。单是这两家大厂,因垄断行为被罚金额,就超过200亿元。

过去二十余年,互联网巨头渗进各行各业,靠着一套“烧钱、合并、垄断”的打法,疯狂扩张,加剧了收入分配不公和社会不稳定。因此,“强化反垄断和防止资本无序扩张”在去年的中央经济会议上,被列为2021年八项重点任务之一。

据统计,2021年以来,国家市场监管总局共发布反垄断处罚案例上百起,其中七成以上案例涉及互联网企业。而针对“二选一”、“大数据杀熟”等行为的反垄断细则也在出台。监管趋严之下,互联网巨头们开始有所行动。

12月,腾讯以中期派息方式,将所持有约4.6亿股京东股权发放给腾讯股东,对京东持股比例将由17%降至2.3%,被外界猜测为降低自身反垄断监管的风险。腾讯持股的美团、拼多多、知乎等大公司或将面临同样境况。互联网领域反垄断的大旗,今年只是刚刚扬起。

11月18日,国家反垄断局正式挂牌,被视为我国反垄断体制机制进一步完善的体现。而且,“强化反垄断和反不正当竞争”在2022年中央经济工作会议中再次被强调。这意味着,接下来,反垄断在执法层面将常态化、系统化地铺开,打破原有的市场壁垒。

2. 互联互通:“拆墙”是大势所趋

过去,互联网公司们越来越壮大,逐步形成了平台生态的闭环,圈流量池的“城墙”越筑越高,最典型的便是腾讯系、阿里系、字节系产品,分别以微信、淘宝、抖音为代表,互相屏蔽链接访问,如微信不能直接访问来自淘宝抖音的链接,淘宝购物不能使用微信支付,抖音针对第三方来源的产品、不支持进直播间购物车……

随着互联网流量红利逐渐消失,存量时期,互联网企业们竞争的重点依然还放在如何加深流量池的壁垒,陷入了残酷的恶性竞争。互联互通,是反垄断的举措之一,更是为了能够降低交易成本、促进创新创业,推进平台之间的长远良性发展。

9月13日,针对屏蔽链接网址这一问题,工信部相关部门提出有关即时通信软件的合规标准,要求9月17日前各平台按标准解除屏蔽。然而,这天之后,平台之间的互联互通不及理想效果。有网友投诉微信并未开放,例如淘宝购物车一键分享功能在上线第2天就在微信失效。

腾讯总裁刘炽平在财报会议上曾表示,平台之间的互通是“非常复杂的问题”。从商业角度而言,以腾讯为例,互联互通意味着腾讯系企业独享微信生态的优势将失去。单从技术层面分析,平台打通之后,用户体验、用户隐私都是需要考虑的问题。但从根本上来说,“拆墙”是大势所趋。

到11月29日,微信已经开始松绑外链,用户发现已经可以在微信上直接打开淘宝以及抖音等链接。一位行业观察者分析称,2021年,在有关部门的推动下,互联网平台间的互联互通已经完成了从0到1,也就意味着更多的互联网企业至少不会在新的领域设置限制,而过去旧有的关卡,也会循序渐进地逐步拆除。

3. 数据安全:加速度发展

2021年6月,滴滴在美股递交招股书,紧接着7月,“滴滴出行”因APP存在严重违法违规收集使用个人信息问题,被依据《中华人民共和国网络安全法》相关规定下架。在滴滴之后,运满满、货车帮、BOSS直聘也被启动网络安全审查,2021年数据安全审查的大幕拉开。

滴滴事件背后,是互联网产品的相关数据和技术应用不但涉及个人权利、隐私,还关系着公共安全乃至国家安全的议题。2021年,被称为数据安全元年。继《数据安全法》、《个人信息保护法》施行之后,有关部门还发布了《数据出境安全评估办法(征求意见稿)》。

一位数据安全领域从业者表示,今年很多大公司的重心是实施数据安全相关的法律法规,接下来,互联网选手们的重心就会放在,如何更进一步在数据安全方面规避风险,提高效率。与此同时,数据安全的市场快速崛起。其中的隐私计算异军突起,成为数据安全领域最炙手可热的赛道。

据统计,隐私计算领域2021年融资额已超50亿元。中国信息通信研究院云计算与大数据研究所发布的《2021数据安全行业调研报告》显示,我国数据安全已经到了发展的关键期,未来对于数据安全的需求将越来越大,同时对于服务能力和产品能力的要求也越来越高。

4. 拥抱变化:合规是未来几年的大趋势

这一年,高密度、强力度的监管持续,让所有互联网从业者都无法忽视。从整治币圈乱象、教培领域的“双减”、房地产行业的大震荡,到监管风暴刮到短视频、直播电商、游戏领域,面临反垄断、互联互通、数据安全监管的互联网行业必须求变。

监管趋严的背后,是互联网原有的打法已经不适合新时代的要求,有关部门正引导着整个互联网企业,从以往的无序扩张、野蛮生长,向精耕细作的新时代转型,从以前的消费互联网模式,向由科技主导的互联网时代发展。2021年三季度期间,阿里、腾讯两大头部,营收增速、净利润双双下滑,除此之外,多家大厂都面临类似情况。

互联网企业纷纷裁员“过冬”,节衣缩食。展望2022年,合规一样是大势所趋,在未来几年也还将持续。互联网正在进入一个新时代,企业们需要构筑新的增长引擎。而身处其中的个体,也都要做好拥抱变化的准备。“唯一永恒不变的东西就是‘变化’”,将无比适用。

二、长期主题

1. 碳中和:未来十年的热门主题

在2020年中国提出“2030年前碳达峰、2060年前碳中和”的“双碳”目标之后,2021年初,“碳中和”被第一次写入政府工作报告,成为国家战略,2021年也被视为是“碳中和元年”。碳中和,本质就是让二氧化碳排放量“收支相抵”,减缓全球变暖。

在“双碳”目标提出之后,今年,互联网大厂们都加速跟进“碳中和”,制定碳中和目标及规划,动作贯彻全年。从1月腾讯打响头炮,启动碳中和目标规划;3月,蚂蚁集团承诺从今年起实现运营排放的碳中和,并在2030年实现净零排放;到年中6月,百度发布“碳中和全景图”,公布在2030年实现集团运营层面的碳中和目标;

年底,阿里也明确提出了碳中和三大目标,要在2030年之前,实现自身运营碳中和、上下游价值链碳排放强度减半,用15年时间以平台之力带动生态减碳15亿吨。对于这些互联网科技企业而言,碳中和既是企业社会责任的一部分,也和自身商业模式相关。

碳中和背景下,ESG投资火了。这种将企业在环境保护(Environment)、社会责任(Social Responsibility)以及公司治理(Corporate Governance)三方面非财务指标的表现纳入投资决策的投资理念,在一二级市场都备受关注。

红杉资本、高瓴资本等头部投资机构纷纷宣布将ESG纳入投资决策,碳管理SaaS企业碳阻迹披露A轮融资后,据报道,创始人一天收到了1000多通来自投资人的电话。二级市场,证监会已经将ESG信息列为上市公司与投资者沟通的主要内容之一。

波士顿咨询公司发布的报告预测,为实现碳中和目标,从2020年到2050年我国需要累计投资90万亿-100万亿元资金。现如今,互联网大厂们已经以10年为周期进行碳中和目标的规划,碳中和这个关键词至少在未来十年内都将是热点主题。

2. 硬科技:迎来最好的时代

“硬科技和科技创业是中国未来三十年发展的主旋律,是中国强大起来的必经之路。”提出了硬科技理念的中科创星创始合伙人米磊曾提到,这一结论背后,是中国正处于从模式创新到科技创新转型的拐点,中国政策正在从投资驱动、要素驱动到创新驱动转型。

硬科技强调将核心技术牢牢掌握在自己手中,代表性领域包括光电芯片、人工智能、航空航天、生物技术、信息技术、新材料、新能源、智能制造等。资本早已经押注硬科技。在高瓴资本和红杉资本2021年的投资中,硬科技成为了投资最多的方向。

红杉中国创始及执行合伙人沈南鹏曾对媒体表示,硬科技领域投资,已经超过红杉中国投资组合的80%,“一个科技主导的创业新时代已经到来”。北交所11月15日开市当天,78家上市企业当中,有16家是硬科技企业。互联网巨头们也都将硬科技布局至于重要地位,内部下场自研,对外投资收购,双管齐下。

12月,腾讯减持京东背后也是投资逻辑的改变,相较消费类投资,腾讯转而更关注硬科技领域,包括芯片公司燧原科技等;阿里内有达摩院和半导体公司平头哥,对外投资有紫光股份、恒玄科技等;美团的策略从“Food+Platform”转变为“零售+科技”,深耕无人配送领域,还在自动驾驶、机器人、激光雷达、芯片等领域加强投资。

硬科技产业是新一轮产业革命的动力引擎,已经成为了业界共识。人才、热钱都在涌向硬科技这个会影响一个时代的领域,但硬科技发展门槛高、前期投入大、技术迭代周期长,投资者更需要熬得住。

3. 元宇宙:未来的星辰大海

元宇宙,这个连定义都尚未明晰的概念,在2021年火遍全球。上半年,元宇宙第一股Roblox上市,就引起了市场对于这个新鲜事物的关注。下半年元宇宙突然爆火,离不开全球互联网巨头Facebook浇上的一把油。Facebook宣布改名为Meta,以更名表明进军元宇宙(MetaVerse)的决心。

这之后,虚拟人“柳夜熙”大火,短短几天就圈粉500多万。腾讯、阿里、字节跳动都纷纷表示,正在布局元宇宙,就连网易云音乐,也要打造音乐元宇宙。

一级市场上,创业者早已扎堆涌入。据企查查显示,仅带有元宇宙名字的公司就近千家,元宇宙相关领域的抢人大战抢先打响。与之相关的数字人、VR/AR、游戏、社交领域的产品,都引发了投资人的关注。

二级市场上,元宇宙概念股更是狂飙突进。股票只要蹭上元宇宙就暴涨,居高不下的涨幅,甚至惊动监管部门要求说明公司与元宇宙的关系。有机构以知识付费项目把元宇宙包装成一夜暴富的机会,声称“未来只有元宇宙这一条路”,以贩卖焦虑的方式借机敛财,有元宇宙培训课程10天收入160万。

元宇宙里的炒房热、炒地热,也完全不输现实世界。下半年,全球虚拟土地的单笔最高成交纪录接连被打破,不到一个月时间,从243万美元、430万美元提升至约500万美元。就连国内尚在内测期的元宇宙社交产品,其虚拟房产在二手市场的交易都异常火热。

与现实世界平行,能通过“化身”在三维空间交流娱乐的元宇宙,距离真正实现,在技术层面还有很长的路要走。单从被视为元宇宙入口的VR/AR设备层面而言,一年出货量在千万级别,距离普及还很远。但关注者们都认为,近几年内,忽视元宇宙的发展和进化,一定会错过大机会。

三、确定性机会

1. 产业互联网:数字化转型大势不可逆

产业互联网不算是新话题。早在2019年,腾讯创始人马化腾就曾表示,互联网的上半场是消费互联网,下半场是产业互联网。到2021年,在国家宏观政策导向中,数字经济、数字化已经成为相关政策文件中多次提及的关键词。

消费互联网时代的商业模式能够带来的增长和创新日趋窘迫,下一个时代,以互联网技术对各个垂直产业链进行数字化重塑和改造,将互联网与实体经济进行融合,加速产业的数字化转型,即产业互联网,是政策支持的方向。

现如今,云计算、人工智能、5G等技术正在向金融、医疗、教育等行业渗透,技术的发展也正掀起新一轮的产业革命。互联网头部大厂们都在朝着这个通往未来的方向行进。腾讯自2018年“930”变革起,就全面发力产业互联网,在智慧零售、智慧医疗、智慧金融、智慧教育等多个领域垂直布局;

阿里巴巴集团董事会主席兼CEO张勇提及,希望能成为一家消费互联网和产业互联网结合得更好的公司,协助企业数字化转型的阿里云,2020财年营收已经超过了200亿元。此外,百度、京东、字节、美团都在布局产业互联网。

中信联产业互联网工作委员会秘书长张健在一次公开分享中提到,近几年产业互联网的发展,可以发现其服务体系正在呈现螺旋式的迭代升级,同时它本身的服务在进行一体化、集成化的创新。产业互联网平台的发展,一方面不断地丰富和拓展各类服务,另一方面,不断地推动各类服务,进行数字化、网络化、智能化的迭代升级。

2. 出海:去新的战场掘金

12月,阿里进行了近五年以来最重要的一次组织调整,沿用多年的To C(面向消费者)业务和To B(面向企业)业务架构被拆分,重组为国内业务和全球化业务两大板块。阿里海外新兴业务的重要性显而易见,这部分业务的增速,远高于国内市场。全球化成为与内需、云计算并列的阿里三大战略之一。

随着国内市场战局已定,主流的互联网公司早已打起了出海的主意。现如今电商、游戏、娱乐社交产品、内容文创是出海的几大领域。电商领域,自2020年疫情以来,我国跨境电商呈现爆发式增长。天眼查显示,2021年我国有超60万家跨境电商相关企业。

在亚马逊“封号潮”在跨境电商圈持续引起震动后,TikTok就成了卖家们主要关注的另一个平台。在游戏出海中,据央视新闻,近年来,国产游戏出海已成为中国游戏产业重要的增长来源,数据显示,2021年中国自主研发游戏海外市场实际销售收入达180.13亿美元,比2020年增加了25.63亿美元,同比增长16.59%。

娱乐社交方向,以Bigo Live、Likee、Hago多款产品分别发力直播、短视频、游戏领域的欢聚集团,拥有MICO、Yumy等社交产品并在游戏领域布局的赤子城,以及主攻中东市场社交和游戏的Yalla,都已经在海外市场打开了局面。

TikTok的发展更是备受关注,9月,其月活用户量已经突破了10亿,有数据显示,其成为2021年全球访问量最大的互联网网站。出海往往面临着产品服务水土不服、政策管控等风险,但也挡不住互联网公司们出海找增量。时至今日,互联网选手们出海的阵地从东南亚、印度到中东、非洲、拉美,如今已经席卷全球。

3. 助农:助推乡村振兴

岁至年末,抖音“张同学”一夜蹿红。不到三个月涨粉1760万,平均每天涨粉超20万。随着张同学被关注,外界逐渐意识到,这个现象级网红引领的农村题材短视频成为焦点,离不开抖音对新农人的流量扶持。这被认为,既为寻找新的场景增量、向曾经的老对家快手的腹地深入,也抓住了乡村振兴的主旋律。

盯着农村市场的大有人在。电商平台早就讲起了助农故事。拼多多以农产品起家,从基因上就有扶农助农的优势;阿里淘特、京东京喜2021年也都将生鲜农产品的销售当作重点发力方向之一;社区团购的选手们更是没有放过“助农”,橙心优选、十荟团都在今年提出了助农计划。

不止如此,互联网企业们也从数字化升级的角度助农。乡村振兴,助农先行。这些互联网企业们如此看重助农,离不开国家对于乡村振兴的重视。2021年,中央一号文件正式提出全面推进乡村振兴,加快农业农村现代化,凸显了新发展阶段党中央对农村工作的高度重视。

农村市场潜力有多大?有关部门公布的数据显示,我国每年果蔬产量、消费量高达7亿吨,约占世界的40%。我国乡村消费品零售额增长连续8年快于城镇。一面是政策的扶持,另一面是农村市场的巨大潜力

“助农”既意味着乡村振兴,更意味着新的增长潜力。中国乡村振兴建设委员会副秘书长袁帅对深燃表示,互联网企业们的“农业梦”早已表露无疑,如今争先入局,是因为全球疫情影响下经济内循环是关键,只有盘活“三农”资源,才能实现对下沉市场的挖掘。

文章来源:人人都是产品经理   作者:深燃
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

订阅,决定一家SaaS公司的未来

资深UI设计者

订阅不但是一种商业模式,更是一种思维方式。本文将围绕订阅展开,讲述一个好SaaS的标准是什么?什么是订阅模式下的增长秘密?推荐对此感兴趣的朋友阅读。

一、SaaS好不好?看订阅

最近看到网上有关于真假SaaS的争论,还有人列了一堆的真SaaS标准。其实,好SaaS有一条标准就够了:看订阅收入的占比。一般认为,订阅收入占比超过70%,才能被视为一家SaaS企业。为什么是70%?

这并不是一个数字划分的标准,而是对应了一个稳定的收入增长要求。也就是说,如果订阅收入低于这个比例,收入增长的目标、速度和稳定性就没有保证。

我们都能观察到这样一个现象,即国内的SaaS公司,大部分都会遭遇收入的限高杆。也就是说,当收入达到某一水平时,就到了天花板了,很难再增长了。这当然有很多原因,但最主要的,是订阅收入的占比太低了

所以,订阅不只是一个付费的方式,它更是一种强大的盈利模式。订阅业务的背后,还有更深刻的商业逻辑和经营逻辑,所以SaaS才具有深度的变现能力。要说订阅最大的魔力,在于它是一种前瞻性的收入方式,俗称“躺赚”。

举个简单的例子。假如一家营收1个亿的SaaS公司,假定其订阅收入占比为90%(国外绝大多数SaaS公司都能达到的水平)。那么,每年伊始,就有数千万的收入,已经趴在银行账户上。还没开始干活,年收入目标已完成大半。爽吧?

反之,假定这家公司的订阅收入只占10%。那么,新年伊始,账上收入基本是一片空白。绞尽脑汁想办法,怎么才能挣到一个亿?这种“SaaS”公司,即使上了市,业绩也像是过山车,日子仍然不好过。

二、产品转服务,交易变订阅

订阅近年越来越火了,甚至有人提出“订阅经济”的概念。其实订阅并不是一个新事物,像订报纸、手机套餐、用水、用电等,都是订阅。就订阅本身来说,并不至于搞成一种经济模式。订阅之所以会火,还是因为服务。

毫不夸张地说,当今世界的大部分商业,都运转在“即服务”(XaaS)的商业模式上。比如:运输、教育、媒体、健康、互联网、零售。当然,还有软件。在产品时代,卖方与买方之间的关系建立在不连续的、匿名的交易基础之上。也就是说,交易完成后,双方再无联系。

比如卖软件,交付之后赶紧找下一单生意,唯恐被客户拖住。因为无法与客户建立并保持持久的关系,所以这种生意模式的营收效率低,而获客成本高。从产品时代进入服务时代,软件这种交易模式,越来越没有市场。在服务时代,对客户来说,所有权已经不再重要,使用权才是他们所关注的,即他们更倾向于“使用而非拥有”

比如,想听一首歌,没必要买来整张CD。想喝一杯牛奶,没必要把一头奶牛牵回家。想使用一个信息服务,没必要建立整个IT系统。服务需要一种新的客户模式,订阅模式由此盛行

然而,并非所有的服务都适合订阅,只有那些可以数字化的服务,它们才能与订阅模式珠联璧合。比如SaaS。从数字化角度,订阅业务又分为全数字化和部分数字化。数字化含义包括:服务内容数字化、订阅方式数字化和服务结果数字化。由于互联网的出现,订阅数字化和服务结果数字化,已不是问题。

但如果内容可以数字化,那就是一个完美的订阅生意。它意味着全盘生意可自动化完成,即低成本、高效率、高精度地服务。因为SaaS符合这三个要求,所以它才受到追捧。订阅业务不但要求保持交易的连续性,还必须保持收入的稳定性增长。国外SaaS快速增长,就是因为把订阅的优势发挥到极致。

订阅模式的成功,需要有一块基石,这就是所谓的年度经常性收入(AnnualRecurring Revenue,ARR)。什么是年度经常性收入呢?简而言之,就是你的订阅用户每年预期为你带来的确定性收入。我们用软件和SaaS做个比较。

假定一笔软件交易,能一次性收入30万;而按照SaaS服务合约,未来的5年或10年间,每年都有10万的年度经常性收入。你认为哪种生意的变现能力更好?对于SaaS公司来说,现在的问题成了:如何保证客户能在未来10年间,持续订阅?即预期收入的确定性问题。这就涉及到订阅的底层逻辑,即订阅的本质。

订阅的本质不是收入模式,而是与客户建立并保持持续的关系。而要做到这一点,必须有一个订阅型的服务组织。如果一家SaaS公司遇到了限高杆,正确的做法不是去抬高横杆(冲销售额);而是通过组织和运营的SaaS转型,走一条没有限高杆的路。SaaS收入的订阅叠加模型,收入增长在理论上没有上限

三、订阅模式下的增长秘密

虽然面临限高杆,但不影响SaaS公司对增长的渴望。如果不增长,SaaS企业就进入僵尸模式。但是,如果增长的策略不对,也还是劳而无功。众所周知,软件公司的增长思路,是销售更多套软件,提高客单价,尽量产品化不定制(虽然不大可能)。做到了这三点,就可能实现增长。

不过,从过去的十年来看,企业软件的年均复合增长率,已经降低到个位数了。SaaS要是也这样干(事实上真有),结果不会比软件更好。换一个角度看,因为SaaS是服务,所以其增长策略不同于软件。不过也是三点,即获得更多的客户,提升这些客户的价值,更长久地拥有这些客户。这与订阅的本质高度吻合

对于增长来说,SaaS订阅模式还有另一个优势,是其收入的抗衰减能力。即收入增长受外部因素的影响较小,主要是因为订阅模式下的ARR相对恒定。比如在疫情期间,新客户的拓展几乎停滞。这对于像软件一类的产品公司,收入增长也随之停滞。

但对于SaaS来说,即使没有获得新客,订阅收入也不会受到太大的影响。服务(Service)与订阅(Subscription)这两个S,就像SaaS的两个增长引擎。只有经营好它们,SaaS企业才有未来。

四、写在最后

目前,国内SaaS公司对盈利模式的认识,还只是停留在续费的水平上;而对于订阅的本质认知还不够深入。虽然订阅和续费看起来意思差不多,但订阅需要ARR等一套全新的指标衡量体系。而支持这一收入模型,需要与以往不同的经营逻辑。

订阅收入的占比差异,是国内外SaaS公司业务内容的最大不同。如果订阅收入占比太低,SaaS公司很快就会到达营收的天花板。订阅不但是一种商业模式,更是一种思维方式。从SaaS订阅的好模式,变成“躺赚”的好生意,需要深刻理解订阅背后的逻辑。

文章来源:人人都是产品经理   作者:ToBeSaaS
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



金融科技的下一站

资深UI设计者

相比于传统金融而言,科技为金融提供了巨大的动能。探讨科技主导下的金融科技的发展之道,对于当下的行业发展具有至关重要的作用。本篇文章对此进行了详细的阐述,推荐对金融科技感兴趣的朋友们阅读。


如果一定要为现在的金融科技玩家寻找一个注脚的话,或许「科技」在恰当不过了。

没错,几乎所有的金融科技玩家都在用「科技」标榜自己,逐渐变成了当初他们宣扬自己的样子。

事实上,当初的金融科技玩家并不想要成为科技玩家,他们口中所谓的「科技」仅仅只是一个名头而已,他们真正从事的依然是金融的买卖。

事实证明,仅仅只是将「科技」当成幌子,并不能够带来长久发展,而只有真正投身「科技」的怀抱,告别对于「金融」的幻想,金融科技的发展才能行稳致远。

正是因为如此,当以蚂蚁金服、京东数科为代表的一众金融科技公司的发展被监管,越来越多的金融科技玩家才彻底打消了对金融的幻想,真正投身到了科技的赛道上。

很显然,「科技」并没有「金融」那样立竿见影的效果,对于玩家们来讲,投身到「科技」的赛道上预示着他们需要付出比以往更多的努力,才能获得发展。

另外,投身到「科技」的赛道上,是没有样板可以借鉴的,他们需要自己摸着石头过河,才能找到一条真正符合自己的发展道路。

因此,探讨「科技」主导下的金融科技的发展之道,对于当下的行业发展具有至关重要的作用。它直接关系着金融科技的未来,甚至直接关系着金融科技玩家们的前途命运。

一、回归金融主体,科技化整为零

无论是在互联网金融时代,还是在金融科技时代,我们之所以会遭遇如此多的困境与难题,其中一个很重要的原因在于,科技取代金融成为了主体,最终让金融行业的发展和进化出现了失焦。

因此,当「科技」成为金融科技的避风港,我们首先要做的就是要让其回归金融主体,科技化整为零。

所谓的金融回归主体,其实就是要用金融的逻辑和规律来行事,而不能脱离金融本身,放任科技的发展。

我们看到的金融科技和互联网金融之所以会出现如此多的乱象,其中一个很重要的原因就在于,他们从本质上是做科技的,而不是做金融的。

一旦脱离了金融的规律,所谓的金融变种,必然走入到死循环。

所谓的科技化整为零,其实就是要让科技成为金融行业的一份子,成为金融行业的「基础设施」,而「科技」的外在表现是金融的,而不是科技的。

只有这样,科技与金融才能真正实现深度而又全面的融合,否则的话,金融与科技仅仅只是简单相加,并不能够带来本质性的改变。

当「科技」成为主流,我们需要做的就是要寻找到回归金融主体的正确方式和方法,不能脱离「金融」而讲「科技」,一旦脱离了「金融」而讲「科技」,那么,纵然是躲过了监管,「科技」同样将会因为没有实体行业的滋养而枯萎。

只有真正做到了回归金融主体,实现了科技的化整为零,金融科技的发展才能有营养,有动能,最后,才能有发展。

二、流量并非目标,行业才是关键

无论是在互联网金融时代,还是在金融科技时代,我们借助科技来改造金融的目的其实是很明确的,基本上都是为了流量而来。

在流量充沛的大背景下,这种发展模式尚且存在一定的发展空间,一旦流量红利不再,盲目地以流量为终极目标,不仅无法带来流量的增长,甚至还会有害于金融行业的良性发展。

当「科技」成为玩家们新的避风港,我们需要做的就是要抛弃流量观,真正将关注的焦点更多地聚焦在行业上。

通过科技对于金融行业的深度改造,为金融行业的发展找到新客户,找到新方向,开辟新机会。

总结起来,一句话,就是要将改造行业,而不是获取用不看成是下一个阶段的金融进化的关键。

在这个过程当中,我们可以:

  • 优化金融的运行逻辑
  • 创新金融的产品
  • 提升金融的运行效率

只要金融本身有了本质的改变,不仅可以继续挖掘存量时代的新机会,而且可以让金融行业的发展获得更多新的发展机会。

因此,当「科技」成为金融科技新阶段的主导,我们需要抛弃对于流量的迷恋,通过将更多时间和精力放置于金融行业本身,从而找到存量时代的金融行业新机会。

三、割裂无出路,融合正当时

无论是在互联网金融时代,还是在金融科技时代,「科技」与「金融」两种元素之间的关系都仅仅只是一种简单相加的关系。

换句话说,在互联网金融时代和金融科技时代,「科技」和「金融」之间依然是独立的,割裂的关系,并未真正实现真正意义上的融合。

尽管这种简单相加带来了一定的发展,但是,这样的发展基本上是在收割红利,等到红利不再,「金融」与「科技」的这样一种割裂的关系,必然会面临困境。

当「科技」成为金融科技未来发展的主导,特别是当越来越多的科技玩家开始投身到「科技」的洪流里的时候,我们更加需要对「金融」与「科技」的本质有一个正确的认识。

什么是科技?什么是金融?

说到底,无论是金融,还是科技,其实都是相当基础的,相当底层的存在,它们存在的巨大的意义就是要建构起新型的实体经济的大厦。

说白了,无论是金融,还是科技,只有与实体经济实现了深度融合,才能让两者的功能和作用发挥到最大。

那么,在互联网金融时代和金融科技时代,「金融」与「科技」两种元素是不是真正发挥了它们应有的功能和作用呢?

很显然,没有。

它们仅仅只是发挥了最末端的功能和作用——收割流量的功能和作用,而没有真正找到与实体经济结合的方式和方法。这是我们看到互联网金融和金融科技之所以会陷入到死胡同的根本原因。

当「科技」成为金融科技的主导,给了我们一个非常明显的信号,即我们不能再像以往那样收割流量了,不能再像以往那样只做末端的买卖了。我们需要回归本质,找到「融合之道」。

需要明确的是,这里的「融合」,其实有两个层面的意思:

  1. 我们需要找到「金融」与「科技」两种元素的融合之道,让这样两个原本并不想干的存在,有统一的表达方式,实现真正意义上的融通;
  2. 我们需要找到「金融」、「科技」和实体经济之间融合的正确方式。

试想一下,当「金融」与「科技」实现了深度而又全面的融合;当「金融」、「科技」与实体经济实现了深度而又全面的融合,那么,它们的发展无疑可以跳出以往仅仅只是基于流量为主导的发展模式,真正进入到一个全新的发展周期。

当以「金融」为主导的金融科技的发展模式被叫停,我们看到的是越来越多的玩家开始将关注的焦点聚焦在了「科技」上。

于是,「科技」成为了下一个发展阶段的主导。

很显然,这种全新的发展模式,不仅可以带来金融的新进化,同样可以带来科技的新进化。


文章来源:人人都是产品经理   作者:孟永辉

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

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

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



2021-2022设计趋势报告:动态篇

资深UI设计者

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

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

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

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

by Michael Crawford

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

by Ali Zafar Iqbal

水平/垂直移动 Truck/Pedestal

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

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

by Netguru

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

by Minh Pham

结合多种运镜 Multiple Camera Movements

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

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

by Sang Nguyen

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

by Paul Ilnitski

一镜到底 One Shot

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

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

by Orizon: UI/UX Design Agency

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

by Minh Pham ✪

结语

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

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



文章来源:优设 作者:腾讯ISUX
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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




2021 出镜率最高的 7 种网页 UI 风格

资深UI设计者

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

看完这一波网页 UI 类设计,再也不愁接下来该如何做设计创新了。

图与线叠加

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

这是今年出镜率比较多的一种设计风格,不管你是在 Dribbble 还是 Behance 上都能见到它的影子。这种风格设计最大特点:形式感、聚焦、简约而不简单。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

当然还可以是将线圈与文字叠加图片,有一种层叠纵深布局感受。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

又或者说图形只是作为装饰作用。

纯文字版式

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

纯文字版式在今年版式中出镜率也是相当之高,包括深圳设计周官网也几乎都是几个大字排版。其实我们仔细思考,将文字放大处理,有点图形化的意思。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

上图是典型的文字图形化,将文字转化成线性设计。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合设计风格大胆、新颖,让人眼前一亮。这种版式布局一般会出现在设计工作室网站居多一些,追求形式感与观赏性。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合设计,不光只是图片与文字混合排版,还可以是图标与文字、粗字体与细字体之间的混合穿插。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

圆形版式

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

圆形设计趋势一直都存在,在网页设计中出镜率高也是毋庸置疑的事情。毕竟圆形本身自带超强亲和力、聚焦。设计用它可以解决很多枯燥的版式,让画面瞬间活了起来。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

还可以将文字处理成圆形,与圆形图相呼应。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化版式今年出镜率尤其之高,将文字轮廓化设计处理,减轻了文字的视觉重量感,更像是将文字线条化设计处理。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化设计还可以用在背景,作为设计装饰效果。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

玻璃质感

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

玻璃质感设计趋势,也是今年最火的设计风格之一。那么它在网页出镜率也是在下半年开始逐渐多了起来,也许是设计师发现这种质感细腻与折射光透露出的细节之美。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

使用线条

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

线无疑是图形里面运用较多的,今年发现很多网页中都加了线条作为版式装饰,或者就是纯线条版式设计,让人眼前一亮,原来还可以这样玩。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

线条在这里作用明显,除了美学设计装饰之外,它还用作信息层级区分。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格























































































































































































































































灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格


灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格








文章来源:站酷 作者:功夫UX
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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




最新 UI 设计趋势及应用

资深UI设计者


字体图标,完善字体系统


图标在 UI 中扮演着重要的角色,并且已被证明是过去几十年 UI 设计趋势的象征。在图形用户界面的发展早期,图标在计算机的显示技术限制内尽可能仔细地模仿现实世界的物体;它们旨在将用户体验从现实世界链接到计算机世界。这可以从苏珊·卡尔 (Susan Kare)为第一台麦金塔 (Macintosh) 设计的图标和微软 (Microsoft) 在 Windows Vista 和 7 中的拟物图标设计中看到。

当用户界面从这种拟物风格转变为 Windows 8 和 iOS 7 的“扁平”风格时,图标设计也转变为单色、线性风格。随着 Android 12 的发布和谷歌新版设计系统—— Material You (或 Material Design 3) , 所有主要操作系统现在都使用这种风格。



但是为什么各大设计系统都使用这种风格的图标呢?设计师意识到图标不仅仅是风格统一、为功能补充说明的辅助图形——设计师制作的图标等同于印刷师制作的字体。 这让设计师意识到图标对于用户体验来说和字体一样重要。


图标的设计考虑与字体类似,并且经常出现在文本旁边。
— Material Design 3 指南

Iconography [旨在] 与 San Francisco 系统字体无缝集成。
— Apple 人机界面指南


Apple 的 SF Symbols 就是最好的例子:它的图标与系统字体具有相同的九种权重,并与文本的大写高度对齐。这也意味着图标可以遵从用户对更粗的 UI 文本的可访问性设置。


Apple 的 SF Symbols 图标集设计为与系统字体相同的九种权重。资料来源:苹果



它们还与系统字体的大写高度对齐,以更好地补充文本。资料来源:苹果



Uber 的设计团队也绘制了字体图标来完善他们的 UI 字体 Uber Move,设置了三种不同的强调程度。


资料来源:优步



字体图标旨在模仿书写系统

因此,为什么字体图标是单色的并用轮廓绘制的原因就很清楚了:它们不是模仿物理对象,而是模仿我们的书写系统。现代字母,尤其是拉丁字母,基本上是由线条而不是填充形状组成的。他们从类似物理对象(如埃及象形文字)的象形文字到更抽象的物理对象表示进行了类似的转变。例如,你不需要画一只鸟来谈论一只鸟;您只需写一组表示“鸟”的字母或符号即可。

通过设计类似于字体的图标,设计师认识到图标是向用户传达信息的重要媒介。图标可以打破语言障碍,而文本对于那些不熟悉图标的人来说仍然是必不可少的。将两者设计为看起来相似可以减少在阅读文本旁边的图标时的认知负担。

默认为字体图标的另一个好处是填充的图标现在可用于表示状态或强调,如粗体文本。例如,Material Design 3 中的“活动状态用填充图标表示” ,Apple 在他们的人机界面指南中建议“使用填充变体来表示选择”或“赋予符号更多视觉强调” 。Twitter 2021 年的重新设计更进一步,活动页面仅通过填充图标和粗体文本进行区分,没有任何颜色变化。


Twitter 仅使用填充图标和粗体文本来区分当前页面。陪审团仍然不确定这是否足够容易访问。



未来不一定能够被准确预测,但是看看字体系统的历史,已经有了明确的关于什么图形代表什么意思的规范:符号“a”总是表示“a”,字母“ant”表示蚂蚁。这些符号的绘制方式仍然存在差异(大写字母 A 可以有衬线或没有衬线),但它们在不同字体中的外观基本相同。

图标似乎也朝着这个方向发展——上面的“添加文件夹”图标在苹果、谷歌和微软的图标集上具基本相同的设计:一个带有“+”符号的文件夹。随着图标在 GUI 中变得越来越普遍,用户对于什么符号代表什么意思的认知越来越趋同,就像字体一样。



如何才能使用字体图标?在您的应用程序中使用图标时,您应该使用使用您正在使用的字体设计的图标集:如果您使用的是系统字体,这很简单,现在系统字体都具有系统图标字体。但是,如果您使用另一种 UI 字体,则可能没有专门为该字体设计的图标集。使用普通的线性图标集就足够了,例如开源Feather 图标Iconic.app「1」。如果你像我们一样使用 Material 图标,你可以轻松切换到字体图标。(似乎 Google 现在已将此样式作为 Material Design 3 的默认样式。)


基于壁纸的个性化

个性化正在成为 UI 设计中越来越重要的元素。虽然自 20 世纪 90 年代以来就存在自定义壁纸和主题,但设计人员现在正在寻找更多方法来个性化整个系统的 UI,主要是用户选择的壁纸。谷歌的 Material Design 博客说得最好:“用户在物理和数字世界中使用个性化的图像定制他们的桌面,并提供舒适和快乐。” 壁纸是用户首先看到的东西,并作为 UI 的背景。因此,让 UI 的其余部分适应此元素是轻而易举的事。



将壁纸融入 UI 的技术已经存在一段时间了,从 Mac OS X 的 Aqua 界面中的半透明 Dock 和菜单到 Windows Vista 中的半透明窗口标题栏和 7 的 Aero Glass 主题。众所周知,iOS 7 为其 UI 的许多部分带来了模糊的背景,整个屏幕(如通知中心和控制中心)都使用了可以透出用户壁纸的毛玻璃效果。

最近,墙纸开始影响几乎整个 UI。当 Apple 在 macOS Mojave 中引入暗模式时,他们在基于壁纸的窗口背景中加入了一种色调,称为桌面色调。根据人机界面指南,它“帮助窗口与其周围的内容更和谐地融合在一起。”



后来他们在 Big Sur 的主要重新设计中扩展了这一点,将桌面着色也应用于光照模式:



Windows 11 在其 Mica material 设计系统中引入了类似的元素,他们的设计指南将其描述为“一种不透明的材料,它结合了用户的主题和桌面壁纸,以创建其高度个性化的外观。” 它还使用此色调作为当前活动窗口的标志。

将它提升到一个新的水平是 Android 12 中的 Material You,它为应用程序的背景、按钮和其他控件的明亮强调色以及更中性的文本颜色着色。整个调色板由每个用户的独特壁纸生成。

这是他们新设计理念的一个关键元素,“如果形式跟随感觉而不是形式跟随功能呢?” 这是对 UI 设计现状的彻底拒绝,它寻求一种“通用”设计,具有技术上最先进的界面来满足用户需求。看看其他人是否效仿这种哲学会很有趣。



Material Design 构建了一个颜色系统

Material Design 团队在他们的公告中遗漏的是他们如何做到了这一点,尤其是因为他们说他们“必须找到一种方法,让任何颜色组合都具有可访问的对比度 [...],而无需对每一种颜色进行测试。”深入了解 GitHub 上最近发布的Material color 实用程序存储库,揭开所有谜团:

  1. Material 团队基于CAM16CIELAB(或 LAB)颜色外观模型构建了自己的颜色系统:“色调、色度、色调”或“HCT” 。CAM16 是 LAB 的继任者,旨在匹配人类对颜色的感知方式

  2. 这些模型的关键是“色调”或 L* 值,它描述了颜色的感知亮度或亮度,L* 值 0 表示黑色,100 表示白色。这在创建可访问的调色板时非常有用,可确保颜色根据感知亮度具有足够的对比度。

  3. 在网络上,WCAG 2 指南规定正文的最小对比度为 4.5:1。直接使用感知亮度作为描述颜色的值使这变得更加直接,正如材料团队解释的那样:“与对比度不同,测量 L* 中的对比度是线性的,并且计算简单 [...] 50 的差异保证了对比度比率 >= 4.5。”

  4. 有了这些知识,剩下的就是生成具有不同色调或 L* 值的颜色调色板,并对其应用任何色调。然后为 UI 元素使用足够对比的对。例如,一个按钮可以有一个 L* = 40 的背景色和白色文本 (L* = 100),它很容易通过最低对比度要求(L* 差异 > 50)。




我们其他人的 LCH

这是一种轻松生成可访问颜色的强大技术,但它不需要材质颜色实用程序。LAB 可以表示为 LCH(亮度、色度、色调),类似于 Material 的 HCT,其中 L 值可以用来计算对比度。(这比现有的 HSL 等表示更好,即使亮度相同,HSL 的感知亮度也会有所不同。)您可以在本文中了解有关 LCH 的更多信息。

(此外,LCH 正在作为 CSS Color Level 4 的 一部分进入 Web 标准!因此您可以 lch (40% 44 49) 在 CSS 中编写而无需将其转换为 HSL 或 RGB,但目前仅在 Safari 中支持。Lea Verou,他编写了上面链接的文章是 W3C CSS 工作组的一部分,正在开发这个非常标准。)

因此,您只需要一个起始颜色,将其转换为 LCH,然后修改 L 值以制作调色板。然后使用一对亮度差为 50 或更多的颜色,以确保可获得的对比度。

我们可以在下面的材质颜色系统中看到这种技术是如何使用的:调色板中的色调与 LCH 亮度值相匹配。(他们还修改色度(类似于饱和度)和色调略微跨色调。)我制作了一个小型网络应用程序,显示由材料颜色实用程序生成的调色板,以获得下面的 LCH 值。



在 Material 的 HCT 之前,LyftStripe的设计团队探索了同样的问题,Stripe 也最终使用了 LCH。我已经将他们的两个探索联系起来,这是极好的阅读。


我怎样才能做到这一点?

有一些工具可以在 LCH 之间进行转换:



我使用这种技术为Rowy添加主题,允许用户选择自己的强调色,同时保持可访问性并为关键 UI 元素着色。源代码具有我使用的确切 LCH 值。



圆角很和谐

当你想要设计一个带圆角的“卡片套卡片” UI 时,内部的卡片应该具有较小的半径,区别在于间距的大小。如果使两者的角半径相等,则内部卡片看起来不合适。这种技术在数字设计中已经有一段时间了,甚至是 CSS3 规范的一部分。



这也存在于硬件设计中:屏幕的圆角与iPad Pro和 iPhone X 设计上的设备框架相匹配。在带有圆形屏幕的 iPhone 上,底座与屏幕的曲率相匹配——Apple 甚至在软件中提供了精确的点大小。您还可以在视频播放器中看到与屏幕曲率匹配的其他元素。



奇怪的是,这个原则不适用于使用单个圆角半径的 UI 元素。在 Material Design 2 中,对话框和内部按钮的圆角半径都是 4dp,尽管它们之间有 8dp间隙。macOS 在优胜美地时代的设计中类似,Windows 10 几乎所有 UI 元素都使用方角。

但是,对于 Big Sur 和 Windows 11,通过增加较大 UI 元素的角半径来近似这种效果。在 macOS 中,按钮的圆角半径现在为 5pt,对话框窗口的圆角半径为 10pt,而且它们都使用“平滑角”来匹配 Apple 硬件的角。与此同时,Windows 11 以圆角以前的尖角而闻名,按钮为 4 像素,窗口为 8 像素。



总体而言,用户界面似乎也变得更加圆润:


  • Big Sur 增加了圆角半径,使用了平滑的圆角,看起来更圆润;

  • iOS 15 引入了带有全圆角的按钮样式

  • Windows 11 移除了大多数 UI 元素上的尖角;和

  • 与之前所有版本的 Material Design 形成鲜明对比的是,Android 12 增加了对话框导航抽屉和完全圆角按钮的半径。


我怎样才能做到这一点?


将最小的 UI 元素设置为某个基本圆角半径,然后将较大的包含元素(如对话框)设置为更大的圆角半径。尝试使它们与较小元素之间的距离成比例,或将较小的角半径加倍以进行简化。这是它在我们的应用程序中的外观,角半径加倍:



OpenType可变字体

最初开发字体时,它们是用金属蚀刻的物理设计,具有固定的字体大小。当排版师为不同的尺寸设计相同的字体时,他们通过改变间距和比例等方面来将设计修改为最佳:这被称为光学尺寸。您可以在本文中了解有关光学尺寸的更多信息。

可变字体是一种基于 OpenType 的新字体格式,允许设计人员自定义字体设计的特定“变化轴”(或变量),例如非固定粗细、倾斜和光学尺寸。您可以在这个优秀的可变字体入门 中了解有关可变字体的更多信息,它使用Roboto Flex,这是谷歌 Roboto 字体的可变字体扩展。



2021 年,所有主要操作系统现在都使用这种可变字体技术来实现 UI 排版中的光学大小:


  • Apple 的系统字体 San Francisco于 2015年发布具有两种光学尺寸:“显示”适用于 20 磅及更大的尺寸,“文本”适用于所有更小的尺寸。2020 年,Apple 将这些字体发布为单一可变字体 SF Pro,以光学尺寸作为变化轴。Apple 的系统图标 SF Symbols也使用可变字体技术

  • 对于 Windows 11,微软将其系统字体 Segoe UI 重新设计为Segoe UI Variable,具有自己的光学大小轴。

  • 作为 Material Design 3 的一部分,Google 引入了GS Text 和 GS Variable,这是其企业字体 Google Sans 的演变。


另外值得注意的是:这些字体都是不同风格的无衬线字体。旧金山是新怪诞的,Segoe是人文主义者,而Google Sans是几何的。

我怎样才能做到这一点?

可变字体是一项相对较新的技术,生产它们的成本很高,所以资源没有那么多,尤其是在免费和开源领域。到目前为止,我发现的唯一具有光学尺寸的开源可变字体是Roboto Flex,但它似乎还没有完成。Rasmus Andersson 被广泛使用的 Inter 字体正在进行 OpenType 的 Bata测试。同时,为突出的标题使用更具表现力的字体可以提升您的设计。对于Rowy,我在小文本中使用 Inter 作为字体,在品牌表达的标题中使用 Space Grotesk。



专注于内容

扁平化设计已经存在了十多年,它的主要目标是通过剥离 UI 元素的杂乱和装饰来专注于内容。在iOS的15设计指南状态,“明快,漂亮的界面帮助用户了解内容以及互动。”

最新的操作系统版本通过更少的层级来迭代这个概念。导航栏在iOS 15Android 12 中是透明的,并在您滚动之前融入背景。



在桌面上,macOS Big Sur 混合了标题栏和工具栏,直到您滚动或悬停在栏上几秒钟。Windows 11 中的一些应用程序根本不区分标题栏,而是将内容放在一个独特的卡片式层中。




这些元素都实现了相同的目标:减少周围的视觉混乱并提升内容的视觉突出度。


我怎样才能做到这一点?


如果您有一个停靠在边缘的导航栏,请在不需要区分时将其混合到背景中,例如当用户尚未滚动时。如果您有主要内容,请将其放置在与背景不同的微妙层中。我们使用了一个 React UI 库 MUI,它使我们可以轻松实现导航栏仅在滚动时区分的效果



插入一切

同样,更多的 UI 元素被插入,不再占据其容器的整个宽度。当 iPhone X 引入屏幕上的主页指示器代替主页按钮时,Apple 更改了他们的指导方针,规定带有圆角的嵌入式按钮,避开iOS 7 中引入的全角按钮许多其他固定到的元素的最佳实践已更改屏幕底部适应新的 iPhone 设计。



在 iOS 15 中,Apple 正在更多应用程序(如“设置”和“邮件”)中插入“表格视图”。这似乎是为了应对 iPhone 屏幕尺寸不断增长的情况,指南指出,“在紧凑的环境中,插入的分组表格可能会导致文本换行,尤其是在内容本地化时。”

在 macOS Big Sur 中,他们将此设计扩展到邮件中的列表,与iPadOS 设计一致。它也出现在整个系统的菜单中,包括菜单栏。请注意,点击目标延伸到菜单的边缘,就像之前的全角设计一样。Windows 11 在其菜单和导航项中共享相同的样式。Android 12 的系统 UI 和应用程序通常也遵循这种风格。

这种风格可以提高可访问性,因为元素和它们的容器之间的分离现在扩展到所有四个方面,但我还没有发现任何支持这一点的研究。当搭配和谐的圆角时,它可以使菜单看起来更现代。



超越颜色的状态变化

设计师们正在添加更多的方式来显示状态,而不依赖于颜色,这对于色盲的人来说是无法实现的。以下是我注意到的一些例子:

  • Spotify 在 shuffle 和 repeat 按钮下方添加了点,而不是在 2017 年仅仅依靠改变它们的颜色。

  • Material Design 3 显示一个药丸状指示器,并在导航栏中为活动页面使用填充图标。

  • Windows 11 向列表和导航窗格中的选定项目添加了一致、独特的行。



这决定了重新设计Rowy 的切换按钮:



以及标准的开关设计


在 Android 12 中,开关现在在主要操作系统中具有相同的基本设计。这使用户可以更轻松地在这些平台之间切换并减少认知负担。

UI设计走向何方?

我在所有这些设计决策中注意到的首要主题是设计师将用户界面设计置于透视之中。他们敏锐地意识到数字界面在哪些方面适合人类体验并与物理世界互动。


  • 轮廓图标模仿文本的融合认识到图标在通信中的重要性。

  • 越来越个性化的界面元素——尤其是你所采用的材料方向——承认人们喜欢用自己的方式制作东西,包括他们每天使用的技术。

  • 和谐的圆角和插入元素的灵感来自实物和工业设计,因此我们的软件与硬件更紧密地匹配。

  • 使用具有光学尺寸的可变字体可以追溯到排版的起源,并且与颜色以外的差异化元素一起,它们提高了所有人的可用性,尤其是残障人士。

  • 更小的事情也有帮助:减少视觉混乱以提升内容使用户能够专注于他们想做的事情。并且使用标准的开关设计消除了确定 UI 元素功能所需的任何认知负担。


这种思维背后的UI设计使我们很好地起来为下一代对AR / VR计算为中心的虚拟实境,在虚拟实境一经验将不得不回答他们是如何改善人类的经验和交互与物理世界。设计人员已经在研究如何使设计系统适应这种变化。看看上面的决定,应用色彩科学(Material 的 HCT 考虑到观看条件)和提升内容的插入元素有助于这些 UI 元素从 2D 世界过渡到 3D 元世界。

文章来源:优设 作者:Bearv5 

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

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

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

iOS 15 发布后,看看这3个值得关注的设计细节!

资深UI设计者

相比于去年 iOS 14 带来的小组件和 APP 资源库的功能,今年 iOS 15 的升级幅度似乎确实没有那么大。

接下来就从设计师的角度来看看 iOS 15 带来的视觉和体验的变化。

iOS 15 发布后,看看这3个值得关注的设计细节!

通知中心的重新设计

iOS 15 对通知中心进行了视觉排版上的优化,放大了 APP 图标并置于卡片的左侧,让用户可以通过图标更轻松的区分和查看消息。

消息小卡片的圆角也更加圆滑,圆角接近于与控制中心按钮的大小,这种圆角更大的设计也更容易将用户的视线过渡到内容中心,同时也使得 iOS 系统设计风格能够更加一致。

在通讯类 APP 的推送中,采用了联系人照片 + APP 小图标的组合形态,增加信息来源的辨识度,以这种形式更清晰地告知用户,所收到的信息的来源和属性。(目前国内的 APP 例如微信、飞书的消息通知等都还没有完全适配)

iOS 15 发布后,看看这3个值得关注的设计细节!

值得注意的是,iOS 15 还可以根据用户设置的时间来定时推送,这些定时推送会构成一个较大的通知摘要卡片,而摘要的内容会进行智能排序,这种机制将会对设计和运营有较大的影响(所以 APP 通知推送会因为这种机制形成新一轮的内卷么?)

随着营销推送的内容越来越密集,用户承受的信息压力也越来越大,苹果也在尝试构建更多细分场景下的推送管理,在 iOS 15 中用户可以选择让 APP「静音一小时」或者「今天不再推送」来避免干扰。

iOS 15 发布后,看看这3个值得关注的设计细节!

更好用的 Safari 浏览器

新版 Safari 有较大的改进,iOS 15 将顶部的地址栏和底部的工具融合到了屏幕底部,成为了一个悬浮的交互控件,并在视觉上进行了简化,右滑动地址栏可以在不同的页面中快速切换,向上轻扫地址栏,则可查看所有打开的标签页,这种在底部操作的交互方式也更符合大屏化的趋势。

这种左右滑动和向上轻滑也明显能感觉到是从 iOS 整个系统的手势操作中迁移而来,而这种手势可以极大的降低用户的学习成本。

iOS 15 发布后,看看这3个值得关注的设计细节!

在页面向下滚动时,悬浮的地址栏和工具栏会自动隐藏到底部,界面看起来沉浸感也更强。

iOS 15 发布后,看看这3个值得关注的设计细节!

这种交互方式的变化逻辑也符合交互设计中的费茨定律

费茨定律

任意一点移动到目标中心位置所需要的时间,与目标距离正相关,与目标大小负相关

iOS 15 发布后,看看这3个值得关注的设计细节!

这里举个例子来简单理解一下,手指当前的位置与按钮的距离 D 越长,所需时间越长;按钮的宽度 W 越大,所需时间越短。应用到产品设计中就是将按钮放置在离手指较近的地方,比如屏幕底部易操作区域,完成任务的时间也就会越短。

iOS 15 发布后,看看这3个值得关注的设计细节!

夸克浏览器同样是将输入框以及一些常用操作置于底部,这是因为我们正常握持手机时,大拇指离底部更近,所以需要进行点击操作的时底部的输入框操作起来更方便,也更快。

iOS 15 发布后,看看这3个值得关注的设计细节!

Safari 的这种交互方式在移动操作系统已经有了一些案例,三星的 one UI 以及安卓阵营中的众多产品也都逐渐往这种大屏化的交互逻辑发展。

iOS 15 发布后,看看这3个值得关注的设计细节!

此外,Safari 采用了新的标签栏设计,同时可以对繁杂的标签页进行整理和保存,标签组支持多设备间的无缝同步,在任一设备上的改动,都能及时同步到所有设备上。

iOS 15 发布后,看看这3个值得关注的设计细节!

卡片化的设计

在使用 iOS 15 的过程中能清晰的感知到,iOS 整很多界面卡片设计更加和谐了,我们最常用的设置页就整体卡片设计上做了区块化和圆角化的处理。要比之前系统直线分割的界面柔和许多。

这种通过使用大留白、两侧缩进的卡片设计使得界面所呈现的功能更加清晰,也更能够突显内容,同时和苹果自家产品 App Store、Apple Music 等产品的设计风格更加靠近。

iOS 15 发布后,看看这3个值得关注的设计细节!

同样天气 APP 主界面也做了布局的改动,增加了卡片化的设计,信息组织也更加直观清晰。天气 APP 头部的天气背景也进行了重新设计,动画背景更加真实,能够准确地反映出太阳的位置和降雨情况,相比之前会美观很多。天气 APP 也增加空气质量、温度、降水强度,空气质量地图等诸多功能。

iOS 15 发布后,看看这3个值得关注的设计细节!

更多新功能

除了通知、Safari 浏览器、天气、钱包、地图等常用功能的更新外,iOS 15 新版本在其他方面也做了更多功能性的升级,这里就来简单看下有哪些重要的更新。

1. Live Text

首先就是 iOS 15 中为照片带来了「实况文本」功能,在这个功能的帮助下,在相册里长按图片,就会弹出复制、查询、翻译和学习等选项,这个新功能估计也是 iOS 15 更新最实用的功能之一了~(这个功能在锤子手机的“大爆炸”中也有)

Live Text 还可以识别照片的各种元素,比如地标、动植物和花卉种类等等。配合 iPhone 自带的系统搜索——聚焦搜索(Spotlight),根据文字元素来搜索图片。

iOS 15 发布后,看看这3个值得关注的设计细节!

2. 专注模式

iOS 15 加入了「专注模式」,能助你更好地专注重要信息,由之前的「勿扰模式」升级而来,包括勿扰模式、工作模式、个人模式以及睡眠模式。每个状态可以设置不同的显示通知,并可与其他设备同步。

iOS 15 发布后,看看这3个值得关注的设计细节!

3. 大闹钟回来了

在此前的 iOS 14 中,设定闹钟的控件改为了数字输入,在随后的迭代中又改为了很小的滚轮输入,这种过小的交互空间受到了很多用户的吐槽。

iOS 15 中苹果又将闹钟设置改为 iOS 13 的大滚轮,随手上下拖动拨盘就轻松的设定好闹钟了。

iOS 15 发布后,看看这3个值得关注的设计细节!

4. 桌面小组件

不知道小伙伴有没有发现,在 iOS 14 中桌面重叠的小组件没法拖动出来,只能手动删除再重新添加。在 iOS 15 苹果就解决了这个问题,小组件现在可以从堆叠状态移出,同时可以选择智能轮换和小组件建议是否打开。

桌面还有一项大的变化就是可以整页移动了,相比 iOS 14 只能一个一个拖动 APP,整页的切换和隐藏大幅缩短了 APP 布局困难者的“编辑”时间。

iOS 15 发布后,看看这3个值得关注的设计细节!

此外,iOS 15 相机和天气的图标也进行了一些细微调整。“健康” APP 中新加入了健康趋势,其中包括静息心率、睡眠和有氧适能,持续观测健康状况的变化。FaceTime 中也增加了空间音频、人像模式、语音隔离、同播共享等功能。相册增加了 EXIF 参数显示等。

除了系统及界面以外,iOS 在 Human Interface Guidelines(界面设计指南)的内容上也有了一些更新,比如新增了包容性的设计原则,SF Symbols 3.0 图标的新增,以及新的空间交互的设计。更多关于 iOS 人机界面设计指南可参考 :https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

iOS 15 发布后,看看这3个值得关注的设计细节!

总的来说,虽然修修补补又一年,但 iOS15 系统在细节设计以及新功能上确实提升了用户体验。

文章来源:优设 作者:姜佳欣


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

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

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


2021-2022设计趋势报告·动态篇

资深UI设计者

动态设计有助于创建令人愉悦且直观的用户界面。好的动态设计,不仅能引导用户对数字产品的体验,还可传达有关产品的品牌信息

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


1.1 动态在UI/UX扮演的角色


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

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

1. 提高连贯性(Increase Continuity)


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



2. 连接场景(Connect Scenes)


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



3. 视觉吸引(Visually Appealing)


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


1.2 动态设计趋势


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

1. 增强表达(Enhance Expression)


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



2. 创造层次(Create Hierarchy)


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



3. 扩展维度(Expand Dimensions)


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


2.1 变形 Morphing


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

| 动画插图 Animated Illustrations


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



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


by Lobster



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


by Graceful illustrations ™



| 流体动态 Liquid Motion


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



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


by ✞anton mishin✞



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


by Gilles Tossoukpé



| 动态渐变 Dynamic Gradients


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

by Pixelz Studio



| 微交互 Micro Interactions


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

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


by Google



| 动画商标 Animated Logos


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

by Yulia K.


by Meta



2.2 动态文字 Kinetic Typography


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



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

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


by HOLOGRAPHIK®


by Hrvoje Grubisic



2.3 背景动画 Background Animation


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

by Carlo Soleri


by Kirill Zhukovsky



3.1 遮罩 Masking

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



| 切换场景 Scene-Switching


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

by intent


by Minh Pham ✪



| 状态变换 State Transformation


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

by Daniel Tan


by Outcrowd



3.2 视差 Parallax


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



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


by Studio VØR



4.1 3D动态图形 3D Motion Graphics

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



动性的用户体验,并有效地展示品牌的活力。

| 更生动的表情 Lively Emoji


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

by Outcrowd



| 营造空间感 Spatial Awareness


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

by UI8


by Bruno Ortolland



| 拟人动画 Anthropomorphic Animations


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

by Gregory Riaguzov



4.2 摄像机运动 Camera Movements


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



| 推近/拉出 Dolly In/Dolly Out


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



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


by Michael Crawford


by Ali Zafar Iqbal



| 水平/垂直移动 Truck/Pedestal


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

by Netguru


by Minh Pham



| 结合多种运镜 Multiple Camera Movements


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

by Gregory Riaguzov


by Paul Ilnitski



| 一镜到底 One Shot


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

by Orizon: UI/UX Design Agency


by Minh Pham ✪


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



文章来源:站酷 作者:大魔V

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

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

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


日历

链接

个人资料

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

存档