网页框架布局设计 第1篇
最终我们通过基础模块及分层逻辑相互组合嵌套的设计方法，使魔方布局数量和布局复杂程度被满足。我们将可复用的功能模块统一成基础层，如全局一级导航模块是为承载了所有子产品页面的入口。而需要单独定义的功能模块被划分成子产品的特殊功能，并一一整合到对应的布局模块中，如规范库中的电梯划分成单独的右内容模块。
魔方网站采用了上下布局、「T」型布局及「口」型布局。
网页框架布局设计 第2篇
纵观全局，魔方采用上下布局方案。一级导航为页面中信息层级最重的组成部分，用色冷静而有力的品牌黑加强了页面的视觉重心，舒适的导航高度产生自然的视觉方向感，如此的全局一级导航能够帮助用户更便捷快速地抵达相应的子产品页面。
在魔方图库列表页中，二、三级导航相连一级全局导航为完整的顶部导航模块。在视觉表现方面，我们通过颜色的对比、阴影的距离与高度让模块之间具有「深度」的层次关系。白色的导航模块在顶部，而内容模块是在更低的层级，合理的顶部模块阴影作为必不可少的细节元素提升了页面高度，这样能让导航模块与内容模块分离出来但又不会造成生硬的距离感。
网页框架布局设计 第3篇
「C」型布局是在「T」型布局上的扩展，增加的页脚模块可设置成基础内容区域或功能操作区。根据基础模块的不同，可分为两种「C」型结构。
是奥迪集团多年设计成果展示的Web端入口。在整体布局框架中，左侧栏导航模块被定义成基础层，页面右边被分为三块内容层模块，分别为页眉模块（也就是页面标题栏）、主内容模块及页脚模块。设计风格时尚大气，色彩、图形元素的和谐搭配使得页面布局错落有致。在交互操作体验方面，让用户做到真正的「don’t make me think」。
网页框架布局设计 第4篇
「T」型布局是Web端运用最广泛的布局方式之一，因布局效果酷似英文字母「T」而得名。优点是页面结构清晰，主次分明。缺点是规矩呆板，如果不注意视觉元素的合理运用及色彩细节，很容易让人「看之无味」。
Ant Design是阿里蚂蚁金服设计团队打造的工具型网站，用来落地支付宝公司旗下产品的设计语言、代码工具等等。Ant Design正是采用了此布局，作为基础层，顶部全局导航承接了所有子库入口的功能，内容区域再划分成左侧边栏模块及主内容模块两部分，此框架布局既能满足人们的「F」型浏览习惯又能解决信息层级过多的问题。
网页框架布局设计 第5篇
================明星栏目推荐================
优优教程网： 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。
设计导航：国内人气最高的设计网址导航，设计师必备：