信息容器的概念,这里涉及到关于模态视图的相关知识点

日期:2021-03-06 17:42:25 来源:互联网 编辑:小狐 阅读人数:45

导读:信息容器是承载信息的载体,装载着包括文字、图片、的各种操作控件。信息容器的类型有多少,不同类型有什么特点,具体是如何应用的?本文对对信息容器进行归类,对此进行了六个维度的分析,希望对你有帮助。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图1)

信息有各种形式,图、文、音频等,而承载信息的形式也多种多样。本文意将信息容器进行整理归纳,以总结出一些经验规律。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图2)

01 信息容器的概念

信息容器是承载信息的载体,位于内容层。要理解信息容器的概念,首先要理解界面中的层级关系。一个界面除了竖直方向和水平方向维度,还有纵深维度。

从底层(远离用户)到顶层(靠近用户)基本上可以分为以下几层:

背景层

信息层

全局操作层(各种常驻于屏幕的bar、悬浮按钮等)

浮出层(模态类型的浮出层还需要有蒙版进行隔断)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图3)

本文要讨论的“信息容器”指的是信息层上,装载信息的载体。信息的类型多种多样,可以是文字、图片、各种操作控件等。

02 信息容器的常见类型

常见的信息容器主要有2大类:列表和卡片。

在整理案例的时候,我不禁产生了一个疑问,到底什么是列表,什么是卡片?如何界定和区分两者?这个问题乍一听有点无厘头,列表不就是列表吗,多个布局一致的狭长单元组合在一起,就形成了列表。那么什么是卡片呢?和屏幕两侧保持一定间距,带圆角的就是卡片吗?

信息容器的概念,这里涉及到关于模态视图的相关知识点(图4)

2.1 列表和卡片该如何界定?

为什么类似的布局形式,上图中,图1给人感觉是列表,图2给人感觉是卡片,图3既像列表又像卡片?从内容层面来说,包含的信息类型有:文字、图标/图片、按钮。几乎没有太大区别。是什么导致我们观感上的不同呢?电商案例也许可以给出答案。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图5)

从电商产品的商品列表页中可以看到,用户可以自主选择两种不同的商品展示模式:列表模式和卡片模式。

这两种模式几乎可以对应“列表”和“卡片”两种信息容器样式。完全一致的信息量:主图、标题信息、价格信息、辅助信息,相似的展示效率(一屏展示约4.5个商品)不同的信息容器展示形式给人不同的感觉。

单纯从信息层面或者视觉层面都不能界定列表和卡片,如果度叠加限定又太繁琐,因此本文给出的列表和卡片直接的区别界定是:可以自主定位关键线索,规划视觉浏览动线。如果视觉浏览大方向是竖直的,那么就归入列表范畴,浏览动线不是竖直而是折线的,都算在卡片范畴。

2.2 常见的信息容器分类

除了上面说的,最常见的两类信息容器:列表和卡片之外,还有另外两种形式,分别是:无容器和复合容器。这些容器具体有哪些特点,我们一一来看。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图6)

03 列表

列表的定义:将结构一致的信息单元在竖直方向上铺陈下去,形成的信息集合。不同场景要呈现的信息侧重不同。

举例几种常见的列表形式:

用户/列表

功能列表

“卡片型”列表3.1 用户/列表

信息容器的概念,这里涉及到关于模态视图的相关知识点(图7)

本文尝试分析一下,仅是个人意见,欢迎讨论。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图8)

按照理论,圆头亲切的形状感知更加适合轻松基调的产品,方头严谨的形状感知更加适合严肃基调的产品。这解释了电商类型产品(京东)的信息一般都是圆头的,匹配轻松愉悦的网购体验,而金融类产品(支付宝)多是方头。对于同是熟人社交类产品的和来说,用户层年龄偏低,属性相对更加活跃,更加轻松的圆头可能更适合此类用户。

以iOS为例,当用户向左滑动列表时,呼出针对该列表单元的操作。具体列表对应具体操作,操作项数量不同。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图9)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图10)

方案A:

优点:操作底板宽度适应文案,不会出现空间局促的现象。

