年全网最全iOSAndroid [复制链接]

北京治白癜风的地 http://m.39.net/pf/a_4619522.html

iOS设计规范

苹果自年1月9日正式发布iPhone到目前为止的iPhone12ProMax，已经历了十四代产品。以下为苹果手机历代产品明细：

一代：iPhone

二代：iPhoneG

三代：iPhoneGS

四代：iPhone4

五代：iPhone4s

六代：iPhone5

七代：iPhone5s、iPhone5c

八代：iPhone6、iPhone6Plus

九代：iPhone6s、iPhone6sPlus

十代：iPhone7、iPhone7Plus

十一代：iPhone8、iPhone8Plus、iPhoneX

十二代：iPhoneXS、iPhoneXSMax、iPhoneXR

十三代：iPhone11、iPhone11Pro、iPhone11ProMax

十四代：iPhone12Mini、iPhone12、iPhone12Pro、iPhone12ProMax

如何有效记住iOS设计规范，这里我总结了一个方法“iOS五点两图记忆法”，也就是五个点+两张图：1、设计尺寸：75xpt

1x（x14px

2x）为基准设计；2、设计工具：Sketch、AdobeXD、Photoshop；、预览效果：SketchMirror、AdobeXD或PsPlay；4、切图输出：

2x

x两套；5、标注工具：蓝湖、摹客；

考考：

1、iPhone8尺寸的设计稿如何快速变成iPhoneX的设计稿？

2、

2倍图被当作

倍进行开发，会导致什么样的后果？

、为什么要用75xpt

1倍图进行设计？

4、iPhone8显示为4px的文字在iPhone11proMax里面是不是也是4px？

