大厂如何做用户体验设计价值

最近进入一个新的项目组，是负责智能运动设备板块的，是做软硬件智能设备。本人负责主要移动的app和可视化屏幕设计，近期也在做相关的竞品调研，下面将以keep这个产品为例，来谈谈我的产品体验~

一、产品前景

在工作和生活压力之下，健康对于现代人来说是越来越重要了，互联网技术的迅速发展推动了健身行业的快速变革。因此也推进了像keep这类健身软件的快速兴起。随着经济的发展以及国家政策的大力支持，智能健康板块将会成为未来的生活的经济的新的风口。

二、从用户体验层分析

这里谈到用户体验，很多人都问？什么是用户体验？官方对它的定义是：用户在使用产品过程中建立起来的一种纯主观感受。“用户体验”这一概念第一次是在Donald Norman 2010年在Uxdesign.com发表的《UX Design Dedined》一文中被提起的。 

那“什么是用户体验设计”呢？官方定义是：以用户为中心的一种设计手段，以用户需求为目标而进行的设计。

最近也在微信读书看《用户体验要素》这本书，也希望能够将看到的运用在产品分析上。书中把影响用户体验的因素分为5个层次：a.战略存在层  b.能力范围层  c.资源结构层  d.框架层  e.感知层。

tips：我相信作为混互联网圈的对于这五个层次应该无比熟悉，那么又有多少人能够真正读懂里面的含义，将平常书中读到的产品理解运用到实际的项目和产品分析中去呢？我一直认为UI设计和美工最大区别就要具备用户体验产品思维，不然就会变成的作图工具人，那么我下面将以“keep”为例子谈谈我的理解：

A.战略层

战略层是一切产品体验的根本，在这一层要考虑的两个问题：1.产品想得到什么？2.用户想得到什么？

用户主要需求：满足学习运动健身需求，满足了解运动行为的需求，健身课程指导，小白健身等，疫情后更加加速了居家健身的热潮。

用户次要需求：满足虚荣心，需要获得成就感、认同感、满足感等需求。（因此keep专门打造社区板块营造运动社区的用户需求）

产品想要：最基本的战略层就是解决用户“运动”的需求，如何让用户更加科学合理的健身，如何激发用户的健身意识和跟着keep一起动起来的自律想法。

因此，找到“产品定位”和“用户需求”之间的平衡点，是保证用户体验的第一步。所以为什么“keep”在上线仅仅三个月用户就突破了200万，并且在2016年8月获得了腾讯的C+轮战略投资。是因为它们在战略层做对了。

B.范围层

范围层指的是：1.我们要做哪些事；2.我们不做哪些事。

如果没有清晰的战略，产品就会出现什么都想做，什么都做不好，别人做啥我做啥，用户一脸懵逼的看着跟自己毫无关联的功能。有了清晰的战略，“范围层”就可以朝着战略的方向变化、拓展。

比如，keep明确了自己的战略后，就一直围绕着“战略层”拓展自己的功能和服务。

问题引导：

那么“运动”之前你会干什么？——对，你会先热身拉伸，刷刷运动圈子，选择合适的课程。

“运动”过程中会干什么？——跟着教练上课，运动任务打卡，运动活动竞赛等

“运动”之后你会干什么？——饿了吃东西，运动完我想炫耀我的运动记录，炫耀我的健身成果等。

除了“运动”你还想要什么？——记录每天的步数，跑步公里数，想要购买硬件设备居家也能运动，了解运动百科，学习瑜伽，游泳等课程。

因此，“keep”通过分析用户运动日常行径和需求，从人们日常吃喝玩乐角度，做出了一下功能的范围扩充：

课程板块：健身课程、跑步课程、健身课程、瑜伽课程、骑行课程等。（满足用户运动基本需求）

社区板块：建立运动社区，运动话题，运动百科科普等活跃和积累用户，满足用户日常分享的习惯，也打造一个智能运动社区，同时也便于产品的用户运营。除了建立社区，keep还引荐了众多的健身教练和博主打造自己的社区，可在keep平台签约进行在线授课。

会员板块：keep会开发定制的免费课程给用户提高专业制定，用户体验好了就自然想要充值会员继续上课。

记录板块：keep开设了每日的步数和运动公里记录，用户可以通过keep查看每天的运动情况，同时也建立步数和运动排行榜，通过排行榜方式激励用户多运动。

商城板块：keep除了推出健身课程外，还自主研发keep的硬件设备，例如动感单车，跑步机，运动手表等，在APP端也运营线上的运动商城，满足用户居家健身的需求。

其他板块：keep除了运动外还新添加了智能减脂餐定制的功能，给用户提供科学的健身减脂餐指导。个人自定义计划板块等。

C. 结构层

结构层是根据“范围层”确定下来的功能和信息，通过分析这些信息之间的关系，进行结构化的归纳组合，使其符合用户心里心智。

