DIV CSS 佈局教程網

 
那麼，同樣是icon類的按鈕，為什麼有的表狀態，有的表動作？

分析兩類按鈕的使用場景：
場景一：聲音開關的按鈕

 
場景：這組按鈕首先表示當前的狀態（聲音是開著的，還是關著的），點擊以後切換到另一個狀態。
分析：聲音在視覺的表現上不能直接感知，因此需要一個圖形化的icon表示當前的狀態；左側的圖標表示當前音樂是開啟的，點擊後關閉聲音。如果說只表示當前狀態，那麼點擊後會產生什麼操作就比較難猜，沒有一個明確的引導。

場景二：視頻播放停止的按鈕

 
場景：這組按鈕不表示當前的狀態，而是表示用戶可以進行的操作，跟第一組的表意是反著的。
分析：畫面是否在播放是可以直接在屏幕上感知的，因此不需要再講述當前是怎樣的狀態，而是提示下一步可以進行的操作；

討論一下，什麼樣的體驗和表現才是比較好的呢？

1） 其實，如果先說狀態，再說動作，用戶會更明白，比如一個頁面的聲音狀況可以通過一個icon說當前是怎樣的，然後再通過一個icon來說你可以怎麼樣；
具體的表現就是“當前是怎麼樣的+可以怎麼樣”

2） 這樣再看來，其實場景一是省掉了後半句（可以怎麼樣），場景二省掉了前半句（當前是怎麼樣的），如果實在是界面上位置稀缺，不能像把兩種icon都做出來，那是不是可以先判斷在當前的場景下用戶是更需要知道“可以怎樣”，還是“當前是怎樣的”。

3） 由此再看其他場景中的設計，比如下拉列表

  在前面的部分表述了當前的狀態，向下的箭頭按鈕則表示了可以進行的操作，這個就比較接近於完全展現“當前是怎麼樣的+可以怎麼樣”。

4） 生活中，類似“可以怎麼樣”的場景多用於電器/物品的操作，有極強的狀態提示，所以比較關心的是“可以怎麼樣“。例如插板的開關，有按下去的效果。

按鈕來操作是不是更明白一些呢？大家是否有不同看法。