文档章节

提升网页设计感的实用方法:合理利用对齐

王尘宇
 王尘宇
发布于 2017/09/07 00:04
字数 1533
阅读 4
收藏 0
利用栅格系统进行对齐,这是很常见的事情。本文谈论的对齐可不是简简单单的左对齐和右对齐,我们谈论的是整体角度上对齐的一些方法。合理的对齐能让你的设计更诱人,也能更方便用户浏览,提供极佳的阅读体验。几乎页面上所有的元素都需要对齐,无论是文本,还是图像,抑或一组组视频,以及一堆堆按钮和链接。栅格能够帮助你进行对齐,但是不同的元素对齐方法也不尽相同,各自有各自的奥妙。不要为了对齐而对齐,要为了用户体验而对齐,这才是本文宣讲的目的。 对齐决定了元素的摆放位置以及和其他元素之间的空间关系。好的对齐能够让元素与元素之间的间隔更流畅,让元素彼此的搭配更协调。  

为什么所有的元素都需要对齐?

  很多人不喜欢栅格系统,因为有所限制,他们不希望自己的创意受到妨碍。 通俗上讲,栅格就是一大堆能够帮助我们创造区块的栏;而CSS中,排版的核心是盒模型,想要打破栅格很难。  

为设计加入对齐

当然,并不是每一次都需要全部对齐。对不对齐,取决于你的设计作品或者工作方式。或者,可以在设计时不管对齐,大致创意完成后,再给设计加入对齐。 要注意:不要因为对齐,而使设计过于死板,让网站丧失了趣味性和探索性。对齐意味着你需要开始钻研布局技巧和栅格了——不过这次不用6栏栅格,用的是4栏。 6col-4col 全屏覆盖的栅格——6+4。使用软件为Gridset App.当你的设计很适合使用栅格布局时,那么请用之。让元素对齐栅栏,布局可选项非常丰富,即便是最简单的4+6。

主要元素的对齐

  文本 和CSS对齐相同:左、右、中,调整。十分的简单   Justified text is always questionable; it can have an adverse effect on the readability of the content www.awwwards.com www.awwwards.com 对齐和可读性,需要好好权衡。不能光顾着对齐,而忽略了整体设计和可读性。 例如,少量的文本可以尝试居中对齐,而大量的文本居中对齐会影响可读性。 标题居中对齐效果很棒,但是标题的效果还取决于和正文的对照。如果标题居中对齐,而下文大量文本如果采用左对齐,效果就不佳。 The unusual centrally aligned forms inputs of wearemovingthings.com wearemovingthings.com 不同寻常的对齐方式还要考虑到文化差异,有部分文化从右到左阅读,大部分文化都是从上到下,从左到右。因为大部分文化都是从左到右阅读,所以尽量不要采用右对齐,可读性很糟糕。右对齐一般在页底呈现,展示联系地址、联系信息,或者在顶部出现,展示导航链接   图像 图像的对齐很麻烦,因为每一张图的尺寸都不一样。小尺寸的图像易于放置,而且不影响内容。大的图像会打破阅读节奏,因此最好不要用过大的图像。一般有两种方法:第一种是把图像放在内容之外(开头或者结尾),另一种方法是文本内穿插图片。第一种方法很简单,可以采用全尺寸的大图,看起啦效果也不错,方便响应式设计。   mixed-alignment 第二种方法稍稍复杂,图像的位置要把握好。图像首先要和文本区域合理对齐(左或右),这是一种方法。另一种方法是图像稍稍超出文本区域。 在文本区域内嵌入图像,如果做得巧妙,文图结合的够好,会提高可读性、趣味性。   背景图像 背景图像是个限制,尺寸、图像选择都很困难。当背景图像和文本对齐结合时,背景图像需要符合CSS规则:绝对定位,上还是下?左还是右?这时候就需要根据自身设计来考虑背景图像的设置了。如果你的背景图像是重复的图案,便需要考虑图案与内容的对齐关系,如何利用背景图像来更好展现前景元素?     元素组 无论是设计还是开发,当谈到“模块”这个词的时候,广义讲,含义差不多,都是一组彼此联系的元素。比如说一组链接便是一个链接模块,图像+覆盖其上的标题大文本也可以是标题模块。   有两点需要考虑:模块内部元素的对齐?模块与模块之间的对齐?   模块内部元素的对齐: 当然元素组并不一定要紧挨着,比如说Logo和导航链接这种,可能会在顶部和底部同时出现。这种元素组就一定要对齐,虽然当你浏览底部的时候会看不到顶部,但是如果上下Logo没有对齐,用户能“感觉”出来,这也很重要,一致性设计。     模块与模块之间的对齐: 再比方说链接,某些导航链接可能做得稍稍复杂,文章开头一个大标题主链接,然后下文又提供了稍小的副链接,同时还画出了一个图标,也能链接,这边是一个复杂的导航模块,可以尝试着用这个模块与其他模块对齐。  