Keep APP 功能结构分为五大模块。

1. 首页（APP 打开后默认进入该页面）包括四个子页面：推荐、会员、训练营、活动。

• 推荐：采用标题导航、TAB导航、宫格式导航、列表式导航组成的复合导航，作为默认进入该页面承担了主要功能的推荐与展示的作用，吸引用户。

• 会员：通过推荐页面的展示和推荐后右滑就可进入该页面，展示会员所享有的特权，引导用户开通会员，重要性仅次于默认页面。从情感交互出发，会员页面一打开就出现推荐-适合你的计划，根据用户信息为用户智能推荐适合课程，不仅非常贴心而且能激发用户开通会员。从商业角度，开通会员不但可以增加营收，还增加了用户的沉没成本有助于提高日活及留存。

• 训练营：为Keep官方推出的训练营，新添加了我的训练营入口，激发用户制定训练计划，同时新添快捷入口。

• 活动：主要是线上跑及挑战赛，通过举行活动，一方面活跃用户社区，另一方面也能引流商业活动合作。
  
  

2. 社区：包括三个子页面：关注、精选和圈子，从三方位发力使用户在Keep中扩大社交圈，完善用户的社区交流渠道，满足用户社交需求，增加使用时长，在Keep中有自己的社交圈后增加了用户的迁移成本有助于用户的留存。

• 关注：用户关注的信息进行首页推荐，方便用户进行查看，记录用户的阅读记录，同时顶部新添加了排行榜入口，排行榜也能激发用户社区交流一个很好途径。

• 精选：精选板块为keep官方文章的日常推荐，同时keep也允许签约的博主，运动达人在keep社区运用自己的平台，一方面能够活跃社区，另一方面也能够积累资深用户。

• 圈子：主要设置了本周圈子推荐板块和运动圈子推荐

• 发布动态：keep的社区动态发布，采用右侧悬浮icon的形式进行发布，同时发布图片还贴心的添加了滤镜特效效果，方便用户进行图片调整。

3. 计划：非会员有免费训练计划，会员有更多的专属计划、饮食的记录分析等。

4. 商城：keep自营的内部商城系统，属于自营商城，也是keep2020调整的商业板块，从以往的以售价会员和课程的商业角度转变成经营keep的运动设备产品，例如，运动手环（热销）、动感单车、跑步机等。

5）我的：页面是用户的个人中心，记录了用户的训练数据，记录用户的学过的课，我的计划，已购课程，下载课程，我的订阅等。

五大模块均通过标题导航进入具体的功能结构图如下：

D. 架构层

框架层是基于我们上一趴“结构层”梳理出来的功能信息，进行可视化的框架设计，这部分一般是由交互设计师来完成的。  

 

这块我想说的是，有趣的、创新的交互形式固然重要，但是解决产品真正问题，才是最核心的。  

比如，拿keep首页的框架举例，来看看交互设计师应该如何思考。  

我把整个首页分为了： 基础功能区、课程专区、内容推荐区、导航区。

1. 基础功能区

keep的首页分为四大子的分区分别是：推荐、会员、训练营、活动。首页分区布局目的是从引导用户行径角度出发。（引导用户转换：通过推荐课程——引导用户点击会员——会员感兴趣后参加训练营——参加活动）

2. 课程专区

“课程专区”是整个产品战略的核心，也是用来这个产品的首要目标，因此要放在金刚位。整体金刚icon才用扁平面型样式，加大视觉空间，吸引用户进行点击。整体金刚区图标配色，以keep的品牌色为出发点选取品牌色色环中45°角的邻近色进行搭配，同时统一明度和纯度，让整体色系搭配视觉上色调平衡。

3. 内容推荐区

不仅为用户推荐了优质的内容，同时也给优质的运动博主更多曝光机会。这样同时鼓励其他的用户，可通过keep平台来运营自我的健身的课程和社区，让用户也能在平台上进行运营，这样用户引流用户的商业模式，不仅能够激发更多博主投身keep，也能通过用户带领用户进行不断引流，形成良性循环。

4. 导航区

keep底部导航区主要分为四大入口：首页、社区、计划、商城、我的。值得推荐的是， （引导用户转换：通过推荐课程——引导用户点击会员——会员感兴趣后参加训练营——参加活动）

5. 侧拉栏

keep设置了左侧侧拉栏，侧拉栏主要存储用户的运动数据，功能的快捷入口和底部常驻的设置入口， 侧拉栏的交互不仅巧妙的存储用户的运动数据，而且通过侧拉隐藏也不会影响首页页面布局，增加功能快捷入口。这样的交互也是被各大厂牌广泛运用，例如，网易云音乐等。 这样的交互也是被各大厂牌广泛运用，例如，网易云音乐等。

因此你可以看出，框架层要考虑的因素包含着：产品战略、商务合作、运营玩法、商家流量、操作体验等。

