技術(shù)貼：一篇文章看懂鏈接（超鏈接）設(shè)計(jì)

人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】，BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營(yíng)。

產(chǎn)品設(shè)計(jì)時(shí)細(xì)節(jié)是產(chǎn)品經(jīng)理最頭疼的問(wèn)題，一個(gè)button，一個(gè)鏈接都要考慮太多的細(xì)節(jié)問(wèn)題。作者整理了常見(jiàn)的一些功能設(shè)計(jì)問(wèn)題，一篇文章看懂這些功能設(shè)計(jì)。來(lái)學(xué)習(xí)吧。

定義

鏈接也稱(chēng)為超鏈接，所謂的超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。而在一個(gè)網(wǎng)頁(yè)中用來(lái)超鏈接的對(duì)象，可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后，鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類(lèi)型來(lái)打開(kāi)或運(yùn)行。

樣式

鏈接可以是一個(gè)字或是一段字這樣的文本，也可以是一個(gè)按鈕，一張圖片，當(dāng)你點(diǎn)擊后跳轉(zhuǎn)到另一個(gè)目標(biāo)，當(dāng)你把鼠標(biāo)指針移到某個(gè)鏈接時(shí)會(huì)變成一個(gè)小手，當(dāng)然在手機(jī)上沒(méi)有這一特點(diǎn)。

1. 文本樣式的鏈接

文本樣式的鏈接一般在搜索引擎的網(wǎng)站呈現(xiàn)藍(lán)色字樣，大多會(huì)在下面加上下劃線以便識(shí)別，不過(guò)現(xiàn)如今考慮到不影響文本的可讀性與用戶體驗(yàn)，逐漸取消了下劃線。而在一些別的網(wǎng)站考慮到界面設(shè)計(jì)風(fēng)格各方面的因素而不用藍(lán)色。

谷歌的文本鏈接是藍(lán)色，沒(méi)有下劃線

百度的文本鏈接也是藍(lán)色，關(guān)鍵詞是紅色，有下劃線

而京東的文本鏈接有灰色，有白色，有黑色

2. 按鈕樣式的鏈接

按鈕樣式的鏈接比文本樣式的更容易識(shí)別，每一個(gè)按鈕都是一樣鏈接。

按鈕樣式鏈接

3. 圖片樣式的鏈接

圖片樣式的鏈接可以是單獨(dú)的一張圖片，也可以是文字與按鈕一起組成一張圖片，只是鼠標(biāo)指針掃過(guò)圖片的任何一個(gè)部位都會(huì)變成小手。

如桌面彈出這種游戲小窗口的圖片式鏈接

由文字/圖/按鈕樣式一起構(gòu)成的一張圖片式按鈕，鼠標(biāo)可以點(diǎn)擊圖中任何一部位

打開(kāi)方式

鏈接打開(kāi)的方式有三種：第一種是在當(dāng)前頁(yè)面刷新跳轉(zhuǎn)，國(guó)外的網(wǎng)站大多是這樣的打開(kāi)式；第二種是在新標(biāo)簽頁(yè)面打開(kāi)鏈接，國(guó)內(nèi)大多采用這種；第三種是提示用APP打開(kāi)。當(dāng)然現(xiàn)在出現(xiàn)了一種新的打開(kāi)方式，那就是二維碼掃描。

提示用美拍APP打開(kāi)

類(lèi)型

按照連接路徑的不同，網(wǎng)頁(yè)中超鏈接一般分為以下3種類(lèi)型：內(nèi)部鏈接，錨點(diǎn)鏈接和外部鏈接。

鏈接還可以分為動(dòng)態(tài)鏈接和靜態(tài)鏈接。動(dòng)態(tài)超鏈接指的是可以通過(guò)改變HTML代碼來(lái)實(shí)現(xiàn)動(dòng)態(tài)變化的鏈接，例如我們可以實(shí)現(xiàn)將鼠標(biāo)移動(dòng)到某個(gè)文字鏈接上，文字就會(huì)象動(dòng)畫(huà)一樣動(dòng)起來(lái)或改變顏色的效果，也可以實(shí)現(xiàn)鼠標(biāo)移到圖片上圖片就產(chǎn)生反色或朦朧等等的效果。而靜態(tài)鏈接，顧名思義，就是沒(méi)有動(dòng)態(tài)效果的鏈接。

1. 內(nèi)部鏈接

與外部鏈接（即反向鏈接）相反，內(nèi)部鏈接是指同一網(wǎng)站域名下的內(nèi)容頁(yè)面之間互相鏈接。如頻道、欄目、終極內(nèi)容頁(yè)之間的鏈接，乃至站內(nèi)關(guān)鍵詞之間的Tag鏈接都可以歸類(lèi)為內(nèi)部鏈接，因此內(nèi)部鏈接我們也可以稱(chēng)之為站內(nèi)鏈接，對(duì)內(nèi)部鏈接的優(yōu)化其實(shí)就是對(duì)網(wǎng)站的站內(nèi)鏈接的優(yōu)化。

