首页

交互式数据可视化设计思维

ui设计分享达人

      随着大数据时代的快速发展，日常生活中对数据信息的接触场景越来越多，我们在做数据展示设计前首先要梳理数据重点，数据结构关系得到的结论结合用户需求产品需求等进行合理的设计。

      最初的数据展示接近于数据报表的形式，而现今数据展示有两种：静态数据可视化、交互数据可视化。它们的设计基础均基于数据可视化的设计要点进行延展的，而数据可视化要点已有很多优秀的设计师进行总结，因此我重点介绍一下我对交互式数据可视化的理解（仅代表个人观点），希望对大家有所帮助。

      什么是交互式可视化

      静态与交互式数据可视化的区别

      交互式数据可视化中的用户体验

      交互式数据可视化设计思维

      开源数据可视化库



什么是交互式数据可视化

      交互式数据可视化是一种更能够吸引用户的数据信息交流形式，在BI中的应用也变得越来越流行，并且由于其有较强的易用性以及能够为用户体验带来更多附加值而逐渐成为大多数数据分析系统的常见部分。它通过数据动态演示的交互方式，使用户可以直接与信息交互，用以构建自己对信息的理解，交互式可视化必须具有与人机交互方式，如单击按钮，移动滑块，快速响应以显示输入和输出之间的真实关系。

      有效的交互式可视化能够保持展示形式和数据功能之间的平衡关系。简单的图表可能因为太无聊而无法引起用户的注意，复杂数据可视化可能完全无法传达正确的信息。因此数据视觉和交互形式效果需要协同工作。



静态与交互式数据可视化的区别

      静态数据可视化是不包含任何交互功能且不随时间变化的数据可视化，从单一视角关注特定数据故事的信息图。图表中没有可操作的交互功能来调整静态可视化的数据展示结果，更适合不太复杂的数据故事、建立概念之间的关系以及传达预定的视图。其构建成本远低于交互式设计。因此在设计时必须充分考虑如何展示当前显示的数据拟定好数据故事。

      交互式是可视化设计中的绝佳工具，因为它们能够优化信息的显示方式，减少视觉噪音，降低用户对数据阅读的难度。系统中最常见应用之一是数字化仪表板或数字看板，如果直接从枯燥的数据表格获取信息这样的体验是非常原始且视觉干扰过多。而通过梳理数据结构使用适当的交互可视化使看板，能够成为用户快速汲取主要数据信息的理想工具

    设计时决定应用哪种数据可视化形式一方面需通过用户画像分析了解用户偏好如何，另一方面则需要结合数据故事复杂程度采用哪种才能够更全面更准确的传达数据信息，以及在构建项目的过程投入成本最终回报率的高低也起着决定性因素。




交互式数据可视化中的用户体验

      大量数据可用于帮助用户做出更好的业务决策。为了实现这一点，并从数据中获得最大价值，用户必须能够理解它；提出问题、体验模型并识别异常。

      在设计数据可视化面板时，最至关重要的是，需要考虑用户将如何使用这些数据。让更多的用户会使用数据面板而不是让他们去创建面板。强迫用户按照我们设定的规则去破译图表含义不仅不切实际且学习成本高昂。

      用户需要在不受额外功能干扰的情况下看到我们所展示的内容，当我们使用太多的颜色、形状、图案和大量的数据时，容易使用户迷失在数据展示中。我们的工作就是为用户处理数据信息结构降低用户对数据认知的难度。


视觉成像基础

      我们的大脑处理视觉图像要比处理文字内容快 60,000 倍，能够在13 ms内处理一张图像，然而，大脑的处理能力也是有限的。为了展示最优效果，数据可视化必须基于人类认知速度提供信息。需要设计输入来将信息分解成可管理的模块并以用户能够简易处理的方式呈现它。

 

用户分析

      我们在构建任何类型数据可视化时都需以用户为中心，了解用户的目标、动机和需求，经营环境，需要解决什么问题，以及用户语言和特定领域的知识；

在做这方面用户分析不需要耗费大量的时间，只要足以使我们能够进入下一阶段——设计用户路径上即可


用户体验路径

      系统用户的体验建立在两个主要元素上：关键点可视化以及交互路径。而用户路径中每个关键点需设计为对应特定的业务问题。

      可视化工具能够以丰富而复杂的方式与图表交互：筛选、缩放、细分、导出值等。它们都有助于将信息分解为更易于管理的块，因此我们需要考虑多种操作结果，综合起来能够串联出具有多个分支交互路径和图表用户体验路径。




交互式数据可视化设计思维

      可视化中的交互改变了数据的视角，始终致力于简单的可视化而不是复杂的可视化。目标是使其更易于理解和阅读。因此，需要避免使因使用过多的图表引起页面结构混乱，意味着通过过滤某些数据点，选择数据的不同区域，甚至完全改变可视化的类型。重要的一点是：交互式可视化不再是静态的，也不代表数据的单一视图。交互使人们能够根据自己的需要调整可视化并提出不同的问题。


寻找理论依据

      通过了解受众群体是谁，需要展示哪些数据，了解他们将如何使用这些数据。这些都将作为我们设计的理论依据，用以解决设计中哪些图表是可以快速应用到实际场景中，如何为数据结构做简化等问题；在数据的展示形式上通常是使用图表、线条或点、条形图和地图来实现的。万变不离其宗，交互可视化也是同样在此基础上进行扩展发挥作用。


遵循设计原则

      在设计中需要为数据可视化创建各种交互式小部件，但首先需要遵循数据可视化交互设计的三个基本设计原则——可用性、可访问和可操作。

       是否有直观的交互功能和数据可视化？

       用户是否可访问数据，并且能够快速理解其含义？

      是否为用户提供简便易上手的可操作的系统平台？

      当我们有了一个粗略的理论基础模型，就可以搭建数据模型来记录每条数据和相关的元数据，接下来是通过各种交互形式设计用户界面。


清晰的架构

      可视化架构是映射数据故事的形式化基础，在此基础上通过线条、图标和颜色等设计元素的视觉工具进行展示。为了利用这些工具，我们责需要运用对比关系、比重关系、颜色差异、位置信息和象征意义等突出显示信息所呈现的目的及数据间的结构关系。


可视化美学

      设计美学中少即是多的设计理念经久不衰，我们在进行可视化设计时也可按照这一标准在有限的设计空间内为用户提供最多的想法，清晰准确的传达复杂的想法


交互式绘图

     交互不一定发生在页面中明显可点击的事物上，也可融入在图像结构中，用图表中交互的小部件，扩展到其他类型的内容上，通常需要一个或多个UI 元素进行转换提示。

如在做地图中的交互可视化时要探索当前特定点或区域的实时信息，此时需要将图标或交互功能融入在地图上


开源数据可视化库

      简单介绍一下开源的交互可视化数据库，如果对数据没有什么概念在图表设计前可以参考一下数据库中的样式及类型，然后根据自己实际项目的需要进行设计。

D3.js 可能是最流行和最广泛的 Javascript 数据可视化库  专为基于数据操作文档而构建，并使用 HTML、SVG 和 CSS 使数据栩栩如生。

还有很多开源数据库可以查看- 11 个 Javascript 数据可视化库-里面有详细的介绍，这里就不一一说明了，希望在你们的设计中有所帮助。

结论

为了提高交互式数据可视化易用性以及为用户体验带来更多附加值，我们需要基于数据调研，用户分析，场景模拟等方向逐一解决相对应的问题，才可从各项结论中得出设计方向和目标。

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

截屏2021-05-13 上午11.41.03.png



文章来源：站酷    作者：胖Kuan

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

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

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



评论(0) 浏览(3564)

提升产品易用性的10个知识点

ui设计分享达人

作为设计师，我们希望做出来的产品对于用户而言易于访问、易于浏览、易于理解和可供所有人使用。而我们在做页面的过程还要考虑具有视力障碍、行动不便等残疾类人群

万维网的创始人蒂姆·伯纳斯·李 (Tim Berners Lee) 也重申了这一点，他说：

