首页

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

博博

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

整个合辑一共有 10 篇文章,分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章,具体展开来讲一讲可视化大屏设计的知识点。(我命名为可视化设计十要素)

同时也会包含    同学们问我的问题以及我搜集的问题,将会以问答的形式去给大家讲一讲,如有不对的地方,还请大家指出,我们一起探讨进步!

文章较长,请仔细阅读,基本涵盖:设备信息,分辨率尺寸,大屏适配,投屏事项,掌握本文可应对日常可视化设计设备方面的知识。

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

设备分类

1. LED 屏幕

政府大屏主要以点间距去区分屏幕的精细度,点间距越小,造价约昂贵;面积越大越整体,造价越高。离屏幕越近颗粒感越强,设计效果也就越不清晰,LED 显示屏表面不平整是导致 LED 显示屏图像失真的主要原因。LED 显示屏表面粗糙度的好坏主要取决于生产工艺。

屏幕介绍:按照不同点间距进行分类,P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20(间距越小,图像越清晰,价格也越高,一般政府 led 屏基本都在 P1.25-P6 之间)。

最佳视距=像素间距/(0.3~0.8),这是一个近似范围。如 LED 显示屏 P16mm,最佳视距为 20~54 米。

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

2. 液晶拼接屏

拼接屏相比于点间距比较小的 LED 屏,价格方面会更便宜一点,拼接屏设计时最主要就是拼缝的处理,注意拼缝,设计时非必要情况下,都要跳过拼缝,尤其是“圆”这个造型。

拼接屏:46 寸,55 寸 物理分辨率:1920*N 1080*N(n 代表屏幕数量),1.7mm、3.5mm、0.88mm、0.44mm、无缝隙;企业常用(1.7mm 和 3.5mm)

大屏拼接缝隙:设计时应尽量不要跨屏去设计,会使画面交叉,不重叠,尤其是圆形。

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

3. 大屏拼接处理器

大屏拼接处理器主要功能是将一个完整的图像信号划分成 N 块后分配给 N 个视频显示单元,完成用多个普通视频单元组成一个超大屏幕动态图像显示屏。大屏拼接处理器输入信号数量和类型取决于用户需要,输出信号数量等于显示单元数量。

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

4. 视频矩阵处理器

矩阵是将多路输入信号切换输出到多个显示设备,一般来说输入信号数量要大于输出信号数量。(我们想在 9 块显示器上同时监控 100 个摄像头传来的信号,就用矩阵来实现即可)

视频矩阵是指通过阵列切换的方法将 m 路视频信号任意输出至 n 路监控设备上的电子装置,一般情况下矩阵的输入大于输出即 m>n。有一些视频矩阵也带有音频切换功能,能将视频和音频信号进行同步切换,这种矩阵也叫做视音频矩阵。

模拟视频矩阵的输入设备:监控摄像机、高速球、画面处理器等很多个设备,显示终端一般为监视器,电视墙,拼接屏等(通常视频矩阵输入很多,一般几十路到几千路视频,输出比较少一般 2-128 个显示器;例如 64 进 8 出,128 进 16 出,512 进 32 出,1024 进 48 出等)。

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

总结:矩阵只能负责信号的切换,不能处理,不能做效果。大屏拼接处理器功能十分强大,具备矩阵功能的同时,还可以实现任意开窗、漫游、叠加、场景保存与轮换。

5. 液晶拼接屏的优势 – 拼接处理器预设场景

4*2 大屏展示端,我们通过控制端,借由拼接处理器可以对大屏进行随意开窗,漫游,叠加,画中画等效果。在控制端拖动布局,大屏会随之改变布局,非常方便。下面我就借由我以前做过的一个项目帮助大家理解一下拼接处理器的优势以及如何设定不同场景。

如果你们企业还在因为屏幕适配以及尺寸问题而纠结,或者想展示:开窗,漫游,叠加,画中画等效果,毫无疑问你们应该选择拼接处理器,这比传统投屏方式更合适,更没有比例不对的困扰。

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

预设场景一:

把控制端的分屏进行编号,接下来移动控制端对应的编号区块,就可以对大屏进行重新布局,图中展示的正是我们的预设正常场景。场景为居中布局,左右两侧为图表展示。

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

预设场景二:任意窗口布局

对控制端进行随机布局,将主视觉模块移动到左侧四块屏幕,图表都集中在右侧,由此我们就由预设场景的居中布局变成了左右布局,左侧为主视觉。

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

预设场景三:任意窗口漫游

可以随意的关闭大屏某个模块的漫游,通过控制端进行屏幕的显示以及不显示。

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

预设场景四:任意窗口平移

画面的任何一个模块都是可以进行平移操作的,我们将模块一和模块五可以平移拖拽到任何一个位置。

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

预设场景五:任意窗口叠加

画面的任何一个模块都是可以进行叠加到屏幕任何一处,还可以控制模块置顶和置底,非常灵活。

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

6. WEB 端大屏

基于 web 网页端的展示方式,通过在 web 开发,有需要时会投屏到大屏上去展示。设备比例一定不能差距过大,比如 16:9 的投屏到 32:9 的大屏就不是合适,解决方案可以是外接一块 1920 的显示器即可。

此处要注意 web 端演示时,记得全屏显示,浏览器边框滑动条等可以不考虑,前端会做相应的浏览器细节考虑,设计按正常分辨率即可。

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

7. 触摸屏

触摸屏(Touch Panel)又称为“触控屏”、“触控面板”、“触控台“,是一种可接收触头等输入讯号的感应式液晶显示装置。

当接触了屏幕上的图形按钮时,屏幕上的触觉反馈系统可根据预先编程的程式驱动各种连结装置可用作控制端操作大屏,原理等同于 iPad 控制,只是载体不同。

设计规范以及按键反馈等交互体验与 iPad 类似。

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

8. 滑轨屏

滑轨互动屏系统——又称为滑轨电视、滑轨播放等,通过特殊设计的机械滑轨控制装置,结合高清液晶拼接幕墙,实现对屏幕内容的互动控制。滑动到不同位置屏幕展示相关信息,包括图片、文字、视频等,是一种全新的互动展示形式,可与触摸同时使用。

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

9. 虚拟沙盘

虚拟沙盘/数字沙盘就是用计算机通过投影仪或者 LED 大屏显示屏动态/静态三维显示:智慧交通、智慧市政、智慧农业、智慧物流、智慧停车、智慧公交、智慧公安、智慧交运等模型,这是一种高科技的模型操作员通过程序,可以随意调整沙盘的尺寸、规划区域、区域布置,快速展示多种全新的创意。

具有三维显示效果,并可以从不同角度观察创意模型,筛选创意方案。注意虚拟沙盘和实体沙盘的联动效果,实体沙盘为底,虚拟沙盘做效果叠加。

分辨率:物理实际分辨率

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

设备适配

Q:原本设计尺寸是 1920*1080,使用场景是 PC 端,同时在大屏中展示,尺寸为 3840*1080,该如何适配?

A:首先我们需要了解适配最主要的痛点就是:灵活,复用性高,可延展。

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

围绕这几个点我们可以通过模块化开发去做,将每个模块单独开发。我们设计师做这种需求之前,就需要提前去构思,在设计各模块时,尽量使用可扩展和可自适应的图形,这样面对适配的时候我们可以通过移动,缩放这些模块,来完成适配。尽量避免二次设计以及开发,提升时间成本。

图形放大适配:

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

图形位移适配:

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

Q:如果是 16:9 适配非 32:9 是否也是这么去适配的?如果是特殊的形状或比例该怎么适配?

A:我们适配一定要记住灵活,减少工作量这些原则,如果不遵循这些原则,那么我们做适配的初衷就错误了。这样我们还不如直接就重新开发一套了。就好比我们通过控制端去控制大屏,如何用开发一套的时间去适配两个甚至是多个终端,这是我们需要注意的。当然考虑到一些实际情况,会有一定程度上的修改,但是一定是要从节省工作量去出发的。

尺寸计算

场景一:拼接屏分辨率计算,已知某项目设备分辨率为宽高 4*2 拼接屏,设计稿我们该如何去定义分辨率?分辨率又是多大?

从命题我们可以看到 4*2 的拼接屏,我们可以通过一块屏幕为 1920*1080 去计算,那么通过计算分辨率应该是 1920*4 &1080*2,也就是 7680*2160,这样就计算出我们的分辨率了。

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

场景二:LED 屏分辨率计算,已知某项目 LED 屏幕物理尺寸为宽 15 米,高 4 米,设备分辨率未知(可以支持 4K 或者 2K 输出),那么如何去制定分辨率?

工作中相信不少同学都遇到过这种只知物理尺寸而不知道分辨率的项目,那么我们只能通过计算大概的设计分辨率来出初期的设计稿件。

可能一:屏幕支持 4K 输出,既然支持 4K 输出,保证画面输出的清晰我们可以将设备的高度设定为 2160

此场景下公式为:15/4=X/2160 X=8100 那么可以大概得出宽度大概为 8100 像素(只是我们通过计算大概得出来的)

可能二:屏幕支持 2K 输出

此场景下公式为:15/4=X/1080 X=4050

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

重点来了,不要以为这样就结束了,我一直强调的可视化设计师为什么一定要在现场,为的就是方便各种测试。刚才我们只是通过计算得出的大概数值,此时我们可以在纸上画一个正方形,并投到设备上,如图。

  • 结果一:如果正方形比例不变,设计尺寸无限接近于大屏实际比例;
  • 结果二:如果正方形比例被拉伸,设计尺寸小于大屏实际尺寸;
  • 结果三:如果正方形比例被压缩,设计尺寸大于大屏实际尺寸。

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

此处图片上主要是为了测试计算出来的分辨率究竟是拉伸还是被压缩了,通过这样的方式去测试设备大概的分辨率的大小比例,在我们产出效果图之后,也可以投射设计图的方式看看屏幕是否是完美适配,这种方法可以在未开发之前,尽可能确定屏幕对设计图的影响,从而避免对开发造成大规模修改。

注意:这样做也只是在不知道设备分辨率的情况下,去大概计算设备分辨率,仅供参考!

投屏事项

1. 电脑直接投屏

使用场景:会议室,展厅等

等比例投屏,投屏电脑投到 2*2 大屏(4K)

投屏电脑支持输出 4K 分辨率,投屏电脑分辨率以 3840*2160 作为设计,投到 4K 拼接屏上,大屏会完美展示,并且画面非常清晰。

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

投屏电脑支持输出 2K 分辨率,投屏电脑分辨率以 1920*1080 作为设计,投到 4K 拼接屏上,只会以 1920*1080 进行输出,因为输出像素只能支持 2K,也只是 1920*1080 的放大。

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

此处需要了解两个概念:输出像素和显示像素,输出像素指的是投屏电脑的最大支持分辨率,显示像素就是我们大屏的支持的最大分辨率。

我们实际项目中最好以显示像素的尺寸进行设计(就是以大屏尺寸为主),但是也要看输出设备的像素大小。

2. 硬件投屏本地运行

使用场景:科技展厅,以及一些带主机的设备。

此种情况,一般我们的大屏会自带主机,大屏本身就可以看成一个显示器非常大的电脑。我们如果需要进行可视化演示,那么我们直接就可以通过显示器的尺寸去做设计,这样就是大屏的设计尺寸。

一般这种靠硬件的投射,都是在拼接处理器的处理下,将多个屏幕拼合成一个大的显示器,再通过拼控系统(硬件投屏)进行输出。

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

一般我们可以将我们大屏的(UE4 或者 U3D 开发)应用程序打包,打包成一个后缀为.exe 的应用程序,在大屏电脑上直接点击,程序就可以在大屏上完美的跑起来,也不需要去进行电脑投射大屏。

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

3. 控制端操控大屏

如果通过控制端去控制大屏,那么投射设备就可以通过多种方式去展示了,可以是手机、平板、触摸屏、手势控制、体感控制等等。

这种情况下投射设备的尺寸就按照本身设备的规范去设计就可以了(比如 750*1334,2048*1536),设计尺寸就是我们大屏本身的分辨率就可以了。

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

4. 多主机多信号投屏

此种情况主要使用场景:屏幕宽度非常高,并且内容可以分很多模块展示,模块彼此之间不受影响独立展示,这种情况下我们就可以通过此种方式去投屏。通过多个主机分别去投射大屏的同等大小区域,比如图中的场景模块被我分成了四等份,我们就可以通过四台主机去分别投射四个模块,形成一个完整的大屏。

此种大屏设计尺寸我们以输出设备的尺寸为主要参考,四台主机那么整体宽度就是 1920*4=7680,高度就是 1080(如果设备支持 4k 输出,那么提升相应的设备尺寸*2 就可以了)。

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

5. 不同比例投屏及解决方案

