首页

【css】背景颜色渐变,文字颜色渐变,边框颜色渐变

seo达人

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

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

一、背景颜色渐变。

[html] view plain copy
  1. <body>  
  2. <style>  
  3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;  
  4. background-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);   
  5. }  
  6. </style>  
  7. <div class="content">浅色夏沫,夏末微凉</div>  
  8. </body>  

运行效果


二、文字颜色渐变。

[html] view plain copy
  1. <body>  
  2. <style>  
  3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;  
  4. background-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%);   
  5. -webkit-background-clip:text; -webkit-text-fill-color:transparent; }  
  6. </style>  
  7. <div class="content">浅色夏沫,夏末微凉</div>  
  8. </body>  

运行效果


三、边框颜色渐变。

[html] view plain copy
  1. <body>  
  2. <style>  
  3. .content { width:300px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;   
  4. border:10px solid;  
  5. border-image:-webkit-linear-gradient(left, red 0%, blue 30%, yellow 60%, green 90%) 10; }  
  6. </style>  
  7. <div class="content">浅色夏沫,夏末微凉</div>  
  8. </body>   

运行效果

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


10种最常见的Javascript错误

周周

以下是 JavaScript 错误 Top 10:

  3a8ccf12-f663-38d7-bca8-6178415d9875.png

       为了便于阅读,我们将每个错误描述都缩短了。接下来,让我们深入到每一个错误,来确定什么会导致它,以及如何避免创建它。 
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 开发者控制台中进行测试。

fcb1e309-0293-3836-a8e5-e6e361a28add.png

       这相当于 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 开发人员控制台中进行测试。 63e43ce7-2048-3c44-9d80-3e8a27b71a56.png

       随着 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);

};

或者,在较新的浏览器中,可以使用bind()方法传递适当的引用:
Javascript代码

function testFunction () {
  this.clearLocalStorage();
  this.timer = setTimeout(this.reset.bind(this), 0);  // bind to 'this'
};
function testFunction(){
    this.clearBoard();    //back in the context of the right 'this'!
};

7. Uncaught RangeError: Maximum call stack 

        这是 Chrome 在一些情况下会发生的错误。 一个是当你调用一个不终止的递归函数。您可以在 Chrome 开发者控制台中进行测试。

                     5cadac78-96ee-3a2f-ad3f-493cceae8e0a.png

      此外,如果您将值传递给超出范围的函数,也可能会发生这种情况。 许多函数只接受其输入值的特定范围的数字。 例如:Number.toExponential(digits) 和 Number.toFixed(digits) 接受 0 到 20 的数字,Number.toPrecision(digits) 接受 1 到 21 的数字。
Javascript代码

var a = new Array(4294967295);  //OK
var b = new Array(-1); //range error
var num = 2.555555;
document.writeln(num.toExponential(4));  //OK
document.writeln(num.toExponential(-2)); //range error!
num = 2.9999;
document.writeln(num.toFixed(2));   //OK
document.writeln(num.toFixed(25));  //range error!
num = 2.3456;
document.writeln(num.toPrecision(1));   //OK
document.writeln(num.toPrecision(22));  //range error!

8. TypeError: Cannot read property ‘length’

        这是 Chrome 中发生的错误,因为读取未定义变量的长度属性。 您可以在 Chrome 开发者控制台中进行测试。
      您通常会在数组中找到定义的长度,但是如果数组未初始化或者变量名称在另一个上下文中隐藏,则可能会遇到此错误。让我们用下面的例子来理解这个错误。
Javascript代码

var testArray = ["Test"];
function testFunction(testArray) {
    for (var i = 0; i < testArray.length; i++) {
      console.log(testArray[i]);
    }
}
testFunction(); 当你用参数声明一个函数时,这些参数变成了函数作用域内的本地参数。这意味着即使你函数外有名为 testArray 的变量,在一个函数中具有相同名字的参数也会被视为本地参数。

        您有两种方法可以解决您的问题:
        1. 删除函数声明语句中的参数(事实上你想访问那些声明在函数之外的变量,所以你不需要函数的参数):

