屏幕虛擬鍵盤鍵位之間為何都有空隙,原因是什麼?僅為了擬物?

我不了解人機心理學,推測是視覺對空隙進行了識別後,加大了多鍵位的判別,反映到了手指動作的精確度。


樓主自己回答了增加空隙的果「視覺對空隙進行了識別後,加大了多鍵位的判別,反映到了手指動作的精確度。」,希望了解增加空隙的因。

先從視覺注意開始吧,嘗試尋找下圖中不同的元素。

圖1

是不是很快能夠從一大片"L"圖形中尋找到圖形"+",但除了圖形"+"外,你還能夠看出另外一種元素嗎?再試試下圖。

圖2

很容易看到圖中由"+"組成的矩形,但是看到圖形"T"則困難得多(圖1),當我們在圖2中利用矩形標示出相應區域,是否圖形"T"能夠明顯識別出來,回到圖1,請再嘗試視覺搜索,並對比一下。

觀察者大約能夠在50毫秒內看出圖形的邊界--認知心理學當中稱之為彈出效應(pop-out effect)。這種「彈出」使我們能夠對刺激進行平行搜索。傳送門:視覺搜索 http://en.wikipedia.org/wiki/Visual_search

回到虛擬鍵盤的設計。當多個視覺元素排列在一起時,需要用戶能夠快速的對它們進行識別,並確定可點擊區域,對比圖3中兩種設計樣式,哪種更能刺激你的視覺產生彈出效應?區塊化的視覺效果是不是讓你在進行視覺搜索時壓力更小一些?

圖3

另外,邊緣的知覺清晰度與圖形的亮度能夠影響人們對圖形的識別(圖4)。ps.這也是為什麼在設計時為突出主要元素需要加強與其它元素對比度的原因。

圖4

鍵位之間的空隙確實能夠加強心理干預,提高手指在點擊時的精確性。除了心理層面的作用,在實際操作中,這樣的鍵位如何提高精確度?

我們來回顧一下蘋果官方關於適合點擊區域的定義 "44 x 44 points is the comfortable minimum size of a tappable UI element",換算成iPhone4的解析度應該是88 x 88(Retina屏寬高均提高2倍 one point equals two pixels ),iPhone4虛擬鍵盤豎屏狀態下單個鍵位可視寬高為52px*76px(圖5)。

圖5

單個鍵位的視覺尺寸小於官方定義的「舒適尺寸」,實際用戶在操作過程中是否會有比較大的失誤率呢?通過蘋果專利"Activating virtual keys of a touch-screen virtual keyboard",了解iOS鍵盤能夠動態的調整觸摸熱區,觸摸位置與觸發鍵位通過距離來確定,輸入時引入權重等。豎屏時的鍵位之間的間隙橫向間距為32px,豎向間距為12px(這個間距根據屏幕寬度所能容納的最多鍵位計算出來的),當用手指點擊觸屏上的虛擬鍵位時,實際手指點擊區域往往於目標不一致,一般位於目標的下方,76px的鍵位高度與32px的間隙能夠滿足點擊時所需要的區域(鍵位寬度為52px,大多數鍵位左右有12px的間隙)。

虛擬鍵位的視覺尺寸雖然小於「舒適尺寸」,通過動態的調整觸摸熱區能夠儘可能的提高用戶輸入的精確度。

另外,豎屏鍵位有幾個間距比較特別的位置,第一行鍵位與頂部的間距為22px,除第二行鍵位最左側及最右側的間距為38px外其它行均為6px,Shift鍵和Delete鍵與左右相鄰的間距為24px(更大的間隙對於用戶心理的干預更大)。

根據@鄭紫陽 提問更新:全鍵盤省如果略掉間隙可提高鍵位視覺尺寸,缺少間隙的干預作用有可能點擊位置接受邊緣導致用戶在點擊操作時錯誤率上升,因為虛擬目標位置和手指點擊區域往往於不一致。省略掉間隙導致視覺搜索壓力會增加。另外,在進行視覺設計時第二行的A鍵和L鍵很難處理(邊距大於其它鍵位,在橫屏時更明顯)

附贈橫向蘋果鍵盤尺寸標註:

圖5

推薦閱讀 @Hi-iD 的《Affordance(可供性)和設計》,其中對iOS鍵盤的分析很好,受教很多。傳送門:http://www.hi-id.com/?p=2732

其實,IOS設備里並不是每個鍵盤都有間隙的,像數字鍵盤及日文鍵盤等,可能設計者考慮這些鍵位尺寸都比較大,用戶點擊也比較方便,所以將間隙拿掉了。

圖6另外說到虛擬鍵盤的擬物化設計,在視覺樣式上應該不算吧(資深死美工@JJ Ying 的回答),最少在iOS之前木有哪款鍵盤樣式長成這個尿性,擬物主要體現在鍵位布局方面,像虛擬鍵位上的字母不管用戶有沒有切換Shift永遠都是大寫,這裡也順帶分析一下,具體有兩個原因:

  1. 歷史
  2. 識別

