本站小編為你精心準(zhǔn)備了交互設(shè)計(jì)中占位符文本的探究參考范文，愿這些范文能點(diǎn)燃您思維的火花，激發(fā)您的寫(xiě)作靈感。歡迎深入閱讀并收藏。

摘要：從用戶體驗(yàn)的角度分析了界面設(shè)計(jì)中占位符文本的作用與重要性，并提出占位符文本不僅僅是表單界面的構(gòu)成元素，更強(qiáng)調(diào)其對(duì)于用戶體驗(yàn)起到改善與引導(dǎo)作用的含義。占位符文本應(yīng)該在用戶的交互體驗(yàn)中引起設(shè)計(jì)者更高的重視，并起到對(duì)用戶實(shí)現(xiàn)交互過(guò)程的引導(dǎo)功能。

關(guān)鍵詞：交互設(shè)計(jì)；界面設(shè)計(jì)；用戶體驗(yàn)設(shè)計(jì)；占位符

隨著現(xiàn)代信息科技的發(fā)展與互聯(lián)網(wǎng)絡(luò)的普及，各類(lèi)互聯(lián)網(wǎng)產(chǎn)品已經(jīng)被大眾廣泛接受。與傳統(tǒng)產(chǎn)業(yè)不同的是，互聯(lián)網(wǎng)產(chǎn)品對(duì)于普通用戶的獲得成本是極低的：傳統(tǒng)產(chǎn)業(yè)的用戶往往需要付出高昂的代價(jià)才能體驗(yàn)最好的商品與服務(wù)（如汽車(chē)、酒店），而互聯(lián)網(wǎng)用戶只需要以低廉的價(jià)格甚至免費(fèi)就能體驗(yàn)到最好的產(chǎn)品與服務(wù)（如社交軟件）。伴隨著高質(zhì)量產(chǎn)品與服務(wù)而來(lái)的，是不那么令人滿意的使用體驗(yàn)。因此，用戶體驗(yàn)（User-Experience）和交互設(shè)計(jì)（Interaction…Design）逐漸為人所關(guān)注。也正是這樣，傳統(tǒng)的設(shè)計(jì)體系中諸多被人忽視的要素也由于能夠改善用戶體驗(yàn)而逐漸被設(shè)計(jì)者重視起來(lái)。然而占位符文本（Placeholder…Text）仍是容易被設(shè)計(jì)者忽視的要素之一，占位符文本的錯(cuò)誤或不規(guī)范的使用在目前極為常見(jiàn)。因此，對(duì)其正確使用方式的研究對(duì)于人機(jī)交互科學(xué)具有重要的意義。

1占位符文本在交互設(shè)計(jì)中的功能性

1.1占位符在界面設(shè)計(jì)中的意義

占位符（Placeholder）是在信息通訊產(chǎn)品的界面設(shè)計(jì)中常用到的一種元素，它是交互設(shè)計(jì)的功能基礎(chǔ)，包含了具體的功能和信息的組織結(jié)構(gòu)。［1］用戶面對(duì)空白的電子表單等界面時(shí)，往往會(huì)產(chǎn)生不能理解交互方式的“認(rèn)知摩擦”。［2］占位符的主要作用就是在這類(lèi)界面布局中占據(jù)一定的空間面積，既能調(diào)節(jié)控制用戶界面的視覺(jué)傳達(dá)效果，又可以實(shí)現(xiàn)界面對(duì)用戶的默認(rèn)的提示、說(shuō)明、引導(dǎo)等功能。在用戶填寫(xiě)表單的界面中，占位符常常以文本的形式呈現(xiàn)，作為對(duì)表單填寫(xiě)欄或選項(xiàng)的補(bǔ)充說(shuō)明，因此被也稱(chēng)為占位符文本。甚至在當(dāng)下流行的“扁平化”設(shè)計(jì)語(yǔ)言中，為了使用戶填寫(xiě)表單更加流暢，即改善用戶對(duì)于表單填寫(xiě)界面的體驗(yàn)，簡(jiǎn)化表單的結(jié)構(gòu)、層級(jí)（如刪除表單的分項(xiàng)標(biāo)簽等），占位符文本的應(yīng)用顯得更加簡(jiǎn)潔、美觀。但是在不同產(chǎn)品與不同情境下，占位符文本具體的職能作用不盡相同。