Q:如果遇到一个设备是 16:9,投屏到一个 20:3 比例的大屏幕, 那我设计尺寸以 16:9,还是 20:3?

A:我们要记住,如果面对的是正常比例投屏到非等比的大屏,我们需要遵守的规范一定是:一切以大屏展示为主。所以我们设计尺寸一定是按照 20:3 来设计的,大屏展示正常才是我们的唯一标准,投屏电脑可能会出现的问题,我们只能妥协(投屏电脑可能只能展示很小的一部分,但也是没有办法的)

那么我们遇到这种是否就没有办法了呢?在这阿勇给大家提供了三种解决办法,在实际工作中,我也遇到过这种问题,所以在这给大家分享一下。

方案一:外接显示器(外接多个显示器,一般主机可以另外外接四个显示器,这样就可以解决投屏电脑显示不全的问题了)

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

方案二:采用拼控系统,而不是用纯粹的设备投屏(拼控系统完美解决了尺寸不一致的难点)

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

方案三:设计两稿,16:9,20:3 我们都去做设计(做两套系统,相当于做的适配)

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

Q:请教大家一个问题,电脑的分辨率是 3840*2160,单个大屏的分辨率是 1920*1080,拼 9*6 的大屏,设计尺寸该设置多少啊?这样设计尺寸会不会太大了,如何优化这个设计稿尺寸?

A:前面的文章我们已经介绍过拼接屏的尺寸的问题,这个问题的解答:1920*9/1080*6,这个就是设计分辨率,通过计算得出,最终设计稿尺寸为 17280*6480。可以看出设计分辨率确实太大了,设计的时候如何去优化设计尺寸呢?

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

通过命题我们可以看出电脑分辨率是支持 4K 的,就是说输出分辨率和显示分辨率我们都是可以上 4K 的,而 4K 的分辨率一般会做 3840*2160,再结合设计稿尺寸 17280*6480,可以将整个效果图尺寸缩小三倍,也就 5760*2160。设计可以按照这个分辨率去出图,最终交付给开发的就是切三倍图,并提示开发是缩小三倍做的。

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

总结:不管在面对什么尺寸的设计,都要记住,万变不离其宗,一切以大屏完美展示为准则,所有的一切都是要在大屏上观看,为了完美展示,投屏电脑,设备控制等页面可以适当的让步。

全篇知识点

通过以上的知识点总结,不知道大家对于数据可视化大屏设计是否有了新的认识,数据可视化对于设备的尺寸,设备的信息,以及投屏注意事项,都要有更多的了解才可以。下图就是总结本篇文章的知识点。

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


作者:生活因你而火热

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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



















大数据可视化界面设计之八:B端产品如何做好数据可视化?收下这篇7000+的干货!

博博

B端产品如何做好数据可视化?收下这篇7000+的干货!


我们毫无疑问已经处在一个大数据的时代。各行各业都在快速产生和积累数据。 本文结合 UED 团队过去所参与 B 端数据可视化项目分享一些经验及思考。


背景


“得益于计算机技术和海量数据库的发展,个人在真实世界的活动得到了前所未有的记录……社会科学将脱下‘准科学’的外衣, 在21世纪全面迈进科学的殿堂。”- 雅虎首席科学家Duncan J. Watts

“大数据的影响,就像四个世纪前人类发明的显微镜一样……而大数据,将成为我们下一个观察人类自身社会行为的‘显微镜’。” – 麻省理工教授Erik Brynjolfsson

从数据,到海量数据,再到大数据,对人类的做事和思维方式都有很大的影响。在《大数据时代:生活、工作与思维的大变革》一书中,作者归纳了大数据的三个特点:

  • 更多:不是随机样本,而是所有的数据;
  • 更杂:不是精确性,而是混杂性;
  • 更好:不是因果关系,而是相关关系。 [1]

当前对大数据的研究涉及计算机科学、数学、生物学等多个领域。大数据尤其是对数据存储、数据挖掘等提出了重大挑战。而数据可视化也将在大数据时代扮演一个重要的角色。数据可视化可以将纷繁复杂的大数据集、晦涩难懂的数据报告变得直观易读、易于理解,通过图表将杂乱的数据进行科学有序的呈现,使用户找到数据的变化规律以及潜在价值,帮助用户作出决策。就数据可视化的应用来看,应用范围极其广泛,如政府应用、商业决策、公共服务等等。


什么是数据可视化


顾名思义,数据可视化就是将数据转换成图或表等形式,以一种更直观的方式呈现数据。通过可视化的方式,我们可以将大量复杂的数据通过图形化的手段进行有效地表达,帮助用户发现规律和特征,发掘数据背后的价值。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 1 @Marco Zemolin Siresia Bagnoli


数据可视化的应用价值


1. 易于理解,有利于发现信息特征

使用可视化的方式来表达复杂的数据,可以确保对关系的理解要比那些混乱的报告或电子表格更快。通过图形化的表现方式,我们可以以清晰和连贯的方式解释大量的数据,从而让我们理解数据,得出结论。

案例:流媒体平台节目数量的变化

以下图为例,当用户希望了解 2011 至 2020 下图四大流媒体平台节目的数量变化情况时,以表格方式呈现效果如下图:

B端产品如何做好数据可视化?收下这篇7000+的干货!

未经可视化设计的表格数据图

如果通过可视化设计处理后效果如下图:

B端产品如何做好数据可视化?收下这篇7000+的干货!

经可视化设计后的数据图

在这个案例中,我们可以看到,通过文字信息表达的方式,所有的数据在文字信息的表达中都只是零散的个体,我们很难在短时间内对列举数据有一个大致的了解,更不用说发现特征得到结论了;而在可视化表达中则不同,所有的元数据通过图表形成一个整体,数字信息被转化为视觉信息,通过可视化图表,通过观察点的位置和颜色即可感知到数据的差异,原本需要通过计算数字大小完成的对比,变成了肉眼可见的点的颜色与间距对比,我们可以迅速了解到近十年四大流媒体平台每年节目数量、每年不同平台节目数量的对比以及各个流媒体平台节目数量的增长趋势等。

2. 将数据转化为更具吸引力的故事

据研究发现:人脑处理图片信息的速度显著快于处理文字信息,例如一篇 300 字的小故事,看一遍需要数十秒,而转化成图片后则只需要一眼即可记在脑海里。

这表明,在信息的类型中,人脑对图片信息的接收和处理效率远高于文字信息。而数据可视化则可以将数据通过可视化的方式转化一个以图片形式展示的故事,帮助用户快速接收、处理信息,激发用户联想并产生情感共鸣。

案例一:新冠病毒如何通过空气传播

随着新冠疫情在全球各个地区的蔓延,如何做好疫情防控已经成为了每个民众的头等大事 。Mariano 和 Javier 用可视化的方式生动形象地传达了新冠病毒是如何通过空气传播的以及可以通过哪些措施来降低传染风险。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 2 @Mariano & Javier

案例二:在叙利亚,谁和谁战斗?

许多不同的团体之间的关系可能很难理解 – 尤其是当有11个这样的团体存在的时候,这些团体之间有的结盟,有的敌对,这让人难以理解。但是,Joshua Keating 和Chris Kirk通过表格的形式和熟悉的视觉效果和色彩,将这些数据简化为一种简单的、易于理解和可互动的形式,让人们可以轻松了解这些团体之间的关系和故事

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 3 @Joshua Keating and Chris Kirk

3. 帮助人们作出决策,加快决策过程

现实生活中大部分的人是视觉学习者,他们倾向于在与视觉元素相关联的情况下进行学习并与信息互动。[2] 人类大脑识别并理解一张图像最快仅需 13 毫秒。[3] 因此,相比起阅读和理解文本,大部分人更容易通过图表或其他可视化形式来理解数据,合理的数据可视化设计可以提高他们作出决策的速度。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 4 @Bea Vaquero


如何做好 B 端数据可视化设计


1. 明确客户需求

设计师在设计数据可视化项目的开始阶段应该尽量与客户进行深入沟通,确定他们的业务诉求,也可以理解为确定客户的初衷与目的,从企业客户对数据可视化的需求看来,通常会有两种类型:

  • 侧重于汇报展示,主要用途是为了对外宣传、对内展示等,对于这类需求,设计时可强化视觉效果的呈现,对数据进行场景化设计,尝试让数据以一种新的载体,有趣的互动等形式结合展现。
  • 侧重于数据分析和协助决策,对于这类需求,一定要清晰了解需求方的业务内容和重点指标,重点关注数据的维度、种类、数量等信息,视效设计上应该优先满足业务诉求。

明确客户诉求,通过设计手段帮助客户达成目标,这才是 B 端数据可视化设计的关键所在。只有当我们了解客户的需要,我们才能快速推导产品结构、关键数据、视效风格等信息。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 5 @Daria

2. 确定关键指标与优先级

关键指标是对一组或者一系列数据的统称。一般情况下,一个指标在屏幕上独占一块区域,所以通过关键指标定义,我们就知道数据大屏上大概会显示哪些内容以及数据大屏会被分为几块。

那么关键指标的选取依据是什么呢?我个人认为主要还是依据客户诉求,数据可视化的最终目的就是帮助客户达成业务目标。需要思考的是,哪些数据通过何种呈现方式能够帮助客户解决问题、达到目的、满足他们的期望,选择出一系列关键指标。

对于这些选取出来的关键指标,我们需要对其进行优先级的排列,一般来说,主要指标能够呈现业务的主要逻辑,一般放在显眼位置,用重点元素标识;次要指标围绕主要信息进一步阐述;辅助指标是对主要信息的补充,一般放在非核心区域,或者二级结构中。

通过合理优化关键指标并进行优先级排列,能够保证数据可视化的核心设计的重点,避免数据空洞散乱。

3. 合理使用数据图表

在选择图表展示相关数据指标时我们要思考各个指标的主要呈现,更进一步的讲,是我们想通过可视化表达怎样的信息。下面这张图就清晰告知了我们如何从数据的展示目的出发,选择合适的可视化方式来呈现数据。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 6 翻译自@Stephen Few

4. 合理进行页面布局

数据可视化页面布局的设计是相对灵活的,为了保证数据呈现最佳效果需要结合实际需求来合理规划。关注核心数据的比例和位置,横向布局最为常见(人眼的水平运动比垂直运动快,会先注意水平方向的事物),核心数据场景划分在中心位置,占较大面积;其余的指标按优先级遵循人们的浏览习惯在核心指标周围依次展开。将类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

B端产品如何做好数据可视化?收下这篇7000+的干货!

@布局设计案例

5. 制定设计方向

在定义设计风格的阶段,从项目背景出发,综合行业类型、产品定位、品牌传播等因素,提取关键信息,构建设计框架。

数据可视化的设计风格主要根据客户要求、行业特性、数据指标等因素决定。通常我们很容易看到的可视化设计以深色为主,是因为相比于浅色基调,深色背景设计能够有效缓解视觉疲劳,其次深色设计能够更好地营造对比差异以及数据层级,再者深色设计更容易呈现丰富的动态效果,营造出强烈的空间感等。配色的设计使用应该充分考虑项目背景以及项目属性,例如党政机关类项目会慎重考虑用色,应当确保设计严肃,庄重。

数据可视化的设计除了对数据进行合理设计,还需要注重场景感的塑造,例如,我们通过场景化设计可以让某大数据平台成为大型“图书馆”,查看数据的过程就跟图书馆看书一致,场景化设计的优势是能够让用户能够以一种具象的互动方式来理解十分抽象的业务数据,当然合理的构建动态数据效果能够让数据具备“生命力”。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 7 @Gan Gryc

6. 设计对比

除了尺寸和位置,我们还可以通过配色来突出数据。

无论是通过颜色或形状对比设计,容易产生强烈的视觉冲击力。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 8 @Bureau Oberhaeuser

利用明度的对比,我们可以用深色烘托鲜明的色彩,或者用鲜明的色彩衬托某一块暗沉的色彩,亮色靠附近的暗色衬托显得更加鲜明,其色彩特征表现得更加充分;

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 9 @Zoey Shen

正确的对数据进行配色,让数据传递出的信息更清楚、更明白,例如国内 A 股,红色代表涨,绿色代表跌(美股绿涨红跌)如果给国内的股票、金融等相关客户做数据可视化设计时,需要避免不同地区文化所产生的差异。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 10 @Dima Groshev

7. 选择 2D or 3D?

随着数字孪生概念的火热,越来越多的企业热衷于打造自己的 3D 数据可视化产品,那么 3D 可视化就一定比 2D 强吗?

数据可视化设计本身就是为了高效传达数据信息而服务的,相比平面呈现,3D 最大的优势在于多了空间维度,适合那些需要跟空间结合的数据呈现,例如地理信息、建筑楼宇、工业生产等场景。那么 3D 数据可视化相比 2D 就一定能够展示更多的信息吗,显然不是绝对的;需要根据实际业务需求出发。

