今天,小站就为大家罗列一下交互相关领域中UX/UI设计的最新发展趋势。
UX DESIGN
用户体验设计
01/ Seamless Experience
在无缝体验中,最重要的是保持一致的用户体验,同时给定体验中的每个元素都是彼此自然发展的。流畅的体验对用户来说就意味着积极的体验。
例如,最初只是一个社交平台的微信,现在也已经包含了完整的电子商务体验。而在Instagram、Facebook和Twitter等社交平台上也已经集成了电子商务。
两款微信小程序
左:饿了么;右:携程旅行
如果我们想要呈现完美的Seamless Experience,那么在设计过程中可以遵循以下几点:
-
保持简单而一致的操作:简单、干净且一致是一种永远都不会消亡的设计趋势。完美的交互体验可以帮助用户轻松导航而不会出现任何混淆
-
缩短用户操作流程:简短而简单的流程可以吸引访问者使用我们的服务
-
呈现出挑的登陆页面:一个好的登陆页面可以轻松帮助用户找到我们的产品或服务
缩短用户操作流程
02/ Scrollytelling
一味地滚动界面很无聊。如果我们想吸引用户注意力,就要实现Scrollytelling (滚动叙述)。它可以在页面和应用程序中通过滚动的方式呈现内容叙述。想象一下,当我们在制作一个网站时,每个滚动插图、字体、文本片段和其他元素都开始变得栩栩如生。
这种UX设计趋势非常有助于提高用户的参与感。虽然用户不能影响滚动叙述的进程,但整个内容就像电子游戏一样,带领他们穿越符号迷宫。将故事叙述通过滚动的方式也可以进一步帮助用户了解我们项目的方方面面,进一步增加用户体验。
以Anton&Irene的滚动设计为例,它的好处就是用户无需点击和连续滚动,即可了解该网站所提供的服务。
© Anton&Irene
© Google动态文本
© IAmBinadam
03/ Data Visualization
不同级别的不同数据,可以帮助用户知道首先关注的点
有些数据图表乍一看并不像图表,这就使得它们更具戏剧性
-
图表和图形
-
插图(包括带有手写短语的插图)
-
静态信息图表
-
交互式信息图表
交互式信息图
© https://blog.hubspot.com/marketing/interactive-infographic
04/ Microinteractions
在设计过程中,重要的是要达到界面元素的和谐。微交互的一个重要部分就是颜色,它会为界面元素带来不同的意义。此外,动画交互也将为我们的设计注入活力,并有助于保持用户的参与度。关注每一个细节是我们进行设计的一个关键方面,因为它可以带来更好的用户体验。
CTA动画效果
UI DESIGN
用户界面设计
01/ Metaverse
大家不需要戴上VR耳机即可使用这些头像。而Microsoft也将会使用AI来聆听员工的声音,随后为他们的3D头像制作动画。如果他们切换到3D会议中,那么AI也会为他们制作动画表情符号。
3D头像的运用将推动整个元宇宙环境。在这个虚拟数字空间中,大家可以通过游戏进行社交,甚至进行项目协作。
在过去的几年里,3D艺术和动画已经出现在各种媒体资源和众多UI设计中。这也就意味着越来越多的设计师将它们集成于网站和登陆页面中。与经典动画相比,逼真的3D形状与动效相结合,总是会吸引更多人的眼球。
在3D设计过程中,我们可以将3D对象的样式无缝地“穿插”在2D空间中,它可以帮助我们创作出更多有趣的作品,同时这也是一种具有巨大潜力的设计方法。如果我们想呈现出良好的3D效果,可以参考以下两点:
-
包含动画和插图:一个具有管理良好的动画和插图的3D设计,会使得网站脱颖而出
-
选择正确的对象和颜色:根据我们的项目受众进行3D设计,选择正确的设计并提供合适的颜色,以此在网站上轻松吸引用户
乌克兰政府网站在2D空间里使用了3D手来模仿黑客帝国
-
良好叙事:动画可以通过在界面和用户之间建立情感联系来传达某种信息
-
使加载页面变得有趣:带有百分比的加载动画不仅可以娱乐用户,还可以告知他们加载时长。我们可以使用进度条或任何能想得到的元素,以此来展示时间流失
-
使用光标效果:用户可以准确地看到光标所在位置。通过添加对该光标做出反应的智能交互动画,来帮助用户进行浏览
-
破坏动态排版
Vector Clock的加载动画
悬停动画
破坏动态排版-Kilm
-
吸引注意力。这就意味着动画标志有助于提高我们产品的知名度
-
有助于改进SEO (引擎优化)。例如,Google偏爱动态内容,而带有动态图形的页面则会更快速地吸引用户
-
在移动设备上具备良好效果。吸引人的动画logo看起来比静态logo更有趣
-
展示产品历史。动画标志可以在短短几秒内展示该产品的使命,甚至是价值观
动画标志
© Toridori
除此之外,我们也可以为现有的logo设置动画效果,或根据源文件重新考虑其动态设计。例如,我们可以轻松制作带有字体的动画标志。
动画字体
© Shabello, Bobby Voeten
编辑:YAN
图文信息源于网络,侵权告知即删
本文来自微信公众号“交互设计小站”(ID:racjiaohu)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。