全世界都被拍扁!你應如何理性對待扁平化設計?

2021-02-14 普象工業設計小站

扁平化設計如日中天。去除繁雜裝飾的極簡主義界面設計正當時。扁平化設計聚焦兩點:視覺的極簡主義,功能的最優表達。用最簡單的用戶界面達成最詳備的功能。

在革新了由iPhone建立的擬物時代後,扁平化成為設計風格的領導者。
大家都認為蘋果iOS7採用扁平化設計是」改朝換代」的信號:業內領軍企業蘋果都做出了改變,那麼你還有什麼理由不去緊跟潮流呢?

但設計往往是複雜的,設計跟穿衣服一樣,固然有潮流,但是潮流是不適合你又是另外一回事了。
量體裁衣——你認為扁平化設計真的符合你的項目嗎?


 

初步認識扁平化設計

本文既不否定扁平化,也不盲目追隨扁平化。

扁平化的好與壞取決於兩點:

1.設計師個人設計理念與設計造詣的高低。
2.扁平化是否與設計需求相符。

那麼怎麼判斷扁平化是否合適呢?首先,我們需要初步了解扁平化設計

極簡主義

 

極簡主義裝飾風格

扁平化設計天生簡約。我們需要回歸到事物的本質,追尋最重要的特質加以體現——這樣,最重要的元素便顯得突出,成為了視覺焦點。

參考:

網頁設計的極簡主義:少即是多
推薦:50個極簡主義的網頁設計

字體

 

具有50多年歷史的Helvetica字體

因為扁平化設計是簡約的,形狀是最基本的。那麼扁平化設計中,字體將被打造成視覺焦點。
扁平化設計習慣加粗字體,提高視覺表現和辨識度。
字體應該在極簡背景下視覺表現良好,例如無襯線字體Helvetica便是典型。

參考:
怎樣給扁平化風格選擇合適的字體(附字體案例)
24套適用於扁平化設計的免費英文字體

按鈕樣式

 

按鈕務求形狀簡單,不帶有投影、光效以及漸變,色彩扁平。色彩之間對照感要強,從而提高辨識度。

但,凡事都在發展,長投影、3D 扁平式、多邊形的應用為扁平化按鈕設計加入了更多的變數。

 

色彩

2013年流行色——Emerald

扁平化設計多姿多彩,用色大膽,因為細節的缺失必然要用色彩加以彌補。光鮮整潔的色彩將為整體設計加分。

參考:
推薦:扁平化設計與色彩趨勢
乾貨!專屬扁平化設計的PS色板(配色庫)

形狀

 

一改傳統的蜂巢型

幾何形狀是扁平化設計採用的主要形式,優雅整齊。

圖標

 

圖標能起到形象化簡述內容的作用。扁平化的圖標設計務求簡單。使用圖標可以減少文字,提高網站的整齊感。

參考:
9款適合扁平化設計的圖標懸浮效果
趨勢!來瞧瞧扁平化設計進化成哪些類別了

我的設計應不應該」扁平化」?

關於扁平化設計,最錯誤的理念便是:扁平化設計意味著視覺風格的扁平。字體、圖像、圖標一律都要扁平嗎?全面扁平化、全面擬物化是不可取的,真要是這樣,設計連一點可操作性都沒有,還要設計師幹嘛?

扁平化設計是一種糅合視覺與理念的設計風格,不能從字面意義上理解這種風格。很多網站明白這個道理,將扁平化提煉至純粹,採用適合他們網站風格的扁平化元素。
視覺上可以部分使用扁平化風格,但是組織形式和主題表達上卻不必拘泥形式。如果一味的盲目跟風,兼容性、可發揮的地方必然有限。

例如,如果你的網頁用來販賣產品,那麼你的設計中必須要包含產品圖像。顯而易見,產品圖像不是扁平化的,會給頁面增添一種深度感。但是我們可以在其他地方使用扁平化元素。
這就說明了:扁平化設計有的地方能夠提高你的視覺表現了,達成設計目標。有的地方不能。靈活使用,才能走的更遠。

記住,我們做的是設計,而不是扁平化設計。

看看 Nitrografix這個網站。

網站的美學風格與內容相符。通過扁平化設計去除了繁雜元素,提供了更容易上手的導航。將機構的創意體現最大化。

再來看看魔獸世界的網站。

