loading...

SKIP 繼續

艾易網絡高端策劃機構

158-3484-2555

news

新聞動態

想讓產品加快性能的優化小技巧

2019-08-14

當你在打開網站的時候,在等待加載內容的時間,近半數的人最多等三秒,如果網站 不能在三秒內加載完成,那么很多人會失去耐心會選擇離開網站。這對于任何行業來說,都是會損失大量的業務和體驗的。

據統計,圖片的內容已經占到了互聯網內容的總量的62%,也就是超過一半的流量和時間都在用來下載圖片。但是從優化的角度來說,圖片也絕對是優化的熱點與重點之一。

在我負責的項目中,不部分面向的是Web端企業級用戶,由于行業的原因,我們實際用的電腦和網絡的環境,遠遠沒有大數據中電腦設備的良好的性能,且大多數的企業電腦更新換代的周期長,使大多數的員工用的電腦老舊并且性能也是特別的差。如果讓產品運行使用的流暢,產品自身的性能也是特別的重要。作為產品設計師我們應該如何在不影響系統的運行的前提下,使運行更加的快,又如何能兼得美麗與才華并且又不失用戶的體驗呢?


什么是性能的優化?


性能的優化,簡而言之就是在不影響系統正常的運作之下的前提下,使之更快的并且在更短的時間之內完成特定的功能。


優化性能的目的


對于Web產品而言:

· 要是從用戶的角度去出發,優化頁面可以使頁面加載起來更快、對用戶的響應會更及時,也能夠給用戶帶來良好的體驗。

· 要是從服務商的角度去出發,優化能夠使頁面請求提升服務器的性能,減少流量, 并且能夠節省可觀的成本。

分分11选5總而言之,適當的優化不僅能夠改善站點的用戶體驗并且能夠節省相當多的資源。


我們應該如何進行優化


一:圖片


  1. 僅在兩個元素以上的色彩使用的元素的圖片;

  2. 應用“智圖”圖片在壓縮工具壓縮圖片。


二:iconfont


分分11选5無圖模式:在單一的色彩的圖片就可以使用iconfont,一個iconfont可以替代3種狀態的圖片并且重復性比較高,可以無損的進行拉伸。


三:css


分分11选5無圖模式:圓角、陰影、漸變、簡單的幾何圖形可以使用css的樣式,要減少不必要的HTTP的請求。用css圓角替代圓角的圖片,可以減少圖片的使用。

圖片:要了解圖片的格式

圖片有很多種的格式,并且自身的優缺點決定了在什么環境下使用,我們要在什么場景采取哪種圖片的格式,是我們進行的第一步,我們首先從這來入手。

分分11选5我們用圖片的形式倆進行簡單的對比

想讓產品加快性能的優化小技巧

要減少圖片的使用量


如果在Web上圖片的調用方式是一張一張的,那么這樣就會增加服務器的請求的次數。這樣會降低頁面的響應的速度,推薦用一下兩種方法來優化圖片:

分分11选5css sprites,是一種網頁圖片的應用處理的方式,是把相關的圖片整合到一張圖片的文件夾下,這樣圖片就不會一張一張的加載出來,這是減少圖片的請求方法的有效的辦法。這樣可以降低服務器儲存和請求的壓力,同時提高了頁面的加載的速度,但是缺點就是維護的時候比較復雜。

Opacity,是設置div元素的不透明度的,通過不透明度的處理,在不影響用戶體驗和設計的目的的情況下,我們就可以使用一張圖片來搞定控件的多種的狀態,從而會減少使用的環境和網絡的請求。那這樣做的缺點就是在IE8及以下的瀏覽器就不支持這樣的屬性了。


分分11选5iconfont:矢量圖標庫


iconfont就是把圖標處理成文字在屏幕來顯示,有時候的效果并沒有想象的那么好,但是對于純圖片的效果還是相當的可人的。iconfont也會受著css的影響,但是要得到大范圍瀏覽器的支持,需要生成TTF、WOFF、EOT、SVG的這四種字體。

分分11选5矢量圖標庫還兌跨部門的協作起到了資源與信息的同步的作用,方便產品以后的維護使用。

當在移動端使用iconfont的時候,有很多超過位圖的高級的特性,這些特性所帶來的就是影響你的設計流程,以及產品的最終的品質。現在移動端的設計越來越復雜,因為現在有很多的不同分辨率,對于自適應的設計來講,用矢量圖標是一種不錯的選擇。

分分11选5· 可縮放性的特征:在基于字體的icon是分辨率無關并且可以縮放到任意想要的大小,在渲染的時候會根據目標的設備來進行調整。

· 尺寸iconfont不需要根據不同的分辨率來調整圖片的尺寸。

· 具有可維護性:當通過字體的文件你可以很快的組織你的icon,然后在根據自己想要的尺寸來進行調整。

· 具有靈活性:iconfont可以隨意的改變顏色,大小,僅僅通過改變幾行代碼就可以改變顏色、大小等。

· 具有可交互性:由于靈活性能夠通過代碼來方便的進行操作,所以我們要在不同的狀態下來顯示對應的不同的效果,來創建動畫。


css:網頁圖片應用處理方式


其實很多的樣式都是通過css倆實現的,比如:圓角、漸變、陰影等,代碼是屬于文本,所以請求的資源比較小。但是加載的和渲染的速度是圖片不可比擬的,加載每一張圖片都是需要一個HTTP請求的,一個瀏覽器在同一個域名下請求的數量是有一定的限制的,如果超出了請求的次數,那么就會被阻塞,從而就會延長用戶的感知的時間,所以我們要減少請求的次數,這樣可以提高頁面的速度。

分分11选5css可以在任何屏幕上都會顯示出良好的視覺的效果,無論是多少的分辨率。若軟件具有一定的自定義外觀的功能,那么css的優勢就會顯得更加的強大,并且修改一下屬性就可以啦。如果要是在后期來維護的話,也是比較方便的。


分分11选5產品要是使用iconfont+css+圖片的優化


· 圖片:LOGO要用智圖壓縮優化

分分11选5· iconfont:要是單色的圖標要使用iconfont。

· css:圓角、背景、有色彩的圖片、背景、輸入框、表格、隔行變色、圓角的按鈕等。


結論:

在產品的設計的過程中,我們要慎重的選擇設計的方式,要避免加載的時間過長而用戶選擇離開,從而影響整個產品的體驗。

分分11选5我們設計師在設計的時候要多多的站在用戶的角度去考慮,要將用戶的體驗貫穿到整個產品的環節中。


小結

其實優化的方法有很多種,在本文說的只是選擇了一種,我們最終的目的就是為了提高產品的響應的速度。所以要降低圖片的使用的次數,要提高產品的性能。

從css的整合到優化,再到iconfont字體化的應用,在到css的呈現,我們無需增加成本或者投入人力,只是需要從方法上改變,就可以提升響應的速度了。

分分11选5其實好的設計是產品成功的標準,產品的優化是從設計先開始的,我們要在接下來的工作中,也會不斷的優化和運用這些方法的,我們要慢慢的總結沉淀與提升,要為產品的設計做出貢獻。

ewm

有類似的需求 我們聊一聊

我也有同樣的需求
載入

正在為您提交.....

一分11选5-官网 彩神8官网-欢迎您 彩神8app-安全购彩 广西福彩网-Welcome 广西体彩网-Home 江苏体彩网-分分11选5 江苏福彩网-推荐 贵州体彩网-官网 贵州福彩网-欢迎您 贵州彩票网-安全购彩