简述信息可视化设计(信息可视化艺术设计)

本文主要介绍信息可视化设计简介(信息可视化艺术)，下面跟着东辰网详细了解一下吧。

信息可视化的设计过程

通过项目中各种痛苦的尝试，结合信息可视化标准，我最终总结出这样一个比较通用的流程:

开始步:确保表意文字是正确的。

正如上一篇文章中提到的正确性是信息图最基本的要求，所以首先要保证信息图的内容是正确的。根据问题的复杂程度，一般有两种

开始种方法:

对于业务复杂、难以理解的产品，产品经理可以先根据自己的理解画一张图，设计师和产品经理沟通确认双方理解一致；如果产品经理画的图没有把内容表达清楚，那么设计师会在自己理解的基础上进行改进，然后双方再重新确认，确保图纸正确传达了想要表达的意思。

例如，在上面的图片中(皇家厨房子)，产品经理先画了个草图给我看，我没有我不太明白，所以我请产品经理解释他的想法，发现这与我自己的理解相差甚远。然后我就按照产品经理说的完善了一个草图，给他看。他指出了一些我没有注意到的事情。;Idon’我没有理解正确，我修改了它，直到双方达成一致。

第二种方法:

如果设计师对产品有个大概的了解，也可以自己画个草图。然后产品经理检查产品逻辑表达是否正确，有问题就提出来，设计师根据意见修改，直到双方达成一致。

比如上图(皇家厨)是amp的产品结构图；皇家厨房那个我是按照自己的理解画的，产品经理也没有提出异议，我就顺利进入了第二个环节。

第二步:优化展示形式

内容正确还不够，还要通俗易懂。这一步需要找到信息图谱的最佳表达，让读者一目了然，降低理解难度。

《淘宝技术这十年》有句谚语说一幅好的建筑图是充满美感的。淘宝工程师用了十年时间来证明。其实不仅仅是技术架构图，还有很好的流程图、结构图、信息图等等。根据我的经验，它们往往对称、饱满、和谐。是巧合吗？我不我不知道，大自然就是如此神奇。如果你画的信息图臃肿、凌乱、不堪入目，可能不是因为事实杂乱，而是因为你的表达有问题。

那么如何优化信息图的表达呢？如果是逻辑复杂的结构图，可以这样:

比如下面这张图(皇家厨房子产品数据)，我一开始是这样画的。虽然逻辑上没有错误，但是箭头交叉，看起来不雅观简洁，也很难理解。那么如何改善呢？

先从这张图中找出最大的完整事件，也就是图中的橙色部分。

有意思的是，在绘图即将完成的时候，我发现有很多地方。It可惜加了一条支线，使图形不完全对称。最后问了PD，发现这个支线是误会造成的，早就应该去掉了。

PD是什么？缩写常识:《小常识学起来！设计师最好知道一下的常用缩写》

当时的素描过程:

开始张图片的内容与第二张图片的内容相同。修改后是不是更好理解？第三张图向第二张图添加了一些细节。在考虑最优呈现形式时，可以不先考虑细节，只考虑基本的框架结构，这样更容易发现问题。

第三步:探索视觉风格

在探索视觉风格时，要注意抓大放小，先决定最重要模块的风格，再进行延伸。比如我现在做的产品，就是先确定产品结构图的视觉风格，再扩展到子产品的信息图。如果先设计出子产品的infographic风格，就很难扩展到整体结构图，起到事半功倍的效果。

首先找一些竞品和素材，传播你的思维，同时确定你想感受。

我要的是科技感，平面，新颖，有趣...

接下来，就进入了最痛苦的探索和修改视觉设计师的无限循环。

开始版(漫):

视觉设计师开始次尝试卡通版。这个版本很漂亮，但是对产品的描述太少，不够全面。漫画风格也不太适合表达阿里大数据这么大规模的官方产品，风格也不太好拓展。

第二版(现实):

学完开始课，视觉设计师第二次尝试现实版。这次虽然可以详细表达产品内容，但是不够直观，一目了然，读起来很枯燥。

第三版(突):

吸取前两次的教训，设计师开始寻找一些更有趣、更科学的表达。但是这个版本很好读，特别是左边的样式很难展开。但是左边这张图给人的感觉很符合大数据的高科技前卫感，很接近我想要的。

第四版(改进):

前几版虽然没有被采用，但是方向越来越清晰。我们决定对左上角的图片进行改进，删除一些琐碎的视觉元素，突出主体，使其更具可读性。但是改了之后我觉得整体效果不好，看起来很单薄，可读性还是不好。所以你需要改变主意，再试一次。

第五版(终):

结合之前的经验教训，视觉设计师认真听取了大家的意见s的感受和建议，重新整理了一下思路，这次一气呵成。这个版本虽然没有特别惊艳的感觉，但是综合评分很高:在美观性、可读性、正确性、扩展性等方面都比较好。所以最终敲定了这个版本。

第四步:完善细节