通常我们所说的数据 3D 可视化,就是把大量复杂抽象的数据信息,通过 3D 模型以视觉方式呈现出来,帮助人们理解和分析数据。相比于数据 2d 可视化,数据 3d 可视化具有以下的优势:

  • 展示空间相关的数据,因为空间数据具有三个维度,如果想要将其以视觉方式直观呈现出来,就必须要借助 3d 模型。例如显示一栋大楼不同楼层的人员分布情况,此时只有 3D 数据可视化能够帮助我们达到目标;
  • 视觉冲击力更强,相比于 3D 可视化从视觉上表现力更强;
  • 场景/对象仿真,在一些需要高度仿真的项目,例如与军事、地理勘测相关的项目中,数据 3D 可视化就不可或缺了,无论宏观态势还是细微结构的精密运行,数据 3d 可视化都可以将相关信息清晰呈现给使用者,将真实的环境、对象搬到屏幕上,降低使用者的认知成本。

在一个实际的数据可视化产品项目中,有必要应用 3D 数据可视化的情形;

  • 需要展示多维空间数据
  • 需要通过对场景/对象进行仿真,减少使用者的认知成本和学习成本
  • 需要依靠 3D 效果来提升视觉冲击力

相比 2D,3D 的设计与开发成本相对较高;其次 3D 场景会容易产生视角遮挡以及操作成本等问题,那么从实际项目出发合理选择才是最重要的。

B端产品如何做好数据可视化?收下这篇7000+的干货!

亚信数字楼宇@PRD MO UED

8. 设计还原

设计稿完成了并不代表设计师在这个项目中的工作就结束了,在后续的开发工作中,设计师还要与开发人员合作,减少上线产品与设计稿的差异。

这个阶段的工作也并非听上去那么容易,尤其是 3D 可视化设计,我们会使用相关 3D 工具制作设计效果,但 3D 设计工具与最终开发引擎存在着色、渲染等差异;在这个时候我们需要灵活运用开发引擎特性,提供对应的美术资源。作为设计师同样需要了解相关引擎着色器知识,帮助设计效果实现同时也提升对接效率。

B端产品如何做好数据可视化?收下这篇7000+的干货!

亚信数字楼宇@PRD MO UED

9. 调优与测试

测试客户终端上线是否正常,有无适配所造成的兼容性问题;排查有无视效及体验问题,同时也要考虑极端场景下所产生的问题及应对方案。

对于大型 3D 可视化场景会存在性能卡顿,加载缓慢等问题,在保证视效基础上尽可能压缩相关美术资源,减少不必要的效果计算和内存占用量,根据实时效果需要不断优化性能提升产品体验度。


数据可视化发展趋势


趋势一:数据可视化 ╳ AI人工智能

随着企业发展数据量日益庞大,通过人脑分析复杂数据变得越来越困难,我们需要借助 AI 人工智能的帮助。AI 人工智能可以通过强大的算法快速识别分析数据,为企业节省了宝贵的时间和资源,目前人工智能已经被广泛应用于医疗保健服务、销售、供应链、客户分析和欺诈预防的数据可视化项目中。

B端产品如何做好数据可视化?收下这篇7000+的干货!

IBM 数据可视化专家 Mauro Martino 创建的仪表板,允许用户可视化新闻中出现的主题

趋势二:数据可视化 ╳ XR

AR 和 VR 技术的应用可以增强数据在空间上的感知,从而帮助人们更好地使用数据。通过结合 VR、AR 技术,用户能够更好,更快地理解、分析数据。最近进行的许多研究表明,VR 和 AR 具有较强的感官体验,可以促进更快的学习和理解。帮助用户对业务问题进行多维度的分析,并更快速地找到解决方案。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 11 LM9000@5puj47980xk

趋势三:数据可视化 ╳ 实时数据

在数字时代,事物变化很快,企业需要对数据告诉他们的信息做出快速反应——正因为如此,实时可视化数据比以往任何时候都更重要。

在 COVID-19 大流行期间,企业能够迅速作出反应更加重要。各国政府和卫生当局已经使用实时数据可视化来跟踪感染情况并据此进行调整。越来越多的公司正在将实时数据集成到他们的产品中。

实时数据可视化可以采取一些简单的形式,如实时更新的折线图或使用新信息(如销售)快速更新的交互式地图。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 13 @Esri & The Science of Where Podcast

趋势四:数据可视化 ╳ 全面体验设计

以用户体验为核心的数据可视化设计是一种重要趋势,将用户放在第一位,然后是数据。无论处在哪个行业,设计师都应该遵循类似的思考过程,从思考用户需求及其痛点开始, 用户正在尝试解决哪些问题,以及他们面临哪些可能的困难?他们需要什么信息和功能来解决这些问题?我们如何以最佳方式为他们打造数据可视化?

最新的趋势之一是将用户的工作流与可行的见解、建议、预测以及针对当前任务或决策的最佳后续操作合并,帮助用户进一步钻研数据并发现模式、趋势和相关性。


结语


数据可视化是一门同时结合了科学和艺术的复杂学科,其核心意义在于清晰的叙述和艺术化的呈现,这些需要依靠数据工程师和设计师的精心策划而不是仅仅考虑如何实现炫酷的效果 ,只有最终达到帮助用户理解数据和做出决策的目标,才能发挥它巨大的价值和无限的潜力。

作者:AsiaInfo Design

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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






大数据可视化界面设计之七:想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

博博

在如今这个时代,越来越多的信息和内容呈现开始依赖数据驱动,也开始有更多的场合需要信息图来辅助呈现,对于可视化数据,从来没有像现在的要求这般高。但是另一方面,我们周围充斥着大量错误的图表呈现,希望这篇文章提供的 20 条建议能够帮你设计出更好的信息图


1、选择正确的图表类型


不同的图表类型所承担的功能是截然不同的,不合理的数据呈现会容易让用户误读。同样的数据可以使用不同的图表呈现出不同方面的特征,因此,在设计信息图之前,先理清需求,再来选择使用哪种图表能够更好地呈现。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


2、根据数据的正负值选择正确的绘图方向


当使用数据在0的左右波动,产生正负差异的时候,请使用基线来正确反应正负关系,不要在同一侧来呈现数据,这样很容易带来误读。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


3、始终从0处开始绘制条形图


和折线图不同,条形图如果从非 0 的位置开始,确实更容易反应趋势,但是给所体现的数据量级和特征是失真的。比如在下面的案例中,B看起来是D的3倍以上,但是实际的情况是,两者差异并不大。所以需要从座标 0 处开始呈现数据,这样会更准确。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


4、折线图应该清晰呈现Y轴上的趋势变化


对于折线图,需要考虑一下 Y轴上的尺度,因为如果单位太大,那么折线图所呈现出来的波动幅度不够大,趋势的表达也不够清晰。这个时候,建议调整Y轴上的单位大小,确保折线的波动幅度大概占整个Y轴的 2/3 即可。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


5、使用折线图的时候注意时间


折线图是使用线条连接特定时间节点的特定数据的一种数据呈现形式,它有助于说明随着时间推移,某些情况的变化,但是当间隔时间频率不对,参差,缺失,那么折线图的数据可能会无法对应,这个时候使用条形图其实是更容易呈现的。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


6、不要使用平滑的折线图


平滑的「折线」在视觉上看起来是愉悦,但是它歪曲了背后的实际数据,也很难读到关键的转折点数据。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


7、避免让双折线互相交叉


通常,为了为了节省可视化设计的空间,设计师会采用双折线来呈现数据,但是在数量级不对等的情况下,折线图会很难读,甚至容易会误导用户,这个时候,建议分开使用2个不同的座标系来呈现,更加易读,同样可以看的出趋势,也不会得出错误的结论。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


8、限制饼图中的扇形的数量


饼图是最常用但是也是最容易误用的图表之一,在绝大多数的情况下,条形图是更好的选择。如果你决定使用饼图,那么这里有2个基本的建议:

不要超过7个不同的扇区,让饼图尽量简单
你可以将额外的片段分组到「其他」的扇区中

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


9、在饼状图中直接标注对应的数据


没有合适的文本标签说明的情况下,无论信息图设计得多好都没有意义,直接在图表上进行明确的标识,才会对观看者产生价值,需要观看者自己去关联的设计是失败的。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


10、不要在扇面上做标注


不要将数值直接放置在饼状图的扇区上,在较小的扇区块上数据会非常难读,相反,使用引线来指引数据对应的区块会是更好的方法。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


11、控制饼图中扇面的排序让其方便阅读


对于饼状图的切分方式,有2种常见的顺序:

将最大的一块置于12点钟方向,然后顺时针按照大小来排布所有的块
将最大的一块置于12点钟方向,然后在右边放次大的块,右边放置再次的块,基本上就是越大的扇区约靠上。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


12、避免随机排列


同样的建议也适用于其他的图表,不要使用字母顺序来进行排列,不要使用笔画排序,而是按照数据大小来进行排列,水平条形图就将最大数据放在顶部,垂直排布则将最大数据的放在左侧,减少阅读的时候的信息分辨的障碍。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


13、不要牺牲信息图的可读性


饼状图通常是最不容易读的图表,因为它很难对相似的数据进行对比,所以在将它设计成环状的时候,我们可以使用辅助的数据来呈现,但是一定不要牺牲彩色扇区的可读性,这样看起来高级但是并不具备基本的可读性。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


14、视觉效果不要影响数据的呈现


不要让不必要的视觉效果来分散用户的注意力,这可能会导致用户对于数据产生误解,通常你应该避免使用:

3D元素和阴影
渐变和失真的色彩
斑马纹或者过多的网格线
装饰性过强的字体

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


15、选择和数据属性匹配的配色


配色是可视化设计当中绕不开的一个重要的部分,在设计的时候可以考虑以下三种不同的配色方案:

使用定性的配色方案,不同的色相对应不同的元素,确保在整体配色的可访问性
使用符合一定顺序(比如明暗)的近似色的配色,呈现出一种连续的色彩变化
横跨冷暖色调的配色方案,将中性色置于中间,用来呈现存在正负关系的数据变化

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


16、使用无障碍的配色


根据目前的统计数据,大概 12 人当中有一个人存在视觉障碍,有的是色盲,有的是色弱。你的图表设计需要确保兼顾到这一部分用户的需求。

在配色方案当中使用不同饱和度和明暗的色彩
使用去色效果来校验你的配色的对比度

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


17、关注内容的易读性


在信息图的排版易读性上同样是有要求的,要避免分散用户的注意力,不会制造视觉障碍:

选择清晰的非衬线字体,避免使用衬线体和过度装饰的字体
避免使用斜体、粗体和全大写字体
确保和背景之间的信息对比度
不要旋转文本

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


18、使用水平条形图来优化倾斜标签


这是一个非常简单的技巧,能够确保用户在阅读的时候足够轻松,不会因为倾斜的文本扭伤脖子或者加重落枕的症状。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


19、事先选好你的图表库


如果你的设计项目是面向 Web 或者移动端的交互式图表,那么你需要考虑的第一个问题就是,要用什么样的图标库。如今不同的图表库在功能模块和规则上各不相同,你需要在一开始就基于你的需求和设计想法,做出选择。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


20 、不只停留在在数据静态呈现上


信息图本质上是在对数据进行优化处理、呈现的基础上,帮助用户进行探索,最大化地从数据中获得信息洞察,让数据发挥价值。在下面的 iOS Health 应用就是在最大程度地反映数据应有的意义和功能。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!


结语


对于所有想要在数据的可视化设计上有所建树的同学而言,强烈建议阅读一下 Dona M.Wong 所撰写的《华尔街日报信息图设计指南:呈现数据和事实的注意事项》,本文中很多内容都受到了这本书的启发。

作者:陈子木

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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





大数据可视化界面设计之六:想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

博博

数据可视化的目的,是要对数据进行可视化处理,以能够明确地、有效地传递信息。” ——Vitaly Friedman

如何让人们在海量的数据中,发现数据的规律,或者清晰的发现特异的数据,那数据可视化是一个有效的表达方式。

数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。如图

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

马克·吐温有一句名言“世界上有三种谎言:谎言,该死的谎言和统计数字。”人们经常曲解数字,谎言并不是源于数字本身,而是错误或不负责任的使用数字的人,向他人展示数字的时候,你有责任展示出真相。——《数据之美》

数据真相的展示离不开数据图表的合理选用,那么如何正确的选用呢?就来聊一聊基础数据图表类型的选用及辨析。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

常用的基础图表类型


第一部分:选用合适的图表类型


在数据可视化设计工作中,折柱饼图表是最常用的,同时也是最容易混淆的。一组数据既可选用折线图,又可选用柱状图的时候,设计师的内心往往会产生“我该选用哪种图表能更好地将数据传达给用户呢”的疑惑中。