1.2占位符文本在界面設(shè)計(jì)中的功能

使用占位符文本常見(jiàn)的目的有兩大類(lèi)別：視覺(jué)優(yōu)化、功能優(yōu)化。視覺(jué)優(yōu)化角度有三大具體功能：第一，統(tǒng)一視覺(jué)效果功能。基于占位符文本的表現(xiàn)形式為文本這一特性而實(shí)現(xiàn)，可以使界面上的圖形元素減少，使文本元素與線框成為界面的主要形式。第二，縮短表單（或界面）長(zhǎng)度功能。因?yàn)檎嘉环谋究梢詢?nèi)置于表單填寫(xiě)框區(qū)域內(nèi)，無(wú)須額外添加“標(biāo)簽”（label）元素，可以減少表單填寫(xiě)框區(qū)域外的標(biāo)簽文檔，從而達(dá)到縮短長(zhǎng)度的效果。第三，精簡(jiǎn)表單（或界面）結(jié)構(gòu)功能。與第二點(diǎn)類(lèi)似。常見(jiàn)的表單組成元素除了標(biāo)簽外，還有示例文本（為用戶填寫(xiě)的數(shù)據(jù)提供格式上的范例參考）、指令文本（提示用戶執(zhí)行相應(yīng)操作）等頁(yè)面元素，但它們往往會(huì)以不同層級(jí)展現(xiàn)，如“彈出窗口”“彈出氣泡”等。使用占位符文本可以降低對(duì)這類(lèi)不同層級(jí)、結(jié)構(gòu)的元素的使用頻率，界面層級(jí)淺的結(jié)構(gòu)訪問(wèn)路徑短，一定程度上可以幫助用戶對(duì)完整路徑進(jìn)行觀察。［3］綜合上述三點(diǎn)，視覺(jué)優(yōu)化的功能大致可以概括為對(duì)表單界面的視覺(jué)元素進(jìn)行整合，使之視覺(jué)傳達(dá)效果趨于整體化、簡(jiǎn)潔化。功能優(yōu)化角度有四大具體功能：第一，充當(dāng)標(biāo)簽（或輔助標(biāo)簽）文本。指在表單填寫(xiě)框區(qū)域內(nèi)的占位符文本充當(dāng)標(biāo)簽或輔助標(biāo)簽，以說(shuō)明用戶在此處填寫(xiě)的數(shù)據(jù)類(lèi)型、名稱(chēng)。第二，充當(dāng)指令文本。指應(yīng)用占位符文本在表單填寫(xiě)框區(qū)域內(nèi)對(duì)用戶執(zhí)行的操作給出指令或引導(dǎo)，同時(shí)讓用戶對(duì)數(shù)據(jù)填寫(xiě)的對(duì)應(yīng)區(qū)域有較為快速明確的定位。第三，充當(dāng)幫助文本。指應(yīng)用占位符文本在表單填寫(xiě)框區(qū)域內(nèi)就用戶填寫(xiě)的數(shù)據(jù)內(nèi)容、格式等問(wèn)題提供幫助與參考，便于讓相關(guān)表單填寫(xiě)經(jīng)驗(yàn)不足的用戶理解對(duì)于數(shù)據(jù)填寫(xiě)的具體要求。第四，充當(dāng)示例文本。是第三點(diǎn)功能的具體化、特殊化案例。在用戶無(wú)法掌握輸入數(shù)據(jù)的格式時(shí)，一個(gè)實(shí)例文本可以直觀地展現(xiàn)格式范例，并讓用戶在輸入框區(qū)域內(nèi)對(duì)照范例輸入。綜合上述四點(diǎn)，占位符文本的應(yīng)用旨在給用戶執(zhí)行數(shù)據(jù)輸入提供更加易用、順暢的步驟流程，簡(jiǎn)化人機(jī)交互關(guān)系，改善用戶體驗(yàn)。

