Refactoring UI

從零開始建構 UI 設計

這個詞彙「從零開始」可以從幾個不同的角度來解讀，以下將根據提供的資料來源，探討 UI 設計從零開始的不同面向：

從功能出發，而非佈局

如同先前討論過的，在設計新的 app 或功能初期，應著重於核心功能的呈現，而非糾結於細節和佈局。設計 app 的外殼，例如導航列、側邊欄等等，在尚未設計出一些功能之前，並不足以提供決定導航運作方式的資訊。從實際的功能片段開始，例如航班預訂服務中的「搜尋航班」功能，先設計出必要的欄位和按鈕，再逐步完善細節。

從低擬真度開始，細節可以稍後再處理

在設計初期，不要過於糾結於字體、陰影、圖示等細節，這些細節最終會很重要，但在初期階段並非重點。使用低擬真度的工具，例如紙筆或粗線條的筆刷，快速探索不同的佈局想法。先以灰階設計，使用間距、對比和尺寸來建立視覺層次，之後再添加顏色。不要過度投資於草圖和線框圖，這些只是探索想法的工具，在做出決定後就可以捨棄。

逐步設計，不要一次設計所有功能

在開始實作之前，不需要設計出 app 的所有功能，事實上，最好以短週期的方式工作，先設計出下一個要建構的功能的簡化版本，完成後再進行實作。在可實際使用的介面中解決設計問題比僅憑想像預測所有邊緣情況更容易。避免在設計中暗示尚未準備建構的功能，例如，在評論系統中設計附件功能，但實際上建構附件功能比預期困難得多，導致整個評論系統被擱置。先建構簡單版本，永遠有可發佈的成果，之後再逐步添加更進階的功能。

從建立設計系統開始

為字體大小、字體粗細、行高、顏色、邊距、填補、寬度、高度、陰影、邊框半徑、邊框寬度、不透明度等建立設計系統。預先定義好這些系統，可以避免在設計過程中反覆做出同樣的瑣碎決定，節省決策疲勞，並確保設計的一致性。

從空白畫布開始，逐步添加元素

不要被現有的設計工具或框架限制，從空白畫布開始，自由地探索各種可能性。不要害怕打破傳統的組件設計方式，例如重新思考下拉式選單、表格、單選按鈕等的設計。從簡單的元素開始，逐步添加細節和複雜度，直到達到理想的設計效果。

持續學習和提升設計能力

觀察優秀的設計作品，思考設計師做出了哪些你可能不會想到的決定。嘗試從零開始重建你喜歡的介面，不參考開發者工具，透過這個過程，你會發現許多設計技巧和細節。保持開放的心態，勇於嘗試，並不斷學習和提升設計能力。透過理解設計原則、建立設計系統，並從核心功能出發，逐步完善細節，你也可以創造出優秀的 UI 設計作品。

層級結構至上：UI 設計的關鍵

視覺層級結構指的是介面中各元素重要性的視覺呈現，它決定了哪些元素應該被優先注意到，哪些元素則應該退居次要地位。建立清晰的視覺層級結構是 UI 設計中最重要的原則之一，它能讓介面更容易理解、更易於使用，並且更美觀。

視覺層級結構的重要性

• 清晰易懂： 良好的視覺層級結構引導使用者目光，使其快速找到最重要的資訊，提升使用者體驗。
• 提升易用性： 清晰的層級結構讓使用者更容易理解介面各元素的功能和重要性，從而更有效地使用介面。
• 美觀設計： 當介面中所有元素都在爭奪注意力時，會顯得雜亂無章，而刻意弱化次要資訊，突顯重要元素，則能讓介面更美觀。

建立視覺層級結構的方法

