首頁(yè)

【css】背景顏色漸變，文字顏色漸變，邊框顏色漸變

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

前言：css3的出現(xiàn)使得我們可以通過(guò)前端技術(shù)，讓網(wǎng)頁(yè)內(nèi)容變得更豐富，更華麗。今天來(lái)玩玩好玩的顏色漸變。

一、背景顏色漸變。

[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>  

運(yùn)行效果


二、文字顏色漸變。

[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>  

運(yùn)行效果


三、邊框顏色漸變。

[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>   

運(yùn)行效果

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


評(píng)論(0) 瀏覽(2974)

10種最常見(jiàn)的Javascript錯(cuò)誤

周周

以下是 JavaScript 錯(cuò)誤 Top 10：

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

       為了便于閱讀，我們將每個(gè)錯(cuò)誤描述都縮短了。接下來(lái)，讓我們深入到每一個(gè)錯(cuò)誤，來(lái)確定什么會(huì)導(dǎo)致它，以及如何避免創(chuàng)建它。 
1. Uncaught TypeError: Cannot read property 
        如果你是一個(gè) JavaScript 開(kāi)發(fā)人員，可能你看到這個(gè)錯(cuò)誤的次數(shù)比你敢承認(rèn)的要多（LOL…）。當(dāng)你讀取一個(gè)未定義的對(duì)象的屬性或調(diào)用其方法時(shí)，這個(gè)錯(cuò)誤會(huì)在 Chrome 中出現(xiàn)。 您可以很容易的在 Chrome 開(kāi)發(fā)者控制臺(tái)中進(jìn)行測(cè)試（嘗試）。

       發(fā)生這種情況的原因很多，但常見(jiàn)的一種是在渲染 UI 組件時(shí)對(duì)于狀態(tài)的初始化操作不當(dāng)。
        我們來(lái)看一個(gè)在真實(shí)應(yīng)用程序中發(fā)生的例子：我們選擇 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>
    );
  }
} 這里有兩件重要的事情要實(shí)現(xiàn)：

  • 組件的狀態(tài)（例如 this.state）從 undefined 開(kāi)始。
  • 當(dāng)異步獲取數(shù)據(jù)時(shí)，不管它是在構(gòu)造函數(shù)componentWillMount還是componentDidMount中獲取的，組件在數(shù)據(jù)加載之前至少會(huì)呈現(xiàn)一次，當(dāng) Quiz 第一次呈現(xiàn)時(shí)，this.state.items 是未定義的。 這又意味著 ItemList 將 items 定義為 undefined，并且在控制臺(tái)中出現(xiàn)錯(cuò)誤 - “Uncaught TypeError: Cannot read property ‘map’ of undefined”。

       這很容易解決。最簡(jiǎn)單的方法：在構(gòu)造函數(shù)中用合理的默認(rèn)值來(lái)初始化 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>
    );
  }
}

       在你的應(yīng)用程序中的具體代碼可能是不同的，但我們希望我們已經(jīng)給你足夠的線索，以解決或避免在你的應(yīng)用程序中出現(xiàn)的這個(gè)問(wèn)題。如果還沒(méi)有，請(qǐng)繼續(xù)閱讀，因?yàn)槲覀儗⒃谙旅娓采w更多相關(guān)錯(cuò)誤的示例。
        2. TypeError: ‘undefined’ is not an object
        這是在 Safari 中讀取屬性或調(diào)用未定義對(duì)象上的方法時(shí)發(fā)生的錯(cuò)誤。您可以在 Safari Developer Console 中輕松測(cè) 試。這與 1 中提到的 Chrome 的錯(cuò)誤基本相同，但 Safari 使用了不同的錯(cuò)誤消息提示語(yǔ)。

      3.TypeError: null is not an object
        這是在 Safari 中讀取屬性或調(diào)用空對(duì)象上的方法時(shí)發(fā)生的錯(cuò)誤。 您可以在 Safari Developer Console 中輕松測(cè)試。

有趣的是，在 JavaScript 中，null 和 undefined 是不一樣的，這就是為什么我們看到兩個(gè)不同的錯(cuò)誤信息。undefined 通常是一個(gè)尚未分配的變量，而 null 表示該值為空。 要驗(yàn)證它們不相等，請(qǐng)嘗試使用嚴(yán)格的相等運(yùn)算符 ===：  

       在現(xiàn)實(shí)世界的例子中，這種錯(cuò)誤可能發(fā)生的一種場(chǎng)景是：如果在加載元素之前嘗試在 JavaScript 中使用元素。 因?yàn)?DOM API 對(duì)于空白的對(duì)象引用返回值為 null。
        任何執(zhí)行和處理 DOM 元素的 JS 代碼都應(yīng)該在創(chuàng)建 DOM 元素之后執(zhí)行。 JS 代碼按照 HTML 中的規(guī)定從上到下進(jìn)行解釋。 所以，如果 DOM 元素之前有一個(gè)標(biāo)簽，腳本標(biāo)簽內(nèi)的 JS 代碼將在瀏覽器解析 HTML 頁(yè)面時(shí)執(zhí)行。 如果在加載腳本之前尚未創(chuàng)建 DOM 元素，則會(huì)出現(xiàn)此錯(cuò)誤。
        在這個(gè)例子中，我們可以通過(guò)添加一個(gè)事件監(jiān)聽(tīng)器來(lái)解決這個(gè)問(wèn)題，這個(gè)監(jiān)聽(tīng)器會(huì)在頁(yè)面準(zhǔn)備好的時(shí)候通知我們。 一旦 addEventListener被觸發(fā)，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 
       當(dāng)未捕獲的 JavaScript 錯(cuò)誤（通過(guò)window.onerror處理程序引發(fā)的錯(cuò)誤，而不是捕獲在try-catch中）被瀏覽器的跨域策略限制時(shí)，會(huì)產(chǎn)生這類(lèi)的腳本錯(cuò)誤。 例如，如果您將您的 JavaScript 代碼托管在 CDN 上，則任何未被捕獲的錯(cuò)誤將被報(bào)告為“腳本錯(cuò)誤” 而不是包含有用的堆棧信息。這是一種瀏覽器安全措施，旨在防止跨域傳遞數(shù)據(jù)，否則將不允許進(jìn)行通信。 
        要獲得真正的錯(cuò)誤消息，請(qǐng)執(zhí)行以下操作： 
        1. 發(fā)送 ‘Access-Control-Allow-Origin’ 頭部 
        將 Access-Control-Allow-Origin 標(biāo)頭設(shè)置為 * 表示可以從任何域正確訪問(wèn)資源。 如有必要，您可以將域替換為您的域：例如，Access-Control-Allow-Origin：www.example.com。 但是，處理多個(gè)域會(huì)變得棘手，如果你使用 CDN，可能由此產(chǎn)生更多的緩存問(wèn)題會(huì)讓你感覺(jué)到這種努力并不值得。 在這里看到更多。 
         這里有一些關(guān)于如何在各種環(huán)境中設(shè)置這個(gè)頭文件的例子： 
         在 JavaScript 文件所在的文件夾中，使用以下內(nèi)容創(chuàng)建一個(gè) .htaccess 文件：
代碼

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

       將 add_header 指令添加到提供 JavaScript 文件的位置塊中：
代碼

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

        將以下內(nèi)容添加到您為 JavaScript 文件提供資源服務(wù)的后端： 

代碼 

        rspadd Access-Control-Allow-Origin:\ *  

        在 <script> 中設(shè)置 crossorigin="anonymous"

在您的 HTML 代碼中，對(duì)于您設(shè)置了Access-Control-Allow-Origin header 的每個(gè)腳本，在 script 標(biāo)簽上設(shè)置crossorigin =“anonymous”。在腳本標(biāo)記中添加 crossorigin 屬性之前，請(qǐng)確保驗(yàn)證上述 header 正確發(fā)送。 在Firefox 中，如果存在crossorigin屬性，但Access-Control-Allow-Origin頭不存在，則腳本將不會(huì)執(zhí)行。 

