如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

写在前面

2019年6月18日Material Design更新了设计指南中数据可视化部分，这是谷歌数据可视化团队形成的一套全面的数据可视化指南， 涵盖了设计原则、图表分类、图表的选用、样式设计、交互设计、仪表板设计等方面。个人阅读后进行了翻译，希望能够分享给更多对数据可视化有兴趣的设计同学！

全文章节目录：

原则

类型

选择图表

样式

行为

仪表板

数据可视化

数据可视化就是用图形描绘信息。

原则

数据可视化是一种以图形描绘密集和复杂信息的表现形式。数据可视化的视觉效果旨在使数据容易对比，并用它来讲故事，以此来帮助用户做出决策。

数据可视化可以表达不同类型和规模的数据，包括从几个数据点到有大量变量的数据集。

类型

数据可视化可以以不同的形式表达。图表是表达数据的常用方式，因为它们能够展示和对比多种不同的数据。

图表类型的选择主要取决于两点：要表现的数据和表现该数据的用意。该指南描述各种类型的图表及其用例。

图表类型

1. 随时间变化

随时间变化的图表显示一段时间的数据，例如多个类别之间的趋势或比较。

常见用例包括：

股价表现、卫生统计、年表

2. 类别比较

类别比较图表是多个不同类别数据之间的比较。

常见用例包括：

不同国家的收入、热门场地时间、团队分配

3. 排名

排名图表显示项目在有序列表中的位置。

常见用例包括：

选举结果、性能统计

4. 占比

占比类图表显示了局部与整体的关系。

常见用例包括：

产品类别的综合收入、预算

5. 关联

关联类图表显示两个或以上变量之间的关系。

常见用例包括：

收入和预期寿命

6. 分布

分布类图表显示每个值在数据集中出现的频率。

常见用例包括：

人口分布、收入分布

7. 流程

流程类图表显示了多个状态之间的数据移动。

常见用例包括：

资金转移、投票计数和选举结果

8. 关系

关系图表显示多个项目之间的关系。

常见用例包括：

社交网络、词图

选择图表

面对多种类型的图表，以下指南提供了关于如何选择合适的图表见解。

显示随时间的变化

可以使用时间序列图表来表示随时间的变化，就是按时间顺序表示数据点的图表。表示随时间变化的图表包括：折线图，柱状图（条形图）和面积图。

*基线值是y轴上的起始值。

柱状图（条形图）和饼图

柱状图（条形图）和饼图都可用于显示比例，表示部分与总体的对比。

· 柱状图（条形图）使用共同的基线，通过条形长度表示数量

· 饼图使用圆的圆弧或角度表示整体的一部分

柱状图（条形图），折线图和堆叠面积图在显示随时间的变化方面比饼图更有效地。由于这三个图表都是使用相同的基线，因此可以更轻松地根据条形长度比较值的差异。

面积图

面积图有多种类型，包括堆叠面积图和层叠面积图：

· 堆叠面积图显示多个时间序列（在同一时间段内）堆叠在一起

· 层叠面积图显示多个时间序列（在同一时间段内）重叠在一起

层叠面积图建议不要使用超过两个时间序列，因为这样做会使数据模糊不清。取而代之，应当使用堆叠面积图来比较一个时间间隔内的多个值（横轴表示时间）。

样式

数据可视化使用自定义样式和形状，使数据更容易理解，以适合用户需求。

图表可以从以下方面进行优化：

· 图形元素

· 文字排版

· 图标

· 轴和标签

· 图例和注释

不同类型数据的样式设计

可视化编码是将数据转换为可视形式的过程。独特的图形属性可应用于定量数据（如温度，价格或速度）和定性数据（如类别，风味或表达式）。

这些图形属性包括：

· 形状

· 颜色

· 大小

· 面积

· 体积

· 长度

· 角度

· 位置

· 方向

· 密度

不同属性的表现

多个视觉处理方法可以综合应用于数据点的多个方面。例如，在条形图中，条形颜色可以表示类别，而条形长度可以表示值（如人口数量）。

形状可用于表示定性数据。在此图表中，每个类别由特定形状（圆形，正方形和三角形）表示，这样可以在一张图表中轻松实现特定范围的比较，同时也可以进行类别之间比较。

1. 形状

图表可以运用形状，以多种方式展示数据。形状的设计可以是有趣的、曲线的，或者和高保真的等等。

形状程度

图表可以展示不同精度程度的数据。用于细致研究的数据应该用适合交互的形状（在触摸大小和功能可见性方面）展示。而旨在表达一般概念或趋势的数据可以使用细节较少的形状。

2. 颜色

颜色可用于以四种主要方式区分图表数据：

· 区分类别

· 表示数量

· 突出特定数据

· 表示含义

颜色区分类别

例：圆环图中，颜色用于表示类别。

颜色表示数量

例：地图中，颜色用于表示数据值。

颜色突出数据

例：散点图中，颜色用于突出特定数据。

重点区域

在不滥用的情况下，颜色可以突出焦点区域。不建议大量使用高亮颜色，因为它们会分散用户注意力，影响用户的专注力。

颜色表示含义

无障碍

为了适应看不到颜色差异的用户，您可以使用其他方法来强调数据，例如高对比度着色，形状或纹理。

将文本标签应用于数据还有助于说明其含义，同时消除对图例的需求。

3. 线

图表中的线可以表示数据的特性，例如层次结构，突出和比较。线条可以有多种不同的样式，例如点划线或不同的不透明度。

线可以应用于特定元素，包括：

· 注释

· 预测元素

· 比较工具

· 可靠区间

· 异常

4. 文字排版

文本可用于不同的图表元素，包括：

· 图表标题

· 数据标签

· 轴标签

· 图例

图表标题通常是具有最高层次结构的文本，轴标签和图例具有级别的层次结构。

字重

标题和字重的变化可以表达内容在层次结构中的重要程度。但是应该保持克制，使用有限的字体样式。

5. 图标

图标可以表示图表中不同类型的数据，并提高图表的整体可用性。

图标可用于：

· 分类数据：用于区分组或类别

· UI控件和操作：例如筛选，缩放，保存和下载

· 状态：例如错误，空状态，完成状态和危险

在图表中使用图标时，建议使用通用可识别符号，尤其是在表示操作或状态时，例如：保存，下载，完成，错误和危险。

6. 坐标轴

一个或多个坐标轴显示数据的比例和范围。例如，折线图沿水平和垂直坐标轴显示一系列值。

柱状图（条形图）基线

柱状图（条形图）应从为零的基线（y轴上的起始值）开始。从不为零的基线开始可能导致数据被错误地理解。

