UI设计基础规范有哪些?

时间:2022-02-14     来源:易思训教育 作者:易思训
分享: 更多

今天易思训(www.yisixun.com)小编要跟大家分享的文章是UI设计基础规范有哪些

 

1. 屏幕和分辨率

首先,UI 设计师产出的内容,都是在电子屏幕中显示的,是数字化的图形,而不是要打印喷绘出来的三维世界实物。所以,屏幕显示规则决定了图形的显示方式。

电子屏幕成像的基本原理,即一块完整的屏幕由若干像素点组成。屏幕分辨率的参数,如 1920*1080,指的就是这块屏幕 XY 轴包含的像素点数量。

iOS Android 开发中,是没有 “像素” 这个单位的。

苹果用的长度单位叫 PT,安卓的是 DP SP,这些单位具体内涵大家不用去纠结,本质上它们只是一个符号、矢量单位,没有任何区别。

这种单位的价值,就是可以统一一套数值体系,并运用在任何不同密度的屏幕中去,系统会自动完成对屏幕实际显示像素的换算和显示。

例如,我们在 iOS 中制定了一个长宽 44pt 的图标,那么它在 3GS 中就是 1:1 的显示状态,即 44px。如果在 iPhone 4 中,就是 1:2 的状态,即 88px,在 iPhone X 中,则是 1:3 132px

我们在 Figma / Sketch / XD 创建的画布,实际上就是以 PT 为基础(矢量)。如果我们要输出不同屏幕密度的图像,就可以在导出面板选择导出 1x2x3x 的倍率即可。

 

2. 矢量和位图

矢量图是通过代码绘制出来的图形。矢量图形可以随意进行缩放,不会有显示上的问题。而位图因为包含的色彩信息是固定的,就没办法支持无损的放大。

矢量和位图的认识涉及到项目方方面面,需要慢慢理解它们的差异和使用场景,包含切图导出格式,Lottie 动画逻辑,字体图标应用限制等。

 

3. 图像文件格式

图像文件格式,即在计算机中记录单个图像的文件格式类型、文件后缀。根据矢量和位图的区别也可以分成两个大类。

首先说矢量格式,UI 中会涉及的主要就是 SVG PDF 了。在 iOS 规范中,矢量格式图形要导出 PDF,而安卓中则使用 SVG

除了矢量格式外,还有若干的位图,它们有各自适用的场景,我们分别介绍。

PNG:无损的位图格式,可以显示透明背景,是 UI 位图元素切图的最佳选择。

JPG:有损的位图格式,体积更小,但不能显示透明背景,适用于运营图片素材。

GIF:可支持动画帧的位图格式,主要用来作为动效示意,或一些运营动画元素的素材。

WEBP:近年新兴的格式,压缩效率较高,常用来作为逐帧动画的帧图形。

 

4. 色彩模式认识

最早系统研究色彩必然从自然界开始,我们总结了色彩的基本规律,由色相、饱和度、明度构成了色彩的三个基本要素,即 HSB 色彩模式。

在专业的染印领域,形成了由(Cyan)、红(Magenta)、黄(Yellow)、黑(Black) 四种颜料作为基础调和其它色彩的体系,也就是我们常说的 CMYK 模式。

而在电子屏幕中,每个像素,由红(Red)、绿(Green)、蓝(Blue) 三个不同发光二极管的发光强弱来组合成一个颜色的,就叫 RGB 模式。

根据显示的原理,不管你创建一个什么色彩模式的文件,在屏幕上你看到的颜色必然是被换算成 RGB 显示的。

光知道这几个模式是不够的,它们只是最基础的概念。在实际的设备中,即使都是使用 RGB 的电子屏幕,显示同一个数值的颜色,色彩也可能天差地别。

这种差别对 UI 的设计过程会造成非常重大的干扰和影响,比如你公司电脑上做完的颜色放手机、客户、PPT、甚至家里电脑上,就可能完全不一样。

 

以上就是小编今天为大家分享的UI设计基础规范有哪些的文章,希望本篇文章能够对正在或想要学习UI设计的小伙伴们有所帮助,想要了解更多关于UI设计的教程,记得关注易思训教育IT培训官网(www.yisixun.com),希望同学们学习顺利。

 

IT培训选易思训教育培训机构,易思训IT培训课程是易思训品牌课程,易思训培训汇集IT培训讲师,IT就到易思训教育!了解详情请登陆易思训教育培训官网(www.yisixun.com)!


相关文章

今日优惠
免费试听教程