Weibo Platform Logo

微博开放平台

weibo

应用设计规范

跳转到： 导航, 搜索
(以“<!--导航模块--> <table class="toc"><tr><td> <div style="margin:20px 0 20px 15px;"> <span>[http://open.weibo.com/wiki/%E5%B9%B3%E5%8F%B0%E5%BA%94%E7%94%A8%E8%AE%B...”为内容创建页面)
 
第1行： 第1行：
−
<!--导航模块-->
+
{|class="toc" id="toc"
−
<table class="toc"><tr><td>
+
|<div id="toctitle"><h2>目录</h2></div>
−
<div style="margin:20px 0 20px 15px;">
+
<ul>
−
<span>[http://open.weibo.com/wiki/%E5%B9%B3%E5%8F%B0%E5%BA%94%E7%94%A8%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83#.E8.AE.BE.E8.AE.A1.E5.8E.9F.E5.88.99 1. 设计原则]</span>
+
{{TOC_item||A 交互规范|unclose=1}}
−
<span style="margin-left:30px;">[http://open.weibo.com/wiki/%E5%B9%B3%E5%8F%B0%E5%BA%94%E7%94%A8%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83#.E7.89.88.E5.BC.8F.E5.B8.83.E5.B1.80 2. 版式布局]</span>
+
<ul>
−
<span style="margin-left:30px;">[http://open.weibo.com/wiki/%E5%B9%B3%E5%8F%B0%E5%BA%94%E7%94%A8%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83#.E5.9B.BE.E6.A0.87 3. 图标]</span>
+
{{TOC_item||A1 使用说明||2}}
−
<span style="margin-left:30px;">[http://open.weibo.com/wiki/%E5%B9%B3%E5%8F%B0%E5%BA%94%E7%94%A8%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83#.E6.96.87.E5.AD.97.E4.B8.8E.E8.89.B2.E5.BD.A9 4. 文字与色彩]</span>
+
{{TOC_item||A2 交互设计原则||2}}
−
<span style="margin-left:30px;">[http://open.weibo.com/wiki/%E5%B9%B3%E5%8F%B0%E5%BA%94%E7%94%A8%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83#.E7.BB.84.E4.BB.B6 5. 组件]</span>
+
{{TOC_item||A3 独立第三方产品的框架规范||2}}
−
<span style="margin-left:30px;">[http://open.weibo.com/wiki/%E5%B9%B3%E5%8F%B0%E5%BA%94%E7%94%A8%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83#.E7.A6.81.E6.AD.A2.E4.BA.8B.E9.A1.B9 6. 禁止事项]</span>
+
{{TOC_item||A4 嵌入微博个人主页的应用框架规范||2}}
−
</div>
+
{{TOC_item||A5 通用组件及控件规范||2}}
−
</td></tr></table>
+
</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__
 +
==A 交互规范==
 +
===A1 使用说明===
 +
**本文档定义了新浪微博第三方产品的交互框架结构，相关内容的尺寸定义和视觉样式请查阅新浪微博视觉规范和PSD源文件。本文档中02、03、04部分为必选项，贵方设计产品时必须遵守。05部分为可选项，列举了微博现有的布局、组件/控件样式，供设计时参考。
  
−
==设计原则==
 
−
===简洁清晰===
 
−
应用的功能在界面上要重点表达，减少不必要的装饰性元素。突出关键元素，弱化辅助元素。
 
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf1_1.png}}
 
  
 +
===A2 交互设计原则===
 +
**第三方产品在设计方案除了遵循本文档所列的通用规范外，有较大的设计自由。新浪微博设计部提供以下交互设计原则做参考：
  
−
===反馈及时===
 
−
针对用户的鼠标或键盘动作，给予视觉反馈，告知用户行为所产生的结果。比如鼠标滑过时按钮状态的改变。
 
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf1_2.png}}
 
  
−
==版式布局==
+
**'''统一性和标准性'''
−
===应用尺寸===
+
**同类型页面采用相同或相似布局结构，同类操作的响应方式保持一致；
 +
**导航类结构保持一致，包括全局导航、搜索、筛选等；
 +
**文案表述方式统一且易懂，包括信息提示、称谓、菜单、语法标点、功能名称等；
  
−
应用尺寸（单位：像素px）
 
  
−
宽度：760px 高度：600px—2000px
+
**'''信息清晰、导向明确'''
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf2_1.png}}
+
**主次内容布局合理，各类型信息组织逻辑清晰；
 +
**清楚知道当前页面状态，二级及以下页面要有清晰的导航层次，例如统一导航、面包屑等；
  
  
−
===栅格系统===
+
**'''反馈及时有效'''
−
应用界面的宽度建议遵循以下栅格系统，每个版块的横向距离25像素，版块之间的横向距离为10像素，如下图所示。
+
**对用户操作及时反馈；
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf2_2.png}}
+
**反馈信息准确、简洁、直白，并对用户操作具有指导性；
  
  
−
===版式===
+
**'''错误及安全预防'''
−
对于应用界面的布局，我们提供以下几种版式供参考，开发者可根据实际情况，使用参考方案或自行设计更适合的应用布局。
+
**对有严重后果的操作提供必要提醒；
 +
**提供预防或纠正错误的方式；
 +
**提供隐私保护措施；
  
−
以下各区块的实际尺寸建议开发者参照栅格系统来确定。
+
===A3 独立第三方产品的框架规范===
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf2_3_1.png}}
+
'''A3.1 整体框架布局'''
−
{{left|http://www.sinaimg.cn/blog/developer/wiki/sjgf2_3_2.png}}
+
**第三方产品需严格包含以下五部分：微博顶导、页头、内容、底导及微博页尾。其中，微博顶导和页尾请直接调用接口，页头、内容及底导请贵方依据交互框架原则，自行设计具体结构内容。
−
{{left|http://www.sinaimg.cn/blog/developer/wiki/sjgf2_3_3.png}}
+
**{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja311.jpg}}
−
{{left-bottom|http://www.sinaimg.cn/blog/developer/wiki/sjgf2_3_4.png}}
+
−
以下版式布局我们不建议使用：
+
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf2_3_5.png}}
+
−
{{left-bottom|http://www.sinaimg.cn/blog/developer/wiki/sjgf2_3_6.png}}
+
  
  
−
===授权页===
+
'''A3.2 微博顶导'''
−
应用授权页，必须使用应用的实际首页作为背景，突出产品特色。这样在点击“授权”后，用户直接进入应用首页，使界面无需 跳转，过渡平滑。
+
**原则上第三方产品请直接调用新浪微博简版顶导。如果有特殊需要想使用全版顶导，请联系微博相关接口人确认。
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf2_4_1.png}}
+
**{{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}}
  
−
===图标尺寸===
 
−
80 x 80：用于应用详情页面 。我们会在您提供的图标上加统一的边框形成最终图标。
 
−
{{left-tb|http://www.sinaimg.cn/blog/developer/wiki/sjgf3_1_1_v3.jpg}}
 
−
16 x 16：用于应用浮动层预览
 
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf3_1_2_v2.png}}
 
  
−
===图标设计===
+
**页头有两种尺寸可选择：标准页头和窄版页头。标准页头适用于产品的一级页面，窄版页头适用于二级页面。设计窄版页头的目的是为了在二级页面能更多地展示内容，所以把页头高度压低。在具体产品中，请遵循以下原则，产品页面不可以只使用窄版页头，产品的一级页面也不可以使用窄版页头。
−
图标设计的表达要简练、清晰。小尺寸图标（16 x 16）不能直接由大尺寸图标缩小获得，需重新设计。
+
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf3_2_1_v2.jpg}}
+
  
−
===图标效果===
 
−
在图标设计中，无需添加任何装饰性效果，如高光、圆角等。
 
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf3_3_v2.png}}
 
  
 +
