时间:2023-01-19 | 标签: | 作者:Q8 | 来源:网络
小提示:您能找到这篇{信息容器的归类与应用,这些知识点get到了吗?}绝对不是偶然,我们能帮您找到潜在客户,解决您的困扰。如果您对本页介绍的信息容器的归类与应用,这些知识点get到了吗?内容感兴趣,有相关需求意向欢迎拨打我们的服务热线,或留言咨询,我们将第一时间联系您! |
信息有各种形式,图、文、视频、音频等,而承载信息的形式也多种多样。本文意将信息容器进行整理归纳,以总结出一些经验规律。 01 信息容器的概念信息容器是承载信息的载体,位于内容层。要理解信息容器的概念,首先要理解界面中的层级关系。一个界面除了竖直方向和水平方向维度,还有纵深维度。 从底层(远离用户)到顶层(靠近用户),基本上可以分为以下几层:
本文要讨论的“信息容器”,指的是信息层上,装载信息的载体。信息的类型多种多样,可以是文字、图片、视频、各种操作控件等。 02 信息容器的常见类型常见的信息容器主要有2大类:列表和卡片。 在整理案例的时候,我不禁产生了一个疑问,到底什么是列表,什么是卡片?如何界定和区分两者?这个问题乍一听有点无厘头,列表不就是列表吗,多个布局一致的狭长单元组合在一起,就形成了列表。那么什么是卡片呢?和屏幕两侧保持一定间距,带圆角的就是卡片吗? 我们不妨先看看下图案例: 2.1 列表和卡片该如何界定?为什么类似的布局形式,上图中,图1给人感觉是列表,图2给人感觉是卡片,图3既像列表又像卡片?从内容层面来说,包含的信息类型有:文字、图标/图片、按钮。几乎没有太大区别。是什么导致我们观感上的不同呢?电商案例也许可以给出答案。 从电商产品的商品列表页中可以看到,用户可以自主选择两种不同的商品展示模式:列表模式和卡片模式。 这两种模式几乎可以对应“列表”和“卡片”两种信息容器样式。完全一致的信息量:主图、标题信息、价格信息、辅助信息,相似的展示效率(一屏展示约4.5个商品),不同的信息容器展示形式给人不同的感觉。 单纯从信息层面或者视觉层面都不能界定列表和卡片,如果多维度叠加限定又太繁琐,因此本文给出的列表和卡片直接的区别界定是:可以自主定位关键线索,规划视觉浏览动线。如果视觉浏览大方向是竖直的,那么就归入列表范畴,浏览动线不是竖直而是折线的,都算在卡片范畴。 2.2 常见的信息容器分类除了上面说的,最常见的两类信息容器:列表和卡片之外,还有另外两种形式,分别是:无容器和复合容器。这些容器具体有哪些特点,我们一一来看。 03 列表列表的定义:将结构一致的信息单元在竖直方向上铺陈下去,形成的信息集合。不同场景要呈现的信息侧重不同。 举例几种常见的列表形式:
3.1 用户/消息列表用户/消息列表的内容结构很清晰,头像+身份+内容提要+辅助信息。图片天然地比文字更具有吸引力,视觉上的优先级排序是头像>身份>内容提要>辅助信息。当然用户可以很方便地选择关注的对象是图片还是文字,这体现了列表的优越性,浏览动线竖直,可以方便用户根据自己想要的索引快速定位。 这里值得讨论的是头像用方形还是圆形的问题,相信大家都想到过这个问题,同样是社交产品,qq是圆头,微信是方头,这里边有什么原因呢? 本文尝试分析一下,仅是个人意见,欢迎讨论。 按照理论,圆头亲切的形状感知更加适合轻松基调的产品,方头严谨的形状感知更加适合严肃基调的产品。这解释了电商类型产品(淘宝、京东)的信息通知一般都是圆头的,匹配轻松愉悦的网购体验,而金融类产品(支付宝)多是方头。对于同是熟人社交类产品的微信和qq来说,qq用户层年龄偏低,属性相对更加活跃,更加轻松的圆头可能更适合此类用户。 以iOS为例,当用户向左滑动列表时,呼出针对该列表单元的操作。具体列表对应具体操作,操作项数量不同。 方案A:
方案B:
方案C:
综上,个人认为方案B是最合理的,对于文案长度的宽容度高,即便文案较长,也可以保证视觉和谐,并保留较多列表内容。 在用色策略上,使用的是为大众所接受的“语义色”,一些具体的颜色在长期经验积累中形成了固定的语义。 当用户触发了带有一定破坏性的操作时,需要用户进行二次确认。并不是所有情况都需要二次确认,二次确认的样式也有多种。 同样都是模态视图,要表达的信息也相似,都是要求用户进行选择,为什么有些产品选择将对话框居中,有些产品选择将对话框放在底部?这里涉及到关于模态视图的相关知识点,本篇文章旨在讨论信息层面的内容,模态视图涉及到了浮出层的内容,将在下篇文章中进行详细探讨。本篇文章不做过多延展。 3.2 图文列表信息流产品一般是由图片+重点文案+标签(可有可无)构成。不同性质的产品想要突出的重点不同,根据内容的重要性权重来分配视觉占比。 从上方几个例子中我们可以看到:
搞清楚如何图文布局和设置图文比例,就基本解决了资讯流页面最关键的问题。 资讯列表或称feed流,主要根据用户喜好定向推送内容。除了从用户日常浏览、搜索等行为中提取用户喜好信息,用户主动反馈的信息精度更高,用户不惜花费更多操作成本来提示产品,对内容不感兴趣。 从视觉上说:
从交互上说: 反馈入口热区较小,容易误触,大多数情况下,用户不会注意和点击该图标,用户是以浏览为主要行为。 3.3 功能列表列表索引一般还是定位文字为主要形式,不同用户的认知互联网营销推广公司水平不同,图标表意始终是一大难点,多用为辅助记忆或单纯提升视觉美观。图标虽然是体现设计风格的重点,但是在具体情境下,如设置页,用户更加在意快速找到自己要找的内容,多度的图标样式,实际上会折损用户的检索效率。 一般功能页面或放置许多功能,常常会超过十几项,这种情境下,检索效率低下是一个痛点。如何提高检索效率?—— 分组 分组给用户提供了认知线索,根据格式塔原则,用户总是倾向于把距离近的、样式统一的元素归位同类。毫无分组显然对于检索是不利的,用户需要逐一浏览,该情况适用于列表项无法分组时,如果有分组条件,务必分组,帮用户节约筛选成本。 UI界面中,列表的分割方式常见的有以下3种:
3.4 “卡片型”列表在我们的固有观念里,大圆角,不通栏,有投影的形象就是卡片。这种样式也越来越盛行,许多产品尝试将列表也用“卡片化”进行包装。 虽然是相当细节的点,但是精细化处理之后的结果就立刻会与批量化处理的结果拉开差距。产品级的风格统一来源于点滴细节。 04 卡片卡片的类型繁多:单列大卡片、泳道、内容流(两列网格、瀑布流)、宫格。 4.1 大卡片从内容展示效率上来讲,单张大卡片就占据占据屏幕(刘海屏)超出一半的高度,用户需要不断滑动屏幕浏览下方内容,操作成本较高。大卡片形式对内容本身,如图片的质量要求很高。这种模式常见于图片社区或垂类电商产品,图片社区(如躺平)本身较为小众、即便是UGC(用户产生内容)单元,用户上传的图片素材平均水平也较高,垂类电商(如Nike)图片品质由编辑控制,质量高且稳定。以上类型产品不以量吸引用户,用户往往更加在意内容本身是否优质。用户没有带着明确的目标,心智更加类似于浏览杂志。产品提供什么内容,就进行浏览。从上方案例可见,除了微信读书之外的3款产品首页都没有突出搜索功能,而是以信息流呈现为主。 与列表分割一致,卡片也有对应分割方式。 大卡片占据屏幕面积大,理论上大卡片的内容质量是经审查的。部分产品不存在大卡片容器的交互,点击卡片直接进入详情页。部分产品通过比较低调的方式向用户收集对于内容的意见。如微信读书长按卡片,可以选择不再显示该卡片内容,产品收集反馈,对于用户喜好的描述可以进一步具象准确。长按不是一个高频手势,用户触发该手势往往是试探性的,代表用户确实对于内容有意见要传达。躺平使用了简约三小点样式的“更多”图标来收纳不常用的收藏和举报操作。 4.2 泳道何为泳道?顾名思义,常见的滑动手势是上下方向滑动,但有时也会出现横向滑动的情况。一系列对象在一条横向轨道内左右滑动,该类型的形式组合在一起,就好比泳道赛道一般。 可以横向滑动以查看内容的呈现形式,称为“泳道”。泳道可以有多种形式。 停止位置随机:内容与手势相关度高,比较自由,但停止位置随机,不能保证停下后用户能完美看到当前卡片的所有信息,需要用户微调卡片位置。 停止位置固定:根据用户滑动速率,模拟物理惯性和摩擦,判断最终展示哪张卡片,并将卡片呈现在屏幕中部,确保卡片上的信息都可以读取。这种交互更加合理,给滑动设置卡点,类似banner效果。 4.3 双列卡片双列卡片可以看成是大卡片(单列)的另一种表现形式。这种形式更加提高了空间利用率,对于单一信息展示更加克制。平衡了效率和效果,是电商、图片社区、视频等产品类型的首选表现手法。 双列卡片可以细分为两大类:卡片流(对齐)、瀑布流 卡片对齐:
瀑布流:
两列式的卡片布局需要注意内容层与背景层的区分。大多数产品的背景层是浅灰色,内容层是白色,色差可以建立区分。部分产品背景层是白色,或者说取消了背景层的概念,那么要建立卡片之间的区分,就需要通过间距或者卡片加底色的方式。 个性化推荐模块对电商产品尤其重要,准确地将用户可能感兴趣的产品推荐出去,可以减少用户的搜索、筛选步骤,提升购买效率和愉悦感,从而提升用户对产品的评价。因此,不断收集用户的喜好相当重要,尽管各种算法已经让产品显得越来越智能,但依旧要给用户留下提建议的入口。 上文介绍了资讯类产品中,用户如何给出对于具体信息的反馈,电商类产品原理也大同小异。 从功能上来说,淘宝、闲鱼、京东,都是通过用户手势(点击图标或长按卡片或两者皆可)来呼出选项,用户通过选择来表达意见,从而使推送更精准。 从视觉上来说,淘宝和闲鱼的反馈形式类似,都是在卡片上添加一个黑色半透明蒙版,将有限的选项竖直码放在卡片上,类似小型模态的概念(但是这里不同于严格的模态视图,没有限定用户必须要做出选择,用户可以直接划走)。而京东的逻辑不同,使用了传统阻断性模态视图的处理方式,将下方卡片用蒙版遮挡,希望用户专注于选择。 从阻断感上说,京东的阻断干是最强的,将用户从原本的浏览行为中提取出来,请用户严肃地做出对于当前商品的反馈。这样收集信息的效率更高。由于选项是盛放在带有指向性的小气泡之上,针对性足够,且延展性好,气泡的高宽都可以调整,而淘宝和闲鱼的处理方式,在极端情况下,如选项超过5项时,所有内容放在卡片之上,空间就很紧凑。 这类操作比较隐晦,可点击按钮很不明显,长按手势也不常用。同样是当用户有明确反馈需求时,才会寻找反馈入口,一般情况下,用户不会注意到。以用户常态下的浏览行为为最优先。 闲鱼的交互做的很细致,蒙版出现采用了水波的形式,用户抱着要吐槽的心态,这种精致有巧思的小动效在一定程度上可以缓和用户的烦躁的心理。 除了电商类产品,部分视频类产品长按卡片也会呼出对应效果。 案例1和案例2,长按卡片,都是出现视频片段的预览。效果类似iOS的3Dtouch,在相册中按压具体照片即可预览。而案例3,点击“更多”图标,呼出操作。然而选项只有1项,不符合逻辑,单一的选项无法构成“选择”,这会让人有点摸不着头脑。 4.4 宫格/网格如果把界面看作是一张大网格,不同的内容占据着不同位置、不同面积的页面区域。除了我们已经熟悉的“有序”布置,如从上到下依次排列内容(大卡片),或上海稳定营销推广必备软件者从左往右依次排列内容(泳道),还有更加灵活多变的排布方式可供选择。 布局的本质是分配界面面积,用以盛放内容,同时运用面积对比进行突出。除了面积对比的方式外,还有其他方式可以突出关键内容。 05 无容器 & 复合容器无内容的呈现形式比较简单:内容直接置于背景层之上。减少视觉负担,内容为主,形式为辅。复合容器是指超过一种的容器形式的组合,如卡片中包含列表、卡片中包含泳道等。 5.1 无容器5.2 复合容器06 组合与强调不同的信息容器组合在一起,搭建一个分工明确的界面。界面中不同的信息需要套用合适的形式去呈现。有层级就有对比,对比越大,层次拉得越开,重点就越突出。 建立对比的策略:色彩对比、面积对比、样式对比、Z轴高度对比、静态动态对比。 本篇文章是针对界面中信息容器的分类、整理与归纳。涉及到一些关于模态反馈的内容,并未展开仔细讨论。谢谢阅读,欢迎讨论。
本文由 @doo_W 于,未经作者许可,。 题图来自 Unsplash,基于 CC0 协议 |
上一篇:好的用户体验,总是那么顺其自然
下一篇:交互基础篇(一):交互动效,1天掌握并覆盖
一、标题规则:标题关键词分开的店铺,关键词排名和权重会排在前面。所以店主...
作为一个淘宝卖家,关注自己的店铺权重,是十分重要的,因为这对自己的销量、...
一般的消费者在淘宝买东西的时候都会先输入一个他理解这个产品的词组,顾客的...
淘宝直通车收费方式还是挺好的,所以对于一些资金比较少的淘宝店家来说,推广...
第一步:登录到淘宝卖家中心,点击左侧菜单中的『物流管理-电子面单平台-我的...
推广当然都希望立竿见影,最好来一个点你广告的,就做一笔生意,所以要选择你...
现在开淘宝网店只要交一些保证金就可以完成了,可以说是投资最低的创业成本了...
宝贝滞销,也就是说宝贝长期没有销量,上架之后90天依然没有销量,那么淘宝方...
直通车坑位指的是大家在使用直通车做店铺推广的时候,官方平台给予宝贝的展示...
线下活动对很多网站来说不容易,对于一些静态网站来说更加无从着手。比如技术...
小提示:您应该对本页介绍的“信息容器的归类与应用,这些知识点get到了吗?”相关内容感兴趣,若您有相关需求欢迎拨打我们的服务热线或留言咨询,我们尽快与您联系沟通信息容器的归类与应用,这些知识点get到了吗?的相关事宜。
关键词:2年, 信息容器, 初级,