锋观点

我要投稿
文章作者头像

98wwccc

2017-09-20 15:17:00

看起来iPhone X的“刘海”没难倒开发者们

  • 威锋客户端

  • 用微博扫我

  iPhone X 的全面屏令人惊艳,内置各种黑科技的上方那戳“刘海”也特别受人关注,由于这个刘海的存在,为 iPhone X 附加一个鲜明属性的同时,也让很多人担心应用和游戏的 UI 设计问题。

  为了实现更为安全的面部识别,iPhone X 正面的全面屏上方有一条刘海,上面集成了红外(深度)摄像头、近距离传感器、环境光传感器、左/上扬声器、麦克风、前置摄像头和一个名为点状投射仪 (Dot projector)的元件。但对于应用开发来说,最苦恼的也是这个刘海。

  如果按照以前 iOS App 的界面设计,这戳刘海在竖屏的时候硬生生把最上方的显示界面给截断,横屏的时候还会挡住一部分画面甚至操作区域,就相当尴尬有木有,当然还有点影响美观。


  不过设计师和开发者们应该不会轻易被 iPhone X 的刘海给难住,他们想出了各种常规的和“非常规”的方法来绕开这个刘海,又或者设计出能够跟刘海相协调的 UI,尽量做到美观统一。

  日前,国内知名 iOS 应用开发商 iDaily 宣布,已于 9 月 16 日上线的全新《iDaily·每日环球视野》3.0 版本成为全球第一个完整支持 iPhone X 全屏幕的新闻杂志应用。

  《iDaily·每日环球视野》是第一个提供超越 3000px 超高清分辨率图片的中文媒体应用,每天由中国最出色的图片编辑独家挑选,为读者奉上最高清晰度的全球视野体验。


  更新后的新版本采用了全新的界面风格,专门针对 iPhone X “刘海”部分特别做了适配。在正常竖屏浏览的时候,“刘海”两侧显示的是时间、网络/Wi-Fi信号、电量信息,而刘海的下面才是应用内容,完全不影响体验,而还有点可爱。

  横屏又是啥效果呢?总不能横屏了也照旧显示时间、电量、网络吧,幸好《iDaily》是以高清大图占主要篇幅的 App,横过来正好刘海在图片的一侧,只遮挡掉一点点,而 UI 设计师正好从刘海处延伸出黑色半透明文字栏,看起来还蛮浑然一体的。


  估计《iDaily》这样的设计就是以后很多应用适配 iPhone X 的常用方案了吧。

  那还有没有别的法子?当然有,刘海虽然很碍事,但不影响我们趁机利用它玩点有意思的事情,比如直接让活动菜单沿着刘海的边边进行“凹凸”运动。这个方法没有尝试去避开刘海,而是用一种趣味性十足的设计来融合硬件和软件本身的特点。


  还有这个滚动条造型,沿着刘海滚出来再滚进去,我觉得这玩意你会忍不住多滚好几遍的。


  当然,实在嫌弃这个刘海的话,也可以用更加简单粗暴一步到位的法子,那就是:自己打码!——不是,自己加黑边。

  给应用界面的刘海位置直接加一条黑边或者做深色渐变处理,完美地把刘海给“藏”起来了。虽然牺牲了一点点屏幕空间,但胜在视觉效果统一,做起来也不那么费事,应该还是会有很多开发者会选择这个办法的,尤其是支持 iPhone X 的游戏以及视频播放应用,想要忽略掉这个存在感十足的刘海,似乎这是实惠的法子了。


  还可以利用这个突出的刘海的醒目位置设计一个菜单呼出键,当菜单从刘海处弹出时,整体看起来就很和谐了。


  应用们适应 iPhone X 的第一步显然还要再摸索摸索,因为苹果给出了适配 iPhone X 竖屏和横屏模式的两种安全区域建议,除了要注意设计的美感,还必须考虑把 App 重要的功能键、TabBar 等需要放在苹果建议的安全区域内,其他的地方用 App 背景页或者状态栏填充。


  按照苹果对 App 的要求,应该不大可能接受那些会被刘海给割裂应用内容、应用整体性的 App,这对开发者来说,难度无疑是提升了,心塞归心塞,适应也还得适应,这个刘海或许能“逼出”开发者们更多的创意,说不定还能提升 App 的吸引力,你觉得呢?
 
锋观点二维码

微信订阅“锋观点”请搜索

公众号:weiphonegd

锋友跟帖
人参与
人跟帖
现在还没有评论,请发表第一个评论吧!
正在加载评论
返回顶部
关闭