零基础 UI 入门指南(四):移动端相关规范认识(附素材打包)

释放双眼,带上耳机,听听看~!
新手不要只把软件的学习放在第一位,要同等重视 UI 根底标准的学习。这一章,首要分享和移动端 UI 有关的基本标准性常识。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

学会软件,并不代表就能合理输出界面了。就像写作一样,会用笔写字和把握写作技巧、行文思路、语法措辞是两码事。

学习规划,就必定要掌相关范畴的标准,而这部分标准和软件技巧无关,不要只把软件的学习放在第一位,要同等注重 UI 根底标准的学习。

这一章,首要共享和移动端 UI 有关的基本标准性知识,让新手不会成为光会着手没有知识的 “职业巨婴”。

往期回顾:

UI 标准是什么标准

1. 标准类型梳理

很多人都知道学 UI 有标准,苹果的标准,安卓的标准。可是,大都人并不清楚这些标准到底是什么,有哪些,以及它们的作用、意义、内容。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

标准一词,能够解释为 —— 某一职业或许行为进行定性的信息规定。它不是数学定理,而是人为拟定的条件、规矩、束缚、约束。

在从事 UI 规划师这个职业,把握标准,便是把握界面规划的必备条件、规矩、束缚、约束有哪些,确保自己做出来的东西具有可用性的,而不是毫无完成价值的飞机稿。

而职业相关的标准,并不是只有苹果、安卓标准叫标准,而是包括好几种类型的标准需求咱们去了解。

我把它们分为下面这些类型:

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

核算机标准,指的便是核算机范畴的部分根底知识。有一部分知识是规划师也有必要把握的,例如图形成像、图形文件格局、字体显现原理等。

硬件标准,首要指的是硬件上的特性对规划发生的影响。例如电容屏和电阻屏的操作差异,视网膜屏和低分屏的显现逻辑,折叠屏的操作和适配办法。

体系标准,则是不同软件体系开发者拟定出来的标准准则。体系级标准大到硬件底层体系,比方 Windows、Mac OS、Android,小到一些开源框架或软件体系,如 AntDesign、Element 等。

视觉和交互标准,则是在视觉和交互范畴中的一些必要规矩和约束。比方视觉一致性的要求,最小可点击区域等。

这两类标准咱们会在后续的共享中一点点加入,本篇内容将环绕前三者打开。

2. 学习标准的办法

学习标准的重要性咱们应该心里都有数,或许你们现已跃跃欲试想要大学一番了。但我要先泼盆冷水,那便是标准学起来不像软件那么 “舒畅”。

不论是什么方向的标准,都能够分红两个大类,那便是规矩和主张。

规矩是指硬性规定,即这个标准说什么便是什么,不以产品、规划、开发个人意志为搬运。比方非视网膜屏幕,你不或许要求文字的显现没有笔画虚化,你也不能在 iOS 体系下随便拟定安卓体系字体。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

这类标准是最容易把握的,由于标准是被定死的,只需按照这个标准做就能够了。就算有再多标准,你整个笔记全记载下来按需查看也就完事了。

而主张,则是职业或官方主张你这么干,但假如你头铁,比较有自己的小情绪不想这么干的时分怎样办……我能怎样办?当然是你想做就做啊!

例如无论 iOS 仍是 Material 都主张运用 8 的倍数设置元素尺寸(实践上官方自己的规划也没有彻底遵守),实践上关于规划师来说,你爱用不必……关于实践规划进程和落地的项目不会发生什么决议性的影响。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

坏就坏在主张这个当地,主张类标准才是标准中的大部分,咱们翻译的的 iOS 中文版别在后面能够获取,只需你们看了,就能够发现这洋洋洒洒几百页里,大大都都是主张,它们底子无法直接辅导你要怎样做。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

新手天真的认为,只需学会 iOS 标准或许安卓标准之类的体系标准,就知道界面怎样规划了,实践上底子不存在那回事。标准中很多的主张,微观的、玄学的、不置可否的,便是怕过渡干涉规划师创作发挥,要预留充分的弹性空间。

