微博开放平台
微连接
移动应用
网站接入
电商服务商
电商商家
数据服务
数据服务
合作伙伴
微博支付
轻应用
粉丝服务
文档
推广
我的应用
登录
weibo
开发文档
首页
平台政策与指引
概述
平台公约
新手指南
开发者协议
应用运营管理规范
微连接分级管理办法
应用审核产品指南
应用安全开发注意事项
平台应用设计规范
微服务接入指南
微博登录接入
用微博帐号登录
授权机制
移动应用接入
移动应用介绍
移动应用SSO授权
微博Deep Link
媒体接入平台
头条文章开放接口
视频上传开放接口
电商接入平台
电商服务商接入
电商商家端接入
电商平台能力接口
粉丝服务平台
粉丝服务平台
新手接入指南
微信开发者迁移指南
接收消息
发送消息
自定义菜单
用户管理
生成带参数的二维码
Fans Service Platform
商业接口
商业数据接入指南
订阅服务手册(中文版)
订阅服务手册(英文版)
商业接口-REST API
商业数据常见问题
网站接入
网站接入介绍
微博API
微博API
接口访问频次权限
资源下载
SDK
微博标识下载
常见问题
联系我们
工具箱
链入页面
链出更改
特殊页面
查看源代码
跳转到:
导航
,
搜索
根据下列原因,你没有权限编辑本页:
您刚才请求的操作只有这个用户组中的用户才能使用:
用户
您可以查看并复制此页面的源代码:
{|class="toc" id="toc" |<div id="toctitle"><h2>目录</h2></div> <ul> {{TOC_item||A 交互规范|unclose=1}} <ul> {{TOC_item||A1 使用说明||2}} {{TOC_item||A2 交互设计原则||2}} {{TOC_item||A3 独立第三方产品的框架规范||2}} {{TOC_item||A4 嵌入微博个人主页的应用框架规范||2}} {{TOC_item||A5 通用组件及控件规范||2}} </ul> </li> {{TOC_item||B 视觉规范|unclose=1}} <ul> {{TOC_item||B1 使用说明||2}} {{TOC_item||B2 栅格系统||2}} {{TOC_item||B3 导航||2}} {{TOC_item||B4 微博发布器||2}} {{TOC_item||B5 基本控件||2}} {{TOC_item||B6 嵌入微博个人主页的应用规范||2}} {{TOC_item||B7 对话框和弹层||2}} {{TOC_item||B8 Logo规范||2}} </ul> </li> </ul> |} __NOTOC__ [http://udc.weibo.com/download/UE20120118.pdf 新浪微博第三方产品设计规范-WEB端(PDF)] [http://udc.weibo.com/download/UI_PSD20130118.rar 新浪微博第三方产品设计规范-WEB端(PSD)] ==A 交互规范== ===A1 使用说明=== **本文档定义了新浪微博第三方产品的交互框架结构,相关内容的尺寸定义和视觉样式请查阅新浪微博视觉规范和PSD源文件。本文档中02、03、04部分为必选项,贵方设计产品时必须遵守。05部分为可选项,列举了微博现有的布局、组件/控件样式,供设计时参考。 ===A2 交互设计原则=== **第三方产品在设计方案除了遵循本文档所列的通用规范外,有较大的设计自由。新浪微博设计部提供以下交互设计原则做参考: **'''统一性和标准性''' **同类型页面采用相同或相似布局结构,同类操作的响应方式保持一致; **导航类结构保持一致,包括全局导航、搜索、筛选等; **文案表述方式统一且易懂,包括信息提示、称谓、菜单、语法标点、功能名称等; **'''信息清晰、导向明确''' **主次内容布局合理,各类型信息组织逻辑清晰; **清楚知道当前页面状态,二级及以下页面要有清晰的导航层次,例如统一导航、面包屑等; **'''反馈及时有效''' **对用户操作及时反馈; **反馈信息准确、简洁、直白,并对用户操作具有指导性; **'''错误及安全预防''' **对有严重后果的操作提供必要提醒; **提供预防或纠正错误的方式; **提供隐私保护措施; ===A3 独立第三方产品的框架规范=== '''A3.1 整体框架布局''' **第三方产品需严格包含以下五部分:微博顶导、页头、内容、底导及微博页尾。其中,微博顶导和页尾请直接调用接口,页头、内容及底导请贵方依据交互框架原则,自行设计具体结构内容。 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja311.jpg}} '''A3.2 微博顶导''' **原则上第三方产品请直接调用新浪微博简版顶导。如果有特殊需要想使用全版顶导,请联系微博相关接口人确认。 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja321.jpg}} '''A3.3 页头''' **页头是整个产品的全局导航区域,必须包含产品的Logo和标题。其他元素,例如Slogan、品牌头图展示、搜索框、运营位等,在不破坏页头整体结构的前提下,请自行布局。 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja331.jpg}} **页头有两种尺寸可选择:标准页头和窄版页头。标准页头适用于产品的一级页面,窄版页头适用于二级页面。设计窄版页头的目的是为了在二级页面能更多地展示内容,所以把页头高度压低。在具体产品中,请遵循以下原则,产品页面不可以只使用窄版页头,产品的一级页面也不可以使用窄版页头。 **如果产品的一级导航放在页头区域,请靠右对齐,参考以下结构: **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja332.jpg}} '''A3.4 内容''' **内容区的布局有多种分栏结构供使用:三栏版、两栏版(左窄右宽、右宽左窄)、通栏版。栅格系统尺寸请查阅视觉规范定义。产品可以依据自身结构特性,选择适当的布局版式。 **'''三栏版''' **左侧为导航,中间为主内容区,右侧为推荐、帮助等次要内容。 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja341.jpg}} **'''两栏版-左窄右宽''' **左侧为导航,右侧为内容区。依据产品内容可以选择以下四种左窄右宽的两栏布局。 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja342.jpg}} **'''两栏版-左宽右窄''' **左侧为内容区,右侧为导航。依据产品内容可以选择以下四种左宽右窄的两栏布局。''' **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja343.jpg}} **'''通栏版''' **通栏结构对于导航和主次内容没有明确规范,请自行设计。原则,信息结构清晰、导航指引明确。 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja344.jpg}} **如果上述分栏结构无法满足产品实际需要,可以在此栅格系统基础上,以30px为模数单位进行变化,如720/260。 '''A3.5 底导''' **底导是作为该产品周边相关的外部导航入口,例如第三方其他产品的链接、移动端下载链接等。请参考以下结构: **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja351.jpg}} '''A3.6 微博页尾''' **第三方产品请直接调用新浪微博页尾。 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja361.jpg}} ===A4 嵌入微博个人主页的应用框架规范=== '''A4.1 整体框架布局''' **下图虚线框选的部分是内嵌应用的内容区。与独立网页的设计不同,内嵌应用的交互组件/控件、视觉样式需严格遵守微博的设计规范,重用部分请直接调用微博的相关接口。 '''A4.2 应用内容区分栏布局''' **应用内容区建议使用两种分栏布局:560-20-380的两栏,940的通栏。 ===A5 通用组件及控件规范=== '''A5.1 登录页及登录浮层''' **登录,有两种形式,页面和对话框。 **当需要使用登录页面时,请调用微博Mini登录页面,该页面除了运营区可以自定义,其余部分不能改动。 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja511.jpg}} **当需要使用登录对话框时,请调用微博登录面板。 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja512.jpg}} '''A5.2 微博发布器''' **当在第三方产品中需要使用分享微博的地方,请调用微博发布器,该发布器中的元素不允许修改。 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja521.jpg}} '''A5.3 对话框和弹层''' **对话框和弹层都是用来完成某些信息提示或任务的交互载体,不同的是,对话框偏向于更加重要的操作或信息行为,居页面中间出现或在操作对象附近出现,是强制打断用户当前任务。而弹层更偏向于快捷的操作或信息行为,在操作对象的附近出现,希望尽可能少的打断用户当前任务。 **'''对话框''' **如下是对话框的基本结构: **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja531.jpg}} **对话框必须含有标题、“X”按钮、内容和命令。标题和内容左对齐,关闭和命令右对齐。命令区必须含有关闭对话框的操作。原则上,对话框高度不允许太高以至超出用户屏幕之外。 **对话框主要分两类:信息类对话框和任务类对话框。 **信息类对话框适用于重要提示、确认、警告、反馈等场景,其内容区主要是文本信息描述。要求文本信息左侧需有类型图标,例如删除、确认、警告操作要使用不同的图标做类型区分。任务类对话框适用于对象选择、表单填写等场景。 **'''弹层''' **弹层在操作对象的附近出现,如下是弹层的两个基本结构: **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja532.jpg}} **带命令弹层适用于任务类的行为,不带命令弹层适用于成功提示的反馈。不带命令弹层会自动消失,所以,此提示文案不是用户必须看到的。 ==B 视觉规范== ===B1 使用说明=== **B视觉规范定义了新浪微博第三方产品的栅格系统、框架性视觉尺寸及样式。相关源文件可下载新浪微博提供的PSD文档。 **视觉规范中使用了三种单元尺寸块,绿色为10px,红色为15px,紫色为20px。 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb111.jpg}} ===B2 栅格系统=== **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb211.jpg}} ===B3 导航=== '''B3.1 微博顶导''' **顶部导航居中,高度:25px。 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb311.jpg}} '''B3.2 页头''' **标准页头 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb321.jpg}} **窄版页头 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb322.jpg}} '''B3.3 页尾''' **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb331.jpg}} ===B4 微博发布器=== **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb411.jpg}} ===B5 基本控件=== '''B5.1 加关注按钮''' **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb511.jpg}} **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb512.jpg}} **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb513.jpg}} '''B5.2 头像''' **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb521.jpg}} ===B6 嵌入微博个人主页的应用规范=== '''B6.1 个人主页页卡icon规范''' **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb611.jpg}} **Icon限定高度:20px,高度含投影应在22*22px以内 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb612.jpg}} '''B6.2 页面模块间距''' **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb621.jpg}} '''B6.3 右侧模块规范''' **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb631.jpg}} '''B6.4 右侧模块设计示例(可选)''' **a 用户关系类内容 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb641.jpg}} **b 多媒体内容 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb642.jpg}} **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb643.jpg}} **c 话题类内容 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb644.jpg}} **d 微博类内容 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb645.jpg}} ===B7 对话框和弹层=== '''B7.1 对话框和弹层尺寸定义''' **标准对话框 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb711.jpg}} **模态对话框(强制压黑背景) **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb712.jpg}} **弹层 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb713.jpg}} '''B7.2 设计示例(可选)''' **模版选择对话框 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb721.jpg}} **微博发布器附件选择弹层 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb722.jpg}} ===B8 Logo规范=== '''B8.1 Logo比例及光源''' **中英文域名组合比例关系(此为推荐组合): **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb811.jpg}} **无域名组合比例关系: **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb812.jpg}} **光源位置为正上方90度 **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb813.jpg}} '''B8.2 Logo图形主体及延展区安全范围''' **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb821.jpg}} **如图所示,以Logo主体高度为基准,其延展范围不得超过主体高度的20%。 '''B8.3 Logo字体''' **背景明度范围B70~B100时,使用以下规范: **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb831.jpg}} **背景明度范围B0~B60时,使用以下规范: **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb832.jpg}} '''B8.4 Logo设计风格建议''' **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb841.jpg}} **建议的设计风格为:轻薄化、平面化。应避免使用过重的渐变质感、水晶和发光。 **以下是微应用和微盘前后的设计对比,供参考: **{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sjb842.jpg}}
该页面使用的模板:
模板:Left
(
查看源代码
)
模板:TOC item
(
查看源代码
)
返回到
应用设计规范
。
反馈
分享
顶部