微信二维码
微博二维码
qq号二维码

那些年,你错过的图标规范

李赫男 2019.06.24 35人浏览
线性图标,面性图标,线面结合

1.1.jpg

icon在功能上来说,分为不可点击的展示图标和可点击的按钮图标。不可点击的展示图标,是为了辅助后面的文字内容,侧重点在于文字,通常尺寸为24x24、28x28、32x32,在小尺寸内为了便于辨认图像,也不要在界面中太抢眼,建议可以使用简单的线性或者面性图标;可点击的按钮图标,常用于导航栏、操作栏、标签栏,通常尺寸为44x44、48x48、56x56、64x64,这类图标可以结合产品调性进行富有趣味性的设计。

如下图


1.2.jpg


外框为44*44px.内框为42*42px,即安全边界。

如下图


1.3.jpg

圆形内框边长与直径一样,42px,长方形为42px

如下图

1.4.jpg

正方形为两个长方形补缺部分组合而成

如下图

1.4.jpg

1.6.jpg

口诀:长物体上下超左右不超、扁物体左右超上下不超、方物体要比圆物体小

如下图

1.7.jpg

1.同色调线面结合风格:

如下图

1.1.jpg

2.多彩底色线性图标风格:

如下图

1.9.jpg

如何 让各种形状的图标如何在参考线中统一?

如下图

2.1.jpg

1.在不影响辨识度的前提下,可以适当改变图形的形状。

2.倾斜增加体积感。

嘿嘿嘿~今天的分享你都记住了吗~

2.0.jpg

       

分享到:
工作后你需要的网站,我给你整理好了
  • 2018.11.27
  • IDEA搭建JavaWeb工程
  • 2019.07.22
  •