扁平化設計是壹種流行的設計風格,采用這種設計風格的網頁中沒有帶有光澤或立體視覺效果的圖形元素。很多設計師認為這是極簡設計的壹個分支。
扁平化設計往往被認為是3D效果、質感、寫實設計風格的對立面。壹個真正平面的UI根本不會有任何3D效果、紋理或者現實元素。
3D效果給界面帶來了深度的錯覺,幫助用戶形成視覺層次,知道哪些元素是交互的。
早期的界面采用偽3D效果(陰影、漸變、高光),讓可操作的元素壹目了然。但是這種偽3D效果太有沖擊力,太沈重,容易分散用戶的註意力。
質感是指界面設計中用來模仿現實世界的那些裝飾性設計。紋理設計想做的是借助已有的經驗,讓用戶快速了解全新的產品界面。
寫實主義是指模仿實物或其審美質感的設計風格。
紋理設計經常與現實主義混淆。我們經常在網頁設計中看到兩者的混合使用。兩者的主要區別在於,寫實的目的純粹是為了滿足審美需求,而紋理設計則希望用隱喻來幫助用戶理解界面。
2011年,微軟Metro design的設計風格和Windows 8的發布,極大的推動了扁平化設計的流行。微軟文檔將新的設計風格描述為“真正的數字化”——這種描述巧妙地增強了平面設計對設計師的吸引力。與紋理設計不同,平面設計被視為對數字媒體的探索,而不是對真實物理世界的重復。
蘋果官網頁面的扁平化成為了這壹趨勢的風向標。蘋果壹直堅持質感設計和寫實設計,直到2013,蘋果官網才換成了扁平化風格。
自從2011提出扁平化設計以來,尼爾森諾曼集團就公開批評其可用性問題(見鏈接聲樂批判其固有可用性問題?)。其主要觀點是扁平化設計犧牲了用戶追求審美時尚的需求。
多年來,用戶已經習慣了傳統的點擊徽標,如藍色字體、下劃線鏈接或具有3D效果的按鈕。隨著設計趨勢的改變和用戶接觸到新的設計原型,用戶識別可鏈接可點擊元素的能力也在進化,但這並不意味著我們可以完全拋棄這些可點擊的線索。
當我們問壹位22歲的加拿大人她是如何知道網站的可點擊元素時,她給出了如下回答:
“原來的可點擊風格,不管文字還是其他元素,藍色加下劃線的意思就是可點擊。但是...下劃線的時候特別有幫助。或者壹個按鈕...不要說點擊這裏...現在就說買,買或者添加到購物車裏。”
這句話形象地說明了人們是如何利用線索來判斷可點擊性的:
如果妳的網站想要更扁平,為了避免影響用戶快速找到可點擊元素,請遵循我們的可點擊元素設計指南。
1,最保險的顏色是藍色,其他顏色也可以選擇;
2.下劃線不是必須的,比如導航菜單。
3.請測試您的超鏈接的顏色,以確保色盲人士可以正常使用;
4.除了超鏈接(或其他點擊元素),不要在任何地方使用您定義的超鏈接顏色,也不要
不要使用藍色字體或下劃線;
5.請保持整個網站超鏈接的風格壹致。
請確保您的按鈕看起來像壹個真正的按鈕。必須有正確的視覺線索來幫助用戶快速識別按鈕。如果使用3D效果,那麽推薦按鈕為長方形;如果妳使用平面設計,確保它看起來可以點擊。
2.不可點擊的元素,請避免它們看起來像按鈕。比如標題文字加黑色背景,會給人壹種按鈕的感覺。
3.請註意頁面的內容層次,避免給用戶帶來各種按鈕。以至於用戶無法分辨。
1,讓小圖在點擊時有視覺反饋,比如圖片變大。
2.充分利用圖像、圖標、文字等元素,擴大可點擊區域,提高用戶點擊意願。
3.請不要為圖片設置太多的行動號召按鈕(CTA),除非超鏈接列表(或按鈕)在圖片中清晰呈現。
1.如果妳想使用圖標圖像鏈接,請確保它是清晰可辨的。
2.請盡量在圖標上添加可點擊的視覺線索,比如文字,除非妳使用的圖標辨識度很高或者已經成為行業慣例。
註:這裏只介紹要點。詳細解釋和案例請訪問文末鏈接:可點擊性設計指南。
最近,設計師開始意識到平面設計中的可用性問題。因此,壹個更加成熟和平衡的平面設計開始形成。設計師發現他們可以探索“真正的數字化”的獨特機會,而不會損害可用性。
這種扁平化設計也被稱為“半扁平”和“幾乎扁平”。
扁平)或“扁平2.0”。這種風格的設計幾乎是平面的,但微妙的陰影,高光和布局設計被用來創造用戶界面的深度。
谷歌的材料設計語言就是扁平化2.0的壹個例子:它通過遵循物理學原理的隱喻和原理,幫助用戶理解界面及其視覺層次。
Evernote Android是扁平化2.0的絕佳案例。盡管大多數用戶界面都是死氣沈沈的,但這款應用為導航欄和FAB按鈕(“+”)添加了微妙的陰影。在內容展示方面,以卡片隱喻的方式提供了壹個扁平化、層次化的三維空間。
早期的偽3D GUI和史蒂夫·喬布斯風格的紋理設計經常會產生沈重的界面。去掉這些重元素有利於提高可用性。但是抹平視覺差異,完全扁平化也會走向另壹個不好的極端。扁平化2.0讓我們設計壹個易用簡潔的界面成為可能。