這個網站並不適合扁平化風格。導航條和圖像增添了整體的神秘感和中世紀氛圍。如果採用扁平化設計,很明顯,設計和內容無法聯繫到一起。
在進行重設計時,一定要考慮新美學風格與內容的聯繫性。新風格適合內容嗎?新風格與產品描述相符嗎?

如果不幸的錯誤使用扁平化設計,會對網站形象造成損害。
要記住好的設計是超越潮流的,一定要謀而後定。


 

那麼,什麼情況下適合?什麼情況下不適合?

 

那麼如何判定扁平化風格是否適合你的網頁設計呢?

採用扁平化:

不要採用扁平化:

 

幾條建議

網站是機構面子的豪華汽車。進行扁平化設計時要審慎,不要讓汽車輪胎也」扁平」了,否則會跑不起來。

不要被扁平化設計的名字唬住,扁平化不是全盤肯定,也不是全盤否定。扁平化設計主要提倡一種極簡設計理念,消滅華而不實,將一切變得簡單。記住,是將一切變得簡單輕鬆,而不是讓一切看起來枯燥呆板。

不要複製那些優秀設計師的作品。微軟是喜歡標題和小方塊,但是你沒必要學微軟。做自己的設計。

不要忽略字體。字體要和網站的色彩和視覺風格搭調。

扁平化設計的目標是通過簡潔讓重要元素更加醒目。因此要在布局上下功夫。

 

結論:世界是平的嗎?

 

平化世界的支持者會向你滔滔不絕的講述科技進步,全球一體化,全時段的數字時代,更扁平化的信息傳遞模式。某種角度來看,他們的說法沒錯。任何一個人通過手機,幾秒鐘之內就能實現上網。因此,對設計可用性的要求更高了。我們需要更人性化的的觸感和更聯繫用戶的設計方法,打造更好的用戶瀏覽體驗?那麼扁平化設計是用戶體驗的絆腳石,影響了設計的兼容性嗎?只要不盲目使用扁平化風格,就不會。

值得一提的是,扁平化設計對響應式設計大有裨益,因為扁平化設計的核心便是簡約,網頁的」減負」,自然能讓響應式設計更高效。

時至今日,扁平化風格已經被多家大公司採用,隨後,全世界都在跟風。
我們必須謹記一點:一切都是周而復始,反之亦然的,反覆、循環、更替的出現,扁平化設計必然會在未來的某一天被取代。

扁平化設計的變種有很多,但是還沒有出現一種統一的標準風格。這是好事,這說明還是有一部分人沒有盲從潮流,他們做出了一種反射式的設計:根據趨勢與理念,摻雜一點個人理解,在趨勢的基礎上進行創造。

在使用扁平化風格之前,一定要進行種種考慮,到底這種風格和你的網頁、內容是否能夠協調。如果能提升功能性,那麼自然可以。如果僅僅是為了追趕一時潮流,將風格強加給用戶,且與內容不相符,那麼這種設計模式是不可取的。

扁平化浪潮過後,又會是誰?

