苹果页面设计规范吐血整理

苹果567(775乘1334px) 主流设计尺寸 一般设计以这个为标准
如果要转为三倍图 乘以1.5等比例缩放形成自适应
1.界面设计包括布局层,图文排版层,图标层。
2. iPhone界面布局讲究8px原则。所有间距和标准尺寸都是应该是8px的倍数。如iPhone678的状态栏40px,导航栏88px,标签栏98px。除此以外,其他规范导航栏下导航高度80px,列表卡片高度88px,按钮高度88px,小标题栏高度64px,标签栏98px,都是 8的倍数,最小距离也是8px。除开状态栏导航栏标签栏内容区域1108px。
3. ios最小点击区域尺寸为88x88px。切图注意,没有也要用这个尺寸。
4.导航栏工具栏标签栏布局中的图标大小都是44乘44px。在标签栏中4个图标各占标签栏比例宽度188,186,186,186px。图标和下方的字体最好是8px距离,字体大小一般为20px。注意pt等于2px。5.页边距30px,一般是整数偶数。
6.字体大小都在20-36px之间。一般为偶数呈现,导航栏字体36px。内容区域字体24-28px。辅助性文字20-24px。常规按钮32-36px。工具栏20px。
7.字体正文是pingfang sc light light,标题是pingfang sc bold bold。(加粗)
8.不要为字体间大小搭配烦恼了。字体大小之间搭配原则:(原则6和8的剃度,自己随意搭配)如一般列表32px搭配26px详情文字。(字体大小6px差距,一般都是这个6px)带头像30搭配22辅助文字。(8px大小差距),用得少,这个情况用。
9.详情页标题文字与详情文字间距是8的倍数。常用间距24,32,40px。
10.桌面图标512x512px,圆角64px。内容不能超过448x448px的大圆区域。设计在大圆内进行。
11.系统图标44x44px。分别有圆形,方形,竖长形,横长形等。做好了可以等比例扩大,展示也是呈现3倍放大。
12.中文字体苹方/ping fang sc,英文字体sf pro text/sf pro display。但是现在主流做法是中文华文细黑(pc)和黑体简(mac),英文helevitica。
13.设置界面图标58乘58px。一般在个人中心会这样设置。这里右边字体可以与左边图标距离30px。
14.搜索栏高度58px,里面字体大小28px。
15.亲密距离20px。如左边图标和右边文字的距离20px。
16.常用的颜色:背景浅灰色#f2f2f2,文字深黑色#323232,边框色深灰#CCCCCC。

苹果x 跟进了解
1.尺寸1125乘2436px,3倍图。包括刘海区域在内的状态栏132px,导航栏132px,标签栏147px,禁止作图home区域102px。5.8英寸。

2.页边距20pt也就是60px,卡片间距8pt,12pt,20pt,24pt,30pt,36pt,40pt,也就是24px到120px之间。也可以双栏边距。

3.列表间距自己发挥,不得小于44pt也就是132px。

  1. iPhone应用程序图标60pt乘60pt。(一倍图大小)设置里的图标是87乘87px。

  2. 推荐使用面性图标设计,视觉上保持一致性。导出为png格式。

  3. 标签栏图标最小72乘72px,最大84乘84px。

7.ui规范常用字:
normal(正常)、pressed(按下)、selected(选中)、disabled(禁用)、visited(已访问)、hover(悬停)、btn(按钮)、icon(图标)、sign(标记)、list(列表)、menu(菜单)、view(视图)、panel(面板)、sheet(薄板)、bar(栏)、statusbar(状态栏)、navbar(导航栏)、tabbar(标签栏)、toolbar(工具栏)、switch(切换开关)、slider(滑动器)、radio(单选框)、checkbox(复选框)、bg(背景)、mask(蒙版/遮罩)。

关于标注和注释
1.标注我用的pxcook。注意:
2.图标模块的宽高,彼此之间的间距;
3.导航、注释、文章内容、注释等的文字大小及颜色;
4.背景颜色、透明度;
5.按钮在不同状态下的颜色。

1.切图神器:cutterman
2.所有切图尺寸均为偶数,格式为png_24;
3.考虑最小点击范围8888px,如果按钮较小,周围空出来切8888px的大小。
命名方法:iphone4/5/6/7:模块_类别_功能_状态@2x.png
举例:[email protected]
启动页需要另外命名:
Iphone6/6s: [email protected]
Iphone6 plus/6s plus: [email protected]

发布了6 篇原创文章 · 获赞 8 · 访问量 326

猜你喜欢

转载自blog.csdn.net/qq_47168970/article/details/105706792