政府大屏主要以点间距去区分屏幕的精细度，点间距越小，造价约昂贵；面积越大越整体，造价越高。离屏幕越近颗粒感越强，设计效果也就越不清晰，LED显示屏表面不平整是导致LED显示屏图像失真的主要原因。LED显示屏表面粗糙度的好坏主要取决于生产工艺。
拼接屏相比于点间距比较小的LED屏，价格方面会更便宜一点，拼接屏设计时最主要就是拼缝的处理，注意拼缝，设计时非必要情况下，都要跳过拼缝，尤其是“圆”这个造型。
拼接屏：46寸，55寸 物理分辨率：1920*N 1080*N（n代表屏幕数量），1.7mm、3.5mm 、0.88mm、0.44mm、无缝隙；企业常用（1.7mm 和3.5mm）
大屏拼接缝隙：设计时应尽量不要跨屏去设计，会使画面交叉，不重叠，尤其是圆形。
大屏拼接处理器主要功能是将一个完整的图像信号划分成N块后分配给N个视频显示单元，完成用多个普通视频单元组成一个超大屏幕动态图像显示屏。大屏拼接处理器输入信号数量和类型取决于用户需要，输出信号数量等于显示单元数量。
矩阵是将多路输入信号切换输出到多个显示设备，一般来说输入信号数量要大于输出信号数量。（我们想在9块显示器上同时监控100个摄像头传来的信号，就用矩阵来实现即可）
视频矩阵是指通过阵列切换的方法将m路视频信号任意输出至n路监控设备上的电子装置，一般情况下矩阵的输入大于输出即m>n。有一些视频矩阵也带有音频切换功能，能将视频和音频信号进行同步切换，这种矩阵也叫做视音频矩阵。
模拟视频矩阵的输入设备：监控摄像机、高速球、画面处理器等很多个设备，显示终端一般监视器，电视墙，拼接屏等（通常视频矩阵输入很多，一般几十路到几千路视频，输出比较少一般2-128个显示器；例如64进8出，128进16出，512进32出，1024进48出等）。
4*2大屏展示端，我们通过控制端，借由拼接处理器可以对大屏进行随意开窗，漫游，叠加，画中画等效果。在控制端拖动布局，大屏会随之改变布局，非常方便。下面我就借由我以前做过的一个项目帮助大家理解一下拼接处理器的优势以及如何设定不同场景。
如果你们企业还在因为屏幕适配以及尺寸问题而纠结，或者想展示：开窗，漫游，叠加，画中画等效果，毫无疑问你们应该选择拼接处理器，这比传统投屏方式更合适，更没有比例不对的困扰。
把控制端的分屏进行编号，接下来移动控制端对应的编号区块，就可以对大屏进行重新布局，图中展示的正是我们的预设正常场景。场景为居中布局，左右两侧为图表展示。
对控制端进行随机布局，将主视觉模块移动到左侧四块屏幕，图表都集中在右侧，由此我们就由预设场景的居中布局变成了左右布局，左侧为主视觉。
可以随意的关闭大屏某个模块的漫游，通过控制端进行屏幕的显示以及不显示。
画面的任何一个模块都是可以进行平移操作的，我们将模块一和模块五可以平移拖拽到任何一个位置。
画面的任何一个模块都是可以进行叠加到屏幕任何一处，还可以控制模块置顶和置底，非常灵活。
基于web网页端的展示方式，通过在web开发，有需要时会投屏到大屏上去展示。设备比例一定不能差距过大，比如16:9的投屏到32:9的大屏就不是合适，解决方案可以是外接一块1920的显示器即可。
此处要注意web端演示时，记得全屏显示，浏览器边框滑动条等可以不考虑，前端会做相应的浏览器细节考虑，设计按正常分辨率走即可。
触摸屏（Touch Panel）又称为“触控屏”、“触控面板”、“触控台“，是一种可接收触头等输入讯号的感应式液晶显示装置。
当接触了屏幕上的图形按钮时，屏幕上的触觉反馈系统可根据预先编程的程式驱动各种连结装置可用作控制端操作大屏，原理等同于ipad控制，只是载体不同。
设计规范以及按键反馈等交互体验与ipad类似。
滑轨互动屏系统——又称为滑轨电视、滑轨播放等，通过特殊设计的机械滑轨控制装置，结合高清液晶拼接幕墙，实现对屏幕内容的互动控制。滑动到不同位置屏幕展示相关信息，包括图片、文字、视频等，是一种全新的互动展示形式，可与触摸同时使用。
虚拟沙盘/数字沙盘就是用计算机通过投影仪或者LED大屏显示屏动态/静态三维显示：智慧交通、智慧市政、智慧农业、智慧物流、智慧停车、智慧公交、智慧公安、智慧交运等模型，这是一种高科技的模型操作员通过程序，可以随意调整沙盘的尺寸、规划区域、区域布置，快速展示多种全新的创意。
具有三维显示效果，并可以从不同角度观察创意模型，筛选创意方案。注意虚拟沙盘和实体沙盘的联动效果，实体沙盘为底，虚拟沙盘做效果叠加。
分辨率：物理实际分辨率
A：首先我们需要了解适配最主要的痛点就是：灵活，复用性高，可延展。
围绕这几个点我们可以通过模块化开发去做，将每个模块单独开发。我们设计师做这种需求之前，就需要提前去构思，在设计各模块时，尽量使用可扩展和可自适应的图形，这样面对适配的时候我们可以通过移动，缩放这些模块，来完成适配。尽量避免二次设计以及开发，提升时间成本。
图形放大适配
图形位移适配
A：我们适配一定要记住灵活，减少工作量这些原则，如果不遵循这些原则，那么我们做适配的初衷就错误了。这样我们还不如直接就重新开发一套了。就好比我们通过控制端去控制大屏，如何用开发一套的时间去适配两个甚至是多个终端，这是我们需要注意的。当然考虑到一些实际情况，会有一定程度上的修改，但是一定是要从节省工作量去出发的。
从命题我们可以看到4*2的拼接屏，我们可以通过一块屏幕为1920*1080去计算，那么通过计算分辨率应该是1920*4 &1080*2，也就是7680*2160，这样就计算出我们的分辨率了。
工作中相信不少同学都遇到过这种只知物理尺寸而不知道分辨率的项目，那么我们只能通过计算大概的设计分辨率来出初期的设计稿件。
此场景下公式为：15/4=X/2160 X=8100 那么可以大概得出宽度大概为8100像素（只是我们通过计算大概得出来的）
此场景下公式为：15/4=X/1080 X=4050
结果一：如果正方形比例不变，设计尺寸无限接近于大屏实际比例；
结果二：如果正方形比例被拉伸，设计尺寸小于大屏实际尺寸；
结果三：如果正方形比例被压缩，设计尺寸大于大屏实际尺寸。
等比例投屏，投屏电脑投到2*2大屏（4K）
投屏电脑支持输出4K分辨率，投屏电脑分辨率以3840*2160作为设计，投到4K拼接屏上，大屏会完美展示，并且画面非常清晰。
投屏电脑支持输出2K分辨率，投屏电脑分辨率以1920*1080作为设计，投到4K拼接屏上，只会以1920*1080进行输出，因为输出像素只能支持2K，也只是1920*1080的放大。
使用场景：科技展厅，以及一些带主机的设备。
此种情况，一般我们的大屏会自带主机，大屏本身就可以看成一个显示器非常大的电脑。我们如果需要进行可视化演示，那么我们直接就可以通过显示器的尺寸去做设计，这样就是大屏的设计尺寸。
一般这种靠硬件的投射，都是在拼接处理器的处理下，将多个屏幕拼合成一个大的显示器，再通过拼控系统（硬件投屏）进行输出。
一般我们可以将我们大屏的（UE4或者U3D开发）应用程序打包，打包成一个后缀为.exe的应用程序，在大屏电脑上直接点击，程序就可以在大屏上完美的跑起来，也不需要去进行电脑投射大屏。
如果通过控制端去控制大屏，那么投射设备就可以通过多种方式去展示了，可以是手机，平板，触摸屏，手势控制，体感控制等等。
这种情况下投射设备的尺寸就按照本身设备的规范去设计就可以了（比如750*1334，2048*1536），设计尺寸就是我们大屏本身的分辨率就可以了。
此种情况主要使用场景：屏幕宽度非常高，并且内容可以分很多模块展示，模块彼此之间不受影响独立展示，这种情况下我们就可以通过此种方式去投屏。
通过多个主机分别去投射大屏的同等大小区域，比如图中的场景模块被我分成了四等份，我们就可以通过四台主机去分别投射四个模块，形成一个完整的大屏。
此种大屏设计尺寸我们以输出设备的尺寸为主要参考，四台主机那么整体宽度就是1920*4=7680，高度就是1080（如果设备支持4k输出，那么提升相应的设备尺寸*2就可以了）。
A：我们要记住，如果面对的是正常比例投屏到非等比的大屏，我们需要遵守的规范一定是：一切以大屏展示为主。所以我们设计尺寸一定是按照20:3来设计的，大屏展示正常才是我们的唯一标准，投屏电脑可能会出现的问题，我们只能妥协（投屏电脑可能只能展示很小的一部分，但也是没有办法的）
那么我们遇到这种是否就没有办法了呢？在这阿勇给大家提供了三种解决办法，在实际工作中，我也遇到过这种问题，所以在这给大家分享一下。
A：前面的文章我们已经介绍过拼接屏的尺寸的问题，这个问题的解答：1920*9/1080*6 ，这个就是设计分辨率，通过计算得出，最终设计稿尺寸为17280*6480。可以看出设计分辨率确实太大了，设计的时候如何去优化设计尺寸呢？
通过命题我们可以看出电脑分辨率是支持4K的，就是说输出分辨率和显示分辨率我们都是可以上4K的，而4K的分辨率一般会做3840*2160，再结合设计稿尺寸17280*6480，可以将整个效果图尺寸缩小三倍，也就5760*2160。设计可以按照这个分辨率去出图，最终交付给开发的就是切三倍图，并提示开发是缩小三倍做的。
作者：AYONG_BDR 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
总结了商业项目中遇到的一些可视化案例以及科幻可视化风格，大体的将其分为三个大类：传统风格、HUD风格、FUI风格。
传统狭义上的数据可视化, 更多是纯图形去代表数据，通过图形去展示数据，直观的展示所需要表现的指标。数据可视化也有很多分类, 不过也许你也懒得了解了。
比如，网站后台分析，可以说是可视化分析报表类的，例如百度统计，谷歌统计等等；比如，面对B端后台的数据可视化，国内做的最好的无非就是antdesign，element；我们此处说的是基于G端的数据可视化大屏，G端数据可视化从本质上来说是注重直接解决问题，通过直观的展示数据图表去了解各个指标的详细数值；
也有甚者比较注重视觉效果，要酷炫，心理学家说, 人脑70%的神经信号来自视觉, 我们的视觉系统最完善, 而不同的感官之间, 多少是可以转化的, 而且是每个人的天性。国内传统可视化对于此处的接受程度确实不一样。B端和G端的用户，对于可视化风格的接受程度确实是不太一样的，B端对于前沿技术以及可视化表现会有一定的接受能力，但是G端更多注重于界面酷炫，功能反而不是很重要了，这多少有点本末倒置的感觉。
平视显示器(Head Up Display)，以下简称HUD，是运用在航空器的飞行辅助仪器。平视的意思是指飞行员不需要低头就能够看到他需要要的重要资讯。平视显示器最早出现在军用飞机上，降低飞行员需要低头查看仪表的频率，避免注意力中断以及丧失对状态意识(Situation Awareness)的掌握。
因为HUD的方便性以及能够提高飞行安全，民航机也纷纷跟进安装，汽车也开始安装，在一些游戏用户界面，很多地方都会采用HUD的风格，比如射击类，格斗类，动作类游戏等等（赛博朋克，堡垒之夜，绝地求生）。
相对于当前流行的扁平化设计，FUI可谓是在Ul设计中独树一帜，设计风格十分鲜明，极具未来感和科技感。
FUI是一个非常有趣的Ul设计领域，是我们在日常现实生活之中天法探索的用户界面设计方式。在我们的日常工作中，通常日常设计很难有机会为宇宙飞船、时间旅行设备，或者感知型人工智能和外星人使用的用户界面做设计。FUI使设计师有机会去突破现有的用户体验和用户界面的限制，探索一个新的领域。通过虚幻界面设计我们可以大胆的设想以及寻找新的解决方案。例如我们可以大胆的设想AR技术的应用，地图可以采用全息投影技术、人与智能硬件的环境交互等等。
虚幻界面设计甚至可以是新的发明，它们可以作为一种概念的验证它们可以启发我们，提出问题，探索什么可行，什么不可行。正如科幻小说可以激励人们登上月球或建造自动驾驶汽车一样，虚幻用户界面可以激励人们为未来创造技术。
如何培养和完善自己的可视化设计风格呢？其实这个问题有点狭隘，不同客户不同使用场景我们可能风格都会不太一样，但是唯一我们不会变的是我们对于组件图表的理解，图表图形的展示形式。
一个合格的可视化设计师，对于任何可以参考的页面，都可以迅速领略到可以应用的部分页面和展示形式，多吸收知识，提升自己，这就是取其精华，去其糟粕的正确解答吧！所以要将现有风格结合，完善设计理念，提升视觉技法，这才是当下比较重要的。
最近由于工作中的一个项目，对自己充满了怀疑，究竟什么叫科技感？不同的应用场景，科技感是否还依旧有效？同展示条件下不同应用场景，又会有什么样的差异？究竟是什么样子的设计，才能被“甲方爸爸"认定为科技感十足，并且很酷炫呢？从酷炫科技感出发，总结了以下四个方面去解析科技感风格。
相信很多可视化设计师听到最多的一句话：要酷炫，要科技感！每每听到这句话我都会变得非常暴躁。究竟是酷炫科技感代表可视化？还是数据可视才是可视化的内核？每每遇到这种令人糟心的问题，我想的是如何通过自己的专业知识去解释，可是我发现根本解释不清楚，也无法令甲方客户信服，甚至和同为乙方的总包也无法达成统一战线。那么我们应该如何去做呢，又应该如何去解释科技感这个抽象的概念呢？
提到科技感色系一般我们想到的就是蓝色系（科技蓝），但是很多人可能走进了一个误区，科技感的专属色彩并不是只有蓝色，而且一些蓝色确实让我们有审美疲劳的感觉。如图，就是我们比较常见的传统可视化设计，一眼看去满屏都是蓝色，具有中国特色的蓝色科技感。正如所有人都公认的党建题材为红色加黄色，那么科技感真的只有蓝色专属吗？党建题材都是红色专属吗？
由此可见，红色并不是党建题材的专属色彩，存在即合理，也并没有说党建可视化一定要做成红色的。制约的因素有很多：项目背景，项目需求，设计提案，专业认知等等，可视化大屏归根结底还是做的是服务设计，因此服务好客户，得到客户的认可，就能体现设计的价值。但是在设计稿中可以发现，界面运用到了一些党建色彩的元素，也是通过这种方式去展示，这也是设计师需要注意的一点。
蓝色并不是科技感的专有属性，任何一种颜色都是可以塑造科技感的感觉的。比如适合用绿色的场景做的界面，没有做好看，那只能怪自己学艺不精，跟配色无关。不排斥蓝色，但是讨厌到处都是用蓝色，上来就是用蓝色。
说到背景这是一个影响科技感非常重要的因素，一张超神比比皆是，一张超鬼也是随处可见，究竟什么样的背景才是一个优秀的可视化界面所具备的？不是画面发光，有闪光点，宇宙或者银河那种图；也不是科技点线，带渐变的线条（混合工具做出来的那种）看起来就特别复杂；也不是那种亮度超过画面任何一个元素的图。
科技感的背景所起到的作用应该是衬托画面，而不是在画面中比较跳，抢视觉，一大坨发光或者复杂的图形，只会起到反作用。
图形应该是以上指标中，最令人可以接受对科技感风格诠释的一种，科技感的图形到底有哪些特征，我们又该如何去做呢？
通过以上案例我们可以发现，所谓图形表现科技感，最大的特征就是点线面应用的多元化，通过一种或者多种规律将点线面组合起来，线条粗细长短不一，点大小不等。在使用图形进行点缀搭配时，切不可过于花哨，从而抢了主要内容的风头。
此处可能会出现一些三维样式的图形，特殊的视角以及不常见的设计都会增加科技感的元素，但是也不是所有的三维都可以比二维更有科技感的。我最近做的就是甲方客户一直觉得：三维元素太少了，科技感不够。我就纳闷了，到底什么才是科技感？难道科技感只能用三维的来表示了？只能说一定条件下，三维是优于二维展示的，但这也不是绝对的。如果你的场景主视觉本身就是二维范畴的，何必要要求组件三维展示。
下图的二维科技感表现上肯定是超过三维地球的，至少我是这么认为的。
动效应该是最能体现科技感的方式了，通过动态演示组件，通过动效展示界面，远远比静态页面要合理的多。动效主要是通过：位移、旋转、透明度（闪烁）、缩放等方式去制作，形成独特的动画节奏。
可以发现科技感动效一般都伴随着极快的闪烁动画，动画的节奏也是比较偏快，再通过出现动画，字符偏移，剪切路径等演示组件的形成过程。
可能大家没有遇到过这种情况，比如在三维建筑可视化中，科技感本身就依赖于场景的表现，但是不知道大家有没有试过，将三维建筑可视化换成二维GIS之后，我们如何去使画面表现的更具科技感呢？
图一，图二，图三分别就是替换不同的场景，那么我们来看看这些场景为什么不适合原本的之前的科技感风格呢，我们一起思考一下~
大家可能会觉得科技感只针对于一些特殊的场景，或者说是深色场景，比如一些实景地图和卫星地图又该如何去表现科技感的元素呢？那么如果是浅色可视化我们又该如何去做科技感呢？
其实这本身就是一个伪命题，三维表现对画面的冲击力是非常强的，对于画面视觉效果的提升有很大的帮助。不过是否所有的三维就是最合适的呢，这个也确实有待商榷。不过能肯定的是，一定程度上，三维一定会比二维更加具有冲击，更加具有科技感。
其实最正确的表现就是二维表现加上三维场景展示，两者相辅相成，对于画面的展示才是最好的。通过下面这组案例可以发现，二维表现加上三维场景才是最优解。
很多同学对于文字需求如何制作科技感有很多的疑问，通过最近的作图，总结出四种关于文字排版科技感的展示，总结起来其实就那么几点：装饰，图形，字体，版式，表现形式...
其实对于数据可视化设计科技感的研究，不仅需要了解表现层，更需要上升到业务层。一些特定的图形或者装饰，对于画面的丰富程度一定是有帮助的。
讲了这么多，不知道对大家理解科技感是否有帮助，如何提升画面科技感，是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中，多多酷炫，多多科技感！！！
因此我们要确定的是，根据这四个“W”去确定整体业务框架的基础构成，这对于设计风格的初步意向确认有着很积极的意义。
who：王局长
when：领导人会议时
where：公安局
what：新基建建设 数字化转型事项
在领导人会试上，公安局王局长提议通过了关于新基建，数字化转型的各种措施。面对这一场景，有以下几个问题。受众是谁？需要干什么事情？谁去干？数字化转型怎么做？怎么实现？需要用到的技术？展示风格？重功能？还是重展示？
在有了这些的前提下，对于我们设计风格的选择就有了很强的指导意义，比如王局长比较喜欢多色搭配，科技感强的风格，主要为了配合展示汇报，那么就可以通过这一些需求，初步制定风格为效果酷炫的展示类大屏，但是主视觉的展示形式还是要根据其他的具体情况去进一步确认。
在面对一些特有的项目时，一般客户会给出一些参考术语：“3个一带”，“2个方针”，“八大成果”“三山，两水，百林，千田”......
面对这种问题，能做的就是理解其包含的真实意义，究竟需要展示哪方面的，了解清楚项目的背景需求，结合客户所说的一些关键字段，剖析以上的内容可以发现，客户通过一些方针和方法，对“山水林田”进行治理，取得了一些阶段性成果。
因此展示的内容可以确定为智慧治理，或者智慧生态方向的，然后就可以根据项目背景的内容去选择可以应用的具体的一些方案了。
因在到了需求分析的阶段，可以根据客户提供的大量的资料和业务需求，去明确的设计方向，究竟是需要展示哪些内容？可以提供的数据有哪些？展示条件（硬件设施）是否具备？想要的效果有哪些？
比如客户需要查看到山水林田的各个改进措施的效果，以及改进前后的效果对比。说到这单纯的二维GIS和影像已经不太好满足了，那么可以将场景风格定位到三维展示，需要实际1:1建模，至于是通过WEBGL，UE，UNITY就看各自的团队擅长的方向了。
场景大体风格确定，那么展示面板需求根据场景去搭建就可以了，这样一个完整的风格选择过程就算初步走通了，具体的验证环节，可以在一次次会议中再去进行交流和修改即可。
展示容易，风格切换皮肤多，可编辑性高，开发难度低，地图资源较多，适合快速搭建可视化大屏模版，开 源内容较多，前端开发直接调用样式即可。
展示形式较普通，地图风格样式不出彩，设计效果也会打很多折扣，很难与同行拉开差距。
开发过程中可能需要基于高德API以及一些平台，对封装地图进行二次开发，没有GIS开发经验的前端，会比较困难。
https://lbs.amap.com/product/mapstyle#/ Mapbox，高德API，百度API，超图，天地图等等。
以高德API为例
展示灵活，可下载svg矢量区块，并可下载json文件直接交付开发，可下钻到县级，可编辑性高，一般会结合二维GIS来展示，有插件可以直接绘制全国地图。
不够立体，可选样式比较少，画面主视觉容易空洞导致画面效果不强。
开发对于设计图的一些效果还原比较困难，例如发光，渐变等等。只能做一些比较基础属性的修改，对于效果还原可能达不到80%以上。
http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4
以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）；
如何培养自己的数据可视化设计风格（色彩+图形+板式）；
影响科技感风格的四大影响因素（配色，图形，背景，动效）；
设计风格的选择以及确定思路（根据场景、含义、需求）；
可视化风格的应用以及拓展（各种主视觉的应用优缺难点）。
作者：AYONG_BDR 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
今天就带大家好好聊一聊可视化大屏设计中的字体、字号、字重、字体优化等一系类注意事项。字体篇主要分为四大模块：字体选择与字重、字号规范与应用、字体优化与交接、常用字体与推荐。
文字是界面中最核心的元素，是产品传达给用户的主要内容，它的承载体即是字体。从字体的最基本属性（字族、字类、字重、字号等）说起，熟悉字体的那些特征，了解字体在界面中的作用。
衬线又被称为“字脚”，衬线体就是有边角装饰的字体。我们常用的西文字体Times New Roman等；中文比较常见的比如宋体、明体等。
无衬线体则与衬线体相反，通常是机械和统一粗细的线条，没有边角的装饰。最具代表性的Arial、Helvetica的西文字体，中文比较常见的比如黑体，微软雅黑等。
无衬线字体所具备的技术感和理性气质，更受科技型企业或品牌青睐，腾讯谷歌等互联网企业都是选用的无衬线体；衬线字体的优雅与复古，则常用于艺术性文字，时尚品牌等。
因此在具有浓厚技术的可视化氛围中，体现科技感和数字感，结合我们的观测体验，展示形式等，我们统一选用的字体是无衬线体。
在使用数字屏幕阅读时，字体的选择要选用无衬线体（比如黑体，微软雅黑）厚重一点，不可选用衬线体（比如宋体，书法体）比较单薄。
标题可以用Bold，更厚重，更加醒目，且不需要长时间观看；正文由于需要长时间观看，因此采用Regular字重，观感以及体验更佳；
英文字体类型的使用，英文选择更明显的粗体，因为要展示数据，使得数据展示更加直观，依旧是选用无衬线体，比较推荐：D-DIN字体。
字重用Regular，更加纤细精致，英文字体分为大小写，一般推荐使用纯大写模式，因为大写可以保证字体本身整齐，并且宽高都是一致的，对于排版以及展示会更加友好。
数字字体类型的使用，考虑画面的字体的种类不超过三种，并考虑到字体的统一性，数字的字体与英文字体保持统一，比较推荐：D-DIN字体。
数字字体的字重尽量使用Bold，因为展示更加明显，数字的展示一般都为数据展示，在界面的展示中，一般数字字体会比同字号下中文小4-6px，因此展示是保证数据清晰显示，数字的字体大一点数据才能更清晰，更符合数据可视化展示。
数字字体尽量选用等距字体，比如数字“1”和“0”，有些字体的间距会相应的缩小，我们要选用的就是等距字体，这样在做一些列表数据对齐的时候，数据展示更加友好。
政府类客户对于文字大小粗细的追求可以说是非常的偏激，字体加大加粗几乎成了标配，这种需求下，我们能做的就是在原有规范的基础上尽量去提升字号和字重。
常规16：9指的是1920*1080的分辨率
在字体大小的选择上，参考了页面上常规大小，定义了一套关于不同尺寸下的标准字号，正常1080P页面，最小字号不小于16px。
此处字号并不是绝对，因为考虑到目标群体适老化的原因，我们主动提高了字体的大小，一切都是为了提高客户的观测体验，具体字号大小还需要参考设备清晰度，环境灯光，视距，人为原因等因素。
常规32：9指的是3840*1080的分辨率
在字体大小的选择上，其实是两块1080P的屏幕进行拼接，因此如果画面内容较多时，定义最小字号不小于16px。
如果画面内容较少时，具体字号大小还需要参考设备清晰度，环境灯光，视距等因素，对字体进行相应的放大，比例合适即可。
此处字号并不是绝对，因为考虑到目标群体适老化的原因，我们主动提高了字体的大小，一切都是为了提高客户的观测体验。
特殊尺寸指的是非主流的分辨率，比如2880*1920的分辨率
这块的字号大小比较难定义，因为需要考虑的因素很多，总体来说字号大小如果高度在1080px左右，那么就按16:9的字号规范来算。
如果高度高于1080且很多，则需要等比计算或者放大，具体实践出的准确数值还得需要根据大屏的实际情况来综合考虑，这里只是提供一些基础计算方式。
字号的大小受到屏幕大小的影响；
字号的大小受到界面内容的影响；
字号的大小受到观测距离的影响；
字号的大小受到设备性能的影响；
字号的大小受到主观人为的影响；
给开发的字体太大怎么办？如何优化？开发采用默认字体去开发怎么办？开发用部署电脑没有这个字体去打发你又该怎么办？
其实我们可以用一些特殊的方法对原有的字体包进行优化，比如英文字体，我们可以删除非必要的中文字体和数字，符号，只保留一些必要的英文字母。具体方法如下，我们可以用FontCreator软件去进行字体的优化与删减，并修改字体细节，重新命名发布。
同时如果有意向的同学，也可以用自己设计的字体去应用到开发，这样的操作不是一举两得吗？
优化字体教程：https://www.bilibili.com/video/av82311138
默认字体开发可能有时候会出现文字换行，或者文字放不下的情况，因为不同字体的字间距以及大小可能是不同的，因此在初期就需要跟开发协调好，跟设计效果图的字体保持同步，这样才能保证设计效果的还原。
字体的存放一般是有两种，一种是放到单独的服务器然后每次加载去服务器访问字体，另一种是跟代码放到一起。对于字体大小的要求。本地存储不需要考虑字体包的大小，云存储需要考虑字体包大小。
云存储一般字体包大小的话可以限制在2、3M左右，5、6M的字体包就已经非常大了，太大会影响我们字体的读取，画面加载很慢。
最优解就是在部署本地的电脑上安装你需要的字体，这样的话程序就自动读取，可以识别本地部署的字体；如果不支持本地化部署的，字体是存放在服务器或者是跟代码打包放一起的，可以要求开发在全局代码中多写几个备用的字体。
比如你是Windows系统，哪呢么自带的就是微软雅黑，IOS系统自带的就是苹方平台，会自动根据写出的代码按顺序筛选自带的系统字体。
一些特别好用的字体，会在设计过程中提升画面视觉，因此给大家推荐并分享了一些可以做可视化大屏的商用中英文字体。
可视化商用免费字体链接: https://pan.baidu.com/s/1QCihCIs5OK0w-f0oFv8BQQ 提取码: owve
中文字体包含了一些可以做标题的一些造型比较好看的字体，比如优设标题黑，站酷高端黑体，卢帅正锐黑体，胡晓波男神体等等。可做正文字体的比如，苹方简体，思源黑体等等。
英文字体和数字字体主要是分享了一些数据展示比较奇特的造型字体，比如：DS-digital、Furore、以及正常数据展示的D-DIN字体家族等。
1、字体的最基本属性：字族、字类、字重、字号，通过四种基本属性为切入点，精准的去讲述大屏可视化的字体规范和样式。
2、在可视化大屏设计中，字体更加偏向于无衬线体，无衬线字体所具备的技术感和理性气质，更受科技型企业或品牌青睐；
3、在可视化大屏中，展示数据的重要性不言而喻，因此要注意中文、英文、数字字体的选择以及注意事项，一切以数据展示更加明显为前提；
4、在不同屏幕中，可视化大屏的字号大小规范是有区别的，并且需要结合影响字号的五大因素：屏幕大小、界面内容、观测距离、设备性能、主观人为去制定字体规范；
5、通过FontCreator软件去对字体进行优化，掌握字体的删减发布以及交付开发的方法；
6、了解开发存储字体的两种形式，一种是本地化部署，一种是与代码打包服务器云存储，以及了解两种方式的优缺点；
7、了解可视化开发关于字体交接时的注意事项，可以通过自己的理解去解决工作中的关于字体的问题；
8、推荐了常用的可视化大屏的字体：中文字体、英文字体；
9、如果画面内容较少时，可以适当提高字号，反之亦然，比例合适即可。
10、可视化大屏设计字体规范不存在绝对字体规范。
作者：AYONG_BDR 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
色彩篇主要分为：色彩三要素、配色方法、可视化中的颜色扩展、色彩选用原则、行业配色
主要想通过色彩的原理，配色的多种方法，以及如何拓展可视化界面中的元素颜色（文字，装饰，背景，弹框等），最后总结了颜色的记忆属性（行业配色）。
色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。比如红色、黄色、蓝色等。色相可以具体到各个行业所代表的不同颜色，比如公安为蓝色，党建为红色，金融为橘色等。
色相只是颜色的另一种说法。
明度可以简单理解为颜色的亮度，不同的颜色具有不同的明度，例如天蓝色就比红色的明度高，如绿色中由浅到深有粉绿、淡绿、翠绿等明度变化。
明度定义了颜色的明亮程度，从黑色到白色。
饱和度也叫纯度，通常是指色彩的鲜艳度。
色彩的纯度强弱，是指色相感觉明确或含糊、鲜艳或混浊的程度。色彩的纯度变化，可以产生丰富的强弱不同的色相，而且使色彩产生韵味与美感。
是指颜色从纯度（100%）到灰度（0%）的取值范围。
图片配色法可以运用PS工具，选择你钟意的一张图，拖进PS里，执行：滤镜-像素化-马赛克，就可以得到基于图片的马赛克像素点，然后吸取颜色即可。
插件配色法可以通过Eagle、美叶等软件直接获取图片色，非常之方便，此种方法相比较于图片配色法，更具科学性和准确性。
利用色环配色大家可能都知道，但是我们需要做到的是如何灵活的配色以及进行适量的处理。
1、邻近色配色法
三种颜色组成，观感更加舒适，色系搭配更舒服。
2、补色配色法
补色是指色环中两个对称的色块，他们是色环中相隔最远的两个颜色，因此两种颜色的对比也是最大的。
3、补色分割配色法
补色分割与补色配色相似。首先选定一个颜色，然后使用它一个邻近色，最后找出它的补色。（也叫等腰三角形配色）
4、三角配色法
三角色由三种颜色组成，是色环上平均分布的三种颜色，共同在色环上连接成三角形。这种方法更适合色彩鲜艳。
5、四角配色法
这种方法由两对补色组成，共4种颜色，其中只有一个是主色，另外三个颜色是辅助色。
通过对主色的叠加不同透明的黑色与白色（扩展白度和扩展黑度），可以扩展出背景、弹框、装饰、文字等颜色。
扩展白度就是为所有颜色创建出更多较浅的颜色（增加白色透明）。比如我们通过大幅提升主色的白度，可以作为项目的文本色，那么我们该如何增加白度呢？
扩展黑度就是为所有颜色创建出更多较深的颜色（增加黑色透明）。比如我们通过大幅提升主色的黑度，可以作为项目的背景色和卡片底色，那么我们该如何增加黑度呢？
我们通过将主色增加黑度的方式，去定义背景色。具体数值：主色增加90%-95%黑色，作为背景色。
我们通过将主色增加黑度的方式，去定义弹框色以及模块背景色。具体数值：主色增加75%-85%黑色，作为弹框色和模块背景色。
我们通过将主色增加黑度的方式，去定义装饰线色。具体数值：主色增加50%-70%黑色，作为装饰线的颜色。
我们通过将主色增加黑度的方式，去定义装饰点色。具体数值：主色增加30%-50%黑色，作为装饰点的颜色。
我们通过将主色增加白度的方式，去定义正文文字色。具体数值：主色增加90%-95%白色，作为正文的颜色（辅助文字可以减少一半透明度）。
饼图中可以会用到很多的颜色去配置，那我们应该如何去配置呢？
遵守“631”“三不”“两多”这几个原则，可以让你在可视化中的色彩搭配能力更加自如。
运用配色631法则，将配色定义为主色60%，辅助色30%，对比色10%去贯穿整套界面。文字的颜色通过重要，普通，次要去分配，带有色彩倾向丰富页面视觉。
1、不选用同一色系
同色系会使画面看起来对比度非常弱，色彩指代感弱，色彩之间不好拉开层级。
2、不选用颜色接近
邻近色会使画面感觉偏弱，没有强对比，画面层次感不足。
3、不选用同色透明
同色透明会让画面非常的灰，是可视化中的大忌，切勿使用。
1、多选用对比色
强对比可以拉开视觉层级，突出画面，视觉至上。
2、多选用黑白灰
黑白灰可以使画面变的非常高级，并且画面细节度拉满。
色彩具有很强的记忆属性，因此用户会将他们感受到的内容与色彩联系起来。
可以从大量资源池中去寻找灵感，比如金融行业，我们可以从已知的金融元素都是红黄搭配的，因此我们在配色时肯定需要注意这一特征的。
交通一般以蓝色为主调，配合红黄绿（红绿灯颜色）三种代表着道路拥挤程度，蓝色是大多数人最喜欢的颜色。由于蓝色自带的亲和力，它是数字产品设计中最常用的颜色（除了黑色和白色）。
含义： 平静、和平、安全、宁静、信任。
适用： 交通，公安，监控，政府机关。
缺点： 由于其流行性与适用性，作为品牌主色很难脱颖而出。
文化旅游代表着健康，和谐，自然，户外，绿色是大自然的颜色，人们对绿色的喜爱程度仅次于蓝色，绿色具有绝佳的亲和力。
含义： 健康、自然、平静、放松、成长。
适用： 医疗康复、生态、旅游。
缺点： 当绿色作为主色时，你可能需要再找一个颜色表示成功消息了。
蓝色是大多数人最喜欢的颜色。由于蓝色自带的亲和力，它是数字产品设计中最常用的颜色（除了黑色和白色）。
含义： 平静、和平、安全、宁静、信任。
适用： 公安，监控，交通，政府机关。
缺点： 由于其流行性与适用性，作为品牌主色很难脱颖而出。
电力行业一般以国家电网的绿色系为主，给人一种安全可靠，绿色环保的电力行业。
含义： 安全、可靠、绿色、环保。
适用： 电力，电网，网络安全。
缺点： 当绿色作为主色时，你可能需要再找一个颜色表示成功消息了。
生态代表着健康，和谐，自然，绿色是大自然的颜色，人们对绿色的喜爱程度仅次于蓝色，绿色具有绝佳的亲和力。
含义： 健康、自然、平静、放松、成长。
适用： 医疗康复、生态、旅游。
缺点： 当绿色作为主色时，你可能需要再找一个颜色表示成功消息了。
金融行业非常注重属性搭配，暖色系可以增加购买欲望，使人有温暖的感觉。橙色被认为是一种非常有活力和热情的颜色， 它促进活动和创造性思维。
含义： 创意、能量、热情、活跃、烦躁。
适用： 金融，证券，货币，党建。
缺点： 当橙色作为主色时，你可能需要另一种颜色作为警告色。
1、加强对色彩三要素：色相、明度、饱和度的认知；
2、掌握三种配色方法：图片配色法、插件配色法、色环配色法，以及了解配色的原理；
3、可视化界面中如何扩展颜色（白度，黑度，背景，弹框，装饰，文字，辅助色等）；
4、配色631原则，主色、辅助色、对比色应用原则；
5、“三不”原则：不选用同一色系、不选用颜色接近、不选用同色透明；
6、“两多”原则：多选用对比色、多选用黑白灰；
7、不同行业配色注意事项，通过元素搜集以及情绪版，配置不同行业可视化配色；
8、颜色的含义以及适用的地点；
作者：AYONG_BDR 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
首先一般讲适老化无障碍设计，我们都要提到的就是通用性设计和包容性设计。
原则：强调设计所有的系统和产品，使每个人都能使用，无论他们的年龄或能力。
百度百科将通用设计定义为：“能被失能者所使用，就更能被所有的人使用。通用设计的核心思想是：把所有人都看成是程度不同的能力障碍者，即人的能力是有限的，人们具有的能力不同，在不同环境具有的能力也不同。”
通用设计中应当也包含对于特殊人群的基本考虑，要让目标人群觉得：鱼和熊掌都可兼得，既照顾了特殊人群的使用，又兼顾所有人。
原则 ：好的设计应该满足尽可能多得使用者的需求。
百度百科将包容性设计定义为：包容性设计着眼于清楚源于使用主体而造成的各种障碍，使每个个体都能平等、自信、独立的正常使用，为同一适用条件下的互动提供了新的视角，也为创造性和问题解决导向的设计提供了机会。
通过分析客户的困境，结合现状进行深入分析，发掘政府端客户的普遍性存在的问题。
大多数政府省市级领导人的年纪均在60左右，由于年龄普遍较大，对于设计的认知会有偏差，对于审美的把控以及设计本身的价值理解会偏弱。
从去年十月上旬开始，省级党委换届拉开大幕，在至今近8个月的时间里，全国31个省区市先后展开换届。经过此次换届，干部队伍的年龄结构得到进一步优化，初步形成“50后”为主导、“60后”渐成中坚的格局。
根据公开资料统计，31省区市书记平均年龄为58.1岁。其中，“40后”书记有6位，“50后”有22位，“60后”也有3位，某区党委书记胡XX和XX省委书记孙XX同为63年出生，是最年轻的书记。
视力：老年人视力的下降，影响眼睛对空间、颜色、明暗等加工等；
听力：听力弱化造成的听不清楚，尤其是在嘈杂的环境中，老年人听起声音来会更吃力；
表达力：专业化的术语以及需求，会使表达和沟通不便；
互联网和人工智能等技术发展变化太快导致认知力的不足。
绝大多数的老年人对现在数字化的产品很陌生，再加上复杂的界面操作，需要反复的学习使用才能熟悉掌握。
ToG类型的项目，我们的客户群体是政府的某个部门（G端行业中，政府部门因为权限和管辖内容的不同，客户的诉求也会不一样，同时由于决策层是一级一级往上的，对于各个层级的领导都需要去进行满足，对于设计的要求也就更高了），因此我们需要对客户的心理进行重点挖掘。
政府部门的领导或者员工大多数都是高知人群，对于工作的态度都是非常严谨，喜欢按规矩办事，分工明确，力求事情做到一丝不苟，有理有据，讲究严谨做人，务实做事。
政府部门的保密工作需要做的非常到位，尤其是关于公安等民生问题时。另外政府类客户一般对于数据的保密做的非常好，基本都是内网开发，私有化部署，一切互联网的东西连接内网都会报警。如果是外网开发，则需要做好数据存储，一定要非常注重数据安全。
政府类的软件或者产品，基本都有很强的实用性，实用好用才是客户最关心的问题，因此在系统架构上需要做到，简单高效，快速触达，减少客户的学习成本。
对于文字大小的需求比较强烈，提及最多的就是字体放大，加粗。
对于画面能够看清，需要重点表现在前景和背景的色彩对比度。
对于画面的表现，要更加的酷炫，在客户眼里，动态图形效果远远大于静态效果图。
随着年龄增长，人类的晶状体会变黄变浑浊，导致选择性的吸收蓝光。所以蓝色色调在老年人眼中可能会出现模糊褪色的视觉效果，从而降低元素在界面中的对比度， 因此需要提高色彩的饱和度。
产品整体架构以及内容逻辑清晰，简单高效，上手简易。
通过对政府类客户的分析，挖掘客户最深层的需求，针对于以上的关键点，提出适合的解决方案，大体在一下6个方面的全面解析。
对于系统框架以及布局进行一屏式展示，减少系统层级的递进。
对于展示形式上可以更清晰准确， 尽量模块化展示每个需求，做到聚焦用户视角，提升画面表现。
整体交互流程简化，复杂以及多层级弹框尽量少使用。
中文字体类型的使用，在使用数字屏幕阅读时，字体的选择要选用无衬线体（比如黑体，微软雅黑）厚重一点，不可选用衬线体（比如宋体，书法体）比较单薄。
英文字体类型的使用，英文数字的字体选择更明显的粗体，因为要展示数据，使得数据展示更加直观，依旧是选用无衬线体，比较推荐：D-DIN字体。
字体大小的定义。在字体大小的选择上，参考了页面上常规大小，定义了一套关于不同尺寸下的标准字号，正常1080P页面，最小字号不小于16px，具体字体大小还需要参考设备清晰度，环境灯光，视距等因素。
界面中的前景与背景的对比度，是否足以让政府类客户清楚识别；
颜色不应该用作传达信息的唯一视觉手段，需要用额外的文字提示；
通过 H（色相）S（饱和度）B（明度）的数值来划分色域，在保持H值不变的前提下，定义了10个色域。所以在前后景的颜色选择上，满足跨度至少为6，才能让目标人群准确识别文字信息。
视觉呈现以及文案图像对比度至少要有7:1，大文本至少有4.5:1的对比度。有很多在线工具可以帮助检测颜色对比度以及是否达标，如Contrast Ratio 在线检测工具：
画面采用多种饱和度较高的颜色，而不是单色；
颜色的丰富程度决定了画面的视觉表达，色彩越丰富，画面表现越好；
增加图形的占比大小，提升视觉上的表现；
尽量采用识别度较强的图形和图标，尽可能贴近客户的认知范畴；
图标和图形尽量搭配文字描述，方便客户更清晰更快速理解。
观测距离的远近，也决定着画面的展示效果，尽可能的拉近观测距离；
正常视距观测下，以常规设计规范去制定即可，如若观测距离较近，则可适当缩小相应的视觉表现，反而观测距离较远，则放大视觉。
设备的尺寸、精度，分辨率大小都会影响目标人群的体验；
在设备精度较低，或者说点间距过大时，应当适当放大视觉表现，点间距小的则显示非常清晰，可适当缩小视觉表现。
为了保证适老化的推广，需要在适老化的基础上统一标准，在字体，颜色，框架，图形等内容上做出提炼，深入了解目标客户的需求以及客户心理。
本着严谨务实，安全性，实用性等原则，沉淀出一套符合目标人群的设计规范，应用并推广到不同设计团队以及推广到广大设计师中去。
我们需要不断践行适老化设计原则，体现设计的通用性和包容性，应当在设计表现和产品功能上更加的包容这个群体。人工智能大数据时代，虽说政府类客户会比普通人更容易接受，但是受制于某些原因，推动解决老年人面对智能技术的问题解决才是重中之中。
设计师也需要运用自己的专业性，来帮助目标人群融入数字化的生活中去。
因为在不久的将来，我们也会变成这个群体，当我们面对这些束手无策时，那时的设计又会是如何适老的呢？适老化设计是适合所有人的设计，所有的设计师都应该密切关注。
1-不要依赖颜色来传达信息（客户更喜欢文本，有特殊含义除外：四色预警，国标色）；
2-文字展示要清晰，字号大小要更加适合目标群体；
3-提高颜色对比度，丰富画面色彩，禁止使用单一色系；
4-界面中重要元素应尽量避免使用蓝色（特殊行业除外：公安等其他）；
5-增加图形以及图标的视觉表现，尽可能做到一目了然，便于客户理解；
6-尽可能拉近观测距离，提升观测体验；
7-选用高性能，高清晰设备，提升观感，优化客户体验；
8-针对政府客户特点，做到态度严谨务实，安全实用，简单高效；
9-针对政府客户的需求，做到画面清晰，视觉酷炫，色彩丰富明亮，逻辑清晰；
10-盲目照搬照抄而不去具体问题具体分析，这些无障碍设计在某种程度上就会成为“障碍”设计。
作者：AYONG_BDR 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
什么是Resdesign
Redesign并不是一个简单的美化过程，视觉只是Redesign的一部分而不是全部。如果你做产品重构只是为了视觉更美观，从各种网站获取灵感用样机包装，没有任何产品架构以及交互逻辑，那么你的改版必定不会很完美。
但同时也会有很多人陷入这种误区，产品中过时的设计规范会使你的用户会流失到设计体系更好的竞品那里。重构你的产品设计语言，让他看起来更美观，这当然很好，但是也不能盲目的跟随设计趋势，没有任何逻辑做改版，这样会导致交互逻辑的紊乱以及产品架构不清晰。
今天阿勇就从网上任意摘选了一个产品功能需求有问题的一个页面来进行一个页面改版，一起来看看吧！
产品逻辑分析
1、产品主视觉指意不明，贵州省地质灾害防治指挥平台，地图处资源应集中于贵州省，且全国视角下可以下钻贵州省市区。
2、地质灾害防治主视觉应该着重展现崩塌、滑坡、泥石流、地裂缝、等地质现象的展示，并展示预警信息，以及现场地质现象视频反馈，以便于指定指挥方针。
3、此平台信息展示包含人员调度，现场指挥，设备数量，数据资源统计，覆盖区域，预警告警，各地区地质灾害排行，综合防治等信息的内容。
4、产品布局不合理，各区域所占比重需要重新估量，并且主视觉数据资源匮乏，内容单一。
5、业务逻辑没有很好的展现，各区域所要展现的数据信息不明确，业务紊乱。
6、画面中对于业务的理解不够深，导致画面空洞，数据展现量不够，产品失职。
如何进行页面分析
根据颜色：颜色不宜太多，对于特殊行业，固定的颜色是有固定的含义的，比如红橙黄蓝四色预警。
对于画面不合理的地方需要记录下来，对当前板块的内容进行正确的导向，比如你发现这个字体不合适，你的脑海中一定会有正确的用在此处的字体；比如间距，换行，字号等方面也是如此，心中得有一杆秤，去衡量设计的美感。
了解功能，分析数据之间的关系：
了解本产品的应用领域，以及产品功能，分析画面需要展示的数据有哪些，合理的通过设计展示数据之间的关系。
构思主题，围绕主题设计其他元素：
对原来的主题进行产品功能重构，设计新的配色方案，画面内容布局，标题以及主视觉的重新设计，围绕主题进行设计元素的制作。
分析数据，合理选用不同样式图表：
对各个数据进行分析，对内容进行编排，选择合适的图表去展示数据，合理的同时，又具有美感。
提取共性，结合需求做产品规划：
提取各个模块的设计形式的共性，并结合产品需求进行合理的规划，重构页面。
加强技法，了解可视化设计规范：
通过不同的设计技巧来表现画面的美感，制定属于产品的设计规范，并运用这些规范去规范页面布局以及设计，这是要在深度了解可视化设计的前提下。
优化-01
优化-02
优化-03
新增告警列表，设备数量，资源调度信息，展示历史告警记录，合计设备数量，总结资源调度数量，真正掌握自动化地质防治指挥。
最终修改成品
设计师应该跳脱出自己狭义的视角重新来审视“设计趋势”，为自己带来更多的可能性。
视觉只是表现层，理解业务，理解数据，合理表述才是核心。道理大家都懂，但真正的理解数据却是很多设计师迈不过去的门槛。
送给大家一句忠告，永远不要迷信产品原型，设计也不应该被原型所制约，要勇于用自己的设计思维去验证产品的合理性，要用商业眼光去对产品进行查漏补缺，要站在用户的立场上去试想产品的可能性。
作者：AYONG_BDR 来源：优设网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
1、安装插件—时间格式化插件
npm i silly-datetime --save 2、Main.js文件引用
-
import Time from "silly-datetime"; //时间格式化处理插件
-
Vue.prototype.$Time = Time; //全局使用
3、页面中使用
this.$Time.format(new Date(), 'YYYY-MM-DD HH:mm:ss'); 1.安装插件
npm i silly-datetime --save 2.在node中引入
const timeQs = require('silly-datetime'); // 事件格式化控件3.在后端路由中
obj.time = timeQs.format(new Date(), 'YYYY-MM-DD HH:mm:ss');4、参数说明
| 格式 | 类型 | 说明 | 实例 |
|---|---|---|---|
| YYYY | 年 | 年份 | YYYY ：2019 |
| MM | 月 | 月份，补0 | MM：07 |
| M | 月 | 月份，不补0 | M：7 |
| DD | 日 | 日，补0 | DD：07 |
| D | 日 | 日，不补0 | D：7 |
| HH | 小时 | 24小时，补0 | HH：07 |
| H | 小时 | 24小时，不补0 | H：7 |
| hh | 小时 | 12小时，补0 | hh：07 |
| h | 小时 | 12小时，不补0 | h：7 |
| A | am | 上午 | mm：07 |
| a | pm | 下午 | m：7 |
| mm | 分钟 | 分钟，不补00 | mm：07 |
| m | 分钟 | 分钟，不补0补0 | m：7 |
| s | 秒钟 | 秒钟，不补00 | s：07 |
| s | 秒钟 | 秒钟，不补0补0 | s：7 |
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在 Node.js 中，您可以使用该fs.readdir()方法列出目录中的所有可用文件。.此方法异步工作以读取给定目录的内容，并返回目录中不包括和的文件名数组..。
这是一个读取目录中所有可用文件并在控制台上打印它们的名称的示例：
-
const fs = require('fs');
-
-
// directory path
-
const dir = './node_modules/';
-
-
// list all files in the directory
-
fs.readdir(dir, (err, files) => {
-
if (err) {
-
throw err;
-
}
-
-
// files object contains all files names
-
// log them on console
-
files.forEach(file => {
-
console.log(file);
-
});
-
});
fs.readdir()如果给定目录不存在，该方法将抛出错误。
该fs模块还提供了 call 的同步变体，readdir()它readdirSync()同步工作并返回文件名数组：
-
const fs = require('fs');
-
-
// directory path
-
const dir = './node_modules/';
-
-
// list all files in the directory
-
try {
-
const files = fs.readdirSync(dir);
-
-
// files object contains all files names
-
// log them on console
-
files.forEach(file => {
-
console.log(file);
-
});
-
-
} catch (err) {
-
console.log(err);
-
}
查看本指南以了解有关在 Node.js 应用程序中读取和写入文件的更多信息
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
这是一篇酝酿了比较久的内容了，来讲解 B 端设计规范和组件库的分享。这几年网上出了不少类似的分享，虽然都写得很全，都还是觉得不够满意，缺了一点点细节。
所以我自己出一版，希望能帮助你们一次性解决这些问题。
B 端项目设计中，设计规范和组件库是一个绕不过去的槛。作为专业的 B 端设计师，必须有自己完成设计规范和组件库的能力。
所以，首先我们要先理清楚什么是设计规范和组件库。
设计规范是项目设计中要遵守的要求、细节、准则，规定了诸如色彩、字体、栅格、间距、圆角等要素的规则，这些内容都是可以在大量设计元素中应用的细节。
换句话说，设计规范就是提取在项目中会广泛使用的要素，并进行统一制定的过程，防止设计师在设计过程中随意发挥，导致项目统一性的崩坏。
组件库，是通过梳理项目中应用到的按钮、开关、滑块、日历、下拉菜单等控件、组件的设计样式、状态、交互规则，再将它们统一复用到项目的不同页面中去。
严格意义上来说也是设计规范的一部分，是基础规范的进一步延伸，但还是单拎出来讲。因为组件库的应用不仅仅是设计统一性的问题，还融合了 ”组件化“ 的编程思路在里面。
组件化：将复杂系统拆分成不同功能独立的模块并重组的过程，且每个模块包含对应的状态和属性。
对于程序员来说，一个项目就是若干功能模块的合集，往往是先开发这些功能模块，再搭建对应的完整页面，而不是看一个页面开发一个页面。
所以制定完善的组件库，除了提升设计质量外，还可以很好的提升开发效率，推进项目进度。
设计规范和组件库的搭建，就是一个由下至上的设计链路，通过对细节的制定来实现最终的项目表现层。可以借助广为流传的分子原理来理解：
任何成熟的 B 端项目都应该具备自己的设计规范和组件库，虽然有很多小团队在前期推进项目时，因为各种问题没有搭建或落地设计规范，但并不代表他们在招人的时候没有要求。
在今天搭建 B 端项目规范时，新手还有一个普遍的问题：
项目规范和开源框架的规范有什么区别，如果选了一套开源框架做设计，设计师不就不用做规范了？
初级设计师会这么想并不奇怪，因为以 AntDesign 为首的开源框架做的实在是太完善了，不仅囊括了整套的 Web 色彩系统，还有各类常用的、不常用的交互组件。
它们不仅仅提供了相关的设计源文件，也给开发提供了对应的代码和接口，方便程序员应用。看起来我们只要拼拼组件就可以和开发无缝衔接了……
这显然是不可能的，正是因为开源框架太全面，可以产生无数种可能，我们才更应该整理自己的项目规范。就像我前面已经提到过的，设计规范是种 ”限制“，而不仅仅是设计风格的简单沉淀。
比如，不管你选了哪套开源框架，它提供了多少种色彩，你的项目都应该有自己的项目主色，适当的辅助色彩，而不可能把它的整套配色都应用进去。所以，即使颜色没有跳出原有色彩系统，也要筛选出你用到的颜色进行记录。
再比如，开源框架的很多控件，都提供了好几种样式和方案，并不是让你全部都用进去，而是选择自己觉得合适的。所以你每个控件中选择的方案，也需要做记录，统一后续的页面设计。
前面只是记录选择，都还比较简单，而最关键的问题在于，开源框架的组件不可能完美符合项目的全部需求。必然要在原有的基础上作出大量细节的优化，或者创建出新的业务组件出来，所以设计师还是要把这些内容整理出来。
开源框架，就是给我们提供了一个比较全面的设计范围，让我们站在别人的肩膀上做选择，提高设计规范的制作效率，而并不是让我们直接躺平，复制黏贴就可以了。
同时，设计规范和组件需要在软件中进行运用，我们也同样不能直接使用官方提供给我们的组件库展开自己的项目设计，要根据自己项目的规范独立进行搭建和使用。
下面，我们就要根据设计规范的内容，来讲解如何结合并使用即时设计、Figma 的相关功能。
之所以 UI 设计软件能取代 PS 独立发展，就是因为 UI 设计中包含大量需要复用和批量修改的功能。而这些功能和设计规范有非常大的联系，也是 UI 设计中项目规范能被落地实践的重要保障。
但因为 Figam 和即时等次时代 UI 设计软件提供了越来越多的功能，用来支持设计规范的实践，且这些功能可以相互交叉、重叠、组合，导致很多人在前期学习中会被软件功能绕晕，导致很多人没有理解这些功能意义和价值，更不知道如何在项目中具体实践。
所以，我们先将这些功能整体理解一遍，再逐一来对它们的使用规则和应用场景进行拓展。
样式功能是用来记录图层样式设置的功能。简单点理解，就是记录图层右侧的属性设置的功能。正常我们选择一个基础图层，软件右侧的属性面板会将图层样式拆解成若干的类别，包括填充、描边、字体、阴影、模糊。
而样式功能，就是帮助设计师对不同的样式类别进行记录和复用的过程，它会直接将该分类内的相关参数值记录下来，并进行命名，方便后续的调用。
响应式功能是让图层随上级编组尺寸变动而自适应的功能，方便我们在修改组件的大小时不用重新调节里面的元素细节。
例如设计一个卡片，可以通过响应式的设置，让头部的元素左右对齐，下方的文本区域自动拓展，保持卡片的内间距不变。
或者页面右下角悬浮按钮，也可以通过响应式设置始终处于页面底部，这样我们在增加页面高度的时候不用重新设置该元素的 Y 轴位置。
自动布局功能，是通过前端布局思路来设置元素布局方法自动排版功能，是 Figma 开发的最重要的功能，也是让 Sketch 不再成为 B 端设计首选的核心因素。
它的主要功能如根据内容自动完成尺寸变更，并列排版和顺序的变更等。
自动布局可以极大的提升设计效率，正因为自动布局的出现，才让项目组件库可以真正被运用和落地实践起来。
组件功能在不同软件有不同的叫法，如 Symbol、Component、Kits 等，主要是将指定的图层或编组生成一个新的编组单位（类似智能对象），在后续设计中进行复用。
例如设计一个按钮、开关，我们只要将它们生成为组件，就可以在后续设计中快速从组件库里拖拽到设计页面中，不用重新画一遍，并且支持批量修改。
在组件应用中，生成的第一个组件也叫父级组件，其它调用它的组件都是它的子组件，这是一个非常清晰的从属关系。如果我们修改父级组件的内容，所有子组件都会被统一修改。
组件的应用除了这种最基础的应用以外，还包含了很多特殊的功能，如将低级组件合并成一个高级组件的嵌套，或者 Figma 前两年发布的变体（Vriants），可以将一个组件的不同状态聚合到一起，通过属性面板来切换相关的状态。
组件功能是 UI 类软件最复杂的功能，它不仅本身设置很丰富，同时也可以结合样式、响应、自动布局，让本来死板的组件变得更灵活可控，应对复杂的设计环境。
在软件中，记录样式就是在对应的属性面板上 “创建” 并 “命名”，就将对应设置数据转化成一个指定名称的记录，方便我们记忆和调用。
比如，填充色中使用了两种色彩相近的色彩和不同透明度，我们就可以使用中文命名来区分，其中 #2B6DCF 80% 叫 辅助色，#2B93CF 90% 叫 主色。
创建完成的填充色记录，就会在对应的属性样式列表中出现，之后就可以在对应图层的属性中关联该记录了。
之后，所有关联到该记录的图层属性，都可以快速应用该记录内的参数。如果我们在样式的列表中修改该记录的数值，那么所有关联到该记录的图层就会一起被修改。
一定要牢记，目前的主流 UI 工具中，样式是根据不同属性类型记录的。比如一个字体图层，它的填充、字体、描边、投影，是可以创建不同的样式记录的，各不影响。
而软件 Sketch 的样式逻辑，则是根据图层类型来记录的，比如矩形和字体，会记录该图层下所有样式属性的参数，且该记录只能应用在同类的图层上（而 XD 只能记录色彩和字体样式…）。
这种做法虽然理解起来容易，但是会导致样式数量大幅度增加。尤其是在字体上，变动填充、描边都要设置一个新的样式，这在实际项目中的灵活性是非常差的。
而即时设计、Figma 则不考虑图层类型，只关注属性类型。类似前端的样式表中 “类（Class）” 的应用，每个类有不同的样式参数，只要定义了类的命名和属性、参数，那么不同 Div （即图层）就可以自由组合这些样式记录了。
比如色彩 color、阴影 shadow、描边 board 各定义了1、2、3 三种样式类，那么就可以像下方案例中自由组合：
<Div Class = “ color2 shadow1 board3 ”> </div>
<Div Class = “ color1 shadow3 board2 ”> </div>
所以，样式功能可以帮助我们在前期快速搭建基础视觉规范内容，将规范中的配色、字体、投影、模糊等参数整理进样式表中，方便我们后续的快速调用和统一修改。
响应式是我们前面做过很多期分享的课题了，基于 BootStrap 的完整响应式功能确实非常强大，可以通过栅格布局来实现丰富的响应方式。
虽然 UI 软件中也提供了 ”响应式“ 这样的功能，但它可以实现的效果非常有限。用一句话概括就是：
“图层基于父级画板 Frame 的匹配逻辑”
比如我们先创建一个画板，然后再置入相关的图层，那么这些图层就可以启用响应式规则。包含间距固定、居中对齐、等比缩放这三种响应规则。
间距固定的意思，就是图层基于父级画板的某间距数值是固定的，不管画布尺寸怎么变动，图层和画布的对应间距都是保持一致的。比如常规的某一方向间距固定。
比如在模块上的标题栏，就可以将栏目设置成一个 Frame，然后标题相关元素左间距对齐，更多图标右间距对齐，之后变更标题栏的宽，图层的对齐关系就是不变的。
而设置左右、上下间距同时对齐，则是图层会随画布的尺寸变动修改自身的宽高来满足。
居中模式则是图层根据画布的大小进垂直、水平方向的对齐，忽略间距数值。
最后一个缩放的设置，用起来和两侧间距对齐很接近，也是放大缩小画布图层会跟着一起变动，但它响应的逻辑是依据比例，而不是间距。这个设置在实际项目中很难派上用场。
过往的设计软件中，父集尺寸变更，下级元素只能机械的执行缩放效果。而响应式设置就是避免这种僵硬的效果，向真实的网页适配方式看齐。
同时，这种父集对齐的逻辑是可以进行嵌套使用的，比如刚才的标题栏，可以将这个画板再置入到整个卡片画板之下，并对 “标题栏画板” 创建顶部对齐，左右间距对齐，那么该画板本身的尺寸不管怎么变动，头部标题栏顶部位置固定，宽度间距和父集统一，标题栏下方的元素也会左右对齐。
所以，将一个画板中的元素响应方式设置好，可以节省我们很多时间，不用再因为父集元素尺寸修改而一个图层一个图层修改下级元素的尺寸和位置。
在后续生成组件前，我们就要优先完成画板下方的响应设置，这样就能确保该组件支持灵活的调节和布局。比如用上方的卡片，就可以快速搭建一个表盘页面的基本框架，我们要做的就是拖拽画板到一个合适的尺寸即可，无需调节下级图层。
但需要注意的事，即时设计和 Figma 触发响应式的设置是元素需要处于画板 Frame 之下，而不是编组 Group 中， Sketch、XD 因为没有 Frame 的概念，所以使用编组就可以应用响应式设置，这个区别一定要牢记。 同时，响应式虽然可以完成很多高效的适配，但是它的局限性是无法打破的，例如无法实现 3 列以上的卡片列表等间距放大，或者随宽度增加生成新列下方卡片补位。
自动布局 Autolayout 作为一个自动排版功能，使用场景包含两类，父子级响应和依序排列。它们有各自的生成条件。
首先需要一个矩形图层作为背景，并将其它下级图层置入到矩形背景中去，全选后点击 “自动布局“ 按钮即可生成父子级响应。如果图层没有完全置入矩形中或没有相交，那么就会生成一个依序排列的自动布局出来。
创建自动布局会生成一个新的 “特殊编组”，用来收纳下级图层，它在图层列表中会有新的图标。
父子级响应布局中，背景的矩形图层会被自动移除，样式被继承到自动布局的编组上，针对该编组层的属性设置，就等同于原先的背景矩形设置（和画板 Frame 图层逻辑一样）。
这类布局最常应用于按钮控件上，可以让按钮的宽度随文本宽度变化。
但光靠创建这个效果显然是无法完整解释自动布局的，我们就必须从前端的逻辑，来理解这种包含父子层级的元素如何实现自动布局。
首先就是前端环境中，很多控件、组件本身的尺寸是无法直接写死的，它们是随内容自动调节的。而自动布局右侧的设置面板中的田字格一栏，旁边会有宽度和高度设置，默认都是 “自动 Auto”，这就是说它们会随内容宽高进行响应。
比如上方的按钮，它实现的逻辑就是：
按钮宽 = 元素内容宽 + 左右间距
按钮高 = 元素内容高 + 上下间距
这种情况是父层级基于子层级的响应，应用于无法确定父级图形尺寸的场景，如按钮、标签、单元格、瀑布卡片等。
但前端中的不确定性并不是只有这一种，还可以反过来，子图层大小不确定，需要它们去响应父级图层的尺寸变更。
比如一些文本卡片，会应用在不同的页面中，且根据应用的场景会有宽高的调节，所以需要下级的文本区域可以跟随上级尺寸响应。
我们就需要把父级布局设置成 “固定宽/高”。还要选中子图层，在它的自动布局选项中选择 “自适应”，来满足这个相反的需求。
如果子图层没有设置自适应，那么它就不会直接随着父级图层变更自己的尺寸。但还是有针对子元素的响应设置 —— 对齐模式。
在父级布局设置中，有一个网点模块，可以设置下级图层的对齐模式。当下级图层不处于自适应模式时，则对齐可以修改下级元素的对齐方向，即前面响应式设置中的 “间距固定”。
前面我们演示的案例都只有一个子图层，如果出现多个子图层的话，自动布局也可以帮我们进行调节，除对齐外还包含子图层排列方式、分布方式，而这就是依序排列的布局模式。
排列方式就是多个子图层横排还是竖排的设置。
分布方式，则是这些子图层布局的位置怎么定，默认包含固定间距和自适应两种。
固定间距即子元素排列的间距保持一致，在右侧的输入框中可以设置间距数值，也可以结合对齐模式来设置整体的对齐方向。
而自适应，则是在父级区域内进行等分，这个等分的逻辑比较特别，需要左右各有一个子图层靠到头，新增的图层在这个基础上进行 “等间距分布”。
依序排列的优势，除了把现有的子图层快速布局以外，还可以用拖拽、键盘调整元素顺序。或者从外部拖动某个图层到该区域中，就可以插入序列，成为下级图层之一。
前面两种布局模式，可以解决各种 UI 设计中的细节设置问题，理解起来也并不难，只要自己去操作一下就能学会。而真正让人头疼的，是自动布局可以相互嵌套，并混合这两种模式，在复杂的页面设计场景和组件模块中灵活应用。
下面我们通过一个模态对话框 Modal Dialog 案例来进行说明。这个对话框会包含3种不同的宽度规格，且对话内容不确定，可能会字数很多包含很多行的高度。
想要用自动布局实现一个满足需求的对话框，我的建议是先学会拆分里面的下级模块，通过完成下级模块的设置后再进行最终的合并调节。
在这个对话框中， 包含三个模块，顶部标题栏、中间内容区域，底部操作栏。
首先从顶部标题栏开始，我们随意创建个 280px * 44px 的矩形，然后再置入标题和图标到矩形中。之后全选它们创建成自动布局，然后设置父层级内间距，且改成宽度固定、分布自适应，就可以获得一个可以随意修改宽度的标题栏了。
然后就是内容区域，本质上就是一个文本区域，所以我们拖拽一个文本区域出来，设置好对应的参数和填充一点文本即可。
而底部操作栏，则在一开始做好两个按钮（可以使用自动布局做）和背景以后，就可以进行合并，只是父级元素上的设置要改成固定宽度和右对齐，并设置布局间距（按钮间距）。
这三个模块完成以后，我们再选中它们进行自动布局合并，把它们设置成竖排模式，再添加背景色和排列间距，就可以实现出一个正常的对话框效果。
到这一步，如果我们修改对话框整体的宽度，或者输入多行的文本，都无法达到预期的效果，所以还要在这个基础上进一步的调整。
首先是宽度适应，我们要先将最上级的自动布局改成 “固定宽度”，然后将下级图层都改为 “自适应”，这样我们增加组件的宽，下方布局就会立即响应，且推导到更下级的图层中。
为了满足文字宽度随父级响应，高度影响父级高度，就要将顶部的自动布局改成 “高度适配”，再将下级的文本改成 “宽度自适应”、“自动高度”，然后，我们就可以随意拖动这个自动布局的宽，和添加任意的文本内容了。
完成这个基本的版本以后，我们再根据项目需要的三个宽度，直接将它复制成 3 份，每份直接设置对应的宽度出来，就可以作为后续的 “原始组件” 在项目中进行快速引用了。
在这个案例中，我们前后嵌套了若干层的自动布局，每层自动布局的上下级会有各自的响应关系，需要我们逐一进行确认。并且，细心的同学应该也发现，这里面有很多设置似乎和前面的响应式设置非常类似，那把一些下级布局从一开始就做成响应式的编组行不行？
答案是可以的…… 响应式设置和自动布局，本质上都是为了节省我们操作时间而设计的功能，我们要从实际设计的对象出发，选择合理的功能来实现最终的效果。而不是只能使用自动布局，或者只能使用响应式。
也不要因为了解了响应式包含了非常强大的自适应功能，而认为项目中任何组件、页面，都要全由它们组成。在需要频繁优化页面内容、调整设计需求的项目里，过度嵌套的自动布局会让设计文件的 “熵” 值无限增加，会产生更多复杂的、没有效率的问题。
相信引用过 Ant、TDesign 等组件库文件进行设计的同学应该都深有体会……
至于怎么用才好，没有标准的答案，就需要未来大家自己去积累相关经验了。
有了前面响应式和自动布局的认识，我们就要进入到组件功能的具体应用上了。
组件的创建，首先要选中对应的设计元素，可以是单个图层，也可以是编组、自动布局层，然后点击生成组件按钮就可以创建出一个 “原始” 组件。
在即时设计中，这个组件叫 “引用组件”，从该组件复制、引用出来的副本叫做 “实例组件”。它们具有明确的从属关系。
在这个关系中，引用组件是完全可编辑修改的，只要修改它就可以统一修改关联的所有副本样式。
但由引用组件创建出来的副本，却不能任意编辑，我们不能修改它下级图层的尺寸、位置、顺序。但是，副本的编组大小、图层色彩、文字内容往往会有很多特殊的调节需求，所以目前主流的 UI 软件都支持了副本组件的尺寸修改、色彩编辑和文本内容编辑，让组件的使用更灵活。
以上就是组件使用的最基本逻辑，更进一步，组件作为一个编组，所包含的下级图层的逻辑都会被保留下来，例如样式设置、响应式设置、自动布局逻辑。如果一个编组原本就已经创建好了这些规则，那么当它被创建成组件，不管是引用组件还是副本，都会继承这些设置。
比如上一小节中的通知弹窗案例，设置好自动布局再创建成引用组件以后，生成的副本就可以灵活的进行调整和修改文本内容。
除了样式、响应、自动布局外，组件也可以包含组件。我们前面说过，按原子核的结构来讲，一个复杂的组件是由若干基础元素和控件组合而成。比如上方这个案例，就由多个模块、文本区域和按钮组成。
如果我们提前将按钮、图标等创建成引用组件，那么最终整个大的编组再创建成引用组件也是没有问题的，原来的组件格式并没有被抹消。
但有个细节值得注意，就是一个引用组件下方包含的组件只能是 —— 副本。如果刚才我们将按钮创建成引用组件，那么上级编组再创建的引用组件就会自动将这些按钮转换成副本，并在画布周围生成新的引用组件。
所以这个顺序也预示了，组件的嵌套是由下而上的，我们需要先创建低级的引用组件，再用它的副本逐步去组合更复杂的引用组件。这在后面的章节会进一步做出说明。
创建引用组件，除了在画布中它的描边色彩不一样，图层中的图标改变了以外，还会出现在一个新的位置中 —— 组件管理面板。
任何创建的组件都会被生成到左侧的组件栏目面板中，只要从那里拖拽就可以置入当前画布中，方便我们调用和查看。
看起来虽然很简单，但是需要我们管理的细节却很多。首先就是这个列表是一个包含层级关系的树桩结构目录，是允许我们对组件的层级进行结构自定义的。
当我们创建一个引用组件的时候，如果它处于一个画板中，那么创建后它会在组件面板中保留该组件的默认文件路径：
页面 Page / 画板 Frame / 组件 Compoent
如果我们在不同页面和不同画板中创建引用组件，那么该面板的目录一定是特别混乱无序的。所以为了创建出符合正常分类使用习惯的组件目录，就要做出调整。
首先就是建议在项目文件中创建一个独立的页面 Page 用来存放引用组件，任何新增的引用组件我们都需要将它置入到该页面中。且不要将引用组件直接置入到画板中，这样它就不会生产包含画板的层级出来。
然后，我们就可以在文件命名中，使用正斜杠 Slash 符号 “/” 作为层级划分依据。比如下面的案例，包含相同上级结构的组件会被聚合到一个目录层级中：
这种命名结构带来的另一个好处，就是处于同一个目录层级下的组件，在属性面板中可以进行快速的切换。尤其是一些相近的组件要做替换不用再在树桩列表中重新找一遍，直接通过下拉菜单替换即可。
使用命名方式来梳理组件列表，完成有逻辑性、清晰的组件目录，可以极大地提升组件的利用率和效率。但命名必然不是一边创建组件一边凭感觉命名的，而是一开始就要在外部完成的，例如通过思维导图的方式制定出结构大纲，才能保证最终效果符合预期。
组件的应用中，除了不同组件的引用外，过去最让我们头痛的就是同一个组件的不同状态。比如一个简单的按钮，就包含非常多的类型，默认、悬浮、按压、点过、禁用、读取等等。
为了在项目中可以使用组件的不同状态，就需要我们在命名上下功夫，比如：
就是用前面提到的右侧下拉菜单，来完成同一组件的不同状态切换。理论上这么实现是没有问题的，但在实践过程中，不仅组件列表的数量要大大增加，且下拉菜单第一步只改状态显得非常局促……
所以，从 Figma 开始推出了变体 Variants 功能，来更好地应对同一组件不同状态的高效应用。目前该功能已经在线上 UI 设计软件中普及。
在即时设计中，只要创建了引用组件，那么选中它后右侧就会有 “变体” 一栏，点击它就可以针对该组件创建出变体效果。
变体中原来的组件一分为二，并不是完全生成出一个全新的组件，而是在这个组件的概念下创建了一个新的状态出来，在组件列表面板中没有生成任何新的内容。
但是当我们再添加一个该组件的副本以后，就会发现它的右侧多了一个条目和下拉菜单，通过这个下拉菜单就可以切换刚才变体内的不同组件。
比如我们在变体内选中两个组件，在右侧变体的下拉菜单中可以点击修改命名，将它们分别改成 “默认” 和 “选中”，再修改对应的样式。然后再应用同一个副本，就可以看见下拉菜单的内容也替换成了“默认” 和 “选中”，通过选择不同的文字，就可以切换成对应的组件样式。
这个功能可以很方便的切换组件的不同状态，但如果它仅仅支持到这一步，那确实和使用命名编组的方法没有本质区别。真正让变体产生价值的，就在于同一组件的多属性、多状态支持。
还用按钮举例，比如一个按钮包含 3 种样式：纯文字、纯图标和文字加图标，再包含 3 种状态：默认、悬浮、点击，还有浅色和深色模式……
也就意味着，按钮包含样式、状态、色彩三种属性，每个属性中的值可以相互结合，那么总共就要设计出 18 个对应的按钮出来。
如果我们使用变体每个样式命名一个名字，那么下拉菜单有12个选项选起来也是很头疼的。所以，变体允许我们自定义组件属性和值，帮助我们更好的归类和选择组件样式。
所以，在变体面板中，我们可以在更多选项中选择添加分类就添加对应的属性内容，添加出 3 个分类后，通过双击修改它们的名字为 ”样式“、”状态“、”色彩“。
有了属性，变体下方的组件命名就会根本变更。如下图所示，默认一次显示属性值，双击则可以查看对应的属性名和值。
即变体的基本命名语法为 —— 属性1 = 对应类型, 属性2 = 对应类型, 属性3 = 对应类型。
我们就可以通过这种语法方式完成对上方按钮的统一命名，如：
然后，将这些组件统一添加到同一个变体下，之后创建的副本，就可以在右侧变体面板中进行多维度的选项操作了。
具体的变体设置，分类、值的设置，可以自己在软件中摸索，我就不演示了。这里再额外提一个功能，就是对值的设置上，还可以应用 “布尔” 的规则，即选项中只包含 “是” 或 ’否“。
如果我们在色彩的值中只使用 ”是，否“、”yes，no“、”开，关“ 等反义词，那么副本变体选项中就会启用开关按钮，来替代原本的下拉菜单，提升操作的效率。
变体的使用可以很好的减少组件面板中组件的数量，提升组件状态切换的效率。如果一个组件创建变态后被嵌套在另一个组件之下，那么这个复合组件也可以快速修改下级组件的变体类型。
虽然变体功能看起来非常强大，但它并不能适用所有场景，因为修改起来影响的要素过多。它更适用于基础的控件和组件类型。如果针对复杂组件，尤其是包含多层组件嵌套的场景，往往使用命名的方式会比使用变体更有效率，这就需要大家自己在项目中积累经验做判断。
通过前面的功能，就可以完成组件库的对应设置了，你可以在这个项目文件中调用这些组件完成项目。
但实际项目中，组件库的使用可不能被局限在一个项目文件里，我们往往会创建很多个项目文件，来设计不同的流程、版本、模块。于是，这些不同的文件都需要调用同一个样式和组件库。
所以，要让包含规范的文件能被其它文件引用，就需要我们在组件面板中，点击设计库按钮，在弹窗中点击 ”发布“，将它创建成一个设计资源库。这样，我们在别的文件中再次打开这个面板，就可以看到这个资源的开关，点击开关后，该文件就能调用里面的样式和组件了。
在项目中，需要先新建团队并邀请相关成员，然后再创建设计资源库，那么其他设计师才可以引用该资源来完成相关页面的设计。
至于每次原文件更新并落实到引用的其它文件这些细节操作，就需要大家自己去实践了。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
度咔是百度短视频生态首款面向泛知识创作者的视频剪辑工具，致力于降低泛知识类作者的创作门槛，助力生产优质的作品。
随着产品的功能迭代，体验的逐步更新，产品依势也需要打造更好的运营氛围和品牌印象来建立用户口碑、提升转化。对此，设计侧针对度咔产品进行了全面的思考和分析，通过重新定义度咔运营视觉语言，明确产品调性，帮助用户更新品牌认知。
一、品牌框架搭建
产品的运营视觉不只是单纯的画面展示，其背后都有更加明确的设计理念和手段，但运营视觉语言并不是千篇一律的，首先需要明确自身定位，突出产品独特性。
设计初期，我们针对同类型产品与用户类型进行了大量分析，在用户人群划分上度咔更具有针对性，目标用户是口播自媒体、知识类创作者。但不像专业剪辑软件门槛那么高，度咔更多的是通过特色产品功能帮助作者去降低剪辑门槛，业务主要通过征稿和教程的运营活动来提升用户认知，带动日活。
由此，我们梳理出度咔的品牌框架图。以度咔「专为口播自媒体打造的剪辑工具」产品定位作为切入点，依据其自身定位和度咔区别于同类产品的特色功能，我们提炼出“便捷”、“智能”、“专业”产品核心关键词。
二、定义度咔运营视觉语言
在前期创意阶段，我们通过大量的竞品调研、创意发散、概念嫁接等创意手段，找到时下大字为主导的版式创意。简洁明确的版式结构，适当的画面留白，使各元素在版面中形成具有条理清晰、富有节奏的视觉关系。这种逻辑方式，为运营视觉的高效、科学、严谨性提供了极大的便捷，同时也对应了度咔便捷、智能、专业的品牌感知。
对品牌定位、业务诉求、产品功能进行整合后，我们搭建以构成、配色、元素为主的视觉语言框架。
与时下大字为主导的版式创意相结合，建立以大字排版，强构成感为主的视觉语言基调。通过大量的风格测试不断完善视觉基调并投入到项目中，同时规范运营功能排版，搭建元素库，通过设计手法，达到专业与简洁的平衡，统一的视觉基调和品牌色强化用户对品牌认知。
1、重塑视觉基调：
1）统一风格
度咔以往的运营视觉趋于参差，导致整体视觉有较为强烈的割裂感，焕新后的视觉变得更加直率简约，以简洁的视觉风格保证内容传递的高效性。抛弃了诸多装饰元素，取而代之的是硬网格，保持视觉整体和谐统一感，同时也传递出度咔便捷、智能、专业的产品调性。
我们对运营页面进行了布局重构，采用白色底的背景突出文字信息，使得内容信息传达更加明确，突出核心内容。在各类场景中，我们通过品牌色彩、图形、符号的渗透，强化度咔品牌印记。
2）主题延展
根据业务诉求，保持主题性征稿活动的特色——在强化功能点的运营活动中采用3D元素和弥散渐变背景，如夏日主题将度咔符号与泳圈做3D创意结合，增添活动氛围感。
2、品牌色焕新：
1）建立度咔品牌色应用规范。增强品牌识别性和记忆点。
首先搜集符合产品调性的颜色情绪版，选取整体偏明亮，识别度高的新品牌蓝色。对比原来偏紫的品牌蓝，现在升级后的蓝色更显专业智能，且更具有电子意味。
在一个科学有效的色彩系统里，往往包含至少两种色彩：主色+辅助色，两者互相搭配组合成产品体系的整体色彩感受，减少用户在产品体验中对反复出现的主色的视觉疲劳。
我们将蓝色赋予了统一的品牌认知感受，并且将蓝色加入到橙色里，生成了度咔特有的蓝橙色系。橙色在度咔的色彩系统中起着至关重要的作用，为产品带来积极，活力的感受，同时深黑和灰色创造结构、表达边界、建立信息层次。
以基础征稿活动为主的页面使用度咔标准蓝；在需要强主题和活动氛围的页面加入轻量的弥散渐变色彩。
3、提升效率：
1）元素库搭建
建立度咔元素库，规范化运营活动主视觉图形原创性和创意性，沉淀设计资产。
由于后期运营活动多处用到3D元素，对3D的质感进行了规范统一。轻量化的3D风格更加注重极简主义理性美学。
考虑到运营页面的通用性，避免3D材质的喧宾夺主，材质风格以简单通用为主，颜色以品牌色为基础，采用光感通透的玻璃材质，加入环境光感。明朗，透传度咔的品牌气质。
四、总结
本次通过度咔运营视觉语言的搭建，无论从产品本身还是设计侧，在数据和效率上都有明显的提升。而设计作为和用户最近的一方，在平衡各方诉求后呈现给用户一个全新专业感十足的产品，进一步向用户传达品牌感知，助力创作者发现更多美好。
感谢阅读，以上内容均由百度MEUX团队原创设计，以及百度MEUX版权所有，转载请注明出处，违者必究，谢谢您的合作。申请转载授权后台回复【转载】。也欢迎加入MEUX,视觉/交互/运营设计师，可投简历至MEUX@BAIDU.COM (注明信息获取来源如：站酷）
关于我们：
MEUX,百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。MEUX以「简单极致」为设计理念，创造极致用户体验的同时赋能商业，推动设计行业的价值和影响力，让生活因设计而更美好。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com