总结

现在你对对齐有了一定的了解,希望从现在开始,设计时考虑对齐因素,让设计更加有序,有组织的布局元素、元素族。利用栅格进行对齐,尽量保证每一个元素都对齐合理。   原文地址: tutsplus

© 著作权归作者所有

共有 人打赏支持
王尘宇
粉丝 1
博文 450
码字总数 469557
作品 0
西安
私信 提问
文字排版中的设计四原则(三)

3.对齐 在网页设计中,页面上的元素不能随意摆放,每一项都要与页面内容存在某种联系。对齐也是网页设计必不可缺少的一部分,它可以帮助设计师做出非常吸引眼球的设计,这也是是优秀网页设计...

博为峰教研组
2016/11/11
17
0
2014年全球网站设计的15个趋势

1、超长网页设计 以往的长网页会挤满内容,我们习惯于下滑滚动网页来获取信息,但并非是挤满内容枯燥的长网页,而是由更多的留白空间以及快速响应技术合并而成的超长网页设计。这样的设计能使...

fjxichao
2015/01/15
0
0
成功的网页设计:关于细节的一切

  注意对齐,对比,类型效果和颜色,因为这些项目可以使你的网站设计或打破。      虽然几乎任何人都可以使用这些工具来构建网站,但是最成功的设计都具有一些特点。这些网站往往是组织...

爱码农
2017/12/29
0
0
这两天的设计入门知识的学习总结

这几天看了几本设计方面的书,有的只是扫扫就过了。 下面是个人的观感,非常主观,记录下来给以后的自己参考。 写给大家看的设计书 超好。亲密、对齐、重复、对比。四大原则,最高指导。 写给...

祁达方
2015/12/16
93
0
文字如何实现完美UI?文本排版设计告诉你

一部手机,电量充足,网络通畅,就足以让我们打发一天的时光,尽情沉浸在手机时代的缤纷世界里。这个信息资源无穷尽的手机网络世界,是设计师和开发者们在不停的探索中一路一步精心打造。如何...

jongde
2017/10/23
0
1

没有更多内容

加载失败,请刷新页面

加载更多

nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
0
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
1
0
推荐转载连接

https://www.cnblogs.com/ysocean/p/7409779.html#_label0

小橙子的曼曼
昨天
3
0
雷军亲自打造的套餐了解下:用多少付多少

12月28日消息,小米科技创始人兼CEO雷军微博表示,小米移动任我行套餐方案,原则上就是明明白白消费,用多少付多少,不用不花钱!上网、电话和短信都是一毛钱,上网0.1元/M,电话0.1元/分钟,...

linuxCool
昨天
6
0
协议简史:如何学习网络协议?

大学时,学到网络协议的7层模型时,老师教了大家一个顺口溜:物数网传会表应。并说这是重点,年年必考,5分的题目摆在这里,你们爱背不背。 考试的时候,果然遇到这个问题,搜索枯肠,只能想...

Java干货分享
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部