应用UI设计规范

跳转到: 导航, 搜索

目录

基本原则

1.将核心的功能及服务呈现给用户

  • 一个应用应提供一项核心功能或服务,在进行UI设计、交互设计、内容排版时也应围绕这个目标来进行。

2.为用户提供精心设计的、人性化的应用界面

  • 站内应用,不应直接将某个网站的现有网页简单嵌套进来,而不顾用户的使用体验。开发者应当考虑根据这个应用的需求来调整原有网页的 形式(包括页面大小、图片大小、导航元素等等),或设计全新的UI。

3.优化交互体验,让用户更容易使用,不要干扰用户

  • 应用应保证良好的用户体验,同时微博对接入的站内应用也有一些特殊的交互要求。

4.应用应持续改进优化

  • 应用应收集用户的意见建议并不断改进和优化,才能赢得用户的喜爱。您可以在应用内合适的位置设立用户反馈的入口,让用户能及时反馈 意见,作为您改进应用功能和使用体验的参考依据。

视觉设计规范

1.宽度控制在760像素以内,高度范围设置在600-2000像素

new_sjgf_01_v3.png

2.避免出现横向或竖向滚动条; 3.各页面应保持风格一致 4.为应用设计精美的图标和应用界面,其中图标的尺寸请设计成 80*80px 16*16px

sjgf_02.png
  • 有透底和不透底两种图标格式;

交互设计规范

  1. 应用应具有清晰的导航,让用户清晰地知道自己所处的位置;
  2. 用户的任何一个操作都要有清晰的反馈,例如用户点击查看微博时,缓冲加载过程中应给用户loading动画,让用户明确知道自己需要稍作等待,而不是毫无反应,误以为应用已经卡住了或点击无效;
  3. 为用户的操作提供指引,避免用户进入到某个状态时,无所适从;
  4. 应用中所有操作应在Iframe内完成,避免在新窗口中打开应用页面;

优秀案例

美图秀秀


new_sjgf_03_2_v3.png

用户操作流程指向清晰,主次功能按钮表意清楚
用户界面、图标设计精美

new_sjgf_04_2_v3.png

L型操作区域、内容预览区域规划合理
主导航功能分布合理,次导航效果预览表意直观
产品Logo 位置、大小合适

闹太套

new_sjgf_05_2_v3.png

单页热门产品,符合主流软件交互操作,不需说明文档用户就可使用

禁止的内容

  1. 禁止有任何形式的广告、植入广告、推广、导航、图片、flash、站外链接,以及与本应用无关的其它内容;
  2. 应用的内容不得包含虚假信息;
  3. 应用的程序不得影响网站安全;
  4. 禁止干扰用户的自动行为,和不经过用户同意的自动功能,包含自动播放声音、自动弹出窗口、自动加关注等;
  5. 禁止出现漂浮层、漂浮icon等干扰型交互效果;
文档更新时间: 2011-06-15