很多人觉得 APP 交互设计很玄乎，其实拆开来无非就是几件事：信息怎么分层、导航怎么选、首屏放什么、操作怎么流转。兰亭妙微在做竞品分析和产品走查时，有一套系统的拆解方法。今天我们用一个实际案例，把 APP 交互设计的门道讲清楚。
拿到一个 APP，别急着看视觉，先看架构。所谓架构，就是把所有设计元素去掉之后，剩下的功能框架和页面层级 —— 这和产品经理给的原型图是一个道理。原型图一旦确定，主要功能、交互方式、板式布局基本就定了，后面的视觉设计是在这个骨架上填肉。
看架构时重点关注页面层级。一个健康的 APP，大多数页面应该在第二、第三层就能到达，最深不超过第四层。层级太深，用户找功能就要反复跳转，体验必然差。当然也有例外 —— 购物类、政府办事类 APP 因为功能复杂，层级会多一些，这和产品的功能定位直接相关，不能一概而论。
首屏是 APP 的脸面，也是交互设计的兵家必争之地。所谓 "一屏"，就是用户打开 APP 后不做任何操作就能直接看到的区域。展示类 APP 对首屏排版尤其讲究 —— 因为用户的注意力只有几秒，首屏放什么、怎么放，直接决定了用户是继续往下滑还是关掉走人。
这里有一个常见的误区：为了视觉效果把行高拉高、把元素放大，结果一屏之内展示的内容大幅减少。兰亭妙微在项目中经常遇到这种拉扯 —— 设计师想要呼吸感，产品经理想要信息密度。我们的经验是：首屏的核心目标是让用户快速看到他最关心的东西，而不是让他欣赏你的排版。 行高可以优化，但不能以牺牲核心信息的露出为代价。
导航是 APP 的骨架，选哪种导航形式，本质上是在做产品策略的取舍。
以案例中的彩票 APP 为例，它没有采用最常见的底部标签导航，而是用了侧边栏抽屉式导航。为什么？因为这个产品的核心是购彩，底部导航会分散用户注意力，而抽屉式导航能让界面更简洁，把视觉重心集中在主页面的彩种展示上，同时一屏之内能放下更多彩种。
但抽屉式导航也有明显缺点：切换功能至少需要点击两次，操作路径更长。所以没有哪种导航是万能的 —— 底部导航适合功能模块多、切换频繁的产品；抽屉导航适合核心功能突出、辅助功能需要收纳的产品；舵式导航适合有一个核心操作需要突出的产品。选导航，不是选好看的，是选最符合产品功能定位的。
首屏的空间有限，每放一个元素，就意味着少放另一个元素。交互设计很大程度上就是在做这种权衡。
案例中的 APP 在 Banner 上做了一个有意思的取舍：把 Banner 高度压缩到 200 像素，腾出空间加入了一栏即时信息。这样做的好处是信息传递变成了双层面 ——Banner 横向滚动传递活动信息，即时信息纵向滚动传递动态资讯，一屏之内能承载更多内容。但代价也很明显：Banner 变小了，视觉冲击力减弱。
更值得注意的是切换节奏的设计：Banner 从右往左滚，即时信息从下往上滚，两者都是 6 秒切换一次，而且是交叉切换 —— 你动我停，我动你停。这种设计能在有限空间里传递更多信息，但也最容易分散用户注意力，所以通常只在新闻类、信息密度大的产品里使用。
权衡的结果是什么？首屏之内所有热门彩种都能又大又清晰地展现出来，显得非常大气。但对于急切想查看奖金余额的用户来说，这个功能就被削弱了。这就是产品经理经过权衡后做出的选择 —— 在当前阶段，彩种的全面展示比奖金查询更重要。
用户往下滑，进入第二屏、第三屏，交互设计的重点就变成了节奏的变化。如果首屏用了九宫格展示彩种，第二屏再用九宫格，用户就会视觉疲劳。所以案例中第二屏改用了列表式布局来展示活动 —— 列表的好处是高度自由可控，数量可以根据内容增减，同时和首屏的九宫格形成对比，缓解视觉疲劳。
还有一个容易忽略的细节：不同版块的交互方式要做区分。首页的功能切换是 "点击切换"，而活动版块因为内容多，用了 "点击跳转新页面" 的方式。如果两个层级都用同样的交互方式，用户就会分不清自己在哪一层。交互方式的差异，本身就在传递层级关系。
APP 交互设计说复杂也复杂，说简单也简单 —— 无非就是架构、层级、导航、信息布局、操作流转这几件事。但每一件事背后都是权衡：放什么、不放什么，突出什么、牺牲什么，用哪种方式、不用哪种方式。
兰亭妙微始终认为，好的交互设计不是炫技，而是在有限的屏幕空间里，把用户最关心的信息以最高效的方式呈现出来。下次再看一个 APP，不妨也按这五步拆一拆，你会发现很多看似随意的设计，背后都是深思熟虑的取舍。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。