补上折叠屏的最后一块拼图 — Mate X 折叠屏 UX 讨论会后记

Mate X 在年初发布时以独特的外折设计给我们留下了很深的印象,它避免了多余的屏幕以及刘海,相对内折大幅减少了机身厚度,为我们带来了折叠屏手机的一种新形态。

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNjI=,g_se,x_0,y_0,t_100

至此 Mate X 硬件的工业设计已经确定,但光是制造出优秀的硬件还不算产品的结束,因为优秀的硬件需要同等级的软件来与之匹配,毕竟我们最本质的需求,是一个能完美呈现软件内容的硬件。

举个例子:硬件像是一辆车,它的目的是将我们带到应用(App)或者服务这个目的地。硬件的好坏决定的,可能是我们在前往目的地过程中是否舒心,速度是不是够快,这也是传统形态智能手机这么多年一直努力的方向 —— 我们之前不断地造着更快的车。

而 Mate X 作为首批上市的折叠屏产品,与传统形态的手机有了很大的差别,如果还要沿用过去的规范,就像给自动挡的车装个离合器,给纯电动的车加上一个假的前脸进气一样不伦不类,所以 Mate X 也是类似的,如果软硬件的配合不和谐,某种意义上也相当于是对折叠屏硬件的一种浪费。

作为首批折叠屏形态的产品,对于 Mate X 和华为来说,其实既是挑战也是机遇。

因为折叠屏产品的 UX(用户体验)设计是前无古人的,Mate X 需要完完全全开辟一条新的道路,而机遇则是如果 Mate X 抓住了这一次机会,建立了一套完善、直观、高效的设计语言,那么就像 5G 一样,华为就能成为折叠屏 UX 规范和标准的制订者,掌控最高的话语权。

对于期待着能第一时间购买 Mate X普通消费者来说,这意味着大家是否能在收到产品的第一时间得到完善的折叠屏体验,以及后期诸多的 App 是否能很快跟进适配,最大化利用手中独特的硬件去提供全新的软件体验。如果只是单纯的等比例放大,那么折叠也就失去了它的意义。


因此,如何制定出一套优秀的折叠屏 UX 设计规范,就成了 Mate X 上市之前需要补齐的最后一块拼图。

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNjI=,g_se,x_0,y_0,t_100

从硬件上来看,Mate X 这样折叠屏手机最常用的有两个状态,折叠状态和展开状态,两种状态下有着不同的显示面积,显示比例,以及不同的握持姿势

这其中有一个典型的思维误区,有的人会想,既然折叠在展开之后是大屏,那么直接简单地套用平板上的设计就好,但究其根本,折叠设计之所以吸引人,最大的原因就在于可自由变化形态。


  • Mate X 展开后的大屏幕为 8 英寸,2480*2200 分辨率,长宽比为 8:7.1
  • 折叠时的主屏幕为 6.6 英寸,2480*1148 分辨率,长宽比为 19.5:9
  • 折叠时的背面屏为 6.38 英寸,2480*892 分辨率,长宽比为 25:9


不论是软件或者硬件意义上,折叠屏手机的折叠态和展开态都是可以随时切换的,在切换前后的体验需要有连贯性,所以展开之后的 UX 若直接照搬为平板的设计,显然太过生硬。折叠屏 UX 设计主要面临的应该是以下两大问题:


  • 从折叠时的细长屏幕切换到展开之后接近正方形的大屏幕,该怎么让两种屏幕显示的内容恰到好处,看起来统一和谐。
  • 在展开屏幕之后,我们很难用单手操作,如何选择交互按钮的位置和操作方式,保证用起来顺手且符合直觉。


而 UX 的设计,需要多方的共同努力:


  • 华为作为终端设备制造商,提供底层的设计规范和解决方案
  • App 开发者与设计师根据底层规范,参考自身用户需求来进行具体设计


因此在 7月 11 日,也是华为开发者大会的前一个月,华为发起了一次《折叠屏 UX 设计规范征求意见 & 绿盟折叠屏创新工作筹备》预沟通会的讨论,

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNjI=,g_se,x_0,y_0,t_100

有了华为的组织,绿盟成员的响应,可以说是为折叠屏 UX 设计规范的建立打下了牢固的基础。为什么这么说呢?

绿盟的全称是软件绿色联盟。由华为、阿里巴巴、百度、腾讯、网易五家企业联合发起,同时集结了软件与硬件行业的龙头,在2016年建立,旨在打造安全、可靠、健康的安卓应用生态体系,到 2019 年绿盟已拥有1000多家会员企业,覆盖了几乎所有我们日常使用的 App 与服务。

