数据可视化,就是将数据的一些数值、坐标、不同位置间的联系等,通过不同的语言、标记、形状和颜色等元素表现出来,最后让用户通过可视化洞察数据来探索数据背后所隐藏的现象和规律。优秀的UI设计不仅要让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由。本文以常用的折线图和圆环图为例,谈谈在Pixso中如何做数据可视化。
![数据可视化](https://cms.pixso.cn/images/designskills/2022/twoskliis/threeskiils/rhypzsjksh%201.png)
一、如何用Pixso绘制曲线
Step1:新建画板,借助自动布局设置好辅助线,方便我们画出标准的图表(参数可根据自己需求设置)
![新建画板](https://cms.pixso.cn/images/designskills/2022/twoskliis/threeskiils/rhypzsjksh%202.png)
Step2:使用钢笔工具,根据需求,沿着辅助线画一段折线
![绘制折线](https://cms.pixso.cn/images/designskills/2022/twoskliis/threeskiils/rhypzsjksh%203.png)
Step3:切换回移动工具选中折线,将圆角半径调整为40(数值根据需求随意调整)
![调整折线](https://cms.pixso.cn/images/designskills/2022/twoskliis/threeskiils/rhypzsjksh%204.png)
就这样,在Pixso只需简单的几步,一条曲线就绘制好啦!根据自己需求,还可以加上一些修饰线、数字和视觉点等。
![交互UI工具包](https://cms.pixso.cn/images/designskills/2022/twoskliis/threeskiils/rhypzsjksh%205.png)
二、如何用Pixso绘制圆环图
Step1:创建一个圆,拖动锚点制作弧形圆环。根据自己需要,拖动红点处调整扇形比例,拖动绿点处调整圆环内径比。
![曲线设计](https://cms.pixso.cn/images/designskills/2022/twoskliis/threeskiils/rhypzsjksh%206.png)
Step2:填充颜色,还可以加上一些修饰线、数字等。
![绘制弧形圆环](https://cms.pixso.cn/images/designskills/2022/twoskliis/threeskiils/rhypzsjksh%207.png)
数据可视化,可以让数据更加直观,用户短时间便可获取大致信息,非常适合应用于面向追求效率的年轻群体的APP界面。比如下图来自Pixso资源社区的网络云盘APP设计案例就与圆环图的适配度很高。
以上就是今天的分享,对数据可视化感兴趣的小伙伴可以进入Pixso社区资源看看吧!