医药电商大屏数据展示

接手这个项目的时候也是很惊讶,BOSS提了个时尚的需求,就是小清新~大家会和我一样~啊,可视化数据小清新,顿时联想到了岛国的~~亚麻跌风格,日本韩国设计风格.在我们B端风格设计师内心肯定是觉得不合适.数据屏会穿透力很弱,不够突出,纠结了一小段时间.绞尽脑汁换个角度想想,作为内部显示器展示就和4K电视展示一样,好像也不是那么另类于是开始了这段小清新之旅~~~

还是一如既往按流程来,跟着流程走不会错的,这是适用项目的框架和减少不必要的时间和弯路.一起来吧不要怕繁琐.

01、流程路径

规范的流程是思路的理论基础可以帮助设计师整理需求完善每一个步骤。按照设置的流程根据需求步步为营，可以避免和节省不必要的时间.提高流程效率，保证设计质量和项目进度。

多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率。有多个信号源时，就会有多个设计稿，此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率.一般情况下设计稿的分辨率就是电脑的分辨率，当有多个信号源时，有时会通过显卡自定义电脑屏幕分辨率，从而使电脑显示分辨率不等于其物理分辨率，此时，对应设计稿的分辨率也就变成了设置后的分辨率；此外，当被投电脑分辨率长宽比与大屏物理长宽比不一致时（单信号源），也会对被投电脑屏幕分辨率做自定义调整，这种情况设计稿分辨率也会发生变化,所以设计开始前了解物理大屏长宽比很重要。如果你的实际屏幕比较大,就需要按比例进行配对,根据比例进行缩放到电脑端即可.例如:16:9、4:3比例根据实际尺寸进行物理计算,得到分辨率,然后进行分辨率按照倍数进行缩放即可.选择电脑接近的比例分辨率设计即可.

02、根据业务场景抽取关键指标

主要指标是一些概括性词语，是对一组或者一系列数据的统称。一般情况下，一个指标在大屏上独占一块区域，所以通过关键指标定义，我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。例如企业销售业绩:销售总额、单品排行、门店的排行、成交量、库存排行等.确定关键指标后，根据业务需求拟定各个指标展示的优先级（主、次、辅）。

选定指标后，进行逐级分类讨论：各个指标主要展示什么那些是主要那些是次要，进一步的讲，是我们想通过可视化表达什么样的规律和信息。分析得之，可以引导我们从“关联、分布、差异、组成”四个维度更有逻辑的思考这个问题。

关联：指标相关的共同性

分布：指标里的数据主要集中在什么范围、表现出怎样的规律

差异：数据之间存在何种差异、差异主要体现在哪些方面

组成：指标里的数据都由哪几部分组成、每部分占比如何

例举的示例图表都比较传统，在大屏数据可视化中可能还有另一类地理信息（常以2/3D地图、地球呈现）出现。例如全球化企业的大屏,天气,工业智能化等等，但它提供给我们的确定数据分析维度的思路和方法是相通的，可借鉴。只要我们按照既定的维度和实现想展现的数据即可.满足实际业务的需要才是真的解决了业务的问题才能展现大屏的价值.

03、实现过程

a、我们设计师需要了解现有数据的信息、规模、特征、联系等，然后评估数据是否能够支撑相应的可视化表现.结合实际开发的数据模型和图表不要造成图好看实现困难.

b、我们设计的图形图表，要开发能够实现。实际工作中，一些可视化效果开发用代码写很容易实现，效果也很好，但这些效果设计师用Ps/Ai/Ae这些工具模拟时会发现比较困难；同样的，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中跟开发常沟通非常重要，我们需要明确哪些地方设计师可以尽情发挥，哪些地方需要谨慎设计！一个项目总有周期与预算限制，不会无限期的修改迭代，所以设计师在这里需要抓住重点，平衡他们之间的关联关系节省相互的成本。

04、页面布局、划分

尺寸确立后，接下来要对设计稿进行布局和页面的划分。这里的划分，主要根据我们之前定好的业务指标进行，核心业务指标安排在中间位置、占较大面积；其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。

05、色彩搭配

06、文字规范

07、定义设计风格

这种情况如果有接触过的就可以忽略了,如果没有接触大屏设计的同学来说,就需要了解了,我们在定义一款APP或者Web页面设计风格时常用的方法是什么呢？情绪版！没错

大屏虽酷炫，但实际上也是运行在浏览器里的Web页面，所以大屏设计风格定义方法也同样可以是用情绪版来做，这种方法也是目前比较科学高效的风格定义手段.很多设计同学没有接受过设计公司或者老手系统的熏陶这是一个很好的理论课题,特别适合单打独斗的设计师,你不仅需要技能同样也需要方法论.

08、定义组件

选定可视化图表的组件类型很重要,既要考虑美观,又要考虑实现,需要设计师对专业能力的考验了,不仅需要扎实设计,还需要对几个平台开源开发组件的了解.以下是市面大家所常用的.建议设计师也去了解下.也是补全横向能力更好为工作服务,同时能友好的替开发考虑协调沟通完美的的完成项目.

当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。以下是本次图表所用到的基础组件,都很常用也很实用,有时候不需要多么的花哨酷炫,也可以达到初期所制定的风格思路.

09、图标展示

图标风格的展示也是根据画面来设计,轻重,样式需要一体化.单个精美也是组成画面的一部分,图形没有什么可以多说的,就是造型和颜色上更加严谨.流线型更流畅,这里我是采用了网格化矢量图形进行布尔运算的,切记使用钢笔或者画笔,(当然你能控制住也无妨),直接用形状之间布尔剪切是线条完整流程的基础.配色上尽量通透一些,这个配色就大了,以后有机会可以交流一下.

10、应用展示

是不是感觉不够刺激,看得不够热烈,没错,极简风格是以简约为主,设计的本质是在解决企业的形象同时推动业务的发展,这才是设计的价值,别想着设计能拯救地球啊,可视化没有酷炫的情况下怎么做,这个我是这样做的.

a、把板式做到绝对对齐

b、大小文字规律做到一致性有节奏

c、颜色用到极致的干净,舒服.通透

d、整齐划一绝对统一韵律感齐.(看过阅兵式吧)

(以下未使用).但效果都出来了.从大屏的角度上来说,深色为大家所觊觎的,不过偶尔换换口味也不是一件坏事,重要的数据和指标清晰,帮助实际业务展现及时反馈出问题形成指导,帮助决策人解决实际需要,就完成了大屏的使命.

总结:

设计是多面性的掌握不同的设计技能是每一个设计师经历的过程,能驾驭不同的设计风格,也是设计师追求的目标.追求每一个做到极致,舒服,有节奏是一件不容易的事情,这几年风格的变化需要设计师去更新掌握,国外设计师的作品就很好的展现了这一点,很多追啵上的作品就做到了用最少的做到了最舒服的画面.不管是B端,还是app端,从画面中就能体现,本次设计也正是很好的加深锻炼,极简风格,干净,小清新、对于全局的把控.

借用一句名言,革命尚未成功,还需要继续努力,加油吧~YYDS!