各公司开发成功产品的方式已经在根本上发生了变化。智能手机、社交网络或云计算等新技术使苹果、谷歌或亚马孙等科技巨头在大约20年内成为最有价值的公司。

这是我的第一篇系列文章“精益创新——如何在今天开发成功的产品”。这是多年来创新的转变和产品开发的方法论。

所有这些变化的发生是由于人们消费产品的方式发生了转变而造成。为了迎合用户行为和对产品期待的变化，科技公司必须将产品方向转变为更灵活、更敏捷、特别是以用户为中心上，即从瀑布流到敏捷设计再到精益设计。

虽然现在仍然有95%的大型组织在用瀑布模型开发新产品，但行业领头公司已经在率先使用精益设计作为方法了。

瀑布模型（20世纪70年代）Waterfall 

瀑布模型是序列顺序的处理方法，进程就像瀑布一样稳定地推向目标。它要求项目产出全面的计划并提前开发。

瀑布过程

由于前期设计和分析花费了大量的时间和精力，设计变更会使成本变得更高，尤其是设计后阶段。每个设计节点都有清晰的目标，达成后将进入下一个阶段。这样防止了客户在最后发布前评论和反馈。即使征求了建议，项目在接受反馈方面也不那么灵活。虽然瀑布模型是一种不那么灵活的方法，但它对需要执行“计划”的团队（在预算范围内）更有益。

敏捷开发（20世纪90年代）Agile 

随着互联网的兴起，瀑布模型漫长的开发周期已经不再能够提前规划人们的需求。同时，随着电子商务的全球化和新经济模式的到来引发了更多的竞争。公司在开发产品的周期中不得不对市场趋势作出反应，因此，需要一个灵活的产品开发步骤。

“敏捷”指的是由17个软件工程师发布于2001年2月的一份宣言，他们必须就轻量开发方法进行讨论。它基于迭代的方法，而不是像瀑布模型一样在项目之初就进行深入的规划。开发团队为了保证首先完成最重要的任务，他们会不断调整项目的工作范围。

每次迭代的目的是为了实现一个可交付的产品。随着来自终端用户的持续反馈得到鼓励，敏捷开发能对不断变化的需求作出反应，因为随着时间推移它们都是被需要的。因此，在管理和减少需求变化的风险方面，这些方法对项目来说是正确的选择。

设计思维（21世纪初）Design Thinking 

我们都知道以人为中心的设计，设计思维作为一个概念已经存在一段时间了，只是名称不同（以用户为中心的设计、服务设计）。设计思维因得益于它解决问题的技巧和科学的方法而成为时尚。设计思维过程和方法的普及与2001年的IDEO有关。

“设计思维是一种以人为本的创新方法，它从设计师工具箱里汲取了灵感，将用户的需求、技术的可能性和商业成功的要求结合起来。”

汤姆布朗，IDEO创始人。

“设计师工具箱”是一个与设计师的方法和过程有关的应用——包括思考创造力、灵活的创意以及对用户行为和需求的清晰理解。设计思维是一个由4个基础阶段组成的结构化流程。

从目标群体的发现阶段开始，所确定的需求和问题将被合成一些主要的见解。这些见解是概念阶段的基础，这个阶段的目标是产出许多想法，而最有希望的想法将被作为原型进行开发。原型测试是最后一个阶段，这个阶段需要确保解决方案满足目标群体的需求。

设计思维之所以产生，是因为大公司缺乏创新能力，无法开发出能满足客户需求和客户问题的创新产品。如今，大多数的公司都使用分析思维来作为运营方式。这种分析思维阻碍了创造性（打破常规）思维的发展，而这种创造性思维是破坏性创新所必需的。

这种创造性，特别是大胆的思考（有些称为“疯狂思考”）与设计概念有关。为了创新，企业必须具备设计能力。为了设计，一个组织需要内部融合设计，以孕育出一种培养创造思维的文化。

设计思维的显著差异在于将用户置于每项活动的中心。此外，以人为本的设计强调体验胜于效率，因为良好的体验是用户与产品互动的动力。

精益创新（创业公司——21世纪初）Lean Innovation

2011年，随着Eric Ries《精益创业》这本书的出版，创新和产品开发实践已经向精益方向发展。精益创业的目标是避免开发那些没人需要的产品或服务。精益过程包含用户反馈和产品早期实验。

精益创新以“失败来了成功还会远吗？”的哲学而闻名。开发者接受这种失败，因为他们获得突破性成功前是要需要不断学习的。

精益方法也常被称为“客户开发”。它的目标是在搭建最终产品前，找出用户想要什么。精益的原则是建立你正在试着测试的假设和设想，而你通过在这些实验的学习，将会取得进步。

科技推动全球竞争

数字化和巨大的变革速度不再允许公司在不考虑客户需求的情况下简单地生产产品。在过去，向客户提供错误的产品只会导致项目失败。而今天，持续不能交付客户所需的产品，将导致整个商业模式的失败。诺基亚或柯达只是这里提到的两个最著名的失败案例。

智能手机、云计算和开源等技术使得产品的开发速度更快、成本更低。开发产品或进入市场的的门槛比以往任何时候都要低。这意味今天有更多的全球竞争。公司需要专注于了解用户和他们想要什么。客户可以很容易地转向其它产品。品牌忠诚度对消费者决策的影响逐年下降。

专注于商业模式，而不仅仅是产品（Focus on business models, not only on products）

精益和设计思维都是以客户为中心、基于迭代的方法。客户参与和反馈是取得进展的动力。精益创新的关键不同之处在于，它在围绕产品考虑整个商业模式时更进一步。

亚马逊成为电子商务的领导者的原因之一是他们对客户服务的坚定承诺。虽然他们没有靠这个挣过一分钱，但是却帮亚马逊获得了客户的信任和忠诚。如今，成功的公司区别于他们的商业模式，而不是他们的产品供应。

确保用户持续参与（Engage customers continuously）

在新世界中，成功的公司将有一个共同点：对用户行为和需求的超常理解。随着行为和需求的快速变化，确保建立客户需求的唯一途径就是让用户持续的参与到项目中来。准确的用户理解是长期商业模式成功的基石。

结合设计思维、精益设计和敏捷开发

虽然设计思维，精益设计和敏捷开发可以单独使用，但是最好的结果来自这些方法的结合。设计思维有助于深入了解客户的需求和行为，而敏捷开发则有助于地开发和交付解决方案，精益方法的实践帮助我们在用户参与的假设测试中可以获得更直接的验证和学习。

当持续使用“开发–测试–学习”这个模式循环，就可以逐步接近一个成功的产品和有率的商业模式。

UI设计的基本规范，包括网页设计和APP设计的规范罗列

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

  万聚制作 2018-05-15 13:30:00

袋鼠云：可视化大屏打造智能数据方案全闭环

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

编者按：距热情似火的618国民年中购物节已经不到两个月时间，去年京东商城最终以累计下单金额高达1199亿元（行业口径）的战绩收官。而记者了解到每年借着“京东618”“双11”这两股全民消费热潮的新零售品牌远远不止淘宝与京东两家，已成为了整个产业链方方面面品牌的推广盛宴。

因此，每年的618购物节参与的企业数量可谓“芸芸之众”，这场一年比一年盛大的狂欢节也对支撑其后的运算资源、网络平台、存储与挖掘大数据提出了更高更严苛的要求。针对各家的技术资源体系、技术运维团队、大数据智能技术水平也成为了企业高管的“第一关注”。

而记者采访了多家新零售企业的CIO,提及如何更好地应对即将到来的今年“618”，他们大多表示：“增加服务器及运算资源、优化技术架构提高冗余、完成即时大数据挖掘分析是今年的三大要务。”的确，在保证全民购物节完美的用户操作体验之外，对自身企业在这场没有硝烟的商战中获得的宝贵数据充分分析并加以利用也成为了CIO们所考量的重点，让精准营销落地同时指导未来的市场规划。

如何更好的挖掘大型项目节点中企业获得的巨量数据？如何将挖掘数据中的信息得以简明有效的呈现，最终迅速指导市场策略？记者在618前夕走访了国内新锐的数据智能解决方案企业——袋鼠云。

袋鼠云这家在去年完成6000万人民币A轮融资的数据智能新锐公司，在今年动作频频，完善提升自身数据智能产品线研发的同时，也在今年大量引入高端人才，全面完善数据智能整体品牌价值。

记者在采访中了解到，袋鼠云致力于打造从企业数据资源规划与获取、数据质量分析与提升、数据整体建模与数据资产管理、数字化标签引擎建立、数字指标体系梳理与计算、数据应用规划与实现、数据可视化大屏呈现等全闭环的企业智能数据解决方案。最终以数据为最可靠的技术基础，通过袋鼠云的数据内容策划团队的有效建模，配以令人印象深刻的专业视觉设计，通过可视化大屏将简明有效且具冲击力的数据内容呈现在领导或者客户面前。

袋鼠云这家在去年完成6000万人民币A轮融资的数据智能新锐公司，在今年动作频频，完善提升自身数据智能产品线研发的同时，也在今年大量引入高端人才，全面完善数据智能整体品牌价值。

记者在采访中了解到，袋鼠云致力于打造从企业数据资源规划与获取、数据质量分析与提升、数据整体建模与数据资产管理、数字化标签引擎建立、数字指标体系梳理与计算、数据应用规划与实现、数据可视化大屏呈现等全闭环的企业智能数据解决方案。最终以数据为最可靠的技术基础，通过袋鼠云的数据内容策划团队的有效建模，配以令人印象深刻的专业视觉设计，通过可视化大屏将简明有效且具冲击力的数据内容呈现在领导或者客户面前。

袋鼠云CEO在采访中向记者介绍了典型客户“中国茅台”可视化大屏项目实施情况，他告诉记者：“世界第一白酒品牌“中国茅台”之所以选择袋鼠云建设数据可视化大屏项目，主要是基于要解决全面打造企业数据中台以及将中国茅台品牌能力直观生动地呈现给领导与参观客户。”

“基于此，袋鼠云为他们从数据管理与应用方式方法上改变思路， 有些甚至是全新的角度与理念，目的也是为了让‘中国茅台’的企业数据价值更好的被利用。”他告诉记者：“因为茅台品牌社会面很广，袋鼠云后期基于数据，提供的诸如舆情分析系统、反黄牛数据系统等富有社会成效的定制功能，获得客户的高度认可。”

数据智能（DI）不仅仅是把数据放在一起，而是要聚集产生化学反应。“中国茅台”这个客户应用就很典型，他继续向记者介绍:“我们给客户的数据分析与决策都是动态的，实时监控大屏即时展现茅台酒的交易总额是多少？哪个地区的茅台酒目前是销量最高的？哪些客户最热衷于他们的产品？这些动态的数据分析结果都能实时呈现在展会现场的可视化大屏幕上。另外茅台做的可视化大屏，也直观地体现了茅台用户群体的年轻化趋势，这和我们之前想象中茅台的消费者较高年龄层的情况不一样。这次可视化大屏解决方案帮助茅台更清晰地了解了自己的终端用户，要知道以前客户数据分散在经销商、渠道商那里，到底谁喝了茅台酒，茅台集团是无法获知的。”

而实时采集数据，实时处理分析数据也是袋鼠云口中的“一大门槛”。记者了解到，类似袋鼠云这样的从数据采集--数据存储--数据应用--数据呈现整体打造闭环的数据智能解决方案服务商在行业里具有很大优势。在中国茅台的典型方案中这一点就展露无遗。他向记者介绍：“中国茅台选择过去传统服务商时，手机端与电脑端的开发商是不同的，因此移动端和PC端后台数据没有打通，形成了非即时的数据孤岛。而采用了袋鼠云“全域”智能数据解决方案后，所有的标准制定都是相同的，数据得以深入而全面的加工。而精准营销、反黄牛、打标签、舆情监测、秒杀系统等等富有成效的模型都是基于企业数据的被统一联结并做出实时分析结果。”

记者谈到实时数据可视化这个部分时，袋鼠云CEO显得自信满满。他告诉记者：“数据的实时性采集非常重要，“袋鼠云”实现了TB级别甚至是PB级别的大数据进行实时处理，实现秒级反馈是最基本的要求。”他继续告诉记者：“这得益于袋鼠云的技术团队多数来自于阿里云，针对业务暴增、恶劣环境等极端情况下的峰值保障应急处理的技术与能力具有相当的经验。”记者还了解到，袋鼠云现在的技术团队都曾经历过“天猫双11”等等大型活动，并协助茅台、百草味、秒钱、申通E等多家公司顺利完成了大促护航等工作。

记者观察：一方面基于人才技术优势打造团队“硬气功”，另一方面深化客户项目落地可视化效果的“软实力”，在袋鼠云眼中一个睥睨新业界的发展蓝图已清晰可见。

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

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

前言：css3的出现使得我们可以通过前端技术，让网页内容变得更丰富，更华丽。今天来玩玩好玩的颜色渐变。

以下是 JavaScript 错误 Top 10：

       为了便于阅读，我们将每个错误描述都缩短了。接下来，让我们深入到每一个错误，来确定什么会导致它，以及如何避免创建它。 
1. Uncaught TypeError: Cannot read property 
        如果你是一个 JavaScript 开发人员，可能你看到这个错误的次数比你敢承认的要多（LOL…）。当你读取一个未定义的对象的属性或调用其方法时，这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试（尝试）。

       发生这种情况的原因很多，但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。
        我们来看一个在真实应用程序中发生的例子：我们选择 React，但该情况也同样适用于 Angular、Vue 或任何其他框架。

Javascript代码  

class Quiz extends Component {
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
} 这里有两件重要的事情要实现：

• 组件的状态（例如 this.state）从 undefined 开始。
• 当异步获取数据时，不管它是在构造函数componentWillMount还是componentDidMount中获取的，组件在数据加载之前至少会呈现一次，当 Quiz 第一次呈现时，this.state.items 是未定义的。 这又意味着 ItemList 将 items 定义为 undefined，并且在控制台中出现错误 - “Uncaught TypeError: Cannot read property ‘map’ of undefined”。
  

       这很容易解决。最简单的方法：在构造函数中用合理的默认值来初始化 state。

Javascript代码

class Quiz extends Component {
  // Added this:
  constructor(props) {
    super(props);
    // Assign state itself, and a default value for items
    this.state = {
      items: []
    };
  }
  componentWillMount() {
    axios.get('/thedata').then(res => {
      this.setState({items: res.data});
    });
  }
  render() {
    return (
      <ul>
        {this.state.items.map(item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    );
  }
}

       在你的应用程序中的具体代码可能是不同的，但我们希望我们已经给你足够的线索，以解决或避免在你的应用程序中出现的这个问题。如果还没有，请继续阅读，因为我们将在下面覆盖更多相关错误的示例。
        2. TypeError: ‘undefined’ is not an object
        这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。您可以在 Safari Developer Console 中轻松测 试。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。

      3.TypeError: null is not an object
        这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。 您可以在 Safari Developer Console 中轻松测试。

有趣的是，在 JavaScript 中，null 和 undefined 是不一样的，这就是为什么我们看到两个不同的错误信息。undefined 通常是一个尚未分配的变量，而 null 表示该值为空。 要验证它们不相等，请尝试使用严格的相等运算符 ===：  

       在现实世界的例子中，这种错误可能发生的一种场景是：如果在加载元素之前尝试在 JavaScript 中使用元素。 因为 DOM API 对于空白的对象引用返回值为 null。
        任何执行和处理 DOM 元素的 JS 代码都应该在创建 DOM 元素之后执行。 JS 代码按照 HTML 中的规定从上到下进行解释。 所以，如果 DOM 元素之前有一个标签，脚本标签内的 JS 代码将在浏览器解析 HTML 页面时执行。 如果在加载脚本之前尚未创建 DOM 元素，则会出现此错误。
        在这个例子中，我们可以通过添加一个事件监听器来解决这个问题，这个监听器会在页面准备好的时候通知我们。 一旦 addEventListener被触发，init() 方法就可以使用 DOM 元素。

Html代码

<script>
  function init() {
    var myButton = document.getElementById("myButton");
    var myTextfield = document.getElementById("myTextfield");
    myButton.onclick = function() {
      var userName = myTextfield.value;
    }
  }
  document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
      init();
    }
  });
</script>
<form>
  <input type="text" id="myTextfield" placeholder="Type your name" />
  <input type="button" id="myButton" value="Go" />
</form>

4. (unknown): Script error 
       当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。 例如，如果您将您的 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误将被报告为“脚本错误” 而不是包含有用的堆栈信息。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。 
        要获得真正的错误消息，请执行以下操作： 
        1. 发送 ‘Access-Control-Allow-Origin’ 头部 
        将 Access-Control-Allow-Origin 标头设置为 * 表示可以从任何域正确访问资源。 如有必要，您可以将域替换为您的域：例如，Access-Control-Allow-Origin：www.example.com。 但是，处理多个域会变得棘手，如果你使用 CDN，可能由此产生更多的缓存问题会让你感觉到这种努力并不值得。 在这里看到更多。 
         这里有一些关于如何在各种环境中设置这个头文件的例子： 
         在 JavaScript 文件所在的文件夹中，使用以下内容创建一个 .htaccess 文件：
代码

       Header add Access-Control-Allow-Origin "*"  

       将 add_header 指令添加到提供 JavaScript 文件的位置块中：
代码

       location ~ ^/assets/ {  add_header Access-Control-Allow-Origin *;  }  

        将以下内容添加到您为 JavaScript 文件提供资源服务的后端： 

代码 

        rspadd Access-Control-Allow-Origin:\ *  

        在 <script> 中设置 crossorigin="anonymous"

在您的 HTML 代码中，对于您设置了Access-Control-Allow-Origin header 的每个脚本，在 script 标签上设置crossorigin =“anonymous”。在脚本标记中添加 crossorigin 属性之前，请确保验证上述 header 正确发送。 在Firefox 中，如果存在crossorigin属性，但Access-Control-Allow-Origin头不存在，则脚本将不会执行。 

5. TypeError: Object doesn’t support property

       这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。

       这相当于 Chrome 中的 “TypeError：”undefined“ is not a function” 错误。 是的，对于相同的逻辑错误，不同的浏览器可能具有不同的错误消息。 
        对于使用 JavaScript 命名空间的 Web 应用程序，这是一个 IE l浏览器的常见的问题。 在这种情况下，99.9％ 的原因是 IE 无法将当前名称空间内的方法绑定到 this 关键字。 例如：如果你 JS 中有一个命名空间 Rollbar 以及方法 isAwesome 。 通常，如果您在 Rollbar 命名空间内，则可以使用以下语法调用isAwesome方法：
Javascript代码 

this.isAwesome();  

        Chrome，Firefox 和 Opera 会欣然接受这个语法。 另一方面 IE，不会。 因此，使用 JS 命名空间时最安全的选择是始终以实际名称空间作为前缀。

6. TypeError: ‘undefined’ is not a function
        当您调用未定义的函数时，这是 Chrome 中产生的错误。 您可以在 Chrome 开发人员控制台和 Mozilla Firefox 开发人员控制台中进行测试。

       随着 JavaScript 编码技术和设计模式在过去几年中变得越来越复杂，回调和关闭中的自引用范围也相应增加，这是这种/那种混淆的相当常见的来源。
       考虑这个代码片段：
Javascript代码

function testFunction() {
  this.clearLocalStorage();
  this.timer = setTimeout(function() {
    this.clearBoard();    // what is "this"?
  }, 0);
};

执行上面的代码会导致以下错误：“Uncaught TypeError：undefined is not a function”。 你得到上述错误的原因是，当你调用setTimeout()时，实际上是调用window.setTimeout()。 因此，在窗口对象的上下文中定义了一个传递给setTimeout()的匿名函数，该函数没有clearBoard()方法。
一个传统的，旧浏览器兼容的解决方案是简单地将您的 this 保存在一个变量，然后可以由闭包继承。 例如：
Javascript代码 

function testFunction () {
  this.clearLocalStorage();
  var self = this;   // save reference to 'this', while it's still this!
  this.timer = setTimeout(function(){
    self.clearBoard(); 
  }, 0);

本文中，我们会讨论如何通过优化错误提示信息，来优化UI表单的设计。

在UI界面的设计中，用户的操作失误不可避免，通过错误提示将当前状态传达给用户，这种反馈机制可以帮助用户及时作出调整并找到合理的解决方案。尽管错误信息很常见，却往往不被设计师重视。草草的处理错误信息、制作逻辑混乱的错误信息会使用户感到沮丧，以致最终放弃你的应用。相反，处理得当的错误提示，却可以变失败为惊喜。

一、表单中错误信息的设计方案

用户不喜欢表单，原因之一就是纠正输入错误信息的成本过高。如何让用户通过不同的报错信息提醒，绕过障碍顺利完成表单，是让用户体验流畅顺滑的关键所在。

糟糕的错误信息在很大程度上是源自于用户体验设计流程上的规划失误。为什么这么说呢？在原型设计阶段，用户体验设计师就需要考虑到可能会出现的错误，以及相应的错误反馈，确保用户在报错信息的帮助下，最终能够完成这个阶段的任务，抵达他们的目标。

1、在当前页面及时反馈

用户并不喜欢填完一个长表单并提交之后，才发现哪里填错了。在错误出现之后，界面应该在第一时刻将错误信息呈现出来，用户不必等到点击提交按钮才看到错误，他们能更早改正错误。

在上面两个错误信息呈现的案例当中，第一个页面使用了弹出框来呈现错误信息，告知用户需要填写详细信息才能付款。用户则需要关闭弹出框之后，再重新填写，这增加了额外的步骤。而用户关闭弹出框之后再填写的时候，也有一定的机率会忘记弹出框的具体要求和内容，导致无法正确填写。这种耗时又令人沮丧的用户体验，用户不会喜欢的。

正确的形式是直接在界面中呈现报错信息，并且报错信息紧贴着对应的输入框，以醒目的色彩在输入框下方呈现，用户能收到即时的反馈，也能清晰的标注出所有的要求，便于用户更正。

2、错误信息的最佳位置

在制作表单时，你通常会把错误信息放在哪里呢？如果错误信息没有放在用户期望的位置，那么可能会影响完成表单的效果。

当用户犯错时，他们需要了解这些错误是什么，以便他们能够纠正错误并重新提交表单。如果表单过于复杂填写困难，他们会改变主意。

◎顶部错误提示vs行间错误提示

错误消息的两个最常见的位置位于表单的顶部，和输入框的行间。哪个位置对用户来说更直观呢？

一项研究发现，在表单顶部显示所有错误消息会给用户记忆造成较高的认知负荷。这会强制用户回忆每个错误输入框中的错误消息。

减少用户认知负荷的方法是在输入框行间显示错误信息。行间的错误提示可以帮助当场识别错误而不是靠回忆错误，这让用户可以更快更轻松地纠正错误。

另一项研究发现“错误字段和错误信息之间的距离会影响错误纠正的效率”。在表单的顶部和底部放置错误信息时用户反应更正的时间最长，而行间错误信息可以缩短反应时间。

在表单的顶部和底部放置错误信息，也导致用户错误率最高，完成时间最长，满意度。和顶部、行间错误信息相比，底部错误信息的纠错成功率。

◎用户更偏爱的错误信息位置

该研究证明，将错误信息与错误的字段邻近放置可以获得最佳性能，并且指出了最直观的显示位置。

调研中让用户来选择把错误提示放在上图的哪个位置更满意，更多的用户喜欢输入框右边的错误提示位置。

位于输入框左侧的错误信息位置被评为最差。对话框上面的位置导致了最高的认知负荷，随后是字段之下的错误消息。

◎为什么右侧的位置是最好的

理解为什么用户更偏爱将错误消息放置在字段右侧是很重要的。通过这种方式，设计师可以更好地向其他人介绍在制定设计方案时用户的行为偏好。

西方的阅读习惯是从左到右的。当用户的视线从输入框移动到错误消息时，感觉就像一个自然的过程，需要很少的精力和视觉工作。将他们的眼睛从错误消息移回输入框以进行纠正也遵循重新读取文本的自然流程。

◎为什么左侧的位置是最差的

将错误消息放在输入框的左边，违背了西方的阅读习惯。当出现错误提示时，用户的视线朝着与自然阅读流程相反的方向移动。这种方式很不自然，有悖于用户习惯，并且在用户调研中得到了证实。

这样的排布也与我们的直觉相反，因为用户期望在左侧放置有更高优先级的元素。将错误消息放置在左侧意味着它比要输入的字段更重要。但事实上用户需要专注于纠正他们的输入，因此输入框应该是更重要的元素。

◎上侧的位置为什么会增加用户的认知负荷

用户对输入框上面的错误提示有着更高的认知负荷（例如表格顶部对齐的标签）。这是因为用户会把错误提示和输入框中的提示文案混淆。

这两个文本靠得很近会产生视觉噪音，在用户尝试读取错误消息或输入框的提示标签时分散注意力。他们看到两段文案却很难专注于其中一个，并且可能混淆它们。

◎移动设备上表单的最佳错误信息位置

手机屏幕缺少水平空间来并排显示错误消息和标签文案。这意味着把错误信息放在右侧不是移动表单上的最佳位置。

对于移动设备，更好的方式是请将错误信息放置在输入框下方。这是该研究中用户第二最喜欢的位置。虽然它不符合用户自然的从左到右的阅读流程，但它确实与自然的从上到下的阅读流程相对应。

当用户阅读文本时，他们习惯将视线从页面的左侧移动到右侧。错误信息低于输入框，使它遵循垂直阅读过程。

将错误消息放置得太靠近下面的字段标签时，可能会增加用户阅读文本时的认知负荷。你可以通过将它们隔开足够的间隔来防止这种情况。

◎右边还是下边，哪个是最好的位置？

错误消息的最佳位置在输入框的右侧和下方。但是你应该使用哪个位置？这取决于你有多少时间来实现。

如果你用来实现web端和app端的时间有限，可以选择在下方放置错误信息。在web端实现后，方便在app端进行适配。

如果你有足够的开发时间，在web端请选择输入框的右侧，而移动端考虑放在输入框的下面。这样不仅可以提供比较好的用户浏览体验，还能缩短表单的长度。

3、在视觉上要足够突出

如果出错之后，用户无法迅速注意到报错信息，这不仅仅浪费了时间，也耽误了事情。正如 Jakbo Nielsen 所说：“最糟糕的报错信息是那些对用户而言根本看不到的报错信息。”然而，难点也就在这个地方，加粗字体和弹出框对于用户而言过于具有压迫感，那么你要如何确保信息能被用户注意到又不会显得太过呢？不难，使用正确的色彩来辅助显示。

色彩是用户识别信息的重要途径，它也是设计师向用户传递信息的可靠工具。出于对比的目的，在白色的背景下，使用红色的错误提示信息，会足够醒目，又不会太过喧宾夺主。在某些情况下，红色对用户的压力较大，也可以使用黄色或橙色来作为错误提示。在这两种情况下，请确保错误文本清晰可辨，且与其背景的颜色有显着的对比。

值得注意的是，色彩不应该是报错信息呈现的唯一标准。考虑到网页和移动端应用本身的可用性和可访问性，设计师应该考虑到色盲用户的需求，提供色彩以外的视觉提示，例如错误icon等，确保他们也可以看明白。

二、注意错误信息的文案推敲

从某种程度上，你能把上面几条做好，你的报错信息在美学特征和体验上就没有太多问题了。不过，要想设计最佳体验的错误信息，文案的重要性也是显而易见的，需要在言简意赅的同时友好地帮助用户解决问题。

10条可用性启迪（经典的尼尔森十大可用性原则）中建议，要清晰优雅地表达出错误信息。有效的错误提示应该提供如下信息：

明确表达发生了什么

描述用户应该如何应对

尽可能多地保留用户输入的信息

下面是文案设计的几个小技巧。

1、确保错误信息是可理解的

把你的错误信息视为与用户的对话——让它听起来像是为人类编写的。确保你的错误信息是有礼貌，可理解的，而不是错误代码和数据（诸如出现了错误43这样的信息）。

2、清晰明确的指出错误

一些电子邮件的网站会在所有的错误场景使用同一个错误提示，如下图。你不能只是简单的提示用户“输入有效的电子邮件地址”，而应针对用户的问题明确的指出错误所在，例如“缺少@字符”等。而MailChimp则以另一种方式来判断错误——他们对于每个电子邮件的验证包含3个错误信息：检查输入字段是否为空、是否有“@”字符、是否有“.”字符。针对用户输入的错误方式会提供相应的提示文案。

3、提供解决方案

错误信息应该明确定义问题是什么，为什么会发生，以及如何处理。只写出错误是不够的。应该向用户尽可能简单的展示如何尽快解决问题。

例如，Microsoft描述错误并在错误消息中提供解决方案，以便用户可以立即解决此问题。

正如同Jonathan Colman 所说，正确的报错信息通常使用简明而清晰的文字，而失败的报错信息通常不会提供关于错误发生的具体状况以及解决方案，更丑陋的做法是将错误信息完全隐藏起来。

下面的设计，就是很明显的对比：

4. 错误信息应该礼貌

不要责怪你的用户，即使他们做错了。对用户要有礼貌，让他们感到舒适随和。可以使用你的品牌声音，来添加个性化的错误提示。

5. 如果恰当尽可能地幽默

在你的错误信息中小心使用幽默。首先，错误信息应该是提供信息和帮助。如果适合，在错误消息中添加一些幽默，可以改善用户体验。

三、如何有效的预防错误

设计过app的同学，应该很熟悉各种限制条件。例如网络状况差的情况下，很难填写表单，而且几乎没法同步数据。要考虑到这些限制，设计更易使用的app，将错误减到最少。换句话说，应该提供建议、加上限制、保持灵活，第一时间预防用户犯错。

Twitter因推文的字数限制而出名，他们会在用户达到字数上限之前提出警示。

结语

从不出现的错误信息才是最好的。最佳方式是引导用户向正确方向前进，第一时间预防错误发生。但当错误确实发生时，设计精良的错误处理，不仅能教育用户按你预期的方式使用app，还能防止用户感到茫然。在设计错误信息时应遵循以上的方法，好的体验让用户可以以最小的工作量和最少的思考，快速完成表单，让他们可以有时间来完成他们真正想要做的事情。

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

Echarts 标签中文本内容太长的时候怎么办 ? 
- 1对文本进行倾斜 
在xAxis.axisLabe中修改rotate的值

 xAxis: {
            data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据 name:"123",//坐标轴名称。 nameLocation:'end',//坐标轴名称显示位置。 axisLabel : {//坐标轴刻度标签的相关设置。 interval:0, rotate:"45" }
        },

 grid:{//直角坐标系内绘图网格 show:true,//是否显示直角坐标系网格。[ default: false ] left:"20%",//grid 组件离容器左侧的距离。 right:"30px",
            borderColor:"#c45455",//网格的边框颜色 bottom:"20%" // },

 axisLabel : {//坐标轴刻度标签的相关设置。 formatter : function(params){ var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = params.length;// 实际标签的个数 var provideNumber = 4;// 每行能显示的字的个数 var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整 /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */ // 条件等同于rowNumber>1 if (paramsNameNumber > provideNumber) { /** 循环每一行,p表示行 */ for (var p = 0; p < rowNumber; p++) { var tempStr = "";// 表示每一次截取的字符串 var start = p * provideNumber;// 开始截取的位置 var end = start + provideNumber;// 结束截取的位置 // 此处特殊处理最后一行的索引值 if (p == rowNumber - 1) { // 最后一次不换行 tempStr = params.substring(start, paramsNameNumber);
                                    } else { // 每一次拼接字符串并换行 tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最终拼成的字符串 }

                            } else { // 将旧标签的值赋给新标签 newParamsName = params;
                            } //将最终的字符串返回 return newParamsName
                }

            }

axisLabel: { interval: 0,  
                               formatter:function(value) {  
                                   return value.split("").join("\n"); } } 

axisLabel : {//坐标轴刻度标签的相关设置。 clickable:true,//并给图表添加单击事件  根据返回值判断点击的是哪里 interval : 0,
                formatter : function(params,index){ if (index % 2 != 0) { return '\n\n' + params;
                    } else { return params;
                    }
                }

            }

这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。

那么如何使用CSS实现这个效果？

追踪位置

我们要做的第一件事就是获取到鼠标的位置。

  document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
  }
   1.选择元素，等待，直到用户将鼠标移过它；
   2.计算相对于元素的位置；
   3.将坐标存在CSS的变量中。

动画渐变
  .button {
     position: relative;
     appearance: none;
     background: #f72359;
     padding: 1em 2em;
     border: none;
     color: white;
     font-size: 1.2em;
     cursor: pointer;
     outline: none;
     overflow: hidden;
     border-radius: 100px;
  span {
    position: relative;
  }
  &::before {
    --size: 0;  
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
    }
    &:hover::before {
    --size: 400px;
      }

   }