人人都是產品經理【起點學院】，BAT實戰派產品總監手把手系統帶你學產品、學運營。

產品設計時細節是產品經理最頭疼的問題，一個button，一個鏈接都要考慮太多的細節問題。作者整理了常見的一些功能設計問題，一篇文章看懂這些功能設計。來學習吧。

定義

鏈接也稱為超鏈接，所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據目標的類型來打開或運行。

樣式

鏈接可以是一個字或是一段字這樣的文本，也可以是一個按鈕，一張圖片，當你點擊后跳轉到另一個目標，當你把鼠標指針移到某個鏈接時會變成一個小手，當然在手機上沒有這一特點。

1. 文本樣式的鏈接

文本樣式的鏈接一般在搜索引擎的網站呈現藍色字樣，大多會在下面加上下劃線以便識別，不過現如今考慮到不影響文本的可讀性與用戶體驗，逐漸取消了下劃線。而在一些別的網站考慮到界面設計風格各方面的因素而不用藍色。

谷歌的文本鏈接是藍色，沒有下劃線

百度的文本鏈接也是藍色，關鍵詞是紅色，有下劃線

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

2. 按鈕樣式的鏈接

按鈕樣式的鏈接比文本樣式的更容易識別，每一個按鈕都是一樣鏈接。

按鈕樣式鏈接

3. 圖片樣式的鏈接

圖片樣式的鏈接可以是單獨的一張圖片，也可以是文字與按鈕一起組成一張圖片，只是鼠標指針掃過圖片的任何一個部位都會變成小手。

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

由文字/圖/按鈕樣式一起構成的一張圖片式按鈕，鼠標可以點擊圖中任何一部位

打開方式

鏈接打開的方式有三種：第一種是在當前頁面刷新跳轉，國外的網站大多是這樣的打開式；第二種是在新標簽頁面打開鏈接，國內大多采用這種；第三種是提示用APP打開。當然現在出現了一種新的打開方式，那就是二維碼掃描。

提示用美拍APP打開

類型

按照連接路徑的不同，網頁中超鏈接一般分為以下3種類型：內部鏈接，錨點鏈接和外部鏈接。

鏈接還可以分為動態鏈接和靜態鏈接。動態超鏈接指的是可以通過改變HTML代碼來實現動態變化的鏈接，例如我們可以實現將鼠標移動到某個文字鏈接上，文字就會象動畫一樣動起來或改變顏色的效果，也可以實現鼠標移到圖片上圖片就產生反色或朦朧等等的效果。而靜態鏈接，顧名思義，就是沒有動態效果的鏈接。

1. 內部鏈接

與外部鏈接（即反向鏈接）相反，內部鏈接是指同一網站域名下的內容頁面之間互相鏈接。如頻道、欄目、終極內容頁之間的鏈接，乃至站內關鍵詞之間的Tag鏈接都可以歸類為內部鏈接，因此內部鏈接我們也可以稱之為站內鏈接，對內部鏈接的優化其實就是對網站的站內鏈接的優化。

2. 錨點鏈接

HTML中的鏈接，正確的說法應該稱作"錨點"，它命名錨點鏈接（也叫書簽鏈接）常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，不僅讓我們能指向文檔，還能指向頁面里的特定段落，更能當作"精準鏈接"的便利工具，讓鏈接對象接近焦點。便于瀏覽者查看網頁內容。類似于我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時，標記錨點是最佳的方法。

3. 外部鏈接

外部鏈接，又常被稱為：“反向鏈接”或“導入鏈接”，是指通過其他網站鏈接到你的網站的鏈接。

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

如果按照使用對象的不同，網頁中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點鏈接，多媒體文件鏈接，空鏈接等。

鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實現鏈接，如果單擊該鏈接，則相當于指示瀏覽器移至同一網頁內的某個位置，或打開一個新的網頁，或打開某一個新的WWW網站中的網頁。

鏈接狀態

鏈接在交互上一般會呈現4種狀態，即默認狀態/懸停時狀態/點擊時狀態/點擊后狀態。比如谷哥網站的交互體驗。如下圖：

點擊前

懸停時，下面浮現半透明線條

點擊時，有波紋暈開的動態效果

點擊后，下面線條粗

有時候是3種狀態，比如百度網和知乎應用：

默認狀態

點擊時鏈接變紅

點擊后鏈接變成紫色

IOS系統知乎應用的3種狀態，而在Android系統沒有用力點擊這一狀態。

默認狀態

點擊狀態

用力點擊會彈出預覽小窗口

有些時候只有2種狀態，如下圖谷歌網：

默認和點擊后狀態一樣

鼠標懸停時出現下劃線

默認狀態

點擊時

而有時候比如在APP里有時候就一直只有一種狀態，也可以稱靜態鏈接，之前的可以稱之為動態鏈接。在不同的使用場景會因為當時的情況選擇最合適的交互體驗設計。有的情況下還會加上點擊的音效，使用戶體驗更暢快，這在移動端用的使用情況多一些。

總之鏈接是網頁不可缺少的構成部分，每一個鏈接的呈現都是經過深思熟慮的。

作者：潘瑤瓊（簡書作者）

本文由 @潘瑤瓊 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

近做一個項目，要通過掃一掃查詢對應的信息，由于現在已經有一部分二維碼已被生成，為了兼顧已生成的二維碼，所以需要使用網頁的掃一掃功能去完成項目。

項目使用技術棧：vue2

方案一、js 原生

