最新消息:文章中包含代码时,请遵守代码高亮规范!

设计四大原则之二 – 对齐【原创】

UI设计 余, 浩冉 75浏览 0评论

关于设计中的对齐性原则

(文后有PDF版本电子书链接)

《写给大家看的设计书》由人民邮电出版社在2009年发行后,至今已发行第四版 ,在看完这本书后,即使是非科班出身的你,也可以利用书中的一些小技巧,进行基础的设计,并且使你的设计没有那么“糟糕”。

在书中,详细说明了设计中的四大基本原则:

对比:避免元素太过相似。如果元素不同,就让他们截然不同 
重复:视觉要素在作品中重复出现,增加条理性和统一性 
对齐:每一元素与另一元素有某种视觉联系。另外观清晰、精巧、清爽 
亲密性:彼此相关的项归组在一起,建立一个视觉单元。组织信息、减少混乱、结构清晰亲密性

今天,我们就来讨论一下“关于设计中的对比原则”

在新手设计中常出现这样的问题: 习惯性居中对齐、文本与图片随意摆放、不考虑页面上的其他项。

正常的对齐原则是:任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种联系。如果页面上的一些项是对齐的,会得到一个更内聚的单元,它们之间会有一条看不见的线把彼此连在一起。

对齐按照简单的情况可以大致分为三种:左对齐,居中对齐,右对齐;

左对齐:文本或块以自身的可视左边界线为基准,进行对齐。

居中对齐: 文本或块以自身的可视中心点的Y轴为基准,进行对齐。

右对齐: 文本或块以自身的可视右边界线为基准,进行对齐。

如下书中配图:
图1图2文本项都进行了分组,有合理的亲密性,且文本本身居中对齐,并在页面上也居中展示。虽然这是一种合理的对齐方式,但边界是“软”的;实在看不出来那条“对齐线”的强度。图3文本右对齐,尽管这是一条看不见的线,但它很明确,连接了这两组文本的边界,正是这个边界的强度为布局提供了力度。

下面是两张报告封面,图1居中对齐,居中对齐会营造一种正式、稳定的外观,这种外观显得很稳重,但是通常也比较乏味,可阅读性较差,视觉流向较散,无法建立较明确的视觉指示线。图2利用强烈的的左对齐,创造出一条无线胜有线的右对齐线,不但指示了一条视觉流向,使可阅读性变强,还能给人留下更精美的印象,而且那条看不见的右对齐线更提供了强有力的对齐基准,可以将上下两部分的文本内容连在一起。

总结:

对齐:页面上的任何东西都不能随意安放,每个元素都应当与页面上的另一个元素有某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。

《写给大家看的设计书pdf版》—链接:https://pan.baidu.com/s/1aDSosrLNy4QDaVcQjBuEOg 
提取码:8108 

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/25145.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Leo的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!