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

在這堂課中，Tim Corey 帶領我們通過建立一個比賽追蹤器應用程式的使用者介面設計階段。Tim 解釋說，這是我們開始想像應用程式外觀的時刻，即便在任何程式碼撰寫之前。 他強調使用者介面設計幫助我們"穩固想法"並理解應用程式應如何整體運作。

在這篇文章中，我們將深入觀察 Tim 的影片中的使用者介面設計過程，以便了解他的思路以及他在開始編碼之前如何計劃介面。 通過遵循 Tim 的方法，我們可以學習如何建立清晰、直觀且符合使用者和開發者需求的應用程式介面。

開始 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 也建議下拉選單應自動預設為當前輪次。 他承認他尚未知道如何實現，但他將其作為一個強有力的設計理念加以備註。 此功能將改善使用者體驗（UX），因為它減少了獲取相關資訊所需的時間。

得分區域

在表單的右側，Tim 設計了一個區域供使用者輸入對決的得分。他解釋該表單將顯示兩支比賽隊伍及其得分。 如果比賽尚未進行，得分框將為空。 在輸入得分後，使用者將單擊"得分"按鈕以完成對決。

Tim 注意到得分按鈕可能需要一個更好的標籤或佈局，以使其工作原理更明確。 這是一個範例，說明設計元件應清楚地向使用者傳達目的。

建立比賽表單

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

比賽名稱和參賽費用

表單以基本欄位開始：比賽名稱和參賽費用。 Tim 解釋參賽費用是每支隊伍參加的成本。

新增隊伍

接下來，Tim 設計了一個隊伍下拉選單和一個新增隊伍按鈕。 這允許使用者選擇現有隊伍並將其新增到比賽中。

他還包含了一個建立新隊伍的連結，供當隊伍尚不存在時使用。Tim 解釋說他希望"建立新隊伍"行動在視覺上不同，以便使用者明確了解他們是在建立一支隊伍，而不僅僅是在新增。 這是一種重要的設計實踐，確保使用者能輕鬆導航並避免混淆。

獎品

Tim 指出比賽還需要獎品，所以他新增了一個建立獎品按鈕。 他解釋每場比賽的獎品都是獨特的，所以它們每次都會重新建立而非重用。

刪除選定按鈕

在每個列表框（隊伍和獎品）旁，Tim 新增了一個刪除選定按鈕。 他解釋使用者需要一種方法來刪除隊伍或獎品而不需重新開始表單。 這支持更好的使用者流程，並使應用程式更易於使用。

缺少的輪次

Tim 注意到有一個缺失的部分：輪次。 他解釋輪次是在程式碼中根據隊伍數生成的，因此使用者不需輸入它們。 因此，輪次不包含在表單中。

建立隊伍表單

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

• 隊伍名稱

• 選擇隊伍成員

• 新增新成員

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

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

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

建立獎品表單

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

• 獲得位置

• 位置名稱

• 獎品金額

• 獎品百分比

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

比賽儀表板表單

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

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

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

• 查看現有比賽

• 載入比賽

• 建立新比賽

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

結論

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

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