**如果产品的一级导航放在页头区域，请靠右对齐，参考以下结构：
 +
**{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja332.jpg}}
  
−
===图案===
 
−
图标设计中，请避免使用任何与新浪相关的图案。
 
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf3_4.png}}
 
  
 +
'''A3.4 内容'''
 +
**内容区的布局有多种分栏结构供使用：三栏版、两栏版（左窄右宽、右宽左窄）、通栏版。栅格系统尺寸请查阅视觉规范定义。产品可以依据自身结构特性，选择适当的布局版式。
  
  
−
==文字与色彩==
+
**'''三栏版'''
−
===字体、字号===
+
**左侧为导航，中间为主内容区，右侧为推荐、帮助等次要内容。
−
#建议正文、链接等部分使用12号字，标题部分使用14号字（加粗）。
+
**{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja341.jpg}}
−
#建议中文使用宋体、新宋体、黑体、微软雅黑，英文使用Arial、Tahoma等字体，建议应用内尽量控制在三种以内的字体样式。
+
−
#文字与背景颜色不要过于接近，要有明显区分，使文字部分清晰可见。
+
−
#文字具体展示效果开发者根据实际情况调整。
+
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf4_1.png}}
+
  
  
−
===文字对齐===
+
**'''两栏版-左窄右宽'''
−
建议多段文字之间采用适当的对齐方式，使文本内容在版式上清晰明了。
+
**左侧为导航，右侧为内容区。依据产品内容可以选择以下四种左窄右宽的两栏布局。
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf4_2.png}}
+
**{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja342.jpg}}
  
  
−
===色彩===
+
**'''两栏版-左宽右窄'''
−
#色彩应根据应用主题来确定。
+
**左侧为内容区，右侧为导航。依据产品内容可以选择以下四种左宽右窄的两栏布局。'''
−
#尽量控制在三种色彩以内，避免应用界面颜色杂乱而使主题不明确。
+
**{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja343.jpg}}
−
#以下是几种应用类型的色彩参考值。
+
−
{{left-tb|http://www.sinaimg.cn/blog/developer/wiki/sjgf4_3.png}}
+
  
−
了解更多色彩搭配，您可以在该网站内下载Adobe Kuler Desktop(AIR)工具获得更多色彩参考样式。http://kuler.adobe.com/#links
 
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf4_4.png}}
 
  
 +
**'''通栏版'''
 +
**通栏结构对于导航和主次内容没有明确规范，请自行设计。原则，信息结构清晰、导航指引明确。
 +
**{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja344.jpg}}
 +
**如果上述分栏结构无法满足产品实际需要，可以在此栅格系统基础上，以30px为模数单位进行变化，如720/260。
  
−
==组件==
 
−
===按钮===
 
−
在视觉上，按钮要有可点击性，按钮文字要清晰描述其动作或功能，如“加关注”。
 
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf5_1_1.png}}
 
−
<br/>
 
−
[http://www.sinaimg.cn/blog/developer/wiki/sjgf_btn.png 下载按钮案例]
 
  
  
−
在应用内，必须使用新浪微博的统一按钮样式。
+
'''A3.5 底导'''
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf5_1_2.png}}
+
**底导是作为该产品周边相关的外部导航入口，例如第三方其他产品的链接、移动端下载链接等。请参考以下结构：
−
<br/>
+
**{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja351.jpg}}
−
[http://t.cn/aRjnuh 查看更多统一按钮]
+
  
  
−
===微博发布器===
+
'''A3.6 微博页尾'''
−
发布器尺寸：宽度490 px，高度215 px（无图片）或350 px（含图片）。
+
**第三方产品请直接调用新浪微博页尾。
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf5_2.png}}
+
**{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja361.jpg}}
−
<br/>
+
−
[http://open.weibo.com/widget/js#publisher 查看JS-Widget]
+
  
  
−
===好友选择器===
+
===A4 嵌入微博个人主页的应用框架规范===
−
选择器尺寸：宽度425px，高度435px。
+
'''A4.1 整体框架布局'''
−
{{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf5_3.png}}
+
**下图虚线框选的部分是内嵌应用的内容区。与独立网页的设计不同，内嵌应用的交互组件/控件、视觉样式需严格遵守微博的设计规范，重用部分请直接调用微博的相关接口。
−
<br/>
+
−
[http://open.weibo.com/widget/js#selector0 查看JS-Widget]
+
  
  
−
===提示框===
+
'''A4.2 应用内容区分栏布局'''
−
提示框用于反馈用户的操作结果，这里提供几种尺寸选择，文字可根据应用需要自定义。
+
**应用内容区建议使用两种分栏布局：560-20-380的两栏，940的通栏。
−
第一类宽度370px
+
−
{{left-tb|http://www.sinaimg.cn/blog/developer/wiki/sjgf5_4_1.png}}
+
−
弹出式提示，尺寸较大，足够醒目，但在一定程度上会对用户造成干扰。
+
  
−
适用情景：
 
−
#一些需要明确操作结果的情景。
 
−
#父级操作已经是弹出层，则在操作结束后可直接将原有操作层替换为提示。
 
  
 +
===A5 通用组件及控件规范===
 +
'''A5.1 登录页及登录浮层'''
 +
**登录，有两种形式，页面和对话框。
 +
**当需要使用登录页面时，请调用微博Mini登录页面，该页面除了运营区可以自定义，其余部分不能改动。
 +
**{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja511.jpg}}
  
−
第二类宽度120px
 
−
{{left-tb|http://www.sinaimg.cn/blog/developer/wiki/sjgf5_4_2.png}}
 
  
−
轻型提示，尺寸较小，操作成功/失败后浮出，几秒后自动消失，交互效果轻便灵活 。
+
**当需要使用登录对话框时，请调用微博登录面板。
 +
**{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja512.jpg}}
  
−
适用情景：
 
−
#置于需要反馈效果的操作按钮旁边。
 
  
−
==禁止事项==
+
'''A5.2 微博发布器'''
−
#禁止有任何形式的广告、植入广告、推广（导航、图片、flash、站外链接等形式），以及与本应用无关的其它内容。
+
**当在第三方产品中需要使用分享微博的地方，请调用微博发布器，该发布器中的元素不允许修改。
−
#应用的内容不得包含虚假信息。
+
**{{left|http://www.sinaimg.cn/blog/developer/wiki/dpics/sja521.jpg}}
−
#应用的程序不得影响网站安全。
+
−
#禁止干扰用户的自主行为，禁止存在不经过用户同意的自动功能，包含自动播放声音、自动弹出窗口、自动加关注等。
+
−
#禁止出现漂浮层、漂浮图标等干扰型交互效果。
+
−
{{left-tb|http://www.sinaimg.cn/blog/developer/wiki/sjgf6_1_v2.png}}
+
  
−
__NOTOC__
+
 
 +
'''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}}

