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