人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

产品设计时细节是产品经理最头疼的问题，一个button，一个链接都要考虑太多的细节问题。作者整理了常见的一些功能设计问题，一篇文章看懂这些功能设计。来学习吧。

定义

链接也称为超链接，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

样式

链接可以是一个字或是一段字这样的文本，也可以是一个按钮，一张图片，当你点击后跳转到另一个目标，当你把鼠标指针移到某个链接时会变成一个小手，当然在手机上没有这一特点。

1. 文本样式的链接

文本样式的链接一般在搜索引擎的网站呈现蓝色字样，大多会在下面加上下划线以便识别，不过现如今考虑到不影响文本的可读性与用户体验，逐渐取消了下划线。而在一些别的网站考虑到界面设计风格各方面的因素而不用蓝色。

谷歌的文本链接是蓝色，没有下划线

百度的文本链接也是蓝色，关键词是红色，有下划线

而京东的文本链接有灰色，有白色，有黑色

2. 按钮样式的链接

按钮样式的链接比文本样式的更容易识别，每一个按钮都是一样链接。

按钮样式链接

3. 图片样式的链接

图片样式的链接可以是单独的一张图片，也可以是文字与按钮一起组成一张图片，只是鼠标指针扫过图片的任何一个部位都会变成小手。

如桌面弹出这种游戏小窗口的图片式链接

由文字/图/按钮样式一起构成的一张图片式按钮，鼠标可以点击图中任何一部位

打开方式

链接打开的方式有三种：第一种是在当前页面刷新跳转，国外的网站大多是这样的打开式；第二种是在新标签页面打开链接，国内大多采用这种；第三种是提示用APP打开。当然现在出现了一种新的打开方式，那就是二维码扫描。

提示用美拍APP打开

类型

按照连接路径的不同，网页中超链接一般分为以下3种类型：内部链接，锚点链接和外部链接。

链接还可以分为动态链接和静态链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态链接，顾名思义，就是没有动态效果的链接。

1. 内部链接

与外部链接（即反向链接）相反，内部链接是指同一网站域名下的内容页面之间互相链接。如频道、栏目、终极内容页之间的链接，乃至站内关键词之间的Tag链接都可以归类为内部链接，因此内部链接我们也可以称之为站内链接，对内部链接的优化其实就是对网站的站内链接的优化。

2. 锚点链接

HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。

3. 外部链接

外部链接，又常被称为：“反向链接”或“导入链接”，是指通过其他网站链接到你的网站的链接。

外部链接指的是针对搜索引擎，与其它站点所做的友情链接。高质量的外部链接指：和你的网站建立链接的网站知名度高，访问量大，同时相对的外部链接较少，有助于快速提升你的网站知名度和排名的其他网站的友情链接。

如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。

链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。

链接状态

链接在交互上一般会呈现4种状态，即默认状态/悬停时状态/点击时状态/点击后状态。比如谷哥网站的交互体验。如下图：

点击前

悬停时，下面浮现半透明线条

点击时，有波纹晕开的动态效果

点击后，下面线条粗

有时候是3种状态，比如百度网和知乎应用：

默认状态

点击时链接变红

点击后链接变成紫色

IOS系统知乎应用的3种状态，而在Android系统没有用力点击这一状态。

默认状态

点击状态

用力点击会弹出预览小窗口

有些时候只有2种状态，如下图谷歌网：

默认和点击后状态一样

鼠标悬停时出现下划线

默认状态

点击时

而有时候比如在APP里有时候就一直只有一种状态，也可以称静态链接，之前的可以称之为动态链接。在不同的使用场景会因为当时的情况选择最合适的交互体验设计。有的情况下还会加上点击的音效，使用户体验更畅快，这在移动端用的使用情况多一些。

总之链接是网页不可缺少的构成部分，每一个链接的呈现都是经过深思熟虑的。

作者：潘瑶琼（简书作者）

本文由 @潘瑶琼 授权发布于人人都是产品经理，未经作者许可，禁止转载。

这个网站（minimal-portfolio-swart.vercel.app）发现一个不错的交互效果，用户体验效果很不错。如上图所示，这个卡片上有一根白色的线条围绕着卡片移动，且在线条的卡片内部跟随这一块模糊阴影，特别是在线条经过卡片圆角部分有特别丝滑的感觉。

今天的文章就来解析如何实现这种效果，文末附源码预览地址。根据示例图片分析需要实现的功能点如下：

• 线条跟随卡片边框匀速移动
• 线条内部对应有模糊阴影
• 圆角部分丝滑动画

这里为什么单独说明圆角部分是因为这块需要特殊处理，请看后面的文章。

思考

看到这个效果首先感觉是丝滑，沿着边框移动的动画元素如果是根据当前边框实时计算而来的话，那么难度和算法会劝退很多人。

需要换一种思路，本质移动的线条元素和边框并没有关系，而是一个元素沿着边框移动，线条和卡片内部的阴影就是一个元素，通过某种透视的方式产生了这种效果。

