IOS系统UI设计时,需要注意的UI设计规范是什么?

设计营销   2021-02-22

UI设计是现在非常热门的职业,在进行UI设计的时候,将是由终端来决定设计套路,不同的终端使用不同的设计方法,这就要求设计师能哦股学会灵活使用,下面就一起看看那些需要注意的IOS UI设计规范?

IOS UI的设计规范:

先说设计稿的大小,一般来说,在制作IOS设计稿时,我们总是选择650*1334的尺寸,如果是1x,就是375*667。

我们按照1x规范从上到下理解,最上面是状态栏,高20,宽375。

那么状态栏有哪些元素呢?其实就是信号,网络状态,时间,电量,通知。

信号栏下面是我们的导航条,高度44px。

导航栏中必须有导航字符。一般来说,我们是居中对齐的,导航字符的大小应该是18px。

接下来是底部。底部是我们的标签栏,里面装满了我们的切换图标。标签栏的高度为49px。

标签栏中图标的大小也是标准化的。我们必须确保最小点击面积为24px。如果低于这个范围,就不方便操作。

图标下面一般都有字符,尺寸比较小,可以根据图标的大小进行调整。一般来说,字符的大小是11和10px。

一般来说,一是基于我们IOS的设计规范,二是内容区的文字大小规范。一般来说是16,15,14,12,根据要求设计。

iOS的屏幕分辨率

说到原稿改编,首先要了解iOS屏幕分辨率的一些知识点。这些知识点便于我们理解为什么设计稿要分双图和三图。如果很难理解,直接记住双三图的大小就好了。熟了再回头看理论。

1.像素

像素是一个单位和一个小正方形。它没有固定的物理大小,它的物理大小由载体的物理大小决定。这个像素小方块包含颜色,无数个小方块根据位置显示颜色,从而形成一幅画面。(是的,你可以理解为类似于十字绣。)在同样大小的屏幕上,像素越多,图像就会越清晰。

2.PPI和DPI

PPI和DPI是经常被谈论的兄弟。都和密度有关,影响输出质量,但是PPI是每英寸的像素,也就是每英寸的像素数。DPI是打印精度,即每英寸点数。PPI影响屏幕显示的准确性,DPI影响打印的准确性。了解PPI的原理及其在UI设计中的应用是有好处的。

3.逻辑点

在上面列出的型号中,我们可以知道屏幕很多。ioS手机只有苹果生产,安卓手机很多公司生产,所以尺寸很多。为此,建立了一个规则,其中一个尺寸作为参考,而其他尺寸根据参考尺寸比率进行调整。iOS系统的基准设计尺寸为375*667(俗称双图),逻辑点单元称为pt。1pt在双图中是1px,在双图中是2px,在三图中是3px。因此,我们为开发人员提供了一个双图,他们可以根据单位pt知道其他多个图中元素和组件的大小。下图也是一个44pt大小的圆,在不同倍数的屏幕上有不同的大小:


4.双图,双图,三倍图

A.iOS一次、二次、三次图的定义

iOS的设计尺寸是375*667,iOS的设计尺寸是750*1334(iPhone6、7、8的尺寸),iOS的设计尺寸是1242*2208。

如果按照双图的1.5倍得出三图,应该是1125*2001。为什么三重图是1242*2208?这和屏幕的PPI有关。IPhone6、7、8plus的PPI为401,而iPhone6、7、8的PPI为326。理论上苹果应该用401/326*@2x=@2.46x材质。但是这个数字是十进制的,很难切图。所以为了方便开发者,苹果使用@3x素材,然后缩放到@2.46x,缩放比例为83%。苹果选择了一个大概87%的比例作为最终比例。这样,Appleplus型号的物理分辨率大小占虚拟分辨率大小的87%。plus型号的物理尺寸是1080*1920。除以87%,虚拟设计尺寸为1242*2208。

上面是虚拟的三重图,而iPhoneX是真正的三重图,大小是1125*2436。所以iPhoneX上用的是三倍的截止图像。

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

既然一个稿可以改编,那么按照一个双画面的大小来做一个双画面和三画面就够了,那为什么要分双画面、双画面和三画面呢?其实这里的双图主要是用来切图的(切图是你在界面上画的一些元素,比如图标、插图等。,应该放在不同尺寸的屏幕上,所以需要适当增加倍数,即@2x,@3x)。设计稿虽然根据开发只需要给一套样式写代码,但是需要给几套裁剪图,否则在双界面上只用一次裁剪图拉伸就会模糊(理论上一个位图像素对应一个物理像素才能完美显示图片。这个理论在普通屏幕下是没问题的,但是现在有了高清视网膜屏幕,如果还用原来的像素图像,会导致像素不足,模糊。).所以双界面是双切切,双界面是双切,三界面是三切,以此类推。

5.初稿的改编

现在的开发团队一般都是根据一套设计稿来适应其他尺寸。所以我们只需要提供一套设计稿,大大节省了我们的设计时间。至于要用双图还是双图,看你个人习惯,两者各有利弊。我个人习惯使用双图,也就是750*1334的大小,因为除了双图本身的优点之外,开发使用也很方便。发展的适应方法也是基于个人习惯。一些开发伙伴使用js编写代码,通过获取屏幕大小并除以一个数值得到最终结果。如果设计稿是按照750的双图尺寸做的,他们就不用自己算了,比较方便。

IOS尺寸规格。

1,固定的部分

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

2.网格布局

在可设计区域,我们在做设计稿的时候,需要有一个框架,这个框架通常叫做网格布局。如果网格布局标准化,设计稿中的内容会有一定的规律,形成界面时会有节奏感。界面由行和列组成,这些行和列的形成规则与开始时最小单位的定义有关。在这里,我们就来谈谈如何做双倍图形尺寸的网格布局。我的习惯是最小单位是8px(如果你设置的最小单位是其他值,也可以代入下面的框架理论),所以框架中的大小设置为8的倍数。

3.组件模块

不同类型的应用程序有不同的内容,但一般来说,它们只不过是图标层和图形布局层。这些小元素可以组合成不同的模块。图标的规范,之前写在《如何画一组线性图标》一文中的,可以搜索参考,此处不再赘述。在图形布局层,要注意图片的比例,信息层次的区分,标题与内容的距离等等。

IOS设计需要严格按照要求相应的规范进行操作和设计,并保证其设计效果,当然在设计中需要对方案再进行合理的规划和整理,才最终输出一份完整且系统的规范文档


维好维可-用户体验体验创新设计

联系我们:

关注我们微信

关注我们,一起探索美好

+86-21-51115850
©2010-2021 维好维可 | 用户体验创新设计咨询公司-版权所有
沪ICP备19006116号-1

Hi,  认识一下
请留下需求和联系方式

合作咨询
+86-21-51115850
© 2010-2020  维好维可 | 用户体验创新设计咨询公司
沪ICP备19006116号-1
维好维可-微信二维码