2021年UI/UX设计趋势,以及如何让它更好为我们工作

用户头像
深圳/交互设计师/5年前/2477浏览
2021年UI/UX设计趋势,以及如何让它更好为我们工作

我们列出一份清单,包括即将塑造的2021年的设计趋势和可能的挑战!

文章共8194字,预计阅读需约30分钟



每年都会出现新的UI/UX设计趋势榜单,这也是趋势的方式。


当大部分参与者开始跟随这个或那个趋势,难免会因为过度饱和而不可避免的变得没有效果。所以对于设计师来说,最好的出路是在实践中时观察它们,为客户提供一些新的东西。同时对企业主而言,则是为自己的品牌发展提供思想来源。


如果我们拥有10以上的网页或移动应用设计的经验,就知道该如何利用UI/UX趋势来为任何行业设计视觉愉悦感和有效的数字产品。因此我们列出一份清单,包括即将塑造的2021年的设计趋势和可能的挑战。所以我们将充分利用UI和UX的最佳实践,创造出强大而有能力的产品,并获得回报。


“设计是营销的肢体语言,不要懈怠”

— Mark King





#1 所有的远程和虚拟的事物



2020年是谁也无法预料到的一年。在家办公到新的一波虚拟现实浪潮,所有的远程方面都是2020年的主要设计趋势之一,而在2021年及以后,它仍将如此。


在2020年初,出于需要,AR和VR已经以飞跃式的方式快速进入了医疗,教育和艺术领域。许多的公司尝试去做成这件事,然而事实上都失败了。但由于疫情,停止了社会需要这些技术仅仅"只是以娱乐为目的“的看法。


Zoom的股价在一年内涨了600%。伴随着的还有类似的工具,它现在炙手可热,并且它看起来在未来将会得到大规模发展,导致建立完整的“虚拟办公”生态系统。我们将很快见到更多的企业会议在VR中举行。你甚至都不需要戴头盔或眼镜就可以参与了。接下来我们就看看虚拟现实工作空间创业公司Spatial是如何介绍的它的。


在过去的15年左右时间里,世界已经朝着一个远程方向发展。病毒只是给了它一脚,将本来需要10年的时间缩短成了6个月。


在新的环境中,交互式广告牌的形式已经复活。现在在Zoom/Skype的幻灯片上讲述项目的成果,新的想法或者是展示设计已经成为常态,或者使用更加高级的方法。去年,Pitch(一个演示文稿创业公司)额外筹集3000w美元资金。


在YouTube上也有大量为VR制造的内容,同时Facebook对VR和Ar越来越重视。


这里有交互式VR旅游应用,为创建三维艺术工作的应用,为教育和博物馆设计的AR应用,教育性VR游戏应用等等。


AR—Pegah Navid的博物馆指南


越来越多的公司考虑将VR和AR融入到他们的数字产品中。如果新的VR浪潮兴起,我们很快能看到一个相当令人兴奋的时刻,设计师将拥有全新的机会来推销产品和服务!


与此同时.....


因为这个设计趋势现在还让人感到新鲜,所以必然缺少增强虚拟现实的设计和开发的标准,这些标准还在建设中。而共同语言的缺失,让开发进程异常缓慢。共同语言也有可能成为改变AR/VR项目兼容的原因。然而,它只是一个时间问题。


“远程协作”是另外一个远程相关的挑战。一般来说,设计师和管理者们在之前没有经验面对这样的情况。机会是,在这个历史时刻,你已经知道了常用的技巧来帮助你面对这些挑战。不过,你可以随时查看这份设计师远程工作指南。数十个实用的技巧来提高你的效率,这里有来自知名公司真实案例。




#2 人工智能和其他工具来拯救


一般来说,所有现代界面设计和开发工具聚焦多个重要方面:

  • 打破常规

  • 建立设计师和开发之间的桥梁

  • 适应设计系统的工作

  • 在线远程协作工作


