UI UX design-按鈕設計有6個狀態須知

“在應用產品的UI UX設計中“按鈕”是絕對不可或缺的設計元素，但其實在不同裝置與設備的使用情境中，按鈕所呈現的其他狀態也會有所不同，所以按鈕設計到底有哪些狀態，就是本篇想分享的重點～

為什麼要區分“按鈕狀態”？

按鈕的其他狀態顯示，可以讓用戶知道這個按鈕正在進行哪些操作，同時讓使用者“放心”這個按鈕確實正在執行使用者想要完成的動作。你可以想像當你在一個產品介面上點擊任一按鈕時，完全沒有任何的視覺＆訊息回饋，當下的你會不會有“我到底剛剛有沒有點擊到這按鈕？”的疑慮產生。（縱使這個按鈕其實真的正在作業）這也便是“按鈕狀態”設計的意義了。

按鈕有6個狀態

• Normal-正常狀態
• Hover-懸停狀態
• Pressed-點擊狀態
• Loading-載入狀態
• Disabled-禁用狀態
• Focus-聚焦狀態

1.正常狀態

應用場景：任何設備＆裝置上的UI按鈕靜置狀態。

是按鈕最一開始的默認狀態，也是按鈕還沒有任何其他效果的狀態。

2.Hover-懸停狀態

應用場景：PC、筆電、任一需要“游標”才能操作的UI按鈕狀態。

運用在“非觸控”並且需要游標輔助點擊的使用介面上，凸顯當前游標正在按鈕上的引導狀態。

3.Pressed-點擊狀態

應用場景：任何設備＆裝置上的UI按鈕點擊狀態。

點擊狀態是按鈕與用戶間的互動回饋，透過點擊效果能讓用戶感受到確切執行了“點擊”的動作。

4.Loading-載入狀態

應用場景：任何設備＆裝置上的UI按鈕載入狀態。

載入狀態一般都是用在需要載入某些資料並且尚未完成時，無法繼續點擊按鈕的狀態。

5.Loading-載入狀態

應用場景：任何設備＆裝置上的UI按鈕禁止點擊狀態。

與載入狀態不同，禁用狀態直接處於無法點擊的狀態，但可能因為完成某些操作恢復為正常狀態。

6.Focus-聚焦狀態

應用場景：電視、智慧電視盒、任一需要“遙控器”才能操作的UI按鈕焦點狀態。

使用“非觸控”的應用產品，需要依賴遙控鍵移動的介面，凸顯當前“已選取中”的按鈕焦點狀態。

總結

以上就是在不同設備＆裝置上使用應用產品時，UI的按鈕設計應該要具備的6個狀態，可以幫助我們的產品使用體驗更加完善！

感謝你們的瀏覽閱讀，如果你覺得這篇文章寫得不錯並且有幫助到你，希望你能給我一點「拍手鼓勵」，也歡迎在下方留言讓我知道你的想法，我會持續分享更多實用＆實戰的經驗方式給你們。

若想隨時掌握最新設計教學可關注我的IG:jielin.designer

拍手小秘訣： 只要將滑鼠(或手指)持續按著不放手掌的icon，就能夠連續拍手囉，試試看吧！