“网络的力量在于它的普遍性。无论是否残疾，

每个人都可以访问是一个重要方面。”

因此，这里有十种方法可以使你的界面更易于访问和更具包容性，并确保你是为用户设计的产品


文章内容包含以下：

1、颜色对比

2、导航选项

3、不仅仅使用颜色来指示状态变化

4、视觉焦点

5、预先加载

6、设计表达

7、视觉层级

8、合理交互

9、用户测试

10、无障碍设计


1、颜色对比

色彩是设计的主要方面之一。确保背景和元素模块之间有适当的对比，可以使用适当的阴影和颜色对比来

区分，突出重要信息是使你的产品更易于访问的最简单的方法。


这里推荐使用工具WebAIM 颜色对比度检查器来实现平衡的颜色对比度。该工具允许输入特定的十六进制代码或从色轮中进行选择，然后进行增量调整以达到元素之间的 AA（最低对比度）或 AAA（增强对比度）对比度标准。

网址：https://webaim.org/resources/contrastchecker/


2、导航选项

在用户使用时，导航的便利性是最重要的因素之一

（确保产品内跨页面的导航具有一致的命名、样式和定位）

（为用户提供站点搜索或站点地图）

（通过提供方向提示例如面包屑和清晰的标题帮助用户了解他们在网站或页面上的位置）


3、不仅仅使用颜色来指示状态变化

虽然颜色对于传达信息很有用，但它不应该是传达信息的唯一方式。在使用颜色来区分元素时，请确保始终提供不依赖于颜色感知的额外标识，以便于用户易识别


比如在做表单的情况可以通过以下方式去做区分


（除了颜色之外，还使用星号来指示所需的表单字段）

（使用提示标签来区分状态）

（添加说明文字）



4、视觉焦点

一些用户使用手机端产品时很难去聚焦于某个点，作为设计者这时需要去通过手法去制造焦点引导用户进行操作。

以手机屏幕为例，用户阅读的习惯分为两种，一种是“z”习惯型另一种是“F”习惯


比如可以在用户浏览路径上去做视觉焦点，引导告知用户进行点击，下面是列出的有效焦点指标：

（具备清晰的对比度）

（具有与元素互补的形状和大小）

（使用互补但引人注目的配色方案）

（好的动画可以帮助用户跟踪焦点移动）

（元素位置大小等适配各种型号）


5、预先加载

在产品上不管是文字还是图片都需要提前告诉用户当前状态，不同的使用环境下用户的网络相对是有波动情况，在网络不好的情况下用户打开产品如果产品没有做预加载大概率会造成用户直接关闭产品


6、设计表达

“没有用户喜欢点击他不想点的入口”听起来比较绕，你可以这样理解，我们平常看到的按钮是什么样呢如果在页面中我们把一个按钮做成一个灰色上面写着点击进入，作为设计者的我们在遇到这样的一个按钮相信都会犹豫的，灰色传达给用户的信息是禁止不可点击，用户已经被培养出这样一种习惯，但是遇到这种按钮上面还写着《点击进入》就会造成信息传达不准确（不仅仅是按钮）。




（样式符合用户理解范围内）

（交互给用户合理反馈，点击后状态、按压状态、禁止状态）


7、视觉层级

建立视觉层次结构， 元素在你的页面设计中的定位方式，并在这些相应元素之间建立一定的连贯性。


（不要挤满屏幕，否则会提升用户阅读成本）

（视力受损的人可能需要放大屏幕上的元素，因此请使你的内容具有可扩展性）

（将重要信息放在视线水平附近）

（使用空格和邻近度使内容之间的关系更加明显）


8、合理的交互

一个好的交互能够让产品达到一个沉浸式体验，相反一个差的交互会造成用户的反感；什么是合理的交互例如在使用阅读产品时，翻页功能是模仿现实中书本的翻页效果作用到线上就会制造出一个良好的体验

交互不仅仅是操作反馈还包含页面布局、元素展示、场景使用等

（符合用户对现实物体的认知，达到联觉效果）

（内容简洁，具备吸引力）

（出现场景是否合情合理）

（具备反馈能力）


9、用户测试

即使在前期工作做的足够好的情况下，在你觉得整个产品设计易于用户使用之后，使用产品的用户也可能会发现某些地方并不像你希望的那样友好


避免这类问题的最佳和最有效的方法是通过用户测试，在整个产品开发项目中进行非正式评估比在项目结束时进行正式的可用性测试更有效，用户测试有很多好处，至关重要的是你能够了解你的产品还存在哪些不足那些设计不到位，然后针对这些不足进行问题解决



10、无障碍设计

创建无障碍设计最重要的部分之一在于知道它绝不是创新的障碍，但是它可以让你创新你的设计，在做产品的时候要考虑到产品不单单只服务一部分人，所以在设计时应当考虑到具备一定障碍的群体

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

截屏2021-05-13 上午11.41.03.png



文章来源：站酷    作者：爱吃猫的鱼_

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

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

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



评论(0) 浏览(1876)

设计要知道-HMI设计必看！车载中控的前世今生

ui设计分享达人

首先先普及下HMI的概念

HMI：- Human Machine Interface : 人机界面，现在多指车载交互系统体验设计。

既然说到人机界面，我们先来设计的载体是如何演变的。




一、车载中控仪表盘演变过程


1886 年，由卡尔·本茨发明的第一辆汽车。当时根本就没有所谓的仪表盘概念，所以载体还得从1908年T型车（Ford Model T）说起，到2012年划时代的特斯拉Model S，汽车仪表盘目前经历四代。



1、第一代:以按键为主


机械式仪表盘: 第一个时代仪表盘为机械芯仪表，一般包含了车速里程表、转速表、机油压力表、水温表、燃油表、充电表等，之后汽车仪表还需要装稳压器来稳定仪表电源的电压，抑制波动幅度，保证汽车仪表的准确性。初代的汽车仪表盘主要以传统的热式和动磁式，显示的信息极为有限，更多的是车辆物理信息“通信员”的角色。


在机械时期中控台哪有什么屏幕可言，那时候的中控台就是收音机和空调的调节器，而且都是实体按键的，只能满足驾驶的基本需求，没有屏幕，都是照搬飞机中控布局，以实体按键为主，功能简陋单一。堆砌功能按钮仪表，没有交互可言。






2、第二代：电气式仪表盘+小中控屏


第二个时代的电气式仪表盘终于诞生，从真空荧光显示屏（VFD），发展到采用液晶显示屏（LED）及小尺寸薄膜晶体管显示器（TFT），显示屏显示的信息越来越清晰、快捷。目前电气式仪表在市场的保有量最大，且一般采用机械仪表结合数字仪表的方式，例如车速、转速信息采用指针，指示灯信息采用LED等点亮，其它信息则采用TFT屏。



虽然相较于第一代机械机芯仪表增加了不少功能，汽车信息反馈也更全面更及时，但是其发展速度却明显与汽车行业不相匹配，对于更深层次的驾驶需求，电气式仪表仍无法满足。




3、第三代：全数字化仪表


汽车仪表盘领域在不断追求更新，于是划时代的全数字液晶仪表盘孕育而生，也是就我们常说的虚拟仪表盘。全数字汽车仪表盘使用了一整块液晶屏取代了传统的指针和刻度表，所有信息都通过这块屏幕显示出来。


单从外观上来看就能给人以一种比较高大上的感觉，这类仪表盘上往往没有指针等部件，所有信息都通过屏幕传递出来。功能更强大、信息显示更具逻辑性，驾驶者接受信息更快，提升行车安全。也可以根据个人喜好调整相应参数，比如比亚迪的仪表盘就可以改变背景颜色。在高级点的，像宝马的全数字仪表就可以切换N多种模式。


2007年iPhone问世后，大屏、轻薄机身、高清显示屏、可安装应用等功能引领了整个行业的革命。电动汽车行业飞速发展,智能AI和人际互联等人车交互概念也跟着兴起,对于中控台的需求和功能复杂度也跟着越发精细起来,结果就是屏幕越来越大。


