vip
个人
VIP
企业
VIP
vip
创作
中心
vip
在线
客服
vip
设计
服务
改进
vip
返回
顶部
新图 / 设计干货 / UI卡片设计得更高级的几个公式技巧

UI卡片设计得更高级的几个公式技巧

字数:615 来源:公众号 - UX小学 发布时间:2019-12-25 01:00:40

今日给大家带来几个绘制大卡片类UI的小公式,简单实用还很好记。

1、圆角半径--Radius

一个完美的卡片,首先圆角弧度必然要很优美才可以。圆角过大,会显得过于臃肿,圆角过小则容易显得小气。随意定,显得很不系统,所以如何掌握这个圆度最佳?今天给大家分享个公式,圆角半径≈卡片宽度的0.04%,这样计算出来的圆角弧度看起来会更精致(移动端最适用)。

2、阴影-Shadow

还有小伙伴记得咱们之前给按钮设的阴影公式吗?继续用那套公式做卡片,效果照样非常棒。

不记得之前公式的同学,再复习一下哦~

阴影颜色=按钮颜色的Alpha50%,x=0,y=按钮高度的20%,模糊值=按钮高度的50%,扩展=按钮高度的-15%,高级又简单,完美!如果觉得这个弥散阴影太大的同学,也可以自己手动简单调整下,不碍事。

其次如果是白色的卡片,则需要在卡片下添加背景填充色,色值也不宜太深,建议值#F5F5F5。另外阴影的颜色推荐使用不透明度为10%的纯黑。

3、字体-Font

字体这个没啥太大讲究,主要注意两点,一点是卡片里面的字号,不要使用超过三种!!一旦字号多了,这样其实就很Low了。通常分大中小,三号字体即可适用大部分场景。第二点,主标题保持加粗加大,一旦标题不够粗大,那么整个卡片的视觉,你是压不住的,会过于轻浮。不明白的同学可以参考一下下面这个案例。

好了,今天的妙招就到这里了,看一百遍,不如自己动手做一遍。这么好用的小技巧,今天各位小伙伴们学到了吗?