BBC 设计规范_新浪微博udc

muyeopen

贡献于2012-08-17

字数:0 关键词: 前端技术

GEL样式规范 BBC通用体验语言 微博UDC翻译小组陈丽薇译 00 引言 01 设计理念 02 基本原则 03 页面构成 04 样式库 05 谢谢 微博UDC翻译小组陈丽薇译 00 引言 我们正在为BBC数字服务建立一种通用体验语言。 GEL(Global Experience Language, 译为“通用体验语言”)样式规范可供所有BBC网站设计师参考。有关 Mobile、IPTV和平板设备GEL的详细信息,请参考 www.bbc.co.uk/GEL 设计理念贯穿于用户体验设计团队的所有设计。这种理念让大家了解BBC服务、服务如何运作,以及团队如何凝 聚在一起。 基本原则适用于BBC全站,该原则包括垂直栅格、基线和推荐模板。 页面构成确保从排版到图标设计,均保持全站一致的交互和视觉设计。 样式库提供完整的页面组件,可供大家复用。 我们欢迎大家提出反馈和建议。 微博UDC翻译小组陈丽薇译 01 设计理念 十 项设计原则 文化图谱 微博UDC翻译小组陈丽薇译 01 设计理念 十项设计原则 01 现代英伦 BBC的服务已融入英国人的日常生活中。这些服务符合无国界之分的现代英国设计美学。 BBC的特点是充满活力,偶尔善变。 02 有吸引力 BBC的表达方式从严谨权威到诙谐有趣,风格各异。我们满怀真诚、热情、亲和力,让 用户沉浸于有吸引力的故事中。 03 坦诚相见 我们珍惜用户的了解和信任,并沿袭BBC原有经典设计和传媒历史的细节。 04 设计先锋 我们的设计创新让人惊奇和愉悦,让用户眼前一亮而又深深被吸引。 微博UDC翻译小组陈丽薇译 01 设计理念 十项设计原则 05 与时俱进 我们既承接过去,又紧跟现代,向用户展现了一副英国的时间轴。 06 独一无二 我们探索未来设计趋势,而不仅仅参考现在的设计趋势。设计时,在单纯追求美观和机 械拼凑间寻求平衡。 07 息息相关 BBC所有服务和平台彼此关联,传达特定使用场景的用户体验,采用常见方式或其他方 式确保一致的体验。通过分享兴趣和体验,让用户彼此关联起来。 08 局部&全局 我们需要面对所有用户,同时兼顾单个用户。信息对全局和局部兼顾。 微博UDC翻译小组陈丽薇译 01 设计理念 十项设计原则 09 通用性 信息条理清晰,界面简洁、易用、直观。BBC服务开放,用户可轻而易举地享 受到服务。 10 尽善尽美 最后但同等重要的一点,我们坚持质量至上。 微博UDC翻译小组陈丽薇译 01 设计理念 文化图谱 GEL将所有BBC服务联结在一起。BBC主品牌在BBC网站首页上呈现给用户,而 其他一系列的BBC品牌体验在Doctor Who呈现。 注释: Doctor Who(译为“神秘博士”),由BBC制作的英国科幻电视剧。该剧讲述了名为“博士” 神秘的外星时间旅行者,随着他的时空机器TARDIS的冒险故事,他的时空机器外观看上去像1950 年代的警亭。博士带着他的伙伴,探索时间空间,面对各种怪物,解决各类问题。 http://www.bbc.co.uk/programmes/b006q2x0 微博UDC翻译小组陈丽薇译 02 基本原则 通用栅格 栏目 多样化布局 基线 顶导&页尾 水平导航 栏目头图 背景 微博UDC翻译小组陈丽薇译 02 基本原则 通用栅格 通用栅格被分为 61 x 16px 的垂直单元格。用于对齐嵌入式媒体播放器尺寸、图像比例以及广告。 微博UDC翻译小组陈丽薇译 02 基本原则 栏目 应用栅格后,页面被分成3个栏目,栏目间的间距为16px空白。这样的话,就可以 在右侧较宽的栏目放置“固定板块”的广告。 微博UDC翻译小组陈丽薇译 02 基本原则 多样化布局 栏目可进一步划分。应用栅格后,页面可有多种布局和模板。 微博UDC翻译小组陈丽薇译 02 基本原则 基线 采用8px基线栅格,确保页面组件在垂直方向上对齐。排版不必一味地遵循基线,但基 线可营造页面垂直方向上的韵律感。 微博UDC翻译小组陈丽薇译 02 基本原则 顶导&页尾 全局顶导包含现有的全局导航链接以及“更多”下拉面板中的其他链接。而BBC ID以及其他 功能位于BBC logo的右侧。顶导可使用以下颜色:图中的白色、不透明度20%的黑色、不透 明度40%的黑色、不透明度70%的黑色、灰色,以及其他的白透、黑透。 微博UDC翻译小组陈丽薇译 02 基本原则 顶导&页尾 页尾与之前GVL 2.0不同。页尾可使用以下颜色:白色、灰色、黑色、半透明图片。 微博UDC翻译小组陈丽薇译 02 基本原则 水平导航 建议水平导航最多放2行,层级较深时可使用tab和面包屑。有关详细信息,请参考设计样式库。 微博UDC翻译小组陈丽薇译 02 基本原则 栏目头图 新栏目头图比较灵活,可满足不同品牌要求。栏目头图高度视服务类型而定。以内容为主的频道, 比如新闻频道,栏目头图最小高度为64px。 微博UDC翻译小组陈丽薇译 02 基本原则 背景 全站的页面背景和页面头图不必保持一致。背景可以是白色、彩色、渐变或全视窗图片。背景可 以跟随,也可以固定不动。 微博UDC翻译小组陈丽薇译 02 基本原则 背景 微博UDC翻译小组陈丽薇译 03 页面构成 排版 图标设计 链接的用法 图片比例 微博UDC翻译小组陈丽薇译 03 页面构成 排版 在全站使用加粗字体加强层级和显示。我们摒弃了 Verdana字体,采用Arial字体作 为网站标题和内容的默认字体。 微博UDC翻译小组陈丽薇译 03 页面构成 排版 大号加粗字体用于树立清晰的信息层级。推荐使用以下字体大小。 微博UDC翻译小组陈丽薇译 03 页面构成 排版 使用Georgia斜体标注来自BBC博客或其它第三方网站的简短引用。推荐 的字体大小:在仅有一处引用的显示使用16px大小的字体,比如对BBC博 客的引用;在不止一处引用的显示框里,使用14px 大小的字体,比如 Twitter feed模块。 微博UDC翻译小组陈丽薇译 03 页面构成 排版 内容区的字体集合:在页面的标题和内容区推荐使用Arial字体。 微博UDC翻译小组陈丽薇译 03 页面构成 排版 内容排版采用较小的间距、行距和大标题。标题和内容的间距保持一致。有容器时,左侧边 距为8px或16px。 微博UDC翻译小组陈丽薇译 03 页面构成 排版 没有容器时,与栅格左对齐。 微博UDC翻译小组陈丽薇译 03 页面构成 图标设计 为了配合新视觉规范,我们设计了一套新图标。图标默认尺寸为13px,与按钮容器一起使用, 或者单独使用。 有关整套图标的详细信息,请访问bc.co.uk/gel/iconography.shtml 微博UDC翻译小组陈丽薇译 03 页面构成 图标设计 图标应位于文本左侧或缩略图的左上角。 微博UDC翻译小组陈丽薇译 03 页面构成 链接的用法 链接的用法与原有的标准和规则一致。链接采用加粗、颜色、下划线或悬浮时出现下划线的 样式,明显区别于内容。悬浮时,链接的颜色发生更改;如果链接的字体小于24px,悬浮时 出现下划线。 微博UDC翻译小组陈丽薇译 03 页面构成 图片比例 建议使用尺寸比例为16:9的图片,且该图片与栅格对齐。这条原则十分重要,可在BBC全站重 复使用。在与通用栅格对齐的情况下,背景、Banner、广告、插图可采用多种形状和尺寸。 微博UDC翻译小组陈丽薇译 04 样式库 交互 导航 数据输入 社交 BBC ID 地图 微博UDC翻译小组陈丽薇译 04 样式库 交互 手风琴 使用场景:在有限的空间显示大量文本、图片、链接、推广内容。 该组件使用可折叠的面板,让用户根据重要程度显示、隐藏相关内容。 微博UDC翻译小组陈丽薇译 04 样式库 交互 轮播 使用场景:在系统间隔内,按顺序自动播放相关图片。 微博UDC翻译小组陈丽薇译 04 样式库 交互 弹出层 使用场景:将用户的焦点从主要页面切换至单个元素或一组元素上。 微博UDC翻译小组陈丽薇译 04 样式库 交互 幻灯片 使用场景:让用户在有限的区域浏览多张大图。 微博UDC翻译小组陈丽薇译 04 样式库 导航 信息面板 使用场景:用户点击页面上的某项时,出现信息面板。 该面板提供页面元素的附加信息、图片、链接或上下文帮助内容。 微博UDC翻译小组陈丽薇译 04 样式库 导航 iPlayer节目推荐 使用场景:推广用户可以观看的BBC节目。 该推广内容可能与模块所在页面相关,也可能推荐各种iPlayer TV和电台节目。 微博UDC翻译小组陈丽薇译 04 样式库 导航 局部导航 使用场景:告诉用户可行的路径,并指示当前位置。 创建一个细致的导航系统,让用户在较深层级间导航,同时提供返回上一级的入口。 微博UDC翻译小组陈丽薇译 04 样式库 导航 翻页 使用场景:将不易在单页展示的大量内容,分为多个较小的页面。 用户可通过翻页链接浏览内容。 微博UDC翻译小组陈丽薇译 04 样式库 导航 内容推广 使用场景:BBC网站的推广通常出现在页面头部或右侧栏,有时以广告的形式。 这些推广内容的尺寸由IAB(交互式广告局)或OPA(在线出版商协会)提供。 微博UDC翻译小组陈丽薇译 04 样式库 导航 Tab 使用场景:让用户在不同的内容面板间导航,而不用刷新整个页面。 微博UDC翻译小组陈丽薇译 04 样式库 导航 工具提示 使用场景:当用户点击或鼠标悬浮在页面上的某项时,触发工具栏提示。 该提示展示某个页面元素的附加信息或相关帮助信息。 微博UDC翻译小组陈丽薇译 04 样式库 数据输入 自动提示 使用场景:在表单区域输入内容时,提示相关单词或词组。 微博UDC翻译小组陈丽薇译 04 样式库 社交 共享工具 使用场景:将BBC网页分享至各社交网络。 微博UDC翻译小组陈丽薇译 04 样式库 BBC ID BBC ID 登录&注册 使用场景:BBC ID是BBC网站的核心标识系统。登录和注册的模块可使用BBC ID API 嵌入在页面里。这是在应用中嵌入BBC ID的官方形式,确保一致的用户体验。 微博UDC翻译小组陈丽薇译 04 样式库 地图 分组 使用场景:分组以更易用的方式收集和呈现内容。 分组的目的是确保地标间距离最短,位置重合的地标也可让用户到达。 微博UDC翻译小组陈丽薇译 04 样式库 地图 导航&缩放控件 使用场景:提供平移、缩放和重置操作。 使用该组件时,每个按钮都有工具栏提示和悬浮状态。若用户不与该控件交互,一段时 间后提示或悬浮状态消失。 微博UDC翻译小组陈丽薇译 04 样式库 地图 浮动按钮 使用场景:在可交互的地图或其他缩放组件中,合理地放置浮动按钮,以拆分各功能,更好地使用这些功能。 这些按钮主要用于切换层,比如在不同地图视图间跳转、动态图片的数据设置。 微博UDC翻译小组陈丽薇译 04 样式库 地图 地标 使用场景:在地图或可交互的图片中,将内容定位到特定位置。 地标可使用以下样式:气球状、点状、图标、缩略图、标题栏样式。 微博UDC翻译小组陈丽薇译 微博UDC翻译小组陈丽薇译 05 谢谢 05 谢谢

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享文档获得金币 ] 0 人已下载

下载文档

相关文档