5個(gè)范例告訴你什么是自適應網(wǎng)頁(yè)設計

時(shí)間：2017-05-25      閱讀: 次

　移動(dòng)設備正超過(guò)桌面設備，成為訪(fǎng)問(wèn)互聯(lián)網(wǎng)的最常見(jiàn)終端。于是，網(wǎng)頁(yè)設計師不得不面對一個(gè)難題：如何才能在不同大小的設備上呈現同樣的網(wǎng)頁(yè)?自適應網(wǎng)頁(yè)設計的出現很好的解決了這個(gè)問(wèn)題。這篇文章將帶你了解一些關(guān)于自適應網(wǎng)頁(yè)設計的基礎知識和設計范例。

　　一、理論基礎：什么是自適應網(wǎng)頁(yè)設計?

　　2011 年，網(wǎng)頁(yè)設計師Aaron Gustafson在他的書(shū)《自適應網(wǎng)頁(yè)設計》里率先提出了自適應網(wǎng)頁(yè)設計的概念。

　　Adaptive design (自適應設計)：為不同類(lèi)別的設備建立不同的網(wǎng)頁(yè)，檢測到設備分辨率大小后調用相應的網(wǎng)頁(yè)。目前AWD網(wǎng)頁(yè)主要針對這幾種分辨率(320，480，760，960，1200，1600)

　　和響應式網(wǎng)頁(yè)不同，自適應設計是基于斷點(diǎn)使用靜態(tài)布局，一旦頁(yè)面被加載就無(wú)法再進(jìn)行自動(dòng)適應，自適應會(huì )自動(dòng)檢測屏幕的大小來(lái)加載適當的工作布局。因此，當您在電腦上打開(kāi)瀏覽器瀏覽網(wǎng)頁(yè)時(shí)，該網(wǎng)站會(huì )自動(dòng)檢測并選擇該桌面屏幕的最佳布局。

　　二、實(shí)踐方法：如何做自適應網(wǎng)頁(yè)設計?

　　基礎的網(wǎng)頁(yè)設計涵蓋了幾大重要環(huán)節：

　　前期的原型設計(工具：Axure，Mockplus)

　　UX設計(工具：Justinmind)

　　UI設計(工具：Sketch)

　　后期的前后端，HTML，CSS， JS.

　　而做好自適應網(wǎng)頁(yè)設計則需要遵循以下幾個(gè)步驟：

　　Step 1：Meta 標簽

　　為了適應屏幕，不少移動(dòng)瀏覽器都會(huì )把HTML頁(yè)面置于較大視口寬度(一般會(huì )大于屏幕寬度)，你可以使用viewport meta標簽來(lái)設定。以下viewport meta標簽告訴瀏覽器視口寬度等于設備屏幕寬度，且不進(jìn)行初始縮放：

　　Step 2. HTML結構

　　在這個(gè)例子中，頁(yè)面布局包括 Header， Content， Sidebar和Footer. Header固定高度為180px， Content寬600px， Sidebar寬300px。

　　Step 3. Media Queries

　　CSS3 media query是自適應網(wǎng)頁(yè)設計的關(guān)鍵，就像高級語(yǔ)言里的if條件語(yǔ)句，告訴瀏覽器根據不同的視口寬度(這里等于瀏覽器寬度)來(lái)渲染網(wǎng)頁(yè)。

　　三、自適應網(wǎng)頁(yè)設計范例

　　目前很多網(wǎng)站在PC端和手機端已經(jīng)采用了自適應設計，在不同的設備上瀏覽網(wǎng)頁(yè)時(shí)已經(jīng)可以很好的體驗到自適應網(wǎng)頁(yè)設計。比如，Amazon， USA Today， Apple， and About.com等。但自適應設計在移動(dòng)網(wǎng)站上顯示的布局可能與桌面版本會(huì )有所不同。所以，做自適應網(wǎng)頁(yè)設計時(shí)，設計師需要做更多的工作來(lái)滿(mǎn)足至少 6 種常見(jiàn)的布局需求。

