海底捞信息化系统UI规范.docx
- 文档编号:23323194
- 上传时间:2023-05-16
- 格式:DOCX
- 页数:28
- 大小:554.37KB
海底捞信息化系统UI规范.docx
《海底捞信息化系统UI规范.docx》由会员分享,可在线阅读,更多相关《海底捞信息化系统UI规范.docx(28页珍藏版)》请在冰豆网上搜索。
海底捞信息化系统UI规范
海底捞时尚体验项目信息化系统UI规范V1.0
企业UCD行业应用小组
2011年9月15日发布2011年9月15日实施
华为技术有限公司
HuaweiTechnologiesCo.,Ltd.
版权所有XX
Allrightsreserved
修订声明Revisiondeclaration
本规范的相关系列规范或文件:
《华为公司B/S界面规范V3.0Checklist》
相关规范或文件的相互关系:
在本规范中的某些规范条款需要遵守公司内部其他规范;包括《华为公司GUI界面文本规范V1.0》、《软件编程规范》、《Java语言编程规范》、《联机帮助技术规范2.0》、《华为B/S界面规范V3.0》。
范围Scope:
本规范适用于华为公司海底捞时尚体验项目中的信息化系统产品。
如果本规范与行业标准存在冲突,则行业标准优先于本规范,但对于行业标准不涉及的部分,则必须严格遵守本规范。
简介Briefintroduction:
本规范描述了海底捞时尚体验项目信息化系统界面所必须遵守的规则,以及一些优先使用的建议,统一了海底捞信息化系统的界面视觉风格和交互操作规则,从而保证不同系统间图形界面具有较强的一致性、良好的可用性以及良好的界面视觉识别体系。
目录TableofContents
表目录ListofTables
图目录ListofFigures
1概述
信息化系统建设是海底捞时尚体验项目的重要组成部分,涵盖了pad点餐系统、touch服务助理、触摸屏点菜、iphone客户端、网站、CRM系统、话务订餐系统等从门店运营到集团管控的方方面面。
用户希望我们的软件不仅功能完备,并且简单易学易用。
另一方面,产品的图形用户界面也是华为视觉识别系统的一个重要部分,系统开发过程中需要保持视觉表达的系统性和一致性。
如何快速地、高质量的完成图形用户界面设计,保证交付的图形用户界面具备高可用性和良好的一致性,同时体现出统一的华为品牌风格,对于我司的产品开发来说是巨大挑战,这也是本规范的制定初衷。
本规范从产品交付角度,结合海底捞项目的实际情况,从界面表现和人机交互角度,给出了各个系统的界面和内部各种元素、控件必须遵守的规则要求,同时对于一些好的设计,给出了建议。
1.1文档结构
本规范包括以下几大部分:
1、设计总则:
界面设计应该遵循的总体原则。
2、基本元素:
重点描述在图形用户界面设计中所使用到基本对象(如文本、图像、颜色、链接、控件等)以及基本操作进行约束,是界面一致性和统一风格的设计基础。
3、系统框架:
这部分集中对海底捞信息化系统中的各个子系统的UI界面和交互方式等进行了说明和约束,使系统各部分在界面外观及操作流程上达到一致性。
1.2假设和约束
1、本规范适用于海底捞信息化系统的UI界面和交互行为。
该规范主要依据各个子系统的界面原型,对于在界面原型中可进行明显体现的设计规则,本规范可能不会再重复描述。
2、本规范结合界面原型和视觉效果图适用,控件样式、配色、字体等参考视觉规范。
如在开发过程中,对原型有所变更,需经UCD设计人员评审确认。
3、B/S产品或系统的联机帮助界面不属于本规范约束范围,其主要遵循公司资料开发部制定的《联机帮助技术规范》,可以在公司“内部标准规范总库”上获得。
4、ipad点餐系统除本规范外还需遵守苹果公司发布的《iOSHumanInterfaceGuidelines》。
5、对于touch信息助理,如适用itouch也需要遵守苹果公司发布的《iOSHumanInterfaceGuidelines》;如采用的是android设备,则需遵循android软件界面规范。
2总则
一般来说,所有的图形界面设计应以整齐、一致、简单、易用、可用为原则,在ITU-TRecommendationZ.361HCI规范和ISO9241系列界面设计规范中对界面设计给出了比较完整、系统的理论指导。
2.1全球化
2.1.1布局
规则3.1.1.1:
在控件的水平方向和垂直方向预留足够的空间,以适应控件的扩展
说明:
当GUI界面从英语翻译到其它语言,包含文本的控件的长度将至少扩展30%[1]。
这些控件包括按钮、菜单、表单、标签、文本域等。
如果窗口本身已经很宽了,扩展将引起窗口超过屏幕的宽度。
遵从国际化的界面布局规则,将在减少GUI界面调整的情况下,使GUI界面更好地适应翻译后的文本扩展。
例如,相对于将控件并排放置,将控件上下放置可以为控件在水平方向扩展预留空间。
图1控件并排放置
图2控件上下放置
规则3.1.1.2:
控件本身预留足够的空间以适应扩展,或者控件自适应文本的长度和宽度
说明:
基于翻译后文本将会扩展的预期,在设计控件大小的时候预留一定的余地,以适应文本扩展。
某些控件在一定的布局方式下,支持自适应文本长度和宽度的能力。
规则3.1.1.3:
GUI界面的布局要适应本地的阅读顺序习惯
说明:
世界上大多数语言都是从左到右的阅读顺序,但有些语言是从右到左的阅读顺序。
例如,汉语、英语等都是从左到右的阅读顺序,但阿拉伯语、希伯来语是从右到左的阅读顺序。
当软件翻译成具有从右到左的阅读顺序的语言时,GUI界面的布局也要切换成从右到左的布局。
例如,垂直滚动条将从窗口的右边移到窗口的左边;标签将从关联控件的左边移到关联控件的右边。
一般情况下,GUI界面的布局根据区域(locale)实现自动切换。
图3英文界面:
从左到右显示
图4阿拉伯文界面:
从右到左显示
建议3.1.1.4:
建议使用HTML和其它标记的方向属性来实现本地阅读顺序的布局
说明:
为了支持从左到右和从右到左布局,操作系统和浏览器已经做了大量工作。
只要合理使用HTML或者其它标记,就可以方便地实现从左到右和从右向左布局、显示文字。
例如,html的属性dir,可以取值为“ltr”,“rtl”,分别表示“从左向右”和“从右向左”,如果不加声明,则使用缺省的“ltr”。
还有其它方向属性,例如:
PADDING-RIGHT、TEXT-ALIGN、MARGIN-LEFT等。
建议3.1.1.5:
尽量避免控件使用绝对位置
说明:
考虑GUI界面阅读顺序的变化,尽量避免控件使用绝对位置。
规则3.1.1.6:
不要在文本中嵌入GUI控件
说明:
当从一种语言翻译到另外一种语言的时候,词序也会改变。
以下图为例,当翻译成法语后,词序发生了变化,GUI界面需要重新调整布局。
图5翻译成法语后出现错误的词序
更具弹性的做法是不要在文本中嵌入GUI控件:
图6词序在英语和法语中都正确
规则3.1.1.7:
GUI界面上显示和输入的区域数据要符合本地的数据格式[2]
说明:
区域数据包括时间、日期、货币、数字、度量衡等。
不同的国家和地区有不同的数据格式。
例如,美国的日期格式是按照月日年(长日期格式:
Saturday,August28,2010,短日期格式:
8/28/2010)的顺序显示,而中国的日期格式是按照年月日(长日期格式:
2010年8月28日,短日期格式:
2010-8-28)的顺序显示。
美国使用华氏计量温度(℉),而中国使用摄氏计量温度(℃)。
通常根据当前区域(locale)来格式化GUI界面上的区域数据,确保区域数据的显示符合本地的数据格式。
同时,在GUI界面上输入区域数据的布局也要符合本地的数据格式要求。
2.1.2字体
规则3.1.2.1:
使用本地通用的字体
说明:
不同地区、不同语言对应的本地通用字体不尽相同。
GUI界面上的文本使用本地通用的字体。
一般情况下,GUI界面上的文本使用的字体是可以配置或修改的。
2.1.3图像与图标
规则3.1.3.1:
使用国际通用的或者中性的图像和图标
说明:
图像和图标表达的内容丰富、形象,但是不同地区的人其文化背景不尽相同,对图像和图标的理解也不尽相同,有时甚至是完全对立的。
同时,创建和修改图像和图标需要大量的投入。
因此,尽量使用国际通用的或者中性的图像和图标。
建议3.1.3.2:
避免在图像和图标中出现人的身体部位以及体现性别、肤色的内容
说明:
人的身体部位在不同的地区有不同的含义,某个身体部位在某些地区会成为一个禁忌。
同样,性别和肤色在某些地区也可能成为禁忌。
建议3.1.3.3:
避免在图像和图标中包含文本
说明:
创建和修改图像和图标需要大量的投入。
因此,尽量使用与语言无关的图像和图标。
2.1.4主题样式
规则3.1.5.1:
所有的主题样式与HTML代码分离,形成CSS样式表
说明:
通常,不同的语言版本使用不同的主题样式。
主题样式写在HTML代码里面,如果要发布多语言版本,维护起来相对困难。
将所有的主题样式提取到CSS文件里面统一管理,软件根据当前的区域(locale)读取对应的CSS文件。
建议GUI界面使用的字体、颜色、文字方向、界面布局方向等跟区域和语言相关的样式分离到CSS文件中。
2.2人机交互
对于基于PC界面的系统,通用输入设备主要包括键盘和鼠标。
对于终端(ipad、iphone、touch)等设备的人机交互参照各设备的交互约束。
2.2.1键盘
规则3.2.1.1:
web输入控件的自动聚焦和可用键盘切换输入焦点
说明:
使用JavaScript实现页面加载完成后立即自动聚焦(focus)到第一个输入控件。
可用TAB键(IE缺省实现)或方向键切换聚焦到下一个输入控件。
建议3.2.1.2:
web界面中禁止自定义快捷键
规则3.2.1.3:
用户可以方便地与系统进行交互,在鼠标与键盘之间的切换不要太频繁。
建议3.2.1.4:
禁止在web界面上做“键屏蔽”设置
说明:
禁止“键屏蔽”是为了保证用户最大的操作自由;例如:
禁止复制快捷键、禁用shift键等。
规则3.2.1.6:
TAB焦点应在用户可进行操作的控件间切换
规则3.2.1.7:
当使用“Tab”键和方向键进行遍历时,“Tab”键的遍历顺序和“下”、“右”方向键的遍历顺序为从左到右、从上到下;“Shift+Tab”键的遍历顺序和“上”、“左”方向键的遍历顺序为从右到左、从下到上。
2.2.2鼠标
一般来说,系统设计中主要考虑对鼠标左键和右键功能的支持,对于鼠标中键和智能鼠标不作要求。
规则3.2.2.1:
当浏览器支持鼠标的智能中键操作时,系统必须保证在用户使用智能鼠标功能的时候,不影响系统正常运行。
建议3.2.2.2:
禁止系统改变鼠标默认样式
说明:
鼠标默认样式对于用户操作有着重要指示作用,如当前区域支持“文本输入”显示“I”形状、支持“点击”显示手形,当前等待状态显示“漏斗”形状。
如果随意更改鼠标形状,将会影响用户操作判断。
建议3.2.2.3:
嗨捞汇网站禁止软件自定义鼠标右键菜单
说明:
在B/S操作界面上点击鼠标右键,将会弹出浏览器自定义的右键菜单,这些功能对用户非常有用,自定义右键将会屏蔽掉这个菜单。
建议3.2.2.4:
对用户的鼠标定位操作,当移动到可响应的位置上时,给予视觉或者听觉的提示,如采用鼠标移上时,对象背景颜色发送改变。
2.2.3行为
建议3.2.3.1:
用户进入常用功能的操作页面的鼠标点击次数不超过三次。
说明:
在不丢失系统功能的前提下,在设计中要尽可能的减少用户需要点击鼠标的次数。
需要用户选择的参数条件系统需要根据用户的使用需求给出默认的选择项目。
建议3.2.3.2:
尽可能早的在客户端完成输入数据合法性验证
说明:
输入数据的合法性检验应该在客户端使用JavaScript进行验证。
除非验证只能在服务器端完成,否则验证工作应在最早能完成的情况下进行,对于是否需要在服务器端验证不属于可用性的范围,本建议不做限定。
建议3.2.3.3:
对于需要频繁操作的场合,应减少服务器和客户端交互次数,提交完毕直接返回原来的表单页面或默认页面。
2.3国际标准
遵从浏览器的国际标准有利用产品UI在各大主流浏览器的正常呈现,同时也会因表现的一致性而使得前台研发工程师的研发难度降低。
规则3.3.1:
UI页面必须遵从W3C的transitional文档解析标准,以在保证解析一致的前提下,降低研发难度。
即,在Web页面源码的首行加入如下代码:
图7Web页面首行声明解析标准
说明:
不同浏览器在未声明DOCTYPE文档解析标准时,对UI元素的解析标准不同,而相对于strict、frameset标准而言,transitional标准对研发UI的难度就小。
例如:
strict标准不允许使用元素的某些属性,比如超链接a的属性target、iframe的所有属性均会在strict标准下失效。
而frameset标准仅适合framset页面使用。
规则3.3.2:
所有Web页面包括对应的JS和CSS文件,存储编码统一采用UTF-8保存。
同时须保证所有Web页面头中必须声明文档字符集为UTF-8,示例代码如下:
图8Web页面中声明文档字符集的片段
说明:
UTF-8字符集可以保证产品的特殊字符不会出现乱码;存储编码与字符集都统一为UTF-8,是为了保证页面之间、页面与数据源(数据库、XML、JSON等)之间的数据传输不会出现乱码。
2.4跨浏览器
规则3.4.1:
公司所有Web类产品,必须支持IE6.0(及以上版本)及Firefox3.0(及以上版本)等主流浏览器上正常显示及UI交互。
说明:
IE及Firefox无论在国内还是国际范围,它们的市场占有率之和远远超过了半数,跨浏览器的兼容能力可以帮助产品具有更大的竞争优势(包括但不限于UI重用、跨产品UI融合)。
建议3.4.2:
建议在支持IE、Firefox等主流浏览器的同时,同样支持Chrome、Safari、Opera、Maxthon等市场占有率呈逐年上升的浏览器。
2.5显示适配
规则3.5.1:
页面内容的排行采用流式布局方式,以适应不同显示设备(输出设备)的分辨率,减少横向滚动对用户的干扰。
说明:
.所谓流式布局意思是从左到右对该容器里面的控件进行布局,当一行不能容纳时候自动换行。
该布局是从左到右(双向显示时,从右向左),然后从上到下。
图9流式布局样例
规则3.5.2:
产品整理框架采用弹性布局(网式布局)方式。
图10弹性布局样例
3企业VI品牌
3.1全称与简称
3.2品牌标志
3.3品牌色
3.4形象图片
形象图片是构成海底捞品牌的关键元素。
图片风格直接影响海底捞公司被感知的形象,并使海底捞有别于竞争对手。
界面中,图片的运用主要是对某个重要信息进行图解、突出、视觉渲染,图片通常出现在登录页面、首页顶部(banner)、导航入口、关于页面等,页面的图片对系统的认知、视觉识别性、品牌形象至关重要。
规则4.4.1:
在选择图片时,请选择那些包含海底捞品牌颜色的图片。
说明:
颜色无需完全一致或非常突出,局部细节色彩的一致都有助于形成一致的感觉,从而强化海底捞的视觉风格。
规则4.4.2:
当选择有人物的图片时,请确保图片的信息清晰明确。
必须反映海底捞品牌的核心价值和个性。
规则4.4.3:
当选择借喻式的图片时,请确保它们反映海底捞品牌的核心价值和个性。
说明:
借喻式的图片以间接的方式传达信息。
这类图片使海底捞品牌超越语言的局限,而更加富有深意。
建议4.4.4:
避免使用那些陈腐过时或平庸乏味的图片、避免使用姿势造作、内容不适合海底捞品牌的图片。
说明:
不恰当的图片会削弱海底捞品牌的视觉表现力,并破坏视觉传播的统一。
3.5品牌字体
4基本元素
4.1表格Table
规则5.1.1:
除下列情况外,禁止使用表格作为布局元素。
说明:
因表格的结构化特性使得展现能力不够录活,W3C标准对表格的定位是为了显示查询结果数据,而非布局。
图11查询结果表格示例
规则5.1.2:
表格中列的竖线有无对文本的影响,见下图。
说明:
没有竖线的情况下,若表格内的文本不采用左对齐,会使得用户阅读时焦点出现跳跃,不方便定位。
图12无竖线表格示例
图13竖线表格示例
建议5.1.3:
单元格内文本不允许贴边;单元格内的多行文本垂直上对齐;水平方向一般采用左对齐,但数值型文本可采用右对齐以方便比较大小。
说明:
文本贴边会使得部分字符识别困难(如:
“1”和“l”)。
图14单元格中文本示例
建议5.1.4:
表格的操作工具区位置应置与其顶部,以保证操作入口可见性;页码及翻页信息置于表格底部。
图15带工具条的表格布局示例
建议5.1.5:
如果表格支持过滤查询功能,使用模糊匹配的方式,方便用户定位记录。
规则5.1.6:
对表格数据的批量处理,如果通过复选按钮进行,则只能对当前页面的数据操作。
如果需要对所有数据批量操作,则必须给出语义明确的操作入口,避免用户产生歧义。
图16批量操作示例
4.2列表list
建议5.2.1:
适用于榜单类小列表或排名的界面设计。
说明:
列表体现的是数据轻量,格式简单,有一定排序,且基于语义。
图17列表示例
4.3标签页Tab
规则5.3.1:
标签页首,若文本被截断,则须给出鼠标移上的Tip提示,以帮助用户阅读。
图18标签页Tab内容布局示例
图19标签页Tab窗口布局示例
规则5.3.2:
切换Tab页后再返回原Tab页面,不会引起该Tab页的全部刷新(如:
展示查询结果的页面,或表单填写页面就不可刷新,以免丢失数据)。
建议5.3.3:
Tab页若可以关闭,且有右键菜单,则菜单中至少包括“关闭”、“关闭其他页”及“关闭所有”三项。
建议5.3.4:
Tab页签打开过多时,出现扩展菜单按钮。
点击该按钮,可显示被隐藏部分的Tab页签构成的菜单。
4.4树Tree
规则5.4.1:
如果树节点数量较大,必须采用分层加载技术,保证用户阅读效率。
说明:
节点量较大时,若采用一次性加载节点,会使得用户较长时间处理等待状态,用户感知很差。
图20树Tree示例
规则5.4.2:
对于带有复选框的树,能够体现出三种状态:
全选中、部分选中、未选中。
规则5.4.3:
对树新增节点操作后,新增的节点需要立即显示在树上,即树立即展开并定位到新增的节点。
建议4.3.4:
树节点上的图标尺寸建议值为16px*16px。
图标种类不宜过多,否则不易用户识别理解。
4.5提示Tip
规则5.5.1:
提示Tip的宽度可以自适应其文本内容,并保证其在浏览器可视区域内正常显示。
说明:
关键字、术语、未显示全的段落文本,应配备对应的提示Tip,以帮助用户了解详细信息。
图21提示Tip示例
建议5.5.2:
Tip的宽高尺寸可以选择120*30、120*90、180*135、200*150作为参考值。
4.6表单控件Form
规则5.6.1:
文本输入的提示标签(域标签),以英文半角冒号“:
”结尾,水平左对齐。
文本标签不能贴边。
说明:
冒号用于表示提示标签与输入控制之间的关系。
标签文本水平左对齐可以帮助用户快速定位到每一行。
文本标签不贴边以保证所有字符能够被用户正常识别。
图22表单单列布局示例
图23表单按钮布局示例
规则5.6.2:
表单的第一个输入项(如:
文本输入框)为默认输入焦点。
见上图。
说明:
当同一页面中有多个表单时,则第一个表单的第一个输入项为默认输入焦点。
规则5.6.3:
表单中,必填项必须以符号“*”来明确标识出,该符号位置放置在输入框的后方。
字符颜色为#990000。
说明:
必填项的标识,须满足全球化的双向显示要求。
图24表单必填项标识符示例
规则5.6.4:
输入查询内容或关键字后,可以使用Enter键激活查询操作,效果和点击“查询”按钮一致。
说明:
输入关键字后回车已成为一种习惯性用户行为,这种快捷操作有利用提升用户查询效率。
建议5.6.5:
单选框(radio)和复选框(checkbox)控件,应该与其对应的文本标签(Label)相关联,即:
点击其文本标签与点击控件有相同的效果(均可选中或取消选中)。
说明:
单选框与复选框因控制本身的尺寸较小,根据Fitts定律,会使得鼠标定位时间较长,通过将标签关联的方式,可将其感应区变大,提升用户操作效率。
图25表单radio或checkbox的文本标签示例
规则5.6.6:
多行文本输入框、多行下拉列表应与其标签域垂直上对齐。
图26表单标签域与输入框垂直上对齐示例
4.7窗口Window
规则5.7.1:
用于展示少量的输入操作。
说明:
对于展示较多的输入操作或文本信息,不适用于这种窗口方式呈现。
因为这种方式使用可视区相对较小,展现信息有限,容易出现滚动条,不利用用户操作或阅读。
图27窗口Window示例
建议5.7.2:
窗口宽度可以自适应内容,避免出现不必要的滚动条,影响阅读。
4.8消息Message
规则5.8.1:
少量信息的反馈。
当展示给用户消息(Message)时,高亮显示该消息,并为用户设置默认的操作焦点。
说明:
消息Message可分为确认(confirm)、提示(prompt)。
确认是为了让用户再次确定该操作是否继续进行,提示是给用户的反馈信息或提醒。
默认操作焦点是为了提升用户的操作效率,同时保证消息框的操作不仅可以由鼠标完成,也同样可以由键盘来完成。
图28消息Message示例
规则5.8.2:
消息窗口内的按钮水平居中显示。
4.9版式Format
规则5.9.1:
版式的设计应满足自适应布局要求。
图29运营产品版式示例
图30Portal版式示例
4.10面包屑crumbs
规则5.10.1:
每个层次之间以“>”分隔,并可以通过点击,随时返回至上一级。
图31面包屑crumbs示例
规则5.10.2:
面包屑上的超链接,至少能体现出鼠标移上和正常两种状态。
4.11图标icon
规则5.11.1:
对于非常用的菜单、按钮、图例等,不使用图标表达其含义。
说明:
图标往往存在表义不明确的情况,滥用图标会使得用户的记忆负担加重,影响对系统反馈、任务执行的判断。
建议5.11.2:
尽量少使用图标。
说明:
图标设计需要考虑较多全球化、品牌、版权问题,有时对地域、颜色、民族文化、法律方面会存在争议。
同时,也给全球化布局带来些许的工作量。
4.12进度条processbar
规则5.12.1:
对于执行时间超过3秒的任务或操作,当前界面必须给出提示;例如采用将鼠标图标显示为忙、显示进度条的方式进行提示。
说明:
1、任务执行时间是指用户通过鼠标或键盘发出命令到界面完全显示操作结果的时间。
2、对于图形用户界面中,对于类似人机接口(如MML/CLI接口)的任务交互,此处不进行约束。
规则5.12.2:
对于执行时间超过10秒的任务或操作,必须采用进度条方式进行提示。
建议5.12.3:
对于能够计算进度值的任务,给出具体的进度值,以明确任务的完成程度。
5系统框架
采用B/S架构的产品或系统的界面一般来说主要由以下几种典型界面:
登录界面、加载界面、主界面;同时在系统运行过程中,Help界面、About界面、错误处理界面是主界面的必要部分。
同时系统对多语言切换和换肤功能的支持也是目前web产品的常用功能。
5.1登录界面
5.1.1属性
规则6.1.1.1:
登录界面各区域布局由上至下依次为:
识别区、输入输出区、消息区;各区域大小范围定义参考主界面各区域大小范围。
说明:
登录界面布局如下图所示:
识别区
输入输出区
消息区
图32登录界面布局示意图
图33登录界面示意图
规则6.1.1.2:
登录界面中必须包
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 海底 信息化 系统 UI 规范