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

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

发布时间:2017:11:24 23:35:33 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1413个文字,预计阅读时间4分钟
导语
QQ 音乐团队设计师们做了一些研究工作,从方案对比选型到确定适配方案,都是希望能让产品更好地适配 iPhone X。

  QQ 音乐团队设计师们做了一些研究工作,从方案对比选型到确定适配方案,都是希望能让产品更好地适配 iPhone X。

  本文将与大家详细分享从了解 iPhone X、到适配方案研究、最后方案实施的点点滴滴。

  

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

 

推荐阅读:iPhoneX响应式网页设计

  △ QQ音乐界面

  关于 iPhone X 的信息

  工欲善其事必先利其器——《论语 · 卫灵公》

  在着手构思任何解决方案之前,我们都需要先仔细了解事物的本质。例如 iPhone X 在外形上做了哪些改变、交互手势有哪些不同、它的屏幕多大、分辨率又是多少呢等等。

  1. 屏幕尺寸、分辨率

  追求全面屏的 iPhone X 此次启用 5.8 英寸的超视网膜高清显示屏,458ppi 的屏幕像素密度。

  

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

 

  竖屏时像素分辨率达到了 1125px × 2436px(375pt × 812pt @3x),可以发现 iPhone X 的宽度与原来的 iPhone 7 等 4.7 英寸屏的宽度是一致的,而高度却大了 145pt,长宽比也由原来常见的 16 : 9 变成了 13 : 6。

  

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

 

  2. 顶部传感器

  追求屏幕最大化的过程中,由于现阶段工艺的问题,Apple 采用了一个高度 30pt 的黑色带圆角条来放置扬声器、前置摄像头及各种传感器等,江湖人称 「刘海儿」,这也意味着原页面此处的内容有可能会被遮挡导致显示欠佳,进而影响用户体验,所以此处也是我们适配过程中的一个关注点。

  

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

 

  同时,iPhone X 在不同状态下,顶部的 Status bar 也将是呈现不同的信息内容:

  锁屏状态:左侧为运营商名称,右侧为信号格、电量。

  解锁状态:左侧变为时间信息,右侧同为信号格、电量。

  App 管理(长按桌面 App Icon,App 处于抖动状态):只有右侧显示 「完成」 按钮,用于退出 App 管理。

  

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

 

  3. 虚拟 home 键

  iPhone X 取消了以往的实体圆形 home 键,取而代之的是在屏幕底部一条 134pt × 5pt 的虚拟指示条。

  原来实体 Home 键的单击返回桌面、双击唤起多任务处理、长按启动 Siri 等等基础功能操作,也幻化成了不同的手势操作或新技术替代,具体交互手势将在下节详述。而为了增强手势的操作感,整个虚拟 Home 键也占据了一个高度 34pt 的保留区域。

  

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

 

  而在非特定条件下,这个虚拟指示条无论在横、竖屏中都将是强制性设计元素出现在屏幕底部上,意味着这设计中必须考虑好周围元素与它的兼容,因此,这又是我们适配过程中的另一个关注点。只有在需要获得沉浸式体验(如播放视频、查看图片)时,才会建议开发者可以虚拟指示条 「自动隐藏」功能。

  关于虚拟指示条的样式,很遗憾,只有 Light / Dark 两种模式。既无法满足少女心中的蜜粉指示条,也无法满足儿童眼中的七彩指示条,只能是黑色或白色来尽可能地与周围元素区分开来。

  

 

  4. 交互手势

  由于取消了实体 Home 键,iPhone X 的基础操作也相应做了些改变,比如:

  返回桌面:从底部向上轻扫一下,即可返回桌面。

  多任务处理:从底部向上轻扫,滑至中部停顿一下,可显示所有打开的 app。

  显示控制中心:从屏幕顶部右侧向下轻扫,可打开控制中心 siri:按住侧边按钮,就能向 Siri 提问。

  Apple Pay:连按两下侧边按钮,即可使用 Apple Pay 安全地支付。

  值得一提的是,虚拟指示条及其手势的介入,需要我们在设计阶段涉及到屏幕底部上下滑动的交互要更谨慎的思考测试,避免误操作。

  5. 安全区域

  安全区域,一个熟悉又陌生的词语。

  熟悉是因为在平面设计中,由于印刷裁切过程中的误差,设计师需要给设计稿预留出「出血」 位置,确保设计内容在安全区域中;陌生又是因为在互联网设计中已极少被提及。

  这次,由于 iPhone X 的设计理念与工艺问题,Apple 也引入了「安全区域」 这个概念。

  

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

 

  根据上述顶部传感器、虚拟 home 键的不同要求,Apple 提供了横、竖屏状态下的安全区域视觉规范。

  竖屏:竖屏时候,除去屏幕最顶部往下 44pt,底部往上 34pt 后,中间部分视为安全区域。

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

看了这篇文章的人还看了

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

上一篇:后台系统设计:工作流设计剖析

下一篇:如果把网页设计成这样,你一定喜欢看

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

      统一报价,无隐形消费

    • 金牌服务

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

    • 售后无忧

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

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

    截屏,微信识别二维码

    微信号:13825575516

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

    优化二维码打开微信