优秀的交互设计师，在框架层不仅要权衡好功能之间的主次关系，同时还要平衡好产品目标和用户体验的之间的关系。

G. 表现层

最后一趴“表现层”，也是用户最直观能感受到的地方了。虽然这层经常被称为“视觉效果”，但是，它绝对不是说好看、好炫就完事儿的。而是你有没有清晰的传递产品定位和业务目标。  

为什么“keep”经历了大改版后，能够能给用户留下深刻印象，除了品牌做得好，那就是有赖于他的视觉表现了。下面我们就一起分析一下“keep”的产品体验吧。  

 

1. 品牌感体现  

设计思考：

keep-2020重新梳理了品牌和产品战略，对App进行了大改版，对于品牌定位和品牌重塑进行重新设计，如下：

①引导页  ——打开keep就能看到醒目的keep的品牌标语“自律给我自由”，通过标语一方面树立keep的品牌定位，另一方面因为这是一款运动健身的产品，利用自律作为标语也是为了激励用户自律健身，也是非常符合keep的定位。

②底部tab  ——在底部的tab图标交互上，keep也将品牌logo运用交互上，点击首页的图标交互上使用了keep的品牌元素，增加keep的品牌感，这也是今年比较流行的品牌的交互运用。

③加载loading和空状态  ——keep的品牌元素还巧妙的运用在下来加载的loading动效和空状态刷新的交互上。

2. 设计配色  

 

keep大改版后，重新定义了品牌色，对于品牌主色和辅助色进行了清晰的定义，以keep紫作为品牌主色，运动绿为辅助色进行搭配，主要运用在一下按钮，统计图功能图标上，主色和辅助色占比也进行了明确的设计划分，主色和辅助占比是6：4。  

①主色和辅助色提取—   —品牌色对于一个产品的品牌定位是非常重要的，因为颜色是人们最直观的视觉要素。而keep的品牌主色的选取也是值得我们学习和思考的，keep选取紫色系为品牌的主色，突出keep品牌的独特性，让他和其他竞品形成品牌差异性和独特性，让人们一看到紫色就会想起keep。选取绿色作为辅助色进行搭配，一方面绿色为紫色180内的同类色，对比统一和谐，同时绿色给人以健康安全感觉，符合keep的品牌定位。  

②首页金刚区图标配色   ——keep首页金刚区采用面性的图标，增加视觉面积，从而达到吸引用户点击的行径。首页金刚区的图标配色，keep多数采取以品牌主色临近的180的同类色和邻近色进行图标搭配。  

Keep 的主⾊调是深紫灰与绿⾊，从设计的⻆度，希望通过颜⾊为 品牌与产品传递什么样的⽓质？  

品牌配色定义：  

品牌的核⼼是要有辨识度，现在难以有独特的品牌被⽤⼾记住了。紫⾊在所有 APP 中， 是识别性较⾼  

的，这种⽐较特别的选择，其实在代表运动的⼀种独特的趋势⽂化。  

 

紫⾊和绿⾊是对⽐⾊，⼆者也是「中性」⾊，代表了包容和中性的运动⼈群。紫⾊⽐较严谨，可以理  

解运动是个酸楚的过程，但多巴胺分泌带来的⽣理上的快乐，是绿⾊能补⾜的。整体⽽⾔，我们希望  

⾊彩能够传递运动领域的活⼒积极、追求精致的⽣活⽅式。从以往数据来看，我们 iOS ⽤⼾占⽐更  

⾼，我们认为⾊彩的选择与苹果⼿机⽤⼾在⼈群上有⼀定的认知契合性。  

 

 

3. 设计布局

 

设计思考：  

keep的页面为什么会让人看丰富，舒服?这可能源于设计师门精心的页面布局。keep的总体页面布局均采用纵横交错的页面布局，在keep的产品上你很难看到统一均衡的布局，因为这样布局会让整体界面视觉平均，因此keep也抓住了这一点，在页面布局上，采用纵横交错的页面布局，丰富页面的层次，同时结合滑动侧拉和下拉的交互进行页面内容的展示。  

 

以上，是从品牌、配色、布局三大维度对keep的视觉层进行解析，当然视觉层面还有很多，例如交互动效，卡片设计等。这次小编就分析到这里了，更多关keep的界面细节留意小编的下一篇文章，《UI设计师的产品体验日记——keep》  

 

 

 

总结  

总的来说，用户体验设计是以用户为中心的设计手段，企业需要重视它的原因是：它不仅停留在表现层及框架层，而是深入到战略层、范围层、结构层；本次以keep产品为依据进行用户体验五大维度的解析，也是为小编后期的产品改版的一个竞品分析做准备。  

 

一个优秀的设计师，不能只停留在视觉层面，我们要学会体验产品，体验经济红利已经到来，我们要多从用户和产品的角度，来解析和体验我们的产品。