目录
用户体验
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
用户画像（按目的）：
作文：思路、分数
阅读：理解
古文：快速学
思维：逻辑差
需求流程：冷启动-分类-看资料-看课程-做测验-考核-打分-分享
主要功能：
前台：冷启动、资料列表、课程列表、测试/考核环节、订单流程
1166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
