App首页都用这种排版？能不能有点新意！

本文授权转自：体验进阶（ID：Advanced_UX）

我发现很多人设计手机 app 时，首页都像是一个模子里套出来的——顶部搜索框，下面几个图标，然后就是内容列表。有的还要在搜索框下加一个 banner

确实，很多大厂移动端就是这么设计的，借鉴一下很正常。

可是你以为大厂设计师都喜欢这种设计吗？

淘宝费了老大力气才把2行图标缩减成1行，其实图标一个没少，只是部分被藏到第二页了。因为淘宝很多业务部门，都指望着那些图标引流呢，如果真去掉，KPI就全崩了，公司内要吵翻天的。

如果不是迫于历史包袱，我相信很多大厂设计师早就想把首页那些 banner 和图标删减掉了️

然而小公司的新项目，甚至虚拟项目，根本没什么历史包袱，设计师就没必要主动这么设计了，容易会显得模版味太浓。

这种作品集看多了，以至于我都形成了条件反射：一旦看到这种排版的移动端方案，都会第一时间反应怀疑“套模板”。

比如我曾经辅导过一个企业培训项目的作品集，这首页一看就很典型，只差没把 banner 加上了：

功能如此简单的产品，设计师为了给首页凑出5个图标也是不容易——以至于有些图标在「我的」页面重复出现了，底导航只剩3个图标有点空。

我说：“产品没那么多功能，你又不擅长画图标，不如干脆去掉首页的那堆图标吧。”

设计师问：“没图标会不会太空了？”

你看，不套模板都不知道怎么做设计了

很多设计师跳不出模板，主要还是对用户场景分析得不够啊。接下来我就给个示范，看看如何通过用户场景分析来打破这个模板。

学习场景

用户第一天进来看到这个首页，不会有什么问题。

但用户如果开始听课，下次再来继续学习，岂不是得要再点一次“记录”图标，才能找到上次的课程？

这样多麻烦，可不可以简化？

我只要把用户最近观看的课程直接展示出来就行了，而且还可以加一个横滑查看更多。

如果用户要翻很久以前的课怎么办？可以多滑几个后，就提供历史记录的入口。并且在「我的」页面也可以提供历史记录的常驻入口。

这就少了一个图标：

测试场景

这个 app 里的课程都是绑定了测试题，上完课后，必须完成测试才算学完。

原方案那样把测试入口单独拿出来，其实意义不大，因为用户不能跳过听课程直接做测试题。

如果用户已经听完课，但还没有做测试，那么我们可以将其当作未完课程展示在首页。组件和之前一样，只是换个文案。

这又少了一个图标：

筛选找课场景

第一个图标“课程”点进去后，其实是一个课程列表页。

首页也有课程列表，唯一的差别是，首页没有排序和足够的筛选功能。

为了多几个排序筛选，而增加一个页面和图标入口，有点不划算啊？

要不直接给首页加个默认隐藏的筛选器？这样就可以去掉一个图标和一个页面了。

展开前

展开后

企业培训的课程不会特别多，而且大部分用户找课会优先搜索，而不是直接筛选/排序，所以这样的设计应该也够用了。

这下又能去掉一个图标了：

查找资料场景

这个 app 的很多课程是包含资料的，为了方便用户快速查找这些资料，专门提供了一个资料页。

这也功能还是挺有用的，但是入口不一定要在首页顶部，也可以放在底导航。

底部的入口其实更好操作，而且底导航原本3个图标有点空，现在变成4个更合理了。

现在又少了一个图标：

激励场景

这个产品提供排名功能，显然就是为了激励用户多多学习。

但是用户每次必须主动点击排名图标后才能看到排名，多麻烦啊！这样很多人都懒得点进去看了吧？

那不如直接把排名情况对外展示出来，并在旁边放一个查看更多的入口，这样激励效果就更强了。

现在最后的图标也没了：

方案对比

改完后的方案，虽然去掉了5个图标，但功能一个没少，反而增强了便利性和激励感。

这个方案其实还有优化空间，这里只是演示一下打破模板的过程，就不深入了～

其实设计产品并不需要刻意打破模板，日常工作中，模板能帮我们节省很多力气，还是挺好的。

但是面对重要项目时，当我们沉下心来认真分析用户场景，就会发现模板并不是最优解，顶多只能算个粗略的折中方案。

尤其是对于作品集的压轴项目，正是需要“炫技”一下的地方，就更要避免过度模板化的设计了。

对于设计来说，创新绝不是“目的”，但却是解决新问题的必要“手段”。平时没机会就算了，作品集上还是得要多展示一点的。

文章转载：体验进阶，版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/uxYKXiZDV-VVIxLPt7SHEA

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编排 | 巫 欢

终审 | 苏 菁

点这里，学习更多设计知识！