仍然担心如何构建Web端布局框架？来这里寻找方法，CDX魔方团队成员用血与泪经验告诉你答案。

　前言

对于托管多个子产品的网站，单一的布局形式并不完全适用，因此我们需要从各个方面理解相关的布局框架理论。这有利于我们定义Web界面的复杂结构，实现一致性，标准化，可扩展性和快速迭代。

整篇文章分为两部分：

了解布局框架元素。

项目降水：Didi Rubik的Cube网站布局框架的构建和实施。

　布局框架要素

　　1. 布局框架在设计中的重要性

谈到数字媒体的布局，我们需要以和谐有序的方式组织一些看似无关的元素，这是非常具有挑战性的。

对于设计师，掌握感知元素的格式塔理论，视觉元素的组织和结构，以及感官元素的层次和顺序，并将这些方法应用于布局设计的每个部分，以创建真实的布局。产品。基础。

布局框架有助于我们正确地考虑产品的重点，合理地传达有效的信息，而不是情感创造性的视觉表达。

布局框架确保了高质量的产品和良好的用户体验，方便用户识别和使用界面。

布局框架是产品的骨架和基础。确定框架后，设计师可以进行下一步施工 - ——统一的视觉元素，清晰的功能操作，特定过程的交互等。

　2. 布局框架的设计原则

在了解了布局框架设计的重要性之后，让我们了解布局框架的设计原则，它们是统一的，逻辑的，可扩展的，可预测的。

团结——确保产品结构在结构和视觉上保持一致，为用户提供高水平的舒适性。

逻辑——视觉结构中的各种类别具有逻辑结构，并且结构紧密相连且畅通无阻。

可扩展性——无论产品功能是简单还是复杂，布局框架都可以随着产品需求的变化扩展和扩展布局结构。

可预测性——选择可预测且可识别的布局并连接到体验的每个环境并在适当的时候指导用户。

　　3. Web端的基础模块和分层逻辑

在我们进行布局框架设计之前，让我们熟悉与Web界面相关的基本模块和分层逻辑。

　基础模块

根据模块自身的属性和功能定义。共有九种常见类型的模块，即顶部导航模块，左侧导航模块，标题模块，页脚模块，主内容模块，左侧内容模块，右侧内容模块，抽屉模块和弹出模块。

　分层逻辑

基础层是常见的功能底层，这是提供稳定性和可预测性的基本级别，包括顶部导航模块和左侧导航模块。

内容层可以分为公共显示层，具体为主内容模块，左内容模块和右内容模块等。

叠加层是动态显示的顶层，始终叠加在基础层和内容层上。它是一个链接上下体验过程的模块，特别是抽屉模块和弹出窗口浮动层模块。

　　4. 常用的基础布局与扩展布局

本文主要梳理基本层和内容层相关模块的布局框架。在查看相关文章和书籍后，我们总结了网络上的三种基本布局和五种扩展布局。

　上下布局

此布局通常在Web首页上使用，上部是导航或标题模块，下部是主要内容模块。简洁明了，干扰少。根据屏幕和设备的不同，内容模块可以设计为在整个页面上具有固定宽度或两个可视布局。

IBM Design主页使用向上和向下布局。黑白视觉系统的顶部导航和大型主要内容模块显示使页面设计清新，具有强烈的视觉表现力。 IBM设计人员还使用响应式设计来控制屏幕分辨率断点，以便官方网站可以通过在任何设备下浏览来获得最佳用户体验。

　左右布局

左右布局经常出现在欧美国家的设计网站上，视觉冲击力很强。

Atlassian Design采用左右布局。页面左侧是全局侧导航模块，其他部分是主要内容模块。从交互式体验和色彩匹配的视觉体验来看，Atlassian的整体布局结构清晰有序。用户可以浏览从左到右的视觉顺序并快速了解内容。精美的插图使网站充满吸引力。

　「T」型布局