2013年1月18日 (五) 11:26的版本

目录

A 交互规范

A1 使用说明

    • 本文档定义了新浪微博第三方产品的交互框架结构，相关内容的尺寸定义和视觉样式请查阅新浪微博视觉规范和PSD源文件。本文档中02、03、04部分为必选项，贵方设计产品时必须遵守。05部分为可选项，列举了微博现有的布局、组件/控件样式，供设计时参考。


A2 交互设计原则

    • 第三方产品在设计方案除了遵循本文档所列的通用规范外，有较大的设计自由。新浪微博设计部提供以下交互设计原则做参考：


    • 统一性和标准性
    • 同类型页面采用相同或相似布局结构，同类操作的响应方式保持一致；
    • 导航类结构保持一致，包括全局导航、搜索、筛选等；
    • 文案表述方式统一且易懂，包括信息提示、称谓、菜单、语法标点、功能名称等；


    • 信息清晰、导向明确
    • 主次内容布局合理，各类型信息组织逻辑清晰；
    • 清楚知道当前页面状态，二级及以下页面要有清晰的导航层次，例如统一导航、面包屑等；


    • 反馈及时有效
    • 对用户操作及时反馈；
    • 反馈信息准确、简洁、直白，并对用户操作具有指导性；


    • 错误及安全预防
    • 对有严重后果的操作提供必要提醒；
    • 提供预防或纠正错误的方式；
    • 提供隐私保护措施；

