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设计模式