很長一段時間以來，我認為一個網站只要能正常運作就「完成了」。
頁面已載入完畢。
按鈕被點擊了。
API已回應。
所以我發貨了。
然而……總覺得有些事情沒有完成。
沒壞。
沒錯。
只是稍微粗心了一點。
我花了好一會兒才明白：
大多數網站並不會因為缺少某些功能而讓人感覺不完整。
他們因為缺乏關注而感到不完整。
我們忽略的細節，因為它們感覺太小了。
有些事情我們不優先處理，因為它們不會阻礙進展。
滾動條。
重點狀態。
文字選擇顏色。
懸停過渡效果。
鍵盤導航。
這些都不會導致你的應用程式崩潰。
它們都不會導致建置失敗。
所以我們告訴自己：
“我稍後再處理這個問題。”
大多數時候……我們不會。
但使用者會注意到。
並非出於意識……而是出於情感。
一個網站要嘛讓人感覺經過精心設計……要嘛就感覺不到。
這種感覺對信任的影響比我們想像的還要大。
當我開始將 CSS 視為使用者體驗工具時
我最初做出的改變並不劇烈。
他們很安靜。
例如：
-
::selection顏色與品牌相匹配 -
加入一個簡潔的自訂滾動條（不花哨，只是對齊）
-
使按鈕和連結的懸停狀態保持一致
-
確保焦點輪廓可見，而不是將其移除。
-
加入流暢但克制的過渡效果
這一切並沒有讓我的網站變得更「酷」。
它讓氣氛平靜了下來。
在網路上，冷靜往往被低估了。
網站無需給人留下深刻印象。
它需要尊重註意力。
捲軸、選擇和關懷感
自訂捲軸一直備受爭議。
說實話？他們應該如此。
這與裝飾無關。
關鍵在於方向一致。
當捲軸略微體現品牌顏色，且不影響使用者體驗時，就表明了設計意圖。
文字選擇也一樣。
使用者會不斷選擇文字：複製錯誤訊息、分享片段、突出顯示部分內容。
如果高光顏色與你的調色盤嚴重衝突，就會微妙地破壞整體體驗。
這只是個小小的調整。
但微小的調整會產生巨大的影響。
Lighthouse 不僅給了我分數；它改變了我的習慣。
起初，我把 Lighthouse 當作記分板來使用。
綠色代表好。
紅色 = 稍後修復。
但當我仔細觀察後，我發現了一些事情：
大多數 Lighthouse 改進並非透過駭客手段實現的。
它們強調紀律。
-
壓縮和調整影像大小
-
調整對比度而不是覆蓋它
-
移除未使用的 JavaScript
-
避免佈局偏移
-
在行動裝置上進行測試，而不是假設桌面端就足夠了。
我的成績提高了。
但更重要的是……我的眼睛感覺輕鬆多了。
一個小習慣很有幫助：我總是用全新的隱身視窗來執行 Lighthouse。這樣，快取的資源、擴充功能或登入狀態就不會影響結果。
這樣可以確保回饋的真實性。
無障礙設計並非額外工作，而是基本的尊重。
這一認識徹底改變了我的一切。
無障礙功能（A11y）過去感覺像是進階功能，是「以後再優化」的東西。
但大多數有意義的無障礙改進都很簡單：
-
適當的色彩對比度
-
可見的焦點指示器
-
語意化 HTML 而非 div 湯
-
實際上是
<button>元素的按鈕 -
支援鍵盤導航
-
尊重
prefers-reduced-motion
這些都不是複雜的工程技術。
這是經過深思熟慮的預設值。
無障礙設計並不會讓你的網站對任何人來說都變得更糟。
這樣一來，更多的人就可以使用它了。
當你開始這樣想的時候，它就不再是可有可無的了。
行動端效能揭示了桌面端隱藏的秘密
桌面效能容錯率較高。
手機很誠實。
當我開始持續查看行動裝置 Lighthouse 評分時，一些規律開始顯現：
-
超大尺寸圖片
-
延遲載入字體
-
佈局會根據動態內容而變化
-
我其實不需要 JavaScript
修復這些問題不僅改善了各項指標。
它增進了信任。
速度快的網站感覺很可靠。
網站速度慢會讓人覺得不夠用心，即使技術上可以正常運作。
用戶可能不知道為什麼會感覺不對勁。
但他們能感受到。
當我開始關注小事時，發生了什麼變化？
物流體驗有所不同。
我不再覺得我的專案「快要完成了」。
我不再為不足之處道歉了。
我的網站並沒有刻意吸引眼球。
他們默默地贏得了這一切。
有趣的是，當可存取性提升時，效能通常也會隨之提升。更清晰的結構，更少的冗餘程式碼，更優化的預設值。
關懷往往會層層傳遞。
我不再忽略的事情
❌ 專注狀態
❌ 顏色對比度
❌ 移動燈塔評分
❌ 無障礙警告
❌ 「差不多就行了」的時刻
小事累積起來。
疏忽也會導致這種情況。
最後的一些想法（來自一位開發者的演講）
你不需要更多的框架。
你不需要更多功能。
有時候，你只需要放慢腳步，就能注意到使用者已經感受到的東西。
好的網站不會吵鬧。
他們很體貼。
他們不炫耀努力。
他們表現出關心。
而關懷，悄無聲息地，就能建立信任。
慢慢來。
注重細節。
這樣才能讓網站看起來完整。
祝福您擁有平靜的使用者介面、周到的預設設定以及對細節的自豪感，朋友們💙。
你有沒有註意到某個「很小」的細節，結果卻產生了比預期更大的影響？
感謝閱讀！ 🙏🏻
希望這對您有幫助✅
請按讚並關注，以獲得更多精彩內容😍
由Hadil Ben Abdallah傾情打造 | 
|
|---------|----------|---------|
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