坐标轴标签

标签的设计应体现图表中最重要的数据。应根据需要使用标签，并在UI中保持一致性。他们的出现不应该妨碍查看图表。

文字方向

为便于阅读，文本标签应水平放置在图表上。

文字标签不应该：

· 旋转

· 垂直堆叠

7. 图例和注释

图例和注释描述了图表的信息。注释应突出显示数据点，数据异常值和任何值得注意的内容。

1. 注释

2. 图例

在PC端，建议在图表下方放置图例。在移动端，将图例放在图表上方，以便在交互过程中保持可见。

标签和图例

在简单图表中，可以使用直接标签。在密集的图表（或更大的图表组的一部分）中，可以用图例。

8. 小显示屏

可穿戴设备（或其他小屏幕）上显示的图表应该是移动端或PC端图表的简化版本。

行为

图表具有交互模式，使用户可以控制图表数据。这些模式可以使用户专注于图表的特定值或范围。

以下推荐的交互模式，样式和效果（如触觉反馈）可以提高用户对图表数据的理解：

渐进式披露

提供了按需求逐步展示详细信息的明确途径。

直接操作

允许用户直接对UI元素进行操作，最大限度地减少屏幕上所需的操作数量，包括：缩放和平移，分页和数据控件。

改变视角

使一种设计可以适用于不同的用户和数据类型，例如数据控件和动效。

1. 渐进式披露

使用渐进式披露显示图表详细信息，允许用户根据需要查看特定数据点。

2. 缩放和平移

缩放和平移是常用的图表交互，会影响用户对图表数据深入的研究和探索。

缩放

缩放改变界面显示的远近。设备类型决定了如何执行缩放。

· 在PC端，通过单击、拖动或滚动进行缩放

· 在移动端，通过捏合进行缩放

当缩放不是主要操作时，可以通过单击和拖动（在PC端）或双击（在移动端）来实现。

平移

平移让用户能够看到屏幕之外的界面。它应该合理的展示数据的价值。例如，如果图表的一个维度比另一个维度更重要，则平移的方向可以仅限于该维度。

· 平移通常与缩放功能同时使用。

· 在移动端，平移通常通过手势实现，例如单指滑动。

3. 分页

在移动端，分页是一种常见模式，让用户通过向右或向左滑动来查看上一个或下一个图表。

在移动端，用户可以向右滑动以查看前一天。

4. 数据控制

可以使用切换控件，选项卡和下拉菜单筛选或改变数据。

用户调节控件时，这些控件还可以显示指标。

切换控件，选项卡和下拉菜单可以更改或筛选数据。

5. 动效

动效可以强化数据之间的联系，提升交互体验。应该有目的地使用运动（不是装饰性地），表达不同状态和空间之间的联系。

运动应该是合理，平稳，反应灵敏，不会妨碍用户的使用。

在此示例中，图表数据从按天显示动态切换到按周显示。转换期间不会显示所选日期范围之外的数据，从而降低了复杂性。

动画能够体现两个不同图表的相关性。

6. 空状态

图表数据为空的情况下，可以提供相关数据的预期。

在合适的情况下，可以展示角色动画创造愉悦和鼓励。

有特色的动画提升了空状态的效果。

仪表板

在称为仪表板的UI界面中，数据可视化通过一系列图表实现。多个独立的图表有时可以比一个复杂的图表更好地表达故事。

仪表板设计

仪表板的目的应在其布局，样式和交互模式中体现。无论是用来制作演示文稿还是深入研究数据，它的设计应该适合它的使用方式。

仪表板应该：

· 突出最重要信息（使用布局）

· 根据信息层级确定信息的焦点（使用颜色，位置，大小和视觉权重）

应根据对数据的需求确定信息的优先级并进行安排。在此示例中设计仪表板，考虑了以下用户问题：

1. 需要注意的问题
2. 发生问题的时间

3.发生问题的位置

4.受问题影响的其他变量

1. 分析类仪表板

分析仪类表板让用户能够研究多组数据并发现趋势。通常，这些仪表板包含能够深入洞察数据的复杂图表。

用例包括：

· 随时间变化的突出趋势

· 回答“为什么”和“假设”的问题

· 预测

· 创建有深度的报告

分析类仪表板示例：

· 跟踪广告活动的收效

· 跟踪产品在其整个生命周期中的销售额和收入

· 随时间变化的城市人口趋势

· 跟踪随时间变化气候数据

分析类仪表板显示气候数据

2. 操作类仪表板

操作类仪表板旨在回答一组预设的问题。它们通常用于完成与监控相关的任务。

在大多数情况下，这些类型的仪表板具有一系列关于当前信息的简单图表。

用例包括：

· 跟踪目标的当前进度

· 实时跟踪系统性能

操作类仪表板示例：

· 跟踪呼叫中心的活动，例如呼叫音量，等待时间，呼叫长度或呼叫类型

· 监控在云端应用程序的运行状况

· 显示股市情况

· 监控赛车上的遥测数据

操作类仪表板显示设备存储指标

3. 演示类仪表板

演示类仪表板是为感兴趣的主题提供的展示视图。

这些仪表板通常包括一些小图表或数据卡片，用动态标题描述每个图表的趋势和见解。

用例包括：

· 提供关键绩效指标的总览

· 创建高级执行情况的概要

演示类仪表板示例：

· 提供投资账户绩效的总览

· 提供产品销售和市场份额数据的概要

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

「元辰」数据概念控制中心，基于真实的使用场景和概念的表现手法，打造的企业及个人后台数据管理系统。

主要分为首页概览、作品编辑、信息收集、数据统计和常规配置等，简单的动效使操作回馈有了更好的交互体验，且真实可依。

-

「元辰」注重真实的数据体验，致力把数据信息通过大屏实时简洁、有效的传达给使用者。针对精准用户“迅速获取信息、简化操作流程、减少学习成本”，我们将这些问题作为传达的核心要素，一直贯穿始终。

-

欢迎沟通探讨、合作交流。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

for(var i = 0; i < 5; i++) {
console.log(i)
}

这样for循环可打印出 0 - 4的结果

for(var i = 0; i < 5; i++) {
    setTimeout(function() {
console.log(i)
    }, i * 1000)
}

但这样只能间隔一秒打印出5个5

原因在于 setTimeout是异步，等for循环全部完成 i 后才会执行

解决方法可以将 for循环中的var 变成 let

let只作用于for循环内，这样每次付给setTimeout的值都是当前值

或者在setTimeout外再包一层function

for(var i = 0; i < 5; i++) {
    (function(i) {setTimeout(function() {
console.log(i)
    }, i * 1000)})(i)

}