• 尺寸差異： 重要元素使用較大的尺寸，次要元素使用較小的尺寸。但應避免過度依賴字體大小，可以使用字體粗細或顏色來區分層級。
• 顏色對比： 使用深色呈現主要內容，灰色呈現次要內容，淺灰色呈現第三層內容。並避免在彩色背景上使用灰色文字，應根據背景顏色選擇適當的顏色。
• 弱化次要資訊： 突顯主要元素的方法之一是弱化與其競爭的次要元素。例如，將非活動導航項目的顏色變淡，讓其退居背景。
• 標籤為輔助： 在呈現數據時，應盡量避免使用標籤，因為標籤會讓所有數據看起來同等重要。可以透過格式、上下文或將標籤與值合併來減少標籤的使用。
• 分離視覺層級和文件層級： 不要讓標題標籤 (例如 h1、h2) 的語義影響其視覺樣式。標題應該被視為支持性內容，而非主要的焦點。
• 平衡重量和對比： 粗體文字因為覆蓋更多表面積而顯得更重要。可以透過降低圖示的對比度來平衡其與文字的重量，或透過增加邊框寬度來強調低對比度的元素。
• 按鈕層級： 頁面上的每個按鈕都有其重要性層級，主要按鈕應明顯突出，次要按鈕應清晰但不過於突出，第三層按鈕應可被發現但不過於突兀。

其他注意事項

• 建立間距和尺寸系統： 預先定義好間距和尺寸的數值，可以避免在設計過程中反覆做出瑣碎決定，並確保設計的一致性。
• 不要過度使用網格系統： 網格系統雖然有用，但並非所有元素都應該具有流動的寬度。在某些情況下，固定寬度更為合適。
• 避免模糊的間距： 當元素之間沒有明顯的分隔符時，應確保組間距大於組內間距，以避免使用者混淆。
• 建立字體比例尺： 預先定義好字體大小的數值，可以避免設計中出現過多不同的字體大小，並確保設計的一致性。
• 使用高品質的圖片： 避免使用低品質的圖片，因為它們會影響設計的整體效果。可以聘請專業攝影師或使用高品質的圖庫照片。
• 確保文字對比度： 當文字疊加在圖片上時，應確保文字與背景之間有足夠的對比度，可以使用疊加層、降低圖片對比度或添加文字陰影來解決此問題。
• 不要忽視空白狀態： 當產品或功能沒有內容時，空白狀態是使用者第一個看到的畫面，應盡可能使其有趣且引人注目，並鼓勵使用者採取下一步行動。

總之，視覺層級結構是 UI 設計中最重要的原則之一，它能讓介面更容易理解、更易於使用，並且更美觀。透過理解和應用上述方法，你可以建立出具有清晰層級結構的優秀 UI 設計。

佈局與間距：創造清晰易懂的介面

佈局與間距在 UI 設計中扮演著至關重要的角色，它們直接影響著介面的清晰度、易用性和美觀性。良好的佈局與間距可以引導使用者目光，使其快速找到重要資訊，同時也能讓介面看起來更井然有序、更具專業感。

留白的重要性

留白，也稱為負空間，是指介面中元素之間的空白區域。留白並非無用的空間，它可以：

• 提升易讀性： 適當的留白可以讓文字更易於閱讀，減少視覺疲勞。
• 突顯重要元素： 留白可以讓重要元素更突出，吸引使用者目光。
• 創造呼吸感： 留白可以讓介面看起來更清爽、更舒適。

設計時應先給予元素過多的留白，然後再逐步減少，直到找到最佳的平衡點。 過於擁擠的介面會讓使用者感到壓迫，而適當的留白則能讓使用者感到放鬆和愉悅。

間距和尺寸系統

在設計介面時，應避免隨意調整元素的大小和間距。建立一個間距和尺寸系統可以：

• 確保一致性： 使用一致的間距和尺寸可以讓介面看起來更整齊、更專業。
• 提升效率： 使用預先定義好的數值可以節省設計時間，避免重複勞動。
• 建立視覺層次： 不同的間距和尺寸可以幫助建立視覺層次，引導使用者目光。

可以使用線性比例或模組化比例來建立間距和尺寸系統。 建議以 16px 作為基礎值，並使用其倍數或因子來建立其他數值。

網格系統的侷限性

網格系統可以幫助簡化佈局決策，但過度依賴網格系統可能會帶來一些弊端：

