比如虎牙直播APP的直播间页面就新开辟了一个新空间用来推荐其他直播,为其他直播引流。
虎牙APP的空间折叠↓↓
除了直播产品,飞书会议也采用了空间折叠的设计方法,折叠视频窗口后有更多的空间用于文档演示,当界面元素过多时也可以考虑如此的设计方法。
你会发现上述三种折叠设计方式都包含了一种微动效。
比如小红书的文字展开折叠不是生硬的短文本和长文本切换,而是文字像一把扇子一样展开,然后折叠,用数字表达就像是01234578和07的区别,一个是递进另一个是突变,递进这种微弱的动效能让整个体验更加流畅。
下面将递进称为流畅切换,突变称为生硬切换,为了能让大家感受到这种差别,我做了一个演示GIF,可以看到下图中左右矩形的切换效果,左边的矩形是逐渐升高的,而右边的矩形是由矮突然变高,前者更加流畅,后者则显得生硬。
流畅切换和生硬切换↓↓
2. 折叠设计的视觉展现
尽量有明确的展开/收起图标,实际点击热区可以大于图标的视觉大小(比如小红书点击文字也可以展开折叠)
图标造型:上下折叠、向上折叠、向下折叠等不同方向可以考虑使用对应的图标,且图标表意需明确
三、tab设计法tab设计法是非常常见的一种设计方式,针对整个页面做tab切换的设计方法我就不多做介绍,下面主要介绍几种小范围的tab设计,比如弹窗里加tab,或者卡片里面加tab。
优势:
- 简单易懂,tab作为一种相当成熟的设计方式,用户几乎一看就懂
- 扩展性强,可添加多个tab,容纳更多内容
劣势:
- 需用户主动切换,除了第一tab其它tab内容曝光度低
- tab数量超过一屏后,屏幕外的tab点击率低