觸摸屏與鍵盤和鼠標的工作方式不同
在為移動設備設計網站的早期階段,大多數開發商將產品分類分叉。 他們發布了功能齊全的桌面版本,然後推出了“移動優化”版本,剝離了許多品牌和圖像,以適應糖果電話和3G無線網絡的有限功能和網絡速度。
然而,當代智能手機可以使網頁的效率與台式電腦一樣高效,通過網絡與昨天的DSL線路一樣好或更好。
然後,設計重新回到單用戶界面。 但設計師面臨的風險並不是智能手機或平板電腦無法呈現現代敏感網站。 相反,觸摸屏設備上用戶輸入的方法需要對底層網站設計進行有意義的更改。 假設遊客擁有鍵盤和鼠標的網站建設日期已經結束。
觸摸屏基本設計規則
設計一個支持觸摸屏的Web界面需要過去傳統的顯示器 - 鼠標鍵盤方法的發展。 特別是,您必須適應手勢,水龍頭和多點觸控輸入等互動。
- 攻絲不准確。 除非客戶擁有幼兒的手指,即使使用非常準確的軟件控制,也很難挖掘並且精確。
- 手勢不同於水龍頭。 為了在觸摸屏上滾動長頁面,用戶在瀏覽器窗口上向上滑動一個手指。 在您意識到使用鼠標進行瀏覽之後,您將鼠標向下移動,這可能看起來並不重要。
- 兩個(和更多)手指輕敲。 用戶可以同時在設備上使用多個手指點擊來控制它。 這些額外的水龍頭可能意味著具體取決於用戶設備的操作系統。
- 高強光設備。 大多數觸摸屏平板電腦的屏幕都由堅固的玻璃製成。 在明亮的光照條件下,這種材料可能非常難以閱讀,並且有很多眩光。 此外,所有觸摸,他們會在屏幕上得到指紋和污跡,可能會影響您的網頁的外觀。
- 屏幕上的鍵盤。 雖然有些用戶使用無線鍵盤連接到平板電腦,但大多數平板電腦用戶都使用屏幕鍵盤輸入數據。 OSK的輸入可能會導致一些搞笑的輸入錯誤以及長時間使用不舒服。
由於設備的這些功能,Web設計者應該強調觸摸屏用戶的幾個基本設計規則:
- 不要將可點擊的項目放在一起太近。 沒有硬性和快速的規則來定義距離太近,但通過用胖手指點擊(敲擊)可能難以導航鏈接列表,特別是以小字體大小。 可能很煩,必須放大才能嘗試點擊鏈接。 這個原則對於按鈕和鏈接都是正確的。
- 層次結構很難保持開放。 一種流行的動態菜單形式使用JavaScript打開子菜單,當用戶單擊並將鼠標懸停在子菜單上時。 這些狀態可能非常困難或不可能在觸摸屏上使用,因為它們不會保持打開狀態或不會關閉。
- 將鏈接和可點擊區域從窗口的右側移開。 大多數人都是右撇子,並傾向於在屏幕的那一側滾動。 由於滾動是通過手勢完成的,因此有時可能會錯誤地在鏈接上開始滑動。 如果用戶想在頁面上滾動,而用戶意外地點擊鏈接,則用戶可能會感到惱火。 通過將您的鏈接從右側移開,可以幫助他們避免這種不便。
- 沒有老鼠。 這意味著沒有鼠標指針 。 您不應該依賴鼠標指針更改來幫助指示某些內容可點擊。
- 懸停狀態不存在。 作為上述的必然結果,由於沒有鼠標,所以沒有任何東西可以懸停。 在觸摸屏設備上點擊(點擊)或不點擊鏈接,用戶無法從顏色變化,工具提示或狀態欄更改等懸停狀態中推斷出任何有用的信息。
- 黑色背景增強了眩光。 由於眩光,具有黑色背景的網站在觸摸屏設備上可能非常難以閱讀。 黑色使設備上的指紋更清晰,模糊屏幕。 而黑色可以將屏幕變成反射用戶臉部的鏡子,而不僅僅是屏幕上的文字。
- 表單中的長塊文本很難寫。 雖然可以在iPad或Android或Windows平板電腦上編寫完整的小說,但大多數人不喜歡使用屏幕鍵盤進行長時間的文本操作。 您的設計越能讓數據輸入越簡單越好。
考慮觸摸屏設計的最重要的方面是在觸摸屏設備上測試您的頁面 。 雖然有很多iPad和Android模擬器可用,並且有很多Windows平板電腦,但它們仍然不能提供觸摸屏的感覺。 你不能說出鏈接太近或者按鈕太小,或者眩光使得頁面太難閱讀,除非你在平板電腦上試用它們, 然後再發布你的新網站設計。