十分钟认识界面设计中卡片式设计 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


十分钟认识界面设计中卡片式设计

2019-6-20 分享达人 设计资源



如果您想订阅本博客内容,每天自动发到您的邮箱中,

正确认识卡片式设计,什么是卡片、总结卡片优势、卡片正确设计知识通过设两个案例进行讲解,卡片在运用时的技法,望能帮助大家。



今天顺叔和大家一起聊一聊卡片式设计,无论是WEB还是APP卡片式设计运用的比较多,很多UI设计师比较偏爱这样的表现,卡片式设计会给人一种视觉上的享受,也能对于界面具有层次感。但往往在卡片设计中有一些技法还是需要了解,不能因为卡片式设计而卡片式设计,要能更好的应用到界面场景中。希望在这次分享中一些知识点能帮助到大家,之后的几篇系列文章中,顺叔会从界面中比较趋势的设计技法进行分析,希望能帮助到一些设计的小伙伴。


 

 



引言


卡片式设计这几年比较流行,同样这样的设计表达也是个趋势,应用在APP PC界面中至今还流行着,从事UI设计的都会知道卡片式设计,具有把内容整合模块化,从视觉,个性化体验上进行呈现,是设计师在设计时常用的一种表现,同样也具有独特的创新概念。

在一些项目中,一些客户会说这个设计的APP界面有点太白,没有层次感怎么办,那这时你应该和客户说在APP设计中运用了现在比较流行的一个表现手法,卡片式设计,可以解决在画面中有个性化、变化、层次感的设计。那客户又问什么是卡片式设计呢?

 

一、什么是卡片


无处不在的卡片设计具有个性的美感和很好的易用性,是以文字标题,小标题,图形或图片组成的模块化,以块状形式规整的整合内容,让内容更规整化,视觉上更个性化,也是操作上快捷的内容信息入口。更直观的表达内容信息和快捷跳转操作。成为当今在设计中一个比较流行趋势,而卡片在设计中也占用一定的优势,让整体更加的有层次感,在运用起来也比较方便,从视觉、体验、交互都具有不错的优点


设计效果图展示

 


 

 

 

二、卡片设计优势


1.趋势

无论是大平台还是小平台的产品都会运用这样的卡片式,跟风式设计趋势,也让卡片式设计成为了一个现在常用的优势,不过卡片式设计的确有很好的效果

 

 

2. 层次感

具有一定的层次感,能在页面版式中起到设计上的不同,个性化变化,页面层次感区分强烈,能更好的体现提炼出内容

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

3. 规整化

卡片式设计以图片、图标 LOGO标题、整合到一起以块状的形式在界面中展示,更规整的排版呈现。虽然内容多会导致页面乱,一个模块包含内容之后就会规整不少,也给页面设计上带来了更好的视觉

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

4. 视觉体验

卡片式给整个页面会增加视觉上的体验,特别那种大图片卡片式更具有视觉上的冲击力,背景衬托出前景卡片式设计。同样对卡片式也感觉到舒适感。卡片式设计还是需要根据整个布局、产品需求 、功能进行设计。以达到最好的用户体验、视觉体验。

不要为了卡片设计而卡片设计。

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

5. 易用性

卡片式设计在易用性和灵活性上比较高,在响应式设计中同样应用的也比较多一些。能更好的有序排列。

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

6.简约设计

简约设计会更显得品质,不需要过多的进行装饰,哪怕就是一个白色的色块,上面点缀有色彩的图标和标题副标的变化,也会觉得显得高大上,就算是一个带有颜色的色块卡片,也无须过多的设计内容上的标题 、图标、按钮就足以支撑起卡片

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

7. 交互效果

在卡片式的设计中会有一些动效交互,比如整体卡片放大、缩小 、左滑、右滑,可以整模块化滑动缩放。整体效果增加了不错的视觉交互体验。

 

三、卡片正确设计知识


一般在界面设计中卡片的存在的意义和表现手法都是什么样的呢,下面为大家举例了几种常用的正确的设计表达姿势。希望小伙伴在设计的同时有所灵感和参考,把一些表现手法加入到自己的设计中,适合才最重要。卡片式设计还是要根据整个风格和整个布局而进行展示,在做进一步的对比和布局中以最好的效果为最终展示方式,总结分析几个常见代表例子,如有不全请讨论补充,下面就是一些例子

 

1.卡片式形式一

以色块为主体并用现在比较流行的渐变色组成,其中四边为圆角,同样色块下边阴影衬托出主题,这个是在卡片中设计比较常见的运用手法,卡片的长高在设计中也是根据结构,内容功能而进行设定。正方形,长方形都是一个表现得手法,在色块上面标题文字,图标,图形是整个卡片的布局的形式,无非就是左右布局和上下布局

应用场景:卡包、天气、类别、入口、优惠劵,卡劵

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

此图片来自于网络


2. 卡片式形式二