将 i 作为参数传到setTimeout中运行 这样就可以得到每隔1秒加1的log结果了
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

本文重点介绍了色彩理论和色彩组合在设计中应用的基础知识:  例如学习更多关于色相环、RGB、CMYK色彩模型的相关知识。

很多人认为UI的色彩选择主要取决于设计师的品味和美感。然而，色彩选择的过程比表面看起来要复杂很多，在设计中起着重要的作用。在我们之前的一篇关于颜色心理学的文章中，我们发现颜色对我们的情绪和行为有很大的影响。这就是为什么产品的成功很大程度上取决于设计所选择的颜色。研究表明，人们只需90秒就能对一种产品做出下意识的判断，而其中62%至90%的判断仅基于颜色。因此，选择合适的颜色对于改进产品的转换率和提高产品的可用性是非常有用的。

为了创造好的设计，更有效地运用颜色，你需要了解颜色是如何形成的，以及它们之间是如何相互联系的。这就是为什么艺术学校、学院和大学的学生学习色彩理论，致力于研究色彩的本质。今天，我们提供给你记住(甚至学习)色彩理论的基础上的颜色组合，可以有效地应用于你的设计创作。

01.色相环/色轮

如果你上过有关绘画的课，你一定见过由不同颜色组成的圆圈。它被称为色相环/色轮，这有助于理解不同的颜色如何相互关联，以及如何将它们组合起来。色相环通常由主色、次色和三色组成。最主要的是这三种色素的颜色不能形成任何其他颜色的组合。把原色结合起来，就得到了第二种颜色，而原色和第二种颜色的混合就得到了第三种颜色，它们通常有两个词的名字，比如红紫。

色相环/色轮是由艾萨克·牛顿于1666年以示意图的方式创建的，从那时起，它经历了许多变换，但仍然是色彩组合的主要工具。主要的想法是，色相环/色轮必须这样做，以便颜色适当地产生混合。

02.颜色模型

在你开始混合颜色之前，你需要了解颜色有两种不同的性质:有形的颜色是物体表面的颜色，其他颜色是由光产生的，比如电视的光束。这些类型创建了两个颜色模型，通过它们可以形成色轮:加法和减法。

加色模型将红、蓝、绿作为原色，因此也称为RGB颜色系统。这个模型是屏幕上使用的所有颜色的基础。在这个系统中，原色以相同比例组合而成的第二种颜色是青色、品红和黄色，但是你需要记住，你添加的光越多，颜色就变得越亮越浅。对于习惯于油漆、染料、油墨和其他有形物体的减色法的人来说，通过混合加色得到的结果往往是违反直觉的。

减色法通过对光的减法得到颜色。它由两种颜色系统组成。第一种是RYB(红、黄、蓝)，也称为艺术系统，常用于艺术教育，尤其是绘画。RYB是现代科学色彩理论的基础，该理论认为青色、品红和黄色是三种颜色中最有效的组合。这就是CMY颜色模型的形成过程。它主要用于印刷，当制版印刷的关键部件为黑色油墨时，该系统被命名为CMYK(青色、品红、黄色和黑色)。如果没有这种额外的色素，最接近黑色的阴影将是浑浊的棕色。

03.色彩的加法与减法

您应该记住这两个系统之间的主要区别:加法用于数字屏幕，减法用于印刷媒体。如果你正在做的设计项目是要打印出来的，不要忘记一个简单但重要的规则:你在屏幕上看到的颜色在打印出来的时候看起来不一样。加色谱比CMYK更宽，这也是为什么建议设计师在打印前把他们的项目转换成减色法，这样他们就可以看到接近他们得到的结果。然而，如果您使用数字产品，RGB颜色系统是明智的选择，因为它允许创建惊人的东西与它的广谱彩色。

04.色彩协调

“协调”这个词通常与有序和令人愉快的事物联系在一起。色彩协调是指在设计中以最吸引人、最有效的方式对色彩进行排列，让用户感知。当色彩有条理的时候，观者会感到愉悦和平静，而不协调的设计则会给人混乱和厌恶的感觉。色彩的平衡在设计中是至关重要的，因为用户对网站或应用程序的第一印象，颜色有很大的影响。设计师区分了有效工作的基本配色方案。

05.单色

它是基于一种颜色与它的各种色调搭配。单色的呈现总是一个胜利的选择，因为它色彩属性单一，容易创造一些简洁的配色方案。

06.类似色/同类色

要创建类似的色彩，您需要使用颜色轮上相邻的颜色。这种类型的配色方案用于不需要对比的设计，包括网页或横幅的背景。

07.互补色

互补的方案是混合的颜色放在彼此前面的色轮上。这个方案与类似的单色相反，因为它的目的是产生高对比度。例如，蓝色背景上的橙色按钮在任何界面中都很难被忽略。

08.分割互补

这个方案与前一个方案类似，但它使用了更多的颜色。例如，如果你选择蓝色，你需要选择另外两种颜色，这两种颜色相邻，意思是黄色和红色。这里的对比度没有互补方案那么鲜明，但它允许使用更多的颜色。

09.三元/三色方案

当设计需要更多的颜色时，您可以尝试三元方案。它基于色轮上等距的三种不同颜色。为了在这个方案中保持平衡，建议使用一种颜色作为主色，另一种颜色作为辅色。

10.四色方案/双互补

四色方案是为经验丰富的设计师，因为它是最难平衡。它采用了四种颜色的色轮，这是互补对。如果你把所选颜色上的点连接起来，它们就形成了矩形。这个方案很难协调，但是如果你做的一切都正确，结果可能会令人惊叹。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

摘要
优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护

HTML 规范
缩进
统一两个空格缩进

命名规范
class 应以功能或内容命名，不以表现形式命名；
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；
DOCTYPE 声明
HTML 文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：

<!DOCTYPE html>


meta 标签
统一使用 “UTF-8” 编码
<meta charset="utf-8">


SEO 优化
<!-- 页面关键词 -->
<meta name ="keywords" content =""/>
<!-- 页面描述 -->
<meta name ="description" content ="">
<!-- 网页作者 -->
<meta name ="author" content ="">


优先使用 IE 版本和 Chrome
<meta http-equiv ="X-UA-Compatible" content ="IE = edge，chrome = 1">


为移动设备添加视口
<!-- device-width 是指这个设备最理想的 viewport 宽度 -->
<!-- initial-scale=1.0 是指初始化的时候缩放大小是1，也就是不缩放 -->
<!-- user-scalable=0 是指禁止用户进行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">


禁止自动识别页面中有可能是电话格式的数字
<meta name="format-detection" content="telephone=no">


