icon 意思、類型與格式一次看懂：讓圖示一眼認得出來的設計原則

存檔按鈕畫的是早已淘汰的軟碟，為什麼大家還看得懂這個 icon 的意思？這篇從 icon 的 3 種詞義講起，分清圖示與 logo、favicon、emoji 的界線，整理 3 類圖示，比較 SVG、PNG、icon font 與 ICO 怎麼選，再說明讓圖示一眼認得出來的視覺原則與無障礙做法。

數位工具

截圖整頁只拍到第一屏？Chrome、Edge、Safari 與手機的整頁入口

想截圖整頁，按下系統快捷鍵卻只拍到最上面那一截，往下捲的內容全部不見。這篇依瀏覽器找出整頁截圖的入口：Chrome 開發人員工具的指令選單、Edge 的螢幕擷取畫面、Firefox 的拍攝畫面擷圖、Safari 網頁檢閱器，加上 iPhone 與 Android 的做法，以及擴充功能該留意的權限。

SEO優化

網站的 Core Web Vitals 分數一掉，多數團隊直覺就是把動態特效整批拔掉，以為靜態頁面才安全。真正拖垮 LCP、INP、CLS 的，往往不是有沒有動態效果，而是這個動態特效用了哪個 CSS 屬性、跑在哪條執行緒上，搞懂這個判準，才知道哪些動態特效真的該讓步，哪些其實冤枉背了黑鍋。

網頁設計

多數人以為同意橫幅做得越安全，使用者體驗就得跟著犧牲，把接受鍵放大、拒絕縮成一行灰字。其實合規與體驗不是同一個天平上互相犧牲的兩端，只有按鈕對等與非必要類別預設關閉這兩條線真的不能退，其餘外觀、文案、動畫都還有自由發揮的空間。

網站資安

Passkey登入用一組公私鑰取代密碼，讓釣魚攻擊沒有著力點，是 W3C 與 FIDO 聯盟力推的無密碼驗證方式。這篇整理運作原理、CISA 防釣魚認定標準，以及 WordPress 會員系統的導入設定與復原機制，幫你判斷該不該導入。

數位行銷

網站互動測驗留資轉換率算出來，卻不知道算不算好？完成率該用開始人數算，轉換率的分母卻常有兩種算法，兩個數字沒分清楚，對照別人的基準就會判斷錯。這篇拆解完成率與轉換率該怎麼算、不同產業的基準值落在哪裡，以及數字兜不起來時該先查哪一段。

網頁設計

View Transitions API 是什麼？多數人以為要做出電影般的換頁轉場動畫，就得把整個網站改造成單頁應用（SPA），其實瀏覽器早已內建這個功能，只要在樣式表加上幾行 CSS，一般的多頁式網站點連結換頁時，畫面就能自動跑交叉淡出淡入，不必寫一行 JavaScript。

網頁設計

很多人選一頁式網站是因為看起來省事，但真正決定它撐不撐得住的，是任務夠不夠單一、受眾是不是只有一種、內容量是否原本就有限。這三個前提只要有一個被打破，搜尋引擎索引、使用者注意力、受眾分眾與內容架構就會依序出問題。

網頁設計

側邊欄留不留常被當成整組保留或整組砍掉的二選一，但桌機和手機的際遇完全不同：桌面版撐得住導覽與篩選，手機版卻常被擠到頁面最底端，形同沒放。真正該問的是每個元件值不值得留，功能型該留、裝飾型小工具該砍掉。

網頁設計

多數人做新頁面時直覺就想放一支影片，但研究顯示使用者打開影片不代表會看完；資訊查找型任務裡，文字反而比影片掃讀更快，也不會被自動播放與載入速度拖慢。影片真正該派上用場的時候，是示範動作或解釋複雜陌生的流程，決定用哪種媒介的關鍵，從來不是影片天生比較好，而是這個頁面實際在解決什麼任務。

網頁設計

首屏該放大圖還是放文字，多數人當成美感偏好在挑，其實答案藏在具體代價裡：純圖讓讀者秒滑走、搜尋引擎與 AI 讀不到內容，還可能拖慢 LCP 影響載入分數。真正該問的是這頁靠誰找到，該讓文字還是圖片扛下第一句話。

SEO優化

SEO 與設計吵起來，常被當成非黑即白的選邊站，但攤開實際案例會發現，多數爭執只是流程沒把假衝突拆開來看，全螢幕主視覺、精簡導覽、客製字體、無限捲動都能兩全，真正沒有中間地帶、該讓步的只有低對比配色與圖片化文字兩種純視覺偏好。