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

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

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

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