人人都是產品經理【起點學院】,BAT實戰派產品總監手把手系統帶你學產品、學運營。
產品設計時細節是產品經理最頭疼的問題,一個button,一個鏈接都要考慮太多的細節問題。作者整理了常見的一些功能設計問題,一篇文章看懂這些功能設計。來學習吧。
鏈接也稱為超鏈接,所謂的超鏈接是指從一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程序。而在一個網頁中用來超鏈接的對象,可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后,鏈接目標將顯示在瀏覽器上,并且根據目標的類型來打開或運行。
鏈接可以是一個字或是一段字這樣的文本,也可以是一個按鈕,一張圖片,當你點擊后跳轉到另一個目標,當你把鼠標指針移到某個鏈接時會變成一個小手,當然在手機上沒有這一特點。
文本樣式的鏈接一般在搜索引擎的網站呈現藍色字樣,大多會在下面加上下劃線以便識別,不過現如今考慮到不影響文本的可讀性與用戶體驗,逐漸取消了下劃線。而在一些別的網站考慮到界面設計風格各方面的因素而不用藍色。
谷歌的文本鏈接是藍色,沒有下劃線
百度的文本鏈接也是藍色,關鍵詞是紅色,有下劃線
而京東的文本鏈接有灰色,有白色,有黑色
按鈕樣式的鏈接比文本樣式的更容易識別,每一個按鈕都是一樣鏈接。
按鈕樣式鏈接
圖片樣式的鏈接可以是單獨的一張圖片,也可以是文字與按鈕一起組成一張圖片,只是鼠標指針掃過圖片的任何一個部位都會變成小手。
如桌面彈出這種游戲小窗口的圖片式鏈接
由文字/圖/按鈕樣式一起構成的一張圖片式按鈕,鼠標可以點擊圖中任何一部位
鏈接打開的方式有三種:第一種是在當前頁面刷新跳轉,國外的網站大多是這樣的打開式;第二種是在新標簽頁面打開鏈接,國內大多采用這種;第三種是提示用APP打開。當然現在出現了一種新的打開方式,那就是二維碼掃描。
提示用美拍APP打開
按照連接路徑的不同,網頁中超鏈接一般分為以下3種類型:內部鏈接,錨點鏈接和外部鏈接。
鏈接還可以分為動態鏈接和靜態鏈接。動態超鏈接指的是可以通過改變HTML代碼來實現動態變化的鏈接,例如我們可以實現將鼠標移動到某個文字鏈接上,文字就會象動畫一樣動起來或改變顏色的效果,也可以實現鼠標移到圖片上圖片就產生反色或朦朧等等的效果。而靜態鏈接,顧名思義,就是沒有動態效果的鏈接。
與外部鏈接(即反向鏈接)相反,內部鏈接是指同一網站域名下的內容頁面之間互相鏈接。如頻道、欄目、終極內容頁之間的鏈接,乃至站內關鍵詞之間的Tag鏈接都可以歸類為內部鏈接,因此內部鏈接我們也可以稱之為站內鏈接,對內部鏈接的優化其實就是對網站的站內鏈接的優化。
HTML中的鏈接,正確的說法應該稱作"錨點",它命名錨點鏈接(也叫書簽鏈接)常常用于那些內容龐大繁瑣的網頁,通過點擊命名錨點,不僅讓我們能指向文檔,還能指向頁面里的特定段落,更能當作"精準鏈接"的便利工具,讓鏈接對象接近焦點。便于瀏覽者查看網頁內容。類似于我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時,標記錨點是最佳的方法。
外部鏈接,又常被稱為:“反向鏈接”或“導入鏈接”,是指通過其他網站鏈接到你的網站的鏈接。
外部鏈接指的是針對搜索引擎,與其它站點所做的友情鏈接。高質量的外部鏈接指:和你的網站建立鏈接的網站知名度高,訪問量大,同時相對的外部鏈接較少,有助于快速提升你的網站知名度和排名的其他網站的友情鏈接。
如果按照使用對象的不同,網頁中的鏈接又可以分為:文本超鏈接,圖像超鏈接,E-mail鏈接,錨點鏈接,多媒體文件鏈接,空鏈接等。
鏈接是一種對象,它以特殊編碼的文本或圖形的形式來實現鏈接,如果單擊該鏈接,則相當于指示瀏覽器移至同一網頁內的某個位置,或打開一個新的網頁,或打開某一個新的WWW網站中的網頁。
鏈接在交互上一般會呈現4種狀態,即默認狀態/懸停時狀態/點擊時狀態/點擊后狀態。比如谷哥網站的交互體驗。如下圖:
點擊前
懸停時,下面浮現半透明線條
點擊時,有波紋暈開的動態效果
點擊后,下面線條粗
有時候是3種狀態,比如百度網和知乎應用:
默認狀態
點擊時鏈接變紅
點擊后鏈接變成紫色
IOS系統知乎應用的3種狀態,而在Android系統沒有用力點擊這一狀態。
默認狀態
點擊狀態
用力點擊會彈出預覽小窗口
有些時候只有2種狀態,如下圖谷歌網:
默認和點擊后狀態一樣
鼠標懸停時出現下劃線
默認狀態
點擊時
而有時候比如在APP里有時候就一直只有一種狀態,也可以稱靜態鏈接,之前的可以稱之為動態鏈接。在不同的使用場景會因為當時的情況選擇最合適的交互體驗設計。有的情況下還會加上點擊的音效,使用戶體驗更暢快,這在移動端用的使用情況多一些。
總之鏈接是網頁不可缺少的構成部分,每一個鏈接的呈現都是經過深思熟慮的。
作者:潘瑤瓊(簡書作者)
本文由 @潘瑤瓊 授權發布于人人都是產品經理,未經作者許可,禁止轉載。
ndroid高階開發專欄
Java高級開發進階專欄
TCP連接的三次握手和四次揮手
一文搞懂DNS域名解析的詳細流程
高并發與負載均衡:Nginx的反向代理和負載均衡
一文搞懂TCP/IP協議及Web基礎知識
一文搞懂HTTP協議的核心知識點
一文掌握 HTTP協議報文 包含的信息類型
一文搞懂HTTP協議 返回結果的HTTP狀態碼
一文搞懂 HTTP協議的報文首部
作為網絡專欄的開篇導文,本文概況介紹下經典案例:從輸入一個網址到瀏覽器顯示頁面的全過程。
步驟概要介紹如下:
當在瀏覽器中輸入網址時,瀏覽器其實就已在智能匹配 url 了,他會從歷史記錄,書簽等地方,找到已經輸入的字符串可能對應的 url,然后給出智能提示,讓你可以補全url地址。
對于 google的chrome 的瀏覽器,他甚至會直接從緩存中把網頁展示出來,就是說,你還沒有按下 enter,頁面就出來了。
請求一旦發起,瀏覽器首先要做的事情就是解析這個域名。
在HTTP工作開始之前,web瀏覽器首先要通過網絡與web服務器建立連接,該連接是通過TCP來完成的。
PS1:為什么要先建立TCP呢?
因為HTTP是比TCP更高層次的應用層協議,根據規則,只有低層協議建立之后才能進行更高層次協議的連接,因此要先建立TCP連接,一般TCP連接的端口號是80
PS2:擴展知識點:
TCP連接的三次握手和斷開的四次揮手 參照站內文章:TCP 三次握手和四次揮手
建立了TCP連接之后,web瀏覽器就會向web服務器發起一個http請求。
一個典型的 http request header 一般需要包括請求的方法,例如 GET 或者 POST 等,不常用的還有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法,一般的瀏覽器只能發起 GET 或者 POST 請求。
客戶端向服務器發起http請求的時候,會有一些請求信息,請求信息包含三個部分:
下面是一個完整的HTTP請求例子:
GET/sample.jspHTTP/1.1
Accept:image/gif.image/jpeg,*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate
username=jinqiao&password=1234
4.1、請求行
請求的第一行是“方法URL議/版本”:GET/sample.jsp HTTP/1.1
4.2、請求頭(Request Header)
請求頭包含許多有關的客戶端環境和請求正文的有用信息。例如,請求頭可以聲明瀏覽器所用的語言,請求正文的長度等。
Accept:image/gif.image/jpeg.*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible:MSIE5.01:Windows NT5.0)
Accept-Encoding:gzip,deflate.
4.3、請求正文
請求頭和請求正文之間是一個空行,這個行非常重要,它表示請求頭已經結束,接下來的是請求正文。請求正文中可以包含客戶提交的查詢字符串信息:
username=jinqiao&password=1234
服務器給瀏覽器響應一個301永久重定向響應,這樣瀏覽器就會訪問“http://www.google.com/” 而非“http://google.com/”。
為什么服務器一定要重定向而不是直接發送用戶想看的網頁內容呢?其中一個原因跟搜索引擎排名有關。如果一個頁面有兩個地址,就像http://www.yy.com/和http://yy.com/,搜索引擎會認為它們是兩個網站,結果造成每個搜索鏈接都減少從而降低排名。而搜索引擎知道301永久重定向是什么意思,這樣就會把訪問帶www的和不帶www的地址歸到同一個網站排名下。還有就是用不同的地址會造成緩存友好性變差,當一個頁面有好幾個名字時,它可能會在緩存里出現好幾次。
重定向原因:
這種情況下,如果不做重定向,則用戶收藏夾或搜索引擎數據庫中舊地址只能讓訪問客戶得到一個404頁面錯誤信息,訪問流量白白喪失;再者某些注冊了多個域名的網站,也需要通過重定向讓訪問這些域名的用戶自動跳轉到主站點等。
現在瀏覽器知道了 "http://www.google.com/"才是要訪問的正確地址,所以它會發送另一個http請求。這里沒有啥好說的
經過前面的步驟,服務器收到了我們的請求,也處理我們的請求,到這一步,它會把它的處理結果返回,也就是返回一個HTPP響應。
HTTP響應與HTTP請求相似,HTTP響應也由3個部分構成,分別是:
HTTP/1.1 200 OK
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122
<html>
<head>
<title>http</title>
</head>
<body>
<!-- body goes here -->
</body>
</html>
7.1、狀態行:
狀態行由協議版本、數字形式的狀態代碼、及相應的狀態描述,各元素之間以空格分隔。
格式: HTTP-Version Status-Code Reason-Phrase CRLF
例如: HTTP/1.1 200 OK \r\n
-- 協議版本:是用http1.0還是其他版本
-- 狀態描述:狀態描述給出了關于狀態代碼的簡短的文字描述。比如狀態代碼為200時的描述為 ok
-- 狀態代碼:狀態代碼由三位數字組成,第一個數字定義了響應的類別,且有五種可能取值。
狀態代碼具體協議定義如下:
1xx:信息性狀態碼,表示服務器已接收了客戶端請求,客戶端可繼續發送請求。
100 Continue
101 Switching Protocols
2xx:成功狀態碼,表示服務器已成功接收到請求并進行處理。
200 OK 表示客戶端請求成功
204 No Content 成功,但不返回任何實體的主體部分
206 Partial Content 成功執行了一個范圍(Range)請求
3xx:重定向狀態碼,表示服務器要求客戶端重定向。
301 Moved Permanently 永久性重定向,響應報文的Location首部應該有該資源的新URL
302 Found 臨時性重定向,響應報文的Location首部給出的URL用來臨時定位資源
303 See Other 請求的資源存在著另一個URI,客戶端應使用GET方法定向獲取請求的資源
304 Not Modified 服務器內容沒有更新,可以直接讀取瀏覽器緩存
307 Temporary Redirect 臨時重定向。與302 Found含義一樣。302禁止POST變換為GET,但實際使用時并不一定,307則更多瀏覽器可能會遵循這一標準,但也依賴于瀏覽器具體實現
4xx:客戶端錯誤狀態碼,表示客戶端的請求有非法內容。
400 Bad Request 表示客戶端請求有語法錯誤,不能被服務器所理解
401 Unauthonzed 表示請求未經授權,該狀態代碼必須與 WWW-Authenticate 報頭域一起使用
403 Forbidden 表示服務器收到請求,但是拒絕提供服務,通常會在響應正文中給出不提供服務的原因
404 Not Found 請求的資源不存在,例如,輸入了錯誤的URL
5xx:服務器錯誤狀態碼,表示服務器未能正常處理客戶端的請求而出現意外錯誤。
500 Internel Server Error 表示服務器發生不可預期的錯誤,導致無法完成客戶端的請求
503 Service Unavailable 表示服務器當前不能夠處理客戶端的請求,在一段時間之后,服務器可能會恢復正常
7.2、響應頭:
響應頭部:由關鍵字/值對組成,每行一對,關鍵字和值用英文冒號":"分隔。
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122
典型的響應頭字段:
7.3、響應正文
包含著我們需要的一些具體信息,比如cookie,html,image,后端返回的請求數據等等。這里需要注意,響應正文和響應頭之間有一行空格,表示響應頭的信息到空格為止。
在瀏覽器沒有完整接受全部HTML文檔時,它就已經開始顯示這個頁面了,瀏覽器是如何把頁面呈現在屏幕上的呢?
不同瀏覽器可能解析的過程不太一樣,這里我們只介紹webkit的渲染過程。下圖對應的就是WebKit渲染的過程,這個過程包括:
解析html以構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪制render樹:
其實這個步驟可以并列在步驟8中,在瀏覽器顯示HTML時,它會注意到需要獲取其他地址內容的標簽。這時,瀏覽器會發送一個獲取請求來重新獲得這些文件。比如我要獲取外圖片,CSS,JS文件等,類似于下面的鏈接:
圖片:http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
CSS式樣表:http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
JavaScript 文件:http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
這些地址都要經歷一個和HTML讀取類似的過程。所以瀏覽器會在DNS中查找這些域名,發送請求,重定向等等...
不像動態頁面,靜態文件會允許瀏覽器對其進行緩存。有的文件可能會不需要與服務器通訊,而從緩存中直接讀取,或者可以放到CDN中
一般情況下,一旦web服務器向瀏覽器發送了請求數據后,它就要關閉TCP連接,然后如果瀏覽器或者服務器在其頭信息加入這行代碼:
connection:keep-alive
這樣TCP連接將依然保持打開狀態,瀏覽器可以繼續通過相同的連接發送請求,保持連接,節省了為每個請求建立新連接所需要的的事件,同時節省了寬帶
實際上,在HTTP 1.1 版本的新特性中有一點是:默認持久連接節省通信量,只要客戶端、服務端任意一端沒有明確斷開TCP連接,可以發送多次HTTP請求。
版權說明:摘錄到部分網絡資源,如存在版權問題,請私信聯系處理,謝謝!
關注頭條號“編程家園”,后續陸續會有更多技術領域(包括并不限于Android進階、Java進階、Kotlin、網絡、Flutter、Python等),以及架構、職業規劃、職業思考等方面資料的免費分享,期待您的關注!
哥
學習一門技術,按照威哥的思路,一定得先了解一下這是什么,有什么用,以及怎么用,這樣的學習效率才是高效的。
什么是Nginx?
Nginx (engine x) 是一個高性能的HTTP和反向代理web服務器,
Nginx是一款輕量級的Web 服務器/反向代理服務器及電子郵件(IMAP/POP3)代理服務器,在BSD-like 協議下發行。其特點是占有內存少,并發能力強,事實上nginx的并發能力確實在同類型的網頁服務器中表現較好,中國大陸使用nginx網站用戶有:百度、京東、新浪、網易、騰訊、淘寶等。
為什么使用Nginx?
在傳統的Web項目中,并發量小,用戶使用的少。
所以在低并發的情況下,用戶可以直接訪問tomcat服務器,然后tomcat服務器返回消息給用戶。
用戶訪問<-->Tomcat服務器
而在互聯網項目下,因單個tomcat默認并發量有限制。如果請求量過大,會產生如下問題:
Tomcat8 默認配置的最大請求數是 150,也就是說同時支持 150 個并發,當然了,也可以將其改大。
當某個應用擁有 250 個以上并發的時候,應考慮應用服務器的集群。
具體能承載多少并發,需要看硬件的配置,CPU 越多性能越高,分配給 JVM 的內存越多性能也就越高,但也會加重 GC 的負擔。
操作系統對于進程中的線程數有一定的限制:
Windows 每個進程中的線程數不允許超過 2000
Linux 每個進程中的線程數不允許超過 1000
(在 Java 中每開啟一個線程需要耗用 1MB 的 JVM 內存空間用于作為線程棧之用。)
Tomcat的最大并發數是可以配置的,實際運用中,最大并發數與硬件性能和CPU數量都有很大關系的。更好的硬件,更多的處理器都
會使Tomcat支持更多的并發。
maxThreads="150" 最大并發數
minSpareThreads="10"///初始化時創建的線程數
maxSpareThreads="500"///一旦創建的線程超過這個值,Tomcat就會關閉不再需要的socket線程。
高并發(High Concurrency)
是互聯網分布式系統架構設計中必須考慮的因素之一,
它通常是指,通過設計保證系統能夠同時并行處理很多請求。
高并發相關常用的一些指標有響應時間(Response Time),吞吐量(Throughput),每秒查詢率QPS(Query Per
Second),并發用戶數等。
響應時間:系統對請求做出響應的時間。例如系統處理一個HTTP請求需要200ms,這個200ms就是系統的響應時間。
吞吐量:單位時間內處理的請求數量。
QPS:每秒響應請求數。在互聯網領域,這個指標和吞吐量區分的沒有這么明顯。
并發用戶數:同時承載正常使用系統功能的用戶數量。
高可用(High Availability)
通常來描述一個系統經過專門的設計,從而減少停工時間,而保持其服務的高度可用性。
(一直都能用 99.9999%)
高性能
是指服務響應時間快,(CPU/處理器/內存)特別是在高并發下響應時間不會急劇增加。
Nginx特點:
高并發、高性能
可擴展性好
高可靠性熱部署
BSD許可證
Nginx (engine x) 是一款輕量級的Web 服務器 、反向代理服務器及電子郵件(IMAP/POP3)代理服務器。
反向代理:
反向代理(Reverse Proxy)方式是指以代理服務器來接受internet上的連接請求,然后將請求轉發給內部網絡上的服務器,并將從服務器上得到的結果返回給internet上請求連接的客戶端,此時代理服務器對外就表現為一個反向代理服務器。
正向代理:
是一個位于客戶端和原始服務器(origin server)之間的服務器,為了從原始服務器取得內容,客戶端向代理發送一個請求并指定目標(原始服務器),然后代理向原始服務器轉交請求并將獲得的內容返回給客戶端。客戶端才能使用正向代理。
正向代理和反向代理區別?
正向代理,是在客戶端的。比如需要訪問某些國外網站,我們可能需要購買vpn。并且vpn是在我們的用戶瀏覽器端設置的(并不是在遠端的服務器設置)。瀏覽器先訪問vpn地址,vpn地址轉發請求,并最后將請求結果原路返回來。
反向代理是作用在服務器端的,是一個虛擬ip(VIP)。對于用戶的一個請求,會轉發到多個后端處理器中的一臺來處理該具體請求。
四、Nginx下載
官方網址: http://nginx.org/
├── conf 這是nginx所有配置文件的目錄
│ ├── fastcgi.conf fastcgi 相關參數的配置文件
│ ├── fastcgi.conf.default fastcgi.conf 的原始備份
│ ├── fastcgi_params fastcgi的參數文件
│ ├── fastcgi_params.default
│ ├── koi-utf
│ ├── koi-win
│ ├── mime.types 媒體類型
│ ├── mime.types.default
│ ├── nginx.conf nginx默認的主配置文件
│ ├── nginx.conf.default
│ ├── scgi_params scgi 相關參數文件
│ ├── scgi_params.default
│ ├── uwsgi_params uwsgi相關參數文件
│ ├── uwsgi_params.default
│ └── win-utf
├── fastcgi_temp fastcgi臨時數據目錄
├── html 這是編譯安裝時nginx的默認站點目錄,類似Apache的默
認站點htdocs
│ ├── 50x.html 錯誤頁面優雅替代顯示文件,例如:出現502錯誤時會調用此頁
面error_page 500 502 503 504 /50x.html
│ └── index.html 默認的首頁文件,index.html\index.asp\index.jsp來做網
站的首頁文件
├── logs nginx默認的日志路徑,包括錯誤日志及訪問日志
│ ├── access.log nginx的默認訪問日志文件,使用tail -f access.log,可以
實時觀看網站的用戶訪問情況信息
│ ├── error.log nginx的錯誤日志文件,如果nginx出現啟動故障可以查看此文
件
│ └── nginx.pid nginx的pid文件,nginx進程啟動后,會把所有進程的ID號寫
到此文件├── nginx-1.6.3 -> /application/nginx-1.6.3
├── proxy_temp 臨時目錄
├── sbin 這是nginx命令的目錄,如nginx的啟動命令nginx
│ ├── nginx Nginx的啟動命令nginx
│ └── nginx.old
├── scgi_temp 臨時目錄
└── uwsgi_temp 臨時目錄
后臺留言獲取Nginx全套視頻資料,
*請認真填寫需求信息,我們會在24小時內與您取得聯系。