因此,在华为的带头和绿盟的参与之下,这可能就是国内,甚至整个 Android生态之中,制定折叠屏 UX 标准和规范的最佳阵容。



针对折叠屏 UX, 我们可以怎么做?

在讨论的过程中,华为与来自 BAT, 携程、微博等头部互联网公司的设计师们提出了几种可能适合的布局方式,以及很多有意思的观点:

首先,由折叠屏硬件带来的优势,就是显示区域的增加,这也就意味着我们能在同样的时间内展现出更多的信息。由此,折叠屏 UX 的布局设计可以被分为两个方向:单一层级显示展示更多内容 & 多层级同时显示减少点击路径。几个月之后,你买到 Mate X 上运行的 App, 几乎都在这几类之中,让我们从这两个大类来具体看看。

一、缩放布局:

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNDI=,g_se,x_0,y_0,t_100

最基础的布局之一,简单易懂、轻松易用,主要适用于展现固定内容的界面,因为它保证了打开折叠屏之后最佳视觉效果,例如对于图片或者视频进行等比放大,就能充分利用更大的显示区域。

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNjI=,g_se,x_0,y_0,t_100

二、拉伸(延伸)布局

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNDI=,g_se,x_0,y_0,t_100

拉伸布局不会改变界面的元素和基本结构,元素组合根据元素间区域进行动态等距拉伸,或者根据屏幕宽度增加的量,在横向增加单行显示元素,这样的布局很可能不需要额外适配,因为有很多 App 为了适应不同的手机宽度,已经采用了这种设计。

三、响应式布局:

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNDE=,g_se,x_0,y_0,t_100

很适合呈现扁平架构的入口界面,比如 App 的最顶层分类导航界面,通过给额外的显示区域填充之前无法显示的内容,就能很好的起到扩展显示更多信息的作用。​

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNjI=,g_se,x_0,y_0,t_100

在这也可以说句题外话,因为前三种布局并非专为折叠屏而生,所以早就大量应用在目前的 App 之中,其实就算没有专门适配,我们也不需要担心第一批买到 Mate X 时,App 会出现大量的不兼容,显示错乱现象。

接下来我们还有多层级同时显示减少点击路径的方式。

四、分栏布局:

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNjI=,g_se,x_0,y_0,t_100

现代 App 的交互都离不开层级,但层级多了就会带来一个很严重的,那就是层级过多无法快速进入目标层,以及切换时需要前后跳转多次。

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfMzg=,g_se,x_0,y_0,t_100

利用分栏布局,可以同时展示两层内容,左右两侧为父子关系,两边可以同时滚动浏览,也可以通过点击父级来快速切换。这样就解决了快速跳转切换、还有持续显示形内容的需求,比如左边持续浏览商品详情,右边点开客服聊天界面,一边看一边问,省去了大量的跳转时间。

除了典型的分栏布局之外,其实分栏布局还有更多异曲同工的扩展。

watermark,image_bG9nby9jc2RuXzEucG5nP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLGhfNjI=,g_se,x_0,y_0,t_100

​比如在看视频的时候,除了叠加显示弹幕和评论之外,折叠屏展开之后就能在不影响画面的前提下同时查看弹幕和评论,并且也能一边看画面一边打字发送信息,得到完全流畅的体验。


尾声:

相对于往常国内厂商仅仅注重硬件而忽视软件的常态,这次华为在 Mate X 身上不仅投入了相当的人力物力,在硬件上首批让折叠屏手机概念变为现实,同时也在软件上作为终端厂商的代表牵头,与 BAT 等其他软件和服务提供商一同探讨各自的理解并且建立折叠屏 UX 的标准。

并且这些讨论,并非形式化地走过场或者纸上谈兵,而是非常具体地针对不同类型的 App 逐一进行实际地分析。不仅总结出了如何利用折叠屏硬件这样整体方向性地思路,而且还具体提出了几种布局方式,以及安卓的栅格布局系统如何应用在折叠屏环境中。


  • 对于华为,这是又一次在全新领域主导标准的最佳机遇。
  • 对于开发者,这能避免纷乱的交互逻辑和重复造轮子的资源浪费。
  • 对于用户,这意味着买到的不仅仅是超前的硬件,还有能与之完美搭配的软件体验。


下个月的华为开发者大会里,折叠屏 UX 规范的更多信息将会第一次公布,我们到时候见。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值