恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
版式设计之对齐
0.0°
2018-12-26 原创文章 经验/观点 举报 3478 3 7 0

作为设计新手,在工作中你可能经常会到遇到这样的情况:做了一个自我感觉还不错的设计,但是客户一直就是不认可,不断的挑细节,找问题。

如果连你自己都不能理直气壮的说出这个设计好在哪里,又如何说服客户呢?
所以我决定给你补充一些设计理论是相当必要的。Image title

所有的商业设计可以拆分成两个关键步骤:Image title

信息解构的意思就是我们得分析内容,把内容的层次梳理出来。哪些是重要的,哪些是只需要稍稍提到。厘清信息层次之后,需要用什么样的视觉力度,心里有就数了。这就相当于设计有了骨架。
视觉传达是服务于信息架构的,相当于在上一步的设计骨架之上丰满肉体,穿好衣服,化好妆。最终呈现在消费者面前的才会是一个有内涵的大美女。
而版式设计要讲的,就是梳理信息层次以及搭好设计的骨架。
要搭好骨架的第一步,就是建立信息的条理性。
四条基本排版原则,它们分别是:Image title

按照首字母的缩写,它们就被称之为:CRAP原则。
学会了这四条原则,你就可以很快速的将页面的秩序感建立起来。

今天这篇教程,我就给大家讲透版式设计基础中的基础——对齐。Image titleImage title

对齐在设计上有两层含义:

1、对齐 是将元素按照统一的规律摆放。
2、群化 是将画面中同类型的元素相互归类到一起。

第一条很好理解,对齐就是对齐嘛!
第二条怎么理解呢?我们通过一个例子来展示:Image title

没有对齐方式时,画面一片混沌。
当这些元素被对齐并群化之后,通过隐藏的对齐线将它们分成了不同的组,虽然物理上它们之间还是分开的,但是你肯定会认为它们之间已经产生了联系,在视觉上它们事实上形成了一个单元。Image title

正是由于对齐所产生的视觉联系,在实际的设计中,我们一般把同一类信息,用同一种对齐方式归类到一起。这会让我们的设计看起来更加的有条理性。

总之,严谨的对齐方式会让你的作品:Image title

合理的对齐方式可以带来秩序感,让你的设计稿看起来更加严谨、专业。

无序混乱会让人不适,进而产生不安全感。
有序则会给人安稳的感受。例如整齐划一的阅兵给人强大的安全感、力量感。

例如不同国家的阅兵就会看出不同的效果。
整齐划一的是这样。Image title

如果不够齐步,那就会变得很不专业。Image title

甚至。。。Image titleImage title

对齐是排版中建立条理性的第一步,我们常用的对齐方式有以下6种:

Image title

Image title

Image title

我们来看下具体应到的设计中是什么样的。

左对齐

左对齐是阅读效率最高的对齐方式,人的浏览视线都是从左往右移,因此大段需要阅读的文案,最好采用左对齐的方式排版。比如说你现在正看到的这段文案。

应用案例:Image title

Image title


右对齐

右对齐的方式与人的视线移动方向相反,因此这种对齐方式会显得比较个性,就是你爱看不爱的感觉。所以右对齐的应用场景不太多,有时候只是因为需要排版上更平衡,才使用右对齐。

应用案例:Image titleImage title

居中对齐

居中对齐是十分霸气的一种对齐方式,显得很正式、严肃、有力量,阅读性上可以牢牢抓住用户眼球。一些高端、成熟的品牌比较喜欢用,喊口号的宣传海报最好也采用居中对齐。
需要指出的是,居中对齐具有对空间的独占性。也就是说,在同一个单元模块中,最好只有一个居中对齐的内容,这样可以充分发挥居中对齐的大气。Image title

应用案例:Image titleImage title

两端对齐

两端对齐用于特殊文本处理,是指将一部分元素通过调整间距的方式使得两端完全对齐,强制处理成四方形,这样可以达成工整严谨的效果。
两端对齐不仅仅用于处理文本,也常用于编排多个类似的视觉元素,在整齐中通过细节的变化形成近似画面,达到强化设计感的目的。

应用案例:Image titleImage title

顶对齐

顶对齐和底对齐是纵向排版才会用到的对齐方式,纵向排版我们都知道起源于古代的书简,因此采用纵向排版虽然不利于阅读,但是可以营造出复古的文化氛围。
一般纵向排版都是顶对齐,这样可以相对的更好阅读。

应用案例:Image titleImage title

底对齐

底对齐虽然也是纵向排版,不过很少应用在文字排版上面,在需要比较差异性的数据图表上应用多一些。

