web測試一兩事

前幾天我們上線的一個功能，抛磚引玉列兩個我印象深刻的點，也歡迎大家指正。

這個功能是使用者在背景維護員工資訊，生成名片，有預覽和儲存名片的功能。預覽是前台做的效果，儲存是背景合成生成的圖檔。這個過程中要保證前台和背景合成的效果一樣的。

1.一開始在外接顯示器測試，預覽效果和背景合成已經限制好，每行顯示的字數，字型等。效果都大體一緻。但是後來在電腦上，不同螢幕的尺寸、分辨率等設定，預覽的效果就參差不齊。這個是因為，前台字型已經選用最小了，但是設計圖要求正反兩面的預覽要橫着擺一排，并不讓出現滾動條。是以，整體名片的大小就比較小，但是在小屏上，即便是最小字型也做不到和背景合成的效果一樣，限制好的字數會在小屏預覽的時候超出預設的位置。

後來我們也請教了前台資深同僚，發現沒有很好的辦法。最後也發現了其實設計本身是不符合網頁設計的，比如随便浏覽一些網頁，其實兩側都是有留白的。本身設計是不合理的。這個我覺得對于我的意義就是，從需求、設計圖階段就應該分析它的可行性、合理性，隻是這次如果沒有一些專業的知識容易忽視。我想起來，小程式最開始的時候，大家對小程式都不熟悉，我當時的團隊要做一個小程式，開發經理建議我去微信公衆平台去了解下微信給的開發規範和接口。比如底欄建議不要超過4個還是5個tab之類的、界面的統一性、頁面的跳轉流程、微信開放了哪些接口等，好驗證看看需求、設計是否可行。說了這麼多，這一點想說的是，針對測試不同類型的産品，可能都有的不同的特性，這些特性背後又有一些規範或者公約，我們都可以了解下才好保證品質和使用者體驗等。

2.其中還有一個環節是上傳頭像，這個頭像會顯示在名片上。一開始頁面功能沒有完全開發好的時候，是先測試單個接口的，上傳圖檔的接口是沒有問題的，300DPI的圖檔上傳後還是300DPI。但是頁面功能開發完了以後，以為頭像清晰度應該是沒問題的。但是我們擔心合成的名片和實際外面設計的名片有差距，擔心可用性。我們就去外面找了個列印店列印了下，讓人家看看是否和一般的名片差距不大。格式都沒有太大問題，列印出來頭像是不夠清晰的，這才發現，其實前台上傳後，把圖檔壓縮了。背景開發的同學把這個問題給解決了。很慶幸這個大家擔心可用性，去驗證、發現問題解決問題的過程，也提醒我以後每個環節都不能放松，前台上傳後的圖檔，也得看下是否被壓縮等。