中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：軟鍵盤（Soft Keyboard），又稱虛擬鍵盤，它并不是真實的物理鍵盤，而是在屏幕內(nèi)擁有鍵盤樣式和功能的控件。所以軟鍵盤要比真正的鍵盤小，而且沒有手感很難盲操作。軟鍵盤與物理鍵盤有很大的不同，屏幕的空間也讓軟鍵盤的設(shè)計需要有更多的考慮因素。接下來，本文作者就我們總結(jié)了一些軟鍵盤的設(shè)計中需要注意的細節(jié)。

軟鍵盤（Soft Keyboard）又稱為虛擬鍵盤，是一個在界面內(nèi)有著鍵盤形態(tài)和功能的控件。用戶可以通過軟鍵盤完成各種場景下的輸入，從而完成用戶目標(biāo)。

軟鍵盤在用戶輸入場景中起到了非常重要的作用，特別是在用戶需要連續(xù)輸入不同的內(nèi)容時，能夠為用戶合理調(diào)用不同的鍵盤以及定制恰當(dāng)?shù)逆I盤指令，可以提升用戶填寫效率，帶給用戶更友好的交互體驗。

軟鍵盤的調(diào)用規(guī)則往往容易被新人設(shè)計師忽略，如果沒有明確的鍵盤調(diào)用規(guī)則，對開發(fā)同學(xué)來說一般是調(diào)用默認鍵盤，這意味著用戶在填寫過程中可能需要不停切換鍵盤，造成操作成本增加，甚至?xí)龃箜撁娴奶雎省?/p>

那么，我們該如何講清楚鍵盤的調(diào)用規(guī)則和其中需要注意的設(shè)計細節(jié)呢？本篇文章總結(jié)了軟鍵盤調(diào)用規(guī)則的細節(jié)經(jīng)驗，希望能夠給設(shè)計師一些參考，在設(shè)計稿上標(biāo)注出明確的鍵盤類型及交互規(guī)則，給用戶帶來更友好的填寫體驗。

一、軟鍵盤的基本元素

首先，我們先來認識一下軟鍵盤，了解軟鍵盤控件的基本構(gòu)成元素，下圖以 iOS/Android 的默認鍵盤為例：

1. 內(nèi)容區(qū)按鍵

鍵盤的核心主體，不同的鍵盤類型有不同的內(nèi)容及布局。

2. 功能按鍵

鍵盤上的動作指令，可根據(jù)場景定制按鍵的動作及交互。

3. 其他按鍵

鍵盤上的其他按鍵，包括鍵盤類型切換、大小寫切換、刪除、語音輸入等。

二、軟鍵盤的類型

了解完軟鍵盤的基本構(gòu)成，接下來看看軟鍵盤有哪些類型。

即便是在同一個原生系統(tǒng)，軟鍵盤也有著各式各樣的不同類型。我們通過軟鍵盤內(nèi)容區(qū)按鍵的不同，可以分為以下 8 種常用的鍵盤類型 keyboard type，從而滿足大部分的場景需求。

1. 默認鍵盤

常規(guī)的全鍵盤，不做任何限制，可輸入中英文字母數(shù)字等：

2. 字母鍵盤

常規(guī)英文輸入鍵盤，不可輸入中文，常用于密碼輸入場景：

3. 郵箱鍵盤

在默認鍵盤基礎(chǔ)上增加了“@”和“.”，常用在郵箱輸入場景：

4. URL鍵盤

在默認鍵盤基礎(chǔ)上增加了“.com”、“.”和“/”等，常用在輸入網(wǎng)址的場景：

5. 數(shù)字鍵盤

僅可輸入數(shù)字 0-9，常用于輸入驗證碼場景：

6. 電話號碼鍵盤

在數(shù)字鍵盤的基礎(chǔ)上，增加「*」「 # 」2 個符號：

7. 小數(shù)點鍵盤

在數(shù)字鍵盤的基礎(chǔ)上，增加小數(shù)點，常用于金額輸入場景：

8. 數(shù)字符號鍵盤