这种形式共同点都是在头部C位出现的卡片式设计,其中承载着标题,副标题,以及图文版式,不难发现,如果图片有颜色,那么下面是白色底,这样在白底上面色块的出现还是比较简约凸显卡片,如果背景有颜色,卡片也有颜色那么卡片的凸显程度就不会那么强,图二很多在会员卡设计中常用的比较多,也比较简约,另外两个共同特点背景有颜色,一般底部背景颜色就是整个界面的主色调,背景有色块,上面就用白色卡片,卡片上方标题、文字、图片呈现。只不过排版的方式有所不同而已,在很多APP设计中,这样的表达也很多,通过主色调可以很融合的把上面的状态栏,导航栏融为一体视觉上统一性,底部背景颜色延续下来,上面凸显白色卡片,这样更具有视觉感和层次感。白色的卡片不需要过多的修饰,更能体现的上面的文字和图片。

应用场景:会员卡,滑动卡片,图文标题,入口

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

此图片来自于网络

 

3. 卡片式形式三

这种形式上图下文字,或者是上标题,下图片的形式,这种形式特别在图片素材的选择上尤为重要,有视觉效果好的图片通过剪切,处理,合成,摄影,插画等等方式,出现的图片质量上好的话可以带动整个设计的逼格,通过有效的图片传达,文字传达,让用户更清晰的了解。这样的形似一般在入口或者列表的形式出现的比较多,同样也能体现出整体化和视觉化

应用场景:滑动卡片,图文标题,入口,列表

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

此图片来自于网络

4。 卡片式形式四

大图卡片式,一般以摄影图片,插画形式,文字压与图片之上,这样的效果更具有冲击力,也能显得出比较潮流。体验也很不错,放大视觉,展示内容,图片相结合,让浏览者更愿意多看一会。表达的图片与文字内容相符,做到图文交融的程度。一般这样对于图片的选择上还是比较要求严格的。没有质量的图效果会降低。

应用场景:列表,说明,入口,天气

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

5。卡片式形式五

列表卡片设计,这种形式一般白色的卡片,上面标题,头像,按钮,扁平插画形式体现,更多应用在一级页面的下方内容,以及二级页面的列表页或者集合页,整体弱化背景以白色为主,给予圆角及阴影承托出层次感同时,体现上面内容部分。每个模块的单元体具有统一的视觉。

应用场景:列表,集合页,入口

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

6. 卡片式形式六

大卡片式设计,表现为一块特大的卡片式,上面会有标题,按钮等信息,同样表现出突出层次感,个性化设计的特质。体现出内容,一般背景有颜色上面卡片为白色,如下面背景为白色,那么卡片的形式也可色块,在对比上有个反差,才能突出卡片的作用性。

应用场景:提示,说明,优惠劵,劵,入口

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

以上总结的几种卡片的形式,在设计中可以根据情况而设计,卡片多样化,布局多样化,适合自己产品的才最重要,虽然在界面设计中常用的设计,但不要盲目的为了卡片而卡片套用设计,这样起不到作用反而效果达不到理想程度。希望几个卡片形式总结能给大家带来一些灵感和启发。

同样在这些卡片中会有一些基本的共同的特点

 

共同的特点是

1。 四个角都是圆角

2. 根据潮流渐变色或白卡片

3. 色块下的阴影,色块下的阴影更能体现出层次

4. 卡片上面组成部分,标题,副标题,图形,按钮,图片,头像

5. 字体大小,字体颜色的变化

6. 一般卡片应用在会员,列表,说明,优惠劵,分类,类别,集合页,欢迎页等场景常见

 

三、卡片正确设计知识

 

为了讲解一下,顺叔随便构思一个产品原型,而快速进行了简单的设计,一个第一版,一个优化版,主要为了讲解一下这个卡片设计一些问题,

以下此图为构思的原型图

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

经过分析原型图之后开始进行设计,首先设计一个版本的,如果这样卡片布局设计,这样色彩搭配的情况下,会怎么样呢,整体设计用了蓝紫色为主色调,首先铺蓝紫色的色块作为背景,然后上面放白色卡片,以至于卡片上详细的内容,比如数字,图形能更好的丰富支撑卡片。同样数据流也是比较重要的C位。也是比较重要的位置。接着根据原型图下面有两个卡片,通过扁平化设计,以色块为主设计一个蓝色,一个橙色的卡片,上面并有图标,头像,以及标题,两个颜色的对比,更让视觉有冲击力,整体看这个设计并没有什么,但有个问题在于单个模块拿出来效果的确都不错,但组成之后上面的卡片C位让下面的两个带颜色的卡片抢了视觉,当打开这个界面的时候视觉落点在彩色卡片上,那么这个整体设计上就出现了问题,上面的数据,白色卡片其实是比较重要的,而且整个画面都是卡片毫无设计上的变化,那么只能在这个基础上在进行优化,其实大家在做设计的同时也这样,在考虑功能模块前提下,用户体验,也要考虑视觉体验,那么视觉从哪方面来,色彩、层次、版式等等方面。那么能不能在进行一下优化呢,其实还是有空间在进行优化。(以下图为第一版)

 

设计第一版

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

