回歸簡約,做最真實的設計

[最近「扁平化」的介面設計風格風靡一時,早在Android4.0推出的時候此設計風格就已經得到了廣泛的認可,再到iOS7的發布,則將這一設計風格推向了高潮。流行 「平」的介面風格不僅是一種趨勢,它的內在本質是希望遏制和消除多餘的視覺元素,做真實的設計。]

[技術進步有時會過猶不及,在十九世紀,由於大規模的機械化生產,裝飾品被快速及廉價的生產出來,導致商品被過度裝飾。類似的事情發生在最近幾年,由於顯示和樣式技術允許設計人員能夠創建豐富的視覺介面,導致擬物化設計(軟體介面模仿現實世界中的實物紋理)和複雜樣式的過度使用。

出於對在真實設計的追求,現代設計運動摒棄了19世紀過度裝飾的設計風格,使設計更加適合大規模生產。今天,我們看到對「真實的設計」的追求以「扁平化」的趨勢呈現出來,它拒絕擬物化設計以及過多的視覺效果,追求簡單,乾淨,以內容為中心的設計。

現代設計的誕生

19世紀後期,工業革命爆發,機械化大生產,對已有裝飾風格的瘋狂複製導致了大量劣質、扎眼的商品,一些有影響力的現代設計先驅諸如奧地利建築師阿道夫·洛斯的對此深感不滿,同時現代設計先驅以自己的實際設計作品影響世人,倡導現代設計,例如:「現代建築的旗手」——著名建築師勒·柯布西耶、「摩天大樓之父」——路易斯·沙利文。到了20世紀中期,隨著德國現代設計運動先驅赫爾曼·穆特修斯的奔走相告、現代派建築師菲利普·約翰遜的作品在紐約現代藝術博物館的成功展出,將現代設計運動逐步推向高潮。

經過大半個世紀的時間,現代主義運動開始盛行,直到20世紀中期,傳統的風格和技巧被新的設計方法所超越。其主旨是:遠離不必要的裝飾,走向一個更乾淨,更內斂剋制的設計形式,其美在於內容本身,而不是外在裝飾,尋求一個和諧的形式與功能的融合。

數字化裝飾

如果我們將短暫的軟體設計、網頁設計和現代設計的歷史來做比較的話可以發現,兩者有著相同的發展過程,機械化大規模生產導致的過度的裝飾在軟體和網頁設計中也可以看到,由於顯示和樣式技術的迅猛發展,在軟體介面和網站中,大量的裝飾性的元素被過度使用。在早年的Web設計師中熱衷於使用動畫、聲音與圖像,產生過於豐富的效果。

早期的帶有圖形用户界面的操作系統在外觀和感覺上是相當基本的。當然,現實世界的隱喻,也得到了運用,比如用圖像文件夾來表示文件目錄,帶有斜面的按鈕讓用戶知道它們是可以點擊的。但整體的審美感覺是「扁平化」且剋制的。不管設計者是否想提供一個豐富的視覺體驗,但是黑白兩色且低解析度的顯示器限制了他們。

第一代Mac OS圖形介面只用了兩種顏色,蘋果通過模仿現實生活中的物體來在傳達深度、紋理、按鈕和圖標等概念,介面的美觀受制于當時的技術,而不是設計師。

隨著技術的發展,設計師們獲得了廣闊的施展空間,視覺的自由度得到了極大的提升。對於Windows XP,微軟推出了一個豐富多彩的風格,通過運用大量的亮部,陰影和漸變來模擬一個現實物理外觀。

蘋果發布的Mac OS X則走得更遠,富有光澤的塑料氣泡造型的介面,拉絲鋁的逼真圖標等等。隨著時間的推移,操作系統的視覺樣式得到加強,微軟賦予Windows光澤,透明玻璃般的主題,而蘋果公司則為其桌面和移動操作系統賦予材質感、擬物化更強的設計風格,如帶有皮革紋理的日曆應用程序,以及電子書閱讀器逼真的翻頁效果。

[
Windows Vista的介面特色Aero主題,其光澤以及像玻璃一樣的窗口鑲邊。

模仿現實生活中對象和紋理的樣式,被說成是「擬物化」——借用現實世界裡的符號作為設計元素,目的是為了讓介面為用戶所熟悉。最近,設計師們開始質疑筆記類的應用程序是否一定要設計成紙質筆記本的樣式,或日曆類應用程序是否一定要設計成皮革和翻頁效果。這樣的做法確實能夠給用戶來視覺上趣味性,但是同時它為了配合現實生活中的靜態感受卻與數字介面的流動性和活力格格不入。

[

當前版本的OS X的日曆有一個模模擬實日曆外觀的縫製的皮革質地和紙邊撕裂的效果。

隨著最新版本的Windows 8發布,微軟邁出了勇敢的一步,遠離這些多餘的視覺效果,試圖給其操作系統的全數字化的感受,用本文的觀點來說,這是「真實的設計」。最新的介面是建立在微軟開發其早期的移動版本。所呈現給用戶的審美準則毫無現實生活中物體紋理。

相反,Windows8依賴排版,間距和顏色帶來優雅而有秩序的數字模塊。現實生活中的效果以及多餘的樣式被摒棄,剩下的就是簡單的內容本身。非常像海爾曼·穆特修斯曾經提到的以火車站作為例子的「機器美學」,微軟設計師指出以火車站標誌為靈感的新Windows介面,以前被稱為「Metro」。

[]

Windows 8的開始螢幕上打破傳統的桌面設計方式,由扁平的,豐富多彩的磁片組成,而不是圖標。磁片不僅是一種風格上的選擇,而且他們讓有用的訊息以儀錶板的方式在啟動畫面上呈現。

多年來,在網上已經看到了類似的轉變。早期基於表格和Flash的設計讓開發者能夠以像素級別的細緻度來完美實現介面,所以設計師毫不猶豫地為內容設計出豐富的視覺容器。當我們開始面對新媒體的流動性時,將展示和內容分開,網頁設計變得更加剋制。高度裝飾的容器不能輕易改變它們的寬度和位置,所以設計師較少使用圖像,並更多地依靠簡單的CSS樣式,使他們的布局適應性更強且更易於維護。

響應式設計(為使一個頁面適應不同的螢幕尺寸和設備)的最新發展要求設計師的工作在一開始就要跳過可視化編輯器(如Photoshop),介入到程式碼當中去,讓我們進一步實現一個簡單的,以內容為中心的網頁設計美學,它的美感源於排版,間距和顏色,而不是靠真實的設計運用紋理和裝飾性的圖片。

最近,蘋果、作為 「擬物化」設計的引領者,通過iOS7的發布,也已經邁出了向數字化設計的第一步。縫製的皮革紋理和撕開紙張邊緣的擬物化設計已經一去不復返了,取而代之的是一個簡約而扁平介面,它色彩豐富、圖標簡單、表面半透明。蘋果iOS7對過去的「擬物化」設計做了一次徹底的轉向。

真實的設計

促使現代設計理念在軟體和網頁設計中盛行的關鍵在於對設計真實性的追求,這種追求使得設計師將裝飾性的東西從他們的工作中剔除,將數字設計引向乾淨、以功能為主的美學標準。然而到底是什麼使設計變得「真實」呢?

真實的設計旨在避免虛假的裝飾,它傾向於使用材料本身的質感,沒有遮掩、沒有虛假的紋理,展示材質自身的優點,而不是試圖隱藏弱點。真實的設計是以一個用戶熟悉且能感知有用的方式來展示功能。真實的設計是以功能優先於形式、目的在於提高效率。真實的設計是摒棄外在裝飾轉而尋找美麗純凈的內在本質。

在數字化設計中,真實設計可以概括為著以下幾點:

擁抱數字化的外觀。

在設計中我們沒有必要去模仿諸如金屬,木材和皮革的紋理。他們不是數字化的介面,所以模仿這些毫無意義。這並不意味著設計只是平面背景顏色,而是我們不應該試圖模仿或受限於現實世界中的紋理。

破除「擬物化」設計。

數字圖書不需要模仿物理紙張翻頁效果,也不需要一個記筆記的應用程序看起來像一個物理的紙本子,皮革封面,撕裂的邊緣和手寫風格的字體。「擬物化」設計也並非一無是處,但它總是在介面上增加了視覺負擔。例如,紙本是靜態的,一維的,但數字介面卻非這樣,一旦這個介面模仿了現實中的紙本,它就陷入到物理隱喻的約束當中了。

以內容為中心的設計風格。

聚焦內容,而不是它的樣式和裝飾。你可能會認為這點是老生常談,但有多少次你在網站上看到一個現成的,現成的主題?主題是始終建立在虛構內容,所以,就其本質而言,絕不可能完美的代表內容。虛構文本的主題推動設計師專注於造型和裝飾,而不是內容上,因為那裡根本就沒有內容。只有當你在處理實際的內容時,你才開始真正將功能和形式有機結合。

並非極簡主義

基於功能的設計美學不能等同於極簡主義風格,前者試圖去除多餘的設計,使產品更易理解,有更好的表現同時讓其展現材質本身的美感,後者則是試圖建立一個極簡的美感,給設計對象一個簡單和乾淨的光環而已。一個是基於功能的設計準則,另一個則是一種風格的選擇。

生硬的套用極簡的設計美學,將介面設計的簡單而數字化,時常會是個誤區。舉個例子,一股腦地消除視覺效果,如陰影,顏色和不同的背景樣式未必會讓介面更容易使用。在某些情況下,這相反的破壞了介面的層次結構和重點,而之前這些層次結構和重點都是建立在陰影和背景顏色之上的。

在《The Laws of Simplicity》中John Maeda指出,「要達到至簡的最簡方式就是通過深思熟慮做減法。當有疑問時,只是做刪除​​,但要小心你所刪除的。」最後的警告是非常重要的。刪除東西導致簡化,往往只因為需要用戶關注的東西變少了,但是減少視覺元素可以在情感上幫助用戶來處理介面訊息,比如項目分組、按鈕和標籤的區分、突出對象所用到的圖形元素都會分散用戶注意力,如果運用不當都會給用戶造成更多的干擾,而非是讓所謂的樣式、原則來指導設計。

為什麼真實的設計如此重要

「Rise」這個應用是一個完美的例子。鬧鐘在現實生活中是一個已經解決了的問題,但是Simplebots決定重構這個概念,重新思考一個基於純數字環境的介面。

[

在Rise應用程序中,用戶以一個創新的全螢幕滑塊來設置的時間,以背景顏色的變換來反應映天空的顏色

「Rise」介面設有一個全螢幕的滑塊,在你設定的時間的時候背景色的改變用以反映天空的顏色。它沒有試圖去模仿一個物理的時鐘或物理滑塊或現實生活中的紋理。相反,設計師充分利用智能手機的觸屏,以介質本身來創造一種全新的體驗。創新性的設計不僅使其有一個偉大的用戶體驗,並讓它在應用市場上脫穎而出。

像「Rise」介面的設計只有當你對數字化畫面有一個全面的掌控,而非僅僅是照搬現實世界中的一些解決方案才能得到的。數字;螢幕可以產生抽象的形式,動畫、鮮艷的色彩以及均勻的色調,沒有必要被限制在壓抑的色調或靜態展示當中,也無需被綁死在「擬物化」的設計形式上。如何通過利用像素網格找到最好的展示內容,我們可以得出更好,更簡單的解決方案,創新的介面設計讓用戶有賓至如歸的感覺,提供更好的用戶體驗,讓產品脫穎而出。

最近廣為推崇的「扁平化」的設計風格可能會是一個趨勢,但它也是對「真實的設計」追求的一種體現,這種追求體現在抑制多餘的裝飾,專注於內容本身。技術進步有時會過猶不及,就像在19世紀機械化批量生產造成裝飾的真實的設計使用,以及顯示和樣式技術在早年的網頁和軟體設計中的泛濫。隨著時間的推移,過度裝飾得到抑制,現代主義的設計先驅尋求基於功能的美學標準,軟體和網頁設計中的過度設計也會得到抑制,轉而去追尋「真實的設計」。

來源:騰訊ISUX