广州总部电话:020-85564311 020-85563853

优化卡片式设计的法则

发布日期:2020-12-31   浏览次数: 630    来源:优网科技

优化卡片式设计的法则

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

一、理解结构

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

 

二、阴影/点击态

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

三、背景

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

四、字号和字重

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

五、对比

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

六、按钮

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

七、信息空间排布

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

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

 

八、聚焦与悬停

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

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


责任编辑:优网策划部
版权所有:http://info.uweb.com.cn/(优网信息) 转载请注明出处

推荐案例
眼光高度决定品牌厚度!
公安局备案号:44010602000978 备案号:粤ICP备09025660号 Copyright © 2020 All Rights Reserved

微信客服

微信扫码咨询

收起快捷

返回顶部

 
扫码咨询