新浪微博第三方产品交互设计规范 -WEB端 微博UDC新浪微博第三方产品交互设计规范WEB 端产品新浪微博设计中心 UDC目录A 交互规范 4A1 使用说明 4A2 交互设计原则 4A3 独立第三方产品的框架规范 5A3.1 整体框架布局 5A3.2 微博顶导 5A3.3 页头 5A3.4 内容 5A3.5 底导 6A3.6 微博页尾 7A4 嵌入微博个人主页的应用框架规范 7A4.1 整体框架布局 7A4.2 应用内容区分栏布局 7A5 通用组件及控件规范 8A5.3 登录页及登录浮层 8A5.4 微博发布器 9A5.5 对话框和弹层 9B 视觉规范 11B1 使用说明 11B2 栅格系统 11B3 导航 11B3.1 微博顶导 11B3.2 页头 12B3.3 页尾 12B4 微博发布器 12B5 基本控件 13B5.1 加关注按钮 13B5.2 头像 13B6 嵌入微博个人主页的应用规范 13B6.1 个人主页页卡icon规范 13B6.2 页面模块间距 14B6.3 右侧模块规范 14B6.4 右侧模块设计示例（可选） 14B7 对话框和弹层 16B7.1 对话框和弹层尺寸定义 16B7.2 设计示例（可选） 17B8 Logo 规范 18B8.1 Logo 比例及光源 18B8.2 Logo图形主体及延展区安全范围 19B8.3 Logo 字体 19B8.4 Logo设计风格建议 20# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDCA 交互规范A1 使用说明本文档定义了新浪微博第三方产品的交互框架结构， 相关内容的尺寸定义和视觉样式请查阅新浪微博视觉规范和 PSD源文件。
本文档中02、03、04部分为必选项，贵方设计产品时必须遵守05部分为可选项，列举了微博现有的布局、 组件/控件样式，供设计时参考A2 交互设计原则第三方产品在设计方案除了遵循本文档所列的通用规范外，有较大的设计自由新浪微博设计部提供以下交互设计原 则做参考：统一性和标准性同类型页面采用相同或相似布局结构，同类操作的响应方式保持一致；导航类结构保持一致，包括全局导航、搜索、筛选等；文案表述方式统一且易懂，包括信息提示、称谓、菜单、语法标点、功能名称等；信息清晰、导向明确主次内容布局合理，各类型信息组织逻辑清晰；清楚知道当前页面状态，二级及以下页面要有清晰的导航层次，例如统一导航、面包屑等；反馈及时有效对用户操作及时反馈；反馈信息准确、简洁、直白，并对用户操作具有指导性；错误及安全预防对有严重后果的操作提供必要提醒；提供预防或纠正错误的方式；提供隐私保护措施；# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC丈岸.可赴夸皑博底寻，W 耳直出*9%忙各壬人口原则上第三方产品请直接调用新浪微博简版顶导如果有特殊需要想使用全版顶导，请联系微博相关接口人确认A3独立第三方产品的框架规范A3.1整体框架布局第三方产品需严格包含以下五部分：微博顶导、页头、内容、底导及微博页尾。
其中，微博顶导和页尾请直接调用接 口，页头、内容及底导请贵方依据交互框架原则，自行设计具体结构内容便坦出穹荷強吏学*何含主非融暂主体農产品人口页头.包含第三方产帛Logo标1L全爲号SW氏容.名詬栅喑術屁 目g所有内看.爭几訴A3.2微博顶导# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDCA3.3页头页头是整个产品的全局导航区域，必须包含产品的 Logo和标题其他元素，例如 Slogan、品牌头图展示、搜索框、运营位等，在不破坏页头整体结构的前提下，请自行布局页头有两种尺寸可选择：标准页头和窄版页头标准页头适用于产品的一级页面，窄版页头适用于二级页面设计窄 版页头的目的是为了在二级页面能更多地展示内容，所以把页头高度压低在具体产品中，请遵循以下原则，产品页 面不可以只使用窄版页头，产品的一级页面也不可以使用窄版页头如果产品的一级导航放在页头区域，请靠右对齐，参考以下结构：tcqc 产品标题 守航亞 TKTE2 剂曲号如刚A3.4内容内容区的布局有多种分栏结构供使用：三栏版、两栏版（左窄右宽、右宽左窄） 、通栏版。
栅格系统尺寸请查阅视觉规范定义产品可以依据自身结构特性，选择适当的布局版式三栏版左侧为导航，中间为主内容区，右侧为推荐、帮助等次要内容150两栏版-左窄右宽左侧为导航，右侧为内容区依据产品内容可以选择以下四种左窄右宽的两栏布局 / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC两栏版-左宽右窄左侧为内容区，右侧为导航依据产品内容可以选择以下四种左宽右窄的两栏布局 / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC通栏版通栏结构对于导航和主次内容没有明确规范，请自行设计原则，信息结构清晰、导航指引明确98030px为模数单位进行变化，如 720/260如果上述分栏结构无法满足产品实际需要，可以在此栅格系统基础上，以A3.5底导底导是作为该产品周边相关的外部导航入口，例如第三方其他产品的链接、移动端下载链接等请参考以下结构:拆辰1灘1AD 诟AO曲 AE&3A □啓M：舷AC砲入匚極ACISH AEBSSE人口SI/ACtSSE人□傩ADt^aAC" Faersir典匚标菱-A3.6微博页尾第三方产品请直接调用新浪微博页尾。
coprri^fti c im-2012 am咅斤勺 /. r-i.- f -vi ■ ■■- - jfif I? - i：＞r. - ; .. | ■'v ti - a:rSfd?＜「网t fill j(b，iR :A4 嵌入微博个人主页的应用框架规范A4.1整体框架布局下图虚线框选的部分是内嵌应用的内容区 与独立网页的设计不同， 内嵌应用的交互组件/控件、视觉样式需严格遵守微博的设计规范，重用部分请直接调用微博的相关接口头惟底导微博页尾A4.2应用内容区分栏布局应用内容区建议使用两种分栏布局： 560-20-380 的两栏，940的通栏20560330940# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDCA5A5.3通用组件及控件规范登录页及登录浮层登录，有两种形式，页面和对话框当需要使用登录页面时，请调用微博 Mini登录页面，该页面除了运营区可以自定义，其余部分不能改动憎£1性还没有新浪微博帐号？现在加入saiff 册I 片遐［■-. *01-：^ L-.1荀方产極育推广区当需要使用登录对话框时，请调用微博登录面板。
巳西看二週更 斬蝕漏帳号,可亘接登录# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDCA5.4微博发布器当在第三方产品中需要使用分享微博的地方，请调用微博发布器，该发布器中的元素不允许修改分享内齊到浏博X发言请噫守社区公勾」还可以描入127字这个版本真让人虜弧|A▼# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDCA5.5对话框和弹层对话框和弹层都是用来完成某些信息提示或任务的交互载体，不同的是，对话框偏向于更加重要的操作或信息行为， 居页面中间岀现或在操作对象附近岀现，是强制打断用户当前任务而弹层更偏向于快捷的操作或信息行为，在操作 对象的附近岀现，希望尽可能少的打断用户当前任务对话框如下是对话框的基本结构:对话框标議内容区命令区对话框必须含有标题、“ X”按钮、内容和命令标题和内容左对齐，关闭和命令右对齐命令区必须含有关闭对话框 的操作原则上，对话框高度不允许太高以至超岀用户屏幕之外对话框主要分两类：信息类对话框和任务类对话框信息类对话框适用于重要提示、确认、警告、反馈等场景，其内容区主要是文本信息描述。
要求文本信息左侧需有类型图标，例如删除、确认、警告操作要使用不同的图标做类型区分 任务类对话框适用于对象选择、表单填写等场景弹层弹层在操作对象的附近岀现，如下是弹层的两个基本结构:X 帯命令弹层■屐内客不带命令弹层带命令弹层适用于任务类的行为，不带命令弹层适用于成功提示的反馈不带命令弹层会自动消失，所以，此提示文 案不是用户必须看到的B 视觉规范B1 使用说明PSDB视觉规范定义了新浪微博第三方产品的栅格系统、框架性视觉尺寸及样式相关源文件可下载新浪微博提供的 文档视觉规范中使用了三种单元尺寸块，绿色为 10px，红色为15px，紫色为20pxlOpxfiB2栅格系统6'新浪師应用・T品愷4；聞U?示国2DB3 导航B3.1微博顶导顶部导航居中，高度：25px厂庐色赤"-辖负沙 加也:.SJ胃足怆雷最计中1心 Gi车三:L# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDCB3.2页头标准页头窄版页头# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC孟非自is曽罡籟=7男fll岩智斗韓探姜能输二十二字# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDCB3.3页尾# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDC# / 20新浪微博第三方产品交互设计规范 -WEB端 微博UDCMM*収彌偉:jIpylight o 14ttt3D12 勺也超唳H倂th平台惜■据輪軒耳冋吕IT不宜*兄酣# 。