威龙发艺发型设计价格联盟

UI设计中关于设计规范、切图和尺寸

UI设计栈2020-06-30 16:05:53

切图是什么


简单说来,切图就是图片。你把这些图片给工程师,工程师再把图片放到程序里,程序把图片显示出来。


为什么需要切图


因为图片里的东西,开发没办法用代码实现,所以需要切图。

想象你要建一栋房子,请了一些建筑师傅。你给了他两样东西。

图纸:关于尺寸比例的。比如墙有多高,多厚,每个房间长宽是多少。

效果图:用来告诉师傅你要的是什么样的,理想效果和建出来有什么差别。

这些东西,也就是UI设计里的标注和视觉稿。

等师傅开工后,他告诉你,你需要买以下东西给他。

家用电器:电视、洗衣机、吊灯等。

基本建材:瓷砖,木地板、防盗门等。还要附带它们的尺寸。

因为这些东西他们没办法徒手加锤子、刷子和电钻等做出来。

这些东西,也就是UI设计里的切图。


怎么做切图


切图的步骤就好像师傅问你,「你这地板打算怎么铺?」

这时,你就会给他一个图案。「师傅,铺成这样样子就行。」

「那你要告诉我这地板的尺寸长宽,跟每块砖的尺寸。」他边说,边表示会拼出这样的形状出来给你。

图案=视觉图,地板=切图,砖=像素

在早年,因为小的砖很难做出来,一做小,尺寸就有误差,所以只有一种砖的尺寸。所以一般你只要告诉这地板长宽有多少块砖就行了。就相当于PC时代,工程师只要知道图片多少像素就行。

后来,工艺提升了,砖可以越做越小。甚至可以做到你远远看地板,根本分不清砖的边界。这就是,像素越来越小,屏幕(地板)变成了Retina屏。

但尺寸都不是整数,交代起来特别难受。比如什么3.1418614这种无循环小数。折让大家很烦恼。

后来,大家发现有一个规律,一平方米中,砖的个数总是整数。所以把每平方砖的个数叫做单位密度。以后你跟师傅,就只要报密度和地板尺寸就行了。比如10平方,100密度之类的。师傅就会算出来,需要1000块砖。


单位密度=PPI

但师傅慢慢发现,大家经常住三房,而且很喜欢地板都保持同一大小,只是砖不同。所以每次报密度还是太麻烦。

因此市面上就干脆定了一个主流密度,叫做1x。其他的密度,都是它的整数倍,2x,3x等。

这样你回到和以前一样,报1x砖的长宽个数就行了。要是想多铺 ,就喊一声,顺便多铺个2x或者3x,师傅就会懂。

请猛戳右边二维码





公众号

UI设计栈

友情链接