• 並非所有元素都適合流動寬度： 對於某些元素，例如側邊欄，固定寬度可能更為合適。
• 網格系統可能會限制設計的靈活性： 過於拘泥於網格可能會導致設計缺乏創意。

使用網格系統時應保持靈活性，不要讓它成為設計的枷鎖。

避免模糊的間距

當元素之間沒有明顯的分隔符時，應確保組間距大於組內間距，以避免使用者混淆。 例如，在設計表單時，標籤和輸入框之間的間距應大於輸入框和下一個標籤之間的間距，這樣才能清晰地顯示哪些元素屬於同一個群組。

其他注意事項

• 不要讓螢幕空間限制設計： 如果介面不需要佔滿整個螢幕，可以留白。
• 不要過度縮放元素： 過度縮放會影響圖片和圖示的品質。
• 注意使用者上傳內容的處理： 使用者上傳的圖片可能會影響佈局和視覺效果。
• 不要忽視空白狀態的設計： 空白狀態是使用者對產品的第一印象，應該精心設計。
• 減少邊框的使用： 過多的邊框會讓介面看起來雜亂。
• 跳脫框架思考： 不要被傳統的組件設計方式限制，嘗試新的設計方法。

總之，佈局與間距是 UI 設計中不可忽視的環節，它們直接影響著使用者體驗。透過理解和應用上述原則，可以創造出清晰易懂、美觀易用的介面。

文字設計：UI設計中不可或缺的元素

文字設計在UI設計中扮演著至關重要的角色，它不僅僅是信息的傳遞，更關乎使用者體驗、品牌形象和整體設計的美感。良好的文字設計可以提升易讀性、引導使用者目光，並有效地傳達信息和情感。

建立字體比例尺

大多數介面使用的字體大小過多，缺乏系統性，導致設計不一致且降低工作效率。建立字體比例尺可以解決這些問題。

• 避免線性比例尺： 線性比例尺在字體大小較小時，級距過大，而在字體大小較大時，級距又過於細微，不利於實際應用。

• 模組化比例尺： 可以使用比例，例如 4:5、2:3 或黃金比例 1:1.618 來計算字體比例尺。 但是模組化比例尺可能會產生小數值，並且級距可能過於有限，不適用於介面設計。

• 手工製作的比例尺： 最實用的方法是手工挑選字體大小，並確保相鄰值的差異至少在 25% 左右，以創造明顯的視覺區別。 以下是一個常用的比例尺範例：

  字體大小	用途
  12px	小型文字、輔助信息
  14px	正文、段落
  16px	主要文字、標題
  18px	次要標題
  20px	重要標題
  24px	大型標題、醒目信息
  32px	特大標題、頁面標題

• 避免使用 em 單位： 由於 em 單位是相對於當前字體大小的，因此嵌套元素的計算字體大小可能不是比例尺中的值，導致設計不一致。 應使用 px 或 rem 單位來確保字體大小符合比例尺。

選擇合適的字體

• 安全選擇： 對於 UI 設計，最安全的選擇是使用中性的無襯線字體，例如 Helvetica。也可以使用系統字體： -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
• 字體粗細： 一般來說，具有多種粗細的字體往往比粗細較少的字體更精緻。選擇字體時，可以將「樣式數量」（包括粗細和斜體變體）設定為 10 以上，以縮小選擇範圍。
• 易讀性： 選擇專為 UI 設計的字體，避免使用字間距過緊或 x 高度過低的字體作為主要 UI 文字。
• 參考流行字體： 流行的字體通常都是不錯的選擇。許多字體目錄都提供按流行度排序的功能，可以幫助你縮小選擇範圍。
• 學習優秀設計： 觀察你喜歡的網站使用的字體，從中學習和借鑑。許多優秀的設計團隊對字體都有獨到的見解，他們選擇的字體往往非常出色。

控制行長

過長的文本行會降低易讀性。為了獲得最佳的閱讀體驗，應將每行的字元數控制在 45 到 75 個字元之間。可以使用 em 單位來設定段落寬度，20-35em 可以滿足大部分情況的需求。

如果內容區域需要容納圖片或其他大型組件，應限制段落寬度，即使這意味著在同一個內容區域中使用不同的寬度。