2013年上市的特斯拉Model S,座舱里最惊艳的就是那块17寸的大屏。超高的分辨率和流畅的操作,和漂亮的UI设计,最初让很多美国民众疯狂。就像苹果手机颠覆了传统手机业,特斯拉也颠覆了传统汽车行业。


2014年换代的奔驰S级将两块12.3寸屏幕连在一起,合成了一块23寸大屏,比特斯拉的大屏还多出6英寸。




拜腾M-Byte,48寸巨屏,横向贯穿仪表台,再一次颠覆汽车的内饰设计。



比亚迪系列汽车的旋转大屏,玩出新花样,可以旋转控制,就像手机横屏和竖屏的场景。


纵观下来,其实不难看出,虽然汽车的中控屏幕也是往着越来越大的方向发展,但因为空间以及功能需求的不同,相比起手机来说,中控屏幕的变化更具备多样性。




4、第四代：HUD显示屏


从上世纪80年代，抬头显示技术在汽车领域已经开始被使用，直到现在才开始逐渐展露头脚。

HUD抬头显示器(Head Up Display)，又叫平视显示系统。它可以把重要的信息，映射在风窗玻璃上的全息半镜上，使驾驶员不必低头，就能看清重要的信息。


战斗机是率先应用HUD抬头显示器的。飞行员在空战中，需要交替观察舱外目标和舱内仪表，易产生瞬间视觉中断，因此会导致反应迟缓、操作失误，并有可能贻误战机，采用HUD抬头显示可克服这一缺点。


第一架使用HUD抬头显示的飞机是美国海军的A-5舰载机。民用航空最早使用HUD抬头显示是法国达索飞机公司的mercure飞机。



在复杂多变的道路上开车，驾驶员双眼离开车辆前方，是个非常危险的事情，尤其是在高速公路上更是明显。于是很多车型，就给车辆配备了一个不需要挪开视线，就能知道车辆基本信息的配置，这就是HUD抬头显示。



HUD作为一款新技术，优势显而易见。当驾驶员需要查看仪表盘或中控台上的信息，视线至少需要转移0.3秒，而HUD投影的信息就在驾驶员平视的正前方，驾驶员可以将更多的注意力放在路面上。将驾驶体验及驾驶员对于路况信息的认知能力进行革新式升级。





二、六大车载系统的特点


现在各家系统百家争鸣，各家车载系统设计有哪些不同？



1. 阿里 斑马智行


简介：


1、阿里车载小程序是一种无需下载安装即可使用的“应用”，旨在为用户打造“随时可用”、“用完即走”的使用体验。


2、AliOS作为互联网汽车操作系统，原生地支持阿里小程序，引入阿里生态服务的同时也面向开发者开放，围绕车场景为用户提供从出行到生活的各类智慧服务。


特点：


1、设计特点：


独立的大卡片式的内容界面模块方便车主在行车过程中单手操作，其配色鲜艳，风格扁平，符合使用场景和国人的使用习惯。


2、功能特点：自带场景智能感知的基因。


得到车主授权后，车载小程序可以围绕行车场景，实现上车前、行车中、下车后自然串联的智能化场景服务。


用户可以在车上通过触控、语音、手势等多模态交互方式，咨询附近的推荐餐厅，小程序会基于用户的喜好作出推荐，还可以预约排号；到达餐厅附近，系统会自动唤醒小程序，为用户找到停车场；下车后，车载小程序会无缝连接到手机小程序端，用户可以在手机上查看餐厅的预约信息等。


△ 斑马智行2.0系统设计


斑马智行，采用智能手机界面和应用商城下载 APP 的使用方式，实现车载和手机的双重控制。


强大的云端特性在语音识别和线上互联方面提供了良好的使用体验，车主可以连接手机蓝牙后，读取其手机通讯录，实现利用车载系统拨打和接听电话的功能。支持 USB 接口，通过 U 盘实现播放音频、视频文件等。在娱乐生活方面，内置虾米音乐，蜻蜓FM，喜马拉雅等，支持在线搜索，在线播放以及在线广播等服务。


同时，斑马智行依靠阿里强大的技术和资源支持，打通停车场，加油站，高速公路支付等，使用户驾车时产生的费用均能通过支付宝支付。




2. 百度 Car Life和Apollo


简介：


1、打造智能车载服务生态，满足用户出行、娱乐、生活等多元化需求，构建人-车-家一体化互联闭环成为时代趋势。


2、智能小程序，是百度提供的一种技术解决方案。开发者基于此开发出来的服务，在各类宿主环境（手机 App、车载系统、IOT 设备等）中，可做到用户无感知安装，即点即用。


特点:


1、设计特点


车载端主界面分别采用蓝、绿、红、灰四个色块对应四个功能模块，「发现」集成音乐、娱乐、听书、电台等特色音视频服务，采用红色在界面中最为突出，其设计风格整体扁平，面性 icon 利于识别与点击。


2、功能特点


智能小程序包括“车后服务”、“资讯”、“休闲游戏”、“视频”、“购物”、“亲子”、“旅游”、“工具”等8个类别，一共80多款。车企可以根据车型定位和自身需求自行定义和组合可供使用的车载小程序。


百度的车载小程序大部分场景下还是只能依靠用户用语音唤醒，但在生态的开放性上，百度车载小程序则做得更为彻底，可以在百度App、百度地图、百度贴吧、百度网盘百度系App上运行。





3. 腾讯 Ai in Car




简介：

1、“腾讯小场景”是专为出行场景打造的车载轻应用生态，部署在云端，不需要下载，即用即走，并支持语音交互。


2、分为3类，出行服务小型车、生活服务小程序和视听服务小程序。


特点：

1、设计特点：


运用的FutureLink3.0系统，FutureLink3.0 基于安卓平台开发，在 12 英寸的中控屏幕上并没有将大量的图标堆砌在首页，反而以地图为背景，将六大功能模块以大板块的形式布局在地图下方，整个界面设计简洁。


2、功能特点：


最大特色：基于位置和场景会被自动唤醒。比如用户经过加油站、停车场、旅游景点的时候，有些购买和支付的服务就会主动弹在车机上，用户再通过语音完成操作。


手机小程序是“人找服务”，那么腾讯车载小程序则进化成“服务找人”。


△ 腾讯在车载场景下的生态布局


Ai in Car，顾名思义，基于 AI 的连接能力和生态，融合腾讯内容生态的优质资源，包括资讯、视频、IP、文学等板块，为车主提供更丰富的内容消费。风行搭载的 FutureLink3.0 车联网系统，就是和腾讯深度合作而诞生的优质案例。



△ FutureLink3.0系统界面


只在设置页中，才会出现二级子菜单列表，而且提供的设置项目也不多，界面层级简单，不累赘，也给司机带来轻松愉悦的操作体验。同时，基于行车安全考虑，在类似天气、股票等查询功能上，比较依赖语音控制。在娱乐生活方面，打通手机和车机账号，用户无需切换账号就可以与车载导航、电台、QQ音乐、微信等功能无缝衔接，支持车主组建聊天组，在行车途中与好友进行实时沟通。


从整体来看 FutureLink3.0 的设计，它更像是一个把需求页面展现在车主面前的「轻应用」，没有传统概念上的主界面、多层交互菜单以及相应的「系统特质」的设计，它更希望把海量资源建立在云端，终端只给车主呈现其所需要的服务即可。




4. 谷歌 Android auto


简介：


Android Auto 系统的工作原理是将手机连接到兼容的汽车，让驾驶员可以使用汽车屏幕和语音操作与手机的应用程序进行交互。它提供了一种导航、收听媒体和消息等的简单方法。


特点：


1、设计特点：


在 UI 框架设计方面，主屏幕以卡片的形式显示通知、活动、导航和消息，右下角有启动语音命令的麦克风图标和底部的活动栏，这些特性属于全局 UI。在它下方，应用程序内容区域显示应用程序启动器或当前使用的主应用程序的内容。