透视

通过透视的方式实现一个边框效果，我们可以用2个盒子嵌套，父级设置1像素的padding，如下代码简单的实现一个边框效果。

.outer {
  width: 400px;
  height: 200px;
  margin: 100px;
  background: rgb(54, 224, 202);
  padding: 1px;
  position: relative;
}

.inner {
  background: rgb(99, 99, 99);
  width: 100%;
  height: 100%;
}

效果图：

然后增加一个子元素作为移动的元素，这个元素基于父级定位在边框位置，由于动画是沿着卡片内部四周移动，要确保在每一条边上的透出的长度保持一致，所有创建的这个子元素是一个正方形。

.moving-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: #fff;
    animation: moveAround 8s linear infinite;
}

并对这个元素增加简单的animation动画，沿着内边框移动。

这个动画需要注意的一个点是要使元素在移动的过程中保持匀速的动画，需要计算每个关键帧之间的距离，并根据这些距离来调整每个关键帧的百分比。这样可以确保元素在每个时间段内移动的距离与时间成正比，从而实现真正的匀速移动。

这里我们以上面的卡片举例，其宽度为400px，高度为200px，元素沿矩形的边框移动。

• 计算总路径长度：总长度 = 2 (宽度 + 高度) = 2 (400px + 200px) = 1200px
• 计算每段所占的时间比例：水平边所占比例 = 400px / 1200px = 1/3 ≈ 33.33%，垂直边所占比例 = 200px / 1200px = 1/6 ≈ 16.67%

动画代码如下：

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: calc(100% - 80px);
    }
    50% {
        top: calc(100% - 80px);
        left: calc(100% - 80px);
    }
    83.33% {
        top: calc(100% - 80px);
        left: 0px;
    }
}

最终完成的简单版动画效果如下：

这里为了方便大家看增加了透明度展示内部移动的元素，若去掉透明度则只有边框上的一根线。

边框效果处理

仔细看上面的图可以发现在边框尽头时的过渡效果不好，瞬间从一条边切换到另一条边。首先还原网站的效果，增加边框圆角，然后将内部移动的元素通过圆角变成一个圆形，这时候还需要同步调整内部元素的定位和动画移动时设置的定位，保证内部圆形的中心和边框的一致。

增加圆角处理：

.outer {
  border-radius: 20px;
}

.inner {
  border-radius: 20px;
}

.moving-element {
  border-radius: 40px;
  /* 圆心和边框一致 */
  transform: translate(-40px, -40px);
}

调整动画过程中的定位：

@keyframes moveAround {
    0%, 100% {
        top: 0px;
        left: 0px;
    }
    33.33% {
        top: 0px;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 100%;
    }
    83.33% {
        top: 100%;
        left: 0px;
    }
}

此时的动画效果：

此时的边框位置动画已经很接近网站的效果，进一步观察在图中的效果可以发现在边框角落的位置有一点卡顿的感觉，这是因为边框位置我们设置了圆角，但是元素移动的轨迹是直角，导致视觉上停顿了一下。这里我们需要进一步优化animation。设置圆角后内部动画元素移动的点应该从4个变成8个，且对应的位置需要和圆角的大小一一对应才能保障流畅的动画效果。

如下所示黑色圆点是到四个顶点的动画坐标，新的绿色圆点是基于圆角后的动画移动坐标。

基于上面的动画百分比算法计算出最新的比例及坐标代码如下：

@keyframes moveAround {
  0% { left: 40px; top: 0px; }
  28.93% { left: 360px; top: 0px; } 
  33.99% { left: 400px; top: 40px; } 
  44.82% { left: 400px; top: 160px; }
  49.88% { left: 360px; top: 200px; } 
  78.81% { left: 40px; top: 200px; }
  83.87% { left: 0px; top: 160px; } 
  94.70% { left: 0px; top: 40px; } 
  100% { left: 40px; top: 0px; } 
}

这里的动画需要注意的是圆角部分绿色按钮之间的动画距离需要使用使用勾股定理计算。比如右上角的两个点之间的计算方式是：

从 (360, 0) 到 (400, 40) = √((400-360)² + (40-0)²) = √(1600 + 1600) = √3200 ≈ 56.57px

此时的动画效果：

模糊阴影

现在就差最后的阴影部分还未实现，仔细观察移动的线条并不是全实心纯色，而是有渐变的效果，目前移动的元素是一个正方形，设置背景色为径向渐变即可，修改背景色的代码如下：