以上这些点构成了当前用户界面设计的趋势。借助现代工具和技术来帮助设计师简化工作流程。例如,Adobe在10月宣布他们的Photoshop22.0版本更新,包括需要来自Nvidia的很棒的以人工智能为驱动功能,Adobe称为“神经过滤”的一组图片编辑工具就在他们中间。颜色变量和组件视图是sktech最新功能,他们更容易保持颜色的一致性以及组件的实用性。Figma迅速为分布式团队加入了新的功能,让远程协助更加便利,包括模板和虚拟会议功能。图形编辑Pixelmator的最后更新是具有机器学习增强和GPU驱动的图片编辑功能。



另外一个有潜力的UI/UX趋势是生成式设计,这是项目的名称,它能够分析出大量类似的数据,找到他们的特征定义和特点,并依据提供的数据创造新的。


几年多,分析公司一直坚持发布一篇《新兴技术的炒作周期》的报告,他们的员工讲述了在未来几年最有潜力的程序技术是什么,以及为什么投资者被这些技术所吸引。今年,那里有很多关于AI的内容,包括生成设计。例如AI的例子,我首先想到的是臭名昭著的Deepfake。但你可以找到更多无害的知名的项目——This Person Does Not Exist 的项目。两者都是使用GAN(生成式对抗网络)。骗子们正在深度的使用他们,这意味着私人和政府机构对他们快速识别感兴趣。这也意味着他们将变得更加复杂....等等。所以在未来,根据Gartner的预测,生成式AI将迅速发展。


在UI/UX设计中,这里已经有大几十种以上的算法驱动的设计工具,你可以用在更实用的地方:去创建布局和营销素材,检查基础规则的可行性原则,选择视觉风格,以及生成演示原型和已完全消失的小设计细节,部分原因是由于极简主义的流行,另外是因为设计师希望去逃避负担过重的事情(或更希望事情更快或成本更低),易用性检查等等。实质上,任务要花费更多的时间和更少的创意。事实上,设计师成为了神经网络设置结果的控制器,这个令Ai设计成为热门的工具列表是由俄罗斯网络公司设计总监Yury Vetrov收藏的。



同时....

A在UI/UX方面的能力还处在发展萌芽期。AI需要微调才能起作用。机器之间会学习,但是它们还远远达不到独立思考的程度,以及在趣味问题和相关的合适与不合适的内容上,他们还无法与人类竞争。AI的目的是帮助和协助人们完成他们的任务,他们在这方面已经展示了很好的成果。




#3 高级个性化


个性化设计是指公司或品牌基于提供的信息:出生日期,婚姻状况,浏览记录和历史订单等等。为每一个用户创立了个性化内容和推荐。


个性化设计的主要目的是让用户感受到这个内容是特别为他们而创建的,通过这种方式提高转化率,这也是所有商业网站主所追求的结果。个性化既是用户体验的趋势,也是最佳实践之一。


谷歌和苹果不断的为他们的生态系统开发个性化的助手,以至于可以通过语音,面部或指纹来了解是谁在与他们进行互动。在未来,界面将变得更加个性化,并且在眨眼之间可以改变他们的外观,元素位置,色调以及常用动作。


AI在用户体验中扮演着重要角色,而大部分用户甚至都没有意识到这一点。想想Spotify上的个性化音乐推荐,以及Youtube的视频推荐,或者是Netfilx的推荐。亚马逊基于每一个用户的购物习惯,愿望清单和购物车来创建个性化主页。你可以通过生成与用户相关的内容,让界面更加个性化。


图片来源于:netflixtechblog.com


图片来源于:netflixtechblog.com



于此同时....

个性化并不是一个容易遵循的设计趋势。它不是让用户在深色和浅色主题之间切换(它更多的是定制化)。网站可能不正确的收集和分析数据,而导致坏的结果,比如使用错误名字或建议可能会冒犯甚至是永远失去用户。建立一个具有个性化的网站是非常贵的,所以你必须去花大量时间和精力去收藏和分析信息,开发配置文件和个人账户,并且确保算法效果以创造个性化界面。然而许多用户觉得网站知道关于他们的特殊信息很可怕,所以个性化也要求更好的安全性,以及改进用户的体验内容来说服用户提供他们的个人信息等。





#4 非接触式交互


