恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
想做好卡片设计,原来要注意这么多细节
150.2°
原创文章 / 教程 / / 举报
20303 562 597 20

2020-12-01

腾讯设计师教你如何做好卡片设计

Hi,我是彩云。卡片设计在界面中已经是非常常见的一种设计形式,大家做设计时几乎都会用到。关于卡片设计的文章网上已经有很多了,今天我想从我自己的经验来总结卡片设计的细节要点,期望能给大家总结一些快速提升卡片设计效果的方法。


1、卡片的造型


1)圆角

不同的圆角,所带来的气质是不同的。圆角很小,视觉印象是硬朗,高冷,具有攻击性的,多用于严肃、高端、冲突感强烈的设计中;而更大的圆角给人的感觉是有亲和力,柔软,安全的,多用于儿童产品、娱乐性强的设计中。


在设计的时候,根据自己的产品属性选择气质相符的圆角设计很有必要。


常见的卡片弧度形式有4类:直接、小圆角、大圆角、特殊圆角


我一般喜欢用4的倍数来设置圆角,比如圆角大小为4px、8px、12px之类的。要注意的是,圆角越大,可用面积会越小,需要根据实际场景进行平衡,以视觉上舒服为宜。


2)比例

卡片的比例,我习惯遵循一些美感规律,比如黄金比例(1.618),白银比例(1.414),青铜比例(1.732),正方形之类的比例。当然,实际设计需求中的比例,还是要结合内容的多少具体分析。


我的经验是,当比较接近这些美感比例其中之一时,就直接优化到这个比例。比如做了一个卡片,宽高比是1.5,比较接近于黄金比例,我就干脆让它等于黄金比例。



3)异型

除了正常的卡片样式,还可以做一些异型的卡片设计。异型卡片具有较强的形式感和视觉冲击力,所以会比较多的用在游戏或者运营相关的界面中,吸引用户的注意力。缺点是批量化设计成本略高且因为过于风格化而不够耐看。



2、卡片的效果


1)颜色

卡片的颜色搭配可以使用纯色和渐变色。这些颜色与文字之间的对比要符合界面对比度标准( https://contrast-grid.eightshapes.com/,这个网站可以直接查到可用性数值,只要不是DNP就是可以用的配色),以免影响内容本身的阅读。如果拿不准的话,可以多用一些白色,比较不容易出错。


纯色卡片设计会让界面显得冷静高级,但对配色的要求相对较高,用不好的话会显得单调,沉闷。如果你坚持要用这种卡片配色的话,建议搭配一些图形纹理,会更容易把控,还能提升画面细节。


纯色卡片设计


渐变色的卡片设计目前较为常见,层次细节更加丰富,画面也显得更活泼一些。


渐变色卡片设计https://dribbble.com/shots/12284120-Wallet-Design-App


有些朋友经常因为配色不好而发愁,其实是需要多去找一些参考来看的,实在担心配色不好,直接去吸优秀的配色方案也是OK的,但要注意搭配合理。


教大家一个方法,去dribbble上搜color或直接打开https://dribbble.com/search/color这个链接,就可以看到非常多的优秀配色方案了。



2)图案

卡片的设计还可以结合辅助图形,以图案的形式与卡片进行结合。这些辅助图形可以来源于品牌符号的延伸,让品牌有更多的露出机会。


也可以是运用一些简单的图形,提升卡片的设计细节,以下是一些还不错的设计案例。这些卡片上的图形都有借鉴参考的价值,自己平时有时间的话,也可以多做一些作为图形的储备。强烈建议收藏,真的可以很有用。


来源:https://dribbble.com/shots/10513966-Gradient-Bank-cards


来源:https://dribbble.com/shots/10498737-Dark-Bank-Application-Design


来源:https://dribbble.com/shots/11313260-Finance-App-Exploration


来源:https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD


这里彩云给大家找了非常多的卡片设计形式,可以从中参考学习配色和纹理造型。


3)图片、视频