△ Android auto手持设备与车载设计系统


Android auto 将 Android 平台扩展到汽车上，它有两种使用方法：在手机上或在兼容的车载屏幕上。


它有一个简单的界面，标准化的用户交互模型和强大的声音动作，其目的是帮助司机尽量减少分心。需要注意的是，为汽车设计交互式应用程序与手持式设备的设计有根本上的不同，其应用程序的交互界面应该简化，以确保司机的眼睛和手集中在开车上，减少司机分心。


△ Android auto车载系统UI框架


卡片上提供如消息字符串、图标、图形和操作等内容，会根据用户最近的使用情况和优先级来确定卡片的大小。主屏幕会限制卡片的数量，以保持列表的简短和相关。因此，当新的、更相关的内容出现时，应用程序的通知可能会从屏幕上消失。同时，抽屉式的交互方式，提供了简单的操作和导航。每个抽屉项目必须提供一个单一的触摸目标，避免在抽屉里放长的列表，或者在相同内容的视图之间切换。这里官方给出的最佳 UI 做法是简化内容，关注上下文，显示新鲜的、有用的和大多数不滚动的项目，使用单行，对决策至关重要的较长字符串使用两行。




5. 苹果 CarPlay



简介：


CarPlay 车载系统旨在令用户通过汽车制造商之原生车载系统来使用、操控iOS设备并发挥其功能。该产品的首个版本计划于2014年发布，最早出现在一些制造商的汽车展览上。


特点：


1、设计特点：


基于手机映射，所以界面除了横向布局外，icon都和手机端统一。以简洁的布局提供有用的、重点突出的信息，便于从驾驶员座椅上进行扫描。不要用不必要的细节和不必要的装饰来弄乱屏幕。


在整个应用程序中保持整体一致的外观。一般来说，具有相似功能的元素应该看起来相似。


2、功能特点：


作为车内辅助、操作、娱乐的中心，Carplay 可以直接连接到汽车中控的触摸屏上，提供基于 iOS 的相关的服务和应用。Carplay 的整体设计围绕着车内驾驶这一使用场景，而它的设计原则也围绕着这一场景来规划：

  • 成熟。基于最熟悉的 iOS 应用，来设计界面元素，并提供熟悉、直观的体验。

  • 简短。采用尽可能简短的交互，不过度引人瞩目

  • 相关。屏幕显示信息高度相关，提供尽可能少选项，不需要复杂决策

  • 语音。基于Siri，以语音交互为核心，司机无需视线离开前方，手也不用离开方向盘即可完成交互。


全新的电子车钥匙，加上 Apple CarPlay 车载流畅的使用体验，让 iPhone 能在旅途上发挥更多作用。地图、电话、信息、音乐、日历、一言、一触、一旋随你驾驭。






6、华为车机应用



简介：


HMS for Car是华为终端云服务打造的智慧车载云服务解决方案，基于HMS（Huawei Mobile Services），通过AI场景引擎结合华为生态资源，为用户提供精准丰富的出行场景内容和服务，助力汽车从交通工具向具有交互和服务的能力的智能终端进化。


华为快应用是一种基于行业标准开发的新型免安装应用，其标准由主流手机厂商组成的快应用联盟联合制定。开发者开发一次即可将应用分发到所有支持行业标准的手机运行。


HMS Core提供端、云开放能力，帮助开发者实现应用高效开发、快速增长、商业变现，使能开发者创新，为全球用户提供精品内容、服务及体验。

1、全球化分发。已上线超过170+国家和地区。

2、全终端接入。全面支持从小屏幕到大屏幕各种智能终端。

3、全场景支持。快应用直达链接和卡片嵌入全终端场景。


特点：


1、设计特点：


在交互界面上，Carplay和Carlife由于使用的投屏方式，主界面依然是一个个的APP图标，需要点击启动进入后才能使用。笔者认为采用这样移动端过于笨重的交互方式并不适用于车载场景；HUAWEI HiCar的设计理念是"安全便捷、自然舒适、智能贴心", 对车载端的人机交互要素重新布局规划设计，采用桌面卡片的设计方式，以满足复杂驾驶状态下的使用需求。



桌面卡片是应用内容和功能特性的重要载体，用户通过对卡片的快捷操作直达应用的核心功能，提升交互的便捷性。应用可通过接入 HUAWEI HiCar 桌面卡片的方式呈现最核心的功能和服务，并根据自身的需求特性，自行组合卡片元素以满足不同场景下的用户诉求。

  • 背板：背板样式可以为色彩填充或设置背景图。

    背景色支持黑、白、彩色三套。

    应用需提供三套背板以适配卡片主题切换。

  • 品宣区：品宣样式为图标+文字，应用可根据在此区域显示品牌图标和名称。

  • 内容区：展示与应用场景相关的信息，其内容可以是图片、文本或图文样式。

  • 操作区：操作区为文字或图片按键，最多 3 个控件或 1 个控件组。



2、功能特点：


华为智慧助手，可结合用户使用场景，以卡片形式推送提醒、服务和行程，实现智慧化服务找人。例如，送孩子上学时，车机端华为智慧助手将自动推送"有声续播"卡片，用户点击卡片，即可一键续播孩子在华为手机上没听完的有声儿童内容；用户在开车下班回家路上，进入离家500米范围内时，车机系统可自动启动"回家模式"，提前打开家中的窗帘、空调等设备，方便用户享受惬意生活。



My Car功能面向车企开放华为手机等智能硬件系统级入口能力，能够实现远程控车、查车、汽车服务/告警关键信息等反向推送能力。远程控车功能，可以满足用户高频控车诉求，例如，远程开关空调、寻车、查看门窗状态等。另外，当车辆胎压不足、门窗未关闭时，用户也能通过手机、车机及时收到提醒。





三、系统的开源地址


1、阿里Alios开放平台

https://miniapp.alios.cn/index#/document


2、百度车载生态开放平台

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html


3、腾讯-车载小场景（私我领取PDF）


4、谷歌驾驶

https://developers.google.com/cars/design/design-foundations


5、苹果apple car play

iOS - CarPlay 车载


6、华为车机三方应用交互设计规范

https://developer.huawei.com/consumer/cn/doc/50902#h2-1587181522014






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

截屏2021-05-13 上午11.41.03.png


文章来源：站酷    作者：郝小七

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

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

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



评论(0) 浏览(2549)

弹窗主按钮与菲茨定律的纠葛

ui设计分享达人

问题是这样的：有位设计师和我探讨弹窗主按钮在左侧还是右侧的问题，他说，他觉得应该在右侧，原因是因为菲茨定律（Fitts’ Law）：“弹窗主按钮在右侧，次按钮在左侧，是由于菲茨定律，这是因为边角的按钮更容易被点击。”


主按钮在右侧，这个我是能理解的，但在右侧的原因是由于菲兹定律决定的，我是持需考证态度的，毕竟虽然这个说法确实听到过，但我认为还有待进一步梳理，这里需要细究的要点包括：


第一、弹窗主按钮一定要在右侧吗？


第二、如果弹窗主按钮“更适合”在右侧，是不是只有菲茨定律的原因，还有其他原因吗？


第三、菲茨定律到底在解决什么问题，它是否除了上述问题，还解决了其他问题？


带着这三个问题，本文打算从如下几个方面展开：
第一部分：弹窗主按钮位置 
1、PC端弹窗主按钮位置情况 
2、弹窗主按钮位置在哪里更合适 
第二部分：费茨定律 
1、什么是菲茨定律 
2、菲茨定律的启示 
第三部分：总结 

第一部分：弹窗主按钮位置
1、PC端弹窗主按钮位置情况
为了聚焦用户的视觉与心理，激起用户的反馈，弹窗诞生了。由于弹窗可以承载的内容丰富，且交互具备扩展性，弹窗被广泛应用于应用、网页等产品中。在弹窗设计中，标题、关闭的位置基本设计者们基本不会产生争议，而主次按钮的位置是一个永恒的话题。 