5. TypeError: Object doesn’t support property

       這是您在調(diào)用未定義的方法時(shí)發(fā)生在 IE 中的錯(cuò)誤。 您可以在 IE 開(kāi)發(fā)者控制臺(tái)中進(jìn)行測(cè)試。

fcb1e309-0293-3836-a8e5-e6e361a28add.png

       這相當(dāng)于 Chrome 中的 “TypeError：”undefined“ is not a function” 錯(cuò)誤。 是的，對(duì)于相同的邏輯錯(cuò)誤，不同的瀏覽器可能具有不同的錯(cuò)誤消息。 
        對(duì)于使用 JavaScript 命名空間的 Web 應(yīng)用程序，這是一個(gè) IE l瀏覽器的常見(jiàn)的問(wèn)題。 在這種情況下，99.9％ 的原因是 IE 無(wú)法將當(dāng)前名稱(chēng)空間內(nèi)的方法綁定到 this 關(guān)鍵字。 例如：如果你 JS 中有一個(gè)命名空間 Rollbar 以及方法 isAwesome 。 通常，如果您在 Rollbar 命名空間內(nèi)，則可以使用以下語(yǔ)法調(diào)用isAwesome方法：
Javascript代碼 

this.isAwesome();  

        Chrome，F(xiàn)irefox 和 Opera 會(huì)欣然接受這個(gè)語(yǔ)法。 另一方面 IE，不會(huì)。 因此，使用 JS 命名空間時(shí)最安全的選擇是始終以實(shí)際名稱(chēng)空間作為前綴。

6. TypeError: ‘undefined’ is not a function
        當(dāng)您調(diào)用未定義的函數(shù)時(shí)，這是 Chrome 中產(chǎn)生的錯(cuò)誤。 您可以在 Chrome 開(kāi)發(fā)人員控制臺(tái)和 Mozilla Firefox 開(kāi)發(fā)人員控制臺(tái)中進(jìn)行測(cè)試。 63e43ce7-2048-3c44-9d80-3e8a27b71a56.png

       隨著 JavaScript 編碼技術(shù)和設(shè)計(jì)模式在過(guò)去幾年中變得越來(lái)越復(fù)雜，回調(diào)和關(guān)閉中的自引用范圍也相應(yīng)增加，這是這種/那種混淆的相當(dāng)常見(jiàn)的來(lái)源。
       考慮這個(gè)代碼片段：
Javascript代碼

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

執(zhí)行上面的代碼會(huì)導(dǎo)致以下錯(cuò)誤：“Uncaught TypeError：undefined is not a function”。 你得到上述錯(cuò)誤的原因是，當(dāng)你調(diào)用setTimeout()時(shí)，實(shí)際上是調(diào)用window.setTimeout()。 因此，在窗口對(duì)象的上下文中定義了一個(gè)傳遞給setTimeout()的匿名函數(shù)，該函數(shù)沒(méi)有clearBoard()方法。
一個(gè)傳統(tǒng)的，舊瀏覽器兼容的解決方案是簡(jiǎn)單地將您的 this 保存在一個(gè)變量，然后可以由閉包繼承。 例如：
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()方法傳遞適當(dāng)?shù)囊茫?
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 在一些情況下會(huì)發(fā)生的錯(cuò)誤。 一個(gè)是當(dāng)你調(diào)用一個(gè)不終止的遞歸函數(shù)。您可以在 Chrome 開(kāi)發(fā)者控制臺(tái)中進(jìn)行測(cè)試。

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

      此外，如果您將值傳遞給超出范圍的函數(shù)，也可能會(huì)發(fā)生這種情況。 許多函數(shù)只接受其輸入值的特定范圍的數(shù)字。 例如：Number.toExponential(digits) 和 Number.toFixed(digits) 接受 0 到 20 的數(shù)字，Number.toPrecision(digits) 接受 1 到 21 的數(shù)字。
 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 中發(fā)生的錯(cuò)誤，因?yàn)樽x取未定義變量的長(zhǎng)度屬性。 您可以在 Chrome 開(kāi)發(fā)者控制臺(tái)中進(jìn)行測(cè)試。
       您通常會(huì)在數(shù)組中找到定義的長(zhǎng)度，但是如果數(shù)組未初始化或者變量名稱(chēng)在另一個(gè)上下文中隱藏，則可能會(huì)遇到此錯(cuò)誤。讓我們用下面的例子來(lái)理解這個(gè)錯(cuò)誤。
Javascript代碼

var testArray = ["Test"];
function testFunction(testArray) {
    for (var i = 0; i < testArray.length; i++) {
      console.log(testArray[i]);
    }
}
testFunction(); 當(dāng)你用參數(shù)聲明一個(gè)函數(shù)時(shí)，這些參數(shù)變成了函數(shù)作用域內(nèi)的本地參數(shù)。這意味著即使你函數(shù)外有名為 testArray 的變量，在一個(gè)函數(shù)中具有相同名字的參數(shù)也會(huì)被視為本地參數(shù)。

        您有兩種方法可以解決您的問(wèn)題：
        1. 刪除函數(shù)聲明語(yǔ)句中的參數(shù)（事實(shí)上你想訪問(wèn)那些聲明在函數(shù)之外的變量，所以你不需要函數(shù)的參數(shù)）：

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. 用聲明的數(shù)組調(diào)用該函數(shù)：

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 
        當(dāng)我們嘗試訪問(wèn)一個(gè)未定義的變量時(shí)，它總是返回 undefined，我們不能獲取或設(shè)置任何未定義的屬性。 在這種情況下，應(yīng)用程序?qū)伋?“Uncaught TypeError: Cannot set property”。 
       如果測(cè)試對(duì)象不存在，錯(cuò)誤將會(huì)拋出 “Uncaught TypeErrorUncaught TypeError: Cannot set property”。
10. ReferenceError: event is not defined 
當(dāng)您嘗試訪問(wèn)未定義的變量或超出當(dāng)前范圍的變量時(shí)，會(huì)引發(fā)此錯(cuò)誤。
       如果在使用事件處理系統(tǒng)時(shí)遇到此錯(cuò)誤，請(qǐng)確保使用傳入的事件對(duì)象作為參數(shù)。像 IE 這樣的舊瀏覽器提供了一個(gè)全局變量事件，但并不是所有瀏覽器都支持。像 jQuery 這樣的庫(kù)試圖規(guī)范化這種行為。盡管如此，最好使用傳入事件處理函數(shù)的函數(shù)。
function myFunction(event) {
    event = event.which || event.keyCode;
    if(event.keyCode===13){
       alert(event.keyCode);
    }
}
結(jié)論 
        我們希望你學(xué)到了新的東西，可以避免將來(lái)的錯(cuò)誤，或者本指南幫助你解決了頭痛的問(wèn)題。 
        盡管如此，即使有最佳實(shí)踐，生產(chǎn)中也會(huì)出現(xiàn)意想不到的錯(cuò)誤。能夠查看影響用戶(hù)的錯(cuò)誤，并擁有快速解決問(wèn)題的好工具，這一點(diǎn)非常重要。

評(píng)論(0) 瀏覽(3168)

信息雜亂無(wú)章？教你構(gòu)建合理的視覺(jué)層次！

資深UI設(shè)計(jì)者

每天打開(kāi)手機(jī)，各式各樣的信息紛至沓來(lái)，每個(gè) App 每個(gè)頁(yè)面都有好多話要說(shuō)。當(dāng)信息匯集在一起的時(shí)候，如何能讓用戶(hù)一打開(kāi)頁(yè)面就能輕松理解各個(gè)信息元素之間的關(guān)系與差異呢？這就要靠我們?cè)O(shè)計(jì)師在設(shè)計(jì)之初構(gòu)建合理的視覺(jué)層次了。一個(gè)頁(yè)面的信息層級(jí)是不是清晰明了，很大程度上影響到用戶(hù)的信息獲取效率和使用體驗(yàn)。

