Keep 的 UI 设计分析

11 评论 29091 浏览 172 收藏 14 分钟

Keep的UI设计风格跟其他的运动类风格有很明显的差异,整体比较宁静淡雅,Keep为什么会选择这种风格?这种风格的优势又在哪里?

前几天,Keep 宣布用户数破 2 亿了。从 0 到 2 亿,Keep 花了近 4 年半时间。

据《2018中国健身行业数据报告》显示,中国有 4327万健身房人口,在总人口中占比 3.1%。也就是说,在中国,每 100 个人当中,有3个人去健身房;每7个人当中,有1个人用 Keep。

上线于2015年2月的 Keep,以黑马的姿态后来居上,成为明星产品;在健身类 App 中长期霸屏第一,受到苹果 CEO 库克以及很多用户的喜爱,时不时的出没于朋友圈,同时也是腾讯、高盛等热门资本的宠儿。

作为 Keep 用户,我简单的研究过 Keep,结论是 Keep 是一个综合发展的优等生——价值观、产品、设计、运营、品牌建设等方面都值得好好学习。

另外 Keep 和诸如腾讯、阿里、网易等传统互联网公司旗下的产品比较时,又有很不一样的地方,因为 Keep 身上有耐克、可口可乐这些非互联网产品的影子,这也是很有意思的地方。同时,Keep 在某些方面也存在一定提升空间,比如交互设计,这个后面我也会单独写篇文章。

今天主要和大家分享一下,我对 Keep UI 设计(纯视觉方面,基于 iOS v6.21)的研究与思考,偏宏观,欢迎大家留言交流。

01 Keep的UI是什么样的风格?

简单来讲,和大部分运动类 App 比,不太一样;具体来讲,Keep 的“运动感”比较轻,同时又给人一种淡雅宁静的感觉,这种感觉会让我想起星巴克的设计。

(Keep 主要界面)

大部分运动类 App,UI 方面,通常都是“运动感”比较强:他们通常会大面积运用醒目的黑色,彩色方面,通常会用比较亮、比较有活力的颜色,整体上突出的是力量感和活力感;配图方面,也往往突出力量感和活力感,喜欢用一些充满较强活力或者爆发力的图片、或者是一些肌肉较凶的图片,配上偏暗偏黑的深色背景、或者鲜艳有活力的彩色背景。

耐克就是很典型的例子,而且一直沿用着这种风格。另外,耐克还有一点很不错,就是除了这些,耐克还通过一些充满笑容的图片传递出了一种运动时的愉悦感。

(一些运动类 App)

而 Keep 的 UI,配图里面也经常会用到健身图片,但极少有那种荷尔蒙四射的力量感。运动感倒是有一些,比如主色里的灰色,眼睛告诉我它似乎是蓝灰色,但放到 Sketch 或 PS 里面以后,会发现其实是紫灰色,紫色介于冷色和暖色之间,另外这个颜色本身也比较深比较暗,整体来看是有一定的力量感在里面的,淡淡契合运动的主题。如果是蓝色,给人的感觉会是冷或者清凉清爽,力量感就会弱一些。

图标方面,最主要的底部导航图标,用的是面型,非常简洁的几何块状,配上微弱的圆角,用拟人的说法,仿佛有一种结实有肌肉的感觉。比如“我”那个图标,肩很宽,显得肩和背上是有肌肉的,还有主色里面用来表示点击和突出显示的绿色,虽较为成熟稳重,也是有一定活力的。关于 Keep UI 方面的“运动感”,就简单分享这些例子。

(Keep 主要界面元素)

除了“运动感”,Keep 的 UI 还有一种淡雅宁静的感觉,这个也主要能从颜色里面感受到:主色里的灰色,没有特别暗,也有一定的宁静之感;主色里的绿色,有一定活力,但没有大面积使用,不躁动,能和整体的淡雅宁静和谐共处。

其它大面积用到色彩的地方,比如大圆按钮和一些课程模块的大面积背景色,Keep 选择了淡雅的类似瑜伽、冥想产品的那种配色。还有字体,最黑的字体也没有用纯黑,粗体也用的少,这些都能让人感受到一种淡雅宁静。

