首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 新闻阅读 > 正文

    信息可视化流程 2015年热门信息可视化的流程+方法

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

     由于目前在做大数据类的产品，界面上总需要使用设计语言来解释一些很虚拟、抽象的概念，因此不可避免的要研究信息可视化。之前看了很多同行在这方面的总结和分享，却发现内容都差不多，几乎都是来自国外的一些相关书籍和资料。所以这里我想谈一下在经历了这个项目后，自己对信息可视化的一些粗浅的理解，希望可以抛砖引玉，影响更多同行分享有价值的内容。

    我对信息可视化的理解

    由于刚开始接触，理解自然非常浅显。也许日后会有更高深的见解。目前我认为：信息可视化就是用图形正确的表现复杂的信息和逻辑关系，这样可以：

    通过图片特有的美观和趣味性，吸引读者

    通过最优表现形式，使内容更易懂

    拉近读者与产品的距离，提升品牌认知度

    这个图忘记是在哪里看到的了，它给我留下了非常深刻的印象。这个例子通过简单的图形变化让降雨量信息一目了然。信息可视化是一门了不起的学问，需要设计者既有很好的交互意识，又要有一定的图形设计能力。

    2015年热门信息可视化的流程+方法1

    和视觉小伙伴们一起协作得出的成果

    作品一：安全产品首页展示

    创作灵感：从需求文档中看到这些子产品名字有御前卫、八卦阵、御城河……当时就觉得非常有意思，脑海中立刻浮现出一个古城的画面，古城周围有士兵、有八卦阵、有御城河等。跟视觉设计师表达这个想法后大家一拍即合，最终产出了这个方案。中间的城楼最开始是红色的，有点太抢眼，为了避免喧宾夺主又体现出数据被保护的感觉，就把它改成了这种半透明的、很数据化的虚拟感觉。

    2015年热门信息可视化的流程+方法2

    作品二：产品结构图

    创作灵感：通过竞品分析发现国内外同行在这方面都非常下功夫，所以我们也要力求用一张图来把产品结构和关系描述清楚。下篇文章会讲具体的设计过程。

    2015年热门信息可视化的流程+方法3

    作品三：使用流程示意图

    创作灵感：产品经理给出的这个图很严谨，但是对于用户来说理解起来比较困难，因此先用线框图把它简化为单向的流程图，但这样又不够美观和直观。心灵手巧的视觉设计师经过图形的美化，巧妙解决了这个问题。

    原始图：

    2015年热门信息可视化的流程+方法4

    修改中(局部)：

    2015年热门信息可视化的流程+方法5

    改良后：

    2015年热门信息可视化的流程+方法6

    作品四：方案描述示意图

    和上个作品类似，也是先梳理信息逻辑，用更易懂的方式去表现，再通过视觉设计师美化。

    原始图：

    2015年热门信息可视化的流程+方法7

    改良图：

    2015年热门信息可视化的流程+方法8

    还有其它很多作品，在这里就不一一展现了。完成这些作品后，我积累了哪些经验和心得呢?

    信息可视化的设计标准

    要想把一件事情做好，首先要知道做好的标准是什么。在我和小伙伴们一起完善信息可视化作品的过程中，我们经历了无数的修改，把这些失败的作品放到一起，就可以大概得出失败的原因是什么，而好的标准又是什么了。

    2015年热门信息可视化的流程+方法9

    这些就是我归纳总结出的四条标准，下面我就来一一解释：

    2015年热门信息可视化的流程+方法10

    这个我就不多说了，地球人都能理解。

    2015年热门信息可视化的流程+方法11

    信息图要美，但美不是最重要的，最重要的是更直观、清晰地传达信息。举个例子：下面这个图是我前后两版设计的信息图，内容是一样的，但形式上，哪个更好懂?

    2015年热门信息可视化的流程+方法12
    2015年热门信息可视化的流程+方法13

    很明显，右图看上去更直观、更清晰。因为同样的内容，右图用了对称的形式，理解起来省了一半力气。所以我们在设计信息图时，一定不要浅尝辄止，要努力寻找最佳方式，让信息更简明易懂。

    2015年热门信息可视化的流程+方法14

    “正确”是信息图最基本的要求。信息图再好看、再易懂，但如果读者对它的理解都不正确，那这个图就没有任何的价值。

    举个例子，下面这个图描述了某产品中子模块的关系。看到这个图，我以为这些子模块遵循从1到5的先后依赖关系，但实际上不是这样的。这就说明图形传达信息的方式不正确。

    2015年热门信息可视化的流程+方法15

    下面要说的“一致”是比较容易被人忽略的，但它也是非常重要的一点。当你的产品有多个页面涉及信息可视化时，不考虑“一致”会让阅读者难以理解，产生混乱。

    2015年热门信息可视化的流程+方法16

    既然我们保证图片表达的内容是真实的、正确的，那么就一定要考虑到事实的逻辑性。影视剧中大家总对“穿帮”镜头津津乐道，就是因为它不符合人们的真实认知，从而显得很“假”。

    2015年热门信息可视化的流程+方法17

    为什么“穿帮”现象难以避免呢?

    因为时间、天气等原因没有一次拍完整

    导演突然有了新想法，在原有基础上补拍一些内容

    重新剪裁或重组内容

    看，是不是和设计过程非常的相似?

    工作量太大，设计师一天完不成

    中间突然穿插了其它工作

    后面又有了新想法

    修改的内容过多，部分遗漏或忘记更新

    因此设计“穿帮”现象也是难以避免的。比如下图，在其中一张图中，“安全产品”是用的小锁的图标，而到了另一张图中，“安全产品”变成了“安全中心”，图形也变成了盾牌形。这样就会让用户感到疑惑：这两个是一回事吗?

    2015年热门信息可视化的流程+方法18

    我们在设计过程中，有很大一部分精力放在了检查和修改“穿帮”中，不要认为这是一件小事，细节决定成败!高度一致性的图形，既易懂，又提升品牌形象，更提升设计效率。符合逻辑的视觉语言设定，是信息可视化中必不可少却又容易忽略的，应该引起设计师的关注。

    信息可视化的设计过程

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

    2015年热门信息可视化的流程+方法19

    Step 1：确定表意正确

    在上一篇文章中已经提到：“正确”是信息图最基本的要求，所以这里首先要确保信息图的内容是正确的。跟据问题的复杂程度不同，一般有两种做法：

    第一种做法：

    对于业务比较复杂难理解的产品，可以让产品经理先根据自己的理解画一个图，设计师和产品经理进行沟通，确认双方的理解是一致的;如果产品经理画的图没能正确的表达清楚内容，那么设计师就在自己理解的基础上重新完善，然后双方再度确认，保证图形正确的传达了想表达的含义。

    2015年热门信息可视化的流程+方法20

    比如上面这个图(“御膳房”子产品数据引擎)，产品经理先随意画了一个草图给我看，我没太看懂，让产品经理讲了一遍他的想法，发现与我自己理解的相差甚远;然后我跟据产品经理讲的内容又重新完善了一个草图，拿给他看，他指出了其中一些我理解不对的地方，我再修改，直至双方达成一致。

    第二种做法：

    如果设计师对产品有大致的了解，也可以自己动手画草图。然后产品经理审核看是否正确的表达了产品逻辑，如果有问题则提出，设计师跟据意见进行修改，直至双方达成一致。

    2015年热门信息可视化的流程+方法21

    比如上面这个图(“御膳房”总产品结构图)，就是我跟据自己的理解画的“御膳房”产品结构图，产品经理没有提出异议，于是顺利进入到第二个环节。

    Step 2：优化展现形式

    内容正确还不够，还要易懂。我们需要在这个步骤里寻找信息图最优表现形式，让读者一目了然，降低理解难度。

    《淘宝技术这十年》里有一句话说的好“好的架构图充满美感”。淘宝工程师用十年的时间证明了这件事。而其实不仅是技术架构图，好的流程图、结构图、信息图等都充满美感。跟据我的经验，它们往往是对称、饱满、和谐的，这难道是巧合吗?我也不知道，大自然就是如此神奇。如果你绘制的信息图臃肿、杂乱、不美观，那可能并不是因为事实杂乱无序，而是你的表达出了问题。

    那么怎样优化信息图的表达形式呢?如果是一个逻辑比较复杂的结构图，可以这样：

    2015年热门信息可视化的流程+方法22

    比如下面这个图(“御膳房”子产品数据引擎)，我开始是这样画的。虽然逻辑没有错误，但是箭头有交叉，看起来不美观简洁，理解起来也比较费劲。那么怎么改良呢?

    2015年热门信息可视化的流程+方法23

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

    2015年热门信息可视化的流程+方法24
    2015年热门信息可视化的流程+方法25
    2015年热门信息可视化的流程+方法26

    有意思的是，在图即将完成时，发现有个地方多了条支线，导致图形无法完全对称，非常可惜。最后询问PD，发现这条支线是由于理解错误造成的，本来就应该去掉。

    当时的草图绘制过程：

    2015年热门信息可视化的流程+方法27

    第一个图和第二个图的内容一样，修改后是不是容易理解多了呢?第三个图是在第二个图的基础上增加了一些细节信息。我们在考虑最优展现形式时，可以先不考虑细节，只考虑基础的框架结构，这样更容易发现问题所在。

    Step 3：探索视觉风格

    在探索视觉风格时要注意抓大放小，先定下来最主要模块的风格，再做延展。比如我现在在做的御膳房产品，就是要先定下来产品结构图的视觉风格，再延展到子产品的信息图上。如果先设计子产品的信息图风格，就很难延展到总体结构图上了，会起到事倍功半的效果。

    首先先寻找一些竞品和素材，发散一下思维，同时也确定一下自己想要的感觉。

    我想要的感觉是：科技感的、扁平化的、形式新颖有趣味……

    2015年热门信息可视化的流程+方法28

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

    第一版(卡通)：

    视觉设计师第一次尝试的是卡通版本。这个版本很美观，但是对产品的表述内容太少，不够全面。卡通风格也不太适合表现这样一款大型的阿里大数据官方产品，且风格不好拓展。

    2015年热门信息可视化的流程+方法29

    第二版(写实)：

    吸取了第一次的教训，视觉设计师第二次尝试的是写实版本。这回虽然可以详细的表达产品内容了，但不够直观和一目了然，阅读起来索然无味。

    2015年热门信息可视化的流程+方法30

    第三版(突破)：

    吸取了前两次的教训，设计师开始寻找一些更趣味、更科技感的表现形式。但这个版本易读性一般，尤其是左边的样式很不好拓展。但是左边这张图给人感觉很贴合大数据那种高科技、前卫的感觉，这和我想要的感觉十分接近。

    2015年热门信息可视化的流程+方法31

    第四版(改良)：

    虽然前面这几版都没有被采用，但方向却越来越清晰了。我们决定在左上图的基础上做改进，去掉一些琐碎的视觉元素，突出主体，使之更易读。但改完后我觉得整体效果并不好，显得很单薄，而且易读性依然不好。所以需要换个思路再继续尝试。

    2015年热门信息可视化的流程+方法32

    第五版(终稿)：

    结合前面的经验教训，视觉设计师认真听取了大家的感受和建议，重新整理了思路，这次一气呵成。这版虽然没有特别惊艳的感觉，但是综合分数高：无论是美观度、还是易读性、正确性、拓展性都比较好。所以最终敲定了这版。

    2015年热门信息可视化的流程+方法33

    Step 4：完善细节

    探索视觉风格时，并不需要做的非常细，可以先不考虑细节，只考虑主要框架，这样效率会高一些。视觉风格确定后，可根据需要添加、完善细节。

    2015年热门信息可视化的流程+方法34

    Step 5：风格延展

    我在上一篇讲过：“一致”的视觉设定有助于用户理解，也能更好的提升品牌形象。所以主风格确定后，我们需要把它延展到其它有需要的页面上。那么如何延展呢?需要先做一个简单的视觉风格设定，就像界面规范一样。

    2015年热门信息可视化的流程+方法35

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

    2015年热门信息可视化的流程+方法36

    写在最后：经验总结

    由于这是我第一次比较系统的接触信息可视化相关内容，所以犯错误在所难免，我把这些教训记录下来，希望能让其他初学者避免我犯的错误：

    当设计一整套图形，或相互有关联的图形时，要注意先从整体考虑，抓大放小。我当时就是没有系统的考虑，子产品的图确定了，就让视觉设计师赶紧做，结果发现和主图难以配套统一，浪费了很多时间，也增加了视觉设计师的工作量。

    信息可视化不光是让视觉设计师画几幅图这么简单，规划环节必不可少。我开始以为信息可视化是视觉设计师的事情，跟交互设计师没有关系，后来才慢慢发现，把希望全部寄托在视觉设计师身上是不切实际的。信息可视化要想做好既需要透彻理解产品，也需要很强大的交互技能，更需要激情与责任心。需要产品经理、交互设计师和视觉设计师密切配合，而不是互相推脱，把压力全留给视觉设计师。

    好的信息图充满美感，它们往往是对称的、和谐的;先完成最小事件的图形，再逐渐补充。我开始就忽略了这点，以为把信息准确表达清楚了，再让视觉设计师稍加美化就行了，没有想要去探索最佳的图形展现形式，直到有一天看到了一位运营在PPT中画的产品图才惊呼：原来还可以这样!所以做信息可视化永无止境，永远有发挥的空间。

    注意细节的匹配、一致性。这点作为一个交互设计师，我自然很注意，但我发现其他人未必在意。比如两个子产品的结构图，可能一个图有边，一个图没边;或者同样放标题的位置，颜色或样式不一样;同样性质的标签阴影的角度和方向不一样……这些问题简直无穷无尽。也许这些都是微不足道的小事情，但是品牌无小事，细节确定成败，我坚信这一点。

    • 信息可视化流程 2015年热门信息可视化的流程+方法 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文信息可视化流程 2015年热门信息可视化的流程+方法由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.