全球经典风格之杂志风

最近电商类的产品越来越偏杂志风，所以想跟大家聊下杂志风。相信大家对杂志应该很了解，图片+文字排版组合；是的，不用怀疑，杂志风就是图片+文字排版组合。

什么是杂志风格

通过以上图片我们可以发现，图片为主文字为辅形成图文并茂的杂志。我们设计的界⾯如何才能是杂志⻛？下⾯将会从设计特点、运⽤场景、如何设计、总结归纳这⼏点来进⾏分析。

它的设计特点

那么杂志风格有哪些设计特点呢？我总结了一共4条，分别是：

1. 主旨突出

2. 品牌感

3. 易读性

4. 辨识度高

1.主旨突出

你会发现以上页面干净简洁。设计元素简单，一般图片和文字。所以视觉重点往往是图片，这样画面主旨就很容易凸显。

2.品牌感

杂志图片调性起了关键性的作用，图片中的人物或是产品，融入了情感化的因素，会使得阅读者对图片产生归属感。整个品牌感就出来了。

在做品牌设计的时候可以融入品牌IP，这样可以凸显品牌同时还可以成为记忆点让用户记住我们的品牌。

3.易读性

通过图片中的人物或是产品配图了解产品，比阅读文字来的更直观，信息表达更直观。

4.辨识度高

上面说杂志就是杂志风，所以在⻛格上辨别性⽐较强，高品质图片+大标题文字元素组合几乎就可以判断它是杂志风了。

它的运用场景

我们分别来看看实际案例如何运用的？

1.在UI中的运用

杂志在APP中页面的布局有限，用户通过产品图片了解产品和它的调性，所在我们在选图的时候尽量选择与产品匹配图片。

2.在网页中的运用

这些网站巧妙运用了一个摄影图片，眼睛定位成了一个视觉锚点，让你不自觉的被吸引进去了，加上网格的排版运用，极简的内容，非常的时尚！

3.在平面中的运用

杂志风在平面中的产品不是很多，更多的是时尚杂志或者产品杂志。

杂志风格如何设计

那么杂志风的设计从那出发呢？我总结了一共4条，分别是：

1. 高品质配图

2. 字体

3. 空间感

4. 留白

1.高品质配图

同样对图片要求高品质图片，页面图片的调性起了关键性的作用，图片中的人物或是产品，融入了情感化的因素，会使得阅读者对图片产生归属感，进而对其展示的产品品牌产生一定的认知和归属。

2.字体

大标题字体是杂志风的特有的风格。通过文字的大小对比使页面富有层次感。文字常见的排版手法有两种：一种是局部叠压，一种是整体叠压，让我们来看下他们有

布局叠压—顾名思义就是文字只压住图片的一部分。通过打破画面的沉闷感，形成对比，运用得当往往会产生意想不到的结果。

整体叠压—最大化展示图片，让文字全部压在图片上。这种叠压带来的视觉冲击力很大，对文字的排版空间也很大，可以自由发挥。但是需要注意这种叠压对文字的阅读性会有一定的影响。

3.空间感

通过以上图片你会发现，图片与文字形成的空间感，文字与文字间的层叠关系，近大远小，近实远虚，引导视觉焦点，突破二维的画面限制，制造三维的视觉冲击力，塑造空间感。

3.留白

杂志风的设计元素简单「文字+图片」。太多的元素会干扰视觉。如果元素过多，那么用户的注意力会分散。设计的留白能够让用户尽快的寻找到所需要的信息。页面适当的留白可以平衡的布局，元素更清晰的呈递效果，更能吸引用户注意。

总结归纳

还是那句话杂志风主要元素图片+文字：

1、图片的选择

视觉第一秒看到的是图片本身，所以一张好的图片起到了决定性的作用。好的图片会让用户对图片产生归属感。如果前期图片拍摄修图处理不好，也会直接影响到整体效果的呈现。

2、字体的运用

标题典型大字体，在排版上图片与文字或者文字与文字通过层叠、进大远小、进实远虚等一些排版，让画面有空间感。在选择字体的时候，我们也可以根据产品调性来确定字体，这样可以确保画面的统一性。