仪表板设计小技巧

收藏

本帖最后由 Felix.Li 于 2024-9-6 14:16 编辑

相信大家在设计仪表板的时候，经常因为妥妥拽拽不好选择，不好看地方，有时候觉得设计很麻烦，其实不是，有可能是因为您没有掌握好设计技巧，今天给大家分享一些设计时候的小技巧，让你看板设计更加简单。

1.熟悉运用组件层级
相信大家经常遇到，设计仪表板，当很多东西重叠，特别是某一个地方，因为要组合设计，所以堆积了3.4个组件，在带上图片，就更难选择了，有些人就麻烦的将组件一个一个挪开，然后修改，在移回去。或者辛苦的右键，一个一个选择，其实不需要这么麻烦的，有个导航栏可以快速帮助你:组件层级

image.png310975951.png

首先我们做一块东西肯定都是一起放置的，而组件层级里面的所有组件，就是按照防止的时间来出现的，先放置在仪表板上的，先出现，后放置的后出现，所以我们只要先点一下我们当前这块需要的组件，然后在左侧组件层级中找到高亮的，就可以选择到当前组件附近一起放置的其他组件了。这样就可以快速的选择到我们的组件了，而且这里的命名也不是凭空出来的，他是和组件的这个属性一样的
image.png529804381.png

我们在配合上命名，就可以做到快速寻找啦。而且左侧组件层级按住Ctrl也可以多选偶，不用在麻烦的在仪表板上多选啦。

2.属性一键配置
我们在做仪表板的时候，是不是经常发现组件的默认属性其实并不是我们想要的，每次拖出来一个组件，就得改背景，改字体，其实完全不用这么麻烦，组件的公共样式，其实有一部分可以在全局设置改变的，全局设置改了后，所有的组件默认样式就会被改变啦:

image.png772168273.png

而且在外观和提示标签里面，也可以设置一些属性，包括字体的默认设置。包括提示标签的背景。
image.png325024718.png

是不是一堆小伙伴一直以为提示标签只能是黑白的。
其次呢，我们也可以多选组件，然后快速设置组件的公共属性，包括按住 Ctrl多选组件，或者上一步配合组件层级。多选，然后修改属性
image.png299434813.png

3.组件快速布局：
当我门做类似标题，文本等多个需要等分布局的时候，经常需要去看他的X，然后每个在一个一个拖动，有自动对齐还好，有时候因为组合等，自动对齐还没有，就得一点一点凭感觉弄，还得算位置，是不是觉得很麻烦，其实完全没有必要，比如我要好看的显示如下这些文本:
image.png689869689.png

其实只需要这样，首先，把一个的高度确认好，放在在我们需要的高度,然后直接点击顶端对齐:
image.png800960693.png

之后确认最左边和最后边，然后直接点击水平平均分布:
image.png37583922.png

杂乱无章的文本框一下子变得井然有序了。

4.组件替换
我们是否也经常遇到做了一个组件，但是因为不满意或者其他原因，导致要替换组件，替换的时候，就得把新的组件大小设置成一样，还要位置记录，在完全替换，仙其实啊有更简单的方法，只需要按两下即可完成。
首先呢是组件大小同步，仪表板有这个功能，不知道大家有没有注意过：
image.png228707579.png

使用方法呢也很简单，按住Ctrl 多选，最后一个选中要成的大小就可以，然后选择等大小，大小就立即同步，然后在点击互换位置
image.png641046447.png

则可以快速实现组件替换。

		自动登录	找回密码
密码			立即注册

[仪表板] 仪表板设计小技巧

0 个回复

Wyn高级认证

Wyn认证