当探索视觉风格，你不不需要说得很详细。可以先考虑主框架，不考虑细节，这样效率会更高。视觉样式确定后，可以根据需要添加、完善细节。

第五步:风格延伸

我在上一篇文章中说过一致视觉设置可以帮助用户理解，更好地提升品牌形象。所以在主风格确定之后，我们需要将其扩展到其他需要它的页面。那么如何延伸呢？你需要先做一个简单的视觉样式设置，就像界面规范一样。

比如在产品结构图中，四个子产品使用不同的颜色，那么在其他页面或者相关的图文内容中，我们也要用这四个色系来表示这四个产品。深度的定义是考虑到面积和视觉层次的不同而灵活调整，使界面整体和谐统一。这样既保持了整体风格的一致性，又赋予了每个产品独特的个性，增强了信息的辨识度。

写在最后:经验总结由于这是我开始次系统地接触信息可视化，所以难免会出错。我记录下这些教训，希望其他初学者可以避免我的错误:

在设计一整套图形，或相互关联的图形时，要注意先整体考虑，抓大放小。那时，我只是没有不要系统地思考它。子产品的图纸确定后，我让视觉设计师赶紧做。结果是很难匹配到主图，浪费了很多时间，也增加了视觉设计师的工作量。信息可视化不仅仅是让视觉设计师画几张图那么简单，策划环节必不可少。我开始觉得信息可视化是视觉设计师的事，和交互设计师没关系。后来慢慢发现，把所有的希望都寄托在视觉设计师身上是不现实的。信息可视化不仅需要对产品的透彻理解，还需要强大的交互能力、激情和责任心。产品经理、交互设计师、视觉设计师需要紧密合作，而不是互相推诿，把所有的压力都留给视觉设计师。好的信息图充满美感，往往对称和谐；先完成最小事件的图形，再逐步补充。我从一开始就忽略了这一点，以为信息可以准确表达，然后视觉设计师可以稍微美化一下。我没有。;t想要探索最好的图形展示形式，直到有一天我在PPT里看到一个运营人员画的产品图，惊呼:原来还可以这样！所以，信息可视化没有止境，永远有发展的空间。注意细节的搭配和一致。作为一个交互设计师，我自然会关注这一点，但是我发现别人可能并不在意。比如两个子产品的结构图，可能一个图有边，另一个图没有边；或者把标题放在不同的位置、颜色或风格上；相质的标签有不同的角度和方向的阴影...这些问题层出不穷。也许这些都是鸡毛蒜皮的小事，但是品牌不是小事，细节决定成败。我坚信这一点。信息可视化的设计过程

通过项目中各种痛苦的尝试，结合信息可视化标准，我最终总结出这样一个比较通用的流程:

开始步:确保表意文字是正确的。

正如上一篇文章中提到的正确性是最基本的信息地图。需求，所以这里我们首先要保证信息图的内容是正确的。根据问题的复杂程度，一般有两种

开始种方法:

对于业务复杂、难以理解的产品，产品经理可以先根据自己的理解画一张图，设计师和产品经理沟通确认双方理解一致；如果产品经理画的图没有把内容表达清楚，那么设计师会在自己理解的基础上进行改进，然后双方再重新确认，确保图纸正确传达了想要表达的意思。

例如，在上面的图片中(皇家厨房子)，产品经理先画了个草图给我看，我没有我不太明白，所以我请产品经理解释他的想法，发现这与我自己的理解相差甚远。然后我就按照产品经理说的完善了一个草图，给他看。他指出了一些我没有注意到的事情。;Idon’我没有理解正确，我修改了它，直到双方达成一致。

第二种方法:

如果设计师对产品有个大概的了解，也可以自己画个草图。然后产品经理检查产品逻辑表达是否正确，有问题就提出来，设计师根据意见修改，直到双方达成一致。

比如上图(皇家厨)是amp的产品结构图；皇家厨房那个我是按照自己的理解画的，产品经理也没有提出异议，我就顺利进入了第二个环节。

第二步:优化展示形式

内容正确还不够，还要通俗易懂。这一步需要找到信息图谱的最佳表达，让读者一目了然，降低理解难度。

《淘宝技术这十年》有句谚语说一幅好的建筑图是充满美感的。淘宝工程师用了十年时间来证明。其实不仅仅是技术架构图，还有很好的流程图、结构图、信息图等等。根据我的经验，它们往往对称、饱满、和谐。是巧合吗？我不我不知道，大自然就是如此神奇。如果你画的信息图臃肿、凌乱、不堪入目，可能不是因为事实杂乱，而是因为你的表达有问题。

那么如何优化信息图的表达呢？如果是逻辑复杂的结构图，可以这样:

比如下面这张图(皇家厨房子产品数据)，我一开始是这样画的。虽然逻辑上没有错误，但是箭头交叉，看起来不雅观简洁，也很难理解。那么如何改善呢？

先从这张图中找出最大的完整事件，也就是图中的橙色部分。

