聊聊APP里的列表

我对列表的定义:对一定数量的相似数据组的处理,使用一定的格式或样式,呈现出来,称之为列表。
列表是APP设计核心部分,下面我就讨论各种列表模式。

新闻列表

右侧是新闻类应用最常见的列表,包括一张图片、新闻标题和评论数量,有的时候还会有点赞数量。
这种模式非常流行,原因之一是当前手机的屏幕尺寸,一个屏幕显示7到8组数据,超过这个数字选择就会变得困难。另一个重要原因,它形成了垂直的轴,人眼对轴的阅读是非常好的。
再想想新闻类应用的特点。更多的户外使用,不断更新的大量内容。新闻类应用对图片的清晰度要求不高,更小的图片可以减少用户流量的消耗,更快的加载速度。清晰的文字标题,字体可以做的很大,方便阅读,在换行的基础上可以容纳很长的标题。

列表1.png
图片列表1

经典的图片列表,也有书籍称做陈列馆。处理图片最常见的模式。
一屏至少能够显示6张图,不会超过8张图,符合交互原则。
在这个尺寸下,图片清晰度保持的很好。使用缓加载可以减轻加载速度的问题。
与上一个列表不同,视线扫描不是直线型的,而是折线型的。实际上用户的视线更多是随机扫视,因此这种模式的缺点:用户扫视的过程可能会忽略一些图片。

右侧的长短式设计,花瓣就是这种设计。非常好的适应了不同尺寸图片,特别是长度很长的图片。缺点是对于横版的图片不友好,会看不清。最常见于用户上传,不需要强制统一上传尺寸。

图片列表1.png
图片列表2

图片列表还有很多变化,提供更多信息,有利于用户做出选择。或者加上按钮,成为一个小的操作面板。
左侧的模式常见于音乐软件,在图片里面加上文字或数字,可能是作者名称,也可能是收听数量。这么布局的好处是,提供更多信息的基础上,不会打破原有的正方形图片,空间结构依然保持紧凑。不足之处是文字很容易被忽略,所以显示重要文字不建议使用这种模式。

右侧和安卓的卡片式设计结合在一起,每一组信息的整体感更强,个人比较推崇这种设计。根据封闭性原理,卡片内的内容很容易被人脑整合在一起。视觉焦点不再仅限于图片,文字也成了重要的点。另外,整体结构有了节奏的变化,界面显得更加有活力

图片列表2.png
用户列表

用户列表根据功能的不同,应用属性的区别,会有不同的布局。出现的地方包括:关注列表、粉丝列表、评论用户、点赞用户、好友列表、发现有趣的人、用户排名等等。包括的组件有:用户头像、用户昵称、用户性别、用户粉丝、用户介绍、用户等级、用户状态、关注按钮等等。忽然发现还挺多的(= =||)。
左侧是传统的布局方式,可以很好的增加或减少组件内容,不管是性别、粉丝、等级、状态都可以按需增加,关注按钮一般放在右侧,这种布局灵活性好,扩展性强,可读性好

右侧是比较少见的布局,一般用于随机排列,在推荐用户、发现用户比较常见。优点在于选择性好、显示的数量多、界面更简洁、亲和力好。但是扩展性不好,一般不超过两个组件、最多三个。无法放置关注按钮,因为结构过于松散

用户列表.png
三列布局

随着app设计深入,更多的布局方式被开发出来,其中就有三列布局,并且呈现越来越流行的趋势。
三列布局常见于内容型app,例如网易云音乐。
在内容很丰富的界面,我们需要用到它,常见的使用方法不是铺满整个界面,而是两行两行的出现。大面积使用,会造成界面拥挤,难以选择的局面,两行即时6个,小于7个即可。
另外,不建议增加其他按钮在列表里,更多的操作都放在二级页面完成。
目前来说,三列布局的变式还很少,属于比较稳定的布局,扩展性不强

三列.png
单列布局

APP“开眼”是一款短视频推荐应用,它在首页使用了左侧的单列布局,效果还不错。
左侧的单列布局最为常见,总体给人一级一级的感觉,可以放下很宽的图片,再在图片上放置很大的文字,有很强的视觉冲击力。这种模式,图片需要经过简单处理,否则文字容易看不清。图片文件比较大,加载比较缓慢,一般用于Wifi条件下。还要说一点,一个屏幕最多显示四五个,对于急性子用户就不适合了,这种模式适合放置在那种用户可以静下心来使用的应用里。

右侧布局很少见,但我确实在项目中遇到过这种布局,在填色类型应用里,所有竞品在画册界面都是使用这种布局。这是一个画册详情页,每一个列表内容是一个填色模板。
一页只能显示2到3个,这是一种近乎不合理的布局。这么做的理由,用户在选择模板时需要做出重量级选择,模板本身比较复杂,轻轻扫一眼的设计无法帮助用户做出选择,再有就是营造一种画廊的安静感
需要考虑的因素还有很多,包括视觉,交互等,还是需要结合实际情况和最终效果。

单列.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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,463评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,598评论 18 139
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,706评论 22 664
  • (1)在乌云的遮掩下,天空终于下起了大雨,灰蒙蒙的,如我的心情一样,思绪尤为凌乱。突然间莫名般就想起了好多人好多事...
    雷紫阅读 358评论 0 2