基于上述疑问,下面给大家一些设计指引供参考。

1. 柱状图 VS 折线图

折线图主要表示一段时间内数据变化趋势,柱状图用于描述分类数据之间的对比。如果不需要展示数据的变化趋势,建议不要使用折线图,而选择柱状图。

相较于折线图,柱状图更多的关注数据之间的对比而非趋势。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2. 柱状图 VS 条形图

在大多数情况下,折线图和柱形图是可以互相替换的。

1)用户针对横向长短的敏感性高过竖向,涉及到排行时最好使用条形图。

2)标签较长时,使用条形图。例如:城市人口流入量的数据展示,由于城市名称文本比较长,建议使用条形图。

3)当图表画布高度大于宽度时使用条形图,利用高度空间的富余,展现更多的条形。

反之,建议使用柱状图。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3. 柱状图 VS 饼环图

基于人的认知特征,人对面积、角度的敏感性没有对长短的敏感性强。当类别的值接近时,不建议使用饼环图,除非是强调单个数据在总体中的占比,突出数据在群体中的特点。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

4. 折线图 VS 面积图

通常情况下,面积图是折线图的一种衍生。在面积图里,数轴和线之间的区域通常用颜色或阴影来增加易读性。面积图数据集之间差异化部分在视觉上得到突显。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

5. 饼图 VS 环图

从本质上来看,饼图与环图属于同一类图表类型。但二者在数据可视化的表现上各有侧重。从图形映射角度来说,弧长比面积、角度更易被识别、更有效。因此,相对饼图,环图让数据更具可读性,同时,可以将强调数据放置在环图中部,引起用户关注。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

6. 堆叠柱状图 VS 饼图

如果在饼图或环图的基础上增加一个多数据的对比,就需要引入堆叠柱状图。相较于饼图,每一个单个堆叠柱状图就是一个饼图的变形,可满足用户的单一数据的部分之间的对比关系。将堆叠柱状图横向排布,就实现了整体数据之间的对比,而饼图是不能进行整体数据的对比。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

7. 堆叠面积图 VS 堆叠柱状图

堆叠面积图强调数量追随一个数据变化而变化的程度,同时强调部分和整体的变化趋势。

堆叠柱状图强调的是整体的对比,也可以直观的看出每个系列的值,尤其是当需要看某一单位的综合以及各系列值的比重时,最适合。

当日期数据点较多时,比如展示近50年某一组数据趋势的变化时,建议使用堆叠面积图,可动态交互,如X轴放大缩小可较为直观的展示数据。当日期跨度较小,如近7天、近3天某一组数据的的变化关系时,建议使用堆叠柱状图。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节


第二部分:应用中需要注意的细节


1. 折线图

1)为了可读性,折线图线的数量建议不要超过5条。当折线数量超过5条时,可在图表默认状态中高亮最重要的部分。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2)为了数据的易读性,建议折线视觉效果使用实线

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3)慎用曲线。单折线图中线条是唯一的主题,线条的每一个点都真实的反应数据的起伏,一般建议使用折线。

若线条趋势不需要非常精确呈现,且需要消除个别差一点和整体的趋势,可以用平滑曲线

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

4)折线图可以处理大量数据,非常适合给用户一些具有参考价值的数值,建议添加比较数据

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2. 面积图

面积图作为折线图的一种衍生,可用来展示连续性数据,可很好地表示趋势、累积、减少以及变化。堆叠面积图更擅于展示部分和整体之间的关系或趋势,而不是传达特定的值。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3. 柱状图

1)柱子之间的间距不要过大,增加数据易读性。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2)使用合理的数据油墨比,降低用户获取数据的认知成本

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

4. 堆叠柱状图

堆叠柱状图的数值必须能相加,相加无意义的数据不建议使用堆叠柱状图。如图,同一区域的人员年龄相加,是没有数据意义的,如果将年龄改为人员数量,就可以横向对比不同区域的人员数量,是具有实际意义的。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

5. 条形图

分类数目是固定的,空数据也要展示。如果省略部分空数据节点,会造成不必要的误解,同时,数据的整体分布状况也不能完全表达出来。同理,柱状图也是一样。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

6. 饼环图

1)若计算百分比,每个切片的数值不能为负,饼图切片的大小与其相应的值成比例,所有切片相加必须为100%。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2)通过扇形区块的面积,弧度和颜色等视觉标记,展现部分与部分之间以及部分与整体的占比关系。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3)饼环图各切片有序排列

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节


写在最后


虽然,数据可视化通常会让人联想到商业的分析师,但它通常比想象的更具创意并且丰富多彩。从业务仪表板、公共健康可视化到流行文化趋势分析,数据可视化涵盖了广泛多样的应用情景。

随着数据可视化的发展,数据表现形式也越来越丰富、多样,如在Echarts中有近40个大类的图标样式介绍。如桑基图、雷达图、地图等等。一些之前比较少见的图表类型,也越来越常见,如玫瑰图(南丁格尔玫瑰图),通过人民网在疫情期间的应用,也为大众所熟知。

一般来说,相较于基础图表,目前发展的数据可视化图表,应用场景相对来说比较局限,同时制作方式也较为复杂,不同于基础图表,通过Excel就可以实现,复杂图表的制作需要比较专业的工具,或专业人员来实现,如需要专业的数据分析师通过Tableau、Qlikview、FineBI等数据分析工具来实现,有较高的学习与应用成本。

好的可视化设计一定集易读、突出数据价值、易于分析、美观为一体的,最终让数据变得更加简单,方便交流,反之,不仅让数据变得更复杂,而且还会带来错误诱导。因此,如何让数据分析变得轻松、流畅并且易读,从而提高用户的工作效率,降低用户的工作负担,则成为设计师的重要责任。

本文只是介绍了部分基础图表的应用经验,后续有机会将继续完善可视化图表应用经验的沉淀及分享。

作者:弘毅

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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













大数据可视化界面设计之五:超全面的数据可视化设计指南:字体篇

博博


前言


读者朋友们大家好呀!(声明:《字体篇》文章中所有的字体规范都只针对可视化大屏设计,后台可视化以及 B 端可视化的字体规范与其不同)

最近产出了很多东西,但都是以零碎的知识为主,主要是在社群进行分享,因此有需要的小伙伴欢迎加我交流。


整体架构


今天就带大家好好聊一聊可视化大屏设计中的字体、字号、字重、字体优化等一系列注意事项。字体篇主要分为四大模块:字体选择与字重、字号规范与应用、字体优化与交接、常用字体与推荐。

超全面的数据可视化设计指南:字体篇


字体选择与字重


文字是界面中最核心的元素,是产品传达给用户的主要内容,它的承载体即是字体。从字体的最基本属性(字族、字类、字重、字号等)说起,熟悉字体的那些特征,了解字体在界面中的作用。

超全面的数据可视化设计指南:字体篇

1. 衬线体与无衬线体

衬线体

衬线又被称为“字脚”,衬线体就是有边角装饰的字体。我们常用的西文字体 Times New Roman 等;中文比较常见的比如宋体、明体等。

超全面的数据可视化设计指南:字体篇

无衬线体

无衬线体则与衬线体相反,通常是机械和统一粗细的线条,没有边角的装饰。最具代表性的 Arial、Helvetica 的西文字体,中文比较常见的比如黑体,微软雅黑等。

超全面的数据可视化设计指南:字体篇

总结

无衬线字体所具备的技术感和理性气质,更受科技型企业或品牌青睐,腾讯谷歌等互联网企业都是选用的无衬线体;衬线字体的优雅与复古,则常用于艺术性文字,时尚品牌等。

因此在具有浓厚技术的可视化氛围中,体现科技感和数字感,结合我们的观测体验,展示形式等,我们统一选用的字体是无衬线体。

超全面的数据可视化设计指南:字体篇

2. 中文字体

字体选择

在使用数字屏幕阅读时,字体的选择要选用无衬线体(比如黑体,微软雅黑)厚重一点,不可选用衬线体(比如宋体,书法体)比较单薄。

注意事项

标题可以用 Bold,更厚重,更加醒目,且不需要长时间观看;正文由于需要长时间观看,因此采用 Regular 字重,观感以及体验更佳;

超全面的数据可视化设计指南:字体篇

3. 英文字体

字体选择

英文字体类型的使用,英文选择更明显的粗体,因为要展示数据,使得数据展示更加直观,依旧是选用无衬线体,比较推荐:D-DIN 字体。

注意事项

字重用 Regular,更加纤细精致,英文字体分为大小写,一般推荐使用纯大写模式,因为大写可以保证字体本身整齐,并且宽高都是一致的,对于排版以及展示会更加友好。

超全面的数据可视化设计指南:字体篇

4. 数字字体

字体选择

数字字体类型的使用,考虑画面的字体的种类不超过三种,并考虑到字体的统一性,数字的字体与英文字体保持统一,比较推荐:D-DIN 字体。

注意事项

数字字体的字重尽量使用 Bold,因为展示更加明显,数字的展示一般都为数据展示,在界面的展示中,一般数字字体会比同字号下中文小 4-6px,因此展示是保证数据清晰显示,数字的字体大一点数据才能更清晰,更符合数据可视化展示。

超全面的数据可视化设计指南:字体篇

数字字体尽量选用等距字体,比如数字“1”和“0”,有些字体的间距会相应的缩小,我们要选用的就是等距字体,这样在做一些列表数据对齐的时候,数据展示更加友好。

超全面的数据可视化设计指南:字体篇


字号规范与应用


政府类客户对于文字大小粗细的追求可以说是非常的偏激,字体加大加粗几乎成了标配,这种需求下,我们能做的就是在原有规范的基础上尽量去提升字号和字重。

1. 常规 16:9 屏

常规 16:9 指的是 1920*1080 的分辨率

在字体大小的选择上,参考了页面上常规大小,定义了一套关于不同尺寸下的标准字号,正常 1080P 页面,最小字号不小于 16px。

此处字号并不是绝对,因为考虑到目标群体适老化的原因,我们主动提高了字体的大小,一切都是为了提高客户的观测体验,具体字号大小还需要参考设备清晰度,环境灯光,视距,人为原因等因素。

超全面的数据可视化设计指南:字体篇

2. 常规 32:9 屏

常规 32:9 指的是 3840*1080 的分辨率

在字体大小的选择上,其实是两块 1080P 的屏幕进行拼接,因此如果画面内容较多时,定义最小字号不小于 16px。

如果画面内容较少时,具体字号大小还需要参考设备清晰度,环境灯光,视距等因素,对字体进行相应的放大,比例合适即可。

此处字号并不是绝对,因为考虑到目标群体适老化的原因,我们主动提高了字体的大小,一切都是为了提高客户的观测体验。

超全面的数据可视化设计指南:字体篇

3. 特殊尺寸屏

特殊尺寸指的是非主流的分辨率,比如 2880*1920 的分辨率

这块的字号大小比较难定义,因为需要考虑的因素很多,总体来说字号大小如果高度在 1080px 左右,那么就按 16:9 的字号规范来算。

如果高度高于 1080 且很多,则需要等比计算或者放大,具体实践出的准确数值还得需要根据大屏的实际情况来综合考虑,这里只是提供一些基础计算方式。

超全面的数据可视化设计指南:字体篇

4. 字号影响因素

字号的大小受到屏幕大小的影响;字号的大小受到界面内容的影响;字号的大小受到观测距离的影响;字号的大小受到设备性能的影响;字号的大小受到主观人为的影响;

超全面的数据可视化设计指南:字体篇


字体优化与交接


给开发的字体太大怎么办?如何优化?开发采用默认字体去开发怎么办?开发用部署电脑没有这个字体去打发你又该怎么办?

1. 优化字体

给开发的字体太大,占用内存该怎么办?

其实我们可以用一些特殊的方法对原有的字体包进行优化,比如英文字体,我们可以删除非必要的中文字体和数字,符号,只保留一些必要的英文字母。具体方法如下,我们可以用 FontCreator 软件去进行字体的优化与删减,并修改字体细节,重新命名发布。

同时如果有意向的同学,也可以用自己设计的字体去应用到开发,这样的操作不是一举两得吗?

优化字体教程: https://www.bilibili.com/video/av82311138

超全面的数据可视化设计指南:字体篇

2. 开发交接问题解析

开发采用默认字体去开发怎么办?

默认字体开发可能有时候会出现文字换行,或者文字放不下的情况,因为不同字体的字间距以及大小可能是不同的,因此在初期就需要跟开发协调好,跟设计效果图的字体保持同步,这样才能保证设计效果的还原。

超全面的数据可视化设计指南:字体篇

本地部署电脑没有字体该怎么办?

