px怎么换算成mm px是什么尺寸( 三 )


最后,如果有类似的操作或短期活动需要吸引用户的注意力,但不适合固定在界面的某个位置,那么可以设计一个动态图标浮动在设备的某个位置(注意用户体验和交互原理),这样既不占用太多页面资源,也可以同时在多个界面显示,一举多得 。
(动效图标:@墨染ART 授权)(动态效果图标:@墨染艺术授权)
四、设计规范与流程
遵循图标设计规范有利于设计师与后续设计的配合,以及产品整体图标风格的统一,起到约束作用 。即使在更换设计师的情况下,也不会有大的问题 。在制定合理的设计规范之前,你需要了解图标有哪些规范,从哪些方面入手,这样接下来的图标设计才能顺利进行 。
1. 网格尺寸比例
为了保持图标元素的平衡,大小需要一致 。通常,我们会为图标绘制建立基本的网格尺寸 。常见的网格尺寸有16、24、36、48、64、128、512和1024 。这些网格尺寸不是固定的,还会根据设计中的特殊尺寸而变化 。
【px怎么换算成mm px是什么尺寸】图标系统由两部分组成:网格大小和图标元素 。设置好网格大小后,需要使用keyline来约束图标形状的长宽比 。设计最终的图标尺寸并不遵循网格尺寸,而是根据不同的形状受制于图标keyline,最终形成统一的视觉尺寸 。
从上图可以看出,同样大小的图标在真实视觉中差别很大,就像一个100像素的圆 。与一个100像素的正方形相比,从逻辑上看,大小是一样的,但从视觉上看,正方形肯定更大 。所以我们常说的图标大小一致,并不是真实大小,而是视觉感受 。
2. 图标keyline
为了保持图标的视觉一致性和平衡性,需要绘制keyline来指导和规范图标设计 。关键线由圆形、方形、水平矩形、垂直矩形、三角形和对角线组成 。网格大小要保持在4的倍数,这样才能适应不同大小的图标 。24*24px的网格尺寸可以作为基准,其他尺寸的图标可以通过增加倍数来类比,比如48*48px,72*72px………
下图是尺寸为24px(出血为2px)的网格参考基准的示例:
3.确定图标样式 。根据产品属性、目标用户和应用场景,找到最符合自己产品性格和气质的图标设计风格 。比如健身应用属于力量型,粗采型,圆角和曲线适合女性用品等 。前面的《性格与气质》里有例子 。
4. 图标绘制
图标风格确定后,图标细节是接下来绘制过程的核心部分 。对于线状图标,注意的是线条的粗枝大叶,而面状图标注意的是小图形之间的距离 。所以在绘制的时候,一定要保持线条和间距的统一,以便于图标更新的后期迭代 。
1)线性笔画粗细
我们以iOS@2x为基准(避免@1x的3px笔画变成1.5px,小数点),可以适应最常用的2px、3px、4px的笔画粗细 。4px视觉上更重,用于优先级更高的区域的功能图标,所以2px看起来会更精致 。在设计中,笔画粗细要根据产品的行业属性和调性来确定,统一 。
2)正负表面之间的间距
脸图标需要确保每个单独的形状之间有足够的间距 。以一个大小为24px的图形为例,其间距不能小于1px,以此类推 。虽然没有上限,但是间距也不能太大,否则无法组合和相互关联 。以实际视觉舒适度为准 。
5.创意提炼:根据行业类型和风格进行创意设计,如线性统一断点、品牌基因融合、个性元素倾斜、节日气氛对比、元素装饰等 。,并对图标进行二次创作,以塑造灵魂或传达更多信息 。
动词 (verb的缩写)常见问题及注意事项1 。识别图标的意义主要是快速传达信息,不能让它成为无用的装饰品 。
随着互联网的普及和时间的积累,人们对一些网络图标信息的隐喻已经根深蒂固,早已形成惯性思维 。所以我们设计的图标一定要符合用户的认知,让用户快速理解 。即使有一些特殊情况,也要用文字明确标注,否则一旦用户混淆,图标就会起到负面作用,极大影响体验 。