仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
仓酷云 门户 程序员 移动互联 查看内容

信息可视化初探(上)

2015-2-16 00:23| 发布者: 萌萌妈妈| 查看: 787| 评论: 0

摘要: 信息可视化初探(上)   由于目前在做大数据类的产品,界面上总需要使用设计语言来解释一些很虚拟、抽象的概念,因此不可避免的要研究信息可视化。之前看了很多同行在这方面的总结和分享,却发现 ...
互联网世界里面有什么?有ID、连接和信息,有0和1。虽然简单,但正是这些PHP网页编程最基本的东西,组成了丰富多彩的互联网世界。在互联网世界中,有几个简单的特点,如果了解了以后,可以结合物质世界一起,在互联网世界建立影响力,并影响物质世界。

信息可视化初探(上)

  因为 今朝 在做大数据类的产物 ,界面上总需求 利用 设计言语 来注释 一些很虚拟、笼统 的概念,因而 不成 防止 的要研讨 信息可视化。之前看了良多 同业 在这方面的总结和分享,却发明 内容都差不多,几近 都是来自国外的一些相干 书本 和材料 。所以这里我想谈一下在履历 了这个项目后,本人 对信息可视化的一些深刻 的了解 ,但愿 可以抛砖引玉,影响更多同业 分享有价值的内容。

  我对信息可视化的了解

  因为 刚入手下手 接触,了解 天然 十分 浅易 。或许 往后 会有更深邃 的看法 。今朝 我以为 :信息可视化就是用图形准确 的体现 庞杂 的信息和逻辑关系,如许 可以:

  经由过程 图片独有的 雅观 和兴趣 性,吸引读者

  经由过程 最优体现 模式 ,使内容更容易 懂

  拉近读者与产物 的间隔 ,提拔 品牌认知度

  这个图健忘 是在哪里看到的了,它给我留下了十分 深入 的印象。这个例子经由过程 复杂 的图形变更 让降雨量信息了如指掌 。信息可视化是一门了不得 的学问,需求 设计者既有很好的交互认识 ,又要有必定 的图形设计才能 。

信息可视化初探(上),互联网的一些事

  和视觉小同伴 们一同 协作得出的功效

  作品一:平安 产物 首页展现

  创作灵感:从需求文档中看到这些子产物 名字有御前卫、八卦阵、御城河……事先 就感觉 十分 成心 思,脑海中立即 显现 出一个古城的画面,古城四周 有兵士 、有八卦阵、有御城河等。跟视觉设计师表达这个设法 后人人 一拍即合,终究 产出了这个计划 。两头 的城楼最入手下手 是白色 的,有点太抢眼,为了不 鹊巢鸠占 又表现 出数据被回护 的感到 ,就把它改成了这类 半通明 的、很数据化的虚拟感到 。

信息可视化初探(上),互联网的一些事

  作品二:产物 布局 图

  创作灵感:经由过程 竞品剖析 发明 国际 外同业 在这方面都十分 下工夫 ,所以咱们 也要力图 用一张图来把产物 布局 和关系描写 清晰 。下篇文章会讲详细 的设计进程 。

信息可视化初探(上),互联网的一些事

  作品三:利用 流程表示 图

  创作灵感:产物 司理 给出的这个图很严谨,然而 关于 用户来讲 了解 起来对照 坚苦 ,因而 先用线框图把它简化为单向的流程图,但如许 又不敷 雅观 和直不雅 。心灵手巧的视觉设计师经由 图形的丑化 ,奇妙 处理 了这个成绩 。

  原始图:

信息可视化初探(上),互联网的一些事

  修正 中(部分 ):

信息可视化初探(上),互联网的一些事

  改进 后:

信息可视化初探(上),互联网的一些事

  作品四:计划 描写 表示 图

  和上个作品相似 ,也是先梳理信息逻辑,用更容易 懂的体例 去体现 ,再经由过程 视觉设计师丑化 。

  原始图:

信息可视化初探(上),互联网的一些事

  改进 图:

信息可视化初探(上),互联网的一些事

  还有其它良多 作品,在这里就纷歧 一展示 了。完成这些作品后,我堆集 了哪些经历 和心得呢?

  信息可视化的设计尺度

  要想把一件工作 做好,起首 要晓得 做好的尺度 是甚么 。在我和小同伴 们一同 完美 信息可视化作品的过程当中 ,咱们 履历 了有数 的修正 ,把这些掉 败的作品放到一同 ,就能够 也许 得出掉 败的缘由 是甚么 ,而好的尺度 又是甚么 了。

信息可视化初探(上),互联网的一些事

  这些就是我归结 总结出的四条尺度 ,上面 我就来逐一 注释 :

信息可视化初探(上),互联网的一些事

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

信息可视化初探(上),互联网的一些事

  信息图要美,但美不是最主要 的,最主要 的是更直不雅 、明晰 地转达 信息。举个例子:上面 这个图是我前后两版设计的信息图,内容是一样的,但模式 上,哪一个 更好懂?

信息可视化初探(上),互联网的一些事
信息可视化初探(上),互联网的一些事

  很分明 ,右图看上去更直不雅 、更明晰 。由于 一样 的内容,右图用了对称的模式 ,了解 起来省了一半力量 。所以咱们 在设计信息图时,必定 不要浅尝辄止,要勉力 寻觅 最好 体例 ,让信息更简明易懂。

信息可视化初探(上),互联网的一些事

  “准确 ”是信息图最根基 的请求 。信息图再悦目 、再易懂,但假如 读者对它的了解 都不准确 ,那这个图就没有任何的价值。

  举个例子,上面 这个图描写 了某产物 中子模块的关系。看到这个图,我觉得 这些子模块遵守 从1到5的前后 依附 关系,但实践 上不是如许 的。这就申明 图形转达 信息的体例 不准确 。

信息可视化初探(上),互联网的一些事

  上面 要说的“分歧 ”是对照 轻易 被人疏忽 的,但它也长短 常主要 的一点。当你的产物 有多个页面触及 信息可视化时,不思索 “分歧 ”会让浏览 者难以了解 ,发生 凌乱 。

信息可视化初探(上),互联网的一些事

  既然咱们 包管 图片表达的内容是真实的、准确 的,那末 就必定 要思索 到现实 的逻辑性。影视剧中人人 总对“穿帮”镜头津津有味 ,就是由于 它不合适 人们的真实认知,从而显得很“假”。

信息可视化初探(上),互联网的一些事

  为何 “穿帮”景象 难以免 呢?

  由于 工夫 、天色 等缘由 没有一次拍完全

  导演俄然 有了新设法 ,在原有基本 上补拍一些内容

  从头 剪裁或重组内容

  看,是否是 和设计进程 十分 的类似 ?

  任务 量太大,设计师一天完不成

  两头 俄然 交叉 了其它任务

  前面 又有了新设法

  修正 的内容过量 ,局部 漏掉 或健忘 更新

  因而 设计“穿帮”景象 也是难以免 的。好比 下图,在个中 一张图中,“平安 产物 ”是用的小锁的图标,而到了另外一 张图中,“平安 产物 ”酿成 了“平安 中间 ”,图形也酿成 了盾牌形。如许 就会让用户感应 困惑 :这两个是一回事吗?

信息可视化初探(上),互联网的一些事

  咱们 在设计过程当中 ,有很大一局部 精神 放在了反省 和修正 “穿帮”中,不要以为 这是一件大事 ,细节决意 成败!高度分歧 性的图形,既易懂,又提拔 品牌抽象 ,更提拔 设计效力 。合适 逻辑的视觉言语 设定,是信息可视化中必不成 少却又轻易 疏忽 的,应当 引发 设计师的存眷 。

  鄙人 篇文章中,我会举一个完全 的案例来说 解做信息可视化的办法 和进程 。

主要靠优质的内容聚合人群,最终有可能复制微博的发展之路,成为新的社交媒体平台。

路过

雷人

握手

鲜花

鸡蛋

最新评论

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-10 11:52

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部