一种界面显示方法、装置和移动终端制造方法及图纸

本发明专利技术公开了一种界面显示方法，适于在移动终端中执行，所述方法包括：在移动终端的应用上显示目标界面，所述目标页面包括位于上方的背景图和背景图下方的正文区域；响应于对背景图的下滑操作，判断目标界面的高宽比是否小于背景图的高宽比；若是，则随着下滑操作显示背景图未显示出来的部分图像；反之，则保持背景图的高宽比不变，根据背景图下拉后的高度，裁剪出对应宽度的背景图进行放大显示。本发明专利技术还一并公开了对应的界面显示装置和移动终端。

【技术实现步骤摘要】
一种界面显示方法、装置和移动终端
本专利技术涉及移动互联网领域，特别涉及在移动终端上进行用户交互的移动交互领域。
技术介绍
随着移动互联网的发展，越来越多的社群移动应用应运而生，例如知识星球移动应用。社群移动应用是指允许用户发表内容、向其他用户提问等的平台，用户可在该应用内进行聊天、发帖、点赞、评论、转发等行为。且随着网络技术的进步与用户体验理论的发展，除了能有基础的交互功能，许多产品增加了能额外提升产品娱乐性与丰富度的定制社群头像与社群背景图的功能。在不同的场景下能更换多套图片，可以使用产品自带的头像与背景图，亦能自由选择。但目前的界面图片在滑动操作的显示过程中，总是出现比例不协调的现象，影响用户体验。因此，需要提供一种体验效果更佳的图片显示方法。
技术实现思路
为此，本专利技术提供一种界面显示方法、装置和移动终端，以力图解决或者至少缓解上面存在的问题。根据本专利技术的一个方面，提供了一种界面显示方法，适于在移动终端中执行，该方法包括：在移动终端的应用上显示目标界面，该目标页面包括位于上方的背景图和背景图下方的正文区域；响应于对背景图的下滑操作，判断目标界面的高宽比是否小于背景图的高宽比；若是，则随着下滑操作显示背景图未显示出来的部分图像；反之，则保持背景图的高宽比不变，根据背景图下拉后的高度，裁剪出对应宽度的背景图进行放大显示。可选地，根据本专利技术的界面交互方法中，还包括步骤：响应于用户的松开手指操作，将当前背景图向上还原至目标界面首次显示时背景图的状态。可选地，根据本专利技术的界面交互方法中，还包括步骤：响应于用户的上滑操作，将正文区域逐渐向上覆盖所述背景图，并当所述正文区域触碰应用的导航栏时，对当前的背景图进行模糊处理后显示。可选地，根据本专利技术的界面交互方法中，正文区域触碰应用的导航栏，根据以下步骤确定：监听页面的向上滑动操作，计算所述正文区域的顶部与导航栏底部之间的距离，当该距离为0时，确定所述正文区域触碰所述应用的导航栏。可选地，根据本专利技术的界面交互方法中，模糊处理为高斯模糊处理，所述高斯模糊采用背景图中白色透明度为a的背景色，且模糊半径为b。可选地，根据本专利技术的界面交互方法中，还包括步骤：获取用户上传的头像图片，并将搜索页面显示的目标社群头像、目标界面中的背景图均更新为该上传的头像图片。可选地，根据本专利技术的界面交互方法中，将搜索页面显示的社区头像、目标界面中的背景图均更新为该上传的头像图片的步骤包括：根据预设的订阅者列表，确定与该头像图片所属的目标社群的订阅者；向所确定的订阅者发送更新通知，更新通知包含该上传的图片，以便订阅者根据更新通知中的图片进行图片更新。可选地，根据本专利技术的界面交互方法中，更新通知中包括发生更新的社群标识，订阅者根据更新通知中的图片进行图片更新的步骤包括：当订阅者判断自身所属社群标识与所述更新通知中的社群标识一致时，根据该更新通知中的图片进行图片更新。可选地，根据本专利技术的界面交互方法中，目标界面包括用户加入目标社群后的背景界面和用户未加入目标社群时的预览界面，目标社群头像为所述背景图的缩略图。可选地，根据本专利技术的界面交互方法中，对于目标社群头像，a＝10％，b＝5mm；对于背景图，a＝12％，b＝15mm。根据本专利技术的另一个方面，提供了一种界面显示装置，适于驻留在移动终端中，该装置包括：第一显示模块，适于在移动终端的应用上显示目标界面，目标页面包括位于上方的背景图和背景图下方的正文区域；判断模块，适于响应于对背景图的下滑操作，判断目标界面的高宽比是否小于背景图的高宽比，得到判断结果；第二显示模块，适于当判断结果为是时，随着下滑操作显示背景图未显示出来的部分图像，以及当判断结果为否时，保持背景图的高宽比不变，根据背景图下拉后的高度，裁剪出对应宽度的背景图进行放大显示。根据本专利技术的又一个方面，提供了一种移动终端，包括：至少一个处理器；以及存储器，存储有程序指令，其中，所述程序指令被配置为适于由所述至少一个处理器执行，所述程序指令包括用于执行如上所述的界面显示方法的指令。根据本专利技术的又一个方面，提供了一种存储有程序指令的可读存储介质，当所述程序指令被移动终端读取并执行时，使得所述移动终端执行如上所述的界面显示方法。根据本专利技术的技术方案，应用中首页的背景图片时刻保持正常比例的铺满显示，每一张图片都有其对应的正常尺寸和高宽比。当下滑首页时，图片高度会随着下滑不断增加，若此时首页界面的高宽比小于图片本身的高宽比，即代表当前背景图的高宽不足以让图片显示完整，此时的下滑操作不会放大图片，而是会随着下滑操作让图片不断充分展示。当下滑至某临界点时，背景显示区域高宽与图片正常尺寸高宽比相同，此时图片完全展示。如果继续下滑，则图片会根据当前高度进行放大显示，从而保证图片一直保持铺满及正常比例显示，提高用户体验。附图说明为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。图1示出了根据本专利技术一个实施例的移动通信系统100的示意图；图2示出了根据本专利技术一个实施例的移动终端200的示意图；图3示出了根据本专利技术一个实施例的界面显示方法300的流程图；图4A-4C分别示出了根据本专利技术一个实施例的搜索界面、背景界面和预览界面的示意图；图5A-5C分别示出了根据本专利技术一个实施例的在不同下滑位置的界面示意图；图6A-6C分别示出了根据本专利技术一个实施例的背景图放大显示、被文字区域覆盖显示和高斯模糊的示意图；图7A和7B分别示出了根据本专利技术一个实施例的提问按钮和提问卡片的示意图；以及图8示出了根据本专利技术一个实施例的界面显示装置800的结构图。具体实施方式下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。图1示出了根据本专利技术一个实施例的移动通信系统100的示意图。如图1所示，移动通信系统100包括多个移动终端200和服务器120。在移动终端200上安装有一个或者多个移动应用110。移动终端200的所有者通常会注册成为移动应用110的用户。移动应用110可以利用移动终端200提供的移动通信功能而耦接到服务器120，并经由服务器120而与其它移动终端200上的移动应用110进行通信。移动应用110可以是各种应用。例如，用于让两个或者更多个用户进行相互沟通、让一个用户去查看其他用户发布的信息的社交或社群应用。本专利技术不受限于移动应用110的具体用途，所有可以让一个用本文档来自技高网...

