起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)小鍵盤大細(xì)節(jié)：淺析Keyboard在移動(dòng)產(chǎn)品中的設(shè)計(jì)
虛擬鍵盤即Keyboard，在移動(dòng)端我們無時(shí)無刻不在與它打交道。它并不是真實(shí)的物理鍵盤，而是在屏幕內(nèi)擁有鍵盤樣式和功能的控件，可以按需隨時(shí)改變樣式和位置。在文本輸入的交互操作中，移動(dòng)端虛擬按鍵的交互體驗(yàn)明顯劣于PC端的實(shí)體鍵盤，因此我們有必要在移動(dòng)端的產(chǎn)品設(shè)計(jì)中做好Keyboard的細(xì)節(jié)設(shè)計(jì)。
iOS原生鍵盤
iOS原生鍵盤的全部類型
iOS鍵盤相關(guān)屬性
外觀：
- （代碼屬性）Default：默認(rèn)外觀是淺灰色
- （代碼屬性）Dark：深灰：石墨色（iOS7之后的石墨色相比之前版本做過更新）
- （代碼屬性）Light：亮灰：趨近于白色
可支持自動(dòng)大寫：
- （代碼屬性）None：不自動(dòng)大寫
- （代碼屬性）Words：單詞首字母大寫
- （代碼屬性）Sentences：句子首字母大寫
- （代碼屬性）All Characters：所有字母大寫
自動(dòng)更正：
- （代碼屬性）No：不自動(dòng)更正
- （代碼屬性）Yes：自動(dòng)更正
我們看到，iOS中提供了多達(dá)12種鍵盤可以選擇（中文鍵盤只有一種布局），鍵盤的一些屬性也可以進(jìn)行設(shè)置。我們?cè)诋a(chǎn)品設(shè)計(jì)細(xì)節(jié)時(shí)可以根據(jù)用戶的需要，提供不同類型鍵盤。在設(shè)計(jì)文檔中，要將相應(yīng)的鍵盤類型名稱寫在界面下方（最好寫英文，開發(fā)哥哥們好理解），或者干脆直接擺上相應(yīng)的鍵盤截圖。當(dāng)同一個(gè)界面有不同類型輸入框的情況時(shí)，需要表明鍵盤的切換規(guī)則。
雖然12種鍵盤類型已經(jīng)很多了，但仍不能覆蓋全部場景，這時(shí)可以進(jìn)行自定義鍵盤。當(dāng)然，開發(fā)成本會(huì)比較高。
按鍵命令
iOS的部分鍵盤中還有多種按鍵命令，iOS提供了11種類型的按鍵命令，我們?cè)诋a(chǎn)品設(shè)計(jì)細(xì)節(jié)中可以將所需要的命令用文字描述出來，也可以使用截圖的方式。
按鍵命令常使用的如下：
- 回車（return/enter）：用來換行
- 前往（go）：任務(wù)過程中到下一個(gè)步驟的動(dòng)作，例如輸入網(wǎng)址后，前往打開的網(wǎng)頁
- 下一步（next）：用在多個(gè)輸入框的表單中切換到下一個(gè)輸入框
- 搜索（search）：?點(diǎn)擊后執(zhí)行搜索動(dòng)作
- 發(fā)送（send）：一般用在通訊App中將內(nèi)容發(fā)送出去
- 完成（done）：任務(wù)完成后終結(jié)動(dòng)作，例如表單提交
Android原生鍵盤
Android原生鍵盤的常用類型：
實(shí)際上，Android輸入框的inputType（輸入類型）有29種參數(shù)：
- android:inputType=”none”–輸入普通字符
- android:inputType=”text”–輸入普通字符
- android:inputType=”textCapCharacters”–輸入普通字符
- android:inputType=”textCapWords”–單詞首字母大小
- android:inputType=”textCapSentences”–僅第一個(gè)字母大小
- android:inputType=”textAutoCorrect”–前兩個(gè)自動(dòng)完成
- android:inputType=”textAutoComplete”–前兩個(gè)自動(dòng)完成
- android:inputType=”textMultiLine”–多行輸入
- android:inputType=”textImeMultiLine”–輸入法多行（不一定支持）
- android:inputType=”textNoSuggestions”–不提示
- android:inputType=”textUri”–URI格式
- android:inputType=”textEmailAddress”–電子郵件地址格式
- android:inputType=”textEmailSubject”–郵件主題格式
- android:inputType=”textShortMessage”–短消息格式
- android:inputType=”textLongMessage”–長消息格式
- android:inputType=”textPersonName”–人名格式
- android:inputType=”textPostalAddress”–郵政格式
- android:inputType=”textPassword”–密碼格式
- android:inputType=”textVisiblePassword”–密碼可見格式
- android:inputType=”textWebEditText”–作為網(wǎng)頁表單的文本格式
- android:inputType=”textFilter”–文本篩選格式
- android:inputType=”textPhonetic”–拼音輸入格式
- android:inputType=”number”–數(shù)字格式
- android:inputType=”numberSigned”–有符號(hào)數(shù)字格式
- android:inputType=”numberDecimal”–可以帶小數(shù)點(diǎn)的浮點(diǎn)格式
- android:inputType=”phone”–撥號(hào)鍵盤
- android:inputType=”datetime”–日期時(shí)間
- android:inputType=”date” –日期鍵盤
- android:inputType=”time”–時(shí)間鍵盤
但是，并不能說就有29種鍵盤：比如datetime、date、time可以用專門的選擇器控件去做。中英文鍵盤布局是相同的。而且可以通過多個(gè)inputType的搭配來產(chǎn)生更多的鍵盤類型。
所以，雖然inputType總數(shù)是29種，但鍵盤類型數(shù)>>29種。由此可見，在產(chǎn)品設(shè)計(jì)過程中如果遇到一些比較復(fù)雜的鍵盤交互，則最好根據(jù)inputType來標(biāo)注所需要的鍵盤效果，僅僅使用鍵盤截圖還是不夠的。
Android鍵盤顯示的相關(guān)屬性
- stateUnchanged。狀態(tài)不改變。當(dāng)前界面的軟鍵盤狀態(tài)，取決于上一個(gè)界面的軟鍵盤狀態(tài)。舉個(gè)例子，假如當(dāng)前界面鍵盤是隱藏的，那么跳轉(zhuǎn)之后的界面，軟鍵盤也是隱藏的；如果當(dāng)前界面是顯示的，那么跳轉(zhuǎn)之后的界面，軟鍵盤也是顯示狀態(tài)。
- stateHidden。鍵盤狀態(tài)隱藏。不管上個(gè)界面什么狀態(tài)，也不管當(dāng)前界面有沒有輸入的需求，鍵盤是不顯示。可以設(shè)置這個(gè)屬性，來控制軟鍵盤不自動(dòng)的彈出。但是當(dāng)輸入框獲取焦點(diǎn)的時(shí)候還是會(huì)彈出來的。
- stateAlwaysVisible/stateVisible。將鍵盤召喚出來。stateVisible：如果當(dāng)前的界面鍵盤是顯示的，當(dāng)點(diǎn)擊按鈕跳轉(zhuǎn)到下個(gè)界面的時(shí)候，軟鍵盤會(huì)因?yàn)檩斎肟蚴ソ裹c(diǎn)而隱藏起來，當(dāng)再次回到當(dāng)前界面的時(shí)候，鍵盤這個(gè)時(shí)候是隱藏的。stateAlwaysVisible：跳轉(zhuǎn)到下個(gè)界面，軟鍵盤還是隱藏的，但是當(dāng)再次回來的時(shí)候，軟鍵盤是會(huì)顯示出來的。
- adjustResize。軟鍵盤會(huì)覆蓋界面，甚至?xí)采w文本框，而不會(huì)調(diào)整界面大小去顯示輸入框。
- adjustPan。系統(tǒng)會(huì)通過布局的移動(dòng)，來保證用戶要進(jìn)行輸入的輸入框肯定在用戶的視野范圍里面，從而讓用戶可以看到自己輸入的內(nèi)容。
按鍵命令
同iOS一樣，Android的部分鍵盤也具有多種“按鍵命令”可以選擇，回車（enter）、搜索（search）、前往（go）、上一項(xiàng)（previous）、下一項(xiàng)（next）、完成（done）、發(fā)送（send）。在產(chǎn)品設(shè)計(jì)中如果需要指定按鍵命令類型，在設(shè)計(jì)文檔上用文字標(biāo)識(shí)即可。在有多輸入框表單的頁面中，要標(biāo)注“按鍵命令”何時(shí)是“下一項(xiàng)”，何時(shí)變?yōu)椤巴瓿伞薄?/strong>
“完成”與“前往”的使用區(qū)別：
使用“完成”還是“前往”取決于完成文本框的任務(wù)是中間環(huán)節(jié)還是終點(diǎn)目的。例如輸入網(wǎng)址，用戶的任務(wù)是訪問網(wǎng)站，輸入網(wǎng)址是任務(wù)的中間環(huán)節(jié)，所以用前往；對(duì)于個(gè)人信息修改等表單提交，完成文本框也就是完成了任務(wù)本身，是任務(wù)的終點(diǎn)目的，所以用完成。
H5鍵盤的注意點(diǎn)
在H5頁面中，鍵盤的類型可以自由選擇?！鞍存I命令”的類型大部分可以選擇，但“完成”和“下一項(xiàng)”“上一項(xiàng)”不可以選擇。也就是說，在“按鍵命令”類型調(diào)用方面，只能調(diào)用“搜索”、“回車”、“前往”，而不能調(diào)用“上一項(xiàng)”、“下一項(xiàng)”和“完成”。這點(diǎn)對(duì)于iOS環(huán)境中的H5影響并不是太大，因?yàn)閕OS的鍵盤具有“< >”和“完成”按鈕。但對(duì)于Android環(huán)境中H5的影響會(huì)很大，因?yàn)楫?dāng)用戶填寫完一個(gè)輸入框想要跳轉(zhuǎn)下一個(gè)輸入框時(shí)，只能手動(dòng)點(diǎn)擊。如果用戶下意識(shí)地點(diǎn)擊“前往”按鈕，則可能會(huì)出現(xiàn)表單錯(cuò)誤。還有一個(gè)情況，就是當(dāng)輸入框的字符類型是“數(shù)字”時(shí)，“按鍵命令”會(huì)自動(dòng)變成“下一項(xiàng)”。
Android環(huán)境中的表單填寫H5頁面涉及到鍵盤的細(xì)節(jié)比較豐富，在做此方面的產(chǎn)品交互設(shè)計(jì)時(shí)需要大家多注意細(xì)節(jié)。
自定義鍵盤
當(dāng)原生的鍵盤類型不能滿足特殊的用戶使用場景時(shí)，我們可以自定義鍵盤的樣式供用戶使用，當(dāng)然這會(huì)造成一定的開發(fā)成本（成本與收益的權(quán)衡就交給各產(chǎn)品經(jīng)理了）。比如，銀行交易軟件中的密碼鍵盤，支付寶的密碼鍵盤等。
系統(tǒng)級(jí)定制鍵盤也可以在系統(tǒng)和所有App全局使用，例如，搜狗、訊飛等第三方輸入法就屬于這種。訊飛的輸入法整體的使用體驗(yàn)還是不錯(cuò)的，支持單手操作（語音識(shí)別的準(zhǔn)確度相當(dāng)高）。
聯(lián)想的水銀鍵盤更具創(chuàng)意，當(dāng)手機(jī)向一側(cè)傾斜時(shí)，通過重力感應(yīng)，離手指近的按鍵變小，離手指遠(yuǎn)的按鍵變大，方便單手輸入。
總結(jié)
當(dāng)我們忽略細(xì)節(jié)的設(shè)計(jì)標(biāo)注時(shí)，對(duì)于開發(fā)哥哥來說就意味著不用考慮，指定默認(rèn)值即可。在產(chǎn)品設(shè)計(jì)當(dāng)中，每一個(gè)細(xì)節(jié)的忽略都會(huì)導(dǎo)致相應(yīng)的用戶體驗(yàn)問題。正所謂細(xì)節(jié)決定成敗。
產(chǎn)品的細(xì)節(jié)其實(shí)都是可以實(shí)現(xiàn)的，正所謂“只要時(shí)間給的夠，一切功能都能做”。開發(fā)哥哥們，我說的對(duì)么？
作者：流年，互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)師，4年互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)。
本文由 @流年 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自u(píng)nsplash，基于CC0協(xié)議
- 目前還沒評(píng)論，等你發(fā)揮！
