應用介面設計原則實踐：Tim Corey 的比賽追踪器 UI
在這一課中，Tim Corey 帶領我們進入用戶界面設計階段，構建比賽追蹤應用程式。Tim 解釋這是我們開始想像應用程式外觀的時刻，即使在任何程式碼撰寫之前。 他強調界面設計幫助我們"鞏固想法"，並理解應用程式應如何總體運作。
在這篇文章中，我們將深入探討Tim的影片中的UI設計過程，以便理解他的思路以及他在編碼開始前規劃界面的方式。 透過遵循Tim的方法，我們可以學習如何創建一個清晰、直觀且符合用戶和開發者需求的應用界面。
開始UI設計
Tim開始時說用戶界面設計是應用開發中有趣的一部分，因為它讓我們看到應用程式粗略的樣子。他指出他使用白板或筆記簿來草繪表單，儘管他承認自己不是藝術家。Tim堅持圖畫不需要完美或成比例——它們只需展示應包含什麼和如何運作的基本想法。
Tim在此的重點是UI設計階段關於規劃，而非美觀。 他強調目標是識別需要哪些表單/頁面，每個應包含什麼。 此方法對於清晰度至關重要，有助於開發者和設計者在設計過程中保持一致。
從哪開始設計
Tim針對一個常見問題做出回答："我從哪開始？"他解釋說開始的位置並不重要。 如果您對應用程式的某一部分不確定，從您確定的部分開始。 一旦完成清晰的部分，您通常會對不確定的部分有更清晰的想法。
他還提到建立動能有幫助——在設計幾個表單後，您會感到自信並準備好繼續。 抱持這種心態，Tim選擇從比賽觀看表單開始。
此方法支援良好的用戶流，因為它鼓勵設計者和開發者專注於用戶如何從一個畫面導航到另一個畫面。
為什麼不先在Visual Studio中設計？
Tim解釋您不應在Visual Studio中的Windows表單生成器中開始設計。 他警告這樣做會產生兩個主要問題：
-
您浪費時間調整佈局和控制元件，而不是規劃設計。
- 您略過了設計過程，這意味著您可能會漏掉更好的選擇或留下隱藏的問題，因為不想重新做工作。
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總結影片時強調目標僅僅是確定所需的表單，並決定每個表單應該展示什麼。 他說一旦設計好UI，下一步就是邏輯計劃，他會計劃UI元素如何連接到數據模型和後端。
Tim的UI設計過程顯示設計應用介面是關於規劃、一致性和清晰度——而非早期創建完美的視覺效果。 這種方法幫助開發者和設計者保持一致，並確保最終的應用程式易於用戶導航和使用。
免費開始使用
免費開始使用
預約免費現場演示
無需信用卡或創建帳戶