而这些主张的内容,你想怎样解读,怎样实施,就看你自己的经验和对当前项目的了解,没有绝对正确的定论。

所以,标准学习首要要学会的,便是分辨哪些是规矩,哪些是主张。把规矩牢牢背下来记住,把主张作为一个疑问去考虑背面的理由……

趁便输出下观点,假如所有规划细节全能够经过标准定死,完成标准化,那还要 UI 规划师做什么,直接写成程序和初级 AI 生成就行了。

根底标准的扫盲

1. 屏幕和分辨率

首要,UI 规划师产出的内容,都是在电子屏幕中显现的,是数字化的图形,而不是要打印喷绘出来的三维国际实物。所以,屏幕显现规矩决议了图形的显现办法。

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

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

像素点是图画显现的最小单位(通道不算),每个像素点能够显现一个颜色,咱们看见的电子图画,便是由这一个个颜色的 “小点” 组装而成。

跟着技能的进步,屏幕分辨率越来越高,以及增加了子像素烘托技能,让咱们看到的图形越来越细腻、清晰。

而 iPhone 4 面世后更是带来了 “视网膜屏” 技能,3GS 运用 320*480,而 4 运用 640*960,像素密度提高了一倍,总量提高 4 (2*2) 倍。再到后来的 iPhoneX,屏幕密度再次提高一倍,总量是本来的 9 (3*3) 倍。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

那么这时分问题就来了,这些数值距离那么大,咱们创立画布要以哪个参数为标准?实在项目里,咱们是不是得每个尺寸做一套?

在这儿,咱们不做过于专业的技能科普,咱们只需紧记一点,在 iOS 和 Android 开发中,是没有 “像素” 这个单位的。

苹果用的长度单位叫 PT,安卓的是 DP 和 SP,这些单位详细内涵咱们不必去纠结,实质上它们仅仅一个符号、矢量单位,没有任何差异。

这种单位的价值,便是能够一致一套数值体系,并运用在任何不同密度的屏幕中去,体系会主动完成对屏幕实践显现像素的换算和显现。

例如,咱们在 iOS 中拟定了一个长宽 44pt 的图标,那么它在 3GS 中便是 1:1 的显现状况,即 44px。假如在 iPhone 4 中,便是 1:2 的状况,即 88px,在 iPhone X 中,则是 1:3 的 132px。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

换算成几倍,以及换算依据是什么,前期能够不必深究。只需知道用 PT 给出的数值是万能的,程序员写代码用这个单位,体系也依据这个单位核算像素值。

咱们在 Figma / Sketch / XD 创立的画布,实践上便是以 PT 为根底(矢量)。假如咱们要输出不同屏幕密度的图画,就能够在导出面板选择导出 1x、2x、3x 的倍率即可。

2. 矢量和位图

上面咱们说了 PT、DP、SP,实质上都是一样的东西,单位可有可无。首要的原因,就在于矢量和位图之间的原理差异上,它们是核算机范畴最重要的两种图画类型,

简单点说,矢量图是经过代码绘制出来的图形。比方代码指定了一个圆,那么体系就就会按圆的显现规矩去解析它。而位图,则是去记载必定像素区域内,每个像素显现颜色的格局。

所以,假如用矢量和位图格局分别画个圆,那么继续放大,就会发现矢量边际仍旧滑润,而位图的圆则边际呈现了深浅不一的 “锯齿”。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

之所以有这种差异,便是由于关于体系来说,它解析矢量文件是接受了我要 “画个圆” 的指令,不论放大仍是缩小,它都按圆的办法显现。而解析位图,则仅仅是把位图中的像素颜色信息展示出来,它本身包括的了多少像素颜色信息,就显现多少。

所以,矢量图形能够随意进行缩放,不会有显现上的问题。而位图由于包括的颜色信息是固定的,就没办法支撑无损的放大。

在矢量的国际里,也没有详细的衡量单位,图形和图形之间的大小联系是比例联系而不是尺寸,仅仅依据咱们显现的需求,它再被转换成像素呈现。所以不论是 PT、DP、SP,都没有实质差异。

