观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户

"\u003Cdiv\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fe2371e9922474596804afc835f0d27ab\" img_width=\"942\" img_height=\"385\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EMate X在年初发布时以独特的外折设计给我们留下了很深的印象，它避免了多余的屏幕以及刘海，相对内折大幅减少了机身厚度，为我们带来了折叠屏手机的一种新形态。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Ff7e5a2622f3b4abf8323e82b904f4f13\" img_width=\"1444\" img_height=\"1080\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E至此 Mate X 硬件的工业设计已经确定，\u003Cstrong\u003E但光是制造出优秀的硬件还不算产品的结束，因为优秀的硬件需要同等级的软件来与之匹配，\u003C\u002Fstrong\u003E毕竟我们最本质的需求，是一个能完美呈现软件内容的硬件。\u003C\u002Fp\u003E\u003Cp\u003E举个例子：硬件像是一辆车，它的目的是将我们带到应用（App）或者服务这个目的地。硬件的好坏决定的，可能是我们在前往目的地过程中是否舒心，速度是不是够快，这也是传统形态智能手机这么多年一直努力的方向 —— 我们之前不断地造着更快的车。\u003C\u002Fp\u003E\u003Cp\u003E而 Mate X 作为首批上市的折叠屏产品，与传统形态的手机有了很大的差别，如果还要沿用过去的规范，就像给自动挡的车装个离合器，给纯电动的车加上一个假的前脸进气一样不伦不类，所以 Mate X 也是类似的，如果软硬件的配合不和谐，某种意义上也相当于是对折叠屏硬件的一种浪费。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E作为首批折叠屏形态的产品，对于 Mate X 和华为来说，其实既是挑战也是机遇。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E因为折叠屏产品的 UX（用户体验）设计是前无古人的，Mate X 需要完完全全开辟一条新的道路，而机遇则是如果 Mate X 抓住了这一次机会，建立了一套完善、直观、高效的设计语言，那么就像 5G 一样，华为就能成为折叠屏 UX 规范和标准的制订者，掌控最高的话语权。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E对于期待着能第一时间购买 Mate X普通消费者来说\u003C\u002Fstrong\u003E，这意味着大家是否能在收到产品的第一时间得到完善的折叠屏体验，以及后期诸多的 App 是否能很快跟进适配，最大化利用手中独特的硬件去提供全新的软件体验。如果只是单纯的等比例放大，那么折叠也就失去了它的意义。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F7c88d9c294a0448e81f394ae2bc2958f\" img_width=\"640\" img_height=\"69\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E因此，如何制定出一套优秀的折叠屏 UX 设计规范，就成了 Mate X 上市之前需要补齐的最后一块拼图。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Ff8ef0c83d1be40aba10c60dec7923424\" img_width=\"1268\" img_height=\"824\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E从硬件上来看，Mate X 这样折叠屏手机最常用的有两个状态，折叠状态和展开状态，\u003Cstrong\u003E两种状态下有着不同的显示面积，显示比例，以及不同的握持姿势\u003C\u002Fstrong\u003E。\u003C\u002Fp\u003E\u003Cp\u003E这其中有一个典型的思维误区，有的人会想，既然折叠在展开之后是大屏，那么直接简单地套用平板上的设计就好，但究其根本，\u003Cstrong\u003E折叠设计之所以吸引人，最大的原因就在于可自由变化形态。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cstrong\u003EMate X 展开后的大屏幕为 8 英寸，2480*2200 分辨率，长宽比为 8:7.1\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003E折叠时的主屏幕为 6.6 英寸，2480*1148 分辨率，长宽比为 19.5:9\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003E折叠时的背面屏为 6.38 英寸，2480*892 分辨率，长宽比为 25:9\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E不论是软件或者硬件意义上，\u003Cstrong\u003E折叠屏手机的折叠态和展开态都是可以随时切换的，在切换前后的体验需要有连贯性\u003C\u002Fstrong\u003E，所以展开之后的 UX 若直接照搬为平板的设计，显然太过生硬。折叠屏 UX 设计主要面临的应该是以下两大问题：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cstrong\u003E从折叠时的细长屏幕切换到展开之后接近正方形的大屏幕，该怎么让两种屏幕显示的内容恰到好处，看起来统一和谐。\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003E在展开屏幕之后，我们很难用单手操作，如何选择交互按钮的位置和操作方式，保证用起来顺手且符合直觉。\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E\u003Cstrong\u003E而 UX 的设计，需要多方的共同努力：\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cstrong\u003E华为作为终端设备制造商，提供底层的设计规范和解决方案\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003EApp 开发者与设计师根据底层规范，参考自身用户需求来进行具体设计\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E因此在 7月 11 日，也是华为开发者大会的前一个月，\u003Cstrong\u003E华为发起了一次《折叠屏 UX 设计规范征求意见 & 绿盟折叠屏创新工作筹备》预沟通会的讨论\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Ff241053896b4401bab570420051d79fb\" img_width=\"1269\" img_height=\"846\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E有了华为的组织，绿盟成员的响应，可以说是为折叠屏 UX 设计规范的建立打下了牢固的基础。\u003C\u002Fstrong\u003E为什么这么说呢？\u003C\u002Fp\u003E\u003Cp\u003E绿盟的全称是软件绿色联盟。由华为、阿里巴巴、百度、腾讯、网易五家企业联合发起，同时集结了软件与硬件行业的龙头，在2016年建立，旨在打造安全、可靠、健康的安卓应用生态体系，到 2019 年绿盟已拥有1000多家会员企业，覆盖了几乎所有我们日常使用的 App 与服务。\u003C\u002Fp\u003E\u003Cp\u003E绿盟之前最成功，或者说对国内 Android 生态影响最大的一次议题，就是建立了统一，稳定且易用的推送公约和服务。Android 在中国早期的体验不良，很大程度是因为 Google 的 GCM（Google Cloud Message）由于客观原因限制无法在中国使用，各大应用和服务厂商不得不采用野蛮地的方式保证自身服务的正常使用，手段就是给每一个 App 加入相互唤醒，想尽一切方法让自己的 App 在 Android 手机的内存里顽强存活，这样的恶果就是永无止尽的资源浪费和卡顿。\u003C\u002Fp\u003E\u003Cp\u003E后来，通过绿盟的公约，我们有了稳定的推送服务，各大 App 厂商终于不需要为了在 Android 的后台中留存而相互斗争，Android 用户的手机更加轻快不需要频繁清理后台也能得到准确快速的推送服务。\u003C\u002Fp\u003E\u003Cp\u003E因此，在华为的带头和绿盟的参与之下，这可能就是国内，甚至整个 Android生态之中，制定折叠屏 UX 标准和规范的最佳阵容。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F7c88d9c294a0448e81f394ae2bc2958f\" img_width=\"640\" img_height=\"69\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Ch1\u003E\u003Cstrong\u003E针对折叠屏 UX, 我们可以怎么做？\u003C\u002Fstrong\u003E\u003C\u002Fh1\u003E\u003Cp\u003E在讨论的过程中，华为与来自 BAT, 携程、微博等头部互联网公司的设计师们提出了几种可能适合的布局方式，以及很多有意思的观点：\u003C\u002Fp\u003E\u003Cp\u003E首先，由折叠屏硬件带来的优势，就是显示区域的增加，这也就意味着我们能在同样的时间内展现出更多的信息。由此，\u003Cstrong\u003E折叠屏 UX 的布局设计可以被分为两个方向：单一层级显示展示更多内容 & 多层级同时显示减少点击路径。\u003C\u002Fstrong\u003E几个月之后，你买到 Mate X 上运行的 App, 几乎都在这几类之中，让我们从这两个大类来具体看看。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E一、缩放布局：\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F3b513126924d4d6cbc31585b4bb84376\" img_width=\"480\" img_height=\"553\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E最基础的布局之一，简单易懂、轻松易用，主要适用于展现固定内容的界面，因为它保证了打开折叠屏之后最佳视觉效果，例如对于图片或者视频进行等比放大，就能充分利用更大的显示区域。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F1de51b4525aa46c18d4813559b87df8e\" img_width=\"1267\" img_height=\"780\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E二、拉伸（延伸）布局\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F73966b5087e6400485977121fcfdb126\" img_width=\"480\" img_height=\"547\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E拉伸布局不会改变界面的元素和基本结构，元素组合根据元素间区域进行动态等距拉伸，或者根据屏幕宽度增加的量，在横向增加单行显示元素，这样的布局很可能不需要额外适配，因为有很多 App 为了适应不同的手机宽度，已经采用了这种设计。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E三、响应式布局\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E​\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F755479ae9cf245978380ec269aaaa41b\" img_width=\"475\" img_height=\"541\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E很适合呈现扁平架构的入口界面，比如 App 的最顶层分类导航界面，通过给额外的显示区域填充之前无法显示的内容，就能很好的起到扩展显示更多信息的作用。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F206fd77ecf2b4d869012f09f4ea5dece\" img_width=\"1267\" img_height=\"845\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E在这也可以说句题外话，因为前三种布局并非专为折叠屏而生，所以早就大量应用在目前的 App 之中，\u003Cstrong\u003E其实就算没有专门适配，我们也不需要担心第一批买到 Mate X 时，App 会出现大量的不兼容，显示错乱现象。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E接下来我们还有多层级同时显示减少点击路径的方式。\u003C\u002Fp\u003E\u003Cp\u003E四、分栏布局\u003C\u002Fp\u003E\u003Cp\u003E​\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F687288c7c5104fc9ad7c27ba1a6bdc8a\" img_width=\"870\" img_height=\"667\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E现代 App 的交互都离不开层级，但层级多了就会带来一个很严重的，那就是层级过多无法快速进入目标层，以及切换时需要前后跳转多次。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fe54c078873f74c44bbb10c69bcffa5e0\" img_width=\"442\" img_height=\"498\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E利用分栏布局，可以同时展示两层内容，左右两侧为父子关系，两边可以同时滚动浏览，也可以通过点击父级来快速切换。这样就解决了快速跳转切换、还有持续显示形内容的需求，比如左边持续浏览商品详情，右边点开客服聊天界面，一边看一边问，省去了大量的跳转时间。\u003C\u002Fp\u003E\u003Cp\u003E除了典型的分栏布局之外，其实分栏布局还有更多异曲同工的扩展。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F69b314fdf8ce4063be03ca6f073e9df4\" img_width=\"761\" img_height=\"747\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E比如在看视频的时候，除了叠加显示弹幕和评论之外，折叠屏展开之后就能在不影响画面的前提下同时查看弹幕和评论，并且也能一边看画面一边打字发送信息，得到完全流畅的体验。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F7c88d9c294a0448e81f394ae2bc2958f\" img_width=\"640\" img_height=\"69\" alt=\"观察 | 折叠屏说到就到，需要做好准备的不仅仅是用户\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Ch1\u003E\u003Cstrong\u003E尾声：\u003C\u002Fstrong\u003E\u003C\u002Fh1\u003E\u003Cp\u003E相对于往常国内厂商仅仅注重硬件而忽视软件的常态，这次华为在 Mate X 身上不仅投入了相当的人力物力，在硬件上首批让折叠屏手机概念变为现实，同时也在软件上作为终端厂商的代表牵头，与 BAT 等其他软件和服务提供商一同探讨各自的理解并且建立折叠屏 UX 的标准。\u003C\u002Fp\u003E\u003Cp\u003E并且这些讨论，并非形式化地走过场或者纸上谈兵，而是非常具体地针对不同类型的 App 逐一进行实际地分析。不仅总结出了如何利用折叠屏硬件这样整体方向性地思路，而且还具体提出了几种布局方式，以及安卓的栅格布局系统如何应用在折叠屏环境中。\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Cstrong\u003E对于华为，这是又一次在全新领域主导标准的最佳机遇。\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003E对于开发者，这能避免纷乱的交互逻辑和重复造轮子的资源浪费。\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Cstrong\u003E对于用户，这意味着买到的不仅仅是超前的硬件，还有能与之完美搭配的软件体验。\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E下个月的华为开发者大会里，折叠屏 UX 规范的更多信息将会第一次公布，我们到时候见。\u003C\u002Fp\u003E\u003Cp\u003EMobile Device Talks 泛科技的炉边谈话\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E"

文章来源: https://www.toutiao.com/group/6715407406899134984/