百度360必应搜狗淘宝本站头条
分布式事务框架shiro框架java日志框架框架图cad怎么画框架
当前位置：网站首页 > 技术文章 > 正文

如何用Axure设计APP频道页（axure页面设置）

ccwgpt 2024-10-21 04:04 39 浏览 0 评论

频道页是APP中常见的页面，那么如何高效率的画出它的原型呢？

之前的文章已经讲解了APP常见功能中的页面模板、下导航、上导航、列表页，怎么画出来，请继续关注教你画APP原型后续的其他功能模块。

常见的频道页有淘宝APP的微淘，通讯录的首页，微信的表情。该叫法来源于以前Web门户的不同频道。简单来说就是由几个tab按钮和多个页面组成，点击tab可以切换到不同的频道页。

接下来分别用四种方法来画出“微信-我的-表情”这个频道页的原型效果。

点击查看4种效果 http://51prd.com/case/appcomponent/pindaoye/start.html ，以及他们的页面结构和实现逻辑。

方法1：使用多个页面

相信每个刚开始使用Axure画原型的PM都会选择这么操作，即然点击不同tab会显示不同的内容，那么我就画出多个页面来表示吧。

然后需要把点击tab的效果补上，在刚刚画出的每个页面中分别设置点击tab的跳转链接，总计2个tab，需要重复添加到不同页面，需设置4次。

方法2：使用动态面板

当你对Axure有一定了解之后，应该会知道动态面板最适合表现同一功能的不同状态。那么可以把上面多个页面的方法，替换成使用同一动态面板的多个状态。

然后对tab按钮设置交互事件，点击tab打开动态面板的某一状态。总计2个tab，需要重复添加到不同状态，需设置4次。

方法3：选中选项组+动态面板

当你研究比较深入之后，你会发现顶部的tab需要画多次比较麻烦，添加交互也需要重复多次，那么有没有办法简化tab的画法呢。

我们发现这些tab按钮在每个频道页面的交互事件是一样的（单击打开同一个频道页），而样式也是相似的，但是显示在当前频道的tab按钮不一样，我们先把tab从动态面板里面移出。

这样依然可以打开2个不同的内容区，但是tab的样式没有随着我们点击而变化，所以我们需要对这2个tab设置选中和未选中的效果来区分。

需要注意的是精选表情默认是选中状态，而它的未选中状态和更多表情是一样的，也需要设置，最后设置“精选表情”为选中状态。

按照同样的方法将更多表情设置默认样式和选中样式，然后选中这2个按钮然后设置为单选组。

然后我们需要设置单击这2个按钮的时候，选中自身即可。

最后我们生成原型就可以达到一样的效果。

其实这个方法我们在文章《APP下导航如何用Axure画出来》的时候就讲过，本质是一样的，但是这里会复杂一些。因为2个tab的形状不一样，否则设置完一个tab的样式之后，格式刷另外一个即可。

方法四：选中选项组+内联框架

在上面方法的基础上，删除动态面板，替换成内联框架。

然后我们修改精选表情的交互事件为这样。

需要提前把上面动态面板的2个状态，改成2个新页面。

最后的原型效果依然是一样的。(需要注意的是最好隐藏内联框架的边框，以及设置打开该页面“表情”的时候打开内联框架中的精选表情页面。)

总结

相信大家可以看得出来，第三种方法是画起来效率最高的，但是也是很难理解的。但是掌握了这样的技巧，像文中最开始的几种频道页画起来是轻而易举。

相关推荐

十分钟让你学会LNMP架构负载均衡（impala负载均衡）

业务架构、应用架构、数据架构和技术架构一、几个基本概念1、pv值pv值(pageviews):页面的浏览量概念：一个网站的所有页面，在一天内，被浏览的总次数。(大型网站通常是上千万的级别)2、u...

AGV仓储机器人调度系统架构（agv物流机器人）