UX/UI另外一个趋势于疫情后重新开始。我们开始谈论在不接触设备的情况下使用各种交互方式,例如VUI(语音用户界面)和隔空手势控制。甚至在疫情前,人们就已经清楚的意识到语音交互是未来几年UI/UX的趋势(我们早在2019年就将语音用户界面列为设计趋势之一)。在你的设计中增加一个语音用户界面可以扩大其影响力。比如,你能够使用语音机器人让访客使用语音命令进行沟通,这同样适用于虚拟助手。在未来几年内,大多数公司将创建完整的语音用户界面。


安排会议 — VOICE by Denislav Jeliazkov



隔空手势控制是一项技术,它在触摸屏出现后引入的各种手势将控制机器提升到了一个新的高度。现在,在空气中的动作就可以让设备上的功能发生作用。比如,近代欧洲豪华轿车品牌DS Automobiles就展示他们新的非接触式控制,声称通过半空触觉反馈和手势就能控制设备,同时该系统的精准度是触摸屏的三倍:



与此同时...

语音搜索与一般搜索不同。有时,用户无法表述清晰他们想要搜索的内容,由于语言的细微差异而导致不完整的任务,会丢失上下文的内容。同时语音障碍,还有无法一目了然的理解语音界面的所有能力——这些都会影响VUI的设计。


对于隔空手势来说,这里有一些涉及到手机的挑战。有时候它比普通方式更艰难和缓慢,不够方便,不够隐私。但是你会发现,当你在看电视,开车或者使用下厨应用的时候非常实用。


去年8月,Apple获得一项专利,该专利描述了我们能够在未来的Airpods Pro设备中看到一些炫酷功能,包括能够通过“隔空手势”控制无线耳机的能力。





#5 (甚至更多的)3D或沉浸式体验


3D设计一直吸引用户直到现在,所以你很难在Web和手机端中称它为一个新颖的设计趋势。但今年,设计师们对界面中的3D组件和整个3D场景的兴趣会更高。3D设计得到了一个新的推动,在Apple最近发布的macOS融合了3D设计,macOS Bigsur有一组改版后的图标,其中一些看起来颇具3D风格。


图片来源于: reddit.com


同样发生变化的是,尽管3D元素在实际使用上并不多样化,但是它们经常会给用户的机器带来负载,然而现代的前端框架能够大幅度减少页面加载时间,允许3D元素能变得更加精细和庞大。


设计工厂:  Peter Tarka


在2021年,3D只会继续变得更流行,特别是看到VR和R技术的普及。炫酷的抽象效果,不寻常的角度,你可以在3D中做到这一切,而不需要使用真实的物体。同时它还能节约成本,比如,当你需要展示一辆昂贵的汽车或者造价不菲的房子的时,3D可以吸引关注并且使网站更加有魅力,让用户在网页上停留更长时间甚至提高会话时间。


adidaschile20.com


本网站的3D渲染和UI界面都使用了最流行的额three.js. JavaScript库。



weedensenteret.no



同时...

技术在演变,但3D的主要缺点依然存在。图形越复杂,他们在用户电脑执行的负载越大。当务之急是,只有当你有信心使网站能优化重度的3D动画时,才使用这个它。否则,用户将遭遇滞后和冻结。这个趋势正如火如荼的进行并且在不久将完全形成。最理想的是,最好是设计师如何懂得根据顾客的目标进行优化,来定制个性图形。





#6 用户喜欢的动画


各年龄,性别段的用户都喜欢看引人入胜的动画故事与动画屏幕相联系。

极简界面与看起来有趣且大胆的元素结合起来,你既可以吸引到用户,又可以保持清晰的信息量。


在2021年动画会越来越多。无论是小型的(按钮和转场动画的微动画),还是更大型的,包括3D。现在看来,技术最后的成长观点是将滞后降低到最小。


Clint —  Yoann Baunach的新网站



交互概念| AI营养跟踪 Eddie Luong



任意的动画效果比静态的图片或纯文本,更好的讲述一个品牌故事。在它的帮助下,你可以为最严肃主题的网站添加一些轻松的元素,释放掉用户的压力,准备处理大量的严肃的专业信息。比如说,现在这里有更多的运动元素与用户的滚动或光标有联系。


