張鑫旭：前端工程師應該為使用者體驗負責

作者｜張鑫旭

編輯 ｜孫瑞瑞、鄧豔琴

使用者體驗将是未來企業的核心競争力，但在當下，很多新生代前端相對缺乏使用者體驗的意識，為什麼？怎麼解？GMTC 全球大前端技術大會邀請到知名 CSS 專家、閱文集團前端技術專家張鑫旭分享題為《使用者體驗的困境與破局》的主題演講，十幾年來，他一直工作在前端一線，對于使用者體驗有非常多的心得體會，本文為演講實錄。

大家好，非常榮幸可以給大家做一個關于使用者體驗的主題演講。本次演講不會介紹使用者體驗怎麼做，也不會介紹使用者體驗的意義和價值，而是作為一個前端從業者，談談前端技術人員在使用者體驗支援這塊的困境與破局。

在正式開始内容之前，先做個簡單的自我介紹。

我叫張鑫旭，就職于閱文集團體驗設計部，擔任前端技術專家，我從業十幾年，一直都在一線，并且從入行開始就一直專注于使用者體驗相關的領域，在 HTML、CSS、JavaScript、SVG 和 Canvas 這些與使用者體驗密切相關的領域有大量的學習心得和體會，有幸出版了 3 本暢銷書籍，《CSS 世界》、《CSS 選擇器世界》和《CSS 新世界》，被稱為 CSS 三部曲，這三本書還是很不錯的，《CSS 世界》是 2018 年人民郵電出版社技術類新書銷量第一，《CSS 新世界》上架 3 個多月已經 4 印了，讀完之後會覺得專業的就是不一樣。

好，下面開始正式開始我的分享。

先講下起因。

前段時間我在社交平台放了一道校招筆試題，一道用了很多很多年的筆試題，因為這道題的正确率極低，沒有了篩選的意義，是以放了出來，結果很意外，收到了不少冷嘲熱諷的評論，隻能靠蒙，沒有意義之類的。

在我入行那個年代，font 縮寫必須有字号是常識，大量的文章介紹，也是面試經常問的，現在很多人都不知道了，是以作為技術 tips 分享出來，結果很多人表示拒絕。

這讓我意識到：大人，時代變了。

另外一個原因就是對新晉一批 95 後前端從業者的觀察，就是我發現這批小朋友，他們主流架構、工具和庫使用非常熟練，但是使用者體驗這塊的意識相當匮乏。

先不說無障礙通路這種高階一點的使用者體驗支援，就連很多面向正常使用者的常識都不知道，或者說忽略。

例如，所有的可點選互動均要有按下的回報。大家如果仔細觀察手機作業系統，無論是 iOS 還是 Android，所有的清單，所有的按鈕點選的時候一定會有回報，無論是顔色變化，還是震動回報，按下的時候一定是有反應的，這是基本的互動常識，否則使用者很容易迷茫，點選了沒反應，不知道是不是沒有功能，還是裝置死掉了，反應慢。

我試用了很多 App，像是微信、QQ 這塊做得很好，然後也有一些國民級的 App 就在這塊沒注意，具體我就不點名了。

然後，這樣一件簡單且基礎的互動體驗常識，在新一代的前端中是被大量忽視的，或者說完全沒有意識，沒有這方面的概念。

又例如點選區域要大，這個在移動端非常重要，但是很多前端在實作的時候完全就是看心情，點選區域不規整，或者面積很小，隻顧及視覺上的還原效果，而忽略真實的點選回報區域。

比方說右側這個圖示按鈕，最終的點選區域高度隻有 18px，雖然功能 OK，測試同僚也測不出來，但是如果使用者在走路，或者手上拿了其他東西，往往就一次點不中，因為點選區域太小的。

忽視邊界異常處理，例如，低網速、無資料、腳本出錯、閃退就不考慮，隻關注理想狀态下實作，還自我感覺良好。是以，一旦網速慢了，就會有長時間的白屏，這個其實都是可以通過簡單的方式優化的。

