首页

大数据可视化界面设计之一:超全面的数据可视化设计指南:风格篇

博博

各位数据可视化设计师们大家好,鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方,阿勇决定花一些时间去详细剖析一下关于这方面的知识,全部都是多年工作经验所得,绝对有料。

整个合辑一共有 10 篇文章,分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章,详细的讲一讲可视化大屏设计的知识点。


风格篇主要包含:常用风格 > 风格解析 > 风格选择 > 风格应用。

本篇文章将会从风格分类入手,进行风格解析,总结可视化设计的风格,选择风格并应用到场景,教大家如何选择合适的风格应用到商业可视化项目中。

画面中的动效 GIF 图会比较大,请大家耐心等候加载~

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

总结了商业项目中遇到的一些可视化案例以及科幻可视化风格,大体的将其分为三个大类:传统风格、HUD 风格、FUI 风格。


传统酷炫风格


传统狭义上的数据可视化, 更多是纯图形去代表数据,通过图形去展示数据,直观的展示所需要表现的指标。数据可视化也有很多分类, 不过也许你也懒得了解了。

比如,网站后台分析,可以说是可视化分析报表类的,例如百度统计,谷歌统计等等;比如,面对 B 端后台的数据可视化,国内做的最好的无非就是 antdesign,element;我们此处说的是基于 G 端的数据可视化大屏,G 端数据可视化从本质上来说是注重直接解决问题,通过直观的展示数据图表去了解各个指标的详细数值;

也有甚者比较注重视觉效果,要酷炫,心理学家说, 人脑 70%的神经信号来自视觉, 我们的视觉系统最完善, 而不同的感官之间, 多少是可以转化的, 而且是每个人的天性。国内传统可视化对于此处的接受程度确实不一样。B 端和 G 端的用户,对于可视化风格的接受程度确实是不太一样的,B 端对于前沿技术以及可视化表现会有一定的接受能力,但是 G 端更多注重于界面酷炫,功能反而不是很重要了,这多少有点本末倒置的感觉。

超全面的数据可视化设计指南:风格篇

在传统可视化面前,页面的杂糅程度较强,彷佛是由一块块图表堆砌而成,比较注重色彩的运用,多色搭配,色彩一般具有特质。一般大多数可视化可以看到共同的点就是:配色/布局/构图,机械而又重复,彷佛一个流水线生产出来的。当然,现如今新基建乃是主流,人群对可视化大屏的认知和审美也在逐渐提升,设计师在以后的工作中还需要取长补短,多吸收一些好的东西去丰富我们具有中国特色的数据可视化大屏设计。


HUD 风格


平视显示器(Head Up Display),以下简称 HUD,是运用在航空器的飞行辅助仪器。平视的意思是指飞行员不需要低头就能够看到他需要要的重要资讯。平视显示器最早出现在军用飞机上,降低飞行员需要低头查看仪表的频率,避免注意力中断以及丧失对状态意识(Situation Awareness)的掌握。

因为 HUD 的方便性以及能够提高飞行安全,民航机也纷纷跟进安装,汽车也开始安装,在一些游戏用户界面,很多地方都会采用 HUD 的风格,比如射击类,格斗类,动作类游戏等等(赛博朋克,堡垒之夜,绝地求生)。

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

在设计的细节当中使用大量的图形元素,并辅以一定的装饰元素,主要以点线为主装饰,排版版式参考价值较强。HUD 相比较于传统和 FUI 来说,更贴合我们的日常设计,对于图形的展示也更加的有意义,所以透析 HUD 风格,对于提升可视化设计水平有很大的帮助。


FUI 风格


相对于当前流行的扁平化设计,FUI 可谓是在 Ul 设计中独树一帜,设计风格十分鲜明,极具未来感和科技感。

FUI 是一个非常有趣的 Ul 设计领域,是我们在日常现实生活之中天法探索的用户界面设计方式。在我们的日常工作中,通常日常设计很难有机会为宇宙飞船、时间旅行设备,或者感知型人工智能和外星人使用的用户界面做设计。FUI 使设计师有机会去突破现有的用户体验和用户界面的限制,探索一个新的领域。通过虚幻界面设计我们可以大胆的设想以及寻找新的解决方案。例如我们可以大胆的设想 AR 技术的应用,地图可以采用全息投影技术、人与智能硬件的环境交互等等。

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

虚幻界面设计甚至可以是新的发明,它们可以作为一种概念的验证它们可以启发我们,提出问题,探索什么可行,什么不可行。正如科幻小说可以激励人们登上月球或建造自动驾驶汽车一样,虚幻用户界面可以激励人们为未来创造技术。

FUI 的图形装饰元素可以说是极其丰富,形式感很强。在设计的细节当中使用大量的“异形”的图形元素,并辅以一定的装饰元素,但是一定程度上对于设计中繁琐的需求,需求层次上寻找设计灵感没有太多帮助。常用在科幻电影以及概念游戏等领域,落地较难。


升华:如何培养出自己的可视化设计风格


如何培养和完善自己的可视化设计风格呢?其实这个问题有点狭隘,不同客户不同使用场景我们可能风格都会不太一样,但是唯一我们不会变的是我们对于组件图表的理解,图表图形的展示形式。

  • 传统风格:多种色彩
  • FUI 风格:科技图形
  • HUD 风格:版式排版

超全面的数据可视化设计指南:风格篇

一个合格的可视化设计师,对于任何可以参考的页面,都可以迅速领略到可以应用的部分页面和展示形式,多吸收知识,提升自己,这就是取其精华,去其糟粕的正确解答吧!所以要将现有风格结合,完善设计理念,提升视觉技法,这才是当下比较重要的。

超全面的数据可视化设计指南:风格篇

最近由于工作中的一个项目,对自己充满了怀疑,究竟什么叫科技感?不同的应用场景,科技感是否还依旧有效?同展示条件下不同应用场景,又会有什么样的差异?究竟是什么样子的设计,才能被“甲方爸爸”认定为科技感十足,并且很酷炫呢?从酷炫科技感出发,总结了以下四个方面去解析科技感风格。

  • 科技感的界面有哪些特征?
  • 同展示条件下不同应用场景,又会有什么样的差异?
  • 三维的表现形式,是否真的跟科技感成正比?
  • 面对段落文本需求,列表需求等如何把页面做出科技感?

超全面的数据可视化设计指南:风格篇

1. 科技感的界面有哪些特征?

相信很多可视化设计师听到最多的一句话:要酷炫,要科技感!每每听到这句话我都会变得非常暴躁。究竟是酷炫科技感代表可视化?还是数据可视才是可视化的内核?每每遇到这种令人糟心的问题,我想的是如何通过自己的专业知识去解释,可是我发现根本解释不清楚,也无法令甲方客户信服,甚至和同为乙方的总包也无法达成统一战线。那么我们应该如何去做呢,又应该如何去解释科技感这个抽象的概念呢?

超全面的数据可视化设计指南:风格篇

配色

提到科技感色系一般我们想到的就是蓝色系(科技蓝),但是很多人可能走进了一个误区,科技感的专属色彩并不是只有蓝色,而且一些蓝色确实让我们有审美疲劳的感觉。如图,就是我们比较常见的传统可视化设计,一眼看去满屏都是蓝色,具有中国特色的蓝色科技感。正如所有人都公认的党建题材为红色加黄色,那么科技感真的只有蓝色专属吗?党建题材都是红色专属吗?

超全面的数据可视化设计指南:风格篇

由此可见,红色并不是党建题材的专属色彩,存在即合理,也并没有说党建可视化一定要做成红色的。制约的因素有很多:项目背景,项目需求,设计提案,专业认知等等,可视化大屏归根结底还是做的是服务设计,因此服务好客户,得到客户的认可,就能体现设计的价值。但是在设计稿中可以发现,界面运用到了一些党建色彩的元素,也是通过这种方式去展示,这也是设计师需要注意的一点。

  • 传统科技蓝风格可视化

超全面的数据可视化设计指南:风格篇

  • 其他科技蓝风格可视化

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

  • 橘色科技感风格可视化

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

由此我们可以推断,配色是塑造科技感界面的一个比较重要的因素。色彩的选择需要根据实际所运用到的场景,比如安全行业,蓝绿色会比较好一点;比如公安行业,传统蓝色就比较合适;比如卫星地图,用蓝色就不合适;根据不同的业务范畴以及不同的应用场景去确定配色,这才是我们要做的。

蓝色并不是科技感的专有属性,任何一种颜色都是可以塑造科技感的感觉的。比如适合用绿色的场景做的界面,没有做好看,那只能怪自己学艺不精,跟配色无关。不排斥蓝色,但是讨厌到处都是用蓝色,上来就是用蓝色。

背景

说到背景这是一个影响科技感非常重要的因素,一张超神比比皆是,一张超鬼也是随处可见,究竟什么样的背景才是一个优秀的可视化界面所具备的?不是画面发光,有闪光点,宇宙或者银河那种图;也不是科技点线,带渐变的线条(混合工具做出来的那种)看起来就特别复杂;也不是那种亮度超过画面任何一个元素的图。

超全面的数据可视化设计指南:风格篇

科技感的背景所起到的作用应该是衬托画面,而不是在画面中比较跳,抢视觉,一大坨发光或者复杂的图形,只会起到反作用。

一个好的背景一定是不影响视觉的同时,衬托画面和主视觉,如果整个页面分黑白灰三层,那么背景一定是黑的那一层,这样的画面效果才会好。

图形

图形应该是以上指标中,最令人可以接受对科技感风格诠释的一种,科技感的图形到底有哪些特征,我们又该如何去做呢?

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

通过以上案例我们可以发现,所谓图形表现科技感,最大的特征就是点线面应用的多元化,通过一种或者多种规律将点线面组合起来,线条粗细长短不一,点大小不等。在使用图形进行点缀搭配时,切不可过于花哨,从而抢了主要内容的风头。

不规则图形,点线装饰,色彩,外发光,都是图形诠释科技感的方式。

此处可能会出现一些三维样式的图形,特殊的视角以及不常见的设计都会增加科技感的元素,但是也不是所有的三维都可以比二维更有科技感的。我最近做的就是甲方客户一直觉得:三维元素太少了,科技感不够。我就纳闷了,到底什么才是科技感?难道科技感只能用三维的来表示了?只能说一定条件下,三维是优于二维展示的,但这也不是绝对的。如果你的场景主视觉本身就是二维范畴的,何必要要求组件三维展示。

下图的二维科技感表现上肯定是超过三维地球的,至少我是这么认为的。

超全面的数据可视化设计指南:风格篇

动效

动效应该是最能体现科技感的方式了,通过动态演示组件,通过动效展示界面,远远比静态页面要合理的多。动效主要是通过:位移、旋转、透明度(闪烁)、缩放等方式去制作,形成独特的动画节奏。

最常用的科技动画:粒子动画,线条动画,辉光,剪切路径,偏移字符等等。

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

可以发现科技感动效一般都伴随着极快的闪烁动画,动画的节奏也是比较偏快,再通过出现动画,字符偏移,剪切路径等演示组件的形成过程。

2. 同展示条件下不同应用场景,会有怎样的差异?

可能大家没有遇到过这种情况,比如在三维建筑可视化中,科技感本身就依赖于场景的表现,但是不知道大家有没有试过,将三维建筑可视化换成二维 GIS 之后,我们如何去使画面表现的更具科技感呢?

图一,图二,图三分别就是替换不同的场景,那么我们来看看这些场景为什么不适合原本的之前的科技感风格呢,我们一起思考一下~

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

