激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

游戲界面開發(fā)(Web 界面開發(fā)指南，持續(xù)更新)

發(fā)布時間：2023-11-27 12:03:53 瀏覽量：99次

?Web 界面開發(fā)指南，持續(xù)更新

游戲界面開發(fā)(Web 界面開發(fā)指南，持續(xù)更新)

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

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

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

  • 單擊輸入標(biāo)簽應(yīng)將焦點放在輸入字段上
  • 輸入應(yīng)使用<form>包裝，以便通過按Enter鍵提交
  • 輸入應(yīng)具有適當(dāng)?shù)?/span>type，如password、email等
  • 大多數(shù)情況下，輸入應(yīng)禁用spellcheck和autocomplete屬性
  • 輸入應(yīng)該在適當(dāng)?shù)臅r候通過使用required屬性來利用HTML表單驗證
  • 輸入框前綴和后綴的裝飾，例如圖標(biāo)，應(yīng)該絕對定位在文本輸入框上方，并使用內(nèi)邊距而不是并列排版，并觸發(fā)輸入框的焦點。
  • Toggle切換組件應(yīng)該立即生效，不需要二次確認(rèn)
  • 提交表單后應(yīng)禁用按鈕，以避免重復(fù)的網(wǎng)絡(luò)請求
  • 交互式元素應(yīng)禁用內(nèi)部內(nèi)容的user-select
  • 裝飾元素（發(fā)光、漸變）應(yīng)禁用pointer-events以避免劫持事件
  • 垂直或水平列表中的交互元素應(yīng)該在每個元素之間沒有寫死的區(qū)域，而是增加它們的內(nèi)邊距。
  • 字體應(yīng)使用-webkit-font-smoothing: antialiased以提高易讀性
  • 字體應(yīng)使用-webkit-font-smoothing: antialiased以提高易讀性
  • 字體應(yīng)根據(jù)內(nèi)容、字母或相關(guān)語言進(jìn)行字集化
  • 字體粗細(xì)不應(yīng)在懸?；蜻x定狀態(tài)下更改，以防止布局偏移
  • 字重不應(yīng)該使用400以下的字體粗細(xì)
  • 中等大小的標(biāo)題一般看起來最好的字體之間的字重為500-600
  • 使用CSS clamp()流暢地調(diào)整值，例如clamp(48px, 5vw, 72px)用于標(biāo)題的font-size
  • 切換主題時不應(yīng)觸發(fā)元素上的過渡和動畫
  • 動畫持續(xù)時間不應(yīng)超過200ms，使交互感覺即時沒有延遲
  • 動畫的數(shù)值應(yīng)與觸發(fā)器大小成比例： 不要使用“從0到1”的縮放動畫來顯示對話框，而是使用淡入淡出的透明度和縮放（大約從0.8開始）。 按下按鈕時，不要從1到0.8縮放，而是~0.96、~0.9左右
  • 頻繁且新奇較低的動作應(yīng)避免無關(guān)的動畫： 打開右鍵單擊菜單 從列表中刪除或添加項目 懸?，嵥榈陌粹o
  • 循環(huán)動畫在屏幕上不可見時應(yīng)該暫停，以減輕CPU和GPU的使用量
  • 對于在頁面內(nèi)導(dǎo)航到錨點，請使用scroll-behavior: smooth屬性，并設(shè)置適當(dāng)?shù)钠屏俊?/span>
  • 懸停狀態(tài)不應(yīng)在觸摸按下時可見，使用 @media (hover: hover)
  • 輸入的字體大小不應(yīng)小于16px，以防止iOS縮放焦點
  • 輸入不應(yīng)該自動聚焦在觸摸設(shè)備上，因為它會打開鍵盤并覆蓋屏幕
  • 應(yīng)用muted和playsinline到<video />標(biāo)簽以在iOS上自動播放
  • 對于實現(xiàn)平移和縮放手勢的自定義組件禁用touch-action，以防止縮放和滾動等本機(jī)行為的干擾
  • 使用-webkit-tap-highlight-color: rgba（0,0,0,0）禁用iOS的默認(rèn)輕觸高亮效果
  • blur()和filter的backdrop-filter值過大可能會導(dǎo)致速度變慢
  • 對填充矩形進(jìn)行縮放和模糊處理會導(dǎo)致色帶，應(yīng)該使用徑向漸變代替
  • 對于性能不佳的動畫，使用transform: translateZ(0)少量啟用GPU渲染
  • 在性能不佳的滾動動畫期間，切換will-change屬性
  • 在iOS上自動播放過多視頻會使設(shè)備變卡，應(yīng)該暫?；蛐遁d屏幕外的視頻。
  • 使用refs繞過React的渲染生命周期，實時值可以直接提交到DOM
  • 檢測并適應(yīng)用戶設(shè)備的硬件和網(wǎng)絡(luò)能力
  • 禁用的按鈕不應(yīng)該有tooltips，它們是不可訪問的
  • 使用box shadow來創(chuàng)建焦點環(huán)，而不是outline，因為outline無法呈現(xiàn)圓角效果
  • 一個連續(xù)列表中可聚焦元素應(yīng)該可以被 ↑ ↓導(dǎo)航操作
  • 順序列表中的可聚焦元素應(yīng)該可以用 ? Backspace 操作
  • 下拉菜單要在按下時立即打開，下拉菜單應(yīng)在mousedown而不是click時觸發(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)該有一個明確的aria-label，而不是向使用屏幕閱讀器的人宣布原始DOM樹
  • 漸變文本應(yīng)在::selection狀態(tài)下取消設(shè)置漸變
  • 當(dāng)使用嵌套菜單時，應(yīng)該使用“prediction cone”來防止指針在穿過其他元素時意外關(guān)閉菜單。
  • 樂觀地在本地更新數(shù)據(jù)，并在服務(wù)器錯誤時回滾并提供反饋
  • 身份驗證重定向應(yīng)該在客戶端加載之前在服務(wù)器上發(fā)生，以避免jankyURL更改
  • 使用::selection設(shè)置文檔選擇狀態(tài)的樣式
  • 顯示與其觸發(fā)器相關(guān)的反饋：
  • 在成功復(fù)制時顯示臨時內(nèi)聯(lián)復(fù)選標(biāo)記，而不是通知
  • 突出顯示表格錯誤的相關(guān)輸入
  • 空狀態(tài)應(yīng)提示創(chuàng)建一個新的項目，可選的模板
  • 在暗模式或亮模式之間切換將觸發(fā)元素上的過渡，這些元素旨在進(jìn)行顯式交互，如懸停。我們可以暫時禁用轉(zhuǎn)換以防止這種情況。對于Next.js，請使用next-themes來防止開箱即用的過渡。
  • 這是一個品味的問題，但有些互動只是感覺更好，沒有運動。例如，本機(jī)macOS右鍵單擊菜單只會顯示出動畫，而不會顯示出動畫，這是由于頻繁使用它。
  • 大多數(shù)觸摸設(shè)備在按下時會暫時閃爍懸停狀態(tài)，除非明確定義為僅用于帶有@media (hover: hover)的指針設(shè)備。
  • 使用will-change作為提高性能的最后手段。為了獲得更好的性能而預(yù)先將其扔到元素上可能會產(chǎn)生相反的效果。
  • 這可能是有爭議的，但有時直接操作DOM是有益的。例如，我們可以在ref中跟蹤delta，并直接在回調(diào)中更新相關(guān)元素，而不是依賴于React在每個wheel事件上重新渲染。
  • 被禁用的按鈕在DOM中不會以Tab鍵的順序出現(xiàn)，因此工具提示永遠(yuǎn)不會向鍵盤用戶顯示，他們也不知道按鈕被禁用的原因。
  • 從2023年起，Safari在定義自定義輪廓樣式時將不會考慮元素的邊界半徑。Safari 16.4增加了對outline的支持，支持邊界半徑的曲線。但是，請記住，并不是每個人都立即更新他們的操作系統(tǒng)。

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

看完本文如果覺得有用，記得點個贊支持，收藏起來說不定哪天就用上啦～

游戲界面開發(fā)(Web 界面開發(fā)指南，持續(xù)更新)

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

游戲界面開發(fā)(Web 界面開發(fā)指南，持續(xù)更新)

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定