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

1. 列表类

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

blob.png
图1-1

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

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

blob.png
图1-2

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

blob.png
图1-3

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

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

blob.png
图1-4

2. 卡片式

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

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

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

blob.png
图2-1

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

blob.png
图2-2

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

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

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

3. 详情类

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

blob.png
图3-1

4. 索引类

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

blob.png
图4-1

5. 专题类

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

blob.png
图5-1

6. 瀑布流

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

blob.png
图6-1