2占位符文本對(duì)人機(jī)交互的干擾

2.1占位符文本對(duì)執(zhí)行流程的影響

占位符文本應(yīng)用的目的是改善用戶體驗(yàn)，其功能直接作用于用戶對(duì)于操作界面的使用流程。表單是互聯(lián)網(wǎng)信息產(chǎn)品中常見(jiàn)的用于主動(dòng)收集用戶數(shù)據(jù)的形式，其目的在于將用戶數(shù)據(jù)分類(lèi)并收集。表單填寫(xiě)框區(qū)域內(nèi)的占位符文本直接影響到用戶填寫(xiě)表單所需數(shù)據(jù)的流程，這種影響主要體現(xiàn)在用戶對(duì)于表單信息獲取的效率、在頁(yè)面停留時(shí)間（Time…on…Page）以及用戶填寫(xiě)數(shù)據(jù)錯(cuò)誤率的變化。用戶對(duì)于表單信息獲取的效率是不直觀可視的數(shù)據(jù)，一般表現(xiàn)為用戶開(kāi)始執(zhí)行填寫(xiě)表單的操作前的停止時(shí)間。通常意義上，操作前停止時(shí)間越長(zhǎng)便意味著用戶難以理解或執(zhí)行當(dāng)前的默認(rèn)操作，即這個(gè)頁(yè)面對(duì)使用者的影響會(huì)直接影響到人機(jī)交互的效率以及用戶體驗(yàn)。同理，由于表單界面是工具性界面，而非內(nèi)容傳播性頁(yè)面，所以用戶的頁(yè)面停留時(shí)間長(zhǎng)短與用戶體驗(yàn)呈負(fù)相關(guān)。缺失的或難以理解的功能性占位符文本會(huì)導(dǎo)致用戶執(zhí)行填寫(xiě)操作的效率低下，長(zhǎng)時(shí)間停留于表單界面。在相應(yīng)的計(jì)算機(jī)后臺(tái)程序技術(shù)的支持下，很多網(wǎng)頁(yè)與程序能夠在用戶填寫(xiě)信息的同時(shí)捕捉用戶填寫(xiě)、擦除數(shù)據(jù)等動(dòng)作。眾多實(shí)例證明，占位符文本的錯(cuò)誤或不規(guī)范的應(yīng)用除了會(huì)造成用戶理解困難之外，還會(huì)影響用戶填寫(xiě)操作的流暢性，增加了用戶的負(fù)擔(dān)，甚至可能導(dǎo)致操作的失敗，［4］造成諸如“反復(fù)修改已填數(shù)據(jù)”“填寫(xiě)過(guò)程多次中斷”等結(jié)果。此類(lèi)現(xiàn)象發(fā)生率較高，但容易被開(kāi)發(fā)者、設(shè)計(jì)者忽視，從而破壞整個(gè)產(chǎn)品的交互體驗(yàn)。

2.2占位符文本對(duì)用戶心理的影響

用戶界面設(shè)計(jì)是直接接觸并服務(wù)于人的設(shè)計(jì)，因此在人機(jī)交互的過(guò)程中，情感化的、難以用數(shù)據(jù)量化的用戶體驗(yàn)極為重要。用戶的體驗(yàn)通常取決于三點(diǎn)：需求是否被滿足、滿足需求的效率如何、需求之外的情感。表單填寫(xiě)是一個(gè)純粹的功能性步驟，是服務(wù)于用戶滿足需求的前期準(zhǔn)備工作。沒(méi)有人（或極少數(shù)人）會(huì)以填寫(xiě)表單為樂(lè)趣，將此作為自己使用產(chǎn)品的需求與動(dòng)力。因此，設(shè)計(jì)者要盡可能地簡(jiǎn)化這個(gè)步驟，用盡可能高效、簡(jiǎn)潔的方式引導(dǎo)用戶去執(zhí)行預(yù)設(shè)好的操作（填寫(xiě)表單）才是優(yōu)化表單界面用戶體驗(yàn)的方法。事實(shí)上，在對(duì)市面上現(xiàn)存的各類(lèi)網(wǎng)頁(yè)與程序進(jìn)行一個(gè)簡(jiǎn)單的抽樣調(diào)查之后，可以發(fā)現(xiàn)很多因?yàn)檎`用占位符文本而造成用戶誤解的案例。這種誤解會(huì)致使用戶的數(shù)據(jù)輸入效率和準(zhǔn)確度降低，進(jìn)而對(duì)產(chǎn)品的易用性產(chǎn)生懷疑。并且在表單界面停留時(shí)間的延長(zhǎng)，實(shí)質(zhì)上是用戶達(dá)成需求滿足這一結(jié)果的推遲，會(huì)引起用戶懷疑產(chǎn)品滿足自身需求的可行性。一旦用戶對(duì)產(chǎn)品的易用性、可行性產(chǎn)生了懷疑，就會(huì)破壞用戶對(duì)于產(chǎn)品、服務(wù)的信任感；對(duì)于不了解后臺(tái)技術(shù)的用戶而言，甚至可能產(chǎn)生對(duì)于技術(shù)、品牌的不信任感。信任感是建立良好的用戶情感體驗(yàn)的基石。因此，作為影響操作效率的重要因素的占位符文本的設(shè)計(jì)，對(duì)于建立良好的用戶情感體驗(yàn)有著至關(guān)重要的意義。

2.3占位符文本對(duì)交互的雙向反饋機(jī)制

用戶與產(chǎn)品發(fā)生人機(jī)交互的過(guò)程，是一個(gè)信息的雙向接收、發(fā)送的過(guò)程，與之相伴的還有雙向的反饋機(jī)制。作為用戶，產(chǎn)品輸出、傳遞信息的效率低下會(huì)影響到自身的信息接收效率。同時(shí)用戶低效率接收信息也會(huì)導(dǎo)致反饋行為遲緩、錯(cuò)誤率提高，進(jìn)而導(dǎo)致產(chǎn)品接收信息的效率降低。因此，研究占位符文本在人機(jī)交互流程中造成干擾的機(jī)制對(duì)于改善交互體驗(yàn)有著至關(guān)重要的作用。占位符文本的本質(zhì)是占位符的一種。起到的根本作用是占據(jù)空間位置，直接作用是提供信息。這信息包含諸多種類(lèi)，如位置信息（將不同功能區(qū)域進(jìn)行定位）、數(shù)據(jù)類(lèi)型信息（說(shuō)明該區(qū)域內(nèi)數(shù)據(jù)的類(lèi)型）、指令信息（提示或命令用戶執(zhí)行相應(yīng)操作）等。為了保證用戶有效獲取信息，占位符文本必須具有足夠的視覺(jué)刺激，過(guò)于淺的占位符文本顏色會(huì)導(dǎo)致在屏幕上難以辨認(rèn)。但是由于表單填寫(xiě)框區(qū)域內(nèi)本應(yīng)該為空白，因此占位符文本的存在本身就對(duì)用戶具有一定的視覺(jué)刺激與導(dǎo)向，所以需要對(duì)其視覺(jué)上的強(qiáng)調(diào)程度做好控制。如果將占位符文本的顏色設(shè)定為黑色（或正文文本的相應(yīng)顏色），則會(huì)與正文內(nèi)容產(chǎn)生視覺(jué)沖突（見(jiàn)圖3），導(dǎo)致用戶將占位符文本錯(cuò)誤理解為預(yù)設(shè)文本，進(jìn)而影響其對(duì)于數(shù)據(jù)填寫(xiě)區(qū)域的理解，降低此階段交互流程的效率。由于占位符文本具有多重功能，可以表達(dá)多種數(shù)據(jù)類(lèi)型，因此表單填寫(xiě)框區(qū)域內(nèi)的占位符文本應(yīng)該保證功能類(lèi)型的統(tǒng)一，否則會(huì)導(dǎo)致表單界面的信息傳遞邏輯混亂。例如，“登錄郵箱地址”數(shù)據(jù)填寫(xiě)框區(qū)域內(nèi)的占位符文本設(shè)定為“登錄密碼”數(shù)據(jù)填寫(xiě)框區(qū)域內(nèi)的占位符文本設(shè)定為“請(qǐng)輸入密碼”（充當(dāng)指令文本）。這個(gè)例子中，兩處相關(guān)聯(lián)的表單輸入框內(nèi)置兩種不同類(lèi)別的占位符文本，在面向用戶的信息傳遞環(huán)節(jié)沒(méi)有遵循統(tǒng)一的標(biāo)準(zhǔn)規(guī)范。這種情況下會(huì)導(dǎo)致用戶對(duì)于表單指令的理解產(chǎn)生偏差，如難以理解“這項(xiàng)占位符文本對(duì)用戶的指令與要求。一定程度上會(huì)導(dǎo)致用戶對(duì)此產(chǎn)品甚至是產(chǎn)品的企業(yè)形象產(chǎn)生“嚴(yán)謹(jǐn)性、專(zhuān)業(yè)性有所欠缺”的印象。此外，占位符本身具有“可替代”這一特性，即用戶在表單填寫(xiě)框區(qū)域內(nèi)進(jìn)行數(shù)據(jù)填寫(xiě)操作時(shí)，表單的交互系統(tǒng)默認(rèn)會(huì)以用戶當(dāng)前填寫(xiě)的數(shù)據(jù)覆蓋原本的占位符文本。這也造成了占位符文本給用戶的指令、幫助具有時(shí)間局限性。指令信息一般較短且容易理解，所以受到“時(shí)間局限性”的影響較小，但幫助文本（包括示例文本）通常長(zhǎng)度較長(zhǎng)，內(nèi)容類(lèi)別較多，導(dǎo)致在用戶填寫(xiě)表格時(shí)點(diǎn)擊文本框后會(huì)使幫助文本消失，因此對(duì)于幫助文本的記憶難度較大（見(jiàn)圖2）。對(duì)用戶來(lái)說(shuō)，瀏覽信息要比記憶更容易，理想的設(shè)計(jì)是用戶不用查閱說(shuō)明書(shū)就能清楚該產(chǎn)品的功能并進(jìn)行正確操作。［5］基于前文所述的“占位符文本具有‘時(shí)間局限性’”的特點(diǎn)，在用戶進(jìn)行交互操作、輸入一個(gè)較為陌生的數(shù)據(jù)或信息時(shí)，往往會(huì)輸入一部分后因?yàn)閷?duì)相關(guān)要求、規(guī)則的記憶模糊而導(dǎo)致輸入操作中斷甚至取消輸入，重新回到占位符文本未被用戶數(shù)據(jù)覆蓋的情境，再次閱讀幫助說(shuō)明。綜上所述，占位符文本具有“視覺(jué)強(qiáng)調(diào)性”“標(biāo)準(zhǔn)統(tǒng)一性”“時(shí)間局限性”三大特性的雙向反饋機(jī)制，并且在交互設(shè)計(jì)中需要進(jìn)行規(guī)范的應(yīng)用以保障人機(jī)交互的效率與用戶體驗(yàn)的質(zhì)量。

3占位符文本的人性化交互設(shè)計(jì)原則

對(duì)于占位符文本的應(yīng)用環(huán)境，可以確定在電子、信息領(lǐng)域的產(chǎn)品的數(shù)字交互界面，尤其是電子表單類(lèi)界面。因此，要明確占位符文本應(yīng)用的本質(zhì)：服務(wù)于用戶數(shù)據(jù)填寫(xiě)、傳遞，強(qiáng)調(diào)工具性、功能性。由此歸納出占位符文本的設(shè)計(jì)應(yīng)遵循三項(xiàng)基本原則：易用性原則、統(tǒng)一性原則和階段性原則。

3.1易用性原則

易用性原則即加強(qiáng)引導(dǎo)作用，降低使用難度。優(yōu)秀的工具是用戶察覺(jué)不到的工具，占位符文本的職能是降低用戶使用界面的負(fù)擔(dān)，而非增加用戶額外的關(guān)注點(diǎn)。因此，要求設(shè)計(jì)師在占位符文本的設(shè)計(jì)過(guò)程中了解用戶的語(yǔ)言、文化、思維模式，以提高占位符的可理解性。實(shí)現(xiàn)“置界面于用戶的控制之下”“減少用戶的記憶負(fù)擔(dān)”“保持界面的一致性”。［6］

3.2統(tǒng)一性原則

統(tǒng)一性原則也可以理解為秩序性，秩序不僅是效率的保證，也是交互邏輯的表現(xiàn)方式。占位符文本的類(lèi)別、定義、布局甚至是形式上的不統(tǒng)一，都是對(duì)界面設(shè)計(jì)背后的交互邏輯的破壞。既會(huì)混淆產(chǎn)品界面信息的傳遞，進(jìn)而影響用戶執(zhí)行交互操作的流程，又會(huì)破壞用戶使用產(chǎn)品時(shí)的主觀體驗(yàn)。

3.3階段性原則

占位符文本不是靜止不變的界面設(shè)計(jì)元素，在用戶進(jìn)行閱讀、輸入等不同行為的同時(shí)，與產(chǎn)品的交互關(guān)系也會(huì)隨之發(fā)生變化。因此，占位符文本在人機(jī)交互的過(guò)程中也是依各階段發(fā)生變化的。對(duì)應(yīng)用戶的不同行為、操作，占位符文本應(yīng)該表現(xiàn)以不同形式，執(zhí)行不同功能，不因位置布局而定義功能，而是以交互的不同階段來(lái)作出具體的定義。遵守這三項(xiàng)原則，才能保障占位符文本這一設(shè)計(jì)要素在人性化的交互過(guò)程中有效地起到相應(yīng)的作用，提升交互體驗(yàn)的質(zhì)量。

4結(jié)語(yǔ)

設(shè)計(jì)不僅是對(duì)樣式、外形的塑造，更是對(duì)人的服務(wù)和對(duì)服務(wù)方式的優(yōu)化與改良。在當(dāng)前社會(huì)互聯(lián)網(wǎng)產(chǎn)業(yè)發(fā)展的背景下，“人”這一因素在交互設(shè)計(jì)中得以不斷放大。交互設(shè)計(jì)也不再僅僅是設(shè)計(jì)一個(gè)用戶界面，而是更加著重于從作為人的用戶的視角出發(fā)，考慮用戶的本質(zhì)需求，以滿足用戶需求為根本目的，一切設(shè)計(jì)行為、要素為此服務(wù)。占位符文本作為多種用戶界面中不可缺失的關(guān)鍵元素，應(yīng)該遵循上述基本原則，做到標(biāo)準(zhǔn)化、規(guī)范化，實(shí)現(xiàn)更加高效的人機(jī)交互流程，提供給用戶更加優(yōu)質(zhì)的體驗(yàn)。

參考文獻(xiàn)：

［1］…黃本亮.交互設(shè)計(jì)的語(yǔ)義層面［J］.包裝工程，2013，34（2）：38.

［2］…Alan…Cooper（美）.交互設(shè)計(jì)之路——讓高科技產(chǎn)品回歸人性［M］.…Chris…Ding，譯，北京：電子工業(yè)出版社，2006：…41.

［4］…李世國(guó)，費(fèi)釬.和諧視野中的產(chǎn)品交互設(shè)計(jì)［J］.包裝工程，2009，30（1）：137-140.

［5］…于東玖，吳曉莉.設(shè)計(jì)中易用性原則與情感的關(guān)系［J］.包裝工程，2006，27（6）：308-309.

［6］…A.蘇克利夫（英）.人-計(jì)算機(jī)界面設(shè)計(jì)［M］.陳家正，龔杰民，等，譯.西安電子科技大學(xué)出版社，1991.

作者：王沐陽(yáng) 單位：華東師范大學(xué)