数据可视化是利用图形、图表、地图和其他可视化元素来表示数据，它几乎像一种通用语言，因此在UI设计中也被广泛运用。

    今天带大家了解如何在数据仪表板绘制一条完美的曲线，本次教程关键点在于确认折线点的分布以及钢笔工具的熟练度，看完这次分享，相信你也能快速拿下。

—————————————————————————

01 建立网格

新建画板，在编辑页的右侧属性栏中建立网格，设置参数，辅助我们绘制等距离的折线点。不建议大家把列的数值设置过大，否则点与点之间的间距太小，容易造成急促感。

画板：尺寸857*477；         填充背景#000000

网格：栅格；         数量：7列；         颜色：#ff0000；      

透明度：20%；      间距：20px；       边距：20px

02 绘制折线

使用钢笔工具在每条黑色背景中创建一个锚点，点与点之间连成一条折线，按Enter键完成绘制。

03 调整折线

    选中折线，按Enter键出现锚点后，鼠标快速双击每个锚点（除第一个和最后一个），稍微调整杠杆，使得线条变圆润平滑。随后设置曲线参数。为了让曲线更加生动，图中在第一个点和第二个点中间新建了一个锚点，大家可以看自己想法加或不加哦~

曲线边框：宽度8；    填充色#00A6B5；      更多设置：居中；      圆帽；圆角连接

04 填充渐变色

复制曲线图层，使用钢笔工具向下创建锚点，形成一个闭合路径，按Enter键变成矢量图形后即可设置填充渐变。为确认符合画面的渐变效果，在绘制完理想的曲线点之后，可以点击画板将网格隐藏。

填充：线性渐变#00A6B5→#426A6E（不透明度0%）

05 添加装饰

使用圆形工具和直线工具在曲线的最高点和最低点处添加小圆点和虚线（不透明度较低），使曲线图变得更高级。

小圆点：尺寸16*16；      背景填充：#FFFFFF；      边框填充：#40BCC8；       宽度：2.5

虚线：高477；     背景填充：#214B4F（不透明度62%）；     宽度：1；     虚线：5；     间隔：10

06 添加文字

添加一些文字让画面显得丰满，文字注意排布整齐。最后将画布向左右两边扩展20-30px就大功告成啦。

—————————————————————————

    本次教程的分享到此结束啦，大家有没有发现，只要掌握关键点加上细心，其实也没有那么难，那你也快快动起手来吧~关注空空，我会在这里持续分享UI设计干货。

Powered by Froala Editor