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