實(shí)例教學(xué)!25個(gè)幫你運(yùn)用好極簡風(fēng)格的設(shè)計(jì)方法

2017-3-29    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里


@喪心病狂十六夜貓 :在過去的幾年中我們時(shí)常會(huì)聽見別人說“極簡風(fēng)格(英: Minimalism)”這個(gè)詞,但這究竟是什么,我們又該怎么使用呢?這一次,就讓我們一起來看看極簡風(fēng)格具體的使用方法與參考案例吧。

極簡風(fēng)格,就是將設(shè)計(jì)省略到最小限度,只留下真正引人注意的內(nèi)容,這樣一種表現(xiàn)風(fēng)格。通過極簡風(fēng)格,可以將設(shè)計(jì)的意圖與目的更準(zhǔn)確的傳達(dá)出來。

極簡風(fēng)格看起來很簡單,但完成作品也是需要大量的練習(xí)和長時(shí)間的制作的。

目錄

  1. 保持一致
  2. 探索隱藏信息
  3. 讓空間的連接變得有趣
  4. 更加聰明
  5. 更加有效
  6. 使用網(wǎng)格
  7. 考慮實(shí)用性和功能性
  8. 保持平衡
  9. 打破規(guī)則
  10. 文字游戲
  11. 留白空間是萬能空間
  12. 參考別的選擇
  13. 添加質(zhì)感
  14. 嘗試發(fā)散思維
  15. 嘗試更容易理解
  16. 擴(kuò)大規(guī)模
  17. 不只有黑白
  18. 考慮靈活性
  19. 轉(zhuǎn)化為象征
  20. 嘗試使用的圖標(biāo)
  21. 嘗試使用的字體
  22. 小小改變,大大不同
  23. 集中注意
  24. 嘗試使用對比
  25. 不變的設(shè)計(jì)

01. 保持一致

簡約風(fēng)格的logo或品牌商標(biāo),能強(qiáng)烈的表現(xiàn)圖片的主旨,有助于識(shí)別品牌的文字的準(zhǔn)確描述。上述的logo案例非常簡約,配色也控制在最小限度,能夠在整個(gè)品牌廣泛使用。已成為一個(gè)具有一致性,令人印象深刻的品牌。

02. 探索隱藏信息

簡約風(fēng)格的設(shè)計(jì)看起來并沒有什么設(shè)計(jì)創(chuàng)意,這種事是不可能的。事實(shí)上,當(dāng)厭倦了復(fù)雜的設(shè)計(jì)時(shí),探索被隱藏的設(shè)計(jì)要素的關(guān)聯(lián)性反而成了有趣的地方。在上述案例中,由于簡約風(fēng)格的設(shè)計(jì),「OPERA」、「OPERA AUSTRALIA」、「OZ OPERA」這樣的單詞通過有趣的組合巧妙地隱藏起來了。

03. 讓空間的連接變得有趣

利用簡約風(fēng)格來表現(xiàn)出至今為止都沒有考慮過的設(shè)計(jì)空間的鏈接性吧。正如上面的案例,思考就像這些名片排列一樣,如何讓你的設(shè)計(jì)獲得更好的延展性吧。

04. 更加聰明

簡約風(fēng)格需要取出所有沒有必要的素材,所以經(jīng)??紤]這些素材會(huì)在哪里用到是必須的。以上述為例,logo在品牌之中組合,完成了非常迷人、非常簡單的設(shè)計(jì)。

05. 更加有效

簡約風(fēng)格省去所有不必要的東西,是為了專注于信息本身。以上述為例,有效的表現(xiàn)出了名片上所有的聯(lián)絡(luò)信息。在這種情況下,就沒有必要添加多余的設(shè)計(jì)。

06. 使用網(wǎng)格

對于設(shè)計(jì)來說網(wǎng)格是非常方便的工具,特別是在簡約風(fēng)格中。設(shè)計(jì)元素少的情況下,使用網(wǎng)格系統(tǒng)也是很方便的。在上述案例中,標(biāo)題與正文,通過網(wǎng)格進(jìn)行排列的干凈簡單,同時(shí)也完成了有效的布局。

07. 考慮實(shí)用性和功能性

