为什么了解大屏设计?

从物联网到大数据,云计算然后到AI,可以说时代发展的速度真的让人不可思议,数据化大有忽如一夜春风来,千树万树梨花开之势.而可视化大屏便是高科技发展催生的产物,是数据化的载体,是人与数据交互的承接物,企业掌握了数据就把握住了发展的方向,这也是各种酷炫数据化大屏在经过了阿里双十一的洗礼后如同雨后春笋般茁壮成长.而恰巧的很,不仅仅是阿里爱大屏,各大企业的领导几乎无一例外对大屏喜爱有加,大屏的意义不仅仅在平时展现数据,他们更是喜欢在大屏下和企业客户大谈战略和发展,展现公司的实力.那么作为一个设计师,你怎么能不了解下大屏设计呢?

一:首先讲下大屏的种类

1、从视觉的角度来说,大屏可以分为无缝屏和拼接屏两种.

基于大部分的实际情况,市面上的大屏几乎都是拼接屏,一般缝隙为1.7mm或者3.5mm，缝隙越小越贵.而拼接屏一般是4:3的高清屏组合,一般是9块或者15块屏幕组成,设计的时候为了更好的效果,我们应该提前建立好参考线,避免自己的设计被大屏的缝隙一切为二,虽然我们的数据不会丢失,但是极大降低了我们的设计水准.甚至我们可以利用好背景和布局,我们甚至可以把拼接屏打造成无缝屏的效果.屏幕的种类的什么我觉得不怎么关设计师的事情,就不在这里说了.一般3✖️3就是常见的,占墙面积就非常大,满足大部分企业的要求.

除了这种尺寸,我在网上也了解到有8✖️4的32块屏幕尺寸,肯定根据实际情况还有很多别的尺寸的,尽管不是很常见,但是还是收集下让大家了解下,如下图

对于屏幕很多的情况,作为设计要考虑的更加的多,在满足需求的情况下,我们可以把数据分块.让整个设计看起来清晰明了,因为我没有真正的接触过,在这里只放在网上人家给出的方案示意图,具体还是得看我们的需求情况.方法都是通用的.

2、从设计的角度来看大屏又可以分为可交互和不可交互两种类型

首先对于网上说大屏不可交互我实在不能苟同,因为大屏展示的往往是一个数据的统计,往往并不能展示数据具体的细节,大部分情况下不能满足客户的闭环思路,他们往往需要看大屏数据细节来源,这就需要数据下探交互.除此之外大屏轮播,以及各板块之间的轮播以及小版块的放大等等需求,都需要交互.纯数据展示无交互的大屏的确存在,数据和后台对接好,根据需求方的要求刷新大屏数据就够了,在这里我就不讲了

交互性的大屏中又包括触摸式或者鼠标操作.数据搭配一般会搭配一个中控电脑操作,如果电脑式触摸屏,我们可以根据手势设计出更多更有趣且酷炫的交互操作,其让演示者的逼格更高,效果更好.如果是普通的鼠标操作一定要注意大屏和普通网页或者app又有着些许区别,因为大屏面向的是少数的客户,可能是一个企业的几个领导或者数据分析师或者监控中心用服人员的,所以交互我们要适当的弱化.例如我们有点击组件进入详细页面的情况,我们不用加入点击的提示,鼠标移入的时候给提示就可以.

二:说一说大屏的设计步骤

很多情况下大家都不能直接拿到原型去做视觉输出,如何从0到1的去落地一个大屏,合理的步骤显得尤为重要.ps有的公司甲方比较专业,需求拿捏到位,开了几次需求收集会议之后直接做需求评审确定范围之后才设计,这样的好处是避免了设计师的来回改稿.有的公司不同,比如我们公司,因为平台是从0到1,甲方对需求有的时候很模糊,我们是要先出设计图最后才能做最后的评审,所以下面的全是个人经验.

步骤一:需求收集

1、大屏的数据内容,即用户想要看的数据

2、统计的时效性,即搞清楚哪些数据是实时的,哪些数据统计的是一段时间的,统计的是那一段时间

