【案例解析】Keep里有哪些值得UI设计师学习的亮点？

静电说：这周的案例赏析栏目，我们来看看KEEP！作为一款健身类应用，KEEP算得上是大家几乎都知道的一款应用了。疫情在家，缺少运动，确实会让人心情不太好，静电所在城市的运动场馆都关门了，不能游泳不能健身真的很难受。于是我就打开了很久没用到的Keep。里边的内容确实会让人挺燃的，emmmm。貌似又找回来了一点点的活力。

今天咱们就来看看Keep这款应用为我们带来哪些设计灵感吧？如果你还在为无法设计好自己的应用和产品而苦恼，不妨持续关注这个专栏，通过每一次的赏析来积累更多的灵感和思路，相信你会越来越棒的。

更多案例解析请点击这里查看

在赏析前，我们需要形成一个思路，这个应用是给谁用的，他可以用这款应用完成怎么的任务和诉求。把握这两点，再去做设计。

001.启动界面

keep的启动界面一直是我印象很深刻的。用文字即可营造出品牌感，你看，这里边有多少的纯图形内容呢？没有！只有文字，使用艺术字体进行创作并一直将slogan进行沿用，形成了自己的视觉锤和钉子。

002.定制页面

启动后，如果是新用户就会出现定制页面，身高体重性别年龄这些是必须的，设计师采用更大更便捷的操作设计让用户更容易选择，比如上图的身高和性别内容，同时采用更贴切的话术告诉用户，我们为什么需要这些信息。

设置完成后会产生定制的计划。大家注意，keep所采用的的是渐变背景设计+卡片内容呈现。Title放在了卡片内容，各位小伙伴如果在设计过程中不知道你的卡片标题如何放，可以试试这样的方式。

003.弹层

弹层设计也是各位小伙伴要关注的内容，适当的弹层可以提升用户的转化率，在适合的场景中弹层并不会过分破坏用户体验，但是我们要考虑清楚弹层的设计规则，对用户进行需要“转化”的引导，比如上图中的“立即升级”和“立即查看”按钮则被强化，而关闭则放在了比较弱的位置，但是需要注意，必须要让用户可以方便点击而不是造成点击困难。

004.首页

keep的菜单采用了与其它icon图标不一样的方式来展示，这也是现在很多应用所采用的方式，增强品牌感与设计感，以及用户的关注重心。

而菜单布局上，采用底部一级菜单+上部二级菜单的方式进行。说起来有点怪，最近看到的几个应用，首页都开始不放轮播图了。个中原因大家请自行猜测。

金刚区部分，采用了超圆角不规则图形+阴影效果展现，并围绕品牌色紫色为重心来配色，紫色+绿色+蓝色+红色，没有过强的违和感。

下方的列表，基本上都采用了圆角卡片图+右侧文字的方式排版。需要注意的是，图片内容的质量是关键，不能过乱，否则会影响整体效果。

005. “全部课程”页面

经典的左右分栏大家学会了吗？ 另外会设计全部课程的分类，在这个分类我们可以进行一些热点推荐内容。而大家要注意最上方的“你适合什么难度的课程？”模块设计，通过这个模块可以个性化定制推荐内容。这也是场景化设计要考虑的点，毕竟来这个页面的人，已经属于“我在首页没有找到我要看的内容只好到这里来逛逛的程度了。” 通过这个内容的设计可以最大限度的挽留住用户。

006. “商城”页面

商城首页头部采用跨栏设计，底部背景是圆弧，再加上与背景色相似的轮播图底色，这样会更有设计感。而其它页面则很传统啦，商城详情页的设计大同小异，只不过底下的按钮很高很大。

007. “社区”页面

社区主页的布局是灰+白上下分栏，这个各位小伙伴也可以学习一下，通过不同的颜色背景来区分栏目，效果不错。另外下方的列表区域采用非常浅的分隔线设计，将不同的列表内容区隔出来，非常简约好看，分隔线问题咱们在《静电的UI设计教室》中反复强调过，注意要如何设计哈！

008. “我的”页面+“会员”页面

我的页面中需要关注的就是“Keep·会员”了，一般来说，这个区域都会采用更深的颜色凸显出来，引导用户购买会员。而典型的VIP会员页面设计我们也在课程中讲过，需要遵循 卡片+价格+优惠+权益介绍，这个模式来走，最后则要凸显开通会员按钮。毕竟，用户需要知道买会员有什么权益，这一点多多益善，必须更详细展示，劝说用户购买。而下方的大按钮呢，em，不用我多说了吧。

总结：

各位设计师需要学习Keep这些内容：