什么是杂志化风格,UI设计该如何运用?

扁平化风格盛行的今天,如何能做出亮眼的设计?今天推荐一个“杂志风格”,供大家学习交流。

什么是杂志化风格?

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

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

5795b3ebfaf433757ee6d94c5758b8fe.jpg

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

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

在 UI 中使用的优势
说到杂志化 UI 界面,可能大家还是不太清楚为什么要开始重视。我们现阶段移动端设计同质化比较严重,打开任何一个产品 APP 首页,基本差异化很小很小,没有多少特色。每次做设计改版,出来的界面变化还是不大,还是常规操作。我相信大家都想做得更好,都想经过自己之手的设计出来是让人眼前一亮的。
那么,如果在设计改版时,融入杂志风格在整个系统语言里面,也许可以让你的产品焕然一新出现在用户面前。57fe255d7eec9c8fc8f0969d20d5b479.jpg

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

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


杂志风格的美学特征

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

下面我们就来看下每个特点在界面中,是如何表达的。60eff16a79ace14ceec116882de16433.jpgb73c00123e1ea46fbac832b88319e809.jpg

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

b80b2eb81afdd1001f6d6ebe3c676610.jpg

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

9baae7aad4403502e67a80b14b39feb9.jpg

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

3984a7fecc7b8ecce39ca6186854de02.jpg49a5f0d708490226188cc942cfdf37d2.jpg

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

7409d35866d15a330e0ebcbe2cddb7cf.jpgecaf82616a66146e9c33483d82a01f17.jpg

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

53656da2e99845823555bcece42898f6.jpg8d5f225e3ffca4eb3fb86c82cfec65e8.jpg

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

f8075f73c39ea860069425c53be80a3f.jpg

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

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


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


内容来源微信公众号:「功夫UX」

0 个评论

要回复文章请先登录注册