熱心的同事幫我已經找好了網頁掃一掃 DEMO，給我說已經測試過了，Andriod 和 IOS 都可以正常使用。

使用 QRScanner 插件

其原理是通過 navigator.mediaDevices.getUserMedia 來獲取用戶的攝像頭使用權限：

navigator.mediaDevices.getUserMedia(constraints)
.then(res => {  })
.catch(err => {  })

使用自己的 蘋果11 測試完全正常，放置服務器上，讓同事掃碼的時候，真的是異常百態！存在的問題：

1、網頁必須使用瀏覽打開，不可以使用微信內置瀏覽器。如果是微信打開，會提示 “對不起，未識別到掃描設備”。

2、有些手機，攝像頭一直是前置攝像頭，通過 facingMode 設置無效：

{ facingMode: { exact: "environment" } }

3、非手機內置瀏覽器，如：QQ、UC、百度等瀏覽器APP內，會存在找不到掃瞄設備。

4、最重要的是用戶體驗差。用戶需要在瀏覽器打開，授權之后，才能進行掃碼。

5、開發需要調試的設備較多。navigator.mediaDevices.getUserMedia 兼容性差。

方案二、vue-qr 插件

官方文檔：https://www.npmjs.com/package/vue-qr

該插件不僅支持 vue2 ，還支持 vue3 。功能強大，能夠生成二維碼，還能夠掃描、識別二維碼，解析二維碼。

git 地址：https://github.com/MuGuiLin/QRCode

• 有一個 HTML 版本。
• 有一個 vue.js 版本。

測試地址：Demo：https://muguilin.github.io/QRCode

存在問題：

1、網頁必須使用瀏覽打開，不可以使用微信內置瀏覽器。如果是微信打開，會提示 “對不起，未識別到掃描設備”。

2、非手機內置瀏覽器，如：QQ、UC、百度等瀏覽器APP內，會存在找不到掃瞄設備。

3、最重要的是用戶體驗差。用戶需要在瀏覽器打開，授權之后，才能進行掃碼。

方案三、微信掃一掃

我把測試地址發到公司群，讓同事幫我測試的時候，我發現程序員測試都說沒問題，非程序員基本都是直接使用微信，點擊掃一掃的時候，統一都是：“ 對不起，未識別到掃描設備 ”。轉念一想，掃一掃好像是給開發同事做的。

轉換思路，讓用戶在微信內直接點進去之后就可以進行掃碼！所以選擇 微信網頁開發 -> 調用微信掃一掃。

優點：

1、用戶使用方便，直接可以使用微信掃碼。

2、開發方便，不用再考慮兼容安卓和ios的各種瀏覽器。

實現步驟：

• 1、引入

引入方式1：

index.html 入口文件處引入 js 插件

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

在 wx 使用頁面處，可以直接通過 window.wx 引用。

引入方式2：

npm install weixin-js-sdk

在需要使用的頁面處，引入 wx 模塊：import wx from 'weixin-js-sdk'

• 2、配置

wx.config({
 debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
 appId: '', // 必填，公眾號的唯一標識
 timestamp: , // 必填，生成簽名的時間戳
 nonceStr: '', // 必填，生成簽名的隨機串
 signature: '',// 必填，簽名
 jsApiList: [] // 必填，需要使用的JS接口列表
});

• 3、調用方法

wx.scanQRCode({
 needResult: 0, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
 scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
 success: function (res) {
  var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果
 }
});

具體的實現步驟以及可能遇到的問題都總結到《手把手教你調用微信掃一掃！三分鐘包會》，需要的自行查閱。

npm install qrcanvas
//或者
yarn add qrcanvas

import { qrcanvas } from 'qrcanvas';

<div id="qrcode"></div>
<script src="https://cdn.jsdelivr.net/npm/qrcanvas@3"></script>

const canvas = qrcanvas.qrcanvas({
 data: 'hello, world'
});
document.getElementById('qrcode').appendChild(canvas);

const fs = require('fs');
const { qrcanvas } = require('qrcanvas/lib/qrcanvas.node.js');
const canvas = qrcanvas({
 data: 'hello, world'
});
// canvas is an instance of `node-canvas`
canvas.pngStream().pipe(fs.createWriteStream('qrcode.png'));

npm install qrcanvas-vue
//或者
yarn add qrcanvas-vue

<template>
 <QRCanvas :options="options" @updated="onUpdated" />
</template>
<script>
import { QRCanvas } from 'qrcanvas-vue';
export default {
 components: {
 QRCanvas,
 },
 data() {
 return {
 options: {
 data: 'hello',
 },
 };
 },
 methods: {
 onUpdated() {
 console.log('updated');
 },
 },
};
</script>

<script src="https://cdn.jsdelivr.net/combine/npm/qrcanvas@3,npm/qrcanvas-vue@2"></script>
<div id="root">
 <qr-canvas :options="options" @updated="onUpdated"></qr-canvas>
</div>

const { QRCanvas: QrCanvas } = qrcanvas.vue;
new Vue({
 components: {
 QrCanvas, // QrCanvas <-> qr-canvas
 },
 data: {
 options: {
 data: 'hello',
 },
 },
 methods: {
 onUpdated() {
 console.log('updated');
 },
 },
})
.$mount('#root');

npm install qrcanvas-react
//或者
yarn add qrcanvas-react

import { QRCanvas } from 'qrcanvas-react';
import ReactDOM from 'react-dom';
const options = { data: 'hello, world' };
ReactDOM.render(<QRCanvas options={options} />, document.getElementById('app'));