html 苹果6尺寸,iPhone6界面设计尺寸规范大全【含原型设计规范】

article/2025/8/22 9:39:39

目前,很多APP设计师的APP Ui设计稿是先做iPhone6的,方便向上适配iPhone6Plus,也方便向下适配iPhone5和iPhone4的尺寸。这一节课也算是25学堂为大家精心整理的iPhone6界面设计尺寸规范大全。

当然下面的10个方面的不仅是iPhone6界面视觉设计尺寸规范,也是iPhone6界面原型设计尺寸规范。值得APP设计师和APP产品经理好好的阅读。

所以,ios系统平台上的APP交互设计稿的尺寸,就按照iPhone6的尺寸来做。

尺寸大小如下:750*1334px

140228530_1_20180803112757466.png

1、 iPhone6的界面布局是:屏幕是4.7英寸的,设计稿的大小为750x1334px。

☆  状态栏(status bar):就是电量条,其高度为:40px;

☆  导航栏(navigation):就是顶部条,其高度为:88px;

☆  主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px;

☆  内容区域(content):就是屏幕中间的区域,其高度为:1334px-40px-88px-98px=1108px

截图如下:

140228530_2_20180803112757591.jpg

另外25学堂跟大家推荐3款 测量标注工具为:

MarkMan马克鳗,Dorado标注,PXcook像素大厨。

2、关于iPhone6的图标的尺寸:

导航栏的图标高度为44px左右,标签栏的图标尺寸为50x50px左右,最大为96x64px。

关于iPhone6的文字的尺寸:

导航栏的文字大小最大值是34-36px,标签栏的图标下方的文字大小为20px。

内容区域的文字大小是:20px   24px,26px,28px,30px,32px,34px。

140228530_3_20180803112757638.jpg

3、(iPhone6设计稿尺寸是@2x),

做原型图的时候,可以做成@2x的,即750x1334px;也可以做成@1x的,即375*667px。

4、设置界面的图标高度和开关滑动按钮的图标高度:58px。

参考下图:

140228530_4_20180803112757716.jpg

5、关于颜色,自从我做了3套高保真的交互原型图之后,发现后面还是改成画线框图来的快。

线框图的黑白灰之纯美,有利于专心布局界面,而不用在意界面的颜色搭配。

黑白灰颜色常用的数值是:

① 文字黑色#282828

② 文字深灰色#656565

③ 文字浅灰色#98989

④ 边框浅灰色#C3C3C3

⑤ 背景淡灰色#f2f2f2

⑥ 按钮背景纯白色#ffffff

6、常用的可点击高度,在iPhone6的原型图上,统一成88px。在iPhone6设计稿中,88px是一个常用的设计尺寸。

参考图片如下,

140228530_5_20180803112757810.jpg

7、搜索栏的高度,在iPhone6的原型图上,统一成58px。

在iPhone6设计稿中,58px 也是一个常用的设计尺寸。

参考图片如下,

140228530_6_20180803112757888.jpg

8、在iPhone6设计稿中,界面元素之间的常用距离,亲密距离:20px;疏远距离:30px。

A、疏远距离:比如,所有元素距离手机屏幕最左边的距离。

B、亲密距离:比如,左边图标与右边文字之间的距离。

参考图片如下,

140228530_7_20180803112757966.jpg

9、原型设计中,需要考虑不同屏幕尺寸的苹果手机,在@1x的情况下的适配情况。

比如:

☆  iPhone5在@2x屏幕尺寸是,640x1136px;对应的@1x,屏幕尺寸就是320x568px;

☆   iPhone6在@2x屏幕尺寸是:750x1334px;对应的@1x,屏幕尺寸就是375x667px;

☆   iPhone6Plus在@3x屏幕尺寸是:750x1334px;对应的@1x,屏幕尺寸就414x736px;

参考图片如下:

140228530_8_2018080311275828.png

10、iPhone6Plus的@3x,iPhone6的@2x, iPhone5的@2x的介绍

☆  iPhone6Plus是5.5英寸屏幕,1242x2208px-@3x的像素分辨率,逻辑分辨率是414x736pt-@1x。物理尺寸是1080x1920px。这个物理尺寸,也是安卓机目前最流行的大屏设计稿尺寸。