　　這里有一些優(yōu)秀的自適應網(wǎng)頁(yè)設計范例供各位設計師朋友參考。

　　1. Amazon

　　與使用自適應網(wǎng)頁(yè)設計(如CNN)的其他網(wǎng)站類(lèi)似，亞馬遜鼓勵用戶(hù)下載其品牌應用。 據報道，通過(guò)采用自適應設計，亞馬遜移動(dòng)端的訪(fǎng)問(wèn)速度比以往的響應式網(wǎng)頁(yè)設計提高了40%。并且，此外，亞馬遜的自適應網(wǎng)站為移動(dòng)用戶(hù)提供了在移動(dòng)設備上使用“Amazon.com全站點(diǎn)”的機會(huì )，而響應式設計并不會(huì )提供。

　　2. Apple

　　蘋(píng)果的設計向來(lái)以簡(jiǎn)潔著(zhù)稱(chēng)，不論是它的網(wǎng)站、商店，還是產(chǎn)品設計無(wú)不體現著(zhù)這一主題。沒(méi)有采用響應式網(wǎng)頁(yè)設計，這一點(diǎn)讓蘋(píng)果飽受詬病。畢竟，它的一系列智能產(chǎn)品就是響應式設計存在的原因之一?，F在，蘋(píng)果采用了自適應網(wǎng)頁(yè)設計，這也意味著(zhù)蘋(píng)果的官網(wǎng)將會(huì )隨著(zhù)設備類(lèi)型和功能做出改變。

　　3. Avenue 32

　　在線(xiàn)奢侈品購物網(wǎng)站Avenue 32 是一家采用自適應網(wǎng)頁(yè)設計的典范。該品牌的特色是設計師與Usablenet合作，創(chuàng )造出無(wú)縫，直觀(guān)和極具視覺(jué)吸引力的移動(dòng)和平板電腦體驗。根據Usablenet的說(shuō)法，桌面版網(wǎng)站上充滿(mǎn)了內容豐富的網(wǎng)頁(yè)，包括產(chǎn)品圖片，設計師細節，策展的外觀(guān)等等，這個(gè)品牌必須創(chuàng )建一個(gè)視覺(jué)和功能上與這種桌面體驗一致的多渠道網(wǎng)絡(luò )產(chǎn)品。

　　Usablenet首席營(yíng)銷(xiāo)官Carin van Cuuren表示：“采用自適應網(wǎng)頁(yè)設計使Avenue 32 能夠突出其移動(dòng)端的發(fā)現和商務(wù)功能，從而使客戶(hù)能夠隨時(shí)隨地瀏覽和購物。 “而且，智能手機和平板電腦的訂單增長(cháng)了40%，移動(dòng)流量翻了一番，平均移動(dòng)交易增長(cháng)了27%?！?/p>

　　4. USA Today

　　自適應網(wǎng)頁(yè)設計讓“今日美國”(USA Today)選擇了一種自適應方法，因為該技術(shù)允許品牌通過(guò)考慮操作系統和屏幕尺寸來(lái)檢測特定設備，以提供量身定制的體驗?！?因此，提供比響應式更豐富的新聞體驗可能會(huì )更受歡迎。

　　5. About.com

　　各類(lèi)新聞網(wǎng)站都采用了自適應網(wǎng)頁(yè)設計，因為它能快速加載網(wǎng)頁(yè)和滿(mǎn)足所有不同設備的讀者訪(fǎng)問(wèn)網(wǎng)站。

　　以上 5 個(gè)自適應網(wǎng)頁(yè)設計的案例從各自不同的角度，不管是網(wǎng)頁(yè)的訪(fǎng)問(wèn)速度，品牌影響效應，或是用戶(hù)體驗方面都極大的說(shuō)明了為什么自適應網(wǎng)頁(yè)設計會(huì )變的流行起來(lái)。

(責任編輯：十堰網(wǎng)站建設)
本文地址：http://www.ipldunia.com/itnews/2846.html