基線對齊

當一行中包含多種字體大小時，應以基線對齊，而非垂直居中對齊。 基線對齊可以利用眼睛感知的對齊參考線，使文字看起來更簡潔、更清晰。

行高比例

行高應與字體大小和行長成比例。

• 行長： 較窄的內容可以使用較窄的行高（例如 1.5），而較寬的內容可能需要較寬的行高（例如 2）。
• 字體大小： 較小的文字需要較寬的行高，而較大的文字可以使用較窄的行高。

鏈接樣式

並非所有鏈接都需要使用顏色來突顯。在幾乎所有元素都是鏈接的介面中，可以使用更微妙的方式來強調鏈接，例如僅使用較粗的字體粗細或較深的顏色。對於次要鏈接，可以考慮僅在滑鼠懸停時添加下劃線或更改顏色。

文字對齊

• 左對齊： 大多數文字應左對齊。
• 居中對齊： 適用於標題或簡短的獨立文本塊。 避免將長文本居中對齊。
• 右對齊： 適用於數字，特別是包含小數點的數字列表。
• 兩端對齊： 適用於模擬印刷外觀的情況，例如線上雜誌或報紙。 使用兩端對齊時應啟用連字功能，以避免出現難看的單詞間距。

字間距

一般情況下，應信任字體設計師的設計，不要調整字間距。但在以下情況下，調整字間距可以改善設計：

• 緊縮標題： 對於字間距較寬的標題字體，可以適當減少字間距，以模擬專為標題設計的字體的緊湊外觀。
• 提升全大寫文字的易讀性： 全大寫文字由於所有字母的高度相同，使用默認字間距可能會導致難以閱讀。 可以適當增加全大寫文字的字間距，以提升易讀性。

總結

文字設計是 UI 設計中不可或缺的元素，它直接影響著使用者體驗和整體設計的美感。透過理解和應用上述原則，可以創造出易讀、美觀且有效的文字設計。

請注意： 以上內容僅基於您提供的資料來源和我們的對話歷史，並未包含任何外部信息。

色彩運用：打造令人印象深刻的UI

色彩在UI設計中扮演著至關重要的角色，它不僅僅是視覺上的裝飾，更能影響使用者情緒、引導使用者注意力，並建立品牌形象。良好的色彩運用可以提升UI的吸引力、可用性和整體設計感。

放棄十六進制，擁抱HSL

儘管十六進制和RGB是網頁上最常用的顏色表示格式，但它們並非最實用的。在十六進制或RGB中，視覺上非常相似的顏色在代碼中看起來卻截然不同。

HSL透過使用人眼直觀感知的屬性（色相、飽和度和亮度）來表示顏色，解決了這個問題。

• 色相 是顏色在色輪上的位置，它讓我們即使在顏色不完全相同的情況下也能將兩種顏色識別為「藍色」。色相以度數測量，其中0°是紅色，120°是綠色，240°是藍色。
• 飽和度 是指顏色的鮮豔程度。0%飽和度是灰色（無顏色），100%飽和度是鮮豔和強烈的。沒有飽和度，色相就無關緊要——當飽和度為0%時，旋轉色相並不會改變顏色。
• 亮度 是指顏色接近黑色或白色的程度。0%亮度是純黑色，100%亮度是純白色，50%亮度是給定色相的純色。

請注意不要將HSL與HSB混淆 ——HSL中的亮度與HSB中的亮度不同。在HSB中，0%亮度始終是黑色，但只有當飽和度為0%時，100%亮度才是白色。當飽和度為100%時，HSB中的100%亮度與HSL中的100%飽和度和50%亮度相同。

HSB在設計軟體中比HSL更常見，但瀏覽器只理解HSL，所以如果你是在為網頁設計，HSL應該是你的首選武器。

你需要的顏色比你想像的多

你無法僅用五個十六進制代碼構建任何東西。要構建真正的產品，你需要更全面的顏色集可供選擇。

一個好的調色板可以分為三類：

