UI中的卡片式设计

卡片式规划关于咱们来说并不生疏,从规划类网站上或市场上的一些APP中也会看到许多的卡片式规划的事例,卡片式规划也是UI规划中最常用的办法之一。

最近在新项目的规划中也测验运用了卡片式规划,结合实践项目中的得到了一些考虑进行总结并概括出一些卡片式规划的小常识点。一同期望自己经过本次的总结进行常识沉积,以及跟咱们一同讨论下卡片式的规划。

在实践日子中的卡片式规划能够说是无处不在,例如身份证、交通卡、银行卡、手刺、便当贴、扑克牌、游戏卡……诸如此类的日子常见品都是以卡片的办法存在,其共同点都运用一个容器中承载着内容,而且具有“便携性、信息简练和相对独立性”。

在项目规划之初我剖析了一些运用卡片规划的App,而且从中收拾总结了几个较为常见的卡片式规划的运用场景。

Feed 流

卡片式的feed流规划是一种十分常见的规划,早在前几年Facebook、Google 等产品就运用了这一办法,Feed流作为一种长内容的前言,用户需求长期的滑动看内容并挑选有用信息,卡片式规划很好的处理了内容与内容的区块分隔,让用户在长屏幕滑动中仍旧能够很好的清晰每一块的内容。

实践事例-淘宝微淘

瀑布流规划

瀑布流的出现让单屏区域内显现了更多的内容,而内容较多的情况下,运用卡片式规划较好的对内容进行了区域区分,让左右上下的内容从全体中具有相对的独立性。

实践事例-Pinterest

左右滑动组合型内容

卡片式规划具有较强的层次感,比较于拉通平铺更能出现内容可滑动感触,而且块状化的规划让内容具有较高的区域切割感。

实践事例-QQ音乐

Tips提示

作为非界面固定内容,卡片式规划能够让tips提示规划变得更自在,在契合用户体会的根底上,它能够出现在任何咱们想要它出现的方位。

实践事例-淘票票会员提示

结合手势的单块可互动内容

若页面中有且只需一个主内容,而且需求用户进行快速挑选时,可考虑这种结合卡片式规划与手势规划的办法。大大增强了用户关于规划的体会感知和丰厚视觉体现。

实践事例-探探主页

卡券类规划

卡券类的规划实践上是一种物化映射的进程,咱们在实践中看到的卡券造型,结合卡片式的拟物化规划,让用户在屏幕上能够更直观的感知,提高了规划的代入感。

实践事例-京东领券中心

调集型功用进口

调集型功用进口往往会有多个进口,运用卡片式规划让进口构成一个区域全体,能够做到既统一又相对独立。

实践事例-淘宝微淘重视账号

个人主页顶部内容卡片

个人主页的规划往往会在气氛上营建沉溺感,卡片式的规划能够把要害信息进行概括收归,让本来单个的内容构成一个全体。

实践事例-美团外卖会员

根底的卡片规划规矩,信任咱们在一些体系等级的规划辅导标准中也或多或少都能了解到,不同渠道的标准差异性其实不会有太多实质性的差异,更多的是处理技巧或办法的差异,而每个规划师对其了解的视点也会具有一些差异化,这儿共享下我关于卡片式规划的一些根底主意。

1.卡片的质感打磨

相同的卡片规划,不同的人做出来的感触或许会有不同,而表达卡片质感的首要要害根底点在于:卡片形体、投影深度、卡片色彩比照,咱们需求了解这些根底常识点之后,再结合实践的APP风格进行规划。

卡片形体

就像图标的图形规划相同,不相同的形体也能表达出不相同的气质,因而在规划的时分咱们需求根据全体的风格进行表达。异形卡片的规划,能够让原有方方正正的卡片表达出差异化,从造型上打破一些传统的处理办法,再结合一些IP人物元素能够愈加深化的表达出详细的内容气氛。

投影深度

投影的视觉作用,会直接影响着全体卡片的质感,太深太大的投影会显得全体卡片过于厚重,太浅太小的投影则显得过度僵硬,因而合理的数值份额则能够让卡片看起来天然有质感。在项目中我常用的一组数值规矩是1:2或1:3,例如Y轴偏移10px,含糊度则设定为20或30px,这样成份额的数值出来的作用会较为天然,如下图:

卡片色彩比照

卡片与布景的色彩比照会影响这卡片的全体质感,在规划时咱们需求掌握好卡片与底色的比照,不同的明暗比照出来的质感也会有差异。这儿有两点主张:1.卡片色与布景色不宜过分挨近或运用同一色彩,由于会影响卡片全体的空间质感或使得卡片的边际锐度下降;2.深色布景上,尽量让卡片与布景色在同一色系或许明度不要差异太大,防止过于突兀。

2.边距的设定

在运用卡片式规划时,常常会纠结边距的设定,宽边仍是窄边?多少像素更为适宜?常常我会带着这种疑问去规划。

根据内容的简略规矩

卡片式规划作为规划的体现形式,终究是为了承载内容,因而边距的宽窄也需求依赖于实践内容的判别。结合我在项目中的测验共享以下几点:

多窄少宽

卡片内容较多是运用窄边距,让卡片具有满足的空间来展示内容,内容较少则能够考虑选用宽边距来打造全体的视觉空间感,如下图app store和淘宝的规划比照。当然这仅仅一个主张,实践还得详细问题详细剖析。

再如一些瀑布流、宫格、横滑模块较多的APP的规划亦是如此,在内容较多的情况下会把边距压缩到最小的合理距离。

表里成份额

以最外边为根底值往里规划,距离以固定份额进行减缩,尽管没有删格来得标准,但也能够让规划变得有迹可循。

