1. 主页 > 设计资讯 > 热门新闻

布局设计中的Ui对齐

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

如果你不能告诉自己这个设计有什么好的,你怎么说服客户?
所以我决定,给你补充一些设计理论还是很有必要的。

所有商业设计都可以分为两个关键步骤:

信息解构就是要对内容进行分析,梳理内容的层次。重要的和需要稍微提一下的。理清信息层次后,就可以知道自己需要什么样的视觉力量了。这相当于设计一个骨架。【/br/】视觉传达服务于信息架构,相当于丰满身体,穿好衣服,在上一步的设计骨架上化妆。最终会呈现给消费者的是一个有内涵的美女。【/br/】版面设计要讲的是梳理信息层次,构建设计骨架。
构建好骨架的第一步是建立信息的组织。
四个基本排版原则是:

根据首字母缩略词,它们被称为:CRAP原则。【/br/】学完这四条原则,你就能很快在页面上建立起秩序感。

今天,在这个教程中,我将告诉你布局设计的基础——对齐。

对齐在设计中有两个含义:

1.对齐是根据统一的规则放置元素。
2。分组就是把图片中同类型的元素分类在一起。

第一个很好理解。对齐就是对齐!
如何理解第二条?我们用一个例子来说明:

没有对齐,画面混乱。
将这些元素对齐并分组后,通过隐藏的对齐线将其分为不同的组。虽然它们在物理上是分离的,但你肯定会认为它们已经连接在一起了,它们实际上在视觉上形成了一个单元。

正是因为对齐产生的视觉联系,所以在实际设计中,我们通常用相同的对齐方法将同类信息分类在一起。这将使我们的设计看起来更有条理。

简而言之,严格的对齐将使您的工作:

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

无序和混乱会让人不舒服,产生不安全感。
井井有条会给人一种安定的感觉。比如,一场统一的阅兵,给人强烈的安全感和力量感。

比如不同国家的阅兵会有不同的效果。
均匀度是这样的。

不跟上,就会变得不专业。

甚至。。。

对齐是排版中建立组织的第一步。有六种常见的对齐方法:

我们来看看具体的设计应该是什么样的。

左对齐

左对齐是阅读最高效的对齐方式,人的浏览视线从左向右移动。因此,对于大量需要阅读的文档,最好使用左对齐进行排版。比如你现在看的那本。

应用案例:

右对齐

右对齐和人眼睛的移动方向相反,这样对齐会更有个性,也就是你爱看不看的感觉。因此,右对齐的应用场景并不多,有时使用右对齐只是因为需要更平衡的布局。

应用案例:

居中对齐

居中对齐是一种霸气的对齐,正式、认真、有力,在阅读中能牢牢抓住用户的眼睛。一些高端、成熟的品牌更喜欢用,中间最好对齐有标语的海报。
需要指出的是,中心对齐是空独有的。也就是说,在同一个单元模块中,最好只有一个居中对齐的内容,这样才能充分发挥居中对齐的氛围。

应用案例:

对齐对齐

两端对齐是用于特殊的文字处理,通过调整间距,使一部分元素在两端完全对齐,强制成方形,可以达到整齐严谨的效果。
两端对齐不仅用于处理文本,还用于排列几个相似的视觉元素。为了加强设计感,细节的变化形成了一个近似的画面。

应用案例:

顶部对齐

顶部对齐和底部对齐是垂直排版中使用的对齐方法。我们都知道竖排起源于古代字母。所以垂直排版不利于阅读,但可以营造复古的文化氛围。【/br/】一般垂直排版都是上排,这样更容易阅读。

应用案例:

底部对齐

底部对齐虽然也是垂直排版,但很少应用于文字排版,更多应用于需要比较差异的数据图表。

应用案例:

上面提到的对齐方法很容易理解,因为它们是根据参考线进行物理对齐的。【/br/】在实际工作中,有一种特殊的对齐方式,就是视觉对齐。

什么是视觉对齐?

视觉对齐是指当元素的权重分布不均匀,物理对齐方式会造成视觉下降时,我们需要视觉检查元素的视觉重心,然后以元素的视觉重心作为对齐的参考点。

那听起来特别无礼,不是吗?
表示:看起来对齐了!

看个案例就明白了。

以下三个徽标,如果在物理上严格对齐,会产生以下效果:

移除基准线后:

只要不瞎,就能看出不对劲,对吧?这个太不平了。有什么问题?
问题出在两个方面:
1。三个LOGO的视觉密度不同,导致尺寸和重量差异很大。
2。三个LOGO的视觉重心位于不同的水平线。

搞清楚原因后,我们开始修改:【/br/】第一步是减少亚马逊和腾讯的两个LOGO,让他们的可视区域和权重更加相似。

第二,目测检查他们的视觉重心,然后拉动基准线对齐。

最终结果:

可能你有些疑惑。好像改变LOGO的大小,寻找视觉重心都是基于感觉。这个靠谱吗?
可靠性取决于你的专业水平。如果你想成为一名优秀的设计师,你只能通过大量的实践,在没有固定公式的情况下,把自己训练成像素眼。还是那句话,专业和业余的区别在于你对这些小细节的敏感。【/br/】当然,上面的情况有点极端,但实际上在工作中经常会遇到视觉对齐的问题。例如,您绘制了几个图标,并仔细调整了它们的大小和位置:

前端的小哥哥打开设计稿,拉了一下参考线,然后跑过去咆哮道:这些图标大小不一样,对齐了。。。你太不专业了!!【/br/】这时候可以拿起保温杯,喝一口枸杞泡茶,然后把这个教程扔给他。

名片设计是最简单也是最难的设计。
很简单,因为创建空很小。要求不高的话,随便安排一个版本,十分钟可能就能出稿。
之所以复杂是因为虽然创作空小,但是排版的变化可以是无穷无尽的,应该在小创作空中发挥好。
比如这张名片大概就是印刷厂的名片模板的级别。整体左对齐,看起来没有什么硬性问题,就是四个字:没有特色。

稍加调整,重心分布更加均衡,信息分类更加清晰。然而还是没有设计感。

我们来梳理一下信息层次。

加强个人信息,细化信息分类,加大字体大小,在对齐上加一些改动。读书的节奏是不是一下子就出来了?

再试试垂直版。当垂直空较大时,可以创建垂直文本。【/br/】采用最常见的对中,底部小字水平对中,整个结构流畅很多。二维码夹在中间正好可以形成一点视觉上的变化,是不是有点霸气?

好像不够霸气?然后来个顶天立地!
把名字放在一个巨大的尺度上,表现出主人的自信。看到这样的名片,不能留下深刻的印象!!!

居中对齐略正式?缺少改变?随便试试吧。【/br/】信息分左右两边排版,形成视觉间隙。
左侧使用竖排字符,插入横排小字形成变化。
右侧的横排文字采用类似两端对齐的视觉效果,但整体是垂直的,与左侧呼应。【/br/】可见这次排版用的对齐方式比较多,总体来说比较工整,但细节上有变化。

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

本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处:https://ffjianzhan.cn/xingyezixun/sjwz/391.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息