记一次产品功能拆解重组合——PC到移动

3 评论 4691 浏览 17 收藏 9 分钟

编辑导语:如今很多软件都有PC端和移动端的版本,PC端到移动端在设计形式上也有很多变化,比如尺寸、操作、网络的不同等等;本文作者分享了关于从PC端到移动端的产品功能拆解重组的心得,我们一起来看一下。

今年九月份的时候接到一个需求,要将已经搭建好的pc端产品增加一个移动端,移动端定为小程序版本,产品的功能不变。

当时花了两周的时间去研究产品功能、绘制移动端原型、写需求说明书;目前该移动端产品已于十一月上线,现在总结一下整体的工作心得。

一、PC端与移动端区别

根据已有pc页面改版,做成移动端应用,需要先了解两者的不同点。

根据一般经验,我们可以知道PC端与移动端有以下区别:

  1. 屏幕尺寸:移动端的便携性使得它的屏幕面积比pc端小许多,可容纳的信息在空间上整体被压缩。
  2. 操作方式:移动端由拇指操作,拇指长度有限因此有拇指热区,pc端用鼠标操作,全区域易操作。
  3. 网络环境:移动端网络不稳定,受不同场景下的网络影响,会出现许多异常情况,pc端的网络情况较移动端稳定。

由此我们在移动端设计上,要考虑信息的可容纳度、拇指热区、异常页面。

二、产品功能结构

先看pc的前端页面,如下图,这是一个很常见的pc前端页面,有搜索、轮播图、个人中心等。

在将设计移动端功能之前,我们先了解原产品的设计逻辑,知道产品原本的功能结构,才能在原有基础上进行改造。

该产品的定位是垂直领域在线教育课堂,用户群体为政府机关人员,具有课程单一、受众少的特点。

在功能设计上,由首页、课程广场、在线大讲堂、案例评析、精英名师、个人中心六个模块组成;同时个人中心包含培训计划、考试中心、我的活动、我的成绩、选课广场、关注讲师、收藏课程七个模块——这是一个功能较多的在线教育学习网站。

三、产品功能优先级

在排列功能优先级前,接到需求,在线大讲堂模块在产品V1.0版本暂时不做。

因此我们将剩下的功能排出优先级:

  • 核心功能:课程广场、培训计划、考试中心;
  • 重要功能:案例评析、精英名师、选修广场;
  • 一般功能:我的成绩、关注讲师等剩余功能。

四、移动端功能结构布局

移动端为小程序版本,结合小程序轻量、简洁的特点,我们需要在原有功能上做一些删减,同时将重要的功能放在显眼位置,方便用户在特定场景下操作;只需将首页、课程、培训、我的这四个核心功能作为标签;重点把pc端的培训计划和个人中心进行拆解,组合成适合小程序的轻量全面的产品。

在下文中,将选择移动端的“培训”标签来重点讲我的在设计中的考量。

五、PC端的个人中心

PC端的布局逻辑除个人中心外都简洁明了,首页是课程广场、培训动态、在线大讲堂、案例评析、精英名师的推荐位;课程广场包含全部课程资源;在线大讲堂指课程直播;案例评析包含相关领域案例和专业评析;精英名师涵盖所有课程的讲师——在上述模块中重点是课程广场里的课程资源。

个人中心涵盖的东西较多,也比较杂。

1. 缺点

1)左侧边栏无关的模块只是罗列,结构混乱,功能的优先级不明确;个人中心将核心功能培训计划,和一般功能我的活动、关注讲师放在一起,会造成培训学员对培训计划的使用场景和功能不明确,培训学员在刚接触所谓的培训计划时会比较迷茫。

2)在整个产品的定位中,培训计划应属于核心功能,学员均需在此在线教育评残参与培训,需要突出此功能及关联功能。

下面我们列出功能相关性。培训计划是包含后台管理员设定好的课程(选修课、必修课)和考试中心模块的,所以在培训模块里,培训计划、考试中心、选课广场关联性是很大的。

该产品涉及到的人员有两类,一类是建立培训计划、开设考试的管理员,一类是参与培训的培训学员。

管理员的操作流程如下图,管理员在后台创建培训计划,填写该培训计划的基本信息(培训计划名称、是否要考试等);之后添加培训课程和培训学员,该培训计划创建成功,确定发布后,传送到前端。

培训学员操作流程如下图,培训学员点击培训计划后可以观看该培训计划设定的相关课程,同时需要去选择选修课,通过学习课程来获得学分;达到学分后,若有考试,需进入考试中心参加考试,考试通过后方可通过该培训计划。

六、移动端的培训与我的

理解了培训计划与考试中心、选课广场的逻辑,可以在培训标签中将这三个模块放在一起;同时在我的模块中放入一般功能。培训动态、案例评析、精英名师仅在首页中设置入口,这样就完成了小程序的初步功能架构,后续原型图按照此逻辑展开即可。

此处奉上我的原型链接https://11w22f.axshare.com

再献上UI小哥哥关于培训模块的设计图:

七、总结

这次pc到移动端的产品功能拆解重组合经验,使我理解了产品的功能架构是多样性的,没有对错,只有好不好用的区别。

在对原产品有足够理解的基础上,才能发挥独到的设计,让用户体验到更好的产品;在未来的道路上我会更加努力,做一名有见解的产品经理。

 

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

题图来自 Unsplash,基于 CC0 协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 好棒

    回复
  2. 很喜欢你的思路,要多产出文章哦

    来自内蒙古 回复
    1. 谢谢支持!哈哈哈

      来自上海 回复