火星网校
iPhone6的UI设计尺寸规范，原来如此重要！
发布时间：2024-07-03 18:37:47 浏览量：865次
很多iOS APP的UI设计都以iPhone6为基准，这样既方便向上适配iPhone7尺寸，又方便向下适配iPhone5尺寸。下面让小编分享一下iPhone6界面设计尺寸的规范。
1. 界面尺寸规范
1.1 界面尺寸大小为：750x1334px。
1.2 状态栏（status bar）高度为：40px。
1.3 导航栏（navigation）高度为：88px。
1.4 主菜单栏（submenu，tab）高度为：98px。
1.5 内容区域（content）高度为：1108px。
图标尺寸规范：
- 导航栏和工具栏尺寸：44x44px
- 标签栏尺寸：75x75px
- 导航栏文字最大尺寸：34-36px
- 标签栏图标下文字大小：20px
- 内容区域文字大小范围：20px - 34px
3. 设置界面的图标高度和开关滑动按钮高度为58px。
4. 可点击高度规范统一为88px。
5. 搜索栏高度统一为58px。
6. 界面元素之间的距离规范：
在iPhone6设计稿中，亲密距离为20px，疏远距离为30px。
A、疏远距离：比如，元素距离屏幕左边的距离。
B、亲密距离：比如，左侧图标与右侧文字之间的距离。
7. 原型设计需要考虑不同屏幕尺寸的苹果手机，iPhone5对应@1x屏幕尺寸为320x568px，iPhone6对应@1x屏幕尺寸为375x667px，iPhone6Plus对应@1x屏幕尺寸为414x736px。
8. iPhone6Plus对应@3x，iPhone6对应@2x，iPhone5对应@2x。
iPhone6Plus对应1242x2208px的@3x像素分辨率，逻辑分辨率为414x981px；iPhone6对应750x1334px的@2x像素分辨率，逻辑分辨率为375x889px；iPhone5对应640x1135px的@2x像素分辨率，逻辑分辨率为320x757px。
想要学习更多关于UI设计的知识吗？快来火星时代教育，我们提供游戏设计培训、动画培训、UI设计培训等课程，让您成为数字艺术领域的专家！点击咨询
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
8. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
10. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
最新文章
