您的位置:首頁>設計>正文

如何使你的設計變得更好?只要加糖就可以了,視覺糖

本文關於設計師從食品工廠最愛的小伎倆中吸取教訓, 以及為什麼應該停止濫用它。

如何使任何食物變得更美味?只要加糖就可以了,

食品行業巨頭用這個伎倆把一切都變得如此簡單。 如今, 糖無處不在:漢堡, 軟飲料, 脫脂牛奶, 蛋黃醬, 甚至嬰兒食品!

1822年, 美國人平均每五天消耗約45克糖, 如今達到756g!

我們的大腦不斷地渴望糖, 所以我們沉迷於含有它的食物(腦部掃描顯示糖像可卡因一樣上癮)。 糖沒有營養價值, 這只會給食品生產商帶來更高的利潤, 並造成消費者的健康問題。 有一個輝煌的紀錄片《Fed Up》講述的就是這個。 (譯者注:Fed Up是由Stephanie Soechtig指導, 撰寫和製作的2014年美國紀錄片。 這部電影重點在於關注美國人肥胖的原因, 大量的資料顯示, 加工食品中大量的糖是人們忽視的根源。 )

如何使你的設計變得更好?只要加糖就可以了, 視覺糖。

什麼是視覺糖?

視覺糖是任何視覺裝飾元素。

最常見的視覺糖類型是圖示、漸變、陰影、紋理、動效等。

有時候, 設計師會以無意義或過度的方式使用它們, 使他們的設計更好, 這裡的關鍵是“無意義”。 這些本身沒有任何問題, 只是它們被用來甜化原本無味和無意義的設計。

為什麼會這樣呢?那麼, 我們假設在這樣的情境下:你在設計時感覺有點平淡。 你會怎麼做?添加一些圖示, 或漸變和陰影?看起來使你的設計變得更好了, 但實際上你只是將一個膚淺的設計偽裝起來。

有些設計甚至徹頭徹尾是個糖衣炮彈(以壞的方式)。 大量的糖分卻毫無營養價值。 我們看看來自Dribbble的典型的儀錶板:

✅濃重的陰影

✅過量的圖示

✅漸變

❌意思

到底多少糖分算多?

根據美國心臟協會的資料, 男性每天攝入的添加糖分最多為37.5克(9茶匙), 而女性最多為25克(6茶匙)。

產品設計呢?在產品設計中可以使用多少視覺糖?Edward Tufte在他的書《Visual Display of Quantitative Information》中有完美的答案:

當視覺圖表被雜亂的裝飾形式取代、當資料量度和結構變成可見的設計項目、當視覺樣式由整體設計決定而非定量資料,

那你就可以稱此“視覺設計”為“鴨形商店”。 (譯者注:大鴨子商店是位於美國長島的一個建築, 外形是個寫實派的鴨子造型, 而其主要功能就是賣鴨子和鴨蛋。 )

對於這個建築, 整個結構本身就是裝飾, 就像鴨子資料圖形一樣。

在拉斯維加斯的學習中, Robert Venturi, Denise Scott Brown和StevenIzenour撰寫了關於現代建築的鴨子–他們的想法也與資料圖形的設計有關:

當代建築師自以為是地“擯棄”建築外部的裝飾, 卻無意中設計出了一個本身就是純粹裝飾品的建築。 在推動空間與藝術方面的象徵意義和裝飾, 他們把整個建築變成了鴨子。 他們取代了傳統的棚用裝飾的天真和廉價的實踐, 這是一種非常憤世嫉俗和昂貴的程式和結構的扭曲來促進鴨子的發展…現在是時候重新評估John Ruskin曾經令人震驚的聲明了, 建築風格是建築物的裝飾, 但我們應該附上Pugin的警告:

裝飾建築是可以的, 但不要建造裝飾品。

如何減少視覺糖?

在設計工作時, 牢記幾件簡單的事情, 確保你的設計不會變成視覺的垃圾食品。

有五種方法:

1. 始終記住產品需求的層級

在開始考慮形式前,先把產品的功能性定位清楚。一旦你理清了設計目的,並將資訊結構牢記於心,每個設計項目就能變得恰到好處。如果一開始就建立在產品視覺外觀和感覺的基礎上,金字塔將會倒塌。

Devin Hunt的設計檢查表

iA.net還有一個很好的建議:

不能因為你的設計感覺無意義、冷淡或者沒有你預期的那樣好,就成為你尋找使用圖示的理由。圖示不會修復結構有問題的設計。在設計過程的最後添加圖示,在使用線框時不要使用圖示。圖片可以表達1000個不同的意思,強大的資訊架構會説明你找到正確的概念並將它們放在正確的語境中。在訴諸情感之前,先弄清楚你的理論基礎。

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

例如,Google的Material Design設計語言中,動效用于增加額外的意義,而不僅僅是讓設計看起來更好:

