PCWeb端产品后台框架设计过程分享

新知榜官方账号

2023-10-10 19:40:56

PCWeb端产品后台框架设计过程分享

作者分享了自己做pcweb端产品后台框架的设计过程，希望能够对你的原型设计工作带来帮助。本人前段时间做了专家管理产品的pcweb端产品，按照当时的要求，制作了高保真的原型。在这个原型里面，实现了屏幕自适应、菜单动态展示、列表页面的排序分页等功能，使用了动态面板、中继器等元件，设计风格上参考了蚂蚁金服的antdesign，因为是后台管理系统，所以设计风格上也比较紧凑，我把这个过程写出来，希望能够对大家有所帮助。

页面布局

在开始制作原型之前，先要做的是对页面的布局。对于PC端的系统，一般常见的布局有下面的A、B两种模式：

在本次原型里面，因为数据和内容比较多，我们考虑要做的紧凑一点，给用户尽可能多的操作空间，所以采用A模式，具体各区域的智能如下所示：

上部区域：显示产品logo、名称、一级菜单和用户菜单区域(主要包括系统消息、修改密码、退出系统等功能)；
左侧区域：显示二级菜单、三级菜单，因为在上部区域已经有了一级菜单，对于一般的系统来说，菜单到了三级就可以，不简易菜单层级过深；
右侧区域：显示具体的内容区域，这块区域就是具体的内容页面，包括面包屑导航和具体的内容页面；

页面布局axure实现

对于上面的A模式的设计，用户的操作模式如下：

用户点击【上】区域的一级菜单，【左】区域展示对应的二级菜单
用户点击【左】区域的二级菜单，【右】区域显示具体的操作页面

按照这个需求，我们进行这样的操作：

上区域拖入动态面板，命名为top_menu;
左区域拖入动态面板，命名为left_menu;
右区域拖入内联框架，命名为content；

因为电脑屏幕的尺寸不同，我们要制作原型，让原型在展示的时候能够自动适应屏幕的大小。我们通过以下步骤实现自适应：

我们的原型是基于1366*768的分辨率进行设计；
顶部菜单top_menu的高度为固定的64，宽度为1366，并且设置该动态面板为100%宽度，这样就能保证动态面板宽度适应浏览器；
设置左侧菜单left_menu的尺寸为256*700；
同样设置内容区域content的尺寸；
如果页面尺寸发生变化，我们需要动态改变左侧菜单left_menu的宽度和内容区域content的高度，即在窗口尺寸发生变化的时候：左侧菜单left_menu的高度=窗口高度–顶部菜单top_menu高度内容区域content的高度=窗口高度–顶部菜单top_menu高度内容区域content的宽度=窗口宽度–左侧菜单left_menu宽度

顶部菜单

顶部菜单就是一级导航菜单，顶部菜单实现起来比较简单，通过矩形制作就可以了，但是要注意顶部菜的交互，即在点击美一个一级导航菜单的时候，都要展示对应的左侧菜单（左侧菜单的实现后面会说）。用户菜单在顶部菜单的右侧，还有用户菜单，用户菜单就是大家通常使用的右上角菜单，包括消息列表、帮助、系统设置、退出系统等功能。对于用户菜单，也需要动态面板来实现。并且随着页面大小的调整，用户菜单也要向右移动对应的位置。即用户菜单的位置=窗口宽度–用户菜单宽度–50（50是调整距离，是用户菜单的右侧靠近浏览器右边的距离）

左侧菜单

左侧菜单就是二级、三级菜单，同样通过动态面板来实现，有几个一级菜单，动态面板就要有几个对应的状态，点击一级菜单，就是动态的切换动态面板的状态。同样，在每个二级、三级菜单里面，需要进行菜单的展开、收起的交互。具体的实现方式是：每个二级菜单都是一个动态面板；面板里面有两个状态，展开和收起的状态，用户点击收起、展开按钮，切换动态面板状态；这里要注意一点，要选择【推动和拉动元件】，这样在收起和展开的时候，其他的二级菜单的位置才会调整。

内容的展示

内容的展示比较简单，就是在点击菜单的时候，在content内联框架中打开具体的内容页面就可以了。

结果到了这里，自适应的高保真axure框架原型就做好了，想看演示的可以参考高保真演示。

本页网址：https://www.xinzhibang.net/article_detail-16230.html

寻求报道，请

关键词

分享至微信：

相关工具

HeyFriday

国内团队推出的智能AI写作工具

字符狂飙

全方位AI文档生成工具，快速生成专业文档

奇妙文

出门问问推出的AI写作助理

火山写作

字节跳动旗下团队推出的免费AI英语写作助手

Bearly

AI阅读总结、写作和内容生成助手

有道写作

网易有道出品的智能英文写作修改和润色工具

三个国外专业免费的调色网站

三个国外专业免费的调色网站无论制作视频、编辑图片，合适的色彩会让你的作品增加视觉冲击力，所以专业的调色技术价值非凡，一部电影或一部好的视频、图片海报，专业调色耗费少则上万，多则上百万，只是大家对专业调色这个行业知之甚少，今天网玩君就为大家分享三个国外专业免费的调色网站，记得收藏好，以后编辑视频、图片

