網(wǎng)頁設(shè)計的新趨勢:類扁平(譯文)

在擬物(skeuomorphic)風(fēng)格時代崛起祟偷,扁平風(fēng)格以簡約的方式風(fēng)靡數(shù)年。然而卫旱,它也在大眾口味的變化和技術(shù)進(jìn)步中變化著佑吝。
類扁平(Ryan Allen解釋為“扁平2.0”)與過去的完全扁平風(fēng)格已經(jīng)青出于藍(lán)而勝于藍(lán)。


iPhone iOS 6&iPhone 6 Apps

受瑞士國際主義風(fēng)格的簡約風(fēng)格影響鳖擒,扁平化從不同媒介及年代吸收營養(yǎng)溉浙。在這篇文章中,我們將看到這種風(fēng)格的7種特點蒋荚。
這些特點可以為特定優(yōu)點單獨使用戳稽,也可以合并起來有一個更大的扁平風(fēng)格。但是開始你的“扁平之旅”之前期升,清楚扁平風(fēng)格的優(yōu)點和缺點也是非常重要的惊奇。


優(yōu)點

  • 有利于響應(yīng)式設(shè)計
  • 提高系統(tǒng)和導(dǎo)航的易用性
  • 結(jié)構(gòu)化布局和清晰化視覺,提高視覺成熟度
  • 加快加載時間
  • 簡單的排版加強(qiáng)可讀性


    圖片來源:christmas-joy

缺點

  • 不容易做好
  • 簡潔的風(fēng)格會削弱指示性
  • 容易出現(xiàn)無聊的風(fēng)險
  • 由于普遍性而顯得無個性

如何使用播赁?

底紋

在扁平2.0時代颂郎,陰影增加了深度和復(fù)雜性而不會犧牲簡約的特性使得扁平化更具吸引力。在《網(wǎng)頁設(shè)計趨勢2015-2016》所述容为,這是扁平化設(shè)計的新補(bǔ)充乓序,使得舊風(fēng)格有了新活力。

Image Source: Duffy & Partners

雖然過去幾年有過更長坎背、更深的陰影替劈,但最近這種趨勢變得更加微妙。圖片中Duffy & Partners的產(chǎn)品是非常少和不顯眼得滤,但是還是增加了一點額外的視覺興趣陨献。


動態(tài)顏色

為了彌補(bǔ)視覺效果,扁平化設(shè)計包含了動態(tài)色彩懂更,尤其是鮮艷的色彩湿故。這些有能量的色彩的碰撞避免了單個元素組合出現(xiàn)的沉悶現(xiàn)象阿趁。

Image Source: CSS Conference EU.

這些有活力的色彩從一開始就有了最具識別性的特征。上述網(wǎng)站CSS Conference 采用了傳統(tǒng)扁平方式坛猪,并使用了柔軟和快樂的顏色脖阵。因為顏色的使用如此重要, Flat UI Colors 已經(jīng)幫你收藏了最有效的色板墅茉。


簡單的排版

一如既往的命黔,扁平化設(shè)計的排版保持簡單和易于閱讀——使用無襯線字體和統(tǒng)一的線條寬度。


*Image Source: Intercom.*

如上所例就斤,字體并不需要強(qiáng)調(diào)悍募,而且文字非常容易閱讀。這就讓用戶把注意力放在有趣的圖片上洋机。
由于它強(qiáng)調(diào)可讀性坠宴,其受歡迎程度滲透到其他需要簡約設(shè)計的領(lǐng)域。我們可以看到這種扁平設(shè)計文本使用大幅圖片绷旗、超大文本喜鼓、文字居多的網(wǎng)站。


幽靈按鈕

最近時髦的一個設(shè)計元素是幽靈按鈕(ghost button):它與扁平設(shè)計非常搭配衔肢,并不引人注意庄岖,但是仍然可以識別為按鈕。


*Image Source: SCEATT.*

按鈕內(nèi)的文本增加了注意效果角骤。幽靈按鈕的極少注意力屬性適合扁平效果隅忿,并使得其最顯著特性之一。相對與本文的其他屬性邦尊,幽靈按鈕幾乎可以使用在其他任何風(fēng)格背桐。


