前言
学平面设计有 2 种路线图
第 1 种: 平面设计 > 网页设计 > 交互设计 > UI/UX 设计 > 网页开发 (HTML/CSS/JS) > CMS (PHP/C#) > 数据库 > 服务器.
第 2 种: 上面的反过来.
我就属于第 2 种. 每次做网站就是等 designer Figma 画好后照做出来. 但是很多时候我发现设计师如果不高明的话会严重影响制作难度的, 尤其是交互组件.
于是慢慢有了自己也想学习一些基本 design theory 的动力.
什么是平面设计?
海报, Logo, 传单, 网页都需要平面设计.
传递信息有很多种方式, 比如: 声音，映像, 文字, 图片. 平面设计专注于把文字和图片通过排版, 颜色, 字体的设计. 让信息传递的变得顺畅清晰.
例子说明:
比如有一部电影要上映, 要让大众知道, 来买票观看.
设计意图
首先设计师要搞清楚, 这次设计的意图是什么 ? 比如这次是让大众来买票看电影.
传递信息
信息必须满足意图. 常见的信息包括:
演员卡斯, 导演, 电影类型, 剧情, 名字, 上映日期.
电影名字, 上映日期是必要的信息 (功能行)
演员，导演是为了号召力 (推动意图)
电影类型, 剧情属于 (推动意图)
信息成本
要提供多少信息, 取决于它是否帮助我们实现意图. 要知道信息是有成本的, 观众需要接受的信息越多, 用时就会越长, 精力消耗也越大, 为了减低这些, 设计难度就会提升. 这就是信息的成本.
权重安排
清楚了意图, 确认了信息量. 接下来就是安排信息的权重.
如果是知名导演的电影, 那么很可能会放大这个信息. 或者演员很有名也是如此.
有时候电影名字本身就很有号召力, 比如它是一部续集. 或者名字很有悬念, 直奔主题, 一定要搞清楚哪些信息是重点. 读者接收的顺序是如何.
设计
当把上面的步骤做完以后就能开始设计了. 首先找到合适的方式去表达信息. 是用图, 用文字, 用数字或者用 icon 等等.
接着用设计技巧让权重顺序凸显出来.
比如字体放大, 元素周围留白 (形成焦点), 对比色等等.
表达不是单方面的, 还需要考虑到接收者. 它们在什么情况下看到信息, 环境因素等等.
把信息 > 经过设计 > 传递给接收者 > 达到目的, 这就是整个设计的宗旨.
平面设计 vs 交互设计 vs UI/UX 设计
平面设计主要就是上面讲的, 对文字, 图像, 做排版, 颜色, 字体等设计. 倾向于视觉沟通, 1 个输出信息, 1 个接收信息.
交互设计不像平面设计那样单项, 我画你看, 它是互动的, 所以叫交互. 比如网页一般上不只是游览, 游览完之后可能需要联系, 申请, 填表格, 甚至购买.
平面关注眼睛, 交互关注眼睛同时也关注手.
UI 设计是 user interface designer. 讲的是人和机器之间如果交互沟通. 平面设计 + 交互设计 = UI 设计.
UX 和 UI 经常是一起讲的, UI/UX 设计. UX 关注人的心里层面. 比如表单很长给人的感觉就很差, 应该要分几个层次让用户 step by step 填入. 降低心里负担. 这是 UX 会关心的事情.
填表格全程用 keyboard 完成或者必须搭配 mouse, 这个就倾向于 UI 会关心的事情.
总结
它们关注的点不一样, 但目的和方法论都差不多.
平面设计: 好看 (整齐, 有结构, 有动线, 好 scan, 不伤眼睛)
交互设计: 容易操作 (手指移动量, 点击量)
UI 设计: 好看也容易操作
UX 设计: 看起来用起来很舒服 (直觉用, 学习成本低, 无心里负担, 失误代价低)
平面设计要学什么?
抽象说就是学信息呈现的方式. 具体讲就是
排版, 字体, 颜色,
印刷和网页的关系
网页的前生是印刷. 海报, 书是典型的例子.
海报, 传单, 布条, 招牌 都有共同特点, 信息量不多. 但要抢眼.
书, 杂志, 报纸, profile, catelog 的特点是信息量大. 它还可以交互 (翻页), 信息量大通常就需要目录 (导航), 要能找 (scan)
进路互联网时代. 上面的需求被放到了网页里去.
网页有一些特点:
1. 交互更多, 翻页, 滚动, 点击展开, 跳转. 所以屏幕虽然小, 但其实空间反而大了.
2. 不只人读, 机器也要读 (SEO, screen reading). 海报我可以用手画, 上色, 网页只能用 HTML/CSS, 如果 CSS 弄不出来, 那么就做不了, 或者得牺牲掉机器读, 直接用 canvas 或 img.
3. 接收者者要快, 看书一般上会慢下来, 但是看网页一般上会很快. 因为人迫切希望得到更多得信息.
网页设计额外要学什么?
除了排版, 字体, 颜色. 上面说的交互, 翻页, 滚动, 点击展开, 跳转要懂得用.
网页需要被 "制作" 出来, 所以工程化也很重要, 所谓的开发成本. designer 很少考虑印刷成本. 但是网页却需要顾虑到成本.
好的 designer 应该要知道网页是如何从设计到制作出来的, 就好比建筑设计一样. 你不能天马行空的画, 要盖的出来才行啊, 而且还要在预算和时间内盖出来.