iPhone - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享12项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

作品集指导

优设设计专家语音在线指导

开通VIP

领取更多设计师实用特权

投稿

iPhone 《可能是最全面的 iPhone 设计指南》

9 篇文章 484673 位观众

不会适配 iPhone 的设计师不是好设计师，本专题既有 iPhone 的交互方式分析，也有 iPhone 适配指南，更有超多适配案例经验分享。学会收藏，适配不难！

2022/07/28更新

收藏 114

正序倒序

iPhone 12来了，设计师们如何提前做好适配？

iPhone 12来了，设计师们如何提前做好适配？

随着iPhone12的到来，屏幕尺寸越来越碎片化，也越来越难记，这里面有2个关键点需要大家掌握。

彩云Sky 2.0w 人阅读 2020/06/29 iPhone 12 UI适配

1

三分钟搞懂，iPhone 12发布后的设计尺寸调整

三分钟搞懂，iPhone 12发布后的设计尺寸调整

本文从手机的基本参数、两种适配、新iPhone的影响、基准的演变等多方面，帮你快速了解iPhone 12的设计适配。

土拨鼠 6.0w 人阅读 2020/12/09 iPhone 12 设计尺寸

2

规范分析谷歌设计师：如何评价新版 iPhone X 的设计规范？

谷歌设计师：如何评价新版 iPhone X 的设计规范？

Riceman：发布会谢幕了，媒体们也发完了新闻稿，朋友圈也热闹过了，接下来的工作该轮到设计师了。iPhone X 11月才发货，但你也许已经接到做适配设计的任务了。在这之前，让我们先来看看这个 iPhone X，对 UI 设计师的日常工作有什么影响。

程远 3.9w 人阅读 2017/09/18 iOS 11 iPhone X

3

交互分析取消了Home键的 iPhone X，交互方式都有哪些变化？

取消了Home键的 iPhone X，交互方式都有哪些变化？

@__WATERS ：iPhone X 作为一台全面屏的设备，和上一代的 iPhone 7 还是有着很大的区别，这些区别不仅体现在材质和工业设计上，在界面交互上也有一些差异。iPhone X 的显示屏所能显示的内容和 4.7 英寸的 iPhone 7 一样「宽」（同为 375pt），但在高度方面就比原先多出了 145 pt ，再加上 iPhone X 去掉了最为标志性的 Home 键，这两点直接导致的就是界面的布局和交互会发生相应的变化。△ 图 / Apple接下来我们来看看在 iPhone X 上...

程远 17.0w 人阅读 2017/09/18 iOS 11 iPhone X

4

适配基础 iPhone X适配没那么复杂，但也不是看上去这么简单

iPhone X适配没那么复杂，但也不是看上去这么简单

iPhone X 搭载了超大，高清晰度，大圆角，无边框的显示屏，又一次刷新了我们对内容优先的沉浸式体验的认识。——翻译自《Human Interface Guiidelines》屏幕尺寸我们熟知的iPhone系列开发尺寸概要如下：△ iPhone各机型的开发尺寸转化成我们熟知的像素尺寸：△ 每个机型的多维度尺寸倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：《基础知识学起来！

程远 4.5w 人阅读 2017/09/22 iPhone X 经验分享

5

适配方法动手试试！手把手教你如何适配 iPhone X

动手试试！手把手教你如何适配 iPhone X

编者按：基于很多文章都只是翻译了官方的原文，并没有加入自己的想法和见解，所以我决定自己试着适配 iPhone X，如果出现了失误或者问题，请多指教。毕竟写文章的初衷是为了跟大家一起进步和探讨呢~熟悉 iPhone X这里用 iPhone 6 举例子是因为大部分设计师都用 iPhone 6 来做设计稿，方便大家理解，其实 iPhone 8也是这个分辨率。iPhone 6 ：750×1334px（375×667px @2x）iPhone X ：1125×2436px (375×812px @3x)在逻辑...

程远 5.7w 人阅读 2017/09/27 iPhone X 经验分享

6

适配技巧腾讯设计师：极速适配 iPhone X 的技巧揭秘！

腾讯设计师：极速适配 iPhone X 的技巧揭秘！

有什么方法可以极速适配iPhone X ？今天这篇好文腾讯设计师以QQ空间H5的项目为例，给大家分享最快的适配方法！一. iPhone X适配方案2017年9月苹果发布了iPhone X机型，对于它的「刘海儿」和底部Home Indicator，QQ空间H5也在第一时间做了兼容适配。

程远 2.2w 人阅读 2018/01/14 H5页面 iPhone X

7

实战案例如何适配iPhone X？来看QQ 音乐这个实战案例复盘总结

如何适配iPhone X？来看QQ 音乐这个实战案例复盘总结

编者按：QQ 音乐团队设计师们做了一些研究工作，从方案对比选型到确定适配方案，都是希望能让产品更好地适配 iPhone X。本文将与大家详细分享从了解 iPhone X、到适配方案研究、最后方案实施的点点滴滴。△ QQ音乐界面关于 iPhone X 的信息工欲善其事必先利其器——《论语 · 卫灵公》在着手构思任何解决方案之前，我们都需要先仔细了解事物的本质。

程远 2.6w 人阅读 2017/11/21 iPhone X 经验分享

8

实战案例 H5页面如何适配iPhone X ？腾讯设计师给出了通用解决方案！

H5页面如何适配iPhone X ？腾讯设计师给出了通用解决方案！

编者按：腾讯的设计师用王者荣耀的H5 页面案例，帮你学会给iPhone X 做适配。腾讯ISUX ：目前的 H5 页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下：一. 通栏页面顶部通栏某些业务的一级页面多数使用了顶部通栏 banner 的效果，由于 iPhone X 在状态栏增加了24px的高度，对于现在通栏 banner 规范的内容区域会有遮挡情况。解决方案：对于通栏页面在页面顶部增加一层高度44px的黑色适配层，整个页面往下挪44px。

程远 4.4w 人阅读 2017/11/08 H5页面 iPhone X

9

本专题已完结，还有72个系列专题

收藏本专题 114 查看更多专题

发评论！每天赢奖品

点击登录后，在评论区留言，系统会随机派送奖品

2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助联系我们

本期奖品

商业海报设计高效提案指导手册

已累计诞生 292 位幸运星

查看获奖名单

发表评论

{{ moreBtnTxt }}

以上留言仅代表用户个人观点，不代表优设立场

评论就这些咯，让大家也知道你的独特见解立即评论

大家都在看

免费图库

35篇文章

设计流程

33篇文章

智能电视设计

9篇文章

车载设计

21篇文章

海报设计

19篇文章

作品集设计

29篇文章

企业出海设计

11篇文章

手机摄影

24篇文章

大厂实战案例复盘

13篇文章

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：扫码添加

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注

优优教程网

优设大课堂

设计师导航

优设训练营