2. 錨點(diǎn)鏈接

HTML中的鏈接，正確的說(shuō)法應(yīng)該稱(chēng)作"錨點(diǎn)"，它命名錨點(diǎn)鏈接（也叫書(shū)簽鏈接）常常用于那些內(nèi)容龐大繁瑣的網(wǎng)頁(yè)，通過(guò)點(diǎn)擊命名錨點(diǎn)，不僅讓我們能指向文檔，還能指向頁(yè)面里的特定段落，更能當(dāng)作"精準(zhǔn)鏈接"的便利工具，讓鏈接對(duì)象接近焦點(diǎn)。便于瀏覽者查看網(wǎng)頁(yè)內(nèi)容。類(lèi)似于我們閱讀書(shū)籍時(shí)的目錄頁(yè)碼或章回提示。在需要指定到頁(yè)面的特定部分時(shí)，標(biāo)記錨點(diǎn)是最佳的方法。

3. 外部鏈接

外部鏈接，又常被稱(chēng)為：“反向鏈接”或“導(dǎo)入鏈接”，是指通過(guò)其他網(wǎng)站鏈接到你的網(wǎng)站的鏈接。

外部鏈接指的是針對(duì)搜索引擎，與其它站點(diǎn)所做的友情鏈接。高質(zhì)量的外部鏈接指：和你的網(wǎng)站建立鏈接的網(wǎng)站知名度高，訪問(wèn)量大，同時(shí)相對(duì)的外部鏈接較少，有助于快速提升你的網(wǎng)站知名度和排名的其他網(wǎng)站的友情鏈接。

如果按照使用對(duì)象的不同，網(wǎng)頁(yè)中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點(diǎn)鏈接，多媒體文件鏈接，空鏈接等。

鏈接是一種對(duì)象，它以特殊編碼的文本或圖形的形式來(lái)實(shí)現(xiàn)鏈接，如果單擊該鏈接，則相當(dāng)于指示瀏覽器移至同一網(wǎng)頁(yè)內(nèi)的某個(gè)位置，或打開(kāi)一個(gè)新的網(wǎng)頁(yè)，或打開(kāi)某一個(gè)新的WWW網(wǎng)站中的網(wǎng)頁(yè)。

鏈接狀態(tài)

鏈接在交互上一般會(huì)呈現(xiàn)4種狀態(tài)，即默認(rèn)狀態(tài)/懸停時(shí)狀態(tài)/點(diǎn)擊時(shí)狀態(tài)/點(diǎn)擊后狀態(tài)。比如谷哥網(wǎng)站的交互體驗(yàn)。如下圖：

點(diǎn)擊前

懸停時(shí)，下面浮現(xiàn)半透明線條

點(diǎn)擊時(shí)，有波紋暈開(kāi)的動(dòng)態(tài)效果

點(diǎn)擊后，下面線條粗

有時(shí)候是3種狀態(tài)，比如百度網(wǎng)和知乎應(yīng)用：

默認(rèn)狀態(tài)

點(diǎn)擊時(shí)鏈接變紅

點(diǎn)擊后鏈接變成紫色

IOS系統(tǒng)知乎應(yīng)用的3種狀態(tài)，而在Android系統(tǒng)沒(méi)有用力點(diǎn)擊這一狀態(tài)。

默認(rèn)狀態(tài)

點(diǎn)擊狀態(tài)

用力點(diǎn)擊會(huì)彈出預(yù)覽小窗口

有些時(shí)候只有2種狀態(tài)，如下圖谷歌網(wǎng)：

默認(rèn)和點(diǎn)擊后狀態(tài)一樣

鼠標(biāo)懸停時(shí)出現(xiàn)下劃線

默認(rèn)狀態(tài)

點(diǎn)擊時(shí)

而有時(shí)候比如在APP里有時(shí)候就一直只有一種狀態(tài)，也可以稱(chēng)靜態(tài)鏈接，之前的可以稱(chēng)之為動(dòng)態(tài)鏈接。在不同的使用場(chǎng)景會(huì)因?yàn)楫?dāng)時(shí)的情況選擇最合適的交互體驗(yàn)設(shè)計(jì)。有的情況下還會(huì)加上點(diǎn)擊的音效，使用戶體驗(yàn)更暢快，這在移動(dòng)端用的使用情況多一些。

總之鏈接是網(wǎng)頁(yè)不可缺少的構(gòu)成部分，每一個(gè)鏈接的呈現(xiàn)都是經(jīng)過(guò)深思熟慮的。

作者：潘瑤瓊（簡(jiǎn)書(shū)作者）