簡約風(fēng)格在功能性方面也非常有魅力。我們來看一下有著干凈感覺的這個(gè)案例,他也實(shí)現(xiàn)了內(nèi)容的便于閱讀。通過添加文字階層,可以快速移動(dòng)到內(nèi)容頁面,在功能性上可以說也是非常出色的。

08. 保持平衡

攝影照片與印刷文字的視覺關(guān)系,需要有著絕妙的平衡。對良好的設(shè)計(jì)來說,沒有什么特別的理由限制,只是注意不要讓一個(gè)元素壓倒另一個(gè)元素。在這組案例中,上面的使用的簡單的照片和能讓人集中注意力的巨大引用文字相組合;而下面的則使用了具有質(zhì)感的復(fù)雜照片和小字體的文本相匹配,各個(gè)頁面互相調(diào)和,取得了設(shè)計(jì)的平衡。

09. 打破規(guī)則

在這之前也介紹過,使用之前從沒有考慮過的簡約風(fēng)格設(shè)計(jì)方法進(jìn)行設(shè)計(jì)也是可以的。在上述的案例中,將logo的一部分反轉(zhuǎn),讓人難以閱讀。但是,由于設(shè)計(jì)十分簡單,反而讓人感受到了它的魅力。

10. 文字游戲

請不要忘了簡約設(shè)計(jì)中的文字,也是非常重要的武器。如同上面的案例一般,你也可以靈活的使用視覺性的元素。通過在文字上添加波浪形的效果就可以獲得強(qiáng)烈的視覺效果,而無需添加其他圖像。簡單方便的完成設(shè)計(jì)。

11. 留白空間是萬能空間

被稱作Negative Space的留白空間,通常只是被認(rèn)為是一片空白,但你可以利用他完成設(shè)計(jì)上的平衡。在上述的案例中,通過使用足夠的留白空間,我們完成了優(yōu)雅簡約的設(shè)計(jì)。

12. 參考別的選擇

想一想比純白畫布還要簡約的設(shè)計(jì)是什么呢?不僅僅是在屏幕上,在印刷時(shí)所使用的技術(shù)也可以為你所用。如同上述案例中文字使用浮雕效果一樣,為了讓簡約風(fēng)格更有深度,該使用怎樣的效果呢?

13. 添加質(zhì)感

極簡風(fēng)格雖然很容易被想象成顏色單調(diào)的組合,但這技術(shù)并不是每一個(gè)都適用的。通過為你的設(shè)計(jì)導(dǎo)入紋理,可以有效的增加簡約風(fēng)格的深度。在上述案例中,通過簡單的配色和紋理相組合,調(diào)整照片和品牌商標(biāo)的平衡,完成了有效的設(shè)計(jì)。

14. 嘗試發(fā)散思維

在簡約風(fēng)格中,我們也可以參考像上述案例一樣的元素配置、構(gòu)圖順序,通過設(shè)計(jì)表現(xiàn)出輕松有趣的感覺。沿著頁面的一端配置字體,表現(xiàn)出獨(dú)特的創(chuàng)意和醒目的效果。

15. 嘗試更容易理解

利用的設(shè)計(jì)元素少,信息全體的溝通將會(huì)更加直接。這種技術(shù)在網(wǎng)頁上特別有用,像上述案例一樣,我們通過順著頁面滾動(dòng)閱讀,直接將信息的意圖傳達(dá)出來,幫助用戶理解我們所有的想法。

16. 擴(kuò)大規(guī)模

簡約風(fēng)格能將用戶第一眼看到時(shí)的視線集中起來,為了更正確的表達(dá)效果,我們可以擴(kuò)大簡約風(fēng)格的規(guī)模。在上述案例中,首先將引號(hào)里的幾行字作為最大的設(shè)計(jì)要素,接著是照片,最后是文章。有目的的靈活使用擴(kuò)大縮小這樣簡單的設(shè)計(jì),表現(xiàn)出作者希望用戶如何去觀看的效果。

17. 不只有黑白

對許多人來說,使用單色的配色便是簡約設(shè)計(jì),然而并不是那樣。利用相對較少的配色(1-3種顏色最合適),能很好的起到集中視線的效果。在上述案例中,使用明亮的黃色和黑白的logo相組合,也能表現(xiàn)出印象深刻的簡約設(shè)計(jì)。

