扁平化設計的8個實用小技巧

2021-02-14 IXDC

來源:優設

作者:正越升

方興未艾,扁平化仍是主流設計風格。今天總結了扁平化設計的8個小技巧,字體、圖標、排版、配色等都有提及,教程深入淺出,非常適合新手,學會可以直接拿來作海報和PPT設計。

此處所談的扁平化指的是一個大的概念,將後面衍生出來所謂的「似扁平化」也包含進來。

關於高光、漸變和投影。

網上所說扁平化風的三大要素:去高光、去漸變、去陰影。這麼說是有點絕對了,我認為應該是去掉過渡式高光、過渡式漸變、過渡式陰影。在這篇文章裡,扁平化高光、階梯式漸變以及所謂的長投影是允許的。

使用扁平化圖標。

使用有明確含義的圖標可以讓你的設計不那麼單調並且耐看。

在這裡推薦兩個網站:

www.easyicon.net

www.iconfinder.com

色塊的形狀和顏色

色塊在扁平化設計中佔據著很重要的地位,幾乎我們看到的所有扁平化設計都離不開色塊。

關於色塊的形狀,基礎形狀有圓形、三角形、四邊形、五邊形以及六邊形,注意不要用超過六條邊的形狀,這樣人們就會開始數形狀的邊數而忽略掉你要傳達的信息。

有的人在扁平化設計中更喜歡使用帶有圓角的基礎形狀。

關於色塊的顏色,並沒有特別的要求,但是我個人更加喜歡使用不那麼鮮豔刺眼的顏色,使用溫和、飽和度不高的顏色更對我胃口。

在扁平化設計中,如果我追求可靠、穩定、安全、平靜的風格,那麼我會選擇一種主色以及與主色同色系的四五種輔色,如果我追求活潑、青春、充滿生命力的風格,那麼我選擇的輔色就和主色便是完全不同色系。

扁平化設計中,黑白以及不同程度的灰很重要,因為它們白百搭,所以在你不知道該用什麼顏色的時候,黑白灰也許是不錯的選擇。

色塊的組合

除了基礎的形狀之外,你可以由基礎形狀衍生出更多的組合形狀。但是我建議不要超過三種不同的基礎形狀組合,這樣會讓你的設計脫離扁平化簡約的初衷。

字體的選擇

請選擇無襯線體,常用的中文無襯線體有微軟雅黑、黑體、幼圓、張海山銳楷體、方正智藝體等。

注重排版。

扁平化設計中尤其要注意排版,在這裡再次祭出設計的四大原則:

對齊、親密性、重複、對比。在你放好一個色塊或者文字後,請務必檢查一下是否滿足以上四條準則。

注意,色塊裡面放置文字的時候,要留出呼吸空間。

圖片的使用。

扁平化設計中如果要用到圖片,常見的處理方法有三種:

使用不同色塊組合做出偽立體感。

這是所謂「似扁平化」的部分,但是它仍然能給我們的設計帶來一種簡約而不失美感的感覺,因此我在這裡也歸併起來總結一下。像我們之前很火的lowpoly以及長投影設計都屬於這一類。

最常見的手段是使用不同飽和度的色塊打造偽光影效果,來給人立體感。

最後,無論如何,請記住扁平化的核心就是簡潔。

規則是用來打破的,但在打破規則之前,你需要知道規則是什麼。無論是設計的四大原則還是扁平化的這幾條tips,都不是不可挑戰不可違逆的,你可以大膽跳出這些規則,創新需要如此,但是在此之前,掌握這些規則是必須的。

當前,美國等歐洲國家都正以服務經濟為基礎,大規模開展體驗經濟。用戶體驗行業經歷著快速發展與變革,用戶體驗設計也變得越來越重要。

Apple、 Google、Facebook等創新企業能坐擁百億美元的身價,其主要資產不是技術,而是最好的用戶體驗服務和最優秀的用戶體驗設計,Good Design=Good Business!

IXDC連續舉辦了四屆美國體驗創新商務考察,攜手國內知名網際網路、設計、科技創新機構深入全球最知名網際網路、科技企業、設計機構、孵化器等考察交流,一探成功奧秘。

今年,IXDC&meia.me&貝塔空間創始人、資深網際網路產品專家胡曉,將以導師身份陪你一同踏上企業創新轉型探索之路。

掃一掃進入美國考察

時間:2016.01.07-01.18

報名截止:2015.12.20

名額僅25席,快來報名