有意思的是，在画图即将完成的时候，发现有一个地方多了一条支线，使得画图不完全对称。很遗憾。最后问了PD，发现这个支线是误会造成的，早就应该去掉了。

PD是什么？缩写常识:《小常识学起来！设计师最好知道一下的常用缩写》

当时的素描过程:

开始张图片的内容与第二张图片的内容相同。修改后是不是更好理解？顺序这三个图向第二个图添加了一些细节。在考虑最优呈现形式时，可以不先考虑细节，只考虑基本的框架结构，这样更容易发现问题。

第三步:探索视觉风格

在探索视觉风格时，要注意抓大放小，先决定最重要模块的风格，再进行延伸。比如我现在做的产品，就是先确定产品结构图的视觉风格，再扩展到子产品的信息图。如果先设计出子产品的infographic风格，就很难扩展到整体结构图，起到事半功倍的效果。

首先找一些竞品和素材，传播你的思维，同时确定你想感受。

我要的是科技感，平面，新颖，有趣...

接下来，就进入了最痛苦的探索和修改视觉设计师的无限循环。

开始版(漫):

视觉设计师开始次尝试卡通版。这个版本很漂亮，但是对产品的描述太少，不够全面。漫画风格也不太适合表达阿里大数据这么大规模的官方产品，风格也不太好拓展。

第二版(现实):

学完开始课，视觉设计师第二次尝试现实版。这次虽然可以详细表达产品内容，但是不够直观，一目了然，读起来很枯燥。

第三版(突):

吸取前两次的教训，设计师开始寻找一些更有趣、更科学的表达。但是这个版本很好读，特别是左边的样式很难展开。但是左边这张图给人的感觉很符合大数据的高科技前卫感，很接近我想要的。

第四版(改进):

前几版虽然没有被采用，但是方向越来越清晰。我们决定对左上角的图片进行改进，删除一些琐碎的视觉元素，突出主体，使其更具可读性。但是改了之后我觉得整体效果不好，看起来很单薄，可读性还是不好。所以你需要改变主意，再试一次。

第五版(终):

结合之前的经验教训，视觉设计师认真听取了大家的意见s的感受和建议，重新整理了一下思路，这次一气呵成。这个版本虽然没有特别惊艳的感觉，但是综合评分很高:在美观性、可读性、正确性、扩展性等方面都比较好。所以最终敲定了这个版本。

第四步:完善细节

当探索视觉风格，你不不需要说得很详细。可以先考虑主框架，不考虑细节，这样效率会更高。视觉风格确定后，可以根据需要添加和改进细节。

第五步:风格延伸

我在上一篇文章中说过一致视觉设置可以帮助用户理解，更好地提升品牌形象。所以在主风格确定之后，我们需要将其扩展到其他需要它的页面。那么如何延伸呢？你需要先做一个简单的视觉样式设置，就像界面规范一样。

例如，在产品结中在构图上，四个子产品使用不同的颜色，所以在其他页面或者相关的图文内容中，也要用这四个色系来表示这四个产品。深度的定义是考虑到面积和视觉层次的不同而灵活调整，使界面整体和谐统一。这样既保持了整体风格的一致性，又赋予了每个产品独特的个性，增强了信息的辨识度。

写在最后:经验总结由于这是我开始次系统地接触信息可视化，难免会出错。我记录下这些教训，希望其他初学者可以避免我的错误:

在设计一整套图形，或相互关联的图形时，要注意先整体考虑，抓大放小。那时，我只是没有不要系统地思考它。子产品的图纸确定后，我让视觉设计师赶紧做。结果是很难匹配到主图，浪费了很多时间，也增加了视觉设计师的工作量。信息可视化不仅仅是让视觉设计师画几张图那么简单，策划环节必不可少。我开始觉得信息可视化是视觉设计师的事，和交互设计师没关系。后来慢慢发现，把所有的希望都寄托在视觉设计师身上是不现实的。信息可视化不仅需要对产品的透彻理解，还需要强大的交互能力、激情和责任心。产品经理、交互设计师、视觉设计师需要紧密合作，而不是互相推诿，把所有的压力都留给视觉设计师。好的信息图充满美感，往往对称和谐；先完成最小事件的图形，再逐步补充。我从一开始就忽略了这一点，以为信息可以准确表达，然后视觉设计师可以稍微美化一下。我没有。;t想要探索最好的图形展示形式，直到有一天我在PPT里看到一个运营人员画的产品图，惊呼:原来还可以这样！所以，信息可视化没有止境，永远有发展的空间。注意细节的搭配和一致。作为一个交互设计师，我自然会关注这一点，但是我发现别人可能并不在意。比如两个子产品的结构图，可能一个图有边，另一个图没有边；或者把标题放在不同的位置、颜色或风格上；相质的标签有不同的角度和方向的阴影...这些问题层出不穷。也许这些都是鸡毛蒜皮的小事，但是品牌不是小事，细节决定成败。我坚信这一点。

了解更多信息可视化设计简介(信息可视化艺术设)相关内容请关注东辰网。