在數(shù)字鍵盤的基礎(chǔ)上，多了標(biāo)點符號：

三、軟鍵盤上的功能按鍵

除了認識軟鍵盤的類型，還有一個非常重要的元素——功能按鍵keyboard actions，即鍵盤上的動作指令，這和用戶的填寫效率及體驗有重要的關(guān)聯(lián)。

不同系統(tǒng)提供了多種動作指令，如iOS提供了多達12種可指定的動作指令，這里就不一一列舉了，其中常用的指令有以下這些：

1. 換行 (return)

鍵盤默認的動作指令，點擊執(zhí)行換行動作，一般用于長文本輸入場景。

2. 前往 (go)

點擊后執(zhí)行進入下一個任務(wù)項的動作，一般點擊后鍵盤收起且伴隨著網(wǎng)頁跳離，如輸入網(wǎng)址場景。

3. 下一步 (next)

點擊后執(zhí)行切換至下一個輸入項的動作，常見于表單填寫頁。

4. 搜索 (search)

點擊后執(zhí)行搜索動作，一般點擊后鍵盤收起且伴隨著網(wǎng)頁跳離。

5. 發(fā)送 (send)

點擊后執(zhí)行內(nèi)容傳送的動作，常見于通訊工具的信息發(fā)送或者評價等場景。

6. 完成 (done)

點擊后執(zhí)行任務(wù)完成后終結(jié)的動作，如表單填寫完成場景。

四、軟鍵盤的細節(jié)考量

通過以上的介紹，相信大家對軟鍵盤已經(jīng)有了大致的認識。接下來來說說在實際的產(chǎn)品設(shè)計過程中，我們需要注意到哪些細節(jié)？

1. 細節(jié)一：根據(jù)輸入場景喚起恰當(dāng)?shù)逆I盤類型

上圖是一個填寫收件人聯(lián)系方式和地址的表單頁面，在填寫過程中可以看到用戶遇到了以下幾個問題：

1）手機號填寫調(diào)起的是默認鍵盤

用戶需要手動切換鍵盤且只能切換至數(shù)字符號鍵盤，除了用戶需要輸入的數(shù)字外還會有很多 “ 沒用的 ” 標(biāo)點符號；如果不小心誤觸了某些符號，鍵盤又會自動切換回默認鍵盤。

2）手機號填寫輸入框可以填寫中文和其他字符

輸入框沒有做字符類型的限制，且用戶點擊保存后才會有校驗提醒。

以上問題主要是因為沒有根據(jù)用戶的輸入場景喚起恰當(dāng)?shù)逆I盤而引起的，每一個細節(jié)的疏忽都可能會導(dǎo)致不同的體驗問題，因此在我們的設(shè)計交付物一定要明確鍵盤的類型。

2. 細節(jié)二：“ 巧用 ” 鍵盤的功能按鍵，定制恰當(dāng)?shù)膭幼髦噶?/h3>

除了鍵盤類型，我們還需要考慮鍵盤上的功能按鍵，特別是涉及到表單輸入的場景。

從前文的示例動圖還可以看到：當(dāng)用戶填寫完一項內(nèi)容后需要用戶手動移到下一項的位置并觸發(fā)再次喚起鍵盤。

用戶在整個交互過程中，手移動的路徑是很長的，特別是一些大屏手機，這大大降低了用戶的填寫效率。我們可以合理的利用鍵盤上的功能按鍵來解決這個問題并提升填寫效率，實現(xiàn)更好的交互體驗。

1）表單的填寫場景

用戶首次觸發(fā)填寫項喚起鍵盤，這時候可以把鍵盤的功能按鍵 keyboard actions指定為「下一步」，用戶完成輸入內(nèi)容點擊此動作指令即確認當(dāng)前輸入框的內(nèi)容同時進入下一個內(nèi)容輸入。

這樣不僅可以減少用戶操作，提升表單填寫效率，甚至可以降低頁面的跳出率。還有一個需要注意的點是：到最后一個輸入項的時候，功能按鍵應(yīng)該指定為「完成」或者「前往」。