字体的存放一般是有两种,一种是放到单独的服务器然后每次加载去服务器访问字体,另一种是跟代码放到一起。对于字体大小的要求。本地存储不需要考虑字体包的大小,云存储需要考虑字体包大小。

云存储一般字体包大小的话可以限制在 2、3M 左右,5、6M 的字体包就已经非常大了,太大会影响我们字体的读取,画面加载很慢。

超全面的数据可视化设计指南:字体篇

最优解就是在部署本地的电脑上安装你需要的字体,这样的话程序就自动读取,可以识别本地部署的字体;如果不支持本地化部署的,字体是存放在服务器或者是跟代码打包放一起的,可以要求开发在全局代码中多写几个备用的字体。

比如你是 Windows 系统,那么自带的就是微软雅黑,iOS 系统自带的就是苹方平台,会自动根据写出的代码按顺序筛选自带的系统字体。

超全面的数据可视化设计指南:字体篇


常用字体与推荐


一些特别好用的字体,会在设计过程中提升画面视觉,因此给大家推荐并分享了一些可以做可视化大屏的商用中英文字体。附件下载。

1. 可视化常用中文字体

中文字体包含了一些可以做标题的一些造型比较好看的字体,比如优设标题黑,站酷高端黑体,卢帅正锐黑体,胡晓波男神体等等。可做正文字体的比如,苹方简体,思源黑体等等。

超全面的数据可视化设计指南:字体篇

2. 可视化常用英文/数字字体

英文字体和数字字体主要是分享了一些数据展示比较奇特的造型字体,比如:DS-digital、Furore、以及正常数据展示的 D-DIN 字体家族等。

超全面的数据可视化设计指南:字体篇


全篇总结


字体的最基本属性:字族、字类、字重、字号,通过四种基本属性为切入点,精准的去讲述大屏可视化的字体规范和样式。

在可视化大屏设计中,字体更加偏向于无衬线体,无衬线字体所具备的技术感和理性气质,更受科技型企业或品牌青睐;

在可视化大屏中,展示数据的重要性不言而喻,因此要注意中文、英文、数字字体的选择以及注意事项,一切以数据展示更加明显为前提;

在不同屏幕中,可视化大屏的字号大小规范是有区别的,并且需要结合影响字号的五大因素:屏幕大小、界面内容、观测距离、设备性能、主观人为去制定字体规范;

通过 FontCreator 软件去对字体进行优化,掌握字体的删减发布以及交付开发的方法;

了解开发存储字体的两种形式,一种是本地化部署,一种是与代码打包服务器云存储,以及了解两种方式的优缺点;

了解可视化开发关于字体交接时的注意事项,可以通过自己的理解去解决工作中的关于字体的问题;

推荐了常用的可视化大屏的字体:中文字体、英文字体;

如果画面内容较少时,可以适当提高字号,反之亦然,比例合适即可;

可视化大屏设计字体规范不存在绝对字体规范。

作者:生活因你而火热

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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














网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

博博

编者按:周一无水文!这篇好文将给同学们科普何时能用单页网站,设计时有哪些技巧,有哪些优秀范例可以借鉴,以及文末推荐一大波专业的单页网站资源,干货份量绝对足,充电时间到 >>>

@十萬個為什麽 :单页设计,是一项处理小型网站的绝佳技巧,甚至有些网站你可能认为一张页面搞不定,也同样适用。从易于维护,到减少带宽占用,使用单页网站的好处不胜枚举。

假如你应对的是个小型网站,通常只有几个页面的那种,可以考虑使用单页设计,看看它是否能简化项目,对用户更加友好。继续阅读,你将了解它的益处,何时使用(或不该使用),还有一些你该遵循的绝佳惯例。


单页设计的益处


很显然,单页设计并非所有项目的理想选择。但假如可能的话,有一大堆理由使用它。

直观易用

默认情况下,用户要浏览单页网站,只要知道如何滚动就行。你也可以加入箭头或其他浏览暗示,但除了少数例外,其实滚动就足以让用户在各部分间穿行。


Green13


怒马!超实用的单页网站设计指南(附大量资源)

完全不用担心用户身陷多层导航中,无休止地寻找他们所要的东西。如果页面上有多个部分,页头或其他导航链接通常很有帮助,不过即使没有它们,网站仍然是可用的。

维护起来更快速、更简单

这点并非既成事实,编码良好的单页网站,或许编写起来比多页网站更快。设计过程有时可以花更少的时间,尽管这取决于单页网站的复杂程度。


Andreaballerino


怒马!超实用的单页网站设计指南(附大量资源)

一旦你脑海中有基本的布局,单页网站还能利用某些特定的设计约束来加快进程。尤其较之于多页网站而言,单页网站各个部分要保持无缝衔接。如果你已经明确哪些能做哪些不能,这类约束的确能加速页面开发。

维护也更简单。当你只需要处理一个页面,维护工作就大大简化了,只要网站本身编码良好。

它迫使你进行简化

这条构筑了上面一点。当你只有一个页面要处理,你不得不把一切简化为它们最基本的形态。不再需要一页页毫无用处的市场宣传。你必须直截了当、开门见山。


Varsity


怒马!超实用的单页网站设计指南(附大量资源)

更具SEO潜力

高质量的站内链接,是网站在搜索引擎中的表现的重要组成部分。尽管搜索引擎并不是很多网站必须的最大流量源,它们仍然重要。

单页网站的链接总是指向自己。搜索引擎抓取时,这可以增加网站的权重。

叙事的手法促使用户有所行动

单页网站往往从叙事角度出发,这点多页网站可不擅长。这可以促进转换,激发用户采取行动。


Wild


怒马!超实用的单页网站设计指南(附大量资源)

人们习惯于聆听故事,不论在线上还是线下,所以这点有着显而易见的用户体验优势。我们儿时就开始阅读和听故事,于我们而言,这是自然而然的事情。

易于组织

再也不需要组织一列列数不清的页面和子页面了。无需多虑每个页面是父级还是子级。也没有庞杂的导航菜单和子菜单。所有都在一页上。是要包含导航链接,还是让用户滚动,这取决于你,就看是否有助于提升用户体验。网站如果有多个页面,是绝对不会这么考虑的。

Stefansohlstrom

怒马!超实用的单页网站设计指南(附大量资源)

减少带宽占用

尽管不像从前,对服务器而言已经不成问题,不过想想近年来有多少用户通过移动设备访问你的网站。减少网站的带宽占用,会赢得流量有限的用户的感激。

消灭了移动版网站

当然,响应式设计不只限于单页网站。但即使采用了响应式设计,网站越复杂,让它适应小屏幕还是愈发困难。单页网站并不复杂,这是必然的。运用响应式设计总体来说更容易。简化导航和类似改变,也更容易成就适用于小屏幕的设计。


Bearonunicycle


怒马!超实用的单页网站设计指南(附大量资源)


要不要用视觉差滚动?


视觉差滚动可能是互联网中发生过的最美妙的事情,也可能是个被滥用的噱头,来蹂躏我们浏览器,这取决于你怎么看。无论你站在哪一方,它似乎近期并不会消失。

就我而言,我希望有时间和地方来实现视觉差滚动。这个效果对于某些单页网站大有裨益,而对于另一些则是噱头,甚至更糟:难以使用。关键是要明确一点,你使用视觉差滚动真的能提升网站的易用性吗,还是因为你觉得它看起来很酷?

如果要使用视觉差滚动,还要考虑一件事,使用Javascript还是纯CSS技术来实现。关于这两个选择,请参见资源部分了解更多信息。


何时使用单页网站,何时不用?


虽然有单页网站大有益处,但它们也不是完美的全尺寸适配方案。虽然很多时候单页网站比多页网站更合理,但也有很多时候不应该使用单页设计。

总之,假如你的网站只有少数页面,单页网站或许是最佳选择。将一切浓缩在一个页面上,能让网站整体具有更现代的外观,如果内容精简,那么单页网站可以让它看起来更丰富。

单页网站的另一个普遍案例,就是发布预告页面。它们通常是单页网站,带有新闻邮件的注册表单。多数情况下,发布预告期间面向大众的信息很容易组织在一个页面上,所以,设计这些页面时优先考虑这种风格是很合理的。


Clientsy


怒马!超实用的单页网站设计指南(附大量资源)

产品单一的电商网站,也是单页网站表现优秀的领域。如果你只卖一种产品,无论它是实体或是虚拟的,何必劳烦使用多个页面呢?一个简单的单页网站才是更好的销售工具。


Franzsans


怒马!超实用的单页网站设计指南(附大量资源)

可能你觉得更复杂的电商网站不适合用单页网站,但它仍然可行。当然,有十多种产品的网站中我会避免使用,不过单张页面也足以轻易支撑一个简单的在线商店,通过弹出窗口来承载产品详情和支付流程。


Simplygum


怒马!超实用的单页网站设计指南(附大量资源)

不该使用单页网站的情况十分明确:庞大、复杂,或必须保有海量信息的网站不适合做成单页网站。在这些情况下,使用相对传统的网站结构更加明智。


混合型网站


虽然有大量的单页网站存在,但也有很多混合型网站。它们给人印象是个单页网站,但通过ajax、弹出窗和类似技术,它们事实上包含了多页内容。

网站Dang & Blast就是这方面的绝佳案例。


Dangblast


怒马!超实用的单页网站设计指南(附大量资源)

如果无法让所有东西彻底融入单个页面,这会是和很好的解决方案。

说到单页网站,某些站点用了某种“取巧”的办法。它们的主站是个单页网站,但在其他域名下也有个博客(有时是Tumblr或托管在WordPress.com的网站)。这么做没有问题,它能突出主站的信息,也不用舍弃博客带来的好处。


单页网站的绝佳惯例


优秀设计的多数准则,在单页网站中仍然适用,其实也适用于任何网站设计。还有一些额外的东西需要牢记,其中有些之前已经提到了。

保持简单

设计如果对于你试图表现的内容而言过于复杂,对你和你的用户都没有任何好处。相反,要尽可能简化设计和内容,还能表达出你要的信息。


Petertoth


怒马!超实用的单页网站设计指南(附大量资源)

导航链接还是有帮助的

正因为用户可以通过滚动来浏览你的网站,但并不意味着这是最友好的方式。如果你的网站很长,有很多部分,这点尤其正确。除非有特别好的理由,还是应该加入直达特定部分的链接,来使你的网站更加友好。


Fraudforcesummit


分割内容

怒马!超实用的单页网站设计指南(附大量资源)

分割内容

单个页面不代表一整个冗长部分。实际上也不该如此。将内容根据逻辑划分为几大块,用户才能更容易找到他们所需。


Ritchiejacobs


怒马!超实用的单页网站设计指南(附大量资源)

让所有的背景都有所作为

单页网站常常有大幅背景。当然,有时候这些背景很朴素,或带有平铺纹理;不过也有单页网站利用所有的空间来挥洒创意。前面提到了,这也有助于划分内容。背景未必要是单一的图片。可以是一系列图片,如果这样做与内容更相符的话。

相关资源:


Johnjacob


怒马!超实用的单页网站设计指南(附大量资源)


单页网站的资源


单页网站的资源成百上千,还包括模版;我们这里重点关注表现突出的几个。

PureCSSParallax Scrolling:Keith Clark的这篇文章阐释了如何通过纯CSS打造视觉差滚动效果。如果你不想用JavaScript(或者不懂)的话,这是个很好的选择。

Skrollr:“为剩下的人准备的视觉差滚动”。这是个独一无二的库,适用于移动端和桌面。不需要jQuery,只有原生JavaScript。

Stellar.js:Stellar.js是另一个简单易用的视觉差滚动库。它提供了很多设置选项和iOS支持。

One Page Website Wireframes:如果你不确定如何构建你的网站,这个单页网站线框图集是很好的出发点。免费下载。这里(Graphicburger)还有第二集可供下载。

One Page Love:One Page Love是首屈一指的单页网站集合,里面有超过5000个网站案例,并且一直在更新。他们还主打大量模版和其他资源。

Start Bootstrap:Start Bootstrap集成了海量的免费单页网站Bootstrap主题。主题适合机构、自由职业者、作品集、着陆页等等。

One Page Love Templates:除了丰富的网站集合,One Page Love也提供免费和收费的模版。

One Page Mania:One Page Mania提供独特的网站和模版集合,供你下载或购买。


结论


对各种网站来说,单页设计都是非常棒的选择。尽管它们不是小型网站的唯一设计方案,对很多项目而言它都是值得考虑的。思考使用单页设计的理由,然后也思考不用的理由,再做决定。

作者:程远

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!






网站设计之二:旅游网站设计分析!教你10个小技巧

博博

编者按:酒店预订网站大多功能繁多,在视觉美观上有天生劣势,想平衡两者非常考验设计师的功力,借鉴相关的优秀网站是捷径,今天@AnyForWeb_UED 从众多在线预订网站中提炼了10条设计的技巧 >>>