卡片背景也可以用图片和视频的形式进行设计,图片和视频的选择一般会偏暗色,以不影响内容阅读为准。


来源:https://dribbble.com/shots/5717917-Travel-Article-Application


3、卡片的内容


1)文字

卡片上的文字不要太长,我的经验是横向不要超过42字(关于这个字数,有资料可以查,感兴趣的可以找找看),纵向不要超过5行。过多的文本不建议使用卡片形式。


其实这张卡片的设计中,我也用到了黄金比例来指导自己的设计,方便快速确定文字比例关系。


2)间距(网格法)

卡片上的文字间距最好有一定的规律,这里可以按网格法来规划,比如8px网格,10px网格等等。网格的使用其实可以很灵活,比如我这里的卡片其实就用到了8px网格,各间距就会用8的倍数来做。大小比例就尽量用黄金比例来处理,这样做目的一方面是为了让界面有秩序,另一方面是提升决策效率。秩序产生美,而效率让你早点下班。


3)减少线框

卡片中尽量减少线框,多用留白来进行内容划分。


4)层次清晰

卡片中的内容层级要做好,标题和内容之间的差异要明显。这里的层次主要是通过对比拉开的,做好对比的关键就是对比效果要强烈,决不能模棱两可。


比如下图中左边的案例只是在文字的字号上有一定的对比,但字号间相差不大,效果不明显,就会让人看第一时间不知道看哪。而右侧的案例则用了加粗,大字号,大留白等,让画面有了强烈的对比,从而产生更好的信息层级。


5) 内容出界

只在卡片的框框里做设计,有时候未免显得太呆板,破开卡片的边界可以让卡片本身更具形式感。如果被人说你的设计没啥亮点,那内容出界的设计就是一个很好的提升设计亮点的手法。


彩云曾经做的一张banner就是运用了出界的手法


来源:dribbble。界面上的天气图标也用了出界的手法,让画面显得更有亮点


4、卡片的细节


1)光感

卡片中的光感细节能提升设计的质感。下面这张图是我最近做的一张会员卡的背景设计,大家对比下,在卡片顶部加了1px高光线和斜面反光的细节前后的质感区别。


这个小细节,我经常会用到,执行简单又容易出效果。


2)投影

投影的细节,不要过重,但又要能与背景分离开。有2个小技巧:

1.在取色的时候,可以选择背景颜色的色相,然后略微加深一些,不要用纯黑色来做投影,会显脏。

2.投影的距离不要太小,太小的投影会显得不够自然;也不能太大,太大会很浪费界面资源。



3)3D效果

3D卡片的设计,因为不便于内容编排和阅读,所以带透视的卡片在实际UI中并不太常用。但在作品集包装和运营页面中,则可以带来比较好的视觉冲击力,可以尝试运用。


图片来自:Cradle


小结

以上就是今天彩云关于卡片设计的一些经验总结,卡片设计的应用已经如此广泛,我们有必要利用它来提升自己的界面设计细节。

Powered by Froala Editor

微信公众号:彩云译设计

收藏

562人已收藏

彩云Sky

腾讯ISUX高级视觉设计师

  • 156

    作品

  • 1.2w

    粉丝

  • 13

    关注

  • 国外大佬总结的这20条B端图表设计原则,简直太实用了!
  • 总监问我为什么要用卡片设计?好在哪,怎么做?
  • UI设计细节系列——让设计细节更高级的24个实用小技巧
  • 被刷屏的微软全新3D表情,微软官方分享背后的设计思路

猜你喜欢

    彩云Sky

    彩云Sky

    腾讯ISUX高级视觉设计师

    首页霸主2016年度最佳作品集TOP50得主身经百战人气明星助人为乐
    • 1.2w

      粉丝

    • 2937.8

      人气

    • 8.2w

      颜值

    作品

      彩云Sky

      点赞:597

      收藏:562

      评论:20

      想做好卡片设计,原来要注意这么多细节

      你确定要举报想做好卡片设计,原来要注意这么多细节

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年12月01日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录

      可云端编辑的专业级UI设计工具

      立即体验