应用设计规范
A 交互规范
A1 使用说明
- 本文档定义了微博第三方产品的交互框架结构，相关内容的尺寸定义和视觉样式请查阅微博视觉规范和PSD源文件。本文档中02、03、04部分为必选项，贵方设计产品时必须遵守。05部分为可选项，列举了微博现有的布局、组件/控件样式，供设计时参考。
A2 交互设计原则
- 第三方产品在设计方案除了遵循本文档所列的通用规范外，有较大的设计自由。微博设计部提供以下交互设计原则做参考：
- 统一性和标准性
- 同类型页面采用相同或相似布局结构，同类操作的响应方式保持一致；
- 导航类结构保持一致，包括全局导航、搜索、筛选等；
- 文案表述方式统一且易懂，包括信息提示、称谓、菜单、语法标点、功能名称等；
- 信息清晰、导向明确
- 主次内容布局合理，各类型信息组织逻辑清晰；
- 清楚知道当前页面状态，二级及以下页面要有清晰的导航层次，例如统一导航、面包屑等；
- 反馈及时有效
- 对用户操作及时反馈；
- 反馈信息准确、简洁、直白，并对用户操作具有指导性；
- 错误及安全预防
- 对有严重后果的操作提供必要提醒；
- 提供预防或纠正错误的方式；
- 提供隐私保护措施；
A3 独立第三方产品的框架规范
A3.1 整体框架布局
- 第三方产品需严格包含以下五部分：微博顶导、页头、内容、底导及微博页尾。其中，微博顶导和页尾请直接调用接口，页头、内容及底导请贵方依据交互框架原则，自行设计具体结构内容。
A3.2 微博顶导
- 原则上第三方产品请直接调用微博简版顶导。如果有特殊需要想使用全版顶导，请联系微博相关接口人确认。
A3.3 页头
- 页头是整个产品的全局导航区域，必须包含产品的Logo和标题。其他元素，例如Slogan、品牌头图展示、搜索框、运营位等，在不破坏页头整体结构的前提下，请自行布局。
- 页头有两种尺寸可选择：标准页头和窄版页头。标准页头适用于产品的一级页面，窄版页头适用于二级页面。设计窄版页头的目的是为了在二级页面能更多地展示内容，所以把页头高度压低。在具体产品中，请遵循以下原则，产品页面不可以只使用窄版页头，产品的一级页面也不可以使用窄版页头。
- 如果产品的一级导航放在页头区域，请靠右对齐，参考以下结构：
A3.4 内容
- 内容区的布局有多种分栏结构供使用：三栏版、两栏版（左窄右宽、右宽左窄）、通栏版。栅格系统尺寸请查阅视觉规范定义。产品可以依据自身结构特性，选择适当的布局版式。
- 三栏版
- 左侧为导航，中间为主内容区，右侧为推荐、帮助等次要内容。
- 两栏版-左窄右宽
- 左侧为导航，右侧为内容区。依据产品内容可以选择以下四种左窄右宽的两栏布局。
- 两栏版-左宽右窄
- 左侧为内容区，右侧为导航。依据产品内容可以选择以下四种左宽右窄的两栏布局。
- 通栏版
- 通栏结构对于导航和主次内容没有明确规范，请自行设计。原则，信息结构清晰、导航指引明确。
- 如果上述分栏结构无法满足产品实际需要，可以在此栅格系统基础上，以30px为模数单位进行变化，如720/260。
A3.5 底导
- 底导是作为该产品周边相关的外部导航入口，例如第三方其他产品的链接、移动端下载链接等。请参考以下结构：
A3.6 微博页尾
- 第三方产品请直接调用微博页尾。
A4 嵌入微博个人主页的应用框架规范
A4.1 整体框架布局
- 下图虚线框选的部分是内嵌应用的内容区。与独立网页的设计不同，内嵌应用的交互组件/控件、视觉样式需严格遵守微博的设计规范，重用部分请直接调用微博的相关接口。
A4.2 应用内容区分栏布局
- 应用内容区建议使用两种分栏布局：560-20-380的两栏，940的通栏。
A5 通用组件及控件规范
A5.1 登录页及登录浮层
- 登录，有两种形式，页面和对话框。
- 当需要使用登录页面时，请调用微博Mini登录页面，该页面除了运营区可以自定义，其余部分不能改动。
- 当需要使用登录对话框时，请调用微博登录面板。
A5.2 微博发布器
- 当在第三方产品中需要使用分享微博的地方，请调用微博发布器，该发布器中的元素不允许修改。
A5.3 对话框和弹层
- 对话框和弹层都是用来完成某些信息提示或任务的交互载体，不同的是，对话框偏向于更加重要的操作或信息行为，居页面中间出现或在操作对象附近出现，是强制打断用户当前任务。而弹层更偏向于快捷的操作或信息行为，在操作对象的附近出现，希望尽可能少的打断用户当前任务。
- 对话框
- 如下是对话框的基本结构：
- 对话框必须含有标题、“X”按钮、内容和命令。标题和内容左对齐，关闭和命令右对齐。命令区必须含有关闭对话框的操作。原则上，对话框高度不允许太高以至超出用户屏幕之外。
- 对话框主要分两类：信息类对话框和任务类对话框。
- 信息类对话框适用于重要提示、确认、警告、反馈等场景，其内容区主要是文本信息描述。要求文本信息左侧需有类型图标，例如删除、确认、警告操作要使用不同的图标做类型区分。任务类对话框适用于对象选择、表单填写等场景。
- 弹层
- 弹层在操作对象的附近出现，如下是弹层的两个基本结构：
- 带命令弹层适用于任务类的行为，不带命令弹层适用于成功提示的反馈。不带命令弹层会自动消失，所以，此提示文案不是用户必须看到的。
B 视觉规范
B1 使用说明
- B视觉规范定义了微博第三方产品的栅格系统、框架性视觉尺寸及样式。相关源文件可下载微博提供的PSD文档。
- 视觉规范中使用了三种单元尺寸块，绿色为10px，红色为15px，紫色为20px。
B2 栅格系统
B3 导航
B3.1 微博顶导
- 顶部导航居中，高度：25px。
B3.2 页头
- 标准页头
- 窄版页头
B3.3 页尾
B4 微博发布器
B5 基本控件
B5.1 加关注按钮
B5.2 头像
B6 嵌入微博个人主页的应用规范
B6.1 个人主页页卡icon规范
- Icon限定高度：20px，高度含投影应在22*22px以内
B6.2 页面模块间距
B6.3 右侧模块规范
B6.4 右侧模块设计示例（可选）
- a 用户关系类内容
- b 多媒体内容
- c 话题类内容
- d 微博类内容
B7 对话框和弹层
B7.1 对话框和弹层尺寸定义
- 标准对话框
- 模态对话框（强制压黑背景）
- 弹层
B7.2 设计示例（可选）
- 模版选择对话框
- 微博发布器附件选择弹层
B8 Logo规范
B8.1 Logo比例及光源
- 中英文域名组合比例关系（此为推荐组合）：
- 无域名组合比例关系：
- 光源位置为正上方90度
B8.2 Logo图形主体及延展区安全范围
- 如图所示，以Logo主体高度为基准，其延展范围不得超过主体高度的20%。
B8.3 Logo字体
- 背景明度范围B70~B100时，使用以下规范：
- 背景明度范围B0~B60时，使用以下规范：
B8.4 Logo设计风格建议
- 建议的设计风格为：轻薄化、平面化。应避免使用过重的渐变质感、水晶和发光。
- 以下是微应用和微盘前后的设计对比，供参考：
