Recently received a demand for the company's need to save face competition platform / school / competition, then visualize data show large-screen, spare time on their recent work some conclusions;
A data visualization is defined
Data visualization is mainly research on scientific and technical data _ visual manifestations - Baidu Encyclopedia
Attribute classification, data for display on a variation of a support process using popular explanation is described by means of charts, images, video, etc. of the original visual exists in the database is called data visualization;
example:
II. Some key steps for data visualization
1. clear demand, and demand-side clear business scene
During the first receipt of visualization needs data, we must be clear is what to visualize and who is the object of our show is; give an actual example, MOOC platforms university data before we visualization, in the end it is to show the progress of teaching visualization is a summary of the curriculum visualization, we show objects are Department of Education Office of Academic Affairs or just our internal data monitoring platform for different display objects often determines the different information that we focus on the big screen to show the design???;
2. dimensional visual confirmation data, must be added to the development of
In a clear business scenario, we then need to be dimension to start thinking about visual display, and here I recommend dimensions comb with xmind, we must and developing exchanges confirmed comb, because all of our dimensional data sources from development database query, if the statistical changes and growth simply can not be certain dimension technology at this stage, we need a certain degree of adjustment in the design;
3. Determine the dimensions of the carrier and a carrier of specific
Confirmation of completion of basic dimensions, the carrier is required to determine the big screen, in fact, largely determines the resolution and aspect ratio when the big screen display, because the general need to have a specific display large screen display, if it is a custom display, we you need to avoid in the planning phase out due to the resolution, the aspect ratio of the image display incomplete even in exceptional circumstances we need multiple sets of resolution UI design to fit different displays.;
4. FIG prototype designed according to the dimensions, the selected visual control
在进行可视化控件的时候比较依赖个人审美和技术能力;可视化控件有很多,现在很多前端比较懒,只知道用轮子,连改造轮子都不愿意,不知道是懒还是不会.所以产品在设计时,如果为了更高效率的出图,使用技术人员常用的EChart进行控件描绘;或者使用成熟的商业模板进行,这里推荐百度数据可视化 Suga,方便又实用,基本上满足百分之九十以上的需求;
在进行原型图设计时,我们要遵从一些设计原则,就是最重要的模块一定要放在最显眼的位置,并且通过页面模块之间的关联让整个屏幕层次分明;如果你不太擅长这些,可以用文字标记出哪些是最要,哪些是次要,排版就交给设计师吧,让专业的人做专业的事;
5.进行UI配色动效确认-设计师
接下来就是针对大屏进行模块配色和区域调整,达到视觉最佳,重点突出,层次分明,在某些展示模块,如果公司技术人员有实力的话,可以进行动效展示,没实力当我没说;
6.开发后进行实际展示微调
任何产品开发后一定需要进行调试,有条件的话最好实用实际的载体进行调试,因为不到最后一步,开发在自己的电脑上模拟永远会有小瑕疵
7.交付确认
三.注意事项
1.以用户为中心设计
我们千万不能想当然的进行业务场景的模拟,一定要让终端用户参与进来,在原型图出来后,一定要和需求提出方进行交流确认;做好交互和展示设计;
2.选择正确数据进行展示;
同一套系统中,我们衡量某一指标的变化和统计一定要明确,不要出现可视化一套数据,后台系统一套数据;
设计师方面我这里推荐一个好文链接 他讲的更多是细节确认,比如设计图要切几倍率,设计师如何排版;文章链接如下:[http://www.woshipm.com/pd/1782868.html]