【设计+切版30天实作】｜Day11 - [设计进阶挑战] 如何把Reviews的呈现方式改成可滚动式的卡片呢？

设计大纲

在上一篇设计「Reviews」这个区块时，有提到切版时可能会有「切不出来」的情况发生，所以只好把原本脑海里想要的设计改成简单两行的卡片式去呈现。但是！我还是很想把原本想要的样子设计出来（哈哈哈哈），所以今天这一篇就来讲所谓的「进阶」设计吧XDD！Let's go!

步骤

重新修改卡片

由於要变成一行去呈现，所以要「微重新」制作卡片

1. 但因为要做滚动式的卡片，所以不用再去修改卡片栏宽，维持col-4就好

2. 复制之前的第一个卡片
   

3. 点选「Repeat Grid」，并拉出共6个卡片（在同一行）

4. 为了在拖曳时有空间感，记得在最後要多拉一段space出来唷～）
   
   
5. 修改其他卡片的图片及文案，并确认卡片与卡片之间的间距是否为24px（因为可能会跑掉）

制造超出视窗的效果

1. 点选卡片
2. 点选右方工具列「Scroll Group」的「水平Scroll」(第一个)
   （Scroll Group有三种，分别是水平、垂直及360度）
   
3. 点选後，它会自动跑出蓝色框框，代表这是「显示的最大范围」，超出这范围的会自动消失！
   

调整间距

1. 完成後，去Play一下，看看是否有成功
   （如果有成功，在预览里是可以「成功拖曳」的唷！）
2. 最後再去调整上下的margin为96px，就完成了～
   

结论

这个Scroll Group功能其实蛮常用到的，除了拖曳「使用心得」以外，最常用是「地图浏览」。在上面有略略提到Scroll有分三种，分别是水平、垂直及360度，所以我们可以根据想要呈现出来的感觉再去选择。下次有机会再来讲讲怎麽做，还蛮好玩的！
那明天再来设计下一个区块吧！