動效的作用不僅僅是使設計過渡自然,應該首先是幫助引導用戶,在正確的時間提供正確的資訊。動效應該有助於解決複雜的問題,並清楚地向使用者傳達一個元素的阻力、動態和路徑。

– 來自Sharon Correa和John Schlemmer“Making Motion Meaningful”

3. 在沒有必要的地方去除視覺糖

Dropbox在重新設計之前,左側導航面板中的每個功能表項目旁邊都有圖示。他們看起來不錯,但幾乎沒有任何實際意義:如果你隱藏每個圖示旁邊的文字,使用者不會記得它的意思。在新設計中,所有的圖示都不見了,現在導航不僅視覺上更乾淨,而且更容易理解。

圖片由Dropbox Design團隊提供

4. 不要跟隨趨勢

當Dieter Rams開始研究他的第一個設計時,黑膠碟播放機的時尚設計就像這樣:

Fairchild 411H

這是他設計的:

Braun PC-3

5. 記住:好的設計不需要過甜

Frank Chimero用香草霜淇淋比喻好的設計:

我的設計就像香草霜淇淋:簡單而甜美,樸素而不簡陋。它應該是一個更加放縱的體驗的基礎,在他們需要的場合,添加巧克力片和曲奇餅。然而這些特殊場合是很少的。一份好的香草霜淇淋通常就夠了。

來個總結

最近Peter Thiel’s在紐約時報中有一篇精彩的採訪:

記者:你堅信人從來就不應該吃糖。

Peter Thiel:沒錯,我們說的都很容易,卻從來做不到。

英文原文:Yuriy Oparenko, Visual sugar.

原文地址:https://uxdesign.cc/visual-sugar-f46b47ee04e5

譯者:文美@點融設計中心DDC,微信公眾號:「微信ID:DR_DDC」

本文由 @文美 翻譯發佈于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基於 CC0 協議

有五種方法:

1. 始終記住產品需求的層級

在開始考慮形式前,先把產品的功能性定位清楚。一旦你理清了設計目的,並將資訊結構牢記於心,每個設計項目就能變得恰到好處。如果一開始就建立在產品視覺外觀和感覺的基礎上,金字塔將會倒塌。

Devin Hunt的設計檢查表

iA.net還有一個很好的建議:

不能因為你的設計感覺無意義、冷淡或者沒有你預期的那樣好,就成為你尋找使用圖示的理由。圖示不會修復結構有問題的設計。在設計過程的最後添加圖示,在使用線框時不要使用圖示。圖片可以表達1000個不同的意思,強大的資訊架構會説明你找到正確的概念並將它們放在正確的語境中。在訴諸情感之前,先弄清楚你的理論基礎。

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

例如,Google的Material Design設計語言中,動效用于增加額外的意義,而不僅僅是讓設計看起來更好:

動效的作用不僅僅是使設計過渡自然,應該首先是幫助引導用戶,在正確的時間提供正確的資訊。動效應該有助於解決複雜的問題,並清楚地向使用者傳達一個元素的阻力、動態和路徑。

– 來自Sharon Correa和John Schlemmer“Making Motion Meaningful”

3. 在沒有必要的地方去除視覺糖

Dropbox在重新設計之前,左側導航面板中的每個功能表項目旁邊都有圖示。他們看起來不錯,但幾乎沒有任何實際意義:如果你隱藏每個圖示旁邊的文字,使用者不會記得它的意思。在新設計中,所有的圖示都不見了,現在導航不僅視覺上更乾淨,而且更容易理解。

圖片由Dropbox Design團隊提供

4. 不要跟隨趨勢

當Dieter Rams開始研究他的第一個設計時,黑膠碟播放機的時尚設計就像這樣:

Fairchild 411H

這是他設計的:

Braun PC-3

5. 記住:好的設計不需要過甜

Frank Chimero用香草霜淇淋比喻好的設計:

我的設計就像香草霜淇淋:簡單而甜美,樸素而不簡陋。它應該是一個更加放縱的體驗的基礎,在他們需要的場合,添加巧克力片和曲奇餅。然而這些特殊場合是很少的。一份好的香草霜淇淋通常就夠了。

來個總結

最近Peter Thiel’s在紐約時報中有一篇精彩的採訪:

記者:你堅信人從來就不應該吃糖。

Peter Thiel:沒錯,我們說的都很容易,卻從來做不到。

英文原文:Yuriy Oparenko, Visual sugar.

原文地址:https://uxdesign.cc/visual-sugar-f46b47ee04e5

譯者:文美@點融設計中心DDC,微信公眾號:「微信ID:DR_DDC」

本文由 @文美 翻譯發佈于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基於 CC0 協議

Next Article
喜欢就按个赞吧!!!
点击关闭提示