1.1、按钮组位置
对于弹窗来说，按钮组的位置位于footer区，此点无可争议。但按钮组应该在footer区的左侧、中间，还是右侧呢？从大量产品设计中我们可以发现，位于左边的比例几乎为0，中间大约5%，而位于右侧的比例达到95%。 

1.2、主次按钮顺序
既然弹窗按钮组在95%的情况下都为右侧，那么我们就来看下，在该种情况下，win和mac系统主次按钮的顺序是怎样的，站在巨人肩膀上，总是能看的更远。 

主按钮是指行动按钮，行动按钮是连接用户与产品的接触点，一个优秀的行动按钮，可以提升用户体验，且帮助用户高效完成任务。主按钮颜色在视觉上通常被醒目突出，而次按钮被弱化表现，这可以降低用户出错的风险，及提高用户完成操作的概率。 

在win系统中：
主按钮在左侧，次按钮在右侧。 

在mac系统中：
主按钮在右侧，次按钮在左侧。 

这里插一句题外话，mac的窗口关闭，最小化、最大化按钮在左上角，而win在右上角，它俩总是做啥都反一反。 

那为什么win和mac会做出不同的选择呢？背后又有哪些设计理念在支撑？翻阅了网上各种说法后，我总结出如下说辞： 

1、mac倾向于把当前场景下推荐用户点击的按钮放在右侧，例如，mac推荐取消，就会把取消放右侧；推荐储存，就会把储存放右侧。且右侧按钮为主按钮，视觉上突出强化。 

2、win倾向于把最安全的按钮（比如取消，关闭）放在右侧。因此，可以说它的主按钮在左侧，只是主按钮没有明确的视觉样式，保持和次按钮一致。 
2、弹窗主按钮位置在哪里更合适
关于主次按钮在左侧还是右侧更合适，两大巨头给出来的设计方案是不同的，网上也有很多同学做了该方面的实验，结果大致是说：不论主按钮在左侧还是右侧，只要系统中统一皆可。就像中国人吃饭用筷子，西方人用刀叉，与其纠结筷子和刀叉哪个更适合吃饭，还不如考虑用户的习惯、使用场景等因素，制定出更合适自身产品的解决方案。 

不过话说回来，目前支持弹窗主按钮在右侧的人数占多数（产品专家、设计专家、用户皆包括），原因不外乎：
1、右手操作原则； 
2、用户在弹窗中的阅读模式为“Z”字模式； 
3、BLABLA（接下来我们看看是不是菲茨定律也要参与进来）。 

第二部分：费茨定律
什么是菲茨定律
1954年保罗.菲茨首先提出菲茨定律，费茨定律是用来预测从任意一点到目标中心位置所需时间的数学模型，其后来在人机交互领域也得到了广泛的应用。它的计算公式为： 
T代表完成移动所需的平均时间； 
a代表光标开始/停止的时间； 
b代表光标移动的速度； 
D代表从起点到目标中心的距离； 
W代表目标的宽度（按移动方向为水平方向计算）。 

首先，完成移动所需的平均时间由两个参数来决定，即起点到目标中心的距离D和目标的大小W。其次，起始点与目标距离远，耗时越长；目标越大，耗时越短。 

这里还涉及用户在使用产品时到达到目标的心理诉求：
1、用户对鼠标指针达到目标并没有时间要求，则用户会缓慢移动鼠标指针，在此过程中逐步调整鼠标指针移动的位置，从而最终达到目标。 

2、用户对鼠标指针达到目标有明确时间要求（例如股票下单场景），此时用户会快速将鼠标指针移动到目标附近，然后在做精细化的调整，从而精确操作目标。 

由上我们可以发现，不论用户是否对鼠标指针达到目标有时间要求， 菲茨定律中的两个关键点为：鼠标指针移动到目标大致区域及精细化微调后精确定位目标中心。且在实际产品设计中，我们必须要考虑如何让用户的鼠标指针以最短的时间到达目标。 

因此，我们可以将菲茨定律中，从起点到目标所需的时间细化为以下四种情况：
1、距离远-目标大
除了鼠标指针需要跨越较大的屏幕范围，相对来说还是比较容易到达目标的，因为目标大。 
2、距离远-目标小
用户需要在鼠标达到目标可触位置前做一些鼠标位移的精细化调整。 
3、距离近-目标大
用户无需做太精细的调整就可以轻易到达目标。 
4、距离近-目标小
在快速到达目标后，鼠标需要做一些精细化的调整。 

以上的距离远近实际上还可以进行细化区分，一个是鼠标指针处于页面任意位置，与目标并无上下文关系；一个是鼠标指针处于下一步操作的上一步位置。 

这里可能会影响到的情况是，当鼠标指针处于页面任意位置时，目标元素的大小需要做通用化考虑（使用业界标准或用户的常规认知）。而当可以非常明确鼠标指针与目标的上下关联时，可以适当调整设计策略，例如鼠标hover一个按钮，出现面板，我们可以发现 ，鼠标指针一定是在按钮上了，才可以去进行下一步操作，这个场景下，鼠标指针的起始位置永远是不变的，变的是目标，即选择了面板中的哪个操作。 

菲茨定律的启示
从上述可知，在产品设计中，我们需要 优先考虑使用“距离近-目标大”的设计方案，再考虑“距离远-目标大”和“距离近-目标小”(但也不能太小，还是要稍微合理化一些），不要去考虑“距离远-目标小”的方法。下面梳理了一些在产品中用到菲茨定律的例子，让大家加深对菲茨定律的感知。 

1、点击区域合理加大，降低操作复杂度。例如表格排序功能，需要扩大点击区域。 
2、可点击属性视觉化。例如tabs的下面会带一条选中的宽度线，由此可推理出鼠标hover到其他tabs上的区域也是如此。 
3、相关内容与操作靠近。例如word中鼠标选中文字，右键可带出相关的操作。 
4、相关按钮互相靠近摆放。例如word文档需要被保存，通常保存和取消靠近，便于用户快速做出选择和操作。 
5、给目标操作安排流程，而不是点状设计功能。例如对单条数据启动编辑后，在原位进行保存。 
6、不希望用户操作的时候，目标设计远一点。例如word文档需要被保存时，mac系统会将“不储存”按钮距离“储存”按钮远一些。 
7、控制风险。在移动端中，如果不想用户误触，会将危险系数较高的按钮放在距离拇指热区远的位置。还有例如睡眠、关机、重启等按钮也不适合放一起（实际上真的放一起了，我无数次误关机）。 

第三部分：总结
说到这里，想必大家对菲茨定律已经有了基本认知吧。在菲茨定律中，有一条为：页面四周的按钮更容易被点击（无限可选中），因为鼠标达到屏幕的边角后，就不可能在超过了，所以mac和win都会将按钮放在屏幕边缘。这个就是那位设计师小伙伴说的，“弹窗主按钮在右侧，次按钮在左侧，是由于菲茨定律，这是因为边角的按钮更容易被点击。” 

实际上我们会发现，假如弹窗的主按钮在右侧，鼠标也并不是达到屏幕的边角，鼠标只是达到了弹窗的边缘（这里会存在一定的心理边缘感知，可能那位设计师就是说的这个吧）。然而，这与菲茨定律中的边角无限可选中概念不是一回事。 

所以说，目前弹窗主按钮大家更赞同在右侧的设计理念是：
1、右手操作原则：右手用鼠标，用户会习惯性把光标放在屏幕右边。 
2、用户在弹窗中的阅读模式为“Z”字模式：先浏览标题，最后视觉落脚点在footer右侧。手眼协调，手会执行视觉落脚点的操作。 
3、mac已经培养了大多数人的用户习惯，这点从很多产品设计中就可以看出，放弃用户习惯就是挑战用户体验，所以，我们为何不去拥抱呢。

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

截屏2021-05-13 上午11.41.03.png


文章来源：站酷    作者：小果1

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

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

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


评论(0) 浏览(1626)

jquery实现input输入框实时输入触发事件代码（最全）

前端达人

第一种办法 

$('#productName').bind('input propertychange', function() { console.log(123); }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

第二种办法 

//键盘事件 $('input').keydown(function() { console.log(123); }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

第三种办法 

<input type="text" oninput="myFunction()"> 

    

    
  • 
        1
    
    • 




<script> function myFunction() { console.log(111); } </script> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •

如果您觉得本篇对你有帮助,可以点关注,给个赞,支持一下,过程有遇到什么问题也欢迎评论私信,进行交流


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




文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

评论(0) 浏览(2453)

jquery更改输入框type为密码框password

前端达人

很蛋疼的一个问题： 


 <input type="text" id="e1" value="123" />



用juqery将文本框变成密码框




    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                $(document).ready(function(){
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#e1").val("hello world!");
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#e1").click(function(){
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                alert('11');
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                 $("#e1").attr("type","password");
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#e1").attr("value","ni mei de ");
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                });
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                });
            
    

        
    

    
    11.



