小螢幕可視地區打造出成功的使用者介面設計方案

來源:互聯網
上載者:User

文章描述:又是為了觸屏行動裝置而設計.

印象當中,最近這些年的春天總是會帶來讓人覺得真心彆扭的氣候體驗,雨和冷風就像催化劑一樣,讓生活和工作當中的人和事也變得異常淩亂,彷彿一團被咀嚼到完全失去味道的檳榔。November Rain前奏當中的鋼琴旋律多少可以讓心安然一些,一旦摘下耳機便又是個令人想要把自己的腦袋擰下來吃掉的世界。

可腦袋一旦被擰下來,就什麼也無法吃的樣子了,不是嗎。說正事兒吧。Designing for touch,關於這個話題及相關的文章,最近貌似已然鋪到大街上了,不過我還是做我的吧。在標題裡加了個不倫不類的“又是”二字,以示區分。內容方面應該會有些交集,但這是我自己的。

Josh Clark老師最近蠻活躍的。在本文中,他將向我們介紹一些觸屏行動裝置使用者介面設計當中需要注意的問題,並對iPhone、iPad和Android相關裝置在觸控互動體驗方面的友好性進行了對比和分析。歡迎,走著。

對於行動裝置的作業系統及應用來說,判斷其使用者介面設計方案是否優秀的一個重要衡量標準,就是看它對於手指觸控操作的友好程度。相比於案頭計算裝置及相關的軟體環境,觸屏行動裝置所具有的互動特性幾乎將使用者體驗設計師們帶入了工業設計的領域;設計方案更多是在體現著人機工學方面的原理,而不再是僅僅用來規劃內容與功能的視覺呈現方式。

拇指熱區與底部原則

首先,我們需要瞭解人們通常會以怎樣的方式將手指停靠在裝置上。拿手機來說,普通青年們多數會使用拇指來進行觸控操作,所以觸屏手機的介面互動方案基本是圍繞著拇指來進行打造的。

拇指是很不可思議的,據說它是將我們與動物區分開來的重要標誌之一。..拇指的功能具有相當的彈性,同時也受到一定的局限。對於常規的觸屏手機來說,我們可以使用拇指掃過螢幕當中的大部分地區,但其中大約只有三分之一屬於真正有效觸控地區。所以在設計當中,要盡量將最重要的介面互動元素放置在這個範圍當中。在右手持機的狀況下,有效觸控地區位於螢幕的左下方:

這也正是移動系統或應用中一些重要的工具列或導航結構通常被放置在介面底部的原因。與此相反的是,在傳統的電腦裝置系統內容中,導覽功能表一類的介面元素通常被放在介面頂部,無論是本地軟體還是網頁基本都是如此。對於我們有限的拇指作用範圍來說,這種傳統布局方式顯然不能在行動裝置的使用者介面當中很好的適用。

相比之下,左下角還是右下角的問題略顯次要。我們在實際當中經常會更改左右手持機方式,想想看是不是這樣,譬如對於右撇子來說,當他們正在寫字或是需要同時使用滑鼠操作電腦裝置時,通常會將手機交於左手操作;而左撇子們則正相反。不過在多數時間內,使用右手持機的使用者還是要相對較多一些。

底部原則可以協助我們對介面當中的可觸控元素進行更好的組織。最常用的功能按鍵應該被放在拇指最容易觸摸到的作用區當中,而其它相對次要或是比較敏感的控制元素則應該盡量避開這個地區。以iOS中的“編輯”按鈕來說,它通常被置於介面右上方,這個位置即可以保證它清晰可見,同時又不會被很容易的觸碰到,以免發生誤操作。

另外,底部原則不僅與拇指的作用範圍有關。當我們使用拇指在螢幕上進行操作的時候,手指下方的內容部分將會被遮擋住;只有將互動控制元素放在內容地區的下方,才能讓這種負面效應降至最低。其實這是一條具有廣泛適用性的設計原則,我們可以在很多其他類型的裝置中看到這種原理的體現,例如iPod、計算機、帶有實體鍵盤的普通手機、電子秤等,無不是內容在上,控制在下。

我,機器人(Android)

在Android裝置中,底部原則這檔子事被機身下方的實體硬按鍵搞的複雜了些許,尤其是冰淇淋三明治之前的平台。這些硬體級的控制按鍵佔據著底部地區,在某種程度上會與應用內的底部互動元素形成視覺上的競爭。彼此層疊在一起的軟硬體工具列會使使用者在快速控制項目的過程中產生迷惑,增大誤操作的幾率;對於在兩個維度上共存於拇指熱區當中的軟硬體按鈕,它們之間的衝突幾乎是不可避免的。

固化的硬按鍵是無法被移除的,避免控制元素之間產生衝突的最直接的辦法就是讓虛擬與實體的工具列在視覺上彼此分離,而這就意味著需要將Android應用中的相關控制元素和導航結構放置在使用者介面的頂部。這自然不是最理想的解決辦法,因為介面頂部離拇指熱區遠著呢,你要觸摸其中的某個按鍵時,幾乎會將半個手掌都覆蓋在螢幕上。不過比起與硬體工具列層疊在一起的方式來說,這種解決方案仍是利大於弊的。

這種將重要的控制及導航元素放在頂部的做法與iOS裝置的方式正相反。雖然iPhone的Home按鍵同樣在機身底部,但它的表現形式與Android裝置的硬按鍵有很大區別,它不會對應用介面底部的相關操作元素帶來視覺上的幹擾。下面的截圖展示了Foursqure應用在這兩個平台中的介面設計方案對比:

[1] [2] [3]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。