推广

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

iseeyu3年前 (2023-12-12)推广149

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

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

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

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

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

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

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

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

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

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

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

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

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

触摸范围

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

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

上图来源:Material You

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

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

页面分割

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

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

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

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

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

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

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

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

铰链

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

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

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

弹窗

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

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

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

总结

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

作者:体验进阶

扫描二维码推送至手机访问。

版权声明:本文由西安泽虎代运营发布,如需转载请注明出处。

转载请注明出处https://www.0291.com.cn/post/117318.html

相关文章

天猫618店铺满减不生效规则有哪些(618怎么没有跨店满减)

天猫618店铺满减不生效规则有哪些(618怎么没有跨店满减)

2021年报名618活动且设置了跨店满减的天猫商家,在618活动期间(5月29日00:00:00至6月20日23:59:59)店铺宝满减(含自选商品活动和全店商品活)、isv第三方服务商开发的营销工具设置的店铺级优惠都会失效。...

分享seo外链有哪些发布技巧。

分享seo外链有哪些发布技巧。

网站外链是关键词排名的关键因素,是做seo不可或缺的一环,做网站外部链接的方式有很多,找准适合自己的。怎么为网站建设合适的外链?有以下方法。 注意,人工干预的,自然增长的链接最为有效。从人工干预的角度讲,我们要把握锚文本链接,超级链接,白链接的占比,要把握主要锚文本和次要锚文本的占比;从自然...

教你网站设计布局如何排版才具有吸引力。

教你网站设计布局如何排版才具有吸引力。

网站是企业在互联网上的窗口。网站建设的目的是吸引用户到达宣传企业作用。那么什么样的网站布局能吸引人呢?编辑的意见,在这里,希望能够帮助你。 用户搜索关键词来访问具有特定目的的网站。他们访问这个网站来解决他们的需求和问题。例如,有人搜索“网站建设”。那么他们的目的一定是了解企业网站的建设,...

分享静静的秋夜

分享静静的秋夜周 波立秋过树影轻轻搖曳摇着蝉儿安歇月儿扯住云雾悄悄隐却不知疲倦的小溪弹着琴儿奔向原野芦苇白青草眠分享在静静的秋夜立秋过水田停息蛙鼓露珠爬上金叶星星眨着眼睛明明灭灭那爱贪玩的流萤提着灯笼欢快穿越果压枝稻满田收获在甜甜的热烈免责声明:本公众号所发布的信息均出于公...

淘宝账号代码(科普 淘宝的代码)

淘宝账号代码(科普 淘宝的代码)

有谁知道淘代码是什么意思啊? 1、由浙江报业集团与阿里巴巴合资成立的《淘宝天下》杂志创刊。从第14期开始,《淘宝天下》杂志上开始出现由几个字母加上一串数字组成的代码,《淘宝天下》称其为“淘代码”。每一串“淘代码”都指向淘宝网上的某一款产品。 2、我的店铺淘代码是:T018833 大家可以在淘...

新建网站想要高排名应该怎么做。

新建网站想要高排名应该怎么做。

如何操作新网站?首先,关键词挖掘、结构优化、数据分析、原创内容、添加外部链接、检查死链等操作。在这些方向上做很容易。我相信站长们都能做得很好,但是很少有人真正重视这些点,因为网站运营是一个循序渐进的过程。这对耐心的考验是非同寻常的,你需要有足够的判断力,耐心和努力工作,这样你才能做好网站的运营。...

现在,非常期待与您的又一次邂逅

我们努力让每一部企业宣传片和抖音短视频成为商业大片