38一下 today: 當螢幕變大了,大拇指太短怎麼滑手機?

2014年9月27日 星期六

當螢幕變大了,大拇指太短怎麼滑手機?



手機的螢幕越來越大,但永遠都是朝細長型發展,最大的原因當然是跟我們的手有關。螢幕再怎麼變,都必須要考慮到握持的問題,既然稱為手機,當然還是該以能夠一手掌握為原則,因此尺寸也一直限定在一定的程度,沒有無止境的變大下去。然而,這種狀況未來是不是會被打破,也沒人敢打包票。

過去蘋果在推動iPhone 5的時候,一直強調儘管螢幕變長,依然只需要靠一個拇指就能夠輕鬆操作機器介面。「Pretty sure its the common sense thing.」這是他們當時在廣告中強調的話。


但是,現在 iPhone 6 和 iPhone 6 Plus 都拋棄了「常識」中的 3.5 吋或 4 吋螢幕,一直習慣過去 iPhone 尺寸的使用者,可能得重新培養習慣。


而那些iOS開發者,過去曾嘲笑 Android 開發者不得不為多變螢幕尺寸去加班,進行調整設計,現在也得忙碌起來。


介面設計師Scott Hurff發表了一篇文章叫「How to design for thumbs in the Era of Huge Screens」,在文章中說明,當大螢幕的時代來臨的時候,身為程式介面的設計師,更應該注意到如何調整UI的設計,讓未來的APP在大螢幕的手機上,能夠一樣顧慮到拇指操作的問題。


你是怎麼拿手機的?


首先要瞭解拇指操作手機這件事,設計師應該要能夠顧慮到一般人使用手機的習慣。


像是上圖是一般人常見的握持手機的姿勢,但是往往依照情況、使用習慣的不同,甚至可能是大拇指的靈活度,而有所不同。根據一份Steve Hoober的研究,針對1300多個使用者的使用習慣,推導出人們操作手機的姿勢,主要有三種:


1.單手持握操作 49%


2.一隻手持握手機,另一隻手操作 36%


3.雙手操作 15%



由這份研究可以看出,49% 的使用者習慣單手持手機,這也是目前最主流的持機方式。同時,調查還發現有 67% 的人習慣用右手大拇指操作,33% 的使用者則是左手大拇指進行操作。


儘管螢幕的尺寸在不斷變化,人們依然習慣使用大拇指來操作。


找出拇指操作區域


結合 Steve Hoober 的研究,Scott Hurff表示,一般人最常用的操作姿勢,以及會產生的狀況為:



  • 單手握手機

  • 右手的大拇指在螢幕上滑動

  • 在手機螢幕右下角將會有一個大拇指的「暗角」(按不到的地方)


我們再來用顏色來表示這種現象,下圖中,綠色的區域為右手大拇指可以輕鬆滑動操作的範圍,黃色的區域為你將大拇指稍微挪動一下,可以點擊到的區域。而橘色的區域則為大拇指觸及不到的區域。(以單手握持的狀況)



從上面的對照圖可以看到,在綠色的安全區域中,其實從iPhone 4S一直到iPhone 6都沒有什麼太大的改變,但是到了iPhone 6 Plus,綠色的範圍所佔的比例明顯的變少了,這其實也不難理解,因為我們的大拇指並不會因為螢幕變大而離奇的伸長,所以當螢幕大到一定的尺度時,大拇指就伸不過去了,除非你是下面這位:



為了更進一步地還原觸控螢幕使用者可能的狀況,有時你可能不習慣握住手機的右下角,而是把握住右邊比較上面的地方。在這樣的情況,拇指的操作區域當然也會上移。這樣的話可輕鬆操作的區域範圍是否會變大呢?


即使如此,由上圖可以看出來,人們單手操作 iPhone 6 和 iPhone 6 Plus 時,拇指可自然觸碰的區域也沒有超過 50%。


iPhone 6怎麼解決這問題


所以,你可以看到iPhone 6 Plus怎麼透過介面的設計,讓螢幕可以符合拇指操作區域。解決之道就是他們所謂「Reachability」的設計。也就是按兩下 Home 鍵,就可以把螢幕整個畫面往下拉的功能。


他把iPhone 6 Plus中示範的畫面,對比上面的色彩分布圖,你可以看到,這隻手的可操作範圍是落在綠色區域中的。



除此之外,更進一步的研究iPhone 6與iPhone 6 Plus,當使用iPhone 6 Plus的「Reachability」,下拉的區域會比iPhone 6下拉的區域範圍更多。目的也是一樣,就是讓螢幕上的內容,可以落在大拇指在Plus上的可操作區域中。所以我們可以看出來,當螢幕變大,設計者要考量的,絕對不僅僅只是把原本在小螢幕上的介面,等比例放大而已,更該要考慮許多操作上的問題。iPhone 6在設計上是如此,APP的開發者也該善用螢幕的可操作區域,來設計出更符合使用者在大螢幕上新的使用習慣的產品。


嗯,既然螢幕大了,尺寸又不太可能再縮回去。如果嫌你的大拇指不夠長的話,你也可以這樣:




加入T客邦Facebook粉絲團 手机平仓大折扣: www.freepromonow.com.