别忽略简单的排版对齐,好设计从这里开始……

一、像素单位

要讲对齐那么对于单位px的科普必不可少,作为一个优秀的设计师必须要练就一双像素眼。

别忽略简单的排版对齐,好设计从这里开始……

一般我们常用的软件如Photo shop新建的时候一定会有单位选项。

别忽略简单的排版对齐,好设计从这里开始……

一般常用单位是像素(px)和点(pt),那么这两个单位究竟有啥区别呢?

像素(pixel)

px ,像素英文pixel的简写。是屏幕上所显示的最小单位,当作品主要供屏幕浏览,比如:banner、App界面、网页时使用px作为单位可以精确的控制画面显示效果,但在不同分辨率的屏幕上像素的大小也会有差别。

别忽略简单的排版对齐,好设计从这里开始……

retina屏与非retina屏显示对比

点(point)

pt ,点英文point的简写。pt一般适用于打印输出,如word等办公软件。

简单来说就是当作品用于屏幕浏览时使用px比较容易掌控细节,而当作品需要打印输出时则pt比较适用。

二、界面设置与插件

工欲善其事必先利其器,对齐必备工具:网格。

界面设置

Ps属性栏上有各种对齐按钮,可以将按钮、文字、图形一键对齐。

别忽略简单的排版对齐,好设计从这里开始……

ctrl+K调出首选项可以设置网格参数,大大方便了用户对齐界面元素。注:设置完需要在菜单栏的视图-显示中勾选上网格选项。

插件推荐

GuideGuide是一款网格插件,其实本质上是和ps自带网格的功能是差不多的,它的强大之处就在于只要输入一些数字,它就会利用PS里面的辅助线自动的在你的文档中划分好网格。大大节约了时间。

别忽略简单的排版对齐,好设计从这里开始……

三、常用对齐形式

左对齐

左对齐在画面上形成了一条隐形的线,使画面更加精致。并且大多数人习惯从左到右的阅读顺序,所以可以大大提高可读性。

别忽略简单的排版对齐,好设计从这里开始……

别忽略简单的排版对齐,好设计从这里开始……

居中对齐

居中对齐是初学者常用的对齐方式,它会创建一种更正式、更稳重的外观,通常会显得中规中矩。少量文本可以居中对齐,对易读性的影响不大,如果大量文本则不合适。会因为边界的不清晰影响阅读。

别忽略简单的排版对齐,好设计从这里开始……

别忽略简单的排版对齐,好设计从这里开始……

除了以上提到的两种对齐方式,还有居右对齐、顶端对齐、底部对齐,感兴趣的小伙伴可以自己了解下,这里就不单独说了。

四、实例分析

除了要有对齐的意识,如何利用对齐和字号大小对比来划分层次对用户进行视觉引导从而提高用户体验也是非常重要的。

此网页登录页面有对齐,但是登录页面本身面积过于小,内容过于拥挤。层级对比也非常弱(还记得对比金句:如果不同就让它们截然不同吗?)以至于视线没有落脚点。登录和注册分为两个页面过于繁杂。

别忽略简单的排版对齐,好设计从这里开始……

而Dribbble登录页,将所有功能都井然有序的安排在一个页面中。

别忽略简单的排版对齐,好设计从这里开始……

主标题与副标题还有注册提示居中对齐,需要输入部分与推特登录说明分列左对齐,巧妙地使用对齐将需要输入的部分与说明的部分清晰的划分出来。无形中提升了用户体验。

别忽略简单的排版对齐,好设计从这里开始……

苹果官网登录页也是一样的,拥有非常好的用户体验。

别忽略简单的排版对齐,好设计从这里开始……

所有有关联的元素都清晰的排列在画面上,整个层级关系也非常明显

别忽略简单的排版对齐,好设计从这里开始……

这两个网站登录页的层级划分都非常明显,输入框—说明性文字—其它内容。

最后

说了这么多,也举了例子。大家有GET到对齐在用户体验中的重要地位吗?优秀的设计师们之所以优秀就是因为他们在作品中运用了这些神奇的法则而让他们的作品拥有了良好的用户体验。所以说多读书多分析优秀作品为己所用才是最快捷的进步方式!


分享到:


相關文章: