最近看到了一份非常精簡(jiǎn)但很實(shí)用的《Web 界面開(kāi)發(fā)指南》，其中僅有 4 頁(yè)，卻詳細(xì)闡述了前端交互體驗(yàn)的關(guān)鍵要點(diǎn)。這份指南的思路和方法相當(dāng)于一個(gè)最佳實(shí)踐，比許多冗長(zhǎng)的內(nèi)容介紹更易于理解。實(shí)際上即使沒(méi)有太多編碼經(jīng)驗(yàn)，也能夠輕松地使用這些指南，如果按照這些要點(diǎn)進(jìn)行開(kāi)發(fā)，相信會(huì)讓你的項(xiàng)目更加完美，注重細(xì)節(jié)將使你的工作更具價(jià)值。

以下基于原文翻譯，內(nèi)容有所刪改，感興趣的可以查看原文。

這份文檔列出了一些使我們的（Web）界面更好的細(xì)節(jié)處理方式，這個(gè)列表并不是完整全面的，但它會(huì)基于經(jīng)驗(yàn)持續(xù)不斷更新。其中有些實(shí)現(xiàn)可能是偏于主觀性的，但大多數(shù)適用于所有網(wǎng)站。

• 單擊輸入標(biāo)簽應(yīng)將焦點(diǎn)放在輸入字段上
• 輸入應(yīng)使用<form>包裝，以便通過(guò)按Enter鍵提交
• 輸入應(yīng)具有適當(dāng)?shù)?/span>type，如password、email等
• 大多數(shù)情況下，輸入應(yīng)禁用spellcheck和autocomplete屬性
• 輸入應(yīng)該在適當(dāng)?shù)臅r(shí)候通過(guò)使用required屬性來(lái)利用HTML表單驗(yàn)證
• 輸入框前綴和后綴的裝飾，例如圖標(biāo)，應(yīng)該絕對(duì)定位在文本輸入框上方，并使用內(nèi)邊距而不是并列排版，并觸發(fā)輸入框的焦點(diǎn)。
• Toggle切換組件應(yīng)該立即生效，不需要二次確認(rèn)
• 提交表單后應(yīng)禁用按鈕，以避免重復(fù)的網(wǎng)絡(luò)請(qǐng)求
• 交互式元素應(yīng)禁用內(nèi)部?jī)?nèi)容的user-select
• 裝飾元素（發(fā)光、漸變）應(yīng)禁用pointer-events以避免劫持事件
• 垂直或水平列表中的交互元素應(yīng)該在每個(gè)元素之間沒(méi)有寫死的區(qū)域，而是增加它們的內(nèi)邊距。

• 字體應(yīng)使用-webkit-font-smoothing: antialiased以提高易讀性
• 字體應(yīng)使用-webkit-font-smoothing: antialiased以提高易讀性
• 字體應(yīng)根據(jù)內(nèi)容、字母或相關(guān)語(yǔ)言進(jìn)行字集化
• 字體粗細(xì)不應(yīng)在懸停或選定狀態(tài)下更改，以防止布局偏移
• 字重不應(yīng)該使用400以下的字體粗細(xì)
• 中等大小的標(biāo)題一般看起來(lái)最好的字體之間的字重為500-600
• 使用CSS clamp()流暢地調(diào)整值，例如clamp(48px, 5vw, 72px)用于標(biāo)題的font-size

• 切換主題時(shí)不應(yīng)觸發(fā)元素上的過(guò)渡和動(dòng)畫
• 動(dòng)畫持續(xù)時(shí)間不應(yīng)超過(guò)200ms，使交互感覺(jué)即時(shí)沒(méi)有延遲
• 動(dòng)畫的數(shù)值應(yīng)與觸發(fā)器大小成比例： 不要使用“從0到1”的縮放動(dòng)畫來(lái)顯示對(duì)話框，而是使用淡入淡出的透明度和縮放（大約從0.8開(kāi)始）。 按下按鈕時(shí)，不要從1到0.8縮放，而是~0.96、~0.9左右
• 頻繁且新奇較低的動(dòng)作應(yīng)避免無(wú)關(guān)的動(dòng)畫： 打開(kāi)右鍵單擊菜單 從列表中刪除或添加項(xiàng)目 懸?，嵥榈陌粹o
• 循環(huán)動(dòng)畫在屏幕上不可見(jiàn)時(shí)應(yīng)該暫停，以減輕CPU和GPU的使用量
• 對(duì)于在頁(yè)面內(nèi)導(dǎo)航到錨點(diǎn)，請(qǐng)使用scroll-behavior: smooth屬性，并設(shè)置適當(dāng)?shù)钠屏俊?/span>

• 懸停狀態(tài)不應(yīng)在觸摸按下時(shí)可見(jiàn)，使用 @media (hover: hover)
• 輸入的字體大小不應(yīng)小于16px，以防止iOS縮放焦點(diǎn)
• 輸入不應(yīng)該自動(dòng)聚焦在觸摸設(shè)備上，因?yàn)樗鼤?huì)打開(kāi)鍵盤并覆蓋屏幕
• 應(yīng)用muted和playsinline到<video />標(biāo)簽以在iOS上自動(dòng)播放
• 對(duì)于實(shí)現(xiàn)平移和縮放手勢(shì)的自定義組件禁用touch-action，以防止縮放和滾動(dòng)等本機(jī)行為的干擾
• 使用-webkit-tap-highlight-color: rgba（0,0,0,0）禁用iOS的默認(rèn)輕觸高亮效果