团队约定：

pc 端：

<meta charset="utf-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路 

移动端：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">


标签
html 标签分为以下几类：

自闭合标签（self-closing），无需闭合。例如：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr 等 )
闭合标签（closing tag），需闭合 。例如：textarea、title、h、div、span 等
团队约定：

所有具有开始标签和结束标签的元素都必须要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上
自闭合标签不要加上结束标签
自定义标签的名字必须包含一个破折号（-），<x-tags>、<my-element>和<my-awesome-app>都是正确的名字，而<tabs>和<foo_bar>是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素，哪些是自定义元素
自定义标签必须写上开始标签和闭合标签
尽量减少标签数量
元素属性
元素属性值使用双引号语法
推荐：

<input type="text">


不推荐：

<input type=text>
<input type='text'>


代码嵌套
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
标题和段落中不能包含块，如：h1、h2、h3、h4、h5、h6、p、dt
块与内联不能并列，块级元素与块级元素并列、内嵌元素与内嵌元素并列
有些标签是固定的嵌套规则，比如 ul 包含 li、ol 包含 li、dl 包含 dt 和 dd 等等。
灵活使用伪类
不要让非内容信息污染了你的 HTML，打乱了 HTML 结构。可以使用:before、:after 等伪类元素

推荐：

HTML 代码

<!-- That is clean markup! -->
<span class="text-box">
  See the square next to me?
</span>


CSS 代码：

/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

1

不推荐：

HTML 代码：

<!-- We should not introduce an additional element just to solve a design problem  -->
<span class="text-box">
  <span class="square"></span>
  See the square next to me?
</span>


CSS 代码：