忽視 HTML 語義和行為在使用者體驗這塊的意義，以至于什麼都是 Div + JS ，按鈕是 Div，連結跳轉也是 Div + JS，而不是元素 + href，這樣可以保證就算 JS 加載慢，JS 異常，産品功能也不會有問題。

當然，還有很多其他的，裝飾圖檔使用元素，hover 下拉清單沒有 click 事件兜底，導緻觸屏裝置下難以使用等問題。

以及最直覺的，就是使用者體驗方向的前端開發越來越難招。

是以我就開始思考，問什麼會這樣？這就引出了下一趴内容，困境分析。

我總結為下面 4 點原因。

先講第一個，前端發展。

現在的前端已經不是我入行那個時候的前端了，當年前端就那點東西的時候，使用者體驗占據很大一塊，自然關注多，學習多。

但是現在講大前端，前端的觸角不僅是 Web 開發，還包括小程式、快應用、還有原生端開發，桌面端開發等，這些項目開發上手，背後肯定要懂一些工程化的東西，需要懂 Node 相關知識等。

内容多，龐雜，需要學習的很多，就像這張前端知識圖譜所展示的，因為内容太多，我一分為二展示了，使用者體驗相關知識自然就慢慢邊緣化了。

架構與工程化給我們的開發帶來的便捷，開發人員無需關注過多的細節，就能實作合格的線上産品，但是這種開發體驗是犧牲部分使用者體驗換來的，比方說 CSS 自動補全所有私有字首，預設是連 IE 浏覽器一起的，對于移動端項目，這就是備援代碼，雖然可以設定，但是據我觀察，太多的項目就這樣備援着，可以了解，沒必要，放着沒事，去掉萬一有問題呢。

閱聽人多，話語權大，帶動大環境往這個方向走，技術棧越來越上層，前端與這個職業原本的定位越走越遠。

第二個是裝置的發展。

現在的軟體和硬體都已經非常強悍了，VS Code 都可以在浏覽器上跑了，那些通常的 Web 應用更是自然不在話下，是以，就算代碼差、實作啰嗦，資源開銷大，産品也能跑得順暢，沒必要像過去一樣為了使用者體驗摳性能。

基建的發展也使得很多使用者體驗相關的技術變得不那麼重要。例如，當年流量值錢的年代，前端開發産品，會使用一倍圖，兩倍圖。WiFi 模式下大圖，4G 下低清圖。

現在沒有那麼多套路了，都是無限流量，直接 3 倍圖走起，反正公司也不在意，使用者也不會投訴，我開發簡單，維護友善，何樂不為。

這也使得使用者體驗密切相關的前端技術不受追捧，無人問津，比如說相容性很好、省流量一絕的

元素。

第三個是網際網路 +。

也就是網際網路和傳統行業的結合，這個大趨勢造就了大量的前端崗位，但是這些崗位基本上都是乙方工作模式，也就是所謂的外包。

公司收益是訂單量，第一要求，deadline，第二要求功能完好，服務穩定，至于産品體驗，公司當然希望好一點，但是往往有心無力。畢竟體驗即使很一般，也不影響賺錢。

是以，對于這一類廣泛從業的前端開發人員，從工作上就不需要你關注比較細節的使用者體驗知識，降低了整個行業對使用者體驗的關注。

第四個是使用者體驗本身特性。

通常 1-2 個使用者體驗變好是沒有任何意義的，需要整體，上百個，上千個細節變好，才能産生質變的效果。

這是一個成本高，且漫長的過程，其收益往往不可見，不直接相關，對于大多數财力人力緊張的企業就缺少支援的動力。

使用者體驗優化成果無法量化、見效慢，在晉升的時候吃虧，員工自己就不太樂意做，是以都去做性能優化。因為有資料，都是造輪子，而不是去優化輪子。就是這個道理。

