https://joeyang1412.github.io/hugo-theme-spectra/zh-tw/tags/%E8%A8%AD%E8%A8%88/Recent content in 設計 on Spectra DemoHugozh-twThu, 15 May 2025 00:00:00 +0000https://joeyang1412.github.io/hugo-theme-spectra/zh-tw/posts/thoughts/dark-mode-obsession/Thu, 15 May 2025 00:00:00 +0000https://joeyang1412.github.io/hugo-theme-spectra/zh-tw/posts/thoughts/dark-mode-obsession/<h2 id="一切都要黑的">一切都要黑的</h2> <p>手機、電腦、IDE、瀏覽器、筆記軟體、通訊軟體。只要有深色模式的選項，我一定會開。</p> <p>不是為了什麼科學理由。就是覺得好看。</p> <p>深色背景上的亮色文字，看起來有一種「正在做正事」的感覺。白底黑字反而像在看 Word 文件。完全是主觀偏好，但很多人好像有類似的感覺。</p> <h2 id="深色模式真的比較護眼嗎">深色模式真的比較護眼嗎</h2> <p>老實說，沒有很強的科學證據支持這個說法。</p> <p>目前的研究大概是這樣：</p> <ul> <li><strong>暗環境</strong>下用深色模式，眼睛確實比較不刺眼 — 因為螢幕整體亮度低</li> <li><strong>亮環境</strong>下（像是白天的辦公室），淺色模式反而比較好讀 — 因為對比度的關係</li> <li>深色模式不會「治療」或「預防」近視，那是兩回事</li> <li>影響眼睛疲勞的主要因素是<strong>螢幕亮度、字體大小、閱讀距離和休息頻率</strong>，不是背景顏色</li> </ul> <p>所以「深色模式護眼」這個說法，大概只在特定情境下成立。</p> <h2 id="但它確實省電">但它確實省電</h2> <p>在 OLED 螢幕上，深色模式可以省下不少電。因為 OLED 的黑色像素是完全關閉的，不發光就不耗電。</p> <p>Google 自己做過測試，YouTube 在深色模式下最多可以省 60% 的螢幕耗電。</p> <p>不過這只對 OLED 有效。LCD 螢幕的背光板一直亮著，深色淺色耗電差不多。</p> <h2 id="深色模式設計比你想的難">深色模式設計比你想的難</h2> <p>做過深色模式的人都知道，不是把背景改成黑色、文字改成白色就好了。</p> <p>幾個容易踩到的坑：</p> <h3 id="純黑背景太刺眼">純黑背景太刺眼</h3> <p><code>#000000</code> 的純黑配上 <code>#FFFFFF</code> 的純白，對比度太強。長時間看下來反而比淺色模式更累。</p> <p>比較好的做法是用深灰色當背景，像是 <code>#1a1a2e</code> 或 <code>#0b0f19</code>，然後文字用偏灰的白色 <code>#e4e8f1</code>。</p> <h3 id="顏色直接搬過來會出事">顏色直接搬過來會出事</h3> <p>淺色模式下好看的藍色，搬到深色背景上可能太亮、太刺眼。通常需要降低飽和度，或者微調色相。</p> <h3 id="層次感不能只靠陰影">層次感不能只靠陰影</h3> <p>淺色模式可以用陰影來做層次。深色模式下陰影幾乎看不到，要改用邊框或微妙的背景色差來區分層級。</p> <h3 id="圖片要處理">圖片要處理</h3> <p>原本在白色背景下好看的圖片，放到深色背景上可能會「浮」起來。加一層圓角和微妙的邊框可以改善，或者直接用帶有深色背景的圖片。</p> <h2 id="我的偏好設定">我的偏好設定</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">作業系統：深色 </span></span><span class="line"><span class="cl">IDE / 編輯器：深色（One Dark Pro 或 GitHub Dark） </span></span><span class="line"><span class="cl">瀏覽器：深色 </span></span><span class="line"><span class="cl">終端機：永遠都是深色的 </span></span><span class="line"><span class="cl">社群媒體：深色 </span></span><span class="line"><span class="cl">通訊軟體：深色 </span></span><span class="line"><span class="cl">文件編輯：看情況，有時候淺色反而好讀 </span></span></code></pre></div><p>唯一例外是需要精確看顏色的設計工作 — 深色模式下顏色的感知會偏掉，那時候會切回淺色。</p>