.text-box > .square {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路 

特殊符号必须使用转义符
符号 描述 转义符
空格 &nbsp;
< 小于 &lt;
> 大于 &gt;
& 和 &amp;
" 引号 &quot;
纯数字输入框
使用 type=“tel” 而不是 type=“number”

<input type="tel">


类型属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含。

推荐：

<link rel="stylesheet" href="" >
<script src=""></script>


不推荐：

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>


注释规范
单行注释

一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
推荐：

<!-- Comment Text -->
<div>...</div>


不推荐：

<div>...</div><!-- Comment Text -->

<div><!-- Comment Text -->
    ...
</div>


6
模块注释

注释内容前后各一个空格字符
<!-- S Comment Text -->表示模块开始
<!-- E Comment Text -->表示模块结束，模块与模块之间相隔一行
模块注释内部嵌套模块注释，<!-- /Comment Text -->
推荐：

<!-- S Comment Text A -->
<div class="mod_a">

    <div class="mod_b">
        ...
    </div>
    <!-- /mod_b -->

    <div class="mod_c">
    ...
    </div>
    <!-- /mod_c -->

</div>
<!-- E Comment Text A -->

<!-- S Comment Text D -->
<div class="mod_d">
    ...
</div>
<!-- E Comment Text D -->
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路 

22
语义化
没有 CSS 的 HTML 是一个语义系统而不是 UI 系统
通常情况下，每个标签都是有语义的
语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图
建议页面中多使用语义化标签，而不是整个页面以 div 构成
常见标签语义：
标签 语义
<p> 段落
<hn> 标题(h1~h6)
<ul> 无序列表
<ol> 有序列表
<nav> 标记导航，仅对文档中重要的链接群使用
<main> 页面主要内容，一个页面只能使用一次。如果是 web 应用，则包围其主要功能
<article> 定义外部的内容，其中的内容独立于文档的其余部分
<section> 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside> 定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表
<header> 页眉通常包括网站标志、主导航、全站链接以及搜索框
<footer> 页脚，只有当父级是 body 时，才是整个页面的页脚
<figure> 规定独立的流内容（图像、图表、照片、代码等等）（默认有 40px 左右 margin）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。

我们先从真实生活场景中的互动说起。

人与人之间的互动无处不在，它是我们生活中必要的组成部分，也是整个人类社会的基石。从本质上来讲，社交产品要解决的问题就是人们之间互动的问题。那么如何定义互动呢，我们可以从日常的生活场景中窥得一二。

首先，让我们来看一看日常生活中的互动案例：

这是一个很常见的熟人互动案例，我们可以看到，熟人间很容易产生话题，并持续互动下去。但是如果同样的话题发生在不是很熟悉的人之间，可能就会是另一番场景：

在例二中，因为A与B互相不熟悉，所以A没有对B的回复产生进一步互动，对话因此而结束。我们可以进一步推理，其实在这个案例中，不管原因变成什么，只要A没有响应B的反馈，那么A与B的互动就大概率会终止。

这是因为良好的互动行为一定是双方(或多方)的互相行为，一旦因为某些原因导致其中的反馈中断，互动将无法持续。由此可以总结出：

互动在本质上是由一系列的反馈(互动)组成的一条反馈链

但是光有反馈链还远远不够，在社交场景下，我们往往希望反馈链足够长，这样才能让互动双方产生感情升温。在例二中，其实是存在着一条很短的反馈链的，A与B只互动了一个回合。A没有继续响应B的反馈，是因为B的反馈质量较低。试想，当A向B问好时，若B的回复是“早上好，你今天穿的真精神！”，那么A会不会响应B的反馈呢？我想大概是会的。由此可见：

反馈链的长短取决于每次反馈(互动)的质量。

高质量的反馈具备很多特点，其中有三个尤为重要

1 反馈链中的指向性

我们日常生活中的互动行为，一般都会以一个“握手机制”作为开端。这个握手机制可以是显性的（直接喊出对方的称呼，可以是名字、外号，也可以是关系称谓），有时也可以是隐性的（眼光的对视、话题的流转等）。这个握手机制帮助互动双方建立了互动的场景，让双方达成"开始交流"的共识，以便信息的接收者做好倾听并回复的准备，这就是互动中的指向性。

任何互动行为都是发生在两个或者多个明确的对象之间的，因此在良好的互动行为中，指向性显得尤为重要——没有人会去响应别人的自言自语。在互动的过程中，指向性不明确的互动行为是低质量的，不容易获得进一步的反馈，例如评论区中的统一回复、群发的新年问候、领导在台上的讲话等。反之指向性明确的互动是高质量的，比较容易获得反馈，例如群聊中@某个人、收件人为某个人而非邮件组的邮件、多人聊天时眼光的对视等。

2 适度的互动行为

互动行为的适度包含两个方面：信息适度及行为适度。

一方面，由于互动行为本质上是信息的传递过程，因此每次反馈的信息质量会直接影响到反馈的整体质量。好的反馈应该传达适度的信息，让接收者可以对传递的信息进行轻松的接收及处理，降低接收者的反馈门槛。

另一方面，传递信息的行为也应该是适度的。在生活中，不同的场合下，我们会选择不同的行为来表达同样的意思，比如比较正式的场合会选择握手作为问好，而与家人久别后的见面则可能是一个热情的拥抱。

3 反馈的即时性

互动行为是依赖于一定语境的，当语境消失，互动也将停止。在社交产品的互动场景中，互动语境一般会随时间流逝而逐渐减弱直到消失，所以反馈的质量也随时间的流逝而逐渐衰减，若想让反馈链可以得到延续，要尽量保证在语境消失前产生反馈行为，因此即时性的反馈就显得十分重要。

有了以上的理论基础，接下来分析一下Qzone中的互动行为。

Qzone中的互动方式可以归为三类：评论、转发、点赞。其中，评论和转发都可以产生完整的反馈链。针对评论，用户还可以继续通过评论、点赞等方式进行反馈；针对转发内容，用户也可以进行进一步的评论、转发、点赞。而对于点赞行为，反馈链到此戛然而止，用户无法对点赞行为进行直接的反馈。

因此，为了让用户的点赞可以形成完整的反馈链，我们的设计目标就呼之欲出——为Qzone中的点赞行为寻找一个具有指向性的、适度的、具有即时性的反馈行为。互动场景的选择

既然要设计的是一个具有指向性的互动行为，我们就必须在可以接收到赞的场景里去做这件事。所以我们首先遍历了主人态下，所有可以看到别人给自己点赞的场景。

但是以上的场景中，并不是都适合承载点赞的反馈行为。根据用户的行为目的，我们可以把以上场景分为两类：围绕点赞行为的关键行为路径（图c.消息列表、图d.点赞列表）、不以点赞为核心目标的其他场景（图a.好友动态、图b.个人主页）。显然，我们应该把围绕点赞行为的关键行为路径作为主要互动场景。并且所有对于点赞的反馈都是直接依附于点赞行为本身的，使反馈行为具有明确的指向性。

前文提到，适度的互动包含“信息适度”和“行为适度”两个方面，落地到产品里，就是定义互动行为的“语义”和“交互行为”。

关于点赞反馈行为的语义表达，我们列举了很多来自现实社交场景中的备选方案，然后以动作的情感程度和成熟程度划分了4个象限，对这系列动作进行归类。

由于点赞行为本身所传达的情感是比较轻量化的，我们更倾向于选择一个轻量化的情感表达方式作为点赞的反馈；同时由于Qzone的用户群体以年轻用户为主，我们还需要选择一个尽量贴合年轻用户感官的语义。因此我们在象限图中初步选中位于左下角的“击掌”和“剪刀手”两个概念。考虑到“击掌”比“剪刀手”具有更为明显的指向性，所以确定“击掌”为最终的落地方案。

同时，因为点赞行为本身是一个及其轻量化的行为，所以我们也用最轻量的交互操作作为它的反馈，只需要一次点击即可。

用户每次收到针对点赞的反馈，都会收到一条与点赞相同的消息提醒，通过push、首页新消息提醒、红点等让用户第一时间知晓。在消息箱列表中，每一条点赞和回赞都成为单独的一条消息，可以让用户最直观的查看并进行反馈。

综上所述，我们确定了整个反馈链的交互框架：

击掌的视觉设计是一个发现问题到解决问不断循环的过程。在这个过程中，推动解决方案逐步升级的核心方法是情感化设计。

击掌动作本身就带有丰富的情绪，而情感化的设计方法可以让情绪的释放更大化，所以在视觉设计阶段，我们以情感化设计作为方法去推进方案逐步完善，最终建立起用户与产品、用户与用户间的情感连接，加深用户对功能的认可和共鸣，带来更加有趣的体验。

情感化设计具象到击掌这个功能，需要解决两个问题：

1.如何唤起用户在现实场景中的击掌记忆；

2.如何符合空间用户群体的基本调性。

设计之初，我们用平面icon的形式来表现击掌，虽然可以满足基本的功能诉求，但是在视觉体验上乏善可陈，我们又尝试更丰富的各种视觉表现以此引起用户对击掌这个动作的共鸣。

在设计推敲的过程中共经历了三个阶段，在不断发现问题和解决问题的循环中寻找更优的设计方案：

Step 1 | 静态展示到动势塑造

我们用两个手掌叠加的样式构造了击掌icon的基本造型。为了增强用户对于“击掌”的语义感知使用了漫画中常用的动态线条，让用户从视觉上直观感受到这是一个动态的互动行为，而非简单的单方面点亮icon，以此加强用户对击掌这个互动行为的认知。

Step 2 | 2D动画演绎

但是这样的动势表达仍然具有局限性，动态线条的表达方式并不具备普适性，无法保证用户可以理解其中的含义。因此我们在第二个阶段的设计迭代中使用更加直观的动画来帮助用户理解，使其与现实生活中的动作产生呼应。

Step 3 | 3D表现

在解决了语义表达的问题后，我们遇到了一个新的挑战，由于整个动画的展示视范围较小，在视觉表现力上并不理想。因此在第三个设计阶段中，我们通过放大动画、尝试3D表现形式的方法解决上述问题。同时，3D的表现手法还可以通过光影和质感来传达更多信息，更加直观易懂，具有极强的代入感。

空间的主流用户以年轻人居多，为了匹配用户群体的基本调性需要打造一个“年轻”、“有趣”的3D击掌动画。为此，我们以“3D”、“young”、“fun”作为关键词收集参考素材，以此建立情绪版。

1 趣味和轻量的质感

如前文所述，对于击掌反馈行为是一个轻量化的互动，为避免3D表现手法过于写实而带来不必要的厚重感，同时也为了增加动画的趣味性，我们选择卡通的手掌造型进行建模；在材质的选择上我们偏向黏土材质，弱化高光，让视觉上体验更加轻量。

2 弹性曲线让动画更生动

现实生活中的击掌动作是一个减速运动，但是为突出击掌的动势和加强趣味性，我们采用了非写实的弹性曲线来打造这个动画，以此加强动画的趣味性。

3 礼花烘托氛围

在后续的产品迭代优化过程中，我们引入了无限击掌的玩法，用户之间可以无限回赞。这就导致动画被重复播放，会加速用户对动画的审美疲劳。所以为配合产品玩法的升级对动画的设计也进行了迭代，基于击掌次数设计了不同的展示彩蛋——在击掌达到特定次数后，会有彩带礼花蹦出，在烘托多次击掌的热情氛围的同时，给用户带来更多趣味和惊喜。

在击掌功能的设计过程中，我们不断在发现问题、解决问题的循环中不断寻求更优解，逐步把一个不到100像素范围内的击掌icon做到更好，以此来唤起用户的对现实击掌的记忆，建立起与用户情感上的连接。

另外，通过趣味性的视觉表现手法不断推敲动画设计，让Qzone的年轻用户不仅从心理上建立连接，在表现层也能感知到符合自身标签的趣味调性。

除上文提到的彩带礼花以外，在击掌玩法升级过程中，我们也拓展了更多内容：

随着用户间反复击掌次数变多，粒子效果会不断升级，并加入富有层次的入场效果；而且达到关键击掌次数的时候，会展示击掌的次数，通过用户的成就感来刺激其产生更多的击掌行为。

为了丰富手掌样式的选择，给用户提供更多样的体验，我们和增值团队一起设计了更多的手掌形式，同时引入一些IP形象，让击掌更能唤起用户的共鸣，也更加有趣。

击掌这个功能从前期探索到上线和二次迭代经历了很长一段时间，整个项目对设计师来说也是一次收获满满的过程。

创新也可以是从1到N的过程

创新并不都是从0到1从无到有的创新，尤其对于功能和框架体系成熟的产品，盲目的追求创新去改变用户的认知和习惯是不妥的，从小的问题点着手去深挖和思考，找到合适的解决方案并打磨细节给用户创造惊喜，以小博大去做创新也能达到四两拨千斤的效果。

打磨细节创造惊喜

探索和挖掘到一个不错的想法之后，打磨细节也是同样重要的，我们出了各种不同的击掌效果方案，去找到给用户惊喜和操作轻量的平衡，这个功能上线以后我们也一直在关注用户的反馈，从用户反馈中发现还可以做惊喜升级，从一个点出发，把这个点不断的扩充做的更细致和更加闭环。

从生活中来，到生活中去

击掌这个功能之所以有这个好的数据和用户认可度，有一个很重要的原因是因为本身这个行为和现实生活中的场景是相对应的，所以让用户能很快的理解和操作，符合用户真实场景的认知所以学习成本比较低，我们在做设计的时候用生活场景挖掘产品，能达到事倍功半的效果。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

前言
之前有个同学询问我是否能够爬取知乎的全部回答，当初只会Scrapy无法实现下拉的数据全部加载。后来在意外中接触了selenium的自动化测试，看出了selenium的模拟能力的强大，而昨天有个同学问我能否爬取中国工商银行远程银行的精彩回答，我说可以试试。

思路
selenium模拟下拉直至底部
然后通过selenium获取数据集合
通过pandas写入excel
selenium模拟下拉直至底部
此处全靠一位大佬的博客点拨，实在不好意思的是，selenium就看了下常用的api，实在不懂如何判断是否加载完毕，而该博客代码的原理也好理解，通过不断下拉判断与上一次高度进行对比，知道前端页面的滚动高度属性就懂了，当然思想最重要。
见代码:

#将滚动条移动到页面的底部
all_window_height =  []  # 创建一个列表，用于记录每一次拖动滚动条后页面的最大高度
all_window_height.append(self.driver.execute_script("return document.body.scrollHeight;")) #当前页面的最大高度加入列表
while True:
self.driver.execute_script("scroll(0,100000)") # 执行拖动滚动条操作
time.sleep(3)
check_height = self.driver.execute_script("return document.body.scrollHeight;")
if check_height == all_window_height[-1]:  #判断拖动滚动条后的最大高度与上一次的最大高度的大小，相等表明到了最底部
print("我已下拉完毕")
break
else:
all_window_height.append(check_height) #如果不想等，将当前页面最大高度加入列表。
print("我正在下拉")

然后通过selenium获取数据集合
通过find_elements_by_css_selector方法获取元素对象列表，然后通过遍历列表获取单个对象，通过对象的text属性获取数据。
代码与"通过pandas写入excel"代码想结合。

通过pandas写入excel
example.xlsx

批量将数据依次写入excel，此处个人知道有两种写法，推荐后者。
写法一:

problem = cls.driver.find_elements_by_css_selector("li h2.item-title a")
data = pd.read_excel('example.xlsx', sheet_name = 'Sheet1')
problemtext = []
for i in problem:
problemtext .append(i.text)
replytext = []
reply = cls.driver.find_elements_by_css_selector("div.item-right p")
for j in reply:
    replytext.append(j.text)
    data.loc[row,'答案'] = j.text
data['问题'] = problemtext
data['答案'] = replytext

DataFrame(data).to_excel('test.xlsx', sheet_name='Sheet1')

写法二:

problem = cls.driver.find_elements_by_css_selector("li h2.item-title a")
data = pd.read_excel('example.xlsx', sheet_name = 'Sheet1')
row = 1
for i in problem:
    data.loc[row,'问题'] = i.text
    row += 1
row = 1
reply = cls.driver.find_elements_by_css_selector("div.item-right p")
for j in reply:
    data.loc[row,'答案'] = j.text
    row += 1

DataFrame(data).to_excel('test.xlsx', sheet_name='Sheet1')

完整代码
import pandas as pd
from pandas import DataFrame
import unittest
import time
from selenium import webdriver
from selenium.webdriver.support.ui import Select
from selenium.webdriver.support.select import Select
from selenium.webdriver.support.ui import WebDriverWait

class autoLogin(unittest.TestCase):

URL = 'http://zhidao.baidu.com/business/profile?id=87701'


@classmethod
def setUpClass(cls):
cls.driver = webdriver.Firefox()
cls.driver.implicitly_wait(20)
cls.driver.maximize_window()



def test_search_by_selenium(self):
self.driver.get(self.URL)
self.driver.title
time.sleep(1)
#将滚动条移动到页面的底部
all_window_height =  []
all_window_height.append(self.driver.execute_script("return document.body.scrollHeight;"))
while True:
self.driver.execute_script("scroll(0,100000)") 
time.sleep(3)
check_height = self.driver.execute_script("return document.body.scrollHeight;")
if check_height == all_window_height[-1]:  
print("我已下拉完毕")
break
else:
all_window_height.append(check_height) 
print("我正在下拉")

@classmethod
def tearDownClass(cls):
html=cls.driver.page_source
problem = cls.driver.find_elements_by_css_selector("li h2.item-title a")
data = pd.read_excel('example.xlsx', sheet_name = 'Sheet1')
row = 1
for i in problem:
    data.loc[row,'问题'] = i.text
    row += 1
row = 1
reply = cls.driver.find_elements_by_css_selector("div.item-right p")
for j in reply:
    data.loc[row,'答案'] = j.text
    row += 1
    
DataFrame(data).to_excel('test.xlsx', sheet_name='Sheet1')

#保存成网页
with open("index.html", "wb") as f:
f.write(html.encode())
f.close()
cls.driver.quit()

if __name__ == '__main__':
unittest.main(verbosity=2)

text.xlsx


总结
在使用Scrapy爬虫时，可以通过selenium来执行网页中的一些js脚本，但是如何将二者结合起来，以及各种框架之间的灵活运用，都将是我需要面对的。
--------------------- 
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

同时，我从日常的产品体验中，整理了一些思考内容，以下是对 2020 年交互设计趋势的展望。

模态展示

在 iOS 13 中，模态面板采用了新的卡片样式，它占据了屏幕 90% 的面积。模态面板拉起时，原有的页面会有一个纵深效果，以灰色状态显示，防止用户和它们发生交互。模态面板可以通过滑动操作下拉关闭，适用于单手操作，专为大屏服务。

在系统邮件、日历、通讯录、Apple Music、信息 Animoji 等自带应用中，模态面板得到了广泛应用。

△ Apple Music & 邮件

专注下半部分

夸克浏览器是专注下半部分做得最好的一个，夸克并没有像 Safari、Chrome 那样把搜索框放在顶部，而是将整合后的搜索栏放在了用户更容易操作的屏幕下半部分。

分层内容

分层内容是基于动作菜单，弹出分层内容。分层内容的展现形式可以减少页面跳转，让用户保持在最原始的环境中。并且主要操作交互位于界面下半部分，触手可及。

△ Snapchat & Keep

1. 悬停分层

在网易云音乐、即刻、飞聊等应用中，采用了悬停分层。顶部展示的是介绍性内容，随着页面下滑，介绍内容隐藏，同时功能栏将置顶悬停，展示的内容区域大大增加。

△ 网易云音乐 & 即刻

△ Broadcasting iOS App UI Exploration

连续性页面

连续性页面的转换效果可以很好记住产品路线，加强了页面的层级关系。同时，流畅的动画转换效果，带来了更连贯的用户体验。

App Store 和 Behance，以及最近发布的豆瓣 FM 6.0，都采用了这种方式。

△ App Store & Behance

全屏展示

很多App在引导评分样式上，都采用的是系统弹窗。在 Keep App 上，设计了一个全屏展示的评分提示。形式新颖，加上背景图的气氛，让人想去评分的意愿大大增加。

同样，Airbnb 的系统通知提示也是采用的全屏展示，这是一个趋势，值得我们去关注。

△ Airbnb 爱彼迎 & Keep

快捷验证

1. 苹果账号登录

近两年几乎所有的 App 都会推荐首先使用手机号+短信验证码的方式注册/登录，同时也会接入像微信、QQ、支付宝这样的三方登录。

在 WWDC 2019 上，苹果也给我们带来了 「使用苹果账号登录」，几乎所有的苹果设备都会登录 Apple ID。因此，我们可以在不久的将来，通过苹果账号，就可以直接登录所有的 App，是不是很方便？

2. 号码识别

网易易盾的号码识别，可以自动获取当前开启流量的 SIM 卡号码，一键点击即可完成注册、登录操作。减少手机号输入、短信验证码等待时间等传统步骤，提升关键环节转化率。

△ 网易易盾

语音交互

近年来，智能语音技术在很多场景得到了应用，微软的 Cortana，苹果的 Siri、谷歌的 Assistant。在引入深度学习后，语音助手可以在训练中越来越强，吐词更连贯。夸克的语音助手有本地天气、本周本月可视化数据、新闻热点、节日问候、冷知识等功能。

在5月的开发者大会上，谷歌展示了其人工智能与语音识别的 Live Relay 技术。其能够为不便应答电话的用户，提供基于实时语音/文字互转的通话支持。对于聋哑人来说，这绝对是一项实用的功能。

△ Google I/O 2019 Live Relay

事实上，Live Relay 也能帮助到一般人，例如当我们需要接听重要电话，但却无法离开当下所进行事项，Live Relay 在此时就能派上用场，透过输入文字的方式，接听重要来电。

最方便的是，Live Relay 还可整合即时的翻译功能，这在与外国人士沟通时起了很大的帮助作用，可说是另外一种「无障碍功能」。

AR增强现实

1. WANNA KICKS 通过AR技术「试鞋」

通过 AR 增强现实技术与智能手机相机的结合，帮助你看到 YEEZY BOOST 350 等运动鞋「穿」在自己脚上的效果，它甚至还能模拟出鞋子在光线不同环境下的各种效果。

2. 小程序AR+口红试色

昨天，首个支持AR动态试妆的小程序「阿玛尼美妆」同步更新上线。基于小程序基础能力和谷歌 TensorFlow 机器学习开源平台支持，欧莱雅集团开发了 AR 动态试妆能力。相比以前上传照片的试色方式，AR 动态试妆让试色更真实。

AR 使用在网页设计或应用程序领域，它能够自然地将虚拟与现实结合，带来身临其境的新体验。

多窗口预览

△ App Store & QQ

在 QQ 的版本中，列表页面长按消息，会弹出多窗口模式，消息可以来回切换，类似于 iOS 后台切换模式。在会话窗口长按任意地方，也会呼出多窗口模式。

总结

科技发展给设计产生的影响是巨大的，让我更深刻地认识到作为设计师的责任。这些设计趋势有意或无意地将帮助用户得到更好的产品体验。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

先贴图，需要实现的效果是这样的。



实现思路有两个：

 

1、用6个input，输入一个数字后将focus给下一个输入框。

2、用一个input和6个span，input隐藏，用span显示。

 

现在大部分都是使用的第二种方法。（当然，如果你能说服产品也可以只用一个普通的input输入框，就什么都不用考虑了）

 

两种方案遇到的坑，以及优缺点，如下：

 

方案一：6个input。

 

主要就是用js切换focus，在安卓是相当流畅的，但是在ios会严重卡顿，简直逼死强迫症。

 

HTML：

<div class="divYZM">
    <!-- onpropertychange是为了避免在ios中oninput方法不被触发 -->
    <input id="check_1" class="numDiv" type="number" oninput="inputNext(check_1)" onpropertychange="inputNext(check_1)"/>
    <input id="check_2" class="numDiv" type="number" oninput="inputNext(check_2)" onpropertychange="inputNext(check_2)"/>
    <input id="check_3" class="numDiv" type="number" oninput="inputNext(check_3)" onpropertychange="inputNext(check_3)"/>
    <input id="check_4" class="numDiv" type="number" oninput="inputNext(check_4)" onpropertychange="inputNext(check_4)"/>
    <input id="check_5" class="numDiv" type="number" oninput="inputNext(check_5)" onpropertychange="inputNext(check_5)"/>
    <input id="check_6" class="numDiv" type="number" oninput="inputNext(check_6)" onpropertychange="inputNext(check_6)"/>
</div>
JS：

function inputNext (id){ // 传过来的id是个对象
    var index = Number(id.id.split("_")[1])
    if (id.value.length < 1) { // 删除
        id.value = ''
        if (index > 1) {
            var preId = 'check_' + Number(Number(index) - 1)
            document.getElementById(preId).focus()
            return false
        }
    } else {
        if(id.value.length>1) {
            var nextValue = id.value.slice(1, 2)
            var nextId = 'check_' + Number(Number(index) + 1)
            id.value = id.value.slice(0, 1)
            if ((index+1) <= 6) {
                document.getElementById(nextId).value = nextValue
                document.getElementById(nextId).focus()
            }
        }
    }
}
PS：我这里写的删除方法是有问题的，这也是我果断放弃这种方案的原因之一。

 

如果正常输入，然后删除是可以的。

 

但是输入几个数后，先点击中间的框删除一个数字，再回到最后，便只能将中间到最后的这几个删掉，最前面的还需要手动点一下得到focus才能删除。

 

这对用户来说，简直太不友好了。。。

 

CSS：

.divYZM{
    width: 90%;
    margin: 0 auto;
    height: 100px;
    background-color: rgba(74, 35, 35, 0.42);
}
.numDiv{
    display: block;
    width: 10%;
    float: left;
    border-radius: 5px;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    font-weight: 900;
    color: red;
    background-color: white;
    height: 60px;
    border: 0;
    padding: 0;
    margin: 0;
    margin-left: 5.7%;
    top: 20px;
    position: relative;
    caret-color: transparent;
}
这里遇到的坑，举例一个。

 

input限制长度的属性maxlength

 

a、与如下两种配合使用（tel也可以限制）

<input type="text">  或者
<input type="password">
 

b、当type为number时不起作用。这时需要用js控制。

<input type="number" oninput="if(value.length>5) value=value.slice(0,5)" />
注意：此外，tel类型的input在ios上会调出全数字键盘，而number类型的input则会调出带有标点符号的键盘。

 

 

方案二：1个input和6个span。

 

隐藏input，用span显示内容。大坑就是，何种情况下能调起ios的软键盘呢？

 

先贴一下我刚开始的input样式。

width: 0;
height ：0；
border: 0;
padding: 0;
margin: 0;

第二种
display:none;
 

简单粗暴，结果就是，ios木得反应。为啥呢，我想不通。

 

后来在晚上睡觉的时候我在想，我这两种方式input都么有占位啊，那是不是占位了就可以了呢？

 

经测果然是可以的（默默谴责自己懒了一下，没有将不隐藏input的情况，在手机上进行测试）。

 

接下来贴正确代码。

 

CSS：

#yzm{
    width: 0;
    border: 0;
    padding: 0;
    margin: 0;
    height: .44rem;
    position: absolute;
    outline: none;
    color: transparent;
    text-shadow: 0 0 0 transparent;
    width: 300%;
    margin-left: -100%;
}
#yzmTable {
    width: 90%;
    margin: 0 auto;
    height: 100px;
    /* border: 1px solid red; */
    background-color: rgba(74, 35, 35, 0.42);
    /* opacity: 0.1; */
}
#yzmTable span { 
    display: block;
    width: 10%;
    float: left;
    border-radius: 5px;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    font-weight: 900;
    color: red;
    background-color: white;
    height: 60px;
    margin-left: 5.7%;
    top: 20px;
    position: relative;
}
这里对input的样式也包括对光标的隐藏，我在第一种方案中对光标未进行处理，因为在看到ios的卡卡卡之后果断放弃了第一种方案。

 

