首頁

WebSocket 百科

前端達(dá)人

WebSocket是一種在單個TCP連接上進(jìn)行全雙工通信的協(xié)議。WebSocket通信協(xié)議于2011年被IETF定為標(biāo)準(zhǔn)RFC 6455,并由RFC7936補充規(guī)范。WebSocket API也被W3C定為標(biāo)準(zhǔn)。
WebSocket使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單,允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在WebSocket API中,瀏覽器和服務(wù)器只需要完成一次握手,兩者之間就直接可以創(chuàng)建持久性的連接,并進(jìn)行雙向數(shù)據(jù)傳輸。
中文名
WebSocket
外文名
WebSocket
解    釋
基于TCP的全雙工通信協(xié)議
優(yōu)    點
服務(wù)器可以主動傳送數(shù)據(jù)給客戶端
功    能
實現(xiàn)了瀏覽器與服務(wù)器全雙工通信

背景

 語音
很多網(wǎng)站為了實現(xiàn)推送技術(shù),所用的技術(shù)都是輪詢。輪詢是在特定的的時間間隔(如每1秒),由瀏覽器對服務(wù)器發(fā)出HTTP請求,然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點,即瀏覽器需要不斷的向服務(wù)器發(fā)出請求,然而HTTP請求可能包含較長的頭部,其中真正有效的數(shù)據(jù)可能只是很小的一部分,顯然這樣會浪費很多的帶寬等資源。
而比較新的技術(shù)去做輪詢的效果是Comet。這種技術(shù)雖然可以雙向通信,但依然需要反復(fù)發(fā)出請求。而且在Comet中,普遍采用的長鏈接,也會消耗服務(wù)器資源。
在這種情況下,HTML5定義了WebSocket協(xié)議,能更好的節(jié)省服務(wù)器資源和帶寬,并且能夠更實時地進(jìn)行通訊。

優(yōu)點

 語音
  • 較少的控制開銷。在連接創(chuàng)建后,服務(wù)器和客戶端之間交換數(shù)據(jù)時,用于協(xié)議控制的數(shù)據(jù)包頭部相對較小。在不包含擴(kuò)展的情況下,對于服務(wù)器到客戶端的內(nèi)容,此頭部大小只有2至10字節(jié)(和數(shù)據(jù)包長度有關(guān));對于客戶端到服務(wù)器的內(nèi)容,此頭部還需要加上額外的4字節(jié)的掩碼。相對于HTTP請求每次都要攜帶完整的頭部,此項開銷顯著減少了。
  • 更強的實時性。由于協(xié)議是全雙工的,所以服務(wù)器可以隨時主動給客戶端下發(fā)數(shù)據(jù)。相對于HTTP請求需要等待客戶端發(fā)起請求服務(wù)端才能響應(yīng),延遲明顯更少;即使是和Comet等類似的長輪詢比較,其也能在短時間內(nèi)更多次地傳遞數(shù)據(jù)。
  • 保持連接狀態(tài)。與HTTP不同的是,Websocket需要先創(chuàng)建連接,這就使得其成為一種有狀態(tài)的協(xié)議,之后通信時可以省略部分狀態(tài)信息。而HTTP請求可能需要在每個請求都攜帶狀態(tài)信息(如身份認(rèn)證等)。
  • 更好的二進(jìn)制支持。Websocket定義了二進(jìn)制幀,相對HTTP,可以更輕松地處理二進(jìn)制內(nèi)容。
  • 可以支持?jǐn)U展。Websocket定義了擴(kuò)展,用戶可以擴(kuò)展協(xié)議、實現(xiàn)部分自定義的子協(xié)議。如部分瀏覽器支持壓縮等。
  • 更好的壓縮效果。相對于HTTP壓縮,Websocket在適當(dāng)?shù)臄U(kuò)展支持下,可以沿用之前內(nèi)容的上下文,在傳遞類似的數(shù)據(jù)時,可以顯著地提高壓縮率。

握手協(xié)議

 語音
WebSocket 是獨立的、創(chuàng)建在 TCP 上的協(xié)議。
Websocket 通過HTTP/1.1 協(xié)議的101狀態(tài)碼進(jìn)行握手。
為了創(chuàng)建Websocket連接,需要通過瀏覽器發(fā)出請求,之后服務(wù)器進(jìn)行回應(yīng),這個過程通常稱為“握手”(handshaking)。


藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


3D動效設(shè)計小集

seo達(dá)人



 

原文地址:站酷
作者:FY印跡

 

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》3D動效設(shè)計小集

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



這些不同類型的菜單圖標(biāo)和用法,我做了個總結(jié)分析!

seo達(dá)人


1.漢堡菜單

圖片

關(guān)鍵詞:橫條、多個菜單選項

這個圖標(biāo)的樣式簡潔易懂,通常位于網(wǎng)頁和App的上下角,用來告知用戶這個按鈕之外還有更多內(nèi)容可以探索。

當(dāng)產(chǎn)品有多個菜單選項時,考慮使用漢堡圖標(biāo)來顯示,但盡可能避免在桌面視圖中使用。

 

2.垂直三點式菜單

圖片

關(guān)鍵詞:垂直、內(nèi)嵌菜單

通常位于屏幕或窗口的右上角或頂部,是用于打開帶有附加選項的圖標(biāo),打開的內(nèi)容往往是一個較小的內(nèi)嵌菜單而不是整個全新的頁面。

 

3.水平三點式菜單

圖片

關(guān)鍵詞:水平、內(nèi)嵌菜單、web

水平三點式菜單同樣常位于屏幕或窗口的右上角,用于打開菜單或顯示相關(guān)項的操作。

因為圖標(biāo)樣式是水平的,所以更容易在web上或者在表格等水平方向中使用。

 

4.九宮格菜單 

圖片

關(guān)鍵詞:子分類、子功能

九宮格菜單通常用于打開同一產(chǎn)品中包含不同子產(chǎn)品或子功能,可以在它們之間快速切換,此圖標(biāo)常位于產(chǎn)品主頁的右上角。

 

5.過濾式菜單

圖片

關(guān)鍵詞:過濾、排序

過濾式菜單由三行不同長度的線段水平疊放而成,是最廣泛使用的過濾符號??梢詫⑦^濾式菜單與“排序方式”選項結(jié)合使用,或者與全局過濾器結(jié)合使用。

 

6.漢堡菜單變體

圖片

關(guān)鍵詞:樣式特殊、時尚感更強

作為漢堡圖標(biāo)的替代品,與顯示列表菜單的目的相同嗎,但是這些樣式我們平常見的可能會比較少,更常用在充滿現(xiàn)代感、時尚感和藝術(shù)感的網(wǎng)站上。

圖片

 

最后

不同的樣式可能代表著截然不同的設(shè)計目的,常思考這些小而精的細(xì)節(jié),是保證產(chǎn)品體驗提升的關(guān)鍵。

 

參考:uxplanet.org/choose-correct-menu-icon-for-your-navigation-7ffc22df80ac

 

原文地址:Clip設(shè)計夾(公眾號)

作者:Clippp

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》這些不同類型的菜單圖標(biāo)和用法,我做了個總結(jié)分析!

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



日歷

鏈接

個人資料

存檔