非常钟熟悉界面设想中卡片式设想

侬去斯

来历：知乎



        正确熟悉卡片式设想，什么是卡片、总结卡片上风、卡片正确设想常识经过设两个案例停止讲授，卡片在应用时的技法，望能帮助大师。
明天顺叔和大师一路聊一聊卡片式设想，不管是WEB还是APP卡片式设想应用的比力多，很多UI设想师比力偏心这样的表示，卡片式设想会给人一种视觉上的享用，也能对于界面具有条理感。但常常在卡片设想中有一些技法还是需方法会，不能由于卡片式设想而卡片式设想，要能更好的利用到界面场景中。希望在此次分享中一些常识点能帮助到大师，以后的几篇系列文章中，顺叔会从界面中比力趋向的设想技法停止分析，希望能帮助到一些设想的小伙伴。


引言
卡片式设想这几年比力风行，一样这样的设想表达也是个趋向，利用在APP PC界面中至今还风行着，处置UI设想的城市晓得卡片式设想，具有把内容整合模块化，从视觉，本性化体验上停止显现，是设想师在设想经常用的一种表示，一样也具有怪异的创新概念。
在一些项目中，一些客户会说这个设想的APP界面有点太白，没有条理感怎样办，那这时你应当和客户说在APP设想中应用了现在比力风行的一个表示手法，卡片式设想，可以处理在画面中有本性化 、变化、 条理感的设想。那客户又问什么是卡片式设想呢？
一、什么是卡片
无处不在的卡片设想具有本性的美感和很好的易用性，是以笔墨题目，小题目，   图形或图片组成的模块化，以块状形式规整的整合内容，让内容更规整化，视觉上更本性化，也是操纵上快速的内容信息进口。更直观的表达内容信息和快速跳转操纵。成为现今在设想中一个比力风行趋向，而卡片在设想中也占用一定的上风，让整体加倍的有条理感，在应用起来也比力方便，从视觉、体验、交互都具有不错的优点
设想结果图展现



二、卡片设想上风
1.趋向
不管是大平台 还是小平台的产物城市应用这样的卡片式，跟风式设想趋向，也让卡片式设想成为了一个现在常用的上风，不外卡片式设想简直有很好的结果


2. 条理感
具有一定的条理感，能在页面版式中起到设想上的分歧，本性化变化，页面条理感区分激烈，能更好的表现提炼出内容


3. 规整化
卡片式设想以图片、 图标 、LOGO、 题目、 整合到一路 以块状的形式在界面中展现，更规整的排版显现。虽然内容多会致使页面乱，一个模块包括内容以后就会规整很多，也给页面设想上带来了更好的视觉


4. 视觉体验
卡片式给全部页面会增加视觉上的体验，出格那种大图片卡片式更具有视觉上的冲击力，布景陪衬出远景卡片式设想。一样对卡片式也感遭到舒适感。卡片式设想还是需要按照全部结构、 产物需求 、功用停止设想。以到达最好的用户体验、视觉体验。
不要为了卡片设想而卡片设想。


5. 易用性
卡片式设想在易用性和灵活性上比力高，在响应式设想中一样利用的也比力多一些。能更好的有序排列。


6.繁复设想
繁复设想会更显得品格，不需要过量的停止装潢，哪怕就是一个红色的色块，上面点缀有色彩的图标和题目 副标的变化，也会感觉显得高峻上，就算是一个带有色彩的色块卡片，也不必过量的设想 内容上的题目 、图标、 按钮就足以支持起卡片