HTML:

<input id="yzm" type="tel" maxlength="6" value="" oninput="yzmInsert()">
<div id="yzmTable">
    <span id="s_1" onclick="intoYzm(1)">&nbsp;&nbsp;</span>
    <span id="s_2" onclick="intoYzm(2)">&nbsp;&nbsp;</span>
    <span id="s_3" onclick="intoYzm(3)">&nbsp;&nbsp;</span>
    <span id="s_4" onclick="intoYzm(4)">&nbsp;&nbsp;</span>
    <span id="s_5" onclick="intoYzm(5)">&nbsp;&nbsp;</span>
    <span id="s_6" onclick="intoYzm(6)">&nbsp;&nbsp;</span>
</div>
JS:

function intoYzm(index) {
    var ele = document.getElementById("yzm")
    ele.focus()
}
 
function yzmInsert() { // input内容改变时触发
    for (var i = 1; i <= 6; i++) {
        var nextId = 's_' + i
        document.getElementById(nextId).innerHTML = '&nbsp;&nbsp;'
    }
    var yzm = document.getElementById("yzm").value
    var yzmArr = yzm.split('');
    for (var i = 0; i < yzmArr.length; i++) {
        const num = yzmArr[i];
        var id = 's_' + Number(i + 1)
        document.getElementById(id).innerHTML = '&nbsp;' + num + '&nbsp;'
    }
}
 
