响应式网站的栏目页主要有列表类、卡片式、详情类、索引类、专题类和瀑布流，每种UI模式都各有优势，需要结合实际需求选择最佳方案。

1. 列表类

  列表类栏目页根据图片的有无分为文字列表类和图文列表类。

图1-1

  文字列表类最常采用「日期+标题」的形式，适用于以文字内容展示为主的页面，如新闻、通知、课程安排等，如不能保证每条消息都有封面图，此类型栏目页为首选。文字列表类有2种最常见的形式：「万能型」和「突出日期型」。

  「万能型」几乎适用于全部信息类页面但较单调乏味，典型案例为中山大学药学院新闻栏目。

图1-2

  「突出日期型」适用于时效性较强的新闻、活动栏目，设计感较强，典型案例为中山大学校友会活动栏目。

图1-3

  图文列表类最常采用「图片+标题+日期+摘要」的形式，适用于以文字内容展示为主的页面，如新闻、活动、教程等，每条信息需要上传一张封面图。图文列表类最常见的形式是「左图右文」。

  好的图片能够极大的提升APP和网站的视觉，让用户获得愉悦感，图片的尺寸可根据实际需求调整，比例建议设为16:9或3:2。典型案例为青朴科技动态栏目。

图1-4

2. 卡片式

  我们通常所说的卡片式设计中的卡片，是信息的容器，每个卡片都承载着属于自己的内容。卡片能承载着几乎所有类型的内容——多媒体、文本、链接，等等，而这所有的信息都经由卡片，被收纳到统一的主题之下。

  卡片式设计的优点是：良好的视觉一致性、和响应式框架有良好的兼容、适合移动端小屏幕和手势操作。缺点是：一屏呈现的信息量较小、页面拓展性较差、页面略显呆板。

  卡片式设计的页面一种是右侧边栏，二级栏目较多的栏目页可以选择这种形式，卡片区域建议分为3栏。典型案例为上海外国语大学栏目首页。

图2-1

  另一种是无侧边栏，常用于案例展示栏目，对图片品质要求高，根据实际需要将卡片区域分为3栏或4栏。典型案例为Zicasso栏目首页。

图2-2

  卡片式与列表式如何选择呢？

  卡片式设计可以承载多种多样的内容和元素，比如摘要、标签，它们能够让内容更加丰富，对图片品质要求较高。适用于案例、设计作品、摄影等栏目。

  列表式UI更加紧凑，每一屏显示的内容更多，更加便于用户快速浏览信息，对图片无要求。适用于新闻、通知、搜索结果等栏目。

3. 详情类

  适用于「关于我们」、「联系我们」等层级简单的栏目，正文区域宽度建议设为840px-900px，避免一行文字过长引起阅读不便。典型案例为梨山宾馆「关于我们」栏目。

图3-1

4. 索引类

  这类栏目页通常根据页面内容特别定制，优化信息的排布，使用户能快速找到需要的信息，适用于「网站地图」、「机构设置」等分类较多的栏目。典型案例为北京大学「院系设置」栏目。

图4-1

5. 专题类

  网站中设置的一个独立页面，设置独立模板，内容对应一个特定的主题，介绍某一产品或宣传某一活动，这类页面通常采用通栏大图设计。典型案例为梨山贡茶专题页。

图5-1

6. 瀑布流

  视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，适用于展示图片为主的页面。

图6-1