2）單項內(nèi)容填寫場景

用戶觸發(fā)填寫項喚起鍵盤后，我們可以通過用戶場景來定制動作指令，從而減少用戶的操作成本。如搜索場景，我們可以將功能按鍵指定為「搜索」；在聊天/評論等場景，可以指定為「發(fā)送」；在輸入網(wǎng)址的場景，可以指定為「前往」……

因此在實際的產(chǎn)品設(shè)計過程中，除了標(biāo)注出鍵盤類型，我們還需要標(biāo)注出鍵盤的功能按鍵，對于表單填寫頁面，還應(yīng)該標(biāo)注出多種鍵盤的情況以及功能按鍵的切換規(guī)則。

3. 細節(jié)三：考慮鍵盤喚起和收起時的臨界條件

鍵盤喚起和收起都會引起用戶可視區(qū)域的變化，因此我們還需要考慮鍵盤喚起和收起時的臨界條件。

1）重要內(nèi)容是否會被遮擋我們在設(shè)計界面的時候，要考慮到喚起鍵盤時是否會把重要內(nèi)容遮擋掉

如下圖不同產(chǎn)品的登錄頁面：

喚起輸入鍵盤前：

喚起輸入鍵盤后：

圖一初看沒有什么問題，實際上卻沒有考慮到鍵盤喚起狀態(tài)時對信息的遮擋。用戶輸入完手機號，需要先收起鍵盤再喚起密碼的輸入，最后又需要先收起鍵盤才能點擊登錄按鈕，增加了操作成本。

圖二和圖三則都考慮到了鍵盤喚起和收起的臨界狀態(tài)，是比較好的案例。

圖二采用了頁面上移的形式，當(dāng)鍵盤被喚起時，頁面往上移動，保證重要信息都在用戶可視區(qū)域內(nèi)，鍵盤收起時，頁面恢復(fù)默認狀態(tài)；圖三的設(shè)計保證了無論鍵盤處于什么狀態(tài)都不改變頁面布局且不會遮擋重要信息。

2）焦點改變與鍵盤狀態(tài)的聯(lián)動

還有一個需要考慮的小細節(jié)是用戶從喚起鍵盤到完成輸入這一過程并不一定是連續(xù)的，如用戶聚焦輸入框喚起鍵盤后或者輸入到一半時，又想看看頁面上的其他內(nèi)容而上下滑動了頁面。

像這樣的場景，我們應(yīng)該如何處理與鍵盤狀態(tài)的聯(lián)動呢？

比較好的做法應(yīng)該是當(dāng)用戶上下滑動頁面時或點擊鍵盤及輸入框以外的地方時，收起鍵盤，即輸入框失焦時收起鍵盤，用戶再次聚焦輸入框后喚起鍵盤。

輸入框失焦即收起鍵盤的交互細節(jié)是各系統(tǒng)可支持的配置值，實現(xiàn)起來并不復(fù)雜。但如果設(shè)計交付物沒有標(biāo)注清楚規(guī)則的話，開發(fā)同學(xué)很可能會忽略。

這種情況下當(dāng)鍵盤被喚起后，只能由用戶手動收起，導(dǎo)致用戶在輸入的過程可能會出現(xiàn)不順暢的體驗。

五、寫在最后

完整清晰的軟鍵盤調(diào)用規(guī)則和臨界處理可以提升用戶填寫效率，確保用戶友好的交互體驗。

我們在做輸入場景的設(shè)計時，需要特別注意對軟鍵盤調(diào)用的規(guī)則處理：指定合適的鍵盤類型；指定恰當(dāng)?shù)墓δ馨存I——即動作指令；控制鍵盤喚起和收起的臨界條件。

設(shè)計處處是細節(jié)，而細節(jié)，也是友好設(shè)計的貼心體現(xiàn)。

共勉之:-)

#專欄作家#

設(shè)計牛奶盒，微信公眾號：設(shè)計牛奶盒，人人都是產(chǎn)品經(jīng)理專欄作家。做一個有生活態(tài)度的設(shè)計牛奶盒。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。