02 Keep的 UI 为什么选择这种风格?

1. 受产品定位影响

一款运动类 App,自然需要一定的“运动感”。

2. 受用户特征影响

不管是以迎合用户的审美为主导,还是以决策者的审美偏好为主导,还是两者结合,通常都要满足一个共同的条件:需要符合主流用户的审美。

根据易观千象数据显示,Keep 用户主要集中在一二线大中型城市,占比超过 3/4;用户年龄主要集中在 35 岁以下,占比约 75%;男女比例接近 1:2。Keep 的这种 UI 风格,是能够为其主流用户所接受的。

3. 受创始人的审美偏好影响

关于 Keep 创始人王宁的性格,媒体报道的说法是“谨小慎微”。简洁、淡雅宁静这种低调的轻运动风格,想必也是王宁所喜欢和推崇的。

(Keep 创始人王宁)

4. 强“运动感”的 UI 风格能否带来运动类 App 数据的增长?

现在很多人对 UI 设计的认知和期待主要集中在三个方面:首先要好看、舒服;其次要体验好,比如阅读体验、浏览体验等;最后要能带来数据的增长(商业价值),这一点在电商类公司尤为明显。

那么,以运动类 App 为例,强“运动感”的 UI 风格和数据增长之间,是否存在必然的因果关系?我的答案是:未必。

举例来说,产品方是希望用户第一次看到这款 App 的时候,能够尝试使用,之后能够持续不断的使用。关于第一次的尝试使用,UI 会起到不小的作用,当用户觉得这个产品好看有品质的时候,极有可能会尝试使用。但是,不同的风格都可以被设计的好看有品质,所以这里的核心是设计本身,而不是风格本身。

另外,现实生活中,用户通常都是先做了一个要运动的决定,比如要去去跑步或者练腹肌,然后才会打开一款运动 App 来用。而不是先打开一款运动 App,然后受其强“运动感”的 UI 风格的影响,从而决定去跑步或者练腹肌。当然也不排除强“运动感”的 UI 界面,会让人产生想要运动的冲动,我自己看 Nike Run Club 的界面,就会产生这种冲动。

(Nike Run Club 界面及图片)

归根结底,这里涉及的问题是,用户决定运动并付诸实践的源动力究竟来自哪里?有两点最为核心:第一,内心深处提升自己健康与健美程度的渴望;第二,来自外界成功例子的激励,主要是来自朋友、熟人、名人甚至陌生人,比如关于彭于晏健身的各种报道,会影响和激励很多人。

这两点的力量要远大于 UI 风格方面的强“运动感”,运动类 App 完全可以在这两方面做文章,效果会更好。实际上,Keep 就这样做了:“自律给我自由”的品牌口号就是在唤醒用户内心深处的渴望,社区里面大量坚持健身以及健身成功的例子,也是在激励和鼓励用户。

总的来说,强“运动感”的 UI 风格,在促进一款运动 App 的数据增长方面,效果有限。Keep 选择了更为有效的其他方法,这里面的助力元素还包括:比较专业的健身课程、务实且互动性强的运营等。

03 这种 UI 风格对 Keep 有哪些好处?

1. 低强度的积极情绪更容易带来细水长流的效果

一个比较极端的例子是,玩王者荣耀时的拿人头、得 MVP、升段位、拿三杀五杀会让我们爽。如果玩的时间过长,这种对神经高强度的刺激,既会让我们爽,也会让我们累,甚至不堪重负。

同理,如果大脑神经长时间受这种强“运动感” UI 风格的刺激,用户也会感到疲累,只是程度不同而已。

反而 Keep 这种淡雅宁静的风格,带给用户的是一种放松的感觉,是一种强度很低的积极情绪。这种润物细无声的低强度积极情绪,即使用户每天都打开 Keep 来用,也不会因为 UI 界面而产生疲累等负面情绪。