在平面和網(wǎng)頁(yè)設(shè)計(jì)中，視覺(jué)層次一般分為三層：主層（Primary）、副層（Secondary）和三層（Tertiary）。其中主層一般是指頭條標(biāo)題等核心信息，也是要讓用戶(hù)第一眼就注意到的信息。副層可以是小標(biāo)題等信息，展示出主要內(nèi)容與提綱。最后的三層一般由正文或其他額外信息構(gòu)成，展示全部的內(nèi)容，可以用較小的字號(hào)。

△ 圖片來(lái)自網(wǎng)絡(luò)

不過(guò)當(dāng)我們?cè)谠O(shè)計(jì)移動(dòng)端頁(yè)面的時(shí)候，因?yàn)槠聊怀叽绲南拗?，有時(shí)候需要酌情減少頁(yè)面的層級(jí)，這樣才能讓信息不會(huì)過(guò)于繁雜。

一般一個(gè)頁(yè)面會(huì)根據(jù)功能分為多個(gè)模塊，下面我們就從「模塊內(nèi)」和「模塊之間」兩個(gè)角度來(lái)談?wù)勅绾螛?gòu)建合理的視覺(jué)層次。

一、一個(gè)模塊中的層次感

我們所說(shuō)的「模塊」指的是什么呢？可以是一張卡片里面的內(nèi)容，也可以是一個(gè)信息列表等等，總而言之是一個(gè)信息組。當(dāng)我們拿到需求的時(shí)候，應(yīng)該理解每個(gè)信息組里面的每條信息的價(jià)值，并且給他們分一個(gè)類(lèi)。

比如有時(shí)候，PM 同學(xué)跑過(guò)來(lái)說(shuō)：「我想加個(gè)大按鈕」，「不想讓用戶(hù)注意到刪除功能，但是一定要有」 ，或者「這次就想試一試，展示了這條信息點(diǎn)擊率會(huì)不會(huì)漲」 ，又或是「這條信息展不展示都行，你設(shè)計(jì)的時(shí)候自己看吧……」 好好好，需求我都懂，那么該如何分類(lèi)呢？

四象限法則相信大家都聽(tīng)說(shuō)過(guò)，那么我們就改編一下這個(gè)法則，給每個(gè)信息組中的信息按「重要——不重要」「必要——不必要」來(lái)分個(gè)類(lèi)吧。

面對(duì)又重要又必要的信息還等什么，一定要大要明顯，讓用戶(hù)第一眼看到。

重要卻不必要的信息，一般是從產(chǎn)品或流程本身來(lái)講不是一定要有的信息，但是因?yàn)槟撤N原因想要突顯給用戶(hù)，比如在信用卡的產(chǎn)品列表中加入每張卡的推薦理由，或者在餐廳列表中展示某某名人去過(guò)這家店……這些信息在列表中不是必須有的，但是對(duì)于引導(dǎo)用戶(hù)判斷又十分的重要，所以我們可以次一級(jí)的來(lái)展示，要讓用戶(hù)可以注意到，但也不能搶了風(fēng)頭。

哪種信息是必要但不重要的呢？比如一個(gè)活動(dòng)彈窗的關(guān)閉按鈕，一個(gè)訂單的刪除功能，一條免責(zé)聲明等等，我們不希望用戶(hù)注意到他們，但是這些功能又不得不存在，那么就要弱化展示這些信息。

不必要又不重要的信息，一般情況是要去掉的，除非在設(shè)計(jì)中信息太少了空蕩蕩的，為了排版美觀才會(huì)把這種邊緣信息留下占位。

接下來(lái)，當(dāng)我們整理好信息層級(jí)之后，要靠什么手段來(lái)展示這些層級(jí)呢？答案是加大對(duì)比。

1. 大小

對(duì)比的第一步就是大小的對(duì)比，在大家的認(rèn)知中，大的東西比小的東西更顯眼、更重要。用戶(hù)會(huì)自然而然地關(guān)注到尺寸較大的文本和尺寸較大的圖，比如下圖中一張足夠大的信用卡卡面圖片，一秒吸引目光。再比如頁(yè)面中的大標(biāo)題，都是這樣的效果。

△ 截圖來(lái)自查查公積金

在內(nèi)容列表中，標(biāo)題名字類(lèi)的信息一般會(huì)使用14-17dp左右，補(bǔ)充說(shuō)明內(nèi)容一般使用11-12dp左右，具體的使用情況要根據(jù)信息的多少、信息的重要程度、上下對(duì)比等情況來(lái)進(jìn)行具體的設(shè)計(jì)。

△ 圖片來(lái)自融360、微信

2. 重量

有時(shí)候由于空間的限制，字號(hào)不能再大了？字號(hào)大了也沒(méi)拉開(kāi)層次？試試增加字重量吧。iOS&Android 由于字體不同，加粗的效果也不同，請(qǐng)酌情增減。

3. 顏色

顏色對(duì)于用戶(hù)的感知有著巨大的影響。所以在進(jìn)行視覺(jué)層次構(gòu)建的時(shí)候，不同的顏色可以輕松構(gòu)成層次結(jié)構(gòu)，強(qiáng)烈的顏色比如紅色、橙色都很容易引人注意。白色和淺灰通?？梢杂脕?lái)作為大面積的背景色，和其他的顏色構(gòu)成對(duì)比。在設(shè)計(jì)的時(shí)候可以運(yùn)用 App 的主色和輔助色來(lái)拉開(kāi)視覺(jué)層次。

△ 圖片來(lái)自查查公積金、融360視覺(jué)規(guī)范

4. 對(duì)比

我們以上圖這個(gè)貸款列表舉一個(gè)綜合的例子，四條信息從最突出到最弱化分別標(biāo)為了1、2、3、4，這幾條信息中的字號(hào)以至少6px的差值進(jìn)行遞減，并且只有前兩條信息進(jìn)行了加粗處理，同時(shí)顏色的選擇上也是從強(qiáng)到弱：

大小、重量、顏色的運(yùn)用，歸根結(jié)底就是制造對(duì)比，這也是創(chuàng)建層次結(jié)構(gòu)依靠的核心。一個(gè)元素和另外一個(gè)元素構(gòu)成對(duì)比，才能有層次的展示他們之間重要程度上的差異，讓用戶(hù)更加容易獲取到信息。

二、模塊之間的層次感

當(dāng)我們已經(jīng)合理的排布了一個(gè)模塊內(nèi)的視覺(jué)層次，接下來(lái)要做的就是把多個(gè)模塊組合起來(lái)。

心理學(xué)家基于格式塔原理來(lái)檢測(cè)用戶(hù)對(duì)于元素之間關(guān)系的視覺(jué)感知，發(fā)現(xiàn)人們傾向于將視覺(jué)關(guān)系靠近的元素群視作為有關(guān)系的一組。值得說(shuō)明的是，位置接近的元素，即使色彩形狀大小都不一致，但只要他們足夠靠近，都會(huì)被人們視為一組。

△ 圖片來(lái)自網(wǎng)絡(luò)

視覺(jué)層次的建立很大程度上是基于格式塔原理，所以我們要關(guān)注 UI 元素之間的靠近性。

基于這種認(rèn)知，即使每個(gè)模塊之中的內(nèi)容有對(duì)比有強(qiáng)弱，但是只要每個(gè)信息組之間的元素的距離較近，并與其他信息組之間的距離拉遠(yuǎn)，留下足夠的留白空間，就可以清晰的將整個(gè)頁(yè)面的層次拉開(kāi)。留白和元素本身之間構(gòu)成的疏密對(duì)比，會(huì)更好的讓用戶(hù)注意到留白包圍下的內(nèi)容。

△ 圖片來(lái)自網(wǎng)絡(luò)