应用案例:Image titleImage title

前面讲的对齐方式都很容易理解,因为它们都是按照参考线,进行物理上的对齐。
在实际工作中,还存在着一类特殊的对齐方式,那就是视觉对齐。

什么是视觉对齐?

视觉对齐就是当元素的重量分布不均匀,采用物理的对齐方式就会造成视觉上的落差时,我们需要去目测元素的视觉重心,然后以元素的视觉重心为参考点,进行对齐。

听起来特别拗口是吧?
意思就是:看起来对齐!

看个案例就明白了。

下面这三个LOGO,如果按照严格的物理对齐,它们是这样的效果:Image title

去掉参考线之后:Image title

只要眼睛不瞎,都能看出这不对劲是吧,这也太不整齐了,那问题出在哪呢?
问题就出在两方面:
1、三个LOGO的视觉密度不一样,导致它们的大小和重量感差异很大。
2、三个LOGO的视觉重心都位于不同的水平线。

弄清楚了原因,我们就着手修改:
第一步,把亚马逊与腾讯两个LOGO缩小点,让它们仨在视觉上的面积和重量更相近。Image title

第二步,目测他们的视觉重心,然后拉参考线对齐。Image title

最终结果:Image title

可能你会有点疑问,改变LOGO大小和寻找视觉重心,好像都是凭感觉啊?这样靠谱吗?
靠不靠谱取决于你的专业程度,想成为了优秀的设计师,没有一个固定的公式,只能通过大量的练习,将自己训练成像素眼。还是那句话,专业和业余的区别就在于你对这些小细节的敏感度。
当然上面的案例稍微有点极端,但其实视觉对齐的问题 ,工作中经常会遇到,比如说你画了几个图标,精心的调整了它们的大小和位置:Image title

前端小哥哥打开设计稿,把参考线一拉,然后就跑过来咆哮:这些图标大小都不一致,也没对齐。。。你也太不专业了吧!!
这个时候你就可以不慌不忙的拿起你的保温杯,喝一口枸杞泡茶,然后把这篇的教程丢给他。Image title

名片设计,是最简单又最困难的设计。
说它简单,是因为创作空间小,如果要求不高,随便排个版,可能十分钟就能出稿。
说它复杂,是因为虽然创作空间小,但是排版的变化却可以是无穷的,在小小的创作空间里面要有很好的发挥。
比如说这张名片,大概就是打印店里的名片模板的水平。整体采用左对齐,看起来没有硬毛病,就是四个字:毫无特色。Image title

稍作调整,虽然还是左对齐,但是重心分布更平衡一些,信息的分类也更清晰了。然而依然谈不上设计感。Image title

我们再梳理下信息层次。

强化个人信息,细化信息归类,字号加大对比,在对齐方式上也加入一些变化,阅读的节奏感是不是一下就出来了?Image title

再来尝试一下竖版,纵向空间大了之后,竖排文字就可以搞起来。
采用最常见的居中对齐,底下的小字用横向居中,这样整个结构就平稳了很多。二维码夹在中间恰好可以形成一点视觉上的变化,是不是显得有点点霸气了?Image title

好像还不够霸气?那就来个顶天立地吧!
将名字放到硕大无比,彰显出主人的自信。看到这样一张名片,想不留下深刻印象都不行!!!Image title

居中对齐略显正式?缺少变化?那就试一下错落有致吧。
将信息分成左右两边排版,形成视觉落差。
左边采用竖向文字,插入横排的小字形成变化。
右边横排文字,采用类似两端对齐,但是整体呈竖向的视觉效果,和左边形成呼应。
可以看到这样的排版用到的对齐方式会更多,整体上很工整,但是细节中又有变化。Image title

好了,这期的内容就是这样了。
看完上面的内容之后,你不会再觉得对齐是很简单的事了吧?
关于对齐的知识点,不知道你都GET到没有?


文章来源于: 公众号:旁门正道 庞少棠其版权均为 公众号:旁门正道 庞少棠 所有,文章内容系作者个人观点,不代表 设计教程网 对观点赞同或支持。如需转载,请注明文章来源。



更新:2018-12-26

收藏

3人已收藏

  • 27

    作品

  • 11

    粉丝

  • 0

    关注

  • ps曲线原理
  • 制作融化风格的立体字教程
  • 网页设计师入门必备知识指南
  • banner海报的“分层设计”
相关标签
设计分享经验

    猜你喜欢

      2018-12-26 原创文章 经验/观点 举报 3478 3 7 0

      版式设计之对齐

      0.0°

      你确定要举报版式设计之对齐

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年12月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      3
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录