本文由 @潘瑤瓊授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

明：SVG 雖然也是標(biāo)簽，但它不是 HTML5，標(biāo)題加了 HTML5 只是為了與 canvas 放到一起。

一、為什么要學(xué) SVG ?

SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基于像素的，但是 SVG 沒(méi)有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會(huì)失真。

與其他圖像比較，SVG 的優(yōu)勢(shì)有以下幾點(diǎn)：

SVG 可以被多個(gè)工具讀取和修改。
SVG 與其他格式圖片相比，尺寸更小，可壓縮性強(qiáng)。
SVG 可任意伸縮。
SVG 圖像可以隨意地高質(zhì)量打印。
SVG 圖像可以添加文本和事件，還可搜索，適合做地圖。
SVG 是純粹的 XML，不是 HTML5。
SVG是W3C標(biāo)準(zhǔn)

二、SVG 形狀元素

2.1、svg 標(biāo)簽

SVG 的代碼都放到 svg 標(biāo)簽?zāi)兀琒VG 中的標(biāo)簽都是閉合標(biāo)簽，與html中標(biāo)簽用法一致。svg的屬性有：

有width和height，指定了svg的大小。

eg：畫(huà)一條直線，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 設(shè)置的寬高沒(méi)有帶單位，此時(shí)默認(rèn)是像素值，如果需要添加單位時(shí)，除了絕對(duì)單位，也可以設(shè)置相對(duì)單位。

viewBox 屬性

使用語(yǔ)法：<svg viewBox=" x1,y1,width,height "></svg>

四個(gè)參數(shù)分別是左上角的橫縱坐標(biāo)、視口的寬高。表示只看SVG的某一部分，由上述四個(gè)參數(shù)決定。

使用 viewBox 之后，相當(dāng)于svg整體大小不變，只能看到 viewBox 設(shè)置部分，視覺(jué)上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代碼可以直接嵌入到 html 頁(yè)面中，也可以通過(guò) html 的embed、object、iframe嵌入到html中。嵌入的時(shí)候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？

2.2.1、embed 嵌入：

使用語(yǔ)法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路徑，type 表示 embed 引入文件類(lèi)型。

優(yōu)點(diǎn)：所有瀏覽器都支持，并允許使用腳本。

缺點(diǎn)：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用語(yǔ)法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路徑，type 表示 object 引入文件類(lèi)型。

優(yōu)點(diǎn)：所有瀏覽器都支持，支持 html、html4 和 html5。

缺點(diǎn)：不允許使用腳本。

2.2.3、iframe 嵌入：

使用語(yǔ)法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路徑，width、height、frameborder 設(shè)置的大小和邊框。

優(yōu)點(diǎn)：所有瀏覽器都支持，并允許使用腳本。

缺點(diǎn)：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 標(biāo)簽直接插入 html 內(nèi)容內(nèi)，與其他標(biāo)簽用法一致。

2.2.5、連接到svg文件：

使用 a 標(biāo)簽，直接鏈接到 SVG 文件。

使用語(yǔ)法：<a href="line.svg">查看SVG</a>

三、SVG形狀元素

3.1、線 - line

使用語(yǔ)法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line標(biāo)簽創(chuàng)建線條，(x1,y1)是起點(diǎn)，(x2,y2)是終點(diǎn)，stroke繪制黑線，stroke-width是線寬。

3.2、矩形 - rect

//使用語(yǔ)法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小設(shè)置
 x="50" y="50"  //可選 左上角位置，svg的左上角默認(rèn)(0,0)
 rx="20" ry="50" //可選 設(shè)置圓角
 stroke-width="3" stroke="red" fill="pink" //繪制樣式控制
></rect>
</svg>

上述參數(shù) width、height是必填參數(shù)，x、y是可選參數(shù)，如不設(shè)置的時(shí)候，默認(rèn)為(0,0)，也就是svg的左上角開(kāi)始繪制。rx、ry是可選參數(shù)，不設(shè)置是矩形沒(méi)有圓角。fill定義填充顏色。

3.3、圓形 - circle

// 使用語(yǔ)法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定義圓心 ，可選
  r="40" // 圓的半徑
  stroke="black" stroke-width="2" fill="red"/> //繪制黑框填充紅色
</svg>

上述(cx,xy)定義圓心的位置，是可選參數(shù)，如果不設(shè)置默認(rèn)圓心是（0,0）。r是必需參數(shù)，設(shè)置圓的半徑。

3.4、橢圓 - ellipse

橢圓與圓相似，不同之處在于橢圓有不同的x和y半徑，而圓兩個(gè)半徑是相同的。

// 使用語(yǔ)法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //設(shè)置橢圓的x、y方向的半徑
  fill="purple" // 橢圓填充色
  cx="150" cy="150" //設(shè)置橢圓的圓心 ，可選參數(shù)
 ></ellipse>