• 灰色: 文字、背景、面板、表單控件——介面中幾乎所有東西都是灰色的。
• 主要顏色: 大多數網站需要一到兩種顏色用於主要操作、活動導航元素等。這些顏色決定了網站的整體外觀——讓你想到Facebook就是「藍色」的顏色。
• 強調色: 除了主要顏色之外，每個網站都需要一些強調色來向使用者傳達不同的信息。

**你需要比你想像的更多的灰色——三到四種色調可能聽起來很多，但你很快就會希望你有一種比色調#2深一點但比色調#3淺一點的顏色。**實際上，你需要8-10種色調可供選擇（更多信息請參閱「預先定義你的色調」）。不要太多以至於你在色調#77和色調#78之間猶豫不決，但要足以確保你無需做出太多妥協。

純黑色看起來很不自然，所以從非常深的灰色開始，以穩定的增量逐步變淺到白色。

就像灰色一樣，主要顏色也需要多種深淺不一的色調（5-10種）可供選擇。超淺的色調可用作警報等元素的背景色，而較深的色調則適用於文字。

強調色可用於突顯新功能、強調不同的語義狀態，例如紅色用於確認破壞性操作，黃色用於警告信息，綠色用於突顯積極趨勢。

即使強調色在UI中使用得很少，你也需要為這些顏色準備多種色調。

如果你正在構建需要使用顏色來區分或分類相似元素（例如圖表上的線條、日曆中的事件或專案上的標籤）的產品，你可能需要更多的強調色。

總而言之，對於複雜的UI來說，需要多達十種不同的顏色，每種顏色有5-10種色調，這並不罕見。

預先定義你的色調

當你需要在你的調色板中創建一個顏色更亮或更暗的變體時，不要聰明地使用CSS預處理器函數（如「lighten」或「darken」）來動態創建色調。這樣你最終會得到35種略有不同的藍色，但它們看起來都一樣。

**你應該預先定義一組固定的色調，以便在工作中選擇。**那麼，你如何組合這樣的調色板呢？

• **首先選擇基色：**首先為你要創建的比例選擇基色——中間的顏色，你的淺色和深色調都基於這個顏色。
• **找到邊緣：**接下來，選擇你最深的色調和你最淺的色調。
• **填補空白：**一旦你有了基色、最深色和最淺色，你只需要填補它們之間的空白。

**沒有真正科學的方法來選擇基色，但對於主要顏色和強調色，一個好的經驗法則是選擇一個適合作為按鈕背景的色調。**重要的是要注意，這裡沒有真正的規則，比如「從50%亮度開始」之類的——每種顏色的表現都略有不同，所以你必須依靠你的眼睛來判斷。

最深的色調通常保留給文字使用，而最淺的色調可能用於為元素的背景著色。一個簡單的警報組件就是一個很好的例子，它結合了這兩種用例，所以它可以成為選擇這些顏色的好地方。

從與你的基色色相匹配的顏色開始，調整飽和度和亮度，直到你滿意為止。

對於大多數專案，每種顏色至少需要5種色調，如果你不想覺得太受限制，可能需要接近10種。九是一個很好的數字，因為它很容易劃分，並且讓填補空白變得更直接。讓我們將最深的色調稱為900，基色稱為500，最淺的色調稱為100。

首先選擇色調700和300，它們正好位於空白的中間。你希望這些色調感覺像是兩邊色調之間的完美折衷。這在比例尺中創造了四個空洞（800、600、400和200），你可以使用相同的方法填補這些空洞。

你最終應該會得到一組相當平衡的顏色，這些顏色提供了足夠多的選項來滿足你的設計理念，而不會讓人覺得受限。

**灰色呢？**對於灰色，基色並不那麼重要，但其他方面的過程是相同的。從邊緣開始填補空白，直到你得到你需要的東西。通過選擇一個顏色作為專案中最暗的文字來選擇你最深的灰色，並通過選擇一個適合用作微妙的灰白色背景的東西來選擇你最淺的灰色。

