应用UI设计规范
小 (→基本原则) |
(→视觉设计规范) |
||
第44行: | 第44行: | ||
#禁止干扰用户的自动行为,和不经过用户同意的自动功能,包含自动播放声音、自动弹出窗口、自动加关注等; | #禁止干扰用户的自动行为,和不经过用户同意的自动功能,包含自动播放声音、自动弹出窗口、自动加关注等; | ||
#禁止出现漂浮层、漂浮icon等干扰型交互效果; | #禁止出现漂浮层、漂浮icon等干扰型交互效果; | ||
− | |||
− | |||
− | |||
− |
2011年5月27日 (五) 11:39的版本
目录 |
基本原则
1.将核心的功能及服务呈现给用户
- 一个应用应提供一项核心功能或服务,在进行UI设计、交互设计、内容排版时也应围绕这个目标来进行。
2.为用户提供精心设计的、人性化的应用界面
- 站内应用,不应直接将某个网站的现有网页简单嵌套进来,而不顾用户的使用体验。开发者应当考虑根据这个应用的需求来调整原有网页的 形式(包括页面大小、图片大小、导航元素等等),或设计全新的UI。
3.优化交互体验,让用户更容易使用,不要干扰用户
- 应用应保证良好的用户体验,同时微博对接入的站内应用也有一些特殊的交互要求。
4.应用应持续改进优化
- 应用应收集用户的意见建议并不断改进和优化,才能赢得用户的喜爱。您可以在应用内合适的位置设立用户反馈的入口,让用户能及时反馈 意见,作为您改进应用功能和使用体验的参考依据。
视觉设计规范
1.宽度控制在760像素以内,高度范围设置在600-2000像素
2.避免出现横向或竖向滚动条; 3.各页面应保持风格一致 4.为应用设计精美的图标和应用界面,其中图标的尺寸请设计成 80*80px 16*16px
- 有透底和不透底两种图标格式;
交互设计规范
- 应用应具有清晰的导航,让用户清晰地知道自己所处的位置;
- 用户的任何一个操作都要有清晰的反馈,例如用户点击查看微博时,缓冲加载过程中应给用户loading动画,让用户明确知道自己需要稍作等待,而不是毫无反应,误以为应用已经卡住了或点击无效;
- 为用户的操作提供指引,避免用户进入到某个状态时,无所适从;
- 应用中所有操作应在Iframe内完成,避免在新窗口中打开应用页面;
优秀案例
美图秀秀
用户操作流程指向清晰,主次功能按钮表意清楚
用户界面、图标设计精美
L型操作区域、内容预览区域规划合理
主导航功能分布合理,次导航效果预览表意直观
产品Logo 位置、大小合适
闹太套
单页热门产品,符合主流软件交互操作,不需说明文档用户就可使用
禁止的内容
- 禁止有任何形式的广告、植入广告、推广、导航、图片、flash、站外链接,以及与本应用无关的其它内容;
- 应用的内容不得包含虚假信息;
- 应用的程序不得影响网站安全;
- 禁止干扰用户的自动行为,和不经过用户同意的自动功能,包含自动播放声音、自动弹出窗口、自动加关注等;
- 禁止出现漂浮层、漂浮icon等干扰型交互效果;