julieguzal.fr



你也可以让移动应用的下拉刷新更有趣。


Christmas Pull to Refresh by Oleg Toptalov



微型互动值得单独提及。因为现在巨型动画很难让人惊喜,所以更明智的是使用更小型的动画元素激励用户。例显示状态的改变,以及帮助用户导航。微型交互用于:

  • 不同状态的app中改变颜色

  • 网站加载可视化

  • 页面之间的转场动画

  • 按键的反应


期待在2021年看到更多的动画按钮案例。


播放/暂停按钮动画概念: Shakuro



与此同时...


在设计中动画应该具备目的性和意义。不仅要养眼还需要解决问题。最终动画的目的是解释,简化和加快交互进程,只有这样才能创造所谓“惊艳的效果”。界面动画方案应该贯彻可用性的原则,而不是纯粹的装饰和娱乐。





#7 物理和逼真的纹理


这个观点的标题也可能类似于“试图从扁平化走出来”。扁平设计的流行高峰在2012年,和极简主义一起,它仍然是塑造现代UI设计的风格之一。与此同时,许多的设计师也开始觉得需要一些新的东西,哪怕只是图形上的。


虽然光滑的,以及炫酷的渐变和扁平的物体仍然占据主流,然而尝试打破同一性倾向的趋势之一是加入一些真实生活的凹凸不平的质感。


来看看一下沙尼亚插画家兼平面设计师Eiko Ojala这本书的封面插画吧。


图片来源于: ploom.tv


虽然新拟物的尝试没有成功(从一开始就没有多少粉丝)。部分设计师研究了有形的美学,赋予了更多的真实感觉和诚意。



秋天的模式. 来自 Valeria Schmidt


参观者们几乎可以用他们的手去感受真实的纹理,以至于给他们留下印象。

这就在顾客和产品之间建立联系。这种增加真实纹理,颗粒和轮廓的趋势在现代UI设计中依旧存在,并且在2021年有很大的进步和发展潜力。它常在图片和多媒体中使用,并且能够让人人赏心悦目,以及在那些销售家居或化妆品公司的手中发挥作用。



elemis.com


与此同时...

整个品牌都希望在网页上使用工艺元素,无论是图形、特殊字体、纹理还是颗粒效果,都可以理解。界面变得更加人性化,这对那些希望强调自己注重对人的关怀的公司的推广有帮助。然而,虽然这种物理性对于传达实物的感觉是很好的,但对于设计师来说,重要的是不要过度到会分散用户对主要目标--购买的注意力。





#8 从完美到独特


近年来,许多网站都聚焦在完美的设计上,一切都需要经过深思熟虑和精确计算。这种趋势在2021年由于即将到来的独特设计变得越来越重要而改变。事实上,这个设计趋势看起来是“不完整的”,就像2020年已经向我们展示的那样。然而,主要的想法是设计师可以借助熟悉的元素,以不同的排列和呈现方式,让这种不完整的设计,创造出独特的吸引力。


非常规布局

在UI/UX的设计的世界里,对称性主要代表的是传统和经典的设计。这是一种帮助简化网站结构的好方法,话说回来,所有建立在网格上的网站看起来都非常的相似。减少了网站的独特性,既能影响网站的搜索引擎的推广,也能够从竞争对手中脱颖而出。非常规和有创意的布局在2021年将越来越重要。这个将允许你给网站带来更多的特色和个性,以及强调它的特别重要的地方。


wakawaka.world



非常规滚动


它有助于使用新颖,有趣和非常规的解决问题的方案和方法。创意性的导航技术包括水平导航,滚动颜色渐变,混合水平和垂直的滚动,滚动触发动画,拖拽探索等。这样的解决方案特别适合关于合作创意和活动的宣传网站。


MIND — Memories by Anton Pecheritsa



颜色组合


不要畏惧霓虹灯,复古美学和独特设计,因为最主要的是借助UI设计,彻底从竞争中脱颖而出。


blastgalaxy.nl



goliath-entertainment.com



字体设计