var testArray = ["Test"];
/* Precondition: defined testArray outside of a function */
function testFunction(/* No params */) {
    for (var i = 0; i < testArray.length; i++) {
      console.log(testArray[i]);
    }
}
testFunction();

      2. 用声明的数组调用该函数:

var testArray = ["Test"];
function testFunction(testArray) {
   for (var i = 0; i < testArray.length; i++) {
      console.log(testArray[i]);
    }
}
testFunction(testArray); 9. Uncaught TypeError: Cannot set property 
        当我们尝试访问一个未定义的变量时,它总是返回 undefined,我们不能获取或设置任何未定义的属性。 在这种情况下,应用程序将抛出 “Uncaught TypeError: Cannot set property”。 
       如果测试对象不存在,错误将会抛出 “Uncaught TypeErrorUncaught TypeError: Cannot set property”。

10. ReferenceError: event is not defined 
当您尝试访问未定义的变量或超出当前范围的变量时,会引发此错误。
       如果在使用事件处理系统时遇到此错误,请确保使用传入的事件对象作为参数。像 IE 这样的旧浏览器提供了一个全局变量事件,但并不是所有浏览器都支持。像 jQuery 这样的库试图规范化这种行为。尽管如此,最好使用传入事件处理函数的函数。
function myFunction(event) {
    event = event.which || event.keyCode;
    if(event.keyCode===13){
       alert(event.keyCode);
    }
}

结论 
        我们希望你学到了新的东西,可以避免将来的错误,或者本指南帮助你解决了头痛的问题。 
        尽管如此,即使有最佳实践,生产中也会出现意想不到的错误。能够查看影响用户的错误,并拥有快速解决问题的好工具,这一点非常重要。

信息杂乱无章?教你构建合理的视觉层次!

雪涛

每天打开手机,各式各样的信息纷至沓来,每个 App 每个页面都有好多话要说。当信息汇集在一起的时候,如何能让用户一打开页面就能轻松理解各个信息元素之间的关系与差异呢?这就要靠我们设计师在设计之初构建合理的视觉层次了。一个页面的信息层级是不是清晰明了,很大程度上影响到用户的信息获取效率和使用体验。

在平面和网页设计中,视觉层次一般分为三层:主层(Primary)、副层(Secondary)和三层(Tertiary)。其中主层一般是指头条标题等核心信息,也是要让用户第一眼就注意到的信息。副层可以是小标题等信息,展示出主要内容与提纲。最后的三层一般由正文或其他额外信息构成,展示全部的内容,可以用较小的字号。

△ 图片来自网络

不过当我们在设计移动端页面的时候,因为屏幕尺寸的限制,有时候需要酌情减少页面的层级,这样才能让信息不会过于繁杂。

一般一个页面会根据功能分为多个模块,下面我们就从「模块内」和「模块之间」两个角度来谈谈如何构建合理的视觉层次。

一、一个模块中的层次感

我们所说的「模块」指的是什么呢?可以是一张卡片里面的内容,也可以是一个信息列表等等,总而言之是一个信息组。当我们拿到需求的时候,应该理解每个信息组里面的每条信息的价值,并且给他们分一个类。

比如有时候,PM 同学跑过来说:「我想加个大按钮」,「不想让用户注意到删除功能,但是一定要有」 ,或者「这次就想试一试,展示了这条信息点击率会不会涨」 ,又或是「这条信息展不展示都行,你设计的时候自己看吧……」 好好好,需求我都懂,那么该如何分类呢?

四象限法则相信大家都听说过,那么我们就改编一下这个法则,给每个信息组中的信息按「重要——不重要」「必要——不必要」来分个类吧。

面对又重要又必要的信息还等什么,一定要大要明显,让用户第一眼看到。

重要却不必要的信息,一般是从产品或流程本身来讲不是一定要有的信息,但是因为某种原因想要突显给用户,比如在信用卡的产品列表中加入每张卡的推荐理由,或者在餐厅列表中展示某某名人去过这家店……这些信息在列表中不是必须有的,但是对于引导用户判断又十分的重要,所以我们可以次一级的来展示,要让用户可以注意到,但也不能抢了风头。