这里我们首先重点理解下PX和PT这两个单位，弄清楚为什么建议使用一倍图进行UI设计，才能在设计中以不变应万变。（说明：该部分内容优化自静电老师的总结）PX大家可能比较熟悉，就是像素，英文pixel的简称。最通俗的理解就是找一个放大镜（不是电脑中的放大镜，是真实的放大镜），然后对准自己面前的显示器或者手机屏幕观看，大部分显示器会在放大镜下出现一个个点。这就是我们平时所说的像素概念。在一台物理分辨率为xpx的显示器中，横向分布个点，纵向则有个点。这些点通过显示器的光学特性，为我们组成不同的图像。请注意，在不同尺寸的显示器上，这些点的单位面积并不是一样的。比如一台22英寸的p液晶显示器与一台27英寸的p液晶显示器，可以发现这两台显示器的像素分布就是27英寸的显示效果明显逊于22英寸显示器的效果，一个重要的原因就是两台液晶面板中的“像素”颗粒大小不一。由此可见，像素这个单位是一个相对单位，不能用厘米、毫米等这些绝对度量单位来衡量他的长度或者宽度，因为1像素只代表一个单位的“点”。另一个重要单位是PT，英文point的简称，这个单位也是iOS开发过程中使用的单位，与px这样的相对单位不同，PT（Point）是一个绝对单位，中文名字是“磅因”（或者磅)(1PT=1/72英寸）。同样用简单直观的例子来演示，拿两台不同型号的iPhone，比如一台iPhone11和一台iPhone11proMax，打开同样一款应用（如QQ音乐），准备好一把尺子，使用尺子分别测量最上方title“音乐馆”文字尺寸。经测量，可以发现不同型号的“音乐馆”文字的尺寸都一样。也可以请iOS开发人员分别写两个针对不同尺寸机型适配的同一个文件，并在两部手机安装，确保这个文件中的字体使用一个字号（0PT）。在两个手机中运行并用尺子测量，我们发现他们的物理尺寸完全一样。请大家记住一点，px是相对单位，pt为绝对单位（类似单位为厘米，毫米等等）。在不确定屏幕密度的情况下，px与pt没有任何可比性。在开发工程师眼中，你如果使用px的分辨率作图，那么按原大小标注设计稿中的尺寸的话，他们同样在开发环境中是要换算为一倍尺寸的，比如你标注了字号为40px，那么最终开发工程师写在代码里的就是20pt，除以2的关系。但是呢，如果使用一倍基准分辨率作图，那么就不用除以2啦，所有尺寸开发工程师直接拿过去随取随用。sketch作为一款纯矢量的移动端ui设计软件，不管是设计还是后期与开发工程师的配合，都严格遵从开发原理，这种设计方法可以最大限度保证设计稿的复现，同时也可以减小文件体积和系统资源消耗，不管是从哪个方面看，都是设计师制作ui界面的明智之选。最后总结一下原因，设计师使用一倍基准尺寸作图，主要是单位转换方便，输出切图方便，理解简单。对于工程师，他们不用再进行复杂的换算，有助于完美复现设计稿。我们继续熟悉iOS中一些必不可少的页面规范细则：一、引导页

引导页是一张完整图，不能适配，因此需要单独出设计图，iOS共需提供6套尺寸，当然也支持视频形式。（目前5以下的适配基本淘汰）

二、图标

以xpx尺寸进行图标创作即可。再通过现成尺寸模版资源，一键生成整套尺寸导出即可。

注意：最终提交给到程序员的切图是直角，非圆角图标。设备名称应用图标AppStore图标Spotlight图标设置图标iPhone11P,11PMax,X,Xs,8P,7P,6sP,6Pxpxxpxxpx87x87pxiPhone11,XR,8,7,6s,6,SE，5s,5c,5,4s,4xpxxpx80x80px58x58pxiPhone1,G,GS57x57pxxpx29x29px29x29pxiPadPro12.9,10.xpxxpx80x80px58x58pxiPadAir12,Mini24,xpxxpx80x80px58x58pxiPad1,2,Minix76pxpxxpx40x40px29x29px

三、状态栏和导航栏

状态栏：显示时间、运营商信息、电池电量等信息区域；导航栏：状态栏下面的区域，含页面标题、功能图标等信息区域；状态栏跟导航栏一般会进行一体化设计。现在流行大标题导航栏设计，也就是加大导航栏的高度，融入页面内容的标题，当内容上滑时，大标题再回归到常规导航高度。（大标题导航栏的高度一般为pt（22px），这里包括了20pt（40px）状态栏的高度，同时也能放得下4pt（68px）的大标题和辅助信息（如返回等图标）导航栏中的元素必须遵守如下几个对齐原则p>1、返回按钮必须在左边对齐；

2、当前界面的标题必须在导航栏正中；

、其他控制按钮必须在右边对齐；

四、标签栏

标签栏：即Tab栏，为底部快速入口，iOS规范中Tab栏一般有五个、四个、三个图标的形式。分为“纯图标标签”和“图标加文字标签”两种形式。

五、iTunes上传页面在程序上传AppStore时我们需要提供多张App截图，供用户了解APP的功能。这里我们需要提供xpx和xpx两套截图。也支持视频形式。六、字体

中文字体：PingFangSC，英文字体：SFUIText、SFUIDisplay，其中SFUIText适用与小于19pt的文字，SFUIDisplay适用于大于20pt的文字。

注意：以下字号pt单位是适用

1x倍图，10pt（20px）是手机上显示的最小字体，最大的应该是目前的大标题字体了，达到了4pt（68px）。元素字重字号(pt)行距字间距大标题Regular4pt41pt11pt标题1Regular28pt4pt1pt标题2Regular22pt28pt16pt标题Regular20pt24pt19pt头条Semi-Bold17pt22pt-24pt正文Regular17pt22pt-24pt标注Regular16pt21pt-20pt副标题Regular15pt20pt-16pt注释Regular1pt18pt-6pt注释1Regular12pt16pt0pt注释2Regular11pt1pt6pt

七、色彩

在iPhone上显示的色域要比我们作图时的RGB色域要广。所以在iPhone上设计怎样的颜色都可以，只要符合产品气质并且在色彩心理学理论范围内。官方建议的系统色彩如下：

八、控件

控件包括：输入框、按钮、滑杆、页卡、开关等，在设计模板中已经全部列出。（下载