全部新闻提供最新行业动态,分享前沿设计理念
超详细IOS设计规范。 学UI的同学快看过来了
时间:2024-09-12 来源:朝夕友人 点击:

设计规范对于UI设计师是必须要了解并熟记的理论。今天就给大家分享IOS系统的设计规范。

iPhone界面设计规范

iPhone界面尺寸

点(pt)和像素(px)的区别

像素(pixels)是屏幕显示上最小的计算单位。在同样的屏幕尺寸中,PPI(每英寸的像素数目)更高,就能显示更多的像素,同时我们所看到的内容就更清晰。

点(points)是一个与分辨率无关的计算单位。它是根据屏幕的像素密度---一个点可以包含多个像素。

当我们对不同的显示设备设计时,我们需要以“点”为单位参考。但是设计时还是以像素为单位。因为涉及到各个不同设备之间的分辨率。所有的设备分辨率都可以换算成点。点可以说是通用的计算单位。但最后都要取决于你设计的是几倍图。然后把点换算成像素即可。换算方式很简单。2倍屏乘2或3倍屏乘3.

APP图标

图标设计

在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。的习惯。因为我以前是开发的。有时候不沟通会很尴尬。直接影响项目的进度。

想观看更多精彩后续就关注我吧!!!

如果您也有此需求,欢迎咨询我们立即咨询