3、数据的交互,例如客户想看下探的数据源,我们要搞清楚哪些数据需要下探,是直接下探到平台,还是下探到另外的大屏,形成闭环.

注意:需求收集会议要有邮件邀请,关键干系人都得要求参加,会议要输出会议记录整理成需求文档.避免只对一个客户进行需求收集,会给后期开发带来巨大的需求变更.需求收集最好不要询问客户想用什么图表表示,或者让客户给你网上的参考,他们大多会给你酷炫吊炸天的飞机稿,并且告诉你我就要一模一样的.

步骤二:需求分析

1、分析客户需求

客户往往想看的东西很多也要求很细,会提出一大堆的需求,其中很多需求往往不是有效的,在需求收集的时候我们不要直接拒绝,分析时我们要深入的挖掘需求的价值

2、确定优先级并作需求分类.

在客户要求展现大量数据的情况下,确定数据的优先级和归类尤为重要,这样能帮助我们剔除无效的数据,如果我们一股脑照做,最后还是得走变更

3、拆分维度.

把最后的有效的数据拆分成不同的维度,利于我们寻找合适的图表设计,对于很细的维度的需求我们是不是可以做下探的处理,因为即使很复杂的图表能表达出来,大家也不会仔细去看.这样就起不到大屏的效果,给平台减分.

步骤三:设计输出(这是落地到界面的一步)

1、确定大屏主题风格

这个可以和研发组一起做一个头脑风暴确定主色规范等,但是在真实的基础上往往大屏需要把握住一下几点:

紧张:即动效设计,数据的实时刷新ps切勿过多的动效设计分散客户注意力

科技:炫酷的图表,好看的配色一般切合企业元素或者场景需求

饱满:数据不能过多的情况下也不能过少,过多显得杂乱,过少则没有亮点,空间布局一定要饱满,图表的类型种类多,数据多样,层次分明,主体突出

大部分的大屏以深蓝色为底色,这样视觉不会疲劳,而且也比较省电.动效和实时刷新避免页面长时间静止烧屏,减少屏幕使用寿命.

2、布局

如上已经分析过了屏幕的尺寸,在得到有效展示数据和主题风格的情况下,我们可以先建立布局,栅格式布局合理的规范设计稿

3、寻找相应的图表

目前比较常见的图表平台有百度的Echart(免费)和阿里的DataV(企业版一年5100),因为DataV数据貌似要放在公网上,为了数据的保密性,我们没有采用.大家不要凭空想象,可以先找参考,再结合实际需求作出属于自己的设计稿,也要和开发小哥哥确认可用性.

4、设计以及审查

根据主题色以及规范和布局完成初稿,之后可以和同事商量下征求下意见,然后在各大网站上找一找参考.完成设计了要审查下是否满足了客户的要需求,色彩搭配是否满意,图表是否能表意,动效是否恰当,放在大屏上是否有色差,是否满足规范自己怎么给别人讲自己的设计稿等等.

步骤三:设计稿评审

设计稿评审的目的就是确认范围和确认设计稿!邮件邀请关键干系人参加需求评审,并签字确认需求以及设计稿,这一步非常的重要,宁愿花两天在确认的问题上,不愿花十天在以后的变更上.需求评审确定了范围,原则上不能做大的变更,如果有后期大变更,我们则需要调整项目时间的规划,相应的增加开发时间,增加开发时间则要根据客户签字来确定,不然客户会说自己之前有提,不算超出范围,这时就陷入了项目经理带开发人员没日没夜加班的苦状.

步骤四:不仅仅配合前后端工作

等到设计稿过了之后,设计师并不能有一丝的放松,不仅仅要配合前后端工作,更要的是要多加思考.强如阿里的大屏也是迭代更新了五六次,小更新不知道多少次的情况下,才能在现在如此夺目.如果想让自己的工作得到认可,更加要对自己的工作进行审查思考以及学习.把自己的设计做成组件,等下次设计同类的大屏就可以合理的复用.提高工作效率

网上大屏设计的界面很多,大家可以找找参考,自己设计的大屏也有保密协议就不放了,文章拙见