设计规范对于UI设计师是必须要了解并熟记的理论。今天就给大家分享IOS系统的设计规范。
像素(pixels)是屏幕显示上最小的计算单位。在同样的屏幕尺寸中,PPI(每英寸的像素数目)更高,就能显示更多的像素,同时我们所看到的内容就更清晰。
点(points)是一个与分辨率无关的计算单位。它是根据屏幕的像素密度---一个点可以包含多个像素。
当我们对不同的显示设备设计时,我们需要以“点”为单位参考。但是设计时还是以像素为单位。因为涉及到各个不同设备之间的分辨率。所有的设备分辨率都可以换算成点。点可以说是通用的计算单位。但最后都要取决于你设计的是几倍图。然后把点换算成像素即可。换算方式很简单。2倍屏乘2或3倍屏乘3.
在IOS7之前,简单半径值的圆角已经不再使用了。从IOS7开始,APPIcon开始是用一种叫“超椭圆”的形状。但苹果官方并未发布形状模板。我个人会在120×120px中圆角为26.
在IOS8之前系统的默认字体都是Helvetica Neue。但IOS9系统后。英文字体用旧金山字体(San Francisco),中文字体苹方 。
导航栏字号36px活40px
内文显示大的正文32px 不加粗
副标题26px 说明文字20px
36px会用在比较大的button上
重点记住,不管是间距还是字体大小。一定要都是偶数。最好是4或者8的倍数。
状态栏包含基本的信息,比如当前时间,电池状态,手机信号等信息。为了配合APP的风格和保持可读性。我们可以跟随APP风格来改变其背景填充。但是状态栏内容只有黑和白两种。状态栏的高度为20pt。二倍屏就是40px。
导航栏包含了一些控件。位置总在屏幕的顶部,状态栏的正下方。背景填充可随APP风格。高度为44pt。左右间距为8pt。
上面是竖屏,横屏的时候。导航栏高度为32pt。ipad也是这样。
工具栏包含一些控制,可操作当前视图内容的动作控件。工具栏总是在屏幕的底部边缘。通常控件内容超过三个。和导航栏一样,背景可自由填充。高度为44pt。
搜索栏有有两种风格状态,凸显和最小化。
用户在没有输入文本时,搜索框内显示提示文本,并且可添加一个小ICON(可跟随文本减少不透明度)用来查看历史搜索记录。输入搜索文本,提示文本消失,同时在右侧出现清空按钮(此按钮必须清晰)。一般高度为43pt,左右8pt弹出框内容可以是请求式决定(“确定”和“取消”),文本不限于一行。高度随文本内容。宽度为278pt,圆角为6pt。
按钮的设计在风格上允许自定义文本、投影、颜色。技术到位的话可以自行设计。
一个按钮有多个状态,每个状态都有它需要传达的视觉语言:默认状态、选中状态、不可用状态以及跟随APP交互可能会有更多的状态。官方按钮有两种尺寸。例如登录按钮,如果是单一按钮为一行。高度为88或者60px,宽600px,字号26-30,圆角4px。如果是单行两个按钮。那么,高度为88或60px,宽290px。圆角4px。
PX (pixel),像素。电子屏幕中最基本的单位。
PT (point),磅。印刷行业的常用单位,等于1/72英寸。
PPI (Pixel Per Inch),就是每英寸中有多少个像素,像素越多,屏幕显示效果越细腻。
DPI (Dot Per Inch),就是每英寸中有多少个点,数值越大,图片显示效果越细腻。
DP (Density-Independent Pixel),是安卓开发中常用的单位。
SP (Scale-Independent Pixel),安卓开发中常用的字体大小的单位。
iPhone XR、iPhoneXS、iPhone XS Max也发布有一段时间了,每次新机发布,我们都得考虑会不会改变当前的适配规范。
我们先看一下新机的参数。
根据数据统计,现在使用的机型主流宽度为750和1242,只有高度在进行着明显的变化。那其实我们只需要进行高度适配就行。
当前设计IOS设备依旧为750×1334,并随着版本的更替转向1242×2208
安卓还是1080×1920
在文章最后提醒大家。在和开发沟通中,一定要问清楚他们的开发习惯。比如他们对于色值的习惯是以#666666还是以R 255 ,G 255, B 255。的习惯。因为我以前是开发的。有时候不沟通会很尴尬。直接影响项目的进度。
想观看更多精彩后续就关注我吧!!!