在工作中我们总能遇到一些看似复杂的原型页面，那我们应该盲目的上色了吗？

最后做出来自己都不会使用的设计！选择说NO！我们需要理智的分析页面，做成合理的设计。

在我们学会做减法的时候可以尝试着去思考这个页面为什么会看上去复杂，或者是乱?(如果照着一个很“乱”的产品原型去上色，那我觉得设计出来的页面带给用户的体验也算不好的，甚至和你拿到原型的时候一样不知所云，找不到哦这个页面的根本，不知道这个页面在描绘着什么，那么这个时候这个页面就是不合格的)

所以在我们看到很乱很复杂的页面时，我们学会去从产品原型思考，思考为什么会乱，先得自己理清楚，做出来的东西才有可能让用户理解。

唐纳德说的很好的一句话：当我不知道怎么让水龙头出水时，那么就是这个水龙头设计得不好!

原型案例：

首先我们看难点：内容上，一屏展示这么多的内容，层级上，一屏展示3层层级（一级层级“曲线...”、二级层级“中行汇买价...”、三级层级“7天...”）

其次我看在看到这个页面不知所措的地方当然不只是在难点上，拿到这个页面的时候，第一反应是【乱】，一时看不明白这个页面。

所以在出现问题时我们去思考为什么这个页面会【乱】

下图为层级布局图：

这是一个正常的层级区块划分图，但是在第二层级出现了问题，如下图：

二级title的管辖范围其实并不包括，第二个或第三个的内容部分。

那如果你说，我们可以理解成把title和对应内容看成是一个大title。那就是可以理解成【title+内容=banner】也就是下图所示：

这样看似乎层级是合理的了，不存在管辖混乱的说法。但这样出现了一个更大的问题，如果把title类比成banner，那么三个banner实则是平级的，是相对独立的，或者说是三个banner都属于第一层级。

但是，将其统一独立后的banner，我们会发现并不能与下面的内容联系起来，因为一个多行排版的banner并不能作为一个taitle来使用，心细的M做了如下两个如来区别什么banner可以什么不可以：

如图所示，如果要让banner作为二级taitle，那么应该是右边的情况。所以综上所述，我们不难得出产品的过分想展示内容导致了页面层级的混乱。

最后我们得出一稿相对合理的层级分布图，如下：

我们将二级title下其余的内容移除，只展示当前title下的内容，这样虽然我们不能在一屏上看到更多的信息，但是我们避免了让用户看到不属于这个页面的内容，让用户更清晰知道这个页面的内容就是属于这个title下的。

总结：合理的产品布局有利于设计的的合理性同时在用户的把玩时的流程性，同时在产品开发过程中也能节省很多时间。

不要盲目的做设计，做更为合理的设计。