☆  iPhone6是4.7英寸屏幕,750x1334px-@2x的像素分辨率,逻辑分辨率是375x667pt-@1x。

☆    iPhone5是4英寸屏幕,640x1136px-@2x的像素分辨率,逻辑分辨率是320x568pt-@1x。

参考图片如下:

140228530_9_20180803112758122.jpg

【综上所述】iPhone6的原型规范如下:

1、界面尺寸布局:满屏尺寸750x1334px

2、高度电量条高度40px,导航栏高度88px,标签栏高度98px;

3、各区域图标大小导航栏图标44px,标签栏图标50px;

4、各区域文字大小电量条文字22px,导航栏-文字32px,标签栏字20px;

5、常用的文字大小:32px,30px,28px,26px,24px,22px,20px;

6、常用的颜色:背景浅灰色#f2f2f2,文字深黑色#323232,边框色深灰#CCCCCC;

7、常用可点击区域的高度:88px;

8、单行文字的背景框的高度:88px,双行则为:176px,三行则为:264px;

9、常用间距:亲密距离:20px;疏远距离:30px,其它距离:10px,44px等;

10、按钮和文本框,原型图做成直角的,圆角半径是多少,由Ui来设计;

11、这种情况,需要修改原型。单个页面的逻辑流程图或用户学习使用时间,超过其它页面平均数的3倍以上;

12、以上所有的规范仅供参考,该调整和修改的地方可以调整。具体情况具体分析。


http://chatgpt.dhexx.cn/article/bWOq37jp.shtml

相关文章

video兼容苹果手机

苹果手机播放视频 最近在开发小程序的时候&#xff0c;遇到了一个手机兼容的问题&#xff0c;安卓手机放大视频是自适应的&#xff0c;但苹果手机却乱了&#xff0c;经过百度经验&#xff0c;下面我为大家带来了解决这个问题的方案&#xff1a; <video :src"videourl…

苹果手机怎么修改dns服务器,苹果手机怎么设置DNS iPhone8更改DNS详细图文教程

iPhone8怎么设置DNS呢&#xff1f;有的时候我们会发现iPhone上网速度非常慢&#xff0c;尤其是打开网页简直让人无法接受。对于这种情况可能存在的就是DNS设置不当导致的&#xff0c;那么这个时候我们可以手动设置iPhone8的DNS&#xff0c;从而改善网络连接问题。另外&#xff…

苹果手机更改照片大小kb,苹果手机怎么把图片缩小 怎么用手机把图片缩小

关于如何使用手机把图片缩小到自己需要的大小体积?这是一个比较有含量的技术活了&#xff0c;在不借助任何软件的辅助下&#xff0c;苹果手机就可以做到这一点&#xff0c;具体的操作方法请和小编一起来看看吧。 苹果手机怎么把图片缩小 怎么用手机把图片缩小 首先打开苹果手机…

苹果手机屏幕尺寸_Apple 苹果 iPhone SE2智能手机屏幕测评报告 「Soomal」

Apple 苹果 iPhone SE2智能手机 Apple 苹果 iPhone SE2智能手机 iPhone SE2是苹果今年上半年唯一的手机新品&#xff0c;虽然售价只有3000元左右&#xff0c;却用上了和高端机相同性能的A13仿生处理器&#xff0c;PD快充、无线充电等功能齐备&#xff0c;在中高端市场还是比较有…

苹果手机屏幕尺寸大全

手机屏幕尺寸对于使用的舒适有很大的影响&#xff0c;同时&#xff0c;也有很多人对于苹果手机屏幕尺寸大小有清楚&#xff0c;或者想知道苹果所有手机屏幕尺寸是多少。那么&#xff0c;现在草包网为大家整理汇总苹果手机屏幕尺寸大全&#xff0c;所有iphone123456代屏幕尺寸都…

苹果手机各种尺寸详细表以及iPhoneX、iPhoneXS、iPhoneXR、iPhoneXSMax、iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max、屏幕适配

iPhone设备 物理分辨率是硬件所支持的&#xff0c;逻辑分辨率是软件可以达到的。 如图所示&#xff1a; iPhone5和6的比例是不变的。 iPod设备 iPad设备 所有设备型号官网地址&#xff1a;https://www.theiphonewiki.com/wiki/Models //获得屏幕的宽高 #define kScre…

