扁平化設計風格(Flat design)源於對用戶放棄使用產品的原因的研究。其中最主要的兩個原因是導航效果不佳及加載緩慢。
首先,用戶對app的技術門檻感到難以理解。忠實用戶可以想辦法克服技術障礙,但較為年輕以及年老的用戶並沒有足夠的耐心和精力去研究一款程序。另一個導致用戶停用產品的重要原因是加載速度太慢。就其本質而言,扁平化設計的下載速度比複雜設計的下載速度要快的多。(複雜設計的特性是有很多裝飾元素,如陰影和分層等。)
有鑑於此,平面設計師開始探索一種讓用戶感到熟悉,一致,易用和有秩序的排版及設計風格。這是一種全新的設計理念。這也許是第一個由平面設計師主導的數字變革。微軟在視覺傳達方面做了很多投資。它對於平面設計風格的重視形成了一種全球設計風潮。蘋果公司還在苦守著自己臃腫的圖標和圖形不放,但最終它也從iOS 7開始轉而擁抱扁平化設計風格。
下面這張截圖就是扁平化設計的一個很好的範例。扁平化意味著既不過度單調,也沒有過多元素。
谷歌目前正在大力鼓勵響應式設計。因為響應式設計風格的網站只有一個URL和同樣的HTML,這讓谷歌能更好地指示內容。而扁平化設計風格與響應式設計的理念十分契合。扁平化設計不需要多餘的元素,因而加載十分快速。它也更利於在不同大小的設備上顯示乾淨利落的排版。
扁平化設計的主要原則
色彩
我們先從色彩開始吧:對色域的大膽運用是扁平化設計的標誌之一。Windows 8首先使用了具有明亮色彩的分層。使用色彩和大小都不同的元素能便捷地創建分層。過去,設計中色彩的主要目的是提升程序的使用效率,但事實證明它在創造審美效果上也同樣出色。
獲得一個具有一致性的色域的有效方法是,先選擇一種顏色,然後調低色調,增加灰度,以便獲得不同色調但彼此相關的色彩。有種論調認為,在扁平化風格的設計中,元素之間模糊的界限常令用戶感到不知該點擊哪裡。其實只要能恰當地調整色彩,大小和文本就能輕易避免這一點。記住,色彩越明亮,它的主導性就越強。
關於色彩運用你可以借鑑Flat UI Colors 的例子。
恰當的功能可見性
所謂功能可見性(affordance)就是網站上表明某個元素可用於實現某個任務的信號。「點擊此處」就是功能可見性的一個例子。另一個例子是一個用於代表主頁的房屋圖標。
網頁開發者需要在自己的設計中清楚地表現出功能可見性。這也是過去三十年裡一直被網頁開發領域的專業人士所實踐的一個準則。然而在扁平化設計中,網站中的項目一般都需要進行重新設計以便讓非專業人士的用戶也能輕鬆地使用網站。
UI Patterns 列出了功能可見性的許多不同範例。
明確的功能可見性
當網頁上的項目能使任何具備最粗淺的上網技術的人都感到明白無誤的時候,這些項目便具備了明確的功能可見性。例如,一個很大的「點擊此處」圖標會讓用戶產生點擊的衝動。在這兩處場景中運用明確的功能可見性非常重要:一是面對新用戶時,二是採用新的或非常獨特的界面時。
設計者需要幫助對應用程式不熟悉的用戶樹立信心,以便他們能儘快熟悉常用的圖標。而新推出一款app時,即使針對的是經驗豐富的用戶,也要清楚地說明圖標的意義,以便用戶在執行任務時能順利達成目標。設計師還應特別考慮年輕用戶,老年用戶以及生活在網絡尚未完全普及的地區的用戶的需要。當然,總體的設計目標還是要創建合理有序的網頁。
模式化的功能可見性
模式化的功能可見性指的是已被廣泛認可的,能實現特定任務的網頁項目。例如點擊紅心可以將網站加入「我的最愛」列表。一個有下劃線的詞語代表著一個連結,如果你點擊它的話會被轉到別的網站/網頁。模式化的功能可見性可以說是應用最廣泛的一種功能可見性。
隱藏的功能可見性
隱藏的功能可見性是指,只有用戶執行了特定的操作後,項目才會顯示的特性。例如當光標置於其上才會顯示的下拉式目錄。通過這種方式可以隱藏很多導航選項。這是很有必要的,因為網站的上需要顯示的選項太多了,但又不可能同時顯示。
當然這樣所導致的風險就是用戶根本找不到所需的項目。因此在扁平化風格的設計中,最重要的功能永遠在最顯著的位置。而用戶一般也能在短期內便適應這種隱藏式的功能可見性。
錯誤的功能可見性
網頁中充斥著錯誤的功能可見性,提示,指引或模式,他們告訴用戶當點擊或光標懸停在某個元素上時就會產生某個結果,而事實上卻什麼也沒有。有時導致這樣問題的是一個無效連結,有時是設計的疏忽,但更多時候,是由於質量低下的平面設計。這也是導致用戶棄用某款產品的主要原因之一。
借喻式的功能可見性
這個指的主要是圖標的使用。例如,一個印表機的圖標其功能就是指示用戶列印文件。擬物化的圖標是寫實而充滿細節的,而扁平化設計風格的圖標就不是這樣。借喻式的功能可見性只會採用平面的,極簡化的圖像,將一個項目壓縮為易於理解的符號。Dribbble 提供了很多極簡的扁平化設計圖標,設計師可以免費下載使用。
下圖是擬物化設計與扁平化設計圖標的對比。
扁平化設計非常重視簡潔與秩序,它必須通過排版和視覺元素來傳達設計師的心思。
一般來說扁平化設計風格的網站中文字或密集的文字塊很少見,所以設計師處理這些文字內容必須十分用心。有些設計師會說在設計中將無襯線字體用於標題或正文中十分重要。儘管如此,我們還可以更進一步,設法獲得更為清晰的字體。
在扁平化設計中應去除一切非必要的元素。沒有必要在每個標題中都將首字母大寫(Initial Caps)。大寫字母一般用於專有名詞和句子中的第一個單詞中。精於排版的設計師一般都很喜歡隱喻式的功能可見性,因為它與1930年代的設計風潮有某些相似之處。也契合「同型設計」的概念——這原本是一種顯示數據的方法,但它深深地影響了今日的圖標設計。
Class Project Ideas.
Mapping with Isotype
扁平化設計檢查清單
在將你的設計交付給客戶之前,請對照以下表單逐一檢查你的項目,以確認你的設計符合扁平化設計的審美理念:
設計中用於顯示行動按鈕的圖像和圖標足夠簡潔清晰嗎?在每個頁面中,是否有清晰的標題提示本頁面的主要功能頁面中的功能可用性是否足夠清楚且合理?分級是否能清晰展示?你是否將網站的社交選項置於醒目位置?分享到社交媒體的功能是否便捷?
扁平化設計的未來
當蘋果決定放棄擬物化設計的時候,等於同時為所有花哨的網站敲響了警鐘。這些網站看起來越來越過時和粗笨。我覺得蘋果至今仍未能做到全面擁抱平面化設計。iOS 8在某些方面仍顯得不夠簡潔。有趣的是,谷歌仍在繼續鼓勵華麗設計與扁平化設計的結合。例如它仍在使用分層,也許未來的設計師會在自己的設計中加入更多華麗的視覺元素,從而開啟一個新的設計潮流。事實上,今日的扁平化設計風格就源於1920-30年代的設計風格。儘管扁平化設計風格也許不過是另一個「潮流」,但不可否認的是它是一個十分實用的潮流。
設計師和開發者總想為自己的作品打上鮮明的標籤。而扁平化設計則要求設計師嚴格遵循極簡主義的設計原則。在設計中知道如何取捨是一種藝術。但真正貫徹扁平化設計的精髓卻需要意志和勇氣。至今我還未看到扁平化設計有消退的跡象。它如此優雅,簡潔而易用。它是一種純粹而靈活的設計方式。
來源:http://www.instantshift.com/2015/08/06/flat-design-guide/
翻譯:劉海靜