keep 第一款智能硬件产品是什么(看起来很酷的Keep)

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(1)

前言

关于 Keep 的设计风格,紫色品牌色的产生,每次版本的设计考量,运营设计、周边设计等等,很多人都有着很浓厚的兴趣,想知道其背后的一些故事。这次借着版本升级,我们的设计总监 Lisa 将为感兴趣的同学们介绍一下在 4.0 版本中,设计团队是如何从功能业务出发到一些运营视觉表现的。本篇总结会聚焦在版本迭代中的设计执行,同时会在一些功能点上设计如何发挥最大价值进行阐述。

设计背景

在两年时间内,Keep 已经从 1.0 升级到 4.0 版本。1.0 开始我们以移动健身教练定位,以打造用户私人教练为目的服务了第一批想健身的用户人群,满足了人们能随时随地不受时间和空间限制的健身需求;2.0 我们整合了我们第一批用户的运动数据,让用户能更直观的看到自己训练相关的数据露出,以及我们尝试了不同于早期单一的社区行为;3.0 我们增加了跑步运动、健身课程表以及实体的品牌周边产品;直到 4.0 ,我们的核心功能不止于健身,Keep 的定位从「移动健身教练」正式升级为「自由运动场」,成为多品类的运动工具,同时承载着社区,活动,直播等更加多样的社区属性,以及丰富了具有品牌性质,更加贴近用户心理归属感的周边商品,在完善 Keep 工具属性的同时我们在探索着其他更加多样的运动环境和品牌价值的输出……

设计执行

产品功能 - 内容立体,高效浏览,数据直观

1、首页改版。首页是快速开启 Keep 工具属性的入口,尤其是跑步和骑行成为与健身平行的运动品类。在这种分类的状态下,设计在顶部导航尝试了多种分类方式,由最初的品牌紫色到现在的白色,设计的思考是如何最大呈现分类价值,即内容层次分明,引导用户快速找到运动入口,同时也要兼顾未来更丰富的运动品类。

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(2)

2、登录注册流程重构。登录注册重构在 4.0 之前两个版本已经上线了,重构原因一方面是从数据发现,新用户在注册页流失,是由于在登录按钮和注册按钮之间选择不清,不明白含义,包括不常用的第三方登录占据了主要的空间位置。设计在这个需求存在的情况下进行了登录注册流程重构,以减少用户误触和快速完成注册为首要目的,进行了去个性化的设计,加大了字号,增大了留白,选择唯一的用户引导方式,在之后的数据总结上能看到明显的提升。

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(3)

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(4)

另一方面为配合整体业务升级,从开屏 video 到引导页我们进行了重构,一个原因是为了和新版注册流程更好的衔接,另一个原因开屏视频是品牌属性的体现,引导页面是沉淀于功能层,目的是让用户体验从开始启动就有品牌升级的氛围感。

3、数据中心的可视化设计。基于 Keep 是一个两年多的工具类产品,已经拥有了用户的相关数据报告,我们整合了数据中心的功能需求并进行设计升级,在满足功能基础上更加强化了品牌色,并且尝试了多种交互细节的表达方式。

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(5)

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(6)

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(7)

4、发现页面重构。发现页面是内容的集合体,设计要分清层级关系,不增加结构的复杂性,不增加用户的认知成本,整体保持一致的韵律感。尽量将同类型场景、内容模版统一,达到简明统一的效果。

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(8)

5、个人页面重构。个人页面是自我价值的一个归属,设计上要体现标签,体现荣誉,同时也要有良好的层级引导,图文组合模块适当增加空间,调整到最舒适平衡的视觉结构,有视觉呼吸感。突出「我」的一个属性。

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(9)

设计表现 - 框架统一、体验一致、最优表现

好的设计基于优质的功能需求,功能通过良好的视觉引导表现出来,设计在依托于上述重要的功能之外进行了更多关于交互框架,表现层,设计基因如何做到最优表现的思考和执行。

1、框架统一

