昨天翻看天猫手机客户端（以下简称猫客）时，意外发现不久前作为实习生参与过的全局导航项目已经悄然上线。说是参与其实不恰当，全局导航针对整个猫客的所有具备导航需求的页面，受众极广，更是承担了双十一导购、引流的重任，初出茅庐的我只做了一些边角料的工作，不足称道。但是，看着师姐一步一步把它做上线，我还是很有感概的。
简单介绍一下什么是全局导航：原本的猫客中，导航通过右上角的「点点点」唤出，提供一些快捷入口帮助用户快速去往目标页面。
而猫客作为一个电商 App，除了商品信息以外，还有首页、搜索、消息盒子、足迹等场景入口，更有分享、刷新、收藏等功能性操作。全局导航之所以非常重要，是因为其担当了逃生舱的作用（对于页面层级复杂的产品，逃生舱即越过层级直达目标场景的入口）。然而，原本的设计却显得过于死板——唤出入口难以点击（右上角）、操作路径长、内容死板单调（没有与页面场景结合起来），仅仅把页面联结起来是远远不够的，全局导航应该扮演贯穿全产品的角色。
在天猫，绝大部分的需求都来源于产品经理或运营，他们基于数据、用户反馈、业务要求来产出需求，协同设计、开发团队完成项目。但这次，基于前述的背景和需求，设计团队主导发起了全局导航优化项目，希望通过对全局导航的改造，让它发挥出更大的作用。
在猫客中，不同场景下的导航需求是不同的，比如商品 Detail 页、频道页、范儿和关注页等，它们除了所处层级位置各不相同以外，自身所需求的导购、引流诉求也有很大差别。因此初步产生这样一个想法之后，设计师花了整整一周多的时间，着手对业务场景进行梳理，明晰各个场景下的诉求、页面层级关系、加入导购和引流后对用户体验的影响、业务需求的结合等等。这个过程很枯燥，但却最体现交互设计师的能力和价值。看着师姐把复杂、纠缠在一起的场景梳理出来，精确到每一个页面每一个行业每一个频道，所有的信息就像设计师手中的橡皮泥，全部打散后又被重新塑形，变成想要的样子。
场景与信息梳理后，就要开始制造它们的容器，即导航本身。设计的精华之处就在于，将信息拍散、归类、排序、重新整合起来，并且用优雅的容器将它们装进去，而容器自身，就是用户和这些信息交互的纽带、桥梁。
原本在猫客这样大体量的电商产品中，由于面向的用户范围广，涉及男女老少各个层次，所以设计师尽可能采用简单粗暴的交互方式（点击为主），避免太过新颖的设计让用户不知所措。而在全局导航中，大胆引进了丰富的手势操作：整个导航面板分为两个阶段，从页面整体下拉后看到的是第一阶段，不松开手指进行左右滑动可以方便地在快捷操作中切换，松开即选中触发操作；
当下拉超过一定距离之后，快捷操作手势触发失效，取而代之的是第二阶段导航面板，展开更多的导航入口以及导购展位，展位则可以上下滑动。设计的愿景是，通过手势操作快速实现常用功能（刷新、分享、收藏等），快速下拉则展开完整面板，充分利用空间进行引流，整个过程单手完全可以掌握。
同时，为了节省空间，增大展示效率，展位向上滑动后操作入口会收起一部分，下拉则又重新出现。
如果这个手势操作对用户过于复杂、不易见怎么办？点击右上角的「点点点」可以直接展开完整导航面板。因此手势操作属于彩蛋性质的设计，帮助熟练的用户更快捷达成交互目标。
看上去简单一致的最后成品，在设计、开发过程中经历了诸多挫折，每一个细节的打磨都花费了巨大的精力。
最初，光制作这个效果的可交互原型我就花费了近两天时间，在纸上画各种草图、精确到像素地计算各个内容出现的位置和时机，还有弹性系数、阻尼、形变过程等等。
动效细节的设计没有具体的依据可循，甚至作为设计师感觉已经完美也不可能保证其他用户一定认可。因此可交互原型被用来传递到各个会议现场和各个同事的手中，用来测试、微调。设计师和工程师一起一坐就是大半天，一边直接在代码里修改参数，一边真机测试体验和效果，然后回过去调整、再测试。细心观察还会发现，快捷操作最右边的收藏按钮当被选中时，会发生颜色变化、形态变化（旋转、几个小星星飞出来），设计师制作了多个版本的动画，评估各项指标才完成了这样一个不经意的小效果。精雕细琢，才是设计的魅力。
最终的效果也许还不尽完美，有的时候回过头来看看会觉得手势操作略微有些过渡、二阶下拉也有可能误操作，但总得来说，这是一次成功的尝试，有意义的改变。随着互联网产品同质化越来越严重，用户体验和交互设计越来越被重视，设计师的价值也逐渐增长。
这个设计，希望你会喜欢。