擬物(skeuomorphic)風格時代崛起,扁平風格以簡約的方式風靡數年。然而,它也在大眾口味的變化和技術進步中變化著。
類扁平(Ryan Allen解釋為“扁平2.0”)與過去的完全扁平風格已經青出于藍而勝于藍。
iPhone iOS 6&iPhone 6 Apps
受瑞士國際主義風格的簡約風格影響,扁平化從不同媒介及年代吸收營養。在這篇文章中,我們將看到這種風格的7種特點。
這些特點可以為特定優點單獨使用,也可以合并起來有一個更大的扁平風格。但是開始你的“扁平之旅”之前,清楚扁平風格的優點和缺點也是非常重要的。
優點
有利于響應式設計
提高系統和導航的易用性
結構化布局和清晰化視覺,提高視覺成熟度
加快加載時間
簡單的排版加強可讀性
圖片來源:christmas-joy
缺點
不容易做好
簡潔的風格會削弱指示性
容易出現無聊的風險
由于普遍性而顯得無個性
如何使用?1底紋
在扁平2.0時代,陰影增加了深度和復雜性而不會犧牲簡約的特性使得扁平化更具吸引力。在《網頁設計趨勢2015-2016》所述,這是扁平化設計的新補充,使得舊風格有了新活力。
Image Source: Duffy & Partners
雖然過去幾年有過更長、更深的陰影,但最近這種趨勢變得更加微妙。圖片中Duffy & Partners的產品是非常少和不顯眼,但是還是增加了一點額外的視覺興趣。
3動態顏色
為了彌補視覺效果,扁平化設計包含了動態色彩,尤其是鮮艷的色彩。這些有能量的色彩的碰撞避免了單個元素組合出現的沉悶現象。
Image Source: CSS Conference EU.
這些有活力的色彩從一開始就有了最具識別性的特征。上述網站CSS Conference 采用了傳統扁平方式,并使用了柔軟和快樂的顏色。因為顏色的使用如此重要, Flat UI Colors 已經幫你收藏了最有效的色板。
5簡單的排版
一如既往的,扁平化設計的排版保持簡單和易于閱讀——使用無襯線字體和統一的線條寬度。
Image Source: Intercom.
如上所例,字體并不需要強調,而且文字非常容易閱讀。這就讓用戶把注意力放在有趣的圖片上。
由于它強調可讀性,其受歡迎程度滲透到其他需要簡約設計的領域。我們可以看到這種扁平設計文本使用大幅圖片、超大文本、文字居多的網站。
6幽靈按鈕
最近時髦的一個設計元素是幽靈按鈕(ghost button):它與扁平設計非常搭配,并不引人注意,但是仍然可以識別為按鈕。
Image Source: SCEATT.
按鈕內的文本增加了注意效果。幽靈按鈕的極少注意力屬性適合扁平效果,并使得其最顯著特性之一。相對與本文的其他屬性,幽靈按鈕幾乎可以使用在其他任何風格。
8極簡主義
扁平化設計與極簡主義一起可以使用許多原則,例如易用性與簡潔性。
Image Source: Pelican Books.
雖然看起來它看起來很容易,但是極簡主義遠比看起來復雜。更少的元素意味著必須更考究的設計。
11圖標化
由于屏幕上顯示的只有最基本的元素,圖標需要更多的細節和靈氣(flair)使得設計更有趣。
Image Source: Stash Flat Icons.
圖標變得越來越大,可以容納更多細節,并成為一個網頁元素表達的支柱。如上所例,Stash Flat Icons,每個圖標風格都已蘊藏在其中:明亮的色彩,卡通風的設計,還有足夠多的細節。
12突出色彩(Accent Colors)
扁平化設計的傳統顏色并不會完全過時。扁平化設計確實以更明亮的色彩方式標準化了。
Image Source: C2s.
在單一的背景上呈現鮮艷的顏色,給予設計師更多控制權,更需要充分思考給與舍。
特別是基本色,白與黑色使得鮮艷顏色脫穎而出。
結論
扁平化設計慢慢影響到其他的網頁設計風格中,而且混合設計已經像其他單一風格一樣變得流行。如果你想使用扁平化設計,不要猶豫的使用其中一種或兩種所述特點:這些特點可以使你的風格脫胎換骨。
想知道更多扁平化設計技巧,以及更多9個扁平設計趨勢,免費下載185頁的《網頁設計趨勢2015-2016》,了解來自阿迪達斯、蘋果、谷歌、范思哲等公司的實例。
PDF地址:http://pan.baidu.com/s/1bn4sTP1(英文版,也可僅作觀賞),也可在公眾號回復“PDF”直接進入
原文地址:http://speckyboy.com/2015/08/05/almost-flat-design-web-trend/,
譯者:飯特稀,轉載請注明出處。歡迎分享、轉發、點贊。
使用圖標讓設計更扁平化一些?還想要免費的圖標?
恭喜你,你來對了地方,我們搜集全網,找到了十家免費制作圖標的網站。還不趕緊收藏起來?
天下沒有免費的午餐,一些網站會要求你在使用這些圖標時標明出處或者分享鏈接。一定要確認圖標的使用規則。
廢話不多說,接下來就是滿天飛的資源,接好了:)
做平面設計的時候怎么能少得了矢量的小貼紙呢?
Fotor懶設計是一個在線平面設計平臺,當然也提供了海量的矢量貼紙給大家。這里不僅有基礎、常用的圖標,還有許多不同風格、充滿創意的貼紙。
你可以根據自己的需要,在搜索欄進行搜索,然后點擊將貼紙添加到畫布中。不僅如此,你還可以在線對貼紙進行顏色、透明度等編輯,讓貼紙更具個性。
對了,登錄Fotor后,你還可以收藏你最喜歡、最常使用的貼紙到你的收藏夾,方便下次使用,是不是很方便?
www.fotor.com.cn
Icon-Font是阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺。
設計師將圖標上傳到Iconfont平臺,用戶可以自定義下載多種格式的icon,平臺也可將圖標轉換為字體,便于前端工程師自由調整與調用。
Icon-Font
gravual
如果是想要比較個性和私人化的圖標,Gravual的兩個系列你絕對不能錯過。它的線性圖標完美闡釋了極簡風格,其中包含了廚房系列和戶外系列。要將這些圖標用于商業項目,務必先聯系網站。
Behance
如果想找一些專業的圖標,Behance是你最好的選擇。它里面的眾多圖像的設計感是獨一無二的。在搜索的時候,你需要先構思要輸入的詞,因為它的搜索引擎不像其他網站那么容易捕捉信息。當時它真的值得你多花一些時間去進行探索。
Web Design Freebies
這個網站幾乎搜集了全網的圖標。只需一眼,Web Design Freebies就能給你帶來一場圖標風暴。
Captain Icon里的矢量圖標不僅吸睛,而且能轉化成任意格式、顏色、和尺寸。標出圖像出處,你就可以在任意私人和商業用途使用它的圖標。
在這個網站里,沒有垃圾信息,高質量的圖標和屬名提示正等著你去發現。所有的圖標均為手工繪制,且全部免費,不需要分享鏈接。
Dribbble
Dribbble聚集了大量的設計師,里面的圖標全都是精心設計,適用于私人和商業用途。不是每個人都能在這個網站里輕易找到心儀的圖標,你需要花時間好好去找。
DeviantArt
DeviantArt擁有近20萬個出自大師之手的免費圖標,全部可以免費下載 。有一部分需要表明出處,所以在下載之前檢查一遍。有些設計師只允許DevientArt社區會員使用圖標。
Best PSD Freebies
Best PSD Freebies包含了全網PSD格式的圖標,你可以在上面直接免費下載所有的圖標。
本文由Fotor小編傾情撰寫、整理。
歡迎移步Fotor懶設計-www.fotor.com.cn
Fotor是全球1.9億用戶的在線快速平面設計平臺。
Fotor首創“懶設計”概念,幫助沒有設計基礎的工作者輕松完成平面設計。用戶只需拖放設計模板,或使用全能的修圖工具,即可快速完成設計。