整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者：老姚，《JS正則迷你書》的作者 https://github.com/qdlaoyao/css-gif
本文的每一條，都是我曾經發過的掘金沸點，其中有很多條超過了百贊（竊喜）。鑒于時不時有童鞋翻我以前的沸點，因此，本文收集了個人目前發過的所有CSS知識點動圖，以便閱讀。
需要說明的是，順序仍是按當時發布順序羅列的，還沒有系統的總結，多多包涵。另外這里，老姚謝謝各位一如既往的支持。
希望有所幫助。
也歡迎閱讀本人的《JS正則迷你書》
本文完。
《JS正則迷你書》(https://github.com/qdlaoyao/js-regex-mini-book)
希望有所幫助。
們如何在保證實現功能性需求的同時又可以讓產品更好用好看呢？驚喜往往存在于被忽視的點上，這篇文章我就來給大家談談經常被我們忽視的模糊效果（Blur Effects）。
簡化操作流程
模糊效果可以讓不同層級的功能與內容出現在同一個頁面中，特別是對于一些內容比較繁雜、功能比較多的app來說，模糊效果可以簡化操作流程，減少用戶的學習成本。
例如雅虎天氣這個應用，對于不同的天氣會配有不同的圖片。基本的天氣數據會出現在頁面中，如果你想知道更多詳細的天氣信息（比如濕度，風速，氣壓，日出時間，日落時間等），只要點擊一下就能看到。
用戶想獲取的任何信息都可以出現在當前頁面中，不需要重新打開新頁面。這種設計對于用戶來說很具有誘惑力。
吸引用戶注意力
人總是會不由自主的被那些對焦準確的部分吸引而忽視掉被虛化的部分。眼球的對焦機制好像一個調節器一樣捕捉那些離你忽遠忽近的物體，這樣才能讓你感受到周圍一切事物的深度和距離。這就是我們人眼的工作機制。設計師可以根據這個理論將界面中一些不重要的內容進行模糊處理來凸顯那些重要的內容。
TweetBot就通過模糊功能來引導用戶的視線。在TweetBot界面中背景是被完全虛化處理的，根本無法看清。這樣用戶的注意力自然而然的被吸引到賬號信息和行為召喚按鈕了。
良好的裝飾效果
將模糊效果處理的圖片作為頁面背景對于設計師來說是一個不錯的選擇。簡潔而又美觀。
下圖中的Trellie農場網站就使用了模糊處理的農場照片作為背景，首先給用戶對農村一個大體上的認識。但是農場長什么樣不是設計師希望用戶注意的。他們希望用戶關注的是那句廣告語：Family Owned Farm&Garden Store。為了進一步的吸引用戶的目光，設計師還使用了藝術字體。
優化圖片加載過程
隨著網速的不斷提升，這給網頁中加載更多的圖片提供了一個契機。如何優化網頁中圖片的加載過程也成為了設計師的一項新課題。Medium.com給我們提供了一個很好的范例：當用戶進入一個新頁面，正在加載中的圖片會以一種模糊效果展示給用戶。圖片會在加載過程中逐漸變得清晰直至完全加載完成。
這種設計主要有兩點好處：
1 模糊效果會解決不同設備中圖片的適配難題
2 模糊效果的縮略圖很小，只有幾kb，降低了頁面的加載負擔
測試頁面的視覺層次
模糊效果不僅可以提升頁面的視覺表現力，還是衡量頁面視覺層次的一項重要測試工具。
模糊效果可以幫助我們發現頁面的視覺重心，看用戶的目光是否放在我們希望他關注的內容上。方法其實很簡單，我們只要將圖片導進Photoshop中，對圖片進行高斯模糊處理，強度為5-10px。就像下圖一樣，模糊處理后的頁面模擬的就是用戶第一眼看到頁面的場景：用戶對頁面整體布局會有一種大致上的認識，但是不會注意到具體細節。如果模糊狀態下的頁面我們找不到任何重點，那么就以為我們要做出一些調整了。
Mailchimp的首頁就可以說是通過了模糊效果測試，因為頁面視覺重點是“注冊”按鈕，這也是我們希望新用戶進到這個頁面的初衷。
模糊效果與文字可讀性
我們在給頁面引入模糊效果之前，我們要考慮的一個問題就是：模糊效果是否影響到了文字的可讀性。下圖中谷歌錢包首頁中我們可以發現，次標題內容完全無法辨識。
模糊效果與頁面內容的兼容性問題
當頁面中內容比較多的時候，我們對模糊效果的使用就要謹慎了。我們可以比較下圖中的兩個案例，左邊因為使用了模糊效果，致使頁面整體效果比較“臟”；右邊的頁面則明顯的清爽許多。
我見過一些設計師為了炫技抑或是為了提高所謂的“設計感”使用模糊效果，其實大可不必。內容是決定了一款產品的氣質風格的，為了追求設計感而使內容得不到完全展示是本末倒置。
總結
模糊效果會給用戶提供一個視覺引導，幫助他們更好的了解頁面，特別是可以很好的解釋元素之間的關系，更能提升頁面的美感。但是我們也不能過度迷信模糊效果，要謹慎使用。
文章來源：UI中國
文章鏈接：http://www.ui.cn/detail/217625.html
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
