Ucan 公开课｜柔性屏下的体验设计创新

前言

我们回顾一下每天在哪件事上花最多时间？相信很多人的答案是看手机。我们每天看手机、电视等等各类屏幕，其实是不断获取新的信息内容。是否还记得第一款iPhone手机发布的时候，手机只有手掌的一半，但现在屏幕越来越大，市场上都是全面屏手机，都快放不进裤袋了。所以说人们对于获取信息的诉求是无限，但作为内容载体的屏幕尺寸是有限的。

柔性屏技术的背景和应用

那么屏幕尺寸能否打破这个限制？我们分析下屏幕显示的原理。一般的屏幕会包括图中的几个部分，其中决定屏幕硬度的是底部的基板材料。

基板材料一般是玻璃，技术人员在把基板材料换成柔性塑料后，屏幕可以做到弯曲乃至折叠。这种新的屏幕就是柔性屏。它的优点是明显的，在内容显示上，展示空间在二维做了延伸，甚至可以拓展到三维空间；在物理形态上，可以做到弯曲，甚至可以折叠。

近些年，柔性屏技术已经慢慢被很多厂商应用变成实际的用户消费品。

柔性屏的腕表可以更好地贴合你的手腕，柔性屏的电视可以直接收纳到电视柜里。柔性屏的手机可以折叠变大或变小改变形态，里面的界面也会随着折叠发生相应的变化。

内容如何适配柔性屏

今天我们就结合柔性屏手机来一起探讨柔性屏上的体验设计如何呈现，内容如何在不同屏幕下变化。

下面这张表展示的是华为和三星两款折叠屏手机的屏幕尺寸，我们会发现不同厂商的屏幕规格是不同的，就是说承载内容的容器是不同的，我们需要一种更通用的内容适配方式。

回想日常生活中，水是可以从瓶子倒到水杯里，适应不同的容器。那屏幕里的内容是否也可以像水一样流动呢？这种设计方式我们有个更熟悉的名称，叫“响应式设计”。

内容如何做到可以流动

设计师在进行界面设计时，把界面元素根据栅格体系拆解为小的内容块，这些内容块可以在不同屏幕尺寸下进行再组合，从而实现流动。这里介绍4种基础的响应式设计方式。

方式A是纵轴保持不变，横轴内容横向拉升。比如常见的联系人列表类页面。

方式B是纵轴保持不变，横轴内容用同类型的内容进行扩充。比如像应用商店这类入口型展示页面。

方式C是把页面上其它部分的内容挪移到新的位置，称为内容挪移。

方式D是横轴和纵轴进行整体等比例的缩放，比如图片或者视频素材。

以上四种方式可以组合使用。通过响应式设计我们基本可以实现让内容适配不同的屏幕尺寸大小。同时在设计使用前，我们要明确内容流动的本质是为用户使用场景服务。容器变化的原因是使用场景发生了变化。

柔性屏下的体验设计思路与实践

柔性屏体验设计思路

下面介绍下我们在柔性屏上进行体验设计的基本思路：