UI 设计常用尺寸规格

2024-05-11 20:22:55

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

设备名称	屏幕尺寸	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

最新设计指南推荐：

为iPhone X设计， iOS 11设计指南
iOS 11 设计中值得关注的 UI 设计细节
「译」苹果官方 iPhone X 人机界面指南
手把手教你如何适配 iPhone X
从iOS 11看怎样设计APP图标
iOS 11 vs 10: UI和交互全面对比分析
最新版IOS 11设计规范，官方源文件下载！
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代替。

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上实时观看效果。

标注工具：

蓝湖
马克鳗
PxCook 像素大厨
Parker标
一键标注神器－zeplin

界面的图标切图：

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

启动图标：

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

交接给程序：

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

引导页：

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

适配方法3个原则：（不清楚的在网站搜索适配2字）

文字流式
控件弹性
图片等比缩放

测试界面：

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

干货资料：

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

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

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

以PS工具设计安卓界面。

画布尺寸：

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

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

720×1280常见的字体大小：

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

字体：

中文用Noto/思源黑体（是一个字体，叫法不同而已），英文用Roboto。

app所用的字体大礼包下载（虎哥整理的）

单位换算

距离单位是DP

文字单位是SP

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

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

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

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

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

移动端界面设计之尺寸篇（淘宝版）

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

最新规范MD的做法：

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

常见一般常用做法：

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

720 x 1280 设计稿尺寸：

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

设计稿实时预览：

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

标注工具：

马克鳗
PxCook 像素大厨
Parker标
一键标注神器－zeplin

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

界面的图标切图：

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

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

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

启动图标：

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

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

交接给程序：

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

引导页：

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

适配方法3个原则：（不清楚的在网站搜索适配2字）

文字流式
控件弹性
图片等比缩放

测试界面：

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

干货资料：

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

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

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

虎哥整理。

2016年12月10日更新。

UI 设计常用尺寸规格相关推荐

学习UI设计常用的软件必了解
UI设计所包含的知识有很多,想要学好UI设计技术,那么一定要做好功课,下面小编为大家整理了一些学习UI设计常用的软件,希望能够帮助到正在学习UI设计技术的同学. 学习UI设计常用的软件有哪些: 一.C ...
干货！！UI设计手机尺寸规范优漫动游
对于刚入行的UI设计师,往往会遇到一个基础问题,就是设计移动APP时,是用什么尺寸或者用哪种屏幕的尺寸是适当的?优漫小编顺便说一些需要注意的问题理解什么是像素密度. 像素密度(pixelspe ...
平面设计师常用尺寸规格
文章目录名片名片规格 DM单.彩页 DM单.彩页规格三折页三折页规格海报宣传海报规格电影海报规格易拉宝易拉宝规格展架展架规格信封信封规格手提袋手提袋规格画册画册规格 ...
UI设计素材干货|日历也要设计，模板都给你们整理好了
在平时的UI设计中,我们经常会遇到日期时间的编排.虽然日期编排看起来简单,但是要编排得较为有设计感的话,就很考验你的版式基本功了.如果日期编排得好的话,在传递信息的同时也为我们的作品增添不少设计感,反 ...
学习UI设计，哪些软件是必学的
UI设计软件的学习并不重要.许多设计软件功能相似,操作相似,设计效果相似,此时我们只需要选择相同类型的软件进行深入学习,当我们掌握软件时,使用其他类型的软件基本上不会有太大的困难. 一.位图软件: ...
5个月的ui设计培训，都学习什么内容|优漫教育
最近几年,市场对ui设计师的需求越来越大,很多人都想转行学习ui.但是市场上一些几个月的UI设计速成班持怀疑态度,对于到底学习什么内容也不了解.今天优漫动游的小编就告你UI设计培训5个月的课程都学习什 ...
合创视觉UI设计会用到哪些软件？UI设计要学什么软件？
UI设计作为设计岗位的一种,在互联网企业中是必不可少的存在,有不少同学都希望成为UI设计师,那么成为UI设计师需要学习哪些软件,它们又是做什么的呢? 那么我们今天就为想要了解UI行业的小伙 ...
AutoView自动为旧设计稿更新新设计稿尺寸
使用AutoView适配框架适配Ui的时候,可以直接根据ui设计的尺寸做界面. 但是坑爹的Ui, 在设计时如果使用两种不同尺寸的设计稿,或者复用不同尺寸的设计稿,那在处理时,就需要花一番功夫测量设计稿 ...
UI设计师常用的软件都有哪些
随着互联网+时代的到来,UI设计师越来越受欢迎.很多刚毕业的学生和对未来工作迷茫的小伙伴已经开始想进入UI设计行业了.那么UI设计都需要学习哪些软件呢?好不好学呢?优就业老师为你总结下,小白入门都需要 ...
零基础小白如何自学UI设计？get这4个硬核技能，月入轻松2W+！
对于想自学入行的UI设计的同学来说,在选择众多设计软件时往往无从下手.小姐姐建议初学的第一步,是了解自己在UI设计工作过程中必用的软件,然后再针对性地去加强自己的技术和能力. UI设计常用的软件有不少 ...

最新文章

热门文章