UI新手都头疼尺寸问题,其实并不复杂,关键是设计本身比较难把握。

ios11-guifan

先来看看各种iPhone的尺寸和分辨率,这张图写的很清楚。

chicun

设备名称 屏幕尺寸 PPI Asset 竖屏点(point) 竖屏分辨率(px)
iPhone X 5.8 in 458 @3x 375 x 812 1125 x 2436
iPhone 8+, 7+, 6s+, 6+ 5.5 in 401 @3x 414 x 736 1242 x 2208
iPhone 8, 7, 6s, 6 4.7 in 326 @2x 375 x 667 750 x 1334
iPhone SE, 5, 5S, 5C 4.0 in 326 @2x 320 x 568 640 x 1136
iPhone 4, 4S 3.5 in 326 @2x 320 x 480 640 x 960
iPhone 1, 3G, 3GS 3.5 in 163 @1x 320 x 480 320 x 480
iPad Pro 12.9 12.9 in 264 @2x 1024 x 1366 2048 x 2732
iPad Pro 10.5 10.5 in 264 @2x 834 x 1112 1668 x 2224
iPad Pro, iPad Air 2, Retina iPad 9.7 in 264 @2x 768 x 1024 1536 x 2048
iPad Mini 4, iPad Mini 2 7.9 in 326 @2x 768 x 1024 1536 x 2048
iPad 1, 2 9.7 in 132 @1x 768 x 1024 768 x 1024

ultimate-guide-to-iphone-resolutions

 

iPhone-X-Screen-Demystified

 

iPhoneX-Portrait

 

2-(1) Design-Colors

 

最新设计指南推荐:

  1. 为iPhone X设计, iOS 11设计指南
  2. iOS 11 设计中值得关注的 UI 设计细节
  3. 「译」苹果官方 iPhone X 人机界面指南
  4. 手把手教你如何适配 iPhone X
  5. 从iOS 11看怎样设计APP图标
  6. iOS 11 vs 10: UI和交互全面对比分析
  7. 最新版IOS 11设计规范,官方源文件下载!
  8. facebook出品的iOS 10 GUI (iPhone)源文件

虽然现在出来了Iphone X ,但是我们在工作中还是会按照750*1134来设计,虎哥总结一个精简版的设计流程方法,按这个做法就可以展开工作。

以PS工具设计IOS界面。

画布尺寸:

新建750×1334  分辨率72,像素/英寸。

 

常见的字体大小:

24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。

 

字体:

中文用苹方黑,英文用San Francisco,如果安不上也可以用Helvetica代替。

zitibao

app所用的字体大礼包下载(虎哥整理的)

 

ios开发里单位是pt

750×1334尺寸的换算关系 1pt=2px,也就是说程序员拿到我们的px单位的标注稿,自己除以2就是pt了。

 

界面里的小图标常见的尺寸:

24px、32px,48px等,记住4的倍数比较好。

注意图标的尺寸要统一尺寸,以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大,需要调整下。

 

界面上的间距和元素尺寸:

以偶数为单位,不清楚的可以截图量大公司的APP界面作为参考。

750 x 1334 设计稿尺寸:

状态栏高度:40 px
导航栏高度:88 px
标签栏高度:98 px

 

设计稿实时预览:

安装一个Ps Mirror可以在iphone上实时观看效果。

 

标注工具:

  1. 马克鳗
  2. PxCook 像素大厨
  3. Parker标
  4. 一键标注神器-zeplin

 

界面的图标切图:

Cutterman选中@2x @3x导出。

sample1

 

启动图标:

做1024×1024尺寸,一般做方形无圆角。然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。

Design-IconGrid Design-RoundedCorners

 

交接给程序:

最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。

 

引导页:

值得注意的是引导页切图需要单独设计多套(640×1136、750×1334、1242×2208)这个可别傻乎乎的用Cutterman切几套图,这就尴尬了。

 

适配方法3个原则:(不清楚的在网站搜索适配2字)

  1. 文字流式
  2. 控件弹性
  3. 图片等比缩放

 

测试界面:

程序实现DEMO版本以后,咱们要在测试机上好好检查下界面问题,及时跟程序沟通并更改。

 

干货资料:

ios10

facebook出品的iOS 10 GUI (iPhone)源文件

可以看看下面这几篇文章:

      

      

  1. 三分钟搞清iPhone X 设计尺寸和适配
  2. 移动端界面设计之尺寸篇(淘宝版)
  3. iPhone6 & 6 Plus 视觉设计适配说明
  4. 新手福利!超全面的UI设计切图规范
  5. UI适配攻略·教程④一稿配双平台
  6. h5移动端页面设计学习文档
  7. Dribbble 2016十大设计趋势总结
  8. 图标设计的三个小原则
  9. 新设计趋势来临,解读 iOS 10 设计指南
  10. 一份详尽全面的UI设计字体与排版指南

 