为什么不尝试借助字体设计让你的设计变得独特呢?


charlielemaignan.com



与此同时...

唯一需要注意的是,无论解决方案多么炫酷或者独特,但它的独特也使得他们不适合做更“踏实”的项目。他们不适合放在必须要用户聚焦在重要数据上的界面。比如说工业设备界面,或者是处理一个传统的在线商城那样需要面向非常广泛的受众的项目。只有当它不会让用户感到烦躁,并且引起他们的兴趣,需要感到合适惊喜,和引起敬佩时才是合适的。记住:平衡,简洁和针对性。





9# 超有技术含量的登陆页面


这里也有一个趋势涉及到,尤其是布局和动画的复杂效果。产品和流程的抽象是一个完美的解决方案,以技术和生产为导向的网站是不能失去那些无聊的访问者。这些技巧包含超显示的复杂动画,渲染和体积渲染图来吸引人。

这个结果可能是不同程度的“不可思议”,有时候这些只是详细,时尚但相对中性的例子,比如这个Mackbook pro的登陆页。

www.apple.com



其他的例子就令人叹为观止。


mav.farm



与此同时...

视觉效果令人惊叹,的确如此。在创建这些网页时,开发和设计工作的水平是显而易见的。主要的挑战是,访问者得到的信息不超过你试图通过网站出传达的60%,通过这些网站,他们得到的信息只有10%左右。以至于这种趋势使设计师为了追求瞠目结舌的视觉效果来取悦你而违反了信息易用性和清晰传递的理念。所以你需要找到能同时带来经验和价值的黄金理念。





#10 不同寻常的插画和SVG


3D在插画中仍然流行,以及2D也有不同寻常的角度,按比例的设计,超现实的简洁,或鲜明的复古色彩。如果说以前极简主义是插画的主流,那么现在怪诞风格则非常流行:以怪诞和真实与虚幻的结合。


TATU by MTHSMNDS



另外一个亮点是SVG(可缩放矢量图形),由XML定义基本属性(例如路径、形状,字体或者颜色,甚至是更高级的功能)而形成的矢量插图。


(.svg) Animated Icon Pack, Soon… by Huseyin



问题是这样,当显示分辨率提高时,PNG,GIF和JPG就失真了。这就是为什么你必须为每一种屏幕类型单独保留一个文件。而使用SVG,就不会存在这样的问题了,因为矢量格式能够放大和缩小同时不失真。



与此同时...

面对强大的信息流,仅考虑图片内容似乎是一个相当困难的任务。因此,插画是一个显而易见的解决方案,可以抓住用户的眼球并且在主流背景下站住脚。它可能成为你的风格。但与此同时,这个插画的风格不是处处都合适,如果你知道你的听众是被这种插画效果吓怕,而不是被吸引,那可能选择一个更加安全的东西会更好,并且将你很棒的想法保留在其他地方上。





#11 进一步简化UX


朝着一步到位的方向持续优化。设计师的任务是将需要填写的元素和字段减少到最小。相同的道理也适用于用户达到预期的结果需要的步骤数量。例如,现在最先进的UX趋势之一是将整个结账过程放在一个步骤中。注册和登陆流程越来越简化,或者成为用户流的一个步骤。在2021年,不要强迫用户去记住他们的密码。例如,在线商店,用户个人的识别码可以是他们的手机号码或是生物识别数据。苹果推出了超级按钮,它可以代替任意数据进行注册。在需要应用中,你仅需要一个按钮就可以注册,不需要社交网络的参与。


图片来源于: developer.apple.com



与此同时...

尊重你的用户,他们是都对新简化流程做好了准备吗?


考虑企业经营的利益市场和你的目标受众的账户。先测测你的想法,即使总体概念是正确的,但你只要聆听你的测试对象,你可能还会找到需要许多次要的小瑕疵,尤其是没什么经验的用户。因为在注意力资源枯竭的时代,当丰富的界面变成视觉上统一的”一团糟”,一个不寻常的UX会让人恼火。





#12 超级app时代

在过去20年前,从硅谷走出来的一直是“单一目标”的app。但是今天称“超级app”在中国和周边国家疯狂流行。不过,对于西方消费者来说,他们几乎不常见。


