工業(yè)互聯(lián)網(wǎng)界面用戶體驗(yàn) 第1部分：設(shè)計(jì)指南

4工業(yè)互聯(lián)網(wǎng)界面用戶體驗(yàn)第1部分：設(shè)計(jì)指南本標(biāo)準(zhǔn)給出了工業(yè)互聯(lián)網(wǎng)用戶界面設(shè)計(jì)的要求與建議，適用于工業(yè)互聯(lián)網(wǎng)用戶界面的設(shè)計(jì)與評價(jià)。本標(biāo)準(zhǔn)中適用于PC端工業(yè)互聯(lián)網(wǎng)用戶界面的設(shè)計(jì)和評價(jià)。2規(guī)范性引用文件下列文件對于本文件的應(yīng)用是必不可少的。凡是注日期的引用文件，僅注日期的版本適用于本文件。凡是不注日期的引用文件，其最新版本（包括所有的修改單）適用于本文件。GB/T18978.12-2009使用視覺顯示終端(VDTs)辦公的人類工效學(xué)要求信息呈現(xiàn)GB/T18978.143-2018人-系統(tǒng)交互工效學(xué)第143部分:表單GB/T18978.151-2014人-系統(tǒng)交互工效學(xué)第151部分:互聯(lián)網(wǎng)用戶界面指南ISO9241-8:1997使用視覺顯示終端(VDTs)辦公的的人類工效學(xué)要求第8部分:顯示顏色的要求ISO9241-14:1997使用視覺顯示終端(VDTs)辦公的的人類工效學(xué)要求第14部分:菜單對話ISO9241-171:2008人-系統(tǒng)交互工效學(xué)第171部分：軟件可達(dá)性ISO/IEC11581-3:2000信息技術(shù).用戶系統(tǒng)接口和符號.圖標(biāo)符號和功能.第3部分:指針圖標(biāo)3術(shù)語和定義以及下列術(shù)語和定義適用于本文件。3.1工業(yè)互聯(lián)網(wǎng)IndustrialInternet工業(yè)系統(tǒng)與高級計(jì)算、分析、傳感技術(shù)及互聯(lián)網(wǎng)的高度融合。通過工業(yè)互聯(lián)網(wǎng)平臺把設(shè)備、生產(chǎn)線、工廠、供應(yīng)商、產(chǎn)品和客戶緊密地連接融合起來。3.2窗口Window屏幕上獨(dú)立的可控區(qū)域，用來顯示界面元素或與用戶進(jìn)行對話。4設(shè)計(jì)原則4.1生理兼容性宜將工業(yè)互聯(lián)網(wǎng)界面與人的視覺、聽覺、觸覺、認(rèn)知等特性的匹配性納入考慮。4.2完備性工業(yè)互聯(lián)網(wǎng)界面宜提供足夠完備的內(nèi)容，以支持工業(yè)互聯(lián)網(wǎng)的典型信息需求。4.3一致性5同類工業(yè)互聯(lián)網(wǎng)網(wǎng)站或同一網(wǎng)站上具有相同或類似功能的頁面，其信息顯示（包括字體、顏色、圖標(biāo)/符號、標(biāo)簽、光標(biāo)、指針、多媒體等元素）、頁面布局、信息交互方式、用戶支持等信息宜保持一致。4.4容錯(cuò)性工業(yè)互聯(lián)網(wǎng)界面應(yīng)能預(yù)見用戶合理的誤用行為，并作出相應(yīng)的防錯(cuò)設(shè)計(jì)，應(yīng)避免誘發(fā)無意識的操作行動(dòng)。當(dāng)錯(cuò)誤發(fā)生時(shí)，應(yīng)允許用戶針對功能進(jìn)行簡單修復(fù)、撤銷或暫停。4.5魯棒性工業(yè)互聯(lián)網(wǎng)界面宜具有魯棒性，使得界面內(nèi)容可在未來可期的技術(shù)下使用。4.6可用性和可達(dá)性工業(yè)互聯(lián)網(wǎng)界面所采用的個(gè)性化和（或）適應(yīng)性設(shè)計(jì)宜對用戶顯而易見。軟件可達(dá)性應(yīng)遵循ISO9241-171中的指南。網(wǎng)絡(luò)內(nèi)容的可達(dá)性應(yīng)遵循網(wǎng)絡(luò)內(nèi)容可達(dá)性指南1.0（WCAG1.0最新版本網(wǎng)絡(luò)內(nèi)容可達(dá)性指南2.0（WACG2.0）出版后以2.0版本為準(zhǔn)。5界面元素設(shè)計(jì)5.1文字和符號5.1.1文字界面上呈現(xiàn)的字體設(shè)計(jì)方案應(yīng)保持一致。界面上呈現(xiàn)的字體、文字字重、字體大小宜適宜，方便用戶查看瀏覽相關(guān)信息。示例：采用各平臺或系統(tǒng)中的默認(rèn)中文字體庫，確文字與背景宜具有較好的顏色對比，以確保良好的可讀性。如果用字體或字體大小來增強(qiáng)選項(xiàng)組或標(biāo)題的視覺區(qū)分度，宜根據(jù)具體情境確定字體和字體大小組合的數(shù)量。界面文本宜具有適宜的行間。5.1.2符號/圖標(biāo)符號和圖標(biāo)的風(fēng)格、大小、形狀、顏色等視覺呈現(xiàn)宜具有一致性。示例2：某個(gè)界面上的圖標(biāo)尺寸固定有三種，圓角大小、描邊寬度宜采用符合用戶認(rèn)知習(xí)慣的符號和圖標(biāo)，使其有較好的可理解性。代表選項(xiàng)的圖標(biāo)應(yīng)在視覺上宜能互相區(qū)分，且用戶應(yīng)能容易地識別它們的意義。5.2顏色5.2.1概述不宜將顏色作為傳遞信息的唯一方式，顏色宜與其他編碼技術(shù)組合使用。注：一些用戶對特定的顏色或顏色組合會(huì)存在知覺困難（例如，色盲）。因此，顏色6應(yīng)遵循用戶所熟知的顏色代碼規(guī)則，即顏色設(shè)計(jì)與任務(wù)和文化的慣例相符。如果用顏色來增強(qiáng)選項(xiàng)組的視覺區(qū)分度，則一組內(nèi)容選項(xiàng)的顏色編碼規(guī)則應(yīng)相同。5.2.2顏色數(shù)量除黑和白之外，界面上的顏色數(shù)量不宜超過6種（見ISO9241-8:1997第6條）。5.2.3前景色/背景色界面上前景色和背景色宜具有顯著的對比，方便用戶進(jìn)行相關(guān)信息的識別和快速瀏覽。如果在中性的背景上（如白色、黑色或灰色等）使用前景色，應(yīng)使用遠(yuǎn)離1976CIEUCS色度表的顏色），參見ISO9241-8:1997第3.1部分。背景色應(yīng)避免使用高飽和度的顏色（包括亮白色）作為背景。5.3標(biāo)簽5.3.1概述宜為每個(gè)圖標(biāo)設(shè)計(jì)標(biāo)簽進(jìn)行標(biāo)記，除非屏幕元素本身的意義非常明顯。標(biāo)簽的使用應(yīng)保持一致，不同平臺和系統(tǒng)（例如，移動(dòng)設(shè)備、個(gè)人計(jì)算機(jī)、掌上電腦等）中對同類標(biāo)簽的命名宜一致。5.3.2標(biāo)簽名稱標(biāo)簽應(yīng)能解釋其指定信息項(xiàng)目的用途和內(nèi)容。標(biāo)簽宜在語法結(jié)構(gòu)上一致。5.3.3標(biāo)簽位置標(biāo)簽宜統(tǒng)一靠近所指示的信息項(xiàng)目。標(biāo)簽和字段的格式（如字體、大小和字形）和對齊方式（左對齊或右對齊）宜保持一致。示例：在應(yīng)用程序中，所有字段的標(biāo)簽統(tǒng)一放5.3.4標(biāo)簽和相關(guān)信息的區(qū)分標(biāo)簽宜和其指示的對象（輸入字段。項(xiàng)目、圖標(biāo)和圖表）具有明顯區(qū)分。示例：在應(yīng)用程序中，標(biāo)簽和及其所關(guān)聯(lián)的信5.4按鈕5.4.1概述宜根據(jù)使用目的選擇適宜的按鈕類型。下列情況宜使用按鈕：——預(yù)期結(jié)果是做出選擇或設(shè)置某種狀態(tài)；——預(yù)期結(jié)果是執(zhí)行某個(gè)操作；——需要快速訪問時(shí)；——需要持續(xù)的高度可識別性。5.4.2切換按鈕下列情況宜使用切換按鈕：——預(yù)期結(jié)果是設(shè)置某種狀態(tài)；——選項(xiàng)設(shè)置是雙態(tài)的且可被有意義地描述；——用戶需要快速查到選項(xiàng)的當(dāng)前狀態(tài)；7——用戶需理解某個(gè)選項(xiàng)在被選擇或未被選擇時(shí)的含義；——用戶可能需要頻繁地改變設(shè)置。5.4.2單選按鈕下列情況宜使用單選按鈕：——預(yù)期結(jié)果是做出選擇或設(shè)置某種狀態(tài)；——有兩個(gè)或多個(gè)互斥選項(xiàng)；——顯示空間足夠容納所有按鈕和標(biāo)簽；——選項(xiàng)數(shù)量不多（例如，5個(gè)或更少）；——用戶需要快速看到當(dāng)前被選擇的選項(xiàng)；——用戶需要同時(shí)看到所有可能的選項(xiàng)；——用戶可能需要頻繁改變設(shè)置。5.4.2步進(jìn)按鈕下列情況宜使用步進(jìn)按鈕：——選項(xiàng)互斥；——空間有限；——條目之間的先后順序明顯；——用戶做出選擇前不需要預(yù)覽所有選項(xiàng)；——相對當(dāng)前值而言，用戶希望快速做出微小改變；——用戶可能想在序列內(nèi)的任意方向上移動(dòng)。5.5表格5.5.1概述表格適用于將信息組織成在視覺上能夠進(jìn)行區(qū)分的子集。5.5.2保持行和列的標(biāo)題如果一個(gè)使用了行和列標(biāo)題的表格超過了現(xiàn)有的顯示區(qū)域，行和列標(biāo)題宜始終可見。5.5.3便于視覺掃描宜使內(nèi)容便于視覺掃描。也可用其他技術(shù)（如顏色和線條）來輔助瀏覽或指示表格區(qū)域。5.5.4欄間距表格中應(yīng)有明顯的欄間距，不同欄之間應(yīng)以適當(dāng)?shù)姆绞郊右苑指?。表格中的字段宜遵循對齊規(guī)律，例如文本左對齊，數(shù)字右對齊等。5.6窗口5.6.1主/次窗口主/次窗口的關(guān)系宜始終明顯可見。5.6.2窗口控制元素窗口的各種控制元素（如關(guān)閉窗口和調(diào)整窗口大?。?yīng)易于分辨，且總是位于每個(gè)窗口的相同位置。5.6.3窗口格式宜根據(jù)使用情況選擇窗口格式。宜允許用戶選擇他們偏好的窗口格式并將其設(shè)為默認(rèn)格式。5.6.4窗口外觀同一應(yīng)用程序中，在適用于當(dāng)前任務(wù)時(shí)，所有相同類型的窗口應(yīng)具有一致的外觀。5.6.5窗口標(biāo)識宜為每個(gè)窗口提供唯一的標(biāo)識（如窗口名稱、文件名或應(yīng)用程序名）。85.7光標(biāo)和指針5.7.1外觀用于不同功能的光標(biāo)和指針（如用于輸入文本的與直接操作的）應(yīng)明顯區(qū)分。指針的外觀、格式和形狀參見ISO/IEC11581-3。5.7.2位置——光標(biāo)和指針宜采用醒目的視覺效果（如形狀、閃爍、顏色和亮度）標(biāo)明其位置?！鈽?biāo)和指針的應(yīng)保持靜止不變直到用戶改變其位置。注：在沒有其他更適合的輸入字段時(shí)，光標(biāo)的一般默認(rèn)位置是——光標(biāo)不宜遮擋該位置顯示的字符。——光標(biāo)和指針宜保持靜止不變，直到用戶改變其位置?！谳斎胱侄蔚谝淮物@示時(shí)，光標(biāo)應(yīng)自動(dòng)定位在用戶當(dāng)前任務(wù)和期望最合適的輸入字段。5.8鏈接設(shè)計(jì)鏈接可通過文本或按鈕等多種方式顯示。采用適當(dāng)?shù)募夹g(shù)，則任意的多媒體對象（例如，動(dòng)畫或電影中的移動(dòng)對象）均可作為鏈接錨。鏈接的識別、區(qū)分等設(shè)計(jì)見GB/T18978.151-2014第9.4。5.9媒體網(wǎng)頁通常由文本、圖像、視頻或動(dòng)畫等多種媒體對象組成。宜基于擬呈現(xiàn)內(nèi)容的類型、用戶的任務(wù)和擬實(shí)現(xiàn)的通訊目標(biāo)來選擇媒體對象。注：選擇適當(dāng)?shù)拿襟w時(shí)，可能需要進(jìn)行必要的權(quán)衡，例如在媒體選擇與下載宜為圖形、圖像或視頻等所有非文本媒體對象提供等效的文本描述和（或）等效的基于文本的功能。當(dāng)網(wǎng)頁上提供時(shí)間依賴的媒體對象（例如，動(dòng)畫或移動(dòng)的文字）時(shí)，宜向用戶提供暫?；蛲Ｖ钩尸F(xiàn)媒體對象的功能。5.10文本可讀性網(wǎng)絡(luò)頁面上顯示的文本宜具有可讀性。6界面布局設(shè)計(jì)6.1概述頁面宜采用一致的布局方案，以支持用戶在不同頁面的相同位置找到相似的信息。如果所有網(wǎng)頁的結(jié)構(gòu)都相似，則宜將總體布局方案應(yīng)用于所有頁面。如果不同的頁面具有不同目的和內(nèi)容類型，宜將網(wǎng)頁分為不同的類別，每個(gè)類別宜采用一致的布局方案。6.2頁面信息位置信息的位置應(yīng)符合用戶的期望和任務(wù)的要求6.3頁面分隔與間距宜將信息按照某種形式進(jìn)行分組或分群，有助于用戶感知、理解和解釋信息。6.3.1群的區(qū)分宜用空格和位置等形式進(jìn)行群的區(qū)分。如果必要，可采用其他方法提高區(qū)分度（如在群的邊緣加框）。6.3.2功能性的信息分群如果任務(wù)不需要特定的順序，組成群的關(guān)于任務(wù)的信息宜在語義上相互關(guān)聯(lián)。6.3.3視覺上彼此區(qū)分的群如果需要快速瀏覽界面信息，則群的數(shù)量宜盡可能少。不宜為了往群內(nèi)增加信息而減小字符9大小，從而影響可讀性。6.4信息顯示密度顯示信息密度不應(yīng)使用戶有過于擁擠的感覺。注1：對于很多基于字符的界面，40實(shí)際字符數(shù)占總字符位的比例）是一個(gè)合理的注2：對于圖形用戶界面，其他的一些圖形元素（如線條、按鍵和圖標(biāo)6.5頁面長度頁面長度宜適宜，以支持頁面的主要目和使用。短頁面通常更適合于主頁、導(dǎo)航頁或需要快速閱讀的概述頁。如果用戶希望閱讀內(nèi)容時(shí)不被中斷，或頁面需要與某個(gè)紙版材料相匹配時(shí)，則采用長頁面更合適。如頁面長度超過3屏，應(yīng)提供快速回到第一屏的操作方式。6.6頁面滾動(dòng)方式宜使頁面垂直滾動(dòng)最小化。可通過將重要的信息放在頁面頂部，并為頁面下方的信息提供鏈接的方式來實(shí)現(xiàn)。宜盡量避免頁面水平滾動(dòng)。7界面交互設(shè)計(jì)7.1導(dǎo)航7.1.1導(dǎo)航組件導(dǎo)航組件是導(dǎo)航元素（例如，鏈接組或標(biāo)簽組）的集合，它允許用戶在導(dǎo)航結(jié)構(gòu)中移動(dòng)。導(dǎo)航組件宜始終放在各個(gè)頁面或網(wǎng)站框架頁的同一位置。導(dǎo)航組件在整個(gè)網(wǎng)站上的位置宜保持一致，以便用戶理解各個(gè)不同部分之間的關(guān)系。7.1.2導(dǎo)航設(shè)計(jì)指南應(yīng)明確給出用戶當(dāng)前在任務(wù)中所處的位置以及給出適當(dāng)?shù)臄?shù)據(jù)處理反饋。導(dǎo)航的一般性指南見GB/T18978.151中的第8.2導(dǎo)航的一般性指南。7.2搜索7.2.1搜索功能的適宜性搜索功能宜適合用戶的目標(biāo)和經(jīng)驗(yàn)。如果能預(yù)期用戶的不同經(jīng)驗(yàn)水平和不同目標(biāo)，則宜提供具有不同特性和不同復(fù)雜度的多個(gè)搜索功能。宜在網(wǎng)站所有的頁面上均設(shè)置搜索功能，除非當(dāng)前內(nèi)容或任務(wù)不允許或不需要搜索。用于輸入查詢字段的區(qū)域宜足夠大，以便完整地顯示典型的查詢字段。7.2.2搜索功能的容錯(cuò)性即使輸入了不精確或不正確的查詢條件，搜索功能也宜返回有用的結(jié)果。7.2.3搜索范圍如果在不同的范圍內(nèi)進(jìn)行搜索，則宜明確所使用的搜索范圍。如果任務(wù)需要，宜提供搜索范圍的選擇功能。示例：在某個(gè)網(wǎng)站上，一般情況下搜索針對的是該網(wǎng)站所包含的全部信息。但在產(chǎn)品區(qū)域，搜索只限在產(chǎn)品中進(jìn)7.2.4搜索結(jié)果宜向用戶提供搜索結(jié)果數(shù)量的反饋信息。搜索結(jié)果宜按照對用戶有意義或與用戶信息需求相一致的方式排序。如果搜索結(jié)果按照預(yù)定義的內(nèi)部排序機(jī)制排序，則宜向用戶提供足夠的信息，使他們了解排序方式對其任務(wù)和信息需求的影響。宜對搜索結(jié)果進(jìn)行足夠詳細(xì)的描述，以便讓用戶理解它們的相關(guān)性。如果適合用戶任務(wù)，則宜為用戶提供根據(jù)不同標(biāo)準(zhǔn)對搜索結(jié)果進(jìn)行排序或篩選的選項(xiàng)。7.2.5重新搜索和精煉搜索如果基于所輸入的搜索條件沒有返回搜索結(jié)果，宜向用戶提供建立更有效的搜索條件的提示。宜在搜索結(jié)果頁面上提供改變查詢條件再次進(jìn)行搜索的選項(xiàng)。如果搜索結(jié)果數(shù)量龐大，宜向用戶提供對首次搜索得到的結(jié)果進(jìn)行精煉的機(jī)制。7.3菜單對話7.3.1概述宜根據(jù)用戶和組織的特點(diǎn)、任務(wù)特點(diǎn)、系統(tǒng)性能等，選擇適宜的菜單對話。7.3.2菜單結(jié)構(gòu)菜單結(jié)構(gòu)應(yīng)反應(yīng)用戶的期望，便于用戶選擇與任務(wù)相關(guān)的菜單選項(xiàng)，并支持用戶的工作流程。菜單內(nèi)的選項(xiàng)分組應(yīng)反映用戶的期望并簡化選項(xiàng)的搜索。菜單組內(nèi)選項(xiàng)應(yīng)進(jìn)行排序，以方便選項(xiàng)搜索。菜單結(jié)構(gòu)設(shè)計(jì)參照ISO9241-14:1997的第5章中的要求。7.3.3菜單導(dǎo)航應(yīng)提供導(dǎo)航提示以幫助用戶了解菜單的結(jié)構(gòu)及在菜單結(jié)構(gòu)中定位和移動(dòng)。注：提供導(dǎo)航提示的方法有：復(fù)合標(biāo)題、項(xiàng)目編號、圖形技術(shù)、即時(shí)顯示的菜單如果提供了需要快速訪問菜單結(jié)構(gòu)中子菜單的快速導(dǎo)航，導(dǎo)航方式應(yīng)對客戶群適用并與客戶的任務(wù)兼容。菜單導(dǎo)航設(shè)計(jì)可參照ISO9241-14:1997第6章的要求。7.3.4菜單選項(xiàng)的選擇和執(zhí)行選擇的方法和輸入設(shè)備應(yīng)為選項(xiàng)的選擇提供方便。一個(gè)選擇方法或輸入設(shè)備是否合適取決于當(dāng)前的任務(wù)、對話的要求、以及個(gè)人的偏好。如果用字母數(shù)字鍵盤來執(zhí)行菜單選項(xiàng)的選擇和執(zhí)行，使用的技術(shù)應(yīng)保持一致。如果菜單選項(xiàng)選擇使用功能鍵，其意義應(yīng)便于用戶理解并在整個(gè)應(yīng)用程序中保持一致。光標(biāo)鍵選擇應(yīng)使用戶能根據(jù)任務(wù)的要求高效、方便地選擇某個(gè)選項(xiàng)。如果指示用來選擇菜單選項(xiàng)，使用的技術(shù)應(yīng)對特定的用戶簡易直觀，且要適合即將進(jìn)行的任務(wù)。菜單選項(xiàng)的選擇和執(zhí)行參照ISO9241-14:1997中第7章的要求。7.3.5菜單顯示菜單選項(xiàng)應(yīng)當(dāng)根據(jù)當(dāng)前任務(wù)要求顯示。應(yīng)根據(jù)用戶期待的位置、菜單布局的直觀性、安排的一致性和區(qū)分度布局菜單。宜采用明確、熟悉、簡潔的名稱和一致的選項(xiàng)結(jié)構(gòu)和語法對選項(xiàng)進(jìn)行識別和區(qū)分，以支持選項(xiàng)的快速識別。如果