相關焦點

  • 扁平化PPT懶人設計手冊
    第一章:扁平化大潮—被拍扁的世界不知從什麼時候開始,我們的世界仿佛在一夜之間被「拍扁了」
  • 「扁平化設計」的5大法則
    扁平化這個詞來自於這種設計所使用的樣式和形狀,它完全屬於二次元世界,一個簡單的形狀加沒有景深的平面,不叫扁平化都浪費這個詞了。所有的元素的邊界都乾淨俐落,沒有任何羽化、漸變或者陰影。這一設計趨勢極力避免任何擬物化的元素,這導致這一設計風格在其它平臺有時候顯得突兀,前景圖片、按鈕、文本和導航欄與背景圖片格格不入,各成一派。那麼,扁平化的效果如何呢?因為這種設計有著鮮明的視覺效果,它所使用的元素之間有這清晰的層次和布局,這使得用戶能直觀的了解每個元素的作用以及交互方式。
  • APP扁平化設計的優勢!
    APP扁平化設計的優勢APP扁平化設計提倡功能美大於形式美,少即是多,留白大於填充的美學原理。僅僅具有色彩、形狀、線條等基本元素,字體也是選擇最基本、簡潔的那種,呈現出簡潔明了的特點。色彩APP扁平化設計中,通常採用比其他風格更明亮更炫麗的顏色,高飽和、鮮亮、復古或單色塊之類的顏色。鮮亮的色彩為扁平化設計創造出一種與眾不同的感覺,因為它在明、暗背景下都能獲得很好的對比度,達到一種極富衝擊力的視覺效果,吸引用戶的注意。
  • 給Leaf:為什麼扁平化設計更好
    放大之後,我們可以在這個圖標的頂部發現撕紙的殘痕,就像是真有一摞黃色便籤紙在那裡一樣。更不用說黃色紙面上刻意描繪出來的粗糙不平的感覺,讓人相信它有紙的質感。擬物化設計的出發點是:模擬真實的事物。標準是逼真與否。這天然就是一條很窄的路,所有APP開發公司的設計師經過幾年的時間,都可以畫出極為逼真的圖標和頁面。到了這種時刻,美術設計師們很快就會走進窮途末路。
  • 如何用AI設計logo?扁平化圖標logo設計案例詳解
    手機應用等扁平化的logo圖標非常漂亮,如何設計呢?非常簡單,今天萬逢春給大家做一遍演示,教大家如何輕鬆搞定扁平化圖標logo設計。第一步,新建文檔,選擇鉛筆工具,繪製圖形,使用平滑 工具拖動滑鼠,使得路徑變得平滑。
  • 類扁平化圖標設計!
    文/張朦朦扁平化設計與擬物化設計是兩種完全不同的設計風格,扁平化設計的優點主要有三點:
  • 【交互】設計師眼中的扁平化設計新潮流
    當然你可以簡單地認為扁平化設計只是另一個轉瞬即逝的美學潮流。不過一旦你深入去了解它的設計原理,你將會明白,扁平化設計不僅僅只是「看上去很美」。扁平化設計是什麼?查看如上例子中的設計,我們就能看出這些應用是如何簡單,漂亮地相互結合。微軟選擇與之前蘋果主導的設計徹底劃清界限,它決定使用更好的界面設計;在以上兩個設計塊中都採用了明亮的色彩塊,整體的排版和圖片看起來優雅大方。
  • 2017年扁平化設計這麼玩
    如今再來重新審視早期的扁平化設計,漸變、陰影和紋理的缺乏,讓它在視覺上顯得略為單調,而幾年的時間沉澱,扁平化設計中開始適時地融入了許多其他的設計元素,豐富了整個扁平化設計的思想,並且創造了不少值得一體的獨特扁平化設計分支。不論你所設計的是APP還是網站,在2017年所處的這個時間節點,枝葉繁茂的扁平化設計中,總會有那麼幾種風味獨特的設計風尚,能夠讓你傾心。
  • 寶馬發布全新LOGO設計,採用扁平化設計夠養眼
    首頁 > 見聞 > 關鍵詞 > 寶馬最新資訊 > 正文 寶馬發布全新LOGO設計,採用扁平化設計夠養眼
  • 扁平化設計的8個實用小技巧
    今天總結了扁平化設計的8個小技巧,字體、圖標、排版、配色等都有提及,教程深入淺出,非常適合新手,學會可以直接拿來作海報和PPT設計。此處所談的扁平化指的是一個大的概念,將後面衍生出來所謂的「似扁平化」也包含進來。關於高光、漸變和投影。網上所說扁平化風的三大要素:去高光、去漸變、去陰影。這麼說是有點絕對了,我認為應該是去掉過渡式高光、過渡式漸變、過渡式陰影。
  • APP扁平化界面設計方法!
    扁平化界面設計並不是完全的抵制裝飾效果,而是合理適度的使用裝飾效果,合理適度的裝飾效果是指在不影響用戶對功能的使用的同時滿足用戶的審美需求。①拒絕特效。扁平化界面設計追求的是信息傳遞的直觀明了,具體表現去掉了多餘的透視、紋理、漸變以及3D效果的元素,注重減少信息的裝飾元素,減少圖片的分層效果。
  • 為什麼化妝品logo設計越來越扁平化?
    在之前大多數UI設計風格還是以擬物化的設計風格為主,就在Windows更換UI設計以及蘋果發布IOS 7系統後,人們發現這種扁平化設計,好像更符合大家審美需求,這也讓扁平化設計從UI設計,迅速延伸到其他設計領域,特別是logo設計,這幾年都是以扁平化設計風格為主,相信大家對於為什麼化妝品
  • 設計案例|品牌 Logo 都約好了一起扁平化
    這個Logo,設計理念來自一個旋轉中的地球,象徵著足不出戶也能看遍天下事的精神。在新logo的設計上,設計師摒棄斜體、轉用黑框白字,成為我們今天看到的BBC標誌。Google徹底取消了Logo中字母的陰影效果,提供一種「扁平」的視覺效果。這也是當時的一種流行風格,其實,蘋果iOS也是在當年走向扁平化。新Logo同樣採用扁平化設計,但Logo中的字母變得更「圓」了。
  • 為什麼網站建設越來越趨向扁平化設計?
    自響應式網站推出以來,我們發現越來越多的企業網站改版出來的風格都趨於扁平化展示,我們首先要弄清楚什麼叫做扁平化設計?注釋:扁平化概念的核心意義是:去除冗餘、厚重和繁雜的裝飾效果。同時在設計元素上,則強調了抽象、極簡和符號化。簡單的來說,就是以簡潔為主,突出內容的核心,去掉冗長的表達方式。現在人們更喜歡簡單直接的東西,最直接的反應是網站建設。與之前的相對比較酷的網站相比,現在的人們更喜歡簡單,操作直接的網站,正因為如此,目前大部分的網站設計都趨向於扁平化。
  • 他是你的明星,你是你自己的太陽:偶像的意義及如何理性對待偶像
    縱觀一些偶像的微博,不難發現很多粉絲都在說他們在談論自己,因為他們的表現提高了,他們的生活變得更加活躍,他們有更多的動力來追求自己的目標。在他們的言語中,不難發現追星是他們努力工作的一種方式。如何理性對待偶像?如果你真的愛你的偶像,你應該接受他也是凡人,不是神,他不是完美的,是有缺陷,他可能比普通人好得多,但他不可能很全面。同時,我們也應該接受每個人的審美觀是不同的,不是每個人都會成為喜歡你的偶像,你還要求他們愛上他,因此對一些負面評論一笑置之,要比衝上去辱罵他們容易得多。
  • PS扁平化圖形製作教程,四種風格教你吃透扁平化
    ,採用極簡主義設計理念,以簡單到極致為追求,與扁平化相對的是擬物化。扁平化風格在插畫裡運用得比較多,另外還有扁平化圖標等等,當然另外還有延伸出來的扁平化風格排版等就不贅述了。下面看看我製作的扁平化圖。,但是也有幾種類型,如:常規扁平化、加噪點、加描邊、長投影。
  • PS教程/扁平化名片設計
    只要您從事商業活動,都必須要有一張名片。那麼怎麼才能擁有一張個性名片呢?要麼請一位設計師幫你設計,要麼下載一些免費名片模版,修改出自己想要的效果。今天的教程非常實用,將會教你利用PS打造簡約、充滿現代感的名片。
  • 扁平化為什麼會成為設計行業發展趨勢?
    我們都知道自動iOS 7開始,蘋果就規範了2px到底線框圖標,這樣的圖標不僅小巧切精緻,正是從這開始,蘋果開啟了一種設計語言——2px線框。在iOS系統中越來越多的應用都採用扁平化的設計,例如:控制面板燈空間採用了不通欄的大圓角卡片設計,他不像Material design的小圓角卡片那樣呆板,大圓角也會使iOS視覺更輕快。而在應用內,採用了通欄的卡片設計。在ios 13中,卡片化的設計也越來越多地出現在圖文排版中。
  • 國家藥品監督管理局:消費者應理性對待具有誇大效果的化妝品宣傳用語
    據經濟日報-中國經濟網時尚頻道了解,為幫助消費者識別化妝品違法宣稱和虛假宣傳,國家藥品監督管理局提醒大家,對於具有誇大效果、明示或暗示具有醫療作用、或者頗具煽動性的宣傳用語,消費者應理性對待。根據《化妝品標識管理規定》《化妝品命名規定》《化妝品命名指南》等文件要求,化妝品宣稱用語應根據其語言環境來確定,禁止表達的詞意或使用的詞語包括但不限於以下詞語:·絕對化詞意。如速效、超強、全方位、特級、換膚、去除皺紋等。·虛假性詞意。
  • 學會扁平化PPT,你也是人人羨慕的PPT大牛!
    ——看完你就明白了~ OK,話嘮完畢,進入正題。第一步,敲上本次PPT的大名:《怎樣製作扁平化PPT》。 既然是扁平化,那就不要考慮太立體的東西。但是空間感呢,也不要那麼狠心地就完全拋棄嘛,大家還是可以友好相處的。既然是扁平化,字體就不要搞得太複雜。