一、用户需要一目了然的重点


进入酒店预订网站或是板块的用户一般来说目的性很强,他们心里其实已经有了很完整的设想,而来到网站只是为了完成计划。因此,让用户在首页就直观的看到他们需要的内容,并且尽可能的减少其他不重要内容的出现,这是一个提升用户体验的好方法。


Agoda


旅游网站设计分析!教你10个小技巧

正如Agoda的设计,网站首屏以令人浮想联翩的风景图作为背景,酒店预订的快捷入口最为抢眼,就连公司口号标语也只是简短的出现在页面上方。首页设计以热门内容为主,根据大多数用户的喜好和点击查询量列出推荐,这样的想法确实很好,但是底部显示的“热门国家地区”和“热门城市”是不是有点太多了…


二、用合适的大图作为背景


用美观的高清大图作为网站背景似乎已经成了一种万能的设计方法,一张大图搭配简单的文字,就能轻轻松松让网站变得莫名的高大上。在图片的选择上,“是否足够美观?”可能是我们一味的关注点,而“是否合适”也许对我们的整体设计更重要。这里所说的“合适”包括很多方面,色彩、布局、大小,甚至图片中表达的含义。

如何选好图片:《设计师找图技巧!如何快速准确找到合适的网页背景大图?》


Airbnb


旅游网站设计分析!教你10个小技巧

Airbnb的网站的图片使用方面很值得借鉴。首屏主要以大图片为主,在熙熙攘攘的人群中有一男一女快乐的行走,有一种回家的感觉。下半部分分别使用了具有各地特色的照片作为背景,让用户能更直观了对当地风俗有初步了解。


三、切换图片时减少误点可能


在酒店详情页中最受关注且最先出现的是关于酒店的一些图片,而这些图片内容对用户来说可能又爱又恨。当用户正在浏览的时候会觉得图片表现完整但有些杂乱,而当用户没需求的时候又会因为一些正常的操作造成误点。如果网站能先展示一部分图片,让需要查看更多图片的用户点击进入一个专门的图片板块,并且对这些图片进行分类,便于用户有针对性的快速找到自己需要的内容,这样的设计才更符合用户体验。


游多多


旅游网站设计分析!教你10个小技巧

游多多的详情页图片使用了鼠标悬停后放大图片的效果,另外设有“全部图片”按钮。

旅游网站设计分析!教你10个小技巧

点击“全部图片”出现弹窗,左侧显示关于图片内容类型的分类,供用户自行选择;右侧显示图片和缩略图。这种形式让图片部分的条理十分清晰。


四、完整详细的酒店信息


酒店信息详情页中的信息内容都大同小异,但一些细微的差别却能令网站的用户体验大相径庭。大多数网站的介绍以“酒店简介”之类的官方信息作为首要内容,其实,用户实际需要的并不是这些官方资料,与其息息相关的实用型内容才是他们最关注的。


住哪儿


旅游网站设计分析!教你10个小技巧

住哪儿网酒店详情页的内容排序与大多数网站不同,文字介绍部分以“酒店设施”、“酒店政策”、“酒店介绍”…的顺序排列,真正按照用户的实际需求来做设计。


五、特别信息应该特别标注


这里所说的特别信息并不全部特指重要信息,也可以是一些网站方认为需要引起用户注意的优惠信息、赠送项目,或者数量提醒等。


Booking


旅游网站设计分析!教你10个小技巧

Booking是一个专业的全球酒店预订网站,网站中的设计都比较人性化。正如案例中显示的酒店预订环节,使用的文字及其色彩都以使用者角度出发,对用户可能会感兴趣的内容作了不同颜色的显示,这种做法很利于促成销售。


六、图文并茂的生动点评页


其他用户的点评是很多正在选择的用户都会关注的板块之一,这些点评意见可能会对他们的最终选择起到很大的引导作用,因此这部分的设计更应该被重视。常规化的划分会让用户觉得沉闷单调,尝试着设计一个活泼生动的点评板块,让用户更容易接受和认可。


到到网


旅游网站设计分析!教你10个小技巧

到到网的点评部分设计成了对话框的形式,并且支持图文并茂,增加用户的信任感,也让用户在浏览的时候更有参与感。


七、情感化预订日历


预订日历虽然只是一个很细小的环节,但是用户很容易在这里产生混乱,所以给予用户及时的交互反应变得格外重要,色差显示或小批注都不会显得多余。但在这部分的设计中也要注意,区域始终应该保持整洁,不能因为内容多而疏忽视觉感受。


去哪儿网


旅游网站设计分析!教你10个小技巧

去哪儿网的预订日历设计表现的十分体贴。在选择日期的时候显示浅蓝色底纹,并且用小标识告诉用户总计天数,很大程度的减少了用户的思考时间。


八、互动产生反馈


用户在浏览任何网站时都喜欢有一种“我不是一个人在浏览”的感觉,所以每次鼠标悬停产生的一个小动作都会让用户觉得很温暖。


艺龙网


旅游网站设计分析!教你10个小技巧

旅游网站设计分析!教你10个小技巧

艺龙的首页交互效果做的很充分,几乎每一处悬停都会有反馈。但虽然案例网站的交互反应比较多,却也不会令人感到多余和复杂。这也给了我们一些启发:当一个页面中交互动作多的时候,需要注意产生的反应最好在一个指定的范围内,一旦超出范围影响到其他版块,就会令人觉得过于繁琐。


九、拆分复杂的流程


酒店预订的流程大多不会很复杂,和一般网上购物的流程大致类似,但首次预订的用户可能会少了一些安全感,而拆分并且显示整个过程就是消除用户不安的最好方法。


同程网


旅游网站设计分析!教你10个小技巧

同程网站很仔细的对整个过程做了拆分。将每个比较重要的环节用口语化的文字表现出来,让用户不仅能够对之后要做什么有了清楚的了解,同时增加了网站的亲和力。


十、减少输入框和必填项


满屏的输入框和标记着红色星号的必填项与生俱来着一种令人反感的视觉体验,而很多网站恰巧就是这么做的!为什么一定要让用户必须先注册才能预订或者购买?这种强制性的行为要求会让用户觉得自己处于很被动的位置。如果网站能以柔和的态度解决登录注册问题会不会更好?


途牛网


旅游网站设计分析!教你10个小技巧

比如途牛网的做法,“登录或注册可以获得更多优惠”,这样的引导也许更容易让用户心甘情愿的接受。

作者:程远

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!






网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

博博

@喪心病狂十六夜貓 :极简风格能帮助用户简化操作,兼容性好,载入页面快等等优点,不过虽然看起来简单,我们需要考虑的东西可一点都不少。这一次,就让我们一边学习简约风格的原则,一边将它应用到实际网站制作中去吧。

详细从以下开始。


什么是简约风格的网站?


扁平设计、英雄形象和汉堡包菜单等等许多这些现在流行的设计趋势,都是于2000年开始逐渐受到极简风格的影响才诞生的。

「这里的英雄形象指的是:在网站首页上使用的大尺寸图片。在日本,作为视觉的关键,也被称为主视觉。在Bootstrap中也有命名为「Hero unit」的组件而被大家广泛使用着。」

实例教学!如何将极简风格的原则运用到网站设计中?

现在为我们提供了许多服务的google,它的主页也已经有15年以上没有变动过了。

谷歌一直被评为采用简约风格的Web界面的先驱,自20世纪90年代所提供的测试版以来,一直都很重视界面的简洁性。

关于简约风格的讨论还在继续,但也有一些很多设计师都认同的共同点。那么,就让我们一起来详细的看一看简约风格究竟有着哪些特征吧。


只有必要的元素


简约风格的哲学非常简单,即“少即是多(英文:Less is More)”。在网页设计中,只使用真正有必要的要素,就可以实现更多的事情。简约风格的网页设计策略,就是删除用户操作时不必要的内容,以实现接口界面的单纯化。

屏幕上的要素越少,所留下的要素就会变得更强。如果在屏幕上的设计要素只有一个,信息就能很准确的传递给用户。

实例教学!如何将极简风格的原则运用到网站设计中?

极简风格是删除所有让用户无法专注于内容的元素。但与此同时,为了防止删除或者隐藏了对用户来说真正必要的内容,而让用户的操作感到困难,你需要仔细地检查。对内容的周围加以设计,使用户不会感到混乱,让我们留下一些辅助元素(如导航菜单)吧。


留白空间


简约风格的最常见的元素,就是什么设计元素都没有。简约风格最重要的一点就是负空间或留白空间,这些将有助于引导用户的视线。在设计要素的周围留有许多留白空间,就可以很好的将用户的视线集中起来。

实例教学!如何将极简风格的原则运用到网站设计中?

留白空间对简约风格来说是最重要的元素。


视觉特性


在简约风格中,每一个设计的细节都是非常重要的。接下来介绍一些在设计中可以灵活使用的要点。

平整纹理(英:flat textures)

在简约风格的界面中,简单的纹理和图标是经常被使用的图形元素。在界面中,不管是清晰高亮的效果、模糊阴暗的效果还是给UI 元素添加上光泽表现3D的效果都是没有必要的。

实例教学!如何将极简风格的原则运用到网站设计中?

色彩鲜艳的图片

图片是简约设计中最醒目的要素,可以渲染出作品的氛围。然而,我们也需要谨记,必须要使用抓住了简约风格特点的图片。选择了错误的图像(如乱七八糟不能集中的图像),它会抵消采用了简约风格界面的好处。

实例教学!如何将极简风格的原则运用到网站设计中?

△ 简约风格中最抢眼的英雄图像

用最少的颜色

在简约风格中,无需添加设计元素和图形,只使用颜色便能引起视觉上的关注,将视线集中到元素之上。因为使用的颜色数量必须很少,所以必须做出具有创意的视觉性层次感效果。

实例教学!如何将极简风格的原则运用到网站设计中?

△ 用户所能利用的有效情报很少,配色就会变得显眼,对网站也会有着显著的影响。

印刷字体

大胆的印刷体,侧重于将瞬间描述所记载的词汇和内容作为焦点,以达到更有趣味的视觉效果。当你使用引人注目的具有魅力的印刷体时,使用文字来传递情报是非常有效的。

实例教学!如何将极简风格的原则运用到网站设计中?

想传递信息时,请使用具有魅力的印刷字体吧。

对比度

由于使用了比平时较少的设计元素,当你想创建一个具有视觉性层次感的画面时是非常有创意的想法。在下面的案例中,白色的背景与黑色的宝石作为视觉性的要素被使用,实现了经典的简约风格。

实例教学!如何将极简风格的原则运用到网站设计中?

简约设计中,多数情况下只使用一种颜色作为重点,那个颜色可以强调重要元素。


简约Web风格的实践总结


对于简约风格,请不要以为看起来简单,做起来就会很容易。使用的设计元素很少,界面也变得简单,所以有必要给用户提供在同一平面内舒适的体验。

一个屏幕,一个焦点

遵从“一个页面一个概念”的原则,以单一的视觉要素为中心传达一个概念为吸引点,在各个页面都用心设计吧。

实例教学!如何将极简风格的原则运用到网站设计中?

将魅力展现在首屏

充分配合留白空间的重要内容,然后随着滚动不断提高内容的密度吧。

实例教学!如何将极简风格的原则运用到网站设计中?

简单易懂的宣传词

《The ELements of Style》作者Strunk先生与White先生,提倡“省略不必要的单词(英: Omit needless words)”。将完成的内容再编辑,选择传递信息所需的最低限度的单词吧。

实例教学!如何将极简风格的原则运用到网站设计中?

让导航菜单变得简单(但不是隐藏)

简单易懂的导航菜单一直是网页设计中非常重要的要素。然而,这并不意味着将它隐藏起来。

在使用汉堡菜单简化界面之前,让我们先确认为什么要使用它。汉堡菜单会让菜单的各个项目变得很难找到,这是你所必须注意到的。在多数情况下总是显示的导航菜单是有效的。让我们比较一下下面的案例。

实例教学!如何将极简风格的原则运用到网站设计中?

实例教学!如何将极简风格的原则运用到网站设计中?

△ 上面的案例是点击才会显示导航菜单,而下面的则是总是显示导航菜单。

尝试使用动画

由于使用动画效果的机会越来越多,尚未使用动画效果的简约风格的网站人气恐怕会下降。但是,这些新的效果也需要遵守简约风格的原则,谨慎小心的使用。

实例教学!如何将极简风格的原则运用到网站设计中?


为着陆页和投资网站保留简约风格


「这里的着陆页指的是:在互联网营销中,引导页就是当潜在用户点击广告或者利用搜索引擎搜索后显示给用户的网页。一般这个页面会显示和所点击广告或搜索结果链接相关的扩展内容,而且这个页面应该是针对某个关键字(或短语)做过搜索引擎优化的。」

