|
温馨提示：细读本文需要8分钟，速读仅需4分钟。 “在吗？” “能不能帮我设计个海报呀？” “预算是多少呢？” “嗨呀大家都是朋友了谈啥价钱呀！ “图片和内容都准备好了你往上一丢就好了。 我太忙了不然我就自己来了。” “嘟嘟…嘟…’” "歪？歪在吗？？一个海报而已，这么小气！” 上面的情景我想各位设计师应该都遭遇过， 是不是当时心里就有一亿个mmp要塞他嘴里！ 顺着电话线掐死对方！ 在外行眼里设计师总是那么廉价，以为我们只需要坐在电脑前随便排排版就完成了甲方爸爸的需求。 为什么用户可以清晰的从一张海报中读取内容？都是设计师经过精心排版组合调整图文关系才达到的效果！好的设计是无形中提高用户体验的！如果甲方爸爸要随便丢一丢文字图片，那我推荐你排一个这种图给对方↓↓↓ (皇帝黄搭配手写体，低调奢华有内涵！） 那么图片和文字该如何搭配协调才能有一个舒适的排版呢？今天小编就来从三个方面教你怼让你随便丢文字和图片的甲方爸爸（当然是付钱的那种，免费要求设计的可以让他另请高明科科） 咳咳咳，正文开始之前，先解决一个历史遗留问题，px和pt的区别，因为这个问题，打卡群都快炸了~ 一、像素单位 要讲对齐那么对于单位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到对齐在用户体验中的重要地位吗?优秀的设计师们之所以优秀就是因为他们在作品中运用了这些神奇的法则而让他们的作品拥有了良好的用户体验。所以说多读书多分析优秀作品为己所用才是最快捷的进步方式！
------ 商业转载请联系作者获得授权，非商业转载请注明出处！ |
|
|