已然矢量能够随意缩放,位图还有什么存在必要?

矢量并不是万能的,它记载图形的信息是十分有限的,适用于有明确几何联系和颜色简单的图形,比方图标、文字、扁平插画。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

而复杂的不规矩图画,或许包括渐变、投影元素,都没法用矢量来完成,如相片、仍是有必要运用位图来记载才干正常显现。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

矢量和位图的知道触及到项目方方面面,需求渐渐了解它们的差异和运用场景,包括切图导出格局,Lottie 动画逻辑,字体图标运用约束等。

3. 图画文件格局

图画文件格局,即在核算机中记载单个图画的文件格局类型、文件后缀。依据矢量和位图的差异也能够分红两个大类。

首要说矢量格局,UI 中会触及的首要便是 SVG 和 PDF 了。在 iOS 标准中,矢量格局图形要导出 PDF,而安卓中则运用 SVG。至于它们详细有什么差异,感兴趣的同学能够自己查找。

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

  • PNG:无损的位图格局,能够显现通明背景,是 UI 位图元素切图的最佳选择。
  • JPG:有损的位图格局,体积更小,但不能显现通明背景,适用于运营图片资料。
  • GIF:可支撑动画帧的位图格局,首要用来作为动效暗示,或一些运营动画元素的资料。
  • WEBP:近年新兴的格局,压缩效率较高,常用来作为逐帧动画的帧图形。

4. 颜色形式知道

颜色是一门很复杂的学识,在详细学习配色前,更应该先知道颜色的底层标准 —— 颜色形式。

颜色形式是一种用来描绘、记载颜色的办法,而不同场景,办法就不一样。为什么解释颜色还要用不同的办法?

首要,最早体系研究颜色必定从自然界开端,咱们总结了颜色的基本规律,由色相、饱和度、明度构成了颜色的三个基本要素,即 HSB 颜色形式。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

HSB 是描绘自然界所有颜色的办法。可是,跟着人类的工业、化学技能提高,以及彩色屏幕的发明,对颜色的需求和运用就越来越广泛。

在专业的染印范畴,形成了由 青(Cyan)、红(Magenta)、黄(Yellow)、黑(Black) 四种颜料作为根底调和其它颜色的体系,也便是咱们常说的 CMYK 形式。

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

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

在规划软件中,通常会主动协助咱们在不同的颜色形式中进行换算,每个颜色会由对应的其它形式色值,比方 PS 的识色器面板。

依据显现的原理,不论你创立一个什么颜色形式的文件,在屏幕上你看到的颜色必定是被换算成 RGB 显现的。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

光知道这几个形式是不够的,它们仅仅最根底的概念。在实践的设备中,即便都是运用 RGB 的电子屏幕,显现同一个数值的颜色,颜色也或许天差地别。

这种差别对 UI 的规划进程会形成十分重大的搅扰和影响,比方你公司电脑上做完的颜色放手机、客户、PPT、乃至家里电脑上,就或许彻底不一样。

形成 UI 规划师规划内容颜色差异的原因首要有两个:

  • 硬件标准
  • 配置文件

硬件标准是显现器本身电路板、显现面板、晶体管、工艺水平的总和。技能方案、本钱不一样,就必定导致 Gamma、色域、亮度的差异,终究显现效果的差异,这问题网上屡见不鲜。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

更蛋疼的是,在一个屏幕的不同软件里,一样的颜色设置都能显现出不同的颜色……这便是颜色配置文件引起的差异。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

颜色配置文件(ICC,也叫颜色描绘文件)是一个用来告知体系应该怎样显现颜色的标准。任何体系、显现器,都会加载这个标准来呈现颜色,相当于叠加一层 “滤镜”。它的实质作用是确保不同设备(包括印刷设备)、环境对相同颜色信息的呈现保持一致。

可是,颜色配置文件并不只有一个,不同厂商、标准会依据相关需求拟定出不同配置文件,在电脑相关设置中就能够找到。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

一般软件显现内容跟随体系的颜色配置,可是关于咱们用的专业软件,是能够独立拟定的。无论是 PS 仍是 Figma、Sketch。假如要将不同规划软件和体系颜色保持一致,就必定要记住将它们的颜色配置文件设置成同一个。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

3. 核算机字体

这部分咱们要讲的是文字怎样被显现出来的标准,但不是字体参数应该怎样设置的标准。

文字关于咱们人来说是有价值有信息的,但关于核算机来说,任何文字关于核算机都仅仅一串固定的编码。核算机经过读取文字编码,来呈现对应的文字信息。

国际语言文字多种多言,而每个文化的文字都需求拟定相关的编码,所以文字编码也不是只有一种。比方核算机最早的 ASCII 编码,只记载了大小写、数字少量符号。这明显满足不了几万个中文字体。

所以,后面就有了 GBK、Unicode、UTF-8 等不同文字编码规矩,为文字的显现供给辨认根底。除了体系外,任何软件、APP、网页,都能够指定编码类型,比方 HTML 代码中头部的编码指定。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

有了文字的编码,核算机能辨认要输出哪个文字。可是,这个文字长啥样怎样决议呢?

这时分就要评论字体文件了,常见的字体文件包括 TTF、OTF、TTC 等。这儿咱们不必特意重视不同字体文件格局的差异,只需知道一件事,字体的图形款式被记载在这些文件中。

咱们能够用一些字体东西来打开或创立字体文件(下图是 Fontcreator),你就能够看到每个字体,其实便是一个独立的矢量图形,一起包括一段对应的编码。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

所以,核算机显现字体的逻辑,实践上便是读取了数据中文字的编码,然后用这个编码去指定的字体文件中检索对应的图形,再将这个图形显现出来的进程。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

这个进程中假如有前后不匹配的状况,就会呈现问题。首要便是编码,假如软件运用编码和体系不一致,匹配不到对应文字信息,就会变成乱码,相信网上下国外单机游戏的同学都有阅历过。

假如想要显现对应的字体款式,通常就要读取本地的字库文件,你要是没安装就显现不了。苹果、安卓等设备之所以不能乱指定其它字体,便是由于设备里没带那些字体文件显现不了。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

再者,便是中文环境下十分容易呈现的问题,中文这么多,大都中文字体文件只覆盖了一小部分,缺失其它字体,导致同一段文本中呈现了指定外的默认字体或许干脆变成空白。

Figma 在网页版别中运用的字体插件,便是为了确保浏览器能够顺利处理文字编码、调用本地字库,不然中文就不能正常运用和显现。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

最终,字体文件仅仅一个包括若干对应编码的矢量图形,所以你想添加什么矢量图形都能够,即便不是实在的文字也没联系。

在 UI 的运用场景里,还有个十分遍及的做法便是,将项目运用的矢量图标资料,兼并成单个字体文件,让前端经过设置对应的字体来运用这些图标。而相似咱们常见的 Emoji 表情,苹果官方的 SF Symbol 也都是字体文件,仅仅置入了不同的图形罢了。

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

结语

以上,便是关于 UI 有必要了解的标准上半部分内容。根据篇幅的约束,也由于是初期全体扫盲阶段,部分知识点不会全部打开,后续会以独立的共享供给出来。

下一篇,才会开端解说有关苹果和安卓体系标准,以及对应的适配准则。

这个系列写起来很心累,咱们记住点赞、在看、转发!活跃度越高,我更新频率才干越快~

咱们下篇再贱……

欢迎重视作者的微信大众号:「超人的电话亭」

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

零根底 UI 入门攻略(四):移动端相关标准知道(附资料打包)

给TA打赏
共{{data.count}}人
人已打赏
教程分享

iPhone 13 即将发布,设计师最值得期待的是AR!

2021-9-13 17:29:35

教程分享

分享一款免费好用的跨平台SSH客户端WindTerm

2021-9-23 18:59:43

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索