移动空间

有限屏幕的无限空间-从空间角度谈移动界面扩展

移动产品大家都不会陌生，几乎是无所不能，可以随时随地满足用户的多种需求。那么移动产品设

计呢？有没有遇到类似的情况，PM小A说：产品要增加功能，在界面上加个入口，小意思嘛。小

B说：内容太少了，咱们再扩展一下页面，没有难度嘛。小C说：能不能挤一挤多放个功能？用户真

的有需求…

可界面的空间是有限的，内容需求却是无限的，从3.5寸到5.2寸到9.7寸的pad，不管多大尺寸的

屏幕，都逃脱不了这样的命运。就像房屋的空间和放在里面的东西，永远存在东西放不下的问题。

既然是同类的问题，能不能从相同的角度出发来找到解决方案呢？

在建筑学中，空间主要指视觉层面感受到的几何学意义的三维物理空间，也就是空间中的人对环境

的一种三维层面的感受。因此空间扩展就是从不同维度来寻求解决方法，包括收纳、层级化分割和

视觉感受扩张等。类比到移动产品的体验上，最基础的也是如何让有限的屏幕承载更多的功能，让

用户感受到空间的舒适。本文就借助建筑学的空间扩展概念，从信息收纳、层级化信息、变脸和视

错觉四个维度来谈谈屏幕空间的扩展。

收纳

顾名思义，把不用的东西收起来，表面上干干净净，打开会找到想要的内容，这种方式特别适合零

碎功能的整合。

1.收纳方式分类，主要有以下三种。

a.定义好收纳规则和内容

即规定整理好要呈现给用户的功能，这一种的关键点就是抽屉的标签，让用户在关着的情况下能究

竟收在哪里，入口在哪里。

那么收纳的形式呢?从交互模型来看有很多种，最典型的像Path的侧边栏式，上下折叠式，沉入式

，还有Android系统级操作的处理方法。目的都是在用户不会用到的时候，把相关的信息藏起来，

收起来，并且有个永远存在的入口，当用户需求就能快速拉开调起，非常方便。

b.定义好收纳规则后，用户随意扩展内容。

这种收纳方式特别适用于记事类或者日程类的应用，因为相对来说，这类应用的主要信息源是用户

本身，且纵向无法预估和控制信息的量级。那么这样一种定义好收纳规则，但内容无限的方式就特

别适用了。下图就是一种典型的记事本信息收纳方式。

c.用户自定义规则和内容，随时可以整理替换抽屉的内容。

既然空间交给用户，怎样分割和收纳都由用户自定义，那么这一种方式的关键就是“扔”和“装”都要

方便，可以简单快速的将内容装进抽屉。最直接的例子就是iphone的app界面，拖动叠加即可形成

一个收纳，拿出去也非常方便。

2.收纳样式，主要分为“有门抽屉”和“无门抽屉”两种

a.有门抽屉

是指即使抽屉关闭，里面的信息收纳着，也需要固定存在的入口时刻提示用户从哪里开启，像侧

边栏，永远有开启按钮的。

b.无门抽屉

是指开关抽屉门的都是通过高级手势操作唤起的，连门都不需要，只需要用户知道开启方式，比如

长按、滑动指定信息条等唤起。

一般来讲，高级操作对应的也是收纳的较高级，不常用的信息，用户知道开启方式就可以，连抽屉

门的空间都可以节省出来。

层级化信息

空间有限，那么要想空间利用更有效，可以将空间分割，分模块展现内容。不管是单纯的list列表，

瀑布流，还是其他什么形式，总会从其他维度找到剩余空间。类比成道路交通，飞机、道路交通、

地下轨道并行，便是充分利用了空间。移动界面中同级、下级的页面跳转，可以利用动效带给用户

更接近真实的空间层级感。其中包括

a.同级多tab架构

b.下级筛选（包括下拉式和浮层式）

c.沉浸式下一级体验

即还原了相机近大远小的原理，通过层级分割展现更多信息页面，这种方式的好处是每个界面都可

成倍扩展。

(以上只是各类别的列举，相同属性的内容都可进行扩展)

变脸

在Web设计中不会在意细小的空间，状态条就是状态条，即使没有状态，空着也好，但移动空间实

属宝贵，那么在不需要的时候显示其他内容，也不失为一种解决方案。基于代码实现的虚拟空间，

都是可以有If-then条件的。

举例来说就是在XX情况下，按钮状态为A；在XXX情况下，此按钮状态为B。或者同样区域可以

显示不同内容，承载不同的操作。

a.同区域显示不同状态

即延续web的状态条逻辑，将更多状态显示的集成发挥到极致，实时感知情境的变化，作为与用户

直接沟通的对话窗口，承载更多信息来达到节省空间的作用。

b.同区域显示不同功能

像输入框的提示，情景化的按键等，会根据不同的框属性，适配不同功能按键。如下图所示比如联

系人列表，在默认状态显示联系人列表名称，当用户需要搜索时，就会展开搜索框可进行输入。同

一个区域在不同状态下，承担着两种不同的任务和内容，但这种方式的局限性是可扩展范围较小。

适合一些小功能的位置集成。下图是某应用中的联系人列表，很直接的一个小点就是，将联系人列

表显示和搜索联系人操作集成到同一区域，用户也容易接受。

同样同区域不同功能的变化在输入法的按键上体现的更为明显。

显示联系人列表

展开搜索框

目前对于移动端的应用，更多是对这种“变脸”逻辑的研究和扩展，很多产品也推出了情境化感知的

概念，即扩展移动设备可感知的情境，增加if条件，让空间利用实现到极致。包括现在热门的

对SmartBar的讨论也是同样的道理。

因为移动设备有各种传感器，能实时收集用户信息，这些都是让应用变得更加智能的前提。

补充一点

在室内设计中，由于镜面具有反光和成像的功能，因此将其用于室内不仅能增加室内的亮度，而且

能起到扩大空间感、丰富室内装饰效果的作用。这种视错觉的运用同样可以应用到移动界面设

计中，通过轻量化视觉元素，增加转场动效等方式来使用户操作过程中体验更顺畅，从感受上起到

扩展空间的效果。当然这更抽象到一种情感设计的层面，具体的应用方法还值得大家一起探讨。

下图同样为主屏解锁界面，一种是到点到点，另一种是点到边，哪种看起来空间更开阔呢？明显第

二种会给人带来一种可扩展的空间感，第一种就显得完全平面化了很多，同样是一个界面的信息，

第二种就给人一种更广阔空间的心理暗示，通过沉浸感的交互方式让用户感受到无限空间。

总结

好了，以上就是从建筑学空间扩展的视角出发，从收纳、层级化信息、变脸和视错觉四个层面分别

对应到移动应用中,希望可以为你在移动应用中扩展信息空间的设计带来一点灵感，每个层面还可以

扩展出更多的方式，我们一起在设计中不断积累和总结吧，充分利用屏幕空间，让有限的空间可以

实现无限的延展。

来源：百度MUX

人人都是产品经理（）中国最大最活跃的产品经理学习、交流、分享平台