**這不是一門科學。**儘管很誘人，但你不能完全依賴數學來製作完美的調色板。像上面描述的這種系統性方法很適合讓你開始，但如果需要，不要害怕做一些小的調整。一旦你真正開始在你的設計中使用你的顏色，你幾乎不可避免地會想要調整一個色調的飽和度，或者讓幾個色調更亮或更暗。相信你的眼睛，而不是數字。

如果你能避免的話，儘量避免添加新的色調。如果你不努力限制你的調色板，那你還不如沒有顏色系統。

不要讓亮度扼殺飽和度

在HSL顏色空間中，隨著顏色越來越接近0%或100%的亮度，飽和度的影響就會減弱——在50%亮度下，相同的飽和度值看起來比在90%亮度下更鮮豔。

這意味著，如果你不希望給定顏色的淺色和深色調看起來褪色，你需要隨著亮度越來越遠離50%而增加飽和度。這很微妙，但像這樣的細節加起來很重要，尤其當顏色應用於UI的大部分區域時。

但是，如果你的基色已經高度飽和怎麼辦？如果飽和度已經是100%，你如何增加飽和度？

**利用感知亮度。**你認為這兩種顏色中哪一種更亮？黃色，對吧？事實證明，這兩種顏色在HSL中的「亮度」完全相同。

那麼，為什麼我們認為黃色更亮呢？事實證明，由於人眼感知顏色的方式，每種色相都具有固有的感知亮度。你可以通過將顏色的RGB分量代入以下公式來計算顏色的感知亮度：

在色輪上，黃色具有比藍色更高的感知亮度。有趣的是，感知亮度並不是簡單地從最暗的色相到最亮的色相線性變化——相反，存在三個獨立的局部最小值（紅色、綠色和藍色）和三個局部最大值（黃色、青色和品紅色）。

通常，當你想改變顏色的亮度時，你會調整亮度分量。雖然這樣確實可以使顏色變亮或變暗，但你通常會失去一些顏色的強度——顏色看起來也更接近白色或黑色，而不僅僅是更亮或更暗。

由於不同的色相具有不同的感知亮度，因此你可以通過旋轉色相來改變顏色的亮度。

• 要使顏色變亮，請將色相朝最接近的亮色相旋轉——60°、180°或300°。
• 要使顏色變暗，請將色相朝最接近的暗色相旋轉——0°、120°或240°。

當試圖為像黃色這樣的淺色創建調色板時，這會非常有用。通過隨著亮度的降低逐漸將色相旋轉到更接近橙色的方向，較深的色調會感覺溫暖而豐富，而不是暗淡和棕色。

當然，你也可以結合使用這兩種方法，通過調整色相和調整亮度來獲得一些亮度。

雖然這是一種在不影響顏色強度的情況下改變顏色亮度的好方法，但它最適合小劑量使用。不要將色相旋轉超過20-30°，否則它看起來會像完全不同的顏色，而不僅僅是更亮或更暗。

灰色不一定是灰色

根據定義，真正的灰色飽和度為0%——它根本沒有任何實際顏色。

但在實踐中，我們認為是灰色的許多顏色實際上是高度飽和的。 這種飽和度使一些灰色感覺冷，而另一些灰色感覺溫暖。

色溫。 如果你曾經購買過燈泡，你一定會在發出淡黃色光的「暖白光」燈泡和發出藍色光的「冷白光」燈泡之間做出選擇。

在使用者介面中飽和灰色也以類似的方式起作用。

• 如果你希望你的灰色感覺冷，請用一點藍色來飽和它們。
• 要讓你的灰色感覺更溫暖，請用一點黃色或橙色來飽和它們。

為了保持一致的溫度，不要忘記為更亮和更暗的色調增加飽和度。如果你不這樣做，這些色調與接近50%亮度的灰色相比會顯得有些褪色。

你希望將灰色飽和到什麼程度完全取決於你——如果你只是想稍微改變溫度，就加一點點，如果你希望介面強烈地傾向於某個方向，就加多一點。

無障礙設計不代表醜陋

為了確保你的設計無障礙，《網頁內容無障礙指南》（WCAG）建議普通文字（約18px以下）的對比度至少為4.5:1，較大文字的對比度至少為3:1。

