【设计+切版30天实作】｜Day5 - 做出3栏式「痛点」设计

设计大纲

早安！今天来设计痛点，这边我想要做三栏式，列出三个他们目前主要可能会遇到的问题，再加上图片，让使用者有感到身受的感觉。另外，因为Grid system共有12栏，所以三栏式的分配下刚刚好每个卡片占4栏。标题的部分，就以水平置中就好，另外再帮它加个highlight作为装饰。

步骤

标题

1. 与上一个区块(Header)的margin距离96px
2. 在置中的位置输入标题
3. 文字大小为40px（Bootstrap 5的h1大小）
4. 文字字重为Bold
5. 文字颜色为Primary（#9B3C05）

标题的Highlight

1. 在标题下方加个highlight装饰
2. 画一个长方形
3. 长度和高度跟标题一样就好（好随性哈哈哈哈哈）
4. 长方形的颜色用Primary(9B3C05)＋16%的透明度

图片与内容

由於卡片是三栏式，所以我们从最左开始画！

1. 把第一张痛点的图片拉进来，并缩放成四栏宽，高度以4:3的比例去调整
2. 在图片下方距离24px，再输入文案内容
3. 内容字体大小为16px（Bootstrap 5 p的大小）
4. 内容字重为Normal
5. 内容字体颜色为先前选好的Text(#707070)

完成剩下的两个卡片

1. 把第一个完成的卡片复制贴上
2. 再把图片和文案修改一下就完成了

结论

今天这个区块其实真的不难实作，毕竟就是每个卡片都在4个里栏画出来而已，主要是注意Margin、Padding、Font-size、Font-weight、Text-color。另外要注意的是， 区块的数量 与 栏数 是息息相关的，所以在规划时可以先想好。再来是 字数、字行，通常会建议文案刚刚好 3行 就好，不然字数太多，会让使用者觉得太冗长不想看，因此想文案也是另类有挑战的事情唷！
那明天再来实作下一个区块吧！