內容、圖片和按鈕測試包含的范疇在網頁產品中，用戶獲得數據的來源中很重要的兩個方面是文字內容（本文簡稱“內容”）和圖片。內容主要以文字為主體傳遞信息，而圖片則以圖表的形式以更加醒目的方式向用戶提供信息。兩部分內容相互補充，均不可或缺。按鈕則用于針對用戶的點擊執行相關的操作，從而實現與用戶的互動，在用戶體驗中具有非常重要的作用。本文中將列舉部分在網頁產品測試中應用廣泛的Checklist條目，這些條目均需要在開發和測試過程中加以注意。文中也將列舉測試過程中遇到的一些實例，供大家參考。內容測試Checklist表1.內容測試Checklist總結序號Checklist1.1檢查內容排列是否恰當1.2檢查標簽排列是否恰當1.3確保所有單詞大小寫使用正確1.4確保所有的錯誤消息中沒有拼寫錯誤1.5檢查產品頁面中是否存在冗余信息1.6確保不可編輯區域呈現為黑色文字、灰色背景、黑色標簽1.7確保產品在最大、最小和最優分辨率下都能正確顯示1.8確保內容表述清晰準確1.1檢查內容排列是否恰當為了給用戶提供良好的用戶體驗，同時為了符合業界普遍的UI設計標準，文本內容的排列要整齊、有序，易于閱讀。否則，排列凌亂的文本內容將給用戶留下不夠專業的印象。下面的例子展示了一類數量顯示欄沒有對齊導致的缺陷實例。圖1.數量顯示欄未對齊缺陷實例該實例中，圖表左側縱軸上的數量顯示存在未對齊的問題。從圖上可以看出，整數位1,000,000和2,000,000兩個數字顯示與其他數字的顯示不在同一條豎直線上，這是產品的顯示缺陷。1.2檢查標簽排列是否恰當跟上面1.1節中提到的內容排列類似，標簽的排列也需要做到恰當、整齊。規范整齊的排列，會使得標簽看上去更規整，用戶體驗也會更好。以下是兩個標簽排列出現問題的實例。圖2.豎直方向標簽排列錯位圖2的實例中，左側條目內容和右側的輸入框未能在豎直方向保持對齊，存在錯位。這是產品的一個缺陷，該缺陷只有當將網頁瀏覽器的尺寸縮小時才會出現，而在最大化時不能重現。圖3.水平方向標簽排列錯位如圖3所示的實例中，紅框中所示的兩個組件標簽，一個為選擇列表，一個為進度條，兩者雖然隸屬于不同的選項，之間并無直接關系。但兩者之間的空間位置位于相同的水平位置，只有當兩者在水平方向上對齊時，才能符合友好設計規范，用戶看上去才能更舒服。1.3確保所有單詞大小寫使用正確按照業界通用的WebUI設計標準，對單詞的大小寫有明確的規范。最基本的，需要保證所有相似表述在產品中保持一致性。在測試過程中，測試產品中我們遇到了以下窗口組件描述：“Variable-lengthSegmentsplits”，該描述中，從一致性的角度來說，明顯最后一個單詞“splits”應采用首字母大寫，應為“Variable-lengthSegmentSplits”。1.4確保所有的錯誤消息中沒有拼寫錯誤產品提供的錯誤消息對于用戶體驗具有非常重要的作用，因為錯誤消息不僅提示了當前的錯誤，更重要的是同時向用戶提供相對應的解決方案，告訴用戶如何應對。因此錯誤消息的清晰準確表達，對于提升用戶體驗來說至關重要。圖4.錯誤消息中的不一致信息實例圖4所示的實例中，呈現的是一個用戶名登陸頁面出錯的提示信息。總結消息為“InvaliduserIDorpassword.”，當點擊該總結消息時錯誤消息會展開，呈現出詳細的解釋消息“Error:Theusernameorpasswordyouenteredisincorrect.MoreDetails”。總結消息和詳細解釋消息應保持一致性，而這里兩者對于用戶名的表達存在不一致。總結消息中使用的是“userID”，而在詳細解釋中，使用的單詞是“username”，這里需要保持同一個對象的描述一致，這里是產品的缺陷。1.5檢查產品頁面中是否存在冗余信息網頁產品需要為用戶提供充足的信息，但也要盡量杜絕冗余的功能和信息，因為冗余無用的內容對用戶是一種干擾。圖5.冗余的導航聚焦點上圖5中，當按TAB鍵在頁面上移動光標時，光標會經過圖中藍色圓圈所標記的位置，該位置的光標停留沒有為用戶提供任何有用的功能和信息，屬于冗余的功能，為產品的缺陷，應該移除該光標聚焦位置。1.6確保不可編輯區域呈現為黑色文字、灰色背景、黑色標簽對于不可編輯的區域，應該用明顯的顯示特征告知用戶，該區域不可編輯。通常不可編輯區域呈現為黑色的前景文字顯示、灰色的背景以及黑色的標簽。這樣每當用戶看到此類區域時，就知道該區域不可編輯，也就不會試圖去對其進行編輯和更改。1.7確保產品在最大、最小和最優分辨率下都能正確顯示由于用戶使用產品的環境和平臺具有多樣性，為了為所有分辨率下的用戶提供盡量一致的服務，產品需要在最大、最小和最優分辨率下都能正確顯示。圖6.低分辨率情形下出現的顯示錯誤實例圖6所示的錯誤，出現在分辨率1024*768情形下，這是產品支持的最小分辨率，如圖所示，該分辨率下，產品上方標簽欄的顯示存在重疊的問題，部分內容因遮擋無法正常顯示，這是產品的缺陷。1.8確保內容表述清晰準確網頁產品中呈現的信息是直接面向用戶，為用戶提供有價值信息服務的。所以，需要保證產品中呈現的信息準確清晰，不能有模棱兩可甚至錯誤的信息。圖7.不準確內容顯示實例以上實例中，網頁的窗口組件中給出的消息提到在該時間段內沒有發現相關感知信息，但具體時間段是指多長時間，模棱兩可不清楚。實際情況是，這里默認的時間段是指過去的90天內，這樣，產品在消息中應該明確的告知用戶，過去90天內沒有相關感知信息，做到清楚明白。圖片測試Checklist表2.圖片測試Checklist總結序號Checklist2.1確保所有的圖表排列整齊2.2確保產品中無失效圖片2.3檢查所使用圖片的尺寸2.4檢查所有的標題區域及其尺寸2.5盡量少在圖表中使用文本2.6確保所有圖表與其描述和標題相符2.1確保所有的圖表排列整齊跟前面提到的文本內容和標簽排列一樣，當一個頁面上存在多個圖表同時顯示時，從美觀和易用的角度來講，需要保證所有的圖標能整齊排列。通常情況下，排列的錯位會給用戶帶來不好的體驗，甚至嚴重時可能導致用戶無法準確找到自己需要的信息。2.2確保產品中無失效圖片圖片是產品向用戶提供信息的重要途徑，作為產品的開發人員，需要保證產品中設計的所有圖片均是有效的，當圖片失效時，需及時作出恰當處理。可以想象，當用戶期待得到相關圖片時，看到的確是一個紅色的叉子、一個失效的圖片，用戶的體驗肯定不會是滿意的。因此，在開發和測試過程中，我們需要盡力杜絕無效圖片的存在，同時也要考慮到，后期在圖片使用過程中可能會失效，我們對此也需要提供有效的處理方式。2.3檢查所使用圖片的尺寸在網頁產品中，圖片的來源可能是由產品生成的，也有可能是由用戶上傳的。不管圖片的來源是哪里，產品需要對圖片的尺寸進行檢查和限制。圖片的顯示受到幾個方面的限制：尺寸過小的圖片對用戶來說不易讀而且信息量很少尺寸過大的圖片，可能因上傳速度和使用者下載速度的限制而導致性能下降用戶上傳的圖片是否有效以及圖片的格式是否支持，都需要進行檢查從以上分析可以看出，產品對圖片的尺寸的檢查對于產品的性能和用戶體驗是很重要的。開發和測試人員應該確保產品能正確處理各種情況，包括合法尺寸圖片的上傳和顯示以及非法內容上傳時的處理。2.4檢查所有的標題區域及其尺寸標題區域通常處于產品中最醒目的位置，應該盡量減少問題的出現。因為一旦出現問題，將非常容易被用戶所注意，對用戶的體驗具有很強的影響。圖8.標題區域文字尺寸顯示問題在如圖8所示的實例中，Configuration和Support是標題區域中并列顯示的兩個功能標簽。當用戶點擊Configuration后，其文本顯示會縮小，與旁邊的Support標簽出現較大差異，此為產品的缺陷。2.5盡量少在圖表中使用文本圖表對信息的傳遞主要通過圖的形式直接傳遞，而文本內容的過多加入可能會影響用戶對原圖表內容的獲取效率。當然，必要的文字說明和描述在有些應用環境中也是不可或缺的。2.6確保所有圖表與其描述和標題相符圖表相比文本能傳遞出更加豐富的信息，通常能以更快的速度被用戶所接受。但是，同時需要注意，要保證圖表傳遞的內容跟它的描述和標題一致，不然不但不會給用戶傳遞清晰的信息，反而會給用戶帶來困擾。按鈕測試Checklist表3.按鈕測試Checklist總結序號Checklist3.1確保所有最大化、最小化和復原按鈕工作正常3.2確保下拉列表框底部無空行3.3觸發所有的滾動條并確保所有內容可見3.4確保所有按鈕的命名合理并與其操作一致3.5確保光標在且僅在激活的按鈕上方顯示為手形3.1確保所有最大化、最小化和復原按鈕工作正常最大化、最小化和復原按鈕幾乎是所有頁面的必備按鈕，屬于用戶使用最廣泛的按鈕。因此，確保此類按鈕工作正常是對網頁產品的最最基本要求。3.2確保下拉列表框底部無空行下拉列表框是網頁設計中的一個重要組件，用于給用戶提供一個可以選擇的列表。為了確保列表中每行都是一個有效的選項，尤其要注意底部有沒有空行。3.3觸發所有的滾動條并確保所有內容可見滾動條在網頁產品中非常重要，可以保證當需要顯示的內容超出瀏覽器顯示區域時用戶依然可以瀏覽全部內容。測試過程中，測試人員需要盡力觸發出所有的滾動條，并確保其工作正常。通常，觸發滾動條的方式有很多，比如調整網頁瀏覽器的尺寸，生成較多的內容等。圖9.滾動條不工作實例上圖所示的例子中，顯示內容的高度超出了網頁瀏覽器的上下顯示區域，但右側并沒有出現滾動條，從而導致用戶無法查看和操作未顯示部分的內容和功能，這是產品的缺陷。3.4確保所有按鈕的命名合理并與其操作一致按鈕的命名應清晰明了，并且與其對應的功能保持一致性。這樣用戶一看到按鈕的名字，就已對功能一目了然。圖10.按鈕命名不合理實例上圖中，確定按鈕的名字顯示的是“ok”，盡管沒有語法錯誤，但是通常按鈕英文名字中，首字母應大寫。這是一個很小的問題，但太多類似的小問題，也會讓用戶對產品質量的認同度大大降低。在測試過程中，我們遇到過較多類似的小問題。比如，我們遇到過網頁登出按鈕名字為“Logout”，這也是一樣的問題，應為“LogOut”。不要小看這些小問題，試想從用戶角度來看，連此類小的問題都沒有修正的產品，產品的質量真能靠得住嗎？3.5確保光標在且僅在激活的按鈕上方顯示為手形為了給用戶提供給有效的提醒，當光標位置移動到已激活的按鈕上方時，需呈現為手形標志，用以提醒用戶該按鈕對應的操作現在可以執行。而當光標的位置