Radio buttons 是 UI 設計中的基本東西，讓使用者從多個選擇中進行單選。Radio buttons 的歷史反映了從早期電腦到現在的手機時代的 UI 設計的演變。在這篇文章，我想談一下 radio buttons 的起源和發展。雖然網上的資訊不多，但我在 Stack Overflow 上找到了一個有趣的討論，引發了我對 radio buttons 發展的好奇心。
Radio buttons: 名字背後的故事
首先，我們來解釋為什麼單選按鈕的英文叫做「radio button」。就像我在前面提到的，有人在 Stack Overflow 對這個問題發表了不錯的答案，原因是它們就像舊汽車收音機上的按鈕，按下一個按鈕會導致其他按鈕彈起。在 UI 設計裡面，單選按鈕的概念是相同的——單選按鈕只能讓一個選擇，一旦你按下它，其他選擇就被取消了。
有趣的是，舊汽車收音機上的按鈕不一定是圓形的，至少根據我在網路上找到的照片不是這樣。其實我有一個有關這些舊汽車收音機的小時後記憶。我爺爺以前有一台 Fiat 126p，然後收音機的運作方式是一樣的，但形狀不是圓形，而是長方形的。那麼為什麼單選按鈕是圓形的呢？看起來 radio button 這個名稱跟他的形狀沒有關係。我檢查了一些早期個人電腦的 UI尋找解答。我看了許多早期個人電腦的 YouTube 視頻，從 Xerox Alto 到 Windows 95，至少試圖理解哪台個人電腦是首次介紹圓形單選按鈕的。
Radio buttons 的歷史
那麼我們從 1981 年的 Xerox Star 開始，它的 UI 設計已經擁有了類似單選按鈕的概念。雖然不是圓形的，但運作的部分有「單選」的概念。但因為它的形狀時長方形的，我們要繼續看下去。
兩年後，蘋果開發了自己的 Apple Lisa OS。當時 Apple Lisa OS 擁有自己的 GUI，然後同樣採用了長方形的 radio buttons。因為直到 1995 年，Windows 才有了 GUI，所以我接下來想到的是 Macintosh。中了！看起來在 1984 年，Macintosh 的操作系統是首次採用了圓形的 radio buttons。你可以在此 YouTube 的影片看到早起 Mac OS 的 radio buttons (7:54)，以下也有 iframe。
早起 Mac OS 的 radio buttons, 來源: Computer Clan
在 80 年代，除了 NeXTSTEP、蘋果和 Windows 之外，所有其他操作系統都使用長方形的 radio buttons。也許蘋果的設計師想要分清楚 radio buttons 和 checkboxes 的概念，才選擇圓形的形狀。後來，Windows 的設計師也決定了用圓形，所以 Windows 1.0、Windows 2.0 和 Windows 3.0 都使用了圓形的 radio buttons，你可以看在此 Youtube 的影片觀看看 Windows1.0 的 UI 介紹 (1:11)，以下下也有 iframe。所以我猜想，蘋果的 UI 設計師想要分清楚 radio buttons 和 checkboxes，決定用不同的形狀。如果你有更好的想法，請在下面的評論區分享！
Windows1.0 的 UI 介紹, 來源: Computer Clan
那我應該用什麼形狀設計我的 radio buttons？
雖然從 Macintosh 的開發已經過了快半個世紀，但我發現即使今天，一些人還是在他們的網頁設計中搞混 radio buttons 和 checkboxes 的正確的形狀。我認為除非你要設計一個客製化的 UI 的元素，像開關元件 (toggle switch) ，你的 radio buttons 應該要用圓形的形狀才對。過去 50 年來，世界上大多數人都習慣了圓形的 radio buttons，所以請不要將它們設計為方形！