雖說俺是個前端工程師,寫寫代碼生成網頁就行了,然而這幾年工作下來養成的嚴謹精神和對美學的追求,反而對用戶體驗的要求越來越高。很多人覺得用戶體驗是交互和設計負責的領域,前端只要負責生成代碼就行。其實作為一個有經驗的前端工程師,很有必要弄清楚自己在整個網站開發過程中的地位,以及明白在用戶體驗這塊所具有的影響力。
前端是UI部分最后的也是最全的質量控制員。因為頁面的靜態代碼包括動態交互都是由前端來實現的,這樣就會涉及到方方面面的細節。在重構的過程中,我常常以一個普通用戶角度去揣摩這樣的設計是否符合用戶的使用習慣。一般情況下發現一些細節上的不足我首先會去找設計,在設計認可的情況下去跟產品經理和交互設計師知會一下。PC端的設計跟移動端的設計有着很大的區別,比如“回到頂部”這個按鈕。移動端一般要設計成正方形,大小跟一個應用的icon尺寸類似。這樣既不過分遮蓋界面內容展示(一般來說“回到頂部”的按鈕是個隨着頁面滾動而滾動的按鈕即fixed按鈕,並且被設計成半透明),也不會造成用戶點擊失敗;而PC端可以是豎着的長方形可以是一個文字鏈接。在最近的一個移動項目中,設計師把“回到頂部”的功能按鈕做成了一個文字鏈接,跟產品經理提建議之后,對方認為客戶已經認可了這個設計方案,我們就不再做設計上的更改(外包公司的弊病,只要客戶沒意見,我們只要按時完成作業就行了)。。。
用戶體驗的另一大部分是產品的性能。作為一個前端,能在性能上做的事無非是減少或者延遲HTTP請求、減少代碼量和提高代碼效率。減少請求的方式也就是合並js、css代碼,圖片合成圖片精靈,有些小圖片可以用base64代替,或者直接用css3來實現;把一些不在頁面渲染時候需要的js代碼(如googleAnalytics.js)放在body的最下面,這樣不會影響頁面的加載,用戶不會因為js加載的未完成而影響閱讀。減少代碼量就是在壓縮代碼上下點功夫,有工具實現,很簡單。其實對於一個程序員來講,最能體現他能力的還是在編程技巧方面。至於怎樣提高編程技巧以提高代碼性能我這就不在多說,個人有個人的經驗。
總的來說,前端對於用戶體驗的知覺大部分是在UI上,一邊做一邊想,多思考,讓自己的產品越做越有成就感。