APP框架之二列表框架

描述:在进入app后,一般在进入一个内容详情前,以列表的形式显示同类的数据类型或者数据类型组,比如图片和文本。
上下文情境:用户抱着寻找一定信息的目的,进入列表页,对多个列表项进行浏览,或者比较,进行一定操作。
任务流程:显示,操作
必备框架:列表框架
相关框架:内容详情(后置),筛选框架(操作),搜索框架(前置)
构成元素:文字标题,文字,图像,操作
设计标准(筛除,选择,验证):1让用户快速浏览,2让用户快速发现感兴趣的信息,3让用户知道下一步怎么做

说到列表,最常见的形式如下图
形式1:图像,标题,箭头
图像在这的作用包括,视觉定位,快速辨认,暗示作用。但很多时候只是为了好看,所以不一定有,作为列表导航的时候一般要有~
最重要的还是标题,清晰明白,不要太长,概括后置内容详情
而向右箭头这里起的作用是暗示可点击。尤其在列表中有些可点击,有些只读的时候需要这个配合颜色起到暗示作用
注意1:但即使没有向右箭头用户还会经常认为这个列是可以点击的,这个就需要一个点击后的视觉反馈
注意2:进入下级页面动效要符合箭头指示,从右方进入
注意3:这里的头像图标与整个列表的交互一致
注意4:如果列表项是作为导航的话,需要做好排序,组织和分块。5个以内列表可以不进行分组,8个以上需要分成3个组。分组可以按照类别(相关性分组),也可以按照首字母(如通讯录)等

形式2:图像,标题,内容,箭头
增加的小标题主要显示与标题相关主要内容,或者是内容变化,或者是状态
注意1:整体的一致性,整个列表页都同时要有图像或者都无
注意2:内容靠近向右箭头右对齐

形式3:标题,内容,箭头
突出内容,内容一眼就能看出代表的东西
注意:标题最好右对齐,内容左对齐,用户视线沿内容往下看,标题起辅助作用(qq这个就显得有点凌乱,陌陌这种感觉看起来有点麻烦)
不过这种列表形式挺少见,我这个想法不一定对~没有太好的佐证。查了下iOS设计规范中表格视图的副标题型在这种情况下是建议标题右对齐。

形式4:图像,标题,副标题,向右箭头
副标题,更多的是对标题的解释,相关内容
这个比较适用于列表项目比较相似,这样用户可以用副标题中的详细信息来帮助区分不同列表
或者以这种形式来提示内容详情,吸引用户,但感觉作用一般,毕竟是弱化信息

Paste_Image.png

形式5:图像,标题,内容,时间(距离等标题相关属性),向右箭头
图像和向右箭头不一定有
内容一般在1-2行,
时间越接近,显示的越准确

Paste_Image.png

形式6:图像,文字
图像可多可少,如果一定有,可置于左边,如不确定可放置右边,免得影响视觉的流畅
如果有多个,可放置在文字下方或上方
如果需要突出图像,可把图像放大,并把文字置于图像中(banner)

形式7:辅助信息
在上述的形式上增加了一行辅助决策信息(如下图)
作用主要是帮助用户筛选感兴趣的信息,做出决策。
注意:不要为了信息而信息,过多的信息为导致用户的认知负荷!
社交数据如阅读数,评论,喜欢,赞等等;详细信息如内容数量,类别,来源

评分,价格,距离,标签,优惠等等

形式8:增加操作按钮
在原有形式的基础上,加入一些列表内操作,一般集中按钮的形式出现,集中在列表右侧和下侧。
注意,操作按钮不宜超过3个,如果过多可考虑使用卡片框架
比较常见的有点赞,下载,关注等

列表相关操作:
0点击列表查看更多
1勾选标记(iOS短信)
2左右滑动进行操作/长按(iOS微信)
3详情展开按钮(网易云音乐)
4下拉刷新(微博)
5筛选(携程)
6编辑删除(iOS短信)
7排序按钮



8针对列表的其他操作:添加,关注,赞,感谢等等

注意:
1在用户选择一个列表时,始终给予反馈
2如果有图片等加载较慢的内容,可显示框架和文本数据,其他等加载完再显示
3如果有大量的数据(文字,图片)集合,或文字内容超过3行,或有大量交互,不需要比较不同内容,可以考虑卡片设计(一些社交软件)

查看的一些书籍文章
1Material Design设计语言
2iOS人机界面准则
3UI设计模式

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

推荐阅读更多精彩内容

  • 新型功能性敷料,液体伤口敷料羧宁 虽然目前药棉,纱布,绷带等传统医用敷料仍占整个医用敷料的50%以上,但是近年来,...
    羧宁液体伤口敷料阅读 1,690评论 1 2
  • 帝王无情 “可儿,今日是你我大婚。你可高兴?”南宫然看着一旁身穿打红嫁衣的何可儿说道。 ...
    南木有枝北桥有木阅读 562评论 4 1
  • 冬日暖阳温寒窗,愁思浅伤,墨染浓霜,凌波馨音解语狂。凡尘多舛运由谁?待敛凝眉,相聚有期,怅立江天自难忘。——《采桑...
    扁舟青袍阅读 538评论 0 1
  • 郑爽MM的颜值又回来了 这是今天热搜榜的关键词 妍姐没见郑爽几天,她居然又又又一次变脸,不过这次终于回归美美哒颜值...
    妍值百科阅读 309评论 0 0