哪种信息是必要但不重要的呢?比如一个活动弹窗的关闭按钮,一个订单的删除功能,一条免责声明等等,我们不希望用户注意到他们,但是这些功能又不得不存在,那么就要弱化展示这些信息。

不必要又不重要的信息,一般情况是要去掉的,除非在设计中信息太少了空荡荡的,为了排版美观才会把这种边缘信息留下占位。

接下来,当我们整理好信息层级之后,要靠什么手段来展示这些层级呢?答案是加大对比。

1. 大小

对比的第一步就是大小的对比,在大家的认知中,大的东西比小的东西更显眼、更重要。用户会自然而然地关注到尺寸较大的文本和尺寸较大的图,比如下图中一张足够大的信用卡卡面图片,一秒吸引目光。再比如页面中的大标题,都是这样的效果。

△ 截图来自查查公积金

在内容列表中,标题名字类的信息一般会使用14-17dp左右,补充说明内容一般使用11-12dp左右,具体的使用情况要根据信息的多少、信息的重要程度、上下对比等情况来进行具体的设计。

△ 图片来自融360、微信

2. 重量

有时候由于空间的限制,字号不能再大了?字号大了也没拉开层次?试试增加字重量吧。iOS&Android 由于字体不同,加粗的效果也不同,请酌情增减。

3. 颜色

颜色对于用户的感知有着巨大的影响。所以在进行视觉层次构建的时候,不同的颜色可以轻松构成层次结构,强烈的颜色比如红色、橙色都很容易引人注意。白色和浅灰通常可以用来作为大面积的背景色,和其他的颜色构成对比。在设计的时候可以运用 App 的主色和辅助色来拉开视觉层次。

△ 图片来自查查公积金、融360视觉规范

4. 对比

我们以上图这个贷款列表举一个综合的例子,四条信息从最突出到最弱化分别标为了1、2、3、4,这几条信息中的字号以至少6px的差值进行递减,并且只有前两条信息进行了加粗处理,同时颜色的选择上也是从强到弱:

大小、重量、颜色的运用,归根结底就是制造对比,这也是创建层次结构依靠的核心。一个元素和另外一个元素构成对比,才能有层次的展示他们之间重要程度上的差异,让用户更加容易获取到信息。

二、模块之间的层次感

当我们已经合理的排布了一个模块内的视觉层次,接下来要做的就是把多个模块组合起来。

心理学家基于格式塔原理来检测用户对于元素之间关系的视觉感知,发现人们倾向于将视觉关系靠近的元素群视作为有关系的一组。值得说明的是,位置接近的元素,即使色彩形状大小都不一致,但只要他们足够靠近,都会被人们视为一组。

△ 图片来自网络

视觉层次的建立很大程度上是基于格式塔原理,所以我们要关注 UI 元素之间的靠近性。

基于这种认知,即使每个模块之中的内容有对比有强弱,但是只要每个信息组之间的元素的距离较近,并与其他信息组之间的距离拉远,留下足够的留白空间,就可以清晰的将整个页面的层次拉开。留白和元素本身之间构成的疏密对比,会更好的让用户注意到留白包围下的内容。

△ 图片来自网络

现在很多 App 都是通过对比与留白来进行页面中的「无形分割」,减少了很多线和块的运用,让页面更为简洁。基本上原则为:文字与图片对齐,与相关内容的间距要小于其他内容,标题要大。

△ 图片来自 Airbnb

当字体足够大的时候,会比小字符更有「图形感」,更加突出,可以更明确的告诉用户从这里开始是下一段了,字号一般在20-24dp之间,根据内容和整体风格来决定,颜色一般选择比较深的颜色 ,必要的时候可以加粗。当其他内容都是比较小的文字的时候,栏目标题也要控制一下大小。如果图片较多,标题就可以再大一些。

具体多大,就要在页面和谐的基础上多试几次……

△ 图片来自查查公积金

如上图,在查查公积金 App 中,当我们设计信用卡详情页的时候,由于整个页面里图形比较突出,看起来用加粗的「办卡礼」、「专享特权」标题更合适一些。可是在同个 App 的公积金详情页里面,整个页面用色都比较清淡,内容都是一些文字信息,如果内容标题加粗的话会显得比较突兀。所以综合整个 App 的页面风格权衡之后,还是选择了左侧没有加粗字体的设计。

总体来讲,UI 设计是没有公式的,只能有经验之谈和大体上的建议,很多时候都要设计师一次次的去尝试、去对比、去感受,才能给出针对当下页面需求最合理的层次构建与解决方案。

如何设计表单错误信息

雪涛

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

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



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


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

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


1、在当前页面及时反馈


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

Image title


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

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


2、错误信息的最佳位置


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

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


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


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

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

Image title


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

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

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


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


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

Image title


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

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


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


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

Image title


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


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


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

Image title


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


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


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

Image title


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


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


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

Image title


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

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

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


◎右边还是下边,哪个是最好的位置?


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

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

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


3、在视觉上要足够突出


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

Image title


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

Image title


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


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


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

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

明确表达发生了什么
描述用户应该如何应对
尽可能多地保留用户输入的信息


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


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


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

Image title



2、清晰明确的指出错误


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

Image title



3、提供解决方案


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

Image title


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

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

下面的设计,就是很明显的对比:

Image title



4. 错误信息应该礼貌


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

Image title



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


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

Image title



三、如何有效的预防错误


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

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

Image title



结语


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

Echarts x轴文本内容太长的几种解决方案

seo达人

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

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

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

interval

坐标轴刻度标签的显示间隔(在类目轴中有效哦),默认会采用标签不重叠的方式显示标签(也就是默认会将部分文字显示不全) 
可以设置为0强制显示所有标签,如果设置为1,表示隔一个标签显示一个标签,如果为3,表示隔3个标签显示一个标签,以此类推

一开始我没设置 因为标签文本过长的原因他就自动不显示全部 
image.png

被遮挡住就让grid 组件离容器向上移动 把grid中的bottom的值调大一些

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

image.png 
- 2.换行显示 
在xAxis.axisLabel中 使用formatter回调函数实现换行

 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
                }

            }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

image.png

  • 3.文字竖直显示 
    同样和换行一个道理,只是这个是单个文字换行 
    在xAxis.axisLabel中 使用formatter回调函数实现换行
axisLabel: { interval: 0,  
                               formatter:function(value) {  
                                   return value.split("").join("\n"); } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

image.png

  • 4.隔一个换行 
    在xAxis.axisLabel中 使用formatter回调函数实现换行
axisLabel : {//坐标轴刻度标签的相关设置。 clickable:true,//并给图表添加单击事件  根据返回值判断点击的是哪里 interval : 0,
                formatter : function(params,index){ if (index % 2 != 0) { return '\n\n' + params;
                    } else { return params;
                    }
                }

            }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

image.png

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

利用 CSS 变量实现令人震惊的悬浮效果

周周

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

171422eli2zvv3zq2eq2mu.gif

那么如何使用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;
      }

   }

结果
成功啦!将其加入到对于的HTML页面,你炫酷的按钮就可以使用啦!

设计方法:用问题引出答案,群策群力绘制用户体验地图

蓝蓝

周五参加了港大space学院的工作坊,感谢Google张英惠老师的精彩授课,学到了通过发问找到解决问题的方法,群策群力绘制用户体验地图。IMG_20170922_152217.jpg

怎么制作微信小程序的旋转动画?

seo达人

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

微信小程序被给予的能量是无穷的,在小程序发展逐渐成熟的当下,小程序开发能实现的需求越来越完善。最近小程序中有一个图片旋转的需求,在微信小程序上是可以通过切换多张图片达到旋转的效果,但微信小程序自带的API中带有这么一个动画组件,因此小程序制作旋转动画可以使用image+Animation来实现。

首先在wxml中定义image

注意其中的animation属性,image就由它来实现动画。

而{{animation}}我们在js的data中定义

data: {

animation: \'\'

},

相关代码

var _animation;

var _animationIndex

const _ANIMATION_TIME = 500;

pages {

...

onShow: function () {

_animation =wx.createAnimation({

duration:_ANIMATION_TIME,

timingFunction: \'linear\',//linear,ease,ease-in,ease-in-out,ease-out,step-start,step-end

delay: 0,

transformOrigin:\'50% 50% 0\'

})

},

/**

* 实现image旋转动画,每次旋转 120*n度

*/

rotateAni: function (n){

_animation.rotate(120* (n)).step()

this.setData({

animation:_animation.export()

})

},

/**

* 开始旋转

*/

startAnimationInterval:function () {

var that = this;

that.rotateAni(++_loadImagePathIndex); // 进行一次旋转

_animationIntervalId =setInterval(function () {

that.rotateAni(++_loadImagePathIndex);

},  _ANIMATION_TIME); // 没间隔_ANIMATION_TIME进行一次旋转

},

/**

* 停止旋转

*/

stopAnimationInterval:function () {

if (_animationIntervalId> 0) {

clearInterval(_animationIntervalId);

_animationIntervalId= 0;

}

},

}

微信自带的Animation可以实现一次动画,然后可以通过setInterval来达到不断旋转的目的,在使用时,控制startAnimationInterval和stopAnimationInterval即可。


微信小程序怎么制作旋转动画

微信小程序视频教程,尽在即速学院。


在使用animation时,会发现有时候出现旋转速度很快或者反向旋转再正向旋转的清空,这都是由于rotate的值设置有问题。

1、rotate的值应该是上一次结束时的值,

2、如果设置了全局变量,记得在oncreate时初始化,不然第二次打开同一页面会有问题。

注意事项:

这里为什么不直接给_animation.rotate(120 * (n)).step()设置一个足够大的值,原因有两点:

1、我们需要便利的控制开始和停止,

2、animation在小程序进入后台后,会持续运行,占用手机内存和cpu,而小程序依赖于微信,在iphone上会导致微信被终止运行

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

氛围独特情绪深沉的深色系网站,设计上有什么讲究?

博博

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


在设计中,情绪的传达和氛围的营造通常是要看设计项目的目的是什么,而不同的配色和不同的元素组合,往往能够呈现出截然不同的风貌。相比之下,深色系网站常常会呈现出更为独特的氛围,传达出更为复杂多样的情绪。虽然这样的情绪并不一定是正面和向上的,但是好设计总归是让人过目难忘的。

想要借助深沉的色调来创造情绪相对独特的网站设计,是有一些可供遵循的常见的设计技巧,今天的文章,我们来分享一下这方面的内容。

深色,并不定是黑色

首先这一点必须明确,深色并不一定是黑色。

在选取配色的时候,网明亮的色彩当中添加黑色或者灰色所得出的色彩,通常会显得更加深沉浓重,这样的色彩中往往会包含之前的色调。

在上面的 Hooligan 这个网站当中,设计师不仅采用了深沉的黑色背景,而且采用了和黑色背景相当匹配的暗金色,两种深色之间色彩明暗依然存在对比,和白色的标题文本构成了三个层次,不仅富有视觉吸引力,而且创造出了沉稳厚重的氛围。

阴影的使用

阴影和光线往往是相伴出现的,而阴影所带来的舞台剧般的效果则充满了戏剧感和神秘感,这也是设计师喜欢它的原因,这样的设计会让用户心中产生兴趣和好奇心。

在上面的 Clear Motion 这个网站当中,车辆周围被阴影所包围,文本内容很容易吸引用户的注意力。同时,用户会好奇这辆车有什么特殊的地方,有什么地方看起来不太一样,黑暗的氛围下,用户的好奇心会身不由己地高涨起来。

黑色叠加层

