web前端页面有哪三层构成,分别是什么?作用是什么?
作为一个Web前端开发者，我认为Web前端页面主要由三层构成，分别是结构层、表现层和交互层。接下来我将详细介绍每一层的作用和重要性。结构层：构成：html作用：结构层是Web前端页面最基础的一层，主要负责页面的内容结构和语义化。它通过使用HTML标签来组织内容，使得网页具有良好的可读性和Seo优化（搜索引擎优化）。
网页设计的核心理念是将网页分割为三个关键层级：结构层、样式层和行为层，以确保网页在视觉呈现与功能性上的协调一致。在网页设计中，HTML扮演着结构层的角色，它构成了网页的基础框架，负责展示网页的内容结构。
首先是结构层，它由HTML构建，是网页内容的基础。就像房屋的框架为整个建筑奠定基础一样，HTML为网页搭建了一个稳固的基础，使得设计师可以在其上构建更加丰富的用户体验。结构层专注于内容本身，包括文本、图像和链接，这些都是用户浏览网页时能看到的东西。
行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。在web前端页面中HTML属于结构层，负责描绘出内容的结构，CSS属于表示层，负责“如何显示有关内容”，JavaScript属于行为层，负责“内容应如何对事件做出反应，这是javascript语言和DOM主宰的领域。”。IT培训选择千锋教育。
如何理解版式设计中的文字层级关系
1、版式设计中的文字层级关系是指通过一系列设计手法明确信息的重要程度，确保信息在视觉上有序，提升美感和阅读效率。具体理解如下：目的与重要性：明确信息重要程度：层级关系的存在是为了区分信息的主次，使读者能够快速抓住重点。避免版面视觉混乱：合理的层级关系可以使版面更加清晰、有序，避免视觉上的混乱。
2、版式设计中的文字层级关系至关重要，它确保信息在视觉上有序，提升美感和阅读效率。理解并正确安排层级关系是设计成功的关键。首先，层级关系的存在是为了明确信息的重要程度，避免版面视觉混乱。例如，画册中的图片、标题、小标题等元素需要有明确的主次之分。缺乏层级，版面会显得单调，降低阅读体验。
3、首先我们来看一下第一个案例。第一个案例我们将用字号对比来进行划分文本的层级关系，那么首先第一步，我们需要将文本全部排成等大等粗。即字号一致，字重保持一致。如下图，这个是我分类好的信息，使用的是思源黑体，中英文未做匹配。那么接下来我们要解决四个问题。
4、合理间距：合理的字间距和行间距能够提升名片的可读性。过密的文字会显得拥挤，而过疏的文字则可能显得分散。对齐方式：名片中的文字、图像等元素应对齐整齐，以保持整体的平衡和美感。层级关系 信息层级：通过字号、颜色、粗细等方式来区分信息的重要性。
5、在确定骨骼栏时，竖栏以宽度一致的排列方式，控制文字数量，构成版面的基本结构。横栏则决定了版面中文字横向关系的主要联系。通过灵活划分横栏大小，可以实现标题文字的活泼布局，同时保持与其他分栏的层级关系。标题的处理在设计中至关重要，它不仅影响版面的整体条理性，还关系到文字信息的快速识别。
6、版式设计作为平面设计的一个重要方向，专注于版面布局和信息结构的优化，旨在通过合理安排文字、图片与图形，提升视觉传达效果。版面设计强调的是整体布局与视觉平衡，追求内容与形式的和谐统一。
同级页面是什么意思
同级页面是指在同一个层级或分类下的页面。以下是关于同级页面的详细解释：层级关系：在网站结构或信息组织中，页面通常按照层级进行分类和管理。同级页面指的是处于同一层级或分类下的页面，它们之间具有相似的地位或功能。并列关系：同级页面之间通常是并列的，没有明确的上下级关系。用户可以在这些页面之间自由切换，而不会受到层级结构的限制。
添加同级页面：选中一个页面，再点击页面列表顶部的「添加新页面」，便可以新建该页面的同级页面。添加子级页面：鼠标悬浮某页面上，点击「...」展开更多按钮，单击「添加子页面」即可为该页面添加子级页面。目前最多支持创建7级页面。
底部标签导航：最常用的导航形式，位于页面底端，采用文字加图标的方式展现。适合在相关的几类核心信息中间频繁切换使用，用户可以通过标签式引导迅速实现页面之间的切换且不会迷失方向。顶部标签导航：适用于内容分类较多，且用户对不同内容的打开率相差不大时。常见于工具类app，如滴滴打车。
底部标签导航 特点：底部标签导航位于屏幕底部，方便用户快速切换不同功能或页面。它分为层级导航和扁平导航两种形式。层级导航：用户进入某个tab后，若在该tab内点击其他入口进入二级页，底部导航栏会消失，提供沉浸式的体验。但用户若要去往另一个tab页面，需一步步返回或重新选择。
跳出率高，用户体验度不好，这方面已经加入到百度算法里排名因素里了。所以淘宝客论坛站长Sirius建议，两个要结合使用。对于页面的打开方式，Sirius一般的做法是，首页打开栏目或者频道采用当前页面；打开详情页采用新页面打开；栏目页或者频道页打开首页或者同级页面采用当前窗口，打开详情页面采用新窗口。
提升页面层级：如果需要将某个子页面提升为同级页面或更高层级的页面，可以选中该页面（例如Page 4），鼠标右键点击，选择“Move”-“Outdent”。这样，Page 4就会移动到其父节点的上一级或更高层级。 完成页面操作 通过上述的上下移动和层级关系调整，可以灵活地组织和管理页面原型。
如何快速划分UI设计层级
技术层，技术层要到的水平就在UI设计中所看到的网页界面，图标，这些都要能独立绘制出来。思维层，要到达的水平水平是随便找一个APP出来，都要知道里面的版式为什么要这么布局，颜色为什么这么搭配，设计规范为什么要这样用。作品层，水平是原创，只有足够优秀的原创作品才能找到一份工作。技术层考验一个设计师的是软件水平；思维层考验得是理论水平，作品层是设计水平。
层级划分：层级1：主舞台，如主界面与关卡界面，是用户最先接触到的界面，层级值设定为1，起到引导用户的作用。层级2及以上：随着用户深入探索，如关卡内的战斗界面、信息弹窗等，层级值逐渐增加，通常以5的增量来体现界面深度的变化。
层级1：主舞台 主界面与关卡界面，是UI的起始点，它们的层级值被设定为1，犹如舞台的中心，引导着用户的第一步探索。其他界面则在此基础上增值，如同层层推进的剧情。层级2：深度探索 关卡界面作为核心，它的层级提升至2，标志着从主界面的过渡。
手机UI设计的基本知识主要包括以下几点：界面层级结构：手机界面通常包含多个层级，从待机界面开始，逐步深入到主菜单、二级菜单，甚至三级菜单。每个层级都有其特定的功能和信息展示，确保用户能够轻松导航和查找所需内容。界面内容构成：图标与文字：是界面中最直观的元素，用于表示功能或信息。
手机UI设计规范主要包括以下几个方面： 界面层级结构 手机界面层级主要分为待机界面、主菜单、二级菜单和三级菜单。 每一层级应有明确的导航和返回路径，确保用户能够轻松地在不同界面间切换。 界面元素设计 图标：图标应简洁明了，具有高度的识别性，符合用户直觉。
UI设计工作的整个工作流程，大致分为三个部分：需求分析-设计执行-数据分析。
板式设计之主体与层级
1、系统的学习后，对于色彩理论、版式原理、三大构成等设计基础理论，能做到了然于胸，让软件操作也不再是你的短板。
2、编排方式：设计主体元素独立且轮廓分明地占据版面中心。视觉元素向版面中心聚拢。视觉元素以向外扩散的弧线形式运动。垂直型排版（理性严谨）技巧说明：垂直型排版将图片与文字按照比例在垂直方向进行编排，给人稳定、平静的感受，同时带有律动感。
3、突出重点 恰当的对比可以很好的制造出焦点（画面主体），在版式编排中，有效利用视觉差异，通过构成要素之间的对比，把读者的注意力吸引到画面的主体部分上来，提高版面的注目效果，是版式设计的重中之重。利用鲜明的对比，可以形成强有力的反差效果，能第一时间让读者捕捉到主体和重点。