現(xiàn)在很多 App 都是通過(guò)對(duì)比與留白來(lái)進(jìn)行頁(yè)面中的「無(wú)形分割」，減少了很多線和塊的運(yùn)用，讓頁(yè)面更為簡(jiǎn)潔。基本上原則為：文字與圖片對(duì)齊，與相關(guān)內(nèi)容的間距要小于其他內(nèi)容，標(biāo)題要大。

△ 圖片來(lái)自 Airbnb

當(dāng)字體足夠大的時(shí)候，會(huì)比小字符更有「圖形感」，更加突出，可以更明確的告訴用戶(hù)從這里開(kāi)始是下一段了，字號(hào)一般在20-24dp之間，根據(jù)內(nèi)容和整體風(fēng)格來(lái)決定，顏色一般選擇比較深的顏色 ，必要的時(shí)候可以加粗。當(dāng)其他內(nèi)容都是比較小的文字的時(shí)候，欄目標(biāo)題也要控制一下大小。如果圖片較多，標(biāo)題就可以再大一些。

具體多大，就要在頁(yè)面和諧的基礎(chǔ)上多試幾次……

△ 圖片來(lái)自查查公積金

如上圖，在查查公積金 App 中，當(dāng)我們?cè)O(shè)計(jì)信用卡詳情頁(yè)的時(shí)候，由于整個(gè)頁(yè)面里圖形比較突出，看起來(lái)用加粗的「辦卡禮」、「專(zhuān)享特權(quán)」標(biāo)題更合適一些?？墒窃谕瑐€(gè) App 的公積金詳情頁(yè)里面，整個(gè)頁(yè)面用色都比較清淡，內(nèi)容都是一些文字信息，如果內(nèi)容標(biāo)題加粗的話會(huì)顯得比較突兀。所以綜合整個(gè) App 的頁(yè)面風(fēng)格權(quán)衡之后，還是選擇了左側(cè)沒(méi)有加粗字體的設(shè)計(jì)。

總體來(lái)講，UI 設(shè)計(jì)是沒(méi)有公式的，只能有經(jīng)驗(yàn)之談和大體上的建議，很多時(shí)候都要設(shè)計(jì)師一次次的去嘗試、去對(duì)比、去感受，才能給出針對(duì)當(dāng)下頁(yè)面需求最合理的層次構(gòu)建與解決方案。

評(píng)論(0) 瀏覽(3163)

如何設(shè)計(jì)表單錯(cuò)誤信息

資深UI設(shè)計(jì)者

本文中，我們會(huì)討論如何通過(guò)優(yōu)化錯(cuò)誤提示信息，來(lái)優(yōu)化UI表單的設(shè)計(jì)。

在UI界面的設(shè)計(jì)中，用戶(hù)的操作失誤不可避免，通過(guò)錯(cuò)誤提示將當(dāng)前狀態(tài)傳達(dá)給用戶(hù)，這種反饋機(jī)制可以幫助用戶(hù)及時(shí)作出調(diào)整并找到合理的解決方案。盡管錯(cuò)誤信息很常見(jiàn)，卻往往不被設(shè)計(jì)師重視。草草的處理錯(cuò)誤信息、制作邏輯混亂的錯(cuò)誤信息會(huì)使用戶(hù)感到沮喪，以致最終放棄你的應(yīng)用。相反，處理得當(dāng)?shù)腻e(cuò)誤提示，卻可以變失敗為驚喜。



一、表單中錯(cuò)誤信息的設(shè)計(jì)方案


用戶(hù)不喜歡表單，原因之一就是糾正輸入錯(cuò)誤信息的成本過(guò)高。如何讓用戶(hù)通過(guò)不同的報(bào)錯(cuò)信息提醒，繞過(guò)障礙順利完成表單，是讓用戶(hù)體驗(yàn)流暢順滑的關(guān)鍵所在。

糟糕的錯(cuò)誤信息在很大程度上是源自于用戶(hù)體驗(yàn)設(shè)計(jì)流程上的規(guī)劃失誤。為什么這么說(shuō)呢？在原型設(shè)計(jì)階段，用戶(hù)體驗(yàn)設(shè)計(jì)師就需要考慮到可能會(huì)出現(xiàn)的錯(cuò)誤，以及相應(yīng)的錯(cuò)誤反饋，確保用戶(hù)在報(bào)錯(cuò)信息的幫助下，最終能夠完成這個(gè)階段的任務(wù)，抵達(dá)他們的目標(biāo)。


1、在當(dāng)前頁(yè)面及時(shí)反饋


用戶(hù)并不喜歡填完一個(gè)長(zhǎng)表單并提交之后，才發(fā)現(xiàn)哪里填錯(cuò)了。在錯(cuò)誤出現(xiàn)之后，界面應(yīng)該在第一時(shí)刻將錯(cuò)誤信息呈現(xiàn)出來(lái)，用戶(hù)不必等到點(diǎn)擊提交按鈕才看到錯(cuò)誤，他們能更早改正錯(cuò)誤。

Image title


在上面兩個(gè)錯(cuò)誤信息呈現(xiàn)的案例當(dāng)中，第一個(gè)頁(yè)面使用了彈出框來(lái)呈現(xiàn)錯(cuò)誤信息，告知用戶(hù)需要填寫(xiě)詳細(xì)信息才能付款。用戶(hù)則需要關(guān)閉彈出框之后，再重新填寫(xiě)，這增加了額外的步驟。而用戶(hù)關(guān)閉彈出框之后再填寫(xiě)的時(shí)候，也有一定的機(jī)率會(huì)忘記彈出框的具體要求和內(nèi)容，導(dǎo)致無(wú)法正確填寫(xiě)。這種耗時(shí)又令人沮喪的用戶(hù)體驗(yàn)，用戶(hù)不會(huì)喜歡的。

正確的形式是直接在界面中呈現(xiàn)報(bào)錯(cuò)信息，并且報(bào)錯(cuò)信息緊貼著對(duì)應(yīng)的輸入框，以醒目的色彩在輸入框下方呈現(xiàn)，用戶(hù)能收到即時(shí)的反饋，也能清晰的標(biāo)注出所有的要求，便于用戶(hù)更正。


2、錯(cuò)誤信息的最佳位置


在制作表單時(shí)，你通常會(huì)把錯(cuò)誤信息放在哪里呢？如果錯(cuò)誤信息沒(méi)有放在用戶(hù)期望的位置，那么可能會(huì)影響完成表單的效果。

當(dāng)用戶(hù)犯錯(cuò)時(shí)，他們需要了解這些錯(cuò)誤是什么，以便他們能夠糾正錯(cuò)誤并重新提交表單。如果表單過(guò)于復(fù)雜填寫(xiě)困難，他們會(huì)改變主意。


◎頂部錯(cuò)誤提示vs行間錯(cuò)誤提示


錯(cuò)誤消息的兩個(gè)最常見(jiàn)的位置位于表單的頂部，和輸入框的行間。哪個(gè)位置對(duì)用戶(hù)來(lái)說(shuō)更直觀呢？

一項(xiàng)研究發(fā)現(xiàn)，在表單頂部顯示所有錯(cuò)誤消息會(huì)給用戶(hù)記憶造成較高的認(rèn)知負(fù)荷。這會(huì)強(qiáng)制用戶(hù)回憶每個(gè)錯(cuò)誤輸入框中的錯(cuò)誤消息。

Image title


減少用戶(hù)認(rèn)知負(fù)荷的方法是在輸入框行間顯示錯(cuò)誤信息。行間的錯(cuò)誤提示可以幫助當(dāng)場(chǎng)識(shí)別錯(cuò)誤而不是靠回憶錯(cuò)誤，這讓用戶(hù)可以更快更輕松地糾正錯(cuò)誤。

另一項(xiàng)研究發(fā)現(xiàn)“錯(cuò)誤字段和錯(cuò)誤信息之間的距離會(huì)影響錯(cuò)誤糾正的效率”。在表單的頂部和底部放置錯(cuò)誤信息時(shí)用戶(hù)反應(yīng)更正的時(shí)間最長(zhǎng)，而行間錯(cuò)誤信息可以縮短反應(yīng)時(shí)間。