background-image: radial-gradient(#fff 40%,transparent 80%);

现在还需要将内部的渐变进一步模糊，注意这里仅仅是模糊元素背后的背景，不能影响卡片上面其他的元素内容展示。这里我们使用backdrop-filter设置blur模糊效果。

CSS属性 backdrop-filter 用于在元素后面的区域上应用图形效果（如模糊或颜色偏移）。这个属性可以让你对元素背后的背景进行处理，而不影响元素本身的前景内容。

最后进一步调整颜色还原网站的效果如下：

这个效果不仅可以做卡片展示，作为按钮的背景效果也很不错：

最后

到此整体的代码实现过程就结束了，完整还原的网站的动画效果。这是一个对用户体验很不错的卡片效果，原网站实现的部分细节不一样，整体实现原理差不多，基于两个元素的1像素间距透出移动的线条，配合使用backdrop-filter设置纯背景模糊效果，有兴趣的可以尝试看看。

作者:南城

来源-微信公众号:南城大前端

出处:https://mp.weixin.qq.com/s/g-_3iD97PxmGL7RGwRrSvg

、什么是canvas?

canvas是h5新增的标签。由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。简单的来说就是一块画布。

新增的标签，所以它是有兼容性问题的。 Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>, Internet Explorer 从 IE9 开始 <canvas> 。Chrome 和 Opera 9+ 也支持 <canvas>

二、canvas的使用。

在html文件的<body></body>标签中书写canvas标签。并限定画布的大小（不设宽高的话，默认宽300px，高150px），由于有一部分浏览器并不支持canvas标签，所以在标签里加入的替换的内容，当浏览器不显示canvas标签时，会有替换的内容做提示用。

<body>
    <canvas id="canvas" width="300" height="300">
        <span>你的浏览器不支持 canvas，请升级你的浏览器。</span>
    </canvas>
</body>

接着我们需要用js对canvas进行绘画。需要先获取canvas元素，如下：

var canvas = document.getElementById('canvas');   //  获取canvas标签
var ctx = canvas.getContext('2d');  // 创建内容对象

 if (!canvas.getContext) return; // 画图判断，如果不能画，自动结束

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们先在js文件里画一条直线：

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
    if (!canvas.getContext) return; 
  
    ctx.moveTo(0,0);  // 指定线的起点 ,moveTo的两个参数依次代表x轴坐标，y轴坐标。
    ctx.lineTo(200,100);  // 指定线的下一点 ,lineTo的两个参数依次代表x轴坐标，y轴坐标。
    ctx.stroke();  // 把刚才的路径以线条的方式展示出来
  //   在此处可以接着画出更多内容
}

draw()

得到如图所示的一条斜线：

解释一下上面的位置坐标，现在我们设置的画布宽和高都是300，（0，0）就相当于画布的左上角，（300，300）就相当于画布的右下角。

画一条宽度为10的线：

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
    ctx.moveTo(100,100);  
    ctx.lineTo(200,100);  
    ctx.lineWidth = 10;  //设置线的宽度10px;
    ctx.stroke();  
}

draw()

设置线的端点的样子和线条颜色：

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
    ctx.moveTo(100,100);  
    ctx.lineTo(200,100);  
    ctx.lineWidth = 10; 
   ctx.lineCap="round"; // 此处设置以圆形结束，"butt", "round", "square"可以自己试一试。
    ctx.strokeStyle="blue" ; //设置线条的颜色，如果不设置，默认填充黑色
    ctx.stroke();  
}

draw()

画虚线：用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式。 setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset属性设置起始偏移量。

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
    ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
    ctx.lineDashOffset = -0;
    ctx.strokeRect(50, 50, 210, 210);
}

draw()

画连续两条直线：

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
    ctx.moveTo(100,100);  
    ctx.lineTo(150,150);  
    ctx.lineTo(200,100);  
    ctx.stroke();  
}

draw()

画一个三角形：

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
  // 第一条路径
    ctx.beginPath(); //新建一条path
     ctx.moveTo(100,100);  
    ctx.lineTo(150,150);  
    ctx.lineTo(200,100); 
    ctx.closePath(); // 结束这条路径。这时候会把起点和终点连接起来。
    ctx.stroke();  
}

draw()

你会发现这次画直线多了ctx.beginPath();ctx.closePath();这样的话就可以自动首尾相连，成为一个闭合的图形，当然，你直接画一条线把首尾连接起来也可以。

可以给三角形填充颜色：

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
  // 第一条路径
    ctx.beginPath(); //新建一条path
    ctx.moveTo(100,100);  
    ctx.lineTo(150,150);  
    ctx.lineTo(200,100);  
    ctx.closePath(); // 结束这条路径。这时候会把起点和终点连接起来。
    ctx.stroke();  
   ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
}

draw()

填充我们自定义颜色

function draw(){
    var canvas = document.getElementById('canvas');  
    var ctx = canvas.getContext('2d'); 
      if (!canvas.getContext) return; 
  
  // 第一条路径
    ctx.beginPath(); 
    ctx.moveTo(0,40);  
    ctx.lineTo(200,40);  
    ctx.lineTo(200,60);   
    ctx.closePath(); 
    ctx.strokeStyle="blue";
    ctx.stroke();  
  
   ctx.fillStyle="red"; //设置填充的颜色，如果不设置，默认填充黑色
   ctx.fill(); 
}

draw()

欢迎点赞关注，下期继续讲解canvas更多知识！