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

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

定義

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

樣式

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

1. 文本樣式的鏈接

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

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

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

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

2. 按鈕樣式的鏈接

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

按鈕樣式鏈接

3. 圖片樣式的鏈接

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

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

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

打開方式

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

提示用美拍APP打開

類型

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

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

1. 內部鏈接

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

2. 錨點鏈接

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

3. 外部鏈接

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

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

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

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

鏈接狀態

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

點擊前

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

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

點擊后，下面線條粗

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

默認狀態

點擊時鏈接變紅

點擊后鏈接變成紫色

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

默認狀態

點擊狀態

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

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

默認和點擊后狀態一樣

鼠標懸停時出現下劃線

默認狀態

點擊時

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

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

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

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

近跟一些在做B端產品的小伙伴閑聊，發下大家初做B端產品存在的普遍問題是：明明網上有不少可參考的設計規范總結歸納的已經很詳細了，但是到真正使用的時候還是會存在這樣或那樣的問題，到底用哪個好呢？還有沒有更好的設計方案呢，這也是我一直在思考的問題，不斷嘗試推翻，嘗試推翻……

目錄：

1. 輸入框的不同狀態
2. 輸入框的暗提示用法
3. 輸入框字數限制的不同用法
4. 輸入框寬高的延展使用
5. 畫重點

好了，廢話不多說了！我們就從表單中最基礎的組件輸入框說起吧！

輸入框的不同狀態

那么關于輸入框的不同狀態分為：未輸入、已輸入、只讀不可修改、系統信息帶入可修改、禁用、鼠標懸停、輸入激活、可清空、加載

1. 系統自動錄入信息

未輸入和已輸入這里我們暫不多說，大家都比較清楚了。

那么當系統自動帶出數據信息的時候輸入框通常采用的是只讀狀態，只讀狀態分為可修改和不可修改2種形式，不可修改我們通常會將輸入框的背景色調節成灰色，而可修改狀態的顯示方式跟用戶已輸入后的狀態顯示是一致的。只讀不可修改的狀態常用于系統自動帶出的文本數據及數字輸入相關計算的總和數據。

如下圖舉例：

男女數量分別需要用戶手動輸入，而合計人數則是系統自動計算錄入的。

2. 禁用狀態

禁用狀態通常是表單中不需要用戶錄入信息的輸入框采用此類狀態，需要用灰色背景及灰色字來進行區分。

3. 輸入信息的操作態

操作態分為：鼠標懸停——鼠標點擊——信息錄入——信息自動檢索——信息清空。

鼠標懸停：當鼠標移動到輸入框上會有一個激活的狀態，如上圖的鼠標懸停狀態，輸入框的邊框顏色變藍。

鼠標點擊：當鼠標點擊之后變藍的輸入框外側會溢出半透明的顏色描邊，光標會變成相對應的藍色。

這2種狀態配合使用，會讓整個操作反饋更加細膩，目前市面上常見的用法是2者配合或者只采用一種狀態不做細節區分。

加載：加載一般多用于輸入框內的搜索過程，其他地方的運用似乎很少見。其優點是提升系統反饋的細膩度，尤其是當網絡不佳的狀態下，動態加載給用戶一定的未知預期。如果沒有則用戶無感知，也不知道系統下一步要做什么。

那么利用加載的自身優勢，其實我們可以賦予輸入框更多的信息功能。例如在輸入框內還可以放置特定的功能圖標，例如幫助按鈕，點擊幫助按鈕后系統自動加載并彈出幫助說明。

這里在IOS的APP STORE也有應用，有興趣的同學可以把玩一下。可清空：可清空的狀態是用戶想要快捷刪除所輸入的信息，在輸入框右側放置一個刪除按鈕能夠快捷的進行刪除，并進入二次輸入模式

4. 輸入框狀態的拓展使用

當我們輸入較多的文本時，由于輸入框的寬度及使用場景的局限，無法預覽到全部輸入內容時，但又想能夠展示出輸入后的文本以遍用戶查看，此時就需要拓展輸入框的狀態了。

如下圖所示：

我們可以設計出輸入框的展開狀態，鼠標懸停時觸發展開效果，且在右下角放置清空按鈕便于用戶隨時更改輸入信息。

注意：這里輸入框的展開是從下往上展開！

輸入框的暗提示用法

輸入框的暗提示用法通常分為框內提示、框外提示、校驗提示。

（1）框內提示

出現在輸入框內部的文本，為淺灰色。需要注意的是暗提示描述用語，如下圖所示：

例如：請輸入字段標簽，與字段標簽的標題重復，這種重復性的暗提示是不必要的。此時如果沒有其他文本能夠做解釋說明，那么暗提示只顯示請輸入即可，如果能夠更詳細的進行解釋說明，我們則可以詳細的加1以說明，比如：請根據XX進行輸入。當然具體還是要根據實際運用場景來設定文本內容。

（2）框外提示

框外提示包括：框外文本提示、框外圖標提示、隱藏提示。

框外文本提示：文本置于輸入框外側下方位置，也采用灰色系。

如下圖所示：

其優點是包容性強，可以運用于字數限制、更詳細的解釋說明、超鏈接等。

注意：文本外側的暗提示是可以與框內暗提示一起使用的。

框外圖標提示：分為圖標提示、隱藏氣泡提示、下拉框提升、頂部浮層提示。

如下圖所示：

圖標提示：一般用于提示文本較多的情況使用，比如當框外文本超過一行時，又不想用多行進行展示就可以采用圖標提示。

隱藏氣泡提示：當鼠標懸停到輸入框上時輸入框上方出現氣泡提示，適用于提示文本較少的情況。另外氣泡提示的位置可根據使用場景變動，具體可參考螞蟻規范，這里就不多講了。

