平台应用设计规范

跳转到: 导航, 搜索

设计原则

简洁清晰

应用的功能在界面上要重点表达,减少不必要的装饰性元素。突出关键元素,弱化辅助元素。

sjgf1_1.png


反馈及时

针对用户的鼠标或键盘动作,给予视觉反馈,告知用户行为所产生的结果。比如鼠标滑过时按钮状态的改变。

sjgf1_2.png

版式布局

应用尺寸

应用尺寸(单位:像素px)

宽度:760px 高度:600px—2000px

sjgf2_1.png


栅格系统

应用界面的宽度建议遵循以下栅格系统,每个版块的横向距离25像素,版块之间的横向距离为10像素,如下图所示。

sjgf2_2.png


版式

对于应用界面的布局,我们提供以下几种版式供参考,开发者可根据实际情况,使用参考方案或自行设计更适合的应用布局。

以下各区块的实际尺寸建议开发者参照栅格系统来确定。

sjgf2_3_1.png
sjgf2_3_2.png
sjgf2_3_3.png
sjgf2_3_4.png

以下版式布局我们不建议使用:

sjgf2_3_5.png
sjgf2_3_6.png


授权页

应用授权页,必须使用应用的实际首页作为背景,突出产品特色。这样在点击“授权”后,用户直接进入应用首页,使界面无需 跳转,过渡平滑。

sjgf2_4_1.png


图标

图标尺寸

80 x 80:用于应用详情页面 。我们会在您提供的图标上加统一的边框形成最终图标。

sjgf3_1_1_v3.jpg

16 x 16:用于应用浮动层预览

sjgf3_1_2_v2.png

图标设计

图标设计的表达要简练、清晰。小尺寸图标(16 x 16)不能直接由大尺寸图标缩小获得,需重新设计。

sjgf3_2_1_v2.jpg

图标效果

在图标设计中,无需添加任何装饰性效果,如高光、圆角等。

sjgf3_3_v2.png


图案

图标设计中,请避免使用任何与新浪相关的图案。

sjgf3_4.png


文字与色彩

字体、字号

  1. 建议正文、链接等部分使用12号字,标题部分使用14号字(加粗)。
  2. 建议中文使用宋体、新宋体、黑体、微软雅黑,英文使用Arial、Tahoma等字体,建议应用内尽量控制在三种以内的字体样式。
  3. 文字与背景颜色不要过于接近,要有明显区分,使文字部分清晰可见。
  4. 文字具体展示效果开发者根据实际情况调整。
sjgf4_1.png


文字对齐

建议多段文字之间采用适当的对齐方式,使文本内容在版式上清晰明了。

sjgf4_2.png


色彩

  1. 色彩应根据应用主题来确定。
  2. 尽量控制在三种色彩以内,避免应用界面颜色杂乱而使主题不明确。
  3. 以下是几种应用类型的色彩参考值。
sjgf4_3.png

了解更多色彩搭配,您可以在该网站内下载Adobe Kuler Desktop(AIR)工具获得更多色彩参考样式。http://kuler.adobe.com/#links

sjgf4_4.png


组件

按钮

在视觉上,按钮要有可点击性,按钮文字要清晰描述其动作或功能,如“加关注”。

sjgf5_1_1.png


下载按钮案例


在应用内,必须使用新浪微博的统一按钮样式。

sjgf5_1_2.png


查看更多统一按钮


微博发布器

发布器尺寸:宽度490 px,高度215 px(无图片)或350 px(含图片)。

sjgf5_2.png


查看JS-Widget


好友选择器

选择器尺寸:宽度425px,高度435px。

sjgf5_3.png


查看JS-Widget


提示框

提示框用于反馈用户的操作结果,这里提供几种尺寸选择,文字可根据应用需要自定义。 第一类宽度370px

sjgf5_4_1.png

弹出式提示,尺寸较大,足够醒目,但在一定程度上会对用户造成干扰。

适用情景:

  1. 一些需要明确操作结果的情景。
  2. 父级操作已经是弹出层,则在操作结束后可直接将原有操作层替换为提示。


第二类宽度120px

sjgf5_4_2.png

轻型提示,尺寸较小,操作成功/失败后浮出,几秒后自动消失,交互效果轻便灵活 。

适用情景:

  1. 置于需要反馈效果的操作按钮旁边。

禁止事项

  1. 禁止有任何形式的广告、植入广告、推广(导航、图片、flash、站外链接等形式),以及与本应用无关的其它内容。
  2. 应用的内容不得包含虚假信息。
  3. 应用的程序不得影响网站安全。
  4. 禁止干扰用户的自主行为,禁止存在不经过用户同意的自动功能,包含自动播放声音、自动弹出窗口、自动加关注等。
  5. 禁止出现漂浮层、漂浮图标等干扰型交互效果。
sjgf6_1_v2.png


文档更新时间: 2011-08-12