缺点:当文案字段长时,列表被推出屏幕外的内容较多,当用户操作分心时,可能会忘记正在操作的对象,虽然这种情况极少发生。

方案B:

优点:操作底板固定,文案折行规则明确,既不会造空间拥挤,被挤出屏幕外的列表区域可控。

方案C:

缺点:图标占据了一定高度,导致文案无法折行,列表被推出屏幕外的内容较多,与方案A类似。

综上,个人认为方案B是最合理的,对于文案长度的宽容度高,即便文案较长,也可以保证视觉和谐,并保留较多列表内容。

在用色策略上,使用的是为大众所接受的“语义色”一些具体的颜色在长期经验积累中形成了固定的语义。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图11)

当用户触发了带有一定性的操作时,需要用户进行二次确认。并不是所有情况都需要二次确认,二次确认的样式也有多种。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图12)

同样都是模态视图,要表达的信息也相似,都是要求用户进行选择,为什么有些产品选择将对话框居中,有些产品选择将对话框放在底部?这里涉及到关于模态视图的相关知识点,本篇文章旨在讨论信息层面的内容,模态视图涉及到了浮出层的内容,将在文章中进行详细探讨。本篇文章不做过多延展。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图13)

从上方几个例子中我们可以看到:

图文布局案例1-3使用了左文右图的方式,案例4-7使用了左图右文的方式。

搞清楚如何图文布局和设置图文比例,就基本解决了资讯流页面最关键的问题。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图14)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图15)

从视觉上说:

反馈形式采用模态对话框,用户需要选择具体操作,是屏蔽内容或、还是举报或不感兴趣。

对话框是否有指向性:从表意明确的角度上来说,带有箭头的气泡更有利于用户定位对象。

从交互上说:

信息容器的概念,这里涉及到关于模态视图的相关知识点(图16)

3.3 功能列表

信息容器的概念,这里涉及到关于模态视图的相关知识点(图17)

列表索引一般还是定位文字为主要形式,不同用户的认知水平不同,图标表意始终是一大难点,多用为辅助记忆或单纯提升视觉美观。图标虽然是体现设计风格的重点,但是在具体情境下,如设置页,用户更加在意快速找到自己要找的内容,多度的图标样式,实际上会折损用户的检索效率。

一般功能页面或放置许多功能,常常会超过十几项,这种情境下,检索效率低下是一个痛点。如何提高检索效率?— 分组

信息容器的概念,这里涉及到关于模态视图的相关知识点(图18)

分组给用户了认知线索,根据格式塔原则,用户总是倾向于把距离近的、样式统一的元素归位同类。毫无分组显然对于检索是不利的,用户需要逐一浏览,该情况适用于列表项无法分组时,如果有分组条件,务必分组,帮用户节约筛选成本。

UI界面中,列表的分割方式常见的有以下3种:

线条分割

块面分割

间距分割

信息容器的概念,这里涉及到关于模态视图的相关知识点(图19)

3.4 “卡片型”列表

在我们的固有观念里,大圆角,不通栏,有投影的形象就是卡片。这种样式也越来越盛行,许多产品尝试将列表也用“卡片化”进行包装。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图20)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图21)

04 卡片

卡片的类型繁多:单列大卡片、泳道、内容流(两列网格、瀑布流)宫格。

4.1 大卡片

信息容器的概念,这里涉及到关于模态视图的相关知识点(图22)

从内容展示效率上来讲,单张大卡片就占据占据屏幕(刘海屏)超出一半的高度,用户需要不断滑动屏幕浏览下方内容,操作成本较高。大卡片形式对内容本身,如图片的质量要求很高。这种模式常见于图片社区或垂类电商产品,图片社区(如躺平)本身较为小众、即便是UGC(用户产生内容)单元,用户上传的图片素材平均水平也较高,垂类电商(如Nike)图片品质由控制,质量高且稳定。以上类型产品不以量吸引用户,用户往往更加在意内容本身是否优质。用户没有带着明确的目标,心智更加类似于浏览杂志。产品什么内容,就进行浏览。从上方案例可见,除了读书之外的3款产品首页都没有突出搜索功能,而是以信息流呈现为主。

