2018最新ios端界面UI设计规范整理

2018-04-2109:07:07 发表评论 1,237 人看过
2018最新ios端界面UI设计规范整理

在iPhone6还没出的时候,都是用640×1136px来做设计稿的,自从6的发布,所有的设计稿尺寸以750×1334px来做设计稿尺寸。

以750×1334px作为设计稿标准尺寸的原由:

1、从中间尺寸向上和向下适配的时候界面调整幅度最小,最方便适配。

2、大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角

3、设计安卓版本时只需做最小的设计调整,提升设计效率。

所以做设计稿时请以750×1334来做设计稿

iPhone界面设计规范

2018最新ios端界面UI设计规范整理

 

iPhone界面尺寸:

2018最新ios端界面UI设计规范整理

 

2018最新ios端界面UI设计规范整理

 

左右我习惯设置24px的距离,我通过对国内外很多APP进行了对比,总结是24px更合理,这个是我的个人习惯,所以也不要当做是明文规则,你设置为30px,也是可以的。

然后就可以开始你的设计了。

 

关于设计字体

先来看一下字体的历史演变过程

ios9:英文字体为Helvetica Neue

ios9:中文字体为冬青黑

ios10:英文字体为San Francisco

ios10:中文字体为苹方

 

设计稿标准文字

文字选用“苹方(PingFang SC Light)”标题可加粗选用“苹方粗体”

 

文字搭配

一般用4和6的梯度搭配,例如:一般文字30px标题搭配26px详情,带头列表30px标题搭配22px辅助信息。

详情页标题文字与详情文字间距

间距为8的倍数,例如:24px、32px、40px等

 

行间距设定

行间距与字号比例为1.5倍

 

对齐原则

段落文字采用“两端对齐左对齐”,避头尾为“严格”,首行严禁放标点

 

关于字体大小的问题:

顶部操作栏文字大小:34-38px

标题文字大小:28-34px

正文文字大小:26-30px

辅助性文字大小:0-24px

Tab bar文字大小:20px

2018最新ios端界面UI设计规范整理

 

#END#

来源:设计者

地址:: http://www.shui-mai.com/2018zuixiniosduanjiemianuishejiguifanzhengli/

 

weinxin
博客小程序【一起行动派】
欢迎访问行动派博客小程序,小程序和博客同步更新,查看内容更加方便!
Action

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: