海底撈信息化系統(tǒng)UI規(guī)范

海底撈時尚體驗工程信息化系統(tǒng)UI標準V1.0企業(yè)UCD行業(yè)應(yīng)用小組2011年9月15日公布 2011年9月15日實施華為技術(shù)HuaweiTechnologiesCo.,Ltd.版權(quán)全部侵權(quán)必究Allrightsreserved內(nèi)部公開/ForinternaluseonlyDKBA5054-2010.11修訂聲明Revisiondeclaration本標準的相關(guān)系列標準或文件：《華為公司B／S界面標準V3.0Checklist》相關(guān)標準或文件的相互關(guān)系：在本標準中的某些標準條款需要遵守公司內(nèi)部其他標準；包括《華為公司GUI界面文本標準V1.0Java語言編程標準》、《聯(lián)機幫助技術(shù)標準2.0》、《華為B/S界面標準V3.0》。范圍Scope：本標準適用于華為公司海底撈時尚體驗工程中的信息化系統(tǒng)產(chǎn)品。假設(shè)本標準與行業(yè)標準存在沖突，則行業(yè)標準優(yōu)先于本標準，但對于行業(yè)標準不涉及的局部，則必需嚴格遵守本標準。簡介Briefintroduction：本標準描述了海底撈時尚體驗工程信息化系統(tǒng)界面所必需遵守的規(guī)章，以及一些優(yōu)先使用的建議，統(tǒng)一了海底撈信息化系統(tǒng)的界面視覺風(fēng)格和交互操作規(guī)章，從而保證不同系統(tǒng)間圖形界面具有較強的全都性、良好的可用性以及良好的界面視覺識別體系。2022-04-27 華為機密，未經(jīng)許可不得集中 第2頁,共37頁2,Total37內(nèi)部公開/ForinternaluseonlyDKBA5054-2010.11目錄TableofContentsDKBA 錯誤!未定義書簽。DKBA1137-2006.12 錯誤!未定義書簽。TOC\o“1-2“\h\z\u\l“_TOC_250002“概述 7\l“_TOC_250001“文檔構(gòu)造 7\l“_TOC_250000“假設(shè)和約束 7界面可用性 錯誤!未定義書簽。易讀性原則 錯誤!未定義書簽。層次扁平化原則 錯誤!未定義書簽。近距離原則 錯誤!未定義書簽?？梢娦栽?錯誤!未定義書簽。反響原理 錯誤!未定義書簽。寬容性原理 錯誤!未定義書簽。重用性原則 錯誤!未定義書簽。保持適當關(guān)聯(lián)的原則 錯誤!未定義書簽。總則 8全球化 8布局 83.1.2 字體 12圖像與圖標 12顏色 錯誤未定義書簽。主題樣式 12人機交互 133.2.1 鍵盤 133.2.2 鼠標 143.2.3 行為 14國際標準 15跨掃瞄器 16顯示適配 16企業(yè)品牌 .72022-04-27 華為機密，未經(jīng)許可不得集中 第3頁,共37頁3,Total37內(nèi)部公開/ForinternaluseonlyDKBA5054-2010.11全稱與簡稱 17品牌標志 17品牌色 17形象圖片 17品牌字體 18地址和網(wǎng)址 錯誤!未定義書簽。根本元素 8表格TABLE 18列表LIST 21標簽頁TAB 22樹TREE 23提示TIP 24表單控件FORM 25窗口WINDOW 27消息MESSAGE 28版式FORMAT 29面包屑CRUMBS 30圖標ICON 30進度條PROCESSBAR 30系統(tǒng)框架 31登錄界面 316.1.1 屬性 31主界面 32總體布局 32顏色搭配 34HELP界面 34ABOUT界面 356.4.1 屬性 35多語言功能 356.5.1 屬性 356.5.2 行為 36換膚功能 錯誤!未定義書簽。屬性 錯誤!未定義書簽。行為 錯誤!未定義書簽。2022-04-27 華為機密，未經(jīng)許可不得集中 第4頁,共37頁4,Total37內(nèi)部公開/ForinternaluseonlyDKBA5054-2010.11表名目ListofTables表1主界面各區(qū)域大小范圍 3圖名目ListofFigures圖1控件并排放置..圖2控件上下放置..圖3英文界面：從左到右顯示 .0圖4阿拉伯文界面：從右到左顯示 .0圖5翻譯成法語后消滅錯誤的詞序 .1圖6詞序在英語和法語中都正確 .1圖7We頁面首行聲明解析標準 .5圖8We頁面中聲明文檔字符集的片段 .6圖9流式布局樣例6圖10彈性布局樣例7圖11查詢結(jié)果表格例如 .9圖12無豎線表格例如 .9圖13豎線表格例如0圖14單元格中文本例如 .0圖15帶工具條的表格布局例如 .0圖16批量操作例如1圖17列表例如 2.2圖18標簽Tab內(nèi)容布局例如 .2圖19標簽Tab窗口布局例如 .3圖20樹Tree例如 2.4圖21提示Tip例如 2.5圖22表單單列布局例如 .5圖23表單按鈕布局例如 .6圖24表單必填項標識符例如 .6圖25表單radi或checkbo的文本標簽例如 .7圖26表單標簽域與輸入框垂直上對齊例如 .7圖27窗Window例如 .8圖28消Messag例如 .82022-04-27 華為機密，未經(jīng)許可不得集中 第5頁,共37頁5,Total37內(nèi)部公開/ForinternaluseonlyDKBA5054-2010.11圖29運營產(chǎn)品版式例如 .9圖30Portal版式例如 2.9圖31面包屑crumb例如 .0圖32登錄界面布局示意圖1圖33登錄界面示意圖 3.1圖34主界面布局和大小示意圖 .3圖35彈出式窗口布局示意圖 3圖36we主界面切分出狀態(tài)信息區(qū)示意圖 .4圖37主界面各區(qū)域顏色配色示意圖 .42022-04-27 華為機密，未經(jīng)許可不得集中 第6頁,共37頁6,Total37華為公司B/S界面標準V3.0 文檔密級概述信息化系統(tǒng)建設(shè)是海底撈時尚體驗工程的重要組成局部，涵蓋了pad點餐系統(tǒng)、touch效勞助理、觸摸屏點菜、iphone客戶端、網(wǎng)站、CRM系統(tǒng)、話務(wù)訂餐系統(tǒng)等從門店運營到集團管控的方方面面。用戶期望我們的軟件不僅功能完備，并且簡潔易學(xué)易用。另一方面，產(chǎn)品的圖形用戶界面也是華為視覺識別系統(tǒng)的一個重要局部表達的系統(tǒng)性和全都性。和良好的全都性，同時表達出統(tǒng)一的華為品牌風(fēng)格，對于我司的產(chǎn)品開發(fā)來說是巨大挑戰(zhàn)，這也是本標準的制定初衷。出了各個系統(tǒng)的界面和內(nèi)部各種元素、控件必需遵守的規(guī)章要求，同時對于一些好的設(shè)計，給出了建議。文檔構(gòu)造本標準包括以下幾大局部：1、設(shè)計總則：界面設(shè)計應(yīng)當遵循的總體原則。2、根本元素：重點描述在圖形用戶界面設(shè)計中所使用到根本對象〔如文本、圖像、顏色、鏈接、控件等〕以及根本操作進展約束，是界面全都性和統(tǒng)一風(fēng)格的設(shè)計根底。3、系統(tǒng)框架：這局部集中對海底撈信息化系統(tǒng)中的各個子系統(tǒng)的UI界面和交互方式等進展了說明和約束，使系統(tǒng)各局部在界面外觀及操作流程上到達全都性。假設(shè)和約束1、本標準適用于海底撈信息化系統(tǒng)的UI界面和交互行為。該標準主要依據(jù)各個子系統(tǒng)的界面原型，對于在界面原型中可進展明顯表達的設(shè)計規(guī)章，本標準可能不會再重復(fù)描述。2、本標準結(jié)合界面原型和視覺效果圖適用，控件樣式、配色、字體等參考視覺標準。如在開發(fā)過程中，對原型有所變更，需經(jīng)UCD設(shè)計人員評審確認。2022-4-27 華為機密，未經(jīng)許可不得集中 第7頁,共37頁華為公司B/S界面標準V3.0 文檔密級3、B/S產(chǎn)品或系統(tǒng)的聯(lián)機幫助界面不屬于本標準約束范圍，其主要遵循公司資料開發(fā)部制定的《聯(lián)機幫助技術(shù)標準》，可以在公司“內(nèi)部標準標準總庫”上獲得。4、ipad點餐系統(tǒng)除本規(guī)范外還需遵守蘋果公司公布的《iOSHumanInterfaceGuidelines》。5touchitouchiOSHumanInterfaceGuidelines》；如承受的是android設(shè)備，則需遵循android軟件界面標準?？倓tITU-TRecommendationZ.361HCI標準和ISO9241系列界面設(shè)計標準中對界面設(shè)計給出了比較完整、系統(tǒng)的理論指導(dǎo)。全球化布局規(guī)章3.1.1.1：在控件的水平方向和垂直方向預(yù)留足夠的空間，以適應(yīng)控件的擴展說明：當GUI界面從英語翻譯到其它語言，包含文本的控件的長度將至少擴展30%[1]這些控件包括按鈕、菜單、表單、標簽、文本域等。假設(shè)窗口本身已經(jīng)很寬了，擴展將引起窗口超過屏幕的寬度。遵從國際化的界面布局規(guī)章，將在削減GUI界面調(diào)整的狀況下，使GUI界面更好地適應(yīng)翻譯后的文本擴展。例如，相對于將控件并排放置，將控件上下放置可以為控件在水平方向擴展預(yù)留空間。2022-4-27 華為機密，未經(jīng)許可不得集中 第8頁,共37頁華為公司B/S界面標準V3.0 文檔密級圖1控件并排放置圖2控件上下放置規(guī)章3.1.1.2：控件本身預(yù)留足夠的空間以適應(yīng)擴展，或者控件自適應(yīng)文本的長度和寬度應(yīng)文本擴展。某些控件在肯定的布局方式下，支持自適應(yīng)文本長度和寬度的力量。規(guī)章3.1.1.3：GUI界面的布局要適應(yīng)本地的閱讀挨次習(xí)慣2022-4-27 華為機密，未經(jīng)許可不得集中 第9頁,共37頁華為公司B/S界面標準V3.0 文檔密級序。當軟件翻譯成具有從右到左的閱讀挨次的語言時，GUI界面的布局也要切換成從右到左關(guān)聯(lián)控件的右邊。一般狀況下，GUI界面的布局依據(jù)區(qū)域〔locale〕實現(xiàn)自動切換。圖3英文界面：從左到右顯示圖4阿拉伯文界面：從右到左顯示建議3.1.1.4：建議使用HTML和其它標記的方向?qū)傩詠韺崿F(xiàn)本地閱讀挨次的布局2022-4-27 華為機密，未經(jīng)許可不得集中 第10頁,共37頁華為公司B/S界面標準V3.0 文檔密級合理使用HTML或者其它標記，就可以便利地實現(xiàn)從左到右和從右向左布局、顯示文字。例如，html的屬性dir，可以取值為“l(fā)tr”，“rtl”，分別表示“從左向右”和“從右向左”，假設(shè)不加聲明，則使用缺省的“l(fā)tr”。還有其它方向?qū)傩?，例如：PADDING-RIGHT、TEXT-ALIGN、MARGIN-LEFT等。建議3.1.1.5：盡量避開控件使用確定位置說明：考慮GUI界面閱讀挨次的變化，盡量避開控件使用確定位置。規(guī)章3.1.1.6：不要在文本中嵌入GUI控件成法語后，詞序發(fā)生了變化，GUI界面需要重調(diào)整布局。圖5翻譯成法語后消滅錯誤的詞序更具彈性的做法是不要在文本中嵌入GUI控件：圖6詞序在英語和法語中都正確說明：區(qū)域數(shù)據(jù)包括時間、日期、貨幣、數(shù)字、度量衡等。不同的國家和地區(qū)有不同的〔長日期格式：Saturday,August28,2010，短日期格式：8/28/2010〕〔長日期格式：2010年8月28日，短日期格式：2010-8-28〕的挨次顯示。美國使用華氏計量溫度〔℉〕，而中2022-4-27 華為機密，未經(jīng)許可不得集中 第11頁,共37頁華為公司B/S界面標準V3.0 文檔密級國使用攝氏計量溫度〔℃〕。通常依據(jù)當前區(qū)域〔locale〕來格式化GUI界面上的區(qū)域數(shù)據(jù)，GUI界面上輸入?yún)^(qū)域數(shù)據(jù)的布局也要符合本地的數(shù)據(jù)格式要求。字體規(guī)章3.1.2.1：使用本地通用的字體GUI界面上的文本使用本地通用的字體。一般狀況下，GUI界面上的文本使用的字體是可以配置或修改的。圖像與圖標規(guī)章3.1.3.1大量的投入。因此，盡量使用國際通用的或者中性的圖像和圖標。建議3.1.3.2：避開在圖像和圖標中消滅人的身體部位以及表達性別、膚色的內(nèi)容禁忌。同樣，性別和膚色在某些地區(qū)也可能成為禁忌。建議3.1.3.3標。主題樣式規(guī)章3.1.5.1：全部的主題樣式與HTML代碼分別，形成CSS樣式表2022-4-27 華為機密，未經(jīng)許可不得集中 第12頁,共37頁華為公司B/S界面標準V3.0 文檔密級HTML代碼里面，如果要公布多語言版本，維護起來相對困難。將全部的主題樣式提取到CSS文件里面統(tǒng)一治理，軟件依據(jù)當前的區(qū)域文字方向、界面布局方向等跟區(qū)域和語言相關(guān)的樣式分別到CSS文件中。人機交互對于基于PC界面的系統(tǒng)，通用輸入設(shè)備主要包括鍵盤和鼠標。對于終端〔ipad、iphone、touch〕等設(shè)備的人機交互參照各設(shè)備的交互約束。鍵盤web輸入控件的自動聚焦和可用鍵盤切換輸入焦點說明：使用JavaScript實現(xiàn)頁面加載完成后馬上自動聚焦〔focus〕到第一個輸入控件?？捎肨AB鍵〔IE缺省實現(xiàn)〕或方向鍵切換聚焦到下一個輸入控件。建議3.2.1.2：web界面中制止自定義快捷鍵規(guī)章3.2.1.3：用戶可以便利地與系統(tǒng)進展交互，在鼠標與鍵盤之間的切換不要太頻繁。建議3.2.1.4：制止在web界面上做“鍵屏蔽”設(shè)置說明：制止“鍵屏蔽”是為了保證用戶最大的操作自由；例如：制止復(fù)制快捷鍵、禁用shift鍵等。規(guī)章3.2.1.6：TAB焦點應(yīng)在用戶可進展操作的控件間切換“右”方向鍵的遍歷挨次為從左到右、從上到下；“Shift+Tab”鍵的遍歷挨次和“上”、2022-4-27 華為機密，未經(jīng)許可不得集中 第13頁,共37頁華為公司B/S界面標準V3.0 文檔密級“左”方向鍵的遍歷挨次為從右到左、從下到上。鼠標標不作要求。規(guī)章3.2.2.1：當掃瞄器支持鼠標的智能中鍵操作時，系統(tǒng)必需保證在用戶使用智能鼠標功能的時候，不影響系統(tǒng)正常運行。建議3.2.2.2：制止系統(tǒng)轉(zhuǎn)變鼠標默認樣式示“I”外形、支持“點擊”顯示手形，當前等待狀態(tài)顯示“漏斗”外形。假設(shè)隨便更改鼠標外形，將會影響用戶操作推斷。建議3.2.2.3：嗨撈匯網(wǎng)站制止軟件自定義鼠標右鍵菜單說明：在B/S操作界面上點擊鼠標右鍵，將會彈出掃瞄器自定義的右鍵菜單，這些功能對用戶格外有用，自定義右鍵將會屏蔽掉這個菜單。建議3.2.2.4：對用戶的鼠標定位操作，當移動到可響應(yīng)的位置上時，賜予視覺或者聽覺的提示，如承受鼠標移上時，對象背景顏色發(fā)送轉(zhuǎn)變。行為建議3.2.3.1：用戶進入常用功能的操作頁面的鼠標點擊次數(shù)不超過三次。需要用戶選擇的參數(shù)條件系統(tǒng)需要依據(jù)用戶的使用需求給出默認的選擇工程。2022-4-27 華為機密，未經(jīng)許可不得集中 第14頁,共37頁華為公司B/S界面標準V3.0 文檔密級建議3.2.3.2：盡可能早的在客戶端完成輸入數(shù)據(jù)合法性驗證JavaScript進展驗證。除非驗證只能在不屬于可用性的范圍，本建議不做限定。建議3.2.3.3：對于需要頻繁操作的場合，應(yīng)削減效勞器和客戶端交互次數(shù)，提交完畢直接返回原來的表單頁面或默認頁面。國際標準遵從掃瞄器的國際標準有利用產(chǎn)品UI全都性而使得前臺研發(fā)工程師的研發(fā)難度降低。規(guī)章3.3.1：UI頁面必需遵從W3C的transitional文檔解析標準，以在保證解析全都的前提下，降低研發(fā)難度。即，在Web頁面源碼的首行參加如下代碼：圖7Web頁面首行聲明解析標準相對于strict、frameset標準而言，transitional標準對研發(fā)UI的難度就小。例如：strict標準不a的屬性targetiframe的全部屬性均會在strict標準下失效。而frameset標準僅適合framset頁面使用。規(guī)章3.3.2：全部Web頁面包括對應(yīng)的JS和CSS文件，存儲編碼統(tǒng)一承受UTF-8保存。同時須保證全部Web頁面頭中必需聲明文檔字符集為UTF-8，例如代碼如下：2022-4-27 華為機密，未經(jīng)許可不得集中 第15頁,共37頁華為公司B/S界面標準V3.0 文檔密級圖8Web頁面中聲明文檔字符集的片段說明：UTF-8為UTF-8，是為了保證頁面之間、頁面與數(shù)據(jù)源〔數(shù)據(jù)庫、XML、JSON等〕之間的數(shù)據(jù)傳輸不會消滅亂碼?？鐠呙槠饕?guī)章3.4.1：公司全部Web類產(chǎn)品，必需支持IE6.0〔及以上版本〕及Firefox3.0〔及以上版本〕等主流掃瞄器上正常顯示及UI交互。說明：IE及Firefox無論在國內(nèi)還是國際范圍，它們的市場占有率之和遠遠超過了半數(shù)，跨掃瞄器的兼容力量可以幫助產(chǎn)品具有更大的競爭優(yōu)勢〔包括但不限于UI重用、跨產(chǎn)品UI融合〕。建議3.4.2：建議在支持IE、Firefox等主流掃瞄器的同時，同樣支持Chrome、Safari、Opera、Maxthon等市場占有率呈逐年上升的掃瞄器。顯示適配規(guī)章3.5.1：頁面內(nèi)容的排行承受流式布局方式，以適應(yīng)不同顯示設(shè)備〔輸出設(shè)備〕的區(qū)分率，削減橫向滾動對用戶的干擾。說明：.所謂流式布局意思是從左到右對該容器里面的控件進展布局，當一行不能容納時候自動換行。該布局是從左到右〔雙向顯示時，從右向左〕，然后從上到下。圖9流式布局樣例2022-4-27 華為機密，未經(jīng)許可不得集中 第16頁,共37頁華為公司B/S界面標準V3.0 文檔密級規(guī)章3.5.2：產(chǎn)品整理框架承受彈性布局〔網(wǎng)式布局〕方式。圖10彈性布局樣例VI品牌全稱與簡稱品牌標志品牌色形象圖片形象圖片是構(gòu)成海底撈品牌的關(guān)鍵元素。圖片風(fēng)格直接影響海底撈公司被感知的形象，并使海底撈有別于競爭對手。在登錄頁面、首頁頂部(banner)、導(dǎo)航入口、關(guān)于頁面等，頁面的圖片對系統(tǒng)的認知、視覺識別性、品牌形象至關(guān)重要。2022-4-27 華為機密，未經(jīng)許可不得集中 第17頁,共37頁華為公司B/S界面標準V3.0 文檔密級規(guī)章4.4.1：在選擇圖片時，請選擇那些包含海底撈品牌顏色的圖片。說明：顏色無需完全全都或格外突出，局部細節(jié)顏色的全都都有助于形成全都的感覺，從而強化海底撈的視覺風(fēng)格。規(guī)章4.4.2：中選擇有人物的圖片時，請確保圖片的信息清楚明確。必需反映海底撈品牌的核心價值和共性。規(guī)章4.4.3：中選擇借喻式的圖片時，請確保它們反映海底撈品牌的核心價值和共性。說明：借喻式的圖片以間接的方式傳達信息。這類圖片使海底撈品牌超越語言的局限，而更加富有深意。建議4.4.4：避開使用那些陳腐過時或平凡乏味的圖片、避開使用姿勢造作、內(nèi)容不適合海底撈品牌的圖片。說明：不恰當?shù)膱D片會減弱海底撈品牌的視覺表現(xiàn)力，并破壞視覺傳播的統(tǒng)一。品牌字體根本元素Table規(guī)章5.1.1：除以下狀況外，制止使用表格作為布局元素。說明：因表格的構(gòu)造化特性使得呈現(xiàn)力量不夠錄活，W3C標準對表格的定位是為了顯示查詢結(jié)果數(shù)據(jù)，而非布局。2022-4-27 華為機密，未經(jīng)許可不得集中 第18頁,共37頁華為公司B/S界面標準V3.0 文檔密級圖11規(guī)章5.1.2：表格中列的豎線有無對文本的影響，見以下圖。跳動，不便利定位。圖122022-4-27 華為機密，未經(jīng)許可不得集中 第19頁,共37頁華為公司B/S界面標準V3.0 文檔密級圖13建議5.1.3：單元格內(nèi)文本不允許貼邊；單元格內(nèi)的多行文本垂直上對齊；水平方向一般承受左對齊，但數(shù)值型文本可承受右對齊以便利比較大小。說明：文本貼邊會使得局部字符識別困難〔如：“1”和“l(fā)”〕。圖14建議5.1.4：表格的操作工具區(qū)位置應(yīng)置與其頂部，以保證操作入口可見性；頁碼及翻頁信息置于表格底部。圖152022-4-27 華為機密，未經(jīng)許可不得集中 第20頁,共37頁華為公司B/S界面標準V3.0 文檔密級建議5.1.5：假設(shè)表格支持過濾查詢功能，使用模糊匹配的方式，便利用戶定位記錄。規(guī)章5.1.6：對表格數(shù)據(jù)的批量處理，假設(shè)通過復(fù)選按鈕進展，則只能對當前頁面的數(shù)義。圖16list建議5.2.1：適用于榜單類小列表或排名的界面設(shè)計。說明：列表表達的是數(shù)據(jù)輕量，格式簡潔，有肯定排序，且基于語義。2022-4-27 華為機密，未經(jīng)許可不得集中 第21頁,共37頁華為公司B/S界面標準V3.0 文檔密級圖17列表例如Tab規(guī)章5.3.1Tip圖18Tab內(nèi)容布局例如2022-4-27 華為機密，未經(jīng)許可不得集中 第22頁,共37頁華為公司B/S界面標準V3.0 文檔密級圖19Tab窗口布局例如規(guī)章5.3.2：切換Tab頁后再返回原Tab頁面，不會引起該Tab頁的全部刷〔如：展現(xiàn)查詢結(jié)果的頁面，或表單填寫頁面就不行刷，以免喪失數(shù)據(jù)〕。建議5.3.3：Tab頁假設(shè)可以關(guān)閉，且有右鍵菜單，則菜單中至少包括“關(guān)閉”、“關(guān)閉其他頁”及“關(guān)閉全部”三項。建議5.3.4：Tab頁簽翻開過多時，消滅擴展菜單按鈕。點擊該按鈕，可顯示被隱蔽局部的Tab頁簽構(gòu)成的菜單。Tree規(guī)章5.4.1：假設(shè)樹節(jié)點數(shù)量較大，必需承受分層加載技術(shù)，保證用戶閱讀效率。說明：節(jié)點量較大時，假設(shè)承受一次性加載節(jié)點，會使得用戶較長時間處理等待狀態(tài)，用戶感知很差。2022-4-27 華為機密，未經(jīng)許可不得集中 第23頁,共37頁華為公司B/S界面標準V3.0 文檔密級圖20Tree例如規(guī)章5.4.2：對于帶有復(fù)選框的樹，能夠表達出三種狀態(tài)：全選中、局部選中、未選中。規(guī)章5.4.3：對樹增節(jié)點操作后，增的節(jié)點需要馬上顯示在樹上，即樹馬上開放并定位到增的節(jié)點。建議4.3.4：樹節(jié)點上的圖標尺寸建議值為16px*16px戶識別理解。Tip規(guī)章5.5.1：提示Tip的寬度可以自適應(yīng)其文本內(nèi)容，并保證其在掃瞄器可視區(qū)域內(nèi)正常顯示。說明：關(guān)鍵字、術(shù)語、未顯示全的段落文本，應(yīng)配備對應(yīng)的提示Tip，以幫助用戶了解具體信息。2022-4-27 華為機密，未經(jīng)許可不得集中 第24頁,共37頁華為公司B/S界面標準V3.0 文檔密級圖21Tip例如Form規(guī)章5.6.：文本輸入的提示標簽〔域標簽〕，文本標簽不能貼邊。戶快速定位到每一行。文本標簽不貼邊以保證全部字符能夠被用戶正常識別。圖22表單單列布局例如2022-4-27 華為機密，未經(jīng)許可不得集中 第25頁,共37頁華為公司B/S界面標準V3.0 文檔密級圖23規(guī)章5.6.2：表單的第一個輸入項〔如：文本輸入框〕為默認輸入焦點。見上圖。說明：當同一頁面中有多個表單時，則第一個表單的第一個輸入項為默認輸入焦點。規(guī)章5.6.3：表單中，必填項必需以符號“*”來明確標識出，該符號位置放置在輸入框的前方。字符顏色為#990000。說明：必填項的標識，須滿足全球化的雙向顯示要求。圖24規(guī)章5.6.4Enter詢”按鈕全都。詢效率。建議5.6.〔radi〔checkbo相關(guān)聯(lián)，即：點擊其文本標簽與點擊控件有一樣的效果〔均可選中或取消選中〕。Fitts定律，會使得鼠標定位時間較長，通過將標簽關(guān)聯(lián)的方式，可將其感應(yīng)區(qū)變大，提升用戶操作效率。2022-4-27 華為機密，未經(jīng)許可不得集中 第26頁,共37頁華為公司B/S界面標準V3.0 文檔密級圖25表單radio或checkbox的文本標簽例如規(guī)章5.6.6：多行文本輸入框、多行下拉列表應(yīng)與其標簽域垂直上對齊。圖26表單標簽域與輸入框垂直上對齊例如窗口Window規(guī)章5.7.1：用于展現(xiàn)少量的輸入操作。式使用可視區(qū)相對較小，呈現(xiàn)信息有限，簡潔消滅滾動條，不利用用戶操作或閱讀。2022-4-27 華為機密，未經(jīng)許可不得集中 第27頁,共37頁華為公司B/S界面標準V3.0 文檔密級圖27窗口Window例如建議5.7.2：窗口寬度可以自適應(yīng)內(nèi)容，避開消滅不必要的滾動條，影響閱讀。Message規(guī)章5.8.1：少量信息的反響。當展現(xiàn)給用戶消息〔Message〕時，高亮顯示該消息，并為用戶設(shè)置默認的操作焦點。說明：消息Message可分為確認〔confirm〕、提示〔prompt〕。確認是為了讓用戶再戶的操作效率，同時保證消息框的操作不僅可以由鼠標完成，也同樣可以由鍵盤來完成。圖28Message例如2022-4-27 華為機密，未經(jīng)許可不得集中 第28頁,共37頁華為公司B/S界面標準V3.0 文檔密級規(guī)章5.8.2：消息窗口內(nèi)的按鈕水平居中顯示。Format規(guī)章5.9.1：版式的設(shè)計應(yīng)滿足自適應(yīng)布局要求。圖29圖30Portal版式例如2022-4-27 華為機密，未經(jīng)許可不得集中 第29頁,共37頁華為公司B/S界面標準V3.0 文檔密級面包屑crumbs規(guī)章5.10.1：每個層次之間以“>”分隔，并可以通過點擊，隨時返回至上一級。圖31crumbs例如規(guī)章5.10.2：面包屑上的超鏈接，至少能表達出鼠標移上和正常兩種狀態(tài)。icon規(guī)章5.11.1：對于格外用的菜單、按鈕、圖例等，不使用圖標表達其含義。系統(tǒng)反響、任務(wù)執(zhí)行的推斷。建議5.11.2：盡量少使用圖標。法律方面會存在爭議。同時，也給全球化布局帶來些許的工作量。processbar規(guī)章5.12.1：對于執(zhí)行時間超過3秒的任務(wù)或操作，當前界面必需給出提示；例如承受將鼠標圖標顯示為忙、顯示進度條的方式進展提示。說明：1、任務(wù)執(zhí)行時間是指用戶通過鼠標或鍵盤發(fā)出命令到界面完全顯示操作結(jié)果的時間。2、對于圖形用戶界面中，對于類似人機接口〔如MML/CLI接口〕的任務(wù)交互，此處不進展約束。規(guī)章5.12.2：對于執(zhí)行時間超過10秒的任務(wù)或操作，必需承受進度條方式進展提示。2022-4-27 華為機密，未經(jīng)許可不得集中 第30頁,共37頁華為公司B/S界面標準V3.0 文檔密級建議5.12.3系統(tǒng)框架承受B/S架構(gòu)的產(chǎn)品或系統(tǒng)的界面一般來說主要由以下幾種典型界面：登錄界面、加載界面、主界面；同時在系統(tǒng)運行過程中，Help界面、About界面、錯誤處理界面是主界面的必要局部。同時系統(tǒng)對多語言切換和換膚功能的支持也是目前web產(chǎn)品的常用功能。登錄界面屬性規(guī)章6.1.1.1：登錄界面各區(qū)域布局由上至下依次為：識別區(qū)、輸入輸出區(qū)、消息區(qū)；各區(qū)域大小范圍定義參考主界面各區(qū)域大小范圍。識別區(qū)輸入輸出區(qū)識別區(qū)輸入輸出區(qū)消息區(qū)圖32登錄界面布局示意圖圖33登錄界面示意圖規(guī)章6.1.1.2：登錄界面中必需包括的界面元素有：海底撈品牌標識、系統(tǒng)名稱、版權(quán)2022-4-27 華為機密，未經(jīng)許可不得集中 第31頁,共37頁華為公司B/S界面標準V3.0 文檔密級聲明信息。規(guī)章6.1.1.3：除支持自動適配語言版本的系統(tǒng)外，支持多語言版本的系統(tǒng)的登錄界面必需供給語言選擇入口。主界面總體布局web產(chǎn)品由于功能、業(yè)務(wù)、實現(xiàn)方式上的千差萬別，打算了在界面布局和分區(qū)上必需靈活，以滿足產(chǎn)品不同的需求。裁減某些區(qū)域。規(guī)章6.2.1.1：主界面中必需包括識別區(qū)和消息區(qū)建議6.2.1.2：主界面制止屏蔽地址欄建議6.2.1.3：為保證界面整體布局全都，主界面承受左〔導(dǎo)航區(qū)〕右〔輸入輸出區(qū)〕、上〔識別區(qū)〕下〔消息區(qū)〕構(gòu)造。說明：參考以下圖：2022-4-27 華為機密，未經(jīng)許可不得集中 第32頁,共37頁華為公司B/S界面標準V3.0 文檔密級圖34主界面布局和大小示意圖1：識別區(qū)〔Identificationarea〕2：導(dǎo)航區(qū)〔Navigationarea〕3：輸入/輸出區(qū)〔Input/outputarea〕4：消息區(qū)〔Messagearea〕規(guī)章6.2.1.4：當主界面承受左〔導(dǎo)航區(qū)〕