ui设计初学者怎样入门（带你轻松入门UI设计）

ui设计初学者怎样入门（带你轻松入门UI设计）说到一稿适配 首先要了解iOS屏的几个知识点。这些知识我们理解设计稿为什么要分、三倍图。如果感觉理解起 那么直接记住二倍图和三的尺寸就好。做熟了再回头看。二、iOS的屏幕分辨率

关于iOS的发展史，网络上有非常多的文章，想详细了解一下的朋友可以去找资料看一下。在这里我们来想一个问题：UI设计师为什么要了解这个系统的历史？总结归纳后，无非三点：iOS的尺寸变化、系统变化、风格变化，都会影响UI设计师做设计稿。下图为针对以上三点所做的总结。

二、iOS的屏幕分辨率

说到一稿适配 首先要了解iOS屏的几个知识点。这些知识我们理解设计稿为什么要分、三倍图。如果感觉理解起 那么直接记住二倍图和三的尺寸就好。做熟了再回头看。

1、像素

像素是一个单位 是一个小方格。没有固定的物理大小 它的物理大小是由载体的物理大小决定的。像素小方格里面包含了颜色 个小方格按照位置显示颜色 就组成了画面。(嗯是的 你可以解为跟十字绣差不多)在同样大屏幕上 像素格越多 显像就晰。

2、PPl与DPI

PPI与DPI是一对经常被人谈论的兄弟。它们都跟密度有关 都影响输出质量 但是PP是像素密度 是每英寸包含多少像素点。DPI是印精度 是每英寸所能打印的点数。PP影响的是屏幕上显示的精度 DP影响的是打印出来的精度。在UI设计里面理解PPI的原理以在界面中的应用就好。

3、逻辑点

在上面所列举的历代机型里面 我们可以知道 屏幕的尺寸非常多。iOS系统的手机只有苹果公司生产 但安卓的手机却有非常多的公司生产 因此尺寸也很多。

为此 定下了一个规则 以其中一个尺寸大小作为基准 其它尺寸按照这个基准尺寸比例来适配。iOS系统的基准设计尺寸是375*667(也就是俗称的一倍图) 逻辑点单位叫做pt一倍图里的1pt是1px 放到二倍图就是2px 在三倍图里是3px所以我们提供给开发的一倍图 他们能够根据pt这个单位 知道其余倍数的图里面元素和组件的大小。

下图 同样是44pt大小的圆形 在不一样倍数的屏幕中的尺寸不一样：

4、一倍图、二倍图、三倍图

a、ioS的一倍、二倍、三倍图定义

375*667 二倍图的设计尺寸是750*1334( phone6、7、8的尺寸) 三倍图的设计尺寸是1242*2208。

如果按照二倍图的1.5倍得出三倍图的话 应该是1125*2001 为什么三倍图是1242*2208呢?这跟屏幕的PP有关。 iPhone6、7、8p|us的PP|是401 而 iPhone6、7、8的PP是326。理论上 苹果应该用401/326*@2×=@246×的素材。但是这个数值有小数 也很难切图 所以苹果为了方便开发者 用的是3x的素材 然后再缩放到@246上 缩放的比例是83% 苹果选取了一个大概的比例87%来作为最终的比例。这样算的话 也就是苹果pus机型的物理分辨率尺寸占虚拟分辨率尺寸的87%。plus机型的物理大小是1080*1920 两者分别除以87% 就得出这个虚拟的设计尺寸1242*2208。

以上是虚拟三倍图 而 iPhone X是真三倍 它的尺寸是1125*2436。所以在 iPhone X上用的是三倍的切图。

b、一倍、二倍、三倍图的应用

既然一稿可以适配 开发根据一倍图的尺寸 来按比例做两倍图、倍图就可以了 那为什么还要分一倍图、两倍图、三倍图呢?其实这里的倍图 主要是针对于切图而言的(切图就是界面中你画的某些元素 比如图标、插画类等等 它们要放在不同大小的屏幕上 就要配合适当增大倍数 也就是@2X、@3X)。虽然设计稿只需要给一套样式给开发照着写代码 但切图是需要给几套的 不然在两倍的界面上只用一倍的切图去拉伸 就会很模糊(理论上来说 1个位图像素对应一个物理像素 图片才能得到完美的显示。这个理论在普通屏幕下是没问题的 但是现在有高清的etna屏幕 如果还是用回原本像素的图片 就会造成像素点不够而导致模糊的情况)。所以 一倍的界面用一倍切图、两倍的界面用两倍的切图、三倍的界面用三倍界面的切图 以此类推。

5、一稿适配

现在的开发团队一般都是根据一套设计稿，按照比例来做其他尺寸的适配。因此我们只需要提供一套设计稿就行，大大节省了我们设计时间。

至于要用一倍图还是二倍图 看个人习惯 两者各有利弊。我个人习惯用二倍图 也就是750*1334的尺寸 因为除了二倍图自身的优点外 还能够方便开发使用。

开发的适配方法也是根据个人习惯的 有的开发小伙伴用js来写代码 通过获取屏幕的尺寸再除以一个数值得到最终结果 如果设计稿是按照750的二倍图尺寸做的 他们就不用自己算 比较方便。

3、iiOS尺寸规范

1、定死的部分

在界面中 有些部分是定死的 除了那些部分外 其余的是可设计区域。我们所做的就是可设计区域的设计。

2、栅格布局

在可设计区域里面，我们在做设计稿稿的时候 需要有一个框架 也就是常说的栅格布局。有栅格布局规范着 设计稿里的内容就会有一定的规律 组成界面的时候就有韵律感。界面是由行与列构成的 这些行列的构成规则 跟一开始定义最小单位有关。在这里以二倍图尺寸来讲述一下如何做栅格布局。我的习惯是最小单位为8px(如果你所设定的最小单位是其它数值 也可以代入以下的框架理论中) 所以框架中的尺寸设定是8的倍数。

3、组件模块

但是总的来说无非就是图标层与图文排版层。这些小的元素可以组合成不同的模块。图标的规范 之前在文章《如何画好一组线性图标》中有写 可以搜索来参考 在这里不作赘述。图文排版层内要注意的是图片的比例、信息层级区分、标题与内容之间的间距等等。

新手想要做好界面 首先要了解设计规范 定好界面骨骼。平时可以多研究各种类型的优秀的app:别人是怎么排版的、字号怎么使用、图片的展示比例、icon的样式、交互方式等等。遇到一些界面设计得好的地方可以把界面保存下来 在旁边备注。

多看、多学、多做。