A3 独立第三方产品的框架规范

A3.1 整体框架布局

    • 第三方产品需严格包含以下五部分：微博顶导、页头、内容、底导及微博页尾。其中，微博顶导和页尾请直接调用接口，页头、内容及底导请贵方依据交互框架原则，自行设计具体结构内容。
    • sja311.jpg


A3.2 微博顶导

    • 原则上第三方产品请直接调用新浪微博简版顶导。如果有特殊需要想使用全版顶导，请联系微博相关接口人确认。
    • sja321.jpg


A3.3 页头

    • 页头是整个产品的全局导航区域，必须包含产品的Logo和标题。其他元素，例如Slogan、品牌头图展示、搜索框、运营位等，在不破坏页头整体结构的前提下，请自行布局。
    • sja331.jpg


    • 页头有两种尺寸可选择：标准页头和窄版页头。标准页头适用于产品的一级页面，窄版页头适用于二级页面。设计窄版页头的目的是为了在二级页面能更多地展示内容，所以把页头高度压低。在具体产品中，请遵循以下原则，产品页面不可以只使用窄版页头，产品的一级页面也不可以使用窄版页头。


    • 如果产品的一级导航放在页头区域，请靠右对齐，参考以下结构：
    • sja332.jpg


A3.4 内容

    • 内容区的布局有多种分栏结构供使用：三栏版、两栏版（左窄右宽、右宽左窄）、通栏版。栅格系统尺寸请查阅视觉规范定义。产品可以依据自身结构特性，选择适当的布局版式。


    • 三栏版
    • 左侧为导航，中间为主内容区，右侧为推荐、帮助等次要内容。
    • sja341.jpg


    • 两栏版-左窄右宽
    • 左侧为导航，右侧为内容区。依据产品内容可以选择以下四种左窄右宽的两栏布局。
    • sja342.jpg


    • 两栏版-左宽右窄
    • 左侧为内容区，右侧为导航。依据产品内容可以选择以下四种左宽右窄的两栏布局。
    • sja343.jpg


    • 通栏版
    • 通栏结构对于导航和主次内容没有明确规范，请自行设计。原则，信息结构清晰、导航指引明确。
    • sja344.jpg
    • 如果上述分栏结构无法满足产品实际需要，可以在此栅格系统基础上，以30px为模数单位进行变化，如720/260。