分类标签调色网站免费

04-18 16:42

电影制作中的纹理技术

纹理在电影制作中的重要性纹理是指将详细的表面特征应用于3D模型或视觉效果元素，使其看起来更逼真。纹理对于创建视觉上引人入胜且可信的电影场景至关重要，尤其是涉及CGI、动画或特效的场景。纹理还支持叙事和讲故事，可以通过纹理设置年龄大小等属性，为故事奠定基础。纹理技术的发展历程自胶片问世以来，电影制作人

分类标签纹理电影制作CGI视觉效果微缩模型UV映射

04-18 16:42

UnrealSynth虚幻合成数据生成器-NSDT

UnrealSynth虚幻合成数据生成器-NSDTUnrealSynth基于UE5虚幻引擎开发，可用于生成合成数据集，包括图像和标注数据。可用于各种行业细分场景中目标识别任务的实施效率提高。UnrealSynth合成数据工具包内容UnrealSynth基于UE5虚幻引擎开发，目前支持YOLO系列模型

分类标签 UnrealSynth虚幻引擎数据合成YOLO模型深度学习训练数据

04-18 16:42

人工智能与音乐：谷歌的Project Magenta

谷歌的Project Magenta利用人工智能技术生成音乐和其他艺术形式，如素描、视频和笑话。该项目的目标是为人们创造新的交流方式。本文介绍了该项目的背景、发展历程和应用。在上世纪90年代中期，谷歌研究院的Douglas Eck就开始了他的人生目标：融合人工智能与音乐。二十年后，他与一支谷歌研究团

分类标签人工智能音乐谷歌

04-18 16:42

如何做好SEO优化？

如何做好SEO优化？想要做好SEO优化，得从站内优化和站外优化两个方面入手。一、站内优化1.关键词定位和分析关键词整理是SEO优化中的核心工作，一旦定下来就不建议再次去更改。站长始终要记住关键词一定要和行业、产品、领域息息相关，同时还可以参考竞争对手所做的关键词，可以利用站长工具、5118、爱站网、

分类标签 SEO优化关键词定位网站架构布局

12-11 08:19

万兴科技：营收实现稳健增长，拥抱AIGC新机遇

万兴科技：营收实现稳健增长，拥抱AIGC新机遇国元证券股份有限公司耿军军近期对万兴科技进行研究并发布了研究报告《2022年年度报告点评：营收实现稳健增长，拥抱AIGC新机遇》，本报告对万兴科技给出买入评级，当前股价为75.24元。万兴科技(300624)事件：公司于2023年4月7日收盘后发布《20

分类标签万兴科技营收增长AIGC

12-11 02:11

AI分身市场潜力巨大，万兴科技、京东等已率先布局

“AI孙燕姿”和“CarynAI”引爆市场最近，“AI孙燕姿”和“CarynAI”以以假乱真的程度引爆市场，都是通过采集本人的语音、文字、图像等素材，并通过开源的生成式训练模型进行训练而成。其中，“CarynAI”成功地借助AI技术，打造了自己的AI分身，通过付费的方式，跟AI版的自己进行交往，预计

分类标签 AI孙燕姿CarynAIAI分身AIGC技术虚拟主播数字人

12-11 02:10

万兴科技推出名师必备讲演神器“万兴智演”

万兴科技推出名师必备讲演神器“万兴智演”9月8日，万兴科技面向泛知识领域，推出名师必备讲演神器“万兴智演”。该款AI演示新品集成强大的AIGC能力、精美的行业课程模板以及动画特效素材，大大简化课件制作过程。同时，产品内置强大的录制、直播功能，通过真人实拍与演示内容相结合的形式，实现人景融合的实时演示

分类标签万兴科技万兴智演AI演示

12-11 02:09

万兴科技创始人吴太兵在2023互联网岳麓峰会上的主题演讲

万兴科技创始人吴太兵在2023互联网岳麓峰会上的主题演讲2023互联网岳麓峰会论坛上，万兴科技创始人、董事长兼总裁吴太兵进行主题演讲。红网时刻新闻记者郭雅倩甘红长沙报道十届、十年，岳麓峰会从2014年的“湖湘汇”到如今云集万人的盛会，积攒了巨大的关注度和影响力。6月19日，2023互联网岳麓峰会在长

分类标签万兴科技吴太兵岳麓峰会

12-11 02:05

樟宜机场：通过科技改变旅客体验

樟宜机场：通过科技改变旅客体验樟宜机场在智能手机上移动的小红点代表了在机场上空飞行的飞机，通过传感器的追踪获取了相关飞行轨迹。机场通过人工智能、面部识别和数据分析等技术的应用，不断提高机场运营效率，保持创新，致力于成为一个旅客体验更佳、充满活力的目的地。人工智能优化机场运营效率樟宜机场在2017年共

分类标签樟宜机场科技旅客体验

12-10 22:16