优化卡片式设计的法则

卡式设计是近几年中很流行的一种设计，不管是网页设计，还是移动应用的设计中，卡片式设计都被广泛的运用到各个行业领域的设计当中。下面优网科技小优来跟大家说说，八大法则可以优化你的卡片式设计。

一、理解结构

卡片与物理上的卡片相似。可以把它们理解为容器，将内部的内容信息分组、分层级展示，整合组织起来。

二、阴影/点击态

阴影或是边框线有助于使卡片更加明显，具体使用哪一种视觉样式要视你的 UI 风格而定。

三、背景

卡片的另外一个优点是，可以随意配置背景的颜色，使用多样的视觉氛围，只要跟卡片放在一起不突兀就行。

四、字号和字重

文字越小，用户浏览的效率越低，用户需要花更多时间去辨认和阅读；文字越大，用户浏览的效率越高，用户可以快速识别内容。错误的使用字重会影响界面的可用性和美观度。

五、对比

卡片已经是小层级的容器了，所以对比度在信息分层和优先级上起重要作用。

六、按钮

可以使用普通按钮、文本按钮或图标按钮。在垂直卡片上，按钮通常放置在底部上；在水平卡片上则是在右侧或底部。

七、信息空间排布

包裹着可聚焦元素的合适内边距（Padding），以及可以组织信息的足够空间(Space)

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

八、聚焦与悬停

鼠标滑过时，为了让卡片更加突出，通常的做法是给卡片加深一点的阴影或者将卡片位置稍微抬高一些。

如今人们获取信息速度越来越快，卡片能忽略设备的差异给用户提供更好的服务。这也是以用户体验为中心的设计。相比传统单一的页面设计，卡片不仅作为信息载体，还可以提供更多个性化的用户体验，使界面设计清晰平衡、富有美感、简约时尚而又具备良好可用性。而卡片作为容器，能够适应不同屏幕大小而不破坏信息的展示效果。

责任编辑：优网科技

版权所有：http://www.uweb.net.cn (优网科技) 转载请注明出处