原型规范

原型分类

图标icon

原型尺寸

1）iOS：375x667（逻辑尺寸）2）Android：360x640font color=\"#323232\

其它

1）低保真=黑白线框图，无交互，图文大部分为假内容2）高保真=配色线框图，带全部交互，图文使用真实内容

现实工作中，原型设计是产品经理最核心的工作之一。规范性是必须熟练掌握的重要工作指导原则。关于规范性的整体要求概括为：尽可能用简单、准确、清晰、直观的方式来表达出主要的业务和功能流程 。总体规范的目标为：能够通过各部门的原型综合评审，顺利推进项目进展。大部分公司不会明文规定原型具体要达到什么规范，而是根据实际需要、任务周期以及交付目标综合考量，灵活处理。记住一个原则:“先完成、再完美”。

图片

1）根据保真程度的要求，图片可选择使用占位符或真实图片。使用占位符时，需标明类型为图片。2）如使用占位符，要求图片的宽高比要么为正方形，要么符合黄金分割，要么具备整数倍关系。不可以随意制定宽高。3）同一类元素的图片，在整个产品中的不同页面出现时，图片必须保持同等宽高比例放缩。4）如使用真实图片，尽量选择符合实际场景的图片，分辨率和清晰度要高。不能改变原图的宽高比例，但可以截图部分内容。尽量使用16：9的图片宽高比

1）需要使用ICON的地方，尽量优先使用AXURE自带ICON。2）尽量不使用图片作为ICON

系统界面

1）凡列表页，或含有列表形式的区块，列表内的条数不可少于两个。2）列表项可以用直线或区块来分隔。3）区块之间的距离一般为 10 的倍数，常用 10px、20px小技巧：1）按住 ctrl 键通过方向键移动元件，每次移动的距离刚好是 10px。2）可用方向键微调，每次移动一个像素

1）如无必要，页面上不允许使用任何仅仅起到美化作用的元素，包括不规则图形的使用。2）每个元素都必须具有功能意义

原型结构

什么是原型？

web分页

1）元素与元素之间，元素与边界之间，一般都必须留有间距。2）对齐和分布：所有元素必须存在对齐关系：例如水平对齐、垂直对齐、居中对齐多行元素或多列元素时，也必须遵守对齐和分布原则。比如：水平等距分布、垂直等距分布

文本内容

在项目开发的初始阶段，人们对产品的需求认识常常不够清晰，使得开发过程中出现各种风险和问题。因此，可以先做模拟最终目标产品的假设设计，其目标只是探索可行性，弄清产品需求；然后在此基础上进行开发和项目实施。通常把这个模拟真实产品的假设模型，称为“原型”。原型就是最终产品实现之前的DEMO。

表单

列表

文字

间距对齐

1）功能性的文本，必须使用有明确含义的文本。例如：“关注”，”加入购物车“，“收藏”2）非功能性的文本，即内容类的文本，可使用象征性的文本来代替真实内容。例如：用户名称，商品标题，新闻内容等。

1）凡是用户可以进行输入操作的表单控件，必须使用能够真实操作的控件。2）不能因为美观考虑而自己重新绘制，失去了可操作性。3）按钮：所有按钮的宽度要保持一致。如非特殊情况，所出现的位置也应一致。4）单行文本输入框的高度应始终一致

1）除高保真以外，尽量不要使用任何彩色2）只允许出现 “黑白灰”极个别的特殊按钮上，可以使用彩色?即使是高保真，整个产品的主色调也不要超过3种。

1）字号要小。2）文字可加粗，一般不要使用斜体，下划线等3）一个页面中正常情况下只应有一个主标题。

1）连续性页面（或列表）应加入分页区块。必须提供上一页，下一页链接。2）超过一屏的内容，在底部应有go top按钮3）超过三屏的内容，可以在头部设提纲，直接链接到文内锚点。4）后台需要分页时，通常不建议采用瀑布流式布局。前台不限。

多媒体

音频和视频，需设计出“可播放”的形式

1）凡调用设备自带的界面或标准弹框的，均可直接截图。2）但截图的界面不可进行二次加工。

按照模块顺序，采用分层编号来作为页面名称的前缀。例如：6-11-个人资料修改页采用序号来命名文件前缀的好处是：数字比文字更精确准确的代表某个具体页面。便于与设计核对设计稿、与前端核对交互、与技术核对文档。便于测试，便于在众多页面中，快速查找某一页面，便于在开会中，确认大家讨论的页面不存在误解。常常有两个很接近的但不同的页面，因为命名混乱而分不清。在讨论时也不是针对同一目标页。

1）先制定好页面结构树，再开始设计原型2）页面结构树以大功能模块、频道或栏目来划分，必须有层级关系。

页面命名规则

总结

色彩设计