今天AYONG_BDR周练第二期正式跟大家见面啦，本周的主题是城市交通数据可视化大屏，以下作品不分先后，同时附上AYONG给各位同学的批注，本周参加周练人数是第一期的两倍之多，这是大家共同努力的结果。
周练需求：可对文章进行重构，也可进行细微的调整，内容不可删减，但可根据自己的理解增加东西，风格不限。gis地图准备了四张，可随意选用，颜色可调，也可自己选择好看的地图，前提是二维GIS地图。（不要3D城市模型）
AYONG（本人）
主视觉修改：将原本地图页面对比度加强，降低地图对画面的影响，同时将地图文字进行饱和度的降低。加强了路网信息的表现，通过发光以及渐变来表现路网信息，代替原本的红色路网，使之更有科学性。
告警区域通过片区显示的方式，着重表现重点单位的告警状态，比如人民广场附近出现告警信息，就要红色展示，通过聚焦形成画面主视觉。
片区颜色对应路网颜色更有统一性。在整个地图区域，有很多颜色的小点，地图下钻就会显示到各个街道的详细路况信息，对交通大数据有着很强的表现力。
对标题区域进行重新细节塑造，增强标题的细节，通过添加科技感点线面的方式，使标题更加突出。
修改前
修改后
初一
整体风格：是初一选手一贯的风格，我很喜欢，同时地图可以处理一下，地图两边压下去，现在的左右信息受到地图干扰太多。主标题可以处理一下，加点科技感的边框，凸显一下标题，这样感觉会比较好一点。
告警区域：警情可以用红色展示，然后底色透明度高一点，所有的底色色块透明度太低了，可以增加透明度，并且需要将地图两边压下去，暗下去。
左下角柱状图区域颜色和整体不搭，可以用黄色和白色。
主视觉：主视觉中心细节不够，可以再加点路网信息或者其他东西丰富一下，并且弹框内容都分布在两边，视觉不够聚焦。
修改前
修改后
DREAM BOAT
整体风格：蓝色系，画面有些空，细节比较少，但主视觉突出，可以在此基础上继续完善。标题区域：标题区域表现有些不足，左右两边的日期和气象将标题的主要地位给抢走了，应当加强标题的表现，时间和日期只是辅助信息，不需要用太多的精力去强调。
主视觉：此区域可以继续添加一些路网信息（辅助展示，描边小一点，颜色淡一点），来提升整个画面的表信力，同时地图上重大警情信息的提示有些不明显，可以着重提升这块的内容，加强这块信息的表达，对整体效果有着很大的提升。
左右图表：左上角的列表，请注意每一列的间距是否一样（第二列明显小于其他几列），细节决定成败，不可出现基础错误（设计都是像素眼），整体左右图表中规中矩，可以再优化一下。
Echo
整体风格：地图的颜色可以暗一点，适当将地图变暗一点，效果会更强。图标撒点可以再优化优化，撒点比较粗糙，精致一点会更好一点，现阶段的撒点有点灰了。
右上角列表：可以将未解决，解决中，已解决用对应的颜色去表示（就跟图表图例那样）。主标题可以用白色，现在段有点灰，并且不厚重。
主视觉区域：地图重大警情需要用对应的颜色去表示，此处应该用红色，聚焦主视觉。主视觉中心应该加大效果，集中表现主视觉中间区域，使主视觉更突出，这样画面效果会更好。
左上角列表：此处可以都用居中对齐，然后可以将列表图形化，用图形去表示指数数值，这样会更好一点。
indian summer
整体风格：画面完整度很高，页面也很丰富，主视觉突出，不过有一些问题很致命。比例右下角的监控录像区域，很明显不对齐，画面像缺失了一角一样。
标题区域：标题刻画丰富，但是可以将标题区域再左右扩展一下，现在的设计有点占篇幅太小，扩展一下就会很合适。
主视觉：此画面可以将地图提亮点，现页面对比度太高了，看不出地图的其他资源以及细节了，这样是很致命的。重大安全事故告警提示可以做的再明显一点，亮度高一点，会更突出一些。重大安全事故告警弹框的底的透明度可以高一些，减少地图对弹框信息页面的干扰。同时底部托盘区域，有些变形的感觉，需要再去调整设计一下。
左右图表：左上角表现方式很好，将列表增加柱状图形，画面更丰富了。还有就是注意画面对称，右下角的监控录像特别影响视觉，可以调整一下。
LUCKY
标题区域处理太单调了 可以加点修饰的边框什么的。主视觉区域路网可以丰富点，此表现有点弱了，可以多画几条路网信息，然后聚焦主视觉
主视觉这个红色用的不太好，不该用玫瑰红，可以用橘红或者大红，重大警情可以用红色，然后地图可以显示警情报警动态展示。
左上角指数这块表现得很好，通过星星的方式，讲文字图形化，不过需要考虑指数的规则，是否最大为五，再定义星星所占指标。
右下角视频的按钮太大了，可以小一点，那样会比较精致。
TTing
整体风格：很舒服，颜色搭配也很好，不过感觉像是没做完，在做此种类型的可视化页面时，应当注意左右平衡，不可信息全部集中在一边。
标题区域：整个标题区域看起来科技感十足，不过要注意科技感的同时，画面不可太零散，此页面标题区域就有些零散了，尤其是左右两侧，可以以一根主线为主，辅以科技感点线为辅去做细节，这样会更整体一点。
主视觉：路网信息可以增加一点，以此为主视觉，聚焦画面中心，丰富整个画面。同样的做此类型的地图需要讲地图四周压下去，这样边界才不会显得乱。
左右图表：此区域可以大一点，一般图表比例与主视觉的比例在1：3：1，可以在此比例的基础上调整一下，提升一下画面比例，画面就能更上一层楼。
总结：此风格在完善之后，一定是一个特别好的作品，多多加油！
迟暮花开
整体风格：蓝灰色，效果有点不突出，主视觉应该全屏铺满，因为做这种城市交通数据可视化，通屏铺满效果会更好一点，但也可这么做，只是建议。
标题区域：需要增加细节，标题区域有些拥挤，想到用东方明珠去做城市logo，这种想法很好。但是需要给标题增加细节，丰富上半区域的内容，现在画面看着有些空。
主视觉区域，整体地图需要在往下调暗一点，路网信息的描边可以再大一点，这样会使亮的更亮，明显的更明显，视觉效果才会好。地图中间托盘区域可以重新设计一下，这块有些偷懒，并没有进行设计。
左右图表区域表现得非常好，通过仪表盘以及不同颜色来表现指数大小，这样是一个非常好的处理方法，数据可视化就是要将数据进行明确的展示，一目了然，将列表图形化。同时需要注意几个列表的标题用白色文字去显示，现在有点不明显。
囧囧
整体风格：画面丰富，但整体视觉干扰信息太多，路网信息对于整体效果的干预太大，这块可以优化。蓝色主色跟当前画面绿色不搭，可以将天蓝色修改成偏绿的蓝绿色会好很多。同时做这种类型的可视化，可以将主视觉上下左右进行模糊或者变暗处理，这样可以压住画面，四周的路网信息也不会对左右图表造成干扰。
标题区域：标题内容有些太简单了，应该加强对标题区域的处理，多加一点科技感的元素来丰富标题区。
主视觉：路网信息量太杂太多，可以适当降低路网颜色的饱和度和亮度，对路网进行详略得当的处理，有重点处理区域（画面中心），有一笔带过区域（上下左右），同时将地图暗一点，这样画面效果就出来了。同时需要将地图的撒点小一些，这样会更精致，目前来看整体画面有些粗糙了。注意聚焦主画面，尽量围绕画面中心来构建元素。
左右图表区域列表区域文字可以用白色，蓝色在此效果上真的太不明显了，多用亮色，对画面效果会有很大提升。
九
整体风格：拥堵颜色可分为红色黄色绿色，标题框很好看，但是可以再小一点，现在有点大了
左右图表：图层撒点开关可以放在地图中，放此处不太好。右下角监控按钮可以换一个精致一点的，小一点的。左上角列表此处前三可以用颜色去区分一下，左下角柱状图图例此处可以与标题对齐。
主视觉：地图经过处理有2.5d效果，撒点可以通过定位图标的那种样式，放在地图上，会更能表现立体感，画面冲击力更强。重大警情用红色比较好，然后可以给红色路段进行重点展示，做一个波纹扩散的效果等等。
修改前
修改后
老猫
整体风格：单色系，视觉效果好，但是基于商业设计的前提下，客户对此种设计不会买账，客户会要求更多的颜色，以及科技感。
主视觉：主视觉可以多来几条路网信息丰富一下画面，同时可以多来一些撒点来填充主视觉，现设计主视觉的表现上有点单薄，需要在此设计上进行优化。同时可以在主视觉上添加告警信息提示，这样更能使画面丰富，有聚焦点，更能吸引客户。
左右图表：可以在此基础上增加一些颜色，用来区分不同的状态以及不用的指标。
总体而言：猫哥的图很有自己的风格，国外的HUD风格对于单色系有着非常丰富的借鉴效果，猫哥可以试着去借鉴一下HUD风格的特性（多运用点线面，去构造元素）
玲
标题中英文有点拥挤了大小比例不对，可以再缩小一下中英文大小。列表可以展示八个 然后将列表与标题之间的间距把控一下，现在有点顶着上面了。列表跟左侧情况相同，监控记录这块表现得很好，云台这部分设计添加得很好。
警情弹框可以用点红色，主视觉区域建议加点颜色，比如路网可以多一点，复杂一点，这样主视觉冲击会更强。包括撒点，可以用蓝色红色黄色等等。主色的蓝绿色饱和度可以在高点，现在跟地图层级没有拉开，层级拉开效果会更好。
修改前
修改后
毛毛
毛毛大神画面感非常好，不过地图选用不对，不好评价，此水平非常高。。。（记得用二维GIS）。
你就是我的猫
整体风格方面：颜色很高级的黑白灰，很好看，只不过地图有些暗了不是很能看清，理解主题为城市交通，应当将城市着重展示会比较好一点。
主标题区域可以适当的再加一些装饰性元素，以及左右两边的翅膀可以缩小一些，占当前2/3区域即可。
撒点图标重大警情时可以运用一些红色的元素去形容以及展示，这样更贴合告警主题。两边区域内容如果可以再多点点缀色去点缀就非常好了，比如橘色可以显示拥堵，可以代指正在解决。
主视觉中路网信息可以细心描绘一下，毕竟这块很能体现整个画面的好坏，一般我们看到的案例，路网线都是平滑的曲线，不会这么棱角分明，希望修改的时候可以注意一下。
倩影
整体风格：颜色这块饱和度有点过高，建议一些正文文字用白色（比如左右两边的列表，默认文字用白色，hover可以用主色）。
主标题区域时间以及天气模块可以往两边拓展一下，延申标题的长度，现页面左右两边有点空。主视觉区域，现比例下撒点有些偏小了，调大一点，然后告警区域可以处理的再精致一点，增加一点透明度效果，会使画面融合的更好一点。
整体画面的比例有点失衡，左右两边的图表所占区域太大，可以调整一下两边图表信息的宽度，调整好整体的比例。右上角三个按钮，其实是撒点图层开关，可以与主视觉下方的托托盘联系起来。在做一个页面时，需要对整体需求进行思考，思考每一个布局是否合理，希望好好调整一下画面比例大小，这很重要！
文阁
整体风格：样式颜色比较高级，但是整体感觉有点偏灰，可以加深一下地图，这样效果会更加好一点。
标题区域：标题可以再丰富一点加点装饰性的点线，这样会丰富画面，标题也更有看点。
主视觉区域可以将路网信息多描绘一点，有助于提高整体画面感觉，现页面主视觉处理效果太毛糙，不够出彩。同时需要将主视觉聚焦于画面中心位置，所以需要在画面中间添加醒目的告警提醒，更能提高页面的复杂程度，效果也会更好。重大警情信息应该用红色来代替现有的黄色，整体页面与原页面变化不大，做设计改版时，不仅是视觉层面的提升，也不仅仅是画面效果的还原，可以在产品逻辑正确的前提下，适当美化，以及适当调整画面，运用不同的表现手法去提升视觉，这才是设计的魅力。应该将地图主视觉托盘区域重新设计一下，精致一点，现设计与原设计并无明显变化。
左右两侧图表可以适当的优化一下，左上角图表郑家选中态，或者给前三名赋予不同的颜色来提升画面，也可考虑用图形去替代列表。柱状图可以适当加宽一点，也会更自然一点。
志斌
做交通可视化这块的时候一般会全屏显示，然后凸显主视觉，所以做开放式的设计会比较好，大边框可以去掉。标题可以大一些，添加点科技边框什么的。
路网信息可以描边再粗一点，这样视觉冲击会更强。告警区域可以体现的更明显一点，做点高亮展示。
文字可以不用绿色，用白色就可以。左右两边信息区域太窄了，可以适当加宽，或者主视觉覆盖区域再大一点。
修改前
修改后
朱子
整体风格：画面与其他人完全不一样，放在一起很出彩，并没有同质化，所以一眼就让人看到了。细节非常多，很漂亮的页面。但是要注意的是，城市可视化大屏一般都是基于深色底去做，大屏底色一般都是深色（与大屏的显示有关，不宜浅色，会晃眼）
主视觉：可以将地图全屏化，并不影响整体的效果，反而会因为地图的填充，整个画面得到升华。主视觉可以在路网信息上多加几条路网信息，这样效果会更丰富。
总结：此风格画面有些偏灰，如果在对比上在加强一下，不考虑商业设计的前提下，我愿意给此作品评第一，所有在项目中，我们的设计都是基于商业来的，希望下次遇到此种项目，可以用其他颜色的基调去做，运用本页面中的细节，一定是一个非常好的作品。
总结
看完了同学们的第二期周练设计，深深发现有很多的设计师功底都非常的强，可能由于没有接触过这块的设计，一般都是从UI转向B端或者可视化，这难度是挺大的。但是有很强的功底，在懂得B端和可视化的设计要领之后，成长也是非常迅速的。
同学们的进步非常快，通过这几期周练，发现了很多优秀的设计师，比如初一，朱子，玲，花开，等等的一些设计师，他们或多或少有着非常优秀的品质，就是很努力，希望大家继续努力，AYONG_BDR与你同在，小伙伴们也一直都在！
我是AYONG，一位热爱数据可视化的设计师！！!
同时在此也欢迎有志同道合的设计师们加入，一起去做一些关于数据可视化的事情，蚍蜉虽小，亦能撼树。同时也感谢tob-design对周练的大力支持，超实用的B端可视化设计师平台。
除非注明，否则均为UIED用户体验学习平台-AYONG_BDR的原创文章，转载必须以链接形式标明本文链接
本文链接：https://www.uied.cn/25571.html
