集团官网
  • 华为授权培训中心
  • 腾讯云一级认证培训中心
  • 百度营销大学豫陕深授权运营中心
  • Oracle甲骨文OAEP中心
  • Microsoft Azure微软云合作伙伴
  • Unity公司战略合作伙伴
  • 普华基础软件战略合作伙伴
  • 新开普(股票代码300248)旗下丹诚开普投资
  • 中国互联网百强企业锐之旗旗下锐旗资本投资

什么是APP内容视图?内容视图有哪些分类?

编辑:云和数据 日期:2023-01-21 23:52

布局合理的内容视图有利于用户浏览,提高用户使用频率。然而内容视图指的是什么?内容视图又包含哪些形式?

什么是内容视图?

内容视图指的是手机界面中用于展示内容的区域,是手机界面的重要组成元素之一。内容视图区域不仅可以展示内容信息,还能够进行一系列交互行为。例如,内容滚动,页面跳转、插人内容、删除内容等操作。如下图所示红框标识的部分为手机界面中的内容视图。

手机内容视图

内容视图的分类

内容视图的设计样式多种多样,常见的样式分类主要有列表视图、卡片视图、集合视图、文本视图和网络视图,下面将对这些视图进行讲解。

 

1. 列表视图

列表视图是用分割线将内容进行区分。利用紧密、对比、重复、对齐”的原则设计每条列表的信息,使信息清晰有力地传达给用户。列表视图分为两种样式: 一种是平铺型,另一种是分组型,如下图所示。

平铺形    分组型
左:平铺型    右:分组型

2. 卡片视图

卡片视图是将同类信息归纳到一一个矩形或者圆角矩形当中,在占用较少屏幕空间的情况下将信息有组织地划分到不同的区域中。卡片可以被堆叠、覆盖、移动,这样极大地扩展了一个内容块的视觉深度和可操作性。卡片在设计形式上还可以增加边缘、阴影,使得卡片具有立体感。

 

3. 集合视图

集合视图是将同类信息用平铺的形式展现,一般以图片为主题,文字为辅助信息。集合视图用于管理一系列有序的项,并以一种自定义的布局来呈现它们。例如,系统照片将图片集合在一起,以相同大小的正方形进行展示,用户通过点击图片放大查看,如下图所示为集合视图。

集合视图

4. 文本视图

文本视图是一个能够显示多行文本的区域,当因内容太多而超出其适应范围时,可以支持滚动。同时,文本视图支持用户编辑,当用户轻击文本视图内部时,设备唤起键盘并根据输人的内容类型来指定不同的键盘类型,可以为用户提供更方便快捷地输入体验,下图所示为文本视图。

文本视图1文本视图

文本视图

5. 网络视图

目前绝大部分的网络视图是指直接在内容区域嵌入HTML5页面,其优点是可以在服务端直接快速发布、更新内容,而不需要在应用平台进行版本更新。例如,手机淘宝首页内容区域就采用了嵌入HTML5的网络视图,下图展示的就是淘宝双十一前的首页和淘宝双十一时的首页对比。

淘宝对比

相关内容

常见的网页ui界面布局有哪些? 在设计网页时,需要根据不同的网站性质和页面内容选择合适的布局形式,下面介绍一些常见的网页布局方式。1. “国”字型布局“国”字型布局是网页上使用最多的一种结构类型,是综合性网站页面中常用的版式。通常上方为引导栏、header, 导航栏,中间为内容区,最底端为版权信息。将内容区分为左、中、右三大... 郑州学习测试开发如何选择培训班? 随着互联网的快速发展,如今对于测试开发岗位的需求量都有明显的增长,现在选择选择学习测试开发的人也变得越来越多,不同的培训学校有着不同的优势。那么郑州学习测试开发如何选择培训班? 线上、线下了解机构口碑线上在网上查看网友对该机构的评价,需注意的是要客观看待,因为网上的往往真假参半;其次... Maven是怎么样构建Spring Boot项目的? 准备好项目运行所需的环境后,就可以使用IDEA开发工具搭建一个Spring Boot入门程序了。我们既可以使用Maven方式构建项目,也可以使用Spring Initializr快捷方式构建项目。这里先介绍如何使用Maven方式构建Spring Boot项目,具体步骤如下。1.初始化IDEA配... 郑州Java开发培训学费大约是多少? 伴随互联网行业的发展,现如今的企业对于Java开发技术人才需求较高,很多零基础的也想要从事相关的Java开发岗位,这时候需要报班系统的学习,费用的问题备受关注,那郑州Java开发培训学费大约是多少? 虽然不同的培训机构费用略有差别,但总的来说,线下培训的费用都在一万五到两万之间,线上... Beta测试和Alpha测试是什么?区别在哪儿? 大型通用软件,在正式发布前,通常需要执行 Alpha 和 Beta 测试,目的是从实际终端用户的使用角度,对软件的功能和性能进行测试,以发现可能只有最终用户才能发现的错误。Alpha 测试是由一个用户在开发环境下进行的测试,也可以是公司内部的用户在模拟实际操作环境下进行的受控测试,Alpha ... 相比APP、H5设计有哪些优点和缺点? 随着移动互联网的快速发展,传统的营销模式显然已经不再符合当下时代的需求。当下,越来越多的企业将品牌营销所需费用的大头投入到移动互联网方面。从中,我们也可以看出,移动营销已然大势所趋。那为什么用H5来执行线上的营销方案呢?要了解这一点我么首先来了解一下H5的特点。美观性:页面设计更加的美观,有声...
×