车载wince系统刷界面ui_2020年值得关注的10个UI设计趋势!

949c59d877a5247cca7bc4b0a3fc1ab3.png

创意动画

1. 品牌加载

公众喜欢有趣,可塑的动画。Airbnb 和 Netfilx 将品牌logo动画应用到了启动页和加载页面。结合品牌特点、风格和符号,融合到产品设计中,从而提升视觉的一致性,创造富有特有性格的产品界面。

aca32b05d353ef24e12884761c8069b2.gif

△ Netflix & Airbnb

2. 图标动画

微交互是建立在移动端上微妙视觉效果的小动画,而图标动画是微交互其中的一种。它的目的是吸引用户,让用户感觉顺畅、愉悦。

最近,让我印象深刻的一个图标动画是 Facebook 的新消息提醒界面,这些由产品所包含的一个个小细节,创造出了新颖而有趣的设计。

b6db33beefda5502e1acfe44849a5db6.gif

△ Facebook Website

留白分隔

在 UI 界面中,最常见的分隔方式是用细线对模块进行划分,但随着设计重心趋向简约,注重内容本身,传统的分隔线方式就略显多余。

根据格式塔亲密原则,通过留白控制间距大小,可以清晰地划分模块层级,同时界面看起来也更加透气、富有张力。可以看到 QQ、飞聊、Gmail、Messenger 等应用都采用了留白分隔。

bf47dd17e3c7ce2975c1b3d3345fb949.png

△ Gmail & Messenger

融入插图

1. 品牌形象插画

一个好的插画作品可以为产品带来极佳的辨识度。Snapchat 的页面用了很多情感化设计和品牌形象,包括开启通知引导动画、查找好友 landing page、下拉刷新页、照片回忆等等。

从品牌的个性化设计,寻找一种基于插画的设计语言,把产品塑造成一个高辨识度的 ID。

ffee6f2ad79353626a69d5ad9aeb1721.gif

△ Snapchat

2. 3D插画

随着软件技术的提升,3D 插画在这几年中大受欢迎,很多应用都使用 3D 渲染产品,如:星巴克、Keep、毒App 等等,因为它真实立体,有着更高的转化率。

eca6ed0700e66ee91441ac01be116c67.gif

△ Starbucks by Wojciech

d9086fd526e592f5a54c7bb93a665023.gif

△ Keep & 毒

圆角卡片

圆角代表友好、亲和力,而卡片模块化的布局更为清晰、有效、整洁。

500a8d2f987b77d4e9b952954ae3fa08.png

△ Broadcasting & 微信

视频背景

长期以来,图像在视觉设计中起着至关重要的作用,而视频能够更直观的吸引用户,传达主要的思想。

在移动端中,视频主要用于登录页背景,一般可以是几秒钟的循环剪辑视频,它可以带来一种身临其境的体验感受。

43764fdecb215d951a507bffdffb79cf.gif

△ Lyft & Nike

轻提示

Toast 是一种轻量级的提示,作为用户操作后的反馈。UI 形态上从居中浮层,慢慢趋向于底部通栏样式。这样设计的好处是不会挡住当前界面的内容。

举一个反例,iOS 的调整音量提示,大范围的遮住了界面,特别是对正在玩游戏的用户非常不友好,直到 iOS 13 这个设计才被修改。

4da7f23dea5d1845a118890407e45cb3.gif

△ Google Earth & Spotify

色彩平铺

随着扁平化设计和 Material Design 进一步占据主流趋势,简约的界面,明亮,大胆的色彩一直都处于增长趋势。色彩平铺已经成为清新、酷炫、数字时代的代名词。

f16a28ed7bce0ea370e4a301859b5727.png

△ Snapchat & Spotify

注重内容

重内容、轻 UI,把注意力引导在重要内容和功能上。像 Facebook、Instagram 这种以图片社交为主的 App 都有一个特点,就是文字都是黑白灰,将彩色交给图片去传达,让用户关注内容即可。

df5c05359bea2cd0e85a2a7df9444a4d.gif

△ Facebook for Android

AR

增强现实的技术,已经出现在很多 Web、App 等领域中。许多平台开发者也将增强现实技术纳入其开发工具里面,可预期到这种类型的 App 将会越来越多。

1. 地图导视界面

地图+AR,让你不再盯着二维平面上那个蓝色的点,而是现实世界中的箭头告诉你在哪个路口转向。

