可视化设计如何解读科技感风格？

　　一、科技感的界面有哪些特征？二、同展示条件下不同应用场景，又会有什么样的差异？三、三维的表现形式，是否真的跟科技感成正比？四、面对段落文本需求，列表需求等如何把页面做出科技感？
　　1。科技感的界面有哪些特征？
　　相信很多可视化设计师听到最多的一句话：要酷炫，要科技感！每每我听到这句话我都会变得非常暴躁，究竟是酷炫科技感代表可视化？还是数据可视才是可视化的内核？每每遇到这种令人糟心的问题，我想的是如何通过自己的专业知识去解释，可是我发现根本解释不清楚，也无法令甲方客户信服，甚至和同为乙方的总包也无法达成统一战线。那么我们应该如何去做呢，又应该如何去解释科技感这个抽象的概念呢？
　　大概的四个方面：配色，背景，图形，动效
　　1。1配色
　　提到科技感色系一般我们想到的就是蓝色系：科技蓝。我敢打赌95的人一定会这么说，但是我想说：科技感可不是只有这种蓝啊不是只有蓝色啊〔微笑〕
　　蓝色色域也是非常广的，首先我们先看看普通的科技蓝
　　（反面教材）
　　蓝色色域也是非常广的，然后我们再看看其他的蓝色系（正面教材）
　　能够表现科技感的色彩也是非常之多的
　　蓝色并不是科技感的专有属性，任何一种颜色都是可以塑造科技感的感觉的。我们可以推断，配色是塑造科技感界面的一个比较重要的因素。
　　色彩的选择需要根据实际所运用到的场景，比如安全行业，蓝绿色会比较好一点；比如公安行业，传统蓝色就比较合适；比如卫星地图，用蓝色就不合适；根据不同的业务范畴以及不同的应用场景去确定配色，这才是我们要做的。
　　比如适合用绿色的场景我做的不好看，那只能怪自己学艺不精，跟配色无关！我不排斥蓝色，但是我讨厌到处都是用蓝色，上来就是用蓝色，抱歉，做不到。
　　1。2背景
　　说到背景这是一个影响科技感非常重要的因素，一张超神比比皆是，一张超鬼也是随处可见，究竟什么样的背景才是一个优秀的可视化界面所具备的？不是画面发光，有闪光点，宇宙或者银河那种图；也不是科技点线，带渐变的线条（混合工具做出来的那种）看起来就特别复杂；也不是那种亮度超过画面任何一个元素的图。
　　科技感的背景所起到的作用应该是衬托画面，而不是在画面中比较跳，抢视觉，一大坨发光或者复杂的图形，只会起到反作用。
　　一个好的背景一定是不影响视觉的同时，衬托画面和主视觉，如果整个页面分黑白灰三层，那么背景一定是黑的那一层，这样出来的效果才会好。
　　1。3图形
　　图形应该是以上指标中，最令人可以接受对科技感风格诠释的一种，科技感的图形到底有哪些特征，我们又该如何去做呢？
　　通过以上案例我们可以发现，所谓图形表现科技感，最大的特征就是点线面应用的多元化，通过一种或者多种规律将点线面组合起来，线条粗细长短不一，点大小不等。在使用图形进行点缀搭配时，切不可过于花哨，从而抢了主要内容的风头。不规则图形，点线装饰，色彩，外发光，都是图形诠释科技感的方式。
　　此处可能会出现一些三维样式的图形，特殊的视角以及不常见的设计都会增加科技感的元素，但是也不是所有的三维都可以比二维更有科技感的。我最近做的就是甲方客户一直觉得：三维元素太少了，科技感不够。我就纳闷了，到底什么才是科技感？难道科技感还只能用三维的来表示了？只能说一定条件下，三维是优于二维展示的，但这也不是绝对的。如果你的场景主视觉本身就是二维范畴的，何必要要求组件三维展示。
　　下图的二维科技感表现上肯定是超过三维地球的，至少我是这么认为的。
　　1。4动效
　　动效应该是最能体现科技感的方式了，通过动态演示组件，通过动效展示界面，远远比静态页面要合理的多。动效主要是通过：位移、旋转、透明度（闪烁）、缩放等方式去制作，形成独特的动画节奏。最常用的科技动画：粒子动画，线条动画，辉光，剪切路径，偏移字符等等。
　　可以发现科技感动效一般都伴随着极快的闪烁动画，动画的节奏也是比较偏快，再通过出现动画，字符偏移，剪切路径等演示组件的形成过程。
　　2。同展示条件下不同应用场景，会有怎样的差异？
　　可能大家没有遇到过这种情况，比如在三维建筑可视化中，科技感本身就依赖于场景的表现，但是不知道大家有没有试过，将三维建筑可视化换成卫星地图之后，我们如何去使画面表现的更具科技感呢？
　　图一，图二，图三分别就是替换了人为认知的不好看的场景，那么我们来看看这些场景为什么不适合原本的之前的科技感风格呢，我们一起思考一下
　　图一
　　图二
　　图三
　　以上三张图可以看出，大家会觉得科技感只针对于一些特殊的场景，或者说是深色场景，比如一些实景地图和卫星地图又该如何去表现科技感的元素呢？以第一张图风格为例，我给大家展示一下这样的科技感该怎么去做？科技感风格应用于不同的场景，那么表现科技感的方式也是有很大的不同的。
　　对于这种亮色系的场景，或者实景地图我们一般会多用白色，少量的运用色彩去修饰整个画面，上图的页面我也只是简单的排布了一下，大概就可以了解到对于实景地图或者一些其他亮色系的主视觉我们该如何去表现科技感了，希望对大家有点帮助，多做一些关于这样的练习就能熟能生巧了。
　　3。三维的表现形式，是否真的跟科技感提升成正比？
　　其实这本身就是一个伪命题，三维表现对画面的冲击力是非常强的，对于画面视觉效果的提升有很大的帮助。不过是否所有的三维就是最合适的呢，这个也确实有待商榷。不过能肯定的是，一定程度上，三维一定会比二维更加具有冲击，更加具有科技感（首先必须要确定的是，此处三维一定是科技感点线组成或者说是线描类型的三维主体，而不是实景以及仿真的主体，当然并不是绝对的此处针对大多数场景下）。
　　我们可以通过以上图片看出，科技感一定伴随的是大量的点线装饰，画面主体一定是最突出的地方。而不是我有时候遇到的是：GIS地图就是很普通的样式，可编辑性不是很强，样式也比较老旧，对设计就会造成大量的困扰。在主视觉没有完美表现的时候，就不要强求说把两边去做好看，主视觉不好看，那么图表做的特别华丽也只是让主视觉更掉分。
　　其实最正确的表现就是二维表现加上三维场景展示，两者相辅相成，对于画面的展示才是最好的。通过下面这组案例可以发现，二维表现加上三维场景才是最优解。
　　4。面对段落文本列表需求时如何把页面做出科技感？
　　很多同学对于文字需求如何制作科技感有很多的疑问，通过我最近的作图，总结出四种关于文字排版科技感的展示，总结起来其实就那么几点：装饰，图形，字体，版式，表现形式。。。
　　其实对于数据可视化设计科技感的研究，不仅需要了解表现层，更需要上升到业务层。一些特定的图形或者装饰，对于画面的丰富程度一定是有帮助的。讲了这么多，不知道对大家理解科技感是否有帮助，如何提升画面科技感，是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中，多多酷炫，多多科技感！！！
　　内容转载于知乎阿勇呐