手机端设计规范

以750*1334为例 

一、文本

1.主题类:

• 展示标题:小字号 36 加粗 行距50   大字号  40  加粗行距58

• 主标题:大字号  32  加粗  小字号28  中等

• 副标题:大字号30  加粗   小字号  24  中等

2.文本类:

• 主文本:字号36  中等  行距58

• 辅文本:字号60  行距48  中等

• 次要文本:字号24   中等

3.按钮:

• 实心大按钮 （圆角矩形   圆角 8）  88*560     字号36

• 实心小按钮/ 空心线框性小按钮（圆角矩形  圆角4）  140*55   字号24   中等

4.系统图标

• 大图标:44*44

• 中图标:36*36

• 小图标:24*24

5.导航图标

• 大号:96*96（使用首页导航）

• 小号:72*72（使用分页导航）

6.头像:

112*112 （使用用户中心）   小:72*72（用户评论）

7.标签:

（圆角线框  13.5像素圆角）80*28（宽度没有唯一标准）   字号20

8.悬浮操作按钮:

112*112(圆) 投影(距离0 大小8  不透明40)  悬浮按钮可加44*44的大图标

9.缩略图:

• 比例  4:3  16:9   1:1

• 232*174(三图)    350*196(2图)      710*398(1图)

•  左右结构 320*270（1图）

10.列表:

• 上下结构:1图  2图  3图

• 左右结构:1图

11.搜索框:

750*88  （500*60  圆角30）

banner尺寸：  750*260

目前主流的 iOS 设备主要有 iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸），它们都采用了 Retina 视网膜屏幕，其中 iPhone 6s/7/8 Plus 和 iPhone X 采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分辨率自动加载@3x或者@2x的切片。

通过上面的讲解和图示我们了解了 iPhone 不同设备的物理尺寸，那么他们的像素分辨率又是多少呢？也就是说我们用 Photoshop 做设计新建画布应该设置多大呢？另外，iOS应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少呢？（注意：iOS 严格规定了各个栏的高度，这个是必须遵守的）通过下面的表格和图示来为你解答上面的问题。

注意：在进行 iphone x 设计的时候我们依然可以采用熟悉的 iphone 7 的设计尺寸作为模板，只是高度增加了290px，设计尺寸为750*1624（@2x）。注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。