應用程式介面設計原則的實踐：Tim Corey的競賽追蹤器介面設計

開始 UI 設計

Tim 開始說明使用者介面設計步驟是應用程式開發中有趣的一部分，因為它讓我們看到應用程式的粗略版本。 他指出，他使用白板或寫字板來草擬表單，儘管他承認自己不是藝術家。 Tim 堅持畫圖不需要完美或成比例——只需顯示表單應包括哪些基本想法及其運作方式。

Tim 的主要觀點是，UI 設計階段關於計劃，而非美觀。 他強調目標是識別所需的表單/頁面以及每個頁面應該包含的內容。 這種方法對於清晰性至關重要，有助於開發者和設計者在設計過程中保持一致。

從哪裡開始設計

Tim 提出一個常見問題："我應該從哪裡開始？" 他解釋說，您從哪裡開始並不重要。 如果您對應用程式的一部分不確定，請從您確定的部分開始。 一旦您完成了清晰的部分，您通常會對不確定的部分有更好的想法。

他還指出建立動能有助於設計——設計了幾個表單後，您會感到自信並準備好繼續。 有了這種心態，Tim 選擇從比賽查看器表單開始。

這種方法支持良好的使用者流程，因為它鼓勵設計者和開發者專注於使用者如何從一個螢幕導航到另一個螢幕。

為什麼不先在 Visual Studio 中設計？

Tim 解釋說，您不應該在 Visual Studio 內部的 Windows Form Builder 中進行設計。 他警告說，這樣做會造成兩個主要問題：

1. 您浪費時間調整佈局和控件，而非計劃設計。

2. 您省略了設計過程，也就是說您可能會錯過更好的選擇或留下隱藏的問題，因為您不想重做工作。

Tim 說在紙上設計可以讓您擦除、嘗試新想法，甚至測試可能成為偉大解決方案的"傻"概念。 這是一個 UI 設計中的關鍵原則，因為它讓我們專注於應用程式應該做什麼，而不是它在第一版中的外觀。

比賽查看器表單

Tim 揭示他的第一個粗略 UI：比賽查看器表單。 他解釋這個表單將顯示有關特定比賽的所有資訊。

建立比賽表單

隨後，Tim 轉至建立比賽表單，他表示在比賽查看器之後可能需要該表單。

建立隊伍表單

接下來，Tim 設計建立隊伍表單，包括：

• 隊伍名稱

• 選擇隊伍成員

• 新增新成員

Tim 強調表單之間一致性的重要性。 他說隊伍名稱的佈局應與比賽名稱的佈局相匹配，以創造一致的設計。

他還解釋此表單允許使用者從清單中新增現有隊伍成員，或直接在表單中建立新成員。 Tim 表示他更喜歡在同一表單中進行成員建立，避免深度導航（即開啟多個表單）。

他解釋新增多個層次會令人困惑且速度慢。 因此，他選擇保持設計緊湊並更使用者友好。 這支持簡單且直觀的應用程式介面，減少使用者完成任務所需的時間。

建立獎品表單

Tim 的建立獎品表單很簡單。 它包括：

• 獲得位置

• 位置名稱

• 獎品金額

• 獎品百分比

Tim 指出最後兩個欄位中只能同時使用一個（即金額或百分比）。 他說表單稍後需要驗證邏輯，但就設計目的而言，佈局是簡單明了的。 這是一個好例子，顯示了設計原則如何幫助建立精緻且功能齊全的介面。

比賽儀表板表單

最後，Tim 討論比賽儀表板表單，他承認對此並不完全滿意。 他解釋了挑戰： Windows Forms 應用程式通常有一個打開的主表單。 如果主表單關閉，應用程式便會結束。

這對於比賽追蹤器來說是個問題，因為使用者可能希望同時打開多個比賽。 Tim 最初考慮如果沒有比賽存在則自動打開建立比賽表單。但他意識到關閉建立比賽表單將結束應用程式。

於是 Tim 設計了一個中央儀表板表單，隨時保持開啟。 這個儀表板允許使用者：

• 查看現有比賽

• 載入比賽

• 建立新比賽

Tim 解釋說，即使其他表單被關閉，儀表板仍會保持開啟。 它充當應用程式的中央導航點。儘管他承認它可能看起來"愚蠢的簡單"，但他表示它有效，且可能稍後新增設計元素或動畫使其更具視覺吸引力。

結論

Tim 透過影片結束強調目標僅僅是識別所需的表單並決定每個表單應顯示的內容。 他說一旦使用者介面設計完成，下一步就是邏輯規劃，他將計劃使用者介面元素如何連接到資料模型和後端。

Tim 的使用者介面設計過程顯示，設計應用程式介面關於計劃、一致性和清晰性，而不是早期創造完美的視覺效果。 這種方法幫助開發者和設計者保持一致，確保最終應用程式容易讓使用者導航和使用。