Refactoring UI
從零開始建構 UI 設計 這個詞彙「從零開始」可以從幾個不同的角度來解讀,以下將根據提供的資料來源,探討 UI 設計從零開始的不同面向: 從功能出發,而非佈局 如同先前討論過的,在設計新的 app 或功能初期,應著重於核心功能的呈現,而非糾結於細節和佈局。設計 app 的外殼,例如導航列、側邊欄等等,在尚未設計出一些功能之前,並不足以提供決定導航運作方式的資訊。從實際的功能片段開始,例如航班預訂服務中的「搜尋航班」功能,先設計出必要的欄位和按鈕,再逐步完善細節。 從低擬真度開始,細節可以稍後再處理 在設計初期,不要過於糾結於字體、陰影、圖示等細節,這些細節最終會很重要,但在初期階段並非重點。使用低擬真度的工具,例如紙筆或粗線條的筆刷,快速探索不同的佈局想法。先以灰階設計,使用間距、對比和尺寸來建立視覺層次,之後再添加顏色。不要過度投資於草圖和線框圖,這些只是探索想法的工具,在做出決定後就可以捨棄。 逐步設計,不要一次設計所有功能 在開始實作之前,不需要設計出 app 的所有功能,事實上,最好以短週期的方式工作,先設計出下一個要建構的功能的簡化版本,完成後再進行實作。在可實際使用的介面中解決設計問題比僅憑想像預測所有邊緣情況更容易。避免在設計中暗示尚未準備建構的功能,例如,在評論系統中設計附件功能,但實際上建構附件功能比預期困難得多,導致整個評論系統被擱置。先建構簡單版本,永遠有可發佈的成果,之後再逐步添加更進階的功能。 從建立設計系統開始 為字體大小、字體粗細、行高、顏色、邊距、填補、寬度、高度、陰影、邊框半徑、邊框寬度、不透明度等建立設計系統。預先定義好這些系統,可以避免在設計過程中反覆做出同樣的瑣碎決定,節省決策疲勞,並確保設計的一致性。 從空白畫布開始,逐步添加元素 不要被現有的設計工具或框架限制,從空白畫布開始,自由地探索各種可能性。不要害怕打破傳統的組件設計方式,例如重新思考下拉式選單、表格、單選按鈕等的設計。從簡單的元素開始,逐步添加細節和複雜度,直到達到理想的設計效果。 持續學習和提升設計能力 觀察優秀的設計作品,思考設計師做出了哪些你可能不會想到的決定。嘗試從零開始重建你喜歡的介面,不參考開發者工具,透過這個過程,你會發現許多設計技巧和細節。保持開放的心態,勇於嘗試,並不斷學習和提升設計能力。透過理解設計原則、建立設計系統,並從核心功能出發,逐步完善細節,你也可以創造出優秀的 UI 設計作品。 層級結構至上:UI 設計的關鍵 視覺層級結構指的是介面中各元素重要性的視覺呈現,它決定了哪些元素應該被優先注意到,哪些元素則應該退居次要地位。建立清晰的視覺層級結構是 UI 設計中最重要的原則之一,它能讓介面更容易理解、更易於使用,並且更美觀。 視覺層級結構的重要性 清晰易懂: 良好的視覺層級結構引導使用者目光,使其快速找到最重要的資訊,提升使用者體驗。 提升易用性: 清晰的層級結構讓使用者更容易理解介面各元素的功能和重要性,從而更有效地使用介面。 美觀設計: 當介面中所有元素都在爭奪注意力時,會顯得雜亂無章,而刻意弱化次要資訊,突顯重要元素,則能讓介面更美觀。 建立視覺層級結構的方法 尺寸差異: 重要元素使用較大的尺寸,次要元素使用較小的尺寸。但應避免過度依賴字體大小,可以使用字體粗細或顏色來區分層級。 顏色對比: 使用深色呈現主要內容,灰色呈現次要內容,淺灰色呈現第三層內容。並避免在彩色背景上使用灰色文字,應根據背景顏色選擇適當的顏色。 弱化次要資訊: 突顯主要元素的方法之一是弱化與其競爭的次要元素。例如,將非活動導航項目的顏色變淡,讓其退居背景。 標籤為輔助: 在呈現數據時,應盡量避免使用標籤,因為標籤會讓所有數據看起來同等重要。可以透過格式、上下文或將標籤與值合併來減少標籤的使用。 分離視覺層級和文件層級: 不要讓標題標籤 (例如 h1、h2) 的語義影響其視覺樣式。標題應該被視為支持性內容,而非主要的焦點。 平衡重量和對比: 粗體文字因為覆蓋更多表面積而顯得更重要。可以透過降低圖示的對比度來平衡其與文字的重量,或透過增加邊框寬度來強調低對比度的元素。 按鈕層級: 頁面上的每個按鈕都有其重要性層級,主要按鈕應明顯突出,次要按鈕應清晰但不過於突出,第三層按鈕應可被發現但不過於突兀。 其他注意事項 建立間距和尺寸系統: 預先定義好間距和尺寸的數值,可以避免在設計過程中反覆做出瑣碎決定,並確保設計的一致性。 不要過度使用網格系統: 網格系統雖然有用,但並非所有元素都應該具有流動的寬度。在某些情況下,固定寬度更為合適。 避免模糊的間距: 當元素之間沒有明顯的分隔符時,應確保組間距大於組內間距,以避免使用者混淆。 建立字體比例尺: 預先定義好字體大小的數值,可以避免設計中出現過多不同的字體大小,並確保設計的一致性。 使用高品質的圖片: 避免使用低品質的圖片,因為它們會影響設計的整體效果。可以聘請專業攝影師或使用高品質的圖庫照片。 確保文字對比度: 當文字疊加在圖片上時,應確保文字與背景之間有足夠的對比度,可以使用疊加層、降低圖片對比度或添加文字陰影來解決此問題。 不要忽視空白狀態: 當產品或功能沒有內容時,空白狀態是使用者第一個看到的畫面,應盡可能使其有趣且引人注目,並鼓勵使用者採取下一步行動。 總之,視覺層級結構是 UI 設計中最重要的原則之一,它能讓介面更容易理解、更易於使用,並且更美觀。透過理解和應用上述方法,你可以建立出具有清晰層級結構的優秀 UI 設計。 ...