人人都是产品经理【起点学院】，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'));