November 19, 2016

【解构ui】卡片设计

卡片设计的模式是近来看到的越发流行的一种设计方式，知乎的新版网站也采用了这种设计方式，个人主页用了更纯粹卡片的设计模式取代了之前只是用线描式的卡片： Zhihu Web 重设计思路和个人页设计过程,这个新设计，被诟病最多的恐怕就是头图，个人由于不知道知乎打算如何定位，也不多做评论。但是就头图的问题来说：

大部分用户应该是没有什么心情去更换头图。
就算更换了，这么大横幅的图片，要找到一个显示效果佳的图片，没那么容易。
每个用户的审美不一样，不要指望用户来编辑的头图都是美图。
头图几乎占据了整个页面的第一屏，几乎把回答的内容全部遮掉了。

以上言论可能有所武断，就看最新的测试会是如何的了~

好吧，言归正传，来说说卡片式设计。

什么是卡片

卡片是一个长方形的图形里包裹着媒体，文本，网页链接，社交动作，是一个自我封装的交互对象，卡片设计的本质，其实是为了更好的处理信息集合（collection）

卡片包含着很好的隐喻（Metaphors):因为卡片在生活中也很常见，比如名片，或者纸牌。因此卡片式一个很有互动性的东西，对于用户来说很容易理解。

同时，就好像我小时候集卡片的这些游戏来说，卡片上包含了一定的内容，因此用卡片作为传递信息的载体是非常有效的一种方式。

内容组织(Content Organization)

卡片有机的将内容分割成几个有意义的部分。并且将不同的零碎信息放到同一个表格里，创造出和谐的布局。

当你想考虑使用卡片式的设计形式时，必须要简约。“一个卡片只传递一条信息”，一个卡片可以包含多种设计元素，但是每一个元素都应该聚焦在一个主题信息上，这样才能让用户在众多的内容中精确的选择或分享自己感兴趣的部分。

典型的就像是Facebook， Facebook很好的利用了卡片式设计，将信息组织起来，从而避免了无尽的数据流。

视觉愉悦（Visually Pleasing)

研究表明图片能够提高网站的设计，因为图片能够有效的吸引用户的注意力，在卡片上使用图片能更加吸引用户。比如Dribble，基于卡片的设计方式（Card-based design）是展现内容比较好的方式

如何设计卡片

有着同样布局的卡片应该有着一致性的宽度，但是可以有不同的高度。最高的高度受制于平台的可用高度。但是也可以临时的延伸（比如评论区块）

从设计的角度来说，卡片应该有圆角，以及阴影（short shadow），圆角让卡片看起来更像是内容区块（content block），而阴影则可以增加深度。

注意设计出的卡片应该是让人想要去点击，去互动的，因此我们可以在卡片里放一系列相关的内容，比如，链接，注册，播放器等等。

同时也要主要设计卡片时需要六百，不要给人泰国拥挤的感觉，采用一定的负空间。

卡片设计的观想是让人想要去点击，卡片包含了一系列特定的内容，链接，注册，播放器等的，让用户想要互动。

留白：要设计出让人觉得不那么拥挤的卡片，可以采用一定的负空间。

另外，我们可以通过设计动效来帮助传达信息。

卡片的优势和缺点

优势：

内容为王，卡片设计的容器将所有的内容包裹在里面。将内容放在卡片里能更改好的帮助用户阅读。这样用户就能更加容易的找到他们感兴趣的内容。
响应式和移动端设计。卡片设计最重要的是他们可以无穷无尽。卡片设计对桌面和移动端来说都是很好的。因为卡片将内容分割成更加易于消化的模块（digestible chunks）。
在响应式设计中卡片也很合适，因为他们是一个内容容器，可以很方便的变换大小。最重要的是，卡片在形式上也很统一，有着一定的视觉统一性，因此可以很好的适用于不同的平台。保持一致性。

卡片最初在物理世界就是给手指使用的，而在移动端，亦是如此。这就是为什么卡片会这么流行的原因。电子卡片和实体卡片的表现方式是一致的，因此用户不用多想，就知道如何使用。
可以将不同大小，不同媒介形式的内容单元以一种统一的方式进行组合，最典型的就是图文混排，既要做到视觉上尽量一致，又要平衡文字和图片的强弱，这时卡片设计经常是最有效的。
打破了在传统的列表状态下只能纵向滚动的交互方式，但是如果将列表内容组织成卡片, 就可以很容易的实现横向卷动
卡片作为一种拟真元素, 可以被堆叠, 覆盖, 移动和划去. 这样就极大的拓展了一个内容块的视觉深度和可操作性。同样，卡片可以用来被翻转，可扩展性也变得很强，饭庄之后，卡片可以显示相关的信息或者操作，这一系列动作都是十分自然的。而卡片自带的边缘由于相较于分割线而言，创造出一种更加明显的区域分割，从而让用户的触摸范围和视觉范围都控制在卡片的视觉边界内。

缺点：

其实，卡片设计非常消耗页面空间，并且将内容元同内容元之间强行的割裂，导致了一页上的信息量展现的很少。因此当用户浏览的时候需要大范围小时，接受大量相关性的信息然后再过滤筛选的时候，强行使用卡片设计会减弱用户的效率。
相对而言，卡片在小屏幕上很好用，但是到了大屏幕上就会显得有些杂乱，但如果仅仅是展现较为单一的内容，比如图片，也就比较合适，Pinterest是个很好的列子。总的来说不会有很大的问题看上去，但是如果用来阅读或者理解的话就不合适了。