淺色模式與深色模式
如你所知,你可以在 iPhone 上切換淺色模式和深色模式。如果你不確定如何切換,請按以下步驟操作:打開 iPhone 設定,向下滾動並點擊「顯示與亮度」。你會看到標有「淺色」和「深色」的兩個預覽圖。點擊你喜歡的即可應用。這樣能根據環境自訂螢幕,提高可見性和舒適度。自第一代 iPhone 起,淺色模式便已存在。Apple 在 2019 年 9 月的 iOS 13 / iPadOS 13 中正式為 iPhone 和 iPad 引入了深色模式。這項功能讓許多 iPhone 用戶對自訂的 UI 外觀感到滿意。有些人偏好淺色模式,而另一些人則熱衷於深色模式。你還可以選擇「自動」,根據一天中的時間在兩者間切換。
應用開發者如何控制兩種外觀模式下的 UI 設計
應用程式在淺色模式下可能看起來很完美,但在深色模式下卻截然不同。有時,深色模式可能意外破壞開發者的原始設計意圖,影響顏色、對比度和整體美感。因此,開發者必須在兩種模式下仔細設計和測試其界面,以確保為所有用戶帶來一致且愉悅的體驗。一種可能的解決方案是為淺色模式和深色模式準備獨立的視圖和圖像資源。然而,隨著應用程式的增長和新增 UI 元件,這種方法會很快變得多餘且難以維護。因此,大多數開發者避免採用這種方法,而是依賴於能自動適應兩種外觀模式的更具可擴展性解決方案。
依賴系統 UI 功能
幸運的是,Apple 引入了系統定義的顏色,這些顏色會自動適應淺色模式和深色模式。透過使用這些內建的顏色,開發者可以確保其 UI 元素根據用戶的外觀設定無縫調整。這消除了手動管理獨立設計的需要,並有助於在兩種模式下保持視覺一致性。例如,像 label、systemBackground 和 secondarySystemBackground 這樣的顏色會根據當前外觀動態變化,使應用程式在任何環境下都保持可讀性和視覺平衡。因此,當你從淺色模式切換到深色模式時,預設文字顏色會從黑色變為白色。然而,如果應用硬性將文字顏色設為黑色,那麼即使在深色模式下,文字仍會保持黑色,幾乎在深色背景上看不見。為了防止這個問題,開發者依賴系統顏色,確保文字和 UI 元素能自動適應每種模式的適當顏色。
Splync 類別圖示的深色模式問題
最初,Splync 對深色模式用戶不太友好。有用戶反映,在深色模式下類別圖示不太明顯,但我當時無法立即處理。當時我專注於改進應用的核心功能,所以沒有優先考慮這個視覺問題。到了 2026 年,新年伊始,我終於仔細查看。我的發現既簡單又重要:圖示本身是純黑色的。從技術上講,它們被固定為顏色 #000000。這意味著無論手機使用什麼模式,它們都保持黑色。因此,在深色模式下,黑色圖示如同偽裝在深色背景中。此外,我在代碼中還使用固定的白色來柔化圖示背景。這在淺色模式下效果不錯,但在深色模式下卻產生了尷尬的對比,感覺不自然。
我的新代碼對圖示顏色的改進
這是我改變的地方。我不再強制設置顏色,而是讓代碼指示應用自動由系統決定圖示顏色;淺色模式下為黑色,深色模式下為白色。此外,代碼還指導應用使用每個類別自己的顏色作為柔和的背景色調,使用相同的類別顏色添加細邊框,保持在兩種模式下的整潔和可讀性。簡單來說,我不再強制設置顏色,而是讓 iPhone 聰明地處理它們。由於這項改進,類別圖示現在能自然適應淺色和深色模式,無論在哪個環境中都清晰可見且視覺一致。這次修正雖花費不多時間,但我決定立即發布更新,讓期待已久的深色模式用戶問題能夠盡快得到解決。
顏色的重要性
沒有一種“完美”的美感。每個人對設計的感受都不一樣。即使是同一個人,也會因一天或一天中的時間而有不同感覺。早上看起來不錯的設計,晚上可能會顯得分心。這就是為什麼開發者必須專注於自訂,同時保持簡單和直觀的使用性。好的設計不是強迫一種風格,而是讓用戶選擇適合自己的—這是我所相信的。