微博开放平台
微连接
移动应用
网站接入
电商服务商
电商商家
数据服务
数据服务
合作伙伴
微博支付
轻应用
粉丝服务
文档
推广
我的应用
登录
weibo
开发文档
首页
平台政策与指引
概述
平台公约
新手指南
开发者协议
应用运营管理规范
微连接分级管理办法
应用审核产品指南
应用安全开发注意事项
平台应用设计规范
微服务接入指南
微博登录接入
用微博帐号登录
授权机制
移动应用接入
移动应用介绍
移动应用SSO授权
微博Deep Link
媒体接入平台
头条文章开放接口
视频上传开放接口
电商接入平台
电商服务商接入
电商商家端接入
电商平台能力接口
粉丝服务平台
粉丝服务平台
新手接入指南
微信开发者迁移指南
接收消息
发送消息
自定义菜单
用户管理
生成带参数的二维码
Fans Service Platform
商业接口
商业数据接入指南
订阅服务手册(中文版)
订阅服务手册(英文版)
商业接口-REST API
商业数据常见问题
网站接入
网站接入介绍
微博API
微博API
接口访问频次权限
资源下载
SDK
微博标识下载
常见问题
联系我们
工具箱
链入页面
链出更改
特殊页面
查看源代码
跳转到:
导航
,
搜索
根据下列原因,你没有权限编辑本页:
您刚才请求的操作只有这个用户组中的用户才能使用:
用户
您可以查看并复制此页面的源代码:
<!--导航模块--> <table class="toc"><tr><td> <h3>目录</h3> <div class="mar_tb"> <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> <span style="margin-left:50px;">[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> <span style="margin-left:50px;">[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 图标]<a href="#.E5.9B.BE.E6.A0.87">3 图标</span> <span style="margin-left:50px;">[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> <span style="margin-left:50px;">[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> <span style="margin-left:50px;">[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> </div> </td></tr></table> ==设计原则== ===简洁清晰=== 应用的功能在界面上要重点表达,减少不必要的装饰性元素。突出关键元素,弱化辅助元素。 {{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf1_1.png}} ===反馈及时=== 针对用户的鼠标或键盘动作,给予视觉反馈,告知用户行为所产生的结果。比如鼠标滑过时按钮状态的改变。 {{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}} ===版式=== 对于应用界面的布局,我们提供以下几种版式供参考,开发者可根据实际情况,使用参考方案或自行设计更适合的应用布局。 以下各区块的实际尺寸建议开发者参照栅格系统来确定。 {{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf2_3_1.png}} {{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-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}} ===授权页=== 应用授权页,必须使用应用的实际首页作为背景,突出产品特色。这样在点击“授权”后,用户直接进入应用首页,使界面无需 跳转,过渡平滑。 {{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf2_4_1.png}} ==图标== ===图标尺寸=== 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-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf3_4.png}} ==文字与色彩== ===字体、字号=== #建议正文、链接等部分使用12号字,标题部分使用14号字(加粗)。 #建议中文使用宋体、新宋体、黑体、微软雅黑,英文使用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-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-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf5_1_1.png}} <br/> [http://www.sinaimg.cn/blog/developer/wiki/sjgf_btn.png 下载按钮案例] 在应用内,必须使用新浪微博的统一按钮样式。 {{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf5_1_2.png}} <br/> [http://t.cn/aRjnuh 查看更多统一按钮] ===微博发布器=== 发布器尺寸:宽度490 px,高度215 px(无图片)或350 px(含图片)。 {{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf5_2.png}} <br/> [http://open.weibo.com/widget/js#publisher 查看JS-Widget] ===好友选择器=== 选择器尺寸:宽度425px,高度435px。 {{left-top|http://www.sinaimg.cn/blog/developer/wiki/sjgf5_3.png}} <br/> [http://open.weibo.com/widget/js#selector0 查看JS-Widget] ===提示框=== 提示框用于反馈用户的操作结果,这里提供几种尺寸选择,文字可根据应用需要自定义。 第一类宽度370px {{left-tb|http://www.sinaimg.cn/blog/developer/wiki/sjgf5_4_1.png}} 弹出式提示,尺寸较大,足够醒目,但在一定程度上会对用户造成干扰。 适用情景: #一些需要明确操作结果的情景。 #父级操作已经是弹出层,则在操作结束后可直接将原有操作层替换为提示。 第二类宽度120px {{left-tb|http://www.sinaimg.cn/blog/developer/wiki/sjgf5_4_2.png}} 轻型提示,尺寸较小,操作成功/失败后浮出,几秒后自动消失,交互效果轻便灵活 。 适用情景: #置于需要反馈效果的操作按钮旁边。 ==禁止事项== #禁止有任何形式的广告、植入广告、推广(导航、图片、flash、站外链接等形式),以及与本应用无关的其它内容。 #应用的内容不得包含虚假信息。 #应用的程序不得影响网站安全。 #禁止干扰用户的自主行为,禁止存在不经过用户同意的自动功能,包含自动播放声音、自动弹出窗口、自动加关注等。 #禁止出现漂浮层、漂浮图标等干扰型交互效果。 {{left-tb|http://www.sinaimg.cn/blog/developer/wiki/sjgf6_1_v2.png}} __NOTOC__
该页面使用的模板:
模板:Left
(
查看源代码
)
模板:Left-bottom
(
查看源代码
)
模板:Left-tb
(
查看源代码
)
模板:Left-top
(
查看源代码
)
返回到
平台应用设计规范
。
反馈
分享
顶部