下拉提示：也是經常使用的，例如用戶在輸入手機號時，如果系統之前自動記錄過歷史輸入信息，則下拉提示就會出現，用戶只需點擊一下，無需重新輸入。其拓展用法時輸入與搜索相關聯，用戶只需要輸入關鍵字，即可下拉展示出多個關聯信息，這里暫不細講了，在后續系列文章中會重點講輸入框與枚舉結合的多種復雜用法，敬請期待。

浮層提示：位于輸入框的上方，同樣是用于輸入框內輸入內容較多的情況時使用的。功能與前文中介紹的輸入框的展開狀態有點類似。如果純文本展示更推薦用輸入框的展開狀態，如果是標簽展示則推薦用浮層，如下圖所示：

（3）校驗提示

輸入框的校驗狀態分為：輸入正確校驗、輸入錯誤校驗、輸入警告。

輸入正確校驗：當輸入框的文本輸入正確的時候，通常的處理方式是不會有任何提示，反而當輸入錯誤的時候會提示錯誤信息。當然如果想要加強用戶輸入正確的正向反饋通常在輸入框右側放置勾號的圖標，如下圖所示：

輸入錯誤校驗：當用戶輸入錯誤的時候最常見的設計方式是輸入框的顏色變紅，輸入框下方出現文字提示。這里不建議配合使用下拉浮層，因為當表單結果較為復雜且密集的時候，下拉浮層會遮擋掉下一行的輸入框信息。我們只需要采用紅色的錯誤提示文字即可，無需配置圖標。

輸入警告：關于輸入警告，這里我并沒有加校驗二字，是因為警告校驗使用頻率遠不如錯誤校驗，基本上錯誤校驗已然能夠很好的解決問題了，警告校驗似乎顯得比較多余。

例如上圖第一行右側的輸入框，其常見于市面上能夠見到的規范設定中，但其使用率確及低。其原因就是它的強調程度過高，基本與錯誤校驗提示并不太大區別。

那么警告提示要如何使用呢？

這里我們可以借鑒移動端產品的使用方式。通常我們在輸入對應的字段的時候，可根據輸入的不同內容進行校驗，比如金額超過了XX元，可能導致無法XX。又不需要采用錯誤校驗這么強的提示，這個時候警告提示與框外提示文本就能夠更好的結合使用。只需要采用黃色文字來突出警告提示語即可。

輸入框字數限制的不同用法

關于輸入框的數字限制，我們最常見的就是文本域多行輸入框，其在右下角會顯示字數限制。

如下圖所示：

那么如果是單行文本框的字數限制要如何設計呢？

有三種方式：

1. 輸入框內末尾提示：當輸入字數錯誤的時候提示數字變紅；
2. 框外文本提示：設置對應的字數限制信息，輸入錯誤時直接變換為錯誤校驗樣式；
3. 框內文本提示：框內的暗提示直接顯示限制字數信息，其缺陷是不適合再添加其他暗提示信息了。

輸入框寬高的延展使用

由于B端產品的特性，其業務屬性相當復雜。僅有的基礎輸入框的寬高已經無法滿足日益復雜的業務需求。為了讓輸入框的可用性更佳，我們可以對輸入框的高度和寬度進行不同尺寸的設定。

1. 對輸入框的高度設定

在市面上常見的設計規范中，對輸入框的高度設定通常分為3個不同的尺寸，如下圖所示：

大號尺寸通常為40px、常規尺寸為32px、小型尺寸通常為28px或24px等。對應不同尺寸如何的運用常見在規范上確并沒有詳細說明，實際運用的案例中也較為少見。那么為了對比其差異我提取了最大號的輸入框高度40px和最小號的輸入框24px，在同一復雜使用場景下所呈現的效果進行比對，如下圖所示：

我們可以看到40px高度的輸入框所呈現的效果明顯比24px的輸入框所呈現的效果擁擠，小號的留白空間更大，整個區域的透氣性更佳。那么對應不同高度的輸入框如何運用詳細大家也都有了判斷。

2. 對輸入框的寬度設定

對于輸入框的寬度設定，大家一定都有過困惑，當頁面需要采用多列的形式進行展示，采用相同寬度的輸入框并不能達到節省空間的目的，而且在遇到復雜的業務組件的時候固定寬度的輸入框更是無法滿足業務功能的特殊需求。

那么我們要如何設定輸入框的寬度呢？

這里我們就需要運用到刪格化系統對輸入框的寬度進行定義了，如下圖所示：

我們先來了解下基礎的刪格知識，首先1pt=1px,由于屏幕分辨率是X和Y坐標相乘的結果，所以在2倍分辨率下1pt=4px，以此類推在3倍分辨率下1pt=9px網頁的基礎刪格單位是8pt

如上述推理可得：

• 在@1x 分辨率下8pt=8px
• 在@2x分辨率下8pt=32px
• 在@3x分辨率下8pt=72px

而我們看到的網頁通常采用的是@2x分辨率，所以我們在設定輸入框的寬度則需要設置成：8pt=32px=4px*8px。

也就是4和8的倍數，如下圖所示：

畫重點

關于輸入框的基礎設計細節主要講了：

1. 關于輸入框的不同狀態分為：未輸入、已輸入、只讀不可修改、系統信息帶入可修改、禁用、鼠標懸停、輸入激活、可清空、加載、輸入信息的操作態，以及輸入框狀態的拓展使用。
2. 輸入框的暗提示用法通常分為框內提示、框外提示、校驗提示
3. 輸入框的數字限制分為：輸入框內末尾提示、框外文本提示、框內文本提示
4. 輸入框不同高度的呈現對比，以及如何運用刪格系統為輸入框定義寬度

參考文獻：http://www.woshipm.com/ucd/577874.html

作者：角馬X

本文由 @角馬X 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議