执行的结果：弹出11，文本框没有变！


然后百度一下，发现type的t要大写，即Type偷笑 




    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                $(document).ready(function(){
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#e1").val("hello world!");
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#e1").click(function(){
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                alert('11');
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                if(e1.disabled)
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                 ("#e1").attr("Type","password");
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#e1").attr("value","ni mei de ");
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                });
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                });
            
    

        
    

    
    12.


效果就有了！ 疑问


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



文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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


评论(0) 浏览(1590)

UI 大革新：微软 Win11 界面设计分析

蓝蓝设计的小编

不得不说，此次 Win11 的发布还真是戳中了很多人关注点，虽然一直被吐槽果里果气的，可…… 大家似乎都挺受用。其实此次 Win11 升级，除了统一外观 UI 外，一个很重要的目标就是提高平板用户的操作体验。众所周知，微软一直都是生产力的代言人，而苹果则是人性化交互的倡导者，那么此次 Win11 提升了交互界面，它和苹果的巅峰对决，又将鹿死谁手呢！

1。 更不容易误点的“任务栏”

任务栏此次被吐槽得不轻，一个很重要原因，是它更改了很多人们之前习惯的操作逻辑。不过很多人并未发现，当我们将键盘与平板电脑分离时，任务栏上的图标也会自动扩大一丢丢。正是这一丢丢的距离，让点按时更不容易误触了。

不过相比苹果的 Dock 栏，Win11 的任务栏还是显得小了一些，特别是没法修改大小这个“Bug”，着实让人难受。好在，这只是个对比，如果你一直都是微软的 Fans，慢慢也就适应了。

2。 操作中心

操作中心的改进同样明显，不得不说 Win11 这一次的确带给了我们不一样的体验。和之前的 Win10 通知中心相比，新操作中心不光结构紧凑，运行逻辑也要明显强于老版。特别是新增加的开关按钮，更加适合触控。

不过与苹果的控制中心相比，Win11 的操作中心能够控制的功能并不多，可新增选项也仅限于之前 Win10 的那几个（甚至还少了个截图）。相比之下，苹果的逻辑更像是通常的手机系统，除了各种控制功能外，你还能根据喜好调出计时器、备忘录、秒表、扫码、手电筒等，在日常生活中也是十分方便的。

3。 夜间模式

微软的夜间模式一直都是老大难问题，即便到了 Win11，这种情况也没有好哪儿去！Win11 的夜间模式依旧采用了之前设计，虽然换装了新版资源管理器和新版操作中心，可效果…… 依旧难以直视。而且微软还面临着一个比苹果更大的阻碍。前者开发环境开放，海量的存量应用难以更新，明显限制住了夜间模式推行。而后者则被一直限定在苹果的开发框架内，无论外观还是夜间效果，都要比微软更统一。

此外，苹果还在传统夜间模式基础上，开发出了定时换壁纸和定时切换夜间模式等小功能。这些变化虽然都不足挂齿，可的确能有效提升操作体验。

4。 触屏手势

Win 11 在触屏手势上增加了很多，比如三指下滑显示桌面、三指上滑多任务管理、三指左右滑动切换软件、四指左右滑动切换桌面等。特别是在新动画的加持下，整体效果要强于 Win10。

不过和深耕触屏多年的苹果相比，Win11 的手势还是显得赢弱了些。除了手势数量更加丰富外（比如一个动作可以有多组手势），iPad 还将很多系统功能也融入到日常的手势操作里。比如桌面下滑打开快速搜索栏、顶部下滑调出通知中心、三指捏合/松开完成复制粘贴等，几乎覆盖到了日常使用的各个方面。当然这也和两家的发展方向有关，一个更注重于生产力体验（都生产力了当然没必要玩手势了），一个更注重于用户操作逻辑。从这一点上说，Win11 在触屏方面的改进仍然任重而道远。

5。 动画效果

作为系统 UI 的重要组成部分，动画对于现代操作系统来说，已经不单单是好不好看，或者卡不卡顿的问题了。举个最简单例子，同样是滑动多任务窗口，iPad 的动画效果就要明显流畅和跟手，这其中一个奥秘，就是屏幕刷新率和动画惯性在作怪。不过给人的最直观感受，就是苹果系统更流畅，而 Windows 太生硬。

6。 窗口布局

Win11 在原有 4 分屏基础上，增加了随屏幕尺寸自动调整的新分屏方案。在我们之前的测试中，发现在一些超宽屏幕显示器上，Win11 可以自动激活“左/中/右”、“左辅/中主/右辅”两组全新分屏布局。同时此次新增加在最大化按钮上的布局控件，也明显是为触屏用户准备的，除了更加直观外，使用起来也会更便捷。

相比之下，iPad 的分屏逻辑就要明显落后于 Win11。先不说沿用多年的双分屏策略，基本就是 Win8 时代玩剩下的。即使是目前最新的 M1 芯片，也最多支持三分屏。当然像 Windows 那样的窗口布局也是可以了，只是…… 需要你自己慢慢去挪。

7。 App 使用

自打 Win8 正式转向平板模式后，微软已经历经了 N 次应用迭代，之前也出现过 Metro、UWP 等不同版本的新应用形式。然鹅…… 最终结果大家也看到了，应用商店不死不活，开发商依旧青睐于为传统应用添砖加瓦。实话说，这的确是微软的一个尴尬，因为传统软件中能够适配触屏的数量极少，而且与 Win11 的 UI 也不是很搭。这也就意味着微软首先要面对的，其实就是自己阵营里的那部分人。

反观苹果，封闭的生态链体系保证了自家应用，无论在风格还是操作逻辑上都极为统一。即便是个别应用由于历史原因没有得到适配，也可以强制拉伸至全屏使用。当然这里还有苹果完善的生态链保障，一款应用从 iPad 到 macOS，并不会有明显的外观差异。

当然还有一点也是不容忽视的，那就是微软此次在发布会上宣称的兼容 Android 应用一事。虽然不能解决数据同步与多端共享问题，但却相当于短时间内上架了海量的可支持触屏的应用。当然这项功能目前也仅限于发布会视频，由于预览版尚未开放此功能，实际体验未知。但对于 Win11 来说，这仍然是一件值得夸耀的事。

8。 手写笔

微软对于手写笔的定位，仅仅是简单的标注与绘图。一个最明显例子，就是 Apple Pencil 可以直接将书写转为文字。相对而言，微软认为搞定生产力的家伙还得靠键鼠，至于手写笔么，日常玩玩就可以了，不必太认真。

9。 多屏幕管理

Win11 对于多屏幕管理进步明显，一个最显著变化，就是当我们将外接显示器移除后，Win11 不会自动回收这些窗口。甚至当显示器重连后，窗口还会自动恢复到以前的位置。这样的表现相信大家也能想到有什么用了，没错！做演示简直爽呆了。

10。 小组件