相關焦點

  • 【交互】設計師眼中的扁平化設計新潮流
    本質上講,扁平化設計有兩個目的:· 直面屏幕的限制,利用這些參數而不是掩飾它們。· 將新的簡潔性作為流線設計的出發點,使網站更快更實用。扁平化設計就是這樣 - 一切都是平的。扁平化設計並不是完全沒有效果的,她只是沒有那些多餘的「人造的」陰影和維度。越來越多的設計「幾乎都是扁平的了」,他們的整體樣子和觀念都只包含很少的效果。實現扁平化設計的一些技巧
  • 扁平化PPT懶人設計手冊
    Apple IOS)作為扁平化趨勢的強力推動者(在此之前微軟首先在06年首先推出了UI扁平化設計的音樂服務/播放器Zune,但並未引起較大的反響),IOS功不可沒,從IOS6的擬物化到IOS7扁平化的巨大變化一時間也招致了兩極分化的評論。
  • PS教程/扁平化名片設計
    要麼請一位設計師幫你設計,要麼下載一些免費名片模版,修改出自己想要的效果。今天的教程非常實用,將會教你利用PS打造簡約、充滿現代感的名片。推薦閱讀:設計常用尺寸和出血設置大匯總尺寸,出血,色彩模式以及解析度 打開PS,然後需要了解一點名片設計的知識,最重要的毫無疑問是尺寸,可參考本國名片設計規則,確定名片尺寸,國內一般是90mm*54mm(文中說英美國家一般是3.5 * 2 英寸)。
  • 8個簡單實用的PPT封面設計小技巧,你總會用得到!
    我們都知道,PPT封面是受眾欣賞演示的第一個畫面,評判一份好的幻燈片必須是它的封面,封面是你給受眾的第一印象,如果你的PPT封面不吸引人,後面的內容就很難吸引觀眾的目光了,所以PPT的封面的設計真的很重要!直接關乎別人對你的第一印象哦!8個簡單實用的PPT封面設計小技巧,送給正在為PPT封面發愁的你。
  • 扁平化PPT怎麼做?總結了10個技巧,掌握了它們即可
    無論是海報還是手機UI,無一不是扁平化設計風格,很多夥伴都喜歡扁平化的設計風格,因此這篇文章我們就來看看扁平化的PPT該怎麼製作。其實很多時候我們用純黑的時候總會覺得視覺上怪怪的,但是灰色無論深淺都相對更柔和更有質感一些。3. 找張好圖,保持主題色和極細字體,不用三角形箭頭。
  • 2017年扁平化設計這麼玩
    扁平化設計徹底佔據了如今的主流設計趨勢。但是,大局已定的扁平化設計,是否已經固化不變了呢?並非如此。在過去的幾年當中,扁平化設計風悄然地進化,變得越來越多樣,也越來越有吸引力。如今再來重新審視早期的扁平化設計,漸變、陰影和紋理的缺乏,讓它在視覺上顯得略為單調,而幾年的時間沉澱,扁平化設計中開始適時地融入了許多其他的設計元素,豐富了整個扁平化設計的思想,並且創造了不少值得一體的獨特扁平化設計分支。不論你所設計的是APP還是網站,在2017年所處的這個時間節點,枝葉繁茂的扁平化設計中,總會有那麼幾種風味獨特的設計風尚,能夠讓你傾心。
  • 類扁平化圖標設計!
    文/張朦朦扁平化設計與擬物化設計是兩種完全不同的設計風格,扁平化設計的優點主要有三點:
  • 為什麼化妝品logo設計越來越扁平化?
    在之前大多數UI設計風格還是以擬物化的設計風格為主,就在Windows更換UI設計以及蘋果發布IOS 7系統後,人們發現這種扁平化設計,好像更符合大家審美需求,這也讓扁平化設計從UI設計,迅速延伸到其他設計領域,特別是logo設計,這幾年都是以扁平化設計風格為主,相信大家對於為什麼化妝品
  • 「扁平化設計」的5大法則
    但是需要注意的是,扁平化設計不是說就簡單的搞些形狀和顏色搭配起來就行,它和其他設計風格一樣,是由許多的概念與方法組成的,想要學習具體設計方法的朋友可以看看 Designmodo,這裡有許多現成的設計實例可以讓大家分享(免費矩形UI、免費扁平化UI,這兩個地方是一些簡單的 PSD/HTML UI kit 和一些最基本的組件;專業矩形UI、專業扁平化UI,這兩個地方是一些完整的網頁/APP PSD/HTML
  • APP扁平化設計的優勢!
    APP扁平化設計的優勢APP扁平化設計提倡功能美大於形式美,少即是多,留白大於填充的美學原理。僅僅具有色彩、形狀、線條等基本元素,字體也是選擇最基本、簡潔的那種,呈現出簡潔明了的特點。色彩APP扁平化設計中,通常採用比其他風格更明亮更炫麗的顏色,高飽和、鮮亮、復古或單色塊之類的顏色。鮮亮的色彩為扁平化設計創造出一種與眾不同的感覺,因為它在明、暗背景下都能獲得很好的對比度,達到一種極富衝擊力的視覺效果,吸引用戶的注意。
  • APP設計風格對比:扁平化、極簡、Material Design
    主要的APP設計風格大致分為以下三種:扁平化(Flat Design )、極簡、Material Design(谷歌APP設計風格)APP設計風格是指APP通過主要的幾種顏色搭配、頁面布局和界面交互體驗等給用戶呈現出的整體視覺感受。下面我們就來重點分析下這三種目前主流的APP設計風格的區別。
  • 扁平化名片設計
    來源:crazyleafdesign今天的教程非常實用,將會教你利用PS打造簡約、充滿現代感的名片。
  • 給Leaf:為什麼扁平化設計更好
    朋友Leaf看完蘋果開發者大會之後,在朋友圈抱怨扁平化設計,我跟貼告訴他說:扁平化設計很好,但是好在哪裡我寫不下,得另寫一篇長文來論述。抱怨ios扁平化設計的傢伙們,起碼把系統升級到了ios7以上才會那麼說。而我因為喜歡擬物化設計的緣故,迄今為止一直沒有升級我的主用手機,且讓它呆在ios6。你看,捍衛自己的審美就得用行動而非言辭。從蘋果推出扁平化設計之始,我就非常討厭這種變化。經過了接近一年時間的堅決討厭,我突然醒悟,並開始接受這種新的設計風格。首先,從純功利的角度去看,擬物化設計是沒有未來的。
  • APP扁平化界面設計方法!
    文/劉楠交互界面是人機互動的渠道,扁平化的界面設計是以設計或者優化人的行為為出發點的,其關注的是人的心理和行為,其目的是為了提升用戶在使用軟體時的良好體驗。扁平化界面設計並不是完全的抵制裝飾效果,而是合理適度的使用裝飾效果,合理適度的裝飾效果是指在不影響用戶對功能的使用的同時滿足用戶的審美需求。①拒絕特效。扁平化界面設計追求的是信息傳遞的直觀明了,具體表現去掉了多餘的透視、紋理、漸變以及3D效果的元素,注重減少信息的裝飾元素,減少圖片的分層效果。
  • 8種字體排版設計技巧,建議收藏!
    在2018年的各種設計當中,我們看到了更加大膽的字體排版設計。纖細的字體似乎出現的頻率越來越低,而大膽的色彩、銳利的輪廓以及漸變的效果,甚至自定義的細節,都讓字體設計越來越多樣,精彩絕倫。如果你仔細觀察這些年的字體排版設計的變化,會發現每種設計趨勢都在逐漸遠離原本的扁平化設計,越來越不那麼保守。
  • 為什麼網站建設越來越趨向扁平化設計?
    簡約的網站設計讓文字更突出, 所以在這種設計風格中,字體尤為重要,有很大一部分美感是字體帶來的。扁平化設計是未來網站設計的主流,不僅僅是因為簡潔,更是為了適應手機端用戶的體驗。現在的網站設計大多偏向於扁平化。那麼,除了這點原因之外,還有哪些原因導致網站設計偏向扁平化呢?
  • 你應如何理性對待扁平化設計?
    去除繁雜裝飾的極簡主義界面設計正當時。扁平化設計聚焦兩點:視覺的極簡主義,功能的最優表達。用最簡單的用戶界面達成最詳備的功能。在革新了由iPhone建立的擬物時代後,扁平化成為設計風格的領導者。大家都認為蘋果iOS7採用扁平化設計是」改朝換代」的信號:業內領軍企業蘋果都做出了改變,那麼你還有什麼理由不去緊跟潮流呢?
  • 掌握5個設計技巧,一點都看不出小,實用又漂亮
    掌握5個設計技巧,一點都看不出小,實用又漂亮因為現在的房價高漲,越來越多的人買不起房子,而二手房市場相對來說就比較吃香,不知道大家有沒有發現,在之前的房子設計的概念基本上都是臥室大,客廳小,和現在的房屋戶型設計剛好相反,因為當時的人們比較注重實際生活情況,而現在的人們則比較注重外表的光鮮亮麗。那麼當我們買了二手房客廳小的戶型怎麼辦呢?
  • 扁平化為什麼會成為設計行業發展趨勢?
    我們都知道自動iOS 7開始,蘋果就規範了2px到底線框圖標,這樣的圖標不僅小巧切精緻,正是從這開始,蘋果開啟了一種設計語言——2px線框。在iOS系統中越來越多的應用都採用扁平化的設計,例如:控制面板燈空間採用了不通欄的大圓角卡片設計,他不像Material design的小圓角卡片那樣呆板,大圓角也會使iOS視覺更輕快。而在應用內,採用了通欄的卡片設計。在ios 13中,卡片化的設計也越來越多地出現在圖文排版中。
  • 設計案例|品牌 Logo 都約好了一起扁平化
    這個Logo,設計理念來自一個旋轉中的地球,象徵著足不出戶也能看遍天下事的精神。在新logo的設計上,設計師摒棄斜體、轉用黑框白字,成為我們今天看到的BBC標誌。Google徹底取消了Logo中字母的陰影效果,提供一種「扁平」的視覺效果。這也是當時的一種流行風格,其實,蘋果iOS也是在當年走向扁平化。新Logo同樣採用扁平化設計,但Logo中的字母變得更「圓」了。