極簡主義

扁平化設(shè)計與極簡主義一起可以使用許多原則,例如易用性與簡潔性蝉揍。

*Image Source: Pelican Books.*

雖然看起來它看起來很容易牢撼,但是極簡主義遠(yuǎn)比看起來復(fù)雜。更少的元素意味著必須更考究的設(shè)計疑苫。


圖標(biāo)化

由于屏幕上顯示的只有最基本的元素,圖標(biāo)需要更多的細(xì)節(jié)和靈氣(flair)使得設(shè)計更有趣纷责。

*Image Source: Stash Flat Icons.*

圖標(biāo)變得越來越大捍掺,可以容納更多細(xì)節(jié),并成為一個網(wǎng)頁元素表達(dá)的支柱再膳。如上所例挺勿,Stash Flat Icons,每個圖標(biāo)風(fēng)格都已蘊藏在其中:明亮的色彩喂柒,卡通風(fēng)的設(shè)計不瓶,還有足夠多的細(xì)節(jié)禾嫉。


突出色彩(Accent Colors)

扁平化設(shè)計的傳統(tǒng)顏色并不會完全過時。扁平化設(shè)計確實以更明亮的色彩方式標(biāo)準(zhǔn)化了蚊丐。


*Image Source: C2s.*

在單一的背景上呈現(xiàn)鮮艷的顏色熙参,給予設(shè)計師更多控制權(quán),更需要充分思考給與舍麦备。
特別是基本色孽椰,白與黑色使得鮮艷顏色脫穎而出。


結(jié)論

扁平化設(shè)計慢慢影響到其他的網(wǎng)頁設(shè)計風(fēng)格中凛篙,而且混合設(shè)計已經(jīng)像其他單一風(fēng)格一樣變得流行黍匾。如果你想使用扁平化設(shè)計,不要猶豫的使用其中一種或兩種所述特點:這些特點可以使你的風(fēng)格脫胎換骨呛梆。
想知道更多扁平化設(shè)計技巧锐涯,以及更多9個扁平設(shè)計趨勢,免費下載185頁的《網(wǎng)頁設(shè)計趨勢2015-2016》填物,了解來自阿迪達(dá)斯纹腌、蘋果、谷歌融痛、范思哲等公司的實例壶笼。

閱讀原文

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市雁刷,隨后出現(xiàn)的幾起案子覆劈,更是在濱河造成了極大的恐慌,老刑警劉巖沛励,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件责语,死亡現(xiàn)場離奇詭異,居然都是意外死亡目派,警方通過查閱死者的電腦和手機(jī)坤候,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來企蹭,“玉大人白筹,你說我怎么就攤上這事×律悖” “怎么了徒河?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長送漠。 經(jīng)常有香客問我顽照,道長,這世上最難降的妖魔是什么闽寡? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任代兵,我火速辦了婚禮尼酿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘植影。我一直安慰自己裳擎,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布何乎。 她就那樣靜靜地躺著句惯,像睡著了一般。 火紅的嫁衣襯著肌膚如雪支救。 梳的紋絲不亂的頭發(fā)上抢野,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天,我揣著相機(jī)與錄音各墨,去河邊找鬼指孤。 笑死,一個胖子當(dāng)著我的面吹牛贬堵,可吹牛的內(nèi)容都是我干的恃轩。 我是一名探鬼主播,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼黎做,長吁一口氣:“原來是場噩夢啊……” “哼叉跛!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蒸殿,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤筷厘,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后宏所,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酥艳,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年爬骤,在試婚紗的時候發(fā)現(xiàn)自己被綠了充石。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡霞玄,死狀恐怖骤铃,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情坷剧,我是刑警寧澤惰爬,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站听隐,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏哄啄。R本人自食惡果不足惜雅任,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一风范、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧沪么,春花似錦硼婿、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至殉摔,卻和暖如春州胳,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背逸月。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工栓撞, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人碗硬。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓瓤湘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親恩尾。 傳聞我的和親對象是個殘疾皇子弛说,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內(nèi)容