用黑色的半透明层叠加到图像上,也是制造深色系背景的一种常见手法。在图片的选取和不同的透明度之下,背景图片所呈现出来的效果和氛围,是非常不同的。

透明度较低的情况下,黑色叠加图层会让用户看不清背景中的信息,这使得背景信息在整个设计中参与度较低。透明度较高的情况下,更多的背景元素会透过叠加层呈现出来,和前景元素产生交叉和互动。但是总的来说,黑色叠加层让元素之间产生对比,也使得行为召唤元素更容易发挥作用。

在上面的 Fhoke 这个网站当中,透明叠加层让背景中的场景适当地透露一点出来,但是真正吸引人注意力的,还是在标题和左侧的行为指引上。

简陋的画布

细节较多的背景让人觉得信息丰富,而粗陋的画布则更容易创造出一种虚无的感觉,相应的,后者是会让人更有探索的欲望。粗陋甚至赤裸的深色系画布很好地将神秘感和探索的欲望结合到了一起。

Dubois 这个网站的背景同样非常的简单,没有纹理,只是通过均匀分布的小圆点来进行装饰,如果你仔细观察会发现这些点的分布、色彩其实是有微妙变化的,会引导你去注意位于整个页面底部的文本标题,虽然绝大多数的网站并不会把标题放在这样的位置上。

字体的选取

Punk is Not Dead 这个网站给你的感觉是否很独特?网站的设计非常清晰,识别度极高,网站本身还有音频组件,它的设计从视频到音频一应俱全,整体充满了朋克的风格。

黑暗的背景和明亮的字体色彩有助于实现这样的效果,但是字体的选取才是最关键的。想象一下使用普通的字体,是完全达不到这样的效果。尖锐粗糙的边缘和并不那么友好的可读性,让他在视觉上和朋克的精神保持了一致。

黑白配色

当设计完全失去色彩,仅仅保留黑白两色的情况下,会给人什么样的感觉呢?如果整个设计是以黑白两色为主,搭配少量其他的颜色,体验和氛围又是什么样的呢?

黑白配色和纯黑为主的配色一样,很容易创造出戏剧化的效果,这两种色彩本身所构成的冲突和对比就是原因。

黑白的强烈对比,常常会促使访客在浏览过程中忙于注意不同的细节,面对 Super Rebel 这个网站的时候,这种感觉就非常明显。打开页面之后,注意力会迅速被右上角的图片吸引,随后便忍不住把对比强烈的所有模块都扫视一遍。黑白色搭配大量信息很容易创造出信息过载的效果和体验。

图片的选取

Jimmy Chin 在他的作品集网站的「关于」页面当中,他将自己的照片直接放了进去,色彩采用了单纯的黑色。

色彩的明暗和饱和度的选取,直接影响着整个设计的情绪,在这里,单纯的黑色让整个页面的形式感更强,而所呈现出来的感觉也非常的锐利。想想看,他穿着黄色的衬衫和绿色的裤子,那么整个图片所呈现出来的感觉是完全不同的,浮夸而醒目。

图片的选取对于情绪的表达和氛围的营造有着巨大的影响。

也可以营造轻松的氛围

许多深色系的网站都给人以深沉、怪异的感觉,但是深色并不完全代表着负面的情绪。深色系的网站同样可以被设计得轻松而富有活力,这主要取决于你如何将元素组合到一起。

在 Atom 这个网站当中,整个背景都采用了典型的深灰,但是卡通角色和轻盈的色调让网站凸显出一种可爱而有趣的感觉。这样的设计也能带来视觉奇观,并且不会让用户感觉到负面的感受。

这种设计让用户和网站之间的情感联系更轻松,让服务更容易为用户所接受。

结语

那些带有负面情绪和独特氛围的网站,你喜欢吗?带有这样情绪和氛围的网站,需要设计师花费更多的时间和精力来拿捏程度,来达成相应的设计目标,而且这样的设计并非不好。情绪化的设计,有趣而神秘的氛围,带有负面情感的表达,躁动甚至暴躁的设计,这些都有其独特的作用。

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档