第 1 课,共 7 课 · 7 分钟
两分钟做点东西
目标:还没学任何规则,先设计一张海报,再认识你刚刚用过的那些规则。
你的第一次创作
uxuiopen.comStudio 4 的设计之夜需要一张海报。动手做吧。随便改,留意海报下方的检查项。
设计之夜
周五 · 晚 7 点 · Studio 4
免费晚间工作坊。请带上笔记本电脑。
报名- ✓标题是主角
- ✓文字清晰可读 (6.2:1)
- 更大、更粗的内容会先被看到。这就是层级。
- 眯眼看一看。如果没有东西突出,就没有主角。
- 文字和背景要有足够对比,才看得清。
你刚才做的事,都有名字
每一张海报、每一个 App 界面、每一个网站,都由同样的几个部分组成。能叫出它们的名字,你就能聊设计、给 AI 写出精准的简报,也能看出哪里不对。
设计之夜
周五 · 晚 7 点 · Studio 4
报名123456- 1标题: 人们必须读到的那一件事。最大、最粗、最先被看到。
- 2辅助信息: 时间、地点、内容。容易找到,但绝不和标题抢风头。
- 3图片或图形: 定下氛围,让人从房间另一头就注意到它。
- 4行动号召: 你希望人们接下来做什么。放在视线最后落脚的地方。
- 5留白: 空白不是浪费。它把各组内容分开,让画面有呼吸感。
- 6边距: 四周都留出安全边距,画面才不会显得拥挤或被裁掉。
设计师把这种顺序叫作层级。好的海报会替你决定先看什么、再看什么、最后看什么,谁都不用费心去琢磨。下面是一张成功的海报上,视线走过的路径:
设计之夜
周五 · 晚 7 点 · Studio 4
免费晚间工作坊。请带上笔记本电脑。
报名- 这是什么?标题最大,所以最先被读到。
- 什么时候、在哪里?醒目又加粗,所以紧接着被找到。
- 我该做什么?按钮放在最后,正是视线落下的地方。
- 其他内容都刻意保持低调。
尺寸不是唯一的手段。字重(粗或细)、颜色和周围的留白都会吸引视线。有意识地用好其中一两种,别一股脑全用上。
关键词
- 层级
- 人们注意和阅读内容的先后顺序。你可以用尺寸、字重、颜色和位置来控制它。
- 对比度
- 两样东西之间的差异:浅底上的深色、小元素旁的大元素。对比让内容看得清,也让它更突出。
- 留白
- 元素周围和元素之间的空白。它把属于一起的内容归成一组,也让眼睛得到休息。
- 对齐
- 让元素沿着同一条边或中线排列。对齐的版面看起来安静、有条理。
- 行动号召(CTA)
- 告诉人们下一步做什么的按钮或文字:报名、购买、注册。
现在来练练眼力。这三张里,哪一张的阅读顺序是对的?打开“眯眼看”把它们模糊处理,就像从房间另一头看海报那样。
哪张海报的阅读顺序是对的?
任何设计都能用的三个测试
眯眼测试
半眯着眼,或者退后几步。仍然突出的那个东西就是主角。如果它不是最重要的内容,就把它变大、变粗或变亮。
五秒测试
把设计给别人看五秒,然后藏起来。问对方它是做什么的、他们该做什么。如果答不上来,说明层级还没起作用。
手机测试
把它缩小到手机屏幕的大小。标题和日期还看得清吗?大多数人会先在手机上看到你的作品。
在真实网站上看看
在新标签页中打开它们,眯起眼睛看一看。每个网站都有清晰的第一眼、第二眼和第三眼。
为另一个活动再做一张海报
回到上面的海报,把它改成“咖啡与评审,周六上午 10 点”。先换标题,然后至少试两种布局和两组配色,再从中选一个。
- 1在海报工具里输入新标题。
- 2把每种布局都试一遍。留下眯眼看时标题仍然是主角的那一个。
- 3选一组能通过对比度检查的配色。
- 4对你最喜欢的版本做一遍三个测试。
- 5在讨论区分享你的选择和理由。
你的海报上,日期和标题一样大。会发生什么?
白底上的浅灰色文字,你觉得很高级。你应该检查什么?
延伸阅读