對於典型的深色文字在淺色背景上的情況，滿足此建議非常容易，但當你開始使用顏色時，事情就變得更加棘手了。

翻轉對比度。 在彩色背景上使用白色文字時，你會驚訝地發現顏色通常需要多暗才能滿足4.5:1的對比度。

當這些元素不應該是頁面的焦點時，這可能會產生層次結構問題——深色背景會真正吸引使用者的注意力。

你可以通過翻轉對比度來解決這個問題。不要在深色背景上使用淺色文字，而是在淺色背景上使用深色文字。 顏色仍然在那裡幫助支持文字，但它不再那麼突兀，也不會干擾頁面上的其他操作。

旋轉色相。 比彩色背景上的白色文字更難的是彩色背景上的彩色文字。如果你曾經試圖為深色面板內的某些次要文字選擇顏色，你就會遇到這種情況。

如果你首先採用背景顏色，然後簡單地調整亮度和飽和度，你會發現很難在不非常接近純白色的情況下滿足建議的對比度。

你不希望主要文字和次要文字看起來一樣，所以你還能做些什麼？

由於某些顏色比其他顏色更亮，因此一種在不接近白色的情況下增加對比度的方法是將色相旋轉到更亮的顏色，如青色、品紅色或黃色。 這可以讓你更容易在保持文字色彩鮮豔的同時使其無障礙。

不要單獨依賴顏色

顏色可以是增強信息和使其更容易理解的絕佳方式，但請注意不要依賴它，否則色盲使用者將難以理解你的UI。

以這些指標卡為例。使用這種設計，紅綠色盲的人無法輕易分辨指標是變好了還是變壞了。

一個簡單的解決方案是也以其他方式傳達這些信息，例如添加圖標來指示變化是積極的還是消極的。

那麼像圖表這樣的東西呢，其中每條趨勢線都有不同的顏色？

在這種情況下，請嘗試依賴對比度而不是使用完全不同的顏色。色盲的人更容易區分明暗，而不是區分兩種不同的顏色。

始終使用顏色來支持你的設計已經表達的內容；永遠不要將其用作唯一的溝通方式。

利用光線、色彩和重疊元素營造深度

為了在設計中營造深度感，來源提供了一些技巧，包括模仿光源、利用色彩和重疊元素。

模仿光源

設計中的深度感可以通過模仿光源與物體的互動方式來實現。

• 光線來自上方： 在現實世界中，光線通常來自上方。因此，要讓元素看起來凸起或凹陷，就需要模仿光線照射在該形狀上的方式。
• 凸起元素： 為了讓按鈕看起來凸起，可以讓按鈕頂部邊緣比按鈕表面稍亮一些，並在底部添加一個小的深色陰影。
• 凹陷元素： 為了讓元素看起來凹陷，可以讓底部邊緣比元素表面稍亮一些，並在頂部添加一個小的深色陰影。

利用色彩

• 顏色越淺，感覺越近： 通常來說，淺色物體感覺離我們較近，深色物體感覺較遠。
• 純色陰影： 在平面設計中，可以使用短而垂直偏移的純色陰影來營造深度感，而無需模糊半徑。

重疊元素

• 創造圖層感： 通過重疊不同的元素，可以讓設計看起來有多個圖層，從而營造深度感。
• 圖片重疊： 重疊圖片時，可以為圖片添加一個與背景顏色相同的「隱形邊框」，避免圖片之間產生難看的衝突。

其他技巧

來源還提到了其他一些營造深度感的技巧，包括：

• 使用陰影來傳達高度： 陰影的大小和模糊半徑可以影響元素的高度感。
• 平面設計也可以有深度： 平面設計可以使用顏色和純色陰影來營造深度感。
• 不要過度使用邊框： 可以使用陰影、不同背景顏色或額外間距來代替邊框，以減少設計的雜亂感。
• 跳脫框架思考： 不要被傳統的組件設計方式所限制，嘗試創新的設計方式。

總之，通過理解光線、色彩和重疊元素的運用，以及參考來源提供的其他技巧，可以有效地在設計中營造出深度感。