1# 应用页面结构设计 2 3 4## 通用页面结构 5 6应用程序由多个页面组成。我们将常见的页面进行了梳理，总结了以下常用的页面结构。 7 8**启动页面** 9 10针对内容型应用，应用首页内容的获取需要花费一定的时间，此时可以使用启动页缓解页面加载内容的等待感。启动页可以展示应用的品牌形象或者广告，避免让用户等待过长时间。没有网络加载内容的应用，不需要使用启动页。 11 12 13 14用户总是希望第一时间看到应用内容，因此在页面加载完成后，需要及时呈现内容。 15 16从后台加载应用时，不应该显示启动页。当应用被切换到后台后，再从后台加载回来时，不应该再次显示启动页。应用需要保留应用的状态，以便从后台恢复，方便用户继续浏览。 17 18**列表内容页面** 19 20列表内容页面通常用于文字和数据的展示，利于提升使用效率。 21 22 23 24列表应该按照一定的逻辑排序，便于用户浏览和操作。例如：按字母顺序排序、按时间排序。 25 26列表应该是同类项的集合，应该对外呈现一致的布局样式。常见的是单行列表、双行列表和三行列表。 27 28列表显示的内容要主次分明，用户一眼就能关注到重要的信息和操作。 29 30**网格内容页面** 31 32网格内容页面通常用于图片和视频的展示，利于沉浸浏览内容。 33 34 35 36网格视图显示同等重要的项目，具有统一的布局。 37 38网格视图以图像为主组织内容。例如图库中用网格视图展示图片。 39 40网格视图可以辅以文字和操作。例如应用市场中使用网格展示应用程序图标、简单描述和下载按钮。 41 42网格视图应该考虑响应式布局。在横竖屏切换时，网格视图应该能够调整网格的数量以适应页面的宽度变化。 43 44**多选页面** 45 46多选页面是对页面内的数据多项选择，然后进行批量处理。常见的是针对列表的多项选择或宫格的多项选择。 47 48 49 50**详情页面** 51 52详情页用于展示应用的详细描述和操作。 53 54 55 56**空页面** 57 58在页面内没有数据的时候，使用空页面。 59 60 61 62**设置页面** 63 64设置页面通常是一个模块所有设置项的聚合。 65 66 67 68**我的页面** 69 70针对内容型应用，可以提供我的页面，用于承载用户的信息和资产内容。 71 72 73 74**关于页面** 75 76关于页面用于呈现应用的基本情况，包括联系方式，法律条款等内容。 77 78 79 80 81## 垂类页面结构 82 83垂类是指垂直领域，为特定的人群提供特定的服务，属于应用的细分类别，例如音乐类、视频类、直播类等。垂类页面结构是在特定领域长期使用的过程中，形成的广泛被用户接受和理解的页面结构。 84 85例如： 86 87音乐类应用都有音乐歌单，音乐专辑，音乐播放界面。 88 89视频类应用都有视频详情和视频播放界面。 90 91直播类应用，都有瀑布流推荐和直播界面。 92 93... 94 95常见的垂类页面结构有： 96 97- 音乐播放页面 98 99- 专辑详情页面 100 101- 视频详情页面 102 103- 视频播放页面 104 105**音乐播放界面** 106 107音乐类应用中的播放器界面，该界面通常有音乐操控（播放，暂停，上一首，下一首）、歌词显示等功能。 108 109 110 111**专辑详情页** 112 113音乐类应用中的音乐专辑详情界面，该界面通常有专辑介绍、专辑包含的歌曲列表等功能。 114 115 116 117**视频详情页面** 118 119视频类应用的视频详情界面，该界面通常有视频播放器、视频剧集显示、视频简介等功能。 120 121 122 123**视频播放界面** 124 125视频类应用的视频播放界面，该界面通常有视频画面预览、播放控制等功能。 126 127 128 129 130## 特殊页面结构 131 132部分应用界面在差异较大的设备间切换，无法使用自适应和响应式布局设计方法进行适配，从用户预期上也需要调整应用架构时，将需要做特殊适配。 133 134例如，同时具有底部Tab和子页签的页面，在大屏上应考虑将底部入口置于顶部工具栏或与子页签融合。 135 136 137