App中列表、卡片和双栏卡片的布局思考

各布局形式的特点

列表的布局常见于新闻类App。其布局形式的特点在于能够在较小的屏幕中显示多条信息,用户通过上下滑动的手势能获得大量的信息反馈。而列表也是一种非常容易理解的展示形式。

卡片式布局常见于微博、Facebook等社交类App,也出现于其他不同类的App中,形式非常灵活。其特点在于,每张卡片的内容和形式都可以相互独立,互不干扰,所以可以在同一个页面中出现不同的卡片承载不同的内容。而由于每张卡片都是独立存在的,其信息量可以相对列表更加丰富,而且可以让用户对其进行评论、点赞等等操作、省去了跳转到详情页面的步骤。但由于卡片的信息很多,在小屏幕上并不能显示多个卡片,一屏内卡片数很少会超过3个。

而双栏卡片的布局形式,比较常见于以图片信息为主导的App。例如Pinterest,一些商城的商品陈列页面。这种形式与卡片式类似,但它能在一屏里显示更多的内容,至少4张卡片。同时,由于分开左右两栏的显示,用户可以更加方便地对比左右两栏卡片的内容。

布局背后的行为逻辑

然而,为什么新闻类的多采用列表,社交类多采用卡片,图片类多采用双栏卡片?

我们回归到用户需求和行为模式来思考这个问题。

当我们在浏览新闻的时候,我们的需求是什么?大部分人的需求都是,一方面想要知道最近发生的一些事情,这是量的需求;另一方面,想要深入了解这一事情是什么,这是深度阅读的需求。而量的需求往往具有先行性,深度阅读是在其后的。基于这样的需求,用户在浏览新闻时候的行为模式大概如下:快速大量浏览→筛选→判断→快速大量浏览,如下:

由上图看出,用户在浏览新闻时,需要快速地处理大量的信息,而且高频地在极短时间内进行决策。因此,高效性就极为重要,假如在一屏中只显示一两条信息显然是不合适的。除此之外,展示形式的高度一致性和对展示内容的信息量进行严格控制也及其重要。高度一致性可以让用户快速理解展示形式,从而能自主选择自己想要的内容,便于筛选和判断。控制信息量能减少信息干扰,从而提高效率。由于这样的限制,列表就成为了新闻展示的合理形式。

同理,在用Pinterest时,我们究竟是想要什么?是找到最适合的图片。最适合,就会存在唯一性,就会有对比,取舍,选择。这也意味着,用户不是一张张按顺序浏览,而是反复地对比浏览,如下图:

基于这样的行为模式,要求布局形式:1.在一屏能内能展示足够多的内容;2.能让用户方便地对比内容。同时,对内容本身也有要求:1.内容本身是能被快速理解。2.内容本身具有可比性。

以厨房故事为例,这是一个款学习西餐的App,跟Pinterest毫无关联,却用着同样的布局。除了视觉美观这样感性的解释之外,我们可以从别的角度来理解。

假设这样一个场景,饭点到了,今天我想吃吃西餐,所以打开了每日厨房,挑其中一款来作为今晚的晚餐。因为,可能我这周就做这么一顿西餐,所以这次的选择必须精挑细选,既要好吃,还要颜值高,更要操作简单。在每日厨房的首屏中展示了各种成品的图片,这很好,我可以通过比较颜值来挑选我想要的。还有每款菜的收藏数,这大概能体现这款菜的综合评价,这也帮助我降低了选择的难度。很快,经过几番的对比,我最终选择了肉酱意面作为今晚的晚餐...

由以上场景可以说明,用户在使用这款App时,由于只能选择一次,所以他不得不对比内容。同时,易于理解的图片和数据促成了对比这一行为。所以,双栏卡片这样的布局是一个很好的承载方式。

以同样的思路,当我们在刷微博的时候,我们的需求又是什么?更加便捷地跟好友或者是关注的人进行互动。而进行互动的前提是,要对内容进行理解性地阅读,而不是快速地跳读。所以在浏览好友动态时的行为模型应该如下:

上图说明,在展示形式至少要满足2个条件。第一,需要承载致少两个纬度的信息,一是让用户理解的内容信息,二是让用户互动的操作信息;第二,在当前页用户可以对内容进行操作,甚至能在当前页把操作完成。然而,这还不能完全说明卡片式的布局是最合理的。这需要把微博内容的易理解性,信息的复杂度等因素综合考虑,卡片式的布局是一个比较好的解决方案。

由于卡片式的设计形式非常多样和灵活,适用范围也极为广泛。且不在这里作深入的探讨。

总结

结合各布局形式的特点和背后的行为逻辑,我们可以得出以下结论:

当用户的行为模式更倾向于高效,迅速地筛选信息,列表是一个非常好的选择。

当用户的行为需要反复对比信息,或者需要在单屏内获得更多信息,可以尝试用双栏卡片式布局。

当用户不仅仅需要消费所展示的内容,更愿意地对其内容进行互动,那么卡片式的布局可以优先考虑。

最后反思

本文仅仅是通过个布局形式的特点和背后的行为逻辑去思考布局的适用范围,显然,这种单一维度的思考,在实际案例中是不合适的。除了用户的行为模式意外,需要考虑到的因素可以有:

1.各布局形式视觉流特点(列表是自上而下的"I"型视觉流,双栏卡片是上下左右跳动的"z"型视觉流)

2.信息传达的优先性(列表更适用于文字传达,卡片式更适合图片传达)

3.布局的可延展性

4.对品牌的塑造性

5.等等

而针对每个场景,每个App,每个页面,每个考虑因素的比重也是不一样的,这需要具体问题问题具体分析。但无论怎样,设计的结果可以千变万化,但设计背后的逻辑必须是可以追本溯源的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,460评论 25 707
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,706评论 22 664
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 我理解今天得重点是随心所欲,好吧,我去死拼暗线237。 邓老师的微信群也关门了,今教了第一个图样立体公路。我偷了懒...
    卡波阅读 158评论 0 0
  • 哥们儿换了新工作,然后开心的请我吃了火锅,然后又去看了电影。其实我平时并不特别经常看电影,哥们儿跟我说:“今晚看这...
    许空空s阅读 272评论 6 0