產品經理在製作移動端原型的時候，經常會需要製作單選按鈕。這種單選按鈕的交互效果是這樣的：
如關閉通知後面的按鈕，常見於設置頁面。這種狀態下是開啓/選中狀態，點擊之後按鈕的顏色發生變化，並且內部的小圓位置發生變化。
這個交互效果非常常見，這裏給大家總結了3種製作的方法，這3種方法也可以應用到其他相似的案例中，因爲學會某一個案例不是我們的目的。我們的目的是通過案例的學習，學會舉一反三，應用到工作中。
好了，前面說了幾句題外話，現在正是來看看有什麼方法來製作這個交互。
首先我們先把看到的界面搭建出來，不同的方法看到的界面及元素都是一樣的。頁面搭建比較簡單，這裏不再贅述。
顯示/隱藏的方法
這個方法需要我們在現有的按鈕下方再放置一個關閉狀態的按鈕。選中關閉狀態的按鈕，將其置於底層或者開啓狀態按鈕的下一層即可。
接下來的設置比較簡單，點擊“開”的時候，將“關”顯示出來並置於頂層，將“開”隱藏。反之在點擊“關”的時候，將“開”顯示出來並置於頂層，將“關”隱藏。
這一種方法下的單選按鈕的交互效果就實現了。
動態面板的方法
還有一種方法是我們也很常用的，就是用動態面板去進行設置。
首先我們需要簡歷一個動態面板。這裏可以直接將“開”按鈕進行轉化。選中“開”按鈕，鼠標右鍵菜單選擇“轉化爲動態面板”即可完成動態面板的轉化。
因爲按鈕的狀態有“開”和“關”兩種，所以這裏需要再添加一個狀態，分別將兩個狀態頁命名爲“開”和“關”。
打開“關”的狀態頁。將按鈕“關”製作於該狀態頁中。
在“開”狀態頁中，點擊“開”按鈕的時候，將狀態切換到“關”。同理，點擊“關”按鈕的時候，將狀態切換到“開”。
交互樣式和移動的方法
最後一種方法稍微複雜一些，跟前面兩種方法的區別在於，沒有兩組按鈕，交互主要是在一組按鈕上完成。
通過上面的描述，我們清楚地知道，這個交互效果主要有兩個，一個是按鈕顏色發生變化，一個是內部小圓的位置發生變化。
按鈕顏色發生變化，我們可以通過交互樣式設置中的選中樣式來實現。這裏爲了跟交互樣式的設置保持一致，先將按鈕的顏色設置爲未選中時的顏色，也就是灰色。
分別設置按鈕的底部和頂部小圓的選中樣式。
別忘記將默認選中狀態選中。如果你做的按鈕的初始狀態是關閉狀態，則不需勾選這一個選項，根據做的原型的實際情況去選擇。
鼠標單擊時，設置按鈕的選中狀態爲切換選中即可讓顏色進行變化。
最後設置小圓的位置就可以完成這個交互設置了。
先記錄一些小圓的位置。“開”狀態下圓的位置爲：254，143；“關”狀態下圓的位置爲：239，143。位置的移動可以用絕對位置，也可以用相對位置，這裏使用絕對位置。
這裏需要增設用例條件，當按鈕狀態爲選中和未選中的時候，移動小圓到相對應的位置。
這個案例看似是一個簡單的單選按鈕/開關的交互案例，但是我們平時是非常常見的。這個案例的通用情況是，狀態發生變化，如這裏是開、關/選中、未選中兩種狀態。下次在看到狀態發生變化的情況，可以嘗試用這三種方式進行製作。
最後留一個問題和大家一起討論，最後一種方法設置的方法較爲複雜，實現的效果與前兩種一致，那麼這種方法是否沒有存在的必要？有任何意見的話歡迎一起留言討論。