重视内容,所有的网站都可以使用,但不一定都是合适。简约风格的目的非常简单,正如下面的例子,他适合着陆页(英:Landing Page)和投资网站(英:portfolio sites)这类内容相对较少的网站。

实例教学!如何将极简风格的原则运用到网站设计中?

△ 设计师Brian Danaher的投资网站,对大多数设计师来说是一个典型的简约风格的例子。

越是复杂的网站想使用简约风格的效果,就越是困难。内容丰富的网站,由于缺少设计要素恐怕将会给用户带来混乱。在这种情况下,创建具有简约风格的着陆页,可以帮助你的用户浏览到他需要浏览的详细内容。


与简约风格相关的工具


Minimalist Color Palettes
:一些简约风格的配色方案,将帮助你脱离标准的黑白设计创造更多的组合。

Color Contrast Checker:输入前景色和背景色,计算机自动帮助你计算百分比,轻松的就能创建很棒的颜色组合。


最后


简约风格的网站,通过删除不必要的设计元素和与用户目的无关的内容,将网页的接口变得简单。为了使这一类型的网站变得具有非凡的吸引力,精炼的设计与简易的操作相组合是非常重要的。能更简单地诱导用户的网站,会成为非常强有力的交互工具。

作者:程远

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!






图标定制设计之一:6大章节!图标设计基础知识全方位入门指南

博博


前言


做好图标设计是一个入门级 UI 设计师的必备技能之一,图标是界面中非常重要的组成部分,在实际的工作中,即便是一些工作多年且有一定经验的设计师,也很难保证自己设计的图标有多么完美。不同位置的图标在界面中所起到的作用不同、风格也不同、其设计思路更是有所区别,例如金刚区、分类、标签栏、服务工具等。

6大章节!图标设计基础知识全方位入门指南

用图标准确的表达出实际含义,仅仅学其「形」是不够的,需要对图标有较为全面、系统的认识,了解图标的相关概念、正确的绘制方法及处理好一系列的细节,本篇文章将介绍图标设计的具体方法及要点,帮你规避掉一些常见的问题,让图标设计有理有据。

本期大纲

  1. 图标的定义
  2. 常见的图标风格
  3. 性格与气质
  4. 设计规范与流程
  5. 常见问题及注意事项
  6. 图标资源
  7. 总结


图标的定义


1. 什么是图标?

图标是一种具有高度概括性的图形化标识,在界面中与文案相互支撑、搭配使用,隐晦或直白的表达内容的具体含义、属性特征、形象气质等丰富的视觉信息。

6大章节!图标设计基础知识全方位入门指南

从概念上来讲,图标可分为广义、狭义两种,广义指的是现实世界中的图形符号、且有明确指向的含义,而狭义的图标指的设备界面中的符号,这些设备泛指承载互联网产品的载体,如手机、电脑、iPad…等。在 UI 设计中主要具是针对狭义的概念。

图标设计是一门学问,在我们的认知中,通常将图标理解为某个概念的抽象图形,通过设计清晰易懂的图形传达出比文字更高效率的信息,同时提升界面的美观程度。想要将图标设计的更加出色,则需要频繁练习、不断试错、持续探究并尝试新的风格,所以很值得我们花费大量的时间去钻研练习。

6大章节!图标设计基础知识全方位入门指南

2. 图标的基本特征

一个界面是由文字、图标、几何图形、图片(音频、视频)组成,从 UI 设计师的角度,相对来说,其他三种元素大多运用到的是排版技巧,而图标则是需要绘制、创作的元素,在没有图标的情况下,纯文字也可以代替,可为什么贵还要费力费时的设计图标呢?原因主要有两点:

首先,图标作为一种图形符号的存在,跟文字的复杂程度相比,在识别效率上有着先天的优势,因文字需根据语种、长短的不同,所占用的界面空间资源就不同,在文字较多的情况下,大大减低了用户浏览速度及信息传达的效率,固图标将文字信息进行了浓缩。好的图标不仅易于识别、效率更高,且让界面更加简洁,所以我们常见的图文结合界面,绝大多数都是图标在上、文字在下,或者图标在左、文字在右,这些设计足以说明图标视觉传达的优先级高于文字。

6大章节!图标设计基础知识全方位入门指南

其次,不同风格、样式的图标能让界面看起来更美观,提高用户的视觉舒适度。设想一下,如果界面没有任何图标的点缀,即便用户也能使用,但看多来多少都有些枯燥无味,全部用文字来理解内容还容易引起视觉疲劳。

6大章节!图标设计基础知识全方位入门指南


常见的图标风格

1. 扁平风格

扁平风格图标主要是由形状的描边、填充进行各种组合搭配来表达不同的含义,并通过不同的色彩体现出不同的视觉效果,最常见配色有以下几种:

单色:简洁、清晰视觉效果,常见于基础功能图标。例如:B端功能入口,移动端个人中心、二/三级页面的工具栏等,也有很多app的金刚区利用底色块衬托反白的图标。

双色:是很常见的功能性图标,至少由两个以上的元素组成,在单色的基础上加以色彩点缀,让本身就不是很突出的元素不再单调,如果融入品牌色,能提升整个界面品牌调性,适用场景跟单色图标相比则范围更广。

多色:至少由三种或以上的形状、颜色组合而成,常用于金刚区、产品分类列表、定制化菜单等。

渐变:渐变色的图标显得较年轻化,可以是单元素的渐变或多元素的渐变组合,能映射出一种活泼、热烈的氛围。例如:视频、直播等娱乐类型的APP,或车载UI等。

不透明度:调整图标中某个元素的不透明度,可在不变换色系的情况下丰富配色细节,还能与底色融合的更加细腻,解决多色渐变视觉跳跃的问题。

另外,在 UI 界面中,扁平化风格图标使用最多的当属线性、面性、线面结合这三种类型。

线性

线性图标主要是通过线条描边勾勒出来的图形,在界面中的尺寸普遍偏小,其线条不能过于复杂,否则将会影响辨识度,看似不多的简单线条搭配不同的色彩,则有很大的调整空间。

6大章节!图标设计基础知识全方位入门指南

面性

面性图标主要通过剪影的形式来制作抽象的形体,相比线性图标则面积更大、视觉层级更高且更有体积感。通过不同色彩填充、切割手法塑造不同的设计感,以达到多种视觉表现的效果。

6大章节!图标设计基础知识全方位入门指南

线面结合

线面结合的图标既有线段或轮廓、又有填充的色块,相比纯线/面性单一样式的图标则细节更加丰富,如果把控到位,会有更好的视觉效果及信息传达的效率,也不失趣味性。

6大章节!图标设计基础知识全方位入门指南

2. 拟物化风格

拟物风格的图标主要通过细节和光影、根据现实世界中的物品塑形打造出图形立体效果,非常考验设计师的造型绘制、技法表现能力。这种风格的图标有着极强的代入感,能让用户快速领会图标所传达出的意图及气质。

因为拟物化图标信息元素的高复杂度及突出的视觉效果非常抢眼,在页面中频繁出现会成为干扰其他信息的存在,游戏类应用中使用的非常普遍(不过多赘述)。在其他类型的应用中,大部分出现在营销类型的界面,例如专题页、成就榜、会员中心等。

6大章节!图标设计基础知识全方位入门指南

3. 轻质感风格

跟拟物化图标相比,轻质感就不会有太多复杂的元素,主要通过各种色彩渐变、发光、投影等图层样式体现出非常柔和的立体感,整体风格偏年轻化,给人轻盈、简洁及精致的感觉。在设计过程中,请使用干净且和谐的配色,主要使用在界面较大区域的位置。

6大章节!图标设计基础知识全方位入门指南

4. 磨砂玻璃风格

不仅仅是页面背景有毛玻璃风格,图标的毛玻璃风格也很出彩,主要通过背景模糊、叠加、剪切图层来实现(网上很多教程)。轻量渐变搭配毛玻璃的朦胧感,可以体现出图标的质感与神秘感。

6大章节!图标设计基础知识全方位入门指南

除上述这几种风格的图标之外,还有例如 2.5D、3D、像素风、新拟态…等,但在 UI 设计中并不常用,就不一一举例说明了。


性格与气质


1. 性格走向(描边/拐角)

力量型:粗线条、直角拐点,给人一种力量、狂野的感觉,常用于体育、健身、机械类型的产品;

可爱型:粗线条、圆角设计,看起来活泼可爱,给人舒适、饱满的感觉,在儿童、教育类产品中很常见;

严谨型:细线条、直角拐点,看起来工整、严谨,中规中矩,适合政府、法律类型的产品;

精致型:细线条、圆润的拐角,柔和、干净、纤细且精致的感觉,很适合极简风格的设计,在艺术、金融、珠宝等奢华类产品中比较常见。

6大章节!图标设计基础知识全方位入门指南

2. 动态效果

如果想要突出金刚区、工具列表中的某个功能入口,将图标设计成动态效果,既能保持整体图标风格的统一、又能单独突出功能的重要性,起到强调的作用,用来吸引用户的注意力,引导用户操作,提升其点击率。切记动效图标不能过多,当什么都突出了等于什么都没有突出。

其次,在年轻化、娱乐类型的产品 Tab 栏中的图标切换时,加入动态效果,可起到画龙点睛的作用,还能通过动效表达出不同的情绪,降低切换时的枯燥感,好的 Tab 动效能传达出整个产品的气质。

最后,如果有类似运营或短期内的活动,需要吸引用户注意但又不适合固定在界面中的某个位置,这时可以设计一个动态图标悬浮在设备某个位置(注意用户体验及交互原则),既不过多的占用页面资源,还能同时显示在多个界面,一举多得。

6大章节!图标设计基础知识全方位入门指南

6大章节!图标设计基础知识全方位入门指南

6大章节!图标设计基础知识全方位入门指南

动效图标:@墨染 ART 授权


设计规范与流程


遵循图标设计规范有利于设计师之间的合作及接下来的设计,以及产品整体图标风格的统一性,起到约束的作用,即便在更换设计师的情况下,也不至于出现较大的问题。在制定合理的设计规范前需要先了解图标到底有哪些规范,应从哪些方面入手,以便接下来的图标设计顺利进行。

1. 网格尺寸比例

为了保持图标元素的平衡,尺寸大小需要保持一致,通常我们会建立基础网格尺寸进行图标的绘制,常见的网格尺寸有 16、24、36、48、64、128、512、1024,这些网格尺寸并非固定,也会根据设计中的特殊尺寸而变化。

一个图标系统包括网格尺寸和图标元素两部分,设定好网格尺寸后,就需要用 keyline 来约束图标形状的长、宽比例了。最终设计的图标大小并不是跟随网格尺寸,而是根据不同的形状占比受制于图标 keyline,最终形成统一的视觉大小。

6大章节!图标设计基础知识全方位入门指南

从上图中可以看出,相同尺寸的图标在真实的视觉中相差很大,这就好比一个 100 像素的圆形、跟 100 像素的方形相比,站在逻辑角度,大小是相同的,但在视觉上,一定是方形显得更大。所以我们常说的图标大小相同,并非真实尺寸,而是视觉感受。

2. 图标 keyline

为保持图标视觉上的一致性和平衡感,需要先绘制 keyline 用来指导、规范图标设计。keyline 由圆形、正方形、长方形-横、长方形-竖、三角形和对角线组成,网格的大小需保持 4 的倍数,便于不同尺寸的图标都能适配,可使用 24*24px 的网格尺寸为基准,其他尺寸的图标可通过增加倍数以此类推,如 48*48px、72*72px……

下图是以 24px 尺寸的网格参考基准示例(出血为 2px):

6大章节!图标设计基础知识全方位入门指南

3. 确定图标风格

根据产品属性及目标用户并结合应用场景,找到最符合自身产品性格、气质的图标设计风格,例如健身应用属力量、粗犷类型,圆角、曲线适合女性产品等,在前面的「性格与气质」中有举例说明。

4. 图标绘制

经过图标风格的确定,图标细节便是接下来绘制过程的核心部分,对线性图标来说,注重的是线条的粗心,而面性图标则注重各小图形之间的距离,所以在绘制时,需要保持线条、间距的统一,方便后期的图标更新迭代。

线性描边粗细

我们以 iOS@2x 为基准(避免@1x 的 3px 描边变成 1.5px,小数点),可适配最 2px、3px、4px 最常用的描边粗细,4px 视觉较重,用于优先级较高区域的功能性图标,2px 看起来会显得更加精致,在设计中,还需根据产品的行业属性及调性来确定描边的粗细,并统一起来。

6大章节!图标设计基础知识全方位入门指南

面性正负形间距

