【设计+切版30天实作】｜Day10 - 因应Bootstrap的元件去弹性设计Reviews区块

设计大纲

原本想把Reviews做成一行六个、并且可以超出视窗，另外使用者可以用拖曳的方式去移动卡片。但看完Boostrap 5的官网，目前好像没办法切出超出视窗且可拖曳的卡片，所以就把原本想做的想法，改成「单纯卡片式」的方式去呈现。

这次的Reviews卡片会包含「使用者头像、使用者名称、日期、回馈内容」。Grid system共12栏，因此这边将会是「每个卡片占4栏」，一行会有3个卡片。因为怕一行只有三个卡片会太少，所以这边会设计「两行的卡片」。

由於上一个区块是以满版去设计，所以这边就不会用满版去设计。另外，卡片会以主要色再加上渐层作为卡片的背景颜色唷！

步骤

画出卡片及设定背景颜色

1. 在画布上画出4栏宽的卡片，高度先不用设定
2. 卡片背景颜色为Primary（#9B3C05）
3. 另外再加上Linear Gradient 渐层颜色（#9B3C05 > #4E1E03）

使用者的Profile Picture

1. 在卡片里画出96x96的圆形
2. 把icon图片直接拖拉进去圆形里面
3. 与上方和左方维持24px的间距

使用者的Profile Picture、留言日期

1. 在Profile Picture下方输入「使用者的名称」及「留言日期」
2. 文字的大小为p的大小（16px）
3. 文字的字重为regular
4. 文字的颜色为secondary（#FDFCFC）
5. 「使用者名称」与「Profile Picture」维持16px的间距

留言内容

1. 在「使用者名称与日期」的下方距离8px
2. 输入「留言内容」
3. 文字的大小、字重、颜色都与「使用者名称」相同
4. 与卡片下方间距24px
5. 此时卡片的高度就自然而然出来了

完成剩下的卡片

1. 点选已完成的卡片，再选取右上角的「Repeat Grid」
   
2. 往右、往下拉出两行的「一行三个卡片」
   
3. 把剩下卡片的「Profile Picture」和「文案」作修改即可
   

调整间距

1. 再次确认卡片之间的间距是否为上下24px
2. 调整整个区块的上下间距为96px
3. 完成!
   

结论

在设计前都可以先参考外面各种网页的区块，再想想Bootstrap有哪些元件可以提供切版，另外再来看要不要把原本的想法作修改，像这一次的Reviews区块一样。另外一样是提醒到烂掉的「高度不用自己设定，用padding去推就好」 （不要嫌我烦哈哈哈哈哈）。
明天再来设计其他区块吧！