</svg>

上述橢圓的兩個(gè)rx、ry兩個(gè)方向半徑是必須參數(shù)，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數(shù)，如果不設(shè)置，則默認(rèn)圓心為（0,0）。

3.5、折線 - polyline

// 使用語(yǔ)法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 繪制出一個(gè)默認(rèn)填充黑色的三角形 -->
 <polyline 
  points=" //點(diǎn)的集合
   0 ,0, // 第一個(gè)點(diǎn)坐標(biāo)
   100,100, // 第二個(gè)點(diǎn)坐標(biāo)
   100,200 // 第三個(gè)點(diǎn)坐標(biāo)
    " 
  stroke="green" 
 ></polyline>
<!-- 繪制一個(gè)臺(tái)階式的一條折線 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代碼執(zhí)行結(jié)果如圖所示：

需要注意的是 points 中包含了多個(gè)點(diǎn)的坐標(biāo)，但不是一個(gè)數(shù)組。

3.6、多邊形 - polygon

polygon 標(biāo)簽用來(lái)創(chuàng)建不少于3個(gè)邊的圖形，多邊形是閉合的，即所有線條連接起來(lái)。

// 使用語(yǔ)法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多邊形的第一點(diǎn)
   100,100,  //多邊形的第二點(diǎn)
    0,100  //多邊形的第三點(diǎn)
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon繪制的時(shí)候與折線有些類(lèi)似，但是polygon會(huì)自動(dòng)閉合，折線不會(huì)。

3.7、路徑 - path

path 是SVG基本形狀中最強(qiáng)大的一個(gè)，不僅能創(chuàng)建其他基本形狀，還能創(chuàng)建更多其他形狀，如貝塞爾曲線、2次曲線等。

點(diǎn)個(gè)關(guān)注，下篇更精彩！

色是由紅（RED），綠（GREEN），藍(lán)（BLUE ）光線的顯示結(jié)合。

顏色值

CSS中定義顏色使用十六進(jìn)制（hex）表示法為紅，綠，藍(lán)的顏色值結(jié)合。可以是最低值是0（十六進(jìn)制00）到最高值是255（十六進(jìn)制FF）

3個(gè)雙位數(shù)字的十六進(jìn)制值寫(xiě)法，以＃符號(hào)開(kāi)始。

Color Examples

1600多萬(wàn)個(gè)不同的顏色

紅，綠，藍(lán)值從0到255的結(jié)合，給出了總額超過(guò)1600多萬(wàn)不同的顏色（256 × 256 ×256）。

現(xiàn)代大多數(shù)顯示器能夠顯示至少16384種顏色。

如果你看看下面的顏色表，你會(huì)看到從0到255不同的紅燈顏色。

要看到充滿色彩混合時(shí)紅燈從0到255變化，單擊十六進(jìn)制或RGB值。

紅光16進(jìn)制值

灰階

灰階代表了由最暗到最亮之間不同亮度的層次級(jí)別,為了使您更容易選擇合適的灰色，我們已編制了灰色色調(diào)的表：

Gray

網(wǎng)絡(luò)安全色?

若干年前，當(dāng)計(jì)算機(jī)支持最大256個(gè)不同的顏色，一個(gè)216"網(wǎng)絡(luò)安全顏色"列表被建議作為Web標(biāo)準(zhǔn)，保留了40個(gè)固定的系統(tǒng)顏色。

這在現(xiàn)在看來(lái)不是很重要，因?yàn)榇蠖鄶?shù)計(jì)算機(jī)可以顯示數(shù)百萬(wàn)種不同的色彩，但選擇是留給你。

跨瀏覽器的調(diào)色板創(chuàng)建，以確保所有的計(jì)算機(jī)將顯示正確的顏色，運(yùn)行一個(gè)256色調(diào)色板：

在線咨詢(xún)

上一篇：如何實(shí)現(xiàn)一個(gè)超絲滑的勾選框組件？
下一篇：神奇的html錨點(diǎn)，讓你的網(wǎng)頁(yè)在內(nèi)部自由的跳轉(zhuǎn)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

技術(shù)貼：一篇文章看懂鏈接（超鏈接）設(shè)計(jì)

定義

樣式

1. 文本樣式的鏈接

2. 按鈕樣式的鏈接

3. 圖片樣式的鏈接

打開(kāi)方式

類(lèi)型

1. 內(nèi)部鏈接

2. 錨點(diǎn)鏈接

3. 外部鏈接

鏈接狀態(tài)

一、為什么要學(xué) SVG ?

二、SVG 形狀元素

三、SVG形狀元素

顏色值

Color Examples

1600多萬(wàn)個(gè)不同的顏色

灰階

網(wǎng)絡(luò)安全色?

您的項(xiàng)目需求