与列表分割一致,卡片也有对应分割方式。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图23)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图24)

4.2 泳道

何为泳道?顾名思义,常见的滑动手势是上下方向滑动,但有时也会出现横向滑动的情况。一系列对象在一条横向轨道内左右滑动,该类型的形式组合在一起,就好比泳道赛道一般。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图25)

可以横向滑动以查看内容的呈现形式,称为“泳道”泳道可以有多种形式。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图26)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图27)

停止位置随机:内容与手势相关度高,比较自由,但停止位置随机,不能保证停下后用户能完美看到当前卡片的所有信息,需要用户微调卡片位置。

停止位置固定:根据用户滑动速率,模拟物理惯性和摩擦,判断最终展示哪张卡片,并将卡片呈现在屏幕中部,确保卡片上的信息都可以读取。这种交互更加合理,给滑动设置卡点,类似banner效果。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图28)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图29)

4.3 双列卡片

双列卡片可以看成是大卡片(单列)的另一种表现形式。这种形式更加提高了空间利用率,对于单一信息展示更加克制。平衡了效率和效果,是电商、图片社区、等产品类型的首选表现手法。

双列卡片可以细分为两大类:卡片流(对齐)瀑布流

信息容器的概念,这里涉及到关于模态视图的相关知识点(图30)

卡片对齐:

优点:规整统一,视觉动线清晰,浏览舒适。

缺点:对主图尺寸要求高,确定的比例会对商品展示有一定局限。

瀑布流:

优点:图片尺寸宽容度高,满足一定比值区间即可。保证商品的展示完整度。错落的布局容易形成节奏。

缺点:不容易进行比较,若要进行图片间的对比,比较困难,视觉动线混乱。

两列式的卡片布局需要注意内容层与背景层的区分。大多数产品的背景层是浅灰色,内容层是白色,色差可以建立区分。部分产品背景层是白色,或者说取消了背景层的概念,那么要建立卡片之间的区分,就需要通过间距或者卡片加底色的方式。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图31)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图32)

个性化推荐模块对电商产品尤其重要,准确地将用户可能感兴趣的产品推荐出去,可以减少用户的搜索、筛选步骤,提升购买效率和愉悦感,从而提升用户对产品的评价。因此,不断收集用户的喜好相当重要,尽管各种算法已经让产品显得越来越智能,但依旧要给用户留下提建议的入口。

上文介绍了资讯类产品中,用户如何给出对于具体信息的反馈,电商类产品原理也大同小异。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图33)

从视觉上来说,和闲鱼的反馈形式类似,都是在卡片上添加一个黑色半透明蒙版,将有限的选项竖直码放在卡片上,类似小型模态的概念(但是这里不同于严格的模态视图,没有限定用户必须要做出选择,用户可以直接划走)而京东的逻辑不同,使用了传统阻断性模态视图的处理方式,将下方卡片用蒙版遮挡,希望用户专注于选择。

从阻断感上说,京东的阻断干是最强的,将用户从原本的浏览行为中提取出来,请用户严肃地做出对于当前商品的反馈。这样收集信息的效率更高。由于选项是盛放在带有指向性的小气泡之上,针对性足够,且延展性好,气泡的高宽都可以调整,而和闲鱼的处理方式,在极端情况下,如选项超过5项时,所有内容放在卡片之上,空间就很紧凑。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图34)

闲鱼的交互做的很细致,蒙版出现采用了水波的形式,用户抱着要吐槽的心态,这种精致有巧思的小动效在一定程度上可以缓和用户的烦躁的心理。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图35)

4.4 宫格/网格

如果把界面看作是一张大网格,不同的内容占据着不同位置、不同面积的页面区域。除了我们已经熟悉的“有序”布置,如从上到下依次排列内容(大卡片)或者从左往右依次排列内容(泳道)还有更加灵活多变的排布方式可供选择。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图36)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图37)

布局的本质是分配界面面积,用以盛放内容,同时运用面积对比进行突出。除了面积对方式外,还有其他方式可以突出关键内容。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图38)

05 无容器 & 复合容器

