常在一些原型设计QQ讨论群里，有人咨询如何让移动端原型刚好能显示在手机屏幕上，更进一步的效果是在不同分辨率上都能正常显示，今天我们就来聊聊如何适配不同手机分辨率的问题。

一、移动端简单原型设计

先来设计一个简单的移动端的原型，上边一个标题栏，中间同内容，底端是一个菜单栏。

样式设置如下：

（1）标题栏：添加一个矩形框，命名title，大小为400*40，蓝底白字，文字左对齐，左边距10。

（2）搜索框：添加一个矩形框模拟输入框，大小为360*40，灰色边框，灰色文字，文字左对齐，文字内容为“请输入搜索内容”。

（3）几个图标：在输入框下方添加5个占位符来表示，注意将左右两个占位符分别和上方的矩形框对齐。

（4）菜单栏：在稍微下方的位置添加个矩形框，命名为menu，表示菜单栏，大小和标题栏一致，背景为浅灰色。

准备工作做好了，我们希望的效果是在手机上显示时，标题栏宽度正好和手机浏览器宽度一样，输入框和几个占位符在水平方向上处于屏幕中间位置，菜单栏在屏幕的底端。

二、移动端原型预览

好了，现在我们不做任何处理的情况下，预览一下效果。

为了在预览时不要出现左侧的工具栏影响查看，我们在按下F8键将原型导出html时注意选择“不加载工具栏”：

然后将导出的原型通过手机数据线传到手机上SD卡的某个位置（为方便，我们以Android手机为例），在手机上访问页面index.html，访问的效果如下：

我们发现除了手机屏幕比较小外，显示的效果和在电脑浏览器上的效果一样，并没有适配在手机上，也就是说，原型根本就没有识别到当前是在手机浏览器上显示。

三、修改发布参数

我们需要修改一下发布时的参数，让导出的页面能自动识别出是在手机上访问。

按下F8键，选择“移动设备”，只需要勾选“包含视口标签”，单击“生成”按钮：

重新导出原型页面，将导出的页面重新上传到手机SD卡上，再通过手机浏览器来访问，效果如下：

这时我们发现效果图已经基本差不多在手机上正常显示了。

但是，还是有点问题！

1. 标题栏和菜单栏宽度并没有和屏幕宽度一致，右边有空出一部分
2. 内容部分也没有在屏幕上水平居中显示
3. 菜单栏没有在屏幕的底端

怎么办呢？

办法是有的，这就是我们下一步要解决的问题。

四、手机屏幕分辨率适配思路

现在的问题有上面提到的三点，那么就针对这三点来处理。

（1）标题栏和菜单栏宽度并没有和屏幕宽度一致的问题

思路：我们并不知道每个手机的屏幕大小是多少，但是Axure里有函数可以获得浏览器窗口的宽度，因此只要在原型页面加载完成时，设置一下标题栏和菜单栏的宽度和窗口宽度大小一样不就行了吗？

选择当前页面，双击“页面载入时”添加事件处理：

这样在页面加载完成时，就会设置标题栏和菜单栏和屏幕宽度一致了，注意同时勾选title和menu，宽度都设置为“[[Window.width]]”。

（2）内容部分也没有在屏幕上水平居中显示

思路：我们将内容部分当作一个整体，在页面加载完成后，将内容移动到屏幕水平中面位置。

选择除标题栏和菜单栏外的内容部分，右键转换为动态面板，命名为main：

编辑前面的页面加载事件，移动动态面板main的绝对位置到屏幕水平中央位置，y位置不变，计算公式=（窗口宽度-动态面板宽度）/2，最终的表达式为“[[(Window.width-LVAR1.width)/2]]”，注意这里使用到局部变量表示动态面板：

（3）菜单栏没有在屏幕的底端

我们能取到窗口的高度，因此我们计算出菜单栏在屏幕上的位置。 具体位置=屏幕的高度-菜单栏的高度，最终表达式为“[[Window.height-LVAR1.height]]”，将菜单栏移动到这个位置即可，注意这里同样使用到了局部变量表示菜单栏：

五、最终预览效果

将原型重新导出，上传到手机上，使用手机浏览器查看，最终的效果如下：

可以看到原型已经适配了手机屏幕的大小，达到我们所需要的效果，即使你在换了不同的手机后，也同样会正常显示。

本文由 @Axure 原型设计工场 原创发布于人人都是产品经理。未经许可，禁止转载。

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

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

定义

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

样式

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

1. 文本样式的链接

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

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

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

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

2. 按钮样式的链接

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

按钮样式链接

3. 图片样式的链接

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

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

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

打开方式

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

提示用美拍APP打开

类型

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

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

1. 内部链接

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

2. 锚点链接

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

3. 外部链接

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

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

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

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

链接状态

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

点击前

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

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

点击后，下面线条粗

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

默认状态

点击时链接变红

点击后链接变成紫色

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

默认状态

点击状态

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

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

默认和点击后状态一样

鼠标悬停时出现下划线

默认状态

点击时

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

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

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

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