很多設(shè)計(jì)師經(jīng)常說，現(xiàn)在扁平化風(fēng)格盛行，很難做出亮眼的設(shè)計(jì)。因此，我把我一直都在關(guān)注的雜志風(fēng)格，做一次分享。關(guān)于雜志化 UI，是一個可以讓 UI 界面煥然一新的風(fēng)格語言。也許大家曾經(jīng)有了解過，但是真正去使用的設(shè)計(jì)師還是少之又少。我相信，看完今天的文章，下半年不管是改版還是創(chuàng)新設(shè)計(jì)，對你來說都有一定的思路轉(zhuǎn)變和創(chuàng)意啟發(fā)。

什么是雜志化風(fēng)格？

過去很長的時間，設(shè)計(jì)風(fēng)格一直都在循序漸進(jìn)的改變。在扁平化設(shè)計(jì)風(fēng)格出來時，雜志化風(fēng)格在 UI 中就應(yīng)允而生。有人說雜志風(fēng)格是扁平化設(shè)計(jì)？這僅僅只是說對一半。雜志化風(fēng)格，它更像是瑞士平面風(fēng)格的一種演化，但又有獨(dú)特的地方。

在生活中，具有設(shè)計(jì)感的書籍，我相信大家第一時間會想到雜志，畢竟很多設(shè)計(jì)師會經(jīng)常看雜志或者買這類書籍。雜志，之所以受到大家喜愛，也是因?yàn)樗痪幸桓竦陌媸脚c布局，打破了常規(guī)的設(shè)計(jì)思路。

追求 UI 界面雜志化設(shè)計(jì)，也正是目前突破純扁平化設(shè)計(jì)最好的方式之一。華為 EMUI10 設(shè)計(jì)理念基于雜志化風(fēng)格版式，這也是他們 UI 系統(tǒng)語言最大的改變，華為設(shè)計(jì)師將這一理念貫穿到了系統(tǒng)的各個界面中。

對雜志風(fēng)格有了基礎(chǔ)了解，可能大家可能想問，為什么要在 UI 中使用雜志風(fēng)格的設(shè)計(jì)？下面我們一起來看看使用雜志風(fēng)格的優(yōu)勢。

在 UI 中使用的優(yōu)勢

說到雜志化 UI 界面，可能大家還是不太清楚為什么要開始重視。我們現(xiàn)階段移動端設(shè)計(jì)同質(zhì)化比較嚴(yán)重，打開任何一個產(chǎn)品 APP 首頁，基本差異化很小很小，沒有多少特色。每次做設(shè)計(jì)改版，出來的界面變化還是不大，還是常規(guī)操作。我相信大家都想做得更好，都想經(jīng)過自己之手的設(shè)計(jì)出來是讓人眼前一亮的。

那么，如果在設(shè)計(jì)改版時，融入雜志風(fēng)格在整個系統(tǒng)語言里面，也許可以讓你的產(chǎn)品煥然一新出現(xiàn)在用戶面前。

△ 09UI 設(shè)計(jì)工作室

上圖源自 09UI 設(shè)計(jì)工作室的一個車載 HMI 中控屏首頁設(shè)計(jì)，是不是突破了傳統(tǒng)的設(shè)計(jì)方式？設(shè)計(jì)中帶有雜志化風(fēng)格 UI 語言；同時，在地圖使用三維風(fēng)格，整體看上去空間感和縱深感都有了，所以最終出現(xiàn)在我們面前是眼前一亮的感受。

雜志化設(shè)計(jì)排版相對會更自由一些，比較傾向個性化版式或者偏移布局、疊加布局設(shè)計(jì)。當(dāng)然也可以在雜志風(fēng)格設(shè)計(jì)中運(yùn)用網(wǎng)格系統(tǒng)，在規(guī)律性版式中也有設(shè)計(jì)感氣質(zhì)。

△ 2021-IF 設(shè)計(jì)獎-A-RT.COM

對版式布局的講究、字體的層級、圖片選擇的苛刻，色彩的克制等，這些使得雜志風(fēng)格在 UI 中應(yīng)用毫無違和感，反而就是為了 UI 設(shè)計(jì)而誕生。

雜志風(fēng)格的美學(xué)特征

影響雜志風(fēng)格美學(xué)特征點(diǎn)有：大字體、網(wǎng)格布局、空間留白、圖形符號、大圖、偏移布局、疊加排版等 7 大關(guān)鍵特征，也是這些特征點(diǎn)相輔相成，共同構(gòu)建一個頁面的風(fēng)格體系。試想，當(dāng)用戶打開你的應(yīng)用，感受如雜志一般精美的畫面，是一種什么樣的心情？就好像在閱讀一本雜志，從而極大提升用戶視覺上的美感指數(shù)。

下面我們就來看下每個特點(diǎn)在界面中，是如何表達(dá)的。

△ 大字體：界面設(shè)計(jì)中，可以去使用大標(biāo)題字體，來制造強(qiáng)烈的對比沖突。這里，我們先不考慮字體家族，畢竟系統(tǒng)里面一般使用默認(rèn)字體。

△ 網(wǎng)格布局：系統(tǒng)設(shè)計(jì)語言遵循一定網(wǎng)格規(guī)律，使得界面簡約大氣。

△ 空間留白：利用界面空間的留白來增強(qiáng)內(nèi)容，讓界面充滿呼吸感。這就是為什么我們經(jīng)?？吹礁呒壐械脑O(shè)計(jì)，在版式上留白很多是有一定原因的。

△ 圖形符號：這里說的圖形符號，是在排版設(shè)計(jì)中使用的一些修飾元素，比如可以是品牌圖形，又或者與整個系統(tǒng)語言強(qiáng)關(guān)聯(lián)的圖形，也可以是字體圖形化。

△ 大圖：圖片是影響雜志風(fēng)格的重要因素，圖片質(zhì)量的好壞直接影響整體氣質(zhì)，使用的圖片一定要簡約干凈，突出主題。

△ 偏移布局：如果說網(wǎng)格布局是在設(shè)計(jì)中，保持規(guī)律性排版，那么偏移布局就是打破這種規(guī)律性，讓界面視覺沖擊力倍增。

△ 疊加排版：文字與圖片疊加，增加雜志風(fēng)格的形式感，還可以在滑動過程中增加錯層運(yùn)動微動畫。

在上面的案例中，大家是否發(fā)現(xiàn)，影響雜志風(fēng)格美學(xué)的 7 大特征，元素之間其實(shí)并非全部獨(dú)立，而都是互相影響著。因此我們在做設(shè)計(jì)時候，最好不要去孤立的運(yùn)用。

總結(jié)

作為設(shè)計(jì)師，大家也要清楚，設(shè)計(jì)風(fēng)格只是我們的手段，我們不僅僅是關(guān)心風(fēng)格與形式，也更加需要關(guān)注產(chǎn)品體驗(yàn)。如何通過設(shè)計(jì)傳達(dá)產(chǎn)品氣質(zhì)？如何將信息內(nèi)容有效準(zhǔn)確傳達(dá)給用戶這是第一條件。其次在這基礎(chǔ)上如何做到差異化創(chuàng)新，在眾多產(chǎn)品中脫穎而出，是一件長期的事情。在追尋趨勢風(fēng)格的同時，不要忘記抬頭看路，與大家共勉。

歡迎關(guān)注作者微信公眾號：「功夫UX」