被吹爆的杂志化风格,到底有多好?
3年前
收藏 3
1
【摘要】:不看还真不知道
很多设计师经常说,现在 扁平化风格盛行,很难做出亮眼的设计。因此,我把我一直都在关注的杂志风格,做一次分享。 关于杂志化UI,是一个可以让UI界面焕然一新的风格语言 。也许大家曾经有了解过,但是真正去使用的设计师还是少之又少。我相信,看完今天的文章,在下半年不管是改版还是创新设计,对你来说都有一定的思路转变和创意启发。
什么是杂志化风格?
过去很长的时间,设计风格一直都在循序渐进的改变。在扁平化设计风格出来时,杂志化风格在UI中就应允而生。有人说杂志风格是扁平化设计?这仅仅只是说对一半。杂志化风格,它更像是瑞士平面风格的一种演化,但又有独特的地方。
在生活中,具有设计感的书籍,我相信大家第一时间会想到杂志,毕竟很多设计师会经常看杂志或者买这类书籍。杂志,之所以受到大家喜爱,也是因为他不拘一格的版式与布局,打破了常规的设计思路。
追求UI界面杂志化设计,也正是目前突破纯扁平化设计最好的方式之一 。华为EMUI10设计理念基于杂志化风格版式,这也是他们UI系统语言最大的改变,华为设计师将这一理念贯穿到了系统的各个界面中。
对杂志风格有了基础了解,可能大家可能想问,为什么要在UI中使用杂志风格的设计?下面我们一起来看看使用杂志风格的优势。
在UI中使用的优势
说到杂志化UI界面,可能大家还是不太清楚为什么要开始重视。我们现阶段移动端设计同质化比较严重,打开任何一个产品APP首页,基本差异化很小很小,没有多少特色。每次做设计改版,出来的界面变化还是不大,还是常规操作。我相信大家都想做得更好,都想经过自己之手的设计出来是让人眼前一亮的。
那么,如果在设计改版时,融入杂志风格在整个系统语言里面,也许可以让你的产品焕然一新出现在用户面前。
09UI设计工作室
上图源自09UI设计工作室 的一个车载HMI中控屏首页设计,是不是突破了传统的设计方式?设计中带有杂志化风格UI语言;同时,在地图使用三维风格,整体看上去空间感和纵深感都有了,所以最终出现在我们面前是眼前一亮的感受。
杂志化设计排版相对会更自由一些,比较倾向个性化版式或者偏移布局、叠加布局设计。当然也可以在杂志风格设计中运用网格系统,在规律性版式中也有设计感气质。
2021-IF设计奖-A-RT.COM
对版式布局的讲究、字体的层级、图片选择的苛刻,色彩的克制等,这些使得杂志风格在UI中应用毫无违和感,反而就是为了UI设计而诞生。
杂志风格的美学特征
影响杂志风格美学特征点有:大字体、网格布局、空间留白、图形符号、大图、偏移布局、叠加排版等7大关键特征,也是这些特征点相辅相成,共同构建一个页面的风格体系。试想,当用户打开你的应用,感受如杂志一般精美的画面,是一种什么样的心情?就好像在阅读一本杂志,从而极大提升用户视觉上的美感指数。
下面我们就来看下每个特点在界面中,是如何表达的。
△ 大字体 :界面设计中,可以去使用大标题字体,来制造强烈的对比冲突。这里,我们先不考虑字体家族,毕竟系统里面一般使用默认字体。
△ 网格布局:系统设计语言遵循一定网格规律,使得界面简约大气。
△ 空间留白 :利用界面空间的留白来增强内容,让界面充满呼吸感。这就是为什么我们经常看到高级感的设计,在版式上留白很多是有一定原因的。
△ 图形符号:这里说的图形符号,是在排版设计中使用的一些修饰元素,比如可以是品牌图形,又或者与整个系统语言强关联的图形,也可以是字体图形化。
△ 大图 :图片是影响杂志风格的重要因素,图片质量的好坏直接影响整体气质,使用的图片一定要简约干净,突出主题。
△ 偏移布局:如果说网格布局是在设计中,保持规律性排版,那么偏移布局就是打破这种规律性,让界面视觉冲击力倍增。
△ 叠加排版 :文字与图片叠加,增加杂志风格的形式感,还可以在滑动过程中增加错层运动微动画。
在上面的案例中,大家是否发现,影响杂志风格美学的7大特征,元素之间其实并非全部独立,而都是互相影响着。因此我们在做设计时候,最好不要去孤立的运用。
总结
作为设计师,大家也要清楚,设计风格只是我们的手段,我们不仅仅是关心风格与形式,也更加需要关注产品体验。如何通过设计传达产品气质?如何将信息内容有效准确传达给用户这是第一条件。其次在这基础上如何做到差异化创新,在众多产品中脱颖而出,是一件长期的事情。在追寻趋势风格的同时,不要忘记抬头看路,与大家共勉。
本文由广告狂人作者: 功夫UX 发布,其版权均为原作者所有,文章为作者独立观点,不代表 广告狂人 对观点赞同或支持,未经授权,请勿转载,谢谢!
1
-已有1位广告人觉得这个内容很不错-
扫一扫
关注作者微信公众账号