根据删格

删格体系处理了一些根底的板式问题,有助于提高规划的标准性,让规划愈加有迹可循。在设定卡片式的边距时能够恰当运用删格体系,让边距与内容构成固定的联系,这样能够协助全体的卡片规划愈加具有细节和规矩。

4.卡片的标题设定

标题的设定首要考虑以下几点:1.是在卡片内仍是卡片外;2.标题的字号设定多少更适宜;3标题是否加粗?

卡片内或外的比照

在项目规划中让我较为纠结的是:标题应该在卡片内仍是卡片外?经过了一些事例的测验之后,我总结了一个规矩:当卡片内容是独立的模块或模块中只需一个大标题时可设定在卡片内;当卡片内容是以组合出现或许具有延续性内容时设定在卡片外,构成最外层的主标题。

标题的字号设定

标题首要作用为2点:1.简略阐明每个模块的内容;2.让用户在长页面阅览中起到引导、定位的作用。经过一些测验发现:1.当内容较少时,并不需求太大的字号即可起到标题的作用;2.当内容较多时,较小的标题字号则简略被沉入内容中,让用户在阅览的进程中难以发现,而导致信息获取缺失;3.标题应该与正文字号巨细差异主张在6-10px,这样能够更好的摆开差异,让标题更具有标题感。

字体是否加粗

惯例思想下咱们都会对标题进行加粗,我在实践中的经历得到的总结是:需求看手机体系或不同厂商的机型。我在项目之初都对标题进行了加粗,但后续在跟进复原时看到的作用并不抱负,特别是Android的机型上,由于咱们运用的是体系默许字体,android体系许多字体并未对体系进行优化,而是运用微软雅黑,微软雅黑在android体系上再加粗,就会显得整个体系的外概括特别粗糙,终究咱们根据不同的机型进行了差异化的挑选。

4.圆角的规矩

圆角的设定实践上没有太多的原则问题,只需契合全体的风格调性即可。当然不同的圆角也能表达出不同的质感,大圆角表达柔软、小圆角表达健康。

圆角的规矩设定

以卡片的圆角作为根底的参考值往内计算全体的圆角运用标准,卡片与卡内的元素构成合理的份额规矩,而非随意根据“经历”进行设定。

圆角巨细差异比照

巨细的差异化出现出不同的视觉感触和风格差异,咱们在规划时更多需求考虑咱们规划的产品风格或气质是合适大圆角仍是小圆角,而非根据一些规划网站上的盛行趋势。因而根据不同的风格或许实践内容场景下进行设定才更为合理。

5.宽窄距离比照

卡片式规划比较拉通式规划更需求考虑规划中的透气感。在惯例的规矩下,对内容边距及四周边距进行调整,让内容之间具有较好的空间呼吸感,然后让规划得到留白的作用。如下图比照事例,在根底删格不变的情况下,每个距离都在原有根底上扩展了12px,然后让内容具有较为舒适的宽度进行阅览

挑选某一种规划办法的要点在于咱们了解这种办法的长处,而且能够把这些长处交融到咱们的规划傍边。在项目规划中,我总结了几点卡片式规划的长处。

优化模块化,提高内容区域感

模块化的规划也是咱们日常中会运用到的办法,结合卡片式的规划能够让模块化的规矩变得愈加简略,增加了模块之间的可复用性和延展性。而当内容较多的情况下,运用卡片式规划能够有用直接的构成区域分隔,从视觉感知上就对内容进行了分隔,提高用户获取信息的功率。

提高内容独立性

在组合型的内容规划上,运用卡片式规划能够让每个小块内容出现相对独立的展示特性,结合模块化的规划,能够在一大片相关的内容中,做到既统一又相对独立。

增强视觉空间感

卡片式的规划能够提高全体规划层次感,经过投影、前后色彩的设定,让内容与布景之间发生视觉空间感。

增强视觉体现力

在规划中咱们能够对卡片进行异形规划,用来到达咱们想要的风格体现。当然在一个页面内尽量不要太多,尽量运用页面中的首个卡片进行差异化处理,让全体体现出一点不同即可。

增强可点性

卡片式规划发生的空间感,让每个模块愈加杰出,比较扁平式的处理办法,卡片式从视觉感官上会较为杰出,从感官上更具可点击感知。

任何一种规划办法都会有其利害,终究挑选某一种其实不过便是当下最合适罢了,而在测验中我也总结了几点卡片式规划存在的一些缺陷,当然仅仅个人的考虑罢了。

横向空间使用率下降

卡片式规划的存在左右边距,因而在有限的屏宽内内容横向区域比较于拉通式规划有所削减,在内容较多的情况下能够恰当调小卡片左右边距。

防止过多的层级

从全体来说,卡片式的规划自身便是增加了根底布景的层级体现,其视觉层级比较拉通式更为丰厚,因而不主张在卡片上再二次叠加块状式规划,防止形成层级杂乱。在项目中也会遇到内容层级需求多层级的体现,从中总结了2种办法:1.使用不拉通切割线;2.使用淡色布景底色。

不合适长文或内容多的表达

若在规划上运用了卡片式的规划风格,但在一些长文体现的界面主张去除卡片。长文章的页面更强调阅览的沉溺感,用户需求更多的专心于文字,这时分无边的体会更合适。

掌握好界面的分区,防止过于拥堵的排版

卡片规划具有共同的视觉空间感,但卡片与卡片直接也会有分隔,因而在规划时更应该对内容进行概括,防止发生过多的小块卡片而导致排版过于拥堵、杂乱或许内容不行宽度展示。

Copyby 2020 Power by DedeCms