欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

如何适配iPhone X?来看滴滴出行的实战案例复盘!

发布时间:2017:12:06 14:10:43 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1532个文字,预计阅读时间4分钟
导语
iPhone X 上市已经有一段时间了,不知道使用 iPhone X 的小伙伴是否已经习惯了 iOS 11 操作系统和 iPhone X 手机特有的操作体验。

  iPhone X 上市已经有一段时间了,不知道使用 iPhone X 的小伙伴是否已经习惯了 iOS 11 操作系统和 iPhone X 手机特有的操作体验。

  

如何适配iPhone X?来看滴滴出行的实战案例复盘!

 

  滴滴出行在 iPhone X 发售前就针对其操作特性进行了界面适配,保障了 iPhone X 用户的全面屏操作。现在 iPhone X 的适配结果已经得到了良好的用户反馈,由此我们梳理了移动端界面 iPhone X 的适配方案,并从整个适配过程中探索到万变不离其宗的适配方法,为后续不断更新的多尺寸屏幕提供更好更快的适配思路。

推荐阅读:连iPhone X 都有!一秒生成网站/App展示模板图的在线神器

  整篇文章分四个章节

  iPhone X 系统特性

  界面常用元素适配方案

  「去边界化」设计

  「去边界化」设计的应用

  iPhone X 操作特性

  iPhone X 是苹果公司十周年推出的重点产品,无论外观还是技术都有着革命性的创新。让我们先来回顾下 iPhone X 在界面使用体验上都有哪些操作特性。

  如果你对 iPhone X 还不够了解,可以看看这些 :

  《优设首发!iPhone X 官方人机交互指南中文版》

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

  《取消了Home键的 iPhone X,交互方式都有哪些变化?》

  1. 屏幕变长

  因大部分设计师都用 iPhone 8 来做设计稿,所以我们用 iPhone 8 与 iPhone X 做对比。

  iPhone 6、iPhone 6s、iPhone 7 与 iPhone 8 屏幕分辨率一致。

  iPhone X 使用了 5.8 英寸高分辨率、大圆角显示屏。iPhone X 与 iPhone 8 的显示屏宽度一致都是 375pt ,高度上 iPhone X 高出 145pt,可以在垂直空间多展示约 20% 的画面。

  iPhone X 的屏幕分辨率和 iPhone 8 Plus 等相同,使用 @3x 的图像,界面内容由手机硬件遮罩成带圆角和传感器(顶部齐刘海)的形状。所以界面设计时 iPhone X 和 iPhone 8 的设计宽度可以通用 375pt,而实际 iPhone X 的屏幕像素为 375pt×812pt (1125×2436px),且切图使用 @3x 图片。

  

如何适配iPhone X?来看滴滴出行的实战案例复盘!

 

  乔布斯曾说,手持设备最理想的屏幕尺寸是3.5寸,这是因为单手操作时3.5寸屏幕基本能做到大拇指无障碍全覆盖。但随着人们对手机功能多样化的需求,主流屏幕远大于3.5寸。

  iPhone X 是 5.8 寸,屏幕已经超越了绝大多数用户的拇指覆盖范围,这就导致左上和右下角的单手操作不够方便。很多基于 F 型流动视线设计的 App,通常会将重要的功能入口置于左上角,在 iPhone X 上,视线优先和拇指操作未必可以同时满足,这就要求设计师们对操作盲区的功能进行多重考量,评估是否要针对 iPhone X 做出位置调整。

  

如何适配iPhone X?来看滴滴出行的实战案例复盘!

 

  2. 异形状态栏(齐刘海)

  iPhone 8 屏幕状态栏高 20pt,iPhone X 状态栏高 44pt 并有齐刘海形状遮罩。状态栏位置显示的信息,在 iPhone X 上受齐刘海遮罩影响,需要特殊考虑展示效果,甚至重新设计信息展示方式避让状态栏,以便保持各屏幕展示效果的统一。

  苹果官方不建议采用隐藏或遮挡状态栏的设计,相对 iPhone 8 ,iPhone X 有更高的纵向显示空间足够展示更多的内容,且状态栏显示了对用户有用的信息,除非隐藏状态栏能带来更大的收益,否则还是建议保留。

  3. 增加主屏幕指示条

  iPhone X 屏幕最底部设置了主屏幕指示条,用户可从屏幕底端使用滑动手势进入主屏幕或切换应用。这些系统的全局操作会优先于App应用的操作。在设计用户沉浸式的产品如视频、游戏时,可以适当的隐藏主屏幕指示条。

  主屏幕指示条下方的内容仍是可点击操作的,但要避免在屏幕最底部设置重要操作内容,且要避免使用与指示条相冲突的操作手势。主屏幕指示条只有黑白两种颜色,会根据指示条底部背景自动切换。

  

如何适配iPhone X?来看滴滴出行的实战案例复盘!

 

  4. 设置安全区

  从 iOS 11 开始,苹果引入了安全区域的概念。在 iPhone 8 等屏幕上,安全区域默认是除了状态栏以外的屏幕范围。在 iPhone X 上,安全区域默认是除去顶部状态栏以及底部主屏幕指示条周边的范围。

  遵照系统安全区的概念进行设计和开发,大多数使用系统标准UI元素(如导航栏、表单、内容集)的应用程序会自动适应设备的新外形,不需手动调整,这样会大量节省开发人员的工作量。所以在这里提倡大家遵照系统提倡的方式进行开发布局,不仅方便 iPhone X 的适配工作,也方便后续 iOS 系统更新以及界面元素的自动匹配。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:重新定义筑集采平台用户体验

下一篇:用户体验设计的科学方法

  • 18899 文章总数
  • 2333207访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信