记一次产品功能拆解重组合——PC到移动
今年九月份的时候接到一个需求,要将已经搭建好的pc端产品增加一个移动端,移动端定为小程序版本,产品的功能不变。
当时花了两周的时间去研究产品功能、绘制移动端原型、写需求说明书;目前该移动端产品已于十一月上线,现在总结一下整体的工作心得。
一、PC端与移动端区别
根据已有pc页面改版,做成移动端应用,需要先了解两者的不同点。
根据一般经验,我们可以知道PC端与移动端有以下区别:
- 屏幕尺寸:移动端的便携性使得它的屏幕面积比pc端小许多,可容纳的信息在空间上整体被压缩。
- 操作方式:移动端由拇指操作,拇指长度有限因此有拇指热区,pc端用鼠标操作,全区域易操作。
- 网络环境:移动端网络不稳定,受不同场景下的网络影响,会出现许多异常情况,pc端的网络情况较移动端稳定。
由此我们在移动端设计上,要考虑信息的可容纳度、拇指热区、异常页面。
二、产品功能结构
先看pc的前端页面,如下图,这是一个很常见的pc前端页面,有搜索、轮播图、个人中心等。
在将设计移动端功能之前,我们先了解原产品的设计逻辑,知道产品原本的功能结构,才能在原有基础上进行改造。
该产品的定位是垂直领域在线教育课堂,用户群体为政府机关人员,具有课程单一、受众少的特点。
在功能设计上,由首页、课程广场、在线大讲堂、案例评析、精英名师、个人中心六个模块组成;同时个人中心包含培训计划、考试中心、我的活动、我的成绩、选课广场、关注讲师、收藏课程七个模块——这是一个功能较多的在线教育学习网站。
三、产品功能优先级
在排列功能优先级前,接到需求,在线大讲堂模块在产品V1.0版本暂时不做。
因此我们将剩下的功能排出优先级:
- 核心功能:课程广场、培训计划、考试中心;
- 重要功能:案例评析、精英名师、选修广场;
- 一般功能:我的成绩、关注讲师等剩余功能。
四、移动端功能结构布局
移动端为小程序版本,结合小程序轻量、简洁的特点,我们需要在原有功能上做一些删减,同时将重要的功能放在显眼位置,方便用户在特定场景下操作;只需将首页、课程、培训、我的这四个核心功能作为标签;重点把pc端的培训计划和个人中心进行拆解,组合成适合小程序的轻量全面的产品。
在下文中,将选择移动端的“培训”标签来重点讲我的在设计中的考量。
五、PC端的个人中心
PC端的布局逻辑除个人中心外都简洁明了,首页是课程广场、培训动态、在线大讲堂、案例评析、精英名师的推荐位;课程广场包含全部课程资源;在线大讲堂指课程直播;案例评析包含相关领域案例和专业评析;精英名师涵盖所有课程的讲师——在上述模块中重点是课程广场里的课程资源。
个人中心涵盖的东西较多,也比较杂。
1. 缺点
1)左侧边栏无关的模块只是罗列,结构混乱,功能的优先级不明确;个人中心将核心功能培训计划,和一般功能我的活动、关注讲师放在一起,会造成培训学员对培训计划的使用场景和功能不明确,培训学员在刚接触所谓的培训计划时会比较迷茫。
2)在整个产品的定位中,培训计划应属于核心功能,学员均需在此在线教育评残参与培训,需要突出此功能及关联功能。
下面我们列出功能相关性。培训计划是包含后台管理员设定好的课程(选修课、必修课)和考试中心模块的,所以在培训模块里,培训计划、考试中心、选课广场关联性是很大的。
该产品涉及到的人员有两类,一类是建立培训计划、开设考试的管理员,一类是参与培训的培训学员。
管理员的操作流程如下图,管理员在后台创建培训计划,填写该培训计划的基本信息(培训计划名称、是否要考试等);之后添加培训课程和培训学员,该培训计划创建成功,确定发布后,传送到前端。
培训学员操作流程如下图,培训学员点击培训计划后可以观看该培训计划设定的相关课程,同时需要去选择选修课,通过学习课程来获得学分;达到学分后,若有考试,需进入考试中心参加考试,考试通过后方可通过该培训计划。
六、移动端的培训与我的
理解了培训计划与考试中心、选课广场的逻辑,可以在培训标签中将这三个模块放在一起;同时在我的模块中放入一般功能。培训动态、案例评析、精英名师仅在首页中设置入口,这样就完成了小程序的初步功能架构,后续原型图按照此逻辑展开即可。
此处奉上我的原型链接https://11w22f.axshare.com
再献上UI小哥哥关于培训模块的设计图:
七、总结
这次pc到移动端的产品功能拆解重组合经验,使我理解了产品的功能架构是多样性的,没有对错,只有好不好用的区别。
在对原产品有足够理解的基础上,才能发挥独到的设计,让用户体验到更好的产品;在未来的道路上我会更加努力,做一名有见解的产品经理。
本文作者@Cherry
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!