在表單的頂部和底部放置錯(cuò)誤信息，也導(dǎo)致用戶(hù)錯(cuò)誤率最高，完成時(shí)間最長(zhǎng)，滿(mǎn)意度。和頂部、行間錯(cuò)誤信息相比，底部錯(cuò)誤信息的糾錯(cuò)成功率。


◎用戶(hù)更偏愛(ài)的錯(cuò)誤信息位置


該研究證明，將錯(cuò)誤信息與錯(cuò)誤的字段鄰近放置可以獲得最佳性能，并且指出了最直觀的顯示位置。

Image title


調(diào)研中讓用戶(hù)來(lái)選擇把錯(cuò)誤提示放在上圖的哪個(gè)位置更滿(mǎn)意，更多的用戶(hù)喜歡輸入框右邊的錯(cuò)誤提示位置。

位于輸入框左側(cè)的錯(cuò)誤信息位置被評(píng)為最差。對(duì)話框上面的位置導(dǎo)致了最高的認(rèn)知負(fù)荷，隨后是字段之下的錯(cuò)誤消息。


◎?yàn)槭裁从覀?cè)的位置是最好的


理解為什么用戶(hù)更偏愛(ài)將錯(cuò)誤消息放置在字段右側(cè)是很重要的。通過(guò)這種方式，設(shè)計(jì)師可以更好地向其他人介紹在制定設(shè)計(jì)方案時(shí)用戶(hù)的行為偏好。

Image title


西方的閱讀習(xí)慣是從左到右的。當(dāng)用戶(hù)的視線從輸入框移動(dòng)到錯(cuò)誤消息時(shí)，感覺(jué)就像一個(gè)自然的過(guò)程，需要很少的精力和視覺(jué)工作。將他們的眼睛從錯(cuò)誤消息移回輸入框以進(jìn)行糾正也遵循重新讀取文本的自然流程。


◎?yàn)槭裁醋髠?cè)的位置是最差的


將錯(cuò)誤消息放在輸入框的左邊，違背了西方的閱讀習(xí)慣。當(dāng)出現(xiàn)錯(cuò)誤提示時(shí)，用戶(hù)的視線朝著與自然閱讀流程相反的方向移動(dòng)。這種方式很不自然，有悖于用戶(hù)習(xí)慣，并且在用戶(hù)調(diào)研中得到了證實(shí)。

Image title


這樣的排布也與我們的直覺(jué)相反，因?yàn)橛脩?hù)期望在左側(cè)放置有更高優(yōu)先級(jí)的元素。將錯(cuò)誤消息放置在左側(cè)意味著它比要輸入的字段更重要。但事實(shí)上用戶(hù)需要專(zhuān)注于糾正他們的輸入，因此輸入框應(yīng)該是更重要的元素。


◎上側(cè)的位置為什么會(huì)增加用戶(hù)的認(rèn)知負(fù)荷


用戶(hù)對(duì)輸入框上面的錯(cuò)誤提示有著更高的認(rèn)知負(fù)荷（例如表格頂部對(duì)齊的標(biāo)簽）。這是因?yàn)橛脩?hù)會(huì)把錯(cuò)誤提示和輸入框中的提示文案混淆。

Image title


這兩個(gè)文本靠得很近會(huì)產(chǎn)生視覺(jué)噪音，在用戶(hù)嘗試讀取錯(cuò)誤消息或輸入框的提示標(biāo)簽時(shí)分散注意力。他們看到兩段文案卻很難專(zhuān)注于其中一個(gè)，并且可能混淆它們。


◎移動(dòng)設(shè)備上表單的最佳錯(cuò)誤信息位置


手機(jī)屏幕缺少水平空間來(lái)并排顯示錯(cuò)誤消息和標(biāo)簽文案。這意味著把錯(cuò)誤信息放在右側(cè)不是移動(dòng)表單上的最佳位置。

Image title


對(duì)于移動(dòng)設(shè)備，更好的方式是請(qǐng)將錯(cuò)誤信息放置在輸入框下方。這是該研究中用戶(hù)第二最喜歡的位置。雖然它不符合用戶(hù)自然的從左到右的閱讀流程，但它確實(shí)與自然的從上到下的閱讀流程相對(duì)應(yīng)。

當(dāng)用戶(hù)閱讀文本時(shí)，他們習(xí)慣將視線從頁(yè)面的左側(cè)移動(dòng)到右側(cè)。錯(cuò)誤信息低于輸入框，使它遵循垂直閱讀過(guò)程。

將錯(cuò)誤消息放置得太靠近下面的字段標(biāo)簽時(shí)，可能會(huì)增加用戶(hù)閱讀文本時(shí)的認(rèn)知負(fù)荷。你可以通過(guò)將它們隔開(kāi)足夠的間隔來(lái)防止這種情況。


◎右邊還是下邊，哪個(gè)是最好的位置？


錯(cuò)誤消息的最佳位置在輸入框的右側(cè)和下方。但是你應(yīng)該使用哪個(gè)位置？這取決于你有多少時(shí)間來(lái)實(shí)現(xiàn)。

如果你用來(lái)實(shí)現(xiàn)web端和app端的時(shí)間有限，可以選擇在下方放置錯(cuò)誤信息。在web端實(shí)現(xiàn)后，方便在app端進(jìn)行適配。

如果你有足夠的開(kāi)發(fā)時(shí)間，在web端請(qǐng)選擇輸入框的右側(cè)，而移動(dòng)端考慮放在輸入框的下面。這樣不僅可以提供比較好的用戶(hù)瀏覽體驗(yàn)，還能縮短表單的長(zhǎng)度。


3、在視覺(jué)上要足夠突出


如果出錯(cuò)之后，用戶(hù)無(wú)法迅速注意到報(bào)錯(cuò)信息，這不僅僅浪費(fèi)了時(shí)間，也耽誤了事情。正如 Jakbo Nielsen 所說(shuō)：“最糟糕的報(bào)錯(cuò)信息是那些對(duì)用戶(hù)而言根本看不到的報(bào)錯(cuò)信息?！比欢?，難點(diǎn)也就在這個(gè)地方，加粗字體和彈出框?qū)τ谟脩?hù)而言過(guò)于具有壓迫感，那么你要如何確保信息能被用戶(hù)注意到又不會(huì)顯得太過(guò)呢？不難，使用正確的色彩來(lái)輔助顯示。

Image title


色彩是用戶(hù)識(shí)別信息的重要途徑，它也是設(shè)計(jì)師向用戶(hù)傳遞信息的可靠工具。出于對(duì)比的目的，在白色的背景下，使用紅色的錯(cuò)誤提示信息，會(huì)足夠醒目，又不會(huì)太過(guò)喧賓奪主。在某些情況下，紅色對(duì)用戶(hù)的壓力較大，也可以使用黃色或橙色來(lái)作為錯(cuò)誤提示。在這兩種情況下，請(qǐng)確保錯(cuò)誤文本清晰可辨，且與其背景的顏色有顯著的對(duì)比。

Image title


值得注意的是，色彩不應(yīng)該是報(bào)錯(cuò)信息呈現(xiàn)的唯一標(biāo)準(zhǔn)。考慮到網(wǎng)頁(yè)和移動(dòng)端應(yīng)用本身的可用性和可訪問(wèn)性，設(shè)計(jì)師應(yīng)該考慮到色盲用戶(hù)的需求，提供色彩以外的視覺(jué)提示，例如錯(cuò)誤icon等，確保他們也可以看明白。


二、注意錯(cuò)誤信息的文案推敲