在丰富的健身品类和内容之后的问题就是不同模块之间差异性难以兼顾统一。为此我们梳理整体控件,加强统一体验的同时,提升控件的可用性及操作效率。

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(10)

2、规范重构

重新定义 4.0 设计规范:颜色、字号、字重、icon 梳理、提醒样式等。

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(11)

3、安卓规范化

创业团队人力资源不够,迭代迅速,安卓的设计体验还需要进行更多优化,基于 4.0 我们承载的功能越来越多,安卓规范化被提上了日程,设计主动规范安卓控件并推进开发执行。

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(12)

视觉及品牌 - 视觉吸引、强化基因、品牌渗透

很多人认识我们是通过产品,通过 App 的直观体验。其实我们的创意侧一直在不断的尝试和完善更加符合 Keep 属性的视觉表现。以下会列举我们大大小小的一些运营层面的视觉输出。

1、运营层

我们在运营层的准则是要结合不同的内容输出符合内容的视觉样式,什么推广适合走什么风格,保持个性化的同时要符合 Keep 的调性,是创意表现上最核心的问题。

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(13)

2、品牌层

品牌意识是一个基因,他不仅体现在设计作品上,更是应该根植于每一个设计人员的内心,我们和商品部门合作,进行了一系列品牌周边的设计。

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(14)

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(15)

3、其他视觉

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(16)

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(17)

Keep 员工健身房视觉

keep 第一款智能硬件产品是什么(看起来很酷的Keep)(18)

Keep 内刊

总结

这次版本更新最大的收获是可以多角度看待和思考问题。4.0 已上线一个月,这篇文章现在发出是因为 4.0 迭代时间是非常紧迫的,在上述几个大的功能之外还有非常多的细小的功能点去设计。很多框架统一,体验统一的问题都是我们最近两个版本才开始解决的,所以对于 4.0 版本我们一直在赶,和时间比快就会产生很多遗留问题,设计部是在上线一周就做了内部总结,我们发现了问题,然后在这两个版本里分阶段的去解决,同时也体会到了主动发起需求的不易。感谢产品经理的引导和开发人员的配合。

整体而言 4.0 版本设计是以整合内容为导向,减少过多结构样式的表达,保持一定的韵律感和统一性,给用户内容丰富但结构简明的视觉认知,但在以非内容为主的数据表现上,我们会更加强化品牌属性,强化设计基因,突出我们的品牌色,找到更多的设计感。在接下来大家将看到训练视频 UI 的重构、课程表重构、跑步骑行首页更改、饮食的视觉调整以及创意侧的形象统一等,我们设计成员也将更加深耕于设计的原因,加强设计背后理性化的思考。

最后,关于设计团队

我们一直要做「酷」的设计,「酷」是基于我们的产品形态、基于我们的用户、基于我们的品牌产生的。「和而不同」一方面是业务层的个性和共性的准则,另一方面也是设计团队人员的行为准则,即如何在「酷」的统一概念下创造不同类型的设计表现。

我们是一个不到 10 人的团队,里面涵盖了用户体验设计和运营设计两大方向,每天要和产品、开发、运营、市场、人力等各部门接触,但我们的职责不止步于我们的职业名称,我们主导了我们新办公室导视设计,做服装周边,做鞋子设计。其他同事喜欢让我们帮忙解决问题,这些合作无疑对我们是一种信赖。我们在满足于职能上一直在跨界,并且目标导向,价值观一致,努力做到设计价值的最大化。

身在创业公司,大家需要不断去丰富自己的经验,包括规范和制度,这需要部门的每个人去努力共建。之后还会有更多的关于设计的思考和探索,希望我们能为用户、为产品、为品牌做的更多。

---------------------------------------

关于 Keep:

互联网健身 App「 Keep-移动健身教练」,在各大应用市场搜索 Keep 即可下载,为你量身打造最适合自己的健身计划。

Keep,分享最实用的健身知识、最有趣的生活指南

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页