2017年扁平化設計這麼玩

2021-02-19 設計圈

平面化 VS 擬物化 的戰爭已經過去好幾年了。扁平化設計徹底佔據了如今的主流設計趨勢。但是,大局已定的扁平化設計,是否已經固化不變了呢?並非如此。在過去的幾年當中,扁平化設計風悄然地進化,變得越來越多樣,也越來越有吸引力。

如今再來重新審視早期的扁平化設計,漸變、陰影和紋理的缺乏,讓它在視覺上顯得略為單調,而幾年的時間沉澱,扁平化設計中開始適時地融入了許多其他的設計元素,豐富了整個扁平化設計的思想,並且創造了不少值得一體的獨特扁平化設計分支。不論你所設計的是APP還是網站,在2017年所處的這個時間節點,枝葉繁茂的扁平化設計中,總會有那麼幾種風味獨特的設計風尚,能夠讓你傾心。



扁平化設計緣起

曾一直被蘋果公司所引領的擬物化設計風潮,在2010年的時候開始受到扁平化設計的衝擊。逼真的紋理、多樣的漸變和繁複的細節逐漸為人所厭倦,線條簡約的2D扁平化設計開始取代「抄現實」的設計手法,一時間,是擬物還是扁平的爭論充斥設計和技術圈,並快速蔓延到圈外的普通用戶,各執一詞,莫衷一是。

隨著賈伯斯的過世、iOS 7和Android 4.0的發布,設計趨勢最終還是向著扁平化邁出了關鍵性的一步。醒目而高飽和度的色彩和形式感更強的排版取代細節和紋理成為抓人眼球的元素。

最初的扁平化設計,對於細節的剝離是非常徹底的,這使得設計師能用的元素大多只剩下色彩和圖形,這種局面對於設計師和用戶都是困擾,細節的缺失讓設計並不足以支撐全部的信息傳達,這種局面下,許多微妙的扁平化分支就誕生了。

扁平化設計仍然是近10年來最具革命性的視覺設計趨勢,並且它還將一直向前推進。

Material Design

想要系統了解扁平化設計的快速發展歷程,Material Design 是最值得研究的案例。這一扁平化設計語言是谷歌為其旗下的數字產品的界面所創造的統一的視覺設計語言。

Material Design 吸取了扁平化設計最精華的部分,還巧妙地保留了擬物化的隱喻——紙,從而創建出如今所看到的Material Design,其中扁平化的元素被加上了一個微妙的維度,其外化的表現就是微妙的陰影。貼合物理運動規律的動效和微妙的視覺維度令Material Design 仿佛能夠跳出界面同用戶進行互動,在扁平化的風尚之下,它讓數字產品擁有了和現實世界在質感上有了某些相通的地方。

仔細審視 Material Design ,你會發現它許多「擬物」的特徵很好地軟化了近乎苛刻的早期扁平化設計。

Material Design 有著明確的概念,同時又隨著Google 旗下產品的演進而不斷地優化和更新。從某種意義上而言,Material Design 是扁平化設計的主要和重要的推動者,如果你想第一時刻了解它的變化,你可以跟著Android 的版本更新還適時查看它的調整。

扁平化 2.0

扁平化設計在幾年的時間沉澱之後逐步成熟,最終在2015年被設計師們階段性地歸納為「扁平化 2.0 」。

「扁平化2.0 具有更強的易用性,因為它將扁平化設計的主要特徵和高度可用的視覺線索結合到了一起,兼顧到設計的美觀和功能。同時,扁平化2.0 的高適用性,讓它幾乎可以和任何概念結合起來使用。和早期的純粹扁平化設計不同,扁平化 2.0 中融入了不少微妙的漸變和不多的紋理,提高了它的整體可用性。」

扁平化 2.0 的說法最早源於設計師 Ryan Allen :「扁平化 2.0 是演變的結果,它並非革命性的改變。扁平化設計和之前瘋狂流行的擬物化設計截然不同,而扁平化 2.0 是扁平化設計上的一個分支。如果說扁平化設計是聖誕樹的話,那麼扁平化 2.0 就是聖誕樹上的禮盒與糖果。它並不是浮華的裝飾,但是讓整個聖誕樹充滿了趣味和驚喜。」

扁平化 2.0 和 Material Design 一樣,打破了早期扁平化設計中的生硬規定,並且通過適度的調整讓視覺效果更加吸引人了:

·高亮和強調
·適度的漸變
·同色系下多種色調和色度
·微妙的陰影
·更廣泛的配色方案

扁平化 2.0 本身並不存在於UI和圖標設計的世界當中,實際上它已經延伸到視頻、攝影和圖片當中。

