被吹爆的杂志化风格，到底该如何运用？

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

很多设计师经常说，现在扁平化风格盛行，很难做出亮眼的设计。因此，我把我一直都在关注的杂志风格，做一次分享。关于杂志化 UI，是一个可以让 UI 界面焕然一新的风格语言。也许大家曾经有了解过，但是真正去使用的设计师还是少之又少。我相信，看完今天的文章，下半年不管是改版还是创新设计，对你来说都有一定的思路转变和创意启发。

什么是杂志化风格？

过去很长的时间，设计风格一直都在循序渐进的改变。在扁平化设计风格出来时，杂志化风格在 UI 中就应允而生。有人说杂志风格是扁平化设计？这仅仅只是说对一半。杂志化风格，它更像是瑞士平面风格的一种演化，但又有独特的地方。

在生活中，具有设计感的书籍，我相信大家第一时间会想到杂志，毕竟很多设计师会经常看杂志或者买这类书籍。杂志，之所以受到大家喜爱，也是因为他不拘一格的版式与布局，打破了常规的设计思路。

追求 UI 界面杂志化设计，也正是目前突破纯扁平化设计最好的方式之一。华为 EMUI10 设计理念基于杂志化风格版式，这也是他们 UI 系统语言最大的改变，华为设计师将这一理念贯穿到了系统的各个界面中。

对杂志风格有了基础了解，可能大家可能想问，为什么要在 UI 中使用杂志风格的设计？下面我们一起来看看使用杂志风格的优势。

在 UI 中使用的优势

说到杂志化 UI 界面，可能大家还是不太清楚为什么要开始重视。我们现阶段移动端设计同质化比较严重，打开任何一个产品 APP 首页，基本差异化很小很小，没有多少特色。每次做设计改版，出来的界面变化还是不大，还是常规操作。我相信大家都想做得更好，都想经过自己之手的设计出来是让人眼前一亮的。

那么，如果在设计改版时，融入杂志风格在整个系统语言里面，也许可以让你的产品焕然一新出现在用户面前。

△ 09UI 设计工作室

上图源自 09UI 设计工作室的一个车载 HMI 中控屏首页设计，是不是突破了传统的设计方式？设计中带有杂志化风格 UI 语言；同时，在地图使用三维风格，整体看上去空间感和纵深感都有了，所以最终出现在我们面前是眼前一亮的感受。

杂志化设计排版相对会更自由一些，比较倾向个性化版式或者偏移布局、叠加布局设计。当然也可以在杂志风格设计中运用网格系统，在规律性版式中也有设计感气质。

△ 2021-IF 设计奖-A-RT.COM

对版式布局的讲究、字体的层级、图片选择的苛刻，色彩的克制等，这些使得杂志风格在 UI 中应用毫无违和感，反而就是为了 UI 设计而诞生。

杂志风格的美学特征

影响杂志风格美学特征点有：大字体、网格布局、空间留白、图形符号、大图、偏移布局、叠加排版等 7 大关键特征，也是这些特征点相辅相成，共同构建一个页面的风格体系。试想，当用户打开你的应用，感受如杂志一般精美的画面，是一种什么样的心情？就好像在阅读一本杂志，从而极大提升用户视觉上的美感指数。

下面我们就来看下每个特点在界面中，是如何表达的。

△ 大字体：界面设计中，可以去使用大标题字体，来制造强烈的对比冲突。这里，我们先不考虑字体家族，毕竟系统里面一般使用默认字体。

△ 网格布局：系统设计语言遵循一定网格规律，使得界面简约大气。

△ 空间留白：利用界面空间的留白来增强内容，让界面充满呼吸感。这就是为什么我们经常看到高级感的设计，在版式上留白很多是有一定原因的。

△ 图形符号：这里说的图形符号，是在排版设计中使用的一些修饰元素，比如可以是品牌图形，又或者与整个系统语言强关联的图形，也可以是字体图形化。

△ 大图：图片是影响杂志风格的重要因素，图片质量的好坏直接影响整体气质，使用的图片一定要简约干净，突出主题。

△ 偏移布局：如果说网格布局是在设计中，保持规律性排版，那么偏移布局就是打破这种规律性，让界面视觉冲击力倍增。

△ 叠加排版：文字与图片叠加，增加杂志风格的形式感，还可以在滑动过程中增加错层运动微动画。

在上面的案例中，大家是否发现，影响杂志风格美学的 7 大特征，元素之间其实并非全部独立，而都是互相影响着。因此我们在做设计时候，最好不要去孤立的运用。

总结

作为设计师，大家也要清楚，设计风格只是我们的手段，我们不仅仅是关心风格与形式，也更加需要关注产品体验。如何通过设计传达产品气质？如何将信息内容有效准确传达给用户这是第一条件。其次在这基础上如何做到差异化创新，在众多产品中脱颖而出，是一件长期的事情。在追寻趋势风格的同时，不要忘记抬头看路，与大家共勉。

手残党的福音！一篇教程让你get四种手绘风格！

Hi，大家好，我是娅一。

欢迎关注作者微信公众号：「功夫UX」