可视化设计的四要素数据感——UI设计师能够通过简单的需求原形,选择更为准确的部件类型;设计五大元素——能够驾驭科技风、互联网风、FUI风等各种类型的可视化大屏设计;动效设计——帮助可视化层级划分更清晰,提升视觉观感体验;3D效果——运用三维、二维软件,设计3d、2.5d图片、图标。1 .数据感在数据可视化设计中,数据感是首要的核心要素。当面对需求原型图时,设计师首先需要正确分析解读数据,基于实际场景判断低保真原型中图表样式是否恰当,思考是否有更贴切的图表类型可供选择。下图所示,图表分为四大类:比较、构成、联系、分布。在选择图表类型时,一个常见的误区是仅根据数据本身来决定。实际上,真正决定图表形式的是需要传达的信息。例如,当需要分析各银行之间的融资分布情况时,比较类型的图表是首选,其中的柱状图无疑是最直观的数据表达形式。数据感是需要培养的,可以借助如echart等网站进行学习和实践。可以帮助在工作中快速选择图表,从而有效传达数据信息。2 .视觉风格视觉风格在可视化设计中确实占据核心地位,掌握好这一点,无疑会使设计更具吸引力。可视化大屏的风格多以科技感强、深色系风格为主,设计时需要时刻谨记数据+科技的结合。这类风格,通常深色的背景营造强烈空间感,亮色数据指标则更加突出,辅助拟物化、扁平化元素,多样性的光效。带给用户酷炫、未来科幻、FUI的感受,非常适合大型企业,尤其是央企、国企等单位的需求。而这类风格的实现,需要运用可视化设计五要素,即颜色、图片、图标、字体、空间布局,来共同实现2.1贴合行业调性的色彩搭配选择合适的颜色搭配可以让数据更加直观、形象。可视化的行业、领域不同,选用不同颜色的搭配,不仅可以起到独具一格的效果,且让用户透过页面获得行业的归属感。在确定了界面主题配色后,一定要搭配适合的图表配色方案,下图总结几种常见的配色方案。2.2科技感的图片、组件样式可视化图片大致可以分为背景、主视觉、组件三大类。三类图片在可视化页面中扮演着不同的角色,共同的目标是使数据更加直观、生动并易于理解。背景类图片通常是整个可视化页面的基础,它们奠定了整个页面的视觉风格和氛围。通常为深色系搭配透视的元素,能够营造出一种空间感,仿若置身于三维的空间之中。主视觉图片是可视化页面中的核心元素,它们通常用于突出显示重要的数据或信息。设计与数据的主题和内容紧密相关,并且能够直观地传达数据的含义,常见地图、地球、业务逻辑结构图形元素。这类图片,确保它是页面中最亮眼的元素,倾向选择饱和度、明度相对高的色彩搭配,不仅吸引用户的注意力,也方便对数据的抓取。组件类图片用于补充和完善主视觉图片和背景图片,常见导航、卡片标题、数字版、按钮、标签等。设计时,可结合项目方品牌VI、企业文化、地域特色,深度融合个性化定制。以下图为例,某铁路运输企业智慧监控平台,可以从高铁图形出发,进行一系列的设计演变,确保界面既专业又独特,突出行业属性的同时,快速获得客户的认同感。2.3适配语义一致的图标界面中的图标可分为公共图标和看板图标,公共图标是包括控件中的操作类图标,如搜索、下拉、关闭、翻页等。看板图标,作为名称的图形抽象概括。包括科技、扁平两类风格。科技质感,视觉上更加饱满,常见光影、透视效果,更适合用于核心指标的图标风格呈现。扁平化的干净清爽,更适用于次级数据指标使用。2.4规范化字体、字号选用字体时,应考虑字体的可识别性、与当前设计风格是否融合,以及是否已买版权,或选择免费可商用的字体。设计大屏之前,规定合理的字号极为重要。若因字号使用不合理导致的返工,几乎所有相关元素都要进行相应的变动,是件极耗时的事情。基于web端开发,小于12px很多浏览器不会识别,前端的最小使用字号为12px。下面为大家推荐在19201080常规分辨率下,常用字号。2.5合理的空间布局布局,带给用户好的引导性与可读性。平衡感是可视化布局的重要原则,给用户一种稳定与舒适感。为大家介绍几种常见的平衡布局方式:PC端16:9页面,第一种中心布局排版,根据业务需求,将核心关键指标放置中间位置,占较大面积,其余指标按优先级依次展开。第二种上中下布局,按照权重高低,从上到下,从左到右依次排布。可视化宽屏布局可通过业务内容具体分析。常见的两种展示方式:当页面层级明显,主要指标放置中间位置,次级图表数据在两侧展示。当整个页面业务同级,按模块去划分,主要内容在左侧,次要内容右侧。当然,除以上四种布局,根据业务需求不同,版式也会有调整。3.动效能力动效是表达科技感的重要手段之一,它可以提升大屏产品的炫酷程度,营造智能效果,也可以让数据更加生动、形象,是不可或缺的视觉表现增色剂。现在市场上主流动效软件是AE,可以结合Blender、C4D,也是3D动效设计的最佳组合。在设计动效时,首先需要思考页面中哪些元素该动,哪些元素不该动,不能为了设计动效而设计动效,反而忽略数据信息动传达。下面,为大家分享常见的三类动效。3.1入场动效入场动效是元素在进入页面或刷新页面时只出现一次的动效,入场效果一般是缩放、位移、透明度属性的变化。多元素入场时要有先后和主次,例如下图的头部入场动效,系统标题和导航向两侧逐一展开,形成一个层级分明的入场展示。数据展示也是常见的入场动效之一,常见于数字步进、图表加载、实时数据更新等,他们在导航、主视觉入场之后出现,是可视化动效中占比很高的一类。3.2持续动效持续动效是元素在页面中的循环动画,一般用在图标、卡片标题、主视觉、背景渲染等,他们的出现让页面更加灵动鲜活起来,如下图:但要注意,一个页面中不宜出现多处持续动效,否则会导致视觉难以聚焦数据信息。3.3混合式动效混合式动效是常见主视觉的动效展示方式,主视觉承载界面的视觉焦点,其他位置的动效都不应该比主视觉动效更抢眼。通常有入场+持续两种动效模式。如下视频:可以看到,首先入场的是框架层、主视觉,数据图表在次级入场。入场动效结束后,页面中持续动效只有主视觉与一些面积较小的元素。这样的设计,界面主次关系一目了然,并快速建立对页面主要数据的抓取。在可视化中,动效可以为用户创造更加愉悦和无缝的体验,有效提升可视化大屏品质的。未来,关于它的使用场景也会越来越多,希望大家多多学习,打好动效设计的基础,提高在可视化领域的核心竞争力。4.3D能力3D景深确实能够为用户带来强烈的空间感和沉浸式的视觉体验,这在游戏、电影、建筑可视化以及数据可视化等领域都发挥着重要作用。3D可视化对于UI设计师要求更高,设计师要有很好的立体想象能力和空间感。同时,学习专业的3D设计工具,如Blender、Cinema 4D(C4D),这些工具能够帮助设计师构建复杂的3D场景,并通过材质、光影等效果让作品更加生动逼真。对于需要实现3D交互的应用场景,如游戏开发、数字孪生等,设计师还需要学习使用如U3D、UE4等游戏引擎开发软件;这些软件提供了强大的3D渲染和交互功能,具备实时数据接口,能够实现与后台数据的无缝对接;想要更好的掌握它们,还需要一定的编程基础,如C++、C#等。虽然3D软件在3D设计中是不可或缺的工具,在立体效果展现上,也不一定全然依靠3D软件。通过透视的设计手法,使用PS、Sketch软件,也可以轻松实现。二维软件有效缩短时间,降低对电脑配置的要求,且不会给开发增加额外成本。通过巧妙地运用光影、阴影和透视等技巧,设计师可以营造出令人信服的2.5D或伪3D效果。下图,展示了如何结合3D软件渲染背景,在通过透视手法使用ps、sktechs设计有立体感的图形元素。这种方法既保证了视觉效果的出色表现,又兼顾了实际操作的可行性和效率。下图,是用ps设计的图片、icon和部件样式,若页面数据较空或过于平淡,不妨试试这类效果,适当的立体效果的增加,也可以为可视化页面的多添一分科技炫酷的氛围感。建立可视化学习体系建立属于自己的可视化学习体系,关键在于多看优秀案例,积累灵感;多动手实践,提升技能;多思考总结,不断优化。推荐利用在线资源,线下书籍,参与社群交流,持续学习新技术和趋势,逐步构建并优化自己的可视化学习体系。以下是一些值得推荐的可视化灵感网站:1、Behance:Adobe旗下的平台,集合了全球各地的设计师作品,涵盖了平面、UI/UX、插画、摄影等多个领域。2、HUDS+GUIS:一个给设计师提供灵感和资源的网站,有很多创意有趣的设计,所有案例基本都有动效展示。3、Dribbble:设计师们分享和发现创意作品的社区,适合寻找灵感和学习最新设计趋势。4、Pinterest:一个视觉搜索和发现引擎,你可以通过关键词搜索找到大量的可视化设计灵感。5、站酷、花瓣、UI中国:国内知名的设计分享平台,提供了大量本土设计师的作品和教程。
(图片来源网络,侵删)
0 评论