移动端原型图入门与实践

移动端原型图入门与实践

基本工具

Axure

原型图

流程图

产品需求文档

交互说明

Xmind

思维导图

Visio

泳道图

word

移动端原型图界面规范

界面组成部分

状态栏：375*20（非固定）导航栏：375*44标签栏：375*49内容区：375*554（非固定）

功能逻辑结构

页面：底部标签栏模块：间距隔离功能：功能点名称字段：具体文案表达面

元素层级对比

大小：从大到小明暗：黑色，深灰，中灰，浅灰，白色加粗：加粗，不加粗前后：前置，后置，固定位置

需求与层级的关系

核心：需求频率越高，层级越高；需求频率越低，层级越低

层级关系的深层原理：提高用户寻找目标信息的效率与速度

前提：用户对不同功能的需求频率不一样

启示：不同功能的位置大小与层级关系必须不一样

产品经理的双面

1、迎合用户需求；2、引导用户需求

（1）根据用户需求频率，决定功能的层级关系

（2）通过改变功能层级关系，来改变用户的使用频率

文字大小对比

10号字：极小字，罕见，少用11号字：最小号，常见，少用，灰色提示语12号字：较小字，常用，常见，二级字13号字：标准大小，正文，新闻资讯，聊天内容14号字：较大字，小标题，模块标题16号字：最大号，导航栏大标题，只用于大标题18号字：极大字，广告性质文字，少用

移动端常见一级页面

首页

社区/问答/论坛/话题/某圈

发现/附近/服务/推荐/精选

消息/通知

购物车/订单/客服

发帖/发布/创作/拍摄

我的

移动端重要二级页面

内容列表页

商品列表 餐厅列表 课程列表资讯列表 职位列表 视频列表频道列表 话题列表 人物列表景区列表 租房列表 酒店列表汽车列表 理财列表 更多

内容详情页

商品详情页 餐厅详情页 资讯详情页个人主页 店铺主页 问答主页话题主页 景区主页 更多

确认订单页

地址管理 收货人管理 订单链接 订单数据支付方式 合计支付

支付弹层页

支付宝支付 输入密码支付 其他支付弹层

订单管理页

全部，待支付，待发货，待收货，待评价

退换货页面

积分商城页

积分规则 积分明细积分任务 商品列表

签到积分页

签到规则

签到设计

活动落地页

活动规则

活动进度

参与方式

已参加用户

搜索与结果页

搜索页

搜索结果页

设置管理页

社区型

资讯型

电商型

修改资料页

数据统计页

原型图常见模块

搜索区

顶部标签栏

轮播图

金刚区

一行四列，五列二行四列，五列

功能推荐

宫格式 列表式瓷片式 模块式

切换标签

点击切换下拉筛选

内容热区

单列表双列表三列表

收货地址

评论区

问答区

购买浮层

选择弹层

视觉图转原型图

1、区域与结构大小、位置不变2、文字内容不变，大小不变，粗细不变3、图标位置不变，大小不变，圆角矩形4、间距不变，边距不变5、白色依然是白色6、浅灰色依然是浅灰色7、黑色/彩色 变成 黑色/深灰色