社区APP「豆瓣」原型分享

豆瓣，我们的精神角落，它好似繁杂的互联网世界里一个精神乌托邦似的存在着。豆瓣利用‘兴趣’把大家聚集起来，形成社区，提供图书、电影、音乐唱片的推荐、评论和价格比较，以及城市独特的文化生活，在网络中，为我们每个人的精神世界留了一片带有独特气息的土地。不知道看什么电影了，打开豆瓣！想看书了，打开豆瓣！每每看完一部作品，总会想要来豆瓣上再看看影评、看看书评，跟着大家的分享再次回味其中的内容，也常常能从中看到自己所没有触及的更深的思考。

今天我们给大家分享的就是豆瓣APP原型模板以及组件库、页面库（下载地址见文末~），有高保真和低保真两个版本，其中包含了以【书影音】为核心的各流程页面，里面所有组件都可以自由修改。下面我们将本套原型中所含页面按照内容的呈现方式和作用分为5大类进行详细说明：

聚合页

聚合页往往出现在APP的首页或发现页，一个页面呈现了多个版块内容的集合。将不同版块内容的标题或部分内容呈现在在同一个页面，为用户提供更直观的功能入口，让用户能快速定位到自己感兴趣的地方。

在这套模板中我们提供了8个聚合页面，根据版块的重要程度和性质，不同内容版块以分类图标、横向滑动列表、图文信息、宫格、banner、文字标题等多种布局方式组织形成，大家在自己APP的聚合页中也可以参考以上方式。

列表页

一个APP中大多数页面都是列表页，用于展示多项同类信息，并常常会提供排序或筛选等方式来帮助用户根据不同条件选择信息。列表页布局往往有图文混排、纯文本、图片列表、宫格、卡片等多类不同形式。

在本套模板中最常用到的是竖排图文列表：

内容详情页

内容详情页，展示某项内容的详细信息，比如商品详情、文章详情、个人主页等等，通过全面而丰富的信息来进一步对内容进行说明。内容详情页是一个APP中最难设计的几个页面之一，它承载了很多层次的信息，如何向用户展示内容的核心价值，带给用户良好的阅读体验是产品经理需要认真考虑的问题。

在豆瓣的原型模板中，包含了大量的内容详情页。文章详情、电影详情、音乐详情、作者详情、小组详情等等，有很多值得参考之处。

发布页

发布页主要用于用户发表自己的想法、评价等等。这类页面通常内容相对简单，聚焦于表单本身，通过精简页面内容来让用户专心填写发布的内容，同时也会提供一些待选项来帮助用户更快地更精准地完成输入。

我们的模板中包含了写笔记、评分、打标签等发布功能：

功能页

功能页是指承载某项特殊功能的页面，比如APP的搜索页面等。

原型展示（高保真和低保真两个版本）

部分原型动态预览

完整原型预览地址：xiaopiu-豆瓣高保真原型模板

组件展示

利用组件库快速搭建页面

1. 引用组件库（组件库地址）

2. 如上图所示，点击引用后，组件库即成为自己的引用资源（库内的资源也会实时更新），大家可在项目中使用，快速搭建自己的页面：

资源地址

高保真原型预览：豆瓣高保真原型

低保真原型预览：豆瓣低保真原型

原型下载：豆瓣原型下载

页面库：豆瓣页面库引用

组件库：豆瓣组件库引用

参考文章：

四种常见的APP分类界面布局设计案例学习 - 25学堂

APP页面的四种类型，你都知道吗？

UI布局欣赏：文章列表与内容详情页设计

欢迎大家对我们的原型提出建议，对后面分享内容有哪些期待和想法也可以跟我们交流哟！

如果你觉得还不错，就点个赞吧！哈哈，给我们一点更下去的动力！～动力！～动力！～