iT邦幫忙

DAY 24
5

MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松系列 第 24

MIS2000Lab.的「HTML5 認證考試,從零開始」#24-- 自適應使用者介面 #1

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item\_id=1003110
上一篇文章:使用Application Cache加入離線支援
http://ithelp.ithome.com.tw/question/10160498

隨著時代的進步,使用者的週邊越來越多樣化,觀看您網頁的用戶可能用的是高解析度的電腦螢幕、小螢幕的智慧手機或是寬螢幕的平板,

不同的畫面大小、不同的解析度讓網頁設計師傷透腦筋(如果加上印表功能那就更複雜了)。

如何才能讓每個使用者在不同的週邊(螢幕)上獲得「最佳的瀏覽經驗」呢?

(註解:這個專有名詞稱為RWD,Responsive Web Design。台灣翻譯成自適應網頁設計,
中國翻譯成響應式網頁設計。由Ethan Marcotte於2010新創這個名詞,詳見http://alistapart.com/article/responsive-web-design。)

==== 支援多種規格 ====

想做出一個網頁卻適合各種週邊(螢幕),讓使用者獲得最佳瀏覽經驗,英文稱為one size fit all的網站:

[ul] [li]輸入介面:有些用戶使用電腦,他們的操作模式以「滑鼠、鍵盤」為主,而使用智慧手機與平板的人,則是以「觸控」、「觸控筆」為主。[/li] [li]螢幕解析度:從以前的電腦螢幕1024x768解析度,到目前筆記型電腦常見的1366x768,許多新的大尺寸電視都是Full HD(1920x1080)......。[/li][/ul]

[img=613,532]http://ithelp.ithome.com.tw/upload/images/20141019/201410192144385443c04626065\_resize\_600.jpg[/img]

[img=613,426]http://ithelp.ithome.com.tw/upload/images/20141019/201410192144575443c05992b8a\_resize\_600.jpg[/img]

==== 螢幕解析度(Screen Resolution) ====

<meta name="viewport" 
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

註解:上面的意思就是不允許使用者自行縮放。相關用法如下:
	initial-scale--最小0.25,最大5
	minimum-scale--最小0.25,最大5
	maximum-scale--最小0.25,最大5
	user-scalable--1或 0(true或false)

==== 顯示密度(Display Density)====

[ul] [li]**文字:**對於高解析度的螢幕,將文字(font size)變大。[/li] [li]**影像:**為不同解析度的螢幕,設定同一個影像的不同副本(高解析、低解析等等)。SVG(Scalable Vector Graphics)也是一個好選擇,在縮放影像時有更好的效果。[/li][/ul]

==== 輸入方式 ====

平板與智慧手機很流行的「手指(觸控)輸入」,永遠無法比得上滑鼠的精準度。因此要設計RWD網頁也得慎重考慮使用者的輸入方式。

[ul] [li]**按鈕與超連結:**平板與智慧手機上,按鈕與超連結必需要放大一點,不然的話,觸控螢幕不容易正確點選。[/li] [li]Hovering(滑鼠指標經過的狀態):滑鼠指標經過超連結,指標的圖案會變成「手指」的狀態。這只有在電影螢幕上比較明顯,平板與手機上較為少見。如何提醒使用者「超連結」,恐怕得花點心思了。[/li] [li]螢幕方向(Screen Orientation,手持方向):手持式週邊(平板或智慧手機)的螢幕可能是窄而高、或是扁而寬的畫面解析度。這些週邊通常可以自動選轉畫面(可以直拿或是橫拿來改變畫面的水平)。[/li][/ul]

不要走開,馬上回來。

下一篇文章 http://ithelp.ithome.com.tw/question/10160694


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#23-- 使用Application Cache加入離線支援
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#25-- 自適應使用者介面 #2
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

1 則留言

0
mis2000lab
iT邦好手 1 級 ‧ 2014-10-21 16:20:23

關於RWD的文章,我的網站也收錄了一些,希望對您有幫助:

http://www.dotblogs.com.tw/mis2000lab/Tags/rwd/default.aspx

我要留言

立即登入留言