• blur()和filter的backdrop-filter值過(guò)大可能會(huì)導(dǎo)致速度變慢
• 對(duì)填充矩形進(jìn)行縮放和模糊處理會(huì)導(dǎo)致色帶，應(yīng)該使用徑向漸變代替
• 對(duì)于性能不佳的動(dòng)畫，使用transform: translateZ(0)少量啟用GPU渲染
• 在性能不佳的滾動(dòng)動(dòng)畫期間，切換will-change屬性
• 在iOS上自動(dòng)播放過(guò)多視頻會(huì)使設(shè)備變卡，應(yīng)該暫?；蛐遁d屏幕外的視頻。
• 使用refs繞過(guò)React的渲染生命周期，實(shí)時(shí)值可以直接提交到DOM
• 檢測(cè)并適應(yīng)用戶設(shè)備的硬件和網(wǎng)絡(luò)能力

• 禁用的按鈕不應(yīng)該有tooltips，它們是不可訪問(wèn)的
• 使用box shadow來(lái)創(chuàng)建焦點(diǎn)環(huán)，而不是outline，因?yàn)?strong>outline無(wú)法呈現(xiàn)圓角效果
• 一個(gè)連續(xù)列表中可聚焦元素應(yīng)該可以被 ↑ ↓導(dǎo)航操作
• 順序列表中的可聚焦元素應(yīng)該可以用 ? Backspace 操作
• 下拉菜單要在按下時(shí)立即打開(kāi)，下拉菜單應(yīng)在mousedown而不是click時(shí)觸發(fā)
• 使用帶有樣式標(biāo)簽的svg favicon，該樣式標(biāo)簽遵循基于prefers-color-scheme的系統(tǒng)主題
• 僅圖標(biāo)交互元素應(yīng)定義明確的aria-label
• 由懸停觸發(fā)的工具提示不應(yīng)包含交互式內(nèi)容
• 圖像應(yīng)始終使用<img>渲染，以便于屏幕閱讀器和從右鍵單擊菜單復(fù)制
• 使用HTML構(gòu)建的插圖應(yīng)該有一個(gè)明確的aria-label，而不是向使用屏幕閱讀器的人宣布原始DOM樹
• 漸變文本應(yīng)在::selection狀態(tài)下取消設(shè)置漸變
• 當(dāng)使用嵌套菜單時(shí)，應(yīng)該使用“prediction cone”來(lái)防止指針在穿過(guò)其他元素時(shí)意外關(guān)閉菜單。

• 樂(lè)觀地在本地更新數(shù)據(jù)，并在服務(wù)器錯(cuò)誤時(shí)回滾并提供反饋
• 身份驗(yàn)證重定向應(yīng)該在客戶端加載之前在服務(wù)器上發(fā)生，以避免jankyURL更改
• 使用::selection設(shè)置文檔選擇狀態(tài)的樣式
• 顯示與其觸發(fā)器相關(guān)的反饋：
• 在成功復(fù)制時(shí)顯示臨時(shí)內(nèi)聯(lián)復(fù)選標(biāo)記，而不是通知
• 突出顯示表格錯(cuò)誤的相關(guān)輸入
• 空狀態(tài)應(yīng)提示創(chuàng)建一個(gè)新的項(xiàng)目，可選的模板

• 在暗模式或亮模式之間切換將觸發(fā)元素上的過(guò)渡，這些元素旨在進(jìn)行顯式交互，如懸停。我們可以暫時(shí)禁用轉(zhuǎn)換以防止這種情況。對(duì)于Next.js，請(qǐng)使用next-themes來(lái)防止開(kāi)箱即用的過(guò)渡。
• 這是一個(gè)品味的問(wèn)題，但有些互動(dòng)只是感覺(jué)更好，沒(méi)有運(yùn)動(dòng)。例如，本機(jī)macOS右鍵單擊菜單只會(huì)顯示出動(dòng)畫，而不會(huì)顯示出動(dòng)畫，這是由于頻繁使用它。
• 大多數(shù)觸摸設(shè)備在按下時(shí)會(huì)暫時(shí)閃爍懸停狀態(tài)，除非明確定義為僅用于帶有@media (hover: hover)的指針設(shè)備。
• 使用will-change作為提高性能的最后手段。為了獲得更好的性能而預(yù)先將其扔到元素上可能會(huì)產(chǎn)生相反的效果。
• 這可能是有爭(zhēng)議的，但有時(shí)直接操作DOM是有益的。例如，我們可以在ref中跟蹤delta，并直接在回調(diào)中更新相關(guān)元素，而不是依賴于React在每個(gè)wheel事件上重新渲染。
• 被禁用的按鈕在DOM中不會(huì)以Tab鍵的順序出現(xiàn)，因此工具提示永遠(yuǎn)不會(huì)向鍵盤用戶顯示，他們也不知道按鈕被禁用的原因。
• 從2023年起，Safari在定義自定義輪廓樣式時(shí)將不會(huì)考慮元素的邊界半徑。Safari 16.4增加了對(duì)outline的支持，支持邊界半徑的曲線。但是，請(qǐng)記住，并不是每個(gè)人都立即更新他們的操作系統(tǒng)。

原文地址： https://interfaces.rauno.me，該地址會(huì)不斷更新相關(guān)指南，感興趣的可以收藏關(guān)注。

看完本文如果覺(jué)得有用，記得點(diǎn)個(gè)贊支持，收藏起來(lái)說(shuō)不定哪天就用上啦～

「專注前端開(kāi)發(fā)，分享前端相關(guān)技術(shù)干貨，公眾號(hào)：南城大前端（ID: nanchengfe）」