返回

从零开始学图标

#设计知识
#知识库
54%
进度
0/8
知识点
0
笔记
概述
图标是什么
图标的基本介绍
图标的使用场景
图标的基本分类
图标设计的基础知识
矢量图和位图
布尔运算和钢笔
图标的设计工具
图标的设计规范
表意的准确
图标的一致性
图形的视觉差
图标的栅格
像素对齐
图标设计实例
工具图标的设计实例
操作总结和线面转换
装饰图标的设计实例
启动图标的设计实例
工具图标的进阶
进阶线性图标
多种粗细风格
多色描边风格
描边缺口风格
装饰图标的进阶
轻拟物风格
玻璃拟态风格
实物贴图风格
首页知识库设计知识从零开始学图标

像素对齐

UX百科编辑部 编辑于 2024-01-1222人正在学
10

在栅格的绘制中,细心的读者肯定发现了几个关键字,“对齐”、“偶数”,这就是在这一部分要提及的内容。关于显示器的倍率问题是 UI 基础知识点之一,可能有的同学不太了解,不过没关系,直接看下面的内容即可。

我们都知道像素是屏幕显示中的最小单位,一个像素只能显示一种颜色。小时候玩过的 GBA、FC 游戏机,都是通过像素画的形式呈现,人物锯齿是无法避免的。

想起来像素画是什么样的了吗?

而随着技术发展,像素密度是降低了,但如果依旧是按过去这种一个萝卜一个坑的方式显示内容,那锯齿感无论如何是无法消除的。于是,开发了次像素渲染(Subpixel Rendering)的技术。一个在显示器中让我们觉得平滑的圆,一直放大,就可以发现它的周边充满了饱和度较低的其它方块色彩

子像素渲染

这项技术,让像素可以用特有的方式来显示非完整的色块,即:尽可能还原我们对元素尺寸定义的小数点。但为什么我们还要提这个概念呢?

因为工具的图标太小了,而且 UI 的元素对精细和准确度的要求都不低,如果我们没有尽可能满足像素对齐的要求,那么就可能导致元素边缘的模糊。

所以要满足像素对齐的要求,就要符合元素本身的尺寸为整数、描边为整数、XY 轴坐标为整数的特性。

AI 中的像素对齐设置

在 AI 中,我们可以通过两个设定来查看和保证像素对齐,即网格的设置显示,以及对齐到点的设置。

像素的对齐主要表现在横线和竖线上,虽然现在手机显示精度越来越高,但并不意味着我们可以无视像素对齐的规律!在线性图标中,类似对于 1pt 或者 2pt 描边的应用,觉得不是太细就是太粗,可以用 1.5pt 的数值(1.5 pt 在 2x 中就是 3px),但切记不要出现类似 1.23、2.16、3.46 这种小数。

像素对齐是一个专业 UI 设计师对于极致追求的表现之一,是每一个一线大厂 UI 设计师的基本职能,所以,想要冲刺更高的段位,就不要忽视这个规范的使用。

点赞
收藏
学会
9981022
下一篇: 工具图标的设计实例
线性图标设计演示 前面啰嗦了那么多,到这篇开始就要进入到大家最喜欢的操作演示环节了!主要演示的是线性风格的设计,包含 8 个图标的绘制,如下图所示。 线性图标是所有图标中最基础的设计形式,也是最入门和最简单的。在我们设计后续的其它风格图标前,首先要通过线性图标的练习来打下坚实的基础! 什么是图标的基...
笔记 (1)
只看自己
logo
王桐学 记录于 2024-01-19
0
关于像素对齐这个说法,研究了一下阿里的图标系统,他们1024的尺寸换算为16pt图标,是会出现如0.875pt、1.125pt此类数值,感觉上也并不绝对
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