50c3446773488554b159e6369ac04ed6.gif

△ Google Map

2. 表情贴纸

Instagram、Snapchat、Messenger 等平台可用 AR 滤镜来创作,表情贴纸可以帮助用户更直白有效地自我表达、获取注意力。

4c591afd30223178132bca6e3de17b84.gif

△ Spark AR

车载系统界面

随着 5G、车联网、人工智能、自动驾驶的发展,车载界面也越来越受重视了。

在今年的 Google I/O 开发者大会上,针对车载系统 Android Auto,推出了新的设计语言,它有着更好的可拓展性。在 UI 上,完全重新设计了导航栏,能够更轻松地访问应用、通知,和你的 Google 智能助理,最大限度的帮助驾驶者减少分心,将注意力集中在道路上。

1c6581e61cf3960558624ca51e0e6bd1.gif

△ Android Auto UI

此外,还开发了新的系统小部件,在使用地图进行导航时,仍然可以一键控制音乐应用,或者正在进行的电话,同时在屏幕上保持地图的完整视图。

总结

UI 设计的趋势除了侧重内容和情感之外,还会根据不同设备载体、新的技术(3D、AR)而变化。但归根结底还是以人为本,借用 Adobe 设计副总裁 Jamie Myrold 的一句话:如今设计师要思考的,绝不仅仅是设计一款 App、网站或设计工具。我们要思考的是人类的需求,用户的需求,打造真正人性化,多元化与包容性的设计。

好了,今天的文章就分享到这里,看完别忘记点赞哈~~~

更多设计文章首发至公众号“UI设计院”,同步至 @海蓝时见鲸 知乎专栏,感谢您的关注和分享。

如果关于UI设计还有不懂的行业问题都可以私信我,看到后我会及时回复的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
机多图,比较漂亮。800*480的。其他尺寸自己改SysInfo.ini文件 X,Y是坐标,IconPushed为图标的地址,SizePushed,SizeNormal图标的大小。 GLOBALSETTINGS ShowMessage = 0 Quitno X = 0 x方向的位置(后同) Y = 0 y方向的位置(后同) Width = 480 桌面背景图片宽度 Height = 272 桌面背景图片高度 Arrange = No 排列与否,和windows桌面排列一样 BackgroundBitmap = \SDMMC\app\PIC\background.bmp 显示桌面背景图片,可以修改成你想显示的图片名称及位置 StartUpAnimation = FlyUp Accelerated = yes TopMost = no #--------------------------------- DATE 显示日期的设置, x = 60 y = 3 Color = FFFFFF 字体颜色(后同) FrameColor = 000000 Size = 18 字体大小(后同) Weight = 700 CreateFont TIME 显示时间的设置, x = 155 y = 3 Color = FFFFFF FrameColor = 000000 Format = HH':'mm':'ss' 时间格式 Size = 18 Weight = 700 CreateFont Interval = 1000 新间隔,单位好像是毫秒 BATTERY 显示电池信息, x = 10 y = 5 Width = 38 Height = 16 ColorBattery = A0A0A0 ColorHigh = 00A000 ColorLow = A0A000 ColorCritical = A00000 Segments = 10 电池电量显示分块数 #--------------------------------- #--------------------------------- ICONXPBUTTON 自定义快捷方式,注意每节前后有#----作为分段 x = 420 程序图标的显示位置,X方向 y = 1 程序图标的显示位置,y方向 Command = \SDMMC\应用软件\Off.exe 应用程序位置名称 SizeNormal = 48 图标大小,不能小于图标文件的尺寸 SizePushed = 48 按下去后的图标大小 ScaleAlpha = 100 比例 Ic\SDMMC\图标库\off.ico 快捷方式的图标位置名称 ScaleAlpha = 100 比例 Ic\SDMMC\图标库\off.ico 按下去后的图标位置名称 Quitno 程序启动后是否自动退出,YES是的,no不关闭 TEXT 快捷方式的文字说明 x = 25 文字说明的显示位置,X方向 y = 150 文字说明的显示位置,Y方向 Text = 语音电子书 文字说明的内容 Color = FFFFFF 文字的颜色 FrameColor = 000000 背景框颜色 Size = 16 文字的大小 Weight = 700 CreateFont #--------------------------------- #--------------------------------- ICONXPBUTTON x = 5 y = -16 NewIni = ..\Navi\Navi.ini 运行下一个页面 SizeNormal = 48 SizePushed = 48 S
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值