從某種程度上，你能把上面幾條做好，你的報(bào)錯(cuò)信息在美學(xué)特征和體驗(yàn)上就沒(méi)有太多問(wèn)題了。不過(guò)，要想設(shè)計(jì)最佳體驗(yàn)的錯(cuò)誤信息，文案的重要性也是顯而易見(jiàn)的，需要在言簡(jiǎn)意賅的同時(shí)友好地幫助用戶(hù)解決問(wèn)題。

10條可用性啟迪（經(jīng)典的尼爾森十大可用性原則）中建議，要清晰優(yōu)雅地表達(dá)出錯(cuò)誤信息。有效的錯(cuò)誤提示應(yīng)該提供如下信息：

明確表達(dá)發(fā)生了什么
描述用戶(hù)應(yīng)該如何應(yīng)對(duì)
盡可能多地保留用戶(hù)輸入的信息


下面是文案設(shè)計(jì)的幾個(gè)小技巧。


1、確保錯(cuò)誤信息是可理解的


把你的錯(cuò)誤信息視為與用戶(hù)的對(duì)話——讓它聽(tīng)起來(lái)像是為人類(lèi)編寫(xiě)的。確保你的錯(cuò)誤信息是有禮貌，可理解的，而不是錯(cuò)誤代碼和數(shù)據(jù)（諸如出現(xiàn)了錯(cuò)誤43這樣的信息）。

Image title



2、清晰明確的指出錯(cuò)誤


一些電子郵件的網(wǎng)站會(huì)在所有的錯(cuò)誤場(chǎng)景使用同一個(gè)錯(cuò)誤提示，如下圖。你不能只是簡(jiǎn)單的提示用戶(hù)“輸入有效的電子郵件地址”，而應(yīng)針對(duì)用戶(hù)的問(wèn)題明確的指出錯(cuò)誤所在，例如“缺少@字符”等。而MailChimp則以另一種方式來(lái)判斷錯(cuò)誤——他們對(duì)于每個(gè)電子郵件的驗(yàn)證包含3個(gè)錯(cuò)誤信息：檢查輸入字段是否為空、是否有“@”字符、是否有“.”字符。針對(duì)用戶(hù)輸入的錯(cuò)誤方式會(huì)提供相應(yīng)的提示文案。

Image title



3、提供解決方案


錯(cuò)誤信息應(yīng)該明確定義問(wèn)題是什么，為什么會(huì)發(fā)生，以及如何處理。只寫(xiě)出錯(cuò)誤是不夠的。應(yīng)該向用戶(hù)盡可能簡(jiǎn)單的展示如何盡快解決問(wèn)題。

Image title


例如，Microsoft描述錯(cuò)誤并在錯(cuò)誤消息中提供解決方案，以便用戶(hù)可以立即解決此問(wèn)題。

正如同Jonathan Colman 所說(shuō)，正確的報(bào)錯(cuò)信息通常使用簡(jiǎn)明而清晰的文字，而失敗的報(bào)錯(cuò)信息通常不會(huì)提供關(guān)于錯(cuò)誤發(fā)生的具體狀況以及解決方案，更丑陋的做法是將錯(cuò)誤信息完全隱藏起來(lái)。

下面的設(shè)計(jì)，就是很明顯的對(duì)比：

Image title



4. 錯(cuò)誤信息應(yīng)該禮貌


不要責(zé)怪你的用戶(hù)，即使他們做錯(cuò)了。對(duì)用戶(hù)要有禮貌，讓他們感到舒適隨和?？梢允褂媚愕钠放坡曇簦瑏?lái)添加個(gè)性化的錯(cuò)誤提示。

Image title



5. 如果恰當(dāng)盡可能地幽默


在你的錯(cuò)誤信息中小心使用幽默。首先，錯(cuò)誤信息應(yīng)該是提供信息和幫助。如果適合，在錯(cuò)誤消息中添加一些幽默，可以改善用戶(hù)體驗(yàn)。

Image title



三、如何有效的預(yù)防錯(cuò)誤


設(shè)計(jì)過(guò)app的同學(xué)，應(yīng)該很熟悉各種限制條件。例如網(wǎng)絡(luò)狀況差的情況下，很難填寫(xiě)表單，而且?guī)缀鯖](méi)法同步數(shù)據(jù)。要考慮到這些限制，設(shè)計(jì)更易使用的app，將錯(cuò)誤減到最少。換句話說(shuō)，應(yīng)該提供建議、加上限制、保持靈活，第一時(shí)間預(yù)防用戶(hù)犯錯(cuò)。

Twitter因推文的字?jǐn)?shù)限制而出名，他們會(huì)在用戶(hù)達(dá)到字?jǐn)?shù)上限之前提出警示。

Image title



結(jié)語(yǔ)


從不出現(xiàn)的錯(cuò)誤信息才是最好的。最佳方式是引導(dǎo)用戶(hù)向正確方向前進(jìn)，第一時(shí)間預(yù)防錯(cuò)誤發(fā)生。但當(dāng)錯(cuò)誤確實(shí)發(fā)生時(shí)，設(shè)計(jì)精良的錯(cuò)誤處理，不僅能教育用戶(hù)按你預(yù)期的方式使用app，還能防止用戶(hù)感到茫然。在設(shè)計(jì)錯(cuò)誤信息時(shí)應(yīng)遵循以上的方法，好的體驗(yàn)讓用戶(hù)可以以最小的工作量和最少的思考，快速完成表單，讓他們可以有時(shí)間來(lái)完成他們真正想要做的事情。

評(píng)論(0) 瀏覽(3467)

Echarts x軸文本內(nèi)容太長(zhǎng)的幾種解決方案

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

Echarts 標(biāo)簽中文本內(nèi)容太長(zhǎng)的時(shí)候怎么辦 ? 
- 1對(duì)文本進(jìn)行傾斜 
在xAxis.axisLabe中修改rotate的值 

 xAxis: {
            data: ["襯衫11111","羊毛二二","雪紡衫111","褲子111","高跟鞋11","襪子111"],//x軸中的數(shù)據(jù) name:"123",//坐標(biāo)軸名稱(chēng)。 nameLocation:'end',//坐標(biāo)軸名稱(chēng)顯示位置。 axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。 interval:0, rotate:"45" }
        },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

interval

坐標(biāo)軸刻度標(biāo)簽的顯示間隔(在類(lèi)目軸中有效哦)，默認(rèn)會(huì)采用標(biāo)簽不重疊的方式顯示標(biāo)簽（也就是默認(rèn)會(huì)將部分文字顯示不全） 
可以設(shè)置為0強(qiáng)制顯示所有標(biāo)簽，如果設(shè)置為1，表示隔一個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽，如果為3，表示隔3個(gè)標(biāo)簽顯示一個(gè)標(biāo)簽，以此類(lèi)推

一開(kāi)始我沒(méi)設(shè)置 因?yàn)闃?biāo)簽文本過(guò)長(zhǎng)的原因他就自動(dòng)不顯示全部 
image.png

