|
四、軟體以及網站中的例子
軟體或網站界面顯然不具備可觸摸的特點，不過我們的設計師也儘量會模擬出類似現實中物品的可以操作的形狀和質感。
「圖5」
播放器常用的UI。點擊中間的“播放”與“暫停”鍵即可切換操作。可以看出，這裡忽略了狀態的表現，我無法直觀的看到現在是播放還是暫停的狀態。原因很簡單，就像開關電燈一樣，影片的打開與關閉是可以直接感知到的，不需要專門的狀態提示。
「圖6」
再來看列表的視圖切換。圖上箭頭所示“切換到大圖”功能也是此類應用，忽略了狀態的表現。因為“切換到大圖”動作執行後，界面的狀態會明顯的改變（大圖模式），不需要專門的狀態來標識。
再看另一種情況
音樂播放器中的隨機播放。因為“隨機”與“按順序”播放並不容易直觀察覺，因此狀態需要明確標識。而動作本身由於並不是核心功能被弱化了，僅僅依賴界面功能區塊劃分來表示此處的可操作性。
「圖8」
還是音樂播放器，這次不同的是線性的狀態表示。音量的大小並不只是“開、關”兩個狀態那麼簡單，而是由小到大線性變化的。上面那個UI通過左右兩個喇叭的形狀很好的表達了音量大小的兩端，中間的圓鈕既是動作的操縱桿又是音量大小的刻度標識。因為它和左側很好的連接在一起形成水槽效果，填滿部分的長短再一次反映了音量的大小，非常巧妙。而下面那個UI只在左側放了音量大小標識，雖然不同因量大小時左側圖標也會相應改變，但相比之下初次使用會難理解很多。
「圖9」
上面是某帳戶管理的UI，將狀態和操作（動作）明顯的分兩列標識，雖然顯得有些囉唆，但也清楚的表達出了應有的含義。
最後我們來看一個手機界面的應用。
「圖10」
倣照物理撥動開關的質感與色彩表達，很好的”動作“與”狀態“結合的例子。這樣的設計你還會犯錯麼？
五、小結
前面作了很多應用的舉例，那麼到底怎樣才能做好”動作“與”狀態“結合的設計呢？
1、分離狀態與動作的表示（如圖9）。最直接，産生歧義的可能最小，但可能會佔用大量空間，以及造成資訊冗余。
2、忽略狀態，突出動作（如圖6）。當狀態無需標識也能直觀識別時適用。
3、忽略動作，突出狀態（如圖7）。當動作操作已經被劃分指定區域，可以預期其可操作性時適用。
4、具象與倣生（如圖10）。當與現實物品建立感官聯繫時，人們的學習成本會大大降低。此類運用不好定義其適用範圍，留給大家探討吧。
|
