你的設計「視覺糖」是否過量

一、視覺糖是什麼?

視覺糖是任何視覺裝飾元素。最常見的是icon,漸變,陰影,紋理,動效等等。

設計師有時會用毫無意義和多餘的方式來讓他們的設計看起來更好。

「毫無意義」是關鍵。這些方式本身並沒有什麼錯誤,它們只是用來讓無味而無意義的設計甜起來。

為什麼這會發生?我們其實都處於過這樣的境地:你已經開始做了一些設計,然後覺得它有些單調。

你會怎麼做?不如加些icon,或是一些漸變和陰影?好像你已經讓你的設計變好了,但實際上,你只是掩蓋了一個膚淺的設計。

有些設計就真的是視覺糖果(eye candy),這不是一件好事。它們裡面有很多糖,卻沒有任何營養。我們來看看Dribbble上的一個典型的控制台設計。

你的設計「視覺糖」是否過量範例圖
來自Medicon by Cosmin Capitanu

有重陰影、 一堆icon、漸變、無意義

二、多少糖是過多呢?

根據美國心臟病協會,男人每天最多攝入的糖分應該是37.5 g,而女人是25 g。

而在產品設計中,放多少視覺糖是可以接受的?在 Visual Display of Quantitative Information一書中,Edward Tufte給出了一個完美的答案:

當一個數據可視化被裝飾形式的電腦碎片佔據,當數據和結構變成設計元素,當整個設計追求圖像風格而非定量的訊息,那這個數據可視化就可以被稱作「大鴨子」——下圖這個鴨子形狀的商店。

你的設計「視覺糖」是否過量範例圖

對於這個鴨子建築來說,整個結構本身就是裝飾,就像上文所說的「鴨子設計」那樣。在Learning from Las Vegas一書中, 作者談及了現代建築裡的「鴨子」,他們的想法對於數據設計來說 一樣適用:

當現代建築師去掉了建築上的裝飾時,他們也無意識地將建築物本身設計成了裝飾。當把空間和接合提高到比符號學和裝飾更高的地位時,他們將整個建築扭曲成了一隻「鴨子」。 為了推廣一個「鴨子」,他們將常規建築上無辜而廉價的裝飾換成了憤世嫉俗且昂貴的對結構的扭曲。是時候來重新評估那個來自John Ruskin的曾經恐怖的言論——建築就是建造的裝飾,但我們要附上Pugin的警告:

三、如何減少視覺糖?

在設計時,有幾個簡單的事情需要記住,才不會讓設計變成「視覺垃圾食品」。五種減少視覺糖的方法:

1、永遠記住產品需求金字塔

先把產品功能性的部分做好,再設計形式。

一旦你弄清楚你的設計目標,同時弄好訊息架構,每個元素都自然會落到它該在的地方,如果先設計視覺,這個金字塔就會倒塌。

你的設計「視覺糖」是否過量範例圖

來自A checklist for designiA也提出過一些很棒的建議:

不要因為你的設計感覺空白、冰冷或跟你想的不一樣而添加圖標。圖標不能解決一個結構破損的設計。在設計環節的最後再添加圖標,在原型圖階段不要玩弄圖標。一個圖片往往能表達一千個完全不同的意思;只有健壯的訊息架構能夠賦予這些圖片一個在合適的環境下正確的意義。先符合理性,再取悅感性。

2、你的設計中的每個元素都應該有個目的

比如,google的Material Design裡的動效是為了增加更多的意義,而不是讓東西變得好看:

動效不僅僅是簡單的讓設計更加自然,最重要的是它能幫助引導用戶,在對的時機給他們對的訊息。動效能夠幫助用戶在複雜挑戰裡導航,並且清晰地傳達給用戶一個元素的阻力、動力和路徑。

3、如無必要,勿增視覺糖

在重設計之前,Dropbox在左側導航欄裡每個菜單項裡都有一個icon。

他們看起來不錯,但是幾乎沒有任何實際意義:如果你把每個icon裡面的字隱藏,用戶不會記得icon代表什麼。

在右圖的新設計裡,所有的icon都沒了,菜單不僅視覺上更加乾淨,也更加容易理解。

你的設計「視覺糖」是否過量範例圖
來自 Dropbox Design

4、不要隨波逐流

當Dieter Rams做第一個設計師,流行的唱片機都長這樣:

你的設計「視覺糖」是否過量範例圖

Fairchild 411H然而他設計的長這樣:

你的設計「視覺糖」是否過量範例圖
Braun PC-3

5、記住:好設計不需要太甜

Frank Chimero將好設計比作香草冰淇淋:

我個人喜歡香草冰淇淋那樣的設計:簡單而甜美,平實而質樸。當有需要時,它應該是「放縱」的體驗的堅實基礎,如巧克力塊和小甜餅。

但這些時候並不常見。一個好的香草冰淇淋往往足夠了。


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化