投道科技 - 企业信息化管家     |     全国咨询热线:400-156-0532

投道科技

从业八年的设计师教你如何更好地做卡片式设计

发布者:admin 时间:2018-07-31
本文编译自国外Medium媒体平台作者Andrew Coyle的文章,希望能给大家带来帮助。
卡片,作为通往详情页面的一个用户界面组件,将各种不同的信息汇集在一起,以用户更易理解的方式来呈现内容。
 
 
由于不同屏幕尺寸的扩散以及在这十年时间里HTML5/CSS3的推出使得了卡片设计得以成型。它是新一代网站的完美代表,像Facebook、Twitter和Pinterest等社交媒体网站都进入了主流之中。这种网站形式比以往任何时候都能够看到更大的个性化、聚集性和社会化,而卡片就是它的的容器。
 
 
• 卡片形状  •
卡片设计以组的形式呈现多样化的内容片段。用户可以快速浏览信息,并且可以选择性查看整体信息。
 
卡片之间的信息具有相等的层级关系。这允许用户以类似于查看商店货架的方式浏览内容。用户在执行操作前会对每个卡片进行评估。
 
 
 
卡片的灵活性很适合用于响应式设计。通过使用媒体查询,内容可以重新排序以适应任何屏幕。这种延展性使得卡片能建立跨设备的统一视觉语言和用户体验。
 
 
 
• 解构卡片设计 •
想做出更好的卡片设计就必须了解其中所包含的元素。卡片包括标题,副标题,摘要文本,多媒体,图像,视频,图表,评论和操作。操作上通常是有限的,因为很多情况下整个卡片可作为一个单独的链接。
 
 
 
卡片可以以多种方式呈现,包括单独呈现、时间线、图库、相邻或者仪表板的形式。
 
 
• 卡片设计的更合适实践方法 •
 
如果设计上展示的是同质化且简短的内容,可以采用列表的形式,这样有利于快速浏览。
 
 
 
避免使用过多的边框和沉重的阴影,这个会导致分散视觉焦点。
 
 
 
 
不要在一张卡片上呈现多个想法。相反,将每一个想法都以独立的卡片展示。
 
 
 
为内容提供可视化的层次结构,以增加卡片的焦点和易读性。
 
 
 
不要包含内嵌链接。卡片应该是一个单一的链接或提供一组有限的操作。
 
 
小结
任何表现形式都应该是为了更好的呈现功能及内容。卡片不仅仅在视觉上容易被用户接受,它也是一种能够创造一致体验的最灵活的布局方式,对提高用户获取有效信息的效率有着非常大的帮助。所以,优秀的用户体验一定是以人为本的。

声明:本站部分文字及图片均来自于网络,如侵犯到您的权益,请及时通知我们进行删除处理。

联系专业顾问,免费出策划方案和报价详情~

  • 业务咨询
  • 售后服务
  • 咨询电话