首页 体育 教育 财经 社会 娱乐 军事 国内 科技 互联网 房产 国际 女人 汽车 游戏

超全干货,帮你完整掌握「卡片式设计」知识点

2020-01-14

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

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

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

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

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

实践事例-淘宝微淘

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

实践事例-Pinterest

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

实践事例-QQ音乐

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

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

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

实践事例-探探主页

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

实践事例-京东领券中心

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

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

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

实践事例-美团外卖会员

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

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

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

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

卡片与布景的色彩比照会影响这卡片的全体质感,在规划时咱们需求掌握好卡片与底色的比照,不同的明暗比照出来的质感也会有差异。这儿有两点主张:

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

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

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

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

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

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

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

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

标题首要作用为 2 点:1.简略阐明每个模块的内容;2.让用户在长页面阅览中起到引导、定位的作用。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

无论是卡片式或许拉通平铺的办法,其终究的意图都是为了服务于内容,咱们在做规划的进程中仅仅挑选适宜于出现咱们内容的一种办法。依据详细的内容状况给出合理/适宜的规划判别才是咱们需求不断提高的要害点,切莫流于方式而疏忽了内容规划自身的重要性。

假如你想持续深化了解其他规划类型:

每年都会有一波又一波的规划趋势盛行起来,被规划师们追和顺仿照着。咱们总觉得迎合着趋势做的规划必定不会差。 比方,之前盛行的卡片规划,许多规划师都选用这种方式,来区隔内容模...

阅览文章

欢迎重视作者的微信大众号:「IDfor」

热门文章

随机推荐

推荐文章