7. 交互结果
在卡片式的设想中会有一些动效交互，比如整体卡片放大、 缩小 、左滑、 右滑，可以整模块化滑动 缩放。整体结果增加了不错的视觉交互体验。
三、卡片正确设想常识
一般在界面设想中卡片的存在的意义和表示手法都是什么样的呢，下面为大师举例了几种常用的正确的设想表达姿势。希望小伙伴在设想的同时有所灵感和参考，把一些表示手法加入到自己的设想中，合适才最重要。卡片式设想还是要按照全部气概和全部结构而停止展现，在做进一步的对照和结构中以最好的结果为终极展现方式，总结分析几个常见代表例子，若有不全请会商补充，下面就是一些例子
1.卡片式形式一
以色块为主体并用现在比力风行的突变色组成，其中四边为圆角，一样色块下边阴影陪衬出主题，这个是在卡片中设想比力常见的应用手法，卡片的长高在设想中也是按照结构，内容功用而停止设定。正方形，长方形都是一个表示得手法，在色块上面题目笔墨，图标，图形是全部卡片的结构的形式，不过就是左右结构和高低结构
利用处景：卡包、天气、种别、进口、优惠劵，卡劵


2. 卡片式形式二
这类形式配合点都是在头部C位出现的卡片式设想，其中承载着题目，副题目，以及图文版式，不难发现，假如图片有色彩，那末下面是红色底，这样在白底上面色块的出现还是比力繁复凸显卡片，假如布景有色彩，卡片也有色彩那末卡片的凸显水平就不会那末强，图二很多在会员卡设想中常用的比力多，也比力繁复，别的两个配合特点布景有色彩，一般底部布景色彩就是全部界面的主色彩，布景有色块，上面就用红色卡片，卡片上方题目、  笔墨、  图片显现。只不外排版的方式有所分歧而已，在很多APP设想中，这样的表达也很多，经过主色彩可以很融合的把上面的状态栏，导航栏融为一体视觉上同一性，底部布景色彩延续下来，上面凸显红色卡片，这样更具有视觉感和条理感。红色的卡片不需要过量的修饰，更能表现的上面的笔墨和图片。
利用处景：会员卡，滑动卡片，图文题目，进口


3. 卡片式形式三
这类形式上图下笔墨，大概是上题目，下图片的形式，这类形式出格在图片素材的挑选上尤其重要，有视觉结果好的图片经过剪切，处置，分解，摄影，插画等等方式，出现的图片质量上好的话可以带动全部设想的逼格，经过有用的图片转达，笔墨转达，让用户更清楚的领会。这样的形似一般在进口大概列表的形式出现的比力多，一样也能表现出整体化和视觉化
利用处景：滑动卡片，图文题目，进口，列表


4. 卡片式形式四
大图卡片式，一般以摄影图片，插画形式，笔墨压与图片之上，这样的结果更具有冲击力，也能显得出比力潮水。体验也很不错，放大视觉，展现内容，图片相连系，让阅读者更愿意多看一会。表达的图片与笔墨内容符合，做到图文融合的水平。一般这样对于图片的挑选上还是比力要求严酷的。没有质量的图结果会下降。
利用处景：列表，说明，进口，天气


5.卡片式形式五
列表卡片设想，这类形式一般红色的卡片，上面题目，头像，按钮，扁平插画形式表现，更多利用在一级页面的下方内容，以及二级页面的列表页大概调集页，整体弱化布景以红色为主，赐与圆角及阴影承托出条理感同时，表现上面内容部分。每个模块的单元体具有同一的视觉。
利用处景：列表，调集页，进口



6. 卡片式形式六
大卡片式设想，表示为一块特大的卡片式，上面会有题目，按钮等信息，一样表示出突出条理感，本性化设想的特质。表现出内容，一般布景有色彩上面卡片为红色，以下面布景为红色，那末卡片的形式也可色块，在对照上有个反差，才能突出卡片的感化性。
利用处景：提醒，说明，优惠劵，劵，进口



