使用 Element UI 规划页面布局时的思路


布局

  • 24 分栏布局方案：
    特点：页面按行来分割，每行内各个组件高度相等。
  • 容器布局方案：
    特点：页面边栏的布局方式高度灵活。
    从视觉上来看，边栏高度往往超越了主内容区间，甚至整个贯通页面高度。


网站主题风格

能够体现网站风格的元素，颜色可以在 Element 官网上定制，其它内容一般不要改动（请稍微尊重一下 Element 官方的设计师）

  • 颜色
  • 字体
  • 图标
  • 按钮


占位组件

占位组件的作用是结合数据、填充布局，所以它是网站内容填充的主体。

  • 表单类组件
    这里的难点大概是根据场景，选择合适的表单吧。看到 Element UI 后才发现，连 “开关” 这些都能算作表单。
  • 数据驱动类组件
    注意：数据驱动类组件在页面上的占用空间往往是数据量决定的，所以其占用的页面空间有很大的不确定性。因此，数据驱动类组件不宜和其它组件共同占用一行或一个面板组件空间。
  • 导航类组件
  • 面板（卡片）类组件
  • 折叠面板
    由于高度方向的可变性，导致使用场景相对来说较为特殊，在公网 WEB 应用上较为少见。
  • 卡片
  • 多个卡片组合起来，可以用来灵活地分割页面；
  • 也可以把单个卡片的尺寸设置的很大，用来独占某一行或某个组件空间。
  • 跑马灯
    不要想太多，它仅适合用来做展示。
    将其大小设置为宽高 100%、方向改为纵向，以此来切换页面，需要很多额外的代码，而且效果也并不是十分理想。


非占位组件

非占位组件不会影响网页布局，所以在思考网页布局时，可以不考虑这些内容，但是要清晰地认识到使用这些组件所产生的效果。

  • 提示信息
  • 弹出框
    弹出框的内容相较于提示信息而言更为丰富，但表现力并没有那么好。
    例如可以在弹出框中容纳表格、图像，但要考虑表格过大，弹出框容纳不下所出现的滚动条。
  • 对话框
    全屏覆盖类组件，被激活后，当前页面只能使用对话框，而无法使用其它组件。
    与弹出框相同，对话框也可以容纳多种类型的组件，例如表格等。