UI中的卡片问题

关于卡片

卡片占用空间小，但可以显示足够的信息，而且通常还有1-2种选项。
卡片设计大多用在产品的包装，用于划分产品内在的不通，而且明快却不失创意的视觉设计，将简单的界面划分提高了产品内容的识别，通过色彩的合力搭配，流行趋势，以及炫酷的动画效果，让整个APP看起来更加简洁，让用户体验更顺畅。

why?

1. 卡片能够存在和流行，因为他本身具有简约的设计和良好的可用性。
2. 卡片作为切入点，可以进一步展示更详细的信息。
3. 卡片再视觉上也很令人愉悦，因为再大多数卡片上，卡片的图像为卡片赋予了风格。
4. 他们自动适应web和移动视图。
5. 没有太多认知负荷，卡片无处不在用户已很早熟悉。
6. 他们保持界面的井然有序且非常简约。

八大部

1. 了解构造
   卡片相当于物理世界中的卡片，可以充当容器，将内部信息组合起来。
   遵循“一卡一概念”的规则。内容不应当混搭而复杂，简单才是最美好的事情。

   卡片中可以呈现多种多样的信息元素，但是单个卡片应当保持其内容属性的纯粹性和直观性。这样用户会更轻松的选取他们想要的内容，或者分享他们眼中最合适的内容。

   卡片通常不大，并且大多是作为详细信息的入口而存在的，所以它本身不应当承载太多细节。当你试图向一张卡片中加入太多的内容的时候，会让其变得过于臃肿，不论是太长还是太宽都非常难看，而且会失去它作为一个“卡片”的隐喻。
   

2. 阴影/描边+渐变
   有助于呈现卡片的形态，至于是使用阴影还是描边，取决于UI的风格。
   阴影和渐变是最能让用户将UI中的卡片和现实中的联系在一起的元素。
   应观察现实中卡片的质感，光影的分布和走向，如果太假则会显得很low的哦。
   
   
   

3. 背景
   卡片在视觉上没有太繁多的对比，卡片的背景可以随便“玩”。
   

4. 文本大小和重量。
   当字体比较小的时候，用户则会“细读”；而字体较大的时候，用户则更会倾向于“跳读”。
   但是如果字体粗细太随心所欲的话（使用错误的话），会影响美观和可用性。

   选择简单的字体和易于阅读的配色方案（文本内容应该清晰可见，所以就要对比度大一点，比如放在纯色的浅色的背景下，然后用深色的字体，拥有足够的对比度）；尝试控制字体的数量。
   
   

5. 对比度
   卡片小，所以对比度再分割信息和优先级方面有重要作用。

   对情况而言比如继续，则加深，否则则颜色依旧为浅色
   
   

6. 按钮
   可以使用普通按钮，文本按钮，或者图标。
   垂直卡片则通常在底部。
   水平卡片则通常右侧或者底部。、

   比如这个按钮“喜欢，评论，转发”在垂直卡片中置于底部。
   

7. 间距和空隙
   在可聚焦的元素之间添加适当的空隙，也留足够的间距来对内部信息进行分组。
   

8. 对焦和悬停
   要是让卡片再鼠标悬浮的时候更明显，通常用较暗的阴影或上升一点点高度。
   

9. 充分利用动效
   如果动效用的好，用户体验会有极大的提升。动效能够帮助用户在基于卡片的UI当中更好的定位，并且建立不同卡片状态之间的视觉关联。

10. 让整个卡片都可被点击
    根据费茨定律（Fitts’s Law），用户应当可以点击卡片的任何一个部分来触发其中的内容，而不只是图片和文本链接。更大的触摸和触发范畴是卡片本身的优势所在，不论是在移动端的触摸屏上，还是以键盘鼠标为主桌面端上，让整个卡片都可被点击明显拥有更强的可用性。