应用页面结构设计

通用页面结构

应用程序由多个页面组成。我们将常见的页面进行了梳理,总结了以下常用的页面结构。

启动页面

针对内容型应用,应用首页内容的获取需要花费一定的时间,此时可以使用启动页缓解页面加载内容的等待感。启动页可以展示应用的品牌形象或者广告,避免让用户等待过长时间。没有网络加载内容的应用,不需要使用启动页。

一多-应用架构-启动页

用户总是希望第一时间看到应用内容,因此在页面加载完成后,需要及时呈现内容。

从后台加载应用时,不应该显示启动页。当应用被切换到后台后,再从后台加载回来时,不应该再次显示启动页。应用需要保留应用的状态,以便从后台恢复,方便用户继续浏览。

列表内容页面

列表内容页面通常用于文字和数据的展示,利于提升使用效率。

一多-应用架构-列表视觉图

列表应该按照一定的逻辑排序,便于用户浏览和操作。例如:按字母顺序排序、按时间排序。

列表应该是同类项的集合,应该对外呈现一致的布局样式。常见的是单行列表、双行列表和三行列表。

列表显示的内容要主次分明,用户一眼就能关注到重要的信息和操作。

网格内容页面

网格内容页面通常用于图片和视频的展示,利于沉浸浏览内容。

一多-应用架构-网格视图

网格视图显示同等重要的项目,具有统一的布局。

网格视图以图像为主组织内容。例如图库中用网格视图展示图片。

网格视图可以辅以文字和操作。例如应用市场中使用网格展示应用程序图标、简单描述和下载按钮。

网格视图应该考虑响应式布局。在横竖屏切换时,网格视图应该能够调整网格的数量以适应页面的宽度变化。

多选页面

多选页面是对页面内的数据多项选择,然后进行批量处理。常见的是针对列表的多项选择或宫格的多项选择。

应用架构-常用页面结构-通用页面结构-多选页面低保真

详情页面

详情页用于展示应用的详细描述和操作。

应用架构-常用页面结构-通用页面结构-详情页面低保真

空页面

在页面内没有数据的时候,使用空页面。

一多-应用架构-空页面

设置页面

设置页面通常是一个模块所有设置项的聚合。

一多-应用架构-设置

我的页面

针对内容型应用,可以提供我的页面,用于承载用户的信息和资产内容。

一多-应用架构-我的页面

关于页面

关于页面用于呈现应用的基本情况,包括联系方式,法律条款等内容。

一多-应用架构-关于

垂类页面结构

垂类是指垂直领域,为特定的人群提供特定的服务,属于应用的细分类别,例如音乐类、视频类、直播类等。垂类页面结构是在特定领域长期使用的过程中,形成的广泛被用户接受和理解的页面结构。

例如:

音乐类应用都有音乐歌单,音乐专辑,音乐播放界面。

视频类应用都有视频详情和视频播放界面。

直播类应用,都有瀑布流推荐和直播界面。

...

常见的垂类页面结构有:

  • 音乐播放页面

  • 专辑详情页面

  • 视频详情页面

  • 视频播放页面

音乐播放界面

音乐类应用中的播放器界面,该界面通常有音乐操控(播放,暂停,上一首,下一首)、歌词显示等功能。

应用架构-常用页面结构-垂类页面结构-音乐播放低保真

专辑详情页

音乐类应用中的音乐专辑详情界面,该界面通常有专辑介绍、专辑包含的歌曲列表等功能。

应用架构-常用页面结构-垂类页面结构-歌单详情低保真

视频详情页面

视频类应用的视频详情界面,该界面通常有视频播放器、视频剧集显示、视频简介等功能。

一多-应用架构-视频详情

视频播放界面

视频类应用的视频播放界面,该界面通常有视频画面预览、播放控制等功能。

一多-应用架构-视频播放

特殊页面结构

部分应用界面在差异较大的设备间切换,无法使用自适应和响应式布局设计方法进行适配,从用户预期上也需要调整应用架构时,将需要做特殊适配。

例如,同时具有底部Tab和子页签的页面,在大屏上应考虑将底部入口置于顶部工具栏或与子页签融合。

特殊页面结构