2017 的扁平化設計


進入2017年之後,扁平化設計仍然是主流,在設計手法和細節上,隨著時代的發展而演進,越來越成熟和多樣。

下面,是屬於2017年扁平化設計的特徵:

扁平化元素

早期的許多扁平化元素在如今的扁平化設計項目中,已經並不適用了。按鈕的樣式比以往更加簡單,圓角矩形的按鈕搭配黑色或者白色的文本,在今天更加流行。LOGO和圖標採用了扁平化的風格,甚至只是由線條構成,這樣不僅和整體風格更搭,而且在很多時候能夠突出顯示。

精簡的導航

漢堡圖標已經成為當前網站的標準配置,設計師可以將非關鍵因素隱藏在漢堡圖標之後的菜單裡面。

大膽明亮的配色

由於扁平化設計對於配色的可接受性更強,網頁設計有了更多的可能性。這使得如今的網頁設計整體上比以往更加多彩有趣,許多網頁首頁甚至採用了圖片+色彩疊加的設計。

極簡的首頁設計

作為目前通行的設計思路,絕大多數網頁不再將大量的內容塞滿首頁,即使擁有多個元素,也儘量讓首頁專注於單個任務,不再讓用戶在多個不同的目標或任務之間分心。

更優秀的排版

將複雜的樣式從設計中剝離之後,字體排版的形式感就更加突出了,這種局面使得設計師在進行網頁設計的時候,更加傾向於通過優質的排版來強化設計感。

更少擬物特效

雖然如今的動畫和特效越來越多,但是稍有特效去模擬一個現實生活中的特定的交互場景或者效果,它們通常是為了功能而存在,並且專注於體驗本身。從某種意義上來說,擬物化的設計並未回歸。

動效與反饋

Material Design 是動效和反饋設計中的翹楚。將動效和反饋結合起來從而更好的引導用戶、同用戶溝通,這是如今互動設計和UX設計的關鍵。

大量的留白

在屏幕越來越大的趨勢之下,通過屏幕留白來突出關鍵內容是極簡設計中最常用的手法,而在簡約風盛行的今天,留白也成了許多扁平化風格網頁中最常見的設計手法。當然,留白並不一定非得是白色。

扁平化圖層

毫無裝飾的扁平化圖層同樣存在於許多網頁當中,它們能成為不同元素的載體,或者單純的營造空間感。

超大的設計元素

超大的字體,超大的圖片,甚至超大的按鈕和圖標,都已經不是什麼新鮮的設計手法了,它們藉助過人的體積感和強有力的對比來製造視覺奇觀,是非常有用的設計技巧。這種設計手法在早期的扁平化設計就有了,現在使用很頻繁。

結語

扁平化設計和柵格系統是天生的盟友,它們讓今天的網頁顯得更加整飭、易用。

扁平化設計在今天的流行是有道理的,整個產品的設計、研發、運營都從中獲益,這也是它成為一種持續風潮的根本原因。

原文:designshack

作者:CARRIE COUSINS

設者:@陳子木

來源:uisdc

關鍵詞回覆:

印刷、名片、海報、logo設計、茶包裝、色譜、折頁

BANNER、吐槽視頻、外賣餐飲、AV、報價、日式海報

版式、民國、軟體、奧運、福利、簡歷、月餅、天貓

雙十一、菜譜、紅包

(可見相對應知識文章)


創意 | 素材 | 產品 | 服務 

一個設計資源共享的微店 

發現 | 分享 | 成長

設計師的家園,交流設計中的難題

分享行業最新資訊

訂閱號:SJ-QUAN


分享/投稿/產品入駐

 sj-quan1  719155723

