<menuitem id="mh6do"></menuitem>

    
    
    <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
    <ol id="mh6do"></ol>
      <em id="mh6do"><tr id="mh6do"></tr></em>
      <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

      <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>

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

      成长值达到300分以上才可以发?#21152;矗

      先看看别人的即刻>

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

      原创文章 分类: 经验/观点 版权:
      25292 809 802 18
      2019-04-09
      204.5
      首页推荐

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

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


      教程前的引言

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

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


      一、什么是卡片

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

      设计效果图展示

      顺叔为了这个文章特意设计了两个案例,通过这两个案例进行一些?#27493;狻?#35831;见下图:

      Image title


      二、卡片设计优势

      1.趋势

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

      Image title

      2. 层次感

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

      Image title

      3. 规整化

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

      Image title

      4. 视觉体验

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

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

      Image title

      5. 易用性

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

      Image title

      6.简约设计

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

      Image title

      7. 交互效果

      在卡片式的设计中会有一些动效交互,?#28909;?#25972;体卡片放大、 缩小 、左滑、 ?#19968;?#21487;以整模块化滑动 缩放。整体效果增加了不错的视觉交互体验


      三、卡片正确设计知识

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


      1.卡片式形式一

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

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

      Image title

      此?#35745;?#26469;自于网络


      2. 卡片式形式二

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

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

      Image title

      此?#35745;?#26469;自于网络


      3. 卡片式形式三

      这?#20013;?#24335;上图下文字,或者是上标题,下?#35745;?#30340;形式,这?#20013;?#24335;特别在?#35745;?#32032;材的选择上尤为重要,有视觉效果好的?#35745;?#36890;过剪切,处理,合成,摄影,插画等等方式,出现的?#35745;?#36136;量上好的话可?#28304;?#21160;整个设计的?#32856;瘢?#36890;过?#34892;?#30340;?#35745;?#20256;达,文字传达,让用户更清晰的了解。这样的形似?#35805;?#22312;入口或者列表的形式出现的比较多,同样也能体现出整体化和视觉化

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

      Image title


      此?#35745;?#26469;自于网络


      4. 卡片式形式四

      大图卡片式,?#35805;?#20197;摄影?#35745;?#25554;画形式,文字压与?#35745;?#20043;上,这样的效果更具有冲击力,也能显得出比较潮流。体验也很不错,放大视觉,展示内容,?#35745;?#30456;结?#24076;?#35753;浏览者更愿意多看一会。表达的?#35745;?#19982;文字内容相符,做到图文交融的程度。?#35805;?#36825;样对于?#35745;?#30340;选择上还是比较要求严格的。没有质量的图效果会降低。

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

      Image title

      此?#35745;?#26469;自于网络


      5.卡片式形式五

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

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

      Image title

      此?#35745;?#26469;自于网络


      6. 卡片式形式六

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

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

      Image title

      此?#35745;?#26469;自于网络


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

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

      共同的特点是

      1. 四个角都是?#27493;?/p>

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

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

      4. 卡片上面组成部分,标题,副标题,图形,按钮,?#35745;?#22836;像

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

      6. ?#35805;?#21345;片应用在会员,列表,说明,优惠劵,分类,类别,集合页,?#38431;?#39029;等场景常见


      三、卡片正确设计知识

      为了?#27493;?#25991;章,顺叔临时构?#23478;?#20010;产品原型,而快速进行了简单的设计,一个第?#35805;媯?#19968;个优化版,主要为了?#27493;?#19968;下这个卡片设计一些问题,

      以下此图为构思的原型图

      Image title

      经过分析原型图之后开始进行设计,首先设计一个版本的,如果这样卡片布局设计,这样色彩搭配的情况下,会怎么样呢,整体设计用了蓝紫色为主色调,首先铺蓝紫色的色块作为背景,然后上面放白色卡片,以至于卡片上详细的内容,?#28909;?#25968;字,图形 能更好的丰富支撑卡片。同样数据流也是比?#29616;?#35201;的C位。也是比?#29616;?#35201;的位置。接着根据原型图下面有两个卡片,通过扁平化设计,以色块为主设计一个蓝色,一个橙色的卡片,上面并有图标,头像,以及标题,两个颜色的?#21592;齲?#26356;让视觉有冲击力,整体看这个设计并没有什么,但有个问题在于单个模块拿出来效果的?#33539;?#19981;错,但组成之后上面的卡片C位让下面的两个带颜色的卡片抢了视觉,当打开这个界面的时候视觉落点在彩色卡片上,那么这个整体设计上就出现了问题,上面的数据,白色卡片其实是比?#29616;?#35201;的,而且整个画面都是卡片毫无设计上的变化,

      那么只能在这个基础上在进行优化,其实大家在做设计的同时也这样,在考虑功能模块前提下,用户体验,也要考虑视觉体验,那么视觉从哪方面来,色彩、层次、版式等等方面。那么能不能在进行一下优化呢,其实还是有?#21344;?#22312;进行优化。以下图为第?#35805;?/p>


      设计第?#35805;?/strong>

      Image title

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

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


      调整后


      Image title

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

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

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


      写设计教程不易、而且写良心设计教程更不容易、如有任何设计上的疑问可以加我。

      请各平台转载时署名原作者:张增顺 和注明文章来源、同样希望能帮助到更多的设计小伙伴。

      版权申明

      本文和顺叔设计归本人所有


      如果觉得设计文章能帮助到你

      请为?#19994;?#36190;谢谢!


      张增顺

      腾讯高级设计师 QQ:1071347659

      4097粉丝/0关注

      人气明星助人为乐首页达人小有见解砖家
      轻松几步搞定熟悉城市线性插画3步教你学会PHOTOSHOP 3D酷炫海报
      2
      李相赫的火影劫

      我也觉得,第二版,层次太多了

      精彩!

      张增顺

      TA已经获得10枚勋章啦

      • 成就勋章

        • 特别勋章

        • 身份勋章

      • 已拥有

      • 作品

        创造者才是真正的享受者。

      • 经验

        经验是一所好学校,可它的学生却经常旷课。

      • 活跃

        大神都是从围观群众开始的

      • 拓展

        作品、经验、活跃还不能满足你?

      京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

      Cw9sdfed

      朕收下了
      印度快乐8开奖号码
        <menuitem id="mh6do"></menuitem>

        
        
        <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
        <ol id="mh6do"></ol>
          <em id="mh6do"><tr id="mh6do"></tr></em>
          <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

          <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>
            <menuitem id="mh6do"></menuitem>

            
            
            <em id="mh6do"><ol id="mh6do"><mark id="mh6do"></mark></ol></em>
            <ol id="mh6do"></ol>
              <em id="mh6do"><tr id="mh6do"></tr></em>
              <dl id="mh6do"><ins id="mh6do"><thead id="mh6do"></thead></ins></dl>

              <sup id="mh6do"><menu id="mh6do"><small id="mh6do"></small></menu></sup>
              北京赛车pk10开户 三星组六玩法 广西快3一定牛 极速飞艇是哪个国家的 老快3遗漏号360 重庆幸运农场走势图官网 体彩p5开奖号 cctv德甲直播表 黑龙江22选5运位走势图 湖南幸运赛车大小倍数 北京快三一定牛今天 体彩福建36选7需要对号 海南飞鱼可以胆拖吗 新11选5下期预测 吉林快三微信群贴吧