原型分类

原型草图：
手绘
用于梳理产品页面逻辑

低保真原型图（灰度原型 线框图）
突出页面结构和布局
文字模拟真实信息
多为无色彩处理，重点色采用产品主题色

高保真原型
视觉高度还原
模拟真实信息
用于汇报展示

原型尺寸

分为移动端、APP、M 站和 Web 端
移动端不同的手机型号尺寸不同 ：

• APP 或小程序：W375px H667px 或 W320 H480px
• 安卓设计图的时候建议以 480 * 800 作为标准
• Web 端通常 W 大于等于 1200px 像素

原型绘制操作

画布 、标尺 、辅助线：可以拖拽和锁定 、网格 、背景色
网页绘制的时候需要注意当前页面状态
例如，购物车主页：
正常状态
编辑状态
清空状态
初始化状态
异常状态（网络异常）

结构：
线性结构：流程
层级结构（包含关系）：页面，尽量不要超过三级；页面树
网状结构：算法

一个按钮要做大，两个按钮要分主次
使用 SHFIT 等比缩放
原型重要的是突出页面的结构

原型绘制的要求

所有元件之间必须对齐，需要对齐到像素级别
所有元素，只使用黑白灰三种颜色
占位图只使用基本的矩形，可适当增加灰度 icon
不用设计交互动作，所有页面展开，每个状态都需画出（例如购物车，0 初始化，正常态，编辑态，清空状态，新用户）
画页面的时候，需要有页面编号规则，例如 1.1.1

移动端原型绘制

落地页：用户打开软件看到的第一个页面
内容类型：UGC 短视频；广告视频；
推荐规则：视频属性；用户喜好；用户使用习惯；公司运营要求；公司利益要求；大背景要求

以抖音的推荐页为例，展示的信息字段：

静态数据：

UGC 视频
视频：视频文件、视频大小、视频清晰度、视频时长、视频描述（话题）
用户：用户名、用户头像、用户关系
音乐：作者、音乐标题、音频、时长
相关的标签：位置、购物车、用户关系、滤镜
来自热点榜：（如果视频在排行榜，就显示排行榜信息）
直播（如果发布人正在直播，就提示直播中的状态）
APP 推荐：（官方推广）

动态数据：

播放量（发布人可见）；点赞量；评论量；转发量

信息 = 给用户看的东西
功能 = 给用户用的东西

页尾的设计：
无尽列表 – 加载中
页尾提示 – 我们是有底线的
页尾 Logo
页尾设置跳转引导

网易云原型绘制练习：