无内容的呈现形式比较简单:内容直接置于背景层之上。减少视觉负担,内容为主,形式为辅。复合容器是指超过一种的容器形式的组合,如卡片中包含列表、卡片中包含泳道等。

5.1 无容器

信息容器的概念,这里涉及到关于模态视图的相关知识点(图39)

5.2 复合容器

信息容器的概念,这里涉及到关于模态视图的相关知识点(图40)

06 组合与强调

不同的信息容器组合在一起,搭建一个分工明确的界面。界面中不同的信息需要套用合适的形式去呈现。有层级就有对比,对比越大,层次拉得越开,重点就越突出。

建立对策略:色彩对比、面积对比、样式对比、Z轴高度对比、静态动态对比。

信息容器的概念,这里涉及到关于模态视图的相关知识点(图41)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图42)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图43)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图44)

信息容器的概念,这里涉及到关于模态视图的相关知识点(图45)

本文相关词条概念解析:

视图

计算机数据库中的视图是一个虚拟表,其内容由查询定义。同真实的表一样,视图包含一系列带有名称的列和行数据。但是,视图并不在数据库中以存储的数据值集形式存在。行和列数据来自由定义视图的查询所引用的表,并且在引用视图时动态生成。也是机械制图术语,在机械制图中,将物体按正投影法向投影面投射时所得到的投影称为“视图”。

网友评论
相关文章
4月,实力越来越强,将会遇见真爱,事业腾飞

4月,实力越来越强,将会遇见真爱,事业腾飞

4月,实力越来越强,将会遇见真爱,事业腾飞[详情]

所以说最容易被爱情蒙蔽双眼的星座,拥有的鱼的记忆,却拥有一颗真心

所以说最容易被爱情蒙蔽双眼的星座,拥有的鱼的记忆,却拥有一颗真心

所以说最容易被爱情蒙蔽双眼的星座,拥有的鱼的记忆,却拥有一颗真心[详情]

推进优秀传统文化的弘扬和传承

推进优秀传统文化的弘扬和传承

推进优秀传统文化的弘扬和传承[详情]

生肖马4月,他们运势尤其旺盛,在工作的时候会非常地认真投入,生财有门扬眉吐气

生肖马4月,他们运势尤其旺盛,在工作的时候会非常地认真投入,生财有门扬眉吐气

生肖马4月,他们运势尤其旺盛,在工作的时候会非常地认真投入,生财有门扬眉吐气[详情]

三天后,4个星座,易得罪人,管好自己,好好沟通,低调行事

三天后,4个星座,易得罪人,管好自己,好好沟通,低调行事

三天后,4个星座,易得罪人,管好自己,好好沟通,低调行事[详情]

未来两年,好运来袭,财运超旺,存款翻倍涨,必大富大贵的双子座

未来两年,好运来袭,财运超旺,存款翻倍涨,必大富大贵的双子座

未来两年,好运来袭,财运超旺,存款翻倍涨,必大富大贵的双子座[详情]

未来一周,的魅力是慢慢积累的,生活中的好运将持续,双子座的人得到财神的关照

未来一周,的魅力是慢慢积累的,生活中的好运将持续,双子座的人得到财神的关照

未来一周,的魅力是慢慢积累的,生活中的好运将持续,双子座的人得到财神的关照[详情]

55岁的她上身微微发福,脸部肉感明显,烘托出了神秘感

55岁的她上身微微发福,脸部肉感明显,烘托出了神秘感

55岁的她上身微微发福,脸部肉感明显,烘托出了神秘感[详情]

我可以提供该笔订单的发货和进货凭证,微店却以套现为由克扣违约金

我可以提供该笔订单的发货和进货凭证,微店却以套现为由克扣违约金

我可以提供该笔订单的发货和进货凭证,微店却以套现为由克扣违约金[详情]

4月中旬,此情绵绵,天长地久,喜撞桃花运,月老偏爱

4月中旬,此情绵绵,天长地久,喜撞桃花运,月老偏爱

4月中旬,此情绵绵,天长地久,喜撞桃花运,月老偏爱[详情]

网站地图     Copyright     2016-2018  资讯网   All rights reserved.