歷史原因,打字機的鍵位上的字母均為大寫,傳承到電腦鍵盤上的字母也是大寫,做為開創觸摸操作的iPhone手機在鍵盤設計上也頑強的保留了這個傳統(圖7)。

圖7

識別原因,在同字型大小的情況下,大寫字體比小寫字體更飽滿及更整齊,識別性更強,小寫字體基本位於x-height內,但有少數字母如q、p、j等會突破基線處於下部區域,而 i、f、j又會超出x-height處於上部區域,在排版設計中,小寫字體能夠很容易的引導視線的流動,但在鍵位這樣需要強識別的位置可能導致視覺無法像搜索大寫字母一樣進行集中。

圖8
回頭看好像又扯遠了些,就到這吧,看官您受累了!


沒有空隙時,字母將連成一片,使用中,只有字母本身存在差異,可分辨的特徵過少過小,認知速度將顯著下降,用著累心費神。

分隔時,所有方式中,最有存在感的,是獨立成塊,且互相有可視間隔。最沒有存在感的,是線,所分割的元素相互仍然貼合。至於分塊時,相互間距多大最合適,沒有一定的標準。

蘋果在 2006 年申請的專利 [US20060085757 Activating virtual keys of a touch-screen virtual keyboard] 中有一些草圖,可以從中看到,設計師的取捨思路。
http://www.freepatentsonline.com/20060085757.pdf


1. 空隙讓不同的按鍵之間 的邊界更明確,且傳遞的信息是「這兒不可點擊」,用戶會下意識避開,誤點的概率會降低。


也有沒有縫隙的,個人認為視覺上更加簡潔美觀。


Android L鍵盤,作為下一代Android的默認鍵盤,就沒有空隙了。類似的還有flesky keyboard,視覺上起碼漂亮了很多。


Google新版輸入法…


補充一個相關的小細節:打字時按在鍵和鍵的間隙上也是有反應的,而且是根據當前輸入情況靈活決定。比如sde三個鍵中間的那個位置,當前輸入coffe時,按下去是e;當前輸入是circu時,按下去是s。


撥號鍵盤顯然沒隔斷


現在才知道屏幕鍵盤在設計的時候的尺寸以及各種處理並不是簡單地從視覺角度出發得到的- -


給你看看強迫症者的新輸入法,羨慕嗎?你也可以擁有。


無論是 iOS 輸入法還是當前的很多智能輸入法(比如觸寶),虛擬鍵盤的樣式都只是一副圖而已。即使觸摸點在空隙間也是會根據上下文來推測你的按鍵。所以首先題主要明白,虛擬鍵盤顯示的樣式大小與實際接受觸摸的區域沒有直接聯繫。虛擬鍵盤的樣式僅僅只起到外觀美化作用。

至於具體設計上,不是都有空隙的。具體應該只是當時設計這張圖的設計師喜歡有空隙。——但這個設計其實並不完全科學。

現在很多基於移動設備的輸入法都已經開始走無空隙或者少空隙的路線了。——我個人的觀點是在不影響視覺的情況下,空隙應該儘可能小。iOS 預設輸入法裡面的那個空隙顯然是過大了。


1.「凸出」效果,與手指點擊按下相呼應,可點擊和增加點擊慾望
2.排序上更整潔


這種用著更舒服。


BB10的機器就不是這樣可是依然好用啊。。。。。。


然而我在使用MATERIAL DESIGN的鍵盤= =就沒有按鍵形狀的設計、大小寫鎖也是用字母的大小寫來標識的,這個並沒有什麼問題= =


谷歌輸入法哭暈在廁所,其實吧,都可以。
習慣了輸入法鍵位布局,加上輸入法自己的輸入錯誤檢查,這些都是小問題。

輸入這件小事,並沒有想像的那麼複雜。


是為了突出按鍵,同時也是便於操作。


避免誤操作,因為每個人的指法習慣不同,用指腹按的,更容易誤點,用指尖的會好很多。
當你按鍵時,系統會識別你手指按壓區域的「主要部分」即,比如按G時,由於你手指與屏幕接觸面過大,同時按到了F和V,系統必須要識別你按在哪個鍵上的像素更多,面積更大,從而判斷你的意向,留出空隙就是降低錯誤識別的幾率,提高輸入精度。
同時留空隙也能給用戶更好的視覺體驗。


推薦閱讀:

有什麼輸入法適合經常需要輸入生僻字的人?
在 macOS, Windows, iOS 和 Android 上如何方便地打出帶聲調的拼音?
如何從頭開始編一個拼音輸入法?
Android 手機上最好的輸入法是哪種?

TAG:iOS | 輸入法 | 人機交互 | 交互設計 | 用戶體驗設計 |