Win11 的小组件摆明了就是为了踢苹果场子，此次更新的小组件，无论从外观还是功能使用上，都和苹果极为相似。即便是第一个测试版，也安排上了天气、待办、日程这些与生产力有关系的模块。同时信息流的加入，也可看作是小部件的一大看点。除了支持点赞互动以外，用户感兴趣的内容还可以收藏起来稍后待看。

不过目前 Win11 的小组件使用的是云端数据，并没有和本地 App 打通。比方说你在本地日历建立好的日程，在小组件中是看不到的。这样的逻辑与 iPad 完全不同，因为在苹果中，小部件其实就是 App 的代言人，如果本尊没有了，小部件自然也就不存在了。

写在最后

总体来说，Win11 此次在触屏方面的改进是比较大的，特别是它没有一味地顺从苹果的思路，依旧保持了熟悉的 Windows 味道，必须给个大大的赞。未来的世界一定是生态链的竞争，这一点上苹果做到了，那么微软呢？拭目以待吧。

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


文章来源：太平洋电脑网

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

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

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


评论(0) 浏览(2939)

被刷屏的微软全新3D表情，微软官方分享背后的设计思路

seo达人



图片

移动设备激增，零工经济迅速发展，远程工作开始兴起。在疫情的影响下，几乎每个人都成了远程工作者。

表情符号与我们一道稳步发展，成为鲜活和丰富情感的必要交流工具。肢体语言，微妙幽默，或者环境条件——虽然我们可以亲眼看到并回应这些暗示，但在网络环境中失去它们会极大地影响我们的交流。然而，用表情符号，几个像素就能以有趣、清晰、能引起情感共鸣的方式表达我们的想法和感受。（彩云注：这就是这项艰巨工作的商业价值）

随着世界走向混合工作场景，面对面和远程结合，线上交流的表达形式比以往任何时候都更加重要。微软365里有超过1800个表情符号，我们在过去的一年里一直在努力通过创建一个自然的Fluent（流畅）系统 （彩云注：这是他们更新整套表情系统的理念）来更新它们。

我们选择了3D设计而不是2D设计，并选择了让大多数表情动画化。在接下来的几个月里，你会看到这些产品的推出，我们想和大家分享一下，以纪念世界表情符号日。我们也很激动地推出了五个全新的表情符号，这代表着我们对工作、表达和空间的新视角。

 

拥抱游戏的力量

在疫情改变工作和生活之间的界限之前，交流就已经朝着真实情感和娱乐的方向发展。为了确保我们的新设计反映这一点，设计研究员Meghan Stockdale与我们密切合作，重新思考专业的图形表达。通过主次研究，她专注于游戏概念，将其作为一种催化剂，帮助我们挖掘最好的作品和最诚实的自我。她引用了斯图尔特·布朗(Stuart Brown)的精彩著作Play: How it Shapes the Brain, open the Imagination, and inspiring the Soul （游戏:如何塑造大脑，开拓想象力，激发灵魂），对她的有着特别地影响。

“游戏对于创造性头脑风暴、发展和掌握新技能以及团队建设等活动至关重要，”Meghan说，“但我们通常不愿意在工作或工作工具中给予游戏空间。由于我们工作和成年的关系，玩有时会让一些人感到不舒服——尽管我们生来就是为玩而生的。”

因为对每个人来说，好玩或富有表现力不是件容易的事，表情符号是完美的小帮手。它们绝不是无聊或装饰性的，而是我们人性的延伸，是重要的沟通工具。根据Meghan的研究，它们可以软化或强化我们的语气，为平淡无奇的互动增添乐趣，帮助我们以一种比书面文字更普遍的方式表达自己。

图片

这张图片展示了我们用不完美的圆来做头部的形状。人是不完美的，为什么我们的图形表示要完美的正圆呢?

那么，表情符号或其他好玩的媒体适合在工作中交流吗？游戏鼓励创新，而表情符号则是有趣的交流者。也许文字和表情符号之间的相互作用加强了两者的交流力量。也许表情符号的脆弱和轻松不仅可以激发我们自己的创造力，还可以鼓励我们组织中其他人共同参与。当我们进一步进入混合工作模式世界时尤为重要，在那里我们将首次在网上见到新的团队成员。

我们的一些全新表情符号甚至试图捕捉这个新的混合世界。下面是一些概念草图，我们希望能得到你的想法。

图片

以上是我们正在创建的新表情符号的概念草图，以帮助传达混合工作的现实。从左到右:一心多用，静音，不拍照，一边工作一边照顾孩子，穿着睡衣。

 

自然有趣，天生流利

在整个过程中，信任和清晰是我们的指导原则。我们希望人们相信，我们的新表情符号风格会理解到他们的意图，反映出他们的人性。人是不完美的，我们的创意中有美，这就是为什么我们选择了一个不完美的圆形作为头部的轮廓形状。

我们还密切关注表情符号中眼睛的表情，并倾向于把眉毛特征做的更加明显。对我们来说，在保留情感意图的同时进行设计是至关重要的。最后，因为我们希望人们相信他们并能从设计中找到令人振奋和鼓舞，我们倾向于明亮、高饱和的颜色和大胆的形式! 

通过全面利用特定的眼睛、嘴巴和头部形状，我们创建了一套统一的面部特征，可以缩放，同时保持一致的外观和感觉。

为了保持不同类别的1888个表情的一致性，我们在新风格中使用了简单的几何形状作为每个表情的基础。如果这听起来很熟悉，那是因为我们连接图标系统的工作方式是相同的。螃蟹表情确实突出了这一点;我们用圆形和半圆形来代替解剖的表示法，造型更加简单，从而赋予它更多的个性。

图片

当你注意细节时，平凡也能变得不平凡。图中的螃蟹表情符号通过大胆、美丽的颜色和厚实的图形形状证明了这一点。

整套表情我都喜欢，但我最喜欢的还是这只螃蟹。这只酷炫的小螃蟹体现了我喜欢我们表情符号系统的地方:它让看似普通的表情符号都变得与众不同。无论是螃蟹还是人类，我们的独创性都蕴含着美。（彩云注：这就是作品中的亮点部分阐述，面试的时候讲自己作品的亮点，就可以从类似这样的角度去讲，学到了！）

最后，但并非最不重要的是，我们必须利用这个机会做出一个改变，只有我们才能真正做到——将经典标准的回形针，改了全新的3D形态。

当然，我们现在使用的回形针可能比全盛时期要少，但我们无法抗拒怀旧的吸引力。

图片

为了让自己焕然一新，我们忍不住把扁平的、标准的回形针变成了新造型的回形针。

表情符号正在巩固其作为在线交流不可或缺的工具角色，你将能够在不同平台和设备上使用这些全新的表情符号。我们的一些新表情从今天开始在Flipgrid中上线，其余的将在未来几周推出。在这个假日季，团队和Windows将配备该套件，Yammer、Outlook和更多的产品将在2022年全年实现落地。

除了表情符号，我们还将在微软365中通过更具表现力的主题、插图、背景等，将我们的流畅美学带入生活。但首先，我们想听听你的意见!你最喜欢的表情符号有哪些?如果你能成为一天的表情符号设计师，你会创造出哪些新的表情符号?

 

本文翻译已获得作者的正式授权（授权截图如下）图片 

原文地址：medium

作者：Microsoft Design

译文地址：彩云译设计（公众号）

译者：彩云Sky

转载请注明：学UI网》被刷屏的微软全新3D表情，微软官方分享背后的设计思路

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

截屏2021-05-13 上午11.41.03.png


文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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



评论(0) 浏览(1845)

微软讲解 Win11 设计改进：让你更接近你所热爱的一切和生活

蓝蓝设计的小编

微软发布了一篇博客，向用户讲述了他们 Windows 11 中的设计改进，微软称其为“洞察用户需求和体验，为十亿人创造”的下一代设计。

微软指出，Windows 11 的设计关注的是人，电脑如何赋予用户做他们想做事情的能力，以及用户喜欢什么。

这包括 85 个以上的研究项目和数以万计的测试机制，微软因此与 Windows 资深粉丝以及对 Windows 有所期望的新用户进行了交流和探讨。

