書里面這部分叫序
先作個(gè)自我介紹，我是一名交互設(shè)計(jì)師，90后。
其實(shí)我不怎么喜歡編輯文章或?qū)扅c(diǎn)什么，總覺得很難(lǎn)。但決定跨出這步，那就好好寫了！
那這個(gè)就是前言
第一篇就想說(shuō)說(shuō)自己設(shè)計(jì)上遇到的交互事兒啊。
就先說(shuō)一下最常見的表單。
表單只是個(gè)收集用戶信息的方式，用戶需要的是高效愉快的完成填寫。
表單由：輸入框、單選按鈕、開關(guān)、復(fù)選框、選擇列表、按鈕等組件組成。
當(dāng)碰到表單設(shè)計(jì)的需求時(shí)，把問(wèn)題按照優(yōu)先級(jí)去排序，我認(rèn)為需要考慮的第一問(wèn)題是只需要用戶輸入什么，第二個(gè)問(wèn)題通過(guò)技術(shù)的手段去考量是否可以利用最少的字段做最多的事兒，再把字段在先后邏輯上進(jìn)行排序、把關(guān)聯(lián)的信息成組，最終的目的是便于用戶更快速的理解自己要輸入什么。
今天就想專門寫篇文章，來(lái)說(shuō)說(shuō)表單中重要的組件-輸入框。
那再弄個(gè)目錄
· 輸入框元素
· 適量的減少輸入項(xiàng)
· 標(biāo)簽的字?jǐn)?shù)
· 對(duì)齊方式
· 選填與必填
· 信息分組
· 一列和多列
· 最后
輸入框元素
標(biāo)簽[Label]、輸入框[Input]、提示[Assistance]、校驗(yàn)[Validation]，這四個(gè)元素組成標(biāo)準(zhǔn)的輸入框。
標(biāo)簽[Label]
它需要明確告訴用戶輸入什么
輸入框[lnput]
它包括文本字段，數(shù)字字段，混合字段，密碼字段等。
在移動(dòng)端產(chǎn)品中，友好的使用系統(tǒng)鍵盤是提升體驗(yàn)的一個(gè)方法，在移動(dòng)端應(yīng)用中根據(jù)填寫內(nèi)容的屬性，例如：填寫手機(jī)號(hào)可以直接彈出系統(tǒng)的數(shù)字鍵盤；在web或桌面應(yīng)用中可以配合自動(dòng)填充選擇也是提升體驗(yàn)的方法，例如：填寫郵箱當(dāng)用戶輸入用戶名，出現(xiàn)自動(dòng)填充的@域名。
對(duì)于不同的輸入內(nèi)容有著不同的解決辦法，但最終的目的都是為了讓完成表單變得更高效。
提示[Assistance]
讓用戶能在標(biāo)簽和輸入框之間獲取信息，幫助他完成輸入。常見的幾種方法：
把提示的內(nèi)容置于輸入框內(nèi)，會(huì)把這個(gè)叫做暗提示[Placeholder]。
當(dāng)輸入框獲取焦點(diǎn)時(shí)，出現(xiàn)文字氣泡提示會(huì)叫做[Tooltip]。
當(dāng)說(shuō)明文案較長(zhǎng)時(shí)，你可以使用一個(gè)icon圖標(biāo)去提示[Popover]。
當(dāng)需要輸入提醒，你可以將其放置在輸入框附近[Help text]（位置不建議放在下放，建議把校驗(yàn)反饋放在輸入框下方）。
以上四種是在提示的四種用法(還有更多)。對(duì)于不同的表單頁(yè)可以利用不一樣的方法去進(jìn)行嘗試。
校驗(yàn)[Validation]
用戶厭惡當(dāng)他們?cè)谔顚戇^(guò)程中到等提交時(shí)才發(fā)現(xiàn)他們之前輸入錯(cuò)了東西。
試想：這個(gè)表單有10項(xiàng)信息的收集，當(dāng)我第一項(xiàng)填錯(cuò)后沒有校驗(yàn)反饋，然后我繼續(xù)表單填寫任務(wù)，十項(xiàng)填寫完畢后，點(diǎn)擊[Submit]后，良心點(diǎn)的回滾到第一項(xiàng)輸入框出現(xiàn)錯(cuò)誤提示并獲取焦點(diǎn)告訴我錯(cuò)了讓我修改，惡心的停留在當(dāng)前屏幕，整個(gè)人會(huì)懵為什么任務(wù)不能繼續(xù)？然后就會(huì)思考是不是填寫哪里出了錯(cuò)？再返回檢查問(wèn)題，這樣效率就會(huì)下降。
點(diǎn)擊[Submit]這種校驗(yàn)屬于第二道校驗(yàn)：提交校驗(yàn)(復(fù)雜的校驗(yàn)，有些可能需要走后端校驗(yàn))。所以當(dāng)用戶在輸入框錄入后完成失去焦點(diǎn)后就有義務(wù)告知所錄入的內(nèi)容是否正確/錯(cuò)誤。
這是第一道校驗(yàn)：即時(shí)校驗(yàn)(利用前端校驗(yàn)比如：通過(guò)正則表達(dá)式校驗(yàn)手機(jī)號(hào)的位數(shù)，手機(jī)號(hào)的有效性等)。
這種方法允許用戶更快的糾正錯(cuò)誤，無(wú)需等待。文案的描述也應(yīng)當(dāng)更明確，告訴他們什么錯(cuò)了，這在輸入過(guò)程中給用戶帶來(lái)更多的信心。
適量的減少輸入項(xiàng)
盡量可能減少輸入項(xiàng)個(gè)數(shù)，這樣可使得表單更輕松，尤其是當(dāng)我們需要向用戶收集大量信息，根據(jù)實(shí)際情況考慮做減法，用最少的收集內(nèi)容去做更多的事。
打個(gè)比方：現(xiàn)在有個(gè)表單，需要收集姓名、性別、出生日期、身份證號(hào)四個(gè)輸入項(xiàng)。我們可以通過(guò)技術(shù)的一些手段從身份證號(hào)中提取出信息，那4個(gè)輸入項(xiàng)就可以變成變成2個(gè)。身份證的倒數(shù)第二位可以判斷性別：奇數(shù)是男，偶數(shù)表示女，出生年月大家都知道。
再來(lái)個(gè)比方：假設(shè)手機(jī)充值時(shí)需要選擇手機(jī)號(hào)的歸屬地信息，是做一個(gè)城市選擇列表讓用戶去選擇？這我也不清楚手機(jī)號(hào)是不是有規(guī)律，如果沒有，那不妨通過(guò)接口去查詢用戶手機(jī)的歸屬地，這樣操作成本大大下降，歸屬地選擇錯(cuò)誤的可能也會(huì)下降。
結(jié)合不同的場(chǎng)景去思考會(huì)發(fā)現(xiàn)無(wú)限多的做法，減少輸入項(xiàng)個(gè)數(shù)的目的也只是為了讓完成表單變得更加高效。
標(biāo)簽的字?jǐn)?shù)
標(biāo)簽不是暗提示或者幫助文本的信息，應(yīng)該精簡(jiǎn)，簡(jiǎn)短到不能失去說(shuō)明性的，這樣用戶通過(guò)快速掃描表單就可以了解自己需要填什么的預(yù)期了。
比方說(shuō)：[請(qǐng)輸入你的姓名]精簡(jiǎn)成-[姓名]等。
對(duì)齊方式
左對(duì)齊、右對(duì)齊、頂對(duì)齊三種我們不論在哪都可以見到的對(duì)齊方式。結(jié)合以上所說(shuō)的表單元素接來(lái)下討論一下三種對(duì)齊方式：
頂對(duì)齊
頂對(duì)齊的優(yōu)點(diǎn)：相比其他兩種對(duì)齊方式，它更適用于不同字?jǐn)?shù)的標(biāo)簽，讓標(biāo)簽和輸入框更加緊密，標(biāo)簽的長(zhǎng)度多變時(shí)也不會(huì)影響表單整體的布局，效率最高，但有個(gè)缺點(diǎn)：占用更多縱向空間（我覺得更適合移動(dòng)端橫向屏幕有限的情況下）。
例如：Material Design中的浮動(dòng)標(biāo)簽就是很優(yōu)秀的頂對(duì)齊輸入框設(shè)計(jì)。
左對(duì)齊
左對(duì)齊的標(biāo)簽也是最常見的對(duì)齊方式，相比頂對(duì)齊：他的標(biāo)簽可讀性變強(qiáng)了，也減少縱向空間占用。但是無(wú)法避免標(biāo)簽和輸入框聯(lián)系不緊密的這個(gè)劣勢(shì)。在標(biāo)簽和輸入框之間的可視距離遠(yuǎn)。
實(shí)操層：在長(zhǎng)短標(biāo)簽的組合表單中，會(huì)使輸入框離短的標(biāo)簽更遠(yuǎn)，這時(shí)就得想如何縮短標(biāo)簽的字?jǐn)?shù)，如何精簡(jiǎn)出一個(gè)便于用戶理解的標(biāo)簽。如果不去設(shè)計(jì)標(biāo)簽，那么效率就會(huì)變的緩慢。但是完成率緩慢，并不見得是一件壞事，尤其是表單需要重要的數(shù)據(jù)，如果需要用戶提供敏感信息時(shí)，可以暗示用戶放慢一點(diǎn)節(jié)奏，并確保他們正確的輸入。
右對(duì)齊
右對(duì)齊字符是第二常見的對(duì)齊方式，相比頂對(duì)齊和左對(duì)齊涵蓋了他們部分優(yōu)點(diǎn)：和輸入框聯(lián)系緊密，也減少縱向空間的占用。
標(biāo)簽和輸入框顯得更加緊密了，將相關(guān)聯(lián)信息放置接近的這一原則也不是新的理論，實(shí)際上它接近格式塔心里學(xué)中的接近性法則。
對(duì)于較短的表單，右對(duì)齊的字符也可以完成的很快。但是標(biāo)簽的可讀性會(huì)減弱，這種對(duì)齊方式在左側(cè)邊緣的標(biāo)簽看起來(lái)不舒服，更難閱讀，同時(shí)也需要去注意標(biāo)簽字?jǐn)?shù)。
格式塔心里學(xué)中的接近性法則：
“接近性法則”指出當(dāng)對(duì)象彼此接近時(shí)，他們往往被認(rèn)為是一個(gè)整體?；旧舷嘟窃谝黄鸬?。如果我們使用清晰的結(jié)構(gòu)和視覺層次，我們將不再被有限的用戶認(rèn)知所指責(zé)，所以他們才能快速辨認(rèn)和給出反應(yīng)。
——原作者：Norbi Gaal? ? 翻譯：Tiger, Run! 原文鏈接：https://uxdesign.cc/ux.. 來(lái)源：知乎
對(duì)齊方式總結(jié)
如何希望用戶快速掃描表單，把標(biāo)簽放在輸入框上面，這種布局更便于眼睛向下掃描頁(yè)面。
如果你希望用戶仔細(xì)得閱讀，把標(biāo)簽放在輸入框的左側(cè)，這個(gè)布局掃描較慢，向下向右(Z的形狀）的眼動(dòng)。
如果表單中需要填寫的內(nèi)容比較少，也可以使用內(nèi)聯(lián)標(biāo)簽(登錄注冊(cè))，但如果有輸入信息較多，切記別用！雖說(shuō)這是很受歡迎的輸入框做法 ，他們也很美觀，但當(dāng)用戶點(diǎn)擊輸入框，標(biāo)簽消失就無(wú)法對(duì)應(yīng)了，用戶因此會(huì)不知需要去填什么(可以嘗試把暗提示[placeholder]改成和標(biāo)簽一樣內(nèi)容)。
但這么做會(huì)產(chǎn)生另一個(gè)問(wèn)題，當(dāng)用戶看到一個(gè)輸入框內(nèi)已經(jīng)填寫了內(nèi)容，而填寫完內(nèi)容，標(biāo)簽就消失了，需要回憶再?gòu)?fù)查表單信息，此時(shí)就顯得很困難了。
選填與必填
在表單中盡量避免選填字段，但是如果選填字段是真實(shí)有需求的，但不一定需要收集時(shí)，把必填和選填做出區(qū)分，不能為空的必填字段規(guī)范使用星號(hào)(*)指出。
對(duì)于表單中必填vs選填數(shù)量上我是這樣看的：
1.必填＞選填時(shí)，在選填項(xiàng)上指出(選填)；
2.必填＜選填時(shí)，在必填項(xiàng)上指出(*)；
3.必填=選填時(shí)，在選填項(xiàng)上指出(選填)或在必填項(xiàng)上指出(*)；
4.全必填時(shí)，無(wú)需指出(*)即可，全部(*)會(huì)增加表單的信息量；
5.全選填時(shí)，先考慮這個(gè)表單是否有必要去做，有必要就在更高一級(jí)上指出(選填)
還要個(gè)原則：優(yōu)先級(jí)上必填項(xiàng)＞選填項(xiàng)
信息分組
根據(jù)用戶的認(rèn)知將相關(guān)進(jìn)行分組，分組后的相關(guān)信息還能幫助用戶弄懂哪些是必填和選填。
一列和多列
表單不建議有多列，如果水平放置輸入框，用戶必須Z形的眼動(dòng)進(jìn)行掃描，會(huì)減緩理解速度和弄亂清晰的完成路徑。垂直向下放置的表單在頁(yè)面完成路徑是垂直向下的。
最后：
結(jié)合場(chǎng)景，通過(guò)思考和研究可以探索出一個(gè)好的表單(輸入框)。在設(shè)計(jì)上可以采用很多方案，同時(shí)也需要經(jīng)過(guò)不斷的測(cè)試去做出調(diào)整。
根據(jù)需求和使用平臺(tái)(App/Pc/H5)可以在基礎(chǔ)的表單(輸入框)原理上做出很多變化(開始填寫時(shí)已預(yù)填了信息，在移動(dòng)端需要修改時(shí)逐字刪除太麻煩了，可以考慮在輸入框內(nèi)加個(gè)x的icon，點(diǎn)擊icon即清除輸入框中的所有內(nèi)容等等)，但是唯一不變的是讓完成表單變得更愉快高效，也是初衷。
參考書：《Web表單設(shè)計(jì)》、《交互設(shè)計(jì)精髓》
這陣子空下來(lái)在想一個(gè)問(wèn)題，交互設(shè)計(jì)到底是什么？也展開了很多問(wèn)題。
交互設(shè)計(jì)是什么？
我覺得是兩個(gè)動(dòng)作組成的一個(gè)詞兒，有“交互”和“設(shè)計(jì)”。
首先什么是設(shè)計(jì)？
我認(rèn)為設(shè)計(jì)的目的是解決問(wèn)題，因?yàn)楫a(chǎn)生了問(wèn)題同時(shí)再去發(fā)現(xiàn)問(wèn)題，所以有了設(shè)計(jì)這個(gè)行為，又有了很多人在做解決問(wèn)題的事兒，就有了設(shè)計(jì)師這個(gè)職業(yè)。
交互是什么？
交互是無(wú)處不在的，哪怕是電梯的樓層按鈕，一個(gè)微波爐，一個(gè)導(dǎo)航等等。就看一下咱們的數(shù)字產(chǎn)品。我覺得交互是結(jié)合產(chǎn)品本身，去為目標(biāo)用戶的目的設(shè)計(jì)出高效的功能。
那誰(shuí)是目標(biāo)用戶？他們的目的是什么？高效的功能是什么？
“目標(biāo)用戶是什么”、“目的是什么”這兩個(gè)能通過(guò)定量、定性的用研方法，結(jié)合用戶模型等一系列方法可以得出。
“高效的功能是什么”，我覺得所有的功能可以理解成一個(gè)工具(結(jié)合生活講，有可能是一本書，或者一個(gè)錘子或是其他等等)，這個(gè)工具目的是可用、合理，且能讓用戶更高效的完成自己的目的，在完成目的的同時(shí)可以收獲驚喜和愉快。
驚喜和愉快是什么？
我覺得有個(gè)很難量化也很難標(biāo)準(zhǔn)化的一個(gè)術(shù)語(yǔ)，叫用戶體驗(yàn)。我想這就是在交互設(shè)計(jì)這環(huán)中能有所支撐的一部分“用戶體驗(yàn)”了吧
我是一名交互設(shè)計(jì)師(自豪臉)，我覺得無(wú)論什么設(shè)計(jì)始終都值得敬畏，最近閑著又刷了一遍《交互設(shè)計(jì)精髓》，前言中有句話說(shuō)的超棒：
交互設(shè)計(jì)本身也是一項(xiàng)人文事業(yè)，與產(chǎn)品和服務(wù)互動(dòng)的是人，交互設(shè)計(jì)的首要目標(biāo)是滿足人的需求和欲望。理解這些目標(biāo)和需求的最佳方式是把他們當(dāng)成故事——邏輯和情感隨時(shí)間而演變，要回應(yīng)用戶的這些的這些故事，數(shù)字產(chǎn)品必須表達(dá)自身的行為故事，不僅要在邏輯、數(shù)據(jù)條目和展示層次做出恰當(dāng)?shù)幕貞?yīng)，還要在更加人性化的層面有所響應(yīng)。? ?
——Alan Cooper
第一次寫文章，如果你看到這里會(huì)發(fā)現(xiàn)沒什么圖，我其實(shí)是為了營(yíng)造干貨氣氛克制自己不插圖(其實(shí)是不想插圖)。到這也就看完了我叨逼叨，也不知說(shuō)恭喜你還是佩服你…總之先雙手合十的感謝你。
以上的觀點(diǎn)從我個(gè)人總結(jié)出發(fā)，雖說(shuō)文筆拙劣，但是如果你有不同的意見，歡迎交流～