超级应用结合了许多服务,并尝试解决用户的任何问题。一个这样的应用可以结合社交网络,通讯工具,游戏,交友,超市,转账,货币兑换,保险,送餐,出租车,酒店预定等等。在中国,超级应用最突出的例子就是微信和阿里支付宝,每个月都有十几亿人在使用。事实上,这就是一个国家的常见的整个社交行为的组成部分。

公司需要超级应用来争夺用户。他们一直努力打造生态覆盖用户的所有的需求,使你不能离开这个生态系统。一个用户在app花费的时间越多,流量就越大,他们就根据用户流量生钱。


东南亚日常应用探索— Grab by Danis


在去年夏天,俄罗斯的领先技术功能Yandex宣布推出Yandex Go,这是首款欧洲结合了按需运输和送货等一款超级app。亚马逊,Facebook和google也都在亚洲积极推出类似于超级app的产品与当地产品竞争。如果中国公司在技术领域扮演的角色还在增强影响力,那么在未来几年我们的网络世界将看起来大不一样。


与此同时...

很多人觉得当他们的app有太多的功能时,发现并不那么实用。当你需要在一个app里的大量服务中快速找到你需要的功能,将变得棘手,也很让人烦躁。另外一件事情是,亚洲人似乎很不情愿将某个供应商或服务作为超级应用的“套餐”的一部分强加给他们。但是,西方人更愿意去探索前几种选择,这也是为什么截止到现在他们更愿意使用单一用途app的原因。





#13 更高级的引导

当数百万计的人们被迫处理安装,以及使用视频会议和类似于远程服务的工作时,除了2020年,没有更好的时机来体会一下良好的引导页。


引导页的主要功能包括:

  • 让用户熟悉关于app的主要功能和目的

  • 给予注册机会

  • 收集信息以提高个性化


优秀应用排行的app中产生的引导页的效果超越了单纯界面元素的解释,而是呈现产品本身。


在线教育App的引导页来源于Shakuro


与此同时..

许多人认为引导页本就是一个设计不好的标志。也就是说,如果你必须去解释一些东西,那么你的设计就不够好。另外,如果用户不理解你的app,他们就不会再使用它。

但是一个有效的引导页可以让访问者对应用的作用有一个正确的认识,从一开始就给用户留下深刻印象,所以我们需要用自定义图形让应用具有识别性,让用户密切关注它,使它可复制:让它更清晰,简洁,以及易读。


...




#14 永远的趋势:批判性思维和设计相关性


设计具有周期性。UI/UX设计的新趋势每年都会有,所以会有很多重复,以及过去的东西会回归。就像有人预测3-4后包豪斯将会回归。还有的设计师和工作者正在寻找一些新的方法去替代扁平化。


上面说了这么多,仍然要强调一个永远不会过时的设计趋势——批判性思考和设计相关性。也就是说,如果某些事情在设计中是一个趋势,那么它就有生存的权利,它有自己的逻辑和发展角度。


设计是一种手段,而不是目的,它背后一定有别的东西。


设计是一种视觉语言,通过它来传达产品的价值。当你懂得了这个语言,你就想要用它去创造某些有价值的东西。设计也是如此。




39
阅读原文
|
举报
|
41
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
新能源APP应用UIKit
智能家居中心 简约 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
户外旅行飞机情侣假日出行
UI界面 组件
高级表盘系列UI源文件
UI通用设计素材1
【新年UI图标】游戏/娱乐icon
【新年UI图标】会员icon
【新年UI图标】秒杀icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
APP/小程序商业项目UI模板|99个高保真UI+79个原型
Security Camera UI kit
【新年UI图标】珠宝icon
【新年UI图标】汽车icon
拟物风质感写实UI卡片合集源文件
我的钱包-UI界面设计-app
钱包ui模板
【新年UI图标】30个图标
手表表盘UI系列
新拟态风格 UI设计组件库
【新年UI图标】钱包icon
科技医疗透明柜UI界面设计
你可能喜欢
相关收藏夹
大家都在看
登录注册