偷偷告诉你一些UI界面的排版技巧

我在前段时间收到一个这样得问题,说:日常工作几乎都能完成,但老板总是不太满意,我自己也在做审美方面的练习,可一看自己做的,就完全觉得不是那么回事,这个怎么破?

偷偷告诉你一些UI界面的排版技巧

其实以上的问题或多或少大家都经历过,而且有些时候,最担心得也是这种,因为它貌似正处于高低不就的技法水平。类似这样的问题,我建议处于这种状态得设计师努力方向是寻找设计技法得基础源,也就是从新审视一下自己的基础环节。一般来说,在我们没法突破和进阶的时候,我们最应该做的不是继续埋头向前冲刺,而是稳下来深呼吸,回头看看自己努力过的印记,是否有漏洞,或者扎实,如果有的话就应该及时弥补。

刚才那位同学通过最终的辅助梳理后,得出了一些结果,那就是他的排版技法稍有薄弱,而且每次在做设计时,都不能很好的把控整个布局得视觉焦点,所以……他练习去了! 不能光练,我在这里也总结了一些排版得技巧与知识点,并且将研制多年的排版技巧分享给大家,希望有类似问题或正在努力的设计师们一同学习进步。

目录

  1. 拉开内容的距离,分清主次关系
  2. 规整虽好,但却死板
  3. 将图片和文字赋予层次感
  4. 根据确定内容选取字体
  5. 案例讲解
  6. 总结

01、拉开内容的距离,分清主次关系

首先第一个我要说的就是在一个界面中,最重要且最简单得一个手法就是拉开整个界面内容得距离,不管是图片和图片,还是图片和文字,都应该是带有一个有节奏感的空间距离,这样才能确保整个界面是具有呼吸感和条理性的。

偷偷告诉你一些UI界面的排版技巧

其次是要注意保持重点标题文字和内容文字得主次关系,我们一般可以通过字体粗细、大小、颜色进行主次区分,然后在外加有规律得间距,这样就可以很好的帮助我们进行内容分类分组了。

偷偷告诉你一些UI界面的排版技巧

最后一个是图片与图片之间的主次关系,比如在app设计中,有的app会有较多的图片显示(比如那种美食类和大牌服装类的app),那么,图片与图片得间距,或者图片组与图片组有节奏的间距,也可以更好的帮助我们区分一个界面内的主次板块内容。如果说有涉及到那些具有不同功能得图片展示,我们还可以通过图片大小进行区分,这样,我们就能不光单一的进行距离设定,还能再多一个纬度~大小,进行主次区分。

02、规整虽好,但却死板

这个问题不光是大家,我也会有思路固板得时候,我们总是习惯性的左对齐、右对齐、上对齐、下对齐,还有一个居中对齐,其实这并不是我们得错,在初学设计时,不管谁教排版,都会围绕四个基础对齐进行延展,倒不是不允许初学的我们创新,实在是如果不设定这个规矩得话,估计那会都能天马行空了。但也正因为这样,我们习惯了这四个排版方式,因为确实好用,还简单顺手,倒不是不想创意,时间长得了我们,可能慢慢的就忠爱这四个排版了。

偷偷告诉你一些UI界面的排版技巧

所以说,标准的四个对齐排版技法不管怎么用,一般情况下都不会出现太大问题,但也就是这样,形成了高低不就的状态,要想打破这个问题,大家应该尝试一种新的手法,那就是“错位技法”,比如内容标题和副标题得排列错位、标题和图片得穿插错位、标题和正文的排列错位、图片和图片的排列或穿插错位,等等。

以上这几个错位,是可以将界面变得更加灵活的方式,不过这里大家要注意一点,错位技法虽然灵活,但它确实较为难驾驭,这个还要看实际设计和个人技能水平情况而定,如果说不能较好的把控错位技法,我建议可以先稳妥的在实际工作中使用标准对齐,然后自己私下在用同样的内容在练习一稿,并尝试错位技法,这样既不需要重新理解界面内容模块,还能尝试新的技法,是个不错的选择。

03、将图片和文字赋予层次感

一般情况下,我们在做作界面设计时,首先想到的就是依次罗列界面中的各种元素和文字,比如一张图片,然后下面是标题,在下面说明文案/关注,最后是分享/消息/点赞/标签,按照常规做法的话,这么做相对而言比较稳妥,但同时也就缺乏了我们进行创意的探究,其实,界面设计和平面中的版式设计具有异曲同工之处,我们可以在考虑如何将界面更加视觉和条理化,既满足了极少空间更多内容的展示,又同时提升了整体视觉的呈现。

