新人必看,如何快速提升卡片设计能力?

卡片设计对我们来说并不陌生,卡片设计在界面中已经是非常常见的一种设计形式,大家做设计时几乎都会用到。今天我想从我自己的经验来总结卡片设计的细节要点,期望能给大家总结一些快速提升卡片设计效果的方法。


本文主要从三个方面来分析如何将卡片设计的更为出色:

1、卡片的形体

2、投影深度

3、颜色对比

4、卡片的内外间距


1、卡片的形体


1)圆角

同样的卡片设计,不同的圆角给人的感受也各有差异,根据圆角的大小我们可以将卡片分为直角、小圆角、大圆角。所以在设计的时候,根据自己的产品属性选择气质相符的圆角设计很有必要。

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

2)比例

卡片的比例,我习惯遵循一些美感规律,比如常用到一些比例为16:10 、16:9 、4:3 、1:1之类的比例。当然,实际设计需求中的比例,还是要结合内容的多少具体分析。


我的经验是,当比较接近这些美感比例其中之一时,就直接优化到这个比例。像一些banner图设计时,会直接按照16:10的比例进行设计。


2、投影深度

卡片投影的视觉效果,会直接影响用户对卡片的整体感受,太深太大的投影会显得整体卡片过于厚重、看起来有点脏,太浅太小的投影则显得过度生硬。这里给大家提供两个小技巧。

1. 在取色的时候,可以选择背景颜色的色相,然后略微加深一些。

2. 投影的距离设置合理的数值比例,不要太大或太小。

我常用的一组数值规律是1:2或1:3,例如Y轴偏移10px,模糊度则设定为20或30px,这样成比例的数值出来的效果会较为自然,


3、颜色对比


卡片与背景的颜色对比会影响这卡片的整体质感,在设计时我们需要把握好卡片与底色的对比,不同的明暗对比出来的质感也会有差异。

卡片色与背景色不宜太过接近或使用同一颜色,因为会影响卡片整体的空间质感或使得卡片的边缘锐度下降;

深色背景上,尽量让卡片与背景色在同一色系或者明度不要差异太大,避免过于突兀。


5、卡片的内外间距

外间距

卡片具有独特的视觉空间感,能增加了页面的层次感,让页面更加灵动。在做卡片式设计时,经常会纠结边距的设定,宽边还是窄边?多少像素更为合适?这个需要根据实际的运用场景来设置。



一般我做在卡片间的间距设计时,通常采用的8的倍数,如16px 、24px 、32px等。也有许多人采用是10的倍数。这个可以根据实际情况使用,避免间距过大或拥挤即可。

 

内间距

卡片的内间距,我一般在外边距的基础上设计,按照固定比例进行增减,8的倍数为基础进行计算。虽然没有严格按照删格设计来得规范,但也可以让设计变得有迹可循。


6、文字长度

卡片里的文本应仅提供信息概述,来帮助用户确定他们是否进行下一步操作(例如是否点击按钮);过于冗长的信息会增加用户的阅读成本并增加用户作决策的时间。

我的一般是横向不要超过42字,纵向不要超过5行。过多的文本不建议使用卡片形式。

 

总结

卡片式设计的流行同样得益于自身的灵活性。这种设计形式在跨设备、跨屏幕上有着天然的优势, 也更加实用,为设计提供了更多的组合形式,给观者带来了良好的使用体验。

以上就是三石关于卡片设计的一些经验总结,希望能对大家有所帮助。但是卡片也不是万能的,设计师要做的是在正确的场景中合理地利用卡片式设计。

 

参考链接

http://mrw.so/5EC9yH

http://blog.sina.com.cn/s/blog_5d7170af0101dnpk.html

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容