系统架构层次划分采用分层模块化设计，分为以下五层：1.1用户接口层功能：提供人机交互界面（Web/桌面端），支持任务下发、实时监控、数据可视化和报警管理。模块：任务管理面板：接收订单（如拣货、...

远程热部署在美团的落地实践（远程热点是什么意思）

Sonic是美团内部研发设计的一款用于热部署的IDEA插件，本文其实现原理及落地的一些技术细节。在阅读本文之前，建议大家先熟悉一下Spring源码、SpringMVC源码、SpringBoot...

springboot搭建xxl-job(分布式任务调度系统)

一、部署xxl-job服务端下载xxl-job源码：https://gitee.com/xuxueli0323/xxl-job二、导入项目、创建xxl_job数据库、修改配置文件为自己的数据库三、启动...

大模型:使用vLLM和Ray分布式部署推理应用

一、vLLM：面向大模型的高效推理框架1.核心特点专为推理优化：专注于大模型（如GPT-3、LLaMA）的高吞吐量、低延迟推理。关键技术：PagedAttention：类似操作系统内存分页管理，将K...

国产开源之光【分布式工作流调度系统】:DolphinScheduler

DolphinScheduler是一个开源的分布式工作流调度系统，旨在帮助用户以可靠、高效和可扩展的方式管理和调度大规模的数据处理工作流。它支持以图形化方式定义和管理工作流，提供了丰富的调度功能和监控...

简单可靠高效的分布式任务队列系统

#记录我的2024#大家好，又见面了，我是GitHub精选君！背景介绍在系统访问量逐渐增大，高并发、分布式系统成为了企业技术架构升级的必由之路。在这样的背景下，异步任务队列扮演着至关重要的角色，...

虚拟服务器之间如何分布式运行?（虚拟服务器部署）

　　在云计算和虚拟化技术快速发展的今天，传统“单机单任务”的服务器架构早已难以满足现代业务对高并发、高可用、弹性伸缩和容错容灾的严苛要求。分布式系统应运而生，并成为支撑各类互联网平台、企业信息系统和A...

一文掌握 XXL-Job 的 6 大核心组件

XXL-Job是一个分布式任务调度平台，其核心组件主要包括以下部分，各组件相互协作实现高效的任务调度与管理：1.调度注册中心（RegistryCenter）作用：负责管理调度器（Schedule...

京东大佬问我,SpringBoot中如何做延迟队列?单机与分布式如何做?

京东大佬问我,SpringBoot中如何做延迟队列？单机如何做？分布式如何做呢？并给出案例与代码分析。嗯，用户问的是在SpringBoot中如何实现延迟队列，单机和分布式环境下分别怎么做。这个问题其实...

企业级项目组件选型(一)分布式任务调度平台

官网地址：https://www.xuxueli.com/xxl-job/能力介绍架构图安全性为提升系统安全性，调度中心和执行器进行安全性校验，双方AccessToken匹配才允许通讯；调度中心和执...

python多进程的分布式任务调度应用场景及示例

多进程的分布式任务调度可以应用于以下场景：分布式爬虫：importmultiprocessingimportrequestsdefcrawl(url):response=re...

SpringBoot整合ElasticJob实现分布式任务调度

介绍ElasticJob是面向互联网生态和海量任务的分布式调度解决方案，由两个相互独立的子项目ElasticJob-Lite和ElasticJob-Cloud组成。它通过弹性调度、资源管控、...

分布式可视化 DAG 任务调度系统 Taier 的整体流程分析

Taier作为袋鼠云的开源项目之一，是一个分布式可视化的DAG任务调度系统。旨在降低ETL开发成本，提高大数据平台稳定性，让大数据开发人员可以在Taier直接进行业务逻辑的开发，而不用关...

SpringBoot任务调度:@Scheduled与TaskExecutor全面解析

一、任务调度基础概念1.1什么是任务调度任务调度是指按照预定的时间计划或特定条件自动执行任务的过程。在现代应用开发中，任务调度扮演着至关重要的角色，它使得开发者能够自动化处理周期性任务、定时任务和异...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表