本文仅用户个人学习记录使用，意在提高自己的交互设计，仅此而已，欢迎指正.
参考设计网址： www.canva.com/designschoo…
hover 卡片视觉状态改变的作用:
- 背景颜色: 可以更改卡片的背景颜色，使其更加醒目。
- 边框颜色: 可以更改卡片的边框颜色，使其更加突出。
- 阴影: 可以为卡片添加阴影，使其看起来更有层次感。
- 透明度: 可以降低卡片的透明度，使其看起来更加朦胧。
- 动画: 可以为卡片添加动画，使其更加生动。
hover 卡片交互状态改变的作用:
- 显示更多信息: 可以显示卡片的更多信息，例如简介、详情等。
- 显示按钮: 可以显示卡片的操作按钮，例如查看、编辑、删除等。
- 链接跳转: 可以将卡片设置为链接，当用户 hover 时跳转到相应的页面。
今日参考截图
优点
- 整体设计颜色丰富多样而不会让人感觉到眼花缭乱（可能是因为颜色是轻快色调的原因）
- 网站 header 的菜单项 hover 上去会用 popover 的形式展示菜单项相关的更多内容，有渐变的效果，hover 上去之后响应的菜单项有 background-color 的改变，给用户提示了当前阅览内容的分类
- Login 和 Sign up hover 上去也有 opacity 的改变
- 在 Courses 卡片中， hover 上去会有背景图片放大的效果，用于提示用户这是一个可交互的行为
个人感悟
当菜单组的内容过多的时候，可以借助 popover 来渲染出更多有意思的内容，比如图文并茂的方式就很不错，这样给用户丰富的内容，虽然该网站是设计类学习网站，但是精彩的设计较少，即网站互动性提高一些会更好