A3.5 底导

    • 底导是作为该产品周边相关的外部导航入口，例如第三方其他产品的链接、移动端下载链接等。请参考以下结构：
    • sja351.jpg


A3.6 微博页尾

    • 第三方产品请直接调用新浪微博页尾。
    • sja361.jpg


A4 嵌入微博个人主页的应用框架规范

A4.1 整体框架布局

    • 下图虚线框选的部分是内嵌应用的内容区。与独立网页的设计不同，内嵌应用的交互组件/控件、视觉样式需严格遵守微博的设计规范，重用部分请直接调用微博的相关接口。


A4.2 应用内容区分栏布局

    • 应用内容区建议使用两种分栏布局：560-20-380的两栏，940的通栏。


A5 通用组件及控件规范

A5.1 登录页及登录浮层

    • 登录，有两种形式，页面和对话框。
    • 当需要使用登录页面时，请调用微博Mini登录页面，该页面除了运营区可以自定义，其余部分不能改动。
    • sja511.jpg


    • 当需要使用登录对话框时，请调用微博登录面板。
    • sja512.jpg


A5.2 微博发布器

    • 当在第三方产品中需要使用分享微博的地方，请调用微博发布器，该发布器中的元素不允许修改。
    • sja521.jpg


A5.3 对话框和弹层

    • 对话框和弹层都是用来完成某些信息提示或任务的交互载体，不同的是，对话框偏向于更加重要的操作或信息行为，居页面中间出现或在操作对象附近出现，是强制打断用户当前任务。而弹层更偏向于快捷的操作或信息行为，在操作对象的附近出现，希望尽可能少的打断用户当前任务。


    • 对话框
    • 如下是对话框的基本结构：
    • sja531.jpg


    • 对话框必须含有标题、“X”按钮、内容和命令。标题和内容左对齐，关闭和命令右对齐。命令区必须含有关闭对话框的操作。原则上，对话框高度不允许太高以至超出用户屏幕之外。


    • 对话框主要分两类：信息类对话框和任务类对话框。
    • 信息类对话框适用于重要提示、确认、警告、反馈等场景，其内容区主要是文本信息描述。要求文本信息左侧需有类型图标，例如删除、确认、警告操作要使用不同的图标做类型区分。任务类对话框适用于对象选择、表单填写等场景。


    • 弹层
    • 弹层在操作对象的附近出现，如下是弹层的两个基本结构：
    • sja532.jpg


    • 带命令弹层适用于任务类的行为，不带命令弹层适用于成功提示的反馈。不带命令弹层会自动消失，所以，此提示文案不是用户必须看到的。