偷偷告诉你一些UI界面的排版技巧

我们可以将图片与图片进行重合(例如将银行卡类的图片设计进行层级叠加),又或者我们可以文字+图片形式的重合(例如瓷片区时的图片和文字展示),这些种种案例,其实都是帮助我们从规规矩矩的视觉角度去进行多方位的设计探索。通过以上这些层次技法表现,我们可以在视觉上更加灵活展现,并突出内容主体,丰富界面的空间关系。

04、选择贴合设计风格和气质的字体

对于选取字体,我这里不做太多讲述,主要因为它不单纯和设计有关,而是我们设计师选取的字体,到了开发那边是否能被采用并实现,目前来讲,我所见到的开发一般都是采用标准的微软雅黑、苹方等字体,也有部分又购买字体版权,比如目前我涉及到的产品就用到了方正兰亭圆简体_粗,但归根结底,字体的选取还是较为局限的。那你会问竟然没什么论述为何还要讲呢?其实在一整个界面设计内,设计师可以触碰和自我控制的字体选取还是有一些地方的,比如banner内容的字体设计和选取,大标题是否采用宋体,活动/H5界面的字体设计,等等,都是可以进行排版设计,并赋予界面视觉化的地方。

偷偷告诉你一些UI界面的排版技巧

一个界面是否好看和实用,不单纯在于简单的排版与罗列,必要的字体设计也是不可缺少的一部分,所以,在一些运营活动界面,还是建议大家多去可以选取和设计一些好的字体进行界面陪衬。正确的字体选择,而且还能够在信息和视觉两个层面给用户传递信息,错误的选择会导致误解和混乱的结果。

05、案例讲解

5.1案例一

在图一中我们可以看到设计者将搜索、主干标题/按钮,全部赋予在了一块主题渐变的背景上,然后通过白色模块的层级关系进行区分展示,作为用户的我们在第一眼视觉浏览时,就可以很明确内容/功能的前后层级,并潜意识附带有空间感,同时在视觉上也有极大的好感。

图二则和图一较为不一样,图二其实设计亮点在于主标题与内容文字的对比,包括主干标题的行间距和字间距,也是通过较为宽松的空隙进行强化呼吸感,这和我们开篇第一点提到的拉开内容的距离,分清主次关系不谋而合。

偷偷告诉你一些UI界面的排版技巧

5.2案例二

图中第一个度小满金融APP界面最上面的主干口号就是采用了我们讲到的气质文字选择,设计师采用了衬线体作为口号展示,目的是强化产品理念,并通过衬线体的芊细和坚挺来表示产品的精神与文化。

图二中则是一个概念稿,这类型稿件极适合我们缺乏排版技巧的设计师进行操练,我们看它顶部的三层磨砂半透明卡片,就是采用了图片层级关系的设计手法,通过卡片层级的关系进行设计,可以赋予整个界面的更好的空间感和推进感。

偷偷告诉你一些UI界面的排版技巧

5.3案例三

先来看一下图一,这里的图片层级和案例二里的图片层级是有所区别的,这里的层级技法作者并不是采用文字和图片,或图片和图片的层级关系,而是在图片自身上做了手法“弥散投影”,这个手法在目前主流设计里也用的非常多。

而图二就是我们第二节里说到的错位问题,界面的上半部为错位层级设计,而下半部为瀑布流的排版设计,上下两个结构技法明显不同,在产生了强烈视觉对比的同时,也给界面增添了许多的活力。

偷偷告诉你一些UI界面的排版技巧

总结

我们看似一个(375*812)PT的界面没有很多内容,但这里面同样隐藏着很多的排版技巧与知识点,也是我们设计师必须要学习和熟练掌握的重要技能之一,无论你目前从事C端还是B端,还是电商、平面,排版技巧都不排斥,反而说,它却是所有设计最基础的技法之一了,所以,在实际的工作中,我们都应该重视起来,并总是下意识的进行操练。

业界动态

看了数百份作品集后,我总结了这些问题(下)

2021-3-24 11:05:54

业界动态

银行存款余额调节对账表系统

2021-3-24 11:27:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索