主题：冷静（轻松）78886604d33a6e773135d1e9207b607dcd9fc66ec0517-YNt9iW_fw1200.png

这一改变是可以让用户的生活真正变得更美好。

微软指出，Windows 11 软化了此前生硬的 Windows UI（或指圆角 UI 设计？），进一步增加了情感之间的联系。

新的开始菜单

IT之家了解到，Win11 全新的开始菜单现在被放到了底部中间的位置，更简洁，用户使用的程序和需要的文件也会被优先排到前部，进一步适配了各种尺寸屏幕的体验。

此外，Windows 11 还包括了一些非常别致的设计，例如包括强调中心设计的桌面壁纸。

保证工作效率

09fa513d269759ee23b282f33b85f61e6c22dfab.png

微软表示，windowing and snapping 功能已经有了改头换面的设计。所以当你休息片刻或者暂时去查看新闻时（新的小部件旨在尊重工作流程），系统可以记住你的喜好并保持空间设计。

微软还为 Windows 11 更新了一种新的设计语言，使 Windows 在使用体验上比以之前更加连贯。

新的用户界面也更加柔和、更加友好，微软为 Win11 带来了圆角设计和暖色主题，旨在构建一种更人性化和平易近人的语言，而不会影响到用户的工作。

微软表示，他们希望 Windows 11 不仅仅是一个操作系统，而是编织用户生活的一块锦缎，让你更接近你所热爱的一切和生活，帮助你更好地工作和与其他人联系。

微软原文（机翻）：

从我们记事起，Windows 就一直伴随着我们许多人。它拥有 35 年的丰富历史，充满了新体验，向我们展示了计算如何丰富我们的生活：在 Microsoft Word 中撰写您的第一篇文章，在 Microsoft Paint 中绘制您的第一幅数字艺术作品，或者编写您的第一行代码.

设计下一代 Windows 需要了解过去，但更重要的是对当前和新兴人类需求的深刻理解 —— 以及对技术如何支持这些需求的理解。当我们开始 Windows 11 的设计之旅时，我们研究了世界在过去 18 个月中是如何变化的，包括大流行暴露未满足的需求和加速新行为的方式。更重要的是，我们与人们谈论了他们的梦想和抱负，这样我们就可以了解是什么推动了他们，以及他们需要从他们的技术中获得什么才能实现他们的目标。Windows 11 的设计完全专注于人、计算如何赋予他们权力以及他们喜欢什么。
a8773912b31bb051f1be3d9da7046fbc4bede070.png

创造大量的爱需要与人建立大量的联系，我们喜欢这一点，因为以人为本是我们设计理念的核心。在 85 多项研究和数以万计的测试轮次中，我们与每个人都进行了交谈，从喜欢我们产品熟悉方面的长期粉丝到希望 Windows 更容易、更平易近人的新客户。要了解更多信息，请随时查看我们关于我们的设计、研究过程和理念的视频！


这是我们有史以来最以人为本的版本之一，指导性设计原则基于研究期间出现的一个关键主题：让我们的生活真正变得更美好的平静技术。当今世界非常需要冷静，而这往往取决于我们是否有掌控感、轻松自在和信任感的能力。Windows 11 通过熟悉的基础体验促进了这一点，软化了以前令人生畏的 UI，并增加了情感联系。让您更接近您最爱的体验：家人、朋友、激情、娱乐和创作。Windows 11 是一切都汇集在一起的地方，对此的需求从未如此强烈。

与所有事情一样，大流行影响了 Windows 11。虽然移动技术的兴起使 PC 远离了聚光灯，但去年使它重新回到了舞台的中心。在个人与专业混合的新虚拟范式中，PC 的强大功能和灵活性使我们能够在家中的各个角落工作。它一直是工作、家庭和学校值得信赖的工具和值得信赖的合作伙伴，静静地等待我们的辉煌时刻。

过去的一年向我们展示了人类可以有多聪明。在喧嚣和动荡中，我们看到人们实时学习如何在混合环境中工作，帮助孩子们学习，并找到新的联系和玩耍方式。当我们与它们一起迭代 Windows 11 的设计时，我们努力创造一种深受喜爱的体验，让我们可以轻松地专注于对我们每个人最重要的事情。


以你为中心

Microsoft Windows 设计团队受到创造性实用主义的推动。为超过 10 亿人设计需要同理心。它依赖于内化人类需求来构建包容所有人的解决方案，同时仍然提供个人风格。随着 Windows 进入下一个时代，其演变的故事通过以人为本的产品设计和对构建最具包容性和个性化操作系统的坚定承诺再次讲述。

考虑开始菜单：Windows 体验的基石移到了核心位置。在听取人们表示在使用 Start 时需要更高的效率和更少的噪音后，我们设计了一种更干净、更简单的体验，通过优先考虑他们喜欢的应用程序和他们需要的文档，以人为中心。它还适应现代设备的外形尺寸，可以更轻松地访问从 Surface Go 到超宽显示器的所有屏幕尺寸。

在 Microsoft，这些设计决策并不是轻率的。团队痴迷于每一个像素；我们更新了开始徽标以与我们的新视觉语言保持一致，并利用动画为交互增添乐趣和信心。我们还特意选择了壁纸图像，它欢迎您开机并补充新的中心对齐方式，使您的体验更加平衡和专注。我们希望您从一开始就真正以 Windows 11 为中心。

我们对让技术更加人性化的关注也反映在开箱即用的体验中，这个时刻曾经欢迎您加入，但现在欢迎您回来。我们知道并非每个人都是首次使用的客户，我们渴望通过我们的设计来尊重我们与长期忠诚者的关系。您还可以在设置过程中为您的 PC 命名，以便 Windows 感觉独一无二，比系统设置所使用的随机名称更人性化。Windows 是你的，我们设计它是为了庆祝你的生活和工作方式。

新的 Windows 11 主题提供个性化和自我表达的选择。

一旦您安顿下来，Windows 11 就会记住您是谁以及您在一天中需要什么。一键式交互将带您从任务到任务、体验到体验，而不会中断您的工作流程。在过去的一年里，工作和生活之间的界限被重新定义。在这个新版本的 Windows 中，组织活动的能力是我们密切关注的，确保无论环境如何变化，您都能保持专注和流畅。窗口和捕捉已经过重新设计以记住您的偏好，因此当您暂时离开工作大脑查看新闻时（新的小部件旨在尊重您的工作流程），系统会记住您如何组织空间。我们创造了您家中办公桌的数字等效物，

窗口和捕捉可帮助您保持工作效率和流程。

这些变化通过漂亮的新设计语言变为现实，使 Windows 在各种体验中比以往任何时候都更加一致。听到人们对更柔和、更友好且不那么令人生畏的 UI 的渴望，我们改进了我们的视觉和听觉表达方式。我们圆了尖角并创建了一个更温暖的调色板，以构建一种更人性化、更平易近人的语言，不会妨碍您的工作效率。

▲ 一些我们新的 Fluent 图标、UI 和插图内容的选择，以及我们 Segoe UI 可变字体的表示。

不仅仅是操作系统

您如何为超过 10 亿具有多样化和独特需求的人构建产品？你倾听、迭代和适应。通过对客户的洞察，我们通过柔化边缘、减少混乱和设计一致性，使 Windows 11 更加人性化和受欢迎。这些变化还通过新材料和字体、更新的调色板以及旨在吸引广泛品味的新壁纸和主题包来提升自我表达能力。

在 Windows 11 中，我们看到了从简单的功能性技术到情感化、人性化和非常个性化的技术的转变。Windows 不仅仅是一个操作系统 —— 它是织入我们生活的一部分，让我们更接近我们所爱的一切，并帮助我们创造和联系。

评论(0) 浏览(1842)

数据可视化设计指南：设备篇

资深UI设计者

整个合辑一共有 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设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。



文章来源：优设 作者：

生活因你而火热 

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

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

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





评论(0) 浏览(1535)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档