“T”布局是Web上使用最广泛的布局方法之一。它的布局效果类似于英文字母“T”。优点是页面结构清晰，主要和次要是不同的。缺点是规则很严格。如果你不注意合理使用视觉元素和颜色细节，很容易让人看起来“不乏味”。

Ant Design是一个基于工具的网站，由Ali Ant Financial Design团队创建，用于设计支付宝产品的语言，代码工具等。 Ant Design使用此布局作为基础层。顶级全局导航接管所有子库条目的功能。内容区域分为两部分：左侧边栏模块和主内容模块。这种框架布局可以满足人们的“F型浏览习惯可以解决信息水平过高的问题。”

　「C」型布局1&2

“C”布局是“T”布局的扩展，并且添加的页脚模块可以设置为基本内容区域或功能操作区域。根据基本模块，它可以分为两种类型的“C”型结构。

Audi.com是奥迪集团多年设计工作的门户网站。在整体布局框架中，左侧导航模块定义为基础层，页面右侧分为三个内容层模块，即标题模块（即页面标题栏），主要内容模块和页脚模块。设计风格时尚，色彩和图形元素的和谐使页面布局拼凑而成。在互动体验方面，让用户真正做到“不要让我思考”。

　「口」型布局

这是一个象形文字。页面顶部是基础层的导航模块。中间是左，中，右内容层模块，底部是一个页脚嵌套。这种布局的优点是它充分利用布局功能来传递最多的信息和功能。缺点是页面拥挤且不够灵活。

作为业内知名的互联网公司，微软的官方网站承载着各种子项目，如产品应用，设计和开发。内容的复杂性使得微软的设计师在构建本网站时会考虑“口”布局。

　综合型布局1&2

集成布局是一个通用术语。原则是遵循分层逻辑，并在九个基本模块中自由组合和嵌套。这是一个复杂的布局，在简单的布局基础上叠加了更多的模块。不同之处在于布局模块的数量和模块的具体位置。我们定义了一个综合布局1，右侧内容面板比复合布局多2个。在此布局中，最重要的基础层通常是左侧导航模块。集成布局1和2可以根据网站本身的产品规划和功能定义删除诸如正确的内容模块和页脚的内容层模块。

以上是九种最常用的默认布局。通过组合和嵌套基本模块和分层逻辑，您可以总结更多Web端布局框架并将其置于项目中。

　魔方网站布局的构建与实现

　　1. 项目背景

Rubik's Cube是由CDX创意设计中心发起的设计工具平台。项目初步规划的子产品涉及设计方面和开发方面，包括不同尺寸和不同类别的产品，如设计资源库，设计工具，设计板和组件代码。作为最重要的多功能和多信息载体，项目启动后，首先需要考虑的是合理的布局框架，为高效准确的表达和未来的顺畅体验奠定基础。

　2. 项目分析与布局定义

在Rubik's Cube项目的早期阶段，进行了以下方向的分析和研究。

同类产品分析

当Rubik's Cube仍然只是一个纸质信息框架时，我们分析了同类主要网站，整理了相应布局框架的特点，优缺点，并在本文前半部分得到了理论结果。 。

　魔方产品分析

新孵化的产品将经历从黑暗到明亮的过程，从0到1，而Rubik的立方体也不例外。当初始产品形式不明确时，我们进行了多方位的自我分析。

第一步是考虑魔方的位置，产品模型，设计目标，以及目标用户如何理解魔方并使用魔方。

第二步定义每个子产品的项目目标，并分析信息内容和相应的功能要求。

第三步是以组件设计的方式对基本功能进行分类，反汇编，分类和重组。

　　魔方布局的确定与总结

最后，我们将嵌套设计方法与基本模块和分层逻辑相结合，以满足多维数据集的布局数量和布局复杂性。我们将可重用的功能模块统一到基础层中。例如，全局第一级导航模块是用于承载所有子产品页面的门户。需要单独定义的功能模块分为子产品的特殊功能，并逐个集成到相应的布局模块中，例如，规范库中的电梯分为单独的右内容模块。