iPhone 苹果手机尺寸大全

px与pt区别: px就是表示pixel&#xff0c;像素&#xff0c;是屏幕上显示数据的最基本的点&#xff1b;pt就是point&#xff0c;是印刷行业常用单位&#xff0c;等于1/72英寸。 px全称为pixel&#xff0c;是一个点&#xff0c;它不是自然界的长度单位&#xff0c;谁能说出一个“…

苹果手机各种尺寸详细表以及iPhoneX、iPhone 11、iPhone 12、iPhone 13 屏幕适配,状态栏高度问题

iPhone设备 物理分辨率是硬件所支持的&#xff0c;逻辑分辨率是软件可以达到的。 代数设备操作系统逻辑分辨率(point)物理分辨率(pixel)屏幕尺寸(对角线长度)缩放因子iPhone第一代iPhone 2GiOS 1320 x 480480 x 3203.5寸1x第二代iPhone 3iOS 2320 x 480480 x 3203.5寸1x第三代…

服务器测试之CPU

简述CPU测试 在服务器中CPU可谓是整个机台的大脑&#xff0c;重要性可想而知。因此在服务器系统整合测试这一块关于CPU的测试可谓是重中之重&#xff0c;而博主在这里因为篇幅原因&#xff0c;仅仅介绍一些关于CPU性能测试方面的东西&#xff0c;而有关压测以及function测试博…

web服务器性能测试---服务器性能测试实例

WEB性能测试--服务器 目录 一、准备测试环境............................................................................................................1 二、测试步骤...........................................................................................…

测试服务器CPU情况

要查看服务器的CPU情况&#xff0c;你可以使用 TOP 命令结合一些选项来执行相应的测试top 命令&#xff1a;运行 top 命令可以实时监视系统的各个进程和 CPU 使用情况在 top 命令的输出中&#xff0c;有几个重要的指标参数可以帮助你了解系统的 CPU 使用情况和进程信息。以下是…

记录一次较为完整服务器(服务端)性能测试

前言 回顾几年前&#xff0c;做性能测试&#xff0c;尤其是服务器性能测试难度比较大&#xff0c;一是测试人员本身技术不足&#xff0c;二是测试的生态环境 不够完善&#xff08;参考资料少、实用案例少、工具选型少&#xff09;&#xff0c;然而在这两年随着测试环境的生态逐…

服务器带宽测试

服务器带宽&#xff1a;简单地说&#xff0c;就是同一时间段能传输的数据总量&#xff0c;服务器带宽越小那么可容纳数据吞吐量越小&#xff0c;同一时间段可容纳的用户访问量也越少&#xff08;单位时间内从服务器拉取的数据量就越小&#xff09;。服务器带宽越大&#xff0c;…

关于云服务器的测试

目录 安装sysbench0.4.12 安装sysbench1.0 CPU加密运算性能 CPU浮点运算性能 JAVA程序运行时延&#xff08;s&#xff09; Web程序系统平均响应时延/系统吞吐量 CPU(EPS)-CPU每秒执行事件数 内存读取性能(MB/s)-每秒读取内存数据大小 内存写入性能(MB/s)-每秒写入内存数据…

如何测试服务器的速度

服务器好不好&#xff0c;使用起来体验度如何&#xff0c;跟服务器的多项性能有关&#xff1a;硬件配置、带宽大小、带宽线路、运营商都决定了服务器最终使用体验。 现在租一台服务器是非常稀松平常的事情&#xff0c;可以说任何个人只要有需求都可以直接网上租用一台服务器来使…

Quartz

什么是Quartz quartz:石英钟的意思 是一个当今市面上流行的高效的任务调用管理工具 由OpenSymphony开源组织开发 Symphony:交响乐 是java编写的,我们使用费时需要导入依赖即可 为什么需要Quartz 什么是任务调度 所谓任务调用,就是执行某些具体动作的时间计划 最简单的…

Quartz基本使用

&#xff08;一&#xff09;定时任务 在很多情况下任务并非需要立即执行 , 而是需要往后或定期执行 , 这不可能人工去操作 , 所以定时任务就出 现了 使用定时任务的情况 : 每周末凌晨备份数据 触发条件 5 分钟后发送邮件通知 30 分钟未支付取消订单 每 1 小时去拉取数…