图标
2022-04-18 10:55:04

V20 里的图标设计已经较上个版本变化了很多,有些是在上一个版本上进行了改进,有些则完全是重新设计。新的图标设计按照新的设计语言已经变的更加圆润,层次也更加丰富。

保持微弱的质感

现在手机上流行扁平化设计,但是在 PC 上扁平化的图标则还不太受待见,不受待见并非意味着还在流行拟物化。PC 上用户还没有普遍接受扁平化的原因在于 PC 的屏幕清晰度参差不齐,在一块非常清晰地屏幕上,扁平化看起来效果不错,但是同样的内容在一块普通屏幕或者更差的屏幕上效果看起来非常粗陋,用户看起来觉得像是没有设计,非常丑陋。PC 上现在既不流行拟物化也不流行扁平化,而是在这两者中间平衡。为了让所有这些参差不齐的屏幕看起来都有一个不错的效果,不让图标看起来缺乏设计缺乏细节,可以适当用些渐变来保持微弱的质感,但是渐变对比不适合太大,否则又会回到拟物化时那种强烈的质感之中,用户会忽略图标本身的意义而将注意力注意到了图标细节。

使用响应式图标设计

一个应用的应用图标的尺寸不应该只有一个,比如在文件管理器里选择一个文件,然后右键打开方式里看到的图标是 16, 在应用程序主窗口的左上角的 logo 是 32, 在启动器里还有 48,64,128 等之类的,一个图标无法完成所有使用场景,即使格式是 SVG, 可以进行缩放但始终都是不够完美的,简单的等比缩放会产生锯齿,发虚等现象。 为了能让图标在所有高分屏或者普通屏幕上,以及不同尺寸的显示场景上都能清楚的显示并且保留应有的图标细节,请认真设计您的每一款应用图标。

全部尺寸包含:16px,24px,32px,48px,64px,96px,128px,256px;图标越大,包含的细节应该越多,但无论是 16 的还是 256,它们看起来都应该是同一个应用图标。

注意色彩饱和度

统信UOS V20 的设计相较以前来说显得更加朝气和有活力,在图标上使用的饱和度大多数都比较高,关于色彩情感的部分我这里就不再阐述,大家有兴趣可以看看关于色彩情感类的书。较高的饱和度更能刺激用户的视觉神经,让用户的思维也更敏锐。 在设计图标时请注意每一个应用所产生的心里情感, 在这种情感下选择一个合适的色调进行图标设计,不要将错误的色彩倾向性和饱和度放进图标。

图标投影

不要小看投影的做用,每一个应用图标外面一圈都应该带一点淡淡的投影,投影不宜太深。投影的垂直偏移范围和模糊度数在不同的图标尺寸上有区别,图标越大,投影范围也就越大。除了应用图标外,V20 里的部分图标也是带了彩色投影的, 这让底下的层次关系交代的很清楚,同时也能增强产品的质感和细节。

图标圆角

无论是应用图标还是功能图标,都需要根据需要来增加平滑的圆角转折,以确保整个图标看起来是非常有好的,前提是不破坏基本的图形认知。