另外,根据王宁 2016 年在混沌研习社的分享,在中国,很多人每周运动,但每天运动的人很少;在美国,每天运动和每周运动的人占总人口的 90% 左右。Keep 希望更多中国人能够每天运动,这种淡雅宁静的风格,一定程度上有利于这个愿望的实现。

2. 带有一定的高级感,容易受人追随

减少设计对用户神经和欲望的刺激,同时让用户感觉到放松,某种意义来讲,这是一种做减法的设计。星巴克没有像肯德基一样,用红色的店铺装修来激发顾客的食欲,而是用深色的装修、原木材质的桌椅和舒缓的音乐,让顾客感到放松和安静,某种程度上也是一种做减法的设计。

像极简的、黑白的、独特的设计一样,Keep 这种做减法的、克制的设计也很容易给人一种高级感(当然,这里我觉得还有设计美感和品牌精神的助力)的感觉。

带有高级感的事物,会让人感觉良好,所以很容易受到人们的追随。就像很多人喜欢在星巴克里拍照一样,很多用户也喜欢把自己的 Keep 动态分享到朋友圈,包括我自己。

3. 形成差异化,有利于品牌认知和传播

在包括耐克在内的一众运动类 App 都追求强“运动感”的大环境下,Keep 这种轻“运动感”搭配淡雅宁静的 UI 风格,就显得很独特,一定程度上有利于品牌的认知和传播。

04 结语

最近的《明日之子》第 3 季,复古女孩洪一诺凭老歌《风中有朵雨做的云》和《无声的雨》唱醉六位评委,首夺六星,带大家集体穿越回 90 年代。孙燕姿在评价她时这样说到:“大家可能到了一个时代是,砰砰砰砰砰……什么都在你面前的时候,大家其实是想要退一步。洪一诺,她就是刚好让人退一步,看到的那颗星。”

同样,在这样一个高速发展的时代,什么都砰砰砰砰砰的出现在我们面前的时代,大家会想要安静和放松一下。Keep 的 UI,就是静谧夜空中,能让人安静和放松的那颗星。

以上。

 

本文由 @Snow Design 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自网络

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 想了解keep的交互设计,期待您的这篇文章

    回复
    1. 关于Keep的交互设计,可以参考《Keep用户体验…》那篇文章,里面“Keep用户体验的缺点”部分有涉及;另外,关于交互设计,可以参考《…信息架构》那篇文章;可能不会有专门关于Keep交互设计的文章了

      来自北京 回复
  2. 而且同理,个人觉得对于keep的商城模块,这种相对高级冷静的配色风格不见得是一种劣势;相反,它有一种更强的信服力。在其他的APP上,不管主打什么功能,加入的商城模块基本都沿用的是淘宝拼多多色系,一眼看过去都是那种商场大减价的感觉。但keep在用户思维这一块就比较聪明,它明白自己的主体用户所在的消费和精神层次,用户更看重的不是价格折扣,而是品质和高级感。

    来自湖北 回复
    1. 是的,个人觉得还有设计美感

      来自北京 回复
  3. 个人感性分析一下,别的APP都用跳跃的彩色,想要抓住 运动的‘动感 跳跃’等关键词表现,想要刺激用户动起来;但是keep给人的调性,更能给人‘坚持’这样的感觉,灰色系介于黑白之间,感觉特别能代表成功路上坚持的颜色~ 相较别的APP,keep品牌调性抓住了我精神层面的感官… 浅解

    来自北京 回复
    1. 精神层面的东西或者说共鸣,是很有力量的…喜欢你的解读…

      来自北京 回复
  4. 很喜欢看你写的文章,很有想法

    回复
    1. 谢谢,欢迎常来~

      回复
  5. 一直比较喜欢它的 Logo 设计,很有意思~~最近在跑步,一直用 Keep,界面很友好,是我喜欢的风格,其他类似的APP没用过~~

    来自江苏 回复
    1. 它的 Logo 有意思,我觉得没有往高级感的方向靠,圆润温润,K 都没有用大写,亲切大众。我以前用 Nike + 跑步,后来一直用 Keep~

      来自北京 回复
  6. 宏观上浅谈 Keep 的 UI 设计,希望能抛砖引玉~

    来自北京 回复