// 收起软键盘的方法，点击除了输入框之外的其他区域就收起软键盘
$('body').on('touchend', function(el) {
    if(el.target.tagName != 'SPAN') {
            $('yzm').blur()    
      }
})
 

在第二种方案中有两个地方注意下：

 

a、在js方法中加了对全局中6个span标签（即六个输入框）之外区域点击事件的监听，用以收起软键盘，方法如下。

$('body').on('touchend', function(el) {
    if(el.target.tagName != 'SPAN') {
        $('yzm').blur()
    }
})
 （比较粗糙，如果页面中还有别的部分就比较受影响了，可以自行改进）

b、在隐藏的input中添加了onclick方法，如下并且在其中用了blur方法使得此输入框失去焦点。为什么这么做呢？

<input id="yzm" type="tel" maxlength="6" value="" oninput="yzmInsert()" onclick="this.blur();">
因为此处的隐藏并非真正的隐藏，而是透明化处理，边框包括光标全部透明化，但实际上它还是占位的，所以当你点击输入框上方空白处时，仍会唤起软键盘，就和我们之前所想的点击输入框之外区域就收起软键盘冲突了。

 

因此将input自身的点击获取focus禁止掉，就OK了。

 

之前都是自己乱七八槽的瞎记，第一次写给别人看，经验不足，时间仓促。不足之处，还望指正。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

B端产品设计的6大挑战