被吹爆的雜志化風(fēng)格，到底該如何運(yùn)用？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

△ 空間留白：利用界面空間的留白來(lái)增強(qiáng)內(nèi)容，讓界面充滿呼吸感。這就是為什么我們經(jīng)常看到高級(jí)感的設(shè)計(jì)，在版式上留白很多是有一定原因的。

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

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

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

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

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

總結(jié)

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

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