以上总结的几种卡片的形式，在设想中可以按照情况而设想，卡片多样化，结构多样化，合适自己产物的才最重要，虽然在界面设想中常用的设想，但不要自觉标为了卡片而卡片套用设想，这样起不到感化反而结果达不到理想水平。希望几个卡片形式总结能给大师带来一些灵感和启发。
一样在这些卡片中会有一些根基的配合的特点
配合的特点是
1. 四个角都是圆角
2. 按照潮水突变色或白卡片
3. 色块下的阴影，色块下的阴影更能表现出条理
4. 卡片上面组成部分，题目，副题目，图形，按钮，图片，头像
5. 字体巨细，字体色彩的变化
6. 一般卡片利用在会员，列表，说明，优惠劵，分类，种别，调集页，接待页等场景常见
三、卡片正确设想常识
为了讲授一下，顺叔随意构想一个产物原型，而快速停止了简单的设想，一个第一版，一个优化版，首要为了讲授一下这个卡片设想一些题目，
以下此图为构想的原型图



经过度析原型图以后起头停止设想，首先设想一个版本的，假如这样卡片结构设想，这样色彩搭配的情况下，会怎样样呢，整体设想用了蓝紫色为主色彩，首先铺蓝紫色的色块作为布景，然后上面放红色卡片，以致于卡片上具体的内容，比如数字，图形   能更好的丰富支持卡片。一样数据流也是比力重要的C位。也是比力重要的位置。接着按照原型图下面有两个卡片，经过扁平化设想，以色块为主设想一个蓝色，一个橙色的卡片，上面并有图标，头像，以及题目，两个色彩的对照，更让视觉有冲击力，整体看这个设想并没有什么，但有个题目在于单个模块拿出来结果简直都不错，但组成以后上面的卡片C位让下面的两个带色彩的卡片抢了视觉，当翻开这个界面的时辰视觉落点在彩色卡片上，那末这个整体设想上就出现了题目，上面的数据，红色卡片实在是比力重要的，而且全部画面都是卡片毫无设想上的变化，那末只能在这个根本上在停止优化，实在大师在做设想的同时也这样，在斟酌功用模块条件下，用户体验，也要斟酌视觉体验，那末视觉从哪方面来，色彩、条理、版式等等方面。那末能不能在停止一下优化呢，实在还是有空间在停止优化。（以下图为第一版）
设想第一版



按照上面的设想在停止优化，一样保存红色卡片部分元素，在卡片与卡片之间放一些色彩的图标，这样更好的给功用上快速进口，也能给卡片设想增加了变化。使得全部画面更灵活
虽然红色卡片，但有一些色彩的点缀，也让红色卡片活跃起来，把色彩的卡片改成红色卡片，从上到下的版式舒服多了，也没有那末跳。全部气概更繁复，同时功用也更周全。
调剂后


从原型图，在到设想第一版，在到优化调剂以后，证实一点，卡片不要由于卡片而套设想，反而会落空结果，斟酌功用模块，用户体验，视觉体验也一定让整体舒服。一向都说，绘画中需要有主有次，设想中也一定要有主，有次的停止设想。这样层级关系才能更清楚。
但这些条件一定是从，体验、色彩、结构、版式等方面停止对照和研讨的。设想不要先焦急做设想，前期的停止思考，逻辑清楚了，在停止设想的时辰会加倍的顺畅。卡片式设想，大师都在利用，希望这个文章能给大师带来一点点常识点，那就不白费我在熬夜写这篇文章。
不为此外，只是一个喜好分享的肉团子。这篇文章就写到这里，假如喜好请给个赞吧。如内容有没说到的地方，列位可以停止补充，以上两个图你奇怪哪个呢？




原文地址：https://zhuanlan.zhihu.com/p/66367844
免责声明：
1、文章部分图片源于收集，均为表示图；
2、一切文章、图片、音频视频文件等材料版权归版权一切人一切；
3、因非原创文章及图片等内容没法和版权者联系，如原作者或编辑以为作品不宜上网供阅读，或不应无偿利用，请实时告诉我们，以敏捷采纳适当办法，避免给双方形成不需要的经济损失；
4、本页面内容由爬虫法式自动收集于互联网，如无意中加害了媒体或小我的常识产权，请电邮【E-Mail:cb@yoyodoc.com】告之，我们将于24小时内删除。