在我们的大脑中，存在着多维度的思维模式，可以帮助我们理解周围复杂的世界。我们也可以利用这种空间思维方式来帮助我们处理抽象信息。动态设计的空间感我的思维有空间维度，你也有。你看不到它，但你可以抓住你的左耳，对吧？还有，你可以挠鼻子吗？或者，你能摸摸你的额头和后脑勺吗？你还记得你丢钥匙的地方吗？你能不看键盘就打字吗？你能凭记忆和手感回忆起手机放在哪个口袋里吗？我应该走哪条路，还记得吗？你还记得如何在黑暗中上厕所吗？问了那么多，你肯定回答，我可以。因为在我们的大脑中，存在着多维思维模型，可以帮助我们理解周围复杂的世界。我们也可以利用这种空间思维方式来帮助我们处理抽象信息。我认为最好的软件是能够扩展用户大脑思维模式的软件。它让用户的思考更自然，也让用户更容易适应软件的内部环境，而不是盲目地四处探索，却找不到自己想要的东西。信息的传输应该是计算机的工作，而不是我们的工作。这就是我们设计师设计软件的目的。***空间界面设计能够满足用户的心智模型和期望。这是一个真正为用户设计的界面。可以强化用户原有的思维方式，增强界面的时空感。这个界面可以让用户充分感知哪些元素在什么地方。就像结构良好的建筑设计一样，它们往往易于导航和导航。空间的变化有序和谐，不会让人觉得突兀，反而习以为常。塑造空间要设计空间界面，您需要从内到外仔细考虑屏幕的边界。考虑界面中对象缩图的物理属性。他们来自哪里？你要去哪里？它们以何种动力移动和转变？哪种特定类型的元素继承了哪些现实世界对象的哪些物理属性？或者站在用户的角度思考，我现在在哪个界面？与其他接口有什么关系？这些问题很难用语言组织和回答。但是我发现我可以用图片很好的解释这些问题。绘制地图图形推理在使用设计营造空间感时，地图可以帮助我们可视化界面的心智模型，让我们感受操作，并在界面的层级关系之间导航。但是，单纯的把界面放在一起，往往达不到我们想要的效果。我们的设计思维往往停留在单一的维度，没有办法在更深的维度去思考界面的空间关系。下面的例子是KeezyDrummerapp的上下文层级分解图的简单分解图，描述了KeezyDrummer中界面的上下文关系。这个分解图并没有明确标明接口的接口。这些箭头代表的是时间维度的第四维度（时间）？同样，你也可以通过层级推演的方式，将界面的维度关系可视化。随着维度的增加，接口之间的关系变得更加错综复杂。如您所见，在2D演示中显示4D空间会使层次结构看起来是三维的。图表中的“W”代表时间。此图代表了界面之间的过渡模式，并说明了KeezyDrummer中上下文空间关系的思维动态。我们可以设计一种时间感。有兴趣的可以看看我的TransitionalInterface。正是时空感给予操作提示，引导用户建立熟悉的心智模型。使列表动态暗示元素的空间关系。对象的移动验证了元素的对象属性，描述了对象如何进入和离开场。界面中的元素根据规则和物理原理移动，帮助用户建立清晰的认知模型。我们都见过这种用于列表项删除的经典动画设计模式。滑动特定项目，移动会显示其背后的删除按钮。点击删除图标，选中的item立马有一种崩塌般的动感。如果我们使用缓动将对象移出屏幕会怎样？例如，使用图片中的这条缓动曲线，我们将在离开屏幕后提示用户所选择的项目在哪里。在这种情况下，它会稍微离开屏幕。在这个动画中，我们可以在元素离开屏幕的保留区域进行提示，给用户一种必要时他们可以回来的感觉。或许我们可以让用户通过滑动手势来滑动界面，这样用户就可以看到已经移出屏幕并被替换的列表项。Google的MaterialDesign规范似乎建议元素在离开屏幕时应采用加速运动的形式。我不同意这一点，错误使用运动曲线的反面是，如果所选项目保持加速，它会停留在哪里？加速直到离开地球？这种类型的运动轮廓让人感觉它会继续飞走，甚至飞向外太空。或者，我们让列表项在离开屏幕的时候旋转，在XY轴上移动，那么这种移动会让人觉得这个元素有重力，它可能在屏幕外的空间中间。堆成一堆。Z轴的动画暗示了层次感和深度感。当然，列表项也可以翻转。它可能像手风琴一样折叠。给整个列表项一种弯曲的感觉。列表项的填充颜色逐渐变深。除了上面提到的动效形式，我还可以举出更多的例子，但到此为止，我想你已经可以理解我想表达的意思了：用户可以通过动态效果的设计来理解这个虚拟界面中的元素，空间感。世界上的物理关系和意义。那些具有空间设计感的Scorekeeper界面都是非常概念化的应用，但Scorekeeper却能有效地捕捉用户的视觉焦点。其具有隔离感的设计模式有效区分了功能，而不是像许多应用程序一样将许多功能填满首页。Scorekeeper把复杂的功能分给了第二层和第三层，保证每一层都非常简洁干净。TinderTinder以其卡片式设计为例。使用Z轴创建无穷无尽的卡片堆。把卡片扔到右边，表示你喜欢这个女孩，或者把它扔到左边，表示你不喜欢。同样，如果你点击“x”按钮，它会自动向左移动，如果你点击“心形”按钮，它会自动向右移动。按钮的动画效果和手势的动画效果相互引用。这种物理动态效果在我们的生活中随处可见，让我们倍感亲切。Tinder的第二层级采用了连续的横向层级关系。这种感觉让我们想起了iOS中经典导航模式的动画效果。将内容串起来。这是一个很好的通过动画暗示界面空间关系的例子。不知道Tinder的界面层级设计是不是有意为之，因为在Tinder的签名卡界面中，向右滑动代表喜欢这个妹子，而在整个界面的层级关系中，恰好出现了这个界面右侧的界面做个短信/私信界面，这样就可以有一个“步步为营”的逻辑——先选择喜欢的人，再和他聊天。Tumblr,iOSTumblr的模型很简单。通过iOSTabbar标准的导航方式，构建界面的上下文关系。如果从相机的角度来观察界面，那么Tumblr的空间关系就很容易理解了。无论在任何界面，底部都会有一个TabBar风格的工具栏，这个工具栏代表了我们用户的视角。虽然Tumblr应用中的Tab切换没有X轴运动效果（比如上面的Tinder有X轴运动效果），但它仍然可以在音乐上暗示X轴排列上各个选项的空间关系。这个鸟瞰图解释了Tumblr的导航关系，用户很难迷路。有几屏因为是scrollview会稍微长一些，有几屏层次会比较深。在很多应用中，导航都是基于已经被遵循的TabBar，比如Instagram、Twitter和Foursquare。不过这个TabBar的设计并不是很具有开创性，只是遵循了iOS的设计规范。Tumblr中最大的亮点实际上是通过单击TabBar上的铅笔图标启动的动画。它的建造方式很有意思。无论你在什么界面，如果你点击铅笔图标，你会发现你并没有进入一个全新的界面空间，而是进入了一个临时的、聚焦的视图。在该视图中，您可以快速选择某些类型的发布信息，也可以取消该菜单。该视图实际上覆盖在原始界面之上。如果视图被取消，界面将回到原来的位置。如果你选择了一个特定的发布项目，那么所有的图标都会在Y轴上上升和退出，并显示上升和进入的详细信息。整体感觉更像是一条传送带——一步步传送信息。TumblriOS发布流程（左图），我个人建议一个改进的发布流程（右图）译者注：iOSMaster-DetailmodeDetailviewmode。但我想，我们其实可以延伸一下“传送带”动画给出的比喻——如果我继续下一步，那么我继续在Y轴上传递信息，而不是打破这种感觉。我改进的解决方案可以降低用户的认知负荷，让用户保持沉浸在原来的心智模型中——而不是突然突破X轴过渡。Facebook的滑动关闭动画使用了经典的灯箱效果，但除此之外。点击图片，图片会移动到前台。由于黑色层的关系，背景的颜色逐渐变得略深。进入这种焦点模式后，滑动界面会回到原来的界面，原来的界面又会重新成为焦点。这个动画设计的很好。缺乏空间感的界面在众多的反面教材中，我们也能学到很多东西。Spotify，你怎么了？Spotify是最容易混淆用户空间意识的应用程序之一，但拥有大量用户。下面我用一些连接来展示Spotify的界面设计和空间的关系。把它表达在一张纸上，其实是一件很有挑战性的事情。我不能用鸟瞰图来进一步描述Spotify的界面关系，有些太乱了。留给Spotify用户的是晦涩难懂的轮播效果、深藏不露的模态窗口、到处都是列表视图、弹出式抽屉以及一堆乱七八糟的下拉菜单和手势。汉堡菜单中的列表项迫使用户为一个简单的操作经历一个复杂的过程。使用Spotify感觉就像一场冒险，充满艰辛。Spotify到处都是才华横溢的设计师和工程师，但想出这样一个畸形儿听起来很奇怪，但如果你看过Spotify的软件开发价值观，那么你就知道这种情况并不奇怪。我在Apple的朋友给我发了一张Apple用户体验规划室的照片，但公平地说，音乐类别的其他竞争对手也做得不好。AppleMusic和Rdio的接口也很差。他们很少考虑空间感。FacebookPaperPaper充满弹性物理质感的奔放动画值得称道。Paper团队的技术很强大，很多有用的东西都开源了。使用Paper应用程序非常有趣。从根本上说，Paper将iPad上交互式出版和阅读应用程序的一些特性带到了iPhone上。好吧，我说的是被Facebook收购的PushPopPress。有动量滚动，有弹性，绝对美观的弹性，Paerper中有很多弹性。折叠的卡片感觉就像一张光滑的油纸，不是吗？您可以在很多地方使用捏合手势。而且Paper的汉堡菜单的动画设计可以说是非常华丽，一炮而红。一切都在物理世界中高度模拟，甚至是一点点噱头。但是，FacebookPaper中的很多东西可以说是多余的。如果大量使用物理隐喻，用户在使用时可能会感到疲倦。用户过于关注高度模拟的动画，可能会忽略应用的空间关系模型。从动画的角度来看，FacebookPaper是一个很好的例子。不过从交互层面和用户心理来看，Paper有点离谱。土耳其航空的机上娱乐这个太明显了，动画太过分了，我想我不需要多说什么了。如何避免凌乱的设计层次和空间关系？我们需要整体思考，还要注意界面的关系。正如我之前所说，图形推理是一种非常好的方法。图中简单的指向将有效帮助我们分析和减少界面空间关系的混乱。一些建议：1.混合轮播、滚动区域、放大和汉堡菜单时要谨慎。上述每一个交互控件或行为都会使界面的空间关系复杂化。水平空间关系，在这种空间关系下，视图之间存在明显的空间距离。同样是横向关系，但是发生横向过渡时，粉红色的界面并没有离开屏幕。这种转变相对来说并不“大”。这种设计模式一般体现在iOS原生的Master-Detailview2中。不过空间感的营造也不能太刻意。否则用户可能难以理解。如果营造空间感的动画时间过长，用户在播放动画时可能无法操作，给人一种反应迟钝的感觉。考虑一些创造空间感的捷径过渡。用户的使用感受才是最重要的，有时候没必要钻到死胡同里。KeezyDrummer3的早期版本。远离计算机、草图或白板上的图表。很多时候，你的想法并不能准确地在电脑上传达出来，不如以草图的形式来表达你的意思。我希望我所写的内容能启发您思考空间感。多玩游戏，学习游戏界面。或者出去走走，观察生活中的物质实体，观察大自然中的运动给你的期待和感受。我的很多灵感和设计都来自大自然。
