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

2022-05-23 11:40:12 浏览数 (2)

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

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

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

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

001.启动界面

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

002.定制页面

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

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

003.弹层

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

004.首页

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

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

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

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

005. “全部课程”页面

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

006. “商城”页面

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

007. “社区”页面

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

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

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

总结:

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

  1. 品牌化的logo和slogan形成视觉锤和钉子
  2. 更优雅的卡片式页面设计
  3. 配色兼具时尚感和易用性,考虑到运动人群的特性和运动的时候的心理。

0 人点赞