Rubik的立方体网站使用上下布局，“T”布局和“嘴”布局。

魔方布局的构成原则

在获得这些结果后，我们回到基本布局框架设计并总结以下原则：

组织原则——根据产品特征分解功能点，然后将它们重新组合成组。

隐藏原则——突出显示布局中的主要焦点信息并隐藏辅助辅助信息。

接近原则——将相邻元素分类为模式或整体。

熟悉&害羞;害羞;原则——根据熟悉的认知将复杂对象简化为常规图形。

　3. 视觉风格探索与总结

　　视觉风格探索

Rubik的视觉风格和布局框架同时进行了探索。在这个过程中，我们考虑整体布局是否能满足Rubik的子产品，并考虑如何设计和呈现视觉元素。从最基本的品牌颜色定义，组件元素风格，到设计细节中字体的大小，空间布局中按钮的比例合理得到抛光和调整，最后细化成最和谐统一的视觉效果解。

　　魔方视觉的设计原则

经过多轮草稿输出和视觉审查后，Rubik's Cube的最终视觉风格是根据布局框架确定的。其中，我们总结了魔方网站的设计原则：

视觉平衡——页面信息元素的位置和分布需要和谐稳定的平衡。

空间舒适度 - mdash; —整个页面的白色空间应该是统一的，视觉感知需要舒适和亲和力。

统一尺寸——页面的不同版本应该统一，不同组件的大小应该相同。

比例和谐——信息要素的比例应适当，突出重点信息，弱化辅助信息。

色彩感知——品牌颜色三原色与Drip Travel拥有最强的品牌联系和视觉感知，色彩比例应均匀。

错位——事物的布局是不均匀的，但它非常有趣，让人看起来很好。

　4. 布局框架的运用及落地

从2017年4月底到现在，Rubik's Cube已经完成了平台构建的第一阶段，并在Drip资源库，设计工具SCO主页和建筑代码中启动了库和规范库。

　魔方上下布局的运用

在全世界范围内，Rubik's Cube采用布局方案。 1级导航是页面中最重的组件。酷炫强大的黑色品牌增强了页面的视觉焦点。舒适的导航高度产生自然的视觉感受。这种全球导航水平可以帮助用户快速轻松地访问相应的产品页面。

在Rubik的多维数据集库列表页面中，二级和三级导航作为完整的顶部导航模块连接到第一级全局导航。在视觉表现方面，我们通过颜色对比度，距离和阴影高度在模块之间建立了“深度”层次关系。白色导航模块位于顶部，内容模块位于较低级别。合理的顶部模块阴影用作增强页面高度的基本细节，这允许导航模块与内容模块分离而不会造成钝的距离感。

　魔方「口」型布局的运用

“嘴”布局用于Rubik的Cube规范库。为了方便用户阅读与Drip Travel在线相关的设计语言和规范，我们从交互的角度建立了几个大型功能模块，如左侧导航模块，帮助用户过滤相应的规范子页面。正确的内容模块带有快速电梯导航。底部还有一个页脚模块，计划是上下页跳转功能按钮区域。这种清晰的视觉层次结构和功能结构使用户能够更快，更快地获取信息。

在视觉层面上，在满足产品功能性和可用性的前提下，信息元素的比例不完整，大多数子页面与易于生存的品牌橙子形成对比，创造了一个简单的和蔼可亲的视觉美感。

　　总结

由于高层建筑是平的，回顾性项目就像建造一座摩天大楼。首先，在构建基础框架之后，它将向下一层添加砖块和瓷砖。最后，建筑可以高大，稳定，美观。

在经历了上述知识和实践后，我们充分了解布局框架元素的特点，将理论应用于实际项目，提供最佳的魔方设计，并将布局框架理论应用于其他屏幕产品。 。

在本文中仍有许多值得仔细研究和研究的地方。我只能想到我学到的东西。我希望我能与你沟通和学习。

« 如何在网站底部执行seo优化？ | 如何开通网站短信功能 »