相關焦點

  • 類扁平化圖標設計!
    文/張朦朦扁平化設計與擬物化設計是兩種完全不同的設計風格,扁平化設計的優點主要有三點:
  • APP扁平化設計的優勢!
    APP扁平化設計的優勢APP扁平化設計提倡功能美大於形式美,少即是多,留白大於填充的美學原理。僅僅具有色彩、形狀、線條等基本元素,字體也是選擇最基本、簡潔的那種,呈現出簡潔明了的特點。色彩APP扁平化設計中,通常採用比其他風格更明亮更炫麗的顏色,高飽和、鮮亮、復古或單色塊之類的顏色。鮮亮的色彩為扁平化設計創造出一種與眾不同的感覺,因為它在明、暗背景下都能獲得很好的對比度,達到一種極富衝擊力的視覺效果,吸引用戶的注意。
  • 【扁平化】如何利用基礎形狀玩出新花樣?
    編者按:扁平化網站想玩出創意,或借色彩之風,或憑動畫之趣,但兩者都得技術足夠紮實,新手設計師們,今天分享一個另闢蹊徑的創意技巧,利用花樣迭出的形狀與角度
  • 扁平化PPT懶人設計手冊
    Apple IOS)作為扁平化趨勢的強力推動者(在此之前微軟首先在06年首先推出了UI扁平化設計的音樂服務/播放器Zune,但並未引起較大的反響),IOS功不可沒,從IOS6的擬物化到IOS7扁平化的巨大變化一時間也招致了兩極分化的評論。
  • 給Leaf:為什麼扁平化設計更好
    朋友Leaf看完蘋果開發者大會之後,在朋友圈抱怨扁平化設計,我跟貼告訴他說:扁平化設計很好,但是好在哪裡我寫不下,得另寫一篇長文來論述。抱怨ios扁平化設計的傢伙們,起碼把系統升級到了ios7以上才會那麼說。而我因為喜歡擬物化設計的緣故,迄今為止一直沒有升級我的主用手機,且讓它呆在ios6。你看,捍衛自己的審美就得用行動而非言辭。從蘋果推出扁平化設計之始,我就非常討厭這種變化。經過了接近一年時間的堅決討厭,我突然醒悟,並開始接受這種新的設計風格。首先,從純功利的角度去看,擬物化設計是沒有未來的。
  • 為什麼化妝品logo設計越來越扁平化?
    在之前大多數UI設計風格還是以擬物化的設計風格為主,就在Windows更換UI設計以及蘋果發布IOS 7系統後,人們發現這種扁平化設計,好像更符合大家審美需求,這也讓扁平化設計從UI設計,迅速延伸到其他設計領域,特別是logo設計,這幾年都是以扁平化設計風格為主,相信大家對於為什麼化妝品
  • 「扁平化設計」的5大法則
    這一設計趨勢極力避免任何擬物化的元素,這導致這一設計風格在其它平臺有時候顯得突兀,前景圖片、按鈕、文本和導航欄與背景圖片格格不入,各成一派。那麼,扁平化的效果如何呢?因為這種設計有著鮮明的視覺效果,它所使用的元素之間有這清晰的層次和布局,這使得用戶能直觀的了解每個元素的作用以及交互方式。
  • 扁平化設計的8個實用小技巧
    今天總結了扁平化設計的8個小技巧,字體、圖標、排版、配色等都有提及,教程深入淺出,非常適合新手,學會可以直接拿來作海報和PPT設計。此處所談的扁平化指的是一個大的概念,將後面衍生出來所謂的「似扁平化」也包含進來。關於高光、漸變和投影。網上所說扁平化風的三大要素:去高光、去漸變、去陰影。這麼說是有點絕對了,我認為應該是去掉過渡式高光、過渡式漸變、過渡式陰影。
  • APP扁平化界面設計方法!
    文/劉楠交互界面是人機互動的渠道,扁平化的界面設計是以設計或者優化人的行為為出發點的,其關注的是人的心理和行為,其目的是為了提升用戶在使用軟體時的良好體驗。扁平化界面設計並不是完全的抵制裝飾效果,而是合理適度的使用裝飾效果,合理適度的裝飾效果是指在不影響用戶對功能的使用的同時滿足用戶的審美需求。①拒絕特效。扁平化界面設計追求的是信息傳遞的直觀明了,具體表現去掉了多餘的透視、紋理、漸變以及3D效果的元素,注重減少信息的裝飾元素,減少圖片的分層效果。
  • 設計案例|品牌 Logo 都約好了一起扁平化
    BBC自1922年創立,但其第一個Logo,是一直到1953年才出來。這個Logo,設計理念來自一個旋轉中的地球,象徵著足不出戶也能看遍天下事的精神。在新logo的設計上,設計師摒棄斜體、轉用黑框白字,成為我們今天看到的BBC標誌。Google徹底取消了Logo中字母的陰影效果,提供一種「扁平」的視覺效果。
  • 寶馬啟用LOGO,類似大眾扁平化設計,奧迪和奔馳卻不跟?
    這一次換標,寶馬等了23年在這些動輒百年歷史的汽車品牌中,換LOGO這種事並不常見,事實上現在你能看到的大多汽車品牌車標,都是上個世紀的設計。無論寶馬還是大眾,我們能發現新車標的設計方向都是扁平化,扁平化的意思就是化繁為簡,Less is more。還記得前文那位寶馬高管講新車標是迎接數位化嗎?什麼叫迎接數位化,我認為可以借鑑大眾的具象化表述,大家可以看下圖的大眾車標,你能發現新車標即使在小尺寸的數字屏幕也具備高清晰度和可識別度。寶馬的新車標,一定也有這樣的效果。
  • 為什麼網站建設越來越趨向扁平化設計?
    簡約的網站設計讓文字更突出, 所以在這種設計風格中,字體尤為重要,有很大一部分美感是字體帶來的。扁平化設計是未來網站設計的主流,不僅僅是因為簡潔,更是為了適應手機端用戶的體驗。現在的網站設計大多偏向於扁平化。那麼,除了這點原因之外,還有哪些原因導致網站設計偏向扁平化呢?
  • 【交互】設計師眼中的扁平化設計新潮流
    我們迎來了新一波網際網路扁平化設計的浪潮,扁平化設計越來越火。
  • 寶馬發布全新LOGO設計,採用扁平化設計夠養眼
    首頁 > 見聞 > 關鍵詞 > 寶馬最新資訊 > 正文 寶馬發布全新LOGO設計,採用扁平化設計夠養眼
  • 扁平化為什麼會成為設計行業發展趨勢?
    我們都知道自動iOS 7開始,蘋果就規範了2px到底線框圖標,這樣的圖標不僅小巧切精緻,正是從這開始,蘋果開啟了一種設計語言——2px線框。在iOS系統中越來越多的應用都採用扁平化的設計,例如:控制面板燈空間採用了不通欄的大圓角卡片設計,他不像Material design的小圓角卡片那樣呆板,大圓角也會使iOS視覺更輕快。而在應用內,採用了通欄的卡片設計。在ios 13中,卡片化的設計也越來越多地出現在圖文排版中。
  • 你應如何理性對待扁平化設計?
    去除繁雜裝飾的極簡主義界面設計正當時。扁平化設計聚焦兩點:視覺的極簡主義,功能的最優表達。用最簡單的用戶界面達成最詳備的功能。在革新了由iPhone建立的擬物時代後,扁平化成為設計風格的領導者。大家都認為蘋果iOS7採用扁平化設計是」改朝換代」的信號:業內領軍企業蘋果都做出了改變,那麼你還有什麼理由不去緊跟潮流呢?
  • 比亞迪汽車發布新品牌標識 扁平化設計
    [愛卡汽車 行業資訊 原創]2021年1月1日,比亞迪汽車通過社交平臺正式發布了全新品牌標識。據了解,全新品牌標識未來將只出現在國內乘用車市場,比亞迪其它業務還會使用原有品牌標識。從發布的全新品牌標識來看,比亞迪汽車全新品牌標識採用了扁平化設計,儘管依然是BYD三個字母,但取消了原有橢圓型邊界,加上銀色的金屬線條完成了由具象化到扁平化的轉變,風格看上去更為簡約,也時尚了很多。而全新品牌標識也寓意著願以更開放的姿態與用戶和夥伴彼此連結,共同探索在智能化時代,汽車產品與服務的新業態,共建新價值汽車品牌,連接向無限的未來。
  • 學會扁平化PPT,你也是人人羨慕的PPT大牛!
    如果想要把「扁平化的設計理念」融入到PPT製作中去,那麼我們首先得對「扁平化」有點兒了解。正所謂理論和實踐的結合嘛。另外還有一點需要注意,在多張圖片的呈現上,整體色調的把握也非常重要.你可以玩撞色玩漸變玩灰調,只要看起來不要太可怕就行。有時候我們還會給圖片(其實文字和圖片都是)的播放加入一些動畫效果,設置一定的動作路徑,為了使視效流暢往往需要反覆調試,很考驗耐心.所以也有人喜歡用Flash做PPT。
  • PS教程/扁平化名片設計
    要麼請一位設計師幫你設計,要麼下載一些免費名片模版,修改出自己想要的效果。今天的教程非常實用,將會教你利用PS打造簡約、充滿現代感的名片。推薦閱讀:設計常用尺寸和出血設置大匯總尺寸,出血,色彩模式以及解析度 打開PS,然後需要了解一點名片設計的知識,最重要的毫無疑問是尺寸,可參考本國名片設計規則,確定名片尺寸,國內一般是90mm*54mm(文中說英美國家一般是3.5 * 2 英寸)。
  • APP設計風格對比:扁平化、極簡、Material Design
    主要的APP設計風格大致分為以下三種:扁平化(Flat Design )、極簡、Material Design(谷歌APP設計風格)APP設計風格是指APP通過主要的幾種顏色搭配、頁面布局和界面交互體驗等給用戶呈現出的整體視覺感受。下面我們就來重點分析下這三種目前主流的APP設計風格的區別。