业务流程梳理

业务流程梳理时，先找到角色，然后思考角色的主要任务
以阿姨上门家政服务业务为例，绘制流程图

想象业务场景，梳理可能的业务流程步骤：

页面结构设计

用户体验 5 要素：
表现层（UI）
框架层（原型）
结构层（产品结构、信息架构、功能结构、界面结构、流程）
范围层（品类、品牌、业务线）
战略层（价值、目的）

产品的移动端形态：APP、M 站、公众号、小程序
APP 流程：启动图标 – 闪屏（应用加载中…） – 落地页
移动端设计 6 原则：简洁、高效、一致性、反馈、情感化、移动化

落地页：
主导航：底部标签导航
二级导航/频道：标签导航
中间内容：信息列表 List

内容详情页，取决于信息字段
例如，新闻：新闻标题、发布时间、作者、正文（图文、音频、视频），动态：评论、转发、收藏、热度

绘制页面结构：
轮播图，banner
图标菜单导航，金刚区

主导航设计

底部标签：最多 3 个，最多五个加抽屉，V1.0 底部标签最多 3 个
抽屉：工具型的产品比较多，流程单一，简化用户的体验流程，扩展性强，类似滴滴

页面内容区域
矩阵/桌面式：功能之间独立，比如我的（个人中心）、推荐页面、金刚区

下拉菜单/选项/更多菜单：点击更多，显示二级导航栏

点聚式：多用于开启重要的功能流程，如购物车、发布

主页面框架设计

走马灯：精品内容，banner 展示，数量在 5-7 个，例如 APP Store 推荐，注意思考页尾的设计
列表式：信息流展示，如搜索结果，文章推荐，消息，例如今日头条
瀑布流：图片为主的信息展示，内容无限加载，例如小红书
选项卡：分类划分，多用于页面顶部，如频道导航、推荐标签，横向最多显示 4-5 个

金刚区：页面的核心功能区域，多为多行排列的宫格区图标
瓷片区：板块拼接起来的运营位，类似淘宝的聚划算百亿补贴区域

消息通知和状态提示

系统通知：push 消息
弹窗通知：多用于活动通知、红包领取
浮层通知：多用于网络异常提示
标志通知：常见红点和数字

空状态：1.初始状态、2.清空状态、3.出错状态

互动状态：用户和产品的交互，常与手势结合，如刷新、加载、状态提示

加载设计

页面的加载方式

启动加载：配合缓存使用
跳转加载：当前页面加载；跳转页面加载
当前页加载：用在带有判断流程的功能中
例如：扫码 — 判断开锁是否成功 — 成功 — 用车中界面 — 关锁 — 付款结算 — 用车结束页面
进入页加载：内容浏览中，页面的切换
例如：首页 — 歌单列表 — 歌单详情

页面内容的加载方式

分步加载：先加载流量小的内容，例如文字、小图，后加载大图、视频
分页加载：列表内容分段处理，XX 条为一页
自动加载：通过手势自动获取新的内容，需和网络环境结合 ，例如上划加载下一页
预加载：提前加载未浏览的页面内容，例如页面框架

智能加载：根据网络环境的变化，自动切换加载方式（网络环境提醒：已从 Wi-Fi 网络切换为移动网络）
本地缓存：浏览过的内容保存到本地，缓存机制

使用引导设计

发新版本的时候，帮助用户更好的理解新版本的使用
幻灯片：首次安装并启动客户端时，闪屏页后加入使用引导页
浮层式：提示重要功能或隐藏操作，大概显示3秒自动消失