如何让金融数据可视化------------------深圳UI设计

发布日期: 2015-06-09

在互联网金融和金融互联网化的时代，日常生活被海量的数据化信息围绕。从设计层面来说，也是一项新领域的挑战。数据可视化设计是否有规律可循，从设计作品中能否发现其设计的共性和特点，如何从层层数据信息中提取重要的信息内容，通过简介易懂的设计语言准确表达。用设计师的眼睛，看见产品的连贯性。通过设计的信息会更合理，更能讲故事，让我们只关注信息的重点。否则视觉只是中看不中用。

　　数据可视化是什么

　　The main goal of data visualization is its ability to visualize data, communicating information clearly and effectively.(数据可视化的目的，是要对数据进行可视化处理，以使得能够明确地、有效地传递信息。) — Vitaly Friedman(国外5个在网页设计最具影响力的人物)首先，让我们看一些和数据相关的设计作品，以供鉴赏。

　　你能否从大量成堆的设计作品当作看出和金融相关的共同特征呢?从中整理了部分和金融类属性的设计特点。

　　金融数据化设计特点

　　1.金融类下的红绿运用

　　最恰当的图形，就是目标用户愿意接受，并能明确感受你要传达的信息。或者说，体现你数据图形与产品的气质相符。能够一目了然产品属性和特征。 在金融类目下的产品很容易出现体现涨幅的红绿配色，要注意的是，在国内传统行业里股市的红色代表着大升的牛市，绿色代表大跌市。这点和国外的认知是恰恰相反的，设计上更要适应传统行业渗透到国民的普遍认知，把传统行业里一些潜移默化的印象承接在新媒体下。

　　2.配色化繁为简 不超过三种

　　品牌类产品设计页面，建立品牌感很重要。很大程度也是取决于元素简洁这一点。简洁顾名思义就是干净、干练，所以活跃的用色不太适用。颜色作为设计师传达品牌情感的主要元素之一，一个明确的品牌颜色，对用户记忆，认知度有很大的提升。如果可以的话尽量用logo为主的标准色，如果较为特别的页面，也会适当脱离标准色，但用色基本都会控制在三个以内。

　　3.插图的使用

　　在现代网页设计中要有套系感，连贯性。 趋势不再以复杂色彩、样式和纹理，而是以线框、色块、微质感等设计风格为主。 优势：与整个页面/背景合为一体，形成统一的视觉美感。不繁琐的设计理念，让用户清晰的看到必要的信息。

　　当你在迷失信息中时,信息图示非常实用

　　1. JSCharts——http://www.jscharts.com/

　　一个 JavaScript 图表工具，拥有很多模板。

　　2. D3.js——http://d3js.org/

　　是最流行的可视化库之一，它被很多其他的表格插件所使用。

　　3. Dundas——http://www.dundas.com/Components/Gallery/ASP/

　　NET 下老牌的数据图表工具。

　　如何使用在金融产品下

　　1.应用到产品页面当中，首先去找寻金融属性的颜色，来定主站的基调

　　金融和数据，我们可能联想到什么词汇?

　　从中再提取出关键，和整体属性气质相符合的元素

　　深蓝色突出网站导航和内容模块的区分，在大部分页面，品牌蓝色会充当主导色，主要用于可点击的操作控件。金色作辅色并设定不同的任务属性，对于平台类来说，多色主导有非常好的延展性。 观点：品牌色在这里起到画龙点睛的作用，用于一些需要重点突出的场景，强调交互的状态等。

　　定义信息架构 强化行动点

　　你首先要梳理清楚内容的层级结构，坚实的信息架构都是最重要的基础。 扁平或者是微质感的元素体现页面的品质，加入合理的场景元素营造气氛。 在产品页面设计中，微质感的界面，把那些会牵扯用户注意力的元素被去除，聚焦信息。 意味着视觉表现形式上通常只有两个维度可以使用，来触发用户“去点击”。

　　试着通过提升对比度来增强表现力。这里所说的对比度包括配色、字号、位置布局等方面的要素。另外，要为交互元素提供必要的视觉线索及反馈效果，帮助用户建立认知，例如当鼠标悬停在元素上，或是用户点击、触摸这些元素的时候，其视觉形式需要有所变化，以体现出元素的交互特性以及用户行为所产生的结果。

　　要点的配图，线稿会过于单薄，不能抢banner的视觉中心，在整个页面中只能起辅助作用。

　　通过代入感极强的环境元素，与目标用户建立起明确的关联。并且体现产品的个性。

　　始终整个页面中贯穿金融元素

　　六边形——蜂巢/坚固/整齐度(统一了大量不规则icon)

　　详情功能配图不易过复杂，要适合识别、组合、变化。辅助色彩符合整个网站的风格基调。

　　小结:

　　数据信息平台产品要有其产品特点的气质，以及贯穿整站金融特质的元素。 帮用户梳理信息，具备可用性为基础的界面。帮助人们解决问题，建立银行、保险、金融与数据新的对话方式。 设计上来说，消化掉专业化的外衣，便捷易读易懂，才能带出产品本身的价值。

关键词： 网站设计