DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 設計理論:觸摸屏按鈕的尺寸和空間設計
設計理論:觸摸屏按鈕的尺寸和空間設計
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:在觸摸屏按鈕設計當中,尺寸對可用性的影響相當巨大。ISO和ANSI標准都推薦0.75" x 0.75"(約19 x 19毫米)的尺寸,來自萊特州立大學心理系的一項研究也表明0.75" x 0.75"的按鈕對於用戶來說是滿意率最高的。

在觸摸屏按鈕設計當中,尺寸對可用性的影響相當巨大。ISO和ANSI標准都推薦0.75" x 0.75"(約19 x 19毫米)的尺寸,來自萊特州立大學心理系的一項研究也表明0.75" x 0.75"的按鈕對於用戶來說是滿意率最高的。

讓我們來稍微深入地探討一下,我覺得1.25" x 0.75"(約32 x 19毫米)才是最佳尺寸。為什麼呢?這個當然和比例有關,就像陪你度過童年的普通電視機現在早已被寬屏電視劇所取代了,這背後的道理其實也是比較簡單的。

 

按鈕本身的尺寸是一個方面,按鈕間的間距呢?非常有意思的事實是按鈕間的間距對於整個交互的性能和精確度影響微乎其微。所以即使在屏幕尺寸很小的情況下,仍然建議增大按鈕面積,哪怕這樣做會使很多按鈕緊挨著。當然如果有多余的空間,最高0.125"(約3毫米)的間隔還是有助於讓界面用起來更舒服,盡管整體精度和速度不會發生變化。

希望在你的設計裡使用尺寸更小的按鈕?沒問題,我們這裡討論的尺寸都是按鈕的實際可觸摸面積。如果你使用了更小的按鈕,只要保證按鈕的可觸摸面積超過他本身的可視面積,達到我們的要求就好了。當然這種情況下就得考慮按鈕間的間距問題了。

如果你要處理的觸摸屏尺寸實在是非常小,你可能不得不使用小於0.75"(約19毫米)的按鈕。這個時候0.375"(約9.5毫米)的尺寸可以作為參考,但是絕對不能讓按鈕小於0.25"(約6.4毫米)。就像投擲飛镖一樣,無論用戶離觸摸屏多近,都很難每次都“命中”按鈕的中心區域。一個普通的人多次按同一個點,其精度一般在0.125"(約3.2毫米)以內。

那尺寸變大呢?不得不說這也未必是好事,因為大過一定程度之後用戶點擊的精度不會提高,速度反而會下降,因為移動於各個按鈕間的時候手指必須移動更大的距離。

 

現在讓科學來告訴我們一個理想的按鈕應該是什麼樣的。

希臘字母 "φ" 在數學上往往表示一個定值——1.618,也就是大家非常熟悉的“黃金分割”。了解文藝復習的朋友肯定都知道黃金分割被廣泛應用在非常多的地方。比如蒙娜麗莎這幅畫上所使用的黃金分割就足夠你寫一整本書了。

如果你把這個黃金比例用在按鈕上,那這個“理想”的按鈕大小就是1.25" x 0.75"(約32 x 19毫米)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved