谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计。

大家有没有感觉到,最近关于折叠屏的新闻越来越多了。

虽然我周围没见到什么人买折叠屏,但架不住厂商热情高涨啊。

全球各大厂商几乎都在拼命钻研折叠屏手机,而且几乎每发布一款都有技术革新。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

根据面板供应链市场研究机构 DSCC 的数据,2021 年第三季度折叠屏手机迎来了爆发性的销量成长,除了比前一季度增加了 215%,出货量更是达到 260 万台。

虽然这点数据比起全球 2.66 亿的手机总销量来说不算什么,但未来的事情谁又说得准呢?

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

随着折叠屏越来越火,作为一个做过好几年手机 APP 的设计师,我内心隐隐有些不安。如果折叠屏手机真的普及了,恐怕会给 UI 和交互设计带来很大的变化。

到时候,稍微讲究一点的 APP 都要补充很多适配规则,甚至可能需要重新设计布局架构,因为做不做折叠屏的适配,对体验和视觉效果的影响真的很明显。

例如,下图就是 Google Due 为折叠屏做适配的真实案例:

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计 谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

做好适配后,折叠屏看起来酷炫,优势展露无遗。

如果不做适配,折叠屏不但显得毫无优势,你还会觉得中间那条缝十分碍眼。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

为了把折叠屏的优势发挥出来,设计师们可以操心的地方多了去了。苹果现在是没有折叠屏手机,所以想要了解折叠屏适配设计的话,最好是去看看 AndROId 系统—— Google 确实做了一番研究。

最新版的 Material Design 设计系统中,有专门针对折叠屏适配的研究,我今天就以此为基础,给大家捋一捋:

  1. 触摸范围
  2. 页面分割
  3. 铰链
  4. 弹窗

触摸范围

折叠屏的手机屏幕更大,触摸范围肯定也不一样。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

非折叠屏手机以单手操作为主,但是折叠屏手机如果展开,就不可能单手操作了,以双手为主。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

上图来源:Material You

上面三个区域中,3 号区需要手指弯曲较大,1 号区需要手指尽力,2 号区是操作起来最舒适的。

顶部,尤其是中间那一部分,手指很难触达,避免放置常用操作。

页面分割

首先,有的屏幕是原来手机的尺寸,从中间对折的,有的还没有 90° 的状态,要么折叠要么展开。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

这种还比较好办,因为大部分时间都是展开使用,不太需要额外的适配设计。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

比较麻烦的是双屏尺寸的折叠屏,因为这种屏幕会经常使用展开 90° 的桌面模式。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

最简单的适配方式是下图这种单列适配,适合上下翻折,但这种就对桌面模式很不友好。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

这种不太适合左右翻折,否则中间容易看到一条竖直折痕。

如果是左右翻折,最好是考虑这种左右布局了,更大效率地利用 2 倍的屏幕空间。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

但是这种左右布局也会有风险,折叠屏的展开宽度毕竟不及平板设备,也要考虑分成两列之后空间够不够用。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

桌面模式可能是看视频或打字的常用模式,也要考虑如何快速切换布局:

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

铰链

上面那么多模式,已经很让人汗颜,但折叠屏的复杂性还不止如此。因为硬件限制,折叠屏中间都会存在一个铰链。各大厂商都在努力抹平铰链造成的视觉影响,但用久了几乎没有哪家不出现凹痕的。那个小凹痕平时也没什么,但如果图片或文字段落跨越那道铰链,就难保不看出问题。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

退一万步说,就算凹痕小到看不出来,铰链依旧会给交互造成影响。因为铰链上的触感肯定不怎么好,重要的信息和按钮都最好避开那道杠。

更何况,还可能存在铰链处触控问题,甚至屏幕分段的问题。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

弹窗

前面讲了为什么铰链的存在会给 APP 设计造成很大影响,这里就要说影响最大的一个组件了。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

弹窗是不能直接用以前的样式了,否则刚好卡在铰链那个地方。Material You 的解决办法是,让折叠屏的弹窗出现在屏幕一侧。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

哪怕是完全展开状态,也不能把弹窗放在中间,因为你无法确定用户的这个折叠屏,是不是真的无缝。

谷歌是如何做好折叠屏适配的?从4个方面详解折叠屏适配设计

总结

今天这篇文章的内容有没有用,主要还是取决于折叠屏会不会普及。就我个人而言,如果要买折叠屏,估计主要奔着尝鲜去,对用户体验这块其实并没有什么指望。但是以后的事情真不好说,不知道大家怎么看?

作者:体验进阶

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/232476.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚重蔚管理团队
上一篇 2023年3月1日 12:18
下一篇 2023年3月1日 12:19

相关推荐

  • 动效适用於什麽时机和位置

    一般来说需要适用到动效的页面时需要时机的,出现得不妥当的话会直接影响用户体验,尤其是交互体验。因此,首先要即时性。动效式人机交互回馈过程中重要的表现方式,因此必须保证其是快速的,同时还需要明确地表达…

    2022年6月25日
    0113
  • 从视觉产品两方面,分析2022年B端设计的发展趋势 。

    在 2020 年,疫情最为严峻的时候,B 端这一领域得到了前所未有的关注,而那时,身为 B 端用户体验设计师的我,也曾总结过,当时 B 端设计的诸多趋势,比如: 多端需求:即桌面端、平板端、移动端的设计形式 设计中…

    2023年3月1日 SEO操作
    07
  • 5000字干货!五大章节帮你掌握搜索设计。

    本文从搜索的基本属性与特征、搜索入口的样式及应用场景、常见的搜索方式、搜索流程状态解析和辅助模块/元素的妙用5个章节,帮你掌握搜索设计。前言搜索是产品中非常重要的一个功能模块,它通过搜索框给用户提供一…

    2023年3月2日 SEO操作
    03
  • 我来分享如何创建软件,怎么创建游戏软件呢。

    创建软件和游戏软件是一个复杂的过程,需要对编程、设计和用户体验有深入的理解,以下是一些基本步骤和技巧: 1. 确定目标和功能:你需要明确你的软件或游戏的目标是什么,以及它需要实现哪些功能,这将帮助你在设…

    2024年7月17日
    02
  • 进阶技巧!从4个角度教你打磨视觉设计细节。

    随着体验设计的持续发展,行业内各领域的体验设计质量都有了很大的提升,并且各个竞品之间的差距越来越小。而更高的界面细节设计质量不仅是各个大厂产品体验设计的追求,也是我们拉开竞品差距的关键一环。我们平时…

    2023年3月2日 SEO操作
    02
  • 如何制定色彩规范?7个步骤带你走完实战流程。

    物联网产品的色彩运用,一般分为主色、辅助色、功能色和中性色。主色与企业品牌色相关;辅助色主要用于区别分类;功能色就是成功提示、警告提示和错误提示;中性色主要是背景、文字、线条和线框。系统的色彩规范制…

    2023年3月7日 SEO操作
    07
  • 快速提升 UI 设计效果的 6 个小技巧(UI 设计集-11)。

    在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Marc Andrew 的文章梳理了 8 个实用性很强的 UI 效果提升小技巧,是系列文章的十一篇,原文最早发布于 marcandrew.me …

    2023年3月1日 SEO操作
    05
  • 网站设计中页脚设计的技巧和窍门。

    用户通常会到网站设计中的页脚来查找重要信息,例如免责声明,联系方式,相关资源,版权声明等等。网站页脚还为用户提供了一种一致性的感觉,因为用户可以在网站的每个页面底部找到一些信息。因此,网站设计人员应…

    2023年2月22日 SEO操作
    02

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息