以上 4 點就是我分析的使用者體驗遭遇困境的原因，那如何破局呢？

我也總結了 4 點：第一個，企業層面，把重視使用者體驗作為公司的文化。注意，不是喊口号，也不是貼智語，而是實實在在的與績效和晉升挂鈎。

也就是，員工花了大量的時間和精力做了很多使用者體驗相關的工作，需要得到認可，需要和造輪子的同僚、引入熱門流行技術的同僚有同等的晉升機會。

否則，沒用的，全靠技術人員自身的追求，如果公司要想産品體驗好，但是公司并沒有這樣的基因，唯一的辦法是招優秀的人，舍得給錢。

第二個，需要國家層面出手。

比方說去年年底工信部頒布的适老化規定，無障礙通路支援，點名了一些 App 要做相關體驗的支援，我覺得這個非常好。

國家不出面，讓企業自發做這些事情，難的，因為針對小衆人群和邊界場景的開發投入是一件投入産出比，或者說商業價值這塊，不劃算的事情，企業自身是缺乏這樣的動力的，畢竟商業是逐利的，需要國家層面出手。

以後，老年人足夠多的時候，我認為是有可能立法強制要求做無障礙支援的。

第三個方法就是等，等待的等。

足夠内卷，行業不再高速發展，工匠精神就有了，因為這個時候使用者體驗會成為核心競争力。這個應該很好了解，在一個充分競争的、沒有壟斷行業，使用者最終選擇的，一定是使用者體驗最好的，甚至可以為了這個使用者體驗，高度溢價。

最後一個方法就是大廠帶動，社群覺醒，通過社群的力量進行傳播。

在這件事情上，個人的力量是極其有限的。這一點我深有體會，雖然我通過文章、分享苦口婆心，諄諄教導，使用者體驗很重要，希望提高整個行業對使用者體驗的重視，希望整個前端行業百花齊放，這麼多年實踐下來，雖然影響了一部分人，但是并沒有預想的那樣發展。

一是人輕言微，個體無法左右行業趨勢的發展，二是開發者也是人，也是逐利的，如果大環境就是這樣，即公司不支援，團隊不認可，對自己晉升也沒什麼幫助，人人都浮躁，就算一時熱血沸騰，很快也會随大流的。

是以，還需要大廠帶頭，需要社群的力量。

因為很多中小企業的技術選型決策，産品思路，業務模式都會參照大廠的做法，如果大廠願意在使用者體驗與工程實踐這塊大力發聲，其影響力絕對比個人要大的多。其實，現在有不少領先的企業正在做這樣的事情，我覺得是非常好的。

另外一個，就是社群的力量，包括組織使用者體驗為主題的分享大會，對使用者體驗領域的文章進行活動征集等，因為很多開發人員内心的方向是不清晰的，一旦發現社群言論，或者風向越來越多往使用者體驗方向靠攏後，是會引起其關注和内心的覺醒的。

最後，總結下。

由于社會發展，行業發展等各種原因，遊走于上層領域，當下的前端逐漸與基礎和邊界脫離，使得前端開發使用者體驗相關意識淡薄，知識缺乏成為比較普遍的現象，已經與“前端”原本的職業追求相背離。

這本身不是什麼問題，反而在網際網路高度發展中起到了舉足輕重的作用。問題在于，所帶來的整個社群環境，言論氛圍，會讓新入行的衆多前端誤認為現在的基于架構和工程的開發套路就是前端，以至于得了沒有 Vue 架構不會開發綜合征。

一旦當行業的高速發展停滞，産品進入到比拼使用者體驗一決勝負的時候，這部分的開發人員可能會面臨所謂的 35 歲職業危機，因為使用者體驗絕對不是有意識就能做好的，是需要大量的前端技術做儲備的。

是以，在關注功能實作的同時，多多關注技術的基礎與底層，想想前端這個職業的核心競争力是什麼，未來可能會走得更加順利。