描述:在进入app后,一般在进入一个内容详情前,以列表的形式显示同类的数据类型或者数据类型组,比如图片和文本。
上下文情境:用户抱着寻找一定信息的目的,进入列表页,对多个列表项进行浏览,或者比较,进行一定操作。
任务流程:显示,操作
必备框架:列表框架
相关框架:内容详情(后置),筛选框架(操作),搜索框架(前置)
构成元素:文字标题,文字,图像,操作
设计标准(筛除,选择,验证):1让用户快速浏览,2让用户快速发现感兴趣的信息,3让用户知道下一步怎么做
说到列表,最常见的形式如下图
形式1:图像,标题,箭头
图像在这的作用包括,视觉定位,快速辨认,暗示作用。但很多时候只是为了好看,所以不一定有,作为列表导航的时候一般要有~
最重要的还是标题,清晰明白,不要太长,概括后置内容详情
而向右箭头这里起的作用是暗示可点击。尤其在列表中有些可点击,有些只读的时候需要这个配合颜色起到暗示作用
注意1:但即使没有向右箭头用户还会经常认为这个列是可以点击的,这个就需要一个点击后的视觉反馈
注意2:进入下级页面动效要符合箭头指示,从右方进入
注意3:这里的头像图标与整个列表的交互一致
注意4:如果列表项是作为导航的话,需要做好排序,组织和分块。5个以内列表可以不进行分组,8个以上需要分成3个组。分组可以按照类别(相关性分组),也可以按照首字母(如通讯录)等
形式2:图像,标题,内容,箭头
增加的小标题主要显示与标题相关主要内容,或者是内容变化,或者是状态
注意1:整体的一致性,整个列表页都同时要有图像或者都无
注意2:内容靠近向右箭头右对齐
形式3:标题,内容,箭头
突出内容,内容一眼就能看出代表的东西
注意:标题最好右对齐,内容左对齐,用户视线沿内容往下看,标题起辅助作用(qq这个就显得有点凌乱,陌陌这种感觉看起来有点麻烦)
不过这种列表形式挺少见,我这个想法不一定对~没有太好的佐证。查了下iOS设计规范中表格视图的副标题型在这种情况下是建议标题右对齐。
形式4:图像,标题,副标题,向右箭头
副标题,更多的是对标题的解释,相关内容
这个比较适用于列表项目比较相似,这样用户可以用副标题中的详细信息来帮助区分不同列表
或者以这种形式来提示内容详情,吸引用户,但感觉作用一般,毕竟是弱化信息
形式5:图像,标题,内容,时间(距离等标题相关属性),向右箭头
图像和向右箭头不一定有
内容一般在1-2行,
时间越接近,显示的越准确
形式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设计模式