被遮擋住就讓grid 組件離容器向上移動(dòng) 把grid中的bottom的值調(diào)大一些 

 grid:{//直角坐標(biāo)系內(nèi)繪圖網(wǎng)格 show:true,//是否顯示直角坐標(biāo)系網(wǎng)格。[ default: false ] left:"20%",//grid 組件離容器左側(cè)的距離。 right:"30px",
            borderColor:"#c45455",//網(wǎng)格的邊框顏色 bottom:"20%" // },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

image.png 
- 2.換行顯示 
在xAxis.axisLabel中 使用formatter回調(diào)函數(shù)實(shí)現(xiàn)換行 

 axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。 formatter : function(params){ var newParamsName = "";// 最終拼接成的字符串 var paramsNameNumber = params.length;// 實(shí)際標(biāo)簽的個(gè)數(shù) var provideNumber = 4;// 每行能顯示的字的個(gè)數(shù) var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 換行的話，需要顯示幾行，向上取整 /**
                             * 判斷標(biāo)簽的個(gè)數(shù)是否大于規(guī)定的個(gè)數(shù)， 如果大于，則進(jìn)行換行處理 如果不大于，即等于或小于，就返回原標(biāo)簽
                             */ // 條件等同于rowNumber>1 if (paramsNameNumber > provideNumber) { /** 循環(huán)每一行,p表示行 */ for (var p = 0; p < rowNumber; p++) { var tempStr = "";// 表示每一次截取的字符串 var start = p * provideNumber;// 開(kāi)始截取的位置 var end = start + provideNumber;// 結(jié)束截取的位置 // 此處特殊處理最后一行的索引值 if (p == rowNumber - 1) { // 最后一次不換行 tempStr = params.substring(start, paramsNameNumber);
                                    } else { // 每一次拼接字符串并換行 tempStr = params.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;// 最終拼成的字符串 }

                            } else { // 將舊標(biāo)簽的值賦給新標(biāo)簽 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.文字豎直顯示 
    同樣和換行一個(gè)道理,只是這個(gè)是單個(gè)文字換行 
    在xAxis.axisLabel中 使用formatter回調(diào)函數(shù)實(shí)現(xiàn)換行 
axisLabel: { interval: 0,  
                               formatter:function(value) {  
                                   return value.split("").join("\n"); } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

image.png

  • 4.隔一個(gè)換行 
    在xAxis.axisLabel中 使用formatter回調(diào)函數(shù)實(shí)現(xiàn)換行 
axisLabel : {//坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置。 clickable:true,//并給圖表添加單擊事件  根據(jù)返回值判斷點(diǎn)擊的是哪里 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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(3939)

利用 CSS 變量實(shí)現(xiàn)令人震驚的懸浮效果

周周

這個(gè)動(dòng)畫(huà)是將鼠標(biāo)移動(dòng)到訂閱按鈕上移動(dòng)光標(biāo)會(huì)顯示相應(yīng)的彩色漸變。這個(gè)想法很簡(jiǎn)單，但是它能使這個(gè)按鈕脫穎而出，人們一下子就注意到它了，增加了點(diǎn)擊的概率。

171422eli2zvv3zq2eq2mu.gif

那么如何使用CSS實(shí)現(xiàn)這個(gè)效果？

追蹤位置

我們要做的第一件事就是獲取到鼠標(biāo)的位置。

  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.選擇元素，等待，直到用戶(hù)將鼠標(biāo)移過(guò)它；
   2.計(jì)算相對(duì)于元素的位置；
   3.將坐標(biāo)存在CSS的變量中。

動(dòng)畫(huà)漸變
  .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;
      }

   }

結(jié)果
成功啦！將其加入到對(duì)于的HTML頁(yè)面，你炫酷的按鈕就可以使用啦！

評(píng)論(0) 瀏覽(3474)

設(shè)計(jì)方法：用問(wèn)題引出答案，群策群力繪制用戶(hù)體驗(yàn)地圖

藍(lán)藍(lán)設(shè)計(jì)的小編

周五參加了港大space學(xué)院的工作坊，感謝Google張英惠老師的精彩授課，學(xué)到了通過(guò)發(fā)問(wèn)找到解決問(wèn)題的方法，群策群力繪制用戶(hù)體驗(yàn)地圖。IMG_20170922_152217.jpg

評(píng)論(0) 瀏覽(5476)

怎么制作微信小程序的旋轉(zhuǎn)動(dòng)畫(huà)？

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

微信小程序被給予的能量是無(wú)窮的，在小程序發(fā)展逐漸成熟的當(dāng)下，小程序開(kāi)發(fā)能實(shí)現(xiàn)的需求越來(lái)越完善。最近小程序中有一個(gè)圖片旋轉(zhuǎn)的需求，在微信小程序上是可以通過(guò)切換多張圖片達(dá)到旋轉(zhuǎn)的效果，但微信小程序自帶的API中帶有這么一個(gè)動(dòng)畫(huà)組件，因此小程序制作旋轉(zhuǎn)動(dòng)畫(huà)可以使用image+Animation來(lái)實(shí)現(xiàn)。

首先在wxml中定義image

注意其中的animation屬性，image就由它來(lái)實(shí)現(xiàn)動(dòng)畫(huà)。

而{{animation}}我們?cè)趈s的data中定義

data: {

animation: \'\'

},

相關(guān)代碼

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\'

})

},

/**

* 實(shí)現(xiàn)image旋轉(zhuǎn)動(dòng)畫(huà)，每次旋轉(zhuǎn) 120*n度

*/

rotateAni: function (n){

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

this.setData({

animation:_animation.export()

})

},

/**

* 開(kāi)始旋轉(zhuǎn)

*/

startAnimationInterval:function () {

var that = this;

that.rotateAni(++_loadImagePathIndex); // 進(jìn)行一次旋轉(zhuǎn)

_animationIntervalId =setInterval(function () {

that.rotateAni(++_loadImagePathIndex);

},  _ANIMATION_TIME); // 沒(méi)間隔_ANIMATION_TIME進(jìn)行一次旋轉(zhuǎn)

},

/**

* 停止旋轉(zhuǎn)

*/

stopAnimationInterval:function () {

if (_animationIntervalId> 0) {

clearInterval(_animationIntervalId);

_animationIntervalId= 0;

}

},

}

微信自帶的Animation可以實(shí)現(xiàn)一次動(dòng)畫(huà)，然后可以通過(guò)setInterval來(lái)達(dá)到不斷旋轉(zhuǎn)的目的，在使用時(shí)，控制startAnimationInterval和stopAnimationInterval即可。


微信小程序怎么制作旋轉(zhuǎn)動(dòng)畫(huà)

微信小程序視頻教程，盡在即速學(xué)院。


在使用animation時(shí)，會(huì)發(fā)現(xiàn)有時(shí)候出現(xiàn)旋轉(zhuǎn)速度很快或者反向旋轉(zhuǎn)再正向旋轉(zhuǎn)的清空，這都是由于rotate的值設(shè)置有問(wèn)題。

1、rotate的值應(yīng)該是上一次結(jié)束時(shí)的值，

2、如果設(shè)置了全局變量，記得在oncreate時(shí)初始化，不然第二次打開(kāi)同一頁(yè)面會(huì)有問(wèn)題。

注意事項(xiàng)：

這里為什么不直接給_animation.rotate(120 * (n)).step()設(shè)置一個(gè)足夠大的值，原因有兩點(diǎn)：

1、我們需要便利的控制開(kāi)始和停止，

2、animation在小程序進(jìn)入后臺(tái)后，會(huì)持續(xù)運(yùn)行，占用手機(jī)內(nèi)存和cpu，而小程序依賴(lài)于微信，在iphone上會(huì)導(dǎo)致微信被終止運(yùn)行

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(4151)

氛圍獨(dú)特情緒深沉的深色系網(wǎng)站，設(shè)計(jì)上有什么講究？

博博

在設(shè)計(jì)中，情緒的傳達(dá)和氛圍的營(yíng)造通常是要看設(shè)計(jì)項(xiàng)目的目的是什么，而不同的配色和不同的元素組合，往往能夠呈現(xiàn)出截然不同的風(fēng)貌。相比之下，深色系網(wǎng)站常常會(huì)呈現(xiàn)出更為獨(dú)特的氛圍，傳達(dá)出更為復(fù)雜多樣的情緒。雖然這樣的情緒并不一定是正面和向上的，但是好設(shè)計(jì)總歸是讓人過(guò)目難忘的。

想要借助深沉的色調(diào)來(lái)創(chuàng)造情緒相對(duì)獨(dú)特的網(wǎng)站設(shè)計(jì)，是有一些可供遵循的常見(jiàn)的設(shè)計(jì)技巧，今天的文章，我們來(lái)分享一下這方面的內(nèi)容。

深色，并不定是黑色

首先這一點(diǎn)必須明確，深色并不一定是黑色。

在選取配色的時(shí)候，網(wǎng)明亮的色彩當(dāng)中添加黑色或者灰色所得出的色彩，通常會(huì)顯得更加深沉濃重，這樣的色彩中往往會(huì)包含之前的色調(diào)。

