視覺上越來越扁平,互動上越來越擬物

發表於2016-03-03

最近在知乎上碰到一個問題:扁平化設計中,按鈕是如何讓人有點選慾望?

先來看如下案例 ▼

看了上面的案例,我相信大部分人是會感覺左邊的更有點選慾望的。

那麼再來看下整體的案例:

等我們看了第二個案例的時候又會感覺右邊的更有點選慾望了。

這是為什麼呢?

其實剛才的問題等於「如何設計出優秀和有效的行為召喚」。

第一個介面我們覺得扁平按鈕不夠突出,於是它就做不到有效的行為召喚。但第二個介面我們感覺雖然也是扁平化但是它做到了有效的行為招呼。

出現這個問題的原因其實是全域性設計有問題。也就是說介面是一個整體,當我們單獨拿出其中的一部分來看的話的確給使用者的感官體驗造成的結果不同。

那我們在做設計的時候就要注重全域性設計,也就是說介面的整體設計。

 

  • 元素對比:顏色、大小、位置
  • 視覺平衡:整個介面的平衡性
  • 元素層級:頁面之中個個板塊和各個元素的層級關係
  • 互動反饋:填寫校檢;懸停狀態
  • 情感化:增加一定的趣味性

做到以上這些,無論是擬物還是扁平都可以喚起使用者的點選慾望。

但現在的趨勢上來說是:視覺上越來越扁平,互動上越來越擬物。

怎麼解釋呢?

很多同學的理解是視覺風格上擬物是加陰影加高光,進一切可能還原到真是世界中物質所表現的樣子,例如像下面的ICON ▼

(圖片來源於網路)

我們極盡可能的去模擬。IOS6之前的擬物風格無疑是個偉大的成就。試想當人們第一次用到可觸控的圖形使用者介面的時候,擬物風格可以很輕鬆的讓使用者從現實生活中獲得的經驗移植到擬物的圖形介面上。比如說一個打電話的視覺介面,第一次使用Iphone的使用者也會知道,那個圖示應該是打電話的。

那為何扁平化的介面現在大行其道,擬物風格漸行漸遠呢?

一方面是絕大多數使用者已經過了第一代智慧手機的圖形介面的洗禮,很好的辨認手機的功能。

另一方面,扁平化在視覺表達層面上會更進一步去分散使用者對資訊的吸引力。

扁平化弱化了視覺上對使用者視覺的吸引,突出了資訊的重要性。在保證資訊重要性的同時還兼具形成了視覺風格。扁平化不是意味著沒有投影,沒有高光,沒有漸變,更多的是一切視覺元素是資訊的襯托和突出。

回到上面的問題 ▼

上面的介面中左邊的擬物風格我們更多的看到的是黑色的鍵盤,上方的標題欄和右上角的紅色按鈕,資訊則放到了最後一個層級。

右側的介面我們可以很明顯的看到右上角的紅色按鈕,緊接著我們看到的是介面中的資訊。資訊層級放在了除了紅色按鈕外的最高一級。

這就很好的印證了左邊的視覺風格過度吸引了使用者的注意力,而右側的風格很好的保持了紅色按鈕的突出作用外兼併突出了整個資訊的吸引力,介面完全是資訊的配角角色。

扁平化會更考驗設計師的層級架構的理解能力,配色和佈局能力,而不單單考驗設計師的繪畫能力。

扁平化使息層級的重要性越來越在視覺上體現出來,但互動上則體現出了越來越擬物化的趨勢。

互動的擬物化也就是說通過空間佈局來完成互動,以便於讓使用者更懂得介面中發生的變化。比如谷歌的Material design引入了Z軸和陰影還有物理運動的曲線。

當我們做一個比較細膩的介面動畫時候,我們需要花更多的時間去考慮啟動與收尾過程,這便是模擬自然界中的物理運動規律,也是互動擬物化的一個表現。再比如我們在互動過程中突顯的介面用高亮,底層的頁面用黑色遮蓋,在加以陰影的增加來模擬前後層次和縱深的感覺,這也是互動擬物化的一個體現。

相關文章