关于卡片设计的分析与思考

  卡片是APP常睹的计划外面,它既有好处也有流毒,是以须要按照场景和实质确定映现外面。本文从四个方面临卡片计划张开明白,推举给对卡片计划感风趣的童鞋阅读。

  卡片是搬动端产物常睹的计划外面,平凡用正在各种产物和场景中。卡片自带肢解属性,让它成为了页面结构中的利器。然而卡片也并不是全能的,肢解带来的间距影响了阅读场景的重醉式体验,同时也会填充通盘页面的长度,是以须要按照场景和实质确定映现外面。

  正在搬动端产物中,承载着图片、文字等实质的矩形区块,便是咱们所说的卡片。按照映现外面,卡片基础能够分为3大类。

  边距卡片正在页面计划中利用加倍平凡,往往采用带圆角外面,愚弄暗影以及地方的边距造成页面留白,从而发生加倍激烈的“存正在感”,同时填充了页面的宗旨感,让页面加倍灵动。

  悬浮卡片厉重用于效力咸集或者页面实质扩展场景,主意是提拔页面的操作结果。比如微信闲聊界面下拉产生的小圭臬卡片,高德舆图首页卡片,或者iOS体系随时能够挪用的体系限制卡片和讯息卡片。

  通栏卡片只保存上下边距,往往不会填充暗影,边框线等样式。厉重用于页面实质分组,提拔实质的可识别性。

  卡片能够通过边框线、暗影、背形象等特色造成独立实质布局,通过边距与其他实质分辨,从而造成其独有的计划上风。厉重蕴涵以下几个方面:

  相较于广博框计划或者肢解线结构,卡片能够实行音讯概括组合,划分出加倍清楚的构制布局,完成繁杂实质的简化收拾。

  比如“我的淘宝”页面,正在老版本中采用了通栏卡片,通盘页面音讯布局一经比拟清楚了。然而跟着页面实质的增加,正在新版本中页面实质一齐采用了边距卡片的外面,而且调和了横版卡片和竖版卡片两种式样,加强了实质的独立性,层级加倍清楚。

  同时边距卡片外面有利于场景的拓展,比如“我的淘宝”频道正在618时代,插入了618举止楼层,正在视觉显露上毫无违和感。

  卡片计划最大的上风便是通过边境塑制出来的合座性。一方面能够让用户感知到实质的归属层级,另一方面,能够通过卡片背形象,增强用户对实质的感知。

  比如网易厉选、天猫会员店的开卡福利,都采用了加倍鲜亮的背形象,相对其他模块加倍杰出,也许迅速收拢用户当心力。

  卡片行动一个独立的音讯咸集容器,具有XYZ三个宗旨的实质扩展和叠加特质,能够提升空间的愚弄率。

  因为搬动端页面计划厉重为纵向的音讯流,往往卡片厉重为X宗旨的交互操作,比如阁下滑动等。Y宗旨厉重为“点击”操作完成卡片实质的扩展,避免与纵向的滑入手势操作发生冲突。

  Z轴宗旨厉重是实质叠加涌现,用户只可看到一个卡片实质,完毕一个卡片操作后,才气查看下方的卡片实质。

  比如知乎中“解答题目”中的卡片计划。用户除了按钮操作,能够阁下滑动迅速轻视卡片实质。交互式样容易兴趣,能够带给用户比拟激烈的挑选疾感,只是卡片实质挑选是一次性的,倘若用户采用轻视或者放弃卡片后,实质是无法再次查看的。

  是以外面上讲,Z轴的交互外面能够叠加众数的的卡片实质,扩展性更强。然而不行逆的操作式样,须要切磋到对产物对象的影响。

  例方今日头条中的音讯卡片,咸集了转发、评论、点赞等操作效力。其余卡片自身也能够填充交互操作,比如微信中卡片左滑和长按,能够激活级联操作选项。

  卡片实质也援助众种映现式样,也许主动为用户显示更众的音讯,开导用户合心。比如商品横向和纵向的主动滚动、放大涌现等。

  App Store 中的“今日”频道中的卡片,点击能够直接显示APP周密音讯,比拟页面跳转式样,给用户带来了加倍自然的交互体验。

  为了维持通盘产物界面类似性,正在各个页面中都须要遵命团结的计划样板。咱们看到京东最新版本中,正在“我的”频道页面,卡片计划采用了通栏圆角式计划,与查找结果页样式维持类似。

  比如通过付出宝首页改版前后对照,咱们能够看到改版后,金刚区去除了白色布景,提拔了icon正在通盘页面中的视觉层级,从而加强了用户对新增效力的感知。

  历来的通栏卡片形成了边距卡片,通盘页面层级加倍清楚,用户对界面实质定位加倍切确,减轻了用户正在浏览流程中的认知肩负。

  正在现实计划就业中,咱们怎么判决是否要采用卡片外面,以及采用何种卡片外面呢?

  卡片受到外面、尺寸所限,往往只是行动页面构成元素,承载效力入口的效用。正在差异的场景中,卡片的显露外面是纷歧律的,须要凭据实质和对象定位来确定显露外面。

  列外式卡片列外式卡片往往用正在筑设页面或者“我的”页面,厉重采用通栏卡片外面。实质人人采用“icon+效力名称“的列外式样。厉重主意是开导用户定位效力入口,辅助涌现实质状况即可,不须要承载更众的音讯。

  九宫格卡片九宫格卡片同样采用“icon+效力名称”的外面,往往用正在效力数目不众的场景,比拟较列外式卡片,音讯可读性更强,更容易识别。

  该类型卡片并不众睹,高度尺寸较小,厉重以题目来吸援用户。为了加强用户的感知,往往会产生正在页面中识别性较高的身分。

  比如喜马拉雅“个人FM”的入口卡片。为什么不采用更有吸引力的映现式样呢?我以为厉重是由于实质所决计的。

  个人FM栏目中实质并不固定,往往是自媒体的实质咸集,近似于榜单,无法保障每条实质对用户的吸引力。因而仅仅行动入口执行给用户。而喜马拉雅中的音频更众的是大旨性的实质合集。

  比如下方的“猜你锺爱”中实质,图片和题目都能够给用户明了的实质开导,因而更容易吸援用户,是以须要优先保障该栏目实质的显露。

  那么为什么不直接放正在金刚区呢?大概是由于金刚区实质有限,也大概是激起实质坐蓐者的主动性,采用了开导性更强的映现外面。

  同样近期付出宝“产业”频道中上线了直播卡片,也采用了简单列外卡片的外面。因而简单列外卡片外面,适合于既期望填充必然的实质曝光,又不会影响重点实质的显露场景。

  实质型卡片包蕴的音讯外面加倍众样化,比如文本、图片、动图、视频等,承载的音讯量更大。

  最为榜样的便是今日头条、微博等资讯社交产物,既须要为用户营制出重醉式的阅读体验,又不行让用户正在洪量的实质中丢失了宗旨。是以这类产物厉重采用通栏卡片,正在实质显示和浏览体验中做到平均。

  固然卡片中能够嵌套众个层级的实质,然而为了保障实质涌现和浏览体验,须要避免太众实质的嵌套组合。奇特是单个卡片中,避免众个卡片并排涌现,变成实质涌现过于碎片化,填充用户的浏览肩负。

  因为卡片必必要填充上下间距造成独立空间,会导致页面的长度填充。是以关于实质布局一样的模块,如非务必,不要盲目采用卡片外面。

  比如通信录,微信同伴圈、商品查找列外页面等,采用了容易的肢解线实行实质分辨。既避免了页面空间的糜掷,又提升了用户的浏览结果。

  子牧先生。民众号:子牧计划笔道(HelloDesign),人人都是产物司理专栏作家。用户体验计划师。产物从B端到C端,横跨音讯通讯、电力、证券、电商等众个周围。擅长计划本领论和交互计划探索。

  人人都是产物司理(是以产物司理、运营为重点的进修、交换、分享平台,集媒体、培训、社群为一体,全方位任职产物人和运营人,创造9年举办正在线+期,线+场,产物司理大会、运营大会20+场,遮盖北上广深杭成都等15个都会,熟行业有较高的影响力和出名度。平台密集了繁众BAT美团京东滴滴360小米网易等出名互联网公司产物总监和运营总监,他们正在这里与你一块发展。

更多案例

201凤凰平台ph1588网页设计规范?

假设你念要理会的是为什么常睹的网页宽度正在安排和竣工的期间拔取1200这个宽度,这个题目比力容易注脚。 咱们只看 PC 端,凭据现正在屏幕巨细的分散...

关于卡片设计的分析与思考

卡片是APP常睹的计划外面,它既有好处也有流毒,是以须要按照场景和实质确定映现外面。本文从四个方面临卡片计划张开明白,推举给对卡片计划感风趣...

凤凰平台ph158高端vi设计的技巧对平面设计

【摘要】咱们生计正在instagram时间。现正在,你的品牌情景比以往任何工夫都能使你凯旋或腐败。最凯旋的品牌或者曾经商讨,或进入了巨额的资源来练习...

友情链接:

Copyright © 2002-2019 凤凰平台ph158网络设计有限公司 版权所有 | 网站地图