根据上面的设计在进行优化,同样保留白色卡片部分元素,在卡片与卡片之间放一些颜色的图标,这样更好的给功能上快捷入口,也能给卡片设计增添了变化。使得整个画面更灵活

虽然白色卡片,但有一些色彩的点缀,也让白色卡片活跃起来,把颜色的卡片改成白色卡片,从上到下的版式舒服多了,也没有那么跳。整个风格更简约,同时功能也更全面。


调整后

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

 

从原型图,在到设计第一版,在到优化调整之后,证明一点,卡片不要因为卡片而套设计,反而会失去效果,考虑功能模块,用户体验,视觉体验也一定让整体舒服。一直都说,绘画中需要有主有次,设计中也一定要有主,有次的进行设计。这样层级关系才能更清晰。

但这些条件一定是从,体验、色彩、布局、版式等方面进行对比和研究的。设计不要先着急做设计,前期的进行思考,逻辑清楚了,在进行设计的时候会更加的顺畅。卡片式设计,大家都在应用,希望这个文章能给大家带来一点点知识点,那就不枉费我在熬夜写这篇文章。

不为别的,只是一个喜欢分享的肉团子。这篇文章就写到这里,如果喜欢请给个赞吧。如内容有没说到的地方,各位可以进行补充,以上两个图你稀罕哪个呢?

 蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

标签: 卡片式设计 « 帝皇彩票官网虎牙公司级全新LOGO发布,打造直播里的平行世界! | 从0到1 —— 一组图标的诞生»


蓝蓝 http://www.bjhbys.com

  1. 2020年1月(20)
  2. 2019年12月(50)
  3. 2019年11月(61)
  4. 2019年10月(49)
  5. 2019年9月(48)
  6. 2019年8月(58)
  7. 帝皇彩票官网2019年7月(58)
  8. 2019年6月(58)
  9. 2019年5月(31)
  10. 2019年4月(37)
  11. 帝皇彩票官网2019年3月(43)
  12. 2019年2月(25)
  13. 2019年1月(45)
  14. 2018年12月(41)
  15. 2018年11月(40)
  16. 2018年10月(29)
  17. 2018年9月(40)
  18. 2018年8月(87)
  19. 2018年7月(107)
  20. 2018年6月(86)
  21. 2018年5月(110)
  22. 2018年4月(40)
  23. 2018年3月(35)
  24. 2017年8月(35)
  25. 2017年7月(45)
  26. 2017年6月(7)
  27. 2017年5月(27)
  28. 2017年4月(51)
  29. 2017年3月(70)
  30. 2017年2月(65)
  31. 2017年1月(69)
  32. 帝皇彩票官网2016年12月(55)
  33. 帝皇彩票官网2016年11月(111)
  34. 2016年10月(92)
  35. 2016年9月(53)
  36. 2016年8月(9)
  37. 2016年7月(4)
  38. 2016年6月(9)
  39. 帝皇彩票官网2016年3月(19)
  40. 2016年2月(26)
  41. 帝皇彩票官网2016年1月(30)
  42. 2015年12月(33)
  43. 2015年11月(35)
  44. 帝皇彩票官网2015年10月(46)
  45. 2015年9月(43)
  46. 2015年8月(40)
  47. 帝皇彩票官网2015年7月(33)
  48. 2015年6月(46)
  49. 2015年5月(58)
  50. 2015年4月(70)
  51. 2015年3月(55)
  52. 2015年2月(17)
  53. 帝皇彩票官网2015年1月(33)
  54. 帝皇彩票官网2014年12月(21)
  55. 2014年11月(84)
  56. 2014年10月(94)
  57. 2014年9月(6)
  58. 2014年8月(1)
  59. 帝皇彩票官网2014年7月(13)
  60. 2014年6月(66)
  61. 2014年5月(99)
  62. 2014年4月(88)
  63. 2014年3月(102)
  64. 2014年2月(68)
  65. 2014年1月(83)
  66. 2013年12月(106)
  67. 2013年11月(112)
  68. 帝皇彩票官网2013年10月(61)
  69. 2013年9月(20)
  70. 2013年7月(13)
  71. 2013年6月(27)
  72. 2013年5月(48)
  73. 2013年4月(39)
  74. 2013年3月(8)
  75. 2013年2月(20)
  76. 2013年1月(31)
  77. 2012年12月(33)
  78. 帝皇彩票官网2012年11月(31)
  79. 2012年10月(23)
  80. 2012年9月(8)
  81. 2012年7月(14)
  82. 2012年6月(15)
  83. 2012年5月(31)
  84. 2012年4月(24)
  85. 2012年2月(4)
  86. 2012年1月(8)
  87. 2011年12月(35)
  88. 2011年11月(32)
  89. 2011年10月(13)
  90. 2011年8月(1)
  91. 2011年6月(1)
订阅Rss
广西快3 大通彩票官网 吉林快3 吉利彩票投注 状元彩票平台 上海11选5分布走势图 迪士尼彩乐园网址 帝皇彩票开奖 博发彩票APP下载 北京赛车pk10玩法