z轴y轴x轴怎么区分,y轴和x轴z轴什么意思

首页 > 实用技巧 > 作者:YD1662023-05-11 09:20:47

B段设计布局有什么好方法?布局设计有哪些参考规律?这篇文章详细介绍了以XYZ轴为参考轴进行B端设计的方法论,以及一些设计规律,推荐对B端设计和布局设计感兴趣的童鞋阅读。

z轴y轴x轴怎么区分,y轴和x轴z轴什么意思(1)

B端界面的元素众多,视窗范围大,布局设计多种多样,为了简化布局思维,我们通常给界面添加三个方向上的轴-X、Y、Z。X轴指水平方向上的轴线,Y轴指竖直方向上的轴线,以及Z轴指在三维空间中垂直于视窗平面的轴线。

当设计B端界面时,让元素沿着这三个轴进行布局,既能理清我们的设计思路,页面的元素也能展示得更有逻辑。本文围绕这三个轴,来看看在B端界面的三维空间里,都有哪些设计规律。

z轴y轴x轴怎么区分,y轴和x轴z轴什么意思(2)

一、X轴的布局与适应

B端界面在PC视窗下展示,范围更大,如常见的分辨率尺寸有1280×1024、1440×900、1920×1080等,且浏览器还支持动态拖拽改变视窗宽度。所以B端界面在X轴上应该更注重内容的延展和适配,合理利用横向增长的空间。

根据这一特点,在这一部分中,我们分业务场景来探讨都有哪些典型布局,并针对每一种布局给出合适的适配方式。B端典型的业务场景,可大致分为表格、图表、表单、卡片、文字详情五大类页面。

这几类界面在X轴上排列的方式为单栏型、双栏型、多栏型。如果有侧导航,则在页面最左侧增加侧导航即可,内容区的布局不受影响。

1. 单栏型

表格、图表,这类需要较大展示空间的场景,一般一个页面只有一栏,不再在横向空间进行切割。当视窗横向拉伸时,也为了预览更多的内容,表格和图表进行横向拉伸,保持撑满视窗的状态。

z轴y轴x轴怎么区分,y轴和x轴z轴什么意思(3)

z轴y轴x轴怎么区分,y轴和x轴z轴什么意思(4)

首页 12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.