18. 考慮靈活性

簡約設(shè)計(jì),特別是從應(yīng)用的觀點(diǎn)來看,有助于提高靈活性。就像上面這個(gè)例子,由簡單的對稱字體和兩種顏色作為配色構(gòu)成。在此,多虧了簡單的而獨(dú)特的簡約設(shè)計(jì),可以不用不破壞品牌形象,就能很容易進(jìn)行更改。

19. 轉(zhuǎn)化為象征符號(hào)

簡約設(shè)計(jì),對設(shè)計(jì)的象征化來說是最合適的??紤]一下那些相關(guān)聯(lián)的對象究竟有什么意思吧參考上述案例,文字的配置看起來悲傷的臉,讓設(shè)計(jì)變得令人印象深刻。

20. 嘗試使用的圖標(biāo)

圖標(biāo),從APP用到電腦的工具欄,幾乎每天都在使用的便利的小物件,也可以有效的利用在簡約設(shè)計(jì)上?;蛟鰪?qiáng)使用的便利性,或減少頁面上的文字,幫助引導(dǎo)用戶的視覺都是非常不錯(cuò)的。來看上述案例,頁面全體的圖標(biāo)統(tǒng)一,作為導(dǎo)航非常的靈活。

21. 嘗試使用的字體

簡約設(shè)計(jì)喜歡較少的元素,對于字體來說也是一樣的。如上述案例,只使用一到三個(gè)的字體,表現(xiàn)出簡約的功能性設(shè)計(jì)是最合適的。由于謹(jǐn)慎的控制使用了少量的字體,也大大地提高了可讀性。

22. 小小改變,大大不同

簡約之美也是如此,他能通過微小的變化產(chǎn)生截然不同的結(jié)果。參考上述案例,只是在非襯線字體上加了兩條線,再不改變配置的情況下就能表現(xiàn)出漂亮的視覺效果。

23. 集中注意

不要忘記,設(shè)計(jì)是為了內(nèi)容服務(wù)的。極簡主義與通常的商業(yè)向內(nèi)容相比,馬上就能確認(rèn)內(nèi)容的簡單排列布局能更靈活的運(yùn)用。在上述案例中,通過使用這種技術(shù),將視線集中在了內(nèi)容上。

24. 嘗試使用對比

對比強(qiáng)烈的設(shè)計(jì),能幫助你創(chuàng)建一個(gè)像內(nèi)容等便于理解的設(shè)計(jì)。參考上述案例,黑色的背景與鮮艷的內(nèi)容相對照,簡單的就能完成具有魅力的設(shè)計(jì)。

25. 不變的設(shè)計(jì)

極簡主義是設(shè)計(jì)不可或缺的一部分,他有著跨越時(shí)間仍能被人喜愛的可能。包含在設(shè)計(jì)中的要素越少,就越不會(huì)拘泥于特定的樣式和趨勢。我們可以參考谷歌的主頁這一顯而易見的案例。上面是十年前和今日的谷歌主頁。雖然有一些小的變化,但專注的空間和內(nèi)容依舊沒有變,這正是跨越時(shí)代的設(shè)計(jì)。

最后

總的來說,極簡主義與其說是將美的東西再現(xiàn)出來,倒不如說它是一種設(shè)計(jì)的思路。

注意限制文字和字體的數(shù)量,做出更流暢更具統(tǒng)一感的設(shè)計(jì)吧。利用階層,在網(wǎng)格上配置,讓文字的易讀性達(dá)到最大吧。

對于顏色,靈活的運(yùn)用單色的配色,但不要被規(guī)則所束縛。通過追加一部分顏色,強(qiáng)調(diào)設(shè)計(jì)的特定的點(diǎn),也能很好的集中人們的視線。

一般來說,不論是調(diào)色板中使用的顏色,還是配置中的圖像,好好想想還有那些是可以被刪除的。要不斷的去濃縮,時(shí)刻考慮將更簡單的東西與之替換。簡單的說就是留下必要的,其他的一切元素都盡可能的減少。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