B 视觉规范

B1 使用说明

    • B视觉规范定义了新浪微博第三方产品的栅格系统、框架性视觉尺寸及样式。相关源文件可下载新浪微博提供的PSD文档。
    • 视觉规范中使用了三种单元尺寸块，绿色为10px，红色为15px，紫色为20px。
    • sjb111.jpg


B2 栅格系统

    • sjb211.jpg


B3 导航

B3.1 微博顶导

    • 顶部导航居中，高度：25px。
    • sjb311.jpg


B3.2 页头

    • 标准页头
    • sjb321.jpg


    • 窄版页头
    • sjb322.jpg


B3.3 页尾

    • sjb331.jpg


B4 微博发布器

    • sjb411.jpg


B5 基本控件

B5.1 加关注按钮

    • sjb511.jpg
    • sjb512.jpg
    • sjb513.jpg


B5.2 头像

    • sjb521.jpg


B6 嵌入微博个人主页的应用规范

B6.1 个人主页页卡icon规范

    • sjb611.jpg
    • Icon限定高度：20px，高度含投影应在22*22px以内
    • sjb612.jpg


B6.2 页面模块间距

    • sjb621.jpg


B6.3 右侧模块规范

    • sjb631.jpg


B6.4 右侧模块设计示例（可选）

    • a 用户关系类内容
    • sjb641.jpg
    • b 多媒体内容
    • sjb642.jpg
    • sjb643.jpg


    • c 话题类内容
    • sjb644.jpg


    • d 微博类内容
    • sjb645.jpg


B7 对话框和弹层

B7.1 对话框和弹层尺寸定义

    • 标准对话框
    • sjb711.jpg


    • 模态对话框（强制压黑背景）
    • sjb712.jpg


    • 弹层
    • sjb713.jpg


B7.2 设计示例（可选）

    • 模版选择对话框
    • sjb721.jpg


    • 微博发布器附件选择弹层
    • sjb722.jpg


B8 Logo规范

B8.1 Logo比例及光源

    • 中英文域名组合比例关系（此为推荐组合）：
    • sjb811.jpg


    • 无域名组合比例关系：
    • sjb812.jpg


    • 光源位置为正上方90度
    • sjb813.jpg


B8.2 Logo图形主体及延展区安全范围

    • sjb821.jpg
    • 如图所示，以Logo主体高度为基准，其延展范围不得超过主体高度的20%。


B8.3 Logo字体

    • 背景明度范围B70~B100时，使用以下规范：
    • sjb831.jpg


    • 背景明度范围B0~B60时，使用以下规范：
    • sjb832.jpg


B8.4 Logo设计风格建议

    • sjb841.jpg
    • 建议的设计风格为：轻薄化、平面化。应避免使用过重的渐变质感、水晶和发光。
    • 以下是微应用和微盘前后的设计对比，供参考：
    • sjb842.jpg
来自“http://open.weibo.com/wiki/index.php?title=%E5%BA%94%E7%94%A8%E8%AE%BE%E8%AE%A1%E8%A7%84%E8%8C%83&oldid=10432”

关于微博开放平台| 联系我们| 服务条款| 无线游戏| 开放平台官微

京网文 [2011] 0398-130号 京ICP证100780号 Copyright © 1996-2024 SINA