前言
平面设计的基础是排版, 字体, 颜色, 这篇是排版的学习笔记.
不管是网页设计, 还是平面设计, 只要你想表达内容, 就离不开文字, 图画 (多媒体). 而当把一堆内容放在一起时, 就需要排一排, 弄整齐. 这样才容易阅读.
而这个过程就叫排版咯.
参考:
知乎 – “四大设计原则”在排版中的应用 (本篇例子取自这里)
Youtube – [排版 #1] 非设计师也该学的排版知识：视觉动线 - oooooohmygosh
人人 – 那些很熟悉但又叫不出名字的设计法则（4）：倒金字塔法则
8年资深设计师：间距不会调？掌握这一个点，从此不再迷茫！(主要讲 spacing 间距)
Optical Effects in User Interfaces (主要讲视觉体验和视察)
Youtube – 網頁設計教學 - 10個要訣：迅速提升你的設計觸覺
Youtube – 12 编辑设计（排版）（排版需要注意的文字和图片问题）
网页设计中的元素
文字, 图片 (多媒体), nav, buttom, form 这些是常见的元素
排版的目的就是要把这些元素整齐的排一排, 让游览者有好的游览体验.
四大原则
排版有四大原则: 对齐, 对比, 亲密性, 一致性.
有点像面向对象的原则一样, 你 follow 原则就顺风顺水, break 原则就麻烦多多.
所以可以的话, 尽量依据原则去排版.
对齐
这个叫艺术对齐, 1 秒钟你看不出规则就是艺术.
这个叫居中对齐, (1 秒就看出来)
这个叫左对齐. (1 秒就看出来)
对齐的目的就是减少读者的眼睛活动. 要知道移动眼睛是很累的事情, 正常人一旦感知到眼睛的移动它就会离开你的页面了,
常见的对齐方式就是左中右, 上中下. 简单说就是有线条 (隐形的). 让眼睛知道动线 (阅读路线图), 不需要做大幅度移动 (一下左边一下右边就不好), 那样就 ok 了.
对比
当页面有 2 个信息时, 眼睛就不知道看哪一个. 也就是所谓的没有重点. 说话要有重点. 排版也需要.
读者 1 秒内没用找到重点(起点), 他就会离开了.
“对比” 就是要解决这个问题. 让 2 个东西形成对比, 其中 1 个胜出就是重点.
常用的对比手法:
1. 大小, 大看的清楚嘛
2. 颜色, 亮色刺眼睛嘛
3. 空间, 一个元素周围都是空白, 比较容易聚焦. 会引起眼睛注意
4. 海拔 (material design 的 elevation), 元素越靠近眼睛越引起注意嘛
关键就是眼睛对什么敏感, 就用那个来凸显重点.
亲密性
Spacing 空间 / 间距
在讲亲密性之前要先讲一下 spacing (间距 / 空间).
元素之间需要有空间. 密密麻麻会给人压迫感, 就好像读文章没有段落, 是不给人喘口气吗?
所以元素之间要有 spacing, 要有一种可以呼吸的感觉, 空气可以在空间流动.
亲密性
亲密性指的是元素之间的关系. 内容这么多, 一定有分组的概念.
在做 spacing 的时候, 会刻意让有 "关系" 的元素间距小一点 (亲密一点), 让没有 "关系" 的元素间距大一点 (远一点就不亲嘛)
这样眼睛就知道这一堆是一组的, 另一堆是下一个部分了. 这样不仅可以喘气, 也可以快速过滤找寻.
一致性
什么叫一致? 就是做法一样. 手法越多就越不一致. 所以在设计的时候, 我们会刻意限制字体, 字号, 颜色, 间距的数量.
尽可能用几招就打天下. 因为用户在游览网站时是很费力气的. 而且时间很紧迫, 他的目的性很强, 就是要资讯 (我指的是企业网站)
如果他在游览第一页时, 眼睛已经知道了你的设计使用红色作为标题, 起到第二页, 他扫描标题的时候就会找红色. 而你却换了一个颜色...完了, 它会找不到.
而这种挫败感会让眼睛通知手指点击关闭. 你的顾客就走掉了.
所以一致性的归属感也是非常重要的.
总结
上面说的这些原则都离不开眼睛, 游览体验.而且都是比较逻辑的分析.
但设计不仅仅讲逻辑, 也讲 feel. 尤其平面设计的范围比较广泛, 就好比歌曲创作一样, 艺术一点也是可以的.
而网页设计 (企业) 会比较像命题创作. 目的性很清楚. 用户习惯也比较清楚.
甚至有 conversion first 的感念. 红色 CTA 点击数多, 那就红色. 完全 a/b test 驱动也行.
在流水线的开发方式下, 用规则去设计, 出来的作品一定缺乏特色. 但是做网站的, 谁又在意特色? (除了第一次做的老板)
又有谁会记得... 哇, 那个网站做的很有特色啊, 我游览过一次就忘不了啊...