在上面的 Hooligan 這個(gè)網(wǎng)站當(dāng)中，設(shè)計(jì)師不僅采用了深沉的黑色背景，而且采用了和黑色背景相當(dāng)匹配的暗金色，兩種深色之間色彩明暗依然存在對(duì)比，和白色的標(biāo)題文本構(gòu)成了三個(gè)層次，不僅富有視覺(jué)吸引力，而且創(chuàng)造出了沉穩(wěn)厚重的氛圍。

陰影的使用

陰影和光線往往是相伴出現(xiàn)的，而陰影所帶來(lái)的舞臺(tái)劇般的效果則充滿(mǎn)了戲劇感和神秘感，這也是設(shè)計(jì)師喜歡它的原因，這樣的設(shè)計(jì)會(huì)讓用戶(hù)心中產(chǎn)生興趣和好奇心。

在上面的 Clear Motion 這個(gè)網(wǎng)站當(dāng)中，車(chē)輛周?chē)魂幱八鼑?，文本?nèi)容很容易吸引用戶(hù)的注意力。同時(shí)，用戶(hù)會(huì)好奇這輛車(chē)有什么特殊的地方，有什么地方看起來(lái)不太一樣，黑暗的氛圍下，用戶(hù)的好奇心會(huì)身不由己地高漲起來(lái)。

黑色疊加層

用黑色的半透明層疊加到圖像上，也是制造深色系背景的一種常見(jiàn)手法。在圖片的選取和不同的透明度之下，背景圖片所呈現(xiàn)出來(lái)的效果和氛圍，是非常不同的。

透明度較低的情況下，黑色疊加圖層會(huì)讓用戶(hù)看不清背景中的信息，這使得背景信息在整個(gè)設(shè)計(jì)中參與度較低。透明度較高的情況下，更多的背景元素會(huì)透過(guò)疊加層呈現(xiàn)出來(lái)，和前景元素產(chǎn)生交叉和互動(dòng)。但是總的來(lái)說(shuō)，黑色疊加層讓元素之間產(chǎn)生對(duì)比，也使得行為召喚元素更容易發(fā)揮作用。

在上面的 Fhoke 這個(gè)網(wǎng)站當(dāng)中，透明疊加層讓背景中的場(chǎng)景適當(dāng)?shù)赝嘎兑稽c(diǎn)出來(lái)，但是真正吸引人注意力的，還是在標(biāo)題和左側(cè)的行為指引上。

簡(jiǎn)陋的畫(huà)布

細(xì)節(jié)較多的背景讓人覺(jué)得信息豐富，而粗陋的畫(huà)布則更容易創(chuàng)造出一種虛無(wú)的感覺(jué)，相應(yīng)的，后者是會(huì)讓人更有探索的欲望。粗陋甚至赤裸的深色系畫(huà)布很好地將神秘感和探索的欲望結(jié)合到了一起。

Dubois 這個(gè)網(wǎng)站的背景同樣非常的簡(jiǎn)單，沒(méi)有紋理，只是通過(guò)均勻分布的小圓點(diǎn)來(lái)進(jìn)行裝飾，如果你仔細(xì)觀察會(huì)發(fā)現(xiàn)這些點(diǎn)的分布、色彩其實(shí)是有微妙變化的，會(huì)引導(dǎo)你去注意位于整個(gè)頁(yè)面底部的文本標(biāo)題，雖然絕大多數(shù)的網(wǎng)站并不會(huì)把標(biāo)題放在這樣的位置上。

字體的選取

Punk is Not Dead 這個(gè)網(wǎng)站給你的感覺(jué)是否很獨(dú)特？網(wǎng)站的設(shè)計(jì)非常清晰，識(shí)別度極高，網(wǎng)站本身還有音頻組件，它的設(shè)計(jì)從視頻到音頻一應(yīng)俱全，整體充滿(mǎn)了朋克的風(fēng)格。

黑暗的背景和明亮的字體色彩有助于實(shí)現(xiàn)這樣的效果，但是字體的選取才是最關(guān)鍵的。想象一下使用普通的字體，是完全達(dá)不到這樣的效果。尖銳粗糙的邊緣和并不那么友好的可讀性，讓他在視覺(jué)上和朋克的精神保持了一致。

黑白配色

當(dāng)設(shè)計(jì)完全失去色彩，僅僅保留黑白兩色的情況下，會(huì)給人什么樣的感覺(jué)呢？如果整個(gè)設(shè)計(jì)是以黑白兩色為主，搭配少量其他的顏色，體驗(yàn)和氛圍又是什么樣的呢？

黑白配色和純黑為主的配色一樣，很容易創(chuàng)造出戲劇化的效果，這兩種色彩本身所構(gòu)成的沖突和對(duì)比就是原因。

黑白的強(qiáng)烈對(duì)比，常常會(huì)促使訪客在瀏覽過(guò)程中忙于注意不同的細(xì)節(jié)，面對(duì) Super Rebel 這個(gè)網(wǎng)站的時(shí)候，這種感覺(jué)就非常明顯。打開(kāi)頁(yè)面之后，注意力會(huì)迅速被右上角的圖片吸引，隨后便忍不住把對(duì)比強(qiáng)烈的所有模塊都掃視一遍。黑白色搭配大量信息很容易創(chuàng)造出信息過(guò)載的效果和體驗(yàn)。

圖片的選取

Jimmy Chin 在他的作品集網(wǎng)站的「關(guān)于」頁(yè)面當(dāng)中，他將自己的照片直接放了進(jìn)去，色彩采用了單純的黑色。

色彩的明暗和飽和度的選取，直接影響著整個(gè)設(shè)計(jì)的情緒，在這里，單純的黑色讓整個(gè)頁(yè)面的形式感更強(qiáng)，而所呈現(xiàn)出來(lái)的感覺(jué)也非常的銳利。想想看，他穿著黃色的襯衫和綠色的褲子，那么整個(gè)圖片所呈現(xiàn)出來(lái)的感覺(jué)是完全不同的，浮夸而醒目。

圖片的選取對(duì)于情緒的表達(dá)和氛圍的營(yíng)造有著巨大的影響。

也可以營(yíng)造輕松的氛圍

許多深色系的網(wǎng)站都給人以深沉、怪異的感覺(jué)，但是深色并不完全代表著負(fù)面的情緒。深色系的網(wǎng)站同樣可以被設(shè)計(jì)得輕松而富有活力，這主要取決于你如何將元素組合到一起。

在 Atom 這個(gè)網(wǎng)站當(dāng)中，整個(gè)背景都采用了典型的深灰，但是卡通角色和輕盈的色調(diào)讓網(wǎng)站凸顯出一種可愛(ài)而有趣的感覺(jué)。這樣的設(shè)計(jì)也能帶來(lái)視覺(jué)奇觀，并且不會(huì)讓用戶(hù)感覺(jué)到負(fù)面的感受。

這種設(shè)計(jì)讓用戶(hù)和網(wǎng)站之間的情感聯(lián)系更輕松，讓服務(wù)更容易為用戶(hù)所接受。

結(jié)語(yǔ)

那些帶有負(fù)面情緒和獨(dú)特氛圍的網(wǎng)站，你喜歡嗎？帶有這樣情緒和氛圍的網(wǎng)站，需要設(shè)計(jì)師花費(fèi)更多的時(shí)間和精力來(lái)拿捏程度，來(lái)達(dá)成相應(yīng)的設(shè)計(jì)目標(biāo)，而且這樣的設(shè)計(jì)并非不好。情緒化的設(shè)計(jì)，有趣而神秘的氛圍，帶有負(fù)面情感的表達(dá)，躁動(dòng)甚至暴躁的設(shè)計(jì)，這些都有其獨(dú)特的作用。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


評(píng)論(0) 瀏覽(3124)

日歷

鏈接

個(gè)人資料

存檔