产品经理（14）#移动端产品设计
目录
用户体验
最小团队配置
今日十大热点
贴吧
移动端产品设计
做方案
案例（自由行产品）
具体内容
启动项
广告页
新手引导
1、幻灯片引导
2、遮罩引导
3、浮层引导
4、交互引导
案例（快车—>专车）
主框架
状态栏
导航栏
次级页面顶部导航栏
顶部导航的交互
标签栏
页面区
页面区-列表页
页面区-详情页
怎么详细设计移动端产品？
针对一个资讯APP
首页和资讯详情怎么设计？
方案：资讯列表页
方案：话题详情页
做产品重点
适配
空置图
设计快速梳理
案例【线下活动】
案例【互联网汽车】
案例【新车APP】
案例【二手车APP】
案例【互联网装修】
案例【K12】
语文app
用户体验
APP = native app 原生开发的app（下载入手机桌面的；框架不太变#活动页面为H5#）
Web app / 小程序 ≈ H5 = 移动端网页
web = PC网页
原生开发页面要分享必须做一套H5页面
例如：京东商品页（native）分享到微信后，京东小程序(H5)
微信支付页 icon 每日千万级
最小团队配置
产品经理 1（+1）
UI设计 1
前端 web 1；iOS 1（+1）；Android 1（+1）
后端 2（+1）
运营
（初创）
松果生活 今日十大热点 贴吧 哈罗单车
角色 小 中 大 大
产品PM 2 15 40~50 50
设计UI 2 3 5~10 10
开发RD 6 45 150~200 200
测试QA 0 3 10 10
产品：其他 = 1 ： 5~7
今日十大热点
今日十大热点 PM RD
中 主管 1 主管1
PM 15 iOS 2 iOS 2
UI 3 Android 3 Android 3
RD 45 web/H5 1 web 2
QA 3 后台 1 后台 16
策略 1 算法 8
渠道 1（对接）
自媒体 1（试运营期间）
评估 3
贴吧
贴吧 PM
大 主管
40~50 iOS
100~200 Android
10 web/H5
小程序
后台
策略
渠道
数据
会员
广告
评估
移动端产品设计
做方案
0、梳理业务（组内人员都在做什么，每个人每天在做什么）
1、列需求———>2、排需求优先级——>3、做方案
案例（自由行产品）
需求&优先级（我的）
1、路线规划
4、路线推荐
5、路线复制
6、风景推荐
3、车\机票购买
2、酒店订购
需求&优先级（标答）
3、机票 4、酒店
7、保险 9、美食
1、攻略 6、租车
2、社区 5、门票
10、客服 8、约拍
具体内容
1、logo 2、启动项 3、广告页 4、引导页 5、主框架 6、页面区
启动项
logo 、 slogan
交出品牌定位
传递情感
广告页
1、图片、视频
2、广告标识
3、查看详情入口
4、跳过
新手引导
1、幻灯片引导
一页幻灯片（现阶段该方案最优解）
2、遮罩引导
问题：打开后，先看遮罩区，十分不适合用户产品
适合：小说类、视频类、游戏
3、浮层引导
现阶段多数在用
4、交互引导
大多用户已习惯
案例（快车—>专车）
需求&优先级（我的）
1、更快乘车
2、限时优惠
需求&优先级（标答）
文字、图片、按钮
主框架
移动app产品结构
标签式（大部分为此）
抽屉式（侧边栏）#唯品会、QQ音乐#
平铺式 #手机系统#
状态栏
1、颜色：与导航栏同色/黑色
2、功能：返回/消息提示/刷新状态提示（他是可以用的）
导航栏
导航栏设计
一级页面顶部导航栏怎么设计？
一级页面导航栏：1、产品定位 2、页面特性 3、独立功能
一级页面导航栏素材
搜索（大框或右按钮） CSDN 消息（左、右） 酷安
logo（左、中） 亚马逊购物 分类（左、右） 华为视频
发布（右） 知乎 定位（左、中） 搜款网
扫一扫（右） 牛客 菜单（左） 豆瓣
更多（右） 橙瓜 添加（右） 支付宝
我的（左） QQ 历史记录（右） 咪咕视频
客服（右） 美的美居 离线（右） 优酷
购物车（右） 薄荷健康 通讯录（左、右） 微信
次级页面顶部导航栏
二级（次级）页导航栏：
1、返回 2、更多 3、页面特色
次级顶部导航栏怎么设计？
页面标题（中或没有） 消息（右）
返回（左） 客服（右）
分享（右） 搜索（右）
更多（右） 收藏（右）
购物车（右） 评论（右）
发布（右） 发布者（中间）
顶部导航的交互
1、固定
2、默认显示，上滑收起部分（保留核心需求功能），下滑又出现
3、默认显示，但不明显，上滑凸显
标签栏
个数：3~5个
显示：icon、icon+文字、文字
默认选中位置：第一个，中间
特殊功能：中间
标签承载的功能：1、切换该频道 2、刷新 3、快速定位 4、提醒
重要的独立模块：社交、商城、资讯、消息、购物车、通讯录、分类、订单、搜索、专题、会员、等等
底部标签栏的交互方式：
1、固定（镂空固定）
2、默认显示，上滑收起，下滑又出现 #最好不用#
案例-（马蜂窝#优化#）
马蜂窝—自由行社区类产业
不要用“发现”（微博、微信能用）
（我的）
首页 目的地 路线 消息 我的
（标答1）#重社区#
首页 攻略 收藏 消息 我的
首页 行程 消息 我的
首页包含：社区、搜索（已知目的地不就可以直接搜索了嘛，所以目的地不需要知道）
（标答2）#重盈利#
页面区
页面区-列表页
1、纯列表（如微信一级页面）
2、通栏：（文字更重要，让用户了解内容）
一张大图
三张小图
3、双栏：（图片、视频更重要，所见即所得）
瀑布流（整齐/不整齐）
转发不离开本软件，分享离开本软件
页面区-详情页
一级页面多个逻辑（最好不超过三个）
次级页面，一个页面一个逻辑（围绕内容的逻辑）
形式/内容/功能上一样是一个逻辑
banner轮播和平铺导航不算逻辑（只在顶部）
怎么详细设计移动端产品？
0、梳理业务
1、列需求点/功能点
2、用户浏览顺序
3、用户需求/功能优先级
4、参考竞品
针对一个资讯APP
首页和资讯详情怎么设计？
需求：
首页： 资讯详情页：
用户看当天热门新闻 用户看详细内容
用户看感兴趣的新闻 标题
标题 正文
缩略图 发布时间
时间 评论
评论数量（辅助用户筛选热门） 推荐
tag 点击率 8%
方案：资讯列表页
用户筛选新闻
列需求 优先级
资讯标题 资讯标题
图片 图片
来源 时间
时间 评论数
收藏数 来源
评论数
阅读数
列表页
方案：话题详情页
话题名称
话题内容
发布者（发布时间）
回复者（回复时间）
回复内容
楼中楼
点赞按钮
回复按钮
收藏
分享
做产品重点
1、业务（定位/盈利）业务！业务！！业务！！！
2、内容 内容！内容！！
3、功能
4、交互
5、设计
适配
APP-UI：750*1334（2x）,3x
网页：自适应，或做两套
cookie 14天
UID = user ID
IMEI 手机机器码 *#06#
空置图
1、网慢没加载出来
2、列表无内容
设计快速梳理
案例【线下活动】
主要业务：线下活动
1、自营活动：品牌；引流
2、第三方认证上传的活动
产品定位：解决用户参加线下活动的问题
用户画像：（按目的）
兴趣——找不到符合兴趣的活动
社交——认识不到想认识的人；害羞
学习——价值
打发时间（-）
领东西（领到有用的东西）
需求流程：看活动-筛选活动-确定意向活动-报名活动-提醒-线下签到参与-反馈/评价
主要功能模块：
前台：全部活动、分类、下单流程、参与环节
后台：公司后台、第三方后台、上传活动、店铺管理、人员管理、活动流程核销等、财务管理
案例【互联网汽车】
（我的）
达到
（标答）
业务：买车（新车、二手车）；买后（汽车后市场）
买新车——用户（品牌、车型、价格、4s店、评测等）；公司（4S店。综合店）
二手车——用户（品牌、车型、价格、评价、车况、位置、质检等）；公司（收车、质检、交易、门店）
案例【新车APP】
产品定位：解决用户买车的问题
用户画像：（按目的分）
上班需要——价格；性价比
自驾游——性能；空间
家庭——安全
消费升级——品牌（体面）
商务——排场
需求流程：领新人福利-筛选汽车-看评测-联系（留信息/打电话）-线上沟通-到店
前台功能模块：汽车筛选（品牌/车型）、评测信息、资讯、4s店列表、社会、我
后台功能模块：公司后台（内容等）、4s店后台（更新基础信息；联系客户跟进；店铺管理；推广管理）
案例【二手车APP】
二手车——用户（品牌、车型、价格、评测、车况、位置、质检等）；公司（收车、质检、交易、门店）
定位：解决用户买二手车的问题
用户画像：（按目的）
代步练手——价格且还ok
体验/体面——品牌/车型/年代
工作——质量
短期用车——便宜
需求流程：引导登录/领新手红包-筛选汽车/冷启动-推荐-详细了解&客服-跟进看车等-下单
案例【互联网装修】
业务：验房；建材（齐家）；购物（装修大件/家具/家电）；设计；施工；监理
设计：
产品定位：帮助用户找到喜好的装修设计/设计师
用户画像：（按目的分）
出租房：性价比（省钱好看，一般耐用）
自住新房：喜好选择（搭配）；设计师帮助
办公室：风格（获取内容）
老房改造：实用（空间；喜好）
需求流程：看风格-看分享-找设计师-设计方案（自定/设计师出）-施工（实施内容获取）-分享心得/经验
前台：各类风格、社区分享（发布）、设计师、我
后台：公司后台、设计师后台、主页编辑、作品等
案例APP：土巴兔、好好住、窝牛
案例【K12】
业务：数学、英语、语文、思维、艺术、理综、文综、体育、题库、竞赛
语文app
用户画像（按目的）：
作文：思路、分数
阅读：理解
古文：快速学
思维：逻辑差
需求流程：冷启动-分类-看资料-看课程-做测验-考核-打分-分享
主要功能：
前台：冷启动、资料列表、课程列表、测试/考核环节、订单流程
产品经理（14）#移动端产品设计相关推荐
- B端产品经理与C端产品经理的区别
当谈到B端产品经理与C端产品经理时,首先想到的便是B端产品面向的是企业或组织,C端产品面向的是用户,但仅仅知道这些是还不够的,B端产品经理与C端产品经理的工作内容不同,需求分析规划思路也大不相同. 1 ...
- B端产品经理与C端产品经理
TOC的产品是与用户接触,挖掘用户需求,定义用户价值,思考和实践,准确推动项目进程,是个从无到有,从思考到创造出来的过程.需要产品经理有较强的用户嗅觉,能够发现用户的真实需求,通过数据分析,来找到在市 ...
- 【产品经理】B端产品，如何验证自己的价值？
在竞争激烈的互联网时代中,B端产品如何验证自己的价值是众多产品经理思考的问题.本篇文章通过两个方面来阐述自研系统的B端产品,应该如何找准自己的位置,证明自己的价值,一起来看一下. 刚入行to B业务的 ...
- 产品经理，业务或产品意识
互联网产品的运营指标- http://blog.csdn.net/ZLJ925/article/details/78606814 产品经理之产品运营-全栈工程师 - http://blog.csdn ...
- 产品经理必备知识之网页设计系列（三）-移动端适配无障碍设计及测试
前言 第一部分参见 产品经理必备知识之网页设计系列(一)-创建出色用户体验 https://blog.csdn.net/wenyusuran/article/details/108199875 第二部 ...
- 产品经理必备知识之网页设计系列（二）-如何设计出一个优秀的界面
前言 第一部分参见 产品经理必备知识之网页设计系列(一)-创建出色用户体验 https://blog.csdn.net/wenyusuran/article/details/108199875 第三部 ...
- 产品经理必备知识之网页设计系列（一）-创建出色用户体验
前言 设计师和开发人员在构建网站时,需要考虑很多事情,从视觉外观到功能设计. 本文将重点介绍创建出色用户体验的主要原则.方法和具有启发性的案例:从用户体验地图等整体结构开始,到单个页面的设计:还将介绍 ...
- 女生做产品经理好吗_产品经理如何做产品架构设计
编辑导语:对于产品经理来说,发展到一定阶段后,日常的工作内容往往离不开产品架构设计.这是一个极其细致的活,需要产品经理有很强的架构能力.那么,产品经理如何才能摸清产品的底层逻辑.提升对产品的认知,做好 ...
- 产品经理自学资料/UI交互设计/产品相关电子书/求职招聘/案例资料免费领取
产品经理自学资料/UI交互设计/产品相关电子书/求职招聘/案例资料免费领取 最近,用了一周的时间,把现在已经有的产品经理相关的资料整理一下,最后整理了大概92G相关的资料.根据我自己的分类,涉及的内容 ...
- B端产品经理和C端产品经理，做哪个更好？
要回答B端产品和C端产品经理,做哪个更好?首先需要充分的理解,B端产品经理和C端产品有哪些不同,然后根据自身的实际情况去判断自己适合做什么. 首先从以下几点分析C端产品和B端产品的区别: 产品面向人群 ...
最新文章
- jPA自动创建数据库表的一些配置
- pytorch 维度练习
- 好架构是进化来的，不是设计来的
- python维度变换_Python NumPy用法
- PDT + Xdebug 调试 PHP
- Spring 中使用redis缓存方法记录
- 网络（13）-SYN flood及其应对方法
- TypeScript入坑
- STM32L5特性简介 Cortex-M33内核TEE-TrustZone信息安全
- Swift 数组遍历 ForEach .enumerated() makeIterator() indices
- simulink仿真结果出现振荡
- 微积分 —— 曲率与曲率半径
- 安卓webview长按分享，长按选择，长按复制，仿好奇心日报长按分享自定义弹窗的实现
- 【收藏】B站科普硬核节目
- OpenCV常用函数极简简介
- 【i.MX6ULL】驱动开发3——GPIO寄存器配置原理
- Python深度学习实现DIY专属个人表情包
- 哪个工具可以保护计算机免受ESD的影响,可以避免ESD影响的实用解决方案
- 关于学习js的一些命令行
- 神经网络常用和不常用损失函数