面性图标需要确保每个单独的形状之间有足够的间距,以 24px 大小的形状为例,其间距不能小于 1px,以此类推,虽然未规定上限,但间距也不宜太大,否则无法相互组合关联,以实际视觉的舒适度为准。

6大章节!图标设计基础知识全方位入门指南

5. 创意提取

根据行业类型及风格进行创意设计,如线性统一断点、融入品牌基因、单个元素倾斜、节日氛围烘托、修饰元素等,为图标塑造灵魂或传递更多信息而进行的二次创作。

6大章节!图标设计基础知识全方位入门指南


常见问题及注意事项


1. 识别性

图标存在的意义,主要是为了快速传递信息,不能让其成了无用的装饰品。随着互联网的普及、时间的积累,人们对一些线上图标信息的隐喻已根深蒂固,早就形成了惯性思维,所以我们设计的图标必须要符合用户的认知,能让用户快速理解,即便出现个别特殊情况,也要用文字清楚的标注说明,否则一旦让用户产生疑惑,图标就起了负面作用,在很大程度上影响使用体验。符合认知的图标能让用户下意识的理解且接近心理预期,减少学习成本,提升使用效率。

6大章节!图标设计基础知识全方位入门指南

2. 简洁美观

图标是将现实世界中的事件/事务用抽象的图形表现出来,如果过于追求完美而设计的太复杂,还不如直接上图片来的快,所以不能过于展现真实物品的细节,最终设计出正确而不失真的图标尤为重要,这样既能用于传递信息,又便于用户快速且清晰感知。

6大章节!图标设计基础知识全方位入门指南

3. 视觉对齐

为确保视觉平衡,异形元素在使用系统自动对齐后,会有一定的偏差,需手动微调进行视觉对齐。

6大章节!图标设计基础知识全方位入门指南

4. 保持一致

针对大型项目,要想整个家族的图标更加和谐,保持相同的样式及设计原则着实不易,尤其是在多人完成设计的情况下,事先有一个清晰的设计原则和规范是必不可少的。图标都有着对应的视觉重量,例如描边粗细、填充模式、繁简程度等属性,需要做的就是控制好这些关键因素,让整体看起来视觉重量相同且能相互关联组合到一起,保持所有图标的一致性。

6大章节!图标设计基础知识全方位入门指南

5. 最小间隙

单个图标的各元素之间要有呼吸感,需要适当的留白,如果描边过大,整个条看起来感觉像糊成一团或臃肿不堪,如果存在类似问题,可通过减小描边值或降低图标的复杂程度来解决。

6大章节!图标设计基础知识全方位入门指南

6. 使用 2 的倍数

以偶数为单位的设计便于数据的计算(2 的倍数),例如正负形间距、描边值等,在 iOS@2x 设计下,@1x 也不会出现小数点。在移动端设计中,最小的图标为 24px,可被 2、3、4、6、8、12 整除,也是可以被整除最多的数值,因此,可灵活的等比缩放。

6大章节!图标设计基础知识全方位入门指南

7. 延展性

即便做好了前面的一切,图标设计工作也并未完成,需要做的是持续测试图标的可用性,做好后续的完善与优化,没有最好、只有更好,以确保上线后的效果和后续的迭代。


图标资源库


阿里巴巴矢量图标库: https://www.iconfont.cn/ ,90%以上常见的矢量图标下载;

6大章节!图标设计基础知识全方位入门指南

飞书官方图标库: https://iconpark.oceanengine.com/official ,海量资源可在线修改,调整描边、填充、单/双/多色、端点后下载 SVG 格式图标。

6大章节!图标设计基础知识全方位入门指南

虽然上述图标资源基本能满足我们的日常设计所需,但仅仅只能是作为参考而已,一味的图方便、投机取巧只会毁了自己的动手、创新能力。


结语


图标设计是一个非常庞大的版块,且有很多个分支,例如:金刚区、标签栏、应用图标…等,每个分支都有自己的一套设计法则,我们需要在不断的学习与创新中获得更多经验。一篇文章不足以道出图标设计的精髓,但可以在不断沉淀、相互探讨、持续的学习中一起进步。


作者:大漠飞鹰CYSJ

转载请注明:优设网

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

魏华的微信.png

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


更多精彩文章:

图标定制设计之一:6大章节!图标设计基础知识全方位入门指南

图标定制设计之二:超全总结!金刚区图标设计的 10 大风格

图标定制设计之三:想让图标更精致?先掌握这11个容易忽略的设计细节!

图标定制设计之四:学会SVG图标的高级用法,界面适配效率翻一倍!

图标定制设计之五:研究微软 Fluent 图标规范后,我总结了这9个知识点!

图标定制设计之六:为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图标定制设计之七:客户说B端图标太普通没新意,该怎么解决?

图标定制设计之八:从6个方面帮你快速掌握图标设计规范

图标定制设计之九:不止画图标!5 个金刚区的交互设计思考










图标定制设计之二:超全总结!金刚区图标设计的 10 大风格

博博

金刚区作为产品功能架构重要的组成部分,是设计师重点发挥的区域,也是风格切换最为活跃的。而金刚区图标是最重要的表现对象,设计师在图标设计上面耗费心力,出现了丰富多样的视觉表现风格。

体验了众多产品之后,黑马哥为大家精选了金刚区图标设计最突出的 10 个风格,通过这些案例带给大家感官体验层面的更多灵感启发。


晶白风格的扁平突破


晶白风格是通过白色质感来实现的,通过对图标元素进行透明度变化、投影、内阴影、外发光等进行设计,使得更有层次感。

相较于扁平化的图标设计来说,晶白风格更有层次感和质感,作为金刚区图标设计运用非常普遍。除了通过白色不透明度渐变来实现以外,也会随着背景或者环境色的变化融入色彩渲染,呈现出更丰富的设计细节。

晶白风格图标就是通过两端白色渐变,配合两端颜色不透明度来进行深浅控制,也可以通过内阴影和外发光等来增强质感。众多设计软件都可以实现,灵活性非常高。

超全总结!金刚区图标设计的 10 大风格


磨砂玻璃质感的运用


磨砂玻璃质感的设计表现是近些年较为流行的设计趋势,被广泛运用到视觉设计的众多领域。在 UI 场景中作为视觉感强化被普遍应用,其中在图标设计上的表现尤为突出,呈现出了众多的优秀案例。

金刚区作为产品架构中的重要组成部分,也是更新较为活跃的部分,对于视觉感的要求非常重要。磨砂玻璃质感的图标很多产品都会阶段性使用,也是因为这一类风格具有典型的特点和视觉张力,能够形成比较大的视觉差异,带给用户不错的感官体验。

磨砂玻璃质感图标可以通过 Sketch、Figma 等软件的背景模糊功能实现;如果是 PS 和 AI 等没有背景模糊功能的软件,则可以通过模糊度结合剪切蒙版来实现。实现的方法很多,大家可以多多尝试,这是一类比较容易掌握的图标风格。

超全总结!金刚区图标设计的 10 大风格


强化图标微质感的深入


图标设计从写实到扁平,再到微质感,都在不同的时期进行改变,通过风格的优化避免用户的视觉疲劳。写实类图标视觉疲劳度较大,在年轻化的趋势中显得过于繁琐,而介于写实和扁平之间的微质感被深入探索。

微质感的深入可以使得图标风格突出,质感和层次感强化了图标的立体空间感,在整个界面中可以形成视觉差异。可以体现出模块的重要性,也是图标设计感体现的一种方向。

通过渐变色、不透明度渐变、投影、内阴影等形成层次变化和光影效果,多图层刻画来强化图标质感和层次感。

超全总结!金刚区图标设计的 10 大风格


2.5D 风格的巧妙结合


2.5D 也称之为伪三维,在前两年非常流行,作为插画风格延伸出来的,当时 2.5D 插画被普遍运用到众多领域。把一个独立元素作为原子,通过原子的数量分布形成 2.5D 场景。

将 2.5D 风格结合到图标设计中,可以使得图标更容易形成立体感,设计师不会受制于透视基础的薄弱。无论是 C 端还是 B 端场景中的金刚区图标都比较适合,很容易基于简单的立体造型上设计出丰富的变化。比如结合玻璃质感、微动效或者其他设计趋势均可,设计的驾驭度很高。

2.5D 风格的图标很容易掌握,只要绘制好基础原子部分,就可以演变形成各式各样的 2.5D 造型。可以通过 AI 软件的 3D 功能轻松绘制,大部分场景都是基于立方体、圆柱体等基础造型进行变形。

超全总结!金刚区图标设计的 10 大风格


三维的立体感强化


三维类的图标设计相较于 2.5D 风格来说,空间感和透视角度更加深入,光影的变化更加丰富。图标设计中的三维立体感强化,对于设计师的要求更高,掌握一个三维软件需要一定的学习成本。

随着 C4D 等三维软件的走热,掀起了一股学习热潮,被运用到金刚区图标设计中,带来的视觉效果也是非常不错的。较强的空间立体感和光影效果,在界面中的视觉呈现尤为突出,也能带给用户更好的感官体验。

超全总结!金刚区图标设计的 10 大风格


插画风格的简化融入


随着用户对于感官体验的升级,风格特征的差异化体验至关重要,而插画风格的融入可以提升图标设计的特征感。

插画风格运用到图标设计中,需要做简化处理,可以是插画的局部元素或者简化后的小场景插画。风格多样的插画风格也会延续到图标中,不仅可以使得图标具备差异化的视觉效果,也能烘托出整体设计的质量。

通常矢量风格的插画类图标比较常用,由于图标占比限制,不合适表现特别繁琐的插画风格。可以是微场景的插画表现,或者是局部元素的插画表达,这一类图标风格将会在未来被广泛运用,以此来提高图标设计的视觉差异化表达。

超全总结!金刚区图标设计的 10 大风格


立足于品牌的图标设计


立足于品牌做设计,这是设计师需要深入探索的方向,而金刚区图标设计亦是如此。品牌基因融入到图标设计中,可以辅助突出产品的品牌感,也能形成设计表达的差异化。

品牌基因化的图标设计具备一定的特征性,也是视觉差异化的一种形式。通常的做法有将品牌色全部融入图标中,或者品牌色作为图标配色点缀;也可以提取品牌 LOGO 辅助图形形成基因图形,融入到图标造型设计中;也有结合吉祥物来突出品牌感的,融入吉祥物造型、局部图形、轮廓图形等;如果图形角度无法提炼,也有提取品牌文化、服务特征、用户群体特征、行业特征等,从中提炼关联性的图形融入图标设计中,以此来强化品牌感。

品牌作为设计的思考起点,不仅可以输出差异化的设计作品,也能串联起整个项目设计的规范。

超全总结!金刚区图标设计的 10 大风格


造型叠加丰富色彩搭配


如果觉得质感一类图标表现力比较繁琐,但是又不想只是简单的线性或者面性图标,造型叠加和配色叠加形成的图标风格算是介于两者之间的存在。

通过图形之间叠加丰富图标造型,叠加部分配色的调节丰富图标色彩搭配,形成的图标风格比较年轻化。视觉效果也是深受年轻用户的喜欢,带来不错的感官体验。

这一类风格的图标可以通过布尔运算设计图形部分,颜色的叠加效果可以通过图层样式实现,也有一些是图形分割之后进行分别着色的。通常叠加部分的颜色会往更深的方向延伸,大家可以尝试不同的形式去进行配色,选择符合主题的图标配色效果。

超全总结!金刚区图标设计的 10 大风格


动效图标强化局部差异


微动效运用到图标设计中尤为普及,特别是在金刚区模块,可以作为突出功能的强化。动效图标已经成为一种独特的表现力,相较于静态来说更有吸引力,也能带给用户更加趣味性的感官体验。

在金刚区模块中,动效图标通常是用于区别特殊功能,或者需要重点突出的服务或者主题活动等。不改变整体图标的风格,只是动态和静态的区分,需要个别做动效,形成表现力的差异才能达到重点突出的目的。

作为设计师来说,动效也是需要掌握的基础技能,可以提高我们的设计表现力,也能将交互动作表达得更清楚。

作者:黑马青年

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

图标定制设计之一:6大章节!图标设计基础知识全方位入门指南

图标定制设计之二:超全总结!金刚区图标设计的 10 大风格

图标定制设计之三:想让图标更精致?先掌握这11个容易忽略的设计细节!

图标定制设计之四:学会SVG图标的高级用法,界面适配效率翻一倍!

图标定制设计之五:研究微软 Fluent 图标规范后,我总结了这9个知识点!

图标定制设计之六:为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图标定制设计之七:客户说B端图标太普通没新意,该怎么解决?

图标定制设计之八:从6个方面帮你快速掌握图标设计规范

图标定制设计之九:不止画图标!5 个金刚区的交互设计思考





日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档