佔位符文本是什麼？應該怎麼設計？

來自專欄 技術之美

如果你經常做PPT，想必對佔位符應該會比較熟悉，那麼佔位符文本又是啥？看看本文題圖，知乎（或是其他平台）登錄界面中的表單填寫框內，那兩行灰色的文字就是佔位符文本。有沒有注意到，不同網站或app的登陸界面上的佔位符文本，不但具體文字內容不同，功能類別甚至是背後的交互邏輯都是不一樣的。所以佔位符文本應該是以怎樣的形態存在於UI中呢？目前百度谷歌能找到的相關論文或是規範書很少，之前在我Medium上看到一篇論述此主題的文章，有些小亮點但還存在諸多謬誤，所以寫下這篇文章供大家參考、交流。

所謂佔位符（Placeholder），是界面設計中常用到的一種元素，它可以包含具體的功能或是信息的組織結構。用戶面對空白的電子錶單等界面時，往往會產生不能理解交互方式的「認知摩擦」。佔位符的主要作用就是在此類用戶界面中佔據一定的空間面積，既能調節或控制界面給用戶的視覺傳達效果，同時又可以實現對用戶進行默認的提示、說明或引導等功能。

在用戶填寫表單的界面中，佔位符常常以文本的形式呈現，作為對錶單填寫欄或選項的補充說明，因此被也稱為佔位符文本。在不同場景下，佔位符文本有著不一樣的設計目的與職能，暫且可以從設計目的出發，概括為兩大類——

使用佔位符文本常見的目的有兩大類別：視覺優化、功能優化。

• 視覺優化角度的具體功能有：

第一 「統一視覺效果」功能——基於佔位符文本的表現形式為文本這一特性而實現，可以使界面上的圖形元素減少，使文本元素與線框成為界面的主要形式。

第二 「縮短表單（或界面）長度」功能——因為佔位符文本可以內置於表單填寫框區域內，無需額外添加「標籤」（label）元素，可以減少表單填寫框區域外的標籤文檔，從而達到縮短長度的效果。

第三 「精簡表單（或界面）結構」功能（與第二點類似）——常見的表單組成元素除了標籤外，還有示例文本（為用戶填寫的數據提供格式上的範例參考）、指令文本（提示用戶執行相應操作）等頁面元素，但它們往往會以不同層級展現：如「彈出窗口」（Dialog）、「彈出氣泡」（Toast）等。使用佔位符文本可以降低對這類不同層級、結構的元素的使用頻率，界面層級淺的結構訪問路徑短，一定程度上可以幫助用戶對完整路徑進行觀察學習。

綜合上述三點，大致可以概括為對錶單界面的視覺元素進行整合，使之視覺傳達效果趨於整體化、簡潔化。

• 功能優化角度有四大具體功能：

第一 「充當標籤（或輔助標籤）文本」——在表單填寫框區域內的佔位符文本充當標籤或輔助標籤，以說明用戶在此處填寫的數據類型、名稱。

（這類功能的佔位符文本是最常見的，知乎也是如此）

第二 「充當指令文本」 ——佔位符文本在表單填寫框區域內對用戶執行的操作給出指令或引導，同時讓用戶對數據填寫的對應區域有了較為快速明確的定位。

（支付寶的註冊界面中，「請輸入你的手機號碼」這段文本就是一個對用戶的指令）

第三 「充當幫助文本」 指應用佔位符文本在表單填寫框區域內就用戶填寫的數據內容、格式等問題提供幫助與參考，便於讓相關表單填寫經驗不足的用戶理解對於數據填寫的具體要求。同樣是上圖支付寶的註冊界面，「校驗碼是6位數字」則是一個幫助文本而非指令文本。

第四 「充當示例文本」 第三點功能的具體化、特殊化案例。在用戶無法掌握輸入數據的格式時，一個實例文本可以直觀地展現格式範例，並讓用戶在輸入框區域內實現對照範例輸入。

（傳統程序中常見的預置佔位符文本，「example@example.com」是當前填寫欄位的範例）

綜合上述四點，佔位符文本的應用旨在給用戶執行數據輸入的操作提供更加易用、順暢的使用流程，簡化交互關係，改善體驗。因此，佔位符文本的設計有必要考慮到產品本身的功能性質，作為一個工具性元素加入產品的整體體驗設計。

佔位符文本直接作用於表單。表單填寫框區域內的佔位符文本直接影響到用戶填寫表單所需數據的流程，這種影響並不直觀，但可以體現在用戶對於表單信息獲取的效率並帶來的頁面停留時間（Time on Page）以及用戶填寫數據錯誤率的變化。缺失或難以理解的功能性佔位符文本會導致用戶執行填寫操作的效率低下，長時間停留於表單界面，甚至會造成諸如「反覆修改已填數據」、「填寫過程多次中斷」等結果。此類現象發生率較高但容易被開發者、設計者忽視，從而破壞整個產品的交互體驗。