【技术保护点】
1.一种界面显示方法，适于在移动终端中执行，所述方法包括：/n在所述移动终端的应用上显示目标界面，所述目标页面包括位于上方的背景图和所述背景图下方的正文区域；/n响应于对所述背景图的下滑操作，判断所述目标界面的高宽比是否小于所述背景图的高宽比；/n若是，则随着下滑操作显示所述背景图未显示出来的部分图像；反之，则保持所述背景图的高宽比不变，根据所述背景图下拉后的高度，裁剪出对应宽度的背景图进行放大显示。/n

【技术特征摘要】
1.一种界面显示方法，适于在移动终端中执行，所述方法包括：
在所述移动终端的应用上显示目标界面，所述目标页面包括位于上方的背景图和所述背景图下方的正文区域；
响应于对所述背景图的下滑操作，判断所述目标界面的高宽比是否小于所述背景图的高宽比；
若是，则随着下滑操作显示所述背景图未显示出来的部分图像；反之，则保持所述背景图的高宽比不变，根据所述背景图下拉后的高度，裁剪出对应宽度的背景图进行放大显示。


2.如权利要求1所述的方法，还包括步骤：
响应于用户的松开手指操作，将当前背景图向上还原至所述目标界面首次显示时所述背景图的状态。


3.如权利要求1所述的方法，还包括步骤：
响应于用户的上滑操作，将所述正文区域逐渐向上覆盖所述背景图，并当所述正文区域触碰应用的导航栏时，对当前的背景图进行模糊处理后显示。


4.如权利要求3所述的方法，其中，所述正文区域触碰应用的导航栏，根据以下步骤确定：
监听页面的向上滑动操作，计算所述正文区域的顶部与导航栏底部之间的距离，当该距离为0时，确定所述正文区域触碰所述应用的导航栏。


5.如权利要求3所述的方法，其中，所述模糊处理为高斯模糊处理，所述高斯模糊采用背景图中白色透明度为a的背景色，且模糊半径为b。


6.如权利要求1-5中任一项所述的方法，还包括步骤：
获取用户上传的头像图片，并将搜索页面显示的目标社群头像、所述目标界面中的背景...

【专利技术属性】
技术研发人员：潘钦凯，姚俊昌，
申请(专利权)人：深圳市大成天下信息技术有限公司，
类型：发明
国别省市：广东;44