店铺卡片信息太多怎么排？学会这招快速搞定排版
一、组建介绍
当提及店铺卡片的时候, 大家首先出现的反应必定是, 那可不就是和商品卡片没什么差别吗?
的确, 你们的印象并无差错, 店铺呢, 作为商品于抽象层面的聚合, 其组件表现形式, 与商品卡片并不存在本质性的差异, 然而, 商品卡片的字段内容, 常常比商品卡片自身更多, 甚至于向下涵盖商品卡片本身, 故而, 这个组件的设计难点, 全在于怎样合理地去安排信息之上。
信息要进行归纳总结以及排版, 这属于 UI 设计必备的能力当中的一种, 越是遇到信息数量繁多的组件, 这种能力就越发会显得很重要。
然而, 经过长时间的观察, 我获悉新手在多信息排版的掌控能力方面存在不足, 大家伙儿往往更侧重于「视觉」, 却在某些层面忽视了「信息」的关键意义。其具体呈现为, 一旦要添加的字段增多, 便会手忙脚乱, 胡乱进行排版。
往期回顾：
新手科普！3个章节帮你快速熟悉UI组件中的商品卡片设计
一、组件介绍, 商品卡片是电商产品中广泛存在的组件。狭义的商品需商品卡片承载关键信息；广义的所有可交易产品, 像课程、服务、游戏等虚拟商品, 也需商品卡片承载关键信息, 这些都是为方便用户快速了解商品核心属性。
阅读文章 >
二、使用场景
平台型 App 内若有多个商户入驻, 便会多用店铺卡片, 其业务种类涵盖外卖, 以及餐饮, 还有旅宿, 另外有理发, 甚至健身等诸多类型。
然而, 于日常所使用的 App 里, 商品卡片出现频次最高的那家, 并非淘宝、京东此类超大型综合电商 App, 而是饿了么、美团、大众点评, 这是由于这两者的业务流程存在极大差别。
淘宝、京东的浏览动线是, 先从具体商品开始, 再到店铺这一主要流程, 而美团、饿了么、大众点评全然相反, 先是挑选店铺, 接着再挑选具体餐品。这两者的区别犹如超市与商场, 在超市挑选商品时, 首先在意的是商品具体是什么, 其次才在意其品牌；而在商场并非如此, 首先在意的是门店和品牌, 其次才才是在这家店买什么。
所以, 淘宝京东对于商品卡片的需求, 远远高于店铺卡片, 然而美团饿了么的情况则恰恰相反, 是店铺卡片在它们平台上权重更高, 其内在逻辑正是来源于此。
故而, 店铺卡片主要应用的场域, 乃是类似于上述后一种商场模式的 App。
三、设计要点
1. 布局
最常被见到的店铺卡片采用列表视图, 跟产品卡片的列表视图在布局上边几乎是一致的, 然而因为店铺卡片所含的信息一般比较多, 所以不会出现信息不足的情况, 在大部分情形下信息多得能够超出图片的底部范围, 最少的时候也许也得填满整个纵向空间句号。
2. 店铺卡片内容
店铺卡片的内容, 各类业务都独具自身的特色字段, 归纳起来大致是以下这般:
用于展示的内容有, 图片, 此图片为店铺的logo, 标题是店铺标签加上店铺名称, 评分信息即店铺评分伴随评分人数, 价格相关包括人均价格、起售价格以及起送价格, 店铺位置涵盖大致位置加上当前距离或者交通信息, 多见于酒店, 店铺标签是各类行业店铺所特有的子服务类型构成, 像餐厅有菜系, 旅店有钟点房、酒店这类子类型, 用户评价为摘选出的简短的用户评价, 排行时有区域排名还有总排名, 优惠信息为优惠券和活动，具体商品是店铺具体出售的商品及其简要信息。
固然必定不止上述这般, 各异行业的店铺, 不同业务的平台会赋予店铺不一样的信息种类, 比方说外卖平台会给出骑士专送这类特质的服务种类, 餐饮平台会给出店铺的营业时长, 酒店平台会标注酒店的配套设施、房型等, 于实际的设计任务里字段类型大多由产品经理给出, 具体的挑选是依据产品实际的业务种类予以筛选。
3. 内容排版
具备了内容之后, 怎样把如此众多内容排列在一起, 这成了同学们在设计这类卡片之际最大的阻碍, 由于零碎信息极为繁多, 众多同学毫无避免地踏入无从着手的迷茫状况。我于此处给出开展信息排版的原则, 大家能够依照此原则予以排版, 也能够将其视作参考。
第一：按行排版
嗯哼, 确实如此, 将店铺卡片依照行来进行排版, 这可是最最基本的原则呢, 在纷繁复杂的店铺卡片情形之下, 除去图片不算, 文字部分能够划分成三类行, 分别是标题行, 还有多个副字段行, 在存在商品的时候还有商品行, 行与行彼此之间要尽可能地维持间距保持一致。
第二：将字段放在这些行内
就在整个步骤里, 难度最高的环节正是这儿, 鉴于这些字段差不多全都具备重要性, 对于用户而言全属于关键信息, 故而在进行排布期间, 几乎没有办法去弱化每一种信息。这同样是致使这类组件看上去杂乱无章的缘由, 然而这是存在必要性的, 由于用户确实会去查看每一条信息。
然而，不管不管怎样怎样「我通通都要」, 于排版里面始终还是会由于种种种种客观层面上的心理学效应, 致使某些某些内容更易于赢得关注。比如说:
因系列位置效应之故, 一行字段的最前端与末尾处常常会显得更易于被予以关注, ；缘冯·雷斯托夫效应之由, 于一群相似的元素当中, 那与众不同的一个会显著得格外突出；鉴雅各布定律之故, 用户对于在何处能够寻觅到类似的信息存有心理预期, 所以绝不能和别的应用里信息的排布差距非常大。
还要更多的设计法则, 其链接地址为: https://www.uisdc.com/zt/ux-rules , 有标点符号。
了解这些可以帮助我们更有目的性地安排信息的位置。例如：
①标题下方的那一行, 通常能够在第一眼就被注意到, 所以, 我们会在这一行去排布评分、人均价格这些, 能够直观地帮助用户做出决策的信息。
②除商品展示之外的最后一行, 其也能够便利地引发用户的注意、引起用户的留意, 鉴于此进而将优惠活动的信息放置于此。
③重要的标签应该与其它标签做出区别。
按照右对齐方式呈现的信息, 鉴于其对齐形式和别的信息不一样, 进而通常能够凸显出来。绝大多数的 App 会于这个位置放置距离, 并且将其与店铺位置设置在同一行当中。
按照这种思想，我们可以把信息安排进之前所划定的那些行内。
第三：设计具体的样式
在视觉设计这个范畴之内, 重点被聚焦于标签领域的设计之上, 林林总总的、具备各异特性的视觉化标签能够以一种颇为有效的态势去吸引用户的目光, 不过标签的设计并没有蕴含什么特殊的技巧, 仅仅是颜色与图标两者的组合而已, 我于下方列举出一些案例, 这些案例可供你们去进行参考:
4. 比较特别的店铺卡片
去哪儿
你们能够留意到, 去哪儿网的酒店搜索结果页面中间存在一张卡片颇为特殊, 于卡片下方制作了一个格外显眼的「甄选酒店」通栏标签, 这大概是针对某些特定的店铺专门设计的样式, 总之, 与众不同的它在列表里能够极为突出。
带商品的店铺卡片
在App里, 一些场景下的店铺卡片会带有商品, 这些店铺卡片, 大多出现在搜索结果页。
于具体设计层面而言, 它们会因App需求存在差异而呈现出不同的情形, 然而总体来讲, 能够依据实际场景对前面所讲述的那些字段予以删改, 并且在下方粘贴上一排简易的商品卡片。
四、样式拓展
这里收集了一些商品卡片的线上案例，也可以作为设计时的参考：
结尾
店铺卡片的组件，今天就介绍到这里了。
请小编喝杯咖啡吧！