用戶體驗設計中，有很重要三點：需求是否被滿足、滿足需求的效率如何、需求之外的情感。表單填寫是一個純粹的功能性、工具性步驟，是服務於用戶達到目標的前期準備工作。沒有人（或極少數人）會以填寫表單本身為樂趣，將此作為自己使用產品的需求與動力。因此設計者要儘可能地簡化這個步驟，用儘可能高效、簡潔的方式引導用戶去執行預設好的操作（即填寫表單）才是優化表單界面用戶體驗的方法，也就是所謂「最好的工具是用戶察覺不到的工具」。

既要做足設計，又要讓用戶意識不到，這是個充滿挑戰卻又有意思的事情。

佔位符文本本質上畢竟只是佔位符的一種，起到的根本作用是佔據空間位置，直接作用是提供信息。這信息包含諸多種類，例如：位置信息（將不同功能區域進行定位）、數據類型信息（說明該區域內數據的類型）、指令信息（提示或命令用戶執行相應操作）等。為了保證信息能夠用戶有效獲取，佔位符文本必須要具有足夠的視覺刺激，過於淺的佔位符文本顏色會導致在屏幕上難以辨認。但是由於表單填寫框區域內本應該為空白，因此佔位符文本的存在本身就對用戶具有一定的視覺刺激與導向，所以需要對其視覺上的刺激程度做好控制。如果使佔位符文本的文本顏色設定為黑色（或正文文本的相應顏色），則會與正文內容產生視覺衝突，導致用戶將佔位符文本錯誤理解為預設文本，進而影響其對與數據填寫區域的理解，降低此階段交互流程的效率。

（Windows XP系統的網路連接界面，密碼項的佔位符文本在視覺上干擾很大）

前文也提到了，佔位符文本具有多重功能，可以表達多種的數據類型，因此表單填寫框區域內的佔位符文本應該保證功能類型的統一，否則會導致表單界面的信息傳遞邏輯混亂。例如：「登錄郵箱地址」數據填寫框區域內的佔位符文本設定為「例：xxxx@example.com 」（充當示例文本），「登錄密碼」數據填寫框區域內的佔位符文本設定為「請輸入密碼」（充當指令文本）。這個例子中，兩處相關聯的表單輸入框內置兩種不同類別的佔位符文本，在面向用戶的信息傳遞環節沒有遵循統一的標準規範。這種情況下會導致用戶對於表單指令的理解產生偏差，如難以理解「例：xxxx@example.com」此項佔位符文本對用戶的指令與要求。

此外佔位符本身具有「可覆蓋」這一特性，即：用戶在表單填寫框區域內進行數據填寫操作時，表單默認會以用戶當前填寫的數據覆蓋原本的佔位符文本。這也造成了佔位符文本給用戶的指令、幫助具有時間局限性——一旦開始輸入文本就消失了。因為指令信息一般較短且容易理解，所以受到「時間局限性」的影響較小，但幫助文本（包括示例文本）通常長度較長，內容類別較多，導致在用戶填寫表格時點擊文本框後會使得幫助文本消失，因此對於幫助文本的記憶難度較大。對用戶來說，瀏覽信息要比記憶更容易，理想的設計是用戶不用查閱說明書就能清楚該產品的功能並進行正確操作。基於前文所述的「佔位符文本具有『時間局限性』」的特點，在用戶輸入一個較為陌生的數據類型時，往往會輸入了一部分而因為對相關要求、規則的記憶模糊而導致輸入操作中斷甚至取消，重新回到佔位符文本未被用戶數據覆蓋的情境，再次閱讀幫助說明。諸如此類的問題還有很多，但設計師和用戶往往都不會太重視，因此至今為止還沒有關於佔位符文本的交互設計規範存在。

我暫且歸納出的佔位符文本的設計應遵循的三項基本原則：易用性、統一性和階段性。【怎麼感覺很像套話(?_?)】

• 1）易用性原則，即加強引導作用，降低使用難度。優秀的工具是用戶察覺不到的工具，佔位符文本的職能是降低用戶使用界面的負擔而非增加用戶額外的關注點。因此，要求設計師在佔位符文本的設計過程中了解用戶的語言、文化、思維模式，以提高佔位符的可理解性。實現「置界面於用戶的控制之下」、「減少用戶的記憶負擔」、「保持界面的一致性」。
• 2）統一性原則，也可以理解為秩序性。佔位符文本的類別、定義、布局甚至是形式上的不統一，都是對界面設計背後的交互邏輯的破壞。既會混淆產品界面信息的傳遞，進而影響用戶執行交互操作的流程；又會破壞用戶使用產品時的主觀體驗感受。
• 3）階段性原則。佔位符文本不是靜止不變的界面設計元素，在用戶進行閱讀、輸入等不同行為的同時，與產品的交互關係也不斷隨之發生著變化。因此佔位符文本在人機交互的過程中也是依各階段發生變化的。對應用戶的不同行為、操作，佔位符文本應該表現以不同形式，執行以不同功能，不因位置布局而定義功能，而應該因交互的不同階段、不同目的來進行具體的功能定義。

【如果你堅持能看到這裡我也是很感動了，有什麼想法、問題或批評、指正歡迎提出~】