以PS工具设计安卓界面。

画布尺寸:

如果想一稿适配ios,那就新建720×1280  分辨率72,像素/英寸。

如果单独设计安卓MD新规范的,那就新建1080×1920  分辨率72,像素/英寸。

 

720×1280常见的字体大小:

24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。

 

字体:

中文用Noto/思源黑体(是一个字体,叫法不同而已),英文用Roboto。

zitibao

app所用的字体大礼包下载(虎哥整理的)

 

单位换算

距离单位是DP

文字单位是SP

gongshi

720×1280尺寸的换算关系 1dp=2px,文字1sp=2px。也就是说程序员拿到我们的px单位的标注稿,自己除以2就是dp和sp了。

1080×1920尺寸就是1dp=3px,文字1sp=3px

 

界面里的小图标常见的尺寸:

24px、32px,48px等,记住4的倍数比较好。

注意图标的尺寸要统一尺寸,以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大,需要调整下。

6

7

移动端界面设计之尺寸篇(淘宝版)

 

界面上的间距和元素尺寸:

最新规范MD的做法:

8dp原则   栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。

 

常见一般常用做法:

直接把ios的设计稿照搬过来,只不过状态栏,导航栏,标签栏按照安卓的来。

720 x 1280 设计稿尺寸:

状态栏高度:50 px
导航栏高度:96 px
标签栏高度:96 px

 

设计稿实时预览:

安装一个Ps Mirror可以在安卓手机上实时观看效果。

 

标注工具:

  1. 马克鳗
  2. PxCook 像素大厨
  3. Parker标
  4. 一键标注神器-zeplin

标注的时候,如果是720×1280尺寸设计的,就选对应的xhdpi,如果是1080×1920尺寸设计的,就选对应的xxhdpi。

界面的图标切图:

Cutterman选中下面所示,根据需要选择不同分辨率的导出。

anzhuo

 

界面中重复利用的资源切图需要做成点9图片:

Android安卓平台的切图小贴士   draw9patch

主要是一些按钮,单色或半透明的背景块。图标不用做点9。

 

启动图标:

做1024×1024尺寸,安卓对图标的样式没有要求,你可以做各种形状都行,一般做方形无圆角的,各家手机厂商的定制系统会自己加圆角。

然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。

 

交接给程序:

最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。

 

引导页:

值得注意的是引导页切图需要单独设计多套(480×800、720×1280、1080×1920)这个可别傻乎乎的用Cutterman切几套图,这就尴尬了。

 

适配方法3个原则:(不清楚的在网站搜索适配2字)

  1. 文字流式
  2. 控件弹性
  3. 图片等比缩放

 

测试界面:

程序实现DEMO版本以后,咱们要在测试机上好好检查下界面问题,及时跟程序沟通并更改。

 

干货资料:

mdzhinan

 

可以看看下面这几篇文章:

  1. 安卓1080P界面设计规范解读
  2. 6个技巧帮你把IOS的UI转换成安卓!
  3. Material Design 安卓5.1L (UI kit包下载!)
  4. 天天喊着学UI,知道安卓和iOS的区别吗?
  5. UI设计师不可不知的安卓屏幕知识

最后说句:“对界面上的字号,间距不清楚的,多动手去截图,量一量优秀APP界面,多分析找规律。”

 

虎哥整理。

2016年12月10日更新。

 

转载请注明:学UI网 » 移动端界面设计之尺寸篇(更新)

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
安卓UI (三) — 设计规范安卓UI (三) — 设计规范
为什么选择XXHDPI做设计呢?为什么选择XXHDPI做设计呢?
背单词APP「百词斩」原型分享背单词APP「百词斩」原型分享
微信有哪些隐藏的细节或逻辑很惊艳?微信有哪些隐藏的细节或逻辑很惊艳?
标签栏ICON的设计与应用标签栏ICON的设计与应用
界面交互动效核心知识的分类与总结界面交互动效核心知识的分类与总结
大合集!最新版iPhone X 展示模板样机下载!大合集!最新版iPhone X 展示模板样机下载!
最新版IOS 11设计规范,官方源文件下载!最新版IOS 11设计规范,官方源文件下载!
高达1440M!5套高质量UI KIT下载!高达1440M!5套高质量UI KIT下载!
问答社区「知乎」APP原型分享问答社区「知乎」APP原型分享