以上三张图可以看出,图一的飞机可视化是画面的原稿,后两张是在同一种设计面板,替换了不用的主视觉场景,由此可以看出不同主视觉场景可能对应不同的风格 UI 组件,没有通用的组件,如果想完美表达一些面板组件,那么需要取设计不同风格的主视觉场景才可以。

大家可能会觉得科技感只针对于一些特殊的场景,或者说是深色场景,比如一些实景地图和卫星地图又该如何去表现科技感的元素呢?那么如果是浅色可视化我们又该如何去做科技感呢?

科技感风格应用于不同的场景,那么表现科技感的方式也是有很大的不同的。

超全面的数据可视化设计指南:风格篇

3. 三维的表现形式,是否真的跟科技感提升成正比?

其实这本身就是一个伪命题,三维表现对画面的冲击力是非常强的,对于画面视觉效果的提升有很大的帮助。不过是否所有的三维就是最合适的呢,这个也确实有待商榷。不过能肯定的是,一定程度上,三维一定会比二维更加具有冲击,更加具有科技感。

首先必须要确定的是,此处三维一定是科技感点线组成或者说是线描类型的三维主体,而不是实景以及仿真的主体,当然并不是绝对的,此处针对大多数场景下。

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

可以通过以上图片看出,科技感一定伴随的是大量的点线装饰,画面主体一定是最突出的地方。而不是有时候遇到的是:GIS 地图就是很普通的样式,可编辑性不是很强,样式也比较老旧,对设计就会造成大量的困扰。在主视觉没有完美表现的时候,就不要强求说把两边去做好看,主视觉不好看,那么图表做的特别华丽也只是让主视觉更掉分。

其实最正确的表现就是二维表现加上三维场景展示,两者相辅相成,对于画面的展示才是最好的。通过下面这组案例可以发现,二维表现加上三维场景才是最优解。

超全面的数据可视化设计指南:风格篇

4. 面对段落文本列表需求时如何把页面做出科技感?

很多同学对于文字需求如何制作科技感有很多的疑问,通过最近的作图,总结出四种关于文字排版科技感的展示,总结起来其实就那么几点:装饰,图形,字体,版式,表现形式…

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

其实对于数据可视化设计科技感的研究,不仅需要了解表现层,更需要上升到业务层。一些特定的图形或者装饰,对于画面的丰富程度一定是有帮助的。

讲了这么多,不知道对大家理解科技感是否有帮助,如何提升画面科技感,是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中,多多酷炫,多多科技感!!!

超全面的数据可视化设计指南:风格篇

1. 根据场景-了解展示需求

场景是什么?是人物、时间、地点三要素所组成的特定关系。在某某时间(when),某某地点(where),特定类型的用户(who),干了某某事情(what)。

因此我们要确定的是,根据这四个“W”去确定整体业务框架的基础构成,这对于设计风格的初步意向确认有着很积极的意义。

超全面的数据可视化设计指南:风格篇

  • who:王局长
  • when:领导人会议时
  • where:公安局
  • what:新基建建设 数字化转型事项

在领导人会试上,公安局王局长提议通过了关于新基建,数字化转型的各种措施。面对这一场景,有以下几个问题。受众是谁?需要干什么事情?谁去干?数字化转型怎么做?怎么实现?需要用到的技术?展示风格?重功能?还是重展示?

在有了这些的前提下,对于我们设计风格的选择就有了很强的指导意义,比如王局长比较喜欢多色搭配,科技感强的风格,主要为了配合展示汇报,那么就可以通过这一些需求,初步制定风格为效果酷炫的展示类大屏,但是主视觉的展示形式还是要根据其他的具体情况去进一步确认。

2. 根据含义-确立设计方向

在面对一些特有的项目时,一般客户会给出一些参考术语:“3 个一带”,“2 个方针”,“八大成果”“三山,两水,百林,千田”……

面对这种问题,能做的就是理解其包含的真实意义,究竟需要展示哪方面的,了解清楚项目的背景需求,结合客户所说的一些关键字段,剖析以上的内容可以发现,客户通过一些方针和方法,对“山水林田”进行治理,取得了一些阶段性成果。

超全面的数据可视化设计指南:风格篇

因此展示的内容可以确定为智慧治理,或者智慧生态方向的,然后就可以根据项目背景的内容去选择可以应用的具体的一些方案了。

3. 根据需求-明确设计内容

因在到了需求分析的阶段,可以根据客户提供的大量的资料和业务需求,去明确的设计方向,究竟是需要展示哪些内容?可以提供的数据有哪些?展示条件(硬件设施)是否具备?想要的效果有哪些?

超全面的数据可视化设计指南:风格篇

比如客户需要查看到山水林田的各个改进措施的效果,以及改进前后的效果对比。说到这单纯的二维 GIS 和影像已经不太好满足了,那么可以将场景风格定位到三维展示,需要实际 1:1 建模,至于是通过 WEBGL,UE,UNITY 就看各自的团队擅长的方向了。

场景大体风格确定,那么展示面板需求根据场景去搭建就可以了,这样一个完整的风格选择过程就算初步走通了,具体的验证环节,可以在一次次会议中再去进行交流和修改即可。

超全面的数据可视化设计指南:风格篇

二维 GIS(深浅)、卫星影像

  • 优点

展示容易,风格切换皮肤多,可编辑性高,开发难度低,地图资源较多,适合快速搭建可视化大屏模版,开 源内容较多,前端开发直接调用样式即可。

  • 缺点

展示形式较普通,地图风格样式不出彩,设计效果也会打很多折扣,很难与同行拉开差距。

  • 难点

开发过程中可能需要基于高德 API 以及一些平台,对封装地图进行二次开发,没有 GIS 开发经验的前端,会比较困难。

  • 网址

https://lbs.amap.com/product/mapstyle#/ Mapbox,高德 API,百度 API,超图,天地图等等。

以高德 API 为例

超全面的数据可视化设计指南:风格篇

矢量地图、省市区块

  • 优点

展示灵活,可下载 svg 矢量区块,并可下载 json 文件直接交付开发,可下钻到县级,可编辑性高,一般会结合二维 GIS 来展示,有插件可以直接绘制全国地图。

  • 缺点

不够立体,可选样式比较少,画面主视觉容易空洞导致画面效果不强。

  • 难点

开发对于设计图的一些效果还原比较困难,例如发光,渐变等等。只能做一些比较基础属性的修改,对于效果还原可能达不到 80%以上。

  • 网址

http://datav.aliyun.com/tools/atlas/

以 DATAV 地图下载器为例

超全面的数据可视化设计指南:风格篇

矢量地图模型、省市区块

  • 优点

展示效果好,三维场景,有立体效果,材质贴图不同效果会完全不一样,可编辑性较强,相比较二维更推荐这种表现形式。

  • 缺点

三维范畴,不会三维知识的小伙伴会比较难,此处会涉及到三维软件合并挤压,展 UV,漫射贴图,QGIS 制作高度贴图,PS 制作法线贴图等等知识点。

  • 难点

对于不懂三维的小伙伴比较困难,涉及知识点较多,容易一知半解。

  • 教程

https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA (原作者已授权)

3D 地图建模及贴图的制作获取方法

超全面的数据可视化设计指南:风格篇

三维模型、城市建模

  • 优点

展示形式新颖,展示效果非常好,三维表现往往让人耳目一新,对于可视化的展示可以说是所见即所得,深得客户喜爱。

  • 缺点

开发难度高,专业性人才比较少,懂三维的设计也是非常的少,对于三维知识以及引擎开发知识需要比较熟悉才行。

  • 难点

人才稀缺,入门难,做好更难,教程自学难度有点大,例如 cityengine 程序化建模,houdini 程序化建模等等。

  • 教程

https://space.bilibili.com/21247145?from=search&seid=10582171815506234319

cityengine 程序化建模

超全面的数据可视化设计指南:风格篇

知识图谱、数据中台等

  • 优点

主视觉效果强,特殊场景的处理能够很完美的讲清逻辑,对于图形化的理解有很强的意义。

  • 缺点

逻辑复杂,难懂,比较抽象,专业难度高,对业务理解能力需要很强。

  • 难点

逻辑处理比较难,设计效果比较难以想象,设计容易偏离主题,比如数据中台,是一个非常虚幻的东西,很难讲清楚处理逻辑和过程。

  • 网址

https://www.zcool.com.cn/work/ZMzg4OTQ5ODQ=.html

以知识图谱为例

超全面的数据可视化设计指南:风格篇


知识点总结


可视化风格三大分类以及对于图形的应用(传统、HUD、FUI);

如何培养自己的数据可视化设计风格(色彩+图形+板式);

影响科技感风格的四大影响因素(配色,图形,背景,动效);

设计风格的选择以及确定思路(根据场景、含义、需求);

可视化风格的应用以及拓展(各种主视觉的应用优缺难点)。

超全面的数据可视化设计指南:风格篇

讲了这么多,不知道对大家理解科技感是否有帮助,如何提升画面科技感,是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中,多多酷炫,多多科技感!!!不知道大家有没有一种错觉,突然有一段时间,某个时候发现自己突然不会做设计了,啥也想不明白了,莫名的有点浮躁,做什么都不能专心。其实很简单,总的来说就是,你即将突破现有的设计水准,如果能想明白,解决掉问题,你的审美以及设计水平都会有很大的进步。这就是别人口中的,突然就会了,知道怎么做了,其实无非就是积累够了,需要升入下一个等级了~

作者:生活因你而火热

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设

ui设计,界

计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇












大数据可视化界面设计之二:可能是最详细的大屏数据可视化设计指南!

博博

@UX-BOY :可能是大屏数据可视化设计介绍最详尽的一篇文章,帮你尽量躲开大屏数据可视化路上那些坑。

可能是最详细的大屏数据可视化设计指南!


文章目录


  1. 基础概念
  2. 大屏数据可视化设计原则
  3. 大屏可视化设计流程
  4. 大屏设计的注意事项
  5. Q&A
  6. 总结


基础概念


1. 什么是数据可视化

把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。

在当前新技术支持下,数据可视化除了「可视」,还有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射,是抽象数据的具象表达。

可能是最详细的大屏数据可视化设计指南!

可能是最详细的大屏数据可视化设计指南!

△ 数据可视化作品《 launchit 》,作者:Shane Mielke

作者写了本书,地图上显示了世界各地读者的分布情况及对应人数。

可能是最详细的大屏数据可视化设计指南!

△ 数据可视化作品《 world-drawn-by-travelers 》,作者:TripHappy

国家之间相互连通的旅游路线,颜色越相近的国家,表明两个国家的人们互动越频繁。

2. 什么是大屏数据可视化

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。

「大面积、炫酷动效、丰富色彩」,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。电商双11时大屏利用此特点打造了热烈、狂欢的节日氛围,原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。

可能是最详细的大屏数据可视化设计指南!

利用面积大、可展示信息多的特点,通过关键信息大屏共享的方式可方便团队讨论和决策,故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。

数据分析类:

可能是最详细的大屏数据可视化设计指南!

△ 图片来源:必应,图片作者:帆软软件有限公司


大屏数据可视化设计原则


大屏数据可视化设计原则:设计服务需求、先总览后细节。

1. 设计服务需求

大屏设计要避免为了展示而展示,排版布局、图表选用等应服务于业务,所以大屏设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢?业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标,是大屏数据可视化的价值所在。

2. 先总览后细节

大屏因为大,承载数据多,为了避免观者迷失,大屏信息呈现要有焦点、有主次。可以通过对比,先把核心数据抛给用户,待用户理解大屏主要内容与展示逻辑后,再逐级浏览二三级内容。部分细节数据可暂时隐藏,用户需要时可通过鼠标点击等交互方式唤起。


大屏可视化设计流程


规范的流程是好结果的保证。找到一个可参考的流程,然后步步为营,就能避免很多不必要的返工,保证设计质量和项目进度。

可能是最详细的大屏数据可视化设计指南!

1. 根据业务场景抽取关键指标

关键指标是一些概括性词语,是对一组或者一系列数据的统称。一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。以共享单车电子围栏监控系统为例,这里的关键指标有:企业停车时长、企业违停量、热点违停区域、车辆入栏率等。

确定关键指标后,根据业务需求拟定各个指标展示的优先级(主、次、辅)。

可能是最详细的大屏数据可视化设计指南!

2. 确立指标分析维度

「横看成岭侧成峰」。同一个指标的数据,从不同维度分析就有不同结果。很多小伙伴做完可视化设计,发现可视化图形并没有准确表达自己的意图,也没能向观者传达出应有的信息,可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。

可能是最详细的大屏数据可视化设计指南!

上图向大家展示了数据分析常用的4个维度,我们在选定指标后,就需要跟项目组其他小伙伴讨论:我们的各个指标主要想给大家展示什么,更进一步的讲,是我们想通过可视化表达什么样的规律和信息。而上图,可以引导我们从「联系、分布、比较、构成」四个维度更有逻辑的思考这个问题。

  • 联系:数据之间的相关性。
  • 分布:指标里的数据主要集中在什么范围、表现出怎样的规律。
  • 比较:数据之间存在何种差异、差异主要体现在哪些方面。
  • 构成:指标里的数据都由哪几部分组成、每部分占比如何。

当然,上图例举的示例图表都比较传统,在大屏数据可视化中常还有另一类地理信息(常以2/3D地图、地球呈现)出现。上图虽未包含这类图形,但它提供给我们的确定数据分析维度的思路和方法是相通的,可借鉴。

3. 选定可视化图表类型

当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。

选定图表注意事项:易理解、可实现。

易理解

可视化设计要考虑大屏最终用户,可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形。

可能是最详细的大屏数据可视化设计指南!

可实现

我们需要了解现有数据的信息、规模、特征、联系等,然后评估数据是否能够支撑相应的可视化表现。

我们设计的图形图表,要开发能够实现。实际工作中,一些可视化效果开发用代码写很容易实现,效果也不错,但这些效果设计师用 Ps / Ai / Ae 这些工具模拟时会发现比较困难;同样的,某些效果设计师用设计工具可以轻易实现,但开发要用代码落地却非常困难,所以大屏设计中跟开发常沟通非常重要,我们需要明确哪些地方设计师可以尽情发挥,哪些地方需要谨慎设计。一个项目总有周期与预算限制,不会无限期的修改迭代,所以设计师在这里需要抓住重点,有取舍,不钻牛角尖、不死磕不放。

可能是最详细的大屏数据可视化设计指南!

4. 了解物理大屏,确定设计稿尺寸

多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率。有多个信号源时,就会有多个设计稿,此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率。

可能是最详细的大屏数据可视化设计指南!

一般情况下设计稿的分辨率就是电脑的分辨率,当有多个信号源时,有时会通过显卡自定义电脑屏幕分辨率,从而使电脑显示分辨率不等于其物理分辨率,此时,对应设计稿的分辨率也就变成了设置后的分辨率。此外,当被投电脑分辨率长宽比与大屏物理长宽比不一致时(单信号源),也会对被投电脑屏幕分辨率做自定义调整,这种情况设计稿分辨率也会发生变化。所以设计开始前了解物理大屏长宽比很重要。

5. 页面布局、划分

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

可能是最详细的大屏数据可视化设计指南!

6. 定义设计风格

很多小伙伴也许没接触过大屏设计工作,但大多数人都应该有 APP 或者 Web 风格定义的经验。我们在定义一款 APP 或者 Web 页面设计风格时常用的方法是什么呢?情绪板。

大屏虽酷炫,但实际上也是运行在浏览器里的 Web 页面,所以大屏设计风格定义方法也同样可以用情绪板来做,这种方法也是目前比较科学高效的风格定义手段。

可能是最详细的大屏数据可视化设计指南!

上图提供了情绪板应用的脑图,具体操作细节不做介绍,不太了解的小伙伴可以自己找找资料。

编者按:一篇好文帮你扫盲,运用情绪板搞定设计→《该怎么运用情绪板,才能让设计作品更有说服力?》

情绪板的一套流程下来,我们定义的风格基本是科学准确的,可以指导我们执行设计。如果是给甲方做大屏,这个流程也可以让我们提出的方案更有说服力。

7. 可视化设计

根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来说大屏可视化主要有指标类信息点和地理类信息点两大可视化数据。指标类信息点可视化效果相对简单易实现,而地理类信息点一般可视化效果酷炫,但是开发相对困难,需要设计师跟开发多沟通。地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点,所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求,硬件配置不够的情况下可能出现卡顿甚至崩溃的情况,所以这点也是需要提前沟通评估的。

可能是最详细的大屏数据可视化设计指南!

8. 样图沟通确认

这里的沟通分三个层面:设计师对内沟通、设计师对外沟通、设计师与大屏的「沟通」。

可能是最详细的大屏数据可视化设计指南!

样图沟通环节,最初的样图不需要十分精致,我们可以把它理解为一个「低保真」原型,然后通过不断沟通修改,让它逐步完善精致起来,也就是小步快跑,避免那种一下子走到终点,然后又大修大改的情况。

因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点,所以这一步我们需要用尽可能简单的方法 ,把之前几步的成果在页面上快速体现出来,然后根据样图效果尝试确定五方面内容:

  • 之前确立的布局在放入设计内容后是否依然合适;
  • 确立的图表类型带入数据后是否仍然客观准确;
  • 根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受;
  • 已有的样式、数据内容、动效等在开发实现方面是否存在问题;
  • 大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象。

跟大屏「沟通」是比较重要也是个特殊的环节,这也是我觉得大屏设计跟其它设计不一样的地方,大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境,这里的很多问题只有设计稿投到大屏上才能够被发现,所以这一步在样图沟通确认环节非常重要,有时候需要开发出 demo,反复测试多次。

9. 页面定稿、开发

事实上页面开发阶段并不是到了这一步才进行,这里说的页面开发仅指前端样式的实现,实际上后台数据准备工作在定义好分析指标后就已经开始进行了,而我们当前的工作是把数据接入到前端,然后用设计的样式呈现出来。

可能是最详细的大屏数据可视化设计指南!

切图与标注

由于大屏实际就是一个 web 页面,所以开发阶段的切图与标注是少不了的。

切图:哪些元素需要切图,怎么切?

一般开发用代码写不出的样式或动效,都需要设计师切图作支持:比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。

标注:Web页面用什么插件做标注这个大家都很熟悉,我就不多说了。需要注意的是,如果大屏页面需要在不同比例的终端展示,那么此时的标注与开发可以使用 rem 作为基本单位来实现,这样实现的大屏页面在后期会有更好的扩展性与适应性。

10. 整体细节调优与测试

这部分是指页面开发完成后,将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。

视觉方面的测试(有点像 APP 的 UI走查):关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。

性能与数据方面的测试:图形图表动画是否流畅、数据加载、刷新有无异常;页面长时间展示是否存在崩溃、卡死等情况;后台控制系统能否正常切换前端页面显示。


大屏设计的注意事项


1. 字体使用

字体优先使用系统默认字体,需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

可能是最详细的大屏数据可视化设计指南!

如果页面是云端部署,需要嵌入字体包时,我们可以使用 FontCreator 这类的软件把那些用不到的字符从字体包中删掉,然后重新打包上传,减小字体包大小,可以优化页面加载体验,避免在替换默认字体的过程中出现页面文字跳动等现象。(一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符,对于大屏这个明确的场景,我们可以删掉其它使用不到的字符,仅保留中文、拼音和数字)

可能是最详细的大屏数据可视化设计指南!

2. 颜色搭配

色彩明度与饱和度差异显著、对比鲜明, 尽量避免使用邻近色配色。

可能是最详细的大屏数据可视化设计指南!

使用深色暗色背景:深色暗色背景可减少拼缝带来的不适感。由于背景面积大,使用暗色背景还能够减少屏幕色差对整体表现的影响;同时暗色背景更能聚焦视觉,也方便突出内容,做出一些流光、粒子等酷炫的效果。

渐变色慎重使用:大屏普遍色域有偏差,显示偏色,因而使用渐变色需要根据大屏反馈确定是否调整,纯色最佳。

3. 页面布局

主次分明、条理清晰、注意留白,合理利用大屏上各个小的显示单元,并尽量避免关键数据被拼缝分割。

可能是最详细的大屏数据可视化设计指南!


Q&A


1. 设计稿投到大屏上显示效果不佳怎么办?

大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下,我们应该在设计开始前,就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品,然后投上去查看实际效果。因为大多数时候大屏都会存在色彩偏差,这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现,如果不可以,那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面,样图沟通环节及时测试也很重要。

2. 大屏设计定稿后,切图切几倍图?

由于是将我们电脑屏幕投射到了大屏,大屏上的内容是运行在我们电脑浏览器上的页面。所以切图根据我们电脑的分辨率,正常切1倍图就可以了。

3. 1920*1080的设计稿,投到9000*4320的屏幕上,文字图片会虚么?

看情况,视大屏系统硬件规格与观看距离来定。这块有四个概念需要跟大家交流一下。

大屏逻辑分辨率(设计稿尺寸)、显卡输出分辨率、视频矩阵切换器( DVI )支持分辨率、大屏实际物理分辨率。

一般后两个是没问题的,大屏跟矩阵切换器是由大屏厂商提供,一般刚好配套大屏。容易出问题的是显卡输出分辨率,我们电脑屏幕分辨率并不是最终显卡传递到 DVI 接口的分辨率,传递到 DVI 接口的分辨率是电脑显卡所能输出的最大分辨率(部分电脑可设置或自定义输出分辨率)。输出分辨率等于 DVI 支持分辨率时显示效果最佳。输出分辨率低于 DVI 支持分辨率,DVI 会将信号放大后传递到大屏,放大的过程中就有图像信息丢失,虽然此过程中有各种算法支持去保证图像尽可能清晰,但算法再好,跟真实图形还是有差距的。此外,多信号源投射效果优于单个信号源投射。对于现场直播数据大屏,一般至少有两个信号源,一个投屏,另一个也投屏但是处于备用状态。

离大屏的距离也影响观感,一般离得近,颗粒感明显,距离稍远,会显的较为清晰。

4. 设计稿完成开发后,发现在大屏上页面有被拉伸或者压缩的情况,怎么补救?

一般来讲,开发只需要对设计图做还原即可。但特殊情况下,比如显示器扩展不正确导致页面被拉伸或压缩,这时就需做处理:我们可以先得到被拉伸/压缩的比例,然后对整体视图做压缩/拉伸处理,再由其拉伸/压缩,这样被拉伸/压缩的瑕疵就可以得到一定程度上的矫正。另外,了解被投电脑硬件特点,有的电脑可以通过自定义分辨率解决这部分问题。

5. 除自行开发可视化大屏外,还可以通过哪些第三方服务来快速实现?

阿里云 DataV、腾讯云图、百度 Sugar 等。

6. 数据可视化的图表样式可以在哪些地方找到参考?

图表部分的二个库是我们设计师可以打开浏览查看的,这里面所有的图表样式都是基于代码实现的,可以作为我们设计图表的参考,也可以让开发拿代码去用,或者在这些图表的基础上修改。

工具类的需要有一定的代码基础,里面同样有丰富的图表,所以跟开发的沟通也很重要,因为他们可能会了解多一些更新的前沿的图表形式,是我们设计师不知道的,所以彼此多沟通交流实在太重要了。

可能是最详细的大屏数据可视化设计指南!


总结


数据可视化是一门庞大系统的科学,本文所有讨论仅针对大屏数据可视化这一特定领域,管中窥豹,如有遗漏或不足之处欢迎大家讨论交流。

作者:UXBoy

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇












大数据可视化界面设计之三:可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

博博

可视化大屏 UI


上文说到可视化设计是一个综合类交叉学科,同样在大屏 UI 设计中也是一个相对复杂的流程,我们需要对大屏的布局、风格、主视觉、信息图表、字体、规范、动效等方面综合考虑,推导设计方案。

设计前:一定要对用户需求充分分析和理解,要知道大屏的展示场景及设计分辨率,大屏的拼接方法都要有一定的了解,最后是跟开发沟通下实现的工具与方法。

设计中:构思布局,可以在纸上简单画一下。根据业务需求定义设计关键词进行设计的提炼与分析,方便自己找参考。颜色上背景深色为主,为了更好地聚焦,数据可以采用亮色,有一定的对比关系,便于业务信息传达。字体上可以采用系统默认字体,数字采用特殊字体包的形式(这块根据实际需求,切记不要照搬)。图表选择恰当的展示形式,同时保证视觉上的统一(分清页面的主次关系,图表的展示切莫设计过度,容易造成抢主体)

设计后:再次校验信息层级、文字大小、图表等各层级间的对比关系是否传达准确,与技术同步沟通下技术的实现性。最后开发完成后,要拿演示 demo 去现场测试,看下整体展示效果,测试输出是否有问题,有无拉伸问题,拼接缝与内容有无穿插,及时与开发进行页面的校验工作,最终才算是设计完成。

下面针对可视化设计中布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向细节点的拆解。

1. 布局

通过硬件设备信息可以得到可视化的设计尺寸,基于尺寸新建设计画布后,第一件事就需考虑页面的整体布局。可视化大屏设计从信息布局到数据表达,都需要设计师对业务深入了解后才能用数据助力业务决策。

常见的大屏布局:居中结构、左右结构两种常见的布局形式以常规的 16:9 模板为例,下面列举的一些常见的布局形式,供大家参考。

居中结构

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

异形超宽拼接屏幕。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

左右结构

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

布局的原则一定要主次分明,根据业务需求抽取关键性的指标,提取主要信息。可以在纸上大概画一下,然后在软件里具体细化布局。避免次要信息的面积过大,喧宾夺主,影响整体的视觉效果。

2. 风格

提起可视化大屏,大家都会联想到:科技感、FUI、HUD 这些关键词,可以说可视化大屏跟科技、数据这两词是强关联的,风格上也基本是这一类方向。

定义设计风格:一般会基于业务需求场景去定义几个设计关键词,根据关键词去找一些参考图,推导出贴合业务的设计风格。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

我们可以通过调整颜色、装饰细节、主视觉、字体等一些细节点控制区分不同的设计风。下面拿图表举例,我们在做设计的时候,只需调整卡片和标题的装饰,就能够展现出不同的设计风格。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

3. 主视觉

主视觉部分大致分为:地球、地图、智慧城市、行业类业务展示等。目前比较容易出效果的都会采用三维模型的处理方式。

地球:粒子地球、地图贴图、地球模型。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

地图:第三方在线地图(百度、高德、腾讯、谷歌)基于地图开放平台进行个性化配置。或者通过地理位置数据建模:如全国和各个省份的轮廓模型。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

智慧城市:GIS 参数化生成简模和重点楼宇定制化建模。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

行业类:多数为定制化建模。如工业类、医疗类、能源类、园区、学校、港口、工厂、仓储库房、零售、工程、安防、国防军工等。

以下图片源于 DATAV

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

主视觉是可视化设计中的一大难点,不光是设计落地的时候也会有需要注意的点,这里建议大家在做之前一定要充分跟开发沟通,确认好技术选型,方便后期输出跟开发更加高效的对接。

4. 信息图表

图表的设计原则是易理解、可实现,能够准确表达数据意图,给用户传达明确信息。


以下图片源于网络,如侵删

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

上图通过使用场景可分为比较、联系、构成、分布四个维度解释图表的不同属性类别。在做可视化大屏设计的时候可以参照上图,选择对应的数据图表。

比较

两个及以上变量数据,一是基于分类不同的对比,二是基于时间维度的对比。常见的图表:条形图、柱状图、雷达图、玫瑰图、桑基图等

联系

两个及以上数据之间的相关性,随时间变化比较关联。常见的图表:散点图、气泡图、多级饼图、热力图、力导向图等。

构成

指标里的数据都由哪几部分组成、每部分占比如何。常见的图表:饼图、环形图、堆积面积图、堆积柱状图、瀑布图等。

分布

指标里的数据主要集中在什么范围、表现出怎样的规律,想表达两个数据点之间数量的演变过程。常见的图表:阶梯折线图、面积图、直方图等。

基于图表的类型可分为:饼图、线形图、柱状图、混合图、面积图、散点图、极坐标图、关系图、树图、桑基图、漏斗图、热力图、还有其他图表类型等。

饼图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

适合展示分类的占比情况,不适合展示分类过多(超过 9 条数据)或者差别不明显的场景。

线形图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化,它的特点是反映事物随时间或有序类别而变化的趋势。

当水平轴的数据类型为无序的分类或者垂直轴的数据类型为连续时间时,不适合使用折线图。同样,当折线的条数过多时不建议将多条线绘制在一张图上。

柱状图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

柱状图提供了分类数据的可视化展示,基于不同的数据类型有以上几种不同的形式。分类数据是将数据分组成离散的组,例如月份、年龄组、鞋码和动物。这些类别通常是定性的。图表上的条形图可以按任何顺序排列。

混合图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

折线图和堆叠柱状图的组合图表。同时显示两个坐标轴,用于展示两种不同类型的数据。

适用于带有细分分类的累计数据大小以及与之相关的趋势数据,例如在过去十年全国三大产业的具体产值,以及 GDP 增长率。

面积图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

面积图强调数量随时间而变化的程度,也可用于引起人们对总值趋势的注意。适合于比较多个变量随时间间隔变化趋势。

散点图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

散点图是一种使用直角坐标来显示一组数据的两个变量值的图表。数据显示为一个点的集合,每个点都有一个变量的值决定水平轴上的位置,另一个变量的值决定垂直轴上的位置。

通常用于显示和比较数值,不光可以显示趋势,还能显示数据集群的形状,以及在数据云团中各数据点的关系。

极坐标图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

基于直角坐标系的径向变形(相当于把直角坐标卷起来)。适用于显示三个或更多的维度的变量对比或者部分与整体的趋势。

关系图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可以展示数据的占比情况,还能厘清多级数据之间的关系。 通常用于可视化大量元素之间的复杂关系。

树图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

树图是一种流行的利用包含关系表达层次化数据的可视化方法,是研究多元目标问题的一般工具。 适合展示数据之间的层级关系,适合 6 条以上数据。

桑基图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

一种特定类型的流程图,用于描述一组值到另一组值的流向,图中延伸的分支的宽度对应数据流量的大小。用以展示数据的层级关系。常用于可视化能源或成本转移,也帮助我们确定各部分流量在总体中的大概占比情况。

漏斗图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

一种直观表现业务流程中转化情况的分析工具,总是开始于一个 100%的数量,结束于一个较小的数量。通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节,进而做出决策。 适用于业务流程比较规范、周期长、环节多的流程分析,比如流程流量分析、转化率分析。

热力图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

将数值大小通过色块有序且紧凑地在坐标系中呈现。 适合呈现多组数据连续的数值分布,适合做数据的预测统计,可以在图片上直接展示热度。例如展示城市在不同时间段打车热度情况。

其他图表

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

词云图适用于对比大量文本或绘制特定形状的词云。水球图适用于多个百分百数据呈现。子弹图用于表达多项同类数据的对比,可以表达一项数据与不同目标的校对结果。 维诺图适用于层级数据比较大小,同时能看到各层级之间的情况。金字塔图适合展示分类的占比情况,不适合展示分类过多或者差别不明显的场景。

5. 字体

文字是可视化展示中最重要的构成要素之一,可视化大屏设计中字体的运用其实原理跟网页 app 的逻辑基本一致。在字体选择上会基于业务需求选择对应的字体,与设计风格相结合。这里要注意的是字体有无衬线、字重、字距等。

大屏设计中,中文字体一般会采用浏览器默认字体(微软雅黑、思源黑体、苹方等)页面中标题会采用特殊字体处理,常用的字体有:优设标题黑、时尚中黑简体、方正正中黑体等。英文数字字体推荐:Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。


6. 规范

建立规范的主要目的是:保证设计的一致性、提高开发效率和还原度、方便迭代 ,辅助设计和开发更好地完成设计的协作。

可视化设计中规范一般会分为:色彩、文字、图表、标题控件等,跟网页端规范同理,这里就不一一赘述了。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

7. 动效

数据可视化大屏设计少不了动效,动效是可视化重要的组成部分,动效能增加观感体验,凸显关键产品内容、强调功能信息关联,帮助用户理解产品、情感化互动。但过分的动效极其容易喧宾夺主,影响用户阅读,反而弱化了数据的展示。

动效的设计原则

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

动效应优先满足核心内容、故事线。常见的大屏动效 – 展示类,用于突出产品核心功能和特点。界面信息按照一定的规律呈现,引导用户的视觉流向。

好的大屏设计应该是数据展示模块最好动效不宜过多,要有一定的主次关系变化,例如一个动画表现的视觉强,另一个就表现稍弱化,有强有弱、有主有次节奏才会舒服,同时动效要结合数据变化,考虑极端情况的展示效果,最终输出一套完整的动效方案。


结语


以上通过布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向总结的基本知识和事项,能帮助我们快速进入大屏设计及避免一些坑。由于篇幅原因字体、规范、动效没有详细拆解说明,后面会陆续更新相关文章,感谢大家支持。可视化体验远远不止这些。欢迎大家提出更多意见和建议,我们一起前行。

作者:Mr.小六

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇













大数据可视化界面设计之四:可视化大屏设计快速入门指南,看这篇就够了!

博博


前言


随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。智慧城市、智慧交通、智慧医疗等等越来越多的行业都有了可视化的需求,可视化行业也迎来了迅速发展的成长期。

可视化大屏设计快速入门指南,看这篇就够了!


数据可视化释义


数据可视化就是把一些相对复杂、抽象的、我们看不懂的数据通过“可视化”的方式,运用图形化的手段清晰有效地将数据信息进行解读和传达,帮助我们发现其中的规律和特征,挖掘数据背后的价值。


可视化大屏


可视化大屏
是以大屏为主要展示载体的数据可视化设计。它的应用场景非广泛如 ToC、ToB、ToG 等都会存在。一般应用在会议展厅、园区管理、城市交通调度中心、公安指挥中心、企业生产监控等重要场所。

可视化用户群体相对比较明确,主要是单位领导及一些一线人员。通过交互式实时数据监测,洞悉运营增长,助力智能高效决策。

可视化大屏设计快速入门指南,看这篇就够了!

伴随行业的发展,行业内也对可视化进行了一些行业细分。常见的一些类别:行业可视化(如交通、医疗、金融、军警部队、农业、工厂、化工等)、智能终端系统类(定制化终端产品)、演示 demo(数据演示、展览展示、数据看板 )、可视化分析系统(通过对数据的分析监控辅助决策,如交通预警平台、天气监控平台等)。


市场现状


平台化

由于近几年可视化的需求越来越大,一般的公司都会有一些可视化的需求,各大厂商也逐渐整合可视化资源,实现平台化、低代码化。满足了大多数公司的可视化需求。国内比较知名的可视化厂商:光启元(Ray design)、Data V、优诺科技(森工厂)、袋鼠云(Easy V)、数字冰雹、图扑、等等。他们将一些可视化效果组件化集成在平台,拖拖拽拽就能实现一些不错的效果,满足了一些公司的展示需求。

可视化大屏设计快速入门指南,看这篇就够了!

实现方式

目前可视化框架是大多数都是基于 Web 端的(基于 web 开发或者 web 封装)而非 PC 端。常见的可视化实现方式是二维加三维相结合,比如大屏两侧的可视化图表可以用 Echarts 这种第三方的轻量化图表控件或者 Vue 去实现。

主视觉部分会基于 Unity3D、虚幻引擎(UE4)、Ventuz、threejs 等工具去实现。满足三维炫酷的效果需求。使整个可视化大屏效果有了质的提升。这些三维工具的优势是三维粒子效果能很好的支持,且效果非常炫酷。多平台支持,可通过 webgl 封装在浏览器里打开使用。缺点就是维护成本较高,需要相关的专业人员去开发维护,有一定的使用门槛。一般公司如果不是专门做可视化相关业务不会配备相关专业人员。

可视化大屏设计快速入门指南,看这篇就够了!

说下几种工具的优缺点:

Ventuz 国内用的相对较少,相关专业人员也较少。虚幻引擎效果上是比较好的,但是对 WebGL 参数支持的较少。Threejs 虽然支持三维但是没有 Unity 那么强大的编辑器,一些复杂的效果实现不了。相对于前者 Unity 来说成熟一些,也是目前市场上用的比较多的,不过 three 对于前端开发同学更友好一些,容易上手,学习成本相对低一些。


可视化设计师应了解的知识


可视化设计是相对新兴的行业,就目前市场来看也是当今比较火的行业。作为一名设计师,不仅仅是只做完效果图就能行的,他是一个结合硬件设备、UI 设计、三维建模、三维渲染、动态设计、数据可视化、图形技术、GIS 数据、渲染引擎、交互技术等等综合类的交叉学科。

可视化大屏设计快速入门指南,看这篇就够了!

1. 硬件设备

硬件设备信息是做大屏一切的开始,我们首先要了解它的尺寸、比例、屏幕种类(拼接屏、LED 屏)投影方式等等 一系列的信息,方便后续的设计工作。

可视化大屏设计快速入门指南,看这篇就够了!

上图为一些常见的屏幕拼接方式,确认好屏幕的拼接方式就可以计算出整个大屏的物理分辨率。举个例子:上图中最后一个的拼接方式为横向3块屏,竖向2块屏幕。他们每块的屏幕分辨率为宽1920px 高1080px,那么这块2×3的拼接屏幕的尺寸就应该是:宽度 1920乘以3(横向3块屏)高度1080乘以2(竖向2块屏)得出整个屏幕的物理分辨率为:5760×2160。

可视化大屏设计快速入门指南,看这篇就够了!

物理分辨率 VS 输出分辨率

可视化大屏设计快速入门指南,看这篇就够了!

大屏的投射方式大致分为三种:1、电脑屏幕 1 比 1 等比例投屏。2、通过主机直接输出给拼接屏(这种大多都是一些自定义比例屏幕和分辨率超大的情况会应用到)。3、投影仪投射。

一般大屏的物理屏幕分辨率大小都有不同,有的是极大的,几万像素,如果我们按照物理分辨率来去做设计的话会很卡,所以这里设计尺寸建议按照输出分辨率设计。输出分辨率会受到硬件的限制(超大情况下需等比缩放),我们一般会采用输出分辨率作为最终的设计尺寸。针对硬件设备设计时要关注以下几点:屏幕拼接方式、单屏幕像素及拼接后像素、输出像素等这些决定了设计尺寸、内容排布、拼接缝的规避等问题。

2. GIS 数据

通常应用于参数化建模,之前写的 0-1 带你制作智慧城市地图(二)就属于参数化建模的一种,主要是通过一些地理位置高程数据进行模型的生成。属于智慧城市可视化设计的基础设施。

常见的一些格式:Openstreetmap(多用于生成模型)、Shapefile(多用于生成模型)、Geojson(主要用于基于 Web 的映射)、TIFF(多用于贴图处理)。

一些常用的工具:Qgis、Arcgis、Google mapper

3. 三维建模

在可视化设计中,一般我们会结合生成参数化模型加定制化手工模型的方式处理整体效果。这么处理的目的:一是设计上能突出主体,增加画面的层次感。二是在性能上能很好地优化,提高整体性能。

下图为设计侧到开发侧对接流程:

可视化大屏设计快速入门指南,看这篇就够了!

4. 动效设计

常见的一些动效对接格式:GIF、MP4、APNG、Lottie、序列帧。


可视化大屏设计快速入门指南,看这篇就够了!

5. 图形技术

了解图形成像原理,是由一个个的粒子点生成的画面。

可视化大屏设计快速入门指南,看这篇就够了!

下图是由一个 50×100 的粒子组成的平面,每个粒子都会对应他的 xy 轴的坐标位置,我们通过控制的粒子透明度、大小、颜色、位置、旋转等参数呈现不同的视觉效果。

可视化大屏设计快速入门指南,看这篇就够了!

世界地图的是通过一个一个粒子成像形成的画面,其中黑色=0、白色=1。比如粒子大小是 1,它对应的位置是黑色,黑色是 0,1×0 就=0 显示为黑色。

可视化大屏设计快速入门指南,看这篇就够了!

我们常做的粒子世界地图就是通过控制粒子黑白 x 粒子大小叠加出来的。

可视化大屏设计快速入门指南,看这篇就够了!

比如我们做粒子地球的时候是通过一张贴图来去控制黑白度,海洋是黑色所以就不显示粒子,陆地为白色显示为白色粒子,最终呈现了一个粒子地球的效果。

可视化大屏设计快速入门指南,看这篇就够了!

6. 渲染引擎的技术架构

前面实现方式里讲到市面上可视化落地基本都是基于于 Unity3D、虚幻引擎(UE4)、Ventuz、threejs 等工具实现的。

它们的底层是由 BS(Browser-Server)架构和 CS(Client-Server)架构两大架构组成的。

BS 架构与 CS 架构特点

  • BS:(Browser-Server,)浏览器/服务器模式,web 应用可以实现跨平台,客户端零维护,但是个性化能力低,响应速度较慢。
  • WebGL 就属于 BS 架构的一种。优点就是使用便捷、数据实时更新、跨平台。缺点是渲染效果较差,大场景支持差。
  • CS:(Client Server,客户端/服务器模式),桌面级应用响应速度快,安全性强,个性化能力强,响应数据较快。
  • Unreal Engine、Unity3D、Ventuz 属于 CS 框架。优势就是整体渲染视觉效果棒,大场景支持好,缺点是必须安装客户端、电脑性能要求高、不同平台需要不同文件。


最后


本期给主要是给大家普及可视化设计的一些流程以及相关的专业知识,欢迎后台添加小六微信沟通交流。

作者:Mr.小六

转载请注明:优设网

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司








更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇




快速帮你搞定插画的插件

纯纯

发现一个非常好用插画神器

地址是https://blush.design/zh-CN/sketch 

能自动生成各种你需要的插画形式,重点是这些插画都是可以免费商用的,肯定能帮到你。

undefined


它有Figma和sketch2个不同的版本,下面彩云就以sketch为例来说说这个插件怎么用。(没有Mac电脑不能使用sketch的同学,也可以用figma来生成插画哦,所以在win下也是可以用的,使用方法跟sketch类似) 



1.如何使用


使用非常简单,只需要简单几步就能搞定: 



1)下载插件并安装


装好后,从插件菜单点开Blush插件,会出现一个插画库界面。


undefined



2)生成插画


1.创建一个矩形,先给定一个大小,目的是为了给生成的插画一个位置和范围(也可以后面再调整,不是太重要) 



2.选一个你喜欢的插画风格,点下封面右上角的随机图标 


3.生成之后,你还可以针对它的组件各个部位再次随机,当然你也可以根据自己的喜好直接选择对应的部件 



3)导出插画

免费版把插画的尺寸改到中型尺寸再生成。效果调整好之后,按正常的sketch选择导出png图片就行。想导出svg矢量格式的需要付费,但我觉得2x的Png图,已经足够用了。



2.插件包含了哪些类型的插画资源呢?


1)城市元素 


undefined


2)装饰背景 



3)人物场景 




3.这种插画在实际项目中运用如何?


彩云随便做了几个,大家可以感受下,效果应该还可以 。



1) 引导页 


使用了插件中的Tech Life主题插画 


2)网页头图 


使用了插件中的Tech Life主题插画 


3)作品集包装



4)登录页


使用了插件中的Cityscapes主题 



4.结语


这个插件的原理是把插画进行组件化,利用sketch和figma的组件功能进行拆分再重组,构成大量的随机插画。可以看到,组件化已经成为一种思维方式,最初是用在UI中,现在已经扩展到了插画领域,未来还有哪些可以组件化?我们可以一起思考。

作者:彩云Sky         来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



9个实用小技巧提升你的动效设计功力

纯纯

迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则,是由 Ollie Johnston 和 Frank Thomas 在他们的书《The Illusion of Life》中提出来的观点(译者注:这本书在豆瓣的评分有9.3分,值得一看)。这些原则最初是用来为动画片这种传统的形式设计的,然而,这些原则也同样适用于 UI设计。所以,我想在这里做一个有趣的尝试,看能否将这些动画原则联系起来。


挤压和拉伸


在动画中,挤压和拉伸代表了物体的重力,质量,重量和灵活性。举例来说,当一个弹球在它撞击地面时会发生形态变化,就是挤压和拉伸。


在界面中,挤压和拉伸很容易就联想到按钮。当一个按钮被按下时,就可以理解为受到了挤压,通过控制按钮的挤压和拉伸,我们可以很轻易地做好一个按钮的交互动画。除了按钮之外,这种原则也可以应用于 UI 中的任何交互元素上。


△ 按钮在交互时的挤压和拉伸


△ 挤压和拉伸被应用于侧边栏


预期动作


让观众能预先知道接下来将会发生什么,它是先于下一步会发生的动作。举例来说,迪士尼动画里经常有从高空往下跳跃时会先弯曲膝盖再跳,正在跑步的人要停止跑步前会逐渐变慢步伐等等。


在界面中,悬停状态就是很好的例子。当我们把鼠标悬停在元素上时,元素会提供反馈,表明它是可以点击的,并且在点击时,又会有一些别的反馈。


△ 悬停的交互通常会暗示这个按钮是可以点的


在有水平滚动界面里,通常在交互时会显示下一个元素的部分内容。这其实是一个很好的例子,因为它是在告知用户下一步的一些信息。


时间节奏


在传统动画中,时间会决定关键帧的绘制方式。帧数越多,动画就越流畅,同时也更慢,时间能够给动画赋予情绪和性格。


时间的节奏感是任何动画的基础,速度在元素编排中起着非常重要的作用。速度太慢,用户会不耐烦;速度太快,用户又会错过一些内容。一般来说,大多数 UI动画在200-600ms之间,其中悬停和反馈交互时长大约为300ms,精细的转场动画大约在500ms。也可以去参考谷歌的动画规范(https://material.io/design/motion/speed.html#duration),里面非常详细地解释了每种动画类型的持续时间。


一些设计系统,如 Carbon(https://www.carbondesignsystem.com/guidelines/motion/)、 Lightning(https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/)都把运动的节奏感视为一个很重要的方面,并为每种类型的过渡都制定了严格的规范。


△ 右边的过渡动画显得太过于漫长,繁琐。


渐快与渐慢


在现实世界中,大多数物体都遵循着缓动运动规律。也就是说,物体的运动并不会瞬间开始或瞬间结束,就像一个物体自由落体,也是一开始很慢后面才会变快。


△ 左侧的卡片是没有缓动的,右侧的是带有缓动的,看起来会自然很多。


给 UI 中的元素加上缓动会让它看起来更加自然,缓动和节奏感都是可以有效的提升动画的品质。


呈现方式


舞台中的表演需要合适的编排才会精彩。也就是说,对象在场景中如何摆放,每个动画又如何出现,关乎演出的质量。通过这种编排,能够将注意力引向最重要的角色。


在界面中,呈现方式能够决定元素的位置,以及在交互时,它应该如何编排才能将用户的注意力引向预期的元素。


比如现在有一个基于兴趣的音乐APP,对这个应用来说,最重要的事就是让动画引导用户选择他们所喜欢的音乐。因此,有必要将类似的操作与其他元素分开编排,有目的的引导用户。


弧形轨迹


一个从高处抛出的小球,运动轨迹会做抛物线轨迹运动,弧线能使物体的运动更加自然。


在界面中,沿着对角线的元素沿着弧线轨迹将会使运动变得更加自然。当需要凸显出元素的运动路径时,多尝试使用弧线轨迹。


△ 通过对比,能够发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加自然。


附属动作


在动画中,次要动作能够起到烘托主要动作,比如动画中的角色在走路时,头部的晃动就是次要动作,却能够让角色行走显得更加自然。


在界面中,次要操作能够起到强化关键动作,当元素需要向用户提供反馈时,这个方法非常管用。所有的微交互都是基于这个附属动作原理。


△ 按钮边上的粒子效果强化了主按钮的点击效果


夸张和吸引力


场景中的重要角色通常会采用一些比较夸张的动作来获得更多的注意力。


在界面中,重要的交互也会通过一些夸张的动画来引起用户的注意。谷歌设计规范中的 FAB按钮就是一个很好的例子,FAB按钮在不动的时候也比较能引起注意,因为它通常会带有比较鲜明的颜色,并且是独立悬浮在界面元素之上的。当它被点击时,FAB的动画被放大,把整个界面都占满,使得它完全占据用户的注意力。


△ FAB夸张的交互形式


△ 对于支付这么重要功能的按钮,通过夸张的动效引起用户的注意


跟随动作和重叠动作


想象一只兔子从高处跳下来,当兔子开始起跳时,它的耳朵动作会与身体动作发生错位。然后当它着陆时,它的身体停下来了,但是耳朵还在动。前者称之为跟随动作,后者被称为重叠动作。其原理说的就是:没有任何一种物体会突然停止,物体的运动是一个部分接着另一个部分的。


在界面中,可以使元素在停止之前超过它们原本的位置,使得元素运动更加自然。(译者注:大白话就是我们常说的回弹效果。)


△ 界面有一定的回弹,会显得更加自然。


△ 当界面滚动时,文字会跟随图片的运动,图片与文字以不同的速度运动会更加自然。(译者注:像是被拖着走的那种感觉)


总结


界面中的每一次交互都必须在适当的场景中精心设计,让整个体验更具沉浸感。在正确的地方使用这些原则能够确保产品中的交互体验更加协调自然。


这些原则正在以不同的形式应用于当今的数字产品中,值得敬畏的是,30年前设计的一套规则到今天仍然适用。

(译者注:这又应了迪特·拉姆斯的设计十诫,好的设计是不会过时的。)

作者:彩云Sky         来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



设计中快速学习的秘诀

纯纯

临摹是一个很好的学习方法,人类学习就是从模仿开始的,而对于设计师来说,临摹作品对于提升学习效率尤其有用。


但在做具体临摹练习时,就会发现一些问题,比如在星球里看到同学们做日常打卡练习时会遇到临摹的原作本身质量不高,不会分析作品优缺点,不知道如何用到自己的项目中等等。所以我在星球里的月度分享会上跟大家聊了这方面的经验,今天也将部分内容整理成文章分享给大家,希望能提高学习效率。


分享的内容分以下几点:

1、为什么需要做临摹练习?

2、临摹的几个阶段

3、如何找到优质临摹作品?

4、如何做临摹思考?

5、保持行动力的秘诀

6、总结



1.为什么需要做临摹练习?


有些新人在刚入行的时候,出于对设计天马行空的想象,不屑于做临摹练习,觉得作为设计师就应该多发挥一些自己的原创能力。想法是很好的,但此时更多的是手上的输出跟不上脑子中的想法,产出的原创作品质量往往不高。而临摹是站在巨人的肩上做事,提升动手能力的同时吸收优秀的设计思路对自己的提升来说非常有帮助。



其实不光是小白需要临摹,很多资深设计师甚至艺术家也会采用临摹的方式提升自己的能力,从中学习别人的创作思路、表达方式,学无止境。


2.临摹的几个阶段


不同的阶段,临摹的目的也有所区别。一般来说,前期临摹更多的是练习软件、技法,后期才会是练习别人的风格表达,综合运用。所以,我把临摹分为3个阶段:


1)技法阶段,目标是一模一样

因为是练习技法,训练的是自己的软件操作能力和观察解构能力,所以我通常会选择稍难一些的作品进行临摹,目标是跟原作尽可能的一模一样。


比如我6年前临摹的Mike大神作品,就比较考验技法,适合初期刚入门阶段做练习。



2)半原创阶段,目标是保留精髓的同时有所区分

这个阶段主要是练习思考和分析能力,尝试理解原作者这样设计的原因和目的。这个阶段,我通常会选择临摹一些有特点的图标或者界面,并尝试改动原作中的一些小的元素,目标是有保留原作的特征,又会加入更多自己的思考让作品在细节上有所区别。


比如在2015年做的界面练习,同时还会记录自己的思考



3)原创阶段,目标是准确输出自己脑中的想法

其实经过一段时间的练习,你肯定已经积累了不少创意,现在有实现能力就可以尽情发挥了。虽说是原创,其实也会大量找参考。刚入行设计的时候,我一直觉得,大师应该是可以完全自己创造出新的作品,但后来知道,优秀的作品大部分都是建立在融合非常多优质作品精华之上完成的。之前看过暴雪的设计师分享,他们做一个场景效果,光找参考都要花掉一半的时间,可见找参考的重要性。


这个作品当时是我在圣诞节前做的,是有参考笑脸、塑料口袋、光碟、进度条光带等等结合起来的原创作品。



3.如何找到优质临摹作品?

既然是希望通过临摹从别人的作品中学到东西才去做,那么临摹优质作品就很关键。我一般会从Dribbble,Behance,Pinterest,Instagram和大厂出品的应用中找临摹对象。判断是不是优质作品,可以从推荐上,细节上,吸引你的点上进行选择。



比如,我想做一些细节丰富的UI控件,那平时大家打王者的时候,里面的UI细节都是非常精致的,包括按钮样式,排版,造型,动效,可以从中学到的知识点可太多了。



在比如在Dribbble中,用关键词进行搜索,再筛选为热门,时间选择最近一年,就能知道流行趋势和设计佳作了。从中选择一些很有感觉的作品来临摹练手,肯定很有动力了。



4.如何做临摹思考?

不要无脑临摹,做的过程一定要多加思考,我一般会从以下几个方面来做分析:


1)原作好在哪?

同一个作品,闪光点的判断因人而异,但你既然喜欢它肯定就有你看中的地方。你喜欢的那个细节,就可以是它的亮点,记录下来就是你的思考。这些记录会成为你下次创作时的灵感,在实际做项目的时候就不会脑袋空空了。


比如下面这张作品,我就很喜欢它的光影细节表达,在开关的边缘还会有小光源的颜色影响,会有红色和绿色的边缘光。我觉得这张图值得学习,所以就临摹了下来,这张图就是我临摹之后的效果。



2)原作有什么问题?

记录你觉得是问题的地方就行,不讲对错,只需有你自己的理由就行,然后尝试给出自己的优化方案。没有完美的作品,但如果确实暂时看不出来也没关系。


3)设计的难点是什么?

在做临摹的过程中,会遇到哪些问题,比如某些效果跟原作有差异,某些字体大小间距不好把握等等,这些就是你可以学习的地方。


比如我在最初做UI的时候,就不清楚具体的设计规范,我就逐个把原作用到的间距,字体,尺寸全都量出来,然后用到临摹的界面中,自己来摸索出设计规范,而不是去死记硬背。更多当年我的打卡日记系列请见https://www.zcool.com.cn/work/ZODAxNzI2MA==.html



5.保持行动力的秘诀

做练习,最重要的是坚持,让很多人苦恼的是做了几天看不到效果就没了动力了,但其实想要坚持做事也是有方法的。


1)按主题系列

就像挖井一样,每次打井就要打通看到水才行,设计练习也是如此。一段时间专注一个能力的练习,学到会运用才算是真正掌握。这里我的方法是按主题系列来执行,比如这周我主要打卡练习美食类的图标设计,那么就会找各种差异化的风格来练习。系列感的练习也更容易出效果,获得满足感。今天练这个,明天练那个,心态很容易浮躁。

2)拆分成清单

往往做练习的时候,很多时间会花在纠结到底练什么内容上。减少选择的办法就是列好清单,提前规划好每天做的内容,具体可以直接执行的程度。


3)保持规律

学习最忌讳的是三天打鱼两天晒网,保持规律,每天进步一点点很重要。忙的时候,也要至少保证自己比昨天有点进度。这个进度哪怕只是改个颜色,调个比例,或者有点思考记录都是行的。做两天又中断几天,很容易产生挫败感,而每天进步一点点的本质就是让你获得心态上的稳定感,这会成为你坚持下去的持久动力之一。


4)不断寻求正反馈

千万别闷头做东西,多寻求反馈,不论是发设计作品到平台还是朋友圈,亦或是在星球里跟一群相同想法的人互相打卡点赞,这些反馈和认同感都会不断激励自己坚持下去。当你因为坚持一件事而有收获的时候,就能体会到一种成就感与满足感。不断给予自己一些正向激励会让自己进入一个良性循环,更不容易放弃。

作者:彩云Sky         来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



为什么要用卡片设计?好在哪,怎么做?

纯纯

今天这篇国外大佬写的文章,算是从为什么这样做的角度来分析卡片设计,一起来学习吧。

 

undefined

从Instagram和Facebook这样的社交媒体应用到亚马逊这样的电商平台,卡片设计似乎是无处不在的,这些大厂广泛应用使得卡片设计很快流行了起来。


作为一个信息容器,卡片能承载包括文本、富媒体、按钮等所有UI元素。基于这些内容,卡片设计可以根据不同的设备和屏幕调整其大小,平衡界面视觉和用户体验。


什么是卡片设计?


卡片是一个UI组件,包含了某一个内容的信息和操作。卡片可以包含各种元素,但它们都应该属于同一个主题。

undefined

这样做的目的是为了避免冗长的文字,并呈现更多的内容。即使从设计的角度来看,用户可能不熟悉卡片的概念,但他们马上就知道如何使用它们,因为它们与实体卡片是一样的。(彩云注:这个就是用户心理学中隐喻的运用)


为什么它会如此流行?


卡片之所以流行,是因为它们能更好的把控内容。卡片是模块化的,所以不同的内容可以堆叠在一起,而不需要注意它们的差异。


卡片通过强制内容适应卡片边界和卡片布局上的限制来聚焦内容。设计师喜欢通过卡片混排大量内容,而无需担心设计会变得杂乱无章。


卡片可以将内容分解成易于理解的小块,以便用户与之互动。通过给内容一个容器,卡片向用户表明内容是真实和感性的。


卡片 UI 设计流行的原因还有很多:


  • 直观:卡片在界面中看起来与现实世界中的卡片相同,它们对用户来说似乎很常见。在卡片成为移动和网络应用中的流行元素之前,它们在现实生活中无处不在:名片、棒球卡、便签。卡片代表了一种有益的视觉类比,它允许我们的大脑直观地将卡片与其所代表的内容联系起来,就像在现实生活中一样。


  • 易于阅读:卡片不占用太多空间,并敦促设计师优先考虑其内容。不同的是,每张卡片都变成了易于阅读的内容。卡片让用户更容易找到他们感兴趣的内容。


  • 有吸引力且对用户更友好:基于卡片的设计通常非常依赖视觉效果(尤其是图片);就信息架构而言,视觉层次会更加清晰。使用图片有助于使基于卡片的设计比不在卡片中排列的相同内容对用户更具吸引力。


  • 有利于响应式设计:卡片是矩形的,可以平滑地调整大小,以适应不同屏幕的水平和垂直正面,这意味着用户可以在所有设备上获得统一的体验。


  • 便于分享:卡片可以鼓励用户在社交媒体上分享内容,因为它允许用户只分享特定的内容,而不是整个页面。



什么时候应用卡片设计?


这通常是当你有:

  • 基于搜索的界面:  卡片能通过模块的内容快速显示合适的内容,这使得用户可以深入了解自己的兴趣。基于卡片的设计是一种非常适合呈现这类内容的方式。


  • 信息浏览:当用户浏览信息时,卡片的兼容性更好。


  • 任务管理:当可以将流程中的单个任务作为卡片进行说明时, 可以轻松组织卡片以获取任务列表。任务管理应用在使用卡片式界面为用户创建仪表板方面做得很好,其中每张卡片代表一个单独的任务。


  • 类似项目:卡片最适合于异构项目的集合(当并非所有内容都是相同的基本类型时)。


  • 可视化分析:  仪表板通常在同一页上同时显示各种内容样本。在这种情况下,卡片类比可以帮助在不同物品之间创造出更明显的差异,其中每张卡片可以适应不同的角色。


卡片解构


卡片的布局可以不同,以支持它们包含的内容类别。下面的组件通常可以在多种卡片样式中找到。

undefined

(1)富媒体: 卡片可以包含缩略图,以显示图片,插图,头像,Logo,图标或图形。


(2) 标题: 标题文本可以包含相册或文章的名称或标题。


(3) 描述: 支持文本,如文章摘要或简短的描述。


(4) 行动按钮: 卡片可以包含用于操作的按钮。


(5) 副标题: 副标题文本可以包含详细介绍,如文章的署名或标记的位置。


(6) 图标: 卡片可以包含操作图标。


设计技巧


有一些小的技巧可以快速提高卡片设计细节。


1. 使用相关主题的图片


图片是卡片设计的主角,你需要一个高级的图片来吸引用户对每张卡片的注意。不仅是图像,卡片还可以包含插图、带有浅色背景框的图标或任何其他类型的富媒体,但需要与内容主题相关。 

undefined


2. 增加视觉层次


卡片内的层次结构有助于引导用户对重要信息的阅读。将主要内容放在卡片的顶部,并使用排版来强化主要内容。使用空白和对比来分隔需要更多视觉分隔的内容区域。(彩云注:视觉层级对于信息表达至关重要!) 

undefined


3. 限制内容长度


一张卡片应该只包含重要的信息,并提出一个相关的观点,以获取额外的细节,而不是完整的细节本身。当我们试图在一张卡片中放入太多内容时,卡片可能会变得很冗长,并失去与卡片类比的实际联系,因为它不再像一张卡片了。 

undefined


4. 避免嵌入链接


不要包含内联链接,卡片应该自己链接。嵌入文字链接会让用户误操作。 

undefined


5. 区分操作主次


包含不同操作的卡片应该在视觉上形成对比。在下面的例子中,我通过使用一种较轻的色调而不是主要的按钮风格来降低后续操作的视觉强度。 

undefined


6. 去掉分割线


对于新手设计师来说,用分割线来区分内容是一种常见的方式,以此定义不同的组。这些边框会造成不必要的视觉干扰,从而影响内容。

undefined


如何做到视觉上更美观?


APP中的卡片并不是纯粹的拟物概念,但通常情况下,使用一致的类比和物理原理能帮助用户理解界面并分析内容中的视觉层次。在卡片的情况下,你可以做几件事:


1. 使用圆角


在形态上与真实世界的卡片进行视觉对比。圆角更有效,因为它们让我们的眼睛容易跟随视觉动线,“因为它更适合头部和眼睛的自然运动”。 

undefined


2. 增加一个轻微的外边框或者投影


增加一条淡淡的描边框或者增加一个淡淡的投影都是很好的做法。阴影在界面中创造了一个层次,这有助于我们区分UI元素。


然而,在设计中添加阴影并不像听起来那么简单。有时候设计师会过分强化投影效果,让原本看起来不错的设计看起来很廉价。避免使用纯黑色的阴影。

undefined


3.注意字体和留白


重要的是要让每一张卡片都能被人看到、阅读和理解。在每个块周围添加大量的空白,让用户有时间处理并进行视觉重置,有精力看完一张卡再到下一张。


选择简单和基本的字体,因为基本的排版最大限度地提高了可读性,并有助于浏览。


一些优秀卡片设计的例子


让我们看看一些真实项目中的卡片设计案例:


信息流中的卡片设计


保持信息流卡片简单是很重要的。它们应该有一个一致的、重复的结构,但是使用不同的图片和字体大小来代表卡片中最重要的和最不重要的元素,以使读卡片的人更容易理解它们。 

undefined

由Diseno Constructivo和Webpixels设计


他们突出特色图片和标题作为最突出的元素,这能帮助用户决定文章或发布的内容是否适合他们。


电商卡片设计


产品卡片是一个很重要的东西,它可以帮助你将访问者转化为客户。一张优秀的产品卡片应该能够吸引人们的注意,激发人们获得产品的欲望,激励人们购买,并在搜索结果中得到高效推广。 

undefined

由Webpixels设计


产品的名称应该放在最显眼的地方,这样参观者就会立刻明白他来对地方了。一个好的配图能告诉顾客胜过千言万语,所以你需要一个高质量的产品配图来设计完美的产品卡片。


如果产品有特价,不仅要在价格栏中注明促销价格,还要注明常规价格,以及客户可以节省多少钱。


个人中心卡片设计


简介卡已经成为一个应用或网站中的功能模板。随着个人品牌变得比以往任何时候都重要,卡片设计在这里也能发挥重要作用。 

由Neelesh Chaudhary设计


就像每一张卡片一样,配置文件卡片也是一个UI组件,它包含了对它所代表的内容至关重要的信息。为了达到你的目标,你要向其他人推销你自己。


确保只包括必要的信息(例如,照片,名字,职业),让你的“关于”页面有剩余的细节来完善你的个人资料。


仪表盘卡片设计


仪表板的设计可以有很大的不同。但是所有的仪表盘都是用卡片做的。根据仪表板的类型,每张卡片可能包括概要信息、通知、快速链接或导航设计元素、关键数据、图表和数据表。确保你为每个元素使用了正确类型的卡片。 

undefined

由Simmmple设计


仪表盘卡设计允许用户决定他们想要关注哪些数据。易于理解的UI,允许用户精确地控制哪些数据需要在仪表板的前端做好。


只包括最相关的信息,为用户使用方便。当你的数据集在一起看更容易理解时,找到在一张卡片上显示它们的方法。但是要小心,不要让用户感到困惑。


日常计划卡片设计


看板任务卡似乎是一件非常简单的事情——拿一张便签,写下你需要做什么,然后把它贴在墙上。这些卡片必须包含需要行动的单位数量。它们还可能包含各种各样的其他信息,清楚地传达了必须做什么。 

undefined

由Neelesh Chaudhary设计


卡片上包含的信息包括任务的名称和重要的细节,如任务的类型和谁拥有它。看板卡放在状态类别下。最基本的状态类别是“计划要做”、“正在进行中”和“完成”,但是状态可能因项目而异。


卡片结构最适用于添加或删除任务这样的小改变,而不是改变像你的总体目标这样的大想法。


总结


有几种方法可以使卡片设计更加有效。通过最初定义和观察卡片,我们可以更好地了解跨行业的这种设计模式。这也让我们能够推测用户希望在这些卡片上采取什么行动。卡片在提供许多不同种类内容摘要的环境中尤其有效,而不是简单地作为内容列表的现代替代品。

作者:彩云Sky         来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


10个让用户一眼就爱上的设计心理学知识

纯纯

undefined


一个优秀的设计不仅要解决正确的问题,同时也是给用户创造积极的情感。在过去,实体产品可以通过人类的五感来创造情感体验,但对于如今的数字化产品来说,这似乎很难达到,因为只是在屏幕上进行枯燥的交互来获取服务。


所以,数字化产品设计师们需要更深入的理解每种类型的情感,以及创造它们的心理学原则。


根据唐.诺曼(Don Norman)的研究,人们对一个物体产生情感有三个层次:本能、行为和反思。


undefined

  • 本能层: “用户想要的感觉是什么”

  • 行为层: “用户想要做什么”

  • 反思层: “用户想成为什么样的人”


在第一层,用户将通过视觉和与产品的交互设计中产生情绪。因此,这是UI设计师擅长发挥的地方。除了美学和基本的平面设计原则外,下面是我在工作中经常应用到设计中的心理学原则。


格式塔原理


相似律

人类的眼睛倾向于将相似的元素连接成一个组,而大脑会认为这些元素都有相同的目的。 


undefined


因此,在设计具有相同功能和内容的界面元素时,就应该要保持一致性。(彩云注:这也是为什么要保持一致性的理论解释)


应用场景: 导航、控件、卡片、banner、内容、分页


连续律

人眼会将连续的元素视为一组。这一定律与对称性和相似性非常相关,通过在一个序列上设计相似和重复的元素,我们可以将用户的视线引导到我们想要的方向,它能使得阅读信息更加连贯和清晰。

 

undefined


一点点的切割是在暗示用户,这里还有更多的内容等待你去查看。


应用场景: 菜单、列表、排序、轮播、服务进度


封闭律

当看到一幅不完整的图像时,大脑会依赖之前的经验进行填充。 


undefined


这是图形和logo设计中常用的规则,但是在产品设计中,我们也经常把它用在图标和Loading设计中。


应用: 图标、loading、数据可视化


相近律

这是UI设计中的一个基本规则,因为人眼会将任何相邻元素视为一个组。 


undefined


在设计的时候,我非常注重使用间距来将元素组合在一起。我通常使用大空间来分隔大内容组,然后使用小空间来分隔大内容组中的小内容组。


应用场景: 导航、控件、卡片、banner、内容、分页


对称律

我们的大脑喜欢看到对称和平衡的东西。它是所有设计领域中使用最频繁、最安全的法则。它帮助我们创造一种稳定和秩序的感觉。 


undefined


当设计需要简单和谐可视化的产品时,我经常使用对称律。当用户需要关注重要的事情时,它也能让他们感到更舒服。缺点是,如果过度使用,产品会变得乏味和单调。通常,我用标题或CTA按钮来更好地强调和号召行动,打破画面的单调格局。(彩云注:CTA是call to action的缩写,中文通常翻译为行为号召。可以理解为引导用户点击的行为都算是行为号召)


应用场景:控件,banner,强调内容,产品显示,清单,导航。


背景分割

这个定律是关于人眼倾向于注意脱离背景或组合的事物。 


undefined


我使用这个规则引导用户的眼睛看到重要信息。它通常是一个卡片设计与一个轻投影在背景之上的层。此外,构建整体也是应用这一规则的一种方式。


应用场景:卡片、内容、列表、服务、摘要


共同命运法则

在同一方向上移动的元素被认为比固定的元素或在另一个方向上移动的元素更相关。这个规则应用帮助我们建立组和状态之间的关系。 


undefined


在制作动画时,我经常更明确地使用这个规则。然而,我们仍然可以适用于许多不同的因素。


应用场景:导航/下拉菜单,折叠,手风琴,工具提示,产品滑块,视差滚动和指示器。


2. 焦点原则


当我们看东西时,我们的眼睛倾向于首先关注最突出的元素。理解这种行为将帮助我们在设计中创建一个“锚点”,从而推动用户查看我们的场景之后的内容。


undefined

应用场景:内容、落地页、价格、产品页、banner 


3. 雷斯多夫效应


(彩云注:维基百科解释为指个人对学习材料或所见所闻的资讯,容易记住最特殊的部分的现象。例如:有一些参考书将重要的资料,以不同颜色或特殊的字体标示出来,就是利用雷斯多夫效应来加深读者的印象。)


这也被称为隔离效应,它表明人们倾向于注意并记住与其他部分不同的部分。这条规则很容易与焦点定律混淆。不同的是,应用此规则的元素通常是独立的,没有为用户导航更多信息的额外功能。 


undefined

应用场景:定价表、促销banner、不同会员介绍 


4. 本能反应


基于现实世界打造的视觉体验。比如,当我们看一个视频,每个高潮笑话时都有旁白跟着一起笑时,我们会更容易发笑(彩云注:想想《快乐大本营》)。用户会喜欢我们的设计,如果它让他们感觉良好和舒适。


(彩云注:这个理论的意思是说尽可能让用户产生沉浸感,把产品用到真实的环境上,比如大家平时使用的手机样机,把设计的界面放到这些样机中就能够给人直观的感受到应用后的效果,也是这个理论的运用)。 


undefined

应用场景:产品配图、插图、摄影 


5. 色彩心理学


有很多研究表明颜色对我们的潜意识有特别的影响。对颜色的看法也因性别、宗教和文化而异。这张彩色心理学海报就足够了(彩云注:感兴趣的可以自行翻译研究下)。


undefined


此外,我们不要忘记从早期到现在一直在广泛使用的颜色,这些颜色的使用更符合用户习惯:

红色:错误

绿色:成功

蓝色:进行中

黄色:警告


6. 形状心理学


undefined


就像颜色一样,人类的潜意识对不同的形状也有不同的反应。例如:

圆形、椭圆形:传递积极的信息,通常与社区或关系有关。

方形和三角形:带有强烈的信息,通常与力量和稳定联系在一起。

竖线:代表强度、力量或攻击性。

横线:表示平静、相等、安静。


7. 双码理论


这一理论解释了人类需要视觉和语言信息来尽可能快地处理信息。此外,人类是视觉动物,我们的大脑处理图像的速度是处理文本的6万倍。为了最大化设计的有效性,我们不应该去掉解释性的文字。


(彩云注:根据这个理论,在做作品集时,就应该尽可能的多用视觉化语言,文字作为辅助,对于视觉设计师来说,能用图表达的就尽量减少文字的比重。) 


undefined


 一个很明显的例子就是导航栏。大多数新的应用或具有复杂功能的应用都同时设计了图标和文字标签。 


undefined



8. 并行设计


人类的眼睛倾向于看到平行因素比其他因素更相关。我经常使用这一原则对同一屏幕内的两组不同内容进行分类。最容易看到的例子可能是Facebook messenger界面,当帖子并排排列时,消息是平行的。 


undefined


9. 共同区域


这一原则类似于格式塔原则中的相似定律,但它并不是完全相似。共同区域原则是通过我们使用分隔线、形状或颜色的方式创建的。 


undefined


如果一个界面需要用户滚动更多来查看内容,我们应该有一些方法来更清楚地划分它,而不仅仅是使用间距。


应用场景:列表清单、信息流

 

10.扫描图形


根据NNGroup UXPin等组织或团体的各种研究,两种最常用的扫描模式是“F”和“Z”。

  • F的使用最为广泛,尤其是对于内容量大的网站。

  • Z用于不太注重文本的网站,通常强调在最后的号召行动。

一旦我们理解了如何使用这些模式,我们就可以选择布局并有效地安排元素来实现我们的设计目标。 


总结


第一印象是最令人难忘的,积极的体验可以在用户和产品之间创造持久的关系。如果能让用户在一开始就喜欢上我们的设计,就能为我们的产品创造了一个很好的优势。

(彩云注:这些都是非常基础的理论,但基础的厚度才是决定后期发展高度,我现在越来越能体会到这一点了,也希望大家能重视并加强基础的学习。) 



原文:https://blog.prototypr.io/10-psychological-rules-i-used-to-make-users-love-at-first-sight-55c71f99bfa1

作者:Hoang Nguyen

译者:彩云Sky

本文翻译已获得作者的正式授权(授权截图如下)

undefined

作者:彩云Sky         来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


图标中的辅助图形,怎么设计才有亮点?

纯纯

1、什么是图标辅助图形?


很多人知道品牌设计中有辅助图形的概念,辅助图形对于品牌识别体系非常重要,但其实在图标设计时,也会经常用到辅助图形。图标中的辅助图形,简单理解就是图标的装饰元素,它能让图标设计有更多的细节和特点,强化图标识别性,同时还能让图标更具视觉表现力。


举个例子,像下面这套图标中的浅色部分和噪点就是图标中的辅助图形,去掉这些辅助图形不大会影响图标的识别性,但增加这些辅助图形后,图标变得更有特点,更容易被记住。


undefined

https://dribbble.com/shots/14490441-Feature-Icons


2、如何用好图标辅助图形?


善用辅助图形为图标增强表现力是图标设计中的一个秘密武器,彩云在工作中总结了一些经验,大概有以下5点:


1)尽量让辅助图形有意义


《简约至上》这本书中提到过一个删除原则:删除是将不必要的元素都剔除掉,直到不能再删除为止。那么在图标设计中,这一点尤为重要,因为图标本身就浓缩了大量的信息,所以要让用到的辅助图形有它存在的价值,不加多余的元素。


比如下面这个案例,容易看出其中的辅助图形是绿色部分。在图标中它们代表的是行动或者结果,作为事物主体的补充,可以理解为主语和宾语的关系。因为有了这样的辅助图形存在,强化了图标的识别性,这就能让图标增色不少。


undefined

https://dribbble.com/shots/14374503-Covid-19-Back-to-Work


下面这个案例是星球中一位同学的练习,整体来说还是不错的,但就辅助图形的使用上看就有些小问题了。淡黄色的辅助图形圆形跟主体图形没有太大的关联,也没有太多实际意义,可以理解为强行为了统一而统一。图标主体已经做了双色设计,增加这些圆形后让图标变得比较复杂且删除对图标意义的表达也没影响,所以这里的辅助图形的使用稍显多余。 


undefined


2)结合品牌色

在配色上,辅助图形还可以结合品牌色彩。用品牌色的主色作为主体颜色,辅助色作为辅助图形的颜色,或者直接用品牌主色调作为辅助图形的配色都可以作为图标设计的亮点。


品牌色的加入,能够让图标配色的使用找到立足的理由,马上就能加分。


比如大家经常在画图标的时候,图标主体通常以单色为主,但此时可以尝试加入以品牌色装饰元素作为点缀,立马就能提升图标细节。下面这个案例是爱奇艺的首页图标设计,能看出来它的辅助图形设计配色上是按品牌绿色来设计的。


undefined


3)避免太过一致

在使用辅助图形的时候,尤其是对于多图标体系来说,完全一致的辅助图形就显得比较呆板,缺乏细节。再拿上面那个星球同学的练习来看,不看辅助图形的具体含义和复杂度,在整体上看起来也缺乏变化,圆形都在同一个位置,保持着同一个大小和颜色。

undefined


辅助图形的使用想要有更好的效果,尽量在一定的范围能多一些变化。


比如下面这个例子,虽然图形的位置和大小都一样,但在颜色上做了不同的变化,整体看来细节度还是不错的。


undefined

https://dribbble.com/shots/14728145-Project-icon


再比如下面这个案例,辅助图形的使用有丰富的变化,使得图标的细节满满。


undefined

https://dribbble.com/shots/3861669-Australia-Post-Iconography


另外值得注意的是,变化应该在一定的范围,不可以变化太大。


比如星球中另一位同学的练习,她在图标的底部用了浅色的蓝色填充作为辅助图形,但这3个之间的辅助图形差异太大,前面2个还能理解是一套,但对于第三个图标来说,辅助图形的比例明显大于前2个图标,显得不够统一。


undefined


而对于下面这组图标来说,蓝色的辅助图形的面积变化相对一致,显得更为统一。


undefined

https://dribbble.com/shots/3817782-Gretchen-Rubin-Icons


4)不要喧宾夺主


虽然使用图标辅助图形会让图标显得更加有特点,但也要分清主次,不应该超过图标本身的核心意义,不能太抢用户的注意力而影响识别性。


比如下面的案例,图标主体特征一眼就能识别出来,辅助图形的加入并不会影响主次关系。


undefined


https://dribbble.com/shots/3235311-Clearly-Eyewear-Iconography  


星球中的一位同学做的练习,这里的辅助图形有些太过于抢眼,且盖在图标上面影响了一定的图标识别性。修改方向是如果能把辅助图形的玻璃质感做一个强化,增加一些透明度,把主体元素凸显出来就会好很多。


undefined


这是另一位同学的练习,也是同样的问题,辅助图形抢了主体元素的风头。修改方向是把辅助图形改小一些就会好很多。 


undefined


她画这个图标是临摹了原作的效果,能看到原作中的星星辅助图形小一些会好很多。 


undefined

5)风格保持一致


图标辅助图形也是图标的一部分,从整体上也需要遵循图标本身的风格体系。


这是星球中一位同学的练习,辅助图形用星星是没问题的,但这里星星的尖角相对于主图形的圆角来说就显得风格不够统一,把星星的尖角改为圆角就会好很多。


undefined


这位同学的作品也是临摹了原作的效果,能看到在原作中辅助图形都是以同样的圆润图形为主的,这里就体现了风格的一致性。 


undefined


比如对照看看MBE的图标风格,他的辅助图